چینش صفحه – یک ستون – عرض ثابت

در این مجموعه آموزشی تلاش خواهد شد تا با ساختار و چینش های استاندارد و مختلف از صفحات وب سایت با استفاده از لایه ها آشنا شوید . مطالب به صورت کاملا کاربردی ، ساده و کوتاه ارائه خواهند شد و آشنایی اولیه با HTML و CSS مورد نیاز است. در این وبلاگ سعی شده است مطالب مورد نیاز برای یادگیری و درک این آموزشها نیز به صورت موازی ارائه شود. امیدوارم که این مجموعه آموزشی مورد توجه و استفاده شما دوستان و همراهان عزیز قرار گیرد . پیشنهادات و انتقادات سازنده شما می تواند در افزایش کیفیت مطالب بسیار تاثیر گذار باشد .

پیشنهاد میشود قبل از خواندن این مطلب آموزشهای ارائه شده در باره CSS را مرور کنید .

• آشنایی با CSS Positioning

• آشنایی با CSS float

• آشنایی با Display , Visibility در CSS

• گزینشگرهای تو در تو , گزینشگرهای گروهی در CSS

• آشنایی با مفهوم Margin , Padding , Border در CSS

• افزایش سرعت , کاهش مصرف پهنای باند – CSS Sprite

• نمایش یکسان وب سایت در مرورگرهای متفاوت – CSS Reset

• اندازه فونت متغیر و ثابت

آموزش چینش صفحه با ساختار یک ستون با عرض ثابت به وسیله CSS

این نوع از ساختار را می توان به عنوان پایه ای برای تمامی ساختارهای متداول در نظر گرفت .

کلاسها و همچنین نحوه کد نویسی بر اساس استانداردهای W3C و روش های متداول در دنیا انتخاب شده است . چینش بر اساس زبان فارسی و از راست به چپ است ( rtl )

نمایش نمونه

ساختار HTML

در این نوع ساختار صفحه به چند قسمت اصلی تقسیم بندی شده است ( container , header , navigation , content , footer )

<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">
        <h2>آموزش چینش صفحات وب سایت با استفاده از CSS</h2>
        <p>کد نویسی بر اساس استاندارد W3C انجام شده است</p>
        <p>چینش بر اساس زبان فارسی و از راست به چپ است - rtl </p>
    </div>
    <div class="footer"> Copyright©webtarget.ir|2011 </div>
</div>

کدهای CSS

در این خود آموز تلاش شده است از بازگو کردن مطالب ابتدایی صرف نظر شود .

نکات مهم در چینش صفحه

• CSS Reset

  در این خود آموز از تکنیک CSS Reset برای استاندارد سازی استفاده شده است .

• استفاده از عرض 960px

  در این نوع چینش از عرض 960px استفاده شده است . این عرض با توجه رزولوشن 1024*768 انتخاب شده است .

• margin: 0 auto

  از این تکنیک برای در مرکز قرار دادن چینش در صفحه استفاده می شود . در استفاده از این تکنیک باید به خاطر داشته باشید که یک عرض برای چینش در نظر گرفته شود. به طور مثال در چینش فوق از عرض 960px استفاده شده است .

• اندازه فونت متغیر

  در این چینش از اندازه گذاری متغیر برای فونت استفاده شده است . برای آشنایی با این نوع از اندازه گذاری توصیه می شود مطلب اندازه فونت متغیر و ثابت

  را مطالعه نمائید .

@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
{
    margin: 0 auto;
    width: 960px;
    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
{
    padding: 20px;
    background:#eee;
}
.content p { text-align:justify; line-height:17px;}

.content h2
{
    color:#000;
    margin: 0 0 .5em;
}

.footer
{
    background:#ccc;
    padding: 20px;
    text-align:left;
}