آموزش قابها در html

آموزش طراحی سایت - آموزش قابها در html

قاب های HTML

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

نقطه ضعف های چارچوب ها:

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

ایجاد چارچوب ها:

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

مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

نمونه یک

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Frames</title>
</head>
<frameset rows="25%,50%,25%">
    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
    <noframes>
        <body>
            Your browser does not support frames.
        </body>
    </noframes>
</frameset>
</html>

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

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

مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

آموزش html css

نمونه دو

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
    <noframes>
        <body>
            Your browser does not support frames.
        </body>
    </noframes>
</frameset>
</html>

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

نمونه سه

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 />
</body>
</html>

در زیر محتوای فایل main.htm را مشاهده می کنید.

نمونه چهار

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<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 نیز یکی از مقادیر زیر را می گیرد:

جهت مشاهده برروی آموزش طراحی سایت کلیک نمایید

پیکسلر | شبکه اجتماعی برنامه نویسان