ใบความรู้
หน่วยการเรียนรู้ที่ 2
การเรียกใช้โปรแกรม
1. คลิก ปุ่ม Start > All Programs > Adobe Dreamweaver CS5
ส่วนประกอบของ 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 ใช้ส าหรับเลื่อนเว็บเพจ
เตรียมโฟลเดอร์ส าหรับเว็บไซต์
ควรเตรียมส่วนประกอบของเว็บไซต์ให้พร้อมเสียก่อน โดยส่วนประกอบหลักในเว็บไซต์ มีดังนี้ - ไฟล์เนื้อหา - ไฟล์รูปภาพ - ไฟล์มัลติมีเดีย - ไฟล์สคริปต์ หลังจากนั้นจึงสร้างโฟลเดอร์ขึ้นมาใหม่ เพื่อจัดการส่วนประกอบของเว็บไซต์ให้เป็นหมวดหมู่ไม่ปะปน กัน ดังนั้นจึงควรวางแผนล่วงหน้าว่าจะจัดเก็บไฟล์ไว้ในโฟลเดอร์อย่างไรบ้าง ตัวอย่างโครงสร้างภายใน โฟลเดอร์มีดังนี้สร้าง Define Site เพื่อจัดระบบให้ข้อมูล
เมื่อเตรียมโฟลเดอร์เพื่อจัดเก็บข้อมูลทั้งหมดที่จะใช้ในการสร้างเว็บไซต์เรียบร้อยแล้ว ขั้นตอนต่อไป คือ การท าให้โปรแกรม Dreamweaver รู้จักและเข้าใจโฟลเดอร์ที่สร้างว่าเป็นเว็บไซต์ของเรา ซึ่งสามารถท า ได้โดยการสร้าง Define Site ตามขึ้นตอนต่อไปนี้
1. คลิกลิ้งก์ Manage Sites ที่พาเนล Files (หรือคลิกค าสั่ง Site > New Site)
2. คลิกปุ่ม New… ที่หน้าต่าง Manage Site
3. คลิกแท็บ Site
4. ตั้งชื่อเว็บไซต์ที่ช่อง Site Name
6. เลือกโฟลเดอร์ที่ต้องการ แล้วคลิกปุ่ม Open
8. คลิกปุ่ม Save ที่หน้าต่าง Site Setup for My_Site
การแก้ไขไซต์ที่สร้างไว้แล้ว
1. คลิกเมนู Site > Manage Sites
2. เลือกชื่อไซต์ที่ต้องการ 3. คลิกปุ่ม Edit…
จากนั้นหน้าต่าง Site Setup for… จะปรากฏขึ้นมา เราสามารถแก้ไขการก าหนดค่าต่างๆ ได้โดยมีวิธี คล้ายกับการก านหดค่าไซต์ใหม่
ท าความรู้จักกับพาเนล
นอกจากจะสร้างไซต์ไว้ในพาเนล Files เรายังสามารถจัดการกับไฟล์ต่างๆ โดยผ่านพาเนล Files ได้ไม่ ว่าจะเป็นการสร้างโฟล์เดอร์ สร้างเว็บเพจใหม่ เปิดเว็บเพจ ก๊อบปี้ไฟล์ หรือแม้แต่เปลี่ยนชื่อไฟล์ ซึ่งการเปิด/ ปิดพาเนล Files ท าได้โดยคลิกเมนู Windows > Files (หรือกด F8)
สร้างโฟลเดอร์ย่อยไว้เก็บไฟล์ เราสามารถสร้างโฟลเดอร์ย่อยส าหรับจัดเก็บไฟล์ต่างๆ ให้เป็น หมวดหมู่ได้ เช่น ไฟล์รูปภาพ ไฟล์เสียง ไฟล์สคริปต์ เป็นต้น โดยมีขั้นตอน ดังนี้
1. คลิกขวาบนโฟลเดอร์หลัก แล้วเลือกค าสั่ง New Folder
