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

بخش ششم)

۱۹.امروز بخش آخر تبدیل به صفحه ی وب است و فقط پایین صفحه یا 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>تمام حقوق طراحی این سایت با فتولیا است.©۲۰۱۱</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" />

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