SlideShare a Scribd company logo
1 of 2
Download to read offline
การออกแบบเว็บไซต์ เป็ นกาวางโครงสร้ างทังหมดของเว็บไซต์ ว่าแต่ละหน้ าประกอบด้ วยเนือหา
อะไรบ้ าง มีภาพประกอบ ตาราง ฯลฯ ตลดจนการเชือมโยงเว็บเพจแต่ละหน้ าเข้ าด้ วยกัน
        1. การกําหนดโครงสร้ างเว็บไซต์
             เป็ นการออกแบบส่วนประกอบทังหมดของเว็บไซต์ทีต้ องการให้ ผ้ เู ข้ ามาเยียมชมได้ ทราบ เช่น ทัง
เว็บไซต์มีกีหน้ า แต่ละหน้ ามีเนือหาอะไรบ้ าง เนือหาแต่ละส่วนเชือมโยงกันอย่างไร เปรี ยบเสมือนการเขียน
หนังสือทีแบ่งเนือหาออกเป็ นบทย่อยๆ แต่ละบทมีหวข้ อใหญ่และหัวข้ อย่อยเรี ยงลําดับกันไป
                                                    ั
             ตัวอย่าง เช่น การออกแบบเว็บไซต์เกียวกับสินค้ าตกแต่งบ้ าน เขียนเป็ นโครงสร้ างเว็บไซต์ ดังนี




       2. การออกแบบหน้ าเว็บหลัก (Index.html)
           หน้ าแรกของเว็บเพจถือเป็ นหน้ าสําหรับต้ อนรับแขก เป็ นหน้ าเริ มต้ นของเว็บไซต์ เมือผู้ชมเปิ ดเข้ า
มาจะพบหน้ านีเป็ นอันดับแรก โดยปกติหน้ าแรก จะมีองค์ประกอบหลัก คือ โลโก้ องค์กร แถบชือองค์กร
รูปภาพ โฆษณา และแถบลิงค์เข้ าสูเ่ ว็บไซต์ ดังตัวอย่าง
หลักการออกแบบเว็บ

More Related Content

More from เขมิกา กุลาศรี

คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียน
คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียนคำแนะนำการใช้งานเว็บบล็อกประกอบการเรียน
คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียนเขมิกา กุลาศรี
 
คำแนะนำเกี่ยวกับเว็บบล็อก
คำแนะนำเกี่ยวกับเว็บบล็อกคำแนะนำเกี่ยวกับเว็บบล็อก
คำแนะนำเกี่ยวกับเว็บบล็อกเขมิกา กุลาศรี
 
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน Wordpress ในฐานะผู้ดูแลระบบ
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน  Wordpress ในฐานะผู้ดูแลระบบกลุ่มที่ 7ขั้นตอนการเข้าใช้งาน  Wordpress ในฐานะผู้ดูแลระบบ
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน Wordpress ในฐานะผู้ดูแลระบบเขมิกา กุลาศรี
 
กลุ่มที่ 9การจัดการ Administration panel
กลุ่มที่ 9การจัดการ Administration panelกลุ่มที่ 9การจัดการ Administration panel
กลุ่มที่ 9การจัดการ Administration panelเขมิกา กุลาศรี
 
ผลงานนักเรียนกลุ่ม 2การจัดการ Widgets
ผลงานนักเรียนกลุ่ม 2การจัดการ  Widgetsผลงานนักเรียนกลุ่ม 2การจัดการ  Widgets
ผลงานนักเรียนกลุ่ม 2การจัดการ Widgetsเขมิกา กุลาศรี
 
คำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติมคำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติมเขมิกา กุลาศรี
 
เอกสารประกอบการเรียนหน่วยที่ 8
เอกสารประกอบการเรียนหน่วยที่  8เอกสารประกอบการเรียนหน่วยที่  8
เอกสารประกอบการเรียนหน่วยที่ 8เขมิกา กุลาศรี
 

More from เขมิกา กุลาศรี (20)

ใบงานที่ 6
ใบงานที่ 6ใบงานที่ 6
ใบงานที่ 6
 
คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียน
คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียนคำแนะนำการใช้งานเว็บบล็อกประกอบการเรียน
คำแนะนำการใช้งานเว็บบล็อกประกอบการเรียน
 
คำแนะนำเกี่ยวกับเว็บบล็อก
คำแนะนำเกี่ยวกับเว็บบล็อกคำแนะนำเกี่ยวกับเว็บบล็อก
คำแนะนำเกี่ยวกับเว็บบล็อก
 
ผลการประเมินชิ้นงาน
ผลการประเมินชิ้นงานผลการประเมินชิ้นงาน
ผลการประเมินชิ้นงาน
 
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน Wordpress ในฐานะผู้ดูแลระบบ
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน  Wordpress ในฐานะผู้ดูแลระบบกลุ่มที่ 7ขั้นตอนการเข้าใช้งาน  Wordpress ในฐานะผู้ดูแลระบบ
กลุ่มที่ 7ขั้นตอนการเข้าใช้งาน Wordpress ในฐานะผู้ดูแลระบบ
 
กลุ่มที่ 9การจัดการ Administration panel
กลุ่มที่ 9การจัดการ Administration panelกลุ่มที่ 9การจัดการ Administration panel
กลุ่มที่ 9การจัดการ Administration panel
 
กลุ่มที่ 6การตั้งค่า Wordpress
กลุ่มที่ 6การตั้งค่า Wordpressกลุ่มที่ 6การตั้งค่า Wordpress
กลุ่มที่ 6การตั้งค่า Wordpress
 
กลุ่มที่ 5การจัดการสื่อ
กลุ่มที่ 5การจัดการสื่อกลุ่มที่ 5การจัดการสื่อ
กลุ่มที่ 5การจัดการสื่อ
 
ผลงานนักเรียนกลุ่ม 2การจัดการ Widgets
ผลงานนักเรียนกลุ่ม 2การจัดการ  Widgetsผลงานนักเรียนกลุ่ม 2การจัดการ  Widgets
ผลงานนักเรียนกลุ่ม 2การจัดการ Widgets
 
รายชื่อสมาชิกของกลุ่ม
รายชื่อสมาชิกของกลุ่มรายชื่อสมาชิกของกลุ่ม
รายชื่อสมาชิกของกลุ่ม
 
ผลการประเมินชิ้นงาน
ผลการประเมินชิ้นงานผลการประเมินชิ้นงาน
ผลการประเมินชิ้นงาน
 
คำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติมคำอธิบายรายวิชาสาระเพิ่มเติม
คำอธิบายรายวิชาสาระเพิ่มเติม
 
คู่มือ
คู่มือคู่มือ
คู่มือ
 
เอกสารประกอบการเรียนหน่วยที่ 8
เอกสารประกอบการเรียนหน่วยที่  8เอกสารประกอบการเรียนหน่วยที่  8
เอกสารประกอบการเรียนหน่วยที่ 8
 
ใบงานที่ 8
ใบงานที่ 8ใบงานที่ 8
ใบงานที่ 8
 
แบบฝึกที่ 7
แบบฝึกที่  7แบบฝึกที่  7
แบบฝึกที่ 7
 
คู่มือ
คู่มือคู่มือ
คู่มือ
 
คู่มือ
คู่มือคู่มือ
คู่มือ
 
ใบงาน
ใบงานใบงาน
ใบงาน
 
แบบฝึก
แบบฝึกแบบฝึก
แบบฝึก
 

หลักการออกแบบเว็บ

  • 1. การออกแบบเว็บไซต์ เป็ นกาวางโครงสร้ างทังหมดของเว็บไซต์ ว่าแต่ละหน้ าประกอบด้ วยเนือหา อะไรบ้ าง มีภาพประกอบ ตาราง ฯลฯ ตลดจนการเชือมโยงเว็บเพจแต่ละหน้ าเข้ าด้ วยกัน 1. การกําหนดโครงสร้ างเว็บไซต์ เป็ นการออกแบบส่วนประกอบทังหมดของเว็บไซต์ทีต้ องการให้ ผ้ เู ข้ ามาเยียมชมได้ ทราบ เช่น ทัง เว็บไซต์มีกีหน้ า แต่ละหน้ ามีเนือหาอะไรบ้ าง เนือหาแต่ละส่วนเชือมโยงกันอย่างไร เปรี ยบเสมือนการเขียน หนังสือทีแบ่งเนือหาออกเป็ นบทย่อยๆ แต่ละบทมีหวข้ อใหญ่และหัวข้ อย่อยเรี ยงลําดับกันไป ั ตัวอย่าง เช่น การออกแบบเว็บไซต์เกียวกับสินค้ าตกแต่งบ้ าน เขียนเป็ นโครงสร้ างเว็บไซต์ ดังนี 2. การออกแบบหน้ าเว็บหลัก (Index.html) หน้ าแรกของเว็บเพจถือเป็ นหน้ าสําหรับต้ อนรับแขก เป็ นหน้ าเริ มต้ นของเว็บไซต์ เมือผู้ชมเปิ ดเข้ า มาจะพบหน้ านีเป็ นอันดับแรก โดยปกติหน้ าแรก จะมีองค์ประกอบหลัก คือ โลโก้ องค์กร แถบชือองค์กร รูปภาพ โฆษณา และแถบลิงค์เข้ าสูเ่ ว็บไซต์ ดังตัวอย่าง