ว ชา การสร างเว บเพจ ( ) หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 ส ข ม แป นศร ว ทยาล ยอาช วศ กษานครศร ธรรมราช - PDF

Description
ว ชา การสร างเว บเพจ ( ) หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 ส ข ม แป นศร ว ทยาล ยอาช วศ กษานครศร ธรรมราช 68 หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 สาระสาค ญ Adobe Dreamweaver

Please download to get full document.

View again

of 40
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Reviews

Publish on:

Views: 21 | Pages: 40

Extension: PDF | Download: 0

Share
Transcript
ว ชา การสร างเว บเพจ ( ) หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 ส ข ม แป นศร ว ทยาล ยอาช วศ กษานครศร ธรรมราช 68 หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 สาระสาค ญ Adobe Dreamweaver CS6 เป นโปรแกรมส าหร บพ ฒนาเว บไซต ในล กษณะ WYSIWYG (What You See Is What You Get) ท ได ร บความน ยมอย างมาก เหมาะส าหร บผ เร มต นใช งาน เพราะเป นโปรแกรมท ใช งานง าย ม ค ณสมบ ต ครอบคล มต งแต การออกแบบเว บไซต การสร างเว บไซต การจ ดการไซต และการจ ดการเว บเพจ สมรรถนะอาช พ 1. แสดงความร เก ยวก บโปรแกรม Adobe Dreamweaver CS6 ได ถ กต อง 2. ใช โปรแกรม Adobe Dreamweaver CS6 ได ถ กต อง 3. น อมนาหล กปร ชญาของเศรษฐก จพอเพ ยงไปใช ในการปฏ บ ต งานได จ ดประสงค การเร ยนร จ ดประสงค ท วไป 1. เพ อให ม ความร เก ยวก บโปรแกรม Adobe Dreamweaver CS6 2. เพ อให ม ท กษะในการใช โปรแกรม Adobe Dreamweaver CS6 3. เพ อให ม ก จน ส ยท ด น อมนาหล กปร ชญาของเศรษฐก จพอเพ ยงไปใช ในการปฏ บ ต งาน จ ดประสงค เช งพฤต กรรม 1. บอกว ธ การเร มต นใช งานโปรแกรม Adobe Dreamweaver CS6 ได 2. บอกส วนประกอบหน าจอโปรแกรม Adobe Dreamweaver CS6 ได 3. สร างเว บไซต ได 4. จ ดการไซต ได 5. จ ดการเว บเพจได 6. ม ก จน ส ยท ด ม ค ณธรรมจร ยธรรม ค าน ยมท ด ในการใช คอมพ วเตอร ปฏ บ ต งานด วย ความร บผ ดชอบ ซ อส ตย ใฝ ร ม ความค ดร เร มสร างสรรค ละเอ ยด รอบคอบ ปลอดภ ย และท างานร วมก บ ผ อ นได 69 ห วข อเร อง 1. เร มต นใช งานโปรแกรม Adobe Dreamweaver CS6 2. ส วนประกอบหน าจอโปรแกรม Adobe Dreamweaver CS6 3. การสร างเว บไซต 4. การจ ดการไซต 5. การจ ดการเว บเพจ 70 แบบทดสอบก อนเร ยน หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 คาช แจง จงเล อกคาตอบท ถ กต องท ส ดเพ ยงข อเด ยว แล วทาเคร องหมายกากบาท ( ) ลงใน กระดาษคาตอบท ตรงก บต วเล อกท ต องการตอบ ใช เวลา 10 นาท 1. โปรแกรม Adobe Dreamweaver CS6 จะต องต ดต งบนระบบปฏ บ ต การ Windows ไม ต ากว า ร นใด ก. ไม ต ากว า Windows XP ข. ไม ต ากว า Windows XP (SP3) ค. ไม ต ากว า Windows 7 ง. ไม ต ากว า Windows 8 2. ในหน าต างก อนเร มใช งานส วน Open a Recent Item ใช สาหร บทาอะไร ก. สาหร บเป ดไฟล เอกสารท เคยใช งานมาก อนหน าน ข. สาหร บลบไฟล เอกสารท เคยใช งานมาก อนหน าน ค. สาหร บสร างไฟล ใหม สามารถเล อกร ปแบบท ต องการได ง. สาหร บเป ดว ด โอแนะนาเทคน คการใช งานผ านเว บไซต Adobe 3. พาเนลในข อใด เป นกล มคาส งสาหร บจ ดร ปแบบข อความ ก. พาเนล Common ข. พาเนล Layout ค. พาเนล Forms ง. พาเนล Text 4. การแสดงพ นท สาหร บสร างหน าเว บเพจ สามารถแสดงพ นท ในม มมองได ก ม มมอง ก. 2 ม มมอง ข. 3 ม มมอง ค. 4 ม มมอง ง. 5 ม มมอง 5. ไอคอนใดต อไปน ใช สาหร บในการสร างไซต ก. ข. ค. ง. 71 6. เม อต องการแก ไขไซต ต องเล อกรายการใด ก. Editor Site ข. Creator Site ค. New Site ง. Manage Site 7. ป มใดต อไปน ใช สาหร บลบไซต ก. ข. ค. ง. 8. ข อใดต อไปน ไม ใช เป นว ธ การสร างเว บเพจใหม ก. สร างเว บเพจใหม จาก Welcome Screen ข. สร างเว บเพจใหม จากพาเนล File ค. สร างเว บเพจใหม จากเมน File ง. สร างเว บเพจใหม จากพาเนล Insert 9. ข อใดเป นการกาหนดว ธ การเข ารห สภาษาให เป นค าเร มต นของท กเว บเพจ ท ถ กต อง ก. File New ข. Edit Preferences ค. Site Manage Site ง. Modify Page Properties 10. การบ นท กเว บเพจ ต องบ นท กเป นไฟล ท ม นามสก ลใด ก..htp หร อ.http ข..doc หร อ.hdoc ค..htm หร อ.htmx ง..htm หร อ.html 72 หน วยท 3 พ นฐานการใช โปรแกรม Adobe Dreamweaver CS6 3.1 เร มต นใช งานโปรแกรม Adobe Dreamweaver CS6 Adobe Dreamweaver CS6 เป นโปรแกรมส าเร จร ปท ใช ส าหร บสร างเว บไซต เหมาะ สาหร บน กพ ฒนาเว บไซต ต งแต ม อใหม ไปจนถ งม ออาช พ โดยสามารถน าข อความและภาพมาประกอบ เป นหน าเว บเพจได อย างง าย ๆ และสามารถเพ มล กเล นทางด านม ลต ม เด ย ตลอดจนการต ดต อก บ ฐานข อม ลท ทาได ง าย นอกจากน Adobe Dreamweaver CS6 ย งเป นโปรแกรมประเภท WYSIWYG อ านว า ว ซซ ว ก (What You See Is What You Get) แปลว า ค ณเห นอย างไรค ณก ได ร บอย างน น หมายความว าล กษณะข อความ การวางภาพกราฟ ก บนเว บเพจท าไว อย างไร เม อท าการแสดงผล บนบราวเซอร แล ว ล กษณะของข อความหร อภาพกราฟ กท ได ก จะเหม อนก บท ทาไว การต ดต งโปรแกรม Adobe Dreamweaver CS ความต องการของระบบ การต ดต งโปรแกรม Adobe Dreamweaver CS6 บนระบบปฏ บ ต การ Windows ให สามารถใช งานได น น จะต องม องค ประกอบของฮาร ดแวร และระบบ ปฏ บ ต การด งน 1) หน วยประมวลผลกลาง (CPU) Intel Pentium 4 หร อ AMD Athlon 64 2) หน วยความจา (RAM) 512 MB ข นไปฮาร ดด สก ม พ นท ว าง 1 GB ข นไป 3) ความละเอ ยดของจอภาพไม น อยกว า พ กเซล และการ ด จอสน บสน นการแสดงผลแบบ 16 bit 4) ไดร ฟ DVD ROM 5) ระบบปฏ บ ต การไม ต ากว า Windows XP (SP3) การต ดต งโปรแกรม Adobe Dreamweaver CS6 ม ข นตอนการต ดต ง แสดงด งภาพท นาแผ นต ดต ง Adobe CS6 Master Collection ใส เข าไปใน Drive DVD-ROM ด บเบ ลคล กไฟล setup.exe เพ อเร มการต ดต ง 73 2 จะปรากฏหน าจอเร ม ต ดต งโปรแกรม ให รอส กคร 3 จะปรากฏหน าต าง Welcome ต อนร บการต ดต ง โปรแกรม จะม ให เล อกการต ดต ง 2 แบบค อ Install เป น การต ดต งแบบม ล ขส ทธ จะต องม Serial Number และ แบบ Try เป นการต ดต งแบบทดลองใช งานโปรแกรม 30 ว น ในการต ดต งคร งน ให เล อกแบบ Install 4 จะปรากฏหน าต างแสดง ล ขส ทธ การใช งานโปรแกรม 5 คล กป ม Accept เพ อ ยอมร บการใช งานโปรแกรม 74 6 ใส Serial Number 7 คล กป ม Next 8 จะปรากฏหน าต าง Option ให คล กเคร องหมายถ ก หน าช อโปรแกรม Adobe Dreamweaver CS6 9 กาหนดภาษาท ต องการใช เป น English 10 คล กป ม Install เพ อเร มการต ดต ง 11 ระบบจะทาการ ต ดต งโปรแกรมลงบน เคร องคอมพ วเตอร 75 12 เม อต ดต งโปรแกรมเสร จเร ยบร อยแล ว จะแสดงหน าต าง Installation Complete 13 คล กป ม Close ภาพท 3.1 ข นตอนการต ดต งโปรแกรม Adobe Dreamweaver CS การเป ดและออกจากโปรแกรม Adobe Dreamweaver CS การเป ดโปรแกรม Adobe Dreamweaver CS6 เม อต ดต งโปรแกรม Adobe Dreamweaver CS6 เร ยบร อยแล ว สามารถเป ดใช งานโปรแกรมได ท นท ม ข นตอนแสดง ด งภาพท คล กป ม Start 2 คล กท All Programs 3 คล กท Adobe Master Collection CS6 4 คล กท Adobe Dreamweaver CS6 76 5 โปรแกรม Adobe Dreamweaver CS6 จะเป ดข นมา 6 ในการเป ดโปรแกรม Adobe Dreamweaver CS6 คร งแรก จะ ปรากฏหน าต าง Default Editor 7 คล กป ม OK 8 จะปรากฏหน าต าง Welcome Screen ก อนเร มใช งานโปรแกรม ภาพท 3.2 การเป ดโปรแกรม Adobe Dreamweaver CS6 ภายในหน าต าง Welcome Screen ประกอบด วยส วนสาค ญ 3 ส วน ด งน 1) Open a Recent Item สาหร บเป ดไฟล เอกสารท เคยใช งานมาก อนหน าน 2) Create New สาหร บสร างไฟล ใหม สามารถเล อกร ปแบบท ต องการได 3) Top Features เป นว ด โอแนะนาเทคน คการใช งานผ านเว บไซต Adobe 77 ด งภาพท การออกจากโปรแกรม Adobe Dreamweaver CS6 ม ข นตอนแสดง 1 คล กป ม หร อคล กเมน File แล วคล กคาส ง Exit 2 คล กป มคาส ง Close ภาพท 3.3 การเป ดและออกจากโปรแกรม Adobe Dreamweaver CS6 3.2 ส วนประกอบหน าจอโปรแกรม Adobe Dreamweaver CS6 เม อเป ดโปรแกรม Dreamweaver แล ว จะได หน าต างโปรแกรม ซ งม ส วนประกอบหล ก แสดงด งภาพท Menu bar 2 Document Toolbar 3 Application bar 4 Workspace layout 5 Insert panel 7 Document Area 6 Panel Group 8 Status bar 9 Panel Property ภาพท 3.4 ส วนประกอบหน าจอโปรแกรม Adobe Dreamweaver CS6 Menu bar Menu bar เป นท รวมคาส งท งหมดของโปรแกรม Dreamweaver ท ใช ในการ จ ดการก บไฟล เว บเพจ ประกอบด วยเมน แสดงด งภาพท 3.5 ภาพท 3.5 Menu bar Menu bar ประกอบด วยเมน ย อย ด งน File เป นเมน ค าส งส าหร บจ ดการก บไฟล เว บเพจ เช น สร างเว บเพจใหม บ นท กเว บเพจ เป ดเว บเพจ แสดงเว บเพจผ านบราวเซอร หร อออกจากโปรแกรม เป นต น Edit เป นเมน คาส งสาหร บการแก ไข เช น ค ดลอง ต ด วาง ค นหา รวมถ งการ ต งค าการทางาน (Preference) ต าง ๆ เป นต น View เป นเมน ค าส งส าหร บปร บเปล ยนม มมองของเว บเพจขณะท างาน เป นต น Insert เป นเมน ค าส งส าหร บแทรกว ตถ ต าง ๆ เช น ร ปภาพ เส ยง ตาราง ฟอร มต าง ๆ ลงบนเว บเพจ เป นต น Modify เป นเมน ค าส งส าหร บแก ไขว ตถ ต าง ๆ บนเว บเพจ เช น การแก ไข ร ปแบบต วอ กษร การแก ไขร ปภาพ การจ ดการตาราง หร อการกาหนดค ณสมบ ต ของเว บเพจ เป นต น Format เป นเมน ค าส งส าหร บเปล ยนร ปแบบโดยรวมของข อความบนเว บ เพจ เช น การจ ดร ปแบบข อความ การสร างห วข อรายการ เป นต น Command เป นเมน คาส งสาหร บจ ดการก บช ดคาส งต าง ๆ บนเว บเพจท ทางานอย Site เป นเมน ค าส งส าหร บจ ดการก บ Site เช น สร าง Site หร อแก ไข Site ท ทางาน รวมถ งการตรวจสอบล งค ต าง ๆ ใน Site เป นต น Window เป นเมน ท ใช ในการเป ดหร อป ดพาเนลท ทางานอย Help เป นเมน ท ใช ในการขอความช วยเหล อผ านเว บไซต Adobe Toolbar Toolbar เป นแถบเคร องม อท ใช รวมป มค าส งท จ าเป นต องใช งานเป นประจา สามารถ เป ด/ป ดการใช งานได Toolbars ประกอบด วยแถบเคร องม อด งน Document Toolbar เป นท ลบาร ท ประกอบไปด วยป มค าส งในการ ก าหนดม มมองการแสดงเว บเพจ การแสดงความละเอ ยดของหน าเว บเพจ การโอนย ายไฟล หร อการ กาหนดคาอธ บายเว บเพจเป นต น แสดงด งภาพท 3.6 79 ภาพท 3.6 Document Toolbar Standard Toolbar เป นท ลบาร ท ประกอบไปด วยป มค าส งพ นฐาน ท ใช ในการจ ดการไฟล เช น การสร างไฟล บ นท กไฟล เป ดไฟล ค ดลอก ย าย หร อวางเน อหา ตลอดจนการยกเล กหร อทาซ าคาส งด วย แสดงด งภาพท 3.7 ภาพท 3.7 Standard Toolbar Style Rendering Toolbar เป นท ลบาร ท ออกแบบมาเพ อให แสดงการ ท างานของหน าเว บเพจท ใช Style Sheet บนม เด ยประเภทต าง ๆ เช น บนหน าจอคอมพ วเตอร บน เคร องพ มพ บนโปรเจ คเตอร บนท ว การเพ ม/ลดขนาดต วอ กษร ตลอดจนการแสดงส ของสถานการณ เช อมโยง แสดงด งภาพท 3.8 ภาพท 3.8 Style Rendering Toolbar Application bar เป นแถบประย กต ประกอบด วยแถบเคร องม อแสดงด งภาพท 3.9 ภาพท 3.9 Application bar Application bar ประกอบด วย สาหร บเล อกร ปแบบการแสดงพ นท สาหร บสร างหน าเว บเพจ เช น Code Split หร อ Design เป นต น สาหร บค นหา และต ดต งโปรแกรมเสร ม สาหร บบร หารจ ดการไซต เช นสร างไซต ใหม Workspace switcher เป นป มส าหร บเปล ยนม มมองพ นท ท างาน (Workspace) โดยสามารถเล อกได ว า ต องการใช งานร ปแบบในล กษณะใด ซ งใน Adobe Dreamweaver CS6 ม ให เล อกใช 11 แบบ แสดง ด งภาพท 3.10 80 ม มมองพ นท ทางาน ภาพท 3.10 Workspace switcher Insert panel เป นพาเนลท รวบรวมกล มค าส งท ใช ส าหร บสร างและแทรกออบเจ คต าง ๆ โดยจะ แบ งออกเป นกล ม เพ อให ใช งานได สะดวก ต วอย างกล มคาส งท ใช งาน แสดงด งภาพท 3.11 Common เป นกล มคาส งสาหร บวางออบเจ ค ท ต องใช งานเป นประจา เช น ร ปภาพ ตาราง ไฟล ม ลต ม เด ย หร อล งค เป นต น Layout เป นกล มคาส งสาหร บวางออบเจ ค ท ใช จ ดหน าเว บเพจ เช น AP Element หร อ ตาราง เป นต น Forms เป นกล มคาส งสาหร บวางออบเจ ค ท เป นฟอร มร บข อม ล 81 Text เป นกล มค าส งสาหร บจ ดร ปแบบ ข อความ
Related Search
Similar documents
View more...
We Need Your Support
Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

Thanks to everyone for your continued support.

No, Thanks