Transcript HTML

ADOBE Dreamweaver
CS3
ศัพท์ ทผี่ ้ ูใช้ INTERNET ควรทราบ
Page 2
Web Page
เอกสารแต่ละหน้ าถูกเขียนด้ วยภาษา HTML ข้ อมูล
ที่แสดงในหน้ าเว็บเพจแต่ ละหน้ าอาจจะประกอบไปด้ วย
ข้ อความต่างๆ รูปภาพ กราฟฟิ กต่างๆ และเสียง เป็ นต้ น
Page 3
Home page
เป็ นเว็ บ เพจหน้ าแรกสุ ด ของข้ อมู ล แต่ ล ะเรื่ อง
เปรี ย บเสมื อ นปกหนั ง สือ เป็ นส่ ว นที่บ อกให้ ท ราบว่ า
ข้ อมูลนี้เป็ นข้ อมูลเรื่ องใด พร้ อมทั้งมีหั วข้ อย่ อยต่ างๆ
แยกออกไปตามแต่ผ้ ูใช้ ต้องการเข้ าไปค้ นคว้ า
Page 4
Web Site
เป็ นที่ใช้ ในการจัดเก็บเว็บเพจแต่ละองค์กรที่จะ
นาเสนอข้ อมูลของตน มักใช้ ช่ ือองค์กรของตนเป็ นชื่อ
เว็บไซต์ เพื่อสามารถจดจาได้ ง่าย
Page 5
Web Browser
เป็ นโปรแกรมทีใ่ ช้สำหรับอ่ำนและแสดงข้อมูล
ทีเ่ ป็ นภำษำ HTML เพือ่ ให้ผูใ้ ช้คอมพิวเตอร์
สำมำรถเห็นผลลัพธ์ของเว็บเพจนั้นๆ เช่น Internet
Explorer , Netscape Navigator
Page 6
Tcp/IP
(Transmission Control Protocol / Internet Protocol)
เป็ นภาษามาตรฐานที่ใช้ ในการสื่อสาร (โปรโตคอล)
เชื่อมต่อเข้ าด้ วยกัน
Page 7
IP address
เป็ นเลขหมายประจาเครื่อง โดยแต่ละเครื่องจะมี
เลขหมายนี้ไม่ซา้ กัน
ประกอบด้ วยข้ อมูลจานวน 32 บิต แยกออกเป็ น
4 ส่วนๆ ละ 8 บิต แต่ละส่วนจะคั่นด้ วยเครื่องหมาย
จุด เช่น 205.86.265.65
Page 8
HTML (คืออะไร)
ภาษา HTML (HyperText Markup Language)
เป็ นภาษาที่ใช้คาสั่งที่เรี ยกว่า Tag มีท้ งั เปิ ดและปิ ด
เพื่อกาหนดบริ เวณที่มีผลของคาสั่ง คาสั่งภาษา HTML
จะเริ่ มมีผลที่บริ เวณ Tag เปิ ด และจะสิ้ นสุ ดผลของ
ค าสั่ ง นั้น เมื่ อ ถึ ง Tag
ปิ ด เมื่ อ เว็บ เพจถู ก เรี ย ก
ให้แสดงผล Browser จะอ่านภาษา HTML และแปล
ความหมายของคาสัง่ แล้วนามาแสดงผล
Page 9
ความสามารถของ Dreamweaver
ในการเขี ยนเว็ บเพจ จะมีลกั ษณะคล ายกั บการพิ มพ งานใน
โปรแกรม Text Editor ทัว่ ไป คือจะเรี ยงชิ ดซ ายบนตลอดเวลาไม สามารถย
าย หรื อ น าไปวางตาแหน งที่ต องการได ทันที่ เหมื อนโปรแกรม
กราฟ กเพราะฉะนั้ นหากเรา
ต องการจั ดวางรู ปแบบตามที่ เราต
องการ ก็ ใช ตาราง Table เข ามาช วยจั ด
ต าแหน ง ซึ่งเมื่อ
มีการจั ดวางรู ปแบบที่ซั บซ อนมากขึ้น การเขี ยนภาษา HTML ก็ซั บซ อนยิ่
งขึ้นเช นกัน โปรแกรม Dreamweaver อาจจะไม สามารถเขี ยน
เว็ บได ตามที่ เราต องการทั้ งหมด วิธี การแก ไขป ญหาที่ดีที่สุดคือ
ควรจะเรี ยนรู หลั กการของภาษา HTML ไปด วย
Page 10
ความสามารถของ Dreamweaver สรุ ปได ดังนี้
Page 11
Web page basic [HTML]
Page 12
Web page basic [HTML]
**** สร้ างโฟลเดอร์ สาหรับเก็บงาน ไว้ ทไี่ ดร์ วที่ต้้องการ
D:Mysite\
Page 13
2. ทาความรู้จักกับ ADOBE DreamweaverCS3
Page 14
วิธีการเข้ าสู่ โปรแกรมมีข้นั ต้อนดังนี้
1.คลิก
ที่ Taskbar ด้านล่าง
2. เลือกที่ Program >Adobe>
3. เข้าสู่ โปรแกรม Dreamweaver CS3
Page 15
ส่ วนประกอบของโปรแกรม
Page 16
ส่ วนประกอบทีส่ าคัญใน Dreamweaver CS3
Page 18
Web page basic [HTML]
1. Menu bar เป็ นทีเ่ ก็บคาสั่ ง
2. Insert Palette ใช้ แทรก Tag ต้่ างๆ ลงใน Web page ซึ่ง Tag ต้่ างๆจะถูกแบ่ งเป็ น
กลุ่มสามารถเลือกกลุ่มโดยคลิกเลือก Tabs ทีต้่ ้ องการ
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
Page 20
Tag Selector ใช้ ควบคุมการทางานในรูปแบบ HTML
Window Size กาหนดพืน้ ที่ใช้ งานต้ามต้้ องการ
Estimate Download Time แสดงเวลา ที่ใช้ ในการดาวน์ โหลด
Properties ใช้ กาหนดรู ปแบบต้่ างๆ ของต้ัวอักษร และรู ปภาพ รวมถึงการสร้ างลิงค์
Page 21
ส่ วนประกอบทีส่ าคัญ 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
Page 23
เลือกใน เมนู Window
Page 24
Web page basic [HTML]
การใส่ รูปภาพบนเว็บเพจ
ชนิดของรู ปภาพที่ใช้ในเว็บเพจมีอยู่ 3 ชนิดด้วยกัน ซึ่งแต่ละชนิดมี
รายละเอียดและลักษณะที่แตกต่างกันดังนี้
1.GIF (Graphic Interchange Format) เป็ นไฟล์ภาพที่สามารถแสดงผลกับ เบรา
เซอร์ได้ทุกชนิด โดยส่ วนมากมักจะใช้รูปภาพไฟล์ .gif กาหนดฉากหลังหรื อ
พื้นที่โปร่ งใส การใช้ทาภาพเคลื่อนไหว (Animation) ภาพโลโก้ ตัวการ์ตูน
ภาพตัวอักษรลายเส้นต่างๆ
2. JPG (Joint Photographic Expert Group) เป็ นไฟล์ภาพที่แสดงสี ได้ถึง 16.7
ล้านสี เหมาะสาหรับภาพที่ใช้สีจานวนมาก ภาพที่มีการไล่ระดับสี อย่าง
ต่อเนื่องหรื อภาพถ่ายทัว่ ไป
3. PNG (Portable Network Graphic) เป็ นไฟล์ภาพที่ไม่ได้รับความนิยมมากนัก
เมื่อเทียบกับ GIF, JPG เนื่องจากเป็ นรู ปแบบใหม่ จึงไม่สามารถแสดงผลได้
ทุกเบราเซอร์
Page 25
The End
Page 26
Web page basic [HTML]