Cssler hakkında çok minikte olsa bir örnek yaptıktan sonra şimdi bunu dreamweaver’ın ara yüzü üzerinden nasıl yapabiliriz bir bakalım. Önce css panelinin özelliklerine şöyle bir göz atalım.
Bizim css panelimizin en tepesinde All seçeneğinin seçili olduğunu görüyoruz yani sayfamızdaki tüm css kurallarını bize hemen altındaki alanda gösteriyor. Eğer Current seçeneği seçili olsaydı o anda sayfamızda seçili olan her ne varsa ona uygulanmış olan css kurallını gösteriyor olacaktı.
Peki sayfamızdaki css kuraları nelermiş body,td,tr sayfamızında gördüğümüz tüm herşey en büyük tag olan body’nin içinde bulunur yani sayfamızdaki her yazının hangi fontta olacağını, sayfamızın tamamının arkaplanın ne olacağını söyleyebileğimiz css’dir.
Onun hemen altındaki properties bölümünde seçili olan css kuralının tüm özellikleri listelenir. Yani bodydeki font rengi, font büyüklüğü, fonttun türü gibi buradan hemen değiştirebiliriz. Bu bölümünde altında sol taraftaki düğmeleri ben çok fazla kullanmıyorum. Genelde kullanılan özellikler düğmesini tıklı olarak bırakırım size de böyle yapmanızı öneririm.
Sağ taraf ise gerçekten çok önemli zincire benzeyen icon harici bir css sayfasını sayfamıza bağlamak için kullanacağımız icondur. Bu da ne demek hemen panik yapmayın bir sonraki yazımda bundan bahsedeceğim. Şimdi bir sonraki iconumuza geçelim, yeni br css kuralı eklemek için kullanacağımız icondur. Bu gayet net birazdan nasıl bir css ekleyeceğimize bakacağız. Onun hemen yanındaki kalem iconu seçili olan css kurallını düzenlemek için kullanacağımız icondur ki bunu yapmak için css kurallına çift tıklasanızda olur. Yani body yazan yere çift tıklayıp body adındaki css kuralını düzenleyeblirim. En son iconumuz çöp tenekesi ise her halde tahmin etmişsinizdir. Seçili olan css kuralını siler.
Bunun için yeni bir css kuralı ekle düğmesine yani new css rule düğmesine tıklıyoruz.Karşımıza yeni bir pencere açılıyor bu pencereden css’imizin türünü, adını ve bu kuralla ait kodların nereye yazılacağını belirliyoruz. Dreamweaver Cs3 kullanıcıları bu pencereyi biraz daha farklı görecekler ancak esasında belirtiklerimiz tamamiyle aynı o yüzden buradan sonra yapacaklarımızı biraz değişik bir pencereden yapacak olsamda aynı şeyleri seçerek aynı sonucu elde edebilirler.
En üsteki bölümden css türümüzün tag olduğunu belirtelim. Onun altındaki bölüme yazalım yada açılan menuden h1′i seçelim. Böylece sayfamızdaki en büyük başlıkları etkilemek istediğimizi belirtmiş olduk. Dreamweaver cs3 kullanıcılarında h1 yazdığımız yerin hemen altındaki bölüm bulunmamakta ancak bu bölüm sadece dreamweaver tarafından yazılan ve h1 seçmemizin ne işe yaradığını bize anlatan bölüm yani fasa fiso Onun hemen altında Less Specfic ve More Specific düğmeleri yine Cs3 kullanıcılarında bulunmuyor bu düğmelerde pek bir işe yaramıyorlar en azından şimdilik hiç bir işimize yaramıyorlar. Önemli olan bir sonraki bölüm yani css kuralımızı nereye yazacağımız. Burada This document only seçeneğini seçersem css kuralım bu sayfa içine yazılır HTML kodlarınında head ve head tagleri arasına ancak new style steet file dersem bir css dökümanı açar ve kodarı onun içine yazar böylece harici bir css sayfam olur. Biz şimdilik This document only diyelim daha sonradan pişman olabiliriz ancak şimdi yeni bir css sayfasıyla uğraşmayalım. Tüm bu ayarları yaptıktan sonra ok tuşuna tıklıyoruz. Veee karşımıza yeni bir pencere daha çıkıyor.
Size bir sır veriyim dreamweaver’da tıkladığınız her 10 şeyden 9′u size pencere açar 
Açılan pencereye şöyle bir baktığımızda 8 ayrı kategori görmekteyiz bu kategoriler ileri de teker teker inceliyeceğiz ancak şimdilik
- Type: Fontlarımla ilgili özeliklerin bulunduğu kategori
- Background: Arkaplan özelliklerinin bulunduğu kategori
- Block: Yazı bloklarının özelliklerinin bulunduğu kategori
- Box: Kutu özelliklerinin bulunduğu kategori
- Border: Kontür, sınır çizgisi özelliklerinin bulunduğu kategori
- List: Liste özelliklerinin bulunduğu kategori
- Position: Yerleşim özelliklerinin bulunduğu kategori (Daha çok Divlerle çalışırken kullanacağız)
- Extensions: Özel efeklerin bulunduğu kategori (mouse imgeci vb.)
Buradan şimdilik sadece font family yani font türümüzü Font Size yani font büyüklüğümüzü Color yani yazı rengimizi ve Text transform yani yazımız büyük harf mi küçük harflemi yazılacak ayarımızı yapalım. Css’le bunu bile yapabiliyoruz.
Hiç yorum yok:
Yorum Gönder