(083) 0466100
|
สำหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่าจะเริ่มอย่างไรดี บทความนี้จะแนะนำวิธีการในการออกแบบเว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้ Containing block โดยปรกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ตรงที่ สามารถทำให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตำแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทำได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง Logo เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทำให้ลูกค้าหรือผู้ใช้งานจดจำเราได้ ด้วยเหตุนี้เองทำให้การออกแบบเว็บไซต์นั้นจำเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตำแหน่งที่ควรจะวางโลโก้ไว้คือตำแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจำได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนำไปสู่หน้าแรกของเว็บไซต์เสมอ Navigation เป็นส่วนที่จะนำผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทำให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทำทั้งแนวตั้งและแนวนอน โดยแนวนอนจะนำไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนำไปสู่เนื้อหาย่อยในหน้านั้น ตำแหน่งที่ควรจะวาง navagation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตำแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของเว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตำแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา Content ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สำคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตำแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตำแหน่งอื่นๆที่คิดว่าจะทำให้ผู้หาเจอได้โดยไม่ลำบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทำให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด Footer คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจำเป็นต้องมีหรือไม่ บอกได้ว่าจำเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กำลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว ทำไม่ต้องบอกเนื่องจากการแสดงเว็บไซต์ในบางครั้งนั้นหน้านั้นอาจโหลดได้ไม่หมด อาจแสดงได้แค่เนื้อหาภายใน หากเราออกแบบให้มี footer ตั้งแต่แรกผู้ใช้งานก็จะรู้ได้ทันทีว่าหน้าที่แสดงผลนี้อาจแสดงได้ไม่สมบูรณ์เพราะยังไม่เห็น footer และยังมีผลต่อภาพลักษณ์ของเว็บไซต์โดยตรง เราจะสังเกตได้ว่าเมื่อเข้าไปดูเว็บไซต์ที่ไม่มี footer จะรู้สึกเหมือนกับว่าเว็บไซต์นั้นยังทำไม่เสร็จ หรือขาดอะไรบางอย่าง Whitespace พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสำคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทำให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คำนึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทำให้เว็บของเรานั้นดูอึดอัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทำให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทำให้เราสามารถกำหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนำภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที ------------------------------------------------- credit by: hellomyweb.com |
ต่อไป
ความคิดเห็น
วันที่: Sun May 05 19:20:50 ICT 2024
ขอบคุณครับทำให้เข้าใจอะไรๆได้มากขึ้ง
http://www.cctvnetworkservice.com
ขอบคุณครับทำให้เข้าใจอะไรๆได้มากขึ้น
http://www.cctvnetworkservice.com
ขอบคุณมากเลยค่ะ เป็นแนวทางสำหรับผู้เริ่มต้นจริงๆ
ขอบคุณมาก ๆ ค่ะ ^^
มีโปรแกรมของการเรียนเว็บเฉพาะขายใหม
ถ้าต้องการสร้างเว็ปแบบไม่เสียเงินต้องทำไงบ้างครับช่วยส่งเมล์มาให้หน่อยได้ไหมครับขอขอบคุณล่วงหน้าครับ
ขอบคุณมากสำหรับสิ่งดี ๆ จากคนมีน้ำใจ โลกยิ้มอย่างมีความสุข เพราะทีมงานของท่าน
ขอบคุณจริง ๆ
ไม่มีพื้นฐานการสร้างเวปมาก่อนจะเรียนได้ป่าวค่ะ เคยทำตาม ที่คอมบอกเหมือนกันแต่ทำไม่ได้ค่ะ
Original Posted by : thanakrit
สำหรับคนที่เริ่มต้นออกแบบเว็บไซต์ในครั้งแรกไม่รู้ว่าจะเริ่มอย่างไรดี บทความนี้จะแนะนำวิธีการในการออกแบบเว็บไซต์ที่เว็บทั่วไปควรมี ดังรูปที่เห็นด้านบนเป็นโครงสร้างของเว็บไซต์โดยจะมีส่วนหลักๆอยู่ด้วยกันทั้งหมด 6 ส่วนดังนี้
Containing block
โดยปรกติเราจะเขียน <div> หรือ <table> ต่อจาก <body> เพื่อเอาไว้เก็บเนื้อหาทั้งหมดของเว็บไซต์ก่อน เพื่อเอาไว้เป็นกล่องในการเก็บเนื้อหาทั้งหมด โดยกล่องของเราจะมีข้อดีอยู่ตรงที่ สามารถทำให้ปรับเปลี่ยนขนาดในการแสดงผลของเนื้อหาได้ หรือตำแหน่งการแสดงผลของเว็บไซต์ได้เช่น จัดกลาง ชิดซ้าย หรือชิดขวา หากนึกภาพไม่ออก ลองเขียนเว็บไซต์โดยเริ่มที่ใส่ตัวหนังสือลงไปก่อน จากนั้นหากต้องการจัดตัวหนังสือเหล่านั้นจะทำได้ยากมาก ดังนั้นทุกครั้งที่ออกแบบเว็บไซต์อย่างลืมที่จะสร้าง containing block เอาไว้ใส่เนื้อหาทั้งหมดก่อน เพื่อความสะดวกของเราเอง
Logo
เป็นสัญลักษณ์ที่แสดงถึงตัวตนของเรา ทำให้ลูกค้าหรือผู้ใช้งานจดจำเราได้ ด้วยเหตุนี้เองทำให้การออกแบบเว็บไซต์นั้นจำเป็นต้องมีโลโก้ ของเว็บไซต์เป็นอย่างยิ่ง ส่วนตำแหน่งที่ควรจะวางโลโก้ไว้คือตำแหน่งที่เป็นสีม่วงทั้งหมดนั่นเอง จะสังเกตได้ว่าจะเป็นส่วนที่อยู่ด้านบนของเว็บไซต์ทั้งหมด เพื่อให้ผู้ใช้งานจำได้ และสะดุดตา เรื่องที่ต้องเตือนให้รู้กันก็คือ โลโก้ของเว็บไซต์เมื่อคลิกจะนำไปสู่หน้าแรกของเว็บไซต์เสมอ
Navigation
เป็นส่วนที่จะนำผู้เข้าชมเว็บไซต์ไปยังส่วนต่างของเว็บไซต์ โดยสามารถทำให้อยู่ในแนวนอน หรือแนวตั้งก็ได้ หากสังเกต hellomyweb.com เราจะทำทั้งแนวตั้งและแนวนอน โดยแนวนอนจะนำไปสู่เนื้อหาหน้าอื่นของเว็บไซต์ ส่วนแนวตั้งจะนำไปสู่เนื้อหาย่อยในหน้านั้น ตำแหน่งที่ควรจะวาง navagation เอาไว้คือสีเขียวทั้งหมด ถ้าสังเกตดูจะพบว่าการวางตำแหน่งต้องพยายามให้อยู่ในส่วนด้านบนของเว็บไซต์ หรือจะพูดอีกอย่างคือส่วนที่เมื่อผู้ใช้เปิดมาก็ต้องเจอได้ทันที ไม่ควรวางไว้ในตำแหน่งที่ผู้ใช้จะต้องเลื่อนขึ้นลง ซ้ายขวา
Content
ส่วนเนื้อหาของเว็บไซต์ เป็นส่วนที่สำคัญมากที่สุด หากผู้ใช้งานไม่สามารถเข้าถึงได้โดยง่ายผู้ใช้งานจะเปลี่ยนไปชมเว็บใหม่ทันที ตำแหน่งที่ควรวางเนื้อหาไว้คือสีแดง หรือตำแหน่งอื่นๆที่คิดว่าจะทำให้ผู้หาเจอได้โดยไม่ลำบาก หากสังเกตดูจะพบว่าเว็บไซต์บางเว็บไซต์มีโฆษณาที่มากจนเกินไป ทำให้ผู้ใช้งานหาเนื้อหาไม่เจอ นั่นถือเป็นการออกแบบที่ผิดพลาด
Footer
คือส่วนล่างสุดของหน้าเว็บไซต์ ส่วนใหญ่จะเก็บลิงก์ต่างๆเอาไว้ หรือเป็นเนื้อหาที่เกี่ยวกับเว็บไซต์เช่นลิขสิทธิ์ต่างๆ ถามว่าจำเป็นต้องมีหรือไม่ บอกได้ว่าจำเป็นอย่างยิ่ง footer จะเป็นตัวบอกผู้ชมว่าส่วนนี้คือล่างสุดของหน้าที่กำลังแสดงอยู่แล้วนะ ไม่มีเนื้อหาเพิ่มเติมแล้ว ทำไม่ต้องบอกเนื่องจากการแสดงเว็บไซต์ในบางครั้งนั้นหน้านั้นอาจโหลดได้ไม่หมด อาจแสดงได้แค่เนื้อหาภายใน หากเราออกแบบให้มี footer ตั้งแต่แรกผู้ใช้งานก็จะรู้ได้ทันทีว่าหน้าที่แสดงผลนี้อาจแสดงได้ไม่สมบูรณ์เพราะยังไม่เห็น footer และยังมีผลต่อภาพลักษณ์ของเว็บไซต์โดยตรง เราจะสังเกตได้ว่าเมื่อเข้าไปดูเว็บไซต์ที่ไม่มี footer จะรู้สึกเหมือนกับว่าเว็บไซต์นั้นยังทำไม่เสร็จ หรือขาดอะไรบางอย่าง
Whitespace
พื้นที่ว่างในเว็บไซต์ คนส่วนใหญ่มักไม่เห็นความสำคัญของการเว้นพื้นที่ว่างไว้ในเว็บไซต์ เรามักจะใส่ภาพหรือตัวหนังสือเข้าไปให้มากที่สุดเพราะคิดว่าจะทำให้เว็บดูสวยงามขึ้น หรือใช้พื้นที่มีมีอยู่ให้คุ้มค่าที่สุด หากเราออกแบบโดยไม่ได้คำนึงว่าต้องมีพื้นที่ว่างอยู่ในเว็บไซต์ จะทำให้เว็บของเรานั้นดูอึดอัดทันที การเว้นช่องว่างเอาไว้ ไม่ว่าจะเป็นระยะห่างระหว่างตัวอักษร หรือช่องว่างระหว่างภาพ เนื้อหาต่างๆ นอกจากจะทำให้เว็บของเราดูสบายตาขึ้นแล้ว ยังทำให้เราสามารถกำหนดจุดที่จะให้ผู้ใช้งานเว็บรู้สึกสนใจในจุดนั้นได้อีกด้วย เช่นหากเราเว้นช่องว่างเอาไว้ตรงกลาง และนำภาพหรือตัวหนังสือเล็กๆไปวางไว้ ตรงจุดนั้นจะเป็นที่สนใจของผู้ใช้ทันที
-------------------------------------------------
credit by: hellomyweb.com
ไง จะพยายามไห้ถึงที่สุดครับ
►ดี ครับ
ขอบคุณ..กับความรุ้เบื้องต้น