แบ่งหน้าจอโดยใช้ Frame
HTML
ปรกติเราจะแสดงเว็บเพจใน browser ได้ที่ละ 1 เว็บเพจ แต่ถ้าเราใช้ Frame เราจะสามารถแสดงเว็บเพจได้หลายๆเว็บเพจในหน้าเดียว โดยจะแบ่งหน้าของ browser ออกเป็นส่วนๆ โดยใช้ Frameเรามาลองสร้าง 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>
No comments:
Post a Comment