آموزش CSS - طراحی یک سایت بدون استفاده از جدول ها

بیایید به
روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید
معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم
استانداردی بنام W3C را تصویب کردند . در این زمان نیاز عمده ای حس میشد که محتویات
سایت از طراحی جدا شود . در اینجا بود که سر و کله CSS پیدا شد و مسئولیت نمایش نمای صفحات را بعهده گرفت و XHTML نیز برای نمایش اطلاعات بگار گرفته شد .



چرا
باید بجای جدول از کد CSS استفاده کرد ؟

اول
اینکه کد شما خیلی کوتاه تر میشه ، حتی نصف !


دوم
اینکه سرعت لودینگ سایت شما بیشتر میشه .


راحت
تر تغییر مییابد : شما یک فایل CSS را تغییر می دهید و کل سایت شما تغییر می یابد .


مطالب از
قالب سایت میشود .


در
این مقاله شما یاد میگیرید چگونه بجای جداول از CSS وکلاس های آن استفاده کنید .

ساخت
کلاسی برای عناصر تگ : اولین قدم
ساخت کلاس CSS است که المنت های تگ از آن استفاده میکنند . بصورت زیر :

div.leftnav{




background:
white;



color:
black;



/*
other display information here */



/*
add Positioning information here */



}

این
کلاس بسیار ساده است و در اصل الان کاری انجام نمیدهد . فقط متن سیاه را روی زمینه
سفید تعریف میکند . شما باید از این المنت در جایی از صفحه استفاده کنید .


موقعیت
یابی وابسته ساده :

این
بدین معناست که ما فقط هر عنصر را در موقعیتش قرار میدهیم و بدین تعریف کردن جای
دقیق آن در صفحه .

div.leftnav{



background:
white;



color:
black;



/* Other display
information here */



width:
15%;



}


خوب
. ما چه انجام دادیم ؟ ما گفتیم که هدایتگر چپ باید در سمت چپ باشه ، جاییکه در
صفحه قرار میگیرد . این بد نیست ، اما برای انعطاف بیشتر ممکنه شما به موقعیت یابی
مطلقی نیاز داشته باشید . همچنین این خیلی
مهمه که بدونین که چیزی که شما تا حالا انجام دادید موقیت نمایی اصلی نیست . تمام
چیزی که تعریف کردید Width بود . بنابرین یک المنت با پهنای 15% ساخته خواهد شد .




موقعیت
نمایی مطلق . اضافه کردن border و margin :

موقعیت نمایی
مطلق به معنای این است که شما بگویید دقیقا المنت های شما کجای صفحه ظاهر شوند .
اینکار با تعریف خاصیت های top ,
bottom, left , right امکان پذیر میشود :

div.content{



background: white;




color:
black;



position: absolute;
/* Says which positioning we are using */



left: 17%; /* 17%
from the left side of the screen */



width: 69%; /* This
is the width */



}


نکته
اینجاست که در کد بالا فقط خاصیت left تعریف شده،
این کافیه ! نیازی نیست که شما تمامی تمام خاصیت هایش را تعریف کنید . اما برای
انعطاف پذیری بیشتر ممکنه خودتون بخواهید اینکارو بکنید . بطور مثال ممکنه شما
بخواهید یک منو در سمت راست اضافه کنید:

div.rightnav{



background: white;




color:
black;



position:
absolute;



left:
83%;



width:
10%;



top: 80px; /* 80
pixels from the top */



}


اساسا در
موقعیت نمایی مطلق این المنت ها معانی زیر را دارند:

Left : فاصله از چپ صفحه ، معمولا بر حسب درصد

Right : فاصله از راست صفحه ، معمولا بر حسب درصد

Top: فاصله از بالای صفحه ، معمولا بر حسب پیکسل

Bottom : فاصله از پایین صفحه ، معمولا بر حسب
پیکسل



نکته
اینکه bottom به ندرت استفاده میشود ، اما گاهی لازم میشود . اگر شما از 4 یا 3
تا پراپرتی با هم استفاده کنید ،باید قادر به قرار دادن تگ DIV در هر کجا که میخواهید
باشید . همچنین در نظر داشتن این نکته مهم
است که راه های بیشتری نیز برای موقعیت نمایی یک المنت در کنار موقعیت نمایی مطلق
وجود دارد . اما تمام مرورگر های وب آن راه ها را پشتیبانی نمیکنند
.



افزودن
Border :

ممکنه شما
بخواهید کمی عناصرصفحه را با لبه کنار صفحه یا هر چیز دیگر فاصله دهید ،
border ها برای این امر مناسبند . اما صفحه خود را در مرورگر های مختلف
تست کنید تا نتیجه درستی دریافت کنید . و حال طرز ساخت حاشیه
ها:

div.rightnav{



background: white;




color:
black;



position:
absolute;



left:
83%;



width:
10%;



top: 80px; /* 80
pixels from the top */



border-color:
white; /* Keep the border invisible */



border-style:
solid; /* It is a solid invisible line which is fine */



border-bottom-width:
2px; /* These attributes are pretty self-explanatory */



border-top-width:
2px;



border-left-width:
3px;



border-right-width:
4px;



}

افزودن
حاشیه یا margin :

Margin ها ابزار های قدرتمندی در سایت های css میباشند .در مقدمه میبینید که شما میتوانید چیزی را بکمک تعیین
فاصله درصدی از طرفین margin ها در وسط قرار دهید .

div.content{



background: white;




color:
black;



margin-left: 20%;
/* 20% from the left side of the screen */



margin-right: 20%;
/* 20% from the right side of the screen */



}

نقصان
وجود پشتیبانی مرورگر ها :

پشتیبانی
نشدن تمام دستورات css توسط تمامی مرورگر ها مشکلات زیادی را برای طراحان پیش آورده .
Mozilla ( و مرورگر های زیر مجموعه آن مانند FireFox ) و Opera بروز رسانی بسیار خوبی در پشتیبانی دستورات css دارند . اما Internet
Explorer کمی عقب مانده است . کد هایی که در این مقاله نوشتیم
توسط تمامی مرورگر ها پشتیبانی میشود .



ناسازگاری
بین مرورگر ها :

بیشتر مردم
از آخرین نسخه مرورگرها استفاده می کنند. مرورگر های گوناگون کد css شما را بگونه های مختلف
تفسیر میکنند . اصلی ترین مرورگر در این زمینه IE است که ممکنه کد های border را بگونه دیگری نشان دهد .



افزودن
تگ DIV :

افزودن تگ
DIV برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است
:





// Insert
Links






همانطور که
می بینید خیلی ساده اینکار انجام شد و بیشتر کار در فایل CSS انجام میشود . شما میتوانید از تگ DIV در هرجای صفحه استفاده کنید . در انتها اینجا یک صفحه XHTML ساده را می بینید که کد css آنرا سافته و نمای آن سه ستون
دارد :





//
Content








"leftnav">



// Links









"rightnav">



//
Links