Konular
- 3d Max Uygulamalar 5
- 3d Studio Max 11
- Açık Kaynak İşletim Sistemleri 18
- Adobe Illustrator 7
- Ajax 10
- Akıllı Tahta 1
- Algoritma 8
- Amerikan Emperyalizmi 1
- Android 5
- Apache Web Sunucusu 19
- Arduino 11
- Asp 1
- Asp.net 1
- Autocad Dersleri 1
- Autocad Uygulamaları 16
- Bilgisayar Donanımları 54
- Bilgisayara Giriş 44
- Bilgisayara Giriş Uygulamaları 7
- Bilim 8
- Bilim Insanları 2
- Bilişim Teknolojileri 13
- Blockchain Teknolojileri 13
- Bootstrap 11
- C Dersleri 32
- C Programlama örnekleri 3
- C# Dersleri 10
- C++ Dersleri 12
- Cgı Nedir? 1
- Css 55
- Css Ugulama Örnekleri 26
- Dns 1
- Dreamweaver 175
- Dreamweaver Uygulamaları 18
- E- Ticaret 5
- Eğitici Hikayeler 22
- Elektronik 3
- Elektronik Posta (email) 11
- Firefox 37
- Fireworks 1
- Fireworks Uygulaması 3
- Flash Actionscript 10
- Flash Dersleri 8
- Flash Örnek Uygulamalar 7
- Gerekli Programlar 3
- Google Docs 22
- Google Teknolojileri 11
- Html Dersleri 57
- Hz. Muhammed ( Sav) 1
- Ileri Excel 2
- Infographics 1
- Internet 14
- İngilizce 5
- Java Applet Örnekleri 81
- Java Applet Temelleri 74
- Java Application Örnekleri 10
- Java Netbeans Ide 14
- Java Temel Örnekler 46
- Java Temelleri 153
- Javascript 99
- Javascript Uygulama 20
- Jquery 11
- Jquery Örnekleri 11
- Kişisel Gelişim 8
- Libre Office Dersleri 3
- Linux Bash Script 5
- Linux Işletim Sistemi Os 95
- Linux Server 53
- Linux Web Filter 27
- Milli Eğitim Bakanlığı 7
- Ms Excel Dersleri 8
- Ms Excel Uygulamaları 23
- Ms Word Dersleri 350
- Ms Word Uygulamaları 43
- Mssql Veri Tabanı 3
- Mysql Veri Tabanı 10
- Network 24
- Online Ücretsiz Yazılımlar 1
- Ödev Konuları 3
- Pascal 1
- Photoshop Dersleri 460
- Photoshop Uygulama Örnekleri 1
- Photoshop Uygulamaları 58
- Php Dersleri 88
- Php Uygulamaları 33
- Phpmyadmin 2
- Postgresql Veri Tabanı 62
- Power Point 2
- Programlama Dilleri 1
- Proje Hazırlama 15
- Python 7
- Qbasic 19
- Regular Expressions 1
- Robotik Kodlama 1
- Scratch İle Kodlama Dersleri 84
- Seo 6
- Teknik Servis 9
- Teknoloji 4
- Teknoloji Tasarım Uygulamaları 16
- Ücretsiz Uygulamalar 1
- Veri Tabanı 63
- Web Tasarım 13
- Web Uygulamaları 1
- Windows Os 13
- Windows Server 3
- Xml 5
- Yapay Zeka 1
- Yazılım Dünyası 22
Videolar
- Amerika 1
- Animasyon Örnekleri 1
- Atom Seviyesi 1
- Bakış Açısı 1
- Bilgisayar Donanımları 33
- Bilişim Teknolojileri 27
- Biyoteknoloji 1
- Bootstrap 2
- Dijital Dönüşüm 1
- Doğal Enerji 1
- Eğitim Sistemi 1
- Eğitim Teknolojileri 1
- Elektronik 3
- Excel Dersleri 5
- Geleceğin Araçları 2
- Geri Dönüşüm 1
- Hayvan Sevgisi 1
- Ingilice Dersleri 1
- Insan Yetenekleri 2
- Işletim Sistemi 3
- İslam 3
- Marşlar 3
- Mekanik 1
- Microsoft Visual Studio 3
- Microsoft Word Dersleri 2
- Mssql Server 2
- Müslüman Mucitler 2
- Php Dersleri 1
- Programlama 4
- Psikoloji 2
- Python Dersleri 4
- Robotlar 7
- Savunma Sanatları 1
- Sketchup Nedir? 3
- Şaşırtıcı Bilim 9
- Tarih 1
- Tasarımlar 9
- Teknoloji 8
- Vücud Geliştirme 3
- Windows Sorunları 1
- Yazılım Der 1
- Yazılım Dünyası 2
Sunular
- 2. Sınıf Öğrencileri İçin Sunular 1
- 5. Sınıf Öğrencileri Için Sunular 13
- 8. Sınıf Öğrencileri İçin Sunular 23
- Belirli Gün Ve Haftalar 1
- Bilgisayar Donanımları 5
- Bilgisayar Programlama 2
- Bilgisayar Yazılım 2
- Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
- Biyografiler 2
- Biyoloji 2
- Değerler Eğitimi 4
- Eba Elektronik Bilişim Ağı 5
- Eğitim-Öğretim Sunuları 3
- Felsefe 2
- İslam 3
- Kelime İşlemci 1
- Kişisel Gelişim 4
- Kodlama, Robotic 4
- Ortak Eğitim Proje Sunuları. 2
- Problem Çözme Ve Algoritmalar 3
- Proje Nedir? Nasıl Yapılır? 1
- Rehberlik 16
- Sağlık 3
- Savaşlar 1
- Scratch 1
- Seminerler 3
- Sınav Kaygısı 2
- Sosyal Bilgiler 1
- Sosyal Bilgiler 1
- Tarih 1
- Ulaşım Araçları 1
- Verimli Ders Çalışma 1
- Web Araçları 0
- Windows İşletim Sistemi 1
- Yarışmalar 0
Testler
- 5. Sınıf Matematik Testleri 7
- Açık Kaynak İşletim Sistemleri 4
- Açık Kaynak Office 2
- Ağ Temelleri 3
- Autocad 1
- Bilgisayara Giriş 18
- Bilişim Teknik Resimi 1
- Bilişim Teknolojilerinin Temelleri 10
- Cografya 2
- Css-javascript 4
- Flash 1
- Google Teknolojileri 1
- Görsel Programlama 1
- Html 1
- Illustrator 1
- İşletmede Beceri Eğitimi 1
- Java 5
- Javascript 1
- Libre Office 1
- Mesleki Gelişim 3
- Ms Office Word 11
- Php 2
- Programlama Temelleri 5
- Temel Elektronik 1
- Veri Tabanı 4
- Web Programlama 1
- Web Tasarım 4
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.
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.
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.
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.
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.
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.
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.
- 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/
