نام کاربری: گذرواژه‌:
انجمن فناوری اطلاعات دانشگاه پیام نور تبلیغات


تعرفه تبلیغات در IT98

طراحی یک سایت بدون استفاده از جدول ها

برچسب‌های کلیدی این موضوع:
کاربران در حال بازدید از این موضوع: 1 مهمان
آخرین ارسال کننده: *setayesh
ارسال‌ها: 1
بازدیدها: 2258
امتیاز دهید
 
  • 0 رأی - میانگین امیتازات: 0
  • 1
  • 2
  • 3
  • 4
  • 5
در گوگل محبوب کنید
انجمن فناوری اطلاعات دانشگاه پیام نور


طراحی یک سایت بدون استفاده از جدول ها

کاربر فعال
تاریخ عضویت: آذر ۱۳۹۲
رشته: کامپیوتر نرم افزار
ترم: شش
دانشگاه: پیام نور
اعتبار: 17
ارسال‌ها: 72
وضعیت : آفلاین
جنسیت: دختر
سپاس ها 116
سپاس شده 33 بار در 25 ارسال
ارسال: #1
ایجاد شده در تاریخ: ۲۲-۹-۱۳۹۳ ۰۵:۵۷ عصر
طراحی یک سایت بدون استفاده از جدول ها




بیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر
هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه
میز جمع کرد و با هم استانداردی بنام W۳C را تصویب کردند . در این زمان
نیاز عمده ای حس میشد که محتویات سایت از طراحی جدا شود . در اینجا بود که
سر و کله 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: ۱۵%;

}



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

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

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

div.content{

background: white;

color: black;

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

left: ۱۷%; /* ۱۷% from the left side of the screen */

width: ۶۹%; /* This is the width */

}



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

div.rightnav{

background: white;

color: black;

position: absolute;

left: ۸۳%;

width: ۱۰%;

top: ۸۰px; /* ۸۰ pixels from the top */

}



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

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

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

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

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

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

● افزودن Border :

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

div.rightnav{

background: white;

color: black;

position: absolute;

left: ۸۳%;

width: ۱۰%;

top: ۸۰px; /* ۸۰ 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: ۲px; /* These attributes are pretty self-explanatory */

border-top-width: ۲px;

border-left-width: ۳px;

border-right-width: ۴px;

}



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

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

div.content{

background: white;

color: black;

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

margin-right: ۲۰%; /* ۲۰% 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>

نویسنده : حسین شرفی

ارسالهای مشابـه و مرتبط

امضا *setayesh
آنکه دنبال حیات ابدی می گردید

کاش یک تا دو قدم

به سوی ظلمت چشم تو قدم بر می داشت

و به یک جرعه ی آن

ابدی می گردید

یافتن تمامی ارسال‌های این کاربر نقل قول این ارسال در یک پاسخ
ارسال پاسخ 


پرش به انجمن:

شبکه‌های اجتماعی درباره ما لینک‌های مهم ابزار
انجمن فناوري اطلاعات دانشگاه پيام‌نور در سال 1389 با هدف رشد و ارتقاي علمي دانشجويان آغاز بکار کرد. در IT98 شما قادرید از کاملترین و بروزترین آرشیو نمونه‌سوالات، جزوات، حل تمرینات، گزارش آزمایشگاه، گزارش کارآموزی، پروژه، مقالات و پایان‌نامه استفاده کنید. IT98.ir با عنوان بزرگترین انجمن دانشجویی رشته کامپیوتر دانشگاه پیام‌نور شناخته میشود.
Copyright (c) 2010-2017 it98.iR, all rights reserved
Template designed by : Mehdi Dastkhosh , Powered by MyBB
صفحه اصلی جستجو بازیهای آنلاین لیست اعضا