نوشته حاضر قسمت اول از سلسله مقالاتی است درباره اصول طراحی صفحات وب بر اساس استانداردهای وب و به به بررسی روشهایی برای
وسط چین کردن قالب یا Layout می پردازد.
یکی از قابلیت های بالقوه CSS کنترل قالب ( Layout ) صفحه
بدون نیاز به تغییر کدهای نمایش ( Presentational Markup ) یا به عبارتی تگهای معنایی ( Semantic ) صفحه است.
بطور کلی تکنیکهای گوناگونی برای تعریف و نمایش چیدمان اجزای صفحه - به اصطلاح Layout زنی - روی وب وجود دارد.
بنظر می رسد متخصصان طراحی وب براساس متدهای CSS
هر کدام روش خاص خود را برای ساخت و انتشار صفحات چند ستونی دارند و تازه کاران CSS
معمولا یک تکنیک را بدون آنکه پروسه کار را به درستی بدانند بکار می برند. مطالبی که در پی می آید چندین روش را برای
Layout زنی تک و چند ستونه مورد بررسی قرار می دهد.
در دنیای امروز وب طرفداران و استفاده کنندگان ”طراحی وب بدون عنصر Table“ یا Tableless هر روز افزوده می شود. بدیهیست که در
صفحات مورد بحث Tableless و بر اساس استانداردهای حاضر تحت وب خواهند بود. قالبهای مورد بررسی بر سه ایده زیر استوار خواهند بود :
- Positioning
- Floating
- Margin Manipulation
در نگاه کلی متدهای مختلف تفاوت چندانی با هم ندارند و اگر ایده های اصلی فراگرفته شود بطور منطقی ساخت انواع
قالبها با ویژگیهای متفاوت پیچیده نخواهد بود. بطور کلی چهار ایده زیر را مورد بررسی قرار می دهیم :
-
قرار دادن محتویات و طرح اصلی صفحه وب در وسط پنجره مرورگر ( Browser ) بگونه ای که در هر مرورگری وبا هر
نوع دقت تصویر مانیتور یا - Resolution - طرح و محتوی در وسط قرار گیرد.
-
ساختن صفحات دو یا سه ستونه بر این پایه که
در هر مرورگری وبا هر
نوع دقت تصویر مانیتور یا - Resolution -
در کل امتداد افقی صفحه قرار گیرد. بعبارتی ”طرح“ محتویات صفحه نسبت به اندازه مرورگر در راستای افق
کشیده شده و بسته به تعریف سایز مقادیر فضای مساوی در راست و چپ ”طرح“ وجود داشته باشد.
-
ساختن قالبهای اندازه ثابت ( Fixed-Width ) و شناور ( Liquid ) و ارتجاعی ( Elastic )
-
ساختن و کشیدن ستونها بصورت عمودی به کل فضای قابل دسترس در Layout
قرار دادن ”طرح“ در وسط مرورگر : centering a Design
خطوط طویل و متنهای پشت سر هم خوانایی صفحه وب را از بین می برد و احساس ناخوشایندی از جلوه ظاهری
”طرح“ سایت ایجاد می کند. همچنانکه تولید مانیتورهای جدید با بزرگ شدن اندازه تصویر رو به رشد است
موضوع خوانایی صفحات ( Readability ) اهمیت بیشتری پیدا می کند. یکی از راه حلهای قضیه فوق قرار دادن
کل طرح ( design ) در وسط مرورگر و در کل نمایشگر - وسط چین کردن - است. از این طریق می توان بجای قرار دادن
و کشیدن محتویات و گرافیکها در تمام عرض صفحه وب با تعریف مقادیر مشخص - چه بصورت ثابت ( Fix ) براساس پیکسل
و چه بصورت نسبی براساس درصد - کل نمایش صفحه را در وسط قرار داده و خوانایی متون را افزایش داد.
طراحی قالب بر طبق این ایده در حا حاضر یک روش متداول بشمار می رود بعنوان مثال در همین صفحه از سایت محتویات
بصورت Fix و با اندازه مشخص از پیش تعریف شده در وسط پنجره مرورگر قرار گرفته است.
جهت قرار دادن محتویات در وسط دو راه مقدماتی وجود دارد. یکی استفاده از auto margin یا حاشیه های اتوماتیک
و دیگری استفاده از موقعیت سنجی ( Positioning ) همراه حاشیه های منفی.
روش auto margin
بعنوان مثال می خواهیم یک عنصر (تگ) div را که در برگیرنده ( warpper ) کل اجزا صفحه است در وسط پنجره مرورگر
قرار دهیم.
...
<body>
<div id="wrapper">
</div>
</body>
...
برای نیل به هدف کافیست مقدار عرض wrapper را براساس px تعریف کرده و margin افقی آنرا به auto ست می کنیم :
#wrapper {
width: 720px;
margin: 0 auto;
}
در این مثال wrapper بصورت fix با اندازه 720 پیکسل در وسط صفحه قرار می کیرد و نکته قابل ذکر این است حتی اگر کاربر
از resolution با دقت 800 * 600 هم استفاده کند محتویات wrapper در پنجره مرورگر fit می شود.
با این تفاسیر حتی می توان مقدار عرض wrapper را براساس درصدی از body و یا نسبت به اندازه (سایز) متن پیش فرض صفحه
با استفاده از واحد em نیز تعریف کرد.
روش فوق در اکثر مرورگرهای مدرن بدرستی کار می کند. با این وجود مشکل در IE 5.x و IE 6.0 پیش می آید. برای حل
این مشکل می توان از خصوصیت text-align در عنصر body صفحه استفاده کرد. خوشبختانه
IE
تعبیری اشتباه از
text-align: center
دارد!!. و بجای آنکه آنرا فقط به متون اعمال نماید همه عناصر صفحه را وسط چین می کند.
برای اینکار کافیست در CSS منتسب به صفحه text-align قسمت
body را برابر center قرار دهیم :
body {
text-align: center;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
نکته قابل توجه در کد CSS فوق ست کردن text-align عنصر wrapper
به left است. توسط این عمل نوشته های صفحه به حالت نرمال یعنی چپ چین باز می گردد. بدیهیست در قالبهای فارسی و در کل زبانهایی که از راست به چپ نوشته می شوند خاصیت فوق در عنصر wrapper باید به right ست شود.
بطور کلی استفاده از چنین روشهایی - در اینجا بکار بردن text-align - بعنوان تکنیکهای Hack صفحات وب بشمار می رود
که هدف از آن یکسان سازی چیدمان و نمایش صفحات HTML در اکثر
مرورگرهاست. اکنون عنصر wrapper در IE و همچنین دیگر مرورگر ها منطبق
بر استانداردهای وب در وسط صفحه قرار می گیرد.
نکته آخری وجود دارد برای آنکه روش فوق در کل مرورگرها بصورت یکسان نتیجه دهد. در Netscape Navigator 6 هنگامیکه
عرض پنجره مرورگر از اندازه عنصر دربرگیرنده - در اینجا wrapper - کمتر می شود سمت چپ wrapper به پایین آن انداخته می شود و
قابل دسترسی نخواهد بود!. برای پرهیز از وقوع چنین حالتی بایستی به خاصیت عرض body صفحه
HTML
مقداری برابر یا کمی بیشتر از اندازه عرض wrapper نسبت داد :
body {
text-align: center;
min-width: 760px;
}
#wrapper {
width: 720px;
margin: 0 auto;
text-align: left;
}
روش موقعیت سنجی و حاشیه های منفی
روش auto margin برای قراردادن محتویات و چیدمان در وسط صفحه (پنجره مرورگر) متداولترین متد بشمار می رود
ولی همانطور که توضیح داده شد برای فائق آمدن بر مشکلات نمایش آن در
IE
نیاز به یک روش Hack و همچنین استفاده از
CSS
برای استیل دهی دو عنصر ( تگ body و عنصر wrapper ) در صفحه خواهد بود. به همین علت عده ای استفاده از روش
موقعیت سنجی ( Positioning ) و استفاده از حاشیه های منفی ( Negative Margin ) را ترجیح می دهند.
همانند روش قبل ابتدا مقدار عرض wrapper را مشخص کرده سپس مقدار خاصیت position را به relative و اندازه خاصیت
left آنرا به 50% ست می کنیم. بدین ترتیب لبه طرف چپ wrapper در وسط صفحه قرار می گیرد:
#wrapper {
width: 720px;
position: relative;
left: 50%;
}
با این وجود ما نمی خواهیم لبه سمت چپ wrapper در وسط پنجره مرورگر قرار گیرد بعبارتی هدف قرار دادن عنصر wrapper
در وسط است. بهمین دلیل می توانیم مقداری منفی را برای حاشیه سمت چپ wrapper تعیین کنیم و آن برابر است با نصف عرض
( width ) عنصر wrapper که باعث می شود wrapper به اندازه نصف عرض خود به سمت چپ حرکت کرده و در کل wrapper
در وسط صفحه قرار گیرد:
#wrapper {
width: 720px;
position: relative;
left: 50%;
margin-left: -360px;
}
مشاهده می شود که با تعریف مقدار منفی یعنی 360- پیکسل wrapper در وسط قرار می گیرد.
انتخاب از میان روشهای فوق به سلیقه طراح بستگی دارد. با این وجود همیشه آگاهی از چندین روش برای حل یک مساله سودمند
است.
نمونه کد این مقاله را دانلود کنید.