หน่วยที่ 2 พื้นฐานการพัฒนาเว็บไซต์

หน่วยท่ี 2 พน้ื ฐานการพัฒนาเวบ็ ไซต์ 17

หนว่ ยท่ี 2 พน้ื ฐานการพัฒนาเว็บไซต์

สาระการเรียนรู้
1. การวางแผนการออกแบบเว็บไซต์
2. เทคโนโลยีเวบ็
3. การติดตัง้ โปรแกรมเว็บเซริ ์ฟเวอร์
4. การตดิ ตงั้ โปรแกรม Adobe Dreamweaver 2020

จดุ ประสงคเ์ ชิงพฤตกิ รรม
1. รแู้ ละเขา้ ใจการวางแผนและออกแบบการสร้างเวบ็ ไซตไ์ ด้ (K)
2. รแู้ ละเขา้ ใจเทคโนโลยเี ว็บได้ (K)
3. สามารถปฏิบัติการติดตั้งโปรแกรมเวบ็ เซิร์ฟเวอร์ได้ (P)
4. สามารถปฏิบัติการตดิ ตั้งโปรแกรม Adobe Dreamweaver 2020ได้ (P)
5. มีความสนใจใฝ่รู้ มีความรับผิดชอบ มีจรรยาบรรณในการใช้งานคอมพิวเตอร์ (A)

สมรรถนะการเรียนรู้ประจำหน่วย
1. แสดงความรู้เก่ียวกับหลักการวางแผนและออกแบบเวบ็ ไซต์
2. แสดงความรเู้ กี่ยวกับเทคโนโลยเี วบ็
3. ปฏบิ ัติการติดตง้ั โปรแกรมเว็บเซริ ์ฟเวอรไ์ ด้
4. ปฏิบัตกิ ารตดิ ต้ังโปรแกรม Adobe Dreamweaver 2020

สาระสำคัญ

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

30204-2103 การพัฒนาเว็บไซตท์ างธรุ กิจ

หน่วยที่ 2 พื้นฐานการพัฒนาเวบ็ ไซต์ 18

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

การวางแผนและออกแบบเวบ็ ไซต์

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

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

เกดิ ข้ึน
1.2 การกำหนดรูปแบบและสีของเว็บไซต์ ซึ่งกรณีที่เป็นเว็บไซต์สำหรับบริษัทหรือองค์กร

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

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

1.4 แหลง่ ขอ้ มูลเน้ือหา เป็นปัจจยั สำคญั สำหรับการพฒั นาเว็บไซต์ เพราะเน้ือหาควรมีความ
ชัดเจนและสอดคล้องกับเวบ็ ไซต์ เช่น เนอื้ หา 60% ข่าวสาร 15% และโฆษณา 25%

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

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

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

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หนว่ ยท่ี 2 พื้นฐานการพัฒนาเว็บไซต์ 19

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

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

โดยทั่วไปหน้าเว็บเพจมีส่วนประอบแบ่งออกเป็น 3 ส่วนหลัก ๆ ได้แก่ 1) ส่วนหัว (Page
Header) 2) ส่วนของเนอ้ื หา (Page Body) และ 3) สว่ นท้าย (Page Footer)

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

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

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กจิ

หนว่ ยที่ 2 พ้ืนฐานการพฒั นาเว็บไซต์ 20

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

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

2. รายละเอียดของการบริการหรือผลิตภัณฑ์ (Service/Product Information) คือข้อมูล
หลักที่เรานำเสนอ เช่น เป็นเว็บไซต์ทางธุรกิจ ผู้ใช้จำเป็นต้องรู้รายละเอียดเกี่ยวกับการบริการหรือ
ผลติ ภัณฑ์ ทั้งน้ีอาจเปรียบเทียบคณุ สมบตั หิ รือราคาเพ่อื ให้ผู้ใช้ประกอบการคัดสินใจ

3. ข่าวสาร (News/Press Release) อาจเปน็ ขา่ วสารที่ตอ้ งการส่งถงึ บคุ คลทัว่ ไปหรือสมาชิก
เพอ่ื ใหร้ บั รู้การเคลื่อนไหวเกี่ยวกบั หนว่ ยงานหรอื องคก์ ร

4. คำถามคำตอบ (Frequently Asked Question) คำถามคำตอบมคี วามจำเป็นเพราะผู้ชม
บางส่วนอาจไมเ่ ข้าใจขอ้ มูลหรอื มปี ัญหาต้องการสอบถาม

5. ข้อมูลในการตดิ ตอ่ (Contact Information) เพ่อื ใหผ้ ้ใู ช้สามารถติดต่อในกรณีมีข้อมูลส่ง
หรอื ต้องการสอบถามขอ้ มูลเพิ่มเติม

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

การออกแบบโครงสรา้ งเว็บไซต์ (Site Structure Design)

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

1. ระบบเรียงลำดับ (Sequence) เหมาะสำหรับเว็บไซต์ที่มีจำนวนเว็บเพจไม่มากนัก
หรือ เว็บไซตท์ ม่ี กี ารนำเสนอขอ้ มูลแบบทีละขัน้ ตอนต่อเนอ่ื งกนั

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กิจ

หนว่ ยท่ี 2 พื้นฐานการพัฒนาเวบ็ ไซต์ 21

2. แบบระดับชั้น (Hierarchy) เหมาะสำหรับเว็บไซต์ที่จำนวนเว็บเพจมากขึ้น ซึ่งเป็น
รูปแบบท่ีมักจะพบโดยทวั่ ไปขนึ้ อยกู่ ับเนือ้ หาทีเ่ กยี่ วขอ้ ง

3. แบบผสม (Combination) เหมาะสำหรับเว็บไซต์ที่ซับซ้อนเป็นการผสมผสาน
ระหว่างแบบเรียงลำดบั และแบบระดับช้นั ซงึ่ เว็บเพจแตล่ ะหน้าอาจจะเชือ่ มโยงสมั พนั ธก์ ันหลายกลุ่มได้

ข้อควรระวงั เกย่ี วกับการออกแบบเว็บไซต์

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

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

เมนูเฉพาะกลุ่ม เป็นเมนูที่เชื่อมโยงเฉาพะเว็บเพจภายในกลุ่มย่อย ๆ ท่ีมีเนื้อหา
เก่ียวเนอ่ื งกันเท่านนั้ มากอยู่ในรปู แบบของล้ิงก์ข้อความหรอื ภาพกราฟกิ

7. ขอ้ มูลเกา่ ไม่การปรบั ปรงุ ใหท้ ันสมัย
8. เว็บเพจแสดงผลช้า

เทคโนโลยีเว็บ

เทคโนโลยีเว็บได้มีการพฒั นาเรมิ่ ต้นจากเวบ็ 1.0 จนกระทั่งในปัจจบุ ันเปน็ เว็บ 2.0 โดยมีการ
พฒั นาเข้าไปสู่เวบ็ 3.0 และจะก้าวเขา้ สเู่ วบ็ 4.0 ต่อไปในอนาคต

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

30204-2103 การพฒั นาเวบ็ ไซตท์ างธรุ กิจ

หนว่ ยที่ 2 พ้ืนฐานการพัฒนาเว็บไซต์ 22

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

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

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

เว็บ 4.0 คอื เทคโนโลยีเว็บในอนาคตทีม่ ีการเรียกกนั ว่า “A Symbiotic Web” ซึ่งเป็นเว็บท่ี
ทำงานแบบ Artificial Intelligence (AI) ทมี่ คี วามฉลาดโดยสามารถอา่ นและเข้าใจเน้ือหา ข้อความ และ
รูปภาพ หรือวิดโี อ สามารถวเิ คราะห์หรอื ตัดสนิ ใจเกย่ี วกับข้อมูลให้ผู้ใช้งานได้รับประโยชนส์ ูงสุด และการ
นำเสนอข้อมูล สารสนเทศต่าง ๆ ของเทคโนโลยีเว็บ 4.0 สามารถที่จะนำเสนอหรือแสดงผลได้ทุก
ระบบปฏบิ ัติการหรอื ทุกอปุ กรณ์

ทม่ี า : http://petervan.files.wordpress.com/2010/01/image10.png?w=422&h=293

30204-2103 การพฒั นาเว็บไซตท์ างธรุ กิจ

หนว่ ยท่ี 2 พ้นื ฐานการพฒั นาเว็บไซต์ 23

การติดต้ังโปรแกรมเวบ็ เซิรฟ์ เวอร์

วิธีการติดตั้งโปรแกรมเว็บเซิร์ฟเวอร์ (Web Server) ที่เป็น Web Server Utility ด้วย
XAMPP สามารถดาวน์โหลดตัวตดิ ตัง้ ได้ที่ https://www.apachefriends.org/download.html

เมอ่ื ทำการดาวน์โหลดแลว้ จะไดไ้ ฟล์ติดต้ัง ทำ
การดบั เบิลคลิกไฟลจ์ ะไดด้ งั ภาพ

ทำการคลกิ ท่ีปุ่ม Next> แลว้ จะปรากฎหน้าต่างดังน้ี

30204-2103 การพฒั นาเว็บไซตท์ างธรุ กจิ

หนว่ ยที่ 2 พ้นื ฐานการพฒั นาเวบ็ ไซต์ 24

ทำการคลิกที่ปมุ่ Next > แลว้ จะปรากฎหนา้ ต่างดงั นี้

หมายเลข 1 กำหนดตำแหน่งตดิ ตงั้ (กำหนดหรือไม่กำหนดกไ็ ด)้
หมายเลข 2 คลกิ ทป่ี ุม่ Next > เพ่อื ดำเนินการตอ่ ไป

30204-2103 การพฒั นาเว็บไซตท์ างธรุ กจิ

หนว่ ยท่ี 2 พ้นื ฐานการพฒั นาเว็บไซต์ 25

ทำการคลกิ ทปี่ มุ่ Next > แลว้ จะปรากฎหนา้ ต่างดังน้ี

ทำการคลิกที่ปุ่ม Next > แล้วจะปรากฎหนา้ ต่างดังนี้

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กจิ

หนว่ ยท่ี 2 พน้ื ฐานการพฒั นาเวบ็ ไซต์ 26

ทำการคลิกที่ปุ่ม Next > แลว้ จะปรากฎหน้าต่างดังน้ี

รอจนกว่าแถบสถานะการตดิ ต้ังจะเสรจ็ สมบูรณ์ จะปรากฎหน้าตา่ งดงั น้ี

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หน่วยที่ 2 พืน้ ฐานการพัฒนาเวบ็ ไซต์ 27

คลกิ ทีป่ ุ่ม Allow Access ดงั ภาพ เพอื่ ไปขน้ั ตอนถัดไป

คลกิ ทีป่ ุม่ Finish เพอ่ื เข้าสหู่ น้า Control Panel ดังภาพ

30204-2103 การพัฒนาเวบ็ ไซตท์ างธรุ กจิ

หนว่ ยที่ 2 พน้ื ฐานการพฒั นาเวบ็ ไซต์ 28

เม่ือถงึ ขน้ั ตอนหมายถึงการติดตงั้ โปรแกรมเวบ็ เซริ ์ฟเวอรด์ ้วย XAMPP เสรจ็ สมบรู ณ์แลว้

เริม่ ต้นการใช้งาน XAMPP

เมอ้ื ทำการตดิ ตงั้ โปรแกรมเรียบรอ้ ยแล้วเราสามารถเขา้ ใช้งาน XAMPP ได้ด้วยการเรียนใช้งาน
Control Panel ขึ้นมาดังภาพ

30204-2103 การพฒั นาเวบ็ ไซต์ทางธรุ กจิ

หนว่ ยท่ี 2 พื้นฐานการพฒั นาเวบ็ ไซต์ 29
หมายเลข 1 Start Apache สำหรบั เวบ็ เซริ ฟ์ เวอร์
หมายเลข 2 Start MySQL สำหรบั การสรา้ งฐานข้อมูล MySQL
เมื่อการทำงานพรอ้ มจะมีสถานะดงั ภาพ

ทำการทดสอบโปรแกรมดย้ เวบ็ บราวเ์ ซอร์ เช่น Google Chrome, Mozilla Firefox หรือ
โปรแกรมตัวอน่ื กไ็ ด้ โดยทำการ คลิกท่ี Admin ในสว่ นของ Apache หรอื พมิ พ์ localhost หรือ
127.0.0.1 บน URL ดงั ภาพ

วธิ ีท่ี 1 คลิกที่ Admin ในส่วนของ Apache

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กจิ

หน่วยท่ี 2 พื้นฐานการพัฒนาเวบ็ ไซต์ 30

วิธที ่ี 2 พิมพ์ localhost หรอื 127.0.0.1 บน URL

การติดตัง้ โปรแกรม Adobe Dreamweaver 2020

การตดิ ตัง้ โปรแกรม Adobe Dreamweaver 2020 เป็นโปรแกรมที่ใช้ในการออกแบบเวบ็ ไซต์
ให้ทำการดาวนโ์ หลดไฟลต์ ิดตั้งแล้วทำการดับเบิลคลิกไฟล์ Set-up ที่เก็บในโฟลเดอร์ของโปรแกรม ดงั
ภาพ

30204-2103 การพฒั นาเว็บไซตท์ างธรุ กจิ

หน่วยที่ 2 พนื้ ฐานการพัฒนาเวบ็ ไซต์ 31

หนา้ ต่างโปรแกรมสำหรับตดิ ตั้ง Adobe Dreamweaver 2020

หน้าต่างแสดงสถานะการตดิ ตัง้ รอจนกวา่ จะติดต้งั สมบรู ณ์

30204-2103 การพัฒนาเว็บไซต์ทางธรุ กจิ

หน่วยท่ี 2 พืน้ ฐานการพฒั นาเวบ็ ไซต์ 32
เมื่อตดิ ตั้งโปรแกรมสมบูรณ์จะแสดงหนา้ ต่างดังภาพ

30204-2103 การพฒั นาเว็บไซต์ทางธุรกจิ

หน่วยที่ 2 พ้นื ฐานการพฒั นาเว็บไซต์ 33

ใบงาน 2.1 พื้นฐานการพัฒนาเวบ็ ไซต์

คำสั่ง : ให้นักศึกษาแบ่งกลุ่ม กลุ่มละ 5 คน แล้วทำการศึกษาเนื้อหาจากเอกสารประกอบการสอน
หน่วยที่ 2 พน้ื ฐานการพฒั นาเวบ็ ไซต์ และชว่ ยกันสรุปเน้ือหาโดยทำเปน็ แผนผงั ความคิด Mine Mapping
โดยใชโ้ ปรแกรม Jam Board แล้วสง่ ตัวแทนนำเสนอผลงาน

เกณฑ์การประเมิน

รายการประเมิน ระดบั คะแนน หมายเหตุ
321

1. ความเหมาะสมบทบาทการนำเสนอ

2. ความถูกตอ้ ง ข้อมูล สาระ ความรู้

3. สว่ นประกอบอน่ื ๆ และความคิดรเิ ร่มิ สร้างสรรค์

คะแนนรวม

หมายเหตุ ไดค้ ะแนน 6 คะแนนข้นึ ไป จึงจะถือวา่ ผา่ นเกณฑ์

ประเด็นการประเมนิ

ประเดน็ เกณฑก์ ารใหค้ ะแนน /ระดบั คณุ ภาพ
3 21

1. ความเหมาะสม แสดงบทบาทเหมาะสม แสดงบทบาทเหมาะสม แสดงบทบาท

บทบาทการนำเสนอ เสียงดังฟังชัด มีลลี า เสยี งดงั ปานกลาง มี เหมาะสม เสยี งเบา

ประกอบ ลลี าประกอบบ้าง ลีลาประกอบคอ่ นข้าง

นอ้ ย

2. ความถกู ตอ้ ง ขอ้ มูล เน้อื หาสาระถกู ตอ้ ง เนอ้ื หาสาระถกู ตอ้ งเปน็ เนื้อหาสาระถูกต้อง

สาระ ความรู้ ครบถว้ น ส่วนมาก เป็นสว่ น้อย

3. สว่ นประกอบอื่น ๆ รปู แบบของสอ่ื ทำมาได้ รูปแบบของสอ่ื ทำมาได้ รูปแบบของส่อื ทำมา

และความคดิ ริเริม่ สวยงาม เนอ้ื หา สวยงาม เนือ้ หานอ้ ย ไดส้ วยงาม เน้อื หา

สรา้ งสรรค์ ครอบคลุมสมบรู ณ์ น้อยเกินไป

30204-2103 การพฒั นาเว็บไซต์ทางธรุ กจิ

หนว่ ยที่ 2 พน้ื ฐานการพัฒนาเวบ็ ไซต์ 34

ใบงาน 2.2 พนื้ ฐานการพัฒนาเว็บไซต์

คำส่งั : จงตอบคำถามต่อไปนใี้ ห้ไดใ้ จความท่ีสมบูรณ์

1. จงอธิบายการวางแผนเว็บไซต์ มีการดำเนนิ การอะไรบา้ ง
.................................................................................................................................................................
.................................................................................................................................................................
.................................................................................................................................................................
2. จงอธิบายการออกแบบเวบ็ ไซตท์ ่ดี ี อย่างน้อย 4 ขอ้
.................................................................................................................................................................
.................................................................................................................................................................
.................................................................................................................................................................
.................................................................................................................................................................
3. จงอธบิ ายสว่ นประกอบของเว็บเพจแบ่งออกเปน็ ก่ีสว่ น อะไรบ้าง
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
4. ข้อมูลพนื้ ฐานของเว็บไซต์ประกอบไปดว้ ยอะไรบ้าง
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
5. จงบอธิบายเทคโนโลยีเวบ็ 1.0, 2.0, 3.0, 4.0 มาพอสังเขป
................................................................................................................................................................
................................................................................................................................................................
................................................................................................................................................................
...............................................................................................................................................................

30204-2103 การพฒั นาเว็บไซต์ทางธุรกิจ

หน่วยที่ 2 พ้ืนฐานการพัฒนาเว็บไซต์ 35

แบบทดสอบหลังเรยี น
พืน้ ฐานการพัฒนาเว็บไซต์

คำส่งั ช้แี จง : 1. แบบทดสอบฉบบั บน้เี ปน็ แบบปรนยั ชนิดเลอื กตอบ 4 ตวั เลอื ก จำนวน 10 ขอ้
ข้อละ 1 คะแนน

2. ใหเ้ ลอื กคำตอบทถี่ กู ตอ้ งท่ีสดุ เพียงขอ้ เดยี ว แล้วทำเคร่อื งหมายกากบาท (X) ลงใน
กระดาษคำตอบ

3. เวลาท่ีใช้ในการทำแบบทดสอบ 10 นาที
1. การออกแบบโครงสร้างเว็บไซต์ ทำใหท้ ราบถงึ อะไรบ้าง

ก. การจดั วางตำแหน่งเวบ็ เพจ
ข. การเชอื่ มโยงของเพจแต่ละเพจ
ค. แผนผงั ของลำดับเนื้อหา
ง. ถกู ทุกข้อ

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

3. การออแบบเว็บไซต์ทด่ี ขี ้อใดสำคญั ที่สดุ
ก. มีความสม่ำเสมอ
ข. มีความเปน็ เอกลกั ษณ์
ค. มีความเรียบง่าย
ง. มรี ะบบเวิเกชันที่ใช้งานงา่ ย

30204-2103 การพัฒนาเวบ็ ไซตท์ างธรุ กิจ

หน่วยท่ี 2 พนื้ ฐานการพฒั นาเวบ็ ไซต์ 36

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

5. ขอ้ ใดคอื การเชือ่ มโยงเวบ็ เพจภายในกลมุ่ ยอ่ ย ๆ ทม่ี ีเน้ือหาเก่ียวเน่ืองกนั เทา่ น้นั
ก. เมนหู ลกั
ข. เมนูเฉพาะ
ค. เวบ็ เพจ
ง. โฮมเพจ

6. เวบ็ ทผ่ี ู้ใช้งานสามมารถโต้ตอบสอื่ สารกับเว็บไซตไ์ ด้ ซ่งึ เป็นการรับข้อมลู ขา่ วสารสองทาง
หมายถงึ ขอ้ ใด
ก. เว็บ 1.0
ข. เวบ็ 2.0
ค. เวบ็ 3.0
ง. เว็บ 4.0

7. การเขา้ ใช้งาน XAMPP ทำได้กว่ี ธิ ี
ก. 2 วิธี
ข. 3 วิธี
ค. 4 วธิ ี
ง. 5 วิธี

30204-2103 การพฒั นาเวบ็ ไซตท์ างธรุ กิจ

หน่วยที่ 2 พื้นฐานการพฒั นาเวบ็ ไซต์ 37

8. โปรแกรมที่ใช้ในการออกแบบเวบ็ ไซต์คือข้อใด
ก. XAMPP
ข. Google Chrome
ค. Adobe Dreamweaver 2020
ง. Adobe Illustrator 2020

9. โปรแกรมที่ใชใ้ นการจำลองเปน็ เซิรฟ์ เวอร์คอื ข้อใด
ก. XAMPP
ข. Adobe Dreamweaver 2020
ค. Google Chrome
ง. Adobe Illustrator 2020

10. หากตอ้ งการใชง้ าน Apache ของ XAMPP ข้อใดถกู ต้อง
ก. ใชง้ านได้ทันทีหลักจากการตดิ ต้งั เรียบร้อย
ข. คลิกทีป่ ุ่ม Start ของ Control Panel
ค. พมิ พ์ 127.0.0.1 ที่ชอ่ ง URL
ง. เขา้ ทป่ี ุม่ Strat>All Program>Apache Start

30204-2103 การพฒั นาเวบ็ ไซตท์ างธรุ กิจ

หน่วยท่ี 2 พ้นื ฐานการพัฒนาเว็บไซต์ 38

ใบกระดาษคำตอบ
พน้ื ฐานการพัฒนาเวบ็ ไซต์

ช่อื ........................................นามสกลุ ....................................ระดับช้ัน.............กล่มุ .........เลขท่ี...........

ข้อ ก ข ค ง ผล
1
2
3
4
5
6
7
8
9
10

คะแนนที่ทำได้

เกณฑก์ ารประเมนิ 70 เปอรเ์ ซ็นต์ ลงชอ่ื ..........................................ผู้ตรวจ
ทำได้ 7-10 คะแนน ผา่ นเกณฑ์ (.........................................)
สรุปผล  ผา่ นเกณฑ์ ........../................/..........

 ไมผ่ ่านเกณฑ์

30204-2103 การพัฒนาเว็บไซตท์ างธุรกจิ

หน่วยท่ี 2 พืน้ ฐานการพฒั นาเวบ็ ไซต์ 39

30204-2103 การพัฒนาเวบ็ ไซตท์ างธุรกจิ