Hüseyin Tepe

CSS REFERANSLI WEB SAYFA TASARIMI

Son dersimizde tam sayfa tasarımlı bir CSS dosyası ile HTML sayfasına eklendi yaparak bir taslak web sayfası oluşturalım.

Uygulamamız tam sayfa tasarlanmış örnek bir web sayfası olacaktır.
İlk olarak bir CSS dosyası hazırlayıp kaydedeceğiz, ardından bir HTML dosyası hazırlayarak bu CSS dosyasını link metodu kullanarak referans vereceğiz.

Bu konuyu biraz açarak anlatmamın faydalı olacağı kanaatindeyim.
Şimdi aşağıdaki tasarladığım web sayfa çizimi anlatayım, Web sayfamız bu biçimde olacak,

Gördüğünüz gibi, sayfa arkaplan rengi siyah olacak,
İlk adımda, en dışta gördüğünüz tüm bölümleri içine alan kırmızı border çizgili bir genel_div isminde genel div oluşturacağız, bu genel_div web sayfamızın en dış duvarı olacak,

İkinci adımda, sırası ile mavi border çizgili alt alta 3 adet div oluşturacağız, bunlar en üsttekinetop_div adı vereceğiz, orta bölüme, top_div genişliğinde govde_div oluşturacağız, ve en alta yine aynı genişlikte foot_div yaparak sayfayı üst, orta, alt olmak üzere 3'e bölmüş olacağız,

Üçüncü adımda, govde_div'in içini (govde_1, govde_2, govde_3) dikey olarak 3'e böleceğiz,

Son adımda ise, sarı, turuncu ve pembe renkte gördüğünüz bölümleri oluşturacağız, bu bölümleri
govde-1 div'in içine gövde_1_1, gövde_1_2, gövde_1_3,
govde-3 div'in içine gövde_3_1, gövde_3_2, gövde_3_3, olarak bölmüş olacağız.

Çalışmamızın sonu bitttiğinde aynı çizimde anlattığım gibi web sayfamızın taslak biçimi oluşturmuş olacağız. Bitmiş taslak web sayfasını görmek için. BURAYA TIKLAYINIZ

Bu anlatımlardan sonra web sayfası için kodları verelim,

Şimdi CSS dosyasını hazırlayalım.
Bilgisayarınızda yeni bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim hazır CSS etiketlerini kopyalayarak Noteped'e yapıştırın ve ornek_taslak.css olarak masa üstüne kaydedin.

body{
background-color:#000000;
body}

#genel_div {
		border: 3px #000000 solid;
		width:1000px;
		height:auto;
		margin:auto;				
		}

#top_div {
		width:1000px;
        	height:100px;
		background-color:#00FF99;
		font-size:13px;
      	  	font-weight:Bold;
        	color:#000000;
		position:center; 
		top:160px;
        	left:250px;
       		margin:auto;	
       	 	}

#govde_div {
		width:1000px;
        	height:300px;
		font-family:Verdana, Arial, Helvetica, sans-serif;
       	 	font-weight:Bold;
        	color:#000000;		
		position:center; 
		top:160px;
        	left:250px;
        	}
		
		
		#govde1_div{
			width:330px;
			height:300px;
			float:left;	
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:13px;
			font-weight:bold;
			color:#000099;
			}
			#clr{clear:both;}

#govde1_1_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FFFF00;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:bold;
				color:#000099;
				}

#govde1_2_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FF9900;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:Bold;
				color:#000099;
				}

#govde1_3_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FF0066;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:Bold;
				color:#000099;
				}
						
				#clr{clear:both;}

#govde2_div{
			width:338px;
			height:300px;
			float:left;
			background-color:#E6E6FA;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:13px;
			font-weight:Bold;
			color:#000099;
			}

#govde3_div{
			width:330px;
			height:300px;
			float:left;
			background-color:#FF66FF;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-weight:bold;
			color:#000099;
			}
					
			#clr{clear:both;}
				
		
			#govde3_1_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FFFF00;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:bold;
				color:#000099;
				}

#govde3_2_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FF9900;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:Bold;
				color:#000099;
				}

#govde3_3_div{
				width:330px;
				height:100px;
				float:left;
				background-color:#FF0066;
				font-family:Verdana, Arial, Helvetica, sans-serif;
				font-size:13px;
				font-weight:Bold;
				color:#000099;
				}
						
				#clr{clear:both;}		
						
		
#foot_div {
	width:1000px;
        height:100px;
	background-color:#CC99CC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
       	font-size:13px;
        font-weight:Bold;
        color:#000000;
	position:center; 
	top:160px;
        left:250px;
       	margin:auto;	
        }

#clr{clear:both;}

Şimdi de HTML Dosyamızı hazırlayalım.
Bilgisayarınızda bir Noteped (metin belgesi) açın, sonra aşağıda verdiğim hazır web sayfası kodunu koplayarak, Noteped'e yapıştırın.

Artık çalışmamızı sonlandırabilirsiniz, kodları yapıştırdığınız Noteped'i taslak.html ismiyle farklı kaydederek bir web sayfası elde edelim. taslak.html dosyasını açıp bakalım örnek sayfamızdaki gibi biçim verilmiş değil mi ?
CSS dosyasını ve HTML dosyasını çok dikkatli inceleyerek CSS dosyasında yazılan biçim etiketlerinin HTML sayfasında nasıl DİV alanlarına dönüştürüldüğünü anlayabilirsiniz.
Bu anlatımımız burada tamamlandı,
Kolay gelsin

Bilgi Teknolojileri Hakkında Çalışmalar

HTML Dersleri

CSS Dersleri

Network Dersleri

PC Teknikleri

Excel Kullanımı

İş veya Gezi Seyahatleim Anılar ve Oluşan Dostluklar

SAP Meterial (SAP Malzeme Modülü)

CSS REFERANSLI WEB SAYFA TASARIMI