การสร้างเว็บไซต์ Cr.นางสาวศิริลักษณ์ อินธิประเวศน์

เอกสารประกอบการเรียน เร่ือง เวบ็ สวยดว้ ย 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.html 3. การสรา้ ง ไซต์ (Site) คือ ก. การต้งั ชื่อไฟลใ์ หม่ให้กับเว็บเพจ ข. การสร้างและออกแบบหนา้ เวบ็ เพจใหม่ ค. การกําหนดคณุ สมบตั พิ น้ื ฐานของหนา้ เว็บเพจ ง. การกําหนดใหโ้ ปรแกรมร้จู ักโฟลเดอร์สําหรับจัดเก็บเวบ็ ไซต์ 4. การสร้างไซต์ใน Dreamweaver มีขน้ั ตอนอย่างไร ก. เลือกเมนู File ->New Site… และกําหนดคา่ ข. เลอื กเมนู File -> Open Site… จากน้ันเลอื กไฟล์เว็บไซตท์ ตี่ ้องการสร้าง ค. เลอื กเมนู Site -> Manage Sites… จากน้นั คลิกปุ่ม New site และกาํ หนดค่า ง. เลอื กเมนู Modify -> Page Properties… เลอื กหัวขอ้ Site และกาํ หนดคา่

เอกสารประกอบการเรยี น เร่ือง เว็บสวยดว้ ย Dreamweaver 3 5. หากไฟลท์ ่ใี ช้งานอยยู่ ังไม่ถกู บนั ทึก โปรแกรม Dreamweaver จะแสดงเครอื่ งหมายใด ตอ่ ทา้ ยช่อื ไฟล์นั้นเพอื่ เปน็ การเตือน ก. * ข. ! ค. ? ง # 6. ขอ้ ใดเปน็ การตัง้ ชอื่ ไฟลท์ ีถ่ ูกตอ้ ง ข. Page-1.html ง. Food&Page.html ก. @hotmail.html ค. number_1.html 7. ปัจจบุ ันการกาํ หนดรูปแบบ(Encoding) ภาษาไทยบนเว็บไซต์ มี 2 รปู แบบ คือ ก. Thai (Windows) และ PostScript ข. Thai(Windows) และ Unicode(UTF-8) ค. PostScript และ Unicode(UTF-8) ง. PostScript และ Thai Text 8. ปมุ่ ใด ใช้สําหรับดกู ารแสดงผลหนา้ เว็บเพจบนบราวเซอร์ ก. <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. เลือกโฟลเดอรห์ ลัก  ต้ังช่อื ไฟล์  คลิกปมุ่ Save 3. ตัง้ ชอ่ื ไฟลท์ ต่ี ้องการ 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 16 Headings (CSS) : กําหนดคุณสมบัตขิ อง ข้อความที่เปน็ หวั เรื่องของเว็บเพจ (HTML heading) รปู ที่ 1.18 แสดงภาพการตั้งค่าในหมวด Headings(CSS) Title/Encoding : ใชก้ าํ หนดหัวเรอ่ื งของเว็บ เพจและกาํ หนดชุดของตวั อกั ษรที่ใช้ รูปที่ 1.19 แสดงภาพการตงั้ ค่าในหมวด Tiltle/Encoding Tracing 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-serif 3. 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 28 6. ภาพทีบ่ นั ทกึ ในรูปแบบ 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 Text 4. หากตอ้ งการขน้ึ บรรทัดใหม่ โดยใหร้ ะยะหา่ งระหว่างบรรทดั เทา่ เดิม ควรกดปมุ่ ใด ก. <Enter> ข. <Shift> + <Enter> ค. <Ctrl> + <Enter> ง. <Alt> + <Enter> .

เอกสารประกอบการเรียน เรื่อง เวบ็ สวยดว้ ย Dreamweaver 30 5. Alternate Text คอื การกาํ หนดคา่ ใด ก. การกาํ หนดข้อความแทนภาพ ข. การกําหนดขอ้ ความเสียง ค. การกําหนดข้อความบรรยายใตภ้ าพ ง. การกําหนดข้อความปรากฏเวลาเมาสอ์ ย่เู หนอื ภาพ 6. ข้อใดเปน็ การตง้ั ช่ือไฟลท์ ถ่ี ูกตอ้ ง ก. @hotmail.html ข. Page-1.html ค. number_1.html ง. Food&Page.html 7. การเรม่ิ ตน้ สร้างเวบ็ ไซต์ ขอ้ ใดเป็นสง่ิ ทค่ี วรกระทําเปน็ อนั ดบั แรก ก. การออกแบบหน้าเว็บเพจ ข. การเลอื กโปรแกรมสาํ หรับสรา้ งเวบ็ ไซต์ ค. การกาํ หนดโครงสร้างโฟลเดอรข์ องเวบ็ ไซต์ ง. การตัง้ ค่าให้โปรแกรม 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 39 6. ภาพที่บันทึกในรูปแบบ 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