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 14:52 | oss:nvu:web-create 2008/12/11 15:12 current | ||
|---|---|---|---|
| Line 13: | Line 13: | ||
| ป้อนข้อมูลส่วน Title โดยควรกำหนดเป็นภาษาอังกฤษที่มีลักษณะเป็นคำสำคัญ (Keyword) เพื่อเป็นข้อมูลส่งให้กับ Search Engine เพื่อสามารถสืบค้นได้ภายหลัง จากนั้นกำหนดข้อมูลประกอบ ได้แก่ ผู้พัฒนาเว็บ (Author) และคำอธิบายเว็บ (Description) แล้วเลือกระบบภาษาของเอกสารเว็บจากรายการ Language | ป้อนข้อมูลส่วน Title โดยควรกำหนดเป็นภาษาอังกฤษที่มีลักษณะเป็นคำสำคัญ (Keyword) เพื่อเป็นข้อมูลส่งให้กับ Search Engine เพื่อสามารถสืบค้นได้ภายหลัง จากนั้นกำหนดข้อมูลประกอบ ได้แก่ ผู้พัฒนาเว็บ (Author) และคำอธิบายเว็บ (Description) แล้วเลือกระบบภาษาของเอกสารเว็บจากรายการ Language | ||
| - | รูปแสดง Title ของเว็บไซต์เนคเทค เมื่อแสดงผ่านเว็บเบราว์เซอร์ | + | ===== บันทึกเอกสารเว็บ ===== |
| - | บันทึกเอกสารเว็บ | + | |
| เมื่อกำหนดคุณสมบัติของเอกสารเว็บ และค่าควบคุมการแสดงผลเว็บภาษาไทยแล้ว ควรบันทึกเอกสารเว็บก่อนสร้างงานใดๆ โดยเลือกคำสั่ง File, Save… หรือ File, Save As… ทั้งนี้จะต้องบันทึกไว้ในโฟลเดอร์ที่กำหนดไว้เสมอ | เมื่อกำหนดคุณสมบัติของเอกสารเว็บ และค่าควบคุมการแสดงผลเว็บภาษาไทยแล้ว ควรบันทึกเอกสารเว็บก่อนสร้างงานใดๆ โดยเลือกคำสั่ง File, Save… หรือ File, Save As… ทั้งนี้จะต้องบันทึกไว้ในโฟลเดอร์ที่กำหนดไว้เสมอ | ||
| ข้อควรระวังในการตั้งชื่อไฟล์เอกสารเว็บคือ ชื่อไฟล์เอกสารเว็บจะต้องเป็นภาษาอังกฤษ หรือภาษาอังกฤษผสมตัวเลข ควรใช้ตัวพิมพ์เล็ก ไม่มีช่องว่าง หรือสัญลักษณ์ใดๆ ยกเว้นเครื่องหมายขีดกลาง ส่วนขยายของไฟล์เอกสารเว็บ ควรกำหนดเป็น .html | ข้อควรระวังในการตั้งชื่อไฟล์เอกสารเว็บคือ ชื่อไฟล์เอกสารเว็บจะต้องเป็นภาษาอังกฤษ หรือภาษาอังกฤษผสมตัวเลข ควรใช้ตัวพิมพ์เล็ก ไม่มีช่องว่าง หรือสัญลักษณ์ใดๆ ยกเว้นเครื่องหมายขีดกลาง ส่วนขยายของไฟล์เอกสารเว็บ ควรกำหนดเป็น .html | ||
| - | กำหนดสีของเอกสารเว็บ | + | |
| + | ===== กำหนดสีของเอกสารเว็บ ===== | ||
| เอกสารเว็บควรมีลักษณะโดดเด่น น่าสนใจ โดยมากมักจะใช้สีหรือรูปภาพมาเป็นส่วนควบคุม โดยการเลือกสีที่เหมาะสม หรือรูปภาพที่เหมาะสมมากำหนดเป็นพื้นเว็บ (Background) นอกจากนี้จะต้องกำหนดสีของตัวอักษร จุดเชื่อมโยง (Link) ให้เหมะสมกับลักษณะพื้นเว็บด้วย โดยเลือกจากคำสั่ง Format, Page Colors and Background… | เอกสารเว็บควรมีลักษณะโดดเด่น น่าสนใจ โดยมากมักจะใช้สีหรือรูปภาพมาเป็นส่วนควบคุม โดยการเลือกสีที่เหมาะสม หรือรูปภาพที่เหมาะสมมากำหนดเป็นพื้นเว็บ (Background) นอกจากนี้จะต้องกำหนดสีของตัวอักษร จุดเชื่อมโยง (Link) ให้เหมะสมกับลักษณะพื้นเว็บด้วย โดยเลือกจากคำสั่ง Format, Page Colors and Background… | ||
| + | |||
| + | {{:oss:nvu:image338.png|}} | ||
| เลือกรายการ Use custom colors โดย Normal Text จะเป็นสีของตัวอักษรในสภาวะปกติ Link Text เป็นสีของจุดเชื่อม Active link text เป็นสีของจุดเชื่อมที่กำลังทำงาน Visited link text สีของจุดเชื่อมที่เรียกดูผ่านแล้ว | เลือกรายการ Use custom colors โดย Normal Text จะเป็นสีของตัวอักษรในสภาวะปกติ Link Text เป็นสีของจุดเชื่อม Active link text เป็นสีของจุดเชื่อมที่กำลังทำงาน Visited link text สีของจุดเชื่อมที่เรียกดูผ่านแล้ว | ||
| Line 30: | Line 32: | ||
| ขั้นตอนสร้างสรรค์งานโดยนำข้อความ ภาพนิ่ง ภาพเคลื่อนไหว สื่อมัลติมีเดียเช่น Flash, Video มาประกอบเพื่อนำเสนอเนื้อหาที่ต้องการ ซึ่งมีหลักการสร้างสรรค์ดังนี้ | ขั้นตอนสร้างสรรค์งานโดยนำข้อความ ภาพนิ่ง ภาพเคลื่อนไหว สื่อมัลติมีเดียเช่น Flash, Video มาประกอบเพื่อนำเสนอเนื้อหาที่ต้องการ ซึ่งมีหลักการสร้างสรรค์ดังนี้ | ||
| - | การพิมพ์งาน | + | ===== การพิมพ์งาน ===== |
| - | · ใช้ปุ่ม Style Format ควบคุมการพิมพ์ | + | ใช้ปุ่ม Style Format ควบคุมการพิมพ์ |
| - | ถ้าต้องการพิมพ์ขึ้นพารากราฟใหม่ให้คลิกเลือก Paragraph | + | {{:oss:nvu:image341.gif|}} |
| - | การพิมพ์หัวเรื่องให้เลือกเป็น Heading 1 - 6 เป็นต้น | + | |
| + | ถ้าต้องการพิมพ์ขึ้นพารากราฟใหม่ให้คลิกเลือก Paragraph การพิมพ์หัวเรื่องให้เลือกเป็น Heading 1 - 6 เป็นต้น | ||
| + | ให้ใส่ช่องว่างระหว่างคำเป็นช่วงๆ ตามความเหมาะสม เพื่อช่วยในการตัดคำ เนื่องจากโปรแกรมไม่มีความสามารถด้านการตัดคำอัตโนมัติ | ||
| - | · ให้ใส่ช่องว่างระหว่างคำเป็นช่วงๆ ตามความเหมาะสม เพื่อช่วยในการตัดคำ เนื่องจากโปรแกรมไม่มีความสามารถด้านการตัดคำอัตโนมัติ | + | การตัดคำก่อนจบบรรทัดให้กดปุ่ม Enter |
| - | · การตัดคำก่อนจบบรรทัดให้กดปุ่ม E | + | ขณะนี้ทำงานใดๆ สามารถยกเลิกได้โดยเลือกคำสั่ง Edit, Undo |
| - | · ขณะนี้ทำงานใดๆ สามารถยกเลิกได้โดยเลือกคำสั่ง Edit, Undo | + | การปรับแต่งลักษณะตัวอักษร จัดพารากราฟ ให้ใช้การทำแถบสีคลุมข้อความที่ต้องการ แล้วเลือกลักษณะอักษรที่ต้องการ จากปุ่มควบคุม {{:oss:nvu:image342.gif|}} หรือเลือกรายการเพิ่มเติมได้จากเมนู Format |
| - | · การปรับแต่งลักษณะตัวอักษร จัดพารากราฟ ให้ใช้การทำแถบสีคลุมข้อความที่ต้องการ แล้วเลือกลักษณะอักษรที่ต้องการ จากปุ่มควบคุม | + | สัญลักษณ์พิเศษต่างๆ สามารถพิมพ์ได้ด้วยคำสั่ง Insert, Character and Symbol แล้วคลิกเลือกสัญลักษณ์ที่ต้องการ |
| - | หรือเลือกรายการเพิ่มเติมได้จากเมนู Format | + | {{:oss:nvu:image343.png|}} |
| - | · สัญลักษณ์พิเศษต่างๆ สามารถพิมพ์ได้ด้วยคำสั่ง Insert, Character and Symbol แล้วคลิกเลือกสัญลักษณ์ที่ต้องการ | + | เมื่อพิมพ์และจัดแต่งข้อความเรียบร้อยแล้ว จึงจะกำหนดแบบอักษร (Font) โดยฟอนต์ที่แนะนำให้เลือกใช้ได้แก่ MS Sans Serif หรือ Tahoma |
| - | · เมื่อพิมพ์และจัดแต่งข้อความเรียบร้อยแล้ว จึงจะกำหนดแบบอักษร (Font) โดยฟอนต์ที่แนะนำให้เลือกใช้ได้แก่ MS Sans Serif หรือ Tahoma | + | ===== รายการ ===== |
| - | รายการ | + | ลำดับรายการที่เป็นสัญลักษณ์ข้อ (Bullet) ควบคุมด้วยปุ่ม Bullet List {{:oss:nvu:image345.png|}} |
| - | · ลำดับรายการที่เป็นสัญลักษณ์ข้อ (Bullet) ควบคุมด้วยปุ่ม Bullet List | + | ลำดับรายการที่เป็นเลขข้อ หรืออักษรลำดับข้อ ที่เรียกว่า Ordered List ควบคุมด้วยปุ่ม Numbered List {{:oss:nvu:image347.png|}} |
| - | · ลำดับรายการที่เป็นเลขข้อ หรืออักษรลำดับข้อ ที่เรียกว่า Ordered List ควบคุมด้วยปุ่ม Numbered List | + | การพิมพ์รายการลักษณะนี้ เริ่มด้วยการคลิกที่ปุ่มเครื่องมือ จากนั้นพิมพ์เนื้อหา เมื่อต้องการขึ้นหัวข้อใหม่ หรือรายการใหม่ ก็ใช้การกดปุ่ม Enter หากต้องการสิ้นสุดการพิมพ์ให้กดปุ่ม E ผ่านไป 1 รายการ แล้วคลิกปุ่มเครื่องมือซ้ำเพื่อจบการทำงาน |
| - | o การพิมพ์รายการลักษณะนี้ เริ่มด้วยการคลิกที่ปุ่มเครื่องมือ จากนั้นพิมพ์เนื้อหา เมื่อต้องการขึ้นหัวข้อใหม่ หรือรายการใหม่ ก็ใช้การกดปุ่ม E หากต้องการสิ้นสุดการพิมพ์ให้กดปุ่ม E ผ่านไป 1 รายการ แล้วคลิกปุ่มเครื่องมือซ้ำเพื่อจบการทำงาน | + | รายการที่กำหนด สามารถควบคุมระดับความสำคัญ หรือ Level ของรายการได้ โดยใช้ปุ่ม Text Outdent / Text Indent {{:oss:nvu:image349.png|}} ปกติจะมีค่าระดับความสำคัญอยู่ 3 ระดับ |
| - | o รายการที่กำหนด สามารถควบคุมระดับความสำคัญ หรือ Level ของรายการได้ โดยใช้ปุ่ม Text Outdent / Text Indent ปกติจะมีค่าระดับความสำคัญอยู่ 3 ระดับ | + | โดยปกติเมื่อกำหนดเนื้อหาแบบรายการรูปแบบ Unordered โปรแกรมจะให้ค่าเริ่มต้นสัญลักษณ์เป็นจุดกลมสีดำทึบสำหรับ Level ที่ 1, จุดกลมโปร่งสำหรับ Level ที่ 2 และสี่เหลี่ยมทึบสำหรับ Level ที่ 3 แต่ผู้พัฒนาสามารถควบคุมปรับเปลี่ยนได้ เช่นเดียวกับเนื้อหารายการแบบ ordered สามารถกำหนดให้แสดงได้ทั้งแบบเลขข้อ หรือตัวอักษร A – Z หรือเลขโรมัน เป็นต้น โดยคลิกปุ่มขวาของเมาส์ที่รายการ แล้วเลือกคำสั่ง List Properties… |
| - | o โดยปกติเมื่อกำหนดเนื้อหาแบบรายการรูปแบบ Unordered โปรแกรมจะให้ค่าเริ่มต้นสัญลักษณ์เป็นจุดกลมสีดำทึบสำหรับ Level ที่ 1, จุดกลมโปร่งสำหรับ Level ที่ 2 และสี่เหลี่ยมทึบสำหรับ Level ที่ 3 แต่ผู้พัฒนาสามารถควบคุมปรับเปลี่ยนได้ เช่นเดียวกับเนื้อหารายการแบบ ordered สามารถกำหนดให้แสดงได้ทั้งแบบเลขข้อ หรือตัวอักษร A – Z หรือเลขโรมัน เป็นต้น โดยคลิกปุ่มขวาของเมาส์ที่รายการ แล้วเลือกคำสั่ง List Properties… | + | {{:oss:nvu:image351.png|}} |
| - | o ปรับเปลี่ยนค่าเริ่มต้นกรณีเลือก Numbered List โดยกำหนดจากรายการ Start at โดยใส่เป็นค่าตัวเลข เช่น หากต้องการใช้สัญลักษณ์เป็น A – Z แต่ต้องการให้ลำดับเริ่มต้นที่ตัวอักษร H ก็ให้ระบุค่าตัวเลขเป็น 8 (เนื่องจากตัวอักษร H อยู่ลำดับที่ 8 ของอักษรภาษาอังกฤษนั่นเอง) | + | ปรับเปลี่ยนค่าเริ่มต้นกรณีเลือก Numbered List โดยกำหนดจากรายการ Start at โดยใส่เป็นค่าตัวเลข เช่น หากต้องการใช้สัญลักษณ์เป็น A – Z แต่ต้องการให้ลำดับเริ่มต้นที่ตัวอักษร H ก็ให้ระบุค่าตัวเลขเป็น 8 (เนื่องจากตัวอักษร H อยู่ลำดับที่ 8 ของอักษรภาษาอังกฤษนั่นเอง) |
| - | เส้นกราฟิก (Horizontal Rule) | + | ===== เส้นกราฟิก (Horizontal Rule) ===== |
| - | · เส้นกราฟิก หรือ Horizontal Rule เป็นลักษณะของข้อมูลชนิดหนึ่งในเอกสารเว็บที่มักจะนำมาใช้แบ่งคั่นเนื้อหา โดยการคลิกเมาส์ ณ ตำแหน่งที่ต้องการแล้วเลือกคำสั่ง Insert, Horizontal Line | + | เส้นกราฟิก หรือ Horizontal Rule เป็นลักษณะของข้อมูลชนิดหนึ่งในเอกสารเว็บที่มักจะนำมาใช้แบ่งคั่นเนื้อหา โดยการคลิกเมาส์ ณ ตำแหน่งที่ต้องการแล้วเลือกคำสั่ง Insert, Horizontal Line การปรับแต่งแก้ไขให้ดับเบิลคลิกที่เส้นกราฟิก |
| + | {{:oss:nvu:image353.png|}} | ||
| - | · การปรับแต่งแก้ไขให้ดับเบิลคลิกที่เส้นกราฟิก | + | ===== จุดเชื่อม (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 | ||
| ---- | ---- | ||
