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

   การใช้เฟรม เป็นการแบ่งหน้าจอเว็บออกเป็นส่วน ๆ แต่ละส่วนเป็นอิสระจากกัน แต่ละส่วนจะมีไฟล์เป็นของตนเอง และจะมีไฟล์อีก 1 ไฟล์ที่ทำหน้าที่กำหนด หรือควบคุมการแสดงของส่วนต่าง ๆ บนหน้าจอ
        การใช้เฟรมทำให้ไม่สามารถมองเห็นชื่อไฟล์ที่ใช้ในแต่ละเฟรม นักออกแบบเว็บระดับมืออาชีพจำนวนมาก ไม่ชอบการใช้เฟรม แต่มักนิยมออกแบบโดยการแบ่งส่วนต่าง ๆ ออกด้วยตาราง มากกว่าการใช้เฟรม อย่างไรก็ตาม การใช้เฟรมก็ยังมีประโยชน์ โดยเฉพาะถ้าต้องการให้ส่วนใดส่วนหนึ่งของหน้าจอคงอยู่ตลอดเวลา ไม่ต้องโหลดภาพ ข้อความใหม่ทุกครั้งที่มีการเปลี่ยนเนื้อหา
        ตัวอย่างข้างล่างนี้ แบ่งหน้าจอออกเป็น 2 เฟรม คือส่วนที่ 1 เป็น ส่วนหัวพร้อมทั้งมีเมนูอยู่ด้านล่าง และส่วนที่ 2 เป็นเนื้อหา จะสังเกตเห็นได้ว่า ส่วนที่สอง สามารถเลื่อนขึ้นลงได้เพราะมี Scroll bar แต่ส่วนที่เป็นหัวซึ่งมีภาพโลโก้ศูนย์ กศน ภาคกลาง และเมนู จะอยู่คงที่ ไม่เลื่อนขึ้นลง ทำให้สามารถมองเห็นโลโก้พร้อมทั้งเมนูสามารถคลิกไปยังกลุ่มงานต่าง ๆ ได้

เฟรม(frame) และ เฟรมเซท (frameset)

  1. เฟรม (frame) คือส่วนต่าง ๆ บนหน้าจอที่ถูกแบ่งออกไป แต่ละส่วนจะมีไฟล์เป็นของตนเอง
  2. เฟรมเซท (frameset) คือโปรแกรม HTML ที่ควบคุมการแบ่งหน้าจอ และเป็นตัวบอกว่าส่วนไหนใช้ไฟล์อะไร

        จากตัวอย่างข้างบน ประกอบด้วยไฟล์ ไฟล์ที่สำคัญ คือ

1. index.html เป็น frameset ใช้แบ่งหน้าจอออกเป็นสองส่วน คือส่วนหัว และ ส่วนเนื้อหา

2.top.htmlเป็นไฟล์ส่วนหัวส่วนนี้มีภาพกราฟฟิกที่เป็นชื่อศูนย์การศึกษานอกโรงเรียนภาคกลางและมีเมนูเพื่อจะลิงค์ไปยังกลุ่มงานต่างๆส่วนนี้จะยังคงแสดงอยู่บนหน้าจอเสมอไม่เกี่ยวข้องกับส่วนเนื้อหาหลักจึงทำให้ผู้ใช้มองเห็นชื่อหน่วยงานตลอดเวลา

3.crnfe.html เป็นไฟล์เนื้อหาหน้าแรก สามารถเลื่อนขึ้นลงได้

4.administration.html เป็นไฟล์ของกลุ่มงานอำนวยการ นอกจากนี้ ทุกลิงค์ที่มีเมนู จะต้องมีไฟล์มารองรับทุกเมนู สำหรับตัวอย่าง ที่จะทำในบทนี้ จะลิงค์เพียงกลุ่มงานอำนวยการเท่านั้น

การสร้างเฟรม ด้วย Dreamweaver
        เราจะสร้างเว็บโดยให้มีเฟรม 2 เฟรม เหมือนตัวอย่างข้างบน ดังนั้น ก่อนอื่นต้องสร้างไฟล์ HTML ที่จำเป็น จำนวน 3 ไฟล์

ไฟล์แรกใช้ชื่อว่า top.html สำหรับเป็นส่วนหัว ประกอบด้วยภาพกราฟิกขนาด 760 X 70 pixel และมีเมนูชื่อกลุ่มงาน ดังนี้

[ หน้าแรก | กลุ่มอำนวยการ | กลุ่มส่งเสริมปฏิบัติการ | กลุ่มการศึกษาทางไกล | ...

ไฟล์ที่สอง ชื่อ crnfe.html สำหรับเป็นส่วนเนื้อหาหลัก ประกอบด้วยภาพและข้อความ

ไฟล์ที่สาม ชื่อ administration.htmlเป็นไฟล์ของกลุ่มอำนวยการไฟล์นี้จะถูกเรียกมาใช้เมื่อมีการคลิกลิงค์ที่เมนูเพื่อดูกลุ่มงานอำนวยการ

ไฟล์ทั้งหมดต้องอยู่ในห้องเดียวกันเพื่อสะดวกในการลิงค์

ขั้นตอนการสร้าง
        ก่อนอื่น ต้องสร้าง frameset โดยใช้แม่แบบจาก Dreamweaver จากนั้นจึงเรียกไฟล์ในส่วนหัว (top.html) และส่วนเนื้อหาหลัก จากนั้นจึงจะทำการลิงค์จากเมนูในไฟล์ top.html อีกครั้งหนึ่งการสร้างเฟรมเซท (frameset)

  1. เปิดโปรแกรม Dreamweaver 8 ไปที่ File > New ...
  2. โปรแกรมจะมีหน้าจอ New Document ให้เลือกแถบ General
  3. กลุ่ม Category: เลือก Framesets กลุ่ม Frameset ให้เลือก Fix top ซึ่งเป็นแบบที่เราต้องการ แล้วคลิกปุ่ม Create

4.โปรแกรมจะให้ตั้งชื่อเฟรม ทั้งสองส่วน คือส่วนบน และส่วนเนื้อหา โดยโปรแกรมจะมีชื่อมาให้ว่า ส่วนบนคือ topFrame และส่วนหลักคือ mainFrame ให้ยอมรับและคลิก OK โปรแกรมจะเปิดหน้าจอและแบ่งหน้าจอตามที่เรากำหนด

5.หน้าจอนี้ อยู่ใน Standard Mode (ถ้าไม่ได้อยู่ใน Standard Mode ให้ไปที่ View > Table Mode > Standard Mode แต่ถึงแม้จะอยู่ใน Layout Mode ก็สามารถทำขั้นตอนต่อไปได้เช่นเดียวกัน)

6. หน้าจอนี้เป็น Frameset ซึ่งทำหน้าที่ควบคุมหน้าจอทั้งหมด ให้ Save และใช้ชื่อว่า main.html โดยไปที่ File > Save Frame As...

7.และให้ตั้งชื่อไฟล์ว่า main.html

การนำไฟล์เข้าในแต่ละเฟรม

1.คลิกในบริเวณที่จะเป็นส่วนหัว (บริเวณนี้ จะนำไฟล์ชื่อ top.html มาวาง)

2.ไปที่ File > Open in Frame...

3.เลือกไฟล์ top.html เสร็จแล้วส่วนหัวจะปรากฎให้เห็น ดังนี้

4.ถ้าต้องการขยายพื้นที่ในส่วนหัวให้กว้างมากขึ้น หรือน้อยลง ให้คลิกที่ขอบเพื่อเปิด property ของ Frame

5.และตั้งค่า Row ให้มากขึ้น หรือน้อยลงตามต้องการ

6.คลิกในบริเวณที่จะเป็นส่วนเนื้อหาหลัก (บริเวณนี้ จะนำไฟล์ชื่อ crnfe.html มาวาง)

7. ไปที่ File > Open in Frame...

8. เลือกไฟล์ crnfe.html เสร็จแล้วจะได้ทั้งสองส่วนครบ ดังนี้

729

9.ถ้าพบว่ามีขอบสีขาวรอบเฟรม ให้ตั้ง margin ในไฟล์ต้นฉบับ คือ top.html และ crnfe.html ให้มีค่าเป็น 0

10. ถ้าต้องการให้สีของพื้นทั้งในส่วนหัวและส่วนเนื้อหาหลักเป็นสีเดียวกัน ให้ตั้งค่าสีพื้นของไฟล์ top.html และcrnfe.html ให้เป็นสีเดียวกัน

การสร้างลิงค์จากเมนู
        ในส่วนหัว มีเมนูที่จะต้องลิงค์ คือ เมื่อคลิก กลุ่มอำนวยการ ให้ไปเปิดไฟล์ administration.html และนำมาไว้ในเฟรมล่าง ซึ่งมีชื่อว่า mainFrame

1. ลากดำ ข้อความที่ต้องการลิงค์ ในที่นี้คือ กลุ่มอำนวยการ

2.ปดูที่ Property เลือก หรือพิมพ์ชื่อไฟล์ที่จะลิงค์ไปหา ในที่นี้คือไฟล์ administration.html

3.ที่ Property เลือก Target ให้เป็น mainFrame เพราะส่วนเนื้อหาหลักเราตั้งชื่อว่า mainFrame ในตอนสร้าง frameset

 

        เป็นอันเสร็จสิ้นการลิงค์ และการสร้างเฟรม ให้ตรวจสอบดูจาก Browser โดยกดปุ่ม F12

 

จัดทำโดย

น.ส ชุติมา  ฉัตรคำ

 

กลับไปหน้าแรก