برای اینکه بتوانید از فریمها در صفحه خود استفاده کنید، ابتدا باید بدانید این فریمها چگونه کار می کنند. یک صفحه که در آن از یک فریم استفاده شده است در حقیقت به دو یا چند قسمت تقسیم شده است که هر قسمت متن html مربوط به خود را دارد. لینک زیر را کلیک کنید تا بتوانید یک صفحه ساده که در آن از فریم استفاده شده است را ببینید.
ایجاد صفحات با استفاده از فریمها
همانطور که در این مثال می توانید ملاحظه کنید در واقع با استفاده از فریمها، دو صفحه وب را در قالب یک صفحه نمایش می دهیم. هر کدام از صفحات در این مجموعه ( یعنی صفحاتی که در فریمها قرار گرفته اند و صفحه ای که فریمها در آن قرار دارند، کد html مربوط به خود را دارند.
برای ایجاد فریم در یک صفحه به جای تگ body از تگ frameset استفاده می کنیم. می توانیم برای ساخت صفحه ای که فریمها در آن قرار می گیرند از کد زیر استفاده کنیم:
در اینجا به وظیفه تگهای مورد استفاده در اینجا می پردازیم:
حالا فرض کنید ما به سه فریم نیاز داشته باشیم. می توانیم به صورت زیر عمل کنیم:
با این کد می توانیم سه فریم در یک صفحه داشته باشیم که هر کدام از آنها 33 درصد پهنای صفحه را در بر می گیرند. یک درصد باقیمانده را هم مرورگر تخصیص می دهد.
لینک زیر را کلیک کنید تا بتوانید نتیجه را ملاحظه کنید:
فرض کنید می خواهیم فریمها را به صورت عمودی و زیر یکدیگر در صفحه قرار دهیم. در این صورت باید به جای شناسه cols در تگ frameset از شناسه rows استفاده کنیم.
به کد زیر توجه کنید:
<html>
<head>
<title>نمایش فریمها به صورت افقی و عمودی</title>
</head>
<frameset cols="50%,50%">
<frame src="page1.htm">
<frameset rows="50%,50%">
<frame src="page2.htm">
<frame src="page3.htm">
</frameset>
</frameset>
</html>
لینک زیر را برای مشاهده نتیجه کلیک کنید:
ما با اوین تگ frameset به مرورگر می گوییم که صفحه را به دو قسمت ( دو ستون ) تقسیم کند.
<"FRAME SRC="page1.htm> به مرورگر می گوید که ستون اول از سمت چپ باید با صفحه page1.htm پر شود.
تگ frameset دوم درون تگ frameset اول قرار دارد. این تگ به مرورگر می گوید که ستون دوم را به دو ردیف افقی تقسیم کند. ( فریم دوم از سمت چپ خود به دو فریم تبدیل می شود )
تگ <"FRAME SRC="page2.htm> به مرورگر می گوید که بالاترین فریم قرار گرفته در ستون دوم صفحه را با صفحه page2.htm پر کند.
تگ <"FRAME SRC="page3.htm> به مرورگر می گوید که دومین فریم از بالا را در ستون دوم صفحه با صفحه page3.htm پر کند.
در پایان فراموش نکنید که همه تگهای frameset باز شده را در پایان ببندید.