طراحی صفحات وب مقدماتی

طرح بندی صفحه با جداول و لیست ها

طرح بندی صفحه با جداول و لیست ها

طرح بندی صفحه با جداول و لیست ها

این نوشته با عنوان ” طرح بندی صفحه با جداول و لیست ها” گرفته شده از کتاب طراحی صفحات وب مقدماتی (جلد اول) است که توسط پایگاه کتاب های درسی منتشر شده است. ماهیت زبان های نشانه گذاری و صفحات وب باعث می شود محدودیت هایی در زمینه چینش عناصر درون صفحه وجود داشته باشد. در طراحی صفحات وب برای غلبه بر این محدودیت ها و نمایش عناصر در محل های مورد نظر طراح، از جدول استفاده می شود. جداول این امکان را فراهم می آورند تا با تقسیم تمامی صفحه یا بخش هایی از آن به خانه های جداگانه، عنصر مورد نظر را که می تواند متن، تصویر و غیره  باشد در محل دلخواه از صفحه قرار داد.

هرچند امروزه کاربرد جداول برای صفحه آرایی وب به شدت در حال محدود شدن است و صفحات جدید با استفاده از لایه ها ایجاد می گردند. کاربرد دیگر جداول، دسته بندی و ارائه اطلاعات در قالبی زیبا و خوانا است. علاوه بر جداول، روش دیگری برای دسته بندی و ارایه اطلاعات وجود دارد که استفاده از لیست است. لیست ها با ایجاد سطوح مختلف باعث ایجاد نظم در دسته بندی اطلاعات می شوند. ضمنا برای ساخت منوی وبسایت می توان از لیست ها استفاده کرد.

کاربردهای طرح بندی صفحه با جداول و لیست ها در صفحات وب

در مبحث طرح بندی صفحه با جداول لازم به ذکر است که امروزه برخی از وبسایت های اینترنتی برای سازمان‌دهی و چینش اجزای صفحه از جداول استفاده می کنند. و تنها در صفحاتی که ساختار بسیار ساده ای حاوی متن و تعداد انگشت شماری تصویر دارند ممکن است از جدول استفاده نشده باشد. جداول در طراحی صفحات وب دو کاربرد عمده دارند:

 الف) سازماندهی و ارایه اطلاعات

در صفحات وب مانند بسیاری از مستندات برای دسته بندی و نمایش اطلاعات از جداول استفاده می شود. برای نمونه اگر می خواهید لیست نمرات دانش آموزان، نتایج مسابقات فوتبال، تغییرات قیمت سهام، ساعات کار پزشکان یک بیمارستان و غیره را درون صفحه نمایش دهید، ساده ترین روش استفاده از جدول است.

جداول امکان نمایش ساده و منظم اطلاعات را فراهم می کنند و قابلیت های ویژه آن ها در ترکیب خانه ها و کم و اضافه کردن ردیف ها و ستون ها باعث رواج استفاده از جداول شده است. علاوه بر این می توان با قالب بندی جداول و تخصیص طرح ها و رنگبندی های متنوع، خوانایی و جذابیت آن ها را افزایش داد.

طرح بندی صفحه با جداول و لیست ها

ب) طرح بندی صفحه

طراحان وب تا همین اواخر برای صفحه آرایی و چینش عناصر دلخواه در مکان های مورد نظر ترجیح می دادند از جداول استفاده کنند. این جداول که محل قرارگیری و ابعاد هر یک از بخش های صفحه را تنظیم می کنند، از دید کاربر پنهان هستند.

چنانچه صفحه اول یک وبسایت را روی رایانه خود ذخیره نموده و سپس آن را در یکی از نرم افزارهای طراحی صفحات وب باز کنید احتمالا با مجموعه ای از خطوط نقطه چین مواجه می شوید که همان جداول پنهان هستند.

برای چینش متون، تصاویر، منوها و سایر اجزای وبسایت می توان درون صفحه وب یک جدول ایجاد نموده و با تغییر شکل و ابعاد آن، اجزاء را در محل های مورد نظر قرار داد.

ایجاد جدول در صفحات وب

در طرح بندی صفحه با جداول هر جدول حاوی تعدادی ردیف (Row) و ستون (Column) است و محل تقاطع ردیف و ستون، تشکیل یک خانه یا سلول (Cell) را می دهد.

طرح بندی صفحه با جداول و لیست ها

خانه های جدول محلی مناسب برای چینش اجزای صفحه هستند و با تغییر ابعاد یا ادغام (Merge) و تکه تکه کردن (Split) خانه ها میتوان صفحه آرایی مورد نظر را روی صفحه اعمال نمود.

قبل از معرفی روش های طرح بندی صفحه باید با برچسب های موجود برای ایجاد جداول و افزودن ردیف و ستون به آن آشنا شوید. برچسب <tabl > که برای ایجاد جدول در صفحه وب مورد استفاده قرار می گیرد یکی از کاربردی ترین برچسب های زبان XHTML است. این برچسب همراه با مجموعه ای از برچسب های دیگر که مخصوص ایجاد ردیف ها و ستونهای مورد نظر هستند به کار می رود.

کد زیر را در ویرایشگر متنی وارد نموده و نتیجه را در مرورگر مشاهده کنید.

<table border=”1”>

<tr>

<th>Name</th>

<th>Score</th>

</tr>

<tr>

<td>Ali Javadi</td>

<td>15.25</td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

این قطعه کد که باعث ایجاد جدولی شامل دو ردیف و دو ستون شده حاوی تعدادی برچسب است که ابتدا آن ها را به صورت اجمالی معرفی نموده و در ادامه، مشخصه های هر یک را به صورت جداگانه بررسی خواهیم کرد.

برچسب <table>

در طرح بندی صفحه با جداول این برچسب وظیفه ایجاد جدول را برعهده دارد و دارای مشخصه هایی است که ویژگی های ظاهری جدول را تعیین می کنند. از جمله این مشخصه ها border است که ضخامت خطوط تشکیل دهنده جدول را معین می کند. و چنانچه با عدد صفر مقداردهی شود، خطوط جدول از دید کاربر پنهان می شوند.

برچسب <tr>

نام این برچسب از عبارت Table Row گرفته شده و وظیفه ایجاد ردیف را در جدول برعهده دارد.

برچسب <th>

در طرح بندی صفحه با جداول اولین ردیف حاوی عبارتی است که سرستون نامیده می شود و توضیحی در مورد محتوای ستون است. برای ایجاد این سرستونها یا Table Header ها از برچسب  <th>استفاده می شود. عبارات قرار گرفته در خانه های این ردیف به صورت توپر و در حالت وسطچین نشان داده می شوند.

برچسب <td>

پس از ردیف سرستون، ردیف های حاوی داده یا Table Data ها قرار می گیرند. خانه های این ردیف توسط برچسب <td> ایجاد می شوند. در واقع وظیفه این برچسب ایجاد تعدادی خانه در ردیفی است که توسط برچسب <tr> ایجاد شده است.

کد زیر را در ویرایشگر متنی وارد و صفحه ساخته شده را در مرورگر مشاهده کنید.

<table border=”1” >

<caption>Sample Table</caption>

<tr>

<td> Row 1, Column 1 </td>

<td> Row 1, Column 2 </td>

</tr>

<tr>

<td> Row 2, Column 1 </td>

<td> Row 2, Column 2 </td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

این قطعه کد نیز باعث ایجاد جدولی حاوی دو سطر و دو ستون شده است. و ضمنا با افزودن برچسب <caption > توانسته ایم یک عنوان برای جدول در بالای آن درج کنیم. همان طور که در این قطعه کد مشاهده می کنید، در ایجاد جداول اجباری به استفاده از برچسب <th > نیست چون ممکن است برخی جداول اصولا فاقد سرستون باشند.

مشخصه های برچسب <table>

برچسب <table> در طرح بندی صفحه با جداول مانند اغلب برچسب های موجود در زبان XHTML دارای مجموعه ای از مشخصه ها برای تنظیم ویژگی های ظاهری جدول است که تسلط بر آن ها نقش مهمی در افزایش مهارت طراح وب برای ایجاد طرح بندی های دلخواه و اعمال صحیح و اصولی تغییرات در صفحه دارد. مهم ترین این مشخصه ها عبارتند از:

border

این مشخصه، ضخامت خط دور جدول را تعیین می کند. و چنانچه آن را مقداردهی نکنید به صورت پیشفرض روی عدد یک تنظیم می شود. هنگام طرح بندی صفحه وب، این مشخصه با عدد صفر مقداردهی می شود تا جدول ضمن ایفای نقش خود برای چینش اجزای صفحه، از دید کاربر هم پنهان بماند.

width

یکی از مهمترین مشخصه های برچسب ایجاد جدول است که برای تعیین عرض جدول برحسب درصد یا نقطه کاربرد دارد. در حالتی که عرض جدول را برحسب نقطه مشخص می کنید. ابعاد آن بستگی چندانی به اندازۀ پنجره مرورگر و به بیان بهتر تفکیک پذیری (Resolution) نمایشگر ندارد. اما وقتی عرض جدولی را روی %80 تنظیم می کنید، پنجره مرورگر به هر اندازهای که در بیاید یا تفکیک پذیری صفحه نمایشگر هر قدر باشد، جدول تنها %80 از پنجره را اشغال خواهد کرد.

کد زیر را در مرورگر بررسی کنید:

<table border=”3” width=”700” >

<tr><td> Width =700 </td></tr>

</table>

<br />

<table border=”3” width=”80%” >

<tr><td> Width = 80% </td></tr>

</table>

طرح بندی صفحه با جداول و لیست ها

حال عرض پنجره مرورگر را کم کنید.

طرح بندی صفحه با جداول و لیست ها

همان طور که در تصویر مشاهده می کنید، با کم شدن پهنای پنجرۀ مرورگر، عرض جدولی که مشخصه width آن برحسب درصد تنظیم شده به همان نسبت تغییر می کند اما عرض جدول دیگر ثابت می ماند. و چنانچه پهنای پنجره مرورگر را کمتر کنید، نوارهای پیمایش افقی ظاهر خواهد شد.

طرح بندی صفحه با جداول و لیست ها

rules

از این مشخصه برای تعیین چگونگی نمایش خطوط عمودی و افقی جدول استفاده می شود و می تواند مقادیر زیر را بپذیرد:

مقدارعملکرد
groupsخطوط میان خانه های جدول را نمایش نمی دهد
colsخطوط افقی میان خانهها را حذف می کند
rowsخطوط عمودی میان خانه های جدول را نشان نمی دهد
allجدول را در حالت عادی نمایش میدهد و مقدار پیش فرض است.

طرح بندی صفحه با جداول و لیست ها

cellspacing

خانه های جدول به صورت پیش فرض به اندازه یک نقطه از هم فاصله دارند. برای افزایش فاصله میان خانه ها و تنظیم آن روی مقدار دلخواه باید از این مشخصه استفاده کنید. در کد زیر با استفاده از مشخصه style رنگ خط دور جدول تغییر داده شده تا از خطوط تشکیل دهنده خانه ها متمایز شوند.

<table border=”3” cellspacing=”10” style=”border-color:Lime” >

<tr>

<td> Row 1, Column 1 </td><td> Row 1, Column 2 </td>

</tr>

<tr>

<td> Row 2, Column 1 </td><td> Row 2, Column 2 </td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

cellpading

در طرح بندی صفحه با جداول وقتی عبارتی را بین برچسب های <td > و <th > قرار می دهید تا به عنوان محتوای خانه های جدول درج شود، در حالت پیشفرض فاصله چندانی از کناره جدول ندارد. برای تنظیم این فاصله برحسب نقطه، مشخصه cellpading پیش بینی شده است.

طرح بندی صفحه با جداول و لیست ها

dir

برای طراحانی که صفحات وب را به زبان هایی مثل فارسی و عربی ایجاد می کنند، مشخصه dir اهمیت فوق العاده ای دارد چون با تنظیم آن روی مقدار rtl می توانند جدول را به صورت راست به چپ طرح بندی نموده و ضمنا جملاتی را که حاوی کلمات فارسی و انگلیسی در کنار هم هستند به شکل صحیحی نمایش دهند.

در تصویر زیر، جدول اول فاقد مقدار برای مشخصه dir است و بنا بر این مقدار پیشفرض ltr برای آن منظور می گردد. همانطور که می بینید شماره ردیف ها و ستون ها برای یک جدول با محتوای فارسی صحیح نیست و ضمنا جمله حاوی کلمات فارسی و انگلیسی حالتی به هم ریخته دارد. در جدول دوم با اضافه نمودن تنظیم مشخصه dir روی حالت راست به چپ این مشکل برطرف شده است.

طرح بندی صفحه با جداول و لیست ها

<table dir=”rtl” border=”3” cellspacing=”10” cellpadding=”6” style=”border-color:Lime” > …

هنگام طراحی صفحات وب به زبان فارسی، مشخصه dir از جدول یا لایه ای که طرح بندی کل صفحه را در خود جای داده روی مقدار rtl تنظیم می کنند تا از مشکلات این چنینی جلوگیری شود. در ادامه، تمام جداول را در حالت راست به چپ پیاده سازی خواهیم کرد.

مشخصه های برچسب <tr>

این برچسب که برای ایجاد ردیف درون جدول کاربرد دارد، دارای چندین مشخصه اختیاری و استاندارد است که تعدادی از مهم ترین آن ها در ادامه مورد بررسی قرار می گیرند:

valign

در طرح بندی صفحه با جداول وقتی عبارتی را در یک ردیف درج می کنید، در حالت پیشفرض در میانه جدول قرار می گیرد. با استفاده از این مشخصه می توانید نوع ترازبندی عمودی محتوای ردیف ها را تغییر دهید. کد زیر چگونگی انجام این کار را نشان می دهد.

<table dir=”rtl” border=”3” cellspacing=”10” cellpadding=”6” style=”bordercolor:Lime” >

<tr >

<td style+”height:60px”>این عبارت در میانه خانه قرار گرفته است (حالت پیش فرض)   </td>

</tr>

<tr valign=”top”>

<td style+”height:60px”>این عبارت به صورت top تراز بندی شده است </td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

مقادیر قابل تخصیص برای تراز بندی عمودی عبارتند از :

 

مقدار مشخصهنوع ترازبندی
topمحتوا را به بالای ردیف منتقل می کند.
bottomمحتوا در پایین ردیف قرار می گیرد.
middleمانند حالت پیشفرض، محتوا در میانه ردیف قرار داده می شود.
baselineمحتوا را بر روی خط زمینه منتقل می کند.

 

style

این مشخصه برای تنظیم ویژگی های ظاهری ردیف مانند ارتفاع، رنگ پس زمینه، ترازبندی متن های موجود در آن کاربرد دارد. کد زیر را در ویرایشگر متنی وارد و صفحه تولید شده را در مرورگر بررسی نمایید.

<tr style=”height:100px;text-align:justify;background-color:#FFCC66;” valign=”top” >

<td> و height و خصوصیت هایی مانند style در قالب بند یاین ردیف از مشخصه

background-color شده است استفاده</td>

طرح بندی صفحه با جداول و لیست ها

مشخصه های برچسب <td> و <th>

همانطور که اشاره شد، در طرح بندی صفحه با جداول از دو برچسب <td>و <th> برای ایجاد خانه درون یک ردیف استفاده می شود. در میان مشخصه های این دو برچسب که شبیه به هم هستند موارد مهمی وجود دارد که آشنایی با آن ها می تواند طراح وب را از برخی سردرگمی ها که ممکن است در کار با جداول پیچیده بروز کند نجات دهد. در این بررسی، از مشخصه ها و خصوصیت هایی که در توضیح برچسب های قبلی به آنها اشاره گردید، صرف نظر شده است.

style

با استفاده از خصوصیت های مهمی مانند width و align-text می توان عرض خانه یا نحوه ترازبندی متنهای موجود در آن را مشخص نمود.

<tr style=”height:120px;background-color:#FFCC66;” valign=”top” >

<td style=”width:150px;text-align:justify” >مشخصه از بااستفاده عبارت این

ترازبندی شده است justify به صورت همتراز یا align-text </td>

</tr>

طرح بندی صفحه با جداول و لیست ها

 

از جمله خصوصیت هایی که در مشخصه style  برای قالب بندی خانه های جدول مورد استفاده قرار می گیرند می توان به

Background-color   برای رنگ آمیزی پس زمینه خانه و نیز color برای تعیین رنگ نوشته های درون آن اشاره نمود. همچنین با استفاده از خصوصیت های موجود برای شکل دهی به خطوط اطراف خانه نظیر border-bottom-color

و border-bottom-width امکان تغییر رنگ و ضخامت این خطوط فراهم می آید. منظور از bottom خط پایینی خانه است و می توان به خصوصیت های سایر خطوط اطراف جدول مانند top ،left  و right هم مقداردهی کرد.

<tr>

<th>دانشآموزی شماره</th><th>نمره</th>

</tr>

<tr>

<td style=”background-color:Maroon;color:White”> 8912510 </td>

<td style=”border-color:Maroon;border-bottom-width:thick;”> 12.5 </td>

</tr>

طرح بندی صفحه با جداول و لیست ها

colspan

برای تعیین تعداد ستون هایی که یک خانه آنها را پوشش می دهد کاربرد دارد و به بیان ساده تر برای ادغام خانه های یک ردیف استفاده می شود.

rowspan

تعداد ردیف هایی را که یک خانه باید پوشش دهد مشخص می کند و راهی برای ادغام خانه های یک ستون است. نتیجه اجرای کد زیر را در مرورگر بررسی کنید.

<table border=”3” style=”border-color:Lime” cellspacing=”5” cellpadding=”4”>

<tr>

<td> cell A </td>

<td colspan=”3”> colspan=3 </td>

</tr>

<tr>

<td> rowspan=”2” > rowspan=2 </td>

<td> cell F </td>

<td> cell G </td>

<td> cell H </td>

</tr>

<tr>

<td> cell J </td>

<td> cell K </td>

<td> cell L </td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

در این مثال، خانه های B ،C و D با استفاده از برچسب <td>و مشخصه colspan=3 با یکدیگر ادغام و تبدیل به یک خانه شده اند. همچنین، خانه های E و I با یک برچسب <td >و مشخصه rowspan=2 با هم ترکیب شده اند.

ایجاد جدول با اندازه های ثابت

در طرح بندی صفحه با جداول و هنگام بررسی مشخصه های برچسب <table > با این نکته آشنا شدید که در صورت تنظیم ابعاد جدول با مقادیر درصدی، ممکن است به دلیل تفاوت در تفکیک پذیری نمایشگرهای کاربران، هر یک از آنها جدول را در اندازه و حالتی خاص مشاهده کنند. این مسئله گاهی باعث به هم ریختگی ساختار جدول خواهد شد. برای رفع چنین مشکلی باید با به کارگیری روش های موجود، عرض جدول را روی اندازۀ ثابتی تنظیم کنید. برای انجام این کار غالبا روش زیر مورد استفاده قرار می گیرد.

تعیین ابعاد جدول برحسب نقطه : اگر در مشخصه های height و width از برچسب <table> مقادیر را بر حسب نقطه وارد کنید، جدول در نمایشگرهای مختلف با ابعاد ثابتی نشان داده خواهد شد. نتیجه اجرای کد زیر را در مرورگر بررسی کنید.

<table border=”1” width=”350” style=”height:100px” >

<caption</جدول باابعاد 350 در 100 نقطه<caption>

<tr>

<td style=”width:20%”> 20%

</td>

<td style=”width:30%”> 30%

</td>

<td style=”width:50%”> 50%

</td>

</tr>

</table>

طرح بندی صفحه با جداول و لیست ها

در این کد، عرض جدول با استفاده از مشخصه width روی 350 تنظیم شده است. این مقدار مانند سایر مقادیر مشخصه ها باید درون عالمت ” ” قرار گیرد و درج واحد نقطه یعنی px الزامی نیست. برای تعیین ارتفاع ثابت برای جدول، باید از خصوصیت height در مشخصه  style استفاده نمود و ضمنا واحد px را نیز قید کرد.

همان طور که در کد فوق می بینید برای تعیین عرض خانه های جدول از مقادیر درصدی استفاده شده است و البته میتوان مقادیر ثابت را هم به کار برد.

ایجاد جدول تودرتو

اغلب اوقات در طرح بندی صفحه با جداول برای طرح بندی صفحه باید جداول تودرتو ایجاد کنید. به این معنی که یک جدول را درون خانه ای از جدول دیگر قرار دهید. به دلیل این که هر یک از این جداول یا خانه ها ممکن است مشخصه ها و خصوصیت های خاص خود را داشته باشند، باید هنگام ایجاد جداول تودرتو دقت کافی به خرج دهید تا به ویژه تداخلی میان اندازه های قید شده برای هر یک از آنها پیش نیاید.

با وجود این که ایجاد این نوع جداول روش متداولی برای طرح بندی صفحه است، اما باید از پیچیده نمودن آن خودداری کنید چرا که سرعت نمایش صفحه در مرورگر را کاهش می دهد.

نتیجه اجرای کد زیر را در مرورگر بررسی کنید. در این کد، ابتدا جدولی با عرض ثابت 300 نقطه و با دو ردیف و دو ستون ایجاد می شود. سپس خانه های ردیف دوم ادغام شده و درون آن جدولی قرار می گیرد که عرض آن %70 فضای موجود (فضای 300 نقطه ای) است.

<table id=”outer” width=”300” border=”1”>

<tr><td>&nbsp;</td><td>&nbsp;</td></tr>

<tr><td colspan=”2”>

<table id=”inner” width=”70%” border=”1”>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

<tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr>

</table></td></tr>

</table>

طرح بندی صفحه با جداول و لیست ها

در هنگام ایجاد جداول تو در تو بهتر است مشخصه id یا شناسه هر یک از جداول را با نامی مناسب مقدار دهی کنید تا از تداخل برچسب ها جلوگیری شده و ردگیری آنها ساده تر باشد.

در این کد برای اولین بار با عبارت &nbsp مواجه شدید که درون خانه های جدول قرار گرفته بود. چنانچه این عبارت را از درون خانه های جدول حذف نموده و به جای آن عبارت دیگری قرار ندهید، خانه ها اصالا دیده نمی شوند.

عبارت &nbsp سرآیند عبارت non-breaking space است و برای قرار دادن فواصل خالی درون صفحات وب استفاد می شود. کاری که در ویرایشگرهای متنی با فشار دادن کلید Space قابل انجام است. در هنگام معرفی زبان XHTML یاد گرفتید که فواصل وارد شده در ویرایشگرهای متنی توسط مرورگر نادیده گرفته می شوند. اما با کمک عبارت &nbsp  می توانید این فواصل را ایجاد کنید.

<body>

A B C

<br/>

A&nbsp;&nbsp;&nbsp;&nbsp;B&nbsp;&nbsp;&nbsp;C

</body>

طرح بندی صفحه با جداول و لیست ها

استفاده از لیست در صفحات وب

لیست ها از جمله اجزاء پرکاربرد در تهیه مستندات هستند و به کمک آن ها می توانید اطلاعات مورد نظر برای ارایه به مخاطبان را به صورت دسته بندی شده در معرض دید آن ها قرار دهید به گونه ای که تشخیص ارتباط هر بخش با سایر بخش ها به سادگی امکانپذیر باشد.

در طراحی صفحات وب غالبا سه نوع لیست با نام های ترتیبی، غیرترتیبی و توضیحی مورد استفاده قرار می گیرند. که در مثال زیر نشان داده شده اند. تجهیزات مورد نیاز برای اتصال به اینترنت:

  • رایانه
  • خط تلفن
  • مودم

مراحل اتصال به اینترنت :

  1. نصب مودم روی رایانه
  2. وصل کردن مودم به خط تلفن
  3. ایجاد اتصال (Conntection)
  4. وارد نمودن اطلاعات کارت اینترنت

(موارد فوق مخصوص اتصال up Dial به اینترنت است.)

لیست غیر ترتیبی

از این نوع لیست برای درج مواردی استفاده می شود که ترتیب قرارگیری آنها اهمیت چندانی ندارد. برای تعریف این نوع لیست، برچسب <ul>در نظر گرفته شده که سرآیند عبارت Unordered List است. هر یک از موارد موجود در لیست هم باید درون برچسب <li > قرار گیرند تا مانند محیط های ویرایش متنی، یک بولت در ابتدای آ نها قرار داده شود و اندکی هم از کنارۀ صفحه فاصله بگیرند. نتیجه اجرای کد زیر را در مرورگر بررسی کنید.

<body dir=”rtl”> تجهیزات موردنیاز برای اتصال به اینترنت

<ul>

<li>رایانه/>li>

<li</خط تلفن<li<

<li>مودم/>li>

</ul>

</body>

طرح بندی صفحه با جداول و لیست ها

موارد موجود در لیست به صورت پیشفرض با یک دایره توپر (disc) بولت دار می شوند. اما با درج مشخصه type در برچسب <ul> و مقدار دهی آن با circle و square می توانید به ترتیب یک دایرۀ توخالی یا مربع توپر را به عنوان بولت درج کنید.

<ul type=”circle”>

لیست ترتیبی

هنگامی که می خواهید مراحل انجام کاری را توضیح دهید که ترتیب آنها حایز اهمیت است یا قصد شماره گذاری موارد موجود در لیست را دارید باید از این نوع لیست استفاده کنید. که با برچسب <ol > ایجاد می شود و سرآیند عبارت Ordered List است. عناصر لیست هم باید درون برچسب <li> قرار گیرند تا مرورگر به هر یک از آن ها یک شماره ترتیبی اختصاص دهد. کد زیر را در ویرایشگر متنی وارد و نتیجه اجرای آن را در مرورگر ببینید.

مراحل اتصال به اینترنت :

<ol>

<li>نصب مودم روی رایانه</li>

<li>وصل کردن مودم به خط تلفن</li>

<li>ایجاد اتصال (Conntection)</li>

<li>وارد نمودن اطلاعات کارت اینترنت</li>

</ol>

طرح بندی صفحه با جداول و لیست ها

با تغییر مقدار type که جزو مشخصه های برچسب <ol > محسوب می شود می توانید نوع شماره گذاری لیست را تغییر داده و مثال آن را روی حروف الفبای انگلیسی (مقدار a یا A) و یا شماره گذاری یونانی (مقدار i یا I) تنظیم کنید.

طرح بندی صفحه با جداول و لیست ها

لیست توضیحی

در لیست های توضیحی، غالبا تعریف یا توضیحی برای یک عبارت درج می شود. در این حالت مجموعه عبارات را درون برچسب <dl> قرار می دهند که از عبارت Definition List گرفته شده است. در ادامه، عبارتهایی که برای آن ها توضیح یا تعریفی وجود دارد درون برچسب <dt > قرار داده می شوند. نام این برچسب از عبارت Define Item گرفته شده چون باعث ایجاد یک مورد جدید می شود. نهایتا تعریف یا توضیح موجود برای هر مورد، درون برچسب <dd > درج می شود که از عبارت Define Definition  به معنی تعیین توضیح اخذ شده است. نتیجه اجرای کد زیر را در مرورگر بررسی کنید.

<body dir=”rtl”>

<dl>

<dt>1 نکته/> :dt>

<dd.</به اینترنت است up Dial موارد فوق مخصوص اتصال<dd<

<dt>2 نکته/> :dt>

<dd. </اتصال از طریق شبکۀ هوشمند نیازی به کارت اینترنت ندارد<dd<

</dl>

<body>

طرح بندی صفحه با جداول و لیست ها

در برچسب <dt > که وظیفه تعریف موارد لیست را برعهده دارد می توانید با استفاده از مشخصه style ، رنگ یا اندازه فونت را برای این نوع عبارات تغییر دهید تا از سایر نوشته ها متمایز شوند.

style=”color:red;font-weight:bold”

طرح بندی صفحه با جداول و لیست ها

ترکیب لیست ها

خوشبختانه در زبان XHTML این امکان فراهم شده تا طراحان صفحات وب، یک لیست را درون لیست دیگر ایجاد کنند و در این میان الزامی برای یکسان بودن نوع لیست ها وجود ندارد. برای نمونه کد زیر را در مرورگر امتحان کنید.

<body dir=”rtl”>

<p>انواع نرم افزارها<p/>

<ol>

<li>نرم افزارهای گرافیکی</li>

<ul>

<li>نرم افزارهای برداری مانند</li>

<ul type=”square”>

<li>Coreldraw</li>

<li>Illustrator</li>

</ul>

<li>نرم افزار های نقطه ای</li>

</ul>

<li>نرم افزارهای انیمیشن سازی</li>

</ol></body>

طرح بندی صفحه با جداول و لیست ها

برای ایجاد چنین لیست هایی باید به نقطفه باز و بسته شدن برچسب ها توجه کافی داشته باشید. کاربرد عمده لیست ها در طرح بندی صفحات وب، ایجاد منو در بالا یا کنار صفحه است که روش انجام آن را در فصل کار با لایه ها فرا می گیرید.

بازگشت به لیست

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *