เรื่อง การสร้างเฟรม

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

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

1. การสร้างเฟรม
การสร้างเฟรมเซต ทำได้ 2 วิธี  ดังนี้

1.1 การใช้แบบสำเร็จ เป็นเฟรมเซตที่โปรแกรมได้ออกแบบไว้เป็นแบบสำเร็จรูป สามารถเลือกใช้ได้โดยเมื่อเปิดโปรแกรมขึ้นมาให้คลิกเลือกคำสั่ง Framesets บนกลุ่มคำสั่ง  Create From Samples จะมีเฟรมเซตให้เลือก คลิกเลือกแบบที่ต้องการ แล้วคลิกปุ่ม Create

การใช้แถบเครื่องมือให้เลือกปุ่ม บนกลุ่มเครื่องมือ Layout จะมีรูปแบบเฟรมเซตย่อย ๆ คลิกเลือกแบบที่ต้องการ

1.2 การออกแบบเฟรมเซตเอง  มีวิธีทำโดยคลิกที่เมนู View > Visual Aids > Frame > Borders

ที่เว็บเพจจะปรากฏเส้นขอบของเฟรมเซตขึ้นมา เลื่อนเมาส์ไปที่เส้นขอบของเฟรมเซต คลิกและลากเมาส์เพื่อสร้างเฟรมเซต

ถ้าต้องการจะดูรายละเอียดของเฟรมทั้งหมดให้คลิกที่คำสั่ง Window > Frames

เพื่อเรียกพาเนล Frames ด้านซ้ายมือ

2. การจัดการกับเฟรมเซต
หลังจากที่สร้างเฟรมเซตไว้เรียบร้อยแล้ว หากยังไม่ตรงตามที่ต้องการก็สามารถจัดการกับเฟรมเซต ดังนี้
              การปรับขนาดเฟรม
ถ้าเฟรมมีขนาดใหญ่หรือเล็กเกินไปสามารถปรับขนาดย่อหรือขยายได้ ทั้งแนวตั้งและแนวนอน โดยคลิกที่เส้นขอบเฟรมและลากเมาส์
              การเพิ่มเฟรม
ถ้าเฟรมที่จำนวนไม่เพียงพอสามารถเพิ่มจำนวนได้ โดยเลือกคำสั่ง Modify > Frame set แล้วเลือกลักษณะการแบ่งเฟรมเซต 4  ลักษณะ คือ ซ้าย ขวา บน และล่าง ถ้าเพิ่มเฟรมด้วยเส้นขอบเฟรม ให้กดแป้น < Alt > กับลากเมาส์ที่เส้นขอบเฟรม
              การลบเฟรม
การลบเฟรมที่ไม่ต้องการ ให้คลิกที่เส้นขอบเฟรมที่ต้องการลบ แล้วลากออกไปที่ขอบเฟรมด้านซ้าย ขวา บน หรือล่างก็ได้ ถ้าไม่ได้บันทึกเฟรมจะมีกรอบให้บันทึก เฟรมก็จะหายไป

3. การแก้ไขรายละเอียดเฟรม
เฟรมแต่ละเฟรมเป็นไฟล์ย่อย ๆ หนึ่งไฟล์ การแก้ไขรายละเอียดภายในเฟรมทำได้ 2 ลักษณะ คือ เฟรมหลัก และเฟรมนย่อย
              การแก้ไขเฟรมหลัก
1. คลิกเลือกเฟรมหลัก ถ้ามีหลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็นเฟรมหลัก ให้เปิดพาเนล Frames และคลิกเลือกเฟรมหลัก
2. เลือกปรับรายละเอียดของเฟรมหลักที่ Properties Inspector มีรายละเอียดังนี้

2.1 Borders กำหนดให้แสดงหรือไม่แสดงเส้นขอบ
2.2 Borders Width กำหนดความกว้างของเส้นขอบเฟรม ค่า 0 ไม่มีเส้น
2.3 Border Color กำหนดสีของเส้นขอบเฟรม
2.4 Column กำหนดขนาดของคอลัมน์ เติมตัวเลขลงไปในช่อง Value และ
เลือกหน่วยวัด เช่น pixels

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

2.1 Frame name  ตั้งชื่อเฟรมย่อย  ควรตั้งให้สื่อถึงเฟรมหลัก
2.2 Src ตำแหน่งที่ใช้บันทึกเว็บเพจของเฟรมนี้
2.3 Borders แสดง / ซ่อน เส้นขอบ
2.4 Scroll แสดง / ซ่อน  แถบเลื่อนของเฟรมย่อย
2.5 No resize กำหนดให้ใช้เมาส์ลากเพื่อปรับขนาดเฟรมได้ หรือไม่ได้
2.6 Border color กำหนดสีของเฟรม
2.7 Margin width  กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (กว้าง)
2.8 Margin height กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (สูง)

4. การสร้างเนื้อหาในเฟรม
เฟรมเซตเปรียบเสมือนไฟล์งานหรือเว็บเพจแต่ละหน้าที่ซ้อนกันอยู่ในหน้าเว็บเพจเดียวกัน ดังนั้น การสร้างเนื้อหาหรือออกแบบแต่ละเฟรมจึงเป็นอิสระจากกัน สามารถพิมพ์ข้อความ แทรกภาพ  ตาราง  และตกแต่งเฟรมได้โดยไม่กระทบต่อเฟรมอื่น
การใส่เนื้อหาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ

1. สร้างเนื้อหาลงในเฟรมใหม่
2. นำเนื้อหาที่สร้างไว้แล้วมาใส่เฟรม

              การสร้างเนื้อหาลงในเฟรมเซตใหม่
เมื่อได้เลือกเฟรมเซตหรือสร้างเฟรมเซตเสร็จแล้ว เช่น  แบบ Fixed Top, Nested Left  โดยกำหนดให้ Topframe เป็นส่วนหัว ประกอบด้วยชื่อและโลโก้ ส่วน Mainframe เป็นเนื้อหา และส่วนด้านซ้ายเป็นลิงค์ต่าง ๆ

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

1. สร้างเฟรมงานต่าง ๆ ไว้จนครบ แล้วบันทึกข้อมูล
2. สร้างเฟรมเซตตามจำนวนเฟรม แล้วกดแป้น < Shift > + < F2 > เพื่อเรียกพาเนล Frames
3. คลิกที่ไอคอน Browse ในช่อง  Src จะได้หน้าต่าง  Select HTML file  เลือกเฟรมเซตที่ต้องการ
4. ทดลองแสดงผลเฟรมเซตตามที่ออกแบบไว้บนเบราเซอร์

5. การบันทึกเฟรม
การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกต่างกัน ดังนี้

              การบันทึกเฟรมหลัก
ในการบันทึกเฟรมหลัก (Frameset)  มีขั้นตอนดังนี้

1. คลิกที่โครงเฟรมหลัก ในหน้าต่าง Frame Panel
2. คลิกเมนู File > Save Frameset หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
3. เลือกตำแหน่งที่เก็บไฟล์จากช่อง  Save in
4. พิมพ์ชื่อไฟล์ลงในช่อง File Name
5. คลิกปุ่ม Save เพื่อบันทึกเฟรม


              การบันทึกเฟรมย่อย
การบันทึกเฟรมย่อย มีขั้นตอนดังนี้

1. คลิกที่โครงเฟรมย่อย ในหน้าต่าง Frame Panel
2. คลิกเมนู File > Save Frame หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
3. เลือกสถานที่เก็บไฟล์จากช่อง Save in
4. พิมพ์ชื่อไฟล์ลงในช่อง File Name
5. คลิกปุ่ม Save เพื่อบันทึกเฟรม


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

1. เลือกข้อความที่ต้องการจะสร้างลิงค์
2. คลิกปุ่ม Browse ในช่อง Link ของ Properties Inspector
3. เลือกเฟรมที่ต้องการจะเป็นเป้าหมายการลิงค์
4. คลิก OK
5. กำหนดคุณสมบัติการแสดงผลจากช่อง Target เช่น เลือก Mainframe เพื่อให้ไฟล์ลิงค์ไว้มาแทรกแทนเฟรม Mainframe
6. บันทึกไฟล์
7. ทดลองแสดงผลด้วยบราวเซอร์ กด F12