آموزش HTML - فریم‌های
فریم‌های HTML برای تقسیم پنجره مرورگر شما به چند بخش استفاده می‌شوند که در آن هر بخش می‌تواند یک سند HTML جداگانه را به طور مستقل بارگذاری کند. به مجموعه‌ای از فریم‌ها در پنجره مرورگر، فریم‌ست (frameset) گفته می‌شود. پنجره به روشی مشابه سازمان‌دهی جدول‌ها به فریم‌ها تقسیم می‌شود: به صورت سطرها و ستون‌ها.
استفاده از تگ <frame> دیگر توصیه نمی‌شود، زیرا در HTML5 پشتیبانی نمی‌شود. به جای استفاده از این تگ، می‌توانیم از <iframe> یا <div> همراه با CSS برای دستیابی به جلوه‌های مشابه استفاده کنیم.
سنتکس
<frameset rows="50%,50%">
<frame name="top" src="link/to/frame1" />
<frame name="bottom" src="link/to/frame2" />
</frameset>که در آن، ویژگی rows در frameset تقسیم پنجره به بخش‌های افقی را تعریف می‌کند. در این حالت، پنجره به دو سطر تقسیم می‌شود که هر کدام ۵۰٪ از ارتفاع موجود را اشغال می‌کنند.
نمونه‌هایی از فریم‌های HTML
در ادامه چند نمونه کد آورده شده است که نحوه کار با فریم‌ها در HTML را نشان می‌دهند.
ایجاد فریم‌ها در HTML
برای ساخت فریم‌ها در یک صفحه، به جای تگ <body> از تگ <frameset> استفاده می‌کنیم. تگ <frameset> نحوه تقسیم پنجره به فریم‌ها را تعیین می‌کند. ویژگی rows در تگ <frameset> فریم‌های افقی و ویژگی cols فریم‌های عمودی را مشخص می‌کند. هر فریم با تگ <frame> مشخص می‌شود و تعیین می‌کند که کدام سند HTML باید درون آن فریم باز شود.
در ادامه مثالی برای ایجاد سه فریم افقی آورده شده است. اگر مرورگر شما از فریم‌ها پشتیبانی نکند، عنصر body نمایش داده می‌شود.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows="10%,80%,10%">
<frame name="top" src="/html/top_frame.htm" />
<frame name="main" src="/html/main_frame.htm" />
<frame name="bottom" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>ایجاد فریم‌های عمودی
در اینجا ویژگی rows را با cols جایگزین کرده و عرض آن‌ها را تغییر داده‌ایم. این کار باعث می‌شود هر سه فریم به صورت عمودی ایجاد شوند.
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>ویژگی‌های name و target در فریم
یکی از رایج‌ترین کاربردهای فریم‌ها، قرار دادن نوارهای پیمایش (Navigation) در یک فریم و سپس بارگذاری صفحات اصلی در یک فریم جداگانه است.
بیایید مثال زیر را بررسی کنیم که در آن فایل test.htm شامل کد زیر است:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols="200, *">
<frame src="/html/menu.htm" name="menu_page" />
<frame src="/html/main.htm" name="main_page" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>در اینجا دو ستون برای پر شدن با دو فریم ایجاد کرده‌ایم. فریم اول ۲۰۰ پیکسل عرض دارد و منوی پیمایش پیاده‌سازی‌شده توسط فایل menu.htm را در خود جای می‌دهد. ستون دوم فضای باقی‌مانده را پر می‌کند و شامل بخش اصلی صفحه خواهد بود که توسط فایل main.htm پیاده‌سازی شده است. برای هر سه لینک موجود در منو، فریم هدف (target) را برابر main_page قرار داده‌ایم؛ بنابراین هر زمان که روی هر یک از لینک‌های منو کلیک کنید، لینک مربوطه در main_page باز خواهد شد.
محتوای فایل menu.htm به صورت زیر است:
<!DOCTYPE html>
<html>
<body bgcolor="#4a7d49">
<a href="https://www.google.com" target="main_page">
Google
</a>
<br /><br />
<a href="https://www.microsoft.com" target="main_page">
Microsoft
</a>
<br /><br />
<a href="https://news.bbc.co.uk" target="main_page">
BBC News
</a>
</body>
</html>محتوای فایل main.htm به صورت زیر است:
<!DOCTYPE html>
<html>
<body bgcolor="#b5dcb3">
<h3>
This is main page and content from any link
will be displayed here.
</h3>
<p>
So now click any link and see the result.
</p>
</body>
</html>ویژگی‌های تگ frameset
ویژگی‌های فهرست‌شده در زیر توسط تگ frameset پشتیبانی می‌شوند.
| ویژگی‌ها | توضیحات |
|---|---|
| cols | تعداد ستون‌های موجود در frameset و اندازه هر ستون را مشخص می‌کند. شما می‌توانید عرض هر ستون را به یکی از چهار روش زیر تعیین کنید:
|
| rows | این ویژگی دقیقاً مانند ویژگی cols عمل می‌کند و همان مقادیر را می‌پذیرد، اما برای تعیین سطرهای موجود در frameset استفاده می‌شود. به عنوان مثال، برای ایجاد دو فریم افقی، از rows="10%, 90%" استفاده کنید. شما می‌توانید ارتفاع هر سطر را به همان روشی که در بالا برای ستون‌ها توضیح داده شد مشخص کنید. |
| border | این ویژگی عرض حاشیه هر فریم را به پیکسل مشخص می‌کند. به عنوان مثال border="5". مقدار صفر به معنای عدم وجود حاشیه است. |
| frameborder | این ویژگی مشخص می‌کند که آیا حاشیه سه‌بعدی بین فریم‌ها نمایش داده شود یا خیر. این ویژگی مقدار 1 (بله) یا 0 (خیر) را می‌پذیرد. به عنوان مثال frameborder="0" عدم وجود حاشیه را مشخص می‌کند. |
| framespacing | این ویژگی میزان فاصله بین فریم‌ها را در یک frameset مشخص می‌کند. این ویژگی می‌تواند هر مقدار صحیحی را بگیرد. به عنوان مثال framespacing="10" به این معنی است که باید ۱۰ پیکسل فاصله بین هر فریم وجود داشته باشد. |
ویژگی‌های تگ <frame> در HTML
ویژگی‌های فهرست‌شده در زیر توسط تگ frame پشتیبانی می‌شوند.
| ویژگی | توضیحات |
|---|---|
| src | این ویژگی برای دادن نام فایلی که باید در فریم بارگذاری شود استفاده می‌شود. مقدار آن می‌تواند هر آدرس URL باشد. به عنوان مثال، src="/html/top_frame.htm" یک فایل HTML موجود در دایرکتوری html را بارگذاری می‌کند. |
| name | این ویژگی به شما امکان می‌دهد یک نام به فریم اختصاص دهید. از این نام برای مشخص کردن اینکه سند باید در کدام فریم بارگذاری شود استفاده می‌شود. این امر به‌ویژه زمانی اهمیت دارد که می‌خواهید لینک‌هایی در یک فریم ایجاد کنید که صفحات را در فریم دیگری بارگذاری کنند؛ در این حالت، فریم دوم به یک نام نیاز دارد تا خود را به عنوان هدف (target) لینک معرفی کند. |
| frameborder | این ویژگی مشخص می‌کند که آیا حاشیه‌های آن فریم نمایش داده شوند یا خیر؛ این مقدار بر مقداری که در ویژگی frameborder در تگ <frameset> (در صورت وجود) تعیین شده است، ارجحیت دارد و می‌تواند مقادیر 1 (بله) یا 0 (خیر) را بگیرد. |
| marginwidth | این ویژگی به شما امکان می‌دهد عرض فاصله بین سمت چپ و راست حاشیه‌های فریم و محتوای فریم را مشخص کنید. این مقدار به پیکسل داده می‌شود. به عنوان مثال marginwidth="10". |
| marginheight | این ویژگی به شما امکان می‌دهد ارتفاع فاصله بین بالا و پایین حاشیه‌های فریم و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می‌شود. به عنوان مثال marginheight="10". |
| noresize | به طور فرض، می‌توانید با کلیک کردن و کشیدن حاشیه‌های یک فریم، اندازه آن را تغییر دهید. ویژگی noresize مانع از آن می‌شود که کاربر بتواند اندازه فریم را تغییر دهد. به عنوان مثال noresize="noresize". |
| scrolling | این ویژگی ظاهر نوارهای پیمایش (Scrollbar) که روی فریم ظاهر می‌شوند را کنترل می‌کند. این ویژگی مقادیر "yes" ،"no" یا "auto" را می‌پذیرد. به عنوان مثال scrolling="no" به این معنی است که فریم نباید نوار پیمایش داشته باشد. |
| longdesc | این ویژگی به شما امکان می‌دهد لینکی به صفحه دیگری ارائه دهید که شامل توضیحات طولانی درباره محتوای فریم است. به عنوان مثال longdesc="framedescription.htm". |
معایب فریم‌ها
استفاده از فریم‌ها چند عیب دارد، به همین دلیل هرگز استفاده از فریم‌ها در صفحات وب توصیه نمی‌شود.
- برخی از دستگاه‌های کوچک‌تر اغلب به این دلیل که صفحه نمایش آن‌ها به اندازه کافی بزرگ نیست تا تقسیم‌بندی شود، نمی‌توانند با فریم‌ها کار کنند.
- گاه به دلیل وضوح‌های متفاوت صفحه نمایش، صفحه شما در رایانه‌های مختلف به گونه‌ای متفاوت نمایش داده می‌شود.
- دکمه بازگشت (Back) مرورگر ممکن است طبق انتظار کاربر کار نکند.
- هنوز چند مرورگر وجود دارند که از فناوری فریم پشتیبانی نمی‌کنند.
ویدیو - فریم‌های HTML
پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.