Konular

Show-hide Elements

Show hide elements ile dreamweaver içerisinde kompleks uygulamalar yapmak oldukça kolay, şimdi bunu nasıl yapacağımızı göreceğiz;
Show-Hide ElementsÖ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.

resim

Önce başlıkları alt alta yazıyoruz ve bunları sırası liste (Unordered list) haline getirip her satıra ayrı ayrı link veriyoruz.

res

Link olarak hepsine # veriyoruz.

r

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

r

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.

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.

r

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.

Kaynak www.dw.gen.tr/samples/show-hide-ornek/beniOku.html

Yorumunuzu Ekleyin
Show-hide Elements Yorumları +2 Yorum
  • ibrahim
    1
    ibrahim
    bunu yapabiliyorum ama tarayıcıda açınca resimler kayıyor
    05 Kasım 2010 12:29:35, Cuma
  • cskn
    1
    cskn
    Saolasın usta
    30 Aralık 2012 13:14:58, Pazar

Veri giriş formu yapmak

Bu işlem için DW'da iki seçeneğimiz var; bunlardan ilki formlarımızı kendimiz tasarlayıp daha sonra bu formun hangi veritabanı tablosuna hangi bilgiyi gireceğini belirtmek. İkinci seçenek ise DW'ın içerisindeki bir sihirbaz aracı ile bu form yaratma işlemini de DW'ın üzerine yıkmak. Ben ilk yöntemi yani el ile kayıt girme formları nasıl yapılıyor onun üzerinde duracağım. Diğerinin bundan çok da bir farkı yok zaten. Evet başlıyoruz;

44,144 Okunma Henüz yorum yapılmamış 31/08/2007 03:20:54

Dreamweaver ile Üyelik Sistemi - Şifre Hatırlatma Sayfası

Bu makale dizisi ile Dreamweaver kullanarak sitemiz için bir üyelik sistemini nasıl yapacağımızı inceleyeceğiz. Son olarak şifrelerini unutan üyelerimize nasıl bir hatırlatma mesajı yollatacağımızı inceleyeceğiz

38,112 Okunma Henüz yorum yapılmamış 31/08/2007 14:11:37

Dreamweaver ile Üyelik Sistemi - Üye Kaydı

Bu makale dizisi ile Dreamweaver kullanarak sitemiz için bir üyelik sistemini nasıl yapacağımızı inceleyeceğiz. İlk olarak üye kaydı sayfasını yaparak işe başlıyoruz

30,695 Okunma Henüz yorum yapılmamış 31/08/2007 13:48:25

Dreamweaver ile Üyelik Sistemi - Üyelere Özel Sayfa ve İfadeler

Bu makale dizisi ile Dreamweaver kullanarak sitemiz için bir üyelik sistemini nasıl yapacağımızı inceleyeceğiz. Üyelere özel sayfaları veya sadece üyelerin görebileceği bir objeyi nasıl giriş yapmamış kullanıcılardan gizleyeceğimizi bu makalede inceleyeceğiz

29,628 Okunma 6 Yorum 31/08/2007 13:57:39

Fotoğraf Albümü Oluşturalım

Dreamweaver içinde fotoğraflarımızı web sayfası şeklinde yayınlamaya yarar bir menü barındırır

26,699 Okunma 1 Yorum 06/08/2007 14:33:13

Dreamweaver ile Üyelik Sistemi - Üye bilgileri güncelleme sayfası

Bu makale dizisi ile Dreamweaver kullanarak sitemiz için bir üyelik sistemini nasıl yapacağımızı inceleyeceğiz. Üyelerimizin üye olurken verdiği bazı bilgileri değiştirebileceği ve profillerini güncelleyebilecekleri sayfaları nasıl yapacağımızı bu makalede göreceğiz

23,244 Okunma 3 Yorum 31/08/2007 14:08:21

Map Özelliği

Map özelliği çağrı kasapoğlu

22,240 Okunma Henüz yorum yapılmamış 13/03/2008 14:20:52

Hotspot Eklemek

17,779 Okunma Henüz yorum yapılmamış 27/07/2007 15:01:18

Map Ve İç Pencere Açmak

Dreamweaver behaviors kullanarak bir resim üzerindeki map ile belirlediğiniz alanlara fare gelince o alanla ilgili daha büyültülmüş bir resmi ekrana çıkaran uygulama. Daha büyük resim yeni web sayfası açılmadan gözükmektedir.

17,406 Okunma Henüz yorum yapılmamış 01/05/2008 09:59:41

Image Map

Image map

15,672 Okunma Henüz yorum yapılmamış 13/03/2008 14:20:41

Yükleniyor...