หน่วยที่ 6 การออกแบบด้วยเทคนิค layout,layer
DESCRIPTION
หน่วยที่ 6 การออกแบบด้วยเทคนิค Layout,LayerTRANSCRIPT
หนวยการเรยนท 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