เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 1

การสรางเวบ ดวยโปรแกรม 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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 2

การก าหนดคา เพอใชในการสรางเวบเพจ ภาษาไทย โปรแกรม 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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 3

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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 4

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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 5

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

ค าสงพนฐานทควรทราบในการเรมสรางเวบเพจ การก าหนดต าแหนงทเกบเวบไซต ค าสงในการสราง เปด บนทกเวบไซต ฯลฯ การเรมใชงานโปรแกรม Dreamweaver 8 เมอเขาสโปรแกรม Dreamweaver 8• จะปรากฏกรอบ Workspace Setup ดงรป ใหคลกเลอก Designer แลวคลก OK เพอเขาสหนาจอการออกแบบของโปรแกรม Macromedia Dreamweaver 8

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 6

จากนนจะปรากฎหนาจอ Start Page ซงเปนเครองมอส าหรบเรมตนการท างาน โดยตวเลอกจะแบงเปน 3 กลมดงรป ส าหรบการสรางเวบเพจเปลาแบบพนฐาน ใหเลอกกลม Create New แลวคลกท HTML

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

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

การดหนาเวบเพจ

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 7

แถบ 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> เพอซอนหรอแสดงเครองมอทงหมด

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 8

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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 9

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 10

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

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

การก าหนดคณสมบตพนฐานของเวบเพจ กอนการออกแบบเวบเพจทกครง ควรเรมจากการก าหนดคณสมบตพนฐาน เชน ชอเวบเพจ (Title) สพน (Background color) สของขอความ (Text color) เปนตน Page Propertiesโดยสามารถก าหนดไดดวยค าสง Modify

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 11

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

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

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 12

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)

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 13

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

1. เรยกใชงานในสวนของ Group Panel จากนนใหคลกเลอกชอของเวบไซตทตองการแกไขขนมา 2. ดบเบลคลกชอไฟลประเภท htm หรอ html ทตองการแกไข 3. ไฟลทตองการแกไขจะปรากฏขนมา

การแทรกขอความบนหนาเวบเพจ การแทรกขอความ และอกขระพเศษ และการจดรปแบบขอความ การใส Title หวเรองหรอไตเตล (Title) ของเวบเพจ มความส าคญมาก เพราะเปนขอความทแสดงบนบราวเซอรเพอใหผเขาชมเวบไซตเขาใจวาเนอหาในหนาเวบเพจนนเกยวกบเรองใด นอกจากนยงเปนขอมลส าคญท Search Engine ใชคนหาเวบเพจอกดวย การใสหวเรองของเวบเพจสามารถท าได 2 วธดงนคอ

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 14

การใสขอความบนหนาเวบ การแทรกขอความในหนาเวบเพจ ผออกแบบเพยงแตพมพขอความทตองการลงไป หรออาจจะคดลอก (Copy) ขอความทพมพไวเรยบรอยแลวจากไฟลอนมาใชกได 1. การพมพขอความในหนาเวบเพจ การพมพขอความในหนาเวบเพจสามารถท าไดงาย โดยพมพขอความทตองการ เมอตองการขนบรรทดใหมใหกดแปนพมพ หรอกดแปนพมพ พรอมกบ ในกรณทตองการใหระยะบรรทดไมหางกนมาก 2. การคดลอกขอความจากไฟลอนมาไวในหนาเวบเพจ เราสามารถคดลอกขอความทพมพไวดวยโปรแกรมอน แลวน ามาวางไวในหนาเวบเพจได ซงสวนมากในการท าเวบไซต มกจะนยมพมพขอความทตองการเตรยมไวโดยใชโปรแกรม Notepad แลวเกบบนทกไวเปนแบบ Text File (มนามสกลเปน txt) โดยมวธการดงนคอ

เปดไฟลทเกบขอความทตองการขนมา จากนนระบายขอความทตองการ คลกค าสง Edit>Copy หรอกดแปนพมพ <Ctrl>+<C> เปดหนาของเวบเพจทออกแบบดวยโปรแกรม Dreamweaver 8 จากนนคลกค าสง

Edit>Paste หรอกดแปนพมพ <Ctrl>+<V> ขอความทคดลอกมาจะแสดงในหนาเวบเพจ

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 15

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"

เอกสารประกอบการเรยนวชาคอมพวเตอร ม.3 ครกตตชย อรจล 16

จากนนคลกเครองมอ "BR" แลวคลกเลอกสญลกษณตามตองการ การใสวนท การใสวนทในหนาเวบเพจ นอกจากเพอตองการแสดงวนทแลว เรายงสามารถก าหนดรปแบบวนท พรอมทงก าหนดใหวนทปรบเปลยนตามวนไดอตโนมตดวย โดยท าตามขนตอนดงนคอ

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

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

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

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

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

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

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