Download Chapter 13

Chapter 13
Web Page Design Studio
Principles of Web Design, 4th Edition
Objectives
• Apply the design, layout, and CSS skills you
learned throughout this book by building a
home page for a fictional Web site
• Describe the design process and decisions a
Web designer must make in a standardsbased development process
• Test your work in multiple browsers for
consistency as you progress
• Troubleshoot compatibility issues as they
arise
Principles of Web Design, 4th Edition
13-2
The Initial Design Process
Principles of Web Design, 4th Edition
13-3
The Initial Design Process
• The clients sketched out a basic idea for the
site, shown in Figure 13-1
• They also submitted a Web site specification
document to the graphic designer providing
background information about the audience,
content, and design of the Web site
Principles of Web Design, 4th Edition
13-4
Principles of Web Design, 4th Edition
13-5
Principles of Web Design, 4th Edition
13-6
Principles of Web Design, 4th Edition
13-7
Principles of Web Design, 4th Edition
13-8
Creating the Mock-up Web
Page
Principles of Web Design, 4th Edition
13-9
Principles of Web Design, 4th Edition
13-10
Principles of Web Design, 4th Edition
13-11
Principles of Web Design, 4th Edition
13-12
Building the Masthead
• The masthead at the top of the DogWorld
Web page contains the DogWorld banner
graphic and a brown horizontal bar in two
separate rows of the opening table
Principles of Web Design, 4th Edition
13-13
Principles of Web Design, 4th Edition
13-14
Principles of Web Design, 4th Edition
13-15
Building the Small Feature
Boxes
• The left column of the DogWorld Web page
contains three small feature boxes that
highlight the content of the monthly columns,
as shown in Figure 13-10
• Each feature box contains a text reverse
heading, a photo, and some copy
Principles of Web Design, 4th Edition
13-16
Principles of Web Design, 4th Edition
13-17
Principles of Web Design, 4th Edition
13-18
Principles of Web Design, 4th Edition
13-19
Principles of Web Design, 4th Edition
13-20
Adding Content to the Small
Feature Box
• Now that you have created the basic structure
of the small feature box, you can add some
text and an image to test the box for content
presentation
Principles of Web Design, 4th Edition
13-21
Principles of Web Design, 4th Edition
13-22
Principles of Web Design, 4th Edition
13-23
Principles of Web Design, 4th Edition
13-24
Completing the Left Column
Layout
• Now that you have created a single small
feature box, you can copy it and add two
more smfeature boxes to the left column
Principles of Web Design, 4th Edition
13-25
Principles of Web Design, 4th Edition
13-26
Building the Feature Article
Section
• The middle column of the content table
contains the feature story image, two sections
of text separated by a dividing rule, a
secondary image, and a text navigation bar,
as shown in Figure 13-18
Principles of Web Design, 4th Edition
13-27
Principles of Web Design, 4th Edition
13-28
Principles of Web Design, 4th Edition
13-29
Principles of Web Design, 4th Edition
13-30
Principles of Web Design, 4th Edition
13-31
Adding a Text Navigation Bar
• The middle column of the content table
contains a text navigation bar
• This set of links is centered in the
middle column
Principles of Web Design, 4th Edition
13-32
Principles of Web Design, 4th Edition
13-33
Building the Search Section
• The right column of the content table
contains the search form, links section,
and two images: the links dog tag and
the “Next Month” feature graphic, as
shown in Figure 13-23
Principles of Web Design, 4th Edition
13-34
Principles of Web Design, 4th Edition
13-35
Principles of Web Design, 4th Edition
13-36
Adding the Search Form
• Because this is a mock-up layout, you need
to add only enough form code to simulate
how the user form interface will appear
Principles of Web Design, 4th Edition
13-37
Principles of Web Design, 4th Edition
13-38
Building the Links Section
• The links section contains two images and
some hypertext links contained within a
brown border
• You will add this content in the right column,
directly beneath the search box
Principles of Web Design, 4th Edition
13-39
Principles of Web Design, 4th Edition
13-40
Principles of Web Design, 4th Edition
13-41
Controlling the Hypertext Link
Styles
• To complete the layout, the color and font of
the hypertext links need to match the design
of the site
• You will also add a hover property to activate
a background color when a user points a
mouse to a hypertext link
Principles of Web Design, 4th Edition
13-42
Principles of Web Design, 4th Edition
13-43
Completing the Web Page
Design
• You created a complete layout based on the
graphic designer’s original design
• Although you have been testing the page in
different browsers during the development
process, it is a good idea to test a final time to
make sure the pages are displayed properly
Principles of Web Design, 4th Edition
13-44
Principles of Web Design, 4th Edition
13-45
Principles of Web Design, 4th Edition
13-46
Principles of Web Design, 4th Edition
13-47
Summary
• You can use CSS properties to create
complex designs, such as the small feature
boxes, without resorting to extra graphics
• You can use CSS to control fonts, text
alignment, color, and leading to gain
complete control over your page typography
Principles of Web Design, 4th Edition
13-48
Summary (continued)
• With CSS box model properties, you gain
precise control over the white space within
table columns and between different
elements in a page design
• Using simple tables to hold the page design
together ensures that more users will see the
Web page as you designed it for them
Principles of Web Design, 4th Edition
13-49