1. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
หน่วยที่ 8
การจัดแบ่งเว็บเพจด้วยเฟรมเซต
สาระการเรียนรู้
8.1 การสร้างเฟรมเซต
8.2 การจัดการกับเฟรมเซต
8.3 การแก้ไขรายละเอียดเฟรมเซต
8.4 การนาเนื้อหาที่สร้างไว้ใส่เฟรมเซต
8.5 การสร้างฟอร์มและฟิลด์กรอกข้อมูล
วัตถุประสงค์เชิงพฤติกรรม
8.1 อธิบายการสร้างเฟรมเซตได้
8.2 อธิบายการจัดการกับเฟรมเซตได้
8.3 อธิบายการแก้ไขรายละเอียดเฟรมได้
8.4 อธิบายการนาเนื้อหาที่สร้างไว้ใส่เฟรมได้
8.5 อธิบายการสร้างฟอร์มและฟิลด์กรอกข้อมูลได้

2. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
เฟรมเซต (Frameset) คือ การแบ่งหน้าเว็บเพจออกเป็นพื้นที่หลาย ๆส่วน โดยแต่ละส่วนที่แยกออกไปจะเป็นอิสระไม่ขึ้นต่อ
กัน ตามปกตินิยมใช้เฟรมเพื่อแบ่งเนื้อหาบนหน้าจอเป็น 2 กลุ่ม เพื่อใช้แสดงหรือเปรียบเทียบข้อมูล เฟรมมี 2 รูปแบบ คือ เฟรมหลัก
(Frameset) และเฟรมย่อย (Frame)
1. เฟรมหลัก (Frameset) คือ หน้าต่างเฟรมใหญ่ที่สุด ทาหน้าที่คอยควบคุมเฟรมย่อยอีกทีหนึ่ง โดยกาหนดว่าในแต่ละ
ส่วนชื่ออะไร มีขนาดและคุณสมบัติอย่างไร เริ่มต้นที่ตาแหน่งใด เป็นต้น
2. เฟรมย่อย (Frame) หน้าต่างเฟรมที่ทาหน้าที่กาหนดชื่อของแต่ละเฟรม และกาหนดไฟล์เว็บเพจภายในเฟรมได้
8.1.1 การสร้างเฟรมเซต
คลิกที่เมนู View >> Visual Aids >> Frame Borders
8.1 การสร้างเฟรมเซต
เฟรมบน
เฟรมหลัก
เฟรมขวา

3. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
เมื่อเลื่อนเม้าส์ไปที่ขอบเฟรมเซต คลิกและลากเมาส์เพื่อสร้างเฟรมเชต ทั้งซ้าย ขวา บน และล่าง
การดูรายละเอียดของเฟรมเซตให้คลิกที่คาสั่ง Window > Frames
สร้างเฟรมเซตด้านบน
สร้างเฟรมเซตด้านซ้าย
สร้างเฟรมเซตด้านล่าง
สร้างเฟรมเซตด้านขวา

4. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
หลังจากที่สร้างเฟรมเซตไว้เรียบร้อยแล้ว หากยังไม่ตรงตามที่ต้องการก็สามารถจัดการกับ เฟรมเซต ดังนี้
8.2.1 การปรับขนาดเฟรม
ถ้าเฟรมมีขนาดใหญ่หรือเล็กเกินไปสามารถปรับขนาดย่อหรือขยายได้ ทั้งแนวตั้งและแนวนอน โดยคลิกที่เส้นขอบ
เฟรมและลากเมาส์
8.2.2 การเพิ่มขนาดเฟรม
ถ้าเฟรมที่จานวนไม่เพียงพอสามารถเพิ่มจานวนได้ โดยเลือกคาสั่ง Modify > Frame set แล้วเลือกลักษณะการแบ่ง
เฟรมเซต 4 ลักษณะ คือ ซ้าย ขวา บน และล่าง ถ้าเพิ่มเฟรมด้วยเส้นขอบเฟรมใฟ้กดแป้น < Alt > กับลากเมาส์ที่เส้นขอบเฟรม
8.2 การจัดการกับเฟรมเซต

5. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
8.2.3 การลบเฟรม
การลบเฟรมที่ไม่ต้องการ ให้คลิกที่เส้นขอบเฟรมที่ต้องการลบ แล้วลากออกไปที่ขอบเฟรมด้านซ้าย ขวา บน หรือล่าง
ก็ได้ ถ้าไม่ได้บนทึกเฟรมจะมีกรอบให้บันทึก เฟรมก็จะหายไป
เฟรมแต่ละเฟรมเป็นไฟล์ย่อยๆ หนึ่งไฟล์ การแก้ไขรายละเอียดภายในเฟรมทาได้ 2 ลักษณะ คือ เฟรมหลัก และเฟรมนย่อย
8.3.1 การแก้ไขเฟรมหลัก
คลิกเลือกเฟรมหลัก ถ้ามีหลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็นเฟรมหลัก ให้เปิดพาเนล Frames และคลิกเลือก
เฟรมหลัก
เลือกปรับรายละเอียดของเฟรมหลักที่ Properties Inspector
Borders กาหนดให้แสดงหรือไม่แสดงเส้นขอบ
Borders Width กาหนดความกว้างของเส้นขอบเฟรม ค่า 0 ไม่มีเส้น
Border Color กาหนดสีของเส้นขอบเฟรม
Column กาหนดขนาดของคอลัมน์ เติมตัวเลขลงไปในช่อง Value และ
เลือกหน่วยวัด เช่น pixels
8.3.2 การแก้ไขเฟรมย่อย
เฟรมย่อยเป็นเฟรมทุกเฟรมที่บรรจุในเฟรมหลัก มีชื่อเรียกต่าง ๆกัน เช่น topframe mainframe ฯลฯ ซึ่งสามารถ
แก้ไขรายละเอียดได้ ดังนี้
คลิกเลือกเฟรมที่ต้องการจะแก้ไขที่พาเนล Frames
8.3 การแก้ไขรายละเอียดเฟรม
เซต

6. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
แก้ไขรายละเอียดเฟรมที่ Properties Inspector ดังนี้
Frame name ตั้งชื่อเฟรมย่อย ควรตั้งให้สื่อถึงเฟรมหลัก
Src ตาแหน่งที่ใช้บันทึกเว็บเพจของเฟรมนี้
Borders แสดง / ซ่อน เส้นขอบ
Scroll แสดง / ซ่อน แถบเลื่อนของเฟรมย่อย
No resize กาหนดให้ใช้เมาส์ลากเพื่อปรับขนาดเฟรมได้ หรือไม่ได้
Border color กาหนดสีของเฟรม
Margin width กาหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (กว้าง)
Margin height กาหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (สูง)
เฟรมเซตเปรียบเสมือนไฟล์งานหรือเว็บเพจแต่ละหน้าที่ซ้อนกันอยู่ในหน้าเว็บเพจเดียวกัน ดังนั้น การสร้างเนื้อหาหรือ
ออกแบบแต่ละเฟรมจึงเป็นอิสระจากกัน สามารถพิมพ์ข้อความ แทรกภาพ ตาราง และตกแต่งเฟรมได้โดยไม่กระทบต่อเฟรมอื่น
การใส่เนื้อหาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ สร้างเนื้อหาลงในเฟรมใหม่ และนาเนื้อหาที่สร้างไว้แล้วมาใส่เฟรม ดังนี้
8.4.1 สร้างเนื้อหาลงในเฟรมเซตใหม่
1. สร้างเฟรมงานต่างๆ ไว้จนครบ แล้วทาการบันทึกข้อมูล
2. คลิกไอคอน Browse for file ( ) ในช่อง Src จะได้หน้าต่าง Select HTML file เลือกเฟรมเซตที่ต้องการ
3. ทดลองแสดงผลเฟรมเซตบนเว็บบราวเซอร์
8.4 การนาเนื้อหาที่สร้างไว้ใส่เฟรมเซต
เซต
เลือกไฟล์
เลือกไอคอนลิงก์

7. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
ฟอร์ม (Form) เป็นเครื่องมือที่ช่วยทาให้เกิดปฏิสัมพันธ์ระหว่างผู้ใช้งานกับเว็บไซต์โดยใช้ฟิลด์ Field ชนิดต่าง ๆ เช่น Text
Field, Button, Check Boxในการรับข้อมูลจากผู้ใช้เพื่อนาไปผ่านการประมวลผลใน Server
ลักษณะของฟอร์มที่ทางานบนเว็บเพจเรียกว่า “ ไดนามิกเว็บเพจ ” (Dynamic Web) หมายถึงเว็บเพจที่มีการโต้ตอบกับ
ผู้ใช้ เช่น แบบฟอร์มสมัครสมาชิก แบบฟอร์มสอบถามความคิดเห็น แบบฟอร์มค้นหาข้อมูล เป็นต้น
หลักการทางานของฟอร์มบนไดนามิกเว็บเพจ คือจะต้องสร้างฟอร์มไว้บนเว็บเพจ เมื่อผู้ใช้กรอกข้อมูลและส่งข้อมูลเข้า
มายังเว็บเซิร์ฟเวอร์ เซิร์ฟเวอร์จะค้นหาเว็บเพจและส่งข้อมูลไปยังแอพพลิเคชัน เซิร์ฟเวอร์ เซิร์ฟเวอร์จะประมวลผลข้อมูลที่ได้รับ
แล้วส่งผ่านหน้าเว็บที่ประมวลผลแล้วไปยังเว็บเซิร์ฟเวอร์ แล้วส่งผลลัพธ์ที่ได้ไปยังเบราเซอร์อีกครั้ง
การสร้างฟอร์มมีกลุ่มเครื่องมือ Forms ให้เลือกใช้ โดยคลิกที่แถบเครื่องมือ Forms จะได้เครื่องมือย่อย ดังนี้
8.5.1 การสร้างฟอร์มและฟิลด์กรอกข้อมูล
1. คลิกเลือกคาสั่ง Insert > Form > Form จะปรากฏกรอบที่มีจุดประขึ้นมา
2. จากนั้นพิมพ์ข้อความ “ กรุณากรอกแบบฟอร์ม ”
8.5 การสร้างฟอร์มและฟิลด์กรอกข้อมูล
สร้างฟอร์ม
ฟิลด์ซ่อน
สร้างเช็คบ็อกซ์
ตัวเลือก
รายการ
ฟิลด์รูปภาพ
ปุ่มกด
จัดกลุ่มฟอร์ม Spray แบบต่างๆ
ฟิลด์ข้อความ
ฟิลด์กรอก
ข้อความแบบ
หลายบรรทัด
กลุ่มเช็คบ็อกซ์
กลุ่มตัวเลือก
รายการ
แบบเชื่อมโยง
แทรกไฟล์
แสดงข้อความ

8. กลุ่มสาระ : การงานอาชีพและเทคโนโลยี
ชื่อวิชา : การสร้างเว็บไซต์ รหัสวิชา ง 23203
หัวข้อ : หน่วยที่ 8 การจัดแบ่งเว็บเพจด้วยเฟรมเซต
ใบเนื้อหา หน้าที่
แผ่นที่ :
3. สร้างฟิลด์ข้อความ (Text Field) สาหรับ E-mail โดยคลิกแถบเครื่องมือ( ) เพื่อสร้างฟอร์มใหม่ แล้วคลิก
เครื่องมือ Text Fields( ) จะได้หน้าต่าง Input Tag Accessibility Attributes ตั้งชื่อ Text Field ในช่อง Label เสร็จแล้วคลิก OK
จะได้ Text Field ชื่อ E-mail บนพื้นที่สร้างฟอร์ม
4. จะได้ Text “ชื่อ – นามสกุล” ซึ่งมีกรอบข้อความสาหรับพิมพ์ข้อมูลด้านหลัง
เรียกดูด้วยเว็บเบราว์เซอร์ จะได้แบบฟอร์ม ดังนี้