Ö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.
ş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.
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
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.
