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

Advanced türündeki csslerleri nerelerde kullanmamız gerektiğinden bir önceki yazımda bahsetmiştim. Peki Dreamweaver'da advanced türündeki cssleri nasıl oluşturacağız ve uygulayacağız. Bu işlem oldukça basit şimdi örnek tasarımızı slicelıyıp daha sonrada css ve tablolardan yararlanarak yerleştirelim. Bu işlemi yaparken şuana kadar ki tüm yazılarımda bahsetiğim konuları şöyle bir tekrar etmiş olacağız.

Önce slicelamaktan bahsedelim. Örnek tasarımızı indirmek için tıklayınız. 


Sclicelama yaparken dikkat etmemiz gereken en önemli şey dreamweaver'da oluşturamayacağımız görselleri kesmek kenarları yuvarlak tablolar yapamayacağımız için üst bölümün ve alt bölümün tamamını almamız gerekmekte

Örnek Tasarım Üst ve Alt Bölümü

Ayrıca dreamweaver'da degradede oluşturamayacağımızı unutmamamız gerekmekte ancak css kullanarak ince bir parça olarak kestiğimiz bir degradeyi yan yana aralıksız dizmesini söyleyebiliriz bu nedenle degradeli alanlardan sadece ince bir parça almamız yeterli bu sayede sayfamız çok daha hızlı yüklenecektir.

Örnek Tasarım Degradeli Alan

Bunun yanı sıra logomuzu ve sayfamızda bulunan resimlerin hiç birini dreamweaver'da oluşturamayacağımız için tüm resimleri zaten bir tane var :) ve logomuzu mutkala kesmemiz gerekmekte.

Örnek Tasarımın Slicelanmış Hali

Dosyanın slicelanmış hali ve sliceları indirmek için tıklayınız.

Imagelarımızı ve diğer dosyalarımızı için her biri için uygun klasörler hazırlayıp bunları bir ana klasör altında toplamamız gerekmektedir. Görsellerimiz için images klasörü, stil sayfalarımız için css klasörü, javascript dosyalarımız için js klasörü, ileride kullananmamız gerekebilecek pdf lerimiz veya word dosyalarımız için bir documents klasörüne ihtiyacımız olacaktır. Tüm bu dosyalarımızı ana klasör altında toplayıp bu dosyayıda dreamweaver'a tanıtmamız gerekmektedir. Dreamweaver'a sitemizi tanıtmak ile ilgili yazıma ulaşmak için tıklayınız. 

Dosyalarımızı Dreamweaver'a tanıtıktan sonra artık işlemlerimize dreamweaver üzerinden devam edebiliriz.

Files > New komutunu kullanarak yeni bir HTML sayfası açalım.
Bunun için Blank -----> HTML -------->None Seçeneklerini seçip Create tuşuna basarız.
Sayfamızı açtıktan sonra yapmamız gereken ilk işlem  sayfamızın title'ını değiştirip kaydetmek olacaktır.

Sayfamızın başlığı

Sayfamızı kaydederken unutmamamız gereken en önemli unsur eğer bu ilk açılmasını istediğimiz sayfa ise bu sayfaya index.html adını vermek. Dosyamızın içinde ilk açılmasını istediğimiz sayfanın adının index.html olması gerekmektedir. Anaklasörümüzün içinde hiç bir alt klasörün içinde bulunmayan bir index sayfasına ihtiyacımız olduğunu unutmamamız gerekmektedir. Yoksa sitemiz yayınlanmaz.

Daha sonra sayfamız için bir yerleşim planı oluşturmamız gerekmekte şimdi tasarımıza bir bakalım ve nasıl bir tablolamaya ihtiyacımız olduğuna karar verelim. Sayfamızı ana hatları ile görüp daha sonra ayrıntıları düşünmemiz gerektiğini unutmayalım. Yani önce bir üst bölüm onun altında bir menu alanı, daha sonra bir içerik alanı ve en son bir alt bölüme ihtiyacımız olacak.

Bunun için dört satırlı bir tablo işimizi görecektir. Sayfamıza tablo yerleştirmek için insert panelinden common sekmesine geçip table düğmesine tıklarız. Bu tuşa tıkladığımızda karşımıza her zaman olduğu gibi yine bir pencere çıkar ve bu pencerede bize

Rows: Yani satır sayısı
Coloums: Yani sütun sayısı
Table width: Yani tablo genişliği
Border Thickness: Kontur çizgilerinin kalınlığı
Cell Padding: Hücre ve içine koyduğumuklarımız arasındaki boşluk
Cell Spacing: Hücreler arasındaki boşluk

Yerleşim Planı için Tablomuz

Yerleşim planımızın için bundan sonraki uygulamalarımızda tabloları kullanmayacağız. Tablomuzun özelliklerini resimde gözüktüğü gibi ayarlamamız gerekmektedir. 4 satıra bir sütunluk bir tabloya ihtiyacımız olduğundan rows: 4 coloums: 1 olarak ayarlıyoruz, tablomuzun hücreleri arasıda kontür çizgileri istemediğimiz için border thickness: 0, hücrelerimiz ve içerine koduklarımız arasında boşluk istemediğimiz için cell padding: 0, hücrelerimiz arasında boşluk istemediğimiz için cell spacing: 0 değerlerini giriyoruz. 

Eğer bu değerleri girmezsek buaralar kendiliğinden değerler atayacağını unutmamız gerekmektedir. Eğer kesinlikle bu değerlerin 0 olmasını istiyorsak bu alanlara 0 değeri girmemiz geekmektedir.

Bir sonraki yazıma bundan sonra yapmamız gerekenlerden bahsedeceğim.