Instagram
اخبار سایت :
  • هیچی فقط همیشه سالم و سلامت باشین :دی

آموزش 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

 

 

 

 

 

// Links

 

 

 

 

 

// Links

 

سایتتون فوق العادست .
دست گلتون درد نکنه .

نام
ایمیل (منتشر نمی‌شود) (لازم)
وبسایت
:) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
نظر خصوصی
مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
کد امنیتی
کلاس های آنلاین فعال

برای افزایش دانش عمومی کاربران سعی بر این داریم که کلاس های آنلاینی برگزار کنیم. لیست این کلاس (ها) را می توانید در زیر ببینید. این قسمت را هر روز چک کنید تا از کلاس ها و اخبار جدید با خبر شوید. کلاس ها توسط همین کاربران و دوستان شما برگزار میشود. اگر مایل به برپایی کلاس آموزشی ای در هر زمینه ای هستید با مدیر تماس بگیرید.

مدرس: محمد و اقبال
آموزش PHP - جلسه اول
پنجشنبه 04 تیر 1394 - 17:00
هیچ کلاس فعالی موجود نیست.
کاربران آنلاین
آمار
مطالب : 792
نظرات : 4371
تعداد اعضا : 36613
افراد آنلاین : 4
بازدید امروز : 512
بازدید دیروز : 1,284
گوگل امروز : 20
گوگل دیروز : 136
بازدید هفته : 512
بازدید ماه : 31,424
بازدید سال : 377,023
بازدید کلی : 10,771,499