Bu dersimizde Dreamweaverda tablo oluşturma ve tablo özelliklerini öğrenicez.

Dreamweaverda tablo eklemek için insert-table (CTRL+ALT+T) sekmesini ya da common sekmesi altında bulunan tablo butonunu kullanırız.

Karşımızı resimdeki gibi bir pencere çıkıcak.

Rows : Satır sayısını buraya giriyoruz.

Columns : Sütün sayısını buraya giriyoruz.

Table width : Bu kısma tabla kenişliğini giriyoruz.Burada bulunan percent seçeneği girdiğiniz değeri yüzde olarak algılayacaktır.Bu kısma 75 değerini verdiğimizde sayfanın %75ini kaplayacaktır.Diğer seçenek ise pixel olarak göstermektedir.

Border : Tablo kenar kalınlığı değerini giriyoruz.

Cell Padding : Bu hücre içindeki materyalin duvarlarına olan uzaklığı olarak yorumlanabilir.

Cell Spacing : Hücreler arasında bulunan boşluğu ifade eder.

şimdilik bu bilgiler işimizi görecektir.

Oluşturduğumuz tabloyu seçtikten sonra aşağıdaki gibi properties panelini göreceksiniz.

Bu bölümde yukarıda belirttiğimi kısımları ayarlayabilirsiiz.Ek olarak tablomuzun bg rengini,bg resmini ve border rengini buradan ayarlayabiliriz.

Oluşturduğumuz tablodan herhangi bir hücrenin içinde bir yere tıklayalım.Ardından aşağıda properties panelini göreceksiniz.

1. Font ayarını yapacağımız kısım
2. Eklediğimiz yazı ya da resmin yatay olarak konumunu ayarladığımız kısım.(center:ortalama ,left: sola yaslama ,: rigt : sağa yaslama)
3. Eklediğimiz yazı ya da resmin dikey olarak konumunu ayarladığımız kısım.(top:tepeye , bottom : en dibe , middle : ortaya )
4. Font boyutunu ayarladığımız kısım.
5. Tabloya uygulanacak CSS stilinin bulunduğu kısım.
6. Hücre genişliğini pixel cinsinden ayarladığımız kısım.(yüzde olarak ayalamak için örnek: %10 şeklinde girilmelidir.)7. Hücre yüksekliğini pixel cinsinden ayarladığımız kısım.
8. Font rengini ayarladığımız kısım.
9. Link verdiğimiz kısım.
10. Hücremiz için background resmi seçeçeğimiz bölüm.
11. Hücremiz için bacground rengi ayarlayacağımız bölüm
12. Border rengini ayarladığımız bölüm.

Hücreleri bölme ve hücreleri birleştirme.

Hücreleri bölme : Bölmek istediğiniz hücrenin içine tıklayın.Daha sonra yukarıdaki resimde properties bölümünde bulunan 2 numaralı okla belirtmiş olduğum butona tıklayın.Rows satır,columns sütün sayısını arttırır.

Hücreleri Birleştirme : Birleştirmek istediğiniz hücreleri seçin ve 1 numaralı okla belirtmiş olduğum butona basın.

Şimdilik bu kadar.Bu dersimiz dreamweaver ile web sitesi yapma derslerimizde işinize yarayacaktır.

1.Link color :Link vereceğiniz yazının rengi.
2.Rollever links :Linkin üzerine geldiğinizde oluşacak olan renk.
3.Visited links :Daha önceden tıkladığınız linklerin alacağı renk.(bu kısmı boş bırakabilirsiniz.)
4.Active links:Şuanda etkin olan sayfanın linki.(bu kısmı boş bırakabilirsiniz.)
5.underline style :Linkin üzerine geldiğinizde olucak olan stiller.

Never underline : Hiç bir zaman linkin altını çizme.

Always underline :Her zaman linkin altını çiz.

Show underline only on rollever :Sadece linkin üzerine geldiğinde altını çiz.

Hide underline on rollover :Linkin üzerine geldiğinde çizgiyi kaldır.

Dreamweaverda resmin yanına yazıyı yazabilmemiz için resim üzerinde bir kaç ayar yapmamız gerekecek.

Resmin üzerine tıklayın ve alt kısımda bulunan properties panelinde gördüğünüz özellikleri uygulayın.

Align ile resmin hangi tarafta kalacağını belirledik.Ben Sol(left) tarafı seçtim. H space ile resmin her iki tarafında ne kadar boşluk olacağını belirledik.Aksi taktirde resimler yazı ile dipdibe oluyor.V space de aynı şekilde resimde üst ve alt kısımdan boşluk bırakmak için.

İlk olarak CTRL+ALT+T kısayolu ile genişliği 500px olan ve 3 satır ve 3 sutundan oluşan bir tablo oluşturalım.tablomuzu seçtikten sonra aşağıdaki properties bölümünden cellpad, cellspace ve border değerlerini sıfır olarak girelim.
Bu kısımların ne işe yaradığını bilmiyorsanız dreamveaverda tablo oluşturma ve tablo özellikleri adlı makalemize bir göz atın.

Şimdi tablomuzu seçelim ve split tuşuna basalım.Bu bölüm bize hem tasarımımızı hemde kodları gösteren bir arayüz sağlıyor.

Çalışmamızın kod kısmında aşağıdaki kodların seçili olduğunu göreceksiniz.

<table width="500" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

tablo özelliklerimizin olduğu kısım

<table width="500" border="0" cellpadding="0" cellspacing="0">
 

Şimdi tablomuzun kenarlarına nasıl kesikli çizgi oluşturacağımıza gelelim.

yukarıdaki kod kımında bulunan border=”0″ kodunu silip yerine aşağıdaki kodu yazalım.

style="border:1px dashed #FF0000" >
 

Bu kod ile tablomuza 1px boyutunda , renk kodu #FF0000 olan ve stili dashed(kesikli çizgi) olan bir border vermeiş olduk.

Peki tablomuzun sadece alt tarafına border uygulamak istersek ne yapacağız ?

style="border:1px dashed #FF0000" >
 

Bu kısımda border yazdığımız yere border-bottom yazmak yeterli olacaktır.Border seçeneğini seçtiğimiz adımdaborder-bottom,border-left,border-rigt ve border-top gibi seçenekler yer almaktadır.Bunlardan birini seçerek istediğimiz tarafına border uygulayabiliriz.

Peki aynı anda sadece sağ ve sol tarafına nasıl border uygulayacağız.

Bunun için aşağıdaki kodu kullanıcaz.

style="border-right:1px dashed #CC3333 ; border-left:1px dashed  #CC3333" >
 

kodda gördüğünüz gibi noktalı virgül ile ayırarak üçünçü bir tarafa yeni bir border ekleyebiliriz.

Tabloya nasıl border stilleri uygulayacağımızı gördük şimdi de istediğimiz herhangi bir hücreye nasıl border ekleyeceğimiz görelim.

Oluşturduğumuz tablonun herhangi bir hücresinin içine çift tıklayarak seçili hale getirelim ve split sekmesine tıklayalım.

<td>&nbsp;</td>

Seçtiğim hücrenin içi boş olduğu için yukarıdaki kod seçili olacaktır.

yukarıda
table tagları arasına yazdığımız kodları bu sefer

td tagları arasına yazıyoruz.

<td style="border:1px dashed #CC3333">&nbsp;</td>

Ben sadece dashed stilini tanıttım diğer stilleri deneyerek nasıl bir görüntü verdiğini görebilirsiniz.

dotted border Stili – Noktalı Çizgi

dashed border Stili – Kesik Çizgi

solid border Stili – Düz Çizgi

double border Stili – Çift Düz Çizgi

groove border Stili – İçe Kabarık Çizgi

ridge border Stili – Dışa Kabarık Çizgi

inset border Stili – İçe Gömülü Çizgi

outset border Stili – Dışa Gömülü Çizgi