ใบความรู้ - weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf ·...
TRANSCRIPT
![Page 1: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/1.jpg)
ใบความร
หนวยการเรยนรท 1
พนฐานการสรางเวบไซต
![Page 2: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/2.jpg)
ความรเบองตนเกยวกบอนเตอรเนต อนเตอรเนต (Internet) เปนเครอขายคอมพวเตอรทใหญทสดในโลกซงรวมเอาเครอขายยอยเปน
จ านวนมากตอเชอมภายใตมาตรฐานเดยวกนจนเปน เครอขายคอมพวเตอรขนาดใหญ ท าใหทวโลกเชอมโยงกน เปนเครอขายเดยวกนไดในแพลตฟอรมของ เวลด ไวด เวบ (World Wide Web)
ลกษณะของเวลด ไวด เวบ (World Wide Web) เวลด ไวด เวบ (World Wide Web – www) หรอเรยกยอ ๆ วา เวบ (web) เปนอนเตอรเนตชน
หนง ทอยในรปแบบของกราฟกและมลตมเดย ซงประกอบดวยขอความ (Text) ภาพ (Graphic) เสย (Sound) และ ภาพเคลอนไหว (Movie) เปนตนผใชทวไปสามารถเขาไปในเวบไดงาย และจะไดรบขอมลครบถวนปจจบน ถาพดถงอนเตอรเนต คนทวไปจะเขาใจวาหมายถงเวบ ทงทจรงแลวเวบเปนสวนหนงของอนเตอรเนตเทา นน
เวบไซต (Website) และเวบเพจ (Webpage) เอกสารหรอสวนทตดตอกบผใชในเวบ เรยกวา เวบเพจ (Webpage) หมายถงเอกสารหนงหนา การ
ใชเวบกคอการเปดอานหรอเปดใชเวบแตละหนานนเอง เวบเพจอาจสรางขนดวยภาษาคอมพวเตอร เชน HTML, ASP, PHP, JAVA ฯลฯ
เมอน าเวบเพจหลาย ๆ หนามารวมกน และระบอยในอนเตอรเนต หรอ ยอารแอล (Uniform Resource Locator – URL) ใหกบเวบเพจกลมนนจะเรยกวา เวบไซต (Web Site)
เมอเปดเวบไซตขนมาจะพบกบหนาแรกของเวบไซต ซงเรยกวาโฮมเพจ (Homepage) ซงเปนหนาท ส าคญทสดและเปนหนาทจะเชอมโยงไปยงเวบเพจและเวบไซตอน ๆ
เวบเบราเซอร (Web Browser) เเวบเบราเซอร (Web Browser) คอโปรแกรมทใชส าหรบเปดเวบเพจหรอ รบสงขอมลตามทเครองลกขายรองขอเมอเราเปดเขาสอนเตอรเนต เวบเบราเซอรทไดรบความนยมปจจบนมหลายโปรแกรม เชน Microsoft Internet Explorer (IE), Mozilla Firefox, Opera, และ Google Chrome
![Page 3: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/3.jpg)
สรปเวบเพจ เวบไซต และโฮมเพจ
![Page 4: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/4.jpg)
ภาษา HTML ภาษา HTML ยอมาจากค าวา Hypertext Markup Language เปนภาษาทใชส าหรบสรางเวบเพจ
โดยจะไดรบการแปลหรอการแสดงผลโดยเวบ เบราเซอรซงสามารถแสดงไดทงขอความ ภาพ และเสยง
โครงสรางหลกของภาษา HTML ในไฟลเอกสาร HTML ประกอบดวย สองสวนใหญๆ คอ สวนหว HEAD และ สวนตว BODY
1) Tag <HTML> และ </HTML> จะอยบรรทดแรก และ บรรทดสดทาย ในไฟล HTML เสมอ เปน Tag ทบอกใหรวา ขอความ หรอ Tag ทอยระหวาง 2 Tag น เปนแบบ HTML
2) Tag <HEAD> และ </HEAD> สวนนจะไวใส รายละเอยดตาง ๆ เชน Tag<TITLE>TodayLoad.com</TITLE> ไวใสขอความทตองการใหปรากฎอยบน ไตเตลบาร เปนตน
3) <BODY ....... > ขอความทปรากฎอยตรงชวงจดไขปลา 4) Tag <BODY> และ </BODY> ขอความ หรอ Tag ทอยระหวาง 2 Tag น เปนสวนของเนอหา
โดเมนเนม (Domain Name) โดเมนเนม (Domain Name) หรอทเขาใจกนทวไป คอ ชอเรยกเวบไซตนนเอง การจดทะเบยน
โดเมนเนมจงเปนการลงทะเบยนชอใหกบเวบไซตของเราในโลกอนเตอรเนต โดเมนเนมทขอจดทะเบยนจะตองไมซ ากบคนอน และควรตงใหเกยวของกบเนอหาภายในเวบไซต หรอเกยวของกบสนคาและบรการ ตลอดจนใชค างาย ๆ ใหจ าได เชน sanook.com และ yahoo.com เปนตน
![Page 5: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/5.jpg)
ความหมายของซบโดเมน
![Page 6: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/6.jpg)
หลกการออกแบบเวบไซต หลกการออกแบบเวบไซตสามารถแบงออกเปนขนตอนตาง ๆ เพอใหเหมาะสมกบผเรมตนใชเปน
แนวทาง ในการสรางและพฒนาเวบไซต - การวางแผน
การวางแผนนบวามความส าคญมากในการสรางเวบไซต เพอใหการท างานในขนตอนตาง ๆ มแนว ทางทชดเจนและสามารถปฏบตไดตามทตงเปาไว ซงประกอบดวย
- การก าหนดเนอหาและจดประสงคของเวบไซต การก าหนดเนอหาและจดประสงคของเวบไซตทจะสราง นบเปนสงส าคญอยางมากในการเรมตนสรางเวบไซตเลยทเดยว เพอใหเหนภาพวาเราตองการน าเสนอขอมลแบบใด เชน เวบไซตเพอใหขอมลขาวสาร การบรการดานตาง ๆ หรอขายสนคา เปนตน เมอสามารถก าหนดจดประสงคของเวบไซตไดแลว เงอนไขเหลานจะเปนตวก าหนดโครง สรางรปแบบรวมถงหนาตา และสเวบไซตของเราดวย
- การก าหนดกลมเปาหมาย เพอใหการสรางและออกแบบเวบไวตไดรบความนยม การก าหนดกลมเปาหมายในการเขาชมเวบไซตกนบวามสวนส าคญไมนอย เชน เวบไซตส าหรบเยาวชน นกเรยน นกศกษาในการคนหาขอมล หรอเวบไซตส าหรบบคคลทวไปทเขาไปใชบรการตาง ๆ เปนตน
- การเตรยมขอมล เนอหาหรอขอมลจดวาเปนสงทเชญชวนใหผอนเขามาเยยมชมเวบไซต และตองทราบวาขอมลขาวสารตาง ๆ สามารถน ามาจากแหลงใดบาง เชน การคดน าเสนอขอมลดวยตวเอง หรอน าขอมลทนาสนใจมาจากสออน เชน หนงสอพมพ แมกกาซน เวบไซต และทส าคญ ขออนญาตเจาของบทความกอนเพอปองกนเรองลขสทธดวย
- การเตรยมสงตาง ๆ ทจ าเปน ในการออกแบบเวบไซตตองอาศยความสามารถตาง ๆ เชน โปรแกรมส าหรสราง เวบไซต ภาพเคลอนไหว มลตมเดย การจดโดเมนเนม การหาผใหบรการรบฝากเวบไซต (Web Hosting) เปนตน
- การจดโครงสรางขอมล เมอไดขอมลตาง ๆ เชน ก าหนดเนอหาและจดประสงคของเวบไซต การก าหนดกลมเปาหมาย การเตรยมขอมล การเตรยมสงตาง ๆ ทจ าเปนจากขนแรกเรยบรอยแลว ในขนตอนน เราจะจดระบบเพอใชเปนกรอบส าหรบการออกแบบและด าเนนการในขนตอนตอไป ซงมรายละเอยด ดงน • โครงสรางและสารบญของเวบไซต • การใชระบบน าผเขาชมไปยงสวนตาง ๆ ภายในเวบไซตหรอทเราเรยกวาระบบน าทาง (Navigation) • องคประกอบทตองน ามาใช เชน สอมลตมเดย ภาพกราฟก แบบฟอรมตาง ๆ • การก าหนดรปแบบและลกษณะของเวบเพจ • การก าหนดฐานขอมล ภาษาสครปตหรอแอปพลเคชนทน ามาใชในเวบไซต • การบรการเสรมตาง ๆ • การออกแบบเวบไซต
![Page 7: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/7.jpg)
นบเปนขนตอนในการออกแบบรปราง โครงสรางและลกษณะทางดานกราฟกของหนาเวบเพจโดย โปรแกรมทเหมาะสมในการออกแบบคอ Photoshop หรอ Fireworks ซงจะชวยในการสรางเคาโครงของหนาเวบและองคประกอบตาง ๆ เชน ชอเวบไซต โลโก รปไอคอน ปมไอคอน ภาพเคลอนไหว แบนเนอรโฆษณา เปนตน ในการออกแบบเวบไซตนนยงตองค านงถงสสนและรปแบบของสวนประกอบตาง ๆ ท ไมใชภาพกราฟก เชน ขนาดของตวอกษร สของขอความ สพน ลวดลายของเสนกรอบเพอความสวยงามและดงดด ผเยยมชมดวย
![Page 8: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/8.jpg)
สวนประกอบของหนาเวบเพจ เราสามารถจ าแนกสวนประกอบของหนาเวบเพจ เปน 3 สวน ดงน
1. สวนหว (Page Header) จะอยบรเวณบนสดของหนาเวบเพจ เปนสวนทแสดงชอ เวบไซต โลโก แบนเนอรโฆษณาลงกส าหรบขามไปยงหนาเวบอน
2. สวนเนอหา (Page Body) อยบรเวณตอนกลางของหนาเวบเพจ ซงเปนสวนทแสดงเนอหาภายใน
หนาเวบเพจนน โดยประกอบดวยขอความ ขอมล ภาพเคลอนไหว เปนตน
![Page 9: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/9.jpg)
3. สวนทาย (Page Footer) อยบรเวณดานลางสดของหนาเวบเพจ สวนมากใชส าหรบลงกขอความสนๆ เขาใจงาย หรอจะมชอเจาของเวบไซต อเมลแอดเดรสของผดแลเวบไซตส าหรบตดตอกบทางเวบไซต
สรปสวนประกอบของหนาเวบเพจ
![Page 10: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/10.jpg)
แนวคดในการออกแบบ - ดจากเวบไซตอนเพอเปนตวอยาง การดจากเวบไซตอนบนอนเตอรเนตเพอศกษาเปนตวอยางนน
นบเปนวธการทงายทสด แตกควรน าไปประยกตใชใหเหมาะสมกบเนอหาและกลมเปาหมายของเราดวย - ศกษาจากสอสงพมพในรปแบบตางๆ สอสงพมพในทน ไดแก แมกกาซน โปสเตอรโฆษณา โบรชวร
หรอหนงสอบางเลมทมรปแบบและจดดงดดความสนใจ สามารถน ามาประยกตใชในเวบไซตของเราไดเชนกน
![Page 11: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/11.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 2
การเรมใชงาน Dreamweaver CS5
![Page 12: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/12.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การเรยกใชโปรแกรม 1. คลก ปม Start > All Programs > Adobe Dreamweaver CS5 2. จากนนเขาสหนาจอโปรแกรม
![Page 13: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/13.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
สวนประกอบของ Welcome Screen จะแบงเปน 3 กลม หลกๆ ดงน
1. เปดไฟลงานเกาทเคยเรยกใชงาน ใชส าหรบเปดงานเกาทเคยเรยกใชงาน โดยโปรแกรมจะแสดง
รายชอไฟลทเคยใชทงหมด (เรยงล าดบจากทเปดลาสดเปนตนไป) แตถาเปนการเปดโปรแกรมขนมาครงแรกและยงไมเคยเรยนใชงานใดๆ จะไมแสดงชอไฟลขนมาในสวนน โดยการเรยกงานเกาสามารถท าไดโดยคลกเลอจากรายชอไฟลทแสดงอยหรอคลกปม Open… เพอเปดไฟลอนทตองการขนมาได
2. สรางงานใหม ในสวนนใชส าหรบสรางไฟลงานใหม ซงสามารถเลอกสรางไฟลไดหลายชนด ไมวาจะเปนไฟล HTML, PHP, ASP, และ JavaScript เปนตน
3. สรางานส าเรจรป เปนการสรางเวบเพจใหมโดยใชไฟลตวอยางทโปรแกรมจดเตรยมเอาไวให หรอทเรยกกนวา เทมเพลต (Template) ซงมใหเลอกใชมากมาย
![Page 14: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/14.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
สวนประกอบหนาจอโปรแกรม
แถบเมนหลก เปนแถบรวบรวมค าสงทงหมดของโปรแกรม Dreamweaver CS5 เอาไว โดยจะแบง
ค าสงทงหมดออกเปนหมวดหมตามลกษณะการใชงาน เพอใหสะดวกตอการท างาน ซงภายในแตละหมวดหมของค าสง จะประกอบไปดวยค าสงยอยทเกยวของกน
แถบเครองมอ Insert Bar เปนแถบรวมเครองมอซงใชในการวางออบเจกตตางๆ ลงบนเวบเพจ เชน ขอความ รปภาพ ลงก และภาพเคลอนไหว โดยแบงเปนกลมค าสงเพอใหใชงานไดสะดวก ซงบางกลมสงจะมเมนยอยอยภายใน โดยมลกศรเลกๆ อยดานขางปมนน
![Page 15: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/15.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
พนทสรางงาน 1. มมมองออกแบบ มมมองนสามารถแกไขและจดการเนอหาตางๆ ลงบนเวบเพจได ซงจะแสดงผล
บนเวบเพจคลายกบเปดบนเบราเซอร
2. มมมองโคด มมมองนใชส าหรบเปดดสรปตค าสงภาษาตางๆ ของเวบเพจ เชน HTML, PHP, ASP, และ JSP ซงสามารถตรวจสอบและแกไขค าสงตางๆ ไดตามตองการ โดยการแกไขจะสงผลกลบไปยงมมมองออกแบบ โดยอตโนมต
![Page 16: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/16.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. มมมองโคดและออกแบบ มมมองนจะแสดงทงแบบมมมองออกแบบ และมมมองโคดพรอมกนเมอคลกมมมอง Split จะแบงพนทสรางงานออกเปน 2 สวน คอ สวนหนาตางโคด และสวนมมมองออกแบบ นอกจากนนยงสามารถปรบขนาด พนทของแตละสวนได โดยการคลกลากทเสนแบงระหวางทง 2 สวนน
แถบทลบาร แถบเครองมอทรวบรวมปมค าสงทจ าเปนหรอใชงานบอยเอาไว สามารถเปด/ปดการใชงานได
หนาตาง Properties Inspector เปนหนาตางเลกๆ ทอยดานลางสดของหนาจอโปรแกรม เปนสวนทใชงานมากทสด เนองจากใชก าหนด เนองจากใชก าหนดคณสมบตส าคญๆ ของออบเจกตทวางในหนาเวบเพจ เชน ขนาด ต าแหนง และส เปนตน ทงนรายละเอยดและคณสมบตของออบเจกตแตละตวจะเปลยนแปลงตลอดเวลา ขนอยกบวาขณะนนก าลงเลอกออบเจกตใด
![Page 17: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/17.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
กลมหนาตางพาเนล เปนหนาตางทรวบรวมเครองมอตางๆ ไวเปน
กลมตามหนาททเกยวของ เพอชวยใหท างานสะดวกขน เชน พาเนล File กจะมค าสงใชส าหรบจดการไฟล และโฟลเดอรภายในเวบไซตทงหมด เปนตน ซงทกพาเนลจะแสดงอยบรเวณดานขวาของโปรแกรม สามารเปดหรอปดพาเนลไดโดยเลอกค าสง Windows แลวเลอกชอพาเนลนน
แถบสถานะ เปนแถบทอยดานลางของวนโดว Document ซงประกอบดวย 2 สวน คอ ดายซายเปน Tag Selector สวนดานขวาเปนเครองมอตางๆ โดย Tag Selector ประกอบดวย Select ใชส าหรบเลอกออบเจกตบนเวบเพจ เชน ขอคสาม รปภาพ เปนตน เมอคลกเลอกออบเจกตจะแสดงกรอบสด าลอมรอบออบเจกตทเลอก Hand ใชส าหรบเลอนเวบเพจ Zoom ใชส าหรบคลกเลอกหรอลากเพอขยาย หรอ Alt+ คลกเพอยอมมมอง
![Page 18: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/18.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เตรยมโฟลเดอรส าหรบเวบไซต ควรเตรยมสวนประกอบของเวบไซตใหพรอมเสยกอน โดยสวนประกอบหลกในเวบไซต มดงน
- ไฟลเนอหา - ไฟลรปภาพ - ไฟลมลตมเดย - ไฟลสครปต หลงจากนนจงสรางโฟลเดอรขนมาใหม เพอจดการสวนประกอบของเวบไซตใหเปนหมวดหมไมปะปน
กน ดงนนจงควรวางแผนลวงหนาวาจะจดเกบไฟลไวในโฟลเดอรอยางไรบาง ตวอยางโครงสรางภายในโฟลเดอรมดงน
![Page 19: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/19.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
สราง Define Site เพอจดระบบใหขอมล เมอเตรยมโฟลเดอรเพอจดเกบขอมลทงหมดทจะใชในการสรางเวบไซตเรยบรอยแลว ขนตอนตอไปคอ การท าใหโปรแกรม Dreamweaver รจกและเขาใจโฟลเดอรทสรางวาเปนเวบไซตของเรา ซงสามารถท าไดโดยการสราง Define Site ตามขนตอนตอไปน
1. คลกลงก Manage Sites ทพาเนล Files (หรอคลกค าสง Site > New Site)
2. คลกปม New… ทหนาตาง Manage Site 3. คลกแทบ Site 4. ตงชอเวบไซตทชอง Site Name
5. คลกปม เพอเลอกโฟลเดอรทเกบไฟลงาน
![Page 20: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/20.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
6. เลอกโฟลเดอรทตองการ แลวคลกปม Open
7. คลกปม Select
![Page 21: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/21.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
8. คลกปม Save ทหนาตาง Site Setup for My_Site
9. คลกปม Done ทหนาตาง Manage Sites
![Page 22: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/22.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การแกไขไซตทสรางไวแลว 1. คลกเมน Site > Manage Sites
2. เลอกชอไซตทตองการ 3. คลกปม Edit… จากนนหนาตาง Site Setup for… จะปรากฏขนมา เราสามารถแกไขการก าหนดคาตางๆ ไดโดยมวธคลายกบการก านหดคาไซตใหม 4. เมอแกไขเสรจแลว คลกปม Done
![Page 23: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/23.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ท าความรจกกบพาเนล นอกจากจะสรางไซตไวในพาเนล Files เรายงสามารถจดการกบไฟลตางๆ โดยผานพาเนล Files ไดไมวาจะเปนการสรางโฟลเดอร สรางเวบเพจใหม เปดเวบเพจ กอบปไฟล หรอแมแตเปลยนชอไฟล ซงการเปด /ปดพาเนล Files ท าไดโดยคลกเมน Windows > Files (หรอกด F8) สรางโฟลเดอรยอยไวเกบไฟล เราสามารถสรางโฟลเดอรยอยส าหรบจดเกบไฟลตางๆ ใหเปนหมวดหมได เชน ไฟลรปภาพ ไฟลเสยง ไฟลสครปต เปนตน โดยมขนตอน ดงน 1. คลกขวาบนโฟลเดอรหลก แลวเลอกค าสง New Folder
2. พมพชอโฟลเดอรยอยแลวกด Enter
![Page 24: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/24.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 3
การจดเลยเอาตเวบเพจดวยตาราง
![Page 25: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/25.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
รจกกบโครงสรางของตาราง กอลงมอสรางเวบเพจดวยตารางนน เราควรท าความรจกกบโครงสรางของตารางเสยกอน โดยประกอบดวย - คอลมน (Column) - แถว (Row) - เซลล (Cell) ซงเปนสวนทจะน าขอความหรอรปภาพเขาไปใส
![Page 26: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/26.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
วางแผนกอนสรางตาราง หลงจากออกแบบหนาเวบแตละหนาแลว สงส าคญตอมาคอการสรางเวบเพจ ซงเราจะใชวธจด เลยเอาตเวบเพจดวยตาราง ดงนน อนดบแรกตองรกอนวาเวบเพจของเราควรมกแถว กคอลมน
- เวบเพจควรมกแถว การก าหนดวาเวบเพจควรมกแถวนนไมมกฎตายตว ขนอยกบหนาเวบเพจนนๆ ซงจากตวอยางทไดออกแบบไวแบงออกเปน 4 แถว ดงน แถวท 1 ส าหรบวางโลโก และภาพประกอบ แถวท 2 ส าหรบวางเมน แถวท 3 ส าหรบเมนยอย เนอหา สวนคนหา และปายโฆษณา แถวท 4 ส าหรบแสดงขอความลขสทธและผจดท า
![Page 27: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/27.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
- เวบเพจควรมกคอลมน ส าหรบการพจารณาจ านวนคอลมนจะแตกตางจากจ านวนแถว เนองจากในแตละแถวอาจจะมจ านวนคอมลมนไมเทากน ดงนนเราควรแบงคอลมนตามคอลมนหลก หรอใชวธสรางตารางซอนในแถวทแบงคอลมน ซงในทน จะใชวธการสรางตารางซอน จากการออกแบบจะพบวาแถวท 2 สามารถแบงได 3 คอลมน ดงน คอลมนท 1 ส าหรบวางเมนยอย คอลมนท 2 ส าหรบแสดงเนอหา คอลมนท 3 ส าหรบแสดงสวนคนหา และปายโฆษณา
![Page 28: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/28.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ลงมอสรางตารางส าหรบเวบเพจ เมอรแลววาจะตองสรางตารางจ านวน 4 แถว และ3 คอลมน กเรมสรางตารางส าหรบจดเลยเอาต เวบเพจได ดงน
1. ด 2. บเบลคลกไฟลชอ index.html หรอสรางเวบเพจใหม
2. วางเคอรเซอรตรงต าแหนงทจะสรางตาราง
3. คลกแทบ Common ในแถบ Insert Bar
![Page 29: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/29.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
4. คลกค าสง Table เพอสรางตาราง
จากนนจะปรากฎไดอะลอกบอกซ Table ขนมา ใหก าหนดคณสมบตของตารางทจะสราง 5. ก าหนดจ านวนแถวในชอง Rows ส าหรบตวอยางจ านวน 4 แถว 6. ก าหนดจ านวนคอลมนในชอง Columns ส าหรบตวอยางจ านวน 3 คอลมน 7. ก าหนดขนาดของตารางในชอง Table width ซงขนาดของตารางในทนคอ ขนาดความกวางของเวบเพจทออกแบบ 8. เลอกหนวยของตาราง 9. ก าหนดความหนาของเสนตารางทชอง Border thickness (ถาไมตองการแสดงเสนขอบตารางใหก าหนดเปน 0) 10. ก าหนดระยะหางระหวางของเซลลกบเนอหาภายในเซลลทง 4 ดาน ทชอง Cell padding 11. ก าหนดระยะหางระหวางแถวและคอลมน ทชอง Cell spacing 12. คลกปม OK
![Page 30: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/30.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
![Page 31: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/31.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนจะไดตารางตามจ านวนแถวและคอลมนทก าหนด ดงรป
![Page 32: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/32.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
วธเลอกสวนตางๆ ในตาราง เมอตองการน าขอความหรอรปภาพเขามาใสในตาราง สงแรกทตองท าคอ การเลอกสวนของตารางทตองการกอนไมวาจะ ตาราง เซลล แถว และคอลมน
เลอกตารางทงหมด สามารถท าได 2 วธ วธท 1 ชเมาสทมมใดมมหนงของตาราง (เมาสเปนรป ) แลวคลกเมาส
วธท 2 คลกเมาสขวาบนเซลลในตารางแลวเลอกค าสง Table > Select Table
![Page 33: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/33.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เลอกเซลล - เลอกเซลลเดยว ท าไดโดยคลกวาเคอรเซอรภานในเซลลทตองการ - เลอกหลายเซลลตอเนองกน ท าได 2 วธ วธท 1 ชเมาสทเซลลแรก จากนนคลกลากคลมเซลลทตองการ วธท 2 คลกเซลลแรก จากนนกด Shift ทคยบอรดคางไว แลวคลกเซลลสดทาย
- เลอกหลายเซลลไมตอเนองกน ท าไดโดยกด Ctrl ทคยบอรดคางไว แลวคลกเลอกแตละ เซลลทตองการ
![Page 34: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/34.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ปรบแตงคณสมบตของตาราง เมอเลอกตารางแลว Properties Inspector จะแสดคณสมบตเฉพาะของตารางนนๆ ขนมาปรบแตงตามตองการ ดงรป
เพมแถวหรอคอลมนในตาราง เพมแถว 1. คลกเลอกแถวทตองการแทรก
2. คลกเมาสขวา แลวเลอกค าสง Table > Insert Row (หรอกด Ctrl + M ทคยบอรด)
![Page 35: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/35.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนแถวใหมกจะถกแทรกไวดานบนของแถวทเหลอ
เพมคอลมน 1. คลกเลอกคอลมนทตองการแทรก
2. คลกเมาสขวา แลวเลอกค าสง Table > Insert Column (หรอกด Ctrl + M ทคยบอรด)
![Page 36: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/36.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนคอลมนจะถกแทรกไวดานซายของอคอมลมนทเลอก
ลบแถวหรอคอมลมนออกจากตาราง ลบแถว 1. คลกแถวทตองการลบ
2. คลกเมาสขวา แลวเลอกค าสง Table > Delete Row
![Page 37: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/37.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ลบคอลมน 1. คลกเลอกคอมลมนทตองการลบ
2. คลกเมาสขวา แลวเลอกค าสง Table > Delete Column
![Page 38: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/38.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ปรบแตงคณสมบตของเซลล เมอเราเลอกเซลลไมวาจะเซลลเดยวหรอหลายเซลลกตามบน Properties Inspector จะแสดงคณสมบตเฉพาะของเซลลเหลานนเพอใหปรบแตงคณสมบตตางๆ ดงรป
รวมเซลลหรอแยกเซลล จากตวอยางของเวบเพจทออกแบบไว สงเกตไดวาแถวท 1, 3 และ 4 ของตารางมขนาดเทากบ ความกวางของตารางพอด โดยจะไมมการแบงคอลมนในแถวดงกลาว ซงการรวมทง 3 คอลมนใหเหลอเพยงคอมลมนเดยว สามารถท าได ดงน 1. คลกเลอกแถวหรอเซลลทตองการรวมเซลลไวดวยกน
![Page 39: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/39.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
2. คลกปม ในหนาตาง Properties Inspector เพอรวมเซลลทเลอกไว
3. สงเกตวาตอนนทงคอลมนทเลอกเหลอเพยงคอลมนเดยวแลว
![Page 40: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/40.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ขณะเดยวกนถาตองการแบงเซลลใดเซลลหนงออกเปนหลายๆ แถวหรอหลายคอลมน สามารถท าไดดงน 1. วางเคอรเซอรภายในเซลลทตองการแบง
2 . คลกท ปม ในหนาตาง Properties Inspector
![Page 41: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/41.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนหนาตาง Split Cell จะปรากฏขนมา ใหเลอกแบงเซลลคอลมนหรอแถวตามตองการ 3. เลอกรปแบบการแบงเซลล ในสวน Split cell into: ซงเลอกได 2 แบบคอ - Rows เมอตองการแบงเซลลเปนแถวยอย - Columns เมอตองการแบงเซลลเปนคอลมนยอย 4. ก าหนดจ านวนแถวหรอคอลมนทตองการแบงเซลลในชอง Number of…. 5. คลกปม OK
จากนนเซลลทเลอกไว จะถกแบงตามทคณก าหนด
![Page 42: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/42.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ปรบขนาดเซลล คอลมน และแถว ท าได 2 วธ ดงน
1. ปรบดวยวธคลกลาก โดยคลกลากเสนขอบเซลลทตองการปรบขนาด
(เมาสจะเปนรป หรอ ) แลวลากไปต าแหนงทตองการ
2. ปรบดวย Properties Inspector ท าไดโดยเลอกเซลล แถว หรอคอลมน แลวก าหนดความกวางลงในชอง W หรอความสงในชอง H
![Page 43: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/43.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
สรางตารางยอยซอนตารางหลก การสรางตารางซอนเปนเทคนคทนยมใชกนมาในเวบไซต ซงจะชวยในการจดเลยเอาตของเวบเพจทซบซอนท าไดงายขน และชวยใหพนทมขนาดคงท ถงแมวาพนทอนจะมการเปลยนแปลง ตลอดจนสามารถก าหนดคณสมบตใหตารางแตกตางจากตารางหลกได
จากราง Sketch ทออกแบบไว เราสามารถใสตารางซอนตารางซอนตารางไดดวยกน 3 จด คอ จดท 1 สวนวางโลโก ภาพประกอบ จดท 2 สวนวางเมนยอย จดท 3 สวนทใชแสดงสวนคนหา และปายโฆษณา
![Page 44: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/44.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เราสามารถสรางตารางซอนไดไมจ ากดขนอยกบการออกแบบเวบเพจเปนหลก โดยการสรางตารางซอนนนมขนตอนดงน จดท 1 สวนวางโลโก ภาพประกอบ
ในจดท 1 นแบงสวนตางๆ ออกเปน 2 แถว 5 คอลมน จากนนใหลงมอสรางตารางซอนตารางในแถวท 1 ของตารางหลก ดงน 1. วางเคอรเซอรภายในเซลลทตองการแทรกตารางยอย
2. คลกแถบ Table บนแทบ Common ของ Insert Bar
![Page 45: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/45.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนจะปรากฏหนาตาง Table ขนมา 3. ก าหนดคณสมบตของตารางยอยทจะสรางขนตามรป ซงคณสมบตของตารางไมจ าเปนตองเหมอนกบตารางใหญ 4. คลกปม OK
5. เลอกแถวท 1 ของตารางทสราง
6. คลกปม ในหนาตาง Properties Inspector เพอรวมเซลล
![Page 46: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/46.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เมอกลบมายงพนทสรางตารางยอยถกสรางขนมาภายในเซลลตารางหลกทวางเคอรเซอรไว ดงรป
จากนนใหสรางตารางยอยซอนตารางหลกอกในจดทเหลอ แลวก าหนดต าแหนงและคณสมบตของตารางยอย ดงน
จดท 2 สวนวางเมนยอย - วางเคอรเซอรเพอสรางตารางยอยในต าแหนงแถวท 2 คอลมนท 1 ของตารางหลก - ขนาดของตารางยอยมขนาด 100 % ไมมขอบตาราง - จ านวน 1 แถว 1 คอลมน
จดท 3 สวนทใชแสดงสวนคนหา และปายโฆษณา - วางเคอรเซอรเพอสรางตารางยอยในต าแหนงแถวท 2 คอลมนท 3 ของตารางหลก
- ขนาดของตารางยอยมขนาด 100 % ไมมขอบตาราง - จ านวน 2 แถว 1 คอลมน
![Page 47: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/47.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เมอสรางตารางยอยซอยตารางหลกจนครบแลว จะไดดงรป
หลงจากนนปรบแตงสพนหลงของตารางแถวท 2 คอลมนท 2 ใหเปนสขาว ซงท าได ดงน
1. วางเคอรเซอรตรงต าแหนงทตองการ
2. เลอกสพนทตองการในชอง Bg ของหนาตาง Properties Inspector
![Page 48: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/48.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนบนทกเวบเพจแลวเรยกดเวบเพจผานเบราเซอร โดยกดแปน F12 จะไดดงรป
![Page 49: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/49.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 4
การใสภาพกราฟกในเวบเพจ
![Page 50: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/50.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ชนดรปภาพทเหมาะส าหรบเวบเพจ ชนดขงไฟลรปภาพทนยมน ามาใสในเวบเพจเพอใชแสดงผลบนเบราเซอรมอย 2 ชนด คอ 1. ไฟล .gif ไฟลชนดนนมกเปนรปภาพเรยบๆ ไมคอยมการไลโทนสมากนก เชน รปโลโก ปมเมน และไอคอน เปนตน ซงไฟลชนดนนยงสามารถก าหนดใหพนหลงเปนสโปรงใสไดอกดวย
ภาพพนหลงแบบโปรงใสเมอน าไปวางบนเวบเพจทมสพนหลงตางกนกจะแสดงผลตางกน
![Page 51: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/51.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
2. ไฟล .jpg ไฟลชนดนสวนใหญเปนภาพถาย หรอภาพทมรายละเอยดการไลสจ านวนมาก เชน ภาพถายทไดจากกลองดจตอล เปนตน
![Page 52: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/52.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
วธใสรปลงในเวบเพจ ส าหรบวธการใสรปภาพลงในเวบสามารถท าไดหลายวธ ดงน วธท 1 คลกแถบ Images บนแทบ Common ของ Insert Bar วธท 2 คลกเมน Insert > Image จากเมนหลก วธท 3 คลกลากไฟลจากพาเนล Files หรอพาเนล Assests วธท 4 คลกลากไฟลภาพจาดโฟลเดอรของ Windows ซงวธทงายและสะดวกม 2 วธ ดงน คลกแถบ Images บนแทบ Common 1. ดบเบลคลกไฟล index.html ทหนาตางพาเนล Files
2. วางเคอรเซอรตรงต าแหนงทจะวางรปภาพ
![Page 53: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/53.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. คลกปม Image บนแทบ Common ของ Insert Bar (ถาไอคอนบนปมแสดงค าสงอนอย ใหคลกลกศรขางๆ แลวเลอกค าสง Image)
4. คลกเลอกโฟลเดอรทเกบรปภาพ 5. คลกเลอกรปภาพซงทางดานขวาจะแสดงตวอยางของรปภาพ ขนาด ชนดไฟล และเวลาทใช ดาวนโหลดรปภาพ 6. คลกปม OK
![Page 54: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/54.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
7. คลกปม Yes เพอกอปปภาพมาไวในโฟลเดอรเวบไซต
8. เลอกโฟลเดอรทตองการเกบภาพส าหรบเวบไซต 9. คลกปม Save
เมอเรยกใชรปภาพจากภายนอกโฟลเดอรเวบไซต โปรแกรมจะใหกอปปไฟลรปภาพนนเขามาในเวบไซต เพอใหสะดวกตอการจดการและอพโหลดไฟล ดงนนเราควรเลอกกอปปไฟลทกครง 10. คลกปม Cancel
![Page 55: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/55.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
หลงจากนนไฟลรปภาพจะถกบนทกไวภายในโฟลเดอร images ซงจะปรากฏซอนหนาตางพาเนล Files
รปภาพทเลอกจะถกแทรกลงในเวบเพจตรงต าแหนงทวางเคอรเซอรเอาไว ดงรป
![Page 56: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/56.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
คลกลากไฟลภาพจากพาเนล Files หรอพาเนล Assests นอกเหนอจากการคลกปม Image แลว เรายงสามารถน ารปภาพเขามาใสในเวบเพจไดโดยคลกลากไฟลจากพาเนล Files หรอพาเนล Assests ซงวธนจะสะดวกและประหยดเวลาไดมาก โดยมขนตอนดงน 1. วางเคอรเซอรตรงต าแหนงทตองการวางรป
2. คลกแทบพาเนล Files หรอ Assests 3. คลกเลอกรปทตองการวางในเวบเพจ โดยในแตละสวนของหนาตางพาเนล Files หรอ Assests จะแสดงตวอยางรปทเลอก 4. คลกลากชอไฟลไปวางตรงต าแหนงทตองการ
![Page 57: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/57.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การปรบแตงคณสมบตของรปภาพใหนาสนใจ หลงจากน ารปภาพมาวางในเวบเพจแลว เราสามารถปรบแตงคณสมบตของรปภาพได โดยการคลก
เลอกรปภาพทตองการปรบแตงแลวก าหนดคณสมบตตางๆ ในหนาตาง Properties Inspector ดงน
ปรบขนาดรปภาพใหพอด รปภาพทน ามาวางในเวบเพจ บางครงอาจจะมขนาดใหญจนเกนไป เมอน ามาวางแลวอาจท าใหหนาเวบไมไดสดสวนตามทก าหนดไว ซงสามารถปรบขนาดของรปภาพไดดงน 1. คลกเลอกรปภาพทตองการปรบขนาด 2. คลกลากทจดแฮนเดล หรอพมพคาความกวางและความสงในชอง W และ H แลวกด Enter
![Page 58: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/58.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใสค าอธบายภาพ (Alt) การใสค าหรอขอความอธบายใหรปภาพนนมประโยชนอยางมากส าหรบผชม เชน - ในกรณเวบเบราเซอรของผชมไมสามารถแสดงรปภาพได กจะแสดงขอความอธบายแทน - เมอผชมเลอนเมาสไปชบนภาพกจะแสดงขอความอธบายเพมเตม - กรณเวบเบราเซอรหาไฟลรปภาพไมพบกจะแสดงขอความอธบายแทนซงขนตอนการใสค าอธบาย ท าไดดงน 1. คลกเลอกรปภาพทตองการ 2. พมพขอความอธบายในชอง Alt แลวกด Enter
![Page 59: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/59.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใสกรอบรปชวยเพมความโดดเดน ถาตองการเพมความโดดเดนใหกบรปภาพในเวบเพจดวยการใสเสนกรอบลอมรอบรปภาพ สามารถท าไดโดยมขนตอนดงน 1. คลกเลอกรปภาพในเวบเพจดวยการใสเสนกรอบ 2. พมพคาความหนาของเสนกรอบทชอง Border แลวกด Enter
![Page 60: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/60.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ก าหนดระยะหางรอบรปและองคประกอบอนๆ การก าหนดระยะหางรอบรปภาพกบองคประกอบอนๆ อยางขอความไมหางเรยงชดกน จนท าใหดแนนเกนไป สามารถก าหนดระยะหางรอบรปได 2 แบบคอ ระยะรอบรปตามแนวนอน (H Space) และระยะหางรอบรปามแนวตง (V Space) โดยมวธก าหนดดงน 1. คลกเลอกรปภาพทตองการก าหนดระยะหาง 2. พมพคาระยะหางตามแนวนอน (H Space) และระยะหางรอบรปามแนวต ง (V Space) แลวกด Enter
![Page 61: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/61.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เทคนคสลบภาพเมอชเมาสดวย Rollover Image Rollover Image เปนเทคนคการสลบภาพระหวาง 2 รปในขณะเมอเลอนเมาสไปช กลาวคอ กอน าเมาสไปวางต าแหนงนนจะเปนรปหนง แตเมอน าเมาสไปวางต าแหนงนนกจะเปลยนเปนอกรปหนง ดงน 1. วางเคอรเซอรตรงต าแหนงทตองการจะสรางภาพ
2. เลอกค าสง Rollover Image บนแทบ Common ทแถบ Insert Bar
![Page 62: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/62.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนไดอะลอกบอกซ Insert Rollover Image จะปรากฏขนมาใหก าหนดรายละเอยดตางๆ ทส าคญ 3. เลอกรปภาพแรกทจะแสดงโดยน าเมาสไปวางทชอง Original Image โดยคลกปม Browse…
4. คลกเลอกโฟลเดอรทเกบรปภาพ 5. คลกเลอกไฟลรปภาพ 6. คลกปม OK
![Page 63: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/63.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
7. เลอกรปภาพทสองทจะแสดงหลงน าเมาสไปวางทชอง Rollover Image (ทำซำขนตอนท 4-6) 8. พมพค าอธบายรปภาพทชอง Alternate text 9. คลกปม OK
จากนนภาพ Rollover Image จะปรากฏขนมาในต าแหนงทวางเคอรเซอรเอาไว
เมอแสดงผลบนเบราเซอร หากน าเมาสไปวางบรเวณ Rollover Image ทท าไว ภาพจะสลบไปอกภาพหนง
![Page 64: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/64.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 5
การใสขอความลงในเวบเพจ
![Page 65: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/65.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การใสขอความลงในเวบเพจ วธใสขอควมลงในเวบเพจสามารถท าไดเหมอนกบโปรแกรมประเภท Microsoft Word ซงเราสามารถพมพขอความทจองการลงในพนทสรางงานทนท ดงน
1. เปดเวบเพจชอ indext.html บนหนาตางพาเนล File
2. วางเคอรเซอรในต าแหนงทตองการพมพขอความ ซงในแถวนเลอกวางคอลมนดานซายแถวท 2 ของตารางหลก
3. พมพความทตองการลงไป
![Page 66: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/66.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนใหบนทกเวบเพจ แลวทดลองแสดงผลบนเบราเซอร จะไดดงรป
สงเกตวาขอความทพมพลงไปนนไมไดอยสวนบนของคอลมถ ดงนน ถาตองการจดใหอยในต าแหนงสวนบน ท าไดดงน 1. เลอกคอลมนทตองการซงในทนเลอกคอลมนในตารางหลก เมอเลอกแลวจะเกดเสนขอบตารางยอย
![Page 67: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/67.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
2. คลกแทก <td> ใน Tag Selector เพอเปลยนใหเปนคอลมนในตารางหลก หลงคลกแทก <td> แลวเสนกรอบสด าจะลอมรอบคอลมนในตารางหลกแทน
3. คลกเลอก Top ในชอง Vert เพอจดรปแบบใหแสดงบนสดของคอลมน
![Page 68: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/68.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ขนบรรทดใหมในยอหนาเดม บางครงขอความทพมพลงไปอาจยาวเตมบรรทดหรอตองการขนบรรทดใหม เราสามารถกด Enter ทคยบอรดไดทนท แคะระยะหางระหวางบรรทดจะมากกวาปกต ซงท าใหขอความทแสดงออกมาดไมสวยงาม ดงนน ในโปรแกรม Dreamweaver จงมค าสงทชวยใหระยะหางระหวางบรรทดนอยลง ซงท าไดดงน 1. หากตองการขนยอหนาใหม (ระยะหางระหวาบรรทดจะมากกวาปกต) ใหกด Enter ทคยบอรด ไดทนท 2. หากไมตองการขนยอหนาใหม (ระยะหางระหวางบรรทดจะเทาเดม) ใหกด Shift + Enter ทคยบอรด
![Page 69: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/69.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เลอกขอความบนเวบเพจ การเลอกขอความบนเวบเพจท าไดเชนเดยวกบโปรแกรมประเภท Microsoft Office Word ดงน 1. เลอกทงบรรทด ท าไดโดยคลกทตนบรรทด 2. เลอกทงประโยค ท าไดโดยดบเบลคลกบนปรโยคทตองการ 3. เลอกเฉพาะทตองการ ท าไดโดยคลกเมาสซายแลวลากคลมเฉพาะสวนทตองการ
![Page 70: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/70.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การจดรปแบบขอความดวย Properties Inspector เราสามารถจดรปแบบขอความทตองการแสดงออกมาทางเบราเซอรได โดยเลอกขอความทตองการ หรอวางเคอรเซอรตรงต าแหนงทจะพมพขอความ แลวใชหนาตาง Properties Inspector ในการจดรปแบบขอความตามสไตลทตองการ ดงน สไตล HTML
สไตล CSS
![Page 71: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/71.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การเลอกสฟอนตใหกบขอความ ขอความทแสดงบนเบราเซอรสามารถเลอกฟอนตทจะใชงานได แตฟอนตนนจะตองเปนฟอนตมาตรฐานเทานน หามเปนฟอนตแปลกๆ เนองจากในเครองของผชม อาจจะไมมฟอนตเหลานน เมอขอความเวบเพจปรากฏบนเบราเซฮร เบราเซอรกจะดงฟอนตอนทมอยในเครองมาแสดงแทน ส าหรบฟอนตภาษาไทยทนยมใชกนจะเปนฟอนต MS San Serif และ Tahoma เนองจากอานและแสดงผลไดบนเบราเซอรทกชนด ซงวธการเลอกฟอนตใหกบขอความ ท าไดดงน 1. เลอกขอความทจะก าหนดชดฟอนต
2. คลกเลอกชดฟอนตทตองการใชทชอง Font ในหนาตาง Properties Inspector สไตล CSS
![Page 72: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/72.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การปรบเปลยนขนาดฟอนต เราสามารถเปลยนขนาดฟอนตของขอความใหเหมาะสมกบการแสดงผลได โดยใชการจดรปแบบสไตล CSS ดงน 1. เลอกขอความทจะปรบเปลยนขนาดฟอนต
2. เลอกขนาดตวอกษรหรอพมพคาลงไปในชอง Size บนหนาตาง Properties Inspector สไลต CSS
จากนน จะปรากฏหนาตาง New CSS Rule ใหก าหนดคณสมบตเบองตนของ CSS 3. ก าหนดชอเรยกของสไตล ซงควรตงชอเรยกใหสอดคลองกบสงทใหสไตลไปก าหนด ในทนใชชอ leftsubmenu 4. คลกปม OK
![Page 73: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/73.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การเปลยนสฟอนต ส าหรบขอความสวนทเปนหวขอหลกหรอหวขอยอย เราสามารถท าใหเกดความโดดเดน ไดดงน 1. เลอกขอความทจะเปลยนสฟอนต
2. คลก บนหนาตาง Properties Inspector สไตล CSS 3. คลกเลอกสจากตารางส
![Page 74: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/74.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การก าหนดลกษณะตวอกษร การก าหนดลกษณะตวอกษร ไมวาจะเปนตวหนา ตวเอยง และลกษณะอนๆ สามารถท าไดดงน 1. เลอกขอความทจะก าหนดลกษณะตวอกษร
2. คลกเลอกลกษณะตวอกษรบนหนาตาง Properties Inspector สไตล CSS
![Page 75: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/75.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
แทรกสญลกษณพเศษในเวบเพจ เราสามารถแทรกสญลกษณพเศษ อยางเชน © (Copyright) หรอ ™ (Trademark) ดวยการพมพลงในเวบเพจไดดงน 1. วางเคอรเซอรตรงต าแหนงทตองการแทรกสญลกษณพเศษ
2. คลกแทบ Text บน Insert Bar
![Page 76: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/76.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. เลอกสญลกษณพเศษทตองการแทรกลงในเวบเพจในแถบ Characters
จากนนสญลกษณพเศษทเลอกจะถกแทรกลงในต าแหนงทวางเคอรเซอร ดงรป
![Page 77: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/77.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนพมพขอความลขสทธตอทาย หากตองการจดใหขอความในบรรทดอยกงกลาง ท าไดโดยวางเคอรเซอรลงในแถวนน แลวคลกเลอก Center ทชอง Horz ในเวบเพจจะจดขอความบรรทดนนอยกงกลางตารางตาทก าหนด ดงรป
![Page 78: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/78.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การกอปปและจดวางเนอหาจากเอกสาร Office การกอปปขอความหรอเนอหาทอยในไฟลเอกสาร Office อยางเชน Word หรอ Excel มาวางบนเวบเพจ ม 2 ขนตอนดงน ขนตอนท 1 กอปปเนอหาจากไฟลงานเอหสารตนฉบบ 1. เปดไฟลเอกสาร Office ทตองการกอปป
2. เลอกขอความหรอเนอหาทตองการกอปป 3. คลกเมาสขวาบนขอความ แลวเลอกค าสง Copy
![Page 79: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/79.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ขนตอนท 2 วางเนอหาลงในเวบเพจทสรางดวย Dreamweaver 1. วางเคอรเซอรตรงต าแหนงทตองการวางขอความ
2. คลกเมน Edit > Past Special
จากนนจะปรากฏหนาตาง Paste Special ขนมาใหเลอกรปแบบการจดวาง
![Page 80: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/80.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. รปแบบการจดวางขอความทกอปปมา สามารถเลอกไดดงน - Text only วางเฉพาะขอความอยางเดยว แตไมมการจดรปแบบใดๆ - Text with structure (paragraphs, lists, tables, etc.) วางขอความตามรปแบบ โครงสรางตนฉบบ เชน จดยอหนา, จดลสตล าดบ, ตาราง เปนตน - Text with structure plus basic formatting (bold, italic) วางขอความตามรปแบบ ลกษณะขอความตนฉบบ เชน ตวหนา ตวเอยง เปนตน - Text with structure plus full formatting (bold, italic, styles) วางขอความตาม รปแบบลกษณะขอความตนฉบบ รวมทงรปแบบสไตลทใชจดขอความดวย - Retain line breaks คงลกษณะการแบงบรรทดตามตนฉบบ - Clean up Word paragraph spacing ลางคาระยะหางระหวางยอหนาทก าหนดไวใน Word ออก 4. คลกปม OK
จะไดเวบเพจทแสดงขอความทกอปปจากโปรแกรม Word
![Page 81: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/81.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 6
การเชอมโยงระหวางเวบดวยลงกและเมน
![Page 82: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/82.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การสรางลงกไปยงเวบเพจอนภายในเวบไซตเดยวกน
- การสรางลงกดวยวการเอกไฟลเอง 1. เลอกขอความหรอรปภาพทจะสรางลงก
2. คลกปม ทายชองลงก
จากนนหนาตาง Select File จะปรากฏขนมา 3. คลกเลอกโฟลเดอรทเกบไฟลเวบเพจปลายทาง 4. คลกเลอกไฟลเวบเพจปลายทางทตองการ 5. คลกปม OK
![Page 83: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/83.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
6. คลกเลอกวนโดวทใชแสดงเวบเพจปลายทาง ซงสามารถเลอกได ดงน _blank แสดงเวบเพจปลายทางโดยการเปดวนโดวใหม _parent แสดงเวบเพจปลายทางเฟรมทครอบเฟรมปจจบนอย _self แสดงเวบเพจปลายทางเฟรมเดมของลงก _top แสดงเวบเพจปลายทางวนโดวเดม โดยยกเลกเฟรมทครอบอยทหมด ชออนจะปรากฏ แสดงเวบเพจปลายทางวนโดวทมชอนนๆ
![Page 84: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/84.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
- การสรางลงกดวยวธ Point-to-File 1. เลอกขอวามหรอรปทจะสรางเปนลงก
2. คลกลากไอคอน ไปชทเวบเพจปลายทาง
![Page 85: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/85.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การสรางลงกไปยงเวบไซตอน - การสรางลงกดวยวธการพมพ URL 1. เลอกขอความหรอรปภาพทตองการสรางลงก
2. พมพหรอกอบป URL ของเวบไซตปลายทางมาใสในชอง Link แลวกด Enter ทคยบอรด ซง URL ปลายทางจะตองเปนแบบเตม เชน http://www.samunpri.com เปนตน
![Page 86: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/86.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
- การสรางลงกดวยวธคลกปม Hyperlink 1. เลอกขอความทจะสรางลงก
2. คลกปม Hyperlink บนแทบ Common ใน Insert Bar
จากนนหนาตาง Hyperlink จะปรากฏขนมา พรอมกบขอความของลงกทแสดงในหนาเวบเพจ (ชอง Text) และ URL ของเวบไซตปลายทาง (ชอง Link) โดยอตโนมต 3. คลกเลอกวนโดวทแสดงเวบเพจปลายทาง 4. คลกปม OK
![Page 87: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/87.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
การสรางลงกจากภาพเฉพาะสวนดวย Image Map นอกจากจากจะสามารถลงกดวยรปภาพทงภาพไดแลว ยงสามารเลอกสรางลงกดวยภาพเฉพาะสวนทตองการไดดวยวธ Image Map ซงเรยกสวนทสรางลงกวา ฮอตสปอต (hotspot) ซงลงกในลกษณะนจะใชกบรปแผนท โดยมขนตอนการสรางลงก ดงน 1. คลกเลอกภาพทตองการจะสรางเปนลงก
2. คลกเลอกเครองมอทสราง Image Map บน Properties Inspector ซงสามารถเลอกก าหนดรปทรงของฮอตสปอตได 3 รปแบบ ดงน
สรางฮอตสปอตรปสเหลยม
สรางฮอตสปอตรปวงกลมหรอวงร
สรางฮอตสปอตรปทรงอสระ
![Page 88: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/88.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. วาดรปทรงในบรเวณทตองการใหเปนลงก (วธการรปทรงอสระ ท าไดโดยการลากจดตอจด)
4. ก าหนดเวบเพจหรอเวบไซตปลายทางทชอง Link 5. ก าหนดขอความอธบายลงก (ก าหนดหรอไมกได) 6. เลอกวนโดวทแสดงเวบเพจปลายทาง (ก าหนดหรอไมกได)
จะเหนไดวาบรเวณทวาดรปทรงหรอจดฮอตสปอตจะปรากฏรปทรงสฟาใส ซงรปทรงดงกลาวจะไมแสดงเมอเรยกดผานเบราเซอร
![Page 89: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/89.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
ใบความร
หนวยการเรยนรท 8
การใสมลตมเดยในหนาเวบเพจ
![Page 90: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/90.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
แทรก Flash ลงในเวบเพจ 1. วางเคอรเซอรตรงต าแหนงทจะแทรกไฟล Flash
2. เลอกค าสง SWF บนแทบ Common ของ Insert Bar เพอแทรกไฟล Flash
![Page 91: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/91.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. คลกเลอกโฟลเดอรทเกบไฟล Flash แลวคลกปม OK
เมอเสรจแลวสามารถทดลองเลนไฟล Flash กอนได โดยการคลกปม Play จากนนไฟล Flash จะแสดงบนพนททวางเคอรไว ดงภาพ
![Page 92: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/92.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
แทรกไฟลวดโอ .flv 1. วางเคอรเซอรตรงต าแหนงทจะแทรกไฟล Flash
2. เลอกค าสง FLV บนแทบ Common ของ Insert Bar เพอแทรกไฟล Flash Video
![Page 93: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/93.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
3. จะปรากฏหนาตาง Insert FLV ขนมา แลวคลกปม Browse… เพอเลอกไฟล Flash Video
![Page 94: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/94.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
4. ก าหนดคาตางๆ ดงน แลวคลกปม OK เลอกวธแสดงวดโอ - Progessive Download Video ไฟล Flash Video จะถกดาวนโหลดไปเกบไวในเครองของผชมในขณะทเลนไฟลไปดวย ซงสามารถเผยแพรวดโอไดจากเวบเซรฟเวอรทวไปได - Steaming Video ไฟล Flash Video จะไมถกดาวนโหลดไปเกบไวเหมอนวธแรก ซงการเผนแพรไฟลวดโอประเภทนจะตองใชกเวบเซรฟเวอรทตดตงโปรแกรมโดยเฉพาะเทานน Skin เลอกรปแบบของแผงควบคมการเลนวดโอ ซงจะแสดงตวอยางแผงควบคมเมอเลอก Width/Height ก าหนดความกวาง ความสงของวดโอ Constain รกษาสดสวนของวดโอไวเมอปรบความกวางหรอความสง Auto play เรมวดโออตโนมตเมอเวบเพจถกเปด Auto rewind กลบไปยงด าแหนงเรมตนของวดโอทนทเมอเลนจบ Prompt users to download… ในกรณทเครอเงลนของผชมไมสามารถรบชมได ใหไปยงเวบเพจส าหรบดาวนโหลดหรออพเกรดโปรแกรม Flash Player โดยอตโนมต Message ขอความส าหรบแจงเตอนใหผรบชมอพเกรดโปรแกรม Flash Player
![Page 95: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/95.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
หลงจากนนจะปรากฏไฟล .flv ในพนทสรางานในต าแหนงทวางเคอรเซอรไว ดงรป
![Page 96: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/96.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เลนเพลงในเวบเพจดวย Plugin
ส าหรบไฟลเสยงทจะน ามาใสในเวบเพจนน มอยดวยกนหลายรปแบบ ดงน 1. .mid หรอ .midi เปนไฟลทมขนาดเลก คณภาพเสยงดมาก แสดงไดทกเบราเซอรโดยไมตอง
ตดตงโปรแกรมเสรม (Plug-in) 2. .wav เปนไฟลเสยงทมคณภาพด แสดงไดทกเบราเซอรโดยไมตองตดตวโปรแกรมเสรม แตไฟลม
ขนาดคอนขางใหญกวาไฟล .mid 3. .mp3 เปนไฟลทมขนาดเลก คณภาพเสยงดมาก สามารถฟงไดทนทโดยไมตอดาวนโหลดจนครบ
ทงเพลง แตตองตดตงโปรแกรมส าหรบเลนเสยง อยางเชน Windows media Player หรอ Realplayer เปนตน
4. .ra, .ram, .rpm หรอไฟล Real Audio เปนไฟลทมคณภาพคลายกบไฟล .mp3 แตตองตดตงโปรแกรม Real Player ส าหรบการแสดงเสยง
1. วางเคอรเซอรในต าแหนงทตองการวางแผงควบคมการเลนเสยง
2. เลอกค าสง Plugin บนแทบ Common ของ Insert Bar เพอแทรกไฟลเสยงลงในเวบเพจ
![Page 97: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/97.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
จากนนหนาตาง Select File จะปรากฏขนมาใหเลอกไฟลเสยงทตองการแทรกในเวบเพจ 3. คลกเลอกไฟลเสยงทตองการแทรก แลวคลกปม OK
4. ก าหนดขนาด Windows Media Player ทใชเลนบนเวบเพจทชอง W (ความกวาง) และ H (ความสง) ซงสามารถก าหนดขนาดได ดงน 50 x 30 70 x 30 50 x 45 70 x 45 170 x 45 280 x 45
![Page 98: ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่](https://reader033.vdocuments.pub/reader033/viewer/2022041822/5e5e72ea47b54f04b46c5469/html5/thumbnails/98.jpg)
ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554
เมอเสรจเรยบรอยแลวจะแสดงไอคอนของไฟล ดงรป สามารถทดลองเลนไฟลเสยงได โดยคลกปม Play บน Properties Inspector