Bu derste sayfalarınıza metinlerle birlikte resim eklemeyi öğrenirken buradakine benzeyen bir sayfa oluşturacaksınız.
Resimlerle Çalışmak
Resimler izleyicilerinizin dikkatini çekmede ve Web sitenizde vermeyi düşündüğünüz mesajı etkin bir şekilde iletmede önemli bir rol oynayabilir. Bu derste Yoga Sangha proje sitesi için oluşturduğunuz sayfalara çeşitli resimler ekleyeceksiniz. Süreç boyunca resimler için kullanılan farklı dosya formatlarını tanıyacak, CSS aracılığıyla resimlerin konumlarını nasıl kontrol edeceğinizi ve resim öğelerini metinlerle nasıl bir araya getireceğinizi öğreneceksiniz.
Macromedia Dreamweaver 8’deki özellikler, sitenizde kullandığınız resimler üzerinde önemli ölçüde kontrol imkânı sağlar. Böylece resim özelliklerini Dreamweaver içinden hızlı bir şekilde değiştirebilir ve resimleri harici bir resim editöründe açabilirsiniz. Assets paneli, sitenizde kullandığınız ya da kullanmanız gereken bütün resimler için kataloglar hazırlamanızı sağlayarak resimlerin yönetimini basitleştirir.
5
A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
Bu dersin sonunda elde edilen çalışmayı görmek isterseniz, Lesson_05_Graphics klasöründeki Completed alt klasöründe yer alan index.html dosyasını açın.
Neler Öğreneceksiniz?
Bu derste şunları öğreneceksiniz:
• Resim formatlarını tanıyacak ve aralarındaki farkları göreceksiniz.
• Bir sayfaya çeşitli resimler ekleyeceksiniz
• Resimlerinizin özelliklerinde değişiklik yapacaksınız
• Bir sayfadaki resimlerin konumunu değiştireceksiniz
• Resimlerinize isim ve alt nitelikleri atayacaksınız
• Assets panelini kullanarak resimleri yöneteceksiniz
• Metnin belirli bir bölümünü bir resmin etrafına saracaksınız
• Resim yer tutucularını kullanacaksınız
• Temel resim düzenleme araçlarını kullanarak resimlerde ayarlamalar yapacaksınız
• Metinleri resimlere göre hizalayacaksınız
Yaklaşık Süre
Bu dersin tamamlanması yaklaşık 2 saat sürecektir.
Ders Dosyaları
Ortam Dosyaları:
Lesson_05_Graphics/Images/green-studio.jpg Lesson_05_Graphics/Images/studio-om.jpg Lesson_05_Graphics/Images/teaching.jpg Lesson_05_Graphics/Images/ys_bkg_main.gif Lesson_05_Graphics/Images/yoga_sangha-title.jpg Başlangıç Dosyaları:
Lesson_05_Graphics/index.html Lesson_05_Graphics/about/studio.html Tamamlanmış Proje:
Lesson_05_Graphics/Completed/index.html
Bir Arka Plan Resmi Kullanmak
Buradaki uygulamada, belirli bir sayfaya bir arka plan resmi ekleyeceksiniz. Arka plan resmi olarak sayfanızın üzerinde tarayıcı penceresinin genişliği ve yüksekliği boyunca tekrarlanarak döşenen küçük bir resim kullanabilirsiniz. Döşenmiş bir arka plan resminin sayfalarınızdaki kaydırma çubuklarının görüntüsü (ya da bunların olup olmaması) üzerinde herhangi bir etkisi yoktur. Ayrıca arka plan resmi olarak daha büyük resimler kullanabilir ve bunların yerleşimini, yatay olarak mı yoksa düşey olarak mı veya her iki şekilde de mi döşeneceklerini ya da döşenip döşenmeyeceklerini kontrol etmek için CSS’ten (Cascading Style Sheets) faydalanabilirsiniz. Arka plan resimleri, CSS desteği olmayan eski Web tarayıcılarında otomatik olarak döşenirler.
Sayfalarınız için hem bir arka plan rengi, hem de bir arka plan resmi tanımlayabilirsiniz.
Yavaş bağlantılarda ya da eski yavaş Web tarayıcılarında önce arka plan rengi
görüntülenebilir. Bu yüzden, bir arka plan resmi kullanmayı düşünüyor olsanız bile bu yaklaşımı kullanmak iyi bir fikirdir. Arka plan resmi yüklendikten sonra bu resim ekranda kamaya devam ederek arka plan renginin üzerini kaplar.
Bu uygulamada, önceki derslerde öğrendiğiniz beceri ve teknikler kullanılarak oluşturulan XHTML dosyalarıyla çalışacaksınız. Fazladan uygulama yapmak isterseniz, başlangıç sayfalarını yol gösterici olarak kullanarak bu dosyaları yeniden oluşturabilirsiniz.
1. Lesson_05_Graphics klasöründeki index.html dosyasını açın. CSS Styles panelindeki All Rules listesini kullanarak sangha.css stil sayfasından body kuralını seçin ve panelin alt kısmında yer alan Edit Style düğmesine tıklayın.
Bu index.html belgesi, önceki derste oluşturduğunuz sangha.css stil sayfasını
kullanmaktadır. Bir arka plan resminin sitedeki diğer belgelerde de kullanılabilmesini Edit Style düğmesi
sağlamak için ilgili stil sayfasının düzenlenmesi gerekir. body kuralı, belgenin içeriğinin bulunduğu <body> etiketini yeniden tanımlar.
Eski siteler üzerinde çalışırken nitelikleri doğrudan <body> etiketinin içinde tanımlayan belgelerle karşılaşabilirsiniz. Arka plan ve bağlantı renklerini tanımlamak için kullanılan bu yöntem artık benimsenmemektedir ve bu yöntemin kullanılmasından kaçınarak şimdiki uygulamada göreceğiniz gibi stil sayfalarının kullanımı tercih edilmelidir.
Page Properties iletişim kutusunu kullanarak bir arka plan resmini doğrudan tek bir sayfaya eklemeniz de mümkündür. Bu yöntemde, sadece uygulandığı belgede kullanılabilen bir dahili stil oluşturulur. Bunun için Modify > Page Properties komutunu ve ardından Appearance kategorisini seçin. Arka plan resminin yerini bulmak için Browse düğmesini kullanabilir ve arzu ederseniz bir yineleme (Repeat) yöntemi seçebilirsiniz. Page Properties iletişim kutusuna hızlı bir şekilde erişmek için Cmd+J (Macintosh’ta) ya da Ctrl+J (Windows’ta) klavye kısayolunu kullanın. Ayrıca doğrudan Appearance kısmını kullanarak sayfanın kenar boşluklarını da kontrol edebilirsiniz. Kenar boşluğu miktarının arka plan resmine bağlı olduğu durumlarda bu özellik işinize yarayabilir. Örneğin bu uygulamada üzerinde çalıştığınız belge için bir kenar boşluğu tanıyarak metnin sayfanın sol tarafındaki düşey çubuğun üstüne gelmesini engelleyebilirsiniz. Ayrıca body etiketinin margin niteliğini kullanarak sayfaların kenar boşluklarını harici stil sayfalarında da tanımlayabilirsiniz.
2. Background kategorisinde Background image metin alanının yanında bulunan Browse düğmesine tıklayın. Lesson_05_Graphics klasörünün Images alt klasöründe yer alan ys_bkg_main.gif resmini bulun. Bu resmi sayfanın arka planı olarak tanımlamak için Choose (Macintosh’ta) ya da Select (Windows’ta) düğmesine tıklayın.
Background kategorisi otomatik olarak seçili durumda olabilir, çünkü body etiketine bir nitelik, yani soluk sarı arka plan rengi (#FFFFCC) zaten uygulanmış durumdadır.
Bir yol adı ya da yolun kendisi, ilgili dosyanın konumunu tanımlar. Şu anda Background image metin alanında ys_bkg_main.gif resmine giden yol görüntülenmektedir; bu yolun gösterdiği konum, sangha.css belgesine göre tanımlanmıştır. Bir arka plan resmini eklerken dosyanızı kaydetmediyseniz, metin alanında resmin sabit diskinize göre
tanımlanan yol adının tamamı görüntülenir. Siz dosyanızı kaydedene kadar Dreamweaver bu tür referanslar oluşturamaz. Bu nedenle geçerli bir bağlantı yerine resmin sabit
diskinizdeki konumuna bağlı bir yol adı kullanılır. Dosya kaydedildiğinde yol adı güncellenerek yerini resmin, kendi içinde bulunduğu belgeye bağlı konumuna bırakır.
Bununla birlikte, dosyayı, herhangi bir resmi (hatta arka plan resimlerini) aktarmadan önce kaydetmek en iyisidir. Sabit diskinize göre tanımlanan yol adları uzak sunucuda işe yaramaz. Sayfanızı kaydetmeden resim eklediğinizde bağlantısı kopmuş resimler kullanma riski söz konusudur.
Select Image Source iletişim kutusunda seçtiğiniz resim yerel sitenizin dışında bir yerdeyse Dreamweaver bir uyarı penceresi görüntüler ve size dosyayı sitenize kopyalama seçeneğini sunar. Sitenizde kullandığınız sayfalar ve elemanlar (HTML, resimler, multimedya vs) genellikle yerel kök klasörünüzde bulunur. Mutlak yollar (absolute paths) adı verilen teknik sayesinde yerel kök klasörünüzde bulunmayan ama Internet’te (kendi sitenizde ya da başka bir yerde) belirli bir konumda bulunan elemanları da kullanabilirsiniz. Ders 4’te gördüğümüz bu teknik banner’larda sık sık kullanılır. Bu tür öğeler Dreamweaver’ın belge penceresinde
görüntülenmediği için bunları görebilmek için sayfanızı ya da sayfalarınızı Web tarayıcınızda önizlemeniz gerekir.
Arka plan resimlerinizi Macromedia Fireworks veya Adobe Photoshop gibi bir resim editöründe oluşturabilirsiniz. Büyük resimlerin sayfanın boyutunu ve indirme süresini ciddi ölçüde artırabileceğini aklınızdan çıkarmayın. Bu yüzden mümkün olan her yerde daha küçük resimler kullanmaya çalışın. Sayfalarınız ne kadar küçük olursa, yüklenmeleri de o kadar hızlı olur ve ziyaretçilerinizin sitenizde kalması, gezinmesi ve daha sonra sitenizi tekrar ziyaret etmesi olasılığı da yine aynı oranda artar.
Eğer birden fazla arka plan resmi arasından seçim yapacaksanız, Apply düğmesini kullanarak arka plan resmini Page Properties iletişim kutusunu kapatmadan sayfanızda görebilirsiniz.
Bir arka plan resmini silmek istiyorsanız, Page Properties iletişim kutusunu açıp ilgili dosyanın adını Background image metin alanından silebilir ya da CSS panelinin Properties listesinde background-image özelliğini bulup bunun değerini değiştirebilir ya da silebilirsiniz.
3. Repeat menüsünden repeat-y’yi seçin ve OK düğmesine tıklayarak Page Properties iletişim kutusunu kapatın.
Yaptığınız değişiklikler belgeye uygulanacak ve ys_bkg_main.gif arka plan resmi belge penceresinde düşey olarak döşenecektir. Belge penceresini sağa doğru, arka plan resminin bittiği noktayı geçecek şekilde genişletirseniz, son derste uyguladığınız arka plan renginiz görebilirsiniz.
Aşağıda gördüğünüz gibi 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-x seçeneği, resmi yatay olarak döşer
• repeat seçeneği, resmi hem düşey, hem de yatay olarak döşer
• no-repeat seçeneğinde resim döşenmez
Siz bir repeat özelliği tanımlamazsanız, varsayılan durumda arka plan resimleri hem yatay, hem de düşey olarak döşenir.
Bununla ilgili diğer seçenekler şunlardır:
• Attachment seç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.
• Horizontal position ve Vertical position seç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.
Sayfaya Resim Yerleştirmek
Resimler, metin gibi diğer içerik bileşenleriyle birlikte doğrudan belgenin gövde kısmına yerleştirilebilir. Bu uygulamada belgelerinize resim eklemeye başlayacaksınız.
Bu kitapta çalışacağınız bütün resimler, Internet’te kullanılmak üzere GIF ve JPEG formatında kaydedilmiştir. Hiçbir resmi tekrar kaydetmeniz veya optimize etmeniz gerekmez.
İnternet’te Kullanılan Resim Formatları
İnternet’te en çok ve en yaygın şekilde kullanılan resim formatı GIF (Graphic Interchange Format) ve JPEG’dir (Joint Photographic Experts Group). Resimleri Internet’te kullan- mak üzere kaydetme işlemi optimizasyon olarak adlandırılır ve Macromedia Fireworks ya da Adobe Photoshop gibi bir resim editörüyle gerçekleştirilebilir. Bir resmi GIF olarak mı yoksa JPEG olarak mı kaydedeceğinize karar verirken en yüksek resim kalitesini ve olası en düşük dosya boyutunu hedefleyin.
Genel bir kural olarak, resimde düz renklerden oluşan geniş alanlar varsa ve renk harmanları yoksa veya çok azsa GIF formatını kullanın. GIF’ler metinlerde, vektör tabanlı resimlerde, ayrıca sınırlı renge ve çok küçük boyutlara sahip resimlerde çok kullanışlıdır.
GIF resimleri maksimum 8-bit renk modu kullanılarak kaydedilebilir. Bu modda sadece 256 renk görüntülenebilir.
GIF dosyaları daha hızlı yüklenir, daha fazla optimizasyon seçeneğine sahiptir, ayrıca saydamlık ve animasyonu destekler. GIF dosyaları için .gif uzantısı kullanılır.
Fotoğraflarda ya da ton aralığı büyük olan resimlerde JPEG formatını kullanmalısınız.
JPEG formatı renk harmanlarını çok iyi görüntüleyebilir ve bir GIF resminin kesri kadarlık bir boyutta çok daha kaliteli fotografik resimler oluşturabilirsiniz. JPEG formatında resim- ler 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 kalite- sini 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 özel- liklerini 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.
1. Ekleme noktasını belgenin en üst kısmında bulunan Yoga Sangha başlığının önüne yerleştirin ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Ekleme noktasını yeni boş satırın içine yerleştirin. Insert araç çubuğunun Common kategorisinde yer alan Images menü düğmesine tıklayın ve Image’ı seçin.
Select Image Source iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak sayfanıza resim ekleyebilirsiniz. Alternatif olarak Insert > Image komutu da kullanılabilir.
Windows kullanıcıları için Preview images onay kutusu, göz atma esnasında tıkladığınız resimlerin küçük örneklerini görmenizi sağlayan kullanışlı bir seçenek sunar. Bu seçenek işaretlendiğinde resimler Select Image Source iletişim kutusunda boyutları, dosya büyüklükleri ve yaklaşık indirilme süreleriyle birlikte görüntülenirler.
Macintosh’ta Preview images onay kutusu yoktur. Eğer sütunlu görüntü modundaysanız, bir resmi seçtiğinizde Select Image Source iletişim kutusunun sağ panelinde resmin boyutları, dosya büyüklüğü ve yaklaşık indirilme süresiyle birlikte resmin önizlemesini görürsünüz.
2. Lesson_05_Graphics/Images klasöründeki yoga_sangha-title.jpg dosyasını bulun.
Select Image Source iletişim kutusu çeşitli seçenekler içerir. Resim almak istediğiniz klasörü menüyü kullanarak (bu menü Macintosh’ta isimsizdir ve Windows’ta da Look In [Konum] olarak adlandırılmıştır) ve menü ile görünüm araçlarının alt kısmında yer alan dosya ve klasör bölümünden seçim yaparak tanımlayabilirsiniz. Macintosh kullanıcıları hiyerarşik bir görünümden faydalanarak farklı dosya ve klasör seviyelerine erişebilir.
Windows’ta görünümü belirli dosya tipleriyle sınırlandırmak için kullanılabilen bir Files of type (Dosya türü) menüsü ve seçilen dosyanın adını (normalde uzantı olmadan) görüntüleyen bir File name (Dosya adı) metin alanı vardır.
URL metin alanında, seçilen resme erişmek için index.html belgesi tarafından kullanılacak yol görüntülenir. URL metin alanının altında Relative to menüsü yer alır ve varsayılan durumda Document olarak ayarlanmıştır. Relative to seçeneği Dreamweaver’ın resimlere nasıl göndermede bulunacağını belirlemenizi sağlar: Belgeye bağlı olarak (Document seçeneği) ya da sitenin kök klasörüne bağlı olarak (Site Root seçeneği). Belgeye bağlı göndermelerde Dreamweaver resme ait yolu, HTML belgenizin resim dosyasına bağlı göreceli konumunu temel alarak oluşturur. Relative to menüsünde Document seçeneği
Images: Image düğmesi
işaretlendiğinde menünün sağ tarafında resim eklediğiniz belgenin dosya adı belirir (burada index.html’i görürsünüz). Site root (göreceli göndermede bulunma) seçeneği kullanıldığında resmin yolu, seçilen resmin sitenin köküne (yerel kök klasörünün en üst düzeyi olarak da bilinir) bağlı göreceli konumu temel alınarak oluşturulur. Site root seçeneği işaretlenirse, menünün sağında sitenin adı görünür. Genelde belgeye bağlı yolları ve bağlantıları kullanmanız gerekir. Çok büyük bir siteniz varsa ya da sayfaları sık sık taşımanız gerekiyorsa “Site Root” seçeneğini kullanmak isteyebilirsiniz. Resimler için kitap boyunca sadece belgeye bağlı yolları kullanacaksınız.
Select Image Source iletişim kutusunda dinamik sitelerle kullanılmak üzere tasarlanan çeşitli ilave seçenekler göreceksiniz. Select File Name From bölümünde Macintosh kullanıcıları bir Data Sources düğmesiyle bir de Sites and Servers düğmesi göreceksiniz.
Select File Name From kısmı Windows’ta üst iletişim kutusunun üst tarafındadır ve iki radyo düğmesi (File system ve Data sources) ile birlikte bir de Sites and Servers düğmesi içermektedir. File System, Yoga Sangha proje sitesi için ve bir sunucu teknolojisi (ColdFusion, ASP, JSP ya da PHP gibi) kullanmayan ve buna benzeyen siteler için hem Macintosh’ta, hem de Windows’ta varsayılan seçim yöntemidir. Data Sources ve Sites and Servers seçenekleri belgelerin bir uygulama sunucusunda çalıştırıldığı dinamik siteler için kullanılır. Kitaptaki derslerde bu seçenekleri kullanmanıza gerek yok, çünkü verilerlere yönetilen dinamik bir site oluşturmuyorsunuz.
3. Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayın. Image Tag Accessibility Attributes iletişim kutusundaki Alternate Text metin alanına Yoga Sangha yazın ve OK düğmesine tıklayın.
Alternate Text seç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 kullanı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.
Alternatif metin, resmin yazılı eşdeğeri olmalıdır, yani söz konusu işlevi tanımlamalıdır.
Örneğin sitenin gezinti sistemi için önem taşıyan bütün resimlerde alternatif metin kullanmak gerekir. Alternatif metin eklemek faydalı bir özelliktir, çünkü kullanıcıların Web tarayıcısında resim görüntüleme özelliği devre dışı bırakıldıysa ya da kullanıcıların Web tarayıcısı salt metin tipinde ise, bu sayede normalde kaçıracakları bilgilerden bazılarını görebilirler. Ayrıca görme engelli insanlar genellikle okuyucu (reader) ya da konuşma örnekleyici (speech synthesizer) adı verilen ve Web sayfalarının içeriğini sesli olarak ileten çeşitli programlar kullanırlar. Böyle durumlarda resimlere ait alternatif metinler sesli olarak okunur. Birçok Web tarayıcısında kullanıcı imleci resmin üzerine getirdiğinde ilgili alternatif metin görüntülenir. Kullandığınız alternatif metinler ne kadar açıklayıcı ve ayrıntılı olursa, sitenizin kullanıcıları için de o kadar faydalı olurlar.
Kimi zaman sadece görsel olarak işlev gören ve sayfanızın içeriği açısından önemli sözcüklerin ya da başka betimleyici öğelerin görüntülenmediği resimler kullanabilirsiniz.
Görme engelli kullanıcıların sitenizde gezinirken işlerini zorlaştırabilecek işlevsiz resimlere örnek olarak alternatif metinlerle uygun olmayan şekilde tanımlanan boşluk resimlerini (belirli bir yer işgal eden görünmez resimler) 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.
Alternatif metin, ilgili resim seçildikten sonra Properties denetçisi aracılığıyla değiştirilebilir. <empty> seçeneğini içeren menü Properties denetçisinde de mevcuttur.
Section 508 ve WCAG’ye Uygun Siteler Oluşturmak
Erişilebilirliğin (accessibility) amacı, mümkün olan en fazla kullanıcının erişebileceği siteler yaratmaktır. Aşağıda açıklamaları verilen Section 508 ve Web İçeriği Erişilebilirlik Yönergeleri (Web Content Accessibility Guidelines - WCAG), Internet üzerinden erişilebilirlik konusuyla ilgili ihtiyaçları temel almaktadır.
Section 508, 1973’te çıkarılan (Amerika Birleşik Devletleri’nde) Rehabilitasyon Kanunu’nda yapılan bir değişikliktir. Buna göre A.B.D.’deki federal bürolar, Internet gibi teknolojilerle kullanıma sunulan içeriğe erişmek için bütün kullanıcıların eşit fırsatlara sahip olmasını sağlayarak engelli insanların ihtiyaçlarının dikkate alınmasını sağlamak zorundadır. Section 508, engelli olmayan insanların kullanabildiği mukayese edilebilir bilgi kaynakları ve servislerin sunulacağı engelli insanlar için gereken standartları tanımlar. Section 508 her ne kadar özel sektör için zorunlu olmasa da, bütün Web sitelerinde olabildiğince uyumlu kodlar kullanma alışkanlığının edinilmesi pek çok sebepten dolayı önemlidir. Görme zayıflığından renk körlüğüne hatta tama- men körlüğe kadar çeşitli bedensel engeller, nüfusun ve dolayısıyla kullanıcılarınızın önemli bir bölümünü etkilemektedir.
WCAG, erişilebilirlikle ilgili pek çok sorunun çözümü için W3C tarafından geliştirilmiştir ve erişilebilir siteler geliştirmeyle ilgili açık ve anlaşılır bir yönerge paketi olarak işlev görmektedir.
Erişilebilir siteler tasarlamak WebTV, mobil telefonlar ve PDA’ler açısından da önemlidir. Konuyla ilgili ayrıntılı bilgi için http://www.w3.org/TR/WAI-WEBCONTENT/ adresini ziyaret edebilirsiniz.
Bu sorunun bir çözümü, sitenizin bir alternatif, salt metin tabanlı versiyonunu oluşturmaktır.
Ama aynı zamanda bu çözüm mümkün ya da gerekli olmayabilir (özellikle de sunulan içerik ve hizmetlerle ilgili sorunlar, kullanılabilir alan, ilâve sayfaların oluşturulması için gereken zaman ve kaynak ile sitenin devamlılığını sağlamak için artan ihtiyaçlar dikkate alındığında). Salt metin tabanlı bir sayfaya erişmek (oluşturulurken kullanılan tekniklere ve içeriğine bağlı olarak) mümkün olmayabilir. Salt metin tabanlı sitelerin diğer bir dezavantajı da, genellikle asıl siteye göre daha az bilgi içermeleri ve/veya işlevsellik anlamında asıl siteye göre daha yetersiz olmalarıdır.
Tek bir site kullanmak ve buna erişilebilirlik özellikleri eklemek genelde en iyi çözümdür. Böyle bir site tek bir konumda mümkün olduğunca fazla (birbirinden farklı) kullanıcı için çeşitli seçenekler sunabilir, ayrıca içeriği kopyalama ve sitenin devamlılığını sağlama gibi işlemleri iki kez yapma zahmetinden kurtarır. Erişilebilirlik sorunlarını çözmek için aynı sayfaları oluşturmak zorunda kalmadan ve sayfa tasarımınızın görsel özelliklerine zarar vermeden faydalanabileceğiniz başka birçok entegre çözüm mevcuttur. Dreamweaver; CSS, alternatif metin, açıklamalar ve özetler gibi bileşenlerin kullanımıyla erişilebilir Web sayfaları oluşturmanızı sağlayan çeşitli basit yön- temler sunar.
Erişilebilirlikle ilgili mesajları etkinleştirmek ya da devre dışı bırakmak için Dreamweaver > Preferences (Macintosh’ta) ya da Edit > Preferences (Windows’ta) komutunu ve kategori listesinden de Accessibility’yi seçin.
Erişilebilirlik nitelikleriyle ilgili mesaj almak istemediğiniz bütün elemanların işaretini kaldırın.
4. Heading 1 ile biçimlendirilen Yoga Sangha metninin bulunduğu satırı silin ve belgeyi kaydedin.
Bu başlığa artık gerek yok, çünkü resim proje sitesinin ismini içeriyor ve alternatif metin de tanımlandı. Bu metnin ve bulunduğu satırın silinmesi gerekiyor.
yoga_sangha-title.jpg resmi bir JPEG olarak kaydedildi; bunun sebebi metnin arkasındaki geniş ton aralığıdır. Metni oluşturan satırların kalitesini korumak için resim yüksek kaliteli bir JPEG olarak kaydedildi ve bu da dosya boyutunun büyük olmasına sebep oldu. Daha düşük kalitede bir JPEG formatı kullanılsaydı, aynı resimde daha fazla JPEG kalıntısı (Yoga Sangha metni gibi düz renkli alanlarda daha sık rastlanan gereksiz verilerin atıldığı yerlerdeki küçük blok şeklinde kareler) olacaktı. Burada fotografik alanlar ve metnin ihtiyaç duyduğu noktalar arasındaki dengeyi sağlamak için en iyi seçenek JPEG’tir.
Resimleri Yeniden Boyutlandırmak ve Tazelemek
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.
1. yoga_sangha-title.jpg resmini seçin ve Properties denetçisinde yer alan W metin alanındaki değeri 220 piksel, H metin alanındaki değeri de 40 piksel yaparak genişliği ve yüksekliği değiştirin.
Değişikliği uygulamak ve görüntüyü tazelemek için Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basmanız veya belge penceresinin içinde bir yere tıklamanız gerekir.
<img> (image - resim) etiketinin yeni genişlik ve yükseklik nitelikleri, asıl resim
dosyasının büyüklüğünü değiştirmeden resmin daha küçük boyutlarda görüntülenmesini sağlar. Seçilen resmin dosya boyutunun (Properties denetçisinde görüntülenir)
değişmediğine dikkat edin. Bütün resim düzenlemelerini (netlik, resim kalitesi ve dosya büyüklüğünün ayarlanması da dahil olmak üzere) tek bir resim editöründe yapacak şekilde ayarlamanın önemli avantajları vardır. Aynı resmi bir resim editöründe küçültür ve Internet için yeniden optimize ederseniz dosya boyutu daha küçük ve resim kalitesi de daha yüksek olacaktır.
Dosya boyutu Web sayfaları için önemli bir özelliktir. Dosya boyutu ne kadar küçükse, resimleriniz o kadar hızlı yüklenir. Ve sayfalarınız ne kadar hızlı yüklenirse, ziyaretçilerinizin sıkılıp başka bir siteye gitme olasılığı da o oranda azalacaktır.
2. Seçili durumdaki resmin kenarlığı üzerindeki seçim tutamaçlarından (siyah kareler) birine tıklayın. Yeniden boyutlandırmak üzere imleci sürükleyin ve resmi orijinalinden daha büyük hale getirin.
Genişlik ve yükseklik özellikleri otomatik olarak güncellenecektir. Yeni boyutların kalın olarak yazıldığına dikkat edin. Bu kalın biçimlendirme ilgili resmin yeniden
boyutlandırıldığını gösterir. Kimi zaman bir resmi yanlışlıkla boyutlandırabilirsiniz. Bu kalın biçimlendirme özelliğini görerek durumu fark edebilirsiniz.
Resmin boyut oranını korumak isterseniz resmin sağ alt köşesindeki seçim tutamaçlarını sürüklerken Shift tuşunu basılı tutun.
Resmin boyutlarını büyütürken kalitenin düştüğüne dikkat edin. Resimler Web
tarayıcılarında ekran çözünürlüğünde (72 dpi) görüntülenir. Bu çözünürlük değeri, resmi orijinalinden daha büyük boyutlarda görüntülemek için yeterli değildir. Bu yüzden, mümkün olan en küçük dosya boyutunu elde etmek üzere bir resim editöründe (Macromedia
Fireworks ya da Adobe Photoshop gibi) boyutları ayarlamanız gerekecektir.
3. Properties denetçisinde W ve H metin alanlarının hemen sağında yer alan Reset Image To Original Size düğmesine tıklayın.
Reset Image To Original Size düğmesi Resample (görüntüyü tazeleme) simgesiyle gösterilir.
Bu düğme W (Genişlik) ve H (yükseklik) metin alanlarını birleştiren çizgilerin ortasında yer alır. Resample simgesi ve birleştirme çizgileri, resmin boyutlarının değiştirildiğini gösteren diğer bir işarettir. Bu simge, sadece resmin boyutlarında değişiklik yapıldığında belirir.
Simgeye tıkladığınızda resim orijinal büyüklüğüne getirilir. Genişlik ve yükseklik değerini gösteren sayıların düz metne döndüğüne dikkat edin. Bu da resmin orijinal büyüklüğe ayarlandığını gösterir.
Çok büyük resimler ya da diğer sunucularda yer alan resimleri kullanırken düşük kaliteli bir kaynak resmi kullanarak ziyaretçilere görsel bir ipucu sağlayabilirsiniz.
Düşük kaliteli bir kaynağı tanımlarken, ilk başta görüntülenecek olan daha düşük kaliteli bir resim seçersiniz. Daha yüksek kaliteli olan resim, indirme işlemi tamamlandığında belirir. Bir resim seçildiğinde Properties denetçisinde düşük kaliteli kaynak resminin tanımlanması için bir Low Src metin alanı belirir.
Bir resim seçmek için bu metin alanının yanındaki Browse For File Folder isimli klasör simgesine tıklayın. Bu tekniği, asıl resmin doysa boyutunun büyük olduğunu ve bu yüzden indirilmesinin kullanıcının tahmininden daha uzun süreceğini biliyorsanız ya da resmi yavaşladığı bilinen bir kaynaktan alıyorsanız kullanabilirsiniz. Böyle durumlarda kullanılan düşük kaliteli kaynak resimleri genellikle “Yükleniyor” ya da “Loading” gibi mesajlar içerir.
Resimlerin Yerleştirilmesi
Bir belgeye resim yerleştirirken bu yerleştirme işlemiyle ilgili olarak çeşitli seçeneklerden faydalanabilirsiniz. Aşağıdaki uygulamada CSS kullanan bir hizalama ayarı oluşturmak için faydalanılan bir yöntem gösterilmiştir.
1. index.html belgesinde ekleme noktasını “At Yoga Sangha, we’re dedicated to teaching…” ifadesinin yer aldığı satırın başına yerleştirin. Lesson_05_Graphics/
Images klasöründe yer alan studio-om.jpg resmini ekleyin.
studio-om.jpg resmini eklerken bu derste daha önce yer alan “Sayfaya Resim Yerleştirmek”
uygulamasında öğrendiğiniz teknikleri kullanın. Varsayılan durumda resim metin satırının başında görünür.
Aşağıdaki uygulamalarda CSS kullanarak resmi sola hizalayacak ve metni resmin sağ tarafını saracak şekilde ayarlayacaksınız.
2. CSS Styles panelindeki New CSS Rule düğmesine tıklayın. Selector Type alanında Class’ı seçin, Name metin alanına .studioPhoto yazın ve OK düğmesine tıklayın. CSS Rule Definition iletişim kutusunda Box kategorisini seçin, Float menüsünden left’i seçin ve OK düğmesine tıklayın.
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ıriçi tipte olabilir ve her kutu başka kutular içerebilir. Burada kutuyu studioPhoto sınıfını uygulayacağınız satıriçi resim elemanının konumunu kontrol etmek için kullanıyorsunuz. Kullanılabilecek üç konum ayarlama yönteminden biri Float, diğer ikisi de absolute ve fixed’tır.
Float seç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.
Belgenin gövde kısmı bir kutu olarak değerlendirilir ve bazı durumlarda tutucu blok olarak da düşünülebilir. Kayar durumdaki elemanın üst kısmı, içinde bulunduğu bloğun üst kısmıyla hizalanacak ve çevreleyen içerik, kayar durumdaki elemanın etrafını saracaktır.
3. Belge penceresinde studio-om.jpg resmini ve ardından Properties denetçisindeki Class menüsünden studioPhoto’yu seçin.
Resim sayfanın sol tarafına kayacak ve içinde bulunduğu paragraf bloğunun üst kısmıyla hizalanacaktır. Sonraki metin, sağ tarafta resmin etrafını saracaktır.
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ıriçi, sunuma yönelik bir işaretleme şeklidir. Ancak eski siteler üzerinde çalışıyorsanız bu yöntemin nasıl işlediğini de bilmeniz gerekebilir. Hizalama seçenekleri resmin bulunduğu geçerli satır temel alınarak uygulanır. Bu seçenekler aşağıda açıklanmıştır.
• 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).
• 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).
• Absolute Middle. Resmin ortasını metin satırının ortasıyla hizalar.
• Absolute Bottom. 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.
Bir Resmin Etrafına Kenarlık Eklemek
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. Şimdiki uygulamada kenarlık oluşturmak için CSS kullanacaksınız, fakat image etiketine border niteliği uygulamak şeklindeki ikinci yöntemi de öğreneceksiniz.
1. CSS Styles panelindeki All Rules listesinden studioPhoto kuralını seçin ve panelin alt kısmındaki Edit Style düğmesine tıklayın.
Kurallar, onları oluşturduğunuz sırayla, en eskisi listenin en üstünde ve en yenisi de en altta olacak şekilde görüntülenirler.
2. CSS Rule Definition iletişim kutusunda Border kategorisini seçin. Style alanında Top menüsünden solid’i seçin, Width alanındaki Top satırına karşılık gelen metin alanına 1 yazın ve Color alanında Top satırına karşılık gelen metin alanına #747E3F yazın. OK düğmesine tıklayarak iletişim kutusunu kapatın ve yaptığınız değişiklikleri uygulayın.
Dreamweaver resmin etrafına bir piksel genişliğinde bir kenarlık ekleyecektir. Border yani kenarlık ayarında, Rule Definition iletişim kutusunun varsayılan seçeneği olan piksel tabanlı ölçü birimi kullanılmaktadır. Kenarlığın genişlik değerini istediğiniz gibi ayarlayabilirsiniz.
Bir resme <img> etiketinin border niteliğini kullanarak da kenarlık
uygulayabilirsiniz. Bunun için ilgili resmi seçin ve Properties denetçisindeki Border metin alanına istediğiniz kalınlık değerini girin. Bir resme bağlantı atarsanız, kenarlık rengi, Page Properties iletişim kutusunda tanımlanan varsayılan bağlantı rengi (Link Color) ile aynı olacaktır (eğer bir CSS stili uygulanmadıysa, çünkü bu durumda bağlantı kenarlık renginde herhangi bir değişiklik yapmaz). Kenarlık rengi, Page Properties iletişim kutusunda tanımlanan varsayılan metin rengiyle aynı olacaktır. Aşağıdaki örnekte, Properties denetçisi ile uygulanmış border niteliğine sahip bir resim görüyorsunuz. Buradaki uygulamada yaptığınız gibi resim kenarlıklarını tanımlamak için CSS kullanmak amacıyla border niteliğini kullanmaktan kaçınmak, daha iyi bir yaklaşımdır.
Resimlere İsim Atamak
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.
yoga_sangha-title.jpg resmini seçin ve Properties denetçisindeki resim adı metin alanına Yoga yazın.
Properties denetçisindeki resim alanı belirli bir etiketle gösterilmemiştir. Bu alan sol üst köşede, resim boyutunun hemen altında yer alır.
Resme atadığınız isim dahili bir isimdir ve asıl olarak davranışlar (Behaviors) gibi işlevler (Ders 8) için kullanılır. Resimleri adlandırmak şart değildir, ama bunun iyi bir alışkanlık olduğunu unutmayın. Resim isimlerini kısa tutun, küçük harflerle yazın ve boşluk ya da özel karakterler kullanmaktan kaçının.
Resim adı metin alanı
Assets Panelini Kullanarak Resim Eklemek
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 kullanabilirsiniz.
Örneğin bütün resimlerinizi düzenlemeniz zor olabilir; özellikle de büyük bir site üzerinde çalışıyorsanız. Assets paneli ile bu resimleri kolayca takip edebilirsiniz.
1. Files panel grubunda Assets panelini seçin. Assets panelinin sol tarafında yer alan düğme sütununun üst kısmında yer alan Images düğmesine tıklayın.
Assets paneli ya da Files panel grubu görünür durumda değilse, Files panel grubu içinde Assets panelini açmak için Window > Assets komutunu kullanabilirsiniz.
Assets panelinin sol tarafında yer alan diğer düğmeler sitenizde kullanabileceğiniz farklı varlık (asset) tiplerini temsil eder. Bunların içinde renkler de (Colors) yer alır.
Assets paneliyle iki şekilde çalışabilirsiniz. Paneli Site listesiyle (sitenizdeki bütün resimlerin tam bir listesini içerir) ya da Favorites listesiyle (sadece sizin sık kullanılan olarak işaretlediğiniz resimleri gösterir) görüntüleyebilirsiniz. Her iki görünümde de seçtiğiniz bir resmi sayfanıza ekleyebilirsiniz.
Images düğmesi
2. Eğer seçili durumda değilse (varsayılan durumda seçili olması gerekir) Assets panelinin üst tarafındaki Images:Site seçeneğine (Images düğmesinin sağında yer alır) tıklayın.
Yoga Sangha proje sitesinde, Assets panelinin Images bölümünde listelenen çoğu resmin birden fazla kopyasını göreceksiniz. Çünkü her ders klasöründe ve ilgili Completed klasöründe resimlerin farklı kopyaları bulunmakta ve dolayısıyla sitede her resmin çeşitli kopyaları kullanılmaktadır. Kendi sitelerinizde aynı resimlerden bazılarını içeren birden fazla resim klasörü kullanmadıkça bu durumla karşılaşmazsınız. Boşluk resmi (spacer) olarak kullanılan GIF’lere ve gezinti sisteminde kullanılan resimlere bazen farklı resim klasörlerinde rastlarsınız. Bir resmin birden fazla kopyasını bulundurmak genellikle şart değildir. Çünkü sitenizde herhangi bir konumdaki resimleri kullanabilirsiniz. Aslında birden fazla resim kullanımı pek istenmez. Bir resmi güncellemeniz gerektiğinde aynı resmin birden fazla kopyası varsa bir sürü dosyada değişiklik yapmanız gerekebilir.
Assets penceresinin Site görünümünde sitedeki bütün resimler gösterilir. Resimler, herhangi bir belgede ister kullanılsın, ister kullanılmasın, bu pencerede otomatik olarak belirirler. Panelin sitenizdeki bütün resim varlıklarının bir katalogunu oluşturması birkaç saniye sürebilir.
Sitenizi ilk oluşturduğunuzda önbelleği etkinleştirmediyseniz, Dreamweaver önbelleği etkinleştirmek ve oluşturmak için Assets panelindeki Refresh Site Liste düğmesine tıklamanız gerektiğini bildirir. Önbellek varsayılan durumda etkindir ve siz sitenize ait Site Definition iletişim kutusundaki Enable Cache onay kutusunun işaretini kaldırmadığınız sürece otomatik olarak oluşturulur.
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 katalogunu tazelemeniz gerekir. Bunun için Assets panelinin sağ alt köşesindeki Refresh Site List düğmesine tıklayın.
3. Ekleme noktasını “Yoga Sangha was founded by Katchie Ananda and Jayne Hillman” ifadesiyle başlayan paragrafın başına yerleştirin. Assets panelinde, Lesson_05_Graphics/Images klasöründe yer alan teaching.jpg resmini bulun ve Insert düğ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ünden Locate In Site komutunu seçebilirsiniz.
Assets panelini yatay olarak genişlettiğinizde Full Path sütununu görürsünüz. Bu sütunu kullanarak resimlerin nereye konduğunu görebilirsiniz. Macintosh kullanıcıları paneli sağ alt köşesine tıklayıp sürükleyerek genişletebilir. Paneli genişletmenizi sağlayacak kadar yere sahip olmak için önce paneli ya da panel gruplarını sola taşımanız gerekebilir. Windows’ta panelleri arabirimin geri kalan kısmından ayıran düşey çubuğu üzerine tıklayıp sola sürükleyebilirsiniz.
Resim belge penceresinde belirecektir.
Assets panelinde resim seçtiğinizde panelin üst kısmında resmin küçük bir önizleme görüntüsü belirir. Kullanılabilir önizleme alanını büyüterek (imleci görünüm alanının alttaki kenarlığının üzerine getirin ve sürükleyerek yeniden boyutlandırın) ve/veya tüm Assets panelini büyüterek bu küçük resmin boyutlarını büyütebilirsiniz. Assets panelinde bir resmi kolayca seçebilir ve Edit simgesine tıklayarak resmi varsayılan resim düzenleme programınızda açabilirsiniz.
Sütun üstbilgilerine tıkladığınızda resim listesi yeniden sıralanacaktır. Örneğin Name sütununun üstbilgisine tıkladığınızda resimler alfabetik olarak küçükten büyüğe (yukarıya bakan bir okla gösterilir) ya da büyükten küçüğe (aşağıya bakan bir okla gösterilir) doğru yeniden sıralanır. Diğer sütun üstbilgilerini de boyuta (Size), türe (Type) ve tam yol (Full Path) göre sıralamak için kullanabilirsiniz. Diğer sütunları görmek için ekranı sağa doğru kaydırmanız gerekebilir. Bir sütunda ya da sütun üstbilgisinde üç nokta (...) görürseniz, bu sütunun içeriğini görmeniz için paneli genişletmeniz gerekir. Assets paneli etkinleştirildiğinde (listedeki bir resme tıklayarak etkinleştirin) aradığınız dosyayı seçmek için dosyanın adının ilk harfini (ya da ilk birkaç harfini) yazabilirsiniz.
Bu fotoğraf bir JPEG olarak kaydedilmiştir. Aynı resmi bir GIF olarak kaydetseydiniz resim kaba degradelerle, renklerin etrafında kırıklı kenarlarla piksel piksel görüntülenirdi. Bunun sebebi, bu formatta (GIF) bütün renk tonlarının sadece birkaç renkle eşleştirilmesidir. Bu durumda en iyi seçenek JPEG’tir.
4. Image Tag Accessibility Attributes iletişim kutusundaki Alternate Text metin alanına “A Yoga Sangha Teacher” yazın ve OK düğmesine tıklayın. Belge penceresinde yeni eklediğiniz resmi seçin ve Properties denetçisindeki resim adı metin alanına teacher yazın. Resme studioPhoto CSS sınıfını uygulayın.
Resimlerinize onları ekleme aşamasında isim ve alternatif metin ayarsanız zaman
kazanırsınız. Ayrıca gerektiğinde Code görünümünde bunlarla çalışmanız daha kolay olur.
Bu aşamada belgenizin görünümü üstteki örneğe benzeyecektir.
Resimleri Favori Listesiyle Yö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ştur. Aşağıdaki uygulamada Site kategorisinden Favorite listenize bir resim ekleyecek ve sonra da bu listeyi düzenleyeceksiniz.
1. Assets panelinin Site listesinde teaching.jpg resmini seçin ve sağ alt köşedeki Add To Favorites düğmesine tıklayın.
Bir iletişim kutusu açılarak seçilen varlıkların bu sitenin Favorite listesine eklendiğini bildirecektir. İletiyi kabul etmek için OK düğmesine tıklayın ve iletişim kutusunu kapatın.
Bir resmi Favorites listesine eklemek için kullanabileceğiniz birkaç alternatif yöntem mevcuttur. Resmi Files panelinde seçebilir ve panelin sağ üst köşesindeki bağlam menüsünü açarak Add to Favorites komutunu seçebilirsiniz. Diğer bir yöntem de, belge penceresindeki bir resmi sık kullanılan varlıklardan biri haline getirmektir. Bunun için resme Ctrl tuşunu basılı tutarak tıklayın (Macintosh’ta) ya da sağ tıklayın (Windows’ta) ve açılan bağlam menüsünden Add To Image Favorites komutunu seçin. Bu bağlam menüsü pek çok seçenek içerir ve bağlantılar ve Flash nesneleri gibi diğer elemanlarla birlikte de kullanılabilir.
Add to Favorites (Sık Kullanılanlara Ekle) düğmesi
2. Assets panelinin üst kısmındaki Images seçenekleri arasında yer alan Images:
Favorites radyo düğmesini seçin.
Assets paneli, önceki adımda eklediğiniz resimle birlikte Favorite listesini görüntüleyecektir.
Assests panelini kullanarak resimlerinizi yönetmeye başladıktan sonra resim eklediğiniz gibi muhtemelen bazı resimleri de silmeniz gerekecektir. Favorite listesinde bir resim seçildiğinde Add to Favorites düğmesi Remove from Favorites düğmesine dönüşür.
Remove from Favorites düğmesine tıkladığınızda, seçtiğiniz resim listeden silinir.
Images kategorisindeyken hem Site, hem de Favorite listesinde sitenizin içindeki belirli bir resmin konumunu bulmak için bağlam menüsünü
kullanabilirsiniz. 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.
3. Paneli alt kısmındaki New Favorites Folder simgesine tıklayın. Açılan klasörün isim metin alanındaki Untitled varsayılan adının yerine Teachers yazın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basın.
Resimlerinizi kolayca bulmak için onları klasörler halinde düzenleyebilirsiniz.
Bunun için bağlam menüsündeki New Favorites Folder seçeneğini de kullanabilirsiniz. Bu seçenek bağlam menüsünde sadece Images kategorisinin Favorite (Sık Kullanılanlar) bölümündeyken kullanılabilir.
4. teaching.jpg resmini Teachers klasörünün üzerine sürükleyin.
Klasörün içeriğini görmek için küçük klasör simgesine çift tıklayabilir, sonra da tekrar çift tıklayarak klasörü kapatabilirsiniz. Bir klasörün içindeki resimler klasörün altında ve biraz girintili olarak gösterilir.
Favorite listesinde oluşturduğunuz bir klasörü silmeniz gerekirse ilgili klasörü seçin ve Assets panelinin alt kısmındaki Remove from Favorites düğmesine tıklayın.
Bir Resmin Etrafındaki Boşluğu Ayarlamak
Metinleri resimlerin etrafına sararken ilgili resmin etrafındaki boşluğu da ayarlamanız gerekebilir. Başlangıçta belgenizdeki metin resme çok yakın olacaktır. Bu da metnin okunmasını zorlaştırabilir. Belirli bir miktarda boşluk yaratmak, sayfanızın yerleşim düzeninin daha güzel görünmesine yardımcı olacaktır. Boşluk ayarlarında piksel tabanlı bir ölçü kullanılır.
1. CSS Styles panelindeki All Rules listesinden studioPhoto kuralını seçin ve panelin alt kısmındaki Edit Style düğmesine tıklayın.
Şu anda metin bu resmin kenarına çok yakın durmaktadır. Resmin etrafına biraz boşluk eklerseniz hem sayfa daha güzel görünecek, hem de metin daha rahat okunacaktır.
2. CSS Rule Definition iletişim kutusunda Box kategorisini seçin. İletişim kutusunun Margin alanında Same For All onay kutusunun işaretini kaldırın, yine Margin alanındaki Right ve Bottom metin alanlarına 5 yazın ve Return (Macintosh’ta) ya da Enter (Windows’ta) düğmesine tıklayın.
Yaptığınız bu ayarla resmin sağına ve altına 10 piksellik boşluk eklenecektir. CSS kullanarak ilgili elemanın yanlarındaki boşluk miktarını ayrı ayrı kontrol edebilirsiniz.
Bu özellik, örneğin resmin üst kenarının metnin üst kısmıyla hizalanacağı ve resmin sol kenarının da metnin sol kenarıyla hizalanacağı bir durumda çok işinize yarayabilir.
Ayrıca <img> etiketinin H Space (yatay boşluk) ve V Space (düşey boşluk) niteliklerini tanımlayarak da bir resme boşluk ekleyebilirsiniz. Bu nitelikler resmin her iki tarafına da (yatay veya düşey) eşit miktarda boşluk ekler. CSS kullanmadıkça resmin sadece tek bir tarafına boşluk ekleyemezsiniz. Bu nitelikleri Properties denetçisindeki V Space ve H Space metin alanlarını kullanarak tanımlayabilirsiniz.
Bir Resim Yer Tutucusu Eklemek
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.
1. Ekleme noktasını “Anusara Yoga Immersion” ilânına ait açıklamanın sonuna yerleştirin ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak yeni bir paragraf oluşturun. Insert araç çubuğunun Common kategorisinde Images menüsüne tıklayın ve Image Placeholder’ı seçin.
Image Placeholder iletişim kutusu açılacaktır.
Resim yer tutucularının varsayılan genişliği ve yüksekliği 32 X 32 pikseldir.
2. Name metin alanına class yazın. Width (Genişlik) değerini 176 ve Height (Yükseklik) değerini de 132 olarak ayarlayın. Color (Renk) kutusuna tıklayın ve renk numunelerini kullanarak siyah rengi seçin, sonra da Alternate Text metin alanına “a class at Yoga Sangha” yazın. OK düğmesine tıklayın.
Resim yer tutucusu belge penceresinde belirecektir. Yer tutucunun renginin siyah olduğuna ve resmin ismiyle boyutlarını görüntülediğine dikkat edin.
Bilgisayarınızda Fireworks kuruluysa ve resim dosyaları için varsayılan editör olarak ayarlıysa, belge penceresinde resim yer tutucusunu seçip Properties denetçisindeki Create düğmesine tıklayarak yer tutucu için tanımladığınız büyüklükte bir Fireworks belgesi açabilirsiniz. Bu belgeyi kaydettiğinizde Fireworks’ün Save As (Farklı Kaydet) iletişim kutusunda otomatik olarak yer tutucu için kullandığınız isim atanacaktır.
Images: Image placeholder düğmesi
Sayfanızı bir Web tarayıcısında önizlediğinizde resim yer tutucusu alternatif metinle (sizin Image Placeholder iletişim kutusunda tanımladığınız boyutlara ve renklere sahip bir kutu içerisinde yer alır) birlikte yırtılmış bir resim simgesi görüntüleyecektir. Bundan kurtulmak için resim yer tutucusunu bir sonraki uygulamada göreceğimiz gibi asıl resimle değiştirmeniz gerekir.
Sayfanızın görüntüsü bu örnektekine benzeyecektir.
Resim Yer Tutucusunu Değiştirmek
Asıl resmi oluşturduktan ya da müşterinizden aldıktan sonra yer tutucuyu (sayfanızda resmin nasıl duracağıyla ilgili olarak fikir vermesi için kullanmıştınız) asıl resimle değiştirmeniz gerekir.
İki resmi birbiriyle değiştirmek için de bu teknikten faydalanabilirsiniz.
1. Belge penceresindeki resim yer tutucusuna çift tıklayın.
Select Image Source iletişim kutusu açılacaktır.
2. Lesson_05_Graphics/Images klasöründeki class.jpg resmini seçin ve Choose (Macintosh’ta) ya da OK (Windows’ta) düğmesine tıklayın.
Asıl resim belge penceresindeki yer tutucunun yerini alacaktır. Resim yer tutucusuna atanan isim ve alternatif metin bu kez asıl resme atanacaktır.
Resim Düzenleme Tercihlerini Ayarlamak
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.
1. Dreamweaver Preferences (Macintosh’ta) ya da Edit > Preferences (Windows’ta) komutunu seçin ve Preferences iletişim kutusundaki Category listesinde File Types/Editors’ı seçin.
Bu iletişim kutusunu kullanarak başka harici programları da dosya uzantılarına göre varsayılan editörler olarak atayabilirsiniz.
Dreamweaver 8, Flash ve Fireworks’teki çalışmalarınızı bağlantılı düzenleme (roundtrip editing) olarak bilinen bir özellikle entegre hale getirebilirsiniz. Bu özellik, dosya güncellemelerinin programlar arasında aktarılmasını mümkün kılar. Bundan yararlanabilmek için Fireworks’ü varsayılan resim editörü olarak ayarlamanız gerekir.
2. Extensions listesinden.gif’i seçin. Editors listesinin üstündeki artı (+) düğmesine tıklayın ve Fireworks gibi bir resim düzenleme programı seçin. Uygulama listesinde ilgili program seçiliyken programı bütün GIF dosyaları için varsayılan editör olarak ayarlamak üzere Make Primary düğmesine tıklayın.
Bir düzenleme programı belirlemek için Editors listesinin üstündeki düğmeleri kullandığınızdan emin olun. Extensions listesinin üstündeki düğmeler diğer uzantıları eklemek için kullanılır.
Bilgisayarınızda bir resim düzenleme programı yoksa bu adımı atlayabilirsiniz.
Eğer bir resim düzenleme programınız varsa bu adımı JPEG ve PNG dosyaları için tekrarlamanız gerekir.
Kitapla birlikte verilen CD-ROM’da Fireworks’ün deneme sürümünü bulabilirsiniz.
3. yoga_sangha-title.jpg resmini seçin.
Resimler için kullanılan Properties denetçisi arabiriminde, panelin üst yarısında ve sağ tarafında bir Edit düğmesi (Fireworks simgesine benzer) ile birlikte Optimize In Fireworks adında bir seçenek yer alır. Edit seçeneğiyle resimlerinizi harici bir resim editöründe hızlı bir şekilde açıp düzenlemeye başlayabilirsiniz. Bunun için önceki adımda anlatıldığı gibi bir varsayılan resim editörü tanımlamış olmanız gerekir.
Temel Resim Düzenleme İşlemleri
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 kullanacağı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ştirmek gibi) doğrudan Dreamweaver belge penceresinde gerçekleştirebilirsiniz.
1. class.jpg resmini seçin.
Properties denetçisinde resim düzenleme seçenekleri belirecektir.
2. Properties denetçisindeki Crop aracına tıklayın.
Bir uyarı penceresi ekrana gelerek bu işlemin diskinizdeki asıl resmi değiştireceğini bildirecektir. Bu iletiyi tekrar görmek istemiyorsanız “Don’t Show Me This Message Again”
kutusunu işaretleyebilirsiniz. Devam etmek için OK düğmesine tıklayın.
Resmin içinde bir seçim alanı belirecektir. Bu alan düz siyah bir çizgiyle (Macintosh’ta) ya da kesikli bir çizgiyle (Windows’ta) gösterilir. Seçim alanının her kenarının köşelerinde ve ortasında tutamaçlar göreceksiniz. Koyu resimlerde bu seçim alanını görmek zor olabilir.
Varsayılan durumda seçim alanı asıl resimden biraz daha küçüktür ve yaklaşık olarak aynı orana sahiptir. Seçimin içindeki alan net bir şekilde görünür, dışındaki alan ise kırpılacağını belirtmek için daha gri bir renkle belirtilir. İmleci seçim alanının ortasına getirdiğinizde bir el (Macintosh’ta) ya da oklu bir artı (Windows’ta) şeklini alır. Bu durumda seçim alanını üzerine tıklayıp sürükleyerek taşıyabilirsiniz. İmleçle tıklayıp istediğiniz tutamacı sürükleyerek seçim alanının büyüklüğünü değiştirebilirsiniz.
3. Kırpma alanının büyüklüğünü, orijinal resimden küçük olacak şekilde ayarlayın ve Return (Macintosh’ta) ya da Enter (Windows’ta) tuşuna basarak resmi kırpın.
Değişikliği uygulamak için seçim alanının içine çift tıklayabilir ya da Properties denetçisindeki Crop simgesine tıklayabilirsiniz. Kırpma işlemini iptal etmek isterseniz belge penceresinde resmin dışında herhangi bir alana tıklayın.
Resim, seçtiğiniz alana göre kırpılacaktır. Dosya boyutunun küçüldüğüne dikkat edin.
Bunun miktarı, resmin ne kadarlık bir alanını kırptığınıza bağlıdır. Class.jpg resminin
orijinal büyüklüğü yaklaşık olarak 7 KB idi. Resmin büyüklüğü, resim seçildiğinde Properties denetçisinin sol üst köşesine yakın bir noktada gösterilir.
Bir resimde Dreamweaver’ın resim (Image) araçlarını kullanarak değişiklik
yaparsanız, bu resmin sitenizde bulunan tüm örnekleri değişir. Bunu istemiyorsanız, resmin bir kopyasını oluşturabilir ve değişiklikleri bu kopyanın üzerinde
gerçekleştirebilirsiniz. Bir kırpma işlemini yaptıktan sonra sonuçtan memnun kalmazsanız Dreamweaver’ın Undo komutunu kullanarak resmi orijinal durumuna döndürebilirsiniz. Bunun için Edit > Undo Crop komutunu seçebilir ya da Cmd+Z (Macintosh’ta) veya Ctrl+Z (Windows’ta) klavye kısayolunu kullanabilirsiniz.
4. class.jpg resmi seçili durumdayken Properties denetçisindeki Brightness and Contrast aracına tıklayın. Parlaklık değerini (Birghtness) +25 olarak ayarlayın ve OK düğmesine tıklayın.
Bir uyarı penceresi açılacak ve resim dosyasında değişiklik yapılacağını bildirerek sizi uyaracaktır.
Devam etmek için OK düğmesine tıklayın.
Açılan Brightness/Contrast iletişim kutusunda biri Brightness yani parlaklık, diğeri de Contrast yani kontrast için ayrılmış iki sürgü göreceksiniz. Sürgülerin değer aralığı -100’den +100’e kadardır. Varsayılan durumda sürgüler ortadadır ve bu konumun değeri sıfırdır. Metin alanlarına aralık dahilinde herhangi bir değeri yazabilir ya da sürgüleri üzerlerine tıklayıp sürükleyebilirsiniz.
Sürgüyü sola, negatif sayılara doğru sürüklediğinizde parlaklık azalır ya da kontrast düşer.
Sürgüyü sağa, pozitif sayılara doğru sürüklediğinizde de parlaklık artar ya da kontrast yükselir.
Varsayılan durumda Previews kutusu işaretlidir. Bu da, yaptığınız ayarlamaların oluşturduğu etkileri Dreamweaver belge penceresinde hemen görebilmenizi sağlar.
Bu adımda yaptığınız parlaklık ayarının oluşturduğu fark çok belirgindir ve meydana gelen değişikliği resimde kolayca görebilirsiniz. Bu seçeneği kullanırken dikkatli olun, çünkü aşırı düzeyde kullanıldığında resmin kalitesini ciddi şekilde etkileyebilir.
5. class.jpg resmi seçili durumdayken Properties denetçisindeki Sharpen aracına tıklayın. Sürgüyü kullanarak değeri 2 yapın ve OK düğmesine tıklayın.
Bir uyarı penceresi açılacak ve resim dosyasında değişiklik yapılacağını bildirerek sizi uyaracaktır. Devam etmek için OK düğmesine tıklayın.
Sharpen iletişim kutusunda 0-10 aralığına sahip tek bir sürgü yer alır. Brightness and Contrast özelliğinde olduğu gibi burada da varsayılan durumda etkin olan bir Preview seçeneği mevcuttur.
Bu özelliği tekrar tekrar kullanabilirsiniz. Ama dikkatli olun, çünkü fazla kullanırsanız resmin kalitesini ciddi şekilde etkileyebilirsiniz. Aşırı netleştirmek, resmin piksel piksel görünmesine sebep olabilir.
Properties denetçisindeki ilave düzenleme seçenekleri arasında Edit (Düzenle), Optimize In Fireworks (Fireworks’te optimize et) ve Resample (Yeniden örnekle) yer alır. Dosyaları optimize etme avantajından faydalanabilmek için bilgisayarınızda Fireworks’ün kurulu olması gerekir. Optimize Images iletişim kutusunu kullanarak resimlerin formatları arasında geçiş yapmak, kalite düzeyini ayarlamak (JPEG’lerde) ve renk paletini ayarlamak da (GIF’lerde) dahil olmak üzere pek çok değişiklik yapabilirsiniz. Bir resmin kalite düzeyini düşürebilir ve dosya boyutunu küçültebilirsiniz. Ancak unutmayın ki, resimlerin kalitesini artıramazsınız. Daha iyi bir resim elde etmek için orijinal kaynak dosyalarını kullanmanız gerekir. Edit düğmesine tıkladığınızda harici editör olarak, bu derste daha önce Preferences iletişim kutusunda birincil (Primary) olarak ayarladığınız resim editörü açılır. Resample aracı, resimlerinizin çözünürlüğünü artırma ya da azaltma imkânı sağlar. İşe yüksek çözünürlüklü bir resimle başlamak ve çözünürlüğü istenen büyüklüğe göre düşürmek, düşük çözünürlüklü bir resmin çözünürlüğünü artırmaktan her zaman daha iyidir. Çözünürlüğü artırsanız da bir resmin kalitesini artıramazsınız. Web çözünürlüğü 72 ppi’dır (pixels per inch – inç başına düşen piksel)
Resim Tabanlı Bağlantılar Oluşturmak
Kendi sitenizdeki ya da diğer sitelerdeki belgelere bağlanmak için resimlerden de faydalanabilirsiniz. Bu uygulamada harici bir bağlantının nasıl oluşturulduğunu göreceksiniz. Resimleri sitenizdeki dosyalara bağlamak için önceki uygulamada kullandığınız teknikleri kullanabilirsiniz.
1. Üzerine tıklayarak class.jpg resmini seçin. Properties denetçisindeki Link metin alanına schedule/immersion-details.html yazın.
Bu bağlantı, bir göreceli yoldur. Bağlantıları oluşturmak için metinlerde olduğu gibi resimleri de kolayca kullanabilirsiniz. schedule klasöründe immersion-details.html adında bir dosya yoktur. Bu yöntemi kullanarak henüz oluşturulmamış sayfalar için bağlantı ekleyebilirsiniz.
Yerel dosya yapınızın dışında yer alan bir belgeye veya kök klasörünüzün dışında bulunan herhangi bir şeye bağlanabilmek için bir mutlak yol (absolute path) kullanmanız gerektiğini unutmayın. Bir mutlak bağlantı, kullanıcının bir Web sunucusuna bağlandığını göstermek için http:// (HyperText Transfer Protocol) ifadesiyle başlar. Mutlak bağlantının kalan kısmı, bağlanılan sitenin adresini tanımlar. Harici Web sitelerinde bulunan belgelere ait tüm bağlantılar mutlak tiptedir.
Eğer bir URL uzun ya da karmaşıksa Web tarayıcınızı kullanarak bu siteye girebilir URL’i kopyalayabilir ve Link metin alanına yapıştırabilirsiniz.
2. Dosyayı kaydedin ve Web tarayıcınızda önizleyin.
İmleci sayfanın en altında yer alan resimlerin üzerine getirdiğinizde bu resimlerin bağlantı içerdiğini belirten bir el simgesi görürsünüz. Kullandığınız Web tarayıcısına bağlı olarak, imleçle bağlantıların üzerine geldiğinizde Web tarayıcısının durum çubuğunda bağlantı konumunu görebilirsiniz.
Resim Haritası Oluşturmak
Önceki uygulamada bir resme bağlantı uygulamanın ne kadar kolay olduğunu görmüştünüz.
Bağlı sayfaya gitmek için kullanıcının resmin herhangi bir yerine tıklaması yeterliydi. 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ı (image map) kullanırsınız. Söz konusu aktif alanlar ille de dikdörtgen şeklinde olmak zorunda değildir, farklı şekillerde de olabilirler.
Şimdiki uygulamada biri dikdörtgen, biri de çember şeklinde iki aktif alan ekleyeceksiniz.
Kavramsal olarak bakıldığında, resim haritaları coğrafi haritalarda kolayca kullanılabilir.
Bununla birlikte herhangi bir resmi de resim haritası olarak kullanabilirsiniz.
1. Lesson_05_Graphics/about klasöründeki studio.html dosyasını açın. green- studio.jpg resmini seçin.
Resmin her biri bir öğe için olmak üzere üç aktif alana bölünmesi gerekiyor.
2. Properties denetçisindeki Map metin alanına greenstudio yazın.
Bu isimde boşluk ya da özel karakter kullanmayın. 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. Bu uygulamada kullandığınız isim olan greenstudio, kullanılan resim haritasının çevre bilincine sahip bir stüdyoya ait olduğunu belirtmektedir. Map metin alanında kendi istediğiniz gibi, ilgili öğeyi ayırt edici isimler kullanabilirsiniz. Kısa, özlü ve öğeyi tanımlayıcı isimler kullanmak en iyisidir.
Map metin alanını göremiyorsanız Properties denetçisinin sağ alt köşesindeki genişletme okuna tıklayın.
