site-logo site-logo
HTML - فریم‌ها (Frames)
نوشتن نظر کلیک کنید

HTML – فریم‌ها (Frames)

آخرین بروزرسانی: 

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

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

  1. – برخی دستگاه‌های کوچک قادر به کار با فریم‌ها نیستند، زیرا صفحه نمایش آن‌ها اغلب کافی بزرگ نیست تا تقسیم شود.
  2. – گاهی اوقات صفحه‌ی شما به دلیل وجود رزولوشن‌های مختلف صفحه در کامپیوترهای مختلف، به شکل‌های متفاوتی نمایش داده می‌شود.
  3. – دکمه بازگشت مرورگر ممکن است به انتظارات کاربر نیز مطابقت نکند.
  4. – هنوز هم چندین مرورگر وجود دارد که از فناوری فریم پشتیبانی نمی‌کنند.

ساخت فریم‌ها (Creating Frames)

برای استفاده از فریم‌ها در یک صفحه، به جای تگ <body> از تگ <frameset> استفاده می‌کنیم. تگ <frameset> تعیین می‌کند که چگونه پنجره را به فریم‌ها تقسیم کنیم. ویژگی rows تگ <frameset> فریم‌های افقی را تعیین می‌کند و ویژگی cols فریم‌های عمودی را تعیین می‌کند. هر فریم توسط تگ <frame> مشخص می‌شود و مشخص می‌کند کدام سند HTML باید در فریم باز شود.

توجه – تگ <frame> در HTML5 منسوخ شده است. توصیه می‌شود از این عنصر استفاده نکنید.

مثال

این کد HTML یک مثال از سه فریم افقی ایجاد می‌کند. این سه فریم شامل فریم بالا، فریم اصلی و فریم پایین است. هر فریم مشخص می‌کند کدام سند HTML باید در آن فریم باز شود.

<!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>

این کد ابتدا تگ <!DOCTYPE> را تعیین می‌کند. سپس یک تگ <html> باز شده و تگ <head> شامل عنوان صفحه را دارد. در داخل تگ <frameset>، با استفاده از ویژگی rows، سه فریم با ارتفاع‌های 10٪، 80٪ و 10٪ تعریف شده است. سپس با استفاده از تگ <frame>، سه فریم به نام‌های “top”، “main” و “bottom” با آدرسهای مختلف HTML مشخص شده‌اند. در آخر، تگ <noframes> شامل یک پیام است که در صورتی که مرورگر فریم را پشتیبانی نکند، نمایش داده می‌شود.

مثال

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

<!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>

این کد ابتدا تگ را تعیین می‌کند. سپس یک تگباز شده و تگشامل عنوان صفحه را دارد. در داخل تگ ، با استفاده از ویژگی cols، سه فریم با عرض‌های 25٪، 50٪ و 25٪ تعریف شده است. سپس با استفاده از تگ ، سه فریم به نام‌های “left”، “center” و “right” با آدرسهای مختلف HTML مشخص شده‌اند. در آخر، تگ<noframes> شامل یک پیام است که در صورتی که مرورگر فریم را پشتیبانی نکند، نمایش داده می‌شود.

تگ frameset

تگ <frameset> یکی از اجزای مهم در HTML است که برای تعریف فریم‌ها در صفحه وب استفاده می‌شود. این تگ دارای چند ویژگی مهم است که به شرح زیر است:

  1. – cols: این ویژگی تعیین می‌کند که چند ستون در فریم‌ها وجود دارد و اندازه هر ستون چگونه است. می‌توانید عرض هر ستون را به یکی از چهار روش زیر تعیین کنید:

    • – ارزش‌های مطلق به پیکسل. برای مثال، برای ایجاد سه فریم عمودی، از cols = “100، 500، 100” استفاده کنید.
    • – درصد پنجره مرورگر. برای مثال، برای ایجاد سه فریم عمودی، از cols = “10٪، 80٪، 10٪” استفاده کنید.
    • – استفاده از نماد ویژ. برای مثال، برای ایجاد سه فریم عمودی، از cols = “10٪، *، 10٪” استفاده کنید. در این صورت، ویژگی ویژ باقیمانده پنجره را می‌گیرد.
    • – به عنوان عرض‌های نسبی پنجره مرورگر. برای مثال، برای ایجاد سه فریم عمودی، از cols = “3 *، 2 *، 1 *” استفاده کنید. این یک جایگزین برای درصد است. می‌توانید عرض‌های نسبی پنجره مرورگر را استفاده کنید. در اینجا پنجره به شش قسمت تقسیم می‌شود: ستون اول نیمی از پنجره را می‌گیرد، ستون دوم یک سوم، و ستون سوم یک ششم.

  2. – rows: این ویژگی مانند ویژگی cols عمل می‌کند و مقادیر مشابهی را می‌پذیرد، اما برای تعیین ردیف‌ها در فریم‌ها استفاده می‌شود. برای مثال، برای ایجاد دو فریم افقی، از rows = “10٪، 90٪” استفاده کنید. شما می‌توانید ارتفاع هر ردیف را به همان شیوهی که برای ستون‌ها توضیح داده شده‌است، مشخص کنید.

  3. – border: این ویژگی عرض حاشیه هر فریم را به پیکسل مشخص می‌کند. برای مثال، border = “5”. مقدار صفر به معنی عدم وجود حاشیه است.

  4. – frameborder: این ویژگی مشخص می‌کند که آیا باید حاشیه سه بعدی بین فریم‌ها نمایش داده شود یا خیر. این ویژگی مقدار 1 (بله) یا 0 (خیر) می‌پذیرد. برای مثال frameborder = “0” بدون حاشیه را مشخص می‌کند.

  5. – framespacing: این ویژگی مقدار فاصله بین فریم‌ها در یک مجموعه فریم‌ها را مشخص می‌کند. این می‌تواند هر مقدار صحیحی را بپذیرد. برای مثال framespacing = “10” به معنی وجود فاصله 10 پیکسل بین هر فریم است.

تگ frame

تگ <frame> یکی از اجزای مهم در HTML است که برای تعیین یک فریم در یک صفحه فریم‌بندی استفاده می‌شود. این تگ دارای ویژگی‌های مهمی است که به شرح زیر است:

  1. – src: این ویژگی برای تعیین نام فایلی استفاده می‌شود که در فریم بارگذاری شود. مقدار آن می‌تواند هر URL باشد. برای مثال، src = “/html/top_frame.htm” یک فایل HTML را که در دایرکتوری html موجود است بارگذاری می‌کند.

  2. – name: این ویژگی به شما اجازه می‌دهد یک نام به یک فریم بدهید. از آن برای نشان دادن کدام فریم باید یک سند در آن بارگذاری شود استفاده می‌شود. این به خصوص مهم است زمانی که می‌خواهید پیوندها را در یک فریم ایجاد کنید که صفحات را در یک فریم دیگر بارگذاری کند، در این صورت فریم دوم نیاز به یک نام دارد تا خود را به عنوان هدف پیوند شناسایی کند.

  3. – frameborder: این ویژگی مشخص می‌کند که حاشیه‌های فریم نمایش داده شوند یا خیر؛ این مقداری که در ویژگی frameborder تگ <frameset> داده شده است را نادیده می‌گیرد و می‌تواند مقادیر 1 (بله) یا 0 (خیر) را بپذیرد.

  4. – marginwidth: این ویژگی به شما اجازه می‌دهد عرض فضای بین لبه‌های چپ و راست حاشیه فریم و محتوای فریم را مشخص کنید. مقدار به پیکسل است. برای مثال marginwidth = “10”.

  5. – marginheight: این ویژگی به شما اجازه می‌دهد ارتفاع فضای بین بالا و پایین حاشیه‌های فریم و محتواهای آن را مشخص کنید. مقدار به پیکسل است. برای مثال marginheight = “10”.

  6. – noresize: به طور پیش‌فرض، می‌توانید هر فریم را با کلیک و کشیدن روی لبه‌های یک فریم باز و بسته کنید. ویژگی noresize از کاربر ممانعت می‌کند تا قادر به تغییر اندازه فریم نباشد. برای مثال noresize = “noresize”.

  7. – scrolling: این ویژگی کنترل ظاهر نوارهای پیمایشی است که در فریم ظاهر می‌شود. این می‌تواند مقادیر “yes”، “no” یا “auto” را بپذیرد. برای مثال scrolling = “no” به معنای عدم نمایش نوارهای پیمایشی است.

  8. – longdesc: این ویژگی به شما اجازه می‌دهد یک پیوند به صفحه دیگری را برای ارائه توضیحات بلند در مورد محتوای فریم فراهم کنید. برای مثال longdesc = “framedescription.htm”

پشتیبانی از فریم‌ها توسط مرورگرها (Browser Support for Frames)

اگر کاربر از یک مرورگر قدیمی یا هر مرورگری که از فریم‌ها پشتیبانی نمی‌کند استفاده کند، باید عنصر <noframes> به کاربر نمایش داده شود.

بنابراین شما باید یک عنصر <body> را درون عنصر <noframes> قرار دهید زیرا عنصر <frameset> قرار است عنصر <body> را جایگزین کند، اما اگر یک مرورگر عنصر <frameset> را درک نمی‌کند، باید درک کند که چه چیزی درون عنصر <body> که در یک عنصر <noframes> قرار دارد است.

می‌توانید یک پیام مناسب برای کاربرانی که از مرورگرهای قدیمی استفاده می‌کنند قرار دهید. به عنوان مثال، متن “متاسفم! مرورگر شما از فریم‌ها پشتیبانی نمی‌کند.” را به کاربر نمایش دهید.

نام و ویژگی‌های هدف فریم (Frame's name and target attributes)

یکی از محبوب‌ترین استفاده‌ها از فریم‌ها، قرار دادن نوارهای ناوبری در یک فریم و بارگذاری صفحات اصلی در یک فریم جداگانه است.

در مثال زیر یک فایل 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>

در اینجا، دو ستون برای پر کردن با دو فریم ایجاد کرده‌ایم. فریم اول 200 پیکسل عریض است و شامل نوار منویی ناوبری است که توسط فایل menu.htm پیاده‌سازی شده است. ستون دوم فضای باقی‌مانده را پر می‌کند و بخش اصلی صفحه را حاوی می‌شود و توسط فایل main.htm پیاده‌سازی شده است. برای همهٔ سه لینک موجود در نوار منو، فریم هدف را به عنوان صفحهٔ اصلی تعیین کرده‌ایم، بنابراین هرگاه روی هرکدام از لینک‌ها در نوار منو کلیک کنید، لینک موجود در صفحهٔ اصلی باز می‌شود.

محتوای فایل menu.htm به شرح زیر است:

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://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>

اکنون می‌توانید سعی کنید روی لینک‌های موجود در پنل چپ کلیک کرده و نتیجه را ببینید. ویژگی هدف همچنین می‌تواند یکی از مقادیر زیر را داشته باشد:

  1. _self صفحه را در فریم فعلی بارگذاری می‌کند.

  2. _blank یک صفحه را در یک پنجره مرورگر جدید بارگذاری می‌کند. باز کردن پنجره جدید.

  3. _parent صفحه را در پنجره والدین بارگذاری می‌کند، که در صورت وجود یک مجموعه‌ی تک فریم، پنجره اصلی مرورگر است.

  4. _top صفحه را در پنجره مرورگر بارگذاری می‌کند، هر فریم فعلی را جایگزین می‌کند.

  5. targetframe صفحه را در یک فریم مشخص نامگذاری شده بارگذاری می‌کند.

پست های مرتبط

مطالعه این پست ها رو از دست ندین!
JavaScript - تاریخ‌ها (Dates)

JavaScript – تاریخ‌ها (Dates)

آبجکت‌های تاریخ (Date) در جاوااسکریپت آبجکت‌های تاریخ در جاوااسکریپت به ما امکان کار با تاریخ و زمان را می‌دهند....

بیشتر بخوانید
JavaScript - آرایه‌های ثابت (Array Const)

JavaScript – آرایه‌های ثابت (Array Const)

جاوااسکریپت: تعریف آرایه با const در سال 2015، جاوااسکریپت کلمه کلیدی مهمی به نام const را معرفی کرد. این...

بیشتر بخوانید
JavaScript - تکرار آرایه‌ها (Array Iteration)

JavaScript – تکرار آرایه‌ها (Array Iteration)

جاوا اسکریپت: تکرار بر روی آرایه‌ها جاوا اسکریپت روش‌های مختلفی برای تکرار (Iteration) بر روی آرایه‌ها ارائه می‌دهد که...

بیشتر بخوانید

نظرات

سوالات و نظراتتون رو با ما به اشتراک بذارید

برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید.