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