<< Go Back


เฟรม  (Frame)  เป็นการจัดแบ่งหน้าต่างของเว็บเพจออกเป็นส่วน ๆ เพื่อให้แต่ละส่วนแสดงเว็บเพจที่แตกต่างกันตามที่เรากำหนด

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

การสร้างเฟรม
เราสามารถที่จะสร้างเฟรมได้  2 ทางคือ   สร้างขึ้นเองตามแบบที่เราต้องการ  หรือเลือกจากแบบสำเร็จที่โปรแกรมจัดเตรียมไว้ให้  โดยสามารถสร้างจากไฟล์ Web page ที่สร้างไว้แล้ว หรือสร้างจากไฟล์ที่สร้างใหม่

วิธีที่ 1


วิธีที่ 2
1.   เลือกเมนูคำสั่ง  File  เลือกคำสั่ง   New   จะปรากฏหน้าต่าง  New   Document
2.   เลือก Page from Sample   ในส่วนของ Sample Folder  เลือก  Frameset
3.   จากนั้นทำการทำการเลือก Sample Page  จากรายการที่แสดง  โดยโปรแกรมจะแสดงตัวอย่างทางด้านขวามือดังรูป

4.  เมื่อเลือก Frameset  จากรายการเรียบร้อยแล้วให้คลิกที่ปุ่ม


-  การสร้างเฟรม

  1. สร้างเว็บเพจใหม่
  2. เลือกเมนูคำสั่ง  Modify  เลือก  Framesset
  3. จากนั้นเลือกรูปแบบที่ต้องการ

การแบ่งเฟรมย่อย
คลิกที่เมนูคำสั่ง  View  เลือกคำสั่ง   Visual  Aids  เลือกคำสั่ง  Frame  Borders  เพื่อกำหนดให้มีเส้นขอบของเฟรมที่ถูกเลือกไว้ก่อนหน้านี้

  1. นำเมาส์คลิกค้างไว้ที่เส้นขอบของเฟรม (Frame  Borders) 
  2. ดรากส์เมาส์ลากเส้นขอบของเฟรมออกมาตามที่ต้องการ
  3. หากต้องการแบ่งเฟรมออกเป็น  4  เฟรมให้นำเมาส์ดรากส์ลากจากมุมของเฟรม  จะเห็นว่าหัวของ  ตัวชี้เมาส์  (Pointer)
    จะเป็นรูป
  4. เลือกคำสั่ง Window>>Frames เพื่อเปิดหน้าต่างเฟรมออกมา เพื่อช่วยในการแบ่งเฟรม 

   คลิกเมาส์ลากแบ่งเฟรมย่อยออกมา



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

  • การปรับขนาดเฟรม

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



เมื่อแบ่งเฟรมด้วยตนเองแล้วยังเพิ่มเฟรมย่อยจากเฟรมที่สร้างขึ้นเดิมได้โดยการไปที่คำสั่ง Modify >>Frameset จากนั้นเลือกวิธี
การเพิ่มเฟรมจาก Split Frame แบบต่างๆ โดยสามารถแบ่งเฟรมทั้งแนวตั้งหรือแนวนอนซึ่งทำได้ดังนี้

  • Split Frame                 Left        แสดงเฟรมหลักทางซ้าย
  • Split Frame                 Right     แสดงเฟรมหลักทางขวา
  • Split Frame Up          แสดงเฟรมหลักด้านบน
  • Split Frame Down     แสดงเฟรมหลักด้านล่าง

การลบเฟรมย่อย
บางครั้งเฟรมที่สร้างขึ้นมาอาจไม่ได้ใช้งานหรือไม่เป็นตามต้องการ ก็อาจจะลบเฟรมนั้นออกได้ดังนี้

  1. แดรกเมาส์ตรงเส้นแบ่งเฟรมที่ไม่ต้องการ และต้องการลบออกจากหน้าเว็บเพจ
  2. จากนั้นลากไปหาขอบเว็บเพจโดยเส้นเฟรมแนวตั้งให้ลากไปที่ขอบด้านซ้ายส่วนเส้นแนวนอนให้ลากไปที่ขอบด้านบน

การปรับแต่งคุณสมบัติของ เฟรม

  1. เลือกเฟรมที่ต้องการ
  2. ปรับค่าต่าง ๆ ในพาเนล  properties


1.   เลือกเฟรมที่ต้องการจะเปลี่ยนสีพื้นหลัง
2.   คลิกที่เมนูคำสั่ง  Modify  เลือกคำสั่ง  Page  Properties    

3.   จะปรากฏหน้าต่าง   Page   Properties   ขึ้นมาให้ปรับตั้งค่าต่าง ๆ

4. คลิกเมาส์ที่ Background จะปรากฏหน้าต่างให้เลือกสีตามต้องการ

5.   จากนั้นคลิกที่ปุ่ม  OK  เฟรมจะเปลี่ยนเป็นสีตามที่เลือกไว้


1.   เลือกเฟรมที่ต้องการจะเปลี่ยนพื้นหลังเป็นรูปภาพ
2.   คลิกที่เมนูคำสั่ง  Modify   เลือกคำสั่ง  Page  Properties 
3.   จะปรากฏหน้าต่าง   Page   Properties  ขึ้นมาให้ปรับตั้งค่าต่าง ๆ

4.   คลิกเมาส์ที่   Browse   จะปรากฏหน้าต่างให้เลือก

5. คลิกที่ปุ่ม  OK  เฟรมจะเปลี่ยนเป็นรูปภาพตามที่เราเลือก


1.   เลือกเฟรมเซ็ตที่ต้องการ  โดยคลิกที่เส้นแบ่งเฟรมเพื่อเลือกเฟรมเซ็ตของชุดเฟรมนั้น ๆ
2.   จะปรากฏพาเนล  Properties   ของเฟรมเซ็ตขึ้นมาให้ทำการปรับตั้งค่า

การปรับขนาดเฟรม

  1. คลิกที่แท็บที่อยู่ขอบด้านซ้ายเพื่อเลือกปรับขนาดในแนว    Row   หรือ คลิกที่แท็บที่อยู่ขอบด้านบนเพื่อ
    เลือกปรับขนาดในแนว    Column

2.    กำหนดขนาดของเฟรมโดยใส่ค่าในช่อง   Value

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

2.   ในส่วนของ   Link  ในพาเนล  Properties  ให้กำหนดไฟล์ที่จะเชื่อมโยงไปถึง

3. คลิกที่ เพื่อเลือกไฟล์ที่ต้องการเชื่อมโยงไปถึง

4.   เมื่อเลือกข้อความหรือรูปภาพเป็นจุดเชื่อมโยงเรียบร้อยแล้ว จะปรากฏดังนี้

5.   เลือกส่วนของ  Target  เพื่อเลือกเฟรมที่จะใช้แสดงเว็บเพจนั้น

โดยเลือกรูปแบบดังนี้
_bank                   เปิดไฟล์ในหน้าต่างใหม่
_parent                                เปิดไฟล์ในเฟรมหลักหรือหน้าหลักที่จุดเชื่อมโยงอยู่
_self                       เปิดไฟล์ในเฟรมหรือหน้าต่างเดียวกับจุดเชื่อมโยงอยู่
_top                       เปิดไฟล์นั้นในแบบเต็มจอโดยยกเลิกเฟรมทั้งหมด
เราสามารถกำหนด  Target   เพิ่มได้โดยวิธีการดังนี้
1.    คลิกเลือกเฟรมให้มีจุดไข่ปลาล้อมรอบ  

2.   กำหนดชื่อในช่อง   Frame  name 

3.   ในส่วนของ   Target  จะเพิ่มชื่อ  Frame  name  เข้ามาให้เลือกกำหนด  เป้าหมายมากขึ้นตามที่เราต้องการ

4.   ให้เลือก  Target  ที่ต้องการแล้วกดปุ่ม  F12  เพื่อทดสอบดูผลในหน้า Preview  in  Browser 

เมื่ออยู่ในมุมมอง  Design  ของหน้าต่าง  Document  การคลิกภายในเฟรมเพื่อวางตัวบอกตำแหน่งการพิมพ์จะไม่ถือว่าเป็นการเลือกเฟรม ซึ่งการเลือกเฟรมจะต้องกระทำดังนี้
กดปุ่ม  Alt   ค้างไว้แล้วคลิกภายในเฟรมเพื่อเลือกนั้น หรือ คลิกที่เส้นแบ่งเฟรมเพื่อเลือกเฟรมเซ็ต
เฟรมที่ถูกเลือกจะแสดงเส้นขอบเฟรมนั้นด้วยเส้นไข่ปลา    และเมื่อเลือกเฟรมเซ็ต เส้นแบ่งเฟรมทุกเส้นก็จะแสดงด้วยเส้นไข่ปลา  ส่วน Panel ของ Properties ก็จะแสดงค่าต่างๆ ของเฟรมและเฟรมเซ็ตตามที่เราเลือกเพื่อให้เราสามารถปรับค่าต่างๆ ได้โดยสะดวก

การสร้างเนื้อหาลงในเฟรม
ในการสร้างเนื้อหาลงในเฟรมนั้น  เราอาจทำการสร้างขึ้นใหม่โดยการพิมพ์เนื้อหาลงไปโดยตรงแล้วทำการบันทึกเฟรมที่สร้างเนื้อหาลง   หรือเปิดใช้ไฟล์เว็บเพจที่เราสร้างไว้แล้วก็ได้
การเปิดใช้ไฟล์เว็บเพจที่สร้างไว้แล้วจะกระทำได้โดย
1.    คลิกเมาส์ภายในเฟรมที่ต้องการนำไฟล์เว็บเพจที่สร้างไว้แล้วมาใช้งาน
2.    เลือกเมนูคำสั่ง  File   เลือกคำสั่ง   Open  in  Frame
3.    เลือกไฟล์เว็บเพจที่ต้องการ   จากนั้นคลิกที่ปุ่ม  OK 

การบันทึกเฟรมและเฟรมเซ็ต
การบันทึกเฟรมเซ็ต
1. คลิกที่เส้นแบ่งขอบของเฟรมเพื่อเป็นการเลือกเฟรมเซ็ต จะสังเกตว่ามีเส้นไขปลาอยู่ที่ เส้นขอบของทุกเฟรม
2. เลือกเมนูคำสั่ง File เลือกคำสั่ง Save Frameset หรือ Save Frameset As

3. จะปรากฏหน้าต่าง Save as ให้เราตั้งชื่อ Frame set ในช่อง File nameจากนั้นคลิกที่ปุ่ม Save

การบันทึกเนื้อหาภายในเฟรม
1. คลิกเลือกเฟรมที่ต้องการ
2. เลือกเมนูคำสั่ง File เลือกคำสั่ง Save Frame หรือ Save Frame As

3. จะปรากฏหน้าต่าง Save As ให้เราตั้งชื่อ Frame ในช่อง File Name จากนั้นคลิกที่ปุ่ม Save

 


<< Go Back