Tablosuz Tasarım Dreamweaver

merhaba ziyaretçiler tablosuz tasarımda menu yapımı , yanyana divler ve , class tanımlamayı öğreneceğiz,başlayalım…

Logo divi açıyoruz

divin nerede konumlanacağını ve adını giriyoruz yanlız asla türkçe karakterler kullanmıyoruz ve ilk açtığımız div,yani en üstteki  divi ekleme noktasında yapmayı unutmayın.

menu div

 

ardından yeni css kuralı-tamam ı tıkladıktan sonra divimize özellikleri verebiliriz,bu kısımda yapmamız gereken divimize yatay bi genişlik vermek,bunun için kutu bölümünden,width kısmını 800 yapalım ve divimizi ortalamak için sağ ve sol kısmını auto yapıyoruz,bunun için kullanmamız gereken özellik margin,margin dış boşlukları ayarlar.

div özellikleri logo

 

ardından tamamı tıklıyoruz ve devam edelim,

logomuz için divimiz hazır şimdi menu için div açalım

icerik

 

yeni css kuralı-tamam dedikten sonra logo divimizin özelliklerini bu divimizdede yapıyoruz ardından tamamı tıklatın.

 

 

 

 

şimdi içeriğimizin bulunacağı divimizi açalım

icerik

yeni css kuralı ve ardından aynı özellikleri yapıyoruz.

 

 

 

Yanyana Divler:

yanyana divler için class tanımlamamız gerekiyo

bunun için resimdeki gidi yapıyoruz

class tanımlama

önce style tıklayıp seçicilerden artıya tıklıyoruz ve çıkan yazıya .class yazıyoruz.yanlız başına nokta koymayı sakın unutmayın,ardından tanımladığınız class a özellik verelelim width:200 height:200 ve floath:left  özellikleri olsun

ardından yeni bir div açalım ismi kutu1 olsun ve etiket başlangıcından sonra yanyana divini seçelim iç içe div açmayıda bu şekilde öğrenmiş olduk iç içe div açmak için hangi divin içine ise onu seçiyoruz ve etiket başlangıcından sonra seçiyoruz

clas kutu1

bi kutu daha eklemek istersek  div düğmesine tıklayıp etiketten sonra kutu1 etiketinden sonrayı seceriz.ardından yeni css kuralı ve tamam ardından tekrar tamama tıklayıp ikinci kutumuzuda eklemiş oluruz.

 

 

Menü yapımı:

1)Her bir menü elemanını bir satıra gelecek şekilde yazmaya başlayalım.

menu 1

2)Sırasız listemizi oluşturduktan sonra her bir menü elemanımıza bir bağlantı vermemiz gereklidir.

Not: Bağ verirken ana sayfayı seçip bağ kısmına index.hml .

Hakkımızda yı seçip hakkımızda.html açılmasına sağlamış oluruz . Hepsini bu şekilde yapmalıyız.

 

3)Herhangi bir metin elemanını tıklıyoruz ve etiket bloğundan <ul> etiketini seçiyoruz.<ul> etiketini biçimlendirmek için iki şey yapıyoruz Bunlardan bir tanesi sırasız liste yani <ul> etiketinin sol kısmındaki var sayılan boşlukları kaldırmak. Bir diğeri ise her bir menü elemanının liste simgelerini kaldırmaktır.

4)Şimdi box kategorisine gelip ve padding değerine top:0 margin değerine top:0 yazıyoruz.

menu3

 

5)Son olarak list katogarisine geliyoruz ve list-style-type seçeneğinden none işaretliyoruz.

menu2

Bu şekilde <ul> etiketini biçimlendirmesini bitiriyoruz.

6)Şimdi yine herhangi bir menü elemanının üzerine tıklıyoruz ve etiket bloğunda <a> etiketini seçiyoruz.

7)Yeni css oluştur düğmesine gelinir ve okey düğmesine tıklanır.

8)Burada block kategorisinden display yani görünümü block olarak işaretlemeliyiz.

9)Box katogarisine geliyoruz ve with=150 height=30px yazıyoruz

menu6

10)Menü elemanlarını yan yana almak için float seçeneğinden left tıklanır ve yatay menümüz tamamlanmış olur.

11)Background gelip colordan bir renk veririz ve apply tıklanır.

12)Type kategorisine gelip color seçeneğinden yazı rengini değiştirmiş oluruz.

13)Font-weight den bold ayarlarız ve apply tıklıyoruz.

14)Text-decoration bölümünden none işaretliyoruz böylelikle menü elemanlarının alt çizgilerini kaldırmış oluruz.

15)Menü elemanlarının hizalanması için text-align seçiyoruz ve orada center tıklamalıyız.

16)Dikeyde hizalanması için box yüksekliği ile satır yüksekliği aynı olması gerekir bunun için type kategorisine geliyoruz ve line-height:30 px veriyoruz.

17)Box kategorisine geliyoruz ve margin boşluk değerini değiştireceğiz.Her bir menü elemanın sağına 5 px ekliyoruz ve ok düğmesine tıklıyoruz.

18)Dosya menüsünden kaydet tıklanır ve dosya adı index olarak kaydedilir. F12 ye basılarak sayfa test edilir.

 

19)Duplicate seçeneğini işaretliyoruz ve burada selector name yani seçici isminden sonra boşluk bırakmadan :hover yazıyoruz ve ok diyoruz. Bu şekilde yeni bir css oluşturmuş oluyoruz

a.hover

20)Şimdi bu yeni eklenen biçimlendirmeyi alt bölümde  ve yapılmasını istediğimiz değişiklikleri yaparız.

menu

Bu şekilde yatay menümüzüde tamamlamış oluruz.

 

 

 

 

Yazar: mhmtates42

sitemizde 3 yazı eklemiş...

Share