KRUWANDEE

วิธีการออกแบบเมนูทําเว็บไซต์
การออกแบบเมนูเว็บไซต์เพื่อใช้เป็นระบบนำทางไปยังเว็บเพจหน้าอื่นๆ และตอบสนองส่วนติดต่อผู้ใช้ได้เป็นอย่างดีโดยการใช้ข้อความ ภาพกราฟฟิก มีเมนู Drop Down โดยอย่าเพิ่งด่วนสรุปว่าระบบนำทาง หรือ Navigation คือส่วนที่จะนำไปสู่หน้าเว็บเพจ และเว็บไซต์ต่างๆ ได้ เพื่อให้มีความเข้าใจที่ถูกต้อง การเข้าถึงข้อมูลที่กำหนดไว้โดยการสร้างในรูปแบบของเมนูต่างๆ ในรูปแบบของการเชื่อมโยงลิงค์เพื่อเปิดหน้าต่างเว็บไซต์ใหม่ หรือเปิดในหน้าต่างเดียวกัน ซึ่งในการทำเมนูนี้อาจจะใช้ข้อความหรือรูปภาพ หรือ Drop Down เมนูในส่วนติดต่อผู้ใช้ หรือเรียกว่า User Interface เป็นส่วนติดต่อระหว่างผู้ใช้ กับระบบ เพื่อรองรับการนำข้อมูล หรือคำสั่งเข้าสู่ระบบ ตลอดจนนำเสนอข้อมลูต่างๆ ภายในเว็บไซต์กลับไปแสดงยังผู้ใช้งานในเว็บไซต์นั้น ซึ่งในการออกแบบเว็บไซต์ส่วนใหญ่ จะใช้ส่วนติดต่อผู้ใช้ในรูปแบบคำสั่งเมนู เพื่อเป็นการตอบโต้กับระบบ หรือหน้าเว็บไซต์ด้วยการแสดงคำสั่งเมนู โดยผู้ใช้สามารถเชื่อมโยงในหน้าเดียวกันได้ด้วย

ในการทําเว็บไซต์สื่อมัลติมีเดีย จะช่วยทำให้เว็บไซต์มีความน่าสนใจมากกว่าที่จะมีแค่เพียงข้อความ รูปภาพ ไฟล์ประเภทมัลติมีเดีย ก็เพิ่มความน่าสนใจ และความหลากหลายของข้อมูล เช่น การแทรกไฟล์มัลติมีเดียประเภท ภาพเคลื่อนไหว เสียง หรือ ไฟล์ video โดยสามารถที่จะนำเข้าจากแหล่งข้อมูลต่างๆ โดยผู้ใช้งานเองได้ ดังปัจจุบันมีหลายเว็บไซต์ได้เปิดให้บริการเว็บไซต์ที่รวมกลุ่มนักดนตรี Dj เพลง Mix ให้ร่วมกัน upload ไฟล์เพลงของตนเอง เพื่อโชว์ฝีมือกันได้อย่างเต็มที่ ซึ่งถือว่าเป็นมิติใหม่ของการใช้เว็บไซต์ รวมถึงถ่ายทำวีดีโอเอง หรือการบันทึกเสียงบรรยาย และการใช้เสียงเพลงประกอบ รวมทั้งการนำเข้าไฟล์จากวีดีโอ YouTube มาแสดงภายในเว็บไซต์

การสร้างแม่แบบเอกสารทําเว็บไซต์
หลังจากที่ได้ออกแบบ และจัดทำเว็บไซต์เป็น html ได้สำเร็จแล้ว จะต้องมีการนําส่วนประกอบของทำเว็บไซต์อื่นๆ อีกสิ่งที่ตามมาคือ เมื่อมีเว็บไซต์มีหลายๆ หน้า การจัดการบริหารเริ่มทำได้ยากขึ้น หากต้องตามไปแก้ไขทุกหน้า นอกจากจะยุ่งยากแล้วยังมีโอกาสผิดพลาดสูงอีกด้วย การใช้วิธีที่จะทำให้สามารถแก้ไขได้ทุกหน้า แต่ใช้ template จะแก้ไขได้เฉพาะส่วนที่ได้กำหนดไว้เท่านั้น จะสามารถช่วยให้การออกแบบทําเว็บไซต์ได้ง่ายขึ้น และเป็นสิ่งที่บริษัทWebsiteBigbangส่วนใหญ่เลือกใช้

โปรแกรม Adobe Dreamweaver มีฟังชั่นให้สามารถสร้างเป็น template ได้ เพื่อให้สามารถ แก้ไข ปรับปรุงหน้าเว็บไซต์ส่วนของ html ได้ง่ายขึ้น โดยข้อดีของการสร้างเพจคือ

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

2. กำหนดจุดที่ให้สามารถอัพเดทข้อมูลได้ แต่มีข้อเสียเช่นกันคือ Dreamweaver template มาตรฐานจะไม่สามารถใช้ร่วมกับโปรแกรมอื่นได้ หมายความว่าถ้าใช้ Dreamweaver Template ก็ต้องใช้ Dreamweaver Template เท่านั้นจะเปลี่ยนไปใช้โปรแกรมอื่นไม่ได้

โดยรวมแล้วการใช้ css เป็นโปรแกรมที่ช่วยเสริมสร้างให้การเขียนเทมเพลตเว็บไซต์ได้ง่ายยิ่งขึ้น ลดการใช้ภาษา html ได้เป็นอย่างดี สามารถที่จะกำหนด และเรียกใช้เป็นคุณสมบัติของโปรแกรมสำเร็จรูป ที่ใช้ในการเขียนเว็บไซต์โดยเฉพาะโปรแกรม Dreamweaver ได้ดี โดยใช้ css Style ในการกำหนดค่าต่างๆ ไม่ว่าจะเป็นรูปภาพ การกำหนดรูปแบบของข้อความ การกำหนดสีพื้นหลัง การกำหนดกรอบของข้อความ รวมทั้งการกำหนดแบนเนอร์ในส่วนของ Header ได้ สำหรับการนักพัฒนาเว็บไซต์ระดับสูงขึ้น สามารถที่จะทําโครงร่างเว็บไซต์ ได้ด้วยโปรแกรม css ส่วนการสร้างแม่แบบเอกสารเว็บไซต์ สามารถทำได้ด้วยการสร้าง template ที่มีข้อดีก็ คือไม่ต้องสร้างทุกหน้า เมื่อมีการเปลี่ยนแปลงก็สามารถเปลี่ยนครั้งเดียวทำให้สะดวกมากยิ่งขึ้น

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

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

กลุ่มที่มีเนื้อหาคงที่เช่น Logo Banner เมนู เนื้อหากลุ่มนี้มักจะอยู่ในเฟรมที่มีขนาดตายตัวซึ่งแสดงข้อมูลทั้งหมดได้พอดี

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

องค์ประกอบของเฟรม เกิดขึ้นจากองค์ประกอบ 2 อย่างคือ

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

เว็บเพจ คือเว็บเพจทั่วๆ ไปสามารถที่จะแสดงในเป็นเซตก็ได้ เพียงแต่อาจจะต้องจัด layout ให้เหมาะสม เช่น กำหนดความกว้างของภาพกราฟิก หรือตารางไม่ให้เกิดความกว้างของ frameset นอกจากนี้เรื่องต่างๆ ก็ต้องมีการกำหนดเป้าหมายว่าให้เว็บเพจปลายทางถูกแสดงในเฟรมเซตใด

ข้อควรระวังในการใช้เฟรม มีคุณสมบัติเฟรมบางอย่างที่แตกต่างจากเว็บเพจทั่วไป ดังนั้นการนำมาใช้จึงมีข้อที่ควรระวังดังนี้

ไม่ควรแบ่งเซลล์มากเกินไป เพราะจะสร้างความสับสนให้กับผู้ชมควรใช้เท่าที่จำเป็น

ต้องกำหนดคุณสมบัติของเฟรมแต่ละ web page ที่แสดงในเซตให้เหมาะสม เช่น เฟรมที่เป็นเมนูไม่ควรให้เกิดสกอร์บาร์ และไม่ควรให้มีเนื้อหาใหญ่เกินเฟรม

ทดสอบเรื่องต่างๆ ต้องดูว่าเว็บเพจปลายทางแสดงขึ้นในเฟรมที่ถูกต้องหรือไม่

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

การบันทึกชื่อแต่ละเฟรม คุณจะมีการบันทึกให้ครบทุกเฟรม และกำหนดชื่อให้ถูกต้อง โดยเฉพาะถ้าเป็นหน้าแรกจะต้องมีเฟรมรวมที่ชื่อ Index.html

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

อ้างจากคำถามอ้างอิง
ภาพประกอบ: WebsiteBigbang ผู้ให้บริการรับทําเว็บไซต์
เนื้อหา: หนังสือเรียนเกี่ยวกับการพัฒนาเว็บไซต์
https://www.bigbang.co.th/Web-Design