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

การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ Web Site Design and Development for Information Management ราชวิทย์ ทิพย์เสนา วท.ม. (เทคโนโลยสี ารสนเทศ) คณะมนุษยศาสตรแ์ ละสังคมศาสตร์ มหาวิทยาลัยราชภัฏอดุ รธานี 2561

คานา การเผยแพร่สารสนเทศผ่านเว็บไซต์ ถือเป็นช่องทางการเผยแพร่สารสนเทศท่ีสามารถเข้าถึง กลุ่มเป้าหมายหรือบุคคลทั่วไปได้อย่างมีประสิทธิภาพ เนื่องจากปัจจุบัน การเข้าถึงอินเทอร์เน็ตมี ความสะดวก รวดเร็ว และมีอุปกรณ์ท่ีสามารถใช้งานอินเทอร์เน็ตหลายหลายประเภท การออกแบบ และพัฒนาเว็บไซตเ์ พ่อื ตอบสนองความต้องการของผูใ้ ช้ จงึ มคี วามสาคัญอยา่ งยง่ิ ซง่ึ นักพัฒนาเวบ็ ไซต์ จะต้องมีความรู้ ความเข้าใจ และทักษะเก่ียวกับการออกแบบและพัฒนาเว็บไซต์ ไม่ว่าจะเป็น องค์ประกอบ โครงสร้าง หลักการออกแบบ ภาษาท่ีใช้ในการพัฒนา รวมถึงเทคนิคต่าง ๆ สาหรับการ ออกแบบและพัฒนาเวบ็ ไซต์ ตารา \"การออกแบบและพัฒนาเว็บไซต์เพ่ือการจัดการสารสนเทศ\" จัดทาขึ้นเพ่ือใช้สาหรับ ประกอบการเรียนการสอนในรายวิชา การออกแบบและพัฒนาเว็บไซต์เพื่อการจัดการสารสนเทศ (IS20304) ตามหลักสูตรศิลปศาสตรบัณฑิต สาขาวิชาสารสนเทศศาสตร์ คณะมนุษยศาสตร์และ สังคมศาสตร์ มหาวิทยาลัยราชภัฏอุดรธานี โดยแบ่งเนื้อหาออกเป็น 10 บท ประกอบด้วย 1) อินเทอร์เน็ตและเว็บไซต์ 2) การออกแบบเว็บไซต์ 3) การพัฒนาเว็บไซต์ด้วย HTML5 4) การ จัดรูปแบบเว็บเพจด้วย CSS3 5) คุณสมบัติและการกาหนดค่า CSS3 6) การออกแบบเว็บไซต์ให้ ตอบสนองกับทุกอุปกรณ์ 7) การใช้งานโปรแกรม Adobe Dreamweaver CC 8) การใช้งาน โปรแกรม Adobe Photoshop CC 9) เทคนิคการแสดงผลภาพและตัวอักษร และ 10) ฟอร์มและ การตรวจสอบฟอรม์ ผู้เขียนได้ศึกษาค้นคว้าองค์ความรู้เก่ียวกับการออกแบบและพัฒนาเว็บไซต์ จากแหล่งข้อมูล ต่าง ๆ และถ่ายทอดองค์ความรู้จากประสบการณ์ของผู้เขียนไว้อย่างครบถ้วน จึงหวังเป็นอย่างยิ่งว่า ตาราเล่มนี้จะเป็นประโยชน์แก่ผู้ศึกษา สามารถนาความรู้ไปใช้ประโยชน์เพ่ือจัดการและเผยแพร่ สารสนเทศผ่านเว็บไซต์ หากผู้ศึกษามีข้อสังสัย ข้อเสนอแนะ หรือมีความคิดเห็นประการใด ผู้เขียน ยินดรี ับฟงั และจะปรับปรุงเนอ้ื หาให้มีความทันสมัยต่อไป ราชวทิ ย์ ทิพย์เสนา 1 กรกฎาคม 2561

สารบัญ หนา้ คำนำ ............................................................................................................................................... (1) สำรบญั ............................................................................................................................................(3) สำรบญั ภำพ ....................................................................................................................................(7) สำรบัญตำรำง................................................................................................................................(17) บทท่ี 1 อนิ เทอรเ์ น็ตและเวบ็ ไซต์ .................................................................................................1 อินเทอร์เน็ต ..................................................................................................................... 1 เวบ็ ไซต์ ............................................................................................................................ 9 เว็บเซริ ฟ์ เวอร์................................................................................................................. 16 เวบ็ โฮสต้งิ ...................................................................................................................... 17 สรปุ ............................................................................................................................... 19 เอกสำรอ้ำงอิง ................................................................................................................ 21 บทท่ี 2 การออกแบบเว็บไซต์....................................................................................................23 กระบวนกำรสรำ้ งเว็บไซต์............................................................................................... 23 กำรออกแบบโครงสร้ำงเวบ็ ไซต์ ...................................................................................... 25 กำรออกแบบเค้ำโครงเว็บเพจ......................................................................................... 28 กำรกำหนดขนำดเวบ็ เพจ ............................................................................................... 34 กำรออกแบบระบบนำทำง.............................................................................................. 35 กำรออกแบบกรำฟิกสำหรบั เวบ็ ไซต์............................................................................... 47 สรปุ ............................................................................................................................... 63 เอกสำรอำ้ งอิง ................................................................................................................ 65 บทที่ 3 การพัฒนาเว็บไซต์ด้วย HTML5...................................................................................69 ววิ ัฒนำกำรของ HTML .................................................................................................. 69 รูปแบบแบบกำรเขียนคำสั่ง HTML5.............................................................................. 71 โครงสร้ำงของ HTML5 .................................................................................................. 73 คำสงั่ พ้ืนฐำนใน HTML5 ................................................................................................ 74 คำส่ังแทรกเสยี งและวดิ โี อใน HTML5 ............................................................................ 95

(4) สารบัญ (ตอ่ ) หน้า อิลเิ มนตเ์ ชงิ ควำมหมำยใน HTML5.................................................................................98 แทก็ เมทำ..................................................................................................................... 102 เคร่ืองมือสร้ำงและบนั ทึกไฟล์ HTML5 ........................................................................ 104 สรุป............................................................................................................................. 109 เอกสำรอำ้ งอิง.............................................................................................................. 111 บทที่ 4 การจดั รปู แบบเว็บเพจดว้ ย CSS3...............................................................................113 มำตรฐำนของ CSS ...................................................................................................... 113 รูปแบบกำรเขียน CSS3 ............................................................................................... 115 กำรเรยี กใชง้ ำน CSS3.................................................................................................. 116 ประเภทของ Selectors .............................................................................................. 119 คำสัง่ แทรกควำมคดิ เห็น............................................................................................... 142 คำ่ สีสำหรับสไตลช์ ีต..................................................................................................... 143 หน่วยวดั คำ่ สำหรับสไตล์ชีต ......................................................................................... 150 สรปุ ............................................................................................................................. 151 เอกสำรอำ้ งองิ .............................................................................................................. 153 บทที่ 5 คุณสมบัตแิ ละการกาหนดคา่ CSS3.............................................................................155 คณุ สมบตั ิพื้นหลงั ......................................................................................................... 155 คณุ สมบตั ิเส้นขอบ ....................................................................................................... 178 คุณสมบัติควำมสูงและควำมกวำ้ ง ................................................................................ 188 คุณสมบัตริ ะยะหำ่ งของขอบด้ำนนอก .......................................................................... 194 คณุ สมบตั ิระยะห่ำงจำกขอบด้ำนใน ............................................................................. 196 คณุ สมบัติกำรจดั วำงตำแหน่งวตั ถุ................................................................................ 199 คุณสมบัตติ ัวอักษร....................................................................................................... 222 คุณสมบตั ิข้อควำม ....................................................................................................... 229 คุณสมบัติแทรกเน้ือหำ................................................................................................. 241 คณุ สมบตั ริ ำยกำร ........................................................................................................ 243 คณุ สมบัตเิ สน้ เค้ำรำ่ ง ................................................................................................... 249

(5) สารบญั (ตอ่ ) หน้า คณุ สมบตั ติ ัวช้เี มำส์ ......................................................................................................255 คำ่ แรกเริ่มและค่ำสบื ทอด.............................................................................................258 สรปุ .............................................................................................................................261 บทที่ 6 การออกแบบเว็บไซตใ์ ห้ตอบสนองกับทกุ อุปกรณ์........................................................263 กำรกำหนดพน้ื ที่ทสี่ ำมำรถมองเห็น ..............................................................................264 กำรตรวจสอบคุณสมบตั ิของอุปกรณ์............................................................................265 กำรออกแบบเคำ้ โครงเว็บเพจ.......................................................................................278 Responsive Images ..................................................................................................296 Responsive Videos...................................................................................................302 Responsive Navigation Bar.....................................................................................304 Responsive Sidebar .................................................................................................306 สรปุ .............................................................................................................................309 เอกสำรอำ้ งอิง ..............................................................................................................311 บทที่ 7 การใชง้ านโปรแกรม Adobe Dreamweaver CC .....................................................313 ส่วนประกอบหลักของโปรแกรม ................................................................................... 314 กำรตัง้ คำ่ โปรแกรมเบ้ืองตน้ ..........................................................................................319 กำรสร้ำงเว็บเพจ ..........................................................................................................320 กำรสร้ำงสไตลช์ ตี .........................................................................................................348 สรุป .............................................................................................................................353 เอกสำรอำ้ งองิ ..............................................................................................................155 บทที่ 8 การใชง้ านโปรแกรม Adobe Photoshop CC ..........................................................357 ส่วนประกอบหลักของโปรแกรม ................................................................................... 358 กำรจดั กำรไฟล์.............................................................................................................364 กำรใชง้ ำนเคร่ืองมือ......................................................................................................367 กำรใช้งำนเลเยอร์ ......................................................................................................... 392 กำรปรบั แต่งภำพด้วยตัวกรองภำพ...............................................................................412

(6) สารบญั (ต่อ) หน้า สรปุ ............................................................................................................................. 429 เอกสำรอำ้ งอิง.............................................................................................................. 431 บทที่ 9 เทคนิคการแสดงผลภาพและตัวอกั ษร.........................................................................433 ภำพสไลด์โชว์............................................................................................................... 433 แกลเลอรีภ่ ำพ.............................................................................................................. 440 กล่องแกลเลอร่ภี ำพ ..................................................................................................... 446 กำรขยำยภำพ.............................................................................................................. 454 กำรแสดงภำพทบั เน้ือหำหลกั ....................................................................................... 457 ตัวกรองภำพ................................................................................................................ 461 กำรกำหนดแบบอักษร ................................................................................................. 464 สรปุ ............................................................................................................................. 467 เอกสำรอำ้ งองิ .............................................................................................................. 269 บทท่ี 10 ฟอร์มและการตรวจสอบฟอรม์ .................................................................................471 ฟอร์มอลิ เิ มนต์ ............................................................................................................. 472 ประเภทของฟอรม์ ....................................................................................................... 473 คำสัง่ เพ่ิมเตมิ สำหรับฟอร์ม .......................................................................................... 489 กำรตรวจสอบฟอรม์ ด้วยจำวำสครปิ ต์ .......................................................................... 491 ปรับแตง่ ฟอรม์ ด้วยสไตล์ชีต ......................................................................................... 498 สรุป............................................................................................................................. 503 เอกสำรอำ้ งอิง.............................................................................................................. 505 บรรณานุกรม ..........................................................................................................................507 ดัชนี ........................................................................................................................................513

สารบญั ภาพ หนา้ ภำพท่ี 1.1 หลกั กำรทำงำนของโพรโทคอล HTTP..............................................................................4 ภำพท่ี 1.2 หลกั กำรทำงำนของโพรโทคอล SMTP กับ POP3 ............................................................5 ภำพท่ี 1.3 หลกั กำรทำงำนของโดเมนเนม....................................................................................... 13 ภำพท่ี 1.4 กำรตรวจสอบโดเมนเนมก่อนจดทะเบียน ...................................................................... 14 ภำพที่ 1.5 หลักกำรทำงำนของเวบ็ เซริ ์ฟเวอร์ ................................................................................. 16 ภำพที่ 1.6 หลกั กำรทำงำนของเวบ็ โฮสติ้ง ....................................................................................... 17 ภำพท่ี 2.1 กำรออกแบบโครงสรำ้ งเวบ็ ไซต์ ..................................................................................... 25 ภำพท่ี 2.2 โครงสรำ้ งแบบเรียงลำดับ .............................................................................................. 26 ภำพที่ 2.3 โครงสรำ้ งแบบลำดับช้นั ................................................................................................. 26 ภำพที่ 2.4 โครงสร้ำงแบบตำรำง..................................................................................................... 27 ภำพที่ 2.5 โครงสร้ำงแบบใยแมงมมุ ................................................................................................ 27 ภำพที่ 2.6 กำรออกแบบเค้ำโครงเว็บเพจ........................................................................................ 28 ภำพที่ 2.7 กำรออกแบบตรำสัญลกั ษณ์........................................................................................... 29 ภำพที่ 2.8 กำรออกแบบชื่อเว็บไซต์ ................................................................................................ 29 ภำพท่ี 2.9 กำรออกแบบระบบนำทำง............................................................................................. 30 ภำพท่ี 2.10 กำรออกแบบช่องสบื ค้นข้อมลู ..................................................................................... 30 ภำพที่ 2.11 Google Custom Search.......................................................................................... 31 ภำพที่ 2.12 กำรออกแบบภำพสไลด์ ............................................................................................... 31 ภำพที่ 2.13 กำรออกแบบภำพสไลด์ ............................................................................................... 32 ภำพท่ี 2.14 ส่วนเนอื้ หำของเว็บเพจ................................................................................................ 32 ภำพที่ 2.15 ส่วนข้ำงของเวบ็ เพจ .................................................................................................... 33 ภำพที่ 2.16 ส่วนล่ำงของเวบ็ เพจ .................................................................................................... 34 ภำพท่ี 2.17 แถบนำทำง Sticky/Affix Navbar .............................................................................. 37 ภำพท่ี 2.18 แถบนำทำง Mega Menu........................................................................................... 38 ภำพท่ี 2.19 แถบนำทำง Universal Navigation ........................................................................... 39 ภำพท่ี 2.20 แถบนำทำง Vertical Sliding Navigation.................................................................. 40 ภำพท่ี 2.21 แถบนำทำง Globally Hidden Menu หรือ Hamburger Menu.............................. 41 ภำพท่ี 2.22 แถบนำทำง Responsive Subnav Menu ................................................................. 42 ภำพท่ี 2.23 แถบนำทำง Top Story Carousels............................................................................ 43

(8) สารบญั ภาพ (ต่อ) หนา้ ภำพที่ 2.24 แถบนำทำง Table of Contents................................................................................44 ภำพที่ 2.25 แถบนำทำง All-Caps Corner Links ..........................................................................45 ภำพท่ี 2.26 แถบนำทำง Single Page dot Navigation.................................................................46 ภำพที่ 2.27 ภำพบิตแมพ ................................................................................................................47 ภำพที่ 2.28 ภำพเวกเตอร์ ...............................................................................................................48 ภำพที่ 2.29 ภำพจำกเวบ็ ไซต์ flaticon.com ..................................................................................48 ภำพท่ี 2.30 ภำพจำกเว็บไซต์ rawpixel.com.................................................................................49 ภำพท่ี 2.31 กำรออกแบบตรำสญั ลักษณห์ ลำยขนำด.......................................................................50 ภำพที่ 2.32 กำรไล่ระดับสใี นเวบ็ เพจ...............................................................................................51 ภำพท่ี 2.33 กำรออกแบบภำพกรำฟกิ ให้มคี วำมลึก .........................................................................51 ภำพท่ี 2.34 กำรออกแบบกรำฟิก 2 โทนสี ......................................................................................52 ภำพที่ 2.35 กำรออกแบบกรำฟิกยุค ค.ศ. 1980 และ ค.ศ. 1990 ...................................................52 ภำพที่ 2.36 กำรออกแบบกรำฟกิ เคล่อื นไหวขนำดเล็ก ....................................................................53 ภำพท่ี 2.37 กำรใช้รูปแบบอักษรหนำขนำดใหญ่ .............................................................................53 ภำพท่ี 2.38 กำรออกแบบกรำฟิกด้วยตนเอง ...................................................................................54 ภำพท่ี 2.39 กำรออกแบบกรำฟกิ ด้วยภำพถ่ำย................................................................................54 ภำพที่ 2.40 วงล้อสี .........................................................................................................................55 ภำพที่ 2.41 วรรณะของสี................................................................................................................56 ภำพท่ี 2.42 กำรออกแบบเว็บไซตด์ ้วยสโี ทนร้อนและสีโทนเย็น .......................................................56 ภำพท่ี 2.43 สีคตู่ รงขำ้ ม...................................................................................................................57 ภำพที่ 2.44 สใี กล้เคยี งกบั สีคู่ตรงขำ้ ม..............................................................................................57 ภำพท่ี 2.45 สีใกล้เคียงกัน ...............................................................................................................58 ภำพท่ี 2.46 โครงสีสำมเหล่ียม.........................................................................................................58 ภำพท่ี 2.47 สกี ลำง .........................................................................................................................59 ภำพท่ี 2.48 สีโทนเดียว ...................................................................................................................59 ภำพที่ 2.49 Adobe Color CC.......................................................................................................59 ภำพท่ี 2.50 ลักษณะแบบอักษร Serif และ Sans Serif...................................................................60 ภำพที่ 2.51 เวบ็ ไซต์ f0nt.com สำหรบั ดำวนโ์ หลดแบบอักษร .......................................................61 ภำพท่ี 2.52 เว็บไซต์ fonts.google.com สำหรับดำวน์โหลดแบบอกั ษร ........................................62

(9) สารบัญภาพ (ต่อ) หน้า ภำพท่ี 2.53 เว็บไซต์ befonts.com สำหรับดำวนโ์ หลดแบบอักษร ................................................ 62 ภำพที่ 3.1 กำรปรับขนำดหรือยำ้ ยตำแหน่งวิดีโอ ............................................................................ 97 ภำพท่ี 3.2 ตัวอย่ำงกำรกำหนดโครงสรำ้ งหลักของเวบ็ เพจ.............................................................. 99 ภำพที่ 3.3 หน้ำจอโปรแกรม Notepad........................................................................................ 104 ภำพท่ี 3.4 กำรตง้ั ค่ำรปู แบบตวั อักษรและกำรบันทึกไฟล์ในโปรแกรม Notepad.......................... 105 ภำพที่ 3.5 กำรดำวน์โหลดโปรแกรม ATOM และหน้ำจอเร่ิมต้นโปรแกรม ................................... 106 ภำพที่ 3.6 กำรกำหนดโฟลเดอรส์ ำหรับจัดเก็บไฟล์....................................................................... 107 ภำพที่ 3.7 กำรสรำ้ งไฟล์งำนใหม่ .................................................................................................. 108 ภำพท่ี 3.8 ตวั อยำ่ งกำรตั้งค่ำขนำดตัวอักษรของคำสงั่ ................................................................... 109 ภำพที่ 4.1 ควำมสำมำรถของ CSS ในแต่ละมำตรฐำน.................................................................. 114 ภำพที่ 6.1 Responsive Web Design......................................................................................... 263 ภำพท่ี 6.2 กำรแสดงผลโดยกำหนด Viewport และไม่กำหนด Viewport.................................... 265 ภำพที่ 6.3 กำรแสดงสีพ้ืนหลังเวบ็ เพจโดยใช้คำสัง่ @media ........................................................ 269 ภำพที่ 6.4 กำรซ่อน/แสดง อิลเิ มนต์โดยใชค้ ำสัง่ @media ........................................................... 271 ภำพที่ 6.5 กำรย่อ/ขยำย อลิ ิเมนต์โดยใชค้ ำสงั่ @media.............................................................. 272 ภำพท่ี 6.6 กำรแสดงสีพ้ืนหลังเว็บเพจตำมแนวหนำ้ จอโดยใชค้ ำส่งั @media ............................... 274 ภำพท่ี 6.7 กำรปรับขนำดข้อควำมโดยใชค้ ำส่งั @media.............................................................. 275 ภำพท่ี 6.8 กำรกำหนดรูปแบบกำรพิมพโ์ ดยใชค้ ำสัง่ @media...................................................... 277 ภำพท่ี 6.9 กำรออกแบบเคำ้ โครงเว็บเพจ...................................................................................... 278 ภำพที่ 6.10 กำรแสดงภำพท่ัวไปแบบ Responsive ..................................................................... 297 ภำพที่ 6.11 กำรแสดงภำพพื้นหลังแบบ Responsive .................................................................. 299 ภำพที่ 6.12 กำรแสดงภำพที่แตกต่ำงกนั ในหน้ำจอแสดงผลขนำดตำ่ งกัน...................................... 301 ภำพท่ี 6.13 กำรแสดงวิดโี อแบบ Responsive ............................................................................. 303 ภำพที่ 6.14 กำรแสดงแถบนำทำงแบบ Responsive ................................................................... 306 ภำพท่ี 6.15 กำรแสดงแถบนำทำงด้ำนข้ำงแบบ Responsive....................................................... 309 ภำพที่ 7.1 สัญลกั ษณโ์ ปรแกรม Adobe Dreamweaver CC....................................................... 313 ภำพท่ี 7.2 ค่ำใช้จำ่ ยในกำรเช่ำโปรแกรมรำยเดือน........................................................................ 314 ภำพที่ 7.3 ส่วนประกอบหลกั ของโปรแกรม .................................................................................. 314 ภำพที่ 7.4 มมุ มองกำรแสดงผลกำรทำงำน.................................................................................... 316

(10) สารบัญภาพ (ตอ่ ) หน้า ภำพท่ี 7.5 แผงควบคุมเคร่ืองมอื และคำสงั่ ....................................................................................318 ภำพที่ 7.6 แผงควบคุมสำหรบั กำหนดคุณสมบตั ิ............................................................................318 ภำพท่ี 7.7 กำรกำหนดแบบอักษรและรูปแบบเอกสำรเริ่มต้น ........................................................319 ภำพที่ 7.8 กำรกำหนดโฟลเดอรส์ ำหรบั จัดเก็บไฟล์ .......................................................................320 ภำพท่ี 7.9 กำรกำหนดโฟลเดอรท์ ี่ใช้สำหรับจัดเกบ็ ไฟล์ภำพ..........................................................321 ภำพท่ี 7.10 พำเนล Files และกำรจัดกำร Site.............................................................................321 ภำพท่ี 7.11 กำรจดั กำรไฟล์หรือโฟลเดอร์ในพำเนล Files .............................................................322 ภำพท่ี 7.12 กำรกำหนดโฟลเดอร์สำหรับจัดเก็บเว็บไซต์................................................................322 ภำพที่ 7.13 กำรสรำ้ งเอกสำรเวบ็ ..................................................................................................323 ภำพท่ี 7.14 กำรสรำ้ งเอกสำรเว็บจำกแม่แบบสำเร็จรูป .................................................................324 ภำพท่ี 7.15 กำรบนั ทกึ เอกสำรเว็บ................................................................................................325 ภำพท่ี 7.16 กำรกำหนดคุณสมบัติ Appearance (CSS) ...............................................................326 ภำพที่ 7.17 กำรกำหนดคุณสมบัติ Appearance (HTML)............................................................327 ภำพท่ี 7.18 กำรกำหนดคุณสมบัติ Link (CSS)..............................................................................328 ภำพที่ 7.19 กำรกำหนดคุณสมบัติ Heading (CSS).......................................................................329 ภำพที่ 7.20 กำรกำหนดคุณสมบัติ Title/Encoding .....................................................................330 ภำพที่ 7.21 กำรกำหนดคุณสมบตั ิ Tracing Image.......................................................................331 ภำพท่ี 7.22 กำรแทรกข้อควำมลงในเว็บเพจ .................................................................................332 ภำพที่ 7.23 กำรแทรกภำพลงในเว็บเพจ .......................................................................................334 ภำพท่ี 7.24 กำรแทรกตำรำงลงในเว็บเพจ.....................................................................................336 ภำพที่ 7.25 หนำ้ ตำ่ งกำหนดคณุ สมบัติตำรำง................................................................................337 ภำพที่ 7.26 กำรแทรกเสยี งลงในเว็บเพจ.......................................................................................341 ภำพท่ี 7.27 กำรแทรกวดิ โี อลงในเว็บเพจ ......................................................................................343 ภำพที่ 7.28 กำรสรำ้ งจดุ เชอื่ มโยง..................................................................................................345 ภำพที่ 7.29 กำรสร้ำงแผนทบ่ี นภำพ..............................................................................................346 ภำพที่ 7.30 กำรแทรกองคป์ ระกอบอ่ืน ๆ ลงในเว็บเพจ ................................................................347 ภำพที่ 7.31 พำเนล CSS Designer...............................................................................................348 ภำพท่ี 7.32 กำรสร้ำงไฟล์สไตล์ชีตใหม่..........................................................................................349 ภำพที่ 7.33 กำรนำเข้ำไฟล์สไตล์ชีตท่มี อี ยู่เดิม...............................................................................350

(11) สารบัญภาพ (ต่อ) หนา้ ภำพที่ 7.34 กำรกำหนดสไตล์ชตี ในไฟล์เวบ็ เพจ............................................................................ 350 ภำพที่ 7.35 กำรกำหนด Selectors และ Properties.................................................................. 351 ภำพท่ี 7.36 กำรเรยี กใชง้ ำนสไตลช์ ตี ............................................................................................ 352 ภำพที่ 8.1 สญั ลักษณโ์ ปรแกรม Adobe Photoshop CC............................................................ 357 ภำพที่ 8.2 สว่ นประกอบหลกั ของโปรแกรม .................................................................................. 358 ภำพที่ 8.3 แถบตัวเลือกเพิม่ เตมิ ................................................................................................... 359 ภำพที่ 8.4 กล่องเคร่ืองมือ ............................................................................................................ 360 ภำพท่ี 8.5 พืน้ ท่ีแสดงผลกำรทำงำน ............................................................................................. 363 ภำพที่ 8.6 แผงควบคุมเครื่องมอื และคำสัง่ .................................................................................... 363 ภำพท่ี 8.7 กำรสร้ำงไฟล์เอกสำรใหม่ ............................................................................................ 364 ภำพท่ี 8.8 กำรเปดิ ไฟลภ์ ำพ.......................................................................................................... 365 ภำพที่ 8.9 กำรบนั ทึกไฟลภ์ ำพ...................................................................................................... 366 ภำพท่ี 8.10 กำรใช้งำนเครื่องมือ Move Tool.............................................................................. 367 ภำพที่ 8.11 กำรใช้งำนเครื่องมือ Hand Tool .............................................................................. 368 ภำพที่ 8.12 กำรใช้งำนเคร่ืองมอื Rectangular Marquee Tool ................................................. 368 ภำพท่ี 8.13 กำรใชง้ ำนเครื่องมอื Elliptical Marquee Tool....................................................... 369 ภำพท่ี 8.14 กำรใช้งำนเครื่องมือ Lasso tool............................................................................... 369 ภำพที่ 8.15 กำรใช้งำนเคร่ืองมอื Polygonal Lasso Tool........................................................... 370 ภำพที่ 8.16 กำรใช้งำนเคร่ืองมอื Magnetic Lasso Tool ............................................................ 370 ภำพท่ี 8.17 กำรใชง้ ำนเครื่องมือ Quick Selection Tool ........................................................... 371 ภำพท่ี 8.18 กำรใชง้ ำนเครื่องมือ Magic Wand Tool.................................................................. 371 ภำพที่ 8.19 กำรใช้งำนเครื่องมือ Rectangle Tool...................................................................... 372 ภำพที่ 8.20 กำรใช้งำนเคร่ืองมือ Rounded Rectangle Tool .................................................... 372 ภำพท่ี 8.21 กำรใชง้ ำนเคร่ืองมือ Ellipse Tool............................................................................ 373 ภำพที่ 8.22 กำรใช้งำนเครื่องมอื Polygon Tool ......................................................................... 373 ภำพที่ 8.23 กำรใชง้ ำนเครื่องมอื Line Tool ................................................................................ 374 ภำพที่ 8.24 กำรใชง้ ำนเคร่ืองมอื Custom Shape Tool ............................................................. 374 ภำพท่ี 8.25 กำรใช้งำนเคร่ืองมอื Pencil Tool............................................................................. 375 ภำพที่ 8.26 กำรใชง้ ำนเครื่องมือ Pen Tool................................................................................. 375

(12) สารบญั ภาพ (ตอ่ ) หน้า ภำพที่ 8.27 กำรใช้งำนเครื่องมือ Pen tool ตัดพ้นื หลังออกจำกภำพ............................................376 ภำพที่ 8.28 กำรใช้งำนเคร่ืองมอื Freeform Pen Tool................................................................377 ภำพที่ 8.29 กำรใชง้ ำนเครื่องมือ Add Anchor Point Tool ........................................................377 ภำพท่ี 8.30 กำรใช้งำนเครื่องมอื Delete Anchor Point Tool....................................................378 ภำพที่ 8.31 กำรใช้งำนเครื่องมือ Convert Point Tool ...............................................................378 ภำพท่ี 8.32 กำรใช้งำนเครื่องมอื Horizontal Type Tool ...........................................................379 ภำพที่ 8.33 กำรสร้ำงกรอบข้อควำมดว้ ยเครื่องมือ Rectangle Tool ...........................................379 ภำพท่ี 8.34 กำรแก้ไขตัวอักษร......................................................................................................380 ภำพท่ี 8.35 กำรใช้งำนเครื่องมือ Vertical Type Tool.................................................................380 ภำพท่ี 8.36 กำรใช้งำนเครื่องมือ Horizontal Mask Type Tool.................................................380 ภำพที่ 8.37 กำรใช้งำนเครื่องมือ Gradient Tool .........................................................................381 ภำพที่ 8.38 กำรใช้งำนเครื่องมอื Paint Bucket Tool..................................................................381 ภำพท่ี 8.39 กำรใช้งำนเคร่ืองมือ Brush Tool ..............................................................................382 ภำพท่ี 8.40 กำรใชเ้ คร่ืองมือ Crop Tool......................................................................................382 ภำพที่ 8.41 กำรใช้งำนเคร่ืองมือ Clone Stamp Tool.................................................................383 ภำพท่ี 8.42 กำรใชง้ ำนเคร่ืองมือ Pattern Stamp Tool ..............................................................383 ภำพที่ 8.43 กำรใชง้ ำนเครื่องมือ Spot Healing Brush Tool......................................................384 ภำพที่ 8.44 กำรใช้งำนเคร่ืองมือ Heling Brush Tool..................................................................384 ภำพท่ี 8.45 กำรใช้งำนเคร่ืองมือ Patch Tool ..............................................................................385 ภำพที่ 8.46 กำรใช้งำนเครื่องมือ Content-Aware Move Tool..................................................385 ภาพที่ 8.47 การใชง้ านเคร่ืองมอื Red Eye Tool..........................................................................386 ภำพท่ี 8.48 กำรใช้งำนเคร่ืองมอื Blur Tool .................................................................................386 ภำพท่ี 8.49 กำรใช้งำนเครื่องมือ Sharpen Tool .........................................................................387 ภำพที่ 8.50 กำรใช้งำนเคร่ืองมอื Smudge Tool..........................................................................387 ภำพที่ 8.51 กำรใช้งำนเคร่ืองมือ Dodge Tool.............................................................................388 ภำพที่ 8.52 กำรใช้งำนเครื่องมือ Burn Tool ................................................................................388 ภำพที่ 8.53 กำรใชง้ ำนเครื่องมอื Sponge Tool...........................................................................389 ภำพที่ 8.54 กำรใชง้ ำนเคร่ืองมือ Eraser Tool..............................................................................389 ภำพท่ี 8.55 กำรใชง้ ำนเครื่องมือ Background Eraser Tool .......................................................390

(13) สารบญั ภาพ (ต่อ) หน้า ภำพที่ 8.56 กำรใช้งำนเครื่องมือ Magic Eraser Tool.................................................................. 390 ภำพที่ 8.57 กำรใชง้ ำนเคร่ืองมือ Eyedropper Tool................................................................... 391 ภำพท่ี 8.58 กำรใชง้ ำนเครื่องมอื Color Sampler Tool.............................................................. 392 ภำพท่ี 8.59 วัตถใุ นเลเยอร์ ........................................................................................................... 393 ภำพที่ 8.60 พำเนลเลเยอร์ ........................................................................................................... 393 ภำพที่ 8.61 กำรแทรกภำพลงในเลเยอร์ ....................................................................................... 395 ภำพท่ี 8.62 กำรใช้งำน Blending Mode..................................................................................... 396 ภำพท่ี 8.63 กำรปรบั ค่ำ Opacity ใหก้ บั เลเยอร์........................................................................... 397 ภำพท่ี 8.64 กำรปรบั ค่ำ Fill ใหก้ บั เลเยอร์ ................................................................................... 397 ภำพที่ 8.65 กำรซอ่ น/แสดง เลเยอร์............................................................................................. 398 ภำพท่ี 8.66 กำรแก้ไขชอื่ เลเยอร์................................................................................................... 399 ภำพท่ี 8.67 เมนูสำหรบั จัดกำรเลเยอร์.......................................................................................... 399 ภำพท่ี 8.68 กำรสรำ้ งเลเยอร์ใหม่ ................................................................................................. 400 ภำพท่ี 8.69 กำรทำสำเนำเลเยอร์ ................................................................................................. 401 ภำพท่ี 8.70 กำรทำสำเนำเลเยอร์แบบซ้อนทับกัน......................................................................... 401 ภำพที่ 8.71 กำรรวมเลเยอรด์ ้ำนล่ำง............................................................................................. 402 ภำพท่ี 8.72 กำรรวมเลเยอร์ทง้ั หมดท่ีไม่ไดซ้ ่อน ............................................................................ 402 ภำพท่ี 8.73 กำรรวมเฉพำะเลเยอร์ที่เลอื ก .................................................................................... 403 ภำพท่ี 8.74 กำรรวมเลเยอร์ทงั้ หมดใหเ้ ปน็ เลเยอร์ใหม่ ................................................................. 403 ภำพท่ี 8.75 กำรรวมกลุม่ เลเยอร์ .................................................................................................. 404 ภำพที่ 8.76 กำรเช่ือมโยงเลเยอร์.................................................................................................. 404 ภำพที่ 8.77 กำรจัดเรียงวตั ถุในเลเยอร์ ......................................................................................... 405 ภำพท่ี 8.78 กำรใชง้ ำน Layer Style............................................................................................ 406 ภำพที่ 8.79 กำรใชง้ ำนรูปแบบ Blending Options..................................................................... 407 ภำพที่ 8.80 กำรใช้งำนรูปแบบ Bevel & Emboss....................................................................... 407 ภำพที่ 8.81 กำรใชง้ ำนรปู แบบ Stroke ........................................................................................ 408 ภำพที่ 8.82 กำรใช้งำนรปู แบบ Inner Shadow........................................................................... 408 ภำพที่ 8.83 กำรใช้งำนรปู แบบ Inner Glow ................................................................................ 409 ภำพที่ 8.84 กำรใช้งำนรูปแบบ Satin........................................................................................... 409

(14) สารบญั ภาพ (ตอ่ ) หนา้ ภำพที่ 8.85 กำรใชง้ ำนรปู แบบ Color Overlay ...........................................................................410 ภำพที่ 8.86 กำรใชง้ ำนรปู แบบ Gradient Overlay......................................................................410 ภำพที่ 8.87 กำรใชง้ ำนรปู แบบ Pattern Overlay........................................................................411 ภำพที่ 8.88 กำรใชง้ ำนรูปแบบ Outer Glow................................................................................411 ภำพที่ 8.89 กำรใชง้ ำนรูปแบบ Drop Shadow............................................................................412 ภำพท่ี 8.90 กำรใช้งำนฟลิ เตอร์ Box Blur.....................................................................................413 ภำพท่ี 8.91 กำรใชง้ ำนฟลิ เตอร์ Gaussian Blur ...........................................................................413 ภำพท่ี 8.92 กำรใชง้ ำนฟิลเตอร์ Lens Blur...................................................................................414 ภำพท่ี 8.93 กำรใช้งำนฟิลเตอร์ Motion Blur ..............................................................................414 ภำพที่ 8.94 กำรใช้งำนฟิลเตอร์ Radial Blur ................................................................................415 ภำพที่ 8.95 กำรใชง้ ำนฟลิ เตอร์ Shap Blur ..................................................................................415 ภำพที่ 8.96 กำรใชง้ ำนฟิลเตอร์ Field Blur ..................................................................................416 ภำพที่ 8.97 กำรใชง้ ำนฟิลเตอร์ Iris Blur ......................................................................................416 ภำพที่ 8.98 กำรใชง้ ำนฟิลเตอร์ Tilt-Shift ....................................................................................417 ภำพที่ 8.99 กำรใชง้ ำนฟลิ เตอร์ Path Blur...................................................................................417 ภำพท่ี 8.100 กำรใชง้ ำนฟิลเตอร์ Spin Blur .................................................................................418 ภำพที่ 8.101 กำรใช้งำนฟลิ เตอร์ Pinch........................................................................................418 ภำพที่ 8.102 กำรใช้งำนฟลิ เตอร์ Polar Coordinates .................................................................419 ภำพท่ี 8.103 กำรใชง้ ำนฟลิ เตอร์ Ripple......................................................................................419 ภำพท่ี 8.104 กำรใช้งำนฟลิ เตอร์ Spherize..................................................................................420 ภำพที่ 8.105 กำรใช้งำนฟิลเตอร์ Twirl.........................................................................................420 ภำพที่ 8.106 กำรใชง้ ำนฟลิ เตอร์ Wave .......................................................................................421 ภำพท่ี 8.107 กำรใชง้ ำนฟิลเตอร์ ZigZag......................................................................................421 ภำพท่ี 8.108 กำรใชง้ ำนฟิลเตอร์ Color Halftone.......................................................................422 ภำพที่ 8.109 กำรใช้งำนฟิลเตอร์ Crystallize...............................................................................422 ภำพที่ 8.110 กำรใช้งำนฟิลเตอร์ Mezzootint.............................................................................423 ภำพที่ 8.111 กำรใช้งำนฟลิ เตอร์ Mosaic.....................................................................................423 ภำพท่ี 8.112 กำรใช้งำนฟลิ เตอร์ Pointillize................................................................................424 ภำพท่ี 8.113 กำรใช้งำนฟลิ เตอร์ Diffuse .....................................................................................424

(15) สารบญั ภาพ (ต่อ) หนา้ ภำพท่ี 8.114 กำรใช้งำนฟิลเตอร์ Emboss................................................................................... 425 ภำพที่ 8.115 กำรใช้งำนฟลิ เตอร์ Extrude................................................................................... 425 ภำพท่ี 8.116 กำรใช้งำนฟิลเตอร์ Find Edges ............................................................................. 426 ภำพที่ 8.117 กำรใชง้ ำนฟิลเตอร์ Oil Paint ................................................................................. 426 ภำพที่ 8.118 กำรใช้งำนฟลิ เตอร์ Solarize................................................................................... 427 ภำพท่ี 8.119 กำรใช้งำนฟลิ เตอร์ Tiles ........................................................................................ 427 ภำพท่ี 8.120 กำรใชง้ ำนฟลิ เตอร์ Trace Contoure..................................................................... 428 ภำพที่ 8.121 กำรใชง้ ำนฟลิ เตอร์ Wind........................................................................................ 428 ภำพท่ี 9.1 กำรเตรียมภำพสไลดโ์ ชว์.............................................................................................. 434 ภำพท่ี 9.2 ภำพสไลดโ์ ชว์ .............................................................................................................. 439 ภำพที่ 9.3 กำรเตรยี มภำพสำหรบั แกลเลอร่ีภำพ........................................................................... 440 ภำพที่ 9.4 ภำพแกลเลอร่ี.............................................................................................................. 445 ภำพที่ 9.5 กำรเตรียมภำพสำหรับกลอ่ งแกลเลอรี่ภำพ.................................................................. 446 ภำพท่ี 9.6 กล่องแกลเลอรภ่ี ำพ..................................................................................................... 453 ภำพท่ี 9.7 กำรขยำยภำพ ............................................................................................................. 456 ภำพท่ี 9.8 กำรแสดงภำพทบั เนอ้ื หำหลกั ...................................................................................... 460 ภำพที่ 9.9 กำรใชง้ ำนตวั กรองภำพ ............................................................................................... 463 ภำพที่ 9.10 กำรใชง้ ำน Webfonts .............................................................................................. 465 ภำพท่ี 9.11 เวบ็ ไซต์ Web Font Genertor................................................................................. 466 ภำพท่ี 9.12 ไฟล์แบบอกั ษรและไฟลส์ ไตลช์ ตี ................................................................................ 467 ภำพที่ 10.1 แบบฟอร์มในเว็บเพจ ................................................................................................ 471 ภำพท่ี 10.2 ตัวอย่ำงกำรแสดงแถบสขี องโปรแกรมแสดงผลเว็บ.................................................... 478 ภำพท่ี 10.3 ตัวอยำ่ งกำรปรับแต่งฟอร์มดว้ ยสไตลช์ ีต.................................................................... 502



สารบญั ตาราง หน้า ตำรำงท่ี 1.1 กำรแบง่ ขนำดของ IP Address .....................................................................................4 ตำรำงท่ี 1.2 ตวั อยำ่ งผู้ใหบ้ ริกำรอินเทอร์เน็ตในประเทศไทย..............................................................7 ตำรำงที่ 1.3 โดเมนเนม 2 ระดับ..................................................................................................... 15 ตำรำงที่ 1.4 โดเมนเนม 3 ระดับ..................................................................................................... 15 ตำรำงท่ี 3.1 รำยละเอียดของคำส่งั โครงสร้ำง HTML5.................................................................... 73 ตำรำงท่ี 3.2 กำรกำหนดเสน้ ทำงของไฟล์........................................................................................ 92 ตำรำงท่ี 3.3 สญั ลกั ษณ์ใน HTML ................................................................................................... 94 ตำรำงท่ี 3.4 แอตทรบิ วิ ต์ทใี่ ช้สำหรบั อลิ ิเมนต์ Audio...................................................................... 95 ตำรำงท่ี 3.5 แอตทรบิ วิ ตท์ ่ีใช้สำหรับอิลเิ มนต์ Video...................................................................... 96 ตำรำงที่ 3.6 รำยละเอียดของอิลิเมนต์เชงิ ควำมหมำยใน HTML5 ................................................... 98 ตำรำงที่ 4.1 โทนสีแดง (Red Colors Tone) ............................................................................... 143 ตำรำงที่ 4.2 โทนสสี ้ม (Orange Colors Tone) ........................................................................... 143 ตำรำงท่ี 4.3 โทนสีเหลือง (Yellow Colors Tone) ...................................................................... 144 ตำรำงท่ี 4.4 โทนสเี ขียว (Green Colors Tone) .......................................................................... 144 ตำรำงท่ี 4.5 โทนสีฟ้ำ (Cyan Colors Tone) ............................................................................... 145 ตำรำงที่ 4.6 โทนสีน้ำเงิน (Blue Colors Tone)........................................................................... 146 ตำรำงที่ 4.7 โทนสีมว่ ง (Purple Colors Tone)........................................................................... 147 ตำรำงที่ 4.8 โทนสชี มพู (Pink Colors Tone).............................................................................. 147 ตำรำงที่ 4.9 โทนสีขำว (White Colors Tone) ............................................................................ 148 ตำรำงท่ี 4.10 โทนสเี ทำ (Gray Colors Tone)............................................................................. 148 ตำรำงที่ 4.11 โทนสนี ำ้ ตำล (Brown Colors Tone) .................................................................... 149 ตำรำงที่ 4.12 หน่วยวดั คำ่ สำหรบั กำหนดค่ำคงที่ .......................................................................... 150 ตำรำงที่ 4.13 หนว่ ยวัดค่ำสำหรบั กำหนดค่ำไม่คงที่ ...................................................................... 151 ตำรำงท่ี 5.1 รปู แบบของตัวช้ีเมำส์................................................................................................ 257 ตำรำงที่ 6.1 ประเภทของส่อื แสดงผล ........................................................................................... 266 ตำรำงที่ 6.2 คณุ สมบัติกำรแสดงผล.............................................................................................. 266 ตำรำงที่ 6.3 อิลิเมนตเ์ ชงิ ควำมหมำยสำหรับกำหนดเคำ้ โครงเว็บเพจ ............................................ 293 ตำรำงท่ี 7.1 แถบเมนหู ลกั ของโปรแกรม Adobe Dreamweaver CC......................................... 315 ตำรำงท่ี 7.2 เครื่องมือสำหรบั จัดกำรเอกสำรเว็บ .......................................................................... 317

(18) สารบัญตาราง (ต่อ) หน้า ตำรำงที่ 7.3 คุณสมบัติ Appearance (CSS).................................................................................326 ตำรำงท่ี 7.4 คุณสมบัติ Appearance (HTML) .............................................................................327 ตำรำงท่ี 7.5 คุณสมบตั ิ Link (CSS) ...............................................................................................328 ตำรำงที่ 7.6 คุณสมบตั ิ Heading (CSS)........................................................................................329 ตำรำงที่ 7.7 คณุ สมบัติ Title/Encoding.......................................................................................330 ตำรำงท่ี 7.8 คำส่งั HTML ในพำเนลคุณสมบัติข้อควำม.................................................................333 ตำรำงที่ 7.9 คำสงั่ CSS ในพำเนลคุณสมบัติขอ้ ควำม ....................................................................333 ตำรำงท่ี 7.10 คำส่งั ในพำเนลคุณสมบตั ภิ ำพ..................................................................................335 ตำรำงท่ี 7.11 รำยละเอยี ดกำรกำหนดคณุ สมบัตติ ำรำง .................................................................337 ตำรำงที่ 7.12 คำส่ังในพำเนลคณุ สมบัติตำรำง...............................................................................338 ตำรำงที่ 7.13 คำส่งั HTML ในพำเนลคุณสมบตั เิ ซลล์....................................................................338 ตำรำงท่ี 7.14 คำสั่ง CSS ในพำเนลคุณสมบตั ิเซลล์ .......................................................................339 ตำรำงท่ี 7.15 คำส่ังในพำเนลคณุ สมบตั ิเสียง .................................................................................342 ตำรำงท่ี 7.16 คำสง่ั ในพำเนลคณุ สมบตั วิ ิดีโอ.................................................................................344 ตำรำงท่ี 8.1 แถบเมนหู ลกั ของโปรแกรม Adobe Photoshop CC...............................................358 ตำรำงที่ 8.2 รำยละเอียดเครื่องมือในกล่องเครอื่ งมอื .....................................................................360 ตำรำงท่ี 8.3 รูปแบบไฟล์ภำพ........................................................................................................366 ตำรำงท่ี 8.4 เมนู Filter Type ......................................................................................................394 ตำรำงที่ 8.5 เมนสู ำหรบั จดั กำรเลเยอร์..........................................................................................399 ตำรำงท่ี 8.6 กำรจัดเรียงวตั ถุ.........................................................................................................405 ตำรำงท่ี 9.1 กำรกำหนดค่ำให้กบั คุณสมบัติ Filter ........................................................................461 ตำรำงที่ 10.1 แอตทริบวิ ตท์ ี่ใช้สำหรบั Form ................................................................................472 ตำรำงที่ 10.2 แอตทริบิวตท์ ่ีใช้สำหรบั Text Input Field.............................................................473 ตำรำงที่ 10.3 แอตทรบิ วิ ตท์ ี่ใช้สำหรับ Password Field ..............................................................474 ตำรำงที่ 10.4 แอตทรบิ ิวตท์ ่ีใชส้ ำหรบั Radio Button..................................................................474 ตำรำงที่ 10.5 แอตทรบิ วิ ต์ท่ีใช้สำหรบั Checkbox........................................................................475 ตำรำงที่ 10.6 แอตทริบวิ ตท์ ่ีใช้สำหรบั Submit Reset และ Button............................................476 ตำรำงท่ี 10.7 แอตทรบิ วิ ตท์ ่ีใชส้ ำหรับ File Upload.....................................................................477 ตำรำงที่ 10.8 แอตทรบิ วิ ต์ที่ใชส้ ำหรับ Hidden Field ..................................................................477

(19) สารบญั ตาราง (ต่อ) หนา้ ตำรำงท่ี 10.9 แอตทริบวิ ตท์ ี่ใช้สำหรับ Color ............................................................................... 478 ตำรำงท่ี 10.10 แอตทรบิ วิ ต์ที่ใชส้ ำหรบั Date .............................................................................. 479 ตำรำงที่ 10.11 แอตทรบิ วิ ต์ท่ีใช้สำหรบั Time.............................................................................. 479 ตำรำงที่ 10.12 แอตทรบิ ิวต์ที่ใช้สำหรับ Datetime-Local........................................................... 480 ตำรำงท่ี 10.13 แอตทรบิ ิวต์ที่ใชส้ ำหรบั Week............................................................................. 480 ตำรำงที่ 10.14 แอตทรบิ ิวตท์ ่ีใชส้ ำหรบั Month........................................................................... 481 ตำรำงที่ 10.15 แอตทรบิ ิวต์ท่ีใช้สำหรบั Email............................................................................. 482 ตำรำงท่ี 10.16 แอตทรบิ ิวต์ท่ีใชส้ ำหรับ Number ........................................................................ 482 ตำรำงที่ 10.17 แอตทรบิ ิวตท์ ่ีใช้สำหรบั Range............................................................................ 483 ตำรำงท่ี 10.18 แอตทริบวิ ตท์ ่ีใช้สำหรับ Output.......................................................................... 483 ตำรำงท่ี 10.19 แอตทรบิ วิ ต์ที่ใช้สำหรบั Search........................................................................... 484 ตำรำงท่ี 10.20 แอตทรบิ วิ ตท์ ่ีใช้สำหรบั Url.................................................................................. 484 ตำรำงท่ี 10.21 แอตทรบิ ิวต์ที่ใช้สำหรบั Select............................................................................ 486 ตำรำงท่ี 10.22 แอตทริบิวตท์ ี่ใช้สำหรับ Textarea ....................................................................... 486 ตำรำงที่ 10.23 แอตทริบวิ ต์ท่ีใช้สำหรบั Button........................................................................... 487 ตำรำงที่ 10.24 แอตทรบิ วิ ตท์ ่ีใช้สำหรบั Datalist ......................................................................... 488 ตำรำงที่ 10.25 รำยละเอียดฟังก์ชนั และกำรเรียกใชง้ ำนฟังก์ชนั .................................................... 491

บทที่ 1 อนิ เทอรเ์ นต็ และเวบ็ ไซต์ เทคโนโลยีสารสนเทศ (Information Technology) เป็นเทคโนโลยีท่ีมีบทบาทสาคัญในการ จัดการข้อมูลเพื่อให้ได้สารสนเทศที่มีคุณภาพ ซ่ึงมีกระบวนการสาคัญในการจัดการข้อมูลให้เป็น สารสนเทศ คือ การจัดการ การจัดเก็บ การค้นคืน และการเผยแพร่สารสนเทศ เพื่อนาสารสนเทศไป ใช้ประโยชน์ในด้านต่าง ๆ เทคโนโลยีสารสนเทศจึงมีบทบาทสาคัญในการเพิ่มประสิทธิภาพของการ ทางาน ทั้งด้านความสะดวก รวดเร็ว และความถูกต้องแม่นยา มีประโยชน์ต่อการทางานในทุกสาขา อาชีพ รวมทั้งการติดต่อส่ือสารโดยอาศัยเทคโนโลยีเป็นสื่อกลาง ปัจจุบันวิวัฒนาการของเทคโนโลยี สารสนเทศ ส่งผลให้เกิดการเปลี่ยนแปลงของสังคมและประเทศชาติ โดยเฉพาะด้านเศรษฐกิจ ซ่ึงมี การนาเทคโนโลยีสารสนเทศมาใชใ้ นการบริหารจดั การข้อมูล วิเคราะห์ สังเคราะหข์ อ้ มลู และเผยแพร่ ข้อมลู เพ่ือก้าวไปสู่สงั คมเศรษฐกจิ ดิจิทัล (Digital Economy) อยา่ งเตม็ รปู แบบ ววิ ัฒนาการของการติดต่อส่ือสารท่เี กิดจากความกา้ วหนา้ ทางเทคโนโลยี ส่งผลให้เกดิ ชอ่ งทาง สาหรบั ติดต่อส่ือสารท่ีมีประสิทธภิ าพหลากหลายช่องทาง โดยเฉพาะอนิ เทอร์เนต็ และเวบ็ ไซต์ ซึง่ เป็น การเชื่อมโยงคอมพิวเตอรเ์ ข้าหากันด้วยระบบเครือข่ายขนาดใหญ่ ครอบคลุมพืน้ ทท่ี ว่ั ทกุ มมุ โลก ส่งผล ให้การติดต่อสื่อสารมีความสะดวก รวดเร็ว ทันต่อเหตุการณ์ อินเทอร์เน็ตและเว็บไซต์จึงเป็นปัจจัย สาคัญต่อการดารงชีวิตมนุษย์ในยุคปัจจุบัน ไม่ว่าจะเป็น ด้านการดาเนินธุรกิจ ด้านการติดต่อสื่อสาร ดา้ นการตดิ ตามขา่ วสาร ด้านการสืบค้นขอ้ มลู เพือ่ การศึกษาเรียนรู้ และด้านอื่น ๆ อนิ เทอรเ์ น็ต อินเทอร์เน็ต (Internet) คือ เครือข่ายคอมพิวเตอร์ขนาดใหญ่ท่ีมีการเช่ือมโยงเข้าหากัน ครอบคุมพ้ืนที่ท่ัวทุกมุมโลก อาศัยโครงข่ายของระบบสื่อสารโทรคมนาคมเป็นตัวกลางในการเชื่อมต่อ โดยคอมพิวเตอร์จะถูกเชื่อมต่อกันผ่านอุปกรณ์การเชื่อมต่อและซอฟต์แวร์ ใช้สอ่ื ท่เี ปน็ สายเคเบิลหรือ ส่ือไร้สาย ใช้งานอย่บู นมาตรฐานการเช่ือมต่อระหว่างคอมพวิ เตอร์ที่เรียกกวา่ โพรโทคอล (Protocol) เพื่อให้คอมพิวเตอร์แต่ละเคร่ืองสามารถติดต่อส่ือสารหรือแลกเปล่ียนข้อมูลระหว่างกันได้อย่างมี ประสิทธิภาพ ด้วยข้อตกลงในการใช้งานร่วมกัน ผู้ใช้งานเครือข่ายอินเทอร์เน็ตสามารถส่ือสารผ่าน ชอ่ งทางตา่ ง ๆ ตามประเภทของโพรโทคอล รวมถงึ การใช้ทรัพยากรบนเครือขา่ ยรว่ มกัน อนิ เทอร์เน็ต จึงเป็นแหล่งรวบรวมข้อมูลขนาดใหญ่ ที่มีข้อมูลปริมาณมหาศาล (Big Data) โดยเฉพาะข้อมูลใน รูปแบบของส่ือมัลติมีเดีย ผู้ใช้สามารถสืบค้นข้อมูล และนาข้อมูลมาใช้ประโยชน์ได้อย่างไร้ขีดจากัด (จรุงยศ อรญั ยะนาค, 2560: 1-2; วโิ รจน์ ชัยมูล และสุพรรษา ยวงทอง, 2558: 154-156)

2 CHAPTER 1: INTERNET&WEBSITE 1. ความสาคญั ของอนิ เทอร์เนต็ อินเทอร์เน็ตถือเป็นปัจจัยสาคัญต่อการดารงชีวิตของมนุษย์ในยุคปัจจุบัน เนื่องจากบน อินเทอร์เน็ตมีข้อมูลและสารสนเทศจานวนมหาศาล ที่สามารถนาไปใช้ประโยชน์ได้อย่างไม่จากัด ทั้ง ในด้านการติดต่อสื่อสาร การศึกษาเรียนรู้ อีกท้ังยังช่วยลดระยะเวลา ลดระยะทาง และลดค่าใช้จ่าย จงึ ขอยกตวั อยา่ งในด้านท่ีสาคญั ดังนี้ 1.1 ดา้ นการศกึ ษา การใชง้ านอนิ เทอร์เนต็ เพ่ือสืบค้นข้อมูล สามารถทาได้งา่ ยและรวดเรว็ มแี หล่งข้อมูลท่ี เป็นองค์ความรู้จานวนมาก ทุกภาษาทั่วโลก อาทิ ข้อมูลด้านการแพทย์ ด้านวิทยาศาสตร์ ด้าน เทคโนโลยี ดา้ นวศิ วกรรม และดา้ นอน่ื ๆ ข้อมลู อยู่ในรูปแบบของส่ือประเภทต่าง ๆ ทัง้ ขอ้ ความ ภาพ เสียง หรือวิดีโอ ทาให้นักเรียน นักศึกษา ครู อาจารย์ ตลอดจนผู้ที่สนใจ สามารถนาข้อมูลท่ีได้จาก อินเทอร์เน็ตไปใช้ในการศึกษา ค้นคว้า ทดลอง วิจัย หรือการทางานได้ และยังสามารถจัดการเรียน การสอนผ่านระบบเครือข่ายอินเทอร์เน็ต ส่งผลให้ผู้เรียนกับผู้สอนที่อยู่ในพ้ืนท่ีห่างไกลกัน สามารถ ส่ือสารกันได้ จึงช่วยลดระยะเวลาและค่าใช้จ่ายในการเดินทางไปยังสถานศึกษา เช่น การเรียนการ สอนผา่ นระบบ E-Learning การอ่านหนังสือผ่านหอ้ งสมุดดิจทิ ัล (Digital Library) เปน็ ต้น 1.2 ด้านการดาเนินธุรกจิ การใช้งานอินเทอร์เน็ตเพื่อใช้เป็นช่องทางในการจาหน่ายสินค้าและบริการ การ โฆษณาสินค้าและบริการ รวมถึงการทาการตลาดผ่านระบบอินเทอร์เน็ต หรือที่เรียกว่า พาณิชย์ อิเล็กทรอนิกส์ (E-Commerce) ซึ่งจะมีระบบสาหรับการซ้ือขายสินค้าและบริการผ่านเว็บไซต์ สามารถชาระเงินผ่านอินเทอร์เน็ตโดยหักจากบัญชีธนาคารหรือหักจากบัตรเครดิตได้ทันที เช่น การ ซื้อสินค้าจากร้านค้าออนไลน์ การซื้อบัตรโดยสารเครื่องบิน การชาระค่าสาธารณูปโภค เป็นต้น นอกจากน้ี ยังมีบริการตอบคาถาม ให้คาแนะนา หรือแจ้งข่าวสารของทางร้านค้าหรือองค์กรธุรกิจ ให้กับลูกค้าผ่านทางเว็บไซต์ ช่วยให้ร้านค้าหรือองค์กรธุรกิจลดต้นทุนด้านงานบริการ เข้าถึง กลุม่ เป้าหมายไดอ้ ยา่ งรวดเรว็ และผูบ้ ริโภคไมจ่ าเปน็ จะต้องเดนิ ทางไปยงั ร้านคา้ ดว้ ยตนเอง 1.3 ดา้ นการเงินและธนาคาร การใช้งานอินเทอร์เน็ตเพ่ือดาเนินธุรกรรมทางการเงินผ่านทางเว็บไซต์ หรือทางแอป พลิเคชันผ่านโทรศัพท์สมาร์ทโฟน เรียกกว่าระบบ E-Banking Internet Banking หรือ Mobile Banking โดยการใหบ้ ริการหลกั ไดแ้ ก่ การตรวจสอบบัญชี การโอนเงิน การชาระคา่ สนิ ค้าและบริการ การลงทุนกับกองทุนต่าง ๆ การแลกเปล่ียนเงินตราต่างประเทศ ซ่ึงผู้ใช้สามารถทาธุรกรรมทางการ เงินได้อย่างสะดวก รวดเร็ว ปลอดภัย สามารถทาธุรกรรมได้ตลอดเวลา ลดระยะเวลาในการเดินทาง ไปยงั ธนาคาร

CHAPTER 1: INTERNET&WEBSITE 3 1.4 ด้านความบนั เทิง การใชง้ านอินเทอร์เน็ตเพ่ือเข้าถงึ สาระความบันเทิงในรูปแบบต่าง ๆ เหมาะกับผู้ใช้ทุก เพศ ทุกวัย เช่น การอ่านข่าวสารจากวารสารหรือนิตยสารออนไลน์ หนังสือพิมพ์ออนไลน์ การรับชม รายการทางสถานีโทรทัศน์ออนไลน์ การชมภาพยนตร์ออนไลน์ การฟังเพลงจากเว็บไซต์ผู้ให้บริการ การใช้งานส่ือสังคมออนไลน์ เป็นต้น นอกจากนี้ อินเทอร์เน็ตยังมีบริการช่องทางสาหรับการสนทนา หรือแลกเปล่ียนความคิดเห็นผ่านโปรแกรมสนทนาหรือเว็บบอร์ด อินเทอร์เน็ตจึงเป็นสื่อท่ีใช้เพื่อการ พักผอ่ นหยอ่ นใจ สร้างความเพลดิ เพลินและสันทนาการได้เปน็ อยา่ งดี 1.5 ดา้ นการประชาสมั พันธ์ การใช้งานอนิ เทอรเ์ นต็ เพื่อการเผยแพร่ ประชาสัมพันธข์ อ้ มูลข่าวสาร การโฆษณาผ่าน เว็บไซต์หรือส่ือสังคมออนไลน์ ในรูปแบบของส่ือมัลติมีเดีย ซ่ึงมีค่าใช้จ่ายท่ีถูกกว่าการประชาสัมพันธ์ ในรูปแบบอื่น หรือบางเว็บไซต์อาจไม่มีค่าใช้จ่ายใด ๆ ในการลงโฆษณา สามารถเข้าถึงกลุ่มเป้าหมาย ได้อย่างรวดเร็ว และได้รับการตอบสนองอย่างรวดเร็วเช่นกัน อีกทั้งยังเป็นการส่งเสริมภาพลักษณ์ ให้กับองคก์ รในดา้ นของความทันสมยั 2. อินเทอร์เน็ตโพรโทคอล อินเทอร์เน็ตโพรโทคอล (Internet Protocol) คือ ข้อกาหนดรูปแบบการส่ือสารในระบบ เครือข่าย เพ่ือช่วยให้ระบบคอมพิวเตอร์หรืออุปกรณ์ในระบบเครือข่ายที่มีความแตกต่างกัน สามารถ ส่ือสารกันได้ เช่น การรับ - ส่งข้อมูล การตรวจสอบข้อผิดพลาดของการรับ - ส่งข้อมูล การแสดงผล ข้อมูล เป็นต้น โพรโทคอลจึงมีความสาคัญต่อการสื่อสารบนระบบเครือข่ายอินเทอร์เน็ตเป็นอย่างย่ิง โดยโพรโทคอลท่ีใชใ้ นการสือ่ สาร มดี ังน้ี (วิโรจน์ ชยั มลู และสุพรรษา ยวงทอง, 2558: 159-161) 2.1 TCP/IP (Transmission Control Protocol/Internet Protocol) โพรโทคอลท่ีใช้ในการสื่อสารผ่านระบบเครือข่ายระหว่างคอมพิวเตอร์ มีการกาหนด ข้อตกลงมาตรฐานสาหรับกาหนดเส้นทางและการเช่อื มต่อภายในเครือข่าย สามารถใช้สื่อสารจากตน้ ทางข้ามเครือข่ายไปยังปลายทาง สามารถหาเส้นทางท่ีจะส่งข้อมูลไปได้เองโดยอัตโนมัติ ทางานด้วย Packet-Switching และ Stream Transport มีคาส่ังและโครงสร้างพ้ืนฐาน ได้แก่ การถ่ายโอนไฟล์ ระหว่างระบบ การใช้งานระบบควบคุมระยะไกล (Remote) โดยหลักการทางานของ TCP/IP มีดังน้ี (IBM Knowledge Center, 2014: 1)

4 CHAPTER 1: INTERNET&WEBSITE 2.1.1 TCP ต้นทาง มหี น้าทใี่ นการแยกข้อมูลเป็นส่วนหรือเรียกว่าแพ็กเกจ (Package) เพ่ือส่งข้อมูลออกไป ส่วน TCP ปลายทาง มีหน้าท่ีรวบรวมข้อมูลแต่ละส่วนเข้าด้วยกันเพ่ือนาไป ประมวลผล โดยระหว่างการรับ - ส่งข้อมูล จะมีการตรวจสอบความถูกต้องของข้อมูล หากเกิดความ ผดิ พลาด TCP ปลายทางจะรอ้ งขอไปยงั TCP ตน้ ทางเพือ่ ให้ส่งข้อมูลใหม่ 2.1.2 IP มีหน้าท่ีในการจัดส่งข้อมูลจากเคร่ืองต้นทางไปยังเคร่ืองปลายทางโดยอาศัย หมายเลขประจาเคร่ืองคอมพิวเตอร์หรือหมายเลขประจาอุปกรณ์ (IP Address) ประกอบด้วยตัวเลข 4 ชุด มีเครือ่ งหมายจุดข้ันระหว่างชดุ เชน่ 192.168.100.1 หรือ 172.16.10.1 เปน็ ต้น โดยแบง่ ขนาด ของหมายเลข IP ออกเป็น 5 ระดับ ดงั ตารางท่ี 1.1 (สุธี พงศาสกลุ ชัย และณรงค์ ล่าดี, 2551: 49-50) ตารางที่ 1.1 การแบง่ ขนาดของ IP Address การใชง้ าน Class ขนาด สาหรับเครือข่ายขนาดใหญ่ท่ีมีคอมพิวเตอร์ A 0.0.0.0 ถึง 127.255.255.255 เชื่อมตอ่ ภายในเครือข่ายจานวนมาก สาหรบั เครือข่ายขนาดกลาง B 128.0.0.0 ถึง 191.255.255.255 สาหรบั เครอื ขา่ ยขนาดเลก็ C 192.0.0.0 ถึง 223.255.255.255 สาหรบั ใช้กับเครือขา่ ยแบบ Multicast D 224.0.0.0 ถึง 239.255.255.255 สาหรับการทดสอบและพัฒนาเพ่ือใช้งานใน E 240.0.0.0 ถงึ 254.255.255.255 อนาคต 2.2 HTTP (Hyper Text Transfer Protocol) โพรโทคอลสาหรบั การเผยแพร่ข้อมูลและแลกเปล่ยี นข้อมูลบนระบบเครือข่าย ทางาน ร่วมกับ TCP/IP เพื่อเรียกใช้งาน WWW (World Wide Web) มีโครงสร้างเป็นข้อความและตัวเลข สามารถเรียกใช้งานผ่านโปรแกรมแสดงผลเว็บ (Web Browser) เช่น Google Chrome Firefox Internet Explorer Opera เป็นต้น โดยโปรแกรมแสดงผลเว็บจะร้องขอข้อมูลไปยังเคร่ืองแม่ข่าย และเครอ่ื งแมข่ า่ ยจะสง่ ข้อมลู ผ่าน HTTP เพ่ือแสดงผลในรูปแบบของเว็บเพจ ภาพท่ี 1.1 หลกั การทางานของโพรโทคอล HTTP ทีม่ า: (Suman, 2016: 1)

CHAPTER 1: INTERNET&WEBSITE 5 2.3 HTTPS (Hypertext Transfer Protocol over Secure Socket Layer) โพรโทคอลสาหรับการส่ือสารบนระบบเครือข่าย ใช้ในการรับ - ส่งข้อมูล ด้วยการ เข้ารหัสมูล เป็นการนา HTTP มารวมกับ SSL (Secure Socket Layer) โดยเน้นการยืนยันตัวตน (Authentication) ในการเข้าใช้งานเว็บ เพื่อความปลอดภัยในการแลกเปล่ียนข้อมูลโดยตรงระหว่าง ผู้ใช้กับผู้ให้บริการเว็บ (Web Server) ไม่ให้เกิดการโจรกรรมข้อมูลระหว่างเส้นทางการสื่อสาร และ ป้องกันการเปล่ียนแปลงข้อมูลระหว่างทาง เหมาะสาหรับองค์กรธุรกิจหรือเว็บไซต์ท่ีต้องรักษาความ ปลอดภัยของข้อมูล เช่น ระบบธนาคารออนไลน์ ร้านค้าออนไลน์ ระบบลงทะเบียนนักศึกษา เป็นตน้ หากข้อมลู ถูกดกั จบั ไดร้ ะหว่างเส้นทางการส่ือสาร กไ็ มส่ ามารถอา่ นข้อมูลได้ 2.4 POP3 (Post Office Protocol version 3) โพรโทคอลสาหรับการรับอีเมลและแสดงผลในรูปแบบออฟไลน์ (Offline) โดยจะทา การคัดลอกข้อมูลอีเมลทั้งหมดจากผู้ให้บริการอีเมล (Mail Server) มาเก็บไว้ในเครื่องของผู้ใช้บริการ (Client) ที่เชื่อมต่อกับ Mail Server ทาการคัดลอกเฉพาะข้อมูลใหม่ที่พบใน Mail Server เท่าน้ัน และเมื่อข้อมูลถูกจัดเก็บไว้ในเครื่องเรียบร้อยแล้ว ระบบมักจะลบข้อมูลในกล่องอีเมลบน Mail Server โดยสามารถอ่านอีเมลและจัดการอีเมลได้ในเคร่ืองที่เช่ือมต่อเท่าน้ัน โดยการทางานกับ Mail Server ประกอบดว้ ย 3 สถานะ ไดแ้ ก่ สถานะขออนุมตั ิ สถานะรับ - สง่ รายการ และสถานะปรับปรุง ขอ้ มลู 2.5 SMTP (Simple Mail Transfer Protocol) โพรโทคอลสาหรับการส่งอีเมลบนเครือข่ายอินเทอร์เน็ตไปยังเคร่ืองอ่ืน ๆ ใช้งาน ร่วมกับ POP3 ทาการสื่อสารระหว่าง Mail Server กับ Mail Client โดยจะมีผู้ให้บริการ Mail Server ท า ห น้ า ที่ ใ น ก า ร ส่ ง ข้ อ มู ล แ ล ะ ผู้ ส่ ง จ ะ ต้ อ ง มี ช่ื อ ผู้ ใ ช้ ง า น กั บ ผู้ ใ ห้ บ ริ ก า ร เ ช่ น [email protected] ผูใ้ หบ้ รกิ ารคอื udru.ac.th เป็นต้น Your Computer SMTP POP3 (Sending Mail) (Receiving Mail) Internet Mail Server Mail Server ภาพท่ี 1.2 หลกั การทางานของโพรโทคอล SMTP กบั POP3 ทีม่ า: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560)

6 CHAPTER 1: INTERNET&WEBSITE 2.6 IMAP4 (Internet Message Access Protocol version 4) โพรโทคอลสาหรับการรับอีเมลและแสดงผลในรูปแบบออนไลน์ (Online) โดยจะทา การตรวจสอบข้อมูลระหว่าง Mail Server กับเครื่องท่ีมีการเชื่อมต่อ จากน้ันจะประมวลผลข้อมูลให้ ตรงกัน (Synchronize) สามารถอ่านอีเมลได้จากทุกอุปกรณ์ ทุกสถานที่ ที่มีการเชื่อมต่อกับ Mail Server แตไ่ มส่ ามารถจัดเกบ็ ลงบนเครื่องคอมพวิ เตอร์ได้ 2.7 FTP (File Transfer Protocol) โพรโทคอลสาหรบั ถ่ายโอนไฟลข์ อ้ มูลรปู แบบต่าง ๆ ระหว่างเครือ่ งคอมพวิ เตอร์ลูกข่าย กบั เคร่อื งคอมพิวเตอร์แม่ข่ายท่ีมีการเช่ือมต่อกัน โดยพ้ืนท่ขี องเคร่ืองแม่ข่ายเรียกว่าโฮสต้ิง (Hosting) จะทาการถ่ายโอนข้อมูลด้วยวิธีการอัพโหลดผ่านโปรแกรม FTP เช่น Filezilla WinSCP เป็นต้น ไฟล์ข้อมลู ทม่ี ักถา่ ยโอนไปยงั เครื่องแมข่ า่ ย เชน่ ไฟล์เวบ็ เพจ ไฟล์เอกสาร เปน็ ต้น 2.8 DHCP (Dynamic Host Configuration Protocol) โพรโทคอลสาหรับกาหนดและแจกจ่ายหมายเลข IP Address ให้แก่เครื่องลูกข่าย แบบอัตโนมัติ เม่ือเครื่องลูกข่ายเริ่มทางานจะมีการร้องขอหมายเลข IP มายัง DHCP Server และ DHCP Server จะกาหนดหมายเลข IP แล้วแจกให้กับเคร่ืองลูกข่ายทุกเคร่ืองโดยไม่ซ้ากัน ถึงแม้จะมี เคร่ืองลูกข่ายจานวนมากก็ตาม โดยอุปกรณ์ท่ีทาหน้าท่ีเป็น DHCP Server เช่น Router, ADSL Modem, Wireless Access Point เป็นต้น 3. ผูใ้ หบ้ ริการอินเทอรเ์ นต็ ผู้ให้บริการอินเทอร์เน็ต (Internet Service Provider: ISP) คือ หน่วยงานที่ให้บริการ เช่อื มต่อเข้ากับอินเทอรเ์ น็ต เปน็ ตัวกลางในการเช่ือมต่อเข้ากับเครือข่ายอื่น ๆ ท้งั ในและนอกประเทศ ให้ผู้ใช้สามารถเข้าถึงข้อมูลจากภายนอกได้ รวมถึงเป็นสือ่ กลางในการส่งข้อมูลไปยังผู้รับท่ีอยู่ห่างไกล ซงึ่ ในประเทศไทยแบ่งผู้ให้บริการอนิ เทอร์เน็ตเป็น 2 ประเภท คือ ผใู้ ห้บรกิ ารอนิ เทอรเ์ นต็ เชงิ พาณิชย์ (Commercial ISP) และผู้ให้บริการอินเทอร์เน็ตสาหรับสถาบันการศึกษา การวิจัย และหน่วยงาน ของรัฐหรือผู้ให้บริการที่ไม่แสวงหาผลกาไร (Non-Commercial ISP) ซึ่งปัจจุบันประเทศไทยมีผู้ให้ บรกิ ารอินเทอร์เน็ตหลายองค์กร (วิโรจน์ ชัยมลู และสพุ รรษา ยวงทอง, 2558: 154-155) ดงั ตารางท่ี 1.2

CHAPTER 1: INTERNET&WEBSITE 7 ตารางที่ 1.2 ตวั อย่างผใู้ ห้บริการอนิ เทอร์เนต็ ในประเทศไทย Commercial ISP Non-Commercial ISP บริษทั กสท โทรคมนาคม จากดั (มหาชน) เครอื ข่ายไทยสารอินเทอรเ์ นต็ (CAT Telecom Public Company Limited) (ThaiSarn) บรษิ ทั ทรปิ เปิลที บรอดแบนด์ จากัด (มหาชน) เครือข่ายคนไทย (Triple 3 Broadband: 3BB) (Khonthai) บรษิ ทั ทโี อที จากดั (มหาชน) เครอื ข่ายพับเน็ต (TOT Public Company Limited) (PubNet) บริษทั แอดวานซ์ อนิ โฟร์ เซอรว์ สิ จากดั เครอื ข่ายยูนิเนต็ (มหาชน) (Advanced Info Service: AIS) (UniNet) บรษิ ัท ทรู คอรป์ อเรช่นั จากัด (มหาชน) กระทรวงดิจิทัลเพื่อเศรษฐกิจและสงั คม (True Corporation) (Ministry of Digital Economy and Society) บริษทั สามารถ อนิ โฟเนต จากัด สานกั บริการเทคโนโลยีสารสนเทศภาครฐั (Samart Infonet) (GITS) 4. บริการทางอินเทอร์เนต็ บริการทางอินเทอร์เน็ต เป็นการนาเทคโนโลยีอินเทอร์เนต็ และซอฟต์แวร์มาใช้เพ่ืออานวย ความสะดวกในด้านต่าง ๆ ตอบสนองความต้องการในดา้ นการส่ือสารของผู้ใช้ ท้ังในระดับบคุ คล หรอื องค์กร อยู่ในรูปแบบของการให้บริการข้อมูลข่าวสาร หรือการรับ - ส่งข้อมูล ผ่านเครือข่าย อินเทอรเ์ น็ต โดยบริการหลกั ทมี่ กี ารใช้งานทัว่ ไป มดี งั น้ี 4.1 บรกิ ารเวลิ ์ด ไวด์ เวบ็ (World Wide Web: WWW) เครือข่ายที่เชื่อมต่อกันท่ัวโลกหรือท่ีเรียกกว่าเครือข่ายใยแมงมุม เป็นแหล่งข้อมูล ขนาดใหญ่ ให้บรกิ ารข้อมูลข่าวสาร ความบันเทิง การศกึ ษา ตลอดจนการดาเนนิ ธุรกิจ ทงั้ ภาครัฐและ เอกชน หรือส่วนบุคคล ผ่านเครือข่ายอินเทอร์เน็ต ในรูปแบบของสื่อมัลติมีเดียที่สามารถโต้ตอบกับ ผู้ใช้ได้ (Interactive Multimedia) โดยการให้บริการจะอยู่ในรูปแบบของเว็บไซต์ ใช้งานผ่าน โปรแกรมแสดงผลเวบ็ (Web Browser) รูปแบบของเนอื้ หาทีใ่ ห้บรกิ ารประกอบด้วย ขอ้ ความ ภาพนิง่ ภาพเคลื่อนไหว เสียง และวิดีโอ สามารถเช่ือมโยงไปยังเว็บเพจอื่นหรือเว็บไซต์อื่นผ่านทาง ไฮเปอร์เท็กซ์ (Hypertext) ซ่ึงนอกจากการใหบ้ ริการข้อมูลข่าวสารผ่านเว็บไซต์ ยังมีบรกิ ารโปรแกรม ประยุกต์ด้านต่าง ๆ เพื่ออานวยความสะดวกให้กับผู้ใช้ โดยที่ไม่ต้องใช้งานโปรแกรมในเคร่ือง คอมพวิ เตอร์ (สธุ ี พงศาสกุลชัย และณรงค์ ลา่ ดี, 2551: 100-101)

8 CHAPTER 1: INTERNET&WEBSITE 4.2 บรกิ ารจดหมายอเิ ล็กทรอนิกส์ (Electronic Mail: Email) บริการสาหรับตดิ ต่อส่อื สาร เพอ่ื การรับ - สง่ ขอ้ มลู จดหมายผา่ นเครอื ข่ายอินเทอร์เน็ต สามารถส่งจดหมายในรูปแบบข้อความ ภาพ และสามารถแนบไฟล์เอกสารต่าง ๆ เพื่อส่งไปยังผู้รับ ผ่านทางท่อี ยอู่ เี มล (Email Address) ไดอ้ ย่างรวดเร็ว ตัวอยา่ งผ้ใู หบ้ ริการอีเมล เชน่ Gmail Outlook Yahoo เป็นต้น นอกจากน้ี ผู้ให้บริการอาจเป็นหน่วยงานหรือองค์กรที่มีการติดตั้งระบบอีเมลบน เคร่อื งแมข่ า่ ย (Mail Server) ภายในหน่วยงาน เช่น udru.ac.th msu.ac.th เป็นต้น 4.3 บริการสบื คน้ ขอ้ มลู (Search Engine) บรกิ ารสาหรับสบื คน้ ขอ้ มูลท่ีมอี ยู่บนอนิ เทอรเ์ น็ตหรือเวบ็ ไซต์ เพอ่ื อานวยความสะดวก ในการสืบค้นข้อมูลด้านต่าง ๆ ให้การค้นหาข้อมูลมีความรวดเร็ว ได้ข้อมูลที่ถูกต้อง ตรงกับความ ต้องการ ไม่ว่าจะเป็น ข้อมูลทางการศึกษา ข้อมูลสถานที่ท่องเท่ียว ข้อมูลการเดินทาง ข้อมูลทาง วัฒนธรรมของแต่ละชาติ และข้อมูลอื่น ๆ อีกมากมาย ซึ่งข้อมูลอาจอยู่ในรูปแบบของข้อความ ภาพ เสียง หรือวิดีโอ บริการประเภทนี้ผใู้ ช้จะต้องใชง้ านผ่านเว็บไซต์ของผู้ให้บริการเครื่องมือในการสบื คน้ ข้อมูล เช่น Google.com Yahoo.com Bing.com ask.com เปน็ ตน้ 4.4 บรกิ ารสือ่ สงั คมออนไลน์ (Social Media) บริการสาหรับการสื่อสารข้อมูลในรูปแบบการนาเสนอบทความ ข้อมูลข่าวสาร หรือ ความคิดเหน็ ส่วนบุคคลทมี่ ีต่อเหตุการณ์ต่าง ๆ เป็นสอ่ื กลางที่ให้บุคคลทั่วไปมีส่วนรว่ มสร้างสรรค์และ แลกเปล่ียนความคิดเห็น เนื้อหาอยู่ในรูปแบบของสื่อมัลติมีเดีย โดยเน้ือหาอาจสร้างข้ึนเองหรือเป็น เน้ือหาที่แบ่งปัน (Share) มาจากแหล่งอื่น ซึ่งข้อแตกต่างจาก เวิล์ด ไวด์ เว็บ คือ สื่อสังคมออนไลน์ สามารถส่ือสาร หรือแสดงความคิดเห็นโต้ตอบกันได้อย่างอิสระ ในรูปแบบของกระดานสนทนาหรือ เว็บบอรด์ (Webboard) เช่น Facebook Twitter Instagram Line เปน็ ต้น 4.5 บรกิ ารควบคมุ คอมพวิ เตอรร์ ะยะไกล (Remote Desktop Connection) บริการท่ีสามารถเชื่อมต่อและควบคุมเครื่องคอมพิวเตอร์เป้าหมายท่ี ตั้งอยู่ต่างพื้นท่ี เช่น ควบคุมเคร่ืองคอมพิวเตอร์ท่ีต้ังอยู่ในที่ทางานโดยควบคุมอยู่ที่บ้าน เป็นต้น การเช่ือมต่อต้อง อาศัยโปรแกรมควบคุมเคร่ืองคอมพิวเตอร์ระยะไกล เพ่ือใช้ Username และ Password สาหรับ ยืนยันการเชื่อมต่อ โดยจะต้องเปิดใช้งานโปรแกรมในเคร่ืองคอมพิวเตอร์ท้ังเคร่ืองท่ีใช้ควบคุมและ เคร่ืองเป้าหมาย ซึ่งจะสามารถมองเห็นหนา้ จอของเคร่ืองทีก่ าลงั ถูกควบคุม เสมือนกาลังใช้งานเครอื่ ง เปา้ หมายจรงิ เช่น Chrome Remote Desktop, Team Viewer เป็นตน้ 4.6 บรกิ ารถา่ ยโอนไฟล์ขอ้ มลู (File Transfer Protocol: FTP) บริการสาหรับการถ่ายโอนไฟล์ข้อมูลจากเครื่องคอมพิวเตอร์ส่วนบุคคลไป ยังเคร่ือง คอมพิวเตอร์แม่ข่าย อาศัยโปรแกรมสาหรับถ่ายโอนข้อมูล โดยไฟล์ข้อมูลที่มักมีการถ่ายโอนไปยัง เคร่ืองคอมพิวเตอร์แมข่ ่าย เชน่ ไฟลเ์ ว็บเพจ ไฟล์เอกสารสาหรบั ดาวนโ์ หลด ไฟล์สื่อมัลตมิ ีเดยี เปน็ ตน้ โปรแกรมสาหรบั ถ่ายโอนไฟลข์ ้อมูล เช่น FileZilla, SSH Secure Shell เป็นตน้

CHAPTER 1: INTERNET&WEBSITE 9 4.7 บริการระบบประมวลผลแบบกลุม่ เมฆ (Cloud Computing) บริการสาหรับการทางานของผู้ใช้ผ่านระบบอินเทอร์เน็ต เปรียบเสมือนการใช้งาน เครื่องคอมพิวเตอร์ท้ังในดา้ นของฮารด์ แวร์ และซอฟตแ์ วร์ และพ้ืนที่สาหรับจัดเก็บข้อมูล ประมวลผล โดยอิงจากความต้องการของผู้ใช้ สามารถระบุความต้องการไปยังซอฟต์แวร์ของระบบได้ โดย ซอฟต์แวร์จะร้องขอให้ระบบจัดสรรทรัพยากรและบริการให้ตรงกับความต้องการผู้ใช้ รองรับการใช้ งาน การประมวลผล ตลอดจนการจัดเก็บข้อมูล โดยโปรแกรมท่ีทางานบนเครื่องคอมพิวเตอร์ จะ เปลี่ยนเป็นการทางานผ่านโปรแกรมแสดงผลเว็บ เช่น สามารถใช้งานโปรแกรมสร้างงานนาเสนอผา่ น อินเทอร์เน็ตได้ โดยไม่ต้องเปิดโปรแกรมในเครื่องคอมพิวเตอร์ เป็นต้น Cloud Computing จึงเป็น ระบบทพี่ ร้อมรองรับการทางานของผู้ใช้งานในทุก ๆ ดา้ น (CS Loxinfo, 2560: 1) เวบ็ ไซต์ เว็บไซต์ (Website) คือ แหล่งเก็บรวบรวมข้อมูลบนอินเทอร์เน็ต แสดงผลข้อมูลผ่าน โปรแกรมแสดงผลเว็บ (Web Browser) ในเว็บไซต์ประกอบด้วยหน้าเว็บเพจ (Webpage) ซึ่งเป็น เอกสารท่ีใช้แสดงผลข้อมูล จานวนหลายหน้า และมีการเช่ือมโยงแต่ละเว็บเพจเข้าหากันด้วยไฮเปอร์ ลิงก์ (Hyperlink) เนื้อหาในเว็บไซต์มักอยู่ในรูปแบบของส่ือประสม (Multimedia) ประกอบด้วย ข้อความ ภาพนงิ่ ภาพเคล่ือนไหว เสยี ง และวิดโี อ เวบ็ ไซตจ์ งึ เปน็ แหล่งรวบรวมความรู้ ขา่ วสาร ความ บันเทิง ธุรกิจ งาน และอื่น ๆ อีกมากมาย ถือเป็นช่องทางสาหรับเผยแพร่ข้อมูลหรือการ ประชาสัมพนั ธ์หน่วยงานที่ไดร้ บั ความนิยมในปจั จบุ ัน เน่ืองจากผู้ใช้สามารถเข้าถึงได้ง่าย อีกทัง้ ยังเป็น ชอ่ งทางสาหรบั ติดต่อสื่อสารระหว่างผใู้ ช้งานกบั หน่วยงานผ้เู ผยแพร่เว็บไซต์ไดเ้ ปน็ อยา่ งดี 1. วิวัฒนาการของเทคโนโลยีเวบ็ วิวัฒนาการของเทคโนโลยีเว็บในยุคปัจจุบัน มีความก้าวหน้าอย่างมากเม่ือเทียบกับเว็บใน ยุคเร่ิมต้น มีการพัฒนาขีดความสามารถให้สามารถตอบสนองความต้องการของผู้ใช้ในรูปแบบการ โต้ตอบระหว่างผู้ใช้กับเว็บ (Interactive) ได้เป็นอย่างดี และเว็บมีการทางานในรูปแบบของ ปัญญาประดิษฐ์ (Artificial Intelligence: AI) มากย่ิงข้ึน อีกท้ังยังมีเคร่ืองมือสาหรับพัฒนาเว็บที่ สามารถใช้งานได้ง่าย พัฒนาได้อย่างรวดเร็ว โดยแบ่งวิวัฒนาการของเว็บออกเป็น 4 ยุคหลัก ดังน้ี (จรงุ ยศ อรญั ยะนาค, 2560: 7-9)

10 CHAPTER 1: INTERNET&WEBSITE 1.1 Web 1.0 ยคุ แห่งการเริ่มตน้ เปน็ การพัฒนาเวบ็ ดว้ ยภาษา HTML เปน็ หลัก ผชู้ มเว็บไซตส์ ามารถ อ่านข้อมูลได้เพียงอย่างเดียว (Read Only) ไม่สามารถโต้ตอบกับเว็บไซต์ได้ หรือเรียกว่า การสื่อสาร ทางเดียว (One–Way Communication) เช่นเดียวกับส่ือประเภทอ่ืน ๆ เช่น โทรทัศน์ วิทยุ เป็นต้น เจา้ ของเว็บไซต์มักจะนาเสนอข้อมลู ต่าง ๆ ท่เี ก่ียวขอ้ งกบั ตนเอง โดยกาหนดเนือ้ หาดว้ ยตนเองท้ังหมด และต้องมคี วามร้คู วามสามารถในการพัฒนาเวบ็ ไซต์ ซง่ึ ในยคุ 1.0 ยังมผี ู้ให้บริการอนิ เทอรเ์ น็ตจานวน นอ้ ยค่าใช้จา่ ยจงึ สงู และความเร็วในการเช่อื มตอ่ ยังมีขีดจากัด 1.2 Web 2.0 ยุคแห่งการพัฒนาและการเชื่อมโยง เป็นยุคท่ีอุปกรณ์สาหรับใช้เข้าถึงอินเทอร์เน็ตมี ราคาถูกลง มีการส่งเสริมความรู้ทางด้านการใช้งานคอมพิวเตอร์เพิ่มมากขึ้น ภาษาที่ใช้พัฒนาเว็บมี ความก้าวหน้า เกิดเทคโนโลยีโปรแกรมประยุกต์บนเว็บ (Web Application) เจ้าของเว็บไซต์และ ผู้ชมเว็บไซต์สามารถโต้ตอบกันได้ ทาให้เกิดการสื่อสารแบบสองทาง (Two-Way Communication) มีการแบ่งปันความรู้และแลกเปลี่ยนความคิดเห็นผ่านบล็อก (Blog) กระดานสนทนา (Webboard) หรือส่ือสังคมออนไลน์ (Social Media) ผู้ใช้สามารถสร้างเน้ือหาต่าง ๆ และเผยแพร่ได้ด้วยตนเอง โดยมเี วบ็ ไซตท์ ่ใี ห้บริการพน้ื ทสี่ าหรบั สรา้ งเน้ือหาจานวนมาก 1.3 Web 3.0 ยุคแห่งโลกอนาคต เป็นยุคท่ีเน้นการจัดการข้อมูลบนเว็บ เว็บไซต์สามารถจัดการ ข้อมูลจานวนมากได้อย่างมีประสิทธิภาพ ผู้ใช้สามารถจัดการเนอื้ หาหรอื ปรับแต่งข้อมูลได้อย่างอิสระ มีการพัฒนาให้เป็นเว็บเชิงความหมาย (Semantic Web) ซ่ึงเป็นเทคโนโลยีสาหรับจัดเก็บ และ นาเสนอข้อมูลแบบมีโครงสร้าง สามารถจาแนกความสัมพันธ์ของข้อมูล เพื่อสะดวกในการค้นหาและ เข้าถึงได้อย่างรวดเร็ว สามารถแสดงข้อมูลเฉพาะส่วนที่ตรงตามความต้องการของผู้ใช้ได้ มีการนา ภาษา OWL (Web Ontology Language) ซ่ึงเป็นภาษาที่ใช้ในการอธิบายสิ่งท่ีมีความสัมพันธ์กัน โดยยึดจากความหมายของส่ิงนั้น ๆ เพอ่ื เชอ่ื มโยงกับเมทาดาทา (Metadata) ทาให้การคน้ หาข้อมูลมี ประสทิ ธิภาพ ตรงตามความตอ้ งการ และยงั มีการผสมผสานโปรแกรมหรือบริการต่าง ๆ ของเวบ็ ที่มา จากหลาย ๆ แหล่ง เข้าไวด้ ้วยกัน เพือ่ ประโยชน์ในการใช้งาน 1.4 Web 4.0 ยุคแห่งความฉลาด (Ultra-Intelligent) หรือเรียกว่า A Symbiotic Web เป็นยุคที่ เว็บทางานแบบ Artificial Intelligence (AI) เว็บไซต์จะมีความฉลาดมากย่ิงขึ้น สามารถคิด หรือคาด เดาความต้องการของผู้ใช้ได้ ตอบสนองการตัดสินใจของผู้ใช้ในการอ่านเน้ือหา สามารถช่วยผู้ใช้ ตัดสินใจได้ว่าเน้ือหาจากแหล่งใดมีคุณภาพดีท่ีสุด รูปแบบการนาเสนอข้อมูลมีความหลากหลาย รวดเรว็ สามารถทางานได้บนทกุ อุปกรณ์ (Fowler & Rodd, 2013: 1)

CHAPTER 1: INTERNET&WEBSITE 11 2. ประเภทของเว็บไซต์ ประเภทของเว็บไซต์ที่มีการใช้งานในปัจจุบัน สามารถจาแนกประเภทได้ตามลักษณะ เนื้อหา รูปแบบบริการ และโปรแกรมประยุกต์ในเว็บไซต์ ซึ่งการใช้งานเว็บไซต์แต่ละประเภท จะมี จุดประสงค์ท่ีแตกต่างกัน และการพัฒนาเว็บไซต์แต่ละประเภทจะเก่ียวข้องกับการออกแบบเว็บ เพ่ือ ตอบสนองการใช้งานของกลุม่ เปา้ หมาย โดยแบ่งประเภทของเวบ็ ไซต์ได้ ดังน้ี (Am2b, 2560: 1) 2.1 เวบ็ ไซต์ส่วนบคุ คล (Personel Website) เว็บไซต์ทเี่ กดิ ขนึ้ ในยุคแรกของการพฒั นาเวบ็ มีวัตถุประสงคเ์ พ่ือนาเสนอข้อมลู ส่วนตัว หรือข้อมูลของกลุ่มบุคคล เช่น ประวัติส่วนตัว ผลงาน ภาพถ่าย ประสบการณ์ ความคิดเห็นส่วนตัว บันทึกประจาวนั หรอื สง่ิ ที่สนใจเป็นพิเศษ เปน็ ตน้ โดยเวบ็ ไซต์สว่ นบุคคลจะมีจานวนเวบ็ เพจเพียงไม่ก่ี หน้า หรืออาจมีเพยี งหน้าเดยี ว 2.2 เว็บไซตส์ าหรับนาเสนอขอ้ มลู หรือองค์ความรู้ (Information Website) เว็บไซต์ท่ีพัฒนาขึ้นมาเพื่อนาเสนอข้อมูลท่ีหลากหลายหรือนาเสนอข้อมูลเฉพาะด้าน ซึ่งโดยส่วนใหญ่มักเป็นเว็บไซต์ที่ไม่แสวงหาผลกาไร ทั้งภาครัฐและเอกชน รวมถึงองค์กรอิสระด้าน ตา่ ง ๆ เช่น wikipedia.org saranukromthai.or.th moac.go.th เป็นต้น 2.3 เวบ็ ไซตส์ าหรับนาเสนอข่าวสารหรอื เหตกุ ารณ์ทเ่ี กดิ ขึน้ (News Website) เว็บไซต์นาเสนอเหตุการณ์ท่ีเกิดขึ้นในอดีต เหตุการณ์ท่ีเกิดขึ้นในปัจจุบัน หรือเป็น เหตุการณ์ท่ีจะเกิดข้ึนในอนาคตอันใกล้ ซ่ึงโดยส่วนใหญม่ ักถูกพัฒนาโดยองค์กรด้านส่ือสารมวลชน ที่ มีส่ือนาเสนอหลักไม่ว่าจะเป็น โทรทัศน์ วิทยุ หรือหน่วยงานของรัฐท่ีต้องการนาเสนอข่าว เช่น thairath.co.th workpointtv.com parliament.go.th เปน็ ต้น 2.4 เว็บไซต์สาหรบั การดาเนินธรุ กิจในรูปแบบออนไลน์ (Business Website) การนาเสนอธุรกิจ สินค้า บริการ หรือส่ิงท่ีเก่ียวข้องกับธุรกิจผ่านเว็บไซต์ ช่วยให้ผู้ที่ สนใจสามารถติดต่อส่ือสารกับองค์กรธุรกิจผ่านเว็บไซต์ได้ทันที เช่น 3bb.co.th ais.co.th truecorp.co.th jib.co.th เป็นตน้ 2.5 เวบ็ ไซต์ทางการศกึ ษา (Education Website) เว็บไซต์ที่เน้นการเผยแพร่องค์ความรู้ในศาสตร์ด้านต่าง ๆ เพื่อให้ผู้ศึกษาสามารถ ค้นคว้าได้ด้วยตนเอง ซึ่งอยู่ในรูปแบบของเอกสารอิเล็กทรอนิกส์ (Electronic Book: E-Book) หรือ E-Learning หากเป็นการศึกษาในระดับอุดมศึกษา จะมีเว็บไซต์สาหรับสืบค้นงานวิจัยหรือบทความ ทางวชิ าการในรปู แบบฐานขอ้ มูล เช่น tdc.thailis.or.th ieeexplore.ieee.org scholar.google.com เป็นต้น

12 CHAPTER 1: INTERNET&WEBSITE 2.6 เว็บไซต์สาหรบั การขายสนิ คา้ และบรกิ าร (E-Commerce Website) การนาสินค้าประเภทต่าง ๆ ลงขายในเว็บไซต์ โดยจะมีระบบจัดการสินค้า ระบบการ ชาระเงิน ระบบการจัดส่งสินค้า และระบบอื่น ๆ ข้ึนอยู่กับการให้บริการของเว็บไซต์ รวมถึงการ ใหบ้ รกิ ารผู้ใช้ในรปู แบบตา่ ง ๆ เช่น การซื้อสนิ คา้ ออนไลน์ การซอื้ บตั รโดยสารเครอื่ งบิน การจองที่พัก เป็นต้น เว็บไซต์ในการซ้ือ-ขายสินค้าออนไลน์ เช่น lazada.co.th weloveshopping.com kaidee.com เป็นต้น และเว็บไซต์สาหรับให้บริการจองท่ีพัก เช่น trivago.co.th traveloka.com agoda.com เป็นต้น 2.7 เวบ็ บล็อก (Blog) เว็บไซต์ในรูปแบบของการเผยแพร่บทความด้านต่าง ๆ ตามความต้องการของผู้เขียน สามารถนาเสนอข้อมูลได้อย่างอิสระ ผู้เข้าชมสามารถแสดงความคิดเห็นเก่ียวกับบทความที่อยู่ใน บล็อกได้ ซ่ึงความแตกต่างของเว็บบล็อกกับเวบ็ ไซต์ทั่วไป คือ เว็บบล็อกมีผู้ให้บรกิ ารเคร่อื งมือในการ สร้างเนื้อหาและพื้นท่ีจัดเก็บ โดยที่ผู้ใช้ไม่จาเป็นจะต้องมีเคร่ืองแม่ข่ายเพ่ือจัดเก็บข้อมูลเว็บไซต์ของ ตนเอง อีกทั้งผู้ใช้ไม่จาเป็นต้องจดทะเบียนโดเมนเนม เนื่องจากผู้ให้บริการจะมีระบบสาหรับการตั้ง โดเมนเนมให้กบั ผูใ้ ช้แบบไมค่ ดิ ค่าใชจ้ า่ ย เชน่ blogger.com wordpress.com เป็นต้น ทง้ั น้ี หากผใู้ ช้ มีความรู้พ้ืนฐานภาษา HTML ก็จะสามารถตกแต่งเว็บบล็อกให้มีรูปแบบที่สวยงาม หรือเพิ่มเติมส่วน ต่าง ๆ ให้เว็บบล็อกมีความสมบูรณ์มากย่งิ ขึน้ 2.8 เครือขา่ ยสงั คมออนไลน์ (Social Network) เว็บไซต์ในรูปแบบของการส่ือสารข้อมูลไปยังผู้รับ โดยสามารถโต้ตอบกันระหว่างผู้ส่ง สารกบั ผูร้ บั สาร หรอื ระหว่างผรู้ ับสารด้วยกนั ซง่ึ ผู้ส่งสารกับผู้รับสารไมจ่ าเปน็ ตอ้ งรู้จกั กันมาก่อน หรอื อาจทาความรู้จักกันผ่านเครือข่ายสังคมออนไลน์ สามารถสร้างเครือข่ายเพื่อเชอื่ มโยงข้อมูลระหว่างผู้ ท่ีมีความสนใจในเรื่องเดียวกัน หรือมีกิจกรรมร่วมกัน โดยมีบุคคลหรือหน่วยงานต่าง ๆ ร่วมกันเป็น เครือข่ายเพ่ือใช้ทรัพยากรร่วมกัน แบ่งปันข้อมูลข่าวสาร และข้อมูลอ่ืน ๆ ในรูปแบบของสื่อประสม จึงเกิดเป็นเครือข่ายสังคมในรูปแบบออนไลน์ เช่น facebook.com twitter.com linkedin.com เปน็ ตน้ (พิชติ วิจิตรบญุ ยรกั ษ์, 2554: 99-103) 2.9 เวบ็ ไซต์เคร่อื งมอื คน้ หาข้อมลู (Search Engine) เครื่องมือที่ถูกสร้างข้ึนเพื่อใช้ในการค้นหาข้อมูลผ่านหน้าจอเว็บไซต์ โดยผู้ใช้ป้อน คาคน้ หา (Keyword) ผา่ นเว็บไซต์ของผ้ใู ห้บริการ เพอื่ ให้เครอ่ื งมอื ทาการคน้ หาข้อมลู จากเว็บไซต์ต่าง ๆ ตามที่ผู้ใช้ต้องการ ผลลัพธ์ที่ได้จะมีความเกี่ยวข้องกับคาท่ีใช้ในการค้นหา ซึ่งเน้ือหาอาจเป็น ข้อความ ภาพ เสียง หรือวิดีโอ นอกจากน้ี เคร่ืองมือค้นหายังสามารถค้นหาข้อมูลด้วยภาพหรือเสียง ได้ เชน่ google.com bing.com search.yahoo.com เป็นต้น ปัจจุบันมีการแข่งขันทางธรุ กิจต่าง ๆ เป็นจานวนมาก จึงเกิดการแข่งขนั ทางด้านผลการค้นหาข้อมลู เว็บไซต์ เพือ่ ใหเ้ ว็บไซต์ของตนเองอยู่ใน อันดับแรกหรือในหน้าแรกของผลการค้นหา ด้วยเทคนิควิธีต่าง ๆ เช่น การทา Search Engine Optimization: SEO เป็นตน้

CHAPTER 1: INTERNET&WEBSITE 13 3. องค์ประกอบของเว็บไซต์ องคป์ ระกอบของเว็บไซต์ มีความสาคัญต่อกระบวนการพฒั นาและเผยแพร่เว็บไซต์เป็นอย่าง ยิ่ง หากขาดองค์ประกอบส่วนใดส่วนหน่ึงจะส่งผลให้เว็บไซต์ไม่สามารถใช้งานได้อย่างเต็ม ประสิทธภิ าพ โดยมรี ายละเอียดขององค์ประกอบหลกั ดังน้ี 3.1 โฮมเพจ (Homepage) หน้าแรกหรือจุดเริ่มต้นของการใช้งานเว็บไซต์ โดยผู้เข้าใช้งานเว็บไซต์มักจะพบหน้า แรกก่อนเสมอ ซ่ึงโฮมเพจจึงเปรียบเสมือนหน้าปกหนังสือ ผู้พัฒนาเว็บไซต์จึงต้องออกแบบหน้าแรก ของเว็บไซต์ให้มีความสวยงาม โดดเด่น น่าสนใจ เพื่อดึงดูดผู้เข้าชมเว็บไซต์ โดยในหน้าแรกอาจมี ส่วนประกอบท่สี าคญั เช่น ช่อื เว็บไซต์ ตราสัญลักษณ์ ระบบนาทาง โฆษณา ภาพประกอบ และเนอื้ หา หลัก เปน็ ตน้ 3.2 เวบ็ เพจ (Webpage) หนา้ เวบ็ สาหรับการนาเสนอข้อมูลในรูปแบบของส่ือมลั ตมิ ีเดีย ได้แก่ ข้อความ ภาพน่ิง ภาพเคลอ่ื นไหว เสียง และวิดโี อ เวบ็ เพจจึงเปรียบเสมือนหน้าเนื้อหาในหนังสอื โดยโครงสร้างเว็บเพจ จะอยู่ในรูปแบบของเอกสาร HTML แสดงผลผ่านโปรแกรมแสดงผลเว็บ ภายในเว็บไซต์จึง ประกอบด้วยเว็บเพจจานวนหลายหน้า ที่มีการเช่ือมโยงหน้าเว็บแต่ละหน้าด้วยไฮเปอร์ลิงก์ (Hyperlink) ทั้งภายในและภายนอกเว็บไซต์ 3.3 โดเมนเนม (Domain Name) โดเมนเนม คือ ช่ือท่ีใช้ระบุลงในโปรแกรมแสดงผลเว็บ เพ่ือค้นหาเว็บไซต์จากระบบ Domain Name System (DNS) โดยโดเมนเนมจะเปน็ การระบถุ ึงหมายเลข IP Address ของเว็บไซต์ นั้น ๆ เช่น โดเมนเนม http://is.udru.ac.th แทนหมายเลข IP: 202.29.5.194 เป็นต้น มีหลักการ ทางานดงั ภาพท่ี 1.3 ภาพท่ี 1.3 หลักการทางานของโดเมนเนม ทีม่ า: (Mickey, 2018: 1)

14 CHAPTER 1: INTERNET&WEBSITE การจดทะเบียนโดเมนเนมควรเลือกประเภทของโดเมนให้เหมาะสมกับเว็บไซต์ และกาหนด โดเมนเนมใหจ้ ดจาไดง้ า่ ย ซง่ึ อาจเป็นชื่อของบุคคล นิตบิ ุคคล องค์กร เคร่อื งหมายการคา้ หรอื อนื่ ๆ ท่ี ต้องการสื่อให้เป็นตัวแทนของเว็บไซต์ ควรสื่อถึงบริการหรือจุดประสงค์ของเว็บไซต์ ซ่ึงจะทาให้ผู้เข้า ชมเว็บเป็นกลุ่มเป้าหมายท่ีต้องการ การกาหนดข้อความของโดเมนเนมควรสน้ั กระชับ มีความหมาย ที่ดี จดจาง่าย หากโดเมนเนมไม่มีความหมาย ควรกาหนดให้เป็นคาท่ีจดจาง่าย สะดุดหู และมีคา สาคัญ (keyword) เกี่ยวกับเว็บไซต์อยู่ในโดเมนเนม เช่น inforudon.com udonglide.com traveludon.net เป็นตน้ การจดทะเบียนโดเมนเนมสามารถจดทะเบียนกับผู้ให้บริการพ้ืนท่ีจัดเก็บเว็บไซต์ (Web Hosting) ผ่านทางเว็บไซต์ของผู้ให้บริการได้ เช่น hostinglotus.com hostneverdie.com domain.z.com เป็นต้น ท้ังน้ี โดเมนเนมท่ีจะจดทะเบียนต้องไม่ซ้ากับโดเมนเนมอื่น หากมีการจด ทะเบียนโดเมนนั้นแล้ว จะไม่สามารถจดทะเบียนซ้าได้อีก ผู้ท่ีจะจดทะเบียนโดเมนสามารถตรวจสอบ ชอื่ โดเมนได้จากเวบ็ ไซตข์ องผู้ให้บรกิ าร ดงั ภาพท่ี 1.4 สามารถจดโดเมนเนมได้ ไมส่ ามารถจดโดเมนเนมได้ ภาพที่ 1.4 การตรวจสอบโดเมนเนมก่อนจดทะเบยี น ที่มา: (Hostinglotus, 2018: 1) ในการแบ่งประเภทโดเมนเนม จะแบ่งตามรูปแบบของอักษรย่อองค์กรและอักษรย่อของ ประเทศ สามารถแบง่ ประเภท ได้ดงั นี้ (จรุงยศ อรญั ยะนาค, 2560: 164-165)

CHAPTER 1: INTERNET&WEBSITE 15 โดเมนเนม 2 ระดับ โดเมนเนมประเภทน้ีจะอยู่ในรูปแบบ ชื่อโดเมน.อักษรย่อประเภท องคก์ ร โดยโดเมนเนม 2 ระดับ มรี ายละเอยี ดดงั ตารางที่ 1.3 ตารางท่ี 1.3 โดเมนเนม 2 ระดับ ประเภทโดเมน ประเภทองค์กร ตัวอยา่ งเว็บไซต์ www.dek-d.com .com (commercial) องค์กรการค้า บรษิ ทั หรอื องคก์ รพาณิชย์ www.carabao.net www.change.org .net (network) องค์กรท่เี ป็นจุดเช่ือมตอ่ เครอื ข่าย www.siam.edu www.lovethailand.biz .org (organization) องค์กรท่ไี มแ่ สวงผลหากาไร www.applethai.info www.usembassy.gov .edu (education) สถาบนั การศกึ ษา www.navy.mil www.tvdirect.tv .biz (business) องคก์ รทางดา้ นธรุ กิจ (คลา้ ยกบั .com) .info (information) เว็บไซตเ์ ผยแพร่ขอ้ มลู สารสนเทศ .gov (government) องคก์ รของรฐั บาล .mil (military) องคก์ รทางทหาร .tv (tuvalu) ประเทศหมเู่ กาะในมหาสมุทรแปซฟิ ิก โดเมนเนม 3 ระดับ โดเมนเนมประเภทนี้จะอยู่ในรูปแบบของ ชื่อโดเมน.อักษรย่อประเภท องค์กร.อักษรย่อระบุประเทศ โดยตัวย่อของประเทศ เช่น th ประเทศไทย cn ประเทศจีน us ประเทศสหรัฐอเมริกา uk ประเทศอังกฤษ jp ประเทศญี่ปุ่น au ประเทศออสเตรเลีย เป็นต้น โดย โดเมนเนม 3 ระดบั มีรายละเอียดดงั ตารางที่ 1.4 ตารางที่ 1.4 โดเมนเนม 3 ระดบั ประเภทองค์กร ตัวอย่างเว็บไซต์ ประเภทโดเมนและประเทศ บรษิ ทั หรอื องคก์ รท่ีประกอบธรุ กิจใน www.ais.co.th .co.th (Commercial in Thailand) ประเทศไทย .ac.th (Academic in Thailand) .or.th (Organization in Thailand) สถาบันการศกึ ษาในประเทศไทย www.udru.ac.th .in.th (Individual in Thailand) องค์กรไม่แสวงหาผลกาไรใน www.glo.or.th .net.th (Network in Thailand) ประเทศไทย .go.th (Government in Thailand) บุคคลท่ัวไปทีอ่ าศัยอยใู่ นประเทศ www.fwd.in.th ไทย องคก์ รธุรกจิ ด้านเครอื ขา่ ยใน www.uni.net.th ประเทศไทย องคก์ รของรัฐในประเทศไทย www.nacc.go.th

16 CHAPTER 1: INTERNET&WEBSITE เว็บเซิรฟ์ เวอร์ เว็บเซิร์ฟเวอร์ (Web Server) คือ ซอฟต์แวร์สาหรับให้บริการ รับ-ส่งข้อมูล ผ่านเว็บไซต์ ติดต้ังบนเคร่ืองคอมพิวเตอร์แม่ข่าย (Server) เม่ือเครื่องลูกข่าย (Client) ทาการร้องขอข้อมูลไปยัง เว็บเซริ ฟ์ เวอร์ เว็บเซริ ฟ์ เวอรจ์ ะตอบสนองและส่งผลลัพธก์ ลับไปยงั เคร่ืองลูกข่าย โดยการรบั -สง่ ขอ้ มูล จะใช้งานผ่านโปรแกรมแสดงผลเว็บ ทางานผ่านทางโพรโทคอล HTTP (Port: 80) ปัจจุบันซอฟต์แวร์ ที่นิยมติดต้ังลงบนเครื่องแม่ข่ายเพ่ือใช้เป็นเว็บเซิร์ฟเวอร์ คือ IIS (Internet Information Services) และ Apache และระบบปฏิบัติการท่ีนยิ มติดต้ังบนเว็บเซริ ์ฟเวอร์ ไดแ้ ก่ Windows Server ใช้งานได้ กับเว็บไซต์ที่พัฒนาด้วย HTML ASP ASP.net PHP และ Linux ใช้งานได้กับเว็บไซต์ท่ีพัฒนาด้วย HTML และ PHP มีหลักการทางานดังภาพที่ 1.5 (สธุ ี พงศาสกุลชัย และณรงค์ ล่าดี, 2551: 350) Clients - HTTP Request Web Server Web Page & - HTTP Response Graphic Files Internet ภาพที่ 1.5 หลักการทางานของเวบ็ เซิรฟ์ เวอร์ ทีม่ า: (Bishop, 2003: 1) เครื่องคอมพิวเตอร์ท่ีจะนามาใช้เป็นเว็บเซิร์ฟเวอร์นนั้ หากเปน็ การใชง้ านทั่วไป มผี ู้ใช้จานวน ไม่มาก และไม่ได้เปิดเครื่องไว้ตลอดเวลา สามารถใช้คอมพิวเตอร์ตั้งโต๊ะ (Desktop Computer) ทว่ั ไป นามาใชง้ านเป็นเวบ็ เซริ ์ฟเวอรไ์ ด้ เชน่ การใช้งานเฉพาะในองค์กร หรือบริษทั ขนาดเลก็ เป็นต้น หากต้องการนาเคร่ืองคอมพิวเตอร์ไปใชง้ านเปน็ เว็บเซิรฟ์ เวอร์ท่ีจะต้องทางานตลอดเวลา และรองรับ การทางานในอัตราที่สูง จะต้องเลือกใช้เครื่องคอมพิวเตอร์สาหรับใชง้ านเป็นเครอื่ งแม่ข่ายโดยเฉพาะ ซึ่งเคร่ืองจะถูกออกแบบมาให้ทางานได้ตลอด 24 ชั่วโมง อุปกรณ์มีคุณภาพสูง มีระบบระบายความ รอ้ นดีกว่าเครื่องคอมพิวเตอร์ท่วั ไป รวมท้งั คณุ สมบตั ิที่ออกแบบมาให้ทางานหนัก สามารถเปิดทางาน ได้ในระยะเวลายาวนาน ท้ังนี้ เคร่ืองแม่ข่ายจะต้องอยู่ในสภาพแวดล้อมท่ีเหมาะสม ซึ่งการใช้งาน จะต้องมีการซ่อมบารุงตามระยะเวลาที่กาหนด เช่น เปล่ียน HDD (Hard Disk Drive) ทุก ๆ 2-3 ปี และมีระบบสารองขอ้ มูลเพอ่ื ป้องกันการสูญหายของข้อมูล เป็นต้น

CHAPTER 1: INTERNET&WEBSITE 17 เวบ็ โฮสตงิ้ เว็บโฮสติ้ง (Web Hosting) คือ รูปแบบการให้บริการพ้ืนที่สาหรับจัดเก็บข้อมูลเว็บไซต์บน เคร่ืองคอมพิวเตอร์แม่ข่าย ไม่ว่าจะเป็น ไฟล์เว็บไซต์ ไฟล์เอกสารในรูปแบบต่าง ๆ ไฟล์สื่อมัลติมีเดีย อีเมล ฐานข้อมูล หรือข้อมูลอ่ืน ๆ โดยการถ่ายโอนไฟล์ข้อมูลไปยังเว็บโฮสติ้ง จะทางานผ่านโพรโท คอล FTP ซึ่งหากผู้ใช้ไม่มีเว็บโฮสติ้งเป็นของตนเอง สามารถเช่าพ้ืนท่ีกับผู้ให้บริการ (Hosting Service Provider: HSP) เพ่ือจัดเก็บไฟล์ต่าง ๆ โดยชาระค่าบรกิ ารตามอตั ราท่ผี ู้ใหบ้ รกิ ารกาหนด ซง่ึ การเช่าเว็บโฮสติ้ง ผู้ให้บริการจะเป็นผู้ดูแลระบบ ให้สามารถบริการและจัดสรรทรัพยากรต่าง ๆ ใหก้ ับผ้ใู ช้ไดต้ ลอดเวลา มีหลักการทางานดงั ภาพที่ 1.6 ภาพที่ 1.6 หลกั การทางานของเวบ็ โฮสต้ิง ทีม่ า: (Aaditri Technology, 2016: 1) หลักการสาคัญในการเลือกเว็บโฮสติ้งที่ดี ให้เหมาะสมกับการทางาน และสามารถใช้งานได้ อย่างมปี ระสทิ ธภิ าพ ผู้ใช้ควรคานงึ ถึงหลกั การ ดงั ตอ่ ไปนี้ (จรุงยศ อรญั ยะนาค, 2560: 170-171) 1. เลือกเวบ็ โฮสตงิ้ ให้เหมาะสมกับสถานท่อี ยูข่ องกลุ่มผู้ใช้งานเวบ็ ไซต์ หากกลมุ่ ผู้ใชง้ านอยู่ใน ประเทศเป็นหลัก ควรเลือกผู้ให้บริการเว็บโฮสติ้งท่ีตั้งอยู่ภายในประเทศ หรือหากกลุ่มผู้ใช้งานอยู่ใน ต่างประเทศเป็นหลัก ควรเลือกผู้ให้บริการเว็บโฮสต้ิงที่ต้ังอยู่ต่างประเทศ เพ่ือให้ผู้ใช้งานสามารถ เข้าถึงข้อมูลไดร้ วดเร็วมากทส่ี ดุ 2. ขนาดพ้ืนที่ในการจัดเก็บข้อมูล ต้องเพียงพอกับปริมาณข้อมูลของเว็บไซต์ หากมีข้อมูล จานวนมาก เช่น ข้อมูลภาพหรือไฟล์เอกสารต่าง ๆ ที่จะเปิดให้ผู้ใช้สามารถดาวน์โหลดได้หลาย รายการ และแต่ละไฟล์มีขนาดใหญ่ จะต้องใช้พ้ืนที่เก็บข้อมูลมากขึ้น เป็นต้น ทั้งน้ี หากจาเป็นต้อง เก็บไฟล์มัลติมีเดียต่าง ๆ จานวนมาก หรือให้บริการดาวน์โหลดข้อมูล ปริมาณรับส่งข้อมูล Data Transfer (Bandwidth) ก็ต้องเพ่มิ ขน้ึ ด้วย

18 CHAPTER 1: INTERNET&WEBSITE 3. สถานที่ตั้งของเคร่ืองแม่ข่าย ต้องตั้งอยู่ในศูนย์กลางข้อมูล (Data Center) ท่ีเช่ือมต่อกับ อินเทอร์เน็ตท่ัวโลกตลอดเวลา รับ-ส่งข้อมูล ด้วยอัตราความเร็วสูงสุด มีเจ้าหน้าท่ีควบคุมการทางาน และดูแลความปลอดภยั ในดา้ นต่าง ๆ ของเคร่อื งแม่ขา่ ยอยูต่ ลอดเวลา 4. การใช้งานระบบจัดการเว็บไซต์สาเร็จรูป (Content Management System: CMS) จาเปน็ จะตอ้ งมกี ารใช้งานระบบฐานข้อมลู หรอื เวบ็ ไซต์ที่พฒั นาขึ้นเอง จาเป็นต้องใชฐ้ านข้อมลู หรือไม่ เนอ่ื งจากผใู้ หบ้ ริการเวบ็ โฮสต้ิง อาจจากัดจานวนฐานข้อมลู ผู้ใชค้ วรศึกษาการให้บริการอย่างละเอียด ก่อนทาการเช่าเว็บโฮสติง้ 5. ตรวจสอบภาษาสคริปต์ท่ีให้บริการบนเคร่ืองแม่ข่าย (Server Side Script) ให้ตรงกับ ภาษาท่ีพัฒนาเว็บไซต์ เช่น ภาษา Perl ASP ASP.NET JSP PHP เป็นต้น ซ่ึงผู้ให้บริการเว็บโฮสต้ิง ส่วนใหญ่จะสนับสนุนภาษา PHP (Linux Server) เป็นหลัก แต่อาจจะไม่สนับสนุนภาษา ASP ASP.NET ดังน้ัน ควรตรวจสอบเว็บโฮสติ้งท่ีสนับสนุนภาษาของเว็บไซต์ที่พัฒนาขึ้น ท้ังน้ี การเช่าเว็บ โฮสตงิ้ ทีส่ นับสนนุ ภาษ ASP (Windows Server) อาจมคี า่ ใชจ้ า่ ยที่สูงกวา่ 6. เลือกระบบจัดการเว็บโฮสต้ิงท่ีง่ายและยืดหยุ่นต่อการควบคุมและดูแลเว็บไซต์ โดยทั่วไป เว็บโฮสติ้งจะมีบริการหน้าจอควบคุมเว็บไซต์ (Control Panel) ซึ่งสามารถเปลี่ยนแปลงหรือเพ่ิม คณุ ลักษณะ (Feature) ในการใช้งาน เชน่ Email DNS FTP Site Statistics เป็นตน้ 7. เครื่องแม่ข่ายต้องมีประสิทธิภาพสูง เสถียร ไม่ล่ม ไม่ใช้เครื่องคอมพิวเตอร์ PC มาแอบ อ้างเป็นเว็บโฮสติ้ง และต้องมีหน่วยประมวลผลท่ีรวดเร็ว เพ่ือให้ผู้ใช้สามารถเข้าถึงเว็บไซต์ได้ใน ระยะเวลาอันรวดเร็ว โดยสามารถตรวจสอบประสิทธิภาพได้จาก CPU RAM หรือ Hard Disk และ จานวนเวบ็ ไซต์ต่อเคร่อื งแม่ขา่ ยที่ใหบ้ ริการตอ้ งมจี านวนท่เี หมาะสม 8. บริษัทของผู้ให้บริการเว็บโฮสต้ิงต้องมีความมั่นคง น่าเช่ือถือ จดทะเบียนถูกต้อง ดาเนินงานธุรกิจมายาวนาน มีตัวอย่างผู้ใช้บริการแสดงให้เห็นในหน้าเว็บไซต์ของบริษัท มีท่ีอยู่ของ สานกั งาน และเบอรโ์ ทรศัพท์ทส่ี ามารถตดิ ตอ่ ได้จรงิ 9. มีการให้บรกิ ารหลังการขายที่ดี ทมี งานมคี วามเชย่ี วชาญในการแกไ้ ขปัญหาตา่ ง ๆ ไดอ้ ยา่ ง รวดเร็ว และสามารถติดต่อกับผู้ให้บริการได้หลายช่องทาง ในกรณีท่ีเกิดปัญหาต้องสามารถติดต่อได้ อย่างรวดเร็ว เช่น ผู้ให้บริการต้องแจ้งหมายเลขโทรศัพท์มือถือ หมายเลขโทรศัพท์ของบริษัท หรือ อีเมล ผ่านหน้าเว็บไซต์ เป็นต้น แม้ว่าผู้ให้บริการเว็บโฮสติ้งจะมีการให้บริการที่ดี แต่หากสามารถ ตดิ ต่อไดเ้ พยี งช่องทางเดยี ว ผู้ใช้กจ็ ะต้องรอรับการใหบ้ รกิ ารเพียงชอ่ งทางเดียวเท่านนั้ 10. ราคาเช่าเหมาะสม หากเปรียบเทียบกับผู้ให้บริการรายอ่ืนแล้วพบว่าราคาถูกมาก อาจ เป็นไปได้ว่าผู้ให้บริการรายน้ันมีจานวนเว็บไซต์ต่อเคร่ืองแม่ข่ายมากเกินไป ซึ่งจะส่งผลให้เคร่ืองแม่ ข่ายทางานหนกั หากเปน็ ไปได้ ควรสอบถามข้อมูลจากผู้ท่เี คยใช้บริการ หรอื ผทู้ ่ีกาลงั ใช้บรกิ ารกับเว็บ โฮสต้งิ นนั้ อยู่

CHAPTER 1: INTERNET&WEBSITE 19 11. ระบบเครือข่าย (Network) ต้องมีประสิทธิภาพสูง เว็บโฮสต้ิงท่ีดีควรมีความสามารถใน การรบั -สง่ ข้อมลู ได้อย่างรวดเร็ว หากเวบ็ โฮสติ้งต้ังอยูใ่ นพืน้ ที่ของผใู้ ห้บริการ (ISP) ทม่ี ีการเช่อื มต่อกับ อินเทอร์เน็ตขนาดใหญ่ จะส่งผลให้การรับ-ส่งข้อมูลในเว็บไซต์รวดเร็วมากยิ่งขึ้น ผู้เช่าเว็บโฮสต้ิงจึง ควรพจิ ารณาถงึ สถานทีต่ ัง้ ของเว็บโฮสตง้ิ 12. มีระบบสารองข้อมูลท่ีดี เว็บโฮสติ้งควรมีการสารองข้อมูลทุกวัน เพ่ือป้องกันความ ผดิ พลาดต่าง ๆ ทอี่ าจเกดิ ข้ึนกับข้อมูล เช่น ไวรสั คอมพวิ เตอร์ อาชญากรรมทางคอมพวิ เตอร์ เป็นต้น ซง่ึ หากผใู้ ช้ไม่มีการสารองข้อมูลเกบ็ ไว้ในเครื่องคอมพวิ เตอร์ส่วนตวั สามารถที่จะร้องขอข้อมลู ที่มีการ สารองไว้จากผู้ให้บรกิ ารได้ สรุป อินเทอร์เน็ตมีบทบาทและความสาคัญต่อการดารงชีวิตของมนุษย์ในยุคปัจจุบันเป็นอย่างยิ่ง เนอื่ งจากเป็นเทคโนโลยที ท่ี าใหม้ นุษยส์ ามารถจัดการ จดั เกบ็ เผยแพร่ และเขา้ ถงึ ขอ้ มลู ขา่ วสาร สาระ ความรู้ ความบันเทิง ท้ังในด้านของความรวดเร็ว ทันต่อเหตุการณ์ ความปลอดภัย และประหยัด ค่าใช้จ่าย อินเทอร์เน็ตจึงเป็นแหล่งจัดเก็บข้อมูลขนาดใหญ่ ท่ีสามารถตอบสนองความต้องการข้อมูล ของมนุษย์ได้ในทุก ๆ ด้าน ตลอดจนเป็นการเพิ่มช่องทางการติดต่อสื่อสารที่หลากหลาย ซ่ึงปัจจุบัน ปรมิ าณของผูใ้ ชง้ านอินเทอร์เน็ตจากทัว่ โลกมจี านวนมหาศาล จงึ ส่งผลให้ปริมาณของเว็บไซต์มจี านวน มากเช่นเดียวกัน ซ่ึงความสาคัญของเว็บไซต์น้ัน นอกจากเป็นพ้ืนที่ในการเผยแพร่ประชาสัมพันธ์ ข้อมูลข่าวสารบนอินเทอร์เน็ตแล้ว เว็บไซต์ยังช่วยส่งเสริมภาพลักษณ์ ความทันสมัย ความน่าเชื่อถือ ตลอดจนสง่ เสริมศกั ยภาพในการแขง่ ขนั ด้านธุรกจิ ใหก้ ับองค์กรหรอื บริษัท และยงั สามารถประยุกต์ใช้ งานเว็บไซต์ในด้านต่าง ๆ อีกมากมาย ไม่ว่าจะเป็น ด้านพาณิชอิเล็กทรอนิกส์ ด้านการศึกษา ด้าน การเงิน เครือข่ายสังคมออนไลน์ และด้านการให้บริการอื่น ๆ ดังน้ัน การสร้างเว็บไซต์ให้สามารถ ตอบสนองความต้องการของผู้ใช้ และสามารถใช้งานได้อย่างมีประสิทธิภาพ จึงเป็นส่ิงสาคัญสาหรับ นกั พัฒนาเวบ็ ไซต์ในยคุ ปจั จบุ นั

20 CHAPTER 1: INTERNET&WEBSITE

เอกสารอา้ งอิง จรงุ ยศ อรัญยะนาค. (2560). การออกแบบเว็บไซต์ Website Design. กรุงเทพฯ: จฬุ าลงกรณ์ มหาวิทยาลยั . พิชติ วจิ ิตรบญุ ยรักษ.์ (2554). สื่อสงั คมออนไลน์: สอ่ื แห่งอนาคต Social media: Future media. วารสารนักบริหาร มหาวทิ ยาลัยกรุงเทพ, 31 (4), 99-103. ราชวิทย์ ทพิ ย์เสนา. (2560). การสร้างสรรคภ์ าพประกอบตาราวิชาการ. [ไฟล์คอมพิวเตอร์]. อดุ รธานี: สาขาวิชาสารสนเทศศาสตร์ คณะมนุษยศาสตร์และสังคมศาสตร์ มหาวทิ ยาลัย ราชภฏั อดุ รธานี. วโิ รจน์ ชัยมูล และสพุ รรษา ยวงทอง. (2558). ความรเู้ บ้ืองตน้ เกย่ี วกบั คอมพวิ เตอรแ์ ละเทคโนโลยี สารสนเทศ ฉบบั ปรับปรุง 2015-2016. กรุงเทพฯ: โปรวชิ ัน่ . สธุ ี พงศาสกุลชยั และณรงค์ ล่าดี. (2551). เว็บเทคโนโลยี (Web Technology). กรุงเทพฯ: เค ทีพี คอมพ์ แอนด์ คอนซัลท์. Aaditri Technology. (2016). Aaditri Technology - A Perfect Web Hosting Company in Delhi for Launching a Website. Retrieved February 10, 2018, from http://www.aaditritechnology.com/blog/aaditri-technology-a-perfect-web- hosting-company-in-delhi-for-launching-a-website. Am2b. (2560). เรียนรู้ 9 ประเภทของเวบ็ ไซต์ ท่ใี ช้งานแตกต่างกนั . สบื คน้ เมอื่ 12 กนั ยายน 2560, จาก https://www.am2bmarketing.co.th/web-development-article/9- types-websites. Bishop, C. (2003). What is a Web Application Server ?. Retrieved February 22, 2018, from http://www.resultantsys.com/index.php/general/what-is-a-web- application-server. CS Loxinfo. (2560). รู้จกั เทคโนโลยี Cloud Computing. สืบค้นเมือ่ 25 เมษายน 2560, จาก http://dccloud.csloxinfo.com/th/wecloud01. Fowler, J. & Rodd, E. (2013). Web 4.0: The Ultra-Intelligent Electronic Agent is Coming. Retrieved August 23, 2017, from https://bigthink.com/big-think- tv/web-40-the-ultra-intelligent-electronic-agent-is-coming. Hostinglotus. (2018). Register Domain. Retrieved February 10, 2018, from https://www.hostinglotus.com/hosting/cart.php?a=add&domain=register. IBM Knowledge Center. (2014). TCP/IP concepts. Retrieved March 10, 2018, from https://www.ibm.com/support/knowledgecenter/ru/SSLTBW_2.1.0/com.ibm.z os.v2r1.hala001/itctcpipcon.htm. Mickey. (2018). Các Máy Chủ Phân Giản DNS Miễn Phí Tốt Nhất. Retrieved August 10, 2018, from https://www.vouu-blog.site/archives/dns-free. Suman, D. (2016). HTTP Protocol. Retrieved January 13, 2016, from http://blogs.innovationm.com/http-protocol.



บทที่ 2 การออกแบบเวบ็ ไซต์ การออกแบบเว็บไซต์เป็นกระบวนการที่มีความสาคัญต่อการสร้างเว็บไซต์เป็นอย่างย่ิง เนื่องจากการออกแบบเว็บไซต์ให้มีความเหมาะสม ไม่ว่าจะเป็น การออกแบบโครงสร้างเว็บไซต์ การ จัดวางเน้ือหา การใช้เฉดสี การใช้กราฟิก ระบบนาทาง และองค์ประกอบอ่นื ๆ ซง่ึ จะสง่ ผลให้เว็บไซต์ มีความสมบูรณ์ มีรูปแบบการใช้งานตรงกับความต้องการของกลุ่มเป้าหมาย ผู้ใช้เกิดความประทับใจ เมื่อเข้าใช้งานเว็บไซต์ และกลับมาใช้งานเว็บไซต์อีกในภายหลัง ดังน้ัน การศึกษาหลักการออกแบบ เว็บไซต์และวางแผนแนวทางการสร้างให้มีความชัดเจน จึงมีความสาคัญอย่างยิ่ง โดยเนื้อหาในบทน้ี จะนาเสนอเน้ือหาเกี่ยวกับการออกแบบเวบ็ ไซต์ทีส่ อดคล้องกับการใชง้ านในยุคปจั จุบนั กระบวนการสรา้ งเวบ็ ไซต์ การสร้างเว็บไซต์เพ่ือการจัดการและเผยแพร่สารสนเทศ ให้สามารถใช้งานได้อย่างมี ประสิทธิภาพ ตอบสนองความต้องการของเจา้ ของเว็บไซต์และผู้ใชง้ าน มีกระบวนการสร้างเวบ็ ไซต์ที่ สาคัญ ดังนี้ (ชาตพล นภาวาร,ี 2554: 20-21) 1. กาหนดวตั ถุประสงค์ของการสร้างเว็บไซต์ การกาหนดวัตถุประสงค์โดยหน่วยงาน องค์กร หรือผู้ออกแบบเว็บไซต์เป็นผู้กาหนดขึ้น เพื่อแสดงให้เห็นถึงเป้าหมายในการสร้างเว็บไซต์ที่ชัดเจน เช่น เพื่อประชาสัมพันธ์หน่วยงาน เพื่อ เผยแพร่ข่าวสาร เพื่อนาเสนอธุรกิจ เพ่ือรับสมัครงาน เพื่อขายสินค้าออนไลน์ เพื่อแบ่งปันองค์ความรู้ เป็นต้น ซึ่งจะส่งผลต่อแนวทางในการออกแบบเวบ็ ไซต์ ให้เป็นไปในทิศทางที่ตรงกับวัตถุประสงคข์ อง การสร้างเวบ็ ไซต์ 2. กาหนดกล่มุ เป้าหมายทจ่ี ะเข้าใช้งานเวบ็ ไซต์ การกาหนดกลุ่มเป้าหมายหรือกลุ่มผใู้ ช้หลัก ทค่ี าดหวงั ใหเ้ ข้าใช้งานเวบ็ ไซต์ ซง่ึ การกาหนด กลุ่มเป้าหมายท่ีชัดเจน จะส่งผลต่อการออกแบบเว็บไซต์ ทั้งด้านการเตรียมเนื้อหา การกาหนด ลักษณะตัวอักษร โทนสี ภาพกราฟิก และองค์ประกอบอ่ืน ๆ ให้เหมาะสมกับกลุ่มเป้าหมายมากทส่ี ดุ รวมถึงสิ่งท่ีกลุ่มเป้าหมายจะได้กลับไปเม่ือเข้าชมเว็บไซต์ เช่น หากกลุ่มเป้าหมายเป็นนักเรียน นักศึกษา หรือวัยรุ่น ควรออกแบบเว็บไซต์ให้มีโทนสีท่ีสดใส สะดุดตา มีเน้ือหาท่ีเกี่ยวข้องกับกระแส นิยมของวัยรุ่น หรือเนื้อหาเกี่ยวกับการศึกษา เป็นต้น ทั้งนี้ นอกจากการกาหนดกลุ่มเป้าหมาย ผ้ใู ชง้ านเวบ็ ไซต์ จะต้องศึกษาความต้องการของกล่มุ เป้าหมายควบคู่กันไปด้วย

24 CHAPTER 2: WEB DESIGN 3. กาหนดรายละเอียดโครงสร้างเว็บไซต์ การกาหนดรายละเอียดโครงสร้างเว็บไซต์ในภาพรวม ให้ครอบคลุมการทางานทุกส่วน ซ่ึง เจ้าของเว็บไซต์หรือผู้บริหารองค์กร จะต้องเป็นผู้ที่มีส่วนร่วมในการกาหนดรายละเอียดโครงสร้าง เว็บไซต์ เพ่ือให้ผู้ปฏิบัติงานมีความเข้าใจในโครงสร้างหลัก ก่อนการเร่ิมต้นออกแบบและพัฒนา เว็บไซต์ เช่น จานวนเว็บเพจ ขนาดของเวบ็ เพจ การเชือ่ มโยง ระบบนาทาง ภาพประกอบ สแี ละแบบ อักษรท่ีเหมาะสมกับองค์กร เปน็ ตน้ หากมกี ารกาหนดรายละเอียดที่ชดั เจน การออกแบบเว็บไซต์ก็จะ สามารถดาเนนิ การตามรายละเอียดทก่ี าหนดไว้ได้อย่างมีประสิทธภิ าพ 4. กาหนดขอบเขตเนอ้ื หา การรวบรวมเน้ือหาท่ีต้องการให้มีในเว็บไซต์ โดยเน้ือหาที่ดีจะต้องมีความถูกต้อง สมบูรณ์ กระชับ ปริมาณเน้ือหาที่จะแทรกลงในเว็บเพจ ไม่ควรมีมากหรือน้อยจนเกินไป เน้ือหาอาจอยู่ใน รูปแบบของข้อความ ภาพนิ่ง ภาพเคลื่อนไหว หรือวิดีโอ และเป็นเน้ือหาที่ตรงกับความต้องการของ กลุ่มเป้าหมายเป็นหลัก เช่น รายละเอียดเกี่ยวกับองค์กร ประวัติความเป็นมา ข่าวประชาสัมพันธ์ รายละเอียดสินคา้ และบรกิ าร หรือข้อมลู ตดิ ตอ่ เปน็ ตน้ ท้ังน้ี การเผยแพรข่ ้อมลู ผ่านทางเว็บไซต์จะมีผู้ พบเห็นจานวนมาก ดังนั้น เน้ือหาที่จะเผยแพร่ควรมีการตรวจสอบความถูกต้องของข้อมูลอย่าง ละเอียด ไม่ว่าจะเป็น การสะกดคา ไวยากรณ์ ความเหมาะสมในการใช้ภาษา รวมถึงภาพถ่ายหรือ วิดีโอที่นามาใช้งาน ควรเป็นผลงานท่ีผลิตข้ึนเอง ไม่ควรนาผลงานของบุคคลอ่ืนมาใช้งานโดยที่ไม่ได้ รับการอนุญาตจากเจ้าของผลงาน ซ่ึงอาจเกดิ การฟอ้ งรอ้ งตามกฎหมายได้ในภายหลงั 5. กาหนดภาษาหลกั และเคร่ืองมือสาหรับพัฒนาเว็บไซต์ การกาหนดภาษาทางคอมพวิ เตอรท์ ่ีจะใช้พัฒนาเว็บไซต์ ซง่ึ ในแต่ละภาษาจะมีรูปแบบของ ไวยากรณท์ แ่ี ตกตา่ งกัน จงึ จาเป็นตอ้ งศกึ ษารูปแบบการเขียนและรายละเอียดต่าง ๆ ของภาษาท่เี ลือก อีกท้ังความสามารถในการทางานของแต่ละภาษาจะมีความแตกต่างกัน และควรเลือกเครื่องมือ สาหรบั พัฒนาเวบ็ ไซต์ท่ีมีฟังกช์ นั การทางานทีค่ รอบคลุมรูปแบบเว็บไซต์ที่กาลังจะพัฒนา ทัง้ เคร่ืองมือ ทางดา้ นการเขียนโปรแกรม และเคร่ืองมอื ทางดา้ นการออกแบบกราฟิก 6. พฒั นาเวบ็ ไซตต์ ามรปู แบบทีก่ าหนด การพัฒนาเว็บไซต์ด้วยภาษาทางคอมพิวเตอร์ โดยใช้โปรแกรมคอมพิวเตอร์ ซึ่งในการ พัฒนาจาเป็นต้องใช้โปรแกรมท่ีมีความสามารถแตกต่างกัน ไม่ว่าจะเป็นโปรแกรมสาหรับเขียนภาษา ทางคอมพิวเตอร์ โปรแกรมออกแบบเว็บเพจ โปรแกรมสร้างภาพกราฟิก และโปรแกรมแสดงผลเว็บ อาจใช้ผู้พัฒนาเพียงคนเดียวหรือใช้ผู้พัฒนาหลายคน เพ่ือแบ่งหน้าท่ีการทางาน เช่น งานด้านเขียน ภาษาทางคอมพิวเตอร์ งานดา้ นออกแบบกราฟกิ เปน็ ตน้

CHAPTER 2: WEB DESIGN 25 7. ทดสอบการทางานของเว็บไซต์ การทดสอบการทางานของเว็บไซต์ภายหลังจากการพัฒนา ซ่ึงจะทดสอบด้วยโปรแกรม แสดงผลเว็บ เช่น ความถูกต้องของเน้ือหา ความเหมาะสมของการจัดวางองค์ประกอบ การแสดงผล ด้วยอุปกรณ์ที่ต่างกันหรือโปรแกรมแสดงผลเว็บท่ีตา่ งกัน การเช่ือมโยงไปยังเว็บเพจต่าง ๆ ทั้งภายใน และภายนอกเว็บไซต์ และฟังก์ชันการทางานอ่ืน ๆ ท่ีมีในเว็บไซต์ เป็นต้น โดยต้องทาการทดสอบ อย่างละเอียด เพื่อค้นหาจุดบกพร่องท่ีอาจเกิดข้ึน หากพบจุดบกพร่องหรือข้อผิดพลาดในเว็บไซต์ ให้ ทาการปรับปรุงให้สมบูรณ์และทาการทดสอบใหม่อีกคร้ัง ก่อนการเผยแพร่เว็บไซต์สู่เครือข่าย อนิ เทอรเ์ น็ต การออกแบบโครงสรา้ งเว็บไซต์ การออกแบบโครงสร้างเว็บไซต์ (Website Structure) หรือแผนผังเว็บไซต์ (Site Map) คือ การออกแบบโครงสร้างของเว็บไซตใ์ ห้เหมาะสมกับรูปแบบการนาไปใช้งานและปรมิ าณเน้ือหาภายใน เว็บไซต์ โดยต้องกาหนดจานวนเว็บเพจให้เหมาะสมกับปริมาณข้อมูล หรือหมวดหมู่ของข้อมูลท่ีได้ จัดเตรียมไว้ และสร้างการเช่ือมโดยของเว็บเพจแต่ละหน้าให้ชัดเจน โดยสามารถออกแบบโครงสร้าง ด้วยวิธีการเขียนลงบนแผ่นกระดาษ หรืออาจใช้โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบ ดังภาพที่ 2.1 Home Page index.html about.html staff.html service.html project.html contact.html manager.html official.html doc.html supplies.html finance.html pr.html history.html info.html address.html map.html ภาพท่ี 2.1 การออกแบบโครงสร้างเว็บไซต์ ทม่ี า: (ราชวิทย์ ทพิ ย์เสนา, 2560) ในการออกแบบโครงสร้างเว็บไซต์โดยส่วนใหญ่ จะออกแบบให้เหมาะสมกับลักษณะการใช้ งานและลักษณะของข้อมลู โดยแบ่งรูปแบบโครงสรา้ งเว็บไซต์ออกเปน็ 4 รปู แบบหลกั ดงั น้ี (วันบลี ฟี , 2560: 1)

26 CHAPTER 2: WEB DESIGN 1. โครงสรา้ งแบบเรียงลาดับ โครงสร้างแบบเรียงลาดับ (Sequential Structure) เป็นการออกแบบโครงสร้างเว็บไซต์ สาหรับข้อมูลแบบเรียงลาดับ เช่น เรียงลาดับตามตัวอักษร เลขลาดับ ดัชนี เป็นต้น เหมาะสาหรับ เว็บไซต์ที่มีขนาดเล็ก เนื้อหามีปริมาณน้อย ไม่ซับซ้อน มักพบได้จากเว็บไซต์การให้ความรู้ที่แบ่ง เนื้อหาออกเป็นบทหรือเป็นตอน โดยรูปแบบการเชื่อมโยงจะถูกเรียงทีละหน้า ทิศทางของการเข้าสู่ เนื้อหามีลักษณะเป็นเส้นตรง เริ่มจากหน้าแรก มีปุ่มหรือเมนูสาหรับ เลื่อนไปเว็บเพจถัดไป และ กลบั ไปยังเว็บเพจกอ่ นหน้า ซง่ึ เป็นเครอื่ งมือหลักในการเลื่อนดูเวบ็ เพจ จึงงา่ ยตอ่ การใช้งาน ภาพท่ี 2.2 โครงสรา้ งแบบเรียงลาดับ ทมี่ า: (วนั บีลฟี , 2560: 1) 2. โครงสรา้ งแบบลาดบั ช้นั โครงสร้างแบบลาดับชั้น (Hierarchical Structure) เป็นการออกแบบโครงสร้างเว็บไซต์ สาหรับเนื้อหาท่ีมีความซับซ้อน โดยการแบ่งเน้ือหาออกเป็นส่วน หรือแบ่งหมวดหมู่ของเนื้อหาให้ ชัดเจน กาหนดรายละเอียดในแต่ละส่วนให้ลดหล่ันกันลงมาคล้ายแผนผังองค์กร มีจุดเร่ิมต้นเพียงจุด เดียว คือ หน้าแรก (Homepage) และเชื่อมโยงไปสู่เว็บเพจ ในลักษณะลาดับชั้นจากบนลงล่าง จึง สามารถทาความเข้าใจกับโครงสร้างเว็บไซต์ได้ง่าย และทาความเข้าใจในเนื้อหาท่ีมีความซับซ้อนได้ งา่ ย ภาพที่ 2.3 โครงสร้างแบบลาดบั ชั้น ที่มา: (วันบีลีฟ, 2560: 1)

CHAPTER 2: WEB DESIGN 27 3. โครงสรา้ งแบบตาราง โครงสร้างแบบตาราง (Grid Structure) เป็นการออกแบบโครงสร้างเวบ็ ไซต์สาหรบั เนื้อหา ทม่ี คี วามซับซ้อน เพื่อใหก้ ารเข้าถงึ เน้อื หาของผู้ใช้งานมีความยืดหยนุ่ มเี ชอ่ื มโยงเนอ้ื หาแตล่ ะส่วนหรือ แต่ละเว็บเพจเข้าหากัน เหมาะสาหรับเว็บไซต์ที่เน้นแสดงความสัมพันธ์ของเน้ือหา ซ่ึงการเข้าใช้งาน ผู้ใช้สามารถกาหนดทิศทางการเข้าสู่เน้ือหาได้ด้วยตนเอง โดยไม่ต้องกลับไปเร่ิมต้นท่ีหน้าแรก การ ออกแบบจะต้องมีการวางแผนท่ีดี เนื่องจากมกี ารเช่อื มโยงหลายทิศทาง ภาพที่ 2.4 โครงสร้างแบบตาราง ท่ีมา: (วนั บีลีฟ, 2560: 1) 4. โครงสร้างแบบใยแมงมุม โครงสร้างแบบใยแมงมุม (Web-Linked Structure) เป็นการออกแบบโครงสร้างเว็บไซต์ แบบไม่มีโครงสร้างท่ีแน่นอน (Unstructured) ซ่ึงจะมีความยืดหยุ่นอย่างมาก เน่ืองจากทุกเว็บเพจ สามารถเชื่อมโยงหากันได้อย่างอิสระ ทาให้ผู้ใช้สามารถเข้าถึงเน้ือหาท่ีต้องการได้ง่าย อีกท้ังการ เชื่อมโยงไม่ได้จากัดเฉพาะเน้ือหาภายในเว็บไซต์นั้น ๆ แต่สามารถเช่ือมโยงออกไปสู่เน้ือหาของ เวบ็ ไซตภ์ ายนอกได้ ภาพที่ 2.5 โครงสร้างแบบใยแมงมมุ ท่มี า: (วันบีลฟี , 2560: 1)

28 CHAPTER 2: WEB DESIGN การออกแบบเค้าโครงเว็บเพจ การออกแบบเค้าโครงเว็บเพจ (Webpage Layout) คือ การกาหนดเค้าโครงของเว็บเพจแต่ ละหน้า ให้มีขนาดและองค์ประกอบที่เหมาะสม โดยทาการจัดวางองค์ประกอบต่าง ๆ ท่ีมีความ จาเป็นลงในเว็บเพจในตาแหน่งที่ต้องการ เพ่อื แสดงให้เห็นถงึ เค้าโครงของเว็บเพจได้อย่างชัดเจน เชน่ เน้ือหา ภาพ เมนู การเชื่อมโยง เป็นต้น ซึ่งการออกแบบเค้าโครงเว็บเพจอาจไม่มีรูปแบบเฉพาะ ผู้ออกแบบสามารถออกแบบและจัดวางองค์ประกอบได้ตามความเหมาะสม และเพ่ือให้เว็บเพจมี ความสมบรู ณ์ ส่วนใหญ่มักมกี ารกาหนดเค้าโครงเวบ็ เพจ โดยแบ่งออกเป็น 4 ส่วน ดงั ภาพที่ 2.6 Width: 1200 px. Page Header Page Body Page Sidebar Page Footer ภาพท่ี 2.6 การออกแบบเค้าโครงเว็บเพจ ทม่ี า: (ราชวิทย์ ทพิ ย์เสนา, 2560)

CHAPTER 2: WEB DESIGN 29 1. ส่วนหัวของเว็บเพจ ส่วนหัวของเว็บเพจ (Page Header) เป็นส่วนประกอบที่อยู่ในตาแหน่งด้านบนของหน้า เว็บเพจ ซึง่ เป็นสว่ นประกอบสาคัญท่ีจะสื่อถงึ อัตลักษณ์ (Identity) ของเวบ็ ไซต์ได้มากท่สี ุด เนื่องจาก เมื่อเข้าสู่เว็บไซต์ ผู้เข้าชมเว็บไซต์จะมองเห็นส่วนหัวของเว็บเพจเป็นอันดับแรก การออกแบบและจัด วางองค์ประกอบต่าง ๆ ให้เหมาะสม จึงเป็นสิ่งสาคัญในการออกแบบส่วนหัวของเว็บเพจ โดย องคป์ ระกอบทีส่ าคญั มดี ังน้ี 1.1 ตราสญั ลักษณ์ ตราสัญลักษณ์ (Logo) หรือโลโก้ คือ ภาพสัญลักษณ์หรือเครื่องหมายการค้า ที่ ออกแบบเฉพาะเพ่ือใช้แทนชื่อองค์กรหรือหน่วยงานผู้เป็นเจ้าของเว็บไซต์ นิยมออกแบบด้วยความ เรียบง่าย สะดุดตา เพ่ือให้ผู้เข้าชมเว็บไซต์จดจาได้มากท่ีสุด สามารถบ่งบอกถึงความเป็นอัตลกั ษณ์ได้ อย่างชัดเจน ซึ่งโดยส่วนใหญ่ มักนิยมจัดวางตราสัญลักษณ์ไว้ในตาแหน่งด้านซ้ายของส่วนหัวเว็บเพจ และสร้างเป็นลิงก์เพือ่ เชอ่ื มโยงไปยงั หนา้ แรกของเวบ็ ไซต์ ดังภาพท่ี 2.7 Logo ภาพท่ี 2.7 การออกแบบตราสัญลักษณ์ ท่ีมา: (ราชวิทย์ ทพิ ยเ์ สนา, 2560) 1.2 ชอ่ื เวบ็ ไซต์ ชื่อเว็บไซต์ (Website Title) คือ ข้อความที่ใช้แสดงเพื่อทาให้ทราบถึงช่อื องค์กร หรือ ชื่อหน่วยงาน ซ่ึงนอกจากแสดงชื่อองค์กร อาจแสดงคาโปรยท่ีใช้อธิบายข้อมูลเกี่ยวกับเว็บไซต์ นิยม จัดวางในตาแหน่งท่ีใกล้เคียงกับตราสัญลักษณ์ เพ่ือแสดงให้ผู้เข้าชมเว็บไซต์สามารถมองเห็นได้อย่าง ชัดเจน สามารถจัดวางในตาแหน่งด้านซ้ายหรือด้านขวาของส่วนหัวเว็บเพจตามท่ีผู้ออกแบบได้ ออกแบบไว้ ท้ังนี้ ควรใช้แบบอกั ษรและสีอกั ษรที่มคี วามโดดเด่น อา่ นงา่ ย สะดดุ ตา ดงั ภาพท่ี 2.8 Web Title ภาพที่ 2.8 การออกแบบชอื่ เว็บไซต์ ท่ีมา: (ราชวิทย์ ทพิ ย์เสนา, 2560)

30 CHAPTER 2: WEB DESIGN 1.3 ระบบนาทาง ระบบนาทาง (Navigation) คือ ข้อความหรือปุ่มท่ีสามารถเช่ือมโยงไปยังเว็บเพจอ่ืน ภายในเว็บไซต์ ประกอบด้วย แถบนาทางหลัก (Main Navigation) หรือเมนูหลัก นิยมจัดวางใน ตาแหน่งถัดลงมาจากตราสัญลักษณ์หรือช่ือเว็บไซต์ เพื่อให้ผู้เข้าชมเว็บไซต์มองเห็นได้ง่าย หากมีเว็บ เพจจานวนมาก ควรมีการจัดหมวดหมู่ของเว็บเพจ เพ่ือสร้างแถบนาทางหลักในลักษณะเมนูเลื่อนลง (Drop Down Menu) และแถบนาทางระบตุ าแหนง่ ปจั จบุ นั (Breadcrumb Navigation) โดยจะระบุ ตาแหน่งเว็บเพจปัจจบุ ันท่ีกาลงั เปิดอยู่ แสดงให้ผู้ใชท้ ราบวา่ กาลงั อยู่ในตาแหนง่ ใดของเวบ็ ไซต์ เพื่อให้ สามารถย้อนกลับไปยังเว็บเพจก่อนหน้านี้หรือจุดเริ่มต้นได้ง่าย ซ่ึงการออกแบบระบบนาทางควร ออกแบบใหม้ ปี ฏิสมั พนั ธก์ ับผู้ใช้มากทส่ี ดุ (Interactive) ดงั ภาพที่ 2.9 Main Navigation Breadcrumb Navigation ภาพที่ 2.9 การออกแบบระบบนาทาง ท่ีมา: (ราชวทิ ย์ ทพิ ยเ์ สนา, 2560) 1.4 ช่องสบื ค้นขอ้ มลู ช่องสืบค้นข้อมูล (Search Box) คือ ช่องสาหรับป้อนข้อความเพื่อสืบค้นข้อมูลท่ี ต้องการภายในเว็บไซต์ ในกรณีที่เว็บไซต์มีเน้ือหาและเว็บเพจจานวนมาก อาจทาให้ผู้เข้าชมค้นหา ข้อมูลท่ีต้องการไม่พบ ในการออกแบบเว็บไชต์จึงควรเพ่ิมช่องสาหรับสืบค้นข้อมูล ซ่ึงโดยท่ัวไปจะจัด วางไว้ในตาแหน่งบนสุดของหน้าเว็บเพจ ตาแหน่ง Sidebar หรือตาแหน่งท่ีสามารถใช้งานช่องสืบคน้ ได้สะดวก ดงั ภาพที่ 2.10 Search Box ภาพที่ 2.10 การออกแบบช่องสบื ค้นขอ้ มลู ที่มา: (ราชวิทย์ ทิพย์เสนา, 2560) หากผู้ออกแบบเว็บไซต์ไม่มีทักษะการเขียนโปรแกรมเพื่อการสืบค้นข้อมูล สามารถใช้บริการ เคร่ืองมือสืบค้นของ Google Custom Search ซึ่งเป็นเคร่ืองมือสาหรับนามาติดตั้งในเว็บไซต์ เพื่อ