Konular

Rollover Text Linkler

Bir linkin üzerine gidiyoruz alt? çizgili oluyor rengi de?i?iyor, arka fon rengi de?i?iyor. ??te CSS’in evlere ?enlik bir özelli?i

"CSS Styles" panelini aç?k de?ilse Windows / CSS Styles menüsü veya Shift+F11 ile aç?yoruz. "CSS styles" panelinin sa? üst kö?esindeki dü?meye t?klayarak aç?lan panel menüsünden "New ..." diyoruz.

www.dijitalders.com

CSS styles paneli menüsünden New diyerek yeni bir stil tan?mlamaya ba?layabilirsiniz

Aç?lan diyalog penceresindeki "Type" k?sm?ndan "Advanced (IDs, pseudo-class selectors)" seçene?ini i?aretliyoruz. "Selector" k?sm?n? da yan?ndaki aç?l?r menüden yararlanarak ekleyece?imiz stile göre uygun olan? seçiyoruz.

www.dijitalders.com

Yeni bir text link yaratmak

S?ras?yla a:link, a:visited, a:hover, a:active stillerini ekliyoruz ve daha önce anlat?ld??? gibi stil ayarlar?n? yap?p doküman?m?z? kaydediyoruz.

Bu tür alt?nda yer alan ö?eler ve anlamlar? ise ?u ?ekilde;

  • a:link: Bu sayfam?zdaki standart text-linkleri temsil eder.
  • a:visited: Ziyaret edilmi? text-link rengini veya özelliklerini belirtir.
  • a:hover: Text-linklerin üzerine gidince de?i?ecek olan durumu yani rollover durumunu temsil eder.
  • a:active: Bu ise linke t?kland??? anda linkin alaca?? durumdur.

Bu ?ekilde standart "CSS Selector" tan?mlamalar? yapabilece?iniz gibi kendinizde özel link gruplar? olu?turabilirsiniz. Bu sayede tek sayfada birden fazla rollover text-link tan?mlamas? yaparak farkl? link gruplar? olu?turabilirsiniz.

Link tan?mlama s?ran?z her zaman link, visited, hover, active ?eklinde olmal?d?r. Aksi takdirde CSS stiller taray?c?da düzgün görünmeyecektir.

Rollover Text Link olay?n? zahmetsiz ve kolay bir biçimde yapman?n bir di?er yolu da Modify / Page Properties menüsü ile ula?t???m?z sayfa ayarlar? ileti?im penceresindeki "Links" sekmesidir. Bu bölümde linkleriniz için renk ve metin dekorasyon ayarlar?n?z? oldukça kolay ve kullan?c? dostu bir ara yüz ile yapabilmeniz mümkün.

www.dijitalders.com

Rollover test linkleri sayfa ayarlar? ile yapmak oldukça kolay

?lgili ayarlar? yap?p "Apply" dedi?inizde DW, rollover text-linkler için gerekli olan CSS kodunu sayfaya ekleyecektir.

Sayfa ayarlar? ileti?im penceresindeki "Links" sekmesinin ve bu özelliklerin kullan?labilmesi için Edit / Preferences menüsünden "General" sekmesi alt?nda yer alan "Use CSS instead of HTML tags" 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.

www.dijitalders.com

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.

www.dijitalders.com

?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.

www.dijitalders.com

?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.

www.dijitalders.com

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/

Yorumunuzu Ekleyin

Database Paneli

Database paneli

26,263 Okunma 1 Yorum 05/06/2008 10:46:38

Div Çatılı sayfalar Oluşturmak

Çok değil birkaç yıl önce sayfa tasarımlarımızı yaparken ara yüz bileşenlerini tablolar kullanarak görünmez ızgaralar üzerine inşa ederdik. Bu durum; HTML yapı dilinin web tasarımcıları tarafından hatalı yorumlanmasının ve kullanılmasının bir sonucu idi. Tarayıcılar arası çekişmelerin ve tüm Internet alışkanlıklarımızı etkileyen tarayıcı savaşlarının bir sonucu olarak ortaya çıkmıştı. Fakat Web 2. 0 kavramının gündeme geldiği şu günlerde artık eski tasarım alışkanlıklarını bir kenara bırakıp modern tasarım ve web teknolojilerine cevap verecek web sayfaları tasarlamanın vakti geldi de geçiyor bile

25,994 Okunma Henüz yorum yapılmamış 06/08/2007 17:55:00

Recordset ile verileri sayfaya yazdırmak

Kayıt dizisi (recordset) ile Dreamweaver içerisinden veritabanına erişim sağlayarak, kriterlere göre ve ya istediğimiz sayıda kaydı sayfaya yazdırmak mümkün. Bizde bu makale ile veritabanı kayıt erişimlerini yakından inceleyeceğiz

21,709 Okunma Henüz yorum yapılmamış 31/08/2007 14:19:45

Bindings Paneli

Dreamweaver bindings paneli

20,766 Okunma Henüz yorum yapılmamış 05/06/2008 10:03:38

Database Paneli

Veritabanlarına erişmek

19,757 Okunma Henüz yorum yapılmamış 05/06/2008 09:12:39

Datebases Paneli

Resimli anlatım

19,655 Okunma Henüz yorum yapılmamış 06/06/2008 11:05:53

Bindings Paneli

Veri bağlantılarının yönetildiği panel

19,026 Okunma Henüz yorum yapılmamış 05/06/2008 09:11:51

Named Anchor

Named anchor aracı ile ilgili açıklamalar

19,016 Okunma Henüz yorum yapılmamış 05/06/2008 10:18:51

Dreamweaver ile Site tanımlamaları

Dreamweaver birçok geliştirme ortamında olduğu gibi proje bazlı çalışmalar yapmaya olanak tanıyan bir yazılımdır. Bu makalede projelerimizi DW içerisinde nasıl yönetebileceğimizi göreceğiz

18,840 Okunma Henüz yorum yapılmamış 01/09/2007 02:25:54

ASP sayfası hazırlama

Dreamweaver mx de ASP çalışmak için daha önceden ASP ile uğraşmış olmak gereklidir. Her nekadar Dreamweaver Mx işimizi kolaylaştırsa da ASP 'den anlamak bazı durumlarda faydalı olacaktır. ASP öğrenmek için Dr. Hakkı ÖCAL 'ın ASP kitaplarını tavsiye ederim

18,717 Okunma Henüz yorum yapılmamış 12/08/2007 04:13:11

Yükleniyor...