1

การสรางเวบ ดวยโปรแกรม Macromedia Dreamweaver 8

Macromedia Dreamweaver 8 มการออกแบบมาเพอทจะใชในการจดการกบเอกสารทใชส าหรบ การสรางเวบเพจ ซงในสมยกอนหากจะม การสรางเวบเพจ ขนแตละเวบเพจนน ตองใหผทมความรในภาษา HTML มาเขยนรหสค าสง (Code) ให แตในปจจบน โปรแกรม Macromedia Dreamweaver 8 สามารถทจะสรางรหสค าสงใหกบผใชโดยอตโนมต ซงผใชไมจ าเปนตองมความรดานของภาษา HTML เนองจากโปรแกรม Macromedia Dreamweaver 8 นนจะมลกษณะ การท างานทคลายๆ กบโปรแกรมพมพเอกสารทเราเคยใชและรจกกนด ซงจะมเครองมอและแถบค าสงใหเราเลอกใชได เหมอนกบ Word Processor จงชวยใหสามารถเวบเพจดวยความสะดวก และรวดเรว

ความสามารถของ Macromedia Dreamweaver 8

สรางเวบเพจภาษาไทย รจกฟงกชนตาง ๆ ของ Macromedia

Dreamweaver

การก าหนดคา เพอใชในการสรางเวบเพจ ภาษาไทย

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

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

2

รจกฟงกชนตาง ๆ ของ Macromedia Dreamweaver ส าหรบฟงกชน ทเปนมาตรฐานในการ ท างานกบโปรแกรม Macromedia Dreamweaver ทมการใช งานบอยๆ กมอย 3

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

ประกอบไปดวย ชดเครองมอตางๆ คอ Characters , Common, Form, Frames, head, Invisible ฟงกชน Properties เปนฟงกชนลกษณะตางๆ เชน ใชในการก าหนดคาของขอความในเวบ สของตวหนงสอ รปภาพ

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

3

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

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

4

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

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

5

สวนประกอบของโปรแกรม 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 รปแบบดวยกนคอ

6

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

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

Show Design View ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบจรง การซอนและแสดงเครองมอออกแบบ การซอนและแสดงเครองมอออกแบบในโปรแกรม Dreamweaver 8 สามารถท าไดหลายวธดวยกน ดงนคอ วธท 1 โดยการคลกทค าสง Windows แลวคลกค าสงทตองการใชงาน วธท 2 โดยการคลกทปมลกศรเลก ๆ หนาแถบ Panel วธท 3 กดแปนพมพ <F4> เพอซอนหรอแสดงเครองมอทงหมด

7

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

8

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

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

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

9

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

10

การบนทก (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. ไฟลทตองการแกไขจะปรากฏขนมา

11

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

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

12

การใสขอความบนหนาเวบ การแทรกขอความในหนาเวบเพจ ผออกแบบเพยงแตพมพขอความทตองการลงไป หรออาจจะคดลอก (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 สามารถท าไดดงนคอ

13

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

14

ถาตองการใหวนทปรบเปลยนอตโนมตใหคลกเครองหมายถก ทหนาขอความ Update Automatically on Save

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

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

จากนนคลกเครองมอ

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

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