การสร้างเว็บไซต์

การสรางเว็บไซต

"เวบ็ ไซต" คอื อะไร?

เวลิ ด ไวด เวบ็ (World Wide Web – www)
หรอื เรียกยอ ๆ วา เว็บ(web)

คือ แหลงท่เี ก็บรวบรวมขอมูลเอกสาร
และส่ือประสมตา งๆ เชน ภาพ เสยี ง
ขอความ คาํ ท่ีใชเ รยี กกลมุ ของเวบ็ เพจ
ดังน้ันภายในเว็บไซตจะประกอบไปดวย
โฮมเพจและเว็บเพจ โดยเว็บไซตตองมี
การจดทะเบียนชื่อเว็บไซตน้ันๆ ไวแลว
เชน http://www.google.com,
http://www.mkp.ac.th เปนตน

รูปแบบของเว็บไซต

Static Website

มสี ทิ ธเิ พยี งแค่มอง

Dynamic Website

เปนเจา้ ของของคณุ

ศัพทเบื้องตนเกยี่ วกบั เวบ็ ไซต

อินเตอรเนต็ (Internet) เปนเครอื ขา่ ยคอมพวิ เตอรท์ ีใหญท่ ีสดุ ในโลก
ซงึ รวมเอาเครอื ขา่ ยยอ่ ยเปนจาํ นวนมากต่อ

เชอื มภายใต้มาตรฐานเดยี วกัน

เปนโปรโตคอลสาํ หรบั เปดดขู อ้ มูลจาก www เรยี กใชง้ านได้ http
โดยระบุ http:// และตามดว้ ย URL ในชอ่ งกรอก Address
(HyperText Transfer Protocol)
ดา้ นบนของโปรแกรมเวบ็ บราวเซอร์

URL ขอ้ ความทีบอกตําแหนง่ ของขอ้ มูลใน Internet
URL ประกอบดว้ ย
(Uniform Resource Locator)
โปรโตคอล + domain name + (directory ทีเก็บไฟล์)

โดเมนเนม (domain name)

คือ ชอื เรยี กเวบ็ ไซต์นนั เอง การจดทะเบยี นโดเมนเนมจงึ เปนการ
ลงทะเบยี นชอื ใหก้ ับเวบ็ ไซต์ของเราในโลกอินเตอรเ์ นต็ เชน่

sanook.com และ yahoo.com เปนต้น
โดเมนเนม แบง่ ออกเปน 2 ประเภท
- โดเมน 2 ระดบั
- โดเมน 3 ระดบั

โดเมน 2 ระดับ เชน่ hotmail.com , thai.net
โดเมน 3 ระดับ เชน่ dora.co.th , onec.go.th , kois.go.kr

ซัพโดเมน (Sub Domain)

เปนเวบ็ ยอ่ ยของเวบ็ ไซต์ของเราอีกที มปี ระโยชนส์ าํ หรบั ท่าน
ทีมธี ุรกิจ หลายประเภท เปนการจาํ แนกแยกแยะหมวดหมูธ่ ุรกิจ

Sub Domain เปนเวบ็ ยอ่ ยของเวบ็ ไซต์ของเราอีกที โดย
ปกติถ้ามี Domain ชอื sanook.com เราจะเขา้ ชมเวบ็ ไซต์ของเรา
โดยพมิ พ์ www.sanook.com แต่หากเราต้องเขา้ ชมเวบ็ ยอ่ ย
ของเราจะต้องพมิ พ์ http://news.sanook.com sub domain

มปี ระโยชนส์ าํ หรบั ท่านทีมธี ุรกิจ หลายประเภท เปนการจาํ แนก
แยกแยะหมวดหมูธ่ ุรกิจ

คาํ ยอขององคก ร

ตวั ยอของประเทศท่ตี ัง้ ขององคก ร

เว็บไซต (Website)

โฮมเพจ (Homepage)
เว็บเพจ (Webpage)

เวบ็ เบราเซอร (Web Browser)

คือโปรแกรมทีใชส้ าํ หรบั เปดเวบ็ เพจหรอื รบั สง่ ขอ้ มูลตามทีเครอื งลกู ขา่ ยรอ้ งขอเมอื เราเปดเขา้ สู่

อินเตอรเ์ นต็ เวบ็ เบราเซอรท์ ีไดร้ บั ความนยิ มปจจุบนั มหี ลายโปรแกรม เชน่ Microsoft Internet
Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome

Search engine

เปนเครอื งมอื หรอื โปรแกรมในการค้นหาเวบ็ ต่างๆ โดยมกี ารเก็บ รายชอื เวบ็ ไซต์ และขอ้ มูลที

เกียวขอ้ งต่างๆ ของเวบ็ ไซต์ และนาํ มาจดั เก็บไวใ้ น server เพอื ใหส้ ามารถค้นหาและแสดงผลได้
สะดวกรวดเรว็ เชน่ google.com, yahoo.com, bing.com, altavista.com, sanook.com

เปนต้น

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

การวางแผน เพ่อื ใหก ารทํางานในข้นั ตอนตา ง ๆ มแี นวทางท่ีชดั เจน

เพอื่ ใหเห็นภาพวาเราตอ งการ

การกําหนดเนือ้ หาและจดุ ประสงคข องเว็บไซต

นาํ เสนอขอ มลู แบบใด

การกําหนดกลุมเปา หมาย เพือ่ ใหการสรางและออกแบบเว็บไวตไ ดรบั ความนยิ ม

การเตรียมขอ มลู ขอมลู จดั วา เปนสิง่ ทเี่ ชญิ ชวนใหผูอนื่ เขามาเย่ียมชมเว็บไซต

การออกแบบโครงสรางเวบ็ ไซต

เวบ็ ทม่ี โี ครงสรางแบบเรียงลาํ ดับ (Sequential Structure)

เปน โครงสรางแบบธรรมดาทใ่ี ชกันมากท่สี ดุ เนอื่ งจากงา ยตอการจัดระบบ
ขอ มูล ขอมลู ท่นี ยิ ม จัดดว ยโครงสรา งแบบนมี้ กั เปนขอ มลู ที่มีลักษณะเปน

เรื่องราวตามลาํ ดับของเวลา

เว็บท่มี โี ครงสรา งแบบลาํ ดบั ขั้น (Hierarchical Structure)

เปน วิธที ดี่ ที สี่ ุดวธิ ีหนึ่งในการจัดระบบโครงสรางทม่ี คี วามซับซอนของขอมลู โดยแบง
เนอ้ื หา ออกเปนสวนตา งๆ และมีรายละเอียดยอ ยๆ ในแตละสวนลดหล่ันกันมา

ลักษณะเดน เฉพาะของ เวบ็ ประเภทน้คี ือการมจี ุดเร่มิ ตนทจ่ี ดุ รวมจุดเดยี ว นน่ั คือ โฮมเพจ
(Homepage) และเชอื่ มโยงไปสูเนอื้ หา ในลกั ษณะเปนลาํ ดับจากบนลงลาง

เวบ็ ทม่ี โี ครงสรางแบบตาราง (Grid Structure)

โครงสรางรูปแบบน้ีมีความซับซอนมากกวา รปู แบบทผ่ี า นมา การออกแบบเพ่ิมความยืดหยนุ ใหแ กก ารเขาสู
เนื้อหาของผใู ช โดยเพ่ิมการเช่อื มโยงซงึ่ กนั และกนั ระหวา งเน้ือหาแตล ะสว น เหมาะแก การแสดงใหเหน็ ความ
สมั พนั ธกนั ของเน้อื หา การเขา สเู นอ้ื หาของผูใชจะไมเปน ลักษณะเชงิ เสน ตรง เนือ่ งจากผใู ชส ามารถเปลี่ยน

ทิศทางการเขาสเู น้ือหาของตนเองได

เว็บทม่ี ีโครงสรา งแบบใยแมงมมุ (Web Structure)

โครงสรา งประเภทนจ้ี ะมคี วามยดื หยนุ มากทส่ี ดุ ทุกหนา ในเว็บสามารถจะเชอ่ื มโยงไป
ถงึ กนั ไดห มด เปนการสรา งรปู แบบการเขาสูเนอ้ื หาท่ีเปนอสิ ระ ผใู ชสามารถกําหนด

วธิ กี ารเขา สเู น้อื หาไดดว ยตนเอง

สวนประกอบของเวบ็ ไซตท่ีดี

1. สว นหวั (Page Header) จะอยบู รเิ วณบนสุดของหนาเวบ็ เพจ เปน สว นทแี่ สดงช่ือ เวบ็ ไซต
โลโก แบนเนอร โฆษณาลงิ กสําหรับขามไปยงั หนาเว็บอื่น

2. สว นเนอื้ หา (Page Body) อยูบริเวณตอนกลางของหนา เว็บเพจ ซ่งึ เปนสวนที่แสดงเน้ือหา
ภายในหนาเวบ็ เพจนน้ั โดยประกอบดว ยขอ ความ ขอมูล ภาพเคลอ่ื นไหว เปนตน

3. สวนทา ย (Page Footer) อยูบรเิ วณดานลา งสุดของหนาเว็บเพจ สวนมากใชส ําหรบั
ลิงกขอ ความส้นั ๆ เขาใจงา ย หรือจะมชี ่ือเจาของเว็บไซต อีเมลแอดเดรสของผดู แู ลเว็บไซต

สาํ หรับตดิ ตอกับทางเว็บไซต

การออกแบบเว็บเพจแตละหนา ในเว็บไซต

ตวั อยางเว็บไซตทีส่ รา งดวย WIX