More Related Content
Similar to การสร้างเฟรมเซต
Similar to การสร้างเฟรมเซต (20)
More from ไกรลาศ จิบจันทร์
More from ไกรลาศ จิบจันทร์ (20)
การสร้างเฟรมเซต
- 1. ครูผู้สอน นายไกรลาศ จิบจันทร์
ใบความรู้
รายวิชา การสร้างเว็บไซต์ด้วยภาษา HTML
เรื่อง การสร้างเฟรมเซต (FRAMESET)
การแบ่งเฟรม ( frame )
การแบ่งจอภาพออกเป็นส่วน ๆ หรือ ที่เรียกว่า เฟรม ( frame ) ถือว่าเป็นคาสั่งหนึ่งใน การเขียน
HTML โดยเฟรม (Frame) จะช่วยให้ สามารถ แสดง ผลไฟล์ HTML หลาย ๆ ไฟล์ได้พร้อม ๆ กัน ภายใต้
เว็บเพจ เดียวกัน ตามปกติแล้ว หนึ่งเว็บเพจ เราจะมีไฟล์ HTML อยู่ไฟล์เดียว แต่ถ้าเราต้องการ แบ่งหน้าจอ
ของเว็บเพจ ให้เป็น 3 - 4 ส่วน โดยแต่ละส่วน มีความเป็นอิสระ ของตัวเอง ใช้ HTML ของตัวเอง คาสั่ง เฟรม
(Frame) จะช่วยในการจัดการงานดังกล่าว
ในปัจจุบัน เฟรม(Frame) เป็นคาสั่ง ที่ได้รับความนิยม อย่างมาก ในการนามาใช้ ตกแต่ง เอกสาร
HTML ส่วนใหญ่ จะนาเฟรม (Frame) มาเพิ่มใส่ใน HTML เพื่อปรับแต่ง ให้พอดูดีขึ้น อย่างเช่น การนาเฟรม
(Frame) มาใช้ ในการล็อคให้ โฮมเพจ ของเรา มีส่วนหัว และส่วนท้าย เหมือน ๆ กันทุก หน้าจอ คล้าย ๆ กับ
การพิมพ์ จดหมาย ที่มีหัวกระดาษท้ายกระดาษ หรือการนาเฟรม (Frame) มาทา เป็นเมนู ซึ่งเราสามารถ
บังคับให้เฟรม (Frame) ที่บรรจุ เมนู อยู่โดย ไม่เปลี่ยนแปลง ส่วนอีกเฟรม (Frame) หนึ่ง ก็แสดง เนื้อหากัน
ไป
ลักษณะและข้อจากัดของเฟรม (Frame)
เฟรม (Frame) ส่วนมาก มีลักษณะ เป็นรูป สี่เหลี่ยมอย่างเดียว เราไม่ สามารถ สร้างเฟรม (Frame)
เป็นรูปสามเหลี่ยม วงกลม ห้าเหลี่ยม หกเหลี่ยม ได้ตามใจชอบ ส่วนเฟรม (Frame) ที่ ซับซ้อน เกินไป เราก็
อาจจะสร้างไม่ได้
ระบบโครงสร้าง
คาสั่ง แรกที่ต้องใช้ ในการสร้าง เฟรม (Frame) ก็คือ Tag คาสั่ง <FRAMSET> คาสั่งนี้เป็นคาสั่ง
ที่ใช้ใน การกาหนด ขนาดและ รูปแบบของเฟรม (Frame) ที่ต้องการ คาสั่ง <FRAMSET> เป็นคาสั่ง ที่มา
แทน คาสั่ง <BODY> ในไฟล์ HTML โดยมีโครงสร้างดังนี้
<HTML>
<HEAD>
<TITLE>..การแบ่งเฟรม...</TITLE>
</HEAD>
<FRAMESET>
……..
……...
</FRAMESET>
</HTML>
คาสั่ง <FRAMESET> ใช้ในการกาหนดเฟรม (Frame) รูปแบบการใช้คาสั่ง <Frameset> เป็นคาสั่งที่
ระบุให้โปรแกรมบราวเซอร์แบ่งหน้าจอออกเป็นเฟรม มี 2 ประเภท คือ
1. แบ่งเฟรมตามแนวตั้ง <frameset cols="value1, value2>
2. แบ่งตามแนวนอน <frameset rows="value1, value2>
- 2. ครูผู้สอน นายไกรลาศ จิบจันทร์
การกาหนดค่าให้กับ value มีอยู่ 3 แบบ คือ
1. กาหนดค่าให้มีหน่วยเป็นพิกเซล (Pixel) เช่น
<frameset cols="200, 600">
2. กาหนดค่าให้มีหน่วยเป็นเปอร์เซ็นต์ (%) เช่น
<frameset cols="25%, 25%, 50%">
3. กาหนดค่าตามความสัมพันธ์ของแต่ละเฟรม จะแทนโดยเครื่องหมาย (* ) เช่น
<frameset cols="240, * ">
<frameset cols=" *, * , *">
คาสั่ง <FRAMESET> มี คาสั่งรอง หรือแอตทริบิวต์ (Attribute) คือ
<FRAME SRC=”ชื่อไฟล์ที่ต้องการแสดง"> เป็นการกาหนด ค่าต่าง ๆ ที่จะแสดงในพื้นที่จอภาพ ไม่
ว่าจะเป็น .htm , .html หรือ .gif , .jpg ก็ได้ทั้งหมด
<NOFRAME> คาสั่งนี้จะถูกแสดง เมื่อถูกเรียกใช้โดยเว็บบราวเซอร์ (Web browser) รุ่นเก่า
ที่แสดงผลแบบเฟรม (Frame) ไม่ได้
<FRAME NAME=” NAME"> ชื่อเฟรม (FRAME) ที่ตั้งขึ้น
<FRAME MARGINWIDTH=”Value"> ใช้กาหนดความกว้างของช่องว่างด้านซ้ายและขวา (Margin)
ระหว่างขอบของเฟรม (FRAME) กับข้อมูลในเฟรม (FRAME)
<FRAME MARGINHEIGHT=”Value”> ใช้กาหนดความกว้างของช่องว่างด้านบนและล่าง (Margin)
ระหว่างขอบของเฟรม (FRAME) กับข้อมูลในเฟรม (FRAME)
<FRAME SCROLLING=”YES , NO , AUTO”> ใช้กาหนดให้โปรแกรมบราวเซอร์แสดง/ซ่อนแถบ
เลื่อน (Scrolling bar) ที่ด้านข้างและด้านล่างของเฟรม (FRAME) เมื่อข้อมุลมีความยาวมากกว่า 1 หน้าจอ
ตัวเลือกเพื่อแสดง/ซ่อนแถบเลื่อน มี 3 ตัวเลือก
YES หมายถึง แสดงแถบเลื่อน
NO หมายถึง ซ่อนแถบเลื่อน
AUTO หมายถึง แสดงแถบเลื่อนก็ต่อเมื่อข้อมูลมีความยาวมากกว่า 1 หน้าจอ (ค่า
default)
<FRAMEBORDER=” 0 , 1 “> ใช้กาหนดให้โปรแกรมบราวเซอร์แสดง/ซ่อนเส้นแบ่งเฟรม ตัวเลือก
เพื่อแสดง/ซ่อนเส้นแบ่งเฟรม มี 2 ตัวเลือก คือ
0 หมายถึง ซ่อนเส้นแบ่งเฟรม
1 หมายถึง แสดงเส้นแบ่งเฟรม
border="1" กาหนดขนาดความหนาของเส้นแบ่งเฟรม (Frame)
bordercolor="#0033FF" กาหนดสีของเส้นแบ่งเฟรม (Frame)
<NORESIZE>ใช้กาหนดให้ผู้ใช้ไม่สามารถปรับเปลี่ยนขนาดของเฟรมได้ โดยปกติจะสามารถปรับได้
โดยคลิกเมาส์ที่เส้นแบ่งเฟรม
- 3. ครูผู้สอน นายไกรลาศ จิบจันทร์
ตัวอย่างจากแฟ้มข้อมูล (File) ชื่อ Test.html
<html>
<head>
<title>ยินดีต้อนรับเข้าสู่เว็บไซด์ของฉัน</title>
</head>
<frameset cols = "155,*" frameborder="YES" border="1" framespacing="1"
bordercolor="#0033FF">
<frame name = "menu" noresize src = "p1.html">
<frame name = "mainframe" noresize src = "p2.html" >
</frameset>
</body>
</html>
ผลลัพธ์เมื่อแสดงผลบนโปรแกรม อินเตอร์เน็ต จะแบ่งออกเป็น 2 ส่วน ซ้าย และขวา ดังรูป
เฟรมซ้าย เฟรมขวา
