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
---- ----

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