arkia
چهارشنبه 05 بهمن 1390, 00:29 صبح
بهترین استاد مثاله! برا شروع یه مثال رو باز کن شما چند تا مثال ساده رو باز کنی تحلیل بزنی روششونو یاد میگیری
برا قالب بندی صفحه شما به چند DIV احتیاج دارید که توضیحاتشو میدم:
1- کل صفحه (Container) معمولا یک div قرار میدن که همه ی اشیا داخل اون قرار میگیرن ( در مواردی مثل موقعی که میخوای صفحه ت راست چین باشه اما نه همش کاربرد داره)
2- سر صفحه (Header) ، داخل سر صفحه قسمت ناو بری (Navigation) یا همون منو ها و قسمت های دیگه که بستگی به سایتت داره مثل جستجو...
3- محتوی (contents) که محتوی سایت داخلش قرار میگیره اگه سایتت پنل کناری شبیه وبلاگ ها داشته باشه داخل این یک DIV قرار میدی
4- انتهای صفحه (footer) کپی رایت ، لینک ، نام طراح ...
اینم نمونش:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Title</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<div id="navigate">
<h1>Header Here</h1>
</div>
<div id="header">
<h1>Navigate Here</h1>
</div>
<div id="content">
<h1>Contents Here</h1>
</div>
<div id="footer">
<h1>Footer Here</h1>
</div>
</div>
</body>
</body>
</html>
این قسمت HTML ش بود حالا باید قسمت CSS ش رو هم برای مشخص شدن اندازه ها و رنگ ها انجام بدی :
@charset "utf-8";
body {
background-color:#CCC;
margin:0px;
padding:0px;
}
#container {
width:90%;
margin:0 auto 0 auto;
background-color: #F00;
}
#header {
background-color: #0F0;
}
#navigate {
background-color: #00F;
}
#content {
background-color: #FF0;
}
#footer {
background-color: #0FF;
}