1. คลกิ วางเคอรเ์ ซอร์ตรงตำแหน่งที่ต้องการวางสัญลักษณ์ 2. คลิกที่เมนู Window แล้วเลอื ก Insert (สังเกตต้องมีเครอ่ื งหมายถูก อย่ดู า้ นหนา้ Insert) 3. Insert Panel เลือก Text 4. คลิกที่ปมุ่ Characters แลว้ เลือกสญั ลักษณท์ ี่ตอ้ งการ การนำเอกสารอน่ื มาใชร้ ว่ มกับ Dreamweaver CS6 Adobe Dreamweaver CS6 สามารถนำข้อมูลจากโปรแกรมอื่น ๆ เชน่ Microsoft Word , Excel , PowerPoint มีวธิ ีการดังน้ี 1. การใช้ Import 1. คลกิ วางเคอร์เซอร์ตรงตำแหน่งทตี่ อ้ งการนำเขา้ ไฟลเ์ อกสาร
2. คลกิ ทเี่ มนู File 3. คลิกท่ี Import แลว้ เลอื กประเภทไฟล์นำเข้า (กรณีน้ี เลือกเป็นไฟล์ Word)
4. เลอื กโฟลเดอร์ทีอ่ ยู่ของไฟลเ์ อกสาร 5. เลือกไฟลท์ ่ีต้องการ 6. คลกิ ที่ป่มุ Open 7. รายละเอยี ดของไฟล์ทั้งหมด (ทงั้ ขอ้ ความและภาพ) จะถูกนำเขา้ มาในเวบ็ เพจ ดงั รปู
2. การคัดลอกขอ้ มูลจากไฟล์เอกสาร
1. เปิดไฟล์เอกสารทีต่ อ้ งการ แล้วเลือกขอ้ ความหรือเน้ือหาที่ตอ้ งการคดั ลอก จากนน้ั ให้คัดลอก หรือกดปุม่ Ctrl + C 2. นำเนื้อหาที่คัดลอกวางลงในโปรแกรม Adobe Dreamweaver โดยคลิกเคอร์เซอร์ตรง ตำแหน่งทีต่ อ้ งการวางข้อความ จากน้ันคลิกที่เมนู Edit เลือก Pate หรือกดปุ่ม Ctrl + V 3. จะไดเ้ นื้อหาตามทต่ี อ้ งการ (ทงั้ ข้อความและรูปภาพ)
การเตรยี มรูปภาพสำหรบั ใช้ในเว็บเพจ รปู ภาพนบั วา่ เป็นส่ิงสำคญั อย่างมากในการสรา้ งเว็บเพจ ทำให้ผู้อ่านเข้าใจเรื่องราวท่ีนำเสนอมาก ยง่ิ ขน้ึ และชว่ ยให้เว็บเพจมสี สี นั สวยงาม สิง่ ทจ่ี ะต้องคำนึงถงึ คือ ภาพควรจะตอ้ งมขี นาดเลก็ เพอ่ื นำไปเรียกใช้ บนเว็บเพจไดอ้ ยา่ งรวดเรว็ เชน่ GIF, JPEG และ PNG เพราะแต่ละแบบมีลกั ษณะการบบี อัดข้อมลู และสามารถ เลือกใช้ตามความเหมาะสม การนำภาพกราฟิกมาใชใ้ นเวบ็ เพจนยิ มใช้ภาพ 3 ฟอร์แมต (นามสกลุ ) คอื .gif , .jpg และ .png ซง่ึ มี รายละเอยี ดของภาพแตล่ ะชนิด ดงั นี้ 1. ภาพ GIF (Graphic Interchange Format) เป็นรูปแบบไฟล์ภาพที่พัฒนาขึ้นโดย CompuSever สำหรับบบี อดั ข้อมลู ภาพลายเส้น กำหนดสีได้สูงสดุ 256 สี มีคุณลักษณะโปร่งแสงและสร้าง ภาพเคลือ่ นไหวได้ สามารถแสดงผลบนเบราว์เซอร์ได้ทุกชนิด มักเปน็ รูปท่ีมีสีพน้ื เปน็ ส่วนใหญ่ ไม่ค่อยมีการไล่ สี แต่ถา้ มีการขยายภาพทำใหภ้ าพแตกได้ เช่น โลโก้ รูปการต์ นู ตา่ งๆ 2. ภาพ JPEG (Joint Photographic Experts Group) เปน็ รปู แบบไฟล์ท่ีบีบอัดข้อมูลให้ เลก็ ลง หลังการบีบอัดยงั คงแสดงสไี ด้สูงถึง 16.7 ล้านสี แต่ถา้ บบี อัดมากๆ คณุ ภาพจะเสยี ไป ไฟล์ที่บีบอัดทำ ใหข้ นาดเลก็ กว่าภาพ .gif กไ็ ด้ สามารถดาวน์โหลดได้เรว็ แต่เมอื่ นำมาแสดงผลกอ็ าจจะช้าบ้าง เพราะต้องขยาย ไฟลข์ ณะแสดงผลสามารถแสดงผลบนเบราว์เซอรไ์ ด้ทุกชนิดเช่นกัน ส่วนใหญ่มักจะเปน็ ภาพถา่ ย หรอื ภาพท่ีมี รายละเอียดสีมากๆ 3. ภาพ PNG (Portable Network Graphic) พฒั นาขนึ้ มาใช้งานบนเบราว์เซอร์ แต่ขณะน้ี ยงั ไม่ได้ความนยิ มมากนกั เมอ่ื เทียบกับไฟล์ .gif และ .jpg ขยายไดโ้ ดยภาพไมแ่ ตก การใสร่ ูปภาพลงในเวบ็ เพจ
1. คลิกวางเคอร์เซอรต์ รงตำแหนง่ ที่ตอ้ งการวางรปู ภาพ 2. คลิกท่ีเมนู Insert แล้วเลือก Image 3. หรือ คลกิ ท่แี ถบ Insert ให้เลือก Common 4. คลิกแล้วเลือก Image 5. เลอื กโฟลเดอรท์ เี่ กบ็ รูปภาพ 6. เลอื กรปู ภาพ ซ่งึ จะแสดงภาพตวั อยา่ งด้านขวามือ 7. คลิกปมุ่ OK
8. ใสค่ ำอธิบายรปู ภาพ (ไม่ใส่กไ็ ด)้ 9. คลิกปุ่ม OK 10. รูปภาพทเ่ี ลือกจะถูกนำมาแสดงในเว็บเพจ และจดั เกบ็ ไฟล์รปู ภาพในโฟลเดอรท์ ่ีใช้ในเว็บไซต์ ดังรปู การกำหนดคณุ สมบัตขิ องรปู ภาพ การกำหนดคุณสมบัตขิ องรูปภาพ สามารถปรับรายละเอียดไดท้ ่ี Properties Inspector
1. คลิกเลือกรปู ภาพทีต่ ้องการ 2. ใสช่ ่ือของรปู ภาพ 3. แหล่งทเ่ี กบ็ รปู ภาพ 4. คำอธิบายรปู ภาพ 5. ความสูง (H) ของรปู ภาพ 6. ความกวา้ ง (W) ของรูปภาพ 7. ไฮเปอรล์ งิ ค์ของรูปภาพ 8. เปิด/แก้ไขรปู ภาพดว้ ยโปรแกรมอื่น 9. ปรับลดความละเอยี ดของรปู ภาพ 10. อัพเดตรปู ภาพ (กรณีไมแ่ สดงภาพตามต้นฉบบั เฉพาะไฟล์ .PSD) 11. ตดั รูปภาพ 12. ปรบั ขนาดของรูปภาพ 13. ปรับค่าส/ี แสงของรูปภาพ 14. ปรับความคมชดั ของรปู ภาพ การตกแตง่ ภาพพื้นหลงั หรอื การแสดงภาพเปน็ พ้ืนหลัง 1. คลกิ ท่ีปมุ่ Page Properties... 2. ช่อง Category เลอื ก Appearance (CSS)
3. คลิกที่ปมุ่ Browse... 4. ช่อง Look in ให้เลอื กโฟลเดอร์ท่ีเก็บไฟล์รูปภาพ 5. คลกิ เลอื กรูปภาพ เพือ่ นำไปเปน็ ภาพพ้ืนหลัง 6. คลกิ ที่ปุ่ม OK 7. จะปรากฏภาพพน้ื หลังในหนา้ เว็บเพจ ดงั รปู
โครงสรา้ งและส่วนประกอบของตาราง การสรา้ งตารางจะช่วยจัดหน้าเว็บเพจใหเ้ ป็นระเบียบเรยี บร้อย รวมถึงการปรบั แต่งค่าต่างๆ เช่น เส้น ขอบของตาราง สีพื้นหลัง ข้อความในเซลล์ การรวมหรือแยกเซลล์ เพื่อใช้ในการแสดงข้อมูล ซึ่งตาราง ประกอบด้วย 1. คอลัมน์ (Column) หรอื เซลล์ในแนวตงั้ 2. แถว (Row) หรอื เซลลใ์ นแนวนอน 3. เซลล์ (Cell) หรือช่องของตาราง การใส่ตารางลงในเว็บเพจ การสรา้ งตารางมีหลายวิธี ซ่ึงมวี ิธกี ารดงั นี้ วธิ ีท่ี 1
วธิ ที ่ี 2 1. คลิกวางเคอรเ์ ซอรต์ รงตำแหน่งที่ตอ้ งการ 2. แทบ็ Insert ใหเ้ ลือก Common
3. คลิกเลอื ก Table 4. จะปรากฏหน้าต่างของ Table โดยแบง่ ออกเป็น 3 กล่มุ ดงั รปู กลุม่ ที่ 1 : Table size (กำหนดรายละเอยี ดของตาราง) - Rows : จำนวนแถว - Columns : จำนวนคอลัมน์ - Table width : ความกว้างของตาราง (หนว่ ยที่ใช้วัดเป็นเปอรเ์ ซ็นตห์ รอื พิกเซล) - Border thickness : ความหนาของเสน้ ขอบตาราง - Cell padding : ระยะห่างระหว่างขอบเซลล์กบั เนอ้ื หา - Cell spacing : ระยะห่างระหว่างเซลล์ในตาราง กลมุ่ ที่ 2 : Header (เลอื กตำแหนง่ ของหวั เรอ่ื งภายในตาราง) - None : ไมใ่ ช้หัวเร่อื งในตาราง - Left : กำหนดให้มหี ัวเร่ืองทางด้านซา้ ย - Top : กำหนดให้มีหัวเรอ่ื งทางดา้ นบน - Both : กำหนดใหม้ ีหวั เร่อื งด้านซ้ายและดา้ นบน กลุ่มที่ 3 : Accessibility (กำหนดขอ้ มูลทัว่ ไปในตาราง) - Caption : กำหนดหัวข้อของตาราง
- Summary : คำอธบิ ายกำกับตาราง 5. เม่ือกำหนดคณุ สมบัติต่าง ๆ เสร็จเรียบร้อยแลว้ ได้ตารางตามที่เราตอ้ งการ การปรับแตง่ คณุ สมบตั ิของตาราง เมื่อเราคลกิ เลือกที่ตาราง เราสามารถปรับแต่งรายละเอียดต่าง ๆ ของตารางในส่วนของ Properties Inspector ดังน้ี 1. Table : ชื่อของตาราง 2. Rows : จำนวนแถว 3. Cols : จำนวนคอลัมน์ 4. w : ความกวา้ งของตาราง 5. Direction : เปลย่ี นทศิ ทางของตาราง 6. Cellpad : ระยะหา่ งระหวา่ งขอบเซลลก์ ับเน้อื หา 7. CellSpace : ระยะหา่ งระหว่างเซลลแ์ ตล่ ะเซลล์ 8. Align : การจดั ตำแหนง่ ของตาราง 9. Border : ความหนาของเสน้ ขอบตาราง 106. Class : กำหนดค่า CSS ให้กับตาราง
1. การเพ่ิม/ลบ (แถวหรอื คอลมั น)์ เมื่อเราสร้างตารางเสร็จเรียบร้อยแล้วและต้องการที่จะเพิม่ /ลบ (แถวหรือคอลัมน์) สามารถทำได้ ตามขนั้ ตอน ดงั นี้ 1. คลกิ เมาสว์ างเคอรเ์ ซอร์ตรงตำแหนง่ ของเซลล์ทตี่ ้องการ 2. คลกิ เมาสป์ ุ่มขวา จะปรากฏเมนยู ่อย ใหเ้ ลือก Table 3. จะปรากฏรายการใหเ้ ลอื ก ดังนี้ - Insert Row : แทรกแถว - Insert Column : แทรกคอลมั น์ - Insert Rows or Columns : แทรกแถวหรอื แทรกคอลัมน์ - Delete Row : ลบแถว - Delete Column : ลบคอลมั น์ 2. การรวมเซลล์ / การแบง่ เซลล์ หากเราต้องการรวมเซลล์หลายๆ เซลล์เขา้ ด้วยกนั หรือต้องการแบง่ เซลล์ มวี ิธีการดงั น้ี
1. เลือกเซลลท์ ต่ี อ้ งการรวม (ตอ้ งเป็นเซลล์ท่ตี ิดกนั ) 2. คลกิ เมาสป์ ุ่มขวา จะปรากฎเมนยู ่อย ให้เลือก Table 3. จะปรากฏรายการให้เลอื ก ดังนี้ - Merge Cells : แทรกเซลล์ - Split Cell : แบง่ เซลล์ 4. เซลล์ท่ถี กู เลอื กจะรวมเซลล์เข้าด้วยกนั ดังรปู หมายเหตุ กรณีแบ่งเซลล์ เม่ือคลกิ ที่ Split Cell จะปรากฏหน้าตา่ ง Split Cell ดงั รปู
Rows : เลือกแบ่งเซลลอ์ อกเป็นแถว Columns : เลือกแบ่งเซลล์ออกเปน็ คอลมั น์ Number of ... : กำหนดจำนวนเซลลท์ ่ีต้องการจะแบ่ง การแทรกขอ้ ความและรูปภาพลงในตาราง 1. คลิกเซลลท์ ่ีตอ้ งการจะแทรกขอ้ ความ แล้วพมิ พ์ข้อความลงไปเหมือนโปรแกรม Microsoft Excel
2. คลกิ เซลลท์ ตี่ ้องการจะแทรกรูปภาพ 3. คลิกทเี่ มนู Insert 4. เลือก Image หรอื กดป่มุ Ctrl + Alt + I จะปรากฏหน้าตา่ ง Select Image Source 5. คลิกทช่ี ่อง Look in เพอ่ื เลอื กโฟลเดอรท์ เ่ี กบ็ รูปภาพ 6. คลิกเลอื กรูปภาพ ซ่ึงจะแสดงภาพตัวอย่างด้านขวามอื 7. คลิกปุม่ OK 8. รูปภาพจะแทรกในเซลล์นนั้ ทนั ที สามารถปรับแตง่ ได้ตามตอ้ งการ
การเช่ือมโยงเว็บเพจ การสรา้ งลิงค์จะทำให้เอกสารเว็บเพจธรรมดากลายเป็นเวบ็ เพจที่ประกอบด้วยเนื้อหาท่ีน่าสนใจโดยผ่านการ คลิกเลอื กดเู น้ือหาในแตล่ ะหน้าท่ีน่าสนใจ การสร้างลงิ ค์ ลิงค์สามารถเช่อื มโยงข้อมูลได้ วธิ ี คอื • การเชือ่ มโยงข้อมลู ภายในเว็บหนา้ เดยี วกนั • การเชอ่ื มโยงข้อมลู ในเว็บเพจหน้าอนื่ • การเชอื่ มโยงข้อมูลไปเวบ็ ไซตอ์ ืน่ 1. การเชือ่ มโยงขอ้ มลู ภายในเวบ็ เพจเดียวกัน คือ การเชอ่ื มโยงข้อมูลในหน้าเว็บเพจเดียวกนั โดยการคลกิ ลิงคเ์ พื่อเลอ่ื นขึ้นหรอื ลง หรอื ไปตำแหนง่ ท่ตี ้องการ ภายในหนา้ เดียวกัน รูปแบบของแท็ก HTML <a href=“jump”>…</a> (สรา้ งจดุ ปลายทางช่อื jump) <a href=“#jump”>…</a> (เชือ่ มโยงไปจดุ ปลายทางชื่อ jump) คา่ ทีก่ ำหนดใหใ้ ช้ ชอื่ จุดหมายปลายทาง ทไ่ี ม่ซ้ำชือ่ อน่ื ที่อย่ใู นหน้าเว็บเดยี วกัน ตัวอย่างการใช้งาน <html> <head> <title>การเชือ่ มโยงเวบ็ เพจหน้าเดียวกนั </title> </head> <body> <b>รายชื่อเว็บไซตท์ นี่ า่ สนใจ</b>
<!—กำหนด Link กระโดดไปยงั จดุ เชอื่ มต่อตา่ ง ๆ ในเวบ็ เพจ—><br /> <a href=”#computer”>เวบ็ ไซตเ์ ก่ียวกบั คอมพวิ เตอร์</a><br /> <a href=”#graphic”>เว็บไซต์เก่ยี วกับงานกราฟกิ </a><br /> <a href=”#travel”>เว็บไซตเ์ กี่ยวกับท่องเท่ยี ว</a><br /> <hr> <!—กำหนดจดุ เช่อื ม—> <a name=”computer”>เวบ็ ไซตเ์ ก่ยี วกับคอมพิวเตอร์</a><br /> <a name=”graphic”>เวบ็ ไซต์เก่ียวกับงานกราฟิก</a><br /> <a name=”travel”>เวบ็ ไซตเ์ ก่ยี วกบั ท่องเทยี่ ว</a><br /> </body> </html> 2. การเชอ่ื มโยงข้อมูลไปยงั เว็บเพจอื่นภายในเวบ็ ไซตเ์ ดยี วกัน คือ การเชอื่ มโยงข้อมูลไปยงั หนา้ เวบ็ เพจอื่นที่อยเู่ ว็บไซตเ์ ดยี วกัน เพ่อื ให้สามารถเลือกดูเนื้อหาตามลิงค์ของ เรือ่ งทต่ี อ้ งการเยยี่ มชม รปู แบบของแท็ก HTML <a href=“ช่ือเวบ็ เพจท่ีตอ้ งการเช่ือมโยง”>เร่ืองทจ่ี ะเปน็ จุดเช่อื มโยง</a> คา่ ทก่ี ำหนดใหใ้ ช้ ชื่อเว็บเพจท่เี ช่อื มโยงจะเปน็ ชอ่ื ภาษาอังกฤษ.html ตวั อยา่ งการเช่ือมโยงเว็บเพจกับหนา้ อ่นื
• หน้าแรกของเวบ็ เพจ หรือ โฮมเพจ จะมีเนื้อหา 2 เรื่อง คือ งานสวนทิวลิปนนท์ จะลิงค์ไปยังหนา้ tulip.htmlและ งานธนั วาพฤกษชาติ คร้ังที่ 11จะลงิ คไ์ ปยงั หน้า tanwa.html • หน้าเว็บเพจงานสวนทิวลิปนนท์ จะลิงค์กลับมาที่แรกของเว็บ คือ index.htmlและ งานธันวา พฤกษชาติ จะลิงค์กลบั มาท่ีแรกของเว็บ คือ index.html ตัวอย่างการเขยี นคำส่ังเช่ือมโยงเว็บเพจไปยังเว็บเพจอ่ืน <html> <head> <title>ต ั ว อ ย ่ า ง ก า ร เ ช ื ่ อ ม โ ย ง เ ว ็ บ เ พ จ ไ ป ย ั ง เ ว ็ บ เ พ จ ห น ้ า อ ื ่ น </title> </head> <body> … <a href=“tulip.html”>งานสวนทวิ ลิปนนท์</a> … <a href=“tanwa.html”>งานธันวาพฤกษชาติ</a> …
</body> </html> ทำความเขา้ ใจ • การเชื่อมโยงเว็บเพจแบบ Relative Path Names ซึ่งเป็นวิธีที่ใช้ในการอ้างอิงไฟล์เว็บเพจ ไฟล์ เอกสาร ไฟล์ให้ดาวนโ์ หลดท่เี กบ็ ในเวบ็ ไซต์เดียวกนั • การเชื่อมโยงเว็บเพจไปยังเว็บเพจอื่นในไดเรกทอรีเดียวกันจะสามารถเชื่อมโยงโด ยใช้แท็ก <a href…> โดยพมิ พช์ ่อื เวบ็ เพจทต่ี อ้ งการลงไป เชน่ <a href=“history.html”>ประวัติของโรงเรยี น</a> • หากต้องการเชื่อมโยงเวบ็ เพจไปยงั ไดเรกทอรที ตี่ ่ำกวา่ เราสามารถใช้ <a href…> แลว้ อา้ งอิงตำแหน่ง ของเว็บปลายทางตั้งแตเ่ ริม่ ต้นจนถึงปลายทาง <a href=“person/thai.html”>กล่มุ สาระการเรยี นรู้ภาษาไทย</a> โดยเราจะใสช่ ่ือไดเรกทอรีและค่นั ดว้ ยเครอ่ื งหมาย “/” ตามดว้ ยไฟลท์ ี่เราต้องการเชื่อมโยง หากมีหลายชน้ั เรา กต็ อ้ งกำหนดไดเรกทอรีให้ครบ หากอ้างองิ ไม่ครบหรือระบุผดิ จะทำใหท้ ำงานผิดพลาด • หากต้องการเชื่อมโยงเว็บเพจไปยังปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกว่า 1 ระดับจะมีวิธีการ กำหนดคือ <a href=“../person.html”>บุคลากรของโรงเรยี น</a> • หากต้องการเชื่อมโยงเว็บเพจไปยงั ปลายทางที่อยู่ในไดเรกทอรีที่อยู่เหนือกวา่ 2 ระดับจะมีวิธีการ กำหนดคือ <a href=“../../person.html”>บคุ ลากรของโรงเรยี น</a> 3. การเช่อื มโยงขอ้ มูลไปยังเวบ็ ไซตท์ ่อี นื่ คอื การเชื่อมโยงขอ้ มูลไปยงั หนา้ เวบ็ ไซต์ที่เกี่ยวข้องหรือน่าสนใจ โดยวธิ ีการระบุ URL ของเว็บไซต์น้ันในแท็ก <a href…> รปู แบบการใชง้ าน รูปแบบ <a href= “URL ของเว็บไซตท์ ต่ี ้องการเชื่อมโยง”>ขอ้ ความท่ีจะเชื่อมโยง</a> เช่น <a href=http://www.swt.ac.th>โรงเรียนเสรมิ งามวทิ ยาคม</a> ตวั อย่างการใช้งาน <html> <head> <title>การเชื่อมโยงขอ้ มลู ไปยงั เว็บไซต์</title> <body> <b>เว็บไซตท์ ีน่ า่ สนใจ</b><br />
<a href=”http://www.google.com”>google</a><br /> <a href=”http://www.sanook.com”>sanook</a><br /> <a href=”http://www.pantip.com”>pantip</a><br /> </body> </html> ผลลัพธ์ทีไ่ ด้ เราสามารถเปิด URL ในเวบ็ บราวเซอรใ์ หม่ โดยใชค้ ำสัง่ วา่ target=“_blank” ลงไปหลัง URL <a href=“http://www.swt.ac.th” target=“_blank”>โรงเรียนเสริมงามวิทยาคม</a> 4. การเชื่อมโยงด้วยรปู ภาพ การใช้รปู ภาพเป็นจุดเชอื่ มโยง เปน็ การทำใหเ้ ว็บเพจนา่ สนใจและสามารถใช้แทนขอ้ ความธรรมดาได้ รปู แบบของแท็ก <img src= “ตำแหนง่ ของรูปภาพ/รูปภาพท่ใี ช้”> คา่ ท่ีกำหนดใหใ้ ช้ ชอ่ื รปู ภาพที่ใช้เป็นสญั ลักษณ์ในการเชอ่ื มโยง ตวั อย่างการเช่อื มโยงเวบ็ ไซต์ด้วยรปู ภาพ <html> <head> <title>การเชื่อมโยงเว็บไซตด์ ้วยรปู ภาพ</title>
<body> <b>เว็บไซตท์ ่นี า่ สนใจ</b><br /> <a href=”http://www.google.com”><img src=”pic/google.jpg” /></a><br /> <a href=”http://www.sanook.com”><img src=”pic/sanook.jpg” /></a><br /> <a href=”http://www.pantip.com”><img src=”pic/pantip.jpg” /></a><br /> </body> </html> 5. การเชื่อมโยงไปยังไฟลต์ า่ ง ๆ เปน็ การเชอ่ื มโยงไปยงั ไฟลต์ ่าง ๆ เชน่ ไฟล์รปู ภาพ, ไฟลว์ ดี ีโอ, ไฟลโ์ ปรแกรม, ไฟล์เสยี ง, ไฟล์ .zip, และไฟล์ มัลติมีเดีย ซง่ึ การเชอ่ื มโยงจะเหมือนการลิงค์แบบธรรมดา เพยี งแต่ระบุปลายทางไปยงั ไฟลน์ ั้น ๆ โดยและระบุ นามสกลุ หากเป็นไฟล์รปู ภาพจะแสดงอตั โนมตั ิ แต่ถา้ เปน็ ไฟล์อ่นื ๆ จะขนึ้ หน้าจอใหเ้ ราบนั ทึกและดาวน์โหลด เอกสาร รูปแบบ <a href=“ช่ือโฟลเดอร์ หรือไดเรกทอร/ี ช่ือไฟล์ที่ตอ้ งการลิงค์”>ข้อความที่จะเชอ่ื มโยง</a>
6. การเช่อื มโยงไปอีเมล์ (E-mail) ใชใ้ นกรณีท่ตี ้องการให้คนอื่นติดต่อเรา โดยใหส้ ร้างลงิ ค์ช้ีไปยังอเี มลแ์ อดเดรสของเรา เม่ือผู้ใช้คลิกท่ีลิงค์จะ สง่ ไปยังอเี มลข์ องเราโดยอัตโนมตั ิ รปู แบบ <a href=“mailto: ช่ือ E-mail Adree”>ขอ้ ความท่เี ปน็ ลงิ ค์</a> ตวั อย่างการลิงคไ์ ปยงั ไฟลต์ ่าง ๆ <html> <head> <title>การเช่อื มโยงเว็บไซต์ดว้ ยรปู ภาพ</title> <body> <a href=”mailto:[email protected]”>ติดตอ่ ผู้จัดทำ</a> </body> </html>
นอกจากนเ้ี รายังสามารถลงิ ค์ไปยังบรกิ ารตา่ ง ๆ ได้ เชน่ การโอนยา้ ยไฟล์ โดยใชค้ ำสัง่ <a href=ftp://ทอี่ ย่ขู อง Address ที่ตอ้ งการลิงค์> 7. การกำหนดสขี องลิงค์ ปกตหิ ากเราไมก่ ำหนดคา่ สขี องลิงค์ คา่ ปกติคอื สีนำ้ เงินและมีเส้นใต้ การเปล่ยี นสีลิงคเ์ ป็นการเปล่ียนสีสันของ ลิงค์ให้มีสตี า่ ง ๆ เพ่ือใหส้ ังเกตง่าย ๆ ซึง่ สีของลงิ ค์จะมสี ถานะตา่ ง ๆ แตกต่างกัน ดังน้ี • สีของลิงค์ทีย่ งั ไม่เคยถกู คลกิ (Hyperlink) • สีของลงิ ค์ทเ่ี คยถูกคลิกไปแลว้ (Visited Hyperlink) • สีของลิงคต์ อนทถี่ ูกคลกิ (Active Link) เพ่ือปอ้ งกนั ไมใ่ ห้สขี องลิงค์กลืนสฉี ากหลงั เราสามารถกำหนดสขี องลงิ คใ์ นสถานะต่าง ๆ ได้ ดังน้ี รปู แบบแทก็ HTML และ XHTML <body link=“ส/ี รหสั สี” vlink=“สี/รหสั สี” alink=“ส/ี รหัสสี”> ตวั อย่างการกำหนดสขี องลงิ ค์ <html> <head> <title>ตวั อยา่ งการเชอ่ื มโยงเวบ็ เพจไปยังเว็บเพจหนา้ อนื่ </title> </head> <body link=”green” vlink=”blue” alink=”red”>
<a href=“tulip.html”>งานสวนทวิ ลปิ นนท์</a><br /> <a href=“tanwa.html”>งานธนั วาพฤกษชาติ</a> </body> </html>
Search
