1. โครงสร้างของเว็บไซต์ Show
หลักการในการออกแบบโครงสร้างเว็บไซต์ โดยส่วนมากจะออกแบบโดยพิจารณาจากวัตถุประสงค์ในการสร้างเว็บไซต์ ประเภทเว็บไซต์ ขนาดของข้อมูลที่จะนำเสนอ รวมถึงการจัดวางองค์ประกอบต่างๆ เพื่อให้เหมาะกับการใช้งานกับผู้ใช้ให้มากที่สุด โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้ 1.1 โครงสร้างแบบเรียงลำดับ (Sequential Structure)1.2 โครงสร้างแบบลำดับขั้น (Hierarchical Structure)1.3 โครงสร้างแบบตาราง (Grid Structure)1.4 โครงสร้างแบบใยแมงมุม (Web Structure)2. รูปแบบเว็บไซต์2.1 Static websiteStatic website เป็นเว็บไซต์ที่สร้างขึ้นด้วยภาษา HTML ธรรมดา และมีขนาดเล็ก จำนวนเพจไม่เยอะ การเปลี่ยนแปลงข้อมูลหน้าเว็บเพจไม่บ่อยนัก โดยส่วนมากมักจะบันทึกเพจเป็นไฟล์นามสกุล .html ตัวอย่างเช่น เว็บไซต์องค์กร บริษัท (Corporate website) นั่นเอง 2.2 Dynamic websiteDynamic website เป็นเว็บไซต์ที่มีการเปลี่ยนแปลงหรืออัพเดทข้อมูลบ่อยๆ ปริมาณของข้อมูลมีค่อนข้างเยอะ ซึ่งอาจมีระบบหลังบ้านเพื่ออัปเดตข้อมูลส่วน Body ทำให้ง่ายต่อการอัพเดทข้อมูลโดยที่ไม่ต้องแก้ไขที่ไฟล์ .html เอง ตัวอย่าง Dynamic website เช่น เว็บไซต์ข่าวสารอัพเดท เว็บบล็อก ร้านค้าออนไลน์ เป็นต้น 3. เว็บเพจ เว็บไซต์ โฮมเพจ แตกต่างกันอย่างไร3.1 เว็บเพจ (Web Page)เว็บเพจ คือ หน้าข้อมูลต่างๆ ที่อยู่ในรูปของ HTML เป็นการแสดงผลในรูปแบบของเว็บเพียงหน้าเดียวเท่านั้น โดยใช้ HTML , CSS, และ jQuery โดยทั้งหมดนี้ทำให้เกิดเป็น 1 หน้า Web Page เช่น หน้า Home Page 1 หน้า เราจะเรียกมันว่า Web Page 3.2 เว็บไซต์ (Web Site)3.3 โฮมเพจ (Home Page)โฮมเพจ คือหน้าแรกของเว็บไซต์ โดยหน้าแรกนี้จะรวมเมนูและเนื้อหาต่างๆ ไว้มากมาย ซึ่งก็มีความสำคัญเป็นอย่างมาก เพราะหากหน้าแรกมีการออกแบบได้อย่างสวยงามและจัดหน้าอย่างเป็นระเบียบก็จะทำให้ผู้ชมเกิดความสนใจและอยากเข้าชมเว็บมากขึ้น สรุป Web Page คือหน้า HTML 1 หน้า Website คือการนำ Web Page หลายๆ หน้ามารวมกัน Homepage คือหน้าหลักของเว็บไซต์ มีทั้งเมนู และเนื้อหา 4. ส่วนประกอบของเว็บเพจ4.1 ส่วนหัวของหน้า (Page Header)เป็นส่วนที่อยู่บนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า ส่วนใหญ่ประกอบด้วย
4.2 ส่วนของเนื้อหา (Page Body)เป็นส่วนที่อยู่ตรงกลางของหน้าเพจ ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ อาจมีเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วยสำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ 4.3 ส่วนท้ายของหน้า (Page Footer)เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ ส่วนมากเอาไว้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น ที่อยู่ เบอร์โทรศัพท์ โลโก้ แผนที่ ข้อความแสดงลิขสิทธิ์ คำแนะนำการใช้เว็บไซต์ เป็นต้น 5. การออกแบบเว็บไซต์การออกแบบเว็บไซต์ในปัจจุบันมีความหลากหลายมากขึ้น การออกแบบเว็บไซต์ก็ขึ้นอยู่กับวัตถุประสงค์ในการสร้างของแต่ละองค์กรบริษัท ในสมัยก่อนการออกแบบเว็บไซต์มีข้อจำกัดหลายอย่างที่ทำให้นักออกแบบต้องปวดหัวไปตามๆ กัน เช่น การออกแบบสื่อวิดีโอที่ต้องนำมาใช้งานบนเว็บไซต์ เป็นต้น
ปัจจุบันมีเครื่องมือมากมายที่เราสามารถนำมาเป็นหนึ่งในองค์ประกอบต่างๆ ที่ใช้ในทำเว็บไซต์ให้มีสวยงาม เพิ่มลูกเล่นในการนำเสนอ ซึ่งเราจะมาแนะนำในบทความต่อๆ ไป แต่ครั้งนี้เราจะมาแนะนำหลักสำคัญในการออกแบบหน้าเว็บไซต์ต้องคำนึงถึงองค์ประกอบสำคัญอะไรบ้าง
6. เครื่องมือหรือโปรแกรมที่ใช้ในการเขียนโค้ดNotepadVisual Studio CodeSublime TextAdobe Dreamweaverสรุปสำหรับบทความนี้ เราได้เรียนรู้เรื่องของโครงสร้างของเว็บไซต์ โดยสามารถสรุปได้เป็นหัวข้อดังนี้
และสำหรับใครที่ยังไม่ได้อ่านบทความก่อนหน้าของเรา อย่าลืมไปอ่านด้วยนะ เว็บไซต์ คืออะไร สิ่งที่ต้องรู้ก่อนเริ่มทำเว็บไซต์ด้วยตัวเอง |