ขั้นตอนการออกแบบและการสร้างเว็บไซต์

webdevelopment

ขั้นตอนที่ 1 การวางแผนการจัดทำเว็บไซต์

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

ขั้นตอนที่ 2 การกำหนดโครงสร้างของเว็บ

          เป็นขั้นตอนในการกำหนดผังของเว็บ เพื่อให้ทราบองค์ประกอบทั้งหมดของเว็บ ตัวอย่างดังรูป

9

ข้อสังเกต

  1. หน้าแรกของเว็บ หรือโฮมเพจ จะต้องชื่อ index ส่วนนามสกุลให้ใส่ตามลักษณะของภาษาที่ใช้ในการสร้างเว็บ
  2. การตั้งชื่อเว็บเพจแต่ละหน้าเวลาให้กำหนดชื่อเป็นภาษาอังกฤษตามด้วยนามสกุลของภาษาที่เราสร้างเว็บ เช่น index.html, home.html, history.html เป็นต้น

ขั้นตอนที่ 3 การกำหนดการเชื่อมโยงเว็บเพจ

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

10

ขั้นตอนที่ 4 การตั้งชื่อไฟล์และโฟลเดอร์

1. การสร้างโฟลเดอร์

การสร้างโฟลเดอร์ให้สร้างเป็นชื่อหน่วยงาน / เรื่องนั้น ๆ ควรใช้ตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 เช่น swt คือ โรงเรียนเสริมงามวิทยาคม จากนั้นข้างในโฟลเดอร์ swt ให้เราสร้างโฟลเดอร์เก็บรูปภาพ พื้นหลัง ไฟล์เสียง ไฟล์วีดีโอ หรือโฟลเดอร์อื่นเป็นชื่อภาษาอังกฤษ เช่น pic คือโฟลเดอร์เก็บรูปภาพ, bg คือ โฟลเดอร์เก็บพื้นหลัง เป็นต้น

2. การตั้งชื่อไฟล์

การตั้งชื่อไฟล์ให้ตั้งชื่อและนามสกุลไฟล์เป็นตัวอักษร ภาษาอังกฤษตัวพิมพ์เล็ก หรือผสมกับตัวเลข 0-9 หรือเครื่องมือขีดลบ/ขีดล่าง  และตั้งชื่อไฟล์ให้ตรงกับเรื่องนั้น ๆ เช่น history.html คือ ประวัติของโรงเรียน, person.html คือ บุคลากรของโรงเรียน เป็นต้น

11

ขั้นตอนที่ 5 การออกแบบเว็บเพจแต่ละหน้าในเว็บไซต์

12

ขั้นตอนที่ 6 การสร้างเว็บเพจ

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

15

ขั้นตอนที่ 7 การลงทะเบียนขอพื้นที่เว็บไซต์

เมื่อทำการออกแบบและสร้างเว็บไซต์เสร็จแล้ว ขั้นตอนต่อไป คือ การเผยแพร่เว็บไซต์สู่โลกของอินเทอร์เน็ตให้คนอื่นเข้ามาเยี่ยมชม วิธีการ คือ การนำเว็บไซต์ไปฝากกับผู้ให้บริการพื้นที่เว็บไซต์ทั้งแบบเสียค่าใช้จ่ายหรือบริการ และแบบพื้นที่เว็บไซต์ฟรี ซึ่งวันนี้เราจะขอแนะนำเว็บไซต์ที่ให้บริการฟรีพื้นที่ฝากเว็บ คือ http://www.thcity.com

3

ขั้นตอนที่ 8 การอัพโหลดเว็บไซต์

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

16

ขั้นตอนที่ 9 การเรียกดูเว็บไซต์

เมื่อเราทำการอัพโหลดไฟล์เว็บไซต์ของเราขึ้นบนเว็บไซต์ที่ให้บริการพื้นที่ฝากเว็บแล้ว เราสามารถเปิดดูเว็บไซต์ของเราผ่านโปรแกรมเว็บบราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เป็นต้น โดยการพิมพ์ที่อยู่เว็บไซต์ตรง Address Bar เช่น https://www.teachernu.com/ เป็นต้น

18

ลักษณะของเว็บไซต์ที่ดี

1. ความเรียบง่าย (Simplicity)

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

2. ความสม่ำเสมอ (Consistency)

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

3. ความเป็นเอกลักษณ์ (Identity)

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

4. เนื้อหาที่มีประโยชน์ (Useful Content)

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

5. ระบบเนวิเกชันที่ใช้งานง่าย (User-Friendly Navigation)

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

6. มีลักษณะที่น่าสนใจ (Visual Appeal)

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

7. การใช้งานอย่างไม่จำกัด (Compatibility)

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

8. คุณภาพในการออกแบบ (Design Stability)

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

9. ระบบการใช้งานที่ถูกต้อง (Functional Stability)

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