SePortal
Üye
Kullanıcı Adı:

Şifre:

Sonraki ziyaretimde beni otomatik kaydet!

Şifremi unuttum?
Kayıt



Site İçinde    


Gelişmiş arama

Ders Bölümleri
Dersler
En Çok İzlenenler
Son Eklenen Dersler
En Çok Beğenilenler
Tümünü Göster

Derslerde Ara


Dönüşümlü 10 Ders
Sigara Yapımı
CD Yapımı
Fireworks Şekillere Yazıları Dolamak
Micro Buton Yapımı
Arayüz Yapımı-1
Tab Menu Yapımı
3 D Küb Yapımı
Dişli-Çark Yapımı
Web'de Yayınlama (Hosting)
Flash da Mouse'a İz Yapmak

Site Bilgileri
Sitede 27 kategoride, toplam 93 ders,
Toplam 85 indirilebilir dosya, 63.832 kez indirilme,
Sitedeki derslere uyumlu 8 kategoride, toplam 52 link,
Forumlarda 697 konu, 1.406 ileti bulunmaktadır.
Sitede toplam 13.301 kayıtlı üyemiz var. En yeni üyemiz: asz

Şimdiye kadarki en yüksek aktif ziyaretçi sayısı: 311 - Tarih: 21.07.2016 19:15

Toplam ziyaret: 1.934.697
Bugünkü ziyaret: 0

Aktif Kullanıcılar: 1
Şu anda 0 kayıtlı kullanıcı (arasında 0 tanesi gizli) ve 1 ziyaretçi online.
Ana Sayfa / Dersler / Web Tasarımı / Tablolar, Frameler, Formlar / Web Tasarımı - Tablolar

Web Tasarımı - Tablolar
RSS Feed: Web Tasarımı - Tablolar (Dersler)
Eklenme Tarihi: 07.11.2005 - 21:39   (İzlenme: 56668)
Yorumları Oku (1)
Yorum Ekle
Dersi Yazdır / İndir
Yazdır

Sayfalar:

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 Offline robiin hekim_oglu.5 at hotmail.com

RSS Feed: Web Tasarımı - Tablolar (Dersler)

Google
 
Editörlerimiz | Link Bannerlarımız | Reklam | Site Amacı | Sık Sorulan Sorular | Yasal Uyarı & Kullanım Şartları
Sizden Gelenler | Site Haritası | Dosyalar