Web Mekan | Webdeki Yeni Uğrak Mekanınız

Alışalı gelmiş statik tablo ve paragraf mantığının aksine katmanlar hareket edebilene hoplayıp zıplayabilen yapıları ile bizlere üstün hareket olanağı sağlamaktadırlar. Öte yandan kullanım zorluğu nedeniyle pek de pratik bir çözüm gibi görülmezler. Daha önce de belirttiğimiz gibi daha çok DHTML uygulamalarında ileri çıkan bir bileşendir.

Yeni başlayan arkadaşların sayfadaki objeleri istedikleri sayfada istedikleri yere taşıma kolaylığı nedeniyle sıklıkla katmanlara başvurmaları sayfada çözünürlük farklarından doğan görüntü kaymaları ve bozulmalarına sebep olmaktadır. CSS stiller bölümünde anlatılan ve yeni bir stil yaratırken CSS özellikleri penceresinden Positioning sekmesi altında yer alan "Type" kısmı "Absolute" olan katmanlar ile yapılan tasarımlar hiçbir zaman sağlıklı sonuçlar vermezler.

Sayfa tasarımlarında katman sıkça kullanılan bir teknik olmakla beraber DIV olarak tabir edilen katman türleri kullanılmaktadır. Konu ile ilgili makaleler ilerleyen günlerde sitemizde yayınlanacaktır.

Sayfaya yeni bir katman eklemek

DW ile sayfalarımıza nasıl yeni bir katman ekleyeceğimizi öğreneceğiz. Öncelikle yeni bir doküman açın ve kaydedin

Daha sonra Insert paneldeki Layout sekmesi altında yer alan Draw Layer seçeneği ile istediğiniz boyutta bir katman çizebilir ya da Insert / Layer seçeneği ile sayfanıza Absolute olarak pozisyonlandırılmış bir katman ekleyip biçimlendirebilirsiniz.

Draw Layer seçeneğine tıkladığınız anda fare imleci + işaretine dönüşecektir ve size serbest bir dikdörtgen çizme olanağı sağlayacaktır.

Ayrıca Insert Panelde Common ve Layout sekmelerinde yer alan "Insert Dıv Tag" düğmesi ile doğrudan DIV ekleyebilirsiniz. Bu DIV'ler Draw layer seçeneğinin aksine durağan içerik elemanları olup sayfa ara yüz tasarımının temelini oluşturmaktadırlar.

DW, DIV için bir iletişim penceresini ekrana getirip bizden ilgili ayarları yapmamızı isteyecektir.

Burada geçen Insert seçenekleri DIV tagının sayfaya nasıl ekleneceğini belirtiyor. "Wrap around selection" seçeneği seçili olan içeriğin etrafını saran bir DIV ekleyecektir. Aynı şekilde listedeki diğer seçenekleri de deneyerek amacınıza uygun olan ekleme türünü seçebilirsiniz.

Katmanlar ile ilgili düzenleme ve biçimlendirmelerin çoğunu Property Inspector üzerinden yapıyoruz. (bu sadece katmanlar için değil resim, tablo, resim ve ya flash objeleri gibi birçok bileşen içinde geçerli).

Bir katmanı seçmek için o katmanın kenarlarından birine tıklamanız yeterli olacaktır. Katmanı seçtiğiniz anda katmanın kenarlarında ve köşelerinde boyutlandırma için tutamaçlar görünecektir. Bunları kullanarak katmanınızı tekrardan boyutlandırabiliriz.

Bir katman seçtiğinizde Properties paneli aşağıdaki hali alacaktır. Bileşenleri şu şekilde sıralanabilir;

• LayerID: Sadece bu katmana özgü özel bir isim.

• T: Katmanın üst kenara olan uzaklığı.

• L: Katmanın sol kenara olan uzaklığı.

• H: Katmanın yüksekliği.

• W: Katmanın genişliği.

• Z-index: Katmanların tarayıcıda görünme önceliği diyebiliriz. Z-index'i büyük olan katman üstte küçük olan katman altta görüntülenir.

• Vis: Katmanın görünürlük türü. Eğer katmanın gizli olmasını istiyorsanız bunu hidden olarak ayarlamalısınız.

• Bg image: Katmanın arka fon resmi atamamıza yarar.

• Bg color: Katmanın arka fon rengi atamamıza yarar.

• Overflow: Çok işinize yarayacağına inandığım bir. Bu seçenek katmanımızın içerisindeki içeriğin nasıl görüntüleneceğini belirtiyor. Örneğin 100 piksel yüksekliğinde bir katmanımız var ve içerisinde oldukça uzun bir metnimiz var. Metnin nasıl görüntülenmesini istiyorsanız buraya "Visible, hidden, scroll veya Auto" seçeneklerinde size uygun olanı seçerek belirleyebilirsiniz. Auto seçeneği wordwrap özelliği ile katmanı adeta bir iFramemişcesine biçimlendirerek harika bir özellik sunuyor. Mutlaka deneyin.

• Clip: Katmanın içerisindeki içeriğin görüntülenebilir alanını alt, üst, sağ ve sol kenarlara olan uzaklıklarını piksel cinsinden belirtmenizi saplar. (13 14 15)

Katma-CSS ilişkisi

CSS HTML'in ve dolayısı ile DHTML'in vazgeçilmez bir bileşeni olarak katmanlar ile birlikte çok karşımıza çıkmakta. Bu iki bileşeni birleştirerek oldukça kullanışlı tasarımlar ve ara yüzler yapabiliriz.

Öte yandan İlerideki konularda görebileceğiniz Hareketli katmanlar (Drag Layer Behavior'ı) ve Timeline efektlerinde katman CSS kombinasyonlarını çokça kullanacağız

Öncelikle ihtiyaca yönelik bir CSS hazırlamış olmalıyız. Katmanlar ile kullanacağımız stiller Border ve Background özellikleri de içerebilir ki bizim burada vurgulamak istediğimiz nokta da bu. Nasıl yeni bir stil tanımlayacağınızı önceki konularda anlatmıştık burada sizler için bir fikir vermesi açısından ufak bir uygulama örneği vereceğim.

Örneğin "icerikkatmani" ID'sine sahip katmanımıza özel bir stil tanımlayacağız. Bunun için "Advanced" stil tanımlaması yapmanız ve selector olarak #icerikkatmani girmeniz yeterli olacaktır.

Stil tanımlamasını yaptıktan sonra DIV'i seçtikten sonra Properties panelinden Class ayarlarını değiştirebilirsiniz.

Sonuç aşağıda görünüyor. Sizde yaratıcılığınız sınırları dâhilinde kullanışlı ve estetik içerik ara yüzleri oluşturabilirsiniz.

Show-Hide Layer

Bazı durumlarda dokümandaki katmanların belli durumlarda görünüp belli durumlarda gizlenmesi isteriz. Bu biraz DHTML teknikleri gerektiren bir husus.

Fakat DW içerisinde bu konu oldukça pratik bir hâl almış durumdadır. Sadece bir iki fare tıklaması ile onlarca JavaScript kodu derlemeye gerek kalmaksızın bu soruna çözüm getirebiliriz.

Show-hide layer kullanmak için;

Yeni bir doküman açın ve sayfanıza farklı boyut ve özelliklerde katmanlar ekleyin (Draw layer ile) ve bunların arka fon renklerini değiştirin. (Arka fon renklerini değiştirmemizin sebebi katmanların Show (Görünür) ve Hide (Gizli) durumlarını daha rahat bir şekilde görebilmek içindir)

Daha sonra sayfaya bir link ekleyin. Link olarak # kullanın. Zira linkin ne olduğu çok da önemli değil. Boş linkler kullanıyoruz çünkü JavaScript çağrılmasını sağlayacağız.

Daha sonra bu linki seçip Behaviors Panel'den Show Hide Layers seçeneği ile ilgili pencereye ulaşabilirsiniz.

Named Layers kısmından üzerinde değişiklik olmasını istediğiniz katmanları seçip eğer görünmesini istiyorsanız Show, gizlenmesini istiyorsanız Hide, durumdan bir değişiklik olmasını istemiyorsanız Default düğmelerinden herhangi birine tıklayıp bu katmanın özelliklerini belirleyebilirsiniz.

İlgili ayarları yaptıktan sonra OK dediğinizde bu linke ait behavior sayfaya eklenecektir. Linki seçip Behaviors paneline baktığınızda Events listesinde onClick bölümünde Show-Hide Layer adında bir olay eklendiğini görebilirsiniz. Bu tıklandığında bu olayın gerçekleşeceği anlamına gelir.

Tag selector ile BODY tagını seçmeliyiz

Behaviors panelden Drag layer seçeneğini seçmeliyiz

Drag layer iletişim penceresi