Unutmayım Diye Yazdıklarım

Resim: css-navi-00

Bir önceki dersimizde navigasyonu kod yazarak oluşturmuştuk. Şimdi aynı konuyu Dreamweaver CS5 kullanarak uygulayacağız.



Öncelikle div tagımızı oluşturuyoruz.



Resim: dreamweaver-css-navi-01

Açılan pencerede alttaki gibi ID yazan yere “nav” yazıyoruz.

Not:

Eğer “Class” oluşturmak isteseydik bir üst kısma yazacaktık. 

Insert: Bu bölüm oluşturulacak olan div tagının yerini belirlemek için kullanılır. 

At insertion point : Mouse ile seçilen yere yerleştirir.

After start of tag: Açılan menü ile seçilen tagın hemen ardına yerleştirir.

Before star of tag: Açılan menü ile seçilen tagın hemen öncesine yerleştirir.



Daha sonra yeşil işaretli yere tıklayarak bu div tagının stil tanımlamasına başlıyoruz.



Resim: dreamweaver-css-navi-02







Açılan pencerede “nav” adlı tagımız görünmektedir.

Note:

Selector Type: Divi ID olarak tanımladığımız için burası otomatik tanımlı geldi.

Selector Name: Oluşturduğumuz divin adı görünmektedir.

Rule Defination: 

This document only: Css kodları bu index dosyası içinde oluştur.

New Style Sheet File: Yeni bir Css dosyası oluştur.

Biz “This document only” seçeneğini olduğu gibi bırakarak OK diyoruz.



Resim: dreamweaver-css-navi-03







#nav tagının kutu genişlik ve yükseklik değerlerini giriyoruz.



Resim: dreamweaver-css-navi-04







#nav tagının arkaplan renk değerlerini giriyoruz.





Resim: dreamweaver-css-navi-05

OK diyerek pencereleri kapatıyoruz.

Altta görüldüğü gibi “#nav” adlı tagımız ve buna ait stil tanımlaması oluştu.

Kırmızı işaretli yeri siliyoruz.



Resim: dreamweaver-css-navi-06







Yukardaki kodların tarayıcıdaki görünümü alttaki gibi olacaktır.





Resim: dreamweaver-css-navi-07







Resim: dreamweaver-css-navi-08

Şimdi ise “#nav” tagı içine linkleri yazacağız. Bunun için Dreamweaver Design bölümünde altta kırmızı yere bulunan Unordered List seçeneğine tıklayarak aktif hale getiriyoruz.





Altta görüldüğü gibi yazıyoruz.



Resim: dreamweaver-css-navi-09

Yazılardan sonra görünüm alttaki gibi olacaktır.



Resim: dreamweaver-css-navi-10







Altta görüldüğü gibi her menü öğesi seçilerek kırmızı işaretli yerde açılması istenen link adresi yazılacaktır.

Ben bu örnekte her menü adına ait bir html dosyasını link olarak verdim.





Resim: dreamweaver-css-navi-11

Yukardaki kodların tarayıcıdaki görünümü alttaki gibi olacaktır.



Resim: dreamweaver-css-navi-12







Şimdi sırasıyla <ul>, <li> ve <a> tagları için stil tanımlayacağız.

Bunun için önce kod sayfasından <ul> tagını seçiyorum ve sağ tarafta Css Styles panelinde kırmızı işaretli yerde bulunan + simgesine tıklıyorum.



Resim: dreamweaver-css-navi-13









Böylece altta görülen pencere karşımıza çıkar. OK diyor ve devam ediyoruz.



Resim: dreamweaver-css-navi-14







<ul> tagının margin ve padding değerleri 0 olarak ayarlanıyor.

Resim: dreamweaver-css-navi-15







List Style Type değeri “none” yapılarak menülerin yanındaki nokta simgesi kaldırılıyor.



Resim: dreamweaver-css-navi-16







OK dedikten sonra kodların tarayıcıdaki görünümü alttaki gibi olacaktır.



Resim: dreamweaver-css-navi-17







Yukarda <ul> tagı için nasıl stil tanımlaması yaptıysak aynı şekilde <li> tagı içinde tanımlamaya başlıyoruz.



<li> tagının görünümünün blok olmasını sağlıyoruz.



Resim: dreamweaver-css-navi-18

<li> tagının genişlik ve yükseklik değerlerini giriyoruz.

Float:Left ile de menülerin sola yaslanmasını yani yatay hizalanmasını sağlıyoruz. 



Resim: dreamweaver-css-navi-19







Yukardaki kodların tarayıcıdaki görünümü alttaki gibi olacaktır.



Resim: dreamweaver-css-navi-20







Yukarda <ul> tagı için nasıl stil tanımlaması yaptıysak aynı şekilde <a> tagı içinde tanımlamaya başlıyoruz.





Bu bölümde font bilgileri girilmektedir. 



Resim: dreamweaver-css-navi-21







Menünün arkaplan renk değeri girilmektedir.



Resim: dreamweaver-css-navi-22





Text Align:center ayarı ile menünün kutu içinde ortalı durması istenmiştir.

Display:block ayarı ile görünümün blok olması sağlanmıştır. 

Block seçilmez ise menünün kutu içinde sadece kendi kapladığı alan seçilmiş olur.





Resim: dreamweaver-css-navi-23







Yukardaki kodların tarayıcıdaki görünümü alttaki gibi olacaktır.





Resim: dreamweaver-css-navi-24

- Bugün Okunma Sayısı :0
- Toplam Okunma Sayısı :1