Adobe Dreamweaver CSS İle Arka Plan Rengini Değiştirmek
Sayfamızın arka plan rengini değiştirmek için sayfa özellikleri penceresi kullanılır.Bunun için Değiştir> Sayfa Özellikleri seçeneği seçilir.Karşımıza aşağıdaki gibi bir pencere çıkacaktır.
Açılan iletişim kutusunda arka plan rengi kısmı kendi sayfamıza özgü olarak değiştirilebilir.Burada seçilen renk dreamweaver tarafından otomatik olarak CSS'de tanımlanacaktır.
Yine bu pencereden sayfa içerisindeki metinlerin aynı fontta olmasını sağlayabiliriz.Burada en üstte bulunan sayfa fontu istenen bir biçimde seçilebilir. Yine bu seçim CSS'de otomatik olarak tanımlanacaktır.
Örnek olarak bir seçim yaptım ve kod penceresine geldim. Sizin renk ve font seçiminiz farklı olabileceğinden aynı kodu göremeyebilirsiniz.
Sayfa içerisinde tanımlanan ve kullanılan stiller dahili stil penceresinde görünür.Bu stiller tek bir sayfaya aittir. Başka bir sayfada kullanılamaz.Başka bir sayfada kullanmak istememiz durumunda harici stil dosyaları tanımlamamız gerekmektedir. Bu harici stil dosyaları her sayfaya yüklenebilir. Dahili stillerin başka bir sayfada kullanılması için aynı kodun tekrar tekrar yazılması gerekmektedir.Bu da dosya boyutunu büyütür. Ayrıca güncelleme yapmamız durumunda tek dosya üzerinde çalışmamız bize büyük bir avantaj sağlar.
Sayfada kullanılan CSS komutları
Bu pencerenin görünmemesi durumunda Pencere > CSS Stilleri seçeneği seçilir. Pencerenin altında bulunan yeni pencere kuralu butonuna basarak yeni bir stil oluşturma penceresini açalım.
Burada temel olarak oluşturabileceğimiz bir kaç stil vardır.
Sınıf: Bu seçimle belirli bir elemana bağlı olmayan sınıflar yaratabiliriz.Sınıfların başlarına nokta işareti koyulur.
Etiket: HTML etiketinin görsel özelliklerini değiştirmemizi sağlar.Etiketin varsayılan görünümü stil tarafından değiştirilir.
Advanced: ID oluşturmamızı sağlar. IDler sınıflara benzer.Sınıflardan farkı ise sayfa başlarında sadece bir kez kullanılabilmeleridir. ID başlarında # işareti bulunur. IDler genellikle script yazmak için kullanılırlar.
Eğer dahili bir stil dosyası oluşturulacaksa en altta bulunan sadece bu belge seçeneği seçilir.Tamam seçeneğinden sonra karşımıza bu stil ile ilgili özellikler çıkacaktır.
Dahili stilleri harici stilleri dönüştürme işlemi yapılabilir. Bu işlemle bir stil dosyası birden fazla sayfaya bağlanabilir.Harici stil dosyaları aynı dahili stil dosyaları gibi kodlar içerir. Dahili stilleri harici olarak taşımak için ilgili stil üzerine sağ tıklanarak CSS Kuralını Taşı seçeneği seçilir.
Buradan sonra karşımıza bir pencere çıkacaktır.Bu pencerede stil dosyasının adını yazacağız. Ve bize kayıt yerini soracaktır.Bu kayıt yeri bizim web sitemizin CSS klasörü olmalıdır.
Açılan iletişim kutusunda arka plan rengi kısmı kendi sayfamıza özgü olarak değiştirilebilir.Burada seçilen renk dreamweaver tarafından otomatik olarak CSS'de tanımlanacaktır.
Yine bu pencereden sayfa içerisindeki metinlerin aynı fontta olmasını sağlayabiliriz.Burada en üstte bulunan sayfa fontu istenen bir biçimde seçilebilir. Yine bu seçim CSS'de otomatik olarak tanımlanacaktır.
Örnek olarak bir seçim yaptım ve kod penceresine geldim. Sizin renk ve font seçiminiz farklı olabileceğinden aynı kodu göremeyebilirsiniz.
Sayfa içerisinde tanımlanan ve kullanılan stiller dahili stil penceresinde görünür.Bu stiller tek bir sayfaya aittir. Başka bir sayfada kullanılamaz.Başka bir sayfada kullanmak istememiz durumunda harici stil dosyaları tanımlamamız gerekmektedir. Bu harici stil dosyaları her sayfaya yüklenebilir. Dahili stillerin başka bir sayfada kullanılması için aynı kodun tekrar tekrar yazılması gerekmektedir.Bu da dosya boyutunu büyütür. Ayrıca güncelleme yapmamız durumunda tek dosya üzerinde çalışmamız bize büyük bir avantaj sağlar.
Sayfada kullanılan CSS komutları
Bu pencerenin görünmemesi durumunda Pencere > CSS Stilleri seçeneği seçilir. Pencerenin altında bulunan yeni pencere kuralu butonuna basarak yeni bir stil oluşturma penceresini açalım.
Burada temel olarak oluşturabileceğimiz bir kaç stil vardır.
Sınıf: Bu seçimle belirli bir elemana bağlı olmayan sınıflar yaratabiliriz.Sınıfların başlarına nokta işareti koyulur.
Etiket: HTML etiketinin görsel özelliklerini değiştirmemizi sağlar.Etiketin varsayılan görünümü stil tarafından değiştirilir.
Advanced: ID oluşturmamızı sağlar. IDler sınıflara benzer.Sınıflardan farkı ise sayfa başlarında sadece bir kez kullanılabilmeleridir. ID başlarında # işareti bulunur. IDler genellikle script yazmak için kullanılırlar.
Eğer dahili bir stil dosyası oluşturulacaksa en altta bulunan sadece bu belge seçeneği seçilir.Tamam seçeneğinden sonra karşımıza bu stil ile ilgili özellikler çıkacaktır.
Dahili stilleri harici stilleri dönüştürme işlemi yapılabilir. Bu işlemle bir stil dosyası birden fazla sayfaya bağlanabilir.Harici stil dosyaları aynı dahili stil dosyaları gibi kodlar içerir. Dahili stilleri harici olarak taşımak için ilgili stil üzerine sağ tıklanarak CSS Kuralını Taşı seçeneği seçilir.
0 yorum:
Yorum Gönder