نوشته حاضر قسمت دوم از سلسله مقالاتی است درباره اصول طراحی صفحات وب بر اساس استانداردهای وب و به بررسی روشهایی برای طراحی و ساخت قالب های دو و سه ستونه شناور با اندازه ثابت ( Fixed )
می پردازد. جهت ادامه به دانسته های قسمت اول نیاز دارید.
قالبهای شناور Float-based Layouts
جهت طراحی قالبهای شناور با اندازه ثابت راه های مختلفی وجود دارد اعم از positioning مطلق
یا استفاده از حاشیه های منفی. بنظر می رسد طراحی Layout های شناور با ساده ترین متدها
امکان پذیر است. با وجود این بایستی کد به گونه ای باشد که با اکثر مرورگرها سازگار بوده و قابل تعمیم باشد.
منظور از Layout های شناور با اندازه ثابت آنست که اندازه عرض عناصر را تعریف کرده
و آنها را به چپ یا راست شناور ( جابجا ) کنیم.
قالبهای دو ستونه شناور با اندازه ثابت
برای ساخت یک قالب دو ستونه شناور ( Two-Column floated Layouts ) با اندازه ثابت به یک چارچوب
پایه در XHTML نیاز است.
منظور از یک چارچوب پایه یک شکل کلی و مصطلح از طراحی سایت ها مثلا لوگو و عنوان
در بالا که به Header شناخته می شود منوی لینک ها سمت راست یا چپ - Navigation - محتوای
اصلی صفحات - Content - در طرف راست یا چپ و یک بخش پایین - Footer - که می تواند
ترکیبی از لینک ها و گرافیک ها باشد است.
در مثال مورد بررسی صفحه XHTML
شامل عناصر زیر است:
- یک محدوده بالایی شامل نشانه ها لوگو و عنوان » branding#
- محدوده اصلی صفحات که در هر صفحه از سایت متن و تصاویر تغییر می کند » content#
- محدوده ای برای راهنمایی و لینک به بخش های سایت » mainNav#
- محدوده پایین که در کل صفحات سایت یکسان است » footer#
کل طرح صفحه در یک عنصر div به نام wrapper محصور شده است که از نظر افقی بوسیله یکی از
روشهای قسمت اول در وسط صفحه قرار می گیرد.
<div id="wrapper">
<div id="branding">
...
</div>
<div id="content">
...
</div>
<div id="mainNav">
...
</div>
<div id="footer">
...
</div>
</div>
در این قالب منو سمت چپ و محتوی اصلی در سمت راست قرار می گیرد.
نکته قابل اشاره تعریف محتوی ( content ) قبل از تعریف منو ( mainNav ) در کد صفحه
XHTML
بدلیل رعایت استانداردهای وب• یعنی خوانایی ( readability ) و قابل استفاده بودن ( usability )
و قابل دستیابی بودن ( accessibility ) است.
•
محتوی اصلی قسمت مهم تر صفحه بایستی ابتدا تعریف شود. دلیل دوم این است که اگر بیننده صفحه
با مرورگری که CSS
را پشتیبانب نمی کند و یا کاربران ScreenReader ها مجبور نباشند که ابتدا لیست طویلی از
لینکها را مشاهده کرده و سپس به مطلب اصلی صفحه برسند.
بطور معمول طراحان وب هنگام ساختن قالبهای شناور هر دو ستون را به طرف چپ جابجا کرده
با استفاده از margin و یا padding باریکه ای بین دو ستون - شیار - در نظر می گیرند.
استفاده از این تکنیک باعث می شود دو ستون بهم چسبیده و مکان آزادی بین آنها وجود نداشته باشد.
و اگرچه در مرورگرهای مدرن مشکلی پیش نمی آید ولی در مرورگرهای باگ دار این مساله باعث
شکستن دو ستون از هم دیگر شده و معمولا یک ستون را به پایین دیگری می اندازد.
این مشکل معمولا در IE بعلت تفسیر نادرست از Box model اتفاق می افتد.
در مرورگرهای استاندارد اگر محتوای یک عنصر بزرگ و بزرگتر شود بسادگی محتوی عنصر در ارتفاع یا
عرض عنصر در برگیرنده خود کشیده می شود ولی در
IE/Win یعنی اینترنت اکسپلورر تحت ویندوز
اگر محتوای عنصر بزرگ شود کل عنصر در عرض صفحه کشیده شده و باعث به زیر افتادن عنصر یا
عناصر کناری به علت کمبود جا می شود.
برای پرهیز از مشکل فوق بایستی از چپاندن لبه به لبه عناصر در عناصر دربرگیرنده شان اجتناب
کرد و بجای استفاده از margin افقی یا padding جهت ایجاد شیار می توان شیارهای مجازی را با استفاده
از شناور کردن یک ستون به چپ و دیگری به راست بوجود آورد. شکل زیر گویای مطلب است :
اگر یک عنصر بصورت سهوی سایزش چند پیکسل بزرگتر شود بجای توسعه فوری در عرض و انداختن عنصر
کناری به پایین از شیارهای مجازی که قبلا تعریف شده بهره جسته و چیدمان قالب بهم نمی خورد.
CSS
لازم جهت پیگیری مطلب فوق روشن است. بطور ساده سایز عرض هر ستون تعریف شده و سپس مطالب
را به سمت راست و منو را به چپ شناور می کنیم.
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
سپس برای اطمینان از اینکه قسمت پایین صفحه یا footer بطور صحیح پایین دو عنصر بالایی
در صفحه قرار داشته باشد خاصیت clear را به both ست می کنیم.
#footer {
clear: both;
}
قالب پایه اکنون آماده است. با وجود این هنوز چند نکته برای خوانایی و زیبایی صفحه وجود دارد
. ابتدا اینکه لبه دو قسمت content و mainNav به هم چسبیده و احتیاج به مقداری فضای خالی بین
این دو وجود دارد. می توان مستقیما مقداری حاشیه - padding - افقی به mainNav اعمال کرد
ولی اینکار به علت وجود باگ در
IE 5.x - در تفسیر مدل Box - روش کاملی
نیست. برای پرهیز از این موضوع مقداری حاشیه افقی به عناصر محتوای قسمت mainNav - نه خود
mainNav - اعمال می کنیم:
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
همچنین لبه سمت راست عناصر موجود در content به لبه خود content چسبیده است و مقداری فضا
برای خوانایی و خوش فرم بودن آن لازم است. دوباره بجای اعمال حاشیه افقی مستقیما به عنصر
content به عناصر داخل content حاشیه افقی را اعمال می کنیم:
#content h1, h2, p {
padding-right: 20px;
}
سرانجام قالب دو ستونه شناور با اندازه ثابت بشکل زیر خواهد بود :
قالبهای سه ستونه شناور با اندازه ثابت
کد XHTML
لازم جهت ساخت یک قالب سه ستونه بسیار شبیه آنچه است که در ساخت قالب دو ستونه
بکار برده شد و تنها تفاوت ن اضافه کردن دو عنصر جدید div در داخل عنصر content است
یکی برای محتوای اصلی و دیگری برای ستون سوم :
<div id="content">
<div id="mainContent">
...
</div>
<div id="secondaryContent">
...
</div>
<div>
همچنین شبیه کد CSS
قالب دو ستونه می توان ستون محتوای اصلی را به چپ و ستون دیگر را ( ستون سوم )
به راست - داخل عنصر دربرگیرنده هر دو یعنی content که قبلا خود نیز به راست
شناور شده فرستاد.
این تکنیک برای تقسیم شدن ستون دوم ( یعنی عنصر content ) به دو ستون دیگر ضروریست
و موجب بوجود آمدن یک قالب سه ستونه می شود.
مانند مثال قالب دو ستونه
CSS
مورد نیاز ساده است. سایز عناصر را ست کرده و عنصر محتوای اصلی ( mainContent ) را به
چپ و ستون سوم ( secondaryContent ) را به راست float می کنیم.
#mainContent {
width: 320px;
float: left;
}
#secondaryContent {
width: 180px;
float: right;
}
قابل تامل آنست که مفهوم مکان یابی ( positioning ) نسبی یا relative را در مثال فوق بطور
عینی می توان مشاهده کرد.
سرانجام مانند قالب دو ستونه برای خوانایی و خوش فرم بودن layout فعلی به عناصری که در ستون
سوم یا همان عنصر secondaryContent مقداری حاشیه افقی افزوده می شود:
#secondaryContent h1, h2, p {
padding-right: 20px;
padding-left: 20px;
}
عملیات بالا یک قالب استاندارد را نتیجه می دهد که بوسیله
CSS
و گرافیک به آن رنگ و لعاب داد!.
نمونه کد این مقاله را دانلود کنید.