ใบความรู้ หน่วยที่ 3

หนว่ ยที่ 3 การตดิ ตั้งและการใช้งาน โปรแกรม Adobe Dreamweaver

3.1 คุณสมบตั ิของโปรแกรม Adobe Dreamweaver CS61 adobe Dreamweaver เปน็ โปรแกรมสาหรบั พฒั นาระบบเว็บไซต์เป็นโปรแกรมประเภท WYSIWYGWhat you see is what you get คือเมื่อมกี ารตัดการว่างขอ้ ความหรือรปู ภาพลงไป โปรแกรมจะทาการเขยี นโคด้ Html ใหโ้ ดยอตั โนมตั ิ ตามการจดั วางนน้ั โดยท่ผี ้พู ฒั นาไม่ต้องเขียนโคด้คาลง่ั Html เลยทาใหผ้ ู้พฒั นามีเวลาในการจดั ตกแต่งองคป์ ระกอบของเวบ็ ไซต์ให้สวยงามย่ิงขึน้ ได้ ซ่ึงโปรแกรมน้ีมคี ณุ สมบัติสนบั สนนุ ใหผ้ พู้ ัฒนาสามมารถออกแบบดว้ ยเครือ่ งมือตา่ ง ๆ

3.2 การติดตง้ั โปรแกรม Adobe Dreamweaver1. ใส่แผ่นโปรแกรมตดิ ตั้งโปรแกรม Adobe Dreamweaver ไว้ในซดี รี อม2. ดับเบลิ คลิกไฟล์ตดิ ตง้ั โปรแกรม Adobe Dreamweaver3. โปรแกรมจะเร่ิมทาการติดตง้ั4. เข้าส่ขู น้ั ตอนการตดิ ต้ัง License Agreement และคลิก ยอมรับ (Accept)5. จะปรากฏหน้าจอเพือ่ ให้กรอก Serial Number เมือ่ ใส่ Serial Number ให้เลอื กภาษา ให้ เลอื ก English International แลว้ คลิกปุ่มถัดไป (Next)6. จะปรากฏหนา้ จอเพ่อื ให้ผใู้ ช้กาหนดโปรแกรมที่ต้องการติดตัง้ ไดห้ รอื สามารถเลอื กตอดต้ัง โปรแกรมทัง้ ชดุ ของ Adobe และเลือกไดรฟ์ ท่จี ะเกบ็ โปรแกรม แล้วคลิกติดตั้ง7. จะแสดงหนา้ จอสภานะของโปรแกรม รอจนกว่าโปรแกรมจะติดตงั้ สาเร็จ8. เมอื่ ติดตงั้ โปรแกรมเสร็จจะปรากฏ คลกิ ปุ่ม Done เพอ่ื ส้ินสุดการติดต้ังโปรแกรม

3.3 การเข้าสู่โปรแกรม Adobe Dreamweaver CS5การเลอื กใช้งานโปรแกรม Adobe Dreamweaver มขี ้ันตอนดงั นี้1. คลกิ ปุม่ Start > All Programs > Adobe Mastercollection CS5 >Adobe Dreamweaver CS52. จะแสดงหน้าจอ Welcome Screen ของโปรแกรม AdobeDreamweaver CS5

3.4 ส่วนประกอบของหนา้ ต่างโปรแกรม Adobe Dreamweaver1 มมุ มองออกแบบ ในมมุ มองออกแบบน้ีจะแสดงเวบ็ เพจคลา้ ยกับการทีป่ รากฏบนหน้า browser โดยผพู้ ัฒนาสามารถแก้ไขเนือ้ หาและจัดวางเน้ือหารูปภาพลงในเว็บไดแ้ ต่สาหรบั ไฟล์ข้อมลู ที่เป็นภาพเคลอ่ื นไหวหรือไฟล์วดี ีโอต่างๆจะไมส่ ามารถแสดงในเมอื งนี้ได้ดว้ ยไฟลป์ ระเภทนี้ดงั กล่าวจะสามารถแสดงผลได้ในมมุ มองไรวนิ ทร์อีกที

2 มุมมองโพสตจ์ ะแสดงเวบ็ เพจในรปู แบบคาสงั่ ภาษา DESIGNถูกสรา้ งขน้ึ โดยอัตโนมตั จิ ากการออกแบบในมมุ มองขอ ของผูพ้ ฒั นาสามารถเขียนชุดคาสง่ั เพิ่มเตมิ ได้หรอื จะใชช้ ุดคาสัง่ ภาษาscript ต่างๆโดยสามารถตรวจสอบและแกไ้ ขคาสง่ั ได้ตามตอ้ งการซึ่งการแกไ้ ขจะส่งผลไปยงั โอมมองออกแบบโดยอตั โนมัติ

3 มมุ มองโค้ดและการออกแบบการแสดงรปู แบบของเว็บเพจท้งัรปู แบบท่ปี รากฏบน บราวเซอร์และรปู แบบคาสง่ั ท่ีเปน็ ภาษาพร้อมกันเพอ่ื ใชใ้ นการออกแบบและตรวจสอบแกไ้ ขข้อมลู คาสงั่ ภายในคราวเดยี วกนั โดยสามารถปรบั พนื้ ท่ขี องหน้าต่างและ สว่ นไดโ้ ดยการคลิกและลาก ทเ่ี สน้ แบ่งระหวา่ งท้งั สองส่วนน้ี

4 มุมมองแสดงหนา้ เว็บเหมอื นดเู ว็บบนเบราว์เซอร์จะแสดงผลเหมอื นกบั การ รันหนา้ เวบ็ เพจบนเว็บบราวเซอร์ซ่งึ จะแสดงผลนัน้สามารถแสดงในไฟลท์ ี่เป็น fire และ java หรือ โชว์ต่างๆทเ่ี ป็นมมุ มองใหมท่ ีเ่ พิ่มข้นึ มาเพือ่ อานวยความสะดวกต่อการตรวจสอบอปุ กรณต์ ่างๆและเปน็ ลงิ ค์เชือ่ มโยงของขอ้ มลู ตา่ งๆ ได้อยา่ งรวดเรว็ทาให้ผู้พฒั นาระบบประหยดั เวลาในการแสดงข้อมูลผ่านทางโปรแกรม web browser

5 มมุ มองแสดงโค้ดหน้าเว็บเมอื งนอกนี้จะแสดงชดุ คาสั่งรว่ มกับกับมมุ มองแสดงผลหนา้ เวบ็ ดเู หมือนบนเวบ็บราวเซอรจ์ ะเปน็ มุมมองทเ่ี หมอื นการสัง่ จากโปรแกรมบราวเซอรซ์ ง่ึ ใช้ตรวจดูชุดคาสั่งในตาแหน่งตา่ งๆเทา่ น้นั ไม่สามารถแกไ้ ขชุดคาสั่งในมมุ มองนไี้ ด้

6 มมุ มองการแสดงทีจ่ ัดรปู แบบดว้ ย css ซ่ึงในมมุ มองนจ้ี ะแสดงผลกบั มุมมองลายววิ ซ่ึงเป็นมุมมองทีใ่ ชเ้ ปดิ ดใู นการจัดรูปแบบคาสั่ง css ในตาแหนง่ ท่เี มาส์เคล่ือนที่ ผ่านโดยสามารถดูได้จากหน้าต่าง css เพ่ือใหเ้ ลอื กใช้ หรอื ยกเลกิ คาสงั่ ที่เคยกาหนดไว้ในมุมมองนีโ้ ดยมุมมองนีไ้ ม่สามารถแกไ้ ด้หากตอ้ งการแก้ไขหรอื เลอื กมมุ มอง เพื่อแก้ไขข้อมูลท่ตี ้องการได้

3.5 การออกจากโปรแกรม Adobe Dreamweaver CS5การออกจากโปรแกรม Adobe Dreamweaver CS5 ผู้ใช้สามารถออกจากแปรแกรมได้ 3 วิธี ดังนี้1. การออกจากโปรแกรมโดยใชเ้ มนู2. การออกจากโปรแกรมโดยใชป้ มุ่ Close3. การออกจากโปรแกรมโดยใชค้ ยี ์ลัด