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.
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.
ardından tamamı tıklıyoruz ve devam edelim,
logomuz için divimiz hazır şimdi menu için div açalım
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
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
ö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
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.
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.
5)Son olarak list katogarisine geliyoruz ve list-style-type seçeneğinden none işaretliyoruz.
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
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
20)Şimdi bu yeni eklenen biçimlendirmeyi alt bölümde ve yapılmasını istediğimiz değişiklikleri yaparız.
Bu şekilde yatay menümüzüde tamamlamış oluruz.
- Div Türleri 4 Tane Div Türü Vardır 1-static=en cok kullanılan div türüdür tanımlandığı yerde kullanılınır tanımlanyan
- Web Sitesi Nasıl Yapılır ? İlk olarak web sitemizi yapmak için dreamweaver programını çalıştırıyoruz ve aşağıdaki gibi bir ekran
About Author