การสร้างเว็บไซต์

50 3). สนบั สนุนภาษาสครปิ ตต์ ่างๆ ทงั้ ฝ่งั Client และ Server เชน่ Java, PHP, CGI, VBScript 4). มเี คร่อื งมอื สาหรับอัพโหลดเวบ็ ไซต์ในตัว และสามารถจัดการเว็บไซต์ทก่ี าลังใชง้ านได้ โดยมีเคร่ืองมอื ต่างๆ เช่น 4.1 FTP คือ การแกไ้ ขหนา้ เวบ็ เพจทต่ี ้องการและส่งไปแสดงผลทเี่ ซริ ์ฟเวอร์ได้ทันที โดยทDี่ reamweaver จะทาหนา้ ที่ติดตอ่ ไปยงั เซิร์ฟเวอร์และแสดงไฟลใ์ นนั้นให้เหน็ และสามารถแกไ้ ขได้ เม่อื แกไ้ ขเสร็จแล้วบนั ทึก เวบ็ เพจที่แกไ้ ขแล้วก็จะไปแสดงผลเปน็ เว็บไซตจ์ ริงทันที นอกจากน้นั ยังเป็น การสารองไฟล์เว็บเพจตา่ งๆ ไวใ้ นเคร่ืองคอมพิวเตอรไ์ ด้อกี ด้วย 4.2 Site Map คือเคร่ืองมือที่แสดงผลเว็บไซตใ์ ห้เปน็ รูปเป็นรา่ ง โดยแสดงใหเ้ ห็นว่า หนา้ เว็บเพจไหนโยงไปยังหน้าไหนบา้ ง และแสดงผลในรูปแบบของการเชือ่ มโยงต่อกนั โดยสามารถทีจ่ ะ ย้ายหรอื เปลย่ี นแปลงลงิ ก์ได้ และ Dreamweaver จะเขยี นโค้ดใหมต่ ามทีแ่ ก้ไขใหท้ นั ที ซง่ึ สะดวกมาก สาหรับการแก้ไขเว็บไซต์

51 5). รองรับมลั ติมีเดยี ตา่ งๆ เชน่ การใส่เสยี ง, การแทรกไฟล์วดิ โี อ, การใช้งานรว่ มกบั โปรแกรม Flash ที่ใช้ในการสรา้ งแฟลชแอนิเมชนั Fireworks ท่ใี ช้ในการสรา้ งป่มุ และอนิ เตอร์เฟสตา่ งๆ เป็นตน้ 6.ครแู สดงวดี ทิ ศั น์แนะนาฟงั ก์ชนั การทางานใหมๆ่ ใน Dreamweaver CS6 ซึ่งได้แก่ - สนับสนุน HTML5 และ CSS3 อย่างสมบรู ณแ์ บบ - สนับสนุน Fluid Grid Layout คอื เครอ่ื งมอื ทีใ่ ชส้ รา้ งเว็บไซตแ์ บบ Responsive หรือ แบบทป่ี รับการแสดงผลใหต้ รงกับอุปกรณต์ า่ งๆ ทีใ่ ช้ ท้งั สมาร์ทโฟน แท็บเลต็ คอมพวิ เตอรพ์ ซี ี ซ่ึงมขี นาด แตกต่างกนั ไปจานวนมาก - สนับสนนุ PhoneGap สาหรับการพฒั นาบนระบบมือถือ (Mobile Development) - ปรับปรงุ jQuery Mobile ซง่ึ เปน็ เฟรมเวิร์คสาหรบั การสร้าง Web Project ให้ สมบรู ณม์ ากขึน้

52 - รองรบั เคร่ืองมือช่วยทา CSS Transitions - รองรับการใชง้ าน Web fonts - สามารถใส่ CSS class หลายตัวใน tag เดยี วกันได้

53 - สามารถเช่ือมต่อกับ Adobe Business Catalyst ซึง่ เปน็ บรกิ ารจดเว็บโดเมน ให้ เชา่ โฮสต้ิงไปจนถึงบริการประชาสัมพนั ธ์เว็บไซตแ์ ละอ่นื ๆ ซ่ึงทาได้โดยเชือ่ มต่อกบั โปรแกรมโดยตรง - เพิ่มความปลอดภยั และความรวดเรว็ ในการเช่ือมต่อผา่ น FTP - ปรับปรงุ Live View และ Multiscreen Preview ให้แสดงผลไดด้ ขี ึ้น 7.ครใู ช้สื่อ Power Point เพื่อบอกความต้องการของระบบสาหรับการใชง้ านโปรแกรม Adobe CS6 ซง่ึ เคร่ืองคอมพิวเตอร์ท่ีใช้จาเปน็ ตอ้ งมีคณุ ลักษณะขั้นตา่ ดงั น้ี 8.ครใู ช้เทคนคิ วิธีสอนแบบสาธิต (Demonstration Method) สาธติ ข้นั ตอนการดาวน์โหลดและ การตดิ ตง้ั โปรแกรม Adobe Dreamweaver CS6 โดยผู้เรยี นปฏิบัติตามทลี ะข้นั ตอน ดังน้ี ข้ันตอนการดาวนโ์ หลด 1). เข้าไปท่ีลิงก์ https://helpx.adobe.com/x-productkb/policy-pricing/cs6- productdownloads.html จะปรากฏหนา้ เวบ็ เพจนี้ขึ้นมา

54 2). เลื่อนลงไปทีห่ วั ข้อ Download a CS6 product และคลิกที่ Dreamweaver CS6 จะ ปรากฏเมนูขนึ้ มาใหเ้ ลอื กเวอร์ชัน่ และภาษาของโปรแกรมท่ตี อ้ งการดาวนโ์ หลด โดยจะมีให้เลือกเปน็ เวอร์ ชน่ั ของMac OS X และWindows และภาษาตา่ งๆ ให้เลือก โดยทใ่ี นปัจจุบันยงั ไม่มีภาษาไทย

55 3). ในที่นีจ้ ะเลือกใชเ้ วอรช์ ่นั ภาษาองั กฤษ สาหรบั Windows ใหค้ ลกิ ทล่ี ้งิ ค์ File 1 of 1 (272MB) ตามรปู หรือเลือกของเวอร์ช่นั อืน่ ตามทีต่ ้องการ 4). เม่อื ดาวน์โหลดเสร็จแล้ว ใหเ้ ปดิ ไปยงั โฟลเดอร์ทบ่ี ันทึกไฟล์ไว้ จะพบไฟล์ตดิ ต้งั ทพ่ี ร้อม ใช้งานทันที ข้ันตอนการตดิ ตง้ั 1). ดบั เบล้ิ คลกิ ท่ีไฟล์ Dreamweaver_12_LS16 ทีเ่ ก็บไว้ 2). จะปรากฏหน้าตา่ งน้ีข้ึนมา ไฟลน์ ้จี ะเป็นไฟล์ทร่ี วมรวบไฟลข์ ้อมลู ต่างๆ ที่ใช้ในการติดตั้ง โปรแกรม แล้วบีบอดั รวมกนั เป็นไฟลเ์ ดยี วไว้ จึงต้องแตกไฟลอ์ อกมาก่อนโดยทาการเลอื กตาแหน่ง โฟลเดอรท์ ่จี ะแตกไฟล์แล้วกด Next

56 3). เมื่อแตกไฟล์ออกมาแลว้ จะเปน็ โฟลเดอรช์ ื่อวา่ Adobe Dreamweaver CS6 อยู่ใน โฟลเดอรท์ เ่ี ลือกไว้ ใหก้ ดเข้าไปและดับเบ้ลิ คลิกเพื่อเปิดไฟล์ Set-Up ขึ้นมา 4). จะปรากฏหนา้ ต่างนี้ขนึ้ มา เปน็ การโหลดข้อมูล ให้รอจนเสรจ็ 5). และจะปรากฏหนา้ ตา่ งนี้ขึ้นมา มเี มนูต่างๆ ดงั นี้

57 -Install with a serial number คอื ในกรณีท่ีซื้อโปรแกรมตัวเตม็ มาแล้ว สามารถใชร้ หัสท่ีให้ มาเพ่ือติดตง้ั โปรแกรมตัวเต็มแบบไม่จากดั เวลาได้เลย -Start my subscription คอื ในกรณีทเ่ี ปน็ สมาชิกของ Adobe แบบท่ีมีการจา่ ยเงนิ รายเดอื น ใหน้ ารหสั มากรอกเพอื่ ใชง้ านได้ทนั ที โดยทว่ั ไปนยิ มใชก้ บั Adobe CC -Install a trial คอื ตดิ ต้ังโปรแกรมแบบใหท้ ดลองใช้ได้ 30 วนั จากน้ันต้องจ่ายเงนิ เพื่อใชง้ าน ตอ่ ในกรณีนท้ี ่ตี ้องการตดิ ตัง้ แบบทดลองใช้ 30 วนั ให้เลือกท่ี Install Trial 6). จะปรากฏข้อตกลงทางซอฟทแ์ วรข์ อง Adobe ขน้ึ มา หลังจากทอี่ ่านแล้วให้กด Accept 7). จะปรากฏหน้าตา่ งใหล้ ็อกอนิ ดว้ ย Adobe ID ในกรณีท่ีมีแลว้ ใหก้ รอกอเี มลและพาส เวิรด์ ลงไปแลว้ คลิก Sign In หรือในกรณที ีย่ ังไมม่ ีให้เลอื ก Get an Adobe ID เพอ่ื ลงทะเบยี นกอ่ น จากนนั้ นาอีเมลและพาสเวริ ด์ มากรอกก่อนจะคลกิ Sign In เช่นเดยี วกัน

58 8). จะปรากฏหนา้ ต่างให้เลอื กภาษา และโฟลเดอร์ที่จะติดตงั้ เมื่อเลือกเสรจ็ แลว้ ให้คลกิ Install 9). จากน้ันจะเรมิ่ ทาการตดิ ต้ังโปรแกรม ให้รอจนเสร็จ 10). เมือ่ ติดตงั้ เสร็จแล้วจะปรากฏหนา้ ต่างดังน้ี คลิก Close เพอ่ื ปิดหน้าต่างหรือคลกิ Launch Now เพ่ือเปดิ โปรแกรมขึ้นมาใช้งานทนั ที

59 9. ผู้เรยี นอธิบายสว่ นประกอบของหน้าจอโปรแกรม Adobe Dreamweaver CS6 ดังตอ่ ไปนี้ 10. ผเู้ รยี นเขียนสรุปข้นั ตอนการการดาวน์โหลดและตดิ ตัง้ โปรแกรม Adobe Dreamweaver CS6 เป็น Flow chart เปน็ ลาดบั ข้ันตอน 11.ครูเสนอแนะและเป็นท่ปี รึกษาในการนาเอาแนวปรัชญาของเศรษฐกจิ พอเพียง ซ่ึงใน กระบวนการทางานทุกประเภทนั้น จะต้องเน้นสจั จะซงึ่ เป็นตวั คณุ ธรรม จรยิ ธรรม เนน้ ความซอ่ื สตั ย์ สจุ รติ เนน้ ใหช้ ่วยกันคิด ชว่ ยกันทา เน้นใหร้ ู้จกั ความพอดี พอประมาณ มีเหตุผล ทงั้ หมดนีค้ อื หลัก ปรัชญาของเศรษฐกิจพอเพียง และสามารถนาไปประยกุ ต์ใชก้ บั การดาเนินชวี ติ ของทุกคนได้ ขน้ั สรปุ และการประยุกต์ 12.ครแู ละผูเ้ รยี นสรปุ โดยการถามตอบเกย่ี วกบั โปรแกรม Adobe Dreamweaver CS6 13.ผเู้ รียนทากิจกรรมใบงาน สอื่ และแหล่งการเรยี นรู้ 1.หนังสอื เรยี น วิชาการสรา้ งเว็บไซต์ ของสานักพิมพเ์ อมพันธ์ 2.รปู ภาพ 3.กิจกรรมการเรยี นการสอน 4.สอื่ PowerPoint และ VDO หลกั ฐาน 1.บนั ทกึ การสอน 2.ใบเชค็ รายชอ่ื 3.แผนจดั การเรยี นรู้ 4.การตรวจประเมินผลงาน

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

61 บนั ทึกหลังการสอน ข้อสรปุ หลังการสอน ............................................................................................................................. ................... ............................................................................................................. ................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................................. .............. .................................................................................................................. .............................. .................................................................................................................. .............................. ปญั หาที่พบ ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................................. ................... .................................................................................. .............................................................. .................................................................................................................. .............................. ................................................................................................................................................ แนวทางแกป้ ญั หา .................................................................................................................. .............................. ................................................................................................ ................................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. ..............................

62 แผนการจัดการเรยี นรู้แบบบูรณาการท่ี 6 หน่วยที่ 4 สอนครัง้ ท่ี 6 (21- รหสั 2204-2009 การสรา้ งเวบ็ ไซต์ (2-2-3) 24) ชื่อหน่วย/เร่อื ง การตดิ ตง้ั และใช้งานโปรแกรม Adobe Dreamweaver CS6 เบอ้ื งต้น จานวน 4 ช.ม. สาระสาคญั นกั สร้างและพฒั นาเว็บไซต์ ไมว่ ่ามือเก่าหรือมอื ใหม่ มักจะเลอื กใชโ้ ปรแกรม Adobe Dreamweaver สาหรบั สร้างเว็บไซตก์ ันเป็นจานวนมาก ด้วยเหตุผลท่ีวา่ โปรแกรม Adobe Dreamweaver นนั้ ครอบคลุมและสะดวกต่อการใช้งาน ในขัน้ แรก จึงจาเปน็ จะต้องรูว้ ธิ กี ารติดตง้ั โปรแกรมและการใช้งานในเบ้ืองตน้ เพอื่ นาไปสขู่ ั้นตอนการสร้างเว็บไซต์ต่อไป จุดประสงค์การเรยี นรู้ 4. สามารถเขา้ สู่โปรแกรม Adobe Dreamweaver CS6 ได้ 5. บอกสว่ นประกอบตา่ งๆ ของ Adobe Dreamweaver CS6 ได้ 6. เข้าใจและสามารถใช้งาน Adobe Dreamweaver ในเบ้อื งตน้ ได้ 7. มีคุณธรรม จรยิ ธรรม และคา่ นิยมทีด่ ีในการใช้คอมพวิ เตอร์ 8. มกี ารพฒั นาคุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอนั พึงประสงค์ของผสู้ าเรจ็ การศกึ ษา สานกั งานคณะกรรมการการอาชวี ศกึ ษา ทค่ี รสู ามารถสังเกตได้ขณะทาการสอนในเร่ือง 8.1 ความมมี นษุ ยสัมพนั ธ์ 8.2 ความมวี นิ ยั 8.3 ความรับผิดชอบ 8.4 ความซื่อสัตย์สุจรติ 8.5 ความเชื่อมน่ั ในตนเอง 8.6 การประหยดั 8.7 ความสนใจใฝร่ ู้ 8.8 การละเว้นส่ิงเสพติดและการพนัน 8.9 ความรกั สามคั คี 8.10 ความกตัญญกู ตเวที สมรรถนะรายวิชา 1. แสดงความรเู้ กย่ี วกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยุกต์ใช้โปรแกรมภาษาหรือโปรแกรมสาเรจ็ รูปสาหรับสร้างเวบ็ ไซต์ และการตดิ ต้งั และอัพโหลด (Upload) เว็บไซต์

63 เนือ้ หาสาระ 4. การเขา้ ส่โู ปรแกรม Adobe Dreamweaver CS6 5. สว่ นประกอบต่างๆ ของ Adobe Dreamweaver CS6 6. การใช้งานเบอ้ื งตน้ กิจกรรมการเรยี นรู้ ข้ันนาเข้าสบู่ ทเรียน 1.ครใู ชเ้ ทคนคิ การสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรู้เดิมจาก สัปดาห์ทีผ่ า่ นมา โดยดึงความร้เู ดมิ ของผู้เรียนในเรือ่ งทจี่ ะเรียน เพ่ือชว่ ยใหผ้ เู้ รียนมคี วามพรอ้ มในการ เชื่อมโยงความรู้ใหมก่ บั ความรเู้ ดมิ ของตน ผสู้ อนใช้การสนทนาซักถามใหผ้ ู้เรียนเลา่ ประสบการณ์เดมิ 2.ผ้เู รียนยกตวั อย่างข้อดขี องการใชโ้ ปรแกรม Adobe Dreamweaver CS6 ขนั้ สอน 3. ครใู ชส้ ่ือ Power Point เพ่ืออธบิ ายวิธีการเข้าสู่โปรแกรม Dreamweaver CS6 ซง่ึ การเปิด โปรแกรม Dreamweaver CS6 ขนึ้ มาใช้งานนัน้ สามารถทาได้หลายวธิ ี โดยการเข้าสโู่ ปรแกรมบน Windows 8 และ 8.1 จะมีวิธีตา่ งๆ ดังนี้ 1). ผ่าน Desktop Icon ถ้าหากว่ามีไอคอน Dreamweaver CS6 บนเดสกท์ อปอยู่แล้ว สามารถดับเบิ้ลคลิกเพ่ือเขา้ สู่โปรแกรมได้ 2) ผ่าน Start Menu ถ้าหากว่ามีไอคอน Dreamweaver CS6 บนเดสก์ทอปอย่แู ล้ว สามารถดบั เบล้ิ คลิกเพื่อเข้าสู่โปรแกรมได้ใน Windows 8 และ 8.1 Start Menu จะเปลยี่ นเปน็ แบบ Metro UI และกลายเปน็ หนา้ ใหมอ่ ีกหนา้ แทนท่จี ะเป็นเมนเู หมอื นในวินโดวสเ์ วอรช์ นั่ เก่า โดยสามารถ เขา้ ถงึ ไดโ้ ดยคลกิ ท่ีมุมลา่ งซา้ ยของหน้าจอ หรอื กด Windows Button บนคียบ์ อรด์ จากนน้ั จึงเลือ่ นหา ไอคอน Dreamweaver CS6 และคลิกเพื่อเปิดใช้งาน

64 3) ผ่าน Taskbar ในกรณีท่ีไมต่ อ้ งการเปดิ มาท่หี น้า Start Menu หรอื Desktop ทกุ คร้ังที่ เปดิ ใช้ Dreamweaver CS6 สามารถปกั หมดุ ไอคอนของโปรแกรมไวท้ ่ี Taskbar ได้ โดยจะทาให้ สามารถเรียกใชง้ านเม่ือไหร่ก็ได้ไม่ว่าจะกาลังเปิดใช้งานหนา้ ตา่ งอะไรอยูก่ ต็ าม โดยมีข้นั ตอนดงั น้ี 3.1. เข้าไปท่ี Start Menu เล่ือนหาไอคอน Dreamweaver CS6 จากนนั้ คลกิ ขวา จะ ปรากฏเมนขู ้ึนด้านลา่ ง ใหค้ ลิกที่ Pin To Taskbar 3.2. เมือ่ เรียบรอ้ ยแล้ว ไอคอนจะถกู ปักหมุดไว้ที่ Taskbar เม่ือต้องการเปิดใชง้ านให้คลกิ ที่ไอคอนดังกลา่ วได้ตลอดเวลา 4. ครใู ช้สอื่ Power Point เพ่ืออธิบายสว่ นประกอบต่างๆของโปรแกรม Adobe Dreamweaver CS6 พร้อมเปิดแสดงในโปรแกรมจริงให้ผู้เรียนไดเ้ หน็ ภาพและเข้าใจย่งิ ขนึ้ - ส่วนประกอบของ Welcome Screen Welcome Screen คือหนา้ จอแรกท่ีจะปรากฏเม่อื เปดิ ใช้งานโปรแกรม โดยแบ่งออกเป็นเมนู 3 กล่มุ คือ 1). Open a Recent Item คอื การเปิดไฟล์ท่ีใช้งานก่อนๆ ไฟล์ล่าสุดข้ึนมาใชง้ าน 2). Create New คอื การสร้างไฟล์งานใหม่เปลา่ ๆ ข้ึนมาโดยมใี ห้เลือกหลายชนดิ ทัง้ html, php, asp เปน็ ต้น

65 3). Top Features (Videos) เปน็ รายการวิดีโอตัวอย่างฟเี จอร์ตา่ งๆ ในโปรแกรมทม่ี ใี ห้ใช้งาน ใหค้ ลิกดูได้ - ส่วนประกอบหนา้ จอโปรแกรม Adobe Dreamweaver CS6 ประกอบด้วย 1). แถบเมนูหลัก (Menu Bar) ประกอบด้วย -File ใช้จัดการกบั ไฟล์เวบ็ เพจตา่ งๆ เช่น สรา้ งเวบ็ เพจใหม่ สร้างเวบ็ เพจจาก Templateบันทึกเว็บเพจไว้เปน็ Template รวมไปถงึ การบันทึกเวบ็ เพจ และแสดงผลผ่านเว็บเบราเซอร์ ต่างๆ -Edit เป็นชดุ คาส่งั ท่ใี ชใ้ นเรือ่ งเก่ยี วกับการแก้ไข เช่น การตดั คดั ลอก วาง รวมถงึ การ ค้นหาและแก้ไขโค้ดคาสง่ั -View เปน็ ชุดคาส่งั ท่ีใชป้ รับเปลย่ี นมมุ มองของเวบ็ เพจขณะทางาน หรอื แสดงผลเว็บ เพจผ่านเบราเซอร์ -Insert เปน็ ชุดคาสง่ั ที่ใช้แทรกวัตถุต่างๆ เชน่ รูปภาพ เสยี ง วิดีโอ ภาพเคล่อื นไหว โดย สามารถใชพ้ าเนลในการทาหน้าท่ีเดียวกันได้ -Modify ใช้แกไ้ ขวตั ถุตา่ งๆ บนหน้าเว็บเพจ เช่น แก้ไขขนาดภาพ ความละเอียดภาพ รปู แบบ หรือขนาดของตัวอกั ษร รวมถึงการแปลง Frame ให้เปน็ ตาราง เปน็ ตน้ -Format ใช้ปรับเปลยี่ นรูปแบบโดยรวมของข้อความบนเพจ เช่น การจดั เรียงข้อความ การสร้าง List รายการ เปน็ ตน้ -Command เปน็ เมนทู ่ีใชจ้ ดั การกับชดุ คาสง่ั ต่างๆ ทีก่ าลงั ใชง้ านบนเวบ็ -Site เป็นชดุ คาส่งั สาหรับทางานกบั Site เช่น สร้าง Site แกไ้ ข Site ทท่ี างานอยู่ รวมถงึ ตรวจสอบลงิ ก์ตา่ งๆ บนเวบ็ ไซตว์ ่ามีลิงกใ์ ดเสยี หายหรือไม่ -Window เป็นเมนูทีใ่ ช้เลือก, เปิด และปดิ พาเนลตา่ งๆ มาใชง้ าน -Help ใช้ขอความชว่ ยเหลอื จาก Adobe รวมถงึ เปดิ ข้อมูลการใช้งาน

66 2). แถบเคร่อื งมือ (Insert Bar) ประกอบดว้ ยกลุ่มคาส่งั เพื่อให้ใชง้ านได้สะดวก ดังนี้ -Common ใช้วางออบเจ็กต์ท่ีต้องใช้งานบอ่ ยๆ เช่น รปู ภาพ ตาราง ไฟล์มัลติมีเดยี เปน็ ตน้ -Layout ใชว้ างออบเจ็กต์ท่ีใช้จัดโครงสรา้ งของเวบ็ เพจ เชน่ ตารางเฟรมและ AP element -Forms ใช้วางออบเจ็กตท์ ่ีใช้ในการสรา้ งแบบฟอร์มรับข้อมูลเช่น ชอ่ งรับข้อความ ป่มุ ตัวเลอื กตา่ งๆ เป็นต้น -Data ใช้วางคาสงั่ ท่ีใช้การจดั การฐานขอ้ มูลและดึงข้อมลู จากฐานขอ้ มลู มาแสดงบนเว็บ เพจ -Sary ใช้วางออบเจก็ ตท์ ี่ใช้เทคโนโลยขี อง Ajax -jQuery Mobile ใช้สร้างหนา้ เพจทแี่ สดงบนอุปกรณ์มือถือและแทบ็ เล็ตโดยใชเ้ ทคโนโลยี แบบ jQuery -InContextEdting ใชส้ รา้ งออบเจ็กต์ทช่ี ว่ ยอานวยความสะดวกใหผ้ ู้ใช้งานสามารถแก้ไขเว็บ เพจได้ -Text ใชส้ าหรบั จัดปรบั แตง่ หรอื จดั รปู แบบของตวั อักษรและข้อความสะดวกให้ผใู้ ชง้ าน เช่น หัวเรื่องตวั หนาตวั เอยี งรวมทั้งแทรกสญั ลกั ษณ์พิเศษต่างๆ เช่น $ (Dollar) © (Copyright) เปน็ ต้น -Favorites เป็นกล่มุ ทีส่ ามารถเพม่ิ ปุ่มคาสั่งทใ่ี ช้บ่อยจากกลุ่มอน่ื ๆ เขา้ มาเกบ็ ไว้ใชง้ าน เอง เพื่อความสะดวก 3). พืน้ ทสี่ รา้ งงาน(Doccument Area) สามารถใช้งานไดใ้ น 4 มุมมอง ไดแ้ ก่ -มมุ มองออกแบบ (Design View) ใชแ้ ก้ไขและจดั วางเนื้อหาต่างๆ ลงบนเว็บเพจ -มมุ มองโคด้ (Code View) ใชส้ าหรับเปดิ ดูคาส่ังตา่ งๆ เชน่ HTML PHP ASP และ JSP และสามารถแก้ไขคาส่งั ตา่ งๆ ไดต้ ามต้องการ -มมุ มองโคด้ และออกแบบ (Code and Design View หรอื Split) แสดงทั้งแบบมมุ มอง ออกแบบและมมุ มองโคด้ พร้อมกัน สามารถปรบั ขนาดพนื้ ที่ของแตล่ ะสว่ นได้โดยคลิกลากท่ีเส้นแบง่ ระหวา่ งทัง้ 2 ส่วนนี้ -มมุ มองแสดงเว็บเพจเหมือนดูบนเบราเซอร์ (Live View) แสดงหน้าเว็บเพจเหมือนดู บนเบราเซอร์ทั้งในส่วนของ JavaScript และ Plugin 4). กลมุ่ หน้าต่างพาเนล (Panels) เปน็ หน้าต่างเลก็ ๆ ท่รี วบรวมเคร่ืองมือไว้เป็นกลุ่ม ตามหนา้ ท่ที ี่เกี่ยวข้องทาให้ใช้งานได้สะดวกรวดเร็วขึ้น 5). หน้าต่างคณุ สมบตั ิ (Properties Inspector) เปน็ หน้าต่างเลก็ ๆ ทอี่ ย่ดู ้านล่างสดุ ของหน้าจอโปรแกรมเปน็ สว่ นทใ่ี ช้กาหนดคุณสมบตั ิสาคัญๆ ของออบเจ็กต์ทวี่ างในหนา้ เว็บเพจ เชน่ ตาแหน่งขนาดและสีและเป็นสว่ นทใี่ ช้งานมากที่สดุ โดยทั่วไป

67 6). แถบสถานะ (Status Bar) เป็นแถบทอ่ี ยู่ทางด้านล่างของหนา้ ต่าง Doccument ประกอบดว้ ย 2 ส่วนดา้ นซา้ ยเปน็ Tag Selector ส่วนด้านขวาเป็นเครื่องมือตา่ งๆ 5. ครใู ช้เทคนิควิธสี อนแบบสาธติ (Demonstration Method) เพื่อแสดงวิธกี ารใช้งานเบื้องตน้ ของโปรแกรม Adobe Dreamweaver CS6 ดังข้นั ตอนต่อไปน้ี 1) การปิดไฟล์ เมื่อต้องการเลิกใช้ไฟลเ์ ว็บเพจที่กาลงั ใชง้ านอยู่ อาจเปน็ เพราะตอ้ งการทจ่ี ะเปิดไฟล์อ่ืนข้ึนมาแทน หรอื ตอ้ งการออกจากโปรแกรม สามารถทาได้โดยการคลิกทปี่ ุม่ บรเิ วณขวามอื ของแทบ็ ช่ือไฟล์บน ทใ่ี ต้แถบเมนู โดยหลังจากปิดแลว้ โปรแกรมจะกลับมาอยทู่ ่ี Welcome Screen 2) การออกจากโปรแกรม เมอื่ เลิกทางานบนโปรแกรม Dreamweaver CS6 แลว้ หลังจากการบันทึกไฟลเ์ รยี บร้อยแล้ว สามารถปดิ โปรแกรมได้ด้วยการคลิกปุ่มรปู กากบาททม่ี มุ ขวาบนสุดของโปรแกรม 6.ผู้เรยี นเปดิ โปรแกรม Adobe Dreamweaver CS6 และเขยี นข้นั ตอนการเปดิ โปรแกรม 7.ผู้เรียนออกจากโปรแกรม Adobe Dreamweaver CS6 และเขยี นขัน้ ตอนการออกจาก โปรแกรม 8.ครูและผ้เู รียนช่วยกันอภิปรายความยากง่ายในการใช้งานเบ้อื ต้นของโปรแกรม Adobe Dreamweaver CS6 10.ครเู น้นผเู้ รยี นให้มีความละเอียดรอบคอบ มคี วามอดทน มีควาเขม้ แข็ง มคี วามเพียร พยายามใน การฝกึ ทักษะปฏบิ ตั ิงานได้จริงด้านคอมพวิ เตอร์ได้ นอกจากนน้ั ยงั ให้ระมดั ระวังความปลอดภัยในการฝกึ ปฏิบตั งิ านที่อาจผิดพลาดเกิดขน้ึ ไดโ้ ดยไม่ได้ต้ังใจ เพราะในการประกอบอาชีพจรงิ ๆ ดังนัน้ ผูเ้ รียนต้องฝึก ทกั ษะความชานาญเหลา่ นใี้ ห้มีประสิทธิภาพ เพ่ือสร้างรายไดท้ ด่ี ีในอนาคตต่อไป และพร้อมรบั ผลกระทบ

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

69 เครอ่ื งมือวัดผล 1. แบบสังเกตพฤติกรรมรายบคุ คล 2. แบบประเมนิ พฤตกิ รรมการเข้ารว่ มกิจกรรมกลมุ่ (โดยครู) 3. แบบสังเกตพฤติกรรมการเข้ารว่ มกจิ กรรมกลุ่ม (โดยผู้เรยี น) 4. แบบประเมนิ กิจกรรมใบงาน 5. แบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ัติ 6. แบบประเมินคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพงึ ประสงค์ โดยครูและ ผเู้ รยี นร่วมกนั ประเมนิ เกณฑ์การประเมินผล 1. เกณฑผ์ า่ นการสังเกตพฤตกิ รรมรายบคุ คล ต้องไม่มชี อ่ งปรบั ปรุง 2. เกณฑ์ผา่ นการประเมนิ พฤติกรรมการเข้าร่วมกจิ กรรมกลมุ่ คือ ปานกลาง (50 % ขึ้นไป) 3. เกณฑผ์ ่านการสงั เกตพฤติกรรมการเขา้ รว่ มกจิ กรรมกล่มุ คือ ปานกลาง (50% ขน้ึ ไป) 4. กิจกรรมใบงาน เกณฑ์ผา่ น คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝกึ ปฏิบัติมีเกณฑ์ผา่ น 50% 6 แบบประเมินคุณธรรม จรยิ ธรรม ค่านยิ ม และคุณลักษณะอันพงึ ประสงค์ คะแนน ข้ึนอยกู่ ับการประเมินตามสภาพจรงิ กจิ กรรมเสนอแนะ 1.แนะนาใหผ้ ูเ้ รียนศึกษาข้อมูลเกยี่ วกับสว่ นประกอบและการใช้งานของแถบเครือ่ งมือตา่ งๆ ของโปรแกรม Adobe Dreamweaver CS6 เพิม่ เติม 2.อ่านทบทวนเน้ือหา

70 จงเลือกคาตอบท่ถี ูกตอ้ งท่ีสุดเพยี งขอ้ เดียว 1. Adobe Dreamweaver CS6 ไม่สามารถใช้กบั ระบบปฏบิ ัติการอะไร ก. Windows ข. Android ค. Linux ง. ปลาดาว 2. ความสามารถพ้ืนฐาน ของ Adobe Dreamweaver CS6 คือ มกี ารทางานแบบ WYSIWYG (What You See Is What You Get) หมายความว่าอย่างไร ก. เขียนเว็บแบบไหนอยา่ งไรจะแสดงให้เห็นแบบนั้นทั้งออกแบบและแสดงผลจริง ข. HTML CODE ค. Script ง. JAVA Script 3. Site Map คอื อะไร ก. เครื่องมอื ท่ใี ช้สรา้ งเว็บไซต์แบบ Responsive หรอื แบบที่ปรับการแสดงผลให้ตรงกับอุปกรณ์ ตา่ งๆ ทใ่ี ช้ ทัง้ สมาร์ทโฟน แทบเล็ท คอมพวิ เตอร์พซี ี ข. แผนท่สี าหรับไซต์งาน ค. เคร่ืองมอื ทแ่ี สดงผลเวบ็ ไซต์ใหเ้ ป็นรูปเป็นร่าง โดยแสดงให้เห็นว่าหน้าเวบ็ เพจไหนโยงไปยงั หนา้ ไหนบ้าง และแสดงผลในรปู แบบของการเชอ่ื มโยงต่อกัน ง. แผนทีส่ ะดวกสาหรับผู้ใชง้ านเวบ็ ไซต์ 4. เคร่ืองคอมพิวเตอร์ทจ่ี ะตดิ ตั้งโปรแกรม Adobe Dreamweaver CS6 ที่ใช้ระบบปฏบิ ัตกิ าร Windows ตอ้ งมคี ุณลักษณะข้ันตา่ เกยี่ วกับพ้นื ท่สี าหรบั การตดิ ต้ังบนฮารด์ ดสิ ก์ เทา่ กับเทา่ ใด ก. 1 GB. ข. 1.8 GB. ค. 2 GB. ง. 3 GB.

71 5. จากหน้าจอนี้หากตอ้ งการติดตัง้ แบบให้ทดลองใช้ 30 วัน ใหค้ ลิกเลอื กท่ีใด ก. Install with a serial number ข. Start my subscription ค. Install a trial ง. ไม่ต้องคลิกเลอื กโปรแกรมจะดาเนินการให้อัตโนมตั ิ 6. ขอ้ ใดคือการเขา้ สูโ่ ปรแกรม Adobe Dreamweaver CS6 ก. ผา่ น Desktop Icon ข. ผ่าน Start Menu ค. ผ่าน Taskbar ง. ถกู ทุกข้อ 7. ท่ี Welcome Screen หากต้องการเปิดไฟล์ที่ใชง้ านกอ่ นหนา้ นี้ ข้ึนมาใช้งาน ให้คลิกเลอื กทใี่ ด ก. Open a Recent Item ข. Create New ค. Top Features (Videos) ง. Save As จาก Menu Bar และคาตอบต่อไปนี้ จงตอบคาถามข้อ 8-ข้อ10 ก. File ข. Edit ค. Modify ง. Commands 8. คาสัง่ ใดใช้แกไ้ ขวัตถุต่างๆ บนหน้าเวบ็ เพจ เชน่ แก้ไขนาดภาพ ความละเอียดภาพ รปู แบบ หรือขนาด ของตวั อักษร รวมถงึ การแปลง Frame ใหเ้ ปน็ ตาราง 9. คาสัง่ ใดเป็นชุดคาสั่งที่ใชใ้ นเรอื่ งเก่ยี วกับการแก้ไข เช่น การตดั คัดลอก วาง รวมถึงการคน้ หาและ แก้ไขโค้ดคาส่ัง 10. คาสัง่ ใดใช้จัดการกบั ไฟลเ์ วบ็ เพจต่างๆ เชน่ สร้างเวบ็ เพจใหม่ สรา้ งเวบ็ เพจจาก Template บนั ทึก เว็บเพจไว้เป็น Template รวมไปถงึ การบันทึกเวบ็ เพจ และแสดงผลผา่ นเวบ็ เบราเซอรต์ า่ งๆ

72 บนั ทึกหลังการสอน ข้อสรุปหลังการสอน .................................................................................................................. .............................. .................................................................................................................. .............................. ............................................................................................................................. ................... .................................................................................................................. .............................. .......................................................................................................... ...................................... .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... ปัญหาที่พบ .................................................................................................................. .............................. ........................................................................................................ ........................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... .................................................................................................................. .............................. ................................................................................................................. ............................... .................................................................................................................. .............................. แนวทางแกป้ ญั หา ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ........................................................................................................... ..................................... .................................................................................................................. .............................. ................................................................................................................................................

73 แผนการจัดการเรียนรู้แบบบูรณาการท่ี 7 หนว่ ยที่ 5 สอนครง้ั ที่ 7 (25- รหสั 2204-2009 การสรา้ งเว็บไซต์ (2-2-3) 28) ชือ่ หน่วย/เรอ่ื ง การตดิ ตั้งและใชง้ านโปรแกรม Adobe Dreamweaver CS6 เบื้องตน้ จานวน 4 ช.ม. สาระสาคัญ เมื่อเข้าใจการสร้างเวบ็ ไซต์โดยทัว่ ไป ตลอดจนเตรยี มข้อมลู เลอื กโปรแกรม และตดิ ตัง้ โปรแกรม แลว้ สิ่งสาคัญขน้ั ต่อไปคือ ลงมอื สร้างเว็บไซต์ โดยเริม่ ตัง้ แต่สรา้ งไซต์ ตั้งช่ือ จนถึงการบันทึก เพอื่ เป็นการ สร้างเว็บไซตเ์ บ้ืองต้น และสามารถเปดิ กลบั มาแก้ไขได้ จดุ ประสงคก์ ารเรยี นรู้ 1. เข้าใจและรูว้ ธิ กี ารสร้างเวบ็ ไซตข์ ัน้ พน้ื ฐาน 2. สามารถสร้างและบันทกึ เว็บเพจได้ 3. มีคณุ ธรรม จริยธรรม และค่านยิ มทดี่ ีในการใช้คอมพิวเตอร์ 4. มกี ารพฒั นาคุณธรรม จริยธรรม คา่ นิยม และคุณลักษณะอันพึงประสงคข์ องผูส้ าเร็จการศึกษา สานักงานคณะกรรมการการอาชวี ศกึ ษา ท่ีครูสามารถสังเกตได้ขณะทาการสอนในเร่ือง 4.1 ความมีมนษุ ยสัมพันธ์ 4.2 ความมีวินัย 4.3 ความรบั ผดิ ชอบ 4.4 ความซื่อสัตยส์ จุ รติ 4.5 ความเชอ่ื มัน่ ในตนเอง 4.6 การประหยัด 4.7 ความสนใจใฝ่รู้ 4.8 การละเว้นสง่ิ เสพติดและการพนัน 4.9 ความรักสามัคคี 4.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรเู้ กี่ยวกับกระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยุกตใ์ ชโ้ ปรแกรมภาษาหรอื โปรแกรมสาเร็จรปู สาหรับสรา้ งเว็บไซต์ และการตดิ ตง้ั และอัพโหลด (Upload) เว็บไซต์

74 เนอื้ หาสาะ 1. การสร้างเวบ็ ไซตข์ ัน้ พน้ื ฐาน 2. การสรา้ งเว็บเพจใหม่ 3. การบันทกึ เวบ็ เพจ กจิ กรรมการเรยี นรู้ ขนั้ นาเข้าสบู่ ทเรยี น 1.ครกู ลา่ ววา่ เมือ่ เขา้ ใจการสร้างเวบ็ ไซต์โดยท่วั ไปแลว้ สิ่งสาคัญข้นั ต่อไปคือ ลงมอื สร้างเว็บไซต์ โดยเริม่ ต้งั แตส่ รา้ งไซต์ ตง้ั ช่อื จนถงึ การบันทึก เพือ่ เปน็ การสรา้ งเวบ็ ไซตเ์ บอื้ งต้น และสามารถเปิด กลับมาแก้ไขได้ 2.ผเู้ รียนบอกชอ่ื เว็บไซต์ทีต่ นช่ืนชอบ พร้อมให้เหตผุ ล 3.ผเู้ รียนทาแบบประเมณิ ผลก่อนเรยี น ข้นั สอน 4.ครูใช้เทคนคิ วิธีสอนแบบสาธติ (Demonstration Method) สาธิตการสร้างเวบ็ ไซตข์ ั้นพ้นื ฐาน และใหผ้ เู้ รียนปฏบิ ัติตาม โดยมขี ั้นตอนต่อไปน้ี 1). การสรา้ งไซต์ใหม่ เป็นการกาหนดโปรแกรม Dreamweaver ใหร้ ูว้ า่ แหลง่ การเกบ็ ข้อมลู อยู่ตรงตาแหน่งใดบนคอมพวิ เตอร์ โดยจะสง่ ผลให้เน้ือหาและภาพประกอบตา่ งๆ ถกู รวบรวมไว้ท่ีจุดเดียว ลดปัญหาเรื่องภาพหายเมื่อนาเวบ็ ไซตไ์ ปใชง้ าน การสร้างไซต์สามารถทาไดด้ ้วยข้นั ตอนดงั นี้ 1.1. คลิกปุ่ม (Site) แล้วเลอื ก New Site… 1.2. ตงั้ ชอ่ื ไซต์ จากนั้นกดปุ่ม (Browse to Folder) เพือ่ เลือกโฟลเดอร์เกบ็ งาน

75 1.3. เข้าไปยังโฟลเดอรท์ ีต่ ้องการเก็บงาน จากนนั้ กด Select 1.4. หลงั จากเลอื กโฟลเดอรเ์ กบ็ งานแลว้ คลกิ Save 1.5. จะปรากฏชือ่ ไซต์ และแหลง่ ทีเ่ กบ็ โฟลเดอร์งานบนพาเนล Files ทนั ที

76 2).การแก้ไขไซต์ ในกรณีท่ีไซต์ที่สร้างไว้เกิดความผิดพลาด เชน่ เลือกโฟลเดอรเ์ ก็บงานผดิ หรอื ตัง้ ชอื่ ไซต์ผดิ สามารถ แกไ้ ขได้ดว้ ยข้ันตอนดังตอ่ ไปนี้ 2.1. คลิกท่ีปุ่ม (Site) แลว้ เลอื ก Manage Sites… 2.2. คลิกเลอื กที่ไซต์ทีต่ ้องการแก้ไข จากน้ันคลิก (Edit current selected site) เพ่อื แกไ้ ข Site 2.3. แก้ไขชือ่ หรือตาแหนง่ โฟลแดอร์เกบ็ ไฟลง์ าน เมื่อเสรจ็ แลว้ ให้คลกิ Save

77 2.4. คลิก Done เม่ือเสร็จสิ้น 5. ผูเ้ รยี นสร้างไซตช์ ื่อ Beta และเขียนขั้นตอนการสร้างไซต์ 6. ครใู ชเ้ ทคนิควิธสี อนแบบสาธติ (Demonstration Method) สาธติ การสรา้ งเพจใหม่และให้ ผเู้ รยี นปฏบิ ตั ิตามขน้ั ตอนตอ่ ไปน้ี -การสรา้ งเว็บเพจใหมด่ ้วย Blank Page Blank Page คอื เวบ็ เพจเปลา่ ๆ เหมาะกับกรณีท่ตี ้องการออกแบบเลย์เอาต์ทกุ อย่างด้วยตัวเองการ สรา้ งเว็บเพจเปล่ามีวธิ ดี ังน้ี 1). ไปทเ่ี มนู File>New 2). จะปรากฏหน้าต่าง New Doccument ขน้ึ มา 2.1 ให้เลือกที่ Blank Page 2.2 เลือก Page Type เป็น HTML 2.3 เลอื ก Layout เป็น <none> 2.4 คลกิ ท่ี Create

78 3). จะปรากฏไฟลเ์ ว็บเพจเปล่าพรอ้ มใช้งานทันที -การสรา้ งเว็บเพจใหม่ดว้ ย Page From Sample การสร้างเวบ็ เพจเปลา่ ด้วยคาสั่ง Page From Sample จะเปน็ การกาหนดรูปแบบของเว็บเพจท้งั สพี นื้ รปู แบบตวั อักษร ตาราง รวมถึงลิงก์ตา่ งๆ ในรปู แบบของ CSS Style Sheet ซ่งึ มวี ิธีการสรา้ งและ ใช้งานดังน้ี 1). ไปทเ่ี มนู File>New

79 2). จะปรากฏหนา้ ตา่ งนี้ขึน้ มา 2.1 เลอื กคาส่ัง Page from Sample 2.2 เลือก Sample Folder เป็น CSS Style Sheet 2.3 เลอื ก Sample Page ตามตอ้ งการ โดยจะมภี าพตัวอย่างใหด้ ู 2.4 เมือ่ เสร็จแลว้ คลกิ Create 3). จากนนั้ จะปรากฏไฟล์ CSS ให้กดปมุ่ Ctrl+S เพอ่ื บันทึกเกบ็ ไว้ 4). ไปชอื่ โฟลเดอรท์ ตี่ ้องการเก็บไฟล์ และตัง้ ช่ือไฟล์ จากน้ันคลกิ Save

80 จากน้นั จะยงั ไมเ่ กิดความเปลย่ี นแปลงใดๆ จนกว่าจะนาไฟล์ CSS ทไี่ ด้บนั ทึกไวม้ าใช้งาน บนเว็บเพจทีส่ ร้างไว้กอ่ นหนา้ ดงั ตัวอย่างต่อไปน้ี 1). จากหนา้ ทป่ี รากฏคอื หน้าเวบ็ เพจดง้ั เดิม ที่ยงั ไม่ไดม้ ีการใช้ CSS ทบี่ นั ทกึ ไว้ ใหค้ ลิกท่ี พาเนล CSS Styles 2). คลกิ ปมุ่ (Attach Style Sheet) 3). จะปรากฏหน้าต่าง Attach External Style Sheet 3.1 คลกิ ท่ี Browse 3.2 เลอื กไฟล์ CSS ทไี่ ด้บนั ทึกไว้ 3.3 คลกิ OK

81 4). เว็บเพจท่ีสร้างไว้จะมีรูปแบบสีสันตาม CSS ท่ีได้สร้างไวใ้ นขน้ั ตอนแรก 7. ครูและผเู้ รียนสาธติ การบนั ทึกเวบ็ เพจ ดงั ข้นั ตอนต่อไปนี้ 1). คลิกที่ File เลอื ก -Save เมอื่ ต้องการบนั ทึกซา้ ชื่อเดิมหรือเปน็ การบนั ทึกครงั้ แรก -Save As เมือ่ ต้องการบันทึกไฟล์เดมิ เป็นช่ือใหมห่ รือเปน็ การบันทึกครั้งแรก -Save All เมอื่ ต้องการบันทึกเว็บเพจทเ่ี ปดิ อยูท่ ้ังหมดพร้อมกนั -Save All Related Files เมอื่ ตอ้ งการบนั ทึกไฟล์ทั้งหมดที่เก่ียวขอ้ ง เชน่ ไฟล์ CSS เปน็ ต้น -Save as Template เม่ือต้องการบนั ทึกเว็บเพจทีส่ รา้ งไว้เป็นเทมเพลตในการสร้างครั้งอื่น

82 2). จะปรากฏหนา้ ตา่ งน้ีข้ึนมา ใหเ้ ปดิ ไปยงั โฟลเดอร์ทีต่ ้องการบนั ทึกจากนั้นตั้งช่อื ไฟล์ตามท่ี ตอ้ งการ (ในกรณที เ่ี ป็นหนา้ แรกของเว็บไซต์ต้องชื่อ index.html เทา่ นน้ั ) จากนน้ั เลือกประเภทไฟลท์ ี่ บันทกึ เปน็ html แล้วคลกิ Save 8. ผู้เรยี นสรา้ งเวบ็ เพจและบันทกึ เวบ็ เพจเป็นชื่อ home.html พร้อมทง้ั เขยี นขั้นตอนการสรา้ ง เว็บเพจ และข้นั ตอนการบนั ทึกเวบ็ เพจ ขนั้ สรปุ และการประยกุ ต์ 9.ครูและผู้เรียนสรุปเนอ้ื หาทเี่ รยี น 10.ครูสุ่มถามผูเ้ รียนเก่ียวกับเนื้อหาที่เรยี น ส่อื และแหล่งการเรียนรู้ 1.หนงั สือเรียน วชิ าการสรา้ งเว็บไซต์ ของสานกั พิมพเ์ อมพันธ์ 2.รูปภาพ 3.กจิ กรรมการเรียนการสอน 4.แผ่นใส 5.สอ่ื PowerPoint หลักฐาน 1.บันทกึ การสอน 2.ใบเชค็ รายชือ่ 3.แผนจดั การเรยี นรู้ 4.การตรวจประเมินผลงาน

83 การวัดผลและการประเมนิ ผล วธิ ีวดั ผล 1. สังเกตพฤติกรรมรายบุคคล 2. ประเมินพฤติกรรมการเขา้ ร่วมกิจกรรมกลมุ่ 3. สงั เกตพฤตกิ รรมการเข้าร่วมกิจกรรมกลุ่ม 4. ตรวจใบงาน 5. ตรวจแบบประเมนิ ผลการเรยี นรู้ และแบบฝึกปฏบิ ัติ 6. การสังเกตและประเมินพฤติกรรมด้านคุณธรรม จรยิ ธรรม คา่ นิยม และคุณลักษณะอันพึง ประสงค์ เครือ่ งมอื วัดผล 1. แบบสงั เกตพฤติกรรมรายบคุ คล 2. แบบประเมินพฤตกิ รรมการเข้าร่วมกิจกรรมกลมุ่ (โดยครู) 3. แบบสงั เกตพฤติกรรมการเข้าร่วมกจิ กรรมกลุ่ม (โดยผู้เรียน) 4. แบบประเมนิ กิจกรรมใบงาน 5. แบบประเมนิ ผลการเรยี นรู้ และแบบฝกึ ปฏิบตั ิ 6. แบบประเมินคุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ โดยครูและ ผเู้ รยี นร่วมกันประเมนิ เกณฑก์ ารประเมนิ ผล 1. เกณฑผ์ ่านการสังเกตพฤติกรรมรายบคุ คล ต้องไม่มีชอ่ งปรบั ปรงุ 2. เกณฑผ์ า่ นการประเมนิ พฤติกรรมการเข้ารว่ มกิจกรรมกลมุ่ คือ ปานกลาง (50 % ขน้ึ ไป) 3. เกณฑ์ผ่านการสงั เกตพฤติกรรมการเข้าร่วมกิจกรรมกลุ่ม คือ ปานกลาง (50% ขน้ึ ไป) 4. กิจกรรมใบงาน เกณฑ์ผ่าน คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝกึ ปฏบิ ตั ิมเี กณฑผ์ า่ น 50% 6 แบบประเมินคุณธรรม จริยธรรม คา่ นยิ ม และคุณลักษณะอันพึงประสงค์ คะแนน ขนึ้ อยู่กับการประเมนิ ตามสภาพจรงิ กจิ กรรมเสนอแนะ 1.แนะนาใหผ้ ู้เรียนฝกึ ปฏบิ ัติเพม่ิ เติมเพื่อให้เกิดความชานาญ 2.อ่านและทบทวนเนื้อหา

84 บนั ทึกหลังการสอน ข้อสรปุ หลังการสอน .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ปญั หาท่ีพบ .................................................................................................................. .............................. .................................................................................................... ............................................ .................................................................................................................. .............................. ................................................................................................................................................ .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... .................................................................................................................. .............................. ............................................................................................................. ................................... .................................................................................................................. .............................. แนวทางแกป้ ญั หา ................................................................................................................................................ .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. .................................................................................................................. .............................. ....................................................................................................... ......................................... .................................................................................................................. .............................. ................................................................................................................................................ ............................................................................................................................. ................... ................................................................................................................................................

85 แผนการจดั การเรยี นร้แู บบบูรณาการที่ 8 หนว่ ยท่ี 5 สอนครง้ั ท่ี 8 (29- รหัส 2204-2009 การสรา้ งเวบ็ ไซต์ (2-2-3) 32) ช่อื หน่วย/เรอ่ื ง การตดิ ต้งั และใช้งานโปรแกรม Adobe Dreamweaver CS6 เบ้ืองตน้ จานวน 4 ช.ม. สาระสาคญั เมอ่ื เข้าใจการสรา้ งเว็บไซต์โดยทั่วไป ตลอดจนเตรียมข้อมูล เลือกโปรแกรม และตดิ ตัง้ โปรแกรม แลว้ ส่งิ สาคญั ขั้นต่อไปคือ ลงมือสร้างเว็บไซต์ โดยเร่มิ ตง้ั แต่สรา้ งไซต์ ต้ังช่ือ จนถงึ การบันทกึ เพอื่ เปน็ การ สรา้ งเว็บไซต์เบ้อื งต้น และสามารถเปิดกลบั มาแก้ไขได้ จดุ ประสงค์การเรียนรู้ 3. เปิดไฟลเ์ ว็บเพจข้นึ มาใช้งานได้ 4. สามารถเลอื ก Workspace และมมุ มองการทางานที่เหมาะสมได้ 5. มีคุณธรรม จริยธรรม และคา่ นยิ มท่ีดีในการใช้คอมพวิ เตอร์ 6.มกี ารพัฒนาคุณธรรม จริยธรรม ค่านยิ มและคุณลักษณะอนั พงึ ประสงค์ของผสู้ าเรจ็ การศกึ ษา สานกั งานคณะกรรมการการอาชวี ศกึ ษา ทีค่ รสู ามารถสังเกตได้ขณะทาการสอนในเรื่อง 6.1 ความมีมนุษยสัมพันธ์ 6.2 ความมวี นิ ยั 6.3 ความรับผิดชอบ 6.4 ความซื่อสตั ย์สจุ รติ 6.5 ความเช่อื ม่นั ในตนเอง 6.6 การประหยดั 6.7 ความสนใจใฝร่ ู้ 6.8 การละเว้นสง่ิ เสพตดิ และการพนนั 6.9 ความรักสามคั คี 6.10 ความกตัญญูกตเวที สมรรถนะรายวิชา 1. แสดงความรเู้ กี่ยวกบั กระบวนการ โครงสรา้ งการทางาน และไวยากรณ์ ของโปรแกรมภาษาในการสร้างเว็บไซต์ 2. ประยุกต์ใช้โปรแกรมภาษาหรือโปรแกรมสาเร็จรูปสาหรับสรา้ งเวบ็ ไซต์ และการติดตั้งและอัพโหลด (Upload) เวบ็ ไซต์

86 เน้ือหาสาระ 4. การเปิดไฟล์เว็บเพจข้นึ มาใช้งาน 5. การเลือก Workspace ในการทางาน 6. มุมมองการทางาน กจิ กรรมการเรียนรู้ ขัน้ นาเขา้ สู่บทเรียน 1.ครูใชเ้ ทคนคิ การสอนแบบซิปปาโมเดล (CIPPA MODEL) โดยการทบทวนความรเู้ ดิมจาก สปั ดาห์ทผ่ี ่านมา โดยดึงความรู้เดมิ ของผ้เู รยี นในเร่อื งทจี่ ะเรียน เพื่อช่วยใหผ้ ู้เรียนมคี วามพรอ้ มในการ เชอื่ มโยงความรูใ้ หมก่ ับความรู้เดมิ ของตน ผู้สอนใช้การสนทนาซกั ถามใหผ้ เู้ รียนเลา่ ประสบการณ์เดิม 2.ครเู ปดิ โอกาสใหผ้ เู้ รียนซักถามปญั หา หรือข้อสงสัยเกี่ยวกับเน้อื หาสปั ดาห์ท่ีแลว้ คือเรอ่ื งการ สรา้ งเวบ็ ไซตข์ ้ันพืน้ ฐาน 3.ครูกล่าวว่าหลงั จากท่ีสรา้ งไซต์เสร็จเรียบรอ้ ยแลว้ ในขัน้ ตอนไปคอื การสร้างเวบ็ เพจเพ่ือ รวมกันให้ออกมาเป็นหนงึ่ เวบ็ ไซต์ ข้ันสอน 4. ครใู ช้เทคนคิ วธิ กี ารจัดการเรียนรแู้ บบอภปิ ราย (Discussion Method) เพื่อใหผ้ เู้ รยี นเข้าใจ เนอ้ื หาได้อยา่ งมีประสทิ ธภิ าพ โดยมวี ธิ กี ารคือ ใหผ้ ู้เรียนชว่ ยกนั อภิปรายเน้ือหาเร่ืองหลักการตัง้ ช่ือเว็บ เพจ ซ่ึงมหี ลักการต้ังช่ือเว็บเพจท่สี าคญั ดังนี้ 1). ช่ือไฟล์ควรเปน็ ภาษาอังกฤษตวั พิมพ์เลก็ เทา่ น้นั 2). ชอื่ ไฟล์ไมค่ วรเว้นชอ่ งว่าง แต่สามารถใชเ้ ครือ่ งหมาย _ หรอื – ได้ เชน่ my_page_1.html หรอื my-page-1.html เป็นตน้ 3). ไมค่ วรใช้อักขระพิเศษในการตัง้ ชอ่ื เชน่ @ *! $ % เนือ่ งจากผดิ หลักการต้ังช่อื ไฟล์ 4). สาหรับเวบ็ เพจที่เปน็ หน้าแรก ควรตงั้ ชอื่ index หรือ default เทา่ น้ัน เท่าน้นั ส่วน นามสกลุ เวบ็ เพจสามารถใช้ได้ทั้ง .html และ .htm 5. ครูใช้เทคนคิ วธิ สี อนแบบสาธติ (Demonstration Method) สาธิตการเปดิ ไฟลเ์ ว็บเพจขนึ้ มาใช้ งาน โดยมขี ั้นตอนดงั น้ี

87 เม่อื เปดิ โปรแกรม Dreamweaver จะพบกบั Welcome Screen โดยสามารถเปดิ ไฟล์งานเกา่ ได้ ผา่ นแท็บ Open a recent item โดยจะปรากฏรายชื่อไฟล์ท่เี คยใชง้ าน ใหค้ ลกิ ไฟล์ที่ต้องการเปิดขึ้นมา ได้เลย หรือในกรณีท่ีไฟลง์ านท่ตี ้องการไม่มีอยูบ่ นรายชอื่ ให้คลกิ ท่ี Open จะปรากฏหนา้ ตา่ งข้นึ มาใหเ้ ปิด โฟลเดอร์ท่เี กบ็ ไฟล์งาน เลอื กไฟล์งานท่ีต้องการ จากน้ันคลิกที่ Open อกี คร้ัง 6. ครูใช้เทคนคิ วธิ ีสอนแบบบรรยาย (Lecture Method) ความหมายของ Workspace ซง่ึ คือ รปู แบบการจัดวางพ้ืนที่ในการทางาน ทเี่ ลอื กใช้ได้ว่า ต้องการใหม้ ีพาเนลใดปรากฏขนึ้ มาให้ใชง้ านและจัด วางตาแหนง่ อยา่ งไรบ้าง โปรแกรม Dreamweaver จะมี Workspace พน้ื ฐานมาให้ โดยท่ีไม่ไดจ้ ากัด เรื่องรปู แบบของพาเนลที่ใชง้ าน และผู้ใช้สามารถปรับแต่งได้ 11 รปู แบบพ้ืนฐานของโปรแกรมมีดังน้ี - App Developer/App Developer Plus เป็น Workspace ทเ่ี หมาะกับการพัฒนา ระบบหรอื การสรา้ งเว็บไซต์ในรปู แบบ Dynamic ทม่ี ีการเชื่อมโยงกับฐานข้อมูลต่างๆ - Business Catalyst เป็น Workspace ท่อี านวยความสะดวกในการทางานรว่ มกับ เว็บไซต์ ท่ีใหบ้ รกิ าร Web Hosting ของ Adobe

88 - Classic เป็น Workspace แบบเกา่ เหมาะสาหรับผทู้ ่ีคุน้ เคยกบั Dreamweaver เวอร์ ชัน่ ท่ีต่ากว่าเวอรช์ น่ั MX2004 ลงไป ซ่งึ หนา้ ตาการใชง้ านจะไม่ซบั ซ้อน - Coder เป็น Workspace ทเี่ หมาะกับนักเขียนโปรแกรม ซง่ึ Workspace จะแสดงส่วน ทเ่ี กี่ยวข้องกบั โค้ดเทา่ น้ัน - Designer/Designer Compact เป็น Workspace สาหรับนกั ออกแบบเวบ็ โดยเฉพาะ ซึ่งมเี คร่ืองมือเฉพาะทางท่ีครอบคลมุ การทางานอยา่ งครบถ้วน - Dual Screen เป็น Workspace ทแ่ี ตล่ ะพาเนลจะแยกจากกันทั้งหมด เหมาะกับการ ทางานกบั จอภาพขนาดใหญ่ ซึง่ สามารถเลือกเปดิ ปิดพาเนลไดต้ ามท่ีตอ้ งการ โดยท่ัวไป ใช้ทางานบนหนา้ จอสองหนา้ จอขน้ึ ไป - Fluid Layout เป็น Workspace สาหรับออกแบบเวบ็ เพจท่ใี ชแ้ สดงบนอุปกรณ์ท่ีขนาด หน้าจอแตกตา่ งกนั - Mobile Application เป็น Workspace ท่เี หมาะสาหรบั การสร้างเว็บไซต์บนอุปกรณ์ มือถือหรือแท็บเลต็ ซ่ึงสามารถใช้งานรว่ มกับ PhoneGab เพื่อทดสอบการแสดงผลได้ ดว้ ย 7. ครใู ช้เทคนคิ วิธสี อนแบบสาธิต (Demonstration Method) สาธติ การเลือก Workspace ให้ เป็นตามรปู แบบต่างๆ ข้างต้นตามที่ต้องการ จากช่ือของ Workspace ท่ใี ช้อยใู่ นปจั จุบนั เชน่ Workspace แบบ Classic หากตอ้ งการเลือก Workspace เพอื่ เปลย่ี นแบบอนื่ ๆ สามารถทาไดโ้ ดย การเคลกิ ที่ปมุ่ ท่ีแสดงมุมบนขวามือของ Menu Bar ดังภาพ จากนน้ั จะปรากฏรายชอ่ื Workspace ต่างๆ ขึน้ มา ให้เลอื กคลกิ รปู แบบทต่ี ้องการ

89 การปรบั แตง่ และสร้าง Workspace การปรบั แต่ง Workspace นน้ั เพ่อื ใหส้ ามารถใช้งานได้ตรงจดุ ประสงคแ์ ละสะดวกมากขึ้นโดยเปดิ เฉพาะพาเนลทีต่ ้องการใช้งานไว้เท่านนั้ จากนั้นจึงนามาสร้างเปน็ Workspace ใหม่ได้ โดยมขี ้ันตอน ตา่ งๆ ดังนี้ 1). คลกิ ขวาท่ีพาเนลท่ีไม่ได้ใช้งาน แล้วเลือกคาส่งั Close หรือ Close Tab Group เพื่อปิด พาเนล 2). คลิกเมนู Window จากนั้นคลิกเลือกพาเนลท่ีตอ้ งการเพอ่ื เปดิ ขน้ึ มาใช้งาน

90 3). คลิกค้างทีพ่ าเนลทตี่ อ้ งการยา้ ย จากน้ันลากไปปล่อยในบรเิ วณที่ตอ้ งการได้ 4). คลิกทปี่ มุ่ Collaspe to Icons เพือ่ ยอ่ พาเนลใหเ้ ปน็ ไอคอนขนาดเลก็ 5). เมอื่ ปรบั แต่งพาเนลตา่ งๆ เสรจ็ แลว้ คลิกที่ช่ือพาเนลด้านบน จากน้ันเลอื กคาส่งั New Workspace

91 6). จะปรากฏหนา้ ตา่ งมาให้ตั้งชือ่ Workspace เม่อื ตง้ั ชอื่ แล้วใหก้ ด OK 7). จะปรากฏ Workspace ที่สร้างข้ึนมาให้เรยี กใช้งานไดท้ ุกเมอ่ื การรเี ซต Workspace ในกรณที ่ีไดท้ าการจัดตาแหน่งพาเนลต่างๆ ใน Workspace หนง่ึ ๆ แล้วไม่ต้องการสามารถรีเซต กลบั ไปใชก้ ารจัดเรยี งแบบดัง้ เดมิ ของ Workspace นั้นๆ ไดโ้ ดยการคลกิ ทช่ี ่ือ Workspace ด้านบน จากนนั้ เลือกที่ Reset ‘ชอื่ Worksapce’ (ในกรณีน้ีเปน็ Designer) การลบ Workspace ในกรณีท่ีไม่ได้ใชง้ าน Workspace ท่ไี ดส้ รา้ งไวแ้ ลว้ ต้องการท่จี ะลบออก สามารถทาได้โดยมี ข้นั ตอนดงั นี้

92 1). คลิกที่ชอื่ พาเนลดา้ นบน จากนน้ั เลือกท่ี Manage Workspaces 2). จะปรากฏหนา้ ตา่ งนี้ขึ้นมา ใหเ้ ลอื ก Workspace ทตี่ อ้ งการลบ จากน้ันให้กด Delete 3). จะปรากฏหนา้ ตา่ งมาให้ยืนยัน ในกรณีท่ีไมต่ ้องการลบให้กด No ในที่น้ตี อ้ งการลบให้กด Yes 4). จะเหน็ ไดว้ ่า My Workspace จะถกู ลบออก หลงั จากน้ันให้กด OK

93 8. ครสู าธติ ให้เห็นมุมมองการทางานใน Dreamweaver CS6 แบบต่างๆ ดงั นี้ 1). มุมมอง Design Design เป็นมมุ มองแสดงการทางานเสมือนจริง สามารถจัดการกับภาพ ข้อความ การเชือ่ มโยงได้ อยา่ งอสิ ระ 2).มมุ มอง Code Code เป็นมมุ มองทใ่ี ชใ้ นการทางานกับโคด้ โดยตรง ทง้ั HTML, CSS หรือสครปิ ต์อ่นื ๆ ทีเ่ ขียน เพิม่ เติมเขา้ ไป โดยเปน็ มุมมองท่เี หมาะกบั ผู้ที่มีความเขา้ ใจกบั โครงสร้างภาษาต่างๆ การแกไ้ ขโค้ด ในมมุ มองนี้ จะส่งผลไปถึงหน้าตาของเว็บเพจในมมุ มอง Design ดว้ ย 3). มมุ มอง Split Split เปน็ มมุ มองทแี่ ยกหนา้ ตา่ งเป็นสองส่วน ไดแ้ ก่ โค้ดและหนา้ เวบ็ เพจ เมื่อตอ้ งการปรับปรงุ โคด้ ในส่วนใดของเว็บเพจสามารถคลกิ ทสี่ ่วนน้ันๆ โปรแกรมจะแสดงโค้ดให้แก้ไขไดท้ นั ที

94 4). มมุ มอง Live Live เปน็ มมุ มองแสดงเว็บเพจเสมอื นจริงที่ใช้การตรวจสอบมลั ตมิ เี ดยี รวมถงึ การเชอ่ื มโยงต่างๆ ในเว็บเพจได้ทันทีโดยไม่จาเป็นต้องบนั ทึกออกมาทดสอบในเว็บเบราเซอร์ 5). มุมมอง Live Code Live เป็นมุมมองแสดงเว็บเพจเสมือนจรงิ ทีใ่ ช้การตรวจสอบมัลตมิ ีเดยี รวมถงึ การเชื่อมโยงต่างๆ ในเวบ็ เพจได้ทันทโี ดยไมจ่ าเป็นต้องบันทึกออกมาทดสอบในเว็บเบราเซอร์ Live Code เปน็ ส่วนการ แสดงผลรว่ มกับมุมมอง Live ซงึ่ จะเพม่ิ สว่ นการแสดงโค้ดข้ึนมา โดยใชต้ รวจสอบโค้ดในสว่ นตา่ งๆ ของ เวบ็ เพจได้ แต่ไม่สามารถแกไ้ ขได้ 6). มมุ มอง Inspect Inspect เป็นมุมมองท่ีมลี ักษณะคลา้ ยกับมุมมอง Live Code เพยี งแตส่ ามารถแกไ้ ขโค้ดได้ โดยการคลิกบนสว่ นตา่ งๆ ของเวบ็ เพจ จะปรากฏพาเนล CSS ขึ้นมาให้แก้ไขในสว่ นนัน้ ได้ทันที

95 7). มมุ มอง Multiscreen Multiscreen เป็นมุมมองการตรวจสอบเว็บเพจท่ีออกแบบเสร็จแล้วบนหนา้ จอขนาดต่างๆ เชน่ โทรศพั ท์มอื ถือ แทบ็ เลต็ หรือจอภาพขนาดตา่ งๆ วา่ เหมาะสมหรือไม่ การเลือกมุมมองการทางาน การเลอื กมมุ มองการทางานใน Dreamweaver CS6 นน้ั สามารถทาได้โดยการเลือกท่ปี ุ่ม ตา่ งๆ ตามมมุ มองการทางานทตี่ ้องการ ขนั้ สรปุ และการประยุกต์ 9.ครสู รุปโดยถามคาถามหรือกาหนดปญั หาโดยใหผ้ ู้เรยี นระดมสมองช่วยกนั คิดหาคาตอบแล้วอธบิ าย คาตอบ 10.ครใู ช้วธิ ีส่มุ ผู้เรียนทุกกลุ่มตอบคาถามและอธบิ ายให้เพื่อนฟังท้ังช้นั เรียน

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

97 4. กิจกรรมใบงาน เกณฑผ์ ่าน คือ 50% 5. แบบประเมินผลการเรียนรู้ และแบบฝกึ ปฏิบัติ มเี กณฑผ์ ่าน 50% 6 แบบประเมนิ คุณธรรม จรยิ ธรรม ค่านิยม และคุณลักษณะอันพงึ ประสงค์ คะแนน ขน้ึ อยกู่ ับการประเมินตามสภาพจรงิ กิจกรรมเสนอแนะ 1.ฝึกทกั ษะโดยทากจิ กรรมใบงาน แบบฝกึ ปฏิบัติ เพ่ือใหเ้ กิดความชานาญ 2.อา่ นทบทวนเนื้อหา

98 จงเลือกคาตอบทีถ่ ูกต้องท่ีสุดเพียงข้อเดยี ว 1. ถ้าคลิกปุ่ม (Site) แลว้ เลอื ก New Site… แสดงวา่ ตอ้ งการทาอะไร ก. เปดิ ไซตท์ ี่ไดส้ รา้ งไว้แล้ว ข. สรา้ งไซต์ใหม่ ค. แกไ้ ขไซต์ ง. ตกแต่งไซต์ 2. ถา้ คลกิ ปมุ่ (Site) แลว้ เลอื ก Manage Sites… แสดงว่าต้องการทาอะไร ก. เปดิ ไซด์ท่ีไดส้ รา้ งไว้แลว้ ข. สรา้ งไซดใ์ หม่ ค. แกไ้ ขไซต์ ง. ตกแตง่ ไซต์ 3. การสร้างเว็บเพจใหม่ด้วยคาสัง่ ใด ทีผ่ สู้ ร้างต้องการออกแบบเลย์เอาตท์ ุกอย่างด้วยตวั เอง ก. Blank Page ข. Blank Template ค. Page from Template ง. Page from Sample 4. การสรา้ งเว็บเพจใหม่ด้วยคาสั่งใด จะเปน็ การกาหนดรปู แบบของเว็บเพจท้ังสพี ้ืน รูปแบบตวั อักษร ตาราง รวมถึงลิงก์ตา่ งๆ ในรปู แบบของ CSS Style Sheet ก. Blank Page ข. Blank Template ค. Page from Template ง. Page from Sample 5. การบันทกึ เวบ็ เพจ ให้คลกิ ที่ File และเลอื กคาสั่งใด เม่ือตอ้ งการบันทึกเว็บเพจทีเ่ ปิดอยทู่ ้งั หมดพร้อม กัน ก. Save As ข. Save All ค. Save All Related Files ง. Save as Template 6. การกาหนดชือ่ ไฟล์ ในกรณีท่เี ปน็ หนา้ แรกของเว็บไซต์ควรตั้งชื่อวา่ อะไร ก. fi rst.html ข. home.html ค. web.html ง. index.html 7. Workspace ในโปรแกรม Adobe Dreamweaver คอื อะไร ก. รปู แบบการจดั วางพนื้ ท่ีในการทางาน ที่เลอื กใชไ้ ด้ว่า ตอ้ งการใหม้ ีพาเนลใดปรากฏข้ึนมา ให้ใชง้ านและจดั วางตาแหน่งอย่างไร ข. การเขียนคาสัง่ HTML ค. พนื้ ทีส่ าหรับกรอกข้อมูล ง. เป็นการตรวจสอบการแสดงผล การเชือ่ มโยงก่อนจะอัพโหลดไปใช้งาน

99 8. Designer/Designer Compact เป็น Workspace ลกั ษณะใด ก. เป็น Workspace ที่อานวยความสะดวกในการทางานร่วมกับเว็บไซต์ท่ีใหบ้ รกิ าร Web Hostingของ Adobe ข. เป็น Workspace แบบเก่า เหมาะสาหรับผูท้ ค่ี ุ้นเคยกับ Dreamweaver เวอร์ช่ันท่ตี า่ กวา่ เวอรช์ ่นั MX2004 ลงไป ซ่ึงหนา้ ตาการใชง้ านจะไม่ซับซ้อน ค. เป็น Workspace สาหรบั นกั ออกแบบเว็บโดยเฉพาะ ซึ่งมเี ครื่องมือเฉพาะทางท่ีครอบคลมุ การทางานอย่างครบถ้วน ง. เป็น Workspace ท่เี หมาะสาหรับการสร้างเว็บไซต์บนอุปกรณ์มือถือหรอื แท็บเล็ท ซึง่ สามารถ ใชง้ านรว่ มกบั PhoneGab เพอ่ื ทดสอบการแสดงผลได้ดว้ ย 9. จากหน้าจอน้แี สดงว่าผู้ใช้ ใชค้ าสั่งใด ก. OK ข. Rename ค. Delete ง. Close 10. ข้อใดเปน็ มุมมองแสดงการทางานเสมือนจรงิ สามารถจัดการกับภาพ ข้อความ การเช่ือมโยงได้อยา่ ง อิสระ ก. มมุ มอง Split ข. มมุ มอง Design ค. มุมมอง Live Code ง. มุมมอง Multiscreen