مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

آموزش Frame و Frameset ها در HTML و بررسی ویژگی فریم ها

در HTML، برای تقسیم پنجره ی مرورگر به بخش های مختلف از چهارچوب ها(frame) استفاده می شود که هر بخش می تواند یک document یا سند HTML جداگانه را بارگذاری (load) کند. مجموعه ای از فریم ها در پنجره مرورگر به عنوان framset شناخته می شوند.

Frame ها مشابه جداول به سطرها (row) و ستون هایی (column) تقسیم می شوند.

معایب frame ها

در استفاده از frame ها چندین نقطه ضعف وجود دارد، بنابراین هرگز توصیه نمی شود که از frame ها در صفحات وب خود استفاده کنید -

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

نحوه ایجاد frame ها (Creating Frames)

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

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

مثال :

در مثال زیر نحوه ایجاد سه Frame افقی را مشاهده می کنید.

<!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 attribute) را با ویژگی ستون (cols attribute) جایگزین کردیم و عرض (width) آنها را نیز تغییر دادیم. این مثال سه frame را به صورت عمودی ایجاد می کند -

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

ویژگی های تگ <frameset>

در زیر، ویژگی های مهم تگ <frameset> را بررسی می نماییم :

نام ویژگی	توضیحات
cols	تعداد ستون ها در frameset و اندازه هر ستون را مشخص می کند. شما می توانید عرض (width) هر ستون را با یکی از چهار روش زیر مشخص کنید – مقادیر مطلق به پیکسل. برای مثال، برای ایجاد سه فریم عمودی، از cols = "100, 500, 100" استفاده کنید. درصدی از پنجره مرورگر. برای مثال، برای ایجاد سه فریم عمودی، از cols = "10%, 80%, 10%" استفاده کنید. با استفاده از یک wildcard symbol . برای مثال، برای ایجاد سه فریم عمودی، از cols = "10%, , 10%" استفاده کنید. در این مورد، wildcard باقی مانده پنجره را فرا می گیرد. به عنوان عرض نسبی (relative widths) پنجره مرورگر. برای مثال، برای ایجاد سه فریم عمودی، از cols = "3, 2, 1" استفاده کنید. این یک جایگزین برای درصد است. شما می توانید از عرض نسبی پنجره مرورگر استفاده کنید. در اینجا پنجره به شش قسمت، تقسیم می شود: ستون اول نیمه پنجره را می گیرد، ستون دوم، یک سوم از پنجره را می گیرد و ستون سوم، یک ششم از پنجره را می گیرد.
rows	این ویژگی درست مانند ویژگی cols کار می کند و مقادیر مشابهی را می گیرد، اما برای تعیین ردیف ها (row) در frameset استفاده می شود. برای مثال، برای ایجاد دو فریم افقی، از rows = "10%, 90%" استفاده کنید. شما می توانید ارتفاع (height) هر سطر (row) را همانطور که در بالا برای ستون (column) توضیح داده شد، مشخص کنید.
border	این ویژگی عرض حاشیه (border) هر frame را به صورت پیکسل مشخص می کند. به عنوان مثال، border = "5". مقدار صفر یعنی هیچ حاشیه ای وجود ندارد.
frameborder	این ویژگی مشخص می کند که آیا باید یک border سه بعدی بین frameها نمایش داده شود یا خیر. این ویژگی مقدار 1 به معنای بله و یا 0 به معنای خیر، را به خود می گیرد. به عنوان مثال frameborder = "0" به معنا این است که هیچ border ی وجود ندارد.
framespacing	این ویژگی مقدار فضای بین frame ها را در یک frameset مشخص می کند. این ویژگی، می تواند هر مقدار عدد صحیح (integer) را به خود بگیرد. به عنوان مثال framespacing = "10" به این معنی است که فاصله بین هر frame باید 10 پیکسل باشد.

ویژگی های تگ <frame>

در زیر ویژگی های مهم تگ <frame> را بررسی می نماییم :

نام ویژگی	توضیحات
src	این ویژگی برای دادن نام به فایلی که قرار است در frame بارگذاری شود، استفاده می شود. مقدار آن می تواند هر URLی باشد. به عنوان مثال، src = "/html/top_frame.htm"یک فایل HTML موجود در دایرکتوری html را بارگذاری می کند.
name	این ویژگی به شما اجازه می دهد تا یک نام به یک frame اختصاص دهید. این ویژگی نشان می دهد، یک سند (document) باید در داخل چه frame ی بارگذاری (load) شود. این خصوصیت مهم، به ویژه وقتی مورد استفاده قرار می گیرد که شما می خواهید لینک ها را در یک frame ایجاد کنید و صفحات را در یک فریم دیگر بارگذاری (load) کنید؛ در این صورت، frame دوم نیاز به یک نام برای شناسایی خود، به عنوان هدفِ لینک دارد.
frameborder	این ویژگی مشخص می کند که آیا border های یک frame نمایش داده شوند یا خیر؛ این ویژگی، مقدار داده شده در ویژگی frameborder در تگ <frameset> را بازنویسی یا override می کند، و این ویژگی می تواند مقادیر 1 به معنای بله و 0 به معنای نه را به خود اختصاص دهد.
marginwidth	این ویژگی به شما این امکان را می دهد تا عرضِ (width) فضایِ بینِ border های سمت چپ و راست یک Frame و محتویات frame را مشخص کنید. این مقدار برحسب واحد پیکسل داده می شود. برای مثال marginwidth = "10".
marginheight	این ویژگی به شما این امکان را می دهد تا ارتفاعِ (height) فضایِ بینِ borderهای سمت بالا و پایین یک Frame و محتویات آن را مشخص کنید. این مقدار برحسب واحد پیکسل داده می شود. برای مثال marginheight = "10".
noresize	به طور پیش فرض، شما می توانید هر frame ی را با کلیک کردن و کشیدن (drag) روی حاشیه های (border) یک frame، تغییر اندازه دهید(resize). ویژگی noresize از این قابلیت کاربر، که بتواند یک frame را تغییر اندازه دهد، جلوگیری می کند. به عنوان مثال noresize = "noresize".
scrolling	این ویژگی ظاهرِ نوارهای پیمایش (scrollbar) را که در یک frame ظاهر می شوند را کنترل می کند. این ویژگی مقادیر "yes"، "no" یا "auto" را می گیرد. به عنوان مثال، scrolling = "no" به این معنی است که frame نباید نوار پیمایشی داشته باشد.
longdesc	این ویژگی به شما امکان می دهد یک لینک به صفحه دیگر که حاوی توضیحات طولانی درباره ی محتویات frame است، ایجاد کنید. به عنوان مثال longdesc = "framedescription.htm".

پشتیبانی مرورگرها از frame ها

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

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

شما می توانید یکسری پیام مناسب برای کاربرانی که از مرورگرهای قدیمی استفاده می کنند، ارائه دهید. برای مثال، «متاسفم مرورگر شما از frame ها پشتیبانی نمی کند!». همانطور که در مثال بالا نشان داده شده است.

نام frame و ویژگی های target

یکی از محبوب ترین موارد استفاده از فریم ها این است که navigation bar را در یک frame قرار دهید و سپس صفحات اصلی را در یک frame جداگانه بارگذاری (load) کنید.

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

در اینجا، ما دو ستون ایجاد کردیم، تا با دو frame آنرا پر کنیم. اولین frame عرضی برابر با 200 پیکسل دارد و حاوی نوار منوهای ناوبری (navigation menu bar) است که توسط فایل menu.htm اجرا می شود. ستون دوم، فضای باقی مانده را پر می کند و شامل قسمت اصلی صفحه می باشد و توسط فایل main.htm اجرا می شود. برای هر سه لینک موجود در نوار منو، یک frame هدف، به عنوان main_page ذکر کرده ایم، بنابراین هر بار که روی هر یک از لینک ها در نوار منو کلیک کنید، لینک موجود، در صفحه اصلی باز خواهد شد.

در زیر محتوای فایل 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>

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

نام ویژگی	توضیحات
_self	صفحه را در frame جاری بارگذاری (load) می کند.
_blank	یک صفحه را داخل یک پنجره جدید از مرورگر ، بارگذاری می کند.
_parent	صفحه را روی پنجره ی اصلی بارگذاری می کندکه در مورد یک frameset مجزا، پنجره اصلی مرورگر می باشد.
_top	صفحه را در پنجره مرورگر بارگذاری می کند و frame فعلی را جایگزین می کند.
targetframe	صفحه را داخل یک targetframe نامگذاری شده بارگذاری می کند.

پکیج های آموزشی جدید

ساخت فروشگاه دیجی‌کالا با ASP.Net Core

فصلِ: 8 , تعداد قسمت ها: 357 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET آموزش ASP.NET MVC آموزش ساخت فروشگاه اینترنتی

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه قصد داریم تا فروشگاه اینترنتی دیجی کالا رو با Asp.Net Core3 پیاده سازی کنیم. ابتدا طراحی قالب دیجی کالا رو به صورت کامل انجام خواهیم داد. در مرحله میریم …

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر