บทที่ 5 ตัวอักษรและรูปแบบตัวอักษร

21,694
-1

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
21,694
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
103
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

บทที่ 5 ตัวอักษรและรูปแบบตัวอักษร

  1. 1. บทที่ 5 ตัวอักษรและรูปแบบตัวอักษร ( Character and Fonts )
  2. 2. ขอบเขตการบรรยาย <ul><li>เรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดอักษร </li></ul><ul><li>มาตรฐานของตัวอักษร </li></ul><ul><li>รูปแบบและลักษณะของตัวอักษร </li></ul><ul><li>การใช้งานตัวอักษรและรูปแบบตัวอักษรใน Multimedia </li></ul><ul><li>เครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษร </li></ul><ul><li>รูปแบบของตัวอักษรที่ใช้บน Web </li></ul>
  3. 3. เรื่องทั่วไปเกี่ยวกับตัวอักษรและชุดตัวอักษร <ul><li>ในอดีตสังคมของมนุษย์ ได้มีการใช้ข้อความหรือตัวอักษรเป็นภาษาสื่อกลางติดต่อระหว่างกันโดยผ่านการอ่านหรือบันทึกเรื่องราวต่างๆ ต่อมาได้มีการนำตัวอักษรมาประยุกต์ใช้ร่วมกับคอมพิวเตอร์ด้วยกระบวนการเรียบเรียง ประมวลผล และนำมาใช้งาน ในการจัดทำสื่อสิงพิมพ์และโฆษณาต่างๆ เช่น รายงาน โบชัวร์ แบบฟอร์ม หนังสือ และพจนานุกรม เป็นต้น หรือแม้แต่การสื่อสารด้วยข้อความที่เป็นเท็กซ์ ( Text Messaging ) และเผยแพร่ผ่านระบบเครือข่ายอินเตอร์เน็ตในรูปแบบภาษาเอ็ชทีเอ็มแอล ( HTML:Hypertext Markup Language ) ซึ่งปัจจุบันกำลังได้รับความนิยมใช้งานอย่างแพร่หลาย </li></ul>
  4. 4. แสดงข้อความหรือตัวอักษรที่นำมาประยุกต์ใช้ในรูปแบบเท็กซ์ สำหรับใช้ติดต่อสื่อสาร
  5. 5. ภาพแสดงกลไกการทำงานของภาษา HTML ที่เป็นรูปแบบมาตรฐาน
  6. 6. <ul><li>ในการติดต่อสื่อสารข้อมูล มักจะเกิดปัญหาเกี่ยวกับตัวอักษรหรือข้อความที่ปลายทางไม่สามารถแสดงผลได้อย่างถูกต้อง ทั้งนี้เนื่องจากรูปแบบและคุณลักษณะของตัวอักษรมีความแตกต่างกันนั้นเอง เพื่อเป็นการแก้ไขปัญหาเป็นในแนวทางเดียวกันได้อย่างมีประสิทธิผล จึงมีการกำหนดมาตราฐานของตัวอักษรขึ้น โดยแบ่งมาตราฐานตัวอักษรออกเป็น 2 ชนิด คือ </li></ul><ul><li>แอสกี ( ASCII ) และยูนิโค้ด (Unicode) </li></ul>มาตรฐาน ( Standard ) ของตัวอักษร
  7. 7. <ul><li>แอสกี ( ASCII ย่อมาจาก American Standard Code for Information Interchange) พัฒนาเมื่อ ค . ศ . 1970 แอสกี เป็นรหัสขนาด 7 บิต รองรับตัวอักษร ( a-z ทั้งตัวพิมพ์เล็กตัวพิมพ์ใหญ่ ) ตัวเลข (0-9) และ สัญลักษณ์พิเศษต่างๆ ได้ 128 รหัส ( Code Point ) ประกอบขึ้นด้วยตัว 95 ตัวอักษร มีค่าแบ่งเป็น 0-31 และ 0-127 รหัสแอสกีพัฒนาขึ้นมาเพื่อรองรับภาษาอังกฤษ ซึ่งมีการใช้งานอย่างแพร่หลาย </li></ul><ul><li>ในการใช้งาน ข้อมูล 1 byte = 8 bits ระบบจะใช้ 1 bit เป็น Parity Bit เพื่อตรวจสอบ ( Odd/Even Parity Checking) </li></ul>แอสกี ( ASCII )
  8. 8. แสดงตารางรหัส ASCII
  9. 9. ยูนิโค้ด ( Unicode ) ยูนิโค้ดเป็นรหัสที่พัฒนาขึ้นเพื่อใช้งานที่เป็นสากล โดยองค์กรกำหนดมาตรฐานสากล ( ISO: International Organization for Standardization) เนื่องจากคอมพิวเตอร์ในปัจจุบันได้มีผู้ใช้งานหลายชนชาติ โดยผู้พัฒนาคือองค์กรมาตราฐานสากลหรือไอเอสโอ เพื่อรองรับตัวอักษรและสัญลักษณ์ต่าง ๆ ของแต่ละภาษา ตัวอย่างเช่น Code Point เป็นต้น เช่น CJK เป็นมาตรฐาน Unicode ของ 3 ประเทศ คือ Chinese , Japan , Korean
  10. 10. แสดงยูนิโค้ด ( Unicode ) ของตัวอักษรภาษาไทย น 86
  11. 11. <ul><li>สามารถจัดแบ่งได้เป็น 3 ระดับ ได้แก่ </li></ul><ul><li>ประเภท ( Category) </li></ul><ul><li>1. Serif: อักษรจะมีเส้นคล้ายๆ ขีด - เหลี่ยม </li></ul><ul><li>2. Sans-Serif: มีรูปร่างมนกลม และดูสวยงาม </li></ul><ul><li>3. Monospaced: บางครั้งเรียกว่า Typewriter Font เนื่องจากเป็นตัวอักษรที่ใกล้เคียงกับเครื่องพิมพ์ดีด </li></ul><ul><li>4. Script: เป็นแหล่งรวบรวมของแบบอักษรทุกชนิดที่มีลักษณะพิเศษต่างๆ </li></ul>5.3 รูปแบบและลักษณะของตัวอักษร
  12. 12. รูปแบบและลักษณะของตัวอักษร <ul><li>ตระกูล ( Family) </li></ul><ul><ul><li>เป็นหมวดที่ย่อยลงไปจาก Category แต่ตัวอักษรที่อยู่ในตระกูลเดียวกัน จะมีบรรพบรุษร่วมกันดังตาราง </li></ul></ul>แสดงความสัมพันธ์ระหว่าง Category และ Family Whimsy, Arribal, Bergell Decorative Courier , Courier New Monospaced Helvetica, Arial, Verdana Sans-Serif Times, Century Schoolbook, Garamond Serif Family Category
  13. 13. รูปแบบและลักษณะของตัวอักษร <ul><li>ชื่อเฉพาะ (Face) </li></ul><ul><ul><li>เป็นตัวอักษรที่สามารถแสดงความสัมพันธ์ระหว่าง Family และ Face ที่เราพบเห็นบ่อยๆ ดังตาราง </li></ul></ul>แสดงความสัมพันธ์ระหว่าง Family และ Face Regular, Bold Whimsy Regular, Oblique Courier Regular, Bold, Italic Arial Roman, Italic Times Face Family
  14. 14. รูปแบบและลักษณะของตัวอักษร <ul><li>การจัดวางตำแหน่ง (Alignment) </li></ul><ul><li>เป็นการกำหนดวิธีการเรียงของตัวอักษรหรือข้อความในแต่ละย่อหน้า ว่าต้องการให้ชิดซ้าย หรือชิดขวา หรือตำแหน่งอื่นๆ </li></ul><ul><li>เส้นขอบ (Borders) </li></ul><ul><li>เป็นการกำหนดขอบส้นว่าต้องการลักษณะแบบใด </li></ul><ul><li>ขนาดของตัวอักษร (Font Size) </li></ul>
  15. 15. รูปแบบและลักษณะของตัวอักษร <ul><li>สี (Colors) </li></ul><ul><li>ตัวอักษรหรือข้อความ (Text) </li></ul>แสดงโครงสร้างตัวอักษรภาษาอังกฤษ
  16. 17. 5.4 การใช้งานตัวอักษรและรูปแบบตัวอักษรในมัลติมีเดีย <ul><li>มีวิธีการดังนี้ </li></ul><ul><ul><li>ตัวอักษรเล็กเมื่อใช้ต้องชัดเจน </li></ul></ul><ul><ul><li>ข้อความที่เน้นต้องแตกต่างจากข้อความอื่น </li></ul></ul><ul><ul><li>จัดช่องว่างบรรทัดให้เหมาะสม อ่านง่าย </li></ul></ul><ul><ul><li>จัดขนาดตัวอักษรตามความสำคัญของข้อความ </li></ul></ul><ul><ul><li>หัวข้อที่ใช้ตัวอักษรขนาดใหญ่ต้องเว้นช่องไฟให้รู้สึกไม่ติดขัด </li></ul></ul><ul><ul><li>จัดสีข้อความให้อ่านง่าย </li></ul></ul><ul><ul><li>ควรใช้วิธีการ Anti-aliasing กับหัวข้อที่เป็นอักษรกราฟฟิกขนาดใหญ่ </li></ul></ul>
  17. 18. การนำรูปแบบตัวอักษรมาประยุกต์ใช้ในมัลติมีเดีย <ul><li>เมนูนำทาง ( Menus for Navigation ) </li></ul><ul><li>เป็นการสร้างรายการให้เลือกแบบเมนูควรวางตำแหน่งบนจอภาพให้ง่ายต่อการมองเห็นและน่าสนใจ และควรทำการเชื่อมโยงในแต่ละหน้าให้สัมพันธ์กันและสามารถกลับมาเริ่มต้นที่จอภาพหลักได้ </li></ul><ul><li>ปุ่มกดโต้ตอบ ( Button for Interaction ) </li></ul><ul><ul><li>ปุ่มกด ( Button ) เป็นกล่องข้อความแบบ 3 มิติสำหรับสร้างเหตุการณ์ใดเหตุการณ์หนึ่งเมื่อคลิกเมาส์ที่ปุ่มกด การออกแบบบนเว็บนั้น ข้อความและกราฟฟิกสามารถใช้เป็นปุ่มกดได้ </li></ul></ul>
  18. 19. แสดงตัวอย่างเว็บไซต์ที่มีส่วนประกอบของ Menus for Navigation และ Button for Interaction
  19. 20. <ul><li>การจัดวางข้อความสำหรับการอ่าน ( Field for Reading ) </li></ul><ul><ul><li>จัดวางข้อความที่สำคัญๆ แต่ละหัวข้อให้อยู่ในจอภาพเดียวกัน </li></ul></ul><ul><ul><li>แบ่งเนื้อความอธิบายเป็นส่วนๆ แยกย่อยกันไปแต่ละย่อหน้า </li></ul></ul><ul><ul><li>ใช้ตัวอักษรที่อ่านง่าย </li></ul></ul><ul><ul><li>เชื่อมโยงความสัมพันธ์ของข้อความให้ง่ายต่อการเข้าถึงข้อมูล </li></ul></ul><ul><li>การกำหนดรูปแบบของเอกสาร ( Format Document ) </li></ul><ul><ul><li>การกำหนดรูปแบบของเอกสารสามารถจัดทำได้ทั้งที่เป็นแบบแนวตั้ง </li></ul></ul><ul><ul><li>( Portrait ) และแบบแนวนอน (Landscape) เพื่อประโยชน์สำหรับการพิมพ์ออก </li></ul></ul><ul><ul><li>ทางเครื่องพิมพ์ และการจัดทำเอกสารให้อยู่ในรูปแบบไฟล์เอกสาร </li></ul></ul><ul><ul><li>อิเล็กทรอนิกส์ เป็นต้น </li></ul></ul>
  20. 21. <ul><li>เอกสารภาษา HTML </li></ul><ul><li>เอกสารภาษา HTML จะเป็นการนำข้อความหรือตัวอักษรใส่ลงไปในแต่ละหน้าเอกสาร ( Web Page) โดยเรียกหน้าแรกว่า Home Page รวมเรียกว่า Web Site </li></ul>แสดงข้อความด้วยภาษา HTML Notepad
  21. 22. <ul><li>สัญลักษณ์และภาพสัญลักษณ์ ( Symbols and Icons) </li></ul><ul><li>สัญลักษณ์เป็นการสร้างภาพแทนข้อความต่างๆ </li></ul>แสดงสัญลักษณ์ในรูปแบบต่างๆ ตามวัตถุประสงค์การใช้งาน
  22. 23. 5.5 เครื่องมือสำหรับสร้างและแก้ไขรูปแบบของตัวอักษร <ul><li>ปัจจุบันมีเครื่องมือสำหรับสร้างและแก้ไขตัวอักษรโดยเฉพาะมากมายให้เลือกตามความเหมาะสม </li></ul>แสดงการปรับแต่งข้อความด้วยโปรแกรม Photoshop
  23. 24. 5.6 รูปแบบของตัวอักษรที่ใช้บนเว็บ <ul><li>Cascading Style Sheet(CSS) มีรูปแบบการใช้งาน ดังนี้ </li></ul><ul><ul><li>Inline CSS การกำหนดรูปแบบของตัวอักษรให้กับข้อความวรรคตอน ย่อหน้า </li></ul></ul><ul><ul><li>Embeded CSS การกำหนดรูปแบบของตัวอักษรให้กับเว็บเพจในแต่ละหน้า </li></ul></ul><ul><ul><li>Link CSS การกำหนดรูปแบบของตัวอักษรให้กับเว็บเพจทั้งหมด </li></ul></ul><ul><li>Imported Text(Txt) เป็นเท็กซ์ไฟล์ที่นำเข้าข้อมูลมาจากโปรแกรม Editor เช่น NotePad </li></ul><ul><li>Portable Document Format (PDF) เป็นไฟล์เอกสารอิเล็กทรอนิกส์ คุณลักษณะที่โดดเด่น สนับสนุนมาตรฐานการบีบอัดข้อมูลต่างๆ </li></ul><ul><ul><ul><li>รองรับการทำงานร่วมกับระบบปฏิบัติการอื่นๆ ได้อย่างเป็นอิสระ </li></ul></ul></ul><ul><ul><ul><li>สามารถแปลงรูปภาพ ข้อความให้อยู่ในรูปแบบเอกสารอิเล็กทรอนิกส์ ( .pdf ) </li></ul></ul></ul><ul><ul><ul><li>ได้เหมือนต้นฉบับจริง </li></ul></ul></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×