Örnek uygulama için tıklayınız
Öncelikle yeni bir doküman oluşturup Belgelerim ve Masaüstü dışında basit bir konuma (C.www dizini gibi). Ardından içerisine uygun içerikleri yerleştiriyoruz. Bu örnekte haber sitelerinde olduğu gibi başlıkların üzerine gidildiğinde yan kısımda açıklamalarının görüneceği bir örnek yapacağız.
Önce başlıkları alt alta yazıyoruz ve bunları sırası liste (Unordered list) haline getirip her satıra ayrı ayrı link veriyoruz.
Link olarak hepsine # veriyoruz.
şimdi sayfaya bir katman ekliyoruz. Eğer DW CS3 kullanıyorsanız bunu Insert panel altında yer alan Layout sekmesindeki Draw AP Div seçeneği ile yapıyorsunuz. Yok eğer DW8 veya daha eski bir sürüm kullanıyorsanız Draw Layer seçeneğini kullanabilirsiniz.
CS3 de bu katmanlar (layer) "Absolute Positioned Elements" (mutlak hizalanmış elementler) yani APE olarak isimlendirilmekteler. Burada geçen mutlak hizalanmış deyimi CSS Positioning için Type tanımlaması "Absolute" olan elementleri ifade etmektedir. Bu tür mutlak hizalı elementler sayfa üzerinde herahngi bir konumda ve diğer elementlerin üzerinde serbestçe konumlandırılabilirler. Bu tür elementlerin hizalama işlemi yalnızca saol ve üst kenarlara olan mesafeleri ve yükseklik-genişlik bilgileri çerçevesinde yapılır.
Neyse konumuza dönelim. Safaya uygun yere bir katman çiziyoruz ve bu katmanın içine fare imleci ile ilk başlığın üzerine gidildiğinde görünecek resim ve metinleri yerleştiriyoruz. Bu işlemi her haber başlığı için yapacağımız hatlırlatmak istiyorum bu yüzden seçtiğiniz konuma dikkat etmelisiniz.
Eğer Dreamweaver'ın ayarlarını değiştirmediyseniz DW her çizdiğiniz katman için yeni bir stil yaratacak ve bunu dokümanın HEAD etiketleri arasındaki STYLE kodunun içine yerleştirecektir. Bu sitlde katmanın konumu ve boyut bilgileri yer almaktadır.
katman isimlerini kendiniz için anlamlı bir ifade ile değiştirin (haber1, haber2, haber3... gibi) Bu isimleri değiştirdiğinizde ilgili CSS kuralının ismininde değiştiğine dikkat ediniz. Aksi taktirde işler sarpa saracaktır. Gerekirse CSS stil adını kendiniz kodlara müdahale ederek değiştiriniz.
Şimdi bu katmanın Properties panelinden Visibility değerini Hidden olarak ayarlıyoruz. Böylece sayfa yüklendiğinde gizli olarak yüklenecekler.
Böylece her başlık için bir katman ekleyip bu katmanların içerisine uygun içeriği yerleştiriyor ve en sonunda katmanları gizliyoruz. Gizlediğiniz katmanları daha rahat yönetmek için AP Elements panelini (DW8 ve önceki sürümlerde Layers paneli) kullanabilirsiniz.
Şimdi # olarak link verdiğimiz bir haber başlığının üzerine tıklıyoruz (yani linki seçiyoruz) ve Behaviors panelden Show-Hide Elements (DW8 ve öncesi için Show-Hide Layers) seçeneğine tıklıyoruz.
Bu kısım oldukça önemli şimdi karşımıza Show hide Elements iletişim penceresi ile sayfaya daha önce eklediğiniz katmanların bir listesi geliyor. Buradan hangi haber başlığının üzerine gelince hangi katmanın görünmesini istiyorsak onu Show diğerlerini Hide ile işaretliyoruz.
OK dediğinizde Behaviors panelde onClick olayı için Show-Hide Element işleminin gerçekleştiğini göreceksiniz. Yani fare ile linke tıklandığında biraz önce yaptığımız yapılandırma doğrusunda katmanlar görünüp gizlenecek ... Fakat bizim istediğimiz tam olarak bu değil Biz bu gizlenip gösterme işleminin fare imleci linkin üzerine gidince olmasını istiyoruz bu nedenle bu onClick yazan açılır menüden onMouseOver u seçiyoruz.
Sayfayı kaydedip tarayıcıda görüntülediğinizde linkin üzerine gidince katman görünecektir. Evet buraya kadar sorun yok fakat fare linkin üzerinden çekilince katman görünür olarak kalmakta. İşte bu sorunu ortadan kaldırmak için de biraz öne Show-Hide Elements işlemini yaptığımız linki tekrar seçip yine Behaviors panelden Show-Hide Elements seçeneğini seçiyor bu sefer fare linkin üzerinden çekilince bütün katmanların gizlenmesi için hepsini hide ile işaretliyoruz. (isterseniz herhangi birini görünür kılabilirsiniz)
Oda nesi Behaviors panelde yine onClick için bu işlemi yaptı fakat biz fare imleci linkin üzerinden gidince bu işlemin olmasını istiyoruz bu yüzden listeden onMouseOut seçeneğini seçiyoruz ve dokümanı kaydedip tarayıcıda deniyoruz ve herşey olması gerektiği gibi.
Bu işlemi her link ve her haber katmanı için tek tek yaparak istediğimiz etkiyi elde edebiliriz. Katmanların CSS tanımlamaları ile oynayarak tüm katmanların aynı hizada olmasını sağlayabilir mutlak hizalama (absolute positioning) yerine normal bir hizalama seçebilirsiniz. Yapmanız gereken tek şey CSS Styles panelindeki ilgili katman ile ilişkili stili düzenlemek.
