Frame
โดยปกติเราจะแสดงเอกสาร HTML แบบทีละหน้า แต่การใช้ Frame จะทำให้เราสามารถแสดงเอกสาร HTML ได้หลายหน้า(หลายไฟล์)พร้อมกัน ในหน้าต่างเบราเซอร์์เดียวกันเอกสาร HTML แต่ละหน้าก็คือ Frame ซึ่งแต่ละ Frame จะเป็นอิสระจาก Frame อื่นๆ
เราสามารถนำ Frame มาแบ่งเป็นส่วนเมนู กับส่วนเนื้อหา โดยที่ส่วนเมนูจะไม่มีการเปลี่ยนแปลง แต่เมื่อผู้ใช้งานคลิกที่เมนูเรื่องใดๆ แล้ว ให้ส่วนเนื่อหาเปลี่ยนไปตามเมนูที่ถูกเลือก
แต่การใช้ Frame ก็ีมีข้อเสีย คือ ยุ่งยากเวลาจะสั่งพิมพ์หน้าเว็บเพจทั้งหมด
การสร้างชุดของ Frame จะใช้ tag <frameset> และกำหนด Frame แต่ละหน้าด้วย tag <frame> มี attribute สำหรับปรับแต่ง Frame ได้แก่
- noresize กำหนดไม่ให้ผู้ใช้ปรับขนาด Frame ได้
- frameborder="yes | no" ปกติจะมีกรอบของ frame คั่นระหว่าง frame อยู่ แต่ถ้าไม่ต้องการให้เห็น กำหนดค่าเป็น "no"
- marginheight="number" กำหนดระยะห่าง frame จากขอบหน้าต่างแนวตั้ง
- marginwidth="number" กำหนดระยะห่าง frame จากขอบหน้าต่างแนวนอน
- scrolling="yes | no | auto" ถ้าหน้าเว็บเพจยาวจะมีตัวเลื่อนโดยอัตโนมัติ ค่าปกติ"auto" ถ้าไม่ต้อง การให้มีตัวเลื่อน ให้กำหนดเป็น "no"
Vertical frameset
แบ่งหน้าจอออกเป็นหลายๆ Frame ในแนวตั้ง
<frameset cols="ขนาดframe1,ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
Horizontal frameset<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
แบ่งหน้าจอออกเป็นหลายๆ Frame ในแนวนอน
<frameset rows="ขนาดframe1,ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
เราสามารถกำหนดขนาด frame เป็น pixel หรือ % ก็ได้ และบาง Frame ที่จะกำหนดขนาดให้เป็นที่ว่างที่เหลือ ให้ใส่เป็น * <frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
เบราเซอร์์รุ่นเก่า จะี่ไม่สนับสนุกการทำงานของ Frame ทำให้การแสดงผลผิดพลาด เราอาจใส่ tag <noframe> ไว้ต่อจาก tag <frameset> เพื่อแสดงข้อความแจ้งผู้ใช้งานให้ทราบ
Example Vertical frameset
frame_vertical.html
ตัวอย่างการใช้งานที่ให้ Frame ด้านขวาเป็นเมนู และด้านซ้ายเป็นเนื้อหา ที่เปลี่ยนไปตามหัวข้อของเมนูที่ผู้ใช้เลือก
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset cols="20%,80%">
<frame name="menu" src="menu.html">
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes>เบราเซอร์์ของคุณไม่ support frame</noframes>
</html>
menu.html <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset cols="20%,80%">
<frame name="menu" src="menu.html">
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes>เบราเซอร์์ของคุณไม่ support frame</noframes>
</html>
เราต้องกำหนดที่ลิงค์เป็น target="chapter" ด้วย เพื่อที่เมื่อผู้ใช้คลิกที่เมนู chapter ต่างๆ แล้ว ให้แสดงบทเรียนใน Frame ด้านขวา (ชื่อ frame chapter) ถ้าเราไม่กำหนด target บทเรียนจะแสดงอยู่ที่ frame ด้านซ้าย ทับเมนูบทเรียนไป
<html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a><br>
<a href="../html_chapter02.html" target="chapter">chapter2</a><br>
<a href="../html_chapter03.html" target="chapter">chapter3</a><br>
<a href="../html_chapter04.html" target="chapter">chapter4</a><br>
<a href="../html_chapter05.html" target="chapter">chapter5</a><br>
</body>
</html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a><br>
<a href="../html_chapter02.html" target="chapter">chapter2</a><br>
<a href="../html_chapter03.html" target="chapter">chapter3</a><br>
<a href="../html_chapter04.html" target="chapter">chapter4</a><br>
<a href="../html_chapter05.html" target="chapter">chapter5</a><br>
</body>
</html>
OutpuT สามารถใช้ mouse ลากปรับขนาดของ frame ได้
เปลี่ยนมาดูการแบ่ง Frame แนวนอนกันบ้าง
Example Horizontal frameset
frame_horizontal
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" noresize>
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes></noframes>
</html>
menu_h.html <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" noresize>
<frame name="chapter" src="../html_chapter01.html">
</frameset>
<noframes></noframes>
</html>
<html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a> |
<a href="../html_chapter02.html" target="chapter">chapter2</a> |
<a href="../html_chapter03.html" target="chapter">chapter3</a> |
<a href="../html_chapter04.html" target="chapter">chapter4</a> |
<a href="../html_chapter05.html" target="chapter">chapter5</a>
</body>
</html>
<body>
บทเรียน HTML<br>
<a href="../html_chapter01.html" target="chapter">chapter1</a> |
<a href="../html_chapter02.html" target="chapter">chapter2</a> |
<a href="../html_chapter03.html" target="chapter">chapter3</a> |
<a href="../html_chapter04.html" target="chapter">chapter4</a> |
<a href="../html_chapter05.html" target="chapter">chapter5</a>
</body>
</html>
OutpuT ตัวอย่างนี้ไม่สามารถใช้ mouse ลากปรับขนาดของ Frame ได้ เพราะใส่ attribute noresize
Example Horizontal frameset
frame_horizontal2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" frameborder="no" noresize>
<frame name="chapter" src="../html_chapter01.html" frameborder="no" noresize>
</frameset>
<noframes></noframes>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,*">
<frame name="menu" src="menu_h.html" frameborder="no" noresize>
<frame name="chapter" src="../html_chapter01.html" frameborder="no" noresize>
</frameset>
<noframes></noframes>
</html>
Output ตัวอย่างนี้จะไม่แสดงขอบของ Frame
ExampleMixed frameset
frame_mix.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>บทเรียน HTML</title>
</head>
<frameset rows="20%,80%">
<frame name="header" src="header.html" noresize>
<frameset cols="25%,75%">
<frame name="menu" src="menu.html" marginheight="50" marginwidth="20"
noresize>
<frame name="chapter" src="../html_chapter01.html">
</frameset>
</frameset>
<noframes></noframes>
</html>
Output
นอกจากการใช้ Frame ที่ได้กล่าวไปข้างต้นแล้ว ยังมีการใช้ frame อีกรูปแบบหนึ่ง ที่สามารถแสดงหน้าเว็บเพจอื่นๆ ลงในหน้าเว็บเพจของเราได้ โดยการใช้ IFrame
IFrame มักใช้ในส่วนที่เป็นโฆษณา เราอาจจะนำโฆษณามาจากเว็บไซต์อื่น ซึ่งทางผู้โฆษณาจะให้ code มาติดไว้ที่เว็บไซต์ของเรา โดยมีลักษณะเป็น IFrame เมื่อผู้โฆษณาแก้ไข code ก็จะไม่กระทบอะไรกับหน้าเว็บเพจของเรา
Exampleการใช้งาน iframe โฆษณา
<html>
<body>
<iframe src="http://e-partner.elife.co.th/partner.php?id=enjoyday.net" width="125" height="125" marginwidth="0" marginheight="0" vspace="0" hspace="0" frameborder="0" scrolling="no"></iframe>
</body>
</html>
Output
Update Story at Wednesday, May 29, 2013 In Category
HTML
Story
HTML
Frame โดยปกติเราจะแสดงเอกสาร HTML แบบทีละหน้า แต่การใช้ Frame จะทำให้เราสามารถแสดงเอกสาร HTML
<body>
<iframe src="http://e-partner.elife.co.th/partner.php?id=enjoyday.net" width="125" height="125" marginwidth="0" marginheight="0" vspace="0" hspace="0" frameborder="0" scrolling="no"></iframe>
</body>
</html>
