หลักการออกแบบเว็บไซท์

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

  1.    การออกแบบโครงสร้างเว็บไซท์( Site Structure Design )
              2.    การออกแบบระบบเนวิเกชั่น( Site Navigation Design

1.  การออกแบบโครงสร้างเว็บไซท์( Site Structure Design )

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

              วิธีจัดโครงสร้างเว็บไซท์สามารถทำได้หลายแบบ แต่แนวคิดหลักๆ ที่นิยมให้กัน ใช้กันมีอยู่ 2 แบบ คือ (ในทางปฏิบัติอาจมีการใช้หลายแนวคิดผสมผสานกัน ก็ได้)

1.    จัดตามกลุ่มเนื้อหา( Content-based Structure )
2.    จัดตามกลุ่มผู้ชม( User-based Structure )

 

         เราสามารถวางรูปแบบโครงสร้างเว็บไซท์ได้หลายรูปแบบตามความเหมาะสมเช่น

แบบเรียงลำดับ ( Sequence) เหมาะสำหรับเว็บไซท์ที่มีจำนวนเว็บเพจไม่มากนัก หรือเว็บไซท์ที่มีการนำเสนอข้อมูลแบบทีละขั้นตอน

แบบระดับชั้น (Hierarchy) เหมาะสำหรับเว็บไซท์ที่มีจำนวนเว็บเพจมากขึ้นเป็นรูปแบบที่เราสามารถพบได้ทั่วไป

แบบผสม (Combination) เหมาะสำหรับเว็บไซท์ที่ซับซ้อน เป็นการนำข้อดีของรูปแบบ ทั้งสองข้างต้นมาผสมกัน

 

2. การออกแบบเนวิเกชั่น (Site Navigation Design)

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

เมนูหลัก เป็นเมนูสำหรับไปยังหัวข้อเนื้อหาหลักของเว็บไซท์ มักอยู่ในรูปของลิงค์ที่เป็นข้อความหรือภาพกราฟิก และจะต้องมีปรากฏอยู่บนเว็บเพจทุกหน้า

เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อมโยงเว็บเพจปัจจุบันกับเว็บเพจอื่นภายในกลุ่มย่อยที่มีเนื้อหา เกี่ยวเนื่องเท่านั้น มักอยู่ในรูปของลิงค์ข้อความหรือกราฟิกเช่นกัน

เครื่องมือเสริม สำหรับช่วยเสริมเสริมการทำงานของเมนู ได้หลากหลายรูปแบบ เช่น ช่องค้นหา (Search Box), เมนูแบบดร็อปดาวน์ (Drop-down menu),
อิมเพจแมพ (
Image Map), แผนที่เว็บไซท์ (Site Map)

เครื่องบอกตำแหน่ง (Location Indication)

                เป็นสิ่งที่ใช้แสดงผู้ชมกำลังอยู่ที่ตำแหน่งมีได้หลายรูปแบบ เช่น ข้อความ หรือภาพกราฟิกที่แสดง ชื่อเว็บเพจ หรือข้อความบ่งชี้ทำนองนี้ และบ่อยครั้งที่เครื่องบอก
ตำแหน่งถูกรวมไว้ กับเมนูเลย

 

 

ลักษณะระบบเนวิเกชั่นที่ดี

         อยู่ในตำแหน่งที่เห็นได้ชัดและเข้าถึงง่าย เช่น ส่วนบนหรือด้านขวาของเว็บเพจ

        เข้าใจง่ายหรือมีข้อความกำกับชัดเจนผู้ชมใช้ได้ทันทีโดยไม่ต้องเสียเวลาศึกษา

        มีความสม่ำเสมอ และเป็นระบบ ไม่ชวนให้สับสนหรือกลับไปกลับมา

        มีการตอบสนองเมื่อใช้งาน เช่น เปลี่ยนสีเมื่อผู้ชมชมชี้เมาส์หรือคลิก

        มีจำนวนรายการพอเหมาะ ไม่มากเกินไป

        มีหลายทางทางเลือกให้ใช้ เช่น เมนูกราฟิก , เมนูข้อความ , ช่องค้นหาข้อมูล (Search Box), เมนูแบบดร็อปดาวน์ (Drop-down menu), แผนที่เว็บไซท์ (Site Map)

        มีลิงค์ให้คลิกกลับไปยังโฮมเพจได้เสมอ เพื่อให้ผู้ชมกลับไปเริ่มต้นใหม่ในกรณีที่หลงทางไม่รู้ว่าตัวเองอยู่ที่ตำแหน่งใด

การออกแบบเว็บเพจ (Page Design)

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

ส่วนประกอบของหน้าเว็บ

โดยทั่วไปหน้าเว็บเพจจะแบ่งออกเป็น 3 ส่วนหลักๆ ด้วยกันได้แก่

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

        ส่วนของเนื้อหา (Page body) อยู่ตอนกลลางหน้าใช้แสดงเนื้อหาภายในเว็บเพจนั้นซึ่งอาจจะประกอบด้วยข้อความ , ภาพกราฟิก , ตารางข้อมูล และอื่นๆบางครั้งเมนูหลักหรือ
เมนูเฉพาะกลุ่ม อาจมาอยู่ในส่วนนี้ก็ได้ โดยมักจะวางไว้ด้านซ้ายมือสุดจากผู้ใช้จะมองเห็นง่ายกว่า

        ส่วนท้าย (Page Footer) อยู่ล่างสุดของหน้าส่วนใหญ่จะนิยมวาง ระบบนำทางภายในเว็บไซท์แบบที่เป็นลิงค์ข้อความง่ายๆนอกจากนี้ก็อาจจะมีชื่อของเจ้าของ ข้อความแสดง
ลิขสิทธิ์ และอีเมล์แอดเดรสของผู้ดูแลเว็บไซท์

แนวคิดการออกแบบเว็บเพจ

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

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

        ประยุกต์แบบจากสิ่งพิมพ์ สิ่งพิมพ์เช่นนิตยาสาร , แผ่นพับ , โบรชัวร์ , โปสเตอร์ และหนังสือบางเล่ม มีรูปแบบที่สวยงามสามารถนำมา ใช้เป็นแนวทาง การออกแบบเว็บเพจได้

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

ให้ความสำคัญกับส่วนบนของเว็บเพจ

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

        •  ชื่อและโลโก้ของเว็บไซท์
        •  ระบบนำทางเครื่องมือเสริมสำหรับค้นหาข้อมูลภายในเว็บไซท์ และลิงค์สำคัญ
        •  ป้ายแบนเนอร์โฆษณา หรือข้อความสำคัญ

สร้างระดับความสำคัญของเนื้อหา

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

        •  ตำแหน่งและลำดับของอ็อบเจ็คภายในเว็บเพจ
        •  สีและขนาดของอ็อบเจ็ค
        •  ใช้ภาพเคลื่อนไหวหรือข้อความเคลื่อนไหว

ใช้กราฟิกให้พอดี

                การใช้กราฟิกให้พอดีในเว็บเพจจะให้ผล 2  ด้านคือด้านหนึ่งช่วยให้สวยงามและน่าสนใจ แต่อีกด้านหนึ่งถ้าเราใส่กราฟิกมากเกินไปจะเกิดผลเสียคือดูรกตา   
และทำให้เว็บเพจโหลดช้า ผู้ชม ต้องเสียเวลารอ

ออกแบบขนาดของเว็บเพจให้พอดีกับหน้าจอ

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

•  640 x 480 พิกเซล ความละเอียดต่ำ
•  800 x 600 พิกเซล ความละเอียดปานกลาง
•  1024 x 768 พิกเซล ความละเอียดสูง

                หากเราออกแบบเว็บเพจให้มีขนาด 800 x 600 พิกเซล ถ้าผู้ชมใช้ความละเอียด ของจอขนาดเดียวกันจะสามารถชมเนื้อหาทั้งหมดได้พอดีเต็มจอภาพ แต่ถ้าผู้ชม
ใช้ความละเอียดที่
   1024 x 768 พิกเซล ขนาดของเว็บเพจและองค์ประกอบต่างๆ จะเล็กลงและแสดงไม่เต็มจอภาพ และถ้าเราสร้างขนาด 1024 x 768 ผู้ชมที่ใช้ความละเอียดเท่านี้
จะชมได้พอดีจอภาพ แต่สำหรับ ผู้ชมที่ใช้จอภาพความละเอียด
800 x 600 หน้าเว็บเพจนี้จะล้นจอ   ต้องใช้สโครลบาร์เลื่อนชมส่วนที่เกิน   ผลการสำรวจที่ผ่านมาส่วนมากจะนิยมสร้าง
เว็บเพจอยู่ที่ขนาด   
800 x 600    เพราะจะยืดหยุ่น ในการแสดงผลได้มากกว่า

เลือกใช้สีอย่างเหมาะสม

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


แหล่งข้อมูล 
:  http://www.skr.ac.th/dreamroot/homepage

 

การขอใช้พื้นที่ในการสร้างเว็บไซต์ฟรี  (free host)

                การสมัครขอใช้พื้นพี่ฟรี บนอินเทอร์เน็ตนั้น  วิธีการสมัคร คล้ายกับการสมัครเป็นสมาชิจดหมายอิเล็กทรอนิกส์ (E-mail)  เพราะจะมีส่วนของการกรอกประวัติ  ใส่ชื่อ
เข้าใช้และรหัสผ่านเช่นเดียวกัน  

                ตัวอย่าง   การสมัครใช้พื้นที่ฟรี  เว็บไซต์    http://free.phitsanulok.com/regis.php

ส่วนที่ 1   ข้อตกลงหรือกติกาในการใช้พื้นที่ ซึ่งส่วนมากจะคล้ายกัน ให้คลิกยอมรับ หรือตกลง

ส่วนที่ 2    ส่วนของการกรอกข้อมูลส่วนตัวผู้สมัคร  กรอกข้อมูลให้ครบถ้วน ชื่อเว็บไซต์ควรตั้งให้สั้น
แต่สื่อความหมายเกี่ยวข้องกับเนื้อหาเว็บเพจ

ขั้นตอนการส่งไฟล์ขึ้นบนอินเทอร์เน็ต

                เมื่อสมัครแล้ว บางเว็บไซต์จะให้เข้าใช้งานได้ทันที โดยทำการ เข้าระบบ (log in) ใหม่อีกครั้ง
บางเว็บไซต์จะยืนยันการใช้งานไปทาง
E-mail    ผู้สมัคร  ต้องอ่านรายละเอียดให้เข้าใจ  เมื่อสามารถ
ล็อกอินเข้าใช้งานได้  ให้เปิด
file manager  เพื่อทำการส่งไฟล์

ตัวอย่าง

        หน้าตาของ file manager  ในแต่ละเว็บไซต์ก็จะมีการทำงานคล้าย ๆ กัน คือมีช่องทางสำหรับส่งไฟล์เช่นตัวอย่าง  จะมีให้ส่งไฟล์ได้ ครั้งละ 5 ไฟล์   วิธีการส่งคือ 
คลิก
Browse  แล้วไปที่เก็บไฟล์ คลิก open เมื่อใส่จนครบ ไฟล์ แล้วคลิก อัพโหลดไฟล์

การหาพื้นที่ฟรีโฮมเพจ

                พื้นที่ฟรีโฮมเพจ มีอยู่มากมายในอินเทอร์เน็ต  บางที่ให้พื้นที่น้อย บางที่ให้มาก แล้วแต่รายละเอียด  ผู้ใช้ต้องศึกษาข้อมูลให้เข้าใจ   ในการหาพื้นที่ สามารถ
ใช้เว็บไซต์ช่วยค้นหา เช่น
www.google.com   ช่วยค้นหาได้เลย  โดยใช้ คำสำคัญ (key word)   ฟรีพื้นที่สร้างเว็บเพจ,พื้นที่ทำเว็บไซต์ฟรี, free host   หรือคำที่มีความหมายใกล้เคียง

 รายชื่อ ฟรีพื้นที่

ฟรีพื้นที่โฮมเพจทั่วไป

Asis.co.th
ไทย

พื้นที่ 1 GB
รูปแบบ : http://host.asis.co.th/ชื่อที่ต้องการ

Web.thaicool.com ไทย

พื้นที่ 20 MB
ไม่มีแบนเนอร์โฆษณา (No Banner Advertising)

 

 

Geocities.com  

 เนื้อที่ 15 Mb มีเครื่องมือให้
รูปแบบ: www.geocities.com/yourname
วิธีการ Upload ไฟล์: ทาง Browser

Thai.net ไทย

สำหรับเว็บนี้ เป็นเว็บของคนไทยทำ ใช้งานง่ายเพราะเป็นภาษาไทยรูปแบบ www.thai.net/yourname เนื้อที่ 10 Mb

100free.com

ให้เนื้อที่มากประมาณ 40 Mb

Crosswinds.net 

เว็บนี้ให้เนื้อที่ไม่จำกัด

Dreamwater.com 

ให้เนื้อที่ประมาณ 50 Mb

Ewebcity.com 

ให้พื้นที่ประมาณ 30 Mb

Freehomepage.com

Freehomepage   ให้พื้นที่ประมาณ 20 Mb

ข้อควรคำนึงถึงในการออกแบบเว็บไซต์

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

   
 

 

               

ทำกิจกรรมใบงาน


กลับไปหน้าแรก