ความรู้เบื้องต้น เกี่ยวกับการสร้างเว็บไซต์

แนะนำสำหรับมือใหม่หัดสร้างเว็บไซต์ องค์ประกอบที่ควรรู้สำหรับมือใหม่กับการสร้างเว็บไซต์ ระบบอินเทอร์เน็ต Web Server (พื้นที่สำหรับเว็บไซต์) Domain name สิ่งที่ต้องคำนึงถึงก่อนการสร้างเว็บไซต์ หลักการในการสร้างเว็บไซต์ ขั้นตอนในการสร้างเว็บไซต์ การออกแบบเชิง Graphic Design การออกแบบโครงสร้างข้อมูล การเลือกเครื่องมือที่ใช้ในการพัฒนาเว็บไซต์

องค์ประกอบที่ควรรู้ก่อนสร้างเว็บไซต์ ระบบอินเทอร์เน็ต Web Server (พื้นที่สำหรับเว็บไซต์) Domain name (ชื่อ URL สำหรับเปิดเว็บไซต์)

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

Download และ Browse Upload Web Server Web Browser

บริการต่างๆ บน Internet บริการข้อมูลแบบ World Wide Web : WWW บริการอีเมล์ (E-Mail) test@hotmail.com บริการอื่นๆในอินเทอร์เน็ต เช่น Chat, การดาวน์โหลดไฟล์ต่างๆ, การดูหนัง ฟังเพลง ผ่านอินเตอร์ ชื่อโดเมนหรือชื่อหน่วยงาน ชื่อผู้ใช้

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

Domain name (ชื่อโดเมน) ชื่อที่ผู้จดทะเบียนระบุให้กับผู้ใช้เพื่อเข้ามายังเว็บไซต์ของตน เลือกชื่อโดเมนเนมที่ต้องการตรวจสอบโดเมนเนมได้ที่ www.active-domains.com URL: http://www.example.com/ Domain name : example.com Sub domain name : subdomain.example.com

สิ่งที่ต้องคำนึงถึงก่อนการสร้างเว็บไซต์ เว็บไซต์คืออะไร หลักการในการสร้างเว็บไซต์ ขั้นตอนในการสร้างเว็บไซต์ การเลือกเครื่องมือที่ใช้ในการพัฒนาเว็บไซต์

ส่วนประกอบของเว็บไซต์ Home Page Web Page

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

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

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

ขั้นตอนการพัฒนาเว็บไซต์ กำหนดกลุ่มผู้ใช้เป้าหมาย สร้างทีมงานพัฒนาเว็บไซต์ เช่น Web Master, Web Designer, Web Programmer, System Administrator, Content Editor/Writer เลือกโปรแกรมที่ใช้ในการออกแบบเว็บเพจ เช่น Macromedia Dreamweaver, MS FrontPage, Joomla ศึกษาความต้องการผู้เข้าชมเว็บไซต์ เช่น ข้อมูล, ข่าวสารความเคลื่อนไหว, กับโต้ตอบกับผู้ชม, ความบันเทิง, ของฟรี

องค์ประกอบ ของการออกแบบเว็บไซต์ อย่างมีประสิทธิภาพ องค์ประกอบ ของการออกแบบเว็บไซต์ อย่างมีประสิทธิภาพ

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

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

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

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

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

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

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

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

ส่วนประกอบของหน้าเว็บเพจ ส่วนประกอบของหน้าเว็บเพจ  Page Header Page Body Page Footer

ส่วนประกอบของหน้าเว็บเพจ ส่วนประกอบของหน้าเว็บเพจ  ส่วนหัวของเว็บเพ็จ (Page Header)           เป็นส่วนที่อยู่ตอนบนสุดของหน้า และเป็นส่วนที่สำคัญ ที่สุดของหน้า เพราะเป็นส่วนที่ดึงดูดผู้ชมให้ติดตามเนื้อหาภายในเว็บไซต์   มักใส่ภาพกราฟฟิกเพื่อสร้างความประทับใจ   ส่วนใหญ่ประกอบด้วย         -  โลโก้ (Logo) เป็นสิ่งที่เว็บไซต์ควรมี เป็นตัวแทนของเว็บไซต์ ได้เป็นอย่างดี และยังทำให้เว็บน่าเชื่อถือ         -  ชื่อเว็บไซต์         -  เมนูหลักหรือลิงค์ (Navigation Bar) เป็นจุดเชื่อมโยงไปสู่ เนื้อหาของเว็บไซต์

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

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

ส่วนประกอบย่อยอื่นๆ ที่จำเป็น 1 ส่วนประกอบย่อยอื่นๆ  ที่จำเป็น 1. Text  เป็นข้อความปกติ โดยเราสามารถตกแต่งให้สวยงามและมีลูกเล่นต่างๆ ดังเช่นโปรแกรมประมวลคำ 2. Graphic  ประกอบด้วยรูปภาพ ลายเส้น ลายพื้น ต่างๆ มากมาย 3. Multimedia  ประกอบด้วยรูปภาพ ภาพเคลื่อนไหว และแฟ้มเสียง 4. Counter  ใช้นับจำนวนผู้ที่เข้ามาเยี่ยมชมเว็บเพจของเรา 5. Cool Links  ใช้เชื่อมโยงไปยังเว็บเพจของตนเองหรือเว็บเพจของคนอื่น 6. Forms  เป็นแบบฟอร์มที่ให้ผู้เข้าเยี่ยมชม กรอกรายละเอียด 7. Frames  เป็นการแบ่งจอภาพเป็นส่วนๆ แต่ละส่วนก็จะแสดงข้อมูลที่แตกต่างกัน 8. Image Maps  เป็นรูปภาพขนาดใหญ่ที่กำหนดส่วนต่างๆ บนรูป เพื่อเชื่อมโยงไปยังเว็บเพจอื่นๆ 9.Java Applets  เป็นโปรแกรมสำเร็จรูปเล็กๆ ที่ใส่ลงในเว็บเพจ เพื่อให้การใช้งานเว็บเพจมีประสิทธิภาพมากยิ่งขึ้น

โครงสร้างระบบข้อมูลในเว็บไซต์ (Organizational Structure)

โครงสร้างระบบข้อมูลแบบลำดับชั้น (Hierarchy)

โครงสร้างข้อมูลแบบแคบและลึก

โครงสร้างข้อมูลแบบกว้างและตื้น