กรอบแบ่งส่วน (Frame)
เว็บเพจสำรอง (Backup Webpages) : thaiall.com | lampang.thcity.com
ปรับปรุง : 2548-02-25 ()
บทเรียน ONLINE : การเขียน Homepage ด้วย HTML
[ กรอบแบ่งส่วน (Frame) ]
  1. frame คืออะไร
  2. รูปแบบของคำสั่ง frame และตัวอย่าง
  3. คำสั่ง target มีผลต่อ frame อย่างไร
frame คืออะไร
frame คือ ...
คำสั่งหนึ่งของภาษา html ซึ่งมีหน้าที่ เรียกแฟ้ม htm ย่อยมาแสดงในหน้าจอเดียวกัน
เช่น สร้าง frame ย่อย 1 เป็นเมนู และอีก frame คอยรองรับการเรียกจากframe ย่อย 1
แฟ้ม htm แบบ frame จะมีหน้าที่เรียกแฟ้ม htm อื่นมาแสดงบนจอภาพ อย่างเป็นระเบียบ
โดยมีหน้าที่แบ่งตามแนวนอน หรือแนวตั้ง ว่าแฟ้ม htm ใด จะอยู่บน ล่าง ซ้าย หรือขวา
หรือดูจากตัวอย่างข้างล่างนี้ได้ว่า frame ย่อย 1 อยู่ทางซ้าย frame ย่อย 2 อยู่ทางขวา
frame ย่อย 1 ด้านซ้าย คือ htmsamfm.htm
frame ย่อย 2 ด้านขวา คือ htmsamfh.htm
main frame ที่ใช้เรียก ทั้ง ด้านซ้าย และด้านขวา คือ htmsamfa.htm
ตัวอย่างข้างล่างนี้ ต้องใช้แฟ้มย่อยข้างบนนี้ 2 แฟ้ม ลอง click ชื่อข้างบนนี้จะเข้าใจมากขึ้น
ทดลองปรับปรุงตัวอย่างนี้ได้จาก Editor on web for HTML
รูปแบบของคำสั่ง frame และตัวอย่าง
วิธีการเขียน frame
การเขียน frame ต้องเริ่มต้นด้วยคำว่า <frameset> และปิดด้วย </frameset>
เมื่อมีทั้ง <frameset> และ </frameset> จะถือเป็นชุดของ frameset 1 ชุด
ในระหว่าง frameset ต้องแบ่งเป็น 2 ส่วนคือ
_ แบบที่ 1 : frame และ frame
_ แบบที่ 2 : ชุดของ frameset และ frame
_ แบบที่ 3 : frame และ ชุดของ frameset
ตัวอย่างที่ 1 : แสดงรูปแบบพื้นฐานที่เรียกใช้งานได้เลย
โดยแบ่งเป็น 2 ด้านคือ ซ้ายกับขวา แต่ด้านซ้ายจะคงที่คือกว้าง 120 pixels
เมื่อพิมพ์ตัวอย่าง 4 บรรทัดข้างล่างนี้ แล้ว save ในชื่อ wow.htm
หากใช้ browser เปิดแฟ้ม wow.htm จะเป็นการเรียก htmsamfm.htm และ htmsamfh.htm มา
<frameset cols="120,*" >
<frame src=htmsamfm.htm>
<frame src=htmsamfh.htm>
</frameset>
ตัวอย่างที่ 2 : คำว่า name มีหน้าที่ระบุชื่อของ frame ย่อย เพื่ออ้างอิงได้
หน้าที่ของ scrolling คือระบุว่าจะไม่ให้ใช้ scroll bar สำหรับ frame ย่อยนั้น
คำว่า frm_r ดูเป็นทางการดีนะครับ แต่จริง ๆ แล้วเปลี่ยนเป็นอะไรก็ได้ ที่จะอ้างถึงภายหลัง
การกำหนดให้ border=0 จะทำให้ไม่เห็นขอบของแต่ละ frame บางครั้งก็สวยดีนะครับ
<frameset cols="120,*" border=0>
<frame src=htmsamfm.htm scrolling=no>
<frame src=htmsamfh.htm name=frm_r>
</frameset>
หรือ click ที่นี่ เพื่อดูตัวอย่างแบบนี้ [ตัวอย่าง frame แบบที่ 1]
ตัวอย่างที่ 3 : การแบ่ง frame เป็น 3 ส่วน
อธิบายลำบาก ผมว่าเปรียบเทียบ code กับผลลัพธ์ น่าจะเข้าใจนะครับ
คำสั่ง target มีผลต่อ frame อย่างไร
คำสั่ง target ใช้ร่วมกับ href
เช่น <a href=hello.htm> ไม่ต่างกับ <a href=hello.htm target=_top>
ถ้าไม่มีการใช้ความสามารถของ frame ในการเขียนเว็บ จะไม่เห็นผลของการใช้ target=_top แต่อย่างใด
แต่ถ้าเป็น <a href=hello.htm target=_blank> จะทำให้การเปิดเว็บ hello.htm ไปเปิดในหน้าต่างใหม่ทุกครั้ง
ถ้า link นั้นอยู่ใน frame สั่ง link แบบนี้ <a href=hello.htm> จะเปิด hello.htm ในช่อง frame นั้นทันที
ทำให้ผู้ใช้ที่ไม่เคยชิดกับการใช้ frame ตกใจว่า จะทำอย่างไรจึงจะเปิดเว็บในช่องหน้าต่างที่ถูกต้อง

ตัวอย่าง link แบบที่ 1 :
<a href=hello.htm target=_top> สวัสดีครับ </a> หรือ <a href=hello.htm target=_top> สวัสดีครับ </a>
เมื่อกำหนด target=_top และ link นั้นอยู่ในช่อง frame ผลคือ จะนำ hello.htm มาแทนที่ frame ทั้งหมด

ตัวอย่าง link แบบที่ 2 :
<a href=hello.htm target=_blank> สวัสดีครับ </a> หรือ <a href=hello.htm target=_blank> สวัสดีครับ </a>
เมื่อกำหนด target=_blank และ link นั้นอยู่ในช่อง frame ผลคือ จะนำ hello.htm ไปเปิดให้หน้าต่างใหม่ที่ถูกเพิ่มขึ้น

ตัวอย่าง link แบบที่ 3 :
<a href=hello.htm target=frm_r> สวัสดีครับ </a> หรือ <a href=hello.htm target=frm_r> สวัสดีครับ </a>
เมื่อกำหนด target=frm_r และเคยกำหนดชื่อ frame หนึ่ง ให้เป็น frm_r ก็จะทำให้ hello.htm ไปปรากฏใน frame นั้น
ถ้าถามว่าไม่ใช้คำว่า frm_r ได้ไหม ผมขอตอบว่า ใช้ชื่อใดก็ได้ ที่กำหนดเป็นชื่อ frame ไว้ เพื่อให้ไปแสดงผลในช่อง frame นั้น
ซึ่งชื่อของ frame ถูกกำหนดไว้ตอนสร้าง frame ตัวหลัก โดยมีชื่อของ frame หลังคำว่า name นั่งเอง

ตัวอย่าง link แบบที่ 4 :
<a href=hello.htm target=fondow> สวัสดีครับ </a> หรือ <a href=hello.htm target=fondow> สวัสดีครับ </a>
เมื่อกำหนด target=fondow แต่ไม่เคยกำหนดชื่อ frame ใดเป็น fondow ก็จะเปิด hello.htm ในหน้าต่างใหม่อีกหน้าต่างทันที
ถ้าถามว่าไม่ใช้คำว่า fondow ได้ไหม ผมขอตอบว่าใช้อะไรก็ได้ ที่ไม่มีการตั้งชื่อเป็น frame ไว้
ทำให้การเรียกเว็บที่ไม่ได้ตั้งชื่อ frame ไว้ จะทำให้ browser เปิดหน้าต่างใหม่ รองรับหน้าเว็บที่ถูกเรียก
ตัวอย่างเรื่องการใช้ target กับ frame เปิดดูได้จาก ตัวอย่าง frame แบบที่ 1
แบบฝึกหัด
  1. ให้เขียน frame แบ่งเป็น 2 ส่วน
    ด้านซ้ายเป็น http://www.thaiall.com/learn/htmsanfm.htm
    ด้านซ้ายเป็น http://www.thaiall.com/learn/htmsanfh.htm
  2. ให้เขียน frame แบ่งเป็น 2 ส่วน และสร้าง ลูกของ frame ขึ้นเอง
  3. ให้เขียน frame แบ่งเป็น 3 ส่วน และสร้าง ลูกของ frame ขึ้นเอง
[ Editor on web for HTML ]
แนะนำเว็บใหม่ : ผลการจัดอันดับ
รักลำปาง : thcity.com : korattown.com : topsiam.com : มหาวิทยาลัยโยนก
ศูนย์สอบ : รวมบทความ : ไอทีในชีวิตประจำวัน : ดาวน์โหลด : yourname@thaiall.com
ติดต่อ ทีมงาน ชาวลำปาง มีฝันเพื่อการศึกษา Tel.08-1992-7223