merged (pdf.io)

ได้ผ่านการตรวจสอบประเมินคุณภาพหนังสือเรียนอาชีวศึกษา หลักสูตรประกาศนียบัตรวิชาชีพ พุทธศักราช 2562
ประจำปีงบประมาณ พ.ศ. 2563 ครั้งที่ 1 ประกาศลำดับที่ 302




รหัสวิชา 20204-2008

หนังสือเล่มนี้เรียบเรียงตามจุดประสงค์รายวิชา สมรรถนะรายวิชาและคำอธิบายรายวิชา หลักสูตรประกาศนียบัตรวิชาชีพ
พุทธศักราช 2562 ของสำนักงานคณะกรรมการการอาชีวศึกษา กระทรวงศึกษาธิการ

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

Website Creation

ตรงตามคำอธิบายรายวิชา
และกรอบสมรรถนะรายวิชา
ตรงตามหลักสูตรประกาศนียบัตรวิชาชีพ (ปวช.) 2562
ของสำนักงานคณะกรรมการการอาชีวศึกษา

กระทรวงศึกษาธิการ

ออกแบบและสร้างเว็บสวยด้วย Dreamweaver CS6

o เข้าใจพื้นฐานภาพรวมของการสร้างและดูแลเว็บไซต์
o เรียนรู้หลักการสร้างส่วนประกอบเว็บทีละส่วน
o สร้างแบบฟอร์มไว้ใช้เก็บข้อมูลจากหนำเว็บ
o ตกแต่งเว็บเพจด้วยรูปภาพให้ดูน่าสนใจ
o แนวทางการจัดรูปแบบเว็บด้วย Cascading Style Sheet
o การเตรียมตัวเพื่ออัพโหลดเว็บขึ้นอินเทอร์เน็ต
o เสริมความเข้าใจด้วยแบบฝึกหัดภายในเล่ม



รหัสวิชา 20204-2008

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

Website Creation

ตรงตามคำอธิบายรายวิชา
และกรอบสมรรถนะรายวิชา
ตรงตามหลักสูตรประกาศนียบัตรวิชาชีพ (ปวช.) 2562
ของสำนักงานคณะกรรมการการอาชีวศึกษา

กระทรวงศึกษาธิการ

คำนำ

หนังสือแบบเรียนวิชา การสร้างเว็บไซต์ รหัสวิชา 20204-2008
มี 3 หน่วยกิต 4 ชั่วโมงต่อสัปดาห์ เรียบเรียงเนื้อหาตรงตามจุด
ประสงค์รายวิชามาตรฐานรายวิชาและคำอธิบายรายวิชาในหลักสูตร
ประกาศนียบัตรวิชาชีพ (ปวช.) พุทธศักราช 2562 ของ สำนักงาน
คณะกรรมการการอาชีวศึกษา

หนังสือแบบเรียนเล่มนี้ ประกอบด้วยเนื้อหา 11 บท ได้แก่
กระบวนการและ โครงสร้างการทำงานของเว็บไซต์ การออกแบบ
เว็บไซต์ การสร้างเว็บไซต์ด้วยโปรแกรม ภาษา โปรแกรมสำเร็จรูป
หรือโปรแกรมระบบCMS การสร้างเว็บไซต์ด้วยโปรแกรม สำเร็จรูป
การสร้างข้อความในเว็บไซต์ การใช้โปรแกรมเสริมในการออกแบบ
สร้างเว็บไซต์การใส่ตารางในเว็บไซต์ การเชื่อมโยงเว็บไซต์การสร้าง
ฟอร์มการกำหนดรูปแบบการแสดงผลในหน้าเว็บไซต์การติดตั้ง
โปรแกรมจำลองWebServerและการอัพโหลดเว็บไซต์นอกจากนี้ยัง
มีแบบฝึกหัดและใบงานฝึกปฏิบัติในส่วนท้ายของแต่ละบทซึ่งจะช่วย
วัดผลการเรียนรู้ และฝึกการเรียนรู้ได้ด้วยตนเอง

คณะผู้เรียบเรียงหวังเป็นอย่างยิ่งว่าหนังสือแบบเรียนเล่มนี้จะเป็น
หนังสือประกอบการเรียนที่เป็นประโยชน์ต่อการสอนของคณะ
อาจารย์ และการเรียนรู้ของนักเรียน เพื่อให้การศึกษาทัดเทียมกับ
ระดับสากล

สารบัญ 1

บทที่ 1 กระบวนการและโครงสร้างการทำงานของเว็บไซต์ 2
3
1.1 ความหมายของเว็บไซต์ (Website) 4
1.2 กระบวนการทำงานของเว็บไซต์ 5
1.3 หลักการทำงานของ WWW 9
1.4 โครงสร้างของเว็บไซต์
แบบทดสอบท้ายหน่วยที่ 1 1
1

บทที่ 2 การออกแบบเว็บไซต์ 13
14
2.1 หลักการออกแบบเว็บไซต์ 15
2.2 องค์ประกอบของเว็บไซต์ 17
2.3 ขั้นตอนการออกแบบเว็บไซต์ 19
2.4 ข้อแนะนำในการออกแบบเว็บไซต์
แบบทดสอบท้ายหน่วยที่ 2 21

บทที่ 3 การสร้างเว็บไซต์ด้วยโปรแกรมภาษา โปรแกรม 22
สำเร็จรูป หรือโปรแกรมระบบ CMS 23
23
3.1 การสร้างเว็บไซต์ด้วยโปรแกรมภาษา 27
3.2 การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป
3.3 การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS 29
แบบทดสอบท้ายหน่วยที่ 3
30
บทที่ 4 การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป 33
36
4.1 เปิดใช้งาน Dreamweaver 37
4.2 ส่วนประกอบของ Dreamweaver 40
4.3 มุมมองการทำงานใน Dreamweaver 42
4.4 เริ่มต้นสร้างเว็บไซต์ 43
4.5 การจัดการโครงสร้างโฟลเดอร์ 45
4.6 เข้าใจหลักการเพิ่มและแก้ไของค์ประกอบบนหน้าเว็บ 45
4.7 เพิ่มเนื้อหาในหน้าเว็บ 46
4.8 บันทึกไฟล์เว็บเพจที่สร้าง
4.9 เปิดดูหน้าเว็บที่สร้างบนเบราว์เซอร์
แบบทดสอบท้ายหน่วยที่ 4

สารบัญ 49

บทที่ 5 การสร้างข้อความในเว็บไซต์ 50
51
5.1 การเลือกข้อความ 56
5.2 การตกแต่งและจัดรูปแบบข้อความ
แบบทดสอบท้ายหน่วยที่ 5 59

บทที่ 6 การใช้โปรแกรมกราฟิกเสริมในการออกแบบ 60
เว็บไซต์ 61
63
6.1 การใส่ภาพลงในหน้าเว็บเพจ 65
6.2 การปรับแต่งรายละเอียดของภาพ
6.3 การใช้โปรแกรมสำเร็จรูปในการออกแบบสร้างเว็บไซต์ 68
แบบทดสอบหน่วยที่ 6
70
บทที่ 7 การใส่ตารางในเว็บไซต์ 73
77
7.1 การสร้างตาราง 78
7.2 การเลือกตาราง แถว คอลัมน์ และเซลล์ 79
7.3 การปรับแต่งรายละเอียดของตาราง 81
7.4 การจัดเรียงข้อมูลในตาราง 82
7.5 การแทรกแถวและคอลัมน์ 84
7.6 การลบแถวและคอลัมน์ 86
7.7 การรวมและการแบ่งเซลล์ 88
7.8 ปรับความกว้างของตารางใน Property Inspector
7.9 การกำหนดสีกับตาราง 90
แบบทดสอบท้ายหน่วยที่ 7
91
บทที่ 8 การเชื่อมโยงเว็บไซต์ 103
104
8.1 การเชื่อมโยงแบบต่างๆ 106
8.2 กาหนดลักษณะการเปิดหน้าเว็บใหม่ที่เชื่อมโยงไป 108
8.3 เทคนิคการเชื่อมโยงแบบ Rollover Image
8.4 กำหนดคุณสมบัติของข้อความที่เป็นลิงก์
แบบทดสอบท้ายหน่วยที่ 8

สารบัญ 110

บทที่ 9 การสร้างฟอร์ม 112
113
9.1 เครื่องมือในการสร้างฟอร์ม 114
9.2 เข้าใจการทำงานของฟอร์มและโปรแกรมสคริปต์ 126
9.3 ตัวอย่างการสร้างฟอร์ม 127
9.4 การจัดกลุ่มให้ฟอร์ม 129
9.5 ปรับแต่ง และตรวจสอบรูปแบบฟอร์ม
แบบทดสอบท้ายหน่วยที่ 9 132

บทที่ 10 การกำหนดรูปแบบการแสดงผลในหน้าเว็บไซต์ 133
134
10.1 รู้จักสไตล์ 144
10.2 พาเนล CSS Styles 146
10.3 การแก้ไขค่า Cascading Style Sheet 147
10.4 การใช้สไตล์ต้นแบบ 148
10.5 Visual Aids ตัวช่วยในการออกแบบเว็บ
แบบทดสอบท้ายหน่วยที่ 10

150
บทที่ 11 การติดตั้งโปรแกรมจำลอง Web Server และ
การอัพโหลดเว็บไซต์ 151
155
11.1 การติดตั้งโปรแกรมจำลอง Web Server 169
11.2 การอัพโหลดเว็บไซต์
172
แบบทดสอบท้ายหน่วยที่ 11

บรรณานุกรม

หน่วยที่ 1

กระบวนการและโครงสร้างการทำงานของเว็บไซต์

สาระสำคัญ

ปัจจุบัน การสร้างเว็บไซต์เป็นเรื่องที่ทุกคนสามารถทำได้ ไม่ได้จำกัดอยู่
เฉพาะกลุ่ม โปรแกรมเมอร์เหมือนแต่ก่อนอีกต่อไป เนื่องจากเครื่องมือการ
สร้างเว็บมีการพัฒนาให้มี ความง่ายต่อการใช้งาน ในการสร้างเว็บไซต์ ผู้สร้าง
จำเป็นต้องมีความรู้พื้นฐานเกี่ยวกับ การสร้างเว็บก่อน อาทิ ความหมายและ
หลักการทำงานของเว็บไซต์ โครงสร้างของ เว็บไซต์ ตลอดจนกระบวนการ
ทำงานและการเชื่อมต่อต่างๆ เพื่อจะได้เข้าใจภาพรวม อันจะเป็นการปูพื้นฐาน
ไปสู่การสร้างเว็บไซต์ในระดับที่สูงขึ้นได้

สาระการเรียนรู้

1. ความหมายของเว็บไซต์ (Website)
2. กระบวนการทำงานของเว็บไซต์
3. หลักการทำงานของ WWW
4. โครงสร้างของเว็บไซต์

วัตถุประสงค์

1. อธิบายความหมายของเว็บไซต์และคำศัพท์เฉพาะได้
2. อธิบายกระบวนการทำงานของเว็บไซต์ได้
3. อธิบายหลักการทำงานของ WWW
4. อธิบายโครงสร้างของเว็บไซต์แต่ละประเภทได้

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

1. เป็นแหล่งข้อมูลที่ลึก และกว้าง เพราะข้อมูลถูกสร้างได้ง่าย
2. เป็นแหล่งรับหรือส่งข่าวสารได้หลายรูปแบบ เช่น เว็บไซต์ อีเมล ห้อง
สนทนา
3. เป็นแหล่งให้ความบันเทิง เช่น เกม ภาพยนตร์ ข่าว หรือห้องสะสม
ภาพ เป็นต้น
4. เป็นช่องทางสำหรับทำธุรกิจ สะดวกทั้งผู้ซื้อและผู้ขาย เช่น e-
commerce หรือบริการ โอนเงิน เป็นต้น
5. ใช้แทนหรือเสริมสื่อที่ใช้ติดต่อสื่อสารในปัจจุบัน โดยเสียค่าใช้จ่าย
และเวลาที่ลดลง
6. เป็นช่องทางสำหรับประชาสัมพันธ์สินค้า บริการ หรือองค์กร ใน
บรรดาการใช้งานบนอินเทอร์เน็ต “เว็บไซต์” นับว่ามีส่วนสำคัญในการสนองความ
ต้องการหลากหลายรูปแบบ เว็บไซต์จึงถูกสร้างขึ้นด้วยวัตถุประสงค์ที่แตกต่างกัน
เช่น เพื่อ แสดงข้อมูลข่าวสารของบริษัท ห้างร้าน องค์กรต่าง ๆ บางเว็บไซต์มี
วัตถุประสงค์เพื่อขาย ๆ สินค้าออนไลน์ เว็บไซต์ประเภทนี้จะมีความซับซ้อนในการ
ออกแบบเว็บไซต์มากกว่าเว็บไซต์ ประเภทแสดงข้อมูล ข่าวสาร เนื่องจากจะต้องมี
ระบบต่าง ๆ เข้ามาเกี่ยวข้อง เช่น ระบบ ตะกร้าสินค้า ระบบชำระเงิน เป็นต้น

1.1 ความหมายของเว็บไซต์ (Website)
เว็บไซต์ต้องเปิดด้วยโปรแกรมเฉพาะทางที่เรียกว่า Web Browser เว็บไซต์
สร้างขึ้นด้วย ภาษาคอมพิวเตอร์ที่เรียกว่า HTML (Hyper Text Markup Language)
และได้มีการพัฒนา นำภาษาคอมพิวเตอร์ ภาษาอื่น ๆ มาร่วมพัฒนา

เว็บไซต์ ทั้งนี้เพื่อให้เว็บไซต์มีความสามารถ เพิ่มมากขึ้น เช่น ภาษา PHP, ภาษา
SQL เป็นต้น เว็บไซต์ มีคำศัพท์เฉพาะทางหลายคำ เช่น เว็บเพจ (Web Page),
โฮมเพจ (Home Page) และลิงก์ (HyperLink) เป็นต้น ปัจจุบันการออกแบบเว็บไซต์
ไม่ใช่เรื่องยากอีกต่อไปเนื่องจากมีเครื่องมือในการออกแบบ เว็บไซต์ให้เลือกมากมาย
ไม่ว่าจะเป็นโปรแกรมสำเร็จรูปอย่างDreamweaver หรือแม้กระทั่ง CMS (Content
Management System) อย่าง Joomla, Wordpress เป็นต้น

ทั้งนี้การออกแบบเว็บไซต์ที่ดีนั้นต้องคำนึงถึงการแสดงผลได้บนหลากหลาย
อุปกรณ์ ไม่ ว่าจะเป็นเครื่องคอมพิวเตอร์, สมาร์ทโฟน หรือแท็บเล็ต

2

เว็บไซต์ เว็บเพจ และ โฮมเพจ

เว็บไซต์ (Website) เว็บเพจ (Web Page) โฮมเพจ (Home Page) มีความหมาย
แตกต่างกัน และมีบทบาทหน้าที่ที่แตกต่างกันดังนี้

ภาพที่ 1.1 แสดงความสัมพันธ์ระหว่าง เว็บไซต์ เว็บเพจ และโฮมเพจ

เว็บไซต์ คือ การเรียกชื่อกลุ่มก้อนของเว็บเพจรวมกันหลาย ๆ หน้า บางครั้ง
อาจ เรียกแทนด้วยชื่อโดเมนเนม Domain Name (โดเมนเนม เช่น
www.igetweb.com)

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

โฮมเพจ คือ คำที่ใช้เรียกหน้าแรกของเว็บไซต์ เมื่อเปิดเว็บไซต์นั้นขึ้นมา หน้า
โฮมเพจ จะปรากฏเป็นหน้าแรก เป็นหน้าที่รวบรวมสารบัญและคำนำที่เจ้าของ
เว็บไซต์นั้นได้สร้างขึ้น เพื่อใช้ประชาสัมพันธ์องค์กรของตน โฮมเพจจึงนับว่าเป็นทาง
เข้าหลักของเว็บไซต์ นอกจาก นี้ ภายในโฮมเพจยังมีเอกสารหรือข้อความที่เชื่อมโยง
ต่อไปยังเว็บเพจอื่น ๆ อีกด้วย

1.2 กระบวนการทำงานของเว็บไซต์

การทำงานของเว็บไซต์ เป็นการทำงานผ่านบริการในรูปแบบ World Wide Web
(www) ซึ่งเป็นบริการรูปแบบหนึ่งในอินเทอร์เน็ต การใช้บริการรูปแบบนี้ ต้องเปิดเว็บ
เบราว์เซอร์จาก เครื่องคอมพิวเตอร์ของผู้ใช้และระบุ URL เพื่อใช้อ้างที่อยู่ในการเก็บ
เว็บ เว็บเบราว์เซอร์จะ ติดต่อกับเว็บเซิรฟเวอร์เพื่อเรียกข้อมูลขึ้นมาแสดงผล เช่น เมื่อ
ระบุURL ที่ต้องการเปิดเป็น www.successmedia.com ก็จะเป็นการเปิดดูเว็บไซต์ของ
บริษัท ซัคเซส มีเดีย จำกัด

3

เว็บเบราว์เซอร์ (web browser) คือ โปรแกรมที่เป็นประตูเข้าสู่โลก World
Wide Web ซึ่งเป็นโปรแกรมที่อยู่ในเครื่องรับบริการ มีหน้าที่ในการส่งข้อมูลร้องขอ
และรับหน้า เว็บมาแสดง ตัวโปรแกรมจะเข้าใจในภาษา HTML ที่เป็นมาตรฐานใน
การแสดงเว็บ เว็บเบราว์เซอร์ที่ได้รับความนิยมในปัจจุบันได้แก่Internet Explorer
ของไมโครซอฟท์ Chrome ของกูเกิล, Firefox ซึ่งเป็นเบราว์เซอร์โอเพ่นซอร์ส และ
Safari ของแอปเปิ้ ล

เว็บเซิร์ฟเวอร์ (Web Server) เป็นคอมพิวเตอร์ที่เก็บเว็บเพจ เมื่อใดที่ต้องการ
เปิด ดูเว็บเพจต้องใช้เว็บเบราว์เซอร์ดึงข้อมูล การทำงานคือ เว็บเบราว์เซอร์จะ
ทำการติดต่อ กับเว็บเซิร์ฟเวอร์นั้น เพื่อให้มีการโอนย้ายข้อมูลมาแสดงที่เครื่องของ
ผู้ใช้

URL ย่อมาจากคำว่า Uniform Resource Locator คือ ที่อยู่ (Address) ของ
ข้อมูล ต่าง ๆ ในอินเทอร์เน็ต เช่น ที่อยู่ของไฟล์หรือเว็บไซต์บนอินเทอร์เน็ต ดังนั้น
การอ้างอิง ของข้อมูลบนอินเทอร์เน็ตต้องระบุ URLให้ถูกต้อง มิฉะนั้นจะไม่สามารถ
เข้าถึงข้อมูลนั้นได้

1.3 หลักการทำงานของ WWW

การทำงานของ World Wide Web หรือ WWW มีลักษณะเช่นเดียวกับการทำงาน
ใน ลักษณะไคลเอนต์-เซิร์ฟเวอร์ (Client-Server) คือ มีลักษณะของการเชื่อมต่อของ
เครื่องผู้ให้ บริการ (Server) และเครื่องผู้ใช้บริการ (Client) พิจารณาดังรูปต่อไปนี้

ภาพที่ 1.2 แสดงลักษณะการทำงานแบบไคลเอนต์-เซิร์ฟเวอร์

การทำงานเริ่มจากเครื่องผู้ขอใช้บริการ (Client) ซึ่งอาจจะเรียกว่าเป็นเครื่องลูก
ที่ทำการร้องขอ (Request) ใช้บริการจากเครื่องผู้ให้บริการ (Server) ซึ่งอาจจะเรียก
ว่าเป็น เครื่องแม่ หลังจากเครื่องผู้ให้บริการทำการจัดเตรียมข้อมูลหรือบริการตามที่
เครื่องผู้ขอใช้ บริการได้ร้องขอมาก็จะทำการตอบกลับ (Response) คืนไปยังเครื่อง
ของผู้ขอใช้บริการ โดย ปกติเครื่องแม่จะมีอยู่เพียงเครื่องเดียว ในขณะที่เครื่องลูกอาจ
จะมีได้หลาย ๆ เครื่อง และ เครื่องลูกหลาย ๆ เครื่องนี้ก็อาจจะเข้ามาขอใช้บริการจาก
เครื่องแม่พร้อมกันก็ได้

4

การทำงานของ www ใช้หลักการเดียวกันนี้ พิจารณารูปต่อไปนี้

ภาพที่ 1.3 แสดงการทำงานของ WWW



จากรูป เครื่องแม่ในที่นี้จะให้บริการต่าง ๆ ที่เกี่ยวกับเว็บทั้งหมด ไฟล์เว็บเพจ
รูปภาพ หรือโปรแกรมบนเว็บต่าง ๆ จะถูกจัดเก็บไว้ในเครื่องนี้ เรียกเครื่องนี้ว่า Web
Server ส่วน เครื่องลูกเป็นเครื่องที่ขอใช้บริการ เรียกว่า Client เนื่องจากการ
แสดงผลจะถูกแสดง บน เบราว์เซอร์ เช่น Internet Explorer หรือ Firefox
เป็นต้น กระบวนการทำงานเริ่มจาก Web Browser ทำการร้องขอหน้าเว็บใด ๆ โดย
การพิมพ์ URL (Universal Resource Locator) จากโปรแกรมเบราว์เซอร์ ข้อมูล
จะถูกกระทำผ่านโปรโตคอล HTTP (HyperText Transfer Protocol) เครื่อง Web
Server เมื่อได้รับคำร้องขอจะทำการจัดส่งหน้าเว็บเพจนั้นผ่านไป ทาง Web
Browser

1.4 โครงสร้างของเว็บไซต์

โครงสร้างของเว็บไซต์ คือ การวางแผนการจัดลำดับ เนื้อหาสาระของเว็บไซต์
ออกเป็น หมวดหมู่ เพื่อจัดทำเป็นโครงสร้างในการจัดวางหน้าเว็บเพจทั้งหมด เปรียบ
เสมือนแผนที่ หรือแผนผังที่ทำให้เห็นโครงสร้างทั้งหมดของเว็บไซต์ ช่วยให้นักพัฒนา
เว็บไซต์ไม่หลงทาง การจัดโครงสร้างของเว็บไซต์ แบ่งออกเป็น 4 ประเภทดังนี้

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

เป็นโครงสร้างแบบธรรมดาที่ใช้กันมากที่สุดเนื่องจากง่ายต่อการจัดระบบข้อมูล
ข้อมูล ที่นิยมจัดด้วยโครงสร้างแบบนี้มักเป็นข้อมูลที่มีลักษณะเป็นเรื่องราวตาม
ลำดับของเวลา เช่น การเรียงลำดับตามตัวอักษร ดรรชนี สารานุกรม หรืออภิธาน
ศัพท์ โครงสร้างแบบนี้เหมาะ กับเว็บไซต์ที่มีขนาดเล็ก เนื้อหาไม่ซับซ้อนใช้การลิงก์
(Link) ไปที่ละหน้า ทิศทางของการ เข้าสู่เนื้อหา (Navigation) ภายในเว็บจะ
เป็นการดำเนินเรื่องในลักษณะเส้นตรง โดยมีปุ่ม เดินหน้า-ถอยหลังเป็นเครื่องมือ
หลักในการกำหนดทิศทาง ข้อเสียของโครงสร้างระบบนี้คือ ผู้ใช้ไม่สามารถกำหนด
ทิศทางการเข้าสู่เนื้อหาของตนเองได้ ทำให้เสียเวลาเข้าสู่เนื้อหา

5

ภาพที่ 1.4 แสดงผังเว็บที่มีโครงสร้างแบบเรียงลำดับ

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

เป็นวิธีที่ดีที่สุดวิธีหนึ่งในการจัดระบบโครงสร้างที่มีความซับซ้อนของข้อมูล โดย
แบ่ง เนื้อหาออกเป็นส่วนต่าง ๆ และมีรายละเอียดย่อย ๆ ในแต่ละส่วนลดหลั่นกัน
มาในลักษณะ แนวคิดเดียวกับแผนภูมิองค์กร จึงเป็นการง่ายต่อการทำความเข้าใจ
กับโครงสร้างของเนื้อหา ลักษณะเด่นเฉพาะของเว็บประเภทนี้คือการมีจุดเริ่มต้นที่
จุดร่วมจุดเดียวนั่นคือ โฮมเพจ (Hormepage)และเชื่อมโยงไปสู่เนื้อหา ในลักษณะ
เป็นลำดับจากบนลงล่าง

ภาพที่ 1.5 แสดงผังเว็บที่มีโครงสร้างเป็นลำดับขั้น

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

โครงสร้างรูปแบบนี้มีความซับซ้อนมากกว่ารูปแบบที่ผ่านมา เป็นการออกแบบ
เพื่อเพิ่ม ความยืดหยุ่นให้แก่การเข้าสู่เนื้อหาของผู้ใช้ โดยเพิ่มการเชื่อมโยงซึ่งกัน
และกันระหว่างเนื้อหา แต่ละส่วน เหมาะแก่การแสดงให้เห็นความสัมพันธ์กันของ
เนื้อหา การเข้าสู่เนื้อหาของผู้ใช้จะ ไม่เป็นลักษณะเชิงเส้นตรง เนื่องจากผู้ใช้
สามารถเปลี่ยนทิศทางการเข้าสู่เนื้อหาของตนเองได้ ในการจัดระบบโครงสร้าง
แบบนี้ เนื้อหาที่นำมาใช้แต่ละส่วนควรมีลักษณะที่เหมือนกัน และสามารถใช้รูป
แบบร่วมกันหลักการออกแบบคือนำหัวข้อทั้งหมดมาบรรจุลงในที่เดียวกันโดยทั่วไป
จะเป็นหน้าแผนภาพ (Map Page) ที่แสดงในลักษณะเดียวกับโครงสร้างของเว็บ
เมื่อผู้ใช้คลิกเลือกหัวข้อใดก็จะเข้าไปสู่หน้าเนื้อหา(TopicPage)ที่แสดงราย
ละเอียดของ หัวข้อนั้นๆ และภายในหน้านั้นจะมีการเชื่อมโยงไปยังหน้ารายละเอียด
ของหัวข้ออื่นที่เป็นเรื่องเดียวกันนอกจากนี้ยังสามารถนำโครงสร้างแบบเรียงลำดับ
และแบบลำดับขั้นมาใช้ร่วม

6

กันได้อีกด้วย ถึงแม้โครงสร้างแบบนี้อาจสร้างความยุ่งยากในการทำความเข้าใจ และ
อาจเกิด ปัญหาการคงค้างของหัวข้อ (Cognitive Overhead) ได้ แต่จะเป็นประโยชน์
ที่สุดเมื่อผู้ใช้ได้ เข้าใจถึงความสัมพันธ์ระหว่างเนื้อหา ในส่วนของการออกแบบจำเป็น
จะต้องมีการวางแผนที่ ดี เนื่องจากมีการเชื่อมโยงที่เกิดขึ้นได้หลายทิศทาง นอกจากนี้
การปรับปรุงแก้ไขอาจเกิด ความยุ่งยากเมื่อต้องเพิ่มเนื้อหาในภายหลัง

ภาพที่ 1.6 แสดงผังเว็บที่มีโครงสร้างแบบตาราง

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

โครงสร้างประเภทนี้มีความยืดหยุ่นมากที่สุด ทุกหน้าในเว็บสามารถจะเชื่อมโยงไป
ถึงกัน ได้หมด เป็นการสร้างรูปแบบการเข้าสู่เนื้อหาที่เป็นอิสระ ผู้ใช้สามารถกำหนด
วิธีการเข้าสู่เนื้อหาได้ด้วยตนเองการเชื่อมโยงเนื้อหาแต่ละหน้าอาศัยการโยงใย
ข้อความที่มีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้า ในลักษณะไฮเปอร์เท็กซ์
หรือไฮเปอร์มีเดียโครงสร้างลักษณะนี้จัดเป็นรูปแบบที่ไม่มีโครงสร้างที่แน่นอน
ตายตัว(Unstructured)นอกจากนี้การเชื่อมโยงไม่ได้จำกัดเฉพาะเนื้อหาภายในเว็บ
นั้น ๆ แต่สามารถเชื่อมโยงออกไปสู่เนื้อหาจากๆ เว็บภายนอกได้

1.7 แสดงผังเว็บที่มีโครงสร้างแบบใยแมงมุม

7

ลักษณะการเชื่อมโยงในเว็บนั้น นอกเหนือจากการใช้ไฮเปอร์เท็กซ์หรือไฮเปอร์มีเดีย กับ
ข้อความที่มีมโนทัศน์ (Concept) เหมือนกันของแต่ละหน้าแล้ว ยังสามารถใช้ลักษณะ
การเชื่อมโยงจากรายการที่รวบรวมชื่อหรือหัวข้อของเนื้อหาแต่ละหน้าไว้ ซึ่งรายการนี้
จะปรากฏอยู่บริเวณใดบริเวณหนึ่งในหน้าจอ ผู้ใช้สามารถคลิกที่หัวข้อใดหัวข้อหนึ่งใน
รายการเพื่อเลือกเข้าไปสู่หน้าใด ๆ ก็ได้ตามความต้องการ ข้อดีของรูปแบบนี้คือง่ายต่อ
ผู้ใช้ในการท่องเว็บ โดยผู้ใช้สามารถกำหนดทิศทางการเข้าสู่เนื้อหาได้ด้วยตนเอง แต่
ข้อเสียคือ ถ้ามีการเพิ่มเนื้อหาใหม่ ๆ อยู่เสมอจะเป็นการยากในการปรับปรุง นอกจาก
นี้การเชื่อมโยงระหว่างข้อมูลที่มีมากมายนั้นอาจทำให้ผู้ใช้เกิดความสับสนและเกิด
ปัญหา การคงค้างของหัวข้อ (Cognitive Overhead) ได้

สรุป

"เว็บเพจ” คือ เอกสารที่ใช้เผยแพร่ข้อมูลในรูปแบบสื่อประสม นำเสนอผ่าน ระบบเครือ
ข่ายอินเทอร์เน็ต เว็บเพจหลายเว็บเพจ รวมกันเป็นกลุ่มก้อน เรียกว่า “เว็บไซต์" โดย
หน้าแรกที่เปรียบเสมือนทางเข้าของเว็บไซต์ เรียกว่า “โฮมเพจ” หลักการทำงานของ
เว็บไซต์ คือ ข้อมูลของเว็บไซต์จะถูกเก็บไว้ที่ Web Server ผู้ใช้สามารถเรียกดูข้อมูลได้
ด้วยการส่งคำร้องขอ (พิมพ์ URL) และข้อมูลจะถูกส่ง มายัง Web Browser ตามคำขอ
โครงสร้างของเว็บไซต์ มี 4 แบบ คือ แบบ เรียงลำดับ แบบลำดับขั้น แบบตาราง และ
แบบใยแมงมุม การเลือกใช้โครงสร้าง แบบใดนั้น ขึ้นกับจุดประสงค์ของการใช้งานเป็น
สำคัญ

8

แบบทดสอบท้ายหน่วยที่ 1

คำสั่ง จงเลือกคำตอบที่ถูกต้องที่สุดเพียงข้อเดียว

1. การติดต่อสื่อสารบนเครือข่ายอินเทอร์เน็ต เรียกเครื่องรับบริการว่าอะไร

ก. โดเมน ข. เซิร์ฟเวอร์

ค. ไคลเอนต์ ง. เซกเตอร์

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

3. Sequential Structure หมายถึงโครงสร้างเว็บแบบใด

ก. โครงสร้างแบบตาราง ข. โครงสร้างแบบลำดับขั้น

ค. โครงสร้างแบบใยแมงมุม ง. โครงสร้างแบบเรียงลำดับ

4. Hierarchy Structure หมายถึงโครงสร้างเว็บแบบใด

ก. โครงสร้างแบบตาราง ข. โครงสร้างแบบลำดับขั้น

ค. โครงสร้างแบบใยแมงมุม ง. โครงสร้างแบบเรียงลำดับ

5. Web Structure มีลักษณะโครงสร้างแบบใด
ก. รูปแบบเรียงไปตามลำดับ
ข. มีความซับซ้อน เชื่อมโยงกัน
ค. คล้ายกับต้นไม้ ที่แตกกิ่งก้านสาขา
ง. รูปแบบที่ยืดหยุ่น ไม่มีโครงสร้างที่แน่นนอนตายตัว

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

9

7. โปรแกรมเว็บเบราเซอร์คือข้อใด ข. โปรแกรมที่ใช้ค้นหาเว็บ
ก. โปรแกรมที่ใช้สร้างเว็บ ง. โปรแกรมที่ใช้เปิดอินเทอร์เน็ต
ค. โปรแกรมที่ใช้เปิดดูเว็บ

8. ข้อใดไม่ใช่ลักษณะของเว็บไซต์
ก. ข้อมูลที่ถูกจัดเก็บไว้ใน www
ข. สิ่งที่เรียกดูผ่านโปรแกรมเว็บเบราเซอร์
ค. ไฟล์ข้อมูลหลาย ๆ ไฟล์ที่ถูกเก็บไว้ในที่รูปแบบเดียวกัน
ง. หน้าเว็บเพจหลาย ๆ หน้าที่เชื่อมต่อกันผ่านไฮเปอร์ลิงก์

9. หากเปรียบเว็บไซต์เป็นหนังสือเล่มหนึ่ง ท่านคิดว่า หน้าเว็บเพจเปรียบได้กับส่วนใด

ของหนังสือ

ก. เนื้อหา ข. สารบัญ

ค. ปกหนังสือ ง. บรรณานุกรม

10. โครงสร้างเว็บประเภทใดที่มีความยืดหยุ่นมากที่สุด

ก. โครงสร้างแบบตาราง ข. โครงสร้างแบบลำดับขั้น

ค. โครงสร้างแบบใยแมงมุม ง. โครงสร้างแบบเรียงลำดับ

ใบงาน

คำชี้แจง จงตอบคำถาม และปฏิบัติตามคำสั่งต่อไปนี้

1. จงอธิบายความหมายที่แตกต่างกัน ของ เว็บไซต์ เว็บเพจ และ โฮมเพจ
2. จงอธิบายกระบวนการทำงานของเว็บไซต์อย่างคร่าว ๆ
3. จงอธิบายความหมายของ เว็บเบราว์เซอร์ เว็บเซิร์ฟเวอร์
4. จงยกตัวอย่างเว็บที่มีโครงสร้างแบบลำดับขั้นมาอย่างน้อย 1 เว็บ
5. ท่านคิดว่าเว็บไซต์สถานศึกษาของท่าน มีโครงสร้างเว็บแบบใด จงอธิบาย

10

หน่วยที่ 2

การออกแบบเว็บไซต์

สาระสำคัญ

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

สาระการเรียนรู้

1. หลักการออกแบบเว็บไซต์
2. องค์ประกอบของเว็บไซต์
3. ขั้นตอนการออกแบบเว็บไซต์
4. ข้อแนะนำในการออกแบบเว็บไซต์

วัตถุประสงค์

1. อธิบายหลักการออกแบบเว็บไซต์ได้
2. อธิบายองค์ประกอบของเว็บไซต์ได้
3. ลำดับขั้นตอนในการออกแบบเว็บไซต์ได้อย่างถูกต้อง
4. ใช้ข้อแนะนำในการออกเว็บไซต์ไปประยุกต์ใช้อย่างถูกต้องได้

เว็บไซต์เป็นสื่อที่ได้รับความนิยมอย่างมากบนอินเทอร์เน็ต นับเป็นสื่อที่อยู่ใน
ความ ควบคุมของผู้ใช้โดยสมบูรณ์ กล่าวคือ ผู้ใช้สามารถตัดสินใจเลือกได้ว่าจะดู
เว็บไซต์ใดและไม่ เลือกดูเว็บไซต์ใดก็ได้ตามต้องการ ลักษณะเช่นนี้ทำให้ผู้ใช้ไม่มี
ความอดทนต่ออุปสรรคและ ปัญหาที่เกิดจากการออกแบบเว็บไซต์ผิดพลาด ถ้าผู้
ใช้ เห็นว่าเว็บที่กำลังดูอยู่นั้นไม่มี ประโยชน์สำหรับตน หรือไม่เข้าใจว่าเว็บไซต์นี้ใช้
งานอย่างไร ก็สามารถเปลี่ยนไปดูเว็บไซต์ อื่นได้ทันที เนื่องจากในปัจจุบันมีเว็บไซต์
อยู่มากมาย และยังมีเว็บไซต์ที่เกิดขึ้นใหม่ทุกวัน ผู้ ใช้จึงมีทางเลือกมากขึ้น และ
สามารถเปรียบเทียบคุณภาพของเว็บไซต์ต่าง ๆ ได้เอง เว็บไซต์ ที่ได้รับการ
ออกแบบอย่างสวยงาม มีการใช้งานที่สะดวก ย่อมได้รับความสนใจจากผู้ใช้
มากกว่าเว็บไซต์ที่ดูสับสนวุ่นวาย มีข้อมูลมากมายแต่หาอะไรไม่เจอ นอกจากนี้ยัง
ใช้เวลาใน การแสดงผลแต่ละหน้านานเกินไป ปัญหาเหล่านี้ล้วนเป็นผลมาจากการ
ออกแบบเว็บไซต์ไม่ ดีทั้งสิ้น ดังนั้น การออกแบบเว็บไซต์จึงเป็นกระบวนการสำคัญ
ในการสร้างเว็บไซต์ให้ประทับ ใจผู้ใช้ ทำให้ผู้ใช้กลับเข้ามาเว็บไซต์เดิมอีกใน
อนาคต ทั้งนี้ นอกจากต้องพัฒนาเว็บไซต์ที่ดี มีประโยชน์แล้ว ยังต้องคำนึงถึงการ
แข่งขันกับเว็บไซต์อื่นด้วย

ภาพที่ 2.1 ตัวอย่างเว็บไซต์ของกระทรวงศึกษาธิการ ที่ออกแบบเพื่อการสื่อสารข้อมูลและประชาสัมพันธ์องค์กร
ที่มา : https://www.google.com/searchimg&ei

ภาพที่ 2.2 ตัวอย่างเว็บไซต์ www.amazon ที่ออกแบบเพื่อการขายสินค้า
ที่มา : https://www.google.com/search?imgrc=Y0dFl8AgOwjc-M

12

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

หลักสำคัญในการออกแบบหน้าเว็บ คือ การใช้รูปภาพและองค์ประกอบต่าง ๆ ร่วม
กัน เพื่อสื่อความหมายเกี่ยวกับเนื้อหาหรือลักษณะสำคัญของเว็บไซต์ โดยมีเป้าหมาย
สำคัญเพื่อ การสื่อความหมายที่ชัดเจนและน่าสนใจบนพื้นฐานของความเรียบง่ายและ
ความสะดวกของผู้ใช้การออกแบบเว็บไซต์ที่มีประสิทธิภาพนั้นต้องคำนึงถึงองค์
ประกอบสำคัญดังต่อไปนี้

1. ความเรียบง่าย ได้แก่ มีรูปแบบที่เรียบง่าย ไม่ซับซ้อน และใช้งานได้สะดวก ไม่มี
กราฟิกหรือตัวอักษรที่เคลื่อนไหวอยู่ตลอดเวลา ชนิดและสีของตัวอักษรไม่มากจนเกิน
ไป ทำให้วุ่นวาย
2. ความสม่ำเสมอ ได้แก่ ใช้รูปแบบเดียวกันตลอดทั้งเว็บไซต์ เช่น รูปแบบของหน้า
สไตล์ของกราฟิก ระบบเนวิเกชันและโทนสี ควรมีความคล้ายคลึงกันตลอดทั้งเว็บไซต์
3. ความเป็นเอกลักษณ์ การออกแบบเว็บไซต์ควรคำนึงถึงลักษณะขององค์กร เพราะ
รูปแบบของเว็บไซต์จะสะท้อนถึงเอกลักษณ์และลักษณะขององค์กรนั้น ๆ เช่น ถ้าเป็น
เว็บไซต์ ของทางราชการ จะต้องดูน่าเชื่อถือไม่เหมือนสวนสนุก ฯลฯ
4. เนื้อหาที่มีประโยชน์ เนื้อหาเป็นสิ่งที่สำคัญที่สุดในเว็บไซต์ ดังนั้นควรจัดเตรียม
เนื้อหาและข้อมูลที่ผู้ใช้ต้องการให้ถูกต้อง และสมบูรณ์ มีการปรับปรุงและเพิ่มเติมให้
ทัน เหตุการณ์อยู่เสมอ เนื้อหาไม่ควรซ้ำกับเว็บไซต์อื่น จึงจะดึงดูดความสนใจ
5. ระบบเนวิเกชั่นที่ใช้งานง่าย ต้องออกแบบให้ผู้ใช้เข้าใจง่ายและใช้งานสะดวก ใช้
กราฟิก ที่สื่อความหมายร่วมกับคำอธิบายที่ชัดเจน มีรูปแบบและลำดับของรายการที่
สม่ำเสมอ เช่น วางไว้ตำแหน่งเดียวกันของทุกหน้า
6. ลักษณะที่น่าสนใจ หน้าตาของเว็บไซต์จะต้องมีความสัมพันธ์กับคุณภาพของ องค์
ประกอบต่าง ๆ เช่น คุณภาพของกราฟิกที่จะต้องสมบูรณ์ การใช้สี การใช้ตัวอักษรที่
อ่านง่าย สบายตา การใช้โทนสีที่เข้ากัน ลักษณะหน้าตาที่น่าสนใจนั้นขึ้นอยู่กับความ
ชอบของ แต่ละบุคคล
7. การใช้งานอย่างไม่จำกัด ผู้ใช้ส่วนใหญ่สามารถเข้าถึงได้มากที่สุดเลือกใช้
เบราว์เซอร์ ชนิดใดก็ได้ใน การเข้าถึงเนื้อหาสามารถแสดงผลได้ทุกระบบปฏิบัติการ
และความละเอียด หน้าจอต่าง ๆ กันอย่างไม่มีปัญหา เป็นลักษณะสำคัญสำหรับผู้ใช้ที่
มีจำนวนมาก
8. คุณภาพในการออกแบบ การออกแบบและเรียบเรียงเนื้อหาอย่างรอบคอบ สร้าง
ความรู้สึกว่า เว็บไซต์มีคุณภาพ ถูกต้อง และเชื่อถือได้

13

9. ลิงก์ต่าง ๆ ต้องเชื่อมโยงไปหน้าที่มีอยู่จริงและถูกต้อง ระบบการทำงานในเว็บไซต์
ควรมีความถูกต้องแน่นอน ซึ่งต้องได้รับการออกแบบอย่างสร้างสรรค์และตรวจสอบ
อยู่เสมอ ตัวอย่างเช่น ลิงก์ต่าง ๆ ในเว็บไซต์ต้องตรวจสอบว่ายังสามารถลิงก์ข้อมูลได้
ถูกต้องหรือไม่ เพราะเว็บไซต์อื่นอาจมีการเปลี่ยนแปลงได้ตลอดเวลา ปัญหาที่เกิดจาก
ลิงก์ คือ ลิงก์ขาด ซึ่ง พบได้บ่อย เป็นปัญหาที่สร้างความรำคาญกับผู้ใช้เป็นอย่างมาก

2.2 องค์ประกอบของเว็บไซต์

องค์ประกอบของเว็บไซต์เป็นปัจจัยหลักที่มีผลต่อความสำเร็จของเว็บไซต์ องค์
ประกอบ ของเว็บไซต์ ประกอบด้วย
1. Domain Name ชื่อและที่อยู่ของเว็บไซต์ในการเรียกข้อมูลเว็บไซต์มาแสดงผล เช่น
www.yourcompany.com เป็นต้น ปัจจุบันมักจดชื่อ Domain Name ให้เป็นชื่อที่สื่อ
ถึงสินค้า หรือบริการ หรือเป็นชื่อองค์กร และอาศัยการทำประชาสัมพันธ์ผ่าน Search
Engine การ เลือกใช้ชื่อเว็บไซต์ที่เหมาะสมก็มีส่วนในการทำให้เว็บไซต์ประสบความ
สำเร็จเช่นกัน
2. Design & Development การออกแบบเว็บไซต์เป็นเพียงส่วนที่ทำหน้าที่นำเสนอ
ข้อมูลขององค์กรหรือบริษัทให้แก่ผู้เยี่ยมชมได้อย่างสะดวก การออกแบบที่ดี สื่อถึง
ความเป็น เอกลักษณ์ขององค์กร หรือบริษัทจะนำมาซึ่งความน่าเชื่อถือให้เกิดแก่ผู้เข้า
เยี่ยมชมได้ หาก แต่มักมีคนเข้าใจผิดเกี่ยวกับการออกแบบเว็บไซต์ ว่าเว็บไซต์ที่มีการ
ออกแบบที่มีความ สวยงาม และมีการนำเสนอที่น่าสนใจจะสามารถดึงดูด และเพิ่ม
ปริมาณผู้เข้าเยี่ยมชมได้ แต่ ในความเป็นจริงแล้วการเข้าถึงกลุ่มเป้าหมายและเพิ่ม
ปริมาณของผู้เข้าเยี่ยมชมนั้น เป็น หน้าที่หลักของการทำประชาสัมพันธ์เว็บไซต์ ไม่ใช่
จากการออกแบบและจัดทำเว็บไซต์ โดยตรง
3. Content เนื้อหาของเว็บไซต์ ถือว่าเป็นสิ่งที่สำคัญที่สุด เพราะคือสิ่งที่ผู้เยี่ยมชม
ค้นหา สามารถใส่เนื้อหาที่เกี่ยวข้องกับสินค้าหรือบริการขององค์กรได้โดยละเอียด อีก
ทั้งต้องน้ำ เสนออย่างชัดเจน เช่น รูปภาพของสินค้า หรือสถานที่บริการ เป็นต้น ทำให้ผู้
เข้าเยี่ยมชม ได้ประโยชน์จากการเข้าชมเว็บไซต์อย่างแท้จริง อันนำมาซึ่งผลประโยชน์
ทางธุรกิจในอนาคต ได้ เนื้อหาในที่นี้ไม่ได้หมายถึงข้อความเท่านั้น แต่ยังหมายถึง
รูปภาพ เสียง ภาพเคลื่อนไหว และองค์ประกอบอื่น ๆ ด้วย
4. Hosting พื้นที่จัดวางและติดตั้งเว็บไซต์ เป็นองค์ประกอบที่สำคัญมากไม่น้อยกว่า
เนื้อหาของเว็บไซต์ เพราะการเลือกผู้ให้บริการโฮสติ้งที่ดี มีการซัพพอร์ตลูกค้าที่ดีและ
รวดเร็ว เซิร์ฟเวอร์มีความเสถียรภาพสูง สามารถติดต่อเจ้าหน้าที่ที่ดูแลเซิร์ฟเวอร์ได้
ตลอดเวลา คือ

14

หัวใจสำคัญในการเลือกผู้ให้บริการด้านนี้ เพราะจะส่งผลให้ธุรกิจของลูกค้ามีความต่อ
เนื่อง ในการทำงานอยู่เสมอ
5. Promotion การทำประชาสัมพันธ์เว็บไซต์ เป็นองค์ประกอบที่สำคัญมากอีกอย่าง
หนึ่ง หลังการจัดทำเว็บไซต์เสร็จแล้วต้องอาศัยการประชาสัมพันธ์เว็บไซต์ เพื่อให้เข้า
ถึงกลุ่ม เป้าหมายมากที่สุด โดยอาศัยวิธีการต่าง ๆ ผ่านช่องทางอินเทอร์เน็ต เช่น
Search Engine Submission, Registration Web Directory, Mailing List,
Banner Link Exchange นอกจากนี้อาจใช้ชื่อ Domain Name ในการประชาสัมพันธ์
เว็บไซต์ผ่านสื่ออื่น เช่น ในนามบัตร ใบปลิว หรือโบรชัวร์ของบริษัท เป็นต้น

2.3 ขั้นตอนการออกแบบเว็บไซต์

การออกแบบเว็บไซต์มีความแตกต่างกับการออกแบบสิ่งพิมพ์ทั่วไป แม้ว่าจะมี จุด
ประสงค์เพื่อใช้ตัวหนังสือ รูปภาพเพื่อสื่อสารกับผู้ใช้เหมือนกันก็ตาม ดังนั้นผู้ใช้ควร
คำนึง ถึงขั้นตอนการออกแบบเว็บไซต์เป็นหลัก หากทำผิดขั้นตอนอาจทำให้การ
ออกแบบเว็บไซต์ ไม่เป็นไปตามที่ผู้ใช้ต้องการได้ ขั้นตอนการออกแบบเว็บไซต์มีดังนี้

ขั้นตอนที่ 1 กำหนดโครงสร้างของเว็บไซต์

การสร้างเว็บไซต์นั้นควรเริ่มจากการสร้างแผนผังของเว็บไซต์ก่อน หรือที่เรียกว่า
Site Map ดังภาพตัวอย่างมีการกำหนดหน้าเว็บเพจ 4 หน้า

ภาพที่ 2.3 ตัวอย่างการกำหนดโครงสร้างของเว็บไซต์
ที่มา : https://www.google.com/searchMapLTqQ6YGm_tM

15

ขั้นตอนที่ 2 กำหนดการเชื่อมโยงระหว่างเว็บเพจ

ต้องกำหนดการเชื่อมโยงให้เว็บเพจแต่ละหน้าเชื่อมโยงถึงกันเพื่อให้กลับไปกลับ
มา ระหว่างหน้าต่าง ๆ ได้ แต่ละไฟล์ที่มีการเชื่อมโยงสัมพันธ์กันดังภาพ

ภาพที่ 2.4 ตัวอย่างการกำหนดการเชื่อมโยงระหว่างเว็บเพจ
ที่มา : https://www.google.com/searchMapLTqQ6YGm_tM

ขั้นตอนที่ 3 การออกแบบเว็บเพจแต่ละหน้า

สามารถออกแบบหน้าเว็บเพจแต่ละหน้าให้สวยงาม โดยเฉพาะในเว็บเพจหน้าแรก
ควร ออกแบบให้สวยงามเพื่อดึงดูดความสนใจของผู้เข้าชม ในขั้นตอนการออกแบบนี้
บางทีอาจ เรียกว่าการออกแบบเลย์เอาท์ (Layout) สามารถทำได้โดยการเขียนลงใน
กระดาษ หรือใช้ โปรแกรมคอมพิวเตอร์ช่วยในการออกแบบก็ได้

ภาพที่ 2.5 ตัวอย่างการออกแบบเลย์เอาท์ของหน้าเว็บเพจ
ที่มา : https://www.google.com/searchMapLTqQ6YGm_tM




16

ขั้นตอนที่ 4 การสร้างเว็เพจแต่ละหน้า

นำเว็บเพจที่ออกแบบไว้มาสร้างโดยใช้ภาษา html หรือชุดคำสั่ง เช่น Joomla,
Google site, Dreamweaver หรือโปรแกรมสำเร็จรูปอื่น ๆ ตามความถนัด

ภาพที่ 2.6 ตัวอย่างการสร้างหน้าเว็บเพจด้วยภาษา html
ที่มา : https://www.google.com/searchMapLTqQ6YGm_tM




ขั้นตอนที่ 5 การลงทะเบียนขอพื้นที่เว็บไซต์
เป็นการเผยแพร่เว็บไซต์ที่สร้างเสร็จแล้วเข้าสู่ระบบเครือข่ายอินเทอร์เน็ต เพื่อให้

บุคคล อื่นสามารถเข้าชมเว็บไซต์ได้ วิธีการ คือ นำเว็บไซต์ที่สร้างขึ้นไปไว้บนพื้นที่ที่ให้
บริการ (Web Hosting) ซึ่งมีทั้งพื้นที่ที่ให้บริการฟรี และแบบที่ต้องเสียค่าบริการ

ขั้นตอนที่ 6 การอัพโหลดเว็บไซต์
หลังจากสร้างเว็บไซต์และลงทะเบียนขอพื้นที่สำหรับฝากเว็บไซต์แล้ว ให้ใช้

โปรแกรม สำหรับอัพโหลด (upload) เพื่อให้คนทั่วโลกสามารถเข้าชมเว็บไซต์ของผ่าน
ทางระบบเครือ ข่ายอินเทอร์เน็ตได้

2.4 ข้อแนะนำในการออกแบบเว็บไซต์

นอกจากขั้นตอนที่ถูกต้องในการออกแบบเว็บไซต์แล้ว ยังมีข้อแนะนำเพิ่มเติมใน
การออกแบบเว็บไซต์ มีดังต่อไปนี้

1. ผู้เข้าชมเว็บไซต์นั้น ไม่สามารถอ่านทุกข้อความที่เขียนในเว็บไซต์ได้ ทุกคนจะ
อ่าน ผ่าน ๆ ไปเพื่อให้ได้ข้อมูลที่ต้องการ

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

17

3. เว็บไซต์ควรดูสบายตา เช่น ไม่ควรใส่เนื้อหาที่เป็นตัวหนังสือมากเกินไป อาจมี
การแทรกรูปภาพ หรือพื้นที่ว่างไว้ในเว็บไซต์บ้าง เพื่อเป็นจุดพักสายตาของผู้ใช้ ซึ่ง
สามารถ ปฏิบัติเป็นขั้นตอนง่าย ๆ ดังนี้

3.1 ควรให้ความสำคัญกับหน้าแรก ข้อมูลที่คิดว่าสำคัญควรมีไว้ในหน้าแรก
3.2 ผู้ใช้งานเว็บไซต์แต่ละคนนั้นเข้ามาในเว็บเพื่อต้องการข้อมูลที่แตกต่างกัน
ควร ให้ผู้ใช้งานหาข้อมูลที่ต้องการได้โดยง่ายที่สุด
3.3 เว็บไซต์ต้องโหลดหน้าเว็บได้อย่างรวดเร็ว และง่ายต่อการอ่าน แต่ละ
หัวข้อต้อง แบ่งให้ชัดเจน เพื่อให้ผู้ใช้สามารถแบ่งเนื้อหาส่วนต่าง ๆ ออกจากกันได้
3.4 การออกแบบงานกราฟิกควรจะสอดคล้องกับเนื้อหาที่นำเสนอ หลายครั้ง
ที่ภาพ ประกอบในเนื้อหาเบี่ยงเบนความสนใจจากเนื้อหา และทำให้ผู้อ่านเข้าใจเพราะ
ภาพไม่ตรงกับเนื้อหา
3.5 ตัวหนังสือหรือภาพที่มีการขยับติด ๆ ดับ ๆ (BLink) ไม่ควรนำมาใช้งาน
เพราะ ทำให้ผู้ใช้เกิดความรำคาญ และสนใจภาพที่ขยับมากว่าตัวเนื้อหา
3.6 ลิงก์ที่ใช้งานไม่ได้ หรือลิงก์ที่อยู่ระหว่างการปรับปรุง ไม่ควรนำมาแสดง
ผล

สรุป

เว็บไซต์ที่ดีควรออกแบบ โดยยึดหลักการสำคัญ ได้แก่ ความเรียบง่าย ความ
สม่ำเสมอ ความเป็นเอกลักษณ์ เนื้อหาที่มีประโยชน์ ระบบเนวิเกชั่นที่ใช้งานง่าย
มีลักษณะที่น่าสนใจ สามารถใช้งานได้อย่างไม่จำกัด มีคุณภาพ และ ลิงก์ต่าง ๆ
ต้องเชื่อมโยงไปยังหน้าที่มีอยู่จริงได้อย่างถูกต้อง องค์ประกอบของเว็บไซต์ ได้แก่
ชื่อและที่อยู่ของเว็บไซต์(DomainName)การออกแบบเว็บไซต์
(Design&Develop) เนื้อหา (Content) พื้นที่จัดเก็บ (Hosting) และการทำ
ประชาสัมพันธ์เว็บไซต์(Promotion)ขั้นตอนการออกแบบเว็บไซต์ได้แก่การ
กำหนดโครงสร้างของเว็บไซต์การกำหนดการเชื่อมโยงระหว่างเว็บเพจการ
ออกแบบ สร้างเว็บเพจ การลงทะเบียนของพื้นที่เว็บไซต์ และการอัพโหลดเว็บไซต์
เพื่อเผยแพร่

18

แบบทดสอบท้ายหน่วยที่ 2

คำสั่ง จงเลือกคำตอบที่ถูกที่สุดเพียงข้อเดียว

1. ขั้นตอนแรกของการออกแบบเว็บไซต์ ข. สร้าง Site map
ก. ออกแบบเว็บเพจแต่ละหน้า ง. วางแผนงบประมาณ
ค. ลงทะเบียนขอพื้นที่เว็บไซต์

2. ข้อใดเป็นลักษณะของการออกแบบเว็บไซต์ที่ดี

ก. ภาพชัดเจน ขนาดใหญ่ ข. ตัวอักษรกระพริบ สร้างจุดสนใจ

ค. มีเนื้อหารายละเอียดมาก ๆ ง. สามารถหาข้อมูลที่ต้องการได้ง่ายที่สุด

3. การประชาสัมพันธ์เว็บไซต์ด้วยวิธีการใดที่มีประสิทธิภาพมากและมีค่าใช้จ่ายน้อยที่สุด

ก. Search Engine ข. Banner Link

ค. Domain Name ง. Web Directory

4. Hosting คืออะไร ข. พื้นที่จัดวางและติดตั้งเว็บไซต์
ก. ชื่อและที่อยู่ของเว็บไซต์ ง. แหล่งข้อมูลเพื่อการสร้างเว็บไซต์
ค. บริการการประชาสัมพันธ์เว็บไซต์

5. ส่วนใดของหน้าเว็บที่สำคัญและดึงดูดใจผู้ชมมากที่สุด

ก. ส่วนหัว ข. ส่วนเนื้อหา

ค. ส่วนท้าย ง. ภาพประกอบ

6. ข้อใด ไม่ใช่โปรแกรมสำหรับสร้างเว็บ ข. InDesign
ก. HTML ง. Dreamweaver
ค. Joomla

7. ข้อใดไม่ใช่โปรแกรมเว็บเบราว์เซอร์
ก. FireFox
ข. Android
ค. Google Chrome
ง. Internet Explorer

19

8. การนำภาพและตัวอักษรมาใช้งานในเว็บไซต์ แบบใดที่ไม่เหมาะสม
ก. ภาพที่มีความหมายตรงกับเนื้อหา
ข. ภาพที่มีสีสันสวยงาม โทนสีไปในทิศทางเดียวกัน
ค. ภาพที่มีการขยับ ติด ๆ ดับ ๆ เพื่อดึงดูดความสนใจ
ง. ภาพที่มีความชัดเจน และขนาดไฟล์ภาพไม่ใหญ่เกินไป

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

10. ข้อใดเป็นสิ่งที่ไม่ควรทำในการออกแบบเว็บไซต์
ก. ควรมีจัดพักสายตาของผู้ใช้
ข. ควรแทรกรูปภาพลงในหน้าเว็บ เพื่อให้สบายตา
ค. ควรวางเมนูเดียวกัน ในตำแหน่งเดียวกัน ในแต่ละหน้า
ง. ควรใส่เนื้อหาทุกอย่างที่มีลงในเว็บไซต์ เพื่อผู้เข้าชมจะได้ข้อมูลที่ครบถ้วน

ใบงาน

คำชี้แจง จงตอบคำถาม และปฏิบัติตามคำสั่งต่อไปนี้

1. อธิบายหลักการออกแบบเว็บไซต์ พร้อมยกตัวอย่าง
2. องค์ประกอบของเว็บไซต์มีกี่อย่าง อะไรบ้าง
3. ขั้นตอนการออกแบบเว็บไซต์มีกี่ขั้นตอนอะไรบ้าง
4. จงยกตัวอย่างข้อควรระวังในการออกแบบเว็บไซต์มาอย่างน้อย 3 ข้อ
5. จงยกตัวอย่างลักษณะการออกแบบเว็บไซต์ที่น่าสนใจ อย่างน้อย 3 ข้อ
6. หาตัวอย่างเว็บไซต์ที่มีลักษณะการออกแบบเว็บไซต์ที่น่าสนใจ มา 1 เว็บไซต์
และบอกลักษณะที่คิดว่าทำให้เว็บไซต์นั้นมีความน่าสนใจ มาอย่างน้อย 3 ข้อ

20

หน่วยที่ 3

การสร้างเว็บไซต์ด้วยโปรแกรมภาษา โปรแกรมสำเร็จรูป
หรือโปรแกรมระบบ CMS

สาระสำคัญ

เครื่องมือที่ใช้ในการสร้างเว็บไซต์มีมากมายหลากหลายรูปแบบ แบ่งโดย
รวมได้เป็น 3 รูปแบบ ได้แก่ การสร้างเว็บไซต์ด้วยโปรแกรมภาษา การสร้าง
เว็บไซต์ด้วยโปรแกรม สำเร็จรูป และการสร้างเว็บไซต์ด้วยระบบจัดการเนื้อของ
เว็บไซต์ (CMS) แต่ละแบบมี ข้อดี ข้อเสียที่แตกต่างกัน ให้ผลลัพธ์ที่แตกต่างกัน
ผู้สร้างเว็บไซต์ ต้องทำความเข้าใจ เครื่องมือเหล่านี้ เพื่อสามารถเลือกใช้ได้อย่าง
ถูกต้องเหมาะสมกับงานและศักยภาพที่มี

สาระการเรียนรู้

1. การสร้างเว็บไซต์ด้วยโปรแกรมภาษา
2. การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป
3. การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS

วัตถุประสงค์

1. อธิบายการสร้างเว็บไซต์ด้วยโปรแกรมภาษาได้
2. อธิบายการสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูปได้
3. อธิบายการสร้างเว็บไซต์การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS ได้

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

1. การสร้างเว็บไซต์ด้วยโปรแกรมภาษา
2. การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป
3. การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS

3.1 การสร้างเว็บไซต์ด้วยโปรแกรมภาษา




เหมาะสำหรับผู้ที่มีความสามารถในการเขียนโปรแกรมภาษาคอมพิวเตอร์ โดยผู้
สร้าง จะต้องเขียนโปรแกรมสำหรับแสดงข้อมูลขึ้นมาเอง ภาษาที่ใช้ได้แก่

1. ภาษา HTML (HyperText Markup Language) เป็นภาษาพื้นฐานที่สุด
สำหรับ การเขียนเว็บเพจ

2. ภาษา Java หรือ JavaScript เป็นภาษาที่ใช้สำหรับสร้างลูกเล่นต่าง ๆ บน
เว็บเพจ

3. ภาษา SQL เป็นภาษาจัดการฐานข้อมูล จะใช้งานเมื่อต้องการให้เว็บไซต์อ่าน
ข้อมูล จากระบบฐานข้อมูลมาแสดงอัตโนมัติ เช่น แสดงข้อมูลอัตราแลกเปลี่ยนเงินตรา
ประจำวัน เป็นต้น โดยทำงานร่วมกับภาษาอื่นที่ออกแบบมาให้ทำงานบนเว็บเซิร์ฟเวอร์
โดยตรง เช่น ภาษา ASP หรือ ASP.NET ภาษา PHP ภาษา JSP ภาษา Python
เป็นต้น ข้อดีของการสร้างเว็บไซต์ด้วยวิธีนี้คือ ได้ฟังก์ชัน (Function) การใช้งานที่ครบ
ถ้วนตรง ความต้องการมากที่สุด ข้อเสียคือ ใช้เวลาในการสร้างที่นาน และต้องอาศัย
ความรู้ด้านภาษา ด้านการเขียนโปรแกรมภาษาคอมพิวเตอร์ด้วย

ภาพที่ 3.1 แสดงตัวอย่างการสร้างหน้าเว็บด้วยโปรแกรม HTML
ที่มา : https://www.google.com/search?qhtml



22

3.2 การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป
การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป เหมาะสำหรับผู้ไม่มีความรู้เกี่ยวกับ
การเขียน โปรแกรม เพราะเพียงแต่สร้างหน้าจอและสร้างการเชื่อมโยงต่าง ๆ จาก
เครื่องมือที่โปรแกรม สร้างเว็บไซต์มีให้ จากนั้นโปรแกรมจะสร้างรหัสโปรแกรมขึ้น
มาตามที่ออกแบบไว้อัตโนมัติโปรแกรมที่ทำงานในลักษณะนี้ได้แก่โปรแกรม
Dreamweaver โปรแกรม A4Desk Flash Website Builder โปรแกรม PHP
Makerเป็นต้น ข้อดีของการสร้างเว็บไซต์ด้วยวิธีนี้คือ สามารถสร้างเว็บไซต์ได้อย่าง
รวดเร็วข้อเสียคือได้ฟังก์ชันการใช้งานที่จำกัดตามความสามารถของโปรแกรม
สำเร็จรูปปรับแต่งแก้ไขได้ยากยกเว้นแต่มีความชำนาญด้านภาษาสำหรับเขียน
โปรแกรมคอมพิวเตอร์มาประกอบ

ภาพที่ 3.2 แสดงตัวอย่างการสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป Dreamweaver
ที่มา : http://168training.club/e-learning_new/ac_co6_1/lesson2/content1/index.php

3.3 การสร้างเว็บไซต์ด้วยโปรแกรมระบบ CMS

ระบบจัดการเนื้อหาเว็บไซต์ หรือที่เรียกกันทั่วไปว่า CMS (CMS ย่อมาจาก
Content Management System) เป็นเว็บไซต์สำเร็จรูปที่มีรูปแบบเนื้อหา
(Template) มาตรฐาน ตายตัว มีทั้งแบบที่แจกให้ใช้งานฟรีและแบบที่ต้องจ่าย
เงินซื้อหามาCMSมักจะมีฟังก์ชันการทำงานพื้นฐานทั่วไปอย่างครบถ้วน
ครอบคลุมการสร้างเว็บไซต์ด้วยวิธีนี้จึงเหมาะสำหรับการสร้างเว็บไซต์ที่ต้องการ
ปรับปรุงเนื้อหาบ่อย โดยผู้สร้างไม่จำเป็นต้องมีความรู้ด้าน

23

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

1. Joomla เป็น CMS ที่ได้รับความนิยมเป็นอย่างมากในปัจจุบัน เพราะมีระบบการ
จัดการเนื้อหาที่มีรูปแบบสากล การปรับแต่งหน้าตาของเว็บไซต์ทำได้ง่าย เพราะ
Joomla ถูกออกแบบมาให้รองรับกับเทคโนโลยีการออกแบบเว็บไซต์สมัยใหม่ ไม่ว่าจะ
เป็นการรองรับ Flash หรือ GIF Animation นอกจากนี้ยังสามารถ ดาวน์โหลด
Template ได้มากมาย จุดเด่นของ Joomla อีกจุดหนึ่งคือ มี Extension จำนวนมาก
ให้สามารถนำมาประยุกต์ ใช้งาน เช่น Component, Module, Plugin มีทั้งแบบฟรี
และแบบต้องชำระเงิน เว็บไซต์อย่าง เป็นทางการของ Joomla คือ
http://www.Joomla.org

ภาพที่ 3.3 แสดงตัวอย่างหน้าจอที่สร้างเว็บไซต์ด้วยโปรแกรม Joomla
ที่มา : https://www.youtube.com/watch?v=ema2ES-h2bE

2. Wordpress คือ CMS ตัวหนึ่งที่มีความสามารถในการสร้างบล็อกโดยเฉพาะ
มีระบบ การจัดการที่ง่ายสะดวกต่อการใช้งาน มีความสามารถในการค้นหาที่ดี
พร้อมทั้งความงฯ ต่อการเก็บข้อมูล จึงเป็นอีกโปรแกรมหนึ่งที่นิยมอยู่ในปัจจุบัน

24

ภาพที่ 3.4 แสดงตัวอย่างหน้าจอที่สร้างเว็บไซต์ด้วยโปรแกรม Wordpress
ที่มา : https://contentshifu.com/blog/how-to-create-your-own-website-by-wordpress

3. Mambo เป็น CMS ที่มีผู้ใช้งานมากมายทั้งในหน่วยงานของรัฐ และผู้คนทั่วไป
ทำให้มีที่ปรึกษามากหากมีปัญหาการใช้งาน รวมถึงตัวระบบเองก็ใช้งานได้ง่าย และ
มีผู้พัฒนา อยู่ตลอดเวลา มีเว็บไซต์ภาษาไทยรองรับสำหรับผู้ที่ต้องการศึกษาและใช้
งาน

ภาพที่ 3.5 แสดงตัวอย่างหน้าจอที่สร้างเว็บไซต์ด้วยโปรแกรม mambo
ที่มา : http://www.thaiall.com/mambo/index.html

25

4. Drupal เป็น CMS แบบโอเพนซอร์ส มีจุดเด่นในเรื่องสถาปัตยกรรมภายใน
ที่ยืดหยุ่น ที่ค่อนไปทางบล็อกสมัยใหม่ ซึ่งแตกต่างจาก CMS โปรแกรมอื่นที่ยังคง
มีรูปแบบการแสดง ผลเชิงข่าวอยู่ ดังนั้นความ ดังนั้นความแรงของกระแสบล็อก
จึงมีส่วนผลักดันความนิยมในตัว Drupal นอกจากนี้ยังมีการกำหนดสิทธิสมาชิกที่
ดีมาก มีความยืดหยุ่นสูง แม้ว่าตอนแรกอาจจะสับสน กับการใช้งานบ้าง แต่เมื่อ
เข้าใจระบบแล้ว จะรู้สึกว่าใช้งานง่ายและสะดวกมาก

ภาพที่ 3.6 แสดงตัวอย่างหน้าจอเว็บไซต์ด้วยโปรแกรม Drupal
ที่มา : https://poakpong.com/node/2041

ข้อดีของวิธีของ CMS คือ สามารถสร้างเว็บไซต์ได้ในเวลารวดเร็วและสะดวก

ใน การดูแลรักษา ผู้พัฒนา CMS มักจะออกเวอร์ชั่นใหม่เพื่อแก้ไขข้อบกพร่องของ

เวอร์ชั่นเดิม อย่างต่อเนื่อง และยังมีหน้าตา (Theme) แบบต่าง ๆ ให้เลือกใช้หลาก

หลาย อย่างไรก็ตาม การสร้างเว็บไซต์ด้วยวิธีนี้อาจจะมีความยุ่งยากหรือติดขัด

ตอนเริ่มต้น เนื่องจากผู้ให้บริการ ฝากเว็บไซต์ (Hosting) มีลักษณะการตั้งค่าการ

ทำงานของเว็บเซิร์ฟเวอร์ที่แตกต่างกันไป นอกจากนี้ ผู้ดูแลเว็บไซต์ต้องทำความ

เข้าใจวิธีการใช้งานและรักษารหัสผ่านการเข้าใช้งาน ให้ปลอดภัยเพื่อป้องกัน

บุคคลอื่นเข้ามาแก้ไขเนื้อหาบนเว็บไซต์โดยไม่ได้รับอนุญาต

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

26

สรุป

การสร้างเว็บไซต์ มี 3 วิธีการ คือ การสร้างเว็บไซต์ด้วยโปรแกรมภาษา
เหมาะ สำหรับผู้มีความสามารถในการเขียนโปรแกรมคอมพิวเตอร์ ข้อดีคือ
ทำงานได้ หลากหลายไม่จำกัด ข้อเสียคือ ใช้เวลานาน การสร้างเว็บไซต์ด้วย
โปรแกรมสำเร็จรูป เหมาะสำหรับผู้ไม่มีความรู้เรื่องการเขียนโปรแกรมเลย ข้อดี
คือ ใช้เวลาน้อย ข้อเสีย คือ การใช้งานจำกัดและปรับแต่งแก้ไขยาก การสร้าง
เว็บไซต์ด้วยโปรแกรมระบบ CMS เหมาะสำหรับเว็บไซต์ที่มีการปรับปรุงเนื้อหา
บ่อย ข้อดี คือ ใช้งานง่ายและสะดวกใน การดูแลรักษา ข้อเสียคือ มีข้อบกพร่อง
ของโปรแกรมทำให้มีการเปลี่ยนเวอร์ชั่นบ่อย และมีความยุ่งยากในการตั้งค่า
การทำงานเริ่มต้น

แบบทดสอบท้ายหน่วยที่ 3

คำสั่ง จงเลือกคำตอบที่ถูกต้องที่สุดเพียงข้อเดียว

1. โปรแกมภาษาใด ไม่เหมาะสำหรับการสร้างเว็บที่ต้องมีการอ่านข้อมูลจากระบบฐานข้อมูล

มาแสดงผลอัตโนมัติมากที่สุด

ก. HTML ข. Java

ค. Java Script ง. Dreamweaver

2. โปรแกรมอะไร ไม่ใช่โปรแกรมการสร้างเว็บไซต์ด้วยโปรแกรมภาษา

ก. HTML ข. SQL

ค. Java ง. Joomla

3. โปรแกรมการสร้างเว็บใด ที่ต้องมีความรู้เรื่องการเขียนโปรแกรม

ก. Java ข. PHP

ค. Wordpress ง. Dreamweaver

4. ข้อใดไม่ใช่ โปรแกรมระบบ CMS ข. Drupal
ก. Mambo ง. Joomla
ค. Dreamweaver

5. หากท่านมีเว็บไซต์ที่ต้องปรับปรุงเนื้อหาอยู่บ่อย ๆ ควรสร้างเว็บไซต์ด้วยโปรแกรมอะไร

ก. Java ข. Joomla

ค. PHP Maker ง. Dreamweaver

27

6. โปรแกรมสร้างเว็บอะไร ที่มีการแสดงผลแบบบล็อก

ก. Mambo ข. Drupal

ค. Wordpress ง. Dreamweaver

7. โปรแกรมสร้างเว็บประเภทใด ที่ใช้เวลาในการสร้างนานที่สุด และประเภทใดใช้เวลาในการ
สร้างน้อยที่สุด

ก. โปรแกรมภาษา ใช้เวลานานที่สุด โปรแกรมสำเร็จรูป ใช้เวลาน้อยที่สุด
ข. โปรแกรมภาษา ใช้เวลานานที่สุด โปรแกรมระบบ CMS ใช้เวลาน้อยที่สุด
ค. โปรแกรมระบบ CMS ใช้เวลานานที่สุด โปรแกรมสำเร็จรูปใช้เวลาน้อยที่สุด
ง. โปรแกรมสำเร็จรูป ใช้เวลานานที่สุด โปรแกรมระบบ CMS ใช้เวลาน้อยที่สุด

8. CMS ย่อมาจากข้อใด ข. Component Merge System
ก. Content Merge System ง. Content Management System
ค. Content Management Site

9. โปรแกรม A4Desk Flash Website Builder เป็นโปรแกรมสร้างเว็บไซต์ประเภทใด

ก. โปรแกรมภาษา ข. โปรแกรมสำเร็จรูป

ค. โปรแกรมระบบ CMS ง. โปรแกรมระบบฐานข้อมูล

10. HTML ย่อมาจากอะไร
ก. HyperText Markup Language
ข. HyperText Model Language
ค. HyperText Makeup Language
ง. Hyperspace Markup Language

ใบงาน

คำชี้แจง จงตอบคำถาม และปฏิบัติตามคำสั่งต่อไปนี้

1. จงยกตัวอย่างโปรแกรมภาษา โปรแกรมสำเร็จรูป และโปรแกรมระบบ CMS
สำหรับการสร้างเว็บไซต์ มาอย่างละ 3 โปรแกรม

2. จงอธิบายข้อแตกต่าง ระหว่างการสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป กับ
การสร้างเว็บไซต์ด้วยโปรแกรมภาษา

3. จงอธิบายข้อดีของการสร้างเว็บด้วยโปรแกรมระบบ CMS มาอย่างน้อย 3 ข้อ

28

หน่วยที่ 4

การสร้างเว็บไซต์ด้วยโปรแกรมสำเร็จรูป

สาระสำคัญ

Dreamweaver เป็นโปรแกรมสำหรับการสร้างเว็บไซต์ที่ได้รับความ
นิยมสูงสุด ในกลุ่มโปรแกรมประเภทเดียวกันในปัจจุบัน เนื่องจากคุณสมบัติ
ของโปรแกรมมีความสะดวก ต่อการใช้งาน มีฟังก์ชันที่ทำให้ผู้ใช้สามารถจัด
วางข้อความ รูปภาพ ตาราง ฟอร์ม วิดีโอรวมถึงองค์ประกอบอื่น ๆ ภายใน
เว็บเพจได้อย่างสวยงามตามที่ผู้ใช้ต้องการ จึงเหมาะสำหรับผู้ที่ต้องการเรียน
รู้การสร้างเว็บไซต์ตั้งแต่เริ่มต้นจนประยุกต์ใช้งานได้

สาระการเรียนรู้

1. เปิดใช้งาน Dreamweaver
2. ส่วนประกอบของ Dreamweaver
3. มุมมองการทำงานใน Dreamweaver
4. เริ่มต้นสร้างเว็บไซต์
5. การจัดการโครงสร้างโฟลเดอร์

วัตถุประสงค์

1. เปิดใช้งาน Dreamweaver ได้
2. เข้าใจส่วนประกอบของ Dreamweaver
3. เข้าใจมุมมองการทำงานใน Dreamweaver
4. เริ่มต้นสร้างเว็บไซต์ได้
5. สามารถจัดการโครงสร้างโฟลเดอร์ได้
6. เข้าใจหลักการเพิ่มและแก้ไของค์ประกอบบนหน้าเว็บ

Dreamweaver เป็นโปรแกรมสำเร็จรูปที่ช่วยในการสร้างงานเว็บไซต์ได้อย่าง
ง่ายๆ ด้วยการนำภาพและข้อความที่ต้องการมาประกอบเป็นหน้าเว็บเพจ สามารถ
เพิ่มลูกเล่นทางด้าน เสียง ภาพเคลื่อนไหว อีกทั้งการติดต่อกับฐานข้อมูลซึ่งถือว่า
เป็นเรื่องที่ยาก แต่กลับสามารถทำได้ง่ายผ่านทางโปรแกรมนี้ โดยไม่ต้องเสียเวลา
กับการเขียนโปรแกรมด้วยภาษา HTMLอีกต่อไป นอกจากนี้ Dreamweaver ยัง
เป็นโปรแกรมแบบ What You See Is What You Get (WYSIWYG) คือ จัดวาง
ภาพ หรือ ข้อความแบบไหน โปรแกรมจะทำการเขียนโค้ดให้ อัตโนมัติตามการจัด
วาง ทำให้ผู้ออกแบบหน้าเว็บไซต์ที่เรียกว่า Web Designer สามารถมีส่วนเข้ามา
พัฒนาเว็บไซต์ด้วยตนเองได้มากขึ้นแม้จะไม่ถนัดการเขียนโค้ดก็ตามส่งผลให้
เว็บไซต์ในปัจจุบันนี้มีความสวยงามน่าสนใจมากกว่าในยุคเริ่มแรก

4.1 เปิดใช้งาน Dreamweaver

หลังจากติดตั้งโปรแกรม Dreamweaver เรียบร้อยแล้วสามารถเรียกใช้งาน
โปรแกรมได้ ด้วยวิธีการดังต่อไปนี้

1. เปิดโปรแกรม Dreamweaver แล้วคลิกเมาส์ที่คำสั่ง HTML เพื่อสร้างหน้าเอกสาร HTML ใหม่ขี้นมา

30

2. แสดงหน้าเอกสาร HTML ใหม่ที่ถูกสร้างขึ้นมา

ภาพที่ 4.1 ขั้นตอนการเปิดใช้งาน Dreamweaver

1. เลือกเปิดโปรแกรม Dreamweaver เมื่อเปิดโปรแกรมแล้วจะแสดงหน้าต่างที่เรียก

ว่า Welcome Screen ที่มีตัวเลือกดังนี้

Open a Recent Item เปิดเอกสาร (หน้าเว็บ) เดิมที่สร้างไว้

Create New สร้างเอกสารเปล่าตามรูปแบบที่เลือก เช่น HTML,

ColdFusion, PHP, ASP, CSS

Top Features เข้าสู่หน้าเว็บ Adobe TV ดูสาธิตการใช้งาน

2. ในที่นี้ ให้คลิกเลือกเป็น HTML เพื่อสร้างหน้าเอกสาร HTML ขึ้นมาใหม่ จากนั้น
เข้าสู่หน้าจอเริ่มต้นของโปรแกรม Dreamweaver (การสร้างหน้าเอกสารใหม่ สามารถ

เลือกได้หลากหลายรูปแบบตามความเหมาะสมทั้งแบบโปรแกรมภาษาโปรแกรม
สำเร็จรูปอื่น และโปรแกรมระบบ CMS)

31

อธิบายตัวเลือกในการสร้างหน้าเอกสาร (หน้าเว็บ) ใหม่แต่ละแบบ มีดังต่อไปนี้

HTML : สร้างหน้าเว็บธรรมดาเพื่อแสดงข้อมูลที่เป็นข้อความ หรือ

รูปภาพ โดยไม่มีการทำงานที่เกี่ยวข้องกับฐานข้อมูล หรือการทำงานกับเซิร์ฟเวอร์

สคริปต์ต่าง ๆ เหมาะสำหรับผู้ที่เริ่มต้น ออกแบบ และหัดสร้างหน้าเว็บเพจ

ColdFusion : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่ ง

เซิร์ฟเวอร์ColdFusion โดยใช้โปรแกรมภาษา CFML (Cold FusionMarkup

Language)

PHP : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วยเทคโนโลยีฝั่ ง

เซิร์ฟเวอร์ PHP (Personal Home Pages) ซึ่งเป็นเทคโนโลยีหนึ่งที่ได้รับความ

นิยม เพราะสามารถติดตั้งและใช้งานได้ฟรี

ASP VBScript : สร้างหน้าเว็บแอพพลิเคชั่นที่พัฒนาด้วเทคโนโลยีฝั่ งเซิร์ฟเวอร์
ASP (Active Server Pages) ซึ่งเป็นเทคโนโลยีหลักของไมโครซอฟท์

XSLT : สร้างหน้า XSLT (extensible Stylesheet Language

Trans-formations) หน้าเว็บที่เข้าใจโครงสร้าง และแสดงชุดข้อมูลในไฟล์ XML

ได้

XML : สร้างไฟล์ XML (extensive Markup Language) ที่เก็บ

โครงสร้างและชุดข้อมูลบนเว็บ

CSS : สร้างไฟล์ CSS (Cascading Style Sheets) เก็บรูปแบบตัว

อักษร, ตาราง, สีพื้นหลังของหน้าเว็บ และรูปแบบอื่น ๆ เก็บไว้เป็นรูปแบบกลางที่นำ

ไปใช้ในทุกหน้าเว็บเพจได้ JavaScript : สร้างไฟล์ JavaScript ทำงานที่นั่งไคล

เอนต์ ซึ่งสคริปต์นี้จะส่งมาพร้อมแท็ก HTML และทำงานที่เครื่องของผู้เปิดดูเว็บ

Dreamweaver Site : สร้างเว็บไซต์ใหม่

32

4.2 ส่วนประกอบของ Dreamweaver

หน้าต่างการทำงานของโปรแกรม Dreamweaver มีองค์ประกอบต่อไปนี้

ภาพที่ 4.2 แสดงหน้าต่างการทำงานของโปรแกรม Dreamweaver

แถบสถานะ (Status Bar)

แถบสถานะของ Dreamweaver เป็นการแสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่
กำลังทำ โดย มีส่วนประกอบ ดังนี้

1. ส่วนไว้เลือกแท็ก HTML (Tag Selector) : แสดงแท็ก HTML ของตำแหน่งที่
คลิก เลือกบนหน้าเว็บ เช่น คลิกเลือกตาราง จะแสดงแท็ก <table> มีประโยชน์
มากในการเลือก จุดแก้ไข เพราะสามารถเลือกจุดหรือแท็กที่ต้องการได้อย่าง
แม่นยำ

33

2. ขนาดของหน้าต่างออกแบบเว็บเพจ (Window Size) : แสดงขนาดของ
หน้าต่าง ออกแบบเว็บเพจ

3. เครื่องมือปรับการแสดงผลหน้าเว็บขณะออกแบบ : Zoom Tool ใช้สำหรับ
ย่อ ขยายหน้าเว็บให้เห็นรายละเอียดชัดขึ้น หรือใช้ Hand Tool เลื่อนดูหน้าเว็บใน
ส่วนที่ มองไม่เห็น

4. ขนาดของหน้าเว็บและเวลาที่ใช้ในการโหลด : แสดงเวลา (โดยประมาณ) ที่
ใช้ในการ โหลดหน้าเว็บเพจ โดยถ้าหน้าเว็บที่สร้างมีขนาดใหญ่เพราะมีข้อความ และ
รูปภาพจำนวน มาก ก็จะทำให้ต้องใช้เวลาโหลดนาน นอกจากนั้นความเร็วในการ
โหลดหน้าเว็บขึ้นอยู่กับ ความเร็วอินเทอร์เน็ตของผู้ใช้ด้วย (สามารถกำหนดค่านี้ได้
ในเมนู Edit->Preferences ส่วน Status Bar หัวข้อ Connection speed)

5. รองรับการทำงานหลายภาษา : แสดงการทำงานแบบหลายภาษา (UTF-8)
เพื่อ รองรับการแสดงหลายภาษาบนหน้าเว็บเพจเดียวกัน

ภาพที่ 4.3 แสดงแถบสถานะของโปรแกรม Dreamweaver

พาเนลเครื่องมือ (Insert panel)

พาเนลนี้เป็นเครื่องมือที่ใช้สำหรับสร้างองค์ประกอบ
ต่าง ๆ (เรียกองค์ประกอบเหล่านี้ว่า ออบเจ็กต์) ที่จะนำ
มา สร้างเป็นหน้าเว็บเพจ โดยกลุ่มเครื่องมือจะถูกเก็บไว้
เป็น กลุ่มในแท็บต่าง ๆ

ภาพที่ 4.4 พาเนลเครื่องมือ

พาเนลคุณสมบัติ (Property Inspector)

เมื่อใดที่คลิกเลือกภาพหรือองค์ประกอบต่างๆบนหน้าเว็บจะปรากฏ
PropertyInspector ที่แสดงค่าเพื่อให้ปรับแต่งคุณสมบัติที่เกี่ยวข้องกับองค์ประกอบ
นั้น ๆ ได้ ดังตัวอย่างเมื่อคลิกเลือกที่ภาพ Property Inspector จะแสดงคุณสมบัติ
ของภาพให้ปรับแต่งได้ดังรูป




34

ภาพที่ 4.5 พาเนลคุณสมบัติ

กลุ่มหน้าต่างพาเนล (Panel Group)

ใน Dreamweaver มีหน้าต่างพาเนลต่าง ๆ ช่วยเพิ่มความสามารถในการจัดการ
และ ออกแบบหน้าเว็บ แต่ละพาเนลจะมีความสามารถในการจัดการหน้าเว็บไม่
เหมือนกัน การ เรียกเปิดพาเนลทำได้จากเมนูคำสั่ง Window- พาเนลที่ต้องการ ดังนี้

ภาพที่ 4.6 กลุ่มหน้าต่างพาเนล

35

4.3 มุมมองการทำงานใน Dreamweaver

ใน Dreamweaver สามารถเลือกมุมมองการทำงานได้ 3 รูปแบบตามความ
ถนัดการเลือกมุมมองทำได้โดยการคลิไอคอนที่อยู่ในแถบคำสั่ง ดังนี้

Code

คลิกที่ Code เป็น มุมมองแสดงโค้ด HTML หรือสคริปต์ต่าง ๆ ซึ่งเหมาะ
สำหรับผู้ที่ สามารถเขียนโค้ด HTML หรือสคริปต์ต่างๆ ได้

Split ภาพที่ 4.7 คลิกที่ Code จะปรากฏมุมมองแสดงโค้ด
ที่มา : http://www.ratsada.ac.th/wbi/unit-1/view-dreamweaver.html

คลิกที่ Split เป็นมุมมองแสดงโค้ดและมุมมองออกแบบ ซึ่งเหมาะสำหรับผู้ที่

ต้องการแก้ไขโค้ด พร้อมดูผลการแก้ไขในมุมมองการออกแบบ

ภาพที่ 4.8 คลิกที่ Split จะปรากฏมุมมองแสดงโค้ดและมุมมองออกแบบ 36
ที่มา : http://www.ratsada.ac.th/wbi/unit-1/view-dreamweaver.html

Design

คลิกที่ Design เป็นมุมมองออกแบบ ซึ่งเหมาะสำหรับผู้ที่ต้องการออกแบบ
หน้าเว็บโดยที่ไม่ต้องยุ่งเกี่ยวกับโค้ด

มุมมองออกแบบ
ภาพที่ 4.9 คลิกที่ Design จะปรากฏมุมมองออกแบบ
ที่มา : http://www.ratsada.ac.th/wbi/unit-1/view-dreamweaver.html

ถึงแม้ว่าในมุมมองออกแบบจะแสดงหน้าเว็บคล้ายกับตอนแสดงบน
เบราว์เซอร์ แต่ไม่เหมือนทั้งหมด ดังนั้นถ้าต้องการดูหน้าเว็บแบบเหมือนจริง
เหมือนดูผ่านเบราว์เซอร์สามารถดูได้ในมุมมอง Live

ภาพที่ 4.10 คลิกที่ Live จะแสดงหน้าเว็บเหมือนดูจากเบราว์เซอร์
ที่มา : http://www.ratsada.ac.th/wbi/unit-1/view-dreamweaver.html




4.4 เริ่มต้นสร้างเว็บไซต์


ในการสร้างเว็บไซต์ เริ่มจากการกำหนดโครงร่างของเว็บ และสร้างโฟลเดอร์
และไฟล์ ต่าง ๆ ที่ประกอบกันเป็นเว็บไซต์ก่อน ดังนี้

37

กำหนดโครงร่างของเว็บ

ก่อนสร้างเว็บไซต์ ขอแนะนำให้เริ่มออกแบบโครงร่างคร่าว ๆ ของเว็บไซต์นั้น
ก่อน เพื่อไม่ก่อให้เกิดความสับสนที่อาจตามมาในภายหลัง โดยเว็บไซต์ที่ประกอบ
ด้วยเว็บเพจหลายหน้าจะนิยมจัดเก็บไฟล์เว็บเพจไว้ในโฟลเดอร์แยกตามหัวข้อ
ต่าง ๆ

ดังตัวอย่าง ถ้าต้องการจัดทำเว็บไซต์ขายแพ็คเกจทัวร์ อาจสร้างโฟลเดอร์
ชื่อ“SuccessTravel” เป็นโฟลเดอร์ที่รวมเว็บเพจและไฟล์ต่าง ๆ ที่ใช้ไว้ทั้งหมด
โดยในโฟลเดอร์นี้จะประกอบด้วยหลายโฟลเดอร์ย่อยสำหรับแยกเก็บไฟล์ที่
ประกอบกันเป็นเว็บไซต์ เช่นโฟลเดอร์ ชื่อ “home” “thailand” “foreign”
“about” “contact” และเก็บไฟล์ .html ที่ใช้ส่วนโฟลเดอร์ “images” เก็บไฟล์
รูปภาพและไฟล์มัลติมีเดียที่ใช้ในเว็บไซต์ ดังตัวอย่าง

ภาพที่ 4.11 ตัวอย่างการจัดโฟลเดอร์สำหรับเก็บไฟล์ต่าง ๆ ที่ประกอบกันเป็นเว็บไซต์
ที่มา : http://www.ratsada.ac.th/wbi/unit-2/intro-website.html

จากรูป พบว่าหน้าโฮมเพจหลัก (index.html) ต้องอยู่ในโฟลเดอร์หลักและไม่
ควรอยู่ในโฟลเดอร์ย่อย เนื่องจาก index.html คือ เว็บเพจหน้าแรกที่จะถูกแสดง
เมื่อมีการเยี่ยมชมเว็บไซต์

ไฟล์ที่ประกอบเป็นเว็บไซต์ถูกเก็บไว้ในเครื่องของผู้สร้าง (นอกจากในกรณีที่มี
การทำงาน เป็นทีม อาจมีการกำหนดเครื่องเซิร์ฟเวอร์ที่เก็บไฟล์เหล่านี้ไว้เป็น
ศูนย์กลาง) จะเห็นได้ว่าการ แยกเก็บไฟล์ .html และไฟล์อื่น ๆ อย่างเป็นระบบจะ
ช่วยในการจัดเก็บและการค้นหาไฟล์ ตลอดจนการเชื่อมโยงระหว่างไฟล์ได้ง่าย

38

กำหนดเว็บไซต์ใหม่ใน Dreamweaver

เริ่มต้นการกำหนดเว็บไซต์ใหม่ใน Dreamweaver โดยกำหนดเพียงข้อมูลพื้น
ฐานเกี่ยวกับการสร้างเว็บไซต์ใหม่เท่านั้น จากนั้น Dreamweaver จะช่วยกำหนด
รายละเอียด เพิ่มเติมให้ทั้งหมด นับเป็นวิธีที่สะดวกและรวดเร็ว

1. เริ่มกำหนดเว็บไซต์ใหม่ โดยการเลือกเมนูคำสั่ง Site->Manage Sites...
2. เมื่อปรากฏหน้าต่าง Manage Sites ขึ้นมา ให้คลิกเมาส์ที่ปุ่ม New Site
เพื่อเข้าสู่ หน้าต่าง Site Definition สำหรับการสร้างเว็บไซต์ใหม่
3. กำหนดรายละเอียดของเว็บไซต์ที่จะสร้าง ดังนี้

1. Site Name กำหนดชื่อเว็บไซต์ (ในที่นี้ตั้งชื่อเว็บไซต์ว่า
SuccessTravel)

2.Local Site Folder กำหนดโฟลเดอร์ที่เก็บเว็บไซต์ใหม่นี้ (กรณีที่ไม่ได้
สร้างโฟลเดอร์โปรแกรม Dreamweaver จะสร้างให้ใหม่ตามชื่อที่ระบุ ดัง
ตัวอย่าง สร้างเป็นโฟลเดอร์ SuccessTravel สำหรับเก็บเว็บไซต์)

4. คลิกปุ่ม Done เพื่อปิดหน้าต่าง Manage Sites
5. โปรแกรม Dreamweaver จะเปิดพาเนล Files และแสดงชื่อเว็บไซต์
เป็นSuccess Travel

ที่มา : https://www.youtube.com/watch?v=kvwIpV1vj2s

39

ภาพที่ 4.12 ขั้นตอนการกำหนดเว็บไซต์ใหม่ใน Dreamweaver
ที่มา : https://sites.google.com/site/elearningkrujames/website-unit3

4.5 การจัดการโครงสร้างโฟลเดอร์

เมื่อสร้างเว็บไซต์ใหม่ขึ้นมาแล้ว สามารถสร้างหน้าเว็บเพจใหม่ เปลี่ยนชื่อไฟล์
และโฟลเตอร์ และจัดข้อมูลในเว็บไซต์ได้ ดังนี้

การสร้างเว็บเพจใหม่

คลิกเมาส์ปุ่มขวาที่โฟลเดอร์ที่ต้องการสร้างหน้าเว็บเพจใหม่ แล้วเลือกคำสั่ง
New Fileจะปรากฏเว็บเพจใหม่ที่มีนามสกุล .html แล้วตั้งชื่อไฟล์ใหม่ที่จะสร้างได้
ตามต้องการ

40

การสร้างโฟลเดอร์ใหม่

กรณีที่ต้องการสร้างโฟลเดอร์ย่อยใต้โฟลเดอร์ที่เก็บเว็บไซต์ เพื่อแยกเก็บ
ข้อมูลและหน้า เว็บให้เป็นหมวดหมู่ ให้คลิกเมาส์ปุ่มขวาที่โฟลเดอร์ Site แล้ว
เลือก New Folder จะปรากฏ โฟลเดอร์ใหม่ในรายการ ให้ตั้งชื่อโฟลเดอร์ใหม่นี้
แล้วกดปุ่ม Enter

การเปลี่ยนชื่อไฟล์และโฟลเดอร์

การเปลี่ยนชื่อไฟล์และโฟลเดอร์ที่ อยู่ภายในเว็บไซต์ จะช่วยสื่อความหมาย
ให้ตรงกับเนื้อหา โดยให้คลิกที่ไฟล์หรือ โฟลเดอร์ที่ต้องการจะเปลี่ยนชื่อ คลิกซ้ำ
อีกครั้งแล้วพิมพ์ชื่อไฟล์ โฟลเดอร์ใหม่ จากนั้นกดปุ่ม Enter (ดังตัวอย่าง เปลี่ยน
ชื่อโฟลเดอร์เป็น images)

การลบไฟล์และโฟลเดอร์

ให้คลิกเมาส์ที่ไฟล์โฟลเดอร์ที่ ต้องการลบและกดคีย์ Delete โปรแกรม
Dreamweaver จะให้ยืนยันว่าต้องการ ลบไฟล์โฟลเดอร์ที่เลือกจริง คลิก Yes
เพื่อยืนยัน

การเปิด/ปิดหน้าเว็บ

สามารถเรียกไฟล์ที่สร้างขึ้นได้ โดยดับเบิลคลิกที่ไอคอนไฟล์นั้นในพาเนล
Files (ใน ตัวอย่าง คือ การเปิดหน้า index.html ขึ้นมา) และเมื่อต้องการปิด
หน้าเว็บนี้ให้คลิกที่ X หรือ เลือกเมนูคำสั่ง File->Close




ภาพที่ 4.13 ขั้นตอนการเปิด/ปิดหน้าเว็บ
ที่มา ; https://hdotldotn.wordpress.com

41

4.6 เข้าใจหลักการเพิ่มและแก้ไของค์ประกอบบนหน้าเว็บ

สามารถเพิ่มองค์ประกอบต่าง ๆ บนหน้าเว็บ อาทิ ตาราง รูปภาพ หรือแบบ
ฟอร์มได้ โดยแต่ละองค์ประกอบนี้มีชื่อเรียกว่า วัตถุ (Object) ซึ่งสร้างจากกลุ่ม
เครื่องมือต่าง ๆ ที่อยู่ ในพาเนล Insert ดังตัวอย่าง คลิกเลือกเครื่องมือ จากแท็บ
เครื่องมือ Common เป็น การแทรกภาพในหน้าเว็บตรงตำแหน่งที่เคอร์เซอร์อยู่
(ในตัวอย่าง นำภาพมาวางในบริเวณ ส่วนบนของหน้าเว็บ)

ภาพที่ 4.14 ตัวอย่างการเพิ่มองค์ประกอบในหน้าเว็บด้วยการแทรกภาพ
ที่มา : https://www.star-circuit.com

หลังจากนำ Object มาวางบนหน้าเว็บแล้ว หากต้องการปรับแต่งราย
ละเอียดของ Object นั้น ก็ให้คลิกเมาส์เลือก Object บนหน้าเว็บ แล้วราย
ละเอียดต่างๆ ของ Object นั้นจะปรากฏ ใน Property Inspector โดยแสดง
เฉพาะค่ากำหนดต่างๆ ของ Object ที่เลือก เช่น ถ้าคลิก เลือกภาพที่แทรกเข้ามา
Property Inspector จะแสดงการกำหนดค่าของภาพนั้นให้ปรับแต่ง มๆ ได้ หลัก
การนี้มีความสำคัญมากในการทำงานกับหน้าเว็บ

42

4.7 เพิ่มเนื้อหาในหน้าเว็บ

การเพิ่มเนื้อหาในหน้าเว็บเปล่าที่สร้าง ดังตัวอย่างในรูป ทำได้ตามขั้นตอนต่อไปนี้




ภาพที่ 4.15 ตัวอย่างการเพิ่มเนื้อหาในหน้าเว็บเปล่า
ที่มา : https://www.youtube.com/watch?v=muUC4FYMz-A

ขั้นตอนที่ 1 กำหนดชื่อหัวเรื่องบนหน้าเว็บ

ใส่ชื่อหัวเรื่องบนหน้าเว็บ หรือที่นิยมเรียกว่า
ไตเติล (Title) ได้ที่ช่องTitle บนแถบเครื่องมือ

ในช่อง Title ใส่ชื่อหัวเรื่องที่เราต้องการให้กับหน้าเว็บ
(ในตัวอย่างจะใส่คำว่า “Where Leisure Begins)

ขั้นตอนที่ 2 แทรกภาพลงในหน้าเว็บ ภาพที่ 4.16 การกำหนดหัวเรื่องบนหน้าเว็บ

การแทรกภาพลงในหน้าเว็บ มีวิธีการดังนี้

ภาพที่ 4.17 ขั้นตอนการแทรกภาพลงในหน้าเว็บ 43