หน่วยที่ 5 การตกแต่งความน่าสนใจ...
DESCRIPTION
หน่วยที่ 5 การตกแต่งความน่าสนใจ และสร้างจุดเชื่อมโยงบนเว็บเพจTRANSCRIPT
หนวยการเรยนท 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