کدها :
<!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>عنوان صفحه</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><!--end header -->
<div id="sidebar1">
<h3>عنوان ستون سمت چپ</h3>
<br />
<ul id="sidebar1_menu">
<li>عبارت اول از ستون سمت چپ</li>
<hr />
<li>عبارت دوم از ستون سمت چپ</li>
<hr />
<li>عبارت سوم از ستون سمت چپ</li>
<hr />
</ul>
</div><!--end sidebar1-->
<div id="content">
<h1>عنوان اصلي مبحث</h1>
<h2>زير عنوان :</h2>
<p>
مباحث به زبان فارسي در اين محل نوشته خواهد شد .
</p>
</div><!--end content-->
<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><!--end sidebar2-->
<div style="clear:both"></div>
</div><!--end main container-->
</div><!--end main-->
<div id="footer">
<div class="container">
<div style="clear:both"></div>
<p>
Copyright © 2012 www.yoursite.com <br />
All Rights Reserved
</p>
</div><!--end footer container-->
</div><!--end footer-->
</body>
</html>
نتيجه :
Result
توضيحاتي در مورد کدها :
نحوه جداسازي بخش هاي مختلف سايت با تگ div :
در بخش body از فايل html ، با استفاده از تگ div ، بخش هاي مختلف سايت را جدا کرده ايم تا بتوانيم به هر يک به طور جداگانه مشخصه هايي را اختصاص بدهيم و همچنين نحوه چيدمان بخش هاي مختلف سايت در کنار هم را مشخص کنيم . به هر تگ div يک id اختصاص داده ايم زيرا کدهاي CSS را در بخش head فايل html نوشته ايم و با استفاده از id است که تعيين مي کنيم هر قسمت صفحه ( محتويات هر تگ div ) چه مشخصه هايي بايد داشته باشد .
بخش هاي مختلف سايت عبارتند از header که در بالاترين بخش سايت نمايش داده مي شود و درواقع سردر ورودي سايت مي باشد ، sidebar1 که ستون سمت چپ سايت است ، sidebar2 که ستون سمت راست سايت است ، content که مطالب مربوط به هر صفحه در آن نوشته مي شود و بين دو ستون اصلي سايت قرار مي گيرد و footer که در پايين ترين بخش سايت قرار مي گيرد و معمولا حاوي علامت تجاري سايت ، حقوق مادي و معنوي سايت و ... مي باشد .
چگونگي نوشته شدن کدهاي CSS :
کدهاي CSS در قسمت head فايل html بايد نوشته شوند ( يعني بين دو تگ <head> و <head/> ) . شروع کدهاي CSS را با تگ <"style type="text/css> و پايان کدهاي CSS را با تگ <style/> اعلام کرده ايم . سپس ابتدا بايد مشخص کنيم که مي خواهيم مشخصه ها را به کدام بخش سايت اعمال کنيم . اگر بخواهيم مشخصه اي را به محتويات يک تگ div اعمال کنيم بايد ابتدا علامت # را نوشته و بعد از اين علامت ، نام id مربوط به آن تگ div را بنويسيم . سپس يک علامت ((})) را نوشته و پس از آن مشخصه هاي مورد نظرمان را مي نويسيم . چنانچه قصد نوشتن چند مشخصه را داشته باشيم بايد آنها را با علامت ((;)) از يکديگر جدا کنيم . پس از نوشتن تمامي مشخصه هاي مورد نظرمان ، علامت (({)) را به کار مي بريم تا اعلام کنيم که مشخصه هاي آن تگ div پايان يافته است . براي ساير تگ ها نيز بايد همين شيوه را اجرا کنيم و کدهاي آنها را پشت سرهم بنويسيم .
همان طور که مي بينيد براي تعيين مشخصه هاي تگ هاي div ، ترتيب فراخواني تگ هاي div دقيقا مثل ترتيب نوشته شدن کدهاي آنها در بخش body فايل html مي باشد .
نکته :
بهترين انتخاب براي نوشتن کدهاي CSS ، نوشتن آنها در فايلي جدا از فايل html مي باشد زيرا با اين شيوه مي توانيد کدهاي CSS را به هر فايل html که بخواهيد اعمال کنيد و براي اين کار تنها بايد در فايل html آدرس فايل حاوي کدهاي CSS را مشخص کنيد . ما فعلا از اين شيوه استفاده نکرده ايم تا گيج نشويد و تمرکز اصلي خود را فعلا بر روي نکات ديگر قرار دهيد .
نحوه چيدمان بخش هاي مختلف سايت در کنار هم :
نحوه چيدمان بخش هاي مختلف سايت بايد به اين شکل باشد که ابتدا header نمايش داده شود و سپس دو ستون اصلي سايت و بخش content بايد در پايين قسمت header نمايش داده شوند . ما براي کنار هم قرار دادن دو ستون اصلي و بخش content از مشخصه float استفاده کرده ايم که باعث مي شود تگ هاي div شناور شوند و موقعيت خود را بر اساس تگ div کنار خود ، تنظيم کنند . در کدهاي CSS مشاهده مي کنيد که براي هر سه تگ div با id هاي sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به اين صورت که چون ابتدا کدهاي sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعيين کرده ايم تا در سمت چپ صفحه قرار بگيرد ، سپس بخش content را داريم که مشخصه float آن را نيز برابر left تعيين کرده ايم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس براي sidebar2 نيز مشخصه float را برابر left تعيين کرده ايم تا در کنار بخش content که در سمت چپ آن است بچسبد .
نکته :
براي آنکه دو ستون اصلي و بخش content به درستي در کنار هم قرار بگيرند بايد مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زير sidebar1 و content قرار بگيرد . براي فهميدن عرض هر بخش ابتدا بايد در کدهاي CSS نگاه کنيد و ببينيد عرض آن بخش چقدر تعريف شده است و علاوه بر اين بايد ببينيد که اين بخش ها داراي مشخصه padding-left يا padding-right هستند يا نه . زيرا بايد ميزان اين مشخصه ها را به عرض تعريف شده اضافه کنيد . به عنوان مثال در کدهاي بالا عرض هاي تعريف شده به صورت درصد مي باشند و زماني که کل درصدها را براي sidebar1 ، content و sidebar2 جمع بزنيد ، برابر 100 درصد خواهد شد .
ساخت Auto Complete با استفاده از PHP و JQuery