طرح های بی نظیر باز کردن مرزهای طراحی جدید
دلایل زیادی برای استفاده از جداول برای طرح وجود ندارد . یکی از دلایل مکرر افراد برای ادامه استفاده از آنها این است که طرح CSS را سخت می کند. اگر چه اسکریپتینگ CSS منحنی یادگیری را شامل می شود، زمانی که شما متوجه چگونگی انجام طرح CSS هستید، ممکن است از اینکه چگونه می توان آن را بسیار شگفت زده کرد. و هنگامی که یاد می گیرید، شما باید دومین دلیل رایج را برای استفاده از CSS در نظر بگیرید: "سریعتر برای نوشتن جداول سریعتر است". سریعتر است زیرا شما می دانید جداول، اما هنگامی که شما CSS را یاد می گیرید، ممکن است همانقدر سریع باشد با آن.
پشتیبانی مرورگر از موقعیت CSS
موقعیت یابی CSS در تمامی مرورگرهای مدرن به خوبی پشتیبانی می شود . به استثنای اینکه شما در حال ساخت یک سایت برای Netscape 4 یا Internet Explorer 4 هستید، خوانندگان شما نباید هیچ مشکلی را در مشاهده صفحات وب خود در CSS مشاهده کنند.
بازخوانی نحوه ساخت یک صفحه
هنگام ساخت یک سایت با استفاده از جداول، شما باید به صورت جدولی فکر کنید. به عبارت دیگر، شما در مورد سلول ها و ردیف ها و ستون ها فکر می کنید. صفحات وب شما این رویکرد را منعکس می کنند. هنگامی که شما به یک طراحی موقعیت یاب CSS حرکت می کنید، شما شروع به فکر کردن به صفحات خود از لحاظ محتوایی می کنید، زیرا محتوا را می توان در هر جایی که می خواهید در طرح قرار دهید، حتی در بالای محتوای دیگر قرار دهید.
وب سایت های مختلف ساختارهای مختلفی دارند. برای ایجاد یک صفحه موثر، قبل از دادن محتوا به آن، ساختار هر صفحه داده شده را ارزیابی کنید. یک صفحه نمونه ممکن است شامل پنج بخش متمایز باشد:
- هدر صفحه اصلی تبلیغات بنر، نام سایت، لینک های ناوبری، عنوان مقاله و همچنین چند چیز دیگر.
- ستون راست این سمت راست صفحه با جعبه جستجو، تبلیغات، جعبه ویدئو و مناطق خرید است.
- محتوا متن یک مقاله، پست وبلاگ یا سبد خرید - گوشت و سیبزمینی صفحه.
- تبلیغات درون خطی تبلیغات در داخل محتوای درون خطی.
- پاورقی ناوبری پایین، اطلاعات نویسنده، اطلاعات کپی رایت، تبلیغات بنر پایین و لینک های مرتبط.
به جای قرار دادن این پنج عنصر در یک جدول، از عناصر بخش بندی HTML5 برای تعریف بخش های مختلف محتوا استفاده کنید و سپس از موقعیت CSS برای قرار دادن عناصر محتوا در صفحه استفاده کنید.
شناسایی بخش های محتوای شما
پس از تعریف محتویات محتوای مختلف سایت خود، باید آنها را در HTML خود بنویسید. در حالی که شما می توانید، به طور کلی، بخش های خود را در هر جهت قرار دهید، ایده خوبی است که ابتدا مهمترین بخش های صفحه خود را قرار دهید. این رویکرد همچنین بهینه سازی موتورهای جستجو کمک خواهد کرد.
برای نشان دادن موقعیت، یک صفحه با سه ستون پیش بینی کنید، اما هیچ هدر یا پاورقی وجود ندارد. شما می توانید موقعیت را برای ایجاد هر گونه طرح شما دوست دارید استفاده کنید.
برای یک طرح سه ستون، سه بخش را تعریف کنید: ستون چپ، ستون سمت راست و محتوا.
این بخش ها با استفاده از عنصر ARTICLE برای محتوا و دو عنصر SECTION برای دو ستون نمونه سازی می شوند. همه چیز نیز ویژگی خاصی دارد که آن را شناسایی می کند. هنگامی که از ویژگی id استفاده می کنید، باید یک نام منحصر به فرد برای هر شناسه ارسال کنید.
موقعیت محتوا
با استفاده از CSS، موقعیت را برای عناصر ID'd خود تعریف کنید. اطلاعات موقعیت خود را در یک تماس سبک مانند این ذخیره کنید:
#محتوا {
}
محتوا درون این عناصر به همان اندازه که می تواند باشد، یعنی 100 درصد از عرض مکان فعلی یا صفحه را در نظر بگیرد. برای تاثیر بر مکان یک بخش بدون مجبور کردن آن به عرض ثابت، پاک کردن یا خواص حاشیه را تغییر دهید.
برای این طرح، دو ستون را به عرض ثابت تنظیم کنید و سپس موقعیت خود را به صورت مطلق تنظیم کنید، تا جایی که در HTML پیدا نشود، تحت تاثیر قرار نمی گیرند.
# چپ ستون {
موقعیت: مطلق؛
سمت چپ: 0؛
عرض: 150 پیکسل؛
حاشیه سمت چپ: 10 پیکسل؛
حاشیه بالا: 20 پیکسل.
رنگ: # 000000؛
padding: 3px؛
}
# راست-ستون {
موقعیت: مطلق؛
چپ: 80٪؛
بالا: 20 پیکسل؛
عرض: 140px؛
padding-left: 10px؛
z-index: 3؛
رنگ: # 000000؛
padding: 3px؛
}
سپس برای محتویات محدوده، حاشیه ها را در سمت راست و چپ تنظیم کنید تا محتوای دو ستونی بیرونی همپوشانی نداشته باشد.
#محتوا {
بالا: 0px؛
حاشیه: 0px 25٪ 0 165px؛
padding: 3px؛
رنگ: # 000000؛
}
تعریف صفحه شما با استفاده از CSS به جای یک جدول HTML نیازمند مهارت فنی کمی است، اما بازده از طرحهای انعطافپذیرتر و پاسخگوتر و راحتتر ساختن تنظیمات ساختاری به صفحه شما پیروی میکند.