21
บบบบบ 2 บบบบบบบบบบบบบบบบบบบบบบบบบ (Character and Fonts) ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตต ตตตตตต ตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตต ตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตต ตตตตตตตตต ตตตตตตตต ต บบบบบบบบบบบบบบบบบบบบบบบ ตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ต ตตตตต ตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตต ตตตตตตตตตตตตตตต ตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตต ตตตตตต ตตตตตตต ตตตตตตตต ตตตตตตต ตตตตตตตตตตตต ตตตตตตต ตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตตต ตตตตตตตตตต (Text Massaging) ตตตตตตตตต 2.1 (ต) ตตต (ต) ตตตตตตตตต

บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

  • Upload
    others

  • View
    4

  • Download
    0

Embed Size (px)

Citation preview

Page 1: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

บทท 2ตวอกษรและรปแบบตวอกษร (Character and

Fonts)

ตวอกษรเปนสญลกษณแทนคำ�พดหรอคว�มนกคดของมนษย เพอใชในก�รสอส�รระหว�งคนตงแตสองคนขนไป ซงก�รใชตวอกษรมม�ตงแตสมยอ�รยธรรมเมดเตอรเรเนยน เมโสโปเตเมย อยปตโบร�ณ สมยนนยงคงมก�รแบงชนชนวรรณะ ซงชนวรรณะทเปนพระจะไดรบอนญ�ตใหอ�น เขยนขอคว�มและเขยนสญลกษณได โดยจะบนทกขอคว�มเปนอกษรภ�พ ดงทมก�รคนพบต�มผนงถำ� ผนงพร�มด หรอโบร�ณสถ�นต�ง ๆ

แนะนำ�เกยวกบตวอกษรในอดตสงคมของมนษย ไดมก�รใชขอคว�มหรอตวอกษรเปนภ�ษ�สอ

กล�งตดตอระหว�งกน โดยผ�นท�งก�รอ�นหรอบนทกเรองร�วต�ง ๆ ตอม� ไดมก�รนำ�ตวอกษรม�ประยกตใชรวมกบคอมพวเตอรดวยกระบวนก�รเรยบเรยง ประมวลผล จดเกบและนำ�ม�ใชง�น ซงไดกอใหเกดประโยชนในทกแวดวงธรกจ ไมว�จะเปนก�รจดทำ�สอสงพมพและโฆษณ� เชน ร�ยง�น โบชวร แบบฟอรม หนงสอ และพจน�นกรม เปนตน หรอแมแตก�รสอส�รดวยขอคว�มทเปนเทกซ (Text Massaging) ดงภ�พท 2.1 (ก) และ (ข) ต�มลำ�ดบ

ภ�พท 2.1 (ก) แสดงขอคว�มหรอตวอกษรทนำ�ม�ประยกตใชในรปแบบสอสงพมพ

Page 2: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ทม� : www.triobiz.com, www.2poto.com, www.cn.co.th

ภ�พท 2.1 (ข) แสดงขอคว�มหรอตวอกษรทนำ�ม�ประยกตใชในรปแบบเทกซ (Text) สำ�หรบใชตดตอสอส�ร

ทม� : http://trials2.pocketgear.com, http://ecx.images-amazon.com, www.bkkbell.com

จนกระทง ไดมก�รเรมนำ�ตวอกษรม�ใช และเผยแพรผ�นชองท�งก�รสอส�รบนระบบเครอข�ยอนเตอรเนตในรปแบบภ�ษ�เอชทเอมแอล (HTML : Hypertext Markup Language) ซงปจจบนกำ�ลงไดรบคว�มนยมใชง�นกนอย�งแพรหล�ยดงภ�พท 2.2

ภ�พท 2.2 ภ�พแสดงโครงสร�งภ�ยในและรปแบบท�งก�ยภ�พ

ของเอกส�ร HTMLทม� : www.cmssociety.com

ม�ตรฐ�นของตวอกษรในก�รตดตอสอส�รเพอก�รแลกเปลยนขอมลข�วส�รระหว�ง

กน มกจะเกดปญห�เกยวกบตวอกษรหรอขอคว�มทปล�ยท�งไม

2-2

Page 3: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ส�ม�รถแสดงผลไดอย�งถกตอง ทงนเรองจ�กรปแบบและคณลกษณะของตวอกษรมคว�มแตกต�งกน อ�จเปนไปไดทไมไดตดตงตวอกษรหรอใชระบบภ�ษ�ทต�งกน ดงนนเพอเปนก�รแกไขปญห�จงไดมก�รกำ�หนดม�ตรฐ�นของตวอกษร แบงเปน 2 ชนด คอ แอสก (ASCII) และยนโคด (Unicode)

แอสกเปนรหสขน�ด 7 บต ทำ�ใหส�ม�รถรองรบตวอกษร (A-Z ทงตวพมพเลกและพมพใหญ) ตวเลข (0-9) และสญลกษณพเศษต�งๆ ได 128 รหส รหสแอสกพฒน�ขนม�เพอรองรบภ�ษ�องกฤษ

ยนโคด เปนรหสทพฒน�ขนเพอใชง�นเปนส�กล เพอรองรบตวอกษรและสญลกษณแบบต�งๆ ของแตละภ�ษ� ซงเปนรหสขน�ด 16 บต จงส�ม�รถรองรบตวอกษรไดม�กถง 65,536 รหส

รปแบบและลกษณะของตวอกษร ประเภท (Category) เปนทรวมของตระกล (Family)

และชอเฉพ�ะ (Face) ของแตละตวอกษร (Font) ส�ม�รถแบงออกไดดงน

1. Serif เปนแบบอกษรทใชเปนม�ตรฐ�น ในแตละตวอกษรจะมเสนคล�ยๆ ขด-เหลยม

2. Sans-Serif เปนแบบอกษรทนยมเขยนเวบ มรปร�งมนกลม และดสวยง�ม

3. Monospaced เปนแบบอกษรทมขน�ดคว�มกว�งทกตวอกษรเท�กนหมด คล�ยเครองพมพดด

4. Script เปนแหลงรวมของแบบอกษรทกชนด ทมลกษณะพเศษต�งๆ ลกษณะคล�ยล�ยมอ

2-3

Page 4: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ตระกล (Family) เปนหมวดทยอยลงไปจ�ก ประเภท ต�ร�งท 2.1 แสดงคว�มสมพนธระหว�ง ตระกล และ ประเภท

ต�ร�งท 2.1 แสดงคว�มสมพนธระหว�ง ประเภท และ ตระกลประเภท ตระกล

Serif Times, GaramondSans-Serif Arial, VerdanaMonospaced Courier, Courier New

ชอเฉพ�ะ (Face) เปนตวอกษรทส�ม�รถแสดงคว�มสมพนธระหว�ง ตระกล และ ชอเฉพ�ะ ดงต�ร�งท 2.2

ต�ร�งท 2.2 แสดงคว�มสมพนธระหว�ง ตระกล และ ชอเฉพ�ะ

ตระกล ชอเฉพ�ะTimes Roman, ItalicArial Regular, Bold, ItalicCourier Regular

ก�รกำ�หนดลกษณะของตวอกษร ส�ม�รถแสดงไดดงน ก�รจดว�งตำ�แหนง (Alignment) เปนก�รกำ�หนดวธ

ก�รเรยงของอกษรหรอขอคว�มในแตละยอหน� เสนขอบ (Borders) เปนก�รกำ�หนดค�ให

กบเสนขอบว�ตองก�รลกษณะของเสนขอบ

ขน�ดของตวอกษร (Font Size) จะเรมกำ�หนดตงแตสวนบนสดของตวอกษร (Serif) จนถงสวนล�งของอกษรตวพมพเลก

ส (Colors) เปนสวนกำ�หนดสของตวอกษร

ตวอกษรหรอขอคว�ม (Text) เปนก�รกำ�หนดรปแบบของตวอกษรหรอขอคว�มโดยตรง ซงส�ม�รถกำ�หนด

2-4

Page 5: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

คว�มหน�ของตวอกษร ลกษณะของตวอกษร เชน แบบตวอกษรธรรมด� ตวหน� ตวเอยง เปนตน

ก�รใชง�นตวอกษร1. ตวอกษรทมขน�ดเลกจะตองชดเจนและอ�นง�ย2. ขอคว�มทควรเนนควรมลกษณะแตกต�งจ�กธรรมด�3. จดชองว�งใหเหม�ะสมและอ�นง�ย4. จดขน�ดตวอกษรต�มคว�มสำ�คญของขอคว�ม5. หวขอทใชตวอกษรใหญควรเวนระยะชองไฟ ทใหคว�มรสกทไมตด

กน หรอห�งเกนไป6. จดสขอคว�มใหอ�นง�ย7. ก�รจดกงกล�งบรรทด ไมควรทำ�ตดตอกนหล�ยบรรทด8. ภ�ษ�องกฤษใชตวพมพใหญเลกใหเหม�ะสม9. เนนจดสนใจใสแสงและเง� หรอว�งบนพนท ๆ เปนจดสนใจ10. ใชคำ�ศพททเข�ใจง�ย11. เนนขอคว�มทเปนจดสำ�คญดวยก�รทำ�แถบสทขอคว�มนน ๆ

แตไมควรใหเหมอน Text Linksนอกจ�กนยงมวธก�รนำ�รปแบบตวอกษรม�ประยกตใชใน

มลตมเดย ไดแก เมนนำ�ท�ง (Menus for Navigation) ปมกดโตตอบ (Button for Interaction) สญลกษณและภ�พสญลกษณ (Symbols and Icons)1. เมนนำ�ท�ง

ก�รปฏสมพนธ คอ ลกษณะก�รโตตอบระหว�งผใชกบเครองคอมพวเตอร โดยพมพผ�นแปนพมพ คลกเม�ส หรอก�รสมผสทจอภ�พ

เชน ก�รสร�งปฏสมพนธดวยขอคว�มทเข�ใจง�ย จะชวยใหก�รตดตอสอส�รผ�นคอมพวเตอรสะดวกและรวดเรว เชน ก�รจด

2-5

Page 6: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ใหมขอคว�มภ�ยในกรอบสเหลยมว� ไปหน�ถดไป และ ยอนไป“ ” “หน�ทผ�นม� ทำ�ใหผใชเข�ใจถงทศท�งทจะไปไดอย�งถกวธ”

ก�รสร�งร�ยก�รใหเลอกควรว�งในตำ�แหนงทง�ยตอก�รมองเหน และควรทำ�ก�รเชอมโยงแตละหน�ใหสมพนธกนและส�ม�รถกลบม�เรมตนทจอภ�พหลกได2. ปมกดโตตอบ

เปนกลองขอคว�มแบบ 3 มต สำ�หรบสร�งเหตก�รณใดเหตก�รณหนง เมอคลกเม�สทปมกด 3. ก�รจดว�งขอคว�มสำ�หรบก�รอ�น

เนองจ�กก�รอ�นขอคว�มจ�กหนงสอ หรอกระด�ษจะสร�งคว�มรสกทดกว�ก�รอ�นจ�กจอภ�พคอมพวเตอร ดงนน ก�จดว�งขอคว�มบนจอภ�พคอมพวเตอรควรคำ�นงถงคว�มเหม�ะสม เพอใหอ�นง�ยและสบ�ยต� ไดแก

จดว�งขอคว�มสำ�คญ ๆ แตละหวขอใหอยบนจอภ�พเดยวกน

แบงเนอคว�มอธบ�ยเปนสวน ๆ แยกยอยกนไปในแตละยอหน�

ใชตวอกษรทอ�นง�ย และมขน�ดของตวอกษรไมใหญหรอเลกจนเกนไป

เชอมโยงคว�มสมพนธของขอคว�มใหง�ยตอก�รเข�ถงขอมลทตองก�รไดอย�งรวดเรว

4. ก�รกำ�หนดรปแบบของเอกส�รก�รกำ�หนดรปแบบของเอกส�รส�ม�รถจดทำ�ไดทงทเปนแบบแนวตง และแบบแนวนอน

เพอประโยชนสำ�หรบก�รพมพออกท�งเครองพมพ และก�รจดทำ�เอกส�รใหอยในรปไฟลเอกส�รอเลกทรอนกส 5. เอกส�รภ�ษ� HTML

2-6

Page 7: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

เปนก�รนำ�ขอคว�มหรอตวอกษรใสลงไปในแตละหน�เอกส�ร เหมอนพมพง�นเอกส�รทวไป (แตอยในรปของ HTML) ซงแตละหน�เรยกว� “Web Page” เมอมหล�ย ๆ เวบเพจทเกยวของสมพนธกนม�จดเกบไวในทเดยวกนเรยกว� “เวบไซต (Web Site)” สวนเวบเพจแรกหรอหน�แรกของเวบไซตเรยกว� “โฮมเพจ (Home Page)”6. สญลกษณและภ�พสญลกษณ

สญลกษณ เปนก�รสร�งภ�พแทนขอคว�มต�งๆ เพอบงบอกก�รทำ�ง�นคอมพวเตอรในขณะนนหรอใชเตอนเพอบอกสงทควรกระทำ� เชน รปน�ฬก�ทร�ย

สำ�หรบง�นด�นมลตมเดยมกจะใชสญลกษณรวมกบขอคว�ม เพอบอกคว�มหม�ยของสญลกษณ สวนไอคอน หม�ยถง ภ�พสญลกษณทใชในคอมพวเตอร

ก�รใชสญลกษณแทนก�รสงขอคว�มเพอก�รตดตอสอส�รระหว�งกน อ�จเปนไดทงภ�พนง ไอคอนหรอภ�พเคลอนไหว ทงนเพอสร�งจดสนใจและชวยใหง�ยตอก�รจดจำ� ดงนนในก�รผลตง�นด�นมลตมเดยควรจะมทงขอคว�มและสญลกษณต�งๆ รวมอยอย�งกลมกลนและเหม�ะสม

อย�งไรกต�ม ง�นด�นมลตมเดยยงมก�รใชง�นสญลกษณไมม�กนก ซงสญลกษณทถกนำ�ไปใชสวนใหญจะมคว�มหม�ยเปนส�กล ดงตวอย�งในต�ร�งท 5.3 แสดงใหเหนถงสญลกษณในรปแบบต�ง ๆ ต�มแตวตถประสงคก�รใชง�นต�ร�งท 2.3 แสดงสญลกษณในรปแบบต�ง ๆ ต�มวตถประสงคของก�รใชง�น

วตถประสงคของก�รใชง�น

สญลกษณ คว�มหม�ย

ก�รตดตอสอส�รระหว�งกน

:-) ยมธรรมด�;-) ยมและขยบต�หนง

2-7

Page 8: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

บนระบบเครอข�ย ข�ง:-| แสดงอ�ก�รไมสนใจ:-> อ�ก�รกรดอย�งแรง:-( กำ�ลงหน�บง8-) แสดงอ�ก�รตนเตน:-D อ�ก�รประหล�ดใจ:-/ อ�ก�รงง ฉงน

ก�รเลนชมวดทศน เลนเพลง หยด นำ�แผนออก เลนเพลงถดไป เลนเพลงกอนหน� กรอไปข�งหน� กรอกลบ

เครองมอสำ�หรบสร�งและแกไขรปแบบของตวอกษรเครองมอทใชในก�รสร�งรปแบบและลกษณะของตวอกษรนน

จะใชสำ�หรบสร�งลกษณะพเศษทเปนเอกลกษณเฉพ�ะของแตละง�นทผลตหรอสร�งเครองหม�ยก�รค� ซงโปรแกรมทใชเปนเครองมอมม�กม�ยหล�ยโปแกรม เชน โปรแกรม Photographer, โปรแกรม Photoshop , โปรแกรม COOL 3D ดงภ�พท 2.3 (ก), (ข) และ (ค) ต�มลำ�ดบ

2-8

Page 9: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ภ�พท 2.3 (ก) แสดงก�รออกแบบตวอกษรดวยโปรแกรม Fontographer

ทม� : www.freemac.net

ภ�พท 2.3 (ข) แสดงก�รปรบแตงขอคว�มดวยโปรแกรม PhotoShop

ทม� : http://yalor.yru.ac.th

2-9

Page 10: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ภ�พท 2.3 (ค) แสดงก�รปรบแตงขอคว�มดวยโปรแกรม COOL 3D

ทม� : www.digitalproducer.comไฮเปอรเทกซและไฮเปอรมเดย

ปจจบนระบบไฮเปอรเทกซ และ/หรอไฮเปอรมเดย (Hypertext/Hypermedia System) ไดมก�รนำ�ม�ประยกตใชในหล�ยรปแบบ ไมว�จะเปนก�รนำ�เสนอขอมลบนระบบเครอข�ยอนเตอรเนตทงทเปนเอกส�รเวบเพจ (Web Page) หรอแมแตเอกส�รอเลกทรอนกสทเปนไฟลเอกส�รในรปแบบอน ๆ เชน Word (.doc), Excel (.xls), PowerPoint (.ppt) และ Acrobat (.pdf) เปนตน โดยทเอกส�รเหล�น ส�ม�รถทจะเชอมโยงไปม�ระหว�งกนได ทงทเปนก�รเชอมโยงแบบภ�ยในเอกส�รเองหรอต�งเอกส�รกน ทงนเปนผลพวงม�จ�กววฒน�ก�รของระบบไฮเปอรเทกซทมม�แตในอดตนนเอง

ววฒน�ก�รของไฮเปอรเทกซป ค.ศ. 1945 นกปร�ชยด�นวทย�ศ�สตร Vannevar

Bush คดคนเครองมอสำ�หรบกระบวนก�รรบรและคว�มทรงจำ�ของมนษยทจำ�เปนตองมก�รบนทก จดเกบ และตดตอสอส�รทมคว�มรวดเรวและยดหยนตอสภ�วะแวดลอมทเกดขนรอบตว โดยเรยกเครองมอนว� “MEMEX (Memory Extender)”

ป ค.ศ. 1965 Doug Engellant และ Ted Nelsor จงไดคดคนวธก�รนำ�เครองมอ

MEMEX ม�ประยกตใชรวมกบคอมพวเตอร โดยนำ�ขอคว�มหรอตวอกษรม�ทำ�ก�รเชอมโยงระหว�งกน แลวเรยกว� ไฮเปอรเทกซ “(Hypertext)”

2-10

Page 11: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ป ค.ศ. 1985 บรษทซรอกซ (Xerox Corporation) ไดคดคนวธก�รเชอมโยง

ไฮเปอรเทกซแบบใหม จ�กเดมทเคยเชอมโยงไดเฉพ�ะขอคว�มหรอตวอกษรเท�นน ใหส�ม�รถนำ�รปภ�พม�ใชประกอบและเชอมโยงไดดวย นอกจ�กน ยงเพมขดคว�มส�ม�รถในก�รแกไข ปรบปรง ก�รแสดงผล และก�รเชอมโยงไดอย�งทวถงบนระบบเครอข�ยดวย โดยเรยกเครองมอนว� “Notecard”

ป ค.ศ. 1987 บรษทแอปเป ลแมคอนทอช (Apple Macintosh Corporation) ไดคดคนเครองมอทเปนซอฟตแวรชอว� “HyperCard” ซงนอกจ�กจะมเครองมอสำ�หรบสร�งออปเจคต�ง ๆ บนจอภ�พ ทำ�ใหก�รสร�งเอกส�รเปนไปดวยคว�มสะดวก ง�ยและรวดเรว รวมทงสนบสนนและรองรบหลกก�รของไฮเปอรเทกซ จงทำ�ใหเปนทนยมใชง�นกนอย�งแพรหล�ย

ป ค.ศ. 1991 Tim Berners-Lee นกพฒน�ระบบไฮเปอรเทกซ ประเทศสวตเซอรแลนด เพอพฒน�เครองมอสำ�หรบอ�นเอกส�รทเปนขอคว�มทเรยกว� “Text Browser” และเครองมอสำ�หรบเขยนดวยภ�ษ� HTML (HyperText Markup Language) ทเรยกว� “Text Editor HTML” โดยอ�ศยหลกก�รตดตอสอส�รผ�นท�งโปรโตคอลบนระบบเครอข�ยทเรยกว� “HTTP (HyperText Transfer Protocol)” ผลจ�กก�รคดคนวจยและพฒน�จ�ก

2-11

Page 12: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

โครงก�รนเอง เปนทม�ของเวลดไวดเวบ (World Wide Web : WWW)

ค ว � ม ห ม � ย ข อ ง ไ ฮ เ ป อ ร เ ท ก ซ แ ล ะ ไ ฮ เ ป อ ร ม เ ด ยค ว � ม ห ม � ย ข อ ง ไ ฮ เ ป อ ร เ ท ก ซ แ ล ะ ไ ฮ เ ป อ ร ม เ ด ยในมมมองของผใชง�นโดยทวไปแลว ไฮเปอรเทกซเปนเพยงจด

เรมตนของก�รนำ�เสนอคว�มรผ�นท�งคอมพวเตอร ซงใชหลกก�รเชอมโยงไฮเปอรเทกซ โดยเฉพ�ะอย�งยงขอมลทนำ�เสนออยบนเครอข�ยอนเตอรเนตในปจจบน หรออ�จกล�วอกนยหนงว� ไฮเปอรเทกซ (Hypertext) หม�ยถง ขอคว�มหรอกลมของขอคว�มทถกเชอมโยงเข�ดวยกน โดยมก�รนำ�เสนอแบบปฏสมพนธ (Interaction) ดวยก�รนำ�ขอคว�มทใชม�เปนจดเชอมโยง ซงจะปร�กฏในลกษณะทเดนกว�ขอคว�มอน เชน ก�รขดเสนใต ก�รเนนดวยส ตวหน� หรอตวเอยง เปนตน ดงตวอย�งในภ�พท 2.4

ภ�พท 2.4 ระบบชวยเหลอทใชไฮเปอรเทกซทม� : www.kanchanapisek.or.th

ในระบบมลตมเดย (Multimedia System) ไดนำ�หลกก�รของไฮเปอรเทกซม�เปนสวนหนงของก�รนำ�เสนอจ�กเดมทมก�รเชอมโยงเฉพ�ะขอคว�มหรอตวอกษรเท�นน ม�เปนก�รเชอมโยงโดย

2-12

Page 13: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ใชภ�พนง เสยง และวดโอ โดยเรยกกนโดยทวไปว� ไฮเปอรมเดย (Hypermedia) ซงส�ม�รถแสดงคว�มสมพนธของแบบจำ�ลองไดดงภ�พท 2.5

ภ�พท 2.5 คว�มสมพนธระหว�งมลตมเดย ไฮเปอรเทกซ และไฮเปอรมเดย

ทม� : ทวศกด ก�ญจนสวรรณ, Multimedia ฉบบพน ฐ�น. หน� 59

แบบจำ�ลองและองคประกอบ1. แบบจำ�ลองระบบไฮเปอรเทกซ

แบบจำ�ลองของระบบไฮเปอรเทกซไดมก�รนำ�เสนอ เพออธบ�ยถงคณลกษณะและขอบเขตของง�นทไดออกแบบไว ซงมอยจำ�นวนม�กม�ยต�มแตกรอบแนวคว�มคดของแตละคน อย�งไรกต�ม โดยสวนใหญแบบจำ�ลองจะอธบ�ยถงสมพนธระหว�งลงค (Link) กบโหนด (Node)

2. องคประกอบของระบบไฮเปอรเทกซ พอยต (Point)

หม�ยถง กลมคำ� หรอวล ทเปนขอคว�มพเศษทแสดงว�มก�รเชอมโยงเกดขน

โดยทขอคว�มเหล�นจะถกแสดงในลกษณะทต�งกนออกไป ทำ�ใหรว�เปนพอยต เชน ก�รขดเสนใต ก�รเนนดวยส ตวหน� หรอตวเอยง เมอผอ�นเลอนเคอรเซอร (Cursor) ม�ถงพอยต เคอรเซอรจะเปลยนไปเปนสญลกษณอน เชน รปมอเพอแสดงว�ขอคว�มนนส�ม�รถทจะเชอมโยงไปยงสวนของขอมลทขย�ยคว�มตอไป หรอลกษณะก�รเนนขอคว�มดวยก�รขดเสนใต

โหนด (Node)

2-13

มลตมเดย(Multimedia)

ไฮเปอรเทกซ(Hypertext)

ไฮเปอรมเดย(Hypermedia)

Page 14: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

หม�ยถง กลมของขอมลทสมพนธกนหรอเปนเรองเดยวกนซงถกจดไวเปน

กลมเดยว ซงภ�ยในโหนดนนอ�จมพอยตอยม�กกว�หนงพอยตกได คว�มย�วของโหนดนนไมส�ม�รถระบต�ยตวได บ�งครงอ�จมคว�มย�วเปนหน�กระด�ษหรอกว�นน

ลงค (Link)หม�ยถง ก�รเชอมโยงเอกส�รจ�กตนท�งไปยงปล�ยท�ง โดยมกลไกภ�ยในท

ชวยนำ�ท�งไปยงเป�หม�ยไดอย�งทวทงระบบไฮเปอรเทกซ ทงทเปนแบบก�รเชอมโยงภ�ยใน และแบบก�รเชอมโยงภ�ยนอก ส�ม�รถจำ�แนกลงคออกไดเปน 3 ชนด ประกอบดวย

1) ลงคชนดอ�งถงลงคชนดน ใชสำ�หรบเชอมโยงโดยก�รอ�งถงโดยตรงระหว�งจดสอง

จด ประกอบดวยจดเรมตน และจดสนสด เชน ปมหรอขอคว�มทลงคไปข�งหน� (Forward) หรอยอนกลบ (Backward)

2) ลงคชนดแผนภมลงคชนดน มคว�มคล�ยคลงกบลงคชนดอ�งถง จะแตกต�งกนทเปน

ก�รเชอมโยงระหว�งโหนดดวยกนในลกษณะทเปนโครงสร�งไฮร�ค3) ลงคชนดคยเวรด

ลงคชนดน เปนก�รนำ�กลมคำ�หรอวลต�ง ๆ ทมคว�มหม�ยและ

สมพนธระหว�งกนม�เชอมโยงดวยวธก�รเดยวกบก�รลงคชนดอ�งถงหรอแผนภม

ป ร ะ โ ย ช น ข อ ง ไ ฮ เ ป อ ร เ ท ก ซ ป ร ะ โ ย ช น ข อ ง ไ ฮ เ ป อ ร เ ท ก ซ 1. รปแบบก�รนำ�เสนอ ใหคว�มตนเตน

2-14

Page 15: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

2. มลกษณะของก�รสร�งสรรคม�กกว�3. ส�ม�รถเชอมโยงไปยงเอกส�รอน ๆ ภ�ยนอกได4. ส�ม�รถสบทองไปยงเนอห� ต�มตองก�รได5. ส�ม�รถปองกนไมใหผใชดเอกส�รบ�งสวนกอนทจะทำ�

กจกรรมทกำ�หนดได6. เข�ถงขอมลร�ยละเอยดไดอย�งรวดเรว7. ผนวกซอฟทแวรอนๆ เข�ในก�รนำ�เสนอเอกส�รได8. เกดคว�มคงทนในก�รจดจำ� ม�กกว�เอกส�รสงพมพ9. เหม�ะสมและสนบสนนก�รเรยนรแบบเอกตบคคล

ปญห�และแนวท�งแกไขระบบไฮเปอรเทกซแมว�ระบบไฮเปอรเทกซจะมประโยชนเหนอกว�ก�รอ�น

ขอคว�มในหนงสอโดยทวไปกต�ม แตปญห�สวนใหญทพบมกจะเกยวของกบผใชง�นทมกจะหลงท�งเข�ไปตดอยกบก�รแสดงผลของขอมลทพบเจอนนม�กจนเกนไป โดยเฉพ�ะอย�งยงภ�ยใตสภ�พก�รณของระบบทไดออกแบบไวยงไมดพอ ดงนน แนวท�งแกไขจงไดพย�ย�มคนห�วธก�รดดแปลงใหเหม�ะสมกบก�รนำ�เสนอขอมล และก�รนำ�ท�งเพอชวยใหผใชส�ม�รถควบคมก�รทำ�ง�นไดอย�งอสระและมประสทธผลม�กยงขน

สรปตวอกษรเปนสญลกษณแทนคำ�พดหรอคว�มนกคดของมนษย

เพอใชในก�รสอส�รระหว�งคนตงแตสองคนขนไป ซงในอดตในยคแรก ๆ ก�รใชตวอกษรเปนเพยงภ�ษ�เขยนสำ�หรบชนชนสงเท�นน ตอม� มนษยไดนำ�ขอคว�มหรอตวอกษรม�ใชเปนภ�ษ�สอกล�ง เพอตดตอระหว�งกนโดยผ�นท�งก�รเขยนและก�รอ�น จวบจนกระทงไดมก�รนำ�ม�ใชกนอย�งแพรหล�ยบนระบบเครอข�ยอนเตอรเนตในรป

2-15

Page 16: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

แบบของภ�ษ�เอชทเอมแอล (HTML : Hypertext Markup Language) ผ�นท�งบร�วเซอรบนจอภ�พคอมพวเตอร

โดยสวนใหญผพฒน�ง�นด�นมลตมเดยจะใชคอมพวเตอรในก�รผลต และเรยบเรยงขอคว�มต�ง ๆ ดวยก�รผสมผส�นสอมลตมเดยเข�ดวยกน จ�กนน จงนำ�ม�เผยแพรผ�นชองท�งต�ง ๆ ไมว�จะเปนระบบเครอข�ยอนเตอรเนต (Internet) อนทร�เนต (Intranet) เอกซทร�เนต (Extranet) หรอแมแตเครอข�ยไรส�ย (Wireless Communication)

สำ�หรบตวอกษรมใหเลอกใชหล�ยรปแบบ ทงน ขนอยกบม�ตรฐ�นของแตละภ�ษ� ไมว�จะเปนรปแบบลกษณะและขน�ดของตวอกษร เชน ตวอกษรธรรมด� (Normal) ตวหน� (Bold) ตวเอยง (Italic) หรอขดเสนใต (Underline) นอกจ�กวธก�รใชตวอกษรในเรองทวไปเกยวกบก�รอ�นและก�รเขยนโดยทวไปแลว ยงไดมก�รนำ�รปแบบของตวอกษรม�ใชประโยชนในด�นอน ๆ ดวย

ปจจบน เครองมอสำ�หรบสร�งและแกไขตวอกษรมหล�กหล�ยชนด ตวอย�งเชน โปรแกรม Fontographer โปรแกรม PhotoShop และโปรแกรม COOL 3D ไมว�โปรแกรมทจะใชสำ�หรบสร�งหรอแกไขตวอกษรเหล�นจะเปนแบบ 2 มตหรอ 3 มตกต�ม ยอมจะกอใหเกดประโยชนม�กม�ยทงในแวดวงธรกจและก�รศกษ�

จ�กจดเรมตนของระบบไฮเปอรเทกซ เปนเพยงแคกรอบแนวคว�มคดทเปรยบเทยบกบก�รอ�นขอคว�มในหนงสอซงมขอจำ�กดอยม�กม�ย ประกอบกบเครองพซในสมยนน ยงเปนเพยงแคเครองคดเลข ทำ�ใหไมส�ม�รถนำ�ม�ประยกตใชเพอส�นกรอบแนวคว�มคดดงกล�วได อย�งไรกต�ม กรอบแนวคว�มคดไดขย�ยวงกว�งไปเรอย ๆ โดยพจ�รณ�ไดจ�กแบบจำ�ลองระบบไฮเปอรเทกซทมอยจำ�นวนม�ก

จนกระทง เครองมลตมเดยพซ ไดรบก�รพฒน�ม�อย�งตอเนอง จงส�ม�รถนำ�ม�ใชพฒน�ระบบไฮเปอรเทกซไดอย�งม

2-16

Page 17: บทที่ 5korawees.yolasite.com/resources/บทที่ 2 (4-5... · Web viewต วอ กษรและร ปแบบต วอ กษร (Character and Fonts) ต วอ

ประสทธผล ทำ�ใหเกดประโยชนในทกแวดวง ทงนเนองจ�กคณสมบตของระบบไฮเปอรเทกซทง�ยตอก�รเชอมโยง ก�รตดต�มรองรอย และก�รปรบแตงใหเข�กบลกษณะง�นแตละประเภทได อย�งไรกต�มปญห�ทพบมกจะเกยวของกบผใชง�นทมกจะหลงท�งเข�ไปตดอยในก�รแสดงผลของขอมลม�กจนเกนไป โดยเฉพ�ะอย�งยงภ�ยใตสภ�พก�รณของระบบทไดออกแบบไวยงไมดพอ ดงนน แนวท�งแกไขจงไดพย�ย�มคนห�วธก�รดดแปลงใหเหม�ะสมกบก�รนำ�เสนอขอมล และก�รนำ�ท�ง เพอชวยใหผใชส�ม�รถควบคมก�รทำ�ง�นไดอย�งอสระและมประสทธผลม�กยงขน

ผลพวงจ�กปญห�ทเกดขน ทำ�ใหมก�รนำ�เสนอแบบจำ�ลองใหม ๆ เพมขนอยตลอดเวล� ประกอบแนวคว�มคดทตองก�รผสมผส�นระบบอน ๆ เข�ดวยกนกมม�กขน ทงน เนองจ�กตองก�รทจะยกระดบของระบบไฮเปอรเทกซใหมประสทธภ�พและประสทธผลม�กยงขนนนเอง

2-17