دسته بندي ها

جستجو

لينک هاي روزانه

جعبه پیام




امکانات


آرشيو

خبرنامه

آمار

آنلاین : 1
بازدید امروز : 10
بازدید دیروز : 11
بازدید هفته گذشته : 44
بازدید ماه گذشته : 146
بازدید سال گذشته : 2199
کل بازدید : 10201

لينک دوستان

چينش صفحه با ساختار دو ستون با عرض ثابت به وسيله CSS
اين نوع از چينش در بسياري از وب سايت ها مورد استفاده قرار ميگيرد و شما مي توانيد نمونه اي 
از اين نوع ساختار را در همين وبلاگ ملاحظه نمائيد. با توجه به نوع و تکنيک مورد استفاده در اين نوع از چينش 
توضيحات بيشتري در مورد آن ارائه خواهد شد .

در اين نوع از چينش يک بخش هايي با نام sideBar و contentBody اضافه شده است . با توجه به نوع و حتي 
رنگ پس زمينه اين بخش ها , مي توان از تکنيک طراحی وب سایت هاي متفاوتي براي چينش صفحه استفاده نمود که در ادامه
 توضيحات بيشتري در اين زمينه ارائه خواهد شد.

مهمترين نکته در اين نوع از طراحي همسان بودن ارتفاع sideBar و contentBody است . اين همساني ارتفاع
در زماني نمايان خواهد بود که تفاوت رنگ و يا طرح در پس زمينه sideBar و contentBody وجود داشته باشد و در 
غير اينصورت اين تفاوت ارتفاع به دليل يکسان بودن رنگ و طرح پس زمينه از ديد بازديد کنندگان پنهان خواهد بود .

در نمونه و مثال نخست با توجه به نوع طرح و رنگ يکسان پس زمينه sideBar و contentBody همسان نبودن ارتفاع
 از ديد مخاطب پنهان خواهد ماند و نا هماهنگي در طرح ايجاد نخواهد کرد .

DEMO

ساختار HTML

<div class="container">
<div class="header">
<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
<h2>دو ستون - عرض ثابت</h2>
</div>
<div class="navigation">
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">ارتباط با ما</a></li>
</ul>
</div>
<div class="content">
<div class="contentBody">
<h2>آموزش چينش صفحات وب سايت با استفاده از CSS</h2>
<p>کد نويسي بر اساس استاندارد W3C انجام شده است</p>
<p>چينش بر اساس زبان فارسي و از راست به چپ است - rtl </p>
<br class="clearfloat" />
</div>
<div class="sideBar">
<h3>سر فصل براي ستون کناري</h3>
<p>با ساختار و چينش هاي استاندارد آشنا مي شويد</p>
</div>
<br class="clearfloat" />
</div>
<div class="footer">
Copyright©webtarget.ir|2011
</div>
</div>
کدهاي CSS

@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by */
/* Amir Sorouri */
/* Sorouri.amir@gmail.com */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
ol, ul {
list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3 { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
width:960px;
margin: 0 auto;
background:#fff;
}

.header
{
background:#ccc;
padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
background:#333;
height:30px;
line-height:30px;
}

.navigation ul li
{
float:right;
}

.navigation li a
{
display: block;
height:30px;
padding:0 15px;
color:#fff;
text-decoration: none;
border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
background:#eee;
}

.contentBody
{
width:650px;
float:right;
padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
margin: 0 0 .5em;
}

.sideBar
{
width:250px;

float:left ;
padding:20px 0 20px 20px;

}
.sideBar h3
{
margin: 0 0 .5em;
}

.footer
{
background:#ccc;
padding: 20px;
text-align:left;
}
براي ظاهر شدن اين ناهماهنگي در چينش صفحه کافيست که sideBar و contentBody داراي رنگ پس زمينه متفاوتي شوند

.sideBar
{
width:250px;
float:left ;
padding:20px 0 20px 20px;
background:#ddd;

}
در اين رابطه بهتر است مطالب زير را مطالعه نمائيد

آشنايي با مفهوم Margin , Padding , Border در CSS
Margin , Padding – خلاصه نويسي دستورات CSS
خلاصه نويسي دستورات CSS – Background
رنگ مورد استفاده در پس زمينه sideBar در ابتدايطراحی وب سایت اين مثال را نيز حذف نمائيد .به همين
 سادگي به نظر مي رسد 
که نا هماهنگي بر طرف شده باشد . ملاحظه مي نمائيد که با افزايش محتويات contentBody همچنان در چينش 
ناهماهنگي به وجود نخواهد آمد و contentBody و sideBar داراي ارتفاع يکسان و رنگ پس زمينه متفاوت خواهند بود .

نمايش صفحه

ساختار HTML

<div class="container">
<div class="header">
<h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1>
<h2>دو ستون - عرض ثابت</h2>
</div>
<div class="navigation">
<ul>
<li><a href="#">خانه</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">ارتباط با ما</a></li>
</ul>
</div>
<div class="content">
<div class="contentBody">
<h2>آموزش چينش صفحات وب سايت با استفاده از CSS</h2>
<p>کد نويسي بر اساس استاندارد W3C انجام شده است</p>
<p>چينش بر اساس زبان فارسي و از راست به چپ است - rtl </p>
<br class="clearfloat" />
</div>
<div class="sideBar">
<h3>سر فصل براي ستون کناري</h3>
<p>با ساختار و چينش هاي استاندارد آشنا مي شويد</p>
</div>
<br class="clearfloat" />
</div>
<div class="footer">
Copyright©webtarget.ir|2011
</div>
</div>
کدهاي CSS
@charset "utf-8";
/* CSS Document */
/*-------------------------*/
/* Design & Style by */
/* Amir Sorouri */
/* Sorouri.amir@gmail.com */
/*-------------------------*/

/*--------- reset ---------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
ol, ul {
list-style: none;
}
body { font:62.5%/1.7em Tahoma, Arial, sans-serif;/* font-size 1em = 10px */ direction:rtl;}

/* ---------- Requirment ----------*/
.container {font-size:1.2em;}
.clearfloat {clear:both; height:1%;}
h1 , h2 , h3 { font-family:Arial, Helvetica, sans-serif;}
h1 { font-size:1.8em;}
h2 { font-size:1.6em;}
h3 { font-size:1.4em;}

/* ---------- Main -----------*/
.container
{
width:960px;
margin: 0 auto;
background:#fff;
}

.header
{
background:#ccc;
padding: 20px;
}
.header h1 { text-align:left;}
.header h1 a{ text-decoration:none; color:#09F;}
.navigation
{
background:#333;
height:30px;
line-height:30px;
}

.navigation ul li
{
float:right;
}

.navigation li a
{
display: block;
height:30px;
padding:0 15px;
color:#fff;
text-decoration: none;
border-left: 1px solid #fff;
}

.navigation li a:hover { background:#09F; }

.content
{
background:url(sideBarBg.jpg) repeat-y left top #eee;
}

.contentBody
{
width:650px;
float:right;
padding:20px;
}

.contentBody p { text-align:justify; line-height:17px;}

.contentBody h2
{
margin: 0 0 .5em;
}

.sideBar
{
width:250px;
float:left ;
padding:20px 10px;

}
.sideBar h3
{
margin: 0 0 .5em;
}

.footer
{
background:#ccc;
padding: 20px;
text-align:left;
}
نوشته شده در سه شنبه 2 مهر 1392 ساعت 14:18 توسط : padideh | دسته : | 192 بازدید
  • []


  • سفارش تبليغات
    سفر به ترکیه | فرش کاشان | آژانس هواپیمایی | منزل مبله در شیراز | کفسابی | هتل و اقامت | آموزش بازاریابی | میز کانتر | گیت کنترل تردد | نوبت دهی پزشکان شیراز | پاپ آپ نمایشگاهی | دکتر نوروزیان | منزل مبله شیراز | طلایاب | سفر به تایلند| ثبت شرکت | راهنمای سفر | سفر به گرجستان | سفر به روسیه | منزل مبله | فلزیاب | محمد دبیری
    X
    تبليغات