การออกแบบและพัฒนาเว็บ (WEB DESIGN AND DEVELOPMENT) โดย อ.ปริญญา น้อยดอนไพร คณะวิทยาศาสตร์และเทคโนโลยี มหาวิทยาลัยราชภัฏสุราษฎร์ธานี

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

องค์ประกอบของการออกแบบเว็บไซต์ 1. เลือกใช้สีให้เหมาะสม 2. มีความเป็นเอกลักษณ์ 3. ต้องสามารถใช้งานได้อย่างเหมาะสม 4. สามารถแสดงผลได้อย่างรวดเร็ว

การออกแบบเว็บเพจที่ดี 1. ควรมีรายการสารบัญแสดงรายละเอียดของเว็บเพจนั้น 2. เชื่อมโยงข้อมูลไปยังเป้าหมายได้ตรงกับความต้องการมากที่สุด 3. เนื้อหากระชับ สั้นและทันสมัย 4. สามารถโต้ตอบกับผู้ใช้ได้อย่างทันท่วงที 5. การใส่ภาพประกอบ 6. เข้าสู่กลุ่มเป้าหมายได้อย่างถูกต้อง 7. ใช้งานง่าย 8. เป็นมาตรฐานเดียวกัน

กระบวนการพัฒนาเว็บไซต์ กระบวนการในการสร้างและออกแบบเว็บมีกระบวนการพื้นฐานอยู่ด้วยกัน 5 ขั้นตอนคือ 1. การวางแผน (Planning) 2. การออกแบบ (Design) 3. การพัฒนา (Development) 4. การเผยแพร่ 5. ปรับปรุงและพัฒนา

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

การกำหนดโครงสร้างของเว็บ การกำหนดโครงสร้างของเว็บมีความสำคัญในการจัดการ การจัดเก็บเว็บให้เป็นระเบียบจะทำให้การตรวจสอบความผิดพลาดของเว็บเพจทำได้ง่ายขึ้น เช่น แฟ้มภาพ จัดเก็บไว้ที่เดียวกันจัดเก็บเว็บเพจ เรื่องเดียวกันไว้ในไดเรกทอรีเดียวกัน การกำหนดโครงสร้างเว็บ โครงสร้างของเว็บโดยพื้นฐานจะมี 2 ลักษณะคือ 1) โครงสร้างเว็บแบบตื้น 2) โครงสร้างเว็บแบบลึก

โครงสร้างเว็บแบบตื้น

โครงสร้างเว็บแบบลึก

การออกแบบหน้าเว็บเพจ ขนาดของหน้าโฮมเพจ การออกแบบหน้าโฮมเพจที่นิยมใช้งานมี 3 ขนาด คือ 640 x 480 pixels 800 x 600 pixels 10240 x 768 pixels โดยปกติขนาดของหน้าโฮมเพจที่ใช้กันมากที่สุด คือ 800 x 600 pixels เนื่องจากเป็นขนาดกลางที่สามารถใช้งานได้สะดวก ไม่ว่าจอภาพจะเป็นขนาดเล็ก หรือขนาดใหญ่

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

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

การเตรียมตัวก่อนสร้างโฮมเพจ สิ่งที่ต้องเตรียมเพื่อนำไปสร้างเว็บเพจ 1. เนื้อหา 2. รูปภาพประกอบเนื้อหา 3. ภาพกราฟิก เช่น เส้น (line) ปุ่มหน้ารายการ (dot) พื้นหลัง (background) ภาพการ์ตูนแต่งเว็บ (ClipArt) ภาพถ่าย (Picture) ไฟล์กราฟิกที่สนับสนุนระบบอินเตอร์เน็ต ส่วนใหญ่ใช้ 3 ไฟล์หลัก คือ • ไฟล์สกุล GIF (Graphic Interlace File) • ไฟล์สกุล JPG (Joint Photographer’s Exports Group) • ไฟล์สกุล PNG (Portable Network Graphics)

ขั้นตอนในการสร้างโฮมเพจ การสร้างโฮมเพจ เราสามารถสร้างโฮมเพจได้ง่าย ๆ อย่างเป็นขั้นตอนด้วยวิธีการดังต่อไปนี้ 1) มีพื้นที่ของโฮมเพจ ในการขอพื้นที่ในการวางโฮมเพจนั้น เราอาจขอพื้นที่แบบฟรีโฮมเพจ (ไม่เสียค่าใช้จ่ายค่าบริการ) เช่น geocitties.com แต่สำหรับในห้องเรียน ครูจะเป็นผู้กำหนดขึ้นมาอาจใช้แบบออนไลน์ (online) หรือ off line ก็ขึ้นอยู่กับการกำหนดของครูผู้สอนนักเรียนจะต้องทำความเข้าใจและ จดจำขั้นตอนในการวางโฮมเพจให้ดี 2) กำหนดลักษณะของโฮมเพจ เช่น โฮมเพจจะมีโทนสีอะไร มีข้อมูลอะไรบ้าง 3) ออกแบบหน้าโฮมเพจด้วยโปรแกรม Adobe Photoshop 4) สร้างโฮมเพจให้สมบูรณ์ด้วยโปรแกรม Adobe Dreamweaver CS3

เนื้อหาที่ควรมีในเว็บไซต์ ข้อมูลเกี่ยวกับบริษัท องค์กร หรือผู้จัดทำ (About Us) รายละเอียดของผลิตภัณฑ์หรือบริการ (Product/Service Information) ข่าวสาร (News/Press Release) คำถาม/คำตอบ (Frequently Asked Question) ข้อมูลในการติดต่อ (Contact Information)

Q/A