چینش صفحه دو ستونه با عرض ثابت به وسیله CSS
این نوع از چینش در بسیاری از وب سایت ها مورد استفاده قرار میگیرد . با توجه روزلوشن های متغیر و صفحات نمایش گوناگون ، این نوع از چینش می تواند یک ساختار مدرن را برای وب سایت شما ایجاد نماید . با توجه نوع و تکنیک مورد استفاده در این نوع از چینش توضیحات بیشتری ارائه خواهد شد .
در این نوع از چینش یک بخش با نام wrapper اضافه شده است . این نوع از چینش ترکیبی از چینش fix و liquid است . قسمت های header , navigation , footer دارای ترکیبی از ساختار متغیر و ثابت هستند .
ساختار HTML
[codesyntax lang=”php”]
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ |
<div class="container"> <div class="header"> <div class="wrapper"> <h1><a href="http://www.webtarget.ir/">webtarget.ir</a></h1> <h2>دو ستون - عرض ثابت + لایه های گسترده</h2> </div> </div> <div class="navigation"> <div class="wrapper"> <ul> <li><a href="#">خانه</a></li> <li><a href="#">درباره ما</a></li> <li><a href="#">خدمات</a></li> <li><a href="#">ارتباط با ما</a></li> </ul> </div> </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"> <div class="wrapper"> Copyright©webtarget.ir|۲۰۱۱ </div> </div> </div> |
[/codesyntax]
کدهای CSS
نکات مهم در چینش صفحه
-
wrapper
از class تعریف شده با نام wrapper برای کنترل محتویات هر یک از این بخش ها استفاده شده است که به صورت مجزا برای هر قسمت تعریف شده است .
-
css comment
در کد نویسی css از تکنیک comment گزاری برای خوانایی بیشتر کدهای استفاده شده است که در افزایش بهره وری یک طراح وب سایت بسیار مهم و تاثیر گزار است . استفاده از این استاندارد زمانی اهمیت پیدا خواهد کرد که تعداد خط کدهای css شما افزایش یابد و در مواقعی به بیش از ۲۰۰۰ خط برسد . در این مواقع نوشتن توضیحات در کدهای css الزامیست .
[codesyntax lang=”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: ۰; padding: ۰; border: ۰; outline: ۰; } ol, ul { list-style: none; } body { font:۶۲.۵%/۱.۷em Tahoma, Arial, sans-serif;direction:rtl;} /* ---------- Requirment ----------*/ .container {font-size:۱.۲em;} .clearfloat {clear:both; height:۱%;} h1 , h2 , h3 { font-family:Arial, Helvetica, sans-serif;} h1 { font-size:۱.۸em;} h2 { font-size:۱.۶em;} h3 { font-size:۱.۴em;} /* ---------- Main -----------*/ .wrapper{margin:۰ auto;} /* ---------- Header -----------*/ .header { background:#ccc; } .header .wrapper { padding:۲۰px; width:۹۲۰px;} .header h1 { text-align:left;} .header h1 a{ text-decoration:none; color:#۰۹F;} /* ---------- Navigation -----------*/ .navigation .wrapper { width:۹۶۰px;} .navigation { background:#۳۳۳; height:۳۰px; line-height:۳۰px; } .navigation ul li { float:right; } .navigation li a { display: block; height:۳۰px; padding:۰ ۱۵px; color:#fff; text-decoration: none; border-left: ۱px solid #fff; } .navigation li a:hover { background:#۰۹F; } /* ---------- Content -----------*/ .content { margin:۰ auto; width:۹۶۰px; background:url(sideBarBg.jpg) repeat-y left top #eee; } .contentBody { width:۶۵۰px; float:right; padding:۲۰px; } .contentBody p { text-align:justify; line-height:۱۷px;} .contentBody h2 { margin: ۰ ۰ .۵em; } /* ---------- Side Bar -----------*/ .sideBar { width:۲۵۰px; float:left ; padding:۲۰px ۱۰px; } .sideBar h3 { margin: ۰ ۰ .۵em; } /* ---------- Footer -----------*/ .footer .wrapper { width:۹۶۰px;} .footer { background:#ccc; padding: ۲۰px; text-align:left; } |
[/codesyntax]
منبع : وب تارگت
لینک کوتاه این محصول : http://ipmg.ir/?p=451
دیدگاه ها (بدون دیدگاه)