การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

โปรแกรม Flash Effect Maker

ในบทท 3 โปรแกรม Flash Effect Maker เปนโปรแกรมทใชในการสรางไฟลกราฟกทสวยงามและยงสามารถน าเอาไฟลชนด swf ทสรางจากโปรแกรม Flash 8 ซงมขนตอนซบซอน มาใชตามค าสงทไดก าหนดไวในโปรแกรม Flash Effect Maker ท าใหสามารถสรางงานกราฟฟกทสวยงามไดในเวลาอนสนดวยวธการขนตอนทงาย เชน การใสพนหลงสามารถเลอกไดหลากหลายรปแบบ ใสขอความ และท าสไลดโชวไดอยางรวดเรวและสวยงาม โดยเฉพาะการออกแบบหนาเวบเพจสามารถเลอกประเภทไดอยางเหมาะสม มการเชอมโยงโดยมปมใหเลอกหลายรปแบบ ในบทเรยนนใชเวลาเรยนทงหมด 13 ชวโมง แบงเปนทฤษฎ 3 ชวโมง ปฏบต 10 ชวโมง รวม 4 วน 1 ชวโมง ผสอนไดก าหนดใหผเรยนไดเรยนรตามหวขอยอยแตละเรองซงมทงหมด 4 เรอง เพอใหผเรยนไดมความร สามารถปฎบตตามบทเรยนและท าแบบฝกหดทายบทเรยนได ตามรายละเอยดดงน 1. ความรเบองตน (Introduction) ไดแก ความส าคญ ความหมาย การตดตง การเปด -ปด

สวนประกอบของโปรแกรม ตลอดจนการจดเกบไฟลในรปแบบตาง ๆ ดงน

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

1.1. การตดตงโปรแกรม

1.1.1. ใหคดลอก(Copy) โดยการแดรกลาก Folder ชอ Flash Effect Maker จาก แผนซด ทผสอนแจกให ไปใสในเครองคอมพวเตอรของผเรยน 1.1.2. ดบเบลคลกท Folder ชอ Flash Effect Maker 1.1.3. คลกขวาทไฟลชอ Flash Effect Maker 1.1.4. คลกท send to Desktop

1.2. การเปดใชงานโปรแกรม

ดบเบลคลกท Shortcut โปรแกรม Flash Effect Maker บน Desktop

1.3. สวนประกอบตาง ๆ ของโปรแกรม

1.3.1. เมนบารดานขาง หมายถงการใชขอความเปนค าสงทจะน าไปใชกบการสรางงานกราฟก ซงจะอยทางดานซาย

1.3.2. เมนบารดานบน หมายถง การใชขอความเปนค าสงในการเลอกประเภทของการออกแบบหนาเวบเพจ เชน Bussiness Personal Nature Line Panel HTML/Navigation เปนตน เมอมการคลกเลอกแตละประเภทจะ

การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

แสดงรปแบบใหเลอกใชอยางหลากหลาย คลกทแบบแตละแบบจะแสดงตวอยางใหด ซงเปนขอดของโปรแกรมนทชวยออกแบบอยางมออาชพ

1.4. เรมตนสรางงานใหม

1.4.1. คลกเลอกแบบทตองการ 1.4.2. คลกท Create New

1.4.3. ก าหนดคาตาง ๆ เชน ความกวาง ความยาว ลกษณะ Mouse เปนตน 1.4.4. คลกท OK

2. การท า Banner ผเรยนไดเรยนรเกยวกบการพมพขอควมและใสเอฟเฟกตตางๆ

ใหกบขอความ เพอใหขอความมความสวยงาม โดยมขนตอนดงตอไปน 2.1. คลกท Banner

2.2. คลกเลอกแบบ Banner26

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

2.3. คลกท Flash Templates

2.4. คลกท Edit 2.5. ท Text Option พมพค าวา วทยาลยสารพดชางเชยงใหม 2.6. คลกท Font 2.7. ดบเบลคลกท Font 2.8. ก าหนดคาตาง ๆ ตามน

2.9. เสรจแลว คลกท OK 2.10. คลกท Shadow&Border ก าหนดคา 2.11. คลกท Animated Effect ก าหนดคา ตามรป

การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

2.12. คลกท FlyIn&FlyOut Effect ก าหนดคา ตามรป

2.13. คลกท OK 2.14. คลกท MovieClip3

2.15. คลกท Edit 2.16. คลกท Change เมอตองการเปลยนรปภาพ

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

2.17. คลกเลอกรปทตองการ สามารถดการแสดงผลของรปภาพ ทดานขวา

2.18. คลกท Add เมอตองการเพมรปภาพ (ในการเพมรปภาพ สามารถเพมรปได ทงหมด 5 รป และตองเพมรปบนสดเปนรปเลก ๆ หรอรปหยดน า รปดาว และรปถดมาเรอย ๆ ใหรปใหญสดอยดานลางสด จดเรยงรปลกษณะ เหมอนปรามด จากลางขนไปหาบน)

2.19. คลกท OK 2.20. คลกท OK 2.21. คลกท Save SWF/HTML ใสชอไฟล 2.22. คลกท Save (เกบไวเพอน าไปใชในเวบเพจ) 2.23. คลกท Save Project ใสชอไฟล 2.24. คลกท Save (เกบไวเพอใชในการแกไขเปลยนแปลง) โดยใชค าสง Load

Project เพอเปดไฟลมาแกไขตอไป

การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

3. การท า SlideShow ผเรยนไดเรยนรเกยวกบการน ารปภาพตาง ๆ มาจดท าเปนเปนสไลดโชวทสามารถใสเอฟเฟกตใหกบรปภาพไดอยางเหมาะสมสาวยงาม เหมาะส าหรบงานดานน าเสนอรปภาพตาง ๆ เปนอยางด โดยมขนตอนดงตอไปน 3.1. คลกท Slide Show

3.2. คลกเลอกแบบ photoalbumborder10 3.3. คลกในกรอบ Slide show 3.4. ท Resize สามารถ แดรกลากเขาหรอออก เพอยอ/ขยายขนาดของสไลด โชว

3.5. คลกท Edit 3.6. คลกท Add Photo File

3.7. คลกท Remove All (หมายถง ลบรปภาพเดมออกใหหมด)

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

3.8. คลกท Add New (หมายถงแทรกรปภาพใหม) 3.9. คลกท Border (เพอเลอกกรอบใหกบ Slide Show)

3.10. เลอกรปแบบการแสดงผลเมอเปลยนรปแตละรป 3.11. คลกท OK (รปจะแสดงทละรปโดยเรยงจากรปแรกถงรปสดทาย หาก ตองการดรปใด ๆ ใหคลกทรปในกรอบเลก ๆ รปนน จะแสดงทนท) 3.12. คลกท Save SWF/HTML ใสชอไฟล 3.13. คลกท Save (เกบไวเพอน าไปใชในเวบเพจ) 3.14. ให Save Project ไวทกครง เพอแกไขได

การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

4. การสรางหนาเวบเพจดวย HTML/Navigation

4.1. คลกท HTML/Navigation

4.2. คลกเลอกแบบ background24 4.3. คลกท ขอความ 4.4. คลกท Edit 4.5. ท Text Option พมพค าวา ยนดตอนรบ Well come 4.6. ก าหนดคาใหกบขอความตามตองการ 4.7. คลกท Button 4.8. คลกท Edit 4.9. คลกท [Button1] Link1

4.10. คลกท On Click Goto Link (* ถาไมไดคลกหวขอนจะไมสามารถพมพชอ

ไฟลเวบเพจได *)

4.11. ท Caption: พมพค าวา เขาสเมนหลก

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

4.12. ท Link พมพ ชอไฟลเวบเพจทสรางขน ในทนใหพมพ main.html 4.13. ท Style:Button 12 ใหคลกท Change

4.14. คลกเลอกแบบ Button ตามทตองการ

4.15. คลกท OK 4.16. คลกท [Button2] Link2 4.17. คลกท On Click Goto Link (* ถาไมไดคลกหวขอนจะไมสามารถพมพชอ ไฟลเวบเพจได *)

4.18. ท Caption: พมพค าวา ทกทายเจาของเวบ 4.19. ท Link พมพ ชอไฟลเวบเพจทสรางขน ในทนใหพมพ mystory.html 4.20. ท Style:Button 12 ใหคลกท Change 4.21. คลกเลอกแบบ Button ตามทตองการ หรอเลอกเหมอนกบ Button1 4.22. คลกท OK

การใชโปรแกรมกราฟกเพอพฒนาเวบเพจ

4.23. คลกท [Button3] Link3 4.24. คลกท Remove 4.25. คลกท [Button4] Link4 4.26. คลกท Remove (หากตองการเพม Button คลกท Add Button ดานลาง ) 4.27. คลกท Font

4.28. ก าหนดคาตาง ๆ ดงรป (ถาพมพภาษาไทยตองเลอกแบบอกษรทแสดง ภาษาไทยได)

4.29. คลกท OK 4.30. คลกท OK 4.31. คลกท Save SWF/HTML ใสชอไฟล 4.32. คลกท Save (เกบไวเพอน าไปใชในเวบเพจ) 4.33. คลกท Save Project ใสชอไฟล 4.34. คลกท Save (เกบไวเพอแกไขเปลยนแปลงตอไป)

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ

แบบฝกหดทายบทเรยน

1. ใหท า Banner ขอความตอไปน 1.1. ขอความ “ชอ-สกลของผเรยน” 1.2. ขอความ “สมาชก (Member)” (5 คะแนน)

2. ใหท าสไลดโชวรปภาพตาง ๆ 20 รป (5 คะแนน)

3. ใหออกแบบเวบเพจดงน

3.1. หนาแรกชอ index.html 3.2. หนาสองชอ member.html โดยใหเชอมโยงหากนได

(10 คะแนน)