Dreamweaver CSS Kullanarak Sayfa Ara Yüz Tasarımı

Mc_ÖRGE

Kaptan
Özel üye
Dreamweaver CSS Kullanarak Sayfa Ara Yüz Tasarımı 1

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2.0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile.

Modern tasarım süreçlerinin bazı yaptırımları vardır. Aslında bunlara "yaptırım" demek ne kadar doğru bilemiyorum ama geçerli bir sayfa yapmak için bunlara dikkat etmemiz gerekiyor. Makaleyi okuyan birçok arkadaş için sıkıcı bir konu olsa da bu hususları işin başından ele alarak ileride yaşanacak muhtemel hataları elimine edebilirsiniz.

Bunlardan bazıları şu şekilde sıralanabilir.

Sayfalar doğru doküman türü tanımlamasına (DOCTYPE) sahip olmalılar

Sayfa tasarım bileşenleri tablo hücreleri yerine DIV'ler içerisine yerleştirilerek konumlandırma ve hizalamalar tamamıyla CSS ile ve "CSS kutu modeli" (CSS Box Model) göz önüne alınarak yapılmalı.

Kullanılan HTML (veya XHTML) ve CSS kodları geçerli ve W3C standartlarına uygun olmalı ve geçerleme motorlarından (validator) hatasız olarak geçebilmeli.

Doğru DOCTYPE
İlk madde olan doğru "DOCTYPE" bilgisinin seçilmesi konusuna ilgili makalede oldukça ayrıntılı bir biçimde deyinmiştik. Genel bir özet olarak şunları belirtmekte fayda var; eğer spesifik olarak XHTML'e ihtiyaç duymuyorsanız (sayfanız XML verisi içermiyorsa) ve standart olarak bir HTML sayfası tasarlıyorsanız, başka bir deyimle amacınız sayfanızı anlaşılabilir bir biçimde kullanıcılara sunmak ise kullanmanız gereken doküman türü "HTML 4.01 Strict" tanımlamasıdır.

Doğru "DOCTYPE" tanımlaması sayfa tasarımlarımızda tarayıcılar arası kayma ve farklı görünüm sorunlarının aşılması açısından en önemli aşamalardan biridir. Eğer doküman türü doğru tanımlanmaz ise safta tarayıcı tarafından hatalı olarak, "Garip Mod" (Quirks Mod) adı verilen bir durumda yorumlanacak bu durum da sayfamızın hatalı görünmesine sebep olacaktır.

CSS Kutu modeli (BOX model)
CSS2 ile sıkça konuşulur olan bu CSS kutu modeli, sayfadaki tüm içerik alanlarını birer kutu gibi değerlendirir ve boyutlandırma ve konumlandırma işlemini özel bir algoritma ile algılar. Burada sözü geçen "kutular" içeriğimizi yerleştirdiğimiz HTML bileşenlerini ifade etmektedir. (Örneğin DIV, tablo, başlık ve/veya paragraflar) Eğer bir dokümanın "DOCTYPE" bilgisi doğru bir biçimde tanımlanmış ise modern tarayıcılar "Standart Mod" ile çalışıp bu içerik alanı bileşenlerinin boyutlarını hesaplarken şöyle bir yol izler;

Bir objenin (kutunun) tüm genişliği; içerik (content area) + çerçeve kalınlığı (border) + kenar boşluları (padding) değerlerinin toplamına eşittir. Yani CSS'de "width: 300px" olarak belirtilen bir DIV etiketinin genişliği sadece içerik alanının (content area) belirtir. Eğer bu DIV etiketinin çerçeve kalınlığı 1 piksel ve içeriğin DIV sınırlarına olan uzaklık bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladığı alan:

sol çerçeve+sol boşluk+içerik+sağ boşluk+sağ çerçeve

1+10+300+10+1=322 pikseldir.


y6PaS.jpg



CSS kutu modeli şematik görnümü

Modern tarayıcılar Standart mod ile çalışırken bunu algılayıp yaptığınız biçimlendirmeleri buna göre yorumlarlarken, diğer taraftan Garip mod ile çalışırken eski tarayıcılar gibi yorumlarlar. Eski tarayıcılarda ise bu 300 piksellik genişlik DIV etiketinin toplam genişliğini bildirir ve içeriğin genişliği, kenar boşluları ve çerçeve genişliği bu değerden çıktıktan sonra kalan değere (300-22=278 piksel) eşittir.

Geçerli kodlar
Bu konu, sayfalarımızın tarayıcılar tarafından daha kolay ve doğru yorumlanması ve yaptığımız hataları daha kolay algılayıp müdahale etmemizi sağlaması açısından oldukça önemli bir yere sahiptir. Web tasarımı ile ilgilenmeye başlayan birçok kullanıcı yaşadığı basit sorunların neden kaynaklandığını, sayfalarını geçerli hale getirmeye çalışırken görebilirler.

Örneğin bir etiketi (HTML tag) kullanılmaması gereken bir yerde kullanıldığında bu standartlara uygun olmayan bir sayfadır ve muhtemelen tarayıcı tarafından hatalı yorumlanmaya sebep olan bir durumdur. Acemi kullanıcı bu geçerlilik kuralını sayfasına uyguladığında yaşadığı sorunu da halletmiş olacaktır. Bu geçerlilik kuralları web geliştiricilerin işlerini kolaylaştırmak ve standart bir kod yapısı ile uyumluluğu arttırmak amacı ile konmuşlardır. Neden sayfalarımızı geçerlememiz gerektiği ve bunun için yapabileceklerimiz hakkında daha detaylı bilgiyi Roger Johansson'ın "Web Standartlarını Kullanarak Geliştirmek" başlıklı nefis makalesinden alabilirsiniz.

Sayfalarımızın standartlara uygun olup olmadığını W3C (web komisyonu) geçerleme motorundan kontrol ettirebilir hatalarımızı daha yakından görebiliriz.

Evet, biraz uzun bir giriş oldu fakat yeni bir sayfa yapmaya başlamadan önce bunları göz önünde bulundurmamız gerekmektedir. Şimdi uygulamaya geçebiliriz.

Dreamweaver ile Sayfa Ara Yüz (Layout) Tasarımı
Sayfamızın tasarımını yaparken tablolar yerine CSS ve DIV kullanacağımızı belirtmiştik. Birçok yeni başlayan kullanıcının yaşadığı en büyük handikaplardan biri olan tasarımda istenilen objenin istenilen yere yerleştirilememesi ve hizalanamaması sorununu aşmak için CSS kullanacağız. Tabi bunun için en azından temel CSS bilgisine ihtiyacımız var. Bu makalede CSS bilgisine girip konuyu fazla dağıtmak istemiyorum. Genel olarak temel noktalara deyineceğim. Fakat burada bahsi geçen uygulamaları anlayabilmeniz için ilgili CSS kaynaklarından kendinizi geliştirmenizi şiddetle tavsiye edeceğim. Aksi takdirde söz ettiğimiz şeyler havada kalacaktır.

İçinizde CSS Zen Garden'ı (ZG) görenleriniz olmuştur. ZG birçok web geliştiricin ilham kaynağı olmuş ve CSS'in sadece metinleri biçimlendirip rollover text-linkler yapmaktan öte tek başına bir web sayfasını baştan aşağı CSS ile biçimlendirilebileceğini bizlere göstermiştir. İncelediğinizde fark edeceğiniz üzere ZG'daki bütün tasarımların HTML kaynak kodları aynı olup değişen tek şey sayfaya bağlı olan ".css" dosyasıdır. Söz gelimi "bu" sayfa ile "şu" sayfanın kanyak kodlarına bakarsanız birebir aynı olduklarını görebilirsiniz. Oldukça etkileyici değil mi?

Bizde sayfamızı tasarlarken CSS'in bu güçlü özelliklerinden faydalanacağız. Bu makalede hazırlayacağımız örnek tasarım 2 veya 3 sütunlu standart blog ve portallerde görebileceğiniz sayfa düzenidir. Fatih Harioğlu'nun sayfasındaki bahsi geçen makaleyi temel alarak anlatıma devam edeceğim. Tasarımın aşağıda görüldüğü üzere sabit genişlikte bir dış çerçeve (#sayfa), başlık bölümü (#ustAlan), sol sütun (#anaMenu), içerik sütunu (#icerik) ve alt kısımdan (#altAlan) oluşmaktadır.


ALMtu.jpg


2 Sütunlu ve sabit genişlikli genel sayfa tasarımının şematik görünümü

Sayfanın bitmiş halini görmek için buraya indirmek için ise buraya tıklayınız.

Şimdi DW'da File / New menüsü ile yeni bir HTML dokümanı açın. Yeni dokümanı açarken "Document Type (DTD)" olarak "HTML 4.01 Strict" seçili olduğuna dikkat edin. Dokümanı oluşturup uygun bir konuma kaydedin.

x1bL3.jpg



Yeni bir HTML dokümanı oluşturuyoruz
Şimdi sayfaya, tüm tasarımı kapsayıp ve toparlayan çerçeve olan "sayfa" isimli bir DIV ekliyoruz. Bunun için "Insert" paneldeki "Layout" sekmesi altında yer alan "Insert Div Tag" düğmesini ya da Insert / Layout Objects / Div Tag menüsünü kullanabilirsiniz.

BatMF.jpg



Sayfaya bir DIV ekliyoruz
Açılan iletişim penceresinden "ID" kısmına "sayfa" yazıyoruz. "Class" bilgisini şimdilik boş bırakıyoruz. Birazdan tüm DIV'ler için stil tanımlamalarını toplu olarak yapacağız.

r4Tk5.jpg




DIV ekleme iletişim penceresi
Şimdi eklediğimiz "sayfa" isimli DIV etiketinin içine sırayla "ustAlan", "anaMenu", "icerik" ve "altAlan" isimli 4 tane daha DIV ekliyoruz. Sayfanın DW içersindeki son hali şuna benzemelidir;


Sayfanın son halinin DW içerisindeki görünümü
"sayfa" DIV'inin içerisine diğer DIV'leri eklerken kolaylık olması açısından "sayfa" içerisinde "Content for id "sayfa" Goes Here" yazısını seçip bir defa ENTER (Return) tuşuna basarak yeni bir paragraf oluşturabilirsiniz. Bütün DIV'leri ekledikten sonra sondaki veya aralardaki fazla paragrafları silmeyi unutmayın.

Gördüğünüz gibi sayfa ana iskeleti bu şekilde olacak. Hangi DIV'in nasıl boyutlandırılıp hizalanacağını ise CSS ile belirteceğiz.

dbY8V.jpg

 
Top