websitebasic

• INTERNET • WWW (WORLD WIDE WEB) • • • HTTP

• URL (UNIFORM RESOURCE LOCATOR) • DOMAIN NAME

• WEBPAGE • HOMEPAGE • WEBSITE



• WEB BROWSER • WEB SERVER • UPLOAD • SEARCH ENGINE

ภาษามาตรฐานทใ่ี ชใ้ นการสรา้ งเวบ็ เพจ • HTML (HYPERTEXT MARKUP LANGUAGE) ตวั อย่าง CODE ภาษา HTML เพ่ือสรา้ งหน้าเวบ็ เพจ

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

รปู แบบของเวบ็ ไซต์ 1. Static Website หมายถงึ เวบ็ ไซตท์ ่ีสรา้ งด้วยภาษา HTML ธรรมดา และบนั ทึกเป็นไฟลน์ ามสกลุ .html เนื้อหาข้อความ รปู ภาพในหน้าเวบ็ เพจนัน้ จะเป็นไปตามที่เราเขียนกาหนดไว้ Static Website เหมาะกบั เวบ็ ไซตท์ ่ีมีขนาดไมใ่ หญ่ จานวนหน้าเวบ็ เพจไมม่ าก ไมม่ ีการเปล่ียนแปลงข้อมลู บอ่ ยๆ และไม่มีการติดต่อฐานข้อมลู 2. Dynamic Website หมายถึง เวบ็ ไซตท์ ่ีหน้าเวบ็ เพจสามารถเปลี่ยนแปลงข้อมลู เองได้ โดยไม่ต้อง เขียนแต่ละหน้าเวบ็ เพจเอง เช่น กระดานข่าว (Webboard), ระบบสืบค้นขอ้ มลู เวบ็ ไซตร์ ปู แบบนี้จะถกู สรา้ งด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ ไฟลเ์ อกสารที่ได้จะมีนามสกลุ .php, .asp เป็นต้น และมกั จะมีการติดต่อกบั ฐานข้อมลู เพื่อบนั ทึกข้อมลู ลงในฐานข้อมลู หรอื นาขอ้ มลู จากฐานข้อมลู ขึน้ มาแสดงผลเป็นหน้าเวบ็ เพจ

สว่ นประกอบของหน้าเวบ็ เพจ แบง่ เป็น 3 ส่วน • • •

1. สว่ นหวั (PAGE HEADER) จะอยบู่ รเิ วณบนสดุ ของหน้าเวบ็ เพจ เป็นสว่ นทแ่ี สดงชอ่ื เวบ็ ไซต์ โลโก้ แบนเนอรโ์ ฆษณาลงิ กส์ าหรบั ขา้ มไปยงั หน้าเวบ็ อน่ื 2. ส่วนเนื้อหา (PAGE BODY) จะอยบู่ รเิ วณตอนกลางของหน้าเวบ็ เพจ ซง่ึ เป็นสว่ นท่ี แสดงเน้อื หาภายในหน้าเวบ็ เพจนนั้ โดยประกอบดว้ ยขอ้ ความ ขอ้ มลู ภาพเคลอ่ื นไหว เป็นตน้

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

ขนั้ ตอนการพฒั นาเวบ็ ไซต์ 1. วางแผนการพฒั นาเวบ็ เพจ • การกาหนดรปู แบบโครงสร้าง • ออกแบบหน้าเวบ็ แต่ละหน้า 2. กาหนดไดเรก็ ทรอร่ี หรอื โฟลเดอร์ (DIRECTORY/FOLDER) ท่ีใช้เกบ็ เอกสารเวบ็ 3. สรา้ งภาพหรือจดั หาภาพท่ีเก่ียวขอ้ งกบั เนื้อหาแล้วจดั เกบ็ ไว้ในไดเรก็ ทรอรี่ตามข้อ 2. 4. สรา้ งเอกสารเวบ็ โดยกาหนดช่ือไฟลเ์ อกสารเวบ็ ตามขอ้ กาหนดของผดู้ แู ลระบบ เครอื ขา่ ย (WEB SYSTEM ADMINISTRATOR) และจดั เกบ็ ไว้ในไดเรก็ ทรอรีต่ ามข้อ 5. ตรวจสอบผลเอกสารเวบ็ ผา่ นเบราเซอร์ 6. ส่งข้อมลู ขึน้ เครอ่ื งแม่ขา่ ย (SERVER) และทาการตรวจสอบผลการเรยี กดจู าก เคร่ืองแมข่ า่ ย









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

ออกแบบโดยสร้างเมนูเป็นรูปอยแู่ ถบซา้ ยมือ แลว้ ใช้ frame เรียกขอ้ มูลมาแสดงบริเวณตรงกลาง

http://www.prapayneethai.com/th/culture/

http://thai.tourismthailand.org/

http://women.sanook.com/health/

แหล่งอ้างอิง • http://www.art2bdesign.com • http://courseware.bodin.ac.th/ • http://www.krirk.ac.th/