รายวิชา คอมพิวเตอร์ (การเขียนเว็บไซต์โดยใช้โปรแกรม Deramweaver  MX)

เรื่อง การแบ่งพิ้นที่เว็บเพจด้วยการสร้าง Frame

1. การแบ่ง Frame ในเว็บเพจ
        Frame คือการแบ่งหน้าต่างของ Browser ออกเป็นส่วนต่างๆ โดยแต่ละส่วนโหลดหน้าเวบได้อิสระ และสามารถสั่งลิ้งค์จากทางด้านซ้ายให้มาเปิดทางด้านขวาได้ด้วย
Frame มีหลักในการทำงาน คือโหลดหน้าเวบเพจมากกว่าสองหน้าขึ้นไปมาใส่ในพื้นที่แต่ละส่วนที่แยกไว้ในหน้าเดียว นิยมใช้แยกส่วน หน้ารวมลิ้งค์ออกจากหน้าเนื้อหาเมื่อเวลาเรียกเนื้อหา ขึ้นมาก่อนก็จะโหลดอยู่พื้นที่เดียวเท่านั้น (ซึ่งหน้าเนื้อหาจะมีแต่ข้อความไม่ได้ทำการตกแต่งอะไรมาก เป็นการง่ายในการออกแบบช่วยประหยัดเวลาในการทำงาน กล่าวคือหากทำเวบเพจ 10 หน้าแต่จำเป็นต้องใช้ โลโก้เดียวกันใช้ลิงค์ร่วมกัน แต่แตกต่างกันตรงเนื้อหาเพียงอย่างเดียวเพื่อเป็นการง่ายจึงแบ่งออกเป็นเฟรมและลิ้งค์เปลี่ยนเฉพาะเนื้อหาเท่านั้นและยังสามารถโหลดได้เร็วกว่าการเปิดหน้าใหม่)
การสร้างเฟรม
        ก่อนสร้างเฟรมเราควรสร้างหน้าเว็บเพจที่จะนำมาประกอบเป็นแต่ละส่วนของเฟรมก่อน การทำเช่นนี้จะช่วยให้เราทราบขนาดที่ต้องกำหนดให้แต่ละส่วนของเฟรม
        Frame แต่ละส่วนก็คือ html แต่ละหน้า เพราะฉะนั้นตัวอย่างนี้เท่ากับเราต้องสร้าง html 4 หน้าคือ
Frame1 Frame 2 Frame 3 และหน้าที่รวม Frame 1,2,3 เข้าด้วยกัน
หลังจากเลือกแบบเฟรมที่ต้องการได้แล้ว แต่ในช่วงการทดลองใช้แนะนำให้เลือกแบบสองเฟรมก่อนเพื่อเป็นการเข้าใจง่าย ขั้นตอนการสร้างเฟรมดังนี้
                 - คลิกเลือกแบบ 2 เฟรม
                 - ในหน้า Document จะเกิดการแบ่งเฟรมให้เลยดังภาพจะแยกเป็นเฟรมซ้ายและขวา
2. การกำหนดคุณสมบัติของเฟรม
        เราสามารถปรับขนาดความกว้างของเฟรมได้โดยการปรับค่าที่ Properties inspector
( Properties เป็นคุณสมบัติของเฟรมสามารถเรียกได้โดยการคลิกที่เส้นแบ่งระหว่างเฟรม )
        Frames Properties
                 Borders : เลือกว่าจะให้มีขอบของเฟรมหรือไม่ ในที่นี้ไม่ต้องให้มีขอบเลือก No
                 Border Width : ความกว้างของขอบถ้ากำหนดให้ไม่มีขอบแล้วให้กำหนดความกว้างของขอบเป็น 0 ด้วยเพื่อความต่อเนื่องของเฟรม
                 Border Color : กำหนดสีของขอบเฟรม
                 Column : สามารถกำหนดความกว้างของเฟรมโดยการคลิกที่ Row Col Selection ด้านขวาคลิกเลือกให้เฟรมที่เราต้องการปรับ Active แต่ที่นิยมปรับกันเฉพาะเฟรมใดเฟรมหนึ่งเพื่ออีกเฟรมจะเป็นส่วนของหน้าจอที่เหลือทั้งหมดเพราะขนาดหน้าจอของแต่ละคนไม่เท่ากัน
3. การแทรกเว็บเพจลงในเฟรม
        
 
                1. เปิดหน้าต่างเฟรมขึ้นมาโดยเลือกคำสั่ง Window>Outhers>Frames
                2. คลิกเมาส์เลือกส่วนของเฟรมที่ต้องการจะแทรกเว็บเพจจากหน้าต่างเฟรม
                3. คลิกที่ปุ่ม Browse เพื่อเลือกไฟล์เว็บเพจที่ต้องการจะแทรก
                4. Double Click เลือกไฟล์ที่ต้องการแทรกเข้ามา จะปรากฏหน้าเว็บเพจขึ้นมาในเฟรมที่เราเลือกไว้
 
4. การบันทึกเฟรมเพจ
        เป็นขั้นตอนที่สำคัญในการสร้างเฟรมเลยก็ว่าได้เพราะอาจจะเกิดความสับสนได้เมื่อเราออกแบบเว็บเพจเป็นเฟรมเรียบร้อยแล้ววิธีการเซฟให้ปฏิบัติดังนี้
                1. เซฟเฟรมหลักก่อน โดยเลือกส่วนเป็นเฟรมทั้งหมดก่อน ให้คลิกเมาส์ที่ขอบของเฟรมเพื่อเลือกเฟรมหลัก เลือกคำสั่ง File>Save Frameset As
                2. เซฟเฟรมย่อยแต่ละเฟรม โดยการคลิกที่พื้นที่ว่างในแต่ละเฟรมย่อยจะเป็นการเลือกหน้าเว็บ
เพจนั้นและ เลือกคำสั่ง File>Save Frame As เพื่อเซฟไฟล์เว็บเพจเหล่านั้น โดยการบันทึกวิธีนี้จะทำได้เพียงครั้งละ 1 เฟรมเท่านั้น หากมีหลายเฟรมจะต้องสั่งบันทึกที่ละเฟรมจนครบทุกเฟรม
ในกรณีที่เราต้องการเซฟไฟล์ทั้งหมดที่ประกอบกันเป็นเฟรมเซ็ตนี้ ให้เลือกคำสั่ง File>Save
All โดยวิธีนี้จะทำการบันทึกทั้งหมดทั้งเฟรมหลักและเฟรมย่อย
        การ Save เฟรมยังสามารถที่จะเลือก Save นอกเหนือจากที่ได้กล่าวมาแล้วคือ
                 Save Frameset เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ต
                 Save Frameset As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมเซ็ตเป็นอีกไฟล์หนึ่ง ( โดยใช้ชื่อไฟล์อื่น )
                 Save เมื่อต้องการเซฟเฉพาะเฟรมใดเฟรมหนึ่ง ( ต้องคลิกให้เฟรมนั้นทำงาน )
                 Save As เมื่อต้องการเซฟเฉพาะไฟล์เฟรมใดเฟรมหนึ่ง เป็นอีกไฟล์หนึ่ง (เปลี่ยนชื่อใหม่ )
                 Save All เมื่อต้องการเซฟไฟล์ทั้งหมด ทุกไฟล์พร้อมกัน โดยไม่ต้องป้อนชื่อใหม่ (แต่ต้องเคยเซฟมาก่อนแล้ว