Transcript Chapter 6 Developing Content and Layout

Section 6.1
• Write Web text
• Use a mission statement
• Generate and organize content ideas
Section 6.2
• Use page dimension guidelines
• Determine content placement
• Evaluate page layouts
Section 6.3
• Create a custom page template
• Insert a logo
• Insert a title graphic
• Create a table
Section 6.4
• Create navigation buttons
• Add footer information
• Add text links
• Create an e-mail window
pp.
6.1
Creating Web Site Content
Guide to Reading
Main Ideas
Key Terms
Many specific strategies
can help you write
interesting content for the
Web. You must write your
Web content clearly and
concisely.
content
inverted pyramid
150-153
pp.
6.1
150-153
Creating Web Site Content
Writing for the Web
Writing good Web
content shares some
basic principles with good
print writing.
Many Web designers
agree that Web text
should be organized in an
inverted pyramid form.
content The text and
graphics included on a Web
page. (p. 150)
inverted pyramid A type of
narrative structure that
places the most important
information at the beginning
of a story, where it will best
catch the reader’s attention.
(p. 152)
pp.
6.1
150-153
Creating Web Site Content
Writing for the Web
Text should be broken into small pieces on the Web page.
pp.
6.1
Creating Web Site Content
Writing for the Web
Example of the inverted pyramid:
150-153
pp.
6.1
150-153
Creating Web Site Content
Writing for the Web
Some practical ideas to get you started writing include:
• Generating and organizing ideas through brainstorming and
keyword lists.
• Identifying headings for organization.
pp.
6.1
Creating Web Site Content
• Activity 6A – Creating Content for a Web Page (p. 153)
150-153
pp.
6.2
Placing Items on a Page
Guide to Reading
Main Ideas
Key Terms
The best Web pages have
clear, attractive layouts,
which you can achieve by
understanding simple
Web design guidelines.
pixel
screen resolution
safe area
white space
proximity
155-159
pp.
6.2
155-159
Placing Items on a Page
Web Page Dimensions
A Web page’s dimensions
are determined by the
width and height of the
page, which are viewed
on the monitor.
The viewing area of a
monitor is measured in
pixels.
pixel A single point in a
graphic image; short for
picture element. (p. 155)
pp.
6.2
155-159
Placing Items on a Page
Web Page Dimensions
Users can change the
size of the viewing area of
their monitor by changing
their screen resolution.
The perfect page
dimension cannot be
defined, but there is a
safe area available on
every Web
browser/system
combination.
screen resolution The
amount of pixels that a
monitor can display;
measured by width and
height, such as 640 x 480.
(p. 155)
safe area Amount of space
available on every Web
browser and system
combination; generally
defined as 640 x 480 pixels,
the size of the smallest
monitor available. (p. 155)
pp.
6.2
155-159
Placing Items on a Page
Page Layout Guidelines
There are some simple
guidelines to make your
Web site user-friendly.
• Eliminate clutter
 Remove unnecessary
content
 Choose function over
form
• Create visual rest stops
 Use plenty of white
space
white space An area on a
Web page without any
content. (p. 158)
pp.
6.2
155-159
Placing Items on a Page
Page Layout Guidelines (continued)
• Emphasize important
content
• Group related items in
proximity to each other
• Align text consistently
• Keep download time short
proximity The closeness of
elements on a page that can
cause readers to make
assumptions about how
elements relate to each
other. (p. 158)
pp.
6.2
155-159
Placing Items on a Page
Page Layout Guidelines
This newspaper home page is so cluttered that viewers
cannot determine which information is important. The
redesigned site draws the eye to important news.
pp.
6.2
Placing Items on a Page
Page Layout Guidelines
155-159
pp.
6.2
155-159
Placing Items on a Page
• Activity 6B – Viewing a Page at Various Resolutions (p. 156)
pp.
6.3
Creating a Page Template
Guide to Reading
Main Ideas
Key Terms
Creating a custom
template provides
consistency among the
pages on a site and
simplifies creating the
individual pages. The
template can contain the
elements that will appear
on every page.
logo
title graphic
table
column
row
cell
160-164
pp.
6.3
160-164
Creating a Page Template
Designing a Template
Using a template is an easy way to create a new Web
page.
You can create your own custom templates if pre-made
templates do not fit your need.
pp.
6.3
160-164
Creating a Page Template
The Astronomy Club Logo and Title Graphic
You will need to place the
logo and title graphic at
the top of every page.
You will also need to add
alternative text to both the
logo and the title graphic.
logo A symbol used to
represent a business or an
organization. (p. 162)
title graphic An image that
appears at the top of every
page on a Web site. (p. 162)
pp.
6.3
160-164
Creating a Page Template
Tables
Many designers use
tables, made up of
columns, rows, and
cells, to organize a Web
page’s content.
table An item consisting of
columns and rows that is
used to organize a Web
page’s content. (p. 163)
column Cells in a table that
are arranged vertically. (p.
163)
row Cells in a table that are
arranged horizontally. (p.
163)
cell Each individual square
within a table; the
intersection of a column and
a row. (p. 163)
pp.
6.3
Creating a Page Template
• Activity 6C – Creating a Page Template (p. 161)
• Activity 6D – Adding a Logo and Title Graphic (p. 162)
• Activity 6E – Creating a Table (p. 163)
160-164
pp.
6.4
Enhancing the Template
Guide to Reading
Main Ideas
Key Terms
You can insert navigation
buttons into a template so
that when you create
individual pages, the links
will already be
established. Page footer
information typically
includes text links, an email link to the
Webmaster, and copyright
information.
navigation link
hover button
active button
interactive button
link bar
footer
166-170
pp.
6.4
166-170
Enhancing the Template
Navigation Buttons
Navigation links are
used to locate information
and navigate to other Web
pages. Two types are:
navigation link A button
that users click to locate
additional information and to
navigate to other Web
pages. (p. 166)
• Hover button
• Active button
hover button A navigation
button that changes
appearance when touched
by a mouse pointer. A type
of interactive button. (p.
166)
active button A clicked
button that is in the process
of doing something, such as
transferring the user to
another Web page. (p. 166)
pp.
6.4
166-170
Enhancing the Template
Navigation Buttons
Hover buttons are also
called interactive
buttons.
FrontPage provides many
different styles of premade interactive buttons,
and it also allows you to
create custom buttons.
interactive button Type of
button that changes to let users
know that an action has taken
place; also called a dynamic
button. (p. 166)
pp.
6.4
166-170
Enhancing the Template
Navigation Buttons
All navigation buttons can
be placed in a link bar or
navigation bar.
Link bars:
• Act as maps to the site.
• Ease the use of the page.
link bar A related group of
horizontally or vertically
aligned links; also known as
a navigation bar or table of
contents. (p. 166)
pp.
6.4
166-170
Enhancing the Template
Footer Information
Web page footers usually
contain date information,
copyright information,
contact information, and
text links.
footer The bottom portion of
a Web page; usually
contains date information,
copyright information,
contact information, and text
links. (p. 168)
pp.
6.4
166-170
Enhancing the Template
Footer Information
When visitors click the Webmaster link at the bottom of the
page, an e-mail window will pop up that contains the
Webmaster’s e-mail address. This feature allows visitors
to send messages to the Webmaster.
pp.
6.4
Enhancing the Template
• Activity 6F – Adding Navigation Buttons (p. 167)
• Activity 6G – Adding Footer Information (p. 168)
• Activity 6H – Adding Text Links (p. 168)
• Activity 6I – Adding a Link to an E-mail Window (p. 169)
166-170
Chapter 6
Resources
For more resources on this chapter, go to the Introduction
to Web Design Web site at webdesign.glencoe.com.