Please enable JavaScript.
Coggle requires JavaScript to display documents.
กระบวนการทำงานและโครงสร้างของเว็บไซต์ - Coggle Diagram
กระบวนการทำงานและโครงสร้างของเว็บไซต์
คำาศัพท์พื้นฐานต่างๆที่เกี่ยวข้องกับเว็บไซต์
เว็บเพจ (Web page) คือ ข้อมูลที่สร้างขึ้นในรูปแบบต่างๆไม่ว่าจะเป็น ข้อความ รูปภาพ เสียง ภาพเคลื่อนไหวโดยจัดเก็บอยู่ในรูปแบบไฟล์
HTML(Hyper Text Markup Language)
ซึ่งไฟล์ HTML1 ไฟล์ก็คือเว็บเพจ 1 หน้า
เว็บไซต์ (Web site) คือ เว็บหลายๆ
หน้ารวมกันโดยมีการกำหนดเว็บเพจหน้าแรก
เรียกว่า โฮมเพจ ที่เป็นช่องทางเข้าเว็บเพจทั้งหมดภายในเว็บไซต์นั้น
โฮมเพจ (Home Page) คือ เอกสารของเว็บเพจ ซึ่งเมื่อเข้าสู่เว็บแล้วจะปรากฏเป็นหน้าแรกสุดซึ่งผู้สร้างจะต้องสร้างให้โดดเด่น น่าสนใจ เพื่อให้เข้าไปยังเว็บเพจหน้าต่อๆไป
เว็บบราวเซอร์ (Web Browser) คือ โปรแกรมสำหรับเรียกดูเว็บเพจโดย ตัวเว็บบราวเซอร์จะเข้าใจในภาษา HTML ซึ่งเป็นภาษามาตรฐานของเว็บ บราวเซอร์ เช่น Internet Explorer, Mozilla Firefox, Google Chrome เป็นต้น
เว็บเซิร์ฟเวอร์ (Web Server) คือ ที่เก็บเว็บเพจเมื่อผู้ใช้ต้องการเปิดดู เว็บเพจที่อยู่ในเครื่องเซิร์ฟเวอร์ โดยเว็บบราวเซอร์จะทำการติดต่อกับ เซิร์ฟเวอร์ที่เก็บเว็บไซต์นั้น เพื่อให้มีการโอนย้ายข้อมูลมาแสดงที่เครื่องของผู้ใช้
ความสำคัญที่ต้องมีเว็บไซต์
เป็นอีกช่องทางหนึ่งในการประกาศ โฆษณา และ เป็นตลาดซื้อขายสินค้า
สร้างความน่าเชื่อถือให้กับองค์กรหรือบริษัท
โปรโมทองค์กรให้เป็นที่รู้จัก
ประโยชน์ของเว็บไซต์
ช่วยส่งเสริมศักยภาพการแข่งขันในด้านธุรกิจ
ช่วยโฆษณาบริษัทหรือองค์กรและช่วยเผยแพร่ข้อมูลข่าวสารและบริการต่างๆ ให้เป็นที่รู้จักอย่างแพร่หลาย
ช่วยขายสินค้าทางอินเตอร์เน็ต
สร้างรายได้โดยไม่ต้องมีหน้าร้านหรือสำนักงาน
สามารถให้บริการต่างๆ ของธุรกิจหรือองค์กรแบบออนไลน์เป็นการอำนวยความสะดวกแก่ลูกค้า
ช่วยลดค่าใช้จ่ายในการโฆษณาประชาสัมพันธ์ธุรกิจ
การทำงานของเว็บไซต์
โครงสร้างการทำงานของเว็บไซต์
โครงสร้างเว็บไซต์
เว็บที่มีโครงสร้างแบบเรียงลำดับ
(Sequential Structure)
โครงสร้างแบบนี้เหมาะกับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงค์ไปทีละหน้าทิศทางของการเข้าสู่เนื้อหา (Navigation) ภายในเว็บจะเป็นการดำเนินเรื่องในลักษณะเส้นตรงโดยมีปุ่ม
เดินหน้า-ถอยหลัง
เว็บที่มีโครงสร้างแบบลำดับขั้น
(Hierarchical Structure)
แบ่งเนื้อหาออกเป็นส่วนต่างๆ และมีรายละเอียดย่อยๆ ในแต่ละส่วนลดหลั่นกันมาลักษณะเด่นเฉพาะของเว็บประเภทนี้คือ การมีจุดเริ่มต้นที่จุดร่วมจุดเดียวนั่นคือ โฮมเพจ (Homepage) และเชื่อมโยงไปสู่เนื้อหาในลักษณะเป็นลำดับจากบนลงล่าง
เว็บที่มีโครงสร้างแบบตาราง
(Grid Structure)
การออกแบบเพิ่มความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้โดยเพิ่มการเชื่อมโยงซึ่งกันการเข้าสู่เนื้อหาของผู้ใช้จะไม่เป็นลักษณะเชิงเส้นตรงผู้ใช้สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้
เว็บที่มีโครงสร้างแบบใยแมงมุม (Web Structure)
โครงสร้างประเภทนี้จะมีความยืดหยุ่นมากที่สุดทุกหน้าในเว็บสามารถจะเชื่อมโยงไปถึงกันได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ
ส่วนประกอบของหน้าเว็บไซต์
ส่วนหัวของส่วนของเนื้อหา (Page Body)
ส่วนของเนื้อหา (Page Body)
ส่วนท้ายของหน้า (Page Footer)
หลักในการออกแบบโครงสร้างเว็บไซต์
กำหนดวัตถุประสงค์โดยพิจารณาว่าเป้าหมายของการสร้างเว็บไซต์
ศึกษาคุณลักษณะของผู้ที่เข้ามาใช้ว่ากลุ่มเป้าหมายใด
วางแผนเกี่ยวกับการจัดรูปแบบโครงสร้างเนื้อหาสาระการออกแบบเว็บไซต์ต้องมีการจัดโครงสร้าง หรือจัดระเบียบข้อมูลที่ชัดเจน
กำหนดรายละเอียดให้กับโครงสร้าง
ทำการสร้างเว็บไซต์แล้วนำไปทดลองเพื่อหาข้อผิดพลาดและทำการแก้ไขปรับปรุงแล้วจึงนำเข้าสู่เครือข่ายอินเทอร์เน็ตเป็นขั้นสุดท้าย
รูปแบบของเว็บไซต์
สเตติกเว็บไซต์ (Static Website)
ไดนามิกเว็บไซต์ (Dynamic Website)
เว็บความหมาย (Semantic Website)
เป็นเทคโนโลยีที่ใช้ในการจัดเก็บและนำเสนอเนื้อหาแบบมีโครงสร้างรวมถึงสามารถที่จะวิเคราะห์จำแนกหรือจัดแบ่งได้ว่า ข้อมูลที่ปรากฏนั้นมีความสัมพันธ์กับข้อมูลอื่นๆในแต่ละระดับอย่างไร
โปรแกรมที่ใช้สร้างเว็บไซต์
โปรแกรมที่ใช้เขียน Code เว็บเพจด้วยภาษา HTML
HTML ซึ่งย่อมาจาก Hyper Text Markup Language เป็นโปรแกรมภาษาประเภทหนึ่งสำหรับแสดงข้อความต่างๆ ในรูปของข้อความ รูปภาพ หรือ ภาพเคลื่อนไหวฯลฯ และสามารถเชื่อมโยงข้อมูลไปยังเอกสารอื่นได้
โปรแกรมสำเร็จรูปสำหรับสร้างเว็บไซต์
สร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป Dreamweaver
สร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS(Content Management System)
ขั้นตอนการสร้างเว็บไซต์
ขั้นตอนที่ 1 กำหนดโครงร่างของเว็บไซต์
ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ
ขั้นตอนที่ 3 ออกแบบเว็บเพจแต่ละหน้าภายในเว็บไซต์
ขั้นตอนที่ 4 สร้างเว็บเพจแต่ละหน้า
ขั้นตอนที่ 5 ลงทะเบียนขอพื้นที่เว็บไซต์ฟรี
ขั้นตอนที่ 6 อัพโหลดเว็บไซต์
