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

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

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

ปการศกษา 2556

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 เพอเผยแพรขอมลในรปแบบตางๆ

ในเรองของเนอหาความรเกยวกบ......(เรองทนกเรยนน ามาท าเวบไซต หรอเนอหาในเวบไซต) นน เปนความสนใจสวนตวทอยากจะศกษาเรองราวเกยวกบ............ ซงมเนอหา......... (กเขยนไปวานกเรยนน าเรองอะไรมาศกษา เขยนเปนเนอหายอๆๆ เกยวกบเรองทน ามาท าเปนเวบไซต) ดงนน ผจดท าจงไดมความคดทจะน าเอารปแบบของ เวบไซต ดวยเวบไซต Macromedia Dreamweaver 8 มาใชในการเผยแพรขอมลทเกยวของกบเรอง......................เพอศกษา เผยแพรความรดงกลาวสผสนใจตอไป

6. วตถประสงค (ตองเขยนเปนขอๆ และสมพนธมาจากชอเรองของโครงงาน)

6.1 เพอศกษาและพฒนาเวบไซต ดวย Macromedia Dreamweaver 8 เรอง……… 6.2 เพอศกษาคนควาเรองทสนใจเกยวกบ .....(เรองทท า)... 6.3 เพอใหผเรยนสามารถพฒนารปแบบของเวบไซตจาก Macromedia Dreamweaver 8 ไดดวยตนเองและน ามาประยกตใชใหเขากบการเรยนรของตนเองมากยงขน

7. หลกการและทฤษฎ

(ใหอธบายถงหลกการและทฤษฎทเกยวของกบโครงงานพฒนาเวบบลอก แยกเปนเนอหา

ยอๆ เชน

1. ความหมายของเวบไซต

2. ประเภทของเวบไซต

(เนอหาสนๆ ตรงนใหไปคนควาในเวบไซตครบ อยาลมบอกแหลงทมาในสวนอางองของแบบ

เสนอโครงรางดวยนะครบ)

8. ขอบเขตของโครงงาน

(ใหระบอปกรณทตองใช ระบวสดอปกรณทจ าเปนตองใชมอะไรบาง วสดอปกรณ

เหลานนอยทใด และมชนใดบางทตองจดซอหรอหยบยกมาจากทตาง ๆ - ก าหนดคณลกษณะของ

ผลงาน และเทคนคทใชในการพฒนา - แนวทางการศกษาคนควาและพฒนา อธบายถงกระบวนการ

แกปญหาทออกแบบไว และการเกบขอมล การวเคราะห การพฒนา การทดสอบ และการน าเสนอ

ผลงาน – งบประมาณทใช)

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 ประเมนผลงาน

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

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 ซงเปนภาษาในการเขยนเวบเพจ ให

เองโดยอตโนมต

โปรแกรม 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

รจกฟงกชนตาง ๆ ของ 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)

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

2.เลอก NEW Document แลวเปลนคาตางๆ ใหเปน ดง

ค าสงพนฐานทควรทราบในการเรมสรางเวบเพจ

การก าหนดต าแหนงทเกบเวบไซต ค าสงในการสราง เปด บนทกเวบไซต ฯลฯ

การเรมใชงานโปรแกรม Dreamweaver 8

เมอเขาสโปรแกรม Dreamweaver 8• จะปรากฏกรอบ Workspace Setup ดงรป ใหคลก

เลอก Designer แลวคลก OK เพอเขาสหนาจอการออกแบบของโปรแกรม Macromedia

Dreamweaver 8

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

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

New แลวคลกท HTML

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

แถบชอเรอง (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 รปแบบดวยกนคอ

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

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

ออกแบบจรง

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

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

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

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

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

ดงนคอ

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

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

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

การก าหนดโฟลเดอรเพอเกบเวบไซตทสรางใหม

การเรมตนสรางเวบไซตใหมในโปรแกรม 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 เพอ

เรมตนการออกแบบเวบเพจ

7. จะปรากฏชอของเวบไซต พรอมทงต าแหนงทเกบเวบไซต แสดงไวใน Panel Group

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

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

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

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

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

(Title) สพน (Background color) สของขอความ (Text color) เปนตน Page Propertiesโดย

สามารถก าหนดไดดวยค าสง Modify

1. การก าหนดลกษณะการแสดงผล (Appearance)

Appearance เปนคณสมบตทวไป ในการแสดงผลของหนาเวบเพจ มรายละเอยดดงนคอ

Page font รปแบบตวอกษร Size ขนาดตวอกษร Text color สของขอความทวไป Background color สพนหลงของหนาเวบเพจ Background image ภาพฉากหลงของหนาเวบเพจ Repeat วธแสดงภาพฉากหลงแบบซ า ๆ Left margin ระยะของดานซายของหนาเวบเพจ Right margin ระยะของดานขวาของหนาเวบเพจ Top margin ระยะของดานบนของหนาเวบเพจ Bottom margin ระยะของดานลางของหนาเวบเพจ

2. การก าหนดลกษณะขอความหวเรองและภาษา (Title/Encoding)

Title/Encoding เปนการก าหนดชอและภาษาทใชของเวบเพจ มรายละเอยดดงนคอ

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

คลกค าสง File>Preview in Browser>iexplorer (หรอคลกแปนพมพ <F12>) จะปรากฏหนาของเวบเพจในเวบบราวเซอร (Web Browser)

การเปด (Open) ขนมาแกไข

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

แกไขได ตามขนตอนดงน คอ

1. เรยกใชงานในสวนของ Group Panel จากนนใหคลกเลอกชอของเวบไซตทตองการแกไขขนมา

2. ดบเบลคลกชอไฟลประเภท htm หรอ html ทตองการแกไข 3. ไฟลทตองการแกไขจะปรากฏขนมา

การแทรกขอความบนหนาเวบเพจ

การแทรกขอความ และอกขระพเศษ และการจดรปแบบขอความ

การใส Title

หวเรองหรอไตเตล (Title) ของเวบเพจ มความส าคญมาก เพราะเปนขอความทแสดงบน

บราวเซอรเพอใหผเขาชมเวบไซตเขาใจวาเนอหาในหนาเวบเพจนนเกยวกบเรองใด นอกจากนยง

เปนขอมลส าคญท Search Engine ใชคนหาเวบเพจอกดวย

การใสหวเรองของเวบเพจสามารถท าได 2 วธดงนคอ

การใสขอความบนหนาเวบ

การแทรกขอความในหนาเวบเพจ ผออกแบบเพยงแตพมพขอความทตองการลงไป หรออาจจะ

คดลอก (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 สามารถท าไดดงนคอ

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

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

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

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

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

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

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

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

ดงนคอ

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

จากนนคลกเครองมอ "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

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

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

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

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

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

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