ทดสอบ01

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยดว้ ย Dreamweaver ก

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

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยดว้ ย Dreamweaver ค สารบัญ หน้าคาํ นาํ กสารบญั ขสารบญั ภาพ คคาํ ชแ้ี จงสาํ หรบั ครู จคําช้แี จงสําหรบั นกั เรียน ฉสาระสาํ คญั ผลการเรยี นรู้ จุดประสงค์การเรียนรู้ 1แบบทดสอบกอ่ นเรยี น เรอื่ งสรา้ งเว็บเพจเบื้องต้น 2กระดาษคําตอบแบบทดสอบก่อนเรยี น เล่มท่ี 1 4ใบความร้ทู ่ี 1 เร่ือง เรมิ่ ต้นสร้างเว็บไซต์ 5แบบฝึกหดั ท่ี 1 เร่ิมต้นสร้างเวบ็ ไซต์ 11ใบงานท่ี 1 เรมิ่ ต้นสรา้ งเวบ็ ไซต์ 12ใบความรู้ที่ 2 เรื่อง คณุ สมบัติพื้นฐานหนา้ เวบ็ เพจ 13ใบงานท่ี 2 คณุ สมบตั ิพืน้ ฐานหน้าเวบ็ เพจ 21ใบความร้ทู ่ี 3 เน้ือหาหนา้ เว็บเพจ 22แบบฝึกหดั ที่ 2 เนื้อหาหน้าเว็บเพจ 27แบบทดสอบหลังเรยี น เรื่องสรา้ งเว็บเพจเบ้อื งต้น 29กระดาษคําตอบแบบทดสอบหลังเรยี น เลม่ ท่ี 1 31บรรณานกุ รม 32ภาคผนวก 33 34 เฉลยแบบทดสอบ ก่อน – หลงั เรยี น เลม่ ที่ 1 35 เฉลยแบบฝกึ หัดท่ี 1 36 เกณฑ์การให้คะแนนการทําใบงานท่ี 1 37 เกณฑ์การให้คะแนนการทาํ ใบงานที่ 2 38 เฉลยแบบฝกึ หัดท่ี 2 40 แบบบนั ทึกคะแนน เอกสารประกอบการเรียน เลม่ ท่ี 1

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยดว้ ย Dreamweaver ง สารบญั ภาพ หนา้ 6รูปท่ี 1.1 แสดงการใชค้ าํ ส่ัง site -> Manage Sites… 6รปู ท่ี 1.2 แสดงหน้าตา่ ง Manage Sites 7รปู ที่ 1.3 แสดงการกาํ หนดรายละเอยี ดของเวบ็ ไซต์ 7รูปที่ 1.4 แสดงผลจากการกําหนดไซต์ 8รูปที่ 1.5 การสร้างโฟลเดอร์ 8รปู ที่ 1.6 แสดงรายการโฟลเดอรใ์ น พาเนล file 8รปู ที่ 1.7 แสดงการสร้างโฟลเดอร์ ในพาเนล file 9รูปท่ี 1.8 แสดงการสรา้ งไฟล์ใหม่ ในพาเนล file 9รูปท่ี 1.9 แสดงการสร้างไฟล์ใหม่ ดว้ ยคาํ สั่ง Ctrl + n 10รูปท่ี 1.10 แสดงการบันทกึ หนา้ เว็บเพจ 10รูปท่ี 1.11 แสดงจุดสงั เกตหากไฟลง์ านยงั ไม่ถูกบันทึก 13รูปท่ี 1.12 แสดงขนั้ ตอนการเปดิ ไฟล์เวบ็ เพจ 13รูปที่ 1.13 แสดงข้ันตอนการเปดิ ไฟลเ์ วบ็ เพจท่ีพาเนล File 14รูปที่ 1.14 แสดงการใชค้ ําสั่ง Page Properties 15รูปที่ 1.15 แสดงภาพการตัง้ คา่ ในหมวด Appearance(CSS) 15รปู ท่ี 1.16 แสดงภาพการตั้งค่าในหมวด Appearance(HTML) 15รปู ท่ี 1.17 แสดงภาพการตัง้ คา่ ในหมวด Links (CSS) 16รปู ที่ 1.18 แสดงภาพการตงั้ คา่ ในหมวด Headings(CSS) 16รปู ที่ 1.19 แสดงภาพการต้ังค่าในหมวด Tiltle/Encoding 16รูปท่ี 1.20 แสดงภาพการตง้ั ค่าในหมวด Tracing Image 16รูปที่ 1.21 แสดงภาพ พาเพล properties 17รปู ที่ 1.22 แสดงการตง้ั คา่ Title/Encoding 18รูปท่ี 1.23 แสดงการตง้ั คา่ Appearance(CSS) 19รูปที่ 1.24 แสดงขน้ั ตอนการต้ังคา่ Headings (CSS) 20รปู ที่ 1.25 แสดงเมนูแสดงผลบนบราวเซอร์ 22รปู ที่ 1.26 แสดงขนั้ ตอนการพิมพ์ข้อความลงบนหนา้ เวบ็ เพจ

เอกสารประกอบการเรยี น เรื่อง เวบ็ สวยด้วย Dreamweaver จ สารบัญภาพ(ตอ่ ) หน้า 22รปู ที่ 1.27 แสดงขน้ั ตอนการเว้นวรรคข้อความ 23รูปที่ 1.28 แสดงผลเปรียบเทียบการข้นึ บรรทดั ใหม่ ด้วยการกดปมุ่ <Shift> + <Enter> 25รูปท่ี 1.29 แสดงขนั้ ตอนการแทรกรูปภาพ 26รูปที่ 1.30 แสดงข้อความเตือนใหบ้ ันทึกรปู ภาพในโฟลเดอรท์ ่เี กบ็ เว็บไซต์ 26รูปท่ี 1.31 แสดงการต้ังค่า Alternate text 26รูปท่ี 1.32 แสดงผลการตั้งค่า Alternate text

เอกสารประกอบการเรยี น เร่ือง เว็บสวยด้วย Dreamweaver ฉ คาชแี้ จงสาหรับครู เอกสารประกอบการเรียน เรื่อง เว็บสวยด้วย Dreamweaver เล่มที่ 1 “สร้างเว็บเพจเบ้ืองต้น” เล่มน้ีใช้ประกอบการจัดกิจกรรมการเรียนการสอน ในรายวิชาเพ่ิมเติม ง20210สร้างเว็บไซต์ด้วยโปรแกรมสําเร็จรูป นักเรียนชั้นมัธยมศึกษาปีท่ี 3 โรงเรียนสาธุกิจประชาสรรค์รชั มงั คลาภเิ ษก มขี ั้นตอนในการจดั กิจกรรมการเรยี นการสอน ดงั น้ี 1. แจกเอกสารประกอบการเรยี น เรือ่ ง เว็บสวยด้วย Dreamweaver เล่มที่ 1“สรา้ งเว็บเพจเบ้ืองต้น” ให้แก่นกั เรยี น 2. ช้ีแจงการใชเ้ อกสารประกอบการเรียนให้นักเรยี นทราบกอ่ นลงมือปฏิบตั ิ 3. ครใู หน้ กั เรียนทําแบบทดสอบก่อนเรยี น เพ่ือวดั ความรู้พ้ืนฐานของนักเรยี น 4. ครใู ห้นกั เรยี นศกึ ษาเอกสารประกอบการเรียน เล่มท่ี 1 “สรา้ งเวบ็ เพจเบื้องต้น”ปฏบิ ตั ิตามใบความรู้ ใบงาน และแบบฝึกหดั ตามลาํ ดบั 5. ครใู หน้ ักเรยี นทําแบบทดสอบหลงั เรียน เพื่อประเมนิ ผลวา่ นกั เรยี นมีความรู้ความเขา้ ใจมากขึ้นเพยี งใด 6. ครสู งั เกตพฤตกิ รรมคุณลกั ษณะทพ่ี ึงประสงค์ และบนั ทึกผล 7. ครูตรวจและบันทกึ ผลการทาํ งานของนักเรยี นลงในแบบเก็บคะแนน 8. ครูแจง้ คะแนนใหน้ ักเรียนทราบ ให้คําแนะนาํ เพม่ิ เติม และรับฟังขอ้ เสนอแนะจากนกั เรยี น 9. คะแนนจากการทาํ แบบฝึกหดั และใบงานสามารถนําไปประเมินเพ่ือเป็นคะแนนวัดผลระหวา่ งเรยี น (E1)

เอกสารประกอบการเรียน เรื่อง เว็บสวยดว้ ย Dreamweaver ช คาชี้แจงสาหรับนักเรียน เอกสารประกอบการเรียน เรื่อง เว็บสวยด้วย Dreamweaver เล่มที่ 1 “สร้างเว็บเพจเบ้ืองต้น” เล่มนี้ใช้ประกอบการจัดกิจกรรมการเรียนการสอน ในรายวิชาเพ่ิมเติม ง20210การสร้างเว็บไซต์ด้วยโปรแกรมสําเร็จรูป นักเรียนชั้นมัธยมศึกษาปีที่ 3 โรงเรียนสาธุกิจประชาสรรค์ รัชมงั คลาภิเษก ใหน้ ักเรียนเรียนรู้ด้วยตนเอง มีกิจกรรมให้นักเรียนปฏิบัติ มีคําอธิบายตามขน้ั ตอน ดังน้ี 1. อา่ นและทําความเข้าใจคําช้แี จงในการใชเ้ อกสารประกอบการเรียน 2. ศกึ ษาผลการเรียนรแู้ ละจุดประสงค์ เพ่อื ให้ทราบว่าเมื่อจบบทเรียนแลว้ นักเรียนสามารถเรยี นรู้อะไรบ้าง 3. ทําแบบทดสอบกอ่ นเรยี น แล้วตรวจคําตอบที่เฉลยไว้ เพ่ือใหร้ วู้ า่ นักเรียนมีความรู้พนื้ ฐานเกย่ี วกบั เรื่องทีจ่ ะศึกษามากน้อยเพียงใด 4. ศกึ ษาเอกสารประกอบการเรียน เล่มท่ี 1 เร่อื ง “สร้างเว็บเพจเบือ้ งต้น” ปฏิบตั ติ ามใบความรู้ ใบงานและแบบฝึกหดั ตงั้ แตห่ นา้ แรกจนถงึ หน้าสุดทา้ ย 5. ส่งผลการทาํ กิจกรรมการเรียนร้เู พ่ือให้ครตู รวจและบนั ทึกผล 6. เม่อื ทําแบบฝึกหัดเรียบร้อยแลว้ ให้เกบ็ อุปกรณใ์ ห้อยู่ในสภาพเรียบรอ้ ย 7. เมื่อนกั เรียนปฏิบตั ิกิจกรรมการเรยี นรคู้ รบทกุ ใบความรู้แล้ว ใหน้ กั เรียนทําแบบทดสอบหลงั เรยี นเพ่ือประเมินผลการเรยี นรู้ 8. นกั เรยี นต้องมีสมาธิและความซ่อื สัตย์ต่อตนเอง ไม่ขา้ มขนั้ ตอน และไม่เปิดดเู ฉลยก่อนเรยี น – หลังเรยี น มิฉะน้ันผลงานทไ่ี ด้รบั จะไม่สมบูรณ์ ไมผ่ า่ นตามเกณฑ์การประเมิน 9. นักเรียนรับฟงั ผลการทําแบบทดสอบ และข้อเสนอแนะจากครู 10. ถ้านกั เรียนและผสู้ นใจต้องการเน้ือหาเพ่ิมเตมิ จากเอกสารประกอบการสอนสามารถค้นคว้าได้จากเอกสารอา้ งอิงในบรรณานุกรม

เอกสารประกอบการเรียน เร่ือง เว็บสวยดว้ ย Dreamweaver 1 การสร้างเว็บเพจเบอ้ื งตน้สาระสาคญั ในบทน้เี ราจะเร่มิ ใชโ้ ปรแกรม Dreamweaver สร้างหนา้ เวบ็ โดยการสรา้ งเว็บไซตก์ ่อนซ่ึงสําคญั มาก เพราะการสรา้ งเวบ็ ไซต์เป็นการตั้งโฟลเดอร์ท่ีใช้เกบ็ ทกุ ส่วนประกอบบนหน้าเวบ็ เอาไวแ้ ละใชต้ าํ แหนง่ อ้างอิงเพื่อเชือ่ มโยงเวบ็ เพจแตล่ ะหน้าเข้าไวด้ ว้ ยกนั ดงั นัน้ การสร้างหน้าเว็บแตไ่ ม่สรา้ งเวบ็ ไซต์ หรอื สรา้ งหนา้ เวบ็ นอกเวบ็ ไซต์ จะทาํ ให้การอ้างองิ ตาํ แหนง่ เชอื่ มโยงเป็นไปอยา่ งไม่ถกู ตอ้ ง มีผลทําให้หน้าเวบ็ ที่เชอ่ื มโยงหาไม่พบ หรือเรยี กอาการน้ีวา่ ลิงค์หลุด (Broken link) ทําให้เราตอ้ งแก้ไขตําแหนง่ เช่อื มโยงใหมท่ ง้ั หมดในภายหลงั ซ่งึ เป็นเรือ่ งยุ่งยากมากผลการเรยี นรู้ มีความรคู้ วามเข้าใจเกยี่ วกับขั้นตอนการสรา้ งเว็บเพจ และสามารถสรา้ งงานเวบ็ เพจเบ้ืองต้นโดยมคี วามใฝ่เรียนรู้ และมุง่ ม่ันในการทาํ งานจดุ ประสงคก์ ารเรยี นรู้ นักเรียนสามารถ 1. บอกขนั้ ตอนการสร้างและบนั ทึกหน้าเวบ็ เพจได้ 2. สรา้ งโฟลเดอรแ์ ละหน้าเว็บเพจใหม่พร้อมท้งั บนั ทึกหน้าเว็บเพจท่ีทําเสร็จเรียบร้อยได้ 3. กําหนดคณุ สมบตั พิ ื้นฐานของหนา้ เว็บเพจได้อยา่ งถกู ต้องและเหมาะสม 4. บอกวธิ กี ารเพิ่มเนื้อหาในหน้าเว็บเพจได้

เอกสารประกอบการเรียน เร่ือง เว็บสวยด้วย Dreamweaver 2คาชแ้ี จง แบบทดสอบกอ่ นเรยี น เรอ่ื ง สรา้ งเว็บเพจเบื้องต้นคาสง่ั แบบทดสอบฉบบั น้เี ปน็ แบบปรนยั เลือกตอบ 4 ตวั เลือก จํานวน 10 ขอ้ ข้อละ 1 คะแนน รวม 10 คะแนน ให้นกั เรียนเลือกคําตอบท่ีถกู ต้องทสี่ ดุ แลว้ ทาํ เคร่ืองหมายกากบาท (X) ลงใน กระดาษคาํ ตอบ1. การเริ่มตน้ สรา้ งเว็บไซต์ ข้อใดเปน็ สิ่งทค่ี วรกระทําเป็นอันดับแรกก. การออกแบบหน้าเว็บเพจข. การเลือกโปรแกรมสําหรบั สรา้ งเว็บไซต์ค. การกาํ หนดโครงสร้างโฟลเดอรข์ องเว็บไซต์ง. การต้งั ค่าให้โปรแกรม Dreamweaver สามารถใช้ภาษาไทยได้2. หน้าเว็บเพจแรกหรือหน้าหลกั (โฮมเพจ) ควรต้งั ช่อื ไฟลว์ า่ อยา่ งไรก. main.html ข. index.htmlค. page1.html ง. homepage.html3. การสรา้ ง ไซต์ (Site) คือก. การต้งั ชื่อไฟลใ์ หม่ให้กับเว็บเพจข. การสร้างและออกแบบหนา้ เวบ็ เพจใหม่ค. การกําหนดคณุ สมบตั พิ น้ื ฐานของหนา้ เว็บเพจง. การกําหนดใหโ้ ปรแกรมร้จู ักโฟลเดอร์สําหรับจัดเก็บเวบ็ ไซต์4. การสร้างไซต์ใน Dreamweaver มีขน้ั ตอนอย่างไรก. เลือกเมนู File ->New Site… และกําหนดคา่ข. เลอื กเมนู File -> Open Site… จากน้ันเลอื กไฟล์เว็บไซตท์ ตี่ ้องการสร้างค. เลอื กเมนู Site -> Manage Sites… จากน้นั คลิกปุ่ม New site และกาํ หนดค่าง. เลอื กเมนู Modify -> Page Properties… เลอื กหัวขอ้ Site และกาํ หนดคา่

เอกสารประกอบการเรยี น เร่ือง เว็บสวยดว้ ย Dreamweaver 35. หากไฟลท์ ่ใี ช้งานอยยู่ ังไม่ถกู บนั ทึก โปรแกรม Dreamweaver จะแสดงเครอื่ งหมายใด ตอ่ ทา้ ยช่อื ไฟล์นั้นเพอื่ เปน็ การเตือน ก. * ข. ! ค. ? ง #6. ขอ้ ใดเปน็ การตัง้ ชอื่ ไฟลท์ ีถ่ ูกตอ้ ง ข. Page-1.html ง. Food&Page.html ก. @hotmail.html ค. number_1.html7. ปัจจบุ ันการกาํ หนดรูปแบบ(Encoding) ภาษาไทยบนเว็บไซต์ มี 2 รปู แบบ คือ ก. Thai (Windows) และ PostScript ข. Thai(Windows) และ Unicode(UTF-8) ค. PostScript และ Unicode(UTF-8) ง. PostScript และ Thai Text8. ปมุ่ ใด ใช้สําหรับดกู ารแสดงผลหนา้ เว็บเพจบนบราวเซอร์ก. <F9> ข. <F10>ค. <F11> ง <F12>9. หากตอ้ งการข้ึนบรรทัดใหม่ โดยให้ระยะห่างระหวา่ งบรรทดั เท่าเดิม ควรกดปุม่ ใดก. <Enter> ข. <Shift> + <Enter>ค. <Ctrl> + <Enter> ง. <Alt> + <Enter>10. Alternate Text คอื การกําหนดค่าใด ก. การกําหนดข้อความแทนภาพ ข. การกําหนดข้อความเสียง ค. การกาํ หนดข้อความบรรยายใต้ภาพ ง. การกาํ หนดข้อความปรากฏเวลาเมาสอ์ ยู่เหนอื ภาพ

เอกสารประกอบการเรยี น เรื่อง เว็บสวยดว้ ย Dreamweaver 4 กระดาษคาตอบแบบทดสอบกอ่ นเรยี น เล่มที่ 1 เรือ่ ง สรา้ งเว็บเพจเบ้อื งต้น ชอ่ื .....................................................................ชนั้ .....................เลขที่……….……. ให้นกั เรยี นเลือกคาํ ตอบท่ีถูกต้องทสี่ ดุ แลว้ ทําเคร่อื งหมายกากบาท (X) ลงในกระดาษคาํ ตอบ ขอ้ ก ข ค ง 1 2 3 4 5 6 7 8 9 10คะแนนสอบก่อนเรียนเตม็ 10 คะแนน คะแนนทไ่ี ด้ คือ ..................คะแนน

เอกสารประกอบการเรียน เรื่อง เว็บสวยดว้ ย Dreamweaver 5 ใบความร้ทู ี่ 1 เรมิ่ ตน้ สรา้ งเวบ็ ไซต์ อันดับแรกในการสรา้ งเวบ็ ดว้ ยโปรแกรม Dreamweaver เราจะตอ้ งเตรียมโฟลเดอร์ทจ่ี ะใช้เกบ็ สว่ นประกอบทั้งหมดในเว็บไซตข์ องเรา ไมว่ ่าจะเปน็ ไฟลห์ นา้ เวบ็ เพจ ไฟลร์ ูปภาพ ไฟล์มลั ตมิ ีเดยีหรืออืน่ ๆ โดยโครงสรา้ งโฟลเดอร์ของเว็บไซต์ทเ่ี หมาะสมควรจะเป็นดังนี้  สรา้ งโฟลเดอร์หลกั ขนึ้ มา โดยไฟลห์ น้าเว็บเพจทัง้ หมดจะเกบ็ ไว้ในโฟลเดอรห์ ลักน้ี  ภายในประกอบดว้ ยโฟลเดอรย์ อ่ ย ชือ่ images ใช้เก็บรปู ภาพที่ใชใ้ นการสรา้ งเวบ็ ไซตท์ ้ังหมด ซึ่งก็คอื รูปท่ตี ัดมาจากโปรแกรม Photoshop นั่นเอง (เราอาจจะต้องไปก็อปปม้ี าไวใ้ นโฟลเดอรน์ ้)ี  โฟลเดอรย์ อ่ ยอ่ืนๆ ถา้ ในเวบ็ ไซตข์ องเรามีการเขยี นโปรแกรมข้ึนมาใชง้ าน กจ็ ะมีโฟลเดอร์ท่ีชือ่ Scripts ถา้ จะใช้ไฟล์เสียง ไฟล์วิดโี อ หรอื ภาพเคล่อื นไหวท่ีสร้างด้วยโปรแกรม Flashเราก็อาจจะสร้างโฟลเดอร์ใหม่ช่อื ว่า Multimedia เป็นต้น ตวั อยา่ งท่ี 1 โครงสรา้ งเวบ็ ไซต์แบบงา่ ย ตวั อย่างท่ี 2 โครงสร้างเว็บไซต์แบบทีซ่ ับซ้อนขึ้นโฟลเดอร์หลกั (root) ของเวบ็ ไซต์ โฟลเดอรห์ ลัก (root) ของเว็บไซต์ Images (โฟลเดอรเ์ กบ็ รูปภาพ) Index.html (ไฟลโ์ ฮมเพจ) food (โฟลเดอร์งานเกยี่ วกบั อาหาร) Album.html (ไฟล์เพจอลั บม้ั ภาพ) images (โฟลเดอรเ์ กบ็ รปู ภาพอาหาร) Food.html (ไฟลเ์ พจอาหาร) flag (โฟลเดอรเ์ กย่ี วกับธงชาติ) images (โฟลเดอรเ์ กบ็ รปู ภาพธงชาติ) sounds (โฟลเดอรเ์ กบ็ ไฟลเ์ สยี ง) Index.html (ไฟลโ์ ฮมเพจ) Food.html (ไฟลเ์ พจอาหาร)

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 6  ในการต้ังชอ่ื ไฟล์หรอื โฟลเดอร์ทกุ คร้งั ควรตั้งชื่อเปน็ ภาษาอังกฤษ ให้สอ่ื ความหมาย ถึงขอ้ มูลในเว็บเพจนน้ั และไฟลโ์ ฮมเพจ  ไฟล์หน้าโฮมเพจหลกั ตอ้ งตัง้ ชื่อว่า index.html และจะต้องอยใู่ นโฟลเดอร์หลกั เท่านน้ั การสรา้ งไซต์ (Site) การสร้าง Site กค็ ือ การทาํ ใหโ้ ปรแกรม Dreamweaver รูจ้ กั และเขา้ ใจวา่ โฟลเดอร์ใดบา้ งท่ีเตรียมไวส้ ําหรับสรา้ งเว็บไซต์ สามารถสรา้ ง และกําหนดรปู แบบได้ ดงั น้ีขน้ั ตอน การกาหนดค่าต่างๆ ท่ีใช้ในการสรา้ งเว็บไซต์ใหม่ 1.1 เลือกเมนู Site -> Manage Sites… เพื่อสรา้ งเวบ็ ไซตข์ องเรา รูปที่ 1.1 แสดงการใช้คาส่ัง site -> Manage Sites… 1.2 คลกิ ปุ่ม New Site เพ่อื กําหนดโฟลเดอร์ ทเี่ กบ็ เว็บไซต์ของเรา รปู ท่ี 1.2 แสดงหน้าตา่ ง Manage Sites

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยดว้ ย Dreamweaver 7 1.3 กาํ หนดรายละเอียดของเวบ็ ไซต์ทจี่ ะสรา้ ง ดังน้ี Site Name กาํ หนดชอื่ เวบ็ ไซต์ของเรา (ในทนี่ ก้ี ําหนดชื่อเป็น Asean) Local Site Folder คลกิ ท่ี เพื่อกาํ หนดโฟลเดอร์ที่เก็บไฟล์เวบ็ เพจ หรือไฟล์ต่างๆ ที่ใช้ประกอบเวบ็ เพจแต่ละหน้า ในเวบ็ ไซต์ของเรา (ในท่ีนเ้ี ลือกโฟลเดอร์ Asean ท่ีสรา้ งไว้ในไดรฟ์ D:สําหรบั เก็บไฟล์ต่างๆ ) 1.4 คลิกปมุ่ Save กาหนดช่อื ให้กับเวบ็ ไซตข์ องเรา เลือกโฟลเดอรท์ จี่ ะเกบ็ เว็บไซต์ คลกิ ปมุ่ Saveรูปท่ี 1.3 แสดงการกาหนดรายละเอยี ดของเวบ็ ไซต์1.5 แสดงชอื่ เว็บไซต์ที่เราสรา้ งข้ึน1.6 คลิกปุ่ม Done เพอื่ ปิดหนา้ ต่าง Manage Siteแสดงช่อื เวบ็ ไซตท์ ี่เราสร้าง โปรแกรมจะแสดงช่ือเวบ็ และโฟลเดอร์ ข้นึ คลิกปุ่ม Done รปู ท่ี 1.4 แสดงผลจากการกาหนดไซต์

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยด้วย Dreamweaver 8 การจดั การโครงสร้างไฟล์ /โฟลเดอร์ การสรา้ งโฟลเดอรส์ ําหรบั เก็บข้อมลู ของเว็บไซต์ มอี ยู่ 2 รูปแบบ ด้วยกนั ดังนี้รปู แบบท่ี 1 สร้างโฟลเดอรใ์ นไดร์ฟทต่ี อ้ งการ (ในที่น้ี ใหส้ ร้างไวท้ ไี่ ดรฟ์ D: ) แลว้ จงึ สร้าง Site รูปที่ 1.5 การสรา้ งโฟลเดอร์คลิ้กขวาเลอื ก New --->Folderแสดงตาแหนง่ โฟลเดอรห์ ลกั และ ปุ่ม รีเฟรชเมือ่ มีการ รายการโฟลเดอรย์ อ่ ย เปลี่ยนแปลงโฟลเดอร์ รปู ท่ี 1.6 แสดงรายการโฟลเดอร์ใน พาเนล file สารปู แบบที่ 2 สรา้ งโฟลเดอรใ์ หม่ใน พาเนล file โดยการคลิกเมาส์ปุม่ ขวาท่ีโฟลเดอร์ site แล้วเลอื ก New Folder ตงั้ ชื่อ รูปท่ี 1.7 แสดงการสร้างโฟลเดอร์ ในพาเนล file

เอกสารประกอบการเรียน เรื่อง เว็บสวยด้วย Dreamweaver 9การสร้างเว็บเพจใหม่ หลังจากที่เราสร้างไซตเ์ รียบรอ้ ยแลว้ ในข้ันตอ่ ไปคือ การสร้าง เว็บเพจ ซึ่งสามารถสร้างได้หลายรปู แบบรปู แบบท่ี 1 สร้างไฟลใ์ หมใ่ น พาเนล file โดยการคลิกเมาส์ปุ่มขวาท่ีโฟลเดอร์ site แลว้ เลือก New File คลกิ ขวา ตง้ั ช่อื ดบั เบล้ิ คลกิ ทไ่ี ฟลท์ ส่ี ร้าง รูปที่ 1.8 แสดงการสรา้ งไฟล์ใหม่ ในพาเนล file ถ้าตอ้ งการแกไ้ ขชอ่ื โฟลเดอรห์ รอื ไฟล์ ให้คลิกทีช่ อ่ื เดมิ แลว้ กดปมุ่ < F2 > ถา้ ต้องการลบโฟลเดอร์หรือไฟล์ ให้คลกิ ทโ่ี ฟลเดอรห์ รือไฟล์แลว้ กดปุ่ม < Delete >รปู แบบที่ 2 1. กดปุ่ม <Ctrl> + <n> หรอื เลอื กเมนู File -> New 2. เลือก Blank Page 3. เลือก Create เลือก Blank Page รปู ท่ี 1.9 แสดงการสร้างไฟลใ์ หม่ ด้วยคาสง่ั Ctrl + n  คลกิ Create

เอกสารประกอบการเรียน เร่ือง เว็บสวยด้วย Dreamweaver 10 การบนั ทึกเวบ็ เพจ หลังจากที่สรา้ งหรือแกไ้ ขเวบ็ เพจแลว้ สามารถบนั ทึกเวบ็ เพจนั้นได้โดยมขี น้ั ตอนดังนี้1. กดปุ่ม <Ctrl> + <s> หรอื เลือกเมนู File -> Save คลิกเมนู File  เลือกโฟลเดอรห์ ลัก2. เลือกโฟลเดอรห์ ลัก  ต้ังช่อื ไฟล์  คลิกปมุ่ Save3. ตัง้ ชอ่ื ไฟลท์ ต่ี ้องการ4. คลิกป่มุ Save รปู ที่ 1.10 แสดงการบนั ทกึ หน้าเว็บเพจ ไฟลท์ ใี่ ชง้ านอย่หู ากยงั ไม่ถกู บันทกึ จะปรากฏ เครื่องหมาย * ต่อท้ายชื่อยังไมบ่ นั ทกึ บนั ทกึ แลว้ รปู ที่ 1.11 แสดงจดุ สงั เกตหากไฟลง์ านยังไมถ่ ูกบนั ทกึ ช่ือไฟล์ควรเป็นภาษาอังกฤษพมิ พเ์ ลก็ ทงั้ หมด และไม่ควรมีอักขระพเิ ศษ (* & $ @ %) ชื่อไฟล์ไมค่ วรเวน้ ชอ่ งวา่ ง หากต้องการเว้นวรรคควรใช้เคร่ืองหมาย _ (under-score) เช่น test_1 เป็นต้น

เอกสารประกอบการเรยี น เร่ือง เว็บสวยดว้ ย Dreamweaver 11ช่อื .......................................................ชนั้ ..................เลขที่…………. แบบฝึกหดั ที่ 1 เรมิ่ ตน้ สรา้ งเวบ็ ไซต์จ : นกั เรียนสามารถบอกข้ันตอนการสร้างและบันทกึ หนา้ เว็บเพจได้คาชแ้ี จง พิจารณาสถานการณต์ อ่ ไปน้ี แลว้ ใสเ่ ครือ่ งหมาย หนา้ ขอ้ ทถี่ ูก และใสเ่ ครอ่ื งหมาย  หน้าขอ้ ทีผ่ ดิ (ข้อละ 1 คะแนน) 1. สมภพ เรม่ิ ตน้ สร้างเว็บไซตด์ ้วยการสร้างโฟลเดอร์สําหรับเก็บเวบ็ ไซต์ก่อน 2. หนูนา สร้างโฟลเดอร์ ช่ือว่า อื่นๆ ไว้สําหรับเกบ็ ไฟล์เสียงและไฟลว์ ิดีโอ 3. สมศรี เกบ็ เว็บเพจทงั้ หมดไว้ในโฟลเดอรห์ ลัก 4. กนก สร้างไซต์ เพื่อให้โปรแกรม Dreamweaver รจู้ ักว่าโฟลเดอรใ์ ดบา้ ง ที่เตรียมไว้สําหรับสร้างเว็บไซต์ 5. กมล เร่มิ ต้นสร้างไซต์ดว้ ยการคลกิ ท่ีเมนู File -> Site 6. สงกรานต์ สร้างไฟล์ใหม่ ในพาเนล file โดยการคลิกเมาสป์ มุ่ ขวาที่ โฟลเดอร์ site แลว้ เลอื ก New File 7. ละออง ต้ังชอ่ื ไฟลส์ ําหรับเวบ็ เพจท่เี ป็นหน้าแรก(โฮมเพจ)ว่า Homepege.html 8. สมร ต้งั ช่ือ ไฟล์ วา่ page*1 page*2 และ page*3 เพ่ือใหง้ ่ายตอ่ การจดจํา 9. น้อย บนั ทกึ เว็บเพจด้วยการกดปุม่ <Ctrl> + <s> 10. มุก สงั เกตว่า เว็บเพจท่ีแกไ้ ขยังไมไ่ ดบ้ ันทกึ เพราะมีสัญลักษณ์ @ อยดู่ ้านหลังชอ่ืคะแนนเต็ม 10 คะแนน คะแนนที่ได้ คือ ............................คะแนน

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยดว้ ย Dreamweaver 12ชอ่ื .......................................................ชั้น..................เลขท่ี…………. ใบงานท่ี 1 เรม่ิ ตน้ สรา้ งเวบ็ ไซต์นกั เรยี นสามารถสรา้ งโฟลเดอร์และหนา้ เว็บเพจใหมพ่ ร้อมทัง้ บนั ทกึหนา้ เว็บเพจทที่ าเสร็จเรียบร้อยได้ คาชแ้ี จง ให้นกั เรียนปฏบิ ัตติ ามหวั ขอ้ ตอ่ ไปน้ี โดยใช้เวลาในการปฏบิ ัตงิ านทง้ั หมด เปน็ เวลา 20 นาที1. ออกแบบโครงร่างของเว็บไซต์ท่ีนักเรียนสนใจ และดําเนินการเตรียมโฟลเดอร์ ดังข้ันตอน ตอ่ ไปน้ี 1.1 สืบคน้ ข้อมลู ในเวบ็ ไซต์เพอื่ หาข้อมลู มาออกแบบโครงร่างของเวบ็ ไซต์ 1.2 สรา้ งโฟลเดอรห์ ลัก และกําหนดชื่อให้กับโฟลเดอร์ทีใ่ ช้เก็บเวบ็ ไซต์ 1.3 สรา้ งโฟลเดอร์ยอ่ ยใหก้ บั เว็บไซตไ์ มน่ ้อยกว่า 3 โฟลเดอร์2. ดําเนนิ การสรา้ งไซต์ (site) ใหม่ และกาํ หนดรายละเอียดของเว็บไซต์3. สร้างเว็บเพจใหม่ข้นึ มาตามจาํ นวนหนา้ ท่อี อกแบบโครงร่างไว้ โดยใหน้ ักเรียนบนั ทกึ เว็บเพจใหม่ ตามหลักการบนั ทกึ และต้ังชื่อเวบ็ เพจ บันทกึ คะแนน หัวขอ้ คะแนนเตม็ คะแนนทไี่ ด้ รอ้ ยละการกาหนดโครงรา่ งของเวบ็ ไซต์ 3การสร้างไซต์ 3การสรา้ ง และบนั ทึกหนา้ เว็บเพจใหม่ 3 9 รวม

เอกสารประกอบการเรียน เรื่อง เว็บสวยด้วย Dreamweaver 13 ใบความรู้ที่ 2 คณุ สมบตั พิ ้นื ฐานหนา้ เวบ็ เพจการเปิดเว็บเพจขึ้นมาทาํ งานสามารถทําได้ ดังนี้รปู แบบท่ี 1 1. กดปุ่ม <Ctrl> + <O> หรือ คลิกที่เมนู File -> Open 2. เลือกโฟลเดอร์ที่เกบ็ ไฟล์  เลือกโฟลเดอร์ 3. เลอื กไฟล์ที่ตอ้ งการเปิด 4. คลกิ ปุ่ม Open  คลกิ เเมลนอื ูกFโiฟleล-เ>ดOอรp์หeลnัก..  เลอื กไฟล์  คลกิ ปุ่ม Open รูปท่ี 1.12 แสดงข้ันตอนการเปิดไฟลเ์ วบ็ เพจรปู แบบท่ี 2 1. คลกิ ท่ีพาเนล File  คลกิ พาเนล File 2. ดับเบิล้ คลิกไฟล์เว็บเพจท่ีตอ้ งการใชง้ าน  ดับเบลิ คลิกไฟล์ เวบ็ เพจทตี่ ้องการใชง้ าน รปู ที่ 1.13 แสดงขั้นตอนการเปดิ ไฟลเ์ วบ็ เพจท่ีพาเนล File

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 14 เม่อื สร้างเว็บเพจขน้ึ มาแล้ว กอ่ นจะเรมิ่ ใสเ่ นอ้ื หาหรอื รปู ภาพในหน้าเวบ็ เพจ ควรกาํ หนดคณุ สมบตั ิให้กบั หน้าเว็บเพจนั้นๆ กอ่ น เราเรียกว่า Page Properties เช่น ชอ่ื เวบ็ เพจ สพี นื้ หลังหรอื ภาพพน้ื หลงั เป็นต้น ซ่ึงสามารถทําได้ 2 วิธี ด้งั น้ีวธิ ีท่ี 1 กดป่มุ <Ctrl>+<J> หรือ คลกิ เมนู Modify -> Page Properties…คลิกปมุ่ Page Properties… บนพาเนล Properties วิธีที่ 2  รูปที่ 1.14 แสดงการใชค้ าสั่ง Page Properties

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยด้วย Dreamweaver 15 ในไดอะลอ็ คบ็อกซ์ Page Properties จะแบ่งกลุ่มคณุ สมบตั ขิ องเวบ็ เพจออกเปน็ 6 หมวดดงั นี้ Appearance(CSS) : ใช้กําหนด คุณสมบัติทั่วไป ในการแสดงผลของเว็บเพจ โดยจะ ถอื เปน็ คา่ เร่ิมตน้ ตามรปู แบบทกี่ ําหนด และจะ บนั ทกึ เป็นรูปแบบไว้ สามารถเรียกใช้ไดใ้ น พาเนล Properties เชน่ สพี ้ืนหลัง สตี วั อกั ษร ขนาด ตัวอักษร รูปที่ 1.15 แสดงภาพการตงั้ ค่าในหมวด Appearance(CSS) Appearance(HTML) : ใช้กําหนดคณุ สมบตั ิ ท่วั ไป ในการแสดงผลของเว็บเพจ ในรปู แบบ HTML โดยคําสง่ั จะเหมอื นของ CSS โดยสว่ นมากนิยมใช้ รปู แบบ ของ Appearance ของ CSS เปน็ หลักรปู ท่ี 1.16 แสดงภาพการต้งั ค่าในหมวด Appearance(HTML) Links(CSS) : ใช้กําหนดคุณสมบตั ิของ ไฮเปอรล์ งิ คแ์ บบเวบ็ เพจ โดยจะบันทึกรปู แบบ CSS Style เอาไวซ้ ง่ึ ถอื เป็นค่าเรม่ิ ต้น (จะแสดง รายละเอียด ในเอกสารประกอบเล่มท่ี 4) รปู ที่ 1.17 แสดงภาพการตงั้ ค่าในหมวด Links (CSS)

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 16Headings (CSS) : กําหนดคุณสมบัตขิ องข้อความที่เปน็ หวั เรื่องของเว็บเพจ (HTMLheading) รปู ที่ 1.18 แสดงภาพการตั้งค่าในหมวด Headings(CSS) Title/Encoding : ใชก้ าํ หนดหัวเรอ่ื งของเว็บ เพจและกาํ หนดชุดของตวั อกั ษรที่ใช้รูปที่ 1.19 แสดงภาพการตงั้ ค่าในหมวด Tiltle/EncodingTracing Image : ใช้เมือ่ ต้องการนําภาพตวั อยา่ งมาวางเพ่ือช่วยในการออกแบบเว็บเพจ รูปที่ 1.20 แสดงภาพการต้งั ค่าในหมวด Tracing Image เราสามารถจะกาหนดคุณสมบัติต่างๆ จากพาเนล Properties ได้รูปท่ี 1.21 แสดงภาพ พาเพล properties

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยด้วย Dreamweaver 17 การกาหนด Title/Encoding แสดงข้อความบนเวบ็ เพจเป็นภาษาไทย 1. หลงั จากทเ่ี ลือก Modify -> Page Properties แล้ว เลอื กหวั ขอ้ Title/Encoding   รปู ที่ 1.22 แสดงการตง้ั ค่า Title/Encoding 2. Title สาํ หรบั พิมพช์ ่อื เว็บเพจหรือข้อความที่เราตอ้ งการ ส่ือความหมายของเน้ือหาในหน้าเวบ็ เพจน้นั เช่น ข่าว (โดยช่อื น้ีจะแสดงท่แี ถบด้านบนของเว็บเพจ) ไทยรฐั ออนไลน์ เปน็ ต้น3. Encoding เปน็ การกําหนดรปู แบบภาษาบนเว็บเพจ สําหรบั ภาษาไทยให้เลือก Thai(Windows) หรือ Unicode(UTF-8) ปัจจุบนั นยิ มกาํ หนดเป็น UTF-8 เพราะรองรับการทํางานขา้ มระบบรวมถงึ แสดงผลบนอุปกรณ์พกพา แท็บเล็ต ไอโพน และสมารท์ โพนได้อยา่ งถกู ตอ้ ง อีกท้งั รองรับได้หลายภาษา ทําใหเ้ ว็บเพจ 1 หน้าแสดงภาษาได้หลากหลาย ทัง้ ภาษาไทย จนี ญีป่ นุ่ เกาหลี อังกฤษ ได้ในหนา้ เดียว

เอกสารประกอบการเรยี น เรื่อง เว็บสวยดว้ ย Dreamweaver 18การกาหนด ขนาดตัวอกั ษร สตี วั อักษร และสพี ื้น โดยทว่ั ไปสหี รือภาพพน้ื หลัง(Background) ของหนา้ เวบ็ เพจท่ีสร้างข้นึ มาใหม่จะเปน็ สีขาวซ่งึ เราสามารถเปล่ียนสีหรือภาพพืน้ หลังได้ตามต้องการ ดังนี้1. เลอื ก Modify -> Page Properties แล้ว เลอื กหัวข้อ Appearance(CSS)  รูปแบบตวั อกั ษร  ขนาดตวั อกั ษร   สตี ัวอักษร สพี ้นื หลัง2. Page font : กําหนดฟอนตต์ ัวอักษรทจ่ี ะใช้ กบั เวบ็ เพจทัง้ หน้า ภาษาไทยควรเลอื ก Tahoma , Geneva ,Sans-serif3. Size : ขนาดของตัวอักษร4. Text color : สขี องขอ้ ความ5. Background color : สีพน้ื หลงั ของเว็บเพจ รปู ที่ 1.23 แสดงการต้ังค่า Appearance(CSS)

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยด้วย Dreamweaver 19 การกาหนด แบบตวั อักษรและสี สาหรับข้อความหวั เร่ือง (Heading) การกาํ หนดคา่ ให้ขอ้ ความแบบหัวขอ้ หรอื Head น้ัน จะเป็นการกําหนดขนาด และสสี นัใหห้ ัวข้อ โดยแบง่ เป็น 6 ระดบั โดยมีขั้นตอนในการปรับแต่ง ดังนี้ 1. เลือก Modify -> Page Properties แล้ว เลอื กหัวข้อ Headings(CSS) รูปแบบตวั อกั ษร   ขนาดของตวั อกั ษร  สขี องตัวอักษร2. Heading font : การกาํ หนด  เลือกขอ้ ความรปู แบบของข้อความหัวเร่ือง3. Heading 1 – 6 : การกําหนดขนาดและสขี องขอ้ ความท่ีเปน็ หัวเรอื่ งระดับตา่ งๆ 6 ระดบั ท่ี พาเนล Properties-> Formatเลอื กรปู แบบของ Heading 1-6 ที่ตอ้ งการ รปู ที่ 1.24 แสดงขัน้ ตอนการตง้ั ค่า Headings (CSS)

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยดว้ ย Dreamweaver 20 หลังจากที่ออกแบบเว็บเพจแล้ว เราควรตรวจสอบผลลัพธบ์ นบราวเซอร์ เนอ่ื งจากส่วนประกอบของเวบ็ บางสว่ น ไม่สามารถแสดงผลไดบ้ นหน้าจอโปรแกรม เช่น ภาพเคลอื่ นไหววิดโี อคลปิ หรอื แฟลชมวู ต่ี า่ งๆ โดยการแสดงผลเว็บเพจบนบราวเซอรท์ ําได้ 3 วิธี ดังนี้ วิธีที่ 1 กดปมุ่ <F12> วิธีท่ี 2 คลิกเมนู File -> Preview in Browser -> ช่ือโปรแกรมบราวเซอร์ วธิ ีที่ 3 คลกิ ท่ีปุ่ม (Preview/Debug in browser) บนเมนู Document แลว้ เลือกโปรแกรมบราวเซอร์ วธิ ีท่ี 3 วธิ ีท่2ี รูปที่ 1.25 แสดงเมนูแสดงผลบนบราวเซอร์ การแสดงผลหนา้ เว็บเพจบนบราวเซอร์ อยา่ ง IE (Internet Explorer, Firefox หรือ Chromeอาจแสดงผลแตกตา่ งกนั เล็กนอ้ ย ทงั้ นขี้ ้นึ อยกู่ บั บราวเซอร์แต่ละตัวและแตล่ ะเวอรช์ ่นั ดงั น้นั ควรเลอื กทดสอบกบั บราวเซอร์หลายๆ ตวั และเลอื กท่ีมผี ู้ชมนิยมใช้มากท่ีสุดในเวลาน้ัน ในกรณที ี่มกี ารแก้ไขเวบ็ เพจ เมอื่ กดปุม่ <F12> โปรแกรมจะบังคับใหเ้ ราบันทึกไฟลก์ อ่ น คลิก Yes ถงึ จะแสดงผลได้

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยด้วย Dreamweaver 21ช่ือ.......................................................ชนั้ ..................เลขที่…………. ใบงานท่ี 2คณุ สมบตั พิ ื้นฐานหนา้ เวบ็ เพจนักเรียนสามารถกาหนดคณุ สมบตั พิ นื้ ฐานของหนา้ เวบ็ เพจได้ อยา่ งถูกต้องและเหมาะสมคาช้แี จง ใหน้ ักเรียนเปิดไฟล์ index.html ข้ึนมา และดําเนินการกาํ หนดคุณสมบตั ิ พนื้ ฐานของหน้าเวบ็ เพจ ดังนี้ (ปฏบิ ัติได้ข้อละ 2 คะแนน)1. กาํ หนด Title ของเว็บเพจวา่ “Welcome to My Homepage”2. กําหนดรูปแบบภาษาบนเว็บเพจ ใหส้ ามารถใช้ภาษาไทยได้3. กําหนดสีพ้ืนของเว็บเพจ เป็นสีเทา รหัส “#CCC” และสีตัวอักษรเป็นสีดํา รหัส “#000” ขนาด 16 px รปู แบบของตวั อกั ษร “Tahoma , Geneva ,Sans-serif”4. กาํ หนด แบบตัวอักษรและสี สาํ หรบั ขอ้ ความหัวเรอ่ื งท้ัง 6 รปู แบบ5. แสดงผลบนบราวเซอร์ ดงั ตอ่ ไปน้ีคะแนนเต็ม 10 คะแนน คะแนนทไี่ ด้ คอื ..................คะแนน

เอกสารประกอบการเรยี น เรื่อง เวบ็ สวยดว้ ย Dreamweaver 22 ใบความรู้ที่ 3 เนอ้ื หาหนา้ เวบ็ เพจ การใส่ข้อความลงบนเว็บเพจสามารถทาํ ได้เหมือนกับในโปรแกรมประเภทเวิร์ดโปรเซสเซอร์ทว่ั ไป คือเริ่มจาก คลิกเพื่อวางเคอรเ์ ซอรต์ รงจดุ ท่ตี ้องการแลว้ พมิ พ์ข้อความ คลิกตรงพืน้ ท่ที างาน รปู ท่ี 1.26 แสดงขั้นตอนการพมิ พข์ อ้ ความลงบนหนา้ เว็บเพจ การเวน้ วรรคระหว่างข้อความ ในการเคาะเวน้ วรรคระหว่างขอ้ ความโปรแกรม Dreamweaver จะเวน้ ให้เพียง 1 ตัวอกั ษรเท่าน้ัน ไม่ว่าคณุ จะเคาะปุ่ม <Space> ก่ีคร้ังก็ตาม ดงั นั้นถ้าตอ้ งการเวน้ วรรคมากกวา่ 1 ตวั อักษรทาํ ไดด้ ังนี้ วิธีท่ี 1 กดปุ่ม <Ctrl> + <Shift> + <Space> (แทนการเคาะปุ่ม <Space> เฉยๆ) วธิ ีท่ี 2 คลิกพาเนล Insert เลือกเมนู Text -> Characters แลว้ เลือก Non-Breaking Space    รปู ที่ 1.27 แสดงขน้ั ตอนการเวน้ วรรคข้อความ

เอกสารประกอบการเรยี น เรื่อง เว็บสวยดว้ ย Dreamweaver 23 การขึน้ บรรทดั ใหม่ เม่ือพิมพ์ข้อความจนเตม็ บรรทัดหรอื เต็มความกวา้ งของขอบเขตนัน้ โปรแกรมจะปดั ขอ้ ความขึ้นบรรทัดใหม่อัตโนมตั ิ ถา้ คณุ กดปมุ่ <Enter> เพ่ือขึ้นบรรทดั ใหม่ โปรแกรมจะกําหนดระยะบรรทัดที่ห่างมากกวา่ ปกติ แตถ่ ้าตอ้ งการขึน้ บรรทัดใหม่ โดยใหร้ ะยะหา่ งระหว่างบรรทัดเทา่ เดมิ ทาํ ได้โดย การกดปุ่ม <Shift> + <Enter> รปู ที่ 1.28 แสดงผลเปรยี บเทียบการขนึ้ บรรทดั ใหม่ ดว้ ยการกดปมุ่ <Shift> + <Enter>  โปรแกรม Dreamweaver ไมส่ ามารถตดั คําภาษาไทยได้ ดงั นัน้ การข้นึ บรรทัดใหม่อัตโนมัติ อาจจะไมส่ วยงาม แตไ่ ม่ควรกังวลกับการตัดคํามากนัก เพราะเวลาแสดงผลจริงการตดั คาํ จะข้ึนอยกู่ ับ บราวเซอรแ์ ละสภาพแวดลอ้ มท่ีผชู้ มใชใ้ นการเข้าชมเวบ็ ไซต์  การยา้ ยข้อความ เลอื กข้อความแล้วคลกิ ลากไปวางไวต้ าแหน่งใหม่ หรือ เลอื กข้อความ แลว้ กดปมุ่ <Ctrl> + <X> จากนน้ั วางเคอรเ์ ซอร์ท่ีตาแหนง่ ปลายทางแล้วกดป่มุ <Ctrl> + <V>  การคดั ลอกขอ้ ความ เลือกขอ้ ความแล้ว กดปมุ่ <Ctrl> ค้างไว้ คลิกลากไปวางไว้ ตาแหน่งใหม่ หรอื เลือกขอ้ ความแล้วกดปุ่ม <Ctrl> + <C> จากนน้ั วางเคอร์เซอรท์ ่ี ตาแหนง่ ปลายทางแล้วกดปุ่ม <Ctrl> + <V>

เอกสารประกอบการเรยี น เร่ือง เว็บสวยด้วย Dreamweaver 24 รูปภาพ กเ็ ปน็ อีกองคป์ ระกอบหนึง่ ที่สําคญั สําหรับการสร้างเว็บเพจ เพราะช่วยทําให้เวบ็ เพจสวยงาม มสี ีสันน่าสนใจ เว็บเพจทั่วไปจงึ มักมสี ว่ นประกอบเป็นภาพอยูเ่ ป็นจาํ นวนมาก ซึง่ อาจจะเป็นภาพที่เก่ยี วข้องกับเน้อื หาโดยตรง เช่นภาพสนิ ค้าหรือบริการ หรือเป็นรูปภาพท่ีนํามาใช้ตกแตง่ เพ่อื ให้เวบ็ เพจดดู ขี นึ้ กไ็ ด้ ภาพกราฟกิ พ้ืนฐานสาหรับเว็บเพจ ไฟลร์ ูปภาพทเ่ี หมาะจะใช้กับเว็บ ประกอบดว้ ย JPG , GIF และ PNG ซง่ึ แต่ละรูปแบบจะมีลกั ษณะเด่นท่ีแตกต่างกันออกไปJPG เปน็ ภาพทใ่ี ช้สีจํานวนมาก และมกี ารไล่โทนสอี ย่างตอ่ เน่อื ง เชน่ ภาพถา่ ยจากกลอ้ งการแสดงภาพจะแสดงภาพแบบเบลอๆก่อน แลว้ ค่อยๆชัดขน้ึตามปริมาณขอ้ มูลทโ่ี หลดมาจุดเดน่ --> ใช้สไี ดถ้ งึ 16.7 ลา้ นสีจดุ ดอ้ ย--> หากมกี ารบีบอดั ขอ้ มลู มากเท่าไหร่ คณุ ภาพก็ จะสญู เสยี มากขน้ึ เท่านั้นGIF เหมาะกบั ภาพสเี รียบๆ ซึ่งไม่มีการไล่โทนสีมากนัก เช่น โลโก้ ป่มุ เมนู ไอค่อน ภาพวาดลายเส้นภาพการ์ตูนจดุ เด่น --> หากมีการบบี อัดข้อมูล (ยอ่ –ขยาย) คุณภาพไฟล์จะไม่เสีย --> แสดงภาพโปร่งใส่ และภาพเคลื่อนไหวได้จดุ ด้อย--> ใชส้ ีไดส้ งู สดุ เพียง 256 สีPNG ใชส้ าํ หรับภาพถ่ายทตี่ อ้ งการใหม้ ีลักษณะโปรง่ ใส่ สามารถไล่ระดบั ความโปร่งใสได้จึงทาํ ให้วัตถกุ ลมกลืนกนั กับพนื้ หลังได้ดี ลักษณะคล้าย GIF มกั ใชใ้ นงานเฉพาะด้านไม่นิยมใช้ในงานเวบ็ เพจท่ัวไปจดุ เดน่ --> บีบอดั ขอ้ มูลได้ดี และแสดงผลไดเ้ รว็ กว่า GIF --> คุณภาพมากกว่าไฟลแ์ บบ JPGจุดดอ้ ย--> ไฟล์มีขนาดใหญม่ าก จงึ ไมเ่ ปน็ ท่ีนิยมใช้

เอกสารประกอบการเรยี น เร่ือง เว็บสวยด้วย Dreamweaver 25การแทรกภาพ สําหรบั วธิ ีใสร่ ูปภาพลงในเว็บเพจสามารถทําไดห้ ลายวิธี ดังนี้ คลิกท่ีพาเนล Insert เลือก Common -> Image วธิ ที ่ี 1 คลิกเมนู Insert -> Image จากเมนหู ลกั วธิ ที ่ี 2 คลกิ ลากไฟลภ์ าพจากพาเนล Files หรือพาเนล Assests วธิ ที ี่ 3 คลิกลากไฟล์ภาพจากโฟลเดอรข์ อง Windows วธิ ที ี่ 4 กดปุม่ <Ctrl> + <Alt> + <I> วธิ ที ่ี 5วิธีที2่ เลือกเมนู Insertแล้วเลอื ก Image หรอื ใช้คียล์ ดั Ctrl + Alt + i วธิ ที 1ี่ เลือกพาเนล Insert เลอื ก Common แล้วเลือก Images เลือก โฟลเดอร์ที่ แสดงภาพตัวอยา่ งเก็บภาพ  คลิก รูปที่ 1.29 แสดงขัน้ ตอนการแทรกรูปภาพ

เอกสารประกอบการเรยี น เรื่อง เวบ็ สวยด้วย Dreamweaver 26 ถา้ ภาพท่เี รานาํ มาแทรกไมไ่ ด้เก็บอยู่ภายในโฟลเดอร์ที่เราสรา้ งไซต์ไว้ โปรแกรมจะแนะนาํ ให้เราคัดลอก (Copy) ไฟลร์ ปู ภาพนั้นเขา้ มาไว้ในโฟลเดอร์เดยี วกนั การทาํ เช่นน้ีจะทาํ ให้ไฟล์เว็บเพจและไฟล์ภาพท่ตี อ้ งใชใ้ นหนา้ เว็บเพจนนั้ ถกู เก็บไว้ในโฟลเดอรเ์ ดยี วกัน ทาํ ใหก้ ารเคลอื่ นย้ายโฟลเดอร์และการอบั โหลดขึน้ เซิร์ฟเวอรท์ ําไดง้ า่ ย และเราไมต่ ้องกงั วลว่าภาพต่างๆ ท่ีใช้ในเว็บไซตจ์ ะหายไปคลิก Yes หากตอ้ งการคดั ลอกภาพมาเกบ็ ไว้ในโฟลเดอร์ทีเ่ กบ็ เว็บไซต์โปรแกรมจะข้ึนข้อความถามหากไฟลร์ ูปภาพ โปรแกรมจะให้เลอื กโฟลเดอรท์ ต่ี อ้ งการ นนั้ อยู่นอกโฟลเดอรท์ ่ีเราสร้างไซตไ์ ว้ คัดลอกภาพมาเกบ็ ไว้รูปท่ี 1.30 แสดงขอ้ ความเตือนใหบ้ ันทกึ รูปภาพในโฟลเดอร์ท่ีเก็บเว็บไซต์ เมอื่ เราแทรกภาพเรียบรอ้ ยจะมีหน้าต่าง กําหนดคา่ เพมิ่ เตมิ ให้กบั ภาพซง่ึ มีค่า ท่กี าํ หนดไดด้ ังน้ี รูปท่ี 1.31 แสดงการตั้งค่า Alternate text Alternate text : กาํ หนดข้อความแทนภาพ จะแสดงแทนภาพในกรณที ่ีภาพไมส่ ามารถแสดงได้ (โหลดไมค่ รบ) จะบอกใหผ้ ู้ชมเว็บไซตท์ ราบวา่ ภาพท่ไี ม่แสดงคือภาพอะไร Long description : กาํ หนดตาํ แหนง่ เว็บไซต์ เมื่อคลิกทีภ่ าพ จะเชื่อมโยงไปยงั เว็บไซต์ที่กําหนดไว้ในช่องน้ี (ถ้าไมต่ ้องการต้ังค่าใดๆ ให้คลกิ ปุ่ม Cancel) ขอ้ ความ แสดงแทนรูปภาพท่ี ไมแ่ สดงผล รูปท่ี 1.32 แสดงผลการตั้งค่า Alternate text

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 27ช่อื .......................................................ชน้ั ..................เลขท่ี…………. แบบฝึกหัดที่ 2 เนอื้ หาหนา้ เวบ็ เพจ นักเรียนสามารถบอกวธิ ีการเพ่ิมเนอื้ หาในหน้าเวบ็ เพจได้ คาช้ีแจง ใหน้ ักเรียนตอบคําถามต่อไปนี้ ลงในชอ่ งว่างทกี่ ําหนดให้1. วิธกี ารเพิม่ เนอื้ หาในหน้าเว็บเพจสามารถทําไดด้ งั นคี้ อื (1 คะแนน) ...........................................................................................................................................................2. จงบอกข้อแตกตา่ งของการเว้นวรรคระหว่างขอ้ ความ ระหว่างการกดปุ่ม <Space> กับการกดปมุ่ <Ctrl>+<Shift>+<Space> (2 คะแนน) ........................................................................................................................................................... ........................................................................................................................................................... ...........................................................................................................................................................3. การข้ึนบรรทัดใหม่ดว้ ยการกดปุ่ม <Enter> และ <Shift> + <Enter> ให้ผลลพั ธแ์ ตกต่างกนั อย่างไร (2 คะแนน) ........................................................................................................................................................... ...........................................................................................................................................................4. นดิ กังวลอยกู่ ับการจดั ข้อความ การเคาะวรรค และการตดั คําของขอ้ ความ บนหนา้ เวบ็ เพจ นักเรยี น คิดวา่ การกระทําของนดิ เป็นการกระทําที่ถกู ตอ้ งหรือไม่เพราะเหตุใด ( 2 คะแนน) ........................................................................................................................................................... ...........................................................................................................................................................5. เหตใุ ดภาพทบี่ ันทกึ ในรูปแบบ PNG จึงไม่เปน็ ทนี่ ิยมนํามาใช้ในงานเว็บเพจ (1 คะแนน) ...........................................................................................................................................................

เอกสารประกอบการเรยี น เรื่อง เว็บสวยด้วย Dreamweaver 286. ภาพทีบ่ นั ทกึ ในรูปแบบ GIF แตกตา่ งจากภาพแบบ JPG อยา่ งไร บอกมาอยา่ งน้อย 2 ขอ้ (2 คะแนน) ........................................................................................................................................................... ........................................................................................................................................................... ........................................................................................................................................................... ...........................................................................................................................................................7. ใหน้ ักเรียนบอกวธิ แี ทรกรูปภาพลงบนหน้าเวบ็ เพจมาคนละ 1 วิธี (1 คะแนน) ...........................................................................................................................................................8. หากรูปภาพท่เี ราจะนาํ มาแทรกในหน้าเวบ็ เพจ ไมไ่ ด้เก็บอยู่ในในโฟลเดอร์ทเ่ี ราสร้างไซต์ไว้ โปรแกรม จะดาํ เนินการอย่างไร และเหตุใดจึงตอ้ งดําเนนิ การเชน่ น้ัน ( 2 คะแนน) ........................................................................................................................................................... ...........................................................................................................................................................9. การต้ังค่า Alternate text หลังจากการใช้คําสั่งแทรกรูปภาพ คอื อะไร และต้ังคา่ เพื่ออะไร (2 คะแนน) ........................................................................................................................................................... ........................................................................................................................................................... คะแนนเตม็ 15 คะแนน คะแนนทไ่ี ด้ คอื ..................คะแนน

เอกสารประกอบการเรยี น เรื่อง เว็บสวยดว้ ย Dreamweaver 29คาช้แี จง แบบทดสอบหลังเรียน เรอ่ื ง สร้างเว็บเพจเบื้องตน้คาส่ัง แบบทดสอบฉบบั นีเ้ ป็นแบบปรนยั เลือกตอบ 4 ตวั เลือก จํานวน 10 ขอ้ ขอ้ ละ 1 คะแนน รวม 10 คะแนน ใหน้ ักเรียนเลือกคาํ ตอบที่ถูกต้องทส่ี ุดแลว้ ทําเครอ่ื งหมายกากบาท (X) ลงในกระดาษคําตอบ 1. การสร้าง ไซต์ (Site) คือ ก. การตง้ั ชื่อไฟลใ์ หมใ่ ห้กับเว็บเพจ ข. การสรา้ ง และออกแบบหน้าเวบ็ เพจใหม่ ค. การกาํ หนดคุณสมบัตพิ นื้ ฐานของหน้าเว็บเพจ ง. การกาํ หนดให้โปรแกรมรจู้ ักโฟลเดอร์สําหรับจดั เก็บเวบ็ ไซต์ 2. หากไฟลท์ ี่ใช้งานอยูย่ ังไม่ถูกบันทึก โปรแกรม Dreamweaver จะแสดงเครอื่ งหมายใด ตอ่ ทา้ ยชอ่ื ไฟล์นัน้ เพอ่ื เป็นการเตือน ก. * ข. ! ค. ? ง. #3. ปจั จุบันการกําหนดรูปแบบ(Encoding) ภาษาไทยบนเว็บไซต์ มี 2 รปู แบบ คือ ก. Thai (Windows) และ PostScript ข. Thai(Windows) และ Unicode(UTF-8) ค. PostScript และ Unicode(UTF-8) ง. PostScript และ Thai Text4. หากตอ้ งการขน้ึ บรรทัดใหม่ โดยใหร้ ะยะหา่ งระหว่างบรรทดั เทา่ เดิม ควรกดปมุ่ ใด ก. <Enter> ข. <Shift> + <Enter> ค. <Ctrl> + <Enter> ง. <Alt> + <Enter>.

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยดว้ ย Dreamweaver 305. Alternate Text คอื การกาํ หนดคา่ ใดก. การกาํ หนดข้อความแทนภาพข. การกําหนดขอ้ ความเสียงค. การกําหนดข้อความบรรยายใตภ้ าพง. การกําหนดข้อความปรากฏเวลาเมาสอ์ ย่เู หนอื ภาพ6. ข้อใดเปน็ การตง้ั ช่ือไฟลท์ ถ่ี ูกตอ้ งก. @hotmail.html ข. Page-1.htmlค. number_1.html ง. Food&Page.html7. การเรม่ิ ตน้ สร้างเวบ็ ไซต์ ขอ้ ใดเป็นสง่ิ ทค่ี วรกระทําเปน็ อนั ดบั แรกก. การออกแบบหน้าเว็บเพจข. การเลอื กโปรแกรมสาํ หรับสรา้ งเวบ็ ไซต์ค. การกาํ หนดโครงสร้างโฟลเดอรข์ องเวบ็ ไซต์ง. การตัง้ ค่าให้โปรแกรม Dreamweaver สามารถใชภ้ าษาไทยได้8. ปุ่มใด ใชส้ ําหรับดกู ารแสดงผลหน้าเวบ็ เพจบนบราวเซอร์ก. <F9> ข. <F10>ค. <F11> ง <F12>9. การสร้างไซตใ์ น Dreamweaver มีขน้ั ตอนอยา่ งไรก. เลือกเมนู File ->New Site… และกําหนดค่าข. เลือกเมนู File -> Open Site… จากน้นั เลือกไฟล์เว็บไซตท์ ต่ี ้องการสรา้ งค. เลือกเมนู Site -> Manage Sites… จากน้นั คลิกปุ่ม New site และกาํ หนดค่าง. เลอื กเมนู Modify -> Page Properties… เลือกหัวขอ้ Site และกาํ หนดค่า10. หนา้ เว็บเพจแรกหรอื หน้าหลัก (โฮมเพจ) ควรตง้ั ชอ่ื ไฟลว์ ่าอยา่ งไรก. main.html ข. index.htmlค. page1.html ง. homepage.html

เอกสารประกอบการเรยี น เรื่อง เวบ็ สวยด้วย Dreamweaver 31 กระดาษคาตอบแบบทดสอบหลงั เรยี น เล่มที่ 1 เรอื่ ง สรา้ งเวบ็ เพจเบ้อื งต้น ช่ือ.....................................................................ชั้น.....................เลขท่ี……….……. ให้นกั เรียนเลอื กคาํ ตอบที่ถูกต้องทสี่ ุดแล้วทําเครือ่ งหมายกากบาท (X) ลงในกระดาษคําตอบ ข้อ ก ข ค ง 1 2 3 4 5 6 7 8 9 10คะแนนสอบ หลงั เรียน เตม็ 10 คะแนน คะแนนที่ได้ คอื ..................คะแนน

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยด้วย Dreamweaver 32 บรรณานกุ รมเกยี รติพงษ์ บุญจติ ร. (2557). คูม่ อื Dreamweaver CS6 Professional Guide ฉบับสมบูรณ์. กรงุ เทพฯ : ไอดีซี พรเี มยี ร.์ดวงพร เกย๋ี งคํา. (2555). คมู่ ือสรา้ งเวบ็ ไซต์ ฉบับสมบูรณ์. กรงุ เทพฯ : โปรวิช่นั .ธีระสทิ ธิ์ อึ้งรตั นวงศ์. (2554). สร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5. กรุงเทพ : บรษิ ทั สวสั ดี ไอที จํากดั .ประภาพร ช่างไม.้ (2553). มอื ใหม่สรา้ งเว็บไซต์ Photoshop + Dreamweaver. นนทบรุ ี : ไอดีซี.ปยิ ะ นากสงค์และมณนี ุช สมานหมู่. (2556). มือใหม่ Photoshop Dreamweaver CS6 ออกแบบและ สร้างเวบ็ ไซต์. กรงุ เทพฯ : ซิมพลฟิ าย.พนั จันทร์ ธนวฒั นเสถียร. (2554). หนังสือเรยี นรายวิชาเพ่มิ เตมิ การสรา้ งเว็บเพจด้วย Dreamweaver. กรุงเทพฯ : ซคั เซส มีเดีย.________. (2557). หนังสือเรียนรายวิชาเพ่ิมเตมิ การสรา้ งเว็บเพจด้วย Dreamweaver เวอรช์ นั่ CS6. กรงุ เทพฯ : ซคั เซส มเี ดยี .วงคป์ ระชา จนั ทร์สมวงศ์. (2554). Insight Dreamweaver CS5 ฉบบั สมบรู ณ์. กรุงเทพฯ : โปรวชิ ่นั .สถาบันส่งเสริมการสอนวิทยาศาสตร์และเทคโนโลยี กระทรวงศกึ ษาธิการ. (2553). หนังสือเรยี นรายวชิ า เพ่มิ เตมิ เทคโนโลยสี ารสนเทศและการสื่อสาร กราฟิกและเทคโนโลยสี ือ่ ประสม. กรุงเทพฯ : องค์การค้า สกสค.สุธีร์ นวกุล. (2556). ออกแบบและสร้างเว็บไซตด์ ้วย Dreamweaver CS6. กรงุ เทพฯ : ซเี อด็ ยูเคช่นั .

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 33ภาคผนวก

เอกสารประกอบการเรยี น เร่ือง เว็บสวยด้วย Dreamweaver 34เฉลยแบบทดสอบ ก่อน – หลงั เรียน เล่มที่ 1 เร่อื ง สรา้ งเว็บเพจเบือ้ งต้น กอ่ นเรียน หลงั เรยี นขอ้ ก ข ค ง ขอ้ ก ข ค ง1 12 23 34 45 56 67 78 89 910  10 

เอกสารประกอบการเรยี น เรื่อง เว็บสวยด้วย Dreamweaver 35 เฉลย แบบฝกึ หัดที่ 1 เรมิ่ ตน้ สรา้ งเวบ็ ไซต์จ : นกั เรียนสามารถบอกขัน้ ตอนการสรา้ งและบันทกึ หน้าเว็บเพจได้คาชีแ้ จง พจิ ารณาสถานการณ์ตอ่ ไปน้ี แล้วใสเ่ คร่ืองหมาย หนา้ ขอ้ ทถ่ี กู และใส่เครือ่ งหมาย  หน้าข้อทีผ่ ิด (ขอ้ ละ 1 คะแนน) 1. สมภพ เริม่ ตน้ สร้างเว็บไซต์ด้วยการสรา้ งโฟลเดอร์สําหรับเก็บเวบ็ ไซตก์ อ่ น 2. หนนู า สร้างโฟลเดอร์ ช่ือว่า อน่ื ๆ ไว้สําหรบั เกบ็ ไฟล์เสยี งและไฟล์วดิ ีโอ 3. สมศรี เก็บเว็บเพจทง้ั หมดไว้ในโฟลเดอรห์ ลัก 4. กนก สรา้ งไซต์ เพอื่ ให้โปรแกรม Dreamweaver ร้จู ักว่าโฟลเดอรใ์ ดบ้างที่เตรียม ไว้สําหรบั สร้างเว็บไซต์ 5. กมล เริม่ ตน้ สร้างไซต์ดว้ ยการคลิกท่ีเมนู File -> Site 6. สงกรานต์ สร้างไฟลใ์ หม่ ในพาเนล file โดยการคลิกเมาสป์ มุ่ ขวาที่ โฟลเดอร์ site แลว้ เลอื ก New File 7. ละออง ตัง้ ชื่อ ไฟล์สาํ หรบั เว็บเพจท่ีเป็นหนา้ แรก(โฮมเพจ)ว่า Homepege.html 8. สมร ตั้งชอ่ื ไฟล์ วา่ page*1 page*2 และ page*3 เพื่อใหง้ ่ายต่อการจดจํา 9. นอ้ ย บนั ทกึ เว็บเพจดว้ ยการกดป่มุ <Ctrl> + <s> 10. มุก สังเกตว่า เวบ็ เพจท่ีแก้ไขยงั ไมไ่ ดบ้ นั ทึก เพราะมสี ญั ลกั ษณ์ @ อยดู่ ้านหลังชือ่คะแนนเต็ม 10 คะแนน คะแนนทีไ่ ด้ คือ ............................คะแนน

เอกสารประกอบการเรยี น เร่ือง เว็บสวยดว้ ย Dreamweaver 36 เกณฑ์การใหค้ ะแนนการทาใบงานที่ 1เกณฑ์การประเมนิ (3) ระดับคะแนน (1) - ออกแบบโครงร่างของ (2) - ออกแบบโครงรา่ งของการกําหนดโครงรา่ ง เวบ็ ไซต์ ได้อยา่ งถูกต้อง เวบ็ ไซต์ได้ แตไ่ ม่สมบรู ณ์ของเว็บไซต์ และเหมาะสม - ออกแบบโครงร่างของ - สรา้ งโฟลเดอรห์ ลกั และ - สร้างโฟลเดอร์หลัก และ เว็บไซต์ ได้อย่างถูกต้อง โฟลเดอร์ยอ่ ยได้ แต่ไม่ครบ โฟลเดอรย์ อ่ ยได้ สมบูรณ์ และเหมาะสม ตามโครงรา่ งของเว็บไซต์ท่ี ครบถว้ นตรงตามโครงรา่ ง - สร้างโฟลเดอร์หลกั และ ออกแบบไว้ ของเว็บไซตท์ ี่ออกแบบไว้ โฟลเดอร์ยอ่ ยได้ แต่ไม่ครบ - ตั้งชอื่ โฟลเดอรเ์ ปน็ ตามโครงรา่ งของเวบ็ ไซตท์ ี่ ออกแบบไว้ - มกี ารต้ังชื่อโฟลเดอร์เปน็ - ตง้ั ชือ่ โฟลเดอรเ์ ปน็ ภาษาไทยบา้ ง ภาษาอังกฤษ ให้ส่ือความ ภาษาอังกฤษ แต่ไมส่ ื่อ ภาษาอังกฤษบ้าง หมายถึงข้อมลู ในเวบ็ เพจนน้ั ความหมายถึงข้อมลู ในเวบ็ เพจการสรา้ งไซต์ สรา้ งไซต์ได้อย่างถูกต้อง มี สร้างไซตไ์ ดอ้ ย่างถูกตอ้ ง มี สรา้ งไซตไ์ ด้ แตไ่ ม่ได้ การกาํ หนด Site Name การกาํ หนด Site Name หรอื กาํ หนด Site Name และ และ Local Site Folder ได้ Local Site Folder เพยี ง Local Site Folder อย่างถูกต้อง อยา่ งใดอย่างหนึ่งการสรา้ ง และบันทึก - สร้างหน้าเวบ็ เพจใหม่ได้ - สรา้ งหน้าเวบ็ เพจใหม่ได้ครบ - สรา้ งหนา้ เวบ็ เพจใหม่ได้หน้าเว็บเพจใหม่ ครบตามโครงร่างท่ีออกแบบ ตามโครงร่างท่อี อกแบบไว้ ครบตามโครงร่างที่ ไว้ - บันทกึ ไฟล์หน้าเว็บเพจหลกั ออกแบบไว้ - บนั ทึกไฟล์หนา้ เวบ็ เพจ วา่ indext.html - ไมบ่ ันทกึ ไฟลห์ นา้ เว็บ หลักว่า indext.html - บันทกึ ไฟล์เวบ็ เพจอื่นๆถกู เพจหลกั ว่า indext.html - บนั ทกึ ไฟล์เวบ็ เพจอื่นๆ หลกั การตั้งช่อื ไฟล์ เปน็ บาง - บันทึกไฟลเ์ ว็บเพจอน่ื ๆ ตามหลกั การต้ังไฟล์ ไฟล์เท่าน้นั ถูกหลกั การตั้งชอ่ื ไฟล์ เปน็ บางไฟล์เทา่ นน้ั เกณฑก์ ารผ่าน ต้ังแต่ระดับคณุ ภาพพอใชข้ ึน้ ไป เกณฑก์ ารตดั สนิ คุณภาพ ชว่ งคะแนน ระดับคณุ ภาพ 8 – 9 ดี 5 – 7 พอใช้ 0 – 4 ควรปรบั ปรุง

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยด้วย Dreamweaver 37เกณฑ์การให้คะแนนการทาใบงานที่ 2พจิ ารณาการใหค้ ะแนนจากผลการปฏิบัติของนักเรยี นในแต่ละขอ้ ขอ้ ละ 2 คะแนน ดงั น้ีคะแนน การปฏบิ ตั ิ 2 ปฏิบตั ิไดถ้ ูกต้องสมบูรณ์ 1 ปฏิบตั ิไดบ้ างสว่ น 0 ปฏบิ ัติไม่ได้เลย เกณฑก์ ารตัดสินคณุ ภาพ ชว่ งคะแนน ระดับคณุ ภาพ 8 – 10 ดี 5 – 7 พอใช้ 0 – 4 ควรปรับปรุงเกณฑก์ ารผ่าน ตัง้ แตร่ ะดบั คุณภาพพอใชข้ นึ้ ไป

เอกสารประกอบการเรียน เรื่อง เว็บสวยดว้ ย Dreamweaver 38 เฉลย แบบฝึกหัดท่ี 2 เนอื้ หาหนา้ เวบ็ เพจ นักเรยี นสามารถบอกวิธกี ารเพิ่มเนอ้ื หาในหนา้ เว็บเพจได้คาช้แี จง ให้นกั เรียนตอบคําถามต่อไปนี้ ลงในช่องวา่ งท่กี าํ หนดให้1. วิธีการเพิ่มเนอ้ื หาในหน้าเว็บเพจสามารถทําได้ดังน้คี ือ (1 คะแนน)คลิกเพ่อื วางเคอร์เซอรต์ รงจุดทีต่ ้องการแล้วพมิ พข์ อ้ ความ .2. จงบอกขอ้ แตกต่างของการเวน้ วรรค์ระหว่างข้อความ ระหว่างการกดปุ่ม <Space> กบั การกดปมุ่<Ctrl>+<Shifl>+<Space> (2 คะแนน)การกดปุ่ม <Space> จะเว้นวรรคขอ้ ความได้เพียง 1 ตวั อกั ษรเท่านั้น ไมว่ า่ จะเคาะปุ่มกี่ครั้งก็ตามแตกตา่ งจากการกดปมุ่ <Ctrl>+<Shift>+<Space>ทีจ่ ะเวน้ วรรค์ข้อความไดม้ ากกวา่ 1 ตัวอักษรตามจานวนคร้งั ทกี่ ดปุม่ นนั้ .3. การขน้ึ บรรทดั ใหม่ดว้ ยการกดปมุ่ <Enter> และ <Shift> + <Enter> ให้ผลลัพธ์แตกตา่ งกันอยา่ งไร (2 คะแนน)การข้นึ บรรทัดใหมด่ ้วยการการกดปุม่ <Enter> จะได้ระยะหา่ งระหวา่ งบรรทดั ทมี่ ากกวา่ ปกติการขึ้นบรรทัดใหม่ด้วยการการกดปมุ่ <Shift>+<Enter> จะได้ระยะห่างระหว่างบรรทัดเท่าเดิม4. นิดกงั วลอยู่กบั การจดั ข้อความ การเคาะวรรค และการตดั คาํ ของขอ้ ความ บนหน้าเว็บเพจ นกั เรียนคิดว่าการกระทําของนิดเป็นการกระทําทถ่ี กู ต้องหรอื ไมเ่ พราะเหตใุ ด ( 2 คะแนน)ผิด เพราะถือเปน็ การกระทาทีเ่ ปล่าประโยชน์ เน่อื งจาก เวลาแสดงผลจริงการตัดคาจะข้ึนอย่กู ับบราวเซอร์และสภาพแวดล้อมของผูเ้ ขา้ ชมเว็บไซต์ เช่น ความละเอียดของจอภาพหรือการต้ังค่าตวั อักษรของผชู้ ม5. เหตุใดภาพทบี่ นั ทึกในรูปแบบ PNG จงึ ไม่เป็นท่ีนิยมนํามาใช้ในงานเว็บเพจ (1 คะแนน)ลกั ษณะของภาพคล้ายกบั ภาพแบบ GIF แตไ่ ฟลม์ ขี นาดใหญ่มาก จึงไม่เปน็ ทน่ี ยิ มใช้ .

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยด้วย Dreamweaver 396. ภาพที่บันทึกในรูปแบบ GIF แตกต่างจากภาพแบบ JPG อย่างไร บอกมาอยา่ งนอ้ ย 2 ขอ้ (2 คะแนน) ภาพแบบ GIF 1. ใช้สีไดส้ งู สดุ 256 สี 2. แสดงภาพโปร่งใส่และภาพเคล่อื นไหวได้ 3 เมื่อมกี ารบบี อัดคุณภาพไฟล์จะไม่เสยี 4. เหมาะสาหรบั ภาพ โลโก้ ปมุ่ เมนู ภาพวาดลายเสน้ ภาพแบบ JPG 1. ใช้สีไดส้ ูงสดุ 16.7 ล้านสี 2. ไมส่ ามารถแสดงภาพโปร่งใส่หรือภาพเคลือ่ นไหวได้ (เป็นภาพนิ่ง) 3. เมอ่ื มกี ารบีบอดั คุณภาพไฟล์จะเสยี 4. เหมาะสาหรับภาพถ่ายเหมอื นจริง (นักเรียนเลอื กตอบเพียง 2 ขอ้ ข้อละ 1 คะแนน)7. ให้นกั เรียนบอกวิธแี ทรกรปู ภาพลงบนหน้าเวบ็ เพจมาคนละ 1 วิธี (1 คะแนน)วิธที ่ี 1 คลกิ ทพี่ าเนล Insert เลอื ก Common -> Image วิธีท่ี 2 คลกิ เมนู Insert -> Imageจากเมนูหลัก วิธที ่ี 3 คลกิ ลากไฟลภ์ าพจากพาเนล Files หรอื พาเนล Assests วธิ ีที่ 4 คลกิ ลากไฟล์ภาพจากโฟลเดอร์ของ Windows วิธีท่ี 5 กดป่มุ <Ctrl> + <Alt> + <I> .(นักเรียนเลือกตอบเพียง 1 วิธี)8. หากรูปภาพทเี่ ราจะนาํ มาแทรกในหน้าเว็บเพจ ไมไ่ ดเ้ ก็บอยูใ่ นในโฟลเดอร์ทีเ่ ราสร้างไซตไ์ ว้โปรแกรม จะดําเนินการอยา่ งไร และเหตุใดจงึ ต้องดําเนนิ การเชน่ นั้น ( 2 คะแนน) โปรแกรมจะแนะนาใหเ้ ราคัดลอก ไฟลร์ ปู ภาพน้ันเขา้ มาไวใ้ นโฟลเดอรท์ เ่ี ก็บเวบ็ ไซต์ เพอ่ื ให้ไฟล์รปู ภาพและไฟล์เวบ็ เพจอยูใ่ นโฟลเดอร์เดียวกัน งา่ ยต่อการเคล่ือนย้ายและอัฟโหลดขนึ้ เซิร์ฟเวอร์9. การต้ังค่า Alternate text หลังจากการใชค้ ําส่งั แทรกรปู ภาพ คอื อะไร และต้งั ค่าเพือ่ อะไร (2 คะแนน) การต้งั คา่ Alternate text หลังจากการใชค้ าส่งั แทรกรูปภาพ คอื การกาหนดข้อความที่จะใชแ้ ทนภาพ ซงึ่ ข้อความนี้จะแสดงในกรณีทภ่ี าพนน้ั ไม่สามารถแสดงผลได้ (โหลดไม่ครบ หรือโหลดชา้ ) จะเปน็ การบอกให้ผู้ชมทราบวา่ ภาพท่ีไมแ่ สดงคอื ภาพอะไร

เอกสารประกอบการเรยี น เรื่อง เวบ็ สวยดว้ ย Dreamweaver 40 แบบบันทึกคะแนน เอกสารประกอบการเรียน เลม่ ท่ี 1 เรอ่ื ง สรา้ งเว็บเพจเบอื้ งต้นช่อื .....................................................................ชั้น.....................เลขท่ี……….……. แบบทดสอบ คะแนนเต็ม คะแนนทไ่ี ด้ หมายเหตุแบบทดสอบก่อนเรียน 10แบบทดสอบหลงั เรียน 10 คะแนนความก้าวหน้าแบบฝกึ หัด/ใบงาน คะแนนเตม็ คะแนนทไี่ ด้ ร้อยละ แบบฝึกหดั ที่ 1 10 9 ใบงานที่ 1 10 ใบงานท่ี 2 15 แบบฝึกหัดที่ 2 44 รวมคะแนนรอ้ ยละของคะแนนรวม = (คะแนนรวมทไี่ ด้ x 100) / 44 = …………………………เกณฑก์ ารให้คะแนนจากการทําแบบฝึกหัด และใบงาน(4) ระดับดีมาก หมายถึง ได้คะแนนคดิ เป็นร้อยละ 80 ขึน้ ไป(3) ระดับดี หมายถึง ไดค้ ะแนนคิดเปน็ ร้อยละ 60 – 79(2) ระดับพอใช้ หมายถงึ ไดค้ ะแนนคิดเปน็ รอ้ ยละ 40 – 59(1) ระดับต้องปรับปรงุ หมายถงึ ได้คะแนนคิดเปน็ ร้อยละตา่ํ กวา่ 40เกณฑ์ การผา่ น นักเรียนบนั ทึกผลได้คะแนนอย่างนอ้ ยระดบั คุณภาพ 2 (พอใช)้ ขนึ้ ไป สรปุ ผล  ผ่าน  ไม่ผ่านลงชื่อ........................................................ผบู้ นั ทกึ ผล วันที.่ .............................................

เอกสารประกอบการเรยี น เร่ือง เวบ็ สวยดว้ ย Dreamweaver 41