หนวยการเรยนท 6 การออกแบบดวยเทคนค Layout, Layer

สาระการเรยนร ในการออกแบบเวบ สงหน งทสาคญในการออกแบบเวบเพจ คอการจดวางเนอหาใหเปนระเบยบ ทาใหผทเขามาชมเวบสามารถอานไดงายและดไม สบายตา จดการแบงเนอหาออกเปนสวน ๆ แยกเน อหาใหเปนหมวดหม การออกแบบหนาเวบเพจ ตองมการวางแผนการออกแบบ ใหงานออกมา ไดมาตรฐาน คอการออกแบบใน Storyboard เมอลงมอปฏบตจรงดวยโปรแกรมโดยพนฐานจะใชตารา งเปนเครองมอกาหนดกรอบเนอหา ในโปรแกรม Dreamweaver มเครองมอเลเอาท และเครองมอเลเยอร ทใชสรางตารางพนท ไดดวยการวาดใสขอมล ไดอยางรวดเรว กวาการเรยกใชตารางธรรมดา หนวย การเรยนนจะนาเทคนคกา รรางหนาเวบเพจดวยเครองมอ Layout และเครองมอ Layer ของโปรแกรม Dreamweaver รวมทงจะ นาเทคนคการเลเอาทดวยโปรแกรม Photoshop ซงกาลงเปนทนยม ใชสรางหนาเวบเพจ และไดเพมเ ทคนคการสรางความนาสนใจดวย Show-Hide Layers ซงเปน Behavior ทใชเลเยอรมาสรางความ-นาสนใจแกเวบเพจ เปนการเนนเทคนคการออกแบบสรางหนาเวบเพจภาพอยางมประสทธภาพมากขน ผงความคด

การออกแบบเวบดวยเทคนค Layout, Layer

2. การใชเทคนค Layout

3. การใชเทคนค Layer

3.1 สรางหนาเวบดวย Layer 3.2 เทคนคShow-Hide Layer

2.1 เทคนค Layout ดวย Dreamweaver 2.2 เทคนค Layout ดวย Photoshop

1. ความรเกยวกบ Layout Layer

192

จดประสงคการเรยนร 1. บอกลกษณะการทางานของเลเอาท และเลเยอรได 2. บอกขนตอนการใชเครองมอเลเอาทสรางเวบได 3. ออกแบบหนาเวบดวยเครองมอเลเอาทของ Dream weaver ได 4. สามารถใชโปรแกรม Photoshop เลเอาทออกแบบหนาเวบได 5. บอกขนตอนการใชเครองมอเลเยอรของ Dreamweaver ได 6. สามารถใชเครองมอเลเยอรของ Dreamweaver ออกแบบหนาเวบได 7. สามารถใชเลเยอรรวมกบเครองมอ Behavior สรางเทคนค Show-Hide Layer ได

193

การออกแบบเวบดวยเทคนค Layout, Layer

การนาเสนอเนอหา ขอมล ตาง ๆ บนเวบเพจ สงทยากคอการจดระเบยบเนอหา ใหอยในตาแหนงทตองการ ตามแบบทรางไวใน Story board ซงเราสามารถใชตารางมาเปนเครองมอกาหนดตาแหนงเนอหาไดเปนอยางด โปรแกรม Dreamweaver มเครองมอสรางตารางใหเรวขน เหมอนการวาดภาพ คอตองการสรางตารางตรงจดใดกสามารถ Drag เมาสลากเหมอนการวาดรป เครองมอดงกลาวม 2 ชนด คอ เครองมอ Layout และ เครองมอ Layer เพอใหนกเรยนเขาใจและสามารถใชเครองมอ Layout และ เครองมอ Layer ใหศกษาเนอหาตามลาดบดงน

1. ความรเกยวกบเครองมอ Layout, Layer

เลเอาท (Layout) เปนเครองมอสาหรบจดวางเนอห า แบงสดสวนหนาเวบ ท โปรแกรม Dreamweaver ไดเตรยมไวชวยให สามารถออกแบบเวบไดงายและสะดวกยงขน เราสามารถออกแบ บหนาเวบไดโดยการแดรกเมาสวาดรปรางของตาราง ตามกรอบเนอหาของสวนตาง ๆ ในหนาเวบตามแผน ทคดตามแบบราง Storyboard เมอลากเลเอาทเสรจ พนททไดกคอบลอกของตารางนนเอง เลเยอร (Layer) คอพนททางานทวาดขนสาหรบใสเนอหาเชนเดยวกบเลเอาท แตเลเยอรเปรยบ เหมอนชนกระจกใสทสามารถยกไปวางตรงไหนกได วางซอนกน ปรบขนาดใหมได ทาใหเมอใสเนอหาด มเทคนคมากขน สามารถ สรางความนาสนใจไดด เมอวางตาแหนงไดกสามารถแปลงเปนตารางได เปนเครองมอทโปรแกรม Dreamweaver เตรยมมาใหทางานไดสะดวกมากขน

194

2. การใชเทคนคเลเอาท (Layout) ออกแบบเวบ การใชเทคนคเลเอาทดวยโปรแกรมสรางเวบ ทนกออกแบบเวบใชกนมากม 2 โปรแกรม คอ ดวยเครองมอของโปรแกรมสรางแบบ WYSIWYG เชน Dreamweaver ทเรากาลงใชงานอย และ ดวยโปรแกรมวาด ตกแตงภาพกราฟก เชน Photoshop ซงใหรปแบบทสวยงามมากกวา Dreamweaver ดงตวอยางทไดนามาเสนอ ดงน

1. เทคนค Layout ดวยโปรแกรม Dreamweaver การออกแบบดวยเลเอาท อาศยเครองมอ 2 ชนด คอ เลเอาทเทเบล(Layout Table) สาหรบสรางตาราง และ เลเอาทเซลล (Layout Cell) สาหรบวาดเซลลลงในตารางเพอใสเนอหา ซงเราสามารถปรบ ขนาด เคลอนยายตาแหนงตารางและเซ ลลไดกอนใสเนอหา ขนตอนการใชงานทาไดดงน รปท 6.1, 6.2 และ 6.3 ดงน รปท 6.2

1. เลอกคาสง (Insert bar) → Layout

2. เลอกแทบคาสง → Layout

3. เลอกคาสง → Layout Table → วาดเลเอาทเทเบลลงในพนทสามารถวาดซอนกนได ใน ตวอยาง จะวาดเลเอาทเทเบลคลมพนทหนาเวบเพจทงหมดกอน แลววาดเลเอาทเทเบลยอยซอนในพนท เลเอาทใหญอก 3 เลเอาทเทเบล เพอเตรยมพนท สวนหว สวนเมน และสวนเนอหา จะสงเกตเหนมปาย สเขยวอยมมบนดานซายของทกเลเอาทเทเบล ปายสเขยวนเรา สามารถคลกเมาสคาง(Drag mouse) ลากเพอยายตาแหนงเลเอาทเทเบลได การปรบขนาดเลเ อาทเทเบลทาไดโดยคลกในพนท เสนขอบสเขยวของแตละ เลเอาทเทเบล

195

รปท 6.1 แสดงการใชเครองมอวาดเลเอาทเทเบล

รปท 6.2 แสดงการปรบขนาดเลเอาทเทเบล

รปท 6.2 3.1 จะเกดจดทเสนสเขยวดานละ 3 จด แลวสามารถคลกทจดลากปรบขนาดไดตามตองการ หรอสามารถปรบขนาดท Properties ดานลาง 3.2 กาหนด Width = 152 pixels Height = 193 pixels และเลอกกาหนดคาแบบ Fixed หมายถง ไมใหมการปรบขนาดเมอแสดงผล บนเวบบราวเซอร กรณกาหนดแบบ Auto stretch ขนาดความกวางของเวบเพจ จะปรบเตมหนาตาง ของบราวเซอรโดยอตโนมต ซงมผลใหเนอหาทจดไวปรบตาม ไปดวย

196

รปท 6.3 4. Draw Layout Cell เมอวาดเลเอาทเทเบลแลว จะตองวาดเลเอาทเซลลลงไป เพอใชเปนพนทใสเนอหาตาง ๆ กคอพนทของแทก TD นนเอง (< TD >…< TD >) จะสงเกตเหนวา พนทเลเอาทเทเบล ม สเทา ไมสามารถพมพขอความ ได สวนพนทเลเอาทเซลล จะม สขาว เสนขอบสนาเงน สามารถพมพขอความได ปรบขนาดไดโดยคลกทเสนขอบสนาเง น เมอเกดจดแสดงขนกปรบเชนเดยวกบ เลเอาทเทเบลทกอยาง

รปท 6.3 การวาดและปรบขนาดเลเอาทเซลล

5. ตาแหนงปายของเลเอาทเทเบลมสเขยวสามารถ Drag ลากทปายเพอยายตาแหนง เลเอาทเทเบลได

6. แสดงตาแหนงเลเอาทเซลลทวาดลงบนเลเอ าทเทเบล

มมมอง การทางานใน Layout การทางานดวยเครองมอเลเอาท ของโปรแกรม Dreamweaver มมมมอง (Mode) การทางาน ทผออกแบบสามารถสลบไปมาเพอการจดการ ใสขอมลตาง ๆ ลงในเวบ มทงห มด 3 โหมด ดงรปท 6.4

รปท 6.4 แสดงมมมอง Mode การทางานดวยเครองมอ

1. Layout Mode เปนกลมเครองมอ วาดแบบตาราง (เลเอาทเทเบล) และวาดเซลล (เลเอาทเซลล) สามารปรบแตงขนาดตามตองการ ดวยการคลกเมาสลาก เหมอนการวาดรป

197

2. Expanded Tables Mode เปนมมมองภาพทขยายเสนตารางและเสนขอบเซลลใหหนา ชดเจน รวมทงขยายชองตาราง ชองไฟสวน ทแคบปรบแตงยากใหสามารถคลกเมาสปรบขยายไดงายขน เปนโหมดชวยการทางานในการปรบตารางใหสามารถทางานได ดงรปท 6.5

รปท 6.5 แสดงมมมองในโหมด Expanded

3. Standard Mode เปนมมมองการทางานทใชสาหรบใสขอมล เนอหาตาง ๆ ดจากภาพจะเหนวาแสดงเปนตารางปกตทวไ ปจะไมสามารถปรบขนาดตาราง หรอ เซลลได ดงรปท 6.6

รปท 6.6 แสดงมมมองในโหมด Standard

198

การตรงตาแหนงตารางและเซลล ในเลเอาท การออกแบบวาดเลเอาทเทเบลแลววาดเซลลเพอใสขอมล ลงในตาราง จะมชองวางเกดขน เหมอนชองไฟ เลกบาง ใหญบาง ตามทเราไดรางไว ชองวางร ะหวางตารางและเซลล เมอมองภาพรวม จะเหนวาอยในแนวตง หรอคอลมนของตารางนนเอง เพอไมใหตาแหน งทเราออกแบบมการเลอนผดไป โปรแกรมไดเตรยมรปภาพขนาดเลก แตเปนภ าพใสทมองไมเหน เพอใหเราใสลงไปในบรเวณชองวาง เรยกวา Spacer Image เมอเรานา Spacer Image ใสลงในคอลมนวางระหวางตารางกบเซลลกเหมอนกบเรา ไดใส ลมคาตาแหนงวางไวเรยบรอยแลว วธการใส Spacer Image ทาได ดงรปท 6.7 1. หาตาแหนงชองวาง สงเ กตเหนไดวามลกศรเลก ๆ สดา ใหคลกเมาสทลกศร จะมขอความ

ใหเลอก 2 ขอความ ใหเลอกตรงหมายเลข 2 → Add Spacer Image (ไมเลอก Make column Auto stretch ซงจะปรบระยะชองวางใหอตโนมต )

รปท 6.7 แสดงตาแหนงวางทจะตองใส Spacer Image

2. จะปรากฏหนาตางใหบนทกไฟลรป Spacer Image ใหตอบ OK บนทกไวในโฟลเดอร Image ของงานสรางเวบเพจ ตาแหนงด งกลาวจะเปนเสนหนาขน

3. มองหาชองวาง อนและใส Spacer Image โดยรอบทกดาน ดงรปท 6.8

199

รปท 6.8 แสดงขนตอนการใส Spacer Image

4. ใหใส Spacer Image ทกจดทเปนชองวางในแนวคอลมน แลวออกไปทางานใสขอมลเนอหา ตาง ๆ ในมมมอง Standard ไดตามตองการ ตอไป

2. เทคนคการเลเอาทดวยโปรแกรม Photoshop

ในปจจบนการออกแบบเวบระดบมออาชพ จะนยมใชโปรแกรม Photoshop มาใชออกแบบมากเพราะสามารถออกแบบเลเอาทไดอยางสวยงาม แลวตดแบงภาพ (Slice) ใหเปนสวนเล ก ๆ บนทกหนาเวบทออกแบบเปนไฟล html สวนภาพทตดแบง (Slices) ทงหมดโปรแกรมจะสรา งโฟลเดอร ชอ Image เกบภาพทงหมดเปนไฟลเลก ๆ ตามทตด (Slices) ไว ดงตอไปน

1. เปดโปรแกรม Photoshop ขนมาแลวสรางไฟลใหม ในทนกาหนด ขนาดกวาง 750 pixels สง 900 pixels (ควรศกษาเพมเตมวาขนาดหนาเวบเพจเทาใดมผ ใชมากทสด) ความละเอยด 72 pixels/inch Color Mode ใช RGB (ความละเอยด และ Color Modeน ใชสาหรบกรณแสดงผลบนหนาจอคอมพวเตอร ) แบลคกราวดใชสขาว แลวตอบ OK ดลาดบการตงคา ในรปท 6.9

200

รปท 6.9 แสดงการตงคาขนาดหนาเวบเพจใน Photoshop

2. เมอไดหนาเอกสารขนาดตามหนาเวบเพจทกาหนด ทาการรางเสน Guides โดยกาหนดขนาดบรรทดใหหนวยวดเปน Pixels ตามแบบทตองการ และกาหนดสดสวนหนาเวบใหครบเชน สวนหว สวนเ นอหา และสวนทาย ดงรปท 6.10

รปท 6.10 แสดงการวาดเสน guides เลเอาทกอน กาหนดต าแหนงองคประกอบ ใหหนาเวบเพจ

201

3. ทาการออกแบบ เลเอาทหนาเวบเพจตามทออกแบบไว โดยกาหนดสพนใหคร บ สาหรบรายละเอยดตวอกษร คาบรรยายตาง ๆ ใหใสทโปรแกรม Dreamweaver สวนปมลงค เราจะทาการสรางเพมภายหลง ดงรปท 6.11

รปท 6.11 แสดงการวาดแบบเลเอาทหนาเวบ ดวยโปรแกรมPhotoshop

4. ใชเครองมอ Slice Tool ตดแบงภาพเปนชน โดยใหตดสวนสาคญ ดงน

สวนหว ใหวางแผนตดวาจะตองนา สวนใดไปสรางภาพ Animation หรอ Movies ตอเพอสรางความนาสนใจ ในทนจะตดไว 2 ภาพ

สวนเนอหา แบงเปน สวนปมลงค ใหตดสวนปมเมนลงคใหเทากนเพอเวลาสรางเทคนค แบบ Navigation bar จะสรางเพยงชดเดยว สวนบรเวณพนทเนอหา สามารถ ใชสวนภาพเลก ๆ ใสเปนพน หลง หรอใสสพนหลงทโปรแกรม Dreamweaver ได ใหตดสวนมมโคงไวประกอบสวนบน -สวนลาง เพอเวลาทใสเนอหามาก พนทขยาย สวนหว สวนทายจะไดขยายตาม

202

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

Slice Tool: 1 ใชตด 2 ใชเลอกปรบแกไข ตาแหนง /ขนาด

ภาพการตด 1 สนาเงน สวนทเราตด 2 สนาตา ล สวนทไมไดตด โปรแกรมจะตดเอง

รปท 6.12 แสดงเครองมอตด และการตดแบงภาพทเล

เอาทไว

203

5. การบนทกภาพทตดดวย Slice Tool 5.1 drag เมาส ตามเสนลกศร เพอเลอกพนท ทงหมด จะปรากฏเสนชดขน เลอกนามสกล

เปน .png หรอ .gif ในทนใช .png-8 (คณภาพสดกวา .gif) เลอก save ดงรปท 6.13 และ รปท 6.14

รปท 6.13 แสดงหนาตางการบนทก Slice และ การเลอก Slices ทงหมด

รปท 6.14 แสดงหนาตางการกาหนดรายการบนทกหนาเวบเพจ และไฟลรปภาพท Slices

204

5.2 ในการบนทก ทาตามลาดบ ดงรปท 6.13 และรปท 6.14 1.ใหสราง Folder เกบงาน โดยตองสรางในโฟลเดอรหลกของเวบไซตทสรางไวแลว 2. ตงชอไฟลหนาเวบเพจ เชน index.html 3. Save as type เลอก HTML and Images (*.html) 4. Settings เลอก Default Setting 5. Slice เลอก All Slice คลก Save โปรแกรมจะบนทกไฟล .html ซงจะนาไปดาเนนการ

ใสขอมลดวยโปรแกรม Dreamweaver ตอไป สวนท Slice ทงหมดถกเกบเปนไฟลภาพนามสกลต ามทเลอกไว ในทนเลอกมาเปน .png-8

5.3 เปดไฟล index.html ดวยโปรแกรม Dreamweaver ดาเนนการปรบเพอใสขอมล โดยตรวจสอบคลกทตด Slice ไวจะเหนเปนไฟลรปภาพอยในตารางทงสน ในกรณทเราตองการสวนใด ใชใสขอมล สามารถพมพขอค วาม เราจะสงภาพบรเวณสวนนนไปเปนภาพพนหลง บรเวณใดเปนพนสเรยบ ๆ เราไมไดตด Slice ไว ใหลบภาพนนทงไปบรเวณดงกลาว จะเปนพนทเซลลตารางวางใหใสสพน ตารางใหสเขากบแบบ พนทนน กจะเปน เซลลตารางใหญ เราสามารถใสตารางยอยเพอใสเน อหา ตกแตงไดตามตองการ ดงรปท 6.15

รปท 6.15 แสดงไฟล index.html ททาจาก Photoshop มาเปดใน Dreamweaver

205

จะเหนวางานทออกแบบเลเอาทมาจาก Photoshop จะใหสสนสวยงามกวาออกแบบดวยโปรแกรม Dreamweaver มาก แตผออกแบบตองฝก วางแผนการตด (Slices) แตละสวนมาใหด ตอง ตรวจสอบหมายเลขภาพแตละตาแหนงทจะล บ และสงไปเปนพนหลง หรอนาภาพนนไปออกแบบเพมเตม เชน สรางเปนภาพ Animation หรอ Movie Flash โดยทตองไมมการเปลยนแปลงขนาด และชอไฟล ของภาพโดยเดดขาด มฉะนนจะทาใหหนาเวบเพจรวนไปทงหมด เสยเวลาแกไขมาก

3. การใชเทคนค Layer ออกแบบเวบเพจ

การสรางหนาเวบ การจดวางองคประกอบ มสวนสาคญ อยางมาก ปญหาทพบเสมอ คอ เมอเราออกแบบมาอยางดใน Story Board แตไมสามารถวางขอความ หรอรปภาพไดตามตาแหนง ทเราตองการ การนา Layer ทโปรแกรม Dreamweaver มมาให ชวยในการจดหนาจงเปนทางออกว ธหนงในการแกปญหา ขนตอนการใชเลเยอรมดงน

1. เปด Layer Palette เพอควบคมการจดเลเยอรไปทเมน Window Layer 2. จากนนกเรมสราง เลเยอร โดยเรมท 1. เมน Layout (ตามหมายเลขทแสดง) 1. Insert bar

2. Standard 3. ใน Layer Palette ใหคลกทาเครองหมายถก ทชอง Prevent Overlaps (ปองกนไมให วาดเลเยอรซอนกน) 4. คลกเครองมอ Layer วาดเลเยอรตามตองการ ดงรปท 6.16

รปท 6.16 แสดงการเลอกคาสงวาดเลเยอร

206

3. แสดงการวาดเลเยอร 3 เลเยอร (หมายเลข 1 , 2, 3) ถาตองการตงชอเลเยอร ใหคลกทเลเยอร เมอแสดงกรอบสนาเงน ใหตงชอทหมายเลข 4 ดงรปท 6.17

รปท 6.17 แสดงการวาดเลเยอรและตงชอเลเยอร

4. เมอได Layer ในตาแหนงทตองการแลว ตอไปกใสเนอหา ลงใน Layer แตละ Layer การใสรปหรอขอความลงใน Layer ใหคลกท Layer ทตองการ ถาเปนรปใหคลกทเมน Insert > Image หรอ คลก ท Image Object กได ถาเปนขอความกพมพลงไปไดเลย

207

ตวอยาง การแทรกขอความ ลงในเลเยอร มขนตอนดงรปท 6.18 1. แทรกภาพพนหลง ไดท Page Properties

2. พมพขอความท ตองการ

1

2

รปท 6.18 แสดงการแทรกขอความลงในเลเยอร

208

ตวอยางการแทรกตารางลงในเลเยอร มขนตอน ดงรปท 6.19 1. คลกภายในเลเยอรทตองการแทรกตารางเลอกคาสง Insert > Table 2. กาหนดรปแบบตารางทตองการ 3. คลก OK

1

2

3

รปท 6.19 แสดงขนตอนการแทรกตารางในเลเยอร

209

ตวอยางการแทรกรปภาพลงในเลเยอร มขนตอน ดงรปท 6.20 1. การแทรกรปภาพในเลเยอรเหมอนกบการแทรกรปภาพในพนทการทางานทวไป

จากตวอยางจะเปนการแทรกรปภาพภายในตารางทอยในเลเยอร ทาไดโดยคลกภายในบรเวณทตองการ แทรกรปภาพ และใชคาสงในการแทรกรปภาพ Insert > Image

2. เลอกรปภาพทตองการจากไฟลภาพ Select Inage Source จากนนคลกทปม OK 3. ปรบแตงขนาดรปภาพตามทตองการโดยใช Properties Inspector

1

2

3

รปท 6.20 แสดงการแทรกรปภาพในตารางทอยในเลเยอร

210

4. การ ใสส เปนพน background ให Layer ใหคลกท BgColor ใน Layer Inspector แลวเลอกส ทตองการ

5. หากตองการเปลยนเลเยอรเปนตาราง ใหจดวาง Layer ตางๆ ใหอยในตาแหนงทตองการอกครง กอนทจะทาการเปลยนจาก Layer ใหเปนตาราง ทาได ดงรปท 6.21

ไปทเมน Modify > Convert > Layers to Table > OK จะปรากฏหนาตาง Convert Layers to Table

ในหนาตาง Convert Layers to Table ใหกาหนดคาดงน Table Layout ใหเลอก Smallest: Collapse Empty Cells และ Use Transparent GIFs Layout Tools ใหเลอก Prevent Layer Overlaps และ Show layer panel

รปท 6.21 การกาหนดรายการในหนาตาง แปลงเลเยอรเปนตาราง

แลวคลกท OK โปรแกรม Dreamweaver จะเปลยน Layer ใหเปนตารางในตาแหนงเดยวกบ ทเราวาง Layer ไว

ในปจจบนผใชอนเทอรเนตจะใชโปรแกรมบราวเซอรสงกวา Internet Explorer 5.x หรอ Netscape 4.x จงไมตองเปลยนจาก Layer ใหเปนตารางกได สามารถเสดงผลได การเปลยน Layer ใหเปนตารางกเนองจาก Browser บางชนดหรอทม Version ตากวา อาจไมสามารถแสดงผล Layer ได แตสาหรบตารางนนเปน Tag พนฐานท Browser สวนใหญแสดงผลได แนนอน และการแปลงเลเยอร เปนตารางจะทาใหพนทการแสดงผลบน บราวเซอรออกมาตรงตามการออกแบบไดดกวาการไมแปลง

211

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

การจดลาดบ Layer ในกรณทมเลเยอรจานวนหลายเลเยอรเราสามารถบรหารจดการเพอความสะดวกตอการจา

หรอเขยนสครปตคาสงเพมเตม เชนใสชอ จดลาดบ เลเยอร สงซอนเลเยอร ได ดงน 1. การตงชอ และการซอนเลเยอร ทาไดดงรปท 6.22

1.1 คลกเลอกเลเยอรทตองการ หมายเลข 1 1.2 ทหนาตาง Properties inspector ดานลางจะแสดงรายละเอยดของเลเยอรขนมา

ท Layer ID (หมายเลข 2) พมพชอไดตามตองการ หมายเลข 3 จะบอกขนาดของ เลเยอร และหมายเลข 4 Vis (Visible=การมองเหน) สามารถเปลยนคาจาก Default เปน Hidden (ซอน หรอ ปดบง )

รปท 6.22 แสดงการตงชอและซอนเลเยอร

212

2. การยายหรอจดลาดบเลเยอร ท Panal Layer จะเหนรายชอเลเยอร (Name) และ หมายเลขคาลาดบ (Z) เราสามารถคลกเลอก เลเยอรทตองการ แลวDragลากเปลยนตาแหนง ไดตามตองการ หรอเปลยนคาในชอง Z ซงจะ เรยงลาดบคาเลขมากลงมานอย (บน > ลาง ) รปท 6.23 แสดงการจดลาดบเลเยอร เลเยอรนอกจากนามาใชออกแบบหนาเวบเพจ ยงสามารถนามาสรางความนาสนใจรวมกบ

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

เทคนคแสดง-ซอนเลเยอร (Show - Hide Layer) Show-Hide Layer เปนการใชงานเลเยอร รวมกบ เครองมอ Behaviors ใชเทคนคซอนแล ะแสดง

เลเยอรเพอสรางความนาสนใจแกผชม เปนการแสดงรายการเนอหาแบบ Pop up ขนมาเมอนาเมาส ไป ชผานวตถทกาหนดไว เชน เมอเมาสชเมน มรปภาพ และขอความปรากฏขน ซงสรางความนาสนใจ ไดมากกวาการใชขอความจาก Alternate Text มขนตอนการสราง ดงรปท 6.24

1. เลอกรายการเมน หรอ Object มา 1 รายการ ดงในทนเลอก เมนชอ ทดสอบ Show-Hide (ดงหมายเลข 1)

2. วาดเลเยอร แลวใสตารางจดพนท และใสขอมลตามตองการดงตวอยาง หมายเลข 2 3. Dragรายการ เมน ทดสอบ Show-Hide ใหดาไว ถาเปนรปกตองคลกใหมกรอบ Activeไว ไปทเมน windows > เลอกเปดพาเนล Behaviors ตามหมายเลข 3 4. เลอกรายการ Show-Hide Layers ตามหมายเลข 4

213

รปท 6.24 แสดงขนตอนการสราง Show-Hide Layer

5. ใหสงเกตวารายการเมนทตองการใหเกด เหตการณ Show-Hide Layer ในทนคอ ทดสอบ Show-Hide จะตอง Drag เปนสดาอย

6. จะปรากฏหนาตาง Show-Hide Layers ใหคลกเลอกชอเลเยอร (ในทนมเลเยอรเดยวคอ pic01) แลวคลกปม Show > และ OK ตามหมายเลข 5, 6, 7 ดงรปท 6.25 7. ทพาเนล Behaviors จะปรากฏรายการ Show-Hide Layers ขน 1 รายการจากการเลอก Show > OK ในขอ 6 ใหเราเลอกเหตการณในชองหมายเลข 8 เลอกรายการ OnMouseOver ตามหมายเลข 9 ซงหมายถง ถานาเมาสมาอยบรเวณเมน จะแสดง (Show) เลเยอร pic01 ทนท

214

รปท 6.25 แสดงขนตอน เลอก Show

8. ใหคลกเครองหมาย + ท Behaviors อกครงจะ ปรากฏหนาตาง Show-Hide Layers ใหคลกเลอกชอเลเยอร pic01เหมอนเดม แลวคลกปม Hide > และ OK ตามหมายเลข 10,11ทพาเนล Behaviors จะปรากฏรายการ Show-Hide Layers ขนอก 1 รายการจากการเลอก Hide > OK โดยรายการใหมจะอย บรรทดบน ใหเราเลอกเหตการณ เลอกรายการ OnMouseOut ซงหมายถงถานาเมาสออกนอกบรเวณเมน เลเยอร pic01 จะถกซอน (Hide) ทนท ใหบนทกและทดสอบผล โดยกด F12 ดงรปท 6.26

รปท 6.26 แสดงขนตอน การสงเหตการณ Hide Layer

215

9. เมอการทดสอบผลถกตอง ใหสงซอนเลเยอร pic01 โดยเลอกรายการ Hidden ทชอง Vis ใน Properties การสราง Show-Hide Layer เปนการนาเลเยอรมาสรางความนาสนใจใหกบการออกแบบเวบเพจ ทนกเรยนสามารถเลอกใชงานไดตามความเหมาะสมกบงานทนาเสนอ แตไมควรใชมากเกนไปอาจทาให หนาเวบของเราดมเหตการณมากเกนไป กได

สรป บทเรยน การออกแบบเวบเพจโดยการนาเทคนคการรางหนาเวบดวยเครองมอ Layout , Layer ดวย

เครองมอโปรแกรม Dreamweaver และ Photoshop ผเรยนจะสามารถสรางเคาโครงหลกของหนาเวบเพจ ดวยการวาดแทนการใชตารางโดยตรง นบวาเปน เทคนคสาหรบผออกแบบเวบทชวยใหทางานไดเรว และสวยงามมากขน ในเรองการใชเลเยอรมรายละเอยดทนกเรยนสามารถใชเทคนคสรางความนาสนใจไดมาก นามาสรางเนอหาทดแปลกตาได เชน เทคนคการ Show-Hide Layer ทนามาเปนตวอยาง การสรางเวบเพจนบเปนงานทตองเรยนรเทคนคใหม ๆ ตลอดเวลา ผเรยนจงตองเรยนรเทคนควธการสรางเวบใหมากทสดเพอการสรางผลงานทดตอไป

......................................................................................................

216

เพอใหนกเรยนทบทวนความรในบทเรยน ใหตอบคาถามตอไปน วาเรามความรในสงตอไปนเพยงใด

แบบฝกหดประจาบทเรยน

คาสง ใหตอบคาถามตอไปน

1. การเลเอาทงาน เปนการรางแบบงานอยางงายและรวดเรวกอนใสรายละเอยด ใหบอก ประโยชนทไดรบจากการใชเครองมอเลเอาท มาอยางนอย 3 ขอ ................................................................................................................................................ ................................................................................................................................................ 2. ใหบอกขนตอนการใชงาน Layout เรยงตามลาดบกอนหลง คอ…………………………………………………………………………………………… ………………………………………………………………………………………………. ……………………………………………………………………………………………….

3. ใหบอกขนตอนการตดภาพ (Slice) หนาเวบ จากโปรแกรม Photoshop ถงขนเปดสราง แกไขตอ ทโปรแกรม Dream weaver ………………………………………………………

………………………………………………………………………………………………. ………………………………………………………………………………………………. 4. ใหอธบายขนตอนการแปลงเลเยอรเปนตารางมาใหเขาใจ ................................................................................................................................................ ................................................................................................................................................ 5. ใหบอกจดเดนของการออกแบบดวยเทคนค Layer มา 3 ขอ ……………………………………………………………………………………………….. ……………………………………………………………………………………………….. ……………………………………………………………………………………………….

217

อางอง

กตต ภกดวฒนะกล , Dream weaver MX 2004,กรงเทพ , เคทพ เกรยงศกด เจรญวงศศกด,ออกแบบและสรางเวบสวยดวย Dream weaver CS3,กรงเทพ ; ซเอดยเคชน,2551.

สรางโฮมเพจดวยตนเองกฤษณะ สถต , ,กรงเทพ:Info press. ประภาพร ชางไม , สรางเวบสวยดวย Dreamweaver 8.0 , กรงเทพฯ : ดจอารต.

การสรางเวบไซต พรเศก จตตแจง , ,กรงเทพ ; Success Media. แหลงสบคน : http://www.nectect.or.th http://www.webthaidd.com/dreamweaver/news.php?id=445 http://cannot.info/page?p=1310520034773 http://www.pyayam.com/article/show.php?Category=webpage&No=67