 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
 |
|||||
|
บที่ 8 การใช้งานเฟรมในเว็บไซต์
การจัดแบ่งเว็บเพจด้วยเฟรมเซต
1. การสร้างเฟรมเซต
เฟรมเซต (Frameset) คือ การแบ่งหน้าเว็บเพจออกเป็นพื้นที่หลาย ๆ ส่วน โดยแต่ละส่วนที่แยกออกไปจะเป็นอิสระไม่ขึ้นต่อกัน ตามปกตินิยมใช้เฟรมเพื่อแบ่งเนื้อหาบนหน้าจอเป็น 2 กลุ่ม เพื่อใช้แสดงหรือเปรียบเทียบข้อมูล
เฟรมจะมี 2 รูปแบบ คือ เฟรมหลัก (Frameset) และเฟรมย่อย (Frame)
เฟรมเซต (Frameset) คือ การแบ่งหน้าเว็บเพจออกเป็นพื้นที่หลาย ๆ ส่วน โดยแต่ละส่วนที่แยกออกไปจะเป็นอิสระไม่ขึ้นต่อกัน ตามปกตินิยมใช้เฟรมเพื่อแบ่งเนื้อหาบนหน้าจอเป็น 2 กลุ่ม เพื่อใช้แสดงหรือเปรียบเทียบข้อมูล
เฟรมจะมี 2 รูปแบบ คือ เฟรมหลัก (Frameset) และเฟรมย่อย (Frame)
- เฟรมหลัก (Frameset) คือ หน้าต่างเฟรมใหญ่ที่สุด ทำหน้าที่คอยควบคุมเฟรมย่อยอีกทีหนึ่ง โดยกำหนดว่าในแต่ละส่วนชื่ออะไร มีขนาดและคุณสมบัติอย่างไร เริ่มต้นที่ตำแหน่งใด เป็นต้น
- เฟรมย่อย (Frame) หน้าต่างเฟรมที่ทำหน้าที่กำหนดชื่อของแต่ละเฟรม และกำหนดไฟล์เว็บเพจภายในเฟรมได้
การสร้างเฟรมเซต ทำได้ 2 วิธี ดังนี้
- การใช้แบบสำเร็จ เป็นเพรมเซตที่โปรแกรมได้ออกแบบไว้เป็นแบบสำเร็จรูป สามารถ
เลือกใช้ได้ง่าย ๆ โดยเมื่อเปิดโปรแกรมขึ้นมาให้คลิกเลือกคำสั่ง Framesets บนกลุ่มคำสั่ง Create From Samples
จะมีเฟรมเซตให้เลือก คลิกเลือกแบบที่ต้องการ แล้วคลิกปุ่ม Create
จะมีเฟรมเซตให้เลือก คลิกเลือกแบบที่ต้องการ แล้วคลิกปุ่ม Create
การใช้แถบเครื่องมือให้เลือกปุ่ม บนกลุ่มเครื่องมือ Layout จะมีรูปแบบเฟรมเซตย่อย ๆ
คลิกเลือกแบบที่ต้องการ
คลิกเลือกแบบที่ต้องการ
- การออกแบบเฟรมเซตเอง มีวิธีทำโดยคลิกที่เมนู View >> Visual Aids >> Frame >>
Borders ที่เว็บเพจจะปรากฏเส้นขอบของเฟรมเซตขึ้นมา เลื่อนเมาส์ไปที่เส้นขอบของเฟรมเซต คลิกและลากเมาส์เพื่อสร้างเฟรมเซต
ถ้าต้องการจะดูรายละเอียดของเฟรมทั้งหมดให้คลิกที่คำสั่ง Window >> Frames เพื่อ เรียกพาเนล Frames ด้านซ้ายมือ
2. การจัดการกับเฟรมเซต
หลังจากที่สร้างเฟรมเซตไว้เรียบร้อยแล้ว หากยังไม่ตรงตามที่ต้องการก็สามารถจัดการกับ
เฟรมเซต ดังนี้
การปรับขนาดเฟรม
ถ้าเฟรมมีขนาดใหญ่หรือเล็กเกินไปสามารถปรับขนาดย่อหรือขยายได้ ทั้งแนวตั้งและแนวนอน โดยคลิกที่เส้นขอบเฟรมและลากเมาส์
หลังจากที่สร้างเฟรมเซตไว้เรียบร้อยแล้ว หากยังไม่ตรงตามที่ต้องการก็สามารถจัดการกับ
เฟรมเซต ดังนี้
การปรับขนาดเฟรม
ถ้าเฟรมมีขนาดใหญ่หรือเล็กเกินไปสามารถปรับขนาดย่อหรือขยายได้ ทั้งแนวตั้งและแนวนอน โดยคลิกที่เส้นขอบเฟรมและลากเมาส์
การเพิ่มเฟรม
ถ้าเฟรมที่จำนวนไม่เพียงพอสามารถเพิ่มจำนวนได้ โดยเลือกคำสั่ง Modify >> Frame set แล้วเลือกลักษณะการแบ่งเฟรมเซต 4 ลักษณะ คือ ซ้าย ขวา บน และล่าง ถ้าเพิ่มเฟรมด้วยเส้นขอบเฟรมให้กดแป้น < Alt > กับลากเมาส์ที่เส้นขอบเฟรม
ถ้าเฟรมที่จำนวนไม่เพียงพอสามารถเพิ่มจำนวนได้ โดยเลือกคำสั่ง Modify >> Frame set แล้วเลือกลักษณะการแบ่งเฟรมเซต 4 ลักษณะ คือ ซ้าย ขวา บน และล่าง ถ้าเพิ่มเฟรมด้วยเส้นขอบเฟรมให้กดแป้น < Alt > กับลากเมาส์ที่เส้นขอบเฟรม
การลบเฟรม
การลบเฟรมที่ไม่ต้องการ ให้คลิกที่เส้นขอบเฟรมที่ต้องการลบ แล้วลากออกไปที่ขอบเฟรมด้านซ้าย ขวา บน หรือล่างก็ได้ ถ้าไม่ได้บนทึกเฟรมจะมีกรอบให้บันทึก เฟรมก็จะหายไป
การลบเฟรมที่ไม่ต้องการ ให้คลิกที่เส้นขอบเฟรมที่ต้องการลบ แล้วลากออกไปที่ขอบเฟรมด้านซ้าย ขวา บน หรือล่างก็ได้ ถ้าไม่ได้บนทึกเฟรมจะมีกรอบให้บันทึก เฟรมก็จะหายไป
3. การแก้ไขรายละเอียดเฟรม
เฟรมแต่ละเฟรมเป็นไฟล์ย่อย ๆ หนึ่งไฟล์ การแก้ไขรายละเอียดภายในเฟรมทำได้ 2 ลักษณะ คือ เฟรมหลัก และเฟรมนย่อย
การแก้ไขเฟรมหลัก
เฟรมแต่ละเฟรมเป็นไฟล์ย่อย ๆ หนึ่งไฟล์ การแก้ไขรายละเอียดภายในเฟรมทำได้ 2 ลักษณะ คือ เฟรมหลัก และเฟรมนย่อย
การแก้ไขเฟรมหลัก
- คลิกเลือกเฟรมหลัก ถ้ามีหลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็นเฟรมหลัก ให้เปิดพาเนล Frames และคลิกเลือกเฟรมหลัก
- เลือกปรับรายละเอียดของเฟรมหลักที่ Properties Inspector
Borders Width กำหนดความกว้างของเส้นขอบเฟรม ค่า 0 ไม่มีเส้น
Border Color กำหนดสีของเส้นขอบเฟรม
Column กำหนดขนาดของคอลัมน์ เติมตัวเลขลงไปในช่อง Value และ
เลือกหน่วยวัด เช่น pixels
การแก้ไขเฟรมย่อย
เฟรมย่อยเป็นเฟรมทุกเฟรมที่บรรจุในเฟรมหลัก มีชื่อเรียกต่าง ๆ กัน เช่น topframe mainframe ฯลฯ ซึ่งสามารถแก้ไขรายละเอียดได้ ดังนี้
เฟรมย่อยเป็นเฟรมทุกเฟรมที่บรรจุในเฟรมหลัก มีชื่อเรียกต่าง ๆ กัน เช่น 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 เป็นเนื้อหา รายละเอียดสินค้า และส่วนด้านซ้ายเป็นลิงค์ต่าง ๆ จะได้เว็บเพจลักษณะดังนี้
เฟรมเซตเปรียบเสมือนไฟล์งานหรือเว็บเพจแต่ละหน้าที่ซ้อนกันอยู่ในหน้าเว็บเพจเดียวกัน ดังนั้น การสร้างเนื้อหาหรือออกแบบแต่ละเฟรมจึงเป็นอิสระจากกัน สามารถพิมพ์ข้อความ แทรกภาพ ตาราง และตกแต่งเฟรมได้โดยไม่กระทบต่อเฟรมอื่น
การใส่เนื้อหาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ สร้างเนื้อหาลงในเฟรมใหม่ และนำเนื้อหาที่สร้างไว้แล้วมาใส่เฟรม ดังนี้
สร้างเนื้อหาลงในเฟรมเซตใหม่
เมื่อได้เลือกเฟรมเซตหรือสร้างเฟรมเซตเสร็จแล้ว เช่น แบบ Fixed Top, Nested Left โดยกำหนดให้ Topframe เป็นส่วนหัวของบริษัท ประกอบด้วยชื่อและโลโก้ ส่วน Mainframe เป็นเนื้อหา รายละเอียดสินค้า และส่วนด้านซ้ายเป็นลิงค์ต่าง ๆ จะได้เว็บเพจลักษณะดังนี้
นำเนื้อหาที่สร้างไว้ใส่เฟรมเซต
เป็นการสร้างเนื้อหาย่อยแต่ละเฟรมก่อน แล้วจึงนำมาประกอบเว็บเพจภายหลัง มีวิธีทำ ดังนี้
เป็นการสร้างเนื้อหาย่อยแต่ละเฟรมก่อน แล้วจึงนำมาประกอบเว็บเพจภายหลัง มีวิธีทำ ดังนี้
- สร้างเฟรมงานต่าง ๆ ไว้จนครบ แล้วบันทึกข้อมูล
- สร้างเฟรมเซตตามจำนวนเฟรม แล้วกดแป้น < Shift > + < F2 > เพื่อเรียกพาเนล Frames
- คลิกที่ไอคอน ในช่อง Src จะได้หน้าต่าง Select HTML file เลือกเฟรมเซตที่ต้องการ
- ทดลองแสดงผลเฟรมเซตตามที่ออกแบบไว้บนเบราเซอร์
5. การบันทึกเฟรม
การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกต่างกัน ดังนี้
การบันทึกเฟรมหลัก
ในการบันทึกเฟรมหลัก (Frameset) มีขั้นตอนดังนี้
การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกต่างกัน ดังนี้
การบันทึกเฟรมหลัก
ในการบันทึกเฟรมหลัก (Frameset) มีขั้นตอนดังนี้
- คลิกที่โครงเฟรมหลัก ในหน้าต่าง Frame Panel
- คลิกเมนู File >> Save Frameset หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
- เลือกสถานที่เก็บไฟล์จากช่อง Save in
- พิมพ์ชื่อไฟล์ลงในช่อง File Name
- คลิกปุ่ม Save เพื่อบันทึกเฟรม
การบันทึกเฟรมย่อย
การบันทึกเฟรมย่อย มีขั้นตอนดังนี้
การบันทึกเฟรมย่อย มีขั้นตอนดังนี้
- คลิกที่โครงเฟรมย่อย ในหน้าต่าง Frame Panel
- คลิกเมนู File >> Save Frame หรือกดปุ่ม < Ctrl + S > เพื่อบันทึกโครงเฟรม
- เลือกสถานที่เก็บไฟล์จากช่อง Save in
- พิมพ์ชื่อไฟล์ลงในช่อง File Name
6. การเชื่อมโยงเฟรมเซต
การเชื่อมโยงเฟรมเซตมีประโยชน์มาก เพราะช่วยเลื่อนหน้าเว็บเพจให้แสดงผลข้อมูลได้ง่าย
เช่น คลิกที่แท็บสินค้าใหม่ เฟรมเซตด้านขวามือจะแสดงผลสินค้าใหม่ให้ทันที โดยมีวิธีการเชื่อมโยง ดังนี้
การเชื่อมโยงเฟรมเซตมีประโยชน์มาก เพราะช่วยเลื่อนหน้าเว็บเพจให้แสดงผลข้อมูลได้ง่าย
เช่น คลิกที่แท็บสินค้าใหม่ เฟรมเซตด้านขวามือจะแสดงผลสินค้าใหม่ให้ทันที โดยมีวิธีการเชื่อมโยง ดังนี้
- เลือกข้อความที่ต้องการจะสร้างลิงค์
- คลิกปุ่ม
ในช่อง Link ของ Properties Inspector - เลือกเฟรมที่ต้องการจะเป็นเป้าหมายการลิงค์ แล้วคลิก OK
- กำหนดคุณสมบัติการแสดงผลจากช่อง Target เช่น เลือก Mainframe เพื่อให้ไฟล์ลิงค์ไว้มาแทรกแทนเฟรม Mainframe
- บันทึกไฟล์ และทดลองแสดงผลด้วยเบราเซอร์ < F12 >
 |
 |
 |
 |
 |
