Dreamweaver'da Css ve Tablo kullanarak tasarımızı yerleştirmek - 2

Bir süredir birşeyler yazamadım.  Ancak tekrardan başlayabiliriz. Nerede kalmıştık.

Tabloları kullanarak yaptığımız tasarımı yerleştiriyoruz ancak bu işlemi yaparken css kurallarından yardım alıcağız bunun sebebi bir sonraki yazımda divlerden basedeceğim tabloların biçimlerini css ile belirtmek divleri oluştutuken bize yardımcı olacak.

Tasarımızı photoshop ile yaptık, daha sonra tasarımımızı minik minik kesip, yerleştirmek için sayfamızın iskeletini oluşturmak için tablomuzu  yerleştirdik. Bundan sonra yapmamız gereken tablomuzun hücrelerinin boyutlarını ve arkaplan renklerini veya arkaplan resimlerini yerleştireceğiz. Tüm bu biçimlendirme bilgilerini css ile söyleyeceğiz.

Peki hangi tür css kullanmamız gerekmekte bir düşünelim sayfamın tepesini yani header bölümünü biçimlendireceğiz. Bu bölüm için tablomuzun ilk hücresini oluşturduk ancak şuanda hiç bir şekilde bir sayfa başlığı gibi gözükmüyor ancak bunu belitmek için css kurallarını kullanacağız. Css türlerimiz nelerdi.

1. Class
2. Tag
3. Advanced

Kullanmamız gereken tür class şimdi neden diğer türleri kullanmadığımıza bir bakaım.

Eğer tag türünü kullanırsam içeriği yerleştirmek için kullanacağım bölümde  hücre, en alt bölümde  hücre sayfamdaki tüm hücreler yani td'ler etkilensin dediğimde olucak olan header, menu alanı, içerik alanı ve footer tamemen aynı biçimde olur.

Advanced türünü kullanmam içinse o bölgeye önceden uyguladığım bir class yada id 'li css'e ihtiyacım var oysaki bu css kuralları sayfaya uygulayacağım ilk css kuralları olacak.

Yani yapmam gereken şey css panelinin altındaki New Css Rule düğmesine tıklamak. Karşıma çıkan pencereden class seçeneğini seçmek. Şimdi penceremize yakından bakalım.

Yeni Css oluşturma Penceresi

Css'imizi isimlendireceğimiz alandan css kuralımıza .header ismini verelim. Başına koyduğumuz nokta html kodlarının bu css türünü sınıflandırırken class olduğunu anlamasına yarıyor. Define in bölümünden css kuralımızın yeni bir css dosyasına yazılmasını istiyoruz. Css kuralımızın türünü seçip, isimlendirdikten sonra ok tuşuna basıyoruz ve karşımıza yeni bir pencere daha geliyor.

Bu neee?




Css dosyasını isimlendirme

 Bir önceki pencerede css kuralımzın yeni bir css dosyasına yazılmasını istediğimizi belirtmiştik peki dosya nerede daha ortada bir css dosyası yok oluşturmak için tek yapmamız gereken bir isim verip nereye kaydetmek istediğimizi belirtmek. Bunun için Dosya adı kısmına canımızın istediği herhangi bir ismi verebiliriz. Ancak isimlendirme yaparken her zaman olduğu gibi unutmamamız gereken şey türkçe karakter, boşluk , özel karakter kullanamayacağımız, kullanabileceğimiz tek özel karakter _ (Alt çizgi)dir. Dosyayı nereye kaydetmek istiyoruz tabiyki dreamweaver'a gösterdiğimiz klasörün içine burada cssler için oluşturduğumuz bir alt klasörümüz vardı css dosyamızı bu klasörü seçip aç dedikten sonra kaydediyoruz.

Sonunda css penceresi ile karşılaştık şimdi buradan hücrelerimizin boyutlarını daha sonra arka plan olarak kullanmak istesdiğimiz görseli seçmemiz gerekmekte.

Hücremizin boyutlarını değiştirmek için css panelindeki category kısmından box'a tıklayıp.

Css paneli Box Category

Width kısmından genişliğimizi
Height kısmından yüksekliğimizi giriyoruz.

Peki bu değerleri nereden bulucazda gireceğiz. Örnek tasarımızda sayfamızın üst kısmı olarak sliceladığımız parçanın yüksekliği bize height yani yükseklik değerini genişliği ise bize width yani genişlik değerini verecektir. Bu değerleri girdikten box kategorisinden background kategorisine geçebiliriz. Box bölündeki diğer ayarlarımıza ilerleyen zamanlarda bakacağız.

Background kategorisinde;

Css Background özellikleri 

Css arka plana koymak istediğimiz resmi seçip ok deriz. Tüm hücrelerimiz için css kurallarını oluşturur. Sayfamızın ana şeklini oluştururuz.