MACROMEDIA DREAMWEAVER MX · การกําหนด Dreamweaver Site 2-1 2-1 2-2 2-8 2-9 2-11 บทที่ 3 การเพิ่มเนื้อหาลงในเว

MACROMEDIA

DREAMWEAVER MX FUNDAMENTALS ฉบับภาษาไทย

Macromedia Dreamweaver MX : Fundamentals ฉบับภาษาไทย ผูเขียน กฤษ เกษมโอสถ [email protected] ผูชวยเขียน วีรพล สุเภากิจ [email protected] บรรณาธิการ วีรพล สุเภากิจ [email protected] รูปแบบการออกแบบ วีรพล สุเภากิจ [email protected] สงวนลิขสิทธ์ิตามพระราชบัญญัติลิขสิทธ์ิ พ.ศ. 2537 ใชในการศึกษาหาความรูโดยสวนตัว หามจําหนายจายแจกเพื่อการคา หามลอกเลียนไมวาสวนใดสวนหนึ่งของเอกสารนี้ ไมวาในรูปแบบใดๆ เวนแตไดรับอนุญาตเปนลายลักษณอักษรจากผูจัดทําเทานั้น จัดทําครั้งที่ 1 เมื่อ 1 พฤศจิกายน 2545 ผูจัดทํา

บริษัท มาริอานาส กราฟค จํากัด 9/2 ชั้น6 อาคารวรสิน ถนนวิภาวดี-รังสิต ลาดยาว จตุจักร กทม 10900 โทร. 0 2690 0192-3 http://www.marianasgraphix.com [email protected]

ชื่อ,โลโก, สัญลักษณ และ โปรแกรม Dreamweaver MX, Fireworks MX, Flash MX เปนลิขสิทธ์ิของบริษัท Macromedia, Inc. ประเทศสหรัฐอเมริกา http://www.macromedia.com

1

ContentDreamweaver MX : Fundamentals

www.marianasgraphix.com

CONTENT

บทที่ 1 อินเตอรเน็ตและ เวิรล ไวด เว็บ แนะนําอินเตอรเน็ต World Wide Web (WWW) รูปแบบของชื่อที่อยูของแหลงขอมูล โปรโตคอล HTTP (Hypertext Transfer Protocol) เอกสาร HTML (Hypertext Markup Language) เว็บเพจ (Web Page) และ เว็บไซต (Web Site)

1-1 1-1 1-1 1-1 1-2 1-2 1-3

บทที่ 2 รูจักกับโปรแกรม Dreamweaver MX การติดตั้งระบบภาษาไทย สวนการทํางานเบื้องตนในโปรแกรม Dreamweaver มุมมองของ Document Window การวางแผนและ ออกแบบเว็บไซต การกําหนด Dreamweaver Site

2-1 2-1 2-2 2-8 2-9 2-11

บทที่ 3 การเพิ่มเน้ือหาลงในเว็บไซต การเพิ่มขอความลงในเว็บเพจ การเพิ่มชองวางระหวางตัวอักษร การเพิ่มยอหนาและ ตัวข้ึนบรรดทัดใหม การกําหนดฟอนตและ ลักษณะของฟอนต การแกไขและ เพ่ิมรายการของฟอนต รูปแบบ Paragraph การจัดวางขอความ การเยื้องยอหนา (Indent) การเปลี่ยนสีขอความ การสรางรายการแบบมีหัวขอ การเพิ่มอักขระพิเศษ การเพิ่มเสนแบงเนื้อหา การนําเขาเนื้อหาจาก Microsoft Word HTML

3-1 3-1 3-2 3-2 3-2 3-3 3-4 3-4 3-5 3-5 3-5 3-6 3-6 3-6

บทที่ 4 การเชื่อมโยงเอกสาร การอางถึงที่อยูของไฟลในการเชื่อมโยง การสรางการเชื่อมโยงหรือ ลิงค

4-1 4-1 4-2

บทที่ 5 การทํางานกับรูปภาพกราฟฟก ภาพกราฟฟกบนเว็บไซต การวางรูปภาพลงในหนาเอกสาร การปรับคาของรูปภาพ การเรียกโปรแกรม Fireworks MX มาแกไขรูปภาพใน Dreamweaver MX การทํา Image Maps การใส Flash ลงในเอกสาร

5-1 5-1 5-1 5-2 5-3 5-7 5-8

2



บทที่ 6 การออกแบบเอกสารโดยใชตาราง ตาราง (Table) การจัดวางเนื้อหาของเว็บเพจในมุมมองเลยเอาท (Layout View) การใช Tracing Image ในการออกแบบเว็บเพจ

6-1 6-1 6-8 6-16

บทที่ 7 การใชงาน Templates และ Libraries เก่ียวกับ Template การกําหนดพื้นที่แกไขไดใน Template การสราง Template ไลบรารี (Libraries)

7-1 7-1 7-1 7-2 7-6

บทที่ 8 การสรางแบบฟอรม (Form) เก่ียวกับแบบฟอรม (Form) การสรางแบบฟอรม การปรับแตงคุณสมบัติของแบบฟอรม การสราง Text Fileds การสราง File Field การสราง Hidden Field การสราง Checkbox การสรางปุม Radio การสราง Scrolling List การสรางปอปอัพเมนู (Popup menu) การสรางปุม (Button) การสรางปุมที่เปนภาพกราฟฟก (Image Field)

8-1 8-1 8-2 8-3 8-4 8-6 8-6 8-7 8-8 8-9 8-11 8-11 8-12

บทที่ 9 การสรางเฟรม (Frames) เฟรม (Frame) และ เฟรมเซต (Frameset) การสรางเฟรมเซต การเลือกเฟรมเซตและ เฟรม การบันทึกเฟรมและ การบันทึกเฟรมเซต การปรับแตงคุณสมบัติของเฟรม การปรับแตงคุณสมบัติของเฟรมเซต การใชลิงคเปลี่ยนเนื้อหาภายในเฟรม

9-1 9-1 9-1 9-5 9-8 9-9 9-9 9-10

บทที่ 10 Cascading Style Sheets (CSS) รูจักกับ Cascading Style Sheets (CSS) การใช CSS Style Panel การสราง CSS Style ใหม การใช Class Style การสรางและ เชื่อมโยงไปยัง CSS Style Sheet การแกไข CSS Style

10-1 10-1 10-2 10-3 10-5 10-5 10-6

3



บทที่ 11 การใส Interactive Page Elements การใช JavaScript Behavior การใช Behavior Panel การนํา Behavior ไปใชกับวัตถุในเว็บเพจ การสราง Rollover image การสราง Disjointed Rollovers Jump Menu การใสเลเยอร (Layer) สําหรับงาน Interactive

11-1 11-1 11-1 11-2 11-3 11-4 11-6 11-8

บทที่ 12 การทดสอบ อัพโหลดและ ดูแลรักษาเว็บไซต การทดสอบการแสดงผลเว็บเพจในเว็บบราวเซอร การเปดเว็บเพจในเว็บบราวเซอรผานทาง Dreamweaver การตรวจสอบลิงคภายในเว็บเพจหรือ ไซต การแกไขลิงคที่ผิดพลาด การเชื่อมตอไปยังเว็บเซิรฟเวอรดวยโปรโตคอล FTP ใน Dreamweaver การคนหาและ แทนที่ขอความในไฟล

12-1 12-1 12-2 12-3 12-4 12-5 12-7

1 - 1

บทที่ 1 : อินเตอรเน็ตและ เวิรล ไวด เว็บDreamweaver MX : Fundamentals


บทที่ 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 ของขอมูลในเครื่องคอมพิวเตอรที่เปนแหลงขอมูล

1 - 2



จากตั วอยางตอไปนี้ เปน 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

<html> <head><title>Marianasgraphix</title></head> <body> <b>Hello World</b> </body> </html>

1 - 3



จากโครงสรางของเอกสาร HTML ขางตนเนื้อหาตางๆ ที่เราตองการแสดงผลจะอยูในแทก <body></body> และ แตละเนื้อหาจะถูกหุมดวยแทกที่ใชกําหนดการแสดงผลอีกที ดังตัวอยางในรูปที่ เราจะเห็นไดวาขอความ Hello World จะถูกหุมดวยแทก <b></b> ซึ่งเปนการกําหนดใหแสดงขอความ Hello World เปนตัวหนาเมื่อเปดในเว็บ 1.6 เว็บเพจ (Web Page) และ เว็บไซต (Web Site) ใน WWW ขอมูลตางๆ ที่เราตองการเขาถึงสวนใหญจะถูกแสดงอยูในรูปของ เวบ็เพจ (Web Page) ซึ่งเว็บเพจ จะเกิดจากการประมวลผลเอกสาร HTML แลวแสดงผลเอกสาร HTML ดังกลาวในเว็บบราวเซอร เมื่อเรานํากลุมของเว็บเพจที่สัมพันธกันมารวมและ เชื่อมโยงเขาไวดวยกัน เราจะเรียกกลุมของเว็บเพจดังกลาววา เว็บไซต (Web Site) ในแตละเว็บไซตนอกจากจะประกอบไปดวยกลุมของเว็บเพจแลวก็อาจจะมีไฟลตางๆ ที่เว็บเพจทําการเชื่อมโยงเพื่อนํามาแสดงผลบนเว็บเพจรวมอยูดวยอยางเชน ไฟลรูปภาพ ภาพเคลื่อนไหว เปนตน

2 - 1

บทที่ 2 : รูจักกับโปรแกรม Dreamweaver MXDreamweaver MX : Fundamentals


บทที่ 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 ใหใหญข้ึน

2 - 2



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 - 3



รูปที่ 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 - 4



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



รูปที่ 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

2 - 6



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

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

1. เปนปุมที่ใชสลับมุมมองของ Document Window จากมุมมองอ่ืนๆ มาเปนมุมมองโคด

2. เปนปุมที่ใชสลับมุมมองของ Document Window จากมุมมองอ่ืนๆ มาเปนมุมมองโคดและ มุมมองออกแบบ

3. เปนปุมที่ใชสลับมุมมองของ Document Window จากมุมมองอ่ืนๆ มาเปนมุมมองออกแบบ

4. เปนปุมที่ใชทดสอบการทํางานของเซิรฟเวอรสคริปตที่อยูในเว็บเพจบนเว็บเซิรฟเวอร

5. เปนปุมที่ใชแสดงเนื้อหาในเว็บเพจที่ถูกดึงขึ้นมาจากฐานขอมูลดวยเซิรฟเวอรสคริปต

6. เปนฟลดที่ใหกรอกชื่อของเว็บเพจ ซึ่งจะถูกแสดงใน Title Bar ของเว็บบราวเซอร

7. เปนปุมที่ใชเปดไดอะล็อก Design Note ที่ใชเก็บขอมูลของเว็บเพจที่เราสรางข้ึน เชน ชื่อไฟล ที่อยูของไฟล และ รุนของไฟล เปนตน

8. เปนปุมที่ใชเปดปอปอัพเมนูเพื่อเลือกเว็บบราวเซอรที่จะเปดไฟลที่เราทํางานอยูมาแสดงผล

9. เปนปุมที่ใชปรับการแสดงผลของเว็บเพจใหมหลังจากที่เราแกไขโคด HTML ในมุมมองโคดของ Document Window แลว

10. เปนปุมที่ใชเปดพาเนล Referance 11. เปนปุมที่ใชแสดงปอปอัพเมนูที่เก็บคําสั่งที่ใชทดสองการทํางานของจาวาสริปต

ที่อยูในเว็บเพจ

2 - 7



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 - 8



รูปที่ 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 - 9



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 - 10



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

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

2 - 11



เมื่อใดก็ตามที่เราตองการสรางเว็บเพจที่มีการจัดวางองคประกอบเหมือนกับเว็บเพจเดิมที่มีอยู เราก็ใชเทมปเพลตที่เราสรางไวในการสรางเว็บเพจใหมและ แกไขบางสวนที่ตองการ ซึ่งการใชเทมปเพลตจะชวยใหเราสรางเว็บเพจไดงายขึ้นและ เมื่อใดที่มีการแกไขเทมปเพลต เว็บเพจทั้งหมดที่ถูกสรางจากเทมปเพลตดังกลาวก็จะเปลี่ยนแปลงดวย ทําใหเราไมตองแกไขเว็บเพจทุกหนาๆ ที่ใชเทมปเพลตดังกลาวดวยตัวเอง ซึ่งจะทําใหเวลาที่ใชในการพัฒนาเว็บเพจนอยลง 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? และ กรอกที่อยูของไดเรกเทอรี่หรือ

2 - 12



ใชไอคอนโฟลเดอรในการเลือกไดเรกเทอรี่ภายในเครื่องคอมพิวเตอรของเรา ที่ตองการใหเปนที่ เก็บเว็บไซตของเราในฟลด Where on your computer do you want to store your files? แลวคลิกที่ปุม Next

6. หลังจากที่คลิกปุม Next แลวจะปรากฎหนาจอของขั้นตอน Sharing Files ในปอปอัพเมนูใหเลือก None แลวคลิกที่ปุม Next

7. จะปรากฎหนาจอ Summary ซึ่งจะแสดงรายการสรุปขอมูลของไซตที่เราสรางขึ้นใหคลิกปุม Done เพื่อทําการจบสรางไซต

8. Dreamweaver จะเปดพาเนล Site และ แสดงไซตที่เราสรางขึ้นในพาเนล

3 - 1 www.marianasgraphix.com

บทที่ 3 : การเพิ่มเน้ือหาลงในเว็บไซทDreamweaver MX : Fundamentals

บทที่ 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

4 - 1

บทที่ 4 : การเชื่อมโยงเอกสารDreamweaver MX : Fundamentals


บทที่ 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. ในกรณีที่ไฟลที่ถูกเชื่อมโยงอยูไดเรกเทอรี่ยอยของไดเรกเทอรี่ที่ไฟลที่ทําการเชื่อมโยงอยู ใหใชชื่อไดเรกเทอรี่ยอยตามดวยเครื่องหมาย “/” และชื่อไฟล

4 - 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

4 - 3



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 - 4



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) ที่กําหนดไวในอีเมลลิงค ซึ่งการแทรกอีเมลลิงคในเอกสารทําไดดังนี้

4 - 5



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


บทที่ 5 : การทํางานกับรูปภาพกราฟฟกDreamweaver MX : Fundamentals

บทที่ 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 2. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้

• ใน 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 เทานั้น

6 - 1

บทที่ 6 : การออกแบบเอกสารโดยใชตารางDreamweaver MX : Fundamentals


บทที่ 6 การออกแบบเอกสารโดยใชตาราง

6.1 ตาราง (Table)

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

รูปที่ 6-1 สวนประกอบของตาราง

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

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

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

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

6 - 2



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 จะเปนการยายไปเซลกอนหนาของตาราง

6 - 3



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 กําหนดลักษณะของขอความในแถวแรกสุดของตารางวาเปนตวั

หนา ตัวเอียงหรือ ทั้งตัวหนาและ ตัวเอียง

6 - 4



• Border เปนความหนาของขอบตาราง 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 - 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

6 - 6



3. แกไขคุณสมบัติตางๆ ของตารางที่ตองการใน Property Inspector ซึ่งคุณสมบัติที่แกไขไดมีดังนี้

• Table Id เปนชื่อของตาราง • Row เปนจํานวนแถวของตาราง • Column เปนจํานวนคอลัมนของตาราง • W เปนความกวางของตารางซึ่งเราสามารถกําหนดคาเปนเปอรเซ็นตหรือ พิกเซลได • H เปนความสูงของตารางซึ่งเราสามารถกําหนดคาเปนเปอรเซ็นตหรือ พิกเซลได • CellPade เปนความกวางของชองวางระหวางเนื้อหาภายในเซลกับดานแตละดาน

ของเซลในตาราง • CellSpace เปนความกวางของชองวางระหวางเซลแตละเซลในตาราง • Align เปนการจัดวางตารางในเอกสารซึ่งการจัดวางที่กําหนดไดคือ ชิดซาย ชิดขวา

และ ตรงกลาง • Border เปนความหนาของขอบตาราง • Bg Color เปนสีพื้นหลังของตาราง • Brdr เปนสีของขอบตาราง • Bg Image เปนรูปภาพที่ใชเปนพื้นหลังของตาราง

6.1.6 การเปลี่ยนความกวาง ความสูงของแถวและ คอลัมน

เราสามารถเปลี่ยนความกวาง ความสูงของแถวและ คอลัมนไดโดยทําผาน Property Inspector หรือ คลิกลากที่กรอบของแถวหรือ คอลัมนที่ตองการ โดยขั้นตอนการเปลี่ยนขนาด แถวและ คอลัมนมีดังนี้ 6.1.6.1 การเปลี่ยนขนาดแถวหรือ คอลัมนผานทาง Document Window

1. เมื่อตองการเปลี่ยนความกวางของคอลัมน ใหเลือกคอลัมนที่ตองการแลวคลิกลากกรอบทางดานขวาของคอลัมน ดังรูปที่ 6-8

6 - 7



รูปที่ 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. เลือกตารางที่ตองการยกเลิกความกวางและ ความสูงของเซลทั้งหมด 2. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้

• เมื่ อตองการยกเลิกความกวางให เลือกเมนู Modify -> Table -> Clear Cell Widths

• เมื่อตองการยกเลิกความสูงใหเลือกเมนู Modify -> Table -> Clear Cell Heights 6.1.7 การเพิ่มแถวและ คอลัมนในตาราง การเพิ่มแถวและ คอลัมนในตารางมีข้ันตอนตางๆ ดังตอไปนี้

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

6 - 8



• เมื่อตองการลบแถวใหเลือกเมนู 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)

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

6 - 9



เพื่ อใหการนําตารางมาใชในการจัดวางเนื้ อหาตางๆ ในเอกสารทําได งายขึ้น ใน 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 หลังจากที่คลิกเมาสพอยเตอรจะเปลี่ยนเปนเครื่องหมาย +

6 - 10



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 - 11



รูปที่ 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

6 - 12



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 ได ซึ่งมีข้ันตอนดังนี้

6 - 13



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 2. เปด Property Inspector โดยเลือกคําสั่ง Window -> Properties

6 - 14



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 - 15



ภาพที่ใชแทนพื้นที่วางในคอลัมนที่มีความกวางคงที่เพื่อใหรับประกันไดวาคอลัมนดังกลาวจะเปนไปตามที่ไดกําหนดได 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 - 16



รูปที่ 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 - 17



รูปที่ 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 - 18



6. ถาตองการจัดวาง Tracing Image ใหสัมพันธกับวัตถุที่อยูใน Document Window ให เลือกวัตถุใน Document Window ที่ใชอางอิงแลวเลือกคําสั่ง View -> Tracing Image -> Align With Selection

รูปที่ 6-20 การใชงาน Tracing Image โดยกําหนดในไดอะล็อก Page Properties


บทที่ 7 : การใชงาน Templates และ LibrariesDreamweaver MX : Fundamentals

บทที่ 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. จะปรากฎไดอะล็อกใหเลือกวาจะแกไขเอกสารที่ใชไลบรารีไอเท็มดังกลาวดวยหรือไม

8 - 1

บทที่ 8 : การสรางแบบฟอรม (Form)Dreamweaver MX : Fundamentals


บทที่ 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

8 - 2



ฟอรมออปเจ็กที่ใชใน 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

8 - 3



3. แบบฟอรมที่ถูกเพิ่มในเอกสารจะถูกแสดงดวยสี่เหลี่ยมที่มีเสนรอบรูปเปนเสนประสีแดง ดังรูปที่ 8-2

รูปที่ 8-2 เสนประสีแดงที่ใชแสดงขอบเขตของแบบฟอรม 8.3 การปรับแตงคุณสมบัติของแบบฟอรม

1. เลือกฟอรมที่ตองการใน Document Window 2. เปด Property Inspector โดยเลือกคําสั่ง Window -> Properties 3. ปรับแตงคุณสมบัติของแบบฟอรมตามตองการ โดยคุณสมบัติที่ปรับแตงไดมีดังนี้

• Form Name เปนสวนที่ใชกําหนดชื่อของแบบฟอรม • Action เปนสวนที่ใชกําหนดชื่อของไฟลที่ใชประมวลผลขอมูลที่อยูในแบบฟอรม

เมื่อกดปุมซับมิท • Method เปนสวนที่ใชกําหนดวิธีการสงขอมูลจากแบบฟอรมไปยังเว็บเซิรฟเวอร

ซี่งมี 3 วิธีดวยกัน - POST เปนการสงขอมูลไปยังเว็บเซิรฟเวอรโดยการฝงขอมูลที่ถูกกรอกลงใน

แบบฟอรมไปกับ HTTP Request ดวย - GET เปนการสงขอมูลไปยังเว็บเซิรฟเวอรโดยการนําขอมูลที่ถูกกรอกลงใน

แบบฟอรมตอทาย URL ของเซิรฟเวอรสคริปตหรือ แอพพลิเคชั่นที่ ใชประมวลผลขอมูลในฟอรมดังกลาว

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

• Enctyp เปนสวนที่ ใชกําหนดประเภทของการเขารหัสขอมูลที่สงไปยังเว็บเซิรฟเวอรเพื่อการประมวลผล

• Target เปนสวนที่ใชกําหนดหนาตางที่ใชแสดงผลขอมูลที่ถูกสงกลับโดยเว็บเซิรฟเวอรหลังจากที่ประมวลผลขอมูลในแบบฟอรมที่สงมาเรียบรอยแลว ซึ่งจะใชชื่อของเฟรมหรือ คามาตราฐานที่ HTML มีใหในการกําหนดหนาตางที่ใชแสดงผลก็ได โดยคามาตราฐานตางๆ มีดังนี้

8 - 4



- _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

8 - 5



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

8 - 6



• 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 จะถูกสงไปยังเว็บเซิรฟเวอรเมื่อฟอรมถูกสับมิท

8 - 7



ข้ันตอนการสราง 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



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

8 - 9



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 ไดมากกวาหนึ่งหัว

ขอ

8 - 10



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 - 11



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 - 12



รูปที่ 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

8 - 13



3. ใน Property Inspector ของ Image Field ในฟลด ImageField พิมพ Submit เมื่อตองการใหปุมทําการสับมิทฟอรมเมื่อถูกคลิก แตถาตองการใหปุมทํางานอยางอื่นก็พิมพชื่อที่ตองการ

4. เลือกรูปภาพที่ตองการใชเปนปุมโดยคลิกที่ไอคอนโฟลเดอรตรงฟลด Src แลวเลือกไฟลรูปภาพที่ตองการ

5. ในฟลด Alt พิมพขอความที่ตองการแสดงแทนรูปภาพในกรณีที่เว็บบราวเซอรที่เปดเว็บเพจไมสามารถแสดงผลรูปภาพได


บทที่ 9 : การสรางเฟรม (Frames)Dreamweaver MX : Fundamentals

บทที่ 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 2. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้

• เมื่อตองการบันทึกเฟรมเซตลงไฟลเดิมเลือกคําสั่ง 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

2. เปด Property Inspector โดยเลือกคําสั่ง Window -> Properties 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

2. เปด Property Inspector โดยเลือกคําสั่ง Window -> Properties 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

10 - 1

บทที่ 10 : Cascading Style Sheets (CSS)Dreamweaver MX : Fundamentals


บทที่ 10 Cascading Style Sheets (CSS)

10.1 รูจักกับ Cascading Style Sheets (CSS)

CSS เปนกลุมของรูปแบบการแสดงผลที่เราไดสรางไวเพื่อใชกําหนดการแสดงผลของเนื้อหาในเว็บเพจ การนํา CSS เขามากําหนดการแสดงผลจะชวยใหการกําหนดการแสดงผลของเนื้อหาที่อยูในเว็บเพจทําไดงายและ ถูกตองมากขึ้น นอกจากนี้ CSS ยังสามารถควบคุมการแสดงผลบางอยางที่ HTML ไมสามารถควบคุมไดดวย อยางเชน ขนาดของตัวอักษรบนเว็บเพจใน CSS จะกําหนดขนาดเปนพิกเซล ซึ่งจะทําใหการแสดงผลของตัวอักษรในทุกๆ เว็บเบราเซอรเหมือนกัน หรือ ตําแหนงของเลเยอรซึ่งดวย CSS เราสามารถที่จะกําหนดตําแหนงการแสดงผลของมันได เปนตน

CSS จะประกอบดวย 2 สวนดวยกันคือ Selector และ Declaration ดังรูปที่ 10-1 รูปที่ 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 เดิมที่มีอยูแลว

.FormStyle { font-family:MS Sans Serif;font-size:12px} Selector Declaration

10 - 2



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 ใหม

10 - 3



3. ปุม Edit Style Sheet ใชเปดไดอะล็อก CSS Style Definition ซึ่งใชในการแกไข Style ที่มีอยูในเอกสารที่เราทํางานอยูหรือ เอกสารที่เชื่อมโยงจากภายนอก

4. ปุม Delete CSS Style ใชลบ CSS Style ที่อยูใน Panel และ ขอความหรอื วตัถทุี่ใช Style ดังกลาว

10.3 การสราง CSS Style ใหม 1. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้

• เปด 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 ในฟลด

10 - 4



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 - 5



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 มีดังนี้

10 - 6



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

เพื่อจบการแกไข


บทที่ 11 : การใส Interactive Page ElementsDreamweaver MX : Fundamentals

บทที่ 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 2. ทําตามขั้นตอนใดขั้นตอนหนึ่งตอไปนี้

• ใน 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

12 - 1

บทที่ 12 : การทดสอบ อัพโหลด และ ดูแลรักษาเว็บไซทDreamweaver MX : Fundamentals


บทที่ 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



รูปที่ 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 นั้น เราไมจําเปนตองบันทึกไฟลดังกลาวกอนก็สามารถเปดได โดยเว็บเพจที่แสดงในเว็บบราวเซอรสามารถทํางานไดเหมือนกับเว็บเพจที่มีการบันทึกแลว

12 - 3



การเปดเว็บเพจในเว็บบราวเซอรผานทาง 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 เลือกไซตที่ตองการจากไซตปอปอัพเมนู

12 - 4



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

12 - 5



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 หลังจากที่เลือกแลวจะปรากฎฟลดใหกรอกขอมูลเพิ่มเติม

12 - 6



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 - 7



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

12 - 8



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 - 9



รูปที่ 12-7 กลองขอความ Replace With

6. แตถาเลือก Specific Tage จะปรากฎปอปอัพเมนูและ ฟลดของ Action ดังรูปที่ 12-8 เพื่อใชในการกําหนดการทํางานเมื่อพบแท็กที่คนหาวาจะดําเนินการกับแท็กที่พบอยางไรบาง อยางเชน กําหนดคาแอตทริวบิวตใหมหรือ ลบแท็กดังกลาวทิ้ง เปนตน

รูปที่ 12-8 ปอปอัพเมนูและ ฟลดของ Action

Documents

MACROMEDIA DREAMWEAVER MX · การกําหนด Dreamweaver Site 2-1 2-1 2-2 2-8 2-9 2-11 บทที่ 3 การเพิ่มเนื้อหาลงในเว