Dreamwever MX

MACROMEDIA
DREAMWEAVER MX
FUNDAMENTALS
ฉบับภาษาไทย
Macromedia Dreamweaver MX : Fundamentals
ฉบับภาษาไทย
ผูเขียน กฤษ เกษมโอสถ krit@marianasgraphix.com

ผูชวยเขียน วีรพล สุเภากิจ vrapol@marianasgraphix.com
บรรณาธิการ วีรพล สุเภากิจ vrapol@marianasgraphix.com
รูปแบบการออกแบบ วีรพล สุเภากิจ vrapol@marianasgraphix.com
สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537

ใชในการศึกษาหาความรูโดยสวนตัว หามจําหนายจายแจกเพื่อการคา
หามลอกเลียนไมวาสวนใดสวนหนึ่งของเอกสารนี้ ไมวาในรูปแบบใดๆ
เวนแตไดรับอนุญาตเปนลายลักษณอักษรจากผูจัดทําเทานั้น
จัดทําครั้งที่ 1 เมื่อ 1 พฤศจิกายน 2545
ผูจัดทํา
บริษัท มาริอานาส กราฟค จํากัด

9/2 ชั้น6 อาคารวรสิน ถนนวิภาวดี-รังสิต ลาดยาว จตุจักร กทม 10900
โทร. 0 2690 0192-3
http://www.marianasgraphix.com
info@marianasgraphix.com
ชื่อ,โลโก, สัญลักษณ และ โปรแกรม Dreamweaver MX, Fireworks MX, Flash MX เปนลิขสิทธิ์ของ
บริษัท Macromedia, Inc. ประเทศสหรัฐอเมริกา
http://www.macromedia.com
Dreamweaver MX : Fundamentals Content
CONTENT
บทที่ 1
อินเตอรเน็ตและ เวิรล ไวด เว็บ 1-1
แนะนําอินเตอรเน็ต 1-1
World Wide Web (WWW) 1-1
รูปแบบของชื่อที่อยูของแหลงขอมูล 1-1
โปรโตคอล HTTP (Hypertext Transfer Protocol) 1-2
เอกสาร HTML (Hypertext Markup Language) 1-2
เว็บเพจ (Web Page) และ เว็บไซต (Web Site) 1-3
บทที่ 2
รูจักกับโปรแกรม Dreamweaver MX 2-1
การติดตั้งระบบภาษาไทย 2-1
สวนการทํางานเบื้องตนในโปรแกรม Dreamweaver 2-2
มุมมองของ Document Window 2-8
การวางแผนและ ออกแบบเว็บไซต 2-9
การกําหนด Dreamweaver Site 2-11
บทที่ 3
การเพิ่มเนื้อหาลงในเว็บไซต 3-1
การเพิ่มขอความลงในเว็บเพจ 3-1
การเพิ่มชองวางระหวางตัวอักษร 3-2
การเพิ่มยอหนาและ ตัวขึ้นบรรดทัดใหม 3-2
การกําหนดฟอนตและ ลักษณะของฟอนต 3-2
การแกไขและ เพิ่มรายการของฟอนต 3-3
รูปแบบ Paragraph 3-4
การจัดวางขอความ 3-4
การเยื้องยอหนา (Indent) 3-5
การเปลี่ยนสีขอความ 3-5
การสรางรายการแบบมีหัวขอ 3-5
การเพิ่มอักขระพิเศษ 3-6
การเพิ่มเสนแบงเนื้อหา 3-6
การนําเขาเนื้อหาจาก Microsoft Word HTML 3-6
บทที่ 4
การเชื่อมโยงเอกสาร 4-1
การอางถึงที่อยูของไฟลในการเชื่อมโยง 4-1
การสรางการเชื่อมโยงหรือ ลิงค 4-2
บทที่ 5
การทํางานกับรูปภาพกราฟฟก 5-1
ภาพกราฟฟกบนเว็บไซต 5-1
การวางรูปภาพลงในหนาเอกสาร 5-1
การปรับคาของรูปภาพ 5-2
การเรียกโปรแกรม Fireworks MX มาแกไขรูปภาพใน Dreamweaver MX 5-3
การทํา Image Maps 5-7
การใส Flash ลงในเอกสาร 5-8
www.marianasgraphix.com 1
บทที่ 6
การออกแบบเอกสารโดยใชตาราง 6-1
ตาราง (Table) 6-1
การจัดวางเนื้อหาของเว็บเพจในมุมมองเลยเอาท (Layout View) 6-8
การใช Tracing Image ในการออกแบบเว็บเพจ 6-16
บทที่ 7
การใชงาน Templates และ Libraries 7-1
เกี่ยวกับ Template 7-1
การกําหนดพื้นที่แกไขไดใน Template 7-1
การสราง Template 7-2
ไลบรารี (Libraries) 7-6
บทที่ 8
การสรางแบบฟอรม (Form) 8-1
เกี่ยวกับแบบฟอรม (Form) 8-1
การสรางแบบฟอรม 8-2
การปรับแตงคุณสมบัติของแบบฟอรม 8-3
การสราง Text Fileds 8-4
การสราง File Field 8-6
การสราง Hidden Field 8-6
การสราง Checkbox 8-7
การสรางปุม Radio 8-8
การสราง Scrolling List 8-9
การสรางปอปอัพเมนู (Popup menu) 8-11
การสรางปุม (Button) 8-11
การสรางปุมที่เปนภาพกราฟฟก (Image Field) 8-12
บทที่ 9
การสรางเฟรม (Frames) 9-1
เฟรม (Frame) และ เฟรมเซต (Frameset) 9-1
การสรางเฟรมเซต 9-1
การเลือกเฟรมเซตและ เฟรม 9-5
การบันทึกเฟรมและ การบันทึกเฟรมเซต 9-8
การปรับแตงคุณสมบัติของเฟรม 9-9
การปรับแตงคุณสมบัติของเฟรมเซต 9-9
การใชลิงคเปลี่ยนเนื้อหาภายในเฟรม 9-10
บทที่ 10
Cascading Style Sheets (CSS) 10-1
รูจักกับ Cascading Style Sheets (CSS) 10-1
การใช CSS Style Panel 10-2
การสราง CSS Style ใหม 10-3
การใช Class Style 10-5
การสรางและ เชื่อมโยงไปยัง CSS Style Sheet 10-5
การแกไข CSS Style 10-6
บทที่ 11
การใส Interactive Page Elements 11-1
การใช JavaScript Behavior 11-1
การใช Behavior Panel 11-1
การนํา Behavior ไปใชกับวัตถุในเว็บเพจ 11-2
การสราง Rollover image 11-3
การสราง Disjointed Rollovers 11-4
Jump Menu 11-6
การใสเลเยอร (Layer) สําหรับงาน Interactive 11-8
บทที่ 12
การทดสอบ อัพโหลดและ ดูแลรักษาเว็บไซต 12-1
การทดสอบการแสดงผลเว็บเพจในเว็บบราวเซอร 12-1
การเปดเว็บเพจในเว็บบราวเซอรผานทาง Dreamweaver 12-2
การตรวจสอบลิงคภายในเว็บเพจหรือ ไซต 12-3
การแกไขลิงคที่ผิดพลาด 12-4
การเชื่อมตอไปยังเว็บเซิรฟเวอรดวยโปรโตคอล FTP ใน Dreamweaver 12-5
การคนหาและ แทนที่ขอความในไฟล 12-7
Dreamweaver MX : Fundamentals บทที่ 1 : อินเตอรเน็ตและ เวิรล ไวด เว็บ
บทที่ 1
อินเตอรเน็ตและ เวิรล ไวด เว็บ
1.1 แนะนําอินเตอรเน็ต
อิ น เตอร เน็ ต เป น เครื อ ข า ยคอมพิ ว เตอร ข นาดใหญ ที่ เกิ ด จากการเชื่ อ มโยงเครื อ ข า ย
คอมพิวเตอรขนาดเล็กทั่วโลกเขาไวดวย โดยคอมพิวเตอรแตละเครื่องที่เชื่อมโยงเขาดวยกันนั้นอาจ
จะใชอุป กรณ ห รือ ระบบปฏิ บัติก ารที่แตกตางกัน ก็ได การที่ เครื่องที่ มีคุณ ลักษณะที่ แตกตางกัน
สามารถเชื่อมตอกันไดก็เพราะ มีการกําหนดมาตรฐานในการเชื่อมตอเขาหากัน ซึ่งมาตรฐานที่ใชก็
คือ TCP / IP (Transmission Control Protocol and Internet Protocol)
อินเตอรเน็ตทําใหเราสามารถติดตอสื่อสารกับบุคคลอื่นๆ ที่เชื่อมตอกับอินเตอรเน็ตไดทั่ว
โลก ดวยขอดีดังกลาวนี้จะทําใหการแลกเปลี่ยนขอมูล ขาวสารหรือ ความรูทําไดอยางกวางขวาง
และ รวดเร็วมากขึ้น
การเชื่อมตอเครื่องคอมพิวเตอรเขาสูอินเตอรเน็ตในเบื้องตนนั้นเราสามารถทําได 2 วิธีคือ
ทําโดยการใชโมเด็ม(Modem) เชื่อมตอผานสายโทรศัพทไปยังผูในบริการอินเตอรเน็ตหรือ เชื่อมตอ
กับเครือขายยอยที่ทําการเชื่อมตอกับอินเตอรเน็ตอีกที ซึ่งวิธีนี้จะตองมีการดอีเทอรเน็ต (Ethernet
Card) หรือที่มักจะเรียกวา การดเน็ตเวิรค (Network Card) ในการเชื่อมตอกับเครือขายยอย
1.2 World Wide Web (WWW)

WWW หรือในบางครั้งก็เรียกสั้นๆ วา เว็บ (Web) เปนเครือขายของแหลงขอมูลขนาดใหญ
บนอินเตอรเน็ตที่สามารถเขาถึงไดทั่วโลก ซึ่งการเขาถึงขอมูลในแหลงขอมูลดังกลาว สามารถทําได
โดยการใหชื่อที่อยูของแหลงขอมูลที่เราตองการเขาถึงผานโปรโตคอลที่กําหนดและ ใชโปรแกรมที่
สามารถแสดงผลเอกสาร HTML (Hypertext Markup Language) ได
1.3 รูปแบบของชื่อที่อยูของแหลงขอมูล
เมื่อใดก็ตามที่เราตองการจะเขาถึงแหลงขอมูลใน WWW เราจะตองใหชื่อที่อยูของแหลงขอ
มูล ซึ่งรูปแบบของชื่อที่อยูของแหลงขอมูลที่ใชใน WWW คือ URL(Uniform Resource Locator) ซึ่ง
โครงสรางของมันประกอบไปดวย 3 สวนดวยกันคือ
1. โปรโตคอลที่ใชเขาถึงแหลงขอมูล
2. ชื่อเครื่องคอมพิวเตอรที่เปนแหลงขอมูลที่เราตองการเขาถึง
3. path ของขอมูลในเครื่องคอมพิวเตอรที่เปนแหลงขอมูล
www.marianasgraphix.com 1-1
จากตั ว อย า งต อ ไปนี้ เ ป น URL ที่ ใ ช เ ข า ถึ ง ข อ มู ล ที่ อ ยู ใ นเครื่ อ งคอมพิ ว เตอร ที่ ชื่ อ
www.marianasgraphix.com โดยผานโปรโตคอล HTTP และ มี path ของขอมูลเปน /aboutus
http://www.mariansgraphix.com/aboutus
1.4 โปรโตคอล HTTP (Hypertext Transfer Protocol)

เปนโปรโตคอลที่ใชในการกระจายและ ทํางานรวมกันของขอมูลที่อยูในรูปของสื่อที่สามารถ
เชื่อมโยงถึงกันได เนื่องจากโปรโตคอล HTTP สามารถที่จะใชในการรับสงขอมูลที่เปนขอความ รูป
ภาพ หรือ แมแตภาพเคลื่อนไหว ได จึงทําใหแหลงขอมูลสวนใหญใน WWW อนุญาตใหเขาถึงไดโดย
ผานโปรโตคอล HTTP
1.5 เอกสาร HTML (Hypertext Markup Language)

เอกสาร HTML เปนเอกสารที่ประกอบไปดวยขอมูลที่เราตองการเผยแพรผาน WWW และ
ภาษา HTML ที่ใชการกําหนดการแสดงผลของขอมูลดังกลาว
ภาษา HTML เปนภาษาที่อยูในรูปของ แทก (Tag) ที่ใชหุมขอมูลที่เราตองการเผยแพรผาน
WWW ซึ่ ง การแสดงผลของเอกสาร HTML เราสามารถที่ จ ะดู ได โดยใช โปรแกรมที่ เรีย กว า เว็ บ
บราวเซอร (Web Browser)
โครงสรางเบื้องตนของเอกสาร HTML ดังรูปที่ จะประกอบไปดวย 3 สวนดังนี้
1. สวนที่ใชบอกจุดเริ่มตนและ สิ้นสุดของเอกสาร HTML คือ แทก <html></html>
2. ส ว นหั ว ของเอกสาร HTML คื อ แท ก <head></head> ซึ่ ง เราจะแสดงหั ว เรื่ อ งของ
เอกสาร HTML ไวในสวนนี้
3. สวนที่ใชบอกจุดเริ่มตนและ สิ้นสุดของสวนที่ใชแสดงเนื้อหาคือ แทก <body></body>
<html>
<head><title>Marianasgraphix</title></head>
<body>
<b>Hello World</b>
</body>
</html>
รูปที่ โครงสรางเบื้องตนของเอกสาร HTML
จากโครงสรางของเอกสาร HTML ขางตนเนื้อหาตางๆ ที่เราตองการแสดงผลจะอยูในแทก

<body></body> และ แตละเนื้อหาจะถูกหุมดวยแทกที่ใชกําหนดการแสดงผลอีกที ดังตัวอยางใน
รูปที่ เราจะเห็นไดวาขอความ Hello World จะถูกหุมดวยแทก <b></b> ซึ่งเปนการกําหนดใหแสดง
ขอความ Hello World เปนตัวหนาเมื่อเปดในเว็บ
1.6 เว็บเพจ (Web Page) และ เว็บไซต (Web Site)

ใน WWW ขอมูลตางๆ ที่เราตองการเขาถึงสวนใหญจะถูกแสดงอยูในรูปของ เว็บเพจ (Web
Page) ซึ่งเว็บเพจ จะเกิดจากการประมวลผลเอกสาร HTML แลวแสดงผลเอกสาร HTML ดังกลาว
ในเว็บบราวเซอร
เมื่อเรานํากลุมของเว็บเพจที่สัมพันธกันมารวมและ เชื่อมโยงเขาไวดวยกัน เราจะเรียกกลุม
ของเว็บเพจดังกลาววา เว็บไซต (Web Site) ในแตละเว็บไซตนอกจากจะประกอบไปดวยกลุมของ
เว็บเพจแลวก็อาจจะมีไฟลตางๆ ที่เว็บเพจทําการเชื่อมโยงเพื่อนํามาแสดงผลบนเว็บเพจรวมอยูดวย
อยางเชน ไฟลรูปภาพ ภาพเคลื่อนไหว เปนตน
Dreamweaver MX : Fundamentals บทที่ 2 : รูจักกับโปรแกรม Dreamweaver MX
บทที่ 2
รูจักกับโปรแกรม Dreamweaver MX
2.1 รูจักกับโปรแกรม Dreamweaver MX

Dreamweaver MX (ซึ่งตอไปเราเรียกสั้นๆ วา
Dreamweaver) เปนโปรแกรมของบริษัท Macromedia Inc. ที่ใช
สําหรับออกแบบและ พัฒนาเว็บไซต เว็บเพจและ เว็บ
แอปพลิเคชั่น ดวยโปรแกรม Dreamweaver เราสามารถที่จะออก
แบบและ พัฒนาเว็บไซตโดยการเขียนโคดภาษา HTML หรือ ใช
เครื่องมือที่โปรแกรม Dreamweaver มีให ซึ่งเครื่องมือเหลานี้จะ
สรางโคดภาษา HTML ใหเราโดยอัตโนมัติ โดยที่เราไมจําเปนตอง
เขียนโคดภาษา HTML เอง
ในปจจุบันโปรแกรม Dreamweaver นอกจากจะสนับสนุนการใชงานกับภาษา HTML
แลวยังสนับสนุนการใชงานรวมกับเทคโนโลยีทางดานเว็บเพจอื่นๆ ดวย เชน CSS และ จาวา
สคริปต เปนตน การสรางเว็บแอปพลิเคชั่น (Web Application) ดวยโปรแกรม Dreamweaver นั้น
ก็สามารถทําไดอยางสะดวกและ รวดเร็วมากยิ่งขึ้น ดวยเครื่องมือตางๆ ที่โปรแกรมมีใหทําใหเรา
สามารถที่จะสราง การติดตอกับฐานขอมูล และ ดึงขอมูลจากฐานขอมูลโดยไมจําเปนที่ตองเขียน
โคดของเซิรฟเวอรสคริปต (Server Script) เลย ตัวโปรแกรมจะสรางใหเองโดยอัตโนมัติ ซึ่งจะทํา
ใหเวลาที่ใชในการพัฒนาเว็บแอปพลิเคชั่นนั้นนอยลง
การติดตั้งระบบภาษาไทย
Dreamweaver MX เปนโปรแกรมที่ไมได Support ภาษาไทยโดยตรง เพราะฉะนั้นหากจําตองใช
Font ที่เปนภาษาไทย จึงตองใชโปรแกรมชวยเหลือการใชภาษาไทย Dreamweaver MX Thai
Addon ซึ่งจะสามารถไป Download ไดที่เว็บไซท Thaiware.com หรือที่เว็บไซท ของบริษัท ที่
marianasgraphix.com โดยตองติดตั้งโปแกรมนี้กอนที่เปด Dreamweaver MX ขึ้นมาใชงาน โดย
จะมีคุณสมบัติดังนี้
- เพิ่ม encoding windows-874 ทําให support ภาษาไทย
- เพิ่ม encoding tis-620 ทําให support ภาษาไทย
- แกไข Inspectors ให support ภาษาไทย
- แกไข Objects ให support ภาษาไทย
- แกไข การแสดงผลภาษาไทยตาม menu ใหใหญขึ้น
Menu Bar Insert Bar Document Toolbar Document Window Panel
Tag Selector Property Inspector Launcher Bar
รูปที่ 2-1 หนาจอการทํางานของโปรแกรม Dreamweaver
2.2 สวนการทํางานเบื้องตนในโปรแกรม Dreamweaver

ในโปรแกรม Dreamweaver จะประกอบไปดวยสวนการทํางานหลายสวนดวยกัน ดังรูปที่
2-1 ซึ่งในแตละสวนมีหนาที่ดังตอไปนี้
2.2.1 Document Window
อยูดานลางของ Document Toolbar ดังรูปที่ 2-2 เปนสวนที่ใชแสดงเนื้อหาของเว็บเพจที่
เราสรางขึ้นและ กําลังทํางานอยูในขณะนั้น
รูปที่ 2-2 Document Window
2.2.2 Launcher Bar

เปนแถบสีเทาที่ประกอบไปดวยปุมตางๆ อยูดานลางทางขวาของ Document Window
ดังรูปที่ 2-3 โดยแตละปุมจะใชเปดและ ปด Property Inspector และ พาเนล (Panel) ที่ใชบอยๆ
ในโปรแกรม
รูปที่ 2-3 Launcher Bar
การทํางานของปุมตางๆ มีดังนี้
1. เปนปุมที่ใชเปดพาเนล Site
2. เปนปุมที่ใชเปดพาเนล Assets
3. เปนปุมที่ใชเปดพาเนล CSS Style
4. เปนปุมที่ใชเปดพาเนล Behavior
5. เปนปุมที่ใชเปดพาเนล History
6. เปนปุมที่ใชเปดพาเนล Blindings
7. เปนปุมที่ใชเปดพาเนล Server Behavior
8. เปนปุมที่ใชเปดพาเนล Components
9. เปนปุมที่ใชเปดพาเนล Databases
2.2.3 Insert Bar

ประกอบไปดวยปุมที่ใชแทรกอ็อบเจ็กต (Object) ชนิดตางๆ เชน รูปภาพ ตาราง และ เล
เยอร เปนตน ลงในเว็บเพจที่เรากําลังทํางานอยูในขณะนั้น
Tab
รูปที่ 2-4 Insert Bar
Insert Bar จะประกอบไปดวยแทป (Tab) ที่ใชแยกกลุมของปุมที่ใชแทรกอ็อบเจ็กตลงใน

เว็บเพจ ดังนี้
1. Common เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชงานบอยในการสรางเว็บเพจ เชน
ตาราง (Table) รูปภาพ (Image) หรือ ลิงค (Link) เปนตน
2. Layout เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชจัดการโครงสรางรูปรางหนาตาของ
เว็บเพจ เชน ตาราง เลเยอร (Layer) หรือ มุมมองเลยเอาท (Layout View) เปนตน
3. Text เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชกําหนดรูปแบบของขอความในเว็บเพจ
เชน ตัวเอียง ตัวหนา หรือ ขีดเสนใตขอความ เปนตน
4. Table เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชสรางตารางในเว็บเพจ เชน ตาราง
แถว (Row) หรือ คอลัมน (Column) เปนตน
5. Frame เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชสรางเฟรม (Frame) ในเว็บเพจ
6. Forms เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชสรางฟอรม (Form) ในเว็บเพจ
7. Templates เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่ใชสราง เทมเพลต (Template) ใน
เว็บเพจ
8. Characters เปนกลุมของปุมที่ใชแทรกอ็อบเจ็กตที่เปนอักขระพิเศษลงในเว็บเพจ เชน
,  และ ตัวขึ้นบรรทัดใหม (Line break) เปนตน
2.2.4 Property Inspector
ใชแสดงคุณสมบัติของวัตถุหรือ ขอความที่เราเลือกในว็บเพจ โดยเราสามารถที่จะเปลี่ยน
แปลงแกไขคุณสมบัติตางๆ ของวัตถุที่เราเลือกผานทาง Property Inspector ได
รูปที่ 2-5 Property Inspector
2.2.5 Tag Selector

อยูใน Status Bar ที่อยูทางดานลางของ Document Window เมื่อเราคลิกวัตถุในเอกสาร
จะปรากฎ Tag Selector ใน Status Bar ขึ้นมา เมี่อเราคลิกเลือก Tag Selector แลวแทกตางๆ ที่
ถูกลอมดวยแทกที่เราเลือกจะถูกเลือกดวย
รูปที่ 2-6 Tag Selector
2.2.6 Site Panel

ใชในการจัดการไฟลและ โฟลเดอรที่ใชในการสรางเว็บไซต นอกจากนี้ยังสามารถใชดูไฟล
ตางๆ ในเครื่องไดอีกดวย
รูปที่ 2-7 Site Panel
2.2.7 Docment Toolbar
ประกอบไปดวยปุมและ ปอปอัพเมนูที่ใชกําหนดรูปแบบมุมมองของ Document Window

ที่เรากําลังทํางานอยูและ คําสั่งตางๆที่ใชทํางานกับ Document Window อยางเชน การแสดงเว็บ
เพจที่สรางขึ้นในเว็บบราวเซอรหรือ การกําหนดออปชั่นของ Document Window เปนตน
รูปที่ 2-8 Document Toolbar
ซึ่งการทํางานขององคประกอบตางๆ ที่อยูใน Document Toolbar มีดังนี้

1. เปนปุมที่ใชสลับมุมมองของ Document Window จากมุมมองอื่นๆ มาเปนมุม
มองโคด
มองโคดและ มุมมองออกแบบ
มองออกแบบ
4. เปนปุมที่ใชทดสอบการทํางานของเซิรฟเวอรสคริปตที่อยูในเว็บเพจบนเว็บ
เซิรฟเวอร
5. เปนปุมที่ใชแสดงเนื้อหาในเว็บเพจที่ถูกดึงขึ้นมาจากฐานขอมูลดวยเซิรฟเวอร
สคริปต
6. เปนฟลดที่ใหกรอกชื่อของเว็บเพจ ซึ่งจะถูกแสดงใน
Title Bar ของเว็บบราวเซอร
7. เปนปุมที่ใชเปดไดอะล็อก Design Note ที่ใชเก็บขอมูลของเว็บเพจที่เราสราง
ขึ้น เชน ชื่อไฟล ที่อยูของไฟล และ รุนของไฟล เปนตน
8. เปนปุมที่ใชเปดปอปอัพเมนูเพื่อเลือกเว็บบราวเซอรที่จะเปดไฟลที่เราทํางานอยู
มาแสดงผล
9. เปนปุมที่ใชปรับการแสดงผลของเว็บเพจใหมหลังจากที่เราแกไขโคด HTML ใน
มุมมองโคดของ Document Window แลว
10. เปนปุมที่ใชเปดพาเนล Referance
11. เปนปุมที่ใชแสดงปอปอัพเมนูที่เก็บคําสั่งที่ใชทดสองการทํางานของจาวาสริปต
ที่อยูในเว็บเพจ
12. เปนปุมที่ใชแสดงปอปอัพเมนูที่เก็บคําสั่งที่ใชปรับการแสดงผลของ Document

Window
2.2.8 Context Menu

ใชเรียกคําสั่งที่เราตองการทํางานโดยขึ้นอยูกับพื้นที่ที่เราเลือกในเว็บเพจที่เราทํางานอยู
ซึ่งการเรียก Context Menu ทําไดโดยคลิกเมาสปุมขวาบนพื้นที่ที่เราตองการทํางานดวย ดังรูปที่
2-8
รูปที่ 2-8 Context Menu
2.2.9 ชองปรับขนาดวินโดว
เปนสวนที่ใชปรับขนาดของDocument Window ตามที่เราตองการโดยสวนนี้จะสามารถ
ใชงานไดในมุมมองออกแบบของ Document Window เทานั้น ดังรูปที่ 2-9
ชองปรับขนาดวินโดว
รูปที่ 2-9 ชองปรับขนาดวินโดว
2.2.10 ชองแสดงขนาดของไฟลและ ระยะเวลาในการดาวโหลด

เปนสวนที่ใชแสดงขนาดของไฟลเว็บเพจและ ระยะเวลาที่ใชในการดาวโหลดเว็บเพจโดย
ประมาณ
ชองแสดงขนาดไฟลและ ระยะเวลาในการดาวโหลด
รูปที่ 2-10 ชองแสดงขนาดไฟลและ ระยะเวลาในการดาวโหลด

2.3 มุมมองของ Document Window
Document Window ใชแสดงเว็บเพจที่เราทํางานอยูโดยที่เราสามารถเลือกมุมมองของ
Document Window ได 3 รูปแบบดังนี้
2.3.1 มุมมองออกแบบ (Design view)
ในมุมมองนี้ Document Window จะแสดงใหเห็นถึงหนาตาของเว็บเพจเหมือนกับที่เรา
เห็นในเว็บบราวเซอร โดยที่เราสามารถแกไขเนื้อหาตางๆ บนเอกสารไดดวย ดังรูปที่ 2-11
รูปที่ 2-11 Document Window ในมุมมองออกแบบ
2.3.2 มุมมองโคด (Code view)

ในมุมมองนี้ Document Window จะแสดงเว็บเพจในรูปของโคดภาษา HTML ที่ถูกสราง
ขึ้นโดยโปรแกรม Dreamweaver หรือ เราเขียนขึ้นเองโดยโคดภาษา HTML ที่แสดงเราสามารถที่
จะเพิ่มหรือ แกไขได ดังรูปที่ 2-12
รูปที่ 2-12 Document Window ในมุมมองโคด
2.3.3 มุมมองออกแบบและ โคด (Design and Code View)

ในมุมมองนี้ Document Window จะแสดงเว็บเพจทั้งในรูปของหนาตาของเว็บเพจและ
โคดภาษา HTML โดยแสดงเว็บเพจในสวนหนึ่งและ แสดงโคดภาษา HTML ในอีกสวนหนึ่ง ดังรูป
ที่ 2-13
รูปที่ 2-13 Document Window ในมุมมองออกแบบและ มุมมองโคด
2.4 การวางแผนและ ออกแบบเว็บไซต

เว็บไซตคือ กลุมของเว็บเพจที่มีคุณลักษณะคลายกันทั้งในดานการออกแบบ เนื้อหา ที่ถูก
นํามารวมและ เชื่อมโยงเขาดวยกัน
ดวยโปรแกรม Dreamweaver MX เราสามารถที่จะทําการสรางและ จัดเว็บเพจที่มีอยูใน
เว็บไซตของเราไดอยางงายและ มีประสิทธิภาพโดยผานเครื่องมือที่โปรแกรมมีให ดังนั้นเพื่อที่จะ
ใหเว็บไซตที่เราสรางขึ้นสมบูรณและ ตรงตามที่ตองการแลว การวางแผน ออกแบบเว็บไซตกอนที่
สรางเว็บไซตจึงเปนสิ่งที่จําเปน
ซึ่งการวางแผนและ ออกแบบเว็บไซตมีขึ้นตอนตางๆ ดังตอไปนี้
2.4.1 กําหนดเปาหมายของเว็บไซตที่เราจะสราง
การกําหนดเปาหมายกอนที่เราจะสรางเว็บไซต ก็เพื่อที่จะชวยใหเราทราบถึงเนื้อหาตางๆ
ที่จะตองใช รูปรางหนาของเว็บไซต ความซับซอนของเว็บไซต และ เครื่องมือตางๆ ที่จะใชการ
พัฒนาเว็บไซต ซึ่งจะทําใหการพัฒนาเว็บไซตของเราทําไดอยางรวดเร็วและ ถูกตองมากยิ่งขึ้น
2.4.2 กําหนดกลุมเปาหมายที่จะเขามาชมเว็บไซต
หลังที่เรากําหนดเปาหมายในการพัฒนาเว็บไซตแลว ตอมาเราก็จําเปนที่จะตองกําหนด
กลุมของผูชมเว็บไซตดวย เนื่องจากผูที่เขามาชมเว็บไซตนั้นสามารถมาไดจากทุกมุมของโลก ดัง
นั้นเว็บบราวเซอรที่ใชเปดเว็บไซต ความเร็วในการติดตอมายังเว็บไซต อาจจะแตกตางกันไดซงึ่ การ
ที่เราจะสรางเว็บไซตที่สามารถดูไดโดยผูชมทุกคนที่อยูในสภาพแวดลอมแตกตางกันนั้นเปนไปได
ยาก นอกจากนี้การกําหนดกลุมเปาหมายก็จะชวยใหการออกแบบเว็บไซตของเราทําไดอยางถูก
ตองและ สมบูรณ
2.4.3 จัดโครงสรางเว็บไซต
การจัดโครงสรางเว็บไซตเราทําเพื่อที่จะใหไฟลตางๆ ที่ใชในเว็บไซตถูกจัดเก็บเปนสัดสวน
และ คนหาไดงายขึ้น ถาเราไมมีการจัดโครงสรางกอนที่จะสรางเว็บไซตแลวอาจจะทําใหมีไฟลที่
ซ้ําซอนกันอยูในเว็บไซตไดและ การคนหาไฟลก็ทําไดยาก
ในเบื้ อ งต น เราสามารถที่ จ ะจั ด โครงสร า งเว็ บ ไซต ข องเราในฮาร ด ดิ ส ก ใ นเครื่ อ ง
คอมพิวเตอรที่เราทํางานอยูได หลังจากที่เราจัดโครงสรางเสร็จเรียบรอยแลวก็ทําการอัพโหลด
(Upload) ไฟลตางๆ ที่ใชในการสรางเว็บไซตไปเก็บไวในเว็บเซริฟวเวอรเมื่อเราตองการที่จะใหอื่น
มาชมเว็บไซตของเรา
2.4.4 ออกแบบหนาตาเว็บไซต
หนาตาเว็บไซตของเรานั้น ควรจะออกแบบโดยใหองคประกอบตางๆ ในแตละหนาอยู
บริเวณเดี่ยวกันอยางเชน เมนูที่ใชเชื่อมโยงไปยังหนาหลักของเว็บไซต ถาเราวางไวทางซายในเว็บ
เพจแลวก็ควรจะวางเมนูไวตําแหนงดังกลาวในทุกๆ หนาของเว็บไซต การออกแบบหนาตาของ
เว็บไซตเราอาจจะใชโปรแกรมที่ใชวาดรูปอยางเชน Free Hand ในการวางองคประกอบตางๆ ใน
เว็บเพจก็ไดนอกจากที่เราจะเขียนลงในกระดาษ
2.4.5 สรางและ รวบรวมไฟลตางๆ ที่ใชในการสรางเว็บเพจ

กอนจะสรางเว็บไซตเราควรจะสรางและ รวบรวมไฟลตางๆ ไมวาจะเปนรูปภาพ ภาพ
เคลื่อนไหวหรือ ไฟลเสียงที่ใชในการสรางเว็บเพจใหครบเสียกอนเพราะวาถาในขณะที่เรากําลัง
สรางเว็บไชตเกิดพบวาไมมีไฟลบางตัวที่เราตองการใชก็อาจจะทําใหเราตองเสียเวลาในการคนหา
หรือ สรางขึ้นใหม ซึ่งจะทําใหการสรางเว็บไซตเปนไปไมตอเนื่องและ ลาชาได
ใน Dreamweaver MX เราสามารถที่จะสรางแมแบบที่ใชในการสรางเว็บเพจในแตละ
หนาไดซึ่งเราเรียกแมแบบดังกลาววา เทมปเพลต (Template)
เราจะสรางเทมปเพลตก็ตอเมื่อเราพบวาในเว็บไซตของเรามีเว็บเพจหลายหนาที่มีการวาง
องคประกอบของเนื้อหาในบางสวนเหมือนกัน เราจะใชสวนที่เหมือนกันมาสรางเปนเทมปเพลตไว
www.marianasgraphix.com 2 - 10
เมื่อใดก็ตามที่เราตองการสรางเว็บเพจที่มีการจัดวางองคประกอบเหมือนกับเว็บเพจเดิมที่มีอยู
เราก็ใชเทมปเพลตที่เราสรางไวในการสรางเว็บเพจใหมและ แกไขบางสวนที่ตองการ ซึ่งการใช
เทมปเพลตจะชวยใหเราสรางเว็บเพจไดงายขึ้นและ เมื่อใดที่มีการแกไขเทมปเพลต เว็บเพจทั้ง
หมดที่ถูกสรางจากเทมปเพลตดังกลาวก็จะเปลี่ยนแปลงดวย ทําใหเราไมตองแกไขเว็บเพจทุก
หนาๆ ที่ใชเทมปเพลตดังกลาวดวยตัวเอง ซึ่งจะทําใหเวลาที่ใชในการพัฒนาเว็บเพจนอยลง
2.5 การกําหนด Dreamweaver Site

หลังจากที่เราวางโครงสรางเว็บไซตของเราแลว ตอมาเราจะใช Dreamweaver Site เขา
มาชวยในการสรางและ จัดการเว็บไซตของเรา การนํา Dreamweaver Site เขามาจัดการเว็บไซต
ของเราจะทําใหเราสามารถที่จะทําการอัพโหลดไฟลที่ใชในการสรางเว็บไซตไปไวในเว็บเซริฟเวอร
ได งายขึ้น นอกจากนี้ Dreamweaver Site ยังชวยในการตรวจสอบการเชื่อมโยงของไฟลตางๆ ให
อีกดวยเมื่อเวลามีการแกไขไฟลตางๆ ในเว็บไซต ซึ่ง Dreamweaver Site ประกอบไปดวย 3 สวน
ดังนี้
• Local folder เปนไดเรกเทอรี่ที่เราเก็บเว็บไซตที่เราสรางไวในเครื่องคอมพิวเตอรของ
เรา ซึ่งใน Dreamweaver จะเรียกไดเรกเทอรี่ที่เราทํางานวา Local Site
• Remote folder เปนไดเรกเทอรี่ที่เราเก็บเว็บไซตที่เราสรางไวในเว็บเซิรฟเวอร ซึ่งใน
Dreamweaver จะเรียกไดเรกเทอรี่ที่อยูในเว็บเซิรฟเวอรวา Remote Site
• Folder for dynamic page เปนไดเรกเทอรี่ที่ใชเก็บและ ประมวลผล dynamic page
(หรือ เซิรฟเวอรสคริปต) ที่เราสรางขึ้นในเว็บไซตของเรา
ในเบื้องตนถาเรายังไมมีเว็บเซิรฟเวอรที่ไวใชเก็บเว็บไซตของเรา ก็ใหกําหนด Local floder
อยางเดียวกอน ซึ่งขั้นตอนการกําหนด Dreamweaver Site มีดังนี้
1. เลื อ กคํ า สั่ ง Site -> New Site หลั ง จากเลื อ กคํ า สั่ ง แล ว จะปรากฎไดอะล็ อ ก Site
Definition
2. ในไดอะล็อก Site Definition ใหคลิกที่ Basic Tab
3. ในขั้ น ตอน Editing Files หน า แรกในฟ ล ด What would you like to name your
site? ใหพิมพชื่อไซตของเราแลวคลิกที่ปุม Next
4. จะปรากฎหนาที่สองของขั้นตอน Editing Files ใหเลือกที่ No, I do not want to use
server technology แลวคลิกที่ปุม Next
5. จะปรากฎหนาที่สามของขั้นตอน Editing Files ใหเลือกที่ Edit local copies on my
machine, then upload to server when ready? และ กรอกที่อยูของไดเรกเทอรี่หรือ
ใช ไอคอนโฟลเดอร ในการเลื อ กไดเรกเทอรี่ภ ายในเครื่อ งคอมพิ ว เตอร ข องเรา ที่

ต อ งการให เป น ที่ เก็ บ เว็ บ ไซต ข องเราในฟ ล ด Where on your computer do you
want to store your files? แลวคลิกที่ปุม Next
6. หลังจากที่คลิกปุม Next แลวจะปรากฎหนาจอของขั้นตอน Sharing Files ในปอปอัพ
เมนูใหเลือก None แลวคลิกที่ปุม Next
7. จะปรากฎหนาจอ Summary ซึ่งจะแสดงรายการสรุปขอมูลของไซตที่เราสรางขึ้นให
คลิกปุม Done เพื่อทําการจบสรางไซต
8. Dreamweaver จะเปดพาเนล Site และ แสดงไซตที่เราสรางขึ้นในพาเนล
Dreamweaver MX : Fundamentals บทที่ 3 : การเพิ่มเนื้อหาลงในเว็บไซท
บทที่ 3
การเพิ่มเนื้อหาลงในเว็บไซต
ดวย Dreamweaver การเพิ่มเนื้อหาตางๆ ของเว็บเพจทําไดงาย ไมวาจะเปนขอความ รูป

ภาพ ตารางและ เสียง เปนตน ซึ่งเนื้อหาที่สามารถเพิ่มเขาไปในเว็บเพจไดมีดังตอไปนี้
3.1 การเพิ่มขอความลงในเว็บเพจ
ใน Dreamweaver การเพิ่มขอความลงในเว็บเพจสามารถทําไดหลายวิธี ซึ่งในบทนี้จะ
อธิบายวิธีการเพิ่มขอความลงเว็บเพจ การกําหนดสี ขนาด ชนิดของฟอนต (Font) และการจัดขอ
ความ รวมไปถึ งการกํ า หนดรูป แบบของข อ ความโดยผู ใช เองโดยใช Cascading Style Sheet
(CSS)
การเพิ่มและ กําหนดรูปแบบของขอความ
การเพิ่มขอความลงในเว็บเพจเราสามารถพิมพโดยตรงลงไปที่ Document Window หรือ
คัดลอกจากเอกสารอื่นๆ แลวนํามาวางใน Document Window ก็ได การวางขอความที่คัดลอกมา
จากเอกสารอื่นสามารถทําไดโดยเลือกเมนู Edit -> Paste
การกําหนดรูปแบบของขอความใน Dreamweaver คลายกับการใชโปรแกรมเวิรดในการ
พิมพขอความ การกําหนดรูปแบบของขอความใน Dreamweaver สามารถทําไดโดยเลือกเมนู
Text -> Paragraph หรือ เลือกจากปอปอัพเมนู Format ที่อยูใน Property Inspector ดังรูปที่ 3-1
ซึ่งรูปแบบของขอความที่กําหนดไดก็จะมี รูปแบบยอหนา (Paragraph) หรือ หัวเรื่อง (Heading)
เปนตน
รูปแบบของขอความ ชนิดฟอนต ขนาดฟอนต สี ตัวหนา, ตัวเอียง การจัดวาง
เยื้องหนา
รูปที่ 3-1 คุณสมบัติของขอความใน Property Inspector
การกําหนดสี ขนาด ชนิดฟอนตและ การจัดขอความ สามารถทําไดโดยผานเมนู Text

หรือ Property Inspector สวนการกําหนดตัวหนา ตัวเอียง ตัวขีดเสนใต สามารถทําไดโดยเลือก
เมนู Text-> Style หรือ ใช Property Inspector ดังรูปที่ 3-1
ใน Dreamweaver เราสามารถที่จะบันทึกรูปแบบของขอความที่เกิดจากการรวมกันของ
รูปแบบหลายๆ รูปแบบได เมื่อเราตองการที่จะใชรูปแบบดังกลาวอีกครั้งเราก็สามารถที่จะเรียกใช
งานได การบันทึกและ เรียกใชงานรูปแบบที่บันทึกไวสามารถทําไดโดยเลือกผานพาเนล HTML
การกําหนดรูปแบบโดยใช CSS ใน Dreamweaver เราสามารถที่จะกําหนด CSS ในไฟล
เดียวกันกับเว็บเพจหรือ สรางไฟลแยกและ เชื่อมโยงไฟลดังกลาวมายังเว็บเพจที่ใชงาน CSS ก็ได
การใช CSS มีประโยชนคือ เมื่อเราใช CSS กําหนดรูปแบบใหกับขอความใดๆ เมื่อเราเปลี่ยนรูป
แบบของ CSS แลว ขอความที่ถูกกําหนดโดย CSS ดังกลาวก็จะเปลี่ยนแปลงดวย
3.2 การเพิ่มชองวางระหวางตัวอักษร
การเพิ่มชองวางระหวางตัวอักษรสามารถทําได 3 วิธีดังนี้
1. ใน Insert Bar เลื อก Character และ คลิ ก เมาปุ ม ซ ายที่ ปุ ม Non-Breaking Space
2. เลือกเมนู Insert -> Special Character -> Non-Breaking Space

3. กดปุม Control+Shift+Space bar
3.3 การเพิ่มยอหนาและ ตัวขึ้นบรรดทัดใหม

1. ถาตองการเพิ่มยอหนาใหกดปุม Enter
2. ถาตองการเพิ่มตัวขึ้นบรรทัดใหมทําได 2 วิธีคือ
• กดปุม Shift+Enter
• ใน Insert Bar เลือก Character แลวคลิกเมาปุมขวาที่ไอคอน Line Break
• เลือกเมนู Insert -> Special Character -> Line Break
3.4 การกําหนดฟอนตและ ลักษณะของฟอนต

การกําหนดฟอนตและ ลักษณะของฟอนตสามารถทําไดโดยผาน Property Inspector
หรือ เลือกเมนูคําสั่งที่อยูในเมนู Text ซึ่งขั้นตอนการเปลี่ยนฟอนตและ คุณลักษณะของฟอนตมีดัง
ตอไปนี้
1. เลือกขอความที่ตองการจะกําหนดฟอนตและ ลักษณะของฟอนต
2. การกํ า หนดฟอนต ทํ า ได โ ดยเลื อ กฟอนต จ ากป อ ปอั พ เมนู Font ใน Property
Inspector หรือ เลือกเมนู Text -> Font แลวเลือกฟอนตที่ตองการ
3. การกําหนดรูปแบบของฟอนตวาเปน ตัวเอียง ตัวหนา หรือ ตัวขีดเสนใตทํ าไดโดย
กํ า หนดใน Property Inspector หรื อ เลื อ กเมนู Text -> Style แล ว เลื อ ก Style ที่
ตองการ
4. การกําหนดขนาดฟอนตทําไดโดยเลือกขนาดของฟอนตจากปอปอัพเมนู Size ใน
Property Inspector หรือ เลือกเมนู Text -> Size โดยขนาดที่กําหนดไดมีคาตั้งแต 1
ถึง 7 สวนขนาดที่ขึ้นตนดวยเครื่องหมาย + และ – หมายความวาให เพิ่ มหรือ ลด
ขนาดของฟอนตจากฟอนตพื้นฐานที่ใชในเว็บเพจ ตัวอยางเชน ถาฟอนตพื้นฐานเปน
3 แลว +3 หมายความวาใหเพิ่มขนาดของฟอนตไปอีก 3 หนวยซึ่งก็คือ 6
3.5 การแกไขและ เพิ่มรายการของฟอนต

เราจะใชคําสั่ง Edit Font List ในการแกไขและ เพิ่มรายการของฟอนต ที่แสดงในปอปอัพ
เมนู Font ของ Property Inspector และ เมนู Text -> Font ซึ่ ง รายการของฟอนต จ ะใช ในการ
กําหนดการแสดงผลของขอความในเว็บเบราเซอร
การแกไขและ เพิ่มรายการของฟอนตมีขั้นตอนดังนี้
1. เลือกเมนู Text -> Font -> Edit Font List จะปรากฎไดอะล็อก Edit Font List ดังรูป
ที่ 3-2
รูปที่ 3-2 ไดอะล็อก 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 พวกนี้ก็จะไมสามารถแสดงออกมาได
3.6 รูปแบบ Paragraph

ใน Dreamweaver เราจะใชปอปอัพเมนู Format ใน Property Inspector หรือ เลือก เมนู
Text -> Paragraph ในการกําหนดรูปแบบยอหนาหรือ หัวเรื่อง โดยขั้นตอนการกําหนดรูปแบบ
ยอหนาหรือ หัวเรื่องมีดังนี้
1. คลิกเมาปุมซายบริเวณขอความที่ตองการกําหนดรูปแบบยอหนาหรือ หัวเรื่อง
2. เลือกรูปแบบยอหนาและ หัวเรื่องที่ตองการในปอปอัพเมนู Format
3. เมื่อตองการยกเลิกรูปแบบที่ใชใหเลือก none ในปอปอัพเมนู Format
3.7 การจัดวางขอความ
การกําหนดการจัดวางขอความเราสามารถกําหนดไดใน Property Inspector หรือ เลือก
เมนู Text -> Align โดยขั้นตอนการกําหนดการจัดวางขอความมีดังนี้
1. เลือกขอความที่ตองการหรือ คลิกเมาปุมซายหนาขอความที่ตองการกําหนดการจัด
วาง
2. เลื อ กไอคอน Align ไอคอนใดไอคอนหนึ่ ง ใน Property Inspector

หรือ เลือกเมนู Text -> Align โดยการจัดวางที่เลือกไดมี ชิดซาย กึ่งกลาง ชิดขวาและ
กระจาย
3.8 การเยื้องยอหนา (Indent)

การกําหนดเยื้องยอหนามีขั้นตอนดังนี้
1. คลิกเมาปุมซายบนยอหนาที่เราตองการกําหนดเยื้องยอหนาไปทางขวา
2. ใน Property Inspector คลิกที่ไอคอน Indent เมื่อตองการเยื้องยอหนาไปทาง
ขวาหรือ เลือกเมนู Text -> Indent
3. ถ า เราต อ งการเยื้ อ งย อ หน า มาทางซ า ย ใน Property Inspector คลิ ก ที่ ไ อคอน
Outdent หรือ เลือกเมนู Text -> Outdent
3.9 การเปลี่ยนสีขอความ
การเปลี่ยนสีขอความทําโดยเลือกขอความที่ตองการเปลี่ยนสีแลว กรอกรหัสสีที่ตองการ
ในชอง Color หรือ คลิก ที่ ไอคอนรูปสี่เหลี่ ยมที่อยูห นาชองกรอกรหัสสี ใน Property Inspector
จะปรากฎพาเนล Color ดังรูปที่ 3-3 ใหเราเลือกสีที่ตองการ ในพาเนลจะประกอบไปดวยตารางสี
และ ไอคอนที่ใชกําหนดออฟชั่นและ สีมาตราฐาน เลือกสีที่ตองการ เมื่อเลือกแลวในชองรหัสสีก็
จะปรากฎรหัสของสีที่เราเลือก
รูปที่ 3-3 พาเนล Color
3.10 การสรางรายการแบบมีหัวขอ
เราสามารถที่จะสรางรายการแบบมีหัวขอจากขอความที่มีอยูได โดยขั้นตอนการสรางราย
การแบบหัวขอมีดังนี้
3.10.1 การสรางรายการแบบมีหัวขอใหม
1. กําหนดจุดเพิ่มรายการใน Document Window
2. คลิกที่ไอคอน List เมื่อตองการสรางรายการแบบมีหัวขอที่ไมมีลําดับหรือ ไอคอน
เมื่อตองการสรางรายการแบบมีหัวขอที่เรียงลําดับ ใน Property Inspector หรือ
เลือกเมนู Text -> List
3. พิมพขอความที่ตองการแลวกดปุม Enter
4. เมื่อตองการจบการสรางรายการแบบมีหัวขอใหกดปุม Enter 2 ครั้ง
3.10.2 การสรางรายการแบบมีหัวขอจากขอความเดิมที่มีอยู
1. เลือกกลุมของยอหนาที่ตองการสรางรายการแบบมีหัวขอ
2. คลิกที่ไอคอน List เมื่อตองการสรางรายการแบบมีหัวขอที่ไมมีลําดับหรือ ไอคอน
เมื่อตองการสรางรายการแบบมีหัวขอที่เรียงลําดับ ใน Property Inspector หรือ
เลือกเมนู Text -> List
3.11 การเพิ่มอักขระพิเศษ
อักขระพิ เศษใน HTML จะถูก แทนที่ ดวยตั วเลขหรือ ชื่ อ อย างเช น  เราจะแทนดว ย
&copy หรือ < เราจะแทนดวย &gt เปนตน ใน Dreamweave เราสามารถที่จะเพิ่มอักขระพิเศษได
โดยใชปุมที่อยูใน Character Tab ของ Insert Bar หรือ เลือกเมนู Insert -> Special Character
ก็ได
3.12 การเพิ่มเสนแบงเนื้อหา
ใน HTML เราสามารถที่จะเพิ่มเสนแบงเนื้อหาไดโดยใชปุมที่อยูใน Common Tab ของ
Insert Bar หรื อ เลื อ กเมนู Insert -> Horizontal Rule หลั ง จากที่ เพิ่ ม เส น แบ ง เนื้ อ หาแล ว เรา
สามารถที่จะกําหนดความกวางและ ความหนาของมันไดดวย โดยกําหนดคาดังกลาวใน Property
Inspector
3.13 การนําเขาเนื้อหาจาก Microsoft Word HTML

ใน Dreamweaver เราสามารถที่ จ ะเป ด และ นํ า เข า เอกสาร HTML ที่ ถู ก สร า งโดย
โปรแกรม Microsoft Word (หรือเรียกสั้นๆ วา Word) ไดแลวใชคําสั่ง Clean up Word HTML ใน
การลบโคด HTML ที่ถูกสรางโดย Word ออก ซี่งโคดที่ถูกลบออกดังกลาวจะเปนโคดที่ใชกําหนด

รูปแบบของเนื้อหาใน Word ซึ่งไมสามารถแสดงในเว็บบราวเซอรได
ขั้นตอนการนําเขาเนื้อหาจาก Microsoft Word HTML มีดังนี้
1. เปดไฟล HTML ที่ถูกสรางดวย Word โดยทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้
• เลื อ ก คํ า สั่ ง Import -> Import Word HTML ห ลั งจ าก ที่ เลื อ ก คํ าสั่ งแ ล ว
Dreamweaver จะเปดไฟลดังกลาวและ เปดไดอะล็อก Clean up Word HTML
ขึ้นมาโดยอัตโนมัติ ดังรูปที่ 3-4
• เลื อ กคํ าสั่ ง File -> Open แล วเลือ กไฟล เพื่ อ เป ด หลั งเป ด ไฟล แล วเลื อกคํ าสั่ ง
Command -> Clean up Word HTML
2. Dreamweaver จะพยายามตรวจสอบรุ น ของ Word ที่ ใช บั น ทึ ก ไฟล ดั ง กล า ว ถ า
Dreamweaver ไมสามารถตรวจสอบไดวาเปน Word รุนใด ใหเราเลือกรุนที่ถูกตอง
ในปอปอัพเมนู
3. เลือกออปชั่นที่ตองการใชใน Basic Tab ซึ่งมีออปชั่นตางๆ ดังนี้
• Remove all Word Specific Markup กํ า หนดให ล บแท็ ก HTML เฉพาะที่ ถู ก
สรางโดย Word
• Clean up CSS กําหนดใหลบ CSS เฉพาะที่ถูกสรางโดย Word
• Clean up <font> Tags กํ า หนดให ล บแท็ ก HTML ที่ อ ยู ในแท็ ก <body> แล ว
กําหนดคาขนาดของตัวอักษรในแทก <body> ใหเทากับ 2
• Fix Invalidly Nested Tags กําหนดใหลบแท็ ก font ที่ถู กสรางโดย Word ที่ อยู
นอกแท็กที่อยูในระดับบลอกออก เชน แทก <p>, <h1> และ <h2> เปนตน
• Set Background Color เปนฟลดที่ใหพิมพรหัสของสีที่เปนเลขฐาน 16 ในการ
กําหนดสีพื้นหลังใหกับเว็บเพจ
• Apply Source Formatting กําหนดใหใชรูปแบบของซอรสโคดตามที่กําหนดไว
ใน HTML Format Preference
• Show Log on Completion กําหนดใหแสดงกลองขอความที่แสดงรายละเอียด
ของการเปลี่ยนแปลงที่ไดทํากับเอกสาร HTML ที่สรางจาก Word ในขณะที่นํา
เขาเนื้อหาใน Dreamweaver
รูปที่ 3-4 ไดอะล็อก Clean Up Word HTML
Dreamweaver MX : Fundamentals บทที่ 4 : การเชื่อมโยงเอกสาร
บทที่ 4
การเชื่อมโยงเอกสาร
จากที่เราทราบกันดีอยูแลววาเว็บไซตที่เราสรางขึ้นนั้นเกิดจากการนําเว็บเพจหรือ ไฟลที่
สัมพันธกันมารวมกันและ เชื่อมโยงเว็บเพจหรือ ไฟลเหลานั้นเขาดวยกัน ดังนั้นในบทนี้เราอธิบาย
ถึ ง วิ ธี ก ารสร า งการเชื่ อ มโยงหรื อ ที่ เ รี ย กว า ลิ ง ค (Link) ระหว า งเว็ บ เพ จในโปรแกรม
Dreamweaver วาสามารถทําไดอยางไรและ มีการเชื่อมโยงแบบใดบาง
4.1 การอางถึงที่อยูของไฟลในการเชื่อมโยง
การทําความเขาใจกับการอางที่อยูของไฟลจะชวยใหการสรางการเชื่อมโยงระหวางไฟล
ตางๆ ในเว็บไซตที่เราสรางขึ้นทําไดอยางถูกตองมากขึ้น
ในอินเทอรเน็ตแตละไฟลหรือ เว็บเพจที่เราสรางขึ้นจะมีที่อยูที่ไมซ้ํากันที่เราสามารถอาง
ถึงได ซึ่งเราเรียกวา Uniform Resource Locator (URL) รูปแบบของ URL จะประกอบไปดวย 3
สวนดวยกันคือ โปรโตคอล (Protocol) โดเมน (Domain) และ ที่อยูของไฟลในโดเมน (Path)
รูปแบบในการอางถึงที่อยูของไฟลมีอยู 3 แบบดังนี้
4.1.1 แบบสมบูรณ (Absolute Path)
เปนการอางถึงไฟลแบบเต็มรูป คือ ใช URL ในการอางถึงไฟลที่อยูในเว็บไซต อยางเชน
http://www.yahoo.com/index.php จะเป น การอ า งถึ ง ไฟล index.php ที่ อ ยู ในเว็ บ ไซต Yahoo
เปนตน การอางถึงไฟลดวยรูปแบบนี้จะนิยมใชกับการเชื่อมโยงระหวางเว็บไซตมากกวาที่จะใชกับ
การเชื่อมโยงภายในเว็บไซต เพราะวา ถาเว็บไซตของเรามีการเปลี่ยนโดเมนเมื่อไร การเชื่อมโยงที่
เราทําไวในเว็บเพจจะตองมีการแกไขทั้งหมด
4.1.2 แบบสัมพัทธ (Document Relative Path)

เปนการอางถึงไฟลโดยใชความสัมพันธระหวางไฟลที่ทําการเชื่อมโยงกับ ไฟลที่ถูกเชื่อม
โยง ในโครงสรางไดเรกเทอรี่ของเว็บไซต ซึ่งการอางถึงไฟลดวยวิธีนี้จะมี 3 กรณีดวยกันดังนี้
1. ในกรณีที่ไฟลที่ทําการเชื่อมโยงอยูไดเรกเทอรี่ดวยกับไฟลที่ถูกเชื่อมโยงใหใชเพียงชื่อ
ไฟลเทานั้น
2. ในกรณีที่ไฟลที่ถูกเชื่อมโยงอยูไดเรกเทอรี่ยอยของไดเรกเทอรี่ที่ไฟลที่ทําการเชื่อมโยง
อยู ใหใชชื่อไดเรกเทอรี่ยอยตามดวยเครื่องหมาย “/” และชื่อไฟล
3. ในกรณีที่ไฟลที่ถูกเชื่อมโยงอยูในไดเรกเทอรี่ที่อยูเหนือไดเรกเทอรี่ที่ไฟลที่ทําการเชื่อม
โยงหนี่งชั้น ใหใช “../” นําหนาชื่อไฟล
4.1.3 แบบสัมพันธกับรูทไดเรกเทอรี่ของไซต (Site Root Relative Path)
เปนการอางถึงไฟลโดยใชรูทไดเรกเทอรี่หรือ ไดเรกเทอรี่ชั้นนอกสุดของเว็บไซตเปนจุดเริ่ม
ตน ซึ่งการอางถึงไฟลดวยวิธีนี้เราจะแทนรูทไดเรกเทอรรี่ดวย “/” และที่อยูของไฟลโดยเริ่มจากรูท
ไดเรกเทอรรี่
4.2 การสรางการเชื่อมโยงหรือ ลิงค

ใน HTML เราจะใชแท ก “<a></a>” ในการเชื่อมโยงเอกสาร ซึ่ งการเชื่ อมโยงต างๆ ที่
สามารถทําไดมีดังตอไปนี้
4.2.1 การเชื่อมโยงไปยังไฟลหรือ เอกสาร
ใน Dreamweaver เราสามารถที่ จ ะสร า งการเชื่ อ มโยงได โดยทํ า ผ า น Property
Inspector หรือไอคอน Point-to-file ซึ่งขั้นตอนการเชื่อมโยงดวยวิธีตางๆ มีดังตอไปนี้
4.2.1.1 การเชื่อมโยงโดยใช Link Text Box ใน Property Inspector
1. เลือกขอความหรือ วัตถุที่เราตองการจะสรางการเชื่อมโยง
2. คลิกไอคอนโฟลเดอร ใน Property Inspector เพื่อคนหาไฟลที่ตองการเชื่อมโยง
โดยเราสามารถที่จะกําหนดไดวาหลังจากที่เลือกไฟลแลวจะใหสรางขอความที่ใชอาง
ที่ อ ยู ข องไฟล ในลั ก ษณะ Document Relative Path หรือ Site Root Relative Path
ไดในปอปอัพเมนูในไดอะล็อก Select File ดังรูปที่ 4-1
รูปที่ 4-1 ไดอะล็อก Select File
3. หรือ พิมพที่อยูของไฟลลงใน Link Text Box ซึ่งที่อยูของไฟลที่พิมพลงไปจะเปนไป

ตามรูปแบบการอางถึงไฟล 3 รูปแบบที่กลาวมาขางตน
4. เราสามารถที่จะกําหนดตําแหนงที่จะใหเอกสารที่ถูกเชื่อมโยงแสดงผลไดดวยโดย
เลือกที่ Target popup menu โดยความหมายของคาตางๆ ที่อยู popup menu มีดัง
นี้
• _blank สั่งใหเว็บเราเซอรเปดหนาตางใหมพรอมกับแสดงเอกสารที่ถูกเชื่อมโยง
• _parent แสดงผลเอกสารที่ถูกเชื่อมโยงใน parent frame หรือ parent window
ของ frame
• _self แสดงผลเอกสารที่ถูกเชื่อมโยงในหนาเดียวกับที่สวนเชื่อมโยงอยู
• _top แสดงผลเอกสารที่ถูกเชื่อมโยงในหนาตางของเว็บเบราเซอรโดยเอาเฟรมทั้ง
หมดออก
4.2.1.2 การเชื่อมโยงโดยใชไอคอน Point-to-File

1. เลือกขอความหรือ วัตถุที่ตองการสรางการเชื่อมโยง
2. คลิกเมาสปุมซายที่ไอคอน Point-to-File คางไวแลวลากเมาสไปวางยังเอกสารที่
เปดอยูหรือ แสดงอยูใน Site Panel
3. เมื่อไดไฟลที่ตองการเชื่อมโยงแลวปลอยเมาสปุมขวา
4.2.2 การเชื่อมโยงภายในเอกสารเดียวกัน
เราสามารถสรางการเชื่อมโยงภายเอกสารเดียวกันได โดยการกําหนดตําแหนงที่ถูกเชื่อม
โยงภายในเอกสารที่ เราเรีย กว า 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
3. ถาเราตองการที่จะเชื่อมโยงไปยัง named anchor ที่อยูคนละเอกสารกันก็สามารถทํา
ไดโดยพิมพที่อยูของไฟลตามดวยเครื่องหมาย “#” และ ชื่อของ named anchor
รูปที่ 4-2 ไดอะล็อก Named Anchor
4.2.3 การสรางอีเมลลิงค
อีเมลลิงคเปนลิงคที่เมื่อเราคลิกแลวจะเปดหนาตางใหมพรอมกับเรียกโปรแกรมสงอีเมลที่
เรากําหนดไวในเว็บเบราเซอร ซึ่งในชองที่ใหกรอกที่อยูของผูรับของโปรแกรมสงอีเมลจะแสดง
อีเมลแอดเดรส (Email Address) ที่กําหนดไวในอีเมลลิงค ซึ่งการแทรกอีเมลลิงคในเอกสารทําได
ดังนี้
1. เลือกตําแหนง ที่ตองการเพิ่มอีเมลลิงคลงในเอกสาร
2. เลือกเมนู Insert -> E-mail Link หรือ คลิกที่ปุม Email Link ใน Common Tab
ใน Insert Bar
3. หลังจากขั้นตอนที่ 2 จะปรากฎไดอะล็อก Email Link ดังรูปที่ 4-3 ใหพิมพขอความที่
แสดงในเอกสารและ อีเมลแอดเดรสที่ใชตอนคลิกอีเมลลิงค
รูปที่ 4-3 ไดอะล็อก Email Link
4. ซึ่ ง จริ ง ๆแล ว การ Link ไปยั ง email เราก็ ส ามารถใส เองได โดยในช อ ง Link ให ใ ส
mailto: ตรงขางหนา email ที่ตองการ ดังรูป 4-4
รูปที่ 4-4 Email Link ใน Properties Inspector
Dreamweaver MX : Fundamentals บทที่ 5 : การทํางานกับรูปภาพกราฟฟก
บทที่ 5
การทํางานกับรูปภาพกราฟฟก
5.1 ภาพกราฟฟกบนเว็บไซต
ภาพกราฟฟกที่นิยมใชในเว็บเพจมี 3 ชนิดดวยกันคือ GIF, JPG และ PNG
5.1.1 GIF (Graphic Interchange Format)
เปนไฟลภาพที่ใชสีสูงสุดไดเพียง 256 สี ซึ่งจะเหมาะกับภาพที่มีสีเรียบๆ อยาง เชนภาพปุม
ไอคอนหรือ ภาพการตูน เปนตน
5.1.2 JPG (Joint Photographic Experts Group)
เปนไฟลภาพที่ใชสีสูงสุดไดหลายลานสี ซึ่งจะเหมาะกับภาพที่มีการไลเฉดสีมากๆ อยางเชน
ภาพถายหรือ ภาพสามมิติ เปนตน
5.1.3 PNG (Portable Network Group)
เปนไฟลภาพที่สามารถนํามาใชแทนไฟลภาพชนิด GIF ไดซึ่งสนับสนุน indexed-cololr,
grayscale และ true-color image และ มี alpha channel ซึ่งสนับสนุนการทําภาพโปรงใส
ไฟลภาพ PNG ถือวาเปนไฟลพื้นฐานในการทํางานของโปรแกรม Firework ซึ่งไฟล PNG
จะประกอบไปดวย เลเยอร (layer), เวกเตอร (vector), สี และ แอฟเฟกตางๆ ที่ใชกับภาพ เชน แสง
เงา เปนตน และ สวนประกอบที่วานั้นเราสามารถที่จะแกไขไดในทุกๆ สวน
5.2 การวางรูปภาพลงในหนาเอกสาร
เมื่อเราวางรูปภาพลงในเอกสารโปรแกรม Dreamweaver จะสรางโคด HTML ที่อางถึงไฟล
รูปภาพดังกลาวใหเราโดยอัตโนมัติ เพื่อที่จะใหการทํางานเปนไปอยางถูกตองรูปภาพที่เราวางลงใน
เอกสารควรจะอยูในเว็บไซตดวย
ขั้นตอนการวางรูปภาพลงในเอกสารมีดังนี้
1. เลือกจุดที่ตองการวางรูปภาพใน Document Window
2. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้
• คลิกที่ปุม Image ใน Common Tab ของ Insert Bar
• คลิกเมาสปุมซายขางไวที่ปุม Image ใน Common Tab ของ Insert Bar แลวลาก
เมาสมาวางไวบริเวณที่ตองการใน Document Window
• คลิกลากรูปภาพจากพาเนล Assest มาวางไวที่ Document Window
• คลิกลากรูปภาพจากพาเนล Site มาวางไวที่ Document Window
3. จะปรากฎไดอะล็อก Select Image Source ดังรูปที่ 5-1 ใน Select File Name From
ใหเลือก File System ในกรณีที่รูปภาพที่เราตองการจะวางในเอกสารเปนไฟลรูปภาพ
ทั่วไป แตถารูปภาพไดจากฐานขอมูลแลว ใหเลือก Data Source
4. เมื่อคนหารูปภาพที่ตองการไดแลวกดปุม OK เพื่อจบการแทรกภาพลงในเอกสาร
คุณสมบัติตางๆ ของรูปภาพเราสามารถที่จะแกไขไดโดยแกไขผาน Property Inspector
รูปที่ 5-1 ไดอะล็อก Select Image Source
5.3 การปรับคาของรูปภาพ
คุณสมบัติตางๆ ของรูปภาพที่สามารถปรับคาไดมีดังนี้
5.3.1 ความกวางและ ความสูง
การปรับคาความกวางและ ความสูงของรูปภาพสามารถทําไดทํา 2 วิธีดังนี้
1. คลิ ก ที่ รูป ภาพที่ ต อ งการแก ไขใน Document Window แล ว พิ ม พ ค า ความกว า งและ
ความสูงใน Property Inspector
2. คลิกที่รูปภาพที่ตองการแกไขใน Document Window หลังจากที่คลิกแลวจะปรากฎ
กรอบสีดําลอมรอบรูปภาพพรอมกับรูปสี่เหลี่ยมสีดําทางดานลาง ทางขวาและ มุมขวา
ลาง ดังรูปที่ 5-2 ใหเราเลื่อนเมาสพ อยตเตอรไปวางไวที่รูปสี่เหลี่ยมสีดําดังกลาวจน
เมาสพอยตเตอรเปลี่ยนเปนรูปลูกศรสองทาง ใหคลิกลากรูปสี่เหลี่ยมสีดําดังกลาวไป
ทางดานลางถาตองการขยายความสูงของรูป ทางดานขวาถาตองการขยายความกวาง
ของรูปและ ทางมุมขวาลางถาตองการขยายทั้งความสูงและ ความกวางพรอมๆ กัน
รูปที่ 5-2 การเปลี่ยนความกวางและ ความสูงของรูปภาพ
5.3.2 การจัดวางรูปภาพ
การจัดวางรูปภาพในเอกสารจะสัมพันธกับองคประกอบอื่นๆ ที่อยูในแถวหรือ ยอหนาเดียว
กันกับรูปภาพ การจัดวางเราสามารถกําหนดไดโดยใช Property Inspector ซึ่งการจัดวางที่กําหนด
ไดมีดังนี้
1. Baseline และ Bottom จัดวางรูปภาพโดยอยูบนแนวเสนบรรทัดของขอความ
2. Top จัดวางสวนบนสุดของรูปภาพไวที่สวนบนของตัวอักษรหรือ วัตถุที่สูงที่สุด
3. Middel จัดวางจุดกึ่งกลางของรูปใหอยูตรงกับเสนบรรทัด
4. TextTop จัดวางสวนบนสุดของรูปภาพไวที่สวนบนของตัวอักษรที่สูงที่สุด
5. Absolute Middle จัดวางกึ่งกลางของรูปภาพใหตรงกับกึ่งกลางของขอความ
5.4 การเรียกโปรแกรม Fireworks MX มาแกไขรูปภาพใน Dreamweaver MX

Dreamweaver และ Fireworks สามารถที่จะทํางานรวมกันไดในการแกไขรูปภาพที่อยูใน
เว็บเพจ โดยการกําหนดให Dreamweaver เรียก Fireworks มาทํางานเปนอันดับแรกเมื่อมีการเรียก
โปรแกรมจากภายนอกโดย Dreamweaver มาแกไขรูปภาพ โดยขั้นตอนการกําหนดมีดังนี้
1. เลือกคําสั่ง Edit -> Preferances -> File Types / Editors
2. ในคอลัมน Extensions เลือก .png
3. คลิกที่ปุม + เหนือคอลัมน Editors หลังจากที่คลิกจะปรากฎไดอะล็อก Select External
Editor ดังรูปที่ 5-3
4. ในไดอะล็อก Select External Editor คนหาโปรแกรม Fireworks MX เมื่อพบแลวคลิก
ที่ปุม Open เพื่อจบการทํางาน
รูปที่ 5-3 ไดอะล็อก Select External Editor
ในโปรแกรม Fireworks เราก็ตองมีการกําหนดการจัดการกับไฟลรูปภาพ PNG ดวยเมื่อมัน

ถูกเรียกจากโปรแกรมภายนอกในการแกไขรูปภาพ โดยมีขั้นตอนดังนี้
1. เลือกคําสั่ง Edit -> Preferances แลวคลิกที่แทบ Launch and Edit ดังรูปที่ 5-4
รูปที่ 5-4 ไดอะล็อก Preferences
2. เลือกขอกําหนดที่จะใชเมื่อมีการแกไขรูปภาพดวย Fireworks ซึ่งถูกเรียกจากโปรแกรม

อื่น ซึ่งมีขอกําหนดตางๆ ดังนี้
• Always Use Source PNG กําหนดใหเปดไฟล PNG ที่กําหนดไวใน Design Note
ซึ่งเปนไฟลที่ใชสรางรูปภาพที่วางอยูบนเว็บเพจที่เราทํางานอยู เมื่อเราแกไขเปลี่ยน
แปลงรูปภาพที่วางอยูบนเว็บเพจแลวไฟล PNG จะเปลี่ยนแปลงดวย
• Never Use Source PNG กําหนดใหแกไขรูปภาพ ที่วางอยูบนเว็บเพจไมวาจะมี
ไฟล PNG ที่ใชสรางรูปภาพดังกลาวหรือไม การแกไขเปลี่ยนแปลงจะเกิดกับรูป
ภาพที่วางอยูบนเว็บเพจเทานั้น
• Ask When Launching กํ าหนดให เราต องระบุ ขอกํ าหนด 2 ข อข างต น ใหม ทุ ก ๆ
ครั้งที่ Fireworks ถูกเรียกจากโปรแกรมอื่น เพื่อแกไขรูปภาพ
การสรางรูปภาพใหมมาแทนที่รูปภาพ Placeholder ใน Dreamweaver ดวย Fireworks

ใน Dreamweaver เราสามารถที่สรางรูปภาพใหมเพื่อนํามาใชแทนที่รูปภาพ Placeholder
ได โดยใช Fireworks ซึ่งคุณสมบัติตางๆ ของรูปภาพ Placeholder ที่เรากําหนดไวในขณะที่สราง
เว็บเพจดวย Dreamweaver จะเปนขอมูลพื้นฐานใหกับ Fireworks ในการสรางรูปภาพใหม
ใน Fireworks เมื่ อเราสรางรูป ภาพที่จะใชแทนรูป ภาพ Placeholder เสร็จแล วคลิ ก ที่ ปุ ม
Done ดังรูปที่ 5-5 โปรแกรม Fireworks จะใหเราบันทึกไฟลสองครั้งดวยกันในครั้งแรกจะใหบันทึก
ไฟลนามสกุล .png เพื่อใชเปนไฟลหลักเมื่อมีการแกไขภาพที่สรางใหมดังกลาว ในครั้งที่สองจะให
บันทึกไฟลน ามสกุลที่สามารถแสดงผลบนเว็บเพจทั่วไปไดคือ GIF และ JPEG ซึ่งไฟลรูปภาพที่
บันทึกในครั้งที่สองนี้จะถูกนําไปใชแทนรูปภาพ Placeholder ที่มีการสรางรูปภาพใหมมาแทนที่
รูปที่ 5-5 การสรางรูปภาพที่ใชแทนรูปภาพ Placeholder ใน Fireworks
ขั้นตอนการสรางรูปภาพใหมที่ใชแทนที่รูปภาพ Placeholder ดวย Fireworks มีดังนี้

1. เลื อกรูป ภาพ Placeholder ที่ตองการแทนที่ ดวยรูป ภาพใหม หรือเลื อกที่ ปุม Image
Placeholder
• ใน Property Inspector คลิกที่ปุม Create
• กดปุม Control แลวดับเบิ้ลคลิกที่รูปภาพ Placeholder ใน Document Window
• คลิกเมาสปุมขวาที่รูป Placeholder แลวเลือก Create Image
3. หลังจากที่ทําตามขั้นตอนที่ 2 แลว Dreamweaver จะเปดโปรแกรม Fireworks ขึ้นมา

แลวสรางพื้นที่ใชในการสรางรูปภาพซึ่งมีขนาดเทากับรูปภาพ Placeholder
4. สรางรูปภาพตามความตองการเมื่อไดรูปภาพที่ตองการแลวคลิกที่ปุม Done เหนือรูป
ภาพ จะปรากฎไดอะล็อกใหบันทึกไฟลนามสกุล PNG
5. ในฟลด Save In ใหเลือกโฟลเดอรที่เรากําหนดให เปนโฟลเดอรของ Local site และ
พิมพชื่อไฟลรูปภาพลงในฟลด File Name แลวกดปุม Save เพื่อบันทึกไฟลเปนนาม
สกุล PNG
6. หลั ง จากขั้ น ตอนที่ 5 จะปรากฎไดอะล็ อ ก Export เพื่ อ ให เราบั น ทึ ก ไฟล รู ป ภาพที่
สามารถแสดงผลบนเว็บบราวเซอรทั่วไปไดคือ GIF และ JPEG
7. ใหพิมพชื่อไฟลรูปภาพและ เลือกชนิดของไฟลในฟลด Save As type และ กดปุม Save

เพื่อทําการบันทึกไฟล
5.5 การทํา Image Maps

Image Maps คือรูปภาพที่ถูกแบงออกเปนพื้นที่ยอยๆ หรือ ที่เรียกวา Hotspot เมื่อผูใชคลิก
Hotspot เหลานั้นแลวเราอาจจะใหมีการทํางานบางอยางเกิดขึ้น อยางเชน เปดไฟลใหม หรือ ลิงค
ไปยังเว็บเพจอื่น เปนตน
5.5.1 การสราง Image Maps
การสรางพื้นที่ของ Image Maps เราจะใชเครื่องมือที่อยูใน Property Inspector ดังรูปที่ 5-
6 ในการสราง ซึ่งมีขั้นตอนในการสรางดังนี้
รูปที่ 5-6 เครื่องมือที่ใชสราง 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 แลวคลิกลากเมาสพอยเตอรเพื่อสรางพื้นที่เหนือรูปภาพที่ตองการ โดย
การสรางพื้นที่หลายเหลี่ยมเราจะใชการเชื่อมจุดตอจุดไปเรื่อยจนวนกลับมาจุดเริ่ม
ตน ก็จะทําใหไดรูปหลายเหลี่ยมที่ตองการ
5.5.2 การแกไข Image Maps

การแกไข Image Maps เราสามารถที่จะเคลื่อนยาย เปลี่ยนแปลงขนาดและ สําเนาพื้นที่
จากรูปหนึ่งไปวางอีกรูปหนึ่งไดดวย
การยายพื้นที่สามารถทําไดโดยเลือกเครื่องมือที่ใชสรางพื้นที่ของ Image Maps รูปแบบใดก็
ไดใน Property Inspector แลวคลิกเมาสปุมซายที่พื้นที่ใน Image Maps ที่ตองการจะเคลื่อนยาย
คางไวแลวลากเมาสสพอยเตอรไปยังตําแหนงใหมที่ตองการ
การเปลี่ยนแปลงขนาดของพื้นที่ของ Image Maps สามารถทําไดโดยคลิกที่ไอคอนรูปลูกศร
ทางดานมุมลางซายของ Image Maps แลวคลิกลากดานใดดานหนึ่งของพื้ นที่เพื่อเปลี่ยนแปลง
ขนาด
5.6 การใส Flash ลงในเอกสาร

เมื่ อเราใส Flash Movie ลงในเอกสาร Dreamweaver จะใชทั้ งแท ก object และ embed
รวมกัน เพื่อใหการแสดงผล Flash Movie เปนไปไดอยางถูกตองในทุกเว็บบราวเซอร เมื่อเราเปลี่ยน
แปลงค า ของ Flash Movie ใน Property Inspector แล ว Dreamweaver ก็ จ ะเปลี่ ย นแปลงค า ที่
เหมาะสมในแทก object และ embed ใหดวย
ขั้นตอนการใส Flash Movie ลงในเอกสาร
1. ในมุมมองออกแบบของ Document Window เลือกจุดที่ตองการเพิ่ม Flahs 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 เขามา ดังรูปที่ 5-7
รูปที่ 5-7 Flash placeholder หลังจากที่แทรก Flash ลงในเอกสาร
นอกจากนี้เรายังสามารถดู Flash Movie ใน Document Window ไดดวยโดยเลือก Flash

placeholder ที่ตองการดู Flash Movie ใน Property Inspector กดปุม Play เพื่อเลน Flash Movie
และ กดปุม Stop เพื่อหยุดเลน Flash Movie แต Flash Movie นั้นจะตอง Link ในแบบ Document
เทานั้น
Dreamweaver MX : Fundamentals บทที่ 6 : การออกแบบเอกสารโดยใชตาราง
บทที่ 6
การออกแบบเอกสารโดยใชตาราง
6.1 ตาราง (Table)

ตารางเปนเครื่องมือที่เราใชในการแสดงขอมูลที่อยูในลักษณะของตารางและ จัดตําแหนง
การแสดงผลของขอความหรือ รูปภาพ โดยตารางจะประกอบไปดวยแถว (Row) ตั้งแต 1 แถวขึ้นไป
และ ในแตละแถวก็จะประกอบไปดวยเซล (Cell) ตั้งแต 1 เซลขึ้นไป ซึ่งในแตละแถวตําแหนงของเซล
ที่ตรงกันเราจะเรียกวา คอลัมน (Column) ดังรูปที่ 6-1
รูปที่ 6-1 สวนประกอบของตาราง
หลังจากที่เราสรางตารางแลวเราสามารถที่จะเปลี่ยนคุณสมบัติและ โครงสรางของมันได ซึ่ง

การดําเนินการตางๆ กับตารางที่ทําไดมีดังตอไปนี้
1. เพิ่มเนื้อหาลงในตาราง
2. เพิ่ม ลบ แยกและ รวมแถวหรือ คอลัมนในตาราง
3. แกไขคุณสมบัติของตาราง เชน สีพื้นหลัง ความกวางของเซลหรือ การจัดวางขอความ
ภายในเซล เปนตน
4. สําเนาและ วางเซลในตาราง
6.1.1 การเพิ่มตารางลงในเอกสาร
การเพิ่มตารางในเอกสารมีขั้นตอนดังตอไปนี้
1. เลือกตําแหนงที่ตองการจะแทรกตารางในเอกสาร
2. คลิกที่ไอคอน Table ใน Common Tab ของ Insert Bar หรือเลือกเมนู Insert ->
Table จะปรากฎไดอะล็อก Insert Table ดังรูปที่ 6-1
รูปที่ 6-1 ไดอะล็อก Insert Table
3. พิมพคาของคุณสมบัติตางๆ ของตารางดังนี้
• Rows เปนจํานวนแถวของตาราง
• Columns เปนจํานวนคอลัมนของตาราง
• Width เปนความกวางของตาราง
• Border เปนความหนาของขอบตาราง
• Cell Padding เปนความกวางชองวางระหวางขอความที่อยูในเซลกับดานแตละ
ดานในเซล
• Cell Spacing เปนความกวางของชองวางระหวางเซลในตาราง
4. คลิกที่ปุม OK เพื่อจบการสรางตาราง
6.1.2 การเพิ่มเนื้อหาลงในตาราง
ในตารางเราสามารถที่จะเพิ่มขอความหรือ รูปภาพลงในเซลไดเชนเดียวกับการเพิ่มเนื้อหา
ลงในเอกสาร ดังรูปที่ 6-2 เมื่อเราเพิ่มหรือ แกไขเนื้อหาในตาราง เราสามารถที่จะใชคียบอรดเปลี่ยน
ไปแตละเซลของตารางได ซึ่งจะทําใหเราทํางานไดงายขึ้นในการเพิ่มเนื้อหาในแตละเซลของตาราง
การเปลี่ยนไปแตละเซลของตารางโดยใชคียบอรดทําไดดังนี้
1. กดปุม Tab เพื่อยายไปเซลถัดไปในตาราง แตถาอยูในเซลสุดทายของตารางแลวกดปุม
Tab จะเปนการเพิ่มแถวใหมในตาราง
2. กดปุม Shift + Tab จะเปนการยายไปเซลกอนหนาของตาราง
3. กดปุมลูกศรเพื่อยายไปเซลขางบน ขางลาง ทางซายและ ทางขวา
รูปที่ 6-2 การเพิ่มเนื้อหาลงในตาราง
6.1.3 การนําเขาขอมูลที่อยูในรูปของตาราง
ขอมูลที่ถูกจัดอยูในรูปของตารางที่ถูกสรางขึ้นโดยโปรแกรมอื่นๆ เชน MS Excel และถูก
บันทึกในรูปของไฟลขอความที่แยกขอมูลออกจากกันดวยตัวแบง อยางเชน คอมมา (Comma) หรือ
โคลอน (Colon) เปนตน เราสามารถที่จะนําเขามาใชงานในโปรแกรม Dreamweaver และ จัดใหอยู
ในตารางได โดยขั้นตอนตางๆ ในการนําเขาขอมูลและ จัดใหอยูในตารางมีดังตอไปนี้
1. เลือกเมนู File -> Import -> Tabular Data หรือ เลือกเมนู Insert -> Table Object ->
Import Tabular Data
2. หลังจากขั้นตอนที่ 1 จะปรากฎไดอะล็อก Import Tabular Data ดังรูปที่ 6-3 ใหกรอก
ขอมูลเพื่อใชในการสรางตารางจากขอมูลที่นําเขาจากภายนอก ซึ่งขอมูลที่ใหกรอกมีดัง
นี้
• Data File เป น ไฟล ขอ ความที่ ขอมู ลภายในไฟล ถู ก จั ด เก็ บ ในรูป ของตารางและ
ตองการนําเขามาใชใน Dreamweaver
• Delimiter เป น อั ก ขระที่ ใ ช แ บ ง ข อ มู ล ในแต ล ะแถวที่ อ ยู ใ น Data File ออกเป น
คอลัมน เชน แทป (Tab), คอมมา (Comma) เปนตน
• Table Width เปนสวนที่ไวใชกําหนดความกวางของตารางวาจะใหกวางพอดีกับขอ
มูลในตาราง (Fit to Data) หรือ กวางตามที่เรากําหนด (Set)
• Cell Padding เปนความกวางของชองวางระหวางขอมูลภายในเซลกับดานแตละ
ดานของเซล
• Cell Spacing เปนความกวางของชองวางระหวางเซลในตาราง
• Format Top Row กําหนดลักษณะของขอความในแถวแรกสุดของตารางวาเปนตัว
หนา ตัวเอียงหรือ ทั้งตัวหนาและ ตัวเอียง
3. เมื่อกรอกขอมูลครบแลวกดปุม OK เพื่อจบการนําเขาขอมูล
รูปที่ 6-3 ไดอะล็อก Import Tabular Data
6.1.4 การเลือกสวนตางๆ ของตาราง

แตละตารางที่เราสรางขึ้นเราสามารถที่จะเลือกทั้งตาราง เฉพาะแถวหรือ เซลได นอกจากนี้
เรายังสามารถเลือกแถวหรือ เซลในลักษณะตอเนื่องกันไดดวย หลังที่จากเลือกตาราง แถวหรือ เซลที่
ตองการไดแลวเราสามารถที่จะแกไขคุณสมบัติตางๆ หรือ สําเนาและ วางเซลที่เราเลือกทั้งหมดได
6.1.4.1 การเลือกทั้งตาราง
การเลือกทั้งตารางทําได 3 วิธีดังนี้
1. เลื่อนเมาสพอยตเตอรไปที่มุมใดมุมหนึ่งของตารางจนเมาสพอยตเตอรเปลี่ยนเปนรูป
แลวคลิกที่ตารางจะเกิดกรอบสีดํารอบตารางเพื่อบอกวาตารางถูกเลือกอยู ดังรูปที่
6-4
รูปที่ 6-4 การเลือกตารางโดยคลิกที่มุมใดมุมหนึ่งของตาราง
2. คลิกในเซลของตารางแลวเลือกแทก Table ใน Tag Selector ดังรูปที่ 6-5
รูปที่ 6-6 การเลือกตารางโดยใช Tag Selector
3. คลิกในเซลของตารางแลวเลือกเมนู Modify -> Table -> Select Table
6.1.4.2 การเลือกแถวคอลัมนหรือ เซล

1. เลื่อนเมาสพอยตเตอรไปที่มุมซายของแถว คอลัมนหรือ เซล
2. เมื่ อ เมาส พ อยต เตอร เปลี่ ย นเป น Selection Arrow แล ว คลิ ก เพื่ อ เลื อ กแถวหรื อ
คอลัมน ดังรูปที่ 6-7
รูปที่ 6-7 การเลือกแถวหรือ คอลัมนในตาราง
3. เมื่ อ ต อ งการเลื อ กแถว คอลั ม น ห รือ เซล มากกว า หนึ่ ง ขึ้ น ไปให ค ลิ ก ลากไปยั ง แถว
คอลัมนหรือ เซลที่ตองการ
6.1.5 การ กําหนดคุณสมบัติของตาราง

การ กําหนดคุณสมบัติของตารางเราจะทําผาน Property Inspector ซึ่งมีขั้นตอนตางๆ ดังนี้
1. เลือกตารางที่ตองการ
2. ถ า Property Inspector ยั ง ไม เ ป ด เลื อ ก Window -> Property เพื่ อเป ด Property
Inspector
3. แกไขคุณสมบัติตางๆ ของตารางที่ตองการใน Property Inspector ซึ่งคุณสมบัติที่แกไข

ไดมีดังนี้
• Table Id เปนชื่อของตาราง
• Row เปนจํานวนแถวของตาราง
• Column เปนจํานวนคอลัมนของตาราง
• W เปนความกวางของตารางซึ่งเราสามารถกําหนดคาเปนเปอรเซ็นตหรือ พิกเซลได
• H เปนความสูงของตารางซึ่งเราสามารถกําหนดคาเปนเปอรเซ็นตหรือ พิกเซลได
• CellPade เปนความกวางของชองวางระหวางเนื้อหาภายในเซลกับดานแตละดาน
ของเซลในตาราง
• CellSpace เปนความกวางของชองวางระหวางเซลแตละเซลในตาราง
• Align เปนการจัดวางตารางในเอกสารซึ่งการจัดวางที่กําหนดไดคือ ชิดซาย ชิดขวา
และ ตรงกลาง
• Bg Color เปนสีพื้นหลังของตาราง
• Brdr เปนสีของขอบตาราง
• Bg Image เปนรูปภาพที่ใชเปนพื้นหลังของตาราง
6.1.6 การเปลี่ยนความกวาง ความสูงของแถวและ คอลัมน

เราสามารถเปลี่ ย นความกวา ง ความสู ง ของแถวและ คอลั ม น ได โดยทํ า ผ า น Property
Inspector หรือ คลิกลากที่กรอบของแถวหรือ คอลัมนที่ตองการ โดยขั้นตอนการเปลี่ยนขนาด แถว
และ คอลัมนมีดังนี้
6.1.6.1 การเปลี่ยนขนาดแถวหรือ คอลัมนผานทาง Document Window
1. เมื่อตองการเปลี่ยนความกวางของคอลัม น ใหเลือกคอลัม นที่ตองการแลวคลิกลาก
กรอบทางดานขวาของคอลัมน ดังรูปที่ 6-8
รูปที่ 6-8 การปรับความกวางของคอลัมน
2. เมื่อตองการเปลี่ยนความสูงของแถว เลือกแถวที่ตองการแลวคลิกลากกรอบทางดาน
ลางของแถว ดังรูปที่ 6-9
รูปที่ 6-9 การปรับความสูงของแถว
6.1.6.2 การเปลี่ยนขนาดของแถวหรือ เซลผานทาง Property Inspector

1. เลือกเซลหรือ แถวที่ตองการ
2. เลือกเมนู Window -> Property เพื่อเปด Property Inspector
3. กรอกความกวางและ ความสูงที่ตองการใน Property Inspector
6.1.6.3 การยกเลิกความกวางและ ความสูงของเซลทั้งหมดในตาราง

1. เลือกตารางที่ตองการยกเลิกความกวางและ ความสูงของเซลทั้งหมด
• เมื่ อ ต อ งการยกเลิ ก ความกว า งให เ ลื อ กเมนู Modify -> Table -> Clear Cell
Widths
• เมื่อตองการยกเลิกความสูงใหเลือกเมนู Modify -> Table -> Clear Cell Heights
6.1.7 การเพิ่มแถวและ คอลัมนในตาราง

การเพิ่มแถวและ คอลัมนในตารางมีขั้นตอนตางๆ ดังตอไปนี้
1. คลิกเซลในแถวหรือ คอลัมนที่ตองการเพิ่มแถวหรือ คอลัมน
2. ทําตามขั้นตอนใดขั้นตอนหนึ่งดังตอไปนี้
• เมื่อตองการลบแถวใหเลือกเมนู Modify -> Table -> Delete Row

• เมื่อตองการลบคอลัมนเลือก Modify -> Table -> Delete Column
• เมื่อตองการเพิ่มหลายแถวหรือ คอลัมนในครั้งเดียวใหเลือก Modify -> Table ->
Insert Rows or Columns จะปรากฎไดอะล็อก Insert Rows or Columns ดังรูปที่
6-10 ใหกรอกจํานวนแถวหรือ คอลัมนที่จะเพิ่ม เมื่อกรอกขอมูลเสร็จแลว กดปุม
OK เพื่อจบการทํางาน
รูปที่ 6-10 ไดอะล็อก Inser Rows or Columns
6.1.8 การลบแถวและ คอลัมนในตาราง

การลบแถวและ คอลัมนในตารางมีขั้นตอนตางๆ ดังตอไปนี้
1. คลิกเซลที่อยูในแถวหรือ คอลัมนที่เราตองการลบ
2. ทําตามขั้นตอนใดขั้นตอนหนึ่งดังตอไปนี้
• เมื่อตองการลบแถวใหเลือกเมนู Modify -> Table -> Delete Row
• เมื่อตองการลบคอลัมนใหเลือกเมนู Modify -> Table -> Delete Column
6.2 การจัดวางเนื้อหาของเว็บเพจในมุมมองเลยเอาท (Layout View)
วิธีการเบื้องตนในการจัดวางเนื้อหาของเว็บเพจคือ ใชตารางมาชวยในการจัดตําแหนงขอความและ
รูปภาพในเอกสาร แตวาการนําตารางมาใชก็ยังมีปญหาอยู เนื่องจากตารางใชแสดงขอมูลทีอ่ ยูใ นรูป
ของตาราง ดังนั้นการนํามาใชในการจัดวางเนื้อหาทําไดไมสะดวกเทาที่ควร
เพื่ อ ให ก ารนํ า ตารางมาใช ใ นการจั ด วางเนื้ อ หาต า งๆ ในเอกสารทํ า ได ง า ยขึ้ น ใน
Dreamweaver จึงมีสวนที่เรียกวา มุมมองเลยเอาท เขามาชวยในการจัดวางเนื้อหาตางๆ ในเอกสาร
ในมุมมองเลยเอาทเราสามารถที่จะออกแบบเว็บเพจของเราโดยใชการวาดและ เคลื่อนยาย Layout
Table และ Layout Cell บนเอกสาร ในขณะที่โครงสรางภายใตมุมมองเลยเอาทก็ยังคงเปนตาราง
เชนเดิม
6.2.1 การสลับจากมุมมองปกติเปนมุมมองเลยเอาท (Layout View)
กอนที่เราจะวาด Layout Table และ Layout Cell เราควรจะสลับจากมุมมองปกติไปเปน
มุมมองเลยเอาทเสียกอน ซึ่งขั้นตอนการสลับมุมมองมีดังนี้
6.2.1.1 การสลับไปมุมมองเลยเอาท
1. ถา Document Window อยูในมุมมองโคดใหเปลี่ยนไปเปนมุมมองออกแบบกอนโดย
เลือกคําสั่ง View -> Design View หรือ View -> Code and Design หลังจากที่เลือก
คําสั่งแลว Document Window จะเปลี่ยนเปนมุมมองเลยเอาท ดังรูปที่ 6-11
รูปที่ 6-11 Dcoument Window ในมุมมองเลยเอาท
2. เลื อ ก คํ า สั่ ง View -> Table View -> Layout View ห รื อ ค ลิ ก ปุ ม Layout View
ใน Layout Tab ของ Insert Bar
6.2.1.2 การสลับไปมุมมองปกติ
1. ถา Document Window อยูในมุมมองโคดใหเปลี่ยนไปเปนมุมมองออกแบบกอนโดย
เลือกเมนู View -> Design View หรือ View -> Code and Design
2. เลือกเมนู View -> Table View -> Standard View
6.2.2 การวาด Layout Cell และ Layout Table

6.2.2.1 การวาด Layout Cell
1. คลิ ก ที่ ปุ ม Draw Layout Cell ใน Layout Tab ของ Insert Bar หลั ง จากที่ ค ลิ ก
เมาสพอยเตอรจะเปลี่ยนเปนเครื่องหมาย +
2. เลื่อนเมาสพอยเตอรไปยังตําแหนงที่ตองการเริ่มวาด Layout Cell ในเอกสารแลวคลิก

ลากเพื่อสราง Layout Cell ดังรูปที่ 6-12
รูปที่ 6-12 การวาด Layout Cell
6.2.2.2 การวาด Layout Table

1. คลิ ก ที่ ปุ ม Draw Layout Table ใน Layout Tab ของ Insert Bar หลังจากที่ ค ลิก
เมาสพอยเตอรจะเปลี่ยนเปนเครื่องหมาย +
2. เลื่อนเมาสพอยเตอรไปยังตําแหนงที่ตองการเริ่มวาด Layout Table ในเอกสารแลวคลิก
ลากเพื่อสราง Layout Table ดังรูปที่ 6-13
รูปที่ 6-13 การวาด Layout Table
6.2.3 การเพิ่มเนื้อหาลงใน Layout Cell

การเพิ่มเนื้อหาลงใน Layout Cell เราสามารถทําไดเชนเดียวกับการเพิ่มเนื้อหาลงในเซล
ของตาราง ในมุมมองเลยเอาทการเพิ่มเนื้อหาจะทําไดเฉพาะใน Layout Cell เทานั้น ดังนั้นทุกครั้งที่
ตองการเพิ่มเนื้อหาเราควรจะตองสราง Layout Cell เสียกอน
Layout Cell จะขยายออกเมื่อเราเพิ่มเนื้อหาที่กวางกวาความกวางของ Layout Cell รวมไป
ถึงคอลัมนของ Layout Cell ดังกลาวดวยและ สวนหัวของคอลัมนจะแสดงความกวางที่อยูในโคด
ตามดวยความกวางที่เห็นในมุมมองเลยเอาทในวงเล็บเปดและ วงเล็บปด ดังรูปที่ 6-14
รูปที่ 6-14 ความกวางของคอลัมนที่แสดงในสวนหัวของคอลัมน
6.2.4 การยายและ เปลี่ยนขนาดของ Layout Cell และ Layout Table

เราสามารถที่ จ ะย า ยและ เปลี่ ย นขนาดของ Layout Cell และ Layout Table ที่ อ ยู ใ น
Layout Table อีกทีได เพื่อใหเราสามารถแกไขการจัดวางเนื้อหาในเอกสารได
เนื่องจาก Layout Cell ไมสามารถวางทับ Layout Cell และ Layout Table อื่นๆได ดังนั้น
เราไมสามารถที่จะยายหรือ เปลี่ยนขนาดจนไปทับกับ Layout Cell และ เกินขอบเขตของ Layout
Table เดิมที่มีอยูได นอกจากนี้ Layout Table ก็ไม ส ามารถเปลี่ ย นขนาดให เล็ ก กวา Layout
Cell ที่อยูในตัวมันไดหรือ เปลี่ยนขนาดจนไปทับกับ Layout Table อื่นๆ ได
6.2.4.1 การเปลี่ยนขนาดของ Layout Cell
1. คลิกที่ดานใดดานหนึ่งของ Layout Cell หลังจากที่เลือกจะปรากฎ Selection Handle
รอบ Layout Cell ดังรูปที่ 6-15
รูปที่ 6-15 Selection Handle ของ Layout Cell
2. คลิกลากที่รูปสี่เหลี่ยมของ Selection Handle เพื่อเปลี่ยนขนาด
6.2.4.2 การยาย Layout Cell

1. เลือกดานใดดานหนึ่งของ Layout Cell
2. คลิกลาก Layout Cell ไปวางยังตําแหนงที่ตองการหรือ กดปุ ม ขึ้น ลง ซาย ขวา เพื่ อ

เลื่อนไปที่ละ 1 พิกเซล
6.2.4.3 การเปลี่ยนขนาดของ Layout Table

1. เลื อ ก Layout Table โดยคลิ ก ที่ Tab ที่ อ ยู เ หนื อ Table หลั ง จากที่ ค ลิ ก จะปรากฎ
Selection Handle รอบ Layout Table ดังรูปที่ 6-16
2. คลิกลากรูปสี่เหลี่ยมของ Selection Handle เพื่อเปลี่ยนขนาด
รูปที่ 6-16 Selection Handle ของ Layout Table
6.2.4.4 การยาย Layout Table

1. เลื อ ก Layout Table โดยคลิ ก ที่ Tab ที่ อ ยู เ หนื อ Table หลั ง จากที่ ค ลิ ก จะปรากฎ
Selection Handle รอบ Layout Table
2. คลิกลาก Layout Table ไปยังตําแหนงที่ตองการ (การยาย Layout Table จะทําไดใน
กรณีที่ Layout Table ซอนอยูใน Layout Table อีกทีหนึ่งเทานั้น)
6.2.5 การกําหนดรูปแบบของ Layout Cell และ Layout Table

เราสามารถที่จะกําหนดรูปแบบของ Layout Cell และ Layout Table ไดโดยการแกไขคุณ
สมบัติตางๆ ของ Layout Cell และ Layout Table ใน Property Inspector
6.2.5.1 การกําหนดรูปแบบของ Layout Cell

ใน Property Inspector เราสามารถที่จะแกไขความกวาง ความสูง สีพื้นหลังและ การจัด
วางเนื้อหาของ Layout Cell ได ซึ่งมีขั้นตอนดังนี้
1. เลือกดานใดดานหนึ่งของ Layout Cell หรือ กดปุม Control คางไวพรอมกับคลิกใน

Layout Cell ที่ตองการเลือก
2. เปด Property Inspector โดยเลือกคําสั่ง Window -> Properties
3. แกไขคุณสมบัติตางๆ ของ Layout Cell ตามตองการใน Property Inspector ซึ่งคุณ
สมบัติที่แกไขไดมีดังนี้
• Width เปนความกวางของ Layout Cell ซึ่งเราสามารถกําหนดใหความกวางคงที่

หรือ ขยายตามเนื้อหาได โดยเลือกที่ Fixed หรือ Autostretch ตามลําดับ
• Height เปนความสูงของ Layout Cell
• Bg เปนสีพื้นหลังของ Layout Cell
• Horz เปนการจัดวางตามแนวนอนของ Layout Cell ใน Layout Table
• Vert เปนการจัดวางตามแนวตั้งของ Layout Cell ใน Layout Table
• No Warp เปนการกําหนดใหมีการขึ้นบรรทัดใหมอัตโนมัติถาเนื้อหายาวเกินกวา
ความกวางของ Layout Cell
6.2.5.2 การกําหนดรูปแบบของ Layout Table

ใน Property Inspector เราสามารถที่จะแกไข ความสูง สีพื้นหลัง ชองวางภายในเซลและ
ชองวางระหวางเซลใน Layout Table ได ซึ่งมีขั้นตอนดังนี้
1. เลือกดานใดดานหนึ่งของ Layout Table หรือ เลือกแทก <table> ใน Tag Selector

3. แกไขคุณสมบัติตางๆ ของ Layout Cell ตามตองการใน Property Inspector ซึ่งคุณ

สมบัติที่แกไขไดมีดังนี้
• Width เปนความกวางของ Layout Table ซึ่งเราสามารถกําหนดใหความกวางคงที่
หรือ ขยายตามเนื้อหาได โดยเลือกที่ Fixed หรือ Autostretch ตามลําดับ
• Height เปนความสูงของ Layout Table
• Bg เปนสีพื้นหลังของ Layout Table
• CellPad เปนความกวางของชองวางระหวางเนื้อหากับ ดานแตละดานของ Layout
Table
• CellSpace เปนความกวางของชองวางระหวาง Layout Cell ใน Layout Table
6.2.6 การกําหนดความกวางของคอลัมนมุมมองเลยเอาท
ความกวางของคอลัมนในมุมมองเลยเอาทเราสามารถที่จะกําหนดใหคงที่หรือ ขยายออก
อัตโนมัติ (Autostrech) ตามเนื้อหาที่อยูในคอลัมนจนเทากับความกวางสูงสุดของเว็บบราวเซอร
สามารถแสดงผลได ซึ่งความกวางของแตละคอลัมนจะถูกแสดงในสวนหัวของคอลัมนของตารางที่
เราเลือก
เมื่อเรากําหนดใหความกวางของคอลัมนเปนคาคงที่ในสวนหัวของคอลัมนจะแสดงคาความ
กวางเปนตัวเลขที่เรากําหนด ดังรูปที่ 6-17(1) แตถาเรากําหนดใหความกวางของคอลัมนขยายออก
อัตโนมัติ ในสวนหัวของคอลัมนจะแสดงเสนคลื่นแทนที่จะเปนตัวเลขความกวาง ดังรูปที่ 6-17(2)
รูปที่ 6-17 ความกวางคงที่และ ขยายออกไดอัตโนมัติของ Layout Table
เราสามารถที่จะกําหนดใหความกวางของคอลัมนคงที่ไดเพียงหนึ่งคอลัมนเทานั้นในแตละ
ตาราง หลังจากที่เรากําหนดใหคอลัมนสามารถขยายออกไดอัตโนมัติแลว Dreamweaver จะเพิ่มรูป
ภาพที่ใชแทนพื้นที่วางในคอลัมนที่มีความกวางคงที่เพื่อใหรับประกันไดวาคอลัมนดังกลาวจะเปนไป
ตามที่ไดกําหนดได
6.2.6.1 การกําหนดใหความกวางของคอลัมนขยายอัตโนมัติ
การกําหนดใหความกวางของคอลัมนขยายอัตโนมัติมี 2 วิธีดังนี้
• ในส ว นหั ว ของคอลั ม น ที่ มี ค วามกว า งคงที่ ใ ห ค ลิ ก ที่ ตั ว เลขและ เลื อ กคํ า สั่ ง Make
Column Autostrech
• หรือเลือกเซลในคอลัมนโดยคลิกที่ดานใดดานหนึ่งของของเซลหรือ กดปุม Control คาง
ไวแลวคลิกภายในเซลที่ตองการหลังจากนั้น ใน Property Inspector เลือก Autostrech
6.2.6.2 การกําหนดใหความกวางของคอลัมนคงที่
การกําหนดใหความกวางของคอลัมนคงที่มี 2 วิธีดังนี้
• ในสวนหัวของคอลัมนที่มีความกวางแบบขยายไดอัตโนมัติใหคลิกที่รูปคลื่นและ เลือก
คําสั่ง Make Column Fixed Width
• หรือเลือกเซลในคอลัมนโดยคลิกที่ดานใดดานหนึ่งของเซลหรือ กดปุม Control คางไว
แลวคลิกภายในเซลที่ตองการหลังจากนั้นใน Property Inspector เลือก Fixed
6.2.7 การใชรูปภาพที่ใชแทนพื้นที่วาง (Spacer Image)

Spacer Image คือ รูปภาพโปรงใสที่ใชในการควบคุมพื้นที่วางในตารางที่สามารถขยาย
ขนาดไดโดยอัตโนมัติตามเนื้อหาในตาราง เนื่องจากเว็บบราวเซอรไมสามารถแสดงคอลัมนของตา
รางให กวางกวาความกวางของรูปภาพที่อยูในเซลของคอลัมนดังกลาวได ดังนั้น การใช Spacer
Image จะทําใหเราสามารถควบคุมความกวางสูงสุดของแตละคอลัมนไดโดยขึ้นอยูกับความกวาง
ของ Spacer Image
6.2.8 การกําหนด Spacer Image ที่จะใชในเอกสาร

1. กํ า หนดให ค วามกว า งของคอลั ม น ส ามารถขยายอั ต โนมั ติ ได ห รือ เลื อ กคํ า สั่ ง Add
Spacer Image จากหัวคอลัมน ดังรูปที่ 6-18
รูปที่ 6-18 การเพิ่ม Spacer Image โดยใชปอปอัพเมนูในสวนหัวของคอลัมน
2. หลังจากที่เลือกคําสั่งจะปรากฎไดอะล็อกพรอมออปชั่นใหเลือกดังนี้
• Create spacer image file เปนออปชั่นที่กําหนดให Dreamweaver สรางรูปภาพ
ชนิด GIF ขึ้นใหมเพื่อใชเปน Spacer Image
• Use and existing spacer image file เปนออปชั่นที่กําหนดให Dreamweaver ใช
Spacer Image ที่มีอยูแลวซึ่งเราเปนคนสรางเอง ถาเลือกออปชั่นนี้แลวกดปุม Ok
จะปรากฎไดอะล็อกใหคนหาและ เลือกไฟลภาพที่ใชเปน Spacer Image
• Don’t use spacer image for autostretch table เ ป น อ อ ป ชั่ น ที่ บ อ ก ใ ห
Dreamweaver ไมตองเพิ่ม Spacer Image ลงในตาราง
3. กดปุม OK เพื่อจบการทํางาน
6.2.9 การลบ Spacer Image ออกจากคอลัมน

เลือกคําสั่ง Remove Spacer Image ในหัวคอลัมนที่ตองการลบ Spacer Image ออก
6.2.10 การลบ Spacer Image ออกจากตารางทั้งหมด

เลื อ กคํ า สั่ ง Remove Spacer Image ในทุ ก หั ว คอลั ม น ที่ อ ยู ใ นตารางหรื อ คลิ ก ที่ ปุ ม
Remove All Spacer ใน Property Inspector ของ Layout Table
6.3 การใช Tracing Image ในการออกแบบเว็บเพจ

Tracing Image เปนรูปภาพที่เราใชเปนโครงรางในการออกแบบเว็บเพจ ซึ่งจะถูกวางไวเปน
พื้นหลังของ Document Window ดังรูปที่ 6-19โดยที่เราสามารถซอน แสดง กําหนดความโปรงใส
และ ตําแหนงของมันได ชนิดของภาพที่เราสามารถใชเปน Tracing Image ไดคือ JPEG, GIF และ
PNG
รูปที่ 6-19 Document Window เมื่อมีการใช Tracing Image
Tracing Image จะแสดงผลเฉพาะใน Document Window เทานั้น เมื่อเราเปดเว็บเพจที่

สรางในเว็บบราวเซอร Tracing Image จะไมถูกแสดงผล เมื่อเราใช Tracing Image และ กําหนดให
มันแสดงผลใน Document Window สีพื้นหลังหรือ รูปภาพพื้นหลังที่เรากําหนดไวของเว็บเพจจะถูก
ซอนการแสดงผลชั่วคราวเมื่อเรากําหนดให Tracing Image ซอนการแสดงผล สีพื้นหลังหรือ รูป
ภาพพื้นหลัง ก็จะแสดงผลเหมือนเดิม
ขั้นตอนการใช Tracing Image มีดังนี้
1. เลือกคําสั่ง View -> Tracing Image -> Load หรือ เลือก Modify -> Page Propertis
แลวจะปรากฎไดอะล็อก Page Properties ใหกดปุม Browse ที่อยูติดกับฟลด Tracing
Image ดังรูปที่ 6-20(1) เพื่อคนหาและ เลือกไฟลภาพที่จะใชเปน Tracing Image
2. ในไดอะล็อก Select Image Source เลือกไฟลภาพที่ตองการและ คลิกที่ปุม Select
3. ในไดอะล็ อ ก Page Properties กํ า หนดความโปรงใสของ Tracing Image โดยคลิ ก
ลากที่ Image Transparency slider ดังรูปที่ 6-20(2) และ คลิกปุม OK เพื่อจบการใช
Tracing Image
4. ถาตองการแสดงและ ซอน Tracing Image ใหเลือกคําสั่ง View -> Tracing Image ->
Show
5. ถ า ต อ งการเปลี่ ย นตํ า แหน ง ของ Tracing Image ให เ ลื อ กคํ า สั่ ง View -> Tracing
Image -> Adjust Position จะปรากฎไดอะล็ อ กที่ ให กํ า หนดตํ า แหน ง ของ Tracing
Image ตามแนวแกน X และ Y ตามลําดับ
6. ถาตองการจัดวาง Tracing Image ใหสัมพันธกับวัตถุที่อยูใน Document Window ให

เลือกวัตถุใน Document Window ที่ใชอางอิงแลวเลือกคําสั่ง View -> Tracing Image
-> Align With Selection
รูปที่ 6-20 การใชงาน Tracing Image โดยกําหนดในไดอะล็อก Page Properties
Dreamweaver MX : Fundamentals บทที่ 7 : การใชงาน Templates และ Libraries
บทที่ 7
การใชงาน Templates และ Libraries
7.1 เกี่ยวกับ Template

Template เปนเอกสารพิเศษที่ใชเปนแมแบบในการสรางเว็บเพจ โดยใน Template จะ
ประกอบไปดวยพื้นที่ 2 ชนิดดวยกัน ดังรูปที่ 7-1 คือ
1. พื้นที่คงที่ (Non Editable Region) จะเปนสวนของเว็บเพจที่เหมือนกันในทุกหนาซึ่ง
ในสวนนี้จะไมสามารถแกไขไดในเว็บเพจที่สรางจาก Template ดังกลาว
2. พื้นที่ที่แกไขได (Editable Region) จะเปนสวนของเว็บเพจที่ไมเหมือนกันในแตละ
หนา ซึ่งในสวนนี้จะสามารถทําการแกไขเนื้อหาที่มีอยูไดในเว็บเพจที่ใช Template ดัง
กลาวได
รูปที่ 7-1 ประเภทของพื้นที่ใน Template
ประโยชน ของ Template ก็คื อเมื่ อเราแกไข Template ใดก็ตามแลวเว็บ เพจที่ถูก สราง
โดยมีพื้นฐานจาก Template ดังกลาวจะถูกแกไขดวย
7.2 การกําหนดพื้นที่แกไขไดใน Template

จากที่กลาวไวขางตนถึงพื้นที่ 2 ชนิดที่อยูใน Template คือ พื้นที่คงที่และ พื้นที่ที่แกไขได
ตอนที่ เราสร า ง Template พื้ น ที่ ทั้ ง 2 ชนิ ด เราสามารถจะแก ไขได แต ใ นเอกสารที่ ส ร า งจาก
Template ดังกลาวจะแกไขเนื้อหาบนพื้นที่ที่แกไขไดอยางเดียว ซึ่งรูปแบบของพื้นที่ที่แกไขไดจะมี
4 ชนิดดวยกันดังนี้
1. Editable Region เปนพื้นที่ที่สามารถแกไขไดในเอกสารที่ถูกสรางจาก Template ซึ่ง
ในหนึ่ง Template เราสามารถที่จะสราง Editable Region ไดหลายอัน
2. Repeating Region เปนพื้นที่ในเอกสารที่มีเราสามารถสรางซ้ําได อยางเชน แถวของ

ตาราง เปนตน พื้นที่ที่สามารถสรางซ้ําไดจะทําใหผูใชสามารถสรางวัตถุในเว็บเพจที่มี
ลักษณะรายการไดในขณะที่สิ่งที่ออกแบบไวไมเปลี่ยนแปลง
3. Option Region เปนพื้นที่ใน Template ที่ผูออกแบบสามารถกําหนดใหเปนตัวเลือก
ที่ใชใสเนื้อหาที่อาจจะแสดงหรือ ไมแสดงในเอกสารที่ใช Template ดังกลาวได
4. Editable Tag Attribute เป น พื้ น ที่ ที่ อยู ในแท็ ก ของ HTML ที่ อยู ใน Template ที่ เรา
สรางขึ้นทําใหเราสามารถแกไขคุณสมบัติของวัตถุผานทาง Template Properties ได
ซึ่งมีประโยชนในกรณีที่เราตองการใหแสดงวัตถุดังกลาวแตสามารถเปลี่ยนแปลงคุณ
สมบัติของมันได เชน การจัดวาง หรือ ขนาดเปนตน
7.3 การสราง Template

การสราง Template เราสามารถสรางจากเอกสารที่มีอยูในปจจุบันหรือ สรางขึ้นใหมก็ได
Dreamweaver จะบันทักไฟล Template ที่เราสรางขึ้นในโฟลเดอรชื่อ Templates โดยมีนามสกุล
ของไฟลเปน .dwt
7.3.1 การบันทึกเอกสารใหเปน Template
1. เปดเอกสารที่ตองการบันทึกเปน Template ใน Document Window
2. เลือกคําสั่ง File -> Save as Template
3. จะปรากฎไดอะล็ อ ก Save As Template ดั ง รู ป ที่ 7-2 ให เลื อ กไซต ที่ ต อ งการบั น ทึ ก
Template ในปอปอัพเมนู Site แลวพิมพชื่อไฟลที่จะบันทึกในฟลด Save As
รูปที่ 7-2 ไดอะล็อก Save As Template
4. คลิกปุม Save เพื่อบันทึกไฟล

7.3.2 การสราง Template ดวย Assets Panel
1. เปด Assets Panel
2. เลือกหมวด Template
3. คลิกที่ปุม New Template ที่อยูทางดานลางของ Assets Panel แลว ชื่อเอกสารใหม
จะถูกเพิ่มเขาไปใน List Box ที่ใชแสดงรายชื่อของ Assets พรอมกับแสดงแถบสีบนชื่อ
เอกสารใหม ดังรูปที่ 7-3
รูปที่ 7-3 พาเนล Assests เมื่อมีการสราง Template ใหม
4. พิมพชื่อเอกสารใหมที่ตองการ
5. เลื อ กปุ ม Edit ใน Assets Panel แล ว เอกสารที่ เราสร า งใหม จ ะถู ก เป ด ใน Document
Window
7.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
7.3.4 การแกไข Editable Region

ถาเราตองการแกไข Editable Region ใหเปนพื้นที่ที่ไมสามารถแกไขไดใหทําดังนี้
1. เลือก Editable Region ที่ตองการแกไข
2. เลือกคําสั่ง Modify -> Template -> Remove Template Markup
7.3.5 การสราง Repeating Region

Repeating Region เปน พื้น ที่ที่เราสามารถทําการสรางซ้ําได เมื่อเราใช Template ที่มี
Repeation Region ในการสรางเอกสารใหมหรือ ใชกับเอกสารเดิมที่มีอยูแลว Dreamweave จะ
แสดงกรอบที่ใชบอกขอบเขตของ Repeating Region พรอมกับปุมที่ใชสราง ลบและ เลือกพื้นที่
ตองการสรางซ้ําได ดังรูปที่ 7-4
รูปที่ 7-4 Repeation Region
ขั้นตอนการสราง Repeation Region

1. เลือกขอความหรือ เนื้อหาที่ตองการกําหนดใหเปน Repeating Region
2. เลือกคําสั่ง Insert -> Template Object -> Repeating Region
3. ในฟ ลด Name พิ มพ ชื่ อ ของ Repeating Region ซึ่ ง ต อ งไม ซ้ํ า กั บ Repeating
Region เดิมที่มีอยูใน Template
4. คลิกปุม OK เพื่อสราง
7.3.6 การสราง Repeating Table

เราจะใช Repeating Table ในการสรางตารางที่มีการกําหนด Repeating Region ใหกับ
มั น และ กํ า หนด Editable Region ให แ ต ล ะเซลที่ อ ยู ในตาราง ดั ง รูป ที่ 7-5 โดยที่ เราสามารถ
กําหนดคุณสมบัติตางๆ ของตารางไดดวย
รูปที่ 7-5 Repeating Table
ขั้นตอนการสราง 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
7.3.7 การกําหนดใหคุณสมบัติในแทก HTML แกไขไดใน Template

การกําหนดใหคุณสมบัติในแท็ก HTML แกไขไดใน Template มีขั้นตอนดังนี้
1. ใน Document Window เลือกวัตถุหรือ ขอความที่ตองการกําหนดใหแกไขคุณสมบัติ
ในแทก HTML ได
2. เลือกคําสั่ง Modify -> Templates -> Make Attribute Editable
3. จะปรากฎไดอะล็อก Editable Tag Attributes ดั งรูป ที่ 7-5 ในฟอรม เมนู Attribute
เลือกคุณ สมบัติที่ตองการหรือ ถาไมมีคุณ สมบัติที่ตองการใหกดปุม Add เพื่ อคุณ
สมบัติที่ไมมีเขาไปใหม
4. เลือก Make Attribute Editable
5. ในฟลด Label พิมพชื่อสําหรับคุณสมบัติ

6. ในปอปอัพเมนู Type เลือกชนิดของขอมูลที่สามารถใชไดกับคุณสมบัติที่เลือก
7. ในฟลด Default พิมพคาของคุณสมบัติที่จะถูกใชในเวลาที่ผูใชไมไดกําหนดคาใหกับ
คุณสมบัติ
8. ถาตองการเปลี่ยนไปกําหนดคุณสมบัติอื่น ใหทําตามขั้นตอนที่ 3 ถึง 7 ซ้ําอีกครั้ง
9. กดปุม OK เพื่อจบการทํางาน
รูปที่ 7-5 ไดอะล็อก Editable Tag Attributes
7.4 ไลบรารี (Libraries)

ไลบรารี เปนสวนที่ใชจัดเก็บสิ่งที่ใชในการสรางเว็บเพจ ที่เรานํากลับมาใชใหมบอยๆ ซึ่ง
อาจจะเปนรูปภาพ ขอความหรือ ปุม ก็ได โดยสิ่งที่เก็บในไลบรารีเราจะเรียกวา ไลบรารีไอเท็ม
(Library Item)
Dreamweaver จะเก็บไลบรารีไอเท็มไวในโฟลเดอร Libraries ซึ่งจะอยูในไดเรกทอรี่เริ่ม
ตนของแตละไซต ประโยชนของการนําไลบรารีไปใชก็คือ เมื่อเราวางไลบรารีไอเท็มไวในเว็บเพจใด
ก็ตามเมื่อเราแกไขไลบรารีไอเท็มที่เปนตัวตนแบบแลวทุกๆ เว็บเพจที่ใชไลบรารีไอเท็มดังกลาวจะ
เปลี่ยนแปลงดวย
7.4.1 การสรางไลบรารีไอเท็ม
เราสามารถสรางไลบรารีไอเท็มจากทุกๆ อีลีเมนตที่อยูในแท็ก body ของ HTML ไดอยาง
เชน ขอความ รูปภาพหรือ ตาราง เปนตน
สําหรับลิงคไอเท็มอยางเชน รูปภาพในไลบรารีจะเก็บเฉพาะคาที่ใชอางถึงไอเท็มเทานั้น
ดังนั้นไฟลที่ถูกอางถึงควรจะอยูในที่ ที่ตรงกับลิงคไอเท็มอางถึง
ขั้นตอนการสรางไลบรารีไอเท็ม
1. เลือกอีลีเมนตที่ตองการบันทึกเปนไลบรารีไอเท็มในเอกสาร
2. เลือกคําสั่ง Modify -> Library -> Add Object to Library จะปรากฎพาเนล Assets
พรอมกับแสดงแถบสีเพื่อใหเราพิมพชื่อของไลบรารีไอเท็มที่เราเพิ่มเขาไปใหม ดังรูปที่ 7-6
รูปที่ 7-6 พาเนล Assets เมื่อเพิ่มไลบรารีไอเท็มเขาไปใหม
3. พิมพชื่อของไลบรารีไอเท็มที่เราสรางใหมใน Assets Panel
7.4.2 การเพิ่มไลบรารีไอเท็มลงในเอกสาร
1. เลือกจุดที่ตองการเพิ่มไลบรารีไอเท็มใน Document Window
2. เลือกคําสั่ง Window -> Library
3. ดับเบิลคลิกไลบรารีไอเท็มที่ตองการใน Assets Panel
4. ไลบรารีไอเท็มจะถูกเพิ่มใน Document Window
7.4.3 การแกไขไลบรารีไอเท็ม
1. เลื อ กคํ า สั่ ง Window -> Library จะปรากฎ Assets Panel พร อ มกั บ แสดง Library ใน
Assets Panel
2. เลือกไลบรารีไอเท็มแลวคลิกที่ปุม Edit ทางดานของ Asset Panel
3. แกไขไลบรารีไอเท็มตามตองการแลวบันทึกการแกไขโดยเลือกคําสั่ง File -> Save
4. จะปรากฎไดอะล็อกใหเลือกวาจะแกไขเอกสารที่ใชไลบรารีไอเท็มดังกลาวดวยหรือไม
Dreamweaver MX : Fundamentals บทที่ 8 : การสรางแบบฟอรม (Form)
บทที่ 8
การสรางแบบฟอรม (Form)
เว็บไซตโดยทั่วไปในปจจุบันนอกจากจะใหเราเขาเยี่ยมชมไดแลว ในบางครั้งทางเว็บไซตก็
อาจจะมีสวนที่ใหผูชมใหขอมูลบางอยางกับทางเว็บไซต เพื่อทางเว็บไซตจะนําไปใชโตตอบกับผู
ชมหรือ เก็บขอมูลดังกลาวเพื่อนําไปใชประโยชนอื่นๆ อยางเชน เว็บบอรดที่ใชแสดงความคิดเห็น
ของผูมาเยี่ยมชมเว็บไซตหรือ การสมัครเปนสมาชิกกับทางเว็บไซต เปนตน ซึ่งสิ่งที่ใชในการเก็บ
ขอมูลจากผูมาเยี่ยมชมก็คือ แบบฟอรม (Form)
8.1 เกี่ยวกับแบบฟอรม (Form)

แบบฟอรม เปนสวนประกอบหนึ่งบนเว็บเพจที่ใชรับขอมูลจากผูชมและ สงขอมูลดังกลาว
ไปยังเว็บเซิรฟเวอรเพื่อทําการประมวลผลอยางใดอยางหนึ่ง ซึ่งภายในแบบฟอรมจะประกอบไป
ด ว ยส ว นที่ ใช รับ ข อ มู ล หลายรูป แบบด ว ยกั น อั น ได แ ก Text Field, Button, Checkbok, Radio
Button, List, Menu, File Field และ Image Field ดังรูปที่ 8-1
รูปที่ 8-1
ในแทก <form></form> จะมีพารามิเตอรที่ใหเราสามารถกําหนดชื่อเซิรฟเวอรสคริปต

หรือ แอพพลิเคชั่นที่ใชประมวลผลขอมูลในฟอรมและ HTTP Method ที่ใชในการสงขอมูลจากเว็บ
บราวเซอรไปยังเว็บเซิรฟเวอรได
เมื่อผูชมกรอกขอมูลในแบบฟอรมของเว็บไซตและ กดปุมสับมิท (Submit) ฟอรมแลว ขอ
มูลที่กรอกลงในฟอรมก็จะถูกสงไปที่เว็บเซิรฟเวอร เซิรฟเวอรสคริปตหรือ แอพพลิเคชั่นที่ประมวล
ผลขอมูลดังกลาวอยู หลังจากนั้นเว็บเซิรฟเวอรก็จะโตตอบกับผูชมโดยสงขอมูลกลับมายังผูชม
หรือ ทํางานบางอยางโดยมีพื้นฐานอยูบนขอมูลที่สงมาจากแบบฟอรมที่ผูชมกรอก
8.1.1 สวนประกอบของแบบฟอรม
สวนที่ใชรับขอมูลภายในแบบฟอรมเราจะเรียกวา ฟอรมออปเจ็ก (Form Object) ซึ่งการ
เพิ่มฟอรมออปเจ็กลงในแบบฟอรมเราสามารถทําไดโดยเลือกคําสั่ง Insert -> Form Object หรือ
กดปุมใน Form Tab ของ Insert Bar
ฟอรมออปเจ็กที่ใชใน Dreamweave มีดังนี้

1. Text Field เปนสวนที่ใชรับขอมูลที่เปนตัวอักษรและ ตัวเลข โดยเราสามารถ
กําหนดบรรทัดของ Text Field วาเปนบรรทัดเดียวหรือ หลายบรรทัดไดและ กําหนด
ใหขอมูลที่ผูชมกรอกแสดงผลเปนจุดหรือ ดาวไดสําหรับขอมูลที่กรอกเปนขอมูลสวน
ตัว เชน รหัสผาน เปนตน
2. Hidden Fields เป น ส ว นที่ ใ ช เก็ บ ข อ มู ล ที่ ไม ต อ งการแสดงให ผู ช มเห็ น และ
แบบฟอรมสงขอมูลดังกลาวไปยังเว็บเซิรฟเวอรเมื่อผูชมกดปุมสับมิทฟอรม
3. Button เปนสวนที่ผูชมคลิกแลวจะดําเนินกิจกรรมบางอยาง ซึ่งโดยปกติจะเปน
การสับมิทฟอรมและ รีเซ็ตฟอรม
4. Check Box เป น ส ว นรับ ข อ มู ล ที่ อ ยู ในรู ป ของหั ว ข อ ที่ ให ผู ช มเลื อ กโดยผู ช ม
สามารถเลือกไดที่ละหลายๆ หัวขอในแตละครั้ง
5. Radio Button เปนสวนรับขอมูลที่อยูในรูปของหัวขอที่ใหผูชมเลือก โดยผูชม
สามารถเลื อ กได เพี ย งข อ ใดข อ หนึ่ ง เท า นั้ น ในแต ล ะครั้ง ซึ่ งการกํ า หนดให Radio
Button สามารถเลือกไดเพียงอันเดียวในแตละกลุมสามารถทําไดโดยกําหนดชื่อของ
Radio Button ใหเหมือนกัน
6. List / Menu เปนสวนรับขอมูลที่มีการกําหนดขอมูลใหอยูแลวในรูปของรายการ
หรือ เมนู ผูชมเพียงแตเลือกขอมูลที่ตองการเทานั้น
7. Jump Menu เปนสวนรับขอมูลที่อยูในรูปของเมนูที่เมื่อผูใชคลิกเลือกแลวจะทํา
การลิงคไปยังหนาเว็บเพจอื่นๆ ที่กําหนดไวในแตละรายการที่อยูในเมนู
8. File Fields เปนสวนรับขอมูลที่ใชคนหาไฟลในเครื่องที่เปดเว็บเพจที่มีฟอรมอ
อปเจ็กดังกลาวและ ทําการอัพโหลดไฟลดังกลาวผานแบบฟอรม
9. Image Fields เปนสวนรับขอมูลที่ทําใหเราสามารถใสรูปเขาไปไดและ ใชมันได
เหมือนกับ Button
8.2 การสรางแบบฟอรม
การสรางแบบฟอรมในเอกสารมีขั้นตอนดังนี้
1. เลือกตําแหนงที่ตองการสรางแบบฟอรมในเอกสาร
2. เลือกคําสั่ง Insert -> Form หรือ กดปุม Form ใน Form Tab ของ Insert Bar
3. แบบฟอรมที่ถูกเพิ่มในเอกสารจะถูกแสดงดวยสี่เหลี่ยมที่มีเสนรอบรูปเปนเสนประสี
แดง ดังรูปที่ 8-2
รูปที่ 8-2 เสนประสีแดงที่ใชแสดงขอบเขตของแบบฟอรม
8.3 การปรับแตงคุณสมบัติของแบบฟอรม
1. เลือกฟอรมที่ตองการใน Document Window
3. ปรับแตงคุณสมบัติของแบบฟอรมตามตองการ โดยคุณสมบัติที่ปรับแตงไดมีดังนี้
• Form Name เปนสวนที่ใชกําหนดชื่อของแบบฟอรม
• Action เปนสวนที่ใชกําหนดชื่อของไฟลที่ใชประมวลผลขอมูลที่อยูในแบบฟอรม
เมื่อกดปุมซับมิท
• Method เปนสวนที่ใชกําหนดวิธีการสงขอมูลจากแบบฟอรมไปยังเว็บเซิรฟเวอร
ซี่งมี 3 วิธีดวยกัน
- POST เปนการสงขอมูลไปยังเว็บเซิรฟเวอรโดยการฝงขอมูลที่ถูกกรอกลงใน
แบบฟอรมไปกับ HTTP Request ดวย
- GET เปนการสงขอมูลไปยังเว็บเซิรฟเวอรโดยการนําขอมูลที่ถูกกรอกลงใน
แบบฟอร ม ต อ ท า ย URL ของเซิ ร ฟ เวอร ส คริ ป ต ห รื อ แอพพลิ เคชั่ น ที่ ใ ช
ประมวลผลขอมูลในฟอรมดังกลาว
- Default ใชวิธีการสงขอมูลที่กําหนดไวในเว็บบราวเซอรซึ่งโดยทั่วไปจะเปน
GET
• Enctyp เป น ส ว นที่ ใ ช กํ า หนดประเภทของการเข า รหั ส ข อ มู ล ที่ ส ง ไปยั ง เว็ บ
เซิรฟเวอรเพื่อการประมวลผล
• Target เป น สวนที่ใช กํา หนดหน าตางที่ใชแสดงผลขอมู ล ที่ถู ก ส งกลั บ โดยเว็บ
เซิรฟเวอรหลังจากที่ประมวลผลขอมูลในแบบฟอรมที่สงมาเรียบรอยแลว ซึ่งจะใช
ชื่อของเฟรมหรือ คามาตราฐานที่ HTML มีใหในการกําหนดหนาตางที่ใชแสดง
ผลก็ได โดยคามาตราฐานตางๆ มีดังนี้
- _blank กําหนดใหเปดหนาตางใหมพรอมกับแสดงผลขอมูลในหนาตางนั้น
- _parent ถาแบบฟอรม ที่ทําการซับมิท ขอมูลอยูในเฟรมแลวขอมูลที่ ถูกสง
กลับมาจากเว็บเซิรฟเวอรจะถูกแสดงในหนาตางที่มีการแบงเฟรม
- _self แสดงผลขอมูลในหนาตางเดียวกันกับหนาตางที่แบบฟอรมถูกซับมิท
- _top แสดงผลขอมูลในหนาตางปจจุบันโดยนําเฟรมที่มีอยูทั้งหมดออก
8.4 การสราง Text Fileds

Text Fields เปนฟอรมออปเจ็กที่ใชรับขอมูลจากผูชมโดยการพิมพ ซึ่งแบงได 3 ประเภท
ดังนี้
• Single-Line Text Fields เป น Text Fields ที่ มี เพี ย งบรรทั ด เดี ย วสํ า หรั บ กรอกข อ
ความสั้นๆ อยางเชน ชื่อ รหัสไปรษณียหรือ อีเมล เปนตน
• Multiple-Line Text Fields เปน Text Fields ที่มีหลายบรรทัดโดยเราสามารถกําหนด
จํานวนบรรทัดและ ความกวางของบรรทัดไดดวย
• Password Fields เปน Text Fields พิเศษที่เมื่อผูชมพิมพขอความลงไปแลวขอความ
ดังกลาวจะถูกแทนที่ดวยดาวหรือ จุด เพื่อปองการเห็นขอความดังกลาวโดยตรง
8.4.1 การสราง Single-Line หรือ Password Text Field
1. เลือกจุดที่ตองการวาง Text Field ในเสนกรอกของแบบฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> Text Field หลังจากที่เลือกคําสั่ง Text Field
จะถูกเพิ่มลงใน Document Window ดังรูปที่ 8-3
รูปที่ 8-3 Document Window หลังจากที่เพิ่ม Text Field
3. ใน Property Inspector กรอกชื่อของ Text Field ลงในฟลด TextField ซึ่งตองเปนชื่อ

ที่ไมซ้ํากับ Text Field อื่นที่มีอยูในแบบฟอรม
4. ในฟลด Char Width ใสความกวางของ Text Field ถาไมใสแลวความกวางมาตรา
ฐานของ Text Field เปน 20 อักขระ
5. ในฟลด Max Char ใสจํานวนสูงสุดของอักขระที่ผูชมสามารถพิมพไดใน Text Field
6. เลือก Single-Line หรือ Password เพื่อกําหนดประเภทของ Text Field ที่เราจะสราง
7. ถาตองการแสดงขอความเริ่มตนใน Text Field ใหพิมพขอความในฟลด Init Value
8.4.2 การสราง Mulitple-Line Text Field

1. เลือกจุดที่ตองการวาง Text Field ในเสนกรอกของแบบฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> Text Field
3. ใน Property Inspector พิมพชื่อของ Text Field ในฟลด TextField
4. ในฟลด Char Width ใสความกวางของ Text Field ถาไมใสแลวความกวางมาตรา
ฐานของ Text Field จะเปน 20 อักขระ
5. เลือก Multi line เพื่อกําหนดประเภทของ Text Field ที่เราจะสรางใหมีหลายบรรทัด
ดังรูปที่ 8-4
รูปที่ 8-4 Text Field หลังจากที่เลือก Multi line
6. ในฟลด Num Line กําหนดจํานวนแถวสูงสุดที่จะแสดงในแบบฟอรม

7. ใน Wrap เลือกคาที่ตองการเพื่อกําหนดให Text Field ทําการตัดแถวใหอัตโนมัติเมื่อ
พิมพขอความกวางกวาความกวางของ Text Field ซึ่งมีคาใหเลือกทั้งหมด 4 คาคือ
• Off ไม ตองตัดแถวเมื่อความยาวของขอความที่พิม พ เกิน ความกวางของ Text
Field
• Default กําหนดใหเทากับ Off
• Virtual ตัดแถวเมื่อความยาวของขอความที่พิมพเกินความกวางของ Text Field

ซึ่งจะแสดงใหเห็นใน Text Field เทานั้นไมไดมีการตัดแถวกับขอมูลจริง
• Physical มีการตัดแถวของขอความกับขอมูลจริงและ ที่แสดงใน Text Field ดวย
8.5 การสราง File Field

เราสราง File Field เพื่อใชเลือกไฟลที่อยูในเครื่องของผูชมและ อัพโหลดไฟลดังกลาวไป
ไวที่เว็บเซิรฟเวอร File Field จะคลายกับ Text Field แตตางกันที่ File Field จะมีปุม Browse
เพิ่มขึ้นมา ใน File Field เราสามารถที่จะพิมพ path ของไฟลหรือ ใชปุม Browse ในการเลือก
ไฟลก็ได
เมื่ อเราใช File Field ในแบบฟอรม ใดแบบฟอรม นั้ นจะต องกํ าหนดใหวิธีการส งขอมู ล
(Method) เปนแบบ POST เทานั้น
ขั้นตอนการสราง File Field มีดังนี้
1. เลื อ กแบบฟอร ม ที่ ต อ งการเพิ่ ม File Field แล ว กํ า หนด Method ใน Property
Inspector ของแบบฟอรมใหเปนแบบ POST
2. ในฟลด Enctype ใหเลือก multipart / form-data
3. เลือกจุดที่ตองการเพิ่ม File Field ในกรอบของแบบฟอรม
4. เลือกคําสั่ง Insert -> Form Object -> File Field หลังจากที่เลือกคําสั่ง File Field จะ
ถูกเพิ่มลงใน Document Window ดังรูปที่ 8-5
รูปที่ 8-5 Document Window หลังจากเพิ่ม File Field
5. ใน Property Inspector พิมพชื่อของ Field Field ลงในฟลด FileField

6. ในฟลด Char Width พิมพจํานวนสูงสุดของอักขระที่จะใหแสดงใน File Field
7. ในฟลด Max Char พิมพจํานวนสูงสุดของอักขระที่พิมพลงใน File Field ได
8.6 การสราง Hidden Field

Hidden Field เป น ฟ ลดที่เก็ บขอมูลที่ไมตองการแสดงให ผูช มเห็น และ ขอมู ลที่ เก็บใน
Hidden Field จะถูกสงไปยังเว็บเซิรฟเวอรเมื่อฟอรมถูกสับมิท
ขั้นตอนการสราง Hidden Field

1. เลือกจุดที่ตองการเพิ่ม Hidden Field ในกรอบของแบบฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> Hidden Field หลังจากที่เลือกคําสั่ง Hidden
Field จะถูกเพิ่มลงใน Document Window ดังรูปที่ 8-6
รูปที่ 8-6 Document Window หลังจากที่เพิ่ม Hidden Field
3. จะปรากฎสัญลักษณะที่ใชแทน Hidden Field ในเอกสาร

4. พิมพชื่อของ Hidden Field ในฟลด HiddenField
5. ในฟลด Value พิมพคา ที่ใชสงไปใหเว็บเซิรฟเวอรเมื่อมีการสับมิทฟอรม
8.7 การสราง Checkbox

Checkbox เปนฟอรมออปเจ็กที่ใชสรางกลุมของหัวขอที่ผูชมสามารถเลือกไดมากกวา
หนึ่งหัวขอในกลุมเดียวกัน
ขั้นตอนการสราง Checkbox มีดังนี้
1. เลือกจุดที่ตองการเพิ่ม Checkbox ในกรอบของแบบฟอรม
2. เลื อ กคํ า สั่ ง Insert -> Form Object -> Check Box หลั ง จากที่ เลื อ กคํ า สั่ ง Check
Box จะถูกเพิ่มลงใน Document Window ดังรูปที่ 8-7
รูปที่ 8-7 Document Window หลังจากที่เพิ่ม Check Box
3. ในฟ ล ด Checked Value ใน Property Inspector ของ Checkbox ให พิ ม พ ค า ที่

ตองการสงไปยังเว็บเซิรฟเวอรเมื่อสับมิทฟอรม
4. คลิกที่ Checked เมื่อตองการให Checkbox ถูกเลือกในครั้งแรกที่แสดงในเว็บเพจ
8.8 การสรางปุม Radio

เราจะใชปุม Radio เมื่อตองการสรางกลุมของหัวขอที่ใหผูชมเลือกหัวขอภายในกลุมได
เพียงขอเดียว โดยปุม Radio ที่อยูในกลุมเดียวกันควรจะมีชื่อที่เหมือนกันแตมีคาที่แตกตางกันได
8.8.1 การสรางปุม Radio แบบกลุม
1. เลือกจุดที่ตองการเพิ่มปุม Radio ในแบบฟอรม
2. เพิ่มกลุมของปุม Radio โดยเลือก Insert -> Form Object -> Radio Group
3. จะปรากฎไดอะล็อก Radio Group ดังรูปที่ 8-8 ใหกรอกขอมูลเพื่อใชสรางกลุมของ
ปุม Radio
4. ในฟลด Name พิมพชื่อของกลุมของปุม Radio
5. ใน Radio Buttons คลิกที่ปุม + เพื่อเพิ่มรายการใหม ซึ่งแตละรายการจะประกอบไป
ดวย Label ซึ่งเปนขอความที่ใชแสดงหลังปุม Radio และ Value ซึ่งเปนคาที่จะถูกสง
ไปยังเว็บเซิรฟเวอรเมื่อปุม Radio ถูกเลือกและ ฟอรมถูกซับมิท
6. พิมพขอความและ คาที่ตองการใน Label และ Value ตามลําดับ
7. ถาตองการเพิ่มรายการใหมอีกใหทําตั้งแตขั้นตอนที่ 5 ถึง 6 อีกรอบ
8. ใน Lay Out Using เลื อ ก Line Breaks เมื่ อ ต องการให แต ล ะรายการแยกจากกั น
ดวยการขึ้นบรรทัดใหมหรือ เลือก Table ถาตองการใหแตละรายการถูกแยกออกจาก
กันดวยตาราง
9. คลิกที่ปุม OK เมื่อตองการจบการสรางกลุมของปุม Radio
รูปที่ 8-8 ไดอะล็อก Radio Group
10. หลั ง จากที่ ค ลิ ก ปุ ม OK แล ว รายการของปุ ม Radio ที่ เราสร า งไว จ ะถู ก เพิ่ ม ลงใน
เอกสารดังรูปที่ 8-9
รูปที่ 8-9 กลุมของปุม Radio ที่เพิ่มลงในเอกสาร
8.8.2 การสรางปุม Radio แบบเดี่ยว

1. เลือกจุดที่ตองการเพิ่มปุม Radio ในแบบฟอรม
2. เลือก Insert -> Form Object -> Radio Button
3. พิมพชื่อของปุม Radion ลงในฟลด RadioButton
4. ในฟลด Value กรอกคาที่ตองการใหสงไปยังเว็บเซิรฟเวอรเมื่อผูใชคลิกที่ปุม Radio นี้
5. คลิกที่ Checked เมื่อตองการใหปุม Radio ถูกเลือกเมื่อแสดงในเว็บเพจครั้งแรก
8.9 การสราง Scrolling List

Scrolling List เปนฟอรมออปเจ็กที่ทําใหเราสามารถแสดงหัวขอที่ใหผูชมเลือกในพื้นที่ที่
จํ า กั ด ได เมื่ อ หั วข อมี จํา นวนมากขึ้น โดย Scrolling List จะมี ตั ว เลื่ อ นขึ้ น ลงทางขวาเพื่ อ ให เรา
สามารถเลื่อนผานรายการของหัวขอตางๆ ที่อยูใน Scrolling List
ขั้นตอนการหสราง Scrolling List มีดังนี้
1. เลือกจุดที่ตองการสราง Scrolling List ในกรอบของฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> List/Menu
3. ใน Property Inspector พิมพชื่อของ Scrolling List ลงในฟลด List/Menu
4. ที่ Type เลือก List
5. คลิกที่ Allow Multiple เมื่อตองการใหผูชมเลือกหัวขอที่อยูใน List ไดมากกวาหนึ่งหัว
ขอ
6. คลิกที่ปุม List Values จะปรากฎไดอะล็อกขึ้นมา ดังรูปที่ 8-10 เพื่อไวใชเพิ่มหัวขอ
รูปที่ 8-10 ไดอะล็อก List Values
7. ในฟลด Item Label พิมพขอความที่ตองการใหแสดงใน Scrolling List

8. ในฟลด Value พิมพคาที่ตองการสงไปใหเว็บเซิรฟเวอรเมื่อเลือกหัวขอดังกลาว
9. เมื่อตองการเพิ่มหัวขอใหมใน Scrolling List อีกใหคลิกที่ปุม + แลวทําตามขั้นตอนที่
7 ถึง 8 อีกรอบ
10. เมื่อตองการจบการเพิ่มหัวขอใหกดปุม OK
11. ในฟลด Height ของ Property Inspector พิมพจํานวนแถวที่ตองการแสดงของ List
ถาจํานวนแถวที่พิมพนอยกวาจํานวนรายการที่มีอยูแลว Scroll Bar จะปรากฎขึน้ ทาง
ขวาของ List เพื่อใชในการเลื่อนไปยังรายการอื่นที่มองไมเห็นใน List ดังรูปที่ 8-11
รูปที่ 8-11 List Field พรอมกับ Scroll Bar เมื่อจํานวนรายการมากกวาจํานวนแถวที่ใชแสดงราย

การ
12. เราสามารถใหหัวขอใน Scrolling List ถูกเลือกเปนคาเริ่มตนไดเมื่อมันถูกโหลดมา

แสดงผลในเว็บบราวเซอรในตอนแรก โดยเลือกหัวขอที่ตองการใน Initally Selected
8.10 การสรางปอปอัพเมนู (Popup menu)

ปอปอัพเมนูจะทําใหผูชมสามารถที่จะเลือกหัวขอที่ตองการจากรายการจํานวนมากได
โดยปอปอัพเมนูจะแสดงหัวขอที่ถูกเลือกเทานั้น เมื่อผูชมตองการดูหัวขออื่นๆ ก็เพียงแตคลิกที่ป
อปอัพเมนูเพื่อใหมันแสดงรายการอื่นๆ ออกมา ดังรูปที่ 8-12
รูปที่ 8-12 ปอปอัพเมนู
ขั้นตอนการสรางปอปอัพเมนู
1. เลือกจุดที่ตองการสรางปอปอัพเมนูในกรอบของแบบฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> List/Menu
3. ในฟลด List/Menu พิมพชื่อของปอบอัพเมนู
4. ที่ Type เลือก Menu
5. คลิกที่ปุม List Values จะปรากฎไดอะลอกขึ้นมา ดังรูปที่ 8-9 เพื่อไวใชเพิ่มหัวขอ
6. ในฟลด Item Label พิมพขอความที่ตองการใหแสดงใน Scrolling List
7. ในฟลด Value พิมพคาที่ตองการสงไปใหเว็บเซิรฟเวอรเมื่อเลือกหัวขอดังกลาว
8. เมื่อตองการเพิ่มหัวขอใหมใน Scrolling List อีกใหคลิกที่ปุม + แลวทําตามขั้นตอนที่
8 ถึง 9 อีกรอบ
9. เมื่อตองการจบการเพิ่มหัวขอใหกดปุม OK
8.11 การสรางปุม (Button)
ปุมเปนฟอรมออปเจ็กที่เมื่อเวลาผูชมคลิกแลวเรามีการกําหนดใหการทํางานบางอยาง
เกิ ด ขึ้ น ได ปุ ม ทุ ก ปุ ม จะมี ขอ ความที่ ใช แ สดงบนปุ ม ซึ่งปุ ม โดยทั่ ว ไปที่ นิ ย มใช คื อ ปุ ม Submit,
Reset หรือ Login เปนตน
ขั้นตอนการสรางปุมมีดังนี้
1. เลือกจุดที่ตองการสรางปุมในกรอบของแบบฟอรม
2. เลือกคําสั่ง Insert -> Form Object -> Button หลังจากที่เลือกคําสั่งแลว Button จะ
ถูกเพิ่มลงในเอกสารดังรูปที่ 8-13
รูปที่ 8-13 Document Window หลังจากที่เพิ่มปุม
3. ใน Property Inspector พิมพชื่อของปุมในฟลด Button Name

4. พิมพขอความที่ตองการแสดงบนปุมในฟลด Label
5. เลือกคาใน Action เพี่อกําหนดการทํางานของปุม ซึ่งมี 3 การทํางานคือ
• Submit เมื่ อ ปุ ม ถู ก คลิ ก แล ว ข อ มู ล ในฟอร ม จะถู ก ส ง ไปประมวลผลยั ง เว็ บ
เซิรฟเวอร
• Reset เมื่อปุมถูกคลิกแลวคาตางๆ ที่ผูชมกรอกลงในแบบฟอรมจะถูกกําหนด
กลับไปเปนคาเริ่มตน
• None เมื่อปุมถูกคลิกแลวไมตองใหมีการทํางานใดๆ เกิดขึ้น
8.12 การสรางปุมที่เปนภาพกราฟฟก (Image Field)

ปุมนอกจากจะอยูในรูปของปุมทั่วไปแลว เรายังสามารถที่จะสรางปุมที่มีลักษณะเปน
ภาพกราฟฟกได โดยอาจจะใชปุมดังกลาวในการสั่งสับมิทแบบฟอรมหรือ ทํางานบางอยางในเว็บ
เพจก็ ได ซึ่ งการกํ าหนดการทํ างานใหกับ ปุ มเราจะใช Behavior ที่ อยู ในพาเนล Behavior หรือ
ภาษาจาวาสคริปตที่เราเขียนขึ้นเองก็ได
ขั้นตอนการสรางปุมภาพกราฟฟก
1. เลือกจุดที่ตองการสรางปุมภาพกราฟฟกในกรอบของแบบฟอรม
2. เลื อ กคํ า สั่ ง Insert -> Form Object -> Image Field s หลั ง จากที่ เลื อ กคํ า สั่ ง แล ว
Image Field จะถูกเพิ่มลงในเอกสาร ดังรูปที่ 8-14
รูปที่ 8-14 Document Window หลังจากที่เพิ่ม Image Field
3. ใน Property Inspector ของ Image Field ในฟ ล ด ImageField พิ ม พ Submit เมื่ อ

ตองการใหปุมทําการสับมิทฟอรมเมื่อถูกคลิก แตถาตองการใหปุมทํางานอยางอื่นก็
พิมพชื่อที่ตองการ
4. เลือกรูปภาพที่ตองการใชเปนปุมโดยคลิกที่ไอคอนโฟลเดอรตรงฟลด Src แลวเลือก
ไฟลรูปภาพที่ตองการ
5. ในฟลด Alt พิมพขอความที่ตองการแสดงแทนรูปภาพในกรณีที่เว็บบราวเซอรที่เปด
เว็บเพจไมสามารถแสดงผลรูปภาพได
Dreamweaver MX : Fundamentals บทที่ 9 : การสรางเฟรม (Frames)
บทที่ 9
การสรางเฟรม (Frames)
9.1 เฟรม (Frame) และ เฟรมเซต (Frameset)

เฟรมเปนการแบงหนาตางของเว็บบราวเซอรออกเปนพื้นที่หลายๆ สวนซึ่งแตละสวน
สามารถที่จะแสดงผลเอกสาร HTML ที่แตกตางกันได ดังรูปที่ 9-1 ซึ่งโดยทั่วไปแลวจะนิยมแบง
เฟรมออกเป น 2 ส ว นคื อ ส ว นที่ เป น เนื้ อ หากั บ ส ว นที่ เป น การเชื่อ มโยงไปยั งหน า ต างๆ ของ
เว็บไซต
เฟรมเซต คือ ไฟล HTML ที่มีการกําหนดการจัดวางและ คุณสมบัติของกลุมของเฟรม
ไว รวมไปถึงจํานวน ขนาด ตําแหนง ของแตละเฟรมและ เอกสาร HTML ที่แตละเฟรมเชื่อมโยง
ดวย
รูปที่ 9-1 เว็บเพ็จที่นําเฟรมมาใชในการแบงเนื้อหา
9.2 การสรางเฟรมเซต
ในโปรแกรม Dreamweaver เราสามารถที่จะสรางเฟรมเซตได 2 วิธีดวยกันคือ
1. ใชแมแบบที่โปรแกรมมีใหอยูแลวในการสราง
2. สรางเฟรมเซตดวยตัวเอง
9.2.1 การสรางเฟรมเซตดวยแมแบบที่โปรแกรมมีให
การสรางเฟรมเซตด วยวิธีนี้ทํ าโดยคลิกปุ ม ที่อยูใน Frame Tab ของ Insert Bar หรือ
กําหนดตอนที่สรางเอกสาร HTML ใหมใน New Document Dialog
การสรา งเฟรมเซตโดยคลิ ก ที่ ปุ ม ใน Insert Bar นั้ น โปรแกรมจะทํ าการแบ งเฟรมใน
Document Window ปจจุบันที่เราทํางานอยูแลวทําการเชื่อมโยงและ แสดงเอกสารที่เราทํางาน
อยูในเฟรมใดเฟรมหนึ่งโดยอัตโนมัติ สวนการสรางเฟรมเซตโดยการกําหนดตอนที่สรางเอกสาร
ใหมนั้นจะทําใหเราได Document Window ที่มีการแบงเฟรมแลวแตยังไมมีการเชื่อมโยงและ
แสดงผลเอกสารใดๆ บนเฟรมดังกลาว
9.2.2 การสรางและ แกไขเฟรมเซตโดยไมใชแมแบบที่โปรแกรมมีให

ทุกๆ ครั้งกอนที่เราจะสรางหรือ แกไขเฟรมเซตและ เฟรมดวยตัวเอง เราควรจะเปดการ
แสดงผลของกรอบของเฟรมใน Document Window เสียกอนเพื่อใหการแบงเฟรมทําไดงายขึ้น
โดยเลือกคําสั่ง View -> Visual Aids -> Frame Borders หลังจากที่เลือกคําสั่งแลวจะปรากฎ
กรอบของเฟรมดังรูปที่ 9-2
รูปที่ 9-2 Document Window เมื่อเปดการแสดงผลกรอบของเฟรม
9.2.2.1 การสรางเฟรม
1. คลิกเมาลงบน Document Window
2. เลือกคําสั่งในเมนู Modify -> Frameset เชน Split Left เมื่อตองการแบงเฟรมทาง

ซายหรือ Split Right เมื่อตองการแบงเฟรมทางขวา เปนตน
3. หลังจากที่เลือกคําสั่งในขอที่ 2 แลว Document Window จะถูกแบงเฟรมตามที่เรา
เลือก ดังตัวอยางในรูปที่ 9-3 ซึ่งเปนการแบงเฟรมตามแนวนอนออกเปนสองสวน
คือ สวนบนและ สวนลาง
รูปที่ 9-3 Document Window เมื่อแบงเฟรมออกเปน 2 สวนตามแนวนอน
9.2.2.2 การแบงเฟรมที่สรางไวออกเปนเฟรมยอย
1. คลิกลงบนพื้นที่ที่อยูในขอบเขตของเฟรมที่เราตองการจะแบงเปนเฟรมยอยดังรูปที่
9-4 แลวเลือกคําสั่งในเมนู Modify -> Frameset เพื่อกําหนดการแบงเฟรมวาจะ
แบงทางซาย ทางขวา ขางลาง หรือ ขางบน
รูปที่ 9-4 การเลือกเฟรมที่ตองการแบงเฟรมออกเปนเฟรมยอย
2. เมื่อตองการแบงเฟรมตามแนวนอนหรือ แนวตั้งตลอดทั้งแนวใหคลิกลากกรอบของ
เฟรมจากดานใดดานหนึ่งของ Document Window ในมุมมองออกแบบมาวางไว
บนพื้นที่ที่อยูใน Document Window ดังรูปที่ 9-5
รูปที่ 9-5 การแบงเฟรมโดยใชกรอบของเฟรมที่อยูทางดานซายของ Document Window
3. เมื่อตองการแบงเฟรมตามแนวนอนหรือ แนวตั้งโดยใชกรอบของเฟรมที่ไมไดอยูใน
แตละดานของ Document Window ใหกดปุม Alt คางไวพรอมกับคลิกลากกรอบ
ของเฟรมที่เราตองการทางดานซาย มาวางบนพื้นที่ที่อยูในเฟรมดังกลาว ดังรูปที่ 9-
6
รูปที่ 9-6 การแบงเฟรมโดยใชกรอบของเฟรมที่ไมไดอยูในแตละดานของ Document Window
4. เมื่อตองการแบงเฟรมออกเปน 4 เฟรมใหคลิกลากที่มุมของกรอบของเฟรมมาวาง
ไวที่พื้นที่ที่อยูใน Document Window ดังรูปที่ 9-7
รูปที่ 9-7 การแบงเฟรมโดยใชมุมของกรอบของเฟรมใน Document Window
9.2.2.1 การลบเฟรม
ใหคลิกลากกรอบของเฟรมที่ตองการลบ จนกระทั้งชนกับกรอบของเฟรมทางขวาที่อยู
ใน Document Window หรือกรอบของเฟรมที่ ลอมรอบเฟรมดั งกลาวอยูในกรณี ที่เฟรมที่เรา
ตองการลบเปนเฟรมที่ซอนอยูในเฟรมอื่น ดังรูปที่ 9-8
รูปที่ 9-8 การลบเฟรมโดยใชการคลิกลากกรอบของเฟรมที่ตองการลบไปชนกรอบของเฟรมทาง

ดานขวา
9.2.3 การสรางเฟรมซอนเฟรม
เมื่อเราตองการแบงเฟรมโดยในแตละแถวหรือ คอลัมนของการแบงเฟรมมีจํานวนเฟรม
ไมเทากันแลว เรามีความจําเปนที่จะตองใชการสรางเฟรมซอนเฟรมเขามาชวยในการแบงเฟรม
การสรางเฟรมซอนเฟรมใน Dreamweave เราสามารถที่จะใชแมแบบที่โปรแกรมมีให
หรื อ ใช คํ า สั่ ง ในเมนู Modify -> Frameset ก็ ได โดยขั้ น ตอนการสร า งเฟรมซ อ นในเฟรมจะ
เหมือนกับการสรางเฟรมปกติ
9.3 การเลือกเฟรมเซตและ เฟรม

เมื่อเราตองการที่จะเปลี่ยนคุณสมบัติตางๆ ของเฟรมเซตหรือ เฟรม เราจะตองทําการ
เลือกเฟรมเซตหรือ เฟรมที่ตองการเสียกอน ซึ่งการเลือกเฟรมเซตหรือ เฟรม เราสามารถทําได
โดยการเลือกผาน Document Window หรือ พาเนล Frames เมื่อเราเลือกเฟรมเซตหรือ เฟรม
จะปรากฎเสนแถบที่กรอบของเฟรมทั้งใน Document Window และพาเนล Frame เพื่อบอกวา
ตอนนี้เราเลือกเฟรมเซตหรือ เฟรมใดอยู ดังรูปที่ 9-9
9.3.1 การเลือกเฟรมเซตและ เฟรมในพาเนล Frames

พาเนล Framesใชแสดงเฟรมเซตและ เฟรม โดยเราสามารถที่จะคลิกเฟรมเซตหรือ เฟ
รมในพาเนล Frames เพื่อเลือกเฟรมเซตหรือ เฟรมในเอกสารแลว แกไขคุณสมบัติตางๆ ของเฟ
รมเซตหรือ เฟรมผานทาง Property Inspector ได
ในพาเนล Frames จะแสดงลําดับชั้นของเฟรมเซตที่ไมสามารถเห็นไดใน Document

Window โดยจะแสดงแตละเฟรมเซตลอมรอบดวยกรอบหนาและ แสดงแตละเฟรมลอมรอบ
ดวยเสนสีเทา และ ตรงกลางของแตละเฟรมจะมีชื่อของเฟรมแสดงอยู
• การแสดงพาเนล Frames เลือกคําสั่ง Window -> Other -> Frames Panel
• การเลือกเฟรมเซตในพาเนล Frames ใหคลิกที่กรอบเฟรมเซตดังรูปที่ 9-10(1)
• การเลือกเฟรมในพาเนล Frames ใหคลิกที่ภายในเฟรมที่ตองการดังรูปที่ 9-10(2)
รูปที่ 9-9 Document Window และ พาเนล Frames เมื่อ Frame ถูกเลือก
รูปที่ 9-10 การเลือกเฟรมและ เฟรมเซตในพาเนล Frames
9.3.2 การเลือกเฟรมและ เฟรมเซตใน Document Window

เมื่อเราเลือกเฟรมใน Document Window แลวจะปรากฎเสนประรอบกรอบของเฟรม
แตถาเราเลือกเฟรมเซตก็จะปรากฎเสนประทับกรอบของเฟรมเซต เมื่อเราเลือกเฟรมหรือ เฟรม
เซตแล ว คุ ณ สมบั ติ ต างๆ ของเฟรมและ เฟรมเซตจะถู ก แสดงใน Property Inspector ซึ่ งเรา
สามารถแกไขได
• การเลื อกเฟรมเซตใน Document Window ทํ า โดยคลิ ก ที่ ก รอบของเฟรมเซตใน
Document Window ดังรูปที่ 9-10(1)
• การเลือกเฟรมใน Document Window ทําโดยกดปุม Alt คางไวแลวคลิกเฟรมที่
ตองการใน Document Window ดังรูปที่ 9-10(2)
9.3.3 การเปดเอกสารภายในเฟรม
ใน Dreamweave MX เราสามารถที่จะกําหนดเนื้อหาที่จะแสดงในเฟรมที่วางเปลาโดย
การเพิ่มเนื้อหาเขาไปโดยตรงหรือ เปดไฟลที่มีอยูแลวได โดยมีขั้นตอนดังตอไปนี้
1. เลือกเฟรมที่ตองการเปดไฟล
2. เลือกคําสั่ง File -> Open in Frame
3. เลือกไฟลที่ตองการเปดแลวคลิกที่ปุม OK เพื่อทําการเปดไฟลในเฟรม
4. ถ า ต อ งการให เอกสารที่ เราเป ด ถูก แสดงในเว็บ บราวเซอรให เลื อ กคํ า สั่ ง File ->
Save Frameset
9.4 การบันทึกเฟรมและ การบันทึกเฟรมเซต

กอนที่เราจะแสดงผลเฟรมเซตในเว็บบราวเซอรเราควรจะบันทึกเฟรมเซตและ เอกสาร
อื่นๆ ที่ใชแสดงภายในเฟรมทั้งหมดกอน
การบั น ทึ ก เอกสารที่ แสดงภายในเฟรมเราสามารถที่ จะแยกบั น ทึ ก ที่ ละไฟลห รือ สั่ ง
บันทึกไฟลทั้งหมดในครั้งเดียวก็ได ซึ่งวิธีการบันทึกมีดังนี้
9.4.1 การบันทึกเฟรมเซต
1. เลือกเฟรมเซตใน Frame Panel หรือ Document Window
• เมื่อตองการบันทึกเฟรมเซตลงไฟลเดิมเลือกคําสั่ง File -> Save Frameset
• เมื่อตองการบันทึกไฟลใหมเลือกคําสั่ง File -> Save Frame As
9.4.2 การบันทึกเอกสารที่ปรากฎในเฟรม
เลื อ กเฟรมที่ ต องการแลวเลื อกคําสั่ง File -> Save Frame หรือ File -> Save Frame
As
9.4.3 การบันทึกทุกไฟลที่อยูในเฟรม
เลือกคําสั่ง File -> Save All File
9.5 การปรับแตงคุณสมบัติของเฟรม
การปรับแตงคุณสมบัติของเฟรมเราจะทําผาน Property Inspector ซึ่งมีขั้นตอนดังนี้
1. เลือกเฟรมโดยกดปุม Alt คางไวแลวคลิกเฟรมที่ตองการใน Document Window
หรือ คลิกที่เฟรมใน Frame Panel
3. ปรับ แต งคุ ณ สมบั ติของเฟรมตามตองการใน Property Inspector ซึ่ งคุ ณ สมบั ติ
ตางๆ ที่สามารถปรับแตงไดมีดังนี้
• Frame Name เปนชื่อของเฟรมซึ่งอาจจะถูกใชโดยลิงคหรือ สคริปต

• Src ชื่อไฟล HTML ที่ใชแสดงภายในเฟรม
• Scroll ใชกําหนดวาจะใหมี Scroll Bar ในเฟรมหรือไม เมื่อความยาวของเนื้อ
หามากกวาขนาดของเฟรม
• No Resize ใชกําหนดใหไมสามารถคลิกลากกรอบของเฟรมเพื่อเปลี่ยนแปลง
ขนาดได
• Border ใชกําหนดการแสดงผลกรอบของเฟรมวาจะใหแสดงผลหรือไมแสดง
ผล
• Border Color ใชกําหนดสีของกรอกของเฟรม
• Margin Width ใชกําหนดความกวางของชองวางจากทางซายและ ทางขวา
ระหวางเนื้อหาภายในเฟรมกับกรอบของเฟรม
• Margin Height ใชกําหนดความกวางของชองวางจากขา งบนและ ขางลา ง
ระหวางเนื้อหาภายในเฟรมกับกรอบของเฟรม
เมื่อเราตองการเปลี่ยนสีพื้นหลังในแตละเฟรมใหคลิกเฟรมที่ตองการแลวเลือกคําสั่ง
Modify -> Page Properties จะปรากฎไดอะลอกใหปรับแตงคุณ สมบัติตางๆ รวมไปถึงสีพื้น
หลัง เปลี่ยนสีพื้นหลังที่ตองการแลวกดปุม Ok เพื่อจบการทํางาน
9.5 การปรับแตงคุณสมบัติของเฟรมเซต
เราจะใช Property Inspector ในการปรับแตงคุณสมบัติของเฟรมเซต ซึ่งมีขั้นตอนดังนี้
1. เลือกเฟรมเซตโดยเลือกที่กรอบระหวางเฟรมในเฟรมเซตหรือ คลิกที่กรอบของเฟรม
เซตใน Frame Panel
3. ปรับแตงคุณสมบัติตางๆ ของเฟรมเซตตามตองการ โดยคุณสมบัติที่ปรับแตงไดมี
ดังนี้
• Border ใชกําหนดการแสดงผลของกรอบของเฟรมเซตวาจะแสดงผลหรือไม
• Border Width ใชกําหนดความกวางของกรอกของเฟรม
• RowCol Selection เป น ส ว นที่ ใ ช เลื อ กเฟรมตามแถวหรื อ คอลั ม น เพื่ อ จะ
กําหนดความกวางกับ ความสูง
• Value ใชกําหนดความสูงหรือ ความกวางของเฟรมโดยขึ้นอยูกับเฟรมที่ถูก
เลือกใน RowCol Selection
• Unit เป น หน ว ยของค า ที่ ก รอกในช อ ง Value ซึ่ ง มี 3 หน ว ยด ว ยกั น คื อ พิ ก
เซล(pixel) เปอรเซ็นต (Percent) และ Relative ซึ่งหนวย Relative จะเปนการ
กําหนดคาที่สัมพันธกับคาที่กําหนดใหกับแถวหรือ คอลัมนของเฟรมกอนหนานี้
เมื่อเราตองการที่จะกําหนดชื่อเรื่องของเอกสารใหคลิกเลือกเฟรมเซตแลวกรอกชื่อเรื่อง
ลงในชอง Title บน Document Window
9.6 การใชลิงคเปลี่ยนเนื้อหาภายในเฟรม
การใชลิงคในเฟรมหนึ่งไปเปดเอกสารในอีกเฟรมหนึ่ง สามารถทําไดโดยการกําหนดชื่อ
เฟรมใหกับคุณสมบัติ target ของลิงค ซึ่งขั้นตอนการกําหนดคาใหกับ target ทําไดดังนี้
1. ในมุมมองออกแบบเลือกขอความหรือ วัตถุที่ตองการสรางลิงค
2. กรอกชื่อไฟลที่ตองการลิงค ในชอง Link ของ Property Inspector
3. ในชอง Target เลือกชื่อเฟรมหรือ วินโดวที่จะใชแสดงเอกสารที่ถูกลิงค ถาเราตั้งชื่อ
ใหกับเฟรมแลว ชื่อเฟรมจะถูกแสดงในชอง Target
Dreamweaver MX : Fundamentals บทที่ 10 : Cascading Style Sheets (CSS)
บทที่ 10
Cascading Style Sheets (CSS)
10.1 รูจักกับ Cascading Style Sheets (CSS)

CSS เปนกลุมของรูปแบบการแสดงผลที่เราไดสรางไวเพื่อใชกําหนดการแสดงผลของเนื้อ
หาในเว็บเพจ การนํา CSS เขามากําหนดการแสดงผลจะชวยใหการกําหนดการแสดงผลของเนื้อ
หาที่อยูในเว็บเพจทําไดงายและ ถูกตองมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผล
บางอยางที่ HTML ไมสามารถควบคุมไดดวย อยางเชน ขนาดของตัวอักษรบนเว็บเพจใน CSS จะ
กําหนดขนาดเปนพิกเซล ซึ่งจะทําใหการแสดงผลของตัวอักษรในทุกๆ เว็บเบราเซอรเหมือนกัน
หรือ ตําแหนงของเลเยอรซึ่งดวย CSS เราสามารถที่จะกําหนดตําแหนงการแสดงผลของมันได
เปนตน
CSS จะประกอบดวย 2 สวนดวยกันคือ Selector และ Declaration ดังรูปที่ 10-1
.FormStyle { font-family:MS Sans Serif;font-size:12px}
Selector Declaration
รูปที่ 10-1 สวนประกอบของ CSS
1. Selector เปนชื่อของ CSS

2. Declaration เปนสวนที่ใชกําหนดวา CSS นี้มีรูปแบบอะไรบาง ซึ่งประกอบไปดวย
คุณสมบัติและ คาของคุณสมบัติ
ประโยชนที่สําคัญของการนํา CSS มาใชก็คือ เมื่อเราเปลี่ยนแปลงรูปแบบที่กําหนดไวใน
CSS เมื่อใดแลวรูปแบบการแสดงผลของขอความหรือ วัตถุทั้งหมดที่ใช CSS ดังกลาวจะเปลี่ยน
แปลงดวย ซึ่งประเภทของ CSS มีดังนี้
1. Customer CSS Style หรือ Class Style เปน CSS ที่สรางขึ้นและ สามารถใชไดทุกที่
ของเว็บเพจ
2. HTML Tag Style เปน CSS ที่มีการกําหนดรูปแบบใหกับ HTML เดิมที่มีอยูแลว
3. CSS Sector Style เปน CSS ที่มีการกําหนดรูปแบบใหกับแท็กที่มีการผสมกันหรือ

ทุกแท็กที่มี id ตรงกับที่เรากําหนดใน CSS
10.2 การใช CSS Style Panel
เราใช CSS Style Panel ในการสราง CSS ใหม แสดง CSS ที่มีอยูและ กําหนด CSS ให
กับขอความหรือ วัตถุในเว็บเพจ เมื่อเราตองการที่จะใช CSS Style Panel ใหเลือกเมนู Window -
> CSS Styles
ใน CSS Style Panel จะมี ปุ ม radio อยู 2 ปุ ม ด ว ยกั น ซึ่ ง ใช ส ลั บ มุ ม มองใน CSS Style
Panel ซึ่งมี 2 มุมมองดวยกันคือ Apply Style และ Edit Style ดังรูปที่ 10-2
รูปที่ 10-2 ปุม Apply Style และ Edit Style
มุมมอง Apply Style เปนมุมมองที่ใชดู CSS Style ที่มีอยูและ กําหนด CSS Style เหลา
นั้นใหกับขอความหรือ วัตถุที่ตองการในเว็บเพจ ในมุมมองนี้จะแสดง CSS Style ประเภท Class
Style เท านั้ น เนื่องจาก HTML Tag Style และ Selector Style จะถูก ใชกับขอความหรือ วัตถุ ที่
ตรงกับที่กําหนดไวใน Style ทั้งสองดังกลาวอยูแลว
มุมมอง Edit Style เปนมุมมองที่ใชดูและ แกไข CSS Style ที่มี อยูในเอกสาร ซึ่งในมุ ม
มองนี้จะแสดง CSS Style ทั้ง 3 ประเภท
ใน CSS Style Panel ทางมุมขวาลางจะประกอบไปดวยปุมตางๆ ที่ใชดําเนินการ ดังตอ
ไปนี้
1. ปุ ม Attach Style Sheet เปดไดอะล็อก External Style Sheet เพื่อคน หาไฟลที่
เก็บ Style Sheet ไวแลวเชี่อมโยงไฟลดังกลาวกับเอกสารหรือ นําเขา Style Sheet ดัง
กลาวในเอกสารที่เราทํางานอยู
2. ปุม New CSS Style ใชเปดไดอะล็อก New CSS Style ซี่งใชในการสราง Style
ใหม
3. ปุม Edit Style Sheet ใชเปดไดอะล็อก CSS Style Definition ซึ่งใชในการแกไข

Style ที่มีอยูในเอกสารที่เราทํางานอยูหรือ เอกสารที่เชื่อมโยงจากภายนอก
4. ปุม Delete CSS Style ใชลบ CSS Style ที่อยูใน Panel และ ขอความหรือ วัตถุที่
ใช Style ดังกลาว
10.3 การสราง CSS Style ใหม
• เป ด CSS Panel คลิ ก ที่ ปุ ม + ใน Panel หรือ ใน Property Inspector คลิ ก ที่ ไอ
คอน ที่ อ ยู ท างมุ ม บนขวาแล ว เลื อ ก CSS Mode เพื่ อ เปลี่ ย น Property
Inspector ใหอยูใน CSS Mode ดังรูปที่ 10-3
รูปที่ 10-3 Property Inspector เมื่อเปลี่ยนเปน CSS Mode
• ในปอปอัพเมนู CSS Style เลือก New CSS Style

• เลือกที่เมนู Text -> CSS -> New CSS จะปรากฎไดอะล็อกที่ใหกรอกขอมูลเพื่อ
สราง CSS ใหม ดังรูปที่ 10-4
รูปที่ 10-4 ไดอะล็อก New CSS Style
2. พิมพชื่อของ Style ในฟลด
3. ใน Type เลือกประเภทของ Style ที่จะสรางซึ่งมี 3 ประเภทดังที่กลาวไวขางตน

4. ใน Define In เลือกไฟลที่จะเก็บ Style ที่สรางไว ซึ่งมีดังนี้
• เลื อ ก This Document Only เมื่ อ ต อ งการเก็ บ Style ไว ใ นไฟล เดี ย วกั บ ไฟล ที่
กําลังทํางานอยู
• เลือก New Style Sheet File ในปอปอัพเมนูเมื่อตองการเก็บ Style ในไฟลภาย
นอกที่สรางขึ้นมาใหม
• เลือกรายการไฟลที่ อยู ในปอปอัพ เมนู เพื่อเก็บ Style ที่สรางขึ้นใหม ในไฟลดัง
กลาว
5. กดปุม OK เพื่อดําเนินการในขั้นตอนตอไป
6. จะปรากฎไดอะล็อก CSS Style Definition ดังรูปที่ 10-4 ซึ่งในไดอะล็อกจะแสดงคุณ
สมบั ติ ต า งๆ ที่ เราสามารถเลื อ กใช กั บ Style ได เมื่ อ เราเลื อ กคุ ณ สมบั ติ ต า งๆ ที่
ตองการเสร็จแลวกดปุม OK เพื่อจบการสราง CSS Style
รูปที่ 10-4 ไดอะล็อก CSS Style definition
10.3 การใช Class Style

Class Style เปน Style ชนิดเดียวที่สามารถใชกับขอความหรือ วัตถุใดๆ ที่อยูในเอกสาร
ไดทั้งหมด เมื่อเราใช Class Style กับขอความหรือ วัตถุ จะมีบางคุณสมบัติที่ไมสามารถแสดงผล
ใน Document Window ไดจําเปนตองดูผานเว็บเบราเซอรเทานั้น
ขั้นตอนการใช Class Style มีดังนี้
1. เลือกขอความหรือ วัตถุที่ตองการ
2. เป ด CSS Style Panel เปลี่ ย นมุ ม มองเป น มุ ม มอง Apply Style แล ว เลื อก Style ที่
ตองการในรายการ CSS Style ที่แสดงอยูในกลองแสดงรายการดังรูปที่ 10-5 หรือ ใน
Property Inspector เปลี่ยนเปน CSS Mode แลวเลือก Style ที่ตองการในปอปอัพ
เมนู CSS Style หรือ เลือกเมนู Text -> CSS Styles และ เลิก Style ที่ตองการในเมนู
ยอย
รูปที่ 10-5 รายการ CSS Style ในพาเนล CSS Styles
3. การยกเลิกใช Style ทําไดโดยเลือกขอความหรือ วัตถุที่ตองการยกเลิกใช Style แลว

ในCSS Style Panel เลื อ ก No CSS Style หรื อ ใน Property Inspector ใน CSS
Mode เลือก none ในปอปอัพเมนู CSS
10.4 การสรางและ เชื่อมโยงไปยัง CSS Style Sheet

CSS Style Sheet เปนไฟลที่เก็บรูปแบบของ CSS ที่เราสรางไว เมื่อเราตองการใช CSS ที่
อยูในไฟลดังกลาว ก็เพียงแคนําเขาหรือ เชื่อมโยงไฟลดังกลาวเขากับไฟลที่เราทํางานอยู เมื่อใดก็
ตามที่ เราแก ไข Style ที่ อยู ใน CSS Style Sheet แลว ไฟลอื่น ๆ ที่ ทํ าการเชื่ อมโยงมายั งไฟล ดั ง
กลาวและ ใช Style ที่อยูในไฟลก็จะเปลี่ยนการแสดงผลตามที่เราแกไขดวย
ขั้นตอนการเชื่อมโยงและ นําเขา CSS Style Sheet มีดังนี้
1. เปด CSS Style Panel

2. คลิกที่ปุม Attach Style
3. คลิกที่ปุม Browse เพื่อหา CSS Style Sheet ที่ตองการ
4. เลือก Link เพื่อทําการเชื่อมโยง CSS Style Sheet เขากับไฟลที่เรากําลังทํางานอยู
10.5 การแกไข CSS Style

การแกไข CSS Style เราสามารถทําไดกับ CSS Style ทั้งที่อยูในไฟลเดียวกันกับไฟลที่เรา
กําลังทํางานอยูและ ไฟลภายนอกที่เราเชื่อมโยงดวย โดยขั้นตอนการแกไขมีดังนี้
1. ใน CSS Style Panel เปลี่ยนมุมมองเปนแบบ Edit Style
2. เลือก Style ที่ตองการแกไขในกลองรายการแลวดับเบิลคลิกที่เมาปุมซาย
3. จะปรากฎไดอะล็อก CSS Style Definition ใหแกไข Style เมื่อแกไขเสร็จแลวกด OK
เพื่อจบการแกไข
Dreamweaver MX : Fundamentals บทที่ 11 : การใส Interactive Page Elements
บทที่ 11
การใส Interactive Page Elements
ในบางครั้งการเพิ่มการโตตอบระหวางผูมาเยี่ยมชมกับเว็บเพจ ก็เปนปจจัยที่สําคัญอยาง
หนึ่งที่ทําใหเว็บไซตของเราดูนาสนใจมากขึ้น ใน Dreamweaver เราสามารถที่จะสรางสิ่งที่โตตอบ
กับผูชมไดโดยใชสิ่งที่เรียกวา Behaviors และ Animation
11.1 การใช JavaScript Behavior

ใน Dreamweaver มี คุ ณ สมบั ติ ห นึ่ ง ที่ เรีย กวา Behavior ซึ่ งใช ในการสรา งการโต ต อบ
ระหวางวัตถุตางๆ ที่อยูเว็บเพจกับผูมาเยี่ยมชม ทุกครั้งที่เรากําหนด Behavior ใหกับวัตถุในเว็บ
เพจจะมีสิ่งที่เขามาเกี่ยวของกับวัตถุ 2 สิ่งดวยกันคือ อีเวนต (Event) และ แอ็คชั่น (Action)
อีเวนต (Event) คือเหตุการณที่เราสนใจที่เกิดขึ้นกับวัตถุในเว็บเพจ อยางเชน การเลื่อน
เมาสพอยเตอรผานรูปภาพ การคลิกที่ลิงค หรือ การคลิกที่ปุม เปนตน ซึ่งแตละวัตถุที่อยูในเว็บ
เพจจะมีจํานวนและ ลักษณะของอีเวนตที่ไมเทากัน อีเวนตที่นิยมใชกันก็จะมี onClick (เปน อี
เวนตที่เกิดเมื่อคลิกที่วัตถุ), onMouseOut (เปนอีเวนตที่เกิดเมื่อเมาสพอยเตอรถูกเลื่อนออกจาก
วัตถุ), onMouseOver (เปนอีเวนตที่เกิดเมื่อเมาสพอยเตอรอยูบนวัตถุ) และ onLoad (เปนอีเวนต
ที่เกิดเมื่อวัตถุถูกโหลดเขามาในเว็บเพจ)
แอ็คชั่น (Action) คือ โคดภาษาจาวาสคริปตที่ถูกเขียนขึ้นเพื่อทํางานบางอยางที่กําหนด
ไว เชน เปดหนาตางเว็บบราวเซอรใหม แสดงกลองขอความ หรือ เลนเพลง เปนตน
ทุกครั้งที่เรากําหนด Behavior ใหกับวัตถุในเว็บเพจจะตองมีการกําหนดอีเวนตและ แอค
ชั่นที่สัมพันธกันทุกครั้ง เมื่อผูชมทําใหวัตถุเกิดอีเวนตที่ตรงกับที่กําหนดไว อีเวนตดังกลาวก็จะ
เรียกแอ็คชั่นที่สัมพันธกับมันมาทํางาน อยางเชน มีการกําหนดใหแสดงกลองขอความถาผูใชคลิก
ที่ปุม หรือ เปลี่ยนขนาดตัวอักษรเมื่อผูชมเลื่อนเมาสพอยตเตอรผานตัวอักษร เปนตน
11.2 การใช Behavior Panel

เราจะใช Behavior Panel ในการกําหนด Behavior ใหกับวัตถุตางๆ ที่อยูในเว็บเพจ การ
เปด พาเนล Behavior ทําไดโดยเลือกคําสั่ง Window -> Behaviors ถาวัตถุที่เราเลือกในเว็บเพจมี
Behavior เดิมอยูแลวก็จะแสดงในพาเนล Behavior ดังรูปที่ 11-1
รูปที่ 11-1 พาเนล Behaviors
การใชงานสวนตางๆ ของพาเนล Behavior มีดังนี้

• ปุม Action (+) เปนปอปอัพเมนูของแอ็คชั่นที่เราสามารถกําหนดใหกับวัตถุที่เลือกอยู
ในขณะนั้นได เมื่อเราเลือกแอ็คชั่นที่ตองการจากปอปอัพเมนูแลว ถาแอ็คชั่นใดตองมี
การสงพารามิเตอรก็จะปรากฎไดอะล็อกใหกรอกพารามิเตอรดวย
• ปุ ม Delete (-) ใช ล บ Behavior ที่ ถู ก เลื อ กในพาเนล Behavior ออกจากวั ต ถุ ที่ เรา
เลือกในขณะนั้น
• ปุม Up และ Down ใชเลื่อนแถบสีในพาเนล Behavior ไปยังรายการขางบนและ ขาง
ลางตามลําดับ
• Event เปนปอปอัพเมนูของอีเวนททั้งหมดที่มีของวัตถุที่เลือกในขณะนั้น โดยที่จาํ นวน
และ ลักษณะอีเวนตของแตละวัตถุจะแตกตางๆ กัน ถาไมพบอีเวนตที่ตองการอาจจะ
เปนเพราะ เลือกชนิดและ รุนของเว็บบราวเซอรไมถูกตองใหเลือกชนิดและ รุน ของเว็บ
บราวเซอรไดที่เมนู Show Event For
• Show Event For เปนเมนูยอยของ Event ที่ใชเลือกชนิดและ รุนของเว็บบราวเซอร
หลังจากที่เลือกชนิดและ รุนของเว็บบราวเซอรที่ตองการไดแลว ใน Event จะแสดง
รายการอีเวนตที่สามารถใชไดในเว็บบราวเซอรที่เลือก ซึ่งเว็บบราวเซอรรุมเกาๆ จะใช
อีเวนตไดนอยเมื่อเทียบกับเว็บบราวเซอรรุนใหมๆ
11.3 การนํา Behavior ไปใชกับวัตถุในเว็บเพจ

เราสามารถที่ จ ะกํ า หนด Behavior ให กั บ ทุ ก ๆ วั ต ถุ ที่ อ ยู ในเว็ บ เพจได โดยในแต ล ะ
Behavior จะประกอบไปดวยอีเวนตและ แอ็คชั่น ซึ่งในแตละอีเวนตเราสามารถที่จะกําหนดแอ็ค
ชั่นที่สัมพันธกับมันไดมากกวาหนึ่งแอคชั่น
ขั้นตอนการกําหนด Behavior ใหกับวัตถุในเว็บเพจมีดังนี้

1. เลือกวัตถุบนเว็บเพจที่ตองการกําหนด Behavior
2. เลือกคําสั่ง Window -> Behaviors เพื่อเปดพาเนล Behavior
3. คลิกที่ปุม + เพื่อเลือกแอ็คชั่นที่ตองการจากปอปอัพเมนู Actions ดังรูปที่ 11-2
รูปที่ 11-2 ปอปอัพเมนู Actions
4. ถาแอ็คชั่นที่เราเลือกตองมีการสงคาพารามิเตอรไปดวยก็จะปรากฎไดอะล็อกใหกรอก
คาพารามิเตอร
5. คลิกปุม OK หลังจากที่คลิกปุมแลวในคอลัมน Event ของพาเนล Behavior จะปรา
กฎอีเวนตเบื้องตนที่ใชกับแอ็คชั่นที่เราเลือก ถาตองการจะเปลี่ยนอีเวนตที่ใชใหคลิกที่
คอลัมน Event จะปรากฎปอปอัพเมนูใหเลือกอีเวนตตางๆ ของวัตถุที่เราเลือกอยูใน
ขณะนั้น ให เลือกอีเวนตที่ตองการ เมื่อเลือกแลวชื่อของอีเวนตใหมจะถูกแสดงใน
คอลัมน Event
11.4 การสราง Rollover image

Rollover image คือ รูปภาพที่เกิดการเปลี่ยนแปลงเมื่อผูใชเลื่อนเมาสพอยตเตอรมาวาง
บนรูปภาพ Rollover image จะประกอบไปดวยรูปภาพ 2 รูป รูปแรกจะใชแสดงเมื่อเว็บเพจถูก
โหลดครั้งแรกและ เมื่อเมาสพอยตเตอรไมไดอยูบน Rollover Image สวนรูปที่สองจะใชแสดงเมื่อ
เมาสพอยตเตอรอยูบน Rollover Image ดังรูปที่ 11-3 โดยที่รูปทั้งสองรูปตองมีขนาดเทากัน
รูปที่ 11-3 การทํางานของ Rollover Image

การทํ า งานของ Rollover image ไม ส ามารถที่ แ สดงผลการทํ า งานใน Document
Window ไดโดยตรง ดังนั้นการทดสอบการทํางานทําโดยดูผานเว็บบราวเซอรเทานั้น โดยกดปุม
F12 เพื่อเปดเว็บบราวเซอรแลวแสดงผลเว็บเพจที่เรากําลังทํางานอยู
ขั้นตอนการสราง Rollover image มีดังนี้
1. เลือกตําแหนงที่ตองการแทรก Rollover image ใน Document Window
• ใน Common Tab ของ Insert Bar ใหคลิกที่ปุม Rollover Image
• เลือกคําสั่ง Insert -> Interactive Images -> Rollover Image
3. จะปรากฎไดอละล็อก Insert Rollover Image
4. ในฟลด Image Name กรอกชื่อของ Rollover Image
5. ในชอง Original Image คลิกที่ปุม Brows และ เลือกรูปภาพที่ตองการแสดงเมื่อเมาส
พอยตเตอรไมไดอยูบน Rollover Image
6. ในช อ ง Rollover Image คลิ ก ที่ ปุ ม Browse และ เลื อ กรู ป ภาพที่ ต อ การแสดงเมื่ อ
เมาสพอยตเตอรวางบน Rollover Image
7. ถาเราตองการใหรูปที่ใชใน Rollove Image ทั้งหมดถูกโหลดมาเก็บไวในหนวยความ
จํ า ของเว็ บ บราวเซอร ก อ นแสดงที่ จ ะแสดงผล ให ค ลิ ก เลื อ กที่ Preload Rollover
Image
8. ในฟ ลด Alternate Text พิ ม พ ขอความที่ ใช อธิบ ายรูป ภาพสําหรับ เว็ บ บราวเซอรที่
แสดงผลเฉพาะขอความเทานั้น
9. ในฟลด When Clicked Go to URL คลิกที่ปุม Browse และ เลือกไฟลที่ตองการเปด
เมื่อคลิกที่ Rollover Image
10. คลิกปุม OK เพื่อจบการสราง Rollover Image
11.5 การสราง Disjointed Rollovers

Disjointed Rollovers เปนรูปภาพที่เมื่อเรานําเมาสพอยตเตอรไปวางบนรูปภาพแลวรูป
ภาพอื่นนอกจากตัวมันเองในเว็บเพจเกิดการเปลี่ยนแปลง ซึ่งการสราง Disjointed Rollovers มี
ขั้นตอนดังนี้
1. เพิ่มรูปภาพที่ใชแสดงกอนที่จะเปลี่ยนแปลงเมื่อเลื่อนเมาสพอยตเตอรไปวางบนรูป
ภาพที่ทําใหรูปภาพอื่นเปลี่ยนแปลงลงในเอกสาร
2. พิมพชื่อรูปภาพในฟลดที่อยูทางขวาของรูปภาพเล็กที่อยูใน Property Inspector ใน

ขั้นตอนนี้สําคัญ เพราะวากอนที่เราจะกําหนด Behavior ที่ใชจัดการกับการเปลี่ยน
แปลงรูปภาพ เราจําเปนตองตั้งชื่อรูปภาพทั้งหมดที่ตองการใหเกิดการเปลี่ยนแปลง
กอนเนื่องจากชื่อรูปภาพดังกลาวจะถูกอางถึงโดย Behavior ดังนั้นถาไมมีการตั้งชื่อ
รูปภาพแลวBehavior จะไมสามารถอางถึงไดและ ชื่อรูปภาพที่ตั้งตองอยูในรูปแบบที่
โคดภาษาจาวาสคริปตเขาใจดวย (ใชไดฉพาะตัวอักษรและ เครื่องหมาย “_”)
3. เพิ่มรูปภาพที่จะใชเปนรูปภาพที่เมื่อเมาสพอยตเตอรเลื่อนไปวางบนรูปภาพแลวตัว
มันเองและ รูปภาพอื่นๆ ในเว็บเพจเกิดการเปลี่ยนแปลง ซึ่งตองใช Rollover Image
4. เพิ่ ม Rollover Image ลงในเอสารและเลื อ กที่ Rollover Image แล ว เป ด พาเนล
Behavior ขึ้นมาแลวดูแถวที่คอลัมน Action เปน Swap Image ดังรูปที่ 11-4 ใหดับ
เบิลคลิกที่คอลัมนดังกลาวแลวจะปรากฎไดอะล็อก Swap Image ดังรูปที่ 11-5 แลว
ทําตามขั้นตอนตอไปนี้
a. ในไดอะล็อกในกลองรายการ Image เลือกชื่อรูปภาพที่ตองการใหเกิดการ
เปลี่ยนแปลง
b. เลือกไฟลรูปภาพที่แสดงเมื่อเกิดการเปลี่ยนแปลงในฟลด Set Source To
c. ถาตองการใหรูปภาพอื่นเปลี่ยนแปลงใหทําตามขั้นตอน a และ b ซ้ําอีกครั้ง
จนหมดรูปภาพในกลองรายการ Image
รูปที่ 11-4 แอคชั่น Swap Image ของ Rollover Image
รูปที่ 11-5 ไดอะล็อก Swap Image
5. กดปุม OK เมื่อตองการจบการสราง Disjointed Image
11.6 Jump Menu

Jump Menu เปนปอปอัพเมนูที่เมื่อเลือกหัวขอที่อยูในเมนูแลวจะทําการลิงคไปยังหนา
เว็บเพจที่กําหนดไวในเมนู Jump Menu จะมีประโยชนเมื่อเราตองการสรางลิงคไปยังหนาเว็บ
เพจตางๆ หลายหนาและ ไมมีพื้นที่ที่จะแสดงลิงคเหลานั้นไดพอเราก็จะเก็บลิงคเหลานั้นไวในปอป
อัพเมนูแทน
11.6.1 การสราง Jump Menu

1. เลือกจุดที่ตองการแทรก Jump Menu ใน Document Window
2. เลือกคําสั่ง Insert -> Form Object -> Jump Menu
3. หลังจากที่เลือกคําสั่งแลวจะปรากฎไดอะลอก ดังรูปที่ 11-6 ที่ใหกรอกขอมูลที่ใชสราง
Jump Menu ซึ่งขอมูลที่ใหกรอกมีดังนี้
• คลิกที่ปุม + เพื่อเพิ่มหัวขอในกลองรายการ Menu Item
• เลือกหัวขอในกลองรายการ Menu Item
• พิมพขอความที่ตองการแสดงในปอปอัพเมนูในฟลด Text
• คลิกที่ปุม Browse ที่อยูติดกับฟลด When Selected, Go to URL เพื่อคนหาและ
เลือกไฟลที่ตองการลิงคเมื่อหัวขอในเมนูถูกเลือก
• ในปอปอัพเมนู Open URLs In เลือกหนาตางหรือเฟรม ที่ตองการใหแสดงเว็บ

เพจที่ลิงคโดย Jump Menu
• ในฟลด Menu Name พิมพชื่อของ Jump Menu
• ต ร ง Option เ ลื อ ก Insert Go Button After menu เ มื่ อ ต อ ง ก า ร ใ ห
Dreamweaver สรางปุม Go หลัง Jump Menu ที่คลิกแลวจะลิงคไปยังเว็บเพจที่
ถูกเลือกใน Jump Menu
• ตรง Option เลือก Select First Item After URL Change เมื่อตองการให Jump
Menu แสดงหัวขอแรกในเมนูทุกครั้งที่เปลี่ยนไปหนาเว็บเพจอื่น
รูปที่ 11-6 ไดอะล็อก Insert Jump Menu
11.6.2 การแกไข Jump Menu

เราสามารถแกไข Jump Menu ที่สรางขึ้นได 2 วิธีคือ
• คลิกเลือก Jump Menu ที่ตองการแกไขแลว ดับเบิลคลิกที่แอ็คชั่น Jump Menu
ในคอลัมน Action
• คลิกเลือก Jump Menu ที่ตองการแกไขแลวใน Property Inspector คลิกที่ปุม
List Value แลวแกไขคาที่ตองการแสดงในปอปอัพเมนูในคอลัมน Item Label
และ URL ของเว็บเพจที่ตองการลิงคไปในคอลัมน Value
11.7 การใสเลเยอร (Layer) สําหรับงาน Interactive

เลเยอร เปนพื้นที่สี่เหลี่ยมที่เราสามารถจัดวางไวในสวนใดก็ไดของเว็บเพจ ดังรูปที่ 11-7
ซึ่งในเลเยอรเราสามารถที่จะใสขอควม รูปภาพหรือ วัตถุตางๆ เชนเดียวกับที่เพิ่มในเว็บเพ็จได
ดวยคุณสมบัติดังกลาวของเลเยอร จึงทําใหมันถูกนําไปใชในการวางเนื้อหาในเว็บเพ็จ
รูปที่ 11-7 เลเยอร
11.7.1 การเพิ่มเลเยอรลงในเว็บเพ็จ
การเพิ่มเลเยอรลงในเว็บเพ็จทําได 2 วิธดังนี้
1. ถาตองการวาดเลเยอรใหคลิกที่ไอคอน Draw Layer ใน Insert Bar หลังจากที่
คลิกแลวเมาสพอยตเตอรจะเปลี่ยนเปนรูป + ใหคลิกลากเมาสพอยตเตอรเพื่อสราง
พื้นที่ของเลเยอรใน Document Window ดังรูปที่ 11-8
รูปที่ 11-8 การสรางเลเยอร
2. ถาตองการเพิ่มเลเยอรโดยไมวาดใหเลือกที่คําสั่ง Insert -> Layer
11.7.2 การเลือกเลเยอรใน Document Window

การเลือกเลเยอรใน Document Window สามารถทําได 3 วิธีดังนี้
1. เป ด พาเนล Layer โดนเลื อกคํ าสั่ ง Window -> Other -> Layers แล ว ให ค ลิ ก ที่ ชื่ อ
ของเลเยอรในพาเนล Layer ดังรูปที่ 11-9
รูปที่ 11-9 การเลือกเลเยอรในพาเนล Layers
2. คลิกที่ Selection Handle ของเลเยอร ดังรูปที่ 11-10
รูปที่ 11-10 การเลือกเลเยอรโดยใช Selection Handle
3. คลิกที่ขอบของเลเยอร
11.7.3 การปรับขนาดเลเยอร
การปรับขนาดเลเยอรสามารถทําได 2 วิธีดังนี้
1. คลิ ก ที่ ขอบด า นใดด า นหนึ่ ง ของเลเยอรจ ะปรากฎ Resize Handle ดั งรูป ที่ 11-11
ลอมรอบเลเยอรหลังจากนั้นในคลิกลาก Resize Handle เพื่อปรับขนาดของเลเยอร
ตามตองการ
รูปที่ 11-11 การขยายขนาดเลเยอรดวย Resize Handle
2. คลิกพื้นที่ที่อยูในเลเยอรแลวพิมพคาความกวางในฟลด Width และ ความสูงในฟลด

Height ใน Property Inspector
11.7.4 การเปลี่ยนตําแหนงของเลเยอร
ตําแหนงของเลเยอรจะอางอิงกับเว็บเพ็จวาเลเยอรหางจากดานบนและ ดานซายของเว็บ
เพ็จเปนจํานวนเทาไร ซึ่งการเปลี่ยนตําแหนงของเลเยอรสามารถทําไดหลายวิธีดังนี้
1. คลิ ก ลาก Selection Handle ที่ เ ราต อ งการเปลี่ ย นตํ า แหน ง ไปยั ง ตํ า แหน ง ที่ เรา
ตองการใน Document Window
2. คลิกพื้นที่ที่อยูในเลเยอรแลวพิมพระยะหางจากดานบนในฟลด T และ ระยะหางจาก
ดานซายในฟลด L ใน Property Inspector
11.7.5 การเพิ่มเนื้อหาลงในเลเยอร
การเพิ่มเนื้อหาลงในเลเยอรทําไดเชนเดียวกับที่เราเพิ่มเนื้อหาลงในเว็บเพ็จ ซึ่งมีขั้นตอน
ดังนี้
1. คลิกพื้นที่ที่อยูในเลเยอรที่ตองการเพิ่มเนื้อหา
2. พิมพขอความ เพิ่มรูปภาพหรือ วัตถุที่ตองการลงในเลเยอร
11.7.6 การแสดงและ ซอนเลเยอร

1. เปดพาเนล Layer โดยเลือกคําสั่ง Window -> Others -> Layers
2. คลิกที่ไอคอนรูปตา ในคอลัมนตาเพื่อแสดงหรือ ซอนเลเยอรที่ตองการ
11.7.7 การใช Behavior กับ Layer เพื่อควบคุมการแสดงผล

ใน Dreamweaver เราสามารถที่จะใช Behavior ในการควบคุมการแสดงผลของ Layer
ได โดย Behavior ที่ Dreamweaver มีใหใชจัดการกับเลเยอรคือ Drag Layer และ Show-Hide
Layer
Drag Layer เปน Behavior ที่ทําใหเราสามารถที่จะคลิกลากเลเยอรที่อยูในเว็บเพ็จไปวาง
ไวบริเวณใดก็ไดของเว็บเพ็จ ซึ่งการใช Drag Layer กับเลเยอรมีขั้นตอนดังนี้
1. เลือกเลเยอรที่ตองการใช Drag Layer
2. เปดพาเนล Behavior โดยเลือกคําสั่ง Window -> Behaviors
3. ในพาเนล Behavior คลิกที่ปุม + แลวเลือก Drag Layer
Show-Hide Layer เปน Behavior ที่ทําใหเราสามารถแสดงผลหรือ ซอนเลเยอรได ซึ่งการ
ใช Show-Hide Layer มีขั้นตอนดังนี้
1. เลื อ กข อ ความ รู ป ภาพหรื อ วั ต ถุ ที่ ต อ งการใช Show-Hide Layer ใน Document
Window
2. เปดพาเนล Behavior โดยเลือกคําสั่ง Window -> Behaviors
3. ในพาเนล Behavior คลิกที่ปุม + แลวเลือก Show-Hide Layer หลังจากที่คลิกจะป
รากฎไดอะล็อก Show-Hide Layer ดังรูปที่
4. เลือกเลเยอรที่ตองการกําหนดการแสดงผลในกลองรายการ Name Layers แลวคลิก
ที่ปุม Show ถาตองการใหแสดงผลหรือ คลิกที่ปุม Hide ถาตองการซอนหรือ คลิกที่
ปุม Default เพื่อใชคาที่เว็บบราวเซอรกําหนดให
5. ทําซ้ําในขั้นตอนที่ 4 กับเลเยอรอื่นที่ตองการจนครบตามที่ตองการ
6. คลิกที่ปุม OK เพื่อจบการใช Show-Hide Layer
Dreamweaver MX : Fundamentals บทที่ 12 : การทดสอบ อัพโหลด และ ดูแลรักษาเว็บไซท
บทที่ 12
การทดสอบ อัพโหลดและ ดูแลรักษาเว็บไซต
กอนที่เราจะอัพโหลด (Upload) เว็บไซตของเราที่สรางขึ้นไปไวที่เว็บเซิรฟเวอรและ ให

บุคคลทั่วไปเขาเยี่ยมชมนั้น เราควรจะมีการทดสอบเว็บไซตดังกลาวในเครื่องคอมพิวเตอรของเรา
เสียกอน สิ่งที่เราทดสอบอาจจะเปนการแสดงผลของเว็บไซตในเว็บบราวเซอรที่เรากําหนดไววาถูก
ตองหรือ ไม การลิงคไปแตละเว็บเพจมีสวนไหนที่ผิดพลาดบางและ ระยะเวลาที่ใหในการเปดเว็บ
เพจนานไปหรือไม เปนตน
12.1 การทดสอบการแสดงผลเว็บเพจในเว็บบราวเซอร
กอนที่เราจะสรางเว็บไซตเพื่อใหบุคคลทั่วไปเขามาเยี่ยมชมนั้น ในขั้นตอนของการวาง
แผนจะมีการกําหนดชนิดของเว็บบราวเซอรที่ใชเปดเว็บเพจของเรา ดังนั้นเราจึงตองมีการทดสอบ
การแสดงผลของเว็บเพจที่เราสรางขึ้นในเว็บบราวเซอรเพื่อใหแนใจไดวาเว็บเพจของเราแสดงผล
ได อย างถูกต องในเว็บบราวเซอรที่เรากําหนดไว ใน Dreamweaver จะมีเครื่องมื อที่ ชวยให เรา
สามารถที่ จ ะสรางเว็บ เพจที่ ส ามารถเป ด ดู ในทุ ก ๆ เว็บ บราวเซอรห รือ เฉพาะเว็ บ บราวเซอรที่
ตองการได
ใน Dreamweaver จะมีคุณสมบัติที่เรียกวา Check Target Browser ที่ใชตรวจสอบแทก
HTML ในเอกสารวาสามารถใชไดกับเว็บบราวเซอรที่เราตองการหรือไม ซึ่งขั้นตอนการทดสอบ
การแสดงผลเว็บเพจในเว็บบราวเซอรดวย Dreamweave มีดังนี้
1. ถาตองการตรวจสองเอกสารปจจุบันใหบันทึกไฟลปจจุบันกอนแตถาตองการตรวจ
สอบไฟลอื่นในไซตใหดับเบิลคลิกที่ชื่อไฟลในไซตที่ตองการใน Site Panel
2. เลือกคําสั่ง File -> Check Page -> Check Target Browser
3. จากรายการเว็บบราวเซอรในไดอะล็อก Check Target Browsers ดังรูปที่ 12-1
เลือกเว็บบราวเซอรที่ตองการใชตรวจสอบไซตของเรา
รูปที่ 12-2 ไดอะล็อก Check Target Browsers
4. คลิกที่ Check แลว Dreamweaver จะแสดงรายงานในพาเนล Target Browser

Check
รูปที่ 12-3 พาเนล Taget Browser Check
5. ถาตองการบันทึกรายงาน คลิกที่ปุม Save Report ในพาเนล Target Browser

Check
12.2 การเปดเว็บเพจในเว็บบราวเซอรผานทาง Dreamweaver

ในขณะที่เราออกแบบและ สรางเว็บเพจดวย Dreamweaver เราสามารถที่จะเปดเว็บเพจ
ดังกลาวในเว็บบราวเซอรผานทาง Dreamweaver ได ซี่งคุณสมบัติดังกลาวนี้จะทําใหเราสามารถ
ตรวจสอบความผิดพลาดตางๆ ในขณะที่พัฒนาเว็บเพจไดงายขึ้น
การเปดเว็บเพจที่เราสรางขึ้นในเว็บบราวเซอรผานทาง Dreamweaver นั้น เราไมจําเปน
ตองบันทึกไฟลดังกลาวกอนก็สามารถเปดได โดยเว็บเพจที่แสดงในเว็บบราวเซอรสามารถทํางาน
ไดเหมือนกับเว็บเพจที่มีการบันทึกแลว
การเปดเว็บเพจในเว็บบราวเซอรผานทาง Dreamweaver สามารถทไดโดยเลือกคําสั่ง File ->

Preview in Browser แลวเลือกเว็บบราวเซอรที่ตองการในรายการหรือ กดปุม F12 หรือ เลือกที่
icon บน Menu Bar
12.3 การตรวจสอบลิงคภายในเว็บเพจหรือ ไซต

ในบางครั้งลิงคตางๆ ที่เราสรางขึ้นในเว็บเพจ อาจจะเกิดความผิดพลาดขึ้นไดโดยเฉพาะ
การลิงคไปยังเอกสารที่ไมมีในเว็บเพจ ซึ่งอาจจะเกิดจากเอกสารดังกลาวถูกยายที่หรือ ถูกลบออก
ไปจากไซตดังกลาว
การตรวจสองลิงคจะเริ่มดวยการคนหาลิงคในไฟลปจจุบัน บางสวนของไซตหรือ ทั้งหมด
แลวทําการตรวจสอบลิงคเหลานั้นวาถูกตองหรือไม
ขั้นตอนการตรวจสอบลิงคในไฟลปจจุบัน
1. ถายังไมไดบันทึกไฟลปจจุบันใหทําการบันทึกกอน
2. เลือกคําสั่ง File -> Check Page -> Check Link หลังจากที่เลือกคําสั่งแลวรายงาน
จะถูกแสดงในพาเนล Link Checker ดังรูปที่ 12-4
รูปที่ 12-4 พาเนล Link Checker
3. ถาตองการบันทึกรายงานใหคลิกที่ปุม Save Report ใน Link Checker Panel
12.3.1 การตรวจสอบลิงคในบางสวนของไซต
1. ในพาเนล Site เลือกไซตที่ตองการจากไซตปอปอัพเมนู
2. เปลี่ยนมุมมองของพาเนล Site เปน Local View แลวเลือกไฟลหรือ โฟลเดอรที่

ตองการตรวจสอบ
3. เลือกคําสั่ง File -> Check Page -> Check Links หลังจากที่เลือกคําสั่งแลวรายงาน
จะถูกแสดงในพาเนล Link Checker
4. ในพาเนล Link Checker เลื อ ก Link Report ที่ ต อ งการในป อ ปอั พ เมนู Show เพื่ อ
ดูรายงานอื่น ซึ่งรายงานที่มีใหเลือกคือ Broken Links และ External Links
5. ถาตองการบันทึกรายงานใหคลิกที่ปุม Save Report ในพาเนล Link Checker
12.3.2 การตรวจสอบลิงคทั้งหมดในไซต
1. ในพาเนล Site เลือกไซตจากปอปอัพเมนู Current Site
2. เลือกคําสั่ง Site -> Check Link Sitewide รายการจะถูกแสดงในพาเนล Link
Checker
3. ใน Link Checker Panel เลือก Link Report ที่ตองการในปอปอัพเมนู Show ซึ่งราย
งานที่มีใหเลือกคือ Broken Links, External Links และ Orphaned files
4. ถาตองการบันทึกรายงานใหคลิกที่ปุม Save Report ในพาเนล Link Checker
12.4 การแกไขลิงคที่ผิดพลาด
หลังจากที่เราตรวจสอบลิงคภายในไซตแลวพบวาเกิดความผิดพลาดขึ้น เราสามารถที่จะ
แกไขลิงคดังกลาวใหถูกตองไดโดยการแกไขในพาเนล Link Checker หรือ Property Inspector
12.4.1 การแกไขลิงคผานพาเนล Link Checker
1. ในคอลัมน Broken Links ของพาเนล Link Checker เลือกลิงคที่ผิดพลาดที่ตองการ
แกไขหลังจากที่เลือกแลวจะมีไอคอนโฟลเดอรตามหลัง ดังรูปที่ 12-5
รูปที่ 12-5 การแกไขลิงคที่ผิดพลาดโดยใชพาเนล Link Checker
2. คลิกที่ไอคอนโฟลเดอรเพื่อคนหาและ เลือกไฟลที่ถูกตองที่จะทําการลิงคดวย
3. กดปุม Tab หรือ Enter หลังจากที่กดปุมแลวถาพบวามีลิกคที่ผิดพลาดตัวอื่น อางถึง
ไฟลตัวเดียวกันจะปรากฎไดอะลอกใหเราแกไขไฟลเหลานั้นดวย ถาเราตองการแกไข
ใหกดปุม Yes ถาไมกดปุม No
12.4.2 การแกไขลิงคผาน Property Inspector

1. ในพาเนล Link Checker ดับเบิลคลิกที่ชื่อไฟลในคอลัมน File หลังจากที่ดับเบิลคลิก
แลว Dreamweaver จะเปดไฟลดังกลาวพรอมกับเลือกลิงคหรือ รูปภาพที่มีการลิงค
ผิดพลาดและ แสดงแถบสีในฟลด Link ของ Property Inspector
2. กําหนดที่อยูของไฟลที่ถูกตองใน Property Inspector โดยการคลิกที่ไอคอนโฟลเดอร
เพื่อคนหาและ เลือกไฟลหรือ พิมพดวยตัวเอง
3. บันทึกไฟลที่เปดโดยเลือกคําสั่ง File -> Save
12.5 การเชื่อมตอไปยังเว็บเซิรฟเวอรดวยโปรโตคอล 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 หลังจากที่เลือกแลวจะปรากฎ
ฟลดใหกรอกขอมูลเพิ่มเติม
8. ในฟลด What is the hostname or FTP address of your Web server ? ใหพิมพชื่อ
เว็บเซิรฟเวอรเก็บเราตองการนําเว็บไซตไปเก็บไว
9. ในฟ ล ด What floder 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 โดยมีขั้นตอนดังนี้
12.5.1 การดาวโหลดไฟลจากเว็บเซิรฟเวอร
1. เลือกไซตที่ตองการดาวโหลดไฟลจากเว็บเซิรฟเวอรจากปอปอัพเมนู Site ในพาเนล
Site
2. ในพาเนล Site คลิกที่ปุม Connect เพื่อเปดการเชื่อมตอไปยังเว็บเซิรฟเวอร
3. เลือกไฟลที่ตองการดาวโหลดในมุมมอง Site
4. คลิกที่ปุม Get ที่อยูบนแถบเครื่องมือในพาเนล Site เพื่อทําการดาวโหลดไฟลที่
เลือกไว
12.5.2 การอัพโหลดไฟลไปที่เว็บเซิรฟเวอร
1. เลือกไซตที่ตองการอัพโหลดไฟลไปที่เว็บเซิรฟเวอรจากปอปอัพเมนู Site ในพาเนล
Site
2. คลิกที่ปุม Connect เพื่อเปดการเชื่อมตอไปยังเว็บเซิรฟเวอร
3. เลือกไฟลที่ตองการอัพโหลดในมุมมอง Local
4. คลิกที่ปุม Put ที่อยูบนแถบเครื่องมือในพาเนล Site เพื่อทําการอัพโหลดไฟลที่
เลือกไว
12.6 การคนหาและ แทนที่ขอความในไฟล

ใน Dreamweaver เราสามารถที่จะคนหาขอความ ขอความที่อยูระหวางแทก HTML ขอ
ความที่เปนคุณสมบัติหรือ คาของคุณสมบัติของแทก HTML ในไฟลที่ตองการได โดยการคนหา
สามารถทําไดทั้งในไฟลที่กําลังทํางานอยู ในไฟลที่เลือกไวใน Site Panel ในไดเรกเทอรี่หรือ ใน
ไซต
ขั้นตอนการคนหาขอความและ แท็ก HTML ในไฟลมีดังนี้
1. ทําตามขั้นตอนใดขั้นหนึ่งดังตอไปนี้
• ในมุมมองออกแบบใน Document Window เลือก Edit -> Find and Replace
• ในมุ ม มองโค ด ให ค ลิ ก เมาส ปุ ม ขวาและ เลื อกคํ าสั่ ง Find and Replace จาก
Context menu จะปรากฎไดอะล็อก Find and Replace ขึ้นมาดังรูปที่ 12-6
รูปที่ 12-6 ไดอะล็อก Find and Replace
2. ในไดอะล็อก Find and Replace ในปอปอัพเมนู Find In เลือกสถานที่ที่ตองการคน

หาขอความ ซึ่งมีดังนี้
• Current Document กําหนดใหคนหาในเอกสารปจจุบัน
• Entire Local Site กําหนดใหคนหาทั้งไซต
• Selected Files in Site กําหนดใหคนหาในไฟลและ โฟลเดอรที่ถูกเลือกใน Site
Panel
• Floder กําหนดใหคนหาในโฟลเดอรที่กําหนดไว ถาเราเลือกขอนี้จะปรากฎฟลดที่
ใหกรอกชื่อโฟลเดอรหรือ คลิกที่ไอคอนโฟลเดอรเพื่อคนหาและ เลือกโฟลเดอรที่
ตองการ
3. ในปอปอัพเมนู Search เลือกลักษณะของการคนหาดังนี้
• Source Code กําหนดใหคนหาขอความในโคดภาษา HTML
• Text กํ า หนดให ค น หาข อ ความที่ ป รากฎใน Document Window ไม รวมแท ก
HTML
• Text (Advanced) กํ า หนดให ค น หาข อ ความทั้ ง ที่ อ ยู ร ะหว า งแท็ ก และ ไม อ ยู
ระหวางแทก HTML
• Specific Tag กํ าหนดให คน หาแท็ก แอตทริบิวตและ ค าแอตทริบิ วตของแท ก
HTML ที่กําหนดไว
4. ในกลุม Checkbox ของ Options เลือก Checkbox เพื่อกําหนดขอบเขตในการคนหา
ดังนี้
• The Match Case กําหนดใหคนหาขอความโดยตองตรงกันทั้งตัวใหญและ ตัว
เล็ก
• Ignore Whitespace Differences กําหนดใหคนหาขอความโดยถือวาชองวางที่
อยูระหวางขอความเปนชองวางเพียงหนึ่งชองเทานั้น
• The Use Regular Expression กํ า หนดให ขอ ความที่ ใช เป น ตั ว ค น หาถู ก แปล
ความหมายเปนตัวดําเนินการของ Regular Expression
5. ในขั้นตอนที่ 3 ถาไมไดเลือก Specific Tag จะปรากฎกลองขอความ Replace With
ดังรูปที่ 12-7 ซึ่งใชใสขอความที่เราตองการแทนที่ขอความที่เราคนหา
รูปที่ 12-7 กลองขอความ Replace With
6. แตถาเลือก Specific Tage จะปรากฎปอปอัพเมนูและ ฟลดของ Action ดังรูปที่ 12-

8 เพื่อใชในการกําหนดการทํางานเมื่อพบแท็กที่คนหาวาจะดําเนินการกับแท็กที่พบ
อยางไรบาง อยางเชน กําหนดคาแอตทริวบิวตใหมหรือ ลบแท็กดังกลาวทิ้ง เปนตน
รูปที่ 12-8 ปอปอัพเมนูและ ฟลดของ Action

Dreamwever MX

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Dreamwever MX

Uploaded by

Copyright:

Available Formats

MACROMEDIA

ผูเขียน กฤษ เกษมโอสถ krit@marianasgraphix.com

สงวนลิขสิทธิ์ตามพระราชบัญญัติลิขสิทธิ์ พ.ศ. 2537

จัดทําครั้งที่ 1 เมื่อ 1 พฤศจิกายน 2545

บริษัท มาริอานาส กราฟค จํากัด

1.2 World Wide Web (WWW)

1.4 โปรโตคอล HTTP (Hypertext Transfer Protocol)

1.5 เอกสาร HTML (Hypertext Markup Language)

รูปที่ โครงสรางเบื้องตนของเอกสาร HTML

จากโครงสรางของเอกสาร HTML ขางตนเนื้อหาตางๆ ที่เราตองการแสดงผลจะอยูในแทก

1.6 เว็บเพจ (Web Page) และ เว็บไซต (Web Site)

2.1 รูจักกับโปรแกรม Dreamweaver MX

Menu Bar Insert Bar Document Toolbar Document Window Panel

Tag Selector Property Inspector Launcher Bar

รูปที่ 2-1 หนาจอการทํางานของโปรแกรม Dreamweaver

2.2 สวนการทํางานเบื้องตนในโปรแกรม Dreamweaver

รูปที่ 2-2 Document Window

2.2.2 Launcher Bar

รูปที่ 2-3 Launcher Bar

2.2.3 Insert Bar

รูปที่ 2-4 Insert Bar

Insert Bar จะประกอบไปดวยแทป (Tab) ที่ใชแยกกลุมของปุมที่ใชแทรกอ็อบเจ็กตลงใน

รูปที่ 2-5 Property Inspector

2.2.5 Tag Selector

รูปที่ 2-6 Tag Selector

2.2.6 Site Panel

รูปที่ 2-7 Site Panel

2.2.7 Docment Toolbar

ประกอบไปดวยปุมและ ปอปอัพเมนูที่ใชกําหนดรูปแบบมุมมองของ Document Window

รูปที่ 2-8 Document Toolbar

ซึ่งการทํางานขององคประกอบตางๆ ที่อยูใน Document Toolbar มีดังนี้

12. เปนปุมที่ใชแสดงปอปอัพเมนูที่เก็บคําสั่งที่ใชปรับการแสดงผลของ Document

2.2.8 Context Menu

รูปที่ 2-8 Context Menu

รูปที่ 2-9 ชองปรับขนาดวินโดว

2.2.10 ชองแสดงขนาดของไฟลและ ระยะเวลาในการดาวโหลด

รูปที่ 2-10 ชองแสดงขนาดไฟลและ ระยะเวลาในการดาวโหลด

รูปที่ 2-11 Document Window ในมุมมองออกแบบ

2.3.2 มุมมองโคด (Code view)

รูปที่ 2-12 Document Window ในมุมมองโคด

2.3.3 มุมมองออกแบบและ โคด (Design and Code View)

รูปที่ 2-13 Document Window ในมุมมองออกแบบและ มุมมองโคด

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

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

2.5 การกําหนด Dreamweaver Site

ใช ไอคอนโฟลเดอร ในการเลื อ กไดเรกเทอรี่ภ ายในเครื่อ งคอมพิ ว เตอร ข องเรา ที่

ดวย Dreamweaver การเพิ่มเนื้อหาตางๆ ของเว็บเพจทําไดงาย ไมวาจะเปนขอความ รูป

รูปแบบของขอความ ชนิดฟอนต ขนาดฟอนต สี ตัวหนา, ตัวเอียง การจัดวาง

รูปที่ 3-1 คุณสมบัติของขอความใน Property Inspector

การกําหนดสี ขนาด ชนิดฟอนตและ การจัดขอความ สามารถทําไดโดยผานเมนู Text

2. เลือกเมนู Insert -> Special Character -> Non-Breaking Space

3.3 การเพิ่มยอหนาและ ตัวขึ้นบรรดทัดใหม

3.4 การกําหนดฟอนตและ ลักษณะของฟอนต

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

รูปที่ 3-2 ไดอะล็อก Edit Font List

3.6 รูปแบบ Paragraph

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

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

รูปที่ 3-3 พาเนล Color

3.13 การนําเขาเนื้อหาจาก Microsoft Word HTML

การลบโคด HTML ที่ถูกสรางโดย Word ออก ซี่งโคดที่ถูกลบออกดังกลาวจะเปนโคดที่ใชกําหนด

รูปที่ 3-4 ไดอะล็อก Clean Up Word HTML

4.1.2 แบบสัมพัทธ (Document Relative Path)