Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Chapter 6 Web Typography Principles of Web Design Chapter 5 Objectives • Understand principles for type design on a Web site • Use the <FONT> element • Understand why you should use Cascading Style Sheets (CSS) instead of the <FONT> element • Create style rules using CSS style rules • Selectively apply CSS style rules 2 Principles of Web Design Chapter 5 Objectives • Specify CSS font properties and block-level space values • Build and apply style classes 3 Principles of Web Design Chapter 5 Type Design Principles • • • • Choose fewer fonts and sizes Choose available fonts Design for legibility Avoid using text as graphics 4 Principles of Web Design Chapter 6 5 Principles of Web Design Chapter 6 6 Principles of Web Design Chapter 6 7 Principles of Web Design Chapter 6 8 Principles of Web Design Chapter 6 9 Principles of Web Design Chapter 6 10 Principles of Web Design Chapter 5 Using the <FONT> Element • Use <FONT> to set font size and color and to specify font substitution • With HTML 4.0, the <FONT> tag has been deprecated in favor of CSS. To ensure forward compatibility, you should strongly consider moving to CSS, and limit or replace the <FONT> element in your code 11 Principles of Web Design Chapter 6 12 Principles of Web Design Chapter 5 Using Cascading Style Sheets • Cascading style sheets offer much greater control over type characteristics than does the <FONT> element • You can use standard type conventions, such as using point or pixel sizes, setting leading, and specifying indents and alignment 13 Principles of Web Design Chapter 5 Using Cascading Style Sheets • Style rules are composed of two parts: a selector and a declaration • The selector determines the element to which the rule is applied • The declaration details the exact property values 14 Principles of Web Design Chapter 6 15 Principles of Web Design Chapter 5 Using Cascading Style Sheets • The declaration contains a property and a value • The property is a quality or characteristic • The precise specification of the property is contained in the value • CSS includes over 50 different properties, each with a specific number of values 16 Principles of Web Design Chapter 6 17 Principles of Web Design Chapter 5 CSS Selection Techniques • • • • Selecting single elements Selecting multiple elements Selecting by context Selecting with the CLASS attribute 18 Principles of Web Design Chapter 5 Selecting Single Elements The following rule selects the H1 element: <STYLE TYPE=”text/css”> H1 {COLOR: GREEN} </STYLE> 19 Principles of Web Design Chapter 5 Selecting Multiple Elements The following rule selects the H1 and H2 elements: <STYLE TYPE=”text/css”> H1, H2 {COLOR: GREEN} </STYLE> 20 Principles of Web Design Chapter 5 Selecting by Context A context-based selector lets you specify the exact context in which a style is applied. To specify that <I> elements appear blue only within <H1> elements, use the following rule: <STYLE TYPE=”text/css”> H1 I {COLOR: BLUE} </STYLE> 21 Principles of Web Design Chapter 5 Selecting with CLASS • The CLASS attribute lets you write rules and then apply them to groups of elements that you have classified. • To create a class, declare it within the <STYLE> element first. The period (.) flag character indicates that the selector is a class selector. 22 Principles of Web Design Chapter 6 23 Principles of Web Design Chapter 5 Working with <DIV> • The <DIV> element lets you specify logical divisions within a document that have their own name and style properties. • <DIV> is a block-level element. It contains a leading and trailing carriage return. • You can use <DIV> with the CLASS attribute to create customized block-level elements. 24 Principles of Web Design Chapter 5 Working with <DIV> To create a division, declare it within the <STYLE> element first. The following example specifies a division named INTRO as the selector for the rule: <STYLE TYPE=”text/css”> DIV.INTRO {COLOR:RED} </STYLE> 25 Principles of Web Design Chapter 5 Working with <DIV> Next, specify the <DIV> element in the document. Then use the CLASS attribute to specify the exact type of division. In the following example, the code defines the <DIV> element as the special class named “INTRO.” <DIV CLASS=INTRO>Some text</DIV> 26 Principles of Web Design Chapter 5 Working with <SPAN> • The <SPAN> element lets you specify inline elements within a document that have their own name and style properties • Inline elements go within the line of text, like the <B> element 27 Principles of Web Design Chapter 5 Working with <SPAN> To create a division, declare it within the <STYLE> element first. The following example specifies a span named LOGO the selector for the rule: <STYLE TYPE=”text/css”> SPAN.LOGO {COLOR:RED} </STYLE> 28 Principles of Web Design Chapter 5 Working with <SPAN> Next, specify the <SPAN> element in the document. Then use the CLASS attribute to specify the exact type of span. In the following example, the code defines the <SPAN> element as the special class named “LOGO.” Welcome to the <SPAN CLASS=LOGO>Wonder Software</SPAN> Web site. 29 Principles of Web Design Chapter 5 CSS Font Properties • • • • • • • Font families and alternates Font size Font weight Line height Letter spacing Text indent Color 30 Principles of Web Design Chapter 5 CSS Measurement Values • CSS offers a variety of measurement units, almost to the point of offering too many choices. • For example, to specify font size, you can use any of the measurement units listed in the following table. 31 Principles of Web Design Chapter 6 32 Principles of Web Design Chapter 5 Specifying Font Size The following rule sets the <BLOCKQUOTE> element to 18-point Arial: BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt} 33 Principles of Web Design Chapter 6 34 Principles of Web Design Chapter 5 Specifying Font Weight The following rule shows the addition of the Font-weight property to the rule: BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; FONT-WEIGHT: BOLD} 35 Principles of Web Design Chapter 6 36 Principles of Web Design Chapter 5 Specifying Line Height CSS allows you to specify either a percentage or absolute value for the line height, which is more commonly called leading. The following rule sets the line height to 30 points: BLOCKQUOTE {FONT-FAMILY: ARIAL; FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt} 37 Principles of Web Design Chapter 6 38 Principles of Web Design Chapter 5 Specifying Letter Spacing To adjust kerning, the printer’s term for adjusting the white space between letters, use the Letter-spacing property. The following rule sets the letter-spacing to 2 points: BLOCKQUOTE {FONT-FAMILY: ARIAL FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt} 39 Principles of Web Design Chapter 6 40 Principles of Web Design Chapter 5 Specifying Text Indent Use the Text-indent property to set the amount of indentation for the first line of text in an element, such as a paragraph. The following rule sets an indent of 24 points: BLOCKQUOTE {FONT-FAMILY: ARIAL FONT-SIZE: 18pt; FONT-WEIGHT: BOLD; LINE-HEIGHT: 30pt; LETTER-SPACING: 2pt; TEXTINDENT: 24pt} 41 Principles of Web Design Chapter 6 42 Principles of Web Design Chapter 5 Specifying Background Colors You can set the background color—the color behind the text—for any element. Use the following syntax: H2 {COLOR: WHITE; BACKGROUNDCOLOR: BLUE} 43 Principles of Web Design Chapter 6 44 Principles of Web Design Chapter 5 Specifying Block-Level Spacing Cascading Style Sheets allow you to specify property values for the space around block-level elements. There are three properties you can set: • Padding: The area between the text and border • Border: The border separates the padding and margin • Margin: The area outside the border 45 Principles of Web Design Chapter 6 46 Principles of Web Design Chapter 5 Styling with CSS In this section you’ll see how to set up a style sheet for a document using a variety of font properties. Let’s say that your job is to develop an online library of public-domain texts. You would want to set up a style sheet that you could apply to all the documents in the collection. 47 Principles of Web Design Chapter 5 Styling with CSS In this example, the content is the first chapter from Mark Twain’s A Connecticut Yankee in King Arthur’s Court. Figure 6-17 shows the page marked up with standard HTML. 48 Principles of Web Design Chapter 6 49 Principles of Web Design Chapter 5 Setting up Document Divisions • To set up a style sheet, start by determining the logical divisions for the document. • Each division will have its own unique type characteristics that can be stated as style rules. • Figure 6-18 shows the document divisions you could use for this type of document. 50 Principles of Web Design Chapter 6 51 Principles of Web Design Chapter 5 Standard Paragraph Style P { FONT-FAMILY: ARIAL, HELVETICA, SANS-SERIF; FONT-SIZE: 10pt; LINE-HEIGHT: 20pt; MARGIN-LEFT: 20px; MARGIN-RIGHT: 20px} 52 Principles of Web Design Chapter 6 53 Principles of Web Design Chapter 5 Chapter Number Style .CHAPNUMBER { FONT-SIZE: 24pt; LINE-HEIGHT: 36pt; FONT-WEIGHT: BOLD MARGIN-LEFT: 20px; BACKGROUND-COLOR: GRAY; COLOR: WHITE} 54 Principles of Web Design Chapter 6 55 Principles of Web Design Chapter 5 Chapter Title Style .CHAPTITLE { FONT-SIZE: 18pt; LINE-HEIGHT: 30pt; FONT-WEIGHT: BOLD; LETTER-SPACING: 2pt MARGIN-LEFT: 20px} 56 Principles of Web Design Chapter 6 57 Principles of Web Design Chapter 5 Credit Style DIV.CREDIT { TEXT-ALIGN: RIGHT; FONT-SIZE: 10pt; BORDER-BOTTOM: SOLID 1px BLACK; LINE-HEIGHT: 20pt; MARGIN-LEFT: 20px} 58 Principles of Web Design Chapter 6 59 Principles of Web Design Chapter 6 Summary • Use text to communicate information structure. Be sparing with your type choices, and use fonts consistently. • Remember that HTML text downloads faster than graphics-based text. Use HTML text whenever possible. • Use browser-safe fonts that will display as consistently as possible across operating systems. 60 Principles of Web Design Chapter 6 Summary • Limit use of the <FONT> element because it is deprecated in HTML 4.0. • Experiment with Cascading Style Sheets (CSS) and consider implementing them. Once you experience the results of this easyto-use language, you’ll have a hard time going back to relying on the <FONT> element. 61 Principles of Web Design Chapter 6 Summary • If you use CSS, standardize your styles by building external style sheets and linking multiple documents to them. • Test your work! Different browsers and computing platforms render text in different sizes. 62