Sayfa ayarlar? ileti?im penceresindeki "Links" sekmesinin ve bu özelliklerin kullan?labilmesi için
" seçene?inin i?aretli olmas? gerekiyor. Aksi taktirde sayfa ayarlar? penceresinde bu ayarlar? yapabilece?iniz k?s?mlar görünmeyecektir.
Tek Sayfada birden fazla Rollover Text-Link
Sayfalarda (abart?lmad??? sürece) çok ho? görünen ve CSS'in en çok bilinen özelli?i olan Text-Link Rollover olay?na daha önce deyinmi?tik hat?rlarsan?z. Çok güzel, sayfalar?m?zda rahatl?kla kullanabiliyoruz. Peki sayfam?zda farkl? bir renk ile renklendirmemiz gereken ikinci bir link grubu (menü, alt menü veya arka fon nedeniyle iyi görünmeyen linklerde) olursa ?? ??te orda da CSS'in "A" selector özelli?ini kullanaca??z.
Olay?n Dreamweaver ile pek bir alakas? yok asl?nda. Sadece DW'?n bize sundu?u görsel ortam? kullan?yoruz. Bütün s?r CSS'de.
Farkl? renkte Text link rollover'lar tan?mlamak için;
?lk önce sayfan?za daha önce anlat?ld??? gibi bir "Text link rollover" ekliyorsunuz.
?imdi ikinci rollover grubu için i?e koyulal?m. CSS Styles panelinde Yeni bir stil yaratmak için "New" diyoruz,
Bu ekleyece?imiz stil normal bir stil de?ildir. Yeni bir CSS selector tan?mlamas? yapaca??z. O yüzden "Advanced (IDs, pseudo-class selectors)" seçene?ini seçiyoruz. Selector k?sm?na "a.pembelinkler" yaz?yoruz ve OK diyoruz.
Bir sayfada birden fazla text-link rollover tan?mlamak için
Ayarlar? a?a??daki gibi (ya da nas?l istiyorsan?z) yap?p tekrar OK diyoruz. (Burada ikinci link grubunun font'uda, rengi de büyüklü?ü de her ?eyi farkl? olabilir) ?imdi ikinci bir link grubu yaratm?? olduk. ?imdi bunun içinde "visited, active ve hover" tan?mlamalar? yapaca??z.
?kinci rollover test link için stil özellikleri
Tekrar New diyoruz yine "Advanced (IDs, pseudo-class selectors)" ve Selector k?sm?na bu sefer "a.pembelinkler:visited" yaz?yoruz ve OK deyip bunun içinde istedi?iniz stil ayarlar?n? yap?yoruz. Ben sadece rengini ve Text Decoration k?sm?n? de?i?tiriyorum ama siz istedi?iniz de?i?ikli?i yapabilirsiniz. Bu ?ekilde "a. pembelinkler:hover" ?da ekliyoruz.
?kinci rollover text linkler için :hover stili özellikleri
?imdi bu stili uygulamak istedi?imiz linki tümüyle seçili duruma getirip CSS Styles panelinden "pembelinkler" adl? stile t?kl?yoruz. ?imdi sayfay? kaydedip taray?c?da bir göz atabiliriz.
Bu ?ekilde istedi?iniz kadar a.grup2, a.grup3.... gibi link gruplar? ekleyebilirsiniz.
Bu ?ekilde Selector tan?mlamalar? yaparken ?u s?ray? izlerseniz bir sorun ile kar??la?mazs?n?z:
- a:link
- a:visited
- a:hover
- a:active
Aksi takdirde stiller birbirini etkileyip devre d??? b?rakabiliyor yada sorunlar ç?kabiliyor. Akl?n?zda bulunmas? gereken bir ayr?nt? olarak eklemek istedim.
Bu etkiyi yapabilece?iniz bir di?er yöntem de DIV ve katmanlar için haz?rlad???n?z ID'ye özel stillerin alt stilleri ?eklinde link biçimlendirmeleri de yapabilirsiniz. Örne?in ID si UstTaraf olan bi DIV için eklenen #UstTaraf isimli bir stil oldu?unu varsayal?m. Bu UstTaraf DIV'inin içinde yer alan herhangi bir linki seçip CSS Styles Panelinden New diyerek yeni bir stil tan?mlamaya ba?arsan?z DW sizi bunun için hiyerar?ik CSS yap?s?n? takip eden bir selector ismi ile sizi yönlendirecektir. Bu s?ra ile ayn? ?ekilde #UstTaraf a:visited ve #UstTaraf a:hover ?eklinde stiller ile linkleri biçimlendirmeye devam edebilirsiniz.
Farkl? renkte rollover text-link tan?mlamak için farkl? bir yöntem
Resimde de görüldü?ü gibi bu ?ekilde UstTaraf DIV'i içerisinde yer alan her türlü HTML eleman?n? biçimlendirebilmeniz mümkün. Bu biçimlendirmeler sayfadaki di?er elemanlar? etkilemeyecek sadece bu DIV içerisinde s?n?rl? kalacakt?r. Daha ayr?nt?l? bilgiyi CSS kaynaklar?ndan alabilirsiniz.
Örne?in Dreamweaver Sayfas?n?n tasar?m?nda bu stiller kullan?lmaktad?r. Sayfay? kaydedip CSS dosyas?n? inceleyebilirsiniz.
Kaynak www.dw.gen.tr/