ForumTayfa  

Go Back   ForumTayfa > Güvenlik & Bilgisayar & İnternet & Webmaster & Programlama Bölümü > Güvenlik & Bilgisayar & İnternet & Webmaster & Programlama > ASP, Perl, Php, Html

ASP, Perl, Php, Html ASP, Perl, Php, Html, Java gibi her tür programcılık dili için yardım alabilceğimiz bölüm...

Yeni Konu aç  Cevapla
 
LinkBack Seçenekler Stil
Alt 01.02.07, 13:50   #1 (permalink)
Yeni Tayfa
 
long_time_03 - ait Kullanıcı Resmi (Avatar)
 
Üyelik Tarihi: Jan 2007
Nereden: AfYoN
Mesaj Sayısı: 126
Konu Sayısı: 57
Rep Gücü: 233
Rep Puanı: 21927
Rep Derecesi : long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000long_time_03 0-250000
Ruh Hali:

Smile hTML Tablo Tasarımı




Tablo Tasarımı

Önceki sayfada tablo yapmayı ve biçimlendirmeyi öğrenmiştik. Şimdi hem bu öğrendiklerimizi kullancağız, hem tablo tasarlamayı öğreneceğiz, hem de web sayfası yerleşimi konusundaki deneyimlerimi sizlerle paylaşacağım.

Bir önceki bölümde tasarladığımız tabloların hepsi her satırında aynı hücreye (sütuna) sahip, düzgün ve basit tasarımlı tablolardı. Şimdi ise karmaşık tasarımlı tablolar yapmayı öğreneceğiz.

Birden Fazla Satır ve/veya Sütun Kaplayan Hücreler

Önce iki tane parametre öğreneceğiz, bunlardan ilki: rowspan parametresi. Bu parametre <td> kodu ile kullanılır. Bu kod bu hücrenin kaç satır kapladığını belirtir. Bir örnek yapalım hemen.



codeDivStart()Kod:
<html>
<head>
<title>Rowspan Parametresi</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%" rowspan="2">Bu hücre iki satır kaplıyor.</td>
<td width="30%">Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>

</body>
</html>




Şimdi geldik "ne yaptık?" sorusuna. Önce ilk hücreye rowspan="2" değerini koyduk. Böylece ilk hücrenin iki satır kaplamasını sağladık. Bu nedenle alt satırda sadece iki hücre tanımladık; zira ilk hücre ikinci satırda da bir hücrelik yer kaplıyor. Peki benzer bir örnek yaparak bilgilerimizi pekiştirelim. Ortadaki hücre üç satır kaplasın:



codeDivStart()Kod:
<html>
<head>
<title>Rowspan Parametresi 2. Örnek</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%">Data</td>
<td width="30%" rowspan="3">Bu hücre üç satır kaplıyor.</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
</tr>
</table>

</body>
</html>


Daha iyi anladık sanırım. Bu sefer ilk satırdaki ortanca hücreye üç satırlık değer vermek için <td> koduna rowspan="3" parametresi atadık. Sonraki iki satırda ise bu nedenle birer hücrelik boşluk bıraktık.

Sıradaki parametremiz colspan; bu parametre de <td> koduna atanıyor. Bu parametrenin işlevi, bir hücrenin iki sütun kaplamasını sağlamaktır. Yani rowspan parametresinin satırlara yaptığını, colspan parametresi sütunlara yapmaktadır. Hemen bir uygulamayla gösterelim:



codeDivStart()Kod:
<html>
<head>
<title>Colspan Paramteresi</title>
</head>
<body>

<table border="1" cellspacing="0" cellpadding="2" width="90%">
<tr>
<td width="30%">Data</td>
<td colspan="2">Bu hücre iki sütun kaplıyor.</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>

</body>
</html>




N'aptık? İlk satırın ikinci hücresine colspan="2" parametresi atayarak, bu hücrenin kendisinden sonraki hücreyi de kaplamasını sağladık. Bu nedenle ilk satırda üçüncü bir hücre belirtmedik. Sanırım iki parametreyi de anladık. (Di mi?)

Web Yerleşim Tabloları

Şimdi öğrendiğimiz tablo tekniklerini, web sayfalarının yerleşim planı için kullanalım. Örneğin aşağıdaki uygulamaya bir bakalım:



codeDivStart()Kod:
<html>
<head>
<title>Web Tasarım</title>
</head>
<body>

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top">Bu renkli bölüme genellikle logolar, yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
<td valign="top"> Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
</tr>
</table>

</body>
</html>


Bu tasarımın olumlu ve olumsuz yönlerini inceleyelim. Bu tasarım iki bölümden oluşuyor, ilk bölüm hiperlinklerin, logoların, yönlendiricilerin bulunacağı bölüm, diğeri ise metinlerin bulunacağı bölüm. Renkler güzel seçilmiş, uyumlu ve gözü yormuyor. İkinci bölümde metinler, resimler, anlatılar ve donatılar yer alıyor, bu nedenle beyaz rengi seçilmiş olması da artı bir puan. Ayrıca anlatı kısımı pencereye göre genişleyip, daralabiliyor, bu da olumlu. Sıra geldi olumsuz yönlerine. İlk renkli bölüm pencerenin soluna tamamen bitişik değil ve çok kötü görünüyor. Ayrıca ikinci bölümdeki yazılar ile pencere ve ilk bölüm arasında hiç boşluk yok, bu da hiç güzel görünmüyor. İlk renkli kısımda da yazılar sol tarafa yapışmış. Şimdi bu sorunlar için çözümler geliştirelim:

* Web sayfalarında HTML varsayılan değer olarak pencere kenarlarında bir miktar boşluk bırakır. Genelde web tasarımcıları bu tür boşluklardan hoşlanmaz ve bu boşlukları yok etmek için <body> koduna şu parametreleri atarlar leftmargin="0" topmargin="0".İleriki sayfalarda <body> koduna atanan parametreler ayrıntılı olarak gösterilecektir.
* Sol renkli kısımda yazıların kenarlara yapışmamasını engellemek için, tablo içinde tablo yöntemini kullanabiliriz. Bu bölüm 180 piksellik tablodan ibaret. Bu tablonun içine 160 piksellik tabloyu ortalayarak koyarsak bu işi de halledebiliriz.
* Sağ taraftaki anlatı kısmını oluşturan tablonun içine üç sütunlu yeni bir tablo eklersek ve birinci sütun ile ikinci sütuna 20 piksellik genişlik atayıp, orta sütunu esnek bırakırsak (yani bir genişlik belirtmezsek), bu bölümdeki yazıların sol kısıma ve sağdaki pencere kenarına en az 20 piksellik aralık vermiş oluruz.

Tabi bu çözümler olası tek çözüm değil, sizler alternatif çözümler de geliştirebilirsiniz. Şimdi geliştirdiğimiz bu çözümleri HTML kodlarına dönüştürelim:



codeDivStart()Kod:
<html>
<head>
<title>Web Tasarım</title>
</head>
<body topmargin="0" leftmargin="0">

<table border="0" cellspacing="0" cellpadding="0" width="100%" height="100%">
<tr>
<td width="180" bgcolor="#FAF0E6" valign="top" align="center">
<table border="0" cellspacing="0" cellpadding="0" width="160">
<tr>
<td><br>Bu renkli bölüme genellikle logolar, yönlendiriciler, hiperlinkler, reklamlar vb. konulur.</td>
</tr>
</table>
</td>
<td valign="top">
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width=20>&nbsp;</td>
<td><br>Buraya metinsel dokümanları, resimleri, anlatı araçlarını ve donatıları koyabilirsiniz.</td>
<td width=20>&nbsp;</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>



__________________
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
[Sadece Kayıtlı Kullanıcılar Linkleri Görebilir.Kayıt Olmak İçin Tıklayınız...]
long_time_03 isimli Üye şimdilik offline konumundadır   Alıntı ile Cevapla
Cevapla


Konuyu Toplam 1 Üye okuyor. (0 Kayıtlı üye ve 1 Misafir)
 
Seçenekler
Stil

Yetkileriniz
Konu Acma Yetkiniz Yok
Cevap Yazma Yetkiniz Yok
Eklenti Yükleme Yetkiniz Yok
Mesajınızı Değiştirme Yetkiniz Yok

BB code is Açık
Smileler Açık
[IMG] Kodları Açık
HTML-Kodu Kapalı
Trackbacks are Açık
Pingbacks are Açık
Refbacks are Açık



Tüm Zamanlar GMT +3 Olarak Ayarlanmış. Şuanki Zaman: 04:40.


Powered by vBulletin® Version 3.8.0
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.6.0
User Alert System provided by Advanced User Tagging v3.0.6 (Lite) - vBulletin Mods & Addons Copyright © 2020 DragonByte Technologies Ltd.
ForumTayfa

Arşiv: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 16 22 23 24 25 26 27 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 95 96 97 98 99 100 102 103 104 105 106 155 156 157 158 159 160 161 162 163 164 167 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271


ForumTayfa - Link Değişimi
Telinka İletişim | Voip Ürünleri | Link Değişimine Katılın |

Sitemiz bir forum sitesi olduğundan dolayı, kullanıcılar her türlü görüşlerini önceden onay olmadan anında siteye yazabilmektedir. ForumTayfa Yöneticileri mesajları itina ile kontrol etse de, bu yazılardan dolayı doğabilecek her türlü sorumluluk yazan kullanıcılara aittir. Yine de sitemizde yasalara aykırı unsurlar bulursanız [email protected] email adresine bildirebilirsiniz, şikayetiniz incelendikten sonra en kısa sürede gereken yapılacaktır.

Any member of our web site has the right of adding comments instantly without getting permisson due to the forum structure of our site basis. Althought, our site modarators check comments with care, all the responsibilities sourced from these comments directly belong to the members. If you still find any illegal content in our site ( A.buse, H.arassment, S.camming, H.acking, W.arez, C.rack, D.ivx, Mp.3 or any Illegal Activity ), please report us via [email protected] .Your reports will be evaluated as soon as the arrival of your e-mail.