WTP - 7. Hafta CSS ile Web Sitesi Taslağı Oluşturma

Geçen yazımızda (WTP – 6. Hafta CSS (Stil Şablonları) ) ile web sitelerimizi görsel açıdan nasıl daha fazla zenginleştirebileceğimizi görmüştük. Bu yazımızda da bir web sitesi taslağı oluşturup. Web sitesinin bölümlerini (div) ayarlamayı öğreneceğiz.

CSS Nedir?

CSS, açılımı “Cascading Style Sheet” olan ve dilimize Stil Şablonları olarak yerleşen basit ve kullanışlı bir işaretleme dilidir. HTML/XHTML etiket dillerinin sayfa tasarımında yetersiz kalması nedeniyle “World Wide Web Consortium” (W3C, Dünya Çapında Ağ Birliği) tarafından oluşturulmuştur; içerik kısmı (HTML) ile biçimlendirme kısmını birbirinden ayırarak yüzlerce sayfayı tek bir dosya ile biçimlendirme olanağı tanımaktadır.

CSS Yapısı Nedir?

CSS’nin söz dizimi aşağıda görüldüğü gibi “Seçici” ve “Bildirim” olarak iki ana bölümden oluşur. Bildirim ise kendi içinde özellik ve değer olarak iki kısma ayrılmaktadır.

Seçiciler Class (Sınıf), ID ve Tag (etiket) seçiciler olmak üzere üçe ayrılır.

Web sitemizin taslağını ilk olarak kağıt üzerinde tasarlayalım.

Sitemizi kağıt üstünde tasarladıktan sonra şimdi HTML kısmını ve CSS kısmını Dreamweaver üzerinde kodlamaya başlayalım.

index.html dosyası :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bilişim Haber Sitesi</title>
<link href="BilisimStil.css" rel="stylesheet" type="text/css" /> 
</head>

<body>
	<div id="tasiyici"> 
    	<div id="Banner"> Banner </div>
        <div id="menu">Menü </div>
        <div id="tanitim">Tanıtım </div>         
        <div id="haber1">Haber 1</div>
        <div id="haber2">Haber 2 </div>
        <div id="haber3">Haber 3 </div>
        <div id="altbolum">Alt Bölüm </div>  
    </div>
</body>
</html>

BilisimStil.css dosyası :

@charset "utf-8";
/* CSS Document */
#tasiyici {
	background-color:#333;
	width:1000px;
	height:auto;
	margin:0px auto;	
	}
	
#Banner {
	background-color:#0CF;
	width:1000px;
	height:200px;
	}
	
#menu {
	background-color:#0F9;
	width:1000px;
	height:50px;
	}

#tanitim{
	background-color:#639;
	width:1000px;
	height:350px;
	margin:10px 0px;
	}

#haber1 {
	background-color:#F9F;
	width:330px;
	height:250px;
	float: left;
	}
	
#haber2 {
	background-color:#F6F;
	width:330px;
	height:250px;
	margin: 0px 5px;
	float: left;
	
	}
	
#haber3 {
	background-color:#C3F;
	width:330px;
	height:250px;
	margin-bottom: 5px;
	float: left;
		}
	
#altbolum {	
	clear: both;
	background-color:#FC3;
	width:1000px;
	height:150px;	
	}

Uygulama Sonucunu Gör