ห น้ า | 41 สาระการเรยี นรู้ การสรา้ งเวบ็ ไซตส์ ิ่งสำคญั อยู่ทีก่ าร ออกแบบเว็บ เพราะเว็บไซต์ที่มีรปู แบบสวยงาม จะสามารถดงึ ดูด ความสนใจจากผู้คนไดด้ ีกวา่ ทำใหผ้ ู้คนเกดิ ความรู้สึกประทบั ใจ ดังนัน้ เริ่มแรกก่อนทำเวบ็ ไซต์ จึงจำเป็นตอ้ ง ทำความเขา้ ใจ ความรเู้ กยี่ วกบั เว็บไซต์ ความรู้หลักการออกแบบเวบ็ ไซต์ ส่วนประกอบของเว็บไซต์ การ เลือกใช้สี รูปแบบไฟล์ทเ่ี หมาะสมสำหรับการพฒั นาเว็บไซต์ ภาษาท่เี หมาะสมในการพฒั นาเวบ็ ไซต์ รปู แบบ ของเวบ็ ไซตธ์ รุ กิจ สมรรถนะประจำหนว่ ย 1). แสดงความรู้เก่ียวกับพ้นื ฐานกระบวนการทำงาน ส่วนประกอบ และการออกแบบพฒั นาเว็บไซต์ ไดถ้ ูกต้องตามมาตรฐาน 2). ออกแบบโครงสรา้ งเวบ็ ไซต์ไดถ้ ูกตอ้ งตามมาตรฐาน จุดประสงค์การเรียนรู้ จุดประสงค์ทวั่ ไป 1). นักเรียนมีความรู้เก่ยี วกับเว็บไซต์ได้ 2). นักเรียนเขา้ ใจความรู้หลกั การออกแบบเว็บไซต์ได้ 3). นักเรยี นบอกรปู แบบไฟลท์ ี่เหมาะสมสำหรับการพฒั นาเวบ็ ไซต์ได้ 4). นักเรียนภาษาท่เี หมาะสมในการพฒั นาเวบ็ ไซต์ได้ 5). นักเรยี นบอกรปู แบบของเว็บไซต์เพ่อื ธุรกจิ ได้ 6). นักเรยี นออกแบบโครงสร้างเว็บไซต์ได้ 7). นกั เรยี นเลือกใชส้ ีจากเครอ่ื งมอื สำเรจ็ รูปได้ จุดประสงคเ์ ชิงพฤติกรรม 1). อธบิ ายความรูเ้ บื้องตน้ พน้ื ฐานการออกแบบและพัฒนาเวบ็ ไซต์ได้ตามมาตรฐาน W3C 2). บอกสว่ นประกอบของเวบ็ ไซตไ์ ดต้ ามมาตรฐานเวบ็ ไซต์ 3). อธบิ ายรปู แบบไฟล์ท่ีเหมาะสมสำหรบั การพัฒนาเวบ็ ไซต์ตามได้มาตรฐานภาพ 4). บอกภาษาที่เหมาะกับการพฒั นาเว็บไซต์ได้อยา่ งเหมาะสม 5). อธบิ ายรปู แบบของเวบ็ ไซตเ์ พ่อื ธรุ กจิ ไดต้ ามมาตรฐานการออกแบบออกแบบเวบ็ ไซต์ 6). ออกแบบโครงสรา้ งเวบ็ ไซต์ไดอ้ ยา่ งได้ถูกต้องมาตรฐานเว็บไซต์ 7). เลือกใช้ไฟล์ สี สำหรบั เว็บไซต์ดว้ ยโปรแกรมเลือกสแี ละจำลองเฉดสไี ด้อย่างถกู ต้อง
ห น้ า | 42 สาขาวิชา : เทคโนโลยธี รุ กิจดิจิทลั แบบทดสอบก่อนเรียน จำนวน จำนวน 10 นาที 10 ข้อ ช่ือวชิ า : การพฒั นาเวบ็ ไซตท์ างธรุ กิจ รหสั วชิ า : 30204-2103 ชดุ การสอนที่ 1 เรอื่ ง พ้ืนฐานการพฒั นาเวบ็ ไซต์ทางธรุ กจิ คำชแ้ี จง 1. แบบทดสอบนีเ้ ปน็ แบบปรนยั ชนดิ เลอื กตอบ 4 ตัวเลอื กจำนวน 10 ข้อ ขอ้ ละ 1 คะแนน 2. ให้เลือกคำตอบท่ถี ูกต้องท่สี ุดเพียงขอ้ เดียวแลว้ ทำเครือ่ งหมาย X ลงในกระดาษคำตอบ 3. ใช้เวลาในการทำ 10 นาที 1.เว็บเพจ (Web Page) หมายถึงขอ้ ใด 5.การออกแบบเว็บไซต์โดยท่ัๆไปมีสว่ นประกอบกสี่ ว่ น ก. เปรียบเสมือนปกหนงั สือ ตามปกติจะถกู เก็บอยู่ในรูปแบบไฟล์ ก. 1 ส่วน ข. 2 สว่ น HTML ค. 3 ส่วน ง. 4 สว่ น ข. เปรียบเสมือนหนงั สอื 1 เล่ม ตามปกติจะถูกเกบ็ อยู่ในรูปแบบ 6.วงล้อสีทฤษฎีสีแบบสามเส้า (RGB) เหมาะกับเว็บไซต์ ไฟล์ HTML แบบใด ค. เปรียบเสมือนหน้ากระดาษแต่ละหนา้ จะถูกเก็บอยู่ในรูปแบบ ก.เว็บไซต์ข่าว ข.เวบ็ ไซตท์ ่ที นั สมัย ไฟล์ HTML ง. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ค.เว็บไซต์ขายสนิ ค้า ง.เว็บไซตท์ ่โี ดดเดน่ สะดุดตา ไฟล์ .doc 7.การจัดตัวอักษรในเวบ็ ไซต์ ในหนง่ึ บรรทัดใชก้ ี่ตัวอักษร 2. เวบ็ ไซต์ หมายถึงข้อใด ก. 10-30 ตัวอกั ษร ข. 30-50 ตัวอักษร ก. การสง่ จดหมายไปยงั ผรู้ ับแบบไม่เห็นหนา้ ค. 50-70 ตัวอกั ษร ค. 70-90 ตวั อักษร ข. หน้าเวบ็ เพจหน้าเดียว จะเช่อื มโยงผา่ นทางกลอ่ งรับไปรษณยี ์ 8.ภาพทไี่ ดจ้ ากกลอ้ งดจิ ิตอลปกตเิ ป็นภาพรูปแบบใด ค. หน้าเว็บเพจหลายๆ หน้า จะเชือ่ มโยงผ่านทางไฮเปอรล์ งิ ก์ ก. JPG ข. PNG ง. ข้อมูลที่เชื่อมโยงผ่านทางอีเมลที่สามารถเปิดอ่านข้อความได้ ค. BMP ตลอดเวลา ง. GIF 3. ข้อใดกล่าวถึง โฮมเพจ (Home Page) ไดถ้ กู ตอ้ ง ก. เปรยี บเสมือนสารบญั ในหนงั สือ 9. ภาพที่เหมาะสมในการนำมาพัฒนาเวบ็ ไซตค์ ือ ก. JPG ข. PNG ข. เปรยี บเสมือนบรรณานกุ รม ค. BMP ง. GIF ค. เปรยี บเสมือนหนา้ ปกนิตรสาร 10. เวบ็ ไซตท์ ี่นิยมพัฒนาเวบ็ แอพพลิเคชัน่ คอื ภาษาใด ง. เปรียบเสมือนท่ีค่นั หนังสือ ก.PHP ข.HTML 4.HTML ย่อมาจากอะไร ค.XHTML ง.CSS ก. Hyper Text Markup Language ข. Hytext Markup Language ค. Hyda Text Markup Language ง. Hypa Text Markup Language
ห น้ า | 43 สาขาวชิ า : เทคโนโลยธี รุ กจิ ดิจิทัล ชอื่ วชิ า : การพัฒนาเวบ็ ไซตท์ างธรุ กจิ รหสั วิชา ใบความรทู้ ่ี 1 หน้าท.ี่ .... : 30204-2103 ชุดการสอนท่ี 1 เรื่อง พื้นฐานการพฒั นาเวบ็ ไซตท์ างธุรกจิ แผ่นท่ี : 1 2 3 สว่ นประกอบของหนา้ เว็บเพ็จ แบ่งออกเปน็ 3 สว่ นหลักๆ คือ 1. ส่วนหวั ของเวบ็ เพ็จ (Page Header) เป็นสว่ นที่อยู่ตอนบนสุดของหน้า และเป็นสว่ นท่สี ำคญั ทสี่ ุดของหน้า เพราะเปน็ สว่ นที่ดงึ ดูดผู้ชมให้ตดิ ตามเนอื้ หา ภายในเว็บไซต์ มกั ใส่ภาพกราฟฟิกเพื่อสร้างความประทบั ใจ ส่วนใหญป่ ระกอบดว้ ย - โลโก้ (Logo) เป็นสิง่ ท่เี ว็บไซต์ควรมี เปน็ ตวั แทนของเว็บไซตไ์ ดเ้ ป็นอย่างดี และยังทำให้เวบ็ นา่ เชื่อถือ - ช่ือเวบ็ ไซต์ - เมนหู ลกั หรอื ลิงค์ (Navigation Bar) เปน็ จดุ เช่อื มโยงไปสเู่ นอ้ื หาของเวบ็ ไซต์
ห น้ า | 44 สาขาวิชา : เทคโนโลยีธรุ กจิ ดิจิทัล ชอ่ื วชิ า : การพัฒนาเวบ็ ไซต์ทางธรุ กจิ รหสั วชิ า ใบความรทู้ ี่ 1 หนา้ ท.ี่ .... : 30204-2103 ชดุ การสอนที่ 1 เร่อื ง พืน้ ฐานการพัฒนาเวบ็ ไซต์ทางธรุ กจิ แผ่นที่ : 2.ส่วนของเน้ือหา (Page Body) เป็นส่วนท่อี ยู่ตอนกลางของหนา้ ใช้แสดงขอ้ มูลเน้อื หาของเวบ็ ไซต์ ซ่ึงประกอบดว้ ยข้อความ, ตารางขอ้ มูล ภาพกราฟิก วดี ีโอ และอน่ื ๆ และอาจมเี มนหู ลัก หรอื เมนเู ฉพาะกลุม่ วางอยใู่ นส่วนนด้ี ้วย สำหรบั ส่วนเนอ้ื หาควรแสดงใจความสำคัญทเี่ ปน็ หัวเร่ืองไวบ้ นสดุ ขอ้ มลู มคี วามกระชบั ใช้รูปแบบตวั อักษรทีอ่ า่ น งา่ ย และจัด Layout ใหเ้ หมาะสมและเปน็ ระเบียบ 3. ส่วนท้ายของหนา้ (Page Footer) เป็นสว่ นทอี่ ยดู่ ้านล่างสดุ ของหนา้ จะมหี รือไม่มีก็ได้ มักวางระบบนำทางทเ่ี ป็นลิงคข์ อ้ ความงา่ ย ๆ และอาจแสดง ขอ้ มลู เพิม่ เตมิ เก่ียวกบั เน้อื หาภายในเว็บไซต์ เชน่ เจ้าของเวบ็ ไซต์, ข้อความแสดงลิขสทิ ธ์ิ, วธิ ีการติดต่อกับผ้ดู แู ลเว็บไซต์, คำแนะนำการใช้เว็บไซต์ เปน็ ตน้ โดยปกติสว่ นหวั และสว่ นทา้ ยมกั แสดงเหมอื นกันในทุกหนา้ ของเวบ็ เพ็จ
ห น้ า | 45 สาขาวิชา : เทคโนโลยีธรุ กจิ ดิจทิ ลั แบบทดสอบท้าย จำนวน หนว่ ย 10 ข้อ ชือ่ วชิ า : การพฒั นาเวบ็ ไซตท์ างธรุ กจิ รหสั วิชา : 30204-2103 ชุดการสอนท่ี 1 เรอื่ ง พน้ื ฐานการพัฒนาเว็บไซตท์ างธรุ กจิ จำนวน 10 นาที ตอนท่ี 1 1. แบบทดสอบนเ้ี ปน็ แบบปรนยั ชนดิ เลอื กตอบ 4 ตวั เลอื กจำนวน 10 ขอ้ ขอ้ ละ 1 คะแนน 2. ใหเ้ ลือกคำตอบทีถ่ กู ตอ้ งท่ีสดุ เพียงขอ้ เดยี วแล้วทำเคร่ืองหมาย X ลงในกระดาษคำตอบ 3. ใชเ้ วลาในการทำ 10 นาที 1.เวบ็ เพจ (Web Page) หมายถงึ ขอ้ ใด 5.การออกแบบเวบ็ ไซตโ์ ดยท่ัๆไปมสี ว่ นประกอบก่ีสว่ น ก. เปรยี บเสมือนปกหนงั สือ ตามปกติจะถกู เก็บอยู่ในรูปแบบไฟล์ ก. 1 ส่วน ข. 2 ส่วน HTML ค. 3 ส่วน ง. 4 ส่วน ข. เปรียบเสมือนหนังสอื 1 เล่ม ตามปกติจะถูกเก็บอยู่ในรูปแบบ 6.วงล้อสีทฤษฎีสีแบบสามเส้า (RGB) เหมาะกับเว็บไซต์ ไฟล์ HTML แบบใด ค. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ก.เวบ็ ไซต์ขา่ ว ข.เว็บไซตท์ ี่ทนั สมยั ไฟล์ HTML ง. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ค.เว็บไซตข์ ายสนิ คา้ ง.เวบ็ ไซต์ทโี่ ดดเด่นสะดดุ ตา ไฟล์ .doc 7.การจัดตวั อกั ษรในเว็บไซต์ ในหนึ่งบรรทัดใชก้ ่ีตัวอกั ษร 2. เวบ็ ไซต์ หมายถงึ ข้อใด ก. 10-30 ตัวอักษร ข. 30-50 ตัวอักษร ก. การส่งจดหมายไปยงั ผรู้ บั แบบไม่เห็นหนา้ ค. 50-70 ตวั อกั ษร ค. 70-90 ตวั อกั ษร ข. หน้าเวบ็ เพจหนา้ เดยี ว จะเชือ่ มโยงผา่ นทางกล่องรับไปรษณยี ์ 8.ภาพทีไ่ ดจ้ ากกลอ้ งดิจิตอลปกตเิ ปน็ ภาพรูปแบบใด ค. หน้าเวบ็ เพจหลายๆ หนา้ จะเช่ือมโยงผ่านทางไฮเปอรล์ ิงก์ ก. JPG ข. PNG ง. ข้อมูลท่ีเชื่อมโยงผ่านทางอีเมลที่สามารถเปิดอ่านข้อความได้ ค. BMP ตลอดเวลา ง. GIF 3. ข้อใดกลา่ วถงึ โฮมเพจ (Home Page) ไดถ้ กู ต้อง ก. เปรียบเสมือนสารบญั ในหนงั สอื 9. ภาพทเี่ หมาะสมในการนำมาพัฒนาเว็บไซต์คือ ก. JPG ข. PNG ข. เปรยี บเสมอื นบรรณานุกรม ค. BMP ง. GIF ค. เปรียบเสมอื นหน้าปกนิตรสาร 10. เว็บไซตท์ นี่ ยิ มพัฒนาเว็บแอพพลเิ คชนั่ คอื ภาษาใด ง. เปรยี บเสมอื นท่ีค่ันหนงั สอื ก.PHP ข.HTML 4.HTML ยอ่ มาจากอะไร ค.XHTML ง.CSS ก. Hyper Text Markup Language ข. Hytext Markup Language ค. Hyda Text Markup Language ง. Hypa Text Markup Language http://bit.ly/3pAFDd3
ตอนท่ี 2 คำสง่ั ใหน้ กั ศกึ ษาโยงเสน้ ความสมั พนั ธใ์ ห้ถูกตอ้ ง ห น้ า | 46 Upload HTML Search engine ส่วนหัวของหนำ้ Uniform Resource Locator กำรส่งขอ้ มลู URL Hypertext Markup Language เคร่อื งมอื คน้ หำ สว่ นของเน้อื หำ Page Header ส่วนท้ำยของหน้ำ Page Body Page Footer
ห น้ า | 47 สาขาวิชา : เทคโนโลยีธรุ กจิ ดจิ ิทัล ใบสง่ั งาน หน้าท่ี 1 ชื่อวชิ า : การพฒั นาเวบ็ ไซตท์ างธรุ กิจ รหัสวชิ า : 30204-2103 งาน : พน้ื ฐานการพัฒนาเวบ็ ไซต์ทางธุรกจิ แผน่ ที่ : 1 คำสงั่ ใหน้ กั ศึกษาออกแบบโครงรา่ งเวบ็ ไซต์ โดยประยุกตจ์ ากตวั อยา่ งท่กี ำหนดให้ จดั ทำดว้ ย Google Document และ บนั ทึกไฟลส์ ง่ กลอ่ งส่งงานตาม url: ท่กี ำหนดให้ คำส่งั ย่อย ให้ครูผสู้ อนตรวจ 1. ทำขั้นตอนที่ 3 ให้ครูผสู้ อนตรวจ 2. ทำขนั้ ตอนท่ี 4 ลำดับขั้นตอนการปฏบิ ตั ิงาน เครอ่ื งมอื 1. เตรียมเคร่ืองมือใชอ้ อกแบบหน้าเวบ็ เพ็จ 1. เครอ่ื งคอมพวิ เตอร์ 2. ออกแบบสว่ นประกอบเวบ็ ไซตล์ งในโปรแกรม 2. โปรแกรมเวบ็ Brower 3. บนั ทกึ ไฟลด์ ้วย Google Document 3. Google Document 4. สง่ Link ในกล่องส่งงาน 5. ตรวจสอบผลการส่งงาน เว็บไซต์ https://sites.google.com/site/kruwerathamt เวลา 60 นาที
ห น้ า | 48 สาขาวชิ า : เทคโนโลยีธรุ กจิ ดจิ ิทัล หนา้ ท่ี 1 ใบลำดับขน้ั ตอนการปฏิบตั งิ าน ช่ือวชิ า : การพฒั นาเวบ็ ไซต์ทางธรุ กจิ รหสั วชิ า : 30204-2103 แผ่นท่ี : 2 งาน : พื้นฐานการพฒั นาเว็บไซตท์ างธุรกิจ ขั้นตอนการปฏิบัตงิ าน คำอธบิ ายขัน้ ตอนการปฏบิ ตั ิงาน เคร่ืองมอื /อปุ กรณ์ หมายเหต/ุ ขอ้ ควรระวัง 1. เตรียมเครอ่ื งมอื ใช้ออกแบบ ใหน้ กั ศกึ ษาเตรียมโปรแกรม ท่เี กีย่ วขอ้ งในการ หนา้ เว็บเพจ็ ออกแบบหนา้ เว็บไซต์ ใบสงั่ งาน ตรวจสอบโปรแกรมเว็บ Brower 2. ออกแบบสว่ นประกอบ ให้นกั ศกึ ษานำสว่ นประกอบต่างๆ ของเวบ็ ไซต์ และอนิ เทอร์เน็ต ว่าสามารถใช้ เว็บไซต์ลงในโปรแกรม เช่น Header Menu Footer Content จัด วางเป็นหน้าเว็บไซตใ์ หถ้ ูกตอ้ ง งานไดห้ รือไม่ หากใช้งานไมไ่ ด้ 3. บนั ทกึ ไฟล์ด้วย Google ให้นักศกึ ษาบันทกึ ไฟล์ ด้วยช่ือ ใบงาน และ Document ตามดว้ ยช่ือนกั ศกึ ษาเอง เชน่ ให้แจง้ ครผู ูส้ อน work1_weratham 4. ส่ง Link ในกลอ่ งส่งงาน ใหน้ ักศกึ ษานำ Link ที่ได้จาก Google ใบสั่งงาน นกั ศึกษาสามารถ จัดวาง Document วางลงในกลอ่ งสง่ งานท่ีผสู้ อน 5. ตรวจสอบผลการส่งงาน กำหนดให้ในชั้นเรียน องคป์ ระกอบไดน้ อกเหนือจาก เวบ็ ไซต์ ใหน้ กั ศึกษาตรวจสอบ ผลงานท่สี ง่ ภายใน https://sites.google.com/sit เว็บไซต์ครูผู้สอน หวั ขอ้ สง่ งาน ตัวอย่าง e/kruwerathamt ใบสัง่ งาน นกั ศึกษาตรวจสอบชอื่ ไฟล์งาน ใหถ้ กู ตอ้ ง ใบสั่งงาน ตรวจสอบการพิมพ์ช่อื URL: ใบสัง่ งาน หากพมิ พ์ผิดไม่สามารถเข้าถงึ กล่องสง่ งานได้ ตรวจสอบการพมิ พช์ ื่อ URL: https://sites.google.com/sit e/kruwerathamt ใหถ้ ูกต้อง
ห น้ า | 49 สาขาวชิ า : เทคโนโลยีธรุ กิจดจิ ทิ ลั ใบประเมินผล หน้าที่ 1/2 แผ่นท่ี : 1 ชอื่ วชิ า : การพัฒนาเวบ็ ไซตท์ างธรุ กจิ รหัสวิชา : 30204-2103 งาน : พน้ื ฐานการพฒั นาเวบ็ ไซต์ทางธรุ กจิ ชอ่ื ..................................................นามสกลุ ............................................................แผนก...................................................... วัน/เดอื น/ป.ี ............................................................................................................................................................................ จุดประเมนิ ผลการประเมิน หมายเหตุ 1.ลำดบั ขั้นตอนการปฏิบัติ ผ่าน ไม่ผา่ น 1. เตรยี มเครอื่ งมือใชอ้ อกแบบหนา้ เว็บเพจ็ 2. ออกแบบส่วนประกอบเวบ็ ไซตล์ งในโปรแกรม 3. บนั ทึกไฟล์ด้วย Google Document 4. สง่ Link ในกล่องสง่ งาน 5. ตรวจสอบผลการส่งงาน เว็บไซต์ https://sites.google.com/site/kruwerathamt
ห น้ า | 50 สาขาวิชา : เทคโนโลยีธรุ กิจดจิ ิทลั ใบประเมนิ ผล หนา้ ท่ี 2/2 แผ่นท่ี : 2 ชอ่ื วชิ า : การพัฒนาเวบ็ ไซต์ทางธรุ กจิ รหัสวิชา : 30204-2103 งาน : พื้นฐานการพฒั นาเวบ็ ไซต์ทางธุรกิจ ช่ือ..................................................นามสกลุ ............................................................แผนก...................................................... วนั /เดือน/ปี............................................................................................................................................................................. จุดประเมิน ผลการประเมนิ หมายเหตุ ดมี าก ดี พอใช้ แก้ไข 2.คุณภาพของผลงาน 2.1 ออกแบบโครงรา่ งหน้าเว็บไซต์ได้ - ความครบถ้วน - ความสวยงาม - ความคดิ สร้างสรรค์ 3.เจตคติ (กิจนิสยั ฯ) ในการปฏบิ ัติงาน - ความรับผดิ ชอบ - ความตรงตอ่ เวลา - ความเหมาะสม เรมิ่ ปฏบิ ัตงิ านเวลา...............น. เสร็จเวลา...................น. รวมเวลาปฏิบตั ิงาน...................ชว่ั โมง..................นาที สรุปผลการประเมนิ ผา่ น ไม่ผา่ น เนอ่ื งจาก.................................................. ข้อเสนอแนะ ................................................................................................................................................................................................. ................................................................................................................................................................................................. ................................................................................................................................................................................................. ................................................................................................................................................................................................. ผ้ปู ระเมนิ ......................................................
ห น้ า | 51 สาขาวชิ า : เทคโนโลยีธรุ กจิ ดิจทิ ลั แบบทดสอบหลงั เรียน จำนวน จำนวน 10 นาที 10 ข้อ ชือ่ วชิ า : การพฒั นาเวบ็ ไซตท์ างธรุ กิจ รหสั วชิ า : 30204-2103 ชดุ การสอนที่ 1 เรอ่ื ง พ้ืนฐานการพัฒนาเว็บไซต์ทางธรุ กิจ คำชแ้ี จง 1. แบบทดสอบน้ีเป็นแบบปรนัย ชนิดเลอื กตอบ 4 ตัวเลอื กจำนวน 10 ข้อ ขอ้ ละ 1 คะแนน 2. ให้เลอื กคำตอบท่ีถกู ตอ้ งทีส่ ุดเพียงขอ้ เดียวแล้วทำเครื่องหมาย X ลงในกระดาษคำตอบ 3. ใชเ้ วลาในการทำ 10 นาที 1.เวบ็ เพจ (Web Page) หมายถงึ ขอ้ ใด 5.การออกแบบเวบ็ ไซตโ์ ดยท่ัๆไปมีสว่ นประกอบก่ีสว่ น ก. เปรยี บเสมือนปกหนังสือ ตามปกตจิ ะถกู เกบ็ อยู่ในรูปแบบไฟล์ ก. 1 สว่ น ข. 2 สว่ น HTML ค. 3 ส่วน ง. 4 สว่ น ข. เปรียบเสมือนหนงั สอื 1 เล่ม ตามปกติจะถูกเก็บอยู่ในรูปแบบ 6.วงล้อสีทฤษฎีสีแบบสามเส้า (RGB) เหมาะกับเว็บไซต์ ไฟล์ HTML แบบใด ค. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ก.เว็บไซตข์ า่ ว ข.เว็บไซต์ที่ทนั สมัย ไฟล์ HTML ง. เปรียบเสมือนหน้ากระดาษแต่ละหน้า จะถูกเก็บอยู่ในรูปแบบ ค.เวบ็ ไซตข์ ายสินค้า ง.เว็บไซต์ทโ่ี ดดเด่นสะดดุ ตา ไฟล์ .doc 7.การจดั ตวั อักษรในเวบ็ ไซต์ ในหนง่ึ บรรทัดใชก้ ตี่ วั อักษร 2. เว็บไซต์ หมายถึงขอ้ ใด ก. 10-30 ตัวอกั ษร ข. 30-50 ตัวอกั ษร ก. การส่งจดหมายไปยงั ผู้รบั แบบไมเ่ ห็นหนา้ ค. 50-70 ตัวอกั ษร ค. 70-90 ตวั อักษร ข. หน้าเวบ็ เพจหนา้ เดียว จะเช่อื มโยงผ่านทางกล่องรับไปรษณีย์ 8.ภาพท่ไี ด้จากกล้องดจิ ิตอลปกตเิ ปน็ ภาพรปู แบบใด ค. หน้าเว็บเพจหลายๆ หนา้ จะเชอื่ มโยงผ่านทางไฮเปอร์ลิงก์ ก. JPG ข. PNG ง. ข้อมูลที่เชื่อมโยงผ่านทางอีเมลที่สามารถเปิดอ่านข้อความได้ ค. BMP ตลอดเวลา ง. GIF 3. ข้อใดกล่าวถงึ โฮมเพจ (Home Page) ได้ถูกต้อง ก. เปรยี บเสมอื นสารบัญในหนงั สอื 9. ภาพที่เหมาะสมในการนำมาพฒั นาเวบ็ ไซต์คือ ก. JPG ข. PNG ข. เปรยี บเสมือนบรรณานกุ รม ค. BMP ง. GIF ค. เปรยี บเสมอื นหน้าปกนิตรสาร 10. เว็บไซตท์ นี่ ยิ มพฒั นาเวบ็ แอพพลิเคช่นั คอื ภาษาใด ง. เปรียบเสมือนทีค่ ่นั หนังสอื ก.PHP ข.HTML 4.HTML ย่อมาจากอะไร ค.XHTML ง.CSS ก. Hyper Text Markup Language ข. Hytext Markup Language ค. Hyda Text Markup Language ง. Hypa Text Markup Language http://bit.ly/3pAFDd3
ห น้ า | 52 ข้อแนะนำการเตรยี มสื่อการสอน 1). เครอื่ งคอมพวิ เตอรค์ วรเชอื่ มต่อระบบอินเทอร์เนต็ ได้ 2). Google Slide เปน็ สื่อออนไลนค์ วรประยุกต์ยอ่ ลิงคเ์ พอ่ื ความสะดวกในการใชง้ าน เชน่ http://bit.ly/3nY6izU วธิ กี ารใชง้ านส่ือการสอน 1). เปดิ โปรแกรมเวบ็ Brower ควรใช้ Google Chome 2). ใช้โปรแกรมเว็บ Brower เปิดเข้าไปยังลิงคท์ ่ี Google Slide สร้างขึน้ http://bit.ly/3nY6izU หรือสแกน QR Code ข้างลา่ งนี้ 3). บรรยาย อธิบาย ความรทู้ ฤษฏแี ก่นักเรยี น
ห น้ า | 53 ตวั อย่างสื่อ Google Slide หนว่ ยที่ 1 เรื่อง พื้นฐานการพฒั นาเวบ็ ไซต์ทางธรุ กิจ http://bit.ly/3nY6izU
ห น้ า | 54 บรรณานกุ รม วรเกษมสันต์ สริ ศิ ภุ รัชต์. (2556). Professional Web Design CS6 เรยี นร้กู ระบวนการสร้างและออกแบบ Website ทั้งระบบอยา่ งมืออาชพี . กรงุ เทพ. เน็ตดไี ซน์ พับลิชชิ่ง, บจก. ชาญชยั ศุภอรรถกร. (2551). คมู่ ือเรียนเขียนเวบ็ อีคอมเมิรซ์ ดว้ ย PHP + MySql. กรงุ เทพ. บริษทั ซัคเซส มเี ดีย จำกัด Benjamin LaGrone. (2013) HTML5 and CSS3 Responsive Web Design Cookbook. Birmingham, UK. Packt Publishing Ltd.
ห น้ า | 55 ภาคผนวก 1. เฉลยแบบฝึกหดั ท้ายหนว่ ย 2. เฉลยแบบทดสอบกอ่ นเรียน 3. เฉลยแบบทดสอบหลงั เรยี น 4. แบบสังเกตพฤตกิ รรมการเรียนรูร้ ายบคุ คล 5. แบบสังเกตพฤตกิ รรมการเขา้ รว่ มกจิ กรรมกล่มุ 6. แบบประเมินการนำเสนอผลงานรายบคุ คล 7. แบบประเมนิ คุณลกั ษณะอนั พึงประสงค์
ห น้ า | 56 ตอนท่ี 1 1. แบบทดสอบน้ีเปน็ แบบปรนยั ชนดิ เลอื กตอบ 4 ตวั เลือกจำนวน 10 ขอ้ ขอ้ ละ 1 คะแนน 2. ใหเ้ ลอื กคำตอบที่ถูกตอ้ งที่สดุ เพียงข้อเดยี วแลว้ ทำเครอ่ื งหมาย X ลงในกระดาษคำตอบ 3. ใชเ้ วลาในการทำ 10 นาที เฉลยแบบฝึกหดั ทำ้ ยหน่วย หนว่ ยท่ี 1 เรอ่ื ง พ้ื นฐำนกำรออกแบบและพั ฒนำเว็บไซต์ เพ่ื อธุรกิจ เฉลย 1……ค…… 2……ค…… 3……ค…… 4……ก…… 5……ค…… 6……ง…… 7……ค…… 8……ก…… 9……ง…… 10…ก……… ตอนท่ี 2 คำสั่ง ใหน้ ักศกึ ษาโยงเสน้ ความสมั พนั ธ์ให้ถกู ตอ้ ง HTML ส่วนหวั ของหนำ้ Upload กำรส่งขอ้ มูล URL Search engine เครือ่ งมือคน้ หำ สว่ นของเน้ือหำ Uniform Resource สว่ นทำ้ ยของหน้ำ Locator Hypertext Markup Page Header Page Body Page Footer
ห น้ า | 57 เฉลยแบบทดสอบกอ่ นเรียน หนว่ ยที่ 1 เรอื่ ง พื้ นฐำนกำรออกแบบและพั ฒนำเวบ็ ไซต์ เพื่ อธรุ กิจ เฉลย 1……ค…… 2……ค…… 3……ค…… 4……ก…… 5……ค…… 6……ง…… 7……ค…… 8……ก…… 9……ง…… 10…ก……… เฉลยแบบทดสอบหลังเรียน หนว่ ยท่ี 1 เรอ่ื ง พ้ื นฐำนกำรออกแบบและพั ฒนำเว็บไซต์ เพ่ื อธุรกิจ เฉลย 1……ค…… 2……ค…… 3……ค…… 4……ก…… 5……ค…… 6……ง…… 7……ค…… 8……ก…… 9……ง…… 10…ก………
ห น้ า | 58 แบบสังเกตพฤติกรรมการเรียนรรู้ ายบุคคล รหสั วิชา..............วชิ า........................................ชน้ั ...............สาขาวชิ า/สาขางาน............................................กลมุ่ .......... ภาคเรียนท่.ี .......ปีการศึกษา...........................สอนครงั้ ท.ี่ ................วันท.ี่ ................................................... คำช้ีแจง ใหท้ ำเครอ่ื งหมาย ✓ และ หากนักเรียนมีพฤติกรรมน้ัน ลงในช่องรายการ ที่ รหัส ชอ่ื -นามสกลุ ความสนใจ การแสดงความ พฤติกรรม การยอมรับฟัง ทำงานตามที่ รวม 4321 คิดเหน็ การตอบคำถาม คนอ่นื มอบหมาย 1 4321 2 4321 4321 4321 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 เกณฑก์ ารวัดผล ให้คะแนนระดบั คณุ ภาพของแตล่ ะพฤตกิ รรมดังน้ี 1. ดีมาก = 4 สนใจฟัง ไมห่ ลับ ไมพ่ ูดคุยในช้นั มคี ำถาม ตอบคำถามถูก ทำงานสง่ ตามเวลา 2. ดี = 3 พฤติกรรมการแสดงออกอยใู่ นเกณฑป์ ระมาณ 70% 3. ปานกลาง = 2 พฤติกรรมการแสดงออกอยใู่ นเกณฑ์ประมาณ 50% 4. ปรับปรุง = 1 เขา้ ชั้นเรยี น แตก่ ารแสดงออกนอ้ ยมาก สง่ งานไม่ครบ ส่งงานไมต่ รงเวลา ลงชื่อ ....................................ผ้สู ังเกต (..........................................) .........../................/............
ห น้ า | 59 แบบสังเกตพฤติกรรมการเข้ารว่ มกิจกรรมกลมุ่ รหัสวิชา..............วิชา........................................ชน้ั ...............สาขาวชิ า/สาขางาน............................................กลมุ่ .......... ภาคเรียนท่.ี .......ปกี ารศกึ ษา...........................สอนคร้ังที.่ ................วนั ท่.ี ................................................... คำช้ีแจง ใหท้ ำเครื่องหมาย ✓ และ หากนักเรียนมีพฤติกรรมน้ัน ลงในช่องรายการ พฤติกรรม ที่ รหัส ชื่อ-นามสกลุ ความรว่ มมอื การแบ่งหน้าท่ี การรบั ฟังความ การตั้งใจทำงาน ทำงานตามที่ รวม ในกลุ่ม คดิ เห็น มอบหมาย 43214321432143214321 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 เกณฑก์ ารวัดผล ให้คะแนนระดบั คุณภาพของแต่ละพฤติกรรมดงั น้ี 1. ดมี าก = 4 ประสิทธิภาพอยใู่ นเกณฑ์ 90 - 100% หรือปฏิบัติบ่อยครั้ง 2. ดี = 3 ประสทิ ธภิ าพอยใู่ นเกณฑ์ 70 - 89% หรอื ปฏบิ ตั ิบางคร้งั 3. ปานกลาง = 2 ประสทิ ธภิ าพอยู่ในเกณฑ์ 50 - 69% หรือปฏิบตั ิคร้งั เดยี ว 4. ปรบั ปรุง = 1 ประสทิ ธภิ าพอยูใ่ นเกณฑ์ 50% หรือไม่ปฏบิ ตั ิเลย ลงช่ือ .....................................ผู้สงั เกต (..........................................) .........../................/...........
ห น้ า | 60 แบบประเมนิ การนำเสนอผลงานรายบุคคล รหัสวชิ า..............วิชา........................................ชั้น...............สาขาวิชา/สาขางาน............................................กลมุ่ .......... ภาคเรยี นที.่ .......ปีการศกึ ษา...........................สอนครัง้ ท่ี.................วันท.่ี ................................................... บุคลกิ มารยาท การใช้ วธิ ีการ เนือ้ หาที่ รวม การแตง่ ในการพูด ภาษา นำเสนอ นำเสนอ ที่ รหสั ช่ือ-ชอ่ื สกลุ กาย 10 10 10 10 10 50 ขอ้ เสนอแนะเพ่มิ เติม ………………………………………………………………………………………………………………………………………………………….. เกณฑ์ผา่ น 25 คะแนน เกณฑก์ ารสงั เกต บคุ ลิก การแต่งกาย : มีความเชื่อมน่ั ในตนเอง แต่งกายสะอาด ถูกระเบยี บ เสื้อไมห่ ลดุ ลุย่ ลอยชาย มารยาทในการพดู : มองหนา้ และสบตาผูฟ้ ัง ไมเ่ หน็บแนม เสยี ดสผี ูอ้ ื่น การใชภ้ าษา : ชัดเจน ตามหลักภาษา ตัว ร ล คำควบกลำ้ ถอ้ ยคำขอ้ ความสุภาพ วธิ กี ารนำเสนอ : นา่ สนใจหลากหลาย เชน่ ใช้แผ่นใส รปู ภาพ ตั้งคำถาม เลน่ เกม ไม่เยิน่ เย้อ เนื้อหาทนี่ ำเสนอ : มีสาระสำคญั ตรงกับหัวข้อเรือ่ ง ใชเ้ วลาตามทกี่ ำหนด คะแนนอยูใ่ นดุลยพนิ ิจของผ้ปู ระเมนิ กำหนด ลงชื่อ……………………………….ผปู้ ระเมนิ (……………………………….) …………/…………/………..
ห น้ า | 61 แบบประเมินคุณธรรม จริยธรรม คา่ นยิ ม และคณุ ลักษณะอันพึงประสงค์ รหสั วิชา..............วิชา........................................ชั้น...............สาขาวิชา/สาขางาน............................................กลมุ่ .......... สอนครัง้ ท.่ี ................วนั ท.ี่ ................................................... ความมีม ุนษยสัมพันธ์ ความมีวิ ันย ความรับผิดชอบ ความเช่ือมั่นในตนเอง ความสนใจใฝ่รู้ ความรักสามัคคี ความก ัตญ ูญกตเวที ที่ รหสั ชือ่ -ชื่อสกลุ รวม 2 1 3 1 1 1 1 10 1 2 3 4 5 6 7 8 9 10 เกณฑ์การพิจารณา ลงชอื่ ……………….…………………….ผปู้ ระเมนิ (………………………..…………….) 1. ความมมี นษุ ยสมั พันธ์ …………/…………/……….. - แสดงกริ ยิ าท่าทางสภุ าพต่อผอู้ น่ื - ให้ความร่วมมือกบั ผ้อู นื่ 4. ความเชอื่ มน่ั ในตนเอง - กลา้ แสดงความคิดเห็นอยา่ งมเี หตุผล 2. ความมีวินัย - ปฏิบตั ิตามกฎระเบียบ ขอ้ บงั คบั และข้อตกลงต่างๆ ของ 5. ความสนใจใฝ่รู้ - ซักถามปัญหาข้อสงสยั วิทยาลยั ไดแ้ ก่ แตง่ กายถกู ตอ้ งตามระเบียบ และข้อบงั คบั ตรงตอ่ เวลา 6. ความรักสามัคคี - รว่ มมอื ในการทำงาน 3. ความรบั ผิดชอบ - มีการเตรยี มความพร้อมในการเรียนและการปฏบิ ตั ิงาน 7. ความกตัญญกู ตเวที - ปฏิบัตงิ านด้วยความตงั้ ใจ - มีสัมมาคารวะตอ่ ครู-อาจารย์อย่างสมำ่ เสมอ ทัง้ ตอ่ หนา้ และลับหลงั - มคี วามเพยี รพยายามในการเรียนและการปฏิบตั ิงาน
ห น้ า | 62
Search
