Embed Size (px)
Citation preview
ความรพนฐานกอนใชงาน
Adobe Dreamweaver CS5
เอกสารประกอบการสอน
รายวชา การสราง Webpage ดวย Web Editor (ง23256)
เรอง การใชโปรแกรม Adobe Dreamweaver CS5
ก
เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 ชดน ไดจดท าขนเพอ ใชเปนสวนหนงในการเรยนรของผเรยน กลมสาระการเรยนรการงานอาชพและเทคโนโลย สาระการเรยนรเพมเตม รายวชา การสราง Webpage ดวย Web Editor รหสวชา ง23256 ชนมธยมศกษาปท 3 โดยเนนผเรยนเปนส าคญใหสามารถพฒนาความร ความเขาใจเกยวกบเรอง การใชโปรแกรม Adobe Dreamweaver CS5 ทงน ไดขยายผลในดานเนอหาใหกวางและชดเจนมากยงขน ซงผเรยนสามารถน าไปประยกตใชในชวตประจ าวน และใชในอนาคตได เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 ชดนมทงหมด 6 เลม ในแตละเลมมความตอเนองของความร ดงนน ผเรยนจงควรศกษาตามขนตอนทละชดไมควรขาม เพราะอาจท าใหเกดความไมเขาใจในเนอหา เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 ผเรยนควรอานค าแนะน าการใชใหเขาใจกอนเปนล าดบแรก และปฏบตตามดวยความซอสตยตอตนเอง เพอผลทดในการสรางองคความรทยงยนแกตวผเรยน
จรศกด ใจเรอง
ค ำน ำ
ข
เรอง หนำ
ค าชแจงส าหรบใชเอกสารประกอบการสอน 1 ค าชแจงส าหรบคร 2 ค าชแจงส าหรบนกเรยน 3 บทบาทของนกเรยน 4 ตวชวดชนป 4 จดประสงคการเรยนร 4 สาระส าคญ 4 แบบทดสอบกอนเรยน 5 กระดาษค าตอบแบบทดสอบกอนเรยน 7 เนอหา 8 กจกรรมการเรยนรท 1 40 กจกรรมการเรยนรท 2 41 แบบทดสอบหลงเรยน 42 กระดาษค าตอบแบบทดสอบหลงเรยน 44 บรรณานกรม 45 ภาคผนวก เฉลยกจกรรมการเรยนรท 1 47 เฉลยกจกรรมการเรยนรท 2 48 เฉลยแบบทดสอบกอนเรยน 49 เฉลยแบบทดสอบหลงเรยน 50
สำรบญ
1
เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 ไดด าเนนการจดท า
ทงหมด 6 เลม ประกอบดวย เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 เลมท 2 การสรางขอความหรหรา รปภาพตระการตาหนาเวบเพจ เลมท 3 จดระเบยบเวบเพจ ดวยขอบเขตของตาราง เลมท 4 สราง Link เพอเชอมโยง ก าหนดเคาโครงดวย Frame เลมท 5 สรางฟอรมกรอกขอมล แทรกความสมบรณ ดวย Multimedia สรางไอเดย Interactive เลมท 6 เวบเพจเกไก ดวย spry สไตล เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 กลมสาระการเรยนร การงานอาชพและเทคโนโลย สาระการเรยนรเพมเตม รายวชา การสราง Webpage ดวย Web Editor รหสวชา ง23256 ชนมธยมศกษาปท 3 จ านวน 6 เลม เปนเอกสารประกอบการสอนทมการจดกจกรรมการเรยนรทนกเรยนไดรบประสบการณจากการเรยนรโดยตรง เปนเรองทเกยวของกบการสรางงานกราฟก นกเรยนสามารถเรยนรดวยความสนกสนาน ไดรบความรและความเพลดเพลน โดยยดหลกผเรยนเปนศนยกลาง ตลอดจนสอดคลองกบหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551 นกเรยนสามารถน าความรและทกษะ ในการอานทไดจากการท ากจกรรมการเรยนร ไปประยกตใชในชวตประจ าวน และการศกษาหาความรตอไป ในอนาคต
ค าชแจงเอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5
2
เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 เลมน ใชประกอบการจดกจกรรมการเรยนการสอนนกเรยน ชนมธยมศกษาปท 3 โรงเรยนศรรตนวทยา โดยมขนตอนการจดกจกรรมการเรยนการสอน ดงน 1.ครแจกเอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 ใหนกเรยน 2. ครชแจงการใชเอกสารประกอบการสอน ใหนกเรยนทราบกอนลงท าการเรยนการสอนและลงมอปฏบต 3. ครใหนกเรยนท าแบบทดสอบกอนเรยนเพอดวานกเรยนมพนฐานความร ความเขาใจเกยวกบ เรองทเรยนมากนอยเพยงใด 4. ครใหนกเรยนศกษา เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 พรอมท ากจกรรมการเรยนรท 1และ 2 เพอใหนกเรยนไดทบทวนและเกดความรความเขาใจอยางถกตอง 5. ครใหนกเรยนท าแบบทดสอบหลงเรยนเพอดวานกเรยนมความร ความเขาใจหลงเรยนมากนอยเพยงใด 6. ครสงเกตพฤตกรรมคณลกษณะทพงประสงค และบนทกผล 7. ครตรวจคะแนนและบนทกผลลงในแบบเกบคะแนน ในการท าเอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 เลมน 8. ครแจงคะแนนใหนกเรยนทราบและชมเชยนกเรยนพรอมใหค าแนะน าเพมเตม
ค าชแจงส าหรบคร
3
เอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 เลมน ใชประกอบการจดกจกรรมการเรยนการสอน นกเรยนชนมธยมศกษาปท 3 โรงเรยนศรรตนวทยา โดยมขนตอนการจดกจกรรมการเรยนร ดงน 1. นกเรยนฟงค าชแจงการใชเอกสารประกอบการสอนใหเขาใจ 2. ใหนกเรยนรบเอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 3. นกเรยนเรมท าแบบทดสอบกอนเรยนเพอประเมนดวานกเรยนมพนฐานความรความเขาใจมากนอยเพยงใด 4. ใหนกเรยนศกษาเนอหาท าความเขาใจใหดตงแตหนาแรกถงหนาสดทายตามล าดบอยาขามขนตอนและท าแบบฝกหดทายเลมเอกสารประกอบการสอน เรอง การใชโปรแกรม Adobe Dreamweaver CS5 เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 5. เมอพบค าชแจงหรอค าถามในแตละเลมของเอกสารประกอบการสอน ใหนกเรยนอานและท ากจกรรมทก าหนดใหอยางรอบคอบ 6. สงผลงานการท ากจกรรมการเรยนรจากทายเลมเอกสารประกอบการสอนเพอใหครตรวจและบนทกผล 7. เมอท าแบบฝกหดเสรจแลวจดเกบอปกรณใหเรยบรอย 8. เมอนกเรยนทกคนท ากจกรรมการเรยนรครบแลวใหนกเรยนท าแบบทดสอบหลงเรยนดวยความตงใจและซอสตย 9. รบฟงการบอกคะแนน ค าชมเชย และค าแนะน าเพมเตมจากคร
ค าชแจงส าหรบนกเรยน
4
สาระส าคญ
ครตองชแจงใหนกเรยนทราบถงบทบาทของนกเรยน ดงตอไปน 1. นกเรยนตองอานค าสงและปฏบตตามขนตอนอยางระมดระวง 2. นกเรยนตองพยามยามท ากจกรรมตาง ๆ จนสดความสามารถ 3. หลงจากปฏบตกจกรรมแลว นกเรยนจะตองจดเกบอปกรณทกชนเขาทใหเรยบรอย 4. เนองจากมเวลาจ ากด นกเรยนตองตงใจท ากจกรรมใหเสรจอยางรวดเรว
1. ใชเทคโนโลยสารสนเทศน าเสนองานในรปแบบทเหมาะสมกบลกษณะงาน ง 3.1 ม.3/3 2. ใชคอมพวเตอรชวยสรางชนงานจากจนตนาการหรองานทท าในชวตประจ าวนตามหลกการท าโครงงานอยางมจตส านกและความรบผดชอบ ง 3.1 ม.3/4
1. เปาหมายการเรยนร (จดประสงค) 1.1 ดานความร ความเขาใจ (K) 1) รจกและเขาใจความรพนฐานกอนใชงานโปรแกรม Adobe Dreamweaver CS5 2) รจกและเขาใจขนตอนการพฒนา หลกการออกแบบ รปแบบการจดโครงสรางของเวบไซต และรปแบบของหนาเวบเพจได 1.2 ดานทกษะ / กระบวนการ (P) 1) อธบายความรพนฐานกอนใชงานโปรแกรม Adobe Dreamweaver CS5 ได 2) อธบายขนตอนการพฒนา หลกการออกแบบ รปแบบการจดโครงสรางของเวบไซต และรปแบบของหนาเวบเพจได 1.3 ดานคณลกษณะอนพงประสงค (A) 1) มวนย 2) ใฝเรยนร 3) มงมนในการท างาน
ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5 การสรางเวบเพจ รจก Adobe Dreamweaver การเรยกใชโปรแกรม Adobe Dreamweaver CS5 การเรยกใชค าสงของโปรแกรม การยกเลกค าสงและ การท าซ า การออกจากโปรแกรม สวนประกอบของโปรแกรม องคประกอบของหนาเวบเพจ การสรางเวบไซตการสรางหนาเวบเพจใหม การบนทกไฟลเวบเพจทสราง และการเปดดหนาเวบทสรางบนบราวเซอร
บทบาทนกเรยน
ตวชวดชนป
จดประสงคการเรยนร
5
แบบทดสอบกอนเรยน เรอง การใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5
ค าชแจง ใหนกเรยนเลอกค าตอบทถกทสดเพยงค าตอบเดยวและท าเครองหมายกากบาท ( X ) ลงในกระดาษค าตอบ เวลา 10 นาท คะแนน 15 คะแนน ขอ 1 WWW ยอมาจากค าใดตอไปน ก. Word While Web ข. World Wide Web ค. World Wi Web ง. Word Why Web
ขอ 2 ภาษาทางคอมพวเตอรทพฒนาขนใหม ในการใช Adobe Dreamweaver เรยกวา ภาษาใดตอไปน ก. HTML ข. Visual basic ค. Java ง. PHP
ขอ 3 ขอมลจากทกมมโลกทถกโยงใยไปมาถงกนไดราวกบสงใด ก. เสนขนมสายไหม ข. ลกโลก ค. ใยแมงมม ง. สายรง
ขอ 4 ขอใดไมใชสวนประกอบใน WWW ก. Home Page ข. Web Site ค. Web face ง. Web Browser
ขอ 5 ขอใดมการเรยกใชโปรแกรม Adobe Dreamweaver CS5 ไดถกตอง ก. Start Accessories Adobe Dreamweaver CS5 ข. Start ACD system Adobe Dreamweaver CS5 ค. Start Control Panel Adobe Dreamweaver CS5 ง. Start All Programs Adobe Dreamweaver CS5
ขอ 6 โปรแกรม Adobe Dreamweaver มสวนประกอบหลก ๆ ดงตอไปน ยกเวนขอใด ก. เมนบาร (Menu bar) ข. ชาเนล (Chanel) ค. แทบเครองมอ ง. แถบสถานะ (Status bar)
ขอ 7 เนอความ , รปภาพ และเสยง องคประกอบเหลาน เราเรยกวาอะไร ก. Object ข. Catalog ค. Text ง. File ขอ 8 ในก าหนดเวบไซตใหมใน Dreamweaver มกวธ ก. 1 วธ ข. 2 วธ ค. 3 วธ ง. 4 วธ
6
ขอ 9 ขอใดกลาวเกยวกบหนาท Page from Sample ไดถกตอง ก. สรางหนาเวบโดยใชตนแบบ ข. สรางหนาเทมเพลต เพอใชเปนตนแบบในการสรางหนาเวบ ค. สรางหนาเวบแบบอนๆ ง. สรางหนาเวบจากตนแบบท Dreamweaver มให
ขอ 10 หมวด Headings ท าหนาทเกยวกบสงใด ก. ก าหนดแสดงลงคบนหนาเวบ ข. ก าหนดหนาตาของสวนประกอบตางๆ บนหนาเวบ ค. ก าหนดคณสมบตหวของเวบเพจ ง. ก าหนดชอใหสวนหวเรองของเวบเพจ
ขอ 11 ในการใสขอความบนหนาเวบคลายกบการพมพเอกสารในโปรแกรมใด ก. โปรแกรม Word ข. โปรแกรม Excel ค. โปรแกรม paint ง. โปรแกรม bookmark
ขอ 12 หากตองการเปดดหนาเวบทสรางไวบนบราวเซอรดวยวธลด โดยกดปมใด ก. F1 ข. F2 ค. F10 ง. F12
ขอ 13 หนาตางการท างานใน Dreamweaver สารมารถเลอกมมมองการท างานไดกรปแบบ ก. 2 รปแบบ ข. 3 รปแบบ ค. 4 รปแบบ ง. 5 รปแบบ
ขอ 14 แทบ Layout เปนแทบทท าหนาทเกยวกบสงใด ก. รวบรวมเครองมอทใชในการสรางแบบฟอรมสอบถาม ข. รวบรวมเครองมอทชวยในการจดองคประกอบบนหนาเวบ ค. รวบรวมเครองมอส าหรบสรางแอพพลเคชนตดตอกบฐานขอมล ง. รวบรวมเครองมอทชวยใหการสรางฟอรมไดรวดเรวขน
ขอ 15 ขอใดเปนแทบทรวบรวมเครองมอส าหรบวาง และปรบแตงตวอกษรบนหนาเวบ ก. Layout ข. Text ค. Spry ง. Data
7
ขอ ก ข ค ง ขอ ก ข ค ง 1 11 2 12 3 13 4 14 5 15 6 7 8 9 10
กระดาษค าตอบ แบบทดสอบกอนเรยน
8
เวลดไวดเวบ (World Wide Web หรอ WWW ) หรอทเรยกกนสนๆ วา เวบ (Web) เปนบรการขอมลขาวสารในแบบสอประสมหรอมลตมเดย (Multimedia) กลาวคอ ขอมลเหลานจะเปนขอมลทมทงขอความ, ภาพ และเสยงประกอบกน แทนทจะมเพยงตวอกษรละลานตาเพยงอยางเดยว จงสามารถเรยกรองความสนใจจากผชมไดเปนอยางด ความกาวหนาของเทคโนโลยปจจบน ท าใหขอมลประเภทนสามารถแสดงภาพเคลอนไหวในแบบของภาพยนตร และแสดงเสยงไดคณภาพระดบเดยวกบแผนซดเลยทเดยว ขอมลนจะถกแบงเปนหนา ๆ แตละหนาจะถกเขยนขนดวยภาษาทางคอมพวเตอรทพฒนาขนใหม เรยกวา ภาษา HTML (Hyper Text Markup Language) ซงสามารถเชอมโยงถงกนไดโดยไมจ าเปนตองอย ทเดยวกน ดงนน ขอมลจากทกมมโลกจงถกโยงใยไปมาถงกนไดราวกบใยแมงมม จงเรยกวา เวลดไวดเวบ หรอ เครอขายใยแมงมม
Home Page เวบเพจหนาแรกสดของขอมลแตละเรอง ซงกเปรยบเสมอนหนาปกของหนงสอนนเอง สวนของโฮมเพจนจะเปนสวนทบอกใหทราบวาขอมลนเปนขอมลเรองใด พรอมกบมสารบญในการเลอกไปยงหวขอตางๆ ในเรองนนๆ ดวย
Web Site เปนเครองมอทใชในการจดเกบเวบเพจแตละองคกรทจะน าเสนอขอมลของตนในรปของเวบนมกจะมเวบไซตเปนของตนเอง และมกใชชอองคกรเปนชอเวบไซตเพอใหผสนใจสามารถจดจ าไดงาย
Web Page เอกสารขอมลในแตละหนาซงถกเขยนขนดวยภาษา HTML ขอมลทแสดงในเวบเพจแตละหนาน อาจประกอบดวยขอความ , ภาพ และเสยง จงเปนขอมลแบบสอประสม หรอ มลตมเดย
ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5
สวนประกอบใน WWW (World Wide Web)
9
เวบบราวเซอร (Web Browser) เวบเพจแตละหนาเปนเอกสารขอมลทถกเขยนขนดวยภาษา HTML ดงนน การทเครองของเราจะอานและแสดงผลเวบเพจเหลานได จะตองมโปรแกรมพเศษส าหรบท าหนาทนโดยเฉพาะ โปรแกรมเหลาน เรยกวา เวบบราวเซอร (Web Browser) ซงมอยมากมายในปจจบน แตทรจกกนดเหนจะไดแก Internet Explorer ของบรษทไมโครซอฟท Google Chrome โดยม Google เปนผพฒนา และ Mozilla Firefox โดยมทม Mozilla เปนผพฒนา ซงเปน (Open source browser) ทสามารถใหโปรแกรมเมอรทวโลกพฒนาโปรแกรมเสรมเพอใชรวมกบ Mozilla Firefox ไดอกดวย ปจจบนเปนทนยมของผใชงาน Internet เปนอยางมาก ความนยม ของผใชทวโลกใกลเคยงกนกบ Google Chrome เพราะมความปลอดภยสง การเปดหนาเวบเพจท าไดอยางรวดเรว มโปรแกรมเสรม
การสรางเวบเพจ จะกระท าได 2 ทางดวยกน คอ
1. สรางขนเอง โดยการเรยนรค าสงของภาษา HTML แลวพมพเขาไปผานทางโปรแกรม Text Editor ใดๆ เชน Notepad โดยตรง
2. ใชโปรแกรมส าหรบสรางเวบ โดยใชโปรแกรมตาง ๆ ทมความสามารถในการสรางเวบเพจ ซงมอยมากมายหลายโปรแกรมดวยกน การสรางเวบเพจดวยวธน เราไมจ าเปนตองเรยนรค าสงของภาษา HTML แตอยางใด โปรแกรมเหลานจะท าการแปลงใหเราเองโดยอตโนมต ปจจบนมโปรแกรมทก าลงไดรบความนยม Adobe Dreamweaver CS5, Adobe Dreamweaver UltraDev , Adobe HomeSite , Microsoft FrontPages
ภาษา HTML HTML (Hypertext Markup Language) เปนภาษาทใชในการเขยนโปรแกรมภาษาหนงของคอมพวเตอร เพอตอบสนองในการแสดงผลบนจอภาพในระบบอนเตอรเนต (Internet) ในลกษณะของเวบเพจ ซงสามารถแสดงผลไดทงภาษาไทยและภาษาองกฤษ รวมทงรปทรงกราฟฟค, ภาพนง, ภาพเคลอนไหว, เสยง หรอแมกระทงการเชอมโยงไปยงเวบไซตอนๆ ในระบบอนเตอรเนต ภาษา HTML เปนภาษาทมลกษณะเปน โคด (Code) กลาวคอ จะเปนไฟลทเกบขอมลทเปนตวอกษร ในมาตรฐานของ รหสแอสก (ASCII Code) โดยเขยนอยในรปของเอกสารขอความ (Text Document) ดงนนจงท าใหงายตอการเรยนร สามารถก าหนดรปแบบและโครงสรางไดงายดวยภาษา HTML นไดถกพฒนาตงแตรน 1.0 , 2.0 , 3.0 จนถงรน 4.0 ในปจจบน นอกจากน ภาษา HTML ยงมลกษณะพเศษทควรทราบดงน
การสรางเวบเพจ
10
สามารถใชไดกบโปรแกรมสรางและแกไขไฟลขอความ (Text Editor) ไดแก Notepad, Word Processing ตางๆ ซงงายตอการเรยนร และไฟลทไดจะมขนาดเลก
HTML ทถกบนทกใน Text Editor จะมชนดของไฟลเปน HTM ส าหรบในระบบปฏบตการ MS-DOS และจะมชนดเปน HTM หรอ HTML ในระบบปฏบตการยนกซ , วนโดวส
สามารถท างานไดบนเวบบราวเซอรทกตวทสนบสนน HTML ไดแก Netscape รนตางๆ Microsoft Internet Explorer , American Online , Mosaic เปนตน
โครงสรางของภาษา HTML
การสรางเอกสาร HTML มองคประกอบหลกอย 2 สวน คอ สวนทเปนขอความทจะพมพ และสวนทเปนค าสง ส าหรบสวนทเปนค าสงทจะน ามาใชเพอเปลยนแปลงรปรางและแบบของตวอกษรหรอเอกสารใด ๆ (Attribute) จะถกเรยกวา แทก (Tag) และจะเขยนไวอยในเครองหมาย < > ในรปแบบ <แทก> เชน <HTML>, <B> ,<U> เปนตน โดยแตละแทกจะท าหนาทแตกตางกนไป แบงออกเปน 2 กลม ดงน
1. รปแบบค าสงทมเพยงค าสงเดยวหรอมแทกเดยว สามารถใชงานไดเลยและสนสดความหมายดวยตวมนเอง เชน <BR> , <WBR> เปนตน
2. รปแบบค าสงทแยกออกเปน 2 สวน หรอแทกค คอ มสวนเรมตนและสวนจบของค าสง โดยทสวนจบของรปแบบค าสงจะมเครองหมาย Slash ( / ) ก ากบไวหนาแทกนน ๆ ตวอยางเชน <HTML>………</HTML> <B>……………</B> <U>……………</U> เปนตน
ในการเขยนรปแบบค าสงทแยกออกเปน 2 สวน หรอแทกค ค าสงนนจะตองเปนค าสงทสมมาตรกน เชน เมอเปดดวยค าสง ตวหนา <B> และขดเสนใต <U> เวลาปดค าสงกตองเปดดวยขดเสนใตกอนแลวจงปดดวยค าสงตวหนา ดงน
<B><U> ........ขอความทตองการ....... </U ></B >
11
ค าสงในการก าหนดโครงสรางหลก รปแบบการจดวางตอไปนเปนรปแบบมาตรฐาน ประกอบไปดวยค าสงหลกอย 4 ค าสง โดยมลกษณะการจด
วางและรายละเอยดดงน <HTML> <HEAD> <TITLE> ขอความทตองการน าแสดงผลบนแถบชอเรอง (Title bar) </TITLE> </HEAD>
</BODY> ขอความและค าสงใด ๆ ทตองการปรบแตงหนาเวบเพจ </BODY>
</HTML>
ค าสงหลก <HTML> .........</HTML> เปนค าสงทท าหนาทบอกจดเรมตนและจดจบของเอกสาร HTML
ค าสงหลก <HEAD> …… </HEAD> เปนค าสงทท าหนาทก าหนดสวนหวเรอง โดยจะประกอบดวยค าสงหลก <TITLE> …… </TITLE> ซงเปนค าสงทใชก าหนดขอความทตองการน ามาแสดงผลบนแถบชอเรอง (Title bar) โดยก าหนดความยาวของขอความไดไมเกน 64 ตวอกษร
ค าสงหลก <BODY> …… </BODY> เปนค าสงทท าหนาทก าหนดขอความ และรปแบบค าสงใดๆ ทตองการปรบแตงเอกสารบนสวนของจอภาพ และจะแสดงผลบนจอภาพเมอถกเรยกใชจากเวบบราวเซอร
Adobe Dreamweaver CS5 เปนโปรแกรมส าเรจรปทใชส าหรบการพฒนาเวบไซต โดยมคณสมบต ในการออกแบบและสรางเวบเพจ จนถงการพฒนาแอพลเคชนเบองตน ซงในโปรแกรมตวนมเครองมอส าหรบการวางขอความ ภาพกราฟก ตาราง แบบฟอรม พรอมทงมลตมเดยตาง ๆ เพอแสดงใหผพฒนาเวบไซตใชงานไดงาย โดยไมตองรจกภาษา HTML, JavaScript, CSS หรอภาษาสครปตอน ๆ ซงเมอออกแบบและพฒนาเวบไซตในโปรแกรม แลวน ามาแสดงผลทางบราวเซอรกจะเหนเปนลกษณะทไดจดวางไว หรอจะเรยกอกอยางวา What You See Is What You Get (WYSIWYG) จงเหมาะสมกบผทเรมตนและผใชงานทวไปจะน ามาพฒนาเวบไซต
คณสมบตในใหม Adobe Dreamweaver CS5 - สามารถสรางเวบไซตไดอยางงาย คอ ชวยใหขนตอนของการสรางเวบไซตท าไดงายขนกวาเดม - สามารถตรวจสอบโคด CSS อยางรวดเรว โดยใชวธการตรวจสอบจากมมมอง Inspect ท าให
สามารถตรวจสอบโคด CSS ไดและสามารถแกไขทางพาเนลของ CSS Style ไดทนท - ยกเลกคณสมบตของ CSS ไดทนทโดยไมตองอานโคด
รจก Adobe Dreamweaver CS5
12
- สามารถท างานกบ Adobe BrowserLab ซงเปนเครองมออยใน CS Live ทท าหนาทใหบรการออนไลน Web service โดยสามารถเลอกเวบบราวเซอรทตองการแสดงผลไดเลย ทงยงชวยในการตรวจสอบ ความถกตองและความเขากนไดกบเวบบราวเซอรอกดวย
- สนบสนนการสรางเวบไซตดวย HTML 5.0 ซงจะมผลตอการสราง SEO ในอนาคตอกดวยและยงมการปรบปรงโคดตางๆ ใหคอมพวเตอรสามารถแยกแยะเนอหาในเวบเพจไดเขาใจมากยงขน
- มตวชวยสรางค าสงภาษา PHP จะแสดงในรปแบบของฟงกชนตางๆ ขนมาใหเลอกใช โดยไมตองพมพค าสงเอง ซงจะเปนผลดคอไดค าสงทถกตองไมผดพลาดในเวลาแสดงผล
- สนบสนนการท างานรวมกบ Adobe Business Catalyst ซงเปนแอพลเคชนบนเซรฟเวอร ท าหนาทเปนแพลตฟอรมกลางของนกออกแบบเวบเพจ ชวยใหสรางเวบเพจออนไลนไดดยงขน
- รองรบการท างานของ CMS(Content Management System) ซงจะชวยในการจดเนอหาเหมอนการจดการใน Wordpress Joomla และ Drupal
คณสมบตทถกยกเลกในเวอรชนกอน - การตรวจสอบการท างานของ JavaScript ในบราวเซอร
- การสราง Web Photo Album - การแทรก Navigation bar - การใชงาน Behavior บางตว (Show/Hide Pop-up Menu, Show Event For,
Play Sound.Timeline, Control Shockwave or SWF, Check Browser)
1. การเรยกใชโปรแกรม Adobe Dreamweaver CS5 สามารถเรยกใชได 2 วธ ดงน วธท 1 เรยกจากปม Start 1) คลกเมาสทปม Start 2) เลอนเมาสไปท Programs หรอ All Programs คลกเมาสทชอ Adobe Dreamweaver CS5 จะเขาส โปรแกรมไดทนท
Adobe Dreamweaver CS5
การเรยกใชโปรแกรม Adobe Dreamweaver CS5
13
วธท 2 เรยกจากไอคอนบนเดสกทอป 1. ดบเบลคลกเมาสทไอคอนโปรแกรม บนเดสกทอปจะเขาสโปรแกรมไดทนท 2. เมอเปดโปรแกรมแลวจะแสดงหนาตางทเรยกวา Start page ทมตวเลอก ดงน
1) Open a Recent Item เปนการเปดไฟลงานทเคยใชงานแลว โดยจะมรายชอไฟลงานแสดงอยเรยงล าดบจากทเปดใชงานลาสดเปนตนไป หรอจะเลอกไฟลอนท Open กได
2) Create New เปนการสรางไฟลงานใหม โดยปกตแลวในสวนนจะเลอกท HTML ซงเปนการสรางเวบเพจพนฐาน แตถาเลอกหวขออน หนาเวบเพจนน กจะเปนไฟลตามชนดทเลอกใชงาน เชน ไฟลงาน PHP, ASP และ
JavaScript เปนตน 3) Top Features (videos) เปนสวนทใชส าหรบเขาไปดรายละเอยดและเทคนคตางๆ ของการ ใชงานโปรแกรมผานทางเวบไซตของ Adobe 4) เปนสวนของการเปดดค าแนะน าในการใชงานโปรแกรม 5) เปนสวนส าหรบดาวนโหลดโปรแกรมหรอดขอมลบนเวบไซตของ Adobe
1 2 3
4 5
14
1
2
ซงในทน เราจะคลกเลอกเปน เพอสรางหนาเอกสาร HTML ขนมาใหม จากนนจะเขาสหนาจอเรมตนของโปรแกรม Dreamweaver
การเรยกใชค าสงในโปรแกรมท าได 2 วธ ดงน
แถบเมน (Menu bar) เปนสวนทแสดงค าสงทถกจดไวเปนกลมๆ เรยกวา เมน เพอความสะดวก ในการเรยกใชค าสงในแตละเมนจะกระท าไดดงน
1. คลกทชอเมน 2. คลกทชอค าสง
การเรยกใชค าสงจากแถบเมน
การเรยกใชค าสงของโปรแกรม
15
วางเมาส แลวคลก
ขวา
เมนลด (Context Menu) จะเปนค าสงพเศษทโปรแกรมจดเตรยมไวให โดยค าสงเหลาน
จะเปลยนไปตามงานทเราท าขณะนนการเรยกใชเมนลดจะกระท าไดโดยน าเมาสวางบนหนาตางเอกสาร คลกปมขวาของเมาส
เลอกค าสง Edit > Undo และ เลอกค าสง Edit > Redo
การออกจากโปรแกรม Dreamweaver CS5 สามารถท าได 3 วธ ดงน
วธท 1 เลอกเมนค าสง File เลอกค าสง Exit ดงรป
การเรยกใชค าสงจากเมนลด (Context menu)
การยกเลกค าสงและการท าซ า
การออกจากโปรแกรม
16
1 2 3
4
5 6
วธท 2 คลกทปม ของหนาตางโปรแกรม ดงรป
วธท 3 คลกทไอคอน Adobe Dreamweaver CS5 ทมมบนซายของหนาตางโปรแกรม แลวเลอกค าสง Close ดงรป
สวนประกอบของโปรแกรม Dreamweaver CS5
17
คลกเลอกแทบเครองมอ
ซงโปรแกรม Adobe Dreamweaver มสวนประกอบหลก ๆ ดงน 1. เมนบาร (Menu bar) 2. แทบเครองมอ 3. หนาตางการท างาน (Document Window) 4. แถบสถานะ (Status bar) 5. Properties Inspector 6. พาเนล (Panel)
1. เมนบาร (Menu bar) เปนสวนทใชในการสรางและท างานกบโปรแกรม ซงมการแบงเปนกลมค าสงตาง ๆ เปนหมวดหมและเกบไวเปนเมน โดยในแตละเมนกจะมเมนยอยๆ ไวเรยกใชงานตามตองการ
2. แทบเครองมอ เปนเครองมอทใชส าหรบสรางองคประกอบตางๆ (เราเรยกองคประกอบเหลาน วาออบเจค) ทจะน ามาสรางหนาเวบเพจ โดยกลมเครองมอจะถกเกบไวเปนกลมในแทบตางๆ 7 แทบ ดงน
แทบ Common: เปนแทบทรวบรวมเครองมอตางๆทเราเรยกใชงานบอย ไดแก การแทรกภาพ การแทรกตาราง เปนตน
แทบ Layout: เปนแทบทรวบรวมเครองมอทชวยในการจดองคประกอบบนหนาเวบ
แทบ Forms: เปนแทบทรวบรวมเครองมอทใชในการสรางแบบฟอรมสอบถาม และตวเลอกตางๆ
18
แทบ Data: เปนแทบทรวบรวมเครองมอส าหรบสรางแอพพลเคชนตดตอกบฐานขอมล
แทบ Spry: เปนแทบทรวบรวมเครองมอทชวยใหการสรางฟอรมไดรวดเรวขน
แทบ Text: เปนแทบทรวบรวมเครองมอส าหรบวาง และปรบแตงตวอกษรบนหนาเวบ
แทบ Favorites: ใชส าหรบเพมเครองมอทเรยกใชงานบอยๆ โดยเพมจากกลมเครองมออนๆ ไดโดยคลกเมาสขวาบน Insert bar แลวเลอก Customize Favorites (ตวอยางดานลางเปนการดงเครองทใชงานบอยๆ คอ ตาราง รปภาพ และ Rollover Image)
3. หนาตางการท างาน (Document Window) เปนบรเวณทใชในการออกแบบและสรางเวบเพจ ตามตองการ ซงสามารถแทรกขอความ รปภาพ และวตถตาง ๆ ลงไปไดเลย ใน Dreamweaver สารมารถเลอกมมมองการท างานได 3 รปแบบ ใหเราเลอกใชไดตามความถนดของเราโดยการคลกไอคอนทอยในทลบาร ดงน
Show Code View
คลกท จะปรากฏมมมองแสดงโคด HTML หรอสครปตตาง ๆ ของหนาเวบเพจทเราก าลงท างานอย ซงเหมาะส าหรบผสรางเวบไซตทสามารถเขยนโคด HTML หรอสครปตตาง ๆ ได
19
คลก Split
Show Code and Design View คลกท จะแสดงทงโคดพรอมทงหนาเวบเพจทเราก าลงท างานอย เหมาะส าหรบผใชทตองการ
ดการแสดงผลโคดของหนาเวบเพจทใชในการออกแบบ
Show Design View
คลก Code
20
คลกท ส าหรบแสดงหนาจอออกแบบเวบเพจทไมมการแสดงโคดตางๆ เหมาะส าหรบ ผทสรางเวบไซตทไมรเกยวกบการสรางเวบไซตดวยภาษา HTML หรอสครปตตาง ๆ เพราะสามารถจดองคประกอบของภาพและขอความบนหนาเวบนไดอยางงาย ๆ
4. แถบสถานะ (Status bar)
แถบสถานะของ Dreamweaver จะแสดงขอมลเพมเตมเกยวกบงานทเราก าลงท า โดยมสวนประกอบตาง ๆ ดงน
* สวนไวเลอกแทก HTML (Tag Selector) : จะแสดงแทก HTML ของต าแหนงทเราคลกเลอกบนหนาเวบ เชน เราคลกเลอกตาราง กจะแสดงแทก <tabel> ซงจะมประโยชนมากในการเลอกจดแกไข เพราะสามารถเลอกจกหรอแทกทตองการไดอยางแมนย า * ขนาดของหนาจอออกแบบเวบเพจ (Window Size) : จะแสดงขนาดของหนาตางออกแบบเวบเพจ
ขนาดของหนาตางออกแบบเวบเพจ (Window Size)
เครองมอปรบการแสดงผลหนาเวบขณะออกแบบ
ขนาดหนาเวบและเวลาทใชในการโหลด
สวนไวเลอกแทก HTML (Tag Selector)
คลก Design
21
* เครองมอปรบการแสดงผลหนาเวบขณะออกแบบ : Zoom Tool ใชส าหรบยอขยายหนาเวบใหเหนรายละเอยดชดขน หรอใช Hand Tool เลอนดหนาเวบในสวนทมองไมเหน * ขนาดของหนาเวบและเวลาทใชในการโหลด : จะแสดงเวลา (โดยประมาณ) ทใชในการโหลดหนาเวบเพจทเราสราง โดยถาหนาทเราสรางมขนาดใหญเพราะมขอความ และรปภาพจ านวนมาก กจะท าใหตองใชเวลาโหลดนาน นอกจากนนความเรวในการโหลดหนาเวบขนอยกบความเรวในการโอนยายขอมลของผใชทเชอมตอกบเครอขายอนเทอรเนตดวย โดยเรมแรก Dreamweaver จะแสดงเวลานโดยอางองกบโมดมความเรว 60 k (เราสามารถเปลยนคานไดในบทการปรบแตงคา Dreamweaver)
5. Properties Inspector ใชในการก าหนดคาคณสมบตของหนาเวบเพจและในสวนของวตถตาง ๆ ซงจะมรายละเอยดแสดงขนมา เมอมการคลกเลอกวตถนน ๆ เมอใดทเราคลกเลอกภาพ หรอองคประกอบตางๆบนหนาเวบ จะปรากฏ Property Inspector ทแสดงคาตาง ๆ ของภาพใหเราปรบแตงคณสมบตทเกยวของกบองคประกอบนนได ดงตวอยางเมอเราคลกเลอก ทภาพ Property Inspector กจะแสดงคณสมบตตางๆของภาพใหเราปรบแตงได ดงรป
6. พาเนล (Panel) เปนหนาตางหรอชดค าสงพเศษทใชงานเฉพาะดาน เชน ฐานขอมล ไฟลงานตางๆ สรางการเชอมโยง รวมถงเรองการอพโหลดไฟลงานขนเซรฟเวอร ในโปรแกรม Dreamweaver มหนาตางพาเนลตาง ๆ ทชวยเพมความสามารถในการจดการ และออกแบบหนาเวบของเราได ซงแตละพาเนลจะมความสามารถในการจดหนาเวบไดไมเหมอนกน เราสามารถเรยกเปดพาเนลไดจากเมนค าสง Window > และเลอกพาเนลทตองการดงน
Property Inspector แสดงรายละเอยด
ตางๆ
คลกภาพ
22
พาเนล CSS พาเนล CSS เปนพาเนลทใชในการก าหนดรปแบบการแสดงหนาเวบ พาเนลนประกอบไปดวยแทบ CSS Styles และแทบ AP Elements
พาเนล Application พาเนล Application เปนพาเนลทเกยวกบการเชอมโยงเวบไซตของเรากบฐานขอมลบนเครองเซรฟเวอร โดยพาเนลประกอบไปดวยแทบ Database, แทบ Bindings, แทบ Sever Behaviors และแทบ Components
เลอกเมนค าสง Window > เลอกพาเนลทตองการ
กลมหนาตางพาเนลทเราเลอกเปดขนมาใชงาน
23
พาเนล Tag Inspector พาเนล Tag จะรวบรวมการใชงานแทกค าสงของ CSS (Cascade Style Sheet) ทงหมด ซงในพาเนลนจะมสวนประกอบทงหมด 2 แทบ คอ แทบ Attributes และแทบ Behaviors
พาเนล Files พาเนล Files เปนพาเนลทบอกวาภายในเวปไซตของเรา
มเวบเพจ และโฟลเดอรอะไรเกบอยบาง โดยจะประกอบดวยแทบ Fikes, แทบ Assets และแทบ Snippets ทอ านวยความสะดวกใหกบคนทสรางเวบเพจในการแกไขโคด HTML และการแทรกภาษาสครปตตาง ๆ
หากไมจ าเปนตองปรบคาจากพาเนล เราสามารถพบเกบกรอบหนาตางพาเนล เพอเพมพนทในการตกแตง
เวบเพจไดสะดวกขน และเมอตองการท างานก าหนดคาในพาเนล ใหเปดหนาตางกลบมาดงเดมได ดงน
การพบเกบกรอบหนาตางพาเนล
1. คลกเพอเกบกรอบหนาตางพาเนล
24
หากตองการน าหนาตางพาเนลมาอยใกลพนทการท างานในเวบเพจ กสามารถดงพาเนลออกมาจาก
กรอบหนาตางได และเมอใชงานเสรจแลวกดงไปเกบทเดม เพอไมใหเกะกะในพนทท างาน ดงน
ยายหนาตางพาเนลเขา – ออก
2. คลกเพอแสดงกรอบหนาตางพาเนล
1. ลากเมาสทแถบพาเนลไปวางต าแหนงทตองการจะใชงาน
25
ในหนาเวบเพจอาจประกอบดวยองคประกอบหลายแบบหลายชนด เชน เนอความ , รปภาพ , ภาพเคลอนไหว และเสยงประกอบ เปนตน องคประกอบเหลาน เราเรยกวา ออบเจค (Object) ดงตวอยางดานลาง
ในโปรแกรม Dreamweaver CS5น เราสามารถสรางและใสออบเจคชนดตางๆ ไดอยางงายดาย
ซงจะอธบายการใชงานออบเจคแตละชนดตอไป
องคประกอบของหนาเวบเพจ
2. ลากเมาสทแถบพาเนล จากนนปลอยเมาสในต าแหนงทปรากฏแถบสทบ เลอนพาเนลเขามาเกบในกรอบหนาตางพาเนล
รปภาพ
จดเชอมโยง ขอความ
26
ในการสรางเวบไซตดวยโปรแกรม Dreamweaver เราจะเรมจากการก าหนดโครงรางของเวบ และ
สรางโฟลเดอรและไฟลตางๆ ทประกอบกนเปนเวบไซตของรากอน ดงน ก าหนดโครงรางของเวบ
กอนทเราจะสรางเวบไซตขนมา ขอแนะน าใหเรมออกแบบโครงรางคราวๆของเวบไซตนนกอน เพอไมกอใหเกดความสบสนทอาจตามมาในภายหลง โดยเวบไซตทประกอบดวยเวบเพจหลายหนา จะนยมจดเกบไฟลเวบเพจไวในโฟลเดอรแยกตามหวขอตางๆ
ดงตวอยาง ถาเราตองการจดท าเวบไซตขายเครองประดบ กอาจสรางโฟลเดอรชอ “jewelry” เปนโฟลเดอรทรวมเวบเพจ และไฟลตางๆ ทใชไวทงหมด โดยในโฟลเดอรนจะประกอบดวยหลายโฟลเดอรยอยส าหรบแยกเกบไฟลตางๆ ทประกอบกนเปนเวบไซต เชน โฟลเดอร ชอ “home” “new” “catalog” “about” “contact” และจะเกบไฟล .html ทใช สวนโฟลเดอร “images” จะเกบไฟลรปภาพและมลตมเดยทใช ในเวบไซต
เราจะเรมตนโดยการก าหนดเวบไซตใหมในโปรแกรม Dreamweaver โดยม 2 วธทท าได วธแรกจะใช
วซารดชวย และวธทสองเราจะก าหนดคาตางๆ เอง วธท 1 สรางเวบไซตแบบใชวซารด โดย Dreamweaver จะใหเราก าหนดเพยงขอมลพนฐานเกยวกบการสรางเวบไซตใหม เชน ตองการสรางเวบไซตกบเซรฟเวอรแบบไหน, ตองการสรางเวบไซตคนเดยว หรอท างานรวมกนเปนทม เปนตน จากนน Dreamweaver จะชวยก าหนดรายละเอยดเพมเตมใหทงหมด นบเปนวธทสะดวกและรวดเรวดงน
1. เลอกค าสง Site > Manage Sites เพอเขาสการสรางเวบไซตของเรา
การสรางเวบไซต
เรมตนสรางเวบไซต
ก าหนดเวบไซตใหมใน Dreamweaver
27
2. คลกปม New แลวเลอกค าสง Site เพอสรางเวบไซตใหม
3. ตงชอไซต Site Name………………………. ก าหนดพนทจดเกบขอมล Local Site Folder………………
4. โปรแกรมจะแสดงรายการของ Local Site ทเราก าหนดคาไว จากนนคลกทปม Done เพอเขาไปสรางเวบเพจตอไป
28
ในกรณทตองการสรางโฟลเดอรยอยใตโฟลเดอรทเกบเวบไซตของเรา เพอแยกเกบขอมล และหนาเวบ ใหเปนหมวดหม ใหเราคลกเมาสปมขวาทโฟลเดอร Site แลวเลอก New Folder จะปรากฏไฟลใหมในรายการ ใหเราตงชอโฟลเดอรใหมนแลวกดปม <Enter> ดงน
เปลยนชอไฟลและโฟลเดอร การเปลยนชอไฟล และโฟลเดอรทอยภายในเวบไซตของเราจะชวยสอความหมายใหตรงกบเนอหาโดยใหเราคลกทไฟล หรอโฟลเดอรทตองการจะเปลยนชอ คลกซ าอกครง แลวพมพชอไฟล/โฟลเดอรใหม จากนนกดปม <Enter>
1. คลกเมาสปมขวาทโฟลเดอร Site แลวเลอก New Folder 2. ตงชอโฟลเดอรใหมแลวกดปม <Enter>
สรางโฟลเดอรใหมในเวบไซต
29
1. เลอกค าสง File > New…
2. คลกรายการ Blank Page > HTML แลวคลกปม Create
3. แสดงหนาเวบใหม
การสรางหนาเวบเพจใหม
30
นอกจากการสรางหนาเวบเปลา ทหนาตาง New Document จะแสดงหนาเวบแตละแบบใหเราเลอกใชไดเลย ดงน
Blank Page สรางหนาเวบเปลา โดยสามารถก าหนดชนดของหนาเวบทเราจะใชงานได เชน หนาเวบ HTML, เทมเพลต, ไลบราร, XSLT, ActionScript, CSS, JavaScript และ XML หรอหนาเวบแบบไดนามกทสนบสนนการท างานดวยภาษาทใชบนเวบเซรฟเวอร เชน ASP, ColdFusion, JSP และ PHP เปนตน
Blank Template สรางหนาเทมเพลต เพอใชเปนตนแบบในการสรางหนาเวบ
Page from Template สรางหนาเวบโดยใชตนแบบ
Page from Sample สรางหนาเวบจากตนแบบท Dreamweaver มให
Other สรางหนาเวบแบบอนๆ เชน หนาเวบทมการใชภาษา C#, VBScript หรอ เทกซไฟล เปนตน
หนาเวบรปแบบตางๆ ทน ามาใชได
31
การก าหนดรายละเอยดของหนาเวบ โดยเลอกค าสง Modify > Page Properties จะพบกบหนาตาง Page Properties ดงน
หนาตาง Page Properties จะแบงรายละเอยดตางๆของหนาเวบทปรบแตงไดออกเปน 5 หมวด ดงน หมวด Appearance ก าหนดหนาตาของสวนประกอบตางๆ บนหนาเวบ
Page font ก าหนดรปแบบของตวอกษรทใชในเวบเพจ Size ก าหนดขนาดของรปแบบตวอกษรทใช Text color ก าหนดสใหกบตวอกษร Background color ก าหนดสทตองการใหเปนพนหลงของหนาเวบ Background Image ก าหนดภาพทใชเปนฉากหลงของหนาเวบ Repeat ก าหนดการแสดงซ าของภาพพนหลง Left Margin ก าหนดระยะขอบซายของหนาเวบ Right Margin ก าหนดระยะขอบขวาของหนาเวบ Top Margin ก าหนดระยะขอบบนของหนาเวบ Bottom Margin ก าหนดระยะขอบลางของหนาเวบ
รายละเอยดหนาเวบ
32
หมวด Links ก าหนดแสดงลงคบนหนาเวบ
Link font ก าหนดรปแบบของตวอกษรของลงค Size ก าหนดขนาดของรปแบบตวอกษรของลงค Links color ก าหนดสของลงค Rollover links ก าหนดสของลงคเมอใชเมาสไปช Visited links ก าหนดสของลงคเมอถกคลกไปแลว Active links ก าหนดสของลงคเมอก าลงถกคลก Underline style ก าหนดรปแบบการขดเสนใตใหกบลงค
หมวด Headings ก าหนดคณสมบตหวของเวบเพจ
Heading font ก าหนดรปแบบของตวอกษรใหหวขอทแสดงบนหนาเวบ Heading 1-6 ก าหนดขนาดของรปแบบตวอกษรทใชสรางหวขอบนหนาเวบ
33
หมวด Title/Encoding ก าหนดชอใหสวนหวเรองของเวบเพจ และก าหนดชดตวอกษรทใช
Title ก าหนดสวนชอหวเรองใหเวบเพจ Document type ก าหนดประเภทของเวบเพจ
Encoding ก าหนดรปแบบภาษาของตวอกษรทใชในเวบเพจ ส าหรบการแปลงตวอกษร เพอใหเปน ภาษามาตรฐานทตองการ ถาเราตองการใชภาษาไทยใหเลอกไทย (Windows) หรอ Unicode (UTF-8)
หมวด Tracing Image ก าหนดคณสมบตหวของภาพทจะใชเปนแบบในการสรางหนาเวบเพจ
Tracing Image เลอกไฟลภาพทจะใช Image Transparency ก าหนดคาความโปรงใสของภาพ โดยภาพจะเปนแบบสจางๆ ดานหลง
ชวยใหเราเหนต าแหนงวางภาพ วางขอความทถกตอง
34
ขนตอนท 1 ก าหนดหวเรองบนหนาเวบ เราสามารถใสหวเรองบนหนาเวบ หรอทนยมเรยกวาไตเตล (Title) ไดทชอง Title บนแถบเครองมอ ดงน
ขนตอนท 2 แทรกภาพในหนาเวบเพจ
แทรกภาพลงหนาเวบเพจ มวธการดงน
ในชอง Title ใสชอหวเรองทเราตองการบนหนาเวบของเรา
1. เลอกต าแหนงของภาพทตองการจะวางบนหนาเวบแลวเลอกเครองมอ
(image) แทบ Common
การเพมเนอหาในหนาเวบ
35
โปรแกรมจะแสดงคณสมบตของวตถรปภาพใหเราสามารถปรบแตงคาตาง ๆ ไดทงหมด เชนการปรบขนาดรปภาพ การท า Map Images การเชอมโยง การก าหนดใหมค าอธบายรปภาพ
2. เลอกภาพทตองการ
3. คลก เพอตกลงเลอกภาพ
4. เขยนค าอธบายรปภาพ และคลก
ผลลพธทได
36
ขนตอนท 3 ใสขอความบนหนาเวบ การใสขอความบนหนาเวบคลายกบการพมพเอกสารในโปรแกรม Word โดยใหเราคลกบนพนทท างาน แลวพมพขอความบนหนาเวบไดเลย การกดปม <Enter> จะเปนการขนยอหนาใหม และขอความในแตละยอหนาจะถกจดใหเตมหนาตาง ในกรณทเราตองการขนบรรทดใหมในยอหนาเดม ใหกด <Shift + Enter> แทน (หรอคลกแทบ Text และคลกปม กได)
37
หลงจากทเราสรางเวบเพจไดตามตองการแลว ใหท าการบนทกไฟลเวบเพจ โดยเลอกค าสง File > Save เนองจากเรายงไมเคยบนทกไฟลนมากอนโปรแกรม Dreamweaver จะใหเราระบชอไฟลใหมดวย เชน
จากนนเมอใดทเราท าการแกไขหนาเวบ และตองการบนทกการเปลยนแปลง กใหเลอกค าสง File > Save เพอบนทกหนาเวบแทนทไฟลเดมทบนทกไวได แตถาตองการบนทกไฟลนไวทต าแหนงใหม หรอบนทกเปนไฟลใหม ใหเลอกค าสง File > Save As… และก าหนดต าแหนงเกบและชอไฟลได
2. เลอกพนทจดเกบไฟล หากมการก าหนด Local Site ไวโปรแกรมจะแสดงโฟลเดอรทก าหนดไวใหทนท
3. ตงชอไฟล โดยตงชอเปนภาษาองกฤษหามเวนวรรค และสญลกษณทางคณตศาสตร
4. คลกปม เพอบนทกไฟล
1. เลอกค าสง File > Save
บนทกไฟลเวบเพจทสราง
38
ในกรณทเราตองการยกเลกสงทเราไดกระท าไปแลว เราสามารถกระท าไดโดยเปดใชพาเนล History ซงพาเนลนจะชวยใหเราด, ยกเลก, หรอท าซ าการกระท าใด ๆ ทไดกระท าไปแลว การเปดใชพาเนล History จะกระท าไดโดยเลอกเมนค าสง Windows เลอกค าสง History
เมอเราบนทกเวบเพจทเราสรางเสรจเรยบรอยแลว ใหเปดดหนาเวบไดบราวเซอร โดยเลอกค าสง File > Preview in Browser > ชอบราวเซอรทตดตงไวในเครอง (หรอกดคยลด <F12>)
แถบเลอน
ขนตอนการท างาน
บนทกขนตอนการท างาน
คดลอกขนตอนการท างาน ท าซ าขนตอนการท างาน
การแกไขขอผดพลาดดวยพาเนล History
การเปดดหนาเวบทสรางบนบราวเซอร
1. เลอกค าสง File > Preview in Browser > IExplorer หรอ กด <F12>
39
2. แสดงหนาเวบทเราสรางบราวเซอร
40
ค ำชแจง ใหนกเรยนอานค าถามใหเขาใจ และเขยนตอบค าถามในชองวางทก าหนดให ใหถกตอง คะแนน 10 คะแนน 1. จงอธบายการสรางเวบเพจ มกวธ และแตละวธมวธการสรางอยางไร (5 คะแนน) ............................................................................................................................. ......................................................................................................................................................................................................... ................................................................................................................................... ................................................................................................................................................................................................................ .................................................................................................................................................................................... ....................................................... .................................................................... ................................................................................ ................................ 2. จงอธบายสวนประกอบใน WWW (World Wide Web) มาอยางละเอยด (5 คะแนน) ............................................................................................................................. ................................................................................................................................... ..................................................................................................................................................................................................................................... .................................................................................................................................................................................... .................................................................................................................................................................................................................................... ....... ............................................................................................................................. ....................................................... ............................................................................................................................. ................................................................................................................................... ........................................................................................................ ............................................................................................................................. ....................................................... ............................................................................................................................. ................................................................................................................................................................................................................................. .......... ........................................................................................................................ ............................................................
กจกรรมท 1
41
ค ำชแจง ใหนกเรยนอานขอความทก าหนดให และท าเครองหมาย หนาขอทกลาวถกตอง และท าเครองหมาย หนาขอทกลาวผด ใหถกตอง คะแนน 10 คะแนน
1. HTML (Hypertext Markup Language) เปนภาษาทใชในการเขยนโปรแกรมภาษาหนงของคอมพวเตอร
2. Open a Recent Item เปนการเปดไฟลงานทเคยใชงานแลว โดยจะมรายชอไฟลงานแสดงอยเรยงล าดบ จากชอตวอกษรของงาน เปนตนไป
3. ในการยกเลกค าเลอกค าสง Edit > Undo
4. ในการเปดใชงานโปรแกรม คลก Start All Programs Adobe Dreamweaver CS5
5. หนาตางการท างาน (Document Window) ใชส าหรบเพมเครองมอทเรยกใชงานบอยๆ โดยเพมจากกลมเครองมออนๆ
6. ในหนาเวบเพจอาจประกอบดวยองคประกอบหลายองคประกอบซงเรยกวา ออบเจค (Object)
7. Other สรางหนาเวบแบบอนๆ เชน หนาเวบทมการใชภาษา C#, VBScript หรอ เทกซไฟล
8. ในการสรางเวบไซตดวยโปรแกรม Dreamweaver เราจะเรมจากการก าหนดโครงรางของเวบ
9. Page font คอการก าหนดหนาของตวอกษรทใชในเวบเพจ
10. การเปดใชพาเนล History จะกระท าไดโดยเลอกเมนค าสง F1
กจกรรมท 2
42
แบบทดสอบหลงเรยน เรอง การใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ความรพนฐานกอนใชงาน Adobe Dreamweaver CS5
ค าชแจง ใหนกเรยนเลอกค าตอบทถกทสดเพยงค าตอบเดยวและท าเครองหมายกากบาท ( X ) ลงในกระดาษค าตอบ เวลา 10 นาท คะแนน 15 คะแนน
ขอ 1 ขอมลจากทกมมโลกทถกโยงใยไปมาถงกนไดราวกบสงใด ก. เสนขนมสายไหม ข. ลกโลก ค. ใยแมงมม ง. สายรง ขอ 2 ในก าหนดเวบไซตใหมใน Dreamweaver มกวธ ก. 1 วธ ข. 2 วธ ค. 3 วธ ง. 4 วธ
ขอ 3 ขอใดมการเรยกใชโปรแกรม Adobe Dreamweaver CS5 ไดถกตอง ก. Start Accessories Adobe Dreamweaver CS5 ข. Start ACD system Adobe Dreamweaver CS5 ค. Start Control Panel Adobe Dreamweaver CS5 ง. Start All Programs Adobe Dreamweaver CS5
ขอ 4 ขอใดไมใชสวนประกอบใน WWW ก. Home Page ข. Web Site ค. Web face ง. Web Browser
ขอ 5 ภาษาทางคอมพวเตอรทพฒนาขนใหม ในการใช Adobe Dreamweaver เรยกวา ภาษาใดตอไปน ก. HTML ข. Visual basic ค. Java ง. PHP
ขอ 6 โปรแกรม Adobe Dreamweaver มสวนประกอบหลก ๆ ดงตอไปน ยกเวนขอใด ก. เมนบาร (Menu bar) ข. ชาเนล (Chanel) ค. แทบเครองมอ ง. แถบสถานะ (Status bar)
ขอ 7 เนอความ , รปภาพ และเสยง องคประกอบเหลาน เราเรยกวาอะไร ก. Object ข. Catalog ค. Text ง. File ขอ 8 WWW ยอมาจากค าใดตอไปน ก. Word While Web ข. World Wide Web ค. World Wi Web ง. Word Why Web
43
ขอ 9 หากตองการเปดดหนาเวบทสรางไวบนบราวเซอรดวยวธลด โดยกดปมใด ก. F1 ข. F2 ค. F10 ง. F12
ขอ 10 ขอใดกลาวเกยวกบหนาท Page from Sample ไดถกตอง ก. สรางหนาเวบโดยใชตนแบบ ข. สรางหนาเทมเพลต เพอใชเปนตนแบบในการสรางหนาเวบ ค. สรางหนาเวบแบบอนๆ ง. สรางหนาเวบจากตนแบบท Dreamweaver มให
ขอ 11 ในการใสขอความบนหนาเวบคลายกบการพมพเอกสารในโปรแกรมใด ก. โปรแกรม Word ข. โปรแกรม Excel ค. โปรแกรม paint ง. โปรแกรม bookmark
ขอ 12 หมวด Headings ท าหนาทเกยวกบสงใด ก. ก าหนดแสดงลงคบนหนาเวบ ข. ก าหนดหนาตาของสวนประกอบตางๆ บนหนาเวบ
ค. ก าหนดคณสมบตหวของเวบเพจ ง. ก าหนดชอใหสวนหวเรองของเวบเพจ
ขอ 13 หนาตางการท างานใน Dreamweaver สารมารถเลอกมมมองการท างานไดกรปแบบ ก. 2 รปแบบ ข. 3 รปแบบ ค. 4 รปแบบ ง. 5 รปแบบ
ขอ 14 ขอใดเปนแทบทรวบรวมเครองมอส าหรบวาง และปรบแตงตวอกษรบนหนาเวบ ก. Layout ข. Text ค. Spry ง. Data
ขอ 15 แทบ Layout เปนแทบทท าหนาทเกยวกบสงใด ก. รวบรวมเครองมอทใชในการสรางแบบฟอรมสอบถาม ข. รวบรวมเครองมอทชวยในการจดองคประกอบบนหนาเวบ ค. รวบรวมเครองมอส าหรบสรางแอพพลเคชนตดตอกบฐานขอมล ง. รวบรวมเครองมอทชวยใหการสรางฟอรมไดรวดเรวขน
44
ขอ ก ข ค ง ขอ ก ข ค ง 1 11 2 12 3 13 4 14 5 15 6 7 8 9 10
กระดาษค าตอบ แบบทดสอบหลงเรยน
45
กระทรวงศกษาธการ. คมอพฒนาสอการเรยนร. กรงเทพมหานคร : ครสภาลาดพราว, 2551. กระทรวงศกษาธการ. หลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551. กรงเทพมหานคร :
โรงพมพชมนมสหกรณการเกษตรแหงประเทศไทย, 2551. จรส จรสรงเรองชย. ออกแบบและพฒนาเวบไซตดวย Dreamweaver CS5. กรงเทพมหานคร : บรษท ซเอด ยเคชน จากด (มหาชน), 2555. พนจนทร ธนวฒนเสถยร. Adobe Dreamweaver CS5 ฉบบผเรมตน. กรงเทพมหานคร : บรษท ซเอด ยเคชน จากด (มหาชน), 2554. สานกวชาการและมาตรฐานการศกษา. ตวชวดและสาระการเรยนรกลมสาระการเรยนรการงาน อาชพและเทคโนโลย ตามหลกสตรแกนกลางการศกษาขนพนฐาน พทธศกราช 2551. กรงเทพมหานคร : โรงพมพชมนมสหกรณการเกษตรแหงประเทศไทย, 2551.
บรรณานกรม
46
ภาคผนวก
47
ค ำชแจง ใหนกเรยนอานค าถามใหเขาใจ และเขยนตอบค าถามในชองวางทก าหนดให ใหถกตอง คะแนน 10 คะแนน
ค ำชแจง ใหนกเรยนอานค าถามใหเขาใจ และเขยนตอบค าถามในชองวางทก าหนดให ใหถกตอง คะแนน 10 คะแนน 1. จงอธบายการสรางเวบเพจ มกวธ และแตละวธมวธการสรางอยางไร (5 คะแนน) ............................................................................................................................. ......................................................................................................................................................................................................... .........................................................................................ขนอยกบดลยพนจของครผสอน.......................................................................... ............................................................................................................................. ............................................................................................................................................................................................... ........................................... ....................................................................................... ............................................................................................. 2. จงอธบายสวนประกอบใน WWW (World Wide Web) มาอยางละเอยด (5 คะแนน)
ตอบ 1. Home Page เวบเพจหนาแรกสดของขอมลแตละเรอง ซงกเปรยบเสมอนหนาปกของหนงสอนนเอง สวนของโฮมเพจนจะเปนสวนทบอกใหทราบวาขอมลนเปนขอมลเรองใด พรอมกบมสารบญในการเลอกไปยงหวขอตางๆ ในเรองนนๆ ดวย 2. Web Site เปนเครองมอทใชในการจดเกบเวบเพจแตละองคกรทจะน าเสนอขอมลของตนในรปของเวบนมกจะมเวบไซตเปนของตนเอง และมกใชชอองคกรเปนชอเวบไซตเพอใหผสนใจสามารถจดจ าไดงาย 3. Web Page เอกสารขอมลในแตละหนาซงถกเขยนขนดวยภาษา HTML ขอมลทแสดงในเวบเพจแตละหนานอาจประกอบดวยขอความ , ภาพ และเสยง จงเปนขอมลแบบสอประสม หรอ มลตมเดย 4. เวบบราวเซอร (Web Browser) ปจจบนเปนทนยมของผใชงาน Internet เปนอยางมาก ความนยมของผใชทวโลกใกลเคยงกนกบ Google Chrome เพราะมความปลอดภยสง การเปดหนาเวบเพจท าไดอยางรวดเรว มโปรแกรมเสรม
กจกรรมท 1 เรอง กำรใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ควำมรพนฐำนกอนใชงำน Adobe Dreamweaver CS5
48
ค ำชแจง ใหนกเรยนอานขอความทก าหนดให และท าเครองหมาย หนาขอทกลาวถกตอง และท าเครองหมาย หนาขอทกลาวผด ใหถกตอง คะแนน 10 คะแนน 1. HTML (Hypertext Markup Language) เปนภาษาทใชในการเขยนโปรแกรมภาษาหนง ของคอมพวเตอร
2. Open a Recent Item เปนการเปดไฟลงานทเคยใชงานแลว โดยจะมรายชอไฟลงานแสดง อยเรยงล าดบจากชอตวอกษรของงาน เปนตนไป
3. ในการยกเลกค าเลอกค าสง Edit > Undo
4. ในการเปดใชงานโปรแกรม คลก Start All Programs Adobe Dreamweaver CS5
5. หนาตางการท างาน (Document Window) ใชส าหรบเพมเครองมอทเรยกใชงานบอยๆ โดยเพมจากกลมเครองมออนๆ
6. ในหนาเวบเพจอาจประกอบดวยองคประกอบหลายองคประกอบซงเรยกวา ออบเจค (Object)
7. Other สรางหนาเวบแบบอนๆ เชน หนาเวบทมการใชภาษา C#, VBScript หรอ เทกซไฟล
8. ในการสรางเวบไซตดวยโปรแกรม Dreamweaver เราจะเรมจากการก าหนดโครงรางของเวบ
9. Page font คอการก าหนดหนาของตวอกษรทใชในเวบเพจ
10. การเปดใชพาเนล History จะกระท าไดโดยเลอกเมนค าสง F1
กจกรรมท 2 เรอง กำรใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ควำมรพนฐำนกอนใชงำน Adobe Dreamweaver CS5
49
แบบทดสอบกอนเรยน เรอง กำรใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ควำมรพนฐำนกอนใชงำน Adobe Dreamweaver CS5
1.ข 2.ก 3.ค 4.ค 5.ง
6.ข 7.ก 8.ข 9.ง 10.ค
11.ก 12.ง 13.ข 14.ข 15.ข
50
แบบทดสอบหลงเรยน เรอง กำรใชโปรแกรม Adobe Dreamweaver CS5
เลมท 1 ควำมรพนฐำนกอนใชงำน Adobe Dreamweaver CS5
1.ค 2.ข 3.ง 4.ค 5.ก
6.ข 7.ก 8.ข 9.ง 10.ง
11.ก 12.ค 13.ข 14.ข 15.ข
