กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

ใบเนอหา หนาท

แผนท :

หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

สาระการเรยนร 8.1 การสรางเฟรมเซต 8.2 การจดการกบเฟรมเซต 8.3 การแกไขรายละเอยดเฟรมเซต 8.4 การน าเนอหาทสรางไวใสเฟรมเซต 8.5 การสรางฟอรมและฟลดกรอกขอมล

วตถประสงคเชงพฤตกรรม 8.1 อธบายการสรางเฟรมเซตได 8.2 อธบายการจดการกบเฟรมเซตได 8.3 อธบายการแกไขรายละเอยดเฟรมได 8.4 อธบายการน าเนอหาทสรางไวใสเฟรมได 8.5 อธบายการสรางฟอรมและฟลดกรอกขอมลได

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

ใบเนอหา หนาท

แผนท : เฟรมเซต (Frameset) คอ การแบงหนาเวบเพจออกเปนพนทหลาย ๆสวน โดยแตละสวนทแยกออกไปจะเปนอสระไมขนตอกน ตามปกตนยมใชเฟรมเพอแบงเนอหาบนหนาจอเปน 2 กลม เพอใชแสดงหรอเปรยบเทยบขอมล เฟรมม 2 รปแบบ คอ เฟรมหลก(Frameset) และเฟรมยอย (Frame) 1. เฟรมหลก (Frameset) คอ หนาตางเฟรมใหญทสด ท าหนาทคอยควบคมเฟรมยอยอกทหนง โดยก าหนดวาในแตละสวนชออะไร มขนาดและคณสมบตอยางไร เรมตนทต าแหนงใด เปนตน 2. เฟรมยอย (Frame) หนาตางเฟรมทท าหนาทก าหนดชอของแตละเฟรม และก าหนดไฟลเวบเพจภายในเฟรมได

8.1.1 การสรางเฟรมเซต คลกทเมน View >> Visual Aids >> Frame Borders

8.1 การสรางเฟรมเซต

เฟรมบน

เฟรมหลก

เฟรมขวา

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

ใบเนอหา หนาท

แผนท :

เมอเลอนเมาสไปทขอบเฟรมเซต คลกและลากเมาสเพอสรางเฟรมเชต ทงซาย ขวา บน และลาง

การดรายละเอยดของเฟรมเซตใหคลกทค าสง Window > Frames

สรางเฟรมเซตดานบน

สรางเฟรมเซตดานซาย

สรางเฟรมเซตดานลาง

สรางเฟรมเซตดานขวา

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

ใบเนอหา หนาท

แผนท : หลงจากทสรางเฟรมเซตไวเรยบรอยแลว หากยงไมตรงตามทตองการกสามารถจดการกบ เฟรมเซต ดงน 8.2.1 การปรบขนาดเฟรม ถาเฟรมมขนาดใหญหรอเลกเกนไปสามารถปรบขนาดยอหรอขยายได ทงแนวตงและแนวนอน โดยคลกทเสนขอบเฟรมและลากเมาส

8.2.2 การเพมขนาดเฟรม ถาเฟรมทจ านวนไมเพยงพอสามารถเพมจ านวนได โดยเลอกค าสง Modify > Frame set แลวเลอกลกษณะการแบงเฟรมเซต 4 ลกษณะ คอ ซาย ขวา บน และลาง ถาเพมเฟรมดวยเสนขอบเฟรมใฟกดแปน < Alt > กบลากเมาสทเสนขอบเฟรม

8.2 การจดการกบเฟรมเซต

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 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 การแกไขรายละเอยดเฟรมเซต

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 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 การน าเนอหาทสรางไวใสเฟรมเซตเซต

เลอกไฟล

เลอกไอคอนลงก

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 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 แบบตางๆ

ฟลดขอความ

ฟลดกรอกขอความแบบหลายบรรทด

กลมเชคบอกซ

กลมตวเลอก

รายการ แบบเชอมโยง

แทรกไฟล

แสดงขอความ

กลมสาระ : การงานอาชพและเทคโนโลย ชอวชา : การสรางเวบไซต รหสวชา ง 23203 หวขอ : หนวยท 8 การจดแบงเวบเพจดวยเฟรมเซต

ใบเนอหา หนาท

แผนท : 3. สรางฟลดขอความ (Text Field) ส าหรบ E-mail โดยคลกแถบเครองมอ( ) เพอสรางฟอรมใหม แลวคลกเครองมอ Text Fields( ) จะไดหนาตาง Input Tag Accessibility Attributes ตงชอ Text Field ในชอง Label เสรจแลวคลก OK จะได Text Field ชอ E-mail บนพนทสรางฟอรม

4. จะได Text “ชอ – นามสกล” ซงมกรอบขอความส าหรบพมพขอมลดานหลง

เรยกดดวยเวบเบราวเซอร จะไดแบบฟอรม ดงน