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

واضح آرشیو وب فارسی:سایت ریسک: View Full Version : آموزش Css - طراحی یک سایت بدون استفاده از جدول ها javadshahvand03-10-2007, 09:14 PMبیایید به روزهای اولیه وب برگردیم . هیچ استانداردی نبود و هر مرورگر هر روز یه تگ جدید معرفی میکرد. بالاخره یه موسسه همه مرورگر ها رو سر یه میز جمع کرد و با هم استانداردی بنام 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> نویسنده : حسین شرفی سایت ماکرومدیاx سایت ما را در گوگل محبوب کنید با کلیک روی دکمه ای که در سمت چپ این منو با عنوان +1 قرار داده شده شما به این سایت مهر تأیید میزنید و به دوستانتان در صفحه جستجوی گوگل دیدن این سایت را پیشنهاد میکنید که این امر خود باعث افزایش رتبه سایت در گوگل میشود

این صفحه را در گوگل محبوب کنید

[ارسال شده از: سایت ریسک]

[مشاهده در: www.ri3k.eu]

[تعداد بازديد از اين مطلب: 390]