HTML آموزش

با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ های مربوطه مخصوصا تگهای Frame و Frameset آشنا خواهيد شد.

درس قبلی، درس بعدی

مثالها:

مجموعه فريمهای عمودی
مثالی در مورد ايجاد مجموعه فريمهای عمودی توسط تگ های frameset و frame

مجموعه فريمهای افقی
مثالی در مورد ايجاد مجموعه فريمهای افقی توسط تگ های frameset و frame

مثالهای بيشتر

فريمها (Frames)

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

معايب استفاده از فريمها:

موتورهای جستجو با صفحات طراحی شده با فريمها مشکل دارند.
چاپ و print صفحاتی که از فريمها استفاده ميکنند مشکل است.
صفحاتی که از فريمها استفاده ميکنند معمولا مبتدی بودن طراح سايت را نشان ميدهد!!

تگ فريم ست (Frameset)

تگ <frameset> به تعريف فريمها و تقسيم بندی پنجره مرورگر ميپردازد.
هر تگ <frameset> مجموعه ای از رديفها يا ستونها را تعريف ميکند.
داخل هر فريم ميتواند frameset ديگری قرار دهيد.
با کمک شناسه های rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
تگ <frameset> درون تگهای <html> و <html/> قرار ميگيرد.(نيازی به قيد تگ body هنگام معرفی يک frameset نيست.)

تگ فريم (Frame)

کاربرد اصلی تگ <frame> تعيين source يا نام صفحه ای است که بايد در فريم ها نمايش داده شود.

مثال زير مجموعه ای از فريمها را که شامل دو فريم عمودی ميباشند معرفی ميکند. از سمت چپ فريم اول 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

<html>
<frameset cols="25%,50%,25%">
   <frame src="frame_3.html">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

<html>
<frameset cols="*,200">
   <frame src="frame_2.html">
   <frame src="frame_1.html">
</frameset>
</html>

نمايش توسط مرورگر

در مثال يک عرض فريم اول از سمت راست 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