> OSS & Freeware > NVU

สร้างเอกสารเว็บ

เมื่อปรับแต่งระบบเกี่ยวกับภาษาไทยแล้ว ก็จะเข้าสู่ขั้นตอนการสร้างเอกสารเว็บ โดยขอแบ่งเป็นรายละเอียดย่อยดังนี้

กำหนดคุณสมบัติของเอกสารเว็บ

คุณสมบัติของเอกสารเว็บเป็นส่วนสำคัญที่จะส่งค่าให้กับ Search Engine ต่างๆ เช่น Google, Yahoo เพื่อเป็นข้อมูลการสืบค้น (Web Metadata) โดยคุณสมบัติเว็บที่จะต้องกำหนดได้แก่ ชื่อเรื่องของเอกสารเว็บ (Title) ผู้พัฒนาเว็บ (Author) และคำอธิบายเว็บ (Description) สามารถกำหนดได้ด้วยคำสั่ง Format, Page Title and Properties…

ป้อนข้อมูลส่วน Title โดยควรกำหนดเป็นภาษาอังกฤษที่มีลักษณะเป็นคำสำคัญ (Keyword) เพื่อเป็นข้อมูลส่งให้กับ Search Engine เพื่อสามารถสืบค้นได้ภายหลัง จากนั้นกำหนดข้อมูลประกอบ ได้แก่ ผู้พัฒนาเว็บ (Author) และคำอธิบายเว็บ (Description) แล้วเลือกระบบภาษาของเอกสารเว็บจากรายการ Language

บันทึกเอกสารเว็บ

เมื่อกำหนดคุณสมบัติของเอกสารเว็บ และค่าควบคุมการแสดงผลเว็บภาษาไทยแล้ว ควรบันทึกเอกสารเว็บก่อนสร้างงานใดๆ โดยเลือกคำสั่ง File, Save… หรือ File, Save As… ทั้งนี้จะต้องบันทึกไว้ในโฟลเดอร์ที่กำหนดไว้เสมอ

ข้อควรระวังในการตั้งชื่อไฟล์เอกสารเว็บคือ ชื่อไฟล์เอกสารเว็บจะต้องเป็นภาษาอังกฤษ หรือภาษาอังกฤษผสมตัวเลข ควรใช้ตัวพิมพ์เล็ก ไม่มีช่องว่าง หรือสัญลักษณ์ใดๆ ยกเว้นเครื่องหมายขีดกลาง ส่วนขยายของไฟล์เอกสารเว็บ ควรกำหนดเป็น .html

กำหนดสีของเอกสารเว็บ

เอกสารเว็บควรมีลักษณะโดดเด่น น่าสนใจ โดยมากมักจะใช้สีหรือรูปภาพมาเป็นส่วนควบคุม โดยการเลือกสีที่เหมาะสม หรือรูปภาพที่เหมาะสมมากำหนดเป็นพื้นเว็บ (Background) นอกจากนี้จะต้องกำหนดสีของตัวอักษร จุดเชื่อมโยง (Link) ให้เหมะสมกับลักษณะพื้นเว็บด้วย โดยเลือกจากคำสั่ง Format, Page Colors and Background…

เลือกรายการ Use custom colors โดย Normal Text จะเป็นสีของตัวอักษรในสภาวะปกติ Link Text เป็นสีของจุดเชื่อม Active link text เป็นสีของจุดเชื่อมที่กำลังทำงาน Visited link text สีของจุดเชื่อมที่เรียกดูผ่านแล้ว

นอกจากนี้สามารถคลิกปุ่ม Choose File… เพื่อเลือกรูปภาพมาเป็นพื้นเว็บแบบรูปภาพ (รูปภาพจะต้องคัดลอกมาไว้ในโฟลเดอร์ก่อน) และควรเป็นรูปภาพที่ออกแบบมาแสดงผลเป็นพื้นเว็บด้วย มิฉะนั้นจะทำให้เอกสารเว็บไม่น่าสนใจได้
ป้อนข้อมูล/ปรับแต่ง

ขั้นตอนสร้างสรรค์งานโดยนำข้อความ ภาพนิ่ง ภาพเคลื่อนไหว สื่อมัลติมีเดียเช่น Flash, Video มาประกอบเพื่อนำเสนอเนื้อหาที่ต้องการ ซึ่งมีหลักการสร้างสรรค์ดังนี้

การพิมพ์งาน

ใช้ปุ่ม Style Format ควบคุมการพิมพ์

ถ้าต้องการพิมพ์ขึ้นพารากราฟใหม่ให้คลิกเลือก Paragraph การพิมพ์หัวเรื่องให้เลือกเป็น Heading 1 - 6 เป็นต้น ให้ใส่ช่องว่างระหว่างคำเป็นช่วงๆ ตามความเหมาะสม เพื่อช่วยในการตัดคำ เนื่องจากโปรแกรมไม่มีความสามารถด้านการตัดคำอัตโนมัติ

การตัดคำก่อนจบบรรทัดให้กดปุ่ม Enter

ขณะนี้ทำงานใดๆ สามารถยกเลิกได้โดยเลือกคำสั่ง Edit, Undo

การปรับแต่งลักษณะตัวอักษร จัดพารากราฟ ให้ใช้การทำแถบสีคลุมข้อความที่ต้องการ แล้วเลือกลักษณะอักษรที่ต้องการ จากปุ่มควบคุม หรือเลือกรายการเพิ่มเติมได้จากเมนู Format

สัญลักษณ์พิเศษต่างๆ สามารถพิมพ์ได้ด้วยคำสั่ง Insert, Character and Symbol แล้วคลิกเลือกสัญลักษณ์ที่ต้องการ

เมื่อพิมพ์และจัดแต่งข้อความเรียบร้อยแล้ว จึงจะกำหนดแบบอักษร (Font) โดยฟอนต์ที่แนะนำให้เลือกใช้ได้แก่ MS Sans Serif หรือ Tahoma

รายการ

ลำดับรายการที่เป็นสัญลักษณ์ข้อ (Bullet) ควบคุมด้วยปุ่ม Bullet List

ลำดับรายการที่เป็นเลขข้อ หรืออักษรลำดับข้อ ที่เรียกว่า Ordered List ควบคุมด้วยปุ่ม Numbered List

การพิมพ์รายการลักษณะนี้ เริ่มด้วยการคลิกที่ปุ่มเครื่องมือ จากนั้นพิมพ์เนื้อหา เมื่อต้องการขึ้นหัวข้อใหม่ หรือรายการใหม่ ก็ใช้การกดปุ่ม Enter หากต้องการสิ้นสุดการพิมพ์ให้กดปุ่ม E ผ่านไป 1 รายการ แล้วคลิกปุ่มเครื่องมือซ้ำเพื่อจบการทำงาน

รายการที่กำหนด สามารถควบคุมระดับความสำคัญ หรือ Level ของรายการได้ โดยใช้ปุ่ม Text Outdent / Text Indent ปกติจะมีค่าระดับความสำคัญอยู่ 3 ระดับ

โดยปกติเมื่อกำหนดเนื้อหาแบบรายการรูปแบบ Unordered โปรแกรมจะให้ค่าเริ่มต้นสัญลักษณ์เป็นจุดกลมสีดำทึบสำหรับ Level ที่ 1, จุดกลมโปร่งสำหรับ Level ที่ 2 และสี่เหลี่ยมทึบสำหรับ Level ที่ 3 แต่ผู้พัฒนาสามารถควบคุมปรับเปลี่ยนได้ เช่นเดียวกับเนื้อหารายการแบบ ordered สามารถกำหนดให้แสดงได้ทั้งแบบเลขข้อ หรือตัวอักษร A – Z หรือเลขโรมัน เป็นต้น โดยคลิกปุ่มขวาของเมาส์ที่รายการ แล้วเลือกคำสั่ง List Properties…

ปรับเปลี่ยนค่าเริ่มต้นกรณีเลือก Numbered List โดยกำหนดจากรายการ Start at โดยใส่เป็นค่าตัวเลข เช่น หากต้องการใช้สัญลักษณ์เป็น A – Z แต่ต้องการให้ลำดับเริ่มต้นที่ตัวอักษร H ก็ให้ระบุค่าตัวเลขเป็น 8 (เนื่องจากตัวอักษร H อยู่ลำดับที่ 8 ของอักษรภาษาอังกฤษนั่นเอง)

เส้นกราฟิก (Horizontal Rule)

เส้นกราฟิก หรือ Horizontal Rule เป็นลักษณะของข้อมูลชนิดหนึ่งในเอกสารเว็บที่มักจะนำมาใช้แบ่งคั่นเนื้อหา โดยการคลิกเมาส์ ณ ตำแหน่งที่ต้องการแล้วเลือกคำสั่ง Insert, Horizontal Line การปรับแต่งแก้ไขให้ดับเบิลคลิกที่เส้นกราฟิก

จุดเชื่อม (Link)

  • ลิงก์ หรือจุดเชื่อมเอกสาร นับว่าเป็นหัวใจหลักของเอกสารเว็บ การทำลิงก์สามารถทำได้ทั้งข้อความ และรูปภาพ
  • ลิงก์เชื่อมไฟล์ สามารถทำได้กับไฟล์เอกสารหลายฟอร์แมต โดยไฟล์ฟอร์แมตอื่นๆ จะทำงานในลักษณะดาวน์โหลด เช่น การดาวน์โหลดโปรแกรมต่างๆ จากหน้าเว็บ
    • ทำแถบสีคลุมข้อความที่ใช้เป็นจุดลิงก์ หรือคลิกเลือกรูปภาพ คลิกปุ่ม Link

  • พิมพ์ชื่อไฟล์ที่ต้องการให้ลิงก์ โดยชื่อไฟล์อาจจะเป็นไฟล์ .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

การนำเข้ารูปภาพ

เอกสารเว็บจะน่าสนใจหรือไม่ นอกจากเนื้อหาที่นำเสนอ ภาพกราฟิกที่นำมาใช้ ก็เป็นส่วนประกอบส่วนหนึ่งเช่นกัน หลักการนำภาพมาใช้ในการสร้างเอกสารเว็บ มีข้อที่ควรทราบ ดังนี้

  • ภาพที่นำมาใช้ไม่ควรมีขนาดโตเกินไป
  • หากจำเป็นต้องใช้ภาพใหญ่ จะต้องนำเทคนิคการตัดภาพมาช่วย
  • ภาพจะต้องเก็บไว้ในโฟลเดอร์เดียวกับเอกสาร HTML
  • ก่อนนำภาพมาใส่ในเอกสาร จะต้องเซฟเอกสารก่อนเสมอ (Save File) เพื่อให้โปรแกรมรู้จัก Directory Path ที่ถูกต้อง
  • การนำเข้ารูปภาพมาใช้งานทำได้โดยคลิกปุ่ม Image แล้วเลือกภาพที่ต้องการ

  • คำอธิบายภาพ (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 ประเทศไทย.