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 1. สนับสนุนการทางานแบบ WYSIWYG (What You See Is What You Get) หมายความว่า เว็บที่เราเขียนหน้าจอ Dreamweaver ก็จะแสดงแบบเดียวกับ เว็บเพจจริ งๆ ช่วยให้เราเขียนเว็บเพจง่ายขึ้น ไม่ตอ้ งเขียน Code HTML เอง 2. มีเครื่ องมือในการช่วยสร้างเว็บเพจ ที่มีความยืดหยุน่ สู ง 3. สนับสนุนภาษาสคริ ปต์ต่างๆ ทั้งฝั่ง Client และ Server เช่น Java, ASP, PHP, CGI, VBScript 4. มีเครื่ องมือในการ Upload หน้าเว็บเพจไปที่เครื่ อง Server เพื่อทาการ เผยแพร่ งานที่เราสร้างในอินเทอร์เน็ต โดยการส่ งผ่าน FTP หรื อ โดยการใช้ โปรแกรม FTP ภายนอกช่วย เช่น WS FTP 5. รองรับมัลติมีเดีย เช่น การใส่ เสี ยง, การแทรกไฟล์วิดีโอ, การใช้งาน ร่ วมกับโปรแกรม Flash , Fireworks Page 11 Web page basic [HTML] การใช้ งานพืน้ ฐาน (สิ่ งที่ควรทราบเบือ้ งต้ น) 1. ภาษา HTML เป็ นภาษาที่ออกแบบสาหรับการแสดงผลเท่านั้น ไม่สามารถประมวลผล หรื อใช้เขียน เว็บแอพพลิเคชัน่ ได้ 2. หากต้องการเพิ่มลูกเล่น หรื อ เทคนิคพิเศษ เช่น Effect ต่าง ๆ ต้องนาภาษา JavaScript มาเสริ ม HTML อีกที 3. การจัดรู ปแบบใน Code เช่นการขึ้นบรรทัดใหม่ การเว้นวรรค ไม่มีผลต่อการแสดงผลทาง Web Browser 4. การขึ้นบรรทัดใหม่ ต้องใช้ Tag <BR> หรื อ กดปุ่ ม Shift+Enter 5. การขึ้นย่อหน้าใหม่ ต้องใช้ Tag <P> หรื อ กดปุ่ ม Enter 6. การเว้นวรรค ต้องใช้ Tag พิเศษ คือ หรื อ กดปุ่ ม Ctrl+ Shift + Spacebar 7. หลักการอ่าน Tag ของภาษา HTML จะอ่านค่าจาก Tag ที่อยูด่ า้ นในก่อน 8. ไฟล์ HTML และ Script ต่างๆ สามารถเปิ ดแก้ไขในโปรแกรม Text Editor ทัว่ ๆ ไปไม่จาเป็ นต้อง แก้ไขใน Dreamweaver เพียงอย่างเดียว 9. การแทรกข้อความ และ การปรับแต่งค่าต่าง ๆ ให้คลิกตาแหน่งที่ตอ้ งการ แล้วพิมพ์ขอ้ ความตาม ต้องการ หรื อให้เลือกข้อความเมื่อต้องการกาหนดค่าต่าง ๆ เพิ่มเติม Page 12 Web page basic [HTML] ทาความรู้จักกับ ADOBE DreamweaverCS3 Page 13 Page 14 Web page basic [HTML] ส่ วนประกอบของโปรแกรม Page 15 ส่ วนประกอบทีส่ าคัญใน Dreamweaver CS3 Menu Bar Object Bar Tool Bar Panel Group Status Bar Properties หน้ าจอแสดงผล (Document Windows) หน้าต่างการทางานของ Dreamweaver สามารถเลือกหน้าต่างการทางานได้ 3 รู ปแบบ โดยการคลิกไอคอนที่อยูใ่ นแถบเครื่ องมือ Toolbar ดังนี้ Show Code View เป็ นหน้าต่างที่ให้แสดงเฉพาะโค้ด HTML ของหน้าเว็บเพจที่ กาลังทางาน Show Code and Design View เป็ นหน้าต่างที่แสดงทั้งโค้ด HTML และหน้าเว็บ เพจที่กาลังทางาน Show Design View ให้แสดงแต่หน้าเว็บเพจไม่ตอ้ งแสดงโค้ด HTML Page 17 Web page basic [HTML] 1. แถบคาสั่ ง (Menu Bar) เป็ นแถบที่ใช้ เก็บคาสั่ งทั้งหมดของโปรแกรม 2. แถบวัตถุ (Object Palette) เป็ นกลุ่มเครื่องมือต่ างๆ ทีใ่ ช้ ในการควบคุม วัตถุ บนชิ้นงาน เอกสารเว็บ เช่ น เส้ นกราฟิ ก (Horizontal Rule), ตาราง, รูปภาพ, เลเยอร์ (Layer) 3. แถบคาเครื่องมือ (Toolbar) รวบรวมปุ่ มคาสั่ งทีใ่ ช้ งานบ่ อย 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 19 4. แถบแสดงสถานะ (Status Bar) Tag Selector ใช้ ควบคุมการทางานในรูปแบบ HTML Window Size กาหนดพืน้ ที่ใช้ งานตามต้ องการ Estimate Download Time แสดงเวลา ที่ใช้ ในการดาวน์ โหลด Page 20 5. Properties Palette เป็ นรายการที่ปรับเปลี่ยนได้ ตามลักษณะการเลือกข้อมูล เช่น หากมีการ เลือกที่จะพิมพ์ หรื อแก้ไขเนื้ อหา รายการก็จะเป็ น ส่ วนทางานที่เกี่ยวกับอักษร, การจัดพารากราฟ ถ้าเลื อกที่ รูปภาพ รายการในแถบนี้ ก็จะเป็ นคาสั่งต่างๆ ที่ เกี่ยวกับการควบคุมเรื่ องรู ปภาพ Page 21 6. Panel Group เป็ นกลุ่มของแถบเครื่ องมือที่สามารถ เรี ยกใช้งานได้อย่างรวดเร็ ว เพื่อให้ง่ายในการสร้าง Application บนอินเทอร์เน็ต เช่น การแทรก Code ของ JavaScript และ VBScript ลงในเว็บเพจได้ อย่างง่ายๆ โดยสามารถเรี ยกใช้งานได้จาก Panel Group Page 22 Web page basic [HTML] การเริ่มกาหนดโครงร่ างของเว็บ ก่ อนดาเนิ นการสร้ างเว็บเพจ ขั้น แรกควรกาหนดให้ขอ้ มูลต่ างๆ ที่เกี่ยวข้องอยูใ่ น Folder เดียวกัน เพื่อง่ายต่อค้นหาและจัดเก็บ ตัวอย่างเช่น ทาเว็บเพจของหน่วยงานก่อนอื่นเราควรสร้าง Folder ชื่อของหน่วยงานก่อน อาจเป็ นภาษาอังกฤษหรื อภาษาไทยก็ได้ แล้วใน Folder หน่วยงานค่อยสร้าง Folder ย่อยอีกที อาจประกอบด้วยหลาย Folder ย่อย เพื่อใช้สาหรับแยกเก็บ ไฟล์ต่ าง ๆ เป็ นหมวดหมู่ เช่ น ไฟล์รู ปภาพ ไฟล์ HTML และ ไฟล์ Multimedia ต่างๆ Page 23 Web page basic [HTML] แสดงการสร้าง Folders และ Sub Folders เพื่อใช้สาหรับเก็บข้อมูล ให้เป็ นหมวดหมู่ ตัวอย่างเช่น MySamaporn 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]