Differences

This shows you the differences between the selected revision and the current version of the page.


oss:nvu:web-create 2008/12/11 15:01 oss:nvu:web-create 2008/12/11 15:12 current
Line 77: Line 77:
===== จุดเชื่อม (Link) ===== ===== จุดเชื่อม (Link) =====
 +  * ลิงก์ หรือจุดเชื่อมเอกสาร นับว่าเป็นหัวใจหลักของเอกสารเว็บ การทำลิงก์สามารถทำได้ทั้งข้อความ และรูปภาพ
 +  * ลิงก์เชื่อมไฟล์ สามารถทำได้กับไฟล์เอกสารหลายฟอร์แมต โดยไฟล์ฟอร์แมตอื่นๆ จะทำงานในลักษณะดาวน์โหลด เช่น การดาวน์โหลดโปรแกรมต่างๆ จากหน้าเว็บ
 +    * ทำแถบสีคลุมข้อความที่ใช้เป็นจุดลิงก์ หรือคลิกเลือกรูปภาพ คลิกปุ่ม Link
-·        ลิงก์ หรือจุดเชื่อมเอกสาร นับว่าเป็นหัวใจหลักของเอกสารเว็บ การทำลิงก์สามารถทำได้ทั้งข้อความ และรูปภาพ+{{  :oss:nvu:image355.png  |}}
-·        ลิงก์เชื่อมไฟล์ สามารถทำได้กับไฟล์เอกสารหลายฟอร์แมต โดยไฟล์ฟอร์แมตอื่นๆ จะทำงานในลักษณะดาวน์โหลด เช่น การดาวน์โหลดโปรแกรมต่างๆ จากหน้าเว็บ+    * พิมพ์ชื่อไฟล์ที่ต้องการให้ลิงก์ โดยชื่อไฟล์อาจจะเป็นไฟล์ .html หรือ ไฟล์ใดๆ ก็ได้ โดยจะต้องระบุ “นามสกุล” ของไฟล์ด้วยเสมอ (หมายเหตุ ระวังเรื่องพิมพ์ชื่อไฟล์ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ถือว่าเป็นคนละตัวกัน) 
 +  * สามารถคลิกปุ่ม Choose File… เลือกไฟล์ที่ต้องการได้ 
 +  * ถ้าต้องการยกเลิกการทำจุดลิงก์ ให้ดับเบิลคลิกที่คำที่ต้องการยกเลิก แล้วลบรายชื่อไฟล์ออกจากรายการ Link Location 
 +  * นอกจากการลิงก์เรียกไฟล์เอกสาร HTML ที่กล่าวไปแล้ว ยังสามารถทำจุดลิงก์เพื่อเรียกโปรแกรมรับส่งเมล์ โดยวิธีนี้จะช่วยให้ผู้ใช้สามารถเปิดโปรแกรมรับส่งเมล์ ตลอดจนเอกสาร HTML จะส่ง E-Mail Address ที่กำหนดไว้ในจุดลิงก์ไปใส่ไว้ในรายการ To ให้โดยอัตโนมัติ โดยผู้ใช้ไม่จำเป็นต้องเสียเวลาเรียกโปรแกรม และระบุ E-Mail Address นั่นเอง ทั้งนี้โปรแกรมเบราว์เซอร์ที่เรียกดูเอกสารเว็บ จะต้องกำหนดค่าติดตั้งในการเรียกโปรแกรมรับส่งอีเมล์ไว้แล้ว ไม่ฉะนั้นก็จะเกิดข้อผิดผลาดในการเรียกโปรแกรมได้ โดยการทำลิงก์เรียกโปรแกรมส่งเมล์ใช้หลักการเดียวกับลิงก์เปิดไฟล์ข้างต้น แต่ให้เปลี่ยนคำบังคับในรายการ Link Location เป็น mailto:ตามด้วยอีเมล์ของเจ้าของเว็บ เช่น mailto:boonlert@nectec.or.th 
 +  * ลิงก์เรียกเว็บไซต์อื่น ใช้หลักการเดียวกับการทำลิงก์เรียกไฟล์ แต่ให้ระบุด้วยคำบังคับ คือ http://ชื่อเว็บ เช่น http://www.nectec.or.th ทั้งนี้สามารถระบุ Target=_blank เพื่อเปิดหน้าต่างใหม่ในการแสดงผลโดยคลิกปุ่ม Advanced Edit…แล้วเลือกรายการ Target=_blank
-o      ทำแถบสีคลุมข้อความที่ใช้เป็นจุดลิงก์ หรือคลิกเลือกรูปภาพ คลิกปุ่ม Link +===== การนำเข้ารูปภาพ =====
- +
-o      พิมพ์ชื่อไฟล์ที่ต้องการให้ลิงก์ โดยชื่อไฟล์อาจจะเป็นไฟล์ .html หรือ ไฟล์ใดๆ ก็ได้ โดยจะต้องระบุ “นามสกุล” ของไฟล์ด้วยเสมอ (หมายเหตุ ระวังเรื่องพิมพ์ชื่อไฟล์ตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก ถือว่าเป็นคนละตัวกัน) +
- +
-§        สามารถคลิกปุ่ม Choose File… เลือกไฟล์ที่ต้องการได้ +
- +
-o      ถ้าต้องการยกเลิกการทำจุดลิงก์ ให้ดับเบิลคลิกที่คำที่ต้องการยกเลิก แล้วลบรายชื่อไฟล์ออกจากรายการ Link Location +
- +
-·        นอกจากการลิงก์เรียกไฟล์เอกสาร HTML ที่กล่าวไปแล้ว ยังสามารถทำจุดลิงก์เพื่อเรียกโปรแกรมรับส่งเมล์ โดยวิธีนี้จะช่วยให้ผู้ใช้สามารถเปิดโปรแกรมรับส่งเมล์ ตลอดจนเอกสาร HTML จะส่ง E-Mail Address ที่กำหนดไว้ในจุดลิงก์ไปใส่ไว้ในรายการ To ให้โดยอัตโนมัติ โดยผู้ใช้ไม่จำเป็นต้องเสียเวลาเรียกโปรแกรม และระบุ E-Mail Address นั่นเอง ทั้งนี้โปรแกรมเบราว์เซอร์ที่เรียกดูเอกสารเว็บ จะต้องกำหนดค่าติดตั้งในการเรียกโปรแกรมรับส่งอีเมล์ไว้แล้ว ไม่ฉะนั้นก็จะเกิดข้อผิดผลาดในการเรียกโปรแกรมได้ โดยการทำลิงก์เรียกโปรแกรมส่งเมล์ใช้หลักการเดียวกับลิงก์เปิดไฟล์ข้างต้น แต่ให้เปลี่ยนคำบังคับในรายการ Link Location เป็น mailto:ตามด้วยอีเมล์ของเจ้าของเว็บ เช่น mailto:boonlert@nectec.or.th +
- +
-·        ลิงก์เรียกเว็บไซต์อื่น ใช้หลักการเดียวกับการทำลิงก์เรียกไฟล์ แต่ให้ระบุด้วยคำบังคับ คือ http://ชื่อเว็บ เช่น http://www.nectec.or.th ทั้งนี้สามารถระบุ Target=_blank เพื่อเปิดหน้าต่างใหม่ในการแสดงผลโดยคลิกปุ่ม Advanced Edit…แล้วเลือกรายการ Target=_blank +
- +
-การนำเข้ารูปภาพ+
เอกสารเว็บจะน่าสนใจหรือไม่ นอกจากเนื้อหาที่นำเสนอ ภาพกราฟิกที่นำมาใช้ ก็เป็นส่วนประกอบส่วนหนึ่งเช่นกัน หลักการนำภาพมาใช้ในการสร้างเอกสารเว็บ มีข้อที่ควรทราบ ดังนี้ เอกสารเว็บจะน่าสนใจหรือไม่ นอกจากเนื้อหาที่นำเสนอ ภาพกราฟิกที่นำมาใช้ ก็เป็นส่วนประกอบส่วนหนึ่งเช่นกัน หลักการนำภาพมาใช้ในการสร้างเอกสารเว็บ มีข้อที่ควรทราบ ดังนี้
-·        ภาพที่นำมาใช้ไม่ควรมีขนาดโตเกินไป +  * ภาพที่นำมาใช้ไม่ควรมีขนาดโตเกินไป 
- + * หากจำเป็นต้องใช้ภาพใหญ่ จะต้องนำเทคนิคการตัดภาพมาช่วย 
-·        หากจำเป็นต้องใช้ภาพใหญ่ จะต้องนำเทคนิคการตัดภาพมาช่วย + * ภาพจะต้องเก็บไว้ในโฟลเดอร์เดียวกับเอกสาร HTML 
- + * ก่อนนำภาพมาใส่ในเอกสาร จะต้องเซฟเอกสารก่อนเสมอ (Save File) เพื่อให้โปรแกรมรู้จัก Directory Path ที่ถูกต้อง 
-·        ภาพจะต้องเก็บไว้ในโฟลเดอร์เดียวกับเอกสาร HTML + * การนำเข้ารูปภาพมาใช้งานทำได้โดยคลิกปุ่ม Image แล้วเลือกภาพที่ต้องการ
- +
-·        ก่อนนำภาพมาใส่ในเอกสาร จะต้องเซฟเอกสารก่อนเสมอ (Save File) เพื่อให้โปรแกรมรู้จัก Directory Path ที่ถูกต้อง +
- +
-·        การนำเข้ารูปภาพมาใช้งานทำได้โดยคลิกปุ่ม Image แล้วเลือกภาพที่ต้องการ +
- +
-o      คำอธิบายภาพ (Alternate Text) เป็นรายการที่มีความสำคัญมาก เนื่องจาก +
- +
-§        ขณะที่มีการโหลดภาพ และใช้เวลานาน จะแสดงข้อความนี้ก่อน +
- +
-§        กรณีที่การโหลดเว็บ เกิดปัญหา และไม่สามารถแสดงภาพได้ จะแสดงด้วยข้อความแทน +
- +
-§        เป็นข้อมูลให้กับ Search Engine ในการสืบค้นภาพ +
- +
-§        ช่วยให้ผู้ที่มีความบกพร่องทางสายตา ทราบว่าภาพที่ปรากฏเป็นภาพอะไร เนื่องจากโปรแกรมอ่านข้อความเป็นเสียง (Screen Reader) จะอ่านรายละเอียดจาก Alt เป็นข้อความออกทางลำโพง +
- +
-§        เป็นคำอธิบายเพิ่มเติม เช่น มีปุ่มแสดงด้วยคำว่า Home อาจจะเพิ่มเติมรายละเอียดเป็น “คลิกปุ่มนี้เพื่อย้อนกลับหน้าแรก” เป็นต้น +
- +
-o      กำหนดขนาดของภาพได้จากบัตรรายการ Dimensions +
- +
-o      กำหนดช่องว่างระหว่างภาพกับข้อความ (H Spacing & V Spacing) ความหนากรอบภาพ (Border) และการจัดตำแหน่งกับข้อความ (Align Text to Image) ได้จากบัตรรายการ Appearance +
- +
-§        การนำภาพมาแสดงผลคู่กับเนื้อหาที่เป็นหัวเรื่อง ค่าจากรายการ Align ที่สามารถนำมาใช้งานได้ คือ At the Top, In the Center, At the Bottom+
-§        หากนำภาพมาแสดงผลคู่กับเนื้อหาพารากราฟ ค่าจากรายการ Align ที่สามารถนำมาใช้งานได้ คือ Wrap to the Left, Wrap to the Right+{{  :oss:nvu:image357.png  |}}
-o      ทำจุดลิงก์ให้กับภาพโดยระบุ URL จากบัตรรายการ Link+  * คำอธิบายภาพ (Alternate Text) เป็นรายการที่มีความสำคัญมาก เนื่องจาก 
 +    * ขณะที่มีการโหลดภาพ และใช้เวลานาน จะแสดงข้อความนี้ก่อน 
 +    * กรณีที่การโหลดเว็บ เกิดปัญหา และไม่สามารถแสดงภาพได้ จะแสดงด้วยข้อความแทน 
 +  * เป็นข้อมูลให้กับ Search Engine ในการสืบค้นภาพ 
 +    * ช่วยให้ผู้ที่มีความบกพร่องทางสายตา ทราบว่าภาพที่ปรากฏเป็นภาพอะไร เนื่องจากโปรแกรมอ่านข้อความเป็นเสียง (Screen Reader) จะอ่านรายละเอียดจาก Alt เป็นข้อความออกทางลำโพง 
 +    * เป็นคำอธิบายเพิ่มเติม เช่น มีปุ่มแสดงด้วยคำว่า Home อาจจะเพิ่มเติมรายละเอียดเป็น “คลิกปุ่มนี้เพื่อย้อนกลับหน้าแรก” เป็นต้น 
 +  * กำหนดขนาดของภาพได้จากบัตรรายการ Dimensions 
 +  * กำหนดช่องว่างระหว่างภาพกับข้อความ (H Spacing & V Spacing) ความหนากรอบภาพ (Border) และการจัดตำแหน่งกับข้อความ (Align Text to Image) ได้จากบัตรรายการ Appearance 
 +    * การนำภาพมาแสดงผลคู่กับเนื้อหาที่เป็นหัวเรื่อง ค่าจากรายการ Align ที่สามารถนำมาใช้งานได้ คือ At the Top, In the Center, At the Bottom 
 +    * หากนำภาพมาแสดงผลคู่กับเนื้อหาพารากราฟ ค่าจากรายการ Align ที่สามารถนำมาใช้งานได้ คือ Wrap to the Left, Wrap to the Right 
 +  * ทำจุดลิงก์ให้กับภาพโดยระบุ URL จากบัตรรายการ Link
---- ----

Personal Tools
Creative Commons License
STKS Online Learning โดย http://stks.or.th/wiki อนุญาตให้ใช้ได้ตาม สัญญาอนุญาตของครีเอทีฟคอมมอนส์แบบ แสดงที่มา-ไม่ใช้เพื่อการค้า-อนุญาตแบบเดียวกัน 3.0 ประเทศไทย.