หนงั สือเรยี นรายวชิ าเพ่มิ เตมิ ชนั้ มัธยมศึกษา กลุ่มสาระการเรยี นรู้การงานอาชพี และเทคโนโลยี ตามหลกั สตู รแกนกลางการศึกษาข้ันพ้นื ฐาน พทุ ธศักราช ๒๕๕๑ ผเู้ รยี บเรียง นายวเิ ชียร วสิ ุงเร ผตู้ รวจ นายพฒั พงษ์ อมรวงศ์ นายวิวัฒน์ สวุ นนั ทวงศ์ นายภชุ งค์ จนั ทร์เปล่ง บรรณาธิการ นางสาวรงุ่ ทวิ า ศิรินารารัตน์
หนังสือเรยี นรายวชิ าเพ่ิมเตมิ ช้ันมธั ยมศกึ ษา การใชโ้ ปรแกรม Adobe Dreamweaver CS6 พิมพค์ ร้งั ท่ี ๑ จำนวน ๕,๐๐๐ เลม่ ผเู้ รยี บเรียง นายวเิ ชยี ร วิสงุ เร ผตู้ รวจ นายพฒั พงษ์ อมรวงศ์ นายวิวฒั น์ สุวนนั ทวงศ์ นายภุชงค์ จันทรเ์ ปลง่ บรรณาธิการ รุ่งทิวา ศริ นิ ารารัตน์ กลุ่มสาระการเรียนรกู้ ารงานอาชพี และเทคโนโลยี ตามหลกั สตู รแกนกลางการศึกษาข้ันพน้ื ฐาน พทุ ธศักราช ๒๕๕๑ ราคา ๙๙ บาท ขอ้ มลู ทางบรรณานุกรมของหอสมุดแห่งชาติ วเิ ชียร วิสงุ เร. หนงั สือเรียนรายวิชาเพ่มิ เติม ชัน้ มธั ยมศึกษา การใชโ้ ปรแกรม Adobe Dreamweaver CS6.-ปทุมธานี : มีเดยี อนิ เทลลเิ จนซ์ เทคโนโลย,ี ๒๕๕๘.. ๒๕๖ หน้า. ๑. การใช้โปรแกรมคอมพวิ เตอร์ I. ชือ่ เรื่อง ISBN 9(e7-8b-o6o1k6)-977381-96-1562--5071-009-1 จดั พมิ พ์และจดั จำหน่ายโดย บรษิ ัท มเี ดีย อินเทลลิเจนซ์ เทคโนโลยี จำกัด Media Intelligence Technology Co.,Ltd. ๔๙/๘๓ หมู่ ๗ ต.คลองสอง อ.คลองหลวง จ.ปทุมธานี ๑๒๑๒๐ โทรศพั ท์ ๐-๒๕๑๖-๕๖๙๐-๑ โทรสาร ๐-๒๕๑๖-๕๖๙๒ เว็บไซต์ : www.mitmedia.com อีเมล : [email protected] ออกแบบปกและรูปเล่ม : KanomDesign Studio พมิ พท์ ่ี : บรษิ ัท มไอีเดดียอิ อลนิ เดทิจลติลอเิ จลนพซ์รเิ้นททคโ์ จนำโลกยัดี จาํ กดั ๕๒ ซอยเอกชัย ๖๙ แขวงบางบอน เขตบางบอน กรุงเทพมหานคร ๑๐๑๖๐
คำนำ ปัจจบุ นั การสื่อสารผ่านระบบเครือขา่ ยอนิ เทอรเ์ น็ตมคี วามสำคัญกับการดำเนินชีวติ ของคนเรามาก โดยเฉพาะอยา่ งยงิ่ ในสงั คมเมอื งทต่ี อ้ งใชค้ อมพวิ เตอรห์ รอื อปุ กรณค์ อมพวิ เตอร์ แบบพกพาอื่นๆ เพื่อการติดต่อส่ือสารท้ังในด้านการประกอบอาชีพ การศึกษา และการ อำนวยความสะดวกตา่ งๆ การสร้างหรือพัฒนาเว็บไซต์เพ่ือเผยแพร่ข้อมูลผ่านอินเทอร์เน็ตมีความสำคัญมาก เพราะเปน็ ชอ่ งทางการสอื่ สารทส่ี ามารถสง่ ผา่ นขอ้ มลู ไดใ้ นปรมิ าณมาก รวดเรว็ และประหยดั คา่ ใชจ้ า่ ย ประกอบกบั เทคโนโลยอี นิ เทอรเ์ นต็ พฒั นาไปมากทำใหก้ ารสรา้ งและพฒั นาเวบ็ ไซต ์ ทำได้ง่าย จึงนับเป็นช่องทางการส่ือสารหลักอย่างหน่ึงของคนในสังคมยุคเทคโนโลย ี สารสนเทศ การสรา้ งเว็บไซตม์ เี ครอื่ งมือหลายอยา่ งให้เลอื กใช้ เช่น ภาษา HTML, WordPress, Joomla และ Dreamweaver เป็นต้น โดยแต่ละโปรแกรมก็มีคุณสมบัติเฉพาะที่สามารถ สร้างเวบ็ ไซตไ์ ด้อยา่ งสวยงาม สะดวก และรวดเร็ว โปรแกรม Dreamweaver เปน็ โปรแกรมสรา้ งเวบ็ ไซตท์ ไ่ี ดร้ บั ความนยิ มมากโปรแกรม หน่ึง เนื่องจากมีพัฒนาการมาอย่างยาวนาน ทำให้มีคุณสมบัติท่ีโดดเด่นหลายประการ มีเคร่ืองมอื ใหม่ๆ ให้ใช้สรา้ งเวบ็ ได้ทันสมัยอยเู่ สมอ หนังสือ การใช้โปรแกรม Adobe Dreamweaver CS6 เล่มน้ี เรียบเรียงข้ึนด้วย ความมุ่งหมายที่จะให้เป็นคู่มือการเรียนรู้และฝึกทักษะการสร้างเว็บไซต์ข้ันพื้นฐาน จึง ออกแบบเนอื้ หาใหง้ า่ ยตอ่ การเรยี นรู้ มขี นั้ ตอนการออกแบบและสรา้ งเวบ็ ไซตต์ งั้ แตเ่ บอ้ื งตน้ ไป จนสามารถอัพโหลดเว็บไซต์ข้ึนสู่อินเทอร์เน็ต สามารถเรียนรู้และฝึกปฏิบัติตามได้ด้วย ตนเอง และนำความรู้นไี้ ปสรา้ งเว็บไซต์ได้อย่างมืออาชีพ จึงหวังเป็นอย่างยิ่งว่า หนังสือเล่มน้ีจักเป็นประโยชน์แก่ผู้เรียน ผู้สอน และผู้สนใจ ทั่วไป นายวิเชยี ร วสิ ุงเร [email protected] [email protected]
สารบญั 7 8 หนว่ ยที่ 1 พน้ื ฐานการสร้างเวบ็ ไซต ์ 14 ความรพู้ ้นื ฐานเกย่ี วกบั อินเทอร์เน็ต 17 กระบวนการพัฒนาเวบ็ ไซต์ 22 หลกั การออกแบบเวบ็ ไซต์ 25 เทคนคิ การออกแบบเวบ็ ไซต์ 26 กิจกรรม 28 การวัดและประเมนิ ผลการเรยี นรู้ หนว่ ยที่ 1 29 33 หน่วยที่ 2 ความรทู้ ่ัวไปเก่ยี วกับโปรแกรม Dreamweaver CS6 42 ความเปน็ มาของโปรแกรม Dreamweaver CS6 52 การเปดิ ใช้งานโปรแกรม 54 การเรมิ่ ต้นสร้างเว็บไซตแ์ ละเวบ็ เพจ 55 การบนั ทึกและเปดิ เว็บเพจ 57 การทดสอบเว็บเพจกับเว็บเบราว์เซอร ์ 58 การปดิ เอกสารและออกจากโปรแกรม 60 กิจกรรม 61 การวัดและประเมนิ ผลการเรียนรู้ หน่วยที่ 2 67 70 หนว่ ยท่ี 3 การสรา้ งและจัดรปู แบบข้อความในเว็บเพจ 71 การปรบั เปลยี่ นภาษา 75 การพิมพข์ อ้ ความในเวบ็ เพจ 82 การเลือกและแก้ไขขอ้ ความ 84 การกำหนดรปู แบบข้อความ 84 การจัดรปู แบบขอ้ ความ 86 การนำเขา้ ข้อความจากโปรแกรมอนื่ 87 กิจกรรม 89 การวดั และประเมินผลการเรียนรู้ หนว่ ยท่ี 3 91 94 หน่วยที่ 4 การใชภ้ าพกราฟกิ ในเวบ็ เพจ 102 ลกั ษณะของภาพกราฟิกในเวบ็ เพจ 103 การเตรยี มภาพ 106 การใสร่ ูปภาพในเว็บเพจ 107 การปรับแต่งรปู ภาพ 109 กิจกรรม การวัดและประเมินผลการเรียนรู้ หน่วยท่ี 4 หน่วยที่ 5 การใช้ตารางในเวบ็ เพจ การสรา้ งตารางบนเวบ็ เพจ การใส่ข้อมูลในตาราง
การปรับขนาดของตาราง 111 การเลือกตาราง 112 การปรับแต่งรายละเอยี ดของตาราง 114 การจัดเรียงข้อมลู ในตาราง 115 การจดั การกับแถว คอลัมน์ และเซลล์ 116 การตกแต่งตาราง 121 การสร้างตารางซอ้ นตาราง 123 กิจกรรม 124 การวดั และประเมินผลการเรยี นรู้ หนว่ ยท่ี 5 125 127 หนว่ ยท่ี 6 การเช่อื มโยงเวบ็ เพจ (Links) 128 การเชื่อมโยงในหน้าเวบ็ เพจเดียวกนั 130 การเชื่อมโยงภายในเว็บไซต์เดียวกัน 132 การเชอ่ื มโยงไปยังเวบ็ ไซต์อ่ืน 133 การเชือ่ มโยงไปยังอีเมล 135 การเชื่อมโยงไปยังไฟล์ดาวน์โหลด 136 การเชื่อมโยงดว้ ย Map Link 137 การแกไ้ ขการเชือ่ มโยงเว็บเพจ 138 การเชอ่ื มโยงภาพดว้ ยเทคนคิ Rollover Image 140 การกำหนดคณุ สมบตั ิการเชอื่ มโยง 141 กิจกรรม 142 การวดั และประเมนิ ผลการเรยี นรู้ หนว่ ยที่ 6 144 145 หนว่ ยที่ 7 การจดั แบ่งเว็บเพจดว้ ยเฟรมเซต (Frameset) 150 การสรา้ งเฟรมเซต 152 การจดั การเฟรมเซต 154 การแก้ไขรายละเอยี ดเฟรมเซต 155 การบันทึกเฟรมเซต 157 การเชื่อมโยงเฟรมเซต 159 การสร้างเน้ือหาในเฟรม 160 กจิ กรรม 162 การวัดและประเมินผลการเรียนรู้ หน่วยท่ี 7 163 167 หน่วยที่ 8 การสรา้ งเอพี อิลิเมนต์ (AP Element) 169 การสร้างเอพี อลิ ิเมนต์ (AP Element) 172 การปรบั แตง่ รายละเอยี ดเอพี อลิ ิเมนต์ 174 การใชง้ านพาเนล เอพี อิลเิ มนต์ (AP Element) 175 การสร้างเอพี อลิ ิเมนต์ซ้อนกนั 175 การแปลงเอพี อิลิเมนต ์ กจิ กรรม การวัดและประเมนิ ผลการเรยี นรู้ หน่วยที่ 8
หน่วยท่ี 9 การสรา้ งฟอร์ม (Form) 177 หลักการทำงานของฟอร์มและเคร่ืองมอื ในการสรา้ งฟอร์ม 178 การสร้างฟอร์มและฟิลด์กรอกขอ้ ความ 180 การสรา้ ง List/Menu 182 การสรา้ งพน้ื ทร่ี บั ขอ้ ความ 184 การสรา้ ง Radio Button 185 การสรา้ ง Checkbox 186 การสร้าง File Field 188 การสร้างปุ่มมาตรฐาน (Button) 189 การสรา้ งภาพในฟอร์ม 190 การสร้าง Jump Menu 190 การตรวจสอบการป้อนข้อมลู ของฟอรม์ 191 กิจกรรม 193 การวัดและประเมินผลการเรยี นรู้ หนว่ ยที่ 9 193 หนว่ ยที่ 10 การสรา้ งมัลติมเี ดยี (Multimedia) บนเว็บเพจ 195 ลักษณะของมัลตมิ เี ดียบนเวบ็ เพจ 196 การใชง้ านมลั ติมเี ดยี ประเภท SWF 197 การใช้งานมีเดยี ไฟล์ FLV (Flash Video) 199 การใช้งาน Shockwave 201 การใช้ไฟลเ์ สียงในเว็บเพจ 202 กิจกรรม 204 การวัดและประเมนิ ผลการเรียนรู้ หนว่ ยท่ี 10 205 หน่วยที่ 11 การใช้งาน Cascading Style Sheets (CSS) 207 208 และ Behaviors 216 การสรา้ งและใช้งาน Cascading Style Sheets หรือ CSS 219 การสรา้ ง Drop down Menu 229 การใชง้ าน Behaviors 229 กจิ กรรม การวดั และประเมนิ ผลการเรียนรู้ หนว่ ยท่ี 11 231 232 หน่วยท่ี 12 การอพั โหลดเว็บไซตเ์ ขา้ สู่อนิ เทอรเ์ นต็ 234 ช่อื โดเมน (Domain Name) 243 การจดทะเบยี นโดเมนเนม 247 การจัดหาพ้นื ทฝ่ี ากเวบ็ ไซตบ์ นเวบ็ เซิรฟ์ เวอร์ 250 การอพั โหลดเขา้ สู่เว็บเซิรฟ์ เวอร์ 251 กจิ กรรม 253 การวัดและประเมินผลการเรยี นรู้ หน่วยที่ 12 256 ข้อสอบวัดและประเมินผลการเรยี นปลายภาค บรรณานุกรม
หนว่ ยที่ 1 พนื้ ฐานการสร้างเวบ็ ไซต ์ สาระการเรียนรู้ 1. ความรพู้ น้ื ฐานเกี่ยวกับอินเทอร์เน็ต 2. กระบวนการพฒั นาเว็บไซต ์ 3. หลกั การออกแบบเว็บไซต์ 4. เทคนคิ การออกแบบเวบ็ ไซต์ ผลการเรียนรู้ 1. ความรพู้ นื้ ฐานเก่ียวกบั อินเทอรเ์ น็ต 2. กระบวนการพฒั นาเวบ็ ไซต ์ 3. หลกั การออกแบบเว็บไซต์ 4. เทคนคิ การออกแบบเวบ็ ไซต ์
8 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 1. ความรพู้ ้นื ฐานเกย่ี วกับอนิ เทอร์เนต็ ในชีวิตประจำวันเรามักเกี่ยวข้องกับอินเทอร์เน็ตเสมอ ไม่ว่าจะเป็นการใช้งาน โทรศัพท์เคล่ือนที่แบบสมาร์ทโฟน การใช้งานแท็บเล็ต การใช้โน้ตบุ๊ค และเครื่อง คอมพิวเตอร์แบบต้ังโต๊ะท่ัวไปซ่ึงมักจะเชื่อมโยงกับเครือข่ายอินเทอร์เน็ต อินเทอร์เน็ต จึงเปน็ เคร่อื งมอื หรืออุปกรณ์ช่วยการทำงานท่สี ำคญั มากในโลกยุคสารสนเทศเช่นปจั จุบัน ในยุคเร่ิมต้นที่คอมพิวเตอร์เกิดขึ้นใหม่ๆ น้ัน อินเทอร์เน็ตยังไม่มี คอมพิวเตอร์ที่ใช้ งานในยุคนั้นทำงานเฉพาะแต่ละเคร่ือง การโอนถ่ายข้อมูลจากเครื่องหนึ่งไปยังอีกเครื่อง หนง่ึ ทำไดโ้ ดยใชอ้ ุปกรณบ์ นั ทึกขอ้ มลู เชน่ แผ่นดิสก์ แถบบันทกึ ข้อมูล เป็นต้น ตอ่ มาไดม้ ี การคิดค้นระบบเครือข่ายคอมพิวเตอร์ (Computer Network) ขึ้นมาโดยการเชื่อมโยง คอมพิวเตอร์ 2 เคร่ืองหรือหลายๆ เครื่องเข้าด้วยกันโดยใช้สื่อนำสัญญาณชนิดต่างๆ เช่น สายเคเบิล ทำใหก้ ารเคลื่อนย้าย โอน แบง่ ปันขอ้ มลู ทำไดง้ ่ายขน้ึ รปู ท่ี 1.1 เครือขา่ ยคอมพิวเตอร์ ในระยะแรกระบบเครือข่ายคอมพิวเตอร์จะเป็นเครือข่ายขนาดเล็กภายในหน่วยงาน เดยี วกัน หรือ ครอบคลุมพื้นทีไ่ มไ่ กลกันมากเกนิ ไป เชน่ ภายในห้องเดียวกนั ภายในอาคาร เดียวกัน หรือภายในสำนักงานเดียวกัน ประโยชน์ที่ได้รับคือ ช่วยให้แต่ละแผนกสามารถ แบ่งปันข้อมูลและทำงานร่วมกันได้สะดวกมากยิ่งขึ้น ต่อมาได้นำเอาระบบย่อยของแต่ละ หน่วยงานเช่ือมโยงเข้าเป็นเครือข่ายเดียวกัน ทำให้ระบบเครือข่ายคอมพิวเตอร์ขยายวง กว้างออกไปเป็นเครือข่ายระหว่างเมืองและในที่สุดก็ขยายครอบคลุมไปทั่วท้ังโลกอย่างใน ปจั จบุ นั อินเทอร์เน็ต (Internet) เป็นเครือข่ายคอมพิวเตอร์สาธารณะขนาดใหญ่ท่ีสุดในโลก ซึง่ รวมเอาเครอื ข่ายคอมพิวเตอรย์ อ่ ยๆ จำนวนมากมาต่อเชื่อมเขา้ ด้วยกันภายใตม้ าตรฐาน เดยี วกัน ทำใหอ้ นิ เทอรเ์ นต็ ขยายตัวได้อย่างรวดเร็วและครอบคลุมทกุ ประเทศท่วั โลก
หน่วยที่ 1 พ้นื ฐานการสรา้ งเว็บไซต์ • 9 ข้อกำหนดซ่ึงประกอบด้วยกฎต่างๆ สำหรับรูปแบบการสื่อสารเพ่ือให้การติดต่อ สื่อสารในระบบเครือข่ายทำงานได้ด้วยกันทั้งระบบ ท่ีสำคัญประกอบด้วย อินเทอร์เน็ต โปรโตคอล (Internet Protocol – IP) ซิมเปลิ เมล ทรานซเ์ ฟอร์ โปรโตคอล (Simple Mail Transfer Protocol – SMTP) เอชทีทีพี (HyperText Transfer Protocol - HTTP) ป็อป (Post Office Protocol - POP) และ เอฟทีพี (File Transfer Protocol : FTP:) ด้วยข้อกำหนดหรือมาตรฐานดังกล่าวทำให้คอมพิวเตอร์ท่ัวโลกสามารถส่ือสารซ่ึงกัน และกันได้คล้ายกับเป็นภาษากลางในการสื่อสารระหว่างคอมพิวเตอร์ ซ่ึงถือว่าเป็นแพล็ต ฟอรม์ (Plateform) ของเวลิ ด์ ไวด์ เว็บ (World Wide Web – WWW) นนั่ เอง รูปที่ 1.2 ระบบเครือข่ายอินเทอรเ์ น็ต (Internet Network) อินเทอร์เน็ตเกิดขึ้นครั้งแรกในปี พ.ศ. 2512 โดยองค์กรทางการทหารสหรัฐอเมริกา ชือ่ U.S Defense Department ซง่ึ มวี ตั ถปุ ระสงค์หลักเพอ่ื ใหเ้ ครือขา่ ยมคี วามมน่ั คง ไมเ่ สีย หาย แม้ส่วนใดส่วนหนึ่งของระบบเครือข่ายถูกทำลาย เครือข่ายที่ได้รับการพัฒนาขึ้นมาน้ี ชือ่ ว่า อาร์พาเน็ต (ARPAnet) ยอ่ มาจาก Advance Research Project Agency ซงึ่ ถือวา่ เปน็ ต้นกำเนดิ ของอินเทอรเ์ นต็ อินเทอร์เน็ตมีการให้บริการท่ีหลากหลาย เช่น การรับส่งอีเมล (email) การรับส่ง แฟ้มข้อมลู (ftp) การคน้ หาขอ้ มูล (Search) และเครอื ข่ายสังคม (Social Network) เป็นตน้ ด้วยบริการที่มีอยู่จำนวนมากทำให้อินเทอร์เน็ตได้รับความนิยมอย่างมากและแพร่หลายไป ทวั่ โลก 1.1 ลกั ษณะของเวิลด์ ไวด์ เวบ็ (World Wide Web – WWW) เวิลด์ ไวด์ เวบ็ (World Wide Web – WWW) หรอื เรยี กยอ่ ๆ วา่ เว็บ (Web) เป็น อินเทอร์เน็ตชนิดหนึ่งท่ีอยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วยข้อความ
10 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 (Text) ภาพ (Graphic) เสียง (Sound) และ ภาพเคล่ือนไหว (Movie) เป็นต้น ผู้ใช้ทั่วไป สามารถเขา้ ไปใชเ้ วบ็ ไซตไ์ ดง้ า่ ยและไดร้ บั ขอ้ มลู หลากหลาย ปจั จบุ นั ถา้ กลา่ วถงึ อนิ เทอรเ์ นต็ คนทว่ั ไปจะเขา้ ใจวา่ หมายถงึ เวบ็ ทง้ั ทแ่ี ทจ้ รงิ แลว้ เวบ็ เปน็ สว่ นหนงึ่ ของอนิ เทอรเ์ นต็ เทา่ นนั้ อย่างไรก็ตาม ความนิยมในการใช้เว็บมีมาก คนทั่วไปมักจะละเลยการพัฒนาอินเทอร์เน็ต ในสว่ นอืน่ ๆ เวิลด์ ไวด์ เว็บ เป็นผลงานการคิดค้นและสร้างข้ึนโดย นกั คอมพวิ เตอรช์ าวองั กฤษชอื่ เซอร์ ทมิ โมที จอหน์ ทมิ เบอรเ์ นอรส์ – ลี (Sir Timothy John TimBerners –Lee) เมือ่ ปี 2533 และเริม่ ออนไลน์คร้ังแรกเม่ือวันที่ 6 สิงหาคม 2534 ผ่านเว็บเซิร์ฟเวอร์ และเว็บไซต์ของเซิร์น (CERN) หรือ องค์กรวิจัยนิวเคลียร์แห่ง ยโุ รป โดยขณะนน้ั ลที ำงานอยู่ท่ีเซริ น์ หลักการทำงานของเว็บประกอบด้วย 2 ส่วน คือ สว่ นทเ่ี ปน็ รูปที่ 1.3 เซอร์ ทมิ โมที จอห์น ทิมเบอร์เนอร์ส – ล ี เคร่ืองส่งข้อมูล เรียกว่า เคร่ืองให้บริการหรือเซิร์ฟเวอร์ (Server) และส่วนท่ีเป็นเคร่ืองรับข้อมูลหรือไคลแอนด์(Client) โดยที่เมื่อสร้างเว็บไซต์เสร็จแล้วก็นำ เว็บไซต์ไปบันทึกไว้ท่ีเคร่ืองให้บริการ เม่ือผู้ใช้ต้องการอ่านข้อมูลก็ต่อเชื่อมเข้าสู่ระบบและ ดาวน์โหลดขอ้ มูลมาไว้ในเครื่องรับขอ้ มูลหรือคอมพวิ เตอร์ไคลแอนด์ 1.2 เวบ็ ไซต์ (Website) และเว็บเพจ (Webpage) เอกสารหรือส่วนที่ติดต่อกับผู้ใช้ในเว็บ เรียกว่า เว็บเพจ (Webpage) หมายถึง เอกสารหน่งึ หนา้ การใช้เวบ็ ก็คอื การเปิดอา่ นหรอื เปดิ ใช้เวบ็ เพจแตล่ ะหนา้ เวบ็ เพจสรา้ งขึน้ ด้วยภาษาคอมพิวเตอร์ เช่น ภาษา HTML, ASP, PHP,JAVA ฯลฯ โดยสงั เกตประเภทของ ภาษาไดจ้ ากนามสกลุ ของไฟล์ เช่น ภาษา HTML นามสกุลจะเป็น .html หรือ .htm ภาษา ASP นามสกลุ ไฟลเ์ ปน็ .asp ภาษา PHP นามสกลุ ไฟล์เปน็ .php เปน็ ต้น เมื่อนำเว็บเพจหลายๆ หน้ามารวมกัน และระบุท่ีอยู่ในอินเทอร์เน็ตหรือยูอาร์แอล (Uniform Resource Locator – URL) ใหก้ บั เวบ็ เพจกลมุ่ น้ันจะเรยี กว่าเว็บไซต์ (Website) เม่ือเปิดเว็บไซต์ขึ้นมาจะพบกับหน้าแรกของเว็บไซต์ ที่เรียกว่า โฮมเพจ (Homepage) ซ่ึงเป็นหน้าท่ีสำคัญที่สุดและเป็นหน้าที่จะเช่ือมโยงไปยังเว็บเพจและ เวบ็ ไซต์อื่นๆ ต่อไป
หนว่ ยท่ี 1 พ้นื ฐานการสรา้ งเวบ็ ไซต์ • 11 รูปท่ี 1.4 ตวั อยา่ ง URL : www.mitmedia.com 1.3 โดเมนเนม (Domain Name) การเช่ือมตอ่ อนิ เทอรเ์ น็ตจะต้องกำหนดท่ีอย่หู รอื แอดเดรสของผ้ใู ช้งาน เรยี กว่า ไอพี แอดเดรส (IP Address) เพ่ือใช้ในการอ้างถึงตำแหน่งที่อยู่ของคอมพิวเตอร์แต่ละเคร่ือง เชน่ 158.108.2.71 เป็นต้น ไอพี แอดเดรสเปน็ ระบบตวั เลขทำให้จำยาก มโี อกาสจำผดิ ได้ และไม่ได้สื่อความหมายในระบบอินเทอร์เน็ต จึงได้มีการตั้งชื่อแบบง่ายขึ้นเรียกว่า ระบบ โดเมนเนม หรอื ดีเอน็ เอส (DNS – Domain Name System) เป็นระบบท่แี ปลงตวั เลขไอพี แอดเดรสให้เป็นช่ือที่อ่านเข้าใจง่ายและสอดคล้องกับช่ือองค์กรหรือหน่วยงานของผู้เป็น เจ้าของ เชน่ mitmedia.com (เว็บไซต์บริษัทมีเดียฯ) Sanook.com (เวบ็ ไซตส์ นกุ ดอทคอม) และ moe.go.th (เว็บไซตก์ ระทรวงศึกษาธกิ าร) เป็นตน้ 1.4 เวบ็ เบราว์เซอร์ (Web Browser) เว็บ เบราว์เซอร์ (Web Browser) คือ โปรแกรมที่ใช้สำหรับเปิดเว็บเพจหรือรับส่ง ข้อมูลตามท่ีเครื่องลูกข่ายร้องขอ เมื่อเช่ือมต่อเข้าสู่อินเทอร์เน็ต และเปิดเบราว์เซอร์ๆ จะ ดึงขอ้ มูลที่รอ้ งขอมาจากเคร่ืองเซริ ฟ์ เวอร์เพ่อื โอนขอ้ มูลมาแสดงผลยงั เคร่ืองของเรา เวบ็ เบราว์เซอร์จะเข้าใจภาษา HTML ซง่ึ เป็นภาษามาตรฐานของเว็บ เวบ็ เบราวเ์ ซอรท์ ไ่ี ดร้ บั ความนยิ มในปจั จบุ นั มหี ลายโปรแกรม เชน่ Microsoft Internet Explorer หรือ IE ของบริษัท ไมโครซอฟต์ Mozilla Firefox ของ โอเพ่นซอร์ส Chrome ของ Google เป็นตน้
12 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 รปู ที่ 1.5 Microsoft Internet Explorer หรือ IE ของบริษัท ไมโครซอฟต ์ รูปท่ี 1.6 Mozilla Firefox ของ โอเพน่ ซอรส์ รปู ที่ 1.7 Chrome ของ Google การใช้งานเว็บไซต์จะต้องผ่านเว็บ เบราว์เซอร์ ดังนั้น ผู้ใช้ควรศึกษาความรู้เพ่ิมเติม เกย่ี วกบั เวบ็ เบราวเ์ ซอรท์ ใี่ ชง้ านอยอู่ ยา่ งละเอยี ดเพอ่ื ใหเ้ ขา้ ถงึ เวบ็ ไซตไ์ ดเ้ ปน็ อยา่ งมปี ระสทิ ธภิ าพ
หนว่ ยท่ี 1 พืน้ ฐานการสรา้ งเวบ็ ไซต์ • 13 1.5 ภาษาเอชทีเอม็ แอลและเอ็กซเ์ อชทีเอม็ แอล (HTML และ XHTML) ภาษาเอชทีเอ็มแอล (HTML) ย่อมาจากคำว่า Hypertext Markup Language เป็น ภาษาที่ใช้สำหรับสร้างเว็บเพจ โดยจะได้รับการแปลหรือแสดงผลโดยเว็บ เบราว์เซอร์ ซ่ึง สามารถแสดงได้ทง้ั ขอ้ ความภาพ เสียง และภาพเคลอื่ นไหว การสรา้ งเวบ็ เพจดว้ ยภาษา HTML ใชโ้ ปรแกรมประมวลผลคำทวั่ ไป เชน่ Wordpad, Notepad และ Ms-Word เปน็ ต้น โดยปกตจิ ะนิยมใชโ้ ปรแกรม Notepad ซ่งึ ให้มาพร้อมกบั ระบบปฏบิ ัติการวินโดวส์ ทำให้ใช้งานและแกไ้ ขงานสะดวก รูปแบบโครงสร้างภาษา HTML ประกอบด้วย ส่วนเร่ิมต้นของคำสั่ง เรียกว่า Tag เปดิ และสว่ นจบของคำสั่ง เรียกว่า Tag ปดิ โดย Tag ปดิ จะมีเคร่ืองหมาย Slash (/) ดัง ตวั อย่าง รปู ท่ี 1.8 โครงสรา้ งภาษา HTML รูปที่ 1.9 แสดงผลด้วยเวบ็ เบราวเ์ ซอร์ ภาษา HTML จึงมีโครงสร้างท่ีง่าย เหมาะสำหรับผู้เร่ิมต้นสร้างเว็บเพจ และใช้งาน ร่วมกบั โปรแกรมสรา้ งเว็บเพจอ่นื ๆ เพื่อทำให้เว็บเพจสวยงามและมปี ระสทิ ธิภาพมากย่ิงขึน้
14 • การใช้โปรแกรม Adobe Dreamweaver CS6 เอ็กซ์เอชทีเอ็มแอล (XHTML) ย่อมาจากภาษาอังกฤษ Extensible HyperText Markup Language เปน็ ภาษามารก์ อัพทม่ี ลี ักษณะการใช้งานเหมือนภาษา HTML แต่จะมี ความเขม้ งวดในเร่อื งโครงสร้างภาษา โดยมี syntax สอดคลอ้ งกบั XML เนอื่ งจาก HTML นั้นใช้โครงสรา้ งของ SGML ทคี่ ่อนขา้ งยดื หยุ่น ในขณะท่ี XHTML น้ันพฒั นาจาก XML ซง่ึ เป็นภาษาท่ีคล้ายกับ SGML แต่เข้มงวดมากกว่า ภาษา XHTML สามารถแปลง HTML เดมิ ใหม้ าอยู่ในโครงสรา้ งของ XML กไ็ ด ้ จดุ ประสงคก์ ารออกแบบเอ็กซเ์ อชทีเอม็ แอล 1. พยายามรกั ษาคณุ สมบัติของ XML ใหม้ ากท่สี ุด 2. ลดการแสดงผล โดยหนั ไปใช้ style sheet และเพม่ิ โครงสร้างภาษาแทน 3. จำกัดใหอ้ ย่ภู ายใต้ข้อกำหนด XML(Well form) ทำให้การใช้งานงา่ ยขนึ้ 4. การเข้าถงึ ขอ้ มลู ง่ายข้ึน 5. มีมาตรฐานทางภาษา 6. ลดข้อจำกัดทางอปุ กรณล์ ง ทำให้ไมต่ อ้ งสรา้ งภาษาสำหรับแตล่ ะอุปกรณ ์ 7. ลดการใชง้ าน script โดยเพ่มิ ความสามารถทีต่ วั XHTML 8. สามารถใช้งานรว่ มกับ semantic web 2. กระบวนการพฒั นาเวบ็ ไซต ์ การทจี่ ะสร้างและพฒั นาเว็บเพจพร้อมกับนำเวบ็ ไซต์เข้าสูร่ ะบบเวิลด์ ไวด์ เวบ็ ใหค้ น อื่นเขา้ มาเยย่ี มชมได้นนั้ มีกระบวนการทผ่ี ู้พฒั นาเวบ็ ไซต์จะต้องศึกษาและปฏบิ ตั ติ าม ดงั นี ้ 2.1 วางแผนการทำงาน การวางแผนการทำงานเปรียบเสมือนเข็มทิศที่จะนำทางให้เรารู้ว่าควรจะเดินทางไป ในทศิ ทางใดเพ่อื ไม่ให้หลงทาง การสร้างเว็บไซต์ก็เช่นกันจำเป็นจะต้องวางแผนการทำงานให้รอบด้านก่อนท่ีจะเร่ิม ลงมือทำ โดยมหี ลักที่จะต้องกำหนดไว้ในแผนงาน ดังน ้ี 1. ระยะเวลาการทำงาน เป็นการกำหนดช่วงเวลาที่จะใช้ในการสร้างเว็บ อาจ กำหนดเป็นรายวันหรือรายสัปดาห์ก็ได้ข้ึนอยู่กับองค์ประกอบด้านอื่นๆ ด้วย เช่น ความ ยากงา่ ยของเวบ็ ไซต์ จำนวนผ้รู ่วมงาน และประสิทธภิ าพการทำงานของแตล่ ะคน ฯลฯ 2. ทีมงานหรือผู้ร่วมงาน ปกติการสร้างเว็บจะต้องทำงานเป็นทีม อย่างน้อยต้องม ี ผู้เช่ียวชาญ 3 ฝ่าย คือ ผู้เชี่ยวชาญด้านภาษา HTML หรือโปรแกรมสร้างเว็บเพจ
หน่วยที่ 1 พืน้ ฐานการสรา้ งเว็บไซต์ • 15 ผเู้ ช่ยี วชาญดา้ นการออกแบบและตกแต่งภาพ และผเู้ ช่ยี วชาญดา้ นเน้อื หาหรือบรรณาธิการ 3. งบประมาณ เป็นการกำหนดค่าใช้จา่ ย เชน่ คา่ จา้ ง ค่าเดนิ ทาง คา่ อุปกรณ์ ฯลฯ ในกรณีท่ีจ้างทำเว็บเพจ ผู้รับจ้างจะเสนอราคามา โดยมีท้ังแบบระบุเป็นหน้าและแบบเหมา รวม 4. อุปกรณ์หรือเคร่ืองมือช่วยงาน กรณีท่ีสร้างเว็บเพจเอง จะต้องมีอุปกรณ์ท้ัง ฮาร์ดแวร์และซอฟต์แวร์ เช่น เครื่องคอมพิวเตอร์จะมีอุปกรณ์ เช่น เคร่ืองคอมพิวเตอร์ เคร่ืองสแกนเนอร์ และรูปภาพประกอบเวบ็ เพจ เปน็ ตน้ 5. ปัญหาและอุปสรรค ในแผนการทำงานควรระบุปัญหาและอุปสรรคท่ีอาจเกิดข้ึน ซ่ึงจะส่งผลทำให้งานล่าช้าหรือผิดวัตถุประสงค์ เช่น ผู้ร่วมงานป่วยไม่สามารถมาทำงานได้ พรอ้ มท้ังหาแนวทางแกไ้ ขปญั หาไว้ล่วงหน้า การวางแผนการทำงานควรนำผู้ร่วมงานท้ังหมดมาประชุมร่วมกัน ระดมสมองแลก เปลี่ยนความคิดเห็นเพ่ือให้ได้แผนงานท่ีละเอียดที่สุด ตรงตามความต้องการมากท่ีสุด โดย อาจเขยี นลงบนกระดาษ หรือใชโ้ ปรแกรมตารางงาน เช่น เอ็กเซล เข้ามาชว่ ยงานกไ็ ด ้ แผนการทำงานทกุ ขน้ั ตอนจะตอ้ งสามารถนำไปปฏบิ ตั ไิ ด้จรงิ และประเมินผลงานได้ 2.2 การรวบรวมและวิเคราะหโ์ ครงสรา้ งข้อมูล การรวบรวมและวิเคราะห์ลักษณะโครงสร้างข้อมูล เป็นขั้นตอนหน่ึงท่ีต่อจากการ วางแผน กล่าวคือ เม่ือได้วางแผนงานเสร็จแล้ว ก็เป็นการนำแผนงานไปปฏิบัติ โดยการ รวบรวมข้อมูลท่ีจำเป็นต้องใช้ในการสร้างเว็บ ตามหัวข้อหรือเรื่องที่เลือกไว้ เช่น เว็บไซต์ การทอ่ งเท่ยี วของจังหวดั กค็ วรจะรวบรวมข้อมูลแหล่งทอ่ งเทยี่ วท่ีมใี นจังหวัดให้ไดค้ รบหรอื มากท่สี ดุ ทงั้ ดา้ นเนอ้ื หา ภาพ เสยี ง และ ภาพเคลือ่ นไหว เกบ็ รวบรวมเป็นไฟล์ขอ้ มลู หรอื ใสแ่ ฟม้ แยกเป็นหมวดหมู่ เพือ่ ความสะดวกในการนำมาใชง้ านได้อย่างรวดเรว็ - ขอ้ มูลข้อความ (Text) - ภาพถ่าย หรอื ภาพวาด - ข้อมลู เสยี ง - ขอ้ มูลภาพเคล่อื นไหว 2.3 การออกแบบและสรา้ งเว็บไซต ์ ออกแบบและสร้างเว็บเพจ เป็นขั้นตอนการนำเอาข้อมูลทั้งหมดมาสร้างเป็นเว็บไซต์ ด้วยภาษา HTML หรือ เคร่ืองมือการสร้างเว็บอื่นๆ หลักสำคัญในการออกแบบและสร้าง เว็บไซต์ คือ 1. กำหนดจดุ ประสงค์ของเว็บไซต์ โดยวางเปา้ หมายของผเู้ ขา้ ชมว่าจะเป็นกลุ่มใด เช่น เว็บไซต์ด้านการท่องเท่ียว เว็บไซต์ด้านเผยแผ่ธรรมะ เว็บไซต์ขายสินค้าโอทอป
16 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 เว็บไซต์ขายหนังสือเก่า ฯลฯ ซึ่งเว็บไซต์แต่ละประเภทจะมีกลุ่มคนท่ีสนใจอยู่กลุ่มหน่ึง ผู้สร้างเว็บไซต์ควรกำหนดลงไปให้ชัดเจนต้ังแต่แรกว่า ผู้ชมกลุ่มเป้าหมายหลักเป็นใคร จำนวนประมาณเท่าไร 2. เลือกเว็บเบราว์เซอร์ เป็นการเลือกเว็บเบราว์เซอร์ท่ีใช้แสดงผลเว็บไซต์ จะได้ กำหนดขนาดกวา้ ง ยาว และลักษณะการวางองค์ประกอบเวบ็ ให้สวยงาม แสดงผลได้เรว็ 3. วางโครงร่างของเว็บไซต์ กำหนดโครงร่างของเว็บไว้ว่าจะมีทั้งหมดกี่เว็บเพจ แตล่ ะเว็บเพจมเี น้อื หาอะไรบา้ ง ควรเขียนเปน็ แผนผังเวบ็ ไซต์ออกมาบนกระดาษ 4. ออกแบบหน้าตาของเวบ็ เปน็ ขน้ั ตอนการลงมอื สรา้ งเว็บเพจแต่ละหนา้ ตามท่ไี ด้ ออกแบบไว้ พรอ้ มกับทดสอบผา่ นเวบ็ เบราวเ์ ซอร์ (แบบ offline) เว็บไซต์จะสวยงาม น่าสนใจ หรือ นำเสนอเรื่องราวได้ดีเพียงใดก็ขึ้นอยู่กับการ ออกแบบ และการสรา้ งเวบ็ เปน็ หลกั 2.4 ทดสอบและปรบั ปรุงเว็บไซต ์ ทดสอบและปรับปรุงเว็บไซต์ การทดสอบในขั้นตอนนี้ หมายถึง การทดสอบแบบ ออฟไลน์ โดยท่ียังไม่ได้นำเว็บไซต์เข้าสู่อินเทอร์เน็ต แต่ก็สามารถแสดงผลได้เหมือนจริง ผ่านเว็บเบราว์เซอร์ เชน่ Chrome เพ่อื ตรวจสอบตัวอยา่ งเว็บทส่ี รา้ งไว้ เชน่ ขนาดตัวอักษร ขนาดภาพ การใช้สี ตาราง ฯลฯ วา่ เหมาะสมหรอื ไม่ พร้อมกบั ปรับปรงุ จนเป็นท่ีพอใจ 2.5 เผยแพร่ผ่านเว็บไซต์ เปน็ การเผยแพรเ่ ว็บไซตใ์ หค้ นทัว่ ไปรู้จัก หรอื เรียกวา่ การอพั โหลดขอ้ มูล (Upload) โดยเจ้าของเว็บจะต้องจดทะเบียนโดเมนเนม ซ่ึงสามารถจดได้กับผู้ให้บริการจดโดเมนเนม ท้ังของไทย และต่างประเทศ อัตราค่าบริการเป็นรายปี หรือรายสองปี หลังจากได้โดเมน เนมแล้ว เจ้าของเว็บจะต้องเช่าพ้ืนที่โฮสต์ (Host) ซึ่งเป็นผู้ให้บริการเว็บเซิร์ฟเวอร์โดยให้ เช่าเป็นรายป ี หลังจากได้โดเมนเนมและเช่าพ้ืนที่โฮสต์แล้ว ก็สามารถนำเว็บเพจอัพโหลดข้ึนส ู่ อินเทอร์เน็ต และประชาสัมพันธ์เว็บไซต์ให้กลุ่มเป้าหมาย และคนทั่วไปได้รู้จัก เช่น ประชาสัมพันธ์ผ่าน Search Engine ผ่าน Web Directories และอื่นๆ เช่น โฆษณาตาม หนงั สอื พิมพ์ โบชัวร์ ฯลฯ การทจี่ ะทำใหค้ นรบั รู้ และเขา้ มาใชบ้ รกิ ารเวบ็ ไซตไ์ ดม้ ากนนั้ จะตอ้ งมกี ารประชาสมั พนั ธ ์ ต่อเนื่องและใช้เวลาพอสมควร และถ้าจะให้ดีควรมีเคาน์เตอร์ (Counter) หรือ ตัวจดสถิต ิ ผเู้ ขา้ ชมด้วย กจ็ ะช่วยใหป้ ระเมนิ ไดว้ า่ เว็บไซตข์ องเราได้รับความสนใจมากน้อยเพยี งใด
หน่วยที่ 1 พ้นื ฐานการสรา้ งเวบ็ ไซต์ • 17 2.6 การพฒั นาเวบ็ ไซต ์ การพัฒนาเว็บไซต์ เป็นการอัพเดท (Update) หรือปรับปรุง เนื้อหา ภาพประกอบ เว็บไซต์ถือเป็นขั้นตอนสำคัญเพราะในโลกของอินเทอร์เน็ตน้ันมีการเปลี่ยนแปลงอย่าง รวดเร็วอยู่ตลอดเวลา ผู้ชมเว็บมักจะใช้เวลาในการค้นหาและเปิดผ่านเว็บไซต์ต่างๆ อย่าง รวดเรว็ หากพบวา่ เวบ็ ไซตข์ องเราไมไ่ ดเ้ ปลย่ี นแปลงหรือมขี อ้ มลู ใหมๆ่ เพมิ่ ขึน้ เลย ผูเ้ ข้าชม กจ็ ะลดจำนวนลงไปเรื่อยๆ จนกลายเปน็ เวบ็ ทไี่ ม่มคี นเขา้ มาเลยหรือเว็บทต่ี ายแล้ว ดังนั้น การปรับปรุงเว็บไซต์อยู่เสมออาจจะวันละครั้ง หรือสัปดาห์ละครั้ง โดยเพ่ิม ข้อมูล ข่าวสารใหม่ๆ อยู่เป็นประจำก็จะทำให้เว็บไซต์ทันสมัย ผู้คนเข้าชมเป็นประจำและ มากขึ้นจนพฒั นาเป็นเว็บไซตย์ อดนยิ มได้ในทส่ี ุด 3. หลักการออกแบบเวบ็ ไซต์ การออกแบบเว็บไซต์เป็นการกำหนดโครงสร้างท้ังหมดของเว็บไซต์ ว่าแต่ละหน้าจะ ประกอบด้วยเน้ือหาอะไรบ้าง มีภาพประกอบ ตาราง ฯลฯ ตลอดจนการเช่ือมโยงเว็บเพจ แตล่ ะหนา้ เข้าด้วยกัน 3.1 การกำหนดโครงสร้างเวบ็ ไซต์ การกำหนดโครงสรา้ งของเว็บไซตเ์ ป็นการออกแบบส่วนประกอบทง้ั หมดของเว็บไซต์ ท่ีต้องการให้ผู้เข้ามาเยี่ยมชมได้ทราบ เช่น เว็บไซต์ท้ังหมดจะมีกี่หน้า แต่ละหน้าจะม ี เน้ือหาอะไร เน้ือหาแต่ละส่วนจะเชื่อมโยงกันอย่างไร เปรียบเสมือนการเขียนหนังสือท่ีแบ่ง เน้อื หาออกเปน็ บทย่อยๆ แตล่ ะบทมีหัวข้อใหญ่และหัวขอ้ ย่อยเรยี งลำดับกันไป ตวั อยา่ ง เชน่ การออกแบบเวบ็ ไซตเ์ กย่ี วกบั สนิ คา้ ตกแตง่ บา้ น เขยี นโครงสรา้ งเวบ็ ไซต ์ ดงั น ้ี หนา้ หลัก (เม่ือเปดิ เว็บไซต์) หน้าโฮมเพจ หนา้ สนิ คา้ ใหม่ หน้าแคตตาลอ็ ก หนา้ แนะนำบรษิ ัท หนา้ สมคั รสมาชกิ หนา้ สินคา้ ชดุ รับแขก หน้าสินค้าชดุ เครอื่ งครวั หนา้ สนิ ค้าชุดเครอ่ื งนอน หนา้ สินคา้ ชดุ โคมไฟ หน้าสินค้าเครื่องสุขภัณฑ์ รูปที่ 1.10 โครงสรา้ งเวบ็ ไซต ์
18 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 โครงสร้างเว็บไซต์ดังกล่าวอาจเปล่ียนแปลงไปตามจุดประสงค์ของเว็บไซต์ เช่น เว็บไซต์ด้านท่องเท่ียว สถานศึกษา หน่วยงานราชการ ฯลฯ ก็จะมีโครงสร้างแตกต่างกัน ออกไป 3.2 การออกแบบหน้าเวบ็ เพจหลกั (Index.html) หน้าแรกของเว็บเพจถือเป็นหน้าสำหรับต้อนรับแขก เป็นหน้าตาของเว็บไซต์ เมื่อผู้ ชมเปิดเข้ามาก็จะพบกับหน้านี้เป็นอันดับแรก โดยปกติหน้าแรกจะมีองค์ประกอบหลัก คือ โลโกอ้ งคก์ ร แถบชื่อองคก์ ร รูปภาพ โฆษณา และแถบลงิ กเ์ ข้าส่เู วบ็ ไซต์ ดงั ตัวอยา่ ง โลโก ้ ช่อื บรษิ ทั หัวเร่ือง หรือโฆษณาผลิตภัณฑ์ หน้าแรก สนิ คา้ ใหม ่ แคตตาล็อก ข้อมลู องค์กร สมัครสมาชิก ภาพ ขอ้ ความ และเนอ้ื หา สว่ นทา้ ยประกอบดว้ ย เวบ็ ลงิ ก์ สารบญั เว็บไซต์ และหนา้ ลขิ สทิ ธิ์ (Copyright) บางเว็บไซต์อาจกำหนดให้หน้าแรก หรือหน้า Index.html เป็นหน้าแรกหรือหน้า โฮมเพจ (home.html) เลยกไ็ ด้ จากตัวอย่างได้วางเมนูสำหรับการเชื่อมโยงเข้าสู่เว็บเพจอ่ืนๆ ไว้ด้านบน เพ่ือความ สะดวก และใช้งานง่าย ส่วนตรงกลางอาจใช้ภาพสินค้าหรือภาพจุดเด่นขององค์กรเพื่อส่ือสารกับผู้ชม และ ดา้ นล่างเป็นภาพหมวดสินคา้ ตา่ งๆ ทผ่ี ู้ชมสามารถลงิ กเ์ ขา้ ไปได้ 3.3 การออกแบบหนา้ โฮมเพจ (home.html) หน้าโฮมเพจหรือหน้าแรกเป็นหน้าเริ่มต้นของเว็บไซต์ เป็นเสมือนหน้าสารบัญของ หนังสือท่ีจะบอกให้ผู้อ่านทราบว่าในแต่ละบทประกอบด้วยเรื่องอะไรบ้าง อยู่หน้าไหน การ จะเข้าสู่หน้าอื่นๆ จะต้องสร้างลิงก์หรือการเช่ือมโยงเอาไว้ โดยนำโครงร่างจากหน้า Index บางส่วนมาใช้ เชน่
หนว่ ยท่ี 1 พน้ื ฐานการสร้างเว็บไซต์ • 19 โลโก้ ชือ่ บรษิ ัท หัวเรื่อง หรือโฆษณาผลิตภณั ฑ ์ หนา้ แรก สนิ ค้าใหม ่ แคตตาล็อก ข้อมลู องค์กร สมัครสมาชิก เช่ือมไปยงั หนา้ หลกั index.html เชือ่ มไปยัง เช่ือมไปยัง หน้าแคตตาล็อก ฐานขอ้ มูลสมาชิก catalog.html contact.html เช่อื มไปยัง เชือ่ มไปยัง หน้าสนิ คา้ ใหม่ หน้าแนะนำบรษิ ทั Newproduct.html about.html 3.4 การออกแบบหน้าสนิ คา้ ใหม่ (newproduct.html) หน้าสินค้าใหม่ใช้สำหรับแสดงรายการสินค้าใหม่ๆ หรือสินค้าท่ีขายดี เพ่ือให้ผู้เย่ียม ชมสนใจเลอื กซอ้ื ดังตัวอยา่ ง โลโก ้ ช่ือบริษทั หวั เรอ่ื ง หรือโฆษณาผลติ ภัณฑ ์ หนา้ แรก สินคา้ ใหม ่ แคตตาลอ็ ก ขอ้ มลู องค์กร สมคั รสมาชิก เมนู 1 เนื้อหาแนะนำเว็บไซต ์ และข่าวสารใหมๆ่ สินคา้ เมนู 2 แนะนำ เมนู 3 สนิ ค้า เมนู 4 แนะนำ หน้าสินค้าใหม่อาจใช้ชื่อว่า newproduct.html เพ่ือให้สะดวกในการจำช่ือ โดยใช้ ตน้ แบบจากหน้าโฮมเพจ ส่ิงท่ตี ้องเตรียมใหค้ รบถ้วน คือ ข้อมูลสนิ ค้าใหม่ทั้งหมด และภาพ ประกอบ โดยสร้างเปน็ ตารางสำหรบั สินค้าแต่ละชิน้ แยกกันใหช้ ดั เจน
20 • การใช้โปรแกรม Adobe Dreamweaver CS6 โลโก้ ช่ือบรษิ ทั หวั เรอื่ ง หรือโฆษณาผลิตภัณฑ ์ หนา้ แรก สินค้าใหม ่ แคตตาลอ็ ก ขอ้ มลู องค์กร สมคั รสมาชิก เมนู 1 เนอ้ื หาแนะนำเวบ็ ไซต ์ และข่าวสารใหม่ๆ เมนู 2 เมนู 3 สินคา้ ใหม่ 1 สนิ คา้ ใหม่ 2 สินคา้ ใหม่ 3 เมนู 4 สินคา้ ใหม่ 5 สินค้าใหม่ 6 สินค้าใหม่ 4 ควรมีการจดั อนั ดบั สนิ คา้ ขายดี หรอื สนิ ค้าทลี่ ูกคา้ ถามถงึ บอ่ ยๆ มาแสดงไวด้ ้วย เพือ่ เป็นข้อมูลในการตัดสินใจซ้ือ หน้าสินค้าใหม่จะต้องมีการปรับปรุงอยู่เสมอทุกคร้ังที่มีสินค้า ใหม่ๆ ออกมา หรือ มีความเปล่ียนแปลงเกี่ยวกับสินค้าท่ีต้องการสื่อสารกับผู้ชมที่เป็น ปัจจุบัน ถา้ เป็นเวบ็ ไซตท์ ่ไี มเ่ กยี่ วกับการขายสนิ คา้ หน้าสนิ ค้าใหมอ่ าจจะเปลย่ี นไปเป็นหนา้ ที่ เกีย่ วข้องกบั สงิ่ ใหมๆ่ เช่น แหลง่ ท่องเท่ยี วใหม่ สถานการณ์ปัจจบุ นั ขอ้ มลู ใหม่ ฯลฯ 3.5 การออกแบบหน้าแคตตาลอ็ ก (catalog.html) หนา้ นี้ก็จะคลา้ ยกับหน้าสินค้าใหม่ แตจ่ ะเป็นหน้าทรี่ วมสินค้าทั้งหมดไว้ โดยแยกเปน็ หมวดหมอู่ ยา่ งชดั เจน มที กุ กลมุ่ สนิ คา้ ทง้ั สนิ คา้ ใหมแ่ ละสนิ คา้ ทม่ี จี ำหนา่ ยอยปู่ จั จบุ นั ดงั ตวั อยา่ ง โลโก้ ชอ่ื บริษัท หวั เรอ่ื ง หรือโฆษณาผลติ ภณั ฑ ์ หน้าแรก สนิ คา้ ใหม ่ แคตตาล็อก ข้อมลู องคก์ ร สมัครสมาชกิ เมนู 1 เน้อื หาแนะนำเวบ็ ไซต ์ แนะนำ เมนู 2 และขา่ วสารใหม่ๆ สินคา้ ใหม ่ เมนู 3 สนิ ค้าใหม่ 1 สนิ ค้าใหม่ 2 สินค้าใหม่ 3 สินคา้ ใหม่ 6 สินค้าใหม่ 9 อันดบั สินคา้ ใหม่ 4 สินคา้ ใหม่ 5 สนิ คา้ ขายด ี สนิ คา้ ใหม่ 7 สนิ ค้าใหม่ 8
หน่วยท่ี 1 พน้ื ฐานการสรา้ งเวบ็ ไซต์ • 21 หน้าแคตตาล็อกอาจต้ังช่ือว่า catalog.html ก็ได้ หรือเป็นช่ืออื่นๆ ก็ได้แต่ต้องสื่อว่า เป็นเนื้อหาเก่ียวกับสินค้าทั้งหมด สินค้าในแคตตาล็อกจะไม่ได้เปล่ียนแปลงรวดเร็วเหมือน สินค้าใหม่ อาจจะ 1 เดอื น หรือ 2 เดอื น จงึ จะเปลย่ี นรายการสกั ครั้ง ถา้ เป็นเว็บไซต์ท่ไี ม่ เก่ียวกับการขายสินค้า หน้านี้อาจเป็นที่รวบรวมข้อมูล ประวัติ ผลงาน บทความ สาระ ความรู้ ฯลฯ ซ่ึงเป็นข้อมลู ท่ไี ม่ต้องปรบั ปรงุ บอ่ ย 3.6 การออกแบบหนา้ ข้อมูลองคก์ ร (about.html) เว็บเพจหน้าน้ีจะบรรจุข้อมูลประวัติขององค์กร บริษัทหรือหน่วยงาน ตลอดจน ผลงานทผ่ี ่านมาอาจใชช้ อื่ about.html มโี ครงสร้างดังตัวอยา่ ง โลโก ้ ชอื่ บรษิ ทั หัวเร่ือง หรือโฆษณาผลติ ภัณฑ ์ หน้าแรก สนิ คา้ ใหม่ แคตตาล็อก ขอ้ มลู องคก์ ร สมคั รสมาชกิ เมนู 1 เนือ้ หาแนะนำองคก์ ร แนะนำ สนิ คา้ ใหม ่ เมนู 2 ประวตั กิ ารก่อตง้ั เมนู 3 วสิ ยั ทศั น์ พันธกิจ อนั ดับ สินคา้ ขายด ี โครงสรา้ งองค์กร ผลงานดีเดน่ รางวลั และเกียรตปิ ระวัติ ข้อมูลในหน้านี้มักจะไม่ค่อยมีการเปล่ียนแปลงบ่อย ยกเว้นข้อมูลเกี่ยวกับโครงสร้าง องค์กรท่ีอาจเปล่ียนแปลงบ้างหากมีพนักงานลาออก รับเข้ามาใหม่ หรือโยกย้ายตำแหน่ง นอกนนั้ กจ็ ะเปน็ ขอ้ มูลคงเดมิ อย่างไรก็ตาม อาจจะมีการปรับเปล่ียนรูปแบบการวางโครงสร้าง เปลี่ยนสีสัน หรือ ภาพกราฟิกใหมๆ่ ใหน้ ่าสนใจ เพือ่ ใหผ้ ชู้ มทีเ่ ข้ามาจะได้ไมเ่ บอื่ 3.7 การออกแบบหนา้ สมัครสมาชิก (mumber.html) เป็นหน้าสำหรับให้ผู้ชมสมัครเป็นสมาชิกเว็บไซต์ หรือลงทะเบียนเพ่ือรับสิทธิพิเศษ เช่น เมื่อซอื้ สนิ คา้ จะมีส่วนลดหรอื ได้คะแนนสะสม เป็นต้น
22 • การใช้โปรแกรม Adobe Dreamweaver CS6 หน้าสมัครสมาชิกจะไม่เหมือนกับหน้าอ่ืนๆ เพราะต้องออกแบบให้เป็นไดนามิก (Dynamic) คือต้องรับข้อมูลจากผู้ใช้เข้ามาสู่ฐานข้อมูล ดังนั้น การสร้างเว็บเพจหน้านี้ต้อง ใช้แอพพลิเคชันด้านการจัดการฐานข้อมูล เช่น ASP PHP และ MS-Access เป็นต้น ตัวอย่างการออกแบบ โลโก้ ชอื่ บรษิ ทั หวั เร่ือง หรอื โฆษณาผลิตภัณฑ ์ สนิ ค้าใหม่ แคตตาล็อก ขอ้ มลู องค์กร สมคั รสมาชกิ หนา้ แรก เมนู 1 เน้ือหาแนะนำระเบียบการ แนะนำ เมนู 2 และวธิ ีการสมคั รสมาชิก สนิ คา้ ใหม ่ เมนู 3 แบบฟอร์มการสมคั รสมาชิก ชอื่ -นามสกุล ท่อี ย่ ู อันดับ สนิ ค้าขายดี โทรศพั ท์ อีเมล เฟซบคุ๊ วัน เดือน ปี เกิด สินค้าทช่ี อบ ฯลฯ สิ่งสำคัญในการออกแบบเว็บเพจหน้านี้ คือการสร้างแบบฟอร์มรับข้อมูลซึ่งต้องใช้ ความรู้ด้านการสร้างฐานข้อมูล โดยต้องใช้โปรแกรม 2 โปรแกรมร่วมกันคือ Microsoft Access และ ASP.net เพือ่ ออกแบบสว่ นรองรับฐานข้อมูลสำหรบั สมาชิก 4. เทคนิคการออกแบบเว็บไซต์ การออกแบบเวบ็ ไซตใ์ หน้ า่ สนใจมเี ทคนคิ ทจ่ี ะต้องพจิ ารณา 3 ประการ คอื 4.1 ออกแบบเว็บไซต์ทเี่ นน้ เน้ือหา เว็บไซต์บางประเภทจะเน้นเนื้อหา หรือ ข้อความเป็นหลัก ภายในเว็บไซต์ก็จะ ประกอบด้วยตวั หนังสอื มภี าพประกอบบ้างแตไ่ มม่ าก เช่น เอน็ ไซโคพเี ดยี ดิกชนั นารี ฯลฯ
หน่วยท่ี 1 พ้นื ฐานการสรา้ งเวบ็ ไซต์ • 23 รปู ที่ 1.11 เวบ็ ไซตพ์ จนานกุ รม รปู ท่ี 1.12 เว็บไซตว์ ิกิพีเดยี สารานกุ รมเสร ี 4.2 ออกแบบเวบ็ ไซต์ที่เน้นภาพกราฟิก เวบ็ ไซตข์ นดิ นจ้ี ะใช้ภาพหรือกราฟกิ ในการนำเสนอเรื่อง มีข้อความบ้างเล็กนอ้ ย เช่น เวบ็ ไซตด์ า้ นการถ่ายภาพ เว็บไซต์ดา้ นสถานทที่ อ่ งเท่ยี ว ฯลฯ รปู ท่ี 1.13 เวบ็ ไซต์ Photo.net
24 • การใช้โปรแกรม Adobe Dreamweaver CS6 รปู ท่ี 1.14 เวบ็ ไซต์กรมการท่องเทย่ี ว 4.3 ออกแบบเว็บไซต์ท่เี นน้ ทั้งเนอ้ื หาและภาพ เวบ็ ไซต์ประภทนจ้ี ะใหน้ ้ำหนกั ทัง้ ข้อความและภาพใกล้เคยี งกนั เชน่ เว็บขา่ ว องคก์ ร ธรุ กจิ เวบ็ โรงเรยี น เวบ็ หน่วยงานราชการ ฯลฯ รปู ท่ี 1.15 เวบ็ ไซต์ bbc.com รปู ท่ี 1.16 เว็บไซตก์ ระทรวงศกึ ษาธิการ
หนว่ ยที่ 1 พืน้ ฐานการสรา้ งเว็บไซต์ • 25 ผู้ออกแบบเว็บไซต์จะต้องคำนึงถึงวัตถุประสงค์และผู้ชมกลุ่มเป้าหมายเป็นหลัก จึง จะเลือกเทคนิคการออกแบบให้เหมาะสมได ้ กิจกรรมท่ี 1.1 คำชี้แจง ให้ผูเ้ รียนแบ่งเป็นกลุ่มๆ ละ 5 คน ปฏิบัตกิ ิจกรรม ดังนี้ 1. วิเคราะห์โครงสร้างเว็บไซต ์ 2. ออกแบบเว็บไซตก์ ลุ่มละ 1 เรอ่ื ง 3. ออกแบบผังโครงสรา้ งเว็บไซต์และเว็บเพจแตล่ ะหนา้ ในเว็บไซต์นน้ั อยา่ งละเอยี ด กลุม่ ละ 1 เวบ็ ไซต ์ กจิ กรรมท่ี 1.2 คำช้แี จง ใหผ้ เู้ รยี นแบ่งเปน็ กลมุ่ ๆ ละ 5 คน เพื่อออกแบบเว็บเพจและเขียนโครงสร้างของ เว็บไซต์ ตามหลักการออกแบบเว็บไซต์ แล้วนำเสนอด้วยโปรแกรม PowerPoint และให้ เพ่ือนรว่ มกนั อภปิ ราย ดงั น้ี กลุม่ ท่ี 1 เรือ่ ง สถานทที่ อ่ งเที่ยวในจงั หวดั กลมุ่ ท่ี 2 เร่ือง สินค้าโอทอปประจำจังหวดั กลุ่มที่ 3 เรอื่ ง โรงเรียนของเรา กลุ่มที่ 4 เรอ่ื ง อาชพี หลกั ของคนในชมุ ชน กลุม่ ท่ี 5 เร่อื ง สถานทร่ี าชการทีค่ วรร ู้ กจิ กรรมที่ 1.3 คำชี้แจง ค้นหาเว็บไซต์ที่มีเทคนิคการออกแบบมา แบบละ 2 เว็บไซต์ แล้วนำภาพท่ีได้ พรอ้ มช่อื เว็บไซต์จดั ทำปา้ ยนิเทศ ดงั น ี้ 1. ออกแบบเว็บไซต์ทเี่ น้นเน้ือหา 2. ออกแบบเวบ็ ไซต์ทีเ่ นน้ ภาพกราฟิก 3. ออกแบบเว็บไซต์ทเ่ี น้นทั้งเนอ้ื หาและภาพ
26 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 การวดั และประเมนิ ผลการเรยี นรู้ หนว่ ยที่ 1 ตอนท่ี 1 ปรนยั คำชีแ้ จง ให้เลอื กคำตอบที่ถกู ท่ีสุดเพียงคำตอบเดยี ว 1. ขอ้ ใด ไมใ่ ช่ องคป์ ระกอบของอนิ เทอรเ์ นต็ 6. การเร่ิมต้นคำสั่งเรียกว่า Tag เปิด ก. โปรโตคอล เป็นโครงสร้างของภาษาใด ข. เวิลด์ ไวด์ เวบ็ ก. HTML ค. ซมิ เปลิ เมล ทรานซเ์ ฟอร์ โปรโตคอล ข. ASP ง. โดเมน เนม ซิสเตม็ ค. PHP 2. เวิลด์ ไวด์ เว็บ เร่ิมออนไลน์คร้ังแรก ง. JAVA เมื่อใด 7. การออกแบบหน้าสมาชิกจะต้องใช ้ 2 โปรแกรม คอื ขอ้ ใดบ้าง ก. วนั ที่ 5 ส.ค. 1990 ก. Microsoft Access และ Photoshop ข. วันท่ี 10 ก.ย. 1990 ข. Microsoft Excel และ ASP.net ค. วันท่ี 6 ส.ค. 1991 ค. Microsoft Access และ ASP.net ง. วนั ที่ 10 ม.ค. 1991 ง. Excel และ PowerPoint 3. เว็บเพจเขยี นขน้ึ ดว้ ยภาษาใด 8. เพราะเหตใุ ดหนา้ สมาชกิ จงึ ออกแบบ ก. PHP ใหเ้ ป็นไดนามิก (Dynamic) ข. ISO ก. ใหส้ วยงามกว่าหนา้ อืน่ ค. JAGUAL ข. ตอ้ งรองรบั ขอ้ มลู จากผใู้ ชม้ าสฐู่ านขอ้ มลู ง. ASH ค. เปน็ หนา้ แรกที่รบั แขก 4. โฮมเพจ (Homepage) คือส่วนใดของ ง. ถกู ทุกขอ้ เวบ็ ไซต์ 9. หน้าใดของเว็บไซต์ท่ีเปรียบเสมือน ก. หนา้ ที่หนึง่ หน้าสารบญั ของหนังสือ ข. หน้าท่สี อง ก. Homepage ค. หน้าทสี่ าม ข. Newproduct ง. หนา้ ทีส่ ี่ ค. Number 5. เว็บเบราว์เซอร์ (Web Browser) คือ ง. Contact ข้อใด 10. ส่วนที่จะทำให้เจ้าของเว็บไซต์ทราบ ก. เคร่ืองมอื ในการใชอ้ ินเทอร์เน็ต จำนวนผู้เข้าชมคือขอ้ ใด ข. เครื่องสอื่ สารชนดิ หนง่ึ ก. โฮสต์ ค. เอกสารหน้าทีห่ นึ่ง ข. โดเมนเนม ง. โปรแกรมท่ีใช้สำหรับเปิดเวบ็ เพจ ค. เคาน์เตอร ์ ง. โฮมเพจ
หนว่ ยท่ี 1 พน้ื ฐานการสรา้ งเวบ็ ไซต์ • 27 ตอนที่ 2 อัตนัย คำชี้แจง ใหจ้ ับคูค่ วามสัมพนั ธร์ ะหว่างข้อความด้านซ้ายและด้านขวาให้ถูกต้อง ...............1. โฮสต ์ ก. ตัวให้บริการ ...............2. โดเมนเนม ข. คอมพวิ เตอร์แม่ขา่ ย ...............3. การอัพโหลดขอ้ มลู ค. การเชื่อมโยง ...............4. เคานเ์ ตอร ์ ง. ขั้นตอนปฏบิ ตั ิในการรับสง่ ขอ้ มลู ...............5. HTML จ. ชือ่ ทีก่ ำหนดให้คอมพิวเตอรแ์ ม่ขา่ ย ...............6. เวบ็ เบราวเ์ ซอร์ ฉ. การส่งข้อมลู เขา้ คอมพวิ เตอร์ ...............7. โฮมเพจ ช. ภาษาทีใ่ ช้สรา้ งเว็บเพจ ...............8. โปรโตคอล ซ. หน่วยของโปรแกรมทีใ่ ช้ควบคุมจำนวน ...............9. เซริ ฟ์ เวอร์ ฌ. หน้าแรกของเว็บไซต ์ .............10. ลิงก์ ญ. โปรแกรมท่ชี ว่ ยดเู อกสาร
หน่วยท่ี 2 ความรู้ท่ัวไปเกีย่ วกับโปรแกรม Dreamweaver CS6 สาระการเรียนรู้ 1. ความเปน็ มาของโปรแกรม Dreamweaver CS6 2. สว่ นประกอบของหน้าจอโปรแกรม 3. การสรา้ งเวบ็ ไซต์และเวบ็ เพจเบ้อื งต้น 4. การบนั ทกึ เว็บเพจ 5. การทดสอบกับเว็บเบราว์เซอร์ 6. การปิดเอกสารและออกจากโปรแกรม ผลการเรียนร ู้ 1. อธิบายความเปน็ มาของโปรแกรม Dreamweaver CS6 ได ้ 2. บอกส่วนประกอบของหนา้ จอโปรแกรมได ้ 3. สามารถสร้างเว็บไซตแ์ ละเว็บเพจเบื้องตน้ ได้ 4. สามารถบนั ทึกเวบ็ เพจได้ 5. สามารถทดสอบกับเวบ็ เบราวเ์ ซอร์ได ้ 6. สามารถปิดเอกสารและออกจากโปรแกรมได้
หน่วยท่ี 2 ความร้ทู ่วั ไปเก่ยี วกบั โปรแกรม Dreamweaver CS6 • 29 1. ความเป็นมาของโปรแกรม Dreamweaver CS6 ในสมัยท่ีเร่ิมมีการใช้งานอินเทอร์เน็ตแรกๆ การสร้างเว็บไซต์และมีเว็บไซต์เป็นของ ตนเองทำได้ค่อนข้างยาก หนว่ ยงานขนาดใหญ่ เชน่ มหาวทิ ยาลยั สถาบนั วจิ ัย และ บริษทั ขนาดใหญ่ เป็นต้น จึงจะสามารถมีเว็บไซต์เองได้ เหตุผลหลัก คือ ค่าใช้จ่ายสูง และ ขั้น ตอนการสร้างเว็บไซต์ค่อนข้างยุ่งยาก ผู้ท่ีมีความรู้ความเช่ียวชาญด้านระบบเครือข่ายมี จำนวนน้อย ซึ่งคนเหล่าน้ันส่วนใหญ่เป็นนักคอมพิวเตอร์หรือโปรแกรมเมอร์ท่ีทำงานใน มหาวทิ ยาลยั และบริษทั ขนาดใหญ่ ทำใหม้ เี วบ็ ไซตเ์ กิดขึ้นจำนวนไมม่ ากนัก การสร้างเว็บไซต์ในยุคแรกนิยมใช้ภาษาเอชทีเอ็มแอล (HTML: Hypertext Markup Language) ท่ีเป็นภาษาคอมพิวเตอร์ชนิดหน่ึงซึ่งจะทำหน้าท่ีอธิบายเน้ือหาต่างๆ ในหน้า เวบ็ ว่าคืออะไร การเขยี นภาษา HTML จะใช้โปรแกรมเทก็ ซ์ เอดิเตอร์ (Text Editor) ท่ัวไป เชน่ Notepad, Wordpad และโปรแกรมประมวลผลคำ เชน่ Microsoft Word, Open office เป็นต้น โดยจะต้องเขียนโค้ดทีละบรรทัดไปเร่ือยๆ จนจบเน้ือหาในแต่ละเว็บเพจ ซึ่งจะมี เนื้อหาค่อนข้างยาวมาก ทำให้ยุ่งยาก โดยเฉพาะหากต้องการแทรกภาพ ตาราง และ ตกแต่งเว็บเพจให้สวยงามผู้สร้างเว็บเพจจะต้องมีความชำนาญมากพอสมควร เม่ือเขียน ภาษา HTML เสร็จแล้วก็จะต้องบันทึกไฟล์นามสกุล .html แล้วนำไปเปิดด้วยโปรแกรม เว็บเบราวเ์ ซอร์อีกทีหน่ึง การเขียนภาษา HTML ด้วย Text Editor นั้น แม้จะไม่ยากนักแต่ถ้าต้องการสร้าง เว็บไซต์ท่ีซับซ้อนอาจจะยากลำบากในการเขียนโค้ดคำสั่งทำให้ช้าและมีโอกาสผิดพลาดได้ ง่าย ต่อมาจึงได้มีการคิดค้นโปรแกรมสำเร็จรูปท่ีช่วยในการสร้างเว็บเพจให้ง่ายขึ้นเรียกว่า WYSIWYG HTML editors หมายถึง การใช้ภาพกราฟิกแทนการเขียนโค้ดคำส่ัง เม่ือ ผสู้ รา้ งเว็บเพจวางภาพ ตวั อกั ษร และวตั ถุใดๆ ลงบนแผน่ สรา้ งเวบ็ เพจ โปรแกรมจะทำการ เขียนโค้ดคำสั่งภาษา HTML ให้โดยอัตโนมัติ ซึ่งจะเห็นตัวอย่างงานท่ีสร้างเหมือนกับที ่ แสดงบนเว็บเบราว์เซอร์ โดยผู้เขียนอาจจะไม่จำเป็นต้องมีความรู้ภาษา HTML เลยก็ สามารถสร้างเว็บเพจได้ จึงช่วยใหก้ ารสรา้ งเว็บเพจทำได้ง่าย รวดเรว็ และสวยงามย่งิ ข้นึ โปรแกรมประเภท WYSIWYG HTML editors อาจกล่าวอีกนัยหนึ่งว่าเป็นภาษา HTML ภาคกราฟิกน่ันเอง โดยในปัจจุบันมีโปรแกรมประเภทน้ีเป็นจำนวนมาก เช่น Amaya, Aptana Studio, CoffeeCup HTML Editor, Dreamweaver, Google Web Designer, Microsoft Expression Web, OpenElement, OpenOffice.org เป็นตน้ อย่างไรกต็ าม แมจ้ ะมีโปรแกรมประเภท WYSIWYG HTML editors เป็นจำนวนมาก ให้เลือกใช้งาน แต่ท่ีได้รับความนิยมและยอมรับกันท่ัวไปว่ามีคุณสมบัติท่ีครบถ้วนในการ สร้างเว็บไซต์ คอื โปรแกรม Adobe Dreamweaver หรอื เรียกยอ่ ๆ วา่ Dreamweaver
30 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 1.1 แนะนำโปรแกรม Adobe Dreamweaver CS6 โปรแกรม Adobe Dreamweaver CS6 สร้างข้ึนโดยบริษัท Adobe Systems Incoperated ประเทศสหรัฐอเมริกา เดิมทีเดียวโปรแกรม Dreamweaver กำเนิดข้ึนเป็น รุ่นแรกโดยบริษัท Macromedia ซึ่งเป็นผู้ผลิตซอฟต์แวร์ด้านมัลติมีเดียและการพัฒนา เว็บเพจที่มีสำนักงานใหญ่ที่รัฐแคลิฟอร์เนีย สหรัฐอเมริกา โดย Macromedia ได้ออก โปรแกรม Dreamweaver ร่นุ 1 เมอ่ื ปี 2540 (1997) และได้พฒั นารุ่นตา่ งๆ เรอื่ ยมาจนถงึ รุน่ Macromedia Dreamweaver 8 ในปี 2548 (2005) ในปี 2548 บรษิ ัท Macromedia ได้ควบรวมกจิ การกับบรษิ ัท Adobe Systems ทำให้ ลิขสิทธ์ิซอฟต์แวร์ต่างๆ ตกเป็นของบริษัท Adobe โดยในรุ่นต่อมาเปล่ียนชื่อโปรแกรม เป็น Adobe Dreamweaver CS3 (คำวา่ CS3 ยอ่ มาจาก Adobe Creative Suite 3) ในปี 2549 โดยสรปุ พัฒนาการของโปรแกรม Dreamweaver ดงั ตารางข้างล่าง ผผู้ ลติ รนุ่ เดอื นทอี่ อกจำหน่าย หมายเหตุ Macromedia 1.0 ธันวาคม 2540 ใชก้ บั ระบบปฏบิ ัตกิ าร Mac OS ใชก้ ับระบบปฏิบัตกิ าร Windows 1.2 มีนาคม 2541 2.0 ธนั วาคม 2541 รนุ่ สดุ ทา้ ยทอ่ี อกโดย Macromedia 3.0 ธนั วาคม 2542 รุ่นแรกทอี่ อกโดย Adobe Systems 4.0 ธนั วาคม 2543 6.0 (MX) พฤษภาคม 2545 สนับสนนุ HTML 5 7. 0 (MX2004) กันยายน 2546 เปดิ ให้บริการแบบคลาวด์ (Cloud) 8.0 กนั ยายน 2548 เฉพาะผ้ลู งทะบียน Adobe Systems 9.0 (CS3) เมษายน 2550 10.0 (CS4) กนั ยายน 2551 11.0 (CS5) เมษายน 2553 11.5(CS5.5) เมษายน 2554 12.0 (CS6) เมษายน 2555 13.0 (CC) พฤษภาคม 2556 14.0 (CC2014) พฤษภาคม 2557
หนว่ ยที่ 2 ความรู้ทวั่ ไปเก่ยี วกบั โปรแกรม Dreamweaver CS6 • 31 จากตารางจะเห็นได้ว่าโปรแกรม Dreamweaver ได้มีการพัฒนามาอย่างต่อเน่ือง แทบทุกปีก็จะมีรุ่นใหม่ๆ ออกมาให้บริการอย่างสม่ำเสมอ โดยได้เพิ่มความสามารถหรือ คุณสมบัติใหม่เข้ามาทำให้การออกแบบและสร้างเว็บไซต์ทำได้ง่ายขึ้น รุ่นล่าสุดคือ รุ่น 14.0 ชอื่ Creative Cloud 2014 (CC 2014) ซึง่ ก็มคี ณุ สมบัติคล้ายกบั CS6 เพยี งแตก่ าร ให้บริการจะเปล่ียนจากการจำหน่ายผ่านการดาวน์โหลดหรือเป็นลิขสิทธิ์แผ่นดีวีดีไป เป็นการให้บริการผา่ นระบบคลาวด์ (Cloud) ซง่ึ ผ้ใู ช้จะต้องสมคั รสมาชกิ แบบออนไลน์ ชำระ ค่าธรรมเนียมรายเดือน หากไม่ชำระค่าบริการในเดือนใดๆ ก็จะไม่สามารถใช้งานได้ และ งานทส่ี ร้างทกุ อยา่ งจะอยใู่ นระบบคลาวด์ของ Adobe Systems โดยจะได้รบั พน้ื ท่ีว่างหนว่ ย ความจำสำหรับดาวน์โหลดโปรแกรม 2 กิกะไบต์ และสามารถซือ้ เพมิ่ ได้อีก 20 กกิ ะไบต์ ซง่ึ โปรแกรมจะมีการตรวจสอบการลงทะเบียนเป็นประจำทุกเดือน เหมาะสำหรับผู้ที่ต้องการ ใช้งานเป็นประจำเพราะมีความสะดวกในการเข้าถึงโปรแกรมได้ทุกท่ีทุกเวลาผ่านระบบ เครือขา่ ยอนิ เทอร์เน็ต โปรแกรม Dreamweaver CS6 เป็นหนึ่งในโปรแกรมท่ีรวมอยู่ในชุด Adobe Creative Suite 6 ซึง่ มหี ลายโปรแกรม เช่น Flash CS6, Photoshop CS6, และ InDesign CS6 เป็นต้น โดยมคี ณุ สมบตั ทิ ่ีโดดเด่น ดงั น้ี • ไซตส์ ำหรับจัดการด้านธุรกิจ (Business Catalyst Site) การจัดการไซต์แบบใหม่ ไดอะล็อกบ็อกซ์ Manage Site ออกแบบใหมใ่ หด้ ดู แี ละนา่ ใช้มากยง่ิ ขึ้น ถึงแมว้ ่าฟังก์ชนั การ ใช้งานจำนวนมากจะยังเหมือนเดิม แต่ก็มีฟังก์ชันใหม่เพิ่มเข้ามาคือความสามารถในการ สร้างหรือใช้งานไซต์ด้านธุรกิจแบบสำเร็จรูปท่ีให้ผู้สร้างงานได้เลือกใช้แบบธุรกิจออนไลน์ได้ อยา่ งรวดเร็ว • การออกแบบหน้าจอแบบยดื หยุ่นได้ (Fluid Grid Layout ) โดยผู้ออกแบบเวบ็ ไซต์ สามารถกำหนดรูปแบบการแสดงผลให้ยืดหยุ่นหรือเปลี่ยนแปลงขนาดได้ตามอุปกรณ์ท่ีใช้ งาน เช่น สมาร์ทโฟน และแท็บเล็ตขนาดต่างๆ ช่วยใหก้ ารออกแบบเว็บไซต์ง่ายข้นึ กวา่ เดมิ • สร้างการเคล่ือนไหว CSS3 Transitions ได้ราบรื่นขึ้น โดยออกแบบพาเนล CSS Transitions ใหม่ทำให้การเปล่ียนคุณสมบัติต่างๆ ราบรื่น ตอบสนองได้เร็ว เช่น การลาก เมาส์ผา่ น การคลกิ เมาส์ และการเนน้ เฉพาะจดุ โดยสามารถสร้าง CSS Transition ไดท้ งั้ ใน ระดับการเขียนโค้ดและการใช้พาเนล • jQuery Mobile 1.0 and jQuery Mobile swatches jQuery Mobile คือ Framework ท่ีช่วยให้เราสามารถสร้าง Mobile Website ได้ง่ายและสะดวกข้ึนโดยไม่ต้อง เสียเวลาออกแบบ User Interface (UI) ไม่ต้องทำเองใหม่ทั้งหมด สามารถสร้าง Mobile App กน็ ำไปใชร้ ว่ มกบั PhoneGap สง่ เข้า App store ของ Apple หรอื Android ได้ ส่วน
32 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 jQuery Mobile swatches เป็นธีมทช่ี ว่ ยใหก้ ารสร้างเวบ็ เพจ jQuery บนมอื ถือทำไดส้ ะดวก ขึน้ • สนับสนนุ เวบ็ ฟอนต์ (Web fonts) เปน็ การนำเอาเว็บฟอนต์ เชน่ Google, Typekit มาใช้กับ Dreamweaver โดยนำเข้าเว็บฟอนต์ในไซต์ของ Dreamweaver ก่อนจึงจะ สามารถใช้งานได ้ 1.2 ความตอ้ งการระบบของโปรแกรม การติดต้ังโปรแกรม Dreamweaver CS6 ผู้ใช้จะต้องเตรียมเครื่องคอมพิวเตอร์เพื่อ ให้รองรบั กบั คณุ สมบัติของโปรแกรม ท้ังดา้ นฮารด์ แวรแ์ ละซอฟตแ์ วร์ ดงั น้ ี สำหรับระบบปฏบิ ัติการ Windows ลกั ษณะของคอมพวิ เตอร์ คณุ สมบัติ 1. หน่วยประมวลผลกลาง อินเทล Pentium 4 หรือ AMD Ethlon 64 ขึ้นไป 2. หน่วยความจำแรม แรม 512 MB ข้ึนไป 3. เน้ือทว่ี า่ งของฮาร์ดดิสก์ มีเนอ้ื ทว่ี า่ งฮารด์ ดิสกอ์ ย่างน้อย 1 GB ข้ึนไป 4. จอภาพ ความละเอียด 1280 x 800 การด์ จอขนาด 16 bit 5. ซีดรี อมไดรฟ์ DVD Rom ไดร์ฟ 6. ระบบปฏิบัติการ WindowsXP Pack3,Vista Pack1, Winddows 7, 8, 8.1 7. เว็บเบราว์เซอร์ Chrome, Internet Explorer. Firefox 8. อน่ื ๆ อินเทอรเ์ น็ต, Quick Time 7.6.6 สำหรบั HTML5 คอมพิวเตอร์ระบบ iOS ลักษณะของคอมพวิ เตอร์ คณุ สมบตั ิ 1. หน่วยประมวลผลกลาง โปรเซสเซอร์ อนิ เทล มัลติคอร์ 2. หน่วยความจำแรม แรม 512 MB ข้นึ ไป 3. เนอ้ื ทีว่ ่างของฮารด์ ดสิ ก์ เนอ้ื ทวี่ ่างบนฮาร์ดดสิ ก์ 1.8 GB ขึ้นไป 4. จอภาพ ความละเอียดจอภาพ 1280 x 800 การด์ จอขนาด16 bit 5. ซีดีรอมไดรฟ์ DVD รอมไดรฟ์ 6. ระบบปฏบิ ัตกิ าร MacOS X 10.6 หรือ 10.7 หรอื สงู กว่า 7. เว็บเบราว์เซอร์ Ghrome, Internet Explorer. Firefox,Safari 8. อื่นๆ Quick Time 7.6.7, Java Runtime 1.6
หน่วยท่ี 2 ความรู้ทั่วไปเกย่ี วกบั โปรแกรม Dreamweaver CS6 • 33 ปัจจุบันคอมพิวเตอร์ที่ออกวางจำหน่ายทั่วไปมักมีคุณสมบัติสูงและราคาไม่แพงมาก ทำให้สามารถใช้งาน Dreamweaver CS6 ได้ หากเป็นคอมพิวเตอร์ท่ีใช้งานมานานแล้ว ควรตรวจสอบว่ามีคุณสมบัติเพียงพอท่ีจะใช้งานโปรแกรมได้หรือไม่ หากไม่ได้ควรจะ ปรับปรุงเคร่ือง (Upgrade) ให้สูงข้นึ เพอ่ื ให้ได้มาตรฐานตามทีโ่ ปรแกรมต้องการ 2. การเปิดใชง้ านโปรแกรม หลังจากท่ีได้ติดต้ังโปรแกรม Dreamweaver CS6 ลงไว้ในเคร่ืองคอมพิวเตอร์เสร็จ เรียบร้อยแลว้ สามารถเรยี กใช้งานโปรแกรม ดงั น้ ี 2.1 การเปิดโปรแกรม 1. การเรียกโปรแกรมด้วยปุ่ม Start มีวิธีทำ ดังน้ ี สำหรบั ระบบปฏิบัตกิ าร Windows XP, Vista, 7 1. คลกิ ที่ปมุ่ Start บนทาสก์บาร์ 2. เลอ่ื นเมาสไ์ ปทคี่ ำสั่ง Programs 3. คลกิ ทโ่ี ปรแกรม Adobe Dreamweaver CS6 สำหรับระบบปฏิบัตกิ าร Windows 8 หรือสูงกว่า 1. คลิกทปี่ มุ่ Start แลว้ คลกิ หวั ลูกศรบนหน้าจอ Start 2. เลือ่ นสไลด์บาร์ไปยงั โปรแกรมด้านขวามือ 3. ดบั เบลิ คลิกท่ีโปรแกรม 2. การเรียกผา่ นไอคอนลัดบนหนา้ จอเดสกท์ อ็ ป กรณที ไี่ ดส้ รา้ งไอคอนลัดของโปรแกรมไวบ้ นหนา้ จอเดสกท์ ็อป สามารถดบั เบิลคลกิ ท่ี ไอคอนนนั้ เพือ่ เปิดโปรแกรมได ้ หมายเหตุ : ถ้าไม่มีไอคอนลัดของโปรแกรมบนเดสก์ท็อปสามารถสร้างได้โดย คลิกปุ่ม Start > Programs คลกิ ขวาทโ่ี ปรแกรม Adobe Dreamweaver CS6 จะไดค้ ำสัง่ ลัด ให้ เลอื กคำส่งั Create Shortcut เม่ือได้ไอคอนโปรแกรมมาแลว้ ให้ลากมาวางไวท้ ีเ่ ดสก์ท็อป เม่ือเปิดโปรแกรมแล้วจะเข้าสู่หน้าต่างหรือหน้าจอแรกของโปรแกรมซ่ึงเรียกว่า หน้า ตอ้ นรบั (Welcome Screen) เพอ่ื ให้ผู้ใช้งานเรียกใช้คุณสมบัติตา่ งๆ ของโปรแกรมไดอ้ ย่าง รวดเรว็ ซ่ึงมสี ่วนประกอบหลกั 3 ส่วน ดงั น้ ี
34 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 1 2 3 1. เปิดไฟล์งานท่ีสร้างไว้ (Open a Recent Item) เป็นส่วนท่ีแสดงรายช่ือหน้า เวบ็ เพจท่ีเคยสร้างไว้โดยจะแสดงชอ่ื ลำดับลา่ สดุ ทเี่ คยทำงานและมีโฟลเดอร์ Open สำหรับ ใหเ้ ปดิ ค้นหาไฟล์งานด้วย 2. สร้างไฟล์งานใหม่ (Create New) ใช้สร้างเอกสารเปล่าข้ึนมาใหม่โดยเลือก เว็บเพจไดห้ ลายรปู แบบ เช่น HTML, ColdFusion, PHP เปน็ ตน้ 3. ดูวีดิโอสาธิตการใช้งานแบบออนไลน์ (Top Features Video) เข้าสู่หน้าเว็บ Adobe TV เพื่อชมวีดโิ อสาธิตการใช้งานในหวั ขอ้ ตา่ งๆ ตามความสนใจ สำหรับผู้เริ่มต้นสร้างเว็บเพจให้เลือก การสร้างไฟล์งานใหม่ (Create New) ซึ่งมี รปู แบบเอกสารให้เลือกหลายชนิด คอื HTML สรา้ งเวบ็ เพจธรรมดา ขอ้ มลู ในเวบ็ เพจประกอบดว้ ยขอ้ ความ รปู ภาพ ตารางและไฟล์มัลติมีเดียท่ัวไป ไม่ได้ทำงานเก่ียวกับฐานข้อมูล เหมาะสำหรบั ผเู้ รม่ิ ต้นสร้างเวบ็ เพจ ColdFusion สรา้ งหนา้ เวบ็ แอพพลเิ คชนั ดว้ ยเทคโนโลยี ColdFusion โดยใชภ้ าษา ซีเอฟเอ็มแอล (ColdFusion Markup Language - CFML) PHP สร้างหน้าเว็บแอพพลิเคชันด้วยภาษาพีเอชพี (Personal Home Pages -PHP) CSS สร้างรูปแบบมาตรฐาน หรือ สไตล์ ซีเอสเอส (Cascading Style Sheet – CSS) เพ่ือให้ทง้ั เวบ็ ไซต์มีรูปแบบเดยี วกนั ท้งั หมด
หน่วยที่ 2 ความรทู้ ว่ั ไปเกยี่ วกบั โปรแกรม Dreamweaver CS6 • 35 JavaScript สร้างไฟล์จาวาสคริปต์ให้กับเว็บเพจ ผู้ใช้งานสามารถเปิดใช้งาน พรอ้ มกบั แท็ก HTML XML สร้างไฟลเ์ อ็กซ์เอ็มแอล (eXtensive Markup Language – XML) ใน การเกบ็ โครงสร้างและชุดข้อมูลบนเว็บ Fluid Grid Layout การออกแบบหนา้ จอแบบยืดหยุ่นได้ Dreamweaver Site สร้างไซต์หรือเว็บไซต์ข้ึนมาใหม่เพ่ือบรรจุไฟล์หรือโฟลเดอร์ท่ีจะนำ สง่ ไปยงั เคร่อื งเซิรฟ์ เวอร์ Business Catalyst Site เว็บไซต์สำหรบั จัดการด้านธุรกจิ สำหรับผู้เริ่มต้นสรา้ งเว็บเพจใหม่ขอแนะนำให้สร้างเวบ็ เพจดว้ ย HTML 2.2 สว่ นประกอบบนหนา้ จอแรกของโปรแกรม สร้างงานใหม่โดยคลิกที่ตัวเลือก HTML (Create New) แล้วจะได้หน้าต่างแรกของ โปรแกรม Dreamweaver CS6 ซ่งึ มีส่วนประกอบต่างๆ ดงั รูป 1 8 2 7 3 4 5 6 1. แถบคำสง่ั หรอื เมนบู าร์ (Menu bar) เปน็ แถบทใ่ี ชเ้ กบ็ คำสงั่ ทงั้ หมดของโปรแกรม 2. แถบแทรก (Insert bar) เป็นแถบสำหรบั แทรกเครอ่ื งมอื ที่ใช้สำหรับสรา้ งเวบ็ เพจ 3. แถบเครื่องมอื (Toolbar) เปน็ แถบแสดงเครอื่ งมอื ใชง้ าน 4. หน้าต่างเอกสาร (Document Window) พ้ืนที่สำหรับสร้างงาน 5. แถบสถานะ (Status bar) แสดงขอ้ มลู เพม่ิ เตมิ เกย่ี วกบั งานทก่ี ำลงั ทำอยขู่ ณะนน้ั 6. พาเนลคุณสมบัติ (Property Inspector) สำหรับแสดงค่าในการปรับแต่ง องคป์ ระกอบตา่ งๆ ของเว็บเพจ
36 • การใช้โปรแกรม Adobe Dreamweaver CS6 7. กลมุ่ พาเนล (Panel Group) สำหรบั เพมิ่ ความสามารถในการจดั การและออกแบบ หนา้ เวบ็ 8. กลอ่ งควบคุม (Control Box) สำหรับยอ่ ขยาย และปิดหน้าต่างโปรแกรม 2.3 คำส่ัง หรือเมนู (Menu) คำสงั่ หรอื เมนู (Menu) ของ Dreamweaver CS6 ประกอบด้วยคำสงั่ หลัก 10 คำสงั่ และมีคำส่งั ย่อยอีกจำนวนมาก ดังนี้ 1. เมนู File รวบรวมคำส่งั ทใี่ ช้จัดการกบั ไฟลห์ รือแฟม้ ขอ้ มูล 2. เมนู Edit รวบรวมคำสัง่ ทใ่ี ช้แกไ้ ขเอกสาร 3. เมนู View รวบรวมคำสั่งที่ใช้แสดงมุมมองเอกสารเว็บ 4. เมนู Insert รวบรวมคำส่ังที่ใชแ้ ทรกส่วนประกอบต่างๆ บนเว็บ เชน่ ภาพ เลเยอร ์ 5. เมนู Modify ใช้สำหรับปรบั แตง่ เว็บเพจ เช่น ตาราง เฟรมเซต 6. เมนู Format ใชส้ ำหรับจัดการกับตวั อักษร หรือ ขอ้ ความ
หน่วยที่ 2 ความร้ทู ่ัวไปเกยี่ วกบั โปรแกรม Dreamweaver CS6 • 37 7. เมนู Command ใชส้ ำหรบั จดั รูปแบบคำสงั่ 8. เมนู Site ใช้สำหรบั จัดการกบั เวบ็ ไซต์ หรือ ไซต์งาน 9. เมนู Windows จดั การกับหนา้ ต่างท่ีทำงานอย ู่ 10. เมนู Help ขอความช่วยเหลอื จากโปรแกรม
38 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 2.4 พาเนลคุณสมบตั ิ (Property Inspector) พาเนลคุณสมบัติ (Property Inspector) เป็นพาเนลท่ีใช้สำหรับแสดงคุณสมบัติของ ภาพ ขอ้ ความ หรอื วตั ถุใดๆ บนเวบ็ เพจ และผู้ใช้สามารถปรับแกค้ ณุ สมบัติไดจ้ ากพาเนลน้ี ดังตวั อย่าง จากตวั อยา่ ง เมอ่ื คลกิ ทภี่ าพ คณุ สมบตั ขิ องภาพจะปรากฏขนึ้ โดยแสดงไวท้ ่ี Properties เช่น ความกวา้ ง (W) 1118 ความสงู (H) 731 และการปรบั ความละเอยี ดของภาพ เปน็ ต้น ถ้าคลกิ เลอื กวัตถุหรอื ขอ้ ความ คุณสมบตั ดิ งั กลา่ วก็จะเปล่ยี นตามไปด้วย 2.5 กลมุ่ พาเนล (Panel Group) กลุ่มพาเนลเป็นส่วนที่ใช้สำหรับเพิ่มความ สามารถในการจัดการและออกแบบหน้าเว็บ ซ่ึงมี แสดงไวห้ ลายพาเนล แตล่ ะพาเนลมีความสามารถ ในการจัดการเว็บเพจแตกตา่ งกัน เชน่ 1) พาเนล CSS Style ใช้สำหรับปรับแต่ง สไตล์ ทัง้ แบบตวั อักษรและลูกเล่นต่างๆ 2) พาเนล AP ELEMENTS ใชส้ ำหรบั เขยี น เวบ็ ไซต์ทีเ่ ช่ือมโยงกบั ฐานข้อมลู หรอื แอพพลเิ คชัน 3) พาเนล TAG INSPECTOR รวบรวม การใช้งานของแท็กท้ังหมด นอกจากน้ียงั มพี าเนลอื่นๆ อีกมาก
หน่วยที่ 2 ความรทู้ ว่ั ไปเกยี่ วกบั โปรแกรม Dreamweaver CS6 • 39 2.6 การแสดง/ซอ่ นพาเนลทง้ั หมด การซ่อนพาเนลท้ังหมดทำได้โดยคลิกท่ีเมนู Window แล้วคลิกเลือกคำส่ัง Hide Panels หรอื กดแปน้ F4 หากตอ้ งการใหแ้ สดงพาเนลกใ็ หค้ ลกิ ทเ่ี มนู Window แลว้ เลอื กคำสง่ั Show Panels หรือ กดปมุ่ F4 ซ้ำอีกครัง้ 2.7 การปดิ พาเนล พาเนลท่ีโปรแกรมเปิดไว้ให้ใช้งานในตอนแรกอาจจะมี จำนวนหลายพาเนล ซ่ึงบางพาเนลอาจไม่ได้ใช้งานผู้ใช้ก็ สามารถเลอื กเปดิ เฉพาะพาเนลนน้ั ๆ โดยคลกิ ทป่ี ุม่ ด้าน ขวามือของพาเนล จะมีคำส่ังย่อยให้เลือก คลิกท่ีคำส่ัง Close Panel ถ้าต้องการปิดทั้งกลุ่มพาเนลให้เลือกคำสั่ง Close Tab Group
40 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 2.8 การปรับมุมมองการทำงาน มุมมองการทำงาน (View) หมายถึง หน้าจอการแสดงผลท่ีผู้ใช้งานสามารถมองเห็น ขณะทำงานโดยสามารถปรับมุมมองการทำงานเพ่ือให้สอดคล้องกับลักษณะงานหรือความ ตอ้ งการได้ 5 รูปแบบหลักๆ คอื 1. มุมมองแสดงเฉพาะโค้ด (Show Close View) เป็นมุมมองที่แสดงเฉพาะโค้ด ภาษา HTML ทั้งเอกสาร เหมาะสำหรับเขียนภาษาเอชทีเอ็มแอลเพ่ือแก้ไขหรือปรับแต่ง เวบ็ เพจ ณ ตำแหนง่ ทตี่ อ้ งการ เลอื กมมุ มองนโี้ ดยคลกิ ทป่ี มุ่ หรอื คลกิ คำสงั่ View > Code 2. มุมมองแสดงโคด้ และการออกแบบ (Code and Design View) เปน็ มมุ มองที่ แสดงท้ังโคด้ ภาษาเอชทเี อ็มแอลและการออกแบบ โดยจะแบ่งเอกสารออกเป็น 2 สว่ น ส่วน บนจะเป็นโค้ดภาษาเอชทีเอ็มแอล ส่วนล่างจะเป็นการออกแบบ เหมาะสำหรับการแก้ไข โคด้ และดผู ลการแกไ้ ขไปพรอ้ มๆ กนั เลอื กมมุ มองนโ้ี ดยคลกิ ทป่ี มุ่ Split ( ) หรือคลิกท่ ี คำสง่ั View > Code and Design
หน่วยที่ 2 ความรทู้ วั่ ไปเกย่ี วกบั โปรแกรม Dreamweaver CS6 • 41 3. มุมมองออกแบบ (Design View) เปน็ มมุ มองทแี่ สดงหน้าจอเฉพาะเอกสารทท่ี ำ ไม่มีโค้ดเอชทีเอ็มแอลซ่ึงคล้ายกับการแสดงบนเว็บเพจจริง เลือกมุมมองนี้โดยคลิกท่ีปุ่ม Design ( ) หรอื คลิกคำส่งั View > Design 4. มุมมองเสมือนจริง (Live View) เป็นมุมมองที่แสดงผลงานเหมือนกับแสดงบน เว็บเพจจริง หรือเหมือนกับดูผ่านเว็บเบราว์เซอร์ ซ่ึงแตกต่างจากมุมมองออกแบบคือดูได ้ อย่างเดียวไม่สามารถแก้ไขหน้าเว็บได้ การเลือกมุมมองนี้ให้คลิกปุ่ม Live View ( ) หรอื คลิกคำส่งั View > Live View หรือ แปน้ พมิ พ์ Alt +F11 5. มุมมองโค้ดเสมือนจริง (Live Code) เป็นมุมมองที่แสดงท้ังโค้ดและหน้าเว็บ เสมือนจริง โดยต้องเลือกใช้มุมมองเสมือนจริง (Live view) ก่อน จึงจะใช้มุมมองน้ีได้ ใช้ สำหรับตรวจสอบโค้ดและหน้าแสดงผลว่าตรงตามท่ีสร้างไว้หรือไม่ โดยจะไม่สามารถแก้ไข เอกสารได้ การเรยี กใชม้ ุมมองนใ้ี หค้ ลกิ ทป่ี ุ่ม Live Code ( ) หรือคำสง่ั View > Live Code
42 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 มุมมองท้ังหมดดังกล่าวข้างต้นผู้สร้างเว็บเพจสามารถเลือกใช้ได้ตามลักษณะงาน สำหรบั ผูเ้ ร่มิ สรา้ งเวบ็ ใหม่ๆ อาจจะเลอื กใชม้ ุมมองออกแบบ (Design)ไปก่อนก็ได้ เนอ่ื งจาก เป็นมุมมองท่ีช่วยให้การสร้างเว็บเพจทำได้ง่ายและสะดวกที่สุด แต่ถ้าหากมีความรู้ภาษา เอชทีเอ็มแอลก็สามารถเลือกใช้มุมมอง Code หรือ Spilt เพ่ือปรับแต่งเอกสารให้สวยงาม มากยง่ิ ข้นึ กไ็ ด ้ 3. การเริ่มต้นสร้างเวบ็ ไซต์และเว็บเพจ การเร่ิมต้นสร้างเว็บไซต์และเว็บเพจนั้นจำเป็นจะต้องวางแผนการสร้างงานให้ รอบคอบท้ังในส่วนของการวางผังเว็บไซต์ว่าจะประกอบด้วยเว็บเพจหลักก่ีหน้า เว็บเพจ รองจำนวนก่หี น้า และการเตรียมเนื้อหาพร้อมภาพประกอบ แล้วจงึ นำมาสรา้ งเว็บไซต์ด้วย โปรแกรม Dreamweaver CS6 ในเบื้องต้นนี้จะได้แสดงข้ันตอนการสร้างเว็บไซต์และเว็จเพจเบ้ืองต้น โดยสร้าง เว็บไซต์เก่ียวกบั การขายสินคา้ ชมุ ชนหรือโอทอป (OTOP) ซงึ่ ผลติ ด้วยฝมี ือชมุ ชน ดงั น ี้ 3.1 การกำหนดโครงสรา้ งหรือแผนผงั เวบ็ ไซต ์ โครงสร้างหรือแผนผังเว็บไซต์ควรได้รับการออกแบบหรือจัดทำข้ึนมาก่อนท่ีจะลงมือ สร้างเว็บไซต์จริง โดยในโครงสร้างดังกล่าวจะต้องกำหนดไว้ให้ละเอียดว่ามีส่วนประกอบ อะไรบ้าง ซ่งึ สามารถสงั เกตได้จากเว็บไซต์ทั่วไป โดยปกตแิ ลว้ จะประกอบดว้ ย 1. หน้าหลกั หรือหน้าแรกท่ีเรียกว่าหน้าโฮมเพจ (Homepage) 2. หน้าผู้จัดทำ (About) หรือ ข้อมูล เกี่ยวกับผู้จัดทำเวบ็ ไซต์ 3. หน้าการตดิ ตอ่ กับผจู้ ัดทำ (Contact)
หนว่ ยท่ี 2 ความรู้ท่วั ไปเก่ียวกับโปรแกรม Dreamweaver CS6 • 43 นอกจากน้ี ยังมีรายละเอียดของหน้าเว็บเพิ่มเติมอีกตามลักษณะของงานหรือ กิจกรรมของหน่วยงานหรือผู้ที่สร้างเว็บไซต์ เช่น หากเป็นเว็บไซต์ด้านการขายสินค้าก็จะ มหี นา้ สนิ คา้ ใหม่ หนา้ สนิ คา้ ทง้ั หมด และหนา้ แบบฟอรม์ การสงั่ ซอ้ื เปน็ ตน้ หากเปน็ เวบ็ ไซต์ ของโรงเรยี นก็จะมีหนา้ เวบ็ ของกล่มุ สาระการเรยี นร้ตู า่ งๆ เป็นต้น ผู้ออกแบบเว็บไซต์สามารถเขียนแผนผังเว็บไซต์บนกระดาษไว้ ดังตัวอย่างเว็บไซต์ ของร้านขายสนิ ค้าชุมชนหรือโอทอป โดยตง้ั ชือ่ เวบ็ ไซต์ วา่ Handmade_Thai ดังนี้ handmade โฟลเดอร์หลักของเว็บไซต ์ -thai i mage โฟลเดอรย์ ่อยรวมภาพท้งั หมด H ome โฟลเดอร์ศูนยร์ วมข้อมูลและสารบญั เวบ็ ไซต์ New โฟลเดอรย์ อ่ ยสนิ ค้าใหมห่ รือสนิ ค้าขายด ี F oods โฟลเดอร์สินคา้ ประเภทอาหารและเครอื่ งดืม่ C lothes โฟลเดอรย์ ่อยสนิ คา้ ประเภทเส้ือผ้า r Daetiocnos- โฟลเดอร์ย่อยสนิ ค้าประเภทของประดับและตกแตง่ I.nhdtmexl ไฟล์งานทเ่ี ปน็ หน้าแรกหรือหน้าโฮมเพจ จากโครงสร้างดังกล่าวจะเห็นว่าไฟล์ Index.html จะอยู่แยกออกมาต่างหาก ไม่รวม อยู่ในโฟลเดอร์ใดๆ เพราะเป็นหน้าโฮมเพจท่ีเมื่อมีผู้เข้ามาเย่ียมชมเว็บไซต์จะต้องเข้ามาท่ี หนา้ นี้เป็นอันดับแรก ก่อนทจ่ี ะลงิ กไ์ ปยังหน้าเวบ็ เพจอ่นื ๆ 3.2 การสรา้ งไซต์ (Site) งาน การกำหนดไซต์ (Site) งานเปน็ การนำโครงสรา้ งเวบ็ ไซตท์ ไ่ี ดอ้ อกแบบไวแ้ ลว้ มาสรา้ ง จริงด้วยโปรแกรม Dreamweaver CS6 โดยโปรแกรมจะแบ่งงานของเราออกเป็น 2 ส่วน คือส่วนที่อยู่บนเครื่องจะเรียกว่า Local Folder หรือ โลคอลไซต์ (Local Site) ต่อเม่ือได้ สร้างเว็บไซต์เสร็จแล้วจึงจะนำไซต์ท้ังหมดอัพโหลดเข้าสู่เครื่องเซิร์ฟเวอร์จริงเพ่ือเผยแพร่ ต่อไป
44 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 การสร้างไซต์ (Site) งาน มขี ัน้ ตอน ดงั น ี้ 1. คลกิ ทเี่ มนู Site แล้วเลือกคำส่งั New Site... 2. จะได้หน้าตา่ ง Site Setup เพ่ือกำหนดชือ่ ไซตใ์ หม่ ใหพ้ มิ พ์ช่อื ใหมใ่ นช่อง Name Site ในท่ีนกี้ ำหนดเปน็ handmade_thai ในช่อง Local Site Folder ใหใ้ ส่ชอ่ื โฟลเดอรท์ เ่ี ก็บ ไซตง์ าน เสร็จแลว้ กด Save 3. ในฝั่งเซิร์ฟเวอร์ยังไม่ต้องกำหนดช่ือให้ผ่านไปได้เลยเพราะยังไม่ได้มีการเช่ือมต่อ กบั อินเทอร์เน็ต 4. จะได้โฟลเดอร์ไซต์ท่ีสร้างไว้ปรากฏอยู่ในพาเนล Files ด้านขวามือของหน้าต่าง โปรแกรม
หน่วยท่ี 2 ความรทู้ ว่ั ไปเกี่ยวกบั โปรแกรม Dreamweaver CS6 • 45 5. ถ้าต้องการแก้ไขหรือปรับต้ังค่าการใช้งานไซต์ ให้คลิกท่ีคำส่ัง Sites > Manage Sites 6. จะได้หนา้ ต่าง Manage Sites คลกิ ท่ปี ุ่มคำสง่ั ท่ตี อ้ งการแก้ไขไซต์ เช่น New Site เพม่ิ ไซต์ใหม่ Edit แก้ไขไซต์ และ Delete ลบไซต์ เปน็ ตน้ เสร็จแลว้ คลกิ ปมุ่ Done 3.3 การจัดการโฟลเดอรแ์ ละไฟลภ์ ายในไซต์ เมอื่ ไดไ้ ซต์งานแลว้ ขัน้ ตอ่ ไปกเ็ ป็นการสร้างโฟลเดอรย์ ่อยและไฟล์งานบรรจุไวใ้ นไซต์ ตามแผนงานที่ได้วางไว้ มีวธิ สี ร้าง ดังน ้ี 1. คลกิ ขวาที่ช่อื ไซต์ตรงพาเนล Files จะไดเ้ มนลู ดั
46 • การใช้โปรแกรม Adobe Dreamweaver CS6 2. คลิกที่คำส่ัง New Folder จะปรากฏโฟลเดอร์ ใหม่ขึ้นมาชอื่ Untitled 3. เปลี่ยนชื่อโฟลเดอร์ใหมเ่ ป็น Images 4. สร้างโฟลเดอร์ต่างๆ ตามขั้นตอนที่กล่าวมาให้ ครบ 5. สร้างไฟล์ index.html โดย คลิกขวาท่ีโฟลเดอร์ Site แล้วเลือก คำส่งั File New บนคำสั่งลัด
หนว่ ยท่ี 2 ความรทู้ วั่ ไปเก่ยี วกบั โปรแกรม Dreamweaver CS6 • 47 6. จะได้ไฟล์ช่ือ untitled ให้เปล่ียนชื่อไฟล์เป็น Index.html 7. การแกไ้ ขโฟลเดอร์และไฟล์ เชน่ การเพ่ิม การลบ การย้าย ฯลฯ ใหค้ ลกิ ขวาทีไ่ ฟล์ หรอื โฟลเดอร์นน้ั ๆ แล้วเลือกคำสง่ั ยอ่ ยท่ีต้องการ เช่น Cut 8. เม่ือได้สร้างโฟลเดอร์และไฟล์ต่างๆ จนครบตามท่ีต้องการแล้ว ถ้าเปิดไปดูที่ โฟลเดอร์ไซต์ ก็จะพบงานทั้งหมด ซ่ึงยังคงเป็นชิ้นงานโครงสร้างเว็บไซต์ยังไม่มีข้อมูลหรือ เนอ้ื หาแต่อยา่ งใด
48 • การใชโ้ ปรแกรม Adobe Dreamweaver CS6 9. ไฟล์และโฟลเดอร์ที่ปรากฏน้ี ผู้ใช้สามารถปรับเปลี่ยนได้ตามความเหมาะสม เช่น ต้องการเปลี่ยนชื่อโฟลเดอร์ New เป็น Newproducts สามารถคลิกขวาที่โฟลเดอร์ New เลอื กคำสงั่ Rename แล้วพมิ พ์ช่อื ใหมล่ งไปแทน 10. พิมพ์ชื่อใหม่ 11. เมื่อกลับไปดูท่ีไซต์ในโปรแกรม Dreamweaver CS6 ชื่อโฟลเดอร์จะได้รับการ เปล่ียนช่อื เชน่ เดียวกนั โดยอตั โนมตั ิ
หนว่ ยที่ 2 ความรทู้ ว่ั ไปเกยี่ วกบั โปรแกรม Dreamweaver CS6 • 49 ท้ังหมดน้ันคือไซต์งานของเว็บไซต์ซึ่งเป็นที่เก็บโฟลเดอร์และไฟล์งาน การสร้าง เวบ็ เพจแตล่ ะหนา้ ใสภ่ าพ ตาราง และอ่นื ๆ จะอยู่ภายในไซตน์ ี้ อยา่ งไรก็ตาม หากต้องการ สร้างไซต์งานอื่นอีก ก็สามารถทำได้ โดยใช้คำส่ัง Site > New Site เมื่อได้ไซต์งานแล้วก็ สามารถเกบ็ โฟลเดอร์และไฟลง์ านใหม่ได้ตามต้องการ 3.4 การสรา้ งเว็บเพจใหม่และเพิม่ รายละเอียดในเว็บเพจ การสร้างไฟล์ index.html ตามขั้นตอนที่กล่าวมาแล้วโดยใช้คำสั่ง File New ท ี่ พาเนล File นั้นเป็นวิธีสร้างหน้าเว็บเพจลงไปที่ไซต์งาน ซึ่งผู้ใช้งานอาจจะไม่ได้กำหนด รายละเอียดเพิ่มเติมให้กับหน้าเว็บเพจแต่ก็สามารถเพิ่มเติมในภายหลังได้ อย่างไรก็ตาม หากต้องการสร้างเว็บเพจใหม่ซงึ่ สามารถกำหนดรายละเอยี ดอื่นๆ กส็ ามารถทำได้ ดงั นี้ 1. เมือ่ เปิดโปรแกรมแล้ว สร้างไฟลใ์ หม่โดยคลิกท่คี ำสง่ั File > New 2. จะได้หน้าต่างสำหรับกำหนดรายละเอยี ดการสร้างเวบ็ เพจ
Search
