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

بخش ششم)

19.امروز بخش آخر تبديل به صفحه ي وب است و فقط پايين صفحه يا footer مانده است.پس اگر موافق باشيد برويم سراغ كارمان.لطفا قالب را در PS باز كرده و طبق منوال گذشته(Flat كردن تصوير-انتخاب و ذخيره كردن بخش مورد نظر در فايل جديد) بخش فوتر را ذخيره نماييد.شكل زير را مشاهده مي كنيد.

كد HTML زير را مي بايست بعد از تگ پاياني main قرار دهيد:

  <div id="footer">
   <div id="footer_main"></div>
  </div>

كد CSS مربوط هم از قرار زير است:

#footer{
    height:116px;
    background:url('images/footer-bg.png') no-repeat top;
}

اگر مشاهده كنيد،تا به اينجا پس زمينه ي كار را اضافه كرديم و مي خواهيم در بخش خاكستري وسط يك نگهدارنده براي فوتر ايجاد كنيم.تگ آن را در بالا اضافه كرده ايم(footer_main) و فقط بايد كد CSS كوچكي را محيا كنيم:

#footer #footer_main{
    width:692px;
    height:57px;
	margin-right:55px;
	padding:16px 8px 8px 8px;
	color:#ddd;
	font:.6em tahoma
}
#footer #footer_main a{
    color:#faa
}

حالا مي توانيد محتويات مورد نظر را اضافه كنيد.در اينجا ما براي مثال،چند لينك و كپي رايت را به اين بخش مي افزاييم.ولي قبل از آن بايد نگهدارنده ي آنها را ايجاد كنيم:

  <div id="footer">
   <div id="footer_main">
    <div id="footer_right"></div>
    <div id="footer_left"></div>
   </div>
  </div>

همانطور كه مي بينيد يك نگهدارنده براي سمت راست و يكي هم براي سمت چپ ايجاد كرده ايم كه بايد آنها را شناور كنيم تا در يك سطر قرار بگيرند.

#footer #footer_main #footer_right{
    float:right;
}
#footer #footer_main #footer_left{
    float:left;
}

حالا محتويات:

    <div id="footer_right">
	 <p>تمام حقوق طراحي اين سايت با فتوليا است.©2011</p>
        </div>
    <div id="footer_left">
	 <ul>
	  <li><a href="#">خانه</a> | </li>
	  <li><a href="#">درباره</a> | </li>
	  <li><a href="#">تماس</a> | </li>
	  <li><a href="#">نقشه</a></li>
	 </ul>
         </div>

بعد از اتمام كار،كل CSS را در يك فايل جدا بنام style.css كنار فايل اصلي ذخيره مي كنيم و بوسيله ي كد زير آن را يه صفحه لينك مي دهيم:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

خوب دوستان عزيز،كار تبديل قالب به صفحه وب هم تموم شد.فقط شايد براي بعضي از دوستان سوال پيش بياد كه،خوب صفحه مون رو كه ساختيم،چطور آپلود كنيم.در يك بحث در آينده نيز اين موضوع را شرح خواهيم داد.از همراهي تون ممنونم.اميدوارم لذت برده باشيد 😉