Book cover slide

1
YOU WILL LEARN TO

• 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

2
YOU WILL LEARN TO

• Section 7.3
• Adjust text properties
• Summarize formatting guidelines
• Format text in Dreamweaver

3
pp. 192-197
Principles of Presentation Design
7.1
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
4
pp. 192-197
Principles of Presentation Design
7.1
Consistency and Repetition
Two features that make Web sites user-friendly
are consistency and repetition. Repetition
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 sites pages to make the site more
user-friendly. (p. 192)
5
pp. 192-197
Principles of Presentation Design
7.1
Using a Template
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.
6
pp. 192-197
Principles of Presentation Design
7.1
Using 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 sites logo and title
graphic, and helps users identify where they are
in a Web site. (p. 196)
7
pp. 192-197
Principles of Presentation Design
7.1

• Activity 7A Use a Template to Create New Pages
  (p. 193)
• Activity 7B Organize the Sites File Structure
  (p. 195)
• Activity 7C Insert Page Headers (p. 196)

8
pp. 192-197
Principles of Presentation Design
7.1
Section Assessment
Examine Which of the following items helps keep
the position and appearance of a sites main
elements the same on each page? A. template B.
title graphic C. table D. page header
A. template
9
pp. 198-201
Choosing Colors
7.2
Guide to Reading
Main Ideas A Web sites 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 scheme Web-safe color
10
pp. 198-201
Choosing Colors
7.2
Color Scheme Guidelines
When choosing a color scheme, it is important to
select colors that complement your sites theme
and purpose.
color scheme A set of selected colors used
consistently for a Web sites interface elements,
such as title graphics, navigation buttons, and
background. (p. 198)
11
pp. 198-201
Choosing Colors
7.2
Web-Safe Colors
Dreamweaver makes use of Web-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)
12
pp. 198-201
Choosing Colors
7.2

• Activity 7D Add Content and Color to the Home
  Page
• (p. 199)

13
pp. 198-201
Choosing Colors
7.2
Section Assessment
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
14
pp. 202-209
Fonts and Typography
7.3
Guide 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 alignm
ent serif sans serif
15
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site
Web designers select the texts
typography. 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)
16
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site

• Typography includes
• Font type
• Font size (in pixels)
• Font style
• Font alignment
• 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)
17
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site

• Dreamweaver features a list of standard fonts.
• Here are some examples of frequently used fonts
• Times New Roman
• Courier
• Arial

18
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site
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
19
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site
Font styles include bold, italic, or
underlined. The use of underlined text in a Web
page generally indicates a hyperlink.
20
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site
Here are examples of the four text alignment
options This text is left-aligned. This text
is centered. This text is right-aligned Justifie
d 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.
21
pp. 202-209
Fonts and Typography
7.3
Formatting Text in a Web Site
Using color on text can help highlight important
words. Use color sparingly to increase the
impact.
22
pp. 202-209
Fonts and Typography
7.3
Formatting Guidelines

• 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.

23
pp. 202-209
Fonts and Typography
7.3
Formatting Guidelines

• Fonts can be divided into two broad categories
• Serif
• Sans serif
• Most people find sans 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)
24
pp. 202-209
Fonts and Typography
7.3

• Activity 7E Format Text (p. 208)

25
pp. 202-209
Fonts and Typography
7.3
Section Assessment
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
26
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
27
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.
28
Resources
For more resources on this chapter, go to the
Introduction to Web Design Using Dreamweaver Web
site at WebDesignDW.glencoe.com.