دسته بندي ها

جستجو

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

جعبه پیام




امکانات


آرشيو

خبرنامه

آمار

آنلاین : 1
بازدید امروز : 12
بازدید دیروز : 7
بازدید هفته گذشته : 34
بازدید ماه گذشته : 90
بازدید سال گذشته : 1611
کل بازدید : 9613

لينک دوستان

چينش صفحه با ساختار دو ستون با عرض ثابت به وسيله 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 | دسته : | 189 بازدید
  • []


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