ss styls

CSS Styles
Eğer Sayfanızdaki metinlerin yanlızca sizin yaptığınız şekillendirme ölçüsünde kalmasını ve sonradan browserlar tarafından görünümün tecavüze uğramamasını istiyorsanız CSS styles kullanmalısınız. CSS Styles sadece sayfanın formunu korumak açısından önemli değildir. Eğer sayfada çok metin varsa ve bunların bazıları kendi aralarında gruplaşabiliyorsa (örneğin başlıklar, normal açıklama textleri, ve küçük açıklama textleri vs vs) bunları tek tek biçimlendirmek yerine önceden hazırlanan bir CSS Styles dökümanı ile biçimlendirmek daha mantıklı olacaktır.
Bu anlamda, bir defaya mahsus olarak hazırlayacağınız bir style'i defalarca farklı yerlerde kullanabilrsiniz.




CSS Styles eklemek için:
- Windows/CSS Styles penceresini eğer aktif değilse aktif duruma getiriniz.
- Bir Floating Panel açılacaktır. Bu panel üzerinden CSS style'leri yönetebilir yeni style'lar ekleyebilirsiniz. Yeni bir style eklemek için: Panelin sağ üst köşesindeki ok tuşuna bir defa tıklayınız.
- Açılan menüden New Style diyoruz. Karşımıza çıkan kutucukta Style'ın adını istediğiniz gibi değiştirebilirsiniz. Alttaki seçeneklerden style'in türünü belirleyebilirsiniz. Biz bu kısma hiç dokunmacağız, en alttaki seçenekte ise yeni bir css dosyası oluşturacağımızı belirterek (NEW STYLE SHEET FILE) OK buttonuna tıklıyoruz.



- İlk oluşturulan CSS style'de Dreamweaver bizden bir tane css style belgesi oluşturmamızı isteyecektir. Bu dosyanın adını verdikten sonra (örnek: html dosyaları ile aynı klasör altına styleler.css olarak kaydedebilirsiniz) save diyebilirsiniz.
- Şimdi karşımıza çıkacak olan pencereden style'imizin özelliklerini belirteceğiz. Biz sadece genel özellikleri belirtip noktalıyacağız. Siz daha sonra isterseniz tüm özellikleri değiştirip (bgcolor, font color, underline, puntolar arası genişlik, satırlar arası genişlik vs vs) farklı kombinasyonlar yaratabilirsiniz. Buradan Font boyutunu, family kısmını ve diğer ayarları kendinize göre seçtikten sonra OK diyebilirsiniz. artık sayfanızda bir css style eklediniz ve css styles dosyası (stles sheet) attach etmiş olduk.


- Eğer bu styler.css dosyasını hazırladığınız diğer sayfalarda da kullanmak isterseniz; CSS Styles panelinden Sağ üst köşedeki ok işaretine tılayarak Attach Style Sheet demelisniz. Bundan sonra dosyayı belirleyip ekleyebilirsiniz






NOT: Eğer hazırladığınız bir CSS Style uyguladığınız text in CSS style'de belirlenmiş özelliklerinden birini Property Inspector üzerinden tekrar değiştimeye kalkarsanız, (yani CSS style özelliklerinde büyüklüğü 12 piksel olarak verilmiş bir text'in büyüklüğünü siz tekrar +3 gibi bşey olarak değiştirirseniz) CSS style devre dışı kalacaktır. Fakat şunu belirtelim: CSS style de belirtilmemiş özelliklerden birini değiştitrirseniz herhangi bir aksaklık çıkmayacaktır.






Rollover Text-linkler
CSS stylelerin belkide en çok bilinen özelliklerinden biri olan rollover text-linkler, oldukça çok dile getirilen problemlerden biri. Bu özellik elbette Dreamweaver'da da mevcut. Dreamweaver'da bu işi yapmanın bir çok yolu olduğuda bir gerçek.
Bu özelliği basitleştiren Extension ların yanı sıra tagları arasına ekleyeceğiniz STYLE kodları ile de bu olayı gerçekleştirmek oldukça kolay. Sırayla bir bilinen bu tekniklerin hepsinie bir göz atalım isterseniz.

STYLE Koduyla:
- Sayfanızı Dreamweaver ile açtıktan sonra Code View'a geçerek ... tagları arasına şu kodu yerleştirrmelisiniz:


-->

- Daha sonra burada geçen color komutlarının karşısına kendi renklerinizin kodlarını veya ingilizce isimlerini yazarak kendi isteğiniz doğultusunda düzenleyebilirsiniz.
- Bir çok arkadaşın da takıldığı gibi linklerde altçizgi sorununuda bu kod sayesinde halledebiliriz. Örneğin linklerinizde altçizgi olmamasını ama üzerine gidince altçizgi (underline) çıkmasını istiyorsanız, bu kodda olduğu gibi; a:hover komutundaki text-decoration: komutu karşısına underline yazmalısınız.
- Uyguladığınız renkler Dreamweaver da göünmeyecektir ama Browser'ınızla kontrol edip sonuçları değerlendirmeniz mümkün.


NOT: a:link = linklerin rengi
a:active = linke tıklandığı anda çıkan renk
a:visited = ziyaret edilmiş link rengi
a:hover = linkin üzerine gidildiğinde değişen rollover renk
text-decoration komutları ise linklerin altıçizgilimi yoksa çizgisiz mi olması gerektiğini belirten komuttur.



Extension Yardımı ile:
- Öncelikle ilgili extension'ı (Text Link Rollover Extension) bilgisayarınıza çekerek kurmalısınız. (extensionlar hakkında daha ayrıntılı bilgi için Extension ve Kullanımı dersine göz atabilirsiniz.)
- Daha sonra Object panel üzerinde oluşan yeni buton yardımı ile extension'ı çalıştırmanız mümkün. Extension'ın arayüzü oldukça basit.
On MauseOver: linkin üzerine gelince değişecek renk
On MauseOut: linklerin rengi
Visited Link: ziyaret edilmiş likin rengi.
- Tüm bu ayarları yaptıktan sonra OK diyip extension'ın kodu sayfanıza otomatik olarak eklemesini sağlayabilirsiniz.



CSS Style Editörü ile:
Bu yöntem ise biraz önce Extension yardımı ile anlattığımız yöntemin deyim yerindeyse manuel olarak yapılmasıdır.
- CSS style ediötrünü açık deyilse açıyoruz. Windows/CSS Styles veya Shift+F11
- New Style diyoruz ve açılan iletişim kutusundan Type kısmını Use CSS selector'ü işaretliyoruz.
- selector ksımında ise yanındaki drop down menüden yaralanarak ekleyeceğimiz style'a göre birinini seçiyoruz.
- OK dedikten sonra açılacak olan pencereden gerekli ayarları yaptıktan sonra tekrar OK diyip Style'ımızı tamamlıyoruz