با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. در این درس با مفاهیم فریم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهید شد.
مجموعه فریمهای عمودی
مثالی در مورد ایجاد مجموعه فریمهای عمودی توسط تگ های frameset و frame
مجموعه فریمهای افقی
مثالی در مورد ایجاد مجموعه فریمهای افقی توسط تگ های frameset و frame
با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. هر صفحه یا دریچه، فریم (frame) نامیده شده و فریمها کاملا مستقل از هم میباشند. محتوای هر فریم هم میتواند هر صفحه یا وب سایتی باشد. هر چند که فریمها طراحی سایتهای کوچک و متوسط را بسیار آسان میکنند ولی استفاده از آنها در کارهای حرفه ای توصیه نمیشود.(به جز در موارد خاص)
معایب استفاده از فریمها:
مثال زیر مجموعه ای از فریمها را که شامل دو فریم عمودی میباشند معرفی میکند. از سمت چپ فریم اول 75 درصد و فریم دوم 25 درصد از عرض پنجره مرورگر را به خود نمایش خواهند داد. در ادامه تعریف محتویات هر فریم، درون فریم اول فایل "frame_left.html" و درون فریم دوم فایل "frame_right.html" نمایش داده خواهد شد.
<html> <frameset cols="75%,25%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </html> |
برای نمایش مثال بالا به سه فایل نیاز دارید، frame_left.html ،frame_right.html و فایل کد اچتمل بالا.
شناسه های cols و rows در تگ frameset
شناسه | مقدار شناسه | کارکرد | ||
---|---|---|---|---|
cols | عرض پنجره بر اساس پیکسل، درصد یا علامت * | تعیین تعداد و اندازه ستونها در فریم ست | ||
rows | عرض پنجره بر اساس پیکسل، درصد یا علامت * | تعیین تعداد و اندازه ردیفها در فریم ست | ||
مثالهای زیر را در نظر بگیرید:
مثال 2 | مثال 1 | ||
|
| ||
نمایش توسط مرورگر | نمایش توسط مرورگر |
در مثال یک عرض فریم اول از سمت راست 200 پیکسل تعیین شده و بقیه عرض پنجره که با علامت * مشخص میشود به فریم دوم اختصاص خواهد یافت.
در مثال دوم عرض پنجره با مقادیر درصدی به فریمها اختصاص یافته است.
در مورد شناسه rows دقیقا قراردادهای بالا برقرارند.
* اگر فریمهای طراحی شده مرزهای قابل مشاهده دارند توسط کاربر قابل تغییر اندازه (resize) خواهند بود و برای جلوگیری از تغییر اندازه فریمها توسط کاربر باید از شناسه ای به نام noresize در داخل تگ <frame> استفاده شود. در این مثال noresize نمیتوانید که فریمها را تغییر اندازه بدهید.
* اگر میخواهید که فریمها scroll نشوند (بالا و پایین بردن صفحه توسط ماوس) باید در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهید. (مقادیر ممکن "yes" ، "no" و "auto" میباشند.) در این مثال scrolling صفحات قابل scroll نیستند.
* اگر میخواهید که مرز بین فریمها نمایش داده نشوند باید در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهید. (مثال frameborder )
* درصد بسیار کمی از مرورگرها از تگهای مربوط به frame و frameset پشتیبانی نمیکنند. برای این موارد باید از تگ <noframes> جهت نمایش صفحه جایگزین استفاده شود.
مجموعه فریمهای مرکب
مثالی در مورد ایجاد مجموعه ای مرکب از فریمهای عمودی و افقی
مثالی کاربردی در مورد فریمها
در این مثال کاربردی با کمک سه فریم امکان نمایش صفحات مختلف به آسانی فراهم میشود. فریم افقی و بالائی سرتیتر و نام اصلی سایت را نمایش خواهد داد و فریم سمت راست لینکهای مهم صفحه را در بر گرفته و امکان navigation را فراهم میسازد و نهایتا فریم اصلی و سمت چپ صفحات مختلف سایت را به نمایش خواهد گذاشت. توجه داشته باشید که برای این مثال حداقل به یک فایل برای معرفی مجموعا فریمها(frameset) و سه صفحه اچتمل برای فریمهای بالائی، سمت چپ و راست احتیاج خواهد بود.
فریمهای شناور و یا درجا (Inline frame)
مثالی در مورد فریمهای شناور و درجا (iframe)، فریمی درون یک صفحه اچتمل
مثالی کاربردی در مورد فریمهای درجا (Inline frame)
مثالی کاربردی در مورد فریمهای شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخی با فریم های شناور
مثالی در مورد نمایش درایو لوکال (مثلا c: بازدیدکنندگان سایت به آنها
فریمها و پیوندهای نامگذاری شده
مثالی کامل در مورد فریمها و پیوندهای نامگذاری شده و نحوه استفاده از آنها در طراحی سایتی ساده متشکل از چهار فایل اچتمل
فریمها و پیوندهای نامگذاری شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه های کامل در تگ frame
تگ های فریم
Start Tag | Purpose | کاربرد | ||
---|---|---|---|---|
<frameset> | Defines a set of frames | تعریف مجموعه ای از فریم ها | ||
<frame> | Defines a sub window (a frame) | تعریف یک فریم | ||
<noframes> | Defines a noframe section for browsers that do not handle frames | تعریف جایگزین برای مرورگرهائی که از فریم ها پشتیبانی نمیکنند. | ||
<iframe> | Defines an inline sub window (frame) | تعریف فریم های درجا (inline) | ||
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها