همراهان عزیز ، سلام دوستان گرامی امیدوارم که خوب باشید . خوش مخصوصا دراین هوای برفی .همانطور که در مقاله قبلی گذشته گفته بودیم، در این جلسه از سری آموزشی طراحی قالب سایت به تکمیل بخش css فوتر خواهیم پرداخت که با تکمیل این قسمت،با طراحی قالب سایت با استفاده از فتوشاپ و تبدیل فایل PSD به HTML و CSS بیشتر آشنا میشوید.

در درس گذشته ( » مشاهده جلسه سیزدهم ) قسمت کدهای HTML فوتر یا پانوشت را تکمیل کردیم و در نهایت شکل ظاهری این بخش چیزی شبیه تصویر زیر شده است:

طراحی فوتر سایت با html و css

که قصد داریم با استفاده از css آن را به شکل زیر تبدیل کنیم :

طراحی قسمت فوتر قالب

پس بدون فوت وقت! پوشه ی theme را باز کنید. درون پوشه فایل index.html را با استفاده از مرورگر اینترنتی ( فایرفاکس، اینترنت اکسپلورر، کروم، …) و فایل style.css را بوسیله notepad بازکنید. آخرین بخشی که در فایل style.css وجود دارد باید سطر زیر باشد:

span.comments{display:inline-block;float:left;margin-left:15px;}

کدهایی که در ادامه برای بخش css توضیح خواهیم داد، در ادامه کد بالا قرار خواهند گرفت.

برای بخش فوتر، اگر به یاد داشته باشید رنگ زمینه تمام صفحه در نظر گرفته بودیم و برای این منظور مجبور بودیم سیستم گرید ۹۶۰ را یکبار ببندیم و دوباره باز کنیم! ( رجوع کنید به جلسه گذشته ) پس برای شروع بخش css نیز از کلاس footer-bg شروع خواهیم کرد:

.footer-bg{background:#f93;min-height:250px;padding-top:20px;font:.9em/1.7em tahoma;direction:rtl;text-align:justify;border-top:1px #f63 solid;}

مقدار f93 که مخفف و کوتاه شده ی کد رنگ ff9933 است، همان رنگ نارنجی است که آن را به مشخصه ی background نسبت دادیم. بیشتر مشخصه هایی که در بالا مشاهده میکنید همانهایی هستند که در جلسات قبل مکررا توضیح دادیم و انتظار داریم کارکرد آنها را بدانید برای همین در اینجا از توضیح آنها صرف نظر میکنیم. مشخصه ی min-height میزان حداقل ارتفاع بخش فوتر را دربر میگیرد. یعنی حتی اگر فوتر ما هیچ عنصری نداشته باشد، حداقل ۲۵۰ پیکسل ارتفاع خواهد داشت. padding-top نیز اختصاصا از سمت بالا میزان ۲۰ پیکسل فضا ایجاد خواهد کرد. ( مانند مشخصه ی padding ولی تنها از یک سمت » رجوع کنید به درس سیزدهم آموزش css )، به همین ترتیب border-top را خواهیم داشت که تنها از یک سمت ( در اینجا سمت بالا ) خط مرزی ایجاد خواهد کرد که ضخامت آن ۱ پیکسل، به رنگ f63 ( کمی تیره تر از رنگ زمینه ) و به صورت خط ممتد. پس با اعمال تغییرات بالا به کلاس footer-bg، شکل ظاهری پانوشت به شکل زیر تغییر خواهد کرد:
اعمال رنگ زمینه به فوتر

اعمال رنگ زمینه به فوتر

در گام بعدی باید عناوین ستونهایی را که در بخش فوتر استفاده کرده ایم مشخص کنیم برای همین منظور باید تگهای p را که کلاس footer-title را دارند هدف قرار دهیم :

p.footer-title{font:bold 1.2em/1.6em Arial,tahoma; color:#000;}

به یاد داشته باشید که مشخصه ی color رنگ متن نوشته را تغییر خواهد داد نه رنگ زمینه را. برای اینکه تگهای p که دارای کلاس footer-title هستند را مورد هدف قرار دهیم، باید انتخابگر css را به شیوه ای که در بالا مشاهده کردید تعریف کنیم؛ یعنی p.footer-title

نکته دیگر که باید توجه کنید این است که اگر تمام مشخصه های فونت را درون یک مشخصه ( font ) قرار دهید باید ترتیب آنها را به درستی رعایت کنید. مثلا اگر در کد بالا bold را جای دیگری مثلا بعد از تعیین سایز قلم قرار دهید، تغییرات به درستی اعمال نخواهند شد.
اعمال تغییرات عناوین ستونها

تغییرات در عناوین ستونها اعمال شده است

در گام بعدی ستون “مختصری درباره سایت” را شکل خواهیم داد. همانطور که میدانید این بخش باید رنگ زمینه متفاوتی داشته باشد و چهار گوشه ی آن گرد شده باشند. از جلسات گذشته تمام اینکارها را فراگرفته اید و انتظار میرود خودتان بتوانید این کار را انجام دهید:

.site-about{display:block;background:#fc9;border:1px #963 solid;border-radius:10px;-moz-border-radius:10px;-webkit-border-radius:10px;min-height:200px;padding:7px;}

برای اینکه تغییرات را اختصاصا به قسمت فوق اعمال کنیم باید در css کلاس site-about را بسازیم ( در جلسه قبل این کلاس را در HTML ایجاد کرده بودیم ). با مشخصه ی display نوع نمایش آن را به صورت یک بلوک (Block) تعیین میکنیم و رنگ زمینه مورد نظر را اعمال میکنیم. با استفاده از border خط مرزی برای این ناحیه تعیین میکنیم و با مشخصه ی border-radius نیز گرد شدن گوشه ها را تعیین میکنیم. با مشخصه های min-height و padding هم کاملا آشنا هستید!
css قسمت siteabout

اعمال تغییرات و رنگ زمینه به بخش درباره سایت

از آنجا قبلا کلاس footer-title را تعریف کرده ایم، برای ستون “جدیدترین مطالب” نیازی به تعریف مجدد آن نداریم و مستقیما به سراغ لیست عناوین جدیدترین مطالب میرویم که با تگهای ul و li مشخص کرده بودیم:

.latest-posts ul{display:block; list-style:none;}

کلاسی که کل ستون میانی را در بر دارد، کلاس latest-posts است، با استفاده از کد بالا تگهای ul را که درون قسمت latest-posts قرار دارند را هدف قرار میدهیم! نحوه نمایش لیست را به صورت بلوک تعیین کرده و با استفاده از list-style:none بولتهایی که به طور پیشفرض برای لیستها نمایش داده میشود را حذف کردیم.

.latest-posts ul li{margin-bottom:3px; border-bottom:1px #963 dotted;}

در گام بعدی تگهای li که درون تگهای ul قرار دارند را تنظیم میکنیم برای همین نحوه فراخوانی کلاس به صورت بالا خواهد بود یعنی latest-posts ul li. و با استفاده از margin-bottom برای هر عنصر درون لیست یعنی هر تگ li از پایین ۳ پیکسل حاشیه قرار دادیم و خط مرزی به صورت نقطه چین ساختیم ( dotted ).

.latest-posts li a{display:block; padding:3px; text-decoration:none;}
.latest-posts li a:hover{background:#FFF; color:#C00;}

بعد از تنظیم کردن تگهای li باید تگهای a یا لینکهایی که درون تگهای li قرار گرفته اند را ویرایش کنیم. نحوه نمایش آنها را به صورت بلوک قرار دادیم و با استفاده از text-decoration:none خط زیر لینکها را حذف کردیم. تفاوت سطر دوم با سطر نخست در این است که با کلاس کاذب hover زمانی که مکان نمای ماوس بر روی لینکها قرار بگیرد را شکیل میکنیم. پس تا اینجای کار خواهیم داشت :

ستون جدیدترین مطالب

نحوه نمایش لیست ها و آخرین مطالب

همانطور که در تصویر بالا هم مشاهده میکنید، هنگامی که ماوس بر روی گزینه های لیست قرار گیرد رنگ زمینه و نوشته تغییر میکند.

برای اینکه فاصله متنها و نوشته های ستونهای میانی و سمت چپ را نیز تنظیم کنیم، باید کد زیر را نیز در ادامه داشته باشیم تا نوشته ها فاصله ی کافی از یکدیگر داشته باشند و ستونها زیاد به هم نچسبند:

.latest-posts,.subscribe{padding:7px;}