» » Dreamweaver’da CSS Oluşturma

Bir sayfa yazdiniz ama yazilarin bir kismi büyük ve alti çizili bir kismi küçük zar zor okunsun bir kismida
renkli olsun istiyorsunuz.Oysa sayfada yazılar vb hep standart.İşte burada CSS kullanıyoruz. Dreaamveraverda CSS nasıl oluşturulur ?

css2 Dreamweaverda CSS Oluşturma
Dreamweaveri açınca sağ üstde ( resimde görüldüğü gibi ) CSS kısmı vardır.Buraya tıklıyoruz.




css1 Dreamweaverda CSS Oluşturma

Açılan kısımda altda ” New CSS rule ” tuşu vardır.Buna tıklıyoruz.



css31 Dreamweaverda CSS Oluşturma
solda görünen pencere açılır.Class oluşturucaz.name kısmına class adını yazıyoruz herhangi birşey olabilir.başına “.” sadece nokta gelmeli! örnekte .s1.define in kısmı için iki seçenekte seçilebilir.Ben farklı dökümanı seçiyorum.Diğerini seçersem css kodlarını aynı dosyada oluşturur.


css4 Dreamweaverda CSS Oluşturma
.s1 classını sanal.css dosyasında oluşturdum. bu css dosyasını yukarıdaki adımdan sonra soruyor.istediğiniz ismi ve kaydedilecek yeri seçmeniz yeterli.




css10 Dreamweaverda CSS Oluşturma
Soldaki pencere açılır. Oluşturacağımız class’ın bütün özelliklerini burada belirleriz. Günümüzde sitenin görsel özellikleri CSS yardımıyla yapılmaktadır.CSS lerde yapılan değişiklikler ile kolayca sitenin çehresi değişebilir. WordPress sitelerde admin panelinde editör kısmında css dosyasıda bulunmaktadır. Orada değişiklik yaparsanız sitenizde değişir.Temanızın değiştirmek istediğiniz özelliklerinide oradan düzenleyebilirsiniz.



css5 Dreamweaverda CSS Oluşturma
Örnek bir dosya hazırladım. Yandakii resimde 5 tane yazı var.sanal.css dosyasıda hemen yanda.oluşturduğumuz her class o dosyanın çindede oluşacak ve o dosyayıda kaydetmeliyiz.





Yukarıdaki örnekte sanal.css dosyasında .s1 clasını oluşturmuştuk.Oluşturduğumuz her class altdaki resimde görüldüğü gibi css kısmında görünür.Özellikleri buradan değiştirebiliriz. İstediğim yazıyı seçiyorum ( sayfanın altında properties penceresinde “style” kısmı var.her class buraya eklenir ) istediğim yazıyı seçtikten sonra buradan istediğim class’ı seçiyorum.Bu sayede o yazı diğerlerinden farklı özellikte oluyor.
css6 Dreamweaverda CSS Oluşturma


css7 Dreamweaverda CSS Oluşturma

soldaki resimde gösterildiği gibi. Kod kısmınada dikkat edin sadece sanalgelisim.com a css uyguladım.

css8 Dreamweaverda CSS Oluşturma
ilk başta gösterdiğim gibi class sayısını arttırdım.5 adet yazı vardı.İlki sayfanın standart özelliğinde diğer 4 yazıya css uyguladım.Resimde görüldüğü gibi farklı farklı yazılar oluşturdum.CSS leri tablolara,resimlere hücrelere vb uygulayabilirsiniz. Örneğin bir class oluşturursunuz ve bunun içine resim eklersiniz.Bu şekilde onlarca resim koydunuz ve daha sonra bir düzenleme ihtiyacı duydunuz tek tek resimlere girmek yerine classı düzenlemek yetecektir. Mesela bu yazıda kiresimlerin kenarlarındaki boşluklar css ile ayarlanmıştır.



css9 Dreamweaverda CSS Oluşturma
Her class oluşumunda sanal.css dosyasında da kodlar otomatikman oluşur.Solda gözüktüğü gibi. WordPress siteniz var ve css ile bir sayfa hazırladınız.Kendi kodlarınızı alıp wordpress css dosyasına kopyalayın yeterlidir yada sitenizin mevcut css kodları üzerinde değişiklik yapabilirsiniz.Tavsiyem önceden kodları kopyalayın.Çünkü css dosyasında yapılacak değişiklikler bütün siteyi etkiler.



Yazar : Unknown

Merhaba. Ben CEMRESETAY Medya'da yazarlık yapıyorum. Hepimizin ortak amacı, gündemi olduğu gibi tarafsız bir şekilde aktarmaktır.
«
İleri
Sonraki Kayıt
»
Geri
Önceki Kayıt

Hiç yorum yok:

Yorum Yap