ศัพทเ์ บอื้ งตน้ เกี่ยวกบั เวบ็ ไซต์ อนิ เตอร์เน็ต (Internet) เปน็ เครือข่ายคอมพวิ เตอร์ทใ่ี หญท่ ่ีสุดในโลกซ่งึ รวมเอาเครือขา่ ยย่อยเป็น จำนวนมากตอ่ เช่ือมภายใตม้ าตรฐานเดยี วกันจนเป็น เครอื ขา่ ยคอมพวิ เตอร์ขนาดใหญ่ ทำใหท้ ่ัวโลกเชื่อมโยง กนั เปน็ เครือขา่ ยเดยี วกันไดใ้ นแพลตฟอร์มของ เวลิ ด์ ไวด์ เว็บ (World Wide Web) เวิล์ด ไวด์ เว็บ (World Wide Web – www) หรือเรียกยอ่ ๆ ว่า เว็บ(web) เป็นอินเตอร์เน็ต ชนิดหนึ่ง ที่อยู่ในรูปแบบของกราฟิกและมัลติมีเดีย ซึ่งประกอบด้วย ข้อความ( Text ภาพ (Graphic) เสีย (Sound) และภาพเคลื่อนไหว (Movie) เป็นตน้ ผใู้ ชท้ ่วั ไปสามารถเขา้ ไปในเวบ็ ไดง้ า่ ย และจะ ได้รบั ข้อมลู ครบถ้วนปัจจุบนั ถ้าพดู ถงึ อนิ เตอรเ์ น็ต คนทวั่ ไปจะเข้าใจวา่ หมายถงึ เวบ็ ทั้งท่จี รงิ แล้วเว็บเป็นส่วน หนง่ึ ของอนิ เตอร์เนต็ เทา่ น้นั http (HyperText Transfer Protocol: HTTP) เ ป ็ น โ ป ร โ ต ค อ ล ส ำ ห ร ั บ เ ป ิ ด ด ู ข ้ อ มู ล จาก www เรยี กใชง้ านไดโ้ ดยระบุ http:// และตามดว้ ย URL ในช่องกรอก Address ด้านบนของโปรแกรม เวบ็ บราวเซอร์ URL (Uniform Resource Locator) คือ ข้อความทีบ่ อกตำแหน่งของข้อมูลใน Internet ไม่วา่ จะเปน็ Web page, File ประเภทต่างๆ เช่น รปู ภาพ เสียง URL ประกอบด้วย โปรโตคอล + domain name + (directory ที่เกบ็ ไฟล)์ ชื่อไฟล์ เช่น http://www.enjoyday.net/webtutorial/css/index.html http://www.enjoyday.net/images/logo.jpg โดเมนเนม (Domain Name) หรอื ทเ่ี ข้าใจกันท่ัวไป คอื ชื่อเรยี กเวบ็ ไซต์นั่นเอง การจดทะเบียนโดเมน เนมจึงเปน็ การลงทะเบียนชอ่ื ให้กับเว็บไซตข์ องเราในโลกอนิ เตอร์เนต็ โดเมนเนมทข่ี อจดทะเบยี นจะต้องไม่ซ้ำ กบั คนอืน่ และควรต้ังใหเ้ กีย่ วขอ้ งกับเนื้อหาภายในเว็บไซต์ หรอื เกี่ยวขอ้ งกับสนิ ค้าและ บริการ ตลอดจนใช้ คำง่าย ๆ ให้จำได้ เชน่ sanook.com และ yahoo.com เปน็ ต้น ความหมายของซบั โดเมน
เวบ็ ไซต์ (Website) และเวบ็ เพจ (Webpage)
เอกสารหรือส่วนท่ีติดต่อกับผู้ใช้ในเวบ็ เรยี กวา่ เว็บเพจ (Webpage) หมายถึง เอกสารหน่ึงหน้า การ ใชเ้ วบ็ ก็คือการเปิดอ่านหรอื เปิดใช้เวบ็ แตล่ ะหน้าน่นั เอง เวบ็ เพจอาจสร้างขน้ึ ดว้ ย ภาษาคอมพิวเตอร์ เชน่ HTML, ASP, PHP, JAVA ฯลฯ เม่อื นำเว็บเพจหลาย ๆ หนา้ มารวมกนั และระบุอย่ใู นอนิ เตอรเ์ นต็ หรือยอู ารแ์ อล (Uniform Resource Locator – URL) ให้กับเวบ็ เพจกลุ่มนั้นจะเรียกว่า เว็บไซต์ (Web Site) เมื่อเปิดเว็บไซต์ขึน้ มาจะพบกับหน้าแรกของเว็บไซต์ ซึ่งเรียกว่าโฮมเพจ (Homepage) ซึ่งเปน็ หนา้ ท่ีสำคญั ทส่ี ดุ และเปน็ หนา้ ทจี่ ะเชือ่ มโยงไปยังเวบ็ เพจและเว็บไซต์อืน่ ๆ สรปุ เวบ็ เพจ เวบ็ ไซต์ และโฮมเพจ เว็บเบราเซอร์ (Web Browser) คือโปรแกรมท่ใี ช้สำหรบั เปดิ เวบ็ เพจหรือ รบั ส่งขอ้ มูลตามทเ่ี คร่ือง ลูกข่ายร้องขอเมื่อเราเปิดเข้าสู่อินเตอร์เน็ต เว็บเบราเซอร์ที่ได้รับความนิยมปัจจุบันมีหลาย โปรแกรม เชน่ Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome
เวบ็ เซิฟเวอร์ (Web server) คือ เครื่องคอมพิวเตอร์ทที่ ำหน้าทีใ่ ห้บรกิ ารข้อมูลใน www ซ่ึงเก็บ Web page และโปรแกรมจัดการบริการ เมอ่ื ผใู้ ชต้ ้องการดู Web page ท่อี ยู่ในเครอ่ื ง Server ก็จะใช้ Web browser เรยี กขอข้อมูลโดย ระบุทีอ่ ยู่ของขอ้ มูลในลกั ษณะทีเ่ รยี กวา่ URL อัพโหลด (Upload) คือ การส่งข้อมูลจากเครื่องของเราไปยัง Web Server เมื่อเราสร้าง Web page แตล่ ะหน้าแลว้ ต้องสง่ ขอ้ มลู ไปเกบ็ ไวท้ ี่ Web Server ท่เี ปน็ เครือ่ งคอมพิวเตอร์ทีใ่ หบ้ ริการข้อมลู www โดยอาศยั โปรแกรม FTP. Search engine เป็นเคร่อื งมือหรือโปรแกรมในการค้นหาเว็บต่างๆ โดยมีการเกบ็ รายช่ือเว็บไซต์ และขอ้ มลู ทเี่ ก่ยี วขอ้ งต่างๆ ของเว็บไซต์ และนำมาจดั เกบ็ ไวใ้ น server เพอ่ื ให้สามารถค้นหาและแสดงผลได้ สะดวกรวดเร็ว เช่น google.com, yahoo.com, bing.com, altavista.com, sanook.com เปน็ ตน้ ภาษามาตรฐานทใ่ี ชใ้ นการสร้างเวบ็ เพจ ภาษา HTML ภาษา HTML ย่อมาจากคำวา่ Hypertext Markup Language เป็นภาษาทใี่ ช้สำหรับสร้างเว็บ เพจ โดยจะไดร้ ับการแปลหรอื การแสดงผลโดยเวบ็ เบราเซอรซ์ ่ึงสามารถแสดงไดท้ ั้งขอ้ ความ ภาพ และเสียง โครงสรา้ งหลกั ของภาษา HTML
ในไฟลเ์ อกสาร HTML ประกอบดว้ ย สองสว่ นใหญ่ๆ คือ ส่วนหวั HEAD และ สว่ นตัว BODY 1) Tag <HTML> และ </HTML> จะอยู่บรรทัดแรก และ บรรทัดสุดท้าย ในไฟล์ HTML เสมอ เปน็ Tag ทีบ่ อกใหร้ ้วู า่ ข้อความ หรอื Tag ทีอ่ ยู่ระหว่าง 2 Tag นี้ เป็นแบบ HTML 2 ) Tag <HEAD> แ ล ะ </HEAD> ส ่ ว น น ี ้ จ ะ ไ ว ้ ใ ส ่ ร า ย ล ะ เ อ ี ย ด ต ่ า ง ๆ เชน่ Tag<TITLE>TodayLoad.com</TITLE> ไว้ใส่ข้อความที่ต้องการให้ปรากฎอยู่บน ไตเติล้ บาร์ เปน็ ตน้ 3) <BODY ....... > ขอ้ ความทีป่ รากฎอยตู่ รงช่วงจุดไข่ปลา 4) Tag <BODY> และ </BODY> ขอ้ ความ หรอื Tag ท่อี ยู่ระหวา่ ง 2 Tag น้ี เปน็ สว่ นของเนือ้ หา หลกั การออกแบบเว็บไซต์ หลักการออกแบบเวบ็ ไซต์สามารถแบง่ ออกเปน็ ข้ันตอนต่าง ๆ เพื่อใหเ้ หมาะสมกับผู้เร่ิมต้นใช้เปน็ แนวทาง ในการสร้างและพัฒนาเวบ็ ไซต์ - การวางแผน การวางแผนนบั ว่ามคี วามสำคญั มากในการสร้างเว็บไซต์ เพ่อื ใหก้ ารทำงานในขั้นตอนต่าง ๆ มีแนวทางที่ชัดเจน และสามารถปฏบิ ตั ิได้ตามที่ตงั้ เปา้ ไว้ ซ่ึงประกอบด้วย - การกำหนดเน้อื หาและจุดประสงคข์ องเวบ็ ไซต์ การกำหนดเน้ือหาและจุดประสงคข์ องเว็บไซตท์ ่ีจะสรา้ ง นับเปน็ สง่ิ สำคัญอยา่ งมากในการเรมิ่ ต้นสร้างเว็บไซต์ เลยทีเดียว เพ่ือใหเ้ หน็ ภาพว่าเราต้องการน าเสนอข้อมลู แบบใด เช่น เวบ็ ไซต์เพื่อใหข้ อ้ มูลข่าวสาร การบริการ ด้านตา่ ง ๆ หรือขายสินค้า เป็นตน้ เม่อื สามารถกำหนดจุดประสงคข์ องเว็บไซตไ์ ด้แลว้ เง่ือนไขเหล่านี้จะเป็น ตวั กำหนดโครง สรา้ งรปู แบบรวมถึงหนา้ ตา และสีเว็บไซตข์ องเราด้วย - การกำหนดกลมุ่ เป้าหมาย เพือ่ ให้การสรา้ งและออกแบบเว็บไวต์ไดร้ ับความนิยม การกำหนดกล่มุ เปา้ หมายในการเข้าชมเว็บไซต์ก็นับว่ามี ส่วนสำคัญไม่น้อย เช่น เว็บไซต์สำหรับเยาวชน นักเรียน นักศึกษาในการค้นหาข้อมูล หรือเว็บไซต์สำหรบั บคุ คลทัว่ ไปท่ีเข้าไปใชบ้ รกิ ารตา่ ง ๆ เปน็ ตน้ - การเตรียมขอ้ มลู เนื้อหาหรือขอ้ มูลจดั วา่ เปน็ สิ่งที่เชิญชวนให้ผูอ้ ื่นเข้ามาเยี่ยมชมเว็บไซต์ และต้องทราบว่าข้อมลู ข่าวสารต่าง ๆ สามารถนำมาจากแหล่งใดบ้าง เชน่ การคดิ นำเสนอข้อมูลดว้ ยตวั เอง หรือนำข้อมลู ท่นี า่ สนใจมาจากส่ืออ่ืน เช่น หนังสอื พมิ พ์ แมกกาซีน เว็บไซต์ และที่สำคญั ขออนุญาตเจ้าของบทความก่อนเพอ่ื ป้องกันเร่ื องลิขสิทธิ์ ด้วย - การเตรียมส่ิงต่าง ๆ ที่จำเปน็ ในการออกแบบเว็บไซต์ต้องอาศัยความสามารถต่าง ๆ เช่น โปรแกรมสำหรับสร้าง เว็บไซต์ ภาพเคลื่อนไหว มลั ตมิ ีเดีย การจดโดเมนเนม การหาผูใ้ ห้บริการรับฝากเวบ็ ไซต์ (Web Hosting) เปน็ ต้น - การจัดโครงสร้างข้อมลู
เมื่อได้ข้อมูลตา่ ง ๆ เช่น กำหนดเนื้อหาและจุดประสงค์ของเว็บไซต์ การกำหนดกลุ่มเป้าหมาย การเตรียม ขอ้ มูล การเตรยี มสงิ่ ต่าง ๆ ท่จี ำเป็นจากขั้นแรกเรียบร้อยแล้ว ในขัน้ ตอนนี้ เราจะจดั ระบบเพ่ือใช้เป็นกรอบ สำหรบั การออกแบบและดำเนนิ การในขัน้ ตอนต่อไป ซง่ึ มีรายละเอยี ด ดังน้ี • โครงสร้างและสารบญั ของเวบ็ ไซต์ • การใช้ระบบนำผู้เข้าชมไปยังส่วนต่าง ๆ ภายในเว็บไซต์หรือที่เราเรียกว่าระบบนำ ทาง (Navigation) • องค์ประกอบทตี่ อ้ งนำมาใช้ เชน่ สอื่ มลั ติมเี ดีย ภาพกราฟิก แบบฟอรม์ ตา่ ง ๆ • การกำหนดรปู แบบและลักษณะของเว็บเพจ • การกำหนดฐานข้อมลู ภาษาสคริปตห์ รอื แอปพลิเคชนั ทนี่ ำมาใชใ้ นเวบ็ ไซต์ • การบรกิ ารเสรมิ ตา่ ง ๆ • การออกแบบเว็บไซต์ นับเป็นขั้นตอนในการออกแบบรูปร่าง โครงสร้างและลักษณะทางด้านกราฟิกของหน้าเว็บเพจ โดย โปรแกรมทีเ่ หมาะสมในการออกแบบคอื Photoshop หรือ Fireworks ซึ่งจะช่วยในการสร้างเค้าโครง ของหน้าเวบ็ และองค์ประกอบต่าง ๆ เชน่ ชอ่ื เว็บไซต์ โลโก้ รปู ไอคอน ปุ่มไอคอน ภาพเคลอื่ นไหว แบนเนอร์ โฆษณา เป็นตน้ ในการออกแบบเว็บไซต์นั้นยังต้องคำนึงถึงสีสันและรูปแบบของส่วนประกอบต่าง ๆ ที่ไม่ใช่ ภาพกราฟิก เช่น ขนาดของตัวอักษร สีของข้อความ สีพื้น ลวดลายของเส้นกรอบเพื่อความสวยงามและ ดงึ ดูด ผู้เย่ียมชมดว้ ย รปู แบบของเวบ็ ไซต์ 1. Static Website หมายถงึ เวบ็ ไซต์ท่ีสรา้ งดว้ ยภาษา HTML ธรรมดา และบันทึกเปน็ ไฟล์นามสกุล .html .เน้ือหา ข้อความ รปู ภาพในหนา้ เวบ็ เพจน้นั จะเป็นไปตามทเ่ี ราเขียนกำหนดไว้ Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่ม าก .ไม่มีการ เปลี่ยนแปลงข้อมูลบ่อยๆ และไม่มีการตดิ ตอ่ ฐานขอ้ มูล.. 2. Dynamic Website หมายถงึ เว็บไซตท์ หี่ น้าเวบ็ เพจสามารถเปลีย่ นแปลงขอ้ มลู เองได้ โดยไม่ตอ้ งเขยี นแต่ละหน้าเว็บเพจ เอง เชน่ กระดานขา่ ว (WebBoard), ระบบสบื คน้ ข้อมลู เวบ็ ไซต์รปู แบบนีจ้ ะถูกสร้างดว้ ยภาษา Script แบบ Server Side Script .เชน่ PHP, ASP, ASP.Net, JSP และอื่นๆ ไฟล์เอกสารท่ีได้จะมีนามสกลุ .php, .asp เป็นต้น และมักจะมกี ารติดตอ่ กบั ฐานขอ้ มูลเพ่ือ บันทกึ ข้อมลู ลงในฐานขอ้ มลู หรือนำข้อมูลจากฐานขอ้ มลู ข้นึ มาแสดงผลเป็นหนา้ เวบ็ เพจ
สว่ นประกอบของหนา้ เวบ็ เพจ เราสามารถจำแนกส่วนประกอบของหน้าเว็บเพจ เปน็ 3 สว่ น ดงั น้ี 1. ส่วนหัว (Page Header) จะอยู่บริเวณบนสุดของหน้าเว็บเพจ เป็นส่วนที่แสดงช่ือ เว็บไซต์ โล โก้ แบนเนอร์ โฆษณาลิงกส์ ำหรบั ขา้ มไปยังหนา้ เวบ็ อ่ืน 2. ส่วนเนอื้ หา (Page Body) อย่บู รเิ วณตอนกลางของหน้าเวบ็ เพจ ซึ่งเป็นสว่ นทแ่ี สดงเน้ือหาภายใน หนา้ เวบ็ เพจนั้น โดยประกอบดว้ ยขอ้ ความ ข้อมลู ภาพเคลอ่ื นไหว เปน็ ต้น
3. สว่ นท้าย (Page Footer) อยู่บรเิ วณดา้ นลา่ งสดุ ของหนา้ เว็บเพจ สว่ นมากใชส้ ำหรับลงิ ก์ข้อความ สน้ั ๆ เขา้ ใจงา่ ย หรอื จะมชี ่อื เจ้าของเว็บไซต์ อีเมลแอดเดรสของผูด้ ูแลเวบ็ ไซต์สำหรับติดต่อกับทางเวบ็ ไซต์ สรุปสว่ นประกอบของหน้าเวบ็ เพจ การออกแบบเวบ็ ไซต์ แนวคิดในการออกแบบ
- ดูจากเว็บไซต์อื่นเพื่อเป็นตัวอย่าง การดูจากเว็บไซต์อื่นบนอินเตอร์เน็ตเพือ่ ศึกษาเป็นตัวอย่าง นน้ั นับเปน็ วธิ กี ารท่งี า่ ยทสี่ ุด แต่ก็ควรนำไปประยุกต์ใช้ใหเ้ หมาะสมกับเน้ือหาและกลุ่มเปา้ หมายของเราด้วย - ศึกษาจากสื่อสิง่ พิมพ์ในรูปแบบต่างๆ สื่อสิ่งพิมพ์ในที่นี้ ได้แก่ แมกกาซีน โปสเตอร์โฆษณา โบร ชัวร์ หรือหนงั สอื บางเลม่ ท่ีมีรูปแบบและจดุ ดึงดูดความสนใจ สามารถนำมาประยกุ ต์ใชใ้ นเว็บไซต์ของเราได้ เช่นกนั การกำหนดขนาดของเว็บเพจ ขนาดของเว็บไซต์ทนี่ ยิ มในปัจจบุ ันมี 2 ขนาด คอื 1. ขนาดเวบ็ ไซต์แบบ 800 X 600 pixels เปน็ ขนาดที่สามารถใช้ได้กบั หน้าจอทุกขนาดในปัจจุบัน เป็นขนาดของการออกแบบเวบ็ ไซตท์ ใี่ ช้ในอดีต เน่อื งจากอดีตขนาดของจอคอมพิวเตอรม์ ีขนาดเลก็ 2. ขนาดเว็บไซต์แบบ 1024 X 768 pixels เป็นขนาดที่นิยมในปัจจุบัน เนื่องจากผู้ใช้นิยมใช้ จอคอมพิวเตอร์ขนาดใหญข่ ้นึ เน่ืองมาจากราคาจอคอมพวิ เตอร์ท่ถี กู ลง รปู แบบการออกแบบเวบ็ ไซต์ เวบ็ ไซต์ในปัจจุบันจะมีการออกแบบทแี่ ตกตา่ งกันไม่มากนัก ซ่ึงการออกแบบหนา้ ตาเว็บไซตส์ ว่ นใหญ่ จะมองดูองค์ประกอบขององค์กร หน่วยงาน หรือเน้ือหาเร่ืองที่นำเสนอเป็นหลัก ซ่ึงการออกแบบหน้าตของ เวบ็ ไซตม์ อี ยู่ 3 แบบ คือ 1. การออกแบบเว็บไซตท์ ี่เน้นการนำเสนอเนอ้ื หา เป็นการออกแบบเว็บไซต์ท่เี น้นการนำเสนอเน้ือหามากกว่ารูปภาพ โดยโครงสร้างใชร้ ูปแบบตาราง เป็นหลกั มีการออกแบบหนา้ ตารูปแบบงา่ ย เช่น มีเมนูสารบัญ และเนอื้ หา 2. การออกแบบเวบ็ ไซตท์ ่ีเนน้ ภาพกราฟิก เป็นการออกแบบเว็บไซต์ท่ีเน้นภาพกราฟิกท่ีสวยงาม ซึง่ อาจจะใชโ้ ปรแกรม Photoshop สำหรับ การตกแต่งภาพ ขอ้ ดี สวยงาม น่าสนใจ ขอ้ เสีย อาจจะใช้เวลาในการโหลดเว็บนาน 3.การออกแบบเวบ็ ไซต์ทีม่ ที ัง้ ภาพและเนือ้ หา เปน็ การออกแบบเวบ็ ที่นยิ มในปัจจุบันซงึ่ ประกอบด้วยข้อความ รปู ภาพ โดยมกี ารจัดองค์ประกอบ ตา่ ง ๆ เพ่อื ใหเ้ วบ็ น่าสนใจ การออกแบบโครงสร้างเว็บไซต์ การออกแบบโครงสร้างเวบ็ ไซต์ คือ การวางแผนการจัดลำดับ เนื้อหาสาระของเวบ็ ไซต์ ออกเป็น หมวดหมู่ เพื่อจัดทำเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบเสมือนแผนที่ ที่ทำให้เห็น โครงสร้างทั้งหมดของเว็บไซต์ ช่วยในนักออกแบบเว็บไซต์ไม่ให้หลงทาง การจัดโครงสร้างของ เว็บไซต์ มี จดุ มุง่ หมายสำคญั คือ การท่จี ะทำให้ผู้เข้าเย่ียมชม สามารถคน้ หาขอ้ มูลในเว็บเพจได้อย่างเป็นระบบ ซึ่งถือว่า เป็นขั้นตอนที่สำคัญ ที่สามารถสร้างความสำเร็จให้กับผู้ที่ทำหน้าที่ในการออกแบบและพัฒนาเว็บไซต์ (Webmaster) การออกแบบโครงสรา้ งหรือจัดระเบียบของขอ้ มลู ท่ชี ดั เจน แยกย่อยเนอ้ื หาออกเปน็ สว่ นตา่ ง ๆ ทส่ี ัมพนั ธ์กนั และให้อยใู่ นมาตรฐานเดยี วกนั จะชว่ ยใหน้ ่าใช้งานและง่าย ต่อการเข้าอา่ นเนือ้ หาของผ้ใู ชเ้ วบ็ ไซต์ หลักในการออกแบบโครงสร้างเว็บไซต์ ควรพจิ ารณาดงั น้ี
1. กำหนดวัตถปุ ระสงค์ โดยพิจารณาว่าเปา้ หมายของการสร้างเว็บไซตน์ ้ที ำเพ่อื อะไร 2. ศึกษาคุณลกั ษณะของผ้ทู เี่ ข้ามาใช้ว่ากลุ่มเป้าหมายใดท่ีผู้สร้างต้องการส่ือสาร ข้อมูลอะไรที่พวก เขาต้องการโดยขัน้ ตอนนคี้ วรปฏิบตั ิควบคูไ่ ปกบั ขั้นตอนทหี่ นึ่ง 3. วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ต้องมีการจัด โครงสรา้ งหรอื จดั ระเบยี บขอ้ มูลท่ชี ดั เจน การที่เนื้อหามี ความตอ่ เนือ่ งไปไมส่ ิน้ สุดหรือกระจายมากเกินไป อาจ ทำให้เกิดความสับสนต่อผ้ใู ช้ได้ ฉะน้นั จึงควรออกแบบให้มลี ักษณะทชี่ ัดเจนแยกย่อยออกเป็นส่วนต่าง ๆ จัด หมวดหมใู่ นเร่อื งท่ีสมั พนั ธก์ ัน รวมทง้ั อาจมีการแสดงใหผ้ ใู้ ช้เห็นแผนทโ่ี ครงสรา้ งเพ่อื ป้องกนั ความสับสนได้ 4. กำหนดรายละเอียดให้กบั โครงสรา้ ง ซึง่ พิจารณาจากวัตถุประสงค์ทีต่ ั้งไว้ โดยต้ังเกณฑ์ในการใช้ เช่น ผู้ใชค้ วรทำอะไรบ้าง จำนวนหนา้ ควรมีเท่าใด มีการเชื่อมโยง มากนอ้ ยเพยี งใด 5. หลังจากนั้น จงึ ทำการสรา้ งเว็บไซตแ์ ล้วนำไปทดลองเพื่อหาข้อผิดพลาดและทำการแกไ้ ขปรับปรุง แล้วจงึ นำเข้าสเู่ ครอื ข่ายอนิ เทอรเ์ น็ตเปน็ ขั้นสดุ ทา้ ย องคป์ ระกอบที่ดีของการออกแบบเว็บไซต์ 1. โครงสร้างท่ีชัดเจน ผอู้ อกแบบเว็บไซต์ควรจดั โครงสร้างหรอื จัดระเบียบของข้อมูลทช่ี ัดเจน แยก ย่อยเน้ือหาออกเป็นส่วนต่าง ๆ ทส่ี มั พันธก์ ันและใหอ้ ยู่ในมาตรฐานเดียวกัน จะชว่ ยให้นา่ ใชง้ านและง่าย ต่อ การอา่ นเน้อื หาของผู้ใช้ 2. การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยใหผ้ ูใ้ ช้รู้สกึ สบายใ จตอ่ การอ่านและ สามารถทำความเข้าใจกับเน้ือหาไดอ้ ย่างเตม็ ท่ี โดยไม่ตอ้ งมาเสียเวลาอยู่กบั การทำความเข้าใจ การใช้งานที่ สบั สนดว้ ยเหตุน้ีผูอ้ อกแบบจึงควรกำหนดปมุ่ การใช้งานท่ชี ดั เจน เหมาะสม โดยเฉพาะปมุ่ ควบคุมเส้นทางการ เข้าสู่เนื้อหา (Navigation) ไม่ว่าจะเป็นเดินหน้า ถอยหลัง หากเป็นเว็บไซต์ท่ีมีเว็บเพจจำนวนมาก ควรจะ จดั ทำแผนผงั ของเว็บไซต์ (Site Map) ทช่ี ว่ ยใหผ้ ใู้ ช้ทราบว่า ตอนนอ้ี ยู่ ณ จดุ ใด หรือเครื่องมือสบื ค้น (Search Engine) ท่ีชว่ ยในการคน้ หาหนา้ ท่ีท่ตี ้องการ 3. การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชือ่ มโยง ควรอยู่ในรูปแบบที่เปน็ มาตรฐาน ทั่วไปและตอ้ งระวังเรื่องของตำแหน่งในการเชื่อมโยง การที่จำนวนการเช่ือมโยงมากและกระจัดกระจายอยู่ ทั่วไปในหนา้ อาจกอ่ ให้เกิดความสบั สน นอกจากนีค้ ำทใี่ ชส้ ำหรับการเชือ่ มโยงจะต้องเขา้ ใจงา่ ยมีความชัดเจน และไม่สนั้ จนเกนิ ไป นอกจากน้ีในแต่ละเว็บเพจทสี่ ร้างข้ึนมาควรมี จุดเชอื่ มโยงกลบั มายงั หน้าแรกของเว็บไซต์ ท่ีกำลังใชง้ านอยู่ด้วย ท้งั นเ้ี ผอื่ ว่าผใู้ ชเ้ กิดหลงทาง และไมท่ ราบวา่ จะทำอยา่ งต่อไปดีจะได้มีหนทางกลับมาสู่ จุดเริ่มต้นใหม่ ระวังอย่าให้มหี น้าที่ไม่มีการเชือ่ มโยง (Orphan Page) เพราะจะทำให้ผู้ใช้ไม่รู้จะทำอย่างไร ต่อไป 4. ความเหมาะสมในหน้าจอ เนื้อหาที่นำเสนอในแต่ละหน้าจอควรสั้น กระชับ และทันสมัย หลีกเลี่ยงการใช้หน้าจอที่มีลักษณะการเลื่อนขึ้นลง (Scrolling) แต่ถ้าจำเป็นต้องมี ควรจะให้ข้อมูลที่มี ความสำคัญอยู่บริเวณด้านบนสุดของหน้าจอ หลีกเลี่ยงการใช้กราฟิกด้านบนของหน้าจอ เพราะถึงแม้จะดู สวยงาม แต่จะทำให้ผู้ใช้เสียเวลาในการได้รับข้อมูลที่ต้องการ แต่หากต้องมีการใช้ภาพประกอบก็ควรใช้ เฉพาะท่ีมคี วามสมั พนั ธก์ ับเนือ้ หาเทา่ นั้น นอกจากน้กี ารใช้รูปภาพเพื่อเป็นพ้ืนหลัง (Background) ไม่ควรเน้น
สสี นั ที่ฉดู ฉาดมากนัก เพราะอาจจะไปลดความเด่นชัดของเนอ้ื หาลง ควรใช้ภาพทีม่ ีสอี อ่ น ๆ ไมส่ ว่างจนเกินไป รวมไปถึงการใช้เทคนิคตา่ ง ๆ เช่น ภาพเคลื่อนไหว หรอื ตวั อักษรว่งิ (Marquees) ซง่ึ อาจจะเกิดการรบกวน การอ่านได้ ควรใช้เฉพาะทีจ่ ำเปน็ จริง ๆ เท่านัน้ ตัวอักษรที่นำมาแสดงบนจอภาพควรเลือกขนาดท่อี ่านง่าย ไม่ มสี ีสนั และลวดลายมากเกนิ ไป 5. ความรวดเรว็ ความรวดเรว็ เปน็ สิ่งสำคัญประการหนงึ่ ท่ีสง่ ผลต่อการเรยี นรู้ ผู้ใชจ้ ะเกิดอาการเบ่ือ หน่ายและหมดความสนใจกบั เว็บทใ่ี ชเ้ วลาในการแสดงผลนาน สาเหตุสำคญั ทจี่ ะทำให้การแสดงผลนานคือการ ใช้ภาพกราฟิกหรือภาพเคล่ือนไหว ซึ่งแม้ว่าจะช่วยดึงดูดความสนใจได้ดี ฉะนั้นในการออกแบบจึงควร หลกี เล่ยี งการใชภ้ าพขนาดใหญ่ หรือภาพเคลื่อนไหวที่ไม่จำเป็น และพยายามใชก้ ราฟิกแทนตัวอักษรธรรมดา ให้นอ้ ยท่ีสุด โดยไม่ควรใช้มากเกินกว่า 2 – 3 บรรทัดในแต่ละหน้าจอ โครงสร้างของเว็บไซต์ 1. เวบ็ ท่มี ีโครงสรา้ งแบบเรียงลำดบั (Sequential Structure) เปน็ โครงสร้างแบบธรรมดาท่ีใช้กนั มากท่ีสุดเนอื่ งจากงา่ ยต่อการจดั ระบบข้อมลู ขอ้ มูลทน่ี ิยม จดั ดว้ ย โครงสร้างแบบน้ีมักเป็นข้อมลู ทีม่ ลี ักษณะเป็นเร่ืองราวตามลำดับของเวลา เชน่ การเรยี งลำดับตามตัวอักษร ดรรชนี สารานกุ รม หรืออภิธานศพั ท์ โครงสร้างแบบน้ี เหมาะกบั เว็บไซตท์ มี่ ีขนาดเล็ก เนอ้ื หาไมซ่ บั ซอ้ นใช้การ ลิงก์ (Link) ไปทีละหน้า ทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องใน ลักษณะเส้นตรง โดยมี ปุ่มเดินหน้า-ถอยหลังเป็นเครื่องมือหลักในการกำหนดทิศทาง ข้อเสียของโครงสร้าง ระบบนค้ี อื ผู้ใช้ไมส่ ามารถกำหนดทศิ ทางการเขา้ สู่เนือ้ หาของตนเองได้ ทำใหเ้ สียเวลาเข้าสเู่ นอ้ื 2. เวบ็ ทม่ี โี ครงสรา้ งแบบลำดับขนั้ (Hierarchical Structure) เปน็ วิธที ่ดี ีทส่ี ดุ วิธีหน่ึงในการจัดระบบโครงสรา้ งที่มคี วามซับซอ้ นของขอ้ มลู โดยแบ่งเน้อื หา ออกเป็น ส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแตล่ ะสว่ นลดหล่นั กันมาในลักษณะแนวคิดเดียวกับ แผนภูมิองค์กร จึง เป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหาในเว็บลักษณะนี้ ลักษณะเด่นเฉพาะของ เว็บ ประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสูเ่ นื้อหา ใน ลกั ษณะเปน็ ลำดบั จากบนลงล่าง 3. เว็บทม่ี โี ครงสรา้ งแบบตาราง (Grid Structure)
โครงสรา้ งรูปแบบนี้มคี วามซับซ้อนมากกว่ารปู แบบทผี่ ่านมา การออกแบบเพ่มิ ความยืดหยุ่น ให้แก่ การเข้าสู่เนือ้ หาของผู้ใช้ โดยเพ่ิมการเช่ือมโยงซึ่งกันและกันระหว่างเน้ือหาแตล่ ะส่วน เหมาะแก่ การแสดงให้ เห็นความสัมพนั ธก์ ันของเนอ้ื หา การเข้าสู่เนอื้ หาของผ้ใู ชจ้ ะไมเ่ ป็นลักษณะเชงิ เส้นตรง เนอ่ื งจากผู้ใช้สามารถ เปลย่ี นทศิ ทางการเข้าสเู่ น้ือหาของตนเองได้ ในการจดั ระบบโครงสรา้ งแบบน้ี เนื้อหาท่นี ำมาใชแ้ ตล่ ะสว่ นควรมีลกั ษณะท่เี หมือนกนั และ สามารถ ใช้รูปแบบร่วมกัน หลักการออกแบบคือนำหัวข้อทั้งหมดมาบรรจุลงในที่เดียวกันซึ่งโดยทั่วไป จะเป็นหน้า แผนภาพ (Map Page) ที่แสดงในลกั ษณะเดยี วกบั โครงสรา้ งของเว็บ เมื่อผู้ใชค้ ลกิ เลอื ก หวั ข้อใด ก็จะเข้าไปสู่ หนา้ เน้ือหา (Topic Page) ทีแ่ สดงรายละเอยี ดของหัวข้อน้ันๆ และภายในหน้านั้น ก็จะมกี ารเชื่อมโยงไปยัง หนา้ รายละเอียดของหวั ขอ้ อ่นื ที่เปน็ เร่ืองเดยี วกัน นอกจากน้ียังสามารถนำ โครงสร้างแบบเรียงลำดับและแบบ ลำดบั ขนั้ มาใช้รว่ มกนั ไดอ้ ีกดว้ ย ถงึ แม้โครงสร้างแบบนี้ อาจจะสร้างความยุ่งยากในการเข้าใจได้ และอาจเกิด ปัญหาการคงค้าง ของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์ที่สุดเมื่อผู้ใช้ได้เข้าใจถึง ความสัมพันธ์ ระหวา่ งเน้ือหา ในส่วนของการออกแบบจำเปน็ จะตอ้ งมกี ารวางแผนท่ีดี เนอ่ื งจากมีการเชอ่ื มโยง ท่ีเกิดขน้ึ ได้หลายทศิ ทาง นอกจากน้ีการปรับปรุงแกไ้ ขอาจเกดิ ความยงุ่ ยากเมอ่ื ตอ้ งเพิ่มเนื้อหาในภายหลัง 4. เว็บท่มี โี ครงสร้างแบบใยแมงมุม (Web Structure) โครงสรา้ งประเภทนี้จะมีความยดื หยุ่นมากท่ีสุด ทกุ หนา้ ในเวบ็ สามารถจะเชือ่ มโยงไปถึงกัน ได้หมด เป็นการสรา้ งรูปแบบการเข้าสู่เนอ้ื หาทีเ่ ป็นอิสระ ผใู้ ช้สามารถกำหนดวิธีการเข้าสู่เน้ือหาได้ด้วย ตนเอง การ เชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีมโนทัศน์ (Concept) เหมือนกัน ของแต่ละหน้าใน ลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอรม์ ีเดยี โครงสรา้ งลักษณะนี้จดั เป็นรูปแบบท่ี ไม่มีโครงสร้างท่ีแน่นนอน ตายตัว (Unstructured) นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหา ภายในเว็บนั้นๆ แต่สามารถ เชื่อมโยงออกไปส่เู นอ้ื หาจากเวบ็ ภายนอกได้
ลักษณะการเช่อื มโยงในเวบ็ นั้น นอกเหนือจากการใชไ้ ฮเปอรเ์ ท็กซ์หรอื ไฮเปอร์มีเดยี กับขอ้ ความท่ีมี มโนทัศน์ (Concept) เหมือนกันของแตล่ ะหน้าแล้ว ยงั สามารถใชล้ กั ษณะการเชื่อมโยง จากรายการท่รี วบรวม ชื่อหรอื หวั ข้อของเนอ้ื หาแต่ละหน้าไว้ ซง่ึ รายการนี้จะปรากฏอย่บู ริเวณใด บริเวณหนง่ึ ในหนา้ จอ ผใู้ ชส้ ามารถ คลิกท่ีหัวข้อใดหัวข้อหน่งึ ในรายการเพื่อเลือกทจี่ ะเข้าไปสหู่ น้าใดๆ ก็ได้ตามความตอ้ งการ ข้อดีของรูปแบบน้ี คอื ง่ายต่อผใู้ ช้ในการท่องเทยี่ วบนเวบ็ โดยผู้ใช้สามารถกำหนดทศิ ทาง การเข้าสเู่ นือ้ หาได้ด้วยตนเอง แต่ข้อเสีย คือถา้ มกี ารเพม่ิ เนอื้ หาใหมๆ่ อย่เู สมอจะเปน็ การยากในการ ปรับปรงุ นอกจากนกี้ ารเช่อื มโยงระหวา่ งข้อมูลที่มี มากมายน้ันอาจทำให้ผใู้ ชเ้ กิดการสบั สนและ เกิดปัญหาการคงค้างของหวั ขอ้ (Cognitive Overhead) ได้ องคป์ ระกอบของการออกแบบเว็บไซต์ 1. ความเรียบงา่ ย (Simplicity) หมายถึง การจำกดั องค์ประกอบเสรมิ ให้เหลอื เฉพาะองคป์ ระกอบหลกั กล่าวคือในการส่อื สารเน้ือหา กับผู้ใชน้ ั้น เราต้องเลือกเสนอส่ิงที่เราตอ้ งการนำเสนอจริง ๆ ออกมาในส่วนของกราฟิก สีสัน ตัวอักษรและ ภาพเคลื่อนไหว ต้องเลือกใหพ้ อเหมาะ ถ้าหากมีมากเกนิ ไปจะรบกวนสายตาและสรา้ งความคำราญต่อผู้ใช้ ตัวอย่างเว็บไซต์ท่ีได้รับการออกแบบทีด่ ี ไดแ้ ก่ เว็บไซต์ของบริษัทใหญ่ ๆ อยา่ งเชน่ Apple Adobe Microsoft หรอื Kokia ท่มี ีการออกแบบเว็บไซตใ์ นรูปแบบทเี่ รยี บงา่ ย ไมซ่ บั ซ้อน และใช้งานอย่างสะดวก 2. ความสมำ่ เสมอ ( Consistency) หมายถงึ การสรา้ งความสม่ำเสมอใหเ้ กิดขึ้นตลอดท้งั เว็บไซต์ โดยอาจเลือกใช้รูปแบบเดียวกันตลอด ทั้งเวบ็ ไซตก์ ็ได้ เพราะถา้ หากว่าแต่ละหน้าในเว็บไซต์นั้นมีความแตกต่างกันมากจนเกินไป อาจทำให้ผู้ใช้เกิด ความสบั สนและไม่แน่ใจวา่ กำลังอยใู่ นเว็บไซต์เดมิ หรอื ไม่ เพราะฉะนัน้ การออกแบบเว็บไซตใ์ นแต่ละหน้าควรที่ จะมรี ปู แบบ สไตลข์ องกราฟิก ระบบเนวเิ กชัน่ (Navigation) และโทนสที ม่ี คี วามคล้ายคลงึ กนั ตลอดท้งั เว็บไซต์ 3. ความเปน็ เอกลักษณ์ (Identity) ในการออกแบบเว็บไซต์ต้องคำนึงถึงลักษณะขององค์กรเป็นหลัก เนื่องจากเว็บไซต์จะสะท้อนถงึ เอกลักษณ์และลักษณะขององค์กร การเลือกใช้ตัวอักษร ชุดสี รูปภาพหรือกราฟิก จะมีผลต่อรูปแบบของ เวบ็ ไซตเ์ ปน็ อยา่ งมาก ตัวอยา่ งเชน่ ถ้าเราต้องออกแบบเว็บไซต์ของธนาคารแตเ่ รากลับเลือกสีสันและกราฟิก มากมาย อาจทำใหผ้ ู้ใชค้ ดิ ว่าเป็นเวบ็ ไซต์ของสวนสนุกซึง่ สง่ ผลต่อความเชื่อถอื ขององค์กรได้ 4. เนอื้ หา (Useful Content) ถือเป็นสิ่งสำคัญที่สุดในเว็บไซต์ เนื้อหาในเว็บไซต์ต้องสมบูรณ์และได้รับการปรับปรุงพัฒนาให้ ทนั สมยั อยู่เสมอ ผพู้ ัฒนาตอ้ งเตรยี มข้อมลู และเน้ือหาที่ผ้ใู ช้ตอ้ งการใหถ้ ูกตอ้ งและสมบรู ณ์ เนื้อหาที่สำคัญท่ีสุด คือเนือ้ หาที่ทีมผ้พู ัฒนาสร้างสรรคข์ ้ึนมาเอง และไม่ไปซำ้ กับเว็บอื่น เพราะจะถอื เป็นส่ิงท่ีดึงดูดผู้ใช้ให้เข้ามา เว็บไซตไ์ ดเ้ สมอ แต่ถา้ เป็นเวบ็ ทีล่ ิงคข์ ้อมูลจากเวบ็ อ่ืน ๆ มาเมอื่ ใดกต็ ามที่ผู้ใชท้ ราบวา่ ขอ้ มูลนั้นมาจากเว็บใด ผู้ใชก้ ็ไม่จำเป็นต้องกลบั มาใชง้ านลงิ คเ์ หลา่ น้นั อีก 5. ระบบเนวเิ กชน่ั (User-Friendly Navigation) เป็นส่วนประกอบท่ีมีความสำคัญต่อเว็บไซต์มาก เพราะจะช่วยไม่ให้ผู้ใชเ้ กิดความสับสนระหว่างดู เว็บไซต์ ระบบเนวิเกชน่ั จึงเปรยี บเสมอื นปา้ ยบอกทาง ดังนน้ั การออกแบบเนวเิ กช่นั จึงควรใหเ้ ขา้ ใจง่าย ใชง้ าน
ไดส้ ะดวก ถ้ามีการใชก้ ราฟกิ ก็ควรสื่อความหมาย ตำแหนง่ ของการวางเนวิเกชน่ั ก็ควรวางใหส้ ม่ำเสมอ เช่น อยู่ ตำแหน่งบนสุดของทุกหน้าเป็นต้น ซึ่งถ้าจะให้ดีเมื่อมีเนวเิ กชั่นท่ีเป็นกราฟิกกค็ วรเพิม่ ระบบเนวิเกชัน่ ท่ีเป็น ตวั อักษรไว้สว่ นล่างด้วย เพื่อชว่ ยอำนวยความสะดวกใหก้ ับผใู้ ช้ที่ยกเลิกการแสดงผลภาพกราฟิกบนเว็บเบรา เซอร์ 6. คณุ ภาพของสิง่ ท่ีปรากฏใหเ้ ห็นในเว็บไซต์ (Visual Appeal) ลักษณะที่น่าสนใจของเว็บไซต์นั้น ขึ้นอยู่กับความชอบส่วนบุคคลเป็นสำคัญ แต่โดยรวมแล้วก็ สามารถสรุปไดว้ ่าเว็บไซต์ที่นา่ สนใจน้ันส่วนประกอบต่างๆ ควรมีคุณภาพ เช่น กราฟิกควรสมบรู ณ์ไม่มรี อย หรอื ขอบข้ันบนั ไดใ้ หเ้ ห็น ชนดิ ตวั อกั ษรอา่ นงา่ ยสบายตา มกี ารเลือกใช้โทนสีที่เขา้ กนั อย่างสวยงาม เปน็ ตน้ 7. ความสะดวกของการใช้ในสภาพต่างๆ (Compatibility) การใช้งานของเว็บไซต์น้ันไม่ควรมีขอบจำกัด กล่าวคอื ต้องสามารถใช้งานได้ดีในสภาพแวดล้อมที่ หลากหลาย ไมม่ ีการบังคบั ให้ผู้ใชต้ ้องติดตัง้ โปรแกรมอ่ืนใดเพ่ิมเตมิ นอกเหนอื จากเว็บบราวเซอร์ ควรเป็นเว็บ ทแี่ สดงผลไดด้ ใี นทุกระบบปฏิบัตกิ าร สามารถแสดงผลได้ในทกุ ความละเอียดหนา้ จอ ซ่งึ หากเป็นเว็บไซต์ท่ีมี ผใู้ ชบ้ รกิ ารมากและกลุ่มเป้าหมายหลากหลายควรใหค้ วามสำคญั กบั เรือ่ งน้ใี หม้ าก 8. ความคงทใี่ นการออกแบบ (Design Stability) ถ้าต้องการให้ผู้ใช้งานรูส้ ึกวา่ เว็บไซตม์ คี ุณภาพ ถูกต้อง และเชื่อถือได้ ควรให้ความสำคัญกบั การ ออกแบบเว็บไซต์เป็นอยา่ งมาก ต้องออกแบบวางแผนและเรียบเรียงเน้ือหาอยา่ งรอบคอบ ถา้ เว็บท่ีจัดทำข้ึน อยา่ งลวก ๆ ไมม่ มี าตรฐานการออกแบบและระบบการจัดการขอ้ มลู ถา้ มปี ญั หามากข้ึนอาจส่งผลให้เกิดปัญหา และทำให้ผู้ใชห้ มดความเชื่อถอื 9. ความคงทข่ี องการทำงาน (Function Stability) ระบบการทำงานต่าง ๆ ในเว็บไซต์ควรมีความถูกตอ้ งแน่นอน ซึง่ ตอ้ งไดร้ ับการออกแบบสร้างสรรค์ และตรวจสอบอยู่เสมอ ตวั อย่าง เชน่ ลงิ คต์ ่างๆ ในเวบ็ ไซต์ ตอ้ งตรวจสอบว่ายังสามารถลิงค์ข้อมูลได้ถูกต้อง หรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลีย่ นแปลงได้ตลอดเวลา ปัญหาทีเ่ กดิ จากลิงค์ ก็คือ ลิงค์ขาด ซ่ึงพบได้ บ่อยเปน็ ปัญหาท่ีสรา้ งความรำคาญกบั ผู้ใชเ้ ป็นอย่างมาก ขัน้ ตอนการสร้างเวบ็ ไซต์ ขั้นตอนที่ 1 การวางแผนการจดั ทำเวบ็ ไซต์ เป็นขน้ั ตอนแรกของการออกแบบเวบ็ เนอื่ งจากเราต้องกำหนดชื่อเร่ือง เนอ้ื หา และรายละเอียดของ เวบ็ ทเี่ ราจะจดั ทำเพอื่ ใหเ้ หน็ มมุ มองครา่ ว ๆ ก่อนจะลงมือสรา้ งเว็บไซต์ นอกจากน้ีเรายงั ตอ้ งทำการแบ่งเน้ือหา เปน็ หมวดหมู่ต่าง ๆ ตามลำดบั ก่อน-หลงั เพื่อใหง้ า่ ยต่อการจดั ทำโครงรา่ งของเวบ็ ข้ันตอนที่ 2 การกำหนดโครงสรา้ งของเวบ็ เปน็ ขั้นตอนในการกำหนดผังของเว็บ เพ่ือให้ทราบองคป์ ระกอบทั้งหมดของเว็บ ตวั อยา่ งดงั รูป
ข้อสังเกต 1. หนา้ แรกของเวบ็ หรือโฮมเพจ จะต้องชอื่ index สว่ นนามสกุลให้ใส่ตามลกั ษณะของภาษาท่ีใช้ใน การสร้างเว็บ 2. การตง้ั ช่ือเวบ็ เพจแตล่ ะหน้าเวลาให้กำหนดช่ือเป็นภาษาองั กฤษตามดว้ ยนามสกุลของภาษาท่ีเรา สร้างเวบ็ เช่น index.html, gallery.html, contact.html เป็นต้น ขั้นตอนที่ 3 การกำหนดการเชอื่ มโยงเว็บเพจ การกำหนดการเช่ือมเว็บเพจ เปน็ การกำหนดความสัมพนั ธ์ของการเช่ือมโยงในแต่ละหนา้ เว็บเพื่อให้ สามารถกลับไปกลบั มาระหว่างหนา้ ตา่ ง ๆ ได้ โดยแต่ละไฟลจ์ ะมคี วามสัมพันธ์กนั ตัวอยา่ งดงั รปู ขน้ั ตอนที่ 4 การตง้ั ช่อื ไฟล์และโฟลเดอร์
1. การสรา้ งโฟลเดอร์ การสร้างโฟลเดอร์ให้สร้างเป็นช่ือหนว่ ยงาน / เรอื่ งน้ันๆ ควรใชต้ ัวอกั ษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกบั ตวั เลข 0-9 2. การตั้งชือ่ ไฟล์ การตง้ั ช่อื ไฟล์ให้ตั้งช่ือและนามสกลุ ไฟล์เป็นตัวอักษร ภาษาองั กฤษตัวพมิ พ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเคร่ืองมือขีดลบ/ขดี ล่าง และตง้ั ชอ่ื ไฟล์ให้ตรงกับเรอ่ื งน้ัน ๆ เชน่ gallery.html คือ ภาพบรรยากาศ, contact.html คอื ตดิ ต่อเรา เปน็ ต้น ขนั้ ตอนท่ี 5 การออกแบบเวบ็ เพจแต่ละหน้าในเว็บไซต์ สว่ นประกอบของเวบ็ ไซต์ท่ดี ี โครงสร้างของเว็บไซตโ์ ดยจะมสี ่วนหลกั ๆอยูด่ ว้ ยกันทั้งหมด 3 สว่ นหลกั ๆ ดังน้ี 1. ส่วนหวั ของหน้า (Page Header) เปน็ สว่ นท่ีอย่ตู อนบนสุดของหนา้ และเป็นส่วนที่สำคญั ที่สุดของหน้า เพราะเปน็ สว่ นที่ดึงดูดผู้ชมให้ ตดิ ตามเนอ้ื หาภายในเว็บไซต์ มกั ใส่ภาพกราฟกิ เพอ่ื สรา้ งความประทบั ใจ ส่วนใหญ่ประกอบดว้ ย - โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ได้เป็นอย่างดี และยังทำให้เว็บ น่าเช่อื ถอื - ช่ือเวบ็ ไซต์ (Name) - เมนูหลกั หรือลิงค์ (Navigation Bar) เปน็ จดุ เช่อื มโยงไปสเู่ นื้อหาของเว็บไซต์
2. ส่วนของเน้ือหา (Page Body) เป็นส่วนที่อยู่ตอนกลางของหน้า ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ, ตารางข้อมูล ภาพกราฟกิ วดี โี อ และอ่นื ๆ และอาจมีเมนูหลกั หรือเมนเู ฉพาะกลมุ่ วางอยใู่ นส่วนนีด้ ้วย สำหรับส่วนเนื้อหาควรแสดงใจความสำคัญทเ่ี ป็นหัวเรื่องไว้บนสดุ ขอ้ มูลมคี วามกระชับ ใชร้ ูปแบบตวั อักษร ทอี่ ่านงา่ ย และจดั Layout ใหเ้ หมาะสมและเป็นระเบียบ 3. ส่วนท้ายของหนา้ (Page Footer) เปน็ ส่วนท่ีอยู่ดา้ นล่างสุดของหนา้ มักวางระบบนำทางท่ีเป็นลงิ ค์ข้อความง่าย ๆ และอาจแสดงขอ้ มูล เพิ่มเติมเกี่ยวกับเนือ้ หาภายในเว็บไซต์ เช่น เจ้าของเว็บไซต์, ข้อความแสดงลิขสิทธิ์, วิธีการติดต่อกับผู้ดแู ล เวบ็ ไซต์, คำแนะนำการใช้เวบ็ ไซต์ เปน็ ตน้ โดยปกตสิ ว่ นหวั และสว่ นท้ายมกั แสดงเหมอื นกันในทุกหน้าของเว็บ เพจ ขัน้ ตอนที่ 6 การสร้างเว็บเพจ เมอื่ จัดวางองค์ประกอบของเว็บแตล่ ะหน้าแล้ว ตอ่ ไปคอื ข้นั ตอนการเขียนเว็บดว้ ยโปรแกรมภาษา HTML เพื่อกำหนดให้แต่ละหน้าเว็บเพจนำเสนอข้อความ รูปภาพ วีดีโอ และเสียง ให้อยู่ในรูปแบบการท่ี ต้องการ ขน้ั ตอนที่ 7 การลงทะเบยี นขอพ้ืนทเ่ี วบ็ ไซต์ เมื่อทำการออกแบบและสรา้ งเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โลกของ อนิ เทอรเ์ นต็ ให้คนอ่ืนเข้ามาเยี่ยมชม วิธีการ คอื การนำเว็บไซต์ไปฝากกับผใู้ หบ้ ริการพื้นที่เวบ็ ไซต์ท้ังแบบเสีย ค่าใชจ้ ่ายหรือบรกิ าร และแบบพื้นที่เว็บไซต์ฟรี ข้ันตอนที่ 8 การอัพโหลดเวบ็ ไซต์ เมือ่ เราทำการสมคั รบริการพ้ืนที่ฝากเวบ็ แลว้ ขัน้ ตอนต่อไป คือการอพั โหลดไฟลเ์ ว็บไซต์ของเราไปยัง เวบ็ ไซต์ทใ่ี ห้บริการพน้ื ที่ฝากเวบ็ ซ่ึงอาจจะทำการอพั โหลดผ่านเวบ็ บราวเซอรเ์ ว็บท่ใี ห้บรกิ าร หรอื การอัพโหลด ดว้ ยโปรแกรม เช่น CuteFTP, Filezilla, WS_FTP เป็นต้น เพอื่ ใหผ้ ู้คนไดเ้ ขา้ เย่ียมชมโดยสามารถดูในเว็บไซต์ ของเราผ่านเครอื ขา่ ยอินเทอรเ์ น็ต ขั้นตอนท่ี 9 การเรยี กดเู ว็บไซต์ เม่ือเราทำการอัพโหลดไฟล์เว็บไซต์ของเราขึ้นบนเวบ็ ไซต์ทใี่ ห้บริการพื้นท่ีฝากเว็บแล้ว เราสามารถ เปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เปน็ ต้น โดยการพิมพท์ อี่ ยู่เว็บไซต์ตรง Address Bar
รูจ้ ักกับ Adobe Dreamweaver CS6 Adobe Dreamweaver CS6 เป็นโปรแกรมสำเร็จรูปที่ใช้สำหรับการพัฒนาเว็บไซต์ โดยมี คุณสมบัติในการออกแบบและสร้างเว็บเพจ จนถึงการพัฒนาแอพลิเคชั่นเบิ้องต้น ซึ่งในโปรแกรมตัวนี้มี เครื่องมือสำหรับการวางข้อความ ภาพกราฟิก ตาราง แบบฟอร์ม พร้อมทั้งมัลติมีเดียต่างๆ เพื่อแสดงให้ ผ้พู ฒั นาเวบ็ ไซต์ใช้งานได้งา่ ย โดยไม่ตอ้ งรู้จักภาษา HTML, JavaScript, CSS หรอื ภาษาสคริปต์อ่ืนๆ ซึ่งเม่ือ ออกแบบและพัฒนาเวบ็ ไซตใ์ นโปรแกรม แลว้ นำมาแสดงผลทางบราวเซอร์ก็จะเห็นเป็นลักษณะทไี่ ด้จัดวางไว้ หรือจะเรียกอีกอย่างว่า What You See Is What You Get (WYSIWYG) จึงเหมาะสมกับผู้ที่เริ่มต้นและ ผ้ใู ช้งานทว่ั ไปจะนำมาพฒั นาเว็บไซต์ เวอร์ชนั่ ต่างๆ ของโปรแกรม Dreamweaver ในปัจจุบันนี้โปรแกรม Dreamweaver ถูกพัฒนาโดย Adobe ซึ่งเป็นการซื้อกิจการต่อมาจาก Macromedia เมื่อปี 2005 ที่ผ่านมา ดังนั้น ในปัจจุบันนี้เราจะเรยี กโปรแกรมนี้วา่ Adobe Dreamweaver แทน Macromedia Dreamweaver โปรแกรมได้รับการพัฒนามาแล้วทัง้ หมด 16 เวอรช์ นั่ (นบั ตงั้ แต่เวอร์ชั่น 1.0 ทอี่ อกมาเม่ือปี 1997) ดังน้ี การเรียกใชง้ านโปรแกรม
การเรียกใช้งานโปรแกรม Adobe Dreamweaver CS6 ขนึ้ มาใช้งานทำได้ดงั น้ี วิธีที่ 1 เรียกผ่าน Start Windows 10 โดยการคลิกที่ปุ่ม Start >>All apps >>Adobe Master Collection CS6 >> Adobe Dreamweaver CS6 วิธีที่ 2 เรียกผ่านไอคอนบนเดสก์ทอปโดยการดับเบิ้ล คลิกที่ไอคอนโปรแกรม Adobe Dreamweaver CS6 เม่อื คลกิ เลอื กเปดิ โปรแกรมข้ึนมาแลว้ จะปรากฏ Welcome Screen ดงั รปู
Welcome Screen เปน็ หน้าต่างสำหรบั เลือกข้นั ตอนการเร่มิ ใชง้ านโปรแกรม ซง่ึ จะมีตวั เลอื กออกเป็นกลุ่มๆ คือ A : Open a Recent Item เป็นการเปิดไฟล์งานท่ีเคยใชง้ านแลว้ โดยจะมรี ายชอ่ื ไฟล์งานแสดงอยู่ เรียงลำดบั จากที่เปดิ ใชง้ านลา่ สดุ เปน็ ต้นไป หรือจะเลอื กไฟลอ์ ืน่ ท่ี Open ก็ได้ B : Create New เป็นการสร้างไฟล์งานใหม่ โดยปกติแลว้ ในส่วนนี้จะเลอื กท่ี HTML ซึ่งเป็นการ สรา้ งเวบ็ เพจพ้ืนฐาน แต่ถา้ เลอื กหวั ขอ้ อื่น หน้าเว็บเพจน้ันก็จะเป็นไฟลต์ ามชนิดทเี่ ลือกใช้งาน เช่น ไฟล์งาน PHP, ASP และ JavaScript เป็นตน้ C : Top Features (videos) เปน็ ส่วนที่ใช้สำหรับเขา้ ไปดูรายละเอยี ดและเทคนิคต่างๆ ของการ ใชง้ านโปรแกรมผา่ นทางเว็บไซต์ของ Adobe D : เป็นสว่ นของการเปิดดคู ำแนะนำในการใช้งานโปรแกรม E : เปน็ สว่ นสำหรบั ดาวนโ์ หลดโปรแกรมหรือดขู ้อมูลบนเวบ็ ไซต์ของ Adobe ส่วนประกอบของโปรแกรม Dreamweaver CS6
A : เมนูบาร์ (Menu bar) เป็นส่วนที่ใช้ในการสร้างและทำงานกับโปรแกรม ซึ่งมีการแบ่งเป็น กลุ่มคำสง่ั ตา่ งๆ เปน็ หมวดหม่แู ละเกบ็ ไวเ้ ปน็ เมนู โดยในแต่ละเมนกู จ็ ะมเี มนูย่อยๆ ไว้เรียกใชง้ านตามตอ้ งการ B : แถบเครื่องมือ (Insert bar) เป็นส่วนของการรวบรวมเครื่องมือที่ใช้ในการสร้างวัตถุหรือ องค์ประกอบต่างๆ ของหนา้ เวบ็ เพจ ซ่ึงแบง่ เปน็ กลมุ่ ๆ มีทั้งหมด 8 กลุ่ม คือ - Common เป็นกลุ่มเคร่ืองมอื ท่ใี ช้งานบ่อยๆ ในการสร้างเวบ็ เพจ เช่น การแทรกตาราง การ แทรกรปู ภาพ เปน็ ตน้ - Layout ใช้สำหรับวางวัตถุที่ใช้จัดโครงสร้างของเว็บเพจ เช่น ตาราง เฟรม และ AP Element - Forms ใช้สำหรบั วางวัตถุที่ใชส้ รา้ งแบบฟอร์มเพ่ือรบั ข้อมูลจากผู้ใช้งานเว็บไซต์ เช่น การ สมัครสมาชกิ เป็นต้น
- Data ใชส้ ำหรับวางคำส่ังทใี่ ช้จดั การกบั ฐานข้อมลู และนำฐานขอ้ มูลออกมาแสดงบนหน้าเว็บ เพจ - Spray ใชส้ ำหรบั วางวัตถุทใ่ี ชเ้ ทคโนโลยขี อง Spary ในรปู แบบต่างๆ - InContext Editing ใช้สำหรบั สร้างพื้นที่เทมเพลตเพือ่ อำนวยความสะดวกต่อผู้ใช้ในการ แก้ไขเนอื้ หา - Text ใช้สำหรบั จดั รปู แบบของข้อความภายในเว็บเพจ เชน่ ตัวหนา ตัวเอยี ง หัวข้อ บุลเล็ต และแทรกสัญลกั ษณ์ตา่ งๆได้ - Favorites ใชส้ ำหรบั เพมิ่ เครอื่ งมือท่ีเรยี กใช้งานบอ่ ยๆ โดยเพม่ิ จากกลุ่มเครื่องมืออื่นๆ ได้ โดยคลิกเม้าส์ขวาบน Insert bar แล้วเลือก Customize Favorites (ตัวอย่างดา้ นล่างเป็นการดงึ เครื่องท่ใี ช้ งานบ่อยๆ คือ ตาราง รปู ภาพ และ Rollover Image) C : หน้าต่างการทำงาน (Document Window) เป็นบริเวณที่ใช้ในการออกแบบและสร้างเวบ็ เพจตามต้องการ ซ่งึ สามารถแทรกข้อความ รปู ภาพ และวตั ถตุ า่ งๆ ลงไปไดเ้ ลย D: แถบสถานะ (Status bar) เป็นส่วนที่แสดงข้อมูลเพ่ิมเติมเกี่ยวกับงานท่ีกำลังทำอยู่ เช่น การ ปรบั ขนาดการแสดงผลและเวลาท่ใี ช้ในการโหลดเว็บเพจนัน้ ๆ E : Properties Inspector ใช้ในการกำหนดค่าคุณสมบัติของหน้าเว็บเพจและในส่วนของวัตถุ ตา่ งๆ ซ่ึงจะมีรายละเอยี ดแสดงขึน้ มา เมื่อมกี ารคลิกเลอื กวตั ถนุ น้ั ๆ
F : พาเนล (Panel) เปน็ หนา้ ตา่ งหรือชุดคำสั่งพิเศษที่ใชง้ านเฉพาะด้าน เช่น ฐานข้อมูล ไฟล์งาน ตา่ งๆ สรา้ งการเชื่อมโยง รวมถงึ เรื่องการอพั โหลดไฟล์งานขนึ้ เซริ ์ฟเวอร์ ในการสรา้ งเว็บไซต์น้ันถา้ จะให้เป็นระบบจะต้องมีการกำหนดเว็บไซต์ใหม่ ซ่งึ ในโปรแกรม Adobe Dreamweaver CS6 นนั้ เรียกว่าเป็นการ มมุ มองการทำงาน เมื่อเปิดเรียกใช้งานโปรแกรมขึ้นมาแล้วจะพบหน้าต่างการใช้งานดังรูป (ในที่จะเลือกเป็นแบบ Create new แล้วเลือกเปน็ ไฟล์ HTML) จะไดห้ นา้ ต่างเอกสาร(Document) หน้าต่างเอกสาร(Document window) คือ ส่วนที่ใช้สำหรับใส่เนื้อหาพร้อมทั้งการจัด องค์ประกอบหน้าเว็บเพจ โดยการใชง้ านนั้นจะมกี ารทำงานเช่นเดียวกับโปรแกรมเวิร์ดโปรเซสเซอรท์ ั่วไป คือ พมิ พข์ ้อความ แทรกรูปภาพ สร้างตาราง เมอ่ื ออกแบบและตกแตง่ แล้วผลลัพธท์ ี่แสดงออกมาบนบราวเซอร์ก็ จะปรากฏเช่นนั้นด้วย มุมมองการทำงานของหน้าตา่ งเอกสารมีอยู่ 6 มมุ มอง ดงั รูป ซง่ึ สามารถคลกิ สลบั การทำงาน ได้ตามตอ้ งการ
- มุมมองโคด้ (Code view) เปน็ การแสดงมุมมองของเวบ็ เพจในรูปแบบของชุดคำส่ังภาษา HTML ทงั้ เอกสาร ซงึ่ ถกู สรา้ งจากโปรแกรม Dreamweaver อตั โนมตั ิ เหมาะสำหรบั เขียนโค้ดคำสั่งเพิ่มเตมิ อาจจะ เปน็ คำส่งั JavaScript หรือ CSS ก็ได้ - มมุ มองโค้ดและออกแบบ (Code and Design หรอื Split) เปน็ การแสดงมุมมองของเวบ็ เพจทั้ง โค้ด HTML และงานออกแบบบนหนา้ เอกสาร โดยมีการแบ่งออกเปน็ 2 สว่ นในหน้าเดียวกนั
- มุมมองออกแบบ (Design view) เป็นการแสดงมุมมองของเว็บเพจในลักษณะของการออกแบบ ซึ่งจะปรากฏผลลัพธ์ทางบราวเซอร์ในลักษณะเดียวกนั
- มมุ มองแสดงผลโค้นหนา้ เวบ็ (Live Code) มุมมองนีจ้ ะแสดงผลร่วมกับมุมมอง Live View โดย จะแสดงมุมมอง Live Code ไดก้ ็ตอ่ เมอื่ อยู่ในมุมมอง Live View เท่าน้นั ซึ่งจะใช้ตรวจสอบดโู ค้ดในตำแหน่ง ต่างๆ ไมส่ ามารถท่ีจะแก้ไขโคด้ ในมมุ มองน้ไี ด้ - มมุ มองแสดงหน้าเวบ็ เหมือนดูจากบราวเซอร์ (Live View) มุมมองนจ้ี ะแสดงเว็บเพจเหมือนกับ หนา้ ที่แสดงผลในบราวเซอร์ สามารถแสดงผลจากคำส่งั JavaScript และ Plug-in ตา่ งๆ ที่นำมาใช้งาน
- มุมมองแสดงผลหนา้ เวบ็ ที่จดั รูปแบบดว้ ย CSS (Inspect) มุมมองนี้จะแสดงผลรว่ มกบั Live View ซง่ึ เป็น มมุ มองท่ใี ช้ในการตรวจสอบการจัดรูปแบบด้วยคำส่ัง CSS ในตำแหน่งที่เมา้ สเ์ ล่อื นผ่านโดยสามารถดูได้จาก พาเนล CSS Style เร่ิมตน้ การสร้างไซต์งานใหม่ (New Site) ก่อนที่เราจะใช้งานโปรแกรม Dreamweaver เพื่อการสร้างเว็บไซต์ได้นั้น เราต้องทำการตั้งไซต์ (New Site/Site Setup) ของเว็บขึน้ มาเสียกอ่ น มฉิ ะนน้ั แล้ว...โปรแกรมจะไม่ทราบถงึ ตำแหนง่ ของ Folder ที่ ใช้ในการเก็บไฟล์ตา่ ง ๆ ของเว็บไซต์เรา ซงึ่ จะทำใหเ้ กิดปญั หาตา่ ง ๆ ตามมาในการทำเวบ็ ของเรากับโปรแกรม ครบั โดยโปรแกรม Dreamweaver จะยอมให้เราบนั ทึกไฟล์งานไดใ้ นเฉพาะโฟรเ์ ดอร์ที่เราทำการกำหนดหรือ ตั้งไซคง์ านไว้แล้วเท่านัน้ ครบั วิธกี ารตัง้ ไซตง์ าน (Site Setup/Site Definition) ในการต้ังไซตง์ านของโปรแกรม Dreamweaver น้ัน จะมีอย่ดู ้วยกัน 2 รูปแบบ คอื 1. การตั้งไซต์งานเพื่อสร้างเวบ็ ในแบบ Static ซ่ึงเปน็ การตง้ั ไซต์งานเพื่อสรา้ งเว็บในรูปแบบของ HTML โดยปรกติ 2. การตั้งไซตง์ านเพ่ือสรา้ งเวบ็ ในแบบ Dynamic ซง่ึ เป็นการตั้งไซตง์ านเพ่ือพัฒนาเว็บในรูปแบบ ท่ีมกี ารใช้งานภาษาทาง Web Programming อยา่ งเชน่ PHP, JSP เข้าร่วมในการพฒั นาเวบ็
**สำหรบั ในบทความน้ี จะขอแนะนำการตง้ั ไซต์งานในรปู แบบที่ 1 ครับ*** 1. เมือ่ เปิดโปรแกรมข้ึนมาแลว้ จะพบป่มุ ท่ีใช้สรา้ งไซต'์ งานใหม่ (New Site) ดงั รปู 2. ใหเ้ ลอื กที่เมนู New Site... เพอื่ ทำการสรา้ งไซตง์ านใหม่ 3. จะไดห้ นา้ ต่าง Site Setup ขนึ้ มาเพอ่ื กำหนดชือ่ ของ site งาน 4. ใหท้ ำการตั้งชอ่ื ของ Site งานให้สอ่ื ความหมายกับเวบ็ ไซตท์ ่เี ราจะทำ 5. คลกิ เลอื กป่มุ Browse เพือ่ เลอื กทเ่ี กบ็ งานในโฟลเดอรท์ ต่ี อ้ งการ 6. คลิกเลือกโฟลเดอร์ทีส่ ร้างไว้
7. คลกิ ป่มุ Select เพือ่ ตอบตกลงทจี่ ะเลอื กโฟลเดอร์งานดงั กลา่ วไปสรา้ งเปน็ ไซตง์ าน 8. คลกิ เลอื กปมุ่ Save เม่ือกำหนดคา่ เรียบรอ้ ยแล้ว 9. จะพบว่ามีช่อื Site งานทสี่ ร้างข้ึนปรากฏท่พี าเนล Files
กำหนดโครงร่างเว็บไซต์ เว็บไซตป์ ระกอบด้วยเว็บเพจและไฟล์ต่าง ๆ จำนวนมาก เพ่อื ทำใหส้ ามารถจัดการเวบ็ เพจได้อย่างเป็น ระเบียบและงา่ ยตอ่ การแก้ไขข้อมูล จงึ ควรจัดเก็บไฟล์หน้าเว็บไว้ในโฟลเดอรแ์ ยกตามหัวขอ้ ดังตวั อย่าง เริม่ ต้นสร้างเว็บไซตใ์ น Dreamweaver CS6 การสร้างเว็บไซต์ จะต้องทำการสร้างโฟลเดอร์เก็บไฟล์เอกสาร และไฟล์ที่เกี่ยวข้องไวเ้ ฉพาะ ซึ่งใน โปรแกรม Dreamweaver เรยี กว่า การสรา้ งไซต์ (Site) มวี ิธีการดังนี้
1. คลกิ ท่ีเมนู Site 2. เลอื ก New Site... จากนั้นจะปรากฏหนา้ ต่าง Site Setup for ... (ตามชอ่ื ไซต์) 3. คลกิ ที่แท็บ Site 4. ชอ่ ง Site Name : ตั้งชอื่ เวบ็ ไซต์ท่ีตอ้ งการ 5. ชอ่ ง Local Site Folder : กำหนดโฟลเดอรท์ จ่ี ัดเกบ็ เวบ็ ไซต์ จากนั้นคลกิ ท่ปี ุ่ม Save
6. คลกิ ท่แี ท็บ Advanced Settings 7. เลอื ก Local Info 8. ช่อง Default Images folder : กำหนดโฟลเดอร์ในการจัดเก็บรูปภาพ ต้องอยู่ในโฟลเดอรย์ ่อย ของโฟลเดอรท์ ่จี ดั เกบ็ เวบ็ ไซต์ (ตามขอ้ 5) 9. คลิกท่ปี ุ่ม Save ถา้ ตอ้ งการแก้ไขไซตท์ ่สี ร้างไว้ มีวิธีการดังนี้ 1. คลิกทเ่ี มนู Site 2. เลือก Manage Site...
3. ดับเบลิ คลิกทีช่ ือ่ เว็บไซต์ 4. คลิกทีป่ ุ่ม Done การจดั การโครงสร้าง Files พาเนล Files เปน็ ส่วนแสดงช่ือเว็บไซต์ โฟลเดอร์ สำหรับเก็บไฟล์เอกสารต่าง ๆ ของเวบ็ ไซต์ มีวิธีการ ดงั นี้ 1. คลกิ ขวาท่แี ทบ็ พาเนล Files 2. เลอื ก New File สำหรับสร้างไฟล์ 3. หรอื เลือก New Folder สำหรบั สร้างโฟลเดอร์ 4. หรือ เลอื กจัดการเกี่ยวกบั ไฟลแ์ ละโฟลเดอร์ในคำส่ังอน่ื ๆ การกำหนดคุณสมบตั ขิ องเว็บเพจ กอ่ นการสร้างเว็บเพจ จำเป็นตอ้ งกำหนดคุณสมบัตพิ ื้นฐานใหก้ ับเว็บเพจแต่ละหนา้ เพือ่ ความเหมาะสม ในการทำงาน ซงึ่ มวี ธิ ีการดงั น้ี
1. คลกิ ท่ีเมนู Modify 2. เลอื ก Page Properties... หรือ Ctrl + J 3. หรือ คลิกที่ปมุ่ Page Properties... จะปรากฎหนา้ ตา่ ง Page Properties แบ่งรายละเอียดออกเป็น 6 หมวด ไดแ้ ก่ Appearance (CSS) กำหนดคุณสมบัติทัว่ ๆ ไปของหนา้ เว็บเพจ (การกำหนดหน้าตาเว็บเพจด้วย CSS) Page Font : กำหนดรปู แบบของตัวอักษร
Size : กำหนดขนาดของตวั อักษร Text Color : กำหนดสีของตัวอกั ษร Background Color :กำหนดสพี น้ื หลงั ของเว็บเพจ Background Image : กำหนดภาพให้เป็นพืน้ หลงั ของเว็บเพจ Repeat : กำหนดการแสดงซำ้ ของภาพพ้ืนหลงั Left Margin : กำหนดระยะขอบด้านซา้ ยของเว็บเพจ Right Margin : กำหนดระยะขอบดา้ นขวาของเวบ็ เพจ Top Margin : กำหนดระยะขอบด้านบนของเว็บเพจ Bottom Margin : กำหนดระยะขอบดา้ นลา่ งของเวบ็ เพจ Appearance (HTML) กำหนดคุณสมบัติท่ัว ๆ ไปของหน้าเว็บเพจ (การกำหนดหน้าตาเว็บเพจ ดว้ ย HTML) จะเหมือนกบั Appearance (CSS) Background Image : กำหนดภาพให้เป็นพนื้ หลังของเวบ็ เพจ Background : กำหนดสีพ้ืนหลังของเว็บเพจ Text : กำหนดสีของตัวอักษร Visited links : กำหนดสขี องลงิ ค์ เมอื่ ถกู เมาส์คลกิ ไปแลว้ Link : กำหนดสีของข้อความท่ีเปน็ จุดลงิ ค์ Active links : กำหนดสขี องลงิ ค์ เม่อื ถกู เมาส์คลิก Left Margin : กำหนดระยะขอบด้านซ้ายของเว็บเพจ
Right Margin : กำหนดระยะขอบดา้ นขวาของเว็บเพจ Top Margin : กำหนดระยะขอบด้านบนของเวบ็ เพจ Bottom Margin : กำหนดระยะขอบดา้ นล่างของเวบ็ เพจ Links (CSS) กำหนดคณุ สมบตั พิ ้นื ฐานของการสร้างจุดเชือ่ มโยงหรอื ลิงค์ Link Font : กำหนดรปู แบบของข้อความท่ีใช้เปน็ ลงิ ค์ Size : กำหนดขนาดของข้อความท่ีใช้เปน็ ลิงค์ Link Color : กำหนดสีของข้อความทใ่ี ช้เป็นลงิ ค์ Rollover links : กำหนดสขี องขอ้ ความลงิ ค์ เมือ่ ถูกเมาสช์ ้ี Visited links : กำหนดสีของข้อความลงิ ค์ เม่ือถกู เมาสค์ ลิกไปแลว้ Active links : กำหนดสีของข้อความลิงค์ เม่ือถูกเมาส์คลิก Underline Style :กำหนดรูปแบบการขดี เส้นใต้ของข้อความลงิ ค์ Headings (CSS) กำหนดคุณสมบตั ขิ ้อความที่ใชเ้ ป็นหัวเร่อื งในหนา้ เวบ็ เพจ
Heading font : กำหนดรปู แบบตวั อักษรของหัวขอ้ หรอื หวั เร่ือง Heading 1-6 : กำหนดขนาดและสีตวั อักษรของหวั ข้อหรอื หัวเรือ่ ง Title/Encoding กำหนดหวั เร่อื งและรปู แบบภาษาของเวบ็ เพจ
Title : กำหนดชอื่ หวั เร่อื งของเวบ็ เพจ Document Type(DTD) : กำหนดประเภทของหน้าเว็บเพจ Encoding : กำหนดภาษาทจ่ี ะใช้ในเวบ็ เพจ (นิยมกำหนดเปน็ Unicode (UTF-8) ในการ แสดงขอ้ ความบนหนา้ เวบ็ เพจเปน็ ภาษาไทย) Tracing Image กำหนดรูปภาพให้แสดงอยู่ด้านหลังของเนื้อหา แต่จะไม่ปรากฏรูปภาพเม่ือ แสดงผลหนา้ เบราว์เซอร์ Tracing image : กำหนดไฟลภ์ าพท่จี ะใช้เปน็ แบบ Transparency : ปรับแต่งความโปรง่ ใสของภาพ การสร้างหนา้ เวบ็ เพจใหม่ การสรา้ งหน้าเว็บเพจใหม่ (เว็บเพจเปล่า) มวี ธิ ีการดังน้ี
1. คลกิ ทเ่ี มนู File 2. เลอื ก New... 3. คลกิ ที่แท็บ Blank Page 4. ช่อง Page Type : ประเภทของเว็บเพจให้เลอื ก HTML 5. ช่อง Layout : รปู แบบโครงสร้างใหเ้ ลอื ก <none> จากนน้ั คลิกที่ปมุ่ Create 6. จะปรากฏหนา้ เว็บเพจเปลา่ ดังรปู การบนั ทกึ ไฟล์เว็บเพจ เมอ่ื สรา้ งเวบ็ เพจได้เสรจ็ เรยี บร้อยแลว้ ให้ทำการบนั ทกึ ไฟลเ์ วบ็ เพจ ซึ่งมีวิธกี ารดงั น้ี
1. คลกิ ทเ่ี มนู File 2. เลือก Save... หรือ Save As... 3. ชอ่ ง Save in ใหเ้ ลือกตำแหน่งเกบ็ ไฟลเ์ วบ็ เพจ 4. ชอ่ ง File name ให้ตงั้ ชอ่ื ไฟลเ์ วบ็ เพจท่ตี อ้ งการบนั ทึก 5. คลกิ ที่ปุม่ Save เพ่ือบนั ทกึ ไฟล์
การเปิดเวบ็ เพจเดมิ การเปดิ เว็บเพจเดิมที่เคยสร้าง เพื่อปรับปรงุ หรือแก้ไขเนอื้ หา มวี ธิ ีการดังน้ี 1. คลิกที่เมนู File 2. เลือก Open...
3. เข้าโฟลเดอรแ์ ล้วเลอื กไฟล์เว็บเพจทีต่ อ้ งการ 4. คลกิ ทป่ี มุ่ Open การทดสอบเว็บเพจผ่านเบราว์เซอร์ เมือ่ สรา้ งเว็บเพจไดต้ ามตอ้ งการแลว้ ให้เปิดดูหน้าเวบ็ เพอื่ ทดสอบเวบ็ เพจผา่ นเบราวเ์ ซอร์ มวี ธิ กี ารดงั น้ี 1. คลกิ ที่ปุ่ม Preview/Debug in browser 2. เลือกโปรแกรมสำหรับการแสดงผลหนา้ เว็บ เช่น Firefox, IExplore, Chrome 3. หน้าเว็บเพจจะแสดงขึ้นมาดว้ ยโปรแกรม Web Browser
เริ่มต้นใส่ข้อความ ข้อความนับว่าเป็นข้อมูลพ้ืนฐานในการสื่อสารถึงผู้เขา้ ชมเวบ็ ไซต์ การใส่ข้อความบนหน้าเว็บเพจ สามารถกระทำไดเ้ หมือนกับการพิมพ์ในโปรแกรม Microsoft Word โดยสามารถพมิ พบ์ นหนา้ เวบ็ เพจได้เลย 1. คลกิ วางเคอรเ์ ซอรต์ รงตำแหน่งทต่ี ้องการพมิ พ์ขอ้ ความ 2. พิมพ์ข้อความทีต่ ้องการ การขนึ้ บรรทดั ใหม่ การขึ้นบรรทดั ใหม่ ใชว้ ธิ ีกดปมุ่ Enter จะเวน้ บรรทดั ท่วี ่างก่อนและหลังให้ 1 บรรทัด การข้นึ บรรทดั ใหมไ่ ม่ตอ้ งเวน้ ทีว่ ่าง ถ้าตอ้ งการให้การขึ้นบรรทดั ใหมโ่ ดยไม่ต้องเวน้ ที่ว่าง ใหค้ ลกิ หน้าข้อความหรอื บรรทัดทต่ี ้องการ จะขึ้นบรรทัดใหม่แล้วกดปมุ่ Shift พรอ้ มกบั กดปมุ่ Enter การตกแตง่ และจัดรปู แบบให้ขอ้ ความ เมื่อพิมพ์ข้อความลงในเว็บเพจแลว้ การเลือกข้อความ เพื่อจัดการกับข้อความนั้น ๆ เช่น กำหนด รปู แบบของตวั อกั ษร การลบ คัดลอก ย้าย ฯลฯ มรี ายละเอยี ดดงั น้ี 1. การเลือกขอ้ ความ - เลอื กขอ้ ความเฉพาะสว่ นท่ตี อ้ งการ
1. คลกิ เมาสว์ างเคอร์เซอรห์ น้าข้อความและลากเมาส์ไปจนถงึ คำสุดท้าย แล้วปลอ่ ยเมาส์ 2. บรเิ วณเมาสล์ ากผา่ นจะมีแถบสีดำขน้ึ มา - เลือกข้อความทั้งหมด 1. คลกิ ทเ่ี มนู Edit 2. เลือก Select All หรอื Ctrl + A 3. ข้อความทง้ั หมดจะถกู เลือก โดยเปน็ แถบสดี ำคลมุ ข้อความ หมายเหตุ ถ้าต้องการยกเลิกการเลือกเอกสาร ทำไดโ้ ดยคลกิ พ้ืนทีว่ ่างบนหน้าเวบ็ เพจ 2. การตกแตง่ และจัดรูปแบบของข้อความ ขอ้ ความท่พี มิ พล์ งในเวบ็ เพจ สามารถจัดรูปแบบของขอ้ ความ เช่น กำหนดรูปแบบตัวอักษร ขนาด สี ลักษณะตัวอกั ษร รวมไปถงึ การจดั ตำแหนง่ ของข้อความ เพื่อเพม่ิ ความสวยงามหรอื เน้นความสำคญั มีวธิ กี าร ดังน้ี
1. เลือกขอ้ ความท่ีต้องการตกแตง่ หรอื จดั รปู แบบของขอ้ ความ 2. เครื่องมือสำหรับจัดรูปแบบขอ้ ความใน Properties Inspector ซึ่งมีใหเ้ ลือก 2 รูปแบบ คือ แบบ HTML และแบบ CSS ดงั น้ี - จัดรูปแบบด้วย HTML หมายเลข 1 : เปิดการทำงานกับ HTML หมายเลข 2 : Format : เลือกรูปแบบหัวข้อ Heading (ขนาดตัวอกั ษร) ระดบั 1-6 หมายเลข 3 : Class : ดงึ สไตลข์ อง CSS มาใช้กับข้อความ หมายเลข 4 : กำหนดลักษณะตัวอักษรให้เป็นตัวหนา หมายเลข 5 : กำหนดลักษณะตัวอกั ษรใหเ้ ปน็ ตัวเอยี ง หมายเลข 6 : ใส่ Bullet หรอื หวั ขอ้ ย่อย หมายเลข 7 : จัดยอ่ หนา้ ของข้อความ
- จัดรูปแบบดว้ ย CSS หมายเลข 1 : เปดิ การทำงานกบั CSS หมายเลข 2 : Targeted Rule : สรา้ งหรือกำหนดสไตล์ CSS หมายเลข 3 : Font : เลือกรปู แบบของตัวอกั ษร หมายเลข 4 : Size : ขนาดของตัวอักษร หมายเลข 5 : สขี องตัวอักษร หมายเลข 6 : กำหนดลักษณะตวั อักษรให้เปน็ ตวั หนา หมายเลข 7 : กำหนดลักษณะตัวอักษรให้เป็นตวั เอยี ง หมายเลข 8 : จดั ตำแหนง่ ของข้อความ เชน่ ชดิ ซ้าย ก่งึ กลาง ชดิ ขวา จดั ให้ตรงกัน ทง้ั ซ้ายและขวา หมายเหตุ หมายเลข 2 : Targeted Rule : สรา้ งหรือกำหนดสไตล์ CSS - ถ้าเลือก <New Inline Style> คุณสมบัติที่กำหนดจะมีผลต่อ ขอ้ ความที่เลอื กทันที - ถา้ เลอื ก <New CSS Rule> จะเป็นการสร้าง CSS ใหม่ ซึ่งสามารถนำไปใชซ้ ้ำได้ มวี ธิ ีการดงั นี้
1. เลอื กข้อความ 2. ชอ่ ง Targeted Rule เลือก <New CSS Rule> 3. ตกแตง่ หรอื จดั รปู แบบตาม หมายเลข 3-8 (กรณนี ้ี สาธติ การกำหนดสีของตวั อกั ษร)
4. ช่อง Selector Name ใหพ้ มิ พ์ชื่อท่เี ราต้องการสรา้ งเปน็ CSS 5. ชอ่ ง Rule Definition เลือก (This document only) เพื่อกำหนดเฉพาะขอ้ ความท่ีเลอื กไว้ 6. คลกิ ทป่ี ุ่ม OK เพื่อบนั ทกึ 7. ผลจากการจดั รปู แบบดว้ ย CSS การแทรกสัญลักษณ์พิเศษลงในเว็บเพจ การแทรกสัญลักษณ์พเิ ศษลงในเว็บเพจ เช่น สกลุ เงนิ หรอื สญั ลักษณแ์ สดงลิขสทิ ธ์ิต่าง ๆ มีวิธีการ ดงั น้ี
Search
