การออกแบบหน้าเว็ป

1.เว็บต้นฉบับ

2.ออกแบบใหม่

หลักการใช้สี

 หลักการใช้สี
1. จำนวนของสีหลัก (เป็นสีชุดเดียวกัน) à ส่งเสริมภาพลักษณ์Concept + Meed = Theme
2. สีพื้นหลังของเว็ป (เป็นลวดลาย, เป็นภาพ, เป็นสี)
-ลวดลายตามความจำเป็น
-เป็นภาพไม่รบกวนสายตา
-เป็นสีโทนอ่อน
3. โทนสี
4. สีกับหมวดหมู่ เหมือนกับรสชาติของเว็ปไซด์

ส่วนเพิ่มเติม

สี เป็นการแสดงหรือถ่ายทอดความรู้สึกให้ผู้อื่นรับรู้เปรียบเหมือนสื่อกลางระหว่างผู้สร้างผลงานและผู้ดูผลงาน
    1. การเลือกใช้สีแบบวรรณะ ในวงจรสีจำนวน 12 สี มี 2 วรรณะคือ
วรรณะร้อน ประกอบด้วย สีเหลือง ส้มเหลือง ส้ม ส้มแดง แดง ม่วงแดง และม่วง
วรรณะเย็น ประกอบด้วย สีเหลือง เขียวเหลือง เขียว เขียวน้ำเงิน น้ำเงิน ม่วงน้ำเงิน
การใช้สีต่างวรรณะใช้อัตราส่วน 50 : 50 , 60 :40 ., 80 :20
   2. การใช้สีคู่ตัดกัน ถ้าเลือกสีคู่ตัดกันอย่างแท้จริงจะทำให้สีฉูดฉาด จึงควรลดความสดใสของสีใดสีหนึ่งลงในอัตราที่เหมาะสมจะทำให้ภาพนั้นดูแล้วไม่ขัดตา
   3. การใช้สีโดยการกำหนด โครงการระบายสี คือ การจัดสีรวมกันเป็นหมู่เดียวกัน
   4.การใช้สีลักษณะค่าของสี ทำได้ 2 ลักษณะคือ หลายสี โดยเรียงน้ำหนักสีจากอ่อนไปหาแก่ และ สีเดียว แล้วผสมด้วยสีขาวให้เป็นระยะๆ
   5. การใช้สีโดเด่น เพื่อสร้างจุดสนใจโดยให้สีใดสีหนึ่งโดดเด่น ที่แวดล้อมด้วยสีหม่น
   6. การใช้สีใกล้เคียง คือสีที่เรียงกันอยู่ในวงจรสีที่อยู่ใกล้เคียงกัน เช่น สีเขียว สีเขียวน้ำเงิน สีน้ำเงิน

การใช้ตัวอักษร

 การใช้ตัวอักษร
1. สีของตัวอักษร
2. ตัวอักษรที่ใช้กับเว็ปไซด์ ควรอยู่ระหว่าง 14-20 point หัวควรเป็นตัวใหญ่ ส่วนเนื้อหาควรเล็กกว่าหน่อย
3. จำนวนภาพ ควรมีความเหมาะสมกับเว็ปไซด์
4. ตำแหน่งการว่างตำแหน่งภาพ
5. ขนาดภาพควรคำนึงถึงการโหลดบนเว็ปไซด์

ส่วนเพิ่มเติม

การใช้ตัวอักษร (Typography)
     ในการออกแบบเว็บเพจ สิ่งที่นักออกแบบต้องถูกจำกัดอยู่ประการหนึ่ง คือเรื่องของลักษณะของตัวอักษร ที่จะนำไปใส่ลงในเว็บเพจ เนื่องจากลักษณะของตัวอักษรที่มีให้นักออกแบบนำไปใช้ ได้ถูกจำกัดอยู่ 2 รูปแบบคือ Time Roman ที่เป็นแบบตัวอักษรมาตราฐานใน Netscape กับ Courier(ที่ให้เป็นมาตราฐานใน Microsoft Internet Explorer) ซึ่งในระบบการเขียน HTLM ตัวอักษร Time Roman เป็นตัวอักษรที่ถูกนำขึ้นมาใช้อย่างอัตโนมัติ หากนักออกแบบไม่ได้ระบุว่าต้องการตัวอักษรประเภทใด อย่างไรก็ตามถ้าต้องการใช้ตัวอักษรประเภทอื่น ที่ไม่ใช่ Time Roman แล้ว ตัวอย่างเช่นตัวอักษร Courier ต้องใส่เครื่องหมายคำสั่งลงไปด้วย โดยเครื่องหมายคำสั่งเหล่านี้คือ ,หรือ อย่างใดอย่างหนึ่ง เครื่องหมาย มักได้รับการใช้ก็ต่อเมื่อไม่ต้องการที่จะคงลักษณะของตัวอักษรไว้หรือ กล่าวคือผู้ชมสามารถเปลี่ยนตัวอักษรให้เป็นไปตามความต้องการของเขาเหล่านั้นได้ แต่ในทางกลับกัน คือ ไม่อยากให้รูปแบบนั้นเปลี่ยน ก็ต้องใช้คำสั่งเป็น นอกจากนี้ สำหรับการกำหนดระยะห่างระหว่างบรรทัด และระยะห่างระหว่างตัวอักษรนั้น จะไม่สามารถกำหนดหรือควบคุมได้ นักออกแบบสามารถใช้ขนาดของตัวอักษรที่ถูกกำหนดมาแล้ว ให้มีลักษณะเป็นตัวเอียง(ltalic)หรือตัวหนาและเอียงได้ และตัวอักษรที่เราใส่ลงไปนั้น ก็สามารถใส่สีลงไปในตัวอักษรนั้นได้ด้วย อย่างไรก็ตามในการให้สีของตัวอักษร ไม่ควรใส่สลับกันมากเกินไป เพราะจะทำให้เว็บเพจที่ออกมามีความสับสน การแสดงผลของรูปแบบตัวอักษรที่ออกแบบมา อาจแสดงผลออกมาแตกต่างกันไปตามลักษณะของบราวเซอร์แต่ละตัว บางตัวไม่สามารถกำหนดให้ตัวอักษร Time Roman หรือ Courier(2 ตัวอักษรนี้ มักถูกใช้ในการสร้างเว็บเพจ)เป็นตัวอักษรพื้นฐาน(Default)ได้ขณะเดียวกัน ผู้ใช้บางคนก็ได้เปลี่ยนตัวอักษรพื้นฐานเป็นตัวอักษรอื่นๆ นอกจากนี้ ไม่ใช่บราวเซอร์ทุกตัว จะสามารถแสดง ขนาด สี ตลอดจนรูปแบบของตัวอักษรที่เราสร้างขึ้นได้ และใช่ว่าจะมีข้อแตกต่างระหว่างบราวเซอร์ อย่างเดียว ความแตกต่างของระบบก็เป็นข้อควรระวังอีกประเภทหนึ่ง กล่าวคือ ขนาดของตัวอักษรชนิดเดียวกันซึ่งเปิดดูด้วยพีซี จะมีขนาดที่แตกต่างจากแมคอินทอช สำหรับข้อแก้ไขในเรื่องนี้ก็คือ เก็บข้อมูลว่าบราวเซอร์แบบใด ผู้ใช้นิยมมากแล้ว จึงออกแบบให้ใช้ได้กับบราวเซอร์นั้นๆ ถึงแม้ว่าการสร้างเว็บเพจ จะต้องเผชิญกับข้อจำกัดในเรื่องของรูปแบบตัวอักษรที่จะใช้ แต่ทั้งนี้ด้วยข้อจำกัดของตัวอักษรที่มีอยู่ ก็สามารถนำมาใช้ประโยชน์ได้จาก ความแตกต่างของแบบตัวอักษรทีมีอยู่ แสดงถึงข้อแตกต่าง ระหว่างหัวข้อ วิธีการเรียงหัวข้อ โดยใช้ตัวอักษรที่แตกต่างบนเว็บนั้น สามารถทำได้โดยง่าย เนื่องจากข้อจำกัดที่เคยกล่าวไว้นั้นเอง ทำให้รูปแบบที่จะนำมาใช้มีให้เลือกน้อย การเน้นตัวอักษรให้แตกต่างนั้น อาจใช้สร้างหัวข้อนั้นๆ ให้เป็นรูปภาพ แล้วนำมาประกอบลงในเว็บเพจกได้เช่นกัน



การใช้สื่อประสมมัลติมีเดีย

การใช้สื่อประสมค์มัลติมีเดีย
1. การใช้ภาพ
2. การใช้ปุ่ม
3. การใช้คลิปบนเว็ป เช่น Youtube, Flash, Add-In
4. เสียง

ส่วนเพิ่มเติม
  +มัลติมีเดีย       (อังกฤษ: multimedia) หรือ สื่อประสม หรือ สื่อหลายแบบ เป็นการใช้สื่อในหลายรูปแบบไม่ว่าจะเป็น ข้อความ เสียง รูปภาพ หรือ ภาพเคลื่อนไหว สำหรับให้ข้อมูลความรู้หรือให้ความสำราญต่อผู้ชม  ปัจจุบันความก้าวหน้า ของเทคโนโลยีคอมพิวเตอร์เอื้อให้นักออกแบบสื่อ มัลติมีเดีย สามารถประยุกต์สื่อต่างๆ ให้มารวมกันบนระบบคอมพิวเตอร์ ผู้ใช้ สามารถโต้ตอบกับระบบคอมพิวเตอร์ในรูปแบบต่างๆ กันได้ เทคโนโลยีเหล่านี้ ได้พัฒนาขึ้นพร้อมกับการพัฒนาฮาร์ดแวร์ เช่น การพัฒนาอุปกรณ์ที่ใช้อ่านและ บันทึกข้อมูล การพัฒนาหน่วยความจำให้มีขนาดที่เล็กลงแต่มีความจุมากขึ้น นอกจากนี้ ยังมีการพัฒนาเทคโนโลยีด้านอุปกรณ์ต่อพ่วงสำคัญต่างๆ เพื่อ ให้ติดต่อสื่อสารกับผู้ใช้งาน
   +มัลติมีเดีย การใช้สื่อมากกว่า 1 สื่อร่วมกันนำเสนอข้อมูลข่าวสาร โดยมีจุดมุ่งหมายให้ ผู้รับสื่อสามารถรับรู้ข่าวสารได้มากกว่า 1 ช่องทาง โดยผ่านการควบคุมการใช้ และโต้ตอบด้วยระบบคอมพิวเตอร์ส่วนบุคคลหรือเครือข่าย ปัจจุบันมีการพัฒนารูปแบบของมัลติมีเดียให้สอดคล้องกับปรัชญาการ เรียนรู้มากขึ้น สื่อประเภทนี้ไม่ได้เป็นเพียงรูปแบบของบทเรียนแบบโปรแกรม ที่ให้เพียงเนื้อหา คำถาม และคำตอบ แต่ได้รับการออกแบบให้เปิดกว้างสำหรับ การสำรวจกระตุ้นให้ผู้เรียนได้คิดค้น สืบค้นมากขึ้น
   +สื่อมัลติมีเดีย สื่อประสมหรือสื่อหลายแบบที่มีการใช้อุปกรณ์ต่างๆ เพื่อการนำเสนอข้อมูล เป็นหลัก โดยได้มีการออกแบบนำเสนอไว้อย่างเป็นระบบ มัลติมีเดียนั้นได้รวมเอาฮาร์ดแวร์และซอฟต์แวร์ไว้ด้วยกัน จะเน้นส่วนไหน มากน้อยนั้นขึ้นอยู่กับลักษณะการใช้งาน และจะเน้นผลผลิตที่เกิดจากการ นำเสนอข้อมูลหลากลายรูปแบบ เช่น ภาพนิ่ง ภาพเคลื่อนไหว เสียง และข้อความ
   +เทคโนโลยีมัลติมีเดีย เทคโนโลยีได้เข้ามามีบาทเป็นอย่างสูงสำหรับในยุคนี้ ซึ่งสามารถพิจารณา จากการพัฒนาคอมพิวเตอร์ ไม่ว่าจะเป็นด้านสมรรถนะของซีพียู รวมทั้งประสิทธิ์ภาพของอุปกรณ์ฮาร์ดแวร์และซอฟต์แวร์ในปัจจุบันนี้ ต่างก็พัฒนาขึ้น มาเพื่อรองรับความต้องการของเทคโนโลยีมัลติมีเดียมากขึ้น ตัวอย่างเช่น    
     1. ความสามารถของโปรเซสเซอร์ที่สามารถปะมวลผลข้อมูลอย่างรวดเร็ว เพื่อรองรับการคำนวณด้านคอมพิวเตอร์กราฟิกที่มีความซับซ้อนมากขึ้น
     2. หน่วยความจำในเครื่องที่มีความเร็วสูงขึ้น และเพิ่มขยายได้มากขึ้น
     3. การ์ดแสดงผลที่ช่วยให้แสดงภาพได้อย่างรวดเร็วและมีประสิทธิภาพในการแสดงผลสูง
     4. จอภาพขนาดใหญ่
     5. การ์ดเสียงและลำโพงที่สมบูรณ์แบบเทียบได้กับเครื่องเสียงราคาแพง ๆ
     6. อุปกรณ์จัดเก็บข้อมูลที่มีความจุมากขึ้น เช่น ฮาร์ดดิสก์ เป็นต้น

ตัวอย่างหน้าเว็ปไซต์

1.ลักษณะโครงสร้างหน้าเว็บเป็นแนวตั้ง

2.ขนาดหน้าจอเว็บ 1280x800

3.การจัดวางตำแหน่งของ Logo จะอยู่มุมซ้ายด้านบน/มีเนื้อหาเกี่ยวกับ Product (สินค้า)อยู่แถบด้านซ้ายและมีภาพ ,ฟอนต์ประกอบ

 -การจัดวางส่วนหัว มีโลโก้ มีชื่อเบ มีเมนูรายการตางๆ แสดงรายชื่อผู้ใช้งาน มีช่องให้ผู้เป็นสมาชิกได้เข้าถึงเว็บได้ ช่องใสอีเมล์พร้อมPassword ให้ Login แถบสมัครสมาชิกใหม่

 -การจัดวางส่วนเนื้อหา มีภาพประกอบแสดงถึง แผนที่บ่งบอกถึงที่อยู่ที่จำหน่ายตุ๊กตาBlythe และภาพตุ๊กตา Blythe พร้อมบอกราคาและรายละเอียดของสินค้านั้นๆ สินค้าอื่นๆนอกเหนือจาก ตุ๊กตาBlythe 

 -การจัดวางส่วนท้าย แสดงช่องกระทู้ มีลิขสิทธิ์ตามพระราชบัญญัติ มีข้อมูลติดต่อเพิ่มเติม ชื่อเว็บไซต์และอีเมล์ติดต่อ  

4.เมนู ตำแหน่งเมนูเรียงจากซ้ายไปขวา และจากบนลงล่างอยู่แถบทางซ้าย แบ่งเป็นคอลัมม์ ลักษณะเมนูเป็นเป็นปุ่มButton และฟอนต์บอกชื่อปุ่ม แสดงเนื้อหาของปุ่มนั้นนั้น

5.การแบ่งหมวดหมู่

  -การแบ่งหมวดมู่ส่วนแสดงสำหรับผู้ใช้งานได้ดีเพระมีชื่อผู้ใช้งาน ไอพีแอดเดรส ช่องที่แสดงสมาชิก

  -รายงานข่าวสาร และรายงานตัวแทนจำหน่ายตุ๊กตา

  -การแบ่งหมวดหมู่ของเมนูต่างๆ

  -การแบ่งหมวดหมู่ประเภท Product

  -การแบ่งหมวดหมู่เว็บติดต่อ

ภัยเงียบโลกไซเบอร์

รูปแบบและโครงสร้างของหน้าเว็บไซต์

เว็ปไซต์แนวตั้ง

เว็ปไซต์แนวนอน

เว็ปไซต์แบบเต็มจอ