1. ตัว อัก ษรและชุด ตัว อัก ษร
Character and Fonts
1

2. เรื่อ งทั่ว ไปเกี่ย วกับ ตัว อัก ษรและชุด ตัว อัก ษร
ในอดีตมนุษย์ได้มีการใช้ข้อความหรือตัวอักษรเป็น
ภาษาสื่อกลางติดต่อระหว่างกัน โดยผ่านทางการอ่าน
หรือบันทึกเรื่องราวต่างๆ
ต่อมาได้มีการนำาตัวอักษรมาประยุกต์ใช้ร่วมกับ
คอมพิวเตอร์ด้วยกระบวนการเรียบเรียง ประมวลผล จัด
เก็บและนำามาใช้งาน ซึ่งได้กอให้เกิดประโยชน์ในทุก
่
แวดวงธุรกิจ หรือแม้แต่การสื่อสารด้วยข้อความที่เป็น
เท็กซ์ (Text Messaging)
2

3. 3
ข้อความที่นำามาประยุกต์ใช้ในรูปแบบสือสิ่งพิมพ์
่

4. ข้อความที่นำามาประยุกต์ใช้ในรูปแบบข้อความสำาหรับติดต่อสื่อสาร
4

5. เรื่อ งทั่ว ไปเกี่ย วกับ ตัว อัก ษรและชุด ตัว อัก ษร
จนกระทั่ง ได้มีการเริ่มนำาตัวอักษรมาใช้
และเผยแพร่ผ่านช่องทางการสือสารบน
่
ระบบเครือข่ายอินเทอร์เน็ตในรูปแบบ
ภาษา Html (Hypertext Markup Language)
ซึ่งปัจจุบนกำาลังได้รับความนิยมใช้งาน
ั
กันอย่างแพร่หลาย
5

6. ภาพแสดงโครงสร้างภายในและรูปแบบทางกายภาพของ
เอกสาร HTML
6

7. 7
ภาพแสดงกลไกการทำางานของภาษา HTML ทีเป็นรูป
่
แบบมาตรฐาน

8. ข้อความภาษาเอชทีเอ็มแอลในโปรแกรมโน้ตแพด
8

9. มาตรฐาน (Standard) ของตัว อัก ษร
มาตรฐานตัวอักษรแบ่งออกเป็น 2 ชนิด
คือ
แอสกี (Ascii)
ยูนโค้ด (Unicode)
ิ
9

10. แอสกี (ASCII)
 แอสกี ASCII ย่อมาจาก American Standard Code For Information Interchange
ได้มีการพัฒนาในช่วงปี ค.ศ. 1970 ซึ่งแอสกีเป็นรหัสขนาด 7 บิต รองรับ
ตัวอักษร (A-Z ทั้งตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) ตัวเลข (0-9) และ
สัญลักษณ์พิเศษต่างๆ ได้ 128 รหัส (Code Point)
 ต่อมาได้รับการพัฒนามาเป็นมาตรฐาน ISO 646 ในปี ค.ศ. 1972 สำาหรับ
ใช้งานทุกพื้นที่ในประเทศสหรัฐอเมริกา แต่มาตรฐานที่พัฒนาขึ้นมานั้น
ยังไม่สามารถแก้ไขปัญหาทางด้านภาษาที่เกิดขึ้นได้อย่างจริงจัง
 ในการเก็บข้อมูล 1 ไบต์ จะมีการใช้งานขนาด 8 บิต แต่รหัสแอสกีจะใช้
งานเพียง 7 บิต โดยที่อีกหนึ่งบิตที่เหลือจะใช้สำาหรับแสดงสถานะความ
ผิดพลาดของการส่งผ่านข้อมูล เรียกว่า แพริตีบิต (Parity Bit) ทำาให้
สามารถทำางานได้ 256 รหัส ซึ่งต่อมาได้มีการพัฒนาการใช้งานรหัสแบบ
8 บิตนี้ โดยแบ่งเป็น 2 กลุ่ม กลุ่มแรก (0-127) ยังคงเป็นรหัสแอสกีแบบเดิม
กลุ่มที่สอง (128-255) เป็นรหัสของสัญลักษณ์พิเศษต่างๆ และสัญลักษณ์
ทางคณิตศาสตร์
10

11. แอสกี (ASCII) (ต่อ )
 มาตรฐานรหัส 8 บิต ในช่วงปี ค.ศ. 1980 จะมีการใช้มาตรฐาน ISO 8859
โดยแยกตามกลุ่มของภาษาในกลุ่มแรกจะเป็นมาตรฐาน ISO 8859-1
เป็นการอ้างถึงภาษาในกลุ่ม ISO Latin1 และครอบคลุมรวมไปถึงภาษา
ของประเทศทางตะวันตกของยุโรป (Western European) ส่วนมาตรฐาน
ISO 8859 สำาหรับภาษาของประเทศทางตะวันออกของยุโรป เช่น Czech, Sl
ovak และ Croatian จะใช้มาตรบาน ISO 8859-2 หรือ Latin2 โดยแต่ละ
ประเทศจะมีมาตรฐานของภาษาที่แตกต่างกัน เช่น Cyrillic จะใช้
มาตรฐาน ISO 8856-5 Greek จะใช้มาตรฐาน ISO 8859-7 และ Hebrew จะ
ใช้มาตรฐาน ISO 8859-8 เป็นต้น
 จากข้อบกพร่องของมาตรฐาน ISO 8859 ที่ถูกแบ่งออกเป็นหลายประเภท
ดังกล่าวข้างต้นและมาตรฐานนี้ไม่สนับสนุนระบบปฏิบัติการและ
ซอฟต์แวร์ต่างๆ อย่างครอบคลุม เป็นผลให้มาตรฐาน ISO 8859 ไม่
สามารถใช้งานได้อย่างทั่วถึงและไม่เพียงพอที่จะรองรับกับรหัสของทุก
ชาติทุกภาษาได้ ดังนั้นเพื่อแก้ไขปัญหาจึงได้มีการพัฒนาพื้นที่ในการ
เก็บตัวอักษรเป็น 16 บิต (65536 รหัส) โดยมีการจัดกลุ่มของรหัสแบบ 8 บิต
ออกเป็น 256 กลุ่ม ในทำานองเดียวกันเมื่อจัดกลุ่มของรหัสแบบ 16 บิตออก
เป็น 256 กลุ่ม จะได้รหัสแบบ 24 บิต จากนั้น จัดกลุมรหัสแบบ 24 บิต เพิ่ม
่
อีก 256 กลุ่ม ก็จะพัฒนาไปสู่ ISO 10646 หรือ รหัสแบบ 32 บิต
11

12. 12
ตัวอย่างตารางรหัสแอสกี (ASCII)

13. ยูน ิโ ค้ด ( Unicode)
เป็นรหัสขนาด 16 บิต จึงสามารถรองรับ
ตัวอักษรได้มากถึง 65,536 (รหัส) ในรูป
แบบของ “Code Point”
13

14. แสดงยูนโค้ด (Unicode) ของตัวอักษรภาษาไทย
ิ
14

15. แสดงยูนโค้ด (Unicode) ของตัวอักษรภาษาไทย
ิ
15

16. ยูน ิโ ค้ด ( Unicode) (ต่อ )
ปัจจุบนในหลายๆ ประเทศได้มีการนำา
ั
เอายูนิโค้ดมาใช้ประโยชน์ร่วมกัน โดย
การสร้างมาตรฐานของตนเองขึ้นมา
ตัวอย่างเช่น มาตรฐาน “ซีเจเค (CJK)”
ซึ่งเกิดขึ้นจากการรวมตัวของ 3ประเทศ
ได้แก่ จีน (Chinese) ญี่ปน (Japan) และ
ุ่
เกาหลี (Korean)
16

17. 17
ตัวอย่างรหัสยูนิโคดของซีเจเค

18. ยูน ิโ ค้ด ( Unicode) (ต่อ )
 ในการนำารหัส ISO 10646 มาใช้งานให้สามารถส่งข้อมูลผ่าน
ระบบเครือข่าย (ในระบบเครือข่ายส่งข้อมูลได้ครั้งละ 8 บิต)
จะต้องทำาการเข้ารหัส (Encoding) ตัวอักษรซึ่งการเข้ารหัส
แบบนี้ จะรู้จักกันในชื่อ “ยูซีเอส (UCS)” แบ่งออกเป็น UCS-2
และ UCS-4 จากนั้นรหัสยูนิโค้ดจะนำาไปใช้ในการแปลงเป็น
รูปแบบของ UCS (UCS Transformation Formats : UTS-8 จะใช้
สำาหรับเข้ารหัส UCS-2 เป็นต้น
 สำาหรับภาษาที่ยูนิโค้ดสามารถรองรับได้ มีดังนี้ Latin, Greek,
Cyrillic, American, Hebrew, Arabic, Devanagari, Bengali, Gurmu
khi, Gujarati, Oriya, Tamil, Telugu, Kannada, Malayalam, Thai,
Lao, Georgian, Tibetan, Chinese, Japanese และ Korean
18

19. รูป แบบและลัก ษณะของตัว อัก ษร
รูปแบบตัวอักษร (Fonts) สามารถจัดแบ่ง
ประเภทตัวอักษรออกเป็นหมวดหมูได้ 3
่
ระดับ ได้แก่
ประเภท (Category)
ตระกูล (Family)
ชื่อเฉพาะ (Face)
19

20. ประเภท (Category)
 เป็นที่รวมของตระกูล (Family) และชื่อเฉพาะ (Face) ของแต่ละ
ตัวอักษร (Font) สามารถแบ่งออกได้ดังนี้
Serif: เป็นแบบอักษรที่ใช้เป็นมาตรฐาน ในแต่ละตัวอักษร
จะมีเส้นคล้ายๆ ขีดเหลี่ยม
Sans-Serif: เป็นแบบอักษรที่คุ้นเคยมากกว่า Serif เพราะเป็น
ที่นิยมของผู้เขียนเว็บ มีรูปร่างมนกลม และดูสวยงาม
Monospaced: เป็นแบบอักษรที่มีขนาดความกว้างของทุกตัว
อักษรเท่ากันหมด บางทีเรียกว่า Typewriter Font เนื่องจากมี
ลักษณะคล้ายตัวอักษรที่ได้จากเครื่องพิมพ์ดีด
Script: เป็นแหล่งรวมของแบบอักษรทุกชนิด ที่มีลักษณะ
พิเศษต่างๆ เช่น มีจุด มีหาง เป็นต้น และมีลักษณะของตัว
อักษรที่คล้ายกับลายมือ
20

21. ตระกูล (Family)
เป็นหมวดที่ย่อยลงไปจาก
Category แต่ตัวอักษรที่อยู่ Category Family
ในตระกูลเดียวกันจะมี Sarif Times, Century
บรรพบุรุษร่วมกัน Schoolbook, Garamond
Sans-Serif Helvetica, Arial, Verdana
Monospace Courier, Courier New
d
Decorative Whimsy, Arribal, Bergell
•ตารางแสดงความสัมพันธ์ระหว่าง Category และ Family
21

22. ชื่อเฉพาะ (Face)
เป็นตัวอักษรที่
ย่อยลงไปจาก Family Face
Times Regular, Italic
Family Roman
Arial Regular, Bold, Italic
Courier Regular, Oblique
Whimsy Regular, Bold
ตารางแสดงความสัมพันธ์ระหว่าง Family และ Face
22

23. การกำาหนดลักษณะของตัวอักษร
 การจัดวางตำาแหน่ง (Alignment) เป็นการกำาหนดวิธการเรียงของอักษรหรือข้อความใน
ี
แต่ละย่อหน้า ว่าต้องการให้ชดซ้าย ชิดขวา อยูตรงกึ่งกลาง หรือจัดซ้ายขวาเสมอกัน
ิ ่
ภายในทังด้านซ้าย ขวา บน และล่าง (Left, Top, Right And Bottom) สามารถกำาหนดระยะ
้
ขอบ หรือระยะห่างระหว่างกล่องข้อความ (Text Box) กับข้อความภายใน รวมทังระยะเว้น
้
ห่างของข้อความกับกรอบทีล้อมรอบอยูได้
่ ่
 เส้นขอบ (Borders) เป็นการกำาหนดค่าให้กับเส้นขอบว่าต้องการลักษณะของเส้นขอบ สี
ของเส้นขอบ และความหนักเบาของเส้นขอบหรือความหนาของเส้นขอบอย่างไร
 ขนาดของตัวอักษร (Font Size) จะเริ่มกำาหนดตังแต่สวนบนสุดของตัวอักษร (Serif) จนถึง
้ ่
ส่วนล่างของอักษรตัวพิมพ์เล็ก (เช่น ตัว g และ y ของตัวอักษรแบบ Helvetica, Times และ
Courier เป็นต้น) ดังนั้นขนาดของตัวอักษรจึงมิได้หมายความถึงส่วนสูงหรือความกว้าง
ของตัวอักษรเพียงเท่านั้น แต่จะขึนอยู่กับช่วงของตัวอักษรแต่ละแบบด้วย
้
 สี (Colors) เป็นส่วนกำาหนดรายละเอียดเกี่ยวกับสีของตัวอักษร สีพื้นหลังของตัวอักษร
และรวมถึงการเลือกรูปภาพ พืนหลังของตัวอักษร และการจัดเรียงตัวของรูปภาพพื้นหลัง
้
 ตัวอักษรหรือข้อความ เป็นการกำาหนดรูปแบบของตัวอักษรหรือข้อความโดยตรง ซึ่ง
สามารถกำาหนดความหนาของตัวอักษร ลักษณะของตัวอักษร เช่น แบบตัวอักษรธรรมดา
(Normal) แบบตัวหนา (Bold) แบบตัวเอียง (Italic) หรือแบบทีมีการขีดเส้นใต้ (Underline)
่
เป็นต้น เปลี่ยนอักษรตัวเล็กให้เป็นตัวใหญ่ ตังระยะห่างระหว่างอักษรและระยะห่าง
้
ระหว่างบรรทัดได้ รวมทังจัดการเรียงอักษรทังย่อหน้าใช้ชดขอบซ้าย ขอบขวา อยู่
้ ้ ิ
กึ่งกลาง หรือตัดขอบซ้ายขวาทังสองด้านได้
้
23

24. การกำาหนดลักษณะของตัวอักษร (ต่อ)
ตัวอักษรมีให้เลือกใช้มากมายหลายรูปแบบ เช่น รูปแบบ
อักษรที่เหมาะสำาหรับข้อความภาษาไทย / อังกฤษ
ได้แก่ MS Sans Serif, Microsoft Sans Serif, Thonburi เป็นต้น
ส่วนรูปแบบอักษรที่เหมาะสำาหรับข้อความภาษาอังกฤษ
ได้แก่ Arial, Helvetica, Sans-Serif เป็นต้น โดยสามารถ
แสดงรูปแบบของตัวอักษรเป็น AngsanaUPC ที่มีลกษณะ ั
เป็น ตัวอักษรธรรมดา ตัวอักษรหนา ตัวอักษรเอียง ตัว
อักษรธรรมดาขีดเส้นใต้ ตัวอักษรหนาขีดเส้นใต้ ตัว
อักษรเอียงหนา และตัวอักษรเอียงหนาขีดเส้นใต้ และมี
ขนาดของตัวอักษรให้เลือกใช้ตั้งแต่ 8-72 จุดต่อหนึ่งตัว
อักษร (หนึ่งจุดเท่ากับ 0.138 นิ้ว)
24

25. ตัวอักษรธรรมดา ตัว อัก ษรหนา ตัวอักษรเอียง ตัว
อักษรธรรมดาขีดเส้นใต้
แสดงตัวอักษร Cordia New ลักษณะต่างๆ
25

26. ขนาด 66 จุด
ขนาด 12 จุด
ขนาด 72 จ
ขนาด 14 จุด
ขนาด 16 จุด
ขนาด 18 จุด
ขนาด 20 จุด
ขนาด 60 จุด
ขนาด 24 จุด ขนาด 54 จุด
ขนาด 28 จุด ขนาด 48 จุด
ขนาด
ขนาด 32 จุด 44 จุด
ขนาด 40 จุด
ขนาด 36 จุด
26 แสดงตัวอักษรขนาดต่างๆ

27. โครงสร้างของตัวอักษรภาษาอังกฤษ
แสดงโครงสร้างของตัวอักษรภาษาอังกฤษ
 Serif คือ เส้นทีกำาหนดส่วนบนสุดของตัวอักษร
่
 Mean Lineคือ เส้นทีกำาหนดความสูงของอักษรตัวพิมพ์เล็ก
่
 Base Lineคือ เส้นทีกำาหนดขอบล่างของตัวอักษร
่
 Point Sizeคือ ช่วงความสูงทังหมดทีตวอักษรต้องใช้
้ ่ ั
 Cap Heightคือ ความสูงของตัวอักษรตัวพิมพ์ใหญ่
 Shoulderคือ ช่องว่างทีเผื่อไว้สำาหรับเว้นบรรทัด
่
 Set Widthคือ ความกว้างของตัวอักษร
 X - Height คือ ความสูงของตัวอักษรพิมพ์เล็ก
 Ascender คือ ส่วนทีเลยเส้น Mean Line ขึนไปด้านบน ใช้กับอักษรตัวพิมพ์เล็ก
่ ้
27  Descender คือ ส่วนทีเลยเส้น Baseline ลงมาด้านล่าง ใช้กับอักษรตัวพิมพ์เล็กเช่นกัน
่

28. การใช้ง านตัว อัก ษรและรูป แบบตัว อัก ษรในมัล ติม ีเ ดีย
 ในการใช้ตัวอักษรที่มีขนาดเล็กจะต้องชัดเจนและอ่านง่าย
 ข้อความที่ต้องการจะเน้นควรจะมีลักษณะที่แตกต่างจากข้อความ
ธรรมดา เช่น มีการขีดเส้นใต้ ทำาเป็นอักษรตัวเอียง หรือตัวหนา
เป็นต้น
 จัดช่องว่างของบรรทัดให้เหมาะสมและอ่านง่าย
 จัดขนาดของตัวอักษรตามความสำาคัญของข้อความ
 หัวข้อที่ใช้ตัวอักษรขนาดใหญ่ควรมีระยะช่องไฟของตัวอักษรที่
ให้ความรู้สึกที่ดี ไม่ติด หรือห่างกันเกินไป
 จัดสีของข้อความให้อ่านง่าย มีความแตกต่างจากสีของพื้นหลัง
เช่น ตัวอักษรสีดำาบนพืนขาว
้
 ควรใช้วิธีการ Anti-Aliasing กับหัวข้อที่เป็นอักษรกราฟิกขนาด
ใหญ่ (อักษรกราฟิกขนาดใหญ่จะมีรอยหยักบริเวณขอบของตัว
อักษรเกิดขึ้น การปรับรอยหยักดังกล่าวให้เรียบดูสวยงามเรียกว่า
Anti-Aliasing
28

29. ตัวอักษรแบบธรรมดา อักษรที่ใช้การขจัดรอยหยัก
ตัว
ความแตกต่างระหว่างตัวอักษรแบบธรรมดากับตัวอักษรที่ใช้การ
ขจัดรอยหยัก
29

30. การใช้ง านตัว อัก ษรและรูป แบบตัว อัก ษรในมัล ติม ีเ ดีย (ต่อ )
 หากต้องการจัดข้อความให้อยู่กึ่งกลางบรรทัด ไม่ควรทำาติดต่อกันหลาย
บรรทัดจะดูไม่สวยงาม
 ในภาษาอังกฤษควรใช้อักษรพิมพ์ใหญ่ และพิมพ์เล็กอย่างเหมาะสม
 เน้นความน่าสนใจของข้อความด้วยการใส่แสงเงาให้ตัวอักษร หรือวางหัวข้อ
หลักๆ บนพื้นที่ว่าง ซึ่งเป็นจุดสนใจที่มองเห็นได้อย่างชัดเจน
 สรรหาข้อคิด คำาเสนอแนะ หรือคำาติชมจากหลายๆ ความคิดมาสรุปเพื่อเลือก
ใช้ตัวอักษรที่เหมาะสมที่สุดกับข้อความที่ต้องการ
 ใช้คำาศัพท์ที่มีความหมายน่าสนใจและเข้าใจง่าย เพื่อเชื่อมโยงหัวข้อกับเนื้อ
ความเข้าด้วยกัน
 ข้อความสำาหรับเชื่อมโยงบนหน้าเว็บเพ็จ (Text Link) ควรมีลักษณะตัวอักษรที่
เน้นข้อความ เช่น ใส่สีสัน ขีดเส้นใต้ข้อความ และควรหลีกเลี่ยงการเน้นด้วยสี
เขียวบนพื้นสีแดง เพราะจะทำาให้ตัวอักษรมีสีสันที่ไม่น่าอ่าน
 เน้นเนื้อความที่เป็นจุดสำาคัญด้วยการทำาแถบสีที่ข้อความนั้นๆ แต่ไม่ควรให้
เหมือน Text Link หรือข้อความบนปุ่มกด (Button)
30

31. เมนูน ำา ทาง (Menus For Navigation)
 การสร้างปฏิสัมพันธ์ด้วยข้อความที่เข้าใจง่าย จะช่วยให้การ
ติดต่อสื่อสารผ่านคอมพิวเตอร์สะดวกและรวดเร็วยิ่งขึ้น เช่น การ
จัดให้มีข้อความภายในกรอบสี่เหลียมจำานวนสองกรอบ กรอบ
่
ข้อความแรกเขียนว่า “ไปหน้าถัดไป” และอีกกรอบข้อความที่สอง
เขียนว่า “ย้อนกลับไปหน้าที่ผ่านมา” ทำาให้ผู้ใช้เข้าใจถึงทิศทาง
ที่จะไปได้อย่างถูกวิธี
 การสร้างรายการให้เลือกบนเมนูควรวางตำาแหน่งบนจอภาพให้
ง่ายต่อการมองเห็น และน่าสนใจที่จะติดตามข้อมูลต่างๆ ได้อย่าง
ทั่วถึง นอกจากนี้ ควรทำาการเชื่อมโยงในแต่ละหน้าให้สัมพันธ์
กันและสามารถกลับมาเริ่มต้นที่จอภาพหลักได้
31

32. ปุ่ม กดโต้ต อบ (Button For Interaction)
 ในงานด้านมัลติมีเดีย “ปุ่มกด (Button) เป็นกล่องของข้อความแบบ 3 มิติ
สำาหรับสร้างเหตุการณ์หนึ่งเมื่อคลิกเมาส์ที่ปุ่มกด ซึ่งการออกแบบเว็บไซต์
นั้น ข้อความและภาพกราฟิกสามารถใช้เป็นปุ่มกดได้ ควรนำาหลักการ
เลือกใช้และจัดวางข้อความตามที่ได้กล่าวไปแล้วข้างต้นมาประยุกต์ใช้
งานร่วมกับปุ่มกด
 โปรแกรมที่เป็นเครื่องมือในการสร้างปุ่มกดสำาหรับงานมัลติมีเดีย และ
เอกสาร Html หลายโปรแกรมด้วยกัน สามารถเปลี่ยนสถานะของปุ่มกด
ตามการทำางานโดยอัตโนมัติ แต่ผู้สร้างงานจะต้องทำาการปรับแต่ง
ข้อความบนปุ่มกดให้สัมพันธ์กับการทำางานของปุ่มกดเอง
 การวางข้อความบนปุ่มกดจะต้องมีขนาดตัวอักษรที่เหมาะสมกับขนาด
ของปุ่มกด เมื่อวางข้อความแล้ว ต้องมีระยะห่างระหว่างขอบของปุ่มกดกับ
ข้อความที่ไม่กว้างหรือชิดขอบจนเกินไป และสีสันที่ใช้จะต้องมองดูแล้ว
สบายตา น่าอ่าน และชัดเจน นอกจากนี้การทำาปุ่มกดเป็นรูปภาพพร้อมคำา
อธิบายจะช่วยทำาให้ง่ายและมีความน่าสนใจมากยิ่งขึน ้
32

33. รายการเลือก
นำาทาง
ปุ่มกด
โต้ตอบ
เว็บไซต์ที่มีส่วนประกอบของรายการเลือกนำาทางและปุ่มกดโต้ตอบ
33

34. การจัด วางข้อ ความสำา หรับ การอ่า น (Fields For Reading)
 จัดวางข้อความสำาคัญๆ แต่ละหัวข้อให้อยู่บนจอภาพเดียวกัน
 แบ่งเนื้อความอธิบายเป็นส่วนๆ แยกย่อยกันไปในแต่ละย่อหน้า
 ใช้ตัวอักษรที่อ่านง่าย และมีขนาดของตัวอักษรไม่ใหญ่หรือเล็ก
จนเกินไป
 เชื่อมโยงความสัมพันธ์ของข้อความให้ง่ายต่อการเข้าถึงข้อมูลที่
ต้องการได้อย่างรวดเร็ว
34

35. การกำา หนดรูป แบบของเอกสาร (Format Document)
 เอกสารในแนวตั้ง
(Portrait Document)
เป็นการกำาหนดเอกสาร
หรือกระดาษในแนวตั้งให้
มีความสูงมากกว่าความ
กว้าง ทำาให้ไม่สามารถ
อ่านข้อความภายใน
เอกสารทั้งหน้ากระดาษ
บนจอภาพคอมพิวเตอร์ที่มี
ความละเอียด 640 X 480
พิกเซลได้เอกสารที่จัดวาง
แบบ Portrait จะเป็นกระ
ดาษขนาด 8.5X11 นิ้ว
หรือกระดาษ A4 ซึ่งมี
ขนาด 8.27 X11.69 นิ้ว
35
ตัวอย่างการพิมพ์เอกสารใน
แนวตั้ง

36. การกำา หนดรูป แบบของเอกสาร (ต่อ )
 เอกสารในแนวนอน
(Landscape Document)
เป็นการกำาหนดกระดาษใน
แนวนอนให้มขนาดด้าน
ี
กว้างมากว่า ด้านสูง เทียบ
ได้กับจอภาพคอมพิวเตอร์
ทัวไปที่มความสูง 480
่ ี
พิกเซล กว้าง 640 พิกเซล
แต่การปรับจอภาพไปที่
ความละเอียด 1024 X 768
พิกเซล หรือ 1280 X1024
พิกเซล จะสามรถแสดง
เอกสารแบบ Portrait ได้
ภายในจอภาพเดียว
ตัวอย่างการพิมพ์เอกสารในแนว
นอน
36

37. สัญ ลัก ษณ์แ ละภาพสัญ ลัก ษณ์ (Symbols And Icon)
 สัญลักษณ์ (Symbols) เป็นการสร้างภาพแทนข้อความต่างๆ เพือบ่งบอกการทำางานของ
่
คอมพิวเตอร์ในขณะนั้นหรือใช้เตือนเพื่อบอกสิ่งทีควรกระทำา ตัวอย่างเช่น เมื่อมีรูป
่
นาฬิกาทรายปรากฏบนจอภาพคอมพิวเตอร์ หมายถึงให้รอการทำางานของเครื่อง
คอมพิวเตอร์จนกว่ารูปนาฬิกาทรายจะหายไป เป็นต้น อย่างไรก็ตาม ผู้ใช้จะต้องศึกษา
และทำาความเข้าใจความหมายของสัญลักษณ์ต่างๆ เพือให้ใช้งานได้อย่างเหมาะสม
่
 สำาหรับงานด้านมัลติมีเดียมักจะใช้สัญลักษณ์ร่วมกับข้อความ เพื่อบอกความหมายของ
สัญลักษณ์นั้นๆ ส่วน “ไอคอน (Icon)” หมายถึงภาพสัญลักษณ์ที่ใช้ใส่คอมพิวเตอร์ เช่น
รูปถังขยะ และรูปนาฬิกาทราย เป็นต้น
 การใช้สัญลักษณ์แทนการส่งข้อความเพื่อการติดต่อสื่อสารระหว่างกัน อาจเป็นได้ทั้ง
ภาพนิ่ง ไอคอน หรือภาพเคลื่อนไหว ทังนี้เพือสร้างจุดสนใจและช่วยให้ง่ายต่อการ
้ ่
จดจำา ดังนั้นในการผลิตงานด้านมัลติมเดียควรจะมีทั้งข้อความและสัญลักษณ์ต่างๆ
ี
รวมอยูด้วยกันอย่างกลมกลืนและเหมาะสม
่
 สัญลักษณ์ในงานด้านมัลติมีเดียจะมีรูปแบบและความหมายประจำาตัว ซึ่งบางสัญลักษณ์
มีการใช้กันอย่างแพร่หลายจนทุกคนเข้าใจความหมายได้เป็นอย่างดี นอกจากนี้ การ
ศึกษาความหมายของสัญลักษณ์จะใช้ความรูสึกเข้าใจได้ง่ายกว่าการศึกษาจากภาษา
้
เขียน จากตัวอย่างรูปที่ 5.15 จะแสดงสัญลักษณ์ที่ใช้งานกันบ่อย และคนส่วนใหญ่จะ
เข้าใจความหมายได้เป็นอย่างดี ส่วนรูปที่ 5.16 แสดงสัญลักษณ์ของเดือนทัง 12 ของ
้
ประเทศทางตะวันตก ซึงมีเพียงเฉพาะบางคนบางกลุ่มเท่านั้นทีสามารถแปลความหมาย
่ ่
ของสัญลักษณ์เหล่านี้ได้ว่า แต่ละภาพหมายถึงเดือนอะไร ในขณะทีคนกลุ่มอื่นอาจไม่
่
เข้าใจความหมายเลยก็ได้
37

38. แสดงสัญลักษณ์และภาพสัญลักษณ์ (ไอคอน) ที่ใช้ทั่วไป
แสดงสัญลักษณ์ 12 ราศี
38

39. ภาพสัญ ลัก ษณ์
วัตถุประสงค์ของการใช้งาน สัญลักษ ความหมาย
 งานด้าน ณ์
มัลติมีเดียยังมี การติดต่อสือสารระหว่างกันบน
่ :-) ยิ้มธรรมดา
ระบบเครือข่าย
การใช้งาน ;-)
ยิ้มและขยิบตา
หนึ่งข้าง
สัญลักษณ์ไม่
แสดงอาการไม่
มากนัก ซึ่ง :-|
สนใจ
สัญลักษณ์ที่ อาการกรี๊ด
:->
ถูกนำาไปใช้ อย่างแรง
กำาลังหน้าบึ้ง
ส่วนใหญ่จะมี :-(
แสดงอาการตืน
่
ความหมาย 8-)
เต้น
เป็นสากล ดัง อาการ
ตัวอย่างใน :-D ประหลาด
ใจ
ตารางแสดง
:-/ อาการงง ฉงน
ให้เห็นถึง การเล่นชมวีดิทศน์
ั  เล่นเพลง
สัญลักษณ์ใน  หยุด
รูปแบบต่างๆ  นำาแผ่นออก
39
ตามแต่ 

40. เครือ งมือ สำา หรับ สร้า งและแก้ไ ขรูป แบบของตัว อัก ษร
่
เครื่องมือทีใช้ในการสร้างรูปแบบและลักษณะของ
่
ตัวอักษรนัน จะใช้สำาหรับสร้างลักษณะพิเศษทีเป็น
้ ่
เอกลักษณ์เฉพาะของแต่ละงานทีผลิตหรือสร้าง
่
เครื่องหมายการค้า ซึ่งมีมากมายหลายโปรแกรม
เช่น ResEdit, Fontographer และ FontMonger เป็นต้น
สำาหรับใช้งานบนเครื่องแมคอินทอช Type-Designer
สำาหรับใช้งานบนวินโดว์ และ FontChameleon ที่
สามารถใช้งานบนเครื่องแมคอินทอชและระบบ
ปฏิบัติการวินโดว์ได้
40

41. 41 การออกแบบตัวอักษรด้วยโปรแกรม

42. เครื่อ งมือ สำา หรับ สร้า งและแก้ไ ขรูป แบบของตัว อัก ษร (ต่อ )
 ในการสร้างตัวอักษรให้สวยงาม จะต้องใช้เครื่องมือที่มีความ
สามารถในการย่อขยาย ปรับเฉดสี ปรับแสงเงา และสามารถ
ปรับขอบของตัวอักษรให้เรียบ ซึ่งการสร้างตัวอักษรด้วย
โปรแกรมกราฟิกต่างๆ สามารถเลือกเอารูปแบบอักษรที่
โปรแกรมได้จัดเตรียมไว้ มาดัดแปลงใช้งานและปรับปรุงเป็น
ตัวอักษรกราฟิกที่สวยงามได้
 โปรแกรมเกี่ยวกับงานทางด้านกราฟิกมากมาย ตัวอย่างเช่น
โปรแกรม Photoshop สำาหรับใช้สร้างและปรับแต่งตัวอักษรให้
เกิดความสวยงามได้อย่างง่ายดาย ไม่ว่าจะเป็นเรื่องของการ
จัดแต่งรูปลักษณ์ แสงเงา หรือแม้แต่เฉดสีบนพื้นต่างๆ
42

43. 43 การปรับแต่งข้อความด้วยโปรแกรม

44. เครื่อ งมือ สำา หรับ สร้า งและแก้ไ ขรูป แบบของตัว อัก ษร (ต่อ )
 ยังมีโปรแกรมสำาหรับออกแบบอีกประเภทหนึ่งทีสามารถ
ทำาให้ตัวอักษรมีความลึก และมุมมองกระทบของแสงได้หลาย
ทิศทางในลักษณะของภาพ 3 มิติ ได้แก่โปรแกรม
Broderbund’s TypeStyler, RayDream’s Adddepth 2, Cool 3d,
Vertigo 3d และ Plug-Ins ของโปรแกรม Photoshop เป็นต้น ซึ่ง
โปรแกรมเหล่านี้นอกจากจะมีคุณสมบัติในการปรับแต่ง
ข้อความหรือตัวอักษรให้เกิดความสวยงามและน่าสนใจมาก
ยิ่งขึ้นแล้วยังได้เพิ่มขีดความสามารถในการปรับแต่งพื้นผิว
เฉดสี แสงตกกระทบ และการหมุนรอบได้ทั่วทิศทางได้อก ี
ด้วย เหมาะสำาหรับการนำาเสนอชิ้นงานที่ต้องการความ
ละเอียดสูงด้านการโฆษณาสินค้าและบริการ หรือจัดทำาเป็น
สื่อการเรียนการสอนในลักษณะเสมือนจริง (Virtual Reality)
44

45. แสดงขั้นตอนเริ่มต้นการสร้างตัวอักษรด้วยโปรแกรม
45 COOL 3D

46. การปรับแต่งและแก้ไขตัวอักษรด้วยโปรแกรม COOL
46 3D

47. ผลลัพธ์ของตัวอักษรที่ได้รบการแก้ไขด้วยโปรแกรม
ั
47 COOL 3D

48. ผลลัพธ์ของตัวอักษรตามรูปแบบเปลวไฟที่เลือกไว้ด้วย
48 โปรแกรม COOL 3D

49. รูป แบบของตัว อัก ษรที่ใ ช้บ นเว็บ
มีหลากหลายรูปแบบ แต่ทมกนิยมนำามาประยุกต์ใช้
ี่ ั
มีดังนี้
Cascading Style Sheet (Css)
Imported Text (Txt)
Portable Document Format (Pdf)
49

50. รูป แบบของตัว อัก ษรที่ใ ช้บ นเว็บ (ต่อ )
 Cascading Style Sheet (Css) เป็นไฟล์ทเก็บข้อมูลการกำาหนดรูปแบบและลักษณะของ
ี่
ตัวอักษร (Style Sheet) เพือนำามาใช้กับเว็บเพ็จซึ่งเป็นคุณสมบัติใหม่ที่กำาหนดขึ้น
่
โดย World Wide Web Consortium ไม่เพียงแต่สามารถที่จะกำาหนดรูปแบบอักษรที่
มีความสลับซับซ้อนได้มากยิงขึ้นแล้ว เช่น ส่วนของหัวเรื่อง หัวข้อ และย่อหน้า
่
เป็นต้น ยังรวมไปถึงความสามารถในการจัดวางในตำาแหน่งของรูปแบบตัวอักษร
ได้อย่างสะดวกและเป็นระเบียบ โดยทีคุณสมบัติของไฟล์ชนิดนี้จะมีนามสกุลเป็น
่
*.Css นอกจากนี้ ยังมีส่วนประกอบหลักสำาคัญอยู่ 2 ส่วน ได้แก่ 1) ส่วนที่เป็นตัว
เลือก (Selector) หมายถึงส่วนที่อยูก่อนหน้าเครื่องหมายวงเล็บเปิด เช่น H1
่
Color :Red เป็นต้น และ 2) ส่วนที่อยูภายใต้เครื่องหมายวงเล็บปีกกา สำาหรับรูป
่
แบบในการใช้งานมีดังนี้
 Inline Css เป็นการกำาหนดรูปแบบและลักษณะของตัวอักษรให้กับข้อความวรรค
ตอน หรือย่อหน้าโดยเฉพาะ
 Embeded Css เป็นการกำาหนดรูปแบบและลักษณะของตัวอักษรให้กับเว็บเพ็จใน
แต่ละหน้า
 Link Css เป็นการกำาหนดรูปแบบและลักษณะของตัวอักษรให้กับทั้งเว็บเพ็จ
ทั้งหมด
50

51. รูป แบบของตัว อัก ษรที่ใ ช้บ นเว็บ (ต่อ )
Imported Text (Txt) เป็นเท็กซ์ไฟล์ (Text File) ที่นำาเข้า
ข้อมูลมาจากโปรแกรม Editor เช่น โปรแกรม Notepad,
Ms-Word หรือ Word Processing เป็นต้น แล้วมาแสดงผล
เป็นเว็บเพ็จ
51

52. รูป แบบของตัว อัก ษรที่ใ ช้บ นเว็บ (ต่อ )
 Portable Document Format (Pdf) เป็นไฟล์เอกสารอิเล็กทรอนิกส์ (Electronic
Document) อีกชนิดหนึ่งที่กำาลังได้รับความนิยมใช้งานกันอย่างแพร่หลาย
ทั้งนี้ เนื่องจากคุณลักษณะที่โดเด่นเฉพาะตัว ได้แก่
 สนับสนุนมาตรฐานการบีบอัดข้อมูลต่างๆ เช่น JPEG, CCITT Group 3,
CCITT Group4, Flate เป็นต้น ทำาให้ไฟล์ชนิดนี้ขนาดเล็กมากเมื่อเปรียบ
เทียบกับไฟล์เอกสารประเภทประมวลผลคำา (Word Processing) ด้วยกัน
 รองรับการทำางานร่วมกับระบบปฏิบัติการอื่นๆ ได้อย่างเป็นอิสระ ไม่ว่า
จะทำางานอยูบนระบบวินโดว์ (Windows) ระบบแมคอินทอซ (Macintosh)
่
หรือแม้แต่บนระบบยูนิกส์ (Unix) ก็ตาม
 สามารถแปลงรูปภาพ ข้อความ หรือแม้แต่วีดีโอให้อยู่ในรูปแบบ
เอกสารอิเล็กทรอนิกส์ (.Pdf) ได้เหมือนต้นฉบับจริง นอกจากนี้ ยัง
สามารถเปิดอ่านไฟล์เหล่านี้ผ่านทางเว็บบราวเซอร์บนเครือข่าย
อินเทอร์เน็ตหรืออินทราเน็ตได้อย่างไม่มีปัญหาใดๆ
52