İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa] İsmail Kırbaş ile Tasarım Yolculuğu [AnaSayfa]
 Site Haritası 
 
Site Map
Ana SayfaYeriniz | Ana Sayfa | Makaleler | Programcılık | CSS | CSS ve XHTML ile Temel Sayfa Tasarımı

Diğer Yazılar
CSS Nedir?
Kısa Bilgiler Örnekler
CSS-P Konumlandırma
CSS ile Background
CSS 2


E-posta Gönderin Yorum Yazın
Güvenlik Kodu:5815Güvenlik Kodu:5815Güvenlik Kodu:5815Güvenlik Kodu:5815




En Son Okunan 10 Makale
  1. Grafik Hazırlama Programları
  2. İnternette Marka Olmanın Anahtarları
  3. Programcılık
  4. Zorluklar
  5. Use Case Diyagramları İle Başarılı Proje Analizi
  6. Bilgisayarlar Üzerine
  7. Zaman Yönetimi Teknikleri
  8. Ajax
  9. Hayat Dersleri
  10. Özgeçmiş nedir? Nasıl yazılır?
 
CSS ve XHTML ile Temel Sayfa Tasarımı>
Yazı Tipi KüçültYazı Tipi BüyütAna SayfaYazıcıdan ÇıkarPDF Belgesi Olarak GörüntüleFavorilerime EkleArkadaşıma Tavsiye EdeceğimRTF (Word Dokümanı) olarak görüntüle

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. İş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.



Not: Yazılar konusundaki yorumlarınız için lütfen Yorum Yazın bölümümüzü kullanın.

Yazar : Osman S Börütecene
Son Güncelleme : 18 Şubat 2007, Pazar
Sayfa Sürümü : 3
Okunma Adedi : 7,034
Son Okunma : 2017-08-21 14:18:36
Kaynaklar : http://osman.borutecene.com/css-ve-xhtml-ile-temel-sayfa-tasarimi/

CSS 2CSS ve XHTML ile Temel Sayfa Tasarımı
© [Site Haritası]
| Makaleler | Seyir Defteri | Kaynaklar | İndirin | İletişim |

RSS dosyasını görmek için tıklayınız. RSS dosyasını görmek için tıklayınız.XML versiyonu için tıklayınız WAP versiyonu için tıklayınız Bu site DyNA İçerik Yönetim Sistemi üzerinde çalışmaktadır.
İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa İsmail KIRBAŞ ile Tasarım Yolculuğu Anasayfa
ismail kırbaş ile web sitesi tasarimi sitemap ismail kırbaş ile web sitesi tasarimi sitemap
  Sitemizde 12 kişi çevirimiçi | Bugün =232 | Dün =299 | Bu Ay=7,334 | Günlük En Fazla=1,109 tekil ziyaretçi