ALTI ÜSTÜ TASARIM – Mehmet Doğan

Gobegi Eritmek 1

28 Şubat 2005

Kilo verme kararinizi bir onceki yazimi okuduktan sonra verdiniz. Esofmalari giydiniz. "CSS Diyet" merkezine hosgeldiniz.

Antremana baslamadan once birkac seyi belirtmek istiyorum. Bir websitesi icin kullanilmasi gereken standart, CSS tabanli tasarimdir. Tablo, tamamen baska bir fonksiyonu temsil ederken, biz tasarimcilar, HTML’in yetersizligi nedeniyle, tablolari, tasarim yapmak icin kullanmaya basladik yillar once. Fakat bu, CSS 2 ve standartlari destekleyen browser kullanicilarinin artmasi ile degisti artik. CSS tabanli tasarim, su an Internet’te gorebileceginiz en saglam, kaliteli tasarimdir. Artik tablolari terk etmenin zamani geldi.

Bunlari soyledikten sonra, bu antreman size CSS tabanli tasarimi ogretmeyecek. Tablolarinizi ve diger HTML aliskanliklarinizi nasil zayiflatabileceginizi gosterecektir.

Bircok tasarimci, CSS’in ne amacla kullanildigi az ya da cok biliyor. Hatta bircok tasarimci, font ve renk gibi ozellikleri CSS dosyalarinda tanimliyor. Halbuki CSS’den, tablolar ile tasarlanmis bir sitede daha da cok yararlanilabilir. Yanlizca renk ve font yaninda daha bircok ozellik, CSS dosyasina yerlestirilebilir.

Gelin lafi uzatmalayalim ve isinma hareketlerine baslayalim. Ben bu CSS diyetinde Diyetmax sitesi uzerinde calisacagim. Siz kendi sitenizde ki bir sayfa uzerinde, ya da benimle ayni site uzerinde calisabilirsiniz. Oncellikle yapmamiz gereken, sitenin yapisal ozelligini cok iyi bir sekilde anlamak. Yani tablolar nasil kurulmus? Hangi tablo, hangi tablonun icinde yer aliyor? Acaba bu tablolardan herhangi birini silebilir miyiz? Tablo hucrelerinden (TD) tasarruf saglayabilir miyiz?

Bu sorularin cevabini anlamanin en kolay yolu, sayfanin icine yerlestirecegimiz "Teshis CSS" dir. Sayfanizi bir Tekst Editoru (Homesite ya da benzeri) icinde aciniz ve TITLE elementinin altina sunlari yaziniz:

1. <style>
2. table {border:2px solid red; margin:4px;}
3. td {border:1px dotted purple; padding:2px;}
4. </style>

Bu CSS kodu bizim tablolarin nasil yerlestirildigini daha iyi gormemizi saglayacak. Sonuc surada goreceginiz gibi olmalidir.

Ben "Teshis CSS" yardimi ile sayfamda 8 tane tablo oldugunu ve bu tablolarin nasil yerlestirildigini rahat bir sekilde gorebiliyorum. Daha sonra yapacagimiz islem ise her tabloya bir "KIMLIK" vermek. Kimlik vermek icin kullanicaginiz HTML elementinin adi ise id.

ID elementinde birkac noktaya cok dikkat etmeliyiz:

• ID ler yanlizca harflerden olusmalidir.
• Bir kere kullanilan bir ID, ayni sayfa icinde bir daha kullanilmamalidir
• ID ler anlam icermelidir. id=kirmizi yerine id=baslik demek daha dogru olacaktir cunku ileri ki bir tarihde sitemizdeki tum "kirmizi" renkli basliklari "siyah" yaptigimizda id miz halen bir anlam icerektir.

Iste sayfamda yer alan ilk tablonun eski hali

1. <TABLE width="800" border="0" align="center" cellpadding="0" cellspacing="0">

Ve id verilmis yeni hali ise:

1. <table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="masthead">

Tum 8 tabloya da id verdikten sonra, yapacagimiz diger bir ekleme ise DOCTYPE eklemesidir. (Biliyorum, icinizde "hani biz sayfayi zayiflatacaktir ama onun yerine bir dolu sey ekliyoruz" diyorsunuz. Haklisiniz... Ama bu eklemeler, saglam bir HTML yapisi icin gerekli eklemeler. Bu gerekli eklemeleri yaptiktan sonra, gereksiz HTMLi sayfamizdan atacagiz.)

En kisa tanimi ile DOCTYPE, bir sayfanin cinsini bize gosteren bir isaretlemedir. Maalesef cok ihmal edilen bu HTML elementi, son zamanlarda, ozellikle web standartlari ile birlikte buyuk bir onem kazanmistir. DOCTYPE bize, bir sayfanin, hangi HTML versiyonunu kullandigini, hangi teknoloji ile yazildigini gosterir. DOCTYPE ile birlikte, gelecekte ki olabilecek gelismelere sayfanizi hazirlamis olmakla birlikte, sayfanizi "onay motorlarindan" basari ile gecmesi icin gerekli bir elementtir. Ayrica DOCTYPE ile birlikte, daha onceki yazimda bahsettigim "Kutucuk Problemi" ne karsi sitenizi bagimli bir hale getirmis olursunuz. IE 6, DOCTYPE'i belirlenmemis bir websitesinde "Garip Mod"da calismakta iken eger DOCTYPE sayfaya eklenirse "Standart Mod"da calisiyor ve boylece, "Kutucuk Modeli yazimda gostermis oldugum teknige gerek kalmiyor.

Bunlari soyledikten sonra, gelin DOCTYPE elementini uzerinde calistigimiz sayfaya ekleyelim:

Sayfanin DOCTYPE eklenmemis hali:

1. <HTML>
2. <HEAD>

Ben sayfanin FRAME kullanmadigini ve HTML 4.01 ile yazildigini bildigimden, asagidaki DOCTYPE ekledim. Eger siteniz FRAME ya da XHTML kullaniyorsa baska bir DOCTYPE eklemeniz gerekecek. Iste size uygun DOCTYPE i bulabileceginiz liste iste burada verilmis.

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2. "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>

Bu arada DOCTYPE eklemekle birlikte, HTML ve HEAD elementlerini de kucuk harfle yazdim. Ileride eger sayfayi XHTML’e donusturmek istersem, bu yaklasim bana yardimci olacak cunku XHTML’de her HTML elementi kucuk harfler ile yazilmak zorunda.

Bu yazi icinde son yer alan sayfa uzerinde son yapacagimiz degisiklik ise JavaScript kodlarini "dahili" kod yerine "harici" kod haline donusturmek. Eger sayfanin koduna bakarsaniz goreceksiniz ki JavaScript sayfa icinde gomulmus bir durumda. Bu kodu secin, tekst editorunuz icinde yeni bir sayfa acin, kodu onun icinde yapistirin ve dosyayi script.js diye saklayin. Yeni dosyanin sekli su sekilde olmalidir.

Yukarida sozunu ettigim degisiklikleri yaptiktan sonraki goruntu soyle olmalidir (ekstra birkac META elementi de ekledim):

1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2. "http://www.w3.org/TR/html4/loose.dtd">
3. <html>
4. <head>
5. <title>Diyetmax Turkiye</title>
6. <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
7. <meta name="description" content="Diyetmax Turkiye ile ilgili birkac kelime">
8. <meta name="keywords" content="diyet, kilo, kilo vermek, yemek, zayiflamak, patch">
9. <meta name="Author" content="Diyemax">
10. <script language="javascript" type="text/javascript" src="script.js"></script>
11. </head>

Bir sonraki yazida CSS’in kurulumunda ve uygulanmasindan bahsedecegim.