وبلاگ داتیس دیزاین

در قسمت قبل من نحوه تبدیل یک قالب وب سایت که در فتوشاپ ساخته شده بود را به فایل HTML آموزش دادم. در این قسمت ادامه آموزش و نحوه ایجاد فایل CSS برای وب سایت و تکمیل آنرا آموزش می دهم. امیدوارم براتون مفید باشه… اگر قسمت قبلی رو مطالعه نکردید می تونید در این صفحه آموزش قبلی رو مطالعه کنید.

ساخت فایل CSS

ابتدا تنظیمات کلی وب سایت را آماده می کنیم که شامل فونت، سایز فونت، رنگ و سایر مشخصات است :

*, body, html {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	margin:0;
	padding:0;
}

حال اگه به فایل HTML نگاه کنید می بینید که فایل ما شامل یک Container است که در بر گیرنده کل محتویات سایت است، پس می توانیم به این DIV اندازه سایتمان را بدهیم. من 10px هم margin از بالا به آن میدهم تا از لبه browser مقداری فاصله داشته باشد :

#container {
	margin:10px auto;
	border:2px solid #000000;
	width:800px;
}

حال به header DIV می رسیم، در فایل فتوشاپ من سایز header را 150px در نظر گرفتم و کد رنگ background آن 99cc66 است :

#header {
	background-color:#99cc66;
	height:150px;
}

برای ساخت header title هم از مشخصات زیر استفاده می کنیم :

#header_title {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size:34px;
	color:#FFFFFF;
	padding:10px 0 0 20px;
}

و slogan :

#slogan {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	padding:5px 20px;
	color:#FFFFFF;
}

برای ساخت navigation هم بدین روش عمل می کنیم : (طریقه ساخت navigation افقی را می توانید در این آموزش ببینید)

ul, li {
	list-style:none;
}

#navigation {
	margin:20px 0 0 0;
	padding:0 10px;
}

#main_nav li{
	display:inline;
	margin:0 20px;
}

#home, #about, #portfolio, #services, #contact{
	position:relative;
}

#home a, #about a, #portfolio a, #services a, #contact a {
	text-align:center;
	padding:5px 25px;
	border:2px solid #FFFFFF;
	background-color:#009999;
	text-decoration:none;
	color:#FFFFFF;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
}

#home a:hover, #about a:hover, #portfolio a:hover, #services a:hover, #contact a:hover {
		background-color:#000000;
}

برای content من 450px عرض در نظر گرفتم و 25px padding از هر طرف به آن می دهم، float left هم باعث می شود که این DIV در سمت چپ قرار بگیرد :

#content {
	width:450px;
	padding:25px;
	float:left;
}

و برای content header :

#content_header {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	padding:0 0 10px 0;
}

برای sidebar DIV هم 250px width و 300px height در نظر می گیرم و به آن right float می دهم که در قسمت راست قرار بگیرد :

#sidebar {
	text-align:center;
	background-color:#009999;
	border:2px solid #000000;
	margin:25px 20px 30px 0;
	width:250px;
	height:300px;
	float:right;
}

قسمت recent works title :

#recent_work_title {
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#FFFFFF;
	font-size:18px;
	padding:10px 0;
}

برای تصاویر portfolio و mouse hover آن :

.portfolio_image img {
	border:2px solid #99cc66;
	margin:5px;
}

.portfolio_image img:hover {
	border:2px solid #000000;
}

و در نهایت قسمت site info که شبیه navigation می باشد :

#siteinfo {
	text-align:right;
	clear:both;
	height:50px;
	background-color:#000000;
	color:#FFFFFF;
	padding:5px;
}

#siteinfo_title {
	padding:5px;
}

#siteinfo_nav li {
	display:inline;
}

#siteinfo_nav li a {
	padding:5px;
	text-decoration:none;
	color:#FFFFFF;
}

#siteinfo_nav li a:hover {
	text-decoration: underline;
}

دیدید که به راحتی می توان توسط فایل HTML و CSS یک وب سایتی آماده کرد که بسیار خوانا می باشد و همینطور از کد validate شده استفاده کرده است.

شما می توانید از این لینک کل فایلهارو دریافت کنید . حجم 13 کیلوبایت.

ارسال به توییتر ارسال به فیس بوک اشتراک خوراک سایت ارسال به ایمیل دوستان