Transcript Web Design Chapter 4 Notes

4
Planning a Successful
Web Site: Part 2
Web Design,
3rd Edition
Chapter Objectives
 Discuss the relationship between page length,
content placement, and usability
 Complete Step 5: Design the look and feel of the site
 Complete Step 6: Specify the site’s navigation
system
 Use a checklist to review your design plan
Chapter 4: Planning a Successful Web Site: Part 2
2
Page Length, Content Placement,
and Usability
 The initial, visible screen
area is extremely
valuable space
 Place the most critical
information above and
to the left of the
potential scroll lines
– Avoid a cluttered
appearance
Chapter 4: Planning a Successful Web Site: Part 2
3
Visual Consistency
Use consistent content and design features—
repeat design features
Inconsistent appearances confuse visitors
Be careful not to over apply consistency
– Overly applied consistency makes pages boring
and uninteresting
Chapter 4: Planning a Successful Web Site: Part 2
4
Visual Consistency
Chapter 4: Planning a Successful Web Site: Part 2
5
Color and Visual Contrast
 Color schemes create unity
 Limit the number of colors in your scheme to three
major colors
 Apply color scheme to the background, graphic
art and illustrations, and text across all pages
 Choose background and text colors to provide
sufficient contrast--the greater the contrast, the
greater the readability
 Choose graphics that match or complement your
color scheme
Chapter 4: Planning a Successful Web Site: Part 2
6
Color and Visual Contrast
Chapter 4: Planning a Successful Web Site: Part 2
7
CSS and Formatting (Cascading Style Sheets)
The CSS specification allows Web designers
to use a text document, called a style sheet, to
control the appearance of one or more pages
at a site
Styles can create visual consistency
You create style rules that allow you to specify
formatting properties and their values
Style sheets centralize formatting
Chapter 4: Planning a Successful Web Site: Part 2
8
CSS and Formatting
 Inline Style
– Inserted within a tag
 Internal Style Sheet
– Inserted within a page’s heading tags
 External Style Sheet
– Saved in a folder with the site’s pages
Chapter 4: Planning a Successful Web Site: Part 2
9
CSS and Formatting
External Style Sheet
Chapter 4: Planning a Successful Web Site: Part 2
Sample Style Sheet in CSS editor
10
Page Layout
Can ensure visual consistency across a Web
site’s pages
A well-designed layout creates a sense of
balance
Display certain items consistently (in the same
place) on all pages
– Logo and name
– Links
– Content area
Chapter 4: Planning a Successful Web Site: Part 2
11
Page Layout
Chapter 4: Planning a Successful Web Site: Part 2
12
Layout Grids
 Underlying structure of
rows and columns
 Allows you to precisely
position page content
Chapter 4: Planning a Successful Web Site: Part 2
13
Tables
Arrangement of cells in rows and columns
Two common uses
– Create rows and columns of data
– Create Web page layout
Chapter 4: Planning a Successful Web Site: Part 2
14
Tables
Web page data table
Chapter 4: Planning a Successful Web Site: Part 2
Layout table
15
Tables
Position text and other elements
– Float property--sets position of element (text)
positioned outside table
– Cell spacing--amount of space between cell
contents and border
– Cell padding--amount of space between table cells
Chapter 4: Planning a Successful Web Site: Part 2
16
Table and Cell Properties
Tables
Options for defining table width
– Absolute width—will not resize if browser window
resizes
– Relative width—defined as percentage of browser
window
Each option has advantages and
disadvantages
Understand that each user will view your table
differently
Chapter 4: Planning a Successful Web Site: Part 2
18
CSS and Page Layout
CSS can divide a page into sections
– <div> tag
Chapter 4: Planning a Successful Web Site: Part 2
19
Step 5: Design the Look and Feel
of the Site
Chapter 4: Planning a Successful Web Site: Part 2
20
Step 6: Specify the Site’s
Navigation System
Well-designed navigation is easier for visitors
to understand
Draws them deeper into the Web site
Design should be both user based and user
controlled
Chapter 4: Planning a Successful Web Site: Part 2
21
User-Based Navigation
Link pages based on the visitors’ needs
Understand how visitors will view your Web
site
– Usability tests
• Formal—expensive—testing laboratory
• Informal—friends, family members, coworkers
Chapter 4: Planning a Successful Web Site: Part 2
22
User-Controlled Navigation
 Visitors move around the site in a manner they
choose
 Link back to home page
 Next page link
 Previous page link
 Well-designed navigation is essential to the success
of your Web site
 Allow site visitors the freedom to choose how they
want to move from page to page at your site
Chapter 4: Planning a Successful Web Site: Part 2
23
Link Types
 Text links
 Image Links
– Image map
 Menus
 Bars
 Tabs
Chapter 4: Planning a Successful Web Site: Part 2
 Breadcrumb trail
 Site map
 Search capability
 Frames
24
Text Links
Common way to navigate from section to
section
Target--clearly identify the page to which the
link points
Mouse over link—hidden—use caution
Rollover link—hidden—use caution
Chapter 4: Planning a Successful Web Site: Part 2
25
Image Links
You can assign a link to an image
– Image map--contains hotspots—areas on the
image to which a link is assigned
• Client-side--processed by visitor's browser
• Server-side--sent back to server, more complicated
Chapter 4: Planning a Successful Web Site: Part 2
26
Image Links
Menus, Bars, and Tabs
Best for grouping related links
Navigation menu
– List of related links
– Pop-out menu
Navigation bar
– Graphic buttons present links
• Drop-down menu
Navigation tabs
– Present links as small tabs
Chapter 4: Planning a Successful Web Site: Part 2
28
Menus, Bars, and Tabs
Navigation bar
Navigation
tabs
Drop-down
menu
Chapter 4: Planning a Successful Web Site: Part 2
29
Breadcrumb Trail
 Hierarchical outline or horizontal list that shows a visitor the
path he or she has taken from the home page to the page
currently being viewed
– Use in conjunction with other navigational elements
Breadcrumb trail
from home page
to current page
Chapter 4: Planning a Successful Web Site: Part 2
30
Site Map (Site Index)
Summary page of links to major pages at the
site
Chapter 4: Planning a Successful Web Site: Part 2
31
Search Capability
Allows visitors to quickly locate pages in your
site
Popular navigation tool for sites with large
numbers of pages
Hosted Web-site search provider can provide
search services
Chapter 4: Planning a Successful Web Site: Part 2
32
Search Capability
Chapter 4: Planning a Successful Web Site: Part 2
33
Frames
Divide Web pages into multiple areas
Can scroll individually
Receive mixed reviews
Understand the pros and cons of using frames
Chapter 4: Planning a Successful Web Site: Part 2
34
Navigation Design Tips
Create both a user-based and a usercontrolled navigation system
Place major links at the top and/or down the
left side on all pages at your site
Avoid ambiguous text in text links
Chapter 4: Planning a Successful Web Site: Part 2
35
Navigation Design Tips
Ensure that links clearly identify their target
pages.
Include a link back to the home page on
underlying pages. Include Next Page and
Previous Page links on pages to be visited
sequentially
Follow WAI guidelines for text links, grouping
links using navigation menus or bars, and
image maps (Web Accessibility Initiative)
Chapter 4: Planning a Successful Web Site: Part 2
36
Navigation Design Tips
Chapter 4: Planning a Successful Web Site: Part 2
37
Design Plan Checklist
Define the site’s purpose
Identify the site’s target audience
Determine the site’s general content
Select the site’s structure
Design the look and feel of the site
Specify the site’s navigation system
Chapter 4: Planning a Successful Web Site: Part 2
38
Chapter Summary
 Discuss the relationship between page length,
content placement, and usability
 Complete Step 5: Design the look and feel of the site
 Complete Step 6: Specify the site’s navigation
system
 Use a checklist to review your design plan
Chapter 4: Planning a Successful Web Site: Part 2
39
4
Planning a Successful
Web Site: Part 2
Web Design,
3rd Edition