ADOBE Dreamweaver CS3.

งานนำเสนอเรื่อง: "ADOBE Dreamweaver CS3."— ใบสำเนางานนำเสนอ:

1 ADOBE Dreamweaver CS3

2 ทำความรู้จักกับ ADOBE DreamweaverCS3

3 Web page basic [HTML]

4 ส่วนประกอบของโปรแกรม

5 ส่วนประกอบที่สำคัญใน Dreamweaver CS3
Menu Bar Object Bar Tool Bar Panel Group Status Bar Properties

6 หน้าจอแสดงผล (Document Windows)
หน้าต่างการทำงานของ Dreamweaver สามารถเลือกหน้าต่างการทำงานได้ รูปแบบ โดยการคลิกไอคอนที่อยู่ในแถบเครื่องมือ Toolbar ดังนี้ Show Code View เป็นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่ กำลังทำงาน Show Code and Design View เป็นหน้าต่างที่แสดงทั้งโค้ด HTML และหน้าเว็บเพจที่กำลังทำงาน Show Design View ให้แสดงแต่หน้าเว็บเพจไม่ต้องแสดงโค้ด HTML Web page basic [HTML]

7 1. แถบคำสั่ง (Menu Bar) เป็นแถบที่ใช้เก็บคำสั่งทั้งหมดของโปรแกรม
2. แถบวัตถุ (Object Palette) เป็นกลุ่มเครื่องมือต่างๆ ที่ใช้ในการควบคุมวัตถุ บนชิ้นงาน เอกสารเว็บ เช่น เส้นกราฟิก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer)

8 3. แถบคำเครื่องมือ (Toolbar) รวบรวมปุ่มคำสั่งที่ใช้งานบ่อย
Show Code View แสดงการทำงานในรูปแบบ HTML Show Code and Design Views แสดงการทำงานแบบ HTML ควบคู่กับแสดงพื้นที่ออกแบบ Show Design View แสดงการทำงานแบบแสดงพื้นที่ออกแบบ Document Title ตั้งชื่อของเว็บเพจ Check Errors ตรวจสอบข้อผิดพลาดจาก Browser File Management จัดการกับไฟล์ๆ ที่อยู่ในเว็บเพจ Preview / Debug in Browser ทดลอง ดูเว็บเพจทาง Browser หรือกด F12

9 4. แถบแสดงสถานะ (Status Bar)
Tag Selector ใช้ควบคุมการทำงานในรูปแบบ HTML Window Size กำหนดพื้นที่ใช้งานตามต้องการ Estimate Download Time แสดงเวลา ที่ใช้ในการดาวน์โหลด

10 5. Properties Palette เป็นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการเลือกที่จะพิมพ์ หรือแก้ไขเนื้อหา รายการก็จะเป็น ส่วนทำงานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลือกที่รูปภาพ รายการในแถบนี้ ก็จะเป็นคำสั่งต่างๆ ที่เกี่ยวกับการควบคุมเรื่องรูปภาพ

11 6. Panel Group เป็นกลุ่มของแถบเครื่องมือที่สามารถเรียกใช้งานได้อย่างรวดเร็ว เพื่อให้ง่ายในการสร้าง Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้อย่างง่ายๆ โดยสามารถเรียกใช้งานได้จาก Panel Group Web page basic [HTML]

12 การเริ่มกำหนดโครงร่างของเว็บ
ก่อนดำเนินการสร้างเว็บเพจ ขั้นแรกควรกำหนดให้ข้อมูลต่างๆ ที่เกี่ยวข้องอยู่ใน Folder เดียวกัน เพื่อง่ายต่อค้นหาและจัดเก็บ ตัวอย่างเช่นทำเว็บเพจของหน่วยงานก่อนอื่นเราควรสร้าง Folder ชื่อของหน่วยงานก่อนอาจเป็นภาษาอังกฤษหรือภาษาไทยก็ได้ แล้วใน Folder หน่วยงานค่อยสร้าง Folder ย่อยอีกที อาจประกอบด้วยหลาย Folder ย่อย เพื่อใช้สำหรับแยกเก็บไฟล์ต่าง ๆ เป็นหมวดหมู่ เช่น ไฟล์รูปภาพ ไฟล์ HTML และ ไฟล์ Multimedia ต่างๆ Web page basic [HTML]

13 แสดงการสร้าง Folders และ Sub Folders
MySamaporn Web page basic [HTML]

14 รูปภาพบนเว็บเพจ ชนิดของรูปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมีรายละเอียดและลักษณะที่แตกต่างกันดังนี้ 1.GIF (Graphic Interchange Format) เป็นไฟล์ภาพที่สามารถแสดงผลกับ เบราเซอร์ได้ทุกชนิด โดยส่วนมากมักจะใช้รูปภาพไฟล์ .gif กำหนดฉากหลังหรือพื้นที่โปร่งใส การใช้ทำภาพเคลื่อนไหว (Animation) ภาพโลโก้ ตัวการ์ตูน ภาพตัวอักษรลายเส้นต่างๆ 2. JPG (Joint Photographic Expert Group) เป็นไฟล์ภาพที่แสดงสีได้ถึง 16.7 ล้านสี เหมาะสำหรับภาพที่ใช้สีจำนวนมาก ภาพที่มีการไล่ระดับสีอย่างต่อเนื่องหรือภาพถ่ายทั่วไป 3. PNG (Portable Network Graphic) เป็นไฟล์ภาพที่ไม่ได้รับความนิยมมากนักเมื่อเทียบกับ GIF, JPG เนื่องจากเป็นรูปแบบใหม่ จึงไม่สามารถแสดงผลได้ทุกเบราเซอร์

15 The End Web page basic [HTML]