ใบเนื้อหา 7

วชิ า การสรา้ งเว็บไซต์ รหสั วชิ า 2204-2009 หน่วยที่ 7 การสร้างเฟรม ครูผ้สู อน ศริ นิ ภา บตุ ะเขยี ว แผนกวชิ าคอมพวิ เตอร์ธุรกิจวทิ ยาลัยเทคนิคกาญจนาภิเษก สมทุ รปราการ

ใบเนอื้ หา หน่วยท่ี 7 การสรา้ งเฟรมเน้อื หาสาระการสอน/การเรียนรู้• ด้านความรู้(ทฤษฎี) เฟรมเซต (Frameset) คอื การแบง่ หนา้ เว็บเพจออกเป็นพนื้ ที่หลาย ๆ ส่วน โดยแตล่ ะสว่ นท่แี ยกออกไปจะเป็นอิสระไมข่ ึ้นต่อกัน ตามปกตนิ ยิ มใช้เฟรมเพื่อแบง่ เนื้อหาบนหนา้ จอเปน็ 2 กลุ่ม เพือ่ ใช้แสดงหรอืเปรยี บเทยี บข้อมูล เฟรมจะมี 2 รูปแบบ คอื เฟรมหลัก (Frameset) และเฟรมย่อย (Frame) 1. เฟรมหลัก (Frameset) คือ หน้าตา่ งเฟรมใหญท่ ส่ี ดุ ทาหนา้ ทคี่ อยควบคมุ เฟรมย่อยอีกทหี น่ึงโดยกาหนดวา่ ในแต่ละส่วนชือ่ อะไร มีขนาดและคุณสมบัติอยา่ งไร เรมิ่ ต้นท่ีตาแหน่งใด เปน็ ต้น 2. เฟรมย่อย (Frame) หน้าต่างเฟรมที่ทาหน้าที่กาหนดชอื่ ของแตล่ ะเฟรม และกาหนดไฟล์เวบ็เพจภายในเฟรมได้ 1. การสร้างเฟรมเซต การสรา้ งเฟรมเซตในโปรแกรม Adobe Dreamweaver CS5 สามารถทาได้ 2 วิธี มีขนั้ ตอนดงั น้ี 1. การใช้แบบสาเร็จ เป็ นเฟรมเซตท่โี ปรแกรมได้ออกแบบไว้เป็ นแบบสาเรจ็ รปู สามารถเลือกใช้ได้ง่าย ๆ จะมีรูปแบบเฟรมเซตให้เลอื กตามต้องการ 1. คลกิ เมนู File 2. เลอื ก New หรอื กดปุ่ม Ctrl+N 3. จะปรากฏหน้าต่าง New Document เลือก Page from Sample 4. ในส่วนของ Sample Folder เลือก Frameset 5. ในสว่ นของ Sample Page จะมีตวั เลือกของรูปแบบเฟรมใหเ้ ลอื กตามต้องการ

6. คลกิ ปุ่ม Create จะปรากฏหน้าตา่ งใหเ้ ลือกต้งั ชื่อเฟรม7. จะได้รูปแบบเฟรมตามทีเ่ ลอื ก

2. การออกแบบเฟรมเซตเอง เป็นการจดั รปู แบบเฟรมเซตตามท่ตี อ้ งการ 1. คลิกที่ Visual Aids ดังรูป 2. เลอื ก Frame Borders 3. ท่เี ว็บเพจจะปรากฏเส้นขอบของเฟรมเซตขนึ้ มา เล่ือนเมาส์ไปทเี่ สน้ ขอบของเฟรมเซตคลิกและลากเมาสเ์ พื่อสร้างเฟรมเซต ถ้าต้องการจะดรู ายละเอยี ดของเฟรมทงั้ หมดให้เลือกคาสงั่ Window >Frames เพ่อื เรยี กพาเนล Frames

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

การลบเฟรม การลบเฟรมท่ไี ม่ตอ้ งการ ให้คลกิ ทเ่ี ส้นขอบเฟรมทีต่ ้องการลบแล้วลากออกไปทข่ี อบเฟรมดา้ นซา้ ยขวา บน หรอื ล่างก็ได้ ถ้าไม่ได้บนั ทึกเฟรม จะมีกรอบใหบ้ นั ทกึ เฟรมก็จะหายไป 3. การแก้ไขรายละเอียดเฟรม เฟรมแตล่ ะเฟรมเป็นไฟลย์ ่อย ๆ หนง่ึ ไฟล์ การแก้ไขรายละเอียดภายในเฟรมทาได้ 2 ลกั ษณะ คอืเฟรมหลัก และเฟรมยอ่ ย การแก้ไขเฟรมหลกั คลกิ เลือกเฟรมหลัก ถ้ามหี ลายเฟรมและไม่แน่ใจว่าเฟรมใดเป็ นเฟรมหลกั ให้เปิดพาเนล Framesและคลิกเลือกเฟรมหลัก เลือกปรบั รายละเอยี ดของเฟรมหลักที่ Properties Inspector 1. Borders กาหนดใหแ้ สดงหรือไมแ่ สดงเสน้ ขอบ 2. Borders Width กาหนดความกว้างของเส้นขอบเฟรม ค่า 0 ไมม่ ีเส้น 3. Border Color กาหนดสีของเสน้ ขอบเฟรม 4. Column กาหนดขนาดของแถวและคอลมั น์ เติมตัวเลขลงไปในชอ่ ง Value และ เลือกหน่วย วดั เชน่ pixels 5. Row Col Selection โครงสรา้ งของเฟรมเซต 6. บอกจานวนแถวและคอลัมนภ์ ายในเฟรมเซต 7. สว่ นสาหรับเลอื กเฟรมเซต การแก้ไขเฟรมยอ่ ย

เฟรมย่อยเป็นเฟรมทกุ เฟรมท่ีบรรจุในเฟรมหลัก มชี ่ือเรียกตา่ ง ๆ กัน เช่น topframemainframe ฯลฯ ซง่ึ สามารถแกไ้ ขรายละเอยี ดได้ ดังน้ี แก้ไขรายละเอยี ดเฟรมที่ Properties Inspector ดงั นี้ 1. Frame name ต้งั ช่ือเฟรมยอ่ ย ควรตั้งให้สื่อถงึ เฟรมหลัก 2. Src ตาแหนง่ ทใ่ี ช้บนั ทึกเวบ็ เพจของเฟรมน้ี 3. Borders แสดง/ซ่อน เส้นขอบ 4. Scroll แสดง/ซอ่ น แถบเลอื่ นของเฟรมย่อย 5. No resize กาหนดใหใช้เมาส์ลากเพื่อปรบั ขนาดเฟรมได้หรือไม่ได้ 6. Border color กาหนดสีของเฟรม 7. Margin width กาหนดระยะหา่ งของเฟรมย่อยกับเฟรมหลัก (กว้าง) Margin 8. height กาหนดระยะห่างของเฟรมย่อยกับเฟรมหลัก (สงู ) 9. สว่ นสาหรับเลือกเฟรมเซต 4. การสรา้ งเน้อื หาในเฟรม เฟรมเซตเปรยี บเสมอื นไฟล์งานหรอื เว็บเพจแต่ละหนา้ ทีซ่ ้อนกนั อยู่ในหน้าเวบ็ เพจเดยี วกันดงั น้ัน การสร้างเนอ้ื หาหรอื ออกแบบแต่ละเฟรมจงึ เป็นอสิ ระจากกัน สามารถพิมพข์ ้อความ แทรกภาพ ตารางและตกแตง่ เฟรมได้โดยไม่กระทบต่อเฟรมอืน่ การใส่เนอ้ื หาในเฟรมแบ่งออกเป็น 2 ลักษณะ คือ สรา้ งเนื้อหาลงในเฟรมใหม่ และนาเน้ือหาที่สร้างไวแ้ ลว้ มาใสเ่ ฟรม ดังน้ี สรา้ งเนอื้ หาลงในเฟรมเซตใหม่ เมื่อได้เลอื กเฟรมเซตหรือสร้างเฟรมเซตเสร็จแล้ว เช่น แบบ Fixed Top, Nested Left โดยกาหนดให้ Topframe เปน็ สว่ นหวั ของบริษัท ประกอบด้วยช่ือและโลโก้ ส่วน Mainframe เป็นเนื้อหารายละเอยี ดสนิ คา้ และสว่ นด้านซ้ายเปน็ ลงิ คต์ า่ ง ๆ จะได้เว็บเพจลักษณะดังน้ี

นาเนอื้ หาที่สร้างไว้ใสเ่ ฟรมเซต เป็นการสรา้ งเน้ือหายอ่ ยแต่ละเฟรมก่อน แลว้ จึงนามาประกอบเวบ็ เพจภายหลงั มีวธิ ที า ดงั นี้  สร้างเฟรมงานต่าง ๆ ไว้จนครบ แลว้ บนั ทึกข้อมลู  สรา้ งเฟรมเซตตามจานวนเฟรม แลว้ กดแป้ น < Shift > + < F2 > เพอ่ื เรยี กพาเนล Frames  คลกิ ท่ีไอคอน ในช่อง Src จะไดห้ น้าต่าง Select HTML file เลอื กเฟรมเซตที่ต้องการ  ทดลองแสดงผลเฟรมเซตตามทอ่ี อกแบบไว้บนเบราวเ์ ซอร์5. การบันทึกเฟรม การบันทึกเฟรมหลักและเฟรมย่อยมีข้อแตกตา่ งกัน ดงั นี้ การบันทกึ เฟรมหลัก ในการบันทึกเฟรมหลกั (Frameset) มขี นั้ ตอนดังนี้ 1. คลิกเมนู File

2. Save All 3. เลือกสถานทีเ่ ก็บไฟล์จากช่อง Save in 4. พิมพ์ชื่อไฟล์ลงในช่อง File Name 5. คลกิ ปุ่ม Save เพือ่ บนั ทึกเฟรม 6. การเชอื่ มโยงเฟรมเซต การเชอ่ื มโยงเฟรมเซตมปี ระโยชนม์ าก เพราะชว่ ยเลอื่ นหน้าเว็บเพจใหแ้ สดงผลข้อมูลไดง้ ่ายเชน่ คลกิ ท่ีแท็บสินค้าใหม่ เฟรมเซตดา้ นขวามือจะแสดงผลสนิ ค้าใหมใ่ ห้ทันที โดยมวี ธิ ีการเช่ือมโยง ดงั นี้ 1. เลอื กข้อความทตี่ ้องการจะสร้างลงิ ค์ 2. คลิกปมุ่ ในช่อง Link ของ Properties Inspector

3. เลือกเฟรมที่ต้องการจะเปน็ เป้าหมายการลงิ ค์ แลว้ คลิก OK 4. กาหนดคุณสมบัตกิ ารแสดงผลจากชอ่ ง Target เช่น เลอื ก Mainframe เพอ่ื ใหไ้ ฟล์ลงิ คไ์ ว้มาแทรกแทนเฟรม Mainframe 5. บนั ทกึ ไฟล์ และทดลองแสดงผลดว้ ยเบราวเ์ ซอร์ < F12 >