| حالا شما می توانید یک صفحه با استفاده از فریمها بسازید. اما وقتی که شما یک لینک را در یک فریم قرار می دهید پس از کلیک کردن لینک در همان فریم باز می شود. این مسأله به این دلیل است که هر فریم یک صفحه HTML است و مانند یک صفحه عمل می کند. پس اگر برای لینک شناسه ای را تعریف نکنیم در همان صفحه (در حقیقت در همان فریم) باز می شود. شما می توانید صفحه را طوری طراحی کنید که لینکهای یک فریم در فریم دیگری باز شوند یا در یک صفحه جدید باز شوند که فریمی ندارد. برای این کار باید ابتدا فریمها را نامگذاری کنیم و سپس از شناسه target در تگ لینک استفاده کنیم. به یک مثال در این رابطه توجه کنید: <html> <head> <title>تعیین فریم مقصد برای لینکها</title> </head> <frameset cols="25%,75%"> <frame src="page4.htm" name="left"> <frame src="page2.htm" name="right"> </frameset> </html> ما در این مثال از دو فریم با نامهای left و right استفاده کردیم. شما می توانید هر نامی را که مناسب می دانید استفاده کنید.(این نامی است که در تگ لینک مورد استفاده قرار خواهد گرفت و لزوماً نباید همان نام فایل HTML قرار گرفته شده در فریم باشد.) حالا که فریمها را نامگذاری کردیم می توانیم از این نامها به عنوان مقادیری برای شناسه target در تگ لینکها در هر کدام از فریمها استفاده کنیم. فرض کنید ما در فریم سمت چپ لیستی از صفحات را داریم که می خواهیم با کلیک کردن بر روی آنها در فریم سمت راست باز شوند. در این حالت باید این شناسه را به تگ لینکهای موجود در فریم سمت چپ اضافه کنید: "target="right . برای مثال به لینک زیر توجه کنید: حالا پس از کلیک کردن لینک، فریم سمت چپ دست نخورده باقی می ماند و لینک در فریم سمت راست باز می شود. شما می توانید این کار را در صفحاتی که بیش از یک فریم هم دارند انجام دهید. فقط فراموش نکنید که فریمها را نامگذاری کنید. میتوان لینکها را به جای اینکه در یک فریم باز کنیم، ر تمام پنجره و بدون فریم باز کنیم. برای این کار باید شناسه "target="_top را به تگ لینک اضافه کنیم. مثلاً می توانیم تگ لینکی مانند زیر بنویسیم: <a href="http://www.neopersia.org/html/index.html" target="_top">این لینک در تمام صفحه باز می شود.</a> در اینجا تعدادی از شناسه هایی را که می توان به تگ frame اضافه کرد آورده ایم. با این شناسه ها می توانیم رفتار این فریمها را بهتر کنترل کنیم:
برخی از مرورگرهای قدیمی ممکن است نتوانند فریمها را نشان دهند. شاید شما بخواهید برای این دسته از کاربران با مرورگرهای قدیمی پیغامی را بنویسید یا لینک صفحه ای را که در آن از فریم استفاده نکرده اید به آنها نشان دهید. برای این کار می توانید از فرمان زیر استفاده کنید: <noframes> متن پیغامی که در صورت نمایش ندادن فریمها مشاده می شود. </noframes> حالا کاربرانی که نمی توانند فریمها را مشاهده کنند پیغام شما را به جای یک صفحه خالی می بینند. | ||
| | ||
| برای اینکه بتوانید از فریمها در صفحه خود استفاده کنید، ابتدا باید بدانید این فریمها چگونه کار می کنند. یک صفحه که در آن از یک فریم استفاده شده است در حقیقت به دو یا چند قسمت تقسیم شده است که هر قسمت متن html مربوط به خود را دارد. لینک زیر را کلیک کنید تا بتوانید یک صفحه ساده که در آن از فریم استفاده شده است را ببینید. همانطور که در این مثال می توانید ملاحظه کنید در واقع با استفاده از فریمها، دو صفحه وب را در قالب یک صفحه نمایش می دهیم. هر کدام از صفحات در این مجموعه ( یعنی صفحاتی که در فریمها قرار گرفته اند و صفحه ای که فریمها در آن قرار دارند، کد html مربوط به خود را دارند. برای ایجاد فریم در یک صفحه به جای تگ body از تگ frameset استفاده می کنیم. می توانیم برای ساخت صفحه ای که فریمها در آن قرار می گیرند از کد زیر استفاده کنیم: <html> <head> <title>نمایش یک فریم ساده</title> </head> <frameset cols="50%,50%"> <frame src="page1.htm"> <frame src="page2.htm"> </frameset> </html> در اینجا به وظیفه تگهای مورد استفاده در اینجا می پردازیم:
حالا فرض کنید ما به سه فریم نیاز داشته باشیم. می توانیم به صورت زیر عمل کنیم: <html> <head> <title>نمایش سه فریم در یک صفحه </title> </head> <frameset cols="33%,33%,33%"> <frame src="page1.htm"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </html> با این کد می توانیم سه فریم در یک صفحه داشته باشیم که هر کدام از آنها 33 درصد پهنای صفحه را در بر می گیرند. یک درصد باقیمانده را هم مرورگر تخصیص می دهد. لینک زیر را کلیک کنید تا بتوانید نتیجه را ملاحظه کنید: فرض کنید می خواهیم فریمها را به صورت عمودی و زیر یکدیگر در صفحه قرار دهیم. در این صورت باید به جای شناسه cols در تگ frameset از شناسه rows استفاده کنیم. به کد زیر توجه کنید: <html> <head> <title>نمایش فریمها به صورت افقی و عمودی</title> </head> <frameset cols="50%,50%"> <frame src="page1.htm"> <frameset rows="50%,50%"> <frame src="page2.htm"> <frame src="page3.htm"> </frameset> </frameset> </html> ما با اوین تگ frameset به مرورگر می گوییم که صفحه را به دو قسمت ( دو ستون ) تقسیم کند. 1. <"FRAME SRC="page1.htm> به مرورگر می گوید که ستون اول از سمت چپ باید با صفحه page1.htm پر شود. 2. تگ frameset دوم درون تگ frameset اول قرار دارد. این تگ به مرورگر می گوید که ستون دوم را به دو ردیف افقی تقسیم کند. ( فریم دوم از سمت چپ خود به دو فریم تبدیل می شود ) 3. تگ <"FRAME SRC="page2.htm> به مرورگر می گوید که بالاترین فریم قرار گرفته در ستون دوم صفحه را با صفحه page2.htm پر کند. 4. تگ <"FRAME SRC="page3.htm> به مرورگر می گوید که دومین فریم از بالا را در ستون دوم صفحه با صفحه page3.htm پر کند. در پایان فراموش نکنید که همه تگهای frameset باز شده را در پایان ببندید. | ||
| ||
| فرض کنید می خواهیم دو جدول را در یک سطر قرار دهیم. اگر بخواهیم دو تگ جدول را پشت سر هم استفاده کنیم، جدول دوم در سطر بعدی و زیر جدول اول قرار می گیرد. برای حل این مشکل می توانید دو جدول مورد نظر را در یک جدول که آنها را در بر می گیرد قرار دهیم. در این صورت می توان دو جدول در یک سطر ایجاد کرد. در اینجا می توانید کدی را که یک جدول را درون یک جدول دیگر ایجاد می کند: <table width="500" border="4"><!-- تگ آغازی جدول بیرونی --> <td align="center"><!-- سلول اول در جدول بیرونی --> <table width="400" border="2"><!-- آغاز جدول درونی --> <td align="center"><!-- اولین سلول جدول درونی --> محتویات جدول درونی </td><!-- پایان سلول جدول درونی --> </table><!-- پایان جدول درونی --> </td><!-- پایان سلول جدول بیرونی --> </table><!-- پایان جدول بیرونی --> این هم جدول به دست آمده:
به یاد داشته باشید که جدولهای درونی را باید در سلولهای جدول بیرونی قرار دهید یعنی بین <td> و <td/> در جدول بیرونی. حالا فرض کنید می خواهیم بیش از یک جدول درون یک جدول ایجاد کنیم. برای اینکه این جدولهای درونی، در یک سطر قرار گیرد کافی است به تعداد جدولهای درونی، در جدول بیرونی سلول ایجاد کنیم و جدولها را در سلولهای جدول بیرونی قرار دهیم. برای مثال فرض کنید می خواهیم دو جدول را در یک سطر داشته باشیم. می توانیم مانند زیر عمل کنیم: <table width="600" border="4"><!-- تگ آغازی جدول بیرونی --> <td align="center"><!-- سلول اول در جدول بیرونی --> <table width="250" border="2"><!-- آغاز جدول درونی --> <td align="center"><!-- اولین سلول جدول درونی --> محتویات اولین جدول درونی </td><!-- پایان سلول اولین جدول درونی --> </table><!-- پایان اولین جدول درونی --> </td><!-- پایان اولین سلول جدول بیرونی --> <td align="center"><!-- آغاز دومین سلول جدول بیرونی --> <table width="250" border="2"><!-- آغاز دومین جدول درونی --> <td align="center"><!-- آغاز سلول دومین جدول درونی --> محتویات دومین جدول درونی </td><!-- پایان سلول دومین جدول درونی --> </table><!-- پایان دومین جدول درونی --> </td><!-- پایان دومین سلول جدول بیرونی --> </table><!-- پایان جدول بیرونی --> این هم نتیجه به دست آمده:
قابل ذکر است که ما در این مثالها برای بهتر مشخص شدن محل جدولها از شناسه border استفاده کرده ایم. شما می توانید به دلخواه از آن استفاده کنید. بهتر است در هنگام نوشتن کدها عرض جدولها را مشخص کنید تا در پایان به هم ریخته نباشند. با این روش می توانید هر تعداد جدول که نیاز داشته باشید در کنار هم قرار دهید | ||||||||
| | ||||||||
| اگر بخواهیم عرض یک جدول را تغییر دهیم می توانیم از شناسه width استفاده کنیم. با اضافه کردن این شناسه به تگ جدول می توانیم مقدار عرض جدول را مشخص کنیم. این مقدار می تواند در مقیاس پیکسل باشد یا به صورت درصد. برای تغییر دادن ارتفاع جدول نیز میتوانیم از شناسه height استفاده کنیم. برای مثال اگر بخواهیم یک جدول با عرض 500 پیکسل و ارتفاع 50 پیکسل داشته باشیم می توانم به صورت زیر عمل کنیم: <table border="3" width="500" height="50"> <td> محتویات جدول </td> </table> در اینجا می بینید که برخلاف متن درون جدول که متن کوتاهی است عرض جدول نسبتاً زیاد است (همان 500 پیکسلی که برای آن تعریف کردیم):
اگر بخواهیم نحوه قرار گرفتن محتویات درون جدول را تعیین کنیم می توانیم از شناسه های زیر را در تگ <td> استفاده کنیم:
حالا این شناسه ها را در یک جدول به کار می بریم: <table width="600" border="3"> <td align="left"> متمایل به چپ </td> <td align="center"> متمایل به مرکز </td> <td align="right"> متمایل به راست </td> </table> می توانید نحوه قرارگیری محتویات سلولها را در جدول زیر ملاحظه کنید:
اگر بخواهیم نحوه قرارگیری محتویات سلولها را به صورت عمودی تنظیم کنیم، می توانیم از شناسه valign استفاده کنیم:
در مثال زیر می توانید نحوه استفاده از شناسه های بالا در یک جدول را ببینید: <table width="600" height="100" border="3"> <td align="center" valign="top"> متمایل به بالا </td> <td align="center" valign="middle"> متمایل به وسط </td> <td align="center" valign="bottom"> متمایل به پایین </td> </table> این هم جدول نهایی:
نحوه قرارگیری عمودی محتویات سلولها زمانی مفید خواهد بود که تعداد سطرهای محتویات سلولهای مختلف در یک ردیف جدول با هم برابر نباشند. در حقیقت زمانی که همه سلولها دارای یک تعداد سطر باشند و نحوه قرار گیری عمودی محتویات آنها به یک صورت است. شناسه های دیگری نیز وجود دارد که می توانیم در تگ td استفاده کنیم:
به یک مثال توجه کنید: <table border="2"> <td align="center"> سلول اول </td> <td rowspan="2" align="center"> <img src="learn_html.gif"> </td> <tr> <td align="center"> سلول دوم </td> </tr> </table> این هم جدول به دست آمده. همانطور که می بینید سلولی که محتوی عکس است در کنار دو سلول دیگر قرار گرفته است نه در قسمت بالای سلول دوم:
حال فرض کنید می خواهیم یک جدول مانند زیر داشته باشیم:
برای ایجاد این جدول در تگ <td> در ردیف اول از شناسه "3"=colspan استفاده می کنیم. با این کار سلول موجود در ردیف اول به اندازه سه سلول در عرض کشیده می شود. در اینجا می توانید کد مربوط به این جدول را ببینید: <table border="1"> <tr> <td align="center" colspan="3"> <b>سلول اول</b> </td> </tr> <tr> <td align="center"> سلول دوم </td> <td align="center"> سلول سوم </td> <td align="center"> سلول چهارم </td> </tr> </table> شما می توانید در صورت تمایل رنگ زمینه جدول، سطر، ستون یا هر سلول را در جدول که بخواهید تغییر دهید. برای تعیین کردن رنگ زمینه برای جدول باید این شناسه bgcolor را در تگ جدول به کار ببرید و رنگ مورد نظر خود را در این شناسه به کار ببرید. برای مثال اگر بخواهیم جدولی با زمینه زرد ایجاد کنیم، می توانیم به این صورت عمل کنیم: <table border="3" bgcolor="yellow"> <td> محتویات جدول </td> </table> جدول زیر به دست می آید:
قابل ذکر است که اگر به جای تگ ابتدایی جدول از تگ زیر نیز استفاده کنیم همان نتیجه را به دست می آوریم: <table border="3" bgcolor="#ffff00"> اگر بخواهیم هر سلول رنگ زمینه مربوط به خودش را داشته باشد باید شناسه مربوط به رنگ زمینه را به تگ <td> اضافه کنیم. برای نمونه به جدول زیر توجه کنید:
آیا می خواهید کد مربوط به این جدول را ببینید: <table border="3"> <td bgcolor="yellow"> محتویات سلول اول </td> <td bgcolor="green"> محتویات سلول دوم </td> </table> در آخر می خواهیم رنگ زمینه هر ردیف را تغییر دهیم. برای این کار شناسه مربوط به رنگ زمینه را در تگ <tr> قرار می دهیم: <table border="3" width="300"> <tr bgcolor="pink"> <td>صورتی</td> <td>این ردیف صورتی است</td> <tr bgcolor="gray"> <td>خاکستری</td> <td>این ردیف خاکستری است</td> </table> این هم جدول به دست آمده:
| |||||||||||||||||||||||
هیچ نظری موجود نیست:
ارسال یک نظر