Dreamweaver CSS
..:: Dreamweaver 8 Stiller / CSS ::..
Yeni Bir Stil Belgesi Oluşturmak: Stilller ile temel olarak belgemizdeki metin harflerinin büyüklüğünü, türünü, kalınlığını, italik ve altı çizgili oluşunu, rengini, sağa mı sola mı yaslı olacağını vb. gibi özellikleri ayarlarız. Örneğin bir Web sitenizde bir ziyaretçi formunuz var. Bu forumda 20 tane textbox, 3 tane dropdown menü, 8 tane de buton var. Siz bu form nesnelerinin hepsinde Tahoma fontunu, 12 punto, mavi renk tonunda ve 4 pixel çerçeve kalınlığında kullanmak istiyorsunuz. Ne yapacaksınız? Bütün form nesneleri ile tek tek mi uğraşacaksınız yoksa nasıl CSS oluşturulur ve nasıl kullanılır konusunu mu öğreneceksiniz.
Evet bütün form nesnelerini tek bir stil dosyası ile biçimlendirebilirsiniz. Öncelikle bir stil dosyası oluşturursunuz ve formunuzdaki öğeleri seçerek bu stil dosyasının özelliklerini almalarını sağlarsınız. Bunun için CSS panelini kullanacağız. Kolları sıvayalım ve CSS panelinde + butonuna basalım.
Class seçeneğini seçelim. Eğer CSS dosyamızın sadece bu sayfada kullanılmasını istiyorsak This Document Only seçeneğini işaretleyelim. Ayrı bir dosya olarak kaydetmek için ise New Style Sheet File seçeneğini seçeceğiz.
OK dediğimiz zaman karşımıza CSS dosyamızın adını ve kayıt yerini belirtmemizi isteyen Save Style Sheet File As penceresi çıkacak. CSS dosyamızın adını "dreamweaver" olarak yazıyorum. Sizde kendinize göre birşeyler yazabilirsiniz.
Fontumuz Arial, puntosu 10, rengi Gri ve hiçbir dekorasyon kullanmadık. Bu şekilde stil atadığımızda linklerimizin altındaki çizgi kaybolacaktır. Bu adımda ise fare linkin üzerine geldiğinde linkin renginin değişmesi olayını gerçekleştireceğiz. CSS panelinde + butonuna basalım.
Selector Type seçeneklerinden Advanced seçeneğini işaretleyelim ve Selector menüsünden a:hover öğesini seçelim. Define in bölümü ilk haliyle kalsın. Ok butonuna basalım ve ayar penceresine gelelim.
Bu pencerede yapacağımız ayarlar farenin linkin üzerine geldiği zaman linkin alacağı hal ile ilgili. Yine fontumuz Times New Roman, puntosu 11, farklı olarak rollover durumundaki rengi bordo, dekorasyon olarakta stilimizde altı çizgiyi kullandık.
Şimdi sıra geldi bu stili uygulamaya. Herhangi bir metin yazalım. Properties panelinden Link metin kutusundan bu metne link verelim. Sonra bu linki seçelim CSS paneline gelelim ve stilimize sağ tıklayarak Apply komutunu çalıştıralım. Stilimiz linkimize uygulanmış olacaktır. Linkimizin üzerine fare ile geldiğimizde rollover olayını göreceğiz.
Stil Belgesi Atamak: Daha önceden yaptığımız bir stil belgesini başka bir çalışmamızda da kullanmak istiyorsak Attach Style Sheet komutunu kullanacağız. Bu işlem için CSS paneline gelelim ve Attach Style Sheet butonuna tıklayalım. Açılan pencereden Browse butonuna tıklayalım ve Stil belgemizi bulup Ok butonuna basalım.
Stili belgemize almak için Import, linkini belgemize almak için Link seçeneğini seçelim ve OK butonuna basalım. Önizleme yapmak istersek Preview butonuna tıklayacağız. Bu adımlardan sonra daha önceden yapmış olduğumuz bir stil belgesini sayfamızda kullanabileceğiz.