SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
หลักการออกแบบเว็บไซต์
DESIGN WEBSITE
หลักในการสร้างและออกแบบเว็บเพจ
ในการสร้างเว็บเพจ หรือหน้าเอกสารแต่ละหน้าของเว็บไซต์นั้น
จาเป็นต้องมีขั้นตอนการสร้างเว็บเพจได้ดังนี้
การวางแผน
1) กำหนดเนื้อหำ ก่อนทำเว็บเรำจะต้องรู้ว่ำเรำจะทำเว็บเกี่ยวกับ
อะไร เนื้อหำเป็นอย่ำงไร กลุ่มเป้ำหมำยเป็นกลุ่มใด ทั้งนี้เพื่อที่จะได้
นำเนื้อหำ เหล่ำนั้นมำใส่ในเว็บเพื่อแสดงให้รู้ว่ำ เนื้อหำโดยรวม
เกี่ยวกับอะไรบ้ำง
2) ออกแบบมุมมองหน้ำเว็บ (Layout) เป็นกำรจัดวำง
องค์ประกอบในเว็บเพจว่ำส่วนใดควรจะมีอะไร โดยกำรร่ำงใส่
กระดำษเปล่ำ ๆ ไว้ก่อนหรือใช้โปรแกรมคอมพิวเตอร์ช่วยในกำร
ออกแบบก็ได้ สำมำรถใช้ตำรำงช่วยในกำรจัดองค์ประกอบในหน้ำ
เว็บนั้น ซึ่งจะทำให้เว็บเพจมีควำมเป็นระเบียบยิ่งขึ้น และสะดวก
ต่อกำรแก้ไข ปรับปรุงต่อไป
การเตรียมการ
• 1) กำรเตรียมกำรด้ำนข้อมูล เช่นเนื้อหำ ภำพ เสียง หรือสิ่งจำเป็นต่ำงๆ ที่คิด
ว่ำต้องกำรจะนำเสนอในกำรทำเว็บเพจนั้น เมื่อเรำรู้แล้วว่ำเรำจะทำเว็บ
เกี่ยวกับอะไร
• 2) กำรรวบรวมข้อมูล เช่น ถ้ำจะทำเว็บ เกี่ยวกับโรงเรียน ก็ต้องไปหำคติพจน์
ประจำโรงเรียน สีประจำโรงเรียน บุคลำกรในโรงเรียน ประวัติโรงเรียน ฯลฯ มำ
รวบรวมไว้เพื่อจัดรูปแบบต่อไป
• 3) กำรหำเครื่องมือในกำรจัดทำ หมำยถึงโปรแกรมกำรทำงำนต่ำง ๆ เช่น
โปรแกรมจัดกำรรูปภำพ เสียง ภำพเคลื่อนไหวต่ำงๆ โปรแกรมในกำรจัดทำเว็บ
เพจเป็นต้น
การสร้างและออกแบบเว็บเพจ
• เมื่อวางแผนและเตรียมการเรียบร้อยแล้ว ก็ถึงเวลา
จัดสร้างเว็บเพจ ซึ่งอาจจะทาคนเดียวหรือทาเป็นกลุ่มก็
ได้ โดยใช้เครื่องมือที่เตรียมไว้ ซึ่งมีขั้นตอน ดังนี้
• 1) กาหนดโครงสร้างของเว็บไซต์
การสร้างเว็บไซต์นั้น ควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่
เรียกว่า Site Map ซึ่งสามารถเขียนแผนผังออกมาเพื่อกาหนดจานวนหน้าเว็บ
เพจที่ต้องการ
หน้าเว็บเพจ-1
(โฮมเพจ)
index.html
หน้าเว็บเพจ-2
ลงทะเบียน
reg.html
หน้าเว็บเพจ-3
รายชื่อชุมนุม
list.html
หน้าเว็บเพจ-4
เช็ครายชื่อ
ck.html
กาหนดการเชื่อมโยงระหว่างเว็บเพจ
• เป็นการกาหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าให้เชื่อมโยงถึงกันระหว่าง
หน้าต่าง ๆ ได้โดยแสดงชื่อไฟล์ HTML แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์แต่ละ
ไฟล์อย่างชัดเจน
index.html
history.html list.html
about.html vision.html
ck.html
ckhis.html
food.html room.html
phu.html
การออกแบบเว็บเพจแต่ละหน้า
เป็นการออกแบบหน้าเว็บเพจแต่ละหน้า หรือเลย์เอาท์ (Lay Out) ให้สวยงาม
โดยเฉพาะในเว็บเพจหน้าแรก ซึ่งเรียกว่า “โฮมเพจ” นั้น สามารถออกแบบให้สวยงาม
เพื่อดึงดูดความสนใจของผู้เข้าชม โดยการเขียนลงในกระดาษ หรือใช้โปรแกรม
คอมพิวเตอร์ช่วยในการออกแบบก็ได้
หน้าหลัก ประวัติ แหล่งท่องเที่ยว ร้านอาหาร ที่พัก ข่าวท่องเที่ยว ติดต่อเรา
ชื่อเว็บไซต์
Logo
เมนู Link
ที่อยู่ ที่ติดต่อ อีเมล์
รูป และข้อความ
กำรออกแบบเว็บเพจแต่ละหน้ำ
การสร้างเว็บเพจแต่ละหน้า
• เป็นการนาเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษา html หรืออาจใช้โปรแกรม
สาเร็จรูป เช่น FrontPage, Macromedia Dreamweaver
หรือโปรแกรมสาเร็จรูปอื่น ๆ ตามความถนัด
ทดสอบและการแก้ไขข้อบกพร่อง
• กำรสร้ำงเว็บควรจะมีกำรทดสอบก่อนเผยแพร่ทุกครั้ง เพื่อตรวจสอบ
ควำมถูกต้องของกำรแสดงผล โดยทดสอบที่เครื่องของตัวเอง ด้วย
โปรแกรมเว็บบรำวเซอร์ที่ใช้อ่ำนข้อมูลภำษ html เช่น Internet
Explorer, Firefox, Google Chrome เป็นต้น พร้อมทั้งสำมำรถอัพ
โหลดขึ้นไปยังที่จัดเก็บเว็บเพจเพื่อหำข้อบกพร่องและนำมำแก้ไข
ต่อไป
การนาเว็บเพจต่าง ๆ มารวบรวมเป็นเว็บไซต์
• เมื่อสร้างเว็บเพจเสร็จ จัดรวบรวม และเรียบเรียงหน้าเว็บเพจแต่ละหน้า
ทาการทดสอบ แก้ไขปรับปรุงเสร็จแล้ว ก็สามารถเผยแพร่เว็บเพจทั้งหมดสู่
สาธารณชนในรูปแบบของเว็บไซต์ได้
ลงทะเบียนขอพื้นที่เว็บไซต์
• เป็นกำรเผยแพร่เว็บไซต์ที่สร้ำงเสร็จแล้วสู่ระบบเครือข่ำย
อินเทอร์เน็ต เพื่อให้บุคคลอื่น ๆ สำมำรถเข้ำชมเว็บไซต์ของเรำ
ได้ วิธีกำรก็คือ นำเว็บไซต์ที่เรำสร้ำงขึ้นไปไว้บนพื้นที่ที่ให้บริกำร
(Web Hosting) ซึ่งมีพื้นที่ ที่ให้บริกำรฟรีและแบบที่ต้องเสีย
ค่ำบริกำร ตัวอย่ำงเว็บ host ที่ให้พื้นที่ฟรี เช่น google site เป็นต้น

Mais conteúdo relacionado

Semelhante a หลักการออกแบบเว็บไซต์

Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2beauten
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8duangnapa27
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dreamsommat
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบJiJee Pj
 
Web development processes
Web development processesWeb development processes
Web development processesMeaw Sukee
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power pointkeeree samerpark
 
lec03_webdesign.pdf
lec03_webdesign.pdflec03_webdesign.pdf
lec03_webdesign.pdfMAiMAi339516
 
Chapter4
Chapter4Chapter4
Chapter4aumtall
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfjompon
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordjompon
 

Semelhante a หลักการออกแบบเว็บไซต์ (20)

Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
Webpagemaker2
Webpagemaker2Webpagemaker2
Webpagemaker2
 
Outline
OutlineOutline
Outline
 
คู่มือ Dreamwever 8
คู่มือ Dreamwever 8คู่มือ Dreamwever 8
คู่มือ Dreamwever 8
 
คู่มือประกอบการสร้างเว็บไซต์ Dream
คู่มือประกอบการสร้างเว็บไซต์  Dreamคู่มือประกอบการสร้างเว็บไซต์  Dream
คู่มือประกอบการสร้างเว็บไซต์ Dream
 
ออกแบบ
ออกแบบออกแบบ
ออกแบบ
 
Frontpage
FrontpageFrontpage
Frontpage
 
เล่มเล็ก New
เล่มเล็ก Newเล่มเล็ก New
เล่มเล็ก New
 
Chapter 1
Chapter 1Chapter 1
Chapter 1
 
คู่มือ Word
คู่มือ Wordคู่มือ Word
คู่มือ Word
 
Web development processes
Web development processesWeb development processes
Web development processes
 
E book4
E book4E book4
E book4
 
คู่มือ Power point
คู่มือ Power pointคู่มือ Power point
คู่มือ Power point
 
หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์หลักการออกแบบเว็บไซต์
หลักการออกแบบเว็บไซต์
 
ใบความที่ 3
ใบความที่ 3ใบความที่ 3
ใบความที่ 3
 
lec03_webdesign.pdf
lec03_webdesign.pdflec03_webdesign.pdf
lec03_webdesign.pdf
 
Chapter4
Chapter4Chapter4
Chapter4
 
คู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdfคู่มือประกอบการสร้างเว็บไซต์Pdf
คู่มือประกอบการสร้างเว็บไซต์Pdf
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Wordคู่มือประกอบการสร้างเว็บไซต์ด้วย Word
คู่มือประกอบการสร้างเว็บไซต์ด้วย Word
 

Mais de Pongpitak Toey

เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560Pongpitak Toey
 
เครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรมเครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรมPongpitak Toey
 
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1Pongpitak Toey
 

Mais de Pongpitak Toey (8)

เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560เปรียบเทียบหลักสูตร 2560
เปรียบเทียบหลักสูตร 2560
 
เครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรมเครื่องมือพื้นฐานของโปรแกรม
เครื่องมือพื้นฐานของโปรแกรม
 
บทที่ 2
บทที่ 2บทที่ 2
บทที่ 2
 
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
นายพงศ์พิทักษ์ รัตนภักดี เลขที่ 1
 
กลุ่ม2
กลุ่ม2กลุ่ม2
กลุ่ม2
 
กลุ่ม2
กลุ่ม2กลุ่ม2
กลุ่ม2
 
กลุ่ม2
กลุ่ม2กลุ่ม2
กลุ่ม2
 
ใบงาน 3.1
ใบงาน 3.1ใบงาน 3.1
ใบงาน 3.1
 

หลักการออกแบบเว็บไซต์