Katman Oluşturmak - BITEFO FETHIYE 2007
Transkript
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