แผนการจัดการเรียนรู้สร้างเว็บเบื้องต้น

แผนการจดั การเรียนร้มู ุ่งเนน้ สมรรถนะอาชพี และบูรณาการปรชั ญาของเศรษฐกจิ พอเพยี ง การบูรณาการกับคุณลกั ษณะ 3 D แก่ผ้เู ข้ารับการฝกึ อบรม วชิ า การสร้างเวบ็ ไซต์ รหสั วิชา 20204-2008 หลักสตู รประกาศนียบตั รวิชาชีพ (ปวช.) พทุ ธศกั ราช 2562 จดั ทำโดย นางสาวสุธาสินี สฤี ทธิ์ ตำแหน่ง ครูผูช้ ว่ ย แผนกวิชา คอมพวิ เตอรธ์ ุรกจิ วิทยาลัยเทคนิคอ่างทอง สำนักงานคณะกรรมการการอาชีวศกึ ษา กระทรวงศึกษาธิการ

แผนการจดั การเรียนรูม้ ุ่งเนน้ สมรรถนะอาชีพ และบรู ณาการปรัชญาของเศรษฐกิจพอเพียง การบูรณาการกบั คุณลกั ษณะ 3 D แกผ่ ู้เข้ารับการฝกึ อบรม วิชา การสรา้ งเว็บไซต์ รหัสวิชา 20204-2008 หลักสตู รประกาศนยี บตั รวิชาชีพ (ปวช.) พุทธศกั ราช 2561 โดย นางสาวสธุ าสินี สฤี ทธ์ิ แผนกคอมพิวเตอร์ธุรกจิ

คำนำ แผนการสอนวิชา “การสร้างเว็บไซต์” รหัสวิชา 2204-2003 จดั ทำขน้ึ เพื่อใช้เปน็ แนวทาง ในการจัดการเรียนการสอน วิชา การสร้างเว็บไซต์ตามหลักสูตรประกาศนียบัตรวิชาชีพ (ปวช.) พุทธศักราช 2556 ของสำนักงานคณะกรรมการการอาชีวศึกษา โดยจัดการเรียนการสอนทั้งหมด 18 สัปดาห์ สัปดาห์ละ 4 ชั่วโมง เนื้อหาภายในแบ่งออกเป็น 11 หน่วย ดังนี้คือ พื้นฐานการสร้าง เว็บไซต์, การใช้โปรแกรม Adobe Dreamweaver Cs6การจัดและตกแตง่ ข้อความ, การแตง่ เวบ็ เพจ ด้วยรูปภาพ, การสร้างตาราง, การสร้างจุดเชื่อมโยง, การสร้างเฟรม, การสร้างเลเยอร์, การสร้าง ฟอร์ม, การใช้มลั ตมิ เี ดียในเวบ็ เพจ, การอพั โหลดเวบ็ เพจขึ้นสู่อนิ เทอรเ์ น็ต เปน็ ตน้ สำหรับแผนการสอนรายวิชานี้ ผู้จัดทำได้ทุ่มเทกำลังกาย กำลังใจและเวลาในการศึกษา ค้นคว้า ทดลอง เพื่อให้เกิดประสิทธิภาพต่อการเรียนการสอน และการจัดการเรียนการสอนตาม แนวทางหลักปรัชญาของเศรษฐกิจแบบพอเพยี ง ท้ายที่สุดนี้ ผู้จัดทำขอขอบคุณผู้ที่สร้างแหล่งความรู้ และผู้ที่มีส่วนเกี่ยวข้องต่าง ๆ ซึ่งเปน็ ส่วนสำคัญที่ทำให้แผนการสอนวิชา สถาปัตยกรรมคอมพิวเตอร์และระบบปฏิบัติการเล่มนี้เสร็จ สมบูรณ์เป็นที่เรียบร้อย และหากผู้ใช้พบข้อบกพร่องหรือมีข้อเสนอแนะประการใด ขอได้โปรดแจง้ ผจู้ ดั ทำทราบดว้ ย จกั ขอบคุณยิ่ง ............................................... วิทยาลัยเทคนคิ อ่างทอง

แผนการสอน/แผนการเรยี นรรู้ ายวิชา ช่อื รายวิชา …..การสรา้ งเวบ็ ไซต์ (Website Development)…… รหัสวิชา... 2204- 2009.......... (ท-ป-น) ……........ 2-2-3………… ระดับชั้น....ปวช.....สาขาวชิ า/กลุม่ วชิ า/แผนกวชิ า........................................................................ หน่วยกิต..............3......................จำนวนคาบรวม............................72.........................คาบ ทฤษฏ.ี ........................2................คาบ/สปั ดาห์ ปฏิบตั ิ.................2..............คาบ/สปั ดาห์ ภาคเรยี นท่ี.....................1..................ปกี ารศกึ ษา...........................2557............................. จุดประสงค์รายวิชา 1. มีความรคู้ วามเข้าใจเกยี่ วกบั กระบวนการและโครงสร้างการทำงานของเว็บไซต์ 2. เข้าใจโครงสรา้ งและไวยากรณข์ องโปรแกรมภาษาหรือกระบวนการใชเ้ ครอื่ งมอื การสร้างเว็บไซต์ 3. ออกแบบและกำหนดส่วนประกอบที่จำเป็นของเว็บไซต์ 4. ใชโ้ ปรแกรมภาษาหรือโปรแกรมสำเรจ็ รปู สำหรบั สรา้ งเวบ็ ไซต์ 5. ติดตง้ั และอัพโหลด (Upload) เว็บไซต์ 6. มคี ุณธรรม จริยธรรม และคา่ นยิ มทด่ี ีในการใช้คอมพวิ เตอร์ สมรรถนะรายวิชา 1. แสดงความรูเ้ กย่ี วกับกระบวนการ โครงสรา้ งการทำงาน และไวยากรณข์ องโปรแกรมภาษาในการสร้าง เว็บไซต์ 2. ประยกุ ต์ใช้โปรแกรมภาษาหรือโปรแกรมสำเร็จรูปสร้างเวบ็ ไซตแ์ ละการติดตั้งและอัพโหลด (Upload) เว็บไซต์ คำอธิบายรายวิชา ศึกษาและปฏิบัติเกี่ยวกับกระบวนการและโครงสรา้ งการทำงานของเว็บไซต์ การออกแบบเว็บไซต์ การ สร้างเว็บไซต์ด้วยโปรแกรมภาษาหรือโปรแกรมสำเร็จรูปหรือโปรแกรมระบบCMS (Content Management System) การทดสอบการทำงานของเวบ็ ไซต์ และการอัพโหลด(Upload) เว็บไซต์

รายการหน่วย ชอ่ื หน่วย และสมรรถนะประจำหน่วย ชื่อเรอ่ื ง สมรรถนะและจดุ ประสงค์เชิงพฤตกิ รรม หนว่ ยท่ี 1 พื้นฐานการสร้างเวบ็ ไซต์ สมรรถนะ 1. แสดงความรพู้ น้ื ฐานเกย่ี วกบั การสรา้ งเว็บไซต์ จดุ ประสงคเ์ ชิงพฤตกิ รรม ด้านความรู้ 1. อธบิ ายความรเู้ บอ้ื งตน้ เกี่ยวกบั อินเทอร์เนต็ /เว็บไซตไ์ ด้ 2. ยกตวั อย่างสว่ นประกอบเวบ็ เพจได้ 3. ชแี้ จงภาษามาตรฐานทีใ่ ชใ้ นการสร้างเว็บเพจได้ ดา้ นทักษะ 4. ฝกึ พัฒนาเวบ็ ไซตไ์ ด้ ด้านจิตพิสยั 5. ยอมรบั รปู แบบของเวบ็ ไซตไ์ ด้ 6. จดั ลำดับแนวทางหลักการออกแบบเวบ็ ไซต์ได้

ช่อื เรื่อง สมรรถนะและจดุ ประสงค์เชงิ พฤตกิ รรม หน่วยท่ี 2 การใช้ Adobe Dreamweaver สมรรถนะ: CS5 1. เปิดใช้งานโปรแกรม Adobe Dreamweaver CS5 จดุ ประสงคเ์ ชิงพฤตกิ รรม: ด้านความรู้ 1. ยกตวั อย่างหน้าต่าง Welcome screen ได้ ด้านทกั ษะ 2. ทดลองเปดิ ใชง้ านโปรแกร Adobe Dreamweaver CS5 ได้ ด้านจติ พสิ ยั 3. จำแนกส่วนประกอบของหนา้ ต่างการใชง้ านโปรแกรมได้ ด้านคณุ ธรรม จริยธรรม/บูรณาการเศรษฐกิจพอเพยี ง 4. ใชโ้ ปรแกรม Adobe Dreamweaver CS5 ให้ เหมาะสมกบั ความต้องการ

ชอ่ื เรื่อง สมรรถนะและจุดประสงค์เชงิ พฤตกิ รรม หนว่ ยท่ี 3 การจัดตกแต่งขอ้ ความ สมรรถนะ: 1. จัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 จุดประสงคเ์ ชิงพฤตกิ รรม: ด้านความรู้ 1. อธิบายการจดั แตง่ ขอ้ ความได้ 2. รวบรวมลักษณะตัวอักษรได้ 3. ออกแบบสไตล์ CSS ได้ ด้านทักษะ 4. สร้างขอ้ ความได้ 5. คัดลอกขอ้ ความได้ 6. ขึน้ บรรทดั ใหมใ่ นยอ่ หน้าเดิมได้ 7. เวน้ ระหว่างขอ้ ความได้ 8. จัดรปู แบบขอ้ ความได้ 9. เลือกฟอนต์ใหก้ บั ขอ้ ความได้ 10. เพม่ิ ชุดฟอนต์ทีใ่ ชก้ บั ข้อความได้ 11. ปรับเปล่ยี นขนาดฟอนต์ได้ 12. เปลย่ี นสฟี อนต์ได้ 13. เนน้ หวั ขอ้ ใหโ้ ดดเด่นได้ 14. ปฏิบัตติ ามข้นั ตอนการจดั รปู แบบขอ้ ความได้ ดา้ นจติ พสิ ัย 15. ประพฤติตามหลักการจัดและตกแต่งข้อความด้วย โปรแกรม Adobe Dreamweaver CS5 ได้ ดา้ นคุณธรรม จรยิ ธรรม/บูรณาการเศรษฐกิจพอเพยี ง 16. จัดและตกแต่งข้อความด้วยโปรแกรม Adobe Dreamweaver CS5 ให้ถูกต้องและเหมาะสมได้

ชื่อเรอ่ื ง สมรรถนะและจดุ ประสงคเ์ ชิงพฤติกรรม หนว่ ยท่ี 4 การแตง่ เวบ็ เพจดว้ ยรูปภาพ สมรรถนะ: 1. ตกแต่งเว็บเพจด้วยรูปภาพ จดุ ประสงค์เชิงพฤติกรรม: ดา้ นความรู้ 1. อธิบายภาพกราฟกิ ที่เหมะสมกับเว็บเพจได้ 2. ออกแบบภาพฉากหลงั ได้ ดา้ นทกั ษะ 3. ใส่ภาพลงบนเวบ็ เพจได้ 4. ปรบั แตง่ คณุ สมบัติของภาพได้ 5. ปรับแตง่ ภาพดว้ ยเครื่องมือของ Dreamweaver ได้ 6. ปรับแต่งคณุ สมบัตขิ องไฟลภ์ าพได้ 7. สรา้ งเอฟเฟกต์สลับภาพเมื่อชเ้ี มาส์ได้ 8. จองพื้นทีไ่ ว้วางภาพได้ ด้านจติ พิสยั 9. แสวงหาการแตง่ เว็บเพจด้วยรปู ภาพได้ ด้านคุณธรรม จรยิ ธรรม/บูรณาการเศรษฐกิจพอเพียง 10. ตกแตง่ เวบ็ เพจดว้ ยรปู ภาพดว้ ยความเหมาะสมได้

ชื่อเร่อื ง สมรรถนะและจดุ ประสงคเ์ ชงิ พฤติกรรม หนว่ ยท่ี 5 การสรา้ งตาราง สมรรถนะ : 1. สรา้ งตารางลงบนเวบ็ เพจ จุดประสงคเ์ ชิงพฤตกิ รรม ดา้ นความรู้ 1. เขยี นโครงร่างการสรา้ งตารางได้ ด้านทักษะ 2. สร้างตารางในเว็บเพจได้ 3. ใสข่ ้อมูลในตารางได้ 4. เลือกสว่ นของตารางได้ 5. ปรบั แตง่ รายละเอยี ดของตารางได้ 6. เรียงข้อมูลในตารางได้ 7. เปลี่ยนแปลงจำนวนแถว คอลัมนไ์ ด้ 8. ตกแต่งตารางได้ ดา้ นจติ พิสยั 9. นำเทคนคิ การสรา้ งเวบ็ เพจมาประยกุ ต์ใช้ได้ ด้านคุณธรรม จรยิ ธรรม/บูรณาการเศรษฐกิจพอเพียง 10. สร้างตารางบนเว็บเพจให้ถูกต้องเหมาะสมกับความจำ เป็นได้

ชื่อเรอื่ ง สมรรถนะและจดุ ประสงค์เชิงพฤตกิ รรม หนว่ ยท่ี 6 การสรา้ งจุดเช่อื มโยง สมรรถนะ: 1. สร้างจดุ เชือ่ มโยงบนเว็บเพจ จดุ ประสงคเ์ ชิงพฤติกรรม: ดา้ นความรู้ 1. ระบคุ ุณสมบัตกิ ารเชื่อมโยงได้ ด้านทักษะ 2. สร้างจุดเชอ่ื มโยงได้ 3. เชอ่ื มโยงภายในเว็บไซตเ์ ดียวกันได้ 4. เชอื่ มโยงไปยงั เว็บไซตอ์ ื่นได้ 5. เชื่อมโยงไปยงั อเี มล์ได้ 6. เชื่อมโยงโดย Map Link ได้ 7. แกไ้ ขการเชอื่ มโยงเว็บเพจได้ ด้านจิตพสิ ัย 8. รเิ รมิ่ จุดเชอ่ื มโยงบนเวบ็ เพจได้ ด้านคุณธรรม จริยธรรม/บรู ณาการเศรษฐกิจพอเพียง 9. เช่ือมโยงบนเว็บเพจได้อย่างถูกตอ้ งเหมาะสม

ช่ือเรอ่ื ง สมรรถนะและจุดประสงคเ์ ชงิ พฤตกิ รรม หน่วยท่ี 7 การสร้างเฟรม สมรรถนะ : 1. สรา้ งเฟรมบนเว็บเพจ จดุ ประสงค์เชิงพฤติกรรม ดา้ นความรู้ 1. สาธิตการสรา้ งเฟรมเซตได้ ดา้ นทกั ษะ 2. สร้างเฟรมเชตได้ 3. จดั การกบั เฟรมเชตได้ 4. แก้ไขรายละเอยี ดเฟรมได้ 5. สรา้ งเนื้อหาในเฟรมได้ 6. บนั ทกึ เฟรมได้ ดา้ นจติ พิสัย 7. ผสมผสานเทคนคิ การสร้างเฟรมเซตได้ ด้านคุณธรรม จรยิ ธรรม/บูรณาการเศรษฐกิจพอเพียง 8. สร้างเฟรมเซตไดอ้ ยา่ งถูกต้องเหมาะสม

ชอ่ื เรือ่ ง สมรรถนะและจุดประสงค์เชิงพฤตกิ รรม หน่วยท่ี 8 การสรา้ งเลเยอร์ สมรรถนะ : 1. สรา้ งเลเยอร์ จดุ ประสงคเ์ ชิงพฤตกิ รรม ด้านความรู้ 1. อธบิ ายเกีย่ วกบั การสรา้ งเลเยอรไ์ ด้ ดา้ นทักษะ 2. สร้างเลเยอร์ได้ 3. ปรบั แตง่ รายละเอยี ดของเลเยอร์ได้ 4. ใชง้ านพาเนลเลเยอร์ได้ 5. สรา้ งเลเยอรซ์ อ้ นกันได้ 6. แปลงเลเยอร์ได้ ดา้ นจติ พิสยั 7. ประพฤติตามหลักการสรา้ งสรา้ งเลเยอร์ได้ ด้านคณุ ธรรม จรยิ ธรรม/บรู ณาการเศรษฐกิจพอเพียง 8. สร้างเลเยอรไ์ ด้อย่างถูกต้องเหมาะสมได้

ชอ่ื เรื่อง สมรรถนะและจดุ ประสงค์เชงิ พฤติกรรม หนว่ ยท่ี 9 การสรา้ งฟอรม์ สมรรถนะ : 1. สร้างฟอร์มบนเวบ็ เพจ จุดประสงคเ์ ชิงพฤติกรรม ด้านความรู้ 1. บรรยายเก่ียวกับการสร้างฟอรม์ ได้ 2. สรปุ ทำงานของฟอร์ม (From) และเครื่องมอื ในการสร้าง ฟอรม์ ได้ ด้านทกั ษะ 3. สร้างฟอรม์ และฟลิ ด์กรอกขอ้ ความได้ 4. สร้างรายการตวั เลอื ก (List/Menu) ได้ 5. สรา้ งพื้นที่รบั ขอ้ ความได้ 6. สรา้ ง Radio Button ได้ 7. สรา้ ง checkbox ได้ 8. สรา้ ง File Field ได้ 9. สร้างปมุ่ มาตรฐานได้ 10. สร้าง Jump menu ได้ ด้านจิตพสิ ัย 11. นำการสร้างสร้างฟอร์มมาประยุกต์ใชไ้ ด้ ด้านคณุ ธรรม จริยธรรม/บูรณาการเศรษฐกจิ พอเพยี ง 12. สรา้ งฟอร์มได้อย่างถกู ต้องเหมาะสม

ช่อื เรือ่ ง สมรรถนะและจดุ ประสงค์เชงิ พฤตกิ รรม หน่วยท่ี 10 การใชม้ ลั ติมีเดียบนเว็บ สมรรถนะ : 1. ใชง้ านมลั ติมีเดยี บนเวบ็ เพจ จุดประสงค์เชิงพฤติกรรม ด้านความรู้ 1. บรรยายการใช้มลั ติมีเดยี บนเว็บได้ ดา้ นทกั ษะ 2. แทรก Flash ลงเวบ็ เพจได้ 3. แทรกไฟล์ .FLV ยอดนยิ มได้ 4. เล่นเพลงในเว็บเพจด้วย Plugin ได้ ด้านจติ พสิ ยั 5. ประพฤติตามวิธกี ารปรับแต่งการเล่นไฟล์เสียงได้ ด้านคุณธรรม จริยธรรม/บรู ณาการเศรษฐกจิ พอเพยี ง 6. ใชม้ ัลตมิ เี ดียบนเว็บได้ถกู ตอ้ งสมบูรณ์

ช่ือเรือ่ ง สมรรถนะและจุดประสงคเ์ ชงิ พฤตกิ รรม ห น ่ ว ย ที่ 11 ก า ร Upload เ ว ็ บ เ พ จ ข ึ ้ น สู่ สมรรถนะ : อินเทอรเ์ นต็ 1. อัพโหลดเวบ็ เพจขน้ึ สู่อินเทอรเ์ นต็ จดุ ประสงค์เชิงพฤติกรรม ด้านความรู้ 1. สาธติ วธิ กี ารอัพโหลดเว็บไซตไ์ ด้ ดา้ นทกั ษะ 2. ตรวจสอบขนาดของไฟล์เวบ็ เพจได้ 3. ควบคมุ เวบ็ เซิรฟ์ เวอรห์ ลกั ๆ ได้ ด้านจิตพสิ ัย 4. จดั หาพื้นที่ฝากเวบ็ ไซตบ์ นเซริ ์ฟเวอรไ์ ด้ ด้านคณุ ธรรม จริยธรรม/บรู ณาการเศรษฐกิจพอเพียง 5. อัพโหลดเว็บเพจขึน้ สอู่ นิ เทอรเ์ น็ตด้วยความระมังระวงั ได้

รายชอื่ หน่วยการสอน/การเรียนรู้ หน่วยการสอน/การเรยี นรู้ วชิ า การสร้างเวบ็ ไซต์ รหัส... 2204-2003......คาบ/สปั ดาห์.....4.......คาบ รวม......72…… คาบ หนว่ ยที่ ชื่อหน่วย ทฤษฎี จำนวนคาบ ทฤษฎี ปฏบิ ตั ิ 1 พ้นื ฐานการสรา้ งเวบ็ ไซต์ 22 2 การใช้ Adobe Dreamweaver CS5 44 3 การจัดตกแต่งขอ้ ความ 22 4 การแตง่ เว็บดว้ ยรูปภาพ 44 5 การสร้างตาราง 22 6 การสร้างจุดเชอื่ มโยง 22 7 การสร้างเฟรม 44 8 การสร้างเลเยอร์ 44 9 การสรา้ งฟอร์ม 44 10 การใช้มัลตมิ เี ดียบนเว็บ 44 11 การ Upload เวบ็ เพจขึ้นสู่อินเทอร์เน็ต 44 รวม 72

แผนการสอน/แผนการเรยี นร้ภู าคทฤษฎี แผนการสอน/การเรียนรูภ้ าคทฤษฎี หนว่ ยท่ี 1 ชอ่ื วชิ า การสร้างเว็บไซต์ สอนสปั ดาหท์ ี่ 1 ชอื่ หนว่ ย พน้ื ฐานการสร้างเว็บไซต์ คาบรวม 4 ช่อื เร่อื ง พนื้ ฐานการสร้างเว็บไซต์ จำนวนคาบ 4 หัวข้อเรอ่ื ง ด้านความรู้ 1. ความรูเ้ บอ้ื งต้นเกยี่ วกบั อนิ เทอรเ์ น็ต/เวบ็ ไซต์ 2. สว่ นประกอบเว็บเพจ 3. ภาษามาตรฐานท่ีใช้ในการสรา้ งเวบ็ เพจ ดา้ นทักษะ 4. พฒั นาเวบ็ ไซต์ ดา้ นจิตพิสยั 5. รูปแบบของเว็บไซต์ 6. แนวทางหลักการออกแบบเว็บไซต์ สาระสำคัญ อินเทอรเ์ นต็ (Internet) เป็นเครือข่ายคอมพิวเตอร์ท่ีใหญ่ที่สุดในโลกซงึ่ รวมเอาเครือข่ายย่อยเป็นจำนวน มากต่อเชื่อมภายใต้มาตรฐานเดียวกันจนเป็น เครือข่ายคอมพิวเตอร์ขนาดใหญ่ ทำให้ทั่วโลกเชื่อมโยงกัน เป็น เครือข่ายเดียวกนั ได้ในแพลตฟอรม์ ของ เวิลด์ ไวด์ เว็บ (World Wide Web) สมรรถนะอาชีพประจำหนว่ ย - แสดงความร้พู ้ืนฐานเกี่ยวกับการสร้างเวบ็ ไซต์ คำศัพทส์ ำคัญ

1. อินเทอร์เน็ต หมายถึง เครือข่ายคอมพิวเตอร์ขนาดใหญ่ที่เชื่อมต่อกับเครื่องคอมพิวเตอร์ทั่วโลกเข้า ด้วยกนั 2. Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็น ไฟล์นามสกุล .html เนือ้ หาข้อความ รปู ภาพในหนา้ เวบ็ เพจนัน้ จะเป็นไปตามท่ีเราเขียนกำหนดไว้ 3. Dynamic Website หมายถึง เว็บไซต์ที่หน้าเว็บเพจสามารถเปลี่ยนแปลงข้อมูลเองได้โดยไม่ต้องเขียน แตล่ ะหนา้ เวบ็ เพจเอง เช่น กระดานขา่ ว (Webboard), ระบบสบื ค้นข้อมูล เวบ็ ไซต์รูปแบบน้จี ะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟลเ์ อกสารท่ีไดจ้ ะมีนามสกลุ .php, .asp เป็นต้น และมักจะมกี ารตดิ ตอ่ กับฐานข้อมูล เพื่อบันทึกขอ้ มลู ลงในฐานข้อมูล หรอื นำขอ้ มูลจากฐานข้อมูล ขึ้นมาแสดงผลเปน็ หน้าเวบ็ เพจ จุดประสงคก์ ารสอน/การเรียนรู้ • จดุ ประสงคท์ ่ัวไป / บรู ณาการเศรษฐกจิ พอเพยี ง 1. เพื่อใหม้ คี วามรู้เก่ียวกบั การอธบิ ายความรู้เบอื้ งต้นเก่ียวกบั อนิ เทอรเ์ นต็ /เว็บไซต์ (ด้านความร)ู้ 2. เพื่อใหม้ คี วามรู้เก่ยี วกบั การยกตัวอย่างส่วนประกอบเวบ็ เพจ (ด้านความร)ู้ 3. เพือ่ ใหม้ คี วามรู้เกีย่ วกับการชีแ้ จงภาษามาตรฐานท่ีใชใ้ นการสร้างเว็บเพจ (ด้านความรู)้ 4. เพื่อใหม้ ที กั ษะในการฝกึ พฒั นาเวบ็ ไซต์ (ดา้ นทักษะ) 5. เพ่ือใหม้ เี จตคตทิ ี่ดตี อ่ การยอมรับรปู แบบของเว็บไซต์ (ด้านจิตพสิ ัย) 6. เพอื่ ใหม้ เี จตคตทิ ด่ี ีตอ่ จดั ลำดับแนวทางหลกั การออกแบบเว็บไซต์ (ดา้ นจติ พสิ ยั ) • จุดประสงค์เชิงพฤติกรรม / บรู ณาการเศรษฐกจิ พอเพียง 1. อธิบายความรูเ้ บื้องตน้ เกย่ี วกับอนิ เทอรเ์ นต็ /เว็บไซต์ได้ (ดา้ นความรู้) 2. ยกตัวอยา่ งส่วนประกอบเวบ็ เพจได้ (ดา้ นความร)ู้ 3. ชแี้ จงภาษามาตรฐานท่ใี ช้ในการสร้างเว็บเพจได้ (ด้านความร)ู้ 4. ฝึกพฒั นาเวบ็ ไซต์ได้ (ดา้ นทกั ษะ) 5. ยอมรบั รปู แบบของเวบ็ ไซต์ (ด้านจติ พิสยั ) 6. จดั ลำดับแนวทางหลกั การออกแบบเว็บไซตไ์ ด้ (ด้านจิตพสิ ยั ) เนอื้ หาสาระการสอน/การเรยี นรู้

• ด้านความรู้(ทฤษฎ)ี 1. ความรูเ้ บอ้ื งต้นเก่ียวกบั อนิ เทอร์เน็ต / เวบ็ ไซต์ (จุดประสงค์เชงิ พฤติกรรมขอ้ 1) อินเทอร์เน็ต อนิ เทอรเ์ น็ต คือ เครอื ขา่ ยคอมพวิ เตอร์ขนาดใหญ่ที่เช่ือมต่อกับเคร่ืองคอมพวิ เตอร์ทั่วโลกเข้าด้วยกัน ผู้ใช้ อนิ เทอร์เน็ตสามารถสอ่ื สารถงึ กนั ได้ ภายในเวลาอนั รวดเรว็ ช่วยประหยดั ทรัพยากรและทส่ี ำคัญอนิ เทอร์เนต็ คอื คลัง สมองอนั ย่งิ ใหญ่หรอื หอ้ งสมดุ โลกท่ีทุกคนสามารถค้นควา้ หาความรู้ข้อมูล ขา่ วสารได้โดยไม่ต้องเดนิ ทางไปยังแหล่ง ความรู้นั้น เวลิ ดไ์ วดเ์ ว็บ (World wide web หรอื www) ในช่วงแรกๆ การบริการข้อมูลข่าวสารจะส่งถึงกันบนโปรโตคอล telnet และใช้ ftp (file transfer protocol) เพื่อการแลกเปลี่ยนส่งไฟล์ ต่อมาในปี ค.ศ. 1991 Tim Berners – Lee นักเขียนโปรแกรมทีท่ ำงานใน สถาบัน CERN ซึ่งเป็นห้องปฏิบัติการฟิสิกส์แห่งยุโรป ที่ประเทศสวิตเซอร์แลนด์ได้พัฒนาโปรแกรมเพื่อให้ อินเทอร์เน็ตใช้งานได้ง่ายขึ้นและช่วยให้ผู้ใช้สามารถสร้างเอกสารบนอินเทอร์เน็ตที่เรียกว่าเว็บเพจ ที่สามารถ เช่อื มโยง ไปยังเอกสารท่ีเกย่ี วขอ้ งกันไดก้ ารเชอ่ื มโยงเอกสารน้ีเรียกว่า ไฮเปอร์ลิงก์ ผใู้ ช้สามารถเชอ่ื มโยงเอกสารหนึ่งไปยงั อีกเอกสารหนึง่ ทีอ่ ย่ใู นคอมพิวเตอร์เครอื่ งเดยี วกันหรือต่างเคร่ืองกัน ที่อยู่คนละประเทศไดอ้ ย่างรวดเร็ว เครือข่ายของเอกสารเหล่านี้ประกอบกับเทคโนโลยีที่เกี่ยวข้องในการนำเสนอ ขอ้ มลู นีบ้ นอินเตอร์เน็ตรจู้ ักโดยทว่ั ไปว่าWorld Wide Web (www) หรือ W3 หรอื Web และเครือ่ งคอมพิวเตอร์ที่ ให้บรกิ ารเว็บเพจเรียกวา่ เว็บไซต์ (Web Site) 2. ส่วนประกอบของหนา้ เวบ็ เพจ (จุดประสงคเ์ ชงิ พฤติกรรมข้อ 2) ส่วนประกอบของหนา้ เว็บเพจแบง่ ออกเป็น 3 ส่วน ดงั นี้ 1. สว่ นหวั ของหนา้ (Page Header) 2. ส่วนของเน้อื หา (Page Body) 3. สว่ นทา้ ยกระดาษ (Page Footer) 1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงชื่อเว็บไซต์ โลโก้ แบนเนอรโ์ ฆษณาลิงก์สำหรับข้ามไปยังหนา้ เวบ็ อืน่ 2. ส่วนเน้อื หา (Page Body) จะอย่บู ริเวณตอนกลางของหน้าเว็บเพจ ซึง่ เป็นส่วนท่ีแสดงเนือ้ หาภายใน หนา้ เวบ็ เพจน้นั โดยประกอบด้วยข้อความ ขอ้ มูล ภาพเคลือ่ นไหว เปน็ ต้น 3. ส่วนทา้ ย (Page Footer) จะอยู่บรเิ วณดา้ นลา่ งสุดของหนา้ เว็บเพจ ส่วนมากใช้สำหรบั ลงิ ก์ข้อความ สัน้ ๆ เขา้ ใจงา่ ย หรอื จะมชี ่อื เจา้ ของเวบ็ ไซต์ อเี มลแอดเดรสของผดู้ ูแลเวบ็ ไซต์สำหรบั ติดต่อกับทางเวบ็ ไซต์

3. รูปแบบของเว็บไซต์ (จดุ ประสงคเ์ ชงิ พฤตกิ รรมขอ้ 3) รปู แบบของเวบ็ ไซตส์ ามารถแบ่งได้เปน็ 2 รปู แบบหลกั ๆ คือ 1. Static Website 2. Dynamic Website 1. Static Website Static Website หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็น ไฟล์นามสกุล .html เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้ Static Website เหมาะกับ เว็บไซตท์ ี่มีขนาดไมใ่ หญ่ จำนวนหน้าเว็บเพจไม่มากไม่มกี ารเปลี่ยนแปลงขอ้ มูลบ่อยๆ และไม่มีการติดต่อฐานข้อมูล 2. Dynamic Website Dynamic Website หมายถงึ เว็บไซตท์ ่ีหนา้ เวบ็ เพจสามารถเปลี่ยนแปลงข้อมลู เองไดโ้ ดยไม่ต้องเขียน แตล่ ะหนา้ เว็บเพจเอง เช่น กระดานข่าว (Webboard), ระบบสบื ค้นข้อมูล เวบ็ ไซต์รปู แบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่น ๆ ไฟล์เอกสารท่ีได้จะมีนามสกุล .php, .asp เป็นต้น และมักจะมีการติดต่อกบั ฐานข้อมูล เพื่อบันทึกข้อมูลลงในฐานขอ้ มลู หรือ นำข้อมูลจากฐานขอ้ มูล ขนึ้ มาแสดงผลเป็นหน้าเว็บเพจ 4. ศัพทเ์ บือ้ งต้นเก่ยี วกับเว็บไซต์ - Internet คือ ระบบเครือข่ายคอมพิวเตอร์ที่ใหญ่ที่สุดในโลกเกิดจากการเชื่อมโยงของคอมพิวเตอร์ หลายลา้ นเคร่ืองที่กระจายอยู่ตามทตี่ ่าง ๆ ในโลก อินเทอรเ์ นต็ เปน็ แหลง่ ที่รวมของข้อมลู มหาศาลและเป็นช่องทาง ติดต่อสื่อสารเพื่อแลกเปลี่ยนข้อมูลที่สะดวกและรวดเร็วบริการยอดนิยมบนอินเทอร์เน็ต ได้แก่ เว็บเพจ (www) อีเมล และ Instant Messaging เช่น MSN Messenger, Yahoo Messenger, ICQ, Skype เป็นตน้ - WWW (World Wide Web) เป็นบริการข้อมูล โดยข้อมูลของ www จะอยู่ในรูปเอกสารแบบ Hypertext ซึ่งภายในเอกสารจะมีจุดเชื่อมโยง (link) ไปยังเอกสารอื่นๆ ที่เกี่ยวข้องเอกสารต่าง ๆ ที่เชื่อมโยงกัน เหมือนใยแมงมุม เป็นท่มี าของคำว่า Web. - HTTP เป็นโปรโตคอลสำหรับเปิดดูข้อมูลจาก www เรียกใช้งานได้โดยระบุ http:// และตามด้วย URL ในชอ่ งกรอก Address ด้านบนของโปรแกรมเว็บบราวเซอร์ - URL (Uniform Resource Locator) คือ ข้อความที่บอกตำแหน่งของข้อมูลใน Internet ไม่ว่าจะ เป็น Web page, File ประเภทต่าง ๆ เชน่ รูปภาพ เสยี ง URL ประกอบดว้ ย โปรโตคอล + domain name + (directory ท่ีเก็บไฟล)์ ช่ือไฟล์ เช่น - http://www.enjoyday.net/webtutorial/css/index.html - http://www.enjoyday.net/images/logo.jpg - Domain name คอื ช่ือเว็บไซต์ (ทไี่ มม่ กี ารซำ้ กนั กับเวบ็ ไซต์อนื่ ๆ) เช่น Google.com, yahoo.com, Hotmail.com

- Webpage คือ หน้าเอกสารของบริการ www ที่อยู่ในรูปแบบ HTML ภายในประกอบด้วยข้อความ ภาพ ลิงค์ Webpage แต่ละหน้าจะเชื่อมโยงกัน เพื่อให้เราเรียกดูเอกสารหน้าอื่นๆ ที่เกี่ยวขอ้ งได้อย่างสะดวก ไม่ ต้องระบุ URL เองทกุ ครั้ง - Homepage คือ Webpage หน้าแรกที่ผู้ใช้เห็นเม่ือเข้ามายัง Web Site มักถูกออกแบบให้โดดเด่น นา่ สนใจ และมีลงิ คเ์ ชอ่ื มโยงไปเวบ็ เพจหนา้ อนื่ ๆ - Web Site คอื Webpage หลายๆ หนา้ ทมี่ เี นื้อหาเก่ยี วขอ้ งกนั ประกอบเขา้ ด้วยกัน - Web browser คือ โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสั่ง HTML แล้วประมวลผลเพ่ือ แสดงผลออกมาเป็น Webpage เชน่ Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปน็ ตน้ - Web server คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซึ่งเก็บ Webpage และ โปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Webpage ที่อยู่ในเครื่อง Server ก็จะใช้ Web browser เรียกขอ ข้อมลู โดยระบทุ ่ีอยู่ของขอ้ มูลในลักษณะท่ีเรยี กวา่ URL - Upload คือ การส่งข้อมลู จากเครอ่ื งของเราไปยงั Web server เมอ่ื เราสร้าง Webpage แต่ละหน้า แลว้ ตอ้ งส่งขอ้ มลู ไปเก็บไว้ที่ Web server ท่เี ป็นเครอื่ งคอมพวิ เตอร์ท่ีให้บริการข้อมูล www โดยอาศัยโปรแกรม FTP - Search engine เป็นเครื่องมือหรือโปรแกรมในการค้นหาเว็บต่าง ๆ โดยมีการเก็บรายชื่อเว็บไซต์ และขอ้ มูลทีเ่ กี่ยวข้องตา่ งๆ ของเวบ็ ไซต์ และนำมาจัดเกบ็ ไวใ้ น server เพ่อื ใหส้ ามารถค้นหาและแสดงผลได้สะดวก รวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เป็นตน้ 5. ภาษามาตรฐานที่ใช้ในการสรา้ งเว็บเพ็จ (จุดประสงคเ์ ชงิ พฤตกิ รรมขอ้ 4) HTML (Hypertext Markup Language) คือ ภาษามาตรฐานที่ใช้ในการสร้างเว็บเพจเพื่อนำไปแสดงผล ในโปรแกรม Web browser เอกสารเวบ็ เพจจะมีนามสกลุ เป็น .htm หรือ .html 6. แนวทางหลักการออกแบบเวบ็ ไซต์ (จดุ ประสงคเ์ ชิงพฤตกิ รรมขอ้ 5) แนวทางหลักการออกแบบเว็บไซต์สามารถแบง่ ออกเป็นขนั้ ตอนต่าง ๆ เพอื่ ใหเ้ หมาะสมกับผู้เร่ิมต้นใช้เป็น แนวทางในการสร้างและพฒั นาเวบ็ ไซต์ ตลอดจนการเช่ือมโยงเวบ็ เพจแต่ละหนา้ เข้าด้วยกัน 1. การวางแผน การวางแผนนบั วา่ มคี วามสำคญั มากในการสร้างเว็บไซต์ เพื่อให้การทำงานในขัน้ ตอนต่าง ๆ มีแนวทางที่ชัดเจนและสามารถปฏบิ ัตไิ ดต้ ามท่ตี ั้งเป้าไว้ 2. การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ที่จะ สร้าง นับเป็นสิ่งสำคัญอยา่ งมากในการเริ่มต้นสร้างเว็บไซต์เลยทีเดียวเพ่ือให้เหน็ ภาพว่าเราต้องการนำเสนอข้อมลู แบบใด เช่น เว็บไซต์เพื่อให้ข้อมูลข่าวสาร การบริการด้านต่าง ๆ หรือขายสินค้า เป็นต้น เมื่อสามารถกำหนด จุดประสงค์ของเวบ็ ไซต์ได้แล้ว เงื่อนไขเหล่าน้ีจะเปน็ ตวั กำหนดโครงสร้างรูปแบบรวมถึงหน้าตาและสีเว็บไซต์ของ เราดว้ ย

3. การกำหนดกลุ่มเป้าหมาย เพื่อให้การสร้างและออกแบบเว็บไซต์ได้รับความนิยมการกำหนด กลุ่มเป้าหมายในการเข้าชมเว็บไซตก์ ็นับว่ามีส่วนสำคญั ไมน่ อ้ ย เชน่ เว็บไซต์สำหรบั เยาวชน นกั ศึกษา นักศึกษาใน การค้นหาขอ้ มลู หรอื เว็บไซตส์ ำหรบั บคุ คลทวั่ ไปทเี่ ขา้ ไปใชบ้ รกิ ารตา่ งๆ เป็นตน้ 4. การเตรียมข้อมูล เนื้อหาหรือข้อมูลจัดว่าเป็นสิ่งที่เชิญชวนให้ผู้อื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้อง ทราบวา่ ข้อมูลข่าวสารตา่ ง ๆ สามารถนำมาจากแหลง่ ใดบา้ ง เชน่ การคดิ นำเสนอข้อมูลด้วยตวั เอง หรือนำข้อมูลที่ น่าสนใจมาจากสื่ออื่น เช่น หนังสือพิมพ์ แมกกาซีนเว็บไซต์ และที่สำคัญ ขออนุญาตเจ้าของบทความก่อนเพ่ือ ปอ้ งกนั เร่อื งลขิ สิทธ์ิด้วย 5. การเตรียมสิ่งต่างๆ ที่จำเป็น ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรม สำหรับสร้างเว็บไซต์ ภาพเคลื่อนไหว มัลติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรับฝากเว็บไซต์ (Web Hosting) เปน็ ตน้ 6. การออกแบบหน้าเว็บหลัก (Index.html) หน้าแรกของเว็บเพจถือเป็นหน้าสำหรับต้อนรับแขก เป็น หนา้ เริม่ ต้นของเว็บไซต์ เมอ่ื ผชู้ มเปิดเข้ามาจะพบหน้าน้ีเปน็ อันดับแรกโดยปกติหน้าแรกจะมีองค์ประกอบหลัก คือ โลโก้ องคก์ ร แถบช่อื องค์กร รปู ภาพ โฆษณา และแถบลิงคเ์ ขา้ สู่เวบ็ ไซต์ 7. การจัดโครงสร้างข้อมูล เมื่อได้ข้อมูลต่าง ๆ เช่น กำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การ กำหนดกลมุ่ เป้าหมาย การเตรียมข้อมลู การเตรียมสง่ิ ตา่ ง ๆ ท่จี ำเปน็ จากข้นั แรกเรียบรอ้ ยแลว้ ในข้ันตอนน้ี เราจะ จดั ระบบเพ่อื ใช้เป็นกรอบสำหรับการออกแบบและดำเนินการในข้ันตอนต่อไป ซ่งึ มีรายละเอยี ด ดังน้ี - โครงสรา้ งและสารบัญของเว็บไซต์ - การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำทาง (Navigation) - องคป์ ระกอบที่ต้องนำมาใช้ เช่น ส่อื มัลติมเี ดยี ภาพกราฟิก แบบฟอรม์ ตา่ ง ๆ - การกำหนดรูปแบบและลกั ษณะของเวบ็ เพจ - การกำหนดฐานข้อมูล ภาษาสคริปตห์ รือแอปพลิเคชนั ทีน่ ำมาใช้ในเว็บไซต์ - การบรกิ ารเสริมตา่ ง ๆ - การออกแบบเว็บไซต์นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้าน กราฟิกของหน้าเวบ็ เพจโดยโปรแกรมท่ีเหมาะสมในการออกแบบ คือ Photoshop หรือ Fireworks ซึ่งจะช่วยใน การสร้างเคา้ โครงของหน้าเว็บและองคป์ ระกอบต่าง ๆ เชน่ ชอ่ื เวบ็ ไซต์โลโก้ รปู ไอคอน ปมุ่ ไอคอน ภาพเคลื่อนไหว แบนเนอรโ์ ฆษณา เป็นตน้ - การออกแบบเว็บไซต์นั้นยังต้องคำนึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ที่ไม่ใช่ ภาพกราฟิก เชน่ ขนาดของตัวอกั ษร สขี องขอ้ ความ สพี น้ื ลวดลายของเส้นกรอบเพือ่ ความสวยงามและดงึ ดูดผู้เยี่ยม ชมด้วย 7. กระบวนการพัฒนาเวบ็ ไซต์ (จดุ ประสงค์เชิงพฤตกิ รรมขอ้ 6) การที่จะสร้างพัฒนาเว็บเพจและนำเว็บไซต์เข้าสู่ระบบเวิลด์ ไวซ์ เว็บ ให้คนอื่นเข้ามาเยี่ยมชมได้นั้น มี กระบวนการที่ผู้พฒั นาเวบ็ ไซตจ์ ะต้องศกึ ษาและปฏบิ ตั ติ าม ดังนี้

1. การวางแผนการทำงาน การวางแผนการทำงานเปรียบเหมือนเข็มทิศที่จะชี้ทางให้เรารู้ว่าควรจะ เดนิ ทางไปในทิศทางใดเพอื่ ไม่ให้หลงทาง การสร้างเวบ็ ไซต์กเ็ หมือนกันจำเปน็ ต้องมกี ารวางแผนการทำงานให้รอบ ด้านกอ่ นท่จี ะเริ่มลงมือทำ โดยมีหลกั ที่ตอ้ งกำหนดในการวางแผน ดงั น้ี - ระยะเวลาการทำงาน เป็นการกำหนดชว่ งเวลาที่จะใช้ในการสร้างเวบ็ - ทีมงานหรอื ผู้รว่ มงาน ปกติการสร้างเวบ็ ต้องทำงานเป็นทมี อย่างนอ้ ยต้องมีผู้เชี่ยวชาญ 3 ฝา่ ย คือ ผู้เชี่ยวชาญด้านภาษา HTML หรือโปรแกรมสร้างเว็บเพจ ผู้เชี่ยวชาญด้านการออกแบบและตกแต่งภาพ และ ผเู้ ชี่ยวชาญด้านเนอ้ื หาหรือบรรณาธกิ าร - งบประมาณ เปน็ การกำหนดคา่ ใช้จ่าย - อุปกรณ์หรือเครื่องมือช่วยงาน เช่น เครื่องคอมพิวเตอร์ เครื่องสแกนเนอร์และรูปภาพประกอบ เวบ็ เพจ เปน็ ตน้ - ปัญหาและอุปสรรค 2. การรวบรวมและวิเคราะห์โครงสร้าง เป็นขั้นตอนหนึ่งที่ต่อจากการวางแผนเป็นการนำแผนงานไป ปฏิบัติ โดยการรวบรวมข้อมูลที่จำเป็นต้องใช้ในการสร้างเว็บ ตามหัวข้อที่เลือกไว้ ทั้งเนื้อหา ภาพ เสียงและ ภาพเคล่อื นไหว เกบ็ รวบรวมเป็นไฟล์ข้อมลู หรอื ใสแ่ ฟ้มแยกเปน็ หมวดหมู่ เพอ่ื ความสะดวกในการนำมาใชง้ าน 3. การออกแบบและการสร้างเว็บไซต์ เป็นขั้นตอนการนำข้อมูลทั้งหมดมาสร้างเป็นเว็บไซต์ด้วยภาษา HTML หรอื เคร่ืองมือในการสร้างเว็บอ่ืน ๆ หลกั สำคัญในการออกแบบและสรา้ งเวบ็ คือ - กำหนดจดุ ประสงค์เวบ็ ไซต์ โดยวางเป้าหมายของผเู้ ขา้ ชมวา่ จะเป็นกลมุ่ ใด - เลือกเวบ็ บราวเซอร์ เปน็ การเลอื กเว็บบราวเซอร์ทใี่ ช้แสดงผลเวบ็ ไซต์ จะไดก้ ำหนดขนาดกว้าง ยาว และลักษณะการวางองค์ประกอบเวบ็ ใหส้ วยงามและแสดงผลไดเ้ ร็ว - วางโครงรา่ งของเวบ็ ไซต์ กำหนดโครงร่างว่ามีท้งั หมดกี่เว็บเพจ แตล่ ะเว็บเพจมเี น้ือหาอะไรบ้าง ควรเขยี นเป็นแผนผังเวบ็ ไซตอ์ อกมาบนกระดาษ - ออกแบบหน้าตาเว็บ เป็นขั้นตอนในการลงมือสร้างเว็บเพจแต่ละหน้าตามที่ได้ออกแบบไว้ พรอ้ มกับทดสอบผ่านเว็บบราวเซอร์ (แบบ Offline) 4. ทดสอบและปรับปรุงเว็บไซต์ หมายถึง การทดสอบแบบออฟไลน์ โดยที่ยังไม่ได้นำเว็บไซต์เข้าสู่ อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริงผ่านเว็บบราวเซอร์ เช่น IE เพื่อตรวจสอบตัวอย่างเว็บที่สร้างไว้ เชน่ ขนาดตัวอกั ษร ขนาดภาพ การใชส้ ี ตาราง ฯลฯ ว่าเหมาะสมหรอื ไม่ พรอ้ มกบั การปรบั ปรงุ จนเปน็ ที่น่าพอใจ 5. เผยแพร่ผ่านเว็บไซต์ เป็นการเผยแพร่ให้คนทัว่ไปได้รู้จัก หรือเรียกว่าการอัพโหลด (Upload) โดย เจ้าของเว็บจะต้องจดทะเบียนโดเมนเนม และเช่าพื้นที่โฮสต์ ก็สามารถนำเว็บเพจอัพโหลดขึ้นสูอ่ ินเทอร์เน็ต และ ประชาสัมพันธ์ให้คนทัว่ไปได้รู้จัก การที่จะทำให้คนรับรู้ และเข้ามาใช้บริการเว็บไซต์ได้มากนั้นจะต้องมีการ ประชาสัมพนั ธอ์ ย่างตอ่ เนื่องและใชเ้ วลาพอสมควรและถ้าจะให้ดีควรมีเคาน์เตอร์ (Counter) หรือตัวจดสถติ ิผู้เข้า ชม ก็จะช่วยให้ประเมนิ ไดว้ า่ เวบ็ ไซต์ของเราได้รบั ความสนใจมากนอ้ ยเพยี งใด 6. การพัฒนาเว็บไซต์ เป็นการปรับปรุงเนื้อหา ภาพประกอบหรืออัพเดท (Update) เว็บไซต์ ถือเป็น ขัน้ ตอนสำคัญเพราะในโลกของอินเทอรเ์ น็ตมีการเปล่ียนแปลงอย่างรวดเร็วอยู่ตลอดเวลา ผู้ชมเวบ็ มักจะใช้เวลาใน

การคน้ หาและเปิดผ่านเวบ็ ไซต์ต่าง ๆ อยา่ งรวดเรว็ หากพบวา่ เวบ็ ไซต์ของเราไมไ่ ด้เปลี่ยนแปลงหรือมีข้อมูลใหม่ๆ เพิม่ ขึ้นเลย ผู้เขา้ ชมเวบ็ ก็จะลดจำนวนลงไปเรือ่ ย ๆ จนกลายเป็นเวบ็ ที่ไม่มีผคู้ นเขา้ มาเลยหรอื เป็นเวบ็ ทตี่ ายแล้ว ดงั นั้นการปรบั ปรุงเว็บไซต์อยู่เสมออาจจะวันละครั้ง หรือสปั ดาห์ละคร้งั โดยเพม่ิ ข้อมูลข่าวสารใหม่ ๆ อยู่ เป็นประจำกจ็ ะทำใหเ้ วบ็ ไซตท์ นั สมัย ผู้คนเข้าชมเป็นประจำและมากขึน้ จนพัฒนาเป็นเว็บไซตย์ อดนิยมได้ในทสี่ ดุ • ดา้ นทกั ษะ+ด้านจติ พิสยั (ปฏิบัติ+ด้านจติ พิสัย) (จุดประสงค์เชิงพฤติกรรมขอ้ ที่ 1-6) 1. ใบงานหน่วยท่ี 1 2. แบบฝึกหัด หน่วยท่ี 1 3. กิจกรรมบรู ณาการอาเซยี น 4. กจิ กรรมบรู ณาการเศรษฐกิจพอเพยี ง กิจกรรมการเรยี นการสอนหรอื การเรยี นรู้ ขนั้ ตอนการสอนหรอื กจิ กรรมของครู ข้นั ตอนการเรียนรหู้ รอื กจิ กรรมของนักศกึ ษา

1. ข้ันนำเข้าสูบ่ ทเรียน (15 นาที ) 1. ข้นั นำเข้าสูบ่ ทเรียน (15 นาที ) 1. ผู้สอนจัดเตรียมเอกสาร พร้อมกับแนะนำ 1. ผู้เรียนเตรียมอุปกรณ์และ ฟังครูผู้สอนแนะนำ รายวิชา วิธีการให้คะแนนและวิธีการเรียนเรื่อง รายวชิ า วิธกี ารให้คะแนนและวธิ ีการเรยี นเรื่อง พื้นฐาน พื้นฐานการสรา้ งเว็บไซต์ การสรา้ งเวบ็ ไซต์ 2. ผู้สอนแจ้งจุดประสงค์การเรียนของหน่วย 2. ผู้เรียนทำความเข้าใจเกี่ยวกับจุดประสงค์การ เรียนที่ 1 และขอให้ผู้เรียนร่วมกันทำกิจกรรมการ เรียนของหนว่ ยเรียนท่ี 1 และการให้ความรว่ มมือในการ เรยี นการสอน ทำกจิ กรรม 3. ผู้สอนให้ผู้เรียนยกตัวอย่างส่วนประกอบเว็บ 3. ผู้เรียนยกตัวอย่างส่วนประกอบเว็บเพจตาม เพจ ความเข้าใจของตนเอง 2. ขั้นใหค้ วามรู้ (75 นาที) 2. ขน้ั ให้ความรู้ (75 นาที ) 1. ผู้สอนแนะนำวิธีการใช้ PowerPoint หน่วย 1. ผู้เรียนศึกษา PowerPoint หน่วยที่ 1 เรื่อง ที่ 1 เรื่อง พื้นฐานการสร้างเว็บไซต์และให้ผู้เรียน พื้นฐานการสร้างเว็บไซต์และให้ผู้เรียนศึกษาเอกสาร ศึกษาเอกสารประกอบการสอนการสร้างเว็บไซต์ ประกอบการสอนการสร้างเว็บไซต์ หน้าที่ 2-11 หน่วยที่ 1 หนา้ ท่ี 2-11 ประกอบกับบทเรียนคอมพวิ เตอรช์ ่วยสอน 2. ผู้สอนและผู้เรียนร่วมกันฝึกพัฒนาเว็บไซต์ 2. ผู้เรียนฝึกพัฒนาเว็บไซต์ตามที่ได้ศึกษาจาก ตามทไี่ ดศ้ กึ ษาจากบทเรียนคอมพิวเตอรช์ ่วยสอน บทเรยี นคอมพิวเตอรช์ ว่ ยสอน 3. ข้ันประยุกตใ์ ช้ ( 90 นาที ) 3. ข้นั ประยุกต์ใช้ ( 90 นาที ) 1. ผสู้ อนให้ผู้เรยี นใบงานหนว่ ยท่ี 1 หน้า 13-14 1. ผู้เรียนทำใบงานหน่วยที่ 1 หน้าที่ 13-14 2. ผู้สอนให้ผู้เรียนทำแบบฝึกหัด หน่วยที่ 1 เร่ือง พนื้ ฐานการสร้างเวบ็ ไซต์ หนา้ ท่ี 15-16 2. ผู้เรียนทำแบบฝึกหัด หน่วยที่ 1หน้าที่ 15- 3. ผู้สอนให้ผู้เรียนสืบค้นข้อมูลจาก Web 16 Guide หน้าที่ 11 หรือหาความรู้เพิ่มเติมจาก อินเทอรเ์ น็ต 3. ผู้เรียนสืบค้นข้อมูลจาก Web Guide หน้าท่ี 11 หรือหาความรู้เพิ่มเติมจากอนิ เทอรเ์ น็ต กิจกรรมการเรยี นการสอนหรือการเรยี นรู้ ข้ันตอนการสอนหรือกจิ กรรมของครู ข้ันตอนการเรียนรูห้ รือกิจกรรมของนักศึกษา 4. ขัน้ สรุปและประเมินผล ( 60 นาที ) 4. ข้ันสรปุ และประเมินผล ( 60 นาที ) 1. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ได้เรียน 1. ผู้สอนและผู้เรียนร่วมกันสรุปเนื้อหาที่ไดเ้ รยี น ให้มคี วามเขา้ ใจในทศิ ทางเดียวกนั เพือ่ ใหม้ คี วามเข้าใจในทศิ ทางเดียวกัน

2. ผู้สอนให้ผู้เรียนทำกิจกรรมบูรณาการอาเซียน 2. ผู้เรียนทำกิจกรรมบูรณาการอาเซียน หน้า หน้า 17 17 3. ผูส้ อนใหผ้ ู้เรียนทำกิจกรรมบูรณาการเศรษฐกิจ 3. ผูเ้ รยี นทำกจิ กรรมบูรณาการเศรษฐกจิ พอเพียง พอเพยี ง หน้า 17 หนา้ 17 4. ผู้สอนให้ผู้เรียนสลับกันตรวจแบบฝึกหัด 4. ผู้เรียนสลับกันตรวจแบบฝึกหัด กิจกรรม กิจกรรมบูรณาการอาเซียนด้วยความซื่อสัตย์ แล้วนำ บูรณาการอาเซียนด้วยความซื่อสัตย์ แล้วพร้อมดู คะแนนที่ได้บันทึกลงในแบบบันทึกคะแนนการปฏิบัติ ความก้าวหน้าของตนเอง พร้อมปรบั ปรงุ แก้ไข กจิ กรรมระหวา่ งเรียน 5. ผู้สอนให้ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน 5. ผู้เรียนศึกษาเพิ่มเติมนอกห้องเรียน ด้วย ดว้ ยบทเรียนคอมพวิ เตอรช์ ่วยสอนที่จัดทำขึ้น บทเรยี นคอมพิวเตอร์ชว่ ยสอนที่จัดทำขน้ึ (บรรลุจุดประสงค์เชงิ พฤตกิ รรมขอ้ ท่ี 1-6) (บรรลจุ ุดประสงค์เชงิ พฤตกิ รรมข้อท่ี 1-6) (รวม 240 นาที หรอื 4 คาบเรยี น) งานทีม่ อบหมายหรือกจิ กรรมการวัดผลและประเมนิ ผล ก่อนเรียน 1. จัดเตรยี มเอกสาร สอ่ื การเรียนการสอนหนว่ ยท่ี 1 2. ทำความเข้าใจเก่ียวกับจุดประสงค์การเรียนของหน่วยที่ 1 และให้ความร่วมมือในการทำกิจกรรมใน หน่วยที่ 1 ขณะเรียน 1. ปฏิบัติตามใบงานที่ 1 เร่อื ง พน้ื ฐานการสรา้ งเว็บไซต์

2. ปฏิบัติตามแบบฝึกหัด หน่วยท่ี 1 3. ร่วมกันสรุป “พืน้ ฐานการสร้างเวบ็ ไซต์” หลงั เรียน 1. ปฏบิ ตั ิตามกิจกรรมบรู ณาการอาเซยี น 2. ปฏบิ ตั ิตามกิจกรรมบูรณาการเศรษฐกจิ พอเพียง คำถาม 1. เวิลดไ์ วด์เวบ็ คืออะไร 2. สว่ นประกอบของหนา้ เวบ็ เพจประกอบดว้ ยอะไรบ้าง 3. ขน้ั ตอนในการออกแบบเว็บไซต์มขี ัน้ ตอนใดบา้ ง 4. กระบวนการพฒั นาเว็บไซต์มีลกั ษณะอย่างไร ผลงาน/ช้ินงาน/ความสำเรจ็ ของผู้เรียน ใบงาน แบบฝกึ หัด กิจกรรม สมรรถนะท่พี ึงประสงค์ ผ้เู รียนสรา้ งความเข้าใจเก่ยี วกบั พื้นฐานการสรา้ งเว็บไซต์ 1. วิเคราะห์และตีความหมาย 2. ต้ังคำถาม 3. อภปิ รายแสดงความคดิ เห็นระดมสมอง 4. การประยกุ ตค์ วามรูส้ งู่ านอาชพี สมรรถนะการปฏบิ ตั งิ านอาชพี 1. ปฏบิ ตั ิตามกระบวนการพฒั นาเวบ็ ไซต์

สมรรถนะการขยายผล ความสอดคล้อง จากการเรยี น เรื่อง พ้นื ฐานการสร้างเวบ็ ไซต์ ทีจ่ ดั ทำข้นึ ไดท้ ำให้ผเู้ รียนมคี วามรู้เพมิ่ เกย่ี วกบั ส่วนประกอบ ของเวบ็ เพจ รปู แบบของเว็บเพจ ภาษาและคำศัพท์ทีเ่ กีย่ วกับเว็บไซต์ และกระบวนการพฒั นาเวบ็ ไซต์ขึ้น ทำให้ ผู้เรียนสามารถนำไประยุกต์ใช้ในการเรยี น การทำงาน และสามารถหารายไดร้ ะหวา่ งการเรียนการสอนช่วยเหลือ ผ้ปู กครองไดใ้ นระดับหนึ่ง ส่ือการเรยี นการสอน/การเรยี นรู้ ส่ือส่ิงพิมพ์ 1. เอกสารประกอบการสอนวชิ า การสรา้ งเว็บไซต์ (ใช้ประกอบการเรยี นการสอนจดุ ประสงคเ์ ชงิ พฤติกรรมขอ้ ที่ 1-6) 2. ใบความรู้ท่ี 1 เรอ่ื ง พน้ื ฐานการสร้างเวบ็ ไซต์ (ใชป้ ระกอบการเรียนการสอนขั้นให้ความรู้ เพอ่ื ให้ บรรลุจุดประสงคเ์ ชงิ พฤตกิ รรมข้อที่ 1-6) 3. ใบงานท่ี 1 เร่ือง พน้ื ฐานการสร้างเวบ็ ไซต์ ขั้นประยกุ ต์ใช้ 1 4. แบบฝกึ หดั ข้ันประยกุ ต์ใช้ 2 5. กจิ กรรมบูรณาการอาเซียน ใช้ประกอบการสอนขน้ั สรุป และประเมินผล ขอ้ 2 6. กจิ กรรมบูรณาการเศรษฐกจิ พอเพียง ใช้ประกอบการสอนข้ันสรปุ และประเมนิ ผล ข้อ 3 7. แบบประเมินผลงานตามใบงาน ใช้ประกอบการสอนข้ันประยุกต์ใช้ ข้อ 1-2 9. แบบประเมินพฤติกรรมการทำงาน ใช้ประกอบการสอนขน้ั สรปุ ขอ้ 2-3

สอื่ โสตทศั น์ (ถ้าม)ี 1. PowerPoint เรือ่ ง พน้ื ฐานการสรา้ งเว็บไซต์ ส่ือของจริง เวบ็ ไซต์ (ใช้ประกอบการเรยี นการสอนจดุ ประสงค์เชิงพฤตกิ รรมขอ้ ที่ 1-6) แหล่งการเรียนรู้ ในสถานศกึ ษา 1. ห้องสมดุ วทิ ยาลัยเทคนคิ สมุทรสาคร 2. หอ้ งปฏิบัตกิ ารคอมพวิ เตอร์ ศึกษาหาข้อมลู ทางอินเทอรเ์ นต็ นอกสถานศกึ ษา ผปู้ ระกอบการ สถานประกอบการ ในทอ้ งถ่นิ จังหวัดสมุทรสาคร การบรู ณาการ/ความสมั พันธ์กับวิชาอ่ืน

1. บรู ณาการกบั วิชาชวี ติ และวัฒนธรรมไทย ดา้ นการพดู การอ่าน การเขียน และการฝึกปฏบิ ัติตนทาง สงั คมดา้ นการเตรียมความพรอ้ ม ความรบั ผิดชอบ และความสนใจใฝ่รู้ 2. บูรณาการกบั วิชาพ้ืนฐานการสรา้ งเวบ็ ไซต์ การประเมินผลการเรียนรู้ • หลกั การประเมนิ ผลการเรยี นรู้ กอ่ นเรียน ความรูก้ อ่ นการเรยี นการสอน ขณะเรยี น 1. ตรวจใบงานหน่วยท่ี 1 2. ตรวจแบบฝึกหัด หนว่ ยท่ี 1 3. สงั เกตการทำงาน หลงั เรียน 1. ตรวจกจิ กรรมบรู ณาการอาเซียน 2. ตรวจกจิ กรรมบูรณาการเศรษฐกิจพอเพยี ง

ผลงาน/ชนิ้ งาน/ผลสำเรจ็ ของผูเ้ รียน ใบงาน แบบฝึกหัด กจิ กรรม

รายละเอียดการประเมนิ ผลการเรียนรู้ • จดุ ประสงค์เชิงพฤติกรรม ข้อที่ 1 อธิบายความร้เู บ้อื งต้นเกยี่ วกบั อินเทอร์เน็ต/เว็บไซต์ได้ 1. วธิ ีการประเมนิ : ทดสอบ 2. เครอื่ งมือ : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : อธิบายความร้เู บื้องตน้ เกี่ยวกบั อินเทอรเ์ น็ต/เว็บไซต์ได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤตกิ รรม ข้อที่ 2 ยกตัวอย่างส่วนประกอบเว็บเพจได้ 1. วิธกี ารประเมิน : ทดสอบ 2. เครื่องมือ : แบบทดสอบ 3. เกณฑ์การให้คะแนน : ยกตัวอย่างสว่ นประกอบเว็บเพจได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชงิ พฤตกิ รรม ข้อท่ี 3 ชี้แจงภาษามาตรฐานท่ใี ชใ้ นการสร้างเว็บเพจได้ 1. วธิ ีการประเมิน : ทดสอบ 2. เคร่ืองมอื : แบบทดสอบ 2. เกณฑก์ ารให้คะแนน : ชี้แจงภาษามาตรฐานท่ใี ช้ในการสร้างเวบ็ เพจได้ จะได้ 1 คะแนน • จุดประสงคเ์ ชิงพฤติกรรม ข้อที่ 4 ฝกึ พัฒนาเว็บไซตไ์ ด้ 1. วธิ กี ารประเมิน : ทดสอบ 2. เครอ่ื งมอื : แบบทดสอบ 3. เกณฑ์การให้คะแนน : ฝึกพัฒนาเวบ็ ไซตไ์ ด้ จะได้ 1 คะแนน • จดุ ประสงค์เชิงพฤติกรรม ขอ้ ท่ี 5 ยอมรบั รูปแบบของเวบ็ ไซตไ์ ด้ 1. วธิ กี ารประเมิน : ทดสอบ 2. เคร่ืองมือ : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : ยอมรับรูปแบบของเวบ็ ไซตไ์ ด้ จะได้ 1 คะแนน • จดุ ประสงคเ์ ชงิ พฤติกรรม ข้อที่ 6 จัดลำดับแนวทางหลกั การออกแบบเวบ็ ไซต์ได้

1. วิธกี ารประเมิน : ทดสอบ 2. เครื่องมอื : แบบทดสอบ 3. เกณฑก์ ารให้คะแนน : จดั ลำดบั แนวทางหลกั การออกแบบเวบ็ ไซตไ์ ด้ จะได้ 3 คะแนน

ใบงานหนว่ ยท่ี 1 ตอนท่ี 1 ให้นักศกึ ษาตอบคำถามต่อไปน้ี 1. จงอธบิ ายคำว่าเวิลด์ไวด์เวบ็ มาพอเขา้ ใจ 2. จงอธิบายศัพท์เบื้องต้นเก่ียวกับเว็บไซตด์ งั ต่อไปนี้ HTML, URL, Web browser, Web server 3. ส่วนประกอบของหนา้ เว็บเพจมีกี่สว่ นอะไรบา้ ง 4. จงบอกขน้ั ตอนในการออกแบบเวบ็ ไซต์มาเปน็ ข้อ ๆ 5. จงบอกกระบวนการพัฒนาเวบ็ ไซตม์ าเปน็ ขอ้ ๆ

แบบฝึกหัด หน่วยท่ี 1 คำชี้แจง จงทำเครอื่ งหมาย (X) ลงหนา้ ข้อท่ีถูกตอ้ ง 1. ขอ้ ใดอธิบายความหมายของอนิ เทอร์เน็ตได้ถูกต้อง ก. เครอื ขา่ ยคอมพิวเตอรข์ นาดใหญท่ เี่ ชอ่ื มต่อกับเครื่องคอมพิวเตอรท์ ว่ั โลกเขา้ ดว้ ยกนั ข. เครอื ข่ายคอมพวิ เตอร์ขนาดใหญท่ ่ีเชอื่ มต่อกบั เคร่ืองคอมพิวเตอรห์ ลาย ๆ เคร่ือง ค. เครือข่ายคอมพวิ เตอรข์ นาดเล็กท่ีเชอื่ มตอ่ กับเครื่องคอมพิวเตอร์ท่ัวโลกเขา้ ด้วยกัน ง. เครือขา่ ยคอมพวิ เตอร์ขนาดเล็กทเ่ี ช่อื มต่อกบั เครื่องคอมพวิ เตอร์หลาย ๆ เครื่อง 2. Static Website สร้างด้วยภาษาใด ก. Java ข. HTML ค. C++ ง. ผิดทกุ ข้อ 3. ข้อใดอธิบายความหมายของ Dynamic Website ไดถ้ กู ต้องทสี่ ดุ ก. เว็บไซต์ทห่ี นา้ เวบ็ เพจสามารถเปลย่ี นแปลงข้อมูลเองได้ โดยไมต่ อ้ งเขียนแต่ละหน้าเว็บเพจเอง ข. เวบ็ ไซตท์ หี่ น้าเวบ็ เพจไมส่ ามารถเปลี่ยนแปลงขอ้ มูลเองได้ ค. เว็บไซต์ที่หนา้ เว็บเพจสามารถเปลย่ี นแปลงข้อมูลเองไดโ้ ดยตอ้ งเขียนแตล่ ะหนา้ เว็บเพจเอง ง. เว็บไซตท์ ห่ี นา้ เวบ็ เพจไม่สามารถเปล่ยี นแปลงขอ้ มูลเองไดโ้ ดยต้องเขียนแตล่ ะหนา้ เว็บเพจเอง 4. ขอ้ ใดบอกความหมายของ URL ไดถ้ กู ต้อง ก. ข้อความทบ่ี อกท่ีเกบ็ ของข้อมลู ข. ขอ้ ความทบ่ี อกท่อี ยูข่ องข้อมูล ค. ข้อความท่บี อกตำแหน่งของข้อมูล ง. ถกู ทุกขอ้ 5. ภายในของ Webpage ประกอบดว้ ยขอ้ ใดทถี่ ูกต้องที่สุด ก. ขอ้ ความ ภาพ ข. ภาพ ลงิ ค์ ค. ข้อความ ลงิ ค์ ง. ข้อความ ภาพ ลิงค์

6. Homepage คอื ขอ้ ใดของ Web site ก. หน้าเนือ้ หา ข. หลาย ๆ หน้า ค. หน้าแรก ง. ผิดทกุ ขอ้ 7. เอกสารของเวบ็ เพจจะมนี ามสกุลเป็นอะไร ก. .htm ข. .htlm ค. .hlmt ง. .http 8. ขอ้ ใดอธบิ ายความหมายของ Upload ไดถ้ กู ตอ้ งทส่ี ุด ก. การสง่ ขอ้ มลู จากเคร่อื งเราไปยงั อกี เครือ่ ง ข. การสง่ ขอ้ มลู จากอีกเครือ่ งมายังเคร่ืองเรา ค. การส่งข้อมลู จากเครอ่ื งของเราไปยงั Web server ง. การสง่ ขอ้ มลู จากเคร่อื งของเราไปยัง Web browser 9. ข้อใดไม่ใช่รปู แบบหลกั ๆ ของเว็บไซต์ ก. Statick website , Dynamic website ข. Static website , Dynamo website ค. Static website , Dynamic website ง. ข้อ ค. ถูกข้อเดียว 10. ขอ้ ใดไมใ่ ช่สว่ นประกอบของเว็บเพจ ก. ส่วนหวั ของหนา้ ข. ส่วนของเนอื้ หา ค. สว่ นท้ายกระดาษ ง. ส่วนขอบเขตของเว็บเพจ กจิ กรรมบรู ณาการอาเซยี น

คำสงั่ ให้นกั ศกึ ษาโยงเส้นความสมั พนั ธใ์ ห้ถูกต้อง HTML Upload ส่วนหวั ของหนา้ Search engine การส่งขอ้ มูล Uniform Resource Locator URL Hypertext Markup Language เครื่องมอื คน้ หา Page Header ส่วนของเน้ือหา Page Body ส่วนทา้ ยของหนา้ Page Footer กิจกรรมบูรณาการเศรษฐกจิ พอเพยี ง กจิ กรรม ความรู้พน้ื ฐานในการสร้างเวบ็ ไซต์ จดุ ประสงค์ สามารถสรา้ งเวบ็ ไซตไ์ ด้ ภาระงาน 1. ใหน้ ักศกึ ษาสร้างเวบ็ ไซตข์ ้นึ มาและส่งให้ครผู ูส้ อน แบบประเมินผลการนำเสนอผลงาน ช่อื กลมุ่ ……………………………………………ชน้ั ………………………หอ้ ง...........................

รายชอ่ื สมาชิก 1……………………………………เลขท…่ี …. 2……………………………………เลขท…ี่ …. 3……………………………………เลขท…ี่ …. 4……………………………………เลขท…ี่ …. ที่ รายการประเมนิ คะแนน ข้อคิดเห็น 32 1 1 เนอื้ หาสาระครอบคลุมชดั เจน (ความร้เู กย่ี วกับเนือ้ หา ความถูกตอ้ ง ปฏภิ าณในการตอบ และการแก้ไขปัญหาเฉพาะหน้า) 2 รปู แบบการนำเสนอ 3 การมสี ว่ นรว่ มของสมาชิกในกล่มุ 4 บุคลิกลักษณะ กิรยิ า ทา่ ทางในการพูด นำ้ เสยี ง ซง่ึ ทำให้ผู้ฟังมีความ สนใจ รวม ผู้ประเมนิ ………………………………………………… เกณฑ์การให้คะแนน 1. เนือ้ หาสาระครอบคลุมชดั เจนถูกตอ้ ง 3 คะแนน = มสี าระสำคญั ครบถ้วนถกู ต้อง ตรงตามจุดประสงค์ 2 คะแนน = สาระสำคญั ไม่ครบถ้วน แตต่ รงตามจุดประสงค์ 1 คะแนน = สาระสำคญั ไม่ถูกต้อง ไม่ตรงตามจดุ ประสงค์ 2. รปู แบบการนำเสนอ 3 คะแนน = มรี ปู แบบการนำเสนอท่เี หมาะสม มีการใชเ้ ทคนคิ ทแี่ ปลกใหม่ ใชส้ ื่อและเทคโนโลยี ประกอบการ นำเสนอทน่ี า่ สนใจ นำวัสดใุ นท้องถน่ิ มาประยกุ ตใ์ ชอ้ ย่างคุ้มค่าและประหยดั คะแนน = มเี ทคนคิ การนำเสนอทีแ่ ปลกใหม่ ใช้สือ่ และเทคโนโลยีประกอบการนำเสนอท่ีน่าสน ใจ แตข่ าดการ ประยกุ ต์ใช้ วสั ดุในท้องถ่นิ 1 คะแนน = เทคนคิ การนำเสนอไมเ่ หมาะสม และไม่นา่ สนใจ 3. การมสี ่วนรว่ มของสมาชิกในกลุ่ม 3 คะแนน = สมาชกิ ทกุ คนมีบทบาทและมีส่วนรว่ มกจิ กรรมกล่มุ 2 คะแนน = สมาชกิ ส่วนใหญม่ บี ทบาทและมสี ่วนร่วมกจิ กรรมกลมุ่ 1 คะแนน = สมาชิกสว่ นน้อยมีบทบาทและมสี ว่ นรว่ มกจิ กรรมกลุ่ม 4. ความสนใจของผู้ฟงั 3 คะแนน = ผู้ฟังมากกวา่ รอ้ ยละ 90 สนใจ และใหค้ วามรว่ มมือ 2 คะแนน = ผูฟ้ ังร้อยละ 70-90 สนใจ และใหค้ วามรว่ มมอื 1 คะแนน = ผฟู้ ังน้อยกว่าร้อยละ 70 สนใจ และใหค้ วามร่วมมือ แบบประเมนิ กระบวนการทำงาน ชอ่ื ……………………………………………ชนั้ ………………………ห้อง...........................

ท่ี รายการประเมนิ คะแนน ข้อคดิ เหน็ 1 การกำหนดเปา้ หมายร่วมกัน 321 2 การแบง่ หนา้ ที่รับผดิ ชอบและการเตรยี มความพรอ้ ม 3 การปฏิบตั ิหนา้ ที่ทไ่ี ด้รับมอบหมาย 4 การประเมนิ ผลและปรบั ปรงุ งาน รวม ผู้ประเมิน………………………………………………… วนั ท…่ี ………เดอื น……………………..พ.ศ…………... เกณฑก์ ารใหค้ ะแนน 1. การกำหนดเปา้ หมายรว่ มกนั 3 คะแนน = สมาชิกทกุ คนมสี ่วนรว่ มในการกำหนดเปา้ หมายการทำงานอยา่ งชัดเจน 2 คะแนน = สมาชิกสว่ นใหญ่มสี ว่ นรว่ มในการกำหนดเปา้ หมายในการทำงาน 1 คะแนน = สมาชกิ สว่ นนอ้ ยมีส่วนรว่ มในการกำหนดเป้าหมายในการทำงาน 2. การมอบหมายหนา้ ทีร่ ับผิดชอบและการเตรียมความพร้อม 3 คะแนน = กระจายงานไดท้ วั่ ถงึ และตรงตามความสามารถของสมาชกิ ทุกคน มกี ารจดั เตรยี มสถานที่ สอ่ื / อุปกรณ์ไว้อยา่ งพรอ้ มเพรยี ง 2 คะแนน = กระจายงานไดท้ ว่ั ถึง แตไ่ ม่ตรงตามความสามารถ และมสี อ่ื / อปุ กรณ์ไว้อย่างพร้อมเพรียง แตข่ าด การจดั เตรียมสถานท่ี 1 คะแนน = กระจายงานไม่ท่วั ถงึ และมีส่อื / อปุ กรณไ์ ม่เพยี งพอ 3. การปฏิบัตหิ นา้ ทที่ ไี่ ดร้ ับมอบหมาย 3 คะแนน = ทำงานไดส้ ำเรจ็ ตามเปา้ หมาย และตามเวลาท่กี ำหนด 2 คะแนน = ทำงานได้สำเรจ็ ตามเปา้ หมาย แต่ช้ากว่าเวลาที่กำหนด 1 คะแนน = ทำงานไมส่ ำเรจ็ ตามเป้าหมาย 4. การประเมนิ ผลและปรับปรงุ งาน 3 คะแนน = สมาชกิ ทุกคนรว่ มปรกึ ษาหารือ ตดิ ตาม ตรวจสอบ และปรบั ปรุงงานเป็นระยะ 2 คะแนน = สมาชกิ บางส่วนมสี ว่ นร่วมปรึกษาหารือ แต่ไม่ปรับปรงุ งาน 1 คะแนน = สมาชิกบางส่วนไมม่ สี ว่ นรว่ มปรกึ ษาหารือ และปรับปรงุ งาน

เฉลยใบงาน หนว่ ยท่ี 1 ตอนท่ี 1 ใหน้ ักศึกษาตอบคำถามต่อไปน้ี 1. จงอธิบายคำวา่ เวลิ ด์ไวด์เว็บมาพอเข้าใจ ในช่วงแรก ๆ การบริการข้อมูลข่าวสารจะส่งถึงกันบนโปรโตคอล telnet และใช้ ftp (file transfer protocol) เพื่อการแลกเปลี่ยนส่งไฟล์ ต่อมาในปี ค.ศ. 1991 Tim Berners – Lee นักเขียนโปรแกรมที่ทำงานใน สถาบัน CERN ซึ่งเป็นห้องปฏิบัติการฟิสิกส์แห่งยุโรป ที่ประเทศสวิตเซอร์แลนด์ได้พัฒนาโปรแกรมเพื่อให้ อินเตอร์เน็ตใช้งานได้ง่ายขึ้นและช่วยให้ผู้ใช้สามารถสร้างเอกสารบนอินเตอร์เน็ตที่เรียกว่าเว็บเพจ ที่สามารถ เช่ือมโยง ไปยังเอกสารทีเ่ ก่ยี วขอ้ งกนั ไดก้ ารเชื่อมโยงเอกสารนีเ้ รยี กวา่ ไฮเปอรล์ งิ ก์ ผู้ใช้สามารถเชือ่ มโยงเอกสารหนึ่งไปยังอีกเอกสารหน่ึงท่ีอยู่ใน คอมพิวเตอร์เครื่องเดียวกันหรือต่างเคร่ือง กันที่อยู่คนละประเทศได้อย่างรวดเร็ว เครือข่ายของเอกสารเหล่านี้ประกอบกับเทคโนโลยีที่เกี่ยวข้อง ในการ นำเสนอข้อมูลนี้บนอินเตอร์เน็ตรู้จักโดยทั่วไปว่า World Wide Web (www) หรือ W3 หรือ Web และเคร่ือง คอมพวิ เตอร์ทใี่ ห้บริการเวบ็ เพจเรยี กว่าเวบ็ ไซต์ (Web Site) 2. จงอธบิ ายศพั ทเ์ บอื้ งตน้ เก่ียวกบั เว็บไซตด์ งั ตอ่ ไปนี้ HTML, URL, Web browser, Web server - HTTP เปน็ โปรโตคอลสำหรบั เปิดดูขอ้ มูลจาก www เรียกใช้งานไดโ้ ดยระบุ http:// และตามด้วย URL ในชอ่ งกรอก Address ดา้ นบนของโปรแกรมเว็บบราวเซอร์ - URL (Uniform Resource Locator) คอื ขอ้ ความทีบ่ อกตำแหน่งของขอ้ มูลใน Internet ไมว่ ่าจะ เป็น Web page, File ประเภทต่างๆ เช่น รูปภาพ เสียง URL ประกอบด้วย โปรโตคอล + domain name + (directory ท ี ่ เ ก ็ บ ไ ฟ ล ์ ) ช ื ่ อ ไ ฟ ล์ เ ช ่ น http://www.enjoyday.net/webtutorial/css/index.html, http://www.enjoyday.net/images/logo.jpg - Web browser คือ โปรแกรมสำหรับเรียกดูเว็บเพจ โดยจะแปลคำสัง่ HTML แล้วประมวลผลเพือ่ แสดงผลออกมาเปน็ Web page เช่น Internet Explorer (IE), Mozilla Firefox, Safari, Opera, และ Netscape Navigator เปน็ ตน้ - Web server คือ เครื่องคอมพิวเตอร์ที่ทำหน้าที่ให้บริการข้อมูลใน www ซ่งึ เกบ็ Web page และ โปรแกรมจัดการบริการ เมื่อผู้ใช้ต้องการดู Web page ที่อยู่ในเครื่อง Server ก็จะใช้ Web browser เรียกขอ ข้อมลู โดยระบทุ อี่ ยูข่ องข้อมลู ในลักษณะท่ีเรียกวา่ URL 3. ส่วนประกอบของหนา้ เว็บเพจมีกี่สว่ นอะไรบา้ ง 1. ส่วนหัว (Page Header) จะอยบู่ รเิ วณบนสุดของหน้าเว็บเพจ เปน็ สว่ นที่แสดงชื่อเว็บไซต์ โลโก้ แบน เนอรโ์ ฆษณาลงิ ก์สำหรบั ขา้ มไปยังหน้าเวบ็ อืน่ 2. สว่ นเน้อื หา (Page Body) จะอยบู่ รเิ วณตอนกลางของหน้าเว็บเพจ ซงึ่ เป็นสว่ นที่แสดงเนื้อหาภายใน หนา้ เวบ็ เพจนน้ั โดยประกอบดว้ ยขอ้ ความ ขอ้ มลู ภาพเคล่อื นไหว เปน็ ต้น 3. สว่ นทา้ ย (Page Footer) จะอยู่บรเิ วณด้านล่างสุดของหน้าเว็บเพจ ส่วนมากใช้สำหรับลิงก์ข้อความ ส้นั ๆ เขา้ ใจง่าย หรือจะมชี ่อื เจ้าของเว็บไซต์ อเี มลแอดเดรสของผดู้ ูแลเวบ็ ไซตส์ ำหรบั ติดตอ่ กบั ทางเวบ็ ไซต์

4. จงบอกขั้นตอนในการออกแบบเว็บไซต์มาเปน็ ขอ้ ๆ 1. การวางแผน 2. การกำหนดเนอ้ื หาและจดุ ประสงค์ของเว็บไซต์ 3. การกำหนดกลมุ่ เปา้ หมาย 4. การเตรียมข้อมลู 5. การเตรยี มส่งิ ตา่ ง ๆ ท่ีจำเป็น 6. การออกแบบหนา้ เวบ็ หลกั (Index.html) 7. การจัดโครงสรา้ งข้อมูล 5. จงบอกกระบวนการพฒั นาเว็บไซต์มาเป็นข้อ ๆ 1. การวางแผนการทำงาน 2. การรวบรวมและวิเคราะหโ์ ครงสรา้ ง 3. การออกแบบและการสรา้ งเว็บไซต์ เปน็ 4. ทดสอบและปรับปรุงเว็บไซต์ 5. เผยแพร่ผ่านเว็บไซต์ 6. การพฒั นาเว็บไซต์ เฉลย แบบฝกึ หดั หน่วยท่ี 1 1. ก 2. ข 3. ก 4. ค 5. ง 6. ค 7. ก 8. ค 9. ง 10. ง เฉลยกจิ กรรมบรู ณาการอาเซยี น คำสง่ั ให้นกั ศึกษาโยงเส้นความสัมพันธใ์ หถ้ ูกตอ้ ง Upload HTML Search engine ส่วนหัวของหนา้



บันทกึ หลงั การสอน หน่วยที่ 1 พนื้ ฐานการสรา้ งเว็บไซต์ ผลการใชแ้ ผนการเรียนรู้ 1. เนอ้ื หาสอดคลอ้ งกบั จุดประสงค์เชงิ พฤติกรรม 2. สามารถนำไปใชป้ ฏิบัติการสอนไดค้ รบตามกระบวนการเรยี นการสอน 3. สื่อการสอนเหมาะสมดี ผลการเรียนของนกั ศกึ ษา 1. นกั ศึกษาส่วนใหญ่มีความสนใจใฝ่รู้ เข้าใจในบทเรยี น อภิปรายตอบคำถามในกลุ่ม และร่วมกนั ปฏบิ ัตใิ บงานที่ไดร้ บั มอบหมาย 2. นกั ศึกษากระตอื รอื ร้นและรบั ผดิ ชอบในการทำงานกล่มุ เพ่อื ใหง้ านสำเร็จทนั เวลาทีก่ ำหนด 3. นกั ศกึ ษาแสดงความรู้พน้ื ฐานเกีย่ วกับการสรา้ งเว็บไซต์ได้ ผลการสอนของครู 1. สอนเนอื้ หาได้ครบตามหลักสูตร 2. แผนการสอนและวิธีการสอนครอบคลมุ เนอ้ื หาการสอนทำให้ผสู้ อนสอนได้อย่างมั่นใจ 3. สอนได้ทันตามเวลาทีก่ ำหนด

แผนการสอน/แผนการเรยี นรูภ้ าคทฤษฎี แผนการสอน/การเรียนรู้ภาคทฤษฎี หน่วยที่ 2 ช่อื วชิ า การสรา้ งเวบ็ ไซต์ สอนสัปดาหท์ ่ี 2-3 ชื่อหนว่ ย การใช้ Adobe Dreamweaver CS5 คาบรวม 12 ช่ือเรอื่ ง การใช้ Adobe Dreamweaver CS5 จำนวนคาบ 4 หัวข้อเร่ือง ด้านความรู้ 1. ยกตัวอย่างหนา้ ตา่ ง Welcome screen ด้านทกั ษะ 2. ใชง้ านโปรแกร Adobe Dreamweaver CS5 ดา้ นจิตพสิ ัย 3. ส่วนประกอบของหน้าตา่ งการใชง้ านโปรแกรม ด้านคณุ ธรรม จริยธรรม 4. ใช้โปรแกรม Adobe Dreamweaver CS5 ใหเ้ หมาะสมกับความตอ้ งการ สาระสำคัญ Dramweaver เป็นโปรแกรมที่ใช้ในการสร้างและพัฒนาเว็บไซต์ที่ได้รับความนิยมมาโดยตลอด เนื่องจากมคี ุณสมบัตทิ ี่ใช้งานง่ายผู้ใช้สามารถจัดวางองค์ประกอบของหนา้ เว็บเพจได้ตามต้องการ ดังนั้น ผู้ที่ไม่ เคยสร้างเว็บไซตม์ ากอ่ น ก็สามารถศกึ ษาการใชง้ านโปรแกรมนไี้ ด้ไม่ยาก สมรรถนะอาชีพประจำหน่วย 1. เปดิ ใชง้ านโปรแกรม Adobe Dreamweaver CS5 คำศพั ท์สำคญั 1. Windows Document หมายถงึ สว่ นท่ใี ช้สำหรับใสเ่ น้อื หาและจดั องคป์ ระกอบของเวบ็ เพจวธิ ีใช้งาน วินโดวส์นี้จะคล้ายกบั ที่ใช้โปรแกรมไมโครซอฟต์เวริ ด์ เช่น พิมพ์ขอ้ ความ วางภาพกราฟิก และสร้างตารางขอ้ มูล โดยเนือ้ หาตา่ งๆ จะแสดงออกมาคล้ายกบั ท่ปี รากฏบนเบราว์เซอร์ 2. ทูลบาร์ (Toolbar) คอื แถบเครื่องมือซึง่ รวบรวมปมุ่ คำสงั่ ท่จี ำเปน็ ตอ้ งใช้งานบอ่ ย ๆเอาไว้ในโปรแกรม

3. พาเนล Insert ประกอบด้วยปุ่มคำสั่งทีใ่ ช้วางออบเจ็คชนิดตา่ ง ๆ ลงบนเว็บเพจโดยปุม่ เหลา่ น้ีจะแบง่ ออกเป็นกลุ่ม ๆ เช่น กล่มุ Form สำหรับสร้างฟอร์ม เปน็ ตน้ 4. แถบสถานะ (Status Bar) เป็ นแถบซึ่งอยู่ด้านล่างของ Windows Documentด้วยปุ่มคำสั่งที่ใช้วาง ออบเจ็คชนิดตา่ ง ๆ ลงบนเว็บเพจ 5. พาเนล Properties เป็นพาเนลท่ใี ช้แสดงคณุ สมบัติสำคญั ๆ ของออบเจค็ ทีก่ ำลงั เลือกบนเว็บเพจ และ ใช้กำหนดหรือแก้คุณสมบัติเหล่านั้นได้ เช่น ขนาด ตำแหน่ง และสี ทั้งที่รายละเอียดบนพาเนล Properties จะ เปลีย่ นแปลงตลอดเวลาขน้ึ กับวา่ ขณะน้นั กำลงั เลอื กออบเจค็ ใด 6. แถบเมนู (Menu bar) เป็นส่วนที่ใช้เก็บคำสั่งต่างๆ ของโปรแกรม โดยมีการแบ่งคำสั่งออกเป็น หมวดหมู่เพอื่ ให้สะดวกตอ่ การเรยี กใช้งาน จดุ ประสงคก์ ารสอน/การเรยี นรู้ • จดุ ประสงคท์ ่วั ไป / บูรณาการเศรษฐกจิ พอเพยี ง 1. เพ่ือใหม้ ีความรู้เกี่ยวกับการยกตวั อย่างหน้าตา่ ง Welcome screen (ดา้ นความรู้) 2. เพ่ือใหม้ ที กั ษะในการทดลองเปิดใช้งานโปรแกร Adobe Dreamweaver CS5 (ด้านทักษะ) 3. เพ่ือให้มีเจตคติที่ดตี อ่ การจำแนกสว่ นประกอบของหน้าต่างการใช้งานโปรแกรม (ด้านจติ พิสยั ) 4. เพื่อใช้โปรแกรม Adobe Dreamweaver CS5 ให้เหมาะสมกับความตอ้ งการ(ด้านคณุ ธรรม จรยิ ธรรม) • จุดประสงคเ์ ชงิ พฤตกิ รรม / บูรณาการเศรษฐกิจพอเพยี ง 1. ยกตวั อย่างหน้าต่าง Welcome screen ได้ (ด้านความร้)ู 2. ทดลองเปดิ ใช้งานโปรแกร Adobe Dreamweaver CS5 ได้ (ดา้ นทกั ษะ) 3. จำแนกส่วนประกอบของหน้าตา่ งการใชง้ านโปรแกรมได้ (ด้านจิตพสิ ยั ) 4. ใช้โปรแกรม Adobe Dreamweaver CS5 ใหเ้ หมาะสมกบั ความต้องการ(ด้านคุณธรรม จริยธรรม) เนอ้ื หาสาระการสอน/การเรยี นรู้ • ด้านความรู้(ทฤษฎ)ี

1. เรมิ่ ตน้ ใชง้ านโปรแกรม Adobe Dreamweaver CS5 การเรยี กเปดิ โปรแกรม Adobe Dreamweaver ขึ้นมาใช้งานมีขนั้ ตอนดงั นี้ 1. คลกิ ปุ่ม เลอื ก All Programs > Adobe Dreamweaver CS5 2. จะเข้าสหู่ น้าจอโปรแกรม 2. สว่ นประกอบของหน้าตา่ ง Welcome Screen Welcome Screen เป็นเครื่องมอื สำหรบั ช่วยเลือกขน้ั ตอนเร่มิ ต้นในการใชง้ านโปรแกรมโดยตัวเลือกจะ แบ่งออกเปน็ กลุ่ม ๆ ดังนี้

1. Open a Recent Item เปดิ ไฟล์ท่เี คยใช้ โดยคลิกเลอื กจากรายชื่อทแี่ สดงอยู่ (เรียงลำดบั จากที่เคย เปิดหลังสุดเปน็ ต้นไป หรอื คลิก Open เพือ่ เปิดไฟลอ์ ื่น ๆ 2. Create New สร้างไฟลใหม่ โดยถ้าคลิก HTML จะเป็นการสร้างเวบ็ เพจพื้นฐาน แต่ถ้าคลิกหัวข้อ อื่นจะเป็นการสร้างเวบ็ เพจหรือไฟลต์ ามชนิดนน้ั ๆ 3. Top Features (videos) เป็นเส้นทางลัดสำหรับเข้าดูรายละเอยี ดและเทคนิคในการใช้งานต่าง ๆ ของโปรแกรมผ่านทางเวบ็ ไซตข์ อง Adobe 3. ส่วนประกอบของหน้าต่างการใช้งานโปรแกรม Adobe Dreamweaver CS5 หนา้ ต่างการใช้งานโปรแกรม Adobe Dreamweaver CS5 จะมสี ่วนประกอบทส่ี ำคัญดงั นี้

1. Windows Document คือ สว่ นทีใ่ ช้สำหรับใส่เนอื้ หาและจัดองคป์ ระกอบของเว็บเพจวิธีใช้งานวินโดวส์ นี้จะคล้ายกับที่ใช้โปรแกรมไมโครซอฟต์เวิร์ด เช่น พิมพ์ข้อความ วางภาพกราฟิก และสร้างตารางข้อมูล โดย เนื้อหาต่างๆ จะแสดงออกมาคล้ายกับทป่ี รากฏบนเบราวเ์ ซอร์ Windows Document มมี มุ มองในการทำงาน 6 แบบดว้ ยกนั ซึ่งสามารถเลอื กไดโ้ ดยคลิกป่มุ มุมมองบน ทูลบาร์ หรือหากต้องการสลับการทำงานระหว่างมุมมอง Code กับมุมมอง Design สามารถเลือกคำสั่ง View > Switch Views 1.1 มุมมองออกแบบ (Design View) จะแสดงเวบ็ เพจตามลักษณะคลา้ ยกับท่ีจะปรากฏบนเบราว์เซอร์ โดยสามารถแกไ้ ขและจดั วางเนอื้ หาตา่ ง ๆ ลงบนเว็บเพจ 1.2 มุมมองโคด้ (Code View) จะแสดงเวบ็ เพจในรปู ของชุดคำสงั่ ภาษา HTML ท่ถี ูกสรา้ งขึ้นอัตโนมัติ โดยโปรแกรม Adobe Dreamweaver หรือเป็นคำสั่งที่ผู้ใช้เพิ่มเข้าไปเองนอกจากนี้ก็อาจจะมีคำสั่งสไตล์ชีต (CSS) และภาษาสคริปต์ (script) ต่าง ๆ ผู้ใช้สามารถตรวจสอบและแก้ไขคำสั่งได้ตามต้องการ ซึ่งการแก้ไขจะ ส่งผลกลบั ไปยงั มมุ มองออกแบบโดยอัตโนมตั ิ 1.3 มุมมองโค้ดและออกแบบ (Code and Design View หรือ Split) จะแสดงเว็บเพจทั้งในรูปแบบที่ ปรากฏบนเบราว์เซอร์และรปู แบบคำสั่งภาษา HTML พร้อมกนั เพื่อใช้ในการออกแบบและตรวจสอบแก้ไขคำส่งั ไปในขณะเดียวกัน สามารถปรับขนาดพื้นทขี่ องแตล่ ะส่วนไดโ้ ดยการคลกิ แล้วลากท่เี สน้ แบ่งระหวา่ งทง้ั 2 สว่ นน้ี 1.4 มุมมองแสดงหน้าเวบ็ เหมือนดบู นเบราว์เซอร์ (Line View) จะแสดงเว็บเพจเหมอื นกับการแสดงผล บนหน้าเว็บบนเบราว์เซอร์สามารถแสดงผลของ JavaScript และ Plugin ต่าง ๆ เป็นมุมมองที่เพิ่มขึ้นมาเพื่อ อำนวยความสะดวกต่อผู้จัดทำเว็บไซต์ในการตรวจเช็กองค์ประกอบและลิงค์ต่าง ๆ ได้อย่างรวดเร็ว ทำให้ ประหยัดเวลากว่าการแสดงผลผา่ นทางเวบ็ เบราวเ์ ซอรโ์ ดยตรง

1.5 มุมมองแสดงผลโค้ดหน้าเว็บ (Live Code) จะแสดงผลโค้ดร่วมกับมุมมอง Line View (จะแสดง มุมมอง Live Code ได้ก็ต่อเมื่ออยู่ที่มุมมอง Live View เท่านั้น) เป็นมุมมองที่เสมือนการใช้คำสั่ง View > Source จากเบราว์เซอร์ ซึง่ ใชต้ รวจดูโคด้ ในตำแหน่งตา่ ง ๆ เท่าน้ันไมส่ ามารถแกไ้ ขโคด้ ในมุมมองนไี้ ด้ 1.6 มุมมองแสดงผลหน้าเว็บที่จัดรูปแบบด้วย CSS (Inspect) จะแสดงผลร่วมกับมุมมอง Live View ซึ่งเป็ นมุมมองทใ่ี ชต้ รวจดกู ารจัดรปู แบบด้วยคำสัง่ CSS ในตำแหน่งท่ีเมาส์เล่อื นผ่าน โดยสามารถดูได้จากพาเนล CSS Styles เพ่อื ให้เลอื กใชห้ รือยกเลิกคำส่ังท่เี คยกำหนดเอาไวใ้ นมมุ มองนี้ได้ 2. ทูลบาร์ (Toolbar) คือ แถบเครื่องมือซ่ึงรวบรวมปุ่มคำสั่งที่จำเป็นต้องใช้งานบ่อย ๆเอาไว้ในโปรแกรม Adobe Dreamweaver CS5 มีทูลบาร์อยู่ 5 ชุดด้วยกัน ซึ่งสามารถเปิดใช้หรือปิ ดได้โดยเลือกคำสั่ง View > Toolbars > ชือ่ ทลู บาร์ 2.1 ทูลบาร์ Document เครื่องมือนี้ประกอบด้วยปุ่มคำสั่งในการกำหนดมุมมองและการแสดงผล ของเว็บเพจ 2.2 ทูลบาร์ Standard ประกอบดว้ ยปุ่มคำสั่งในการจดั การไฟลเ์ วบ็ เพจ และคำสัง่ พืน้ ฐานในการย้าย คัดลอก วางเนื้อหา รวมทัง้ การยกเลกิ และทำซำ้ คำส่ังด้วย 3. พาเนล Insert ประกอบด้วยปุ่มคำสั่งที่ใช้วางออบเจ็คชนิดต่าง ๆ ลงบนเว็บเพจโดยปุ่มเหล่านี้จะแบ่ง ออกเป็นกลุ่ม ๆ เช่น กลมุ่ Form สำหรบั สร้างฟอร์ม เป็นต้น 3.1 Common เป็นกลุ่มคำสั่งสำหรับวางออบเจ็คที่ต้องใช้งานบ่อย ๆ ในการสร้างเว็บเพจ เช่น ภาพกราฟกิ ตาราง ไฟลม์ ลั ตมิ เี ดยี เป็นต้น 3.2 Layout สำหรบั วางออบเจค็ ทีใ่ ชจ้ ดั โครงสร้างของเวบ็ เพจ เช่น ตาราง เฟรม และเลเยอร์ 3.3 Forms สำหรับวางออบเจ็คทใี่ ชส้ ร้างแบบฟอร์มเพ่อื รับขอ้ มลู จากผู้ชม เชน่ ฟิลดช์ นิดต่าง ๆ 3.4 Data สำหรบั วางคำส่งั ท่ใี ชจ้ ดั การฐานขอ้ มลู และดงึ ข้อมลู จากฐานขอ้ มูลมาแสดงบนเวบ็ เพจ 3.5 Spry สำหรับวางออบเจ็คทใี่ ช้เทคโนโลยีของ Spry แบบตา่ ง ๆ 3.6 InContextEditing สำหรบั สร้างพื้นท่เี ทมเพลตอำนวยความสะดวกตอ่ ผใู ชในการแก้ไขเนื้อหาได้ 3.7 Text สำหรับจัดรูปแบบข้อความภายในเว็บเพจ เช่น หัวเรื่องตัวหนา ตัวเอียง หัวข้อ บุ๊กเล็ต รวมทง้ั แทรกสญั ลักษณพ์ เิ ศษตา่ ง ๆ 3.8 Favorites เป็ นกลุ่มที่สามารถเพ่ิมปุ่มคำสั่งจากกลุ่มอื่น ๆ เข้ามาเก็บได้เองเพื่อความสะดวกใน การใช้งาน 4. แถบสถานะ (Status Bar) เป็ นแถบซึ่งอยู่ด้านล่างของ Windows Document ประกอบด้วย 2 ส่วน คือ ดา้ นซา้ ยเปน็ Tag Selector ส่วนดา้ นขวาเป็นเครอื่ งมอื ตา่ ง ๆ 4.1 Select ใช้เลือกออบเจ็คบนเว็บเพจ หลังจากใช้เครื่องมืออื่น ๆ แล้วจะต้องกลับมาคลิกเลือก เคร่ืองมือนีเ้ สมอ 4.2 Hand ใช้เลื่อนหน้าจอเว็บเพจ โดยเลือกเครื่องมอื นี้แล้วไปคลิกลากบน Windows Document (ถ้าดับเบิลคลิกเครอ่ื งมอื น้ี เวบ็ เพจจะขยายมุมมองจนออบเจ็คทเ่ี ลือกไว้แสดงเต็มหนา้ จอ

4.3 Zoom ใช้คลิกหรือลากเพือ่ ขยายมมุ มองเว็บเพจ หรือกดคยี ์ลดั Alt แล้วคลิกเพือ่ ย่อมุมมอง ถ้า ดับเบิลคลิกเครอ่ื งมอื น้จี ะไดม้ มุ มองที่ 100% 5. พาเนล Properties เป็นพาเนลที่ใช้แสดงคุณสมบัติสำคัญ ๆ ของออบเจ็คที่กำลังเลือกบนเว็บเพจ และ ใช้กำหนดหรือแก้คุณสมบัติเหล่านั้นได้ เช่น ขนาด ตำแหน่ง และสี ทั้งที่รายละเอียดบนพาเนล Properties จะ เปลย่ี นแปลงตลอดเวลาข้นึ กบั วา่ ขณะนน้ั กำลังเลอื กออบเจ็คใด 6. แถบเมนู (Menu bar) เป็นส่วนที่ใช้เก็บคำส่ังตา่ งๆ ของโปรแกรม โดยมีการแบง่ คำส่งั ออกเป็นหมวดหมู่ เพ่อื ใหส้ ะดวกตอ่ การเรียกใช้งาน 4. การสรา้ งเว็บไซต์ ในการสร้าง Dreamweaver Site มขี อ้ มลู สำคญั อยู่ 3 ส่วนที่จะต้องกำหนดคอื - Site เป็ นข้อมูลเกี่ยวกับเว็บไซต์ที่สร้างขึ้นภายในเครื่องคอมพิวเตอร์ของตัวเอง เช่น ชื่อเว็บไซต์ และโฟลเดอร์ท่ใี ช้เกบ็ ไฟล์ - Remote Server เป็ นข้อมูลเกี่ยวกับเซิร์ฟเวอร์บนอินเทอร์เน็ตที่จะนำเว็บไซต์ไปฝากไว้ เช่น ช่ือ เซิร์ฟเวอร์ โฟลเดอร์หลกั ท่ีใช้เกบ็ ไฟล์ วิธกี ารอพั โหลด และชอื่ ผใู้ ช้ รหัสผ่านท่ใี ช้ลอ็ กอินเพอ่ื อัพโหลด - Testing Server เป็นข้อมูลเกี่ยวกับเซิรฟ์ เวอร์ที่ใช้สำหรับทดสอบและประมวลผลDynamic page (เวบ็ ท่ีมีการใช้ Server-side script เชน่ ASP หรือ PHP) การสรา้ งเวบ็ ไซตใ์ หม่ 1) เลอื กคำสงั่ Site > New Site 2) คลกิ แทบ็ Site 3) ต้งั ช่อื เวบ็ ไซต์ 4) คลิกปุ่ม Browse 5) จะปรากฏหน้าต่างเพื่อให้เลือก ตำแหน่งและ โฟลเดอร์หลักที่จะใช้เก็บข้อมูลทั้งหมดของ เวบ็ ไซต์ 6) คลกิ ปุ่ม Select 7) คลกิ ปมุ่ Save