ชุดการเรียนรู้ การสร้างเว็บไซต์ 1-65 รุ่นที่ 1

ชุดการเรียนรู้กิจกรรม

ชอ่ื ........................................................................รหสั นกั ศกึ ษา ................................................
ระดบั ประกาศนยี บัตรวชิ าชีพ ปวช.....................ช่อื ครทู ี่ปรึกษา.................................................

ศนู ย์การศกึ ษานอกระบบและการศกึ ษาตามอัธยาศัยอำเภอเมอื งนครราชสีมา
สำนักงานสง่ เสรมิ การศึกษานอกระบบและการศึกษาตามอัธยาศัย
จังหวัดนครราชสมี า

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

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

คณะผู้จัดทำ
ครูระดบั ประกาศนยี บัตรวิชาชีพ

ก

สารบัญ หนา้
ก
คำนำ ข
สารบญั ค
คำชแ้ี จงสำหรับนกั ศกึ ษา กศน. ง
คำชแ้ี จงสำหรับครู จ
บทบาทของครผู ูส้ อน ฉ
บทบาทของนักศึกษา ช
ผังความคดิ การใช้ชุดการเรียนรู้ ซ
แบบทดสอบก่อนเรียน 1
15
เร่ืองที่ 1 ความรู้เกย่ี วกับการสรา้ งเวบ็ ไซต์ 27
เรื่องที่ 2 แนะนำโปรแกรม Adobe Dreamweaver CS6 35
เรอื่ งท่ี 3 การสร้างเวบ็ เพจและเวบ็ ไซต์ 55
เรือ่ งที่ 4 การเผยแพร่เว็บไซต์
แบบทดสอบหลังเรยี น
บรรณานกุ รม

ข

คำชแี้ จงสำหรับนักศกึ ษา กศน.

ชดุ การเรยี นร้กู ิจกรรม โครงการคา่ ยเรียนรกู้ ารสร้างเว็บไซต์ รนุ่ ที่ 1 สำหรับนักศกึ ษา กศน.
ระดับประกาศนยี บตั รวชิ าชพี ประกอบดว้ ยชุดการเรียนรู้ทง้ั หมด 4 เร่อื ง ดงั นี้

เรอ่ื งที่ 1 ความรเู้ กย่ี วกบั การสร้างเวบ็ ไซต์
เรื่องที่ 2 แนะนำโปรแกรม Adobe Dreamweaver CS6
เรื่องท่ี 3 การสร้างเวบ็ เพจและเว็บไซต์
เรอ่ื งท่ี 4 การเผยแพร่เวบ็ ไซต์

ค

คำชแี้ จงสำหรบั ครู

ข้อปฏบิ ัติในการใช้ชุดการเรียนรู้

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

1. ข้ันเตรียมการสอน
1.1 ศึกษาคำชแี้ จงในการใช้ชดุ กิจกรรมใหเ้ ข้าใจก่อนอย่างละเอยี ดรอบคอบ
1.2 ศกึ ษาสาระสำคญั และจดุ ประสงค์การเรยี นร้ทู จ่ี ะดำเนินการจดั กจิ กรรม ให้เข้าใจชดั เจนเสียกอ่ น

2. ข้ันสอน/จดั กระบวนการ
2.1 ดำเนนิ การจดั กจิ กรรมการเรียนร้ตู ามกระบวนการเรยี นการสอนแบบ ONIE MODEL

4 ข้นั คือ
ขัน้ ท่ี 1 กำหนดสภาพ ปญั หา ความต้องการในการเรียนรู้ (O: Orientation) เปน็ การเรยี นรู้จากสภาพ
ปญั หา หรอื ความต้องการของผ้เู รียน และชุมชน สังคม โดยให้เชื่อมโยงกับประสบการณ์เดิม และ
สอดคลอ้ งกับมาตรฐานการเรียนรขู้ องหลกั สูตร
ขนั้ ที่ 2 แสวงหาข้อมูลและจัดการเรียนรู้ (N: New ways of learning) การแสวงหาขอ้ มูล และ

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

ขน้ั ที่ 3 ปฏบิ ตั แิ ละนำไปประยุกต์ใช้ (I: Implementation) นำความรู้ท่ไี ดไ้ ปปฏบิ ัติ และ
ประยกุ ตใ์ ชใ้ ห้สอดคล้องกบั สถานการณ์ เหมาะสมกบั วัฒนธรรมและสังคม

ข้ันท่ี 4 ประเมินผลการเรยี นรู้ (E: Evaluation) ประเมนิ ทบทวน แกไ้ ขข้อบกพร่อง
ผลจากการนำความร้ไู ปประยกุ ต์ใชแ้ ล้วสรุปเปน็ ความรู้ใหม่ พร้อมกบั เผยแพร่ผลงาน

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

2.3 ประเมินผลสัมฤทธิท์ างการเรียน โดยใช้แบบทดสอบยอ่ ย

ง

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

จ

บทบาทนกั ศกึ ษา

1. รบั ทราบจุดประสงค์การเรยี นร้จู ากครูผูส้ อน เพือ่ ใหท้ ราบว่าเมอื่ จบกิจกรรมการเรยี นรแู้ ลว้
นักศกึ ษาสามารถเรยี นรอู้ ะไรได้บ้าง

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

3. ทำแบบทดสอบหลงั เรียน เพ่อื วัดความรคู้ วามเข้าใจ ให้ผ่านเกณฑ์รอ้ ยละ 70 ข้ึนไป หากทำไดไ้ ม่ถึงเกณฑ์
ใหน้ ักศึกษากลับไปทบทวนเนอ้ื หา และใบงานอกี ครงั้

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

ฉ

ข้ันตอนในการเรยี นดว้ ยชดุ การเรยี นรู้

ศกึ ษารายละเอียดของชุดการเรยี นรแู้ ตล่ ะเรอ่ื ง

ศกึ ษาผลการเรียนรูท้ ่ีคาดหวัง/จุดประสงค์การเรียนรู้

ดำเนนิ การใชช้ ดุ การเรียนรู้
1. ขน้ั นำเขา้ สบู่ ทเรียน

- แจ้งจุดประสงคก์ ารเรียนรู้
- บอกสงิ่ ที่นกั ศึกษาตอ้ งปฏบิ ัติ
- ทดสอบก่อนเรียน
2. ขน้ั เรยี นรู้
นกั ศึกษาปฏบิ ัติกจิ กรรมตามทรี่ ะบุไวใ้ นใบงาน
3. ขั้นสรุป

สรุป อภิปราย แลกเปลี่ยนเรยี นรู้

ทดสอบหลังเรยี น ไมผ่ ่าน
ผ่าน

ทำแบบทดสอบวดั ผลสมั ฤทธิท์ างการเรยี น

หมายเหตุ
ผ่าน หมายถึง ผู้เรยี นทำใบงานครบ ทำแบบทดสอบได้ร้อยละ 70 และแบบฝึกหดั ครบ

ช

แบบทดสอบก่อนเรียน

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

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

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

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

5. ขอ้ ใดกล่าวถกู ตอ้ ง
ก. XHTML เป็นโปรแกรมสำเรจ็ รปู ที่ใชใ้ นการสร้างเวบ็
ข. Dreamweaver เปน็ โปรแกรม CMS
ค. HTML เป็นภาษาทใี่ ชใ้ นการสร้างเวบ็
ง. Microsoft Word เป็นภาษาท่ใี ชใ้ นการสร้างเวบ็

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

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

ซ

7. ข้อใดคือข้นั ตอนแรกในการทำ Storyboard
ก. วางโครงเรือ่ งหลกั
ข. ลำดับเหตกุ ารณค์ รา่ วๆ
ค. กำหนดหน้า
ง. ลงมอื เขียน Storyboard

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

9. การจดั ทำ Storyboard มกี ขี่ น้ั ตอน
ก. 3
ข. 4
ค. 5
ง. 6

10. ข้อใดเป็นข้ันตอนสุดท้ายกอ่ นลงมอื วาดสตอรีบ่ อรด์
ก. วางโครงเรอื่ งหลัก
ข. กำหนดหน้า
ค. แตง่ บท
ง. ลงมือเขียน storyboard

ฌ

เร่อื ง ความรูเ้ กยี่ วกบั การสรา้ งเวบ็ ไซต์

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

ความรูเ้ บื้องต้นเกี่ยวกบั เว็บไซต์
1. ความรู้เบื้องต้นเกี่ยวกับเว็บไซต์

1.1. เวลิ ด์ ไวด์ เวบ็ (World wide web หรือ www)
เป็นบริการหนง่ึ ในอินเทอร์เนต็ ที่ไดร้ บั ความนยิ มเปน็ อยา่ งมาก เปน็ ระบบท่พี ัฒนาข้ึนเพอ่ื เชอื่ มโยงขอ้ มลู

ทีอ่ ยบู่ นเคร่อื งคอมพิวเตอรต์ า่ งๆ โดยใช้โปรโตคอลเป็น Http (Hypertext Transfer Protocol) ในการเรยี กใช้
เอกสารผ่านโปรแกรมประเภทเว็บบราวเซอร์

ผใู้ ชส้ ามารถเชื่อมโยงเอกสารหนงึ่ ไปยงั อกี เอกสารหน่ึงทอ่ี ยู่ในคอมพิวเตอร์เครอ่ื งเดยี วกันหรอื ตา่ งเครื่องกันที่อยู่
คนละประเทศไดอ้ ย่างรวดเรว็ เครอื ข่ายของเอกสารเหล่านี้ประกอบกบั เทคโนโลยีท่เี ก่ียวข้องในการนำเสนอขอ้ มูลนี้
บนอนิ เตอรเ์ น็ตรู้จกั โดยทว่ั ไปวา่ World wide web (www) หรอื W หรอื Web และเคร่อื งคอมพวิ เตอร์ท่ใี ห้บริการ
เวบ็ เพจเรียกว่าเวบ็ ไซต์ (Website)

1

1.2. ส่วนประกอบของหน้าเว็บเพจ
สว่ นประกอบของหนา้ เวบ็ เพจแบ่งออกเป็น ส่วน ดังน้ี

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

1.3. รปู แบบของเวบ็ ไซต์
รูปแบบของเวบ็ ไซตส์ ามารถแบง่ ไดเ้ ปน็ รูปแบบหลกั ๆ คอื
1. Static Website
Static Wedsite หมายถงึ เวบ็ ไซตท์ ี่สร้างด้วยภาษา HTML ธรรมดา และบันทกึ เป็นไพลน์ ามสกลุ .html

เนอ้ื หาขอ้ ความ รูปภาพในหนา้ เวบ็ เพจนน้ั จะไปตามท่เี ราเขียนกำหนดไว้

2

2. Dynamic Website
Dynamic Website หมายถึง เว็บไซต์ท่หี น้าเวบ็ เพจสามารถเปลย่ี นแปลงขอ้ มลู เองได้โดยไม่ต้องเขยี น

แตล่ ะหนา้ เว็บเพจเอง เชน่ กระดาษข่าว (Webboard), ระบบสบื คน้ ข้อมูล เว็บไซต์ รูปแบบนีจ้ ะถูกสรา้ งด้วยภาษาสคริปต์
(Script) แบบ Sever Side Script เช่น PHP,ASP,ASP.NET,JSP และขอ้ มูลอนื่ ๆ ไพลเ์ อกสารที่ได้จะมนี ามสกลุ
.php, .asp เปน็ ต้น และมกั จะมีการติดตอ่ กบั ฐานข้อมลู เพื่อบนั ทกึ ข้อมูลลงในฐานข้อมูล หรอื นำข้อมลู จากฐานข้อมลู
ขึ้นมาแสดงผลเปน็ หน้าเวบ็ เพ

1.4. แนวทางหลักการออกแบบเวบ็ ไซต์
แนวทางหลักการออกแบบเว็บไซต์สามารถแบง่ ออกเปน็ ขั้นตอนต่าง ๆ เพือ่ ใหเ้ หมาะสมกับผู้เริ่มต้นใช้เป็นแนวทาง

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

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

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

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

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

5. การเตรียมสิ่งตา่ งๆท่จี ำเปน็ การออกแบบเวบ็ ไซต์ต้องอาศยั ความสามารถต่างๆ เช่น โปรแกรมสำหรับ
สรา้ งเวบ็ ไซต์ ภาพเคล่ือนไหว มลั ติมีเดีย การจดโดเมนเนม การหาผู้ให้บริการรบั ฝากเว็บไซต์ (Web Hosting) เป็นต้น

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

3

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

4

ตัวอยา่ งการออกแบบเวบ็ ไซต์เกี่ยวกับร้านเสือ้ ผ้า

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

1. การวางแผนการทำงาน
การวางแผนการทำงานเปรยี บเหมอื นเขม็ ทิศที่จะชีท้ างใหเ้ รารู้ว่าควรจะเดนิ ทางไปในทศิ ทางใด

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

1.1 ระยะเวลาการทำงาน เปน็ การกำหนดชว่ งเวลาทีจ่ ะใช้ในการสร้างเวบ็
1.2 ทมี งานหรอื ผู้ร่วมงาน ปกตกิ ารสร้างเว็บตอ้ งทำงานเป็นทีมอย่างนอ้ ยต้องมี
ผเู้ ชยี่ วชาญ ฝ่าย คอื ผ้เู ชีย่ วชาญด้านภาษา HTML หรือโปรแกรมสร้างเว็บเพจผู้เชย่ี วชาญด้านการออกแบบและตกแตง่ ภาพ
และผเู้ ช่ยี วชาญดา้ นเนอ้ื หาหรอื บรรณาธกิ าร
1.3 งบประมาณ เปน็ การกำหนดค่าใช้จ่าย
1.4 อุปกรณห์ รอื เครื่องมือชว่ ยงาน เช่น เครอ่ื งคอมพวิ เตอร์ เครื่องสแกนเนอรแ์ ละรูปภาพประกอบเวบ็ เพจ
เปน็ ตน้
1.5 ปญั หาและอปุ สรรค
2. การรวบรวมและวเิ คราะหโ์ ครงสรา้ ง
เปน็ ขั้นตอนหน่งึ ท่ีตอ่ จากการวางแผน เป็นการแผนงานไปปฏิบัติ โดยการรวบรวมข้อมูลที่จำเปน็ ต้องใช้
ในการสรา้ งเวบ็ ตามหัวขอ้ ทีเ่ ลือกไว้ ทัง้ เนอื้ หา ภาพ เสยี งและภาพเคลือ่ นไหว เก็บรวบรวมเปน็ ไฟล์ข้อมูล
หรอื ใส่แฟม้ แยกเป็นหมวดหมู่ เพอ่ื ความสะดวกในการนำมาใชง้ าน

5

3. การออกแบบและการสร้างเวบ็ ไซต์
เปน็ ข้นั ตอนการนำข้อมลู ทง้ั หมดมาสร้างเป็นเวบ็ ไซต์ด้วยภาษา HTML หรือเครือ่ งมือในการสรา้ งเวบ็ อืน่ ๆ

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

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

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

4. ทดสอบและปรบั ปรงุ เว็บไซต์
ทดสอบและปรบั ปรงุ เวบ็ ไซต หมายถงึ การทดสอบแบบออฟไลน์ โดยทย่ี งั ไมไ่ ดน้ ำเว็บไซต์เขา้ สู่อินเทอร์เน็ต

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

5. เผยแพรผ่ า่ นเว็บไซต์
เผยแพร่ผ่านเวบ็ ไซตเป็นการเผยแพร่ให้คนทัว่ ไปได้รู้จัก หรือเรยี กวา่ การอพั โหลด (Upload) โดยเจา้ ของเว็บ

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

6. การพฒั นาเว็บไซต์
การพัฒนาเว็บไซต์ เป็นการปรับปรุงเน้ือหา ภาพประกอบหรอื อัพเดท (Update) เว็บไซต์ ถือเปน็ ข้ันตอน

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

6

ตัวอย่างกระบวนการพฒั นาเว็บไซต์

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

ความหมายของเว็บเพจ
เว็บเพจคือเอกสารท่ีสร้างขนึ้ จากภาษา HTML ท่ใี ชใ้ นการเผยแพรข่ อ้ มูลขา่ วสาร ซ่ึงประกอบด้วยข้อความ

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

7

ประชาสัมพนั ธบ์ รษิ ทั และองคก์ ร
เป็นเว็บเพจทีแ่ นะนำความเป็นมา สินค้า บรกิ าร ทอ่ี ยู่ทีต่ ิดตอ่ และข่าวประชาสัมพันธ์ขององค์กร
ความบันเทงิ
เนอ่ื งจากเวบ็ เพจมที ้ังภาพ เสยี ง และวดิ โี อ จงึ ทำใหก้ ารนำเสนอความบนั เทงิ ไม่ใช่เรอื่ งยาก ไม่วา่ จะเปน็ เว็บวิทยุ ฟัง
เพลงออนไลน์ เวบ็ นำเสนอภาพยนต์ เกม และเว็บเร่ืองตลกขำขนั ตา่ งๆ เปน็ ต้น
การเงิน การลงทุน
เปน็ เวบ็ ที่นำเสนอขอ้ มูลทางการเงินและการลงทุน รวมไปถงึ บริการสำหรบั ทำธรุ กรรมการเงินออนไลนผ์ า่ นเครอื ขา่ ย
อินเทอร์เน็ต
ซือ้ -ขายสินค้า และบริการ
เป็นเว็บท่ีเหมือนร้านคา้ สำหรบั ขายสินคา้ และบริการต่างๆ รวมทงั้ ยังบริการรบั ฝากขายสินค้าผ่านร้านเหล่านีไ้ ด้อกี
ด้วยเวบ็ บริการซื้อขายสินค้าออนไลน์
ดาวน์โหลดข้อมลู
เปน็ เว็บทใ่ี ห้บรกิ ารดาวนโ์ หลดไฟล์ต่างๆ เชน่ ไฟลโ์ ปรแกรม ไฟลภ์ าพ และไฟล์เพลง เป็นต้น
เวบ็ บริการดาวนโ์ หลดไฟล์โปรแกรม
บรกิ ารติดต่อสื่อสาร
เปน็ เวบ็ ท่ใี ห้บริการในการติดตอ่ สื่อสารถงกนั เช่น การรบั ส่งจดหมายอิเลก็ ทรอนกิ ส์ (E-mail), เว็บบอร์ด และเว็บแชต
สนทนาตา่ งๆ เปน็ ตน้
เว็บบริการรบั สง่ อีเมล
เวบ็ เพจทำงานอยา่ งไร
นอกจากเราจะทราบประโยชน์ของเว็บเพจว่าทำอะไรไดบ้ ้างแล้ว ส่งิ ทสี่ ำคญั ก่อนที่เราจะไปสร้างเว็บเพจ นน่ั กค็ ือ การ
เขา้ ใจการทำงาน และการแสดงผลของเวบ็ เพจกนั เพื่อเราจะสามารถวางแผนการสร้างเวบ็ เพจได้อย่างถกู ตอ้ ง
จากรูปจะเห็นการทำงานเป็นข้นั ตอนต่างๆ ดงั นี้
ข้นั ตอนท่ี 1
ผ้ใู ช้พมิ พ์ตำแหน่งเว็บเพจในโปรแกรมบราวเซอร์ ก็จะมีการร้องขอขอ้ มูลไฟล์เวบ็ เพจหน้านนั้ ไปยังเครอื่ งเซอร์เวอร์
(Server คือ เครื่องที่เกบ็ และเผยแพร่เว็บเพจ)
ข้ันตอนที่ 2
ฝั่งเซอรเ์ วอร์จะทำการคน้ หาไฟลเ์ ว็บเพจตวั ที่ถกู รอ้ งขอ
ขั้นตอนที่ 3
เวบ็ เซอร์เวอร์สง่ ข้อมูลไปยังเครอื่ งผใู้ ช้และแสดงผลบนบราวเซอร์
แทจ้ ริงแล้วไฟลเ์ ว็บเพจ จะเปน็ โปรแกรม HTML ท่เี ป็นตวั กำหนดให้บราวเซอร์แสดงข้อความ และดงึ ข้อมลู ของภาพ
เสยี ง วดิ โี อ ออกมาแสดงใหอ้ ยู่ในรปู แบบและตำแหนง่ ตามท่โี ปรแกรมกำหนด ซ่งึ เราจะเรียนวธิ กี ารเขียนภาษา HTML
เพ่อื สร้างและตกแต่งหนา้ ตาเวบ็ เพจภายในเน้ือหาในหาในเวบ็ ไซตน์ ี้
คำศัพทพ์ ้ืนฐานเก่ยี วกบั การสรา้ งเว็บเพจ
สงิ่ ท่คี วรรู้กอ่ นสร้างเว็บเพจ คอื คำศพั ทต์ า่ งๆ ที่ช่วยทำให้เราเข้าใจและสามารถศึกษาการสรา้ งเวบ็ เพจได้อย่างถูกต้อง

8

ไคลเอนต์ - เซอรฟ์ เวอร์ (Client - Server)
ในการติดตอ่ สอื่ สารบนเครือขา่ ยอินเทอร์เน็ตที่คอมพวิ เตอรท์ วั่ โลกเชอื่ มโยงถึงกันนัน้ จะมีการตดิ ตอ่ สื่อสารอยู่ 2 แบบ
คือ แบบส่งขอ้ มลู และรับขอ้ มูล โดยเครอ่ื งคอมพวิ เตอร์ท่ีทำการสง่ ขอ้ มูลเราจะเรียกว่า เคร่อื งใหบ้ รกิ าร
(Server) และเครอ่ื งคอมพิวเตอร์ที่รบั ข้อมลู เราจะเรยี กวา่ เครอื่ งรบั บริการ (Client)
เครอื ข่ายใยแมงมมุ WWW (World Wide Web)
บริการรปู แบบหนึง่ ในอินเทอร์เนต็ ที่เชื่อแนว่ า่ เราทุกคนตอ้ งเคยสัมผสั ก็คือ WWW หรือที่เราเรยี กส้ันๆวา่ "เวบ็ "
นนั่ เอง การให้บริการในรปู แบบนี้ คือ การเรยี กบราวเซอร์ เชน่ Internet Explorer หรือ Firefox จากเครอื่ งของเรา
และระบุ URL เพ่ือใช้ในการอ้างท่อี ยูท่ ่ีเก็บเวบ็ เท่านเี้ รา ก็สามรารถเปิดดเู วบ็ ได้แลว้ ดงั ตวั อยา่ งเม่อื เราระบุ URL ที่
ตอ้ งการเปิดเป็น www.roiet.go.th ก็จะเปดิ ดเู ว็บไซต์ Roiet หรอื จังหวัดรอ้ ยเอ็ด
เว็บไซต์ (Web Site)
เราจะเรยี กกลมุ่ ของหน้าเวบ็ หรอื เวบ็ หลายๆหนา้ รวมกัน วา่ "เวบ็ ไซต์" (Web Site) โดยจะมกี ารกำหนดเว็บเพจ
หน้าหนึ่งไว้เป็นหน้าแรก และเรยี กวา่ "โฮมเพจ" (Home Page) ทเ่ี ป็นชอ่ งทางเข้าเวบ็ เพจทง้ั หมดภายในเว็บไซต์น้นั
เว็บบราวเซอร์ และเวบ็ เซริ ฟ์ เวอร์ (Web Browser & Web Server)
เวบ็ บราวเซอร์ (Web Browser)
คอื โปรแกรมท่เี ปน็ ประตูเข้าสโู่ ลก World Wide Web ซ่งึ เปน็ โปรแกรมที่อยใู่ นเคร่ืองคอมพวิ เตอร์ลูกข่าย (Client) มี
หนา้ ทีใ่ นการสง่ ข้อมูลร้องขอ และนำเสนอข้อมูลเว็บ โดยตัวเว็บบราวเซอรจ์ ะเขา้ ใจในภาษา HTML ที่เปน็ มาตรฐาน
ของเวบ็ ปจั จบุ นั บราวเซอร์ท่ไี ด้รับความนยิ ม ก็มี Internet Explorer ของไมโครซอฟท์ Firefox และ Google
Chrome ซึ่งเป็นบราวเซอร์โอเพน่ ซอร์ส
เวบ็ เซิรฟ์ เวอร์ (Web Server)
เป็นทเ่ี ก็บเว็บเพจ เมอ่ื ใดทีเ่ ราตอ้ งการเปิดดูเว็บเพจ เราต้องใช้บราวเซอร์ดึงข้อมูล โดยที่บราวเซอรจ์ ะทำการติดตอ่ กบั
เซริ ์ฟเวอร์ท่เี ก็บเว็บไซต์นนั้ เพอ่ื ใหม้ ีการโอนย้ายขอ้ มูลมาแสดงทเ่ี ครือ่ งของเรา
โดเมนเนม (Domain Name)
การตดิ ตอ่ กนั บนอินเทอรเ์ นต็ นนั้ จะใชไ้ อพแี อดเดรสในการทำงาน แตเ่ ป็นตัวเลขทีย่ าว ทำให้ผู้ใช้จำยาก จงึ ไดม้ กี ารใช้
โดเมนเนม (Domain Name) หรอื อินเทอรเ์ นต็ แอดเดรส (Internet Address) มาใช้ ซง่ึ เปน็ การนำตัวอกั ษรทจี่ ำง่าย
มาใชแ้ ทนไอพีแอดเดรส โดเมนเนมจะไมซ่ ำ้ กัน และมักถูกตั้งใหส้ อดคล้องกับชือ่ บรษิ ทั หรอื องค์กรผู้เปน็ เจ้าของ เพอื่
สะดวกในการจดจำชื่อ เชน่ บรษิ ทั ดแี ทค มโี ดเมนเป็น www.dtac.co.th
ประเภทของโดเมนเนม
โดเมนเนมเปน็ ชอื่ ของเวบ็ ไซต์ที่เราเผยแพรข่ ้อมูล ซง่ึ จะไมซ่ ้ำใครในโลก มีการแบ่งโดเมนเป็น 2 ประเภทตามลักษณะ
ของมัน ได้แก่ โดเมนเนม 2 ระดบั และโดเมนเนม 3 ระดับ
โดเมนเนม 2 ระดบั จะมีรปู แบบ เชน่ dtac.com
สำหรับตัวยอ่ ทอ่ี ยหู่ ลงั เครื่องหมายจดุ ในโดเมนเนม คือคำยอ่ ของประเภทองค์กร ซึง่ คำย่อของประเภทองคก์ รทเี่ ราจะ
พบบอ่ ย มีดังน้ี
ตวั ย่อ ประเภทองคก์ ร
.com บริษทั หรือองคก์ รพาณชิ ย์ เชน่ บริษทั ไอบเี อ็ม มีอนิ เทอรเ์ น็ตแอดเดรสเป็น ibm.com
.edu สถาบนั การศึกษา เช่น มหาวทิ ยาลัยฮารว์ าร์ด มีอินเทอร์เนต็ แอดเดรสเป็น harvard.edu

9

.gov องคก์ รรัฐบาล เช่น องค์กรนาซา่ มีอนิ เทอร์เน็ตแอดเดรสเป็น nasa.gov

.mil องคก์ รทางทหาร เชน่ af.mil เปน็ อนิ เทอรเ์ น็ตแอดเดรสของกองทพั อากาศสหรัฐฯ

.net องคก์ รทท่ี ำหน้าท่เี ป็นเกตเวย์ หรือจดุ เช่ือมต่อเครือข่าย เช่น mci.net

.org องคก์ รทไ่ี ม่เข้าข่ายประเภทองคก์ รท้งั หมดทีไ่ ดก้ ลางถงึ ด้านต้น

.biz บรษิ ัทหรืองคก์ รทางธรุ กิจ

.info ใช้ในโอกาสโปรโมทสนิ ค้า, เหตกุ ารณส์ ำคัญ เชน่ บอกข้อมูลส่วนลดสินค้า

โดเมนเนม 3 ระดบั จะมรี ปู แบบ เชน่ dtac.co.th

โดยคำย่อในส่วนท่ี 2 หลังเคร่อื งหมายจุดใชร้ ะบปุ ระเภทขององคก์ ร และคำย่อส่วนท่ี 3 หลงั เครือ่ งหมายจุดใช้ระบุ

ประเทศทีต่ ง้ั ขององคก์ รน้นั เชน่

ตวั ย่อสว่ นท่ี 2 ตวั ย่อส่วนท่ี 3

.co บริษทั หรือองค์กรพาณิชย์ .cn จีน

.ac สถาบนั การศึกษา .th ไทย

.go องค์กรรฐั บาล .jp ญี่ปุน่

.or องคก์ รไมแ่ สวงผลกำไร .au ออสเตรเลยี

.net องคก์ รทใี่ หบ้ รกิ ารเครอื ขา่ ย

รายละเอยี ดเกย่ี วกับ URL

content เป็นส่วนท่แี จ้งให้บราวเซอรท์ ราบว่าตอ้ งจดั การข้อมูลทพี่ บอย่างไร สำหรับเว็บเพจใน World Wide
identifier Web จะใช้โปรโตคอลมาตรฐานช่ือ HTTP (HyperText Transfer Protocol) ส่วน FTP เปน็ อกี
โปรโตคอลเกย่ี วกบั โอนย้ายไฟลข์ อ้ มูลในอนิ เทอร์เนต็ ทเี่ ราพบได้บอ่ ย

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

สว่ นระบ ระบุที่เก็บข้อมูลเวบ็ ในเคร่ือง
ตำแหนง่

สว่ นสุดทา้ ยของ URL จะเปน็ ชือ่ ไฟลข์ ้อมูล เช่น เวบ็ เพจจะมีนามสกลุ .htm หรอื .html ถ้าในสว่ นนี้ไม่

มใี น URL บราวเซอรจ์ ะถือวา่ ชอ่ื ไฟล์ทต่ี อ้ งการเรียกดนู ั้น คอื index.htm ซง่ึ โดยปกติจะถกู ใช้เปน็ ชื่อ

โฮมเพจในเว็บไซต์

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

โปรแกรมท่ใี ชเ้ ขียนโค้ดเว็บเพจด้วยภาษา HTML
โปรแกรม Notepad เปน็ โปรแกรมเพ่อื สร้างเวบ็ เพจ โดยการเขียนด้วยภาษา HTML ซ่งึ เป็นโปรแกรม
Text Editor ท่ีมาพรอ้ มกับระบบปฏิบตั ิการ Windows

โปรแกรม่ใี ช้สร้างเว็บเพจและจดั องค์ประกอบบนหน้าเว็บ

10

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

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

กำหนดขนาดของเว็บเพจ
เราจะเหน็ ว่าขนาดของจอคอมพิวเตอรใ์ นปัจจุบันมหี ลายขนาด เชน่ 14" 15" และ 17" เปน็ ต้น ซง่ึ ขนาดทแ่ี ตกต่างกนั
นที้ ำใหก้ ารแสดงผลเว็บไซต์แตกตา่ งกันด้วย เราจึงควรกำหนดขนาดเว็บไซตใ์ หม้ รี ปู แบบที่มาตรฐาน เพ่อื ทำให้การ
แสดงขอ้ มลู ได้อยา่ งครบถ้วนชดั เจน โดยขนาดของเว็บไซต์ที่เหน็ กนั มากท่ีสุดมอี ยู่ 2 ขนาดคือ
1. ขนาดของเว็บไซต์แบบ 800x600 pixels
ขนาดเว็บไซต์แบบ 800x600 pixels น้เี ปน็ ขนาดมาตรฐานท่ใี ช้กับหน้าจอคอมพิวเตอร์ไดท้ กุ ๆขนาด
2. ขนาดเวบ็ ไซตแ์ บบ 1024x768 pixels
ซ่ึงขนาดแบบนี้กำลงั ไดร้ ับความนยิ มเพมิ่ มากขนึ้ เนอ่ื งจากจอคอมพวิ เตอร์ในปัจจบุ ันมีราคาถกู ลงมาก ดังนน้ั ผใู้ ช้
คอมพวิ เตอร์จงึ หนั ไปใชจ้ อคอมพิวเตอรท์ ่มี ีขนาดใหญ่ข้นึ ดว้ ยเหมอื นกัน
3. ขนาดเวบ็ ไซตแ์ บบยืดหยนุ่ ขยายตามความกว้างของหนา้ จอ
เปน็ การออกแบบเวบ็ ไซตท์ ต่ี ้องการให้การแสดงผลยืดหยนุ่ เต็มจอตามการต้ังคา่ ความละเอียดหนา้ จอคอมพวิ เตอร์
การออกแบบโครงสร้างเว็บไซต์
เวบ็ ไซต์ในปจั จบุ ัน จะมีหลักการออกแบบท่แี ตกต่างกันไมม่ ากนกั ซ่งึ จะมีวธิ ีการออกแบบหนา้ ตาเว็บไซตอ์ ยู่
3 แบบ คือ
1. ออกแบบหน้าเวบ็ ไซตท์ ีเ่ น้นการนำเสนอเนือ้ หามากๆ
เป็นการออกแบบเว็บไซต์ทมี่ กี ารนำเสนอเน้อื หามากกว่ารูปภาพ โดยจะใช้โครงสรา้ งของตารางเปน็ หลัก เพ่อื ใส่
ขอ้ ความแบบหนา้ สารบญั และรปู ภาพเปน็ ช้ินเลก็ ๆ ได้
2. ออกแบบหนา้ เว็บไซตท์ ีเ่ น้นภาพกราฟิกเปน็ หลัก
เปน็ การออกแบบเว็บไซต์ ท่ีมภี าพกราฟกิ ทีส่ วยงาม ถกู จดั วางไว้ในหนา้ โฮมเพจ ซึ่งแตกตา่ งจากข้อความแรกมาก
เพราะจะไมค่ ่อยมีขอ้ ความในเว็บเพจ แต่จะเปน็ การ Link ที่ภาพเพอ่ื เข้าไปยังหนา้ เว็บเพจอื่นๆ ตอ่ ไป การสรา้ ง
เวบ็ ไซตแ์ บบนีจ้ ะใช้โปรแกรม Photoshop สำหรับตกแต่งภาพก่อนนำไปใช้บนหน้าเวบ็
3. ออกแบบหนา้ เวบ็ ไซต์ที่มีท้งั ภาพและเน้ือหา
เป็นการออกแบบหน้าเวบ็ ไซตท์ ผี่ สมกันระหว่างขอ้ ที่ 1 และ 2 ข้างตน้ โดยจะเน้นการจดั วางภาพที่ตดั แบ่งเป็นช้นิ
เลก็ ๆ กอ่ น หลงั จากนั้นจึงใส่ข้อความประกอบภาพลงไป เพ่อื ให้เวบ็ ไซต์ของเรามีความสวยงามดว้ ยภาพกราฟกิ ท่ี
นำมาประกอบ และใสเ่ นื้อหาได้อยา่ งสมบูรณด์ ้วย

11

ขน้ั ตอนการสรา้ งเวบ็ ไซต์
เราสามารถนำไฟล์เว็บเพจมาร้อยเรียงและนำเสนอเปน็ กลมุ่ ข้อมลู ที่เรียกว่า เว็บไซต์ ซง่ึ จะมวี ธิ ีการคดิ ตง้ั แตก่ ำหนด
โครงร่างของเวบ็ เพจ จนถงึ การอพั โหลดเว็บขน้ึ บนอินเทอรเ์ น็ต ท้ังหมด 6 ข้นั ตอน ดงั นี้
ขนั ตอนท่ี 1 กำหนดโครงร่างของเวบ็ ไซต์
ในการสรา้ งเว็บ เราจะเริ่มต้นด้วยการกำหนดผงั ของเวบ็ หรอื เรยี กว่า Site Map ก่อน ดังตัวอย่างเรามหี นา้ เว็บเพจ 6
หน้า จงึ กำหนด Site Map ดงั รปู
ขน้ั ตอนท่ี 2 กำหนดการเช่อื มโยงระหว่างเว็บเพจ
เรากำหนดใหเ้ วบ็ เพจแต่ละหนา้ เชอ่ื มโยงถงึ กนั เพือ่ ให้กลับไปกลบั มาระหว่างหนา้ ต่างๆ ได้ โดยจะแสดงชือ่ ไฟล์ html
แตล่ ะไฟล์ท่ีมีการเชือ่ มโยงสมั พนั ธ์กนั ดงั รปู
ขน้ั ตอนท่ี 3 ออกแบบหน้าเวบ็ เพจแต่ละหน้าภายในเวบ็ ไซต์
เราสามารถออกแบบเวบ็ เพจในแต่ละหนา้ ให้สวยงาม เพ่ือเตรยี มภาพท่ีจำเปน็ สำหรับจัดวางบนหน้าเวบ็ เพจ เชน่ การ
ออกบบโลโก้ เพ่ือเปน็ สัญลักษณ์ให้กบั เวบ็ ไซตข์ องเรากอ่ น จากนัน้ จึงทำการออกแบบหน้าเว็บเพจในแต่ละหน้า
ตามลำดบั
ขั้นตอนที่ 4 สรา้ งเว็บเพจแตล่ ะหน้า
เมอื่ วางรปู แบบของเวบ็ เพจในแต่ละหนา้ แล้ว จากนัน้ เราก็ทำการเขียนโปรแกรมภาษา HTML เพอื่ กำหนดใหแ้ ต่ละ
เวบ็ เพจนำเสนอข้อความ ภาพ หรือ วีดโิ อ ใหอ้ ยใู่ นรูปแบบตามทีเ่ ราต้องการจะนำเสนอนัน่ เอง
ขั้นตอนท่ี 5 ลงทะเบียนขอพืน้ ทเ่ี วบ็ ไซตฟ์ รี
หลงั จากออกแบบและสรา้ งเว็บไซต์จนเสรจ็ สมบูรณแ์ ล้ว ขนั้ ตอนถดั ไปกค็ ือ การเผยแพรเ่ ว็บไซต์นนั้ ส่เู ครอื ข่าย
อนิ เทอรเ์ นต็ ใหค้ นอ่ืนๆสามารถเขา้ มาเย่ยี มชมเว็บไซต์ของเราได้ วธิ กี ารกค็ อื การนำเว็บไซต์ทเี่ ราสร้างข้ึนไปไวบ้ นพื้นท่ี
ทีใ่ ห้บริการ (Web Hosting) ซึง่ มที ั้งพน้ื ท่ีท่ีเราตอ้ งจ่ายคา่ บรกิ าร และพนื้ ท่ีทีเ่ ราสามารถนำเว็บไวต์ไปฝากได้ฟรี ใน
หนงั สอื เล่มน้ีเราได้ขอพนื้ ที่เวบ็ ไซตฟ์ รี เช่น www.000webhost.com/
ตวั อย่างเวบ็ ท่ใี หบ้ รกิ ารพ้ืนที่เวบ็ ไซตฟ์ รี จาก www.hostinger.in.th
ขัน้ ตอนท่ี 6 อพั โหลดเว็บไซต์
หลังจากท่ีเราได้สร้างเวบ็ ไซต์จนเสรจ็ แลว้ ตอ่ ไปเราจะทำการอพั โหลดเวบ็ ไซตด์ ว้ ยโปรแกรม FileZilla เพื่อให้คนท่วั
โลกสามารถดเู วบ็ ไซตข์ องเราไดผ้ า่ นเครือขา่ ยอินเทอรเ์ น็ต

12

บันทึกสรุปการเรียนรู้

สรปุ เน้ือหา
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

ประโยชน์ท่ีได้รับ
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

การนำไปใชใ้ นชวี ติ ประจำวัน
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

13

ใบงาน

ใหน้ กั ศกึ ษาตอบคำถามดงั นี้

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

14

แนะนำโปรแกรม
Adobe Dreamweaver CS6

จดุ ประสงค์การเรยี นรู้
1. มีความเข้าใจและสามารถสร้างโปรแกรม Adobe Dreamweaver CS6
2. มีความเข้าใจและเลือกใชก้ ารตกแตง่ เว็บเพจดว้ ยโปรแกรม Adobe Dreamweaver CS6
3. มีความเข้าใจในการสร้างสรรค์ผลงานทางด้านเทคโนโลยีสารสนเทศ และเกดิ เจตคติท่ีดี ทำให้สามารถใช้

คอมพวิ เตอร์ ในทางสรา้ งสรรคไ์ ด้
การตดิ ตง้ั และใช้งานโปรแกรม Adobe Dreamweaver CS6 เบอื้ งต้น

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

ปัจจบุ ัน Dreamweaver มีเวอร์ชน่ั ล่าสุดคือ Adobe Dreamweaver CC แต่ยงั ไม่เป็นทนี่ ยิ มมากนกั โดยใน
เลม่ น้ีจะกล่าวถึงการสรา้ งเว็บไซตโ์ ดยใชเ้ วอร์ชั่น CS6 เป็นหลกั ซ่ึงได้รบั ความนยิ มมากกว่า โดยมีท้ังเวอรช์ ่ันสำหรับ
Windows และ Mac OS

15

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

การสร้างเว็บเพจด้วยการเขียน HTML เองแบบเก่า
2. ในกรณไี มต่ อ้ งทำงานแบบ WYSIWYG และต้องการเขยี นโค้ดเองสามารถใชง้ านเปน็ Editor แบบเดียวกนั กบั
โปรแกรม Notepad ได้ โดยจะมเี คร่อื งมอื ต่างๆ ท่จี ะชว่ ยใหเ้ ขยี นโค้ดไดง้ า่ ย และยดื หยุน่ ข้นึ

16

การสร้างเวบ็ เพจดว้ ย Dreamweaver แบบ WYSIWYG

การสร้างเวบ็ เพจดว้ ย Dreamweaver แบบ WYSIWYG
ความสามารถของโปรแกรม Adobe Dreamweaver CS6
3. สนบั สนุนภาษาสคริปต์ต่างๆ ท้ังฝ่งั Client และ Server เชน่ Java, PHP, CGI, VBScript

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

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

17

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

มีอะไรใหม่ใน Dreamweaver CS6
▪ สนับสนุน HTML5 และ CSS3 อย่างสมบรู ณ์

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

18

ความสามารถของโปรแกรม Adobe Dreamweaver CS6
▪ สนับสนนุ PhoneGap สำหรบั การพฒั นาบนระบบมือถอื (Mobile Development)

▪ ปรบั ปรุง jQuery Mobile ซึง่ เป็นเฟรมเวริ ค์ สำหรับการสร้าง Web Project ให้สมบรู ณ์มากข้นึ

▪ รองรับเครื่องมอื ชว่ ยทำ CSS Transitions

▪ รองรับการใช้งาน Web fonts
▪ สามารถใส่ CSS class หลายตัวใน tag เดียวกนั ได้

19

▪ สามารถเชอ่ื มต่อกบั Adobe Business Catalyst ซึ่งเป็นบรกิ ารจดเว็บโดเมน ให้เช่าโฮสต้งิ ไปจนถงึ บรกิ าร
ประชาสัมพนั ธ์เว็บไซตแ์ ละอ่ืนๆ ซึ่งทำไดโ้ ดยเชอ่ื มต่อกบั โปรแกรมโดยตรง

▪ เพิม่ ความปลอดภัยและความรวดแร็วในการเช่ือมต่อผา่ น FTP
▪ ปรับปรุง Live View และ Multisceen Preview ให้แสดงผลไดด้ ีขน้ึ

▪

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

การดาวน์โหลด
ในปัจจบุ ันทาง Adobe ได้ใช้นโยบายการขายโปรแกรมตา่ งๆ ในเครือ Adobe โดยการปล่อยใหด้ าวน์

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

1. เขา้ ไปท่ลี ิงก์ htpps://helpx.adobe.com/x-productkb/policy-pricing/cs6-product-
dowloads.html
จะปรากฏหน้าเว็บน้ีขนึ้ มา

20

2. เลื่อนลงไปทห่ี วั ขอ้ Download a CS6 product และคลิกที่ Dreamweaver CS6 จะปรากฏเมนู
ขึน้ มาใหเ้ ลือกเวอร์ชนั่ และภาษาของโปรแกรมทต่ี ้องการดาวน์โหลด โดยจะมใี หเ้ ลือกเปน็ เวอรช์ ัน่ ของ Mac OS X
และ Windows และภาษาตา่ งๆ ให้เลือก โดยทีใ่ นปจั จุบนั ยงั ไมม่ ีภาษาไทย

3. ในท่นี ี้จะเลอื กใช้เวอร์ช่ันภาษาอังกฤษ สำหรับ Windows ให้คลกิ ท่ลี ิงก์ File 1 of 1 (272MB)
หรือเลือกของเวอร์ชน่ั อ่นื ตามทีต่ อ้ งการ

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

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

ข้ันตอนดงั นี้
1. ดับเบิ้ลคลกิ ท่ีไฟล์ Dreamweaver_12_LS16 ทเ่ี ก็บไว้

2. จะปรากฏหนา้ ต่างนข้ี นึ้ มา ไฟลน์ จ้ี ะเป็นไฟลท์ รี่ วบรวมไฟลข์ อ้ มลู ตา่ งๆ ท่ใี ช้ในการติดต้ังโปรแกรม แล้ว
บีบอัดรวมกันเปน็ ไฟล์เดยี วไว้ จึงต้องแตกไฟล์ออกมากอ่ นโดยทำการเลือกตำแหนง่ โฟลเดอร์ท่ีจะแตกไฟลแ์ ลว้ กด
Next

21

3. จะปรากฏหนา้ ต่างน้ีข้ึนมา เปน็ การโหลดข้อมูล ให้รอจนเสรจ็

4. และจะปรากฏหน้าต่างน้ีขน้ึ มา มเี มนูต่างๆ ดงั นี้

- Install with a serial number คือในกรณีที่ซอื้ โปรแกรมตัวเต็มมาแลว้ สามารถใชร้ หัสท่ใี ห้ มาเพ่ือตดิ ตง้ั
โปรแกรมตวั เตม็ แบบไมจ่ ํากดั เวลาไดเ้ ลย

- Start my subscription คือ ในกรณีที่เป็นสมาชิกของ Adobe แบบทมี่ ีการจ่ายเงนิ รายเดือน ให้นํารหัส
มากรอกเพ่อื ใช้งานได้ทันที โดยทว่ั ไปนิยมใช้กบั Adobe CC

22

- Installatrial คอื ตดิ ตง้ั โปรแกรมแบบใหท้ ดลองใชไ้ ด้ 30 วัน จากนัน้ ต้องจ่ายเงินเพื่อใช้งานต่อ ในกรณีน้ที ่ี
ตอ้ งการตดิ ตงั้ แบบทดลองใช้ 30 วัน ใหเ้ ลอื กที่ Install Trial

. จะปรากฏข้อตกลงทางซอฟท์แวร์ของ Adobe ข้ึนมา หลงั จากทอ่ี า่ นแลว้ ให้กด Accept

6. จะปรากฏหนา้ ต่างใหเ้ ลือกภาษา และโฟลเดอร์ท่ีจะตดิ ตัง้ เมอ่ื เลอื กเสร็จแลว้ ให้คลิก Install

23

7. จากน้ันจะเรม่ิ ทำการติดต้งั โปรแกรม ให้รอจนเสร็จ

8. เมื่อตดิ ตง้ั เสร็จแล้วจะปรากฏหน้าต่าง ดงั น้ี คลิก Close เพอ่ื ปิดหนา้ ต่างหรอื คลกิ Launch Now เพือ่ เปดิ
โปรแกรมขึ้นมาใช้งานทันที

24

บันทึกสรุปการเรียนรู้

สรุปเน้อื หา
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
ประโยชน์ท่ีไดร้ บั
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
การนำไปใช้ในชีวติ ประจำวัน
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

25

ใบงาน

ใหน้ กั ศกึ ษาตอบคำถามดงั น้ี
1. Adobe Dreamweaver เปน็ โปรแกรมประเภทใด และเหมาะสําหรบั งานลักษณะใด
......................................................................................................................................................................
......................................................................................................................................................................
......................................................................................................................................................................
......................................................................................................................................................................
2. จงยกตัวอยา่ งความสามารถของโปรแกรม Adobe Dreamweaver CS6 มาอยา่ งน้อย 2 ข้อ
......................................................................................................................................................................
......................................................................................................................................................................
.................................................................................................................................................. ....................
......................................................................................................................................................................
3. เม่ือตอ้ งการติดตั้งโปรแกรม Adobe Dreamweaver CS6 เพือ่ ใช้กับระบบ Windows เครอื่ ง
คอมพิวเตอรค์ วรมีคุณลักษณะอยา่ งไร จงอธิบาย
......................................................................................................................................................................
....................................................................................................................................................... ...............
......................................................................................................................................................................
......................................................................................................................................................................
4. Welcome Screen คืออะไร จงอธิบาย
.................................................................................................................................................................... ..
......................................................................................................................................................................
......................................................................................................................................................................
......................................................................................................................................................................

26

การสร้างเวบ็ เพจและเว็บไซต์

จุดประสงค์การเรยี นรู้
1. เขา้ ใจเกยี่ วกับการออกแบบโครงรา่ งเร่ืองราว (Story board)
2. เข้าใจเก่ยี วกับหลกั การทำงานของโปรแกรมนำเสนอ
3. สามารถสร้าง แก้ไข และตกแตง่ โดยใช้โปรแกรมนำเสนอ

ความหมายของสตอรบี่ อร์ด(Story Board)
สตอรบ่ี อรด์ คือ การเขยี นภาพนง่ิ และข้อความเพื่อกำหนดแนวทางในการถา่ ยทำหรือผลติ ภาพเคล่ือนไหวใน

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

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

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

1. ตอ้ งมีการบรรยายสภาพและบรรยากาศของสถานท่ี หรอื การพรรณนาภาพอย่างใดอยา่ งหนง่ึ เพื่อนำ
ความคดิ ของผ้อู ่านใหซ้ าบซึ้งในทอ้ งเรอื่ ง ใหเ้ ห็นภาพฉากทีเ่ ราวาดดว้ ยตวั อักษรนั้นให้ชัดเจน

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

3. การจดั ตวั ละครและให้บทบาทแกต่ ัวละครที่สำคญั ในเรือ่ ง เพอ่ื แสดงลกั ษณะนสิ ยั อยา่ งหนึง่ อย่างใด ท่ี
กอ่ ใหเ้ กิดเรือ่ งราวตา่ งๆ ขน้ึ

27

4. การบรรยายเรอื่ ง แบบการมีตวั ตนที่เข้าไปอย่ใู นตัวเร่ือง และการเป็นบรุ ุษทสี่ าม ได้แก่ ตัวละครแสดง
บทบาทของตนเอง เปน็ วิธีท่ีดที ี่สุด

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

28

ขนั้ ตอนการทำ Story Board
1. วางโครงเรอ่ื งหลกั ไม่ว่าจะเปน็ Theme, ตัวละครหลัก, ฉาก ฯลฯ

1.1 แนวเร่ือง
1.2 ฉาก
1.3 เนือ้ เรอื่ งย่อ
1.4 Theme/แก่น (ขอ้ คิด/ส่งิ ทีต่ อ้ งการจะสือ่ )
1.5 ตวั ละคร สิง่ สำคญั คอื กำหนดรปู ลักษณ์ของตวั ละครแต่ละตวั ให้โดดเดน่ ไมค่ ลา้ ยกนั จนเกินไป ควร
ออกแบบรปู ลักษณ์ของตัวละครใหโ้ ดดเด่นแตกต่างกนั และมองแลว้ สามารถสอ่ื ถึงลกั ษณะนสิ ยั ของตวั ละครไดท้ นั ที
2. ลำดับเหตุการณค์ รา่ ว ๆ

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

เป็นขั้นตอนสุดท้ายกอ่ นลงมอื วาดสตอรี่บอร์ด ควรเขยี นบทพดู และบทความคดิ ที่จะใช้เขียนลงในหนัง
ออกมาโดยละเอียดเพือ่ ท่ีจะได้กำหนดขนาดของบอลลูนและจดั วางลงบนหน้ากระดาษไดอ้ ยา่ เหมาะสม
5. ลงมอื เขยี น Story Board !!!
ตวั อย่าง Story Board

29

ตัวอย่างการเขียน Story Board

30

31

บันทึกสรุปการเรียนรู้

สรปุ เนื้อหา
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
ประโยชนท์ ่ไี ด้รับ
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
การนำไปใชใ้ นชีวติ ประจำวัน
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................
..............................................................................................................................................................................

32

ใบงาน

จงตอบคาํ ถามตอไปนี้
1. จงอธิบายความหมายของ Blank Page
............................................................................................................................. .........................................
......................................................................................................................................................................
............................................................................................................................. .........................................
2. จงเขียนหลักการตงั้ ชื่อเวบ็ เพจมาพอสังเขป

............................................................................................................................. .........................................
......................................................................................................................................................................
............................................................................................................................. .........................................
........................................................................................................................................... ...........................
3. หากจะพัฒนาเวบ็ ไซต์ให้เหมาะกบั อปุ กรณ์มอื ถือและแท็บเลท็ ได้ ควรใช้ Workspace ชนดิ ใด
............................................................................................................................. .........................................
......................................................................................................................................................................
............................................................................................................................. .........................................
4. มมุ มองการทาํ งาน มไี วเ้ พือ่ จดุ ประสงคใ์ ด
............................................................................................................................. .........................................
......................................................................................................................................................................
............................................................................................................................. .........................................
5. มุมมอง Code มีไว้เพ่อื จดุ ประสงค์ใด
............................................................................................................................. .........................................
......................................................................................................................................................................
............................................................................................................................. .........................................
......................................................................................................................................................................
6. ใหนักเรยี นบอกวธิ กี ารเขยี นสตอรบ่ี อรดมาพอสังเขป
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................

33

...........................................................................................................................................................................
...........................................................................................................................................................................
7. ใหนักเรยี นอธบิ ายคําวาการออกแบบมาพอสังเขป
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
8. สวนประกอบตางๆ ของสตอรี่บอรมีอะไรบาง
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
9. ขอดีของการทาํ สตอรี่บอรดมอี ะไรบาง
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
10. ขอควรจําของการทําสตอรบ่ี อรดคืออะไร
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................
...........................................................................................................................................................................

34

การเผยแพรเ่ ว็บไซต์

จุดประสงค์การเรียนรู้
1. มคี วามรู้ความเขา้ ใจเกยี่ วกับการออกแบบชน้ิ งานนำเสนอ
2. มีทักษะในการใชโ้ ปรแกรมนำเสนอ
3. ผลิตช้นิ งานและนำเสนอผลงาน

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

35

. 1) การใสเ่ นอื้ หาหรือภาพทส่ี ำคญั ไมค่ วรใส่ไว้ตดิ ขอบหนา้ จนเกินไป ควรเผอื่ ริมขอบจอไวเ้ ล็กนอ้ ย
. 2) การจดั เรยี งลำดับเน้อื หา
. 2.1 จัดทำตามลำดบั ของเน้ือหาหรือการบรรยายไม่สลับไปสลับมา
. 2.2 เร่ิมแรกด้วยการแสดงชอ่ื เร่อื ง พร้อมชื่อของผ้นู ำเสนอ
. 2.3 ตอ่ มาความเปน็ เน้ือหาทีแ่ สดงหวั ข้อในการนำเสนอ
. 2.4 จากนัน้ เป็นเนอื้ หาทเี่ ป็นสว่ นของเนอ้ื หาทเ่ี รยี งลำดับจากหวั ข้อทีก่ ำหนด
. 2.5 เพื่อป้องกันการสบั สน ควรใสห่ วั ข้อเรือ่ งทุกเนื้อหาและใสเ่ ครอื่ งหมายลำดับเพื่อช่วยใหผ้ ู้ฟงั อา้ งองิ ได้
. 3) การใชข้ นาดและสีของตวั อกั ษรและพื้นหลัง ควรเลือกใช้รูปแบบตวั อกั ษรที่เป็นมาตรฐานอา่ นไดง้ า่ ยและมี
ขนาดใหญต่ ่อการมองเหน็ ในระยะไกล ไม่เล็กจนเกินไป รวมทั้งเลอื กสีพื้นหลัง และสตี วั อักษรท่ตี ิดกัน เพ่ือช่วยให้อ่าน
ข้อความได้ง่าย หรอื พื้นหลังทไ่ี ม่มีลวดลายมากเกนิ ไปจนทำใหล้ ายตา สำหรบั การออกแบบรูปแบบ ขนาดตวั อกั ษร
และสที ่เี หมาะสม มีดังน้ี
. 3.1 เลอื กใชร้ ปู แบบตวั อกั ษรทมี่ หี วั เพ่ือใหอ้ ่านงา่ ย และไม่ควรใชต้ ัวอกั ษรเกิน 2 แบบ
. 3.2 ควรใชต้ ัวอักษรขนาดใหญ่เพอื่ ให้มองเหน็ ได้งา่ ย ในส่วนของเนอื้ หาภาษาไทยควรใช้ประมาณ 36 – 50
พอยต์ (สำหรบั ส่วนของหวั เร่ืองควรใชป้ ระมาณ 50 – 60 พอยต์ (Point)
. 3.3 ควรใช้ตัวหนาหรอื ตัวขีดเส้นใต้ในการเนน้ ข้อความ หรอื จะใสเ่ งาใหต้ วั อักษร ควรเข้มกวา่ สพี ้นื
. 3.4 ไมค่ วรใช้ตวั อักษรภาษาองั กฤษแบบตัวใหญท่ งั้ หมดเพราะจะอ่านได้ยาก ยกเวน้ คำสั้นๆ ทเี่ ปน็ หัวเรือ่ ง
หรอื ตอ้ งการเนน้
. 3.5 ใชพ้ ื้นหลังทส่ี ตี ัดกับตัวอกั ษร เชน่ พืน้ มืด-ตวั อกั ษรสว่างหรือตวั อักษรสว่าง-พนื้ มดื
. 3.6 ควรใช้พ้ืนหลงั สเี ข้ม กับห้องท่ีมผี ู้ฟังนง่ั หา่ งไมเ่ กิน 20 ฟุต หากไกลกว่าน้นั ควรใชส้ สี วา่ ง
. 3.7 หลีกเล่ียงพน้ื หลังที่ยากตอ่ การอา่ น เชน่ เป็นภาพทีม่ ลี วดลาย หรอื มสี เี หมือนกบั ตัวอักษร
. 3.8 ควรใช้รูปแบบตัวอกั ษร ขนาด รวมทัง้ สีตัวอกั ษรและพ้ืนหลงั แบบเดยี วกันตลอดทกุ สไลด์
. 4) ควรจะบรรจุข้อความทเี่ ป็นใจความสำคัญ ซง่ึ สน้ั และกะทดั รดั
. 5) ควรจะแสดงหน่ึงประเด็นในแตล่ ะคร้งั เชน่ หนึง่ หน้ามีหนึ่งประเดน็ แตห่ ากต้องบรรจุไวห้ ลายประเด็นใน
หน่ึงหนา้ ควรแสดงผลทีละประเดน็ เพอ่ื ใหผ้ ู้ฟงั คงความสนใจกับสิ่งที่ผนู้ ำเสนอกำลังพูด
. 6) ไม่ควรใช้การแสดงผลพเิ ศษ (Effect) ที่มากเกินไป เพราะจะทำใหด้ ไู ม่น่าเช่ือถอื และนา่ รำคาญ
5. การใชม้ ัลติมเี ดีย
. สือ่ มัลตมิ ีเดยี (Multimedia) คอื การใช้คอมพวิ เตอรร์ ่วมกบั โปรแกรมซอฟต์แวร์ในการส่อื ความหมายโดยการ
ผสมผสานส่ือหลายชนดิ เช่น ข้อความ ภาพกราฟกิ (Graphic) และวีดีโอ เป็นต้น ส่อื ต่างๆ ท่ีนำมารวมไว้ในสือ่
มัลติมีเดยี จะชว่ ยใหเ้ กิดความหลากหลายในการใช้คอมพวิ เตอร์ อนั เปน็ เทคโนโลยใี นแนวทางใหม่ ที่ทำให้การใช้
คอมพวิ เตอร์นา่ สนใจและเรา้ ความสนใจ เพม่ิ ความสนกุ สนานในการเรียนมากย่งิ ขนึ้
6. การเตรยี มงานก่อนการนำเสนอ
. การเขยี นสตอรี่บอรด์ เปน็ ขนั้ ตอนการเตรยี มการนำเสนอขอ้ ความ ภาพ รวมท้งั สอ่ื ในรปู แบบของมลั ติมีเดียต่างๆ
ลงในกระดาษเพือ่ ใหก้ ารนำเสนอขอ้ ความและส่ือในรปู แบบตา่ งๆ เหล่านี้ เปน็ ไปอยา่ งเหมาะสมบนหนา้ จอ
คอมพวิ เตอรต์ ่อไป ขณะท่ีผังงานนำเสนอลำดับและข้นั ตอนการตัดสินใจ สตอรบ่ี อร์ดนำเสนอเนื้อหาและลักษณะของ
การนำเสนอขน้ั ตอนการสรา้ ง สตอร่บี อร์ดรวมไปถึงการเขียนสครปิ ต์ (ซึง่ สครปิ ตใ์ นทีน่ ี้ คอื เนอ้ื หา) ที่ผู้ใชจ้ ะได้เห็นบน

36

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

ข้นั ตอนการทำ Story Board
1. วางโครงเร่ืองหลัก ไม่ว่าจะเปน็ Theme, ตวั ละครหลกั , ฉาก ฯลฯ
1.1 แนวเรอ่ื ง
1.2 ฉาก
1.3 เนอ้ื เรือ่ งย่อ
1.4 Theme/แกน่ (ขอ้ คิด/สิ่งท่ีตอ้ งการจะส่อื )
1.5 ตวั ละคร ส่งิ สำคญั คอื กำหนดรูปลกั ษณ์ของตัวละครแต่ละตัวใหโ้ ดดเด่นไมค่ ล้ายกนั จนเกิน ไป ควร
ออกแบบรูปลักษณ์ของตวั ละครใหโ้ ดดเดน่ แตกต่างกัน และมองแล้วสามารถสอ่ื ถงึ ลักษณะนสิ ยั ของตวั ละคร
ไดท้ นั ที
2. ลำดับเหตกุ ารณ์ครา่ ว ๆ
จุดสำคญั คือ ทุกเหตุการณ์จะเปน็ เหตเุ ป็นผลซงึ่ กันและกนั เหตกุ ารณ์กอ่ นหนา้ จะทำใหเ้ หตุการณต์ ่อมามี
น้ำหนกั มากขน้ึ และตอ้ งหา จุด Climax ของเรอื่ งใหไ้ ด้ จดุ นีจ้ ะเปน็ จุดทน่ี า่ ต่ืนเต้นท่ีสุดกอ่ นท่ีจะเฉลยปมทุก
อยา่ งในเรื่อง การสร้างปมใหผ้ ู้อา่ นสงสยั ก็เป็นจุดสำคัญในการสรา้ งเร่อื ง ปมจะทำใหผ้ ้อู ่านเกดิ คำถามในใจ
และคาดเดาเน้ือเรื่องรวมถึงตอนจบไปต่าง ๆ นานา
3. กำหนดหน้า
4. แต่งบท
เป็นข้ันตอนสุดท้ายกอ่ นลงมือวาดสตอรี่บอร์ด ควรเขียนบทพูดและบทความคดิ ท่ีจะใช้เขยี นลงในหนงั
ออกมาโดยละเอยี ดเพอ่ื ที่จะไดก้ ำหนดขนาดของบอลลนู และจดั วางลงบนหนา้ กระดาษไดอ้ ยา่ เหมาะสม

37

5. ลงมอื เขยี น Story Board
ตัวอยา่ งแบบฟอรม์ ในการจัดทำ Storyboard

38

รายละเอยี ดของ Storyboard มดี ังน้ี :
–> STORYBOARD เรื่อง ..(ชอ่ื เรื่องทจี่ ดั ทำ)..
–> No. … หมายถึง ลำดับท่ขี องฉาก
–> Location … หมายถงึ สถานทท่ี ่ีถา่ ยทำของฉากนน้ั ๆ
–> Scene : … หมายถงึ ฉากเกย่ี วกับอะไร เชน่ ฉากเปดิ ตวั ฉากในหอ้ งเรยี น ฉากบนถนน…
–> Time : … หมายถงึ กำหนดเวลาของฉากน้ัน หน่วยเป็น วินาที เชน่ ..45.. วินาที
–> Sound : … หมายถงึ เสียงประกอบในฉาก อาจจะเป็น Sound Effect หรอื Sound ของเสียงเพลงหรอื เสียงพูด
เสียงบรรยาย
–> Story/Dialog : … หมายถงึ … เรือ่ งราวฉากนนั้ ๆ อยา่ งย่อๆ หรือ อาจจะเป็นบทพูด บทบรรยาย
7. โปรแกรมนำเสนอขอ้ มลู
. โปรแกรมทใี่ ช้ในการสรา้ งงานนำเสนอหรอื แสดงผลงานของสถาบัน มหาวทิ ยาลยั คณะฯ หน่วยงาน บริษัท โป
รโหมดสินคา้ แนะนำสนิ ค้า ประชุม สัมมนา บรรยายทางวิชาการ และอน่ื ๆ อกี มากมาย ซึ่งแต่ละโปรแกรมเหมาะกบั
งานแตล่ ะแบบ ยกตัวอย่างเชน่

1. Microsoft PowerPoint เหมาะสำหรับ Computer Presentation ทใี่ ช้งานง่ายท่ีสดุ
2. Director เหมาะสำหรับ Multimedia Computer Presentation ทีด่ ที ่ีสดุ ใชง้ านยากกว่า แต่เหมาะ

สำหรับการจัดทำสอ่ื การเรียนการสอน
3. Authorware เหมาะสำหรบั Multimedia ที่มีบททดสอบและการโตต้ อบที่ดที ส่ี ุด ใชง้ านยาก

กวา่ PowerPoint แตง่ ่ายกวา่ Director เหมาะสำหรับนิสติ นักศกึ ษา ครู อาจารย์
4. Adobe Flash เหมาะสำหรบั Multimedia CAI Games Web และอ่ืนๆ อกี มากมาย เสถียรภาพสูง

สามารถบนั ทึกเป็นไฟล์ .exe และ .swf ได้
5. Swish Max, Swish 3D เป็นโปรแกรมทด่ี มี ากในการนำเสนอผลงาน Special Effect เกี่ยวกับภาพและ

ตัวหนังสอื ซง้ึ เปน็ โปรแกรมทีส่ รา้ งใชง้ านง่ายกวา่ Flash มี Effect สำเรจ็ รปู ให้ใช้มากมาย นำไปสรา้ ง Effect
ใชก้ บั ภาพและตัวหนงั สือ แลว้ Export เปน็ .swf นำไปใช้งานไดเ้ ปน็ อยา่ งดี
6. Tool book เปน็ โปรแกรมที่ดี แตก่ ารใชย้ ากเกินไป ถึงแม้วา่ จะมีเคร่ืองมือทีส่ ามารถตอบสนองความ
ตอ้ งการสำหรบั งานนำเสนอไดด้ กี ็ตาม
7. Ulead Video Studio เป็นโปรแกรมในการนำเสนออีกโปรแกรมหนึ่ง เหมาะสมสำหรับงานประชาสมั พันธ์
หรอื งานมงคลตา่ งๆแตใ่ นเน้อื หาวิชาน้ี จะใช้โปรแกรมสำหรบั การนำเสนอข้อมูล คอื โปรแกรม Microsoft
PowerPoint ซึง่ เป็นโปรแกรมท่ีใช้งานงา่ ยและนยิ มใช้งานมากท่ีสดุ และสามารถท่ีจะพฒั นาการนำเสนอให้
มีประสิทธภิ าพมากยง่ิ ขนึ้ ได้

39

ความรู้เบอ้ื งตน้ เก่ยี วกับส่ือมัลตมิ ิเดยี และการผลิตสื่อมลั ตมิ เี ดีย
สื่อมลั ตมิ ีเดยี มผี ู้ให้ความหมายไว้ดังต่อไปนี้
. สือ่ มลั ตมิ เี ดีย คอื ระบบสื่อสารข้อมูลข่าวสารหลายชนดิ โดยผ่านส่ือทางคอมพิวเตอรซ์ งึ่ ประกอบดว้ ย
ข้อความ ฐานข้อมูล ตวั เลข กราฟิก ภาพเสียง และวดี ิทัศน์ (Jeffcoate. 1995)
. ส่อื มัลติมีเดยี คือ การใช้คอมพิวเตอรส์ ื่อความหมายโดยการผสมผสานสอ่ื หลายชนดิ เช่น ขอ้ ความ กราฟ
ภาพศิลป์ (Graphic Art) เสียง ภาพเคลอื่ นไหว (Animation) และวดิ ีทัศน์ เปน็ ตน้ ถา้ ผู้ใช้สามารถควบคุมสอ่ื เหลา่ น้ี
ให้แสดงออกมาตามตอ้ งการได้ ระบบน้จี ะเรียกว่า มัลตมิ เี ดียปฏสิ ัมพันธ์ (Interactive Multimedia) (Vaughan.
1993)
. สอื่ มลั ติมเี ดยี คอื โปรแกรมซอฟต์แวรท์ ่ีอาศยั คอมพวิ เตอร์เปน็ สื่อในการนำเสนอโปรแกรมประยกุ ตซ์ ่งึ
รวมถงึ การนำเสนอขอ้ ความสีสรร ภาพกราฟกิ (Graphic images) ภาพเคลือ่ นไหว (Animation) เสียง (Sound) และ
ภาพยนตรว์ ดี ทิ ัศน์ (Full motion Video) สว่ นมัลติมเี ดียปฏสิ มั พันธ์ (Interactive Multimedia) จะเป็นโปรแกรม
ประยกุ ตท์ ร่ี ับการตอบสนองจากผูใ้ ช้คยี ์บอร์ด (Key board) เมาส์ (Mouse) หรือตวั ช้ี (Pointer) (Hall. 1996)
. ดงั นัน้ จึงสามารถสรปุ ความหมายของสือ่ มลั ติมเี ดียได้ว่า ส่อื มลั ตมิ ีเดยี คอื การใช้คอมพวิ เตอร์รว่ มกับ
โปรแกรมซอฟต์แวรใ์ นการสื่อความหมายโดยการผสมผสานสื่อหลายชนิด เชน่ ขอ้ ความ กราฟิก (Graphic)
ภาพเคลอื่ นไหว (Animation) เสียง (Sound) และวีดทิ ศั น์ (Video) เปน็ ต้น และถ้าผู้ใช้สามารถที่จะควบคุมส่ือให้
นำเสนอออกมาตามตอ้ งการได้จะเรยี กว่า สื่อมลั ติมเี ดยี ปฏสิ ัมพันธ์ (Interactive Multimedia) การปฏสิ มั พันธข์ อง
ผูใ้ ช้สามารถจะกระทำไดโ้ ดยผ่านทางคยี ์บอร์ด(Keyboard) เมาส์ (Mouse) หรือตวั ช้ี (Pointer) เป็นตน้ การใช้ส่ือ
มลั ตมิ เี ดียในลักษณะปฏิสมั พันธก์ ็เพื่อช่วยให้ผใู้ ช้สามารถเรยี นร้หู รอื ทำกจิ กรรม รวมถงึ ดสู อ่ื ตา่ งๆ ด้วยตนเองไดส้ อ่ื
ตา่ งๆ ทนี่ ำมารวมไวใ้ นสื่อมัลติมเี ดีย เช่น ภาพ เสียง วีดิทศั น์ จะช่วยใหเ้ กิดความหลากหลายในการใช้คอมพวิ เตอร์อนั
เปน็ เทคโนโลยีคอมพิวเตอร์ในแนวทางใหมท่ ที่ ำให้การใชค้ อมพวิ เตอร์น่าสนใจ และเร้าความสนใจ เพิม่ ความ
สนกุ สนานในการเรียนร้มู ากยง่ิ ขึ้น

ความเปน็ มาของสอ่ื มัลตมิ เี ดีย

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

สอ่ื มลั ตมิ ีเดียเรมิ่ ต้นในราว ๆ ต้นปี พ.ศ. 2534 พร้อมๆ กบั การใช้ระบบปฏิบตั กิ ารวนิ โดวส์ 3.0 ซงึ่ เปน็
ระบบปฏิบตั กิ ารท่ีใชส้ ำหรบั เครือ่ งพซี ี (PC) และเปน็ ระบบปฏิบัตกิ ารที่เรียกว่า กราฟกิ ยซู เซอรอ์ ิเทอร์เฟท (Graphic
User Interface) หรือทเี่ รียกยอ่ ๆ วา่ GUI สำหรบั GUI เปน็ อนิ เทอรเ์ ฟททีส่ ามารถแสดงไดท้ ้งั ข้อความ (Text) และ
กราฟกิ (Graphic) ซ่งึ ง่ายต่อการใชง้ านตอ่ มาในราว ๆ ต้นปี พ.ศ.2535 บรษิ ัทไมโครซอฟตด์ ้พฒั นาโปรแกรม
มลั ตมิ ีเดียเวอรช์ ั่น 1.0 ท่ีใช้ร่วมกับระบบปฏบิ ัตกิ ารวินโดวส์ 3.0 ทำใหร้ ะบบปฏิบตั กิ ารวินโดวส์มศี ักยภาพเพม่ิ ข้ึนใน

40