اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .
کدها :
htmlxmlns = "http://www.w3.org/1999/xhtml">
head>
meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" />
title>عنوان صفحه / title>
style type = "text/css">
body {
font-family:Arial, Helvetica, sans-serif;
text-align:right;
direction:rtl;
}
.container {
width:100%;
margin:0 auto;
}
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
margin:0px;
padding:0px;
}
#logo1 {
background:url(../images/kelid.gif) no-repeat;
width:100%;
height:180px;
background-position:center
}
#tagline {
padding-top:60px;
text-align:center;
}
#tagline h3 {
font-size: 30px;
color: #09F;
}
ul#menu {
list-style:none;
padding-top:50px;
}
ul#menu li a {
font-size:20px;
color:#090;
text-decoration:none;
}
ul#menu li {
float:right;
padding-left:0px;
padding-right:30px;
width:150px;
}
#sidebar1 {
width: 20%;
float:left;
direction:rtl;
padding-top:30px;
padding-bottom:30px;
padding-right:2%;
padding-left:2%;
}
ul#sidebar1_menu {
list-style:none;
}
#content {
width:52%;
float:left;
padding-top:30px;
padding-bottom:30px;
padding-right:0px;
}
#content h2 {
font-size: 24px;
color: #00C;
padding-top: 25px;
}
#content h3 {
font-size:24px;
color:#444444;
padding:20px;
}
#content h4 {
font-size: 18px;
color: #373737;
font-weight: normal;
}
#content p {
text-align:justify;
font-size: 18px;
color: #000;
padding-top: 20px;
}
#content small {
font-size: 12px;
color: #373737;
}
#content a {
color: #F33;
font-weight: bold;
text-decoration: none;
}
#sidebar2 {
width: 20%;
float:left;
direction:rtl;
padding-top:30px;
padding-bottom:30px;
padding-left:2%;
padding-right:2%;
}
ul#sidebar2_menu {
list-style:none;
}
ul#sidebar2_menu li a {
text-decoration:none;
}
#footer {
width: 100%;
text-align:center;
padding-top:60px;
}
/ style>
/ head>
body>
div id = "main">
div class = "container">
div id = "header">
div id = "logo1">
div id = "tagline">
h3>شعار تبلیغاتی سایت شما در این محل نمایش داده می شود / h3>
/ div>
/ div>
div style = "clear:both">/ div>
ul id = "menu">
li>a href = "#">خانه / a>/ li>
li>a href = "#">مبحث اول / a>/ li>
li>a href = "#">مبحث دوم / a>/ li>
li>a href = "#">مبحث سوم / a>/ li>
li>a href = "#">تماس با ما / a>/ li>
/ ul>
div style = "clear:both">/ div>
/ div>
div id = "sidebar1">
h3>عنوان ستون سمت چپ / h3>
br />
ul id = "sidebar1_menu">
li>عبارت اول از ستون سمت چپ / li>
hr />
li>عبارت دوم از ستون سمت چپ / li>
hr />
li>عبارت سوم از ستون سمت چپ / li>
hr />
/ ul>
/ div>
h1>عنوان اصلی مبحث / h1>
h2>زیر عنوان : / h2>
p>
مباحث به زبان فارسی در این محل نوشته خواهد شد .
/ p>
div id = "sidebar2">
h3>عنوان ستون سمت راست / h3>
br />
ul id = "sidebar2_menu">
li>a href = "#">اولین لینک از ستون سمت راست / a>/ li>
hr />
li>a href = "#">دومین لینک از ستون سمت راست / a>/ li>
hr />
li>a href = "#">سومین لینک از ستون سمت راست / a>/ li>
hr />
/ ul>
/ div>
div style = "clear:both">/ div>
/ div>
/ div>
div id = "footer">
div class = "container">
div style = "clear:both">/ div>
p>
Copyright © 2012 www.yoursite.com br />
All Rights Reserved
/ p>
/ div>
/ div>
/ body>
/ html>
توضیحاتی در مورد کدها :
نحوه جداسازی بخش های مختلف سایت با تگ div :
در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .
بخش های مختلف سایت عبارتند از header که در بالاترین بخش سایت نمایش داده می شود و درواقع سردر ورودی سایت می باشد ، sidebar1 که ستون سمت چپ سایت است ، sidebar2 که ستون سمت راست سایت است ، content که مطالب مربوط به هر صفحه در آن نوشته می شود و بین دو ستون اصلی سایت قرار می گیرد و footer که در پایین ترین بخش سایت قرار می گیرد و معمولا حاوی علامت تجاری سایت ، حقوق مادی و معنوی سایت و ... می باشد .
چگونگی نوشته شدن کدهای CSS :
کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ
و