ใบความรู้ ความรู้ เกีย่ วกับการสร้ างเว็บไซต์
# โฮมเพจ เว็บเพจ และเว็บไซต์ คืออะไร โฮมเพจ โฮมเพจ (Home Page) คือ เว็บเพจหน้าแรกซึ่งเป็ นทางเข้าหลักของเว็บไซต์ ปกติเว็บเพจ ทุก ๆ หน้าใน เว็บไซต์จะถูกลิงค์ (โดยตรงหรื อโดยอ้อมก็ตาม) มาจากโฮมเพจ ดังนั้นบางครั้งจึงมีผใู ้ ช้คาว่าโฮมเพจโดย หมายถึงเว็บไซต์ท้ งั หมด แต่ความจริ งแล้วโฮมเพจหมายถึงหน้าแรกเท่านั้น ถ้าเปรี ยบกับร้านค้า โฮมเพจก็ เป็ นเสมือนหน้าร้านนัน่ เอง ดังนั้นจึงมักถูกออกแบบให้โดดเด่นและน่าสนใจมากที่สุด ต้องมีชื่อไฟล์วา่ index.html หรื อ index.htm เว็บเพจ เว็บเพจ (Web Page) หมายถึง หน้าเอกสารของบริ การ WWW ซึ่งตามปกติจะถูกเก็บอยูใ่ นรู ปแบบไฟล์ HTML (Hyper Text Markup Language) โดยไฟล์ HTML 1 ไฟล์ ก็คือเว็บเพจ 1 หน้านัน่ เอง ภายในเว็บเพจ อาจประกอบไปด้วยข้อความ ภาพ เสี ยง ภาพเคลื่อนไหวแบบมัลติมีเดีย และวีดีโอ นอกจากนี้เว็บเพจแต่ละ หน้าจะมีการเชื่อมโยงหรื อ “ลิงค์” (Link) กัน เพื่อให้ผชู ้ มเรี ยกดูเอกสาร หน้าอื่น ๆ ที่เกี่ยวข้องได้สะดวกอีก ด้วย เว็บไซต์ เว็บไซต์ (Web site) หมายถึง หน้าเว็บเพจหลายหน้า ซึ่งเชื่อมโยงกันผ่านทางไฮเปอร์ลิงก์ ส่ วนใหญ่จดั ทาขึ้น เพื่อนาเสนอข้อมูลผ่านคอมพิวเตอร์ โดยถูกจัดเก็บไว้ในเวิลด์ไวด์เว็บ หน้าแรกของเว็บไซต์ที่เก็บไว้ที่ชื่อ หลักจะเรี ยกว่า “โฮมเพจ” หรื ออาจกล่าวได้วา่ เว็บไซต์กค็ ือ เว็บเพจอย่างน้อย สองหน้าที่มีลิงก์ (Links) ถึง กัน เว็บไซต์โดยทัว่ ไปจะให้บริ การต่อผูใ้ ช้ฟรี แต่บางเว็บไซต์จาเป็ นต้อง มีการสมัครสมาชิก และเสี ย ค่าบริ การเพื่อที่จะดูขอ้ มูลในเว็บไซต์น้ นั ซึ่งได้แก่ ข้อมูลทางวิชาการ ข้อมูลตลาดหลักทรัพย์ หรื อข้อมูลสื่ อ ต่าง ๆ ผูท้ าเว็บไซต์มีหลากหลายระดับ ตั้งแต่สร้างเว็บไซต์ส่วนตัว จนถึงระดับเว็บไซต์สาหรับธุรกิจหรื อ
องค์กรต่าง ๆ การเรี ยกดูเว็บไซต์โดยทัว่ ไปนิยมเรี ยกดูผา่ นซอฟต์แวร์ในลักษณะของเว็บเบราว์เซอร์ เช่น http://www.google.co.th ซึ่งเป็ นเว็บไซต์ที่ให้บริ การสื บค้นข้อมูล เป็ นต้น
# ส่ วนประกอบของหน้ าเว็บเพจ โดยทัว่ ไปแล้ว หน้าเว็บเพจจะแบ่งออกเป็ นส่ วนหลัก ๆ ดังนี้คือ
1.ส่ วนหัว (Page Header) อยูต่ อนบนสุ ดของหน้าเว็บเพจ เป็ นบริ เวณที่สาคัญที่สุด เนื่องจาก ผูเ้ ข้าเยีย่ มชมเว็บไซต์จะมองเห็นก่อน บริ เวณอื่น ส่ วนใหญ่นิยมใช้วางโลโก้ ชื่อเว็บไซต์ ป้ายโฆษณา ลิงค์สาหรับการติดต่อ หรื อลิงค์ที่สาคัญ และ ระบบนาทาง 2.ส่ วนเนื้อหา (Page Body) อยูต่ อนกลางหน้า ใช้แสดงเนื้อหาภายในเว็บเพจ ซึ่งอาจประกอบ ไปด้วยข้อความ ภาพกราฟิ ก ตารางข้อมูล และอื่น ๆ บางครั้งเมนูหลักหรื อเมนูเฉพาะกลุ่ม อาจอยูใ่ นส่ วนนี้ ก็ได้ โดยมักวางไว้ดา้ นซ้ายมือสุด เนื่องจาก ผูเ้ ข้าชมจะมองเห็นได้ง่าย 3.ส่ วนท้ าย (Page Footer)
อยูด่ า้ นล่างสุ ดของหน้าเว็บเพจ ส่ วนใหญ่จะนิยมใช้วางระบบนาทาง ภายในเว็บไซต์แบบที่เป็ นลิงค์ขอ้ ความ ง่าย ๆ นอกจากนี้กอ็ าจจะมีชื่อของเจ้าของเว็บไซต์ ข้อความแสดงลิขสิ ทธิ์ และอีเมล์แอดเดรส (E-mail Address) ของผูด้ ูแลเว็บไซต์ 4.แถบข้ าง (Side Bar) ปัจจุบนั จะนิยมออกแบบด้านข้างของหน้าเว็บเพจให้น่าสนใจ เพื่อใช้ วางป้าย แบนเนอร์ หรื อ ลิงค์แนะนา เกี่ยวกับบริ การของเว็บไซต์
# ลักษณะของเว็บไซต์ ที่ดี เว็บไซต์ ที่ดีควรมีลกั ษณะดังนี้ 1.กาหนดวัตถุประสงค์ โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์น้ ีทาเพื่ออะไร 2.ศึกษาคุณลักษณะของผูท้ ี่เข้ามาใช้วา่ กลุ่มเป้าหมายใดที่ผสู ้ ร้างต้องการสื่ อสาร ข้อมูลอะไร ที่พวกเขาต้องการ โดยขั้นตอนนี้ควรปฏิบตั ิควบคู่ไปกับขั้นตอนที่หนึ่ง 3.วางแผนเกี่ยวกับการจัดรู ปแบบโครงสร้างเนื้อหาสาระ การออกแบบเว็บไซต์ตอ้ งมีการจัดโครงสร้าง หรื อจัดระเบียบข้อมูลที่ชดั เจน การที่เนื้อหามีความต่อเนื่องไปไม่สิ้นสุ ดหรื อกระจายมากเกินไป อาจทาให้ เกิดความสับสนต่อผูใ้ ช้ได้ ฉะนั้นจึงควรออกแบบให้มีลกั ษณะที่ชดั เจนแยกย่อยออกเป็ น ส่ วนต่าง ๆ จัด หมวดหมู่ในเรื่ องที่สมั พันธ์กนั รวมทั้งอาจมีการแสดงให้ผใู ้ ช้เห็นแผนที่โครงสร้างเพื่อป้องกันความสับสน ได้ 4.กาหนดรายละเอียดให้กบั โครงสร้าง ซึ่งพิจารณาจากวัตถุประสงค์ที่ต้ งั ไว้ โดยตั้งเกณฑ์ในการใช้ เช่น ผูใ้ ช้ควรทาอะไรบ้าง จานวนหน้าควรมีเท่าใด มีการเชื่อมโยงมากน้อยเพียงใด 5.หลังจากนั้น จึงทาการสร้างเว็บไซต์แล้วนาไปทดลองเพื่อหาข้อผิดพลาดและทาการแก้ไขปรับปรุ ง แล้ว จึงนาเข้าสู่ เครื อข่ายอินเทอร์เน็ตเป็ นขั้นสุ ดท้าย การออกแบบและพัฒนาเว็บไซต์ ทดี่ ี จะช่ วยกลุ่มผู้ใช้ เข้ าถึงข้ อมูลสารสนเทศเป็ นอย่ างมาก การออกแบบเว็บไซต์ที่ดีควรประกอบด้วย 1.โครงสร้างที่ชดั เจน ผูอ้ อกแบบเว็บไซต์ควรจัดโครงสร้างหรื อจัดระเบียบของข้อมูลที่ชดั เจน แยกย่อย เนื้อหาออกเป็ นส่ วนต่าง ๆ ที่สมั พันธ์กนั และให้อยูใ่ นมาตรฐานเดียวกัน จะช่วยให้น่าใช้งานและ ง่ายต่อการ อ่านเนื้อหาของผูใ้ ช้
2.การใช้งานที่ง่าย ลักษณะของเว็บที่มีการใช้งานง่ายจะช่วยให้ผใู ้ ช้รู้สึกสบายใจต่อการอ่านและสามารถ ทาความเข้าใจกับเนื้อหาได้อย่างเต็มที่ โดยไม่ตอ้ งมาเสี ยเวลาอยูก่ บั การทาความเข้าใจ การใช้งาน ที่สับสน ด้วยเหตุน้ ีผอู ้ อกแบบจึงควรกาหนดปุ่ มการใช้งานที่ชดั เจน เหมาะสม โดยเฉพาะปุ่ มควบคุมเส้นทางการเข้าสู่ เนื้อหา (Navigation) ไม่วา่ จะเป็ นเดินหน้า ถอยหลัง หากเป็ นเว็บไซต์ที่มีเว็บเพจจานวนมาก ควรจะจัดทา แผนผังของเว็บไซต์ (Site Map) ที่ช่วยให้ผใู ้ ช้ทราบว่า ตอนนี้อยู่ ณ จุดใด หรื อเครื่ องมือสื บค้น (Search Engine) ที่ช่วยในการค้นหาหน้าที่ตอ้ งการ 3.การเชื่อมโยงที่ดี ลักษณะไฮเปอร์เท็กซ์ที่ใช้ในการเชื่อมโยง ควรอยูใ่ นรู ปแบบที่เป็ นมาตรฐาน ทัว่ ไป และต้องระวังเรื่ องของตาแหน่งในการเชื่อมโยง การที่จานวนการเชื่อมโยงมากและกระจัดกระจาย อยูท่ วั่ ไป ในหน้าอาจก่อให้เกิดความสับสน นอกจากนี้คาที่ใช้สาหรับการเชื่อมโยงจะต้องเข้าใจง่าย มีความชัดเจนและ ไม่ส้ นั จนเกินไป นอกจากนี้ในแต่ละเว็บเพจที่สร้างขึ้นมาควรมีจุดเชื่อมโยงกลับมายัง หน้าแรกของเว็บไซต์ ที่กาลังใช้งานอยูด่ ว้ ย ทั้งนี้เผือ่ ว่าผูใ้ ช้เกิดหลงทาง และไม่ทราบว่าจะทาอย่างต่อไปดี จะได้มีหนทางกลับมาสู่ จุดเริ่ มต้นใหม่ ระวังอย่าให้มีหน้าที่ไม่มีการเชื่อมโยง (Orphan Page) เพราะจะทาให้ผใู ้ ช้ไม่รู้จะทาอย่างไร ต่อไป 4.ความเหมาะสมในหน้าจอ เนื้อหาที่นาเสนอในแต่ละหน้าจอควรสั้น กระชับ และทันสมัย หลีกเลี่ยงการ ใช้หน้าจอที่มีลกั ษณะการเลื่อนขึ้นลง (Scrolling) แต่ถา้ จาเป็ นต้องมี ควรจะให้ขอ้ มูลที่มี ความสาคัญอยู่ บริ เวณด้านบนสุ ดของหน้าจอ หลีกเลี่ยงการใช้กราฟิ กด้านบนของหน้าจอ เพราะถึงแม้จะ ดูสวยงาม แต่จะ ทาให้ผใู ้ ช้เสี ยเวลาในการได้รับข้อมูลที่ตอ้ งการ แต่หากต้องมีการใช้ภาพประกอบก็ควรใช้เฉพาะที่มี ความสัมพันธ์กบั เนื้อหาเท่านั้น นอกจากนี้การใช้รูปภาพเพื่อเป็ นพื้นหลัง (Background) ไม่ควรเน้นสี สนั ที่ ฉูดฉาดมากนัก เพราะอาจจะไปลดความเด่นชัดของเนื้อหาลง ควรใช้ภาพที่มีสีอ่อน ๆ ไม่สว่างจนเกินไป รวมไปถึงการใช้เทคนิคต่าง ๆ เช่น ภาพเคลื่อนไหว หรื อตัวอักษรวิ่ง (Marquees) ซึ่งอาจจะเกิด การรบกวน การอ่านได้ ควรใช้เฉพาะที่จาเป็ นจริ ง ๆ เท่านั้นตัวอักษรที่นามาแสดงบนจอภาพควรเลือกขนาดที่อ่านง่าย ไม่มีสีสนั และลวดลายมากเกินไป 5.ความรวดเร็ ว ความรวดเร็ วเป็ นสิ่ งสาคัญประการหนึ่งที่ส่งผลต่อการเรี ยนรู ้ ผูใ้ ช้จะเกิดอาการ เบื่อหน่าย และหมดความสนใจกับเว็บที่ใช้เวลาในการแสดงผลนาน สาเหตุสาคัญที่จะทาให้ การแสดงผลนาน คือการ ใช้ภาพกราฟิ กหรื อภาพเคลื่อนไหว ซึ่งแม้วา่ จะช่วยดึงดูดความสนใจได้ดี ฉะนั้น ในการออกแบบจึงควร หลีกเลี่ยงการใช้ภาพขนาดใหญ่ หรื อภาพเคลื่อนไหวที่ไม่จาเป็ น และพยายามใช้กราฟิ กแทนตัวอักษร ธรรมดาให้นอ้ ยที่สุด โดยไม่ควรใช้มากเกินกว่า 2 - 3 บรรทัดในแต่ละหน้าจอ
# การออกแบบขนาดของเว็บเพจให้ พอดีกบั หน้ าจอ การออกแบบเว็บเพจที่ดีน้ นั ต้องคานึงถึงกลุ่มผูช้ มป้าหมายส่ วนใหญ่วา่ ใช้จอภาพที่มีความละเอียด (resolution) กี่พิกเซล และกาหนดว่าจะให้เว็บเพจของคุณแสดงผลได้ดีบนจอความละเอียด เท่าใด ความ ละเอียดของจอภาพที่ใช้กนั มากที่สุดในปัจจุบนั มีอยู่ 2 ระดับคือ • 1024 × 768 พิกเซล • 1280 × 800 หรื อ 1280 ×1024 พิกเซล หากออกแบบเว็บเพจสาหรับจอ 1024 × 768 พิกเซล ผูช้ มที่ใช้ขอ้ ความละเอียดเท่ากันนั้นก็จะสามารถชม เนื้อหาทั้งหมดได้พอดีเต็มจอภาพ แต่ถา้ ผูช้ มใช้จอความละเอียด 1280 ×1024 ขนาดของเว็บเพจ และ องค์ประกอบต่าง ๆ จะเล็กลงและแสดงไม่เต็มจอภาพในทางกลับกัน ถ้าคุณออกแบบเว็บเพจสาหรับจอ 1280 × 1024 พิกเซล ผูช้ มที่ใช้จอความละเอียดเท่านี้จะชมได้พอดีเต็มจอภาพแต่สาหรับผูช้ มที่ใช้จอความ ละเอียด 1024 × 768 หน้าเว็บเพจนี้จะล้นจอโดยประเด็นสาคัญที่สุดอยูท่ ี่ความกว้างของเว็บเพจซึ่งไม่ควร ออกแบบให้กว้างเกินจอภาพของผูช้ มเพราะจะทาให้ตอ้ งเลื่อนหน้าจอในแนวนอนเพื่อดูเนื้อหาที่ตกไป ซึ่ง ไม่สะดวกเป็ นอย่างยิง่ ส่ วนทางความสู งนั้นไม่เป็ นปัญหานัก แต่กค็ วรให้เนื้อหาที่สาคัญสามารถมองเห็นได้ ทันทีโดยผูช้ มไม่ตอ้ งเลื่อนจอลง
# การเลือกใช้ สีให้ เหมาะสม การใช้ สีในการออกแบบเว็บไซต์ การสร้างสี สนั บนหน้าเว็บเป็ นสิ่ งที่สื่อความหมายของเว็บไซต์ได้อย่างชัดเจน การเลือกใช้สีให้เหมาะสม กลมกลืน ไม่เพียงแต่จะสร้างความพึงพอใจให้กบั ผูใ้ ช้ แต่ยงั สามารถทาให้เห็นถึงความแตกต่างระหว่าง เว็บไซต์ได้ สี เป็ นองค์ประกอบหลักสาหรับการตกแต่งเว็บ จึงจาเป็ นอย่างยิง่ ที่จะต้องทาความเข้าใจเกี่ยวกับ การใช้สี ระบบสี ที่แสดงบนจอคอมพิวเตอร์ มีระบบการแสดงผลผ่านหลอดลาแสงที่เรี ยกว่า CRT (Cathode ray tube) โดยมีลกั ษณะระบบสี แบบบวก อาศัยการผสมของของแสงสี แดง สี เขียว และสี น้ าเงิน หรื อ ระบบ สี RGB สามารถกาหนดค่าสี จาก 0 ถึง 255 ได้ จากการรวมสี ของแม่สีหลักจะทาให้เกิดแสงสี ขาว มีลกั ษณะ เป็ นจุดเล็ก ๆ บนหน้าจอไม่สามารถมองเห็นด้วยตาเปล่าได้ จะมองเห็นเป็ นสี ที่ถูกผสมเป็ น เนื้อสี เดียวกัน แล้วจุดแต่ละจุดหรื อพิกเซล (Pixel) เป็ นส่ วนประกอบของภาพบนหน้าจอคอมพิวเตอร์ โดยจานวนบิตที่ใช้ ในการกาหนดความสามารถของการแสดงสี ต่าง ๆ เพื่อสร้างภาพบนจอนั้นเรี ยกว่า บิตเด็ป (Bit-depth) ใน ภาษา HTML มีการกาหนดสี ดว้ ยระบบเลขฐานสิ บหก ซึ่งมีเครื่ องหมาย (#) อยูด่ า้ นหน้าและตามด้วย เลขฐานสิ บหกจานวนอักษรอีก 6 หลัก โดยแต่ละไบต์ (byte) จะมีตวั อักษรสองตัว แบ่งออกเป็ น 3 กลุ่ม เช่น
#FF12AC การใช้ตวั อักษรแต่ละไบต์น้ ีเพื่อกาหนดระดับความเข้มของแม่สี แต่ละสี ของชุดสี RGB โดย 2 หลักแรก แสดงถึงความเข้มของสี แดง 2 หลักต่อมาแสดงถึงความเข้มของ สี เขียว 2 หลักสุ ดท้ายแสดงถึง ความเข้มของสี น้ าเงิน สี มีอิทธิพลในเรื่ องของอารมณ์การสื่ อความหมายที่เด่นชัด กระตุน้ การรับรู ้ทางด้าน จิตใจมนุษย์ สี แต่ละสี ให้ความรู ้สึก อารมณ์ที่ไม่เหมือนกัน สี บางสี ให้ความรู ้สึกสงบ บางสี ให้ความรู ้สึก ตื่นเต้นรุ นแรง สี จึงเป็ นปัจจัยสาคัญอย่างยิง่ ต่อการออกแบบเว็บไซต์ ดังนั้นการเลือกใช้โทนสี ภายในเว็บไซต์ เป็ นการแสดงถึงความแตกต่างของสี ที่แสดงออกทางอารมณ์ มีชีวิตชีวาหรื อเศร้าโศก รู ปแบบของสี ที่สายตา ของมนุษย์มองเห็น สามารถแบ่งออกเป็ น 3 กลุ่ม คือ 1.สี โทนร้อน (Warm Colors) เป็ นกลุ่มสี ที่แสดงถึงความสุ ข ความปลอบโยน ความอบอุ่น และดึงดูดใจ สี กลุ่มนี้เป็ นกลุ่มสี ที่ช่วยให้หายจากความเฉื่อยชา มีชีวิตชีวามากยิง่ ขึ้น 2.สี โทนเย็น (Cool Colors) แสดงถึงความที่ดูสุภาพ อ่อนโยน เรี ยบร้อย เป็ นกลุ่มสี ที่มีคนชอบ มากที่สุด สามารถโน้มนาวในระยะไกลได้ 3.สี โทนกลาง (Neutral Colors) สี ที่เป็ นกลาง ประกอบด้วย สี ดา สี ขาว สี เทา และสี น้ าตาล กลุ่มสี เหล่านี้ คือ สี กลางที่สามารถนาไปผสมกับสี อื่น ๆ เพื่อให้เกิดสี กลางขึ้นมา สิ่ งที่สาคัญต่อผูอ้ อกแบบเว็บคือการเลือกใช้สีสาหรับเว็บ นอกจากจะมีผลต่อการแสดงออกของเว็บแล้วยัง เป็ นการสร้างความรู ้สึกที่ดีต่อผูใ้ ช้บริ การ ดังนั้นจะเห็นว่าสี แต่ละสี สามารถสื่ อความหมายของเว็บได้อย่าง ชัดเจน ความแตกต่าง ความสัมพันธ์ที่เกิดขึ้นย่อมส่ งผลให้เว็บมีความน่าเชื่อถือมากยิง่ ขึ้น ชุดสี แต่ละชุดมี ความสาคัญต่อเว็บ ถ้าเลือกใช้สีไม่ตรงกับวัตถุประสงค์หรื อเป้าหมายอาจจะทาให้เว็บไม่น่าสนใจ ผูใ้ ช้บริ การจะไม่กลับมาใช้บริ การอีกภายหลัง ฉะนั้นการใช้สีอย่างเหมาะสมเพื่อสื่ อความหมายของเว็บ ต้อง เลือกใช้สีที่มีความกลมกลืนกัน โดยแต่ ละสี ให้ ความหมายและความรู้สึกทีต่ ่ างกันดังนี้ • สี สม้ เป็ นสี แห่งความสร้างสรรค์ อบอุ่น สดใส มีสติปัญญา ความทะเยอทะยาน • สี แดง เป็ นสี ที่กระตุน้ ระบบประสาทของเราได้รุนแรงที่สุด ให้ความรู ้สึกเร้าใจ ตื่นเต้น ท้าทาย ตื่นตัว • สี ชมพู ให้ความรู ้สึกอบอุ่น อ่อนโยน นุ่มนวล อ่อนหวาน ความรัก • สี เหลือง ให้ความรู ้สึกแจ่มใส ความสดใส ความอบอุ่น ความร่ าเริ ง ความสุ กสว่างใส • สี เขียว เป็ นสี ที่เด่นที่สุดบนโลก ให้ความรู ้สึกร่ มเย็น สบายตา ผ่อนคลาย ปลอดภัย ทาให้เกิด ความหวังและความสมดุล
• สี น้ าเงิน เป็ นสี ที่สร้างความสุ ขมุ เยือกเย็น หนักแน่นและละเอียดรอบคอบ น่าเชื่อถือ • สี ฟ้า เป็ นสี ที่ให้ความรู ้สึกสงบเยือกเย็น เป็ นอิสระ ปลอดโปร่ ง สบาย ปลอดภัย ใจเย็น สะอาด • สี ม่วง เป็ นสี แห่งผูร้ ู ้ ให้ความรู ้สึกมีเสน่ห์ น่าติดตาม เร้นลับ น่าค้นหา • สี ขาว ให้ความรู ้สึกบริ สุทธิ์ สะอาด สดใส เบาบาง อ่อนโยน • สี ทอง ให้ความรู ้สึกความหรู หรา โอ่อ่า มีราคา สง่างาม เป็ นต้น