Mini Project 1 (20 คะแนน) การสร้างเวบ็เพจด้้วยโปรแกรม Webpage Maker

ก าหนดส่ง 4 มีนาคม 2556 (16.30 น.วันสุดท้ายครูต้องส่งเกรด)

1. 4/1-4/5 สมาชิิกกลุ่ม (1-4 คน) 4/6-4/10 (สมาชิิกกลุ่ม 1-5 คน) 2. ก าหนดชิื่อเรืิ่องที่ติ้องทำ เชิ่น สอนคอมฯิ การ์ตูนิ เกมมิีประโยชน์ิ กีฬา วิิทยาศาสตร ์สุขภาพ สมุนไพริ

เทคโนโลยี ภาษา สมุนไพร กลอน บันเทิง การศึกษา ความรู้ต่างๆ เทคนิิคอิื่นๆ ฯลฯ เป็นต้นิิ1 เรื่อง 3. ก าหนดเมน ูเนื้อหาของเว็บวิ่าควรจะมีอะไรบ้าง 4. เว็บต้องม้ีหัวเว้็บ ท้ี่ม้ีภาพเคล่ือนไหว และ Logo ประจ าเว้็บ (ใช้ Photoshop, Aleo Flash หรือ้

โปรแกรมอ้ื่นๆ ตามความเหมาะสม 5. ผู้จิัดท า ทุกคน ติ้องมิีข้อมูล (ประวัติ เชิ่น facebook, mail, twitter, slideshare ทีอ่ยู่ สกุล เลขที่ ห้อง

ประวัติสิั้นๆ ริูปถ่าย) ใส่ชิื่อวิิชา การออกแบบและพิัฒนาเว็บเพจ ครูปกรณ์กฤช กิันทะเลิศ ด้วย 6. มีการสร้างหน้าเวิ็บเอง อย่างน้อย้ 15 หน้า 7. วิีดโีอ เวิ็บอื่นทิี่เกี่ยวขิ้องของเวิ็บที่นักเรียนท า เชิ่น ท าเว็บฟิุตบอล ก็หาเวิ็บเกี่ยวกิับฟุตบอล เวิ็บกีฬามาใส่ 5

เวิ็บอย่างน้อย เวิ็บทั่วไป 5-10 เวิ็บขึ้นไป เชิ่น facebook hotmail ฯลฯ ควรใช้แบบภาพ 8. ให้ระวังการใช้รูปวิ่าเหมาะสมกับเว็บตนเองหริือไม่ พ้ืนหลังต้องอิ่านหนิังสือได้ชิัดเจน 9. ข้อควรระวิัง ตัวอิักษรที่พิมพิ์ให้ใส่ font Tahoma, Ms Sans Serif เท่านั้น ยกเว้นใชิ้คาสั่ง Wordart ทีพ่ิิมพิ์ได้ิ

และพิิมพิ์ตัวอิักษรวิัยรุ่นอิื่นๆ จากโปรแกรมอิื่นมาใส่ เชิ่น Photoshop Photo scape เป็นต้น 10. การิlink ที่เป็นตัวอักษริท าให้ไม่มีมีขีดเส้นใต้ หัวเว็บแบนเนอร์ออกแบบจากิAleo Flash Instro Banner Maker ให้มีอ้างอิงแหล่งที่มาของข้อมูลิและภาพิวิดีโอจากเว็บไหนิห้ามอ้างอิงว่ามาจากิGoogle ใส่ท้ายของเนื้อหานั้นิ

11. ไฟล์หน้าแรกตั้งชื่อไฟล์ิindex.html ควรตั้งชื่อไฟล์เป็นภาษาอังกฤษิหรือตัวเลข 12. ก่อนส่งิให้เปิดแผ่นดูก่อนิว่าสมบูรณ์ิรูปภาพิข้อมูลขึ้นิแผ่นอ่านได้ิ

เข้าดูต้ัวอย้่างเวบ็ของรุ้่นพ้ี่ได้ที่ www.phanphit.ac.th/it/web ไม่ใส่ใส่เว็บเป็นชื่อเว็บิเช่นิhttp://www.hotmail.com ใช้ภาพิLogo แทนหรือิใช้ค าสั้นแทนิเช่นิHotmail.com

ตัวอย่างเว็บต้้องการท าเว็บ ฟุตบอล

ในเว็บฟุตบอลก็ควรจะม้ีเน้ื้อหา หรอืเมนูดงนี้ 1. ชิื่อที่บอกว่าเป็นเวิ็บอะไร มี Logo หรือ หัวเวิ็บ ของเรา 2. ประวัติ ความเป็นมาของฟุตบอล 3. กตกิาการเล่น 4 เทคนิคการเล่น 5. วิีดโีอ (เกี่ยวกับฟุตบอล เชิ่น เทคนิคการเตะ วิิดโีอเด็ดเกี่ยวกับฟิุตบอล เรื่องที่นักเรียนทา)

(บังคับติ้องมีทิุกกลุิ่ม) หรือใส่ link จาก Youtube 6. ภาพ (ภาพเกี่ยวกับฟิุตบอล เวิ็บที ่นร.ทา) (บังคับทิุกกลุิ่มติ้องมิี) 7. ประเภทของฟิุตบอล ประเภทของการแขิ่งขันฟิุตบอล

ลงไวิ้ให้ใช้กล่อง

9. เวิ็บที่เกี่ยวข้องหริือใกล้เคียงเหมือนกับเว็บที่นักเรียนทา (เวิ็บอื่นทิี่เกี่ยวกับฟิุตบอล) อย่างนิ้อย 5 เวิ็บขึ้นไป (บังคิับทุกกลุม่ต้องมี)

10. เวิ็บอื่นทิี่ไม่เกิี่ยวขิ้องกับเว็บที่เรียนทา เชิ่น google facebook youtube อย่างน้อย 10 เวิ็บขึ้นไป (บังคิับิทุกกลุม่ต้องมี)

11. นักฟิุตบอล 12. การแขิ่งขันฟิุตบอล เชิ่น ฟิุตบอลโลก Euro เป็นต้น 13. ใส่ Java Script ตามความเหมาะสม 14. อิื่นๆ ตามความเหมาะสม เชิ่น เกมส์ flash คลายเครียด ตลก 15. ผู้จิัดทา ทุกคน (ประวัติ เชิ่น facebook mail twitter ทีอ่ยู่ สกุล เลขท่ี หิ้อง ประวิัติสั้นๆ ริูปถ่าย)

(บังคบัทิุกกลุ่มต้องมิี) การส่งงาน 1. ใส่กล่อง CD พรอ้มปก ควรใชิ้กลอ้งพลาสติกที่ตกไม่แตก ออกแบบปกเอง 2. ไฟล์ที่สิ่งคือไฟล์ htm, HTML ทีไ่ด้จากเมนู Export to html

ไม่เอาไฟล์ wss 3. สง่ที่กล่องโต๊ะหิ้องพิักครู

ตัวอย่าง ปกหน้า ปกหลัง ใชิ้โปรแกรม Nero CoverDesign มาพร้อมกิับโปรแกรม Nero ทุกเครืิ่องที่ DVD สีดำ เท่านั้น หน้าปกแรกไม่ติ้องใส่ชิื่อทุกคน ใส่คนเดิียวและคณะ ปกหลิังใหิ้ใส่ครบทกุคนิตกแต่งให้สวยงาม

ปกหลัง สันปก ปกหน้า

จัดท ำโดย...

1. นำย............ เลขท่ี.

2. น.ส.......... เลขท่ี.... ..................

ช้ัน ม.4/7

พิมพ์เล็กตรงนี้ไม่ต้องเอาช่ือใส่เต็มปกหลัง

ปกหลังออกแบบอื่นได้อีก

การออกแบบให้ระวัง

การใช้ตัวอักษร กับพื้น

หลัง ให้เห็นตัวอักษร

ชัดๆๆ พื้นไม่ลาย

เกินไป

ว้ิธีการออกแบบปกโดยใช้ Nero CoverDesigner โปรแกรมจะติดมาพรอมโปรแกรม Nero สาหรับ ไรท์แผ่น้ศ้ึกษาว้ิธีการใช้งานที ่http://goo.gl/sM6FG

คลิก DVD Case

เข้า Start Program

เลือก โปรแกรม Nero

-เลือก Nero Nero CoverDesigner

เคร่ืองมือส าหรับตกแต่งหน้าปก แทรก ภาพตัวอักษร อืน่ๆ ถ้าจะใหส้วยงาม ควรแต่งปกมาจาก Photoshop แล้ว มา แทรกภาพในโปรแกรมนี้แทน

คลกิ DVD Inlay

แสดงหน้าปกดังภาพ

เมื่อแติ่งเสริ็จสามารถสั่งพิิมพิ์ได้เลยครับ ก่อนคลิก ปุ่มิPrint ให้คลิกตรงนี้กิ่อน

คลิก Print แลว้ให้ Element เลอืก DVD Inlay

การตั้งคา่หน้าหน้าปก ส าหรับ้ Photoshop กล้่อง DVD ขนาด้ 11 x 7.5 นิ้ว กว ้้าง x สูง

ตัง้แบบ Pixels ถ้าต้องการ ความละเอยีดมากให้ใส่ 300

ภาพธรรมดา ใสป่ระมาณ 150

กรณตีั้งคาขนาดแบบเป็นนิ้ว โดยการใช้ไม้บรรทัดวัดที่กลอง ของ DVD กว้าง x สูง (11 x 7.5) ควรวัดขนาดกล่อง แล้วใส่ตัวเลข

การนำ วิดีโอจาก Youtube มาใส่เว็บโดยใช้ว้ิธีการแปะ link

1. คลิกค าว่า ฝงั Ebed

2.แสดง Code html

คดัลอกไปใส่ Webpage

Maker

3. เลือกขนาดวีดีโฮ

น า Code ที่ได้จาก ข้อ 2 ไปใส่ในโปรแกรม Webpage Maker

เขาไปที่ เมนู Insert แล้ววาง Code ดงักล่าวดผูลลัพธ์

คลิก Embed

คดัลอก Code

ไปใส่ได้เลย

การสร้าง Link แบบไม่มีตัวขีดเส้นใต้

1. เปิดโปรแกรม Webpage Maker 2. เมนู Format ------Text Link Style Sheet

กด Ok ทุกอันที่ขึ้นมาจะได้ Style 1

3. เวลาสร้าง Link ให้เลือกดังนี้

ทกุๆ Tab นี้ 4

Tab ให้เช็ค

เครื่องหมายถูก

ที่ช่อง None

ทุกอัน