คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 16

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 ในแนวนอน
<frameset rows="ขนาดframe1,ขนาดframe2,..">
<frame name="ชื่อframe" src="url">
<frame name="ชื่อframe" src="url">
...
</frameset>
เราสามารถกำหนดขนาด frame เป็น pixel หรือ % ก็ได้ และบาง Frame ที่จะกำหนดขนาดให้เป็นที่ว่างที่เหลือ ให้ใส่เป็น *

เบราเซอร์์รุ่นเก่า จะี่ไม่สนับสนุกการทำงานของ 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
เราต้องกำหนดที่ลิงค์เป็น 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>
คลิกที่นี่ เพื่อดูผลลัพธ์

OutpuT สามารถใช้ mouse ลากปรับขนาดของ frame ได้
เมื่อสร้าง Frame แล้ว จะสามารถ resize ขนาด Frame ได้ แต่ถ้าไม่ต้องการใ้ห้ resize ได้ ให้ใส่ attribute noresize ที่ tag <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
<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
เมื่อสร้าง Frame แล้ว จะมีขอบ Frame อยู่ ถ้าไม่ต้องการให้มี ให้ใส่ attribute frameborder="no" ที่ tag <frame>

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>
คลิกที่นี่ เพื่อดูผลลัพธ์

Output ตัวอย่างนี้จะไม่แสดงขอบของ Frame
เราสามารถทำ Frame ซ้อน Frame และปรับระยะห่างจากขอบหน้าต่าง (margin) ในแนวตั้งด้วย attribute marginheight และแนวนอน ด้วย marginwidth ลองดูตัวอย่างกันค่ะ

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
Inline Frame (IFrame)
นอกจากการใช้ 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
« Chapter 15
Chapter 17 »