::: หน่วยการเรียนรู้ที่ 8 : การสร้างเฟรม :::

การสร้างเฟรม

ความรู้เกี่ยวกับเฟรม | การสร้างเฟรม | Attribute ที่สำคัญของ FRAME | การสร้าง IFRAME

ความรู้เกี่ยวกับเฟรม

การสร้างเฟรม คือ การแบ่งหน้าจอของเว็บเพจออกเป็นส่วน ๆ เฟรมถือว่าเป็นคำสั่งหนึ่งใน การเขียน HTML โดยเฟรมจะช่วยให้ สามารถ แสดง ผลไฟล์ HTML หลาย ๆ ไฟล์ได้พร้อม ๆ กัน ภายใต้ เว็บเพจ เดียวกัน ตามปกติแล้ว หนึ่งเว็บเพจ เราจะมีไฟล์ HTML อยู่ไฟล์เดียว แต่ถ้าเราต้องการ แบ่งหน้าจอของเว็บเพจ ให้เป็น 3 - 4 ส่วน โดยแต่ละส่วน มีความเป็นอิสระ ของตัวเอง ใช้ HTML ของตัวเอง คำสั่ง เฟรม จะช่วยในการจัดการดังกล่าว

ในปัจจุบัน เฟรมเป็นคำสั่ง ที่ได้รับความนิยม อย่างมาก ในการนำมาใช้ ตกแต่ง เอกสาร HTML โฮมเพจ ส่วนใหญ่ จะนำเฟรม มาเพิ่มใส่ใน HTML เพื่อปรับแต่ง ให้พอดูดีขึ้น อย่าง เช่น การนำเฟรมมาใช้ ในการล็อคให้ โฮมเพจ ของเรา มีส่วนหัว และส่วนท้าย เหมือน ๆ กันทุก หน้าจอ คล้าย ๆ กับ การพิมพ์ จดหมาย ที่มีหัว กระดาษ ท้านกระดาษ หรือการ นำเฟรม มาทำ เป็นเมนู ซึ่งเราสามารถ บังคับให้เฟรม ที่บรรจุ เมนู อยู่โดย ไม่เปลี่ยนแปลง ส่วนอีก เฟรมหนึ่ง ก็แสดง เนื้อหากันไป

ลักษณะและข้อจำกัดของเฟรม

1. เฟรม ส่วนมาก มีลักษณะ เป็นรูป สี่เหลี่ยม อย่างเดียว เราไม่ สามารถ สร้างเฟรม เป็นรูป สามเหลี่ยมได้ วงกลม ห้าเหลี่ยม หกเหลี่ยม ได้ตาม ใจชอบ ส่วนเฟรมที่ ซับซ้อน เกินไป เราก็อาจจะสร้างไม่ได้

2. กรณีที่ผู้ใช้จะบันทึกเว็บเพจที่ชื่นชอบและเข้าบ่อยครั้ง (Favorites) อาจจะอ้างอิงเว็บเพจไม่ตรงตามความต้องการได้

การแบ่งหน้าจอแสดงผล (FRAME)

รูปแบบคำสั่ง

<HTML>
<TITLE>....................</TITLE>
<FRAMESET ROWS[หรือ COLS]="number,number">
<FRAME src="ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL">
<FRAME src="ชื่อไฟล์ที่ต้องการแสดงผล หรือ URL">
<NOFRAME>ช้อความแจ้งเมื่อแสดงเฟรมไม่ได้</NOFRAME>
</FRAMESET>
</HTML>

โดยที่
ROWS = แบ่งแนวนอน
COLS = แบ่งแนวตั้ง
number = ตัวเลข เป็น pixels หรือ ตัวเลขเป็น %
หรือ * (หมายถึงจำนวนที่เหลือ)

แบ่งตามแนวนอน

รูปแบบคำสั่ง

การแสดงผล

<TITLE>การแบ่งจอภาพ ( FRAME )</TITLE>
<FRAMESET ROWS="20%,*">
<FRAME src="logo.html" >
<FRAME src="main.html">
</FRAMESET>
</HTML>

ข้อมูลในไฟล์ logo.html

ข้อมูลในไฟล์ main.html

แบ่งตามแนวตั้ง เป็นเปอร์เซ็นต์

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<TITLE>การแบ่งจอภาพ ( FRAME )</TITLE>
<FRAMESET COLS="20%,*">
<FRAME src="menu.html" >
<FRAME src="main.html">
</FRAMESET>
</HTML>

ข้อมูลในไฟล์ menu.html

ข้อมูลในไฟล์ main.html

แบ่งออกเป็นส่วนๆ โดยแบ่งออกเป็นพิกเซล

รูปแบบคำสั่ง

การแสดงผล

<HTML>
<TITLE>การแบ่งจอภาพ ( FRAME )</TITLE>
<FRAMESET COLS="100,600">
<FRAME src="menu.html" >
<FRAMESET ROWS="20%,*">
<FRAME src="logo.html" >
<FRAME src="main.html">
</FRAMESET>
</FRAMESET>
</HTML>

ข้อมูลในไฟล์ menu.html

ข้อมูลในไฟล์ logo.html

ข้อมูลในไฟล์ main.html

Attribute ที่สำคัญของ FRAME

framespacing ใช้กำหนด พื้นที่ว่างๆรอบเฟรม
frameborder ใช้กำหนด ขอบความหนาของเฟรม
marginwidth ใช้กำหนด ขอบซ้าย และขวาของเฟรม
marginheight ใช้กำหนด ขอบบน และล่าง ของเฟรม
name กำหนดชื่อ ให้กับเฟรมเพื่อใช้เป็นเป้าหมายให้กับ คำสั่ง Link
noresize กำหนด ให้ผู้ใช้ไม่สามารถ เปลี่ยนขนาดเฟรมเองได้

scrolling กำหนดลักษณะ ของ scroll Bar มี 3 ค่าคือ
AUTO ( เมื่อมีการแสดงผล เกินหน้าจอให้แสดง scroll Bar อัตโนมัติ)
NO ( กำหนดไม่ให้มีการแสดง scroll Bar )
YES ( หนดให้มีการแสดง scroll Bar )

ตัวอย่างการใช้คำสั่ง

IFRAME

IFRAME คือ คำสั่งที่ใช้แทรกไฟล์ HTML หรือไฟล์รูปภาพ ไฟล์หนึ่ง ลงอีกในไฟล์หนึ่ง โดยจะแทรกในลักษณะพื้นที่สี่เหลี่ยม โดยที่ คำสั่ง IFRAME ยังไม่ได้ถูกสนับสนุนใน Browser บางรุ่น ถ้า Browser นั้นไม่สนับสนุนคำสั่ง IFRAME ก็จะไม่แสดงคำสั่งนี้ออกมา

รูปแบบคำสั่ง : <IFRAME SRC=file_name ALIGN=option1 FRAMEBORDER=option2 HEIGHT=value1 WIDTH=value2 MARGINHIGHT=value3 MARGINWIDTH=value4 NAME=name SCROLLING=option3></IFRAME>

SRC	คำสั่งสำหรับให้ระบุชื่อไฟล์ที่ต้องการแสดงผลในเฟรม file_name คือ =ชื่อไฟล์ที่ต้องการให้แสดงผลในเฟรม
ALIGN	กำหนดตำแหน่งของเฟรมในหน้าจอ option1 ประกอบด้วย ซ้าย(LEFT) ,ขวา(RIGHT) , กึ่งกลาง(CENTER)
FRAMEBORDER	กำหนดให้แสดงเส้นขอบหรือไม่ option2 ประกอบด้วย 0 คือ ไม่แสดง , 1 คือ แสดง
HIGHT	กำหนดความสูงของเฟรม value1 แทนค่าความสูง หน่วยเป็น พิกเซล
WIDTH	กำหนดความกว้างของเฟรม value2 แทนค่าความกว้าง หน่วยเป็น พิกเซล
MARGINHIGHT	กำหนดความกว้างของด้านบนและด้านล่างของเฟรม ระหว่างขอบเฟรมกับข้อมูล value3 แทนค่าความกว้าง หน่วยเป็น พิกเซล
MARGINWIDTH	กำหนดความกว้างของด้านซ้ายและด้านขวาของเฟรม ระหว่างขอบเฟรมกับข้อมูล value4 แทนค่าความสูง หน่วยเป็น พิกเซล
NAME	กำหนดชื่อของเฟรม file_name แทน ชื่อของเฟรม
SCROLLING	กำหนดให้แสดง/ซ่อนแถบเลื่อนข้อความ option3 ประกอบด้วย YES คือ แสดง , NO คือ ไม่แสดง , AUTO คือ แสดงเมื่อเกิน 1 หน้า

ตัวอย่าง
ตัวอย่างคำสั่ง IFRAME	แสดงผล
<IFRAME src="sample/fall_snow.html" align="center" frameborder="0" height="200" width="250" marginheight="5" marginwidth="5" scrolling="auto"> </IFRAME>