หน่วยที่ 2 การเริ่มใช้งาน Dreamweaver

ใบความรู้ หน่วยการเรยี นรู้ที่ 2การเร่ิมใช้งาน Dreamweaver CS5 ขอ้ มลู จาก : หนงั สือสร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อ้ึงรัตนวงศ,์ 2554

การเรียกใช้โปรแกรม1. คลิก ปุ่ม Start > All Programs >Adobe Dreamweaver CS52. จากนน้ั เขา้ สหู่ นา้ จอโปรแกรม ข้อมลู จาก : หนังสอื สรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อึ้งรัตนวงศ,์ 2554

สว่ นประกอบของ Welcome Screen จะแบง่ เปน็ 3 กล่มุ หลักๆ ดังน้ี 1. เปิดไฟล์งานเก่าที่เคยเรียกใช้งาน ใช้สาหรับเปิดงานเก่าท่ีเคยเรียกใช้งาน โดยโปรแกรมจะแสดง รายช่ือไฟล์ท่ีเคยใช้ท้ังหมด (เรียงลาดับจากที่เปิดล่าสุดเป็นต้นไป) แต่ถ้าเป็นการเปิดโปรแกรมข้ึนมา ครั้งแรกและยังไม่เคยเรียนใช้งานใดๆ จะไม่แสดงชือ่ ไฟล์ขึน้ มาในส่วนน้ี โดยการเรียกงานเก่าสามารถ ทาไดโ้ ดยคลิกเลอื จากรายช่ือไฟล์ทแ่ี สดงอยหู่ รือคลิกปุ่ม Open… เพ่ือเปิดไฟลอ์ ื่นท่ีตอ้ งการขึ้นมาได้ 2. สร้างงานใหม่ ในส่วนน้ีใช้สาหรับสร้างไฟล์งานใหม่ ซึ่งสามารถเลือกสร้างไฟล์ได้หลายชนิด ไม่ว่าจะ เปน็ ไฟล์ HTML, PHP, ASP, และ JavaScript เป็นต้น 3. สร้างานสาเร็จรูป เป็นการสร้างเว็บเพจใหม่โดยใช้ไฟล์ตัวอย่างท่ีโปรแกรมจัดเตรียมเอาไว้ให้ หรือที่ เรียกกนั ว่า เท็มเพลต (Template) ซงึ่ มีให้เลือกใชม้ ากมาย ขอ้ มูลจาก : หนงั สอื สร้าง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสทิ ธ์ิ อ้ึงรัตนวงศ,์ 2554

ส่วนประกอบหนา้ จอโปรแกรม แถบเมนูหลัก เป็นแถบรวบรวมคาสั่งท้ังหมดของโปรแกรม Dreamweaver CS5 เอาไว้ โดยจะแบ่งคาส่ังท้ังหมดออกเป็นหมวดหมู่ตามลักษณะการใช้งาน เพื่อให้สะดวกต่อการทางาน ซึ่งภายในแต่ละหมวดหมู่ของคาสั่ง จะประกอบไปดว้ ยคาส่งั ยอ่ ยทเี่ กย่ี วขอ้ งกนั แถบเคร่ืองมือ Insert Bar เป็นแถบรวมเครื่องมือซึ่งใช้ ในการวางออบเจ็กต์ต่างๆ ลงบนเว็บเพจ เชน่ ข้อความ รูปภาพ ล้ิงก์ และ ภาพเคลือ่ นไหว โดยแบ่งเป็นกลุ่มคาสงั่ เพื่อให้ใชง้ านไดส้ ะดวก ซ่ึงบางกลุ่ม สงั่ จะมเี มนูยอ่ ยอยู่ภายใน โดยมีลกู ศรเล็กๆ อยูด่ า้ นข้างปมุ่ น้ัน ข้อมลู จาก : หนงั สอื สร้าง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธ์ิ อ้ึงรัตนวงศ,์ 2554

พ้นื ท่สี ร้างงาน1. มุมมองออกแบบ มุมมองนสี้ ามารถแก้ไขและจัดการเน้ือหาต่างๆ ลงบนเว็บเพจได้ ซึ่งจะแสดงผล บนเว็บเพจคล้ายกบั เปิดบนเบราเซอร์2. มุมมองโค้ด มุมมองนี้ใช้สาหรับเปิดดูสริปต์คาสั่งภาษาต่างๆ ของเว็บเพจ เช่น HTML, PHP, ASP, และ JSP ซึ่งสามารถตรวจสอบและแก้ไขคาส่ังต่างๆ ได้ตามต้องการ โดยการแก้ไขจะส่งผล กลับไปยงั มุมมองออกแบบ โดยอตั โนมตั ิ ข้อมลู จาก : หนังสอื สร้าง Web ง่ายๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธ์ิ อึ้งรตั นวงศ,์ 2554

3. มุมมองโค้ดและออกแบบ มุมมองน้ีจะแสดงทั้งแบบมุมมองออกแบบ และมุมมองโค้ดพร้อมกัน เม่ือคลิกมุมมอง Split จะแบ่งพ้ืนท่ีสร้างงานออกเป็น 2 ส่วน คือ ส่วนหน้าต่างโค้ด และส่วน มุมมองออกแบบ นอกจากน้ันยังสามารถปรับขนาด พ้ืนท่ขี องแตล่ ะส่วนได้ โดยการคลกิ ลากทเี่ ส้น แบ่งระหวา่ งทง้ั 2 สว่ นน้ี แถบทลู บาร์ แถบเครื่องมอื ที่รวบรวมปุ่มคาสงั่ ทจ่ี าเป็นหรือใช้งานบ่อยเอาไว้ สามารถเปิด/ปดิ การใช้งานได้ หนา้ ต่าง Properties Inspector เป็นหน้าต่างเล็กๆ ท่ีอยู่ด้านล่างสุดของหน้าจอโปรแกรม เป็นส่วนที่ใช้งานมากที่สุด เนื่องจากใช้กาหนด เนื่องจากใช้กาหนดคุณสมบัติสาคัญๆ ของออบเจก็ ต์ท่ีวางในหน้าเว็บเพจ เช่น ขนาด ตาแหน่ง และสีเป็นต้น ทัง้ นี้รายละเอียดและคุณสมบตั ิของออบเจ็กตแ์ ต่ละตัวจะเปลย่ี นแปลงตลอดเวลา ข้นึ อยู่กับว่าขณะน้ันกาลงั เลือกออบเจ็กตใ์ ด ข้อมูลจาก : หนังสอื สร้าง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รตั นวงศ,์ 2554

กลุ่มหน้าต่างพาเนล เป็นหน้าต่างที่รวบรวมเครื่องมือต่างๆ ไว้เป็น กลุ่มตามหน้าที่ที่เกี่ยวข้อง เพื่อช่วยให้ทางานสะดวกขึ้น เช่น พาเนล File ก็ จะมีคาส่ังใช้สาหรับจัดการไฟล์ และโฟลเดอร์ภายในเว็บไซตท์ ั้งหมด เป็นต้น ซ่ึงทุกพาเนลจะแสดงอยู่บริเวณด้านขวาของโปรแกรม สามารเปิดหรือปิด พาเนลได้โดยเลอื กคาส่ัง Windows แล้วเลือกชอื่ พาเนลนั้น แถบสถานะ เป็นแถบท่ีอยู่ด้านล่างของวินโดว์ Document ซ่งึ ประกอบด้วย 2 สว่ น คือ ด้ายซ้ายเป็นTag Selector ส่วนดา้ นขวาเปน็ เครื่องมือต่างๆ โดย Tag Selector ประกอบด้วย Select ใช้สาหรับเลือกออบเจ็กต์บนเว็บเพจ เช่น ข้อคสาม รูปภาพ เป็นต้น เมื่อคลิกเลือกออบเจก็ ตจ์ ะแสดงกรอบสีดาล้อมรอบออบเจ็กต์ทเ่ี ลือก Hand ใช้สาหรับเล่อื นเวบ็ เพจ Zoom ใช้สาหรับคลกิ เลือกหรอื ลากเพอ่ื ขยาย หรอื Alt+ คลกิ เพอ่ื ย่อมมุ มอง ขอ้ มูลจาก : หนังสอื สรา้ ง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จีระสิทธิ์ อึ้งรตั นวงศ,์ 2554

เตรยี มโฟลเดอร์สาหรบั เวบ็ ไซต์ ควรเตรียมส่วนประกอบของเว็บไซตใ์ หพ้ รอ้ มเสยี ก่อน โดยส่วนประกอบหลกั ในเว็บไซต์ มีดงั น้ี - ไฟลเ์ นอื้ หา - ไฟลร์ ูปภาพ - ไฟล์มัลตมิ ีเดยี - ไฟล์สครปิ ต์ หลงั จากน้ันจึงสร้างโฟลเดอร์ขึ้นมาใหม่ เพ่ือจัดการส่วนประกอบของเว็บไซต์ใหเ้ ป็นหมวดหมู่ไม่ปะปนกัน ดังน้ันจึงควรวางแผนล่วงหน้าว่าจะจัดเก็บไฟล์ไว้ในโฟลเดอร์อย่างไรบ้าง ตัวอย่างโครงสร้างภายในโฟลเดอร์มดี ังน้ี ขอ้ มูลจาก : หนังสือสร้าง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อ้ึงรตั นวงศ,์ 2554

สร้าง Define Site เพ่ือจัดระบบให้ข้อมูล เมื่อเตรียมโฟลเดอร์เพ่ือจัดเก็บข้อมูลท้ังหมดที่จะใช้ในการสร้างเว็บไซต์เรียบร้อยแล้ว ข้ันตอนต่อไปคือ การทาให้โปรแกรม Dreamweaver รู้จักและเข้าใจโฟลเดอร์ท่ีสร้างว่าเป็นเว็บไซต์ของเรา ซึ่งสามารถทาไดโ้ ดยการสร้าง Define Site ตามขึ้นตอนต่อไปนี้ 1. คลิกล้ิงก์ Manage Sites ที่พาเนล Files (หรือคลิกคาส่ัง Site > New Site) 2. คลกิ ปมุ่ New… ที่หนา้ ต่าง Manage Site 3. คลกิ แทบ็ Site 4. ตั้งชอื่ เวบ็ ไซตท์ ช่ี อ่ ง Site Name 5. คลิกป่มุ เพอื่ เลือกโฟลเดอร์ที่เก็บไฟล์งาน ข้อมลู จาก : หนังสอื สรา้ ง Web งา่ ยๆ แค่คลกิ Dreamweaver CS5 โดย : จรี ะสทิ ธิ์ อ้ึงรตั นวงศ,์ 2554

6. เลอื กโฟลเดอรท์ ่ตี ้องการ แล้วคลกิ ปมุ่ Open7. คลิกปุ่ม Select ข้อมูลจาก : หนงั สือสรา้ ง Web งา่ ยๆ แคค่ ลกิ Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อึ้งรัตนวงศ,์ 2554

8. คลิกปุ่ม Save ท่หี นา้ ตา่ ง Site Setup for My_Site9. คลิกปุ่ม Done ทีห่ นา้ ตา่ ง Manage Sites ข้อมูลจาก : หนงั สือสร้าง Web งา่ ยๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธ์ิ อึ้งรัตนวงศ,์ 2554

การแกไ้ ขไซตท์ ส่ี ร้างไวแ้ ล้ว 1. คลิกเมนู Site > Manage Sites 2. เลอื กช่อื ไซตท์ ่ตี อ้ งการ 3. คลกิ ป่มุ Edit… จากน้ันหน้าตา่ ง Site Setup for… จะปรากฏขนึ้ มา เราสามารถแกไ้ ขการกาหนดค่าต่างๆ ได้โดยมีวิธีคลา้ ยกบั การกานหดค่าไซตใ์ หม่ 4. เม่อื แกไ้ ขเสรจ็ แลว้ คลกิ ปุ่ม Done ขอ้ มลู จาก : หนงั สอื สรา้ ง Web ง่ายๆ แคค่ ลกิ Dreamweaver CS5 โดย : จีระสิทธิ์ อง้ึ รตั นวงศ,์ 2554

ทาความรจู้ กั กับพาเนล นอกจากจะสรา้ งไซต์ไว้ในพาเนล Files เรายงั สามารถจัดการกบั ไฟลต์ า่ งๆ โดยผ่านพาเนล Files ได้ไม่ว่าจะเป็นการสร้างโฟล์เดอร์ สร้างเว็บเพจใหม่ เปิดเว็บเพจ ก๊อบป้ีไฟล์ หรือแม้แต่เปล่ียนชื่อไฟล์ ซึ่งการเปิด /ปิดพาเนล Files ทาได้โดยคลิกเมนู Windows > Files (หรือกด F8) สร้างโฟลเดอร์ย่อยไว้เก็บไฟล์ เราสามารถสร้างโฟลเดอร์ย่อยสาหรับจัดเก็บไฟล์ต่างๆ ให้เป็นหมวดหมู่ได้ เชน่ ไฟลร์ ูปภาพ ไฟลเ์ สยี ง ไฟลส์ ครปิ ต์ เปน็ ต้น โดยมขี ้ันตอน ดงั นี้ 1. คลกิ ขวาบนโฟลเดอร์หลัก แลว้ เลือกคาสง่ั New Folder 2. พิมพ์ชอื่ โฟลเดอรย์ อ่ ยแลว้ กด Enter ข้อมูลจาก : หนงั สือสรา้ ง Web ง่ายๆ แคค่ ลิก Dreamweaver CS5 โดย : จรี ะสิทธิ์ อึง้ รัตนวงศ,์ 2554