หน่วยที่ 5 การตกแต่งความน่าสนใจ...

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

สาระการเรยนร การออกแบบเวบเพจใหมความนาสนใจ ถอเปนเสนหของ งาน ซงการตกแตงผลงานใหสวยงามเปนงานทตองทาขน ไมเฉพาะการสรางเวบเทานน แตการสรางหนาเวบเพจมลกษณะพเศษไมเหมอน งานทวไป เพราะ เปนการสรางหนาเอกสารหรอสารสนเทศ ทสามารถคลกลงค เชอมโยงไปยงเนอหาทเกยวของไดทงภายในเวบไซตและนอกเวบไซต การสราง สสนหรอใชเทคนคตาง ๆ จงตองมความเหมาะสม หากสรางแลวดนาเบอไมดงดดผ ชม จะไมมผเขาชม หนาเวบเพจทจะใชดงความสนใจผชมคอหนาแรก หรอ โฮมเพจ ดงนนการออกแบบเวบเพจ ผออกแบบจงใชเวลากบหนาแรกมากทสด แต ไมไดหมายความวาหนาอน ๆ จะไมมความสาคญหากแตการออกแบบสวนเนอหาหนาตอไปจะเนน เรองราวทตองการนาเสนอมากกวา การตกแตงหนาเวบเพจ จะตองเรยนรเรองส ขนาดตวอกษร ภาพ การเคลอนไหว เสยง การสรางปฏสมพนธกบผชม ซงโปรแกรม Dreamweaver มการเตรยมเครองมอตาง ๆ มาใหใชงานจดการสงเหลานมากพอสมควร เมอเรยกใชงาน จะทาการสรางรหสคาสง HTML ใหโดยเราสามารถเขาไปปรบแตงเพมเตมได ในบทนจะกลาวถง การตกแตงสรางความนาสนใจ การสรางการเชอมโยงเวบ นบวามความสาคญตอนกเรยน จงควรใหเวลาการฝกฝนใหครบและทาแบบฝกหดใบงานทมอบหมาย เพอทดสอบความรวาสามารถปฏบต งานไดจรงหรอไม เมอเขาใจพนฐานแลวควรแสวงหาความร เทคนคตาง ๆ เพมเตมเพอสรางงานทมคณภาพตอไป

134

ผงความคด (Mind Mapping)

การตกแตงความนาสนใจและการสรางจดเชอมโยง บนเวบ

1. ความรเกยวกบภาพกราฟกทใชงานบนเวบ

6. คาสงและการใชงาน CSS 4. คาสงและการใชงาน Movie Flash

2. คาสงแล ะการใชงาน Table

5. คาสงและการใชงาน Behavior 7. คาสงและการใชงานการเชอมโ ยง

7.3 การเชอมโยงไปเวบไซตอน

7.2 การเชอมโยงภายในเวบไซต

7.1 การเชอมโยงภายในหนาเวบ

7.4 การเชอมโยงดวย E-mail

3. คาสงและการใชงานภาพและ ภาพเคลอนไหว

7.5 การเชอมโยงไฟลดาวนโหลด

7.6 การเชอมโยงดวย Map Link

จดประสงคการเรยนร 1. บอกชนดไฟลกราฟกทใชงานบนเวบเพจไดสามารถจดการภาพกราฟก ใหมขนาด ความจ เหมาะสมกบการ ใชงานบนเวบเพจ2. ได ใชงานตารางกาหนด พนท เนอหาในเอกสาร เวบ3. ได

4. ใชคาสงนา ภาพนง ภาพเคลอนไหว เขามาใชในเอกสารเวบได 5. สามารถนาภาพ Movie Flash เขามาใชในเอกสารเวบได

Behavior สรางความนาสนใจบนหนาเวบเพจได 6. สามารถเลอกใช 7. สามารถเลอกใชงานเทคนค CSS ชวยสรางเวบได 8. สามารถสรางการเชอมโยงภายในหนาเวบเดยวกนได 9. สามารถสรางการเชอมโยงภายในเวบไซตได 10. สามารถสรางการเชอมโยงไปยงเวบไซตอนได 11. สามารถใชคาสงสรางการเชอมโยง ไปยงอเมลได 12. สามารถใชคาสงเชอมโยงไปย งไฟลดาวนโหลดได

) ไดMap link13. สามารถใชรปภาพสรางการเชอมโยง(

135

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

1. ความรเกยวกบภาพ กราฟกทใชงานบนเวบเพจ

ภาพกราฟกเปนองคประกอบทสาคญและจาเปนสาหรบการสรางเวบเพจ เพราะจะชวยทาให เวบเพจสวยงาม มสสนนาสนใจ และสอความหมายตางๆ ใหกบผชม ดงเชนทมผเปรยบเทยบไววา “ภาพ 1 ภาพ สามารถแทนคาพดไดเปนพนคา” ภาพกราฟกทนามาใชบนเวบเพจอาจจะเปน ภาพถาย ภาพวาดลายเสน หรอลวดลายตางๆ รวมทงภาพเคลอนไหว สาหรบภาพนง สวนใหญทนามาใชกน มขนาดของไฟลภาพไมควรเกน 50 KB สาหรบภาพเคลอนไหว ไดแก .gif หรอ .swf (ไฟล Flash) ซงไฟล แตละชนดจะมขอจากดและความเหมาะสมสาหรบลกษณะภาพทแตกตางกน การนาภาพกราฟกมาใชประกอบในเวบเพจนน มขอทเราจะตองพจารณาหลายดาน เชน ความจาเปน ประโยชนในการใชงาน ขนาดภาพ ขนาดความจไฟล เพราะจะมผลโดยตรงกบการใชเวลาโหลดเวบไซตมาด เวบไซตทดจะตองสามารถโหลดไดเรว เราจงตองทาความเขาใจกบการใชภาพ การจดการภาพใหเหมาะสมกบการใชงานบนเวบ กอน เพอใหใชงานไดอยางถกตอง ดงน

1. ประเภทของกราฟก ภาพกราฟกในคอมพวเตอรแบงออกไดเปน 2 ประเภทคอ 1. ภาพบตแมพ (Bitmap) เปนภาพทประกอบขนจากจดสขนาดเลก (เรยกวาพกเซล -Pixel) จานวนมาก เรยงไลสกนจนเรามองเหนเปนภาพๆ หนง ถาเราขยายภาพประเภทนจะทาใหภาพ ดหยาบและเหนรอยจดสอยางชดเจ น 2. ภาพเวคเตอร (Vector) เปนภาพทประกอบดวยเสนตรง เสนโคง และรปทรงเรขาคณต ทถกเกบอยในรปของคาสงโปรแกรมและคาตวเลขซงจะมการคานวณเมอแสดงผล ดงนนภาพประกอบนจงม ความคมชดเชนเดม ไมวาเราจะขยายภาพใหใหญขนเทาใด

136

2. รปแบบไฟลภาพกราฟกสาหรบเวบเพจ ภาพกราฟกทเปนมาตรฐานสาหรบใชบนเวบเพจมอย 3 ชนด แตละชนดกเหมาะสาหรบภาพทม ลกษณะแตกตางกนออกไปดงน 2.1 GIF (Graphic Interchange Format) ไฟลกราฟกชนด GIF ทนยมนาสรางเปน ภาพโลโกการตน ภาพวาดลายเสน ตวอกษร และภาพเคลอนไหว มจดเดนตรงทเราสามารถกาหนดใหฉากหลงของวตถ หรอพนทบางสวนโปรงใส จนมองทะลไปดานหลงได แตมขอจากดตรงจานวนส ซงสามารถใชไดสงสดเพยง 256 ส ซงมลกษณะเปนสทบ ไมมการไลระดบสมากนก และมขอบทคมชด ภาพชนด GIF สามารถกาหนดให ภาพแสดงแบบเบลอ ๆ กอนแลวคอยชดขน (interface)นยมนามาสรางภาพเคลอนไหวเชน ภาพไอคอน ปายหวคอลมน หรอ ปายโฆษณา (Banner) ภาพชนด GIF จะมนามสกลของไฟลเปน .gif ไฟลชนดนมกมขนาดเลกทาใหโหลดไดเรว 2.2 JPG (Joint Photographic Expert Group) ภาพชนดนสามารถแสดงสไดถง 16.7 ลานส (24 Bits) จงเหมาะสาหรบภาพถายหรอภาพทใชสจานวนมาก มคณสมบตในการแสดงผลแบบเบลอๆ กอนแลวคอยชดขน (progressive) เชนเดยวกบภาพ GIF แตไมสามารถทาภาพโปรงใสหรอภาพเคลอนไหว ได สามารถกาหนดระดบการบบอดขอมล ซงจะทาใหไฟลมขนาดเลกลงมาก ๆ ได (แตคณภาพของภาพกจะลดลงดวย ) ภาพชนด JPG มนามสกลของไฟลเปน .jpg หรอ .jpeg

2.3 PNG (Portable Network Graphic) ภาพชนดนมคณสมบตเดนคอสนบสนนระบบสหลายรปแบบ สามารถเลอกใชได 2 ขนาดความจคอ PNG-8 เปนรปแบบทใชไดเพยง 256 ส และมคณสมบตคลายกบไฟล GIF จงเหมาะสาหรบภาพทมสเรยบๆ เชน โลโก การตน ภาพวาดลายเสนสามารถกาหนดฉากหลงใหโปรงใสได อกแบบหนงคอ PNG-24 เปนรปแบบทใชสไดถง 16.7 ลานส เชนเดยวกบ JPG จงเหมาะสาหรบภาพถาย นอกจากนยงมคณสมบตพเศษคอสามารถทาภาพโปรงใสแบบไลระดบ สได 256 ระดบ แตเนองจาก PNG-24 ใชวธบบอดขอมลแบบไมสญเสยคณภาพ ดงนนไฟลทไดจงมขนาดใหญกวา JPEG มากภาพชนดนมนามสกล ของไฟลเปน .png ภาพกราฟกพนฐานทง 3 ชนดดงกลาวเปนภาพประเภท บตแมพ ซงเราสามารถสรางและปรบแตงไดดวยโปรแกรมตกแตงภาพทวๆ ไป 2.4 ไฟล Flash (.swf) Flash ภาพกราฟกอกชนดหนงทนยมนามาใชกนมากบนเวบเพจ ไฟล Flash นามสกล .swf จงถอเปนภาพมาตรฐานสาหรบเวบอกชนดหนงไปโดยปรยาย ไฟลชนดนสามารถเกบไดทงภาพ บตแมพและเวคเตอร แตสวนใหญจะเปนภาพเวคเตอรโดยมกใชทาภาพเคลอนไหวทตองการความคมชดสง สามารถ

137

ใชเทคนคการโตตอบกบผชมได มาก งานทนามาใช เชน ปายแบนเนอร เมนของเวบไซต และเกม ไฟล Flash มกเรยกกนอกอยางวา “มฟว” (Movie) การสรางมฟวของ Flash มโปรแกรมทสามารถทาไดหลายโปรแกรม แตโปรแกรมหลกกคอ Macromedia Flash

3. โปรแกรมทนยมใชสรางกราฟกและเวบเพจในปจจบน

Adobe Photoshop / Image Ready Photoshop เปนโปรแกรมยอดนยมทใชในการสรางและตกแตงภาพ มคณสมบตเดนมากมาย และใชทางานตางๆ ไดอยางกวางขวาง ไมวาจะเปนการออกแ บบกราฟกในสวนหนาตาของเวบเพจ เชน โลโก, แบนเนอร, ไอคอน, ปมเมน รวมถงแถบส และลวดลายตางๆ การปรบแตงภาพดจตอล เชนภาพถายทตองกา รนาไปแสดงบนเวบเพจ สาหรบการสรางภาพเคลอนไหว เอฟเฟค เชน Rollover โดยจะตองใชโปรแกรมทมาคกนคอ Image Ready Macromedia Fireworks โปรแกรมสาหรบตกแตงภาพก ราฟกทเนนคณสมบตดานการออกแบบและสรางเวบเพจโดยเฉพาะ สามารถใชสรางองคประกอบตางๆ บนหนาเวบเพจ รวมถงเอฟเฟคและภาพเคลอนไหวแลวบนทกผลลพธเปนไฟลตนแบบ สาหรบนาไปใชตอใน Dream weaver ไดทนท Macromedia Flash โปรแกรมทใชสรางมฟว Flash ซงเปนภาพเคลอนไหวคณภาพสงทสามารถนาไปประยกตใชในเวบเพจไดหลากหลาย ไมวาจะเปนการส รางเมน, แบนเนอรโฆษณา, ไอคอน, สอมลตมเดย และเกม Macromedia Dreamweaver โปรแกรมสาหรบสรางเวบไซตทมผนยมใชมากทสดในปจจบน ทงระดบผใชทวไป และ มออาชพ เนองจากมประสทธภาพสง มคณสมบตเดนมากมาย ชวยใหจดวางโครงสราง และออกแบบเวบเพจได อยางอสระโดยอาศยเครองมอตางๆ ทโปรแกรมเตรยมไวใหโดยไมตองรภาษา HTML แตอยางใด

4. การจดการกราฟกเพอใชงานบนเวบเพจ การใชภาพกราฟกมาตกแตงเวบเพจม ขอควรคานง กอนนาหรอสรางงานกราฟกมาใช ดงน 1. เลอกภาพกราฟกทตรงกบ Concept ของเวบไซตทไดออกแบบเอาไว 2. เลอกภาพประกอบทเหมาะสมกบเนอหา 3. ใชภาพเทาทจาเปน อยาใชมากจนดรกรงรง 4. หากใชภาพเคลอนไหวประกอบ ควรเลอกตาแหนงจดวางทเหมาะสม และไมควรใชมากจนทาใหผชมเกดค วามราคาญ

138

5. ควรใชภาพทมทศทางเดยวกน หรอเรองราวเดยวกน หรอเนอหาเดยวกน เพอทาใหเวบไซต เปนเอกภาพและดเปนซรส (Series) เดยวกน ไมแตกแยกไปคนละทาง 6. การใชภาพพนหลงทด จะตองทาใหตวอกษรบนเวบเพจอานงาย 7. ออกแบบและสรางภาพตวละคร โลโก สญลกษณของเวบ หรอสวนประกอบอน ๆ ดวยตนเอง ไมคดลอกหรอเลยนแบบจากเวบไซตอนมา อนจะกอใหเกดปญหาละเมดลขสทธ 8. ควรออกแบบเวบเพจดวยสไตลของตนเอง ในการเตรยมภาพกราฟกทเปนภาพนง (Image) มาประกอบลงในหนาเวบ สงแรกทผออกแบบจะตองจดการคอ ลดขนาดความจของภาพแตละภาพ ใหผชม สามารถดาวนโหลดมาดไดเรว นนคอตองจดการกบขนาดความจใหนอยทสด เพราะในเวบไซตหนง ๆ จะตองมภาพจานวนมาก สวน ดานความชดเจนจะลดลงนนไมใชเรองสาคญทสด ใหใชขนาดความชดปานกลางเทานน การจดการภาพใหมขนาดความจ ลดลงวธชวยไดสงแรกคอการเลอกชนด หรอ นามสกลใหถกกบประเภทภาพกราฟกนน ซงกลม ของนามสกล (.gif .jpg .png) ดงกลาวเปนชนดของไฟลทเลกอยแลว แต หากยงมขนาดเกน 50 KB เราตองดาเนนการใหมขนาดเลกลงใหได วธทนยมนามาใชม 2 วธ คอจดการเรองความจกบการตดแบงภาพใหญใหเปนภาพเลก ๆ (แบบจกซอ) แลวนาไปประกอบบนเวบ การจดการทาไดดงน 4.1 การปรบขนาดความจของไฟล กราฟก กรณเปนภาพถาย ตองใชนามสกล .jpg ปรบขนาดไดดงน เปดไฟลทตองการดวย Photoshop ตกแตงใหเรยบรอย > ทาการบนทกเลอก Save for Web > ทหนาตางบนทก Save for Web เลอกมมมองแบบ 4 up (แสดง 4 ภาพ) หมายเลข 1 เปนภาพตนฉบบ (Original) ใตภาพบอกขนาด 2.25 KB หมายเลข 2 – 4 เปนภาพทเราจะเลอกบนทก มขนาดไฟลบอกใตภาพ พรอมทงบอกเวลาทใช ในการดาวนโหลด ทความเรว (โมเดม) 28.8 Kbps ใหเลอกภาพทมขนาดไมเกน 50 KB หมายเลข 5 กลมรายละเอยดการเลอกบนทก และการปรบความละเอยดไฟล (Quality) ใชปรบลดความละเอยดลงอก กรณขนาดไฟลยงมากกวา 50 KB ดงรปท 5.1

139

แสดงการปรบขนาดไฟล ทาไดดงน

รปท 5.1 แสดงหนาตาง Save for Web สามารถปรบขนาดไฟลใหเลกลงได

1. เลอกไฟลทตองการแลว เลอกชนดไฟลในทนเลอก .jpg 2. ท Quality คลก > เพอใหแสดงแกนปรบคาความละเอยด โดยขณะปรบเลอนลกศร ทแกนปรบใหสงเกตคาความจของไฟลตามหมายเลข 3 จะปรบขนาดความจตาม ใหขนาดไฟลไมควรเกน 50 KB 3. แสดงรายละเอยดไฟลทจะบนทกในทน ไดแก ชนดเปน .jpeg ขนาดไฟล 48.39 KB ใชเวลาโหลด 18 วนาท เมอความเรวโมเดมเทากบ 28.8 Kbps (กโลบ ตตอวนาท ) ดงรปท 5.2

รปท 5.2 แสดงรายการทใชปรบขนาดไฟล . JPEG ใหเหมาะสมกบการใชงานบนเว

บ

140

แสดงการปรบขนาดไฟลในกรณบนทกเปน .png (PNG8 , PNG24) ภาพ PNG มใหเลอก 2 แบบ คอ PNG-8 มสสงสด 256 ส และ PNG-24 ม 24 บต หรอ16.7 ลานส การปรบเลอกขนาดไฟล ทาไดโดยเลอก colors ทหมายเลข 2 ดงรปท 5.3 แสดงการปรบขนาดไฟลในกรณบนทกเปน .gif ภาพ .GIF มสสงสด 256 ส การปรบเลอกขนาดไฟล ทาไดโดยเลอก colors ทหมายเลข 2 เชนเดยวกน ดงรปท 5.4

รปท 5.4 แสดงรายการทใชปรบขนาดไฟล .GIF ใหเหมาะสมกบการใชงานบนเวบ

รปท 5.3 แสดงรายการทใชปรบขนาดไฟล.PNG ใหเหมาะสมกบการใชงานบนเวบ

141

4.2 การตด (Slice) ภาพขนาดใหญเปนภาพขนาดเลก กรณทภาพใหญมาก หรอ ภาพเลกแตตองการความละเอยดของภาพนนสง ทาใหไฟลมขนาดความจมาก เราจะใชวธตดแบง (Slice) ภาพออกเปนไฟลเลก ๆ แทน (ทาเหมอนจกซอ) เพอใหแตละชน ทตดซงจะบนทกเปนไฟลยอย ๆ มขนาดเลก ดงรปท 5.5

1. คอเครองมอตดแบง (Slice Tool) 2. แสดงการตด Slice เปน 4 ไฟล

ทาการบนทก Save for Web > 1. Drag เลอกทงหมด >2. เลอกนามสกลเปน JPEG เพราะเปน รปภาพถาย > 3. ปรบความละเอยด ไมควรสงมากเกน > 4. คลก Save ดงรปท 5.6

รปท 5.5 แสดงการตดภาพออกเปนสวน ๆ เพอใหไดภาพขนาดเลก

รปท 5.6 แสดงขนตอนการบนทกภาพท Slice

142

การบนทกในชอง Save as type เลอก Image only (*.jpg) หรอ (*.png) ตามทเลอกไว เมอคลก Save ไฟลท Slice จะถกเกบไวใน โฟลเดอรชอ images เวลาใชงานตองเปดไฟลทงหมดจดเรยงภาพเขาตาแหนงเดมจะไดภาพเหมอนเดมทกประการ ดงรปท 5.7 และ 5.8

รปท 5.7 แสดงการบนทกไฟล Slice

ในภาพท 5.8 นหากทดสอบ โดยดผานโปรแกรมบราวเซอร คลกตามตาแหนงท Sliceไว 4 ภาพ จะสงเกตเหนเปนภาพ 4 ภาพทประสานตดกนอย ตามเทคนคการ Slice เทคนคนจะนามาใชมากทสดในการสรางเวบ เพราะสามารถรกษาขนาดทงความใหญของภาพ และความ ละเอยดของภาพไวได

รปท 5.8 แสดงผลการเปดใชไฟล Slice ทง 4 สวน

143

2. คาสงและการใชงาน ตาราง (Table)

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

1. การสรางตาราง การสรางตารางลงบนพนทออกแบบเวบมขนตอน ดงรปท 5.9

1. วางเคอรเซอรการพมพ ในตาแหนงทจะสรางตาราง

2. เลอกคาสง Insert > Table หรอ ในแถบ Insert เลอกแถบ Common แลวคลกทปม 3. กาหนดรายละเอยด จานวนแถวและจานวนคอลมน เสนขอบ ระยะขอบ ระยะตวอกษรกบเสนขอบ 4. คลก O.K. จะปรากฏตารางตามตาแหนงเรมตนทเคอรเซอรกาหนด

รปท 5.9 แสดงหนาตางการกาหนดรายละเอยดสร

างตาราง

144

2. การพมพขอความลงในตาราง 1. คลกเซลลทตองการ แลวพมพตวอกษร 2. การเลอนไปยงแตละเซลล ทาไดโดย 3. Tab เลอนไปทางขวาทละเซลล 4. Shift + Tab เลอนไปทางซายทละเซลล 5. ปมลกศรทงส เลอนไปตามทศทางของลกศรนน 6. กด Shift+Enter เพอใหขนบรรทดใหมภายในเซลลไดเมอตองการ การขนบรรทดใหม

เมอ Shift+Enter = Tag <br> และ Enter = Tag <p>

7. เสรจแลวคลกทนอกตาราง โปรแกรมจะจดขนาดของตารางใหเหมาะสมกบขอความ

3. การปรบขนาดโครงสรางของตาราง 3.1 การปรบความกวางของคอลมน ดงรปท 5.10 หมายเลข 1 3.1.1 ใหลากขอบขวาของคอลมนนน 3.1.2 หากคอลมนนนไมใชคอลมนสดทายของตาราง คอลมนทอยตดกนจะถกปร บขนาด

ตาม 3.1.3 หากเปนคอลมนสดทายของตาราง ความกวางของตารางจะถกปรบตาม 3.2 การปรบความสงของแถว หมายเลข 2 รปท 5.10 ใหคลกลากขอบลางของแถวนน

ขน – ลงตามตองการ

รปท 5.10 แสดงการปรบความกวาง ความสงตารางโดยการลากเมาส

3.3 การปรบความกวางของคอลมนและความสงของแถวดวยพาเนล Properties ดงรปท5.11

3.3.1 เลอกคอลมนหรอแถว

145

3.3.2 กาหนดคาในสวนของ W หรอ H แลวกด Enter ดงรปเปนตวอยางการกาหนดความ กวาง W

รปท 5.11 แสดงการปรบความกวาง ความสงตารางโดยใชการกาหนดจาก Properties

4 การปรบขนาดของตาราง ทงตาราง การปรบขนาดตารางทงตาราง ทาได ดงรปท 5.12 4.1 ใหเลอกทงตาราง กอน โดยคลกเมาสทเสนขอบนอก จะเหนมกรอบสดาเขมและจดยดขนมา 3 จด 4.2 หากตองการปรบขนาดตามแนวนอน ใหลากจดยดทขอบขวาของตาราง 4.3 หากตองการปรบขนาดตามแนวตง ใหลากจดยดทขอบลางของตาราง 4.4 หากตองการปรบขนาดทงสองแนว ใหลากจดยดทมมลางขวาของตาราง

146

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

เราสามารถปรบแตงรายละเอยดของตารางไดจากพาเนล Properties ดานลาง โดยตองคลกขอบตารางใหปรากฏเสนและจดยดกอน ดงรปท 5.12

รปท 5.12 แสดงการปรบรายละเอยดตารางใน Properties

รายละเอยดคาสงใน Properties inspector มดงน

รายละเอยด คาอธบาย

Rows, Cols ใชระบจานวนแถวและคอลมนทตองการ

W ( ความกวาง) ใชระบความกวางของตาราง

H ( ความสง) ใชระบความสงของตาราง

Cell Pad กาหนดระยะระหวางขอ ความในตารางกบขอบตาราง คานมผลกบทงตาราง คาทกาหนด ไวมาตรฐาน คอ 1

Cell Space กาหนดระยะระหวางเซลลทอยในตาราง คานมผลกบทงตาราง คาทกาหนดไวมาตรฐาน คอ 2

Align ใชระบการจดวางตารางใหชดซาย( Left) ชดขวา( Right) กงกลาง ( Center) หนาเวบได โดยคาทกาหนดไวเปนมาตรฐาน ( Default) คอ Left

Border กาหนดความหนาของเสนขอบ ถาไมตองการใหมเสนขอบ ใหกาหนดคาในชองนเปน 0

Bg Image, Bg Color, Brdr(Border Color)

ระบภาพทจะใชเปนพนหลงของตาราง หรอสทใชเปนพนหลง และสขอบขอ งตาราง

147

6. การจดเรยงขอความในตาราง การจดเรยงขอมลทใสในตาราง (คลายกบโปรแกรม Excel) ทาไดจากคาสง ตามรปท 5.13 ดงน

6.1 เลอกตารางหรอคลกทเซลลใดเซลลหนงในตาราง 6.2 เลอกคาสง Commands > Sort Table 6.3 เลอกลกษณะการเรยงขอมลในตาราง 6.4 คลก O.K.

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

7. การเปลยนแปลงจานวนแถวและคอลมน

การสรางเนอหาในหนา เวบ โดยการนาตารางมาชวยกาหนดขอบเขตเนอหาบางครงตองมการ ขยายพนทใหมากขนโดยการแทรกแถว คอลมน หรออาจตองปรบขนาดโดยรวมแถว หรอคอลมนเขา ดวยกนขนอยกบลกษณะ ความจาเปนในการกาหนดพนท การทเรามตารางแลวตองมการเปลยนแปลง จานวนแถว หรอคอลมน สามารถทาไดดงน 7.1 การแทรกคอลมน กรณตองการแทรกคอลมนเขาในตาราง ให > คลกเซลลตรงคอลมนทตองการจะแทรก > แลวคลกคาสง Modify ทเมนหลก > Table > Insert Column จะปรากฏหนาตาง Insert Rows or Columns ใหคลกเลอกรายการ ดงรปท 5.14 ดงน Insert เลอก Columns Number of Columns ใสจานวนคอลมนทตองการ Where ใหเลอกวาจะใสในตาแหนงกอนหนา หรอตาแหนงหลง เซลล ทกาลงคลกอย > คลก OK จะปรากฏคอลมนแทรกมาตาม ตองการ

148

รปท 5.14 แสดงหนาตางกาหน ดการแทรกคอลมน

7.2 การแทรกแถว กรณตองการแทรกแถว ในตารางเดมสามารถปฏบตไดเชนเดยวกบการแทรกคอลมน ดงน > คลกเซลลตรงแถวทตองการจะแทรก > เลอกคาสง Modify > Table > Insert Row จะปรากฏหนาตาง Insert Rows or Columns ใหคลกเลอกรายการ ดงรปท 5.15 ดงน Insert เลอก Row Number of Rows ใสจานวนแถวทตองการ Where ใหเลอกวาจะใสในตาแหนงบน (Above the Selection) หรอตาแหนงดานลาง เซลลทกาลงเลอกอย > คลก OK จะปรากฏแถวตารางแทรกตามตองการ

รปท 5.15 แสดงหนาตางกาหน ดการแทรกแถวตาราง

7.3 การลบแถวหรอคอลมน กรณทตองการลบแถว หรอคอลมนออก ทาได 2 วธ คอ 7.3.1 ใชคาสง Modify > คลกแถวหรอคอลมนทตองการจะลบ > ลบแถว ใหเลอกคาสง Modify > Table > Delete Row ถาลบคอลมน ใหเลอกคาสง Modify > Table > Delete Column 7.3.2 ใชคาสงลด โดยคลกเมาสขวาในเซลลท พนท แถว หรอ คอลมนทตองการลบ > จะปรากฏ คาสงขนมา เลอก Table > เลอก Delete Row หรอ Delete Column ตามตองการ

149

7.4 การรวมเซลล หากตองการรวมเซลลทาได 2 วธ ตามรปท 5.16 ดงน 7.4.1 ใชคาสง Modify โดย คลกเมาสลากรวมเซลลทจะรวมเขาดวยกนเปน > เลอกคาสง Modify > Table > Merge Cell 7.4.2 ใชใชคาสงลด โดยคลกเมาสขวาในเซลลท พนท เซลลทตองการรวม > จะปรากฏ คาสงขนมา เลอก Table > เลอก Merge Cell ตามตองการ

รปท 5.16 แสดงหนาตาง การรวมเซลล

เซลลทรวมแลว

เซลลทเลอกเพอรวม

7.5 การแยกเซลล กรณทตองการลบแถว หรอคอลมนออก ทาได 2 วธ คอ 7.3.1 ใชคาสง Modify > คลกแถวหรอคอลมนทตองการจะลบ > ลบแถว ใหเลอกคาสง Modify > Table > Delete Row ถาลบคอลมน ใหเลอกคาสง Modify > Table > Delete Column 7.3.2 ใชคาสงลด โดยคลกเมาสขวาในเซลลท พนท แถว หรอคอลมนทตองการลบ > จะปรากฏ คาสงขนมา เลอก Table > เลอก Delete Row หรอ Delete Column ตามตองการ

รปท 5.17 แสดงหนาตางกาหน ดการแทรกแถวเพมในตาราง

150

7.6 การกาหนดสใหกบตาราง การกาหนดพนทเนอหาในตาราง อาจมการใสสพนเซลล หรอใสสเสนตารางไดดวย ทาได ตามรายการคาสง ใน รปท 5.18 ดงน กรณใสสพ นในเซลล > 1. เลอกคลกเซลลทตองการใสส > เลอกคาสง Bg ตามหมายเลข 2 ในพาเนล Properties จะปรากฏแถบสใหเลอก เลอกสตามตองการ กรณใสสพนเสนตา รางเฉพาะเซลล ตองกาหนดขนาดความหนาเส นตารางมากอน เชน Border =1 > 1. เลอกคลกเซลลทตองการใสส เสน > เลอกคาสง Brdr ตามหมายเลข 1 ในพาเนล Properties จะปรากฏสใหเลอก คลกเลอกสตามตองการ กรณใสรปเปนพนหลงในเซลล > 1. เลอกคลกเซลลทตองการใสรปเปนพนหลง > เลอกคาสง Bg ตามหมายเลข 3 ในพาเนล Properties คลกปม Browse เลอกรปทเตรยมไว ใสลงเซลลตามตองการ

รปท 5.18 แสดงหนาตางการใสสตาราง

7.7 การกาหนดสและรปภาพให พนหลงทงตาราง การกาหนด สและรปภาพใหพนหลง ทง ตาราง ทาได ตามรายการคาสง ในรปท 5.19 ดงน กรณใสสพนตาราง ตองคลกขอบนอกเสนตารางใหเปนเสนทบ มจด ยดตารางปรากฏขน กอน ใหรวาจะแกไขทงตาราง > คลกเซลลใดกไดในพนทตาราง > เลอกคาสง Bg color ตามหมายเลข 1 ในพาเนล Properties จะปรากฏแถบสใหเลอก เลอกสตามตองการ กรณใสรปภาพเปนพนทงตาราง ตองคลกขอบนอกเสนตารางใหเปนเสนทบ มจดยดตาราง ปรากฏขนกอน ใหรวาจะแกไขทงตารางเชนกน > คลกเซลลใดกไดในพนทตาราง > เลอกคาสง Bg Image ตามหมายเลข 3 คลกปม Browse เลอกรปทเตรยมไว ใสรปเปนพนหลงไดตามตองการ

รปท 5.19 แสดงหนาตางการใสสและรปเปนพนหลงทงตาราง

151

7.8 การสรางตารางซอนตาราง การจดการเนอหาบางสวนในตาราง อาจจดการยาก เพราะผลของเสนตารางในแนว แถว หรอคอลมนไมเปนอสระตอกน เราสา มารถแกปญหาโดยการแทรกตารางซอนลงในตารางเดมได เพอใหงานในตารางยอยทแทรกเขาไปควบคมไดโดยไมมผลตอแนวเสนตารางเดม การแทรกตาราง ซอนตารางทาได ดงรปท 5.20 ดงน คลกเซลลในตารางตรงทตองการสรางตารางยอย > เลอกคาสง Insert > Table > กาหนด คาตางๆ ของตารางใหม แลวคลก O.K. จะไดตาราง ตามตองการ

รปท 5.20 แสดงหนาตางการแทรกตารางซอนตาราง

3. การใสรปภาพ (Image)และ ภาพเคลอนไหว(Animation: GIF)

กอนอน ใหคานงไวเสมอวาการใชทรพยากรใด ๆ ทจะนามาใสลงในหนาเอกสารเวบเพจ เชน รปภาพ Movie Flash เสยง ฯลฯ ทรพยากรเหลานนจะตองถกนามาจดเกบไวในโฟลเดอรของเวบไซตเรา เรยบรอยแลวทงหมด โดยจดเปนโฟลเดอรยอย ซงหลกโดยทวไปจะใช โฟลเดอร images นเกบงาน กราฟกทงหมด หากไมนามาเกบไวเมอเสนอบนโปรแกรมบราวเซอรจะไม มภาพหรอกราฟกเหลานน แสดงออกมา ดงนนการอธบายตอไปนใหเขาใจวาทรพยากร รปภาพเสยง หรอกราฟกตาง ๆ ไดถกบนทกไวในโฟลเดอรเกบงานในเวบไซตของเราเรยบรอยแลว การนารปภาพนง (image) หรอ ภาพเคลอนไหว (Gif Animation) มาใสในหนาเวบเพจ ทาไ ดโดยใชคาสงเดยว กน ดงรปท 5.21 และ 5.22 ดงน

1. วางตาแหนงเคอรเซอร ณ ตาแหนงทจะใสรปภาพ > 2. เลอกชดคาสง Common > เลอกรายการยอยใน Images > 3. คลกเลอก Image

152

รปท 5.21 แสดงหนาตางการใสภาพลงหนาเวบ

4. จะปรากฏหนาตางให เลอกรป ใหเลอกรปทนามาเตรยมไว > 5. คลก OK ดงรปท 5.22

รปท 5.22 แสดงหนาตางการเลอกรป

ผลทไดดงรปท 5.23 บนทกแลวทดสอบโดย กด F12

153

รปท 5.23 แสดงหนาตาง ทใสรปแลว และคาสง HTML

4. คาสงและการใชงาน Movie Flash

ไฟล Movie Flash เปนไฟลประเภท .swf การนา มาใสในหนาเวบเพจ ทาไดคล ายกบการนาไฟลรปภาพมาใส โดยเลอกเครองมอ ตามหมายเลขการอธบายประกอบ ในรปท 5.24 ดงน

หมายเลข 1. วางตาแหนงเคอรเซอร ณ ตาแหนงทจะใสรปภาพ หมายเลข 2. เลอกชดคาสง Common >เลอกรายการยอยใน Media หมายเลข 3. คลกเลอกรายการ Flash

จะปรากฏหนาตางเกบภาพ (Folder images) ทเราเกบไฟล flash ดงรปท 5.25

รปท 5.24 แสดงหนาตางเลอกคาสงใส Media Flash

154

หมายเลข 4. เลอกไฟลทตองการ เชนในตวอยางเลอกไฟล flash1.swf > คลก OK หมายเลข 5. ไฟลแฟลชทนาเขามาแลว จะเปนสเทา มสญลกษณ f ปรากฏ หมายเลข 6. แสดง Code HTML ซงโปรแกรมจะสรางมาใหโดยเราตองลบออกบางในสวนของ

การประชาสมพนธ เอาไวเฉพาะคาสงแทรกไฟล Movie Flash โดยมดงน: <embed src="images5/behavior/flash1.swf" quality="high" width="300" height="250"></embed> หมายเลข 7. คอรายละเอยดของไฟล Movie Flash โดยสามารถคลกปม Play เพอทดสอบได เสรจแลว ทาการ Save และทดสอบโดย กดคย F12

รปท 5.25 แสดงหนาตางเมอใส Media Flash แลว

การใสภาพนง (Image) ภาพเคลอนไหว(Animation) และ Movie Flash ทกลาวมาเปน เพยงสวนหนงของการใชภาพ กราฟกมาประกอบบนเวบใหนา สนใจ นกเรยนจะเหนวา เครองมอ แทรก Image กบ Media ซงยงมการใชงานอกหลายอยางท ไมไดกลาวถง เราสามารถเลอกนามาใชได ทงนขนอยกบ ความเหมาะสมและดงไดกลาวแลววาการใสอะไรมากเกนไป จะทาใหมปญหาการโหลดชาได จงตองระวง ขอใหนกเรยนศกษาเพมเตมและเลอกใชงาน อยางเหมาะสม เพอใหไดงานทนาสนใจตอผชม ใหมากทสด

155

5. คาสงและการใชงาน Behavior

เครองมอ Behavior เปนคาสงสรางเทคนคความนาสนใจ ของโปรแกรม ซงมหลายรปแบบใหเลอกใช ในทนจะขอนาตวอยางมา ใหด 2 ตวอยาง ดงน

1. การเปลยนรปเมอวางเมาส : Swap Image Swap Image เปนการสรางการโตตอบกบผใช โดยมการสลบ เปลยนรปภาพเมอนาเมาสไปวางหรอลากผานรปภาพ และ เมอนาเมาสออกจากรปกใหเปลยนรปภาพกลบมาเปนรปเดม ภาพทนามาใชแตละจดจะใช 2 ภาพ ควรจดการภาพใหมขนาด ความกวาง ความสง เทากน หรอใกลเคยงมากทสดกอน ขนตอนการสราง Swap Image ดงน รปท 5.26 1. คลกรปภาพทตองการใหเปลยน เมอนาเมาสไปวาง 2. คลกเมน Window > Behaviors > จากนนหนาตาง Behaviors จะเปดขนมาทางดานขวา

คลกปม จะเหนไดวามคาสงตางๆแสดงขนมามากมาย 3. คลกเลอกคาสง Swap Image โดยจะปรากฏ หนาตาง Swap Image ขนมา ดงรปท 5.27

รปท 5.26 แสดงคาสง Swap image ใน Behavior

ตามรปท 5.27 คลกเลอกตามลาดบ ดงน

156

4. คลกปม Browse ทชอง Set Source to: เพอเลอกไฟลภาพทจะใหแสดงเมอนาเมาสไปวางโดยหนาตาง Select Image Source จะปรากฏขนมา 5. คลกเลอกไฟลภาพทตองการ 6. คลกปม OK 7. เมอไดไฟลภาพปรากฏท Set source to:.. เรยบรอยแลวคลก OK อกครง

รปท 5.27 แสดงการใสไฟลภาพ Swap

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

157

Swap Image กบ Rollover Image Rollover Image เปนเทคนครปเปลยนไดเมอวางเมาสในพนทรปเชนเดยวกบ Swap Image แตใชเครองมอในชดการแทรกภาพ (Common > Image) นกเรยนสามารถเลอกใชวธใดกไดทาได วธการสรางมลาดบตามหมายเลขทแสดง ในรปท 5.28 ดงน 1. คลกตาแหนงเพอวางรป 2. เลอกชดคาสง Common 3. เลอกชดคาสงแทรก Images 4. เลอกคาสง Rollover Image

รปท 5.28 แสดงการใสไฟลภาพ Rollover Image

158

จะปรากฏหนาตาง Insert Rollover Image ใหปฏบตตามลาดบหมายเลข ตามรปท 5.29 ดงน 1. ใหคลกปม Browse เลอกรปใสในชอง Original image คอ รปทจะแสดงปกต และ Rollover image คอ รปทจะปรากฏเมอนาเมาสมาอยบรเวณรป Original > คลก OK 2. แสดงหนาตางเลอกรป เมอคลกปม Browse 3. และ 4. คลก Browse เพอเลอกรปสลบได 5. Alternate text ใสขอความสน ๆ ใหแสดงเมอเมาสชทรป 6. คลก OK ทาการบนทกไฟล และทดสอบผลด กด F12

รปท 5.29 แสดงผลการใสไฟลภาพ Rollover Image

159

2. ใสเสยงเมอเปดหนาเวบเพจ(Play Sound) การใสเสย งบรรยาย หรอเสยงเพลง เมอเปดหนาเวบเพจเปนอกเทคนคหนงทนาสนใจ และมการนาไปใชกนมาก สวนใหญจะใชในหนาทกทาย ประชาสมพนธ หรอ หนาโฆษณา ซงการใสเสยง ลกษณะนสามารถเลอกไดวาจะใหเลนทนทเมอเปดหนาเวบ (Onload) หรอใหคลกเปดฟงดวยตนเอง สาหรบการเปดเพลงทเลอกเพลงไดแบบ ฟงเพลง Online ของสถานจะตองใชโปรแกรมระบบฐานขอมลเพอใหผชมเลอกรายการเพลงได ตวอยางนจะแสดงใหเฉพาะการใชคาสงจาก Behavior เทานน

การใสเสยงในในเวบเพจ จะใสใน Tag Body มขนตอนตามลาดบหมายเลข ดงรปท 5.30

1.เมอเลอกเวบเพจทจะใสเสยงแลว คลกท Tag <body> 2. เลอก Behavior คลกเครองหมาย + เพอเลอกรายการคาสงในชด Behavior 3. เลอก Play Sound

รปท 5.30 แสดงการใสเสยงในหนาเวบเพจ

4. ปรากฏหนาตาง Play sound คลกปม Browse ดงลาดบในรปท 5.31 5. เลอกไฟลเสยงทเตรยมไว > คลก OK 6. กลบไปทหนาตางเวบเพจ จะเหนวาท Behavior ปรากฏคาสง Play Sound ใหเลอกเหตการณ (Event) แบบ on Load เพอใหเลนเสยงทนทเมอโหลดเวบเพจน (สามารถเลอกเหตการณตามความตองการ) ทาการบนทกไฟล แลวกด F12 เพอดตวอยาง

160

รปท 5.31 แสดงขนตอนใสเสยงในหนาเวบเพจ

การสรางความนาสนใจดวย Behavior ของโปรแกรม Dreamweaver8.0 ทนาสนใจยงมอกหลายแบบ โดยในโปรแกรม DreamweaverCS3 จะมการพฒนาขนมาก ขอใหนกเรยนไดตดตามและศกษาดวยตนเองเพมเตม สาหรบในการฝกใหเรยนรผสอนใชโปรแกรม Dreamweaver8.0 เพราะเหนวามเทคนค มากพอสมควรแลว สาหรบเปนพนฐานการเรยนรตอไป ทสาคญคอเครองทใชฝกในหองปฏบตของสถานศกษา จะมปญหาไดเมอลงโปรแกรมทใชหนวยความจา RAM มาก สาหรบนกเรยนทสนใจโปรแกรมทมสมรรถนะสง ในเวอรชนใหม ๆ ขอใหตรวจสอบเครองคอมพวเตอรของตนเองกอนวารองรบไดหรอไม เพราะโปรแกรมรนใหมจะตองใชหนวยความจา RAM ถง 1 GB หรอมากกวา

161

6. คาสงและการใชงาน CSS

CSS (Cascading Style Sheet) คอกลมของรปแบบ หรอสไตลทถกกาหนดไวเปนกลมเดยวกน และมการตงชอเพอใชเรยกแทนกลมรปแบบนน ๆ เมอเวบบราวเซอรเหนชอสไตล กจะทราบทนทวา จะตองแสดงรปแบบเนอหาเวบเพจออกมาอยางไร การสรางสไตลไวในเวบเพจเพยงหนาเดยว จะหมายถง “Internal Style” หรอสไตลของเวบเพจหนาน แตถาตองการนาสไตล จากเวบเพจหนงไปใชกบเวบเพจอน กทาไดดวยการบนทกเปน “ไฟลสไตล หรอทเรยกวา Cascading Style Sheet” ซงประกอบดวยหลาย ๆ สไตลรวมกนอยในเวบ เพจ ในหนวยการเรยนน จะแนะนาการสราง CSS แลวเกบบนทกไวเปนไฟลสไตล สาหรบนาไปใชในงานออกแบบเวบเพยง 2 สไตลโดยเลอกมาเฉพาะรปแบบททกเวบเพจตองใชแนนอน คอ สไตลของ Text หรอแบบตวอกษรซงจะนาไปใชในการใสเนอหา และกาหนดสไตลตวอกษรทใชลงค ซงนาไปใชกาหนดเมนลงคในเวบเพจไดทงหมด ดงน

1. การใชเครองมอ CSS กาหนด Text เครองมอสราง CSS เมอคลกเลอกปมสราง CSS จะมรายการใหเลอกใชงาน ดงรปท 5.32 แสดงรายละเอยดตามหมายเลข ดงน

1. ท CSS Panel คลกปม New CSS Style จะปรากฏกรอบโตตอบ “New CSS Style” 2. ในสวนของ Selector Typeใหเลอกรปแบบของสไตลทตองการโดยมรายละเอยด 2.1 Class เปนการสรางสไตลใหม จะมลกษณะเปน Class โดยสามารถนาไปใช กบ Tag ใด ๆ กไดในเวบเพจ ตงชอไดในชอง Name 2.2 Tag เปนการระบคาสง HTML ทตองการเปลยนรปแบบโดยสามารถเลอกไดท ชอง Tag 2.3 Advanced เปนสไตลทใชแกไขคณสมบตของ Tag บางชด และใชกาหนดลกษณะการ

ลงคได

162

รปท 5.32 แสดงการเรยก และกาหนดรปแบบ CSS

3. ทชอง Name / Tag / Selector ใหพมพชอ หรอเลอกรายการจากเมนทกาหนดโดย มรายละเอยดดงน 3.1 ถาเลอกรปแบบ Class ใหตงชอในชอง Name โดยชอจะตองขนตนดวย เครองหมายจด (.) เสมอ หากไมไดใสโปรแกรมจะใส ใหเองโดยอตโนมต 3.2 ถาเลอกรปแบบ Tag ใหเลอกทแทกทตองการแกไปจากเมน Tag 3.3 ถาเลอกรปแบบ Advanced ใหตงชอโดยไมตองขนตนดวยเครองหมายจด (.)หรอ เลอกลกษณะการเชอมโยงจากเมน Selector

4. ในสวนของ Define in เลอกไฟลทใชเกบสไตลท จะสรางโดยมรายละเอยดดงน 4.1 New Style File เปนการสรางสไตลชทใหมทมนามสกลเปน .CSS โดย จะเกบแยกจากไฟลสไตลเดมทมอย และสามารถ นาไปใชไดในทกเวบเพจ 4.2 This Document only เปนการเกบสไตลทสรางไวในไฟลทกาลงใชงานอย โดยสไตลทสรางสามารถเรยกใชงานไดเฉพาะไฟลน เทานน

163

5. จะปรากฏกรอบโตตอบ “CSS Style Definition” ใหกาหนดรปแบบตาง ๆ ท จะสรางสไตลโดยโปรแกรม Dreamweaver 8.0 มรปแบบใหเลอกกาหนดแบงออกไดดงน

5.1 Type ใชกาหนดคณสมบตของขอความ 5.2 Background ใชกาหนดสพนหลง หรอกาหนดรปภาพใหเปนพนหลง และ

สามารถกาหนดตาแหนงทตองการได 5.3 Block เปนการกาหนดการจดยอหนา การเวนวรรคระหวางตวอกษร

รวมถงการเวนวรรค ระหวางคา 5.4 Box ใชกาหนดระยะหางระหวางออบเจกต (ขอมล ตาราง รปภาพ และ

อน ๆ) รวมทงการจดวางตาแหนงของ ออบเจกตตาง ๆ ทเกยวของ 5.5 Border ใชกาหนดลกษณะของเสนกรอบ เชน ความกวาง ส ลกษณะของ

เสน โดยสามารถใชกบออกเจกตตาง ๆ ทเกยวของ 5.6 List ใชกาหนดลกษณ ะของรายการแบบมหวขอ โดยสามารถเลอก

รปแบบสญลกษณหรอนารปภาพทาเปนสญลกษณ รวมถงการจดตาแหสงการจดวางได

5.7 Positioning ใชกาหนดคณสมบตใหกบออบเจกต เชนการซอนและแสดง ขอมล

5.8 Extensions กาหนดคณสมบตอน ๆ การเลอกใชงาน เมอเลอกรายการใน Category แลวใหกาหนดรายละเอยดฝงดานขวาของแตละ รายการตามตองการ ดงตวอยาง การกาหนดแบบอกษร (Type) และแบบอกษรลงค ตอไปน ขนตอนการกาหนดรปแบบ สไตล CSS แบบอกษร เพอนาไปใชงาน มขนตอน คอ เรมทเลอก

ปม Add ในพาเนล CSS แลวเลอกรายการ ตามลาดบหมายเลขในรปท 5.33 ดงน หมายเลข 1 เลอกรปแบบ ในทนตองการกาหนดแบบอกษร เลอก Class

หมายเลข 2 ทชอง Name ใชตงชอไฟลใหมของสไตล CSS ทจะสรางแลวบนทกเกบไว หมายเลข 3 Define in ใหเลอกจะสรางไฟลใหมเกบไว หรอสรางใชเฉพาะเวบเพจน เลอก new หมายเลข 4 กาหนดเสรจ คลก OK หมายเลข 5 จะเขาหนาตางบนทก เพอบนทกไฟลสไตล CSS เกบ ใหตงชอท Name หมายเลข 6 คลก OK เพอบนทกไฟลสไตล ตวอยางนตงชอวา text1 มนามสกลเปน .CSS หมายเลข 7 จะเขาสการกาหนดรปแบบสไตล CSS ในทนเลอก Type เพอกาหนดแบบตวอกษร หมายเลข 8 รายการทตองกาหนดใหกบ Type ซงเลอกจากรายการดานซาย

164

รปท 5.33 แสดงตวอยางการสราง CSS กาหนด

เมอกาหนดครบ คลก Apply และ OK จะไดไฟลสไตล text1.CSS เกบ 1ไฟลมแบบอกษร 1

สไตล การกาหนดสไตลแบบอกษรตองเตรยมแบบไวหลายแบบ เพอใช เปนหวเรอง สวนเนอหา ทตองการเนน เนอหาทวไป การสรางกเกบในไฟลเดมในตวอยางน คอ text1.css ซงวธการสรางกเชนเดยวกนทกครงเพยง แตใน รายการแบบตวอกษรใหกาหนดแบบ หรอ ส ใหมทกครง

165

2. การใชเครองมอ CSS กาหนดสไตลเมนลงค ตวอกษรสาหรบเมนลงคจะตองสลบสไดเมอเมาสช การสราง สไตลทาได ดงลาดบหมายเลขในรปท 5.34 ดงน

1. เมอเลอกปม Add ในพาเนล CSS แลว เลอกรายการ Advanced 2. ท Selector เลอกรายการชอ Tag <a> ซงเปน Tag ลงคของ HTML ซงม 4 สถานะ คอ

a:link คอสถานะปกต เมอกาหนดใหมลงค a:visited คอสถานะแสดงวาลงคนผใชเคยใชแลว a:hover คอสถานะ เมอเมาสมาอยบรเวณเมน a:active คอสถานะกาลงทาการ ลงคหรอกาลงโหลด ในทกสถานะจะกาหนด สตวอกษรใหแตกตางกนแตขนาดตวอกษรรวมทงรายการอน ๆ สวน ใหญจะกาหนดให เหมอนกนเพอไมใหดเลอะ โดยการกาหนดจะทารายการท 1 – 7 ซ าจนครบทกรายกายกเวนขอท 4-5 การบนทกจะกระทาเพยงรอบแรกเทานน และทกรอบตองเรมตนทปม Add

เสมอ แลวจงปฏบตตามหมายเลข 1 - 7 ทกรอบ

166

รปท 5.34 แสดงการสรางรปแบบเมนลงค ดวย CSS

167

การตรวจสอบและเรยกใช สไตล CSS ทสรางขน เมอสรางสไตล CSS ตามตวอยาง ทกลาวมา นเปนการสรางแบบกาหนดเปนไฟล CSS ใหม

(Define in > New style sheet file) เราไดทาการบนทกเกบไวในโฟลเดอรทกาหนดไว เมอตองการเรยกมา ใชงานกสามารถเรยกไปใชไดในทกเวบเพจ ดกวาการกาหนดแบบ (Define in > This document only ซงจะใชไดเฉพาะเวบเพจนน ๆ การเรยกสไตล CSS ทสรางไวมาใชงานทาไดดงน

1. ทหนาตาง CSS > เลอก CSS Styles > All เลอกปมคาสง Attach External Style Sheet เพอเปดหนาตาง Attach External Style Sheet ดงรปท 5.35

รปท 5.35 แสดงการเปCSS ทสรางไวมาใชงาน

ดไฟล

2. ท หนาตาง Attach External Style Sheet ปฏบตตามลาดบ ดงน 1. เลอกปม Browse เพอเปด

ไฟลทสราง CSS ไวเชนในทนเลอกไฟล link.css > ตามลาดบหมายเลข 2 > หมายเลข 3 กาหนดการ ใชงาน (Add as) แบบ Link > และ 4. ตอบ OK ดงรปท 5.36

รปท 5.36 แสดงการเปดไฟล CSS และการกาหนดคาการเร

ยกใช

168

3. จะเหนวาในหนาตาง CSS มไฟลสไตล CSS ปรากฏขน เราสามารถด Code HTML ซงเขยนมาในรปแบบ ภาษา Java Script หากตองการแกไข เชน ขนาด ส ตวอกษรกสามารถ แกไขไดทง ในหนาตาง Code หรอ หนาตาง Properties CSS ดงรปท 5.37

รปท 5.37 แสดงไฟล CSS ทนามาใชงานพรอม หนาตาง Code สไตล CSS มรปแบบทโปรแกรมมมาใหอกหลายรายการ นกเรยนควรศกษาเพมเตมและทดลอง

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

169

7. คาสงและการใชงานการเชอมโยง (Link)

การเชอมโยง(Link) ถอเปนจดเดนของ เวบเพจทสามารถเชอมโยงหนาเวบตาง ๆ ถงกนได โดยภาพรวมแลวเราแบงการเชอมโยงเปน 2 ประเภท คอการเชอมโยงภายในเวบไซต และ การเชอมโยงภายนอกเวบไซต แตเพอใหงายตอการศกษาจะแบงตามลกษณะการใชงาน ซงแบงไดดงน

1. การเชอมโยงภายในเวบเพจเดยวกน 2. การเชอมโยงภายในเวบไซตเดยวกน 3. การเชอมโยงไปยงเวบไซตอน 4. การเชอมโยงดวยอเมล 5. การเชอมโยงไปยงไฟลดาวโหลด 6. การเชอมโยงดวย Map Link

การเชอมโยง หรอลงค จะตองออกแบบจดลงคหรอ ปมลงคใหนาด สวยงาม เพอใหสะดดสายตาผชม โดยเมอลากเมาสผานจะตองมเหตการณเชนรปภาพสลบได ตวอกษรเปลยนส เกดขน ซง นกเรยนสามารถศกษารปแบบไดจากหนาเวบไซตตาง ๆ แบบทใชสรางจดลงคหรอปมลงคบนหนาเวบจะใชหลายแบบ เชน ตวอกษรสลบส ปมสลบรปได โดยอาจมเมนคลออกมาเมอเมาสช เรยกวา Pop up Menu เปนตน ในทนจะแสดง ตวอยางการสรางปม 3 แบบ ดงน

1. การกาหนดลกษณะตวอกษร ลงคสลบส เมนแบบตวอกษรสลบสได ถอวาเปนแบบทใชมากทสด เพราะไมเสยเวลาสรางกราฟก ไมเปลองพนท โดยสามารถแปลงขอความทตองการใหลงคได เปนจดลงคแบบอกษรสลบสไดทงหมด วธสรางสามารถใชเครองมอพนฐานของโปรแกรม Dreamweaver จาก Page Properties ดงรปท 5.38 ดงน

ทหนาตาง Page Properties > เลอกรายการ Link > แลวกาหนดลกษณะในรายการ Link Link font คอ เลอกแบบตวอกษร (Font) Size คอ กาหนดขนาด ตวอกษร (Font) Link color คอ สตวอกษรในสถานะปกตเมอเปนจดลงคแลว Rollover Links คอ สตวอกษรในสถานะเมอนาเมาสมาอยในบรเวณจดลงค Visit Links คอ สตวอกษรในสถานะเมอมการเขาชมหรอลงคแลว Active Links คอ สตวอกษรในสถานะเมอกาลงโหลดขอมล Underline style คอ กาหนดใหมเสนใตตวอกษร หรอ ไมมเสนใต

170

รปท 5.38 แสดงการกาหนดสตวอกษรลงคจาก Page Properties

2. การกาหนดลกษณะตวอกษรลงคจาก CSS การสรางรปแบบตวอกษร CSS เปนจดลงค ศกษาไดจากหวขอ คาสงและการใชงาน CSS ทแนะนาแลว ใหกาหนดรปแบบ 4 สถานะ คอ a:link , a:visited , a:hover , a:active ดงรปท 5.39

รปท 5.39 แสดงการกาหนดสตวอกษรลงคจาก CSS

3. การสรางปมลงคจา กเทคนค Rollover image

171

Rollover image เปนเทคนคสรางภาพสลบได เมอนาเมาสมาอยเหนอบรเวณรปในทนเราจะ สรางรปมาใชเปนปม ตองใชโปรแกรมกราฟก เชน Photoshop สรางปมมา 2 รป(ในแตละป ม ) กอน ขนตอนวธการสรางปมลงค Rollover image มดงรปท 5.40 ดงน 1. เตรยมภาพปม 2 ภาพ (ขนาดเทากน ใหสตางกน หรออาจใชภาพท 1 เปนภาพนง ภาพท 2 เปนภาพเคลอนไหว นามสกล .gif กได )

2. คลกตาแหนงทจะวางป ม 3. เลอกคาสง Rollover Image แลวเลอกภาพ ตามตาแหนง ดงไดกลาวไวแลวในห วขอคาสงและ

การใช Behavior เรองการแทรกภาพ Swap Image กบ Rollover Image

รปท 5.40 แสดงการเลอกคาสงสรางปม Rollover Image

172

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

1. การเชอมโยงภายในเวบเพจเดยวกน การเชอมโยงภายในเวบเพจเดยวกน ใชกรณหนาเวบเพจมความยาวตองเลอน Scroll bar มาก จะชวยใหการคนหาเนอหางายขน ไมตองเสยเวลาเลอน Scroll bar มวธสราง ดงรปท 5.41 ดงน 1. สรางรายการเมนลงคทตองการใชคลกลงคไปยงหวขอเนอหา

2. กาหนด จดปลายทางหรอหวขอเนอหา ทจะลงคไป ซงอยในหนาเดยวกน

รปท 5.41 แสดงการกาหนดจดสรางลงคในหนาเวบเดยวกน

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

1. คลกเคอรเซอร ณ จดปลายทางทจะลงคไป 2. เลอกชดคาสง Common > เลอกทคาสง Named Anchor 3. ปรากฏหนาตาง Named Anchor ตงชอ (ในตวอยางใชชอ w0) 4. คลก OK จะปรากฏสญลกษณรปสมอ ดงหมายเลข 2 ในรปท 5.43

173

รปท 5.42 แสดงขนตอนการกาหนดชอจดลงค (Named Anchor)

ขนตอนการสรางลงคไปปลายทางทกาหนด มขนตอนตามหมายเลข ดง รปท 5.43

1. Drag ขอความทจะใชเปนลงค 2. ท Properties ตาแหนง Link พมพ # ตามดวยชอจด Named Anchor ทตงไว ในทนคอ

w0 > กด Enter > เสรจแลวทดสอบการลงค (กด F12)

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

174

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

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

2. รายการคาสง Link ท Properties คลกเมาสในชองรายการ Link แลวเครองหมาย Pointer > ลากเมาสไปยงไฟลเปาหมายทจะลงคซงอยในโฟลเดอรเดยวกน ในพนทของ File Panel ดานขวา จะ-ปรากฏชอไฟลเปาหมายในชองลงคทนททปลอยเมาส 3. แสดงไฟลเปาหมายใน File Panel ซงเราตองกาหนด Site ทางานในโปรแกรมไวตงแตเรมตน ออกแบบ 4. กาหนด Target แสดงผลหนาตางวนโดวทจะเปดไฟลทลงคขนมา เสรจแลวบนทก และ กด F12 ทดสอบผล

รปท 5.44 แสดงขนตอนการ สรางลงคในเวบไซตเดยวกน

175

3. การเชอมโยงไปเวบไซตอน การสรางเวบไซตขนมาจะตอง มเวบไซตทสามารถอางองค หรอจดไวบรการแกผเขามาชม

เวบไซต จงตองสรางลงคไปยงเวบไซตอน ๆ ไว มขนตอน ดงรปท 5.45 1. Drag หรอคลกตาแหนงเมน จดทจะสรางลงค

2. รายการคาสง Link ท Properties คลกเมาสในชองรายการ Link แลวพมพ Url ของเวบไซตนน ๆ ลงในชองลงคใหครบสมบรณ ดง ในตวอยาง เปนเวบไซตของ Adobe Dreamweaver: http://www.adobe.com/products/dreamweaver/ หรอใชวธ Copy Url เวบไซตเปาหมายมาใสกไดจะได ถกตองแนนอนกวาการพมพ 3. กาหนด Target แสดงผลหนาตางวนโดวทจะเปดไฟลทลงคขนมา เสรจแลวบนทก และกด F12 ทดสอบผล

รปท 5.45 แสดงขนตอนการสรางลงคในเวบไซตอนๆ

176

4. การเชอมโยงดวยอเมล การเชอมโยงอเมล ทาไวเพอใชในการตดดวยอเมล ซงสวนใหญทาไวเพอใหผใช ตดตอกบ

ผควบคมเวบไซต(Admin) หรอผสอนกรณ เปนการใชบทเรยนผานระบบอนเทอรเนต การเชอมโยงดวยอเมลในโปรแกรม Dreamweaver ทาไดตามขนตอน ดงรปท 5.46

1. Drag หรอคลกตาแหนง รายการเมน จดทจะสรางลงค 2. รายการ Common เลอกคาสง Email Link 3. จะปรากฏหนาตาง Email Link ใหกรอกตามรายการ ชอง Text จะมขอความทเรา Drag ตาแหนงไวโดยอตโนมต ชอง E-mail ใหใส E-mail ของปลายทางทตองการใหผใชตดตอ > คลก OK 4. ท Properties ในรายการ Link จะปรากฏขอความ Mailto: ชอ E-mail ทกรอกไว 5. กาหนด Target แสดงผลหนาตางวนโดวทจะเปดไฟลทลงคขนมา เสรจแลวบนทก และกด F12 ทดสอบผล

รปท 5.46 แสดงขนตอนการสรางลงคไปยง อเมล

177

5. การเชอมโยงไปยงไฟลดาวโหลด ในเวบไซตอาจมขอมล เชน ไฟล หรอโปรแกรม ทตองการใหผเขาชมดาวนโหลดไปใชหรอ

อาจเปนเพราะไฟลนนม ขนาดใหญไมสามารถใชลงคเขา ดได เพอความสะดวกเราจะใชวธใหผรบชมโหลดไฟลนนไปเปดดหรอใชงานไดใน เครองของตนเอง

การสรางจะตองมไฟลเตรยมไวในเวบไซต หรอโฟลเดอรกอน ขอ แนะนาใหทาการซปไฟลไวจะดทสดเพราะจะมปญหานอย ไฟลมขนาดเลก ทสาคญระวงเรองไวรส หากไฟลทซปหรอไมไดซป มไวรส เวลาดาวนโหลดไปจะมปญหาเปดไมได โดยท Server หรอโปรแกรม Firewall ของระบบจะทาการบลอก หรอทาลายทงกอน ขนตอนสรางก ารเชอมโยงไฟลดาวนโหลดทาได ดงรปท 5.47

1. สรางรายการเมน เชน บอกวา > Download File หรอ ดาวนโหลดขอมล > Drag ขอความรายการลงคใหเปนสดา

2. ท Properties ในรายการ Link คลกปม Browse เพอเลอกไฟลทเตรยมไว 3. คลกเลอกไฟลทตองการใหดาวนโหลด 4. คลก OK 5. จะปรากฏรายการตาแหนงไฟลทลงคไป กดปม Enter ทาการ save แลวทดสอบ กด F12 เพอ

ดผลการทางาน

รปท 5.47 แสดงขนตอนการสรางลงคไปยง ไฟลดาวนโหลด

178

6. การเชอมโยงดวย Map Link Map Link เปนการกาหนดพนทในภาพ ใหลงคไดเหมอนการสรางจดเชอมโยง ทวไป

ในโปรแกรม Dream weaver8.0 การสรางลงคมขนตอน ดง รปท 5.48 และ 5.49 1. นาภาพมาใสในตาแหนงทตองการแลวคลกทภาพนน 2. ท Properties ตาแหนง Src ปรากฏรายละเอยดของไฟลรปภาพทกาลง ถกคลก 3. เครองมอวาด Map Link มมาให 3 แบบ ใหคลกเลอกแบบเพอนามาวาดคลมพนท

รปท 5.48 แสดงขนตอนการสราง Map Link

4. แสดงการวาดพนท Map Link ทรป ดงรปท 5.49 5. ทตาแหนง Link ปรากฏเครองหมาย # ใหพมพ Url หรอ เลอกไฟลทตองการลงคไปถง 6. Target = เลอกแบบการเปดหนาเวบ 7. Alt = พมพขอความทตองการใหแสดง (ปายเหลอง) เมอนาเมาสชบรเวณจดลงค > กดปม Enter > Save > และกด F12 เพอทาการทดสอบผล

รปท 5.49 แสดงขนตอนการสราง Map Link

179

การสรางจดเชอมโยงหรอจดลงคในหนาเวบเพจ ถอเปนงานสาคญทผออกแบบทกคนตองสรางใหได เทคนคการสรางแตละแบบ ผออกแบบตองเลอกใชใหเหมาะสม ทงนตองไมลมวางานหลกของ การสรางเวบคอเนอหาในเวบ จดลงคเปนเพยงเครองอานวยความสะดวกในการใชงานเทานน ในการ สรางเวบระดบมออาชพอาจมการลงทนซอเครองมอ หรอโปรแกรมสรางทมเครองมออานวยความสะดวกตอการสรางสวนประกอบ เหลาน ซงมผเขยนชดคาสงหรอสครปต แบบ Object สาเรจ หรอ Plug in ขายอยแลว การลงทนซอเพอสรางงานไดเรว มคณภาพ โดยทเราไมตองเสยเวลาสรางคาสง เพอนาเวลาไป ใชคดสรางเนอหา จะคมคากวามาก ดงนนโดยแนวคดนจง ขอใหนกเรยนไดพยายามคนควา เรยนรเครองมอสรางเวบใหมากทสด เพอเวลาใชงานจะไดเลอกใชงานไดอยางเหมาะสม

สรปบทเรยน การตกแตงสรางความนาสนใจ และการสรางจดเชอมโยงใหแกเวบเพจ ถอเปนกระบวนการ ในขนตอนการสรางนาเวบอยางแทจรง เพราะการออกแบบ งานใหสวยนาด ม ความเหมาะสมกบการใชงาน ไดจรงถอเปนสง สาคญในกระบวนการผลต การสรางเวบเพจ ตองมเทคนคใหผชมเกดความนาสนใจ มการโตตอบ ใหเกดความอยาก ตดตาม ทสาคญคอผลงานเมอนาไปใชงานบนอนเทอรเนต จะมผเขาชมทมระดบความร ความสามารถแตกตางกน เขามาชมผลงานของเราไดทงสน ดงนนการออกแบบหนาเวบเพจจงตองมความรอบคอบ ผลงานมมาตรฐาน การฝกฝนจงเปนสงสาคญ เพราะปญหาในการสรางเวบเพจมปญหาทตองแกไข ตลอดเวลา ความสามารถในการทางานจะไดจากประสบการณทปฏบตมาก การพฒนาจะเกดมากขนไปตามลาดบ

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

180

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

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

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

1. ไฟลรปภาพ ทนามาใชในเวบเพจม ไฟลนามสกลอะไรไดบาง …………………………………………………………………………………………….. 2. ไฟลรปภาพทนามาใชบนเวบควรมขนาดความจไมเกนเทาใด เหตผลเพราะอะไร .............................................................................................................................................. 3. เราสามารถใชคาสงสราง ตารางในโปรแกรม Dreamweaver 8.0 ไดกวธ วธใดบาง .............................................................................................................................................. …………………………………………………………………………………………….. 4. ใหอธบายการใสส ตาราง กบ ใสสในเซลลตาราง มาใหเขาใจ .............................................................................................................................................. .............................................................................................................................................. 5. การใสรปภาพ Rollover Image และ Swap Image เหมอนและตางกนอ ยางไร …………………………………………………………………………………………….. 6. ใหยกตวอยางการสรางความนาสนใจดวยคาสง Behaviors มา 3 วธ ............................................................................................................................................. 7. ตองการสรางรปแบบขอความลงคดวย CSS ตองเลอกแบบใน Selector Type เปนแบบใด .............................................................................................................................................

8. ในพาเนลเครองมอสราง CSS ตามรป ปมเครองมอทลกศรช หมายถง เครองมอใชทาอะไร.............................................................................................................. .............................................................................................................................................. 9. ใหบอกการสรางจดเชอมโยงในหนาเวบเพจ มา 4 แบบ ……………………………………………………………………………………………… ……………………………………………………………………………………………… 10. การใชรปภาพเปนจดเชอมโยง(ลงค) ชอภาษาองกฤษ เรยกวา............................................... ................................................................................................................................................

181

อางอง กตต ภกดวฒนะกล , 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