تبدیل قالب به صفحه ی وب
بخش ششم)
۱۹.امروز بخش آخر تبدیل به صفحه ی وب است و فقط پایین صفحه یا 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" />
خوب دوستان عزیز،کار تبدیل قالب به صفحه وب هم تموم شد.فقط شاید برای بعضی از دوستان سوال پیش بیاد که،خوب صفحه مون رو که ساختیم،چطور آپلود کنیم.در یک بحث در آینده نیز این موضوع را شرح خواهیم داد.از همراهی تون ممنونم.امیدوارم لذت برده باشید 😉
سلام مرسی خیلی خوب بود
سری آموزش وبلاگ نویسی شما خوب است
your web is very nice
and all of your text is ADVANTAGE
hi
thank you very much 🙂
جوونمرد حیف نیست pdf این آموزش رو تو یه فایل نذاری برا دانلود؟
سلام
مرسی واقعی جالب بود استفاده کردم.
موفق باشید
ممنون از کاملتون
واقعا تو کل سایت ها تک بود،چون دنبال این موضوع بودم و فقط اینجا پیدا کردم
بازم ممنون
سلام
ممنونم.خوشحالیم که مطلب ما به درد شما خورده است و همین برایمان کافیست.
موفق باشید 😉
سلام،
واقعا عالی بود.
این منبعشم مثل اینکه لینکش مشکل داشت.
حتما برا ترجمه ش زیاد زحمت کشیدی.
دستت درد نکنه.
حق ج یارت.
سلام دوست عزیز
ممنونم.وقتی یه نفر مقاله رو می خونه و ازش استفاده می کنه همه خستگی از تن آدم درمیاد.لذت اصلی در همینه
ممنون که نظر دادید
موفق باشید
متشکر از لینک کردنتون بنده شما لینک کردم
سلام دوست من
متشکرم
موفق باشید 😉