شما قصد دارید صفحه ای
داشته باشید که در آن ستونهایی مناسب با نیاز تان ایجاد شده است. مثلا
اگر header و یک ستون برای نوشتن پستها و یک
ستون در کنار ستون پستها به عنوان sidebarو برای قرار دادن اطلاعات جانبی مانند آیکون فید، لینک دوستان،
آمار بازدید و ...و همینطور در انتهای
ستونها یک ستون کم ارتفاع به عنوان footer
داشته باشیدحدودا صفحه ای را به صورت زیر
خواهید داشت:آموزش
طراحی css قالب وبلاگ تک ستونه دو ستونه سه
ستونه منوی css منوی کشویی
css
<< تصویر
شماره یک >>
در تصویر بالا شما یک قالب
دو ستونه را مشاهده میکنید که علاوه بر دو ستون از یک
header و یک footer
نیز برخوردار است پس در اصل در این قالب چهار ستون وجود دارد
زیرا بیننده فقط ستونهای بلند وسط صفحه را به حساب می آورد و میگوید دو
ستونه ولی طراح با چهار ستون سرو کار دارد و header
و footer هم هر کدام یک ستون محسوب
می شوند.
در اینجا به یکی از اصلی
ترین نکات در css می پردازیم و آن نحوه
جایگزین کردن ستونها در مکان مناسب خودشان است. برای بهتر فهمیدن مفهوم
جایگزینی به تصاویر زیر توجه کنید:
<< تصویر
شماره دو >>
در قسمت یک تصویرشماره دو، یک قالب سه
ستونه را مشاهده میکنید. عرض ستون زرد 600 پیکسل است و به علت عرض زیاد
یک سطر را به خودش اختصاص داده حالا اگر عرض این ستون را کم کنیم و به
300 پیکسل برسانیم (قسمت دو
تصویرشماره دو) ستون صورتی با عرض 200 پیکسل
به طور خودکار به کنار ستون زرد منتقل می شود و ستون سبز هم جای ستون
صورتی را میگیرد و در آخر ستونها به شکلی که در قسمت سه
تصویرشماره دو
مشاهده می کنید جایگزین می شود. مهمترین نکته در طراحی
cssتنظیم کردن شکل ظاهری ستونها و قرار
دادن آنها در مکان مناسب خودشان است و طبق توضیحاتی که داده شد به این
نتیجه می رسیم که با کم کردن عرض ستونها می توانید چندین ستون را در یک
سطر و در کنار هم قرار دهید و یا با زیاد کردن عرض ستونها هر سطر را به
یکی از آنها اختصاص دهید.
میزان فاصله میان یک ستون از ستونهای اطرافش نیز قابل تنظیم است.
نکته مهم دیگری که در
طراحی
css
وجود داردقانون ظرف و مظروف است. این نکته
بدین معناست که هر ستون می تواند ستونهای
دیگری را در خود جای دهد مثلا در تصویر شماره یک، ستوهای قابل مشاهده (header
- footer - side bar ) در یک ستون کلی تر قرار گرفته اند که به
آنها نظم می دهد و باعث می شود تا ترتیب شان را از دست ندهند. برای
توضیح این مسئله در نمونه های دیگر میتوانید در تصویر شماره یک به ساید
بار سمت چپ توجه کنید این ساید بار یا ستون جانبی مکانی است برای قرار
دادن اطلات مازاد یک وبلاگ یا وبسایت، اطلاعاتی مانند لینک دوستان،
موضوعات، آرشیو و ... یعنی شما باید هر کدام از این قسمتها را به طور
مجزا از یکدیگر ولی به صورت منظم و زیر هم در side
bar قرار دهید. برای این کار باید ستونهای کوچکتری را در ساید
بار طراحی کنید که هر کدام یکی از قسمتهای اطلاعات مازاد وبگاه را در
خود جای دهند. در نتیجه ساید بار سمت چب ظرفی برای نگهداری محتویاتش
محسوب می شود.
اگر به
htmlعادت کرده باشید می دانید که ننوشتن برخی از کدها (هر چند
مهم) به شکل ظاهری web page مورد نظر لطمه
ای وارد نمی کند
ولی رعایت روش صحیح کد نویسی در صفحات
xhtmlاجباریست. مثلا میتوانید قسمت head
را از یک صفحه
htmlحذف کنید بدون اینکه در نمایش آن دچار مشکل شوید ولی
xhtmlاینگونه نیست.
بستن تگها در
xhtmlاجباریست یعنی شما مجبورید کدهای مختلف را با حالت
< >
و با< /> ببندید حتی تگهای تکی مانند
<em> و <br>و موارد مشابه آنها نیز نیاز دارند تا به صورت
<br /> ظاهر شوند. توجه کنید که بعد از
کاراکتر ( / )
باید یک فاصله بگذارید و بعد کد مورد نظر را تایپ کنید.
رعایت نوشتن مقادیر خصیصه
ها در میان کوتیشن ( " ) در
xhtmlبسیار مهم و ضروریست در صورتی که رعایت نکردن این مسئله در
htmlمشکلات زیادی ایجاد نمیکند.
htmlبه کوچک یا بزرگ بودن حروف عکس العملی نشان نمی دهد ولی در
xhtmlمجبورید همه المان ها، مقادیر و خصیصه های آنها را با حروف کوچک
بنویسید.