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