หลักการในการออกแบบโครงสร้างเว็บไซต์ โดยส่วนมากจะออกแบบโดยพิจารณาจากวัตถุประสงค์ในการสร้างเว็บไซต์ ประเภทเว็บไซต์ ขนาดของข้อมูลที่จะนำเสนอ รวมถึงการจัดวางองค์ประกอบต่างๆ เพื่อให้เหมาะกับการใช้งานกับผู้ใช้ให้มากที่สุด โครงสร้างของเว็บไซต์ประกอบไปด้วย 4 รูปแบบใหญ่ๆ ได้ดังนี้ Show
1.1 โครงสร้างแบบเรียงลำดับ (Sequential Structure)เป็นโครงสร้างแบบธรรมดาที่ใช้กันมาก เพราะเป็นโครงสร้างที่เข้าใจง่ายไม่ซับซ้อน มีการจัดลำดับการลิงค์ข้อมูลแต่ละหน้าเป็นแบบลำดับ ซึ่งทำให้ผู้ใช้จะต้องเข้าสู่เนื้อหานั้นๆ ในลักษณะเส้นตรง โดยมีปุ่ม “เดินหน้า” หรือ “ถอยหลัง” เป็นเครื่องมือหลักในการกำหนดทิศทางการเข้าสู่แต่ละหน้า เว็บไซต์ส่วนใหญ่ที่ใช้โครงสร้างแบบนี้ก็จะเป็นเว็บไซต์ประเภทองค์กรบริษัทขนาดเล็กนั่งเอง1.2 โครงสร้างแบบลำดับขั้น (Hierarchical Structure)เรียกได้ว่าเป็นโครงสร้างที่ดีที่สุด และเป็นที่นิยมใช้กันอย่างมาก เพราะเป็นโครงสร้างที่สามารถจัดการกับข้อมูลที่มีความซับซ้อนได้เป็นอย่างดี โดยลักษณะของโครสร้างแบบลำดับขั้นนี้เป็นลักษณะแนวคิดเดียวกับการจัดแผนภูมิองค์กร มีการแบ่งเนื้อหาเป็นส่วนๆ แต่ละส่วนก็จะมีการนำเสนอรายละเอียดย่อยๆ ที่ลดหลั่นกันมาจากบนลงล่าง โดยจะมีจุดร่วมจุดเดียวกัน1.3 โครงสร้างแบบตาราง (Grid Structure)โครงสร้างแบบตารางเป็นโครงสร้างที่มีความซับซ้อนกว่าโครงสร้างแบบด้านบน ออกแบบมาเพื่อเพิ่มความยืดหยุ่นให้ผู้ใช้เข้าสู่เนื้อหาได้ง่ายขึ้น โดยเพิ่มการเชื่อมโยงระหว่างเนื้อหาแต่ละส่วนเข้าหากัน ในปัจจุบันเว็บไซต์ส่วนใหญ่จะเลือกใช้โครงสร้างแบบตารางเพื่อความสะดวกและทันสมัย เพื่อผู้ใช้งานเว็บไซต์สามารถใช้งานเว็บไซต์สะดวกและเข้าสู่เนื้อหาต่างๆ ภายในเว็บด้วยตัวเองได้อย่างง่ายขึ้น1.4 โครงสร้างแบบใยแมงมุม (Web Structure)โครงสร้างแบบใยแมงมุม เป็นโครงสร้างที่มีความยืดหยุ่นมากที่สุด เพราะทุกหน้าบนเว็บไซต์สามารถเชื่อมโยงหากันได้ทั้งหมดทั้งภายในเว็บไซต์หรือแม้กระทั่งเชื่อมโยงไปสู่เว็บไซต์ภายนอกได้ ทำให้ผู้ใช้สามารถเลือกที่จะเข้าสู่เนื้อหาได้อย่างอิสระด้วยตนเอง2. รูปแบบเว็บไซต์รูปแบบของเว็บไซต์หลักๆ เลยแบ่งออกเป็น 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 Page3.2 เว็บไซต์ (Web Site)ส่วนการทำเว็บไซต์นั้น คือการนำ Web Page หลายๆ หน้า มาประกอบกันทำให้เกิดเป็นเว็บไซต์ขึ้นมานั่นเอง เราจะเห็นได้จากตัวอย่างด้านล่างว่า ด้านบนสุดของแผนผัง คือ Home Page ถ้ามีแค่ Home Page เพียงหน้าเดียวเราจะเรียกว่า Web Page แต่เมื่อเราเอา Web Page อื่นๆ ตามแผนผังด้านล่างมารวมกัน ก็จะกลายเป็น Website3.3 โฮมเพจ (Home Page)โฮมเพจ คือหน้าแรกของเว็บไซต์ โดยหน้าแรกนี้จะรวมเมนูและเนื้อหาต่างๆ ไว้มากมาย ซึ่งก็มีความสำคัญเป็นอย่างมาก เพราะหากหน้าแรกมีการออกแบบได้อย่างสวยงามและจัดหน้าอย่างเป็นระเบียบก็จะทำให้ผู้ชมเกิดความสนใจและอยากเข้าชมเว็บมากขึ้นสรุป Web Page คือหน้า HTML 1 หน้า Website คือการนำ Web Page หลายๆ หน้ามารวมกัน Homepage คือหน้าหลักของเว็บไซต์ มีทั้งเมนู และเนื้อหา 4. ส่วนประกอบของเว็บเพจส่วนประกอบของหน้าเว็บเพจ แบ่งออกเป็น 3 ส่วนหลัก ๆ คือ4.1 ส่วนหัวของหน้า (Page Header)เป็นส่วนที่อยู่บนสุดของหน้า และเป็นส่วนที่สำคัญที่สุดของหน้า ส่วนใหญ่ประกอบด้วย
4.2 ส่วนของเนื้อหา (Page Body)เป็นส่วนที่อยู่ตรงกลางของหน้าเพจ ใช้แสดงข้อมูลเนื้อหาของเว็บไซต์ ซึ่งประกอบด้วยข้อความ ตารางข้อมูล ภาพกราฟิก วีดีโอ และอื่นๆ อาจมีเมนูเฉพาะกลุ่มวางอยู่ในส่วนนี้ด้วยสำหรับส่วนเนื้อหาควรแสดงใจความสำคัญที่เป็นหัวเรื่องไว้บนสุด ใช้รูปแบบตัวอักษรที่อ่านง่าย และจัด Layout ให้เหมาะสมและเป็นระเบียบ4.3 ส่วนท้ายของหน้า (Page Footer)เป็นส่วนที่อยู่ด้านล่างสุดของหน้า จะมีหรือไม่มีก็ได้ ส่วนมากเอาไว้แสดงข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาภายในเว็บไซต์ เช่น ที่อยู่ เบอร์โทรศัพท์ โลโก้ แผนที่ ข้อความแสดงลิขสิทธิ์ คำแนะนำการใช้เว็บไซต์ เป็นต้น5. การออกแบบเว็บไซต์การออกแบบเว็บไซต์ในปัจจุบันมีความหลากหลายมากขึ้น การออกแบบเว็บไซต์ก็ขึ้นอยู่กับวัตถุประสงค์ในการสร้างของแต่ละองค์กรบริษัท ในสมัยก่อนการออกแบบเว็บไซต์มีข้อจำกัดหลายอย่างที่ทำให้นักออกแบบต้องปวดหัวไปตามๆ กัน เช่น การออกแบบสื่อวิดีโอที่ต้องนำมาใช้งานบนเว็บไซต์ เป็นต้นซึ่งเมื่อก่อนไม่มี Library อย่าง jQuery มาให้เราใช้เหมือนปัจจุบัน นักออกแบบจะต้องใช้ Program ที่ชื่อ Macromedia Flash เพื่อสร้างวิดีโอมาใช้ในงานเว็บเท่านั้น ปัจจุบันมีเครื่องมือมากมายที่เราสามารถนำมาเป็นหนึ่งในองค์ประกอบต่างๆ ที่ใช้ในทำเว็บไซต์ให้มีสวยงาม เพิ่มลูกเล่นในการนำเสนอ ซึ่งเราจะมาแนะนำในบทความต่อๆ ไป แต่ครั้งนี้เราจะมาแนะนำหลักสำคัญในการออกแบบหน้าเว็บไซต์ต้องคำนึงถึงองค์ประกอบสำคัญอะไรบ้าง
6. เครื่องมือหรือโปรแกรมที่ใช้ในการเขียนโค้ดNotepadถ้าใครที่ใช้ Windows จะมีโปรแกรมที่ชื่อว่า Notepad เป็นโปรแกรมพื้นฐาน ใช้สำหรับเขียนภาษา HTML หรือภาษาอื่นๆ ได้ ข้อเสียของ Notepad คือคำสั่งหรือการเขียนโค้ดต่างๆ จะต้องเขียนขึ้นเองเท่านั้น เพราะไม่มีฟังก์ชั่นอะไรให้เลือกใช้เลยVisual Studio CodeVisual Studio Code เป็นโปรแกรม Text Editor ยอดนิยมที่พัฒนาขึ้นจากโปรเจค Open-source โดย Microsoft เป็น Text Editors ตัวหนึ่งที่เราใช้ประจำเพราะใช้งานง่าย สะดวก มีฟังก์ชั่นให้เลือกใช้เยอะ รองรับการเขียนได้หลายภาษา โดยโปรแกรมนี้เป็นโปรแกรมที่เราแนะนำให้ใช้ในการเรียนเขียนเว็บไซต์ไปด้วยกัน เพราะสามารถ Download มาใช้งานได้ฟรีSublime TextSublime Text เป็น Text Editor ที่มีความสามารถสูงที่ใช้ในการเขียนโค้ด สนับสนุนการใช้งานได้หลายภาษา เหมาะกับผู้ที่เริ่มการเขียนโค้ดได้เลย เพราะเว็บ Editor ที่ทำงานได้เร็ว รวมถึงมีฟังก์ชั่นอื่นๆ ให้ใช้ได้หลากหลายเช่นเดียวกัน สามารถ Download มาใช้งานได้ฟรีAdobe DreamweaverAdobe Dreamweaver หรือชื่อเดิมคือ แมโครมีเดีย ดรีมวีฟเวอร์ (Macromedia Dreamweaver) เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ เหมาะสมสำหรับมือใหม่ที่ต้องการเรียนรู้และเริ่มต้นทำเว็บไซต์ เพราะเป็นโปรแกรมที่มีเครื่องมืออำนวยความสะดวกในการสร้างเว็บไซต์ที่ง่ายสรุปสำหรับบทความนี้ เราได้เรียนรู้เรื่องของโครงสร้างของเว็บไซต์ โดยสามารถสรุปได้เป็นหัวข้อดังนี้
และสำหรับใครที่ยังไม่ได้อ่านบทความก่อนหน้าของเรา อย่าลืมไปอ่านด้วยนะ เว็บไซต์ คืออะไร สิ่งที่ต้องรู้ก่อนเริ่มทำเว็บไซต์ด้วยตัวเอง Grid Structure คือโครงสร้างแบบใดid=185314 ) 3. โครงสร้างแบบตาราง (Grid Structure) โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา การออกแบบเพิ่มความ ยืดหยุ่น ให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกันและกันระหว่างเนื้อหาแต่ละส่วน
โครงสร้างเว็บไซต์ (Site Structure) แบ่งออเป็นกี่แบบโครงสร้างเว็บไซต์มีกี่รูปแบบ อะไรบ้าง
Linear Structure โครงสร้างเว็บแบบเส้นตรง Hierarchical Structure โครงสร้างเว็บแบบต้นไม้ Web Linked Structure โครงสร้างเว็บแบบเชื่อมโยงอิสระ Hybrid Structure โครงสร้างเว็บไซต์แบบผสม
ข้อใดเป็นโครงสร้างเว็บไซต์แบบเรียงลําดับ (Sequential Structure)1.) โครงสร้างแบบเรียงลำดับ (Sequential Structure) โครงสร้างประเภทนี้จะมีลักษณะเรียงลำดับแต่ละเว็บเพจไปในลักษณะเส้นตรง ซึ่งใช้แนวคิดเช่นเดียวกับหนังสือ ข้อดีของโครงสร้างรูปแบบนี้คือ ง่ายต่อการดูแลปรับปรุงแก้ไข ส่วนข้อเสียนั้นก็คือ ผู้ใช้จะต้องผ่านหน้าเว็บเพจที่ไม่จำเป็นก่อนเพื่อเข้าสู่เว็บเพจที่ต้องการ
Web Structure คืออะไรโครงสร้างเว็บไซต์ ก็คือการจัดลำดับของเนื้อหาบนเว็บไซต์ออกเป็นแผนผังที่เข้าใจง่าย ว่าต้องการให้เว็บไซต์มีเนื้อหาอะไรบ้าง มีเว็บเพจอยู่ตรงไหน หน้าไหนบ้างที่จะนำมาเชื่อมโยงถึงกัน หรือกล่าวง่ายๆ ก็คือเหมือนการวางโครงเรื่องก่อนจะเขียนเนื้อหาให้ออกมาอย่างสมบูรณ์แบบนั่นเอง ดังนั้นการออกแบบโครงสร้างเว็บไซต์จึงมีความสำคัญมาก ...
|