Transcript Download this file (chapter05_multi1.ppt)

Chapter 5
:Character and Fonts
้
่
5.1 ความรู ้เบืองต้
นเกียวก
บ
ั ตวั อ ักษรและชุด
ตัวอ ักษร
5.2 มาตรฐานของตัวอ ักษร
5.3 รู ปแบบและลักษณะของตัวอ ักษร
5.4 การใช้งานตัวอ ักษรและรู ปแบบตัวอ ักษรใน
งานมัลติมเี ดีย
่
5.5 เครืองมื
อสาหร ับสร ้างและแก้ไขตวั อ ักษร
่ บนเว็บ
5.6 รู ปแบบของตวั อ ักษรทีใช้
05/08/59
CS 433
Multimedia Technology_5
1
้
่
5.1 ความรู ้เบืองต้
นเกียวกั
บตัวอก
ั ษร
และชุดตัวอก
ั ษร
ในอดีต มนุ ษย ไ์ ด้ม ีก ารใช้ข อ
้ ความหรือ ต วั อ ก
ั ษร
เป็ นภาษาสื่อกลางติ ด ต่ อ ระหว่ า งก น
ั โดยผ่ า น
่
ทางการอ่านหรือบันทึกเรืองราวต่
างๆ
ต่อมาได้มก
ี ารน าตัว อก
ั ษรมาประยุ กต ์ใช้รว
่ มก บ
ั
ค อ ม พิ ว เ ต อ ร ด
์ ้ ว ย ก ร ะ บ ว น ก า ร เ รี ย บ เ รี ย ง
ป ร ะ ม ว ล ผ ล จัด เ ก็ บ แ ล ะ น า ม า ใ ช้ง า น ซึ่ งไ ด้
ก่อให้เกิดประโยชน์ในทุกแวดวงธุรกิจ หรือแม้แต่
ก า ร สื่ อ ส า ร ด้ ว ย ข้ อ ค ว า ม ที่ เ ป็ น เ ท็ ก ซ ์ (Text
Messaging)
05/08/59
CS 433
Multimedia Technology_5
2
5.2 มาตรฐานของตัวอักษร

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) เป็ นรหัสของสัญลักษณ์พเิ ศษต่างๆ และสัญลักษณ์ทางคณิตศาสตร์

Unicode




พัฒนาเพื่อการใช้ งานที่เป็ นสากล รองรับตัวอักษร สัญลักษณ์ต่างๆ
เป็ นรหัสขนาด 16 bit(65,536 ตัว)
ผู้พฒ
ั นา ISO (International Organization for Standardization)
ตัวอย่าง Latin,Greek,Chinese,Japanese,Thai etc...
05/08/59
CS 433
Multimedia Technology_5
3
5.3 รู ปแบบและลักษณะของตัวอ ักษร
5.3.1 Category
5.3.2 Family
5.3.3 Face
05/08/59
CS 433
Multimedia Technology_5
4
5.3.1 Category
 Serif
:
 Sans-Serif
:
 Monospaced
:
 Script
:
จุด มีหาง คล้ ายๆ กับลายมือ
05/08/59
CS 433
เป็ นเส้ นคล้ ายๆ ขีดเหลี่ยม
นิยมใช้ เขียนเว็บ รูปร่ างมน กลม สวยงาม
ขนาดความกว้ างของตัวอักษรเท่ ากันหมด
แหล่ งรวมทุกๆชนิด มีลักษณะพิเศษเฉพาะเช่ น มี
Multimedia Technology_5
5
5.3.2 Family
05/08/59
Category
Family
Serif
Times,Century
Sans-Serif
Arial,Verdana
Monospaced
Courier,Courier New
Decorative
Whimsy,Arribal
CS 433
Multimedia Technology_5
6
5.3.3 Face
Family
Face
Times
Roman,Italic
Arial
Regular,Bold,Italic
Courier
Regular
Whimsy
Regular,Bold
05/08/59
CS 433
Multimedia Technology_5
7
ลักษณะของตัวอ ักษร
 Alignment เป็ นการกาหนดวิธีการเรี ยงของอักษรหรื อข้อความในแต่ละย่อหน้า ว่าต้องการ
ให้ชิดซ้าย ชิดขวา อยูต่ รงกึ่งกลาง หรื อจัดซ้ายขวาเสมอกันภายในทั้งด้านซ้าย ขวา บน และ
ล่าง (Left, Top, Right And Bottom) สามารถกาหนดระยะขอบ หรื อระยะห่างระหว่าง
กล่องข้อความ (Text Box) กับข้อความภายใน รวมทั้งระยะเว้นห่ างของข้อความกับกรอบที่
ล้อมรอบอยูไ่ ด้
 Borderเส้นขอบ (Borders) เป็ นการกาหนดค่าให้กบั เส้นขอบว่าต้องการลักษณะของเส้น
ขอบ สี ของเส้นขอบ และความหนักเบาของเส้นขอบหรื อความหนาของเส้นขอบอย่างไร
 Font Size ขนาดของตัวอักษร (Font Size) จะเริ่ มกาหนดตั้งแต่ส่วนบนสุ ดของตัวอักษร
(Serif) จนถึงส่ วนล่างของอักษรตัวพิมพ์เล็ก (เช่น ตัว g และ y ของตัวอักษรแบบ Helvetica,
Times และ Courier เป็ นต้น) ดังนั้นขนาดของตัวอักษรจึงมิได้หมายความถึงส่ วนสู งหรื อ
ความกว้างของตัวอักษรเพียงเท่านั้น แต่จะขึ้นอยูก่ บั ช่วงของตัวอักษรแต่ละแบบด้วย
05/08/59
CS 433
Multimedia Technology_5
8
ลักษณะของตัวอักษร
สี (Colors) เป็ นส่ วนกาหนดรายละเอียดเกี่ยวกับสี ของตัวอักษร สี พ้ืนหลัง
ของตัวอักษร และรวมถึงการเลือกรู ปภาพ พื้นหลังของตัวอักษร และการ
จัดเรี ยงตัวของรู ปภาพพื้นหลัง
ตัวอักษรหรื อข้อความ เป็ นการกาหนดรู ปแบบของตัวอักษรหรื อข้อความ
โดยตรง ซึ่ งสามารถกาหนดความหนาของตัวอักษร ลักษณะของตัวอักษร
เช่น แบบตัวอักษรธรรมดา (Normal) แบบตัวหนา (Bold) แบบตัวเอียง
(Italic) หรื อแบบที่มีการขีดเส้นใต้ (Underline) เป็ นต้น เปลี่ยนอักษรตัว
เล็ก ให้เ ป็ นตัว ใหญ่ ตั้ง ระยะห่ า งระหว่า งอัก ษรและระยะห่ า งระหว่า ง
บรรทัดได้ รวมทั้งจัดการเรี ยงอักษรทั้งย่อหน้าใช้ชิดขอบซ้าย ขอบขวา อยู่
กึ่งกลาง หรื อตัดขอบซ้ายขวาทั้งสองด้านได้
05/08/59
CS 433
Multimedia Technology_5
9
โครงสร้ างของตัวอักษรภาษาอังกฤษ
แสดงโครงสร้ างของตัวอักษรภาษาอังกฤษ










Serif คือ เส้ นที่กาหนดส่วนบนสุดของตัวอักษร
Mean Lineคือ เส้ นที่กาหนดความสูงของอักษรตัวพิมพ์เล็ก
Base Lineคือ เส้ นที่กาหนดขอบล่างของตัวอักษร
Point Sizeคือ ช่วงความสูงทังหมดที
้
่ตวั อักษรต้ องใช้
Cap Heightคือ ความสูงของตัวอักษรตัวพิมพ์ใหญ่
Shoulderคือ ช่องว่างที่เผื่อไว้ สาหรับเว้ นบรรทัด
Set Widthคือ ความกว้ างของตัวอักษร
X - Height คือ ความสูงของตัวอักษรพิมพ์เล็ก
Ascender คือ ส่วนที่เลยเส้ น Mean Line ขึ ้นไปด้ านบน ใช้ กบั อักษรตัวพิมพ์เล็ก
Descender คือ ส่วนที่เลยเส้ น Baseline ลงมาด้ านล่าง ใช้ กบั อักษรตัวพิมพ์เล็กเช่นกัน
05/08/59
CS 433
Multimedia Technology_5
10
5.4 การใช้ งานตัวอักษรและรู ปแบบตัวอักษร
ในงานมัลติมีเดีย
ตัวอักษรที่มีขนาดเล็กต้องชัดเจนและอ่านง่าย
ข้อความที่ควรเน้นควรมีลกั ษณะแตกต่างจากธรรมดา
จัดช่องว่างให้เหมาะสมและอ่านง่าย
จัดขนาดตัวอักษรตามลาดับความสาคัญของข้อความ
หัวข้อที่ใช้ตวั อักษรใหญ่ควรเว้นระยะช่องไฟ ที่ให้ความรู ้สึกที่ไม่
ติดกัน หรื อห่างเกินไป
จัดสี ขอ้ ความให้อ่านง่าย
ใช้วิธีการ Anti-Aliasing กับหัวข้อที่เป็ นอักษรขนาดใหญ่
05/08/59
CS 433
Multimedia Technology_5
11
การจัดกึ่งกลางบรรทัด ไม่ควรทาติดต่อกันหลายบรรทัด
ภาษาอังกฤษใช้ตวั พิมพ์ใหญ่เล็กให้เหมาะสม
เน้นจุดสนใจใส่ แสงและเงา หรื อวางบนพื้นที่ๆเป็ นจุดสนใจ
ใช้คาศัพท์ที่เข้าใจง่าย
ตัวอักษรแบบธรรมดา
05/08/59
CS 433
ตัวอักษรที่ใช้ การขจัดรอยหยัก
Multimedia Technology_5
12
สั ญลักษณ์ การสื่ อสารบนเครื อข่ าย
:-) ยิม้ ธรรมดา
;-) ยิม้ และขยิบตา
:-| ไม่สนใจ
:-> กรี๊ ดอย่างแรง
:-( หน้าบึ้ง
8-) ตื่นเต้น
05/08/59
:-D ประหลาดใจ
:-/ อาการงง
CS 433
Multimedia Technology_5
13
5.5 เครื่ องมือสาหรับสร้ างและแก้ ไขรู ปแบบของตัวอักษร
เครื่ องมือที่ใช้ในการสร้างรู ปแบบและลักษณะของตัวอักษรนั้น จะ
ใช้สาหรับสร้างลักษณะพิเศษที่เป็ นเอกลักษณ์เฉพาะของแต่ละงานที่
ผลิตหรื อสร้างเครื่ องหมายการค้า ซึ่งมีมากมายหลายโปรแกรม เช่น
ResEdit, Fontographer และ FontMonger เป็ นต้น สาหรับใช้งานบน
เครื่ องแมคอินทอช Type-Designer สาหรับใช้งานบนวินโดว์ และ
FontChameleon ที่สามารถใช้งานบนเครื่ องแมคอินทอชและ
ระบบปฏิบตั ิการวินโดว์ได้
05/08/59
CS 433
Multimedia Technology_5
14
 โปรแกรมเกี่ยวกับงานทางด้ านกราฟิ กมากมาย ตัวอย่างเช่น โปรแกรม Photoshop
สาหรับใช้ สร้ างและปรับแต่งตัวอักษรให้ เกิดความสวยงามได้ อย่างง่ายดาย ไม่ ว่าจะเป็ น
เรื่ องของการจัดแต่งรูปลักษณ์ แสงเงา หรื อแม้ แต่เฉดสีบนพื ้นต่างๆ
05/08/59
CS 433
Multimedia Technology_5
15
่ บนเว็บ
5.6 รู ปแบบของตัวอ ักษรทีใช้
5.6.1 Cascading Style Sheet (CSS)
5.6.2 Imported Text (TXT)
5.6.3 Portable Document Format (PDF)
05/08/59
CS 433
Multimedia Technology_5
16
5.6.1 Cascading Style Sheet (CSS)
เป็ นไฟล์ที่เก็บข้อมูลการกาหนดรู ปแบบและลักษณะของตัวอักษร (Style Sheet) เพื่อ
นามาใช้กบั เว็บเพ็จซึ่งเป็ นคุณสมบัติใหม่ที่กาหนดขึ้นโดย World Wide Web Consortium
ไม่เพียงแต่สามารถที่จะกาหนดรู ปแบบอักษรที่มีความสลับซับซ้อนได้มากยิง่ ขึ้นแล้ว เช่น
ส่ วนของหัวเรื่ อง หัวข้อ และย่อหน้า เป็ นต้น ยังรวมไปถึงความสามารถในการจัดวางใน
ตาแหน่งของรู ปแบบตัวอักษรได้อย่างสะดวกและเป็ นระเบียบ โดยที่คุณสมบัติของไฟล์
ชนิดนี้จะมีนามสกุลเป็ น *.Css นอกจากนี้ ยังมีส่วนประกอบหลักสาคัญอยู่ 2 ส่ วน ได้แก่ 1)
ส่ วนที่เป็ นตัวเลือก (Selector) หมายถึงส่ วนที่อยูก่ ่อนหน้าเครื่ องหมายวงเล็บเปิ ด เช่น H1
Color :Red เป็ นต้น และ 2) ส่ วนที่อยูภ่ ายใต้เครื่ องหมายวงเล็บปี กกา สาหรับรู ปแบบในการ
ใช้งานมีดงั นี้
 Inline CSS เป็ นการกาหนดรู ปแบบและลักษณะของตัวอักษรให้กบั ข้อความวรรค
ตอน หรื อย่อหน้าโดยเฉพาะ
 Embeded CSS เป็ นการกาหนดรู ปแบบและลักษณะของตัวอักษรให้กบั เว็บเพ็จในแต่
ละหน้า
 Link CSS เป็ นการกาหนดรู ปแบบและลักษณะของตัวอักษรให้กบั ทั้งเว็บเพ็จทั้งหมด
05/08/59
CS 433
Multimedia Technology_5
17
5.6.2 Imported Text (Txt) เป็ นเท็กซ์ ไฟล์ (Text File) ทีน่ าเข้ าข้ อมูลมาจาก โปรแกรม Editor
เช่ น โปรแกรม Notepad, Ms-Word หรื อ Word Processing เป็ นต้ น แล้ วมาแสดงผลเป็ น
เว็บเพ็จ
5.6.3 Portable Document Format (Pdf) เป็ นไฟล์ เอกสารอิเล็กทรอนิกส์ (Electronic
Document) อีกชนิดหนึ่งทีก่ าลังได้ รับความนิยมใช้ งานกันอย่ างแพร่ หลาย ทั้งนี้ เนื่องจาก
คุณลักษณะทีโ่ ดเด่ นเฉพาะตัว ได้ แก่
สนับสนุนมาตรฐานการบีบอัดข้ อมูลต่ างๆ เช่ น JPEG, CCITT Group 3, CCITT
Group4, Flate เป็ นต้ น ทาให้ ไฟล์ ชนิดนีข้ นาดเล็กมากเมื่อเปรียบเทียบกับไฟล์ เอกสาร
ประเภทประมวลผลคา (Word Processing) ด้ วยกัน
รองรับการทางานร่ วมกับระบบปฏิบัติการอื่นๆ ได้ อย่ างเป็ นอิสระ ไม่ ว่าจะทางานอยู่
บนระบบวินโดว์ (Windows) ระบบแมคอินทอซ (Macintosh) หรื อแม้ แต่ บนระบบยู
นิกส์ (Unix)
สามารถแปลงรู ปภาพ ข้ อความ หรื อแม้ แต่ วดี โี อให้ อยู่ในรู ปแบบเอกสารอิเล็กทรอนิกส์
(.Pdf) ได้ เหมือนต้ นฉบับจริง นอกจากนี้ ยังสามารถเปิ ดอ่ านไฟล์ เหล่ านี้ผ่านทางเว็บ
บราวเซอร์ บนเครื อข่ ายอินเทอร์ เน็ตหรื ออินทราเน็ตได้ อย่ างไม่ มปี ัญหาใดๆ
05/08/59
CS 433
Multimedia Technology_5
18