Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
โปรแกรม 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