View
219
Download
0
Category
Tags:
Preview:
Citation preview
7 Selecting Design and Color
Section 7.1• Identify presentation design principles• Use a custom template• Add pages to a navigation structure
Section 7.2• Use color scheme guidelines• Add colors to a Web site• Identify Web-safe colors
YOU WILL LEARN TO…
7 Selecting Design and Color
Section 7.3• Adjust text properties• Summarize formatting guidelines• Format text in Dreamweaver
YOU WILL LEARN TO…
SectionSection 7.1 Principles of Presentation Design
Main Ideas
Well-designed Web pages follow the principles of consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page help make a site user-friendly.
Key Terms
consistency
repetition
page header
pp. 192-197
SectionSection 7.1 Principles of Presentation DesignConsistency and Repetition
Two features that make Web sites user-friendly are consistencyconsistency and repetition.
RepetitionRepetition helps users quickly find buttons and links they need to navigate through the site.
consistency A similarity among parts of a whole; rule that encourages designers to use similar design elements throughout a site. (p. 192)
repetition Design rule that encourages designers to duplicate specific elements on all (or most) of a site’s pages to make the site more user-friendly. (p. 192)
pp. 192-197
SectionSection 7.1 Principles of Presentation Design
Using a template for your Web site ensures a unified design.
When you use a template, the position and appearance of the main elements of the site will be the same on each page.
After you have created the pages of a site and given them page titles and file names, you will create a folder in which you will store the pages.
Using a Template
pp. 192-197
SectionSection 7.1 Principles of Presentation DesignUsing a Template
Page headers usually appear at the top of each page.
Page headers should be similar in appearance on both home pages and subpages to add consistency to a site.
page header Page element that contains graphics and/or text, such as a site’s logo and title graphic, and helps users identify where they are in a Web site. (p. 196)
pp. 192-197
SectionSection 7.1 Principles of Presentation Design
• Activity 7A – Use a Template to Create New Pages (p. 193)
• Activity 7B – Organize the Site’s File Structure (p. 195)
• Activity 7C – Insert Page Headers (p. 196)
pp. 192-197
SectionSection 7.1 Principles of Presentation Designpp. 192-197
Examine Which of the following items helps keep the position and appearance of a site’s main elements the same on each page?
A. template
B. title graphic
C. table
D. page header
A. template
Section Assessment
SectionSection 7.2 Choosing ColorsGuide to Reading
Main Ideas
A Web site’s color scheme should both appeal to visitors and create a sense of continuity throughout the pages. Using hexadecimal values for colors ensures that the colors will appear the same to all users.
Key Terms
color schemeWeb-safe color
pp. 198-201
SectionSection 7.2 Choosing ColorsColor Scheme Guidelines
When choosing a color color schemescheme, it is important to select colors that complement your site’s theme and purpose.
color scheme A set of selected colors used consistently for a Web site’s interface elements, such as title graphics, navigation buttons, and background. (p. 198)
pp. 198-201
SectionSection 7.2 Choosing ColorsWeb-Safe Colors
Dreamweaver makes use of Web-safe colorsWeb-safe colors.
Web-safe colors provide reliable color that displays the same on the different types of computers.
Web-safe colors The 216 colors that display consistently from computer to computer, giving Web designers some control over their pages’ appearance.
(p. 199)
pp. 198-201
SectionSection 7.2 Choosing Colors
• Activity 7D – Add Content and Color to the Home Page
(p. 199)
pp. 198-201
SectionSection 7.2 Choosing Colorspp. 198-201
Identify Using ______ values for colors ensures that they will appear the same to all users.
A. monochromatic
B. hexadecimal
C. single digit
D. template-based
B. hexadecimal
Section Assessment
SectionSection 7.3 Fonts and TypographyGuide to Reading
Main Ideas
Text can be formatted with font type, size, and color, as well as by line alignment and spacing. Format your site so your pages are readable, consistent, and attractive.
Key Terms
typography
formatting
font
pixel
alignment
serif
sans serif
pp. 202-209
SectionSection 7.3 Fonts and TypographyFormatting Text in a Web Site
Web designers select the text’s typographytypography.
Determining the properties of the text is called formatting.
typography The style, arrangement, and appearance of text. (p. 202)
formatting Determining the font sizes, typefaces, and alignments to use on a page (p. 202)
pp. 202-209
SectionSection 7.3 Fonts and TypographyFormatting Text in a Web Site
TypographyTypography includes:
• FontFont type• Font size (in pixels)• Font style• Font alignmentalignment• Font color
font A family of letters, numbers, and other symbols that share a consistent style. (p. 202)
pixel A single point in a graphic image; short for picture element. (p. 203)
alignment The position of text on a page, such as left, right, or center. (p. 204)
pp. 202-209
SectionSection 7.3 Fonts and Typography
Dreamweaver features a list of standard fonts.
Here are some examples of frequently used fonts:• Times New Roman• Courier• Arial
Formatting Text in a Web Site
pp. 202-209
SectionSection 7.3 Fonts and Typography
The larger the pixel value, the larger the font size.
12 point text
14 point text
16 point text
18 point text
20 point text
22 point text
24 point text
26 point text
28 point text
Formatting Text in a Web Site
pp. 202-209
SectionSection 7.3 Fonts and Typography
Font styles include bold, italic, or underlined.
The use of underlined text in a Web page generally indicates a hyperlink.
Formatting Text in a Web Site
pp. 202-209
SectionSection 7.3 Fonts and Typography
Here are examples of the four text alignment options:
This text is left-aligned.
This text is centered.
This text is right-aligned
Justified text has extra spacing among words so the text aligns on both margins. The last line of a paragraph of justified text is always left-aligned.
Formatting Text in a Web Site
pp. 202-209
SectionSection 7.3 Fonts and Typography
Using color on text can help highlight important words.
Use color sparingly to increase the impact.
Formatting Text in a Web Site
pp. 202-209
SectionSection 7.3 Fonts and Typography
Text on your Web pages should be: • Readable• Formatted consistently• Attractive
To improve readability, make sure that there is enough contrast between the text color and the background color.
Formatting Guidelines
pp. 202-209
SectionSection 7.3 Fonts and TypographyFormatting Guidelines
Fonts can be divided into two broad categories:• SerifSerif
• Sans serifSans serif
Most people find sans Most people find sans serif fonts easier to read.serif fonts easier to read.
serif Font that has an extra line or curve on the ends of certain letters or numbers. (p. 206)
sans serif A font that does not have special adornment at the end of letters or numbers. (p. 206)
pp. 202-209
SectionSection 7.3 Fonts and Typographypp. 202-209
Name The use of underlined text in a Web page generally indicates a(n) _________________.
A. hyperlink
B. justified paragraph
C. sans serif font
D. large pixel value
A. hyperlink
Section Assessment
7 Selecting Design and Color
Chapter Review
Summarize Well-designed Web pages follow which two main principles?
A. consistency and alignment
B. repetition and hyperlinks
C. consistency and repetition
D. Web-safe colors and repetition
C. consistency and repetition
7 Selecting Design and Color
Chapter Review
Evaluate Why might you want to ensure that there is enough contrast between the text color and the background color on your Web pages?
You want to make certain that there is enough contrast between your text color and your background color to make the text readable.
Recommended