multimedia for the web: creating digital excitement multimedia element — text
Post on 19-Dec-2015
233 views
TRANSCRIPT
![Page 1: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/1.jpg)
Multimedia for the Web: Creating Digital Excitement
Multimedia Element —Text
![Page 2: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/2.jpg)
2Multimedia for the Web Chapter 5
Discuss Fonts
Understand Fonts
Define Cascading Style Sheets (CSS)
Explain Additional Options for Implementing Text on the Web
Chapter Concepts
![Page 3: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/3.jpg)
3Multimedia for the Web Chapter 5
All Web content used to be disseminated with textGraphics and other media elements have been added, yet text remains primary vehicle for communicating contentThe effective use of text is dependent upon typography and typefaces used
Introduction
![Page 4: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/4.jpg)
4Multimedia for the Web Chapter 5
Typography: Type design; it is the typeface used and the way the type is arranged to communicate an ideaTypeface: Set of characters, usually made up of alphabet letters, numerals, symbols, that all follow the same rules within the set
Introduction
![Page 5: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/5.jpg)
5Multimedia for the Web Chapter 5
Font: Set of characters within a typeface that has specific characteristics associated with it
Fonts belong to a font family such as Times New Roman, and contain variations on the font face
Text should be easy to read and visually pleasing
Introduction
![Page 6: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/6.jpg)
6Multimedia for the Web Chapter 5
Discuss Fonts
When content is mostly text, typography takes on greater importance
Users may not have fonts specified in XHTML document, so Web page may not resemble original design
![Page 7: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/7.jpg)
7Multimedia for the Web Chapter 5
Discuss Fonts
Different fonts, when used properly:– Can help focus attention on certain
text on the screen– Enhance readability– Set a tone (serious, light-hearted)– Project an image (progressive,
conservative)
![Page 8: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/8.jpg)
8Multimedia for the Web Chapter 5
Discuss FontsDefault fonts are ones that come pre-installed with each operating system
![Page 9: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/9.jpg)
9Multimedia for the Web Chapter 5
Many font designers sell or offer royalty free fonts via the Web
If you use a font that is not on a user’s computer, the user’s operating system will substitute a default font when the Web page is viewed
Better to use common fonts for standard Web-based text
Discuss Fonts
![Page 10: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/10.jpg)
10Multimedia for the Web Chapter 5
Serif, Sans Serif, DecorativeMonospaced vs. ProportionalStyleSizeSpacingColorAlignmentLine Length
Understand Fonts
![Page 11: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/11.jpg)
11Multimedia for the Web Chapter 5
Fonts are classified as serif, sans serif, or decorative
Serif fonts have feet or short lines at the ends of the strokes of the letter
Sans means “without”, so a sans serif font is one without serifs or without feet
Serif, Sans Serif, Decorative
![Page 12: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/12.jpg)
12Multimedia for the Web Chapter 5
A decorative font may have a combination of serif and sans serif fonts or it may be one that cannot be categorized either way
Sans serif fonts most often used for headings, titles, callouts
Serif fonts are used for long or dense bodies of texts
Serif, Sans Serif, Decorative
![Page 13: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/13.jpg)
13Multimedia for the Web Chapter 5
Serif, Sans Serif, Decorative
![Page 14: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/14.jpg)
14Multimedia for the Web Chapter 5
Monospaced fonts: Each character takes up the exact same amount of horizontal space
Proportional fonts: Each character takes up a varying amount of horizontal space
Monospaced vs. Proportional
![Page 15: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/15.jpg)
15Multimedia for the Web Chapter 5
Font styles include: Italic, bold, and underline Italicized fonts do not generally read well on screenAn underlined word or phrase usually indicates a hyperlinkUnless the text is a hyperlink, avoid the use of underline
Style
![Page 16: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/16.jpg)
16Multimedia for the Web Chapter 5
Fonts often measured in point sizes
Choosing the proper point size depends on how the font is to be used; that is, as a title, body text, subhead or decorative
Ten and 12 points are common point sizes for type displayed on a Web page
Size
![Page 17: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/17.jpg)
17Multimedia for the Web Chapter 5
Kerning: Used to specify the amount of space between characters
Leading: Amount of space between lines of text
Cascading Style Sheets (CSS): Used to control kerning and leading in an entire Web site
Spacing
![Page 18: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/18.jpg)
18Multimedia for the Web Chapter 5
Color
Color creates emphasis; a visual disturbance
Color applied to text contributes to overall mood and tone of the page
The six-digit hexadecimal value is used to reference color on a Web page
![Page 19: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/19.jpg)
19Multimedia for the Web Chapter 5
Typography used to create patterns of organization the page
Text can be:– Left aligned– Right aligned– Center aligned– Justified
Alignment
![Page 20: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/20.jpg)
20Multimedia for the Web Chapter 5
Line LengthLong lines of text hard to read
Columns are often more readable
Recommended that designers allow for approximately 30 to 40 characters per line
![Page 21: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/21.jpg)
21Multimedia for the Web Chapter 5
Line Length
![Page 22: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/22.jpg)
22Multimedia for the Web Chapter 5
Cascading Style Sheet: Similar to a style used in a word processing program in that it defines the appearance of the text on a Web page
Define Cascading Style Sheets (CSS)
![Page 23: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/23.jpg)
23Multimedia for the Web Chapter 5
Four different types of CSS:– Inline– Embedded– Linked– imported
Define Cascading Style Sheets (CSS)
![Page 24: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/24.jpg)
24Multimedia for the Web Chapter 5
Inline styles: Inserted into the body of HTMLDisadvantage of inline: they have to be added to each tag you want to modify
Inline
![Page 25: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/25.jpg)
25Multimedia for the Web Chapter 5
With embedded or internal style, all of the style information appears in the <head> of the XHTML document
Embedded
![Page 26: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/26.jpg)
26Multimedia for the Web Chapter 5
Linked styles are more powerful than inline or embedded styles
Linked styles direct multiple XHTML files to one common style sheet document
Linked
![Page 27: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/27.jpg)
27Multimedia for the Web Chapter 5
Imported styles allow you to use one style sheet that you can override using inline, embedded, and linked styles
Imported
![Page 28: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/28.jpg)
28Multimedia for the Web Chapter 5
Imported
When multiple styles are used, the order of importance is as follows:– 1. Inline styles– 2. Embedded styles– 3. Linked styles– 4. Imported styles– 5. Default browser styles
Each style overrides the next style
![Page 29: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/29.jpg)
29Multimedia for the Web Chapter 5
Show an animation or use narration rather than text to present the idea
A hyperlink allows the user to select a button, word or graphic that “jumps” or connects to another Web page where more information is available
Explain Additional Optionsfor Implementing Text on the Web
![Page 30: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/30.jpg)
30Multimedia for the Web Chapter 5
Drop-down boxes with scroll bars and list arrows, which will display more text when clicked by the user
Explain Additional Optionsfor Implementing Text on the Web
![Page 31: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/31.jpg)
31Multimedia for the Web Chapter 5
One way to ensure that text will be displayed in a specific format is to change the text into an image
This is helpful when logos, headings, and titles need specific fonts
Graphic-based Typography
![Page 32: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/32.jpg)
32Multimedia for the Web Chapter 5
Graphic-based Typography
![Page 33: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/33.jpg)
33Multimedia for the Web Chapter 5
Portable Document Format
Portable Document Format (PDF): Developed so documents could be transported and viewed without the requirement that the users viewing the documents own or have access to the software with which the document was created
![Page 34: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/34.jpg)
34Multimedia for the Web Chapter 5
Discuss Fonts
Understand Fonts
Serif, Sans Serif, Decorative
Monospaced vs. Proportional
Style
Size
Summary
![Page 35: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/35.jpg)
35Multimedia for the Web Chapter 5
Spacing
Color
Alignment
Line Length
Define Cascading Style Sheets (CSS)
Inline
Summary
![Page 36: Multimedia for the Web: Creating Digital Excitement Multimedia Element — Text](https://reader030.vdocument.in/reader030/viewer/2022013115/56649d2b5503460f94a0094d/html5/thumbnails/36.jpg)
36Multimedia for the Web Chapter 5
Embedded
Imported
Explain Additional Options for Implementing Text on the Web
Graphic-based Typography
Portable Document Format
Summary