แบ่งหน้าจอโดยใช้ Frame
ปกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame
1.การแบ่ง frame แบบแนวตั้ง
ตัวอย่าง
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
frame ในแนวตั้งซึ่งจะเปิดเว็บเพจถึง 3 ไฟล์ในหน้าเดียวกันโดยเราจะแบ่งขนาดของ frame เป็น % หรือเป็น (px) pixel ก็ได้
รูปแบบของ frame แนวตั้ง
<html>
<frameset cols=ขนาดเฟรม1,ขนาดเฟรม2>
<frame src='เว็บเพจ1'>
<frame src='เว็บเพจ2'>
</frameset>
</html>
2.การแบ่ง frame แบบแนวนอน
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
การแบ่งแบบแนวนอน ก็สามารถทำได้เช่นเดียวกัน ซึ่งแบ่งเป็น % หรือ px (pixel) ก็ได้เช่นกัน ซึ่งเราจะใช้ rows (แถว) แทน cols (หลัก)
รูปแบบของ frame แนวนอน
<html>
<frameset rows=ขนาดเฟรม1,ขนาดเฟรม2>
<frame src='เว็บเพจ1'>
<frame src='เว็บเพจ2'>
</frameset>
</html>
3. <noframes>
ตัวอย่าง
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
<noframes>
<body> ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนนี้ขึ้นมา </body>
</noframes>
</html>
ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนตามที่เราเขียนขึ้นมา
<html>
<noframes>
<body> คำเตือน </body>
</noframes>
</html>
4.ลองเอา frame แนวตั้งและแนวนอนมารวมกัน
<html>
<!-- สร้าง frame แถวขึ้นมา -->
<frameset rows="50%,50%">
<frame src="frame_a.html">
<frameset cols="25%,75%">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</frameset>
<!-- tag ปิดของ frame แถว -->
</html>
ในตัวอย่างนี้จะนำเอา frame แนวตั้งและแนวนอนมารวมกัน ซึ่งเป็นการซ้อนกันของ frame นั่นเอง
5.ห้ามเปลี่ยนขนาดของ frame
ตัวอย่าง
<html>
<frameset rows="25%,50%,25%">
<!-- ในตัวอย่างนี้ห้ามเปลี่ยนขนาดของ frame A ซึ่ง frame Cยังขยับได้อยู่ ถ้าเราต้องการไม่ให้ขยับ frame C ด้วยก็ใส่ noresize ใน frame C -->
<frame noresize="noresize" src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
frame ในตัวอย่างที่ผ่านมานั้นจะสังเกตุได้ว่าสามารถเปลี่ยนขนาดได้ตามใจของเรา แต่ถ้าเราไม่ต้องการให้ผู้ใช้เปลี่ยนขนาดเราต้องใช้คำสั่ง noresize ซึ่งเป็น Attributes มาช่วย
6.การใช้ link ให้สัมพันธ์กันใน frame
ตัวอย่าง
<html>
<frameset cols="35%,65%">
<frame name="frame1" src="interest_link.html">
<frame name="frame2">
</frameset>
</html>
ข้อดีของ frame ที่จะเห็นได้ก็คือ ใช้ในการทำเมนู ดังในตัวอย่างนั่นเองซึ่งจะต้องใช้ ไฟล์ 2 ไฟล์ ดังนี้
1.ไฟล์ที่ใช้จัด frame ดังในตัวอย่างซึ่งจะเห็นว่าเราได้ใส่ชื่อ(name) ให้กับ frame ที่เราสร้างขึ้นมาด้วย
2. ไฟล์ที่ใช้ทำเป็น link ของเราซึ่งมีคำสั่ง target='frame' หมายความว่าให้แสดงผลใน frame ที่มีชื่อว่า frame2 นั่นเอง มี soure code ดังนี้
<html>
<body>
เว็บไซต์ที่น่าสนใจ
<a href="url" target="frame2">
ข้อความที่แสดง</a>
<a href="http://www.w3schools.com" target="frame2">
ข้อความที่แสดง</a>
</body>
</html>
7. การใช้ link ให้ปิด frame ทั้งหมด
ตัวอย่าง
<html>
<frameset cols="45%,55%">
<frame name="frame1" src="interest_link2.html">
<frame name="frame2">
</frameset>
</html>
ในตัวอย่างนี้จะเป็นการสร้าง link ให้ทำลาย frame ทั้งหมด ซึ่งเราจะใช้คำสั่ง target ซึ่งมีรายละเอียดดังนี้
1.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน
2.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่
3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน
8. Iframe
<html>
<body>
<p> ข้อความ </p>
<iframe src="ad.html"></iframe>
</body>
</html>
เป็น frame รูปแบบหนึ่ง นิยมใช้ในส่วนที่เป็นโฆษณา เนื่องจากทำให้เราสะดวกไม่ต้องมาแก้ที่หน้าหลักแต่แก้ที่หน้าที่เป็นโฆษณาได้เลย ซึ่งเราอาจเอาให้หน้าที่เป็นโฆษณาให้ลูกค้าแก้ไขโดยไม่ต้องยุ่งกับหน้าหลักของเรา
** เราจะใช้ Frameset ใน <body> </body> ไม่ได้ยกเว้นกรณีของ <noframes>