การสร้างเว็บไซต์เบื้องต้น
เรื่อง ความรู้เบื้องต้นเกี่ยวกับการสร้างเว็บไซต์
1. ความรู้ทั่วไปในการออกแบบสร้างเว็บไซต์
Website , Webpage , Home page ต่างกันยังไง ?
Web page
คือ เอกสาร ข้อมูล โดยจะอยู่ในรูปแบบ ของ html พูดง่ายๆก็คือ เป็นหน้าที่แสดงผลอยู่ตอนนี้นี่เอง ซึ่งจะเชื่อมโยงกับเอกสารอื่นๆ ด้วยไฮเปอร์ลิงค์ ตามที่แสดงในรูป
Web site
คือ การเรียกชื่อกลุ่มก้อนของเว็บเพจรวมกันหลายๆหน้า บางครั้งเราอาจเรียก แทน domain name (domain name เช่น www.hellomyweb.com)
Home page
คือ หน้าแรกของเว็บไซต์ เช่นเมื่อเราพิมพ์ www.hellmyweb.com ก็จะแสดงเว็บเพจที่ชื่อว่า index ก่อนเสมอ เปรียบได้กับสารบัญของเว็บเพจนั่นเอง
อินเทอร์เน็ต ?
อินเทอร์เน็ต คือ ระบบที่ต่อคอมพิวเตอร์ที่มีอยู่ทั่วโลกนับร้อยนับพันล้านเครื่องเข้าด้วยกัน โดยการเชื่อมต่อนี้ทำให้เครื่องคอมพิวเตอร์สามารถส่งข้อมูลหากันได้ ทำให้เกิดบริการต่างๆขึ้นมา เช่น อีเมล์ , การสนทนาออนไลน์ (VoIP) , Chat , การส่งไฟล์หากัน และที่เราใช้งานกันอยู่เป็นประจำคือ เว็บ
อินเทอร์เน็ต มีต้นกำเนิดมาจากการที่สหภาพโซเวียต USSR สามารถปล่อยดาวเทียมชื่อ Sputnik สู่อวกาศได้สำเร็จ ซึ่งเป็นการกดดันให้ สหรัฐอเมริกา ต้องสร้างหน่วยงานชื่อ Advanced Research Projects Agency (ARPA) สังกัดกระทรวงกลาโหม ในปี 1958 เพื่อกลับมาเป็นผู้นำในด้านเทคโนโลยีอีกครั้ง ซึ่งหน่วยงาน ARPA นี่เองที่ทำให้เกิดระบบอินเตอร์เน็ตขึ้นมา ในปี 1969 โดยใช้ในการติดต่อสื่อสารระหว่างนักวิทยาศาสตร์ และนักวิจัย ต่อมาก็ถูกนำมาใช้ในมหาวิทยาลัย โดยเชื่อมต่อระหว่างมหาลัย 4 แห่ง คือ University of California at Los Angeles ,University of California at Santa Barbara , Stanford Research Institute และ University of Utah และได้ถูกพัฒนาขึ้นมาจนถึงปัจจุบัน เกิดเป็นระบบเครือข่ายขนาดใหญ่ที่เชื่อมต่อคอมพิวเตอร์นับล้านเครื่องทั่วโลกเข้าด้วยกัน
การเชื่อมต่อระหว่างคอมพิวเตอร์เข้าด้วยกัน เราจำเป็นต้องตั้งชื่อคอมพิวเตอร์ขึ้นมาเหมือนกับชื่อของคน เพื่อให้คอมพิวเตอร์ด้วยกันรู้ว่าเราต้องการจะสื่อสารกับคอมพิวเตอร์เครื่องใดในเครือข่ายกันแน่ ซึ่งด้วยเหตุนี้เองทำให้ต้องใช้ระบบ TCP/IP เพื่อให้ทราบว่าเครื่องคอมพิวเตอร์เครื่องนี้ชื่ออะไรกันแน่ โดยจะให้ตัวเลข 4 ชุดด้วยกัน เช่น 66.45.252.307 แทนชื่อของคอมพิวเตอร์นั่นเอง
Web server , Web hosting ?
web server ความจริงแล้วมีความหมายอยู่ 2 อย่างคือ
เป็นโปรแกรม ที่คอยให้บริการในการส่งข้อมูล ต่างโดยใช้ Hypertext Transfer Protocol (HTTP)
เครื่องคอมพิวเตอร์ ซึ่งในบทความนี้เราจะพูดถึงในส่วนนี้กัน
จากที่เราทราบอยู่แล้วว่าอินเทอร์เน็ตคือ การเชื่อมต่อคอมพิวเตอร์เข้าด้วยกัน โดยเราจะเรียกคอมพิวเตอร์ที่เชื่อมต่อกับเครือข่ายตลอดเวลาว่า Host หรือ เครื่องแม่ข่าย ซึ่งจะทำหน้าที่คอยให้บริการ (serv) จ่ายข้อมูลต่างๆ ทำให้บางครั้งเราก็เรียกเครื่องคอมพิวเตอร์พวกนี้ว่า Server ซึ่ง Server ของเราเน้นให้บริการเกี่ยวกับเว็บ เราจึงเรียกว่า web server
ซึ่งในการทำงานเกี่ยวกับเว็บตัว web server ก็จะส่งข้อมูล (web page) ที่เราได้สร้างขึ้นมาให้กับเครื่องคอมพิวเตอร์เครื่องอื่นที่ขอข้อมูล เช่นเมื่อเราพิมพ์ www.hellomyweb.com ผ่านโปรแกรม web browser จากนั้น web browser ก็จะหาข้อมูลว่าเครื่องใดที่เป็น web server ของ www.hellomyweb.com และเมื่อเจอเครื่องนั้นแล้วก็จะเปิดไฟล์ home page (index) ขึ้นมาแสดง
คุณอาจเคยได้ยินชื่อ web hosting กันบ้างซึ่งเราอาจหมายถึงผู้ที่ให้บริการให้เช่า server นั่นเอง
Domain name ?
Domain name (ยกตัวอย่างเช่น www.hellomyweb.com) เปรียบเสมือนทะเบียนบ้านของเรา ซึ่งจะบอกให้คนอื่นเข้ามาที่บ้านของเราถูกต้อง ดังนั้นจึงซ้ำกันไม่ได้ ในบทนี้เราจะมาดูรายละเอียดของ Domain name กัน จากบทความที่ผ่านๆมาทำให้เราทราบว่าคอมพิวเตอร์เชื่อมต่อกันด้วยระบบอินเตอร์เน็ต ซึ่ง web server ก็อยู่ในระบบอินเตอร์เน็ตด้วย ซึ่งการติดต่อกันต้องใช้ IP แทนชื่อของคอมพิวเตอร์แต่ละตัว แล้ว Domain name ละเกี่ยวอะไรด้วย ความจริงแล้ว Domain name ก็คือ IP Address นั่นเอง ซึ่งเราอาจจะลองพิมพ์ 72.14.235.147 แทนการพิมพ์ www.google.co.th ก็สามารถเปิดเว็บ google ได้เช่นเดียวกัน เหตุที่เราต้องใช้ Domain name แทน IP Address เพราะว่า
จำได้ง่ายกว่า
สามารถสื่อความหมายได้ว่าเป็นเว็บไซต์ที่เกี่ยวกับอะไร
เมื่อคุณย้าย web server ก็ไม่จำเป็นต้องเปลี่ยนชื่อ Domain name เราอาจงงว่าทำไมเปลี่ยน server แล้วทำไมถึงไม่ต้องเปลี่ยน Domain name เพราะว่า IP address ของเครื่องเปลี่ยน Domain name ก็ต้องเปลี่ยนด้วยสิ ซึ่งจริงแล้วนั้น Domain name เป็นชื่อที่ถูกเก็บไว้ที่ DNS server ซึ่งจะเป็นผู้ดูแลไม่ให้ชื่อ domain name ซ้ำกัน เหมือนกับทะเบียนบ้านนั่นเอง ซึ่งผู้ดูแลจะรับหน้าที่ในการจด domain name ให้เราโดยเราจะต้องเสียค่าบริการให้กับผู้ดูแลเป็นรายปี ซึ่งผู้ดูแลจะนำชื่อ Domain name ของเราไปเก็บไว้ที่ DNS server เมื่อมีการเรียกใช้ก็จะบอก IP Address ของเครื่อง web server ของเราไป ยกตัวอย่าง เราใช้ web brower ในการเปิดเว็บ www.hellomyweb.com web browser ของเราก็จะส่งข้อมูลไปขอ IP address ของชื่อ www.hellomyweb.com จาก DNS server ต่อจากนั้น DNS server ก็จะส่ง IP address ของ web server เว็บ www.hellomyweb.com มาให้ web browser หลังจากนั้นก็จะทำการติดต่อกับ web server เพื่อให้ส่งไฟล์มาให้เราต่อไป
โครงสร้างของ domain name เป็นดังนี้
www.sub.hellomyweb.com
โครงสร้างประกอบด้วย 3 ระดับดังนี้
1. โดเมนระดับบนสุด (Top-level Domain) ตามตัวอย่างคือส่วน .com
2. โดเมนระดับรอง (Second-level Domain) ตามตัวอย่างคือ hellomyweb
3. โดเมนย่อย (Sub domain) ตามตัวอย่างคือ sub
โดเมนลำดับบนสุดนั้น ได้มีการกำหนดชื่อเฉพาะซึ่งระบุรายละเอียดของกลุ่ม ดังนี้
.mil แทนกลุ่มของหน่วยงานทางทหารของสหรัฐเมริกา
.gov แทนกลุ่มของหน่วยงานของรัฐบาล
.com แทนกลุ่มขององค์กรหรือบริษัทเอกชน
.net แทนองค์กรที่ทำหน้าที่เป็นผู้ให้บริการเครือข่าย
.edu แทนสถาบันการศึกษา
.org แทนองค์กรหรือสมาคมต่างๆ ที่ดำเนินการโดยไม่ได้หวังผลกำไร
.xx ใช้ตัวอักษร 2 ตัวแทนชื่อประเทศ เช่น .th หมายถึงประเทศไทย
ต่อมาได้มีการแก้ไขเพิ่มเติมกลุ่มของ โดเมนลำดับบนสุดอีก 7 กลุ่มคือ
.firm แทนองค์กรหรือบริษัทห้างร้านทั่วไป
.store แทนบริษัทที่มีธุรกรรมทางการค้า
.web แทนเว็บไซท์ที่ให้ข้อมูลต่างๆ
.arts แทนกลุ่มที่มีกิจกรรมทางด้านประเพณีและวัฒนธรรม
.rec แทนองค์กรหรือหน่วยงานที่ทำงานด้านนันทนาการ
.info แทนองค์กรที่เป็นผู้ให้บริการข้อมูล
.nom สำหรับบุคคลทั่วไป
ที่มา:
จากคู่มือ โครงการอบรมคอมพิวเตอร์หลักสูตรความรู้เบื้องต้นเกี่ยวกับงานออกแบบสิ่งพิมพ์และจัดทำเว็บเพจ มหาวิทยาลัยกรุงเทพ
2. การออกแบบเว็บไซต์
การสร้างเว็บไซต์ให้แก่องค์กรหนึ่ง โดยทั่วไปจะต้องทำงานเป็นทีม การทำงานต้องมีแผนการดำเนินการ มีการศึกษาองค์ประกอบสำคัญทั้งระบบการสร้าง และข้อมูลขององค์กร เพื่อให้การดำเนินการสร้างเว็บเป็นไปอย่างมีประสิทธิภาพ ตรงจุดประสงค์มากที่สุด มีการนำเสนอแผนการดำเนินการ จัดงบประมาณ แบ่งภาระงานแก่ทีมได้อย่างเหมาะสม สิ่งที่จะต้องศึกษาก่อนมีดังนี้
ศึกษาความจำเป็นในการสร้าง ในโลกยุคสารสนเทศ ระบบสำนักงานเปลี่ยนเป็น ระบบ-สำนักงานอัตโนมัติ องค์กรต่างๆ จึงต้องการมีเว็บเพจเผยแพร่ผ่านเครือขายอินเทอร์เน็ตเพื่อผลทางธุรกิจ และ การศึกษา
กลุ่มเป้าหมาย การออกแบบเว็บไซต์ เราจะต้องทราบว่าใครคือผู้ใช้หรือคนที่ต้องการให้เข้ามาดูเว็บไซต์ของเรา เป้าหมายที่เขาเหล่านั้นต้องการ เพื่อนำข้อมูลมาวิเคราะห์และออกแบบการนำเสนอ ทั้งด้านเนื้อหา สีสัน การใส่เทคนิคดึงความสนใจได้อย่างเหมาะสม
เนื้อหาของเว็บเพจ จะต้องศึกษาเนื้อหา ข้อมูลอย่างรอบคอบทั้งข้อมูลภายในที่จะนำเผยแพร่ และข้อมูลทั่วไป เมื่อสร้างแล้วต้องมีการดูแลเนื้อหา การอัปเดตข้อมูลให้เป็นปัจจุบัน
ส่วนประกอบหน้าโฮมเพจ หน้าหลักของเว็บไซต์เป็นหน้าแรกของเว็บไซต์นั้นๆ เพราะผู้เข้ามาเยี่ยมชมได้เห็นก่อนหน้าอื่นๆ ในการออกแบบจะต้องมีความประณีต มีองค์ประกอบสำคัญครบถ้วนตามมาตรฐาน เช่นชื่อของเว็บเพจ ประวัติผู้จัดทำ วัน/เวลาที่สร้าง การสงวนลิขสิทธิ์ การเชื่อมโยงภายในและภายนอก
รูปแบบการเชื่อมโยง การสร้างการเชื่อมโยงถือว่าเป็นเครื่องมือที่สำคัญของเว็บเพจ โดยจะต้องสามารถสร้างเชื่อมโยงด้วยข้อความ รูปภาพ หรือวีดีทัศน์ คือสามารถติดตามเนื้อหาได้ ทุกจุดเพื่อให้ความสะดวกแก่ผู้ใช้มากที่สุด
ภาพกราฟิก (Image) รูปภาพที่สามารถนำมาใช้บนเว็บไซต์ จะได้จากที่ใด ขนาดความจุไฟล์ ไม่ทำให้เว็บโหลดช้า (ไม่ควรเกิน 50 KB) และเลือกชนิดของไฟล์ให้เหมาะสม
การทดสอบเว็บเพจ การสร้างเว็บต้องมีการทดสอบตลอดเวลาในระหว่างการสร้าง จะทดสอบที่ไหน จะต้องเตรียมพื้นที่วางเว็บไซต์บนอินเทอร์เน็ตก่อนหรือไม่
การเผยแพร่เว็บเพจ เมื่อเว็บไซต์เผยแพรในอินเทอร์เน็ต การประชาสัมพันธ์จะใช้วิธีใด
การลงมือออกแบบสร้างเว็บไซต์
มีลำดับขั้นการทำงานดั้งนั้น
2.1 การเขียนผังระดมความคิด
การระดมความคิด สร้างกรอบเนื้อหาเป็นจุดเริ่มต้นของการลงมือออกแบบสร้างเว็บไซต์ การทำงานจะต้องนำข้อมูลที่ได้ศึกษา และสำรวจมาทั้งหมด เขียนลงในหน้ากระดาษ โดยยังไม่ต้องคำนึงถึงหมวดหมู่มากนัก ให้ทีมงานหรือเจ้าของโครงการช่วยสำรวจดูว่างานที่จะนำเสนอในเว็บไซต์ครบหรือไม่ การเขียนนิยมทำเป็นผังระดมความคิด จะเขียนด้วยลายมือ เพราะสะดวกต่อการปรับแก้ไขหรือ เพิ่มเติมข้อมูล โดยข้อมูลที่ได้จากผังระดมความคิด จะถูกจัดกลุ่มเป็นหน้าเว็บเพจเสนอเรื่องราวแต่ละส่วนงานได้อย่างชัดเจนดังตัวอย่างในรูปที่ 2.1
รูปที่ 2.1 แสดงการเขียนผังระดมความคิด
ที่มา :gotoknow.org/blog/9nuqa/40487
2.2 เขียนผังโครงสร้างเว็บไซต์ (Site structure Design)
โครงสร้างเว็บไซต์ (Site Structure Design) เป็นแผนผังการลำดับเนื้อหา หรือการจัดวางตำแหน่งเว็บเพจทั้งหมด โดยจะจัดเฉพาะรายการหลัก รายการรองที่สำคัญไว้ก่อน ผังโครงสร้าง จะทำให้เรารู้ว่าทั้งเว็บไซต์ประกอบไปด้วยหัวข้อเนื้อหาอะไร มีเว็บเพจหน้าใดเป็นส่วนหัวเรื่องหลัก หน้าใดเกี่ยวข้องเชื่อมโยงถึงกัน โดยจะทำการกำหนดชื่อไฟล์เว็บเพจไว้ด้วยเลยก็ได้ จะทำให้เรามองเห็นหน้าตาของเว็บไซต์เป็นรูปธรรมมากขึ้น การวางโครงสร้างเว็บไซต์ที่ดีช่วยให้ผู้ชมไมสับสน ค้นหาข้อมูลที่ต้องการได้อย่างรวดเร็ว วิธีจัดโครงสร้างเว็บไซต์มีรูปแบบดังนี้
แบบเรียงลำดับ (Sequence) เหมาะสำหรับเว็บไซต์ที่มีจำนวนเว็บเพจไม่มากนัก หรือเว็บไซต์ที่มีการนำเสนอข้อมูลแบบทีละขั้นตอน
รูปที่ 2.2 ผังโครงสร้างเว็บไซต์แบบระดับ
แบบระดับชั้น (Hierarchy) เหมาะสำหรับเว็บไซต์ที่มีจำนวนเนื้อหาเว็บเพจมากขึ้น จะจัดเนื้อหาเป็นกลุ่มย่อยแต่ละเรื่อง ค้นหาง่าย เป็นรูปแบบที่มีการใช้มาก
รูปที่ 2.3 ผังโครงสร้างเว็บไซต์แบบระดับชั้น
แบบผสม (Combination) เหมาะสำหรับเว็บไซต์ที่ซับซ้อนเนื้อหามาก เป็นการนำข้อดีของรูปแบบ ทังสองข้างต้นมาผสมกัน
รูปที่ 2.4 ผังโครงสร้างเว็บไซต์แบบผสม Web page
เมื่อพิจารณางานทั้งหมดแล้วให้เลือกรูปแบบโครงสร้างที่เหมาะสมออกแบบโครงสร้างเว็บไซต์ทั้งหมด ดังตัวอย่างรูปที่ 2.5
รูปที่ 2.5 แสดงตัวอย่างผังโครงสร้างเว็บไซต์แต่ละส่วน
2.3 ออกแบบระบบเนวิเกชัน หรือระบบการเชื่อมโยงเว็บ (Navigation Design)
โครงสร้างการเชื่อมโยงของหน้าเว็บ เป็นการบอกให้รู้ว่าเว็บเพจแต่ละหน้ามีการลิงค์ถึงกันอย่างไร การออกแบบการเชื่อมโยงภายในเว็บไซต์จะต้องนำผังโครงสร้างแต่ละส่วนมาพิจารณาเป็นส่วนๆ ไปและลงรายละเอียดหน้าเนื้อหาให้ครบ ดังตัวอย่างรูปที่ 2.6
รูปที่ 2.6 แสดงตัวอย่างผังการเชื่อมโยง (Navigation) ในเว็บไซต์
การเขียนผังเนวิเกชัน ถือเป็นงานสำคัญที่จะทำให้เราและทีมงานสามารถสร้างเว็บได้ มีสาระสำคัญเกี่ยวกับการสร้างระบบนำทาง หรือเนวิเกชัน ที่ควรรู้คือ
1. เป้าหมายของ ระบบเนวิเกชัน หรือ ระบบนำทาง คือ ช่วยให้ผู้เข้าชมเข้าถึงข้อมูล ที่ต้องการได้อย่างรวดเร็วไม่หลงทาง ดังนั้นองค์ประกอบของระบบนำทางจึงมี 2 ส่วนด้วยกันคือ
1.1. เครื่องนำทาง คือเครื่องมือสำหรับให้ผู้ชมเปิดเข้าเว็บเพจต่างๆ ภายในเว็บไซต์ประกอบด้วย
- เมนูหลัก เป็นเมนูสำหรับไปยังหัวข้อเนื้อหาหลักของเว็บไซต์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟิก และจะต้องมีปรากฎอยู่บนเว็บเพจทุกหน้า
- เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อมโยงเว็บเพจปัจจุบันกบเว็บเพจอื่นภายในกลุ่มย่อยที่มีเนื้อหา เกี่ยวเนื่องเท่านั้น มักอยู่ในรูปของลิงค์ข้อความหรือกราฟิก
- เครื่องมือเสริม สำหรับช่วยเสริมการทำงานของเมนูได้หลากหลายรูปแบบ เช่น ช่องค้นหา(Search Box), เมนูแบบดร็อปดาวน์ (Drop-down menu), อิมเพจแมพ (Image Map), แผนที่เว็บไซต์ (Site Map)
1.2. เครื่องบอกตำแหน่ง (Location Indication) เป็นสิ่งที่ใช้แสดงว่าผู้ชมกำลังอยู่ที่ตำแหน่งใดมีได้หลายรูปแบบ เช่น ข้อความ หรือภาพกราฟิกที่แสดง ชื่อเว็บเพจหรือข้อความบ่งชี้ (ป้ายเหลือง) ปกติที่เครื่องบอกตำแหน่งจะสร้างรวมไว้ กับเมนูเลย
รูปที่ 2.7 ภาพแสดงเครื่องมือระบบนำทาง (Navigation) ในเว็บไซต์
ที่มา : เว็บไซต์มหาวิทยาลัยแม่ฟ้าหลวง
2. ลักษณะระบบเนวิเกชันที่ดี
- อยู่ในตำแหน่งที่เห็นได้ชัดและเข้าถึงง่าย เช่น ส่วนบนหรือด้านขวาของเว็บเพจ
- เข้าใจง่ายหรือมีข้อความกำกับชัดเจนผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลาศึกษา
- มีความสมํ่าเสมอ และเป็นระบบ ไม่ชวนให้สับสนหรือกลับไปกลับมา
- มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชี้เมาส์หรือคลิก
- มีจำนวนรายการพอเหมาะ ไม่มากเกินไป
- มีหลายทางเลือกให้ใช้ เช่น เมนูกราฟิก, เมนูข้อความ, ช่องค้นหาข้อมูล(Search Box), เมนูแบบดร็อปดาวน์ (Drop-down menu), แผนที่เว็บไซต์ (Site Map)
- มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด
2.4 การออกแบบหน้าจอเว็บเพจ (Page Design หรือ Story board)
การออกแบบหน้าเว็บเพจ โดยนำโครงสร้างข้อมูลต่างๆ มาจัดวางตำแหน่งจำลอง ทั้งด้านเนื้อหาและกราฟิกโดยผู้ออกแบบต้องเข้าใจงานกราฟิก การใช้สี เทคนิคการออกแบบเว็บเพจ ให้น่าสนใจเป็นอย่างดีเพราะหน้าเว็บเพจทุกหน้านี้จะเป็นสื่อสร้างการปฏิสัมพันธ์กับผู้เข้าชม วิธีที่สะดวกที่สุดในการออกแบบเว็บเพจ คือการใช้โปรแกรมสร้างภาพกราฟิก เช่น Photoshop หรือ Fireworks วางเค้าโครงของหน้าเว็บและวาดองค์ประกอบต่างๆ ขึ้นมาให้ครบสมบูรณ์ในไฟล์เดียวเลยไม้ว่าจะเป็นโลโก้ ชื่อเว็บไซต์ ปุ่มเมนู รูปไอคอน แถบสี และอื่นๆ เนื่องจากโปรแกรมเหล่านี้มีเครื่องมือพร้อมสำหรับงานดังกล่าว อีกทั้งในขั้นตอนสุดท้ายเรายังสามารถบันทึกองค์ประกอบทั้งหมดแยกเป็นไฟล์กราฟิกย่อยๆ (โดยใช้ Slice tool) พร้อมกับไฟล์ HTML ซึ่งสามารถจะนำไปใช้ในโปรแกรมสร้างเว็บได้เลย โดยทั่วไปหน้าเว็บเพจจะแบ่งออกเป็น 3 ส่วน ดังนี้
1. ส่วนหัว (Page Header) อยู่ตอนบนสุดของหน้า เป็นบริเวณที่สำคัญที่สุดเนื่องจากผู้ใช้จะมองเห็นก่อนบริเวณอื่น ส่วนใหญ่นิยมวางโลโก้ ชื่อเว็บไซต์ ป้ายโฆษณา ลิงค์สำหรับติดต่อหรือลิงค์ที่สำคัญ และระบบนำทาง
2. ส่วนของเนื้อหา (Page body) อยู่ตอนกลางหน้าใช้แสดงเนื้อหาภายในเว็บเพจ ซึ่งอาจจะประกอบด้วยข้อความ, ภาพกราฟิก, ตารางข้อมูล และอื่นๆ บางครั้งเมนูหลักหรือเมนูเฉพาะกลุ่ม อาจมาอยู่ในส่วนนี้ โดยมักจะวางไว้ด้านซ้ายมือสุดเพื่อผู้ใช้จะมองเห็นง่ายกว่า
3. ส่วนท้าย (Page Footer) อยู่ล่างสุดของหน้าส่วนใหญ่จะนิยมวางระบบนำทางภายในเว็บไซต์แบบที่เป็นลิงค์ข้อความง่ายๆ นอกจากนี้ก็อาจจะมีชื่อของเจ้าของ ข้อความแสดงลิขสิทธิ์และอีเมล์แอดเดรสของผู้ดูแลเว็บไซต์
รูปที่ 2.8 แสดงลำดับการสร้างตามสัดส่วนที่ออกแบบไว้
ที่มา : http://science.bu.ac.th/archive_html/archive_file/WebDevelopmentConcept.pdf
ข้อเสนอแนะ แนวคิดการออกแบบเว็บเพจ
สำหรับผู้เริ่มต้นสร้างเว็บเพจ จะมีปัญหาเรื่องการออกแบบให้หน้าเว็บว่าจะเป็นแบบใดหรือ แนวไหนจึงจะดูดี ได้มาตรฐานไม่ดูเชย มีข้อแนะนำที่จะช่วยให้เราเกิดความคิดดังนี้
1. ศึกษาจากเว็บไซต์อื่นๆ เป็นวิธีที่ง่ายที่สุด เราสามารถศึกษาจากเว็บไซต์ต่างๆ ที่มีอยู่แล้วบนอินเทอร์เน็ต แล้วเลือกรูปแบบที่เหมาะสมมาประยุกต์ใช้ ไม่ว่าจะเป็นในเรื่องของแนวคิดการออกแบบ การใช้สี ข้อความ กราฟิก รวมไปถึงเทคนิคที่ใช้ในการสร้างเว็บเพจ
2. ประยุกต์แบบจากสิ่งพิมพ์ สิ่งพิมพ์เช่นนิตยสาร แผ่นพับ , โปสเตอร์ และหนังสือบางเล่ม มีรูปแบบที่สวยงามสามารถนำมา ใช้เป็นแนวทาง การออกแบบเว็บเพจได้
3. ข้อความและภาพกราฟิก เว็บเพจที่มีข้อความมากๆ ผู้ชมจะรู้สึกกลัวและเบื่อ เพราะเมื่อเห็นข้อความก็ท้อ ในทางตรงกันข้ามถ้ามีเว็บเพจที่มีแต่ภาพอย่างเดียวผู้ชมก็รู้สึกสับสนเช่นกัน เพราะบางทีดูรูปแล้วไมเข้าใจ สงสัยว่าทำไมไม่มีคำอธิบาย ฉะนั้นเราควรออกแบบ ในแนวกลางๆ ไม่มีองค์ประกอบอย่างใดอย่างหนึ่งมากหรือน้อยเกินไป ดูให้เหมาะสมกับเนื้อหา
4. เว็บเพจที่จัดแบบเรียบง่ายแต่ดูดี จะสร้างความน่าสนใจและน่าเชื่อถือกับผู้ชมนอกจากนี้ การวางตำแหน่ง ของเนื้อหาต่างๆ อย่างมีระเบียบเป็นสัดส่วน ก็ทำให้ผู้ชมหาข้อมูลที่ต้องการได้อย่างรวดเร็ว
5. ให้ความสำคัญกับส่วนบนของเว็บเพจ ส่วนสำคัญที่สุดของเว็บเพจ คือด้านบนสุดของหน้า ซึ่งผู้ชมจะสัมผัสได้ทันทีเมื่อเข้ามาที่หน้านั้น ส่วนใหญ่จะนิยมจัดวางองค์ประกอบเป็นรูปแบบที่คล้ายๆ กันในทุกหน้าเว็บ คือส่วนของ ชื่อและโลโก้ของเว็บไซต์ ระบบนำทางได้แก่เครื่องมือค้นหาข้อมูลภายในเว็บไซต์ ลิงค์สำคัญ ป้ายแบนเนอร์โฆษณา หรือข้อความสำคัญ
6. สร้างระดับความสำคัญของเนื้อหา การสร้างระดับความสำคัญขององค์ประกอบต่างๆ ภายในเว็บเพจ ช่วยเน้นให้ผู้ชมเห็นว่าส่วนไหน สำคัญมาก ส่วนไหนสำคัญน้อย ซึ่งผู้ชมจะรับรู้ด้วยสายตาจากการมองเห็น เช่น หัวข้อขนาดใหญ่แสดงว่าสำคัญกว่าข้อความขนาดเล็ก เป็นต้น
7. ใช้กราฟิกให้พอดี การใช้กราฟิกจะให้ผล 2 ด้านคือ ด้านหนึ่งช่วยให้สวยงามและน่าสนใจ แต่อีกด้านหนึ่งถ้าเราใส่กราฟิกมากเกินไปจะเกิดผลเสียคือดูรกตา และทำให้เว็บเพจโหลดช้า ผู้ชม ต้องเสียเวลารอ
8. ออกแบบขนาดของเว็บเพจให้พอดีกับหน้าจอ การออกแบบเว็บเพจต้องคำนึงถึงกลุ่มผู้ชมเป้าหมายวาเขาปัจจุบันใช้ขนาดจอภาพเท่าใด และใช้ความละเอียดหน้าจอ (Resolution) กี่พิกเซลซึ่งระดับรายละเอียดของเว็บเพจที่ใช้กันทั่วไปปัจจุบันจะมี 3 ขนาดด้วยกันคือ
- 1024 x 768 พิกเซล ความละเอียดสูง (ปริมาณการใช้เริ่มลดลง)
- 1280 x 1024 พิกเซล ความละเอียดสูง (มีใช้มาก)
- 1280 x 800 พิกเซล ความละเอียดสูง (ใช้สำหรับหน้าจอแบบ widescreen มีใช้มากขึ้นเรื่อยๆ)
9. เลือกใช้สีอย่างเหมาะสม การออกแบบเว็บเพจให้สวยงามนั้นจะขึ้นอยู่กับการเลือกใช้ชุดสีให้ผสมกลมกลืนกัน ทำให้เว็บเพจออกมาดูดี เช่นสีพื้นเว็บเพจ, สีข้อความ และสีองค์ประกอบอื่นๆ เช่นกราฟิก, ปุ่มกดหรือลิงค์ ซึ่งควรออกมาในโทนเดียวกัน การใช้สียังช่วยบ่งบอกลักษณะของเว็บไซต์ด้วยว่าเนื้อหาออกมาในแนวไหน
ขอให้นักเรียนนำข้อแนะนำต่างๆ นี้ไปใช้ในการออกแบบสร้างเว็บตามใบงานต่าง ๆ แต่ละหน่วยการเรียน และนำไปพัฒนาการสร้างเว็บในระดับอาชีพต่อไป
สรุปบทเรียน การออกแบบสร้างเว็บเพจ จะต้องวางแผนการทำงานให้มีระบบ โดยสรุปคือเมื่อได้ระดมความคิดรวบรวมข้อมูลเนื้อหาที่ต้องการนำเสนอทั้งขององค์กรและส่วนเสริมเรียบร้อยแล้ว นั่นคือเราได้โครงสร้างเว็บแล้ว ให้นำมาเขียนเป็นผังโครงสร้างเพื่อให้การมองภาพรวมชัดเจนขึ้นในขั้นนี้จะต้องนำเสนอให้ผู้มีส่วนเกียวข้องรับทราบเพื่อแก้ไขปรับปรุงก่อน หลังจากนั้นคณะทำงานก็ลงมือออกแบบผังการเชื่อมโยงหรือเนวิเกชันได้ ตามมาด้วยการออกแบบหน้าจอจริง ในการสร้างเว็บเพจในเว็บไซต์หนึ่งๆ จะมีรูปแบบที่ซ้ำๆ กัน การทำงานจริงจะมีเครื่องมือขอโปรแกรมสร้างเว็บช่วย หรือจะใช้โปรแกรมกราฟิก เช่น Photoshop ซึ่งนิยมใช้มาก มาช่วยออกแบบจะทำให้งานที่มองว่ายากไม่ยากอย่างที่คิด ดังนั้นในกระบวนการสร้างที่สำคัญจะอยู่ที่ การวางแผนระบบงาน และการสร้างหน้าเว็บต้นแบบให้ดี มีมาตรฐาน ดูสบายตา มีสีสันเข้ากับลักษณะงานเป็นสำคัญ พึงระลึกไว้เสมอว่างานสร้างเว็บไซต์จะเป็นงานที่ผู้คนทั้งโลกสามารถเข้ามาชมงานของเราได้ ดังนันงานจึงต้องมีมาตรฐานพอสมควร