HTML Language
เรียนรู้การสร้าง web แบบมืออาชีพ


บทเรียนที่ 9 : การแบ่งพื้นที่ของจอภาพ


แบ่งจอภาพเป็นส่วน ๆ

เราสามารถแบ่งพื้นที่ของจอภาพเป็นส่วน ๆ เช่น ทางซ้ายมืออาจเป็นเมนู ทางขวามืออาจเป็นข้อมูลที่แสดงรายละเอียดต่างๆ การแบ่งจอภาพ สามารถแบ่งได้ทั้งในแนวนอน และแนวตั้ง หรือจะผสมทั้งแนวนอนและแนวตั้งก็ได้

การแบ่งจอภาพเป็นส่วน ๆ จะมีการสร้างเอกสาร HTML หลายไฟล์ โดยเริ่มจากไฟล์หลัก อาจใช้ชื่อเป็น index.html จากนั้นจะมีการกำหนดให้แต่ละส่วนของการแบ่งจอภาพเป็นชื่อไฟล์ เช่น left.html (ไฟล์ทางซ้ายมือ) และ right.html (ไฟล์ทางขวามือ) ดูตัวอย่างประกอบได้จากด้านล่างนี้


ตัวอย่างการแบ่งจอภาพเป็นส่วน ๆ

<HTML>
<HEAD>
<TITLE> โปรแกรมแรกของดิฉัน </TITLE>
<frameset cols = "20%,*">
<frame src ="left.html">
<frame src ="right.html">
</frameset>

</HTML>


หมายเหตุ :- ตัวหนังสือสีแดง คือคำสั่งในภาษา HTML


ผลการรันด้วย Internet Explorer



รายละเอียดความหมายของแต่ละคำสั่ง
  1. <frameset cols = "20%,*">
    ความหมาย : - คำสั่งเริ่มต้นของคำสั่ง Frameset การแบ่งด้วยคำสั่งนี้จะแบ่งในแนว Column เราสามารถเปลี่ยนการแบ่งจอภาพในลักษณะของแนวนอน หรือ Row ได้ โดยใช้คำสั่ง Rows ="25%,75%" (กำหนดขนาดเท่าใดก็ได้)

  2. <frame src "left.html">
    ความหมาย : - คำสั่งในการกำหนดชื่อไฟล์ที่ถูกแบ่งในลำดับที่ 1 คือ 20%

  3. <frame src "right.html">
    ความหมาย : - คำสั่งในการกำหนดชื่อไฟล์ที่ถูกแบ่งในลำดับที่ 2 ดอกจันทน์ " * " คือคำสั่งในการกำหนดส่วนที่เหลือ นั่นคือ 80%

  4. </frameset>
    ความหมาย : - คำสั่งปิดของคำสั่ง frameset

ตัวอย่างการสั่งกดเมนู ด้านซ้ายมือ แต่แสดง web page หน้าขวามือ

  1. ให้เพิ่มคำสั่งเมนู ด้านซ้าย ดังนี้ <frame src "left.html" name = 'show'>
  2. สำหรับเมนูที่สร้างขึ้น (ทางซ้าย) เวลาสร้างลิงค์ให้เพิ่มคำสั่งดังนี้ <a href ="page01.html" name = 'show'>

ยินดีด้วยค่ะ !
คำสั่งหลัก ๆ อีกหนึ่งคำสั่งก็จบแล้ว คำสั่งนี้มีประโยชน์มาก หลาย ๆ web ก็มีการแบ่งจอภาพเป็นส่วน ๆ เช่นกัน


Copyright ® 2000-2001 IT-Guides.Com all right reserve
Always Online