• user warning: Table 'cache_filter' is marked as crashed and should be repaired query: SELECT data, created, headers, expire, serialized FROM cache_filter WHERE cid = '3:302b12a8f7e94895cdf2f91449e722df' in /home/tgv/htdocs/includes/cache.inc on line 27.
  • user warning: Table 'cache_filter' is marked as crashed and should be repaired query: UPDATE cache_filter SET data = '<!--paging_filter--><p align=\"center\">\n<span style=\"color: #ff0000\"><strong>ห้ามลบ</strong> </span><span style=\"color: #0610f8\">ขอให้เจ้าของผลงานประกวด แก้ไขข้อมูลได้จนถึงวันที่ 31 ธันวาคม 2551 เวลา 23.30 น.<br />\nหากเลยกำหนดเวลาดังกล่าวแล้ว ท่านเข้ามาแก้ไขข้อมูล ถือว่าโมฆะในการพิจารณาได้รับรางวัล<br />\nซึ่งระบบของ Thaigoodview สามารถตรวจสอบได้ว่า ผลงานแต่ละชิ้น มีการแก้ไขเวลาใดบ้าง</span> <br />\nครูพูนศักดิ์ สักกทัตติยกุล\n</p>\n<hr id=\"null\" />\n<p>\n<span style=\"font-size: large\"><b><span style=\"font-size: x-large\">การออกแบบเว็บไซต์</span></b></span></p>\n<p><span style=\"font-size: large\"><b>ความเข้าใจเบื้องต้นเกี่ยวกับอินเตอร์เน็ต</b></span></p>\n<p><span style=\"font-size: large\">อินเตอร์เน็ต เป็นการเชื่อมต่อเครือข่ายคอมพิวเตอร์ที่อยู่ในที่ต่างๆกัน ทั่วโลกเข้าด้วยกัน โดยมีข้อกำหนดว่าทุกเครื่องที่จะเชื่อมต่อกัน ต้องใช้มาตรฐานการเชื่อมต่อ (Protocol) ซึ่งเรียกว่า TCP/IP (Transmission Control Protocol/Internet Protocol) ผู้ใช้อินเตอร์เน็ต (User) จะเชื่อมต่อเครื่องคอมพิวเตอร์ของตนเอง ไปยังผู้ให้บริการที่เราเรียกว่า ISP (Internet Service Provider) ศูนย์บริการการเชื่อมต่อ (ISP) เหล่านี้จะเชื่อมต่อไปยังเครื่องคอมพิวเตอร์ที่เป็นเจ้าของเว็บไซต์ต่างๆ หรือเครื่องที่เป็นผู้ให้บริการรับฝากเว็บไซต์ เราเรียกเครื่อง<br />\nเหล่านี้ว่าเครื่องเซิร์ฟเวอร์ (Server) หรือโฮสท์ (Host) หรือเครื่องแม่ข่าย ผู้ออกแบบสร้างสรรค์เว็บไซต์    ที่ทำหน้าที่ดูแลและปรับปรุง  เว็บไซต์แต่ละเว็บไซต์ เราเรียกว่า เว็บมาสเตอร์ (Web Master) ซึ่งทำหน้าที่คล้ายบรรณาธิการของหนังสือพิมพ์<br />\n</span><br />\n<span style=\"font-size: large\">ในฐานะผู้ออกแบบเว็บไซต์ ซึ่งอาจเรียกว่าเป็น เว็บมาสเตอร์ เมื่อเราออกแบบเว็บไซต์ของเราเสร็จแล้ว        เราอาจเก็บเว็บไซต์นั้นไว้ในเครื่องคอมพิวเตอร์ของเรา ทำเครื่องนี้เป็น เครื่องเซิร์ฟเวอร์ เชื่อมต่อเข้าสู่ระบบอินเตอร์เน็ตเพื่อให้คนอื่นๆ   เข้ามาชมเว็บไซต์ของเราผ่านระบบเครือข่ายได้ ซึ่งอาจต้องเปิดเครื่องเซิร์ฟเวอร์นี้ไว้ตลอด 24 ชั่วโมงถ้าต้องการ(ในกรณีนี้ เราต้องจดทะเบียนชื่อเว็บไซต์ของเรา) หรือนำเว็บไซต์ของเราที่ออกแบบเสร็จแล้วไปฝากยังเครื่องเซิร์ฟเวอร์อื่นๆได้แก่เครื่องขององค์กรต้นสังกัดเช่น    สำนักงานเขตพื้นที่การศึกษา(สพท.) สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน(สพฐ.) บริษัทเอกชนอื่นๆที่มีทั้งให้บริการฟรีและเสียค่าบริการ   แบบนี้เราไม่ต้องทำเครื่องเราให้เป็นเซิร์ฟเวอร์และเปิด 24 ชั่วโมง ซึ่งเครื่องของต้นสังกัด หรือบริษัทเอกชนที่กล่าวแล้ว     ส่วนใหญ่จะเป็นเครื่องที่มีสมรรถภาพเหมาะสมจะเป็นเครื่องเซิร์ฟเวอร์<br />\nในฐานะผู้ใช้ (User) เมื่อเราจะเชื่อมต่อเข้าสู่ระบบอินเตอร์เน็ต เราจะเชื่อมต่อไปยัง ISP ที่เราเป็นสมาชิกอยู่เช่น TOT, CS, KSC ฯลฯ เมื่อเราต้องการเข้าไปเยี่ยมชมเว็บไซต์ใดๆ หรือแม้แต่เว็บไซต์ของเราเอง ISP จะเชื่อมต่อเครื่องคอมพิวเตอร์ของเราไปยังเซิร์ฟเวอร์ที่เก็บเว็บไซต์นั้นๆอยู่</span></p>\n<p>\n  <span style=\"font-size: large\"><b>ความเข้าใจพื้นฐานเกี่ยวกับเว็บไซต์</b></span></p>\n<p>     <span style=\"font-size: large\">เว็บไซต์ พัฒนามาจากเอกสารอิเล็กทรอนิกส์ ที่ใช้รูปแบบการเชื่อมโยงแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)<br />\nถ้าเปรียบเว็บไซต์เป็นหนังสือเล่มหนึ่ง เว็บไซต์ จะมีองค์ประกอบดังนี้<br />\n<span style=\"font-size: large\"><br />\n1. โฮมเพจ (Home Page)  คือหน้าแรกของเว็บไซต์  จะทำหน้าที่คล้ายหน้าปกหนังสือ  คำนำ  คำชี้แจงและสารบัญ  ดังนั้นในหน้าโฮมเพจจึงประกอบด้วยชื่อเว็บไซต์ สัญลักษณ์ คำแนะนำเว็บไซต์และการเชื่อมโยงไปยังหน้าอื่นๆ ในเว็บไซต์นั้นๆ</span></span> </p>\n<p><span style=\"font-size: large\">2. เว็บเพจ (Web Page) คือหน้าของเว็บที่บรรจุเนื้อหาต่างๆเหมือนเนื้อหาของหนังสือ           แต่ออกแบบเป็นลักษณะของเอกสารอิเล็กทรอนิกส์ที่สามารถเชื่อมโยงไปยังหน้าเอกสารต่างๆ ที่ต้องการโดยใช้รูปแบบการเชื่อมโยงแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)</span></p>\n<p><span style=\"font-size: large\">3. เว็บไซต์ (Web site) คือการรวมเอาหน้าเว็บเพจหลายๆ หน้าไว้ด้วยกัน โดยมีโฮมเพจเป็นหน้าปก เว็บไซต์จะมีชื่อต่างๆ กันไปเช่น <a href=\"http://WWW.esanpt1.org\" title=\"WWW.esanpt1.org\">WWW.esanpt1.org</a> เป็นเว็บไซต์ของสำนักงานเขตพื้นที่การศึกษานครปฐมเขต 1 เป็นต้น</span></p>\n<p>\n</p>\n<div align=\"center\">\n<img height=\"128\" width=\"199\" src=\"http://www.esanpt1.go.th/nites/academy/images/web%20page.gif\" />\n</div>\n<p>\n<span style=\"font-size: large\">โครงสร้างของเว็บ (Web Structure)</span></p>\n<p><span style=\"font-size: large\">ถ้าเราเข้าไปใช้เว็บไซต์ทั่วๆไปในปัจจุบันนี้จะพบว่า แต่ละเว็บไซต์ จะมีรูปแบบโครงสร้างที่แตกต่างกัน   ดูเหมือนว่าจะขึ้นอยู่กับความถนัดและความนิยมของผู้ออกแบบเว็บไซต์เป็นหลักอย่างไรก็ตาม ลินช์และฮอร์ตัน (Lynch and Horton, 1999) จ ึงได้เสนอแนวคิดสำหรับการออกแบบเว็บไซต์ว่า        การออกแบบเว็บไซต์ที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุล    มีการเชื่อมต่อสัมพันธ์กัน ระหว่างรายการ (Menu)หรือโฮมเพจ กับหน้าเนื้อหาอื่นๆ รวมถึงการเชื่อมโยงไปสู่ภาพและข้อความต่างๆ โดยต้องวางแผนโครงสร้างให้ดี     เพื่อป้องกันอุปสรรคที่จะเกิดต่อผู้ใช้ เช่น การหลงทางของผู้ใช้ ในขณะ เข้าสู่เนื้อหาในจุดร่วม (Node) ต่างๆ เป็นต้น จากหลักการนี้แสดงว่าโครงสร้างของเว็บไซต์เป็นส่วนที่ควรให้ความสำคัญ โครงสร้างที่ดีจะช่วยส่งผลที่ดีต่อผู้ใช้ เพราะข้อมูลที่มีอยู่มากมายนั้นต้องอาศัย การเชื่อมโยงเนื้อหา หรือการจัดระเบียบของเนื้อหาให้กับการสืบค้นภายในเว็บไซต์ การจัดระเบียบที่ดี จะช่วยให้ผู้ใช้มีความสะดวก ในขณะเดียวกันโครงสร้างที่ไม่ เหมาะสมก็ย่อมส่งผลเสียต่อผู้ใช้เช่นกัน ในที่นี้ จะขอนำเสนอรูปแบบโครงสร้างของเว็บไซต์ตามแนวคิดของ Lynch and Horton ดังนี้<br />\n</span>\n</p>\n<p>\n<span style=\"font-size: large\"><span style=\"font-size: large\">1. โครงสร้างแบบเรียงลำดับ (Sequential Structure) เป็นโครงสร้างที่ใช้เก็บข้อมูลที่เป็นเรื่องราวตามลำดับเวลา     หรือดำเนินเนื้อหาไปตามลำดับ หรือจากเรื่องทั่วๆไป กว้างๆ ไปสู่เรื่องที่จำเพาะเจาะจงมากขึ้น หรือ มีรายละเอียดมากขึ้น หรือการเรียงลำดับตามตัวอักษร อาทิ ดรรชนี สารานุกรม หรืออภิธานศัพท์ อย่างไรก็ตามโครงสร้างแบบนี้ เหมาะกับเว็บที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อน เหมือนการอ่านหนังสือเรียงลำดับไปทีละหน้า ดังรูป</span></span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"136\" width=\"374\" src=\"http://www.esanpt1.go.th/nites/academy/images/sequential.gif\" />\n</div>\n<p>\n<span style=\"font-size: large\">    ภายในเว็บไซต์ จะดำเนินเรื่องไปในลักษณะเส้นตรง โดยมีปุ่มเดินหน้า ถอยหลังเป็นเครื่องมือหลักที่ เริ่มจากหน้าเริ่มต้น (Start Page) ซึ่งโดย ปกติเป็นหน้าต้อนรับหรือแนะนำให้ผู้ใช้ทราบถึงรายละเอียดของเว็บ รวมทั้งอธิบายให้ทราบถึงวิธีการ เข้าสู่เนื้อหาและการใช้งานของปุ่มต่างๆ เมื่อผู้ใช้ผ่านจากหน้าเริ่มต้นเข้าไปสู่ภายในจะพบกับหน้าเนื้อหา (Topic Page) ต่างๆ โดยในแต่ละหน้า    หากมีเนื้อหาที่ซับซ้อนเกินกว่าหนึ่งหน้าก็สามารถเพิ่มเติม รายละเอียดเนื้อหาโดยจัดทำเป็นหน้าเนื้อหาย่อย (Sub Topic) และทำการเชื่อมโยงกับหน้าเนื้อหา หลักนั้นๆ ซึ่งหน้าเนื้อหาย่อยเหล่านี้มีลักษณะเป็นหน้าเดี่ยว  ที่เมื่อเข้าไปดูรายละเอียดของเนื้อหา แล้ว ต้องกลับมายังหน้าหลักหน้าเดิมเท่านั้น ไม่สามารถข้ามไปยังเนื้อหาอื่นๆ ได้ และเมื่อผู้ใช้ ผ่านไป   จนจบเนื้อหาทั้งหมดแล้วก็จะมาถึงหน้าสุดท้าย (End Page) ซึ่งอาจจะเป็นหน้าที่ใช้สรุปเนื้อหาทั้งหมด การเชื่อมโยงระหว่างหน้าแต่ละหน้าใช้ลักษณะของการใช้ปุ่มหน้าต่อไป (Next Topic) เพื่อ เดินหน้าไปสู่หน้าต่อไป ปุ่มหน้าที่แล้ว (Previous Topic) เพื่อต้องการกลับไปสู่หน้าที่ผ่านมา   ในส่วน ของการเข้าไปสู่หน้าเนื้อหาย่อยอาจใช้ลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ที่ทำไว้ในหน้าเนื้อหา หลักเชื่อมโยงไปสู่หน้าเนื้อหาย่อย และใช้ปุ่มกลับมายังหน้าหลัก (Main Topic) ในกรณีที่อยู่ในหน้า เนื้อหาย่อย และต้องการกลับไปยังหน้าเนื้อหาหลักดังรูป</span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"225\" width=\"373\" src=\"http://www.esanpt1.go.th/nites/academy/images/sub%20topic.gif\" />\n</div>\n<p>\n<span style=\"font-size: large\">    ข้อดีของโครงสร้างประเภทนี้คือ ง่ายต่อผู้ออกแบบ ในการจัดระบบโครงสร้าง และง่ายต่อการปรับปรุงแก้ไข     เนื่องจากมีโครงสร้างที่ไม่ซับซ้อน การเพิ่มเติมเนื้อหาเข้าไปสามารถทำได้ง่าย เพราะมีผลกระทบต่อบางส่วนของโครงสร้างเท่านั้น แต่ข้อเสียของ โครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ในกรณีที่ต้องการ    เข้าไปสู่เนื้อหาเพียงหน้าใดหน้าหนึ่งนั้นจำเป็นต้องผ่านหน้าที่ไม่ต้องการหลายหน้าเพื่อไปสู่หน้าที่ต้องการ ทำให้เสียเวลา ซึ่งปัญหานี้อาจแก้ไขโดยการเพิ่มส่วนที่เป็นหน้าสารบัญ (Index Page) ซึ่งประกอบด้วย รายชื่อของหน้าเนื้อหาทุกหน้า  ที่มีในเว็บและสามารถเชื่อมโยงไปสู่หน้านั้นๆ โดยการคลิกเมาส์ที่ชื่อ ของหน้าที่ผู้ใช้ต้องการ เข้าไปไว้ในหน้าเนื้อหาแต่ละหน้า เพื่อทำหน้าที่เป็นเครื่องมือช่วยเพิ่มความ ยืดหยุ่นในการเข้าสู่เนื้อหาแก่ผู้ใช้ ดังรูป</span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"219\" width=\"466\" src=\"http://www.esanpt1.go.th/nites/academy/images/index%20page.GIF\" /><br />\n<span style=\"font-size: large\">    </span>\n</div>\n<p>\n<span style=\"font-size: large\">   2. มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) เป็นโครงสร้างที่มีแนวคิดเดียวกับ แผนภูมิองค์กร เนื่องจากผู้ใช้ส่วนใหญ่จะคุ้นเคยกับลักษณะของแผนภูมิแบบองค์กรทั่วๆ ไปอยู่แล้ว      จึงเป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหาในเว็บไซต์ลักษณะนี้ เว็บไซต์ประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหา   ในลักษณะเป็นลำดับจากบนลงล่าง ดังภาพ</span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"509\" width=\"425\" src=\"http://www.esanpt1.go.th/nites/academy/images/hierachical.GIF\" />\n</div>\n<p>\n<span style=\"font-size: large\">จากภาพ จะเห็นได้ว่า จากหน้า Home page จะแบ่งเนื้อหาออกเป็น 5 กลุ่มเนื้อหาย่อย โดยหน้าแรกของกลุ่มเนื้อหาย่อยนั้น เรียกว่า Start page ในหน้า Start page นี้ จะเป็นคำอธิบาย ชี้แจง บอกหัวข้อหรือรายละเอียดของเนื้อหาในกลุ่มเนื้อหาย่อย เมื่อผู้ชมเข้าไปสู่เนื้อหาย่อยโดยใช้ปุ่มหน้าต่อไป หรือหน้าที่แล้ว (Next/Previous Topic) ในการดูเนื้อหาย่อยทีละหน้า เมื่อถึงหน้าสุดท้ายก็ใช้ปุ่มกลับขึ้นไปสู่หน้าเนื้อหาหลัก (Up to Start page) ในกรณีที่มีการแบ่งเนื้อหาย่อยเป็นส่วนต่างๆ ควรจัดระบบเนื้อหาของส่วนนั้นๆ ในลักษณะโครงสร้างแบบลำดับขั้นอีกชั้นหนึ่ง เช่น หน้า Topic Page 5.2 อาจแยกย่อยเนื้อหาในรายละเอียดเพิ่มเติมอีกก็สามารถทำหน้า Sub Topic Page 5.2.1 และ Sub Topic Page 5.2.2ได้ จากนั้นก็กำหนดลักษณะการเข้าสู่เนื้อหาในลักษณะเดียวกับที่กล่าวมาแล้ว   และสุดท้าย เมื่อกลับจากดูเนื้อหาย่อยมาที่หน้าแรกของเนื้อหาหลักแล้ว ก็จะมีปุ่มกลับไปหน้าโฮมเพจ (Home Page)    เมื่อต้องการกลับไปที่หน้าโฮมเพจเพื่อเลือกเนื้อหาหลักส่วนต่อไป ข้อดีของโครงสร้างรูปแบบนี้ก็คือ ง่ายต่อการแยกแยะเนื้อหาของผู้ใช้และจัดระบบข้อมูล ของผู้ออกแบบ นอกจากนี้สามารถดูแลและปรับปรุงแก้ไขได้ง่ายเนื่องจากมีการแบ่งเป็นหมวดหมู่ ที่ชัดเจน  ส่วนข้อเสียคือในส่วนของการออกแบบโครงสร้างต้องระวังอย่าให้โครงสร้างที่ไม่สมดุล นั่นคือ มีลักษณะที่ลึกเกินไป (Too Deep) หรือตื้นเกินไป (Too Shallow)      ทำให้โครงสร้างของเว็บไม่สมดุล ต้องปรับหน้าให้เหมาะเช่นเนื้อหา  ที่ลึกไปอาจต้องจัดทำหน้าเมนูเพิ่ม หรือเพิ่มการเชื่อมโยงกลับหน้าหลักได้ง่าย ถ้าเนื้อหาตื้นเกินไป อาจยุบรวมเนื้อหาบ้าง</span></p>\n<p><span style=\"font-size: large\">3. โครงสร้างแบบตาราง (Grid Structure) เป็นโครงสร้างที่มีความยืดหยุ่นสำหรับผู้ใช้ ทุกๆเนื้อหามีความสำคัญเท่าๆ กัน หรือเป็นเนื้อหาย่อยๆ เหมือนกันและมีลักษณะร่วมกัน ดังนั้น ทุกๆ เนื้อหาจึงเชื่อมโยงถึงกันได้ ตามที่ผู้ใช้ต้องการ เช่นเว็บไซต์แนะนำ แหล่งท่องเที่ยวของอำเภอต่างๆ ในจังหวัดนครปฐม อาจออกแบบเว็บไซต์ดังนี้</span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"444\" width=\"490\" src=\"http://www.esanpt1.go.th/nites/academy/images/grid.GIF\" />\n</div>\n<p>\n<span style=\"font-size: large\">ในการจัดหน้าเว็บไซต์นี้ หน้าแรก หรือหน้าโฮมเพจ (Home Page) จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงให้เห็นโครงสร้างของเว็บ ที่ประกอบด้วยชื่ออำเภอทั้ง 7 อำเภอ และแหล่งท่องเที่ยว 3 ลักษณะ คือแหล่งท่องเที่ยวทางวัฒนธรรม (1) แหล่งท่องเที่ยวทางธรรมชาติ (2) หรือแหล่งท่องเที่ยวทางโบราณคดี (3) ดังนี้ </span>\n</p>\n<div align=\"center\">\n<img height=\"201\" width=\"444\" src=\"http://www.esanpt1.go.th/nites/academy/images/jangwat.gif\" /><span style=\"font-size: large\">  </span>\n</div>\n<p>\n<span style=\"font-size: large\"><br />\nเมื่อคลิกเข้าไปในชื่ออำเภอแต่ละอำเภอ จะเป็นหน้าแรกของอำเภอนั้นๆ เช่นอำเภอเมืองฯ เชื่อมโยงไปยังแหล่งท่องเที่ยวทางวัฒนธรรม (1) แหล่งท่องเที่ยวทางธรรมชาติ (2)หรือแหล่งท่องเที่ยวทางโบราณคดี (3)</span>\n</p>\n<div align=\"center\">\n<img height=\"164\" width=\"186\" src=\"http://www.esanpt1.go.th/nites/academy/images/amper.gif\" />\n</div>\n<p>\n<span style=\"font-size: large\"><br />\nเมื่อผู้ใช้คลิกเลือก แหล่งท่องเที่ยวทางธรรมชาติ (2) ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page2/1)          ก็จะแสดงรายละเอียดของแหล่งท่องเที่ยวทางธรรมชาติของอำเภอเมือง เป็นต้น ส่วนการเชื่อมโยงอื่นๆ ผู้ออกแบบสามารถให้เชื่อมโยงถึงกันทุกหน้า  หรือกลับหน้าหลักของแต่ละอำเภอ</span></p>\n<p><span style=\"font-size: large\">4. โครงสร้างแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วยตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีความคิดรวบยอด (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ดังรูป</span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n</span>\n</p>\n<div align=\"center\">\n<img height=\"342\" width=\"356\" src=\"http://www.esanpt1.go.th/nites/academy/images/web%20structure.gif\" />\n</div>\n<div align=\"center\">\n<span style=\"font-size: large\"></span><br />\n \n</div>\n<p>\n<span style=\"font-size: large\">    นอกจากการเชื่อมโยงภายในเว็บนั้นๆแล้ว ยังสามารถเชื่อมโยง  ออกไปสู่เนื้อหาจากเว็บภายนอกได้ ในหน้า Web page แต่ละหน้าจะรวบรวมคำสำคัญของเนื้อหา วางไว้ในส่วนใดส่วนหนึ่งของหน้านั้น  เพื่อทำเป็นไฮเปอร์ลิงค์(Hyperlink) ไปยังหน้าที่บรรจุรายละเอียดของเรื่องดังกล่าว  ข้อดีของรูปแบบนี้คือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บโดยผู้ใช้สามารถกำหนดทิศทาง การเข้าสู่เนื้อหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่มเนื้อหาใหม่ๆ อยู่เสมอจะเป็นการยากในการ ปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อมูลที่มีมากมายนั้นอาจทำให้ผู้ใช้เกิดการสับสนได้<br />\n<span style=\"font-size: large\"><br />\n<b>การจัดองค์ประกอบภาพ</b></span> </span></p>\n<p><span style=\"font-size: large\">จากบทความก่อนหน้านี่มาจนถึงบทความนี้ก็ไกล้ที่จะจบเรื่องของพื้นฐานการออก แบบแล้วนะครับ ซึ่งในบทนี้ก็เปรียบเหมือนกับว่าเราเอาความรู้จากบทก่อนๆมาประกอบกันนั้นเอง โดยมีหลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่</span></p>\n<p><span style=\"font-size: large\">1. การสร้างเอกภาพ<br />\n2. การสร้างจุดเด่น เน้นจุดสำคัญ</span></p>\n<p><span style=\"font-size: large\"><b>เอกภาพ</b><br />\nอาจจะงงว่ามันคืออะไรอธิบายง่ายๆ ก็คือ ความเป็นอันหนึ่งอันเดียวกัน ความเป็นพวกเดียวกัน ภายในงานนั้นเอง งานที่มีเอกภาพนั้นจะทำให้ผู้ที่ดูงานของเรานั้นเข้าใจงานของเราได้ง่าย ดูแล้วมีความเป็นพวกเดียวกันอยู่ในงาน ส่วนงานที่ไม่มีความเป็นเอกภาพนั้นผู้ที่ดูงานของเราจะเกิดความขัดแย้งขึ้น ในใจทำให้ปฏิเสธงานที่ดูได้<br />\nส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่ด้วยกัน 3 ข้อ ได้แก่<br />\n1. สร้างความใกล้ชิดให้กับองค์ประกอบ<br />\nวิธี ที่ง่ายที่สุดก็คือการจัดวางองค์ประกอบให้มีความเหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เองว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัดองค์ประกอบ</span>\n</p>\n<p align=\"center\">\n<img height=\"100\" width=\"200\" src=\"http://angleblog.exteen.com/images/002.gif\" />\n</p>\n<div align=\"center\">\n\n</div>\n<p>\n<span style=\"font-size: large\">2. สร้างความซ้ำกันขององค์ประกอบ<br />\nการจัดองค์ประกอบโดยการใช้วิธีการทำซ้ำกันไปเรื่อยๆไม่ว่าจะเป็นเส้น จุด สี หรือรูปลักษณะอื่นๆ จะทำให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทำให้เกิดความเป็นเอกภาพขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานที่ทำเป็นเส้นพริ้วๆหลายๆเส้น ซ้ำกันไปซ้ำกันมา </span>\n</p>\n<p>\n<span style=\"font-size: large\"><br />\n3. สร้างความต่อเนื่องขององค์ประกอบ<br />\nความต่อเนื่องเราจะสร้างมาจากเส้น หรือทิศทางขององค์ประกอบที่อยู่ภายในงานของเรา ซึ่งจะนำสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กำหนด และเกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่องเป็นราวเดียวกันและเป็นลำดับขั้น และจะทำให้เกิดเป็นเรื่องราวขึ้นในใจของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนำมาใช้ในการบังคับสายตาของผู้ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสำคัญได้ ลองหาดูตามป้ายโฆษณาเอานะครับ ที่เวลาเราดูที่รูปแล้วจะไปจบที่จุดสุดท้ายเป็นพวก Logo หรือ สินค้า ที่ต้องการจะโฆษณา</span></p>\n<p><span style=\"font-size: large\"><b>เสริมจุดเด่น เน้นจุดสำคัญ</b></span></p>\n<p><span style=\"font-size: large\">จุดเด่นจะทำให้ผู้ชมสามารถที่จะจับประเด็นในความหมายของงานที่เราต้องการจะสื่อได้ โดยมีหลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่<br />\n1. การวางจุดสนใจในงาน<br />\nหลัก การนี้ถือว่าเป็นหลักการที่สำคัญหลักการหนึ่ง สิ่งที่สำคัญก็คือเราต้องรู้ว่าเราต้องการที่จะเน้นอะไรในงานของเรา แล้วก็วางสิ่งที่เราให้ความสำคัญไว้ในตำแหน่งที่สำคัญ</span><br />\n\n</p>\n<div align=\"center\">\n<img height=\"300\" width=\"300\" src=\"http://angleblog.exteen.com/images/003.gif\" />\n</div>\n<p>\n<span style=\"font-size: large\">จากรูปหมายเลข 1 คือต่ำแหน่งที่สำคัญที่สุดไล่มาจนถึงหมายเลข 5 คือตำแหน่งที่มีความสำคัญน้อยที่สุด</span></p>\n<p><span style=\"font-size: large\">2. การสร้างความแตกต่างในงาน<br />\nการสร้างความแตกต่างจะเป็นตัวกำหนดความน่าสนใจและความโดดเด่นในงานของเราได้ ดี แต่ก็อย่าให้มันหลุดกรอบไปจะทำให้ขาดเอกภาพได้นะครับนี่คือข้อควรระวังอีก ข้อหนึ่ง<br />\nหลักในการสร้างความแตกต่างมีง่ายๆดังนี้<br />\n- การสร้างขนาดที่แตกต่าง<br />\n- ความแตกต่างกันที่รูปร่างขององค์ประกอบ<br />\n- รูปลักษณ์หรือลักษณ์ที่แตกต่าง<br />\n<span style=\"font-size: large\"><br />\n3. การวางแยกองค์ประกอบให้โดดเด่น<br />\nพูดง่ายๆก็คือ วางให้โดด และเด่น กว่าคนอื่น</span></span></p>\n<p><span style=\"font-size: large\">สรุป</span></p>\n<p><span style=\"font-size: large\">จากแนวคิดเกี่ยวกับการออกแบบเว็บไซต์ และตัวอย่างโครงสร้างของเว็บไซต์ที่นำเสนอมานี้  อาจเป็นเพียงบางส่วนของพื้นฐานในการออกแบบเว็บไซต์เท่านั้น ผู้ที่สนใจ ควรศึกษาตัวอย่างของเว็บไซต์ที่น่าสนใจ ในด้านการออกแบบโครงสร้าง     การออกแบบในเชิงศิลปะตกแต่ง และการออกแบบในเชิงจิตวิทยาการรับรู้เพิ่มเติม จะช่วยให้ท่านเป็นนักออกแบบเว็บไซต์ที่ดีต่อไป</span> \n</p>\n<p>\n<span style=\"font-size: large\"><br />\nแหล่งอ้างอิง</span>\n</p>\n<p>\n<span style=\"font-size: large\">http://www.esanpt1.go.th/nites/academy/web%20design.htm</span>\n</p>\n<p>\n<span style=\"font-size: large\">http://angleblog.exteen.com/20060328/entry-1</span>\n</p>\n', created = 1726514081, expire = 1726600481, headers = '', serialized = 0 WHERE cid = '3:302b12a8f7e94895cdf2f91449e722df' in /home/tgv/htdocs/includes/cache.inc on line 112.

การออกแบบเว็บไซต์

ห้ามลบ ขอให้เจ้าของผลงานประกวด แก้ไขข้อมูลได้จนถึงวันที่ 31 ธันวาคม 2551 เวลา 23.30 น.
หากเลยกำหนดเวลาดังกล่าวแล้ว ท่านเข้ามาแก้ไขข้อมูล ถือว่าโมฆะในการพิจารณาได้รับรางวัล
ซึ่งระบบของ Thaigoodview สามารถตรวจสอบได้ว่า ผลงานแต่ละชิ้น มีการแก้ไขเวลาใดบ้าง

ครูพูนศักดิ์ สักกทัตติยกุล


การออกแบบเว็บไซต์

ความเข้าใจเบื้องต้นเกี่ยวกับอินเตอร์เน็ต

อินเตอร์เน็ต เป็นการเชื่อมต่อเครือข่ายคอมพิวเตอร์ที่อยู่ในที่ต่างๆกัน ทั่วโลกเข้าด้วยกัน โดยมีข้อกำหนดว่าทุกเครื่องที่จะเชื่อมต่อกัน ต้องใช้มาตรฐานการเชื่อมต่อ (Protocol) ซึ่งเรียกว่า TCP/IP (Transmission Control Protocol/Internet Protocol) ผู้ใช้อินเตอร์เน็ต (User) จะเชื่อมต่อเครื่องคอมพิวเตอร์ของตนเอง ไปยังผู้ให้บริการที่เราเรียกว่า ISP (Internet Service Provider) ศูนย์บริการการเชื่อมต่อ (ISP) เหล่านี้จะเชื่อมต่อไปยังเครื่องคอมพิวเตอร์ที่เป็นเจ้าของเว็บไซต์ต่างๆ หรือเครื่องที่เป็นผู้ให้บริการรับฝากเว็บไซต์ เราเรียกเครื่อง
เหล่านี้ว่าเครื่องเซิร์ฟเวอร์ (Server) หรือโฮสท์ (Host) หรือเครื่องแม่ข่าย ผู้ออกแบบสร้างสรรค์เว็บไซต์    ที่ทำหน้าที่ดูแลและปรับปรุง  เว็บไซต์แต่ละเว็บไซต์ เราเรียกว่า เว็บมาสเตอร์ (Web Master) ซึ่งทำหน้าที่คล้ายบรรณาธิการของหนังสือพิมพ์

ในฐานะผู้ออกแบบเว็บไซต์ ซึ่งอาจเรียกว่าเป็น เว็บมาสเตอร์ เมื่อเราออกแบบเว็บไซต์ของเราเสร็จแล้ว        เราอาจเก็บเว็บไซต์นั้นไว้ในเครื่องคอมพิวเตอร์ของเรา ทำเครื่องนี้เป็น เครื่องเซิร์ฟเวอร์ เชื่อมต่อเข้าสู่ระบบอินเตอร์เน็ตเพื่อให้คนอื่นๆ   เข้ามาชมเว็บไซต์ของเราผ่านระบบเครือข่ายได้ ซึ่งอาจต้องเปิดเครื่องเซิร์ฟเวอร์นี้ไว้ตลอด 24 ชั่วโมงถ้าต้องการ(ในกรณีนี้ เราต้องจดทะเบียนชื่อเว็บไซต์ของเรา) หรือนำเว็บไซต์ของเราที่ออกแบบเสร็จแล้วไปฝากยังเครื่องเซิร์ฟเวอร์อื่นๆได้แก่เครื่องขององค์กรต้นสังกัดเช่น    สำนักงานเขตพื้นที่การศึกษา(สพท.) สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน(สพฐ.) บริษัทเอกชนอื่นๆที่มีทั้งให้บริการฟรีและเสียค่าบริการ   แบบนี้เราไม่ต้องทำเครื่องเราให้เป็นเซิร์ฟเวอร์และเปิด 24 ชั่วโมง ซึ่งเครื่องของต้นสังกัด หรือบริษัทเอกชนที่กล่าวแล้ว     ส่วนใหญ่จะเป็นเครื่องที่มีสมรรถภาพเหมาะสมจะเป็นเครื่องเซิร์ฟเวอร์
ในฐานะผู้ใช้ (User) เมื่อเราจะเชื่อมต่อเข้าสู่ระบบอินเตอร์เน็ต เราจะเชื่อมต่อไปยัง ISP ที่เราเป็นสมาชิกอยู่เช่น TOT, CS, KSC ฯลฯ เมื่อเราต้องการเข้าไปเยี่ยมชมเว็บไซต์ใดๆ หรือแม้แต่เว็บไซต์ของเราเอง ISP จะเชื่อมต่อเครื่องคอมพิวเตอร์ของเราไปยังเซิร์ฟเวอร์ที่เก็บเว็บไซต์นั้นๆอยู่

  ความเข้าใจพื้นฐานเกี่ยวกับเว็บไซต์

     เว็บไซต์ พัฒนามาจากเอกสารอิเล็กทรอนิกส์ ที่ใช้รูปแบบการเชื่อมโยงแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)
ถ้าเปรียบเว็บไซต์เป็นหนังสือเล่มหนึ่ง เว็บไซต์ จะมีองค์ประกอบดังนี้

1. โฮมเพจ (Home Page)  คือหน้าแรกของเว็บไซต์  จะทำหน้าที่คล้ายหน้าปกหนังสือ  คำนำ  คำชี้แจงและสารบัญ  ดังนั้นในหน้าโฮมเพจจึงประกอบด้วยชื่อเว็บไซต์ สัญลักษณ์ คำแนะนำเว็บไซต์และการเชื่อมโยงไปยังหน้าอื่นๆ ในเว็บไซต์นั้นๆ

2. เว็บเพจ (Web Page) คือหน้าของเว็บที่บรรจุเนื้อหาต่างๆเหมือนเนื้อหาของหนังสือ           แต่ออกแบบเป็นลักษณะของเอกสารอิเล็กทรอนิกส์ที่สามารถเชื่อมโยงไปยังหน้าเอกสารต่างๆ ที่ต้องการโดยใช้รูปแบบการเชื่อมโยงแบบไฮเปอร์ลิงค์หรือไฮเปอร์มีเดีย (Hyperlink/Hypermedia)

3. เว็บไซต์ (Web site) คือการรวมเอาหน้าเว็บเพจหลายๆ หน้าไว้ด้วยกัน โดยมีโฮมเพจเป็นหน้าปก เว็บไซต์จะมีชื่อต่างๆ กันไปเช่น WWW.esanpt1.org เป็นเว็บไซต์ของสำนักงานเขตพื้นที่การศึกษานครปฐมเขต 1 เป็นต้น

โครงสร้างของเว็บ (Web Structure)

ถ้าเราเข้าไปใช้เว็บไซต์ทั่วๆไปในปัจจุบันนี้จะพบว่า แต่ละเว็บไซต์ จะมีรูปแบบโครงสร้างที่แตกต่างกัน   ดูเหมือนว่าจะขึ้นอยู่กับความถนัดและความนิยมของผู้ออกแบบเว็บไซต์เป็นหลักอย่างไรก็ตาม ลินช์และฮอร์ตัน (Lynch and Horton, 1999) จ ึงได้เสนอแนวคิดสำหรับการออกแบบเว็บไซต์ว่า        การออกแบบเว็บไซต์ที่ดีควรจะต้องวางโครงสร้างให้มีความสมดุล    มีการเชื่อมต่อสัมพันธ์กัน ระหว่างรายการ (Menu)หรือโฮมเพจ กับหน้าเนื้อหาอื่นๆ รวมถึงการเชื่อมโยงไปสู่ภาพและข้อความต่างๆ โดยต้องวางแผนโครงสร้างให้ดี     เพื่อป้องกันอุปสรรคที่จะเกิดต่อผู้ใช้ เช่น การหลงทางของผู้ใช้ ในขณะ เข้าสู่เนื้อหาในจุดร่วม (Node) ต่างๆ เป็นต้น จากหลักการนี้แสดงว่าโครงสร้างของเว็บไซต์เป็นส่วนที่ควรให้ความสำคัญ โครงสร้างที่ดีจะช่วยส่งผลที่ดีต่อผู้ใช้ เพราะข้อมูลที่มีอยู่มากมายนั้นต้องอาศัย การเชื่อมโยงเนื้อหา หรือการจัดระเบียบของเนื้อหาให้กับการสืบค้นภายในเว็บไซต์ การจัดระเบียบที่ดี จะช่วยให้ผู้ใช้มีความสะดวก ในขณะเดียวกันโครงสร้างที่ไม่ เหมาะสมก็ย่อมส่งผลเสียต่อผู้ใช้เช่นกัน ในที่นี้ จะขอนำเสนอรูปแบบโครงสร้างของเว็บไซต์ตามแนวคิดของ Lynch and Horton ดังนี้

1. โครงสร้างแบบเรียงลำดับ (Sequential Structure) เป็นโครงสร้างที่ใช้เก็บข้อมูลที่เป็นเรื่องราวตามลำดับเวลา     หรือดำเนินเนื้อหาไปตามลำดับ หรือจากเรื่องทั่วๆไป กว้างๆ ไปสู่เรื่องที่จำเพาะเจาะจงมากขึ้น หรือ มีรายละเอียดมากขึ้น หรือการเรียงลำดับตามตัวอักษร อาทิ ดรรชนี สารานุกรม หรืออภิธานศัพท์ อย่างไรก็ตามโครงสร้างแบบนี้ เหมาะกับเว็บที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อน เหมือนการอ่านหนังสือเรียงลำดับไปทีละหน้า ดังรูป


    ภายในเว็บไซต์ จะดำเนินเรื่องไปในลักษณะเส้นตรง โดยมีปุ่มเดินหน้า ถอยหลังเป็นเครื่องมือหลักที่ เริ่มจากหน้าเริ่มต้น (Start Page) ซึ่งโดย ปกติเป็นหน้าต้อนรับหรือแนะนำให้ผู้ใช้ทราบถึงรายละเอียดของเว็บ รวมทั้งอธิบายให้ทราบถึงวิธีการ เข้าสู่เนื้อหาและการใช้งานของปุ่มต่างๆ เมื่อผู้ใช้ผ่านจากหน้าเริ่มต้นเข้าไปสู่ภายในจะพบกับหน้าเนื้อหา (Topic Page) ต่างๆ โดยในแต่ละหน้า    หากมีเนื้อหาที่ซับซ้อนเกินกว่าหนึ่งหน้าก็สามารถเพิ่มเติม รายละเอียดเนื้อหาโดยจัดทำเป็นหน้าเนื้อหาย่อย (Sub Topic) และทำการเชื่อมโยงกับหน้าเนื้อหา หลักนั้นๆ ซึ่งหน้าเนื้อหาย่อยเหล่านี้มีลักษณะเป็นหน้าเดี่ยว  ที่เมื่อเข้าไปดูรายละเอียดของเนื้อหา แล้ว ต้องกลับมายังหน้าหลักหน้าเดิมเท่านั้น ไม่สามารถข้ามไปยังเนื้อหาอื่นๆ ได้ และเมื่อผู้ใช้ ผ่านไป   จนจบเนื้อหาทั้งหมดแล้วก็จะมาถึงหน้าสุดท้าย (End Page) ซึ่งอาจจะเป็นหน้าที่ใช้สรุปเนื้อหาทั้งหมด การเชื่อมโยงระหว่างหน้าแต่ละหน้าใช้ลักษณะของการใช้ปุ่มหน้าต่อไป (Next Topic) เพื่อ เดินหน้าไปสู่หน้าต่อไป ปุ่มหน้าที่แล้ว (Previous Topic) เพื่อต้องการกลับไปสู่หน้าที่ผ่านมา   ในส่วน ของการเข้าไปสู่หน้าเนื้อหาย่อยอาจใช้ลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ที่ทำไว้ในหน้าเนื้อหา หลักเชื่อมโยงไปสู่หน้าเนื้อหาย่อย และใช้ปุ่มกลับมายังหน้าหลัก (Main Topic) ในกรณีที่อยู่ในหน้า เนื้อหาย่อย และต้องการกลับไปยังหน้าเนื้อหาหลักดังรูป


    ข้อดีของโครงสร้างประเภทนี้คือ ง่ายต่อผู้ออกแบบ ในการจัดระบบโครงสร้าง และง่ายต่อการปรับปรุงแก้ไข     เนื่องจากมีโครงสร้างที่ไม่ซับซ้อน การเพิ่มเติมเนื้อหาเข้าไปสามารถทำได้ง่าย เพราะมีผลกระทบต่อบางส่วนของโครงสร้างเท่านั้น แต่ข้อเสียของ โครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนดทิศทางการเข้าสู่เนื้อหาของตนเองได้ ในกรณีที่ต้องการ    เข้าไปสู่เนื้อหาเพียงหน้าใดหน้าหนึ่งนั้นจำเป็นต้องผ่านหน้าที่ไม่ต้องการหลายหน้าเพื่อไปสู่หน้าที่ต้องการ ทำให้เสียเวลา ซึ่งปัญหานี้อาจแก้ไขโดยการเพิ่มส่วนที่เป็นหน้าสารบัญ (Index Page) ซึ่งประกอบด้วย รายชื่อของหน้าเนื้อหาทุกหน้า  ที่มีในเว็บและสามารถเชื่อมโยงไปสู่หน้านั้นๆ โดยการคลิกเมาส์ที่ชื่อ ของหน้าที่ผู้ใช้ต้องการ เข้าไปไว้ในหน้าเนื้อหาแต่ละหน้า เพื่อทำหน้าที่เป็นเครื่องมือช่วยเพิ่มความ ยืดหยุ่นในการเข้าสู่เนื้อหาแก่ผู้ใช้ ดังรูป



   

   2. มีโครงสร้างแบบลำดับขั้น (Hierarchical Structure) เป็นโครงสร้างที่มีแนวคิดเดียวกับ แผนภูมิองค์กร เนื่องจากผู้ใช้ส่วนใหญ่จะคุ้นเคยกับลักษณะของแผนภูมิแบบองค์กรทั่วๆ ไปอยู่แล้ว      จึงเป็นการง่ายต่อการทำความเข้าใจกับโครงสร้างของเนื้อหาในเว็บไซต์ลักษณะนี้ เว็บไซต์ประเภทนี้คือการมีจุดเริ่มต้นที่จุดร่วมจุดเดียว นั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหา   ในลักษณะเป็นลำดับจากบนลงล่าง ดังภาพ


จากภาพ จะเห็นได้ว่า จากหน้า Home page จะแบ่งเนื้อหาออกเป็น 5 กลุ่มเนื้อหาย่อย โดยหน้าแรกของกลุ่มเนื้อหาย่อยนั้น เรียกว่า Start page ในหน้า Start page นี้ จะเป็นคำอธิบาย ชี้แจง บอกหัวข้อหรือรายละเอียดของเนื้อหาในกลุ่มเนื้อหาย่อย เมื่อผู้ชมเข้าไปสู่เนื้อหาย่อยโดยใช้ปุ่มหน้าต่อไป หรือหน้าที่แล้ว (Next/Previous Topic) ในการดูเนื้อหาย่อยทีละหน้า เมื่อถึงหน้าสุดท้ายก็ใช้ปุ่มกลับขึ้นไปสู่หน้าเนื้อหาหลัก (Up to Start page) ในกรณีที่มีการแบ่งเนื้อหาย่อยเป็นส่วนต่างๆ ควรจัดระบบเนื้อหาของส่วนนั้นๆ ในลักษณะโครงสร้างแบบลำดับขั้นอีกชั้นหนึ่ง เช่น หน้า Topic Page 5.2 อาจแยกย่อยเนื้อหาในรายละเอียดเพิ่มเติมอีกก็สามารถทำหน้า Sub Topic Page 5.2.1 และ Sub Topic Page 5.2.2ได้ จากนั้นก็กำหนดลักษณะการเข้าสู่เนื้อหาในลักษณะเดียวกับที่กล่าวมาแล้ว   และสุดท้าย เมื่อกลับจากดูเนื้อหาย่อยมาที่หน้าแรกของเนื้อหาหลักแล้ว ก็จะมีปุ่มกลับไปหน้าโฮมเพจ (Home Page)    เมื่อต้องการกลับไปที่หน้าโฮมเพจเพื่อเลือกเนื้อหาหลักส่วนต่อไป ข้อดีของโครงสร้างรูปแบบนี้ก็คือ ง่ายต่อการแยกแยะเนื้อหาของผู้ใช้และจัดระบบข้อมูล ของผู้ออกแบบ นอกจากนี้สามารถดูแลและปรับปรุงแก้ไขได้ง่ายเนื่องจากมีการแบ่งเป็นหมวดหมู่ ที่ชัดเจน  ส่วนข้อเสียคือในส่วนของการออกแบบโครงสร้างต้องระวังอย่าให้โครงสร้างที่ไม่สมดุล นั่นคือ มีลักษณะที่ลึกเกินไป (Too Deep) หรือตื้นเกินไป (Too Shallow)      ทำให้โครงสร้างของเว็บไม่สมดุล ต้องปรับหน้าให้เหมาะเช่นเนื้อหา  ที่ลึกไปอาจต้องจัดทำหน้าเมนูเพิ่ม หรือเพิ่มการเชื่อมโยงกลับหน้าหลักได้ง่าย ถ้าเนื้อหาตื้นเกินไป อาจยุบรวมเนื้อหาบ้าง

3. โครงสร้างแบบตาราง (Grid Structure) เป็นโครงสร้างที่มีความยืดหยุ่นสำหรับผู้ใช้ ทุกๆเนื้อหามีความสำคัญเท่าๆ กัน หรือเป็นเนื้อหาย่อยๆ เหมือนกันและมีลักษณะร่วมกัน ดังนั้น ทุกๆ เนื้อหาจึงเชื่อมโยงถึงกันได้ ตามที่ผู้ใช้ต้องการ เช่นเว็บไซต์แนะนำ แหล่งท่องเที่ยวของอำเภอต่างๆ ในจังหวัดนครปฐม อาจออกแบบเว็บไซต์ดังนี้


ในการจัดหน้าเว็บไซต์นี้ หน้าแรก หรือหน้าโฮมเพจ (Home Page) จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงให้เห็นโครงสร้างของเว็บ ที่ประกอบด้วยชื่ออำเภอทั้ง 7 อำเภอ และแหล่งท่องเที่ยว 3 ลักษณะ คือแหล่งท่องเที่ยวทางวัฒนธรรม (1) แหล่งท่องเที่ยวทางธรรมชาติ (2) หรือแหล่งท่องเที่ยวทางโบราณคดี (3) ดังนี้ 

 


เมื่อคลิกเข้าไปในชื่ออำเภอแต่ละอำเภอ จะเป็นหน้าแรกของอำเภอนั้นๆ เช่นอำเภอเมืองฯ เชื่อมโยงไปยังแหล่งท่องเที่ยวทางวัฒนธรรม (1) แหล่งท่องเที่ยวทางธรรมชาติ (2)หรือแหล่งท่องเที่ยวทางโบราณคดี (3)


เมื่อผู้ใช้คลิกเลือก แหล่งท่องเที่ยวทางธรรมชาติ (2) ก็จะเข้าไปสู่หน้าเนื้อหา (Topic Page2/1)          ก็จะแสดงรายละเอียดของแหล่งท่องเที่ยวทางธรรมชาติของอำเภอเมือง เป็นต้น ส่วนการเชื่อมโยงอื่นๆ ผู้ออกแบบสามารถให้เชื่อมโยงถึงกันทุกหน้า  หรือกลับหน้าหลักของแต่ละอำเภอ

4. โครงสร้างแบบใยแมงมุม (Web Structure) โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด ผู้ใช้สามารถกำหนดวิธีการเข้าสู่เนื้อหาได้ด้วยตนเอง การเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใยข้อความที่มีความคิดรวบยอด (Concept) เหมือนกัน ของแต่ละหน้าในลักษณะของไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย ดังรูป



 

    นอกจากการเชื่อมโยงภายในเว็บนั้นๆแล้ว ยังสามารถเชื่อมโยง  ออกไปสู่เนื้อหาจากเว็บภายนอกได้ ในหน้า Web page แต่ละหน้าจะรวบรวมคำสำคัญของเนื้อหา วางไว้ในส่วนใดส่วนหนึ่งของหน้านั้น  เพื่อทำเป็นไฮเปอร์ลิงค์(Hyperlink) ไปยังหน้าที่บรรจุรายละเอียดของเรื่องดังกล่าว  ข้อดีของรูปแบบนี้คือง่ายต่อผู้ใช้ในการท่องเที่ยวบนเว็บโดยผู้ใช้สามารถกำหนดทิศทาง การเข้าสู่เนื้อหาได้ด้วยตนเอง แต่ข้อเสียคือถ้ามีการเพิ่มเนื้อหาใหม่ๆ อยู่เสมอจะเป็นการยากในการ ปรับปรุง นอกจากนี้การเชื่อมโยงระหว่างข้อมูลที่มีมากมายนั้นอาจทำให้ผู้ใช้เกิดการสับสนได้

การจัดองค์ประกอบภาพ

จากบทความก่อนหน้านี่มาจนถึงบทความนี้ก็ไกล้ที่จะจบเรื่องของพื้นฐานการออก แบบแล้วนะครับ ซึ่งในบทนี้ก็เปรียบเหมือนกับว่าเราเอาความรู้จากบทก่อนๆมาประกอบกันนั้นเอง โดยมีหลักการจัดองค์ประกอบของภาพอยู่ 2 หลักด้วยกัน ได้แก่

1. การสร้างเอกภาพ
2. การสร้างจุดเด่น เน้นจุดสำคัญ

เอกภาพ
อาจจะงงว่ามันคืออะไรอธิบายง่ายๆ ก็คือ ความเป็นอันหนึ่งอันเดียวกัน ความเป็นพวกเดียวกัน ภายในงานนั้นเอง งานที่มีเอกภาพนั้นจะทำให้ผู้ที่ดูงานของเรานั้นเข้าใจงานของเราได้ง่าย ดูแล้วมีความเป็นพวกเดียวกันอยู่ในงาน ส่วนงานที่ไม่มีความเป็นเอกภาพนั้นผู้ที่ดูงานของเราจะเกิดความขัดแย้งขึ้น ในใจทำให้ปฏิเสธงานที่ดูได้
ส่วนวิธีการสร้างเอกภาพนั้น มีหลักอยู่ด้วยกัน 3 ข้อ ได้แก่
1. สร้างความใกล้ชิดให้กับองค์ประกอบ
วิธี ที่ง่ายที่สุดก็คือการจัดวางองค์ประกอบให้มีความเหมาะสม ลองดูรูปข้างล่างนี้ก็จะรู้เองว่ารูปไหนมีเอกภาพแล้วอันไหนไม่มีเอกภาพ ซึ่งแตกต่างกันแค่การจัดองค์ประกอบ

2. สร้างความซ้ำกันขององค์ประกอบ
การจัดองค์ประกอบโดยการใช้วิธีการทำซ้ำกันไปเรื่อยๆไม่ว่าจะเป็นเส้น จุด สี หรือรูปลักษณะอื่นๆ จะทำให้ผู้ชมรู้สึกว่าเป็นพวกพ้องเดียวกัน และจะทำให้เกิดความเป็นเอกภาพขึ้นมาในงานได้ ตัวอย่างนี้หาดูได้ในหลายๆงาน เช่นงานที่ทำเป็นเส้นพริ้วๆหลายๆเส้น ซ้ำกันไปซ้ำกันมา


3. สร้างความต่อเนื่องขององค์ประกอบ
ความต่อเนื่องเราจะสร้างมาจากเส้น หรือทิศทางขององค์ประกอบที่อยู่ภายในงานของเรา ซึ่งจะนำสายตาของผู้ที่ได้ชมงานของเราไปในทิศทางที่เราได้กำหนด และเกิดความต่อเนื่องเพื่อเล่าเรื่องราวไหลไปภายในงาน ต่อเนื่องเป็นเรื่องเป็นราวเดียวกันและเป็นลำดับขั้น และจะทำให้เกิดเป็นเรื่องราวขึ้นในใจของผู้ที่ได้ดู ในหลักการข้อนี้เราจะสามารถนำมาใช้ในการบังคับสายตาของผู้ที่ดูงานไปจบที่ สิ่งที่เราต้องการจะให้ความสำคัญได้ ลองหาดูตามป้ายโฆษณาเอานะครับ ที่เวลาเราดูที่รูปแล้วจะไปจบที่จุดสุดท้ายเป็นพวก Logo หรือ สินค้า ที่ต้องการจะโฆษณา

เสริมจุดเด่น เน้นจุดสำคัญ

จุดเด่นจะทำให้ผู้ชมสามารถที่จะจับประเด็นในความหมายของงานที่เราต้องการจะสื่อได้ โดยมีหลักการสร้างจุดสนใจได้ 3 วิธีด้วยกัน ได้แก่
1. การวางจุดสนใจในงาน
หลัก การนี้ถือว่าเป็นหลักการที่สำคัญหลักการหนึ่ง สิ่งที่สำคัญก็คือเราต้องรู้ว่าเราต้องการที่จะเน้นอะไรในงานของเรา แล้วก็วางสิ่งที่เราให้ความสำคัญไว้ในตำแหน่งที่สำคัญ

จากรูปหมายเลข 1 คือต่ำแหน่งที่สำคัญที่สุดไล่มาจนถึงหมายเลข 5 คือตำแหน่งที่มีความสำคัญน้อยที่สุด

2. การสร้างความแตกต่างในงาน
การสร้างความแตกต่างจะเป็นตัวกำหนดความน่าสนใจและความโดดเด่นในงานของเราได้ ดี แต่ก็อย่าให้มันหลุดกรอบไปจะทำให้ขาดเอกภาพได้นะครับนี่คือข้อควรระวังอีก ข้อหนึ่ง
หลักในการสร้างความแตกต่างมีง่ายๆดังนี้
- การสร้างขนาดที่แตกต่าง
- ความแตกต่างกันที่รูปร่างขององค์ประกอบ
- รูปลักษณ์หรือลักษณ์ที่แตกต่าง

3. การวางแยกองค์ประกอบให้โดดเด่น
พูดง่ายๆก็คือ วางให้โดด และเด่น กว่าคนอื่น

สรุป

จากแนวคิดเกี่ยวกับการออกแบบเว็บไซต์ และตัวอย่างโครงสร้างของเว็บไซต์ที่นำเสนอมานี้  อาจเป็นเพียงบางส่วนของพื้นฐานในการออกแบบเว็บไซต์เท่านั้น ผู้ที่สนใจ ควรศึกษาตัวอย่างของเว็บไซต์ที่น่าสนใจ ในด้านการออกแบบโครงสร้าง     การออกแบบในเชิงศิลปะตกแต่ง และการออกแบบในเชิงจิตวิทยาการรับรู้เพิ่มเติม จะช่วยให้ท่านเป็นนักออกแบบเว็บไซต์ที่ดีต่อไป


แหล่งอ้างอิง

http://www.esanpt1.go.th/nites/academy/web%20design.htm

http://angleblog.exteen.com/20060328/entry-1

สร้างโดย: 
กมลอร เดชประดิษฐ์

มหาวิทยาลัยศรีปทุม ผู้ใหญ่ใจดี
 

 ช่วยด้วยครับ
นักเรียนที่สร้างบล็อก กรุณาอย่า
คัดลอกข้อมูลจากเว็บอื่นทั้งหมด
ควรนำมาจากหลายๆ เว็บ แล้ววิเคราะห์ สังเคราะห์ และเขียนขึ้นใหม่
หากคัดลอกทั้งหมด จะถูกดำเนินคดี
ตามกฎหมายจากเจ้าของลิขสิทธิ์
มีโทษทั้งจำคุกและปรับในอัตราสูง

ช่วยกันนะครับ 
ไทยกู๊ดวิวจะได้อยู่นานๆ 
ไม่ถูกปิดเสียก่อน

ขอขอบคุณในความร่วมมือครับ

อ่านรายละเอียด

ด่วน...... ขณะนี้
พระราชบัญญัติลิขสิทธิ์ (ฉบับที่ 2) พ.ศ. 2558 
มีผลบังคับใช้แล้ว 
ขอให้นักเรียนและคุณครูที่ใช้งาน
เว็บ thaigoodview ในการส่งการบ้าน
ระมัดระวังการละเมิดลิขสิทธิ์ด้วย
อ่านรายละเอียดที่นี่ครับ

 

สมาชิกที่ออนไลน์

ขณะนี้มี สมาชิก 0 คน และ ผู้เยี่ยมชม 391 คน กำลังออนไลน์