Character การสอนครั้งที่ 3 ...

52
ตตตตตตตตตตตตตตตตตตตตตต Character and Fonts 1

Transcript of Character การสอนครั้งที่ 3 ...

Page 1: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

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

1

Page 2: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เร��อังทั่��วไปเก��ยวก�บตั�วอั�กษรและชุ�ดตั�วอั�กษร

2

ในอดี�ตมน�ษย์�ไดี ม�การใช้ ข้ อความหร�อต�วอ�กษรเป็�นภาษาสื่��อกลางต ดีต!อระหว!างก�น โดีย์ผ่!านทางการอ!านหร�อบั�นท(กเร��องราวต!างๆ

ต!อมาไดี ม�การน*าต�วอ�กษรมาป็ระย์�กต�ใช้ ร!วมก�บัคอมพิ วเตอร�ดี วย์กระบัวนการเร�ย์บัเร�ย์ง ป็ระมวลผ่ล จั�ดีเก-บัและน*ามาใช้ งาน ซึ่(�งไดี ก!อให เก ดีป็ระโย์ช้น�ในท�กแวดีวงธุ�รก จั หร�อแม แต!การสื่��อสื่ารดี วย์ข้ อความท��เป็�นเท-กซึ่� (Te

xt Messaging)

Page 3: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

3 ข้ อความท��น*ามาป็ระย์�กต�ใช้ ในร1ป็แบับัสื่��อสื่ �งพิ มพิ�

Page 4: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

4

ข้ อความท��น*ามาป็ระย์�กต�ใช้ ในร1ป็แบับัข้ อความสื่*าหร�บัต ดีต!อสื่��อสื่าร

Page 5: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เร��อังทั่��วไปเก��ยวก�บตั�วอั�กษรและชุ�ดตั�วอั�กษร

5

จันกระท��ง ไดี ม�การเร �มน*าต�วอ�กษรมาใช้ และเผ่ย์แพิร!ผ่!านช้!องทางการสื่��อสื่ารบันระบับัเคร�อข้!าย์อ นเทอร�เน-ตในร1ป็แบับัภาษา Html (Hypertext Markup

Language) ซึ่(�งป็2จัจั�บั�นก*าล�งไดี ร�บัความน ย์มใช้ งานก�นอย์!างแพิร!หลาย์

Page 6: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

6

ภาพิแสื่ดีงโครงสื่ร างภาย์ในและร1ป็แบับัทางกาย์ภาพิข้องภาพิแสื่ดีงโครงสื่ร างภาย์ในและร1ป็แบับัทางกาย์ภาพิข้องเอกสื่าร เอกสื่าร HTMLHTML

Page 7: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

7ภาพิแสื่ดีงกลไกการท*างานข้องภาษา ภาพิแสื่ดีงกลไกการท*างานข้องภาษา HTMLHTML ท��เป็�นร1ป็แบับัท��เป็�นร1ป็แบับั

มาตรฐานมาตรฐาน

Page 8: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

8

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

Page 9: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

มาตัรฐาน (Standard) ขอังตั�วอั�กษร

9

มาตรฐานต�วอ�กษรแบั!งออกเป็�น 2 ช้น ดี ค�อ แอสื่ก� (Ascii)ย์1น โค ดี (Unicode)

Page 10: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

แอัสก� (ASCII)

10

แอสื่ก� ASCII ย์!อมาจัาก American Standard Code For Information Interchange ไดี ม�การพิ�ฒนาในช้!วงป็5 ค.ศ . 1970 ซึ่(�งแอ

สื่ก�เป็�นรห�สื่ข้นาดี 7 บั ต รองร�บัต�วอ�กษร - (A Z ท�8งต�วพิ มพิ�เล-กและต�วพิ มพิ�ใหญ่! ) ต�วเลข้ - (0 9) และสื่�ญ่ล�กษณ์�พิ เศษต!างๆ ไดี 128 รห�สื่ (C

ode Point) ต!อมาไดี ร�บัการพิ�ฒนามาเป็�นมาตรฐาน ISO 646 ในป็5 ค.ศ . 1972 สื่*าหร�บั

ใช้ งานท�กพิ�8นท��ในป็ระเทศสื่หร�ฐอเมร กา แต!มาตรฐานท��พิ�ฒนาข้(8นมาน�8น ย์�งไม!สื่ามารถแก ไข้ป็2ญ่หาทางดี านภาษาท��เก ดีข้(8นไดี อย์!างจัร งจั�ง

ในการเก-บัข้ อม1ล 1 ไบัต� จัะม�การใช้ งานข้นาดี 8 บั ต แต!รห�สื่แอสื่ก�จัะใช้ งานเพิ�ย์ง 7 บั ต โดีย์ท��อ�กหน(�งบั ตท��เหล�อจัะใช้ สื่*าหร�บัแสื่ดีงสื่ถานะความผ่ ดีพิลาดีข้องการสื่!งผ่!านข้ อม1ล เร�ย์กว!า แพิร ต�บั ต (Parity Bit) ท*าให สื่ามารถท*างานไดี 256 รห�สื่ ซึ่(�งต!อมาไดี ม�การพิ�ฒนาการใช้ งานรห�สื่แบับั 8บั ตน�8 โดีย์แบั!งเป็�น 2 กล�!ม กล�!มแรก - (0 127) ย์�งคงเป็�นรห�สื่แอสื่ก�แบับัเดี ม กล�!มท��สื่อง - (128 255) เป็�นรห�สื่ข้องสื่�ญ่ล�กษณ์�พิ เศษต!างๆ และสื่�ญ่ล�กษณ์�ทางคณ์ ตศาสื่ตร�

Page 11: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

แอัสก� (ASCII) (ตั�อั)

11

มาตรฐานรห�สื่ 8 บั ต ในช้!วงป็5 ค.ศ . 1980 จัะม�การใช้ มาตรฐาน ISO 8859 โดีย์แย์กตามกล�!มข้องภาษาในกล�!มแรกจัะเป็�นมาตรฐาน ISO

- 88591 เป็�นการอ างถ(งภาษาในกล�!ม ISO Latin1 และครอบัคล�มรวมไป็ถ(งภาษาข้องป็ระเทศทางตะว�นตกข้องย์�โรป็ (Western European ) สื่!วนมาตรฐาน ISO 8859 สื่*าหร�บัภาษาข้องป็ระเทศทางตะว�นออกข้อง

ย์�โรป็ เช้!น Czech, Slovak และ Croatian จัะใช้ มาตรบัาน - ISO 8859 2หร�อ 2Latin โดีย์แต!ละป็ระเทศจัะม�มาตรฐานข้องภาษาท��แตกต!างก�น เช้!น

Cyrillic จัะใช้ มาตรฐาน - ISO 8856 5 Greek จัะใช้ มาตรฐาน ISO 8859- 7 และ Hebrew จัะใช้ มาตรฐาน - ISO 8859 8 เป็�นต น

จัากข้ อบักพิร!องข้องมาตรฐาน ISO 8859 ท��ถ1กแบั!งออกเป็�นหลาย์ป็ระเภทดี�งกล!าวข้ างต นและมาตรฐานน�8ไม!สื่น�บัสื่น�นระบับัป็ฏิ บั�ต การและซึ่อฟต�แวร�ต!างๆ อย์!างครอบัคล�ม เป็�นผ่ลให มาตรฐาน ISO 8859 ไม!สื่ามารถใช้ งานไดี อย์!างท��วถ(งและไม!เพิ�ย์งพิอท��จัะรองร�บัก�บัรห�สื่ข้องท�กช้าต ท�กภาษาไดี ดี�งน�8นเพิ��อแก ไข้ป็2ญ่หาจั(งไดี ม�การพิ�ฒนาพิ�8นท��ในการเก-บัต�วอ�กษรเป็�น 16 บั ต (

65536 รห�สื่ ) โดีย์ม�การจั�ดีกล�!มข้องรห�สื่แบับั 8 บั ตออกเป็�น 256 กล�!ม ในท*านองเดี�ย์วก�นเม��อจั�ดีกล�!มข้องรห�สื่แบับั 16 บั ตออก

เป็�น 256 กล�!ม จัะไดี รห�สื่แบับั 24 บั ต จัากน�8น จั�ดีกล�!มรห�สื่แบับั 2 4 บั ต เพิ �มอ�ก 256 กล�!ม ก-จัะพิ�ฒนาไป็สื่1! ISO 10646 หร�อ รห�สื่แบับั

32 บั ต

Page 12: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

12

ต�วอย์!างตารางรห�สื่แอสื่ก� ต�วอย์!างตารางรห�สื่แอสื่ก� (ASCII)(ASCII)

Page 13: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ย น!โค้$ด ( Unicode)

13

เป็�นรห�สื่ข้นาดี 16 บั ต จั(งสื่ามารถรองร�บัต�วอ�กษรไดี มากถ(ง

65536, (รห�สื่ ) ในร1ป็แบับัข้อง “ Code Point”

Page 14: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

14 แสื่ดีงย์1น โค ดี แสื่ดีงย์1น โค ดี (Unicode) (Unicode) ข้องต�วอ�กษรภาษาไทย์ข้องต�วอ�กษรภาษาไทย์

Page 15: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

15 แสื่ดีงย์1น โค ดี แสื่ดีงย์1น โค ดี (Unicode) (Unicode) ข้องต�วอ�กษรภาษาไทย์ข้องต�วอ�กษรภาษาไทย์

Page 16: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ย น!โค้$ด ( Unicode) (ตั�อั)

16

ป็2จัจั�บั�นในหลาย์ๆ ป็ระเทศไดี ม�การน*าเอาย์1น โค ดีมาใช้ ป็ระโย์ช้น�ร!วมก�น โดีย์การสื่ร างมาตรฐานข้องตนเองข้(8นมา ต�วอย์!างเช้!น มาตรฐาน ซึ่�เจัเค “ (CJK)” ซึ่(�งเก ดีข้(8นจัากการรวมต�วข้อง 3ป็ระเทศ ไดี แก! จั�น

(Chinese) ญ่��ป็�>น (Japan) และเกาหล� (Korean)

Page 17: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

17 ต�วอย์!างรห�สื่ย์1น โคดีข้องซึ่�เจัเค

Page 18: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ย น!โค้$ด ( Unicode) (ตั�อั)

18

ในการน*ารห�สื่ 10646ISO มาใช้ งานให สื่ามารถสื่!งข้ อม1ลผ่!านระบับัเคร�อข้!าย์ (ในระบับัเคร�อข้!าย์สื่!งข้ อม1ลไดี คร�8งละ 8 บั ต ) จัะต องท*าการเข้ ารห�สื่ (Encoding) ต�วอ�กษรซึ่(�งการเข้ ารห�สื่แบับัน�8 จัะร1 จั�กก�นในช้��อ ย์1ซึ่�เอสื่ “ (UCS)” แบั!งออกเป็�น -2 2 และ - 4UCS จัากน�8นรห�สื่ย์1น โค ดีจัะน*าไป็ใช้ ในการแป็ลงเป็�นร1ป็แบับัข้อง UCS (UCS Transformation Formats :

- 8UTS จัะใช้ สื่*าหร�บัเข้ ารห�สื่ - 2UCS เป็�นต นสื่*าหร�บัภาษาท��ย์1น โค ดีสื่ามารถรองร�บัไดี ม�ดี�งน�8 Latin, Greek,

Cyrillic, American, Hebrew, Arabic, Devanagari, Bengali, Gurmukhi, Gujarati, Oriya, Tamil,

Telugu, Kannada, Malayalam, Thai, Lao, Georgian, Tibetan, Chinese, Japanese และ Korean

Page 19: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ร ปแบบและล�กษณะขอังตั�วอั�กษร

19

ร1ป็แบับัต�วอ�กษร (Fonts) สื่ามารถจั�ดีแบั!งป็ระเภทต�วอ�กษรออกเป็�นหมวดีหม1!ไดี

3 ระดี�บั ไดี แก!ป็ระเภท (Category)ตระก1ล (Family)ช้��อเฉพิาะ (Face)

Page 20: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ป็ระเภท (Category)

20

เป็�นท��รวมข้องตระก1ล (Family) และช้��อเฉพิาะ (Face) ข้องแต!ละต�วอ�กษร (Font) สื่ามารถแบั!งออกไดี ดี�งน�8 Serif: เป็�นแบับัอ�กษรท��ใช้ เป็�นมาตรฐาน ในแต!ละต�วอ�กษรจัะ

ม�เสื่ นคล าย์ๆ ข้�ดีเหล��ย์ม - Sans Serif: เป็�นแบับัอ�กษรท��ค� นเคย์มากกว!า Serif เพิราะ

เป็�นท��น ย์มข้องผ่1 เข้�ย์นเว-บั ม�ร1ป็ร!างมนกลม และดี1สื่วย์งาม Monospaced: เป็�นแบับัอ�กษรท��ม�ข้นาดีความกว างข้องท�ก

ต�วอ�กษรเท!าก�นหมดี บัางท�เร�ย์กว!า Typewriter Fontเน��องจัากม�ล�กษณ์ะคล าย์ต�วอ�กษรท��ไดี จัากเคร��องพิ มพิ�ดี�ดี

Script: เป็�นแหล!งรวมข้องแบับัอ�กษรท�กช้น ดี ท��ม�ล�กษณ์ะพิ เศษต!างๆ เช้!น ม�จั�ดี ม�หาง เป็�นต น และม�ล�กษณ์ะข้องต�วอ�กษรท��คล าย์ก�บัลาย์ม�อ

Page 21: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ตระก1ล (Family)เป็�นหมวดีท��ย์!อย์ลงไป็จัาก

Category แต!ต�วอ�กษรท��อย์1!ในตระก1ลเดี�ย์วก�นจัะม�บัรรพิบั�ร�ษร!วมก�น

CategoryCategory FamilyFamily

SarifSarif Times, Century Times, Century Schoolbook, Schoolbook,

GaramondGaramond-Sans Serif-Sans Serif Helvetica, Arial, Helvetica, Arial,VerdanaVerdana

MonospacMonospaceded

Courier, Courier New Courier, Courier New

DecorativeDecorative Whimsy, Arribal, Whimsy, Arribal,BergellBergell

21

•ตารางแสื่ดีงความสื่�มพิ�นธุ�ระหว!าง Category และ Family

Page 22: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ช้��อเฉพิาะ (Face)เป็�นต�วอ�กษรท��

ย์!อย์ลงไป็จัาก Family

FamilyFamily FaceFace

Times Times222 22222 22

Regular, Italic Regular, Italic

ArialArial Regular, Bold, Regular, Bold,ItalicItalic

CourierCourier Regular, Oblique Regular, Oblique

WhimsyWhimsy Regular, Bold Regular, Bold

22

ตารางแสื่ดีงความสื่�มพิ�นธุ�ระหว!าง Family และ Face

Page 23: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การก*าหนดีล�กษณ์ะข้องต�วอ�กษร

23

การจั�ดีวางต*าแหน!ง (Alignment) เป็�นการก*าหนดีว ธุ�การเร�ย์งข้องอ�กษรหร�อข้ อความในแต!ละย์!อหน า ว!าต องการให ช้ ดีซึ่ าย์ ช้ ดีข้วา อย์1!ตรงก(�งกลาง หร�อจั�ดีซึ่ าย์ข้วาเสื่มอก�นภาย์ในท�8งดี านซึ่ าย์ ข้วา บัน และล!าง (Left, Top, Right And Bottom) สื่ามารถก*าหนดีระย์ะข้อบั หร�อระย์ะห!างระหว!างกล!องข้ อความ (Text Box) ก�บัข้ อความภาย์ใน รวมท�8งระย์ะเว นห!างข้องข้ อความก�บักรอบัท��ล อมรอบัอย์1!ไดี

เสื่ นข้อบั (Borders) เป็�นการก*าหนดีค!าให ก�บัเสื่ นข้อบัว!าต องการล�กษณ์ะข้องเสื่ นข้อบั สื่�ข้องเสื่ นข้อบั และความหน�กเบัาข้องเสื่ นข้อบัหร�อความหนาข้องเสื่ นข้อบัอย์!างไร

ข้นาดีข้องต�วอ�กษร (Font Size) จัะเร �มก*าหนดีต�8งแต!สื่!วนบันสื่�ดีข้องต�วอ�กษร (Serif)จันถ(งสื่!วนล!างข้องอ�กษรต�วพิ มพิ�เล-ก (เช้!น ต�ว g และ y ข้องต�วอ�กษรแบับั Helvetica,

Times และ Courier เป็�นต น ) ดี�งน�8นข้นาดีข้องต�วอ�กษรจั(งม ไดี หมาย์ความถ(งสื่!วนสื่1งหร�อความกว างข้องต�วอ�กษรเพิ�ย์งเท!าน�8น แต!จัะข้(8นอย์1!ก�บัช้!วงข้องต�วอ�กษรแต!ละแบับัดี วย์

สื่� (Colors) เป็�นสื่!วนก*าหนดีราย์ละเอ�ย์ดีเก��ย์วก�บัสื่�ข้องต�วอ�กษร สื่�พิ�8นหล�งข้องต�วอ�กษร และรวมถ(งการเล�อกร1ป็ภาพิ พิ�8นหล�งข้องต�วอ�กษร และการจั�ดีเร�ย์งต�วข้องร1ป็ภาพิพิ�8นหล�ง

ต�วอ�กษรหร�อข้ อความ เป็�นการก*าหนดีร1ป็แบับัข้องต�วอ�กษรหร�อข้ อความโดีย์ตรง ซึ่(�งสื่ามารถก*าหนดีความหนาข้องต�วอ�กษร ล�กษณ์ะข้องต�วอ�กษร เช้!น แบับัต�วอ�กษรธุรรมดีา

(Normal) แบับัต�วหนา (Bold) แบับัต�วเอ�ย์ง (Italic) หร�อแบับัท��ม�การข้�ดีเสื่ นใต (Underline) เป็�นต น เป็ล��ย์นอ�กษรต�วเล-กให เป็�นต�วใหญ่! ต�8งระย์ะห!างระหว!างอ�กษรและ

ระย์ะห!างระหว!างบัรรท�ดีไดี รวมท�8งจั�ดีการเร�ย์งอ�กษรท�8งย์!อหน าใช้ ช้ ดีข้อบัซึ่ าย์ ข้อบัข้วา อย์1!ก(�งกลาง หร�อต�ดีข้อบัซึ่ าย์ข้วาท�8งสื่องดี านไดี

Page 24: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การก*าหนดีล�กษณ์ะข้องต�วอ�กษร (ต!อ)

24

ต�วอ�กษรม�ให เล�อกใช้ มากมาย์หลาย์ร1ป็แบับั เช้!น ร1ป็แบับัอ�กษรท��เหมาะสื่*าหร�บัข้ อความภาษาไทย์ / อ�งกฤษ ไดี แก! MS

Sans Serif, Microsoft Sans Serif, Thonburiเป็�นต น สื่!วนร1ป็แบับัอ�กษรท��เหมาะสื่*าหร�บัข้ อความภาษาอ�งกฤษไดี แก! - Arial, Helvetica, Sans Serif เป็�นต น โดีย์สื่ามารถแสื่ดีงร1ป็แบับัข้องต�วอ�กษรเป็�น AngsanaUPC ท��ม�ล�กษณ์ะเป็�น ต�วอ�กษรธุรรมดีา ต�วอ�กษรหนา ต�วอ�กษรเอ�ย์ง ต�วอ�กษรธุรรมดีาข้�ดีเสื่ นใต ต�วอ�กษรหนาข้�ดีเสื่ นใต ต�วอ�กษรเอ�ย์งหนา และต�วอ�กษรเอ�ย์งหนาข้�ดีเสื่ นใต และม�ข้นาดีข้องต�วอ�กษรให เล�อกใช้ ต�8งแต! -8

72 จั�ดีต!อหน(�งต�วอ�กษร (หน(�งจั�ดีเท!าก�บั 0138.น 8ว)

Page 25: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

25

แสื่ดีงต�วอ�กษรแสื่ดีงต�วอ�กษร Cordia New Cordia New ล�กษณ์ะต!างๆล�กษณ์ะต!างๆ

ต�วอ�กษรธุรรมดีา ตั�วอั�กษรหนา ต�วอ�กษรเอ�ย์ง ต�วอ�กษรธุรรมดีาข้�ดีเสื่ นใต

Page 26: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

26 แสื่ดีงต�วอ�กษรข้นาดีต!างๆแสื่ดีงต�วอ�กษรข้นาดีต!างๆ

ข้นาดี 12 จั�ดี

ข้นาดี 1 4 จั�ดี

ข้นาดี 16 จั�ดี

ข้นาดี 18 จั�ดี

ข้นาดี 20 จั�ดี

ข้นาดี 24 จั�ดี

ข้นาดี 28 จั�ดี

ข้นาดี 32 จั�ดี

ข้นาดี 36 จั�ดี ข้นาดี 40 จั�ดี ข้นาดี 44 จั�ดี

ข้นาดี 48 จั�ดี ข้นาดี 54 จั�ดี

ข้นาดี 60 จั�ดี ข้นาดี 66 จั�ดี ข้นาดี 72 จั�ดี

Page 27: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

โครงสื่ร างข้องต�วอ�กษรภาษาอ�งกฤษ

27

Serif ค�อ เสื่ นท��ก*าหนดีสื่!วนบันสื่�ดีข้องต�วอ�กษร Mean Lineค�อ เสื่ นท��ก*าหนดีความสื่1งข้องอ�กษรต�วพิ มพิ�เล-ก Base Lineค�อ เสื่ นท��ก*าหนดีข้อบัล!างข้องต�วอ�กษร Point Sizeค�อ ช้!วงความสื่1งท�8งหมดีท��ต�วอ�กษรต องใช้ Cap Heightค�อ ความสื่1งข้องต�วอ�กษรต�วพิ มพิ�ใหญ่! Shoulderค�อ ช้!องว!างท��เผ่��อไว สื่*าหร�บัเว นบัรรท�ดี Set Widthค�อ ความกว างข้องต�วอ�กษร - X Height ค�อ ความสื่1งข้องต�วอ�กษรพิ มพิ�เล-ก Ascender ค�อ สื่!วนท��เลย์เสื่ น Mean Line ข้(8นไป็ดี านบัน ใช้ ก�บัอ�กษรต�วพิ มพิ�เล-ก Descender ค�อ สื่!วนท��เลย์เสื่ น Baseline ลงมาดี านล!าง ใช้ ก�บัอ�กษรต�วพิ มพิ�เล-กเช้!นก�น

แสื่ดีงโครงสื่ร างข้องต�วอ�กษรภาษาอ�งกฤษแสื่ดีงโครงสื่ร างข้องต�วอ�กษรภาษาอ�งกฤษ

Page 28: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การใชุ$งานตั�วอั�กษรและร ปแบบตั�วอั�กษรในม�ลตั!ม�เด�ย

28

ในการใช้ ต�วอ�กษรท��ม�ข้นาดีเล-กจัะต องช้�ดีเจันและอ!านง!าย์ข้ อความท��ต องการจัะเน นควรจัะม�ล�กษณ์ะท��แตกต!างจัากข้ อความ

ธุรรมดีา เช้!น ม�การข้�ดีเสื่ นใต ท*าเป็�นอ�กษรต�วเอ�ย์ง หร�อต�วหนา เป็�นต น

จั�ดีช้!องว!างข้องบัรรท�ดีให เหมาะสื่มและอ!านง!าย์จั�ดีข้นาดีข้องต�วอ�กษรตามความสื่*าค�ญ่ข้องข้ อความห�วข้ อท��ใช้ ต�วอ�กษรข้นาดีใหญ่!ควรม�ระย์ะช้!องไฟข้องต�วอ�กษรท��ให

ความร1 สื่(กท��ดี� ไม!ต ดี หร�อห!างก�นเก นไป็จั�ดีสื่�ข้องข้ อความให อ!านง!าย์ ม�ความแตกต!างจัากสื่�ข้องพิ�8นหล�ง เช้!น

ต�วอ�กษรสื่�ดี*าบันพิ�8นข้าวควรใช้ ว ธุ�การ - Anti Aliasing ก�บัห�วข้ อท��เป็�นอ�กษรกราฟBกข้นาดี

ใหญ่! (อ�กษรกราฟBกข้นาดีใหญ่!จัะม�รอย์หย์�กบัร เวณ์ข้อบัข้องต�วอ�กษรเก ดีข้(8น การป็ร�บัรอย์หย์�กดี�งกล!าวให เร�ย์บัดี1สื่วย์งามเร�ย์กว!า

-Anti Aliasing

Page 29: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

29

ความแตกต!างระหว!างต�วอ�กษรแบับัธุรรมดีาก�บัต�วอ�กษรท��ใช้ การข้จั�ดีรอย์หย์�ก

ต�วอ�กษรแบับัธุรรมดีาต�วอ�กษรท��ใช้ การข้จั�ดีรอย์หย์�ก

Page 30: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การใชุ$งานตั�วอั�กษรและร ปแบบตั�วอั�กษรในม�ลตั!ม�เด�ย (ตั�อั)

30

หากต องการจั�ดีข้ อความให อย์1!ก(�งกลางบัรรท�ดี ไม!ควรท*าต ดีต!อก�นหลาย์บัรรท�ดีจัะดี1ไม!สื่วย์งาม

ในภาษาอ�งกฤษควรใช้ อ�กษรพิ มพิ�ใหญ่! และพิ มพิ�เล-กอย์!างเหมาะสื่ม เน นความน!าสื่นใจัข้องข้ อความดี วย์การใสื่!แสื่งเงาให ต�วอ�กษร หร�อวางห�วข้ อ

หล�กๆ บันพิ�8นท��ว!าง ซึ่(�งเป็�นจั�ดีสื่นใจัท��มองเห-นไดี อย์!างช้�ดีเจัน สื่รรหาข้ อค ดี ค*าเสื่นอแนะ หร�อค*าต ช้มจัากหลาย์ๆ ความค ดีมาสื่ร�ป็เพิ��อเล�อกใช้

ต�วอ�กษรท��เหมาะสื่มท��สื่�ดีก�บัข้ อความท��ต องการ ใช้ ค*าศ�พิท�ท��ม�ความหมาย์น!าสื่นใจัและเข้ าใจัง!าย์ เพิ��อเช้��อมโย์งห�วข้ อก�บัเน�8อความ

เข้ าดี วย์ก�น ข้ อความสื่*าหร�บัเช้��อมโย์งบันหน าเว-บัเพิ-จั (Text Link) ควรม�ล�กษณ์ะต�วอ�กษรท��

เน นข้ อความ เช้!น ใสื่!สื่�สื่�น ข้�ดีเสื่ นใต ข้ อความ และควรหล�กเล��ย์งการเน นดี วย์สื่�เข้�ย์วบันพิ�8นสื่�แดีง เพิราะจัะท*าให ต�วอ�กษรม�สื่�สื่�นท��ไม!น!าอ!าน

เน นเน�8อความท��เป็�นจั�ดีสื่*าค�ญ่ดี วย์การท*าแถบัสื่�ท��ข้ อความน�8นๆ แต!ไม!ควรให เหม�อน Text Li nk หร�อข้ อความบันป็�>มกดี (Button)

Page 31: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เมน น(าทั่าง (Menus For Navigation)

31

การสื่ร างป็ฏิ สื่�มพิ�นธุ�ดี วย์ข้ อความท��เข้ าใจัง!าย์ จัะช้!วย์ให การต ดีต!อสื่��อสื่ารผ่!านคอมพิ วเตอร�สื่ะดีวกและรวดีเร-วย์ �งข้(8น เช้!น การจั�ดีให ม�ข้ อความภาย์ในกรอบัสื่��เหล��ย์มจั*านวนสื่องกรอบั กรอบัข้ อความแรกเข้�ย์นว!า ไป็หน าถ�ดีไป็ และอ�กกรอบัข้ อความท��สื่องเข้�ย์นว!า ย์ อน“ ” “กล�บัไป็หน าท��ผ่!านมา ท*าให ผ่1 ใช้ เข้ าใจัถ(งท ศทางท��จัะไป็ไดี อย์!างถ1กว ธุ�”

การสื่ร างราย์การให เล�อกบันเมน1ควรวางต*าแหน!งบันจัอภาพิให ง!าย์ต!อการมองเห-น และน!าสื่นใจัท��จัะต ดีตามข้ อม1ลต!างๆ ไดี อย์!างท��วถ(ง นอกจัากน�8 ควรท*าการเช้��อมโย์งในแต!ละหน าให สื่�มพิ�นธุ�ก�นและสื่ามารถกล�บัมาเร �มต นท��จัอภาพิหล�กไดี

Page 32: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ป�)มกดโตั$ตัอับ (Button For Interaction)

32

ในงานดี านม�ลต ม�เดี�ย์ ป็�>มกดี “ (Button) เป็�นกล!องข้องข้ อความแบับั 3ม ต สื่*าหร�บัสื่ร างเหต�การณ์�หน(�งเม��อคล กเมาสื่�ท��ป็�>มกดี ซึ่(�งการออกแบับัเว-บัไซึ่ต�น�8น ข้ อความและภาพิกราฟBกสื่ามารถใช้ เป็�นป็�>มกดีไดี ควรน*าหล�กการเล�อกใช้ และจั�ดีวางข้ อความตามท��ไดี กล!าวไป็แล วข้ างต นมาป็ระย์�กต�ใช้ งานร!วมก�บัป็�>มกดี

โป็รแกรมท��เป็�นเคร��องม�อในการสื่ร างป็�>มกดีสื่*าหร�บังานม�ลต ม�เดี�ย์ และเอกสื่าร Html หลาย์โป็รแกรมดี วย์ก�น สื่ามารถเป็ล��ย์นสื่ถานะข้องป็�>มกดีตามการท*างานโดีย์อ�ตโนม�ต แต!ผ่1 สื่ร างงานจัะต องท*าการป็ร�บัแต!งข้ อความบันป็�>มกดีให สื่�มพิ�นธุ�ก�บัการท*างานข้องป็�>มกดีเอง

การวางข้ อความบันป็�>มกดีจัะต องม�ข้นาดีต�วอ�กษรท��เหมาะสื่มก�บัข้นาดีข้องป็�>มกดี เม��อวางข้ อความแล ว ต องม�ระย์ะห!างระหว!างข้อบัข้องป็�>มกดีก�บัข้ อความท��ไม!กว างหร�อช้ ดีข้อบัจันเก นไป็ และสื่�สื่�นท��ใช้ จัะต องมองดี1แล วสื่บัาย์ตา น!าอ!าน และช้�ดีเจัน นอกจัากน�8การท*าป็�>มกดีเป็�นร1ป็ภาพิพิร อมค*าอธุ บัาย์จัะช้!วย์ท*าให ง!าย์และม�ความน!าสื่นใจัมากย์ �งข้(8น

Page 33: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

33

เว-บัไซึ่ต�ท��ม�สื่!วนป็ระกอบัข้องราย์การเล�อกน*าทางและป็�>มกดีโต ตอบั

ราย์การเล�อกน*าทาง ป็�>มกดี

โต ตอบั

Page 34: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การจั�ดวางข$อัค้วามส(าหร�บการอั�าน (Fields For Reading)

34

จั�ดีวางข้ อความสื่*าค�ญ่ๆ แต!ละห�วข้ อให อย์1!บันจัอภาพิเดี�ย์วก�นแบั!งเน�8อความอธุ บัาย์เป็�นสื่!วนๆ แย์กย์!อย์ก�นไป็ในแต!ละย์!อหน าใช้ ต�วอ�กษรท��อ!านง!าย์ และม�ข้นาดีข้องต�วอ�กษรไม!ใหญ่!หร�อเล-กจัน

เก นไป็เช้��อมโย์งความสื่�มพิ�นธุ�ข้องข้ อความให ง!าย์ต!อการเข้ าถ(งข้ อม1ลท��

ต องการไดี อย์!างรวดีเร-ว

Page 35: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การก(าหนดร ปแบบขอังเอักสาร (Format Document)

35

เอกสื่ารในแนวต�8ง (Portrait Document)

เป็�นการก*าหนดีเอกสื่ารหร�อกระดีาษในแนวต�8งให ม�ความสื่1งมากกว!าความกว าง ท*าให ไม!สื่ามารถอ!านข้ อความภาย์ในเอกสื่ารท�8งหน ากระดีาษบันจัอภาพิคอมพิ วเตอร�ท��ม�ความละเอ�ย์ดี 64048

0 พิ กเซึ่ลไดี เอกสื่ารท��จั�ดีวางแบับั Portrait จัะเป็�นกระดีาษข้นาดี 85 1. X

1 น 8ว หร�อกระดีาษ A4ซึ่(�งม�ข้นาดี 827 1. X

169. น 8วต�วอย์!างการพิ มพิ�เอกสื่ารในต�วอย์!างการพิ มพิ�เอกสื่ารใน

แนวต�8งแนวต�8ง

Page 36: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

การก(าหนดร ปแบบขอังเอักสาร (ตั�อั)

36

เอกสื่ารในแนวนอน (Landscape

Document) เป็�นการก*าหนดีกระดีาษในแนวนอนให ม�ข้นาดีดี านกว างมากว!า ดี านสื่1ง เท�ย์บัไดี ก�บัจัอภาพิคอมพิ วเตอร�ท� �วไป็ท��ม�ความสื่1ง 480 พิ กเซึ่ล กว าง

640 พิ กเซึ่ล แต!การป็ร�บัจัอภาพิไป็ท��ความละเอ�ย์ดี 1024 X

768 พิ กเซึ่ล หร�อ 1 280 1024X

พิ กเซึ่ล จัะสื่ามรถแสื่ดีงเอกสื่ารแบับั Portrait ไดี ภาย์ในจัอภาพิเดี�ย์ว ต�วอย์!างการพิ มพิ�เอกสื่ารในแนวต�วอย์!างการพิ มพิ�เอกสื่ารในแนว

นอนนอน

Page 37: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ส�ญล�กษณ,และภาพส�ญล�กษณ, (Symbols And Icon)

37

สื่�ญ่ล�กษณ์� (Symbols) เป็�นการสื่ร างภาพิแทนข้ อความต!างๆ เพิ��อบั!งบัอกการท*างานข้องคอมพิ วเตอร�ในข้ณ์ะน�8นหร�อใช้ เต�อนเพิ��อบัอกสื่ �งท��ควรกระท*า ต�วอย์!างเช้!น เม��อม�ร1ป็นาฬิ กาทราย์ป็รากฏิบันจัอภาพิคอมพิ วเตอร� หมาย์ถ(งให รอการท*างานข้องเคร��องคอมพิ วเตอร�จันกว!าร1ป็นาฬิ กาทราย์จัะหาย์ไป็ เป็�นต น อย์!างไรก-ตาม ผ่1 ใช้ จัะต องศ(กษาและท*าความเข้ าใจัความหมาย์ข้องสื่�ญ่ล�กษณ์�ต!างๆ เพิ��อให ใช้ งานไดี อย์!างเหมาะสื่ม

สื่*าหร�บังานดี านม�ลต ม�เดี�ย์ม�กจัะใช้ สื่�ญ่ล�กษณ์�ร!วมก�บัข้ อความ เพิ��อบัอกความหมาย์ข้องสื่�ญ่ล�กษณ์�น�8นๆ สื่!วน ไอคอน “ (Icon)” หมาย์ถ(งภาพิสื่�ญ่ล�กษณ์�ท��ใช้ ใสื่!คอมพิ วเตอร� เช้!น ร1ป็ถ�งข้ย์ะ และร1ป็นาฬิ กาทราย์ เป็�นต น

การใช้ สื่�ญ่ล�กษณ์�แทนการสื่!งข้ อความเพิ��อการต ดีต!อสื่��อสื่ารระหว!างก�น อาจัเป็�นไดี ท� 8งภาพิน �ง ไอคอน หร�อภาพิเคล��อนไหว ท�8งน�8เพิ��อสื่ร างจั�ดีสื่นใจัและช้!วย์ให ง!าย์ต!อการจัดีจั*า ดี�งน�8นในการผ่ล ตงานดี านม�ลต ม�เดี�ย์ควรจัะม�ท� 8งข้ อความและสื่�ญ่ล�กษณ์�ต!างๆ รวมอย์1!ดี วย์ก�นอย์!างกลมกล�นและเหมาะสื่ม

สื่�ญ่ล�กษณ์�ในงานดี านม�ลต ม�เดี�ย์จัะม�ร1ป็แบับัและความหมาย์ป็ระจั*าต�ว ซึ่(�งบัางสื่�ญ่ล�กษณ์�ม�การใช้ ก�นอย์!างแพิร!หลาย์จันท�กคนเข้ าใจัความหมาย์ไดี เป็�นอย์!างดี� นอกจัากน�8 การศ(กษาความหมาย์ข้องสื่�ญ่ล�กษณ์�จัะใช้ ความร1 สื่(กเข้ าใจัไดี ง!าย์กว!าการศ(กษาจัากภาษาเข้�ย์น จัากต�วอย์!างร1ป็ท�� 515. จัะแสื่ดีงสื่�ญ่ล�กษณ์�ท��ใช้ งานก�นบั!อย์ และคนสื่!วนใหญ่!จัะเข้ าใจัความหมาย์ไดี เป็�นอย์!างดี� สื่!วนร1ป็ท�� 516. แสื่ดีงสื่�ญ่ล�กษณ์�ข้องเดี�อนท�8ง 12 ข้องป็ระเทศทางตะว�นตก ซึ่(�งม�เพิ�ย์งเฉพิาะบัางคนบัางกล�!มเท!าน�8นท��สื่ามารถแป็ลความหมาย์ข้องสื่�ญ่ล�กษณ์�เหล!าน�8ไดี ว!า แต!ละภาพิหมาย์ถ(งเดี�อนอะไร ในข้ณ์ะท��คนกล�!มอ��นอาจัไม!เข้ าใจัความหมาย์เลย์ก-ไดี

Page 38: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

38

แสื่ดีงสื่�ญ่ล�กษณ์�และภาพิสื่�ญ่ล�กษณ์� แสื่ดีงสื่�ญ่ล�กษณ์�และภาพิสื่�ญ่ล�กษณ์� ((ไอคอนไอคอน ) ) ท��ใช้ ท��วไป็ท��ใช้ ท��วไป็

แสื่ดีงสื่�ญ่ล�กษณ์� แสื่ดีงสื่�ญ่ล�กษณ์� 12 12 ราศ�ราศ�

Page 39: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ภาพส�ญล�กษณ,งานดี าน

ม�ลต ม�เดี�ย์ย์�งม�การใช้ งานสื่�ญ่ล�กษณ์�ไม!มากน�ก ซึ่(�งสื่�ญ่ล�กษณ์�ท��ถ1กน*าไป็ใช้ สื่!วนใหญ่!จัะม�ความหมาย์เป็�นสื่ากล ดี�งต�วอย์!างในตารางแสื่ดีงให เห-นถ(งสื่�ญ่ล�กษณ์�ในร1ป็แบับัต!างๆ ตามแต!ว�ตถ�ป็ระสื่งค�ข้องการใช้ งาน

ว�ตถ�ป็ระสื่งค�ข้องการใช้ งาน สื่�ญ่ล�กษณ์�

ความหมาย์

การต ดีต!อสื่��อสื่ารระหว!างก�นบันระบับัเคร�อข้!าย์

:-) ย์ 8มธุรรมดีา

;-)ย์ 8มและข้ย์ บัตา

หน(�งข้ าง

:-|แสื่ดีงอาการไม!

สื่นใจั

:->อาการกร�Dดีอย์!าง

แรง:-( ก*าล�งหน าบั(8ง

8-)แสื่ดีงอาการต��น

เต น

:-Dอาการป็ระหลาดี

ใจั:-/ อาการงง ฉงน

การเล!นช้มว�ดี ท�ศน� เล!นเพิลง หย์�ดี น*าแผ่!นออก เล!นเพิลงถ�ดีไป็

เล!นเพิลงก!อนหน า

กรอไป็ข้ างหน า กรอกล�บั

39

Page 40: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เค้ร��อังม�อัส(าหร�บสร$างและแก$ไขร ปแบบขอังตั�วอั�กษร

40

เคร��องม�อท��ใช้ ในการสื่ร างร1ป็แบับัและล�กษณ์ะข้องต�วอ�กษรน�8น จัะใช้ สื่*าหร�บัสื่ร างล�กษณ์ะพิ เศษท��เป็�นเอกล�กษณ์�เฉพิาะข้องแต!ละงานท��ผ่ล ตหร�อสื่ร างเคร��องหมาย์การค า ซึ่(�งม�มากมาย์หลาย์โป็รแกรม เช้!น ResE dit, Fontographer และ FontM ongerเป็�นต น สื่*าหร�บัใช้ งานบันเคร��องแมคอ นทอช้ -Type D

esigner สื่*าหร�บัใช้ งานบันว นโดีว� และ FontChame leon ท��สื่ามารถใช้ งานบันเคร��องแมคอ นทอช้และระบับั

ป็ฏิ บั�ต การว นโดีว�ไดี

Page 41: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

41 การออกแบับัต�วอ�กษรดี วย์โป็รแกรม การออกแบับัต�วอ�กษรดี วย์โป็รแกรม FontographerFontographer

Page 42: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เค้ร��อังม�อัส(าหร�บสร$างและแก$ไขร ปแบบขอังตั�วอั�กษร (ตั�อั)

42

ในการสื่ร างต�วอ�กษรให สื่วย์งาม จัะต องใช้ เคร��องม�อท��ม�ความสื่ามารถในการย์!อข้ย์าย์ ป็ร�บัเฉดีสื่� ป็ร�บัแสื่งเงา และสื่ามารถป็ร�บัข้อบัข้องต�วอ�กษรให เร�ย์บั ซึ่(�งการสื่ร างต�วอ�กษรดี วย์โป็รแกรมกราฟBกต!างๆ สื่ามารถเล�อกเอาร1ป็แบับัอ�กษรท��โป็รแกรมไดี จั�ดีเตร�ย์มไว มาดี�ดีแป็ลงใช้ งานและป็ร�บัป็ร�งเป็�นต�วอ�กษรกราฟBกท��สื่วย์งามไดี

โป็รแกรมเก��ย์วก�บังานทางดี านกราฟBกมากมาย์ ต�วอย์!างเช้!น โป็รแกรม Photoshop สื่*าหร�บัใช้ สื่ร างและป็ร�บัแต!งต�วอ�กษรให เก ดีความสื่วย์งามไดี อย์!างง!าย์ดีาย์ ไม!ว!าจัะเป็�นเร��องข้องการจั�ดีแต!งร1ป็ล�กษณ์� แสื่งเงา หร�อแม แต!เฉดีสื่�บันพิ�8นต!างๆ

Page 43: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

43 การป็ร�บัแต!งข้ อความดี วย์โป็รแกรม การป็ร�บัแต!งข้ อความดี วย์โป็รแกรม PhotoshopPhotoshop

Page 44: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

เค้ร��อังม�อัส(าหร�บสร$างและแก$ไขร ปแบบขอังตั�วอั�กษร (ตั�อั)

44

ย์�งม�โป็รแกรมสื่*าหร�บัออกแบับัอ�กป็ระเภทหน(�งท�สื่ามารถท*าให ต�วอ�กษรม�ความล(ก และม�มมองกระทบัข้องแสื่งไดี หลาย์ท ศทางในล�กษณ์ะข้องภาพิ 3 ม ต ไดี แก!โป็รแกรม Broderbund’ s TypeS tyler, RayD ream’s Adddepth 2, Cool 3d,

Vertigo 3d และ - Plug Ins ข้องโป็รแกรม Photoshopเป็�นต น ซึ่(�งโป็รแกรมเหล!าน�8นอกจัากจัะม�ค�ณ์สื่มบั�ต ในการป็ร�บัแต!งข้ อความหร�อต�วอ�กษรให เก ดีความสื่วย์งามและน!าสื่นใจัมากย์ �งข้(8นแล วย์�งไดี เพิ �มข้�ดีความสื่ามารถในการป็ร�บัแต!งพิ�8นผ่ ว เฉดีสื่� แสื่งตกกระทบั และการหม�นรอบัไดี ท��วท ศทางไดี อ�กดี วย์ เหมาะสื่*าหร�บัการน*าเสื่นอช้ 8นงานท��ต องการความละเอ�ย์ดีสื่1งดี านการโฆษณ์าสื่ นค าและบัร การ หร�อจั�ดีท*าเป็�นสื่��อการเร�ย์นการสื่อนในล�กษณ์ะเสื่ม�อนจัร ง (Virtual Reality)

Page 45: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

45แสื่ดีงข้�8นตอนเร �มต นการสื่ร างต�วอ�กษรดี วย์โป็รแกรม แสื่ดีงข้�8นตอนเร �มต นการสื่ร างต�วอ�กษรดี วย์โป็รแกรม

COOL 3DCOOL 3D

Page 46: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

46การป็ร�บัแต!งและแก ไข้ต�วอ�กษรดี วย์โป็รแกรม การป็ร�บัแต!งและแก ไข้ต�วอ�กษรดี วย์โป็รแกรม COOL COOL

3D3D

Page 47: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

47ผ่ลล�พิธุ�ข้องต�วอ�กษรท��ไดี ร�บัการแก ไข้ดี วย์โป็รแกรม ผ่ลล�พิธุ�ข้องต�วอ�กษรท��ไดี ร�บัการแก ไข้ดี วย์โป็รแกรม

COOL 3DCOOL 3D

Page 48: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

48ผ่ลล�พิธุ�ข้องต�วอ�กษรตามร1ป็แบับัเป็ลวไฟท��เล�อกไว ดี วย์ผ่ลล�พิธุ�ข้องต�วอ�กษรตามร1ป็แบับัเป็ลวไฟท��เล�อกไว ดี วย์

โป็รแกรม โป็รแกรม COOL 3DCOOL 3D

Page 49: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ร ปแบบขอังตั�วอั�กษรทั่��ใชุ$บนเว/บ

49

ม�หลากหลาย์ร1ป็แบับั แต!ท��ม�กน ย์มน*ามาป็ระย์�กต�ใช้ ม�ดี�งน�8

Cascading Style Sheet (Css) Imported Text (Txt) Portable Document Format (Pdf)

Page 50: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ร ปแบบขอังตั�วอั�กษรทั่��ใชุ$บนเว/บ (ตั�อั)

50

Cascading Style Sheet (Css) เป็�นไฟล�ท��เก-บัข้ อม1ลการก*าหนดีร1ป็แบับัและล�กษณ์ะข้องต�วอ�กษร (Style Sheet) เพิ��อน*ามาใช้ ก�บัเว-บัเพิ-จัซึ่(�งเป็�นค�ณ์สื่มบั�ต ใหม!ท��ก*าหนดีข้(8นโดีย์ World Wide Web Consortium ไม!เพิ�ย์งแต!สื่ามารถท��จัะก*าหนดีร1ป็แบับัอ�กษรท��ม�ความสื่ล�บัซึ่�บัซึ่ อนไดี มากย์ �งข้(8นแล ว เช้!น สื่!วนข้องห�วเร��อง ห�วข้ อ และย์!อหน า เป็�นต น ย์�งรวมไป็ถ(งความสื่ามารถในการจั�ดีวางในต*าแหน!งข้องร1ป็แบับัต�วอ�กษรไดี อย์!างสื่ะดีวกและเป็�นระเบั�ย์บั โดีย์ท��ค�ณ์สื่มบั�ต ข้องไฟล�ช้น ดีน�8จัะม�นามสื่ก�ลเป็�น *.Css นอกจัากน�8 ย์�งม�สื่!วนป็ระกอบัหล�กสื่*าค�ญ่อย์1! 2 สื่!วน ไดี แก! 1สื่!วนท��เป็�นต�วเล�อก (Selector) หมาย์ถ(งสื่!วนท��อย์1!ก!อนหน าเคร��องหมาย์วงเล-บัเป็Bดี เช้!น H1 Color :Red เป็�นต น และ 2) สื่!วนท��อย์1!ภาย์ใต เคร��องหมาย์วงเล-บัป็5กกา สื่*าหร�บัร1ป็แบับัในการใช้ งานม�ดี�งน�8 I nl i ne Css เป็�นการก*าหนดีร1ป็แบับัและล�กษณ์ะข้องต�วอ�กษรให ก�บัข้ อความ

วรรคตอน หร�อย์!อหน าโดีย์เฉพิาะ Embeded Css เป็�นการก*าหนดีร1ป็แบับัและล�กษณ์ะข้องต�วอ�กษรให ก�บัเว-บัเพิ-จัใน

แต!ละหน า Link Css เป็�นการก*าหนดีร1ป็แบับัและล�กษณ์ะข้องต�วอ�กษรให ก�บัท�8งเว-บัเพิ-จั

ท�8งหมดี

Page 51: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ร ปแบบขอังตั�วอั�กษรทั่��ใชุ$บนเว/บ (ตั�อั)

51

Imported Text (Txt) เป็�นเท-กซึ่�ไฟล� (Text File) ท��น*าเข้ าข้ อม1ลมาจัากโป็รแกรม Editor เช้!น โป็รแกรม

- Notepad, Ms Word หร�อ Word Processingเป็�นต น แล วมาแสื่ดีงผ่ลเป็�นเว-บัเพิ-จั

Page 52: Character การสอนครั้งที่ 3   ตัวอักษรและชุดตัวอักษร 2

ร ปแบบขอังตั�วอั�กษรทั่��ใชุ$บนเว/บ (ตั�อั)

52

Portable Document Format (Pdf) เป็�นไฟล�เอกสื่ารอ เล-กทรอน กสื่� (Electronic Document) อ�กช้น ดีหน(�งท��ก*าล�งไดี ร�บัความน ย์มใช้ งานก�นอย์!างแพิร!หลาย์ ท�8งน�8 เน��องจัากค�ณ์ล�กษณ์ะท��โดีเดี!นเฉพิาะต�ว ไดี แก!สื่น�บัสื่น�นมาตรฐานการบั�บัอ�ดีข้ อม1ลต!างๆ เช้!น JPEG, CCITT Group

3 4, CCITT Group , Flate เป็�นต น ท*าให ไฟล�ช้น ดีน�8ข้นาดีเล-กมากเม��อเป็ร�ย์บัเท�ย์บัก�บัไฟล�เอกสื่ารป็ระเภทป็ระมวลผ่ลค*า (Word Process

ing) ดี วย์ก�นรองร�บัการท*างานร!วมก�บัระบับัป็ฏิ บั�ต การอ��นๆ ไดี อย์!างเป็�นอ สื่ระ ไม!ว!าจัะ

ท*างานอย์1!บันระบับัว นโดีว� (Windows) ระบับัแมคอ นทอซึ่ (Macintosh) หร�อแม แต!บันระบับัย์1น กสื่� (Unix) ก-ตาม

สื่ามารถแป็ลงร1ป็ภาพิ ข้ อความ หร�อแม แต!ว�ดี�โอให อย์1!ในร1ป็แบับัเอกสื่ารอ เล-กทรอน กสื่� (.Pdf) ไดี เหม�อนต นฉบั�บัจัร ง นอกจัากน�8 ย์�งสื่ามารถเป็Bดีอ!านไฟล�เหล!าน�8ผ่!านทางเว-บับัราวเซึ่อร�บันเคร�อข้!าย์อ นเทอร�เน-ตหร�ออ นทราเน-ตไดี อย์!างไม!ม�ป็2ญ่หาใดีๆ