A-PDF Split DEMO : Purchase from www.a-pdf.com to remove the watermark 9 Katman Oluşturmak Katman (layer), Web tarayıcısı penceresinde istediğiniz bir konuma yerleştirebileceğiniz ve HTML içeriği için kullanılan dikdörtgen şeklinde bir taşıyıcı elemandır. Katmanlar çeşitli elemanları içerebilirler (metinler, resimler, tablolar ve hatta başka katmanlar). Bir HTML belgesine yerleştirebildiğiniz her şeyi bir katmana da yerleştirebilirsiniz. Katmanlar özellikle elemanları birbirinin üzerine yerleştirmek ya da birbirlerinin üstünü örtmek için çok kullanışlıdır. Katmanlar, sadece sürümü 4.0 ve daha yeni olan Web tarayıcılarınca desteklenir. CSS le (Cascading Style Sheets) birlikte kullanıldıklarında yerleşim düzenini ve görünümü kontrol etmeyi, davranışlarla birlikte kullanıldıklarında da etkileşim özellikleri eklemeyi mümkün kılarlar. Bu derste Dreamweaver da katman oluşturmak için çeşitli yöntemler öğreneceksiniz. Sayfada istediğiniz boyutlarda bir katman oluşturacak ve ayrıca önceden tanımlanmış bir genişlik ve yükseklik değeri kullanarak sayfaya bir katman yerleştireceksiniz. Büyüklük, konum ve görünürlük de dahil olmak üzere çeşitli katman niteliklerinde değişiklik yapmayı Bu projede çeşitli katmanlar oluşturacak, bunların içine metin ve resimler yerleştirecek, özelliklerini değiştirecek ve sayfa üzerinde taşıyarak konumlarına tam olarak yerleştireceksiniz. Ayrıca bu derste, katman tabanlı animasyonları göreceksiniz.
öğreneceksiniz. Ayrıca eski tarayıcı kullanan ziyaretçilerin de sayfalarınızı görebilmesini sağlamak için katmanlarınızı tablolara dönüştüreceksiniz. Ayrıca eski tarayıcı kullanan ziyaretçilerin de sayfalarınızı görebilmesini sağlamak için katmanlarınızı tablolara dönüştüreceksiniz. Tamamlanmış sayfanın bir örneğini görmek isterseniz Lesson_09_Layers/Completed klasöründeki layers.html dosyasını açın. Neler Öğreneceksiniz? Bu derste şunları öğreneceksiniz: Çeşitli katmanlar oluşturacaksınız. Katmanları adlandıracaksınız. Katmanların büyüklüğünde ve konumunda değişiklik yapacaksınız. Sayfanızdaki içeriği kontrol etmek için katmanlardan faydalanacaksınız. Katmanların sırasını değiştireceksiniz. Katmanları iç içe yerleştirecek ve iç içe durumdaki katmanları eski hallerine getireceksiniz. Katmanların görünürlük durumunu değiştireceksiniz. Cetvelleri ve ızgaraları ayarlayacaksınız. JavaScript kullanarak bir Netscape hatasını düzelteceksiniz. Katmanlarla tasarlanmış sayfaları eski tarayıcılarla uyumlu hale getireceksiniz. Timeline ları tanıyacaksınız. Yaklaşık Süre Bu dersin tamamlanması yaklaşık 2 saat sürecektir. Ders Dosyaları Ortam Dosyaları: Lesson_09_Layers/Images/ (bütün dosyalar) Başlangıç Dosyaları: Lesson_09_Layers/layers.html Tamamlanmış Proje: Lesson_09_Layers/Completed/layers.html Lesson_09_Layers/Completed/layers_table.html Lesson_09_Layers/Completed/transparent.gif 308 DERS 9
Katman Oluşturmak Katman (layer), <div> etiketi olarak bilinen ve diğer elemanların üzerini örtmesini sağlayan belirli CSS özelliklerinden (mutlak konumlandırma ve z-index) faydalanan bir taşıyıcı bileşendir. Bir katman oluşturmak için çeşitli yöntemlerden faydalanabilirsiniz. Seçtiğiniz yöntem, katmanı nasıl kullanmayı düşündüğünüze ve nereye yerleştirmek istediğinize bağlı olarak farklılık gösterebilir. Bu uygulamada çeşitli katmanlar oluşturacak ve bunlara içerik ekleyeceksiniz. 1. Lesson_09_Layers klasöründeki layers.html dosyasını açın. Insert araç çubuğunda Layout kategorisine geçin ve Standard düğmesinin seçili olduğundan emin olun. Bu derste Design görünümünü kullanmanız gerekiyor. Standard görünüm varsayılan seçenektir ve Insert araç çubuğundaki Standard düğmesinin etkin olduğunu, vurgulu olarak görünmesinden anlayabilirsiniz. Katman oluşturabilmek için Standard görünümde olmanız gerekir. Draw Layer düğmesi 2. Insert araç çubuğunun Layout kategorisinde yer alan Draw Layer düğmesine tıklayın. İmleci belge penceresinin üzerine getirin, sonra da tıklayıp sürükleyerek sayfanın sağ tarafında yeni bir katman oluşturun. Belge penceresinin üzerine getirdiğinizde imleç artı işaretine (+) dönüşecektir. Siz imleci sürükleyip farenin düğmesini bırakarak katmanı oluşturduktan sonra ekranda yeni katmanı gösteren bir dikdörtgen belirecektir. Katman Oluşturmak 309
3. Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçin. Invisible Elements kategorisini seçin ve Anchor Points For Layers seçeneğini işaretleyin. OK düğmesine tıklayın. Belge penceresinin sol üst tarafında bir katman işareti göreceksiniz. Seçiliyken katmanın dış hattının mavi, göründüğüne dikkat edin. Katmanı seçmek için katman işaretini kullanabilirsiniz. Ama katmanınız belge penceresinin sol üst tarafındaysa işaret katmanın konumunu kaydırmış gibi görünebilir. Bu kayma, sadece belge penceresinde görülür. Sayfa Web tarayıcısında açıldığında bütün elemanların yeri doğru olarak görünür. İşaretleri geçici olarak kapatmak için View > Visual Aids > Invisible Elements komutunu seçin. Menüdeki komutun yanında yer alan onay işareti, seçeneğin etkin olduğunu gösterir. Varsayılan durumda katman kodu sayfanın en üstüne, <body> etiketinin hemen arkasına yerleştirilir. Dreamweaver, katman oluşturmak için <div> etiketini kullanır. Bu etiket, katmanın konumunu tarayıcı penceresinin üst ve sol kenarına göre belirlemek için mutlak konumlandırma (absolute positioning) özelliğinden faydalanır. <div> etiketi, bir blok seviyesi elemanıdır (block-level element). Blok seviyesi elemanı, sayfanızın bölümlerini düzenleyen bir taşıyıcıdır. Yeni bir satırdan ya da yeni bir bloktan itibaren başlar. Diğer blok seviyesi elemanlarına örnek olarak <p> (paragraph) ve <ul> (Unordered List-Sırasız liste) gösterilebilir. Blok seviyesi elemanları diğer blok seviyesi elemanlarını ve satıriçi 310 DERS 9
elemanları içerebilir. Satıriçi elemanlar (inline elements) genellikle sadece metinlerle diğer satıriçi elemanları içerir ve blok elemanları içinde kullanılır. Bunlar yeni bloklar ya da satırlar oluşturmaz. Satıriçi elemanlara örnek olarak <span> (Span), <br> (line BReak-Satır sonu) ve <a> (anchors [Yer İmleri] ya da link [bağlantı] olarak bilinirler). Dreamweaver, katman oluşturmak için kullanılabilen çeşitli ilâve etiketleri (<span>, <layer> ve <ilayer>) tanır, ama katman oluşturmak üzere bunların kullanılması gibi bir seçenek sunmaz. Bir satıriçi eleman olan <span> etiketi, katmanın konumunu etrafındaki diğer elemanların konumuna bağlı olarak belirlemek için göreceli konumlandırma (relative positioning) özelliğini kullanır. <layer> ve <ilayer> etiketleri sadece Netscape Navigator 4 te destekleniyordu. Netscape artık bu etiketleri desteklemiyor, Internet Explorer ise bu etiketleri hiçbir zaman desteklemedi. Design görünümü bir katman işareti eklese bile bu tipteki katmanları render etmez veya görüntülemez. 4. İmleci katmanın kenarlığının üzerine getirin. İmleç bir el simgesine (Macintosh ta) ya da dört uçlu bir oka (Windows ta) dönüştüğünde tıklayarak katmanı seçin. İmleç katmanın kenarlığını gösteren çizginin üzerine geldiğinde çizgilerin rengi kırmızıya döner ve siz de katmanı seçebileceğinizi anlarsınız. Katmanın sol üst tarafında kare şeklinde bir sekme göreceksiniz. Bu sekme, katman seçim tutamacıdır. Katmanın kenarlığı üzerinde gördüğünüz mavi kareler ise boyutlandırma tutamaçlarıdır. 5. Ekleme noktasını katmanın içine yerleştirin. Katmana şu niteliklere sahip bir tablo ekleyin: Rows = 1, Columns = 1, Table width = 300 pixels, Border thickness = 0, Cell padding = 5, Cell spacing = 0, Header = None. Caption ve Summary alanlarını da boş bırakın. Lesson_09_Layers/Text klasöründe yer alan about.txt dosyasını açın, bütün metni kopyalayın ve katmanın içinde oluşturduğunuz tabloya yapıştırın. Insert araç çubuğunun Layout kategorisinde Table adında bir düğme bulunur. Katman Oluşturmak 311
Katman, gerekirse tabloyu ve tablonun içindeki metni alacak şekilde genişler. Siz Properties denetçisindeki Overflow ayarını değiştirmedikçe katmanlar bütün içeriklerini gösterecek şekilde genişlerler. 6. Ekleme noktasını belgede katmanın dışında bir konuma yerleştirin. Draw Layer düğmesine tıklayın ve sayfanın sol tarafına küçük bir katman daha ekleyin. Lesson_09_Layers/Images klasöründeki studio-om.jpg resmini katmana ekleyin. Resmin alternatif metni olarak OM ifadesini kullanın. Katman gerekirse resmin boyutlarına uygun olarak genişleyecektir. Eğer katman resimden daha büyükse, boyutlarında herhangi bir değişiklik olmaz. Draw Layer düğmesine sürekli basmadan birden fazla katman oluşturmak isterseniz, ilk katmanı çizerken Cmd (Macintosh ta) ya da Ctrl (Windows ta) tuşunu basılı tutun. Yardımcı tuşu bırakana kadar yeni katmanlar çizmeye devam edebilirsiniz. Siz katman oluştururken ekleme noktası bir katmanın içindeyse, yeni katman diğer katmanın içine yerleştirilir. İç içe geçen katmanların eski tarayıcılarda sorun çıkarabileceğini unutmayın. Bu aşamada belgenizin görünümü aşağıdaki örneğe benzeyecektir. 312 DERS 9
Seçili olmayan ve etkin durumda olmayan katmanların kenarlıkları soluk, gri renkli ince bir çizgiyle gösterilir. View > Visual Aids > Layer Outlines komutunu seçerek bu özelliği açabilir ya da kapatabilirsiniz. Menüdeki komutun yanında bir onay işareti görürseniz, söz konusu seçeneğin etkin olduğunu anlarsınız. 7. Ekleme noktasını belgede ilk iki katmanın dışında bir konuma yerleştirin ve Insert > Layout Objects > Layer komutunu seçin. Lesson_09_Layers/Images klasöründeki teaching.jpg resmini katmana yerleştirin ve resmin alternatif metni için teaching ifadesini kullanın. Katman, katman tercihlerinde belirlenen varsayılan genişlik ve yükseklik değerleri kullanılarak belge penceresinin sol üst köşesinde oluşturulacaktır. Bu üçüncü katman daha önce oluşturduğunuz ikinci katmanın üzerine binebilir. Dreamweaver ın varsayılan genişlik değeri 200 piksel, varsayılan yükseklik değeri de 115 pikseldir. Ama Preferences iletişim kutusunun Layers kategorisini kullanarak bu değerleri değiştirebilirsiniz. Preferences iletişim kutusunu açmak için Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçin ve Layers kategorisine geçin. Preferences iletişim kutusunun Layers kategorisini kullanarak varsayılan görünürlük, arka plan, iç içe yerleştirme ve uyumluluk seçeneklerini de ayarlayabilirsiniz. Bu seçenekleri dersin sonraki bölümlerinde ele alacağız. Katman kodu eklenmiş olmasına rağmen ekleme noktasının konumuna bağlı olarak, yeni yerleştirdiğiniz katmanın işaretleri görünmeyebilir. Katman işaretleri yeni katmanların arkasında gizlenmiş olabilir. Sayfa üzerinde imleçle çizilerek katman eklenirken katman kodu arada hiçbir paragraf ya da başka bir kod olmadan sayfanın en üst kısmına yerleştirilir. Katman eklerken başka yöntemler kullanıldığında bu kodlar diğer etiketlerin (örneğin paragraf için kullanılan <p> etiketi gibi) arasına ya da içine yerleştirilebilir. Koddaki bu etiketleri silebilirsiniz (kodlarla çalışma konusunu Ders 16 da göreceğiz). Bu aşamada üçüncü katman diğer katmanların işaretlerini ve belirli bölümlerini kısmen örtebilir. 8. Önceki adımda eklediğiniz katmanın seçimini kaldırmak için belge penceresinde mevcut katmanların dışında bir yere tıklayın. Insert araç çubuğundaki Draw Layer simgesini sürükleyerek belge penceresinin üzerinde mevcut katmanların dışında bir yere bırakın. Ekleme noktasını yerleştirmek için yeni katmanın içine tıklayın ve Lesson_09_Layers/Images klasöründe yer alan class.jpg resmini katmana ekleyin. Resmin alternatif metni için class sözcüğünü kullanın. Katman Oluşturmak 313
Draw Layer simgesini başka bir katmanın içine bırakmayın. Bunu yaptığınız takdirde katmanlar iç içe yerleştirilir. Belge penceresinde, en son oluşturduğunuz katmanın üstünde hafifçe sağa doğru ötelenmiş olarak (varsayılan genişlik ve yükseklik değerleriyle) dördüncü bir katman oluşturulacaktır (bkz. sıradaki örnek). Siz katmanı ekledikten sonra ekleme noktası otomatik olarak bu katmanın içine yerleştirilecektir. 9. layers.html belgesini kaydedin. Bir sonraki uygulama için bu dosyayı açık bırakın. Bu uygulamada katman oluşturmak için kullanılan bütün yöntemlerde belgenin gövde kısmına <div> etiketi yerleştirilmiştir. Oysa CSS te bu katmanları tanımlayan CSS özellikleri belgenin baş kısmında bir dahili stil sayfasına yerleştirilirler. CSS konusunu Ders 4 te görmüştük. Katman oluşturmak için kullanılabilecek diğer bir yöntem de, katmanların yerleşimini ve konumunu tanımlayan CSS özelliklerini bir harici stil sayfasında tanımlamaktır. Bu da dahili stillerin aktarılmasıyla ya da stillerin en baştan harici bir stil sayfasında oluşturulmasıyla gerçekleştirilir. 314 DERS 9
Katmanları Adlandırmak Dreamweaver katmanlara otomatik olarak numara sırasıyla genel tipte isimler atar (Layer1, Layer2, vs). Bu isimler çok açıklayıcı değildir; özellikle de birden fazla katman içeren karmaşık sayfalar oluşturuyorsanız. Katmanlarınıza kısa ve açıklayıcı isim verme alışkanlığını elde etmeniz iyi olacaktır. 1. Window > Layers komutunu seçerek Layers panelini açın. Layers panelini, CSS panel grubunu açtıktan sonra Layers panelinin sekmesine tıklayarak da açabilirsiniz. CSS panel grubunda yer alan Layers paneli, sayfada bulunan katmanları bir liste halinde görüntüler. Bu paneli kullanarak istediğiniz bir katmanı seçebilir, adlandırabilir, katmanın görünürlük seçeneğini, yığılma sırasını (stacking order) değiştirebilir ya da bir sayfadaki birden fazla katmanı seçebilirsiniz. Yeni bir katman oluşturduğunuzda bu katman Layers panelindeki listenin en üstüne, diğer katmanların üzerine yerleştirilir (eğer listede başka katman varsa). Burada katmanlar azalan sıralamayla listelenir. Eğer katman gizlenmişse ya da sayfanın dışına taşınmışsa, bu katmanı seçmek için tek çözüm Layers panelini ya da katman işaretlerini kullanmak olabilir. Eğer ekleme noktası bir katmanın içindeyse, bu katmanın ismi Layers panelinde kalın olarak görüntülenir ve belge penceresinde seçim tutamaçları belirir. Bu, katmanın etkin durumda olduğunu ama seçili olmadığını gösterir. Oluşturduğunuz dört katman Layer1, Layer2, Layer3 ve Layer4 şeklinde adlandırılacaktır. 2. Layers panelindeki Layer1 e çift tıklayın, katmanın adını değiştirmek için textlayer yazın ve Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Paneldeki Layer2 adlı katmana çift tıklayın, om yazın ve Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Layer3 adlı katmanın ismini değiştirmeyin. Paneldeki Layer4 adlı katmana çift tıklayın, class yazın ve Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Katman isimlerinde boşluk ya da özel karakterler (alt çizgi karakteri de dahil) kullanmayın. Katman isimleri benzersiz olmalıdır. Birden fazla katmanı ya da bir katmanla resim gibi farklı Katman Oluşturmak 315
bir elemanı aynı şekilde adlandırmayın. Bütün katmanlar için tutarlı bir adlandırma sistemi kullanmak iyi bir yaklaşımdır. Eğer katman seçili durumdaysa katmanın ismini Properties denetçisindeki Layer ID metin alanına da yazabilirsiniz. Siz katmanlara isim atadığınızda bu katmanlar belge penceresinde seçili hale gelir. Seçili katman geçici olarak onun üzerini örten diğer bütün katmanların önünde görünür. Seçili durumdaki bir katmanın seçimini kaldırmak için belge penceresinde bütün katmanların dışında bir yere tıklamanız yeterlidir. 3. layers.html belgesini kaydedin. Bu dosyayı bir sonraki uygulama için açık bırakın. Katmanlarda Değişiklik Yapmak Bir katman oluşturduktan sonra buna bir arka plan eklemek, katmanı taşımak ya da yeniden boyutlandırmak isteyebilirsiniz. Katman kullanmanın avantajlarından biri, sayfa üzerinde tam olarak istenen konuma yerleştirilebilmeleridir. Properties denetçisini kullanarak konum değerleri girebilir ve katmanları diğer katmanlarla hizalayabilirsiniz. Bir katmanın üzerinde değişiklik yapabilmeniz için önce o katmanı seçmeniz gerekir. Katman seçimi için çeşitli yöntemlerden faydalanabilirsiniz. Bu yöntem, yerleşim düzeninizin karmaşıklık düzeyine bağlı olarak belirlenebilir. 1. layers.html dosyasının belge penceresinde imleci textlayer katmanının kenarlığının üzerine yerleştirin ve imleç bir el simgesine (Macintosh ta) ya da uçlarında ok bulunan bir artıya (Windows ta) dönüştüğünde kenarlık çizgisine tıklayın. Kenarlığın rengi kırmızıya dönüşecektir. 316 DERS 9 Herhangi bir katman seçili durumda değilken Shift tuşunu basılı tutarak bir katmanın içine tıkladığınızda o katman seçili hale gelir. Katmanın içine normal bir şekilde tıkladığınızda ise ekleme noktası katmanın içine yerleştirilir ve katman etkinleştirilir, ama katmanın kendisi seçilmiş olmaz. Shift tuşunu basılı tutup diğer katmanlara tıklayarak birden fazla katmanı seçebilirsiniz. Tek bir katmanı seçmek için; belge penceresinde bulunan ve katmanı temsil eden sarı renkli katman işaretine tıklama, Etiket Seçici de katmanın etiketine tıklama veya Layers panelinde ilgili katmanın adına tıklama yöntemlerinden birini de kullanabilirsiniz.
Siz bu işlemi yaptığınızda söz konusu katman seçili hale gelir ve etrafında mavi renkli boyutlandırma tutamaçları belirir. Ayrıca seçili katmanın ismi Layers panelinde vurgulanır. Properties denetçisi, seçili katmana ait seçenekleri gösterecek şekilde değişir. Bütün özellikleri görmek isterseniz Properties denetçisinin sağ alt köşesindeki genişletme okuna tıklayın. Bir katmanı silmek isterseniz, önce o katmanı seçin ve ardından Delete (Macintosh ta) ya da Backspace (Windows ta) tuşuna basın. 2. Properties denetçisindeki W metin alanına 320px yazıp Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basarak textlayer katmanını yeniden boyutlandırın. Properties denetçisinde W ve H metin alanları katmanın genişlik ve yükseklik değerlerini gösterir. Bir katmanı yeniden boyutlandırdığınızda bu değerler değişir. Burada kullanılan varsayılan birim pikseldir (px). Pika (pc), Punto (pt), inç (in), milimetre (mm), santimetre (cm) ya da ebeveyn değere göre yüzde (%) birimlerini de kullanabilirsiniz. Birim kısaltmaları değere bitişik yazılmalı, arada boşluk kullanılmamalıdır (3mm gibi). Tavsiye edilen birimler piksel ve yüzdedir. Katmanların boyutlarını, boyutlandırma tutamaçlarından birini tutup sürükleyerek de değiştirebilirsiniz. Bir katmanın boyutunu klavyeyi kullanarak her seferinde bir piksel değiştirmek için katmanı seçin ve Macintosh ta Option+sağ ok tuşuna (ya da herhangi bir ok tuşuna) veya Windows ta Ctrl+sağ ok tuşuna (ya da herhangi bir ok tuşuna) basın. Katmanı geçerli ızgara artım değerine göre boyutlandırmak isterseniz, Macintosh ta Shift+Option+right-ok tuşuna (ya da katmanı genişletmek istediğiniz yöne ait ok tuşuna) veya Windows ta Shift+Ctrl+sağ ok tuşuna (ya da katmanı genişletmek istediğiniz yöne ait ok tuşuna) basın. Izgara artım değerinin nasıl ayarlandığını görmek için bu derste daha sonra göreceğimiz Izgara Ve Cetvel Seçeneklerini Ayarlamak uygulamasına bakabilirsiniz. Katman Oluşturmak 317
Bu derste daha önce metin ve resim eklerken gördüğünüz gibi, katmanlar içerik sığacak şekilde genişlerler. Katman içeriğinin tanımlanmış boyutları aşması durumunda genişlik ve yükseklik için kullanılan orijinal değerler geçersiz kılınır. Properties denetçisindeki Overflow ayarı, bu durumda katmanların nasıl davranacağını belirler. Dört tane Overflow seçeneği vardır: Visible, Hidden, Scroll ve Auto. Visible, (varsayılan seçenek), katmanı bütün içeriği görünecek şekilde aşağıya ve sağa doğru gerektiği kadar genişleterek katmanın boyutlarını büyütür. Hidden seçeneği, katmanın boyutlarını korur ve sığmayan içeriği keser ve bu arada herhangi bir kaydırma çubuğu görüntülemez. Scroll seçeneği, içeriğin katmanın boyutlarını aşıp aşmadığına bakmaksızın katmana kaydırma çubukları ekler. Auto seçeneği, kaydırma çubuklarını sadece içeriğin katmanın sınırlarını aşması durumunda görüntüler. Bu seçenekleri görebilmek için Properties denetçisindeki genişletme okuna tıklamanız gerekebilir. Katmanın görünür kısmını belirtmek için bir kırpma alanı da (clipping area) tanımlayabilirsiniz. Kırpma alanı daha küçük, daha büyük ya da katmanla aynı boyda olabilir. Properties denetçisindeki dört Clip alanına değer girerek görünür alanı tanımlayabilirsiniz: L (Left-sol), T (Top-üst), R (Right-sağ) ve B (Bottomalt). Kırpma alanının dışındaki bütün içerik gizlenir. Bu ayar dört Overflow seçeneğiyle de kullanılabilir. 3. textlayer katmanı seçili durumdayken Properties denetçisindeki L metin alanına 375px, T metin alanına da 50px yazın. om katmanını seçin ve L metin alanına 125px, T metin alanına da 100px yazın. Properties denetçisinde om katmanına ait sol (L metin alanı) ve üst (T metin alanı) mesafe özelliklerini değiştirmeye çalışmadan önce om katmanını (içerdiği resmi değil) seçtiğinizden emin olun. L ve T metin alanlarındaki değerler negatif olarak ayarlandıysa katmanın konumu sayfa dışında kalabilir. Katmana bir animasyon efekti uygulamak ve katmanın başlangıçta sayfa dışında olmasını istiyorsanız bunu yapabilirsiniz. Katmanlara animasyon uygulamayı bu dersin ilerleyen bölümlerinde göreceğiz. Properties denetçisinin üst yarısında yer alan L ve T metin alanlarını kullandığınızdan emin olun. Bu adımda Clip bölümündeki metin alanlarını kullanmayın. Properties denetçisinin üst 318 DERS 9
yarısındaki L metin alanı, katmanla tarayıcı penceresinin sol kenarı arasındaki boşluğu tanımlar. Properties denetçisinin üst yarısındaki T metin alanı ise katmanla tarayıcı penceresinin üst kenarı arasındaki boşluğu tanımlar. Seçilen katmanı kenarlığından ya da seçim tutamacından tutup sürükleyerek sayfa üzerinde başka bir konuma taşıyabilirsiniz. Bir katmanı klavyeyi kullanarak her seferinde bir piksel taşımak isterseniz, katmanı seçin ve ok tuşlarını kullanın. Ok tuşlarını kullanırken Shift tuşunu basılı tutarsanız, katman her seferinde geçerli ızgara artım değeri kadar ilerler. 4. Layers panelinde class katmanını seçin ve belge penceresindeki katman seçim tutamacını sayfada aşağıya doğru sürükleyerek katman sayfada daha altta, om katmanının altında görünecek şekilde taşıyın. Layer3 adlı katmanı seçin ve onu da sayfada daha aşağıya, class katmanının altına sürükleyin. Katman seçim tutamacını tutarak sürüklediğinizde, sadece katmanın içeriğini değil, asıl katmanı sürüklediğinizden emin olursunuz. Layer3 adlı katmanı sürüklerken katmanı belge penceresinin alt kenarının üzerinde biraz tutarsanız, belge yukarıya doğru kaydırılır ve pencerenin alt kısmında katman için ihtiyacınız olan boş alana ulaşırsınız. Katmanlar altlarında görünen diğer katmanları gizliyorsa, üzerinde değişiklik yapmak istediğiniz gizlenmiş katmanı seçmek için Layers panelini ya da katman işaretlerini kullanmanız gerekebilir. Bir sonraki uygulamada göreceğimiz gibi katmanların yığılma sırasını da ayarlayabilirsiniz. Belgenizin görünümü burada gösterilen örneğe benzeyecektir. Katman Oluşturmak 319
5. textlayer katmanını seçin. Properties denetçisinde Bg Color kutusuna tıklayın ve açık hâki rengi seçin ya da metin alanına #CCCC99 yazın. Katmanı (İçinde metin bulunan tabloyu değil) seçtiğinizden emin olun. Katmanın arka plan rengi açık hâkiye dönecektir. Katmanların arka planlarıyla ilgili iki seçenek mevcuttur: Bg image: Katman için bir arka plan resmi tanımlamaya yarar. Metin alanına resmin yolunu yazın ya da bir kaynak resim seçmek için klasör simgesine tıklayın. Katmanların arka planı her tarayıcıda görünmeyebilir. Bg color: Katman için bir arka plan rengi tanımlamaya yarar. Bu seçeneği saydam olarak ayarlamak için metin alanını boş bırakın ya da renk menüsünün üst tarafında yer alan varsayılan seçeneği (üzerinde kırmızı bir çizgi olan boş renk kutucuğu) işaretleyin. Bu seçenekleri kullanırken sayfalarınızı bütün Web tarayıcılarında test edin. Katmanın içeriğine bağlı olarak sonuçlar beklediğinizden farklı olabilir. Buradaki uygulamada katmanın içinde metin var. Web tarayıcısında görüntülendiğinde metnin boyutu büyük ölçüde ziyaretçinin Web tarayıcısına ve sistemine bağlı olarak (özellikle de metin boyutu göreceli olarak ayarlandıysa) çok farklı olabilir. Metin, katman için tanımlanan uzunluk değerini aşabilir. Bu durumda arka plan çok büyük ya da çok küçük olabilir. Bunu önlemek için tablonun arka planına açık hakî rengi uygulayabilirsiniz. Bu sorunu çözmenin diğer bir yolu da metin için mutlak bir büyüklük tanımlamak üzere CSS kullanmak ve sonra da katmanın büyüklüğünü buna göre ayarlamaktır. 6. om katmanını seçin, ardından Shift tuşunu basılı tutup kenarlığına tıklayarak textlayer katmanını seçin. Ayrıca birden fazla katman seçmek için Shift tuşunu basılı tutup Layers panelinde seçmek istediğiniz katmanların isimlerine tıklayabilirsiniz. Birden fazla katman seçili durumda olduğu için en son seçilen katman içi dolu mavi tutamaçlarla gösterilir. Diğer katmanlara ait tutamaçların içi boştur. 320 DERS 9
Birden fazla katmanı aynı anda yeniden boyutlandırmak isterseniz, belgede iki ya da daha fazla katmanı seçin. Ardından da Modify > Arrange > Make Same Width ya da Make Same Height komutunu seçin. İlk seçilen katmanların genişlik ya da yükseklik değerleri en son seçilen katmanın genişlik ya da yükseklik değerine eşit olacak şekilde ayarlanacaktır. Bu değerleri seçili durumdaki bütün katmanlara uygulamak için Properties denetçisindeki genişlik ve yükseklik metin alanlarını da kullanabilirsiniz. 7. Modify > Arrange > Align Top komutunu seçin. Bir hizalama seçeneği kullandığınızda, seçili durumdaki bütün katmanlar en son seçilen katmanın konumuna göre hizalanır. Bu menüdeki diğer hizalama seçenekleri Align Left (Sola Hizala), Align Right (Sağa Hizala) ve Align Bottom dır (Alta Hizala). textlayer ve om katmanlarının üst kısımları birbirine göre hizalanacaktır. 8. Belgeyi kaydedin. Bu dosyayı bir sonraki uygulama için açık bırakın. Katman Oluşturmak 321
Katmanların Yığılma Sırasını Değiştirmek Katmanların yığılma sırasını değiştirmek için Properties denetçisini ya da Layers panelini kullanabilirsiniz. Burada her bir katmanın z-index değeri kullanılır. z-index değeri, katmanların Web tarayıcısında hangi sırayla oluşturulacağını belirler. z-index numarası daha büyük olan bir katman, z-index numarası daha küçük olan katmanların üstünde yer alır. Burada kullanılan değerler pozitif ya da negatif olabilir. Bu, özellikle üst üste gelen katmanlarınız varsa ve hangi katmanın ya da katmanların diğerlerinin üzerinde olacağını belirlemeniz gerekiyorsa faydalıdır. Birden fazla katman aynı z-index numarasına sahip olabilir. Bu durumda, kodda ilk görünen katman en üstte yer alır. 1. layers.html belgesinde class katmanını seçin ve yukarıya doğru, om katmanının üzerini kısmen örtene kadar sürükleyin. Sayfanızı Web tarayıcınızda önizleyin. Katmanlarda resimlerle çalışırken saydam arka plana sahip resimler (saydamlığı destekleyen GIF formatında kaydedilmiş resimler) oluşturabilirsiniz. Katmanlarda diğer resimlerin üzerinde saydam arka plana sahip resimler kullanarak daha derinlikli bir görsel efekt elde edebilirsiniz. Bu uygulamanın aşağıdaki adımlarında katmanların yığılma sırasını değiştirerek om katmanının class katmanının üzerinde görünmesini sağlayacaksınız. 322 DERS 9
2. Layers panelinde class katmanını seçin ve listede aşağıya doğru, om katmanının altına doğru sürükleyin. Layers panelinde class ve textlayer katmanlarının arasında mavi, ince bir çizgi belirince sürükleme işlemini durdurun ve katmanı bırakın. Layers panelinde bu değişikliğin uygulandığını göreceksiniz. class katmanı artık om ve textlayer katmanlarının arasında yer almaktadır. Layers panelindeki z-index numaraları da otomatik olarak değişecektir. Yığılma sırasını, katmanları Layers panelinde sürükleyerek değiştirmek, z-index değerlerini Properties denetçisinde elle değiştirmeye göre daha kolay olabilir. Çünkü sürükleme yönteminde Dreamweaver z-index değerlerini otomatik olarak değiştirir. Katman Oluşturmak 323
class katmanının Properties denetçisinde yer alan Z-index metin alanındaki değer 4 iken değişerek 2 olacaktır. Belgenizin görüntüsü daha önce verilen örneğe benzeyecektir. Bu dosyayı kaydedin ve bir sonraki uygulama için açık bırakın. Katmanları İç İçe Yerleştirmek ve Dışarıya Çıkarmak İç içe yerleştirmek, katmanları gruplama yöntemlerinden biridir. Başka bir katmanın içine yerleştirilen bir katman, ebeveyn katmanıyla birlikte hareket eder ve onun görünürlük ayarını kullanır. Kimi zaman bir katmanı diğer bir katmanın içine yerleştirmeniz ya da içerdeki bir katmanı dışarıya çıkarmanız gerekebilir. Şimdiki uygulamada bu işlemlerin nasıl yapıldığını göreceğiz. Yalnız dikkatli olun, çünkü iç içe geçen katmanlar bütün Web tarayıcılarında düzgün bir şekilde görüntülenmeyebileceğinden sonuçlar çok güvenilir olmayabilir. Test etme konusunu Ders 15 te göreceğiz. Properties denetçisindeki T (üst) ve L (sol) değerleri başka bir katmanın içine yerleştirilmiş bir katmanda sayfanın sol üst köşesine değil, ebeveyn katmana bağlıdır. T ve L değerleri, katmanın konumunu sayfanın ya da ebeveyn katmanın sol üst köşesine göre tanımlar. 1. layers.html belgesinde Layers panelini kullanarak Layer3 adlı katmanı seçin ve Cmd (Macintosh ta) ya da Ctrl (Windows ta) tuşunu basılı tutup sürükleyerek katman adını (katmanın kendisini değil) textlayer katmanının üzerine getirin. textlayer katmanının üzerine geldiğinde Layer3 katmanını bırakın. Windows ta, Layer3 katmanını üzerinde getirdiğinizde textlayer katmanının isminin etrafında düz bir dış hat belirir. Macintosh ta böyle bir görsel işaret kullanılmaz. Katmanların arasındaki alan ince mavi bir çizgi görüntülenerek vurgulandığında farenin düğmesini bırakmayın. Aksi takdirde katmanları iç içe yerleştirmek yerine katmanların yığılma sırasını değiştirirsiniz. 324 DERS 9
Layers panelinde Layer3 katmanı, ebeveyn katmanının (textlayer) altında girintili olarak görüntülenecektir. textlayer katmanının yanında aşağıyı gösteren bir üçgen (Macintosh ta) ya da bir eksi işareti ( ) düğmesi (Windows ta) göreceksiniz; bunun yardımıyla içteki katmanı görebilirsiniz. Sadece ebeveyn katmanı görüntülemek için üçgene (Macintosh ta) ya da eksi işaretine (Windows ta) tıklayarak bu görünümü daraltabilirsiniz. Bu durumda sadece ebeveyn katman ve yanında sağ tarafı gösteren bir üçgen (Macintosh ta) ya da bir artı işareti (+) (Windows ta) görürsünüz. İçteki katmanların listesini görmek için artı işaretine ya da üçgene tekrar tıklayabilirsiniz. Belge penceresinde Layer3 katmanının konumu, katman textlayer katmanının sağ altında olacak şekilde kayacaktır. Çünkü Layer3 katmanının L (sol) değeri artık ebeveyn katmanı olan textlayer a göre ayarlanmaktadır. Belge penceresinde Layer3 ü temsil eden katman simgesi, textlayer katmanının üzerinde, tablonun hemen üstünde görünecektir. Dreamweaver da bu simge tarafından oluşturulan alan, sadece görsel yardımcıların (Visual Aids) etkinleştirilmesi durumunda görünür. Simge, Web tarayıcısının penceresinde görünmez ve burada herhangi bir yer kaplamaz. layers.html dosyasını farklı tarayıcılarda önizlerseniz, katmanların görüntülenmesiyle ilgili bazı farklılıklar olduğunu görürsünüz. Görüntü, ziyaretçilerin işletim sitemine ve Web tarayıcısına bağlı olarak farklılık gösterebilir. Bu yüzden her zaman çalışmalarınızı farklı tarayıcılarda test edin. Insert araç çubuğundaki Draw Layer düğmesini kullanarak mevcut bir katmanın içinde yeni bir katman oluşturabilirsiniz. Bunun için Preferences iletişim kutusunda Nest when created within a layer seçeneğinin işaretli olması gerekir. Katmanlarla ilgili tercihleri değiştirmek isterseniz Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçin ve Category menüsünde Layers seçeneğini işaretleyin. Katman Oluşturmak 325
2. Layers panelinde içteki Layer3 katmanını seçin ve textlayer katmanının üzerine doğru, bu katmanın (textlayer) hemen üzerinde ince, mavi bir çizgi görünecek şekilde sürükleyin. Böylece katmanların iç içe geçme durumu ortadan kalkacak ve katman Layers panelinde artık girintili olarak görünmeyecektir. Layer3 katmanı belge penceresinde orijinal konumuna dönecek ve Layers panelinde textlayer katmanının üzerinde görünecektir. 3. layers.html belgesini kaydedin. Bu dosyayı bir sonraki uygulama için açık bırakın. 326 DERS 9
Katmanın Görünürlük Özelliğini Değiştirmek Bir katmanı göstermek ya da gizlemek için görünürlük özelliğini değiştirebilirsiniz. Bu, kullanıcı etkileşimi özellikleri eklemek için katman kullanırken faydalı olabilir. Kullanıcı siteyle etkileşime girdiğinde cevap olarak görüntülenecek dinamik içerikler oluştururken katmanların görünürlük özelliğini değiştirmeniz gerekebilir. 1. layers.html belgesinde Layer3 katmanını seçin. Bu katmanın görünürlük özelliğini değiştirmek için Layers panelinin sol tarafında yer alan Visibility sütununa bir kez tıklayın. Layer3 satırına ait sütunda kapalı göz şeklinde bir simge belirecektir. Bu, görünürlük özelliğinin gizli (Hidden) olarak ayarlandığını gösterir ve katman geçici olarak kaybolur. Bütün katmanların görünürlük özelliğini aynı anda değiştirmek isterseniz, sütunun en üstünde yer alan göz simgesine tıklayın. Layers panelinde üç adet görünürlük seçeneği vardır: Inherit, visible ve Hidden. Inherit seçeneği, katmanın ebeveynine ait görünürlük özelliğini kullanır. Bu seçenekte Visibility sütununda herhangi bir simge görüntülenmez. Visible seçeneği, ebeveynin görünürlük özelliği nasıl ayarlanırsa ayarlansın, katman içeriğini görüntüler. Bu seçeneği göstermek için Visibility sütununda açık bir göz simgesi görüntülenir. Hidden seçeneği, ebeveynin görünürlük özelliği nasıl ayarlanırsa ayarlansın, katman içeriğini saydam olarak görüntüler. Bir katmanın görünürlük özelliğini Hidden olarak ayarlarsanız bu katmanı seçmek için kullanabileceğiniz araçlar muhtemelen sadece katman işareti ve Layers paneli olacaktır. Bu seçeneği göstermek için Visibility sütununda kapalı bir göz simgesi kullanılır. Properties denetçisinde dördüncü bir görünürlük seçeneği daha vardır. Default (varsayılan) seçeneği herhangi bir görünürlük özelliği tanımlamaz, ama çoğu Web tarayıcısı bu seçeneği, katman ebeveynin görünürlük değerini kullanıyormuş gibi değerlendirir. Katman Oluşturmak 327
Yeni katmanlar için kullanılan varsayılan görünürlük seçeneğini ayarlamak isterseniz Dreamweaver > Preferences (Macintosh ta) ya da Edit > Preferences (Windows ta) komutunu seçin ve Layers kategorisine geçin. 2. layers.html belgesini kaydedin ve Web tarayıcınızda önizleyin. Dreamweaver da seçili durumdayken Layer3 katmanını belge penceresinde görebilirsiniz. Seçili değilse katman ortadan kaybolur ve belge penceresinin Web tarayıcısındaki gibi görünmesine sebep olur. Gizli bir katmandaki içerik görünür durumdaki bir katmanın içeriğinden büyükse, tarayıcı penceresi bu gizli içerik yüzünden görünür katmanın sonuna kadar kaydırılmaya devam edecektir. 3. Layers panelinde Layer3 katmanını seçin ve Edit > Clear komutunu seçin (Macintosh ta) ya da Backspace tuşuna basın (Windows ta). Macintosh ta Layers panelindeyken Delete tuşuna basma işe yaramayabilir. Bunun yerine Edit > Clear komutunu seçebilir ya da katmanı belge penceresinden silebilirsiniz. Bu dosyayı bir sonraki uygulama için açık bırakın. Izgara ve Cetvel Seçeneklerini Ayarlamak Katmanlarla çalışırken sayfanıza katmanları yerleştirmek için görsel yardımcı olarak ızgaraları ve cetvelleri kullanmak isteyebilirsiniz. 1. class katmanını seçin ve Properties denetçisini kullanarak kaymanın boyutlarını genişlik (W) 15 ve yükseklik (H) 100 olacak şekilde değiştirin. Katmanın içeriğiyle aynı boyutlarda olması, bu uygulamada katmanın konumunu ayarlarken işinizi kolaylaştıracaktır. 2. layers.html belgesinde View > Grid > Show Grid komutunu seçin. Izgara belge penceresinde görüntülenecektir. Komutun yanındaki onay işareti, bu seçeneğin etkin olduğunu gösterir. 3. View > Grid > Snap To Grid komutunu seçin. Bu seçenek kenetlenme özelliğini açar ya da kapatır. Komutun yanındaki onay işareti, bu seçeneğin etkin olduğunu gösterir. Bu seçenek etkin durumdayken katmanları taşıdığınızda katmanlar ızgara çizgilerine yaklaşınca bu çizgilere kenetlenirler. 4. om katmanını seçin; sonra da Shift tuşunu basılı tutarak class katmanını seçin. class katmanının seçim tutamacını kullanarak katmanları, class katmanının sağ kenarı soldan yedinci düşey ızgara çizgisine yapışacak ve belge penceresinin üst kenarıyla om katmanının üst kenarı arasında bir ızgara kutusu olacak şekilde sağa doğru taşıyın. 328 DERS 9
Siz katmanları taşırken class katmanı om katmanın üzerinde görünecektir, çünkü en son class katmanını seçtiniz. Layers panelinde her ikisinin de seçili olduğunu göreceksiniz. Bunu her iki katman adının da vurgulu olmasından anlayabilirsiniz. Belge penceresinin boş bir alanına tıklayarak katmanların seçimini iptal ettiğinizde om katmanı yine class katmanının üzerinde görünecektir. class katmanı ızgara çizgisine kenetlenecektir. Her iki katmanın da seçimini iptal etmek için belge penceresine tıkladıktan sonra sadece class katmanını seçin. L değerinin 200px olduğunu göreceksiniz. Seçimi kaldırıldıktan sonra, belge penceresinde ızgara çizgisinin hemen solunda class katmanının soluk gri renkli kenarlığını görebilirsiniz. Kenarlık ızgara çizgisinin 1 piksel solunda görünüyor olsa bile, katman aslında ızgara çizgisiyle tam olarak hizalanmıştır. Gördüğünüz 1 piksellik gri katman kenarlığı, Web tarayıcısında görüntülenmeyen bir Dreamweaver görsel yardımcısıdır. View > Grid > Grid Settings komutunu seçerek ızgara ayarlarını değiştirebilirsiniz. Bu komutu seçtiğinizde Grid Settings iletişim kutusu açılacaktır. Burada rengi, boşluk değerini ve birimi (piksel, inç ya da santimetre) ayarlayabilir ve iki ızgara görüntüsü (çizgi ve nokta) arasında geçiş yapabilirsiniz. Izgara, katmanları hizalarken faydalı olabilir. 5. Eğer görünmüyorlarsa View > Rulers > Show komutunu seçerek cetvelleri etkinleştirin. Cetveller belge penceresinin üst ve sol kenarında görüntülenir. Komutun yanındaki onay işareti, bu seçeneğin etkin olduğunu gösterir. View > Rulers > Pixels, Inches, ya da Centimeters komutunu seçerek cetveller için kullanılan birimi değiştirebilirsiniz. Yanındaki onay işaretinden geçerli birimin hangisi olduğunu anlayabilirsiniz. 6. textlayer katmanını seçin ve class katmanıyla ikisinin üst kısmını hizalayarak ve textlayer katmanının sol kenarını class katmanının sağ kenarı boyunca uzanan ızgara çizgisine hizalayarak class katmanının sağına taşıyın. textlayer katmanının genişlik değerini (W) 300px olarak değiştirin. 7. Sayfayı Web tarayıcınızda önizleyin. Gerekiyorsa Properties denetçisi aracılığıyla textlayer katmanının L değerini ayarlayın veya sol ve sağ ok tuşları aracılığıyla katmanını taşıyarak class katmanıyla textlayer katmanının arka planı arasında beyaz boşluk kalmamasını sağlayın. Eğer textlayer katmanının hâkî renkli arka planı tablonun içinde metnin alt kısmına kadar devam etmiyorsa ve Web tarayıcısında görüntülediğinizde tablonun alt kısmının yakınlarında beyaz bir boşluk görünüyorsa, tablonun arka plan rengini aynı hâkî renge ayarlayabilir ya da katmanın yükseklik değerini artırabilirsiniz. Katman Oluşturmak 329
Ayrıca View > Visual Aids > Layer Outlines komutunu seçerek katman kenarlıklarını geçici olarak kapatabilirsiniz. Bu dersin geri kalan kısmında katman kenarlıkları (Layer Outlines) görsel yardımcılarının açık olduğu kabul edilmiştir. Sıfır noktası, yatay ve düşey cetvelin kesiştiği noktadır. Sıfır noktasının varsayılan konumu, sayfanın sol üst köşesi, yani sayfanın üst ve sol kenarlarının kesiştiği noktadır. Yatay ve düşey cetvellerin arasındaki kareye tıkladıktan sonra sıfır noktasını aşağıya ve sağa doğru sürükleyip bırakarak sıfır noktasını farklı bir konuma ayarlayabilirsiniz. Sıfır noktası belge içinde bir noktaya taşındığında sıfır noktasının üstünde ve solunda negatif değerler görürsünüz. Sıfır noktasını eski konumuna getirmek isterseniz View > Rulers > Reset Origin komutunu seçin. Belgenizin görünümü buradaki örneğe benzeyecektir 8. Grid, Snap to Grid ve Ruler seçeneklerini kapatın. Menüdeki onay işaretini kaldırmak ve ızgarayı gizlemek için View > Grid > Show Grid komutunu seçin. Snap to Grid (View > Grid > Snap to Grid) ve Ruler (View > Rulers > Show) seçeneklerinin onay işaretlerini kaldırmak için de aynı yöntemi kullanın. Kitabın geri kalan kısmında ızgara seçeneğinin kapatılmış olduğu kabul edilmektedir. Cetvelleri kapatabilir ya da açık bırakabilirsiniz. Bu dosyayı kaydedin ve bir sonraki uygulama için açık bırakın. 330 DERS 9
Drag Layer Davranışını Kullanmak Katmanları davranışlarla (Ders 8 de görmüştük) birlikte kullanarak ziyaretçilerinizin sayfalarınızla etkileşime girmesini sağlayabilirsiniz. Drag Layer davranışı, ziyaretçilerin tarayıcı penceresinde bir katmanı tutarak sayfadaki farklı bir konuma taşımalarını mümkün kılar. Bu, kullanıcı tarafından taşınabilen elemanlarla etkileşimli oyunlar ya da öğretim araçları hazırlamak için harika bir yoldur. 1. Ekleme noktasını textlayer katmanında bulunan metnin içine yerleştirin. Belge penceresinin alt kısmında yer alan Etiket Seçici deki <table> etiketine tıklayın. Ekleme noktasını tablonun hemen arkasına getirmek için sağ ok tuşuna bir kez basın ve teaching.jpg resmini ekleyin. Resmin alternatif metni için teaching ifadesini kullanın. Daha önce Layer3 katmanında kullandığınız teaching.jpg resmi artık textlayer katmanında, metni içeren tablonun hemen altında yer almaktadır. 2. class katmanının hemen altında yeni bir katman oluşturun. Bu katmanı grab olarak adlandırın ve katmanın içine şu cümleyi yazın: Grab the class image above and move it next to the photograph of the teacher below. Belgenizin görüntüsü buradaki örneğe benzeyecektir. Katman Oluşturmak 331
Bir öğenin taşınabileceğini ziyaretçilere bildirmek iyi bir alışkanlıktır. Ziyaretçilere class resminin sürüklenebileceğini bildiren metni eklediğinize göre artık davranışı uygulayabilirsiniz. 3. Belge penceresinin alt kısmında yer alan Etiket Seçici de <body> etiketini üzerine tıklayarak seçin. Drag Layer davranışı bir katmana doğrudan uygulanamaz. Bu yüzden bu davranışı belgenin <body> etiketine uygulayacaksınız. Drag Layer davranışını diğer etiketlere de uygulayabilirsiniz (örneğin bir katmanın içinde ya da dışında olabilen bağlantı etiketi <a> gibi). 4. Behaviors panelindeki artı işaretine (+) tıklayın ve Add Behavior açılır menüsünden Drag Layer eylemini seçin. Behaviors paneli Tag Inspector panel grubunda yer alır. Davranış konusunu Ders 8 de görmüştük. Drag Layer iletişim kutusu açılacaktır. Basic sekmesinin etkin olduğuna dikkat edin. Bir katman seçili durumdaysa Drag Layer eylemi kullanılamaz. Eğer kullanılamaz durumdaysa (gri olarak gösterilir), <body> etiketinin seçili olduğundan emin olun. 5. Layer menüsünde layer class ı seçin ve Movement menüsünde Constrained seçeneğini işaretleyin. Movement açılır menüsünün sağ tarafında dört tane metin alanı belirecektir (Up, Down, Left ve Right). 332 DERS 9
6. Up metin alanına 10, Down metin alanına 600, Left metin alanına 10 ve Right metin alanına da 10 yazın. Drop Target ve Snap if Within metin alanlarını boş bırakın. Bu koordinatlar, ziyaretçilerin class katmanını sadece teaching resmine ait alanın içine yerleştirmesine izin verir. İzin verilen hareket miktarı, class katmanının orijinal konumuna bağlıdır. Burada ziyaretçiyi, class katmanını bulunduğu yerden ancak 10 piksel yukarıya ve 600 piksel aşağıya (ve diğer yönlerde de ilgili koordinat değerleri kadarlık bir mesafe içinde) taşıyabilecek şekilde kısıtlamış oldunuz. Movement menüsünde Unconstrained i seçseydiniz, ziyaretçi class katmanını sayfada istediği yere taşıyabilirdi. Constrain seçeneğini kullanarak ziyaretçinin bir katmanı hangi yönde ve kaç piksel taşıyabileceğini belirleyebilirsiniz. Up ve Down metin alanlarına 0 (sıfır) yazarak ziyaretçileri katmanı sadece yatay doğrultuda taşıyacak şekilde kısıtlayabilirsiniz. Bu durumda katman yukarıya ya da aşağıya taşınamaz. Benzer şekilde Left ve Right metin alanlarına 0 yazarak taşıma hareketini düşey doğrultuyla da sınırlayabilirsiniz. Ziyaretçilerin katmanı yerleştirmelerini istediğiniz bir hedef alanınız varsa, bu konumu Drop Target alanındaki Left ve Top metin alanlarını (katmanın hedef konumunda sahip olacağı değerler) kullanarak tanımlayabilirsiniz. Söz konusu katmanı, piksel aralığıyla tanımladığınız bir bölgeye girdiğinde hedef konuma kenetlenecek şekilde ayarlayarak ziyaretçilerin katmanı hedef konuma yerleştirmelerini kolaylaştırabilirsiniz. Bu bölgeyi (kenetlenme bölgesi), Snap if within metin alanına bir değer girerek belirleyebilirsiniz. 7. OK düğmesine tıklayın. Dosyayı kaydedin ve Web tarayıcınızda önizleyin. Taşımaya çalışarak class katmanının nasıl hareket ettiğini test edin. Resmi, sadece altıncı adımda girdiğiniz sayısal değerlerin tanımladığı bölge içinde taşıyabildiğinize dikkat edin. Bu davranış bütün tarayıcılarda çalışmayabilir. Katman Oluşturmak 333
Drag Layer iletişim kutusunun Advanced sekmesini kullanarak resmin belirli bir bölümünde ziyaretçilerin tutamaç olarak kullanabilecekleri bir alan tanımlayabilirsiniz. Böylece ziyaretçiler bu tutamacı sürükleyerek katmanı taşıyabilirler. Burada ayrıca katman taşındığında katmanların z-index değerine ne olacağını da belirleyebilirsiniz. Bütün bunların dışında bu iletişim kutusunu kullanarak katman taşınırken, bırakıldığında ya da hedefe kenetlendiğinde başka JavaScript kodlarını da çağırabilirsiniz. Drag Layer davranışıyla ziyaretçileriniz için çok daha kapsamlı bir etkileşim ortamı sağlayabilirsiniz. Show-Hide Layers Davranışını Kullanmak Show-Hide Layers davranışını kullanarak bir katmanın görünürlük özelliğini kontrol edebilir ve görünürlük özelliğinin ziyaretçinin hareketlerine bağlı olarak değişmesini sağlayabilirsiniz. 1. textlayer katmanının üzerinde yeni bir katman oluşturun. Bu katmanı yoga olarak adlandırın ve jayne.jpg resmini bunun içine yerleştirin. Resmin alternatif metnini yoga olarak ayarlayın. yoga katmanının sağında ikinci bir katman oluşturun. Bu katmanı details olarak adlandırın ve içine şu metni yazın: Learn about a variety of yoga poses in our classes. Belgenizin görünümü aşağıdaki gibi olacaktır. 334 DERS 9
2. details katmanını seçip Properties denetçisindeki Vis menüsünde hidden seçeneğini işaretleyerek katmanın görünürlük özelliğini Hidden (Gizli) olarak ayarlayın. Belge penceresinde katmanın dışında bir yere tıklayarak katmanın seçimini kaldırın. Katmanın görünürlük özelliğini, Visibility sütununa tıklayıp kapalı göz simgesini görüntüleyerek de ayarlayabilirsiniz. Kapalı göz simgesi, söz konusu katmanın gizli olduğunu gösterir. Belirli bir katmanın Visibility sütunundaki simgeye tıkladığınızda o katmanın görünürlük durumu değişir. details katmanı kaybolacaktır. 3. jayne.jpg resmini seçin, Properties denetçisindeki Link metin alanına # yazın ve Return (Macintosh ta) ya da Enter (Windows ta) tuşuna basın. Resim seçili durumdayken bir davranış eklemek için Behaviors panelindeki (Tag Inspector panel grubunda yer alır) artı işaretli düğmeye (+) tıklayın. Add Behavior menüsünden Show-Hide Layers ı seçin. Show-Hide Layers iletişim kutusu açılacaktır. Buradaki listede sayfadaki katmanlar yer alır. 4. Named Layers listesinde details katmanını seçin ve Show düğmesine tıklayın. OK düğmesine tıklayarak Show-Hide iletişim kutusunu kapatın. Show düğmesine tıkladığınızda, Show-Hide Layers iletişim kutusundaki listede details katmanının yanında (show) ifadesi görüntülenir. Katman Oluşturmak 335
5. Behaviors panelinde olay (Event) menüsüne tıklayın ve <A> onmouseover ı seçin. Bu davranış, ziyaretçi imleci söz konusu katmanın üzerinde getirdiğinde tetiklenir. Davranışlar için olay seçmeyi Ders 8 de görmüştük. 6. layers.html dosyasını kaydedin ve sayfayı Web tarayıcınızda test edin. Bu dosyayı bir sonraki uygulama için açık bırakın. Ziyaretçi imleci resmin üzerinden kaldırdığında katmanın tekrar gizlenmesini istiyorsanız, 3 ten 5 e kadar olan adımları tekrarlayın, bu işlemler esnasında 4. adımda Show yerine Hide ı seçin ve 5. adımda da <A> onmouseover yerine <A> onmouseout u seçin. Katmanları Tablolara Dönüştürmek Katmanlar sayfalarınızı tasarlamak için kolay bir yöntem olabilir, ancak bu durumda ziyaretçilerinizin sayısı sınırlanabilir, çünkü bütün Web tarayıcıları katmanları desteklemez. Yeni tarayıcıların çoğu katmanları desteklese de eski tarayıcılar katman tabanlı içerikleri herhangi bir konum ayarı ve yerleşim kontrolü olmadan görüntüler. Eğer sayfanızı katman kullanarak tasarlamaya karar verdiyseniz, tarayıcıları katman desteği sağlamayan ziyaretçiler için alternatif bir sayfa hazırlamak üzere katmanları bir tabloya dönüştürmek isteyebilirsiniz. Sayfanızı farklı tarayıcılarda test edip ziyaretçilerinizin ne tip tarayıcılar kullandığını görerek alternatif bir sayfa hazırlamanızın gerekip gerekmediğini belirleyin. Katmanları bir tabloya dönüştürdükten sonra tasarımla ilgili değişiklikleri tamamlamak için Layout görünümüne geçebilirsiniz. Daha sonra kullanıcıları tarayıcı sürümlerine bağlı olarak yeniden yönlendirmek için Check Browser davranışını kullanabilirsiniz. Aşağıdaki uygulamada katmanların nasıl dönüştürüldüğü gösterilmektedir. Ama tablo hazırlamak için tavsiye edilen yöntem, tabloları ve tablo hücrelerini Layout görünümünü kullanarak çizmek ya da tabloları Standard görünümde oluşturmaktır (Ders 6 da her iki yöntemi de kullanmıştınız). Katmanları tablolara dönüştürürken bazı kısıtlamalarla karşılaşırsınız. İç içe yerleşmiş katmanlar kullanamazsınız ve katmanlar üst üste gelemez. Bu koşulların gerçekleşmesi durumunda Dreamweaver bir uyarı penceresi görüntüler ve tabloyu oluşturmaz. Ayrıca diğer katmanları yine katman olarak bırakarak tek bir katmanı ya da bir katman grubunu tabloya dönüştüremezsiniz. Sayfanın tamamı ve içerdiği bütün katmanlar bir tabloya dönüştürülür. 336 DERS 9
1. layers.html belgesindeyken File > Save As komutunu seçin ve açılan iletişim kutusunda Save As (Macintosh ta) ya da Dosya adı (Windows ta) metin alanına layers_tables.html yazın. Dosyayı Lesson_09_Layers klasörüne kaydedin. Bu belgedeki katmanlar dönüştürülecek ve yerlerini tek bir tabloya bırakacaklardır. Tabloya dönüştürme işleminde katman isimleri silinir. 2. Belge penceresine tıklayın. Layers panelindeki Prevent Overlaps seçeneğini işaretleyin. Sayfanın üst kısmında katmanların konumunu, katmanlar yan yana olmayacak ve üst üste gelmeyecek şekilde ayarlayın. Üst üste binen katmanlar tabloya dönüştürülemez. Katmanları oluşturmaya başlamadan önce bu seçeneği işaretlerseniz Dreamweaver katmanların üst üste binmesini engeller. Prevent Overlaps seçeneğini işaretledikten sonra class katmanını om katmanının üzerine taşımaya çalışarak bunu test edebilirsiniz. Prevent Overlaps seçeneğini kullanarak katmanları diğer katmanlara olabildiğince yaklaştırabilirsiniz. Üst üste binmiş katmanlarınız varsa, Prevent Overlaps seçeneğini işaretlediğinizde bu katmanlar taşınmaz. Üst üste binmelerini önlemek için onları sizin taşımanız gerekir. 3. Etiket Seçici de <body> etiketini seçin. Behaviors panelinde Drag Layer davranışını seçin ve Remove Event düğmesine tıklayın. Belge penceresindeki jayne.jpg resmini seçin, Behaviors panelinde Show-Hide Layers davranışını seçin ve Remove Event düğmesine tıklayın. Katman Oluşturmak 337