สื่อการสอน รู้จัดโปรแกรมออกแบบ
-
Upload
-
0
-
Embed
-
Share
-
Upload and view presentations on any device and embed the player to your website! --- > >Upload PPT
- Upload PPT
followed
unfollow
follow
0
Presentation Transcript
- 1.วิชาการออกแบบเว็บไซต์ เรื่อง “รู้จักโปรแกรมDreamweaver CS6" โรงเรียนเมืองพัทยา ๘ (พัทธยานุกูล) สังกัดสำนักการศึกษา เมืองพัทยา จังหวัดชลบุรี Click ครูกิ่ง Online Classroom ชั้นมัธยมศึกษาปีที่ 3
- 2.เนื้อหาบทเรียน Online รู้จักกับ Dreamweaver CS6 เวอร์ชั่นต่างๆของโปรแกรม การเรียกใช้งานโปรแกรม มุมมองการทำงาน ส่วนประกอบของโปรแกรม 01 02 03 04 05 >>>>>>> Content Classroom แบบฝึกหัด 06
- 3. Adobe Dreamweaver CS6 เป็นโปรแกรมที่ช่วยในการสร้างเว็บไซต์ และเหมาะสมสำหรับนักพัฒนาเว็บไซต์มือใหม่ โดยสามารถนำรูปภาพหรือข้อความมาประกอบเป็นเว็บเพจ อีกทั้งยังเพิ่มลูกเล่นต่าง ๆ เช่น เสียง ภาพเคลื่อนไหว วีดิโอ ซึ่งไม่จำเป็นต้องรู้หลักการเขียนโปรแกรมด้วยภาษา HTML ก็สามารถสร้างเว็บไซต์ได้ รู้จักกับ Dreamweaver CS6 Online Classroom
- 4. โปรแกรม Dreamweaver ถูกพัฒนาโดย Adobe ซึ่งเป็นการซื้อกิจการต่อมาจาก Macromedia เมื่อปี 2005 ที่ผ่านมา ดังนั้น ในปัจจุบันนี้เราจะเรียกโปรแกรมนี้ว่า Adobe Dreamweaver แทน Macromedia Dreamweaver โดยนับถึงปัจจุบันนี้ โปรแกรมได้รับการพัฒนามาแล้วทั้งหมด 16 เวอร์ชั่น (นับตั้งแต่เวอร์ชั่น 1.0 ที่ออกมาเมื่อปี 1997) ดังนี้ เวอร์ชั่นต่างๆของโปรแกรม Online Classroom
- 5.การเรียกใช้งานโปรแกรม การเรียกใช้งานโปรแกรม Adobe Dreamweaver CS6 Online Classroom ทำได้ดังนี้ วิธีที่ 1 เรียกผ่าน Start Windows 10 โดยการคลิกที่ปุ่ม Start >>All apps >>Adobe Master Collection CS6 >> Adobe Dreamweaver CS6
- 6.การเรียกใช้งานโปรแกรม (ต่อ) การเรียกใช้งานโปรแกรม Adobe Dreamweaver CS6 Online Classroom ทำได้ดังนี้ วิธีที่ 2 เรียกผ่านไอคอนบนเดสก์ทอปโดยการดับเบิ้ลคลิกที่ไอคอนโปรแกรม Adobe Dreamweaver CS6
- 7.Online Classroom เมื่อคลิกเลือกเปิดโปรแกรมขึ้นมาแล้วจะปรากฏ Welcome Screen ดังรูป
- 8. เมื่อเปิดเรียกใช้งานโปรแกรมขึ้นมาแล้วจะพบหน้าต่างการใช้งานดังรูป (ในที่จะเลือกเป็นแบบ Create new แล้วเลือกเป็นไฟล์ HTML) จะได้หน้าต่างเอกสาร(Document) มุมมองการทำงาน Online Classroom
- 9. มุมมองการทำงานของหน้าต่างเอกสารมีอยู่ 6 มุมมอง ดังรูป ซึ่งสามารถคลิกสลับการทำงานได้ตามต้องการ มุมมองการทำงาน Online Classroom - มุมมองโค้ด (Code view) เป็นการแสดงมุมมองของเว็บเพจในรูปแบบของชุดคำสั่งภาษา HTML ทั้งเอกสาร ซึ่งถูกสร้างจากโปรแกรม Dreamweaver อัตโนมัติ เหมาะสำหรับเขียนโค้ดคำสั่งเพิ่มเติม
- 10. - มุมมองโค้ดและออกแบบ (Code and Design หรือ Split) เป็นการแสดงมุมมองของเว็บเพจทั้งโค้ด HTML และงานออกแบบบนหน้าเอกสาร โดยมีการแบ่งออกเป็น 2 ส่วนในหน้าเดียวกัน มุมมองการทำงาน Online Classroom
- 11. - มุมมองออกแบบ (Design view) เป็นการแสดงมุมมองของเว็บเพจในลักษณะของการออกแบบซึ่งจะปรากฏผลลัพธ์ทางบราวเซอร์ในลักษณะเดียวกัน มุมมองการทำงาน Online Classroom
- 12.- มุมมองแสดงผลโค้ดหน้าเว็บ (Live Code) มุมมองนี้จะแสดงผลร่วมกับมุมมอง Live View โดยจะแสดงมุมมอง Live Code ได้ก็ต่อเมื่ออยู่ในมุมมอง Live View เท่านั้น ซึ่งจะใช้ตรวจสอบดูโค้ดในตำแหน่งต่างๆ ไม่สามารถที่จะแก้ไขโค้ดในมุมมองนี้ได้ มุมมองการทำงาน Online Classroom
- 13.มุมมองการทำงาน Online Classroom - มุมมองแสดงหน้าเว็บเหมือนดูจากบราวเซอร์ (Live View) มุมมองนี้จะแสดงเว็บเพจเหมือนกับหน้าที่แสดงผลในบราวเซอร์ สามารถแสดงผลจากคำสั่ง JavaScript และ Plug-in ต่างๆ ที่นำมาใช้งาน
- 14.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom
- 15.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom A : เมนูบาร์ (Menu bar) เป็นส่วนที่ใช้ในการสร้างและทำงานกับโปรแกรม ซึ่งมีการแบ่งเป็นกลุ่มคำสั่งต่างๆ เป็นหมวดหมู่และเก็บไว้เป็นเมนู โดยในแต่ละเมนูก็จะมีเมนูย่อยๆ ไว้เรียกใช้งานตามต้องการ
- 16.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom B : แถบเครื่องมือ (Insert bar) เป็นส่วนของการรวบรวมเครื่องมือที่ใช้ในการสร้างวัตถุหรือองค์ประกอบต่างๆ ของหน้าเว็บเพจ ซึ่งแบ่งเป็นกลุ่มๆ มีทั้งหมด 8 กลุ่ม
- 17.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom C : หน้าต่างการทำงาน (Document Window) เป็นบริเวณที่ใช้ในการออกแบบและสร้างเว็บเพจตามต้องการ ซึ่งสามารถแทรกข้อความ รูปภาพ และวัตถุต่างๆ ลงไปได้เลย
- 18.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom D: แถบสถานะ (Status bar) เป็นส่วนที่แสดงข้อมูลเพิ่มเติมเกี่ยวกับงานที่กำลังทำอยู่ เช่น การปรับขนาดการแสดงผลและเวลาที่ใช้ในการโหลดเว็บเพจนั้นๆ E : Properties Inspector ใช้ในการกำหนดค่าคุณสมบัติของหน้าเว็บเพจและในส่วนของวัตถุต่างๆ ซึ่งจะมีรายละเอียดแสดงขึ้นมา เมื่อมีการคลิกเลือกวัตถุนั้นๆ
- 19.ส่วนประกอบของโปรแกรม Dreamweaver CS6 Online Classroom F : พาเนล (Panel) เป็นหน้าต่างหรือชุดคำสั่งพิเศษที่ใช้งานเฉพาะด้าน เช่น ฐานข้อมูล ไฟล์งานต่างๆ สร้างการเชื่อมโยง รวมถึงเรื่องการอัพโหลดไฟล์งานขึ้นเซิร์ฟเวอร์
- 20.การเรียกใช้โปรแกรม Online Classroom
- 21.แบบฝึกหัด Online Classroom คำชี้แจง ให้นักเรียนตอบคำถามต่อไปนี้ A คืออะไร................. B คืออะไร.................. C คืออะไร................. D คืออะไร................... E คืออะไร.................... F คืออะไร....................
- 22.หมดเวลาเรียนแล้วค่ะไว้เจอกันในชั่วโมงต่อไปนะคะ ปิดโปรแกรม
Related
