lesson9_KhruDaony

บทที่ 9
การจดั แบง่ หนา้ เวบ็ เพจด้วยเฟรม(Frame)

เฟรม (Frame) คือ การแบ่งส่วนของพื้นท่ีแสดงผลหน้าจอของเว็บเพจออกเป็นส่วน ๆ ทางด้าน
แนวต้ังและแนวนอน ซึ่งในแต่ละส่วนสามารถแสดงผลได้อย่างอิสระ และสามารถแสดงผลได้มากกว่า
1 ไฟล์ โดยสามารถใช้แถบเล่ือนหรือสครอลบาร์ (Scroll Bar) เล่ือนดูข้อมูลในแต่ละเฟรมนอกจากน้ียัง
สามารถเชื่อมโยงไปยังไฟลแ์ ละเว็บไซตอ์ ืน่ ๆ ได้อกี ด้วย

จากภาพท่ี 9.1 จะเห็นว่า เฟรมหมายเลข 1 ซึ่งเป็นเฟรมส่วนบน (Top Frame) ใช้สำหรับแสดง
ช่ือและโลโก้ (Logo) ของเว็บไซต์ เฟรมหมายเลข 2 ซ่ึงเป็นเฟรมส่วนทางซ้าย (Left Frame) ใช้สำหรับ
แสดงเมนูเพื่อเลือกดูรายการภายในเว็บไซต์ และเฟรมหมายเลข 3 ซ่ึงส่วนตรงกลาง(Main Frame) ใช้
สำหรับแสดงข้อมูลและรายละเอียดของเนื้อหา เม่ือผู้เย่ียมชมเว็บไซต์คลิกในส่วนของเมนูเพ่ือเลือกดู
รายการ ข้อมูลจะไปปรากฏตรงบริเวณส่วนตรงกลางของหน้าจอ ส่วนบนและส่วนทางซ้ายหรือเมนูจะคง
อยู่ เพื่อใหผ้ ู้เยยี่ มชมมีความสะดวกในการเรียกดขู ้อมูลส่วนอื่นได้งา่ ย เฟรมแต่ละเฟรมท่ีนำมาประกอบเข้า
ด้วยกนั รวมกนั เรียกว่าเฟรมเช็ต (Frameset)

ส่วนที่ 2 สว่ นที่ 1
แสดงเมนู แสดงช่ือและโลโก้
หรือรายการ
ส่วนท่ี 3
ภาพที่ 9.1 การแบ่งส่วนประกอบของหนา้ เว็บเพจ แสดงข้อมลู
และรายละเอยี ด

2

การสรา้ งเฟรมเช็ต

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

ขนั้ ที่ 1 สร้างหน้าเวบ็ เพจของแตล่ ะเฟรม
จากเว็บเพจตัวอย่างตามภาพท่ี 9.1 จะเห็นว่าเป็นเฟรมเซตที่ประกอบด้วยเฟรมจำนวน 3เฟรม
ดังนั้นผูอ้ อกแบบไฟลจ์ ำนวน 3 ไฟล์ ดังนีค้ อื (ดูภาพ 9.2)
ไฟล์ท่ี 1 เป็นไฟล์เว็บเพจที่ออกแบบไว้เฉพาะส่วนหัวของเว็บเพจ ซึ่งเตรียมไว้สำหรับเป็นเฟรม
สว่ นบน (Top Frame)
ไฟลท์ ี่ 2 เป็นไฟล์เว็บเพจที่ออกแบบไว้เฉพาะส่วนของเมนูของเว็บเพจ ซ่ึงเตรียมไว้สำหรับเป็น
เฟรมส่วนทางซ้าย (Left Frame)
ไฟลท์ ่ี 3 เป็นไฟล์เว็บเพจท่ีออกแบบไว้เฉพาะส่วนหัวของเนื้อหาหลักของเว็บเพจ ซึ่งเตรียมไว้
สำหรบั เป็นเฟรมส่วนกลาง (Main Frame)

ไฟลท์ ี่ 1 ไฟลท์ ่ี 2

ไฟลท์ ี่ 3

ภาพที่ 9.2 แสดงหนา้ เว็บเพจของแต่ละเฟรม

3

ขนั้ ที่ 2 สรา้ งเฟรมเซต
เม่ือได้เตรียมไฟล์ตามภาพที่ 9.2 ไว้แล้ว ไฟล์แต่ละไฟล์จะนำประกอบเป็นเฟรมเซตด้วยวิธีการ
ดังนคี้ อื (ดภู าพท่ี 9.3)
1. คลิกคำสั่ง File New เพื่อสรา้ งไฟล์ใหม่
2. จะปรากฏไดอะล็อกบอ็ กชื่อ “New Document” ขึ้นมา ให้คลิกทต่ี วั เลอื ก “Framesets” ใน

กรอบรายการ “Category”
3. คลกิ เลือกรูปแบบของเฟรมเซตทีต่ อ้ งการในกรอบรายการ “Framesets”
4. คลกิ ทีป่ ุ่ม Create
5. จะปรากฏหนา้ จอออกแบบเป็นเว็บเพจทีม่ รี ปู แบบของเฟรมเซตตามทเ่ี ลือกไว้
6. คลิกคำส่ัง Windows Frames เพอ่ื เปดิ พาเนลเฟรมเซต (Frameset Panel) ขน้ึ มา

ดงั ภาพท่ี 9.4








ภาพท่ี 9.3 การสร้างเฟรมเซ็ต (Frameset)

4

พาเนลเฟรมเซต็

ภาพที่ 9.4 พาเนลเฟรมเซต็ (Frameset)
ข้นั ท่ี 3 แทรกเวบ็ เพจลงในเฟรมเซต
หลังจากทีส่ รา้ งเฟรมเซตไวแ้ ล้ว ข้ันตอนต่อไปจะเปน็ การนำเฟรมทเี่ ตรียมไวม้ าแทรกลงในเฟรม

เซตตามขน้ั ตอนดังน้ีคือ
การแทรกเฟรมที่ 1 ส่วนแสดงเมนหู รือรายการเลอื ก
1. คลิกเมา้ ส์ที่พาเนลเฟรมเซตส่วนที่ 1 ซงึ่ เปน็ สว่ นบนของเฟรมเซต
2. คลกิ ทเ่ี คร่ืองมือ ท่รี ายการ “Src” ในพาเนลกำหนดคุณสมบ้ติ
3. จะปรากฏไดอะล็อกบ็อกซช์ ื่อ “Select HTML Files” ข้ึนมา ให้คลกิ ชื่อไฟลท์ ไ่ี ด้ออกแบบ
สว่ นบนเพ่อื แสดงชื่อและโลโก้ของเวบ็ ไซต์
4. คลิกปุ่ม OK
5. จะปรากฏส่วนของเฟรมท่ี 1 ในเฟรมท่สี รา้ งขนึ้
การแทรกเฟรมท่ี 2 แสดงเมนหู รอื รายการเลอื ก
1. คลิกเมาสท์ ่ีพาเนลเฟรมเซตส่วนท่ี 2 ซง่ึ เปน็ สว่ นซา้ ยสุดของเฟรมเซต
2. คลิกที่เคร่ืองมอื ….ทีร่ ายการ “Src” ในพาเนลกำหนดคุณสมบัติ
3. จะปรากฏไดอะลอ็ กบอ็ กซ์ชอื่ “Select HTML Files” ขน้ึ มา ให้คลกิ ชื่อไฟลท์ ่ีได้ออกแบบ
สว่ นทางซา้ ยเพ่ือแสดงเมนหู รอื รายการเลือกของเวบ็ ไซต์
4. คลิกทปี่ มุ่ OK
5. จะปรากฏส่วนของเฟรมท่ี 2 ในเฟรมเซตที่สร้างขึน้

5

การแทรกเฟรมท่ี 3 แสดงข้อมลู และรายละเอียด
1. คลิกเมาส์ทห่ี นา้ ตา่ งเฟรมสว่ นท่ี 3 ซึง่ เป็นสว่ นขวาสดุ ของเฟรมเซต
2. คลกิ ทเ่ี ครื่องมอื ทีร่ ายการ “Src” ในพาเนลกำหนดคุณสมบตั ิ
3. จะปรากฏไดอะลอ็ กบอ็ กซ์ชือ่ “Select HTML Files” ขึน้ มา ใหค้ ลกิ ชือ่ ไฟล์ท่ีได้ออกแบบ

ส่วนของเน้อื หาหลักของเว็บเพจ
4. คลกิ ปมุ่ OK
5. จะปรากฏส่วนของเฟรมที่ 3 ในเฟรมเซตที่สรา้ งข้นึ
ขนั้ ท่ี 4 บันทึก (Save) เฟรมเซต
หลงั จากท่ีได้แทรกเฟรมจนครบทกุ เฟรมแล้ว ขน้ั ตอนตอ่ ไปเปน็ ขน้ั ตอนของการบนั ทึกเฟรมเซต
เป็นไฟลป์ ระเภทเอชทีเอ็มแอล“HTML” โดยทำตามวธิ กี ารดงั น้ีคอื (ดภู าพท่ี 9.5)
1. คลิกคำสั่ง File Save Frameset หรือกดแป้นพมิ พ์ [Ctrl]+[S]
2. จะปรากฏไดอะล็อกบ็อกซช์ ่อื “Save As” ขึ้นมา ให้พมิ พช์ ่ือไฟลท์ ่ีต้องการในกรอบรายการ

“File Name”
3. คลกิ ป่มุ OK







ภาพที่ 9.5 การเก็บบันทึกเฟรมเซ็ต
ขน้ั ที่ 5 ปรบั ขนาดเฟรมเซต
การปรบั ขนาดเฟรมเซตให้ได้ขนาดตามที่ตอ้ งการ สามารถทำให้ง่ายโดยการวางเมาสท์ ีเ่ สน้ ค่นั

เฟรม แล้วแดรกเมาสต์ ามขนาดที่ต้องการ (ดภู าพท่ี 9.6)

6

เสน้ คนั ่ เฟรม

เสน้ คนั ่ เฟรม

ภาพที่ 9.6 การปรบั ขนาดเฟรมเซต็

ขนั้ ที่ 6 ปรับแตง่ เฟรมเซต
1. คลิกกรอบเฟรมเซ็ตในพาเนลเฟรมเซ็ต
2. จะปรากฏพาเนลกำหนดคณุ สมบัติ ดังภาพที่ 9.7 ประกอบด้วย

แสดงกรอบเฟรมหรือไม่ สขี องกรอบเฟรม

แสดงความหนาของกรอบเฟรม ความกวา้ งของเฟรม

ภาพที่ 9.7 การปรบั แต่งคุณสมบัตเิ ฟรมเซ็ต

Borders ใหเ้ ลอื กแสดง (Yes) หรอื ไม่แสดง (No) เส้นแบง่ เฟรม
หรือใช้ค่าโดยปริยาย (Default)

7

Border width ขนาดของเสน้ แบง่ เฟรม (หน่วยเปน็ พิกเซล)
Border color สีของเสน้ แบง่ เฟรม
Row Value ความสงู ของเฟรมท้งั แถว
Row Units หนว่ ยความสูงของเฟรม ซ่ึงประกอบด้วย
Pixels จะทำใหเ้ ฟรมมีขนาดท่แี น่นอน
Column Value Percent เปอร์เซ็นต์
Column Units Relative ความสงู ของเฟรมจะใช้พืน้ ท่ีท่ีเหลือทง้ั หมดหลงั จาก

ทเี่ ฟรมอนื่ ใชไ้ ปแล้ว
ความกว้างของเฟรมทงั้ คอลมั น์
หนว่ ยความกว้างของเฟรม

ขน้ั ที่ 7 ปรับแตง่ เฟรมย่อย
1. คลกิ เลอื กเฟรมย่อยทตี่ อ้ งการปรบั แตง่ ในพาเนลเฟรมเซต
2. จะปรากฏพาเนลกำหนดคุณสมบตั ิ ดงั ภาพที่ 9.8 ประกอบดว้ ย

ตำแหน่งของเวบ็ เพจ แสดงกรอบเฟรมหรือไม่

แสดง/ไมแ่ สดง Scrollbar ปรบั ขนาดไดห้ รอื ไมไ่ ด้ สีของกรอบเฟรม

ภาพที่ 9.8 การปรบั แต่งเฟรมยอ่ ย ชื่อของเฟรม ใช้กำหนดการเชื่อมโยง (Link) วา่ จะให้แสดง
เวบ็ เพจปลายทางท่ีเฟรมใด
Frame Name ชอ่ื ไฟล์ของเว็บเพจที่แสดงในเฟรม
กำหนดให้แสดงหรือไม่แสดงแถบเลือ่ นหน้าจอ (Scroll Bar)
Src แสดงแถบเล่ือนหน้าจอเสมอ
Scroll ไมแ่ สดงแถบเล่ือนหน้าจอเลย
Yes แสดงแถบเลื่อนหน้าจอเฉพาะกรณีท่มี ีเนื้อหาเกนิ เฟรม
No ใชค้ ่าโดยปริยาย โดยขึน้ อยกู่ ับการทำงานของเบราว์เซอร์
Auto ไมใ่ หผ้ ู้เย่ยี มชมเวบ็ ไซตส์ ามารถปรบั ขนาดของเฟรมได้
Default แสดงหรือไมแ่ สดงเสน้ แบ่งเฟรม
No resize สขี องเสน้ แบ่งเฟรม
Borders ระยะห่างระหวา่ งเน้ือหากับขอบซา้ ยและขวาของเฟรม
Borders color ระยะห่างระหว่างเน้ือหากบั ขอบบนและลา่ งของเฟรม
Margin wisth
Margin Height

8

การเช่อื มโยงขอ้ มลู ในเฟรมเซต

การเช่ือโยงข้อมูลในเฟรมเซต จำเป็นต้องระบุตำแหน่งปลายทาง (Target) ที่จะแสดงข้อมูลให้

ถูกต้องด้วย เพราะถ้าไม่มีการระบุตำแหน่งท่ีจะแสดงข้อมูลท่ีเชื่อมโยงไปให้ถูกต้องแล้วข้อมูลท่ีเช่ือมโยง

อาจถูกนำไปแสดงท่ีตำแหน่งท่ีไม่ถูกต้อง ดังน้ัน การเชื่อมโยงข้อมูลในเฟรมเซ็ตจึงทำได้ดังนี้คือ (ดูภาพที่

9.9)

1. ระบายข้อมูลหรอื คลกิ รูปภาพทจ่ี ะใช้เปน็ จดุ เช่อื มโยง

2. ระบุตำแหนง่ ปลายทางท่ีจะเชื่อมโยงไป ทร่ี ายการ “Link” ในพาเนลกำหนดคุณสมบัติ

3. กำหนดรปู แบบการแสดงผลบนเบราว์ในรายการ “Target” ซง่ึ ประกอบด้วย

_Blank แสดงข้อมลู ในเบราวเ์ ซอร์ใหม่

_Parent แสดงขอ้ มูลแบบเต็มจอ โดยยกเลิกเฟรมทั้งหมด

_Self แสดงขอ้ มลู ในเฟรมที่มีการกำหนดการเชอื่ มโยงไว้

_Top แสดงขอ้ มลู แบบเต็มจอ โดยยกเลกิ เฟรมทงั้ หมด

mainFrame แสดงข้อมลู ในเฟรมหลัก

leftFrame แสดงขอ้ มูลในเฟรมทางซา้ ย

topFrame แสดงข้อมลู ในเฟรมบน

 

ภาพท่ี 9.9 การเชือ่ มโยงข้อมูลในเฟรมเซ็ต

9

บทสรปุ

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

การสร้างเฟรมเซ็ต (Frameset) จะต้องเตรียมไฟล์ข้อมูลของแต่ละเฟรมท่ีจะนำมาประกอบเป็น
เฟรมเซ็ตให้เรียบร้อยก่อน เพื่อช่วยให้ทราบขนาดของแต่ละเฟรม จากน้ันจึงนำไฟล์ทั้งหมดท่ีเตรียมไว้มา
ประกอบกันเปน็ เฟรมเซ็ตในภายหลงั

การเช่ืองโยงข้อมูลในเฟรมเซ็ต จะต้องระบุตำแหน่งปลายทาง (Target) ท่ีจะแสดงข้อมูลให้
ถูกต้อง เพราะถ้าไมร่ ะบุ ข้อมลู ท่เี ช่อื มโยงอาจถูกนำไปแสดงในตำแหนง่ ที่ไม่ถูกต้อง

คำถามทา้ ยบทที่ 9

คำชแ้ี จง
1. คำถามท้ายบทท่ี 9 เพ่ือทบทวนความรู้ของนกั ศกึ ษา เรือ่ งการออกแบบเวบ็ เพจด้วยเฟรม
2. การตอบคำถาม ให้นกั ศกึ ษาเตมิ ข้อความลงในช่องว่างใหส้ มบรู ณ์

1. เฟรม (Frame) หมายถึง ………………………………………………………………………..………………………..…………
…………………………………………………………..……………………………………………………………………………………
…………………………………………………………..……………………………………………………………………………………

2. เฟรมเซต็ (Frameset) หมายถงึ …………………………………………………………………………………………..……….
…………………………………………………………..……………………………………………………………………………………
…………………………………………………………..……………………………………………………………………………………

3. ข้ันตอนการสรา้ งเฟรมเซต็ มดี งั น้คี ือ
3.1…………………………………………………………………..………………………………………………………………………
3.2…………………………………………………………………..………………………………………………………………………
3.3…………………………………………………………………..………………………………………………………………………
3.4…………………………………………………………………..………………………………………………………………………
3.5…………………………………………………………………..………………………………………………………………………
3.6…………………………………………………………………..………………………………………………………………………
3.7…………………………………………………………………..………………………………………………………………………

4. การกำหนดรปู แบบการแสดงผลบนเบราวเ์ ซอรท์ ช่ี อ่ ง Target ประกอบดว้ ย
4.1 _Blank หมายถงึ ……………………………………………………….……………………………………………………….
4.2 _Parent หมายถึง……………………………………………………………………………………………………………….
4.1 _Self หมายถงึ …………………………………………………………….………………………………………………….
4.1 _Top หมายถงึ ………………………………………………………….…………………………………………………….

10

เอกสารอา้ งอิง

บญุ สืบ โพธศิ์ รี และอำภา กุลธรรมโยธนิ (2547). การพฒั นาเว็บเพจดว้ ยโปรแกรมสำเรจ็ รูป.
กรุงเทพฯ: ศูนยส์ ่งเสรมิ อาชีวะ.

ดวงพร เก๋ยี งคำ. (2549). อินไซต์ Dreamweaver 8. กรงุ เทพฯ: โปรวชิ ่ัน.
ดวงพร เก๋ียงคำ. (2550). ค่มู ือสรา้ งเวบ็ ไซต์ดว้ ยตนเอง. กรงุ เพทฯ: โปรวิช่นั .
บรรณาธิการ นาถสงค์. (2550). Dreamweaver 8 Workshop. กรุงเทพฯ: ซัคเซส มีเดยี .
บอกอ แรมโบ.้ (2550). มอื ใหม่ Dreamweaver 8. กรุงเทพฯ: ซัคเซส มีเดยี .
พนั จนั ทร์ ธนวัฒนเสถียร. (2550). Dreamweaver 8 ฉบับเรยี นลัด. กรงุ เทพฯ: ซัคเซส มีเดีย.
สทิ ธิชยั ประสานวงศ์. (2550). สรา้ งสรรคเ์ ว็บสวยด้วย Dreamweaver 8. กรุงเทพฯ: ซอฟทเ์ พรส.