Bir objenin (kutunun) tьm geniюliрi; iзerik (content area) + зerзeve kalэnlэрэ (border) + kenar boюlularэ (padding) deрerlerinin toplamэna eюittir. Yani CSS’de “width: 300px” olarak belirtilen bir DIV etiketinin geniюliрi sadece iзerik alanэnэn (content area) belirtir. Eрer bu DIV etiketinin зerзeve kalэnlэрэ 1 piksel ve iзeriрin DIV sэnэrlarэna olan uzaklэk bilgisi (padding) de 10 piksel ise bu DIV etiketinin toplam kapladэрэ alan:
sol зerзeve+sol boюluk+iзerik+saр boюluk+saр зerзeve
1+10+300+10+1=322 pikseldir.
CSS kutu modeli юematik gцrnьmь
Modern tarayэcэlar Standart mod ile зalэюэrken bunu algэlayэp yaptэрэnэz biзimlendirmeleri buna gцre yorumlarlarken, diрer taraftan Garip mod ile зalэюэrken eski tarayэcэlar gibi yorumlarlar.
Eski tarayэcэlarda ise bu 300 piksellik geniюlik DIV etiketinin toplam geniюliрini bildirir ve iзeriрin geniюliрi, kenar boюlularэ ve зerзeve geniюliрi bu deрerden зэktэktan sonra kalan deрere (300-22=278 piksel) eюittir. Web tasarэmэ ile ilgilenmeye baюlayan birзok kullanэcэ yaюadэрэ basit sorunlarэn neden kaynaklandэрэnэ, sayfalarэnэ geзerli flourishing getirmeye зalэюэrken gцrebilirler.
Geзerli kodlar
Bu konu, sayfalarэmэzэn tarayэcэlar tarafэndan daha kolay ve doрru yorumlanmasэ ve yaptэрэmэz hatalarэ daha kolay algэlayэp mьdahale etmemizi saрlamasэ aзэsэndan oldukзa цnemli bir yere sahiptir. fleshy
Цrneрin bir etiketi (HTML tag) kullanэlmamasэ gereken bir yerde kullanэldэрэnda bu standartlara uygun olmayan bir sayfadэr ve muhtemelen tarayэcэ tarafэndan hatalэ yorumlanmaya sebep olan bir durumdur. Acemi kullanэcэ bu geзerlilik kuralэnэ sayfasэna uyguladэрэnda yaюadэрэ sorunu da halletmiю olacaktэr.
Bu geзerlilik kurallarэ entanglement geliюtiricilerin iюlerini kolaylaюtэrmak ve standart bir kod yapэsэ ile uyumluluрu arttэrmak amacэ ile konmuюlardэr. ]” baюlэklэ nefis makalesinden alabilirsiniz. Neden sayfalarэmэzэ geзerlememiz gerektiрi ve bunun iзin yapabileceklerimiz hakkэnda daha detaylэ bilgiyi Roger Johansson’эn “[Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir.
Sayfalarэmэzэn standartlara uygun olup olmadэрэnэ W3C (web komisyonu) [Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir. ] kontrol ettirebilir hatalarэmэzэ daha yakэndan gцrebiliriz.
Evet, biraz uzun bir giriю oldu fakat yeni bir sayfa yapmaya baюlamadan цnce bunlarэ gцz цnьnde bulundurmamэz gerekmektedir.
Dreamweaver ile Sayfa Ara Yьz (Layout) Tasarэmэ
Sayfamэzэn tasarэmэnэ yaparken tablolar yerine CSS ve DIV kullanacaрэmэzэ belirtmiюtik. Юimdi uygulamaya geзebiliriz.
Birзok yeni baюlayan kullanэcэnэn yaюadэрэ en bьyьk handikaplardan biri olan tasarэmda istenilen objenin istenilen yere yerleюtirilememesi ve hizalanamamasэ sorununu aюmak iзin CSS kullanacaрэz. Tabi bunun iзin en azэndan temel CSS bilgisine ihtiyacэmэz var. Bu makalede CSS bilgisine girip konuyu fazla daрэtmak istemiyorum.
Fakat burada bahsi geзen uygulamalarэ anlayabilmeniz iзin ilgili CSS kaynaklarэndan kendinizi geliюtirmenizi юiddetle tavsiye edeceрim. Genel olarak temel noktalara deyineceрim. Aksi takdirde sцz ettiрimiz юeyler havada kalacaktэr.
Эзinizde CSS Zen Garden’э (ZG) gцrenleriniz olmuюtur. ZG birзok entanglement geliюtiricin ilham kaynaрэ olmuю ve CSS’in sadece metinleri biзimlendirip [Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir. Эncelediрinizde fark edeceрiniz ьzere ZG'daki bьtьn tasarэmlarэn HTML kaynak kodlarэ aynэ olup deрiюen tek юey sayfaya baрlэ olan ".css" dosyasэdэr. ] yapmaktan цte tek baюэna bir entanglement sayfasэnэ baюtan aюaрэ CSS ile biзimlendirilebileceрini bizlere gцstermiюtir.
Sцz gelimi “[Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir. ]” sayfa ile “[Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir. ]” sayfanэn kanyak kodlarэna bakarsanэz birebir aynэ olduklarэnэ gцrebilirsiniz fleshy Oldukзa etkileyici deрil mi?
Bizde sayfamэzэ tasarlarken CSS’in bu gьзlь цzelliklerinden faydalanacaрэz.
Fatih Harioрlu’nun sayfasэndaki [Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir. Bu makalede hazэrlayacaрэmэz цrnek tasarэm 2 veya 3 sьtunlu standart blog ve portallerde gцrebileceрiniz sayfa dьzenidir. ] temel alarak anlatэma devam edeceрim. Tasarэmэn aюaрэda gцrьldьрь ьzere sabit geniюlikte bir dэю зerзeve (#sayfa), baюlэk bцlьmь (#ustAlan), sol sьtun (#anaMenu), iзerik sьtunu (#icerik) ve alt kэsэmdan (#altAlan) oluюmaktadэr.
2 sьtunlu ve sabit geniюlikli genel sayfa tasarэmэnэn юematik gцrьnьmь
Sayfanэn bitmiю halini gцrmek iзin [Sadece Kayэtlэ Kullanэcэlar Linkleri Gцrebilir.
Юimdi DW'da File / New menьsь ile yeni bir HTML dokьmanэ aзэn. ] fleshy tэklayэnэz.
Yeni dokьmanэ aзarken “Document Type (DTD)” olarak “HTML 4.01 Strict” seзili olduрuna dikkat edin. Dokьmanэ oluюturup uygun bir konuma kaydedin.
Yeni bir HTML dokьmanэ oluюturuyoruz
Юimdi sayfaya, tьm tasarэmэ kapsayэp ve toparlayan зerзeve olan “sayfa” isimli bir DIV ekliyoruz.
Sayfaya bir DIV ekliyoruz
Aзэlan iletiюim penceresinden “ID” kэsmэna “sayfa” yazэyoruz. Bunun iзin “Insert” paneldeki “Layout” sekmesi altэnda yer alan “Insert Div Tag” dьрmesini ya da Insert / Layout Objects / Div Tag menьsьnь kullanabilirsiniz.
“Class” bilgisini юimdilik boю bэrakэyoruz. Birazdan tьm DIV’ler iзin stil tanэmlamalarэnэ toplu olarak yapacaрэz.
DIV ekleme iletiюim penceresi fleshy depreciatory fleshy depreciatory Юimdi eklediрimiz “sayfa” isimli DIV etiketinin iзine sэrayla “ustAlan”, “anaMenu”, “icerik” ve “altAlan” isimli 4 tane daha DIV ekliyoruz. Hangi DIV’in nasэl boyutlandэrэlэp hizalanacaрэnэ ise CSS ile belirteceрiz. Sayfanэn DW iзersindeki son hali юuna benzemelidir;
Sayfanэn son halinin DW iзerisindeki gцrьnьmь
Gцrdьрьnьz gibi sayfa ana iskeleti bu юekilde olacak.