Web Tasarımı - Tablolar

Sayfalar: Sayfa Atla Sayfa [ (Tablolar 1)] Sayfa [ (Tablolar 2)]

FrontPage Express Programı ile Tabloları, terimlerini, tag larını, düzenlenmelerini, içlerine resimlerin ve yazıların nasıl yerleştirileceğini inceleyeceğiz.

Tablolar [1]
Tabloların satır ve sütunlarının arasında gördüğümüz bölümlere Cell (Hücre) denilmekledir. Diğer HTML öğelerimizi bu hücrelerin içine yerleştireceğiz. Ve Ahmet ile birlikte sayfasına devam edelim. Sayfasındaki yazılar ve resimlerin gürünüşünü pek de iyi bulmayan Ahmet de tablolar yardımıyla bunu gerçekleştirecek. FrontPage Express ile sayfasını yükledikten sonra sayfasın da boş bir vere tıklayıp Tablo Menüsünden Tablo Ekle özelliğini seçti. Burada karşımıza gelen özellkleri inceleyelim: Satır (Rows): Tablomuzun kaç satır olacağını belirler. Sütun (Coloums): Sütunların sayısını ayarlar. Unutmayın ki satır ve sütun sayısını istediğimiz zaman ekleyip çıkartabiliriz. Hizalama (Alignment): Tablomuzun sayfa içerisindeki yerini belirler. Varsayılan seçim en ideal yeridir. Kenarlık Boyutu (Border Size): Satırlar ve sütünların yanlarında göreceğimiz kenarlıkların boyutudur. Ancak browserlar tarafından belirlenen bu kenarlıklar pek de hoş görüntü vermez. Onun için bu boyutu 0 yapmamız tasarımda görünümü güzelleştirecektir. Varsayılan değer 1' dir. Hücre Doldurması (Cell Padding): HTML öğelerinin (resimler, yazılar vb.) Hücre sınırından  ne kadar içeride başlayacağını gösterir. Başka bir deyişle HTML öğeleri, hücre sınırından burada belirleyeceğiniz sayı kadar alttan ve üstten boşluk bırakılır. Varsayılan değeri 2' dir. Hücre Aralama (Cell Spacing): Hücreler arasında kalacak boşluğu belirler. Varsayılan değeri 2' dir. Genişliği Belirt (Table Width): Tablonun sayfa üzerindeki genişliğini belirler. 640x480 çözünürlükleki bir kullanıcının sayfayı görebilmesi için ideal 550 piksel'dir.800x600 için 700 piksel olarak kullanabilirsiniz. Yüzde kullanım ise sayfanın bakılan çözünürlük ne olursa olsun tabloyu, görünen sayfanın yüzde değeri kadar gösterir. HTML 4.0 standardı ile birlikte Tablo yüksekliği komutu gelmiştir. Front-Page Express'te belirtilmemiş olan bu özelliği FrontPage, Macromedia Dreamweaver vb, Programlar kullananlar bu özellikleri görebilir. FrontPage Express'te Tablo Ekle bölümünde Uzatılmış bölümüne girip Tablo Ekle'ye tıklayın. Ad hanesine height, Değer hanesine ise piksel cinsinden istediğiniz bir değeri ya da yüzde olarak istiyorsanız da değer % şeklinde yazın (Örneğin: 100%). Bu özelliği <TABLE> komutunu açıklarken göreceğiz. Tablo yüksekliği yeni standartlarda bulunduğu için her browser tarafından doğru algılanmayabilir.	"Tamam"a bastığınızda tablomuzun eklenmiş olduğunu göreceksiniz. FrontPage Express'de Tablo kenarlıkları 0 olsa dahi sizin görmeniz açısından buralar kesikli çizgilerle gösterilmektedir. Şimdi Ahmet resmini Tablonun hücrelerinden birine koyup diğer yazılarını kenara koymak istiyor. Tabi resminin olduğu hücreye bir de menü eklemek niyetinde. Şimdi Ahmet ile beraberce yapalım. Önce 2 sütunlu bir satırlı bir tablo açalım. Tablonun boyutu 530 piksel olsun ve kenarlığı da olmasın, ilk yapıldığında eşit gözüken hücrelerin birinin içine tıklayıp, yanıp sönen imleci orada gördükten sonra da sağ tıklayarak Hücre Özelliklerine gelelim. Yatay Hizalama: Hücremiz içindeki öğelerin hizalamalarını belirler. Dikey Hizalama: Öğelerin hücre içerisindeki dikey hizalamayı ayarlar. Üst olması tavsivemizdir. Böylelikle aynı satır içindeki diğer hücrelerdeki öğelerin uzunluğu artınca bu hücremizdeki öğelerimiz yer değiştirmezler. En az genişlik: Hücremizin en az genişliğini belirler. Hücrelerin genişlikleri belirtilmediği takdirde Tablomuz içindeki yerleri çok karışık olabilir. Kenarlık renkleri: Kenarların renklerini belirler... Özel Artalan: Hücrelerinizde de tıpkı web sayfalarınız gibi artalan resmi veya artalan rengi kullanabilirsiniz. Tıpkı sayfalarımızın renklerinde olduğu gibi hücrelerin artalanlarında da dikkatli olmalısınız. Gelin şimdi sayfamıza Ahmet'nin yaptığı gibi tablomuzu ekleyelim. Ahmet sayfasında tek satır ve iki sütunlu bir tablo açtı. En baştaki hücreye tıkladı ve en fazla genişligini 150 olarak belirledi. Diğer hücrenin de tam olarak görünmesi için 550 - 150 = 400 olarak seçti. Hücre doldurmasını 3 ve Hücre aralığını 2 olarak seçti ve tabii ki kenarlıkları 0 olarak belirleyerek kenarlık çıkmamasını sağladı. Hücre artalanı olarak pastel bir renk seçti ve resmini sürükle bırak yöntemiyle hücrenin içerisine koydu. Hücrelerin üst sınırına geldiğinde çıkan aşağı ok tuşunu kullanarak hücreyi seçip, dikey hizalamalarını "Üst" olarak seçti. Resminin bulunduğu hücreye bir Tablo daha koyalım. Bu sefer buraya daha önceden yaptığımız menümüzü yerleştireceğiz. Tabloyu yaptığımız anda oldukça geniş olduğunu göreceksiniz. Tahmin ettiğiniz üzere sebebi yine boyut. Üst hücremizin boyutunu 150 ve de hücre doldurmasını 3 yapmıştık. Sağdan ve soldan olmak üzere Toplam 6 piksel boşluk olduğuna göre yeni Tablomuzun genişliği 146 olmalıdır. Yeni Tablomuzda her hücremize daha önce öğrendiğimiz şekilde linklerimizi kullanalım ve sayfamızı kaydedip son haline bir bakalım. Sayfamız biraz renklendi. Şimdi iş biraz da hayal gücümüze kalıyor. Tablo uygulamalarına devam edelim.
Tablomuzun tüm özelliklerini Tablo Ekle Menüsü bize sunmakta	Hücre özellikleri ekranı, hücrelerimizin şıklığını arttıracak tüm özellikleri barındırıyor.

Yazan: Yorum: robiin Üye Kayıt Tarihi: 05.06.2007 Yorumlar: 1 slmmmm helal be kardeş walla bu yaptığını anaokulu çocukları bile yapar e bilir 05.06.2007 21:15

	Arama terimlerinizi girin Arama formu gönder
	Web www.aeystudio.com