ebook3

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

หน่วยที่ 3 เริม่ ตน้ การใช้งานโปรแกรม Adobe Dreamweaver 3.1 การตดิ ต้งั โปรแกรม Adobe Dreamweaver เวบ็ ไซต์1. ดบั เบลิ้ คลิกที่ไฟล์ Dreamweaver CS5 ทเ่ี กบ็ ไว้ รปู ที่ 3.1 โปรแกรม Dreamweaver ทีม่ า : นางวาสนา สุขใจ,25592. เม่ือเราแตกไฟลอ์ อกมาแล้วกจ็ ะเป็นโฟลเดอร์และดบั เบ้ิลคลิกเพอ่ื เปิดไฟล์ Set-Up ขน้ึ มา รูปที่ 3.2 ขั้นตอนการตดิ ต้ังโปรแกรม ทมี่ า : นางวาสนา สุขใจ,2559

3. จะปรากฏหนา้ ตา่ งนีข้ ้ึนมา เปน็ การโหลดข้อมลู ให้รอจนเสรจ็ รปู ที่ 3.3 ข้ันตอนการโหลดโปรแกรม ท่มี า : นางวาสนา สุขใจ,25594. และจะปรากฏหน้าตา่ งนี้ขึน้ มา คลกิ ที่ Accert รปู ท่ี 3.4 ขนั้ ตอนการติดตั้งโปรแกรม ทม่ี า : นางวาสนา สุขใจ,2559

5. ใส่รหสั ใหถ้ กู ตอ้ ง แล้วกดท่ี Next รปู ท่ี 3.56.แล้วกก็ ดปมุ่ Next หรอื Skip this step ก็ได้ ขน้ั ตอน การติดตง้ั โปรแกรม ทีม่ า : นาง วาสนา สุขใจ ,2559รปู ที่ 3.6 ขั้นตอนการติดตัง้ โปรแกรม ทีม่ า : นางวาสนา สขุ ใจ,2559

7. คลกิ ท่เี ลือกโฟลเดอรท์ ่ีต้องการจะเกบ็ ไว้ แล้วคลกิ ที่ Install รปู ท่ี 3.7 ข้ันตอนการติดตง้ั โปรแกรม ทีม่ า : นางวาสนา สุขใจ,25598. จากนั้นจะเรมิ่ ทาการติดตง้ั โปรแกรม ใหร้ อจนโหลดเสรจ็ รปู ที่ 3.8 ขน้ั ตอนรอจนโหลดเสรจ็ ที่มา : นางวาสนา สขุ ใจ,2559

9. คลิกท่ี Done รปู ที่ 3.9 ขัน้ ตอนเสรจ็ ส้ิน ท่ีมา : นางวาสนา สุขใจ,255910. จากนน้ั เข้ากส็ ามารถเขา้ โปรแกรม Dw CS5 ได้แลว้ รูปที่ 3.10 โปรแกรมจะอย่ใู นเคร่อื งเป็นทีเ่ รยี บรอ้ ย ทีม่ า : นางวาสนา สขุ ใจ,2559

3.2 การเขา้ สโู่ ปรแกรม Adobe Dreamweaver เวบ็ ไซต์การเขา้ สู่โปรแกรม 1. คลกิ Start > Program> Adobe Dreamweaver รปู ที่ 3.11 โปรแกรม Dreamweaver ที่มา : นางวาสนา สุขใจ,25592. จะปรากฏหน้าตา่ ง

3.3 สว่ นประกอบของหรนปู า้ททต่ี ่ีม3า่ า.ง1ก:2านรโาปใงชรวแาง้ สากนนรมาADสdrุขeoใabจm,e2w55e9aver Dreamweaver เว็บไซต์เครื่องมือต่างๆในโปรแกรม Dreamweaverสาหรับ Dreamweaver เปน็ โปรแกรมสร้างโฮมเพจแบบเสมอื นจรงิ โดยไม่ต้อง เขยี นภาษา HTML เองหรือทศ่ี พั ท์เทคนคิ เรียกว่า \"WYSIWYG\" สามารถใชห้ นา้ จอเสมอื นจรงิ ของ Dreamweaver ในการทาเวบ็ เพจไดเ้ ลย โดยใช้เคร่ืองมือต่างๆทีม่ มี าให้ดงั แสดงในรปู ดา้ นล่างหน้าตาของโปรแกรม Dreamweaver และชื่อเรยี กเคร่ืองมอื ตา่ งๆ ดังนี้ Vertical Dockinglnsert Bar Men Document tool bar panela u Document windowStatus bar Properties inspector รปู ที่ 3.13 เครื่องมอื ตา่ งๆในโปรแกรม Dreamweaver ทม่ี า : นางวาสนา สุขใจ,2559อธบิ ายเครอื่ งมือตา่ งๆ 1 .Document window เปน็ ส่วนทีใ่ ช้การแสดงผลเว็บเพจทก่ี าลงั สรา้ งอยู่ ซง่ึ แสดงผลได้ท้ังแบบCode และ แบบเสมือนจรงิ ที่แสดงผลบน web browser หรอื จะแสดงควบคไู่ ปกไ็ ด้ และใช้ในการทางานแก้ไขตัวอกั ษร รปู ภาพตา่ งๆในเว็บเพจด้วย โดยอาศยั เครอ่ื งมอื ต่างๆ ทแี่ สดงอยูใ่ นรปู

รปู ที่ 3.14 เครื่องมือ Insert Bar ที่มา : นางวาสนา สขุ ใจ,2559ประกอบดว้ ยคาส่งั ตา่ งๆ แยกย่อยดังนี้ 1.Common ในแถบน้ีจะประกอบด้วยเครอื่ งมอื ท่ีใช้งานบ่อยๆ เช่น สร้างตาราง , สร้างลงิ ค์ หรือใสร่ ปู ในเวบ็ เพจ 2.Layout ในแถบนีจ้ ะเปน็ เคร่อื งมอื ทเ่ี ก่ยี วกบั การแสดงผลแบบ div , ตาราง และ frame สาหรบั ใชส้ ร้างเวบ็ เพจ แบบ layout 3.Forms ในแถบนปี้ ระกอบด้วยคาสงั่ ท่ีใช้ในการสรา้ ง form เชน่ radio , check box เปน็ ตน้ 4.Data เปน็ แถบทใ่ี ส่สาหรบั Dynamic เว็บไซต์ ใช้จดั การกับระบบ data base จะใช้มากในการพัฒนาweb application บนเว็บไซต์ เชน่ การเขียนระบบ web board , ระบบสมาชิก 5.Spry เป็นแถบใหม่ของ dreamwerverทหี่ ลายคนจะตอ้ งชอบ เพราะเปน็ เคร่ืองมอื ทรี่ วม javascriptกบัHTML , CSS เขา้ ดว้ ยกนั ทาใหเ้ วบ็ ไซตม์ คี วามนา่ สนใจ และมีความสะดวกในการใชง้ านมากข้ึน 6.Text ในนีจ้ ะเป็นเครอื่ งมอื ทใ่ี ชจ้ ดั การกับตัวอกั ษรทั้งหมด เชน่ ใสส่ ญั ลักษณพ์ เิ ศษต่างๆ 7.Favorites แถบอันนคี้ ณุ สามารถเพมิ่ เคร่ืองมอื ตา่ งด้วยตัวเอง โดยการคลกิ ขวา สาหรบั ผทู้ ี่ต้องการเกบ็เครื่องมือต่างๆทใ่ี ชง้ านบอ่ ยไว้ในน้ี3. property inspector เป็นแถบเครอื่ งมอื ทจ่ี ะเปลีย่ นแปลงตามวตั ถุที่เราเลอื กอยเู่ ช่น ถา้ คลิกท่รี ปู รูปที่ 3.15 เครือ่ งมือ Property inspector ทีม่ า : นางวาสนา สุขใจ,2559property inspector กจ็ ะเป็นคุณสมบัตเิ กี่ยวกับรปู นั้นเชน่ ขนาดรูป , ชื่อรูป , ลิงค์ของรปู ถา้ เลอื กทีต่ ารางอยู่ ก็จะเป็นคณุ สมบัตขิ องตาราง เช่น ขนาดตาราง , จานวนแถวและหลักของตาราง เป็นตน้4.docking panels เครอ่ื งมือตัวนี้เป็นเครอ่ื งมือที่จะตอ้ งใชบ้ ่อยมาก เพราะใช้แสดง file ที่อยใู่ นเวบ็ ไซต์ , ไฟล์CSS และใช้แกไ้ ข CSS รวมถงึ เครอ่ื งมือทใี่ ชแ้ สดงภาพ และเครื่องมือ ftp เราสามารถปดิ /เปิด แถบน้ีได้โดยการคลิกทร่ี ปู ลกู ศรด้านซา้ ยมอื ของ panels

รปู ท่ี 3.16 เครอ่ื งมือ docking panels ทม่ี า : นางวาสนา สุขใจ,25595.menu เป็นคาสั่งทเ่ี ห็นอยทู่ ่วั ไปในโปรแกรมท่ัวไป จะมีคาสงั่ ทใี่ ชท้ ่เี หมือนกบั เครอ่ื งมอื ตา่ งที่แสดงอยใู่ น Insertbar, Property inspector, panels แต่มบี างคาสัง่ ทีแ่ สดงเฉพาะใน menu ด้วย6.Status bar รปู ท่ี 3.17 เคร่ืองมือ Status bar ทม่ี า : นางวาสนา สขุ ใจ,2559เคร่อื งมอื ทม่ี ปี ระโยชน์มาก ทางขวาของแถบนี้จะเปน็ ตวั เลขทบ่ี อกเวลาในการโหลดหนา้ นี้ ขนานของdocument window เครื่องมอื ย่อ/ขยาย ส่วนทางขวาจะเปน็ Tag select ของ HTML จะแสดงคาสง่ั ของHTML เราสามารถแกไ้ ขคาสง่ั ตา่ งๆได้จากหนา้ ตา่ งน้ี7.Document Tool bar รูปที่ 3.18 เครื่องมือ Document Tool bar ท่ีมา : นางวาสนา สขุ ใจ,2559

3.4 การสรา้ งเว็บเพจ Dreamweaver เว็บไซต์การสรา้ งเวบ็ เพจหนา้ ใหมข่ ้นึ มา สามารถทาไดด้ งั นี้1. คลิกท่ี File>New รูปท่ี 3.19 หน้าตา่ งการสร้างเอกสารใหม่ ทม่ี า : นางวาสนา สุขใจ,25592. คลิกเลอื ก Blank Page สรา้ งเอกสารเปล่า3. คลกิ เลอื กประเภทของเวบ็ เพจ4. คลกิ เลอื กรปู แบบเปน็ None5. คลกิ ปุม่ Create เพ่อื สรา้ งหน้าตา่ งเปลา่ ๆ รปู ท่ี 3.20 หน้าต่างการสร้างเอกสารใหม่ ท่ีมา : นางวาสนา สขุ ใจ,2559

6. หน้าเวบ็ ไซตจ์ ะได้ดังน้ี รปู ที่ 3.21 หน้าต่างเอกสารใหม่ ท่ีมา : นางวาสนา สุขใจ,2559 3.5 การบนั ทกึ เวบ็ เพจ1. คลิกที่ File เลอื ก 1.1 Save เม่ือต้องการบันทกึ ซ้าชอื่ เดิม 1.2 Save Asเม่ือต้องการบันทกึ ไฟลเ์ ดมิ เป็นชอื่ ใหมห่ รือบันทกึ ครัง้ แรก 1.3 Save Allเสื่อต้องการบันทึกเวบ็ เพจท่เี กดิ อยทู่ ง้ั หมดพรอ้ มกัน

รูปที่ 3.22 หนา้ ตา่ งบนั ทึก ที่มา : นางวาสนา สุขใจ,25592. จะปรากฏหนา้ ต่างน้ขี น้ึ มา ใหเ้ ปิดโฟลเดอรท์ ี่เราตอ้ งการจะบันทึก แลว้ ตง้ั ชอ่ื ไฟลต์ ามที่เราตอ้ งการ จากน้นัเลือกประเภทไฟลท์ บี่ นั ทกึ เปน็ html แลว้ คลกิ ท่ี Save รปู ที่ 3.23 หนา้ ตา่ งการตั้งช่ือไฟล์ ท่มี า : นางวาสนา สุขใจ,2559