ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่

ใบความร

หนวยการเรยนรท 1

พนฐานการสรางเวบไซต

ความรเบองตนเกยวกบอนเตอรเนต อนเตอรเนต (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

สรปเวบเพจ เวบไซต และโฮมเพจ

ภาษา 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 เปนตน

ความหมายของซบโดเมน

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

แนวทาง ในการสรางและพฒนาเวบไซต - การวางแผน

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

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

- การก าหนดกลมเปาหมาย เพอใหการสรางและออกแบบเวบไวตไดรบความนยม การก าหนดกลมเปาหมายในการเขาชมเวบไซตกนบวามสวนส าคญไมนอย เชน เวบไซตส าหรบเยาวชน นกเรยน นกศกษาในการคนหาขอมล หรอเวบไซตส าหรบบคคลทวไปทเขาไปใชบรการตาง ๆ เปนตน

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

- การเตรยมสงตาง ๆ ทจ าเปน ในการออกแบบเวบไซตตองอาศยความสามารถตาง ๆ เชน โปรแกรมส าหรสราง เวบไซต ภาพเคลอนไหว มลตมเดย การจดโดเมนเนม การหาผใหบรการรบฝากเวบไซต (Web Hosting) เปนตน

- การจดโครงสรางขอมล เมอไดขอมลตาง ๆ เชน ก าหนดเนอหาและจดประสงคของเวบไซต การก าหนดกลมเปาหมาย การเตรยมขอมล การเตรยมสงตาง ๆ ทจ าเปนจากขนแรกเรยบรอยแลว ในขนตอนน เราจะจดระบบเพอใชเปนกรอบส าหรบการออกแบบและด าเนนการในขนตอนตอไป ซงมรายละเอยด ดงน • โครงสรางและสารบญของเวบไซต • การใชระบบน าผเขาชมไปยงสวนตาง ๆ ภายในเวบไซตหรอทเราเรยกวาระบบน าทาง (Navigation) • องคประกอบทตองน ามาใช เชน สอมลตมเดย ภาพกราฟก แบบฟอรมตาง ๆ • การก าหนดรปแบบและลกษณะของเวบเพจ • การก าหนดฐานขอมล ภาษาสครปตหรอแอปพลเคชนทน ามาใชในเวบไซต • การบรการเสรมตาง ๆ • การออกแบบเวบไซต

นบเปนขนตอนในการออกแบบรปราง โครงสรางและลกษณะทางดานกราฟกของหนาเวบเพจโดย โปรแกรมทเหมาะสมในการออกแบบคอ Photoshop หรอ Fireworks ซงจะชวยในการสรางเคาโครงของหนาเวบและองคประกอบตาง ๆ เชน ชอเวบไซต โลโก รปไอคอน ปมไอคอน ภาพเคลอนไหว แบนเนอรโฆษณา เปนตน ในการออกแบบเวบไซตนนยงตองค านงถงสสนและรปแบบของสวนประกอบตาง ๆ ท ไมใชภาพกราฟก เชน ขนาดของตวอกษร สของขอความ สพน ลวดลายของเสนกรอบเพอความสวยงามและดงดด ผเยยมชมดวย

สวนประกอบของหนาเวบเพจ เราสามารถจ าแนกสวนประกอบของหนาเวบเพจ เปน 3 สวน ดงน

1. สวนหว (Page Header) จะอยบรเวณบนสดของหนาเวบเพจ เปนสวนทแสดงชอ เวบไซต โลโก แบนเนอรโฆษณาลงกส าหรบขามไปยงหนาเวบอน

2. สวนเนอหา (Page Body) อยบรเวณตอนกลางของหนาเวบเพจ ซงเปนสวนทแสดงเนอหาภายใน

หนาเวบเพจนน โดยประกอบดวยขอความ ขอมล ภาพเคลอนไหว เปนตน

3. สวนทาย (Page Footer) อยบรเวณดานลางสดของหนาเวบเพจ สวนมากใชส าหรบลงกขอความสนๆ เขาใจงาย หรอจะมชอเจาของเวบไซต อเมลแอดเดรสของผดแลเวบไซตส าหรบตดตอกบทางเวบไซต

สรปสวนประกอบของหนาเวบเพจ

แนวคดในการออกแบบ - ดจากเวบไซตอนเพอเปนตวอยาง การดจากเวบไซตอนบนอนเตอรเนตเพอศกษาเปนตวอยางนน

นบเปนวธการทงายทสด แตกควรน าไปประยกตใชใหเหมาะสมกบเนอหาและกลมเปาหมายของเราดวย - ศกษาจากสอสงพมพในรปแบบตางๆ สอสงพมพในทน ไดแก แมกกาซน โปสเตอรโฆษณา โบรชวร

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

ขอมลจาก : หนงสอสราง Web งายๆ แคคลก Dreamweaver CS5 โดย : จระสทธ องรตนวงศ, 2554



การเรมใชงาน Dreamweaver CS5


การเรยกใชโปรแกรม 1. คลก ปม Start > All Programs > Adobe Dreamweaver CS5 2. จากนนเขาสหนาจอโปรแกรม


สวนประกอบของ Welcome Screen จะแบงเปน 3 กลม หลกๆ ดงน

1. เปดไฟลงานเกาทเคยเรยกใชงาน ใชส าหรบเปดงานเกาทเคยเรยกใชงาน โดยโปรแกรมจะแสดง

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

2. สรางงานใหม ในสวนนใชส าหรบสรางไฟลงานใหม ซงสามารถเลอกสรางไฟลไดหลายชนด ไมวาจะเปนไฟล HTML, PHP, ASP, และ JavaScript เปนตน

3. สรางานส าเรจรป เปนการสรางเวบเพจใหมโดยใชไฟลตวอยางทโปรแกรมจดเตรยมเอาไวให หรอทเรยกกนวา เทมเพลต (Template) ซงมใหเลอกใชมากมาย


สวนประกอบหนาจอโปรแกรม

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

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

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


พนทสรางงาน 1. มมมองออกแบบ มมมองนสามารถแกไขและจดการเนอหาตางๆ ลงบนเวบเพจได ซงจะแสดงผล

บนเวบเพจคลายกบเปดบนเบราเซอร

2. มมมองโคด มมมองนใชส าหรบเปดดสรปตค าสงภาษาตางๆ ของเวบเพจ เชน HTML, PHP, ASP, และ JSP ซงสามารถตรวจสอบและแกไขค าสงตางๆ ไดตามตองการ โดยการแกไขจะสงผลกลบไปยงมมมองออกแบบ โดยอตโนมต


3. มมมองโคดและออกแบบ มมมองนจะแสดงทงแบบมมมองออกแบบ และมมมองโคดพรอมกนเมอคลกมมมอง Split จะแบงพนทสรางงานออกเปน 2 สวน คอ สวนหนาตางโคด และสวนมมมองออกแบบ นอกจากนนยงสามารถปรบขนาด พนทของแตละสวนได โดยการคลกลากทเสนแบงระหวางทง 2 สวนน

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

หนาตาง Properties Inspector เปนหนาตางเลกๆ ทอยดานลางสดของหนาจอโปรแกรม เปนสวนทใชงานมากทสด เนองจากใชก าหนด เนองจากใชก าหนดคณสมบตส าคญๆ ของออบเจกตทวางในหนาเวบเพจ เชน ขนาด ต าแหนง และส เปนตน ทงนรายละเอยดและคณสมบตของออบเจกตแตละตวจะเปลยนแปลงตลอดเวลา ขนอยกบวาขณะนนก าลงเลอกออบเจกตใด


กลมหนาตางพาเนล เปนหนาตางทรวบรวมเครองมอตางๆ ไวเปน

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

แถบสถานะ เปนแถบทอยดานลางของวนโดว Document ซงประกอบดวย 2 สวน คอ ดายซายเปน Tag Selector สวนดานขวาเปนเครองมอตางๆ โดย Tag Selector ประกอบดวย Select ใชส าหรบเลอกออบเจกตบนเวบเพจ เชน ขอคสาม รปภาพ เปนตน เมอคลกเลอกออบเจกตจะแสดงกรอบสด าลอมรอบออบเจกตทเลอก Hand ใชส าหรบเลอนเวบเพจ Zoom ใชส าหรบคลกเลอกหรอลากเพอขยาย หรอ Alt+ คลกเพอยอมมมอง


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

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

กน ดงนนจงควรวางแผนลวงหนาวาจะจดเกบไฟลไวในโฟลเดอรอยางไรบาง ตวอยางโครงสรางภายในโฟลเดอรมดงน


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

1. คลกลงก Manage Sites ทพาเนล Files (หรอคลกค าสง Site > New Site)

2. คลกปม New… ทหนาตาง Manage Site 3. คลกแทบ Site 4. ตงชอเวบไซตทชอง Site Name

5. คลกปม เพอเลอกโฟลเดอรทเกบไฟลงาน


6. เลอกโฟลเดอรทตองการ แลวคลกปม Open

7. คลกปม Select


8. คลกปม Save ทหนาตาง Site Setup for My_Site

9. คลกปม Done ทหนาตาง Manage Sites


การแกไขไซตทสรางไวแลว 1. คลกเมน Site > Manage Sites

2. เลอกชอไซตทตองการ 3. คลกปม Edit… จากนนหนาตาง Site Setup for… จะปรากฏขนมา เราสามารถแกไขการก าหนดคาตางๆ ไดโดยมวธคลายกบการก านหดคาไซตใหม 4. เมอแกไขเสรจแลว คลกปม Done


ท าความรจกกบพาเนล นอกจากจะสรางไซตไวในพาเนล Files เรายงสามารถจดการกบไฟลตางๆ โดยผานพาเนล Files ไดไมวาจะเปนการสรางโฟลเดอร สรางเวบเพจใหม เปดเวบเพจ กอบปไฟล หรอแมแตเปลยนชอไฟล ซงการเปด /ปดพาเนล Files ท าไดโดยคลกเมน Windows > Files (หรอกด F8) สรางโฟลเดอรยอยไวเกบไฟล เราสามารถสรางโฟลเดอรยอยส าหรบจดเกบไฟลตางๆ ใหเปนหมวดหมได เชน ไฟลรปภาพ ไฟลเสยง ไฟลสครปต เปนตน โดยมขนตอน ดงน 1. คลกขวาบนโฟลเดอรหลก แลวเลอกค าสง New Folder

2. พมพชอโฟลเดอรยอยแลวกด Enter




การจดเลยเอาตเวบเพจดวยตาราง


รจกกบโครงสรางของตาราง กอลงมอสรางเวบเพจดวยตารางนน เราควรท าความรจกกบโครงสรางของตารางเสยกอน โดยประกอบดวย - คอลมน (Column) - แถว (Row) - เซลล (Cell) ซงเปนสวนทจะน าขอความหรอรปภาพเขาไปใส


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

- เวบเพจควรมกแถว การก าหนดวาเวบเพจควรมกแถวนนไมมกฎตายตว ขนอยกบหนาเวบเพจนนๆ ซงจากตวอยางทไดออกแบบไวแบงออกเปน 4 แถว ดงน แถวท 1 ส าหรบวางโลโก และภาพประกอบ แถวท 2 ส าหรบวางเมน แถวท 3 ส าหรบเมนยอย เนอหา สวนคนหา และปายโฆษณา แถวท 4 ส าหรบแสดงขอความลขสทธและผจดท า


- เวบเพจควรมกคอลมน ส าหรบการพจารณาจ านวนคอลมนจะแตกตางจากจ านวนแถว เนองจากในแตละแถวอาจจะมจ านวนคอมลมนไมเทากน ดงนนเราควรแบงคอลมนตามคอลมนหลก หรอใชวธสรางตารางซอนในแถวทแบงคอลมน ซงในทน จะใชวธการสรางตารางซอน จากการออกแบบจะพบวาแถวท 2 สามารถแบงได 3 คอลมน ดงน คอลมนท 1 ส าหรบวางเมนยอย คอลมนท 2 ส าหรบแสดงเนอหา คอลมนท 3 ส าหรบแสดงสวนคนหา และปายโฆษณา


ลงมอสรางตารางส าหรบเวบเพจ เมอรแลววาจะตองสรางตารางจ านวน 4 แถว และ3 คอลมน กเรมสรางตารางส าหรบจดเลยเอาต เวบเพจได ดงน

1. ด 2. บเบลคลกไฟลชอ index.html หรอสรางเวบเพจใหม

2. วางเคอรเซอรตรงต าแหนงทจะสรางตาราง

3. คลกแทบ Common ในแถบ Insert Bar


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



จากนนจะไดตารางตามจ านวนแถวและคอลมนทก าหนด ดงรป


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

เลอกตารางทงหมด สามารถท าได 2 วธ วธท 1 ชเมาสทมมใดมมหนงของตาราง (เมาสเปนรป ) แลวคลกเมาส

วธท 2 คลกเมาสขวาบนเซลลในตารางแลวเลอกค าสง Table > Select Table


เลอกเซลล - เลอกเซลลเดยว ท าไดโดยคลกวาเคอรเซอรภานในเซลลทตองการ - เลอกหลายเซลลตอเนองกน ท าได 2 วธ วธท 1 ชเมาสทเซลลแรก จากนนคลกลากคลมเซลลทตองการ วธท 2 คลกเซลลแรก จากนนกด Shift ทคยบอรดคางไว แลวคลกเซลลสดทาย

- เลอกหลายเซลลไมตอเนองกน ท าไดโดยกด Ctrl ทคยบอรดคางไว แลวคลกเลอกแตละ เซลลทตองการ


ปรบแตงคณสมบตของตาราง เมอเลอกตารางแลว Properties Inspector จะแสดคณสมบตเฉพาะของตารางนนๆ ขนมาปรบแตงตามตองการ ดงรป

เพมแถวหรอคอลมนในตาราง เพมแถว 1. คลกเลอกแถวทตองการแทรก

2. คลกเมาสขวา แลวเลอกค าสง Table > Insert Row (หรอกด Ctrl + M ทคยบอรด)


จากนนแถวใหมกจะถกแทรกไวดานบนของแถวทเหลอ

เพมคอลมน 1. คลกเลอกคอลมนทตองการแทรก

2. คลกเมาสขวา แลวเลอกค าสง Table > Insert Column (หรอกด Ctrl + M ทคยบอรด)


จากนนคอลมนจะถกแทรกไวดานซายของอคอมลมนทเลอก

ลบแถวหรอคอมลมนออกจากตาราง ลบแถว 1. คลกแถวทตองการลบ

2. คลกเมาสขวา แลวเลอกค าสง Table > Delete Row


ลบคอลมน 1. คลกเลอกคอมลมนทตองการลบ

2. คลกเมาสขวา แลวเลอกค าสง Table > Delete Column


ปรบแตงคณสมบตของเซลล เมอเราเลอกเซลลไมวาจะเซลลเดยวหรอหลายเซลลกตามบน Properties Inspector จะแสดงคณสมบตเฉพาะของเซลลเหลานนเพอใหปรบแตงคณสมบตตางๆ ดงรป

รวมเซลลหรอแยกเซลล จากตวอยางของเวบเพจทออกแบบไว สงเกตไดวาแถวท 1, 3 และ 4 ของตารางมขนาดเทากบ ความกวางของตารางพอด โดยจะไมมการแบงคอลมนในแถวดงกลาว ซงการรวมทง 3 คอลมนใหเหลอเพยงคอมลมนเดยว สามารถท าได ดงน 1. คลกเลอกแถวหรอเซลลทตองการรวมเซลลไวดวยกน


2. คลกปม ในหนาตาง Properties Inspector เพอรวมเซลลทเลอกไว

3. สงเกตวาตอนนทงคอลมนทเลอกเหลอเพยงคอลมนเดยวแลว


ขณะเดยวกนถาตองการแบงเซลลใดเซลลหนงออกเปนหลายๆ แถวหรอหลายคอลมน สามารถท าไดดงน 1. วางเคอรเซอรภายในเซลลทตองการแบง

2 . คลกท ปม ในหนาตาง Properties Inspector


จากนนหนาตาง Split Cell จะปรากฏขนมา ใหเลอกแบงเซลลคอลมนหรอแถวตามตองการ 3. เลอกรปแบบการแบงเซลล ในสวน Split cell into: ซงเลอกได 2 แบบคอ - Rows เมอตองการแบงเซลลเปนแถวยอย - Columns เมอตองการแบงเซลลเปนคอลมนยอย 4. ก าหนดจ านวนแถวหรอคอลมนทตองการแบงเซลลในชอง Number of…. 5. คลกปม OK

จากนนเซลลทเลอกไว จะถกแบงตามทคณก าหนด


ปรบขนาดเซลล คอลมน และแถว ท าได 2 วธ ดงน

1. ปรบดวยวธคลกลาก โดยคลกลากเสนขอบเซลลทตองการปรบขนาด

(เมาสจะเปนรป หรอ ) แลวลากไปต าแหนงทตองการ

2. ปรบดวย Properties Inspector ท าไดโดยเลอกเซลล แถว หรอคอลมน แลวก าหนดความกวางลงในชอง W หรอความสงในชอง H


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

จากราง Sketch ทออกแบบไว เราสามารถใสตารางซอนตารางซอนตารางไดดวยกน 3 จด คอ จดท 1 สวนวางโลโก ภาพประกอบ จดท 2 สวนวางเมนยอย จดท 3 สวนทใชแสดงสวนคนหา และปายโฆษณา


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

ในจดท 1 นแบงสวนตางๆ ออกเปน 2 แถว 5 คอลมน จากนนใหลงมอสรางตารางซอนตารางในแถวท 1 ของตารางหลก ดงน 1. วางเคอรเซอรภายในเซลลทตองการแทรกตารางยอย

2. คลกแถบ Table บนแทบ Common ของ Insert Bar


จากนนจะปรากฏหนาตาง Table ขนมา 3. ก าหนดคณสมบตของตารางยอยทจะสรางขนตามรป ซงคณสมบตของตารางไมจ าเปนตองเหมอนกบตารางใหญ 4. คลกปม OK

5. เลอกแถวท 1 ของตารางทสราง

6. คลกปม ในหนาตาง Properties Inspector เพอรวมเซลล


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

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

จดท 2 สวนวางเมนยอย - วางเคอรเซอรเพอสรางตารางยอยในต าแหนงแถวท 2 คอลมนท 1 ของตารางหลก - ขนาดของตารางยอยมขนาด 100 % ไมมขอบตาราง - จ านวน 1 แถว 1 คอลมน

จดท 3 สวนทใชแสดงสวนคนหา และปายโฆษณา - วางเคอรเซอรเพอสรางตารางยอยในต าแหนงแถวท 2 คอลมนท 3 ของตารางหลก

- ขนาดของตารางยอยมขนาด 100 % ไมมขอบตาราง - จ านวน 2 แถว 1 คอลมน


เมอสรางตารางยอยซอยตารางหลกจนครบแลว จะไดดงรป

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

1. วางเคอรเซอรตรงต าแหนงทตองการ

2. เลอกสพนทตองการในชอง Bg ของหนาตาง Properties Inspector


จากนนบนทกเวบเพจแลวเรยกดเวบเพจผานเบราเซอร โดยกดแปน F12 จะไดดงรป




การใสภาพกราฟกในเวบเพจ


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

ภาพพนหลงแบบโปรงใสเมอน าไปวางบนเวบเพจทมสพนหลงตางกนกจะแสดงผลตางกน


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


วธใสรปลงในเวบเพจ ส าหรบวธการใสรปภาพลงในเวบสามารถท าไดหลายวธ ดงน วธท 1 คลกแถบ Images บนแทบ Common ของ Insert Bar วธท 2 คลกเมน Insert > Image จากเมนหลก วธท 3 คลกลากไฟลจากพาเนล Files หรอพาเนล Assests วธท 4 คลกลากไฟลภาพจาดโฟลเดอรของ Windows ซงวธทงายและสะดวกม 2 วธ ดงน คลกแถบ Images บนแทบ Common 1. ดบเบลคลกไฟล index.html ทหนาตางพาเนล Files

2. วางเคอรเซอรตรงต าแหนงทจะวางรปภาพ


3. คลกปม Image บนแทบ Common ของ Insert Bar (ถาไอคอนบนปมแสดงค าสงอนอย ใหคลกลกศรขางๆ แลวเลอกค าสง Image)

4. คลกเลอกโฟลเดอรทเกบรปภาพ 5. คลกเลอกรปภาพซงทางดานขวาจะแสดงตวอยางของรปภาพ ขนาด ชนดไฟล และเวลาทใช ดาวนโหลดรปภาพ 6. คลกปม OK


7. คลกปม Yes เพอกอปปภาพมาไวในโฟลเดอรเวบไซต

8. เลอกโฟลเดอรทตองการเกบภาพส าหรบเวบไซต 9. คลกปม Save

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


หลงจากนนไฟลรปภาพจะถกบนทกไวภายในโฟลเดอร images ซงจะปรากฏซอนหนาตางพาเนล Files

รปภาพทเลอกจะถกแทรกลงในเวบเพจตรงต าแหนงทวางเคอรเซอรเอาไว ดงรป


คลกลากไฟลภาพจากพาเนล Files หรอพาเนล Assests นอกเหนอจากการคลกปม Image แลว เรายงสามารถน ารปภาพเขามาใสในเวบเพจไดโดยคลกลากไฟลจากพาเนล Files หรอพาเนล Assests ซงวธนจะสะดวกและประหยดเวลาไดมาก โดยมขนตอนดงน 1. วางเคอรเซอรตรงต าแหนงทตองการวางรป

2. คลกแทบพาเนล Files หรอ Assests 3. คลกเลอกรปทตองการวางในเวบเพจ โดยในแตละสวนของหนาตางพาเนล Files หรอ Assests จะแสดงตวอยางรปทเลอก 4. คลกลากชอไฟลไปวางตรงต าแหนงทตองการ


การปรบแตงคณสมบตของรปภาพใหนาสนใจ หลงจากน ารปภาพมาวางในเวบเพจแลว เราสามารถปรบแตงคณสมบตของรปภาพได โดยการคลก

เลอกรปภาพทตองการปรบแตงแลวก าหนดคณสมบตตางๆ ในหนาตาง Properties Inspector ดงน

ปรบขนาดรปภาพใหพอด รปภาพทน ามาวางในเวบเพจ บางครงอาจจะมขนาดใหญจนเกนไป เมอน ามาวางแลวอาจท าใหหนาเวบไมไดสดสวนตามทก าหนดไว ซงสามารถปรบขนาดของรปภาพไดดงน 1. คลกเลอกรปภาพทตองการปรบขนาด 2. คลกลากทจดแฮนเดล หรอพมพคาความกวางและความสงในชอง W และ H แลวกด Enter


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


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


ก าหนดระยะหางรอบรปและองคประกอบอนๆ การก าหนดระยะหางรอบรปภาพกบองคประกอบอนๆ อยางขอความไมหางเรยงชดกน จนท าใหดแนนเกนไป สามารถก าหนดระยะหางรอบรปได 2 แบบคอ ระยะรอบรปตามแนวนอน (H Space) และระยะหางรอบรปามแนวตง (V Space) โดยมวธก าหนดดงน 1. คลกเลอกรปภาพทตองการก าหนดระยะหาง 2. พมพคาระยะหางตามแนวนอน (H Space) และระยะหางรอบรปามแนวต ง (V Space) แลวกด Enter


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

2. เลอกค าสง Rollover Image บนแทบ Common ทแถบ Insert Bar


จากนนไดอะลอกบอกซ Insert Rollover Image จะปรากฏขนมาใหก าหนดรายละเอยดตางๆ ทส าคญ 3. เลอกรปภาพแรกทจะแสดงโดยน าเมาสไปวางทชอง Original Image โดยคลกปม Browse…

4. คลกเลอกโฟลเดอรทเกบรปภาพ 5. คลกเลอกไฟลรปภาพ 6. คลกปม OK


7. เลอกรปภาพทสองทจะแสดงหลงน าเมาสไปวางทชอง Rollover Image (ทำซำขนตอนท 4-6) 8. พมพค าอธบายรปภาพทชอง Alternate text 9. คลกปม OK

จากนนภาพ Rollover Image จะปรากฏขนมาในต าแหนงทวางเคอรเซอรเอาไว

เมอแสดงผลบนเบราเซอร หากน าเมาสไปวางบรเวณ Rollover Image ทท าไว ภาพจะสลบไปอกภาพหนง




การใสขอความลงในเวบเพจ


การใสขอความลงในเวบเพจ วธใสขอควมลงในเวบเพจสามารถท าไดเหมอนกบโปรแกรมประเภท Microsoft Word ซงเราสามารถพมพขอความทจองการลงในพนทสรางงานทนท ดงน

1. เปดเวบเพจชอ indext.html บนหนาตางพาเนล File

2. วางเคอรเซอรในต าแหนงทตองการพมพขอความ ซงในแถวนเลอกวางคอลมนดานซายแถวท 2 ของตารางหลก

3. พมพความทตองการลงไป


จากนนใหบนทกเวบเพจ แลวทดลองแสดงผลบนเบราเซอร จะไดดงรป

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


2. คลกแทก <td> ใน Tag Selector เพอเปลยนใหเปนคอลมนในตารางหลก หลงคลกแทก <td> แลวเสนกรอบสด าจะลอมรอบคอลมนในตารางหลกแทน

3. คลกเลอก Top ในชอง Vert เพอจดรปแบบใหแสดงบนสดของคอลมน


ขนบรรทดใหมในยอหนาเดม บางครงขอความทพมพลงไปอาจยาวเตมบรรทดหรอตองการขนบรรทดใหม เราสามารถกด Enter ทคยบอรดไดทนท แคะระยะหางระหวางบรรทดจะมากกวาปกต ซงท าใหขอความทแสดงออกมาดไมสวยงาม ดงนน ในโปรแกรม Dreamweaver จงมค าสงทชวยใหระยะหางระหวางบรรทดนอยลง ซงท าไดดงน 1. หากตองการขนยอหนาใหม (ระยะหางระหวาบรรทดจะมากกวาปกต) ใหกด Enter ทคยบอรด ไดทนท 2. หากไมตองการขนยอหนาใหม (ระยะหางระหวางบรรทดจะเทาเดม) ใหกด Shift + Enter ทคยบอรด


เลอกขอความบนเวบเพจ การเลอกขอความบนเวบเพจท าไดเชนเดยวกบโปรแกรมประเภท Microsoft Office Word ดงน 1. เลอกทงบรรทด ท าไดโดยคลกทตนบรรทด 2. เลอกทงประโยค ท าไดโดยดบเบลคลกบนปรโยคทตองการ 3. เลอกเฉพาะทตองการ ท าไดโดยคลกเมาสซายแลวลากคลมเฉพาะสวนทตองการ


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

สไตล CSS


การเลอกสฟอนตใหกบขอความ ขอความทแสดงบนเบราเซอรสามารถเลอกฟอนตทจะใชงานได แตฟอนตนนจะตองเปนฟอนตมาตรฐานเทานน หามเปนฟอนตแปลกๆ เนองจากในเครองของผชม อาจจะไมมฟอนตเหลานน เมอขอความเวบเพจปรากฏบนเบราเซฮร เบราเซอรกจะดงฟอนตอนทมอยในเครองมาแสดงแทน ส าหรบฟอนตภาษาไทยทนยมใชกนจะเปนฟอนต MS San Serif และ Tahoma เนองจากอานและแสดงผลไดบนเบราเซอรทกชนด ซงวธการเลอกฟอนตใหกบขอความ ท าไดดงน 1. เลอกขอความทจะก าหนดชดฟอนต

2. คลกเลอกชดฟอนตทตองการใชทชอง Font ในหนาตาง Properties Inspector สไตล CSS


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

2. เลอกขนาดตวอกษรหรอพมพคาลงไปในชอง Size บนหนาตาง Properties Inspector สไลต CSS

จากนน จะปรากฏหนาตาง New CSS Rule ใหก าหนดคณสมบตเบองตนของ CSS 3. ก าหนดชอเรยกของสไตล ซงควรตงชอเรยกใหสอดคลองกบสงทใหสไตลไปก าหนด ในทนใชชอ leftsubmenu 4. คลกปม OK


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

2. คลก บนหนาตาง Properties Inspector สไตล CSS 3. คลกเลอกสจากตารางส


การก าหนดลกษณะตวอกษร การก าหนดลกษณะตวอกษร ไมวาจะเปนตวหนา ตวเอยง และลกษณะอนๆ สามารถท าไดดงน 1. เลอกขอความทจะก าหนดลกษณะตวอกษร

2. คลกเลอกลกษณะตวอกษรบนหนาตาง Properties Inspector สไตล CSS


แทรกสญลกษณพเศษในเวบเพจ เราสามารถแทรกสญลกษณพเศษ อยางเชน © (Copyright) หรอ ™ (Trademark) ดวยการพมพลงในเวบเพจไดดงน 1. วางเคอรเซอรตรงต าแหนงทตองการแทรกสญลกษณพเศษ

2. คลกแทบ Text บน Insert Bar


3. เลอกสญลกษณพเศษทตองการแทรกลงในเวบเพจในแถบ Characters

จากนนสญลกษณพเศษทเลอกจะถกแทรกลงในต าแหนงทวางเคอรเซอร ดงรป


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


การกอปปและจดวางเนอหาจากเอกสาร Office การกอปปขอความหรอเนอหาทอยในไฟลเอกสาร Office อยางเชน Word หรอ Excel มาวางบนเวบเพจ ม 2 ขนตอนดงน ขนตอนท 1 กอปปเนอหาจากไฟลงานเอหสารตนฉบบ 1. เปดไฟลเอกสาร Office ทตองการกอปป

2. เลอกขอความหรอเนอหาทตองการกอปป 3. คลกเมาสขวาบนขอความ แลวเลอกค าสง Copy


ขนตอนท 2 วางเนอหาลงในเวบเพจทสรางดวย Dreamweaver 1. วางเคอรเซอรตรงต าแหนงทตองการวางขอความ

2. คลกเมน Edit > Past Special

จากนนจะปรากฏหนาตาง Paste Special ขนมาใหเลอกรปแบบการจดวาง


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




การเชอมโยงระหวางเวบดวยลงกและเมน


การสรางลงกไปยงเวบเพจอนภายในเวบไซตเดยวกน

- การสรางลงกดวยวการเอกไฟลเอง 1. เลอกขอความหรอรปภาพทจะสรางลงก

2. คลกปม ทายชองลงก

จากนนหนาตาง Select File จะปรากฏขนมา 3. คลกเลอกโฟลเดอรทเกบไฟลเวบเพจปลายทาง 4. คลกเลอกไฟลเวบเพจปลายทางทตองการ 5. คลกปม OK


6. คลกเลอกวนโดวทใชแสดงเวบเพจปลายทาง ซงสามารถเลอกได ดงน _blank แสดงเวบเพจปลายทางโดยการเปดวนโดวใหม _parent แสดงเวบเพจปลายทางเฟรมทครอบเฟรมปจจบนอย _self แสดงเวบเพจปลายทางเฟรมเดมของลงก _top แสดงเวบเพจปลายทางวนโดวเดม โดยยกเลกเฟรมทครอบอยทหมด ชออนจะปรากฏ แสดงเวบเพจปลายทางวนโดวทมชอนนๆ


- การสรางลงกดวยวธ Point-to-File 1. เลอกขอวามหรอรปทจะสรางเปนลงก

2. คลกลากไอคอน ไปชทเวบเพจปลายทาง


การสรางลงกไปยงเวบไซตอน - การสรางลงกดวยวธการพมพ URL 1. เลอกขอความหรอรปภาพทตองการสรางลงก

2. พมพหรอกอบป URL ของเวบไซตปลายทางมาใสในชอง Link แลวกด Enter ทคยบอรด ซง URL ปลายทางจะตองเปนแบบเตม เชน http://www.samunpri.com เปนตน


- การสรางลงกดวยวธคลกปม Hyperlink 1. เลอกขอความทจะสรางลงก

2. คลกปม Hyperlink บนแทบ Common ใน Insert Bar

จากนนหนาตาง Hyperlink จะปรากฏขนมา พรอมกบขอความของลงกทแสดงในหนาเวบเพจ (ชอง Text) และ URL ของเวบไซตปลายทาง (ชอง Link) โดยอตโนมต 3. คลกเลอกวนโดวทแสดงเวบเพจปลายทาง 4. คลกปม OK


การสรางลงกจากภาพเฉพาะสวนดวย Image Map นอกจากจากจะสามารถลงกดวยรปภาพทงภาพไดแลว ยงสามารเลอกสรางลงกดวยภาพเฉพาะสวนทตองการไดดวยวธ Image Map ซงเรยกสวนทสรางลงกวา ฮอตสปอต (hotspot) ซงลงกในลกษณะนจะใชกบรปแผนท โดยมขนตอนการสรางลงก ดงน 1. คลกเลอกภาพทตองการจะสรางเปนลงก

2. คลกเลอกเครองมอทสราง Image Map บน Properties Inspector ซงสามารถเลอกก าหนดรปทรงของฮอตสปอตได 3 รปแบบ ดงน

สรางฮอตสปอตรปสเหลยม

สรางฮอตสปอตรปวงกลมหรอวงร

สรางฮอตสปอตรปทรงอสระ


3. วาดรปทรงในบรเวณทตองการใหเปนลงก (วธการรปทรงอสระ ท าไดโดยการลากจดตอจด)

4. ก าหนดเวบเพจหรอเวบไซตปลายทางทชอง Link 5. ก าหนดขอความอธบายลงก (ก าหนดหรอไมกได) 6. เลอกวนโดวทแสดงเวบเพจปลายทาง (ก าหนดหรอไมกได)

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




การใสมลตมเดยในหนาเวบเพจ


แทรก Flash ลงในเวบเพจ 1. วางเคอรเซอรตรงต าแหนงทจะแทรกไฟล Flash

2. เลอกค าสง SWF บนแทบ Common ของ Insert Bar เพอแทรกไฟล Flash


3. คลกเลอกโฟลเดอรทเกบไฟล Flash แลวคลกปม OK

เมอเสรจแลวสามารถทดลองเลนไฟล Flash กอนได โดยการคลกปม Play จากนนไฟล Flash จะแสดงบนพนททวางเคอรไว ดงภาพ


แทรกไฟลวดโอ .flv 1. วางเคอรเซอรตรงต าแหนงทจะแทรกไฟล Flash

2. เลอกค าสง FLV บนแทบ Common ของ Insert Bar เพอแทรกไฟล Flash Video


3. จะปรากฏหนาตาง Insert FLV ขนมา แลวคลกปม Browse… เพอเลอกไฟล Flash Video


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


หลงจากนนจะปรากฏไฟล .flv ในพนทสรางานในต าแหนงทวางเคอรเซอรไว ดงรป


เลนเพลงในเวบเพจดวย 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 เพอแทรกไฟลเสยงลงในเวบเพจ


จากนนหนาตาง 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


เมอเสรจเรยบรอยแลวจะแสดงไอคอนของไฟล ดงรป สามารถทดลองเลนไฟลเสยงได โดยคลกปม Play บน Properties Inspector

Documents

ใบความรู้ - Weeblykun9.weebly.com/uploads/4/2/8/4/42848653/dream-cs5.pdf · ใบความรู้ หน่วยการเรียนรู้ที่