متانگ چیست  :

 

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

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

 

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

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

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

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

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

 

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

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

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 برای گره زدن تمام اطلاعات بسادگی زیر انجام پذیر است :

<div class = "leftnav">

 

// Insert Links

 

</div>

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

<div class = "content">

 

// Content

 

</div>

 

<div class = "leftnav">

 

// Links

 

</div>

 

<div class = "rightnav">

 

// Links

 

</div>

 

آموزش نکات :HTML پیشرفته – تگ DOCTYPE

آیا تا کنون دقت کرده اید که برنامه های ویرایشگر اچتمل مانند دریم ویور و فرانت پیج در ابتدای صفحات ، یک تگ DOCTYPE قبل از تگ html مینویسند که برداشتن آن نیز تاثیر خاصی در صفحه ندارد ؟ 
<!--[if !supportLineBreakNewLine]-->
<!--[endif]-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

اما کار این تگ چیست ؟ این خط به برنامه مرورگر می فهماند که شما قصد استفاده از HTML نسخه 4 را برای طراحی صفحه وب خود دارید . در صورتی که بخواهید از XHTML جهت طراحی صفحه وب خود استفاده کنید باید کد فوق را کمی تغییر دهید . پس چرا حذف آن تاثیری در صفحه وب ما ندارد ؟ این کد در ایجاد صفحات HTML اختیاری و در صفحات XHTML اجباری است . اگر این تگ را به همراه یک URL در بالای صفحه وب خود اعلان کنید ، سبب میشود که برنامه های مرورگر فعلی ، هنگام باز کردن صفحه شما در مد standards کنار کنند . بدین صورت میتوانید کدهای خود را مطابق استاندارد نوشته و کنترل بیشتری بر چگونگی نمایش این صفحه در برنامه های مرورگر مختلف داشته باشید. در صورت نگذاشتن این کد ، مرورگر از روش های قدیمی تر برای نمایش صفحه شما استفاده می کند . یک مثال عملی :در هنگام تعیین رنگ با شماره های هگزادسیمال ، یک علامت شارپ (#) در ابتدای شماره رنگ قرار میگیرد که حذف آن باعث نادیده گرفتن این رنگ در زمان نمایش صفحه میشود . اما اگر کد DOCTYPE را از ابتدای صفحه پاک کنید ،مرورگرتان از این مورد ایراد نمی گیرد و آن رنگ را نشان میدهد . برای تست این مثال از مرورگر فایرفاکس استفاده کنید . چون مرورگر Internet Explorer بطور معمولی هم از حذف علامت # ایراد نمی گیرد و ممکن است شما فکر کنید علامت # اختیاری است !

نویسنده : عادل حسینی