Katman Oluşturmak - BITEFO FETHIYE 2007

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.
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.
316 DERS 9
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
Katmanlara uygulanan ya da katmanları etkilemek için kullandığınız davranışlar varsa,
katmanları tabloya dönüştürdükten sonra bu davranışlara gerek kalmaz. Belgeyi anlaşılır
kılmak, hataları ve gereksiz kodları temizlemek ve dosya boyutunu küçültmek için bu tür
davranışların silinmesi gerekir.
4. Modify > Convert > Layers to Table komutunu seçin.
Convert Layers to Table iletişim kutusu açılacaktır. Bu iletişim kutusunda çeşitli seçenekler
bulunmaktadır.
• Most accurate, her katman için bir tablo hücresi, artı katmanların arasındaki boşluğu
korumak için gereken bütün ilâve hücreleri oluşturur.
• Smallest: collapse empty cells, belirlenen sayıdaki pikselin içine yerleştirilmeleri durumunda
katmanların kenarlarının hizalanması gerektiğini belirtir. Bu seçenek işaretlendiğinde,
sonuçta elde edilen tablo daha az sayıda boş satıra ve sütuna sahip olabilir.
• Use transparent GIFs, tablonun son satırını saydam GIF’lerle doldurur. Böylece tablonun
bütün tarayıcılarda aynı şekilde görüntülenmesi sağlanır. Bu seçenek işaretlendiğinde,
sonuçta elde edilen tabloyu sütunlarını sürükleyerek düzenleyemezsiniz. Bu seçeneğin
işaretlenmemesi durumunda, elde edilen tablo saydam GIF’ler içermez ve farklı
tarayıcılarda görüntüsünde küçük farklar olabilir.
• Center on page, sonuçta elde edilen tabloyu sayfada ortalar. Bu seçenek işaretlenmezse tablo
sola hizalanır.
• Layout tools alanını kullanarak istediğiniz yerleşim veya ızgara seçeneklerini
ayarlayabilirsiniz.
5. Most Accurate, Use Transparent GIFs ve Center on Page seçeneklerinin
varsayılan ayarlarını ellemeyin ve OK düğmesine tıklayın.
Üst üste binmiş katmanlarınız varsa bir uyarı mesajı iletişim kutusu açılacak ve Dreamweaver’ın
katmanları tabloya dönüştüremediğini bildirecektir. Bu durumla karşılaşırsanız belgenize geri
dönün ve katmanların hiçbirinin üst üste binmediğinden emin olun.
338 DERS 9
Gizli durumdaki bütün katmanlar silinir. Katmanlarınızı bir tabloya dönüştürdükten
sonra tabloda gereken ayarlamaları yapabilirsiniz.
6. CSS Styles panelinde <style> grubunu seçin ve panelin alt kısmındaki çöp
kutusu simgesine tıklayın. Belge penceresinde class (sınıf) resminin altında yer
alan tablo hücresindeki açıklama metnini seçin ve silin.
Katmanları tabloya dönüştürme işleminde belgenin gövde kısmındaki <div> etiketleri
kendilerine karşılık gelen <table> etiketiyle değiştirilir, ancak belgenin baş kısmında
tanımlanan dahili CSS özellikleri aynı şekilde kalır. Dahili stil sayfasını tümüyle silmek için
CSS Styles panelini kullanabilir ya da sadece katmanları tanımlayan stilleri silebilirsiniz. CSS
Styles paneline baktığınızda iki stil grubu göreceksiniz (sangha.css ve <style>). Bütün proje
sitesinde kullanılan harici stil sayfası sangha.css’tir; <style> grubu ise, siz bu derste katmanlarla
çalışırken oluşturulan dahili stil sayfasıdır. Örneğin textlayer katmanı <style> grubunda
#textlayer olarak tanımlanmıştır. Daha önce oluşturduğunuz katmanların isimlerini kullanan
stillerin hiçbiri artık gerekli değildir ve silinebilirler. Buradaki örnekte dahili stil sayfası
tümüyle silinebilir, ancak dahili bir stil sayfasını silerken dikkatli davranmak ve katmanların
kendisi dışındaki şeyleri (font stili gibi) tanımlayan özellikleri gösteren ilave stillerin mevcut
olmadığından emin olmak için durumu kontrol etmek isteyebilirsiniz.
Katman Oluşturmak 339
Katmanları tablolara dönüştürmek gibi işlemleri gerçekleştirirken belirli işlevler kullanılamaz
hale gelebilir. Buradaki örnekte kullanıcı artık class resmini sayfa üzerinde başka bir yere
taşıyamaz; dolayısıyla bu tür özelliklere ait tüm referansların ya da talimatların silinmesi gerekir.
Netscape Resize Fix Komutunu Kullanmak
Netscape’in 4.x sürümlerinde, ziyaretçi tarayıcı penceresini yeniden boyutlandırdığında
ortaya çıkan bir katman sorunu vardır. Tarayıcı penceresi yeniden boyutlandırıldığında
katmanın şekli değişmektedir. Bu da sayfayla ilgili olarak birtakım sorunlara yol açabilir.
Bu sorunu, katman kullandığınız her yerde belgelerinize Netscape Resize Layer Fix
JavaScript kodunu ekleyerek çözebilirsiniz. Bu JavaScript kodu Netscape 4.x sorununu
çözer ve diğer tarayıcıları etkilemez.
Siz belgede bir katman oluşturduğunuzda Dreamweaver, Netscape Resize Fix kodunu
otomatik olarak ekler. Belgedeki bütün katmanları sildiğinizde bu komutu çalıştırmanız
ve script hâlâ belgenizdeyse bu kodu silmeniz gerekir. Önceki uygulamada katman-tablo
dönüşümü yaptığınız için script’i şimdi sileceksiniz, çünkü artık ona gerek yok.
1. layers_tables.html belgesindeyken, Commands > Add/Remove Netscape Resize
Fix komutunu seçin.
Açılan Add/Remove Netscape Resize Fix iletişim kutusunu kullanarak script’in belgenizde
olup olmamasına bağlı olarak JavaScript kodunu ekleyebilir ya da silebilirsiniz. Bu kod,
ziyaretçinin tarayıcı penceresini yeniden boyutlandırması durumunda sayfanın yeniden
yüklenmesine sebep olur. Dreamweaver bu kodu sayfanıza otomatik olarak ekler. Eğer
katman içeren bir sayfada bu kod bulunmuyorsa, bu iletişim kutusunu kullanarak onu
kolayca ekleyebilirsiniz.
Netscape Resize Fix Javascript kodu belgenin baş kısmında, <body> etiketinden önce
yer alır ve Split ya da Code görünümündeyken bu kodu görebilirsiniz. Kodlarla ilgili
ayrıntıları Ders 16’da göreceğiz.
340 DERS 9
2. Remove düğmesine tıklayın.
Netscape Resize Fix JavaScript kodu sayfadan silinecektir.
3. layers_tables.html belgesini kaydedin.
Bu dosyayı kapatabilirsiniz.
Timeline ile Animasyon
HTML sayfaları, siz bir hareketli GIF ya da bir Macromedia Flash filmi eklemedikçe
genelde hareketsizdir. İmleci üzerine getirdiğiniz düğme, başka bir resimle değiştirilirken
biraz hareket ediyormuş gibi görünebilir, fakat sayfada hareketsiz olarak durur.
Dynamic HTML (DHTML) kullandığınızda Web sayfanıza doğrudan Dreamweaver
içindeyken daha gelişmiş animasyonlar ekleyebilirsiniz. Bu animasyonlar HTML
sayfasının içinde bir eklentiye gerek kalmadan JavaScript ile kontrol edilirler. DHTML
animasyonlarıyla ilgili kısıtlama şu şekildedir: Kullanıcılar, bu sayfaları görebilmek için
sürümü 4.0 ya da daha yeni bir tarayıcı kullanmak zorundadırlar, bununla birlikte bu
animasyonlar çok daha fazla şey yapmanıza imkân sağlayan Flash dosyalarına göre çok
daha kısıtlıdır. Ayrıca Flash dosyaları genelde daha uyumludur ve daha az hata içerirler.
Mümkün olan her yerde timeline yerine Flash filmleri kullanmanız tavsiye edilir. Bu
sebeplerden dolayı timeline özelliği Dreamweaver MX 2004’ten çıkarılmıştır. Fakat Web
geliştiricilerine Dreamweaver’ın eski sürümleriyle hazırlanmış sayfaların düzenlenmesi
ve devamlılıklarının sağlanması işlemlerini kolayca gerçekleştirme imkânı vermek için
bu özellik Dreamweaver 8 sürümüne tekrar dahil edilmiştir. Eski sayfalarla çalışılırken
bir altyapı oluşturması için Timeline animasyonlarının genel özelliklerini ve bileşenlerini
burada kısaca özetledik. Siz yine de animasyon hazırlarken en iyi yöntemin Flash
kullanmak olduğunu aklınızdan çıkarmayın.
Timeline’ın Çalışma Şekli
Bir timeline animasyonunda kullanılan bütün nesneler katmanların içinde bulunur.
Katmanlar, bir hareket yolu oluşturan ve zaman ayarını kontrol eden bir timeline (zaman
çizgisi) içinde düzenlenir. Timeline, filmlerdeki karelere benzeyen bir dizi kareden
oluşur. Her kare Web sayfasında zamandaki belirli bir noktada görüntülenir. Bu da sizin
belirlediğiniz saniyedeki kare sayısı ayarına ve animasyonun uzunluğuna bağlıdır. Bir
karedeki her katmanın özelliklerini ve yerleşimini kontrol edebilirsiniz. Bir kare ayrıca
animasyon sırasında belirli bir davranışı tetikleme özelliğine de sahiptir.
Bir nesnenin (metin ya da resim gibi) taşınabilmesi için bu nesnenin bir katmanın içinde
bulunması gerekir. Resim gibi nesneler bir katmana yerleştirilmeden timeline’a eklenebilir.
Ama bunların konumuna animasyon uygulayamazsınız.
Katman Oluşturmak 341
Timelines Paneli
Window > Timelines komutunu seçerek Timelines panelini açın
Timelines paneli, katmanların özelliklerinin zamana göre değişimini temsil eder.
Timelines panelindeki her satır bir animasyon kanalı olarak adlandırılır ve sayfadaki
elemanları temsil eder. Sadece katmanlara animasyon uygulayabildiğiniz için, Timeline’daki
her satır sadece katman içerebilir. Bir katmanın konumunu, boyutlarını, görünürlük
durumunu ve yığılma sırasını kontrol etmek için Timelines panelini kullanabilirsiniz.
Timelines panelindeki her sütun kare (frame) olarak adlandırılır ve bir zaman birimini temsil
eder. Kare numaraları, her animasyonun kaç kareden oluştuğunu gösterir.
Timeline’a Nesne Eklemek
Timeline’a bir nesne eklemek için önce nesnenin bulunduğu katmanı seçin ve ardından
Modify > Timeline > Add Object to Timeline komutunu seçin. Bu yöntemi kullandığınızda
katman birinci animasyon kanalında (ilk satır) Timelines paneline eklenir.
Ayrıca katman seçim tutamacını kullanarak katmanı tutup belge penceresinden
Timelines panelinin üzerine sürükleyebilirsiniz. Bir katmanı Timelines panelinin
üzerine sürüklediğinizde katman, kendisini üzerine bıraktığınız animasyon
kanalında (satır) belirir.
Ayrıca Modify > Timeline > Add Timeline komutunu seçerek bir sayfaya daha çok timeline
ekleyebilirsiniz. birden fazla timeline oluşturduysanız, Timeline açılır menüsünü kullanarak
bunlardan birini seçebilirsiniz.
342 DERS 9
Animasyon Çubuğu
Belirli bir timeline’a bir nesne eklediğinizde, timeline’da yeni bir kanalda yatay, mavi bir animasyon
çubuğu (animation bar) belirir ve çubukta katmanın adı görüntülenir.
Animasyon çubukları her nesnenin süresini gösterir. Tek bir satırda farklı nesneleri temsil
eden birden fazla çubuk olabilir. Farklı çubuklar aynı kare içinde aynı nesneyi kontrol edemez.
Animasyon çubuğu yeniden herhangi bir kareye ve herhangi bir kanala yerleştirilebilir. Animasyon
çubuğunun kanaldaki ilk konumu için oynatım kafasının konumu temel alınır.
Oynatım kafası, geçerli durumda sayfada timeline’ın hangi karesinin görüntülendiğini gösterir.
Eğer oynatım kafası 1. karede ise, animasyon çubuğu 1. kareden başlar; oynatım kafası 8. karede
ise, animasyon çubuğu 8. kareden başlar. Siz animasyon çubuğunu hareket ettirdiğinizde
oynatım kafası da hareket eder.
Animasyon çubuklarını Timelines panelinde düz renkli alanlarından tutup sürükleyerek
taşıyabilirsiniz.
Varsayılan durumda animasyon çubukları, siz Timelines paneline katman eklediğinizde,
başlangıçta 15 kare uzunluğundadır. Kare sayısı animasyonun uzunluğunu gösterir. Toplam kare
sayısını ve saniyedeki kare sayısını (fps-frames per second) animasyonun hızını ve uzunluğunu
kontrol edebilirsiniz. Toplam kare sayısını, en sondaki anahtar kareyi sağa doğru sürükleyerek
ayarlayabilirsiniz (bu uygulamada yaptığınız gibi). Saniyedeki kare sayısını da Fps metin alanını
kullanarak ayarlayabilirsiniz. Saniyedeki kare sayısı için varsayılan değer olan 15, iyi bir ortalama
değerdir. Daha yüksek hız değerleri performansı artırmayabilir. Web tarayıcıları, kullanıcının
sisteminde belirtilen kare hızına erişemeseler bile, daima animasyonların her karesini oynatırlar.
Bir animasyonun başlangıç zamanını değiştirmek isterseniz, animasyon çubuğunu seçin
(anahtar karelerden birine değil, çubuğun ortasına tıklayın) ve sola ya da sağa doğru sürükleyin.
Aynı anda birden fazla çubuğu seçmek isterseniz Shift tuşunu basılı tutun.
Anahtar Karelerin Kullanılması
Bütün animasyonlar anahtar kareler (keyframes) tarafından kontrol edilir. Anahtar kareler,
animasyonda gerçekleşen olayları tanımlayan temel örneklerdir. Timeline’a bir katman
yerleştirdikten sonra bu katmanın sayfa üzerindeki hareketini kontrol etmek için anahtar
kareleri kullanırsınız. Anahtar kare, katmanın belirtilen özelliklerinde (konum ya da büyüklük
gibi) bir değişiklik yapıldığında animasyonda belirli bir noktayı işaretler. Dreamweaver
değerlere enterpolasyon uygular, yani katmanın yolunu elde etmek üzere anahtar karelerin
arasındaki bütün kareler için gereken değerleri oluşturur. Anahtar karelerin arasında otomatik
olarak oluşturulan yol için anahtar karelerde yer alan katmanların konumları ve değerleri
temel alınır. Varsayılan durumda her zaman bir başlangıç anahtar karesi ile bir de bitiş anahtar
karesi mevcuttur. Bu kareler animasyon çubuğunun başında ve sonunda içi boş yuvarlaklarla
gösterilir. Sadece bu iki anahtar kareye sahip olan bir animasyon düz bir çizgi üzerinde hareket
eder. Düz bir çizgi üzerinde hareket etmeyen ve daha akıcı bir hareketle ve daha karmaşık bir
yol üzerinde ilerleyen bir animasyon oluşturmak için timeline’daki diğer karelere de anahtar
kareler eklemeniz gerekir.
Katman Oluşturmak 343
Bir anahtar kare eklemek için Timelines panelindeyken, imleç bir yuvarlağa dönüşene kadar
Cmd (Macintosh’ta) ya da Ctrl (Windows’ta) tuşunu basılı tutun, ardından istediğiniz noktada
animasyon çubuğuna tıklayın ya da ilgili kareyi seçmek üzere kare (frame) metin alanına bu
karenin numarasını yazın ve Modify > Timeline > Add Keyframe komutunu seçin. Bir anahtar
kareyi silmek isterseniz, söz konusu anahtar kareyi seçin ve ardından Modify > Timeline >
Remove Keyframe komutunu seçin.
Kare metin alanı, size seçilen anahtar karenin hangi karede bulunduğunu (bu karenin
numarasını) söyler. Timeline’da anahtar kareleri sola ya da sağa doğru yeni bir karenin üzerine
sürükleyerek taşıyabilirsiniz. Eğer animasyonunuzu kısaltmak ve hızlandırmak ya da genişleterek
uzatmak isterseniz, en son anahtar kareyi uygun şekilde sola ya da sağa doğru sürükleyerek
animasyon çubuğunun boyunu değiştirin. Siz bu işlemi yaptıktan sonra bütün anahtar
kareler diğer anahtar karelere göre aynı konumda kalmak için otomatik olarak orantılı şekilde
taşınacaktır. Diğer anahtar karelerin taşınmasına engel olmak isterseniz, animasyon çubuğunun
sonunda bulunan anahtar kareyi sürüklerken Ctrl (Windows’ta) ya da Cmd (Macintosh’ta)
tuşuna basın. Yardımcı tuşlar hareketi sadece son anahtar kareye izin vererek kısıtlar.
Macintosh ve Internet Explorer 5.0’la çalışan kullanıcılar resim içeren bir
katmana animasyon uyguladıklarında resim ekranda hareket ederken resmin izi
kalıyormuş gibi bir görüntüyle karşılaşabilirler. Macintosh’ta kullanılan Internet
Explorer 5.0 sürümü, katman resimle aynı boydaysa, sayfa üzerinde hareket
ederken katmanın boyutlarını hesaplayamaz. Bu durumu düzeltmek için,
resimden daha büyük yapmak üzere katmanın büyüklüğünü (veya animasyon
uyguladığınız katman) değiştirmeniz gerekir. Katman timeline üzerindeyken
katmanın büyüklüğünü her anahtar karede değiştirmeniz gerekir. Katmanın
büyüklük değerlerini her anahtar karede tam olarak eşit yapmak için Properties
denetçisini kullanın. Kullandığınız timeline’da ikiden fazla anahtar kare varsa,
katmanı timeline’dan silip baştan başlamak daha kolay olabilir.
Timeline’ı Davranışlarla Kontrol Etmek
Timeline’a davranış eklemek, diğer nesneler davranış eklemeye benzer. Ancak burada
davranışı timeline’da tek bir kareye eklersiniz, animasyon çubuğunun tamamına değil. Siz bu
344 DERS 9
işlemi yaptıktan sonra davranış Behaviors kanalına eklenir ve Behaviors kanalında beliren tire
işareti, davranışın hangi kareye eklendiğini gösterir.
Olaylar timeline’ın en başında gerçekleşmek zorunda değildir. Timeline’ı kullanarak sayfadaki
eylemi, sayfa yüklendikten sonra belirli bir zamana kadar geciktirebilirsiniz. Bunun için
animasyon çubuğunu sağa doğru sürükleyerek istediğiniz kadar boş kare oluşturursunuz.
Bir davranış eklemek için Behaviors kanalında oynatım kafasının (playhead) üzerinde
istediğiniz kareye tıklayın. Behaviors panelini açın ve istediğiniz davranışı ekleyin.
• Autoplay: Sayfa yüklendiğinde timeline’daki animasyonu oynatmak için JavaScript’ten
faydalanır. Sayfanın <body> etiketine bir davranış eklenir; davranış, sayfa bir tarayıcıya
yüklendiğinde otomatik olarak Play Timeline eylemini çalıştırır. Bunu yaparken de onLoad
olayını kullanır. Bu olay, belge tarayıcıya tamamen yüklendikten sonra animasyonun
başlamasını sağlar. Kimi zaman kullanıcıların timeline’daki oynatım araçlarını kontrol
edebilmesini isteyebilirsiniz. Kullanıcı imleci bir düğmenin üzerine getirdiğinde ya
da bir resme tıkladığında animasyonun oynatılması için bir Start Timeline düğmesi
ekleyebilirsiniz. Timelines panelindeki ilk kareyi seçin. Kullanmak istediğiniz resmi ya da
düğmeyi seçin. Bir davranış eklemek üzere Behaviors panelindeki artı işaretli (+) düğmeye
tıklayın ve Timeline > Play Timeline davranışını ekleyin.
• Loop: Timelines panelindeki Loop seçeneğini işaretlediğinizde, oynatım kafasını 1
numaralı kareye geri gönderen son kareye bir davranış eklenir ve bu davranış timeline’daki
animasyonu tekrar oynatır. Davranış Behaviors kanalına eklenir ve son karenin üzerinde
bir tire işareti ile gösterilir. Döngü sayısını tanımlamak için Behaviors kanalındaki
tire işaretini seçip Behaviors panelinde ilgili eyleme çift tıklayarak bu davranışın
parametrelerini düzenleyebilirsiniz. Açılan iletişim kutusunu kullanarak animasyonun
döngüyle kaç kez ve hangi kareden itibaren tekrarlanacağını belirleyebilirsiniz.
• Show / Hide: Named Layers listesinde diğer katmanları seçip Show (Göster) ya da
Hide (Gizle) düğmelerine tıklayarak birden fazla katmanın aynı anda görünmesini ya da
gizlenmesini sağlayabilirsiniz. Default seçeneği katmanın varsayılan görünürlük ayarını
geri yükler. Bu davranışla katmanları görüntüleyebilmeniz ya da gizleyebilmeniz için
katmanların Timelines panelinde olması gerekmez.
Bir Nesneyi Yerleştirmek
Ok tuşları katmanı her seferinde bir piksel taşır. Shift tuşunu basılı tutup bir ok tuşuna
bastığınızda katman, geçerli ızgara artım değeri kadar ilerler.
Katmanı ekranın dışına taşımak için Properties denetçisinin üst kısmındaki L (Left-Sol) metin
alanına negatif bir sayı girebilirsiniz. Web tarayıcısının sol üst köşesi sıfır noktasıdır (bu derste
daha önce cetveller konusunu işlerken görmüştük). Dreamweaver’ın yatay ve düşey cetvelleri
görünür durumdayken bu noktada kesişirler. Bu noktanın sağında ya da altında bulunan her
Katman Oluşturmak 345
şey pozitif bir değere, solunda ve yukarısında bulunan her şey de negatif değere sahiptir.
Katmanın hareketini tarayıcının görünür penceresinin dışında başlatmak için katmanın
başlangıç noktasına negatif bir yatay değer atarsınız.
Bütün bir animasyon yolunun konumunu kaydırmak için timeline’da animasyon
çubuğunu seçin ve katmanı sayfanın üzerinde sürükleyin. Bütün anahtar karelerin
konumunu ayarlayacaktır. Çubuğun tamamı seçiliyken değişiklik yapıldığında çubuk
üzerindeki bütün anahtar karelerde değişiklik yapılır.
z-index, katmanlar üst üste yerleştirilirken kullanılacak sırayı belirler ve bunu
yaparken katmanların seviyesini yatay ya da düşey olarak değil, üçüncü
boyutta tanımlar. Eğer timeline’a bir katman yerleştirene kadar beklerseniz,
z-index’i ayarladığınızda yığılma sırasındaki değişiklik sadece Timelines
panelinde seçili durumda olan anahtar kare için geçerli olacaktır. Bu özellik,
animasyon süresi içinde katmanlarınızın yığılma sırasını değiştirmek
istediğiniz durumlarda faydalı olur.
Bir Katmanın Yolunu Kaydetmek
Animasyonun hareketini tanımlamak için kullanılabilecek diğer bir yöntem de, yolu
kaydetmektir. Bunu gerçekleştirmek için Dreamweaver siz katmanı sayfanın üzerinde
sürüklerken imlecinizin hareketini takip eder. Dreamweaver hareketinizi izler ve
timeline’da anahtar kareleri sizin yerinize kendisi oluşturur. Dreamweaver ayrıca katmanı
sürüklerken harcadığınız zamanı da uygun şekilde eşleştirir. Sürükleme işlemini ne kadar
346 DERS 9
yavaş yaparsanız, o kadar fazla anahtar kare eklenir ve animasyon çubuğu da o kadar
uzun olur. Daha sonra timeline üzerinde anahtar kareler veya zaman üzerinde değişiklik
yapabilirsiniz. Bir katmanın izlediği yol kaydedildiğinde bu katman otomatik olarak
timeline’a eklenir.
Bir yolu kaydetmek için, kare numaraları satırında 1’e tıklayarak Timelines panelindeki ilk
kareyi seçin. Belge penceresinde istediğiniz katmanı seçin ve ardından Modify > Timeline
> Record Path of Layer komutunu seçin.
Siz katmanı sürüklerken, oluşan yol noktalı gri bir çizgiyle gösterilir. Katmanı herhangi
bir yönde sürükleyebilir, oluşturduğunuz yolun üstünden tekrar geçebilir ve katmanı
sürükleme hızınızı değiştirebilir ve bu şekilde yolun kaydedilme şeklini etkileyebilirsiniz.
Sürükleme işlemine son verip farenin düğmesini bıraktığınızda noktalı çizgi animasyon
çizgisine dönüşür. Dreamweaver, katmanın hareketini kontrol etmek için gerekli anahtar
karelerle birlikte katmanı timeline’a ekleyecektir.
Katmanın yolunu kaydetme işlemi sırasında animasyon çubuğunu sürüklerken
harcadığınız zamana bağlı olarak animasyon çok uzun olabilir. Oluşturduğunuz yol
ne kadar uzunsa, animasyon da o kadar uzun olacaktır. Uzun, karmaşık animasyonlar
ve çok sayıda farklı animasyon kanalı içerek sayfaların yüklenmesi daha uzun sürer ve
ziyaretçilerin tarayıcısını çökertme olasılığını artırır.
Siz animasyon çubuğunu kısaltırken animasyondaki bütün anahtar kareler kayar ve
böylece göreceli konumları sabit kalır. Anahtar kareler diğer anahtar karelere göre ve
animasyon çubuğunun başına ve sonuna göre aynı konumda kalır.
Katman Oluşturmak 347
Resim Özelliklerini Değiştirmek
Timeline yardımıyla değişikliğin gerçekleşmesini istediğiniz noktayı seçerek bir resmin
kaynak özelliklerini değiştirebilirsiniz. Bunun için başlık animasyon çubuğuna ilgili
karede bir anahtar kare (keyframe) eklemeniz
Başlangıç resmi olarak bir boşluk resmi kullanmak, resmin görünmesini sağlamak
için faydalanabileceğiniz yöntemlerden biridir. Bu sonucu, ilgili katmanın görünürlük
özelliğini değiştirerek de elde edebilirsiniz.
Görünürlüğü ve Büyüklüğü Değiştirmek
Timeline kullanarak yapabilecekleriniz sadece katmanları taşımaktan ibaret değildir.
Timeline’ları kullanarak bir katmanın görünürlük durumunun zaman içinde değişmesini
de sağlayabilirsiniz. Örneğin belirli bir katmanın sadece başka bir katman ekranda
hareket ettikten sonra görüntülenmesini isteyebilirsiniz. Böyle bir projede ikinci katman
başlangıçta gizli durumda olabilir ve belirli bir kareye gelindiğinde görünür hale gelebilir.
Bir katmanın görünürlük durumu dışında büyüklüğünü de değiştirebilirsiniz. Burada
kullanılan işlem, animasyon esnasında görünürlük durumunu değiştirirken kullandığınız
tekniklerle aynıdır. Bir katmanın büyüklüğünü değiştirmek için, etkilenmesini istediğiniz
katmana ait animasyon çubuğunda değişikliğin gerçekleşeceği anahtar kareyi seçer ve
ardından Properties denetçisinde yer alan W ve H metin alanlarındaki değerleri değiştirir
ya da belge penceresinde boyutlandırma tutamaçlarını kullanırsınız. Tarayıcıların
farklı özelliklere sahip olduğunu ve bunların hepsinin sayfalarınızı düzgün şekilde
görüntülemeyeceğini unutmayın. Sonuçtan emin olmak için sayfalarınızı test edin.
Dreamweaver’da Animasyonu Önizlemek
Animasyonu önizlemek için Timelines panelindeki Geri Sar (Rewind) düğmesine
tıklayın ve Oynat (Play) tuşunu basılı tutun. Katman tekrar belge penceresindeki
orijinal konumuna atlayacak ve oynatım kafası (playhead) Timelines panelindeki ilk
kareye gidecektir. Play düğmesine bir kez tıklarsanız, katmanın her tıklamada bir kare
ilerlediğini ve oynatım kafasının sağa doğru ilerlediğini göreceksiniz. Tıkladıktan sonra
Play düğmesini basılı tuttuğunuzda animasyonun oynamaya devam ettiğini görürsünüz.
Animasyon, siz Play düğmesini basılı tuttuğunuz sürece tekrar tekrar oynamaya devam
edecektir. Animasyon oynatılırken oynatım kafası sayfada o an timeline’ın hangi karesinin
görüntülendiğini gösterir. Ayrıca bir kare sola ya da geriye gitmek için Back düğmesini
kullanabilirsiniz. Animasyonu timeline’da geriye doğru oynatmak için Back düğmesini
basılı tutun.
348 DERS 9
Ne Öğrendiniz?
Bu derste şunları öğrendiniz:
• Belge penceresinde çizerek ya da boyutları önceden ayarlanmış varsayılan katmanları
ekleyerek çeşitli katmanlar oluşturdunuz (Sayfa 309–314).
• Layers panelinde kolayca takip edebilmek için katmanları adlandırdınız (Sayfa 315–316).
• Önce bir ve daha sonra birden fazla katmanı seçtiniz, bunların boyutlarını ve
konumlarını değiştirdiniz ve birbirlerine göre hizaladınız (Sayfa 315–316).
• İçeriğinizin sayfanızdaki yerleşimini ve görüntüsünü kontrol etmek amacıyla
katmanlardan faydalandınız (Sayfa 316–321).
• Yukarıdan aşağıya doğru hangi sırayla görüntüleneceklerini belirlemek için
katmanların yığılma sırasını değiştirdiniz (Sayfa 322–324).
• Katmanların gruplar halinde nasıl çalıştığını ve yanlışlıkla nasıl iç içe geçebileceğini
anlamak için katmanları iç içe yerleştirdiniz ve iç içe geçen katmanları eski
konumlarına getirdiniz (Sayfa 324–327).
• Katmanları sayfada taşırken kolaylık sağlamaları için cetvelleri ve ızgaraları uygun
şekilde ayarladınız (Sayfa 328–330).
• Ziyaretçilerin sayfalarınızla etkileşime girebilmesi için katmanları davranışlarla
birlikte kullandınız (Sayfa 331–334).
• Katmanları bütünüyle gizlemek ve görüntülemek için katmanların görünürlük
özelliğini değiştirdiniz (Sayfa 334–336).
• Katmanları bir tabloya dönüştürerek katmanlarla hazırlanan sayfaları eski tarayıcılarla
uyumlu hale getirdiniz (Sayfa 336–340).
• Katmanlarla ilgili görüntüleme sorunlarına yol açan bir Netscape hatasını düzeltmek
için belirli bir JavaScript kodunun nasıl eklendiğini ve sonra da bunun nasıl
silindiğini öğrendiniz (Sayfa 340–341).
• Timeline özelliğini öğrendiniz (Sayfa 341–348).
Katman Oluşturmak 349