View
168
Download
0
Category
Preview:
DESCRIPTION
ADOBE Dreamweaver CS3. ศัพท์ที่ผู้ใช้ INTERNET ควรทราบ. Web Page. เอกสารแต่ละหน้าถูกเขียนด้วยภาษา HTML ข้อมูล ที่แสดงในหน้าเว็บเพจแต่ละหน้าอาจจะประกอบไปด้วยข้อความต่างๆ รูปภาพ กราฟฟิกต่างๆ และเสียง เป็นต้น. Home page. - PowerPoint PPT Presentation
Citation preview
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
Recommended