قاب بندی صفحات وب
این نوشته با عنوان ” قاب بندی صفحات وب: نگاهی به برچسب های کاربردی” گرفته شده از کتاب طراحی صفحات وب مقدماتی (جلد اول) است که توسط پایگاه کتاب های درسی منتشر شده است. تا وقتی با صفحاتی سر و کار دارید که محتوای اندک و ساختار ساده ای دارند، می توانید با مطالبی که تا کنون فرا گرفتید محتوای صفحات را به گونه ای در صفحه چینش کنید تا کاربر بتواند به سادگی آن ها را مرور کند. اما هنگامی که بر حجم اطلاعات درون صفحه افزوده می شود باید با استفاده از سایر قابلیت های موجود برای طراحی صفحات وب، ساختار صفحه را طوری طراحی کنید که کاربر بدون درگیر شدن با پیچیدگی موجود در ارایه اطلاعات بتواند به مطالب مورد نظر دسترسی پیدا کند.
یکی از این قابلیت ها، قاب یا Frame است که امکان نمایش چند صفحه وب را درون یک پنجره فراهم می آورد. در این بخش با اصول قاب بندی صفحه در صفحه آرایی وب آشنا خواهید شد.
کاربرد قاب بندی صفحات وب
قاب بندی صفحات وب یا فریم ها به شما امکان می دهند دو یا چند صفحه وب را که از لحاظ ساختاری مستقل از هم هستند، درون یک صفحه و در کنار یکدیگر قرار دهید. فرض کنید قصد دارید کاربرد هر یک از برچسب های موجود در زبان XHTML را برای کاربران توضیح دهید. یک راه این است که فهرستی از این برچسب ها را درون یک صفحه قرار داده و نام هر برچسب را به صفحه حاوی توضیحات آن پیوند دهید تا کاربر با کلیک روی نام برچسب به صفحه توضیحات منتقل شود.
در روش دوم که پیاده سازی با استفاده از قاب ها صورت می پذیرد. برای مثال فهرست برچسب ها را درون یک قاب در سمت چپ صفحه قرار می دهید تا وقتی کاربر روی یکی از آنها کلیک نمود، صفحه مربوط به توضیحات آن برچسب در ستون سمت راست صفحه بارگذاری و نمایش داده شود.
مزایا و معایب قاب بندی صفحات وب
یکی از مزیت های قاب بندی صفحات وب برای ارائه اطلاعات این است که هر بار فقط قاب هایی که محتوای آن ها باید تغییر کنند بارگذاری می شوند. برای نمونه در تصویر فوق، نیازی به بارگذاری چند باره لیست برچسب ها نیست. به این ترتیب می توان صفحه ای ایجاد کرد که برخی بخش های آن ثابت و برخی دیگر قابل تعویض باشند. علاوه بر این با کمک قاب ها می توان برای ارائه اطلاعات دسته بندی شده به کاربران، نمای مناسبی را ایجاد نمود تا کاربر بدون سر در گمی بتوانند صفحات موردنظر را مرور کنند.
هر چند در وبسایت رسمی انجمن وب هیچ توصیه ای مبنی بر عدم استفاده از قاب ها وجود ندارد و معایبی هم برای این روش طراحی ذکر نشده با این حال امروزه میزان کاربرد قاب ها در طراحی صفحات وب به شدت کاهش پیدا کرده و به خصوص وبسایت های معتبر ترجیح می دهند به جای قاب ها از روش های دیگری برای ارائه اطلاعات استفاده کنند. موارد زیر را می توان به عنوان بخشی از دلایل این کاهش اقبال برشمرد:
- موتورهای جستجو در بررسی محتوای صفحاتی که با استفاده از قاب ها ایجاد شده اند کمی مشکل دارند و بنابراین ممکن است صفحه طراحی شده به خوبی توسط این موتورها شناسایی نشود.
- تقسیم صفحه به بیش از دو قسمت باعث ایجاد نوارهای پیمایش متعدد در اطراف صفحات می شود که برای اغلب کاربران خوشایند نیست.
- چاپ محتوای صفحاتی که از قاب ها استفاده می کنند با دشواری هایی همراه است.
ایجاد قاب در صفحه وب
برای قاب بندی صفحات وب که با استفاده از زبان XHTML تولید می شوند، پیش از هر کاری باید یک نکته اساسی را به یاد داشته باشید. در فصل های پیشین و هنگام معرفی اعلان DOCTYPE به این مطلب اشاره شد که هنگام ایجاد صفحات XHTML می توان از سه نسخه transitional ،strict و farmest استفاده نمود و در این میان، نسخه frameset مخصوص صفحات حاوی قاب است. دلیل این مسأله را هنگام ایجاد قـاب ها متوجه خـواهید شد ولـی فعلا بـه ذکر یکـی از تفاوت هـای مـوجود میان صفحات حاوی قاب و سایر صفحات اشاره مختصری می شود: در این نوع صفحات برچسب <frameset > جایگزین برچسب <body> می شود.
قصد داریم صفحه ای حاوی دو قاب ایجاد کنیم تا در هر کدام از آن ها یک صفحه وب به صورت مستقل نشان داده شود. ابتدا دو صفحه با نام های left.htm و main.htm ایجاد نموده و درون آن ها به ترتیب عبارت های زیر را درج کنید: صفحه سمت چپ و صفحه اصلی. حال صفحه ای با نام index.htm ایجاد نموده و کدهای زیر را در آن درج کنید:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd” >
<html>
<head>
<title>قابها/>title>
</head>
<frameset cols=”30%,70%” >
<frame src=”left.htm” />
<frame src=”main.htm” />
</frameset>
</html>
نتیجه اجرای کد در مرورگر به صورت صفحه بعد نشان داده می شود.
در حالت پيش فرض كاربر مى تواند با كليك روى خط جدا كننده قاب ها، آن را جا به جا نموده و اندازه قاب ها را تغيير دهد اما هنگامى كه صفحه تازه سازى شود يا مجددا باز گردد، قاب ها با اندازه اى كه در كد قيد شده نشان داده مى شوند. در هنگام بررسى مشخصه برچسب هاى ايجاد قاب با روش تثبيت خطوط جدا كننده قاب ها آشنا خواهيد شد.
برچسب < framest>
همان گونه كه قبلا اشاره شده براى قاب بندی صفحات وب بايد به جاى برچسب <body> از برچسب <frameset>استفاده كنيد كه مجموعه اى از قاب ها را در خود جاى مى دهد و مى تواند مشخصه هاى زير را داشته باشد.
- cols : براى تعيين تعداد قاب هاى ستونى كاربرد دارد. در جدول زير نمونه هايى از مقادير قابل تخصيصى به اين مشخصه را مشاهده مى كنيد.
| مقدار | كاركرد |
| «70%,30%» | صفحه را به دو ستون تقسيم مى كند و به ستون سمت چپ، %30 پهناى پنجرة مرورگر و به ستون سمت راست، %70 پهنا را تخصيص مى دهد. |
| «300,*,200» | در صفحه سه قاب ستونى ايجاد مى كند و ضمنا پهناى ستون سمت چپ را روى 200 نقطه و ستون سمت راست را روى 300 نقطه تنظيم مى كند. ستون ميانى هم باقى ماندة پهناى مرورگر را در برمى گيرد. |
| «*1,*2,*3» | صفحه به سه ستون تقسيم شده و پهناى پنجرة مرورگر به نسبت 3 و 2 و 1 ميان اين سه ستون تقسيم مى شود. |
- rows : صفحه را به چند ردیف تقسیم می کند و مقادیری مانند مشخصه cols را می پذیرید. برای نمونه اگر در مثال قبل cols را به rows تغییر دهید، قاب ها به صورت افقی قرار می گیرند.
<frameset rows=”30%,70%” > <frame src=”left.htm” />
<frame src=”main.htm” />
</frameset>
برچسب <fram>
در قاب بندی صفحات وب درون برچسب <frameset > برای تعریف هر قاب باید از یک برچسب <frame > ستفاده نموده و مشخصهsrc آن را با نشانی صفحه ای که می خواهید در آن قاب نمایش داده شود، مقداردهی کنید. هر یک از قاب های موجود در یک صفحه می توانند ویژگی های مختص به خود داشته باشند و برای تعیین این ویژگی ها باید از مشخصه های زیر استفاده کنید:
- frameborder مقدار یک یا صفر را میپ ذیرد و تعیین می کند که آیا قاب دارای خط جداکننده باشد یا خیر.
- name نام هر قاب را مشخص می کند و مقدار دهی آن برای ایجاد قاب های پیمایشی که در همین بخش با آن ها آشنا خواهید شد کامال ضروری است.
- noresize اگر این مشخصه را با مقدار noresize مقداردهی کنید، خطوط اطراف قاب تثبیت شده و کاربر نمی توانند آنها را حرکت دهند. در زبان HTML برای مشخصه هایی که تنها یک مقدار را می پذیرند م یتوانید فقط نام مشخصه را قید کنید و نیازی به مقدار دهی آن نیست اما زبان XHTML کد نویس را ملزم می کند برای هر مشخصه حتما یک مقدار تعیین کند حتی اگر تنها مقدار قابل تخصیص باشد.
<frame src=”left.htm” noresize > HTML کد
<frame src=”left.htm” noresize=”noresize” /> XHTML کد
- scrolling اگر محتوای موجود در قاب از ابعاد آن بزرگتر باشد، در حالت پیشفرض نوارهای پیمایش در اطراف قاب ظاهر می شود تا کاربر با حرکت دادن آن ها بتواند همه مطالب موجود در قاب را مرور کند. در این حالت مشخصه scrolling به صورت ضمنی با “auto”مقداردهی شده است. با استفاده از مقدار “no”می توانید از ظاهر شدن نوارهای پیمایش جلوگیری کنید و چنانچه از مقدار “yes”برای این مشخصه استفاده نمایید، نوار پیمایش در حالت غیرفعال در اطراف قاب ظاهر می شود و تنها در صورتی که قاب گنجایش محتویات صفحه را نداشته باشد فعال می گردد.
برچسب < iframe>
یکی دیگر از روش های قاب بندی صفحات وب که امروزه بیش از قاب های معمولی کاربرد دارد، استفاده از قاب های درونی است. این قاب ها را می توان در هرجای صفحه XHTML قرار داد بدون آن که نیازی به درج برچسب <frameset > و حتی استفاده از نسخه frameset در اعلان DOCTYPE باشد.
کد زیر را در ویرایشگر متنی وارد و نتیجه اجرای آن را در مرورگر بررسی کنید.
<body >
<p</برای نمایش وبسایت گوگل از قاب درونی استفاده شده است<p<
<iframe src=”http://www.google.com” width=”700” height=”400”>
<p>مرورگر شمااز قابهای درونی پشتیبانی نمیکند</p>
</iframe>
<body>
با مقداردهى مشخصه هاى width و height مى توانيد ابعاد قاب درونى را برحسب نقطه تعيين كنيد. با توجه به اين كه زمان زيادى از ارايه اين قابليت در ايجاد صفحات وب نمى گذرد ممكن است برخى مرورگرها از قاب هاى درونى پشتيبانى كنند. به همين دليل غالبا درون برچسب <iframe> عبارتى را درج مى كنند تا در صورت عدم نمايش قاب، به عنوان توضيح درج شود.
شناخت اصول قاب بندی صفحات
در بخش هاى قبل با ساده ترين روش قاب بندی صفحات وب آشنا شديد. حال مى خواهيم صفحه را به گونه اى قاب بندى كنيم كه داراى يك قاب در بالا و دو قاب ستونى در زير آن باشد و حالتى شبيه به جدول نماى رو به رو را ايجاد كند.
در اين نوع قاب بندى كه قاب بندى تودرتو گفته مى شود يك برچسب <frameset> درون برچسب <frameset> ديگرى قرار مى گيرد. براى ادامه كار، صفحه اى با عنوان top.htm به مجموعه صفحاتى كه ساخته ايد اضافه نموده و عبارت «صفحه بالا» را درون آن درج كنيد. حال كد زير را در فايل index.htm وارد و تغييرات را ذخيره نماييد.
<frameset rows=”30%,*” >
<frame src=”top.htm” />
<frameset cols=”150,*”>
<frame src=”left.htm” />
<frame src=”main.htm” />
</frameset>
</frameset>
پس از باز كردن صفحه htm.index با نمايى شبيه به تصوير روبه رو مواجه مى شويد.
افزودن لیست موتورهای جستجو
اکنون می خواهیم در صفحه سمت چپ، لیست موتورهای جستجو را قرار دهیم تا کاربر با کلیک بر روی گزینه مورد نظر، وبسایت درخواست شده را در صفحه اصلی مشاهده کند. به این نوع قابب ندی، قابب ندی پیمایشی گفته می شوند. پیش از ساخت این صفحه باید به قابی که می خواهیم صفحات در آن نشان داده شوند یک نام اختصاص دهیم تا بتواند توسط پیوندها شناسایی شود. کد صفحه index.htm را به صورت زیر تغییر دهید.
<frameset rows=”30%,*” >
<frame src=”top.htm” />
<frameset cols=”150,*”>
<frame src=”left.htm” />
<frame src=”main.htm”name=”main_frame” />
</frameset>
</frameset>
حال در صفحه سمت چپ، پیوندهایی را به موتورهای جستجوی معروف ایجاد نمایید. نکته اساسی در این میان، مقداردهی مشخصه target از برچسب <a> با نام قابی است که وبسایت باید در آن نمایش داده شود. بخشی از کد این صفحه به صورت زیر است.
<h2>موتورهای جستجو</h2>
<p><a href=”http://www.google.com” target=”main_frame”>Google</a></p>
<p><a href=”http://www.yahoo.com” target=”main_frame”>Yahoo</a></p>
هنگامی که صفحه index.htm را در مرورگر باز می کنید ابتدا صفحه main.htm نشان داده می شود. چون مشخصه src این قاب با نشانی صفحه اصلی مقداردهی شده است اما هنگامی که کاربر روی نام یکی از موتورهای جستجو کلیک می کند، به شرط اتصال به اینترنت، وبسایت مرتبط در قاب اصلی نمایش داده می شود.
در این مثال نحوه فراخوانی یک وبسایت در قاب مورد بررسی قرار گرفت اما این امکان وجود دارد که با درج نشانی نسبی صفحات داخلی، برای نمونه منوی وبسایت را درون یک قاب قرار دهید تا کاربر با کلیک روی عنوان صفحه، آن را در قاب اصلی مشاهده کند.
هنگام کار با قاب ها، مقادیر قابل تخصیص به مشخصه target به صورت زیر عمل می کنند:
| مقدار | عملکرد |
| _self | صفحه را در قاب جاری بارگذاری می کند. |
| _blank | پنجره جدیدی باز نموده و صفحه را در آن نمایش می دهد. |
| _top | صفحه مورد نظر را جایگزین صفحه جاری می کند و قاب ها ناپدید می شوند. |
| _parent | صفحه را در قاب والد بارگذاری می کند که در مورد یک <frameset> ، عملکردی مانند _top دارد. |