บที่ 8 การใช้งานเฟรมในเว็บไซต์

การจัดแบ่งเว็บเพจด้วยเฟรมเซต

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

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

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

• การใช้แบบสำเร็จ  เป็นเพรมเซตที่โปรแกรมได้ออกแบบไว้เป็นแบบสำเร็จรูป  สามารถ

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

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

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

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

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

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

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

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

3.  การแก้ไขรายละเอียดเฟรม
                เฟรมแต่ละเฟรมเป็นไฟล์ย่อย ๆ  หนึ่งไฟล์  การแก้ไขรายละเอียดภายในเฟรมทำได้ 2  ลักษณะ  คือ  เฟรมหลัก  และเฟรมนย่อย
การแก้ไขเฟรมหลัก

• คลิกเลือกเฟรมหลัก  ถ้ามีหลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็นเฟรมหลัก  ให้เปิดพาเนล  Frames  และคลิกเลือกเฟรมหลัก
  

• เลือกปรับรายละเอียดของเฟรมหลักที่  Properties Inspector

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

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

• คลิกเลือกเฟรมที่ต้องการจะแก้ไขที่พาเนล  Frames

• แก้ไขรายละเอียดเฟรมที่  Properties Inspector  ดังนี้

Frame name  ตั้งชื่อเฟรมย่อย  ควรตั้งให้สื่อถึงเฟรมหลัก

Src  ตำแหน่งที่ใช้บันทึกเว็บเพจของเฟรมนี้

Borders  แสดง / ซ่อน  เส้นขอบ

Scroll     แสดง / ซ่อน  แถบเลื่อนของเฟรมย่อย

No resize  กำหนดให้ใช้เมาส์ลากเพื่อปรับขนาดเฟรมได้ หรือไม่ได้

Border color กำหนดสีของเฟรม

Margin width  กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก  (กว้าง)

Margin height กำหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก  (สูง)

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

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

• 
  
• 
  
• สร้างเฟรมงานต่าง ๆ  ไว้จนครบ  แล้วบันทึกข้อมูล
  

• สร้างเฟรมเซตตามจำนวนเฟรม  แล้วกดแป้น  < Shift > + < F2 >  เพื่อเรียกพาเนล  Frames
• คลิกที่ไอคอน    ในช่อง  Src  จะได้หน้าต่าง  Select HTML file  เลือกเฟรมเซตที่ต้องการ
• ทดลองแสดงผลเฟรมเซตตามที่ออกแบบไว้บนเบราเซอร์

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

• คลิกที่โครงเฟรมหลัก  ในหน้าต่าง  Frame Panel
• คลิกเมนู  File >> Save Frameset  หรือกดปุ่ม  < Ctrl + S >  เพื่อบันทึกโครงเฟรม

• เลือกสถานที่เก็บไฟล์จากช่อง  Save in
• พิมพ์ชื่อไฟล์ลงในช่อง  File Name
• คลิกปุ่ม  Save  เพื่อบันทึกเฟรม

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

• คลิกที่โครงเฟรมย่อย  ในหน้าต่าง  Frame Panel
• คลิกเมนู  File >> Save Frame  หรือกดปุ่ม  < Ctrl + S >  เพื่อบันทึกโครงเฟรม

• เลือกสถานที่เก็บไฟล์จากช่อง  Save in
• พิมพ์ชื่อไฟล์ลงในช่อง  File Name

• คลิกปุ่ม  Save  เพื่อบันทึกเฟรม

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

• เลือกข้อความที่ต้องการจะสร้างลิงค์ 
• คลิกปุ่ม  ในช่อง  Link  ของ  Properties Inspector
• เลือกเฟรมที่ต้องการจะเป็นเป้าหมายการลิงค์  แล้วคลิก  OK
• กำหนดคุณสมบัติการแสดงผลจากช่อง  Target  เช่น  เลือก  Mainframe  เพื่อให้ไฟล์ลิงค์ไว้มาแทรกแทนเฟรม  Mainframe

• บันทึกไฟล์  และทดลองแสดงผลด้วยเบราเซอร์  < F12 >