Transcript E-Commerce

Building a
Web Site
Back to Table of Contents
Chapter 10
Building a Web Site
Section
Section
10-1
10-2
Fundamentals of Web Design
Building a
Creating an Attractive
Web Site
Site
2
Building a Web Site
Section 10-1
Why It’s Important
Dynamic Web-page design is no accident.
Although Web-page authors must learn the
intricacies of design software and coding
methods to produce quality sites, Web-site
creation is possible today even for those with
limited computer expertise.
Section 10-1
3
Building a Web Site
Section 10-1
Key Terms
tags
frames
tables
hyperlinks
image map
Section 10-1
Cascading Style Sheets
JavaScript
Dynamic HTML
Java
4
Building a Web Site
Web-Design Basics
To do business on the Internet, you need to build a
Web site.
You can pay someone to create your site for you,
or you can design and build your own site.
Section 10-1
5
Building a Web Site
Specifics of Web Design
To build your own Web site, you either need to
learn HTML or use software that writes it for you.
Section 10-1
6
Building a Web Site
Specifics of Web Design
Most beginning Web authors prefer to use
WYSIWYG (pronounced “wizzy wig”) software.
WYSIWYG
What
you
see
is
what
you
get
WYSIWYG software allows users to design and create a
Web page without having to know HTML coding language.
Section 10-1
7
Building a Web Site
Specifics of Web Design
WYSIWYG programs such as Adobe PageMaker,
Microsoft FrontPage, and Macromedia
Dreamweaver allow users to continuously view the
page as it will appear to viewers.
Even if you’re using WYSIWYG, however, it’s good
to have at least a basic knowledge of HTML.
Section 10-1
8
Building a Web Site
Specifics of Web Design
One popular alternative to WYSIWYG software
is Macromedia Flash.
Flash enables you to create animation and make
your site more interactive.
Section 10-1
9
Building a Web Site
Specifics of Web Design
HTML stands for “hypertext
markup language.”
tags formatting bits of
code that define Web
page elements
HTML markup consists
of elements, each of which
usually has two tags: an
opening tag and a closing
one.
Section 10-1
10
Specifics of Web Design
HTML Tags
Opening “paragraph” tag
<p> HTML markup consists of elements, each
of which usually has two tags; an opening tag
and a closing one. </p>
Closing “paragraph” tag
Section 10-1
11
Building a Web Site
Specifics of Web Design
When you look at a framesbased page, you are
actually seeing several Web
pages displayed at the
same time.
frames allow for the
display of more than one
Web page in a single
browser window
For ease of viewing,
frames allow a site to
organize and include many
links on one page.
Section 10-1
12
Building a Web Site
Specifics of Web Design
Frames are Web pages within Web pages.
Frames allow a viewer to see more than one
page at a time.
For ease of viewing, frames allow a site to
organize and include many links on one page.
Section 10-1
13
Building a Web Site
Specifics of Web Design
Tables were the first tools
used to design Web pages.
Section 10-1
tables originally
developed to display
lists of information that
have multiple rows and
columns of data, tables
are now commonly used
to create Web-page
layouts
14
Building a Web Site
Specifics of Web Design
You might use a table to display product
inventory and pricing information.
Section 10-1
Product ID
Product Name
Price
22334554
CD Storage Tower
$24.59
22334555
CD Replacement Cases
$9.95
22334556
CD-R 50 Pack
$15.95
15
Building a Web Site
Specifics of Web Design
When visitors to your site
click on a hyperlink, they
instantly move to another
location.
Hyperlinks make it easy for
your customers to find
needed information, to
select products, and to
complete a purchase.
Section 10-1
hyperlink also called a
hypertext link or simply
link. Connects the
current Internet
document with another
location in the same
document, another
document on the same
Web site, or another
document somewhere
else on the Web; a blue,
underlined font usually
identifies links
16
Building a Web Site
Specifics of Web Design
Many Web authors use graphical buttons or
icons to identify links.
For example, you can use a small image of an
envelope to identify an e-mail link.
Section 10-1
17
Building a Web Site
Specifics of Web Design
Another way to create
graphical links on Web
pages is with an
image map.
image map a graphic
that has several different
hot spots; the hot spots
serve as links to more
than one location
For example, you might
use a map of the United
States to provide links to
state-specific shipping
information.
Section 10-1
18
Building a Web Site
Advanced Web
Design Tools
To add style and interactivity to your online
venture, you need to use technologies other
than HTML.
Section 10-1
19
Building a Web Site
Technologies for Adding
Design and Interactivity
Cascading Style Sheets
(CSS) allow Web designers
to use HTML for page
content, while using CSS to
apply style, layout, and
design.
Section 10-1
Cascading Style Sheets
enables Web authors to
define colors, fonts, link
colors, layout, and other
aspects of Web design; a
single style sheet applies
a cohesive design to
every Web page, allowing
authors to change the
look of a site by editing
only one document; works
in conjunction with HTML
20
Technologies for Adding Design
and Interactivity
Three Types of Cascading Style Sheets
An external style sheet is a separate document that can be
linked to a page or to the site.
external style sheet
An embedded style sheet is placed in the page itself and
style sheet
controls theembedded
style of single page.
An inline style sheet
addsstyle
style rules
on a line-by-line basis.
inline
sheet
Section 10-1
21
Building a Web Site
Technologies for Adding
Design and Interactivity
Web-site visitors want
interactivity.
Web designers can use
JavaScript to add
interactivity to a Web site.
Section 10-1
JavaScript short bits
of code that add
functionality to a Web
page; a language which
must run in connection
with a Web page;
distinct from Java
22
Building a Web Site
Technologies for Adding
Design and Interactivity
Standard HTML is static; it
can only be used to
structure and display
documents.
Dynamic HTML
(DHTML) a hybrid
technology that
combines HTML, CSS,
and JavaScript to add
dramatic effects and
animation to Web pages
Dynamic HTML (DHTML)
allows Web authors to
create stunning visual
effects for their Web sites.
Section 10-1
23
Building a Web Site
Technologies for Adding
Design and Interactivity
You can use Java to
create dynamic
animations, menus,
slideshows, and games.
Java a programming
language; distinct from
JavaScript
Java programs for use on
Web pages are called
applets.
applets a mini program
that can carry out a
specific function on a
Web page
Section 10-1
24
Building a Web Site
Technologies for Adding
Design and Interactivity
Users must have Java installed or enabled on
their browsers for the Java programming to
function.
For this reason, you should always include a set
of text-based links on your site so customers
without Java can still navigate your site.
Section 10-1
25
Building a Web Site
Section 10-1
Review
1.
What are frames? Why can they be an asset to a
Web page’s appearance?
2.
Why is WYSIWYG software so helpful to novice
Web-page creators?
3.
How are tables useful in Web-page design?
Section 10-1
26
Building a Web Site
Section 10-1
Review
4.
What is an image map?
5.
What are the three types of cascading style sheets?
What are the major differences among them?
Section 10-1
27
Building a Web Site
Section 10-2
Why It’s Important
When creating a Web page, every component
must be considered.
Particular attention should be paid to seemingly
ordinary elements, such as fonts and graphics, so
each part of the page flows together and is userfriendly.
Section 10-2
28
Building a Web Site
Section 10-2
Key Terms
JPEG
GIF
button
Section 10-2
MP3
streaming video
29
Building a Web Site
Visual Elements in
Web Design
Following basic Web-design principles will help
you plan a pleasing site.
Section 10-2
30
Building a Web Site
Color Consistency
A consistent color theme is an important part of
Web-site design.
Drastic changes in page color and imagery cause
users to become confused, making it harder for
them to find your products and services.
Section 10-2
31
Building a Web Site
Color Consistency
Background is perhaps the most important use
of color on your Web page.
Most designers recommend white or off-white
due to its high readability level.
Section 10-2
32
Building a Web Site
Visual Balance
Make sure there is a proper balance of text,
graphics, and blank space (called white space) on
your Web page.
Minimize your graphics and text, and use white
space as areas for the eye to rest.
Section 10-2
33
Building a Web Site
Graphics
Web-page graphics are any images used in
Web-site design.
Proper use of graphics can make a Web site
look and feel like a magazine, offering colorful
illustrations and powerful images instead of just
plain text.
Section 10-2
34
Building a Web Site
Graphics
Web pages with many graphics are slower to load
than those with few graphics, so they may frustrate
viewers and cause them to abandon a site.
Generally, it’s best not overload a page with
graphics that may take more than a few seconds
to load.
Section 10-2
35
Building a Web Site
Graphics
The most important thing to consider in creating
Web graphics is file size.
Large graphics files download slowly, so you need
to save your graphics in a file type that can be
compressed, or compacted to save space.
Section 10-2
36
Building a Web Site
Graphics
The JPEG file format
allows images to be saved
with millions of colors.
Section 10-2
Joint Photographic
Experts Group (JPEG)
format that provides
designers with high-quality
images that can be saved
in very small files; best
suited for photographs
37
Building a Web Site
Graphics
The GIF file format allows
images to be saved with
216 colors, but the images
can be compressed with no
loss of quality.
graphic interchange
format (GIF) format
that allows images to be
compressed with no loss
of quality; commonly
used for animations,
cartoons, and logos
The GIF file format is ideal
for graphics that don’t
suffer from a limited color
palette.
Section 10-2
38
Building a Web Site
Graphics
Font is a typography term that categorizes a
typeface or family of typefaces.
Different fonts convey different moods to the
reader.
Section 10-2
39
Building a Web Site
Graphics
Fonts that are too large or too small may
frustrate viewers.
Some font styles are not available to all viewers,
so using common typefaces helps ensure all
viewers can read the text.
Section 10-2
40
Building a Web Site
Graphics
Categories of Fonts
old style
transitional
modern
slab
Section 10-2
sans serif
cursive
text letter
decorative
41
Building a Web Site
Graphics
Web designers use
buttons to help visitors
navigate quickly and easily
from one area to another.
button graphic feature,
usually a GIF file, that
helps visitors navigate
quickly and easily from
one area to another
Buttons on a Web site help
users find what they are
seeking.
Section 10-2
42
Building a Web Site
Multimedia
Multimedia can transform a boring Web site into
a vibrant Internet destination.
Section 10-2
43
Building a Web Site
Multimedia
You can use audio in various ways on a Web site.
To use audio on your Web site, you must use
software to convert it to a format that can be
stored on the Internet.
Section 10-2
44
Building a Web Site
Multimedia
There are many different
audio formats that work on
the Web.
MP3 high quality audio
format that works on the
Web
However, because of their
small size and high quality,
MP3 files have quickly
become the most popular
format.
Section 10-2
45
Building a Web Site
Multimedia
If you plan to use long
audio clips (more than a
few minutes), consider
using a software
application to format the
files for streaming audio.
Section 10-2
streaming audio format
that enables audio files to
play in real time rather
than requiring a complete
download
46
Building a Web Site
Multimedia
The potential uses of video on the Web are
countless.
However, because video files can be quite large,
using streaming video is almost a must.
Section 10-2
47
Building a Web Site
Section 10-2
Review
1. Why are font size and type significant in Web-page
design?
2. Are Web pages with lots of graphics generally
preferable to those with very few? Why or why not?
3. What are MP3 files? What makes them so popular?
Section 10-2
48
Building a Web Site
49
End of
Building a
Web Site
Back to Table of Contents