تبدیل قالب به صفحه ی وب

بخش پنجم)

۱۸.در این بخش می خواهیم قسمت محتویات را اضافه کنیم.این بخش یک تفاوت با بخش های بالایی دارد و آن هم این است که ارتفاع (Height) آن متغیر است،پس نمی توانیم یک تصویر ثابت به عنوان پس زمینه انتخاب کنیم و باید از پس زمینه ی تکرار شونده استفاده کنیم.فقط در بالا،کمی سایه ی خاکستری هست که ثابت خواهد بود.به PS رفته و پوشه های لایه (LayerSet) ی panel و post را مخفی کنید(با برداشتن چشم از کنار آنها).حالا از مسیر Layer > Flatten Image تمام لایه ها را یکی می کنیم، بعد از زدن ok.آن قسمت خاکستری را انتخاب نموده و در یک لایه ی جدید،کپی کرده و با نام “main-fixed-bg.jpg” ذخیره کنید.منظورمان شکل زیر است:

حالا نوبت به پس زمینه ی تکرار شونده می رسد.یکی از نکات مثبت این نوع پس زمینه،حجم پایین آن است که در ادامه مشاهده می کنید.بعد از انتخاب ابزار Rectangular Marquee Tool یا همان کلید M،روی آن راست کلیک کرده و گزینه ی سوم را انتخاب کنید.مزیت این کار این است که با یک بار کلیک،محدوده ای به ارتفاع px1 و طول کل صفحه انتخاب می شود.دقیقا همان چیزی که نیاز داریم.پس کمی پایین تر از بخش خاکستری کلیک کرده مثل تصویر قبل و با نام “main-repeated-bg.jpg” ذخیره کنید.

برای جایگذاری این بخش چند کد کوچک HTML را باید اضافه کنید.به سراغ EW رفته و کد زیر را قبل از تگ پایانی “container” اضافه نمایید.

  <div id="main">
    <div id="fixed-bg"> </div>
  </div>

همانطور که می بینید،۲ تگ div استفاده شده است.یکی برای نگهداری کل این بخش که دارای پس زمینه ی تکرار شونده است و یکی هم در داخل آن و برای پس زمینه ی ثابت بالا.برای آغشته کردن این کد به CSS،در بخش استایل ها،کد های زیر را اضافه کنید.

#main{
	background:url('images/main-repeated-bg.jpg') repeat-y ;
}

#main #fixed-bg{
	background:url('images/main-fixed-bg.jpg')
}

فکر نمی کنم نیازی به توضیح باشد فقط در بخش اول از repeat-y برای تکرار تصویر در محور عمودی استفاده کردیم.

حالا دو بخش دیگر یعنی بخش ارسال و منو را اضافه می کنیم.کد ما به این صورت تغییر می کند:

  <div id="main">
    <div id="fixed-bg"> </div>

    <div id="menus"></div>
    <div id="posts"></div>
  </div>

کد CSS زیر را هم به بخش استایل ها اضافه نمایید:

#main #menus{
	width:198px;
	float:right;
	margin:0 71px 0 0;
}

#main #posts{
	width:462px;
	float:left;
	margin:0 0 0 100px
}

برای درک بهتر اندازه ها،می توانید به آخر بحث هشتم مراجعه کنید.

در PS نوار زرد رنگ عنوان پنل را طبق معمول گذشته و با نام panel-title.jpg ذخیره کنید(با عرض px1).برای بدنه ی پنل نیز همین کار را بکنید و با نام panel-body.jpg ذخیره نمایید.در این قسمت باید تصمیم بگیریم با توجه به اینکه تعداد پنل ها مشخص نیست، از چه ساختاری برای طراحی پنل ها استفاده کنیم.می توانیم از ساختاری شبیه زیر استفاده کنیم:

<div class="panel">
 <h3 class="title"></h3>
 <div class="body"></div>
</div>

چطورِس؟خوبِس.پس کد را داخل menu قرار دهید.فقط دقت کنید که از class به جای id استفاده کردیم.در داخل title عنوان “دوستان” رو وارد کنید و در بخش css،سبک زیر را اضافه کنید:

#main #menus .panel .title{
    background:url('images/panel-title.jpg') repeat-x;
    margin:0;
    padding:10px 10px 0 0;
    height:39px;
    color:#993300;
}

فرض کنید می خواهید تعدادی لینک را به این بخش اضافه کنید.یکی از بهترین روش ها استفاده از لیست ها است.مثل:

      <div class="body">
       <ul>
        <li><a href="http://cloudcry.com.com">گالری گریه ابر</a></li>
        <li><a href="http://fotolia.ir">مجله فتولیا</a></li>
        <li><a href=”http://web-design.blogsky.com/”>آموزش وب</a></li>
       </ul>
      </div>

برای خوشمزه تر شدن بخش محتویات پنل ،می توانیم CSS زیر را استفاده کنیم:

#main #menus .panel .body{
    font:.7em tahoma;
    background:url('images/panel-body.jpg') repeat-x top;
    margin:0;
    padding:10px 10px 10px;
    color:#993300;
    text-align:justify
}
#main #menus .panel .body a{
	text-decoration:none;
	color:#FF5050;
	border:1px solid transparent
}
#main #menus .panel .body a:hover{
	color:#CC6600;
	background:#FFCCCC;
	border:1px solid #FF4304
}
#main #menus .panel .body ul{
	width:100%;
}
#main #menus .panel .body li{
	border-bottom:1px solid #FF0066;
	padding:4px 0 4px 0
}
ul{
	margin:0;
	padding:0;
	list-style:none
}

می توانید پنل های دیگری نیز اضافه کنید و نتیجه را ببینید.حالا می رسیم به نمایش پست.برای این کار از ساختار زیر استفاده می کنیم:

     <div class="entry">
      <div class="entry_title">
       <h2>بنام خدا</h2>
       <span>88/3/10</span>
       <div style="clear:both"></div>
      <div class="entry_body">
       <p>
   <!--text here-->
       </p>
      </div>
      <div class="entry_meta">
       <a href="#">نظرات (۸)</a> - <a href="#">ادامه ی مطلب</a> - ارسال از جناب آقا
      </div>
      </div>
     </div>

همانطور که مشاهده می کنید این ساختار از سه بخش تشکیل شده است.اولین بخش “entry_title” است که حاوی عنوان و تاریخ ارسال مطلب هست.دومین قسمت،”entry_body” نام دارد که در بردارنده ی متن پست ماست و بخش آخر “entry_meta” است که اطلاعات دیگر پست از قبیل تعداد نظرات،ادامه ی مطلب و نویسنده ی مطلب را ارائه می دهد.

کد CSS این بخش از قرار زیر است:

#main #posts .entry .entry_title h2{
	float:right
}
#main #posts .entry .entry_title span{
	float:left;
	margin:26px 0 0 8px;
	font:bold .9em arial;
	color:#993300
}
#main #posts .entry .entry_body{
    font:.8em tahoma;
    text-align:justify;
    border-top:1px solid #CCCCCC
}
#main #posts .entry .entry_meta,#main #posts .entry .entry_meta a{
    font:.6em tahoma;
    text-align:justify;
    border-top:1px solid #CCCCCC;
    color:#990000
}

این کدها و دیگر سبک های CSS ای که در بالا آمدند ساده هستند و فکر نمی کنم نیاز به توضیح اضافه باشد فقط شاید برایتان سوال بوجود آمده باشد که چرا از کد زیر استفاده کرده ایم؟

<div style="clear:both"></div>

برای اینکه اگر دقت کرده باشید در داخل “entry_title” دو تگ h2 و span را،یکی در سمت راست و دیگری در سمت چپ شناور کرده ایم(float).در این صورت مرورگر آنها را نادیده گرفته و محتویات پایین را به سمت بالا حرکت می دهد تا جایگزین آنها کند.این قطعه کد مثل یک سد مانع از این کار می شود.البته ما که دیدیم با خذف این کد نیز مشکل حادی ایجاد نمی شود ولی هدفمان آشنایی شما به این راهکار بود که در طراحی CSS based کاربرد مهمی دارد.