1. L o g o
การพัฒ นาเว็บ เพจ
(Web Page)

2. L o g o
ผลการเรีย นรู้ท ี่ค าดหวัง
1. สามารถอธิบ ายความ
หมายของเว็บ เพจได้
2. สามารถอธิบ ายหลัก การ
ออกแบบ ขั้น ตอนการ พัฒ นา
และการวางแผนพัฒ นา
เว็บ เพจได้
www.themegallery.com Company Logo

3. บทนำา : การพัฒ นา L o g o
เว็บ เป็น ศาสตร์ห นึ่ง ที่น ัก
นั บ เพจ
คอมพิว เตอร์แ ละผู้ส นใจที่จ ะศึก ษา
เพื่อ สร้า งสรรค์ผ ลงาน ชิน งานผ่า น
้
เครือ ข่า ยอิน เตอร์เ น็ต การออกแบบ
และพัฒ นาเว็บ เพจ สามารถทำา ได้
หลายระบบ ขึ้น อยู่ก ับ ลัก ษณะของ
ข้อ มูล ความชอบของผู้พ ัฒ นา ตลอด
จนกลุม เป้า หมาย ที่ต ้อ งการนำา เสนอ
่
ดัง นั้น การศึก ษาถึง หลัก การพัฒ นา
www.themegallery.com Company Logo

4. คำา ที่ค วรรู้จ ัก ก่อ นสร้า งL o g o
เว็บ ไซต์
เว็บไซต์ (Website) คือ ชุดของ
ข้อมูลทีตองนำาเสนอบนระบบ
่ ้
อินเตอร์เน็ต ประกอบด้วย เว็บเพจ
(Web Page) ตังแต่ 1 หน้า ขึ้นไป
้
เว็บเพจ (Webpage) คือ ไฟล์
HTML 1 ไฟล์ที่แสดงผลบน
บราวเซอร์นั่นเอง
โฮมเพจ(Homepage) คือ เว็บเพจ
www.themegallery.com Company Logo

5. L o g o
ตัว อย่า ง
Homepage
Website
Webpage
www.themegallery.com Company Logo

6. คำา ที่ค วรรู้จ ัก ก่อ นสร้า ง L o g o
เว็บ ไซต์
URL (Universal Resource
Location) คือ มาตรฐานในการ
กำาหนดทีอยู่ของเว็บไซต์ในเครือข่าย
่
อินเทอร์เน็ต หรือเรียกอีกอย่างว่าทีอยู่
่
ของเว็บไซต์ (Internet Address)
เช่นhttp://www.hi.ac.th
บราวเซอร์ (Browser) คือ โปรแกรม
แสดงเว็บเพจหรือหน้าเว็บไซต์ทถก ี่ ู
สร้างขึ้นมาจากภาษา HTML เช่น
www.themegallery.com Company Logo

7. L o g o
คำา ที่ค วรรู้จ ัก ก่อ นสร้า ง
เว็บ ไซต์ (ต่อ )
HTML(
Hyper Text Markup Language)
คือ ภาษามาตฐานที่ใช้ในการสร้าง
เว็บเพจ เพือนำาไปแสดงบนบราวเซอร์
่
FTP (File Transfer Protocol) คือ
โปรโตคอลหรือมาตรฐานรูปแบบหนึง ่
ทีใช้ในการรับ-ส่งข้อมูลระหว่างเครื่อง
่
คอมพิวเตอร์ผ่านเครือข่าย
www.themegallery.com Company Logo

8. L o g o
คำา ที่ค วรรู้จ ัก ก่อ นสร้า ง
เว็บเซิร์ฟเวอร์ (Web server) คือ
เว็บ
ไซต์ (ต่อ )
เครื่องคอมพิวเตอร์เครื่องหนึงใน
่
เครือข่ายอินเทอร์เน็ตทีทำาหน้าทีเก็บ
่ ่
รวบรวมเว็บไซต์ตาง ๆ เอาไว้ เพือ
่ ่
ให้ผู้ชมสามารถเข้ามาเปิดดูเว็บไซต์
นันได้
้
ชือโดเมน (Domain name) คือ
่
ชือทีใช้อางถึงเว็บไซต์แทน IP
่ ่ ้
Address เพือให้จดจำาได้ง่าย โดย
่
www.themegallery.com Company Logo

9. L o g o
รูจ ัก รหัส โดเมน
้
รหัส ใช้ส ำา หรับ ตัว อย่า ง
โดเม
กลุ่ม การค้า และเว็บ ไซต์ Pantip.c
น
ทั่ว ไป om
com
สถาบัน การศึก ษา Ucla.edu
edu หน่ว ยงานของรัฐ ที่ไ ม่ใ ช่ Nasa.go
mil
gov หน่ว ยงานทางการทหาร v
net
หน่ว งงานทางการทหาร Army.mil
org
หน่ว ยงานเกี่ย วกับ เครือ ข่า ย Isp.net
co.th
หน่ว ยงานที่ไ ม่ห วัง ผลกำา ไร Unesco.
www.themegallery.com Company Logo

10. L o g o
โปรแกรมสร้า งเว็บ เพจ
เดิม การพัฒ นาเว็บ เพจจะใช้
โปรแกรมประเภท Text Editor
โดยผู้พ ัฒ นาจะต้อ งศึก ษาภาษา
HTML(HyperText Markup
Language) ซึ่ง สร้า งภาระให้แ ก่ผ ู้
สนใจในกลุ่ม ที่ไ ม่ไ ด้ศ ึก ษาด้า น
ไอทีม าโดยตรง
ดัง นั้น นัก โปรแกรมเมอร์ จึง
www.themegallery.com Company Logo

11. L o g o
เครื่อ งมือ พัฒ นาเว็บ เพจ
การพัฒ นาเว็บ เพจด้ว ยการลงรหัส
HTML ด้ว ยโปรแกรม Simple
Text Editors
การพัฒ นาเว็บ เพจด้ว ยคำา สั่ง Save
as HTML…
การพัฒ นาเว็บ เพจด้ว ย Browser-
Based HTML Editor
การพัฒ นาเว็บ เพจด้ว ยคำา สั่ง Web
www.themegallery.com Company Logo

12. L o g o
หลัก การออกแบบเว็บ เพจ
หลัก การออกแบบ สามารถทำา ได้
หลายระบบ ขึ้น อยู่ก ับ ลัก ษณะของ
ข้อ มูล ความชอบของผู้พ ัฒ นา
ตลอดจนกลุ่ม เป้า หมาย ที่ต ้อ งการ
นำา เสนอ เช่น หากกลุม เป้า หมาย
่
เป็น เด็ก วัย รุ่น และนำา เสนอข้อ มูล
เกี่ย วกับ ความบัน เทิง อาจจะ
ออกแบบให้ม ีท ิศ ทางการไหลของ
หน้า เว็บ เพจ ที่ห ลากหลายให้ล ูก
www.themegallery.com Company Logo

13. L o g o
หลัก การออกแบบเว็บ เพจ
(ต่อ ) ง ได้ 3 ลัก ษณะ
สามารถแบ่
1. แบบลำา ดับ ขั้น (Hierarchy)
เป็น การจัด แสดงหน้า เว็บ เรีย ง
ตามลำา ดับ กิ่ง ก้า นแตกแขนงต่อ
เนื่อ งไปเหมือ นต้น ไม้ก ลับ หัว
www.themegallery.com Company Logo

14. L o g o
หลัก การออกแบบเว็บ เพจ
(ต่อ ) ง เส้น (Linear) เป็น การจัด
2. แบบเชิ
แสดงหน้า เว็บ เรีย งต่อ เนื่อ งไปใน
ทิศ ทางเดีย ว
www.themegallery.com Company Logo

15. L o g o
หลัก การออกแบบเว็บ เพจ
(ต่อ )
3. แบบผสม (Combination)
เป็น การจัด หน้า เว็บ ชนิด ผสม
ระหว่า งแบบลำา ดับ ขั้น และแบบเชิง
เส้น
www.themegallery.com Company Logo

16. L o g o
แนวคิดในการออกแบบ
เรีย นรู้จ ากเว็บ ไซต์ต ่า งๆ
ประยุก ต์ร ูป แบบจากสิ่ง พิม พ์
ใช้แ บบจำา ลองเปรีย บเทีย บ
ออกแบบอย่า งสร้า งสรรค์
www.themegallery.com Company Logo

17. L o g o
หลักในการออกแบบเว็บไซต์
สร้า งลำา ดับ ชั้น ความสำา คัญ ของ
องค์ป ระกอบ
สร้า งรูป แบบ บุค ลิก และสไตล์
สร้า งความสมำ่า เสมอตลอดทั้ง
ไซต์
จัด วางองค์ป ระกอบที่ส ำา คัญ ไว้ใ น
ส่ว นบนของหน้า เสมอ
สร้า งจุด สนใจด้ว ยความแตกต่า ง
www.themegallery.com Company Logo

18. L o g o
สิ่ง ที่ต ้อ งคำา นึง ถึง ในการ
ออกแบบเว็บ เพจที่ด ี า ง
1. ความแปลก ความแตกต่
(Contrast) คือ แยกความแตกต่า ง
ที่อ ยู่บ นจอภาพให้เ ห็น ชัด เจน เช่น
การใช้ต ัว หนัง สือ เส้น สี ขนาด
ฯลฯ เพราะจะสามารถดึง ดูด ความ
สนใจได้ด ี
2. การยำ้า ซำ้า (Repetition) คือ
แบบแผนหรือ สไตล์ข องผู้อ อกแบบ
www.themegallery.com Company Logo

19. L o g o
สิ่ง ที่ต อ งคำา นึง ถึง ในการ
้
ออกแบบเว็บการวางแนว อ )
3. การจัด แถว เพจที่ด ี(ต่
(Alignment) คือ การจัด วางองค์
ประกอบต่า ง ๆ ต้อ งไม่ส ะเปะสะ
ปะ ไร้เ หตุผ ล ไม่ข ัด กับ ความรู้ส ก
ึ
ของผู้อ ่า น จัด ให้ด ูส ะอาด
4. ความใกล้เ คีย ง ความเกี่ย ว
เนื่อ ง (Proximity) คือ การจัด
วางองค์ป ระกอบทีเ กี่ย วเนื่อ งกัน
่
www.themegallery.com Company Logo

20. L o g o
องค์ป ระกอบของการ
ออกแบบเว็บ ไซต์
1. ความเรีย บง่า ย
2. ความสมำ่า เสมอ
3. ความเป็น เอกลัก ษณ์
4. เนื้อ หาที่ม ีป ระโยชน์
5. ระบบเนวิเ กชัน ทีใ ช้ง านง่า ย
่
6.ลัก ษณะทีน ่า สนใจ หน้า ตาของ
่
เว็บ ไซต์จ ะต้อ งมีค วามสัม พัน ธ์ก ับ
คุณ ภาพขององค์ป ระกอบต่า งๆ
www.themegallery.com Company Logo

21. L o g o
องค์ป ระกอบของการ
ออกแบบเว็บ า งไม่จ ำา กัดอผู้ใ ช้
7. การใช้ง านอย่ ไซต์ (ต่ )
ส่ว นใหญ่ส ามารถเข้า ถึง ได้ม าก
ที่ส ุด
8. คุณ ภาพในการออกแบบ การ
ออกแบบและเรีย บเรีย งเนื้อ หาอย่า ง
รอบคอบ
9.ระบบการใช้ง านที่ถ ูก ต้อ ง การ
ใช้แ บบฟอร์ม สำา หรับ กรอกข้อ มูล
www.themegallery.com Company Logo

22. L o g o
กระบวนการสร้า งและ
1. ออกแบบเว็บ เพจ
การวางแผน (Planning) ผู้สร้างเว็บ
จะต้องรวบรวมข้อมูลทีตองการจะนำามาส
่ ้
ร้างเว็บ กำาหนดวัตถุประสงค์และกลุมเป้า
่
หมาย
2. การออกแบบ (Design) การลงมือ
ปฏิบติ จัดพิมพ์เนื้อหา และคุณลักษณะอืน
ั ่
ทีตองใช้ในเว็บ การออกแบบก็จะเน้นที่
่ ้
การจัดหน้าจอของเว็บให้สอดคล้องกัน
3. การพัฒ นา (Development) เน้นไป
ทีการตกแต่งและเสริมเครื่องมือต่าง ๆ
่
www.themegallery.com Company Logo

23. L o g o
กระบวนการสร้า งและ
ออกแบบเว็บ เพจ การนำาเว็บที่
4. การติด ตั้ง (Publishing)
ได้สร้างขึ้นเข้าไปติดตังในเว็บเซอร์เวอร์
้
เพือให้แสดงผลได้ในระบบอินเทอร์เน็ต
่
หรือจะเรียกว่า การอับโหลด (Up load)
5. การบำา รุง รัก ษา (Maintenance)
เป็นขั้นตอนประเมินผลและติดตามผลการ
ติดตังเว็บไซต์วามีข้อขัดข้องหรือต้อง
้ ่
ปรับปรุงเปลียนแปลงเว็บเพิมเติมให้ทัน
่ ่
สมัยอยู่เสมอ อาจจะเรียกได้ว่าขั้นตอน
การอับเดท (Up date)
www.themegallery.com Company Logo

24. L o g o
การกำาหนดชื่อไฟล์ และนามสกุล
ของไฟล์เอกสารเว็บ
 ควรใช้ต ว อัก ษร a - z หรือ
ั
ตัว เลข 0 - 9 หรือ ผสมกัน
ตัว อัก ษร a - z ควรเป็น ตัว พิม พ์
เล็ก
ห้า มตัง ชือ ไฟล์เ ป็น ภาษาไทย
้ ่
ชือ ไฟล์แ รกของเอกสารเว็บ มัก
่
จะใช้ช ื่อ index หรือ default
www.themegallery.com Company Logo

25. L o g o
ขั้น ตอนการพัฒ นา
เว็บ เพจ ฒ นาเว็บ เพจ
• วางแผนการพั
• กำา หนดไดเร็ก ทรอรี่ หรือ โฟลเดอร์
(Directory/Folder) ทีใ ช้เ ก็บ
่
เอกสารเว็บ
• สร้า งภาพ หรือ จัด หาภาพที่
เกี่ย วข้อ งกับ เนื้อ หา แล้ว จัด เก็บ ไว้
ในไดเร็ก ทรอรี่ท ี่ส ร้า งไว้
www.themegallery.com Company Logo

26. L o g o
ขั้น ตอนการพัฒ นา
เว็บ เพจ
• วางแผนการพัฒ นาเว็บ เพจ
• กำา หนดไดเร็ก ทรอรี่ หรือ โฟลเดอร์
(Directory/Folder) ที่ใ ช้เ ก็บ เอกสารเว็บ
• สร้า งภาพ หรือ จัด หาภาพที่เ กี่ย วข้อ งกับ
เนือ หา แล้ว จัด เก็บ ไว้ใ นไดเร็ก ทรอรี่ท ี่ส ร้า ง
้
ไว้
• สร้า งเอกสารเว็บ โดยกำา หนดชือ ไฟล์เ อกสาร
่
เว็บ ตามข้อ กำา หนดของผูด ูแ ลระบบเครือ ข่า ย
้
(Web System Administrator) และจัด เก็บ
ไว้ใ นไดเร็ก ทรอรี่ท ี่ส ร้า งไว้ Company Logo
www.themegallery.com

27. L o g o
หลักเกณฑ์ในการเลือกภาพ
Graphic
 ขนาดไฟล์ไ ม่ค วรเกิน 80 กิโ ลไบต์
เพื่อ ความรวดเร็ว ในการแสดงผล
 ใช้ไ ฟล์แ บบ JPEG สำา หรับ รูป ถ่า ย หรือ
รูป ทีม ส ีเ กิน 256 สี
่ ี
 ใช้ไ ฟล์แ บบ GIF สำา หรับ ภาพวาดหรือ
ภาพการ์ต น ที่ม ส ไ ม่เ กิน 256 สี
ู ี ี
 เลือ กภาพทีม ค วามน่า สนใจและดึง ดูด
่ ี
เพื่อ ไม่ใ ห้เ สีย เวลาทีเ สีย ไปในการ
่
www.themegallery.com Company Logo

28. L o g o
ไฟล์ภาพกราฟิกทีนำามาใช้
่
ไฟล์ฟ อร์แ มตบ
ในการทำาเว็ JPG, JPEG
ไฟล์ฟ อร์แ มต GIF
ไฟล์ฟ อร์แ มต PNG
www.themegallery.com Company Logo

29. L o g o
ไฟล์สกุล JPG (Joint Photographer’s
Experts Group)
 จุดเด่น
 แสดงสีได้สูงสุด16.7 ล้านสี (สนับสนุนสีได้ถึง
24 bit)
 สามารถกำาหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
 มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่
ละเอียดในระบบ Progressive
 มีโปรแกรมสนับสนุนการสร้างจำานวนมาก
 เรียกดูได้กับ Graphics Browser ทุกตัว
 ตั้งค่าการบีบไฟล์ได้ (compress files)
จุดด้อย
www.themegallery.com Company Logo

30. L o g o
ไฟล์สกุล GIF (Graphics Interlace
File)
จุดเด่น
 แสดงสีได้สูงสุด 256 สี
 สามารถใช้งานข้ามระบบ (Cross Platform) หมายความว่า
คอมพิวเตอร์ทกระบบ ไม่ว่าจะใช้ Windows, Unix ก็
ุ
สามารถเรียกใช้ไฟล์ภาพสกุลนี้ได้
 มีขนาดไฟล์ตำ่า จากเทคโนโลยีการบีบอัดภาพ ทำาให้สามารถ
ส่งไฟล์ภาพได้รวดเร็ว
 สามารถทำาพื้นของภาพให้เป็นพื้นแบบโปร่งใสได้
(Transparent)
 มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียดใน
ระบบ Interlace
 มีโปรแกรมสนับสนุนการสร้างจำานวนมาก
 เรียกดูได้กบ Graphics Browser ทุกตัว
ั
 ความสามารถด้านการนำาเสนอแบบภาพเคลื่อนไหว (GIF
Animation)
 จุดด้อย
www.themegallery.com Company Logo

31. L o g o
ไฟล์สกุล PNG (Portable Network
Graphics)
 จุดเด่น
 แสดงสีได้สูงสุด 16.7 ล้านสี
 สนับสนุนสีได้ถึงตามค่า True color (16 bit, 32 bit หรือ
64 bit)
 สามารถกำาหนดค่าการบีบไฟล์ได้ตามที่ต้องการ
 มีระบบแสดงผลแบบหยาบและค่อยๆ ขยายไปสู่ละเอียด
(Interlace)
 สามารถทำาพื้นโปร่งใสได้
 จุดด้อย
 หากกำาหนดค่าการบีบไฟล์ไว้สูง จะใช้เวลาในการคลายไฟล์
สูงตามไปด้วย แต่ขนาดของไฟล์จะมีขนาดตำ่า
 ไม่สนับสนุนกับ Graphic Browser รุ่นเก่า สนับสนุนเฉพาะ
IE 4 และ Netscape 4
www.themegallery.com ยดของภาพและจำานวนสีขึ้นอยู่กับ VideoCompany Logo
 ความละเอี Card

32. L o g o
การออกแบบระบบเนวิเกชัน
ระบบเนวิเ กชัน แบบลำา ดับ ขั้น
(Hierarchical)
ระบบเนวิเ กชัน แบบโกลบอล
(Global)
ระบบเนวิเ กชัน แบบโลคอล
(Local)
ระบบเนวิเ กชัน เฉพาะที่ (Ad
Hoc)
www.themegallery.com Company Logo

33. L o g o
HTML (Hyper Text Markup
Language)
HTML เป็น ภาษาทีใ ช้ใ นการ
่
พัฒ นาเว็บ เพจ เพื่อ ให้โ ปรแกรม
เว็บ บราวเซอร์ (web brower)
ต่า งๆ สามารถแปลงคำา สั่ง แสดงผล
ในลัก ษณะของรูป ภาพ ตัว อัก ษร
เสีย ง ภาพเคลื่อ นไหว โดยไฟล์ท ี่
สร้า งจะมีน ามสกุล .html
หรือ .htm ก็ไ ด้
www.themegallery.com Company Logo

34. L o g o
HTML (Hyper Text Markup
Language) หมายถึง การระบุว ่า
<html> <HTML>
<head> เอกสารใช้ภ าษา HTML และ
<title>Hello</
title>
บรรทัด สุด ท้า ยจะต้อ งมี
</head> </HTML>
<body>
<HEAD> เพื่อ ระบุช อ เว็บ เพจ
ื่
<p>สวัสดี</p> โดยจะต้อ งใช้ค ำา สัง <TITLE>
่
เป็น ตัว บอก และบรรทัด
</body> สุด ท้า ยจะต้อ งมี </TITLE> </
</html> HEAD>
<body> เปิด ส่ว นเนือ หา
้ next
www.themegallery.com
</body> Company Logo

35. L o g o
Tag
Tag เป็น ลัก ษณะเฉพาะของภาษา HTML ใช้
ในการระบุร ูป แบบคำา สั่ง หรือ การลงรหัส คำา สั่ง
HTML ภายในเครื่อ งหมาย less-than bracket
( < ) และ greater-than bracket ( > ) โดยที่
Tag HTML แบ่ง ได้ 2 ลัก ษณะ คือ
 Tag เดี่ย ว
เป็น Tag ทีไม่ต้องมีการปิดรหัส เช่น <P>, <HR>
่
เป็นต้น
 Tag เปิด /ปิด
เป็น Tag ทีประกอบด้วย Tag เปิด และ Tag ปิด โดย
่
Tag ปิด จะมีเครื่องหมาย slash (/) นำาหน้าคำาสั่งใน
Tag นั้นๆ เช่น <B>…</B>, <P>…</P> เป็นต้น back
www.themegallery.com Company Logo