Trace:
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:10 | oss:nvu:web-create 2008/12/11 15:12 current | ||
|---|---|---|---|
| Line 90: | Line 90: | ||
| ===== การนำเข้ารูปภาพ ===== | ===== การนำเข้ารูปภาพ ===== | ||
| - | |||
| เอกสารเว็บจะน่าสนใจหรือไม่ นอกจากเนื้อหาที่นำเสนอ ภาพกราฟิกที่นำมาใช้ ก็เป็นส่วนประกอบส่วนหนึ่งเช่นกัน หลักการนำภาพมาใช้ในการสร้างเอกสารเว็บ มีข้อที่ควรทราบ ดังนี้ | เอกสารเว็บจะน่าสนใจหรือไม่ นอกจากเนื้อหาที่นำเสนอ ภาพกราฟิกที่นำมาใช้ ก็เป็นส่วนประกอบส่วนหนึ่งเช่นกัน หลักการนำภาพมาใช้ในการสร้างเอกสารเว็บ มีข้อที่ควรทราบ ดังนี้ | ||
| - | · ภาพที่นำมาใช้ไม่ควรมีขนาดโตเกินไป | + | * ภาพที่นำมาใช้ไม่ควรมีขนาดโตเกินไป |
| - | + | * หากจำเป็นต้องใช้ภาพใหญ่ จะต้องนำเทคนิคการตัดภาพมาช่วย | |
| - | · หากจำเป็นต้องใช้ภาพใหญ่ จะต้องนำเทคนิคการตัดภาพมาช่วย | + | * ภาพจะต้องเก็บไว้ในโฟลเดอร์เดียวกับเอกสาร 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 | ||
| ---- | ---- | ||
