พื้นฐาน HTML

แบ่งหน้าจอโดยใช้ Frame

สามารถแบ่งหน้าจอด้วยคำสั่ง frame เพื่อแสดงผลเว็บเพจหลายๆหน้าได้ คำสั่งนี้เมื่อก่อนได้รับความนิยมมาก แต่ปัจจุบันไม่ได้รับความนิยมแล้วเพราะมีผลกับ Search Engine ดูแลรักษายาก ไม่สามารถทำให้รองรับในมือถือได้

ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frame (เฟรม)

1. การแบ่ง frame แบบแนวตั้ง
frame ในแนวตั้งซึ่งจะเปิดเว็บเพจถึง 3 ไฟล์ในหน้าเดียวกันโดยเราจะแบ่งขนาดของ frame เป็น % หรือเป็น (px) pixel ก็ได้

รูปแบบของ frame แนวตั้ง

<html>
    <frameset cols=ขนาดเฟรม1,ขนาดเฟรม2>
    <frame src='เว็บเพจ1'>
    <frame src='เว็บเพจ2'> 
    </frameset>
</html>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


2. การแบ่ง frame แบบแนวนอน
การแบ่งแบบแนวนอน ก็สามารถทำได้เช่นเดียวกัน ซึ่งแบ่งเป็น % หรือ px (pixel) ก็ได้เช่นกัน ซึ่งเราจะใช้ rows (แถว) แทน cols (หลัก)

รูปแบบของ frame แนวนอน

<html>
    <frameset rows=ขนาดเฟรม1,ขนาดเฟรม2>
    <frame src='เว็บเพจ1'>
    <frame src='เว็บเพจ2'> 
    </frameset>
</html>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


3. <noframes>
ถ้า browser ของคุณไม่สนับสนุน frame จะมีคำเตือนตามที่เราเขียนขึ้นมา

<html>
<noframes>
<body> คำเตือน </body>
</noframes>
</html>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


4. ลองเอา frame แนวตั้งและแนวนอนมารวมกัน
ในตัวอย่างนี้จะนำเอา frame แนวตั้งและแนวนอนมารวมกัน ซึ่งเป็นการซ้อนกันของ frame นั่นเอง
คลิกเพื่อทดลองเขียนด้วยตัวเอง



5. ห้ามเปลี่ยนขนาดของ frame
frame ในตัวอย่างที่ผ่านมานั้นจะสังเกตุได้ว่าสามารถเปลี่ยนขนาดได้ตามใจของเรา แต่ถ้าเราไม่ต้องการให้ผู้ใช้เปลี่ยนขนาดเราต้องใช้คำสั่ง noresize ซึ่งเป็น Attributes มาช่วย
คลิกเพื่อทดลองเขียนด้วยตัวเอง



6. การใช้ link ให้สัมพันธ์กันใน frame

ข้อดีของ frame ที่จะเห็นได้ก็คือ ใช้ในการทำเมนู ดังในตัวอย่างนั่นเองซึ่งจะต้องใช้ ไฟล์ 2 ไฟล์ ดังนี้

1.ไฟล์ที่ใช้จัด frame ดังในตัวอย่างซึ่งจะเห็นว่าเราได้ใส่ชื่อ(name) ให้กับ frame ที่เราสร้างขึ้นมาด้วย

2. ไฟล์ที่ใช้ทำเป็น link ของเราซึ่งมีคำสั่ง target='frame' หมายความว่าให้แสดงผลใน frame ที่มีชื่อว่า frame2 นั่นเอง มี soure code ดังนี้

<html>
<body>
    เว็บไซต์ที่น่าสนใจ
    <a href="http://www.hellomyweb.com" target="frame2">
    hellomyweb</a>
    <a href="http://www.w3schools.com" target="frame2"> 
    w3schools </a>
</body>
</html>

คลิกเพื่อทดลองเขียนด้วยตัวเอง


7. การใช้ link ให้ปิด frame ทั้งหมด
ในตัวอย่างนี้จะเป็นการสร้าง link ให้ทำลาย frame ทั้งหมด ซึ่งเราจะใช้คำสั่ง target ซึ่งมีรายละเอียดดังนี้

1.target='_top'เป็นคำสั่งให้เปิด link ทับหน้าเดิมทั้งหมด ซึ่งจะปิด frame ทั้งหมดเช่นเดียวกัน

2.target='_blank' เป็นคำสั่งให้เปิด link ในหน้าใหม่

3.target='_self' เป็นคำสั่งให้เปิด link ใน frame ปัจจุบัน
คลิกเพื่อทดลองเขียนด้วยตัวเอง



8. iframe
เป็น frame รูปแบบหนึ่ง นิยมใช้ในส่วนที่เป็นโฆษณา เนื่องจากทำให้เราสะดวกไม่ต้องมาแก้ที่หน้าหลักแต่แก้ที่หน้าที่เป็นโฆษณาได้เลย ซึ่งเราอาจเอาให้หน้าที่เป็นโฆษณาให้ลูกค้าแก้ไขโดยไม่ต้องยุ่งกับหน้าหลักของเรา
คลิกเพื่อทดลองเขียนด้วยตัวเอง


** เราจะใช้ Frameset ใน <body> </body> ไม่ได้ยกเว้นกรณีของ <noframes>


เลื่อนขึ้นด้านบน