Building aWeb SiteBuilding aWeb Site
Back to Table of Contents
Building aWeb SiteBuilding aWeb Site
Fundamentals of Web Design Fundamentals of Web Design
Creating an Attractive SiteCreating an Attractive Site
2
Building a Web SiteBuilding a Web Site
SectionSection 10-1
SectionSection 10-2
Chapter 10
Building a Web Site Building a Web Site
Section 10-1Why 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.
3Section 10-1
Building a Web Site Building a Web Site
Section 10-1 Key Terms
tags
frames
tables
hyperlinks
image map
Cascading Style Sheets
JavaScript
Dynamic HTML
Java
4Section 10-1
Building a Web Site 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.
5Section 10-1
Building a Web Site 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.
6Section 10-1
Building a Web Site Building a Web Site
Specifics of Web Design
Most beginning Web authors prefer to use WYSIWYG (pronounced “wizzy wig”) software.
7Section 10-1
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.
Building a Web Site 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.
8Section 10-1
Building a Web Site 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.
9Section 10-1
Building a Web Site Building a Web Site
Specifics of Web Design
HTML stands for “hypertext markup language.”
HTML markup consists of elements, each of which usually has two tags: an opening tag and a closing one.
tags formatting bits of code that define Web page elements
10Section 10-1
Specifics of Web Design
11
HTML Tags
Section 10-1
<p> HTML markup consists of elements, each of which usually has two tags; an opening tag and a closing one. </p>
Opening “paragraph” tag
Closing “paragraph” tag
Building a Web Site Building a Web Site
Specifics of Web Design
When you look at a frames-based 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
12Section 10-1
For ease of viewing, frames allow a site to organize and include many links on one page.
Building a Web Site 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.
13Section 10-1
Building a Web Site Building a Web Site
Specifics of Web Design
Tables were the first tools used to design Web pages.
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
14Section 10-1
Building a Web Site Building a Web Site
Specifics of Web Design
You might use a table to display product inventory and pricing information.
15Section 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
Building a Web Site Building a Web Site
Specifics of Web Design
When visitors to your site click on a hyperlink, they instantly move to another location.
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
16Section 10-1
Hyperlinks make it easy for your customers to find needed information, to select products, and to complete a purchase.
Building a Web Site 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.
17Section 10-1
Building a Web Site 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
18Section 10-1
For example, you might use a map of the United States to provide links to state-specific shipping information.
Building a Web Site 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.
19Section 10-1
Building a Web Site 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.
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
20Section 10-1
Technologies for Adding Design and Interactivity
21
Three Types of Cascading Style Sheets
Section 10-1
external style sheet external style sheet
embedded style sheet embedded style sheet
inline style sheet inline style sheet
An external style sheet is a separate document that can be linked to a page or to the site. An external style sheet is a separate document that can be linked to a page or to the site.
An embedded style sheet is placed in the page itself and controls the style of single page.An embedded style sheet is placed in the page itself and controls the style of single page.
An inline style sheet adds style rules on a line-by-line basis.An inline style sheet adds style rules on a line-by-line basis.
Building a Web Site 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.
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
22Section 10-1
Building a Web Site 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) allows Web authors to create stunning visual effects for their Web sites.
Dynamic HTML (DHTML) a hybrid technology that combines HTML, CSS, and JavaScript to add dramatic effects and animation to Web pages
23Section 10-1
Building a Web Site 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
24Section 10-1
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
Building a Web Site 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.
25Section 10-1
Building a Web Site Building a Web Site
Section 10-1 Review
What are frames? Why can they be an asset to a Web page’s appearance?
Why is WYSIWYG software so helpful to novice Web-page creators?
How are tables useful in Web-page design?
1.
2.
3.
26Section 10-1
Building a Web Site Building a Web Site
Section 10-1 Review
What is an image map?
What are the three types of cascading style sheets? What are the major differences among them?
4.
5.
27Section 10-1
Building a Web Site Building a Web Site
Section 10-2Why 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 user-friendly.
Section 10-2 28
Building a Web Site Building a Web Site
Section 10-2 Key Terms
JPEG
GIF
button
MP3
streaming video
29Section 10-2
Building a Web Site Building a Web Site
Visual Elements in Web Design
Following basic Web-design principles will help you plan a pleasing site.
30Section 10-2
Building a Web Site 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.
31Section 10-2
Building a Web Site 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.
32Section 10-2
Building a Web Site 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.
33Section 10-2
Building a Web Site 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.
34Section 10-2
Building a Web Site 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.
35Section 10-2
Building a Web Site 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.
36Section 10-2
Building a Web Site Building a Web Site
Graphics
The JPEG file format allows images to be saved with millions of colors.
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
37Section 10-2
Building a Web Site 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
38Section 10-2
The GIF file format is ideal for graphics that don’t suffer from a limited color palette.
Building a Web Site 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.
39Section 10-2
Building a Web Site 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.
40Section 10-2
Building a Web Site Building a Web Site
Graphics
Categories of Fonts
41Section 10-2
old styletransitionalmodernslab
sans serifcursivetext letterdecorative
Building a Web Site 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
42Section 10-2
Buttons on a Web site help users find what they are seeking.
Building a Web Site Building a Web Site
Multimedia
Multimedia can transform a boring Web site into a vibrant Internet destination.
43Section 10-2
Building a Web Site 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.
44Section 10-2
Building a Web Site Building a Web Site
Multimedia
There are many different audio formats that work on the Web.
However, because of their small size and high quality, MP3 files have quickly become the most popular format.
MP3 high quality audio format that works on the Web
45Section 10-2
Building a Web Site 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.
streaming audio format that enables audio files to play in real time rather than requiring a complete download
46Section 10-2
Building a Web Site 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.
47Section 10-2
Building a Web Site Building a Web Site
Section 10-2 Review
Why are font size and type significant in Web-page design?
Are Web pages with lots of graphics generally preferable to those with very few? Why or why not?
What are MP3 files? What makes them so popular?
1.
2.
3.
48Section 10-2
Building a Web Site Building a Web Site
49
Building aWeb SiteBuilding aWeb Site
End ofEnd of
Building aWeb SiteBuilding aWeb Site
Back to Table of Contents
Top Related