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

بخش پنجم)

18.در اين بخش مي خواهيم قسمت محتويات را اضافه كنيم.اين بخش يك تفاوت با بخش هاي بالايي دارد و آن هم اين است كه ارتفاع (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>

همانطور كه مي بينيد،2 تگ 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="#">نظرات (8)</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 كاربرد مهمي دارد.