หน่วยที่ 2 การใช้งาน dreamc

ใบความรู้ หน่วยการเรียนรู้ที่ 2

การเริ่มใช้งาน Dreamweaver CS5

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

การเรียกใช้โปรแกรม 1. คลิก ปุ่ม Start > All Programs > Adobe Dreamweaver CS5

2. จากนั้นเข้าสู่หน้าจอโปรแกรม

ข้อมูลจาก : หนังสือสร้าง 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. เลือกโฟลเดอร์ที่ต้องการ แล้วคลิกปุ่ม Open

7. คลิกปุ่ม Select

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

8. คลิกปุ่ม Save ที่หน้าต่าง Site Setup for My_Site

9. คลิกปุ่ม 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