Transcript รูปแบบตัวอักษรสำหรับเว็บไซต์

Web Design
โดย
นายปกรณ์ บุญกังวาน รหัส 44530264
ภาควิชาวิทยาการคอมพิวเตอร์ ภาคพิเศษ
รายวิชา 310492 Computer Seminar
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
1
หัวข้ อหลักในการสัมมนา
รู ปแบบตัวอักษรสาหรับเว็บไซต์ (Typography on the Web)
มัลติมีเดียสาหรับเว็บไซต์ (Multimedia on the Web)
ออกแบบกราฟิ กสาหรับเว็บไซต์ (Designing WebGraphic)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
2
รูปแบบตัวอักษรสาหรั บเว็บไซต์
(Typography on the Web)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
3
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ส่ วนประกอบตัวอักษร
ascender : ส่ วนบนของตัวอักษรพิมพ์เล็ก (เช่ น b , d) ทีส่ ู งกว่ าความสู ง
x-height ของตัวอักษร
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
4
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ส่ วนประกอบตัวอักษร
desender : ส่ วนล่างของตัวอักษรพิมพ์เล็ก (เช่ น p , q) ทีต่ ่ากว่ าเส้ น
baseline ของตัวอักษร
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
5
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ส่ วนประกอบตัวอักษร
baseline : เส้ นสมมุตทิ ตี่ วั อักษรส่ วนใหญ่ ต้งั อยู่
cap height : ความสู งจากเส้ น baseline ไปถึงส่ วนบนสุ ดของตัวอักษร
พิมพ์ใหญ่
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
6
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ส่ วนประกอบตัวอักษร
x-height : ความสู งของตัวอักษร x ในแบบพิมพ์เล็ก ทีไ่ ม่ รวมความสู ง
ส่ วนบนและส่ วนล่างของตัวอักษร
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
7
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ระบบการวัดขนาดของตัวอักษร
ความสู งของตัวอักษร
นิยมใช้ หน่ วยพอยท์ (point)
ในการวัดขนาดตัวอักษรของ
ระบบการพิมพ์
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
8
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ระบบการวัดขนาดของตัวอักษร
บางครั้งความสู งของตัวอักษรที่วดั จากจุดสู งสุ ดถึงจุดต่าสุ ด มี
ตัวอักษรบางชนิดทีม่ ีส่วนบนและส่ วนล่ างยาวกว่ าปกติ เมือ่ นามาเปรียบเทียบ
กับตัวอักษรชนิดอืน่ ทีม่ ขี นาดเดียวกัน จะทาให้ ดูเล็กกว่ า
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
9
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ระบบการวัดขนาดของตัวอักษร
ความสู งของ x-height
ความแตกต่ างระหว่ างตัวอักษร Garamond กับ Arial ทีข่ นาด 20
พอยท์ เท่ ากัน จะเห็นว่ าตัวอักษร Arial มีค่าความสู ง x-height มากกว่ า ตัวอักษร
Garamond จึงทาให้ อ่านได้ ง่ายกว่ า
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
10
รูปแบบตัวอักษรสาหรั บเว็บไซต์
รู ปแบบตัวอักษร แบ่ งเป็ น 2 ประเภท คือ
ตัวอักษรทีม่ ขี นาดสั มพันธ์ กบั รู ปร่ าง (Proportional Font)
ตัวอักษรที่มขี นาดคงที่ (Fixed – Width Font)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
11
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ตัวอักษรทีม่ ขี นาดสั มพันธ์ กบั รู ปร่ าง (Proportional Font)
เรียกอีกอย่างว่ า “ตัวอักษรทีม่ ีขนาดไม่ คงที่” หมายถึง ตัวอักษรแต่ ละ
ตัวมีพนื้ ทีต่ ามแนวนอนไม่ เท่ ากันโดยจะขึน้ อยู่กบั รู ปร่ างของตัวอักษรนั้น เช่ น ตัว
“w” จะมีความกว้ างมากกว่ าตัว “i” ชนิดของตัวอักษรในรู ปแบบนี้ คือ Times,
Arial และ Angsana UPC เป็ นต้ น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
12
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ตัวอักษรทีม่ ขี นาดคงที่ (Fixed – Width Font)
รู ปแบบนีจ้ ะมีพนื้ ทีต่ ามแนวนอนเท่ ากันทั้งหมด ทาให้ ตวั “w” และ ตัว
“i” ใช้ พนื้ ทีเ่ ท่ ากัน ชนิดของตัวอักษรในรู ปแบบนี้ ได้ แก่ Courier, Monaco เป็ นต้ น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
13
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ชนิดและตระกูลของตัวอักษร
Typeface family
ตระกูลของตัวอักษร หมายถึง ชุ ดของตัวอักษรทีอ่ อกแบบมาเพือ่ ใช้
ร่ วมกัน เช่ น ตระกูล Times, Verdana หรือ Arial โดยทีแ่ ต่ ละตระกูลจะ
ประกอบด้ วยลักษณะทีห่ ลากหลายตามชนิดของตัวอักษร (typeface)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
14
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ชนิดและตระกูลของตัวอักษร
Typeface
ชนิดของตัวอักษร ประกอบด้ วย ตัวอักษร ตัวเลข และสั ญลักษณ์ ที่
ออกแบบมาด้ วยกัน ชนิดของตัวอักษร (typeface) จะมีลกั ษณะทีแ่ ตกต่ าง
กัน เช่ น เป็ นแบบตัวตรงหรือตัวเอียง
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
15
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ตัวอักษรประเภท Serif และ Sans serif
ตัวอักษรประเภท Serif
Serif หมายถึง ลายเส้ นตกแต่ งขนาดเล็กทีเ่ พิม่ ขึน้ ที่ส่วนปลายของลายเส้ นหลัก ตัวอักษร
ประเภท Serif จึงมีส่วนของลายเส้ นตกแต่ งติดกับส่ วนต้ นหรือส่ วนท้ ายของตัวอักษร (บางคนอาจ
เรียกว่ า ตัวอักษรมีฐานหรือมีหาง) ชนิดตัวอักษรประเภท Serif เช่ น Time New Roman,
Garamond และ Georgia
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
16
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ตัวอักษรประเภท Serif และ Sans serif
ตัวอักษรประเภท Sans-serif
ตัวอักษรประเภท Sans-serif ไม่ มีลายเส้ นตกแต่ งติดอยู่กบั ตัวอักษร ตัวอย่ างเช่ น Arial,
Helvetica, Verdana และ Univers ตัวอักษรประเภทนีเ้ หมาะที่จะใช้ กบั หัวข้ อหรือตัวอักษร
ขนาดใหญ่
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
17
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ความสะดวกในการอ่าน (Legibility)
ในการใช้ ตัวอักษรแบบพิมพ์ใหญ่ หรือตัวพิมพ์เล็กมีผลอย่ างมากกับการอ่ าน
เนื่องจากขณะทีอ่ ่ าน เราจะสามารถจาแนกคาต่ าง ๆ ออกด้ วยรู ปร่ างโดยรวม ไม่ ใช่ การ
มองดูตวั อักษรแต่ ละตัวแล้ วนามารวมกันเป็ นคาในภายหลัง ดังรู ปตัวอย่าง
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
18
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ความสะดวกในการอ่าน (Legibility)
การใช้ ตัวอักษร ควรหลีกเลีย่ ง การใช้ คาที่เป็ นตัวพิมพ์ใหญ่ ท้งั หมด เพราะว่ าจะ
ทาให้ อ่านยาก และคาในรู ปแบบเต็มทั้งหมดจะสร้ างกรอบสี่ เหลีย่ มทีไ่ ม่ มีโทนขึน้ -ลง
ทาให้ ลดส่ วนทีจ่ ะสะดุดตาลงไป ดังรู ปตัวอย่ าง
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
19
รูปแบบตัวอักษรสาหรั บเว็บไซต์
ความสะดวกในการอ่าน (Legibility)
นอกจากนั้น สิ่ งหนึ่งทีไ่ ม่ ควรทา
คือ การแบ่ งครึ่งตัวอักษร ไม่ ว่าจะเป็ น
แนวนอนหรือแนวตั้ง เพราะว่ าจะทา
ให้ ภาพรวมของตัวอักษรขาดหายไป
ยากต่ อการอ่ าน ดังตัวอย่างต่ อไปนี้
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
20
รูปแบบตัวอักษรสาหรั บเว็บไซต์
การจัดข้ อความในหน้ าเว็บ
การจัดตาแหน่ ง (Alignment)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
21
รูปแบบตัวอักษรสาหรั บเว็บไซต์
การจัดข้ อความในหน้ าเว็บ
ช่ องว่ างระหว่ างตัวอักษรและช่ องว่ างระหว่ างคา
เราสามารถปรับระยะระหว่ างตัวอักษร หรือระหว่ างคา เพื่อให้
สามารถอ่านได้ ง่ายขึน้ บางครั้งอาจมีความต้ องการให้ ตวั อักษรดูแน่ น
หรือหลวม เช่ น ตัวอักษรทีใ่ ช้ ตวั พิมพ์ ใหญ่ ท้งั หมดจะดูค่อนข้ างแน่ น
ดังนั้น ควรเพิม่ ช่ องว่ างระหว่ างตัวอักษรให้ มากขึน้ เล็กน้ อย เพือ่ ให้ อ่าน
ง่ ายขึน้ ดังรู ปตัวอย่ าง
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
22
รูปแบบตัวอักษรสาหรั บเว็บไซต์
การจัดข้ อความในหน้ าเว็บ
ระยะห่ างระหว่ างบรรทัด (Leading)
ถ้ าระยะห่ างระหว่ างบรรทัดน้ อยจะมีจานวนตัวอักษรได้ มาก แต่
ความสะดวกในการอ่านจะลดลง ในขณะทีร่ ะยะห่ างระหว่ างบรรทัดมาก
จะขยายพืน้ ทีข่ องตัวอักษรและยังเพิม่ ความสะดวกในการอ่ านอีกด้ วย
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
23
มัลติมีเดียสาหรั บเว็บไซท์
(Multimedia on the
Web)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
24
มัลติมีเดียสาหรั บเว็บไซท์
มัลติมเี ดีย เป็ นเทคโนโลยีทชี่ ่ วยให้ คอมพิวเตอร์ สามารถ
ผสมผสานกันระหว่ างข้ อความ ภาพนิ่ง ภาพเคลือ่ นไหว และเสี ยง ไว้
ด้ วยกัน และมีการนาเอาระบบโต้ ตอบกับผู้ใช้ มาผสมผสานเข้ ากันด้ วย
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
25
มัลติมีเดียสาหรั บเว็บไซท์
มัลติมีเดียที่ใช้ ในเว็บไซท์
เกีย่ วกับเสี ยง (Audio)
เป็ นการบันทึกตามลูกคลืน่ โดยมีการแปลงสั ญญาณให้ เป็ น
ดิจิตลั และมีการบีบอัดข้ อมูลเสี ยงให้ เล็กลง ซึ่งทาให้ คณ
ุ ภาพเสี ยงลดลง
ตัวอย่ างเช่ น เสี ยงพูด เสี ยงดนตรี เป็ นต้ น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
26
มัลติมีเดียสาหรั บเว็บไซท์
มัลติมีเดียที่ใช้ ในเว็บไซท์
วิดโี อ (Video)
เป็ นรู ปแบบมัลติมเี ดียทีส่ ามารถแสดงได้ ท้งั ภาพเคลือ่ นไหวและ
เสี ยงไปพร้ อม ๆ กันได้ โดยมีรูปแบบต่ าง ๆ เช่ น .avi , .mpeg
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
27
มัลติมีเดียสาหรั บเว็บไซท์
มัลติมเี ดียที่ใช้ ในเว็บไซท์
Slide shows
เป็ นอีกวิธีหนึ่งสาหรับแสดงมัลติมีเดียบนเว็บ ใน slide shows
จะมีเสี ยงและภาพนิ่งเกิดขึน้ ในเวลาเดียวกัน โดยวิธีการให้ ข้อมูลผ่ านโดย
เสี ยง และให้ ความสาคัญของภาพด้ วยภาพนิ่ง ภาพนิ่งจะมีการบีบอัดทีม่ ี
ประสิ ทธิภาพกว่ าวิดโี อ เพราะว่ า slide shows ไม่ ต้องการการเคลื่อนไหวที่
ราบรื่น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
28
มัลติมีเดียสาหรั บเว็บไซท์
มัลติมเี ดียที่ใช้ ในเว็บไซท์
ภาพเคลือ่ นไหว (Animation)
เว็บแอนนิเมชั่นส่ วนใหญ่ ต้องการตัว plug-ins พิเศษสาหรับดู
ภาพแอนนิเมชั่น ยกเว้ นภาพเคลือ่ นไหวในรู ปแบบ GIF ซึ่งรู ปแบบนีม้ ี
ความแตกต่ างจากรู ปแบบแอนนิเมชั่นทีม่ อี ยู่ทวั่ ไปบนเว็บ
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
29
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
(Designing Web Graphic)
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
30
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
GIF (Graphic Interchange Format)
มีนามสกุลเป็ น .gif ระบบสี เป็ นแบบอินเด็กซ์ มีข้อมูลสี ขนาด 8
บิต ทาให้ มจี านวนสี มากทีส่ ุ ด 256 สี เนื่องจาก ไฟล์ประเภท GIF มีการบีบ
อัดข้ อมูลตามแนวแถวของพิกเซล คือ ถ้ ามีจุดทีม่ สี ี ซ้ากันอยู่ตดิ กันหลาย
จุดก็จะเก็บเพียงจุดเดียว จึงเหมาะสาหรับกราฟฟิ กทีป่ ระกอบด้ วยสี พนื้ ๆ
และไม่ ซับซ้ อน
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
31
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
เมือ่ ไหร่ ถึงจะใช้ GIF ??
ต้ องการไฟล์ รูปภาพทีม่ ขี นาดเล็ก
กราฟฟิ กที่ประกอบด้ วยสี พนื้ ๆ เป็ นส่ วนใหญ่
จานวนสี และความละเอียดของรู ปภาพไม่ สูงมากนัก
ต้ องการรู ปภาพทีม่ ีลกั ษณะโปร่ งใส (Transparent)
ต้ องการนาเสนอภาพเคลือ่ นไหว
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
32
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
คุณสมบัติ Interlacing
หมายถึง การแสดงรู ปภาพแบบโครงร่ าง และค่ อย ๆ แสดงแบบ
ละเอียด โดยปกติการแสดงรู ปภาพในบราวเซอร์ จะแสดงผลไล่ จาก
ขอบบนของภาพถึงขอบล่าง ซึ่งมักจะแสดงผลช้ ามาก
แต่ ด้วยการแสดงรู ปภาพแบบ Interlacing รู ปภาพแสดงผลแบบ
เต็มรู ป และมีลกั ษณะเป็ นสี่ เหลีย่ มเล็ก ๆ พร่ ามัว หรือแบบเบลอ ๆ ใน
ตอนแรก แล้ วจะค่ อย ๆ แสดงผลชัดเจนขึน้ เรื่อย ๆ จนได้ รูปภาพที่
สมบูรณ์ ทาให้ ผ้ ใู ช้ สามารถเห็นรู ปภาพแบบโครงร่ างก่ อน หากไม่
พอใจจะดูกส็ ามารถข้ ามการแสดงผลไปได้ เลยทันที
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
33
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
ตัวอย่ างการแสดงรู ปภาพแบบ Interlacing
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
34
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
ตัวอย่ างการแสดงรู ปภาพแบบ Interlacing
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
35
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
ลักษณะทีโ่ ปร่ งใส (Transparnet) ของ GIF
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
36
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
จุดเด่ นและจุดด้ อยของไฟล์ ประเภท GIF
จุดเด่ น =>
- มีขนาดไฟล์เล็ก
- สามารถทาพืน้ ของรู ปภาพให้ เป็ นพืน้ แบบโปร่ งใสได้
- สามารถแสดงผลแบบโครงร่ าง (Interlacing) ได้
- มีโปรแกรมสนับสนุนในการสร้ างจานวนมาก
- สามารถนาเสนอภาพเคลือ่ นไหวได้
จุดด้ อย =>
- แสดงสีได้เพียง 256 สีเท่านั้น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
37
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
JPEG (Joint Photographic Experts Group)
มีนามสกุลเป็ น .jpg หรือ .jpeg ระบบสี เป็ นแบบ 24 บิต ซึ่งให้ สีได้
จริง (true color) มากถึง 16.7 ล้ านสี และยังบรรจุชุดของสี เทาไว้
ด้ วย
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
38
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
การบีบอัดข้ อมูลของ JPEG
การบีบอัดในอัตราสู ง คุณภาพต่า
สัมมนาทางคอมพิวเตอร์
การบีบอัดในอัตราต่า คุณภาพสู ง
มหาวิทยาลัยบูรพา
39
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
เมือ่ ไหร่ ถึงจะใช้ JPEG
ไฟล์ ประเภทนีเ้ หมาะสาหรับรู ปถ่ ายหรือรู ปทีม่ กี ารไล่ ระดับสี
อย่ างต่ อเนื่องกัน เพราะจะทาให้ ได้ รูปทีม่ คี ุณภาพดีกว่ าและขนาดไฟล์
เล็กกว่ า GIF เช่ นภาพวาด ภาพสี นา้ เป็ นต้ น
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
40
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
คุณสมบัติ Progressive JPEG
เป็ นการแสดงผลแบบลาดับขั้น (progressive) โดยจะค่ อย ๆ
แสดงรู ปทีม่ รี ายละเอียดเพิม่ มากขึน้ ตามปริมาณข้ อมูลทีด่ าวน์ โหลดได้
จนปรากฏเป็ นรู ปทีส่ มบูรณ์ ในทีส่ ุ ดซึ่งมีลกั ษณะเช่ นเดียวกับคุณสมบัติ
Interlacing ใน GIF
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
41
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
ตัวอย่ างการแสดงรู ปภาพแบบ Progressive JPEG
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
42
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
จุดเด่ นและจุดด้ อยของไฟล์ ประเภท JPEG
จุดเด่ น =>
- ระบบข้ อมูลสี เป็ นแบบ 24 บิต ซึ่งมีสีมากถึง 16.7 ล้านสี
- มีการแสดงผลแบบลาดับขั้น (progressive)
- มีโปรแกรมสนับสนุนในการสร้ างจานวนมาก
จุดด้ อย =>
- ทาให้ พนื้ ของรู ปภาพโปร่ งใสไม่ ได้
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
43
ออกแบบกราฟฟิ กสาหรั บเว็บไซท์
ตัวอย่ างรู ปภาพของ
ไฟล์ประเภท JPEG
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
44
เอกสารอ้ างอิง
http://www.nectec.or.th/tindex.html
http://www.jonesandjones.com
http://www.webstyleguide.com
ธวัชชัย ศรีสุเทพ
คัมภีร์ Web Design .- กรุ งเทพ ฯ: โปรวิชั่น 2544
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
45
จบการนาเสนอ
สัมมนาทางคอมพิวเตอร์
มหาวิทยาลัยบูรพา
46