ดาวโหลดเอกสาร [DOC] [PDF]
การแบ่งส่วนหน้าต่างออกเป็นส่วนๆ ในเว็บเพจเรียกว่า เฟรม (Frame) ซึ่งสามารถจัดวาง เฟรมตามแนวแถวและแนวคอลัมน์ โดยแต่ละส่วนมีข้อมูล และทำงานเป็นอิสระไม่เกี่ยวข้องกัน เรียกเว็บเพจที่มีการใช้เฟรมว่า เฟรมเซท (Frameset) ในหนึ่งเฟรมเซทอาจมีจำนวนเฟรมกี่เฟรมก็ได้ตามความต้องการ แต่โดยปกติใช้ 2-3 เฟรม ดังนั้นFrame หรือ เฟรม ก็คือการแบ่งพื้นที่หน้าจอของ Web Browser ออกเป็นส่วน ๆ ในแต่ละส่วนคือเว็บเพจ 1 เว็บเพจหรือ 1 ไฟล์เว็บเพจ โดยมีข้อดีของเฟรม คือ ช่วยให้ลดการทำงานซ้ำซ้อนลงได้ เช่น ช่วยให้ไม่ต้องตามสร้างและแก้ไขเมนูที่มีการเรียกใช้งานทุก ๆ หน้าเว็บเพจ เป็นต้น
คำสั่ง Frame
คำสั่งพื้นฐานของ frame จะสังเกตเห็นได้ว่าในหน้านี้จะไม่มีคำสั่ง<body>
มีรูปแบบดังนี้
<frameset> ........... </frameset>
การทำ frame แนวตั้ง cols= คือคำสั่งสำหรับแบ่ง frame ตามแนวตั้ง URL คือ ไฟล์ HTML ที่คุณต้องการให้ขึ้นมาแสดง name= ชื่อที่ใช้อ้างถึง ในส่วนของ ขนาด frame นั้น จะกำหนด เป็น pixel หรือ % ก็ได้
<frameset cols="ขนาด frame1,ขนาด frame2">
<frame src="URL1" name="ชื่อของ frame">
<frame src="URL2" name="ชื่อของ frame">
</frameset>
การทำ frame แนวนอน rows= คือคำสั่งสำหรับแบ่ง frame ตามแนวนอน URL คือ ไฟล์ HTML ที่คุณต้องการให้ขึ้นมาแสดง name= ชื่อที่ใช้อ้างถึง ในส่วนของ ขนาด frame นั้น จะกำหนด เป็น pixel หรือ % ก็ได้
<frameset rows="ขนาด frame1,ขนาด frame2">
<frame src="URL1" name="ชื่อของ frame">
<frame src="URL2" name="ชื่อของ frame">
</frameset>
การกำหนดขนาดของขอบ frame กำหนดได้ด้วย การเติม คำสั่ง border ลงไป
<frameset rows="ขนาด frame1,ขนาด frame2" border=5>
<frame src="URL1" name="ชื่อของ frame">
<frame src="URL2" name="ชื่อของ frame">
</frameset>
การกำหนด scroll bar ให้ frame มี 3 แบบ คือ yes คือกำหนดให้มี Scrolling Bar , no กำหนดให้ ไม่มี Scrolling Bar และ auto แสดงก็ต่อเมื่อข้อมูลมีมากกว่าพื้นที่
<frameset rows="ขนาด frame1,ขนาด frame2" border=0>
<frame src="URL1" name="ชื่อของ frame" scrolling="yes | no | auto">
<frame src="URL2" name="ชื่อของ frame" scrolling="yes | no | auto">
</frameset>
การทำ link ให้ปรากฏต่าง frame
การ link ต่าง frame คือการทำ link จาก frame หนึ่ง ให้ไปปรากฏอีก frame หนึ่ง ทำได้ดังนี้
<a href="URL" target="ชื่อของ frame">ข้อความ</a>
ก็เหมือนการทำ link ธรรมดา เพียงเติม target= และชื่อ frame ลงไปเท่านี้ก็ทำได้
ตัวอย่างที่ 1 การแบ่งเฟรมเป็น 3 แถว
<html>
<head><title>
การแบ่งเฟรมเป็น 3 แถว
</title></head>
<frameset rows="30%,*,10%” >
<frame src="head.html" name="frame1" scrolling="yes | no | auto">
<frame src="body.html" name="frame2" scrolling="yes | no | auto">
<frame src="footer.html" name="frame3" scrolling="yes | no | auto">
</frameset>
</html>
แสดงผลตัวอย่างที่ 1
ตัวอย่างที่ 2 การแบ่งเฟรมเป็น 3 คอลัมน์
<html>
<head><title>
การแบ่งเฟรมเป็น 3 แถว
</title></head>
<frameset cols="30%,*,10%” >
<frame src="menu.html" name="frame1" scrolling="yes | no | auto">
<frame src="body.html" name="frame2" scrolling="yes | no | auto">
<frame src="show.html" name="frame3" scrolling="yes | no | auto">
</frameset>
</html>
แสดงผลตัวอย่างที่ 2
ตัวอย่างที่ 3 การแบ่งเฟรมแบบใช้ทั้งแถวและคอลัมน์
<html>
<head><title>
การแบ่งเฟรมแบบผสมระหว่างแถวและคอลัมน์
</title></head>
<frameset rows="25%,*,10%" >
<frame src="head.html" name="frame1" scrolling="yes | no | auto">
<frameset cols="25%,*" >
<frame src="menu.html" name="frame2" scrolling="yes | no | auto">
<frame src="body.html" name="frame3" scrolling="yes | no | auto">
</frameset>
<frame src="footer.html" name="frame3" scrolling="yes | no | auto">
</frameset>
</html>
แสดงผลตัวอย่างที่ 3
คำสั่ง IFRAME
iframe คือ HTML CODE ที่ใช้ในการดึงหน้าเว็บไม่ว่าจะเป็น path url จากเว็บไซต์หรือจากเว็บอื่น มาแสดงในเว็บ และสามารถกำหนดได้ทั้งขนาดของกรอบที่จะแสดงว่าความกว้างและความยาว ซึ่งบางที่ใช้ในการดึงกรอบข่าวสารจากเว็บอื่นๆมาแสดงที่เว็บของตัวเอง
รูปแบบคำสั่ง :
<IFRAME SRC=show .html width= “400” height= “300”>
</IFRAME>
คุณสมบัติ(Attribute) ที่สำคัญของ FRAME
1. framespacing ใช้กำหนด พื้นที่ว่างๆรอบเฟรม
2. frameborder ใช้กำหนด ขอบความหนาของเฟรม
3. marginwidth ใช้กำหนด ขอบซ้าย และขวาของเฟรม
4. marginheight ใช้กำหนด ขอบบน และล่าง ของเฟรม
5. name กำหนดชื่อ ให้กับเฟรมเพื่อใช้เป็นเป้าหมายให้กับ คำสั่ง Link
6. noresize กำหนด ให้ผู้ใช้ไม่สามารถ เปลี่ยนขนาดเฟรมเองได้
7. scrolling กำหนดลักษณะ ของ scroll Bar มี 3 ค่าคือ
8. AUTO ( เมื่อมีการแสดงผล เกินหน้าจอให้แสดง scroll Bar อัตโนมัติ)
9. NO ( กำหนดไม่ให้มีการแสดง scroll Bar )
10. YES ( กำหนดให้มีการแสดง scroll Bar )
