หน่วยที่ 2 การวิเคราะห์และออกแบบโครงสร้างเว็บไซต์

2.3 ขั้นตอนการออกแบบเว็บไซต์

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

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

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

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

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

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

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

            

       ขั้นตอนที่ 4 การสร้างเว็บเพจแต่ละหน้า ในการสร้างเว็บเพจแต่ละหน้านั้นจะสร้างจากแบบที่ได้ออกแบบ ในแต่ละหน้ามาสร้างโดยใช้ภาษา html หรืออาจใช้โปรแกรมสำเร็จรูป เช่น FrontPage , Macromedia Dreamweaver หรือโปรแกรมสำเร็จรูปอื่น ๆ ตามความถนัด เพื่อให้ได้เว็บเพจตามที่กำหนดแล้วทำการเชื่อมโยง ข้อมูลตามรูปแบบการเชื่อมโยงข้อมูลที่อกแบบไว้ สำหรับในส่วนนี้ได้สร้างเว็บเพจแต่ละหน้าโดยใช้โปรแกรม Macromedia Dreamweaver CS6