Transcript การออกแบบและพัฒนาเว็บไซต์

เว็บไซต์ (Website)
การออกแบบและพัฒนาเว็บไซต์
ที่เกี่ยวข้องกับ Website
Domain Name
Web Hosting
พื้นที่ใช้งาน website
Design
ออกแบบ website
ชื่อ website
Website
Development
พัฒนา website
เว็บไซต์ (Website)
 ที่ต้ งั เครื อข่ายข้อมูลที่เชื่อมโยง
ติดต่อกันได้ทวั่ ทุกมุมโลก
 การค้นหาข้อมูลในแต่ละเว็บไซต์
จะต้องทราบชื่อเว็บไซต์ที่เราต้องการ
สามารถค้นหา ผ่านทางเว็บไซต์
ที่เปิ ดบริ การให้คน้ คว้าหาข้อมูลต่าง ๆ
เป็ นภาษาอังกฤษหรื อภาษาไทยได้ที่
www.google.com
www.yahoo.com
www.sanook.com
เป็ นต้น
Website ต่ าง ๆ
ค้นหา
ดูดวง
บันเทิง
กฎหมาย
กีฬา
ชลประทาน
การศึกษา
สุ ขภาพ
(Web Hosting) พื้นที่สาหรับ website
ต้ องการมีwebsite
เป็ นขององค์ กร
ซื้อ
ตกลงซื้อพื้นที่ Website
เรี ยกว่า (Web servers)
เรียกว่า Web
Hosting
มีเยอะมากพอ
ที่จะแบ่งพื้นที่
Website
ให้ผอู้ ื่นเช่าได้
ได้ พนื้ ที่ website เป็ นขององค์ กร
มีบุคลากรที่เชี่ยวชาญดูแล
จัดการระบบ website
ต้นทุนสูง
ให้บริ การ
Domain Name
(ชื่อ website)
ต้ องการมีwebsite
เป็ นของตัวเอง
(Web Hosting)
 โฮสติง้ หรื อ เว็บโฮสติง้ หรื อมีชื่อเรี ยกภาษาอังกฤษเเตกต่างกันไปเช่น
(Web Hosting หรื อ Hosting, Host) คือ พื้นที่การ
รับฝากเว็บ เพื่อออนไลน์บนอินเตอร์เน็ต หรื อเรี ยกว่า HSP ย่อมา
จาก Hosting Service Provider เป็ นเทคโนโลยี
สาหรับงานสร้างเว็บไซต์ เพื่อให้เว็บไซต์น้ นั สามารถมองเห็นได้บน
อินเตอร์เน็ต
(Web Hosting)
 โฮสติ้งหรื อเว็บโฮสติ้ง จึงเป็ นพื้นที่การใช้งานในระบบอินเทอร์เน็ต สาหรับ
เว็บไซต์ทวั่ ไปแล้ว โฮสติ้งมีลกั ษณะที่เปรี ยบได้เหมือนกับ ฮาร์ดดิสก์ ใน
เครื่ องคอมพิวเตอร์ของเรานัน่ เอง โดยรู ปแบบการให้บริ การ จะอนุญาตให้
ผูใ้ ช้บริ การสามารถนาเว็บเพจของตนเอง นาขึ้นไปออนไลน์บนอินเตอร์เน็ต
ดังนั้นเราจะพบว่าทุกเว็บไซต์ที่ออนไลน์บนอินเตอร์เน็ต จะต้องได้รับการ
ฝากหรื อเก็บไว้บนคอมพิวเตอร์พิเศษที่เรี ยกว่า เว็บเซิร์ฟเวอร์ Web
servers ซึ่ง เซิร์ฟเวอร์ นี้ จะทาหน้าที่เป็ นตัวติดต่อซึ่งกันและกันและ
ทุกหนทุกแห่งตลอด 24 ชัว่ โมง เพื่อให้เว็บไซต์ของเรา สามารถเข้าถึงได้
จากทุกที่ทุกเวลาในโลกที่มีการต่อเชื่อม การเข้าชมเว็บไซต์บนอินเตอร์เน็ต
ง่ายๆ ก็คือการพิมพ์ชื่อเว็บไซต์ หรื อชื่อโดเมน (Domain Name) ที่
เรารู ้จกั ยกตัวอย่างเช่น www.keepidea.net ,
www.evohosting.in.th
(Web Hosting) (ต่อ)
 โดยผูใ้ ห้บริ การได้ทาการติดตั้งระบบทั้งหมดเป็ นที่เรี ยบร้อยแล้ว เมื่อมีบุคคลที่
พิมพ์ชื่อเว็บไซต์ดงั กล่าว ชื่อนั้นจะถูกส่ งตามเส้นทาง จากเครื่ องคอมพิวเตอร์
หนึ่งไปยังอีกเครื่ องคอมพิวเตอร์ หนึ่งไปเรื่ อยๆจนกระทัง่ ไปพบเครื่ องเว็บ
เซิ ร์ฟเวอร์ ที่เว็บไซต์น้ นั ได้ฝากเว็บไซต์ไว้ (Host computer) ภายใน
ไม่กี่เสี้ ยววินาทีกจ็ ะสามารถเปิ ดเว็บดังกล่าวได้ ดังนั้นการที่จะนาเว็บไซต์ของเรา
ออนไลน์บนอินเตอร์ เน็ต สิ่ งแรกที่จาเป็ นจะต้องมี นัน่ ก็คือเว็บเซิ ร์ฟเวอร์ นนั่ เอง
แต่ทว่าการติดตั้งระบบ เว็บเซิ ร์ฟเวอร์ เป็ น ของตนเองนั้น เราสามารถที่จะทาได้
แต่เพราะว่ามีค่าใช้จ่ายที่ค่อนข้างสู งมากและที่สาคัญยิง่ ไปกว่านั้น จาเป็ นอย่างยิง่
ที่จะต้องมีผเู ้ ชี่ยวชาญเฉพาะด้านเพราะเป็ นเทคนิคชั้นสู ง ต้องคอยดูแลตลอด
24 ชัว่ โมง ดังนั้นด้วยเหตุจากัดดังกล่าว บริ ษทั ส่ วนใหญ่จึงไม่สามารถ
ดาเนินการลงทุนเพื่อเป็ นเจ้าของเองได้ และนี่คือเป็ นที่มาของบริ การของเว็บโฮส
ติ้ง (Web Hosting หรื อ Hosting, Host)
เว็บโฮสติ้งที่ดีน้ นั ดังที่กล่าวมาข้างต้น เพราะต้องมีบุคลากรที่ชานาญการ จึงต้อง
ให้บริ การทั้งเครื่ องไม้เครื่ องมือ ที่สามารถอานวยความสะดวก มีความทันสมัย
และให้คาแนะนาแก่ผใู ้ ช้บริ การอย่างทันท่วงที เพื่อให้ลกู ค้าสามารถดูแลและ
แก้ไขเว็บไซต์ของตนเองได้ตลอดเวลา
Domain Name
โดเมนเนม (Domain Name) หรื อ ชื่อ เว็บไซต์
ยูอาร์แอล (URL) Uniform Resource Locator
หมายถึง ตัวบ่งบอกข้อมูล หรื อ ที่อยู่ (Address)
ของไฟล์หรื อเว็บไซต์บนอินเตอร์เน็ต
ตัวอย่างต่อไปนี้ แสดงถึง
Domain Name : example.com
URL : http://www.example.com
โดเมนเนม (domain name)
 หมายถึง ชื่อที่ใช้ระบุลงในคอมพิวเตอร์ (เช่น เป็ นส่ วนหนึ่งของที่อยู่
เว็บไซต์ หรื ออีเมล์แอดเดรส) เพื่อไปค้นหาในระบบ โดเมนเนมซีส
เทม เพื่อระบุถึง IP Address (Internet Protocol Address) ของชื่อ
นั้นๆ เป็ นชื่อที่ผจู ้ ดทะเบียนระบุให้กบั ผูใ้ ช้เพื่อเข้ามายังเว็บไซต์ของ
ตน บางครั้ง เราอาจจะใช้ "ที่อยูเ่ ว็บไซต์" แทนก็ได้
 โดเมนเนม หรื อ ชื่อโดเมน เป็ นชื่อที่ต้ งั ขึ้นเพื่อให้ง่ายต่อการจดจา
เนื่องจากไอพีแอดเดรสนั้นจดจาได้ยากกว่า และเมื่อการเปลี่ยนแปลง
ไอพีแอดเดรส ผูใ้ ช้ไม่จาเป็ นต้องรับรู ้หรื อจดจาไอพีแอดเดรสใหม่
ยังคงใช้โดเมนเนมเดิมได้ต่อไป
หลักที่ใช้ในการตั้งชื่อ โดเมนเนม
-
ความยาวของชื่อ ตั้งได้ไม่เกิน 67 ตัวอักษร
สามารถใช้ตวั อักษรภาษาอังกฤษผสมกับตัวเลขหรื อเครื่ องหมายขีด(-) ได้
ตัวอักษรภาษาอังกฤษ ใช้ตวั เล็กหรื อตัวใหญ่กไ็ ด้
ห้ามใช้เครื่ องหมายขีด (-) นาหน้าชื่อ โดเมนเนม
ห้ามเว้นวรรคในชื่อ โดเมนเนม
Domain ประเภทต่ าง ๆ (นามสกุล website)
.com.
.net
.org
.go.th
.biz
ใช้ทาเว็บไซต์ของบริ ษทั ห้างร้านโดยทัว่ ไป รวมทั้งเว็บไซต์ส่วนตัว
และมีบางครั้งนาไปใช้ทาเว็บไซต์ (web site) ประเภทอื่นๆ ด้วย
ใช้ทาเว็บไซต์เกี่ยวกับระบบเน็ตเวิร์ค (network) ของคอมพิวเตอร์
หรื อเว็บไซต์บริ การอินเตอร์ เน็ต แต่บางครั้งก็นาไปใช้ดา้ นอื่นด้วย
ใช้ทาเว็บไซต์ของส่ วนราชการ บางครั้งก็มีการจดทะเบียนนาไปใช้กบั
เว็บไซต์ประเภทอื่นด้วย
เป็ นเวบไซต์ของหน่วยงานรัฐบาล
สาหรับเว็บไซต์ธุรกิจโดยทัว่ ไป เป็ น โดเมน น้องใหม่ พึงเกิดขึ้นจาก
การรวมกลุ่มธุรกิจที่เป็ น ธุรกิจจริ งๆ ซึ่ งก็ได้รับความสนใจและเป็ นที่
รู ้จกั ค่อนข้างเร็ ว
.info
.tv
.cc
.ws
ใช้สาหรับเว็บไซต์ที่ให้รายละเอียดเกี่ยวกับข้อมูลต่างๆ เช่น
ข้อมูลของประเทศต่างๆ เป็ นต้น (ข้อมูลสารสนเทศ )
เป็ นเว็บไซต์ของสื่ อโฆษณาต่างๆ โดยเฉพาะสื่ อทางด้านภาพ
และเสี ยง ปัจจุบนั ค่อนข้างได้รับความนิยมจากเว็บไซต์
ประเภทสื่ อพอสมควร
เป็ น โดเมน ที่คาดว่าน่าจะมีความนิยมทัดเทียมกับ .com
ในเวลาอันใกล้น้ ีเนื่องจาก .com แทบจะไม่มีชื่อดีๆ เหลืออยู่
แล้ว การนาไปใช้งานสามารถนาไปใช้กบั เว็บไซต์ธุรกิจ
โดยทัว่ ไปได้
เป็ นชนิดของชื่อเว็บไซต์หนึ่งที่พยามยามสร้างขึ้นมาเพื่อ
แข่งขันกับ .cc การนาไปใช้งานสามารถนาไปใช้ได้กบั ทุก
ประเภทเว็บไซต์
.in.th
.co.th
.ac.th
Or.th
เป็ นเวบไซต์ของบุคคลธรรมดาโดยทัว่ ไป ที่อาศัยอยูใ่ นประเทศ
ไทยชื่อโดเมนจะใช้ชื่ออะไรก็ได้ ใช้สาเนาบัตรประชาชน หรื อ
สาเนาใบขับขี่เป็ นหลักฐานการจดทะเบียน
เป็ นเวบไซต์ของส่ วนราชการของประเทศไทย โดยปกติจะเป็ น
องค์กรขนาดใหญ่
เป็ นเวบไซต์ของสถานศึกษาต่างๆ ชื่อของโดเมนที่จดทะเบียน
ต้องเป็ นชื่อของสถานศึกษานั้นๆ หรื อชื่อย่อของชื่อสถานศึกษา
ใช้สาเนาเอกสารการขออนุญาตก่อตั้งสถานศึกษาเป็ นหลักฐาน
ใช้ทาเว็บไซต์ของส่ วนราชการ และชื่อโดเมนต้องเป็ นชื่อขององกร หรื อ
ตัวย่อของชื่อองค์กรนั้นๆ ต้องใช้สาเนาเอกสารทางราชการเป็ นหลักฐาน
การจดทะเบียน
.web
.store
.arts
.rec
.int
.mi.th
.co
.ac
.nom
กลุ่มงานเกี่ยวกับ www (World Wide Web)
กลุ่มธุรกิจทาการซื้ อขายสิ นค้า (Store)
ข้อมูลเกี่ยวข้องกับศิลปวัฒนธรรม (Art)
เกี่ยวกับการพักผ่อน กิจกรรม (Recreation)
หน่วยงานที่ต้ งั ขึ้นโดยสัญญาหรื อข้อตกลงระหว่างประเทศ
สาหรับหน่วยงานทางทหารของประเทศไทย
หมายถึงเวบไซต์ขององค์การธุรกิจ (Commercial)
หมายถึงเวบไซต์ของสถาบันการศึกษา (Academic)
เกี่ยวกับโดเมนส่ วนตัว (Nomenclature)
Net.th เป็ นเว็บไซต์เกี่ยวกับบริ ษทั ที่เกี่ยวกับระบบ Network หรื อ ISP
(ผูใ้ ห้บริ การอินเตอร์ เน็ต) ในประเทศไทย
.edu กลุ่มการศึกษา (Education)
.gov กลุ่มองค์กรรัฐบาล (Goverment)
.go
หมายถึงเวบไซต์ของหน่วยงานรัฐบาล (Goverment)
.mit
กลุ่มองค์กรทหาร (Military)
.firm กลุ่มธุรกิจการค้า บริ ษทั ห้างร้าน (Firms)
โดเมนเนมที่เป็ นชื่อย่อของประเทศ
เช่ น
. th เวบไซต์ ของประเทศไทย (Thailand)
.hk เวบไซต์ ของประเทศฮ่ องกง (Hongkong)
.jp เวบไซต์ ของประเทศญีป่ ุ่ น (Japan)
.au เวบไซต์ ของประเทศออสเตรเลีย (Australia)
.uk เวบไซต์ ของประเทศอังกฤษ (United Kingdom)
.us เวบไซต์ ของประเทศสหรัฐอเมริกา (United States)
การจดโดเมนเนมแบ่ งออกเป็ น 2 กลุ่มดังนี้
 โดเมนเนมสากล ได้แก่ โดเมนเนมที่มีนามสกุล .com, .net, .org, .biz
และ .info
ซึ่ งโดเมนเนมเหล่านี้ไม่ตอ้ งใช้เอกสารใดๆ ในการขอจดทะเบียน
ราคาค่าบริ การจะคิดราคาเป็ นรายปี
 โดเมนเนมของไทย ได้แก่ โดเมนเนมที่มีนามสกุล .co.th, .in.th, .or.th,
.ac.th และ .go.th
สาหรับโดเมนเนมในกลุ่มนี้ จาเป็ นต้องใช้เอกสาร ที่เกี่ยวข้องกับโดเมนเนม
ราคาค่าบริ การจะคิดราคาเป็ นรายปี
ตัวอย่าง ราคาการจด Domain
การใช้งาน Domain Name และ Hosting
พื้นที่ web servers
ข้อมูล Website
Domain Name
ชื่อ website
/Domain Name
ที่ต้ งั Domain Name
1.Users คือกลุ่มคนทัว่ ไปที่กาลังต้องการเยีย่ มชมเว็บไซต์ของเรา โดยเมื่อพวกเขาเหล่านั้น
พิมพ์ชื่อโดเมนเนมของเราแล้ว จะถูกส่ งไป 2.DNS (Domain Name system )
Server ที่เราได้ขอตั้งชื่อ website ไว้ หรื อที่พิกดั IP Address ที่ต้ งั ของ เซิฟเวอร์
ซึ่งตั้งอยูบ่ น 3.Host ที่เราจัดเก็บเว็บไซต์นนั่ เอง เมื่อถูกส่ งไปยัง Hosting แล้วนั้น เจ้าตัว
Browser หรื อ โปรแกรม เช่น IE ที่เราใช้ในการเข้าชมเว็บไซต์กจ็ ะดึงข้อมูลเว็บไซต์ของเรา
จากทาง Host ที่เราได้เช่าเอาไว้ ออกมาเป็ นหน้าเว็บไซต์ให้ได้เห็นกันนัน่ เอง
ตัวอย่ าง website ทีใ่ ห้ ฟรี พืน้ ที่ website 10 Mb และฟรี Domain Name
http://www.phitsanulok.ob.tc
การออกแบบ website
เน้นเฉพาะเรื่ อง
สิ่ งที่จาเป็ น
ความเรียบง่ าย
เนื้อหาชัดเจน
ความเป็ นเอกลักษณ์
ไม่ซบั ซ้อน
สบายตา
อยูต่ าแหน่งเดิมทุกหน้า
รู ปแบบเดียวกับทั้งเว็บ
ผูใ้ ช้ไม่สบั สน
ความสมา่ เสมอ
ดีไซน์อยูใ่ นทิศทางเดียวกัน
น่าสนใจ
เนือ้ หาที่เป็ นประโยชน์
ไม่ซ้ ากับ web อื่น
เข้าถึงง่าย
ไม่ตอ้ งติดตั้ง
โปรแกรมเพิ่มเติม
ไม่มีรหัสผ่าน
ตามแบบลักษณะองค์กร
สะท้อนภาพลักษณ์องค์กร
องค์ ประกอบ
ระบบเมนู
ใช้งานง่าย
คาอธิบายชัดเจน
สะดวกในการใช้
การออกแบบ
มีลกั ษณะหน้ าสนใจ
ใช้ภาพ
ใช้กราฟิ ก
ใช้ งานง่ าย
เนือ้ หาที่
เกีย่ วข้ อง
ข้อมูลบริ ษทั
กิจกรรม
ผลิตภัณฑ์
การติดต่อ
ฯลฯ
ใช้สีสนั
•สร้ าง Site Map
•แบ่ งเฟรมพืน้ ทีแ่ สดงผล
•ความต้ องการองค์ กร
•เป้ าหมายองค์ กร
•โปรแกรมทีใ่ ช้
•ความสวยงาม
•ข้ อมูล
•ระยะเวลา
•งบประมาณ
•ทรัพยากร
ต้ องการนาเสนออะไร
การจัดการ website
กาหนดโครงสร้ าง
สร้ าง webpage
กาหนดเป้าหมาย
ลงทะเบียน
กาหนดขอบเขต
Upload webpage
ต้ องการเว็บไซต์ แบบไหน
แล้วจะทาอย่ างไร
ทีมงานพัฒนาเว็บไซต์
เว็บมาสเตอร์
เว็บโปรแกรมเมอร์
ผู้ดูแลระบบ
ผู้กาหนดโครงสร้ างข้ อมูล
ทีมงาน
พัฒนาเว็บไซต์
เว็บดีไซน์
ผู้ตรวจสอบเนือ้ หา
ทีมงานพัฒนาเว็บไซต์
การพัฒนาเว็บไซต์เป็ นเรื่ องที่มีความหลากหลาย และแตกต่างกันไปตามขนาดของ
กาลังคนในแต่ละหน่วยงานแม้วา่ การสร้างเว็บไซต์ให้ดีน้ นั จะต้องอาศัยทักษะและ
ความชานาญหลายๆ ด้าน แต่บางหน่วยงานที่มีขนาดเล็กอาจมีพนักงานเพียงคนเดียวที่
รับผิดชอบงานด้านนี้ สาหรับเว็บไซต์ขนาดใหญ่หรื อบริ ษทั ที่รับพัฒนาเว็บไซต์น้ นั อาจ
มีความจาเป็ นต้องใช้ทีมงานที่สมบูรณ์ครบทุกตาแหน่ง หน้าที่ และความสามารถ ซึ่ ง
ประกอบด้วย
1. เว็บมาสเตอร์ (Webmaster)
เว็บมาสเตอร์ คือ ผูท้ ี่ดูแลเว็บไซต์ ผูท้ ี่จะคอยควบคุมทิศทางของเว็บไซต์น้ นั ๆ ว่าจะไป
ในทิศทางใด ตั้งแต่เนื้อหาภายในเว็บ ตลอดจนถึงหน้าตาของเว็บเพจ แต่ท้ งั นี้ท้ งั นั้นเว็บ
มาสเตอร์ อาจจะไม่ตอ้ งทาเองทั้งหมด หรื อจะไม่ทาเลยก็ได้ เพราะเว็บมาสเตอร์
เปรี ยบเสมือนผูบ้ ริ หารองค์กรหนึ่ ง คือคอยดูแล กาหนดแนวทาง
2. ผู้กาหนดโครงสร้ างข้ อมูล (Information Architect)
ผูก้ าหนดโครงสร้างข้อมูล ทาหน้าที่จดั ระเบียบข้อมูลและทดสอบประสิ ทธิ ภาพการใช้งาน
เว็บไซต์ตาแหน่งนี้ควรมีความเข้าใจในการจัดระบบข้อมูลและระบบการใช้งานต่างๆและ
ต้องคานึงถึงแนวทางการขยายขนาดเว็บไซต์ให้ใหญ่ข้ ึนในอนาคตโดยไม่สร้างความสับสน
ให้กบั ผูใ้ ช้รวมไปถึงแสดงการถ่ายโอนข้อมูลที่มีความสัมพันธ์กนั ออกมาเป็ นไซต์แม็ป
(Site Map)
3. เว็บดีไซน์ (Web Designer)
เว็บดีไซน์ ทาหน้าที่เป็ นผูอ้ อกแบบลักษณะหน้าตาทั้งหมดของเว็บไซต์ โดยผูท้ ี่รับหน้าที่น้ ี
ควรมี ความรู ้ทางศิลปะและสามารถใช้โปรแกรมกราฟิ กต่างๆ ได้เป็ นอย่างดี เช่น
Photoshop หรื อ Illustrator เป็ นต้นรวมทั้งต้องรู ้จกั วิธีการปรับขนาดไฟล์
กราฟิ กในโปรแกรมต่างๆ เช่น Fireworks หรื อ ImageReady เป็ นต้น และ
การใช้งานโปรแกรมช่วยสร้างเว็บ เช่น Dreamweaver เป็ นต้น ได้พอสมควรอีก
ทั้งต้องมีความรู ้เกี่ยวกับรู ปแบบตัวอักษร (Typography)
4. เว็บโปรแกรมเมอร์ (Web Programmer)
เว็บโปรแกรมเมอร์ ทาหน้าที่เขียนสคริ ปต์และโปรแกรมการใช้งานต่างๆ
ภายในเว็บไซต์ ช่วยพัฒนาระบบการทางานที่มีประโยชน์ให้กบั ผูใ้ ช้
5. ผู้ดูแลระบบ (System Administrator)
ผูด้ ูแลระบบ ทาหน้าที่ควบคุม ดูและเว็บเซิร์ฟเวอร์ รวมถึงฮาร์แวร์และ
ซอฟต์แวร์อื่นที่เกี่ยวข้องสามารถวิเคราะห์และปรับตั้งระบบเพื่อการทา งาน
ที่มีประสิ ทธิภาพ
6. ผู้ตรวจสอบเนือ้ หา (Content Editor / Writer)
ผูต้ รวจสอบเนื้อหา ทาหน้าที่ในการจัดเตรี ยมเนื้อหาทั้งหมดในเว็บไซต์ โดย
รวบรวมเนื้อหาที่มีประโยชน์และน่าสนใจให้กบั ผูใ้ ช้อยูเ่ สมอนอกจากนี้ยงั
ต้องคอยตรวจสอบความถูกต้องและคุณภาพของเนื้อหา
การดาเนินงานพัฒนา website
กาหนดวัตถุประสงค์
ออกแบบแปลนของเว็บไซต์
รวบรวมข้ อมูลรูปภาพ
และ ตัวอักษร
Design
หา Host และ
Domain Name
วางแผน
การสร้ าง
เว็บไซต์
Update
หาโปรแกรม
สาหรับสร้างเว็บไซต์
ออกแบบ
กาหนดข้อมูล
สร้ างเว็บไซต์
เสมือนจริง
ตามทีอ่ อกแบบ
ออกแบบกราฟิ ก
ปรับปรุ ง&
พัฒนา
สร้าง Site map
 เมื่อสรุ ปความต้องการที่ชดั เจนได้แล้ว ขั้นตอนต่อไปคือ การเขียน
แบบร่ างออกมาว่าเว็บไซต์ของคุณจะมีกี่หน้า การเชื่อมโยงระหว่างแต่
ละหน้าเป็ นอย่างไร ซึ่งทั้งหมดนี้เรี ยกรวมกันว่า Site map
Website
(หน้ าแรก) Index.html
Page1.html
Page2.html
Page3.html
Page4.html
องค์ ประกอบหน้ าเว็บ
mock up การจาลองเว็บ
ข้อความ
รู ปภาพ
ใช้กระดาษ
ใช้โปรแกรม
กราฟิ ก
สี สนั รู ปแบบ
ส่ วนประกอบของเว็บ
รายละเอียด
ส่วนหัวเว็บ
ส่วนเนื้อหา
ส่วนท้ายเว็บ
ของเว็บไซด์
PHP
การLink
เมนู Pop Up
Rollover Image
โปรแกรมกราฟิ กที่เกีย่ วข้ อง
โปรแกรม/ภาษา/ฐานข้ อมูล
MySQL
เทคนิคบนเว็บ
โปรแกรมพัฒนาเว็บ
Word press
Joomla
Photoshop
Flash
Movie Maker
ออกแบบและลงมือสร้าง
ตามหลักในการสร้างเว็บนั้นก่อนจะลงมือสร้างจริ ง มักจะมีการทาเว็บ
จาลองหรื อที่เรี ยกว่า mock up ขึ้นมาก่อน เพื่อดูวา่ สวยงามเหมาะสม หรื อ
ต้องการแก้ไขปรับปรุ งส่ วนไหน โดยต้องสร้าง mock up ทุกหน้าเว็บเพจ
ที่วาดไว้ใน Site map ในการสร้าง mock up มี 2 วิธี ดังนี้
 วาดในกระดาษ
วิธีน้ ีง่ายข้อดีคือสร้าง mock up ได้รวดเร็ ว แก้ไขเพิ่มเติม
สิ่ งที่ตอ้ งการง่าย ข้อเสี ยคือกาหนดการวงองค์ประกอบต่าง ๆ ในเว็บเพจได้แค่
คร่ าว ๆ เท่านั้น
 ออกแบบผ่ านโปรแกรมกราฟิ ก เป็ นวิธีมาตรฐานของมืออาชีพ โดยโปรแกรมที่
นิยมใช้ในการออกแบบ mock up ก็คือ Photoshop และ Firework หรื อแล้วแต่
ถนัด ข้อดีคือกาหนดส่ วนประกอบในเว็บเพจได้ชดั เจน ว่าอยูต่ าแหน่งไหน มี
ขนาดเท่าไหร่ ข้อเสี ยคือต้องมีความรู ้ความชานาญในการใช้โปรแกรมกราฟิ ก
องค์ ประกอบหน้ าเว็บเทคนิคบนเว็บ
 ข้ อความและรู ปภาพ
 ลิงค์ (Link) คือ จุดที่คุณสามารถคลิกเพื่อเปิ ดเข้าไปยังเว็บเพจหน้า
อื่นหรื อเว็บไซต์อื่นได้ จุดสังเกตของลิกค์ขอ้ ความก็คือ เมื่อคุณนา
เมาส์ไปวางบนข้อความนั้น เคอร์เซอร์ของเมาส์จะเปลี่ยนเป็ นรู ปมือ
 ลิงค์รูปภาพ คือ รู ปที่ทาหน้าที่เป็ นลิงค์ เมื่อคลิกที่รูปจะเป็ นการ
เชื่อมโยงไปยังเว็บเพจหน้าอื่นหรื อเว็บไซต์อื่น จุดสังเกตของลิกค์
รู ปภาพก็คือ เมื่อคุณนาเมาส์ไปวางบนรู ปภาพนั้น เคอร์ เซอร์ของ
เมาส์จะเปลี่ยนเป็ นรู ปมือ
เทคนิคบนเว็บ
 Rollover Image คือ ลูกเล่นรู ปแบบหนึ่งที่นามาใช้
ในเว็บเพจ โดยเป็ นเทคนิคการใช้รูป 2 รู ป มาแสดงผลที่
ตาแหน่งเดียวกัน ก่อนนาเมาส์ไปวางที่ตาแหน่งนั้นจะเป็ นรู ป
หนึ่ง แต่เมื่อนาเมาส์ไปวางบนตาแหน่งนั้นรู ปจะเปลี่ยนเป็ นอีก
รู ปหนึ่ง
 เมนู Pop upเป็ นเมนูพิเศษโดยซ่อนรายการตัวเลือกเอาไว้
ก่อน เมื่อคุณนาเมาส์ไปวางที่ปุ่มหรื อรู ปภาพที่เป็ นส่ วนหัว
ของเมนู รายการตัวเลือกที่ซ่อนเอาไว้จึงจะปรากฏขึ้นมา เป็ น
ลูกเล่นที่นิยมนามาใช้เพื่อประหยัดพื้นที่แสดงรายการตัวเลือก
Website
ไม่ ใช้ งาน Database
• นาเสนอข้ อมูล เผยแพร่
ประชาสั มพันธ์ ด้ วยข้ อความ
ภาพ กราฟิ ก เท่ านั้น
• ผู้เข้ าชมไม่ สามารถเก็บข้ อมูล
หรือติดต่ อกับทางwebsite
ได้ แบบ Online
ใช้ งาน Database
•ปรับปรุงข้ อมูลได้ แบบ Online
•เก็บข้ อมูลผู้เข้ าชมได้ แบบ Online
•สมัครสมาชิกได้ แบบ Online
•ซื้อสิ นค้ าทาง Online
•จองสิ นค้ าทาง Online
•ทาข้ อสอบ Online
•ประมูลสิ นค้ า Online
•ฟังเพลง Online
•ดู TV Online
•ค้ นหาข้ อมูล Online
•ฯลฯ
ฐานข้อมูล Database คือ การรวบรวมข้อมูลที่อยูต่ ่างที่ มาจัดเก็บอย่าง
เป็ นระบบระเบียบ สามารถสื บค้น เพิ่มเติม ลบ แก้ไข ได้ตามต้องการ
โปรแกรม/ภาษา
รองรับฐานข้ อมูล
โปรแกรมสาหรับพัฒนา
website
 Wordpress
 Joomla
 Macromedia Dreamweaver
 WebPlus
 ....





MySQL
Baseportal
PHP
Access
….
ตัวอย่าง websiteที่มีการใช้งาน Database
Wordpress
Wordpress
 คือ โปรแกรมระบบจัดการเว็บไซต์ CMS(Content Management System)
ที่มีคุณสมบัติ function หลาย ๆ อย่าง เช่น
 การใช้งาน ฐานข้อมูล (Database) ในเรื่ อง




จัดทา User (ผูเ้ ข้าใช้งาน / สมาชิก)
จัดทา Password (รหัสผ่าน)
การสื บค้นข้อมูล Online
การปรับปรุ งข้อมูล Online
 การใช้งาน ระบบมัลติมีเดีย
 ภาพนิ่ง / ภาพเคลื่อนไหว /
 เสี ยง
 E-mail
 กระดานสนทนา (Web board)
 จัดการข้อมูลบนพื้นที่ website อย่างเป็ นหมวดหมู่
ระบบอัตโนมัติ
ใช้เมาส์ ทางาน
มีเมนู / ปุ่ มคาสั่งช่วยงาน
ไม่ตอ้ งเขียน Code เอง