หน่วยการเรียนรู้ที่ 8 การออกแบบเว็บเพจด้วยเฟรม

ลักษณะของเฟรม

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

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

           2. เฟรมย่อย (Frame) เป็นกลุ่มแสดงเนื้อหาจริง ๆ ของเว็บ ซึ่งเป็นหัวข้อย่อยของเฟรมหลัก

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

            การจัดการรูปแบบของเฟรม โดยสร้างกรอบเฟรมบนหน้าเว็บขึ้นมาก่อน แล้วลากแบ่งเฟรมต่าง ๆ ได้ตามต้องการ มีวิธีการดังนี้

               1. คลิกที่ Visual Aids

               2. เลือก Frame Borders (เครื่องหมายถูก อยู่ด้านหน้า Frame Borders)

               3. จะปรากฏขอบเฟรมบนหน้าเว็บเพจ

               4. คลิกที่เมนู Window

               5. เลือก Frames

               6. จะปรากฎหน้าต่าง พาเนล Frames เพื่อใช้ในการจัดการเฟรม

               7. แบ่งหน้าเว็บเพจออกเป็นเฟรมย่อย โดยการเลื่อนเมาส์ไปที่เส้นขอบของเฟรมด้านบน คลิกและลากเมาส์เพื่อสร้างเฟรมเซต (แนวนอน)

               8. คลิกเลือกเฟรมที่ต้องการ (กรณีนี้ แบ่งเฟรมย่อยออกเป็นอีก 2 เฟรม)

               9. เลื่อนเมาส์ไปที่เส้นขอบของเฟรมด้านซ้ายมือ คลิกและลากเมาส์เพื่อสร้างเฟรมเซต (แนวตั้ง)

 การปรับแต่งเฟรม

            เมื่อสร้างเฟรมไว้เรียบร้อยแล้ว หากต้องการปรับแต่งคุณสมบัติของเฟรม มีวิธีการดังนี้

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

            2. การเพิ่ม/ลบเฟรม

                - การเพิ่มเฟรม โดยคลิกที่เส้นขอบเฟรมด้านบน ด้านล่าง ด้านซ้าย หรือด้านขวา แล้วลากเมาส์มายังตำแหน่งที่ต้องการ

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

การกำหนดคุณสมบัติของเฟรม

              การปรับแต่งเฟรมจาก Properties Inspector จะมีอยู่ 2 ลักษณะ คือ กรอบเฟรมหลักและกรอบเฟรมย่อย มีวิธีการดังนี้

            1. คลิกพาเนล Frames ที่ กรอบเฟรมหลัก (ถ้าถูกซ่อน ให้คลิกที่เมนู Window แล้วเลือก Frames)

                  - Borders : กำหนดให้ซ่อนหรือแสดงเส้นขอบเฟรม

                  - Border width : ความหนาของเส้นขอบเฟรม

                  - Border color : สีของเส้นขอบเฟรม

                  - Row (or Row) : ความกว้างของแถวหรือความกว้างของคอลัมน์

              2. คลิกพาเนล Frames ที่ กรอบเฟรมย่อย

                  - Frame name : ชื่อเฟรม (ควรตั้งชื่อเฟรมให้เรียบร้อย เพราะจะมีผลในเรื่องการเชื่อมโยงระหว่างเฟรม)

                  - Src : เว็บเพจที่ใช้แสดงในเฟรม

                  - Scroll : กำหนดการแสดงแถบเลื่อน (Scroll bar) ในเฟรมย่อย

                  - Margin width : ระยะห่างระหว่างเนื้อหากับขอบเฟรมด้านซ้าย

                  - Margin height : ระยะห่างระหว่างเนื้อหากับขอบเฟรมด้านบน

                  - No resize : กำหนดไม่ให้ใช้เมาส์ปรับขนาดเฟรมได้

                  - Borders : กำหนดให้ซ่อนหรือแสดงเส้นขอบเฟรมย่อย

                  - Border color : สีของเส้นขอบเฟรม

 การแทรกเนื้อหาในเฟรม

          การใส่เนื้อหาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ การสร้างหน้าเว็บใหม่ลงในเฟรม และการนำเว็บเพจที่สร้างไว้แล้วมาลงในเฟรม มีวิธีการดังนี้

          - การสร้างหน้าเว็บใหม่ลงในเฟรม

            1. คลิกเฟรมที่เราต้องการ

            2. แทรกข้อความหรือรูปภาพ ลงในเฟรมตามต้องการ จะปรากฏดังรูป

          - การนำเว็บเพจที่สร้างไว้แล้วมาลงในเฟรม

ควรสร้างเนื้อหาของเว็บเพจให้เสร็จก่อน (ไฟล์ html) แล้วจึงนำมาประกอบเว็บเพจในภายหลัง มีวิธีการดังนี้

             1. คลิกเฟรมที่เราต้องการแทรกเว็บเพจ

              2. คลิกพาเนล Frames ที่กรอบเฟรมย่อย

              3. ช่อง Src คลิกที่ปุ่ม Browse

            4. จะปรากฏหน้าต่าง Select HTML File ให้เลือกโฟลเดอร์ที่เก็บไฟล์เว็บเพจ

            5. เลือกไฟล์ที่ต้องการ

            6. คลิกที่ปุ่ม OK

            7. จะปรากฏเว็บเพจในเฟรม ดังรูป

 การเชื่อมโยงระหว่างเฟรม

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

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

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

            3. จะปรากฏหน้าต่าง Select File ให้เลือกโฟลเดอร์ที่เก็บไฟล์

            4. เลือกไฟล์ที่ต้องการ

            5. คลิกที่ปุ่ม OK

            6. ช่อง Target กำหนดลักษณะการแสดงผลของเว็บเพจ

                   - top เป็นการเปิดหน้าเว็บเพจใหม่ ในเฟรมชื่อ top

                   - left เป็นการเปิดหน้าเว็บเพจใหม่ ในเฟรมชื่อ left

                   - body เป็นการเปิดหน้าเว็บเพจใหม่ ในเฟรมชื่อ body

            7. ทดสอบการเชื่อมโยง โดยกดปุ่ม F12 เพื่อดูการแสดงผลจากเว็บเบราว์เซอร์

 การบันทึกเฟรม

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

           1. คลิกที่หน้าเว็บในแต่ละเฟรม

            2. จะแสดงชื่อของไฟล์เว็บเพจ

            3. คลิกที่เมนู File แล้วเลือก Save Frame As... (เพื่อบันทึกให้ครบทุกเว็บเพจในแต่ละเฟรม)