Moein TN
Registered User
- تاریخ عضویت
- 26 اکتبر 2017
- نوشته‌ها
- 340
- لایک‌ها
- 52
- سن
- 25
آموزش ساخت وب سایت با اسکلت
اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .کدها :
<!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>
نتیجه :
توضیحاتی در مورد کدها :طراحی وب سایت و نحوه جداسازی بخش های مختلف سایت با تگ 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 درصد خواهد شد
منابع:www.118file.com
www.kelidestan.com
اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد .کدها :
<!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>
نتیجه :
توضیحاتی در مورد کدها :طراحی وب سایت و نحوه جداسازی بخش های مختلف سایت با تگ 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 درصد خواهد شد
منابع:www.118file.com
www.kelidestan.com
