การใช้งาน Dreamweaver 8kmcenter.rid.go.th/kcitc/2009/files/51092322.pdf · บทที่ 2 รู จักกับ Macromedia Dreamweaver 8 2.1 สเปคเครื่องคอมพ

สารบญั

บทท่ี 1 ความรูเบื้องตนการใชงานอินเตอรเน็ต

1.1 คําศัพทท่ีเกี่ยวของ 1

1.2 HTML ภาษาพื้นฐาน 2

1.3 โครงสราง HTML พื้นฐาน 3

1.4 การวางแผนและออกแบบเว็บไซต 3

บทท่ี 2 รูจักกับ Macromedia Dreamweaver 8

2.1 สเปคเครื่องคอมพิวเตอรกอนการติดตั้ง 5

2.2 การเขาใชงานโปรแกรม Macromedia Dreamweaver 8 6

2.3 แนะนําโปรแกรม Macromedia Dreamweaver 8 8

บทท่ี 3 การจัดการ Website

3.1 การกําหนดใหหนาเว็บแสดงผลเปนภาษาไทย 12

3.2 การกําหนด Site 13

3.3 การสรางไฟลใหมใน Site 14

3.4 การกําหนดคณุสมบัติของหนาเว็บเพจ (Page Properties) 15

บทท่ี 4 การเพิ่มเน้ือหาลงในเว็บไซต

4.1 การปรับรูปแบบตัวอักษร 17

4.2 การแกไขและเพิ่มรายการของฟอนต 18

4.3 ขอจํากัดของการพิมพตัวอกัษร 20

บทท่ี 5 การเพิ่มภาพลงในเว็บไซต

5.1 การปรับรูปแบบตัวอักษร 21

5.2 การใสรูปภาพ 21

5.3 การปรับคาของรูปภาพ 23

5.4 การทํา Image Maps 24

5.5 การใส Flash ลงในเอกสาร 25

บทท่ี 6 การเช่ือมโยงเอกสาร

6.1 การอางถึงที่อยูของไฟลในการเชื่อมโยง 27

6.2 การสรางการเชื่อมโยงหรือ ลิงค 28

สารบญั

บทท่ี 7 การออกแบบเว็บเพจดวยตาราง (Table)

7.1 การเพิ่มตารางลงในเอกสาร 31

7.2 การปรับขนาดของตาราง 32

7.3 การกําหนดคณุสมบัติของตาราง 33

7.4 การกําหนดรูปแบบและเพิ่มสีสันใหกับตาราง 36

บทท่ี 8 การใชงาน Template

8.1 เกี่ยวกับ Template 40

8.2 การกําหนดพืน้ท่ีแกไขไดใน Template 40

8.3 การสราง Template 41

บทท่ี 9 การบริหารจัดการเว็บไซต

9.1 การบันทึกและดูโฮมเพจ 45

9.2 การตรวจสอบ Link ในเว็บไซต 45

9.3 การเชื่อมตอไปยังเว็บเซิรฟเวอรดวยโปรโตคอล FTP ใน Dreamweaver 46

การออกแบบและพัฒนาเว็บไซตดวย Macromedia Dreamweaver 8

เอกสารประกอบการอบรม จัดทําโดย กลุมงานสารสนเทศภูมิศาสตร ศูนยสารสนเทศ กรมชลประทาน

1

บทที่ 1

ความรูเบื้องตนการใชงานอินเตอรเน็ต

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

1.1 คําศัพทท่ีเก่ียวของ

อินเตอรเน็ต เปนเครือขายคอมพิวเตอรขนาดใหญท่ีเกิดจากการเชือ่มโยงเครือขายคอมพิวเตอร

ขนาดเล็กทั่วโลกเขาไวดวยกัน โดยคอมพิวเตอรแตละเครื่องที่เชื่อมโยงเขาดวยกันน้ันอาจจะใชอุปกรณ

หรือระบบปฏิบัติการท่ีแตกตางกันก็ได การท่ีเครื่องที่มีคุณลักษณะที่แตกตางกัน สามารถเชื่อมตอกันได

ก็เพราะมีการกําหนดมาตรฐานในการเชื่อมตอเขาหากัน ซึ่งมาตรฐานท่ีใชก็คือ TCP / IP (Transmission

Control Protocol and Internet Protocol)

อินเตอรเน็ตทําใหเราสามารถติดตอส่ือสารกับบุคคลอื่นๆ ท่ีเชื่อมตอกับอินเตอรเน็ตไดท่ัวโลก

ดวยขอดีดังกลาวน้ีจะทําใหการแลกเปลี่ยนขอมูล ขาวสารหรือ ความรูทําไดอยางกวางขวางและรวดเร็ว

มากข้ึน การเชื่อมตอเครื่องคอมพิวเตอรเขาสูอินเตอรเน็ตในเบ้ืองตนน้ันเราสามารถทําได 2 วิธคีือ

1. ทําโดยการใชโมเด็ม (Modem) เชื่อมตอผานสายโทรศัพทไปยังผูใหบริการอินเตอรเน็ต

หรือ

2. เชื่อมตอกับเครือขายยอยที่ทําการเชื่อมตอกับอินเตอรเน็ตอีกที ซึ่งวิธีนี้จะตองมีการดอีเทอร

เน็ต (Ethernet Card) หรือที่มักจะเรียกวา การดเน็ตเวิรค (Network Card) ในการเชื่อมตอกับเครือขาย

ยอย

WWW (World Wide Web) อาจเรยีกส้ันๆ วา เว็บ เปรียบเสมือนเปนหองสมุดขนาดใหญท่ี

รวบรวมขอมูลที่มากที่สุดในโลกก็วาได เราสามารถคนหาขอมูลที่ตองการไดเกือบทุกอยางจากบริการ

เว็บ ขอมูลในเว็บจะอยูในรูปแบบท่ีเรียกวา Hypertext และทําการเชื่อมโยง (Links) ขอความหรือ

รูปภาพ เขากับเอกสารอื่นๆ อยางเปนอิสระตอกัน ภาพหรือขอความท่ีแสดงบนหนาจอจะแสดงไดทีละ

หนา ซึ่งเรียกวา เพจ (Page) หรืออาจมีการเชื่อมโยงดวยการลิงค (Links) เพื่อคนหาขอมูลจากอีก

เพจหนึ่งที่อยูหางออกไปไกลๆได

เว็บไซต (Web Site) เปนแหลงที่เก็บขอมูลเอกสารทั้งหมด ซึ่ง WWW เปรียบเหมือน

หองสมุดขนาดใหญ ในขณะที่ Web Site จะเปรียบเสมือนหนังสือหนึ่งเลมในหองสมุดนั้น เราสามารถ

เลือกหยิบหนังสือเลมใดก็ไดในหองสมุดเว็บข้ึนมาอานโดยระบุชื่อหนังสือในลักษณะที่เรียกวา URL

(Universal Resource Locator - อานวา ยู อาร แอล) เชน เว็บไซตของกรมชลประทานมี URL หรือมี

ชื่อเปน www.rid.go.th เปนตน

เว็บเพจ (Web Page) คือ หนาเอกสารหน่ึงของไฟลเอกสาร

โฮมเพจ (Home Page) คือ เอกสาร HTML หนาแรกของเว็บไซตท่ีผูใชพบกอน ซึ่งเปนหนา

หลักเมื่อเปดเขาไปในเว็บไซตหนึ่งๆ ดวยการพิมพท่ีอยูของเว็บไซตลงในบราวเซอร และมีการเชื่อมโยง

ไปยังหนาอื่น ๆ ตอไป



2

เว็บบราวเซอร (Web Browser) โปรแกรมท่ีใชในการแสดงเว็บเพจหรือเอกสารประเภท

HTML โดยจะเปนตัวกลางท่ีทําหนาท่ีแปลงคําส่ังกอน แลวแสดงผลคําส่ังใหออกมาเปนรูปภาพ เสียง

และ ขอมูลตาง ๆ ตัวอยางบราวเซอรเชน Internet Explorer, Mozila Firefox และ Opera

DNS-Domain Name System คือ ระบบการตั้งชื่อบนอินเทอรเน็ต เนื่องจากเครื่อง

คอมพิวเตอรท่ีตอบนอินเทอรเน็ตนั้นมีอยูจํานวนมากมายจึงตองมีหมายเลขประจําเครื่อง ซึ่งหมายเลขนี้

เรียกวา IP ซึ่งจดจําไดยาก จึงไดมีวธิีการตั้งชือ่ใหจดจําและใชงานงาย และไดถูกกําหนดใหเปน

มาตรฐาน โดยแบงตามลําดับข้ันตามสภาพภูมิศาสตร เปนประเทศ ประเภทขององคกร และชื่อองคกร

เชน www.rid.go.th rid คือ ชื่อองคกร go คือ ประเภทองคกร th คือ ชื่อประเทศไทย

Domain ท่ีนิยมใชกันอยูในปจจุบัน เชน

.com = กลุมธุรกิจการคา (Commercial)

.edu = กลุมการศึกษา (Education)

.gov = กลุมองคกรรัฐบาล (Government)

ความหมายของ Sub Domain เชน

.co = องคการธุรกิจ (Commercial)

.ac = สถาบันการศึกษา (Academic)

.go = หนวยงานรัฐบาล (Government)

.or = องคกรอื่น ๆ (Organizations)

Domain Name ชื่อยอของประเทศ เชน

.th = Thailand .hk = Hong Kong

.jp = Japan .sg = Singapore

FTP (File Transfer Protocol) มาตรฐานในการสงผานขอมูลจากคอมพิวเตอรเครื่องหน่ึงไป

ยังอีกเครื่องหน่ึง เมื่อผูออกแบบไดสรางเว็บเสร็จแลว จะตองใชระบบ FTP นี้ในการอัพโหลดไฟล

ท้ังหมดไปเก็บบนเว็บเซิรฟเวอร

1.2 HTML ภาษาพื้นฐาน

HTML ยอมาจากคําวา Hypertext Markup Language เปนภาษาหลักที่ใชในการแสดงผลบน

เว็บบราวเซอรในอินเทอรเน็ต ภาษา HTML แบงออกเปน 2 สวน คือ สวนท่ีเปนขอความทั่วๆ ไป และ

สวนท่ีเปนคําส่ังที่ใชในการกําหนดรูปแบบของขอความที่แสดง ซึ่งเราเรียกวา แท็ก (Tag) โดยคําส่ัง

ของ HTML จะอยูในเครื่องหมาย < และ >

<คําส่ัง> ขอความ </คําส่ัง>

<TITLE> This is My Frist Page <TITLE>



3

1.3 โครงสราง HTML พื้นฐาน

เอกสาร HTML เปนเอกสารที่ประกอบไปดวยขอมูลที่เราตองการเผยแพรผาน WWW และภาษา

HTML ท่ีใชการกําหนดการแสดงผลของขอมูลดังกลาว

ภาษา HTML เปนภาษาท่ีอยูในรูปของ แทก (Tag) ท่ีใชหุมขอมูลท่ีเราตองการเผยแพรผาน

WWW ซึ่งการแสดงผลของเอกสาร HTML เราสามารถที่จะดูไดโดยใชโปรแกรมท่ีเรียกวา เว็บ

บราวเซอร (Web Browser)

โครงสรางพื้นฐานของเอกสาร HTML จะประกอบไปดวย 3 สวนดังนี้

1. สวนท่ีใชบอกจุดเริ่มตนและ ส้ินสุดของเอกสาร HTML คือ แทก <html>…..</html>

2. สวนหัวของเอกสาร HTML คือ แทก <head>………</head> ซึ่งเราจะแสดงหัวเรื่องของ

เอกสาร HTML ไวในสวนน้ี ภายในจะมีคําส่ังยอยอีกหนึ่งคําส่ัง คือ <TITLE> … </TITLE>

โดยใชชื่อหัวเรื่องของเว็บเพจ ซึ่งจะไปปรากฏอยูบน Title bar ของบราวเซอร

3. สวนท่ีใชบอกจุดเริ่มตนและ ส้ินสุดของสวนท่ีใชแสดงเน้ือหาคือ แทก <body>…</body>

<HTML>

<HEAD>

<TITLE> หัวขอเว็บเพจ <TITLE>

</HEAD>

<BODY>

สวนท่ีเปนเน้ือหา

</BODY>

</HTML>

1.4 การวางแผนและออกแบบเว็บไซต

เพื่อใหเว็บไซตท่ีเราสรางข้ึนสมบูรณและตรงตามที่ตองการ การวางแผนออกแบบเว็บไซตกอนท่ี

สรางเว็บไซตจึงเปนส่ิงที่จําเปน ซึ่งการวางแผนและออกแบบเว็บไซต มีข้ึนตอนตางๆ ดังตอไปนี้

1. กําหนดเปาหมายของเว็บไซตท่ีเราจะสราง

การกําหนดเปาหมายกอนท่ีเราจะสรางเว็บไซต ก็เพื่อที่จะชวยใหเราทราบถึงเนื้อหาตางๆที่

จะตองใช รูปรางหนาของเว็บไซต ความซับซอนของเว็บไซต และ เครื่องมือตางๆ ท่ีจะใชการพัฒนา

เวบ็ไซต ซึ่งจะทําใหการพัฒนาเว็บไซตของเราทําไดอยางรวดเร็วและ ถูกตองมากยิ่งข้ึน

2 กําหนดกลุมเปาหมายท่ีจะเขามาชมเว็บไซต

หลังที่เรากําหนดเปาหมายในการพัฒนาเว็บไซตแลว ตอมาเราก็จําเปนท่ีจะตองกําหนดกลุม

ของผูชมเว็บไซตดวย เนื่องจากผูท่ีเขามาชมเว็บไซตนั้นสามารถมาไดจากทุกมุมของโลก ดงันั้นเว็บ

บราวเซอรท่ีใชเปดเว็บไซต ความเร็วในการติดตอมายังเว็บไซต อาจจะแตกตางกันไดซึ่งการที่เราจะ

สรางเว็บไซตท่ีสามารถดไูดโดยผูชมทุกคนที่อยูในสภาพแวดลอมแตกตางกันน้ันเปนไปไดยาก



4

นอกจากนี้การกําหนดกลุมเปาหมายก็จะชวยใหการออกแบบเว็บไซตของเราทําไดอยางถูกตองและ

สมบูรณ

3 จัดโครงสรางเว็บไซต

การจัดโครงสรางเว็บไซตเราทําเพื่อที่จะใหไฟลตางๆ ท่ีใชในเว็บไซตถูกจัดเก็บเปนสัดสวน

และ คนหาไดงายข้ึน ถาเราไมมีการจดัโครงสรางกอนท่ีจะสรางเว็บไซตแลว อาจจะทําใหมีไฟลท่ี

ซ้ําซอนกันอยูในเว็บไซตได และการคนหาไฟลก็ทําไดยาก ในเบ้ืองตนเราสามารถท่ีจะจัดโครงสราง

เวบ็ไซตของเราในฮารดดิสกในเครื่องคอมพิวเตอรท่ีเราทํางานอยูได หลังจากที่เราจัดโครงสรางเสร็จ

เรียบรอยแลวก็ทําการอัพโหลด (Upload) ไฟลตางๆ ท่ีใชในการสรางเว็บไซตไปเก็บไวในเว็บเซิรฟเวอร

เมื่อเราตองการท่ีจะใหผูอื่นมาชมเว็บไซตของเรา

4 ออกแบบหนาตาเว็บไซต

หนาตาเว็บไซตของเราน้ันควรจะออกแบบโดยใหองคประกอบตางๆ ในแตละหนาอยูบริเวณ

เดียวกัน อยางเชน เมนูท่ีใชเชื่อมโยงไปยังหนาหลักของเว็บไซต ถาเราวางไวทางซายในเว็บเพจแลวก็

ควรจะวางเมนไูวตําแหนงดังกลาวในทุก ๆ หนาของเว็บไซต การออกแบบหนาตาของเว็บไซตเราอาจจะ

ใชโปรแกรมท่ีใชวาดรูป ตกแตงรูป เชน Photoshop ในการวางองคประกอบตางๆ ในเว็บเพจก็ได

นอกจากที่เราจะเขียนลงในกระดาษ

5 สรางและ รวบรวมไฟลตางๆ ท่ีใชในการสรางเว็บเพจ

กอนจะสรางเวบ็ไซต เราควรจะสรางและรวบรวมไฟลตางๆไมวาจะเปนรปูภาพ ภาพเคลื่อนไหว

หรือ ไฟลเสียงที่ใชในการสรางเว็บเพจใหครบเสียกอน เพราะวาถาในขณะท่ีเรากําลงัสรางเว็บไชตเกิด

พบวาไมมีไฟลบางตัวท่ีเราตองการใชก็อาจจะทําใหเราตองเสียเวลาในการคนหาหรือ สรางข้ึนใหม ซึ่ง

จะทําใหการสรางเว็บไซตเปนไปไมตอเนื่องและลาชาได ใน Dreamweaver 8 เราสามารถที่จะสราง

แมแบบท่ีใชในการสรางเว็บเพจในแตละหนาได ซึ่งเราเรียกแมแบบดังกลาววา เทมปเพลต (Template)

เราจะสรางเทมปเพลตก็ตอเมื่อ เราพบวาในเว็บไซตของเรามีเว็บเพจหลายหนาท่ีมีการวางองคประกอบ

ของเนื้อหาในบางสวนเหมือนกัน เราจะใชสวนท่ีเหมือนกันมาสรางเปนเทมปเพลตไว เมื่อใดก็ตามท่ีเรา

ตองการสรางเว็บเพจท่ีมีการจัดวางองคประกอบเหมือนกับเว็บเพจเดิมท่ีมีอยู เราก็ใชเทมปเพลตที่เรา

สรางไวในการสรางเว็บเพจใหมและ แกไขบางสวนท่ีตองการ ซึ่งการใชเทมปเพลตจะชวยใหเราสรางเว็บ

เพจไดงายข้ึนและ เมื่อใดท่ีมีการแกไขเทมปเพลต เว็บเพจท้ังหมดที่ถูกสรางจากเทมปเพลตดังกลาวก็

จะเปลี่ยนแปลงดวย ทําใหเราไมตองแกไขเว็บเพจทุกหนาๆ ท่ีใชเทมปเพลตดังกลาวดวยตัวเอง ซึ่งจะ

ทําใหเวลาท่ีใชในการพัฒนาเวบ็เพจ นอยลง



5

บทที่ 2

รูจักกับ Macromedia Dreamweaver 8

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

Dreamweaver เปนโปรแกรมเครื่องมือในการสรางเอกสารอินเตอรเน็ต ประเภท Web Design

ซึ่งมีคุณสมบัติในการใชงานในแบบ WYSIWYG (What You See Is What You Get) คือ เราสรางอะไร

บนหนาจอ Dreamweaver ก็จะปรากฏผลแบบเดียวกันท่ีเว็บเพจ ทําใหงายตอการใชงาน การใชงาน

ของโปรแกรมจะอํานวยความสะดวกใหกับการสรางเอกสารบนอินเตอรเน็ตหรือ Webpage เปนอยางมาก

เนื่องจากไมจําเปนตองมานั่งเรียนรู Code ของ HTML (แตหากผูใชมีความรูเกี่ยวกับภาษา HTML ก็จะ

เปนประโยชนใหเขาใจหลักการทํางาน การสราง รวมถึงการแกไขไดอยางละเอียด) เพียงแคลากสวน

ตางๆ เขามาประกอบกัน ก็สามารถสราง Website ได

โปรแกรม Macromedia Dreamweaver เริ่มเปนท่ีรูจักกันตั้งแตเวอรชัน 3.0 และเปนท่ี

แพรหลายและนิยมใชกันอยางสุดๆ ในเวอรชัน 4.0 หลังจากนั้นก็ไดรับการพฒันาอยางตอเนื่องมาเปน

เวอรชัน 6 หรือ Dreamweaver MX, เวอรชัน 7 หรือ Dreamweaver MX 2004 มาถึง Dreamweaver 8

และในปจจุบันท่ีออกมาลาสุด (2008) คือ Adobe Dreamweaver CS3

ในปจจุบันโปรแกรม Dreamweaver นอกจากจะสนับสนุนการใชงานกับภาษา HTML แลว ยัง

สนับสนุนการใชงานรวมกับเทคโนโลยีทางดานเว็บเพจอื่นๆ ดวย เชน CSS และ จาวาสคริปต เปนตน

การสรางเว็บแอปพลิเคชั่น (Web Application) ดวยโปรแกรม Dreamweaver นั้น ก็สามารถทําได

อยางสะดวกและรวดเร็วมากยิ่งข้ึน ดวยเครื่องมือตางๆ ท่ีโปรแกรมมีใหทําใหเราสามารถที่จะสราง การ

ติดตอกับฐานขอมูล และ ดึงขอมูลจากฐานขอมูลโดยไมจําเปนท่ีตองเขียนโคดของเซิรฟเวอรสคริปต

(Server Script) เลย ตัวโปรแกรมจะสรางใหเองโดยอัตโนมัติ ซึ่งจะทําใหเวลาท่ีใชในการพัฒนาเว็บ

แอปพลิเคชั่นน้ันนอยลง

2.1 สเปคเคร่ืองคอมพิวเตอรกอนการติดตั้ง

ตามขอกําหนดของบริษัท Macromedia ผูผลิตโปรแกรม Dreamweaver 8 กําหนดไววา สเปค

เครื่องข้ันต่ําสําหรับผูใชงานระบบปฏิบัติการ Windows ดังนี้

• เครื่องคอมพิวเตอร Pentium lll 800MHz ข้ึนไป

• Windows 2000 หรือ Windows XP

• หนวยความจํา RAM 256 MB ( ควรเปน 1 GB)

• เนื้อที่วางในฮารดดิสกอยางนอย 650 MB

• หนาจอคอมพวิเตอรควรปรบัใหมีความละเอียด 1024*768 เปนอยางนอย



6

2.2 การเขาใชโปรแกรม Macromedia Dreamweaver 8

1. คลิกที่ ปุม Start => Programs => Macromedia => Macromedia Dreamweaver 8

หรือจะเรียกจากหนาจอ Desktop ท่ีตอนติดตั้งไดสรางเอาไว

2. เขาสูโปรแกรม Macromedia Dreamweaver 8

เมื่อเขาสูโปรแกรมครั้งแรก จะปรากฏกรอบใหเราเลือกแบบของพื้นท่ีทํางาน (Workspace

Setup)

- Designer เปนพื้นท่ีทํางานแบบรวม ซึ่งรวมเอาหนาตางเอกสารและแผงควบคุมทั้งหมดไวใน

หนาตางขนาดใหญ โดยมีกลุมของแผงความคุมอยูทางขวามือ ซึ่งเหมาะสําหรับผูใชท่ัวไป

- Coder เปนพื้นท่ีทํางานแบบรวมเชนเดียวกัน แตจะแสดงเฉพาะ code ของคําส่ังตาง ๆ เหมาะ

สําหรับผูท่ีตองการแทรก code ของคําส่ังตาง ๆ เอง (ผูท่ีชํานาญในการเขียนภาษา html)



7

ในท่ีนี้ใหคลิกเลือก Designer แลวคลิก OK เพื่อเขาสูหนาจอการออกแบบของโปรแกรม

Macromedia Dreamweaver 8 เพราะเหมาะสําหรับผูเริ่มใชงาน หรือผูใชท่ัวไป

3. จากนั้นจะปรากฏหนาจอ Start Page ซึ่งเปนเครื่องมือสําหรับเริ่มตนการทํางาน โดย

ตัวเลือกจะแบงเปน 3 กลุมดังรูป สําหรับการสรางเว็บเพจเปลาแบบพื้นฐาน ใหเลือกกลุม Create New

แลวคลิกที่ HTML

1. เปดงานเกาท่ีเคยสรางไวแลว (Open a Recent Item) เปนสวนแรกท่ีใชสําหรับ

เปดงานเกาท่ีเราเคยสรางเอาไวแลว โดยโปรแกรมจะแสดงรายชื่อไฟลเหลาน้ันข้ึนมาให แตในตัวอยางนี้

เปนการเปดโปรแกรมข้ึนมาเปนครั้งแรก และยังไมเคยสรางงานใดๆ ไวกอนหนาน้ีเลย จึงทําใหไมมีชื่อ

ไฟลใดๆปรากฏข้ึนมาในสวนน้ี

2. สรางงานใหม (Create New) ในสวนน้ีใชสําหรับสรางงานใหม ซึ่งสามารถเลือก

สรางไฟลงานไดหลายชนิด ไมวาจะเปนหนาปกติ (HTML) ไฟลสคริปตภาษาตางๆ อาทิ PHP , ASP ,

JavaScript , หรือ JSP

3. สรางงานสําเร็จรูป (Create from Samples) นอกจากคุณจะสรางงานข้ึนมาเอง

แลว อีกทางเลือกหนึ่งที่โปรแกรมจัดเตรียมเอาไวก็คอื รูปแบบเว็บสําเร็จรูป หรือที่เรียกกันวา เท็มเพลต

(Template) ซึ่งมีใหเลือกมากมายหลายประเภท ชวยใหสรางเว็บไซตไดเร็วข้ึนและสวยงาม โดยเลือก

จากโปรแกรมเตรียมไว



8

2.3 แนะนําโปรแกรม Macromedia Dreamweaver 8

• แถบแสดงช่ือ (Title Bar) เปนแถบท่ีอยูบนสุดของโปรแกรม แสดงชื่อโปรแกรม Macromedia

Dreamweaver 8 และชื่อไฟลหนาเว็บท่ีกําลังทํางานอยู ถายังไมไดบันทึกจะมีเครื่องหมาย * ปรากฏอยู

หลังชื่อ ในตัวอยางยังไมไดบันทึกจึงเปนชื่อ Untitled Document อยู

• แถบคําสั่ง (Menu bar) เปนแถบท่ีใชเก็บคําส่ังทั้งหมดของโปรแกรม

• Insert Bar เปนแหลงรวมเครื่องมือซึ่งใชในการแทรกองคประกอบตางๆ หรือที่เรียกวา

ออบเจ็กต ซึ่งสามารถใสลงในหนาเว็บเพจ ไมวาจะเปนขอความ , รูปภาพ , ลิงค , Rollover Image ,

Flash , รูปเคลื่อนไหว โดยแบงออกเปนหมวดหมูเพื่อใหใชงานไดสะดวก สามารถเลือกประเภทคําส่ังได

ดวยการคลิกที่

หากเราเลือกการแสดงผลแบบ Show as Table จะเปนการแสดงเครื่องมือดังนี้

Menu Bar Insert Bar Document

Document Window

Panel

Status Bar Property



9

สรุปรายละเอียดของแตละหมวดหมูไดดังน้ี

Common ใชแทรกออบเจ็กตพื้นฐานท่ีใชกันท่ัวไปหรือใชงานบอย อยางเชน รูปภาพ, ตาราง,

Rollover Image

Layout เครือ่งมือที่ใชเลือกมุมมองในการสรางเว็บเพจ อยางเชน มุมมองปกติ หรือ มุมมอง

ขยายเพื่อใหเห็นออบเจ็กตตางๆ ท่ีคุณวางลงไป และองคประกอบในการสรางเฟรมไดชัดเจนข้ึน

Forms ใชแทรกออบเจ็กตท่ีใชในการสรางฟอรมรับขอมูล อยางเชน ชองรับขอความ ปุมตัวเลือก

แบบตางๆ

Text เครื่องมือในการปรับแตงรูปแบบตัวอักษรและขอความ อยางเชน ทําใหเปนตัวหนา ตัวเอียง

จัดยอหนา จัดหัวขอ (Head) หรือแทรกอักขระพิเศษ อยางเชน $ , “ “ , เครื่องหมาย Copyright ©

HTML ใชแทรกภาษา HTML ท่ีสําคัญๆ เขาไปในหนาเว็บ

Application กลุมเครื่องมือที่ใชงานดานการเขียนสคริปต อยางเชน ASP , PHP , JSP มักใช

รวมกับฐานขอมูล

Flash Elements เปนเครื่องมือที่ใชในการแทรกไฟล Flash ลงในหนาเว็บ

• Document Toolbar เปนแถบเครื่องมือของหนาตางพื้นท่ีการทํางาน



10

จากรูปหนาตางยังไมไดถูกบันทึกจึงมีชื่อวา Untitled-1 เมื่อเปดไฟลหลายๆ ไฟลเพื่อทํางาน

ทุกไฟลท่ีเปดอยูจะอยูในโปรแกรมเดียวโดยทําเปน Tab ไวดานบนจะเลือกใชไฟลใดก็กดที่ Tab นั้น

แถบเคร่ืองมือน้ีประกอบดวยสวนตาง ๆ ดังน้ี

1. Document Window อยูดานลางของ Document Toolbar เปนสวนท่ีใชแสดง

เนื้อหาของเว็บเพจท่ีเราสรางข้ึนและ กําลังทํางานอยูในขณะน้ัน เลือกได 3 ลักษณะดังนี้คือ

Show Code View คลิกเพื่อดู Code

ภาษา HTML ท้ังหมดของไฟล

Show Code and Design คลิกเพือ่ดู

Code ภาษา HTML และดูรูปแบบเหมือนจริงของ

เว็บเพจ โดยแบงครึ่งหนาจอในการแสดงผล

Show Design View คลิกเพื่อดู

รูปแบบเหมือนจริงของเว็บเพจ

2. สวนสําหรับใส Tile ของเว็บเพจ

3. สวนการ Preview เปนการดูรูปรางหนาตาท่ีไดออกแบบบนเว็บ Browser ในท่ีนี้คือ

Internet Explore หรือกดปุม F12



11

• แถบสถานะ (Status bar)

• สวนของ Properties (Properties Inspector) เปนการแสดงสถานะของ Object หรือ

Tag ตางๆ โดยจะคอยติดตามการทํางาน ท้ังนี้ก็เพื่ออํานวยความสะดวกใหทํางานไดงายข้ึน เชน ถา

Click ท่ีรูปภาพก็จะเปลี่ยนสถานะเปน Image Inspector แสดงขอมูลของรูปภาพน้ัน แตถา Click ท่ี link

ก็จะแสดงขอมูลของ link นั้น โดยสามารถแกไขคาตางๆ ของ Object หรือ Tag ตางๆ ไดงาย ถาหากไม

ตองการใชงานสามารถ ยอเก็บไดโดยคลิกที่

Panel Group เปนหนาตางท่ีใชควบคุมการทํางานในดานตางๆ แบงตามหนาท่ีการใชงาน ดังนี้

1. CSS การใสลูกเลนตางๆ เพิ่มเติมสีสันใหกับเว็บเพจ

2. Application เปนการจัดการดาน Programming

3. Tag Inspector การจัดการเกี่ยวกับ Tag ตางๆ

4. Files จัดการเกี่ยวกับไฟลท้ังหมดใน Site การ Uploadไฟล

เขาสู Server



12

บทที่ 3

การจัดการเว็บไซต

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

เนื่องจากในการทําเว็บไซตหนึ่งๆนั้น จะประกอบไปดวยหนาโฮมเพจหลายๆ หนา มีไฟลจํานวน

มาก และแตละหนาก็จะมีลิงคเชื่อมโยง มีเนื้อหาท่ีตอเนื่องถึงกันอยู ดังนั้นเพื่อไมใหเกิดความสับสน

ผิดพลาด Dreamweaver จึงมีเครื่องมือที่มีคุณสมบัติในการบริหารจัดการเวบ็ไซต ซึ่งจะชวยในการ

ทํางานไดเปนอยางดี

3.1 การกําหนดใหหนาเว็บแสดงผลเปนภาษาไทย

เปนการกําหนดคุณสมบัติหนาเว็บเพจท่ีไดสรางข้ึนมา ใหสามารถแสดงผลเปนภาษาไทยได

ซึ่งจะกําหนดครั้งแรกหลังจากที่ไดติดตั้งโปรแกรมเสร็จแลวเทาน้ัน สามารถทําไดดังนี้

1. คลิกเลือกเมนู Edit => Preferences

2. กําหนดใหหนาเว็บแสดงภาษาไทย โดยการกําหนดภาษาและชุดตัวอักษร ดังนี้

- ชอง Category คลิกเลือก Fonts

- กําหนดชุดตัวอักษร (Font settings) ใหเลือก Thai

- Proportional font : เลือก Cordia New Size : 14 pt (Larger)

- Fixed font : เลือก Courier New Size : 14 pt (Larger)

- Code view : เลือก Cordia New Size : 14 pt (Larger)



13

3. และกําหนดใหหนาเว็บท่ีสรางข้ึนใหมเปนภาษาไทยทุกครั้ง ใหกําหนดคาดังนี้

3.2 การกําหนดไซต (Site)

กอนท่ีเราจะสราง Web Page จะตองกําหนด Site เพื่อความสะดวกในการสรางและจัดการ

เกี่ยวกับไฟลตาง ๆ ท่ีเราจะสรางข้ึนตอไป ซึ่ง Site ท่ีจะกําหนดน้ัน เปนการสราง Folder บนเครื่องที่เรา

ใชงานอยูนั่นเอง ดังนั้นผูใชงานควรจะกําหนดชื่อไซตพรอมกับระบุตําแหนงที่ตั้งหรือโฟลเดอรของไซต

นั้นๆ กอนเสมอ ไมวาเว็บไซตจะมีเพียงโฮมเพจเพียงหนาเดียว หรือหลายหนาก็ตาม โดยขั้นตอนในการ

กําหนดไซต มีดังตอไปนี้

1. คลิกเมนู Site => New Site…

2. คลิกที่ Tab Advanced เพือ่กําหนดชื่อพรอมที่ตั้งของไซต

- ใสขอมูลตรงชอง Site Name เพื่อตั้งชื่อ Site

- Local root folder ใหคลิกปุม เพื่อกําหนดท่ีตั้งสําหรับเก็บไฟลเว็บ

- Default images folder ใหคลิกปุม เพื่อกําหนดท่ีตั้งสําหรับเก็บไฟลรูปภาพ



14

3. หลังจากคลิกปุม Ok แลวจะกลับมาสูหนาการทํางานของโปรแกรม โดย Site ท่ีผูใชงานสราง

ไวสามารถดูไดจากหนาตางดานขวามือสวนของ Files จะแสดงรายละเอียดของไฟล โฟลเดอรตางๆ

3.3 การสรางไฟลใหมใน Site

การสรางไฟลเอกสารไฟลใหม ทําไดโดยการ Click เมาสขางขวา ท่ี Site => New File

หรือสามารถทําไดโดย คลิกที่เมนู File => New File เลือกแบบ HTML => คลิก Create

เว็บเพจหนาแรกของเว็บไซต

ควรตั้งช่ือ File เปน index.html

หรอื index.htm เสมอ เพราะ

Browser จะอาน File index.html กอน

เปนอันดับแรก และหลังจากน้ันถึงจะ

Link ไปยัง File งานอ่ืน ซึ่งจะตั้งเปนชื่อ

อะไรก็ได โดยมีนามสกุลเปน .html

หรือ .htm



15

3.4 การกําหนดคุณสมบัติของหนาเว็บเพจ (Page Properties)

เพื่อใหการสรางเพจเปนไปดวยความรวดเร็ว เราควรกําหนดคณุสมบัติใหกับเว็บเพจของเรา

เสียกอน เพื่อเปนการกําหนดคุณสมบัติเบ้ืองตนของเว็บเพจน้ัน สามารถทําไดโดย คลิกเมนู Modify

เลือกคําส่ัง Page Properties จะปรากฏหนาจอใหมข้ึนมา ดังนี้

Appearance: คุณสมบัติท่ัวไป

- Left margin , Right margin , Top margin , Bottom

margin เปนการกําหนดระยะหางของ Webpage ท่ีเรา

ออกแบบกับขอบของ Browser

- Page font กําหนดรูปแบบตัวอักษร

- Size กําหนดขนาดตัวอักษร

- Text Color กําหนดสีตัวอักษร

- Background color กําหนดสีของพื้น

หลังของเพจ

- Background image ใหคลิกที่ปุม

Browse เพื่อเลือกรูปภาพมาเปนพื้น

หลังของ webpage เรา (ในกรณีท่ี

ตองการใชพื้น Background เปน

รูปภาพ)

Link: คุณสมบัติการเชื่อมโยง

- Link font กําหนดรูปแบบอักษรท่ีจะ

สรางจุดเชื่อมโยง

- Size กําหนดขนาดตัวอักษรท่ีจะสราง

จุดเชื่อมโยง

- Link color, Rollover links, Visited

links, Active links กําหนดรูปแบบสี

ของขอความท่ีเปนจุดเชื่อมโยง

- Underline style กําหนดลักษณะของ

เสนใตขอความที่จุดเชื่อมโยงวาจะใหมี

ลักษณะอยางไร



16

Heading: หัวขอของเว็บเพจ

ใชกําหนดรูปแบบอักษร ขนาดของหัวขอที่

จะใสในเพจวาควรจะมีขนาดเทาไรและมีสี

อะไร ซึ่งใน Dreamweaver ไดเตรยีม

หัวขอที่เราจะกําหนดมีระดบัแตกตางกัน 6

ระดับ

Title/Encoding: ชื่อของเว็บเพจ และรหัสภาษา

- Title ใชเพื่อพิมพคําบรรยาย

Webpage ท่ีตองการใหปรากฏท่ี Title

Bar ของ Browser

- Encoding การกําหนดคา CODE ใน

การแสดงผลของภาษา ซึ่งเราตองกําหนด

เปน Thai (Windows) เทาน้ัน จึงจะ

สามารถแสดงภาษาไทยในสวนของการ

เขียนโปรแกรมได

การกําหนดชือ่เว็บเพจสามารถกําหนดท่ี Title ท่ี Page Properties หรือจะพิมพ

Title ท่ีสวนของDocument and Toolbar ก็สามารถทําไดเชนกัน

Tracing Image: ชื่อของเว็บเพจ และรหัสภาษา

- Title ใชพิมพคําบรรยาย Webpage ท่ี

ตองการใหปรากฏท่ี Title Bar ของ

Browser

- Encoding การกําหนดคา CODE ใน

การแสดงผลของภาษา ซึ่งเราตองกําหนด

เปน Thai (Windows) เทาน้ัน จึงจะ

สามารถแสดงภาษาไทยในสวนของการ

เขียนโปรแกรมได



17

บทที่ 4

การเพิม่เน้ือหาลงในเว็บไซต

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

การพิมพตัวอกัษรและขอความใน Dreamweaver เหมือนกับการใช Microsoft Word สามารถ

พิมพเขาไปในหนา Document ไดเลย และลอง Preview ดูโดยการกด F12 (เปนการจําลอง Browser)

เราจะเห็นไดวา ตัวอักษรท่ีพิมพจะเหมือนกันกับท่ี Preview ทุกประการ

4.1 การปรับรูปแบบตัวอักษร

การปรับรูปแบบตัวอักษรสามารถทําได โดยใช Properties Inspector Tool

Format เปนรูปแบบของอักษรสามารถเลือกไดตามตองการ

- รูปแบบ Paragraph การพิมพแบบตอเนื่อง

ใน Dreamweaver จะใชปอปอัพเมนู Format ใน Property Inspector หรือ เลือก เมนู

Text => Paragraph ในการกําหนดรูปแบบยอหนาหรือ หัวเรื่อง โดยขั้นตอนการกําหนดรูปแบบยอหนา

หรือ หัวเรื่องมีดังนี้

1. คลิกเมาปุมซายบริเวณขอความที่ตองการกําหนดรปูแบบยอหนาหรือ หัวเรื่อง

2. เลือกรูปแบบยอหนาและ หัวเรื่องที่ตองการในปอปอัพเมนู Format

3. เมื่อตองการยกเลิกรูปแบบท่ีใชใหเลือก none ในปอปอัพเมนู Format

- Heading 1-6 การพมิพหัวขอเรื่องตามขนาด Heading 1 เปนขนาดใหญท่ีสุดเรียง

ตามลําดับเปนการใชเลือกกอนพิมพ แตถาพิมพไปแลวจะใชไดโดยการ Click Mouse คางแลวปายท้ัง

ขอความที่ตองการจากนั้นมาเลือกที่ Properties => Format ตัวอักษรก็จะเปลี่ยนตาม สวนตัวอักษรท่ี

ไมไดเลือกก็จะไมมีการเปลี่ยนแปลง

Font ในหนา Document เดียวกันเราสามารถใช

ตัวอักษรหลายแบบโดย Click ท่ีลูกศรในชองDefault Font จะ

มี Font อื่นใหเลือก (คา Default Font จะเปน Font ท่ีไดทําการ

Set ไวในตอนตน ซึ่ง Font ท่ีนิยมใชและสามารถอานภาษาไทย

ไดคือ Ms Sans Serif, Verdana ซึ่งสามารถกําหนด Font ได

มากกวา 1 Font)



18

4.2 การแกไขและ เพิ่มรายการของฟอนต

เราจะใชคําส่ัง Edit Font List ในการแกไขและ เพิ่มรายการของฟอนต ท่ีแสดงในปอปอัพเมนู

Font ของ Property Inspector และ เมนู Text => Font ซึ่งรายการของฟอนตจะใชในการกําหนดการ

แสดงผลของขอความในเว็บเบราเซอร การแกไขและ เพิ่มรายการของฟอนตมีข้ันตอนดังนี้

1. คลิกที่ Edit Font List … หรือเลือกจากเมนู Text => Font => Edit Font List จะ

ปรากฎไดอะล็อก Edit Font List

2. เลือกรายการฟอนตจากชองรายการที่อยูดานบนสุดของไดอะลอก หลังจากที่เลือกแลวจะ

ปรากฏรายการของฟอนตท่ีเลือกในชองที่อยูทางมุมซายของไดอะลอก เมื่อตองการท่ีจะเพิ่มหรือลบ

ฟอนตในรายการใหคลิกที่ปุม << และ >> ตามลําดับ แตถาตองการท่ีจะลบทั้งรายการฟอนตก็ใหคลิก

ท่ีปุม – และ คลิกที่ปุม + เมื่อตองการเพิม่รายการฟอนตใหม

3. ถาไมมีรายการฟอนตท่ีตองการในระบบก็สามารถท่ีจะเพิ่มเองไดพิมพชื่อฟอนตท่ีตองการเพิ่ม

ในรายการฟอนตในชองที่อยูทางมุมขวาลางของไดอะลอก

4. หากตองการใหเว็บไซทใชภาษาไทยได แนะนําใหสรางรายการ Font ท่ีมี Font MS Sans

Serif, Tahoma อยู เพราะ Font ท่ีกลาวไปนั้นจะเปน Font ท่ีเมื่อตั้งคาใหมีขนาดเล็กแลวก็ยังจะสามารถ

อานออกไดชัดเจน แต Font ไทยอื่นๆเชน Angsana หรือ Cordia ก็สามารถใชไดเหมือนกัน แตท่ีไม

แนะนําเพราะ Font พวกนี้ เมื่อตั้งคาใหตวัเล็กแลว จะทําใหอานยากและไมคอยมีความสวยงาม และ ไม

แนะนําใหใช Font ภาษาไทยที่ใชเพื่อออกแบบดาน Graphic เชนพวก DSS, PSL, JS, ฯลฯ เพราะ Font

บนเว็บไซทจะเปนเพียงดึง Font ท่ีมีอยูในเครื่องของผูใชมาแสดง หากเครื่องไหนไมมี Font พวกนี้ก็จะ

ไมสามารถแสดงออกมาได

การจัดวางขอความ

การกําหนดการจัดวางขอความเราสามารถกําหนดไดใน Property Inspector หรือ เลือกเมนู

Text => Align โดยข้ันตอนการกําหนดการจัดวางขอความมีดังนี้

1. เลือกขอความที่ตองการหรือ คลิกเมาปุมซายหนาขอความที่ตองการกําหนดการจัดวาง

2. เลือกไอคอน Align ไอคอนใดไอคอนหนึ่งใน Property Inspector หรือ

เลือกเมนู Text => Align โดยการจัดวางที่เลือกไดมี ชิดซาย กึ่งกลาง ชิดขวาและ กระจาย



19

การเยื้องยอหนา (Indent)

การกําหนดเย้ืองยอหนามีข้ันตอนดังนี้

1. คลิกเมาปุมซายบนยอหนาท่ีเราตองการกําหนดเยื้องยอหนาไปทางขวา

2. ใน Property Inspector คลิกที่ไอคอน Indent เมื่อตองการเยื้องยอหนาไปทางขวา

หรือ เลือกเมนู Text => Indent

3. ถาเราตองการเยื้องยอหนามาทางซาย ใน Property Inspector คลิกที่ไอคอน Outdent

หรือ เลือกเมนู Text => Outdent

การเปล่ียนสีขอความ

การเปลี่ยนสีขอความทําโดยเลือกขอความที่ตองการเปลี่ยนสีแลว กรอกรหัสสีท่ีตองการในชอง

Color หรือ คลิกที่ไอคอนรูปส่ีเหลี่ยมที่อยูหนาชองกรอกรหัสสี ใน Property Inspector จะปรากฏ

พาเนล Color ใหเราเลือกสีท่ีตองการ ในพาเนลจะประกอบไปดวยตารางสี และ ไอคอนที่ใชกําหนด

ออฟชั่นและ สีมาตรฐาน เลือกสีท่ีตองการ เมื่อเลือกแลวในชองรหัสสีก็จะปรากฏรหัสของสีท่ีเราเลือก

Size ขนาดของตัวอักษร คลิกที่

การใชตัวหนา และตัวเอน ตัวหนา Click ท่ี และตัวเอน Click ท่ี

การใชหัวขอยอย จะเปนจุด หรือตัวเลข ก็ได

การสรางรายการแบบมีหัวขอ

เราสามารถที่จะสรางรายการแบบมีหัวขอจากขอความที่มีอยูได โดยขั้นตอนการสรางรายการ

แบบหัวขอมีดังนี้

การสรางรายการแบบมีหัวขอใหม

1. กําหนดจุดเพิ่มรายการใน Document Window

2. คลิกที่ไอคอน List เมื่อตองการสรางรายการแบบมีหัวขอที่ไมมีลําดับ หรือ ไอคอน

เมื่อตองการสรางรายการแบบมีหัวขอที่เรียงลําดับ ใน Property Inspector หรอื เลือกเมนู Text =>

List

3. พิมพขอความท่ีตองการแลวกดปุม Enter



20

4. เมื่อตองการจบการสรางรายการแบบมีหัวขอใหกดปุม Enter 2 ครัง้

การสรางรายการแบบมีหัวขอจากขอความเดิมท่ีมีอยู

1. เลือกกลุมของยอหนาท่ีตองการสรางรายการแบบมีหัวขอ

2. คลิกที่ไอคอน List เมื่อตองการสรางรายการแบบมีหัวขอที่ไมมีลําดับหรือ ไอคอน

เมื่อตองการสรางรายการแบบมีหัวขอที่เรียงลําดับ ใน Property Inspector หรอื เลือกเมนู Text =>

List

4.3 ขอจํากัดของการพิมพตัวอักษร

เนื่องจากการพิมพไมสามารถเวนวรรคตัวอักษรไดเกินหน่ึงตัวอักษร จึงตองมีการเพิ่ม Code

ลงในโปรแกรม คือ คําส่ัง สําหรับการเวนวรรค 1 ตัวอักษร

หรือคลิกจากแท็บ Text และเลือก Non-Breaking Space

การข้ึนบรรทัดใหมโดยการเคาะ Enter ในโปรแกรมจะเปนการเวน 2 บรรทัด ถาหากตองการ

เวนหน่ึงบรรทัดสามารถทําไดโดยการกด Shift + Enter



21

บทที่ 5

การเพิม่ภาพลงในเว็บไซต

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

ในการสราง Webpage ท่ีจะขาดไมไดนอกจากตัวหนังสือแลว รูปภาพก็เปนส่ิงจําเปน การจะ

นําไฟลรูปภาพตาง ๆ เขามาใชงานภายใน Webpage เราควรคํานึงถึงอยู 2 – 3 ประการดวยกัน คือ

1. ประเภทของไฟลรูปภาพ เราควรจะใชเปนนามสกุล *.gif หรือ *.jpg หรือ *.png จึงจะ

เหมาะสมกับงานบน Website หากไฟลรปูภาพประเภทอื่น ๆ เชน *.bmp จะมีขนาดของไฟลใหญจะทํา

ใหการแสดงผลชา

2. ขนาดของไฟลรูปภาพ (ไมใชขนาดของรูปภาพ) ควรมกีาร Optimize กอนนํามาใชงาน

โดยอาจใชโปรแกรม Firework หรือ Photoshop ชวย

3. อยาใสรูปภาพใหมากเกินไป ควรมีการใชงานรูปภาพเทาท่ีจําเปน

5.1 ลักษณะของรูปภาพแตละประเภท

GIF (Graphic Interchange Format)

เปนไฟลภาพท่ีใชสีสูงสุดไดเพียง 256 สี ซึ่งจะเหมาะกับภาพท่ีมีสีเรียบๆ อยางเชน ภาพปุม

ไอคอนหรือ ภาพการตูน เปนตน

JPG (Joint Photographic Experts Group)

เปนไฟลภาพท่ีใชสีสูงสุดไดหลายลานสี ซึ่งจะเหมาะกับภาพท่ีมีการไลเฉดสีมากๆ อยางเชน

ภาพถายหรือ ภาพสามมิต ิเปนตน

PNG (Portable Network Group)

เปนไฟลภาพท่ีสามารถนํามาใชแทนไฟลภาพชนิด GIF ไดซึ่งสนับสนุน indexed-cololr,

grayscale และ true-color image และ มี alpha channel ซึ่งสนับสนุนการทําภาพโปรงใส ไฟลภาพ

PNG ถือวาเปนไฟลพื้นฐานในการทํางานของโปรแกรม Firework ซึ่งไฟล PNG จะประกอบไปดวย เล

เยอร (layer), เวกเตอร (vector), สี และ แอฟเฟกตางๆ ท่ีใชกับภาพ เชน แสง เงา เปนตน และ

สวนประกอบที่วาน้ันเราสามารถที่จะแกไขไดในทุกๆ สวน

5.2 การใสรูปภาพ

1. เลือกจุดที่ตองการวางรูปภาพใน Document Window

2. ทําตามข้ันตอนใดข้ันตอนหน่ึงตอไปนี้

คลิกที่ปุม Image ใน Common Tab ของ Insert Bar



22

คลิกเมาสปุมซายขางไวท่ีปุม Image ใน Common Tab ของ Insert Bar แลวลาก

เมาสมาวางไวบริเวณที่ตองการใน Document Window

คลิกลากรูปภาพจากพาเนล Assest มาวางไวท่ี Document Window

คลิกลากรูปภาพจากพาเนล Site มาวางไวท่ี Document Window

จะปรากฏหนาตางดังรูป ซึ่งการเลือกรูปภาพมีจากหลายแหลงที่ตองการ ดังนี้

เลือกรูปภาพจากโฟลเดอรอื่นท่ีไมไดอยูภายใต Site ท่ีผูใชกําหนด เชน ตองการเลือกภาพ

จาก Desktop ดังรูป

กดปุม OK หลังจากนั้นจะปรากฏหนาตางดังรูป โดยโปรแกรมจะถามวาใหใสคําอธิบายของ

รูปภาพหรือไม หากไมตองการใหกดปุม OK (หากตองการใสรายละเอียด ใหพิมพขอความที่ตองการลง

ในชอง Alternate text)

ในบางครั้งหากมีการเลือกรปูท่ีอยูนอกเหนือ Site ท่ีเราไดตั้งคาไว โปรแกรมจะถามวา

ตองการคัดลอกรูปภาพมา Site ท่ีผูใชสรางไวหรือไม ใหกดปุม Yes เพื่อคัดลอกรปูภาพ



23

5.3 การปรับคาของรูปภาพ

การกําหนดคณุสมบัติตางๆ ของรูปภาพท่ีเรานํามาวางไวในเพจ ใหคลิกเลือกที่รูปภาพท่ี

ตองการแกไข (ภาพจะมีเสนลอมรอบกรอบปรากฏข้ึน) แลวทําการกําหนดคาใหแกรูปภาพ โดย

สามารถปรับคาไดท่ีหนาตาง Properties ดังนี้

ชองแรก จะเปนการกําหนดชื่ออางอิงของไฟลรูปภาพ

W จะเปนคาความกวางของรูปภาพ

H จะเปนคาความสูงของรูปภาพ ท้ัง W และ H เราสามารถกําหนดได 2 ลักษณะ คือ

เปนเปอรเซ็นต (%) กับเปน pixel โดยถาเราใสเปนตัวเลขลงไปอยางเดียวจะเปนการ

กําหนดแบบ pixel แตถาเราใสเปน 30% จะเปนการกําหดนแบบเปอรเซ็นต

Scr คือ ตําแหนงที่เก็บของรูปภาพและชื่อของไฟลภาพ

Link ถาตองการทําภาพน้ีใหมีการเชื่อมโยงกับไฟลอื่น ๆ หรือเว็บอื่น ก็กําหนดคาตรงสวนน้ี

Alt คือ การกําหนด Title ของรูปภาพ เมื่อเวลาเอาเมาสวางเหนือรูปภาพจะมี PopUp

แสดงขอความออกมา

V Space คือ คาความหางระหวางรูปภาพกับวัตถุอื่นทางดานบนและลางของรูป

H Space คือ คาความหางระหวางรูปภาพกับวัตถุอื่นทางดานขวาและซายของรูป

Border คือ คาความหนาของกรอบรูปภาพท่ีตองการ

Align คือ การกําหนดตําแหนงของรูปภาพ

Edit คือ ใชปรับแตงภาพโดยมีเครื่องมือดังนี้

• แกไขโปรแกรมดวยโปรแกรมอ่ืน ซึ่งปกติจะเปนโปรแกรมแกไขรูปภาพของ

Microsoft แตเราสามารถกําหนดใหเปนโปรแกรมตัวอื่นตามท่ีตองการได

• ปรับรูปภาพใหมีคุณภาพเหมาะสมดวย Firework

• เลือกตัดภาพตามความตองการ (Crop)

• ยกเลิกการแกไขครั้งลาสุด

• ลด / เพิ่มแสงสวางใหภาพ

• ปรับความชัดของภาพ

ใสชื่อของรูปภาพ ปรับความกวาง (W)

ปรับความสูง (H)

แสดงท่ีเก็บไฟลรูปภาพ

กําหนดเช่ือมโยงภาพไปยังขอมูลหรือเว็บไซตอื่น



24

5.4 การทํา Image Maps

Image Maps คือรูปภาพท่ีถูกแบงออกเปนพื้นท่ียอยๆ หรือ ท่ีเรียกวา Hotspot เมื่อผูใชคลิก

Hotspot เหลาน้ันแลวเราอาจจะใหมีการทํางานบางอยางเกิดข้ึน อยางเชน เปดไฟลใหม หรือ ลิงค ไป

ยังเว็บเพจอื่น เปนตน

การสราง Image Maps

การสรางพื้นท่ีของ Image Maps เราจะใชเครื่องมือที่อยูใน Property Inspector ในการสราง

ซึ่งมีข้ันตอนในการสรางดังนี้

เคร่ืองมือท่ีใชสราง Image Maps ใน Property Inspector

1. ใน Document Window เลือกรูปภาพท่ีเราตองการสราง Image Maps

2. ใน Property Inspector ใหคลิกที่ไอคอนรูปลูกศรทางมุมขวาลางเพื่อให Property

Inspector แสดงเครื่องมือในการสรางพื้นท่ีของ Image Maps และ คุณสมบัติอื่นๆ เพิ่มเติมของรูปภาพ

3. กรอกชื่อของ Image Maps ในฟลด Map ซึ่งชื่อนี้จะตองไมซ้ํากับ Image Maps เดิมท่ีมี

อยูแลว

4. กําหนดพื้นท่ีใน Image Maps ซึ่งทําไดดังนี้

• เมื่อตองการสรางพื้นท่ีวงกลมใน Image Maps ใหคลิกที่ไอคอน Circle Tool แลว

คลิกลากเมาสพอยตเตอรเพือ่สรางพื้นท่ีเหนือรูปภาพท่ีตองการ

• เมื่อตองการสรางพื้นท่ีส่ีเหลี่ยมใน Image Maps ใหคลิกที่ไอคอน Rectangle Tool

แลวคลิกลากเมาสพอยเตอรเพื่อสรางพื้นท่ีเหนือรูปภาพท่ีตองการ

• เมื่อตองการสรางพื้นท่ีหลายเหลี่ยมใน Image Maps ใหคลิกที่ไอคอน Polygon

Tool แลวคลิกลากเมาสพอยเตอรเพื่อสรางพื้นท่ีเหนือรูปภาพท่ีตองการ โดยการสรางพื้นท่ีหลายเหลี่ยม

เราจะใชการเชื่อมจุดตอจุดไปเรื่อยจนวนกลับมาจุดเริ่มตน ก็จะทําใหไดรูปหลายเหลี่ยมท่ีตองการ



25

การแกไข Image Maps

การแกไข Image Maps เราสามารถที่จะเคลื่อนยาย เปลี่ยนแปลงขนาดและ สําเนาพื้นท่ี จากรูป

หน่ึงไปวางอีกรูปหน่ึงไดดวยการยายพื้นท่ีสามารถทําไดโดยเลือกเครื่องมือที่ใชสรางพื้นท่ีของ Image

Maps รูปแบบใดก็ไดใน Property Inspector แลวคลิกเมาสปุมซายท่ีพื้นท่ีใน Image Maps ท่ีตองการ

จะเคลื่อนยายคางไวแลวลากเมาสพอยเตอรไปยังตําแหนงใหมท่ีตองการการเปลี่ยนแปลงขนาดของ

พื้นท่ีของ Image Maps สามารถทําไดโดยคลิกที่ไอคอนรูปลูกศรทางดานมุมลางซายของ Image

Maps แลวคลิกลากดานใดดานหน่ึงของพื้นท่ีเพื่อเปลี่ยนแปลงขนาด

5.5 การใส Flash ลงในเอกสาร

การสรางขอความแฟลช ผลท่ีไดขอความจะเปลี่ยนสีเมื่อนําเมาสไปชี้ และสามารถทําลิงค

ใหกับขอความไดอีกดวย

คลิกที่เมนู Insert => Media => Flash Text

Font รูปแบบตัวอักษร และ Size ขนาด ตามตองการ

B รูปแบบตัวอักษรหนา I ตัวอักษรเอียง และจัดขอความชิดซาย กึ่งกลาง หรือ ชิดขวา

Color สีของตัวอักษร Rollover color สีของตัวอักษรเมื่อนําเมาสไปชี้

Text ขอความแฟลชที่ตองการใหปรากฏบนเว็บ

Link หากตองการทําลิงคสามารถทําลิงคไดทุกแบบ เชน ลิงคไปยังรูปภาพ เว็บไซต อีเมล

Target หมายถึง เมื่อคลิกขอความแฟลชที่เปนลิงคแลว จะปรากฏท่ีหนาจอใด ส่ิงมีอยู 4

แบบ คือ _blank เปดหนาเว็บข้ึนมาใหม _parent จะอยูหนาหลักของเว็บกรณีท่ีใชเฟรม

ออกแบบ _self แทนท่ีหนาเว็บเดิมท่ีเปดอยู _top จะอยูดานบนของหนาเว็บกรณีท่ีใช

เฟรมออกแบบ

Bg color สีพื้นของกรอบขอความแฟลช

Save as ขอความแฟลชจะถูกบรรทัดชื่อตามที่กําหนด สามารถเปลี่ยนแปลงได แตตองชื่อ

ตามกฎท่ีเคยอธิบาย และตอนอพัโหลดข้ึนเซิฟเวอรตองอัพโหลดไฟลนี้ดวย

*หมายเหตุ* เมื่อกดปุม OK เพื่อสรางขอความแฟลชแลวจะไมสามารถแกไขได ตองสรางขอความใหม

เทาน้ัน



26

ปุมแฟลช จะไดปุมท่ีสวยงามตามรูปแบบท่ีเลือก และสามารถทําปุมใหลิงคไปยังที่อื่นๆ ได

คลิกที่เมนู Insert => Media => Flash Button

Style เลือกรูปแบบปุมท่ีตองการ

Button text ขอความที่ตองการใหปรากฏบนปุม

สําหรับสวนท่ีเหลือจะกําหนดเชนเดียวกับขอความแฟลชขางตน

การแทรกไฟล Flash Movie

เมื่อเราใส Flash Movie ลงในเอกสาร Dreamweaver จะใชท้ังแทก object และ embed

รวมกัน เพื่อใหการแสดงผล Flash Movie เปนไปไดอยางถูกตองในทุกเว็บบราวเซอร เมื่อเรา

เปลี่ยนแปลงคาของ Flash Movie ใน Property Inspector แลว Dreamweaver ก็จะเปลี่ยนแปลงคาท่ี

เหมาะสมในแทก object และ embed ใหดวยข้ันตอนการใส Flash Movie ลงในเอกสาร

1. ในมุมมองออกแบบของ Document Window เลือกจุดที่ตองการเพิ่ม Flash Movie แลวทํา

ตามข้ันตอนใดข้ันตอนหน่ึงตอไปนี้

• ใน Insert Bar เลือก Media Tab แลวคลิกปุม Insert Flash

• ใน Insert Bar เลือก Media Tab แลวคลิกลากไอคอน Insert Flash มาวางลงบน

Document Window

• เลือกเมนู Insert => Media => Flash

2. จะปรากฏไดอะลอก Select File ใหเราเลือกไฟล Flash ท่ีจะเพิ่มในเอกสาร

3. หลังจากที่เลือกไฟล Flash แลว Flash placeholder จะถูกแสดงใน Document Window

เพื่อบอกวาตําแหนงดังกลาวไดมีการแทรก Flash object เขามา



27

บทที่ 6

การเช่ือมโยงเอกสาร

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

จากที่เราทราบกันดีอยูแลววาเว็บไซตท่ีเราสรางข้ึนน้ันเกิดจากการนําเว็บเพจหรือ ไฟลท่ีสัมพันธ

กันมารวมกันและเชื่อมโยงเว็บเพจหรือไฟลเหลาน้ันเขาดวยกัน ดังนั้นในบทน้ีเราอธิบายถึงวิธีการสราง

การเชื่อมโยงหรือ ท่ีเรียกวา ลิงค (Link) ระหวางเว็บเพจในโปรแกรม Dreamweaver วาสามารถทําได

อยางไรและ มีการเชื่อมโยงแบบใดบาง

6.1 การอางถึงท่ีอยูของไฟลในการเช่ือมโยง

การทําความเขาใจกับการอางท่ีอยูของไฟลจะชวยใหการสรางการเชื่อมโยงระหวางไฟลตาง ๆ

ในเว็บไซตท่ีเราสรางข้ึนทําไดอยางถูกตองมากขึ้น ในอินเทอรเน็ตแตละไฟลหรือ เว็บเพจท่ีเราสรางข้ึน

จะมีท่ีอยูท่ีไมซ้ํากันท่ีเราสามารถอางถึงได ซึ่งเราเรียกวา Uniform Resource Locator (URL) รูปแบบ

ของ URL จะประกอบไปดวย 3 สวนดวยกันคือ โปรโตคอล (Protocol) โดเมน (Domain) และ ท่ีอยูของ

ไฟลในโดเมน (Path) รูปแบบในการอางถึงที่อยูของไฟลมีอยู 3 แบบดังนี้

1. แบบสมบูรณ (Absolute Path)

เปนการอางถึงไฟลแบบเต็มรูป คือ ใช URL ในการอางถึงไฟลท่ีอยูในเว็บไซต อยางเชน

http://www.yahoo.com/index.php จะเปนการอางถึงไฟล index.php ท่ีอยูในเว็บไซต Yahoo

เปนตน การอางถึงไฟลดวยรูปแบบน้ี จะนิยมใชกับการเชื่อมโยงระหวางเว็บไซตมากกวาท่ีจะใชกับการ

เชื่อมโยงภายในเว็บไซต เพราะวาถาเว็บไซตของเรามีการเปลี่ยนโดเมนเมื่อไร การเชื่อมโยงที่เราทําไว

ในเว็บเพจจะตองมีการแกไขท้ังหมด

2. แบบสัมพันธ (Document Relative Path)

เปนการอางถึงไฟลโดยใชความสัมพันธระหวางไฟลท่ีทําการเชื่อมโยงกับ ไฟลท่ีถูก

เชื่อมโยง ในโครงสรางไดเรกเทอรี่ของเว็บไซต ซึ่งการอางถึงไฟลดวยวิธีนี้จะมี 3 กรณีดวยกันดังนี้

1. ในกรณีท่ีไฟลท่ีทําการเชื่อมโยงอยูไดเรกเทอรี่ดวยกับไฟลท่ีถูกเชื่อมโยงใหใชเพียงชื่อ

ไฟลเทาน้ัน

2. ในกรณีท่ีไฟลท่ีถูกเชื่อมโยงอยูไดเรกเทอรี่ยอยของไดเรกเทอรี่ ท่ีไฟลท่ีทําการ

เชื่อมโยงอยู ใหใชชื่อไดเรกเทอรี่ยอยตามดวยเครื่องหมาย “/” และชื่อไฟล

3. ในกรณีท่ีไฟลท่ีถูกเชื่อมโยงอยูในไดเรกเทอรี่ท่ีอยูเหนือไดเรกเทอรี่ท่ีไฟลท่ีทําการ

เชื่อมโยงหนึ่งชั้น ใหใช “../” นําหนาชื่อไฟล

3. แบบสัมพันธกับรูทไดเรกเทอร่ีของไซต (Site Root Relative Path)

เปนการอางถึงไฟลโดยใชรูทไดเรกเทอรี่หรือ ไดเรกเทอรี่ชั้นนอกสุดของเว็บไซตเปน

จุดเริ่มตน ซึ่งการอางถึงไฟลดวยวิธีนี้เราจะแทนรูทไดเรกเทอรรี่ดวย “/” และที่อยูของไฟลโดยเริ่มจาก

รูทไดเรกเทอรรี่



28

6.2 การสรางการเช่ือมโยงหรือ ลิงค

ใน HTML เราจะใชแทก “<a>…….</a>” ในการเชือ่มโยงเอกสาร ซึ่งการเชื่อมโยงตางๆ ท่ี

สามารถทําไดมีดังตอไปนี้

การเช่ือมโยงไปยังไฟลหรือ เอกสาร

ใน Dreamweaver เราสามารถที่จะสรางการเชื่อมโยงได โดยทําผาน Property Inspector

หรือ ไอคอน Point-to-file ซึ่งข้ันตอนการเชื่อมโยงดวยวิธีตางๆ มีดงัตอไปนี้

1. การเช่ือมโยงโดยใช Link Text Box ใน Property Inspector

1. เลือกขอความหรือ วัตถุท่ีเราตองการจะสรางการเชื่อมโยง

2. คลิกไอคอนโฟลเดอร ใน Property Inspector เพื่อคนหาไฟลท่ีตองการเชื่อมโยง

โดยเราสามารถที่จะกําหนดไดวาหลังจากที่เลือกไฟลแลวจะใหสรางขอความที่ใชอางท่ี

อยูของไฟลในลักษณะ Document Relative Path หรอื Site Root Relative Path ได

ในปอปอัพเมนูในไดอะล็อก Select File

3. หรือ พิมพท่ีอยูของไฟลลงใน Link Text Box ซึ่งที่อยูของไฟลท่ีพิมพลงไปจะเปนไป

ตามรูปแบบการอางถึงไฟล 3 รูปแบบท่ีกลาวมาขางตน

4. เราสามารถที่จะกําหนดตําแหนงที่จะใหเอกสารที่ถูกเชื่อมโยงแสดงผลไดดวยโดยเลือก

ท่ี Target popup menu โดยความหมายของคาตางๆ ท่ีอยู popup menu มีดังนี้

• _blank ส่ังใหเว็บเบราเซอรเปดหนาตางใหมพรอมกับแสดงเอกสารที่ถูกเชื่อมโยง

• _parent แสดงผลเอกสารที่ถูกเชื่อมโยงใน parent frame หรือ parent window

ของ frame

• _self แสดงผลเอกสารที่ถูกเชื่อมโยงในหนาเดียวกับท่ีสวนเชื่อมโยงอยู

• _top แสดงผลเอกสารที่ถูกเชื่อมโยงในหนาตางของเว็บเบราเซอร โดยเอาเฟรม

ท้ังหมดออก



29

2. การเช่ือมโยงโดยใชไอคอน Point-to-File

1. เลือกขอความหรือ วัตถุท่ีตองการสรางการเชื่อมโยง

2. คลิกเมาสปุมซายท่ีไอคอน Point-to-File คางไวแลวลากเมาสไปวางยังเอกสารที่

เปดอยูหรือ แสดงอยูใน Site Panel

3. เมื่อไดไฟลท่ีตองการเชื่อมโยงแลวปลอยเมาสปุมขวา

การเช่ือมโยงภายในเอกสารเดียวกัน

เราสามารถสรางการเชื่อมโยงภายเอกสารเดียวกันได โดยการกําหนดตําแหนงที่ถูกเชื่อมโยง

ภายในเอกสารท่ีเราเรียกวา named anchor หลังจากนั้นก็ทําการเชื่อมโยงไปยัง named anchor

ดังกลาว ซึ่งการสราง named anchor ทําไดดังนี้

1. เลือกตําแหนงที่ตองการแทรก named anchor ในเอกสาร

2. เลือกเมนู Insert => Named Anchor หรือ ใน Common Tab ของ Insert Bar คลิกที่ปุม

Named Anchor

3. หลังจากข้ันตอนท่ี 2 จะปรากฏไดอะล็อก Named Anchor ดังรูปท่ี 4-2 ใหกรอกชื่อของ

named anchor ซึ่งชื่อนี้เราจะใชในตอนที่สรางการเชื่อมโยงภายในเอกสาร

หลังจากที่เราสราง named anchor ในเอกสารแลว การเชื่อมโยงมายัง named anchor มี

ข้ันตอนดังนี้

1. เลือกขอความหรือ วัตถุท่ีตองการเชื่อมโยงไปยัง named anchor

2. พิมพเครื่องหมาย “#” ตามดวยชื่อของ named anchor ท่ีตองการเชื่อมโยงลงใน Link

Text Box ใน Property Inspector



30

3. ถาเราตองการที่จะเชื่อมโยงไปยัง named anchor ท่ีอยูคนละเอกสารกันก็สามารถทําได

โดยพิมพท่ีอยูของไฟลตามดวยเครื่องหมาย “#” และ ชื่อของ named anchor

การสรางอีเมลลิงค

อีเมลลิงคเปนลิงคท่ีเมื่อเราคลิกแลวจะเปดหนาตางใหมพรอมกับเรียกโปรแกรมสงอีเมลท่ีเรา

กําหนดไวในเว็บเบราเซอร ซึ่งในชองที่ใหกรอกที่อยูของผูรับของโปรแกรมสงอีเมลจะแสดงอีเมล

แอดเดรส (Email Address) ท่ีกําหนดไวในอีเมลลิงค ซึ่งการแทรกอีเมลลิงคในเอกสารทําไดดังนี้

1. เลือกตําแหนง ท่ีตองการเพิ่มอีเมลลิงคลงในเอกสาร

2. เลือกเมนู Insert => E-mail Link หรือ คลิกที่ปุม Email Link ใน Common

Tab ใน Insert Bar

3. หลังจากข้ันตอนท่ี 2 จะปรากฏไดอะล็อก Email Link ใหพิมพขอความที่แสดงในเอกสาร

และ อีเมลแอดเดรสที่ใชตอนคลิกอีเมลลิงค

4. ซึ่งจริงๆแลวการ Link ไปยัง email เราก็สามารถใสเองไดโดยในชอง Link ใหใส mailto:

ตรงขางหนา email ท่ีตองการ



31

บทที่ 7

การออกแบบเอกสารโดยใชตาราง

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

ตาราง (Table)

ตารางเปนเครือ่งมือที่เราใชในการแสดงขอมูลที่อยูในลักษณะของตารางและ จัดตําแหนงการ

แสดงผลของขอความหรือ รูปภาพ โดยตารางจะประกอบไปดวยแถว (Row) ตั้งแต 1 แถวข้ึนไป และใน

แตละแถวก็จะประกอบไปดวยเซล (Cell) ตั้งแต 1 เซลข้ึนไป ซึ่งในแตละแถวตําแหนงของเซลที่ตรงกัน

เราจะเรียกวา คอลัมน (Column)

หลังจากที่เราสรางตารางแลวเราสามารถท่ีจะเปลี่ยนคุณสมบัติและโครงสรางของมันได ซึ่งการ

ดําเนินการตางๆ กับตารางท่ีทําไดมีดังตอไปนี้

1. เพิ่มเนื้อหาลงในตาราง

2. เพิ่ม ลบ แยกและ รวมแถวหรือ คอลัมนในตาราง

3. แกไขคุณสมบัติของตาราง เชน สีพื้นหลัง ความกวางของเซลหรือ การจัดวางขอความภายใน

เซล เปนตน

4. สําเนาและ วางเซลในตาราง

7.1 การเพิ่มตารางลงในเอกสาร

การเพิ่มตารางในเอกสารมีข้ันตอนดังตอไปนี้

1. เลือกตําแหนงที่ตองการจะแทรกตารางในเอกสาร

2. คลิกที่ไอคอน Table ใน Common Tab ของ Insert Bar

หรือเลือกเมนู Insert => Table จะปรากฏไดอะล็อก Insert Table



32

3. พิมพคาของคุณสมบัติตางๆ ของตารางดังนี้

• Rows เปนจํานวนแถวของตาราง

• Columns เปนจํานวนคอลัมนของตาราง

• Width เปนความกวางของตาราง

• Border เปนความหนาของขอบตาราง

• Cell Padding เปนความกวางชองวางระหวางขอความที่อยูในเซลกับดานแตละ

ดานในเซล

• Cell Spacing เปนความกวางของชองวางระหวางเซลในตาราง

4. Click OK จะมีตารางที่กําหนด ปรากฏท่ีหนา Document ดังภาพ

7.2 การปรับขนาดของตาราง

ทําไดโดยการคลิกที่ขอบของ Table ซึ่ง Properties inspector จะเปลี่ยนไปแสดงคุณสมบัติ

(Properties) ของตาราง

Select table element

• ตารางสามารถเลือกสวนท่ีจะกําหนดคาตางๆ ไดหลายแบบ โดยจะเลือกแกไขท้ังตาราง หรือ

แกไขทีละชอง หรือ แกไขทีละแถว หรือที่ละคอลัมนก็ได

การเลือกท้ังตารางเพื่อแกไข

• คลิกที่ขอบดานใดดานหนึ่งของตาราง หรือ คลิกในตารางสวนใดก็ไดหนึ่งครั้ง แลวคลิกขวาท่ี

เมาสเลือก Table => Select Table



33

การเลือกเฉพาะในแถว

• นําเมาสไปวางดานหนาของแถวท่ีตองการ ใหเมาสเปลี่ยนรูปเปนลูกศรสีดําทึบ ดังรูป แลวคลิก

หรือคลิกเพื่อปายทับตารางจากชองซายสุดแลวลากเมาสไปทางขวา

การเลือกเฉพาะคอลัมน

• นําเมาสไปวางดานบนของคอลัมนท่ีตองการ ใหเมาสเปลี่ยนรูปเปนลูกศรสีดําทึบ ดังรูป แลว

คลิก หรือ คลิกที่ตารางบนสุดของ Column นั้น แลวลากเมาสลงมา

การเลือกเฉพาะตารางท่ีตองการ

• กด CTRL คางไว แลวคลิกไปทีละชอง (เซลล) ตามตองการ

7.3 การกําหนดคุณสมบัติของตาราง

Table Properties

• หลังจากที่เลือก Table แลว คาตางๆใน Properties inspector สามารถกําหนดไดมีดังนี้

Table Id ตั้งชื่อไวเรียกอางอิง

Rows จํานวนแถวของตารางที่เลือก สามารถเพิ่มหรือลดจํานวนแถวไดโดยการ

เปลี่ยนตัวเลขดานหลัง



34

Cols จํานวน Column ของตารางที่เลือก สามารถเพิ่มหรือลดจํานวน Column ได

โดยการเปลี่ยนตัวเลขดานหลัง

W และ H ความกวางและความสูงของตาราง ความกวางถูกเซ็ตหนวยเปนเปอรเซ็น

หมายถึง ส่ังให Browser ปรับขนาดของตารางตามความกวางของหนาจอ

ซึ่งจะทําใหความกวางของตารางไมแนนอน ถาระบุเปนหนวย Pixel เปนการ

บังคับใหขนาดของตารางที่สรางไมเปลี่ยนแปลง

Cell Pad : ระยะหางระหวาง Cell กับตัวอักษรในเซลลนั้นๆ

Cell Space : ระยะหางระหวาง Cell ปกติมีคาเปน 1

Align : กําหนดชิดซาย กลางหรือขวา

Border : ขอบของตาราง

Bg Color : สีพื้นหลังของตาราง

Bg Image : ใชรูปเปนพื้นหลังของตาราง

Brdr : สีของขอบของตาราง

การกําหนดความหนาของเสนขอบตาราง

• เลือกตารางทั้งตาราง

• กําหนด Border ใหมีความหนาตามตองการ มีหนวยเปน pixel (ในท่ีนี้กําหนดเปน 1)

การกําหนด Cell Padding

Cell padding คือ ระยะหางระหวาง Cell กับตัวอักษรภายใน Cell สามารถกําหนดไดโดย

• เลือกตาราง

1



35

• กําหนด Cell Pad ตามตองการ (ในท่ีนี้ กําหนด CellPad เปน 2)

• ความสูงของทุกเซลล จะถูกปรับข้ึน ดังรูป

การกําหนด Cell Spacing

Cell Spacing คือ ระยะหางระหวาง Cell ภายในตาราง สามารถกําหนดไดโดย

• เลือกตาราง

• กําหนด CellSpace ตามตองการ (ในท่ีนี้ กําหนด CellSpace เปน 10)

• ระยะหางระหวางเซลลจะเพิ่มข้ึน ดังรูป



36

7.4 การกําหนดรูปแบบและเพิ่มสีสันใหกับตาราง

• สรางตารางและพิมพขอมูล

• คลิกเมาสในตาราง (เซลลใดก็ได)

• เลือกเมนูคําส่ัง Commands => Format Table

• จะปรากฏ Dialog box ดังรูป

การกําหนดคุณสมบัติของรูปแบบตาราง (Format Table)

สวนท่ี 1 : Row Colors ใชกําหนดสีของแตละแถว

ชอง First ใชกําหนดสีของแถวท่ี 2

ชอง Second ใชกําหนดสีของแถวท่ี 3

ชอง Alternate ใชกําหนดวา จะสลับสีของแตละแถวอยางไร

– do not alternate (ไมตองสลับสี) ตั้งแตแถวท่ี 2 ลงมา จะใชสี First



37

– Every Other Row สลับสีแบบแถวตอแถวไปเรื่อยๆ

– Every Two Rows สลับสีทุก 2 แถว

– Every Three Rows สลับสีทุก 3 แถว

– Every Four Rows สลับสีทุก 4 แถว

สวนท่ี 2 : Top Row ใชกําหนดคุณสมบัติของตัวอักษรและสีของแถวแรก

ชอง Align ใชกําหนดตําแหนงของตัวอักษร ใหชิดซาย กึ่งกลาง หรือชิดขวาของเซลล

ชอง Text Style ใชกําหนดแบบอักษร ใหเปนแบบธรรมดา ตัวหนา ตัวเอียง ท้ังหนา

ท้ังเอียง

ชอง Bg Color ใชกําหนดสีของเซลลในแถวแรก

ชอง Text Color ใชกําหนดสีของตัวอักษรในแถวแรก

สวนท่ี 3 : Left Col ใชกําหนดคุณสมบัติของตัวอักษรในคอลัมนแรก

ชอง Align ใชกําหนดตําแหนงตัวอักษรในคอลัมนแรก ใหชิดซาย กึ่งกลางหรือชิดขวา

ของเซลล

ชอง Text Style ใชกําหนดแบบอักษรในคอลัมนแรก ใหเปนแบบธรรมดา ตัวหนา ตัว

เอียง ท้ังหนาทั้งเอียง

สวนท่ี 4 : ชอง Border ใชกําหนดความหนาของเสนขอบตาราง

สวนท่ี 5 : ชอง Option หากเช็คเครื่องหมายถูก หมายความวา ให Dreamweaver สรางโคด (Code)

เพื่อกําหนดคาคุณสมบัติตางๆ ในชองเซลลแตละเซลล แทนท่ีจะกําหนดคุณสมบัติรวมกับแถว

Properties inspector ของ Row Column และ Cell

Properties สวนบน จะเปนการควบคุมตัวอักษรท่ีนํามาใสในตารางเหมือนกับ Property ของ Font

Properties สวนลาง เปน Property ท่ีควบคุมตารางในสวนของ Row Column Cell และการใส

รูปภาพ

W และ H ขนาดความกวางของ Cell ไมจําเปนตองปรับ

No Wrap ชอง Wrap จะส่ังใหโปรแกรมทําการตัดคําเมื่อเจอประโยคยาวๆ



38

Header ทําใหชองตารางนั้นกลายเปนขอความ เหมือนสวนหัวตาราง คือสวนใหญ

ตัวหนา และจัด ตําแหนงอยูกึ่งกลางเสมอ

Bg การนํารูปภาพมาทําเปนพื้นหลัง

Bg เลือกสีทําเปนพื้นหลังถาเลือกรูปภาพแลวไมตองเลือกสี

Brdr เลือกสีของขอบพรอมทั้งขนาดของขอบ

การรวม Cell (Merge Cell)

• Select Cell ท่ีตองการรวม

• มาท่ี Properties Inspector แลวคลิกรวม Cell

• หลังจากคลกิรวม Cell

ตัวอยาง การรวมเซลลท่ีอยูคอลัมนเดียวกัน

Merge

การแบง Cell (Split Cell)

• Select Cell ท่ีตองการแบง Cell โดย กด Ctrl คางแลวคลิกภายใน Cell



39

• ท่ี Properties inspector คลิกที่ Splits cell

• จากนั้นจะปรากฏ Dialog box ใหกําหนดคาดังนี้

Split Cell Into : เลือกการเพิ่ม Cell ไปทาง Row หรือ Column

Number of Rows : ระบุจํานวน Cell ท่ีตองการ

• คลิก OK

หมายเหตุ

ถาเลือก Split Cell Into แบบ Rows และ Number of Rows เทากับ 2 จะไดผลลพัธดังนี้

ถาเลือก Split Cell Into แบบ Columns และ Number of Columns เปน 4 จะไดผลลัพธดังนี้



40

บทที่ 8

การใชงาน Template

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

8.1 เก่ียวกับ Template

Template เปนเอกสารพิเศษที่ใชเปนแมแบบในการสรางเว็บเพจ โดยใน Template จะประกอบ

ไปดวยพื้นท่ี 2 ชนิดดวยกัน คือ

1. พื้นท่ีคงที่ (Non Editable Region) จะเปนสวนของเว็บเพจท่ีเหมือนกันในทุกหนาซึ่งในสวนน้ี

จะไมสามารถแกไขไดในเว็บเพจท่ีสรางจาก Template ดังกลาว

2. พื้นท่ีท่ีแกไขได (Editable Region) จะเปนสวนของเว็บเพจท่ีไมเหมือนกันในแตละหนา ซึ่งใน

สวนน้ีจะสามารถทําการแกไขเน้ือหาท่ีมีอยูไดในเว็บเพจท่ีใช Template ดังกลาวได

ประโยชนของ Template ก็คือเมื่อเราแกไข Template ใดก็ตามแลว เว็บเพจท่ีถูกสรางโดยมี

พื้นฐานจาก Template ดังกลาวจะถูกแกไขดวย

8.2 การกําหนดพื้นท่ีแกไขไดใน Template

จากที่กลาวไวขางตนถึงพื้นท่ี 2 ชนิดที่อยูใน Template คือ พื้นท่ีคงที่และ พื้นท่ีท่ีแกไขได

ตอนที่เราสราง Template พื้นท่ีท้ัง 2 ชนิดเราสามารถจะแกไขได แตในเอกสารท่ีสรางจากTemplate

ดังกลาวจะแกไขเน้ือหาบนพื้นท่ีท่ีแกไขไดอยางเดียว ซึ่งรูปแบบของพื้นท่ีท่ีแกไขไดจะม ี 4 ชนิดดวยกัน

ดังนี้

1. Editable Region เปนพื้นท่ีท่ีสามารถแกไขไดในเอกสารที่ถูกสรางจาก Template ซึ่งใน

หนึ่ง Template เราสามารถที่จะสราง Editable Region ไดหลายอัน

2. Repeating Region เปนพื้นท่ีในเอกสารท่ีมีเราสามารถสรางซ้ําได อยางเชน แถวของ

ตาราง เปนตน พื้นท่ีท่ีสามารถสรางซ้ําไดจะทําใหผูใชสามารถสรางวัตถุในเว็บเพจท่ีมีลักษณะรายการได

ในขณะที่ส่ิงที่ออกแบบไวไมเปลี่ยนแปลง

3. Option Region เปนพื้นท่ีใน Template ท่ีผูออกแบบสามารถกําหนดใหเปนตัวเลือกที่ใช

ใสเนื้อหาท่ีอาจจะแสดงหรือ ไมแสดงในเอกสารท่ีใช Template ดังกลาวได



41

4. Editable Tag Attribute เปนพื้นท่ีท่ีอยูในแท็กของ HTML ท่ีอยูใน Template ท่ีเรา

สรางข้ึนทําใหเราสามารถแกไขคุณสมบัติของวัตถุผานทาง Template Properties ได ซึ่งมีประโยชนใน

กรณีท่ีเราตองการใหแสดงวัตถุดังกลาวแตสามารถเปลี่ยนแปลงคุณสมบัติของมันได เชน การจัดวาง

หรือ ขนาดเปนตน

8.3 การสราง Template

การสราง Template เราสามารถสรางจากเอกสารที่มีอยูในปจจุบันหรือ สรางข้ึนใหมก็ได

Dreamweaver จะบันทักไฟล Template ท่ีเราสรางข้ึนในโฟลเดอรชื่อ Templates โดยมีนามสกุลของ

ไฟลเปน .dwt

8.3.1 การบันทึกเอกสารใหเปน Template

1. เปดเอกสารที่ตองการบันทึกเปน Template ใน Document Window

2. เลือกคําส่ัง File => Save as Template

3. จะปรากฏไดอะล็อก Save As Template ดังรูปท่ี 7-2 ใหเลือกไซตท่ีตองการบันทึก

Template ในปอปอัพเมนู Site แลวพิมพชื่อไฟลท่ีจะบันทึกในฟลด Save As

4. คลิกปุม Save เพื่อบันทึกไฟล

8.3.2 การสราง Template ดวย Assets Panel

1. เปด Assets Panel

2. เลือกหมวด Template

3. คลิกที่ปุม New Template ท่ีอยูทางดานลางของ Assets Panel



42

4. ชื่อเอกสารใหม จะถูกเพิ่มเขาไปใน List Box ท่ีใชแสดงรายชื่อของ Assets พรอม

กับแสดงแถบสีบนชื่อเอกสารใหม

5. พิมพชื่อเอกสารใหมท่ีตองการ

6. เลือกปุม Edit ใน Assets Panel แลวเอกสารที่เราสรางใหมจะถูกเปดใน

Document Window

8.3.3 การสราง Editable Region ใน Template

ข้ันตอนการสราง Editable Region มีดังนี้

1. ใน Document Window เลือกขอความที่ตองการใหอยูใน Editable Region หรือ

เลือกจุดที่ตองการเพิ่ม Editable Region ใหม

2. เลือกคําส่ัง Insert => Template Object => New Editable Region

3. ในฟลด Name พิมพชื่อของ Editable Region ซึ่งตองไมซ้ํากับ Editable Region

อื่นๆ ท่ีมีอยูใน Template

4. กดปุม OK เพื่อสราง Editable Region

8.3.4 การแกไข Editable Region

ถาเราตองการแกไข Editable Region ใหเปนพื้นท่ีท่ีไมสามารถแกไขไดใหทําดังนี้

1. เลือก Editable Region ท่ีตองการแกไข

2. เลือกคําส่ัง Modify => Template => Remove Template Markup

8.3.5 การสราง Repeating Region

Repeating Region เปนพื้นท่ีท่ีเราสามารถทําการสรางซ้ําได เมื่อเราใช Template ท่ีมี

Repeating Region ในการสรางเอกสารใหมหรือ ใชกับเอกสารเดิมท่ีมีอยูแลว Dreamweaver จะแสดง

กรอบที่ใชบอกขอบเขตของ Repeating Region พรอมกับปุมท่ีใชสราง ลบและ เลือกพื้นท่ีตองการสราง

ซ้ําได



43

ข้ันตอนการสราง Repeation Region

1. เลือกขอความหรือ เนื้อหาท่ีตองการกําหนดใหเปน Repeating Region

2. เลือกคําส่ัง Insert => Template Object => Repeating Region

3. ในฟลด Name พิมพชื่อของ Repeating Region ซึ่งตองไมซ้ํา กับ Repeating

Region เดิมที่มีอยูใน Template

4. คลิกปุม OK เพื่อสราง

8.3.6 การสราง Repeating Table

เราจะใช Repeating Table ในการสรางตารางที่มกีารกําหนด Repeating Region

ใหกับมัน และกําหนด Editable Region ใหแตละเซลที่อยูในตาราง โดยที่เราสามารถกําหนดคุณสมบัติ

ตางๆ ของตารางไดดวย

ข้ันตอนการสราง Repeating Table

1. ใน Document Window เลือกจุดท่ีตองการเพิ่ม Repeating Table

2. เลือกคําส่ัง Insert => Template Object => New Repeating Table

3. จะปรากฏไดอะล็อก ใหกรอกคุณสมบัติของตาราง และลักษณะของ Repeating

Table ซึ่งมีดังนี้

• Starting Row เปนแถวเริ่มตนท่ีสามารถสรางใหมได

• Ending Row เปนแถวสุดทายท่ีสามารถสรางใหมได

• Region Name เปนชื่อของ Repeating Table ซึ่งเปนชื่อที่ไมซ้ํากับท่ีมีใน

Template

8.3.7 การกําหนดใหคุณสมบัติในแทก HTML แกไขไดใน Template

การกําหนดใหคุณสมบัติในแท็ก HTML แกไขไดใน Template มีข้ันตอนดังนี้

1. ใน Document Window เลือกวัตถุหรือ ขอความที่ตองการกําหนดใหแกไข

คุณสมบัติในแทก HTML ได

2. เลือกคําส่ัง Modify => Templates => Make Attribute Editable

3. จะปรากฏไดอะล็อก Editable Tag Attributes ในฟอรมเมนู Attribute เลือก

คุณสมบัติท่ีตองการหรือ ถาไมมีคณุสมบัติท่ีตองการใหกดปุม Add เพื่อ

คุณสมบัติท่ีไมมีเขาไปใหม



44

4. เลือก Make Attribute Editable

5. ในฟลด Label พิมพชื่อสําหรับคุณสมบัติ

6. ในปอปอัพเมนู Type เลือกชนิดของขอมูลที่สามารถใชไดกับคุณสมบัติท่ีเลือก

7. ในฟลด Default พิมพคาของคุณสมบัติท่ีจะถูกใชในเวลาท่ีผูใชไมไดกําหนดคา

ใหกับคุณสมบัติ

8. ถาตองการเปลี่ยนไปกําหนดคุณสมบัติอื่น ใหทําตามข้ันตอนท่ี 3 - 7 ซ้ําอีกครั้ง

9. กดปุม OK เพื่อจบการทํางาน



45

บทที่ 9

การบริหารจัดการเว็บไซต

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

9.1 การบันทึกและดูโฮมเพจ

การบันทึกโฮมเพจ (Save)

หลังจากสรางโฮมเพจมาบางพอสมควรแลว ส่ิงที่ไมควรลืมก็คือการบันทึกผลงานท่ีไดสรางข้ึนน้ี

ไวในไฟลนามสกุล .html โดยตั้งชื่อใหสัมพันธกับเนื้อหาภายในโฮมเพจ ท้ังนี้จะไมทําใหเกิดการสับสน

ไดในภายหลงั ซึ่งจะมีผลทําใหงายตอการตรวจสอบ และจัดการเว็บไซตอีกดวย ข้ันตอนการบันทึก

โฮมเพจมีดังตอไปนี้

1. คลิกที่เมนู File => Save หรือกดปุม <Ctrl+S>

2. เมื่อปรากฏไดอะล็อกบ็อกซ ใสชื่อไฟลของโฮมเพจ เชน aboutme.html ลงในชอง File

name

3. ดับเบ้ิลคลิกเมาสเลือกกําหนดไดเร็คทอรีท่ี่ตองการสําหรับเก็บไฟลในชอง Save

4. คลิกปุม Save เพื่อบันทึกไฟล

ดูโฮมเพจท่ีสรางขึ้นดวย Browser

ในขณะที่สรางโฮมเพจอยูนั้น หากตองการท่ีจะตรวจสอบหนาตาของโฮมเพจที่สรางข้ึน สามารถ

Preview in Browser ทําไดโดยการกด F12 ซึ่งทําไดตลอดเวลาที่ตองการ

9.2 การตรวจสอบ Link ในเว็บไซต

ในระหวางการสรางเว็บไซต อาจมีการกาํหนด Link ใหเชื่อมโยงไปยังไฟลตางๆ แตบางครั้งเรา

อาจไมไดสรางไฟลนั้นข้ึนมา ทําใหเว็บของเราเกิดปญหา Link เสียหรือ Broken Link เราสามารถ

ตรวจสอบปญหานี้ไดโดย

1. เลือกโฟลเดอรท่ีตองการตรวจสอบ Broken Link

2. เลือก File => Check Links



46

3. Dreamweaver จะตรวจสอบทุก Link ในโฟลเดอรและไฟลตาง และสรุปใหเราทราบ โดย

แบงแสดงเปน 3 กลุม ดังนี้

• Show Broken Link แสดง Link แบบ Relative ท่ีเสีย

• Show External Links แสดง Link แบบ Absolute ท่ีเชื่อมโยงไปนอกเว็บไซต

• Show Orphaned Files แสดงไฟลท่ีไมไดเชื่อมโยงกับท่ีใดเลย

9.3 การเช่ือมตอไปยังเว็บเซิรฟเวอรดวยโปรโตคอล FTP ใน Dreamweaver

การเชื่อมตอไปยังเว็บเซิรฟเวอรเพื่อทําการรับสงไฟลในเว็บไซตท่ีเราสรางข้ึนน้ันสวนใหญ จะ

นิยมใชโปรโตคอล FTP (เปนโปรโตคอลมาตรฐานในการรับสงไฟลใน WWW) ในการเชื่อมตอ

ใน Dreamweaver เราสามารถที่จะทําการรับสงไฟลโดยใชโปรโตคอล FTP ได โดยที่เรา

จะตองทําการกําหนดคาตางๆ ในไดอะลอ็ก Site Definition เสียกอนถึงจะสามารถทําการรับ-สงไฟลได

ซึ่งข้ันตอนการกําหนดคาในไดอะล็อก Site Definition มดีังนี้

1. เลือกคําส่ัง Site => Edit Sites

2. เลือกไซตท่ีตองการในไดอะล็อก Edit Sites

3. คลิกที่ปุม Edit

4. จะปรากฏไดอะล็อก Site Definition เลือก Basic Tab

5. กดปุม Next ไปจนกระทั้งถึงข้ันตอน Sharing Files

6. ใหเลือกปุม Radio ท่ีมีขอความ Yes, I want to use a remote server แลวคลิกที่

ปุม Next

7. จะปรากฏหนาจอของข้ันตอน Sharing Files ในสวนท่ีสอง ในปอปอัพเมนู How do you

connect to your remote server? ใหเลือก FTP หลังจากที่เลือกแลวจะปรากฏฟลด

ใหกรอกขอมูลเพิ่มเติม



47

8. ในฟลด What is the hostname or FTP address of your Web server ? ให

พิมพชื่อเว็บเซิรฟเวอรเก็บเราตองการนําเว็บไซตไปเก็บไว

9. ในฟลด What folder on the server do you want to store your files in ? ให

พิมพชื่อโฟลเดอรท่ีตองการอัพโหลดไฟลไปเก็บไว

10. ในฟลด What is your FTP Login ใหพิมพล็อกอินท่ีไวเขาใชงานในเว็บเซิรฟเวอร

11. ในฟลด What is your FTP Password ใหพิมพรหัสผาน ถาตองการให

Dreamweaver จํารหัสผานไวใหคลิกเครื่องหมายถูกใน Checkbox หนา Save

12. กดปุม Test Connection เพื่อทดสอบการติดตอไปยังเว็บเซิรฟเวอร

หลังจากที่เรากําหนดคาตางๆ ท่ีใชในการรับสงไฟลดวยโปรโตคอล FTP เสร็จแลว ข้ันตอมาก็

คือ วิธีการรับสงไฟล ซึ่งเราจะทําผานพาเนล Site โดยมีข้ันตอนดังนี้

การดาวนโหลดไฟลจากเว็บเซิรฟเวอร

1. เลือกไซตท่ีตองการดาวนโหลดไฟลจากเว็บเซิรฟเวอร จากปอปอัพเมนู Site ในพาเนล Site

2. ในพาเนล Site คลิกที่ปุม Connect เพื่อเปดการเชื่อมตอไปยังเว็บเซิรฟเวอร

3. เลือกไฟลท่ีตองการดาวนโหลดในมุมมอง Site

4. คลิกที่ปุม Get ท่ีอยูบนแถบเครื่องมือในพาเนล Site เพื่อทําการดาวนโหลดไฟลท่ี

เลือกไว

การอัพโหลดไฟลไปท่ีเว็บเซิรฟเวอร

1. เลือกไซตท่ีตองการอัพโหลดไฟลไปท่ีเว็บเซิรฟเวอรจากปอปอัพเมนู Site ในพาเนล Site

2. คลิกที่ปุม Connect เพื่อเปดการเชื่อมตอไปยังเว็บเซิรฟเวอร

3. เลือกไฟลท่ีตองการอัพโหลดในมุมมอง Local

4. คลิกที่ปุม Put ท่ีอยูบนแถบเครื่องมือในพาเนล Site เพื่อทําการอัพโหลดไฟลท่ี

เลือกไว



48

อางอิง

อางอิงจากเว็บไซต

http://kruwan.school.in.th/dream/ch_12_index.htm

http://www.bu.ac.th/knowledgecenter/content/dreammx.pdf

http://www.junjaowka.com/webboard/showthread.php?p=182544

http://www.webthaidd.com

Documents

การใช้งาน Dreamweaver 8kmcenter.rid.go.th/kcitc/2009/files/51092322.pdf · บทที่ 2 รู จักกับ Macromedia Dreamweaver 8 2.1 สเปคเครื่องคอมพ