วันพุธที่ 6 ตุลาคม พ.ศ. 2553

โครงสร้างหน้าเว็บไซต์


เว็บแนวตั้ง

3.หลักการใช้สีสำหรับการออกแบบเว็บไซต์

3.1 สีหลัก สีขาว

3.2 สีพื้นหลัง ลวดลาย สีสว่าง

3.3สีโดยรวม เข้ากับThemesหลัก

3.4 สีกับหมวดหมู่ เหมือนกันทุกหมวดหมู่

4.การใช้ตัวอักษรและกราฟิก

4.1 สีของตัวอักษร สีเข้ม

4.2ลักษณะตัวอักษร Tahoma ขนาด 16pt

4.3จำนวนภาพกราฟิก ภาพเยอะ

4.4ตำแหน่งในการวางภาพ กลาง,ขวา,ซ้าย

4.5ขนาดของภาพ ทั้ง JPEG และGIF

5. การใช้สื่อประสมสำหรับการออกแบบเว็บไซต์

5.1การใช้ภาพเคลื่อนไหว แถบโฆษณา

5.2) การใช้วิดีโอคลิป ใช้flash

5.3) การใช้เสียง ไม่มี

คลิปภัยเงียบจากโลกไซเบอร์

หลักการใช้สีสำหรับการออกแบบเว็บไซต์ 3).หลักการใช้สีสำหรับการออกแบบเว็บไซต์
3.1) จำนวนของสีหลัก เป็นสีชุดที่ส่งเสริมภาพลักษณ์ เหมาะกับเว็บไซต์
3.2 )การใช้สีพื้นหลัง
3.3) โทนสีโดยรวม เข้ากับ Theme หลัก
3.4) สีกับหมวดหมู่
-ข่าว สีที่ใช้เป็นสีที่เข้มๆ ทึม
-บันเทิง สีที่ใช้เป็นสีที่ดูแล้วสนุก สดใส
-ติดต่อ สีที่ใช้เป็นสีที่ดูแล้วสะอาด สบาย

4).การใช้ตัวอักษรและกราฟิก
4.1) สีของตัวอักษร ในเว็บควรจะใช้สีไร ตัวอักษร เช่น เข้ม กลาง อ่อน พื้นหลัง อ่อน/กาง , เข้ม/อ่อน,เข้ม/กลาง
4.2)ลักษณะตัวอักษร html(CSS) ,Font MS sanser,Font Arial,Font Geneva,ขนาด14-20 pt,หนา/เอียง,กะพริบ
4.3)จำนวนภาพกราฟิก คือ ภาพที่อยู่บทเว็บไซต์ 1ภาพ,1เสียง และควรใช้อย่างเหมาะสมกับเนื้อหาและจำนวนภาพกับเนื้อหา
4.4)ตำแหน่งในการวางภาพ ไม่มีตำแหน่งที่ตายตัว แต่จะต้องคำนึงถึงความเหมาะสมกับเนื้อหา
4.5)ขนาดของภาพ ไฟล์รูปภาพ JPEG,GIFเป็นภาพลายเส้น

5). การใช้สื่อประสมสำหรับการออกแบบเว็บไซต์
5.1) การใช้ภาพเคลื่อนไหว มีส่วนของ LOGO Animatd มันต้องมี Intractive เช่น ปุ่ม แทบนำทาง ใช้ในส่วนของหน้าเว็บ แบบ Intro ใช้ Flash จะต้องคำนึงเวลาในการโหนด
5.2) การใช้วิดีโอคลิป
5.3) การใช้เสียง อาจเกิดความรำคาญต่อผู้ที่เข้ามาดู
รูปแบบตัวอย่างหน้าเว็บไซต์1.พอดีจอ

1. ลักษณะแบบเต็มจอ

2. ขนาดของหน้าเว็บ 1008*800px

3. การจัดวางตำแหน่ง

3.1 ส่วนบน : LOGO , ชื่อเว็บ , แถบเมนู , ค้นหา , ข้อมูลผู้ใช้

3.2 ส่วนเนื้อหา : ตัวอักษร , ภาพ , ข้อความ

3.3 ส่วนท้าย : ข้อมูลเพิ่มเติม , ลิขสิทธิ์ , ข้อมูลวิธีใช้งาน , ติดต่อผู้จัดทำ

4. ตำแหน่งของเมนู : ส่วนเชื่อมโยง บนสุด , ซ้ายสุด , ล่างสุด

5. ลักษณะของเมนู : รูปแบบ ไอคอน , ตัวอักษร , ภาพแบบ Roll - Over

6. การแบ่งหมวดหมู่ :-การอัพเดท-ข้อความ-กิจกรรม-เพื่อน-เกมส์-แอพพลิเคชั่น


2.แนวนอน

แนวนอน

ขนาดยาว

ส่วนหัว-โลโก้ส่วนกลาง

-รูปภาพนิ่งใช้ตกแต่ง แบ่งเป็นส่วนต่างๆ เนื้อหาของเว็บส่วนท้าย

- contact Meตำแหน่งของเมนู

-อยู่ทางด้านซ้ายของเว็ปลักษณะของเมนู

-ตัวอักษรการแบ่งหมวดหมู่


3..แนวตั้ง

-แนวตั้ง
ขนาด 800*600

ส่วนหัว-ชื่อเว็ป โลโก้ มีเเถบnavigationส่วนกลาง

-รูปภาพนิ่ง-เคลื่อนไหว เว็บบอร์ดหัวข้อต่างๆ โฆษณาด้านซ้าย ขวา

- ติดต่อลงโฆษณา ติดต่อทีมงาน

-อยู่ทางด้านซ้ายของเว็ปลักษณะของเมนู

-ตัวอักษรมีภาพประกอบการแบ่งหมวดหมู่