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:56 | oss:nvu:web-create 2008/12/11 15:12 current | ||
|---|---|---|---|
| Line 38: | Line 38: | ||
| {{:oss:nvu:image341.gif|}} | {{:oss:nvu:image341.gif|}} | ||
| - | ถ้าต้องการพิมพ์ขึ้นพารากราฟใหม่ให้คลิกเลือก Paragraph | + | ถ้าต้องการพิมพ์ขึ้นพารากราฟใหม่ให้คลิกเลือก Paragraph การพิมพ์หัวเรื่องให้เลือกเป็น Heading 1 - 6 เป็นต้น |
| - | การพิมพ์หัวเรื่องให้เลือกเป็น 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 | ||
| ---- | ---- | ||
