Bir süredir temel, basit web tasarımı üzerine yazdığım bir iki yazıdan ötürü Google arama sonuçlarından hatırı sayılır bir ziyaret alıyorum. Ancak maalesef söz konusu yazılar pratikte baştan sona bir web sitesi hazırlamak için yeterli değiller. Ben de, bu konudaki bilgi talebini karşılamak amacıyla bir kaç yeni yazı daha yazmaya karar verdim. Bu yazılar, “web sitesi nasıl yapılır, web sayfası nasıl yapılır, internet sitesi nasıl yapılır, basit bir web sayfası nasıl yapılır, anasayfa nasıl yapılır” gibi Google’da bu aramaları yaparak buraya gelen ziyaretçilere yardımcı olabilecek nitelikte olacak.
Güncelleme: Ceyhun Aksan da benzer bir yazı yazmış, onu da okumanızı öneririm.
Başlangıç olarak, mümkün oldukça çok kişiyi ilgilendirebilecek bir sayfa düzenini seçmek faydalı olacaktır. Örneğin baş, orta ve son kısımları olan, orta kısmı sağ veya sol tarafta bir menü için ya da benzeri linkler ve bilgiler için ayrılmış, diğer kısmı da içeriğin kendisi için ayrılmış bir tasarım olabilir:
Yukarıda gördüğünüz, sağda ya da solda bir bara sahip basit tasarım örneğini sabit genişlikte ve tarayıcı içine enine ortalanmış biçimde hazırlayacağız. Buradaki örnekte evvela son yıllarda en çok moda olan haliyle barın sağ tarafta olduğu halini yapalım.
Önce ihtiyacımız olan html ana parçalarını kodlayacağız. Bunu, bilgisayarınızda kopyala/yapıştır yöntemiyle bir notepad dosyasına sayfa.html adıyla kaydedebilirsiniz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Bu satır çok önemli, bu satırın sayfanın en başında yer alması ve kendinden önce bir satır yer almaması gerekiyor. Hazırlayacağımız CSS + XHTML tasarım web standartlarına uyumlu olacağından Internet Explorer 6'da istediğimiz gibi görüntülenebilmesi için bu zavallı tarayıcıya tasarımımızın çağdaş bir tasarım olduğunu bu satır anlatacak. -->
<html>
<head>
<title>CSS ve XHTML ile Temel Sayfa Tasarımı</title><!-- Tarayıcı penceresinin başlığında görünen yazı buraya yerleştirilir -->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" /><!-- Bu satır, tarayıcıya web sayfamızın karakter setini belirtiyor. Normalde karakter seti olarak UTF-8 kullanırsanız web sayfanızdaki Türkçe karakterler dünyanın her yerinde olması gerektiği gibi görünür. Ancak bu çalışmayı Windows üzerinde notepad ile yapıyorsanız şuna dikkat etmelisiniz; Windows notepad, burada da dünya standartlarına uymadığından text dökümanınızı UTF-8 olarak kaydetmez. Kaydetmesi için "Save as", ya da "başka bir adla kaydet" seçeneğinden dosya kodlaması seçip Unicode ya da UTF-8 seçeneklerinden birini seçmelisiniz ki dosyanız uluslararası standartlarda kaydolsun. Windows Vista'da bu durum değişti mi bilmiyorum ama sanmam -->
<link rel="stylesheet" title="ccs-tasarim" href="style.css" type="text/css" media="all" /><!-- Burada, CSS dosyamızın yerini belirtiyoruz. Bu satırla ilgili ayrıntılı açıklamalar yapmak için başlı başına bir yazı yazmaya değer ama şimdilik, burada dosya ismini sadece "style.css" olarak verdiğimiz için, bu html dökümanı ile aynı dizinde (klasörde) bulunması gerektiğini söylemiş olalım yeter -->
</head><!-- Web sayfamızla ilgili önemli bilgileri tarayıcıya anlatma işlemini burada bitirdik. <head> kısmı, bundan çok daha fazla işe yarar ancak burada sadece temel şeylere yer verdim. Örneğin, sitenizin favori ikonunun adresini burada belirtebilirsiniz. Sadece web robotları tarafından okunmasını istediğiniz bazı bilgileri bu kısma yerleştirebilirsiniz. -->
<body><!-- Şimdi web sayfamızın ziyaretçiler tarafından görünecek kısmına başlıyoruz -->
<div id="baslik">
<h1>Web sayfamızın ana başlığı, adı.</h1>
<p>Sayfamıza dair açıklamalar bu kısma girebilir</p>
</div>
<div id="orta_kismi_saracak_olan_div">
<div id="icerik_kismi">
<p>Burada web sayfamızın içeriği bulunacak</p>
</div>
<div id="yan_bar">
<p>Buraya yan tarafta bulunmasını istediğimiz şeyleri koyacağız. </p>
</div>
<br style="clear: both;"/> <!-- bu satırı firefox'ta bulunan bir bug (bug olup olmadığı tartışmalı bir konu, bu yazının sınırını aşar) nedeniyle koyuyoruz -->
</div>
<div id="alt_kisim">
<p>Buraya genelde "her hakkı mahfuzdur" gibi laflar yazılır.</p>
</div>
</body>
</html>
Evet, sayfa.html bitti. Şimdi CSS kısmına geçelim. Bunu da yine kopyala/yapıştır yöntemiyle bir notepad dosyasına style.css adıyla kaydedebilirsiniz. Bu iki dosyanın aynı klasörde olmasına dikkat edin.
/* CSS dosylarında yorumlar ve notlar bu işaretler arasında yazılır */
/* Aşağıda, az evvel yarattığımız html dökümanına görsel biçimi verecek olan CSS kodları var */
/* baslik, alt_kisim, orta_kismi_saracak_olan_div bölümlerinin 700px eninde olmasını ve ortalanmasını istiyoruz. ayrıca yaptığımız işi daha iyi anlayabilmek için parçaları farklı renklerde hazırlayacağız */
#baslik, #alt_kisim, #orta_kismi_saracak_olan_div {
width: 700px;
margin: auto;
}
#baslik, #alt_kisim {
background: #999;
}
/* bunlardan icerik_kisminin solda, yan_bar_kisminin ise sagda durmasini istiyoruz. icerik kisminin 500px genisliğinde, yan bar kısmının ise 200px genişliğinde olmasını istiyoruz */
#icerik_kismi {
width:500px;
float: left;
background: #666;
}
#yan_bar {
width: 200px;
float: left;
background: #333;
}
/* alt_kisim, üstte yarattığımız sola yaslama yönteminden gelen yaslanma emrini sıfırlamalı */
#alt_kisim {
clear: both;
}
Sayfamızın iskeletini tamamladık. Deneyebilirsiniz. Oluşturduğunuz sayfa kabaca aşağıdaki gibi görünüyor olmalı:
Web sayfamızın ana başlığı, adı.
Sayfamıza dair açıklamalar bu kısma girebilir
Burada web sayfamızın içeriği bulunacak
Buraya yan tarafta bulunmasını istediğimiz şeyleri koyacağız.
Buraya genelde “her hakkı mahfuzdur” gibi laflar yazılır.
İşte kabaca böyle. Tablo kullanmadan CSS ve XHTML ile basit bir sayfa yapısı hazırladık. Webde bu alanda çok sayıda örnek var ama maalesef Türkçe içerik gerek nitelik gerekse nicelik olarak tatmin edici değil. Elbette bu döküman da tek başına ne kadar faydalı olabilir bilemiyorum ama web standartlarında, CSS ile sayfa tasarımı yapmak isteyenlere bir çıkış noktası olacaktır diye düşünüyorum. Bu konuda bir dahaki sefere tablosuz tasarımın takıntı haline getirilmemesi gerektiği, web standartlarının amacı, yetkinliği vb. konuları tartışmaya niyetliyim.
Technorati Tags: css, xhtml, tasarım, web tasarımı, örnek, web standartları, iki sütun
Benzer yazılar:
- CSS İle Konumlandırmada Püf Noktaları
- Tablosuz Tasarım Fetişi ve Erişilebilirliği Zayıf Web Standartları
- Web İçin Görsel Tasarım Yaparken Gözden Kaçanlar
- Erişilebilir Web Siteleri Yapmak
Osman eline saglik. Cok guzel bir makale olmus. Turkce CSS kaynaklari listesine ekledim hemen. Bu arada esas benim bekledigim yazi son paragrafta bahsettigin konu. Bircok kisi standartlari bas ustune koyup, neyin onemli oldugunu unutur. Bu konuda yaklasik bir bucuk yil once bir yazi yazmistim. Ilgini cekebilir. Yeni makalelerini sabirsizlikla bekliyorum
Teşekkür ederim, bakıyorum yazılara.
yazınızı okudum fakat ben daha çok sizin siteniz üzerine birşeyler söylemek istiyorum.
öncelikle sitenizdeki font seçimi ve büyüklükleri gerçekten çok güzel.
yazınızı okumak için zorlanmıyorum.
nedense benim en önemli kriterim bu.
Fakat yazınızda html kodlar arasına yazığınız yorumları farklı bir fontla, renkle veya italik yazsaydınız çok daha güzel olurdu diye düşünüyorum.
Herşey çok şık tasarımdan önce sitenin okunabilir olması için olmalı
iyi çalışmalar.
@burak inner:
okunabilirliğe ben de birincil derecede önem veriyorum. kodlar için de farklı bir font ve satır bazında çok açık renkte bir arkaplan renk değişimi yaptım. yorumlarınız için teşekkür ederim.
“Fakat yazınızda html kodlar arasına yazığınız yorumları farklı bir fontla, renkle veya italik yazsaydınız çok daha güzel olurdu diye düşünüyorum.”
Ben sizin yaptığınız yorumların farklı renkte olmasını istemiştim.. O şekilde sizin yorumlarınızı takip etmek daha kolay olacaktır diye düşünmüştüm.
Hmmm. Evet gayet mantıklı. Bir ara ilgilenip eklerim farklı bir renk, highlight gibi mesela.
merhaba. web konusunda hiçbir tecrübem olmamasına rağmen komutlarınız sayesinde ilk adımı attım. devamını sizi izleyerek bulacağım. paylaşımızın için sonsuz saygılar ve teşekkürler
çok teşekkür ederim.
Üstad,
Vallahi süpersin.
“Net”sin, “sade”sin, “mütevazi”sin, tavrını da koymuşsun.
Çalışmalarının ve tarzının devamını dilerim…
Tesekkurler
Eline sağlık. Bir sorum olacak. Şuradaki kodlarda
#yan_bar {
width: 200px;
float: left;
background: #333;
}
float: right;
Olması gerekmiyor mu? Sağ tarafta olsun demiştik ya.
@uğur: hayır gerekmiyor. nedeni şöyle: biz iki sütunu yani büyük olan ve küçük olan yanyana sola yaslıyoruz ki küçük olan büyüğün ardından sola yaslanınca sağda dursun.
şimdi biraz daha derin bir cevap: buradaki tasarımda sola yaslamak gerekiyor. ama aslında senin söylediğin gibi düzenlemek daha doğru. en doğrusu büyük sütunu hiçbiryere yaslamayıp küçük sütunu sağa yaslamak. işin ehli böyle yapar. ancak bunu anlatmak daha uzun bir yazı gerektiriyor.
hocam ben ie de çalıştıramadım bu kodları. firefoxda sorun yok.
bende kodları notepade yapıştırdım ama .htm de gözükmüyor. bu güne kadar title tagıyla ilgili hiç bir sorun yaşamamıştım bu örnekte title bile gözükmedi!
Merhabalar Osman bey
yararlı bilgiler.. Ben takıldığım nokta yabancı içerikli siteler benzer hazır css layoutlar var ancak hiç birinde grafik yok yani bu hali hazırdaki şablonlara grafik ekleyerek vermelerini çok isterdim sizin hazırladığınızdada grafik yok özellikle grafikleri css ile tekrar yazdırma repaut muydu neydi onunla alakalı olsa anlama açısından işime çok yarayacak.. teşekkürler
css background olarak arama yaparsanız bulursunuz. örneğin:
.grafik {
background: url(resim.jpg) ;
}
gibi bir css kodu div class=”grafik” ile başlayan bir div’in arkasına resim.jpg’i yerleştirir. elbette bunun sizin de dediğiniz gibi resmi tekrar ettirme, yerini belirleme gibi parametreleri de mevcut. ama dediğim aramayı yaparsanız bunlara ulaşırsınız diye tahmin ediyorum.
tekrar yazdırma parametresi de repeat idi. onunla da aratabilirsiniz. mesela css background repeat gibi.
Evet mesela arka planı tekrar yazdırabiliyorum dediğiniz gibi sayfanın belli bi yerinden belli bi yerine şeklinde bu paremetreler karışık. Örnek layutlar veriliyor onlardada grafik yok şayet grafik olmuş olsa üzerinde değer oynaması yaparak çok kolay öğrenebilineceği kanısındayım nitekim grafik olarak eklemiyorlar teşekkür ederim..
Sizin için ufak bir arama yaptım, şu sayfalardaki örneklere bir göz atmanızı öneririm:
http://www.blackinci.com/css/8-css-background-ozellikleri-arka-plan.html
http://zone.org/html-css-dhtml/20034-css-background-ozellikleri-arka-plan.html
http://www.w3schools.com/css/pr_background.asp
Teşekkür ederim. İnceleyecğim.