building a web site back to table of contents. building a web site fundamentals of web design...

Building aWeb SiteBuilding aWeb Site

Back to Table of Contents


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


Section 10-1 Key Terms

tags

frames

tables

hyperlinks

image map

Cascading Style Sheets

JavaScript

Dynamic HTML

Java

4Section 10-1


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


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



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.



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



One popular alternative to WYSIWYG software is Macromedia Flash.

Flash enables you to create animation and make your site more interactive.

9Section 10-1



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


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



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.



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



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



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



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.



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



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.


Advanced Web Design Tools

To add style and interactivity to your online venture, you need to use technologies other than HTML.

19Section 10-1


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


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.



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



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



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



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


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


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


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


Section 10-2 Key Terms

JPEG

GIF

button

MP3

streaming video

29Section 10-2


Visual Elements in Web Design

Following basic Web-design principles will help you plan a pleasing site.

30Section 10-2


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


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


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


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


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


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


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


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.


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


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


Graphics

Categories of Fonts

41Section 10-2

old styletransitionalmodernslab

sans serifcursivetext letterdecorative


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.


Multimedia

Multimedia can transform a boring Web site into a vibrant Internet destination.

43Section 10-2


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


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


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


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


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


49


End ofEnd of


Back to Table of Contents

building a web site back to table of contents. building a web site fundamentals of web design...

Documents

web site section

web site webdesign basics

web pages

website creation

web authors

web page elements

webpage authors

attractive site