ADOBE Dreamweaver CS3

Page 2

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

Web Page

Page 3

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

Home page

Page 4

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

วา่ขอ้มูลน้ีเป็นขอ้มูลเรื่องใด พรอ้มทัง้มหีวัขอ้ยอ่ยต่างๆ แยกออกไปตามแต่ผู้ใชต้้องการ

เขา้ไปค้นควา้

Web Site

Page 5

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

Web Browser

Page 6

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

Tcp/IP

Page 7

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

IP address

Page 8

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

HTML (คืออะไร)

Page 9

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

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

ML และแปลความหมายของคำาสัง่แล้วนำามาแสดงผล

Page 10

ความสามารถของ Dreamweaver ในการเข ียนเว ็บเพจ จะมลัีกษณะคล ายกั บกา

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

Web page basic [HTML] Page 11

ความสามารถของ Dreamweaver สรุปไดดังนี้

Web page basic [HTML] Page 12

Page 13

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

D:Mysite\

Page 14

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

Page 15

วธิกีารเขา้สูโ่ปรแกรมมขีัน้ตอนดังนี้1.คลิก                       ท่ี Taskbar

ด้านล่าง

2 . เลือกท่ี Program >Adobe> 3. เขา้สูโ่ปรแกรม Dreamweaver CS3

Page 16

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

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

Web page basic [HTML] Page 18

1.Menu bar เป็นท่ีเก็บคำาสัง่

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

Page 20

Toolbar คือ แถบเครื่องมอืสำาหรบัการใชง้านด้าน HTML และอินเตอรเ์น็ท ประกอบด้วย

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

Page 21

Tag Selector ใชค้วบคมุการทำางานในรูปแบบ HTML

Window Size กำาหนดพื้นท่ีใชง้านตามต้องการ

Estimate Download Time แสดงเวลา ท่ีใชใ้นการดาวน์โหลด

Properties ใชก้ำาหนดรูปแบบต่างๆ ของตัวอักษร และรูปภาพ รวมถึงการสรา้งลิงค์

สว่นประกอบท่ีสำาคัญ Document Toolbar แถบเครื่องมอืเอกสารเป็นท่ีเก็บของ Tool ท่ีใช้บอ่ยๆ

ใส ่TITLE ของ Web pag Preview ใน Browser หรอื กด F12 Show Design View แสดเฉพาะหน้าออกแบบ(เหมอืนจรงิ) Show Code and Design แสดงคำาสัง่ทัง้ HTML และ PHP และ หน้าออกแบบ

Show Code View แสดงคำาสัง่ทัง้ HTML และ PHP Page 22

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

การซอ่น/แสดง Window เลือกใน เมนู Window

Page 23

Web page basic [HTML] Page 24

Page 25

การใสรู่ปภาพบนเวบ็เพจชนิดของรูปภาพท่ีใชใ้นเวบ็เพจมอียู ่ 3 ชนิดด้วย

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

Web page basic [HTML] Page 26

The End