ADOBE Dreamweaver CS3.

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

1 ADOBE Dreamweaver CS3

2 ศัพท์ที่ผู้ใช้ INTERNET ควรทราบ

3 Web Page เอกสารแต่ละหน้าถูกเขียนด้วยภาษา HTML ข้อมูล ที่แสดงในหน้าเว็บเพจแต่ละหน้าอาจจะประกอบไปด้วย ข้อความต่างๆ รูปภาพ กราฟฟิกต่างๆ และเสียง เป็นต้น

4 Home page เป็นเว็บเพจหน้าแรกสุดของข้อมูลแต่ละเรื่อง เปรียบเสมือนปกหนังสือ เป็นส่วนที่บอกให้ทราบว่า ข้อมูลนี้เป็นข้อมูลเรื่องใด พร้อมทั้งมีหัวข้อย่อยต่างๆ แยกออกไปตามแต่ผู้ใช้ต้องการเข้าไปค้นคว้า

5 Web Site เป็นที่ใช้ในการจัดเก็บเว็บเพจแต่ละองค์กรที่จะ นำเสนอข้อมูลของตน มักใช้ชื่อองค์กรของตนเป็นชื่อ เว็บไซต์ เพื่อสามารถจดจำได้ง่าย

6 Web Browser เป็นโปรแกรมที่ใช้สำหรับอ่านและแสดงข้อมูล ที่เป็นภาษา HTML เพื่อให้ผู้ใช้คอมพิวเตอร์ สามารถเห็นผลลัพธ์ของเว็บเพจนั้นๆ เช่น Internet Explorer , Netscape Navigator

7 Tcp/IP (Transmission Control Protocol / Internet Protocol) เป็นภาษามาตรฐานที่ใช้ในการสื่อสาร (โปรโตคอล) เชื่อมต่อเข้าด้วยกัน

8 IP address เป็นเลขหมายประจำเครื่อง โดยแต่ละเครื่องจะมี เลขหมายนี้ไม่ซ้ำกัน ประกอบด้วยข้อมูลจำนวน 32 บิต แยกออกเป็น 4 ส่วนๆ ละ 8 บิต แต่ละส่วนจะคั่นด้วยเครื่องหมาย จุด เช่น

9 HTML (คืออะไร) ภาษา HTML (HyperText Markup Language) เป็นภาษาที่ใช้คำสั่งที่เรียกว่า Tag มีทั้งเปิดและปิด เพื่อกำหนดบริเวณที่มีผลของคำสั่ง คำสั่งภาษา HTML จะเริ่มมีผลที่บริเวณ Tag เปิด และจะสิ้นสุดผลของ คำสั่งนั้นเมื่อถึง Tag ปิด เมื่อเว็บเพจถูกเรียก ให้แสดงผล Browser จะอ่านภาษา HTML และแปล ความหมายของคำสั่งแล้วนำมาแสดงผล

10 ความสามารถของ Dreamweaver
ในการเขี ยนเว็ บเพจ จะมีลักษณะคล ายกั บการพิ มพ งานในโปรแกรม Text Editor ทั่วไป คือจะเรียงชิ ดซ ายบนตลอดเวลาไมสามารถยาย หรือ นํ าไปวางตําแหน งที่ต องการไดทันที่ เหมื อนโปรแกรมกราฟกเพราะฉะนั้ นหากเรา ตองการจั ดวางรู ปแบบตามที่ เราต องการ ก็ ใช ตาราง Table เข ามาช วยจั ด ตํ าแหนง ซึ่งเมื่อมีการจั ดวางรู ปแบบที่ซั บซ อนมากขึ้น การเขี ยนภาษา HTML ก็ซั บซอนยิ่ งขึ้นเช นกัน โปรแกรม Dreamweaver อาจจะไม สามารถเขี ยน เว็ บไดตามที่ เราต องการทั้ งหมด วิธี การแก ไขป ญหาที่ดีที่สุดคือ ควรจะเรี ยนรูหลั กการของภาษา HTML ไปดวย

11 ความสามารถของ Dreamweaver สรุปไดดังนี้
Web page basic [HTML]

12 Web page basic [HTML]

13 **** สร้างโฟลเดอร์ สำหรับเก็บงาน ไว้ที่ไดร์วที่ต้องการ
D:Mysite\

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

15 วิธีการเข้าสู่โปรแกรมมีขั้นตอนดังนี้
1.คลิก                       ที่ Taskbar ด้านล่าง 2. เลือกที่ Program >Adobe> 3. เข้าสู่โปรแกรม Dreamweaver CS3

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

17 ส่วนประกอบที่สำคัญใน Dreamweaver CS3

18 Web page basic [HTML]

19 Menu bar เป็นที่เก็บคำสั่ง
2. Insert Palette ใช้แทรก Tag ต่างๆ ลงใน Web page ซึ่ง Tag ต่างๆจะถูกแบ่งเป็นกลุ่มสามารถเลือกกลุ่มโดยคลิกเลือก Tabs ที่ต้องการ

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

21 Tag Selector ใช้ควบคุมการทำงานในรูปแบบ HTML
Window Size กำหนดพื้นที่ใช้งานตามต้องการ Estimate Download Time แสดงเวลา ที่ใช้ในการดาวน์โหลด Properties ใช้กำหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสร้างลิงค์

22 ส่วนประกอบที่สำคัญ Document Toolbar แถบเครื่องมือเอกสารเป็นที่เก็บของ Tool ที่ใช้บ่อยๆ
ใส่ TITLE ของ Web pag Preview ใน Browser หรือ กด F12 Show Design View แสดเฉพาะหน้าออกแบบ(เหมือนจริง) Show Code and Design แสดงคำสั่งทั้ง HTML และ PHP และ หน้าออกแบบ Show Code View แสดงคำสั่งทั้ง HTML และ PHP

23 การซ่อน/แสดง Window เลือกใน เมนู Window
ส่วนประกอบที่สำคัญ Properties Inspector ใช้กำหนดคุณสมบัติของ object หรือ tag ที่กำลังเลือกขณะนั้น การซ่อน/แสดง Window เลือกใน เมนู Window

24 Web page basic [HTML]

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

26 The End Web page basic [HTML]