Download
1 / 32
320 likes | 571 Views
RESİMLERLE ÇALIŞMAK. Hazırlayan:Rabia ÜNLÜ Bölüm:Bilgisayar Programcılığı İ.Ö Numara:61120000019. RESİMLERLE ÇALIŞMAK. Bir sayfadaki resimlerin konumunu değiştirece ğ iz . Resimlerinize isim ve alt nitelikleri atayaca ğı z . Assets panelini kul l anarak resimleri yönetece ğ iz .
E N D
RESİMLERLE ÇALIŞMAK Hazırlayan:Rabia ÜNLÜ Bölüm:BilgisayarProgramcılığı İ.Ö Numara:61120000019
RESİMLERLE ÇALIŞMAK Birsayfadakiresimlerinkonumunudeğiştireceğiz. Resimlerinizeisimve alt nitelikleriatayacağız. Assets panelinikullanarakresimleriyöneteceğiz. Metninbelirlibirbölümünübirresminetrafınasaracağız Resimyertutucularınıkullanacağız. Temelresimdüzenlemearaçlarınıkullanarakresimlerdeayarlamalaryapacağız. Metinleriresimleregöre hizalayacağız. BU DERSTE BUNLARI ÖĞRENECEĞİZ: Resimformatlarınıtanıyacakvearalarındakifarklarıgöreceğiz. Birsayfayaçeşitliresimlerekleyeceğiz Resimlerimizinözelliklerindedeğişiklikyapacağız.
Resimler ziyaretçilerin dikkatini çekmek ve/veya site üzerinden vermek isteğimiz mesajları daha etkin bir şekilde iletmek için etkili bir araç olabilirler.Dreamweaver8, sitemizde kullandığımız resimler üzerinde kontrol imkânı sağlar. Bu sayede resim özelliklerini Dreamweaver içinden hızlı şekilde değiştirebilir, sitemiz için uygun hale getirebilir veya diğer resim işleme programları ile açabiliriz. Burada dikkat edilmesi gereken husus, resimlerinizin çalışma klasörü içerisinde toplu olarak bir alt klasörde yer almasıdır. Daha önce ifade edildiği gibi resimler için “image” yada “images” isimli alt klasörler oluşturulması tavsiye edilir.
RESİMLERLE ÇALIŞMAK Birarka plan resmininsitedekidiğerbelgelerde de kullanılabilmesinisağlamakiçinilgilistilsayfasınındüzenlenmesigerekir. body kuralı, belgeniniçeriğininbulunduğu<body> etiketiniyenidentanımlar.
Sayfalarımızın kullanıcıların dikkatini daha çok çekmek veya iletmek istediğimiz mesajları daha etkin şekilde aktarabilmek için sayfamızın arka planını da ayarlayabiliriz. Sayfanın arka planını değiştirmek için “Modify ( Değiştir )” menüsünden Page Properties (Sayfa Özellikleri) komutu kullanılabilir. Açılan iletişim kutusunda “Appearance ( Görünüm )” sekmesinden “Background color kısmından isteğimiz rengi veya “Background Image kısmından isteğimiz resmi seçerek arka planımızı değiştirebiliriz. BirArka Plan ResmiKullanmak RESİMLERLE ÇALIŞMAK
BirArka Plan ResmiKullanmak Arka plana resmimizi eklerken repeat(tekrarlama) özelleğinide belirleyerek arka plana uygulanacak resmin tekrarlanma türünüde belirleyebiliriz. arka plan resminin repeat (tekrarlama) özelliğini kontrol etmek için kullanabileceğiniz çeşitli seçenekler mevcuttur. repeat-y seçeneği, seçilen arka plan resmini düşey olarak döşer. repeat-xseçeneği, resmi yatay olarak döşer. repeatseçeneği, resmi hem düşey, hem de yatay olarak döşer. no-repeatdöşenmez. RESİMLERLE ÇALIŞMAK
RESİMLERLE ÇALIŞMAK BirArka Plan ResmiKullanmak Attachmentseçeneği arka plan resminin sabitlenip, sabitlenmeyeceğini veya sayfanın geri kalan kısmıyla birlikte kaydırılıp kaydırılmayacağını belirlemenizi sağlar. Bu özellik tekrarlanmayan arka plan resimlerinde kullanılır. Horizontalposition ve Verticalpositionseçenekleri arka plan resminin konumunu kontrol etmenizi sağlar. Konum ayarlama işlemi, yatay olarak yerleştirme için left, center ya da right seçeneklerinin, düşey olarak yerleştirme için de top, center ya da bottom seçeneklerinin ayarlanmasıyla veya sayısal değerler ve piksel (pixels) gibi bir ölçü birimi aracılığıyla tam bir konum tanımı yapılarak gerçekleştirilir.
RESİMLERLE ÇALIŞMAK SayfayaResimYerleştirmek Resimler, metingibidiğeriçerikbileşenleriylebirliktedoğrudanbelgeningövdekısmınayerleştirilebilir. Internet’tekulanılmaküzere GIF ve JPEG formatındakaydedilmiştir. Hiçbirresmitekrarkaydetmenizveya optimize etmenizgerekmez. GIF resimlerimaksimum 8-bit renkmodukullanılarakkaydedilebilir. Bu moddasadece256 renkgörüntülenebilir. GIF dosyalarıdahahızlıyüklenir, dahafazlaoptimizasyonseçeneğinesahiptir, ayrıcasaydamlıkveanimasyonudestekler. GIF dosyalarıiçin.gifuzantısıkullanılır.
RESİMLERLE ÇALIŞMAK SayfayaResimYerleştirmek JPEG formatında resimler 24-bit modunda kaydedilir, bütün renkler korunur ve fazlalık verilerin atıldığı kayıplı bir sıkıştırma tipi kullanılır. JPEG kalitesi düştükçe, bahsettiğimiz atılan verilerden dolayı resme ait daha fazla bilgi kaybı olur. JPEG’lerin kayıplı özelliğinden dolayı resmin kalitesini düşürmemek için bütün düzenleme işlemleri kaynak dosyası üzerinde yapılmalı ve tekrar JPEG olarak kaydedilmelidir. JPEG dosyalarının uzantısı .jpg’dir. İnternet’te PNG (Portable Network Graphic) adında üçüncü bir format daha kullanılır. PNG formatı, GIF’in yerini alması için tasarlanmıştır; JPEG ve GIF formatlarının özelliklerini birleştirir. PNG dosyaları kayıpsızdır, GIF dosyalarından daha iyi sıkıştırır ve renk kontrolü açısından daha fazla seçeneğe sahiptir, ayrıca JPG gibi bütün renkleri koruyabilir ya da bir GIF dosyası gibi sınırlı sayıda renk kullanabilir. PNG JPEG’lerin yerini alması için tasarlanmamıştır. PNG, animasyon desteğine sahip değildir ve eski Web tarayıcıları tarafından desteklenmez. Dosya uzantısı .png’dir.
SayfayaResimYerleştirmek RESİMLERLE ÇALIŞMAK Sayfalarımızda kullanmak isteğimiz resimleri öncelikle olarak sayfaya eklemek gerekmektedir. Bunun için resmi eklemek isteğimiz yere imlecimizi yerleştirdikten sonra “Insert (Ekle) menüsünden Image (Resim)” seçeneğini kullanılabilir. Bir diğer yolu ise CommonkategorisindeyeralanImages menüdüğmesinetıklayarakveImage’ı seçmektir.
SayfayaResimYerleştirmek RESİMLERLE ÇALIŞMAK Select Image Source iletişimkutusuçeşitliseçenekleriçerir. Resimalmakistediğinizklasörü,menüyükullanarakvemenüilegörünümaraçlarının alt kısmındayeralandosyaveklasörbölümündenseçimyaparaktanımlayabilirsiniz. Relative to seçeneğiDreamweaver’ınresimlere nasılgöndermedebulunacağınıbelirlemenizisağlar: Belgeyebağlıolarak (Document seçeneği) ya da siteninkökklasörünebağlıolarak (Site Root seçeneği).
SayfayaResimYerleştirmek RESİMLERLE ÇALIŞMAK AlternateTextseçeneği, kullanıcıların Web tarayıcısında resim görüntüleme özelliği devre dışı bırakıldıysa, kullanıcıların Web tarayıcısı resim görüntüleyemiyorsa, belirli bir resim yüklenemiyorsa veya kul anıcının resimleri görmesini engelleyen başka bir durum söz konusu ise, böyle durumlarda görüntülenecek olan metni tanımlamanızı sağlar.
SayfayaResimYerleştirmek Alternatif metin, resmin yazılı eşdeğeri olmalıdır, yani söz konusu işlevi tanımlanmalıdır. Alternatif metinlerle uygun olmayan şekilde tanımlanan boşluk resimlerini gösterebiliriz. Bu tip resimler için Alternative metin alanının sağındaki menü düğmesine tıklayarak <empty> seçeneğini işaretlemelisiniz. Alâkasız alternatif metinler kullanmaktan kaçının; bu yarardan çok zarar getirir. Bu uygulamada tanımladığınız alternatif metin, resimde gösterilen metnin aynısıdır. Alternatif metin, resimleri tanımlayan <img> etiketinin bir niteliğidir. RESİMLERLE ÇALIŞMAK
RESİMLERLE ÇALIŞMAK Dışarıdan bir resim aktardığınızda resmin genişliği ve yüksekliği Properties denetçisinde görüntülenir ve otomatik olarak koda yerleştirilir. Bu da Web tarayıcısına sayfanın yerleşim düzenini tanımlamak için ihtiyaç duyduğu bilgileri verir. Bu seçenek, sayfalarınızın yüklenme hızında fark yaratabilir.<img> (image - resim) etiketininyenigenişlikveyüksekliknitelikleri, asılresimdosyasınınbüyüklüğünüdeğiştirmedenresmindahaküçükboyutlardagörüntülenmesinisağlar. Resimleri Yeniden Boyutlandırmak ve Tazelemek
RESİMLERLE ÇALIŞMAK Bir belgedeki her eleman bir kutu (box) olarak değerlendirilir. CSS, kutu kavramını bir elemanın görünümünü, konumunu, vs. kontrol etmek için kullanır. Elemanlar ve dolayısıyla onları temsil eden kutular blok ya da satır içi tipte olabilir ve her kutu başka kutular içerebilir.Kutuları kullanılabilecek üç konum ayarlama yönteminden biriFloat, diğer ikisi de absolute ve fixed’tır. Floatseçeneğini left (sol) olarak ayarladığınızda etkilenen blok, yani studioPhoto sınıfının uygulandığı eleman, onu içeren bloğun sol tarafındaki kenar boşluğuna doğru itilir. Resimlerin Yerleştirilmesi
RESİMLERLE ÇALIŞMAK Align Niteliğini Kullanmak Dreamweaver, düşey ve yatay hizalama seçeneklerinin yer aldığı bir menü aracılığıyla Properties denetçisindeki resim hizalama seçeneklerine hızlı bir şekilde erişmenizi sağlar. Bu menüdeki tüm hizalama seçenekleri <img> etiketinin align niteliğini kullanır. align niteliğini <img> etiketine uygulanmış haliyle kullanmak artık tercih edilmeyen bir yöntemdir, çünkü bu satır içi, sunuma yönelik bir işaretleme şeklidir. Hizalama seçenekleri resmin bulunduğu geçerli satır temel alınarak uygulanır.
Align Niteliğini Kullanmak RESİMLERLE ÇALIŞMAK Bu seçenekler: •Default : Bu seçenekte hiçbir align niteliği tanımlanmamıştır. •Baseline : Resmin altını metin satırının üzerine oturduğu taban çizgisiyle hizalar. •Top :Resmin üstünü satırdaki en yüksek öğeyle hizalar (bu öğe bir resim olabilir). •Middle :Resmin ortasını metin satırının üzerine oturduğu taban çizgisiyle hizalar. •Bottom :Resmin altını metin satırının üzerine oturduğu taban çizgisiyle hizalar (Baseline seçeneğiyle aynıdır).
Align Niteliğini Kullanmak RESİMLERLE ÇALIŞMAK •TextTop :Resmin üstünü metin satırındaki en uzun boylu karakterle hizalar. Genellikle Top seçeneğiyle aynıdır (ama her zaman değil). •AbsoluteMiddle :Resmin ortasını metin satırının ortasıyla hizalar. •AbsoluteBottom : Resmin altını metin satırının en kısa boylu karakteriyle hizalar. •Left :Resmi sola kaydırır. Bundan sonra gelen metin, sağ tarafta resmin etrafını sarar. •Right :Resmi sağa kaydırır. Bundan sonra gelen metin, sol tarafta resmin etrafını sarar. Bu menüdeki seçenekler Left, Center ve Right hizalama düğmeleriyle aynı değildir. Menüdeki hizalama seçenekleri <img> etiketine uygulanır, ama yukarıda adı geçen üç hizalama düğmesi resimleri içeren blok elemanına (<p> etiketi gibi) uygulanır ve bu yüzden bu etiketin içindeki diğer her şey hizalama işleminden etkilenir, çünkü onlar da aynı bloğun bir parçasıdır.
Kimi zaman bir resmi vurgulamak için arka plandan ya da onu çevreleyen içerikten ayırmanız gerekir. Bu efekti oluşturmak için kullanabileceğiniz yöntemlerden biri, resmin etrafına bir kenarlık (border) eklemektir. Kenarlık, dikkati resmin üzerine çekebilir ve siteye daha hoş bir görünüm kazandırabilir. Bazen kenarlıklar bağlantıları göstermek için de kullanılabilir. Bir kenarlığı iki şekilde tanımlayabilirsiniz. RESİMLERLE ÇALIŞMAK 1. BirResminEtrafınaKenarlıkEklemek 2.
Resimlere İsim Atamak RESİMLERLE ÇALIŞMAK Resim isimleri, her ne kadar çoğunlukla görünmeseler de Web sayfalarının önemli bileşenlerindendir. Resimlere birer isim atamak genel olarak iyi bir alışkanlıktır ve bu isimler script yazarken nesneyi tanımlamak için kullanılır.
Assets Panelini Kullanarak Resim Eklemek RESİMLERLE ÇALIŞMAK Assets paneli, sitenizin bileşenlerini Dreamweaver içinden düzenleme imkânı sağlar. Bu aracı, çeşitli medya ve sayfa elemanlarını görmek ve düzenlemek için kul anabilirsiniz. Örneğin bütün resimlerinizi düzenlemeniz zor olabilir; özellikle de büyük bir site üzerinde çalışıyorsanız.Assetspaneli ile bu resimleri kolayca takip edebilirsiniz. Assets penceresininSitegörünümündesitedekibütünresimlergösterilir. Resimler,herhangibirbelgedeisterkullanılsın, isterkullanılmasın, bupenceredeotomatikolarakbelirirler.
Assets Panelini Kullanarak Resim Eklemek RESİMLERLE ÇALIŞMAK Panelin sitenizdeki bütün resim varlıklarının bir kataloğunu oluşturması birkaç saniye sürebilir. Sitenize yeni bir varlık eklediğinizde bu varlık Assets panelinde hemen görüntülenmeyebilir. Paneli, sitenizdeki tüm resimleri gösterecek şekilde güncellemek için site kataloğunu tazelemeniz gerekir. Bunun için Assets panelinin sağ alt köşesindeki Refresh Site Listdüğmesine tıklayın. Ayrıca Assets panelinde ilgili resmi seçebilir ve istediğiniz konuma sürükleyebilirsiniz. Bir resim dosyasının konumunu bulmak için söz konusu dosyayı seçtikten sonra Cmd tuşunu basılı tutup tıklayarak veya sağ tıklayarak açılan bağlam menüsündenLocateIn Site komutunu seçebilirsiniz.
RESİMLERLE ÇALIŞMAK Assets Panelini Kullanarak Resim Eklemek Assets panelini yatay olarak genişlettiğinizde FullPathsütununu görürsünüz. Bu sütunu kullanarak resimlerin nereye konduğunu görebilirsiniz
ResimleriFavoriListesiyleYönetmek Tekrar tekrar kullandığınız resimleri Favorite(Sık Kullanılanlar) listesine eklemeniz size önemli ölçüde zaman kazandırabilir. Sitenizdeki her resmi Favorite listenize ekleyebilirsiniz. Her sitenin kendi Favorite listesi vardır. Dreamweaver’ı kullanmaya başladığınızda bu liste boşturImages kategorisindeyken hem Site, hem de Favorite listesinde sitenizin içindeki belirli bir resmin konumunu bulmak için bağlam menüsünü kullanabilirsiniz. RESİMLERLE ÇALIŞMAK
RESİMLERLE ÇALIŞMAK ResimleriFavoriListesiyleYönetmek Bunun için bir resmi seçin ve bağlam menüsünden Locate in Site komutunu seçin. Site yapısında ilgili resim seçili hale gelecek şekilde Files paneli etkinleşecektir. Favorite listesinde oluşturduğunuz bir klasörü silmeniz gerekirse ilgili klasörü seçin ve Assets panelinin alt kısmındaki RemovefromFavoritesdüğmesine tıklayın.
BirResminEtrafındakiBoşluğu Ayarlamak RESİMLERLE ÇALIŞMAK Metinleriresimlerinetrafınasararkenilgiliresminetrafındakiboşluğu da ayarlamanızgerekebilir. Başlangıçtabelgenizdekimetinresmeçokyakınolacaktır. Bu da metninokunmasınızorlaştırabilir. Belirlibirmiktardaboşlukyaratmak, sayfanızınyerleşimdüzeninindahagüzelgörünmesineyardımcıolacaktır. Boşlukayarlarındapikseltabanlıbirölçükullanılır.
Bir Resim Yer Tutucusu Eklemek RESİMLERLE ÇALIŞMAK Asıl resim henüz hazır değilse bir resim yer tutucusu da ekleyebilirsiniz. Belgenize bir resim yer tutucusu ekleyerek asıl resmin sayfada metinler, tablolar veya diğer elemanlarla birlikte nasıl görüneceği hakkında yaklaşık olarak bir fikir elde edebilirsiniz. Images: Image placeholder düğmesi O Images: Image placeholder düğmesine tıklandığında Image Placeholderiletişimkutusuaçılacaktır
ResimDüzenlemeTercihleriniAyarlamak RESİMLERLE ÇALIŞMAK Dreamweaver ile Web sayfaları oluştururken, kullandığınız resimlerde değişiklik yapma gereği duyabilirsiniz. Kapsamlı düzenleme işlemleri için resmi harici bir resim düzenleme programında açmanız ve gereken ayarlamaları o şekilde yapmanız gerekir. Dreamweaver bu işlemi, ilgili resmi, tanımladığınız bir programda hızlı bir şekilde açmanızı sağlayarak basitleştirir.
Temel Resim Düzenleme İşlemleri RESİMLERLE ÇALIŞMAK Bazı temel resim düzenleme işlevlerine doğrudan Dreamweaver içinden erişebilirsiniz. Bunlar sayesinde harici bir editöre gerek kalmadan resminizde değişiklikler yapabilirsiniz. Sitenizde kul anacağınız resimleri yaratmak ya da önemli değişiklikler yapmak için harici bir resim editörüne ihtiyaç duysanız da, yerleşik halde bulunan Fireworks resim düzenleme özellikleriyle pek çok değişikliği (kırpmak, kontrastı ayarlamak, netleştimek gibi) doğrudan Dreamweaver belge penceresinde gerçekleştirebilirsiniz.
ResimTabanlıBağlantılarOluşturmak RESİMLERLE ÇALIŞMAK Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz.Bağlantılarıoluşturmak için metinlerde olduğu gibi resimleri de kolayca kullanabilirsiniz.Yereldosyayapınızındışındayeralanbirbelgeyeveyakökklasörünüzündışındabulunan herhangibirşeyebağlanabilmekiçinbirmutlakyol (absolute path) kullanmanız gerekir.
RESİMLERLE ÇALIŞMAK Resmi, aktif alan (hotspot) adı verilen çeşitli bağlı alanlara da bölebilirsiniz. Burada resme aktif alanları yerleştirmek için bir resim haritası (imagemap) kul anırsınız. Söz konusu aktif alanlar istenilen şekillerde de olabilirler. Bir sayfada birden fazla resim haritası kullanabilirsiniz, ama aynı sayfadaki her haritayı farklı bir şekilde adlandırmanız gerekir. Resim haritalarınızı adlandırmayı unutursanız Dreamweaver her biri için otomatik olarak sıralı isimler oluşturur (Map1, Map2, Map3 vs.) Bu tür genel isimler, uygulandıkları resim haritası ya da resimlerle ilgili tanımlayıcı bir bilgi içermezler Resim Haritası Oluşturmak
Beni Dinlediğiniz İçin Teşekkür Ederim.. Kaynaklar:Dreamweaver 8 kitapçığı adobedreamweaver 8 dersleri =https://www.google.com.tr/search?q=adobe+dreamweaver+dersleri&oq=adobe&aqs=chrome.1.69i57j69i59l2j69i60l2j0.7544j0j1&sourceid=chrome&espv=210&es_sm=122&ie=UTF-8#es_sm=122&espv=210&q=adobe+dreamweaver+8+dersleri&spell=1
