แบบเสนอโครงรางโครงงานคอมพวเตอร

รายวชา โครงงานคอมพวเตอร ม.ตน (ง32201)

กลมสาระการเรยนร การงานอาชพและเทคโนโลย (คอมพวเตอร)

ปการศกษา 2556

----------------------------------------------------

1. ชอโครงงาน การพฒนาเวบไซต ดวย Macromedia Dreamweaver 8 เรอง ………(ใสชอ

เวบไซตทนกเรยนไดศกษาหรอคนควา)

2. ประเภทของโครงงาน (เลอก 1 โครงงาน)

โครงงานพฒนาสอเพอการศกษา

โครงงานพฒนาเครองมอ

โครงงานประเภทการทดลองทฤษฎ

โครงงานประเภทการประยกตใชงาน

โครงงานพฒนาเกม

3. ชอ สกลผเสนอโครงงาน

เดกชาย / เดกหญง ชน เลขท

4. ชอครทปรกษาโครงงาน

นายไชยวฒน วเชยรไชย ต าแหนง ครผชวย

5. แนวคด ทมา และความส าคญ

(อธบายวาเหตใดจงเลอกท าโครงงานน โครงงานนมความส าคญอยางไร เรองทท าเปนเรอง

ใหมหรอมผอนศกษาคนความากอนบางแลว ถามผอนศกษามากอนแลวผลทไดเปนอยางไร)

โดยใหนกเรยนศกษาหาขอมลเหลาน มาเขยนเปนแนวคดและทมา

1. ความส าคญของเทคโนโลยสารสนเทศและอนเทอรเนต

2. ความส าคญของขอมลสอสงคมยคใหม Social network กบการสอสารในปจจบน

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 จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

โปรแกรม Macromedia Dreamweaver 8 นนถกออกแบบมา ใหใชไดกบเวบเพจทกภาษา

และสามารถทจะเลอกใชฟอนต ไดตามทมในระบบปฏบตการ ซง โปรแกรม Macromedia

Dreamweaver 8 จะมวธในการเขารหสทเปนตวอกษรแบบมาตรฐานเทานน คอ (Unicode) ซงจะท า

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

จะใชกบภาษาอะไร ตองมการก าหนดรหส (Encoding) ใหกบโปรแกรมดวยเพอทจะไดไมมปญหา

เกดขนภายหลง

เนองจากภาษาไทยนน มตวอกษร ทคอนขางจะละเอยดออนมาก จงท าใหเกดปญหาบางครง

จะอานภาษาไทยไมได ดงนน กอนทจะ ลงมอในการสรางเวบเพจ ดวยโปรแกรม Macromedia

Dreamweaver 8 นนตองมการก าหนดรหส (Encoding) เพอใหเวบเพจนนสามารถอาน ภาษาไทยได

ซงมวธ ในการทจะก าหนดเพอให Macromedia Dreamweaver 8 อานภาษาไทยไดดงน

�x เลอกค าสงทเมนบาโดยเลอก Modify จากนนเลอก Page Properties (หรอสามารถเลอกไดทปม Page Properties ทอยบนพาแนล Properties Inspector)

�x จากนนใหเลอกทหมวดของ Title/Encoding �x ในชอง Encoding นนใหเลอกท Thai (Windows) �x จากนนคลก OK

รจกฟงกชนตาง ๆ ของ Macromedia Dreamweaver

ส าหรบโปรแกรม Macromedia Dreamweaver เปน โปรแกรมเขยนเวบ ทออกแบบมาเพอ

ชวยจดการกบ เวบเพจ โดยผใชไมจ าเปนตองมความร ในภาษา HTML ซงเปนภาษาส าหรบสราง

เวบเพจ โดยตรง ดงนน โปรแกรม Macromedia Dreamweaver จงมฟงกชนตางๆ มากมายซงแตละ

ฟงกชนกจะ แสดงผลในลกษณะของ วนโดวส (WINDOWS) หรอแถบค าสง (PALETTE) ตวอยาง

ของ ฟงกชน เชน (BEHAVIOR) เปน ฟงกชนส าหรบใชในการควบคม การใชสครปตตางๆ เปนตน

ในการทจะเลอกใชฟงกชน ผใชตองท าความเขาใจ และเรยนรวธในการควบคมการท างาน ของ

ฟงกชนตางๆ ใหเขาใจเสยกอน และวธเรยกใชฟงกชนตางๆ ของโปรแกรม Macromedia

Dreamweaver กสามารถท าไดดงน เลอกค าสงทเมนบาโดยคลกเลอกเมน Window กจะปรากฏ

รายการของค าสงควบคม หรอฟงกชนตางๆ ใหเลอก

ส าหรบฟงกชน ทเปนมาตรฐานในการ ท างานกบโปรแกรม Macromedia Dreamweaver ทม

การใช งานบอยๆ กมอย 3 ฟงกชน ไดแก

�x ฟงกชน Insert จะเปนฟงกชนทใชส าหรบควบคมเกยวกบวตถตางๆ เชน เลเยอร, รปภาพ ซงแถบเครองมอนจะประกอบไปดวย ชดเครองมอตางๆ คอ Characters , Common, Form, Frames, head, Invisible

�x ฟงกชน Properties เปนฟงกชนลกษณะตางๆ เชน ใชในการก าหนดคาของขอความในเวบ สของตวหนงสอ รปภาพ ตาราง เปนตน

�x ฟงกชน Launcher เปนฟงกชนส าหรบใชในการจดการหรอควบคมในสวนของ สครปต (Behaviors)

วธ เซตให โปรแกรม Macromedia Dreamweaver 8 เปดขนมาเปน ภาษาไทย 1.เขาไปท Edit->Preferences ดงรป (หรอกด crl+u)

จากนนจะปรากฎหนาจอ Start Page ซงเปนเครองมอส าหรบเรมตนการท างาน โดย

ตวเลอกจะแบงเปน 3 กลมดงรป ส าหรบการสรางเวบเพจเปลาแบบพนฐาน ใหเลอกกลม Create

New แลวคลกท HTML

สวนประกอบของโปรแกรม Dreamweaver 8

�x แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทก าลงใชงานอย �x แถบค าสง (Menu Bar) เปนสวนทเกบค าสงตาง ๆ ทใชงานในโปรแกรม Dreamweaver 8 �x แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ณ ขณะนน เชนการ

เปลยนมมมองในการดหนาเวบเพจ �x แถบ Insert Bar เปนกลมเครองมอทใชสรางองคประกอบตาง ๆ ในเวบเพจ ซง

ประกอบดวยชดเครองมอ 8 ชดดวยกน �x พนทออกแบบ (Document Window) เปนสวนทใชส าหรบใสเนอหาและจดองคประกอบ

ของเวบเพจ โดยประกอบดวยมมมองการท างาน 3 รปแบบดวยกนคอ Design, Code และ Code and Design

�x แถบสถานะ (Status Bar) เปนสวนทแสดงสถานะของการใชงานโปรแกรม ณ ขณะนน หนาตาง Properties เปนสวนของค าสงทใชในการก าหนดคณสมบตขององคประกอบตาง ๆ ทเราตองการเปลยนแปลงหรอตกแตง

�x Panel Group เปนกลมของแผงควบคม ทใชแทนค าสงและตดตอกบฐานขอมล

มมมองตาง ๆ ของ Document Windows

ในการออกแบบหนาเวบเพจดวยโปรแกรม Dreamweaver 8 เราสามารถเลอกรปแบบหรอมมมอง

ของหนาตางเวบเพจได 3 รปแบบดวยกนคอ

Show Code View ใชแสดงหนาจอออกแบบเปนภาษา HTML

Show Code and Design View ใชแสดงหนาจอออกแบบเปนภาษา HTML และหนาจอ

ออกแบบจรง

Show Design View ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบจรง

การซอนและแสดงเครองมอออกแบบ

ในการออกแบบเวบเพจนน บางครงตองการใชเครองมอเพมเตมเพอใชในการออกแบบ แต

บางครงกตองการซอนเครองมอตาง ๆ ไวชวขณะเพอดหนาเวบเพจทออกแบบไวใหชดเจน การ

ซอนและแสดงเครองมอออกแบบในโปรแกรม Dreamweaver 8 สามารถท าไดหลายวธดวยกน

ดงนคอ

วธท 1 โดยการคลกทค าสง Windows แลวคลกค าสงทตองการใชงาน

วธท 2 โดยการคลกทปมลกศรเลก ๆ หนาแถบ Panel

วธท 3 กดแปนพมพ <F4> เพอซอนหรอแสดงเครองมอทงหมด

การสรางหนาเวบเพจใหม

การสรางเวบเพจใหม สามารถท าไดโดย

1. คลกค าสง File>New... ทแถบเมน 2. จะปรากฎกรอบ New Document ขนมา โดยคลกทตวเลอก Basic page ในชอง Category 3. คลกตวเลอก HTML ทชอง Basic page 4. คลกปม Create

การก าหนดคณสมบตพนฐานของเวบเพจ

การบนทก (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) ท าไดดงนคอ

1. ระบายขอความทตองการจดรปแบบอกษร 2. ก าหนดคาในสวนของพาเนล Properties

การแทรกตวอกษรพเศษ (Symbol)

1. การเพมระยะเวนวรรคระหวางขอความ

Dreamweaver 8 ก าหนดใหเวนวรรคระหวางขอความไดเพยง 1 ชองเทานน เมอตองการทจะใหม

ระยะเวนวรรคมากขน จะตองใชค าสงเพอเพมระยะการเวนวรรค ซงท าไดดงนคอ

�x วางเคอรเซอรในต าแหนงทตองการเพมระยะเวนวรรค �x คลกแถบ "Common" แลวคลกเลอกแถบ "Text" �x จากนนกดแปนพมพ <Ctrl>+<Shift>+<Space Bar> หรอคลกเครองมอ "BR"

แลวคลกค าสง "Non-Breaking Space" 2. การแทรกสญลกษณพเศษ

สญลกษณพเศษทไมมในแปนพมพ สามารถจะแทรกเพมเตมไดจากแถบ Characters โดยท าได

ดงนคอ

�x วางเคอรเซอรในต าแหนงทตองการแทรกสญลกษณพเศษ �x คลกแถบ "Common" แลวคลกเลอกแถบ "Text"

�x จากนนคลกเครองมอ "BR" แลวคลกเลอกสญลกษณตามตองการ

การใสวนท

การใสวนทในหนาเวบเพจ นอกจากเพอตองการแสดงวนทแลว เรายงสามารถก าหนดรปแบบวนท

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

�x วางเคอรเซอรในต าแหนงทตองการแทรกวนท �x คลกแถบ "Common" บน Insert Bar

�x จากนนคลกเครองมอ จะปรากฏกรอบใหก าหนดรปแบบ �x ใหเลอกรปแบบตามทตองการแลวคลก OK �x ถาตองการใหวนทปรบเปลยนอตโนมตใหคลกเครองหมายถก ทหนาขอความ Update

Automatically on Save การใสเสนคนเนอหา

1. การแทรกเสนแบงเนอหา มวธการดงนคอ

�x วางเคอรเซอรในต าแหนงทตองการแทรกเสน �x คลกเลอกแถบ "HTML" บน Insert Bar

�x จากนนคลกเครองมอ 2. การปรบแตงสเสน

�x คลกทเสนคนทตองการปรบแตง �x ก าหนดคาในสวนของพาเนล Properties ซงประกอบดวย

o W คอความยาวของเสน ซงจะเลอกก าหนดเปนแบบพกเซล หรอ % กได o H คอความหนาของเสน คาปกตจะก าหนดความหนาไวท 3 พกเซล o Align คอการจดวางเสน จะเลอกแบบชดซาย กลาง ขวา กได o Shading คอการก าหนดใหเสนเปนแบบเสนทบหรอเสนโปรง

ทมา : http://uto.moph.go.th/ict/Dreamweaver8.doc

ลงชอ.............................................

(ชอเตมนกเรยน )

ผเสนอโครงงาน

ลงชอ.............................................

(นายไชยวฒน วเชยรไชย)

ครทปรกษาโครงงาน