ใบความร หน วยการเร ยนร ท 2 การเร มใช งาน 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