<FRAMESET COLS or ROWS = "80%,*" >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
<FRAME SRC = "URL" หรือ ไฟล์รูปภาพ >
</FRAMESET>
แบ่งจอภาพในแนวตั้ง
<FRAMESET COLS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
80%
20%
คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวตั้ง ส่วนทางซ้ายมีพื้นที่ 80% ของหน้าจอทั้งหมด ส่วนทางขวาคือพื้นที่ที่เหลือ (20%) จอทางขวาจะมีรูปภาพชื่อ menu.gif
แบ่งจอภาพในแนวนอน
<FRAMESET ROWS = "80%,*" >
<FRAME SRC = "main.html" >
<FRAME SRC = "menu.gif" >
</FRAMESET>
20%
80%
คำอธิบาย
แบ่งหน้าจอเป็น 2 ส่วน ในแนวนอน ด้านบนพื้นที่ 20% ส่วนด้านล่างมีพื้นที่ 80%
แบ่งจอภาพในแนวตั้งและแนวนอน
<FRAMESET ROWS = "15%,*" >
<FRAME SRC = "top.html" >
<FRAMESET COLS = "20%,80%" >
<FRAME SRC = "left.html" >
<FRAME SRC = "right.html" >
</FRAMESET>
</FRAMESET>
15%
20%
80%
คำอธิบาย
แบ่งหน้าจอทั้งหมดเป็น 3 ส่วน ด้านบนพื้นที่ 15% ส่วนด้านล่างมีพื้นที่ 85% ในพื้นที่ด้านล่างแบ่งออกเป็น 2 ส่วนด้านซ้าย 20% ด้านขวา 80% (เหมือนกับเวปเพจที่ท่านเห็นอยู่นี้)
การแบ่งพื้นที่จอภาพ สามารถแบ่งได้ทั้งแถวตั้ง และแนวนอน สามารถจะแบ่งเท่าไหร่ก็ได้ ขึ้นกับผู้เขียน แต่อย่างไรก็ตาม ควรมีการกำหนดสัดส่วนให้ตรงกับข้อมูล หรือรูปภาพที่นำมาลงในเวปด้วย...
<FRAMESET> เป็นคำสั่งเริ่มต้นการแบ่งหน้าจอ และปิดท้ายด้วย </FRAMESET>
คำสั่งนี้ จะมาแทนที่คำสั่ง <BODY>
<FRAME SRC > เป็นคำสั่งย่อยของ FRAMESET เพื่อกำหนดการแสดงผลข้อมูลว่า จะแสดงเป็น HTML อีกไฟล์ หรือจะให้แสดงเป็นรูปภาพก็ได้
จากตัวอย่างด้านซ้าย เรากำหนดขนาดของจอภาพเป็นเปอร์เซ็นต์ 80%,* (เครื่องหมาย * หมายถึง ขนาดขอจอภาพที่เหลือ) นอกจากนี้เรายังสามารถกำหนดเป็น pixel ได้ด้วย เช่น 500,100 เป็นต้น
คำสั่งเสริมเพิ่มเติม
กำหนดตำแหน่งข้อความตามแนวนอน
align = "left"
align = "center"
align = "right"
กำหนดตำแหน่งข้อความตามแนวตั้ง
valign = "top"
valign = "middle"
valign = "bottom"
รูปแบบคำสั่ง
<TR ALIGN= "CENTER" >
หรือ <TR VALIGN= "TOP" >
ตั้งชื่อพื้นที่
หลังจากมีการแบ่งพื้นที่จอภาพแล้ว อาจจำเป็นที่เราต้อง ตั้งชื่อพื้นที่ เนื่องจากการสร้างจุดลิงค์เพื่อให้แสดง ในพื้นที่ที่ต้องการ ดังตัวอย่างนี้
<FRAME SRC = "right.html" name = "show" >
สร้างลิงค์ให้แสดงในพื้นที่ที่มีชื่อว่า show
<a href = "page2.html" target = "show">
ไม่มีความคิดเห็น:
แสดงความคิดเห็น