แบบเสนอโครงร่างโครงงานคอมพิวเตอร์ ครูไชยวัฒน์ ม.ต้น

1. แบบเสนอโครงร่างโครงงานคอมพิวเตอร์
รายวิชา โครงงานคอมพิวเตอร์ ม.ต้น (ง32201)
กลุ่มสาระการเรียนรู้ การงานอาชีพและเทคโนโลยี (คอมพิวเตอร์)
ปีการศึกษา 2556
----------------------------------------------------
1. ชื่อโครงงาน การพัฒนาเว็บไซต์ ด้วย Macromedia Dreamweaver 8 เรื่อง ………(ใส่ชื่อ
เว็บไซต์ที่นักเรียนได้ศึกษาหรือค้นคว้า)
2. ประเภทของโครงงาน (เลือก 1 โครงงาน)
โครงงานพัฒนาสื่อเพื่อการศึกษา
โครงงานพัฒนาเครื่องมือ
โครงงานประเภทการทดลองทฤษฎี
โครงงานประเภทการประยุกต์ใช้งาน
โครงงานพัฒนาเกม
3. ชื่อ สกุลผู้เสนอโครงงาน
เด็กชาย / เด็กหญิง ชั้น เลขที่
4. ชื่อครูที่ปรึกษาโครงงาน
นายไชยวัฒน์ วิเชียรไชย ตาแหน่ง ครูผู้ช่วย
5. แนวคิด ที่มา และความสาคัญ
(อธิบายว่าเหตุใดจึงเลือกทาโครงงานนี้ โครงงานนี้มีความสาคัญอย่างไร เรื่องที่ทาเป็นเรื่อง
ใหม่หรือมีผู้อื่นศึกษาค้นคว้ามาก่อนบ้างแล้ว ถ้ามีผู้อื่นศึกษามาก่อนแล้วผลที่ได้เป็นอย่างไร)
โดยให้นักเรียนศึกษาหาข้อมูลเหล่านี้ มาเขียนเป็นแนวคิดและที่มา
1. ความสาคัญของเทคโนโลยีสารสนเทศและอินเทอร์เน็ต
2. ความสาคัญของข้อมูลสื่อสังคมยุคใหม่ Social network กับการสื่อสารในปัจจุบัน

2. 3. การนา เว็บไซต์ ชื่อ ........................ มาใช้ในการสร้างเนื้อหาความรู้ที่สนใจ
4. สรุปว่า ต้องการสร้างเว็บไซต์ เรื่อง.... เพื่ออะไร ทาไม
ข้อความด้านล่างนี้ คือตัวอย่างการเขียน แนวคิด ที่มา และความสาคัญ ค่ะ
นักเรียนศึกษาและเอาไปปรับเปลี่ยนให้เข้ากับเรื่องหรือหัวข้อที่นักเรียนได้ศึกษา
ปัจจุบันเทคโนโลยีสารสนเทศและอินเทอร์เน็ตได้เข้ามามีบทบาทต่อการดาเนินชีวิตของ
เรามากขึ้น ซึ่งเราอาจไม่รู้สึกตัวว่าอินเทอร์เน็ตกลายเป็นปัจจัยที่สาคัญต่อการดารงชีวิตในยุคข้อมูล
ข่าวสารมีความสาคัญ คนหันมาบริโภคข้อมูลข่าวสารกันมากขึ้น นอกจากเทคโนโลยีอินเทอร์เน็ต
เปรียบเสมือนถนนสาหรับการเข้าไปถึงข้อมูลที่ต้องการ เรายังต้องการเครื่องมือที่จะสามารถสร้าง
เนื้อหาและข้อมูลต่างๆ ไว้รองรับการเข้าถึง นั่นก็คือเทคโนโลยีเว็บไซต์ ซึ่งเป็นตัวกลางคอยให้
ข้อมูลต่างๆ แก่ผู้ใช้โดยการพัฒนาของเทคโนโลยีอินเทอร์เน็ตและเว็บไซต์ได้ถูกเปลี่ยนแปลงจาก
เดิมไปมาก
ในยุคที่เทคโนโลยีการสื่อสารผ่านอินเทอร์เน็ต กาลังเป็นที่นิยมและมีผลกระทบในทุกๆ
ด้านในปัจจุบัน ทาให้ทุกคน ทุกสังคมต้องมีการปรับตัว และพัฒนาให้ทันต่อการเปลี่ยน
เปลี่ยนแปลงในโลกของการสื่อสาร และการพัฒนาของโลกเวิลด์ไวด์เว็บ (World Wide Web;
WWW) จากยุคแรก คือ Web 1.0 ซึ่งมีลักษณะเป็น Static Web คือมีการนาเสนอข้อมูลทางเดียว
(one-way communication) ด้วยการแปลงข้อมูลข่าวสารที่มีอยู่รอบตัวเราให้อยู่ในรูปของดิจิตอล
(Digital) เช่น หนังสือพิมพ์ นิตยสาร หรือการโฆษณาตามหน้าเว็บไซต์ โดยผู้ใช้สามารถอ่านได้แต่
ไม่สามารถเข้าร่วมในการสร้างข้อมูลได้ แต่เมื่อก้าวเข้าสู่ยุคที่ 2 ของเทคโนโลยีคือ WWW หรือ
Web 2.0 เป็นยุคที่ทาให้อินเทอร์เน็ตมีศักยภาพในการใช้งานมากขึ้น เน้นให้ผู้ใช้มีส่วนร่วมในการ
สร้างสรรค์
จุดกาเนิดของ Web 2.0 และการพัฒนาก้าวผ่านเข้าสู่ยุค Web 3.0 ความนิยมขอ Social
Media มีการเติบโตอย่างไม่หยุดยั้งและมีแนวโน้มของผู้ใช้บริการทั่วโลก ปัจจุบัน Social Network
Website ต่าง ๆ ก็มีการพัฒนา และเปิดโอกาสให้ผู้ใช้ได้เข้าไปมีส่วนร่วมในการใช้ประโยชน์เชิง
สังคมกันมากขึ้น ไม่ว่าจะเป็น Facebook หรือ การสร้างเว็บ Blog เพื่อเผยแพร่ข้อมูลในรูปแบบ
ต่างๆ

3. ในเรื่องของเนื้อหาความรู้เกี่ยวกับ......(เรื่องที่นักเรียนนามาทาเว็บไซต์ หรือเนื้อหาใน
เว็บไซต์) นั้น เป็นความสนใจส่วนตัวที่อยากจะศึกษาเรื่องราวเกี่ยวกับ............ ซึ่งมีเนื้อหา......... (ก็
เขียนไปว่านักเรียนนาเรื่องอะไรมาศึกษา เขียนเป็นเนื้อหาย่อๆๆ เกี่ยวกับเรื่องที่นามาทาเป็น
เว็บไซต์)
ดังนั้น ผู้จัดทาจึงได้มีความคิดที่จะนาเอารูปแบบของ เว็บไซต์ ด้วยเว็บไซต์ Macromedia
Dreamweaver 8 มาใช้ในการเผยแพร่ข้อมูลที่เกี่ยวข้องกับเรื่อง......................เพื่อศึกษา เผยแพร่
ความรู้ดังกล่าวสู่ผู้สนใจต่อไป
6. วัตถุประสงค์ (ต้องเขียนเป็นข้อๆ และสัมพันธ์มาจากชื่อเรื่องของโครงงาน)
6.1 เพื่อศึกษาและพัฒนาเว็บไซต์ ด้วย Macromedia Dreamweaver 8 เรื่อง………
6.2 เพื่อศึกษาค้นคว้าเรื่องที่สนใจเกี่ยวกับ .....(เรื่องที่ทา)...
6.3 เพื่อให้ผู้เรียนสามารถพัฒนารูปแบบของเว็บไซต์จาก Macromedia Dreamweaver 8
ได้ด้วยตนเองและนามาประยุกต์ใช้ให้เข้ากับการเรียนรู้ของตนเองมากยิ่งขึ้น
7. หลักการและทฤษฎี
(ให้อธิบายถึงหลักการและทฤษฎีที่เกี่ยวข้องกับโครงงานพัฒนาเว็บบล็อก แยกเป็นเนื้อหา
ย่อๆ เช่น
1. ความหมายของเว็บไซต์
2. ประเภทของเว็บไซต์
(เนื้อหาสั้นๆ ตรงนี้ให้ไปค้นคว้าในเว็บไซต์ครับ อย่าลืมบอกแหล่งที่มาในส่วนอ้างอิงของแบบ
เสนอโครงร่างด้วยนะครับ)
8. ขอบเขตของโครงงาน
(ให้ระบุอุปกรณ์ที่ต้องใช้ระบุวัสดุอุปกรณ์ที่จาเป็นต้องใช้มีอะไรบ้าง วัสดุอุปกรณ์
เหล่านั้นอยู่ที่ใด และมีชิ้นใดบ้างที่ต้องจัดซื้อหรือหยิบยกมาจากที่ต่าง ๆ - กาหนดคุณลักษณะของ
ผลงาน และเทคนิคที่ใช้ในการพัฒนา - แนวทางการศึกษาค้นคว้าและพัฒนา อธิบายถึงกระบวนการ

4. แก้ปัญหาที่ออกแบบไว้และการเก็บข้อมูล การวิเคราะห์ การพัฒนา การทดสอบ และการนาเสนอ
ผลงาน – งบประมาณที่ใช้)
1. จัดทาโครงงานคอมพิวเตอร์ การพัฒนาเว็บไซต์ ด้วย Macromedia Dreamweaver 8
เรื่อง ………(ใส่ชื่อเว็บไซต์ที่นักเรียนได้ศึกษาหรือค้นคว้า)
2. วัสดุ อุปกรณ์ เครื่องมือหรือโปรแกรมหรือที่ใช้ในการพัฒนา ได้แก่
2.1 เครื่องคอมพิวเตอร์ พร้อมเชื่อมต่อระบบเครือข่ายอินเทอร์เน็ต
2.2 โปรแกรม Macromedia Dreamweaver 8
2.3 เว็บไซต์ที่ใช้ในการติดต่อสื่อสาร เช่น www.facebook.com www.hotmail.com
www.google.com
2.4 โปรแกรมตัดต่อและตกแต่งรูปภาพ เช่นAdobe Photoshop 7
9. ขั้นตอนและแผนดาเนินงาน (หมายเครื่องถูกในตารางนี้ครูเลือกให้ดูเป็นตัวอย่างนะครับให้นักเรียน
เลือกให้ตรงกับระยะเวลาที่ทานะครับผม)
ที่ ขั้นตอนการดาเนินงาน
ระยะเวลาดาเนินงาน
เดือนมิถุนายน เดือนกรกฎาคม
สัปดาห์ที่ สัปดาห์ที่
1 2 3 4 1 2
1 คิดหัวข้อโครงงาน 
2 ศึกษาและค้นคว้าข้อมูล 
3 จัดทาโครงร่างเพื่อนาเสนอ 
4 ปฏิบัติการจัดทาโครงงาน 
5
นาเสนอรายงานความก้าวหน้า
ของโครงงานครั้งที่ 1

6
นาเสนอรายงานความก้าวหน้า
ของโครงงานครั้งที่ 2

7 ปรับปรุง ทดสอบ 
6 จัดทาเอกสารรายงานโครงงาน 
8 ประเมินผลงาน 

5. 9 นาเสนอโครงงานผ่านเว็บ blog 
10. สถานที่ดาเนินงาน
ห้องเรียนคอมพิวเตอร์ ICT โรงเรียนดงบังพิสัยนวการนุสรณ์ อาเภอนาดูน จังหวัด
มหาสารคาม
11. ผลที่คาดว่าจะได้รับ (ให้เขียนสอดคล้องกับวัตถุประสงค์ที่ตั้งไว้)
11.1 ได้รับความรู้เกี่ยวกับพัฒนาเว็บไซต์ ด้วย Macromedia Dreamweaver 8
เรื่อง………
11.2 ได้รับความรู้เกี่ยวกับเรื่องที่นามาสร้างเป็นเว็บไซต์ คือ เรื่อง…….(เรื่องที่ทา)...
11.3 ผู้เรียนสามารถพัฒนารูปแบบของเว็บไซต์ จาก Macromedia Dreamweaver 8 ได้ด้วย
ตนเองและนามาประยุกต์ใช้ให้เข้ากับการเรียนรู้ของตนเองมากยิ่งขึ้น
11.5 ได้นาเอาเทคโนโลยีสารสนเทศยุคใหม่มาใช้อย่างมีคุณค่า และสร้างสรรค์
12. เอกสารอ้างอิง
ชื่อเว็บไซต์ต่างๆ ที่เราจะสร้างนาเนื้อหามาสร้างเป็นเว็บไซต์ของเรา และเว็บไซต์ที่
เกี่ยวข้องกับเรื่องของ Social network (ซึ่งใช้เขียนแนวคิด ที่มา และความสาคัญ และหลักการและ
ทฤษฎีต่างๆ)
ตัวอย่างเช่น
คู่มือการการสร้างเว็บ ด้วยโปรแกรม Macromedia Dreamweaver 8
Macromedia Dreamweaver 8 เป็นอีกโปรแกรมหนึ่ง ที่มีการออกแบบ มาเพื่อที่จะใช้ในการ
จัดการกับเอกสารที่ใช้สาหรับ การสร้างเว็บเพจ ซึ่งในสมัยก่อนหากจะมี การสร้างเว็บเพจ ขึ้นแต่
ละเว็บเพจนั้น ต้องให้ผู้ที่มีความรู้ในภาษา HTML มาเขียนรหัสคาสั่ง (Code) ให้ แต่ในปัจจุบัน
โปรแกรม Macromedia Dreamweaver 8 สามารถที่จะสร้างรหัสคาสั่งให้กับผู้ใช้โดยอัตโนมัติ ซึ่ง
ผู้ใช้ไม่จาเป็นต้องมีความรู้ด้านของภาษา HTML เนื่องจากโปรแกรม Macromedia Dreamweaver 8
นั้นจะมีลักษณะ การทางานที่คล้ายๆ กับโปรแกรมพิมพ์เอกสารที่เราเคยใช้และรู้จักกันดี ซึ่งจะมี
เครื่องมือและแถบคาสั่งให้เราเลือกใช้ได้ เหมือนกับ Word Processor จึงช่วยให้สามารถเว็บเพจ
ด้วยความสะดวก และรวดเร็ว

6. จุดเด่นของโปรแกรม Macromedia Dreamweaver 8
1. โปรแกรมจะทาการแปลงรหัสให้เป็นภาษา HTML โดยอัตโนมัติดังนั้น ผู้ใช้ที่ไม่มีความรู้
ด้านนี้ก็สามารถทาได้
2. มีแถบเครื่องมือ หรือแถบคาสั่ง ที่ใช้ในการควบคุมการทางาน แบ่งออกเป็นหมวดหมู่จึง
ช่วยในการทางานที่ดีขึ้น และรวดเร็วยิ่งขึ้น
3. สนับสนุนเว็บเพจที่เป็นภาษาไทยได้ดี
4. มีคุณสมบัติที่สามารถจัดการกับรูปภาพเคลื่อนไหว โดยไม่ต้องอาศัย Plugin
5. สามารถเรียกใช้ตารางจากภายนอก โดยการอิมพอร์ทจาก Text File
6. เป็นโปรแกรมที่สามารถสนับสนุนการใช้งาน CSS (Cadcading Style Sheet)
7. มีความสามารถในการทา Drop Down Menu รวมไปถึงการทาให้รูปภาพเปลี่ยนเมื่อนา
เมาส์ไปชี้ เป็นต้น
ความสามารถของ Macromedia Dreamweaver 8
 สร้างเว็บเพจภาษาไทย
 รู้จักฟังก์ชั่นต่าง ๆ ของ Macromedia
Dreamweaver
การกาหนดค่า เพื่อใช้ในการสร้างเว็บเพจ ภาษาไทย
โปรแกรม Macromedia Dreamweaver 8 มีการเขียนขึ้นมา เพื่อความสะดวกสบาย ในการ
สร้างเว็บเพจ เนื่องจากมีวิธีการใช้ที่เหมือนกับ โปรแกรม Microsoft Office มีเมนูต่างๆ ให้ผู้ใช้
เลือกใช้จากนั้น โปรแกรมจะทาการแปลงให้เป็น ภาษา HTML ซึ่งเป็นภาษาในการเขียนเว็บเพจ ให้
เองโดยอัตโนมัติ

7. โปรแกรม Macromedia Dreamweaver 8 นั้นถูกออกแบบมา ให้ใช้ได้กับเว็บเพจทุกภาษา
และสามารถที่จะเลือกใช้ฟอนต์ ได้ตามที่มีในระบบปฏิบัติการ ซึ่ง โปรแกรม Macromedia
Dreamweaver 8 จะมีวิธีในการเข้ารหัสที่เป็นตัวอักษรแบบมาตรฐานเท่านั้น คือ (Unicode) ซึ่งจะทา
ให้มีความสะดวกสบายยิ่งขึ้น ที่ไม่ต้องติดตั้งโปรแกรมเพิ่มเติมเหมือนกับเวอร์ชั่นเก่าๆ แต่ในการที่
จะใช้กับภาษาอะไร ต้องมีการกาหนดรหัส (Encoding) ให้กับโปรแกรมด้วยเพื่อที่จะได้ไม่มีปัญหา
เกิดขึ้นภายหลัง
เนื่องจากภาษาไทยนั้น มีตัวอักษร ที่ค่อนข้างจะละเอียดอ่อนมาก จึงทาให้เกิดปัญหาบางครั้ง
จะอ่านภาษาไทยไม่ได้ดังนั้น ก่อนที่จะ ลงมือในการสร้างเว็บเพจ ด้วยโปรแกรม Macromedia
Dreamweaver 8 นั้นต้องมีการกาหนดรหัส (Encoding) เพื่อให้เว็บเพจนั้นสามารถอ่าน ภาษาไทยได้
ซึ่งมีวิธี ในการที่จะกาหนดเพื่อให้ Macromedia Dreamweaver 8 อ่านภาษาไทยได้ดังนี้
 เลือกคาสั่งที่เมนูบาโดยเลือก Modify จากนั้นเลือก Page Properties (หรือสามารถเลือกได้ที่
ปุ่ม Page Properties ที่อยู่บนพาแนล Properties Inspector)
 จากนั้นให้เลือกที่หมวดของ Title/Encoding
 ในช่อง Encoding นั้นให้เลือกที่ Thai (Windows)
 จากนั้นคลิก OK

8. รู้จักฟังก์ชั่นต่าง ๆ ของ Macromedia Dreamweaver
สาหรับโปรแกรม Macromedia Dreamweaver เป็น โปรแกรมเขียนเว็บ ที่ออกแบบมาเพื่อ
ช่วยจัดการกับ เว็บเพจ โดยผู้ใช้ไม่จาเป็นต้องมีความรู้ ในภาษา HTML ซึ่งเป็นภาษาสาหรับสร้าง
เว็บเพจ โดยตรง ดังนั้น โปรแกรม Macromedia Dreamweaver จึงมีฟังก์ชั่นต่างๆ มากมายซึ่งแต่ละ
ฟังก์ชั่นก็จะ แสดงผลในลักษณะของ วินโดวส์ (WINDOWS) หรือแถบคาสั่ง (PALETTE) ตัวอย่าง
ของ ฟังก์ชั่น เช่น (BEHAVIOR) เป็น ฟังก์ชั่นสาหรับใช้ในการควบคุม การใช้สคริปต์ต่างๆ เป็นต้น
ในการที่จะเลือกใช้ฟังก์ชั่น ผู้ใช้ต้องทาความเข้าใจ และเรียนรู้วิธีในการควบคุมการทางาน ของ
ฟังก์ชั่นต่างๆ ให้เข้าใจเสียก่อน และวิธีเรียกใช้ฟังก์ชั่นต่างๆ ของโปรแกรม Macromedia
Dreamweaver ก็สามารถทาได้ดังนี้ เลือกคาสั่งที่เมนูบาโดยคลิกเลือกเมนู Window ก็จะปรากฏ
รายการของคาสั่งควบคุม หรือฟังก์ชั่นต่างๆ ให้เลือก
สาหรับฟังก์ชั่น ที่เป็นมาตรฐานในการ ทางานกับโปรแกรม Macromedia Dreamweaver ที่มี
การใช้ งานบ่อยๆ ก็มีอยู่ 3 ฟังก์ชั่น ได้แก่
 ฟังก์ชั่น Insert จะเป็นฟังก์ชั่นที่ใช้สาหรับควบคุมเกี่ยวกับวัตถุต่างๆ เช่น เลเยอร์, รูปภาพ
ซึ่งแถบเครื่องมือนี้จะประกอบไปด้วย ชุดเครื่องมือต่างๆ คือ Characters , Common, Form,
Frames, head, Invisible
 ฟังก์ชั่น Properties เป็นฟังก์ชั่นลักษณะต่างๆ เช่น ใช้ในการกาหนดค่าของข้อความในเว็บ
สีของตัวหนังสือ รูปภาพ ตาราง เป็นต้น
 ฟังก์ชั่น Launcher เป็นฟังก์ชั่นสาหรับใช้ในการจัดการหรือควบคุมในส่วนของ สคริปต์
(Behaviors)

10. วิธี เซ็ตให้ โปรแกรม Macromedia Dreamweaver 8 เปิดขึ้นมาเป็น ภาษาไทย
1.เข้าไปที่ Edit->Preferences ดังรูป (หรือกด crl+u)

11. 2.เลือก NEW Document แล้วเปลี่นค่าต่างๆ ให้เป็น ดัง
คาสั่งพื้นฐานที่ควรทราบในการเริ่มสร้างเว็บเพจ
การกาหนดตาแหน่งที่เก็บเว็บไซต์ คาสั่งในการสร้าง เปิด บันทึกเว็บไซต์ ฯลฯ
การเริ่มใช้งานโปรแกรม Dreamweaver 8
เมื่อเข้าสู่โปรแกรม Dreamweaver 8• จะปรากฏกรอบ Workspace Setup ดังรูป ให้คลิก
เลือก Designer แล้วคลิก OK เพื่อเข้าสู่หน้าจอการออกแบบของโปรแกรม Macromedia
Dreamweaver 8

12. จากนั้นจะปรากฎหน้าจอ Start Page ซึ่งเป็นเครื่องมือสาหรับเริ่มต้นการทางาน โดย
ตัวเลือกจะแบ่งเป็น 3 กลุ่มดังรูป สาหรับการสร้างเว็บเพจเปล่าแบบพื้นฐาน ให้เลือกกลุ่ม Create
New แล้วคลิกที่ HTML
ส่วนประกอบของโปรแกรม Dreamweaver 8

13.  แถบชื่อเรื่อง (Title Bar) แสดงชื่อแฟ้มข้อมูลที่กาลังใช้งานอยู่
 แถบคาสั่ง (Menu Bar) เป็นส่วนที่เก็บคาสั่งต่าง ๆ ที่ใช้งานในโปรแกรม Dreamweaver 8
 แถบ Document Tool Bar เป็นส่วนที่ใช้ในการจัดการกับเว็บเพจ ณ ขณะนั้น เช่นการ
เปลี่ยนมุมมองในการดูหน้าเว็บเพจ
 แถบ Insert Bar เป็นกลุ่มเครื่องมือที่ใช้สร้างองค์ประกอบต่าง ๆ ในเว็บเพจ ซึ่ง
ประกอบด้วยชุดเครื่องมือ 8 ชุดด้วยกัน
 พื้นที่ออกแบบ (Document Window) เป็นส่วนที่ใช้สาหรับใส่เนื้อหาและจัดองค์ประกอบ
ของเว็บเพจ โดยประกอบด้วยมุมมองการทางาน 3 รูปแบบด้วยกันคือ Design, Code และ
Code and Design
 แถบสถานะ (Status Bar) เป็นส่วนที่แสดงสถานะของการใช้งานโปรแกรม ณ ขณะนั้น
หน้าต่าง Properties เป็นส่วนของคาสั่งที่ใช้ในการกาหนดคุณสมบัติขององค์ประกอบต่าง
ๆ ที่เราต้องการเปลี่ยนแปลงหรือตกแต่ง
 Panel Group เป็นกลุ่มของแผงควบคุม ที่ใช้แทนคาสั่งและติดต่อกับฐานข้อมูล
มุมมองต่าง ๆ ของ Document Windows
ในการออกแบบหน้าเว็บเพจด้วยโปรแกรม Dreamweaver 8 เราสามารถเลือกรูปแบบหรือมุมมอง
ของหน้าต่างเว็บเพจได้ 3 รูปแบบด้วยกันคือ

14. Show Code View ใช้แสดงหน้าจอออกแบบเป็นภาษา HTML
Show Code and Design View ใช้แสดงหน้าจอออกแบบเป็นภาษา HTML และหน้าจอ
ออกแบบจริง
Show Design View ใช้แสดงหน้าจอออกแบบเป็นหน้าจอออกแบบจริง
การซ่อนและแสดงเครื่องมือออกแบบ
ในการออกแบบเว็บเพจนั้น บางครั้งต้องการใช้เครื่องมือเพิ่มเติมเพื่อใช้ในการออกแบบ แต่
บางครั้งก็ต้องการซ่อนเครื่องมือต่าง ๆ ไว้ชั่วขณะเพื่อดูหน้าเว็บเพจที่ออกแบบไว้ให้ชัดเจน การ
ซ่อนและแสดงเครื่องมือออกแบบในโปรแกรม Dreamweaver 8 สามารถทาได้หลายวิธีด้วยกัน
ดังนี้คือ
วิธีที่ 1 โดยการคลิกที่คาสั่ง Windows แล้วคลิกคาสั่งที่ต้องการใช้งาน
วิธีที่ 2 โดยการคลิกที่ปุ่มลูกศรเล็ก ๆ หน้าแถบ Panel
วิธีที่ 3 กดแป้นพิมพ์<F4> เพื่อซ่อนหรือแสดงเครื่องมือทั้งหมด

15. การกาหนดโฟลเดอร์เพื่อเก็บเว็บไซต์ที่สร้างใหม่
การเริ่มต้นสร้างเว็บไซต์ใหม่ในโปรแกรม Dreamweaver 8 จะต้องเริ่มต้นจากการตั้งชื่อ
เว็บไซต์ และกาหนดตาแหน่ง เช่น ไดร์ฟ และโฟลเดอร์ ที่จะใช้เก็บไฟล์ต่าง ๆ ของเว็บไซต์ที่เราจะ
ออกแบบ ซึ่งทาได้ตามขั้นตอนดังนี้คือ
1. คลิกคาสั่ง Site>New Site…
2. จะปรากฏกรอบ Site Definition ขึ้นมา ให้พิมพ์ชื่อเว็บไซต์ที่ต้องการ แล้วคลิกปุ่ม Next
3. ให้คลิกเลือก No, I do not want…….. แล้วคลิกปุ่ม Next
4. ระบุชื่อไดร์ฟและโฟลเดอร์ที่จะใช้เก็บข้อมูลของเว็บไซต์ที่จะทาการออกแบบ จากนั้นคลิก
ปุ่ม Next
5. คลิกที่ช่อง How do you connect to your remote server ? แล้วคลิกตัวเลือก None จากนั้น
ให้คลิกที่ปุ่ม Next
6. จะแสดงกรอบให้เห็นว่าได้กาหนดเว็บไซต์ใหม่เป็นที่เรียบร้อยแล้ว คลิกที่ปุ่ม Done เพื่อ
เริ่มต้นการออกแบบเว็บเพจ

16. 7. จะปรากฏชื่อของเว็บไซต์ พร้อมทั้งตาแหน่งที่เก็บเว็บไซต์ แสดงไว้ใน Panel Group

17. การสร้างหน้าเว็บเพจใหม่
การสร้างเว็บเพจใหม่ สามารถทาได้โดย
1. คลิกคาสั่ง File>New... ที่แถบเมนู
2. จะปรากฎกรอบ New Document ขึ้นมา โดยคลิกที่ตัวเลือก Basic page ในช่อง Category
3. คลิกตัวเลือก HTML ที่ช่อง Basic page
4. คลิกปุ่ม Create
การกาหนดคุณสมบัติพื้นฐานของเว็บเพจ

18. ก่อนการออกแบบเว็บเพจทุกครั้ง ควรเริ่มจากการกาหนดคุณสมบัติพื้นฐาน เช่น ชื่อเว็บเพจ
(Title) สีพื้น (Background color) สีของข้อความ (Text color) เป็นต้น Page Propertiesโดย
สามารถกาหนดได้ด้วยคาสั่ง Modify
1. การกาหนดลักษณะการแสดงผล (Appearance)
Appearance เป็นคุณสมบัติทั่วไป ในการแสดงผลของหน้าเว็บเพจ มีรายละเอียดดังนี้คือ

19.  Page font รูปแบบตัวอักษร
 Size ขนาดตัวอักษร
 Text color สีของข้อความทั่วไป
 Background color สีพื้นหลังของหน้าเว็บเพจ
 Background image ภาพฉากหลังของหน้าเว็บเพจ
 Repeat วิธีแสดงภาพฉากหลังแบบซ้า ๆ
 Left margin ระยะของด้านซ้ายของหน้าเว็บเพจ
 Right margin ระยะของด้านขวาของหน้าเว็บเพจ
 Top margin ระยะของด้านบนของหน้าเว็บเพจ
 Bottom margin ระยะของด้านล่างของหน้าเว็บเพจ
2. การกาหนดลักษณะข้อความหัวเรื่องและภาษา (Title/Encoding)
Title/Encoding เป็นการกาหนดชื่อและภาษาที่ใช้ของเว็บเพจ มีรายละเอียดดังนี้คือ

20. การบันทึก (Save) เว็บเพจ
ไฟล์เว็บเพจของ Dreamweaver 8 ถ้ายังไม่ได้บันทึก (Save) ข้อมูลที่ทาการแก้ไข จะสังเกต
ได้จากบนแถบชื่อเรื่อง (Title Bar) จะมีเครื่องหมาย * ปรากฏอยู่ท้ายชื่อไฟล์ ซึ่งเป็นเครื่องหมาย
เตือนว่ายังไม่ได้บันทึก (Save) ข้อมูลของไฟล์นั้น ไฟล์ข้อมูลของ Dreamweaver 8 จะถูกจัดเก็บให้
เป็นไฟล์ประเภท html ให้อัตโนมัติ คาสั่งที่ใช้ในการจัดเก็บข้อมูล สามารถเลือกใช้ได้ดังนี้คือ
o File>Save… จัดเก็บไฟล์โดยใช้ชื่อเดิม
o File>Save As… จัดเก็บไฟล์โดยใช้ชื่อใหม่
o File>Save as Template… จัดเก็บเป็นไฟล์เทมเพลต
o File>Save to Remote Server จัดเก็บไว้ที่ Remote Server
o File>Save All จัดเก็บทุกไฟล์ที่เปิดใช้งานอยู่
o นอกจากนี้ยังสามารถใช้แป้ นพิมพ์<Ctrl>+<S> แทนการใช้คาสั่ง File>Save…
หรือ File>Save As… ได้
การดูผลการออบแบบบนบราวเซอร์
การออกแบบเว็บเพจด้วยโปรแกรม Dreamweaver 8 ผู้ออกแบบควรทาการตรวจสอบการ
แสดงผลที่เว็บบราวเซอร์ (Web Browser) ด้วย เพราะการแสดงผลบางอย่างไม่สามารถจะแสดงผล
ใน Dreamweaver 8 ได้สาหรับการดูผลที่เว็บบราวเซอร์ (Browser) ทาได้ดังนี้คือ

21.  คลิกคาสั่ง File>Preview in Browser>iexplorer (หรือคลิกแป้นพิมพ์<F12>)
 จะปรากฏหน้าของเว็บเพจในเว็บบราวเซอร์ (Web Browser)
การเปิด (Open) ขึ้นมาแก้ไข
เว็บเพจที่ได้ออกแบบยังไม่เสร็จหรือต้องการทาการแก้ไขใหม่ สามารถเปิดเว็บเพจนั้น ๆ ขึ้นมา
แก้ไขได้ตามขั้นตอนดังนี้ คือ
1. เรียกใช้งานในส่วนของ Group Panel จากนั้นให้คลิกเลือกชื่อของเว็บไซต์ที่ต้องการแก้ไข
ขึ้นมา
2. ดับเบิลคลิกชื่อไฟล์ประเภท htm หรือ html ที่ต้องการแก้ไข
3. ไฟล์ที่ต้องการแก้ไขจะปรากฏขึ้นมา
การแทรกข้อความบนหน้าเว็บเพจ
การแทรกข้อความ และอักขระพิเศษ และการจัดรูปแบบข้อความ
การใส่ Title

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

23. การใส่ข้อความบนหน้าเว็บ
การแทรกข้อความในหน้าเว็บเพจ ผู้ออกแบบเพียงแต่พิมพ์ข้อความที่ต้องการลงไป หรืออาจจะ
คัดลอก (Copy) ข้อความที่พิมพ์ไว้เรียบร้อยแล้วจากไฟล์อื่นมาใช้ก็ได้
1. การพิมพ์ข้อความในหน้าเว็บเพจ
การพิมพ์ข้อความในหน้าเว็บเพจสามารถทาได้ง่าย โดยพิมพ์ข้อความที่ต้องการ เมื่อ
ต้องการขึ้นบรรทัดใหม่ให้กดแป้ นพิมพ์หรือกดแป้ นพิมพ์พร้อมกับ ในกรณีที่ต้องการให้ระยะ
บรรทัดไม่ห่างกันมาก
2. การคัดลอกข้อความจากไฟล์อื่นมาไว้ในหน้าเว็บเพจ
เราสามารถคัดลอกข้อความที่พิมพ์ไว้ด้วยโปรแกรมอื่น แล้วนามาวางไว้ในหน้าเว็บเพจได้
ซึ่งส่วนมากในการทาเว็บไซต์ มักจะนิยมพิมพ์ข้อความที่ต้องการเตรียมไว้โดยใช้โปรแกรม
Notepad แล้วเก็บบันทึกไว้เป็นแบบ Text File (มีนามสกุลเป็น txt) โดยมีวิธีการดังนี้คือ
 เปิดไฟล์ที่เก็บข้อความที่ต้องการขึ้นมา จากนั้นระบายข้อความที่ต้องการ
 คลิกคาสั่ง Edit>Copy หรือกดแป้นพิมพ์ <Ctrl>+<C>
 เปิดหน้าของเว็บเพจที่ออกแบบด้วยโปรแกรม Dreamweaver 8 จากนั้น
คลิกคาสั่ง Edit>Paste หรือกดแป้นพิมพ์ <Ctrl>+<V>
 ข้อความที่คัดลอกมาจะแสดงในหน้าเว็บเพจ
3. การเว้นวรรคระหว่างข้อความ
การใส่ข้อความบนหน้าเว็บเพจนั้น ปกติแล้วโปรแกรม Dreamweaver 8 จะเว้นวรรคให้
เพียง 1 ครั้งเท่านั้น แต่อย่างไรก็ตามเราสามารถที่จะเว้นวรรคมากกว่า 1 ครั้งได้ โดย กดแป้ นพิมพ์
<Ctrl>+<Shift>+<Space>
การจัดรูปแบบข้อความบนหน้าเว็บ
การจัดรูปแบบอักษรในงานออกแบบเว็บเพจด้วยโปรแกรม Dreamweaver 8 สามารถทาได้ดังนี้คือ

24. 1. ระบายข้อความที่ต้องการจัดรูปแบบอักษร
2. กาหนดค่าในส่วนของพาเนล Properties
การแทรกตัวอักษรพิเศษ (Symbol)
1. การเพิ่มระยะเว้นวรรคระหว่างข้อความ
Dreamweaver 8 กาหนดให้เว้นวรรคระหว่างข้อความได้เพียง 1 ช่องเท่านั้น เมื่อต้องการที่จะให้มี
ระยะเว้นวรรคมากขึ้น จะต้องใช้คาสั่งเพื่อเพิ่มระยะการเว้นวรรค ซึ่งทาได้ดังนี้คือ
 วางเคอร์เซอร์ในตาแหน่งที่ต้องการเพิ่มระยะเว้นวรรค
 คลิกแถบ "Common" แล้วคลิกเลือกแถบ "Text"
 จากนั้นกดแป้ นพิมพ์<Ctrl>+<Shift>+<Space Bar> หรือคลิกเครื่องมือ "BR"
แล้วคลิกคาสั่ง "Non-Breaking Space"
2. การแทรกสัญลักษณ์พิเศษ
สัญลักษณ์พิเศษที่ไม่มีในแป้ นพิมพ์สามารถจะแทรกเพิ่มเติมได้จากแถบ Characters โดยทาได้
ดังนี้คือ
 วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกสัญลักษณ์พิเศษ
 คลิกแถบ "Common" แล้วคลิกเลือกแถบ "Text"

25.  จากนั้นคลิกเครื่องมือ "BR" แล้วคลิกเลือกสัญลักษณ์ตามต้องการ
การใส่วันที่
การใส่วันที่ในหน้าเว็บเพจ นอกจากเพื่อต้องการแสดงวันที่แล้ว เรายังสามารถกาหนดรูปแบบวันที่
พร้อมทั้งกาหนดให้วันที่ปรับเปลี่ยนตามวันได้อัตโนมัติด้วย โดยทาตามขั้นตอนดังนี้คือ
 วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกวันที่
 คลิกแถบ "Common" บน Insert Bar
 จากนั้นคลิกเครื่องมือ จะปรากฏกรอบให้กาหนดรูปแบบ
 ให้เลือกรูปแบบตามที่ต้องการแล้วคลิก OK
 ถ้าต้องการให้วันที่ปรับเปลี่ยนอัตโนมัติให้คลิกเครื่องหมายถูก ที่หน้าข้อความ Update
Automatically on Save
การใส่เส้นคั่นเนื้อหา
1. การแทรกเส้นแบ่งเนื้อหา มีวิธีการดังนี้คือ
 วางเคอร์เซอร์ในตาแหน่งที่ต้องการแทรกเส้น
 คลิกเลือกแถบ "HTML" บน Insert Bar
 จากนั้นคลิกเครื่องมือ
2. การปรับแต่งสีเส้น
 คลิกที่เส้นคั่นที่ต้องการปรับแต่ง
 กาหนดค่าในส่วนของพาเนล Properties ซึ่งประกอบด้วย
o W คือความยาวของเส้น ซึ่งจะเลือกกาหนดเป็นแบบพิกเซล หรือ % ก็ได้
o H คือความหนาของเส้น ค่าปกติจะกาหนดความหนาไว้ที่ 3 พิกเซล
o Align คือการจัดวางเส้น จะเลือกแบบชิดซ้าย กลาง ขวา ก็ได้
o Shading คือการกาหนดให้เส้นเป็นแบบเส้นทึบหรือเส้นโปร่ง
ที่มา : http://uto.moph.go.th/ict/Dreamweaver8.doc

26. ลงชื่อ.............................................
(ชื่อเต็มนักเรียน )
ผู้เสนอโครงงาน
ลงชื่อ.............................................
(นายไชยวัฒน์ วิเชียรไชย)
ครูที่ปรึกษาโครงงาน