1. แบบเสนอโครงร่ างโครงงานคอมพิวเตอร์
รหัสวิชา ง33201 วิชาเทคโนโลยีสารสนเทศและการสื่ อสาร 5
ปี การศึกษา 2555
ชื่อโครงงาน ผูนำมำซึ่ งพื้นฐำนของวิทยำกำรปั จจุบน
้ ั
รายชื่อผู้เสนอโครงงาน
นำงสำวพัทธนันท์ หำญศึก เลขที่ 30
นำงสำวกัญจพร จอมคำ เลขที่ 32
ชั้นมัธยมศึกษำปี ที่ 6/5
ชื่ออาจารย์ ทปรึกษาโครงงาน นำงเขื่อนทอง มูลวรรณ์
ี่
ระยะเวลำดำเนินงำน ภำคเรี ยนที่ 1-2 ปี กำรศึกษำ 2555
โรงเรี ยนยุพรำชวิทยำลัย จังหวัดเชียงใหม่
สำนักงำนเขตพื้นที่กำรศึกษำมัธยมเขต 34

2. ชื่อโครงงาน(ภาษาไทย): ผูนำมำซึ่ งพื้นฐำนของวิทยำกำรปั จจุบน
้ ั
ชื่อโครงงาน(ภาษาอังกฤษ): Biography with scientist
ประเภทโครงงาน: โครงงำนพัฒนำสื่ อเพื่อกำรศึกษำ (Educational Media)
ชื่ อผู้จัดทา: นำงสำวพัทธนันท์ หำญศึก เลขที่ 30
นำงสำวกัญจพร จอมคำ เลขที่ 32
ชื่อทีปรึกษา: นำงเขื่อนทอง มูลวรรณ์
่
โรงเรียน: โรงเรี ยนยุพรำชวิทยำลัย 238 ถนนพระปกเกล้ำ ตำบลศรี ภูมิ อำเภอเมือง จังหวัดเชียงใหม่
ระยะเวลาดาเนินงาน: 3 สัปดำห์
ทีมาและความสาคัญของโครงงาน
่
ปั จจุบนทัวโลกให้ควำมสำคัญกับกำรลงทุนทำงเทคโนโลยีสำรสนเทศและกำรสื่ อสำร
ั ่
(Information and Communication Technology : ICT) เพื่อนำมำใช้เป็ นเครื่ องมือในกำรพัฒนำประเทศทั้ง
ด้ำนเศรษฐกิจ สังคม และกำรศึกษำ จนเกิดภำพควำมแตกต่ำงระหว่ำงประเทศที่มีควำมพร้อมทำง ICT กับ
ประเทศที่ขำดแคลนที่เรี ยกว่ำ Digital Divide ในขณะเดียวกันประเทศทัวโลกต่ำงมุ่งสร้ำงสังคมใหม่ให้เป็ น
่
สังคมที่ใช้ควำมรู้เป็ นฐำน (Knowledge Based Society) จนเกิดภำพควำมแตกต่ำงระหว่ำงสังคมที่สมบูรณ์
ั
ด้วยควำมรู ้กบสังคมที่ดอยควำมรู ้ ที่เรี ยกว่ำ Knowledge Divide ในยุคของกำรปฏิรูปกำรศึกษำ กำรเร่ ง
้
พัฒนำกำรศึกษำให้กำรศึกษำไปพัฒนำคุณภำพของคน เพื่อให้คนไปช่วยพัฒนำประเทศ เทคโนโลยี
สำรสนเทศและกำรสื่ อสำร (ICT) จึงเป็ นเครื่ องมือที่ช่วยเพิ่มประสิ ทธิ ภำพของกำรจัดกำรศึกษำ เช่น ช่วยนำ
กำรศึกษำให้เข้ำถึงประชำชน (Access) ส่ งเสริ มกำรเรี ยนรู ้ต่อเนื่องนอกระบบโรงเรี ยนและกำรเรี ยนรู ้ตำม
อัธยำศัย ช่วยจัดทำข้อมูลสำรสนเทศเพื่อกำรบริ หำรและจัดกำร ช่วยเพิ่มควำมรวดเร็ วและแม่นยำในกำร
จัดทำข้อมูลและกำรวิเครำะห์ขอมูล กำรเก็บรักษำ และกำรเรี ยกใช้ในกิจกรรมต่ำง ๆ ในงำนจัดกำรศึกษำ
้
โดยเฉพำะอย่ำงยิงกำรใช้เทคโนโลยีเพื่อช่วยกำรเรี ยนกำรสอน
่
ผูจดทำได้เล็งเห็นว่ำในปั จจุบนเทคโนโลยีสำรสนเทศได้เข้ำมำมีส่วนในกำรดำรงชีวตมำกขึ้น ซึ่ง
้ั ั ิ
เป็ นสำเหตุหนึ่งที่ทำให้กำรเรี ยนกำรสอนเปลี่ยนแปลงไปจำกเดิม มีแหล่งควำมรู ้เกิดขึ้นมำกมำย กำรเรี ยนรู ้
ใช้เวลำน้อย เรี ยนรู ้ได้เร็ ว มีกำรใช้ประโยชน์ จำกทรัพยำกรต่ำง ๆ ร่ วมกัน รวมถึงกำรแบ่งปั นแลกเปลี่ยน
ควำมคิดเห็นระหว่ำงกัน ควำมก้ำวหน้ำของเทคโนโลยีได้ตอบสนองต่อกำรประยุกต์เข้ำกับกำรเรี ยนกำร
สอนได้เป็ นอย่ำงดี จึงได้จดทำโครงงำนผูนำมำซึ่ งพื้นฐำนของวิทยำกำรปั จจุบนขึ้นมำ โดยมีวตถุประสงค์
ั ้ ั ั
เพื่อใช้เป็ นสื่ อประกอบกำรเรี ยนกำรสอน สำมำรถเรี ยนรู้ดวยตนเอง (Self-Study) ผูเ้ รี ยนสำมำรถศึกษำเรี ยนรู้
้
่
ต่ำง ๆ จำกแหล่งข้อมูล และทรัพยำกรที่มีกำรจัดเตรี ยมไว้ผำนทำงสื่ ออิเล็กทรอนิกส์ ที่มีกำรนำเสนอที่
น่ำสนใจ ในรู ปของ Web Siteที่ให้ควำมรู ้เกี่ยวกับเรื่ องนักวิทยำศำสตร์ ได้แก่ประวัตินกวิทยำศำสตร์ และ
ั
ผลงำน

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

4. 1. Document Window หรื อหน้ำจอเป็ นส่ วนที่แสดงไฟล์ที่กำลังจัดทำซึ่ งมีนำมสกุล html เมื่อเรี ยก
ผ่ำนโปรแกรม Web Browser (F12) ในส่ วนของ Document Window จะแสดง page title โดยมีชื่อไฟล์อยูใน ่
วงเล็บ และถ้ำหำกไฟล์น้ นมีกำรแก้ไขโดยที่ยงไม่ได้บนทึกลงไปจะแสดงเครื่ องหมำยดอกจันทน์ (*) ไว้ทำย
ั ั ั ้
ชื่อไฟล์
สำหรับทำงด้ำนล่ำงขวำของ Document Window จะเป็ น Mini - Launcher ที่จะช่วยให้กำรทำงำน
สะดวกขึ้น โดยเป็ นส่ วนที่ใช้เปิ ด Site window, Library palette,Sttyle palette, Behavior inspector, และ
HTML inspector
2. Objects เป็ นกล่องเครื่ องมือที่ใช้ในกำรสร้ำงงำน เช่น นำภำพเข้ำ กำรกำหนดตำรำง กำรเว้นวรรค กำรขึ้น
บรรทัดใหม่ เป็ นต้น กำรเรี ยก Objects ไปที่เมนู เลือก Window > Objects

5. ่
3. Properties เป็ นเครื่ องมือที่ใช้ในกำรปรับแต่งสิ่ งที่ปรำกฏอยูบนหน้ำจอ เช่น กำรกำหนดขนำดตัวหนังสื อ
กำรกำหนดขนำดภำพ กำรเปลี่ยนสี ตวหนังสื อ กำรจัดตำแหน่งตัวหนังสื อ ภำพ และตำรำง ที่นำมำแสดงใน
ั
หน้ำ Document Window แต่ถำหน้ำจอไม่ปรำกฏ Properties ให้เลือกที่เมนู Window >Properties
้
4. เครื่ องมืออีกชุดหนึ่งที่ควรรู้จก คือ Code ต่ำง ๆ ที่ทำหน้ำที่แสดง Code และกำรแก้ไข
ั
เปลี่ยนแปลง Code ให้เป็ นไปตำมต้องกำร
- Show Code View เป็ นกำรแสดง Code ทั้งหมด
- Show Code and design View เป็ นกำรแสดง Code และหน้ำจอ Document Windows ที่
กำลังทำงำน
- Show design View เป็ นกำรแสดงหน้ำจอ Document Windows ที่กำลังทำงำน
ทั้งหมด

6. 2. กำรกำหนด Site และกำรจัดเก็บไฟล์
ก่อนเริ่ มต้นทำงำน ควรกำหนดที่เก็บงำนในไดร์ ฟ C ก่อน โดยสร้ำง Folder ที่ ไดร์ฟ C และตั้ง
ชื่อ Folder ว่ำ education และใน Folder. education ให้สร้ำง Folder ย่อยไว้สำหรับเก็บภำพ ชื่อ image
กำรเริ่ มต้นใช้โปรแกรม Dreamweaver เพื่อสร้ำงเว็บสวย ๆ สู่ อินเทอร์ เน็ต นั้น สิ่ งที่ จำเป็ นอันดับแรกใน
กำรเริ่ มงำน คือ กำรกำหนด Local site เพื่อควบคุมกำรทำงำนของโปรแกรม กำรสร้ำง Local site มี
ควำมสำคัญในกำรใช้งำนโปรแกรม Dreamweaver เป็ นอย่ำงมำก เพรำะโปรแกรมจะใช้ขอมูลใน Local ้
่
site เพื่อติดตำมและควบคุมไฟล์งำนที่อยูในเว็บไซต์
กำรกำหนด Site ทำได้ดงนี้ ั
1. เปิ ดโปรแกรม Dreamweaver และเลือกเมนู Site>New Site
2. ที่ Site Definition ทำงช่องซ้ำยมือ Category ให้เลือก Local Info
3. ตั้งชื่อ Site Name ว่ำ my homepage
่
4. กำหนดตำแหน่งที่จะเก็บไฟล์งำน หรื อเลือก Folder โดยกดปุ่ ม Folder ที่อยูทำงขวำของ
หัวข้อ Local Root Folder และเลือกตำแหน่งที่จะเก็บข้อมูล เป็ น C: education
5. ที่ Cache คลิกเลือก ü เครื่ องหมำยถูก หน้ำ Enable Cache จะช่วยให้
โปรแกรม Dreamweaver สำมำรถปรับปรุ งข้อมูลได้อย่ำงรวดเร็ วเมื่อมีกำรแก้ไขปรับปรุ งเว็บไซต์
6. คลิก OK

7. 7. หลังจำกนั้นให้เปิ ดหน้ำจอใหม่ โดยใช้คำสัง File >New File และตั้งชื่อไฟล์ใหม่เป็ น index.html
่
8. ดับเบิ้ลคลิก ที่ชื่อไฟล์ index.html เพื่อเปิ ดหน้ำจอมำออกแบบเว็บไซต์
3. กำรออกแบบด้วยตำรำง
เรำจะออกแบบหน้ำจอ 2 ส่ วน ประกอบด้วยส่ วนบนสำหรับหัวเรื่ องหรื อส่ วนหัวของเว็บและ
ส่ วนล่ำงสำหรับข้อควำม ขั้นแรกให้ดบเบิ้ลคลิกที่ชื่อไฟล์ Index.html เพื่อเปิ ดหน้ำจอมำออกแบบเว็บไซต์
ั
ที่ช่อง Title พิมพ์วำ หน้ำแรกของฉัน เพื่อที่จะให้ผใช้รู้วำกำลังอยูที่หน้ำใด จำกนั้นให้ปฏิบติดงนี้
่ ู้ ่ ่ ั ั
กำรกำหนดส่ วนบนหรื อส่ วนหัวของเว็บ
1. ที่ Objects คลิกเลือก Layout View 1 ครั้ง

8. 2. คลิก Draw Layout Table
3. แล้ววำดตำรำงในหน้ำจอ Document Windows ดังภำพ
4. วำดอีก 1 ตำรำงสำหรับเนื้ อหำ ดังภำพ
4.กำรพิมพ์ตวอักษร
ั
1.เมื่อสร้ำงตำรำงเสร็ จ คลิกเลือก Draw Layout Cell ที่ Objects แล้วมำวำดในบริ เวณตำรำง
ด้ำนบน จะปรำกฏเส้นสี ฟ้ำแสดงขอบเขตของ Cell ดังภำพ

9. 2. ในขอบเขตของ Cell ให้พิมพ์คำว่ำ ดอกกุหลำบและกำหนดแบบตัวอักษร สี ขนำด ตำแหน่งของข้อควำม (ชิด
ซ้ำย กึ่งกลำง ชิดขวำ) และสี พ้ืนโดยใช้ Properties ดังภำพ

10. 3.หลังจำกนั้นให้วำด Cell .ในตำรำงล่ำง 2 Cell และพิมพ์ขอควำมบน Cell ในตำรำงล่ำงขวำมือ ดังภำพ
้
5.กำรนำภำพเข้ำโปรแกรม
กำรนำภำพเข้ำโปรแกรม ปฏิบติได้ดงนี้
ั ั
1. Save ภำพที่จะใช้ทุกภำพไว้ใน Folder ชื่อ images ใน C:educationimages ที่สร้ำงไว้แต่แรก
เสี ยก่อน
2. เรี ยกภำพเข้ำมำใช้ใน Dreamweaver โดยคลิกให้เกิด Cell สี ฟ้ำตรงที่จะนำภำพเข้ำแล้วคลิกที่รูป
ต้นไม้ (Insert Image) ที่ Objects แล้วเลือกภำพที่ตองกำรใช้ ดังภำพ
้
3.เสร็ จแล้ว ลองกด F12 ดู จะได้ภำพ ดังนี้

11. 6.กำรนำเข้ำข้อมูลในตำรำง
1. ก่อนนำเข้ำข้อมูลในตำรำง ต้องสร้ำงตำรำงใน Dreamweaver เสี ยก่อน โดย
่
สร้ำงไฟล์ใหม่ แล้วตั้งชื่อไฟล์วำ Data.html ดังภำพ
2. ดับเบิลคลิกที่ Data.html ก็จะเข้ำสู่ Document Windows ใหม่
้
3. ให้เลือก Object คลิกที่ Standard View และคลิกเลือกรู ปตำรำง (Insert Table) หรื อใช้เมนู Insert
>Table
4. กำหนดค่ำให้มี Rows = 5 Columns = 5 Width =100 Border =1 Cell Padding =5 Cell Spacing =
0 แล้วคลิก OK ดังภำพ

12. 5. ภำพที่ได้จะปรำกฏเป็ นรู ปตำรำง ดังนี้
6. ตำรำงที่สร้ำงสำมำรถที่จะยืดหดได้ตำมขนำดของข้อมูล โดยนำ Cursor ไปวำงที่เส้นของตำรำง
และลำกยืดหดได้ตำมต้องกำร ดังภำพ

13. 7.เรำสำมำรถที่จะพิมพ์ขอมูลลงในตำรำงได้ตำมต้องกำร หรื อ Copy ข้อมูลจำกไฟล์อื่น
้
และ Paste เข้ำมำใส่ ในแต่ละช่องของตำรำงได้ กำรพิมพ์ตวหนังสื อสำมำรถทำได้ดงนี้
ั ั
1. วำง Cursor ในช่องที่ตองกำรพิมพ์และพิมพ์ตวหนังสื อลงไป โดยกำหนดให้
้ ั
ใช้ font เป็ น MS Sans serif, Size = 3
2. ใช้ Properties ของตัวหนังสื อ จัดวำงตำแหน่งของตัวหนังสื อในแต่ละช่อง ให้อยูก่ ึงกลำง
่
โดยใช้ Align Center
7. กำรสร้ำงปุ่ มที่เปลี่ยนลักษณะเมื่อเมำส์ลำกผ่ำน
บำงครั้งเรำต้องกำรดึงดูดควำมสนใจของผูใช้ เพื่อให้คลิกไปยังลิงค์ต่ำง ๆ โดยเฉพำะเมื่อนำเมำส์ไป
้
ลำกผ่ำนปุ่ ม ปุ่ มก็จะมีลกษณะเปลี่ยนไป เช่น มีแสงเกิดขึ้นที่ตวอักษร หรื อ ตัวอักษรเปลี่ยนสี เป็ นต้น มี
ั ั
วิธีกำรทำดังนี้
1. สร้ำงปุ่ ม 2 ปุ่ ม ปุ่ มแรก ชื่อ next01.jpg มีลกษณะปกติ ปุ่ มที่สอง ชื่อ next02.jpg มีลกษณะที่
ั ั
ต้องกำรให้เกิดกำรเปลี่ยนแปลง เมื่อเมำส์ลำกผ่ำน เช่น
่
2. นำภำพไปไว้ในห้องที่เก็บภำพ ซึ่ งอยูใน site ที่กำลังทำงำน คือ c:educationimages
3. เปิ ดโปรแกรม Dreamweaver แล้วนำ Cursor ไปวำงในบริ เวณที่ตองกำรสร้ำงปุ่ ม
้

14. 4. แล้วเลือกเมนูที่ Insert > Interactive Images > Rollover Image
่ ่
5. เมื่อคลิกจะเกิดหน้ำจอเมนูเล็ก สำหรับระบุวำ ภำพทั้งสองภำพ ที่จะนำมำทำเป็ นปุ่ มนั้นอยูท่ีไหน

15. 6. ให้คลิกปุ่ ม Browse ของปุ่ มแรก จะเกิดเมนูโต้ตอบ ให้คลิกเลือกภำพปกติ ในตัวอย่ำงเลือก
ไฟล์ next01.jpg
7. จำกนั้นให้คลิกปุ่ ม Browse สำหรับภำพที่จะให้เกิดเมื่อเมำส์ลำกผ่ำน และ เลือก ภำพที่ 2
8. จำกนั้น ให้คลิก OK

16. 9. จะปรำกฏปุ่ มให้เห็นในบริ เวณที่กำหนด
่
10. เมื่อกด F12 และวำงเมำส์ผำนปุ่ มนี้ ปุ่ มก็จะเปลี่ยนแปลงตำมที่ตองกำร
้
8. กำรสร้ำงตัวหนังสื อวิง
่
กำรสร้ำงตัวหนังสื อวิง เรำจะใช้ Tag ของ html ซึ่ง Dreamweaver ได้อำนวยควำมสะดวก ทำให้เรำ
่
ใช้ได้อย่ำงง่ำยมำก tag ที่จะใช้คือ marquee ซึ่ งมีวธีกำรดังนี้
ิ
1. กำหนดบริ เวณที่จะให้ตวหนังสื อวิง โดยใช้ layout table และ layout cell ดังภำพ
ั ่

17. 2. พิมพ์ขอควำมที่ตองกำรให้วง
้ ้ ิ่
3. ลำกดำ หรื อ hi-light ข้อควำมที่พิมพ์ และ ให้คลิกเลือก [Quick Tag Editor] ที่ Properties ตำม
ภำพข้ำงล่ำง
4. จะเกิด Wrap Tag ขึ้น และอีก 2-3 วินำทีต่อมำจะมีชื่อ tag ต่ำง ๆ เกิดขึ้นด้วย ให้เลื่อนลงมำเรื่ อย ๆ
และเลือก marquee ดังภำพ
5. เมื่อคลิกแล้ว Dreamweaver จะนำ tag ไปไว้ ดังภำพ

18. 6. ให้คลิกปุ่ ม enter จะปิ ด Wrap Tag
7. เมื่อกด F12 จะเห็นข้อควำมวิงในบริ เวณที่กำหนด
่
9.กำรเชื่อมโยง (Link)
โดยปกติหน้ำของ Web จะมีกำร Link ไปยังหน้ำอื่น ๆ เช่น เมื่อคลิกปุ่ ม ข้อควำมหรื อภำพที่
ต้องกำร Link ก็สำมำรถ Link ไปยังหน้ำที่เรำต้องกำรได้ โดยปฏิบติดงนี้ ั ั
1.คลิกเลือกปุ่ มที่ตองกำรจะ Link .ให้เกิด Active ดังภำพ
้
2.เลือกปุ่ ม Browse for file เพื่อเลือกไฟล์ที่เรำต้องกำรจะ Link ไปหำ
3.คลิกไฟล์ที่ตองกำร Link ไปหำแล้วเลือก Select ดังภำพ
้

19. 4.ปุ่ มจะถูกกำหนดให้ Link ไปยังไฟล์ data.html ดังภำพ
5.เมื่อ Link เสร็ จแล้ว ลองกด F12 ดู จะได้ดงภำพ
ั

20. 6.กดปุ่ มหน้ำต่อไป จะปรำกฏ ไฟล์ data.html ดังภำพ
10.กำรส่ งข้อมูลขึ้นอินเทอร์ เน็ต (กำร upload ไฟล์)
เมื่อสร้ำงเว็บเสร็ จเรี ยบร้อยแล้ว จะต้องส่ งขึ้นไปยัง Server เพื่อออกสู่ อินเทอร์ เน็ต Sever ที่
ให้บริ กำรบำงแห่งก็ให้บริ กำรฟรี แต่มกจะมีโฆษณำติดมำด้วย หรื อบำงแห่ง ก็ให้บริ กำรโดยคิดรำคำ
ั
่ ั
แตกต่ำงกัน ขึ้นอยูกบบริ กำรที่จดให้ ตัวอย่ำงเว็บไซต์ ที่ให้บริ กำร Server สำหรับ สร้ำงเว็บฟรี
ั
ได้แก่ www.thai.net, www.netfirms.com, www.geocities.com เป็ นต้น
กำรส่ งไฟล์ไปยัง Server
เรำสำมำรถ ส่ งไฟล์ไปยัง Server บนอินเทอร์ เน็ต โดยใช้ Dreamweaver ได้ แต่ในบทเรี ยนนี้ จะ
เป็ นกำรส่ งไฟล์ไปบน อินเทอร์ เน็ต โดยใช้วธีกำร FTP และใช้โปรแกรม Shareware ชื่อ WS_FTPLE ซึ่ง
ิ
สำมำรถดำวน์โหลดไปใช้ได้ คลิกที่นี่
กำรเตรี ยมกำรก่อนส่ งไฟล์ข้ ึน อินเทอร์ เน็ต
่
1. ดูโครงสร้ำงของเว็บที่สร้ำงว่ำ ไฟล์ที่ใช้ท้ งหมดอยูภำยใน directory เดียวกันหรื อไม่ ไฟล์ภำพที่
ั
่ ่ ่
ใช้ท้ งหมด อยูใน Subdirectory ของ directory ที่กำลังใช้งำนอยูหรื อไม่ ถ้ำมีไฟล์ที่อยูนอก directory จะต้อง
ั
่
นำมำไว้ใน folder ที่อยูใน directory และทำกำร link เสี ยใหม่
ตัวอย่ำง
ถ้ำโครงสร้ำงของไฟล์ เหมือนดังภำพข้ำงล่ำงนี้

21. ่ ั ่
นันคือขณะนี้ กำลังทำงำนใน Directory ที่ชื่อ education ไฟล์ที่ใช้ท้ งหมดจะต้องอยูใน directory นี้
ซึ่ งอำจจะอยูกนคนละ Folder ก็ได้ จำกตัวอย่ำงข้ำงบน ไฟล์ภำพ จะถูกเก็บไว้ในห้อง images ถ้ำมีภำพที่อยู่
่ ั
่
ในห้องอื่น ที่ไม่ได้อยูในdirectory education เวลำส่ งไฟล์ข้ ึนบน อินเทอร์ เน็ตจะมีปัญหำ ไม่สำมำรถหำกัน
เจอได้ ภำพก็จะไม่ปรำกฏให้เห็น
2. หำ Server ที่จะให้บริ กำรพื้นที่สำหรับวำงเว็บ ซึ่ งมีท้ งของฟรี และเสี ยค่ำใช้จ่ำย ถ้ำเป็ นของฟรี
ั
มักจะมี โดเมนเนม หรื อชื่อสำหรับเว็บไซต์ ให้ดวย เช่น http://www.geocities.com/photaram หรื อ
้
http://magrood.netfirms.com เป็ นต้น หรื อจะไปลงทะเบียนขอโดเมนเนม ของตัวเอง ก็ได้
Server ที่ให้บริ กำรฟรี หลำยแห่ง กำหนดให้ส่งไฟล์ข้ ึนเว็บผ่ำนทำง File Manager ซึ่งเป็ นโปรแกรมที่
เว็บไซต์แต่ละแห่งจัดทำขึ้น และมักจะไม่อนุญำตให้ใช้โปรแกรม FTP ต้องใช้โปรแกรมของเว็บนั้น ๆ เมื่อ
ติดต่อ Server ได้แล้ว จะได้รับ รหัส สำหรับ login ซึ่งจะประกอบด้วย ชื่อ หรื อ UserID และ รหัสผ่ำน ซึ่ ง
จำเป็ นต้องใช้ในกำร ส่ งไฟล์ข้ ึนอินเทอร์ เน็ต (upload)
3. ขอจดโดเมนเนม ถ้ำต้องกำรชื่อเว็บไซต์ที่กำหนดเอง ต้องจดทะเบียนโดเมนเนม กับหน่วยงำนที่
ควบคุม เช่น ถ้ำต้องกำรจดโดเมนเนมในประเทศไทย ต้องติดต่อที่ THNIC
ขั้นตอนกำรส่ งไฟล์
1. ติดตั้งโปรแกรม WS_FTPLE
1. เลือก Start > Run แล้วไปยังไฟล์ SetUp ของ WS_FTP
2. คลิก OK จะเปิ ดหน้ำจอกำรติดตั้ง พร้อมทั้งเมนูเล็ก ให้คลิก Continue เพื่อติดตั้งโปรแกรม

22. 3. ให้ระบุสถำนะของผูใช้ คลิกเลือก other
้
4. กำหนดจุดประสงค์กำรใช้ คลิกเลือกตำมตัวอย่ำง
5. ให้คลิก Next และยอมรับเงื่อนไขกำรใช้โปรแกรม และคลิก OK โปรแกรมจะติดตั้ง เมื่อเสร็ จ
แล้ว จะมีขอควำมบอกให้ทรำบ ดังนี้
้
6. กำรเรี ยกใช้โปรแกรม เรี ยกได้ตำมปกติ ดังภำพ

23. 2. ติดต่อกับอินเทอร์ เน็ต ด้วยวิธี Dialup Networking
3. เปิ ดโปรแกรม WS_FTPLE โปรแกรมจะเปิ ดหน้ำจอให้เลือก หรื อ สร้ำง Profile ใหม่
สร้ำง Profile ใหม่ ในกรณี ที่เป็ นกำรส่ งขึ้น อินเทอร์ เน็ตครั้งแรก จำเป็ นต้องสร้ำง Profile ใหม่ โดย
ใส่ รำยละเอียด ดังนี้
Profile Name ชื่อที่ตองกำรกำหนด มักจะใช้ชื่อเว็บ
้
Host Name/Address เป็ น URLของเว็บไซต์ ที่ได้จำกกำร
ลงทะเบียนโดเมนเนม
UserID, ชื่อผูใช้ Server ที่ Server กำหนดมำให้ หรื อ
้
เป็ นชื่อที่เรำได้ ในขณะขอใช้ Server
Password รหัสผ่ำน ที่ได้รับจำก Server
4. ลักษณะของหน้ำจอเมื่อเข้ำไปยัง Server ได้แล้ว

24. 5. สร้ำงห้องใหม่สำหรับเก็บไฟล์
เมื่อเข้ำถึง Server แล้ว ต้องสร้ำงห้องสำหรับเก็บไฟล์ ห้องที่สร้ำงจะต้องมีโครงสร้ำงเช่นเดียวกับ
่ ่ ่
ห้องที่อยูบนเครื่ องของเรำ นันคือ มีห้องอะไร อยูในห้องอะไร ไฟล์อะไร อยูในห้องอะไร จะต้องให้
่
เหมือนกันทั้งบนฝั่งเครื่ องของเรำ และบนฝั่งอินเทอร์ เน็ต
กำรสร้ำงห้องใหม่ ให้คลิกที่ปุ่ม Midair และจะเกิดหน้ำจอเล็กให้พิมพ์ชื่อห้องที่ตองกำรสร้ำง
้
จะเกิดห้องใหม่ข้ ึน ดังภำพ

25. 6. ให้ดบเบิลคลิกห้องที่สร้ำงใหม่ และกลับมำที่ฝั่งเครื่ องเพื่อไปยังห้องที่เก็บไฟล์ที่ตองกำรส่ ง ดังภำพ
ั ้ ้
7. กำรส่ งไฟล์ไปยัง Server
่
เมื่อไปยังตำแหน่งที่อยูของไฟล์ที่ตองกำรส่ งแล้ว ให้คลิกปุ่ มลูกศรส่ ง ไปฝั่ง Server ถ้ำเป็ น
้
ไฟล์ขอมูล HTML ให้คลิกที่ปุ่ม ASSCII แต่ถำเป็ นไฟล์ ภำพ ให้คลิกที่ปุ่ม Binary ถ้ำต้องกำรส่ งทั้ง
้ ้
ไฟล์ HTML และ ภำพ ให้เลือกปุ่ ม Autoด้วย ดังภำพ
8. เมื่อ Upload เสร็ จแล้วจะมีลกษณะ ดังภำพ
ั

26. 9. เมื่อเรี ยกผ่ำน Browser จะเป็ นดังนี้

27. เครื่องมือทีใช้ ในการดาเนินการโครงงาน
่
1. ซอฟต์ แวร์ (Software)
1. ใช้ ทาเอกสาร
(1) ไมโครซอฟต์ ออฟฟิ ส เวิร์ด 2007 (Microsoft Office Word 2007)
เป็ นโปรแกรมที่ใช้สำหรับพิมพ์งำนและจัดกำรเอกสำร
2. ใช้ ตกแต่ งเว็บไซต์
(1) อะโดบี โฟโต้ช็อป ซีเอส3 (Adobe Photoshop CS3) คือโปรแกรมที่
มีควำมสำมำรถด้ำนกำรตกแต่งรู ปภำพ
3. ใช้ ในการพัฒนาเว็บไซต์
(1) มำโครมีเดีย ดรี มวีฟเวอร์ 8 (Macromedia Dreamweaver 8) เป็ น
โปรแกรมที่เหมำะสำหรับใช้ในกำรออกแบบเว็บเพจ
2. ฮาร์ ดแวร์ (Hardware)
1. เครื่องคอมพิวเตอร์ 1 เครื่อง
(1) หน่วยประมวลผล Intel Core2 1.86 Mhz ขึ้นไป
(2) หน่วยควำมจำ 128 MB ขึ้นไป
(3) ฮำร์ ดดิสก์ใช้เนื้ อที่ 6 GB ขึ้นไป
2. เครื่องพิมพ์ (Printer)
วิธีดาเนินงาน
ระยะที่ 1
1. ประชุมปรึ กษำหำรื อ เสนอควำมคิดเห็น และคัดเลือกเรื่ องที่จะทำโครงงำน
2. แบ่งหน้ำที่ของสมำชิกในกลุ่มและหำข้อมูลในกำรดำเนินงำน
3. วำงแผนขั้นตอนกำรทำโครงงำน
4. รวบรวมข้อมูลที่ได้จำกกำรศึกษำค้นคว้ำ นำมำวิเครำะห์และเลือกใช้ส่วนที่สำคัญ
5. เขียนเค้ำโครงงำน
6. นำโครงร่ ำงของโครงงำนไปปรึ กษำและขอคำแนะนำจำกอำจำรย์
7. นำข้อเสนอแนะจำกอำจำรย์มำปรับปรุ งโครงงำนให้ดีข้ ึน
ระยะที่ 2
1. ปฏิบติโครงงำน โดยดำเนิ นงำนตำมแผน ที่กำหนดไว้ในเค้ำโครงของโครงงำน
ั
1.1.1. ฝึ กฝนกำรทำ Web Site จำกโปรแกรม Macromedia Dreamweaver 8 และกำรตกแต่งภำพจำก
โปรแกรม Adobe Photoshop CS3

28. 1.1.2. วำงโครงสร้ำงเว็บไซต์
1.1.3. ลงมือทำเว็บไซต์
2. เมื่อทำเสร็ จจะต้องตรวจสอบควำมถูกต้อง ควำมเรี ยบร้อย หำกมีอะไรผิดพลำดจะทำกำรปรับปรุ ง
แก้ไขผลงำน
3. เขียนรำยงำน
4. ประเมินผลงำน
5. นำเสนอโครงงำน
งบประมาณ: ประมำณ 100 บำท
ระยะเวลาดาเนินการโครงงาน: 3 สัปดำห์
สถานทีดาเนินการโครงงาน: บ้ำนของนักเรี ยนและโรงเรี ยนยุพรำชวิทยำลัย
่
กลุ่มสาระการเรียนรู้ที่เกียวข้ อง: กลุ่มสำระกำรเรี ยนรู ้กำรงำนอำชีพและเทคโนโลยี
่
กลุ่มสำระกำรเรี ยนรู ้วิทยำศำสตร์

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

30. เอกสารอ้างอิง
http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%84%E0%B8%8B%E0%B8%95%E0%B9%8C
http://www.crnfe.ac.th/dreamweaver/first_drw.htm