Home Explore ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Published by lavanh9979, 2021-08-24 09:06:50

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Read the Text Version

Pages:

CHAPTER 6: RESPONSIVE WEB DESIGN 281 2.2 แถบนาทางหลักของเวบ็ เพจ แถบนาทางหลักของเวบ็ เพจ (Navigation Bar) โดยเคา้ โครงจะอยใู่ นตาแหน่งถดั ลงมา จากส่วนหัว หรืออยู่ในตาแหน่งด้านข้างของเว็บเพจ เน้ือหาที่จะจัดวางลงในแถบนาทางหลัก จะเป็น ลิงก์สาหรับเชื่อมโยงไปยังเว็บเพจอ่ืนหรือเว็บไซต์ภายนอก ซึ่งจะใช้การตกแต่งรูปแบบของลิงก์ด้วย สไตล์ชีต เพ่อื ให้มีปฏสิ ัมพันธก์ บั ผใู้ ช้งานมากยงิ่ ขึ้น มรี ปู แบบการกาหนดคณุ สมบตั ิและกาหนดค่า ดงั น้ี Example /* css file: layoutstyle.css */ .topNav { /* The navbar container */ overflow: hidden; background-color: #333; } .topNav a { /* Navbar links */ float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .topNav a:hover { /* Links - change color on hover */ background-color: #ddd; color: black; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/layoutstyle.css\"> </head> <body> <div class=\"header\"> <h1>Information Website</h1> <p>Welcome to my official website.</p> </div> <div class=\"topNav\"> <a href=\"#\">Home</a> <a href=\"#\">About</a> <a href=\"#\">Product</a> <a href=\"#\">Staff</a> <a href=\"#\">Partner</a> <a href=\"#\" style=\"float:right;\">Contact</a> </div> </body> </html>

282 CHAPTER 6: RESPONSIVE WEB DESIGN Result 2.3 สว่ นเน้ือหาของเว็บเพจ สว่ นเน้อื หาของเว็บเพจ (Content) โดยเคา้ โครงจะอยใู่ นตาแหนง่ ถดั ลงมาจากแถบนา ทางด้านบนหรือตาแหน่งก่ึงกลางระหว่างส่วนบนกับส่วนล่างของเว็บเพจ เป็นส่วนที่ใช้เนื้อหาแทรก เน้ือหา ซ่ึงเน้ือหาอาจอยู่ในรูปแบบ ข้อความ ภาพน่ิง ภาพเคล่ือนไหว เสียง หรือวิดีโอ นิยมแบ่งส่วน ของเน้ือหาให้อยู่ในรูปแบบคอลัมน์ (Column) ส่วนของเน้ือหาหลักจะใช้พ้ืนท่ีมากท่ีสุด มีคาส่ัง สาหรับแสดงผลสว่ นของเน้ือหา ดังน้ี Example /* css file: layoutstyle.css */ .column { float: left; width: 33.33%; text-align: justify; padding: 15px; } .leftcolumn { width: 25%; float: left; text-align:justify; padding:15px; } .rightcolumn { width: 25%; float: left; text-align:justify; padding:15px; } .middlecolumn { width: 50%; float: left; text-align:justify; padding:15px; } .row:after { content: \"\"; display: table; clear: both; } @media screen and (max-width: 600px) { .column, .leftcolumn, .rightcolumn, .middlecolumn { width: 100%; } }

CHAPTER 6: RESPONSIVE WEB DESIGN 283 การแบ่งส่วนเน้ือหาออกเป็น 3 คอลัมน์ แต่ละคอลัมน์จะมีขนาดพ้ืนที่เท่า ๆ กัน โดยเรียกใช้ งานคลาส \"row\" และคลาส \"column\" HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/layoutstyle.css\"> </head> <body> <div class=\"header\"> <h1>Information Website</h1> <p>Welcome to my official website.</p> </div> <div class=\"topNav\"> <a href=\"#\">Home</a> <a href=\"#\">About</a> <a href=\"#\">Product</a> <a href=\"#\">Staff</a> <a href=\"#\">Partner</a> <a href=\"#\" style=\"float:right;\">Contact</a> </div> <div class=\"row\"> <div class=\"column\"> <h2>Column 1</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> <div class=\"column\"> <h2>Column 2</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> <div class=\"column\"> <h2>Column 3</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </div>  </body> </html>

284 CHAPTER 6: RESPONSIVE WEB DESIGN Result คาส่ัง \"@media screen and (max-width: 600px) {...}\" จะส่งผลให้การแสดงผลเว็บเพจ ผ่านหนา้ จอท่มี ขี นาดเล็กลง สามารถแสดงผลได้อยา่ งมีประสิทธภิ าพ Result

CHAPTER 6: RESPONSIVE WEB DESIGN 285 การแบง่ สว่ นเนอ้ื หาออกเปน็ 3 คอลัมน์ แตล่ ะคอลมั นจ์ ะมีขนาดพน้ื ทตี่ า่ งกัน โดยเรยี กใช้งาน คลาส \"row\" และคลาส \"leftcolumn\" \"middlecolomn\" และคลาส \"rightcolomn\" HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/layoutstyle.css\"> </head> <body> <div class=\"header\"> <h1>Information Website</h1> <p>Welcome to my official website.</p> </div> <div class=\"topNav\"> <a href=\"#\">Home</a> <a href=\"#\">About</a> <a href=\"#\">Product</a> <a href=\"#\">Staff</a> <a href=\"#\">Partner</a> <a href=\"#\" style=\"float:right;\">Contact</a> </div> <div class=\"row\"> <div class=\"leftcolumn\"> <h2>Left Column</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> <div class=\"middlecolumn\"> <h2>Middle Column</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> <div class=\"rightcolumn\"> <h2>Right Column</h2> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </div>  </body> </html>

286 CHAPTER 6: RESPONSIVE WEB DESIGN Result คาส่ัง \"@media screen and (max-width: 600px) {...}\" จะส่งผลให้การแสดงผลเว็บเพจ ผ่านหนา้ จอท่มี ขี นาดเล็กลง สามารถแสดงผลได้อยา่ งมีประสทิ ธภิ าพ Result

CHAPTER 6: RESPONSIVE WEB DESIGN 287 2.4 ส่วนล่างของเวบ็ เพจ ส่วนล่างของเว็บเพจ (Footer) โดยเค้าโครงจะอยู่ในตาแหนง่ ถัดลงมาจากตาแหน่งของ เน้ือหาหรืออยู่ในตาแหน่งล่างสดุ ของเว็บเพจ นิยมใช้เป็นส่วนสาหรับแทรกลิงก์ท่ีเก่ียวข้อง ข้อมูลการ ติดต่อ หรือขอ้ มูลลิขสทิ ธิ์ มคี าส่งั สาหรบั แสดงผลส่วนล่าง ดงั น้ี Example /* css file: layoutstyle.css */ .footer { background-color: #F2F2F2; text-align: center; padding: 15px; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/layoutstyle.css\"> </head> <body> <div class=\"header\"></div> <div class=\"topNav\"></div> <div class=\"row\"> <div class=\"column\"></div> </div> <div class=\"footer\"> <h3>Footer</h3> <p>042-211040-59 call 610 | © 2018 | web.udru.ac.th All Right Reserved.</p> </div> </body> </html> Result

288 CHAPTER 6: RESPONSIVE WEB DESIGN 3. Responsive Layout การออกแบบเว็บเพจให้สามารถตอบสนองการใช้งานกับทุกอุปกรณ์ (Responsive) เป็น การกาหนดเค้าโครงเว็บเพจทุกสว่ นให้สามารถตอบสนองการใช้งานบนหนา้ จอของอุปกรณ์ต่าง ๆ ไม่ ว่าจะเป็น คอมพิวเตอร์ แท็บเล็ต โทรศัพท์มือถือสมาร์ทโฟน หรืออุปกรณ์อื่น ๆ ให้สามารถใช้งานได้ อย่างมีประสิทธิภาพ และยังเป็นการอานวยความสะดวกให้กับผู้ใช้ที่เปิดเว็บเพจด้วยอุปกรณ์ที่มี หนา้ จอขนาดเล็ก มรี ปู แบบการกาหนดคณุ สมบัติและกาหนดค่า ดงั นี้ Example /* css file: responsivelayout.css */ *{ box-sizing: border-box; } body { font-family: Arial; padding: 10px; background: #f1f1f1; } .header { padding: 30px; text-align: center; background: white; } .topnav { overflow: hidden; background-color: #333; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; } .topnav a:hover { background-color: #ddd; color: black; }

CHAPTER 6: RESPONSIVE WEB DESIGN 289 Example /* css file: responsivelayout.css */ .leftcolumn { float: left; width: 75%; } .fakeimg { background-color: #DFF4FF; width: 100%; padding: 20px; } .rightcolumn { float: left; width: 25%; background-color: #f1f1f1; padding-left: 20px; } .card { background-color: white; padding: 20px; margin-top: 20px; } .row:after { content: \"\"; display: table; clear: both; } .footer { padding: 20px; text-align: center; background: #ddd; margin-top: 20px; } @media screen and (max-width: 800px) { .leftcolumn, .rightcolumn { width: 100%; padding: 0; } } @media screen and (max-width: 500px) { .topnav a { float: none; width: 100%; } }

290 CHAPTER 6: RESPONSIVE WEB DESIGN HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <div class=\"header\"> <h1>Information Website</h1><p>Welcome to my official website.</p> </div> <div class=\"topnav\"> <a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Product</a><a href=\"#\">Staff</a> <a href=\"#\">Partner</a><a href=\"#\" style=\"float:right;\">Contact</a> </div> <div class=\"row\"> <div class=\"leftcolumn\"> <div class=\"card\"> <h2>INFORMATION SCIENCE UDRU</h2> <h5>News, January 18, 2018</h5> <div class=\"fakeimg\" style=\"height:200px;\">Image</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, and protection of information.</p> </div> <div class=\"card\"> <h2>INFORMATION SCIENCE UDRU</h2> <h5>News, Faburary 15, 2018</h5> <div class=\"fakeimg\" style=\"height:200px;\">Image</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, and protection of information.</p> </div> </div>  <div class=\"rightcolumn\"> <div class=\"card\"> <h2>About Me</h2> <div class=\"fakeimg\" style=\"height:100px;\">Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> </div> <div class=\"card\"> <h3>Popular Post</h3> <div class=\"fakeimg\"><p>Image</p></div> <div class=\"fakeimg\"><p>Image</p></div> <div class=\"fakeimg\"><p>Image</p></div> </div> <div class=\"card\"> <h3>Follow Me</h3> <p>Some text..</p> </div> </div>  </div>  <div class=\"footer\"> <h2>Footer</h2> <p>042-211040-59 call 610 | © 2018 | web.udru.ac.th All Right Reserved.</p> </div> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 291 Result

292 CHAPTER 6: RESPONSIVE WEB DESIGN 4. กาหนดขนาดความกวา้ งของเคา้ โครง การกาหนดความกว้างของเคา้ โครงเวบ็ เพจ เป็นการกาหนดขนาดความกว้างของพ้ืนท่ีทใ่ี ช้ สาหรับแสดงเนื้อหา โดยพื้นท่ีหลักอาจกาหนดให้แสดงเต็มหน้าจอ (100%) หรือกาหนดให้แสดงไม่ เต็มหน้าจอ หากกาหนดไม่แสดงเต็มหน้าจอจะนิยมจัดพ้ืนที่หลักให้อยู่ในตาแหน่งกึ่งกลางของหน้า จอแสดงผล โดยกาหนดค่าเป็นร้อยละ (%) เพ่ือให้การแสดงผลมีความยืดหยุ่น เมื่อแสดงผลบน อุปกรณ์ทแี่ ตกตา่ งกนั มีรปู แบบการกาหนดคุณสมบตั ิและกาหนดคา่ ดังน้ี Example /* css file: responsivelayout.css */ .mainFrame { width: 70%; margin: auto; position: relative; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <div class=\"mainFrame\"> <div class=\"header\">  </div> <div class=\"topnav\">  </div> <div class=\"row\"> <div class=\"leftcolumn\">  </div> <div class=\"rightcolumn\">  </div> </div> <div class=\"footer\">  </div> </div> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 293 Result 100% 70% 5. อิลเิ มนตเ์ ชงิ ความหมายกับการออกแบบเคา้ โครง การใช้งานอิลิเมนต์เชิงความหมาย (Semantic Element) ในการออกแบบเค้าโครงเว็บ เพจ เป็นการนาอิลเิ มนต์ของ HTML5 มาใช้เปน็ อลิ เิ มนต์ท่ีระบุสว่ นต่าง ๆ ของเค้าโครงของเว็บเพจให้ มีความชัดเจน มีความสามารถในการอธิบายความหมายของส่วนต่าง ๆ ให้โปรแกรมแสดงผลเว็บมี ความเข้าใจต่อเนื้อหาท่ีอยู่ภายใต้แท็ก และยังมีผลต่อเครื่องมือค้นหาข้อมูลออนไลน์ (Search Engine) ซึ่งจะช่วยให้เครื่องมือสามารถค้นหาและเก็บข้อมูลในเว็บไซต์ได้อย่างมีประสิทธภิ าพ โดยใช้ งานอลิ ิเมนตด์ งั ตารางที่ 6.3 ตารางท่ี 6.3 อิลเิ มนต์เชิงความหมายสาหรับกาหนดเคา้ โครงเวบ็ เพจ Elements Description <article> กาหนดส่วนเน้ือหาหรือบทความหลกั ในเวบ็ เพจ <aside> กาหนดตาแหนง่ ของเนอ้ื หาท่นี อกเหนือจากเนื้อหาหลกั ของเว็บเพจ <footer> กาหนดส่วนทา้ ยหรือส่วนลา่ งสดุ ของเว็บเพจ <header> กาหนดสว่ นหวั ของเวบ็ เพจ <main> กาหนดตาแหนง่ เน้อื หาหลักของเอกสาร <nav> กาหนดตาแหน่งของระบบนาทางหรือลิงกห์ ลักของเวบ็ ไซต์ <section> กาหนดสัดสว่ นเนอ้ื หาในเว็บเพจทม่ี คี วามเก่ยี วขอ้ งกนั

294 CHAPTER 6: RESPONSIVE WEB DESIGN HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <div class=\"header\"> <header> <h1>Information Website</h1> <p>Welcome to my official website.</p> </header> </div> <div class=\"topnav\"> <nav> <a href=\"#\">Home</a><a href=\"#\">About</a><a href=\"#\">Product</a><a href=\"#\">Staff</a> <a href=\"#\">Partner</a><a href=\"#\" style=\"float:right;\">Contact</a> </nav> </div> <main> <div class=\"row\"> <div class=\"leftcolumn\"> <section> <div class=\"card\"> <article> <h2>INFORMATION SCIENCE UDRU</h2> <h5>News, January 18, 2018</h5> <div class=\"fakeimg\" style=\"height:200px;\">Image</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, and protection of information.</p> </article> </div> </section> <section> <div class=\"card\"> <article> <h2>INFORMATION SCIENCE UDRU</h2> <h5>News, Faburary 15, 2018</h5> <div class=\"fakeimg\" style=\"height:200px;\">Image</div> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, and protection of information.</p> </article> </div> </section> </div> 

CHAPTER 6: RESPONSIVE WEB DESIGN 295 HTML5  <div class=\"rightcolumn\"> <aside> <section> <div class=\"card\"> <article> <h2>About Me</h2> <div class=\"fakeimg\" style=\"height:100px;\">Image</div> <p>Some text about me in culpa qui officia deserunt mollit anim..</p> </article> </div> </section> <section> <div class=\"card\"> <article> <h3>Popular Post</h3> <div class=\"fakeimg\"><p>Image</p></div> <div class=\"fakeimg\"><p>Image</p></div> <div class=\"fakeimg\"><p>Image</p></div> </article> </div> </section> <section> <div class=\"card\"> <article> <h3>Follow Me</h3> <p>Some text..</p> </article> </div> </section> </aside> </div>  </div>  <div class=\"footer\"> <footer> <h2>Footer</h2> <p>042-211040-59 call 610 | © 2018 | web.udru.ac.th All Right Reserved.</p> </footer> </div> </body> </html>

296 CHAPTER 6: RESPONSIVE WEB DESIGN Responsive Images การกาหนดคุณสมบัติให้กับภาพประกอบที่จะนามาใช้แสดงผลในเว็บเพจแบบ Responsive ซึ่งโดยปกติภาพท่ีนามาใช้แสดงผลในเว็บเพจ จะมีการกาหนดขนาดความกว้าง (Width) และขนาด ความสูง (Height) โดยใช้หน่วยวัดเป็นพิกเซล (px) โดนจะแสดงภาพตามขนาดท่ีกาหนดจริง ซึ่งอาจ เกิดปัญหาเม่ือแสดงผลภาพบนหน้าจอที่มีขนาดเล็กกว่าหน้าจอคอมพิวเตอร์ท่ัวไป โดยเฉพาะปัญหา ภาพล้นหน้าจอ ส่งผลให้ไม่สามารถดูภาพเต็มขนาดได้ในครั้งเดียว ต้องใช้แถบเลื่อนแนวนอน จึงจะ สามารถเล่ือนดูภาพทั้งหมดได้ ดังนั้น การกาหนดคุณสมบัติภาพประกอบแบบ Responsive จึงมี ความสาคญั ต่อการออกแบบเว็บไซตใ์ นปัจจบุ นั 1. การแสดงภาพทว่ั ไป การแสดงภาพด้วยอิลิเมนต์ \"<img>\" ให้สามารถตอบสนองต่อการปรับขนาดหน้าจอท่ี แตกต่างกัน โดยการกาหนดคุณสมบัติ \"width\" หรือ \"max-width\" กาหนดค่าความกว้างของภาพ เป็นร้อยละ (%) และกาหนดคุณสมบัติ \"height\" กาหนดค่าความสูงของภาพเป็นอัตโนมัติ (auto) มี รูปแบบการกาหนดคณุ สมบตั แิ ละกาหนดค่า ดังนี้ Example /* css file: responsivelayout.css */ img { width: 100%; /* or max-width: 100% */ height: auto; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <h1>Responsive Image</h1> <img src=\"images/wall.jpg\" alt=\"wallpaper\" width=\"480\" height=\"350\"> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 297 width: 100% max-width: 100% ภาพที่ 6.10 การแสดงภาพท่ัวไปแบบ Responsive ที่มา: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560) จากภาพที่ 6.10 เป็นการกาหนดขนาดภาพให้กับอิลิเมนต์ \"<img>\" โดยกาหนดคุณสมบัติ \"width: 100%\" ภาพจะแสดงขนาดความกว้างเต็มหน้าจอโปรแกรมแสดงผลเว็บหรือ 100% ของ พื้นท่ีแสดงผล และกาหนดคุณสมบัติ \"max-width: 100%\" ภาพจะแสดงขนาดความกว้างตามขนาด ทกี่ าหนดจริงในอิลเิ มนต์ \"<img>\" คือ width=\"480\" โดยคงอตั ราส่วนของภาพ

298 CHAPTER 6: RESPONSIVE WEB DESIGN 2. การแสดงภาพพ้ืนหลงั การแสดงภาพพื้นหลัง ให้สามารถตอบสนองต่อการปรับขนาดท่ีแตกต่างกัน โดยการ ประกาศคุณสมบัติ \"background-image\" โดยกาหนดค่าเป็น \"contain\" ภาพจะปรับขนาดให้พอดี กับพ้ืนท่ีเนื้อหา และรักษาอัตราส่วนของภาพตามความกว้างกับความสูง หรือกาหนดค่าเป็น 100% 100% ภาพจะยดื ออกเพื่อแสดงผลครอบคลุมพื้นท่ีเนื้อหาทัง้ หมด มีรปู แบบการกาหนดคุณสมบัติและ กาหนดค่า ดงั น้ี Example /* css file: responsivelayout.css */ div { width: 100%; height: 350px; background-image: url('wall.jpg'); background-repeat: no-repeat; background-size: contain; /* or background-size: 100% 100%*/ border: 1px solid burlywood; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <h1>Responsive Image Background</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> <div></div> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 299 background-size: contain background-size: 100% 100% ภาพท่ี 6.11 การแสดงภาพพื้นหลังแบบ Responsive ที่มา: (ราชวทิ ย์ ทิพยเ์ สนา, 2560)

300 CHAPTER 6: RESPONSIVE WEB DESIGN 3. การแสดงภาพท่แี ตกต่างกันสาหรับอปุ กรณท์ แี่ ตกต่างกัน การแสดงภาพท่ีแตกต่างกันเม่ือแสดงผลด้วยอุปกรณ์ที่แตกต่างกัน ซ่ึงการแสดงภาพขนาด ใหญท่ ีม่ คี า่ ความละเอยี ดสูง อาจเหมาะสาหรบั หน้าจอคอมพิวเตอร์ขนาดใหญ่ ทม่ี ปี ระสิทธภิ าพในการ รองรับการแสดงผลภาพ แต่หากต้องการแสดงภาพในหน้าจอท่ีมีขนาดเล็กลงหรือหน้าจอโทรศัพท์ สมาร์ทโฟน การแสดงภาพขนาดใหญ่อาจไม่เหมาะสม ไม่ว่าจะเป็นด้านความละเอียดของหน้าจอที่ สามารถรองรับได้ หรือระยะเวลาในการดาวน์โหลดภาพขนาดใหญ่ การแสดงภาพแบบ Responsive จึงสามารถเปลี่ยนภาพใหม่เม่ือแสดงภาพบนหน้าจอที่มีขนาดแตกต่างกัน ส่งผลให้การแสดงผลมี ประสิทธิภาพและสามารถดาวน์โหลดภาพได้รวดเร็วมากยิ่งขึ้น มีรูปแบบการกาหนดคุณสมบัติและ กาหนดค่า ดังน้ี Example /* css file: responsivelayout.css */ body { background-image: url('wall_small.jpg'); /* For width smaller than 500px: */ background-repeat: no-repeat; } @media only screen and (min-width: 500px) { /* For width 500px and larger: */ body { background-image: url('wall.jpg'); background-repeat: no-repeat; } } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <h1>Different Images for Different Devices</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 301 สามารถประกาศคุณสมบตั ิ \"min-device-width\" เพื่อตรวจสอบความกว้างของอุปกรณ์แทน การตรวจสอบขนาดความกว้างของโปรแกรมแสดงผลเว็บด้วยคุณสมบัติ \"min-width\" ซ่ึงจะส่งผลให้ ภาพไม่เปลี่ยนขนาดเม่ือปรับขนาดโปรแกรมแสดงผลเว็บ มีรูปแบบการกาหนดคุณสมบัติและ กาหนดคา่ ดังน้ี Example /* css file: responsivelayout.css */ body { background-image: url('wall_small.jpg'); background-repeat: no-repeat; } @media only screen and (min-device-width: 500px) { body { background-image: url('wall.jpg'); background-repeat: no-repeat; } } Tablet Smartphone ภาพที่ 6.12 การแสดงภาพที่แตกตา่ งกันในหนา้ จอแสดงผลขนาดต่างกนั ทมี่ า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

302 CHAPTER 6: RESPONSIVE WEB DESIGN Responsive Videos การกาหนดคุณสมบัติให้กับวิดีโอที่จะนามาใช้แสดงผลในเว็บเพจแบบ Responsive ซ่ึงโดย ปกติวิดีโอท่นี ามาใช้แสดงผลในเวบ็ เพจ จะมีการกาหนดขนาดความกว้าง (Width) และขนาดความสูง (Height) เช่นเดียวกับภาพนิ่ง โดยใช้อิลิเมนต์ \"<video>\" เพื่อให้วิดีโอสามารถตอบสนองต่อการปรบั ขนาดหน้าจอท่ีแตกต่างกัน โดยการกาหนดคุณสมบัติ \"width\" หรือ \"max-width\" กาหนดค่าความ กว้างของวิดีโอเป็นร้อยละ (%) และกาหนดคุณสมบัติ \"height\" กาหนดค่าความสูงของวิดีโอเป็น อตั โนมตั ิ (auto) มรี ูปแบบการกาหนดคุณสมบัติและกาหนดค่า ดงั น้ี Example /* css file: responsivelayout.css */ video { width: 100%; /* or max-width: 100% */ height: auto; } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <h1>Responsive Videos</h1> <video width=\"600\" controls> <source src=\"videos/mov.mp4\" type=\"video/mp4\"> </video> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 303 width: 100% max-width: 100% ภาพที่ 6.13 การแสดงวิดีโอแบบ Responsive ทีม่ า: (ราชวทิ ย์ ทิพย์เสนา, 2560)

304 CHAPTER 6: RESPONSIVE WEB DESIGN Responsive Navigation Bar การกาหนดคณุ สมบัติใหก้ บั แถบนาทาง (Navigation Bar) หรือเมนูของเวบ็ ไซต์ เพ่ือแสดงผล ในเว็บเพจแบบ Responsive โดยแถบนาทางถือเป็นส่วนประกอบสาคัญของเว็บไซต์ ซึ่งจะเป็นจุด เช่ือมโยงไปยังเว็บเพจอ่ืน ๆ ภายในเว็บไซต์ ดังน้ัน หากออกแบบเว็บไซต์ให้สามารถตอบสนองการใช้ งานกับทุกอุปกรณ์ การออกแบบแถบนาทางก็จะต้องสามารถตอบสนองการใช้งานกับทุกอุปกรณ์ได้ เช่นเดียวกัน โดยรูปแบบท่ีได้รับความนิยม คือ ระบบนาทางรูปแบบ Hamburger Menu ซ่ึงเป็น ระบบนาทางหรือเมนูที่ถูกซ่อนไว้ภายใต้สัญลักษณ์หรือปุ่ม ในตาแหน่งมุมใดมุมหน่ึงของเว็บเพจ มี รูปแบบการกาหนดคณุ สมบตั ิและกาหนดค่า ดังนี้ Example /* css file: responsivelayout.css */ .topnav { background-color: #333; overflow: hidden; } .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .topnav a:hover { background-color: #ddd; color: black; } .active { background-color: coral; color: white; } .topnav .icon { display: none; } @media screen and (max-width: 600px) { .topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; } }

CHAPTER 6: RESPONSIVE WEB DESIGN 305 /* css file: responsivelayout.css cont’d…*/ @media screen and (max-width: 600px) { .topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } } HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font- awesome/4.7.0/css/font-awesome.min.css\"> <script> function resNav() { var x = document.getElementById(\"myTopnav\"); if (x.className === \"topnav\") { x.className += \" responsive\"; } else { x.className = \"topnav\"; } } </script> </head> <body> <h1>Responsive Navigation Bar</h1> <div class=\"topnav\" id=\"myTopnav\"> <a href=\"# \" class=\"active\">Home</a> <a href=\"# \">News</a> <a href=\"# \">Contact</a> <a href=\"# \">About</a> <a href=\"javascript:void(0);\" class=\"icon\" onclick=\"resNav()\"> <i class=\"fa fa-bars\"></i> </a> </div> </body> </html>

306 CHAPTER 6: RESPONSIVE WEB DESIGN ภาพที่ 6.14 การแสดงแถบนาทางแบบ Responsive ทีม่ า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560) Responsive Sidebar การกาหนดคุณสมบัติให้กับแถบนาทางด้านข้าง (Sidebar) เพื่อแสดงผลในเว็บเพจแบบ Responsive แถบนาทางจะมีรูปแบบที่แตกต่างกัน ข้ึนอยู่กับขนาดความกว้างของหน้าจอแสดงผล มี รปู แบบการกาหนดคุณสมบัติและกาหนดคา่ ดงั น้ี

CHAPTER 6: RESPONSIVE WEB DESIGN 307 Example /* css file: responsivelayout.css */ body { margin: 0; } .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } .sidebar a { display: block; color: black; padding: 16px; text-decoration: none; } .sidebar a.active { background-color: coral; color: white; } .sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 800px) { .sidebar { width: 100%; height: auto; position: relative; } .sidebar a {float: left;} div.content {margin-left: 0;} } @media screen and (max-width: 400px) { .sidebar a { text-align: center; float: none; } }

308 CHAPTER 6: RESPONSIVE WEB DESIGN HTML5 <!doctype html> <html> <head> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"css/responsivelayout.css\"> </head> <body> <div class=\"sidebar\"> <a class=\"active\" href=\"# \">Home</a> <a href=\"#\">News</a> <a href=\"#\">Contact</a> <a href=\"#\">About</a> </div> <div class=\"content\"> <h1>Responsive Sidebar</h1> <p>Information science is a field primarily concerned with the analysis, collection, classification, manipulation, storage, retrieval, movement, dissemination, and protection of information.</p> </div> </body> </html>

CHAPTER 6: RESPONSIVE WEB DESIGN 309 ภาพท่ี 6.15 การแสดงแถบนาทางด้านข้างแบบ Responsive ท่ีมา: (ราชวทิ ย์ ทพิ ย์เสนา, 2560) สรปุ การออกแบบเว็บไซต์ให้สามารถตอบสนองการใช้งานกับทุกอุปกรณ์ท่ีมขี นาดหนา้ จอแตกต่าง กัน เป็นการออกแบบเว็บไซต์เพื่อตอบสนองการใช้งานของผู้ใช้ในยุคปัจจุบัน เน่ืองจากความ หลากหลายของอุปกรณ์ที่สามารถเข้าถึงอินเทอร์เน็ตและเว็บไซต์ มีปริมาณเพ่ิมมากขึ้น จึงส่งผลให้ ผู้ใช้สามารถเข้าถึงเว็บไซต์ได้ง่าย สะดวก รวดเร็ว และเข้าถึงได้ตลอดเวลา ซ่ึงความหลากหลายของ อปุ กรณ์ จึงทาให้อปุ กรณ์แต่ละประเภทมีขนาดที่แตกต่างกัน ขน้ึ อย่กู ับวตั ถปุ ระสงค์ในการใช้งาน โดย การออกแบบเว็บไซต์แบบ Responsive จะใช้สไตล์ชีตเป็นคาส่ังควบคุมการแสดงผลเว็บเพจ เพื่อให้ สามารถแสดงผลได้อย่างยืดหยุ่น สามารถปรับเปล่ียนขนาดของเว็บเพจ ตามขนาดหน้าจอของ อุปกรณ์แสดงผล โดยท่ีเนื้อหาในเว็บเพจยังคงแสดงผลได้ดี มีความผิดเพ้ียนน้อยที่สุด ดังน้ัน แนว ทางการออกแบบและพัฒนาเว็บไซต์ในยุคปัจจุบัน นักพัฒนาเว็บไซต์จะต้องศึกษาการเปล่ียนแปลง ของเทคโนโลยที ี่ใชค้ วบคุมการแสดงผลเว็บ เพื่อพัฒนาเว็บไซตใ์ ห้สามารถรองรับการเปล่ียนแปลงของ อปุ กรณป์ ระเภทตา่ ง ๆ และก้าวทนั เทคโนโลยีเวบ็ ในอนาคต

310 CHAPTER 6: RESPONSIVE WEB DESIGN

เอกสารอ้างอิง ราชวิทย์ ทพิ ยเ์ สนา. (2560). การสรา้ งสรรค์ภาพประกอบตาราวชิ าการ. [ไฟล์คอมพิวเตอร์]. อดุ รธานี: สาขาวชิ าสารสนเทศศาสตร์ คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวทิ ยาลยั ราชภัฏอุดรธานี. สมชาย มโนธรารักษ์ และอัจจิมา เลี้ยงอยู.่ (2553). ใชง้ าน CSS ใหเ้ ตม็ ประสิทธิภาพ. กรุงเทพฯ: เคทพี ี คอมพ์ แอนด์ คอนซัลท์. Nice, B. (2017). Best Practices of Responsive Web Design. Retrieved August 20, 2018, from https://medium.com/level-up-web/best-practices-of-responsive- web-design-6da8578f65c4. W3Schools. (1999f). Responsive Web Design - Media Queries. Retrieved January 28, 2018, from https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

บทที่ 7 การใช้งานโปรแกรม Adobe Dreamweaver CC โปรแกรม Adobe Dreamweaver CC เป็นโปรแกรมสำหรับออกแบบและสร้ำงเว็บเพจ มี ควำมสำมำรถในกำรสร้ำงเว็บเพจหรือแอปพลิเคชันด้วยภำษำคอมพิวเตอร์ มีเคร่ืองมือท่ีช่วยอำนวย ควำมสะดวกในกำรสร้ำงเว็บเพจ สำมำรถแสดงมุมมองกำรทำงำนในมุมมองของกำรเขียนคำสั่งและ มุมมองของกำรออกแบบและแสดงผลจริง จึงจัดอยู่ในโปรแกรมประเภท WYSIWYG (What You See Is What You Get) ซงึ่ เป็นโปรแกรมท่เี ม่อื มกี ำรสรำ้ งหรือแก้ไขคำส่งั ที่เปน็ ภำษำทำงคอมพิวเตอร์ โปรแกรมจะแสดงตัวอย่ำงเสมือนจริงให้เห็นโดยทันที หรือหำกมีกำรแทรกภำพและจัดวำง องค์ประกอบตำ่ ง ๆ ในมมุ มองกำรออกแบบ โปรแกรมจะสร้ำงคำสงั่ ใหโ้ ดยอัตโนมตั ิ นกั พัฒนำเว็บไซต์ ส่วนใหญ่จงึ นิยมใชง้ ำนโปรแกรม Adobe Dreamweaver เพือ่ สร้ำงเว็บเพจให้มีควำมสมบรู ณ์ โปรแกรม Adobe Dreamweaver CC จัดอยู่ในชุดของ Adobe Creative Cloud ซ่ึงเป็น ชุดโปรแกรมท่ีสำมำรถดำวน์โหลดได้จำกเว็บไซต์ www.adobe.com/creativecloud โดยผู้ใช้ สำมำรถทดลองใช้งำนโปรแกรมได้ฟรี และหำกตอ้ งกำรใช้งำนอย่ำงเต็มรูปแบบ ผูใ้ ช้ตอ้ งเสยี คำ่ ใช้จ่ำย เพื่อซ้ือหรือเช่ำโปรแกรมแบบรำยเดือน และยังสำมำรถเลือกซ้ือหรือเช่ำเฉพำะโปรแกรมท่ีต้องกำรใช้ งำนได้ ซึ่งข้อดี คือ เม่ือมีกำรปรับปรุงโปรแกรมจำกทำงบริษัท ผู้ใช้สำมำรถปรับปรุงโปรแกรมได้ฟรี ตลอดอำยุกำรใช้งำน จึงไม่จำเป็นต้องลบและติดต้ังโปรแกรมใหม่ ผู้ใช้สำมำรถปรับปรุงส่วนต่ำง ๆ ผำ่ นเว็บไซต์ไดต้ ลอดเวลำ (อวยพร โกมลวิจติ รกลุ , 2558: 98-99) ภำพท่ี 7.1 สัญลกั ษณโ์ ปรแกรม Adobe Dreamweaver CC ท่ีมำ: (Adobe, 2017a)

314 CHAPTER 7: ADOBE DREAMWEAVER CC ภำพที่ 7.2 ค่ำใชจ้ ่ำยในกำรเช่ำโปรแกรมรำยเดือน ท่ีมำ: (Adobe, 2018: 1) สว่ นประกอบหลกั ของโปรแกรม เมื่อเปิดโปแกรม Adobe Dreamweaver CC ผู้ใช้จะพบกับหน้ำจอหลักของโปรแกรม โดย จะมีส่วนประกอบต่ำง ๆ แสดงอยู่ในหน้ำจอโปรแกรม รวมถึงเครื่องมือและคำส่ัง มีรำยละเอียด สว่ นประกอบหลักของโปรแกรม ดงั ภำพที่ 7.3 A B C D E F ภำพที่ 7.3 สว่ นประกอบหลกั ของโปรแกรม ที่มำ: (Adobe, 2017a)

CHAPTER 7: ADOBE DREAMWEAVER CC 315 1. Menu Bar (A) แถบเมนูหลักของโปรแกรม เป็นแถบท่ีรวมคำส่ังท่ีใช้สำหรับจัดกำรเอกสำรเว็บและกำรตง้ั ค่ำส่วนต่ำง ๆ โปรแกรม โดยเมนูหลักจะแบ่งออกเป็นหมวดหมู่ตำมลกั ษณะกำรใช้งำน มีรำยละเอียด ดงั ตำรำงที่ 7.1 ตำรำงที่ 7.1 แถบเมนูหลกั ของโปรแกรม Adobe Dreamweaver CC Menu Descriptions File เมนูรวมคำสั่งสำหรับจัดกำรไฟล์เอกสำรเว็บ เช่น สร้ำงไฟล์ใหม่ เปิดไฟล์ บันทึกไฟล์ นำเข้ำ หรือส่งออกไฟล์ กำรพมิ พ์ กำรกำหนดคุณสมบตั หิ น้ำเว็บเพจ เปน็ ตน้ Edit เมนูรวมคำสง่ั สำหรบั ปรบั แต่งหรอื แกไ้ ขเอกสำรเว็บ เช่น ตัด คัดลอก วำง เป็นต้น รวมถึงกำร ต้ังคำ่ ทัว่ ไปของโปรแกรม เชน่ กำหนดลกั ษณะตวั อักษร กำหนดภำษำเรมิ่ ตน้ เปน็ ตน้ View เมนูรวมคำส่ังสำหรับกำหนดมุมมองกำรแสดงผลของโปรแกรม เช่น แสดงมุมมองของโค้ด แสดงมุมมองกำรออกแบบ เป็นต้น Insert เมนูรวมคำสง่ั สำหรบั แทรกองคป์ ระกอบต่ำง ๆ ลงในเอกสำรเวบ็ เช่น แทรกภำพ แทรกตำรำง แทรกหวั ขอ้ หลกั แทรกย่อหน้ำ แทรกลิงก์ แทรกฟอร์ม เปน็ ต้น Tools เมนูรวมเครอ่ื งมือสำหรับจัดกำรเอกสำรเว็บ เช่น เครื่องมือสำหรับประมวลผลคำสัง่ ของภำษำ ตำ่ ง ๆ เครื่องมอื จดั กำรแบบอักษร เครอ่ื งสรำ้ งแท็ก HTML เป็นตน้ Find เมนูรวมคำส่งั สำหรับกำรค้นหำและแทนที่ข้อมูลในเอกสำรเว็บ เช่น ค้นหำข้อควำมและแทนที่ ดว้ ยขอ้ ควำมใหม่ เปน็ ตน้ Site เมนรู วมคำสง่ั สำหรับจดั กำรโฟลเดอร์หลกั ท่ใี ชส้ ำหรบั จัดเก็บไฟล์ตำ่ ง ๆ ของเวบ็ ไซต์ เชน่ สรำ้ ง ตำแหนง่ โฟลเดอรใ์ หม่ จัดกำรโฟลเดอร์ เปน็ ต้น Window เมนูรวมคำสั่งสำหรับจัดกำรหน้ำต่ำงในโปรแกรม เช่น ซ่อน/แสดงแถบเครื่องมือ ซ่อน/แสดง แผงควบคุม ปรับเปล่ยี นมุมมองกำรทำงำนของโปรแกรม เปน็ ตน้ Help เมนสู ำหรบั แสดงขอ้ มูลควำมชว่ ยเหลอื เกย่ี วกบั วิธกี ำรใช้งำนโปรแกรม สำมำรถเรียกดคู ู่มือกำร ใช้งำนโปรแกรมผ่ำนเว็บไซต์ได้ 2. View Bar (B) แถบเมนูสำหรับกำหนดมุมมองกำรแสดงผลกำรทำงำนของโปรแกรม ประกอบด้วย 1) Code แสดงในมุมมองคำส่ังหรือโค้ด 2) Split แสดงในมุมมองคำสั่งกับมุมมองออกแบบโดยใช้กำร แบง่ หน้ำจอออกเป็น 2 สว่ น 3) Design แสดงในมมุ มองออกแบบ และ 4) Live View แสดงในมุมมอง เวบ็ เพจเสมอื นจรงิ ทแ่ี สดงผำ่ นโปรแกรมแสดงผลเวบ็ (Web Browser) ดงั ภำพท่ี 7.4

316 CHAPTER 7: ADOBE DREAMWEAVER CC Design Split Code Live ภำพที่ 7.4 มมุ มองกำรแสดงผลกำรทำงำน ทีม่ ำ: (Adobe, 2017a)

CHAPTER 7: ADOBE DREAMWEAVER CC 317 3. Tools Bar (C) แถบรวมเครื่องมือสำหรับจัดกำรเอกสำรเว็บ แสดงในรูปแบบของสญั ลักษณ์ไอคอน (Icon) ซึ่งจะช่วยอำนวยควำมสะดวกให้กับผู้ใช้ในกำรจัดกำรเอกสำรให้อยู่ในรูปแบบต่ำง ๆ มีรำยละเอียด กำรใช้งำนเคร่อื งมอื ดงั ตำรำงท่ี 7.2 ตำรำงท่ี 7.2 เคร่ืองมือสำหรบั จดั กำรเอกสำรเว็บ Name Icon Descriptions Open Document เปดิ หน้ำต่ำงเอกสำรทม่ี กี ำรเปดิ ใชง้ ำนอยใู่ น Tab File Management จดั กำรไฟลเ์ อกสำร Show the Live View แสดงมมุ มองเวบ็ เพจเสมือนจริงพร้อมกับมมุ มองโค้ด Source in code view Collapse Full Tag ยุบแท็กทง้ั หมดในเอกสำรเว็บ Collapse Selection ยบุ แท็กในส่วนทเ่ี ลือก Expand All แสดงแท็กทีย่ บุ ทัง้ หมด Select Parent tag เลอื กแทก็ หลัก Format Source Code จัดรปู แบบโคด้ ให้อยู่ในรปู แบบท่ีถูกตอ้ ง Apply Comment ใช้งำนควำมคดิ เหน็ ในตำแหน่งท่ีเลือก Remove Comment ลบควำมคิดเหน็ Balance Braces แสดงขอบเขตของวงเลบ็ { } ใหเ้ ห็นจดุ เริ่มตน้ และจดุ ส้ินสดุ ของวงเล็บ Indent Code เล่อื นตำแหนง่ โค้ดในบรรทัดไปทำงขวำ ครั้งละ 1 ยอ่ หน้ำ Outdent Code เล่ือนตำแหน่งโคด้ ในบรรทัดกลบั ทำงซ้ำย ครง้ั ละ 1 ยอ่ หนำ้ Word Wrap อนญุ ำต/ไมอ่ นุญำต ให้ตดั คำเมื่อคำสง่ั มีควำมยำวเกนิ ขอบหนำ้ จอ Show Code Navigator แสดงแถบนำทำงโค้ด Recent Snippets แสดงกำรทำงำนลำ่ สุดที่เกดิ ขน้ึ ในเอกสำรเวบ็ Move or Convert CSS ย้ำยหรือแปลงคำสง่ั ทเ่ี ลือกให้อยู่ในรปู แบบเอกสำร CSS 4. Panel (D) พำเนลหรือแผงควบคุมเครื่องมือและคำส่ังที่นำมำใช้กับเอกสำรเว็บ เช่น พำเนลสำหรับ แทรกข้อมูล พำเนลสำหรับจัดกำรไฟล์ เป็นต้น โดยสำมำรถเรียกใช้งำนพำเนลท่ีต้องกำรได้จำกเมนู Window ซ่ึงจะมีรำยกำรพำเนลให้คลิกเลือกเพื่อแสดงในหนำ้ จอโปรแกรม สำมำรถ เปิด/ปิด พำเนล และจดั พำเนลให้อยู่ในตำแหน่งท่ตี ้องกำรได้ ดงั ภำพท่ี 7.5

318 CHAPTER 7: ADOBE DREAMWEAVER CC ภำพท่ี 7.5 แผงควบคุมเคร่ืองมือและคำสัง่ ทม่ี ำ: (Adobe, 2017a) 5. Workspace (E) พื้นท่ีแสดงผลกำรทำงำน ท้ังในส่วนของมุมมองกำรเขียนคำสั่งและมุมมองกำรออกแบบ สำมำรถย่อ-ขยำย โดยกำรกดป่มุ Ctrl + + หรอื ปุ่ม Ctrl + - บนแป้นคีย์บอร์ด 6. Properties Panel (F) พำเนลคุณสมบัติ คือ แผงควบคุมสำหรับกำหนดคุณสมบัติต่ำง ๆ ให้กับเน้ือหำท่ีแทรกลง ในเอกสำรเว็บ โดยเครื่องมือและคำสั่งจะเปลี่ยนแปลงตำมกำรคลิกเลือกเน้ือหำในหน้ำจอออกแบบ หรือหน้ำจอสำหรับเขียนคำสั่ง เช่น คุณสมบัติของภำพ คุณสมบัติของตำรำง คุณสมบัติของวัตถุที่อยู่ ในเซลลต์ ำรำง คณุ สมบัติของกำรเช่อื มโยง เปน็ ต้น ดงั ภำพที่ 7.6 ภำพที่ 7.6 แผงควบคุมสำหรับกำหนดคุณสมบัติ ทม่ี ำ: (Adobe, 2017a)

CHAPTER 7: ADOBE DREAMWEAVER CC 319 การตงั้ คา่ โปรแกรมเบอื้ งต้น กำรตงั้ ค่ำกำรทำงำนใหก้ ับโปรแกรม Adobe Dreamweaver CC เบ้ืองตน้ เพื่อให้กำรใช้งำน โปรแกรมมีควำมเหมำะสมกับกำรสร้ำงเว็บเพจ โดยกำรต้ังค่ำท่ีมีควำมสำคัญ ประกอบด้วย กำร กำหนดแบบอักษร (Font) และกำรกำหนดรูปแบบเอกสำรเริ่มต้น (New Document) โดยให้ผู้ใช้ คลิกที่เมนู Edit > Preferences จำกนั้นทำกำรเลือกเมนูทำงด้ำนซ้ำยของหน้ำจอ แล้วจึงตั้งค่ำดัง ภำพที่ 7.7 กำหนดรปู แบบภำษำ กำหนดฟอนต์ กำหนดรูปแบบเอกสำร ภำพที่ 7.7 กำรกำหนดแบบอักษรและรปู แบบเอกสำรเรม่ิ ต้น ท่มี ำ: (Adobe, 2017a)

320 CHAPTER 7: ADOBE DREAMWEAVER CC การสร้างเวบ็ เพจ กำรสร้ำงเว็บเพจด้วยโปรแกรม Adobe Dreamweaver CC ผู้ใช้สำมำรถสร้ำงเอกสำรเว็บ โดยอำศัยเครื่องมือเป็นตัวช่วยสร้ำงหรือเขียนคำส่ัง ซึ่งในกำรใช้งำนเคร่ืองมือน้ัน ผู้ใช้สำมำรถแทรก เน้ือหำรูปแบบต่ำง ๆ ไม่ว่ำจะเป็น ข้อควำม ภำพ หรือตำรำง ได้อย่ำงสะดวก อีกท้ังยังมีแม่แบบเว็บ เพจสำเร็จรูป (Template) ให้เลือกใช้ โดยท่ีโปรแกรมจะทำกำรประมวลผลโค้ดเอกสำรเว็บให้โดย อัตโนมัติ จึงช่วยอำนวยควำมสะดวกในกำรสรำ้ งเว็บเพจให้กับผู้ใชไ้ ด้เป็นอย่ำงดี มีรำยละเอียดกำรใช้ งำนโปรแกรม ดังนี้ 1. การกาหนดโฟลเดอร์สาหรับจัดเกบ็ ไฟล์ กำรกำหนดโฟลเดอร์สำหรับจัดเก็บไฟล์ เป็นข้ันตอนแรกของกำรเร่ิมต้นกำรทำงำน โดย ผู้ใช้จะต้องสร้ำงโฟลเดอร์สำหรับจัดเก็บไฟล์เอกสำรเว็บหรือไฟล์เอกสำรอ่ืน ๆ ไว้ล่วงหน้ำ จำกน้ัน คลิกเลือกเมนู Site > New Site โปรแกรมจะแสดงหน้ำต่ำง Site Setup ในเมนู Site ให้ผู้ใช้กำหนด ชื่อเว็บไซต์ (Site Name) และกำหนดที่อยู่ของโฟลเดอร์สำหรับจัดเก็บไฟล์เอกสำร (Local Site Folder) ดงั ภำพท่ี 7.8 กำหนดช่ือ คลิกเพื่อเลอื กโฟลเดอร์ ภำพที่ 7.8 กำรกำหนดโฟลเดอร์สำหรบั จดั เก็บไฟล์ ท่มี ำ: (Adobe, 2017a)

CHAPTER 7: ADOBE DREAMWEAVER CC 321 กำรกำหนดโฟลเดอร์ท่ีใช้เป็นแหล่งจดั เกบ็ ไฟล์ภำพเพ่อื นำมำใช้งำนในเว็บไซต์ โดยคลิกท่ีเมนู Advanced Setting > Local Info จำกน้ันให้ผู้ใช้กำหนดโฟลเดอร์เร่ิมต้นที่ใช้เป็นแหล่งจัดเก็บไฟล์ ภำพโดยเฉพำะ (Default Images folder) ซ่ึงโดยส่วนใหญ่มักจะกำหนดช่ือโฟลเดอร์เป็น \"images\" หรอื \"figures\" และตอ้ งอย่ภู ำยใตโ้ ฟลเดอร์หลกั ของเวบ็ ไซต์ ดงั ภำพท่ี 7.9 คลิกเพื่อเลือกโฟลเดอร์ ภำพที่ 7.9 กำรกำหนดโฟลเดอร์ทใ่ี ช้สำหรับจดั เกบ็ ไฟล์ภำพ ทม่ี ำ: (Adobe, 2017a) เม่ือกำหนดชื่อเว็บไซต์และกำหนดโฟลเดอร์สำหรบั จัดเก็บไฟล์เว็บไซต์เรียบร้อยแลว้ ให้คลิก ท่ีปุ่ม Save โดยโฟลเดอร์สำหรับจัดเก็บไฟล์จะแสดงในพำเนล Files ซ่ึงจะสำมำรถเปิดไฟล์เอกสำร เวบ็ หรอื เอกสำรอ่ืน ๆ ได้อยำ่ งสะดวก และหำกต้องกำรแก้ไขโฟลเดอร์ ให้คลกิ ท่เี มนู Site > Manage Sites โดนสำมำรถเพม่ิ Site ใหม่ สร้ำงสำเนำของ Site แก้ไขหรือลบ Site เดิมได้ ดงั ภำพที่ 7.10 Files Panel จัดกำร Site ที่เลือก นำเขำ้ Site หรือสร้ำง Site ใหม่ ภำพที่ 7.10 พำเนล Files และกำรจัดกำร Site ท่มี ำ: (Adobe, 2017a)

322 CHAPTER 7: ADOBE DREAMWEAVER CC กำรจดั กำรไฟล์หรอื โฟลเดอรใ์ นพำเนล Files โดยกำรคลกิ ขวำในตำแหน่งไฟลห์ รอื โฟลเดอร์ท่ี ตอ้ งกำร จำกน้นั เลือกคำสงั่ ท่ีต้องกำร เชน่ Open Copy Past Delete เปน็ ตน้ หำกต้องกำรสร้ำงไฟล์ หรือโฟลเดอร์ใหม่ ให้คลิกเลือกคำส่งั New File หรือ New Folder ดงั ภำพท่ี 7.11 ภำพที่ 7.11 กำรจดั กำรไฟลห์ รอื โฟลเดอร์ในพำเนล Files ทม่ี ำ: (Adobe, 2017a) mywebsite จดั เก็บไฟล์เสยี งเทำ่ นัน้ audio จดั เกบ็ ไฟลส์ ไตลช์ ตี เท่ำนั้น css จดั เกบ็ ไฟลส์ ำหรบั ดำวนโ์ หลดเท่ำนั้น filedownload จัดเก็บไฟลภ์ ำพเทำ่ น้นั images จดั เก็บไฟล์จำวำสคริปต์เทำ่ นน้ั javascripts จดั เก็บไฟล์เว็บเพจยอ่ ยเทำ่ น้ัน subwebpage จัดเก็บไฟล์วิดีโอเทำ่ นัน้ video ไฟล์เวบ็ เพจเกี่ยวกับหนว่ ยงำน about.html ไฟล์เวบ็ เพจตดิ ตอ่ หนว่ ยงำน contact.html ไฟล์หน้ำแรกของเวบ็ ไซต์ index.html ภำพที่ 7.12 กำรกำหนดโฟลเดอร์สำหรบั จดั เก็บเว็บไซต์ ที่มำ: (รำชวทิ ย์ ทพิ ยเ์ สนำ, 2560)

CHAPTER 7: ADOBE DREAMWEAVER CC 323 2. การสร้างและการบันทึกเอกสารเวบ็ กำรสร้ำงเอกสำรเว็บใหม่ในรูปแบบเอกสำรเปล่ำ โดยคลิกที่เมนู File > New หรือกดปุ่ม Ctrl + N บนแป้นคีย์บอร์ด โปรแกรมจะแสดงหน้ำต่ำง New Document ให้ผู้ใช้เลือกประเภทของ เอกสำรเว็บ (Document Type) ท่ีจะใช้สร้ำงเว็บเพจ เช่น HTML PHP CSS เป็นต้น จำกนั้นทำกำร กำหนดหัวเรื่องของเอกสำรเวบ็ (Title) และประเภทของ HTML (Doc Type) แล้วคลิกที่ปุ่ม Create เพ่ือสร้ำงไฟล์เอกสำรใหม่ ดงั ภำพท่ี 7.13 กำหนด Title และ Doc Type เลอื กประเภท ไฟล์เอกสำร HTML5 ภำพที่ 7.13 กำรสรำ้ งเอกสำรเวบ็ ท่มี ำ: (Adobe, 2017a) กำรสร้ำงเอกสำรเว็บใหม่จำกแม่แบบสำเร็จรูป โดยคลิกที่เมนู File > New โปรแกรมจะ แสดงหน้ำต่ำง New Document ให้ผู้ใช้เลือกเมนู Starter Templates จำกนั้นเลือกแม่แบบที่ ตอ้ งกำร แลว้ จงึ คลกิ ท่ีปมุ่ Create เพื่อสรำ้ งไฟล์เอกสำรใหม่ ดงั ภำพท่ี 7.14

324 CHAPTER 7: ADOBE DREAMWEAVER CC แสดงตวั อย่ำงแมแ่ บบ เลอื กแมแ่ บบ ภำพท่ี 7.14 กำรสร้ำงเอกสำรเว็บจำกแม่แบบสำเร็จรูป ทมี่ ำ: (Adobe, 2017a) เม่ือเลือกใช้งำนแม่แบบเว็บเพจสำเร็จรูป โปรแกรมจะสร้ำงแม่แบบเว็บเพจที่มีกำรจัด ตำแหน่งเค้ำโครง (Layout) และมีตัวอย่ำงเน้ือหำท่ีมีกำรจัดรูปแบบไว้เรียบร้อยแล้ว ผู้ใช้เพียงเปลี่ยน เนื้อหำในสว่ นที่ต้องกำร หรอื ปรบั แตง่ รูปแบบเพ่ิมเติมเพียงเล็กน้อย กจ็ ะได้เว็บเพจในเวลำอันรวดเร็ว ซ่ึงโปรแกรมจะประมวลผลให้ส่วนของโค้ดโดยอัตโนมัติ ทั้งน้ี กำรใช้งำนแม่แบบเว็บเพจสำเร็จรูป อำจจะได้ตำแหน่งเค้ำโครงหรือกำรจัดรูปแบบที่ไม่ตรงกับควำมต้องกำรของผู้ใช้ ดังนั้น ผู้ใช้จึงควร พจิ ำรณำถึงควำมเหมำะสมในกำรใช้งำนแม่แบบเว็บเพจสำเร็จรูป

CHAPTER 7: ADOBE DREAMWEAVER CC 325 กำรบันทึกเอกสำรเว็บ ให้คลิกท่ีเมนู File > Save As หรือกดปุ่ม Ctrl + Shift + S สำหรับ กำรบันทึกครั้งแรก โปรแกรมจะแสดงหน้ำต่ำง Save As และแสดงตำแหน่งสำหรับบันทึกเอกสำรใน โฟลเดอร์ Site ตำมที่กำหนด ทำกำรกำหนดชื่อไฟล์ (File name) ซึ่งรูปแบบไฟล์ท่ีบันทึกจะอยู่ใน รูปแบบของภำษำท่ีเลือก ผใู้ ช้เพยี งกำหนดชื่อไฟล์ โดยไม่จำเปน็ ต้องพิมพ์นำมสกลุ ไฟล์ต่อท้ำยชื่อไฟล์ หรือหำกต้องกำรบันทึกไฟล์ในรูปแบบอ่ืน ๆ สำมำรถเลือกรูปแบบไฟล์ได้ในช่อง Save as type จำกนั้นให้คลิกท่ีปุ่ม Save เพื่อบันทึกไฟล์เอกสำรเว็บ ส่วนกำรบันทึกเม่ือมีกำรเปลี่ยนแปลงของ เอกสำร ใหค้ ลกิ ทเ่ี มนู File > Save หรอื กดป่มุ Ctrl + S บนแป้นคียบ์ อรด์ ดงั ภำพท่ี 7.15 กำหนดชื่อไฟล์ ภำพที่ 7.15 กำรบันทกึ เอกสำรเว็บ ท่ีมำ: (Adobe, 2017a)

326 CHAPTER 7: ADOBE DREAMWEAVER CC 3. การกาหนดคณุ สมบัติเว็บเพจ กำรกำหนดคุณสมบัติเว็บเพจ (Page Properties) เป็นกำรกำหนดคุณสมบัติด้ำนกำร แสดงผลให้กับเว็บเพจ ก่อนกำรเร่ิมต้นสร้ำงเว็บเพจ ซึ่งเว็บเพจแต่ละหน้ำอำจมีคุณสมบัติท่ีแตกต่ำง กนั เชน่ สีพน้ื หลัง สขี ้อควำม ขนำดข้อควำม รูปแบบขอ้ ควำม รปู แบบของลิงก์ กำรกำหนดระยะขอบ เป็นต้น โดยคลิกท่เี มนู File > Page Properties สำหรบั Adobe Dreamweaver CC หรอื คลกิ ที่เมนู Modify > Page Properties สำหรับ Adobe Dreamweaver CS6 มีคณุ สมบัตดิ ังน้ี 3.1 Appearance (CSS) กำรกำหนดรูปแบบกำรแสดงผลของเว็บเพจในรูปแบบของ CSS (Cascading Style Sheets) โดยโปรแกรมจะสร้ำงคำส่ัง CSS สำหรับกำหนดรูปแบบกำรแสดงผล เช่น กำหนดฟอนต์ กำหนดขนำดข้อควำม กำหนดสขี อ้ ควำม เป็นตน้ มีรำยละเอยี ดดงั ภำพที่ 7.16 ภำพท่ี 7.16 กำรกำหนดคุณสมบัติ Appearance (CSS) ทม่ี ำ: (Adobe, 2017a) ตำรำงที่ 7.3 คุณสมบัติ Appearance (CSS) Properties Descriptions Page font กำหนดแบบตัวอักษร (ฟอนต์) ทีจ่ ะใช้ในเวบ็ เพจ กำหนดรูปแบบตวั อักษร เชน่ อักษร ตัวเอียง อักษรตวั ขดี เสน้ ใต้ เปน็ ต้น และกำหนดน้ำหนกั หรือควำมหนำของตัวอกั ษร Size กำหนดขนำดของตัวอกั ษร Text color กำหนดสขี องขอ้ ควำม Background color กำหนดสพี นื้ หลังของเวบ็ เพจ Background image กำหนดภำพพ้ืนหลังของเวบ็ เพจ โดยใช้ภำพทเี่ ตรียมไว้ Repeat กำหนดกำรวนซำ้ ของภำพพน้ื หลัง ได้แก่ วนตำมแนวแกน x และแกน y Margins กำหนดระยะขอบของเว็บเพจกับขอบหน้ำจอโปรแกรมแสดงผลเว็บ ประกอบด้วย ขอบซ้ำย ขอบขวำ ขอบบน และขอบลำ่ ง

CHAPTER 7: ADOBE DREAMWEAVER CC 327 3.2 Appearance (HTML) กำรกำหนดรปู แบบกำรแสดงผลของเวบ็ เพจในรูปแบบของ HTML โดยโปรแกรมจะ สรำ้ งคำส่งั HTML สำหรับกำหนดรปู แบบกำรแสดงผล เชน่ กำหนดภำพพน้ื หลัง กำหนดพื้นหลัง กำหนดสีขอ้ ควำม กำหนดสขี องลิงก์ เป็นต้น มรี ำยละเอียดดงั ภำพท่ี 7.17 ภำพที่ 7.17 กำรกำหนดคุณสมบตั ิ Appearance (HTML) ที่มำ: (Adobe, 2017a) ตำรำงท่ี 7.4 คณุ สมบัติ Appearance (HTML) Properties Descriptions Background image กำหนดภำพพ้ืนหลังของเวบ็ เพจ โดยใช้ภำพท่เี ตรยี มไว้ Background กำหนดสพี น้ื หลังของเวบ็ เพจ Text กำหนดสีของข้อควำม Link กำหนดสีของลิงก์ที่เป็นขอ้ ควำม Visited links กำหนดสขี องลงิ กท์ ี่เป็นข้อควำม เมื่อมกี ำรคลกิ ลิงก์แล้ว Active links กำหนดสีของลิงก์ทเ่ี ปน็ ข้อควำม ขณะกำลงั คลิกลงิ ก์ Margins กำหนดระยะขอบของเว็บเพจกับขอบหน้ำจอโปรแกรมแสดงผลเว็บ ประกอบด้วย ขอบซ้ำย ขอบขวำ ขอบบน และขอบล่ำง

328 CHAPTER 7: ADOBE DREAMWEAVER CC 3.3 Links (CSS) กำรกำหนดรูปแบบของลิงก์ในรูปแบบของ CSS (Cascading Style Sheets) โดย โปรแกรมจะสร้ำงคำสั่ง CSS เพื่อกำหนดรูปแบบกำรทำงำนของลิงก์ เช่น สีของลิงก์ ขนำดของลิงก์ กำรขดี เส้นใต้ลิงก์ เปน็ ต้น มรี ำยละเอียดดงั ภำพท่ี 7.18 ภำพที่ 7.18 กำรกำหนดคุณสมบตั ิ Link (CSS) ทีม่ ำ: (Adobe, 2017a) ตำรำงท่ี 7.5 คุณสมบตั ิ Link (CSS) Properties Descriptions Link font กำหนดแบบตัวอักษร (ฟอนต์) ของข้อควำมท่ีเป็นลิงก์ กำหนดรูปแบบตัวอักษร เช่น อกั ษรตวั เอียง อักษรตัวขดี เส้นใต้ เป็นตน้ และกำหนดน้ำหนักหรือควำมหนำของตัวอักษร Size กำหนดขนำดของตัวอักษร Link color กำหนดสขี องลิงกท์ เ่ี ป็นข้อควำม Rollover links กำหนดสขี องลิงกท์ เี่ ป็นข้อควำม ขณะวำงเมำสเ์ หนอื ลิงก์ Visited links กำหนดสีของลงิ กท์ ี่เปน็ ขอ้ ควำม เมอื่ มีกำรคลิกลิงกแ์ ล้ว Active links กำหนดสขี องลิงก์ท่ีเปน็ ขอ้ ควำม ขณะกำลังคลิกลิงก์ Underline style รูปแบบเส้นใต้ลิงก์ ได้แก่ ไม่แสดงเส้นใต้ (Never underline) แสดงเส้นใต้ (Always underline) แสดงเส้นใต้ขณะวำงเมำส์เหนือลิงก์เท่ำนั้น (Show underline only on rollover) และซ่อนเสน้ ใต้ขณะวำงเมำส์เหนอื ลงิ ก์ (Hide underline on rollover)

CHAPTER 7: ADOBE DREAMWEAVER CC 329 3.4 Heading (CSS) กำรกำหนดรปู แบบของหวั ข้อหลักในรูปแบบของ CSS (Cascading Style Sheets) โดยโปรแกรมจะสร้ำงคำส่งั CSS เพ่ือกำหนดรูปแบบของหัวขอ้ หลัก เช่น ขนำดของหัวข้อหลกั สขี อง หวั ขอ้ หลัก เป็นต้น มีรำยละเอียดดงั ภำพท่ี 7.19 ภำพท่ี 7.19 กำรกำหนดคุณสมบตั ิ Heading (CSS) ท่มี ำ: (Adobe, 2017a) ตำรำงที่ 7.6 คณุ สมบัติ Heading (CSS) Properties Descriptions Heading font กำหนดแบบตัวอักษร (ฟอนต์) ของหัวข้อหลัก กำหนดรูปแบบตัวอักษร เช่น อักษรตัว เอยี ง อักษรตวั ขีดเส้นใต้ เปน็ ตน้ และกำหนดน้ำหนกั หรอื ควำมหนำของตัวอักษร Heading 1 กำหนดขนำดและสขี องหัวขอ้ หลัก ระดับ 1 Heading 2 กำหนดขนำดและสขี องหวั ขอ้ หลัก ระดบั 2 Heading 3 กำหนดขนำดและสขี องหัวขอ้ หลกั ระดบั 3 Heading 4 กำหนดขนำดและสีของหวั ขอ้ หลัก ระดบั 4 Heading 5 กำหนดขนำดและสีของหวั ขอ้ หลกั ระดับ 5 Heading 6 กำหนดขนำดและสีของหวั ขอ้ หลกั ระดับ 6

330 CHAPTER 7: ADOBE DREAMWEAVER CC 3.5 Title/Encoding กำรกำหนดหัวเรอื่ งของเวบ็ เพจ (Title) ทีจ่ ะใช้แสดงในโปรแกรมแสดงผลเว็บ และกำร เข้ำรหัสภำษำ (Encoding) ของภำษำที่ใช้แสดงในเวบ็ เพจ ซึง่ กำรเขำ้ รหัสภำษำโดยท่ัวไปจะเลือกเป็น Unicode (UTF-8) ซ่ึงรองรับกำรแสดงผลได้หลำยภำษำรวมถึงภำษำไทย หรือหำกเว็บเพจแสดงผล เฉพำะภำษำไทยเพียงภำษำเดียว สำมำรถกำหนดให้เป็น ไทย (Windows) มีรำยละเอียดดังภำพท่ี 7.20 ภำพท่ี 7.20 กำรกำหนดคุณสมบัติ Title/Encoding ท่ีมำ: (Adobe, 2017a) ตำรำงที่ 7.7 คุณสมบตั ิ Title/Encoding Properties Descriptions Title กำหนดข้อควำมหัวเร่ืองของเว็บเพจ หำกกำหนดในข้ันตอนสร้ำงเอกสำรใหม่ เรยี บร้อยแล้ว ขอ้ ควำมจะแสดงในสว่ นของ Title โดยไม่ตอ้ งกำหนดใหม่ Document Type กำหนดประเภทของเอกสำร HTML Encoding กำหนดกำรเขำ้ รหัสภำษำ เช่น Unicode (UTF-8) หรือ ไทย (Windows) เป็นตน้ Unicode กำหนดรูปแบบพน้ื ฐำนของรหัสภำษำ Unicode Normalization Form

Pages:

lavanh9979

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Description: ວິຊາ การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ

Read the Text Version

lavanh9979

TOP SEARCH

RELATED PUBLICATIONS