ใบความรู้ Macromedia Dreamweaver 8 -...

โปรแกรม Macromedia Dreamweaver 8 เปนอกโปรแกรมหนง ทมการออกแบบ มาเพอทจะ

ใชในการจดการกบเอกสารทใชส าหรบ การสรางเวบเพจ ซงในสมยกอนหากจะม การสรางเวบเพจ

ขนแตละเวบเพจนน ตองใหผทมความรในภาษา HTML มาเขยนรหสค าสง (Code) ให แตในปจจบน

โปรแกรม Macromedia Dreamweaver 8 สามารถทจะสรางรหสค าสงใหกบผใชโดยอตโนมต ซงผใช

ไมจ าเปนตองมความรดานของภาษา HTML เนองจากโปรแกรม Macromedia Dreamweaver 8 นนจะม

ลกษณะ การท างานทคลายๆ กบโปรแกรมพมพเอกสารทเราเคยใชและรจกกนด ซงจะมเครองมอและ

แถบค าสงใหเราเลอกใชได เหมอนกบ Word Processor จงชวยใหสามารถเวบเพจดวยความสะดวก

และรวดเรว

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

หลงจากทเรามการตดตงโปรแกรมแลว เราสามารถเรยกใชงานโปรแกรมไดโดยวธการ

ดงตอไปน

1. คลกปม Start > Programs > Macromedia > Macromedia Dreamweaver 8

ใบความร

เรอง ขนตอนการเขาสโปรแกรม Macromedia Dreamweaver 8

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

แถบชอเรอง (Title Bar) แสดงชอแฟมขอมลทก าลงใชงานอย

แถบค าสง (Menu Bar) เปนสวนทเกบค าสงตาง ๆ ทใชงานในโปรแกรม Dreamweaver 8

แถบ Document Tool Bar เปนสวนทใชในการจดการกบเวบเพจ ณ ขณะนน เชนการเปลยน

มมมองในการดหนาเวบเพจ

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

ชดเครองมอ 8 ชดดวยกน

พนทออกแบบ (Document Window) เปนสวนทใชส าหรบใสเนอหาและจดองคประกอบของ

เวบเพจ โดยประกอบดวยมมมองการท างาน 3 รปแบบดวยกนคอ Design, Code และ Code

and Design

แถบสถานะ (Status Bar) เปนสวนทแสดงสถานะของการใชงานโปรแกรม ณ ขณะนน

หนาตาง Properties เปนสวนของค าสงทใชในการก าหนดคณสมบตขององคประกอบตาง ๆ ท

เราตองการเปลยนแปลงหรอตกแตง

Panel Group เปนกลมของแผงควบคม ทใชแทนค าสงและตดตอกบฐานขอมล

มมมองตาง ๆ ของ Document Windows

ในการออกแบบหนาเวบเพจดวยโปรแกรม Dreamweaver 8 เราสามารถเลอกรปแบบหรอมมมอง

ของหนาตางเวบเพจได 3 รปแบบดวยกนคอ

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

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

ออกแบบจรง

Show Design View ใชแสดงหนาจอออกแบบเปนหนาจอออกแบบจรง

การซอนและแสดงเครองมอออกแบบ

ในการออกแบบเวบเพจนน บางครงตองการใชเครองมอเพมเตมเพอใชในการออกแบบ แต

บางครงกตองการซอนเครองมอตาง ๆ ไวชวขณะเพอดหนาเวบเพจทออกแบบไวใหชดเจน การซอน

และแสดงเครองมอออกแบบในโปรแกรม Dreamweaver 8 สามารถท าไดหลายวธดวยกน ดงนคอ

วธท 1 โดยการคลกทค าสง Windows แลวคลกค าสงทตองการใชงาน

วธท 2 โดยการคลกทปมลกศรเลก ๆ หนาแถบ Panel

วธท 3 กดแปนพมพ <F4> เพอซอนหรอแสดงเครองมอทงหมด

นอกจากการแบงสดสวนหนาเวบดวยเฟรมแลว เรามารจกกบเครองมอทใชในการจดหนาเวบ

เพจอกอยางหนง ซงชวยใหเราสามารถวางโครงรางของหนาเวบไดตามตองการ

1. การสรางเลเยอร

Layer เปนเครองมอหนงใน Dreamweaver ทเหมาะในการใชจดหนาเวบเพจ เนองจากมความสะดวก

ในการเคลอนยายหรอจดหนาเวบไดตามความตองการ ทงนเพราะ Layer เปรยบเสมอนแผนใสท

สามารถน าองคประกอบตาง ๆ มาวางไวภายใน และซอนกนหลายชนได

สวนประกอบของเลเยอร

ส าหรบลากหรอดงเลเยอรไปตามบรเวณทตองการ

ส าหรบยอหรอขยายขนาดของเลเยอรซงมทงหมด 8 จด

การสรางเลเยอร

การสรางเลเยอรมวธการ ดงน

o คลกแทบ Layout เพอสรางเลเยอร

o คลกปม Draw Layer

o ลากพอยนเตอรใหเปนกรอบสเหลยมบนเวบเพจ

การพมพขอความในเลเยอร

เมอสรางเลเยอรเสรจแลว ต าแหนงเคอรเซอรจะกระพรบอยในเลเยอร สามารถพมพ

ขอความลงไปไดเหมอนกานพมพงานปกต โดยขอความจะปรากฏอยดานบนของเลเยอร

การใสรปภาพในเลเยอร

o คลกทเลเยอรทตองการจะแทรกรปภาพ

o คลกทค าสง Insert >> Image หรอ เครองมอ Image บนกลมเครองมอ Common

o จะไดหนาตาง Select Image Source เลอกรปภาพทตองการแลวคลก OK

o ภาพทเลอกจะแทรกอยในเลเยอรทนท หากภาพใหญเกนไปเลเยอรจะขยายใหเทากบ

ขนาดของภาพโดยอตโนมต

o คลกทปมแฮนเดลเพอปรบขนาดภาพและเลเยอรตามความเหมาะสม

การใสตารางในเลเยอร

ตารางทสรางในเลเยอรอาจจะเปนตารางเปลาทสรางขนมาใหม หรอคดลอกตารางท

สรางไวแลวมาใสกได ดงน

คลกทเลเยอรทจะแทรกตาราง

คลกทเครองมอ Table จะไดหนาตาง Table ขนมา

เลอกลกษณะตาราง เชน 3 แถว 3 คอลมน แลวคลกปม OK

ตารางจะแทรกในเลเยอรทนท ปรบขนาดตารางและตกแตงตาราง (ตามทไดศกษามาใน

หนวยท 5)

2. การปรบแตงรายละเอยดของเลเยอร

การปรบแตเลเยอร โดยทวไปจะใช Properties Inspector ซงเมอคลกทเลเยอรจะได

Properties หนาตาดงน

Layer ID หมายถง หมายเลขอางองเมอเรยกใช Layer นน ๆ เชน Layer1, Layer2 ซง

จะเรยงล าดบเลเยอรทสรางกอนเปนหลก

L และ T หมายถง การก าหนดต าแหนงของเลเยอร ซงยอมาจาก Left และ Top

W และ H หมายถง การก าหนดขนาดของเลเยอร ซงยอมาก

จาก Width และ Height มหนวยเปนพกเซล (Pixel)

Z-Index ใชในการเปลยนล าดบเลเยอร

Bg image ส าหรบปรบแตงสและรปภาพพนหลงเลเยอร

Vis ส าหรบก าหนดวาจะแสดงหรอซอนเลเยอร

Overflow หมายถง การตงคาเผอองคประกอบทมขนาดใหญกวาเลเยอร ซงแบง

ออกเปน

Visible ขยายเลเยอรเพอใหเหนทงหมด

Hidden จ ากดเลเยอรเทาเดม

Scroll ใหสรางสกรอลบารโดยอตโนมต

Auto ใหสรางสกรอลบารอตโนมตเมอขนาดองคประกอบใหญกวาเลเยอร

Clip ส าหรบจ ากดสวนในการแสดงผล โดยมต าแหนง L (Left), R (Right), T (Top), B

(Bottom)

การเคลอนยายเลเยอร

การยายเลเยอรดวย Properties โดยก าหนดเปนตวเลขท L (Left) และ T (Top)

การใชเมาส ใหเลอนเมาสไปตรงเสนขอบหรอปม เมาสจะเปลยนเปน คลกเมาสคาง

ไวแลวลากยายไปยงต าแหนงทตองการจงใหปลอยเมาส

การยอ / ขยายเลเยอร

คลกทเลเยอร ใช Properties ก าหนดทชอง W เพอก าหนดความกวาง และ H เพอก าหนด

ความสง โดยก าหนดเปนตวเลข Pixel

คลกทเลเยอร เลอนเมาสไปทปมแฮนเดลดานใดดานหนง เมาสจะเปลยนเปนรปลกศร 2

ทศ คลกคางไวแลวลากเมาสเพอยอหรอขยายเลเยอร

3. การใชงานพาเนลเลเยอร

พาเนลเลเยอร มไวส าหรบจดการกบเลเยอร เชน จดวางล าดบเลเยอร เปลยนชอเล

เยอร ลบเลเยอร เปนตน

การจดล าดบเลเยอร

ในกรณทสรางเลเยอรไวหลายอน เลเยอรทสรางกอนจะวางอยลางสด เลเยอรอน ๆ จะ

ถกวาง ซอน ๆ กนขนมาดานบนโดยล าดบ

การจดล าดบหรอสลบเลเยอรใหเลอกเลเยอรทตองการทพาเนล แลวพมพตวเลขคาท

ตองการลงไป โดยคาทมตวเลขนอยทสดจะอยลางสด

การซอน / แสดงเลเยอร

ในขณะออกแบบเวบเพจ ถามเลเยอรอยบนเวบเพจหลายอน อาจไมสะดวกในการ

ท างาน ผออกแบบเวบเพจสามารถซอนเลเยอรเอาไวชวคราวกอนได เมอออกแบบเวบเพจเสรจแลว

จงสงใหแสดงเลเยอรทงหมด

การซอนเลเยอรท าไดดงน

คลกทเลเยอรทตองการจะซอน

ทพาเนลเลเยอรจะมไอคอนรปดวงตา ปรากฏขนมาตรงหนาเลเยอรชอนน

คลกตรงดวงตา ถาดวงตาปด หมายถงซอนเลเยอร เลเยอรทหนาเวบเพจจะ

หายไป ถาดวงตาเปด หมายถง แสดงเลเยอร จะเหนเลเยอรนนปรากฏขนมา

การเปลยนชอเลเยอร

ดบเบลคลกทชอเลเยอรพาเนลเลเยอร

พมพชอใหมลงไปแทนทค าวา Layer หรอคลกทเลเยอรเวบเพจแลวเปลยนชอท Layer

ID ของ Properties Inspector กได

การลบเลเยอร

การลบเลเยอรทตองการใหคลกทเลเยอรนน ๆ แลวคลกปม < Delete > ถาตองการ

เรยกเลเยอรทเพงลบไปกลบคนมา ใหคลกค าสง Edit >> Undo >> Delete หรอใชแปน < Ctrl > + <

Z >

4. การสรางเลเยอรซอนกน

ในบางกรณอาจจะตองน าเลเยอรหลายอนมาซอนทบกนอยในเลเยอรแม (Parent Layer) อน

ใหญอนหนงอน เพอทจะใสขอความ ภาพประกอบ หรอตาราง

การซอนเลเยอรชวยใหเวบเพจนาสนใจมากขน ชวยประหยดเนอท สะดวกเวลาเคลอนยาย

แกไข และปรบแตงเวบเพจใหสวยงาม

การซอนเลเยอรมวธท า ดงน

วาดเลเยอรดวยเครองมอ Draw Layer โดยวาดเลเยอรแมกอน แลกดปาน < Alt

> คางไวพรอมกบลากเมาสเพอสรางเลเยอรยอยใหซอนทบกน

หรอใชพาเนลเลเยอร โดยคลกทเลเยอรยอยพรอมกบกดแปน < Ctrl > คางไว แลวลากไป

วางยงเลเยอรแม

หรอคลกเลอกเลเยอรแลวใชเมน Insert >> Layout Objects >> Layer

การก าหนดใหเลเยอรทสรางใหทหลงซอนกนอตโนมตทกครง ใหเลอกค าสง Edit >>

Preference… หรอ < Ctrl > + < U > จะไดหนาตาง Preferences คลก

ท Layers ใน Category แลวเลอกตวเลอก Nest when creates within a layer

5. การแปลงเลเยอร

การแปลงเลเยอรเปนตาราง

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

ผเขาชมทใชเบราเซอรรนต ากวาเวอรชน 4 จะไมสามารถชมหนาเวบเพจทสรางจากเลเยอรได ส าหรบ

ในกรณนมวธแกไขคอ เปลยนเลเยอรใหเปนตาราง ซงจะท าใหเบราเซอรทวไปแสดงขอมลได

คลกเมน Modify >> Convert >> Layer to Table

จะปรากฎหนาตางตงคาตาราง Convert Layer to Table

คลกปม OK

การแปลงตารางเปนเลเยอร

คลกเมน Modify >> Convert >> Table to Layer

จะปรากฏหนาตางตงคาตาง ๆ ในสวนของ Convert Tables to Layer