It is <EM>very important to carefully proofread your <STRONG>HTML code.

<STRONG>very

to format text. • You can nest tags within one another. • While most tags are used in pairs, some tags are empty tags. • The World Wide Web Consortium (W3C) provides specifications for HTML.

3. Explain how to view the source code of a Web page in Dreamweaver.

Apply It! Write HTML Code Write the HTML code to display the following sentence in a Web browser. Be sure your code formats the sentence as shown: HTML code allows information to be displayed in a Web browser.

HTML Basics

101

SECTION 4.2 USING A TEXT EDITOR Focus on Reading Read to Find Out This section discusses how to use a text editor to create a Web site. Read to find out how Web designers use HTML tags to format text and create lists on Web pages.

Main Ideas

Key Terms

Reading Strategy

You can use a text editor to create text documents that can be displayed in a Web browser. These documents must contain HTML commands. Always organize your folders and files carefully when creating a Web site.

file name extension attribute ordered list unordered list

Compare and contrast ordered and unordered lists. Use a Venn diagram like the one below (also available online). Ordered List

Unordered List

In this section, you will use the text editor Microsoft Notepad to create an HTML document. (Notepad is part of the Microsoft Windows OS) Structure It is good practice to create a folder for your Web site before you define the site. You can then create subfolders for the site’s images and pages within this main folder.

Organizing Files and Folders Why is it important to organize a Web site’s files?

Every Web site is composed of folders and files. When you define a new Web site in Dreamweaver, the program can automatically create a folder for you if one does not exist. When you use a text editor, you must manually create all of the folders that will hold your Web site’s components. It is essential that you keep your Web site’s files organized. When you add graphics and create hyperlinks in an HTML document, you must include instructions that tell the Web browser which file to access and where to find it. Having well-organized files makes it easier to add this information to your HTML document.

ACTIVITY 4A Create Folders to Organize a Site 1 Identify the location where you are storing your Web sites. Ask your teacher for help if needed. 2 In your general folder, create a new root folder named MySkills1. 3 In the MySkills1 folder, create a folder named images. You will store the images for the MySkills1 Web site in this folder. 4 Locate the DataFiles\Ch04\Images folder. Copy the data file p_border.gif into the images folder you just created.

Describe What do you store in a Web site’s images folder? 102

Chapter 4

WebDesignDW.glencoe.com

Using Notepad What are the three main parts of an HTML document?

Using Notepad is like using a word processing application. However, unlike word processors, Notepad does not contain toolbars and other features.

Creating an HTML Document in Notepad An HTML document has three main parts: the Document Type Definition (DTD), the header, and the body. These three parts are shown in Figure 4.3. Document Type Definition (DTD)

Start HTML

Header

Figure 4.3 Most HTML documents have a basic structure similar to the one shown here. What is the function of the tag?

<TITLE>DOCUMENT TITLE

Body

CONTENT

End HTML



A DTD specifies what version of HTML is used in your page. The tag tells the browser to interpret every tag as HTML code until it reaches the tag. The tag set, or header, provides information to the browser about your page, such as its title and author. This information is used to catalog the page and does not appear in the browser. The page’s title is displayed in the browser’s title bar, and not on the Web page itself. The tag set encloses the code for the content you see displayed in the browser’s window. Most HTML documents only contain one header tag set, and one body tag set.

Saving an HTML Document in Notepad There are some guidelines you should follow when naming and saving your Web site’s files.

Naming Files Keep your file names descriptive but relatively short. Use the underscore character to indicate a blank space between words in a file name. For example, name a file contact_us.html, rather than contact us.html. It is also a good idea to use only lowercase letters when naming files. Choosing File Extensions A file name extension tells the computer what type of file it is reading. Notepad automatically saves all files as text files with the extension .txt. Since Web browsers cannot read this extension, you must change it to an .html extension when you save an HTML document.

You Should Know While you can also save an HTML file with an .htm extension, it is recommended that you use .html instead. This is because some older computers will not recognize .htm, while .html is recognized by almost every server operating system.

HTML Basics

103

ACTIVITY 4B Create and Save an HTML Document 1 From the Start menu, select All Programs (or Programs)> Accessories>Notepad. 2 In Notepad, key the text shown in Figure 4.4. Leave blank lines as indicated so you can add more HTML code later. 3 Choose File>Save. In the Save As dialog box, browse to the MySkills1 folder and open it.

Figure 4.4 These tags form the basic structure of an HTML document.

4 In the File name box, key: skills1.html. Click the Save as type dropdown arrow and select All Files (this allows you to save an .html file in Notepad). Your dialog box should look like Figure 4.5. Click the Save button to save your file.

The file will be stored in the MySkills1 folder.

Figure 4.5 Always verify that you are saving the file to the correct folder and as the correct type of file.

The file extension must be .html or .htm.

Identify What is the function of a DTD?

Adding Attributes Using HTML How can attributes enhance a Web page? Shortcut To enter a left angle bracket (<), press Shift + the comma key. For a right angle bracket (>), press Shift + the period key.

104

Chapter 4

Some HTML tags can contain properties, or attributes. An attribute is an instruction that further specifies a tag’s characteristics. Attributes allow you to assign colors, styles, and alignment to a page. You place attributes in opening tags. The attribute has a name, an equal sign (=), and a descriptor that must appear in quotes to conform to HTML specifications. The attribute must also be lowercase to meet specifications.

Font Color Attributes In HTML, you use the attribute color to change the text’s color. The descriptor then specifies which color to use. In the following example, the attribute color=“green” will make the word grass appear green in a Web browser. When viewed in a browser, the code will look like Figure 4.6.

They say the grass is greener over there.

You Should Know The align attribute does not work with the tags or <STRONG>. This is because those tags change the style of the text, but not the alignment.

HTML Basics

105

ACTIVITY 4C Add Color and Format Text Using HTML 1 To open your skills1.html document, open Notepad and choose File>Open. Under Files of type, select All Files.

Troubleshooting When opening an HTML file in Notepad, make sure you select All Files. Otherwise, files with an .html or .htm file extension may not appear in the dialog box.

2 To add the background color yellow to the page, edit the opening tag so that it appears as follows: . 3 Move the insertion point to the line below the body tag. To create the blue heading for the page, key:

Web Design Skills

. 4 Press Enter twice. To create the first dark blue subheading, key:

Skills I Already Have

. 5 Press Enter twice. To create the second dark blue subheading, key:

Skills That I Will Learn

. 6 Select File>Save to save your document.

Define What is an attribute?

Creating Lists Using HTML What is the difference between an ordered and an unordered list?

Lists help make text easier to read and add visual interest to a page. Lists can also help readers identify key points on a page more quickly.

Types of Lists There are two types of lists (see Figure 4.7): ◆ An ordered list displays items that must appear in a particular sequence, such as the steps required to complete a task. Use the tags

to create an ordered list. ◆ An unordered list contains items that can appear in any order. Use the tags

to create an unordered list. When you create either an ordered or an unordered list, each item in the list is contained within the tags

.

Figure 4.7 Because numbers precede each item in an ordered list, these lists are often called numbered lists. A bulleted list is an example of which type of list?

106

Chapter 4

Ordered List

Unordered List

1. Open Notepad.

■

Starting tags

2. Enter HTML code.

■

Ending tags

3. Save the file.

■

Nested tags

ACTIVITY 4D Create an Unordered List Using HTML 1 Open your skills1.html document in Notepad. Position the insertion point at the end of the line that includes the text Skills I Already Have. Press Enter. Key:

. Press Enter. 2 Enter the code for the first unordered list (see Figure 4.8). Press Enter after keying each item. 3 Key

to indicate the end of the first unordered list. 4 Position the insertion point at the end of the line that includes the text Skills That I Will Learn. Press Enter. Key:

. Press Enter. Key the code for the second unordered list (see Figure 4.8). Press Enter after keying each item.

Troubleshooting As you enter code into Notepad, be sure to proofread your work carefully. Missing elements or misspelled HTML tags can cause your Web page to display incorrectly.

5 Key:

to indicate the end of the second unordered list. Select File>Save. Your document should look like Figure 4.8. 6 With your teacher’s permission, select File>Print. In the Print dialog box, click Print. Carefully proofread the printed document. Make needed corrections and save again. Ask your teacher how you should include your name in the document. Save and close your document.

Figure 4.8 Make sure that each item in the unordered list has an opening and ending tag.

First unordered list

Second unordered list

Identify What are the tags for the two types of lists?

HTML Basics

107

Viewing an HTML Page How can you view a Web page created in a text editor?

When you use a text editor, you cannot see how your page will appear in a Web browser while you are creating it. Instead, you must save the HTML document and then view it in a browser. If you need to make changes, reopen the page in Notepad, make corrections, resave it, and then reopen the file in the browser.

ACTIVITY 4E View HTML in a Browser 1 Start your Web browser. Select File>Open (or Open File). Browse to your MySkills1 folder. Select skills1.html and click Open. 2 Click OK. Your code is translated into a Web page (see Figure 4.9). Select View>Source to view your page’s source code. Close your browser.

Summarize Why do you have to view a page created by a text editor in a browser?

Figure 4.9 HTML document viewed in a Web browser.

Section 4.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• When creating a Web site, organize its files and folders so that you can easily locate various page components.

1. Define file name extension, attribute, ordered list, unordered list.

4. Analyze Why should you have a specific plan when organizing your Web site’s files and folders?

2. Discuss two guidelines for naming files.

5. Compare and Contrast When is it better to use an unordered list? An ordered list? Give examples and explain your choices.

• Attributes within HTML tags specify characteristics such as font colors. • To view the Web page you created in a text editor, you must open it in a Web browser.

108

Chapter 4

3. Explain why an HTML file must have an .html extension.

Apply It! Create an Ordered List Using Notepad, create an ordered list of your five favorite books with your most favorite book listed first. With your teacher’s permission, print your Notepad document and then print the page from a browser.

SECTION 4.3 ENHANCING AND TESTING YOUR HTML PAGE Focus on Reading Read to Find Out This section explains how to enhance a Web page by using HTML to insert graphics and links. Pay close attention to the HTML tags that are used to create these links.

Main Ideas

Key Terms

Reading Strategy

Use image tags to insert graphics using HTML. You can create links by using an anchor tag to specify the clickable area. A link can be absolute or relative. Web pages must be tested.

anchor tag text link graphic link relative link absolute link debugging testing

Compare and contrast absolute and relative links. Use a chart like the one below (also available online). Absolute Links

Relative Links

You create Web pages in stages. Adding new components one at a time allows you to correct errors as you go.

Adding Images Using HTML How does an image tag work?

You use the image tag to insert an image into a Web page. When a browser loads the page, the tag locates the image and displays it in the browser. An image tag contains five common attributes: ◆ src: specifies the source location of the image. ◆ alt: gives the browser an alternative text message to display if the image is missing.

You Should Know When creating an image tag, you should always use the src and alt attributes. The align, border, width, and height attributes are optional.

◆ align: wraps text around the image. ◆ border: places a border around an image. ◆ width and height: specifies the image’s width and height. src

alt

align

border

WebDesignDW.glencoe.com

width and height

HTML Basics

109

ACTIVITY 4F Insert an Image Using HTML 1 Open your skills1.html page in Notepad. 2 Position the insertion point at the end of the

heading and press Enter. The insertion point should be positioned as shown in Figure 4.10.

Figure 4.10 Position your insertion point as shown in the figure.

Insert image tag here

3 Key the following to insert the border graphic stored in your Web site’s images subfolder: . Save your document.

List What are the five common image tag attributes?

Inserting Links Using HTML What type of links can be inserted into a Web page?

Hyperlinks can be categorized as external, internal, or intrapage, depending on where they send the user. You use anchor tags to insert links into an HTML document.

Using Anchor Tags An anchor tag identifies what is clicked on and where the link takes the user. The tag set is used to create all links. This tag set uses the href attribute (short for Hypertext Reference) to tell the Web browser where it needs to link to. The attribute contains hyperlink information that directs a Web browser to a new file or Web site.

Text and Graphic Links Hyperlinks can also be categorized according to how users activate the link. For example, you can make any text or image into a hyperlink. In Figure 4.11 on the next page, both the text link and the graphic link will take you to the Century Public Library home page.

110

Chapter 4

Figure 4.11 HTML allows you to create links that have text or graphic anchors. Why would you use a graphic link instead of a text link?

Text link Graphic link

Text Links A text link is text a user clicks to activate a hyperlink. For example, the following code tells the browser to display the text “Century Public Library” as a hyperlink: Century Public Library

Graphic Links A graphic link is an image a user clicks to activate a link. The anchor tag for a graphic link identifies the image users must click to activate the link. For example, in the code below, users must click the book.gif graphic to activate the link to the Century Public Library. The anchor tag for this link contains a nested image tag:

Relative versus Absolute Links Text and graphic links can be categorized as either relative or absolute.

Relative Links The code used to create a relative link contains the name of the file being linked to. For example, in the relative link below, users must click the text More Design Tips to go to the Web page file design_tips.html. A relative link only works if the document being linked to is in the same Web site folder as the document containing the link. The link is relative because it links pages within the same Web site. As long as the Web site’s file structure does not change, the relative links will work. It is a good idea to use relative links when linking to files within a Web site. More Design Tips

WebDesignDW.glencoe.com

Activity 4.2 Identify Absolute and Relative Links Learn more about absolute and relative links by visiting WebDesignDW.glencoe.com.

HTML Basics

111

Absolute Links The code used to create an absolute link contains the complete URL or path of the file being linked to. For example, the links to the Century Public Library are absolute links because they contain the complete URL for the library’s Web site. An absolute link requires the full file path because it absolutely must follow this path to link to the file. External links (links to objects outside a Web site) are often absolute links.

ACTIVITY 4G Insert Absolute Links Using HTML 1 Open your skills1.html page in Notepad. 2 Place the insertion point at the beginning of the closing tag. Press Enter twice. Place the insertion point above the tag. 3 Key:

<STRONG>Here are some additional links on Web design and related topics:

. 4 Press Enter. Insert this link: World Wide Web Consortium
.

Figure 4.12 The links appear at the bottom of the Web page.

5 Press Enter. Insert this link: Indiana University Webmaster. 6 Save your Web page. It should look similar to Figure 4.12.

Links inserted here

Describe What is the difference between absolute and relative links?

112

Chapter 4

Testing a Web Page Why is it important to test Web pages?

Debugging refers to locating and correcting any obvious errors in your code. You should try to debug your work regularly as you build your sites. A number of applications have been developed to debug HTML code. These applications are called HTML validators. With an HTML validator, you submit your HTML file and, if the code contains errors, the validator generates an error list. The World Wide Web Consortium Web site offers a validator for checking Web page code. With your teacher’s permission, you can use this validator to check your own HTML documents. Testing involves checking the page to make certain that it displays as designed. Test your site in both Internet Explorer and Netscape Navigator and in any other browser you think your audience may use. Always double check that links work properly. External links are particularly important to check because sometimes pages get removed from the Web or their URLs change.

ACTIVITY 4H Test an HTML Document 1 Open your skills1.html file in your browser. Your screen should look similar to Figure 4.13.

Figure 4.13 The finished Web Design Skills page as displayed in Microsoft Internet Explorer.

HTML Basics

113

2 Check the following items: ◆ Does the text contain any spelling errors? ◆ Do the headings display properly? ◆ Does the image appear in the correct location? ◆ Do bullets appear in front of each item in the unordered lists? ◆ Does each link work properly?

3 If you need to make corrections, first close your browser, then open the page’s file in Notepad. Analyze the source code to locate the errors. Fix any errors that you identify. Save the file. 4 Test the page again in a Web browser. Open your page in other browsers if possible. Check the items in Step 2. Make any corrections. 5 Save the file, and test the page again. 6 Be sure to view the page in as many browsers as possible. Also try to view the page on different operating systems.

You have used a text editor to create a simple Web page. When you know HTML code, using a text editor can be an inexpensive way to develop a basic Web site. Summarize What does it mean to debug code?

Section 4.3 Assessment Reading Summary • The tag inserts

a graphic into a page. Always include the src and alt attributes.

• The tag inserts a link. The href attribute specifies the location (or object) being linked to. • An absolute link lists the complete URL or path of the linked file. A relative link contains only a partial URL or folder location. • You must test a newly created Web page in several browsers to make certain it works properly.

114

Chapter 4

What Did You Learn?

Critical Thinking

1. Define anchor tag, text link, graphic link, absolute link, relative link, debugging, testing.

4. Analyze Links Does the following HTML statement contain an absolute link or a relative link? Explain.

2. List and describe the two attributes that you should use with every tag. 3. Describe the process of testing a Web site.

Product List

5. Evaluate Links When should you use an absolute link? A relative link? Give examples and explain your choices.

Apply It! Insert an Image Write the HTML code to insert an image named frame.gif into a Web page. The image file is stored in the site’s images folder. Center the image and include an alternate text message to display.

Web Languages

W

eb designers who wish to do more than simply display text and graphics need tools beyond HTML. Newer Web languages are enabling designers to create Web pages that can perform complicated and meaningful tasks.

Extensible Markup Language (XML) Whereas HTML tags only format documents, XML uses tags that let the computer identify what the information is. In this way, XML documents function more like databases than like traditional documents. For example, if you are searching HTML pages for someone named “Bill,” you might also find pages on congressional bills, electricity bills, duck bills, etc. Searching XML documents for tags that contain the word Bill would give you better results.

XML tags can be used to make text readable across many applications and platforms.

XML is changing the way business is done on the Web. Multiple computers are more easily able to connect and work from different locations. Because XML-tagged documents can identify each piece of information, Internet searches are also smarter.

JavaScript (Java) JavaScript is a computer programming code that is read by a built-in interpreter inside an Internet browser. This means it can be used to manipulate and interact with elements on a Web page. While JavaScript is currently used for simple tasks, such as checking form data for validity, or serving as the connector between different technologies, its crossplatform design is changing the world of technology. Integrated cell phones, PDAs, and portable computer systems will be better able to communicate over separate, and different, operating systems.

1. Research Languages Research new or emerging languages used for Web site development. Compare and contrast at least two of these new languages with HTML.

2. Evaluate Why do you think new markup and scripting languages and methods are always being developed? Why is HTML alone not enough to develop the kinds of Web sites people now demand? HTML Basics

115

SECTION 4.4 DREAMWEAVER VERSUS NOTEPAD Focus on Reading Read to Find Out The main purpose of this section is to show the advantages of using a Web site development application instead of a text editor. As you read about adding features in Dreamweaver, remember how you added these same features using Notepad. Read to find out how Dreamweaver makes many of these tasks easier and more efficient.

Main Ideas

Key Terms

Reading Strategy

A Web site development application allows you to create Web sites by clicking buttons instead of typing HTML commands into a text document.

color palette border

Identify the steps involved in testing a Web page. Use an organizer like the one below (also available online).

➠

➠

In the previous section, you used Notepad to create a single Web page named Web Design Skills. In this section, you will re-create this page using Dreamweaver. While both versions are composed of HTML commands, you will see that creating the page in Dreamweaver is much different from creating it in Notepad.

Adding Color and Formatting Text in Dreamweaver How is applying formatting different in Dreamweaver than in Notepad?

A major advantage of using Dreamweaver is that you can see approximately how your final page will appear while you are working on it. This allows you to make adjustments, such as changing font size or background color as you go.

Selecting a Background Color in Dreamweaver Dreamweaver provides different ways to select background colors for Web pages. To select a color, you can: ◆ enter hexadecimal numbers into the Background color box in the Page Properties dialog box. ◆ choose a color from a color palette, which is a menu of colors available in the Dreamweaver program. In the next activity, you will create a Web site and set the background color of a page in that site. This will provide the basic framework in which to build your Web site. 116

Chapter 4

WebDesignDW.glencoe.com

ACTIVITY 4I Create and Format a Page in Dreamweaver 1 Start Dreamweaver. On the Start page, in the Create New column, click Dreamweaver Site. Name the new site MySkills2. Follow the steps to define a new Web site (see You Try It activity 2A for a review of these steps). 2 In the Create New column, click HTML. Make certain you are viewing the new file in Design view. Choose File>Save As (or press Ctrl + Shift + S). In the Save As dialog box, save your HTML file as skills2.html. 3 On the Properties inspector, click the Page Properties button. In the Page Properties dialog box, click the Page font drop-down arrow and select Georgia, Times New Roman, Times, serif. 4 Click inside the Background color box. Key #FFFFCC or select light yellow from the palette (see Figure 4.14).

Figure 4.14 Key your background color into the Background color box.

5 Under the Category column, click Title/Encoding. In the Title box, key My Web Design Skills. The dialog box should look like Figure 4.15. Click OK. Click the Save button.

Figure 4.15 The options in the Page Properties dialog box change when a different category is selected.

HTML Basics

117

Creating Headings and Lists in Dreamweaver In this activity, you will add both headings and unordered lists to your Web page. To create an unordered list, select the text and click the Unordered List button on the Properties inspector. To create an ordered list, click the Ordered List button instead.

ACTIVITY 4J Add Headings and Unordered Lists in Dreamweaver 1 Make certain that your skills2.html page is open in Design view. With the insertion point at the top of the page, key: Web Design Skills. 2 Select the heading Web Design Skills. In the Properties inspector, click the Format drop-down arrow and choose Heading 1. 3 In the Properties inspector, click the Align Center button to center the heading. 4 On the Properties inspector, click in the Text color box and key: #6666FF. Your screen should look like Figure 4.16. Press Enter.

Text color

5 In the Document window, position the insertion point at the end of the heading and press Enter. Key the subheading: Skills I Already Have.

Figure 4.16 Key a hexadecimal value into the Text color box to change a font’s color in Dreamweaver.

6 Select the subheading and click the Align Left button on the Properties inspector. The subheading moves to the left margin. 7 With the subheading still selected, click the Format drop-down arrow and choose Heading 2. 8 In the Text color box, replace the hexadecimal value of #6666FF with #000099. Make sure the subheading is still selected and press Enter. 9 Position the insertion point at the end of the subheading and press Enter. On the Properties inspector, click the Unordered List button. 10 Key the first bulleted item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I can operate my computer’s hardware. I can use Dreamweaver to create simple Web sites. I can insert previously made graphics into my Web pages. I can insert links into my Web pages.

118

Chapter 4

11 Press Enter twice to move the insertion point down two lines. This will also end the unordered list. Key: Skills That I Will Learn. 12 Select the second subheading and format it Heading 2. In the empty Text Color box, key the hexadecimal value of #000099. Make sure the second subheading is still selected and press Enter. 13 Position the insertion point after the subheading and press Enter. 14 On the Properties inspector, click the Unordered List button. 15 Key the first item in the list below. Press Enter to create the next bulleted item. Continue until you have entered all the items. I will learn to use Notepad to create HTML documents. I will learn to create Web pages that are well designed. I will learn to use color and images appropriately. I will learn to create and modify graphics. 16 Proofread your text. Your Web page should resemble Figure 4.17. 17 Save your Web page.

Figure 4.17 You use the Unordered List button to create a bulleted list in Dreamweaver.

Summarize How can you select background colors in Dreamweaver? HTML Basics

119

Adding Graphics and Links How does a border enhance a Web site?

In the following activity, you will add a border to your page. A border is a visual break on the page. It adds visual interest and helps separate items on a page.

ACTIVITY 4K Insert a Graphic and Links in Dreamweaver 1 Open the general folder that contains your MySkills2 folder. Open your MySkills2 folder. Inside this folder, create a new folder named images. Troubleshooting If you have trouble opening the graphics file, check with your teacher to make sure a graphics editor has been selected.

2 Open the DataFiles\Ch04\Images folder. Select the file p_border.gif. Copy this file to the images folder in your MySkills2 folder. 3 In Dreamweaver, make certain that your skills2.html page is open in Design view. Position the insertion point at the end of the Web Design Skills heading. Press Enter. 4 On the Insert toolbar, click the Images button (make sure the toolbar is in Common view). In the Select Image Source dialog box, click the Look in drop-down arrow and browse to your MySkills2 folder. Open the images folder and select the p_border.gif file. Click OK. The border image is inserted into your Web page. 5 Position the insertion point at the end of the last bulleted item on your page. Press Enter two times. This will move the cursor down two lines and end the bulleted list. 6 On the Properties inspector, click the Bold button. Click the Size drop-down arrow and select 16. Key the following: Here are some additional links on Web design and related topics: 7 Press Enter. Click the Bold button to deselect it. Make sure the Size is still set to 16. 8 With the Insert toolbar in Common view, click the Hyperlink button. In the Hyperlink dialog box, in the Text box, key: World Wide Web Consortium. In the Link box, key http://www.w3.org. Your dialog box should look like Figure 4.18. Click OK.

Figure 4.18 In the Hyperlink dialog box, enter both the text for the text link and the link’s URL.

120

Chapter 4

9 Position the insertion point after the link. Press Enter. 10 Click the Hyperlink button. In the Text box, key: Indiana University Webmaster. In the Link box, key: http://webmaster.indiana.edu. Click OK. Click once after the hyperlink to deselect it. If necessary, select the text and change its text size to 16. Your page should look similar to Figure 4.19.

Figure 4.19 Final page created using Dreamweaver.

11 To view the source code for your Web page, switch from Design view to Code view. Dreamweaver automatically enters the HTML code for you, as shown in Figure 4.20. Switch back to Design view. Save your work.

Figure 4.20 Use Code view to view the source code for your Web page.

Define What is a border?

HTML Basics

121

Testing a Web Page Why is it important to test a Web page?

Whether you use Notepad or Dreamweaver to create your HTML document, you must test your page. Visitors will not trust a page that contains errors or broken links. Carefully proofread and spell check your Web page. Always examine your page in more than one browser to make sure each line works properly and check all of your hyperlinks.

ACTIVITY 4L Test a Web Page in Dreamweaver 1 Open your skills2.html page in Design view. Position the insertion point before the Web Design Skills heading. 2 From the Text menu, select Check Spelling. The Check Spelling dialog box opens if spell check detects an error. Key the correct spelling in the Change to box. You can also select the correctly spelled word from the Suggestions list, if available. Select Change when finished. 3 With your teacher’s permission, select File>Print. Proofread and correct your page. Save your corrections. 4 Choose File>Preview in Browser. View your page in the Web browsers available on your computer. Test your hyperlinks to be sure they take you to the correct Web pages. Make certain the page components, such as headings, bullets, and hyperlinks, display properly. Close your browser(s) when finished. Save your Web page. Exit Dreamweaver.

Identify What menu do you use to check spelling in Dreamweaver?

Section 4.4 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• A Web page that was created using Notepad can also be created using Dreamweaver.

1. Define color palette, border.

4. Analyze What are the advantages of using hexadecimal numbers for colors rather than using the Dreamweaver color palette?

• Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. • Careful proofreading and testing are a vital part of creating a Web page.

122

Chapter 4

2. Describe each alignment button available in Dreamweaver. 3. Explain how you would create an unordered list in Dreamweaver.

5. Compare and Contrast How was creating hyperlinks in Dreamweaver different from creating them in Notepad?

Apply It! Change Colors In Dreamweaver, open your MySkills2 site. Find three colors in the hexadecimal chart in Appendix C. Enter each color in the background color field of the Page Properties dialog box. Which background color looks best? Why? Do not save your changes.

CHAPTER 4

Reading Review

SECTION 4.1 HTML Coding Key Terms Hypertext Markup Language (HTML), 98 HTML tag, 98 starting tag, 98

ending tag, 98 nested tag, 99 empty tag, 99 source code, 101

SECTION 4.3 Enhancing and Testing Your Page Key Terms anchor tag, 110 text link, 111 graphic link, 111 relative link, 111

absolute link, 112 debugging, 113 testing, 113

Main Ideas ■ HTML tags tell the Web browser how to display a ■ ■ ■

■

Web page’s content. You can use tags such as <STRONG>, <EM>, and

to format text. You can nest tags within one another. While most tags, such as and , are used in pairs, some tags, such as
and

---

, are empty tags. The World Wide Web Consortium provides specifications for various Web-based technologies, including HTML.

Main Ideas ■ The tag inserts a graphic into a page. The

■ ■ ■

■

SECTION 4.2 Using a Text Editor

src attribute specifies the graphic’s file location, and alt provides an alternative text message to display. The tag inserts a link. The href attribute specifies the location (or object) being linked to. A link’s anchor can be either text or an image. An absolute link lists the complete URL or path of the linked file. A relative link is used with local files and contains only a partial URL or folder location. You must test a newly created Web page in several browsers to make certain it displays properly and all of its links work correctly.

Key Terms file name extension, 103 attribute, 104

ordered list, 106 unordered list, 106

SECTION 4.4 Dreamweaver Versus Notepad

Main Ideas

Key Terms

■ When creating a Web site, organize its files and

color palette, 116

■

■ ■

■

folders so that you can easily locate various page components. You must save a Web page file with an .html or .htm extension so that browsers can identify it as an HTML document. Attributes within HTML tags specify characteristics such as background and font color and font size. Ordered (or numbered) lists contain sequential items, while unordered (or bulleted) lists contain items that can appear in any order. To view the Web page you created in a text editor, you must open it in a Web browser.

border, 120

Main Ideas ■ A Web page that was created using Notepad can ■ ■ ■ ■

also be created using Dreamweaver. Because Dreamweaver provides a WYSIWYG editor, you do not need to enter HTML tags. You can apply styles to text, such as font color and font size, to change its appearance. You can insert graphics and links by entering the Web page or file location into a dialog box. Careful proofreading and testing are a vital part of creating a Web page.

HTML Basics

123

CHAPTER 4

Review and Assessment

AFTER YOU READ Exchange Memory Tools Work with three other students to create a poster or handout that illustrates or explains four of the most helpful memory aides developed by the group. These memory aides will help the group to remember important steps or concepts. Ask your teacher for permission to display the posters in the classroom.

Reviewing Key Terms 1. Which of the following is NOT an HTML tag: a. b.

c. d. 2. Explain how nested tags are different from empty tags. 3. What does it mean to view a Web site’s source code? 4. What is the purpose of an attribute? 5. Describe the tag sets that are used to create ordered and unordered lists. 6. What is the purpose of an anchor tag? 7. Rewrite this statement to make it true: When a link statement contains the complete URL of the site being linked to, it will create a relative link. 8. What does it mean to test a Web site?

Understanding Main Ideas 9. Explain the need for starting and ending tags. 10. Describe why it is important that your files and folders be organized. 11. Discuss the purpose of the <TITLE> tag. 12. Explain the difference between an unordered list and an ordered list. 13. Describe how to view a Web page you created in a text editor. 14. Discuss why you should always include the alt attribute in an image tag. 124

Chapter 4

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

15. Describe the three basic parts of an HTML document and summarize their function. Part

DTD

Header

Body

Function

➠ ➠ ➠

16. Explain the difference between testing a Web page and debugging it.

Testing

Debugging

Critical Thinking 17. Analyze HTML The W3C Web site states that “HTML is the common language for publishing on the World Wide Web.” What does this statement mean? 18. Write HTML Write the HTML code to display the following sentences: The American flag is red, white, and blue. It has thirteen stripes and fifty stars. When you are finished, view your HTML code in a Web browser. Make sure your sentences are formatted as shown. Reopen your HTML document in Notepad and add a background color to your page so all of the text will display properly.

CHAPTER 4

Review and Assessment

19. Evaluate Applications Create a table like the one below with two columns labeled Notepad and Dreamweaver. In the first column, list any advantages you found when creating a Web page in Notepad. In the second column, list any advantages you found when creating the same Web page in Dreamweaver. Below the table, write a few sentences summarizing what you discovered.

Read the paragraph and table below and then answer the question.

An HTML document is composed of instructions, or tags. These tags tell Web browsers how to display the content contained in a Web page. HTML Terminology

Notepad

Dreamweaver

Advantage

Advantage

Advantage

Advantage

20. Predict Outcomes A Web site’s image files are stored in the images folder. What would happen if you created a link to an image file that was not stored in the images folder? 21. Compare and Contrast relative links and absolute links. Why are internal links usually relative links? Why are external links usually absolute links? Explain your answer and provide examples, if possible.

starting tag

Tag that tells browser when formatting should start

ending tag

Tag that tells browser when formatting should end

nested tag

Tag enclosed within another set of tags

empty tag

Starting tag that does not require an ending tag

According to the table, which of the following statements is true?  HTML coding always requires a starting tag, but it does not always require an ending tag.  You use an empty tag to tell the browser when formatting should end.  If you want to be sure your tag will format the text properly, you need to nest the tag.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.

22.

+

Result

23.

+

Result

24.

+

+

Result

 A nested tag has no text between the brackets.

WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 4.

Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 4. WebDesignDW.glencoe.com

HTML Basics

125

CHAPTER 4

Activities

1. MAKING CONNECTIONS Social Studies—Perform an Online Search Tim Berners-Lee was the individual who created HTML. Time Magazine Online voted Tim Berners-Lee into the category of the top 100 Thinkers and Scientists. Learn more about this individual. ◆ Use the Internet or other sources to research the contributions that Berners-Lee has made to the development of the Web. ◆ Then, write a two-page paper on how his work has changed the world we live in. As part of your paper, include your ideas about what the world would be like now if Berners-Lee had never made his contributions to Web development. Use a Cause-Effect chart like the one below to organize the possibilities. Internet search engines do not exist

➠

Information difficult to find on Internet

2. STANDARDS AT WORK Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. (NETS-S 4)

Create an HTML Quick Reference Table Create a quick reference guide for your computer lab or classroom. The guide should describe common HTML tags and should include an example showing how each tag is used. Make of list of tags to be included. Organize the tags into the following categories: ◆ Structure

◆ Lists (both ordered and unordered)

◆ Headings (assume six levels of headings)

◆ Links (absolute and relative)

◆ Paragraph and character formats

◆ Images

Create a table similar to the one below. Proofread your work carefully. With your teacher’s permission, prepare copies of the reference table for your computer lab or classroom.

TAG NAME Structure ...

126

Chapter 4

DESCRIPTION

EXAMPLE

CHAPTER 4

Activities

3. TEAMWORK SKILLS Create Web Design Biographies With your teacher’s permission, gather the names of each member in your team along with a short biography. As a team, use HTML to create a Web page that includes this information. Separate each team member’s information with a horizontal rule. Use the

---

empty tag to add this line. As your team develops the page, write a specification sheet describing the formats you have chosen. Use a table to record the background color, fonts, font colors, and font sizes that you have selected for your Web page.

4. CHALLENGE YOURSELF Create a Table Using HTML Key the following code in Notepad. Add a DTD, tags, and header to your HTML document. Provide the page title Challenge Yourself Table.

<STRONG>Width 100 x Height 200

Width 350 x Height 200

Save the file and view the results in a browser. Then, perform the following steps.

1 Reopen your source code. 2 Change the text in the first and third cells. 3 View the changes in a browser.

HTML Basics

127

CHAPTER 4

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Create a Home Page Using HTML   

  

Create a home page using HTML that lists three movies you have seen and would recommend to others. Create a folder named Movies_Seen. Use Notepad to create a basic HTML document. The page’s main head will be Movies I Recommend. Save the file as index.html in the Movies_Seen folder. Use an image tag to insert the data file movies.gif (located in Data Files/Ch04/Images). Save the page in an images folder in your Movies_Seen folder. Adjust the image’s height and width as needed and add alternative text. Select appropriate colors for the background and fonts. Change fonts as needed. Save your page. View the results in a browser. Make any necessary changes. View the results after making the changes.

2. Create a Links Page Using HTML Create a second page that will link to your home page.  Use Notepad to create a second page titled Movie Summaries. Save the file as summaries.html in the Movies_Seen folder.  List each movie’s title as a heading. Key a brief paragraph summarizing each movie (but do not give away the ending!).  Select appropriate colors for the background and fonts. Change fonts as needed. Save your page.  Open the index.html page. Add relative links from the home page to the summaries.html page. Make the title of each movie you are recommending into a text link that takes the user to the Movie Summaries page. Use the following format to add your links: File linking to

Text link

movie title

 Open the index.html page in your Web browser. Test all links. Make changes as needed and retest your page if necessary.

128

Chapter 4

CHAPTER 4

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Create a Home Page Using HTML You have been assigned to develop a Web site for a cross-cultural travel club. You decide that the club’s home page will have a light yellow background with a large red heading that reads: Cross-Cultural Travel Club. You plan to add a travel-related image to the page. The page will also contain a short sentence describing the club’s purpose and an unordered list highlighting the following upcoming events: ◆ Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m., Xavier Jiminez as guest speaker ◆ Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m., Barbara Lin to show slides of her trip to Taiwan Create the page using HTML (you can use Dreamweaver as your text editor). Make sure you format the sentences as seen above. Test the page in a browser and make any changes to improve the look of the page. Also print the final HTML code for your page.

2. Add Pages in Dreamweaver Use Dreamweaver to add a Meetings page to your cross-cultural travel club Web site. The Meetings page should have a light green background. On the Meetings page: ◆ Add a large heading in red: CROSS-CULTURAL TRAVEL CLUB CALENDAR. ◆ Find an appropriate graphic for this page and insert it below the main heading. ◆ Add the subheading: Meeting: Wednesday, October 5 from 3:30 to 5:00 p.m. Xavier Jiminez will talk about a conversation he had with his grandmother who is from Guatemala. He will describe the village where she was born, the life of the people there, and her experiences after moving to a large city in the United States. ◆ Add the subheading: Meeting: Wednesday, October 19 from 3:30 to 5:00 p.m. Barbara Lin will present a slide show on Taiwan. She will talk about her experiences on this trip and her visit with her parents’ relatives. She will show slides of the major cities as well as the countryside. Add a link from each event on the Cross-Cultural Travel Club home page to the Meetings page. On the Meetings page, add a link to the government sites for Guatemala and Taiwan. Test the site in a browser and make any necessary changes.

HTML Basics

129

Critical Thinking: Evaluate Technology Resources A friend is starting a graphic design business. She asks you to recommend a computer that she can use for her business. In particular, she needs a computer that: ◆ is portable, so she can take it on client visits. ◆ has a lot of memory to support graphics software and other programs. ◆ has a hard drive with a large capacity. ◆ can function without wires. ◆ is made by a well-known, reliable manufacturer. 1. Use the Web or catalogs to research products that meet your friend’s requirements. 2. Prepare a table like the one below to organize your research. List the information for three computers, each from a different manufacturer. MANFACTURER

MODEL #

PRICE

FEATURES

OPTIONAL FEATURES

3. Recommend one computer to your friend and give reasons for your choice.

Use Technology Tools: Create a Web Page Using HTML Use HTML to create a Web page called Reference Web Sites for Online Research. Include the following elements on your page: ◆ A page title ◆ A graphic ◆ An unordered list of three Web sites that you frequently use to research school projects online When planning and creating your Web page, follow these steps: 1. Choose colors for your page, including the background color and the font colors. Choose appropriate font sizes. Select a graphic element such as a border that will work on your page. 2. Plan the content for your page. Write a short description of each research site you have chosen. Note why you think each site is a reliable resource. 3. Write the HTML code for the page. Include a link to each research site. 4. View your completed page in a browser. Check spelling and proofread your page. Test your links. Revise the HTML code to correct errors as needed. 5. Have a peer review your finished Web page, and revise your page as needed. 130

Chapter 4

Create a Community Web Site The Internet can be a powerful tool for social change. In 1997, Jody Williams won a Nobel Prize for her work to outlaw land mines. Using e-mails and the World Wide Web, she organized citizen’s groups around the world and helped forge a coalition among the world’s nations. Select a community or national issue that is important to you. Create a one page Web site that tells other teens about this issue, and lets them know what actions they can take to become more involved. When creating your Web site, follow these steps: 1. Plan the site’s content. Research the issue using reliable resources. Try to locate different perspectives on the issue and identify possible solutions. 2. Summarize your research. Describe the issue and how it affects your community, the nation, or the world. 3. Include a list of steps that your audience can take to address the issue. You will include this information on your Web site, so be brief. 4. Write down the URLs of links where people can learn more about the issue. 5. Use Dreamweaver to create a one-page Web site about your issue. On this site, include:

◆ the summary of your research. ◆ the list of steps needed to address the issue. ◆ links to sites related to the issue. 6. Select appropriate background and font colors for your site. Add a graphic such as a border to the site. 7. Test your site in a browser. Be sure to test all the hyperlinks. Spell check and proofread the site and make changes as needed. 8. Optional (with your teacher’s permission)—publish the finished Web site on your school or class Web site. 9. For your portfolio, include a screen shot and an electronic copy of your finished product.

HTML Basics

131

UNIT

2

Designing Web Sites

Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 2 Internet Research Tips. Practice skills and strategies that will help you quickly find what you are looking for on the Internet.

132

Think About It Know Your Strengths! Building a Web site requires many different talents and strengths. You will find that some aspects of Web design are easy for you while others may be hard. Knowing what you enjoy doing can help focus your learning of new and difficult tasks.

Evaluate Yourself Activity Write down the top two tasks you have enjoyed most during your study of Web design so far. Then, write down your two least favorite tasks. What characteristics do the tasks you enjoy have in common? How are these different from your least favorite tasks?

133

CHAPTER

5

Planning a Web Site

YOU WILL LEARN TO… Section 5.1 Determine the purpose of your Web site Define the target audience for your Web site Write a mission statement Section 5.2 Describe three types of navigation schemes State the advantages and disadvantages of each scheme Choose the appropriate navigation scheme for a particular site Section 5.3 Discuss the advantages of storyboarding a site Draw the navigation structure of a site Create sketches of a site’s pages

WHY IT MATTERS ................................................. Benjamin Franklin wrote, “By failing to prepare, you are preparing to fail.” Planning—thinking about your goals and the steps you need to take to reach these goals—is always the first step in any successful project. Failing to plan can lead to wasted time, wasted resources, and wasted energy. Developing a Web site is a lot like planning a road trip. Where do you want to “go” first? What is your final destination? How many stops along the way can you afford? President Dwight Eisenhower once said, “Plans are nothing, but planning is everything.” What do you think he meant by that? In what way is the process of planning a Web site more important than the actual plan for the Web site?

134

Chapter 5

CHAPTER

5

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 5.1 Write a Mission Statement ....... 139 5.2 Create a Hierarchical Chart ..... 145 5.3 Create a File Name List ............. 151 You Try It Activities 5A Create a Mission Statement ..... 5B View a Web Site in Map View .... 5C Chart Navigation Structure ...... 5D Specify File Names..................... 5E Sketch a Web Page ....................

139 143 147 149 150

You Try It Skills Studio Create a Mission Statement............. 158 Plan a Web Site .................................. 158 Web Design Projects Create a Storyboard ......................... 159 Create Sketches ................................ 159

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................

156 156 157 157

Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Reading for a Purpose Just as an author’s purpose helps him or her determine what content to put in and what to leave out, your purpose for reading helps you decide what is most important to remember. Write down and complete this sentence for each section before you read: My purpose for reading this section is to _________. (Hint: You may want to use each section’s Focus on Reading and the colored headings to help you finish the sentence.)

WebDesignDW.glencoe.com

Planning a Web Site

135

SECTION 5.1 CREATING A MISSION STATEMENT Focus on Reading Read to Find Out The main purpose of this section is to explain how to write a mission statement. As you read, ask yourself how a mission statement can help you create a Web site that fits your goals.

Main Ideas

Key Terms

Reading Strategy

Before you create a Web site, you should identify the purpose and audience of the site. Once these are known, you will be able to write a mission statement for your site.

mission statement target audience

Identify the steps in planning a Web site. Use a flowchart like the one below (also available online).

Determine Purpose and Goals

➠

➠

How you design your Web site depends upon your purpose and your audience. To clarify the reason you are creating a Web site, you should create a mission statement, a brief statement that describes the purpose and audience of your Web site.

Determining Purpose and Goals What are some possible goals of a Web site?

Content When planning your site, think about how your long-term goals may vary from your immediate goals.

Before you create a Web site, consider the site’s purpose and goals. The purpose of your Web site is what you want your site to do. The goals of your Web site outline the way you will fulfill your purpose. It is important to first determine the type of site you plan to create. Your site may inform, entertain, serve as a Web portal (such as a search site or a directory of links), address a particular group of people, provide a personality profile (such as a personal page or résumé), or fulfill another specific purpose. Identifying a site’s purpose will help you determine goals that you can work toward. To determine the purpose of your site, ask yourself: ◆ What are my immediate goals for the Web site? ◆ What are my long-term goals for the Web site? ◆ What is my budget? ◆ What is my time line? After you define the overall goal of your site, consider whether the goal is achievable. For example, you decide to create a site about pets. You could narrow your goal by providing information about the care of pet lizards. Explain Why is it important to identify a site’s purpose?

136

Chapter 5

WebDesignDW.glencoe.com

Determining the Audience What is the best way to determine a Web site’s audience?

After you have outlined the goals for your site, determine who will be your target audience. Your target audience includes all of the people that you want to visit your Web site. You need to consider your target audience early in the planning process because the content and design should appeal to them. To help analyze your audience, answer the questions presented in Table 5.1.

Table 5.1

Identifying a Target Audience Question

Purpose

Who is my target audience?

• Be as specific as possible when defining your audience. • Consider your target age group, so you can determine the information you will include on your Web site.

Who am I?

• Determine how you want to present yourself to your target audience. Choosing how you want to communicate can prevent inappropriate content or design decisions.

What does my target audience already know about my topic?

• If the audience knows nothing about a topic, then you need to provide introductory information. • If most of your audience knows a lot about your topic, then consider what specific information you can provide that they will find useful and interesting.

What does my target audience want to learn from my site?

• Consider what your target audience wants or needs to know about your topic. • If possible, try to talk to potential visitors and include information that meets their needs.

How will my target audience access my site?

• Think about how a typical person within your audience will access your site. Does your intended audience use high-bandwidth networks, dial-up connections, or a combination of both? • Consider how you can create a site that everyone in your audience can access and use easily.

Identifying your target audience can help you determine your site’s content. Why is it important to consider how people will access your site?

Summarize Why is it important to identify a site’s target audience?

Planning a Web Site

137

Writing a Mission Statement Figure 5.1

What is the purpose of a mission statement?

A mission statement helps you remember the purpose of the site as you develop it. How might the mission statement differ if the Music Department were developing a site to invite other schools to participate in contests?

Once you have determined your Web site’s purpose and target audience, you are ready to write your mission statement. Creating a mission statement helps you determine what content is essential to your Web site. Refer to your mission statement frequently as you continue the planning and development process. This will encourage you to stay “on target.” For example, the Music Department Web site provides information about the Department’s performances. Assume that this Web site has not yet been developed and it is our job to build it. To create a mission statement, ask yourself a series of questions like those listed in Figure 5.1. Problem

What is the site’s purpose?

Solution

➠

• To provide general information about the Music Department

• To provide specific information about performances and programs

What are the site’s immediate goals?

What are the site’s long-term goals?

➠ ➠

• To supply general music program information

• To provide performance information

• To expand awareness of the Music Department

• To encourage people to participate in programs

Who is the target audience?

➠

• Students, parents, school employees, and community members

• Most people will access the site from home.

Mission Statement The Music Department Web site will promote the awareness of the Century High School Music Department by providing performance and program information.

138

Chapter 5

In this unit, you will work on a Language Club Web site. In the following activity, you will develop the mission statement for this site.

ACTIVITY 5A Create a Mission Statement 1 At the top of a new document, write: Language Club Mission Statement. Use the information in Table 5.2 to write a mission statement below the title. The statement should be relatively short (less than 50 words).

Table 5.2

Language Club Purpose and Audience

The Language Club Web site is being developed for high school students.

Question

Answer

Who is the audience?

High school students, members, and nonmembers of the club.

What does the audience already know about this topic?

The level of knowledge varies. Some individuals are new to the subject.

What does the audience want to find out from the site?

Meeting times, locations, and topics. Upcoming events and fundraisers.

How will the audience access the site?

The site will be accessed from the school’s high-speed Internet connection, or from home, where most students have a dial-up connection.

2 Proofread the mission statement. Name the document Language Club Mission. Ask your teacher where and how to save your work.

Describe How does a mission statement help you create your Web site?

Section 5.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Before building a Web site, you must spend some time planning it.

1. Define mission statement, target audience.

4. Analyze How might the immediate and long-term goals of the Language Club site be different?

• It is important to determine the purpose of your Web site before building it. • You must identify the characteristics of your site’s audience. • A mission statement describes the purpose and audience of the Web site.

2. Explain why it is often necessary to refine a Web site’s topic when planning a site. 3. List four things you should know about the audience to write a mission statement.

5. Compare and Contrast How would a clothing Web site for very young children differ from a clothing site for teenagers?

Apply It! Write a Mission Statement Write a mission statement for a Web site you would like to develop for one of your hobbies. Describe the purpose of your Web site and your target audience.

Planning a Web Site

139

SECTION 5.2 NAVIGATION SCHEMES Focus on Reading Read to Find Out This section describes the different navigation schemes used by Web sites. As you read, note how different navigation schemes serve different purposes.

Main Ideas

Key Terms

Reading Strategy

Navigation schemes define the structure for Web sites. The navigation scheme should enhance the purpose of the site and help visitors find the information they seek.

navigation scheme hierarchical navigation scheme top-level page parent-child relationship peer-to-peer relationship linear navigation scheme random-access navigation scheme

Compare and contrast the hierarchical and linear navigation schemes. Use a Venn diagram like the one below (also available online).

Hierarchical

Linear

In the early days of Web design, designers often created the individual Web pages that they needed, then linked them together. As sites became larger and more complex, they often became disorganized and difficult to navigate. Web designers soon realized that they needed to plan the structure and the relationships among a site’s pages before building the site. Activity 5.1 Explore Navigation Schemes Learn more about different navigation schemes by visiting the book’s Web site at WebDesignDW.glencoe.com.

You Should Know Developing a site’s navigation scheme is part of interaction design.

Types of Navigation Schemes What should I consider when choosing a navigation scheme for my site?

A navigation scheme is the plan that determines how Web pages will relate to each other. A Web site’s structure should support the site’s mission statement and appeal to its target audience. When choosing a navigation scheme, think about how visitors will interact with your site. Will your visitors go directly to specific topics or will they access the pages sequentially? Viewing your site from the audience’s perspective can help you develop a site visitors will enjoy. There are three main types of navigation schemes. ◆ The hierarchical navigation scheme is used by the majority of Web sites. ◆ The linear navigation scheme is often used with a hierarchical scheme. ◆ The random-access navigation scheme is rarely used.

140

Chapter 5

WebDesignDW.glencoe.com

Hierarchical Navigation Scheme In a hierarchical navigation scheme, pages are arranged in levels from top to bottom. A site can contain multiple page levels depending on its content. Pages at lower levels typically contain specific information about the Web site’s topic. Figure 5.2 illustrates how the Web pages in a hierarchical site can be organized. ◆ At the top level is the Web site’s home page. The home page is often referred to as a top-level page because it is at the highest level in the structure. ◆ The home page contains links to the second-level pages below it. Pages that are all on the same level are often referred to as same-level pages. ◆ The second-level pages contain links to third-level pages. As shown in Figure 5.2, you can access any of the second-level pages from the home page. However, you can only access third-level pages from a second-level page.

Relationships in the Hierarchical Scheme A page that is connected to a page one level below has a parent-child relationship with that page. In this relationship, the page that is on the level above is the parent, and the page that is on the level below is the child. A parent may have many children, but in a hierarchical scheme, each child may have only one parent. Two or more child pages with the same parent have a peer-to-peer relationship, also called a “sibling” relationship. These relationships are shown in Figure 5.2. This page is the parent of the three pages below it.

SecondLevel Page A

Third-Level Page

These three pages are children of second-level page A.

Third-Level Page

The home page is the parent of the four pages below it.

Home Page

SecondLevel Page B

Third-Level Page

Figure 5.2 Web pages in a hierarchical scheme are arranged in levels. Which page is always at the top level in a hierarchical navigation scheme?

SecondLevel Page C

Third-Level Page

SecondLevel Page D

All pages at this level are children of the home page.

Third-Level Page

These pages have a peerto-peer relationship.

Planning a Web Site

141

Advantages of a Hierarchical Site The hierarchical navigation scheme has specific advantages. ◆ Visitors can get a site overview quickly by examining the home page (index.html). ◆ Visitors can then go directly to the pages that interest them and skip pages that do not interest them. ◆ The freedom to “click around” prevents visitors from becoming overwhelmed by information they do not want. ◆ Visitors can keep track of where they are on the site.

Linear Navigation Scheme In a linear navigation scheme, every page exists at the same level. Each Web page in this scheme is accessed from the previous page and then is linked to the next page. A visitor navigates a linear site by moving through a line of pages, one after another—the same way you read a book.

Figure 5.3 The linear navigational scheme directs visitors to view the site page by page. What page do visitors view first when they use a linear site?

Advantages of a Linear Site As with hierarchical schemes, sites that use a linear scheme usually have a single home page that the visitor must access first (see Figure 5.3). However, unlike the hierarchical scheme, the visitor must then access each page in a specific order. A linear scheme is useful in sites that step visitors through a process, such as making cinnamon rolls. To make the rolls, visitors must start with the first step and continue on until the last step is reached.

Home Page

Combination Schemes Many Web sites use both hierarchical and linear navigation schemes. For example, a Web site containing photographs from a vacation might let the visitor go directly to a specific photo (hierarchical), or it may let the visitor see the photos in the order in which they were taken (linear).

Random-Access Navigation Scheme In a random-access navigation scheme, the pages are not organized in any particular order, but are linked randomly to each other. This scheme makes it difficult for visitors to locate what they need quickly, or at all. The random-access scheme can be used for an experimental site that is intended to give users access to random sites. However, this type of navigation scheme is almost never used by professional Web designers. List What are the three different types of navigation schemes? 142

Chapter 5

Viewing a Web Site’s Navigation Scheme How do you view a navigation scheme in Dreamweaver?

The Music Department’s Web site uses a hierarchical structure. In the following activity, you will use Dreamweaver’s Map view to examine the site’s navigation structure.

ACTIVITY 5B View a Web Site in Map View 1 Start Dreamweaver. Open your Music Department Web site (if necessary, open and define the site located in the DataFiles\Examples\MusicDept folder). 2 In the Files panel, right-click the index.html file. In the options menu that opens, select Set as Home Page. Click the view drop-down arrow and select Map view (see Figure 5.4).

Figure 5.4 Select Map view to display the site’s map in the Files panel. Map view Expand/Collapse

3 In the Files panel, click the Expand/Collapse button to display the site map at full size in the Document window (see Figure 5.5).

Figure 5.5 Click the Expand/Collapse button to view the site’s navigation scheme in the Document window.

Planning a Web Site

143

4 Locate the performances.html page in the site map. You will either see a plus (+) or a minus (−) sign to the left of the file icon. Clicking the plus sign will display pages linked to the selected page (see Figure 5.6). Practice opening and closing the page list of each file.

Figure 5.6 Click the plus sign to see which pages are linked to the selected page.

Pages linked to performances page

5 In the toolbar, click the Site Map button. Click Map and Files to display the Web site’s file structure in the Files panel. Your screen should look like Figure 5.7.

Figure 5.7 Select Map and Files to view both the site map and the site’s file structure.

Site Map button

You Should Know Text that is displayed in red in the Site Map indicates a broken link (a link that does not work).

6 Press F8 to view only the site’s file structure. Press Alt + F8 to display the site map and the file structure again. 7 On the toolbar, click the Expand/Collapse button to collapse the expanded Map view.

144

Chapter 5

8 In the Files panel, click the view drop-down arrow and select Local view. Your screen should look similar to Figure 5.8. Close the Web site and exit Dreamweaver.

Figure 5.8 The Music Department home page in Local view.

Describe What kind of navigation scheme does the Music Department Web site use?

Section 5.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• A navigation scheme specifies the organization of a site and how its pages relate to one another.

1. Define navigation scheme, hierarchical navigation scheme, top-level page, parent-child relationship, peer-to-peer relationship, linear navigation scheme, random-access navigation scheme.

3. Draw Conclusions Can a Web page be both a parent page and a child page? Explain your answer.

• Examples of navigation schemes include hierarchical, linear, and random-access. • A Web site’s home page is a top-level page in a hierarchical site.

2. List two factors to consider when choosing a navigation scheme.

4. Compare and Contrast Explain the similarities and differences between a hierarchical and a linear navigation scheme.

Apply It! Create a Hierarchical Chart Assume you have seen seven movies in the past month. Four were action-adventures and three were comedies. Create a chart that places the movies you have seen into a hierarchical structure. Include the titles of all seven movies in your chart.

Planning a Web Site

145

SECTION 5.3 STORYBOARDING YOUR SITE Focus on Reading Read to Find Out This section illustrates how to plan a site’s navigational structure. As you read, pay attention to the difference between a page title and a file name.

Main Ideas

Key Terms

Reading Strategy

When you storyboard your site, you draw a chart illustrating the site’s navigation structure and create sketches of what content the main pages will include. These graphics provide a basic overview of the site you will create.

storyboard page title file name

Identify the two processes involved in storyboarding. Under each process, list one fact about the process. Use a diagram like the one below (also available online). Storyboarding

Storyboarding How can storyboarding help you to avoid mistakes when creating a site?

Activity 5.2 Storyboarding a Web Site Learn more about various storyboarding methods by visiting WebDesignDW.glencoe.com.

Many Web design professionals use storyboarding when they design a Web site. A storyboard is a visual representation of the Web site. Storyboarding involves illustrating your organizational ideas by roughly sketching the relationships among elements on each page, as well as the relationships among the Web site’s pages. Storyboarding has a number of advantages. ◆ It helps you visualize the basic structure of the Web site. ◆ It graphically illustrates the links between individual Web pages. ◆ It provides an overall look at the contents of each Web page. ◆ It helps you to see whether your ideas will work well before you begin creating the actual pages. Not everyone approaches storyboarding in the same way. Some use formal drawing tools to create their storyboards. Others use presentation software to create a working model of the site. Many Web designers, however, find it most helpful to sketch their concepts with paper and pencil. Two tasks need to be accomplished during the storyboarding process. One is to identify the navigation structure of the site using one of the navigational schemes discussed in Section 5.2. The other is to create a brief summary of each page’s contents. List What are three different ways to approach storyboarding?

146

Chapter 5

WebDesignDW.glencoe.com

Table 5.3

Language Club Web Site Pages Page Title

Brief Description

The Language Club

Welcomes the visitor and serves as a jumping-off point to other pages.

About Us

Describes the purpose of the club.

Events

Lists events sponsored by the club such as fundraisers, meetings, and cultural events. Includes a maximum of five events, with a separate subpage for each event.

Contact Us

Includes membership information and contact information for club officers.

Using tables and charts is a good way to gather the information needed to plan a Web site. Which pages will likely be parent pages?

Drawing a Site’s Navigation Structure Why is it helpful to chart a Web site’s structure?

To develop the navigation structure of the Language Club Web site, start with a list of its major pages (see Table 5.3). At this point in the process, you are merely trying to get a basic idea of the pages the Web site will contain. As you continue, you may find it necessary to add additional pages, or combine two pages into one.

Charting the Language Club Web Site The Language Club Web site will have a hierarchical structure. In the following activity, you will chart this hierarchical structure and assign pages to levels.

ACTIVITY 5C Chart Navigation Structure 1 Open a blank word processing document, or take out a piece of paper At the top of the page, write or key Language Club Site Navigation Structure. This is the title of your chart. 2 Using the information provided in Table 5.3, create a chart that shows the navigation structure of the proposed Language Club site. It should use a hierarchical structure with the home page at the top. Figure 5.9 shows part of this chart. Be sure to include each page’s title in the corresponding box and to draw lines showing the relationships among the pages.

Language ClubHome

3 Add five lower level pages (subpages) under the Events page. Write appropriate page titles for these subpages (see page 148 for naming guidelines). 4 Proofread your chart. Name your document Language Chart and save it according to your teacher’s instructions.

Figure 5.9

Language ClubAbout Us

A hierarchical structure makes it easy for visitors to locate information available at the site.

Planning a Web Site

147

Page Titles versus File Names You have now determined the major pages for the Language Club site. At this point, it is a good idea to think of appropriate names for your files. In your navigation chart, you specified the title of each page. However, the file in which each page is stored must also be specified.

Choosing a Page Title A page title is not the same thing as a file name. A Web page’s page title (sometimes called a page name) appears in the title bar when the page is displayed in a browser. Follow these guidelines when choosing a page title. Jargon A Web page’s title appears in the Web browser when users view the page. A Web page’s file name, on the other hand, is the name of the HTML document that makes up the Web page.

◆ Choose logical names that visitors will understand. A title such as Change Password suggests that users should go to this page to change their password. ◆ Page titles should be short and descriptive. ◆ Page titles should be consistent with your naming scheme. On a Web site about Shakespeare’s plays, where one page is titled Hamlet, another page should be titled Macbeth (not Tragedy2 or ScottishPlay).

Choosing a File Name A file name is the name of the HTML document that makes up the Web page itself. Follow these guidelines when choosing a file name. ◆ Select names that make sense and are consistent and easy to remember. For example, imagine that you are creating a library’s site that will eventually contain thousands of pages. It would be difficult to find the file that corresponds to the book Emma if that book’s Web file were named x52h61aw.html. A file named emma.html would make it much easier to locate that book’s file. ◆ Use Save As instead of Save when you first save your Web page, and enter a good file name into the File name box. ◆ Each file name must have either the standard .html extension or the less common .htm extension so Web browsers will recognize that the file as an HTML page. ◆ Keep file names short and omit blanks. Use the underscore character (_) as a substitute for a blank space. ◆ Use lowercase letters instead of uppercase letters. Page titles and file names are often not the same. For example, in the Language Club Web site, the home page will have the page title Language Club-Home and the file name index.html. Table 5.4 contains a list of the file names for the individual pages in this Web site.

Table 5.4 Specify the file names for your Web pages so that you can keep track of file names used in the site. How is a page title different from a file name? 148

Chapter 5

Language Club Page Titles and File Names Page Title File Name Language Club-Home index.html Language Club-About Us about_us.html Language Club-Events events.html Language Club-Contact Us contact_us.html

ACTIVITY 5D Specify File Names 1 Open or take out the Language Club navigation chart that you created in You Try It activity 5C. Using the information in Table 5.4 on page 148, write the file name for each page under that page’s title, as shown in Figure 5.10. If the page is not included in Table 5.4, create your own file name (be sure to follow the guidelines for naming files!).

Figure 5.10

Language ClubHome

You can keep track of file names by recording them in your navigation chart.

(index.html)

Language ClubAbout Us (about_us.html) 2 Proofread the file names, verifying that each name is used only once and that there are no spaces in the file names. 3 If you are using a word processing application, with your teacher’s permission, print a copy of the chart. Save the revised version of your document.

Describe What is a file name?

Creating Sketches of Individual Pages Why should I sketch my Web pages before creating a site?

After you chart the overall scheme for your site, you should create a basic sketch of each Web page. This sketch identifies the text and graphics you plan to use on a page, and roughly shows where you plan to place these elements. Sketches serve several purposes. ◆ They help make certain that all the goals of the Web site are met. ◆ They provide guidelines for developing Web page content. ◆ They are useful when you create the page template. At this point, you need not worry about the exact text or graphics that will appear on each page—just focus on the page’s overall purpose. In You Try It activity 5E, you will create a sketch for the About Us page in the Language Club Web site.

Shortcut To view individual page titles in Dreamweaver’s Map view, press Ctrl + Shift + T. Press this combination of keys again to display the page’s file name.

Planning a Web Site

149

ACTIVITY 5E Sketch a Web Page 1 Create a sketch for the About Us page. Identify the content you want to include. For this page, you want to state the purpose of the club, and a list of the individuals who run the club. 2 Sketch the content for this page. Estimate where you would place the elements you want to include. Also estimate the space needed for the different elements. 3 Review your work to make sure the sketch contains the needed elements. Your sketch should look similar to Figure 5.11. If you are using application software to create sketches, save the document as Language Sketches.

Figure 5.11 A sketch like this shows how elements will appear on the page.

About Us Text Text Office

Name

President

Xxx Xxxxxx

Statement of club’s purpose

4 Create a second sketch for the same Web page. Keep the same content, but create a different arrangement for your items. Save your document as before. 5 Compare your sketches with those of other students. Explain why you decided to place items where you did. Evaluate which sketches you prefer and explain why.

List What items should you include on a Web page sketch?

Web Site Planning Checklist How can a checklist help me plan a Web site?

You have a lot to think about before you start creating your Web pages. That is why you should always use a checklist to help you keep track of your planning tasks. Determining a Web site’s purpose and audience is always the first step to creating a successful site, as shown in Figure 5.12 on page 151. 150

Chapter 5

Figure 5.12

Web Site Planning Checklist STEP COMPLETED

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

A planning checklist helps you manage the details of creating Web sites. Why do you think planning should be completed before the storyboarding begins?

STEP The site’s purpose is clearly stated. Both immediate and long-term goals are specified. The audience for the site is specified. A clear and specific mission statement is written. An appropriate navigation scheme is chosen. An appropriate page title and file name are chosen for each page. A chart is created showing the navigation scheme, including each page’s title and file name. The major content and graphics are chosen for each page. Sketches of each page are drawn. Sketches focus on each page’s overall purpose.

We have completed the steps for planning the Language Club Web site. The planning process will help you determine goals that you can work toward. Planning also helps you identify any potential problems before you actually begin to build your site. It is much easier to correct problems at this stage than later on, when you may have to alter an existing Web page or change the structure of a Web site. Describe Why is it important to follow all the planning steps when creating a Web site?

Section 5.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Storyboarding involves drawing a site’s navigation structure and creating sketches of the major pages.

1. Define storyboard, page title, file name.

4. Analyze What might be an advantage of using a linear navigation scheme for a Web site? What might be an advantage of using a hierarchical scheme?

• A sketch of a Web page outlines the major content and graphics that will be included on that page. • A page title is not the same as a file name. • A checklist can help you determine whether you have completed every step in the planning process.

2. Discuss three advantages of storyboarding a Web site. 3. List the items that should be included in a Web page sketch. Explain the importance of each item.

5. Draw Conclusions What problems could be avoided by completing a Web site planning checklist before creating a site?

Apply It! Create a File Name List Create a table that lists appropriate file names for the following pages that are part of the Music Department Web site: Home, Band, Choir, Performances, and Contact Us.

Planning a Web Site

151

Developing Web Content

T

he World Wide Web would be meaningless without the words, pictures, video, and other content you find on a Web site. After all, people do not go online simply to use a browser. They go online to find information, to be entertained, or to do business.

Writers and Editors Most Web sites use text in some manner. Often, professional writers and editors create the online text. Web-based writers need to be able to write content that is easy to read on a monitor and appropriate for a site’s target audience. They often work with subject matter experts, instructional designers, and programmers. This teamwork allows writers to see how their content fits into the overall design of the Web site.

Graphic Designers Web sites are often designed by teams of people, many Graphic designers give Web sites their of whom focus on the site’s content rather than on its appeal by creating icons, backgrounds, technical elements. illustrations, and other graphic elements. Graphic artists may work with photographs or use sophisticated programs to create original art. These designers use a wide range of tools, such as Adobe® Photoshop®, CorelDRAW®, and many others.

Instructional Designers Instructional designers create effective computer-based teaching materials for computerbased training (CBT) and distance-learning programs. These professionals may be teachers, trainers, or curriculum specialists. They create the curriculum and teaching strategies for an online or CBT course. This can include developing the content and creating teaching tools, such as tests, presentations, and record-keeping tools.

1. Create a Résumé Search a Web site for job openings related to providing content. Create a résumé you would use to apply for one of those positions. In your résumé, note the education, training, and experience that you would need for this job. 152

Chapter 5

2. Compare Content Write a brief essay that compares and contrasts the content requirements of different types of Web sites. In your essay, include examples from at least four different sites.

CHAPTER 5

Reading Review

SECTION 5.1 Creating a Mission Statement Key Terms mission statement, 136

target audience, 137

SECTION 5.3 Storyboarding Your Site Key Terms storyboard, 146 page title, 148

file name, 148

Main Ideas

Main Ideas

■ Before building a Web site, you must spend some

■ Storyboarding involves drawing a site’s navigation

time planning it. ■ It is important to determine the purpose of your Web site before building it. ■ You must identify the characteristics of your site’s audience, such as how much the audience already knows about the site’s topic and what the audience wants to learn from the site. ■ A mission statement describes the purpose and audience of the Web site.

■ ■ ■ ■

■

SECTION 5.2 Navigation Schemes

structure and creating sketches of the major pages. A storyboard graphically illustrates the links between individual Web pages. A sketch of a Web page outlines the major content and graphics that will be included on that page. A page title is not the same as a file name. A page title appears in the title bar when the page is displayed in a browser. A file name is the name of the HTML document that makes up the Web page. A Web site planning checklist can help you determine whether you have completed every step in the planning process.

Key Terms navigation scheme, 140 hierarchical navigation scheme, 141 top-level page, 141 parent-child relationship, 141 peer-to-peer relationship, 141 linear navigation scheme, 142 random-access navigation scheme, 142

Main Ideas

Home Page

SecondLevel Page

SecondLevel Page

■ A navigation scheme specifies the organization of a ■ ■ ■ ■

site and how its pages relate to one another. Examples of navigation schemes include hierarchical, linear, and random-access. A Web site’s home page is a top-level page in a hierarchical site. A page that is connected to a page one level below it has a parent-child relationship with that page. Children of the same parent have a peer-to-peer relationship.

ThirdLevel Page

ThirdLevel Page

ThirdLevel Page

Planning a Web Site

ThirdLevel Page

153

CHAPTER 5

Review and Assessment

AFTER YOU READ Review the Purpose Go back to the Reading for a Purpose sentences you completed before you read each section. Did you succeed in your stated purpose? Use your Key Term Journal, class notes, and your memory to write down a brief explanation for each purpose sentence. This exercise will help you determine what you need to review.

Reviewing Key Terms 1. What is a mission statement? 2. Define target audience. 3. Which of the following is NOT a type of navigation scheme: hierarchical, oval, linear, random-access. 4. What is a top-level page? 5. Rewrite this statement to make it true: Each child page can only have a single parent whereas a parent page can only have up to three child pages. 6. In Web design, what is the formal name of a sibling relationship where two or more child pages have the same parent page? 7. What are the two main items that are created when storyboarding a site?

Understanding Main Ideas 8. Summarize the differences and similarities between the immediate and the long-term goals of a Web site you might develop. 9. Discuss why it is important to be familiar with what your audience already knows about a particular topic when you are developing a mission statement. 10. Describe how a linear navigation scheme is different from and similar to a hierarchical navigational scheme. 11. Discuss the purpose of creating sketches of Web pages. 12. Summarize the advantages of using a Web site planning checklist. 154

Chapter 5

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

13. Explain the difference between a page title and a file name. Page Title

File Name

14. Evaluate why most Web designers use a hierarchical navigation scheme when creating Web sites. Advantages of a Hierarchical Scheme

Critical Thinking 15. Evaluate Navigation Schemes The Department of Education has created a Web site using a hierarchical scheme. The director wants to include a slideshow to be viewed in sequence within the Events section of the Web site. What type of navigation scheme would you use for this slideshow? Explain your answer. 16. Draw Conclusions In the Language Club Web site, what would happen if the Events page were removed, and all of the pages under it linked directly to the home page? How would this affect how visitors accessed these pages? Do you think this would be a good change? Explain your answer. 17. Analyze Navigational Schemes Why is a drawing of a hierarchical navigation scheme sometimes called a tree diagram? How can the image of a tree help you understand how a hierarchical site’s pages are related?

CHAPTER 5

Review and Assessment

18. Analyze Target Audiences Some Web sites try to appeal to a broad range of visitors. For example, the NASA site’s audience could include people who know a lot about the space program and those who do not. How might a Web site address the needs of a broad audience? Use a Web diagram like the one below to organize your answers and specific suggestions. Use Table 5.1 on page 137 to identify ways to reach a target audience.

Target Audience

Reading & Writing Read the paragraph below and then answer the question.

The two most popular Web site navigation schemes are the hierarchical and linear schemes. In a hierarchical scheme, pages are arranged in levels from top to bottom. The home page is at the top and contains links to the secondlevel pages below it. The second-level pages contain links to third-level pages, and so on. In a linear scheme, every page is at the same level. The home page is first and then each page must be accessed in a specific order, one after another. According to the paragraph, which of the following statements is true?

19. Create Navigation Schemes In the Language Club Web site, explain how you might make the About Us page a parent page. Use a drawing like the one below to illustrate your response.

Home

 In a linear scheme, pages are linked randomly to each other.  In a linear scheme, all pages on the site can be accessed directly from the home page.  In a hierarchical scheme, you can access any secondlevel page from the home page.  In a hierarchical scheme, all pages on the site can be accessed directly from the home page.

About Us

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.

WebDesignDW.glencoe.com

On your own paper, copy and complete the chart shown below.

Go to the book’s Web site shown above. Select e-Review>PowerTeach Outlines>Chapter 5 to review the main points in this chapter.

20.

Study with PowerTeach

Result

Online Self Check

21.

+

22.

+

WebDesignDW.glencoe.com

+

Result

Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 5.

Result

Planning a Web Site

155

CHAPTER 5

Activities

1. MAKING CONNECTIONS Social Studies—Create a Time Line From the printing press in the fifteenth century to today’s cell phones and handheld devices, innovations in technology have revolutionized how we communicate. 1. Use the Internet or other resources to research the history of different forms of communication such as the printing press, radio, and television.

3. Place your five dates into a time line. In your time line, include dates for when the printing press and the Internet were invented. 4. Finally, create a storyboard that places the dates from your time line into a linear navigational scheme like the one shown below.

2. Identify five important dates in the history of communications.

Home Page

Date #2

Date #3

Date #4

Date #5

2. STANDARDS AT WORK Students use technology to locate, evaluate, and collect information from a variety of sources. (NETS-S 5)

Analyze Web Sites Locate two Web sites in one of the following categories: corporate presence, portal, informational, or educational. Try to find two Web sites that are very different from each other. For each site, answer the following questions: 1. What is the purpose of the Web site? 2. What is the goal of the Web site? 3. Who is the Web site’s target audience? 4. What is the target audience seeking from the site? 5. Is the content of the site easy to scan? 6. What type of navigation scheme does the site use?

CRITERIA

WEB SITE #1

Category Purpose Goal Target Audience Target Audience Need Content Readability Navigation Scheme

Use your answers to develop a chart that compares and contrasts the two Web sites. If possible, use either a word processing application or a spreadsheet to create your chart. Your chart should look similar to the matrix shown above. 156

Chapter 5

WEB SITE #2

CHAPTER 5

Activities

3. TEAMWORK SKILLS Create a Storyboard You have been asked to create a Web site for Services for Seniors, a local group serving senior citizens in your community. This group provides seniors with information about health care, adult education programs, and other services. 1. Work as a team to research similar sites. Conduct interviews with the site’s potential audience (your grandparents, other family members, friends, etc.). 2. Based on your research, prepare a mission statement and site goals. 3. Brainstorm a list of pages to include in the site such as housing, medical information, legal issues, and education. 4. Create an index card for each page showing the page titles and file names. Organize the index cards on a piece of paper and draw lines to indicate the navigation scheme that you will use. This will serve as your storyboard for the site. 5. Explain to the class the reasoning behind your navigation scheme.

4. CHALLENGE YOURSELF Plan a Web Site Assume you have been hired to create a Web site for your local aquarium. The aquarium is a major attraction in your town, and it wants a site that will highlight its many activities and exhibitions. Based on planning you have done with the client, you determine that: ◆ the site will have 20 pages arranged in four levels. ◆ it will use a hierarchical navigation scheme. ◆ the following topics need to be covered: general information, types of exhibitions, special attractions, and gift shop merchandise. Create a storyboard for the aquarium Web site that fits the noted requirements. The first and second level are supplied in the graphic organizer below. Brainstorm the remaining third-level pages that need to be included in the site. Determine how you want visitors to navigate the site. When you have completed your storyboard, create a sketch for the Web site’s home page. Home Page

General Information

Types of Exhibitions

Special Attractions

Gift Shop Merchandise

Planning a Web Site

157

Projects

CHAPTER 5

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Create a Mission Statement Create a mission statement for a group or club to which you belong.  At the top of a page, write or key the name of the group, organization, or club you will be using for this exercise.  Add the words Mission Statement after the group’s name.  Answer the questions shown below to identify your target audience. IDENTIFYING YOUR TARGET AUDIENCE • Who is the audience? • What does the audience already know about this topic? • What does the audience want to learn from the site? • How will the audience access the site?

 Use your answers and your knowledge of what belongs in a mission statement to write or key a mission statement for the group’s Web site.  Proofread your mission statement. If you are using word processing software, use the spell check feature.  Save your document for future use.

2. Plan a Web Site Create a storyboard for your chosen organization’s Web site.  Brainstorm a list of pages to include in your site. Write down your ideas.  Create a chart showing the site’s hierarchical structure. Include each page’s title and draw lines showing parent-child and peer-to-peer relationships.  Under each page title, add the file name.  Proofread your chart. Save your document for later use.  Create a sketch of the home page and one other page planned for your site. Estimate where you would place the content you want to include.  Review your work to make sure the sketches contain the necessary elements.  Save your sketches for later use.

158

Chapter 5

CHAPTER 5

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Create a Storyboard Imagine that a local band has hired you to create its Web site. The band wants its site to include a home page and pages that provide concert schedules, band member biographies and hobbies, and photographs and descriptions of the band’s national tour. One member of the band is an avid outdoor photographer and plans to post photographs of the locations in which the band has performed. She would like to include historical and geographical information about the locations as well. Create a storyboard for the band’s Web site. Your storyboard should include: ◆ A home page ◆ Pages for two locations in which the band has performed. The location pages should include photographs and location descriptions. Keep in mind that the number of photographs will grow over time, so you will want to design these pages as a photo gallery. Add a general set-up page for the photo gallery to introduce the feature, and then add a child page for each location, each of which should be connected to the introductory parent page. ◆ A band member hobbies page, with links to items that promote the band’s various interests.

2. Create Sketches Use the information from Web Design Project #1 and the information below to create sketches of the general photo gallery page and the first two locations pages. Parent Page: Introduction to Photo Gallery a. What is a photo gallery? b. How do I navigate through a photo gallery? c. Where will these photographs go? Child Page 1: San Francisco, California a. Location: California map b. Points of interest ◆ San Francisco Cable Cars, the only moving national historic landmark. ◆ The Golden Gate Bridge, a famous landmark Child Page 2: Grand Canyon a. Location: Park map of Grand Canyon b. Points of Interest: The South Rim

Planning a Web Site

159

CHAPTER

6

Developing Content and Layout

YOU WILL LEARN TO… Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines Determine content placement Evaluate page layouts Section 6.3 Create a custom page template Insert a logo Create a table Section 6.4 Create navigation buttons Add footer information Add text links Create an e-mail window

160

Chapter 6

photo TK

WHY IT MATTERS ................................................. People today are surrounded by information. We see billboards on our streets, listen to radios in our cars, and watch TV or access the World Wide Web at home. Various media are always competing to capture an audience’s attention. In this chapter, you will learn how to create content for a Web page that will catch—and hold—your viewers’ interest. Think about all the different ways you get information throughout the day. Write down everything you can think of and compare your results with the rest of the class. Which medium (magazine, Web site, etc.) best captures your attention, and which do you find easiest to ignore? Write a short paragraph identifying the features of the medium that best captures your attention and explain why.

CHAPTER

6

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 6.1 Determine Content .................... 6.2 Compare Web Designs .............. 6.3 Create a Table ............................ 6.4 Create a Footer ..........................

165 170 176 182

You Try It Skills Studio Create Web Content .......................... 188 Create a Template ............................. 188 Web Design Projects Develop Content for a Template ...... 189 Create a Personal Web Site .............. 189

IN THE WORKBOOK

You Try It Activities 6A Create Content for a Web Page ............................................ 6B View a Page at Various Resolutions ................................ 6C Create a Page Template ............ 6D Add a Logo .................................. 6E Create a Table ............................ 6F Add Navigation Buttons ............. 6G Add Footer Information ............. 6H Add Text Links ............................ 6I Add a Link to an E-mail Window .......................................

181

Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................

186 186 187 187

165 169 172 174 175 178 179 180

Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Stay Engaged You are an active reader when you stay engaged in the material. One way to stay engaged is to turn each of the colored section heads into questions, then read the section to find the answers. When you can think of a good question and find complete answers, you will be engaged in learning.

WebDesignDW.glencoe.com

Developing Content and Layout

161

SECTION 6.1 CREATING WEB SITE CONTENT Focus on Reading Read to Find Out The main purpose of this section is to learn how to write material for Web pages. Read to find out how Web developers use the inverted pyramid to emphasize a site’s most important material.

Main Ideas

Key Terms

Reading Strategy

Many specific strategies can help you write interesting content for the Web. You must write your Web content clearly and concisely.

content inverted pyramid

Identify the steps you use to generate and organize ideas for the content of your Web pages. Use a flow diagram like the one below (also available online).

Brainstorm Ideas

➠

➠

➠

As you learned in Chapter 1, the Web design process can be divided into three categories. ◆ Interaction design ◆ Information design ◆ Presentation design In Chapter 5, you completed some interaction design by creating a navigation chart for the Language Club Web site. We will now look more closely at information design.

Writing for the Web Content When planning content, remember to keep your text as brief and informative as possible.

How do visitors read online text?

Information design involves determining a Web page’s content, or the text and graphics included on the page. A successful Web page uses words and images to capture the viewers’ attention and provide information. When creating content, you should think as much about what the page will look like as what it will say. ◆ Text should be short and easy to read. It must also stand out from the graphics, animation, navigation buttons, and other elements on the page. ◆ Graphics should be both visually appealing and informative. For example, you could include a photograph of an airplane on a Web page about travel. Including a map of a country discussed on the page, however, would provide visual interest and help viewers understand where that country is located.

162

Chapter 6

WebDesignDW.glencoe.com

Table 6.1

Guidelines for Online Text Element

Guideline

Formatting

Paragraphs

• Introduce only one idea per paragraph. • Limit paragraphs to about 75 words or fewer. • Keep sentences short and use simple sentence structures.

• Use bulleted lists to help summarize key points. • Use numbered lists only when presenting a series of steps.

Headings

• Use headings and subheadings to break up text. • Make sure headings and subheadings highlight key points so readers can locate information quickly.

• Format main headings larger than subheadings. • Use different colors and typefaces for headings and subheadings.

Including key words and headings helps users locate information quickly on a page. How do bulleted lists help readers process information on a Web page?

Online Text Users do not generally read through Web pages as they would a novel or other printed item. Instead, they scan a page, read some snippets of text that interest them, click a link to check out a photograph, and click again to move to another page or site. To capture the user’s attention, you need to include key words or phrases. If you bury your information, users will probably move on to another page or site. Table 6.1 summarizes guidelines for writing effective online text. Figure 6.1 shows a screen that follows the guidelines for writing online text. Notice how information is displayed in short sections, and headings help the reader identify the main topics.

Figure 6.1 Text should be broken into small pieces on a Web page. Why are the headings and subheadings different sizes?

Heading Subheading

Bulleted list

Developing Content and Layout

163

Organizing Web Text Many professional Web designers agree that Web text should be organized like an inverted pyramid. An inverted pyramid structure places the most important information at the beginning of a story, where it will best catch an online reader’s attention. Like a good newspaper story, good online content answers the questions Who? What? Where? When? Why? and How? as briefly as possible in order of importance. Key points, then, should appear at the beginning of the story. The remainder of the article fills in the details, with the least important information at the end, as shown in Figure 6.2.

Figure 6.2 An inverted pyramid structure places the most important information first. Why should important information appear first on a Web page?

Using the Mission Statement Most Important Information

Next Most Important Information

As you develop content, remember to refer back to your mission statement so you do not forget your site’s purpose and audience. Use both the mission statement and your storyboarding items to keep yourself “on target.”

Revising Your Text Less Important Information Least Important Information

You have not completed the writing process until you have revised your text. On Web pages, conciseness—saying exactly what you mean in as few words as possible—is key. Take time to review your text to include strong verbs and nouns, eliminate the passive voice and wordiness, and check your spelling and grammar. Identify What are the guidelines for writing effective online text?

Developing Content for a Web Page What is the purpose of brainstorming?

Now that you have learned some guidelines for writing online text, you are ready to look at some practical ideas to get you started writing. Activity 6.1 Evaluate Writing Styles Learn more about writing for the Web at WebDesignDW.glencoe.com.

164

Chapter 6

Generating and Organizing Ideas Brainstorming is a technique that can help you generate ideas. Write down every topic you want to include in your Web page, then write a keyword next to each one. Each keyword should be a word or phrase that identifies the topic’s core content. For example, if you were developing a Web page about Germany, you could use keywords like primary language, geographic location, attractions, and foods. After you create your list, review your keywords and determine which ones you want to use in headings. Identifying your headings will help you group your information on the page. WebDesignDW.glencoe.com

Developing a Web Page In the next activity, you will develop content for a Foods of the World fundraiser page on the Language Club Web site. When writing, be sure to follow the guidelines for creating online content.

ACTIVITY 6A Create Content for a Web Page 1 Start a word processing application or take out a sheet of paper. Place the title Foods of the World Fundraiser at the top of your page. The purpose of the event is to raise money for the Language Club’s annual trip. The audience for your Web page is parents and faculty. Write a brief paragraph (no more than 200 words) with more details about the purpose and audience of the Foods of the World Fundraiser page. 2 Brainstorm ideas for your content. Make a list of the text and graphics you want to include on your page. 3 Write keywords next to your list of ideas. Determine which keywords to use in headings. 4 Use the inverted pyramid structure to organize your ideas. Place the topic you want to emphasize at the top of your page. Then list the rest of your topics in order of decreasing importance. The least important topic should be at the bottom of your page. 5 In a word processing application or on a sheet of paper, create the content of the Fundraiser page. Refer back to your notes as you write. 6 Proofread and spell check the document. Correct the errors. 7 If using a word processing application, save your work as fundraiser.doc. You will use this document in a later activity.

Explain Why is it important to identify keywords when creating a Web page?

Section 6.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Users typically scan text for keywords.

1. Define content, inverted pyramid.

4. Draw Conclusions Why might a reader not want to read a Web page that contains too much content?

• Group online text into short chunks with concise heads. • Use bulleted lists to make text easy to read. • Use an inverted pyramid to organize Web text.

2. Summarize how reading a Web page is different from reading a printed page. 3. Identify the initial factors you need to consider when planning a Web page’s content.

5. Analyze What factors determine which keywords you will use as headings in a Web site?

Apply It! Determine Content Write a mission statement for a Web site about classes at your school. Determine the content you would include on one page of this site.

Developing Content and Layout

165

Using the Web for Learning

P

eople have been studying at home for decades by using mail, educational television, audiotapes, and videotapes. The term “distance learning,” however, has only recently become commonplace, thanks to the growth of the Internet.

Uses for Distance Learning Reputable online educational institutions offer single courses, college degrees, and technical certifications to people who cannot easily attend classes. This online option is especially helpful for people who live in rural areas or are homebound due to health or transportation problems. Many companies use computer-based training (CBT) and Web-based training (WBT) to teach employees. This option allows busy professionals to study at their own pace.

Many companies use distance learning to train their employees.

Distance-Learning Technologies There are several common technologies used for distance learning. ◆

The Internet allows students to register for a class, to view prerecorded or live lectures, interact with teachers and students, complete assignments, and take tests.

◆

Videoconferences use microphones, video cameras, and software, so that students and teachers can see and hear each other in real-time.

◆

E-mail is one way students can receive and deliver homework assignments.

◆

Web-based chat rooms allow students and teachers to engage in real-time instant message sharing.

◆

Disks like compact disks (CD-ROMs) or digital video disks (DVDs) can offer customized study for each student, feedback on student performance, and online tests.

1. Research Technology Research how people 2. Compare and Contrast Use the Internet to find around the world benefit from distance-learning two schools that offer classes through distance technologies. What cultures and circumstances do learning. Compare the courses, costs, and types of they live in? Prepare a report about your findings. technologies used by each school.

166

Chapter 6

SECTION 6.2 PLACING ITEMS ON A PAGE Focus on Reading Read to Find Out This section presents basic Web design guidelines that you should follow so that your Web pages are eye-catching and easy to understand. Read to find out how to design Web pages that will be clear and attractive for all of a site’s users.

Main Ideas

Key Terms

Reading Strategy

The best Web pages have clear, attractive layouts, which you can achieve by understanding simple Web design guidelines.

white space proximity pixel safe area screen resolution

Identify and summarize three guidelines for Web page layout. Use a table like the one below (also available online). Layout/Design Guidelines

How It Helps

Visitors find it easier to use Web sites that contain short segments of text. Similarly, visitors are attracted to pages that look uncluttered and are consistent from one page to the next.

Page Layout Guidelines What are the advantages of eliminating clutter on a Web page?

Some common design principles can guide you in laying out Web pages. Following these principles will help you create a site that is userfriendly.

Eliminate Clutter Do not place too much content on a page. Too much content can confuse a visitor and cause him or her to surf to a different site.

Activity 6.2 Evaluate Page Layouts Learn more about layout guidelines at WebDesignDW.glencoe.com.

◆ Remove Unnecessary Content Only include information that you really need. If you still have too much information, expand your page into a Web site. Divide information into logical sections and place each section on a separate subpage linked to your home page. ◆ Update Information Instead of including everything at once, update and modify information on a regular basis. ◆ Choose Function over Form Keep only elements that you need and discard elements that just add visual interest. ◆ Avoid Overkill Avoid using too many different elements such as links, colors, or scrolling text. Avoid blinking text and unnecessary animation.

WebDesignDW.glencoe.com

Developing Content and Layout

167

Use White Space

Figure 6.3 This page’s layout makes information easy to find. Why should the title be the largest item on the page?

White space is an area without content—an area where the eye can take a break as it scans the page. Use white space to create visual breaks between and around images and body text. Using white space in this manner helps frame and draw attention to your content.

Emphasize Content Size elements on your page in proportion to their importance.

Title is largest item on page

◆ A bigger design indicates more important information. ◆ A smaller design indicates that an item is less important.

Popular links are easily accessible

Top links mean users do not have to scroll

Most users look first at the largest or boldest element on the page, so make your important content larger than your less important content. Format main headings larger than subheadings or place them in a unique color or typeface.

Group Related Items The proximity (closeness) of elements on a page can cause readers to make assumptions about how elements relate to each other. If items are grouped closely together, people will assume that these items are related. Try not to create false impressions by placing items that are not related close to each other.

Align Text Consistently When laying out your page, line up items with each other. Text can be aligned to the left, to the right, or in the center. Try not to mix alignments on a page. Having to switch from right-aligned to left-aligned text can confuse your reader. Since English speakers read from left to right, paragraphs of text should be left-aligned, which is the default alignment in HTML.

Keep Download Time Short Content When designing your Web site, make sure you consider download time. If a page takes too long to download, the user might move on to another site.

168

Chapter 6

Every text or graphic item that you add to a page increases that page’s download time. This makes it even more important to avoid cramming too much content into a single page. You only have a few seconds to catch a viewer’s attention, so make sure your page downloads as quickly as possible. Figure 6.3 shows how a well-designed page follows the guidelines discussed in this section. Explain How can you emphasize important content?

Web Page Dimensions How can monitors affect how people view my Web pages?

When creating Web pages, you want to make sure that people see your important content first. To do this, you need to know how your audience’s monitors will affect how your site is viewed. A monitor’s viewing area is measured in pixels. A pixel (short for picture element) is a single point in a graphic image.

Page Dimension Guidelines Computer monitors typically have a screen area of 800 pixels wide by 600 pixels high (referred to as 800 x 600) or higher. This area is called the safe area because it displays on every Web browser/system combination. Place your most important and eye-catching information in this area because it is the space that viewers will see first.

Screen Resolution Users can also make content appear smaller or larger by changing their screen resolution, which is the amount of pixels that a monitor can display. Lower resolutions make the screen’s content appear larger, so less content is visible onscreen. Higher resolutions make the screen’s content appear smaller, so more content appears onscreen.

ACTIVITY 6B View a Page at Various Resolutions 1 Start Dreamweaver. Open your Music Department home page (index.html) in Design view (if necessary, browse to the DataFiles\ Examples\MusicDept folder in the student data files to access this site). 2 Click the Restore Down button on the document’s window. In the document’s status bar, click the Window Size drop-down arrow (see Figure 6.4). Select 760 x 420 (800 x 600, Maximized). 3 Select View>Visual Aids>Hide All to hide table borders and other Dreamweaver elements. Your screen should look similar to Figure 6.4.

Figure 6.4 The Music Department home page as it would appear on a monitor with a screen resolution of 800 x 600.

Window Size drop-down arrow

Troubleshooting If you have trouble with Step 2, be sure that you have clicked the Restore Down button rather than the Minimize button.

Developing Content and Layout

169

4 Click the Window Size drop-down arrow. Select the highest screen resolution available. For this activity, we selected 955 x 600 (1024 x 768, Maximized), as shown in Figure 6.5. If necessary, press F4 to hide the Files panel and Properties inspector.

Figure 6.5 The home page at a screen resolution of 955 x 600 (1024 x 768, Maximized).

Maximize button Design You should always preview your pages in the lowest and highest resolutions available on your computer system to see how your page looks at each extreme.

5 Select View>Visual Aids>Hide All. Click the Maximize button in the window. Press F4. Close the site when finished.

Define What does safe area mean?

Section 6.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Do not place too much content on a Web page.

1. Define white space, proximity, pixel, safe area, screen resolution.

4. Analyze Why might some viewers use a resolution of 800 x 600, while others use 1024 x 768?

• Place important content in a screen’s safe area. • View your Web pages in various browsers and at various screen resolutions. • Onscreen content appears larger at lower resolutions and smaller at higher resolutions.

170

Chapter 6

2. Identify where important content should be placed on a Web page. 3. Explain why it is important to include white space on a page.

5. Cause and Effect Why might too much clutter cause a visitor to leave the Web site quickly?

Apply It! Compare Web Designs Find two Web sites. Compare the two layouts and determine which one you believe is more effective. Explain your reasoning.

SECTION 6.3 CREATING A PAGE TEMPLATE Focus on Reading Read to Find Out The main purpose of this section is to explain how to create a custom template. Read to find out how to create custom templates when premade templates do not meet your needs.

Main Ideas

Key Terms

Reading Strategy

Creating a custom template provides consistency among the pages on a site and simplifies producing individual pages. The template can contain the elements that will appear on every page.

template logo title graphic table column row cell

Describe the following parts of a table: column, row, cell, header row, and header column. Use a table similar to the one below (also available online). Part

Description

A template is a reusable pattern that you can use to lay out elements on a Web page. Templates make it easy to create a new Web page or site.

Designing a Template What common elements are found in most templates?

Most Web pages contain the elements shown in Figure 6.6. Some Web development applications provide premade templates with placeholders for these basic elements. Dreamweaver provides premade page designs (accessible from the Start page) but these are not templates. A template is a predesigned pattern for a Web page. Page designs are designs for part of a Web page, that you put together to create a custom template. Using a custom template helps you meet the specific needs of your site.

Logo

Graphic

The Language Club

Figure 6.6 Each page in the Language Club site will follow a similar format. What is a template?

Title graphic

Home Navigation links

About Us Events

Body

Contact Us

E-mail Webmaster Copyright info

WebDesignDW.glencoe.com

Footer

Developing Content and Layout

171

In the following activity, you will begin creating the Language Club site’s basic template. You will also insert the site’s background graphic. This graphic will give the pages a standard appearance throughout the Web site.

ACTIVITY 6C Create a Page Template 1 Start Dreamweaver. On the Start page, in the Create New column, select Dreamweaver Site. In the Site Definition dialog box, name your site Language Club. Click the Next button. Select No, I do not want to use a server technology. Click Next. 2 Under How do you want to work with your files during development?, choose Edit local copies on my machine, then upload to server when ready (recommended). When you see Where on your computer do you want to store your files?, ask your teacher for the location. Either browse to the location on the hard drive by clicking on the folder icon or key the path directly. Click the Next button. 3 Click the How do you connect to your remote server? drop-down arrow and select None. Click Next. A summary of your settings will appear. Click Done. The site has been defined. On the Start page, under Create New, select HTML. (If necessary, select Design view.) 4 Right-click in the Document window and select Page Properties. 5 In the Page Properties dialog box, under Category, make sure Appearance is selected. Change the Page font as shown in Figure 6.7. Key the hexadecimal values for Text color and Background color into the boxes as shown. Change Left margin and Top margin to 0.

Figure 6.7 In the Appearance section of the Page Properties dialog box, you can modify font, color, and margin settings.

6 Next to Background image, click the Browse button. In the Select Image Source dialog box, click the Look in: drop-down arrow and browse to the DataFiles\Ch06\Images folder. Double-click the background_stripes.gif file. 7 If you see a dialog box with To make a document-relative path, your document should be saved first, click OK. In the second dialog box, click Yes to have Dreamweaver copy the image file to the site folder. 172

Chapter 6

8 In the Copy File As dialog box, click the Create New Folder icon. Name the new folder images. Double-click the images folder and then click the Save button to save the image file in this folder. Under Category, click Title/Encoding. In the Title box, key: Language Main. Click OK to close the Page Properties dialog box. 9 Choose File>Save as Template. In the dialog box, key: Language_Main in the Save as box (see Figure 6.8).

Figure 6.8 The name of your template will be Language_Main.

10 Click Save. Your screen should look like Figure 6.9. In the Document window, notice the file tab displays Language_Main.dwt. The file extension .dwt stands for Dreamweaver Template.

Figure 6.9 The finished template.

Explain Why would you want to create a custom template? Developing Content and Layout

173

The Language Club Logo What is the function of a logo on a Web page? Caution Include alternative text with graphics. Accessibility guidelines require all graphics to have alternative text.

A logo is a symbol used to represent a business or an organization. On many Web sites, clicking the logo will return users to the site’s home page. A title graphic, also called a page header, is an image that appears at the top of every page on a Web site. In the following activity, you will add the Language Club logo to the site’s template. You will also add alternative text to the graphic. Alternative text is text that appears on the screen if the image is not available.

ACTIVITY 6D Add a Logo 1 If necessary, open your Language_Main.dwt file. Open the Insert toolbar. On the Insert toolbar, click the Images button. 2 In the Select Image Source dialog box, browse to the DataFile\Ch06\ Images folder. Double-click the lc_logo.jpg file. If necessary, in the dialog box, click Yes. Double-click the images folder and then click the Save button to save the image file to this folder. 3 Select the logo graphic. If necessary, press Ctrl + F3 to open your Properties inspector. In the Alt box, key: The Language Club. In the Link box, key: index.html. 4 Your template should look like Figure 6.10. Save your template file. In the dialog box that says This template doesn’t have any editable regions. Are you sure you want to continue?, click OK.

Figure 6.10 You have created a template in which the logo on each page is linked to the site’s home page.

Alt Link

Explain In many Web sites, what happens when the user clicks the site’s logo? 174

Chapter 6

Tables

Figure 6.11

How are tables a useful organization tool?

Many designers use tables to organize and lay out text and graphics on a Web page. A table consists of vertical columns and horizontal rows. Each individual square within a table is called a cell (see Figure 6.11). Columns

CLUB MEETINGS

DATE

TIME

French Club

Mondays

6:00 p.m.–9:00 p.m.

German Club

Wednesdays

6:00 p.m.–8:00 p.m.

Spanish Club

Saturdays

12 :00 p.m.–2:00 p.m.

A table consists of vertical columns and horizontal rows. How could you quickly determine the number of cells in this table?

Header row

Rows

Cell

ACTIVITY 6E Create a Table 1 Open your Language_Main.dwt file in Design view. Click after the logo. Press Shift + Enter to move the insertion point below the graphic. 2 On the Insert toolbar, click the Table button. 3 In the Table dialog box, key the settings shown in Figure 6.12. Click OK.

Figure 6.12 You can enter the table settings you want in the Table dialog box.

4 Move the mouse pointer over the downward-pointing arrow in the table’s first column. Click and choose Select Column. In the Properties inspector, click the Merges selected cells using spans button. The three cells merge into one cell. 5 In the Properties inspector, click the Horz drop-down arrow. Choose Left. Click the Vert drop-down arrow and choose Top. This changes the horizontal and vertical alignment of objects in the cell. 6 In the Properties inspector, in the W box, key 180 to modify the column’s width. Press Enter. Click inside the top cell in the right-hand column. In the Properties inspector, in the H box, key 25 to modify the cell’s height. Press Enter. Developing Content and Layout

175

7 Click in the table’s top-right cell. On the Insert toolbar, click the Templates drop-down arrow and choose Editable Region. In the New Editable Region dialog box, in the Name box, key: header. Click OK. 8 Click in the middle cell of the right-hand column. Click Templates and choose Editable Region. In the Name box, key: content. Click OK. 9 Your template should now look like Figure 6.13. Save your work.

Figure 6.13 The editable header region allows you to customize each page’s header.

Compare What is the difference between a column and a row?

Section 6.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Templates help designers organize common Web page elements.

1. Define template, logo, title graphic, table, column, row, cell.

• Designers can create custom templates to meet the needs of a specific site.

2. Explain how a custom template differs from a premade template.

4. Compare and Contrast Describe two situations in which it would be better to enter text in a table rather than in paragraph form.

• Logos and title graphics help give each Web page in a site a consistent visual appearance. • Tables help organize a page’s content into rows and columns.

176

Chapter 6

3. List three properties of a table data cell that can be set in the Properties inspector. Explain the function of these three properties.

5. Draw Conclusions What would a user see on the screen if the graphic were not available and no alternative text had been included?

Apply It! Create a Table Review the notes you took in one of your classes. Organize some of the information you learned into a table. If possible, use a technology tool to create your table.

SECTION 6.4 ENHANCING THE TEMPLATE Focus on Reading Read to Find Out In this section, you will learn how to add elements to a template. Read to find out how to create navigation buttons and text links.

Main Ideas

Key Terms

Reading Strategy

You can insert navigation buttons into a template so that when you create each page, the links will already be established. Page footers typically include text links, an e-mail link to the Webmaster, and copyright information.

navigation button hover button interactive button active button link bar footer

Compare and contrast navigation buttons and text links. Use a Venn diagram like the one below (also available online). Buttons

Text Links

The Language Club template is almost complete. In this section, you will add navigation buttons and insert the template’s footer information.

Navigation Buttons What is the purpose of navigation buttons?

A navigation button is a button that users click to locate additional information and to navigate to other Web pages. There are different types of navigation buttons. ◆ A hover button, also called a rollover button, is a navigation button that changes appearance when touched or clicked by a mouse pointer. A hover button is a type of interactive button (sometimes called a dynamic button). An interactive button lets users know that an action has taken place, which increases the site’s user-friendliness.

You Should Know You can add premade button graphics to your Web pages and Dreamweaver will add the hover (or rollover) scripting automatically.

◆ A clicked button is referred to as an active button, because it is in the process of doing something, such as transferring the user to another Web page. Navigation buttons in the Language Club Web site will be vertically aligned at the left side of the template. A related group of horizontally or vertically aligned links is called a link bar (also referred to as a navigation bar). Placing a link bar in a Web page template helps users in several ways. ◆ The bar is easy to locate because it is always in the same position. ◆ Links are easy to find because they are always in the same order.

WebDesignDW.glencoe.com

Developing Content and Layout

177

ACTIVITY 6F Add Navigation Buttons 1 Open your Language_Main.dwt file in Design view. Click in the table’s left-hand column. 2 On the Insert toolbar, click the Images drop-down arrow. Choose Rollover Image. In the Insert Rollover Images dialog box, in the Image name box, key: Home.

Table 6.2 Change the information in the Insert Rollover Image dialog box to create each new button. Double check the URL for each image. They must be entered exactly as shown.

3 Next to the Original image box, click Browse. Browse to the DataFiles\Ch06\Images folder. Double-click nav_home_blue.gif. When asked if you would like to save the file, click Yes. Save the file in your images folder. 4 Next to the Rollover image box, click Browse. Browse to the DataFiles\Ch06\Images folder. Select the nav_home_red.gif file and save it in your images folder. 5 In the Alternate text box, key: Home. In the When clicked, Go to URL box, key: index.html. Click OK. 6 Repeat Steps 2 through 5 to create the About Us, Events, and Contact Us navigation buttons. Use Table 6.2 to create the buttons.

Navigation Buttons Image Name

Original Image

Rollover Image

Alternate Text

When Clicked, Go to URL

About Us

nav_about_blue.gif.

nav_about_red.gif

About Us

about_us.html

Events

nav_events_blue.gif

nav_events_red.gif

Events

events.html

Contact Us

nav_contact_blue.gif

nav_contact_red.gif

Contact Us

contact_us.html

7 Your link bar should look like Figure 6.14. Save your work. Preview your page in a browser. (Click OK if This template doesn’t have any editable regions. Are you sure you want to move? appears.) Move your mouse pointer over the buttons to see each one turn from blue to red.

Figure 6.14 The template contains a link bar with four rollover buttons.

Link bar

8 Close your browser. Click the Images drop-down arrow. Choose Image. Close the Select Image Source dialog box. Close the Language_Main.dwt file.

Describe What is the purpose of a navigation button?

178

Chapter 6

Footer Information Why is footer information important on a Web site?

A Web page’s footer usually contains copyright information, dates, contact information, and text links. The footer for the Language Club Web pages will have the following: ◆ Text links

You Should Know In Dreamweaver, if a footer is part of a template, then it can only be edited in the template file.

◆ E-mail address for the Webmaster ◆ Copyright information You will center each of these items horizontally on a separate line at the bottom of the template.

ACTIVITY 6G Add Footer Information 1 Open your Language_Main.dwt file in Design view. Click in the bottom cell of the right-hand column. 2 In the Properties inspector, click the Size drop-down arrow and select 12. 3 Key the text below, including the vertical line between each link. (To create the vertical line, press Shift + \). Place a space between each item you key: Home | About Us | Events | Contact Us 4 In the Properties inspector, click the Horz drop-down arrow and select Center. Any text or objects placed in this cell will be centered.

Shortcut To center text, you can also choose the Center Align button in the Properties inspector.

5 Press Shift + Enter and then key: Questions or comments about the Web site?. 6 Press Shift + Enter and key: Copyright 2008 – Language Club. 7 Your screen should look like Figure 6.15. Proofread your work and make any needed corrections. Save your work.

Figure 6.15 The template’s footer with footer information added.

Developing Content and Layout

179

Text Links You should always include text links in your footer. Like interactive buttons, text links often change colors to show whether the link has been clicked. Even if you use Dreamweaver’s default settings, you should always set your hyperlink colors to make sure that they work well with your site and do not blend into the background. Also confirm that the colors assigned to nonvisited, visited, and active links are consistent throughout your site.

ACTIVITY 6H Add Text Links 1 If necessary, open the Language_Main.dwt file in Design view. 2 In the page’s footer, select the word Home. In the Properties inspector, in the Link box, key: index.html. Press Enter. The text changes color to indicate it is a link. 3 Repeat Step 2 for the remaining About Us, Events, and Contact Us links. Use the information shown in Table 6.3.

Table 6.3 Each text link connects to a specific URL. Key the link exactly as shown.

Text

Link

About Us

about_us.html

Events

events.html

Contact Us

contact_us.html

4 Right-click a blank area of the page and select Page Properties. In the Page Properties dialog box, under Categories, select Links.

Figure 6.16 Use the Page Properties dialog box to set the color of links on your Web page.

180

Text Links

Chapter 6

5 Use the values shown in Figure 6.16 to key in the hexadecimal colors for Link color, Rollover links, Visited links, and Active links. Note that it is standard to have links be blue, rollover links red, visited links purple, and active links red. Click OK and save your work.

Links to E-mail Windows The last step in creating the Language Club template is to create a link to an e-mail window (also referred to as an e-mail hyperlink). When visitors click the Webmaster link at the bottom of the page, an e-mail window will pop up that contains the Webmaster’s e-mail address. This feature allows visitors to send messages to the Webmaster.

ACTIVITY 6I Add a Link to an E-mail Window 1 If necessary, open the Language_Main.dwt file in Design view. Position the insertion point after Questions or comments about this Web site? Press the spacebar once. 2 Choose Insert>Email Link. In the Email Link dialog box, in the Text box, key: E-mail the Webmaster. 3 In the E-Mail box, key your e-mail address (or another address, as instructed by your teacher). Click OK.

Figure 6.17

4 Your screen should look similar to Figure 6.17. Look at the Link text box in the Properties inspector. Notice that the text “mailto:” is automatically inserted at the beginning of the e-mail address you keyed.

A link to the Webmaster is inserted into the template’s footer.

E-mail to Webmaster link

Mailto automatically inserted

5 Spell check and proofread your template. Since you will build your Web pages on this template, you want to make certain everything is correct. If you make any changes, be sure to resave the page. Developing Content and Layout

181

6 Preview your template in several different browsers, and at several resolutions. Your screen should look similar to Figure 6.18. Close your browser(s). Make any needed corrections and resave your work. Close the Web site and exit Dreamweaver.

Figure 6.18 The finished template as viewed in a browser.

You have now created a template that will be the basis for each Language Club Web page. In the next chapter, you will use this template to create pages for the Web site. Describe What information does a Web page’s footer usually contain?

Section 6.4 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• A hover button changes appearance when touched by a mouse pointer.

1. Define navigation link, hover button, interactive button, active button, link bar, footer.

• A related group of horizontally or vertically aligned links is called a link bar.

2. Identify at least two ways that you can control a navigation button’s appearance.

4. Analyze What are the primary advantages of interactive buttons on Web pages? What are the advantages of text links?

• Including a link to an e-mail window helps users contact the site’s Webmaster or owner.

182

Chapter 6

3. Explain the purpose of an e-mail window.

5. Synthesize Besides using interactive buttons, how else can a Web designer make a site more user-friendly?

Apply It! Create a Footer Open the MySkills page you created in Chapter 4. Add a footer to the page that contains an e-mail contact and a copyright notice.

CHAPTER 6

Reading Review

SECTION 6.1 Creating Web Site Content

SECTION 6.3 Creating a Page Template

Key Terms

Key Terms

content, 162 inverted pyramid, 164

template, 171 logo, 174 title graphic, 174 table, 175

Main Ideas ■ Users typically scan text for keywords. ■ Group online text into short chunks with concise ■ ■

■ ■

heads. Use bulleted lists to make text easy to read. Format main headings larger than subheadings and use different colors and typefaces to help main headings stand out. Use an inverted pyramid to organize Web text. Brainstorming is a useful technique for generating and organizing online content.

SECTION 6.2 Placing Items on a Page Key Terms white space, 168 proximity, 168 pixel, 169

safe area, 169 screen resolution, 169

Main Ideas ■ Do not place too much content on a Web page.

■ ■ ■

■

Include white space to keep the page from looking too cluttered. Place important content in a screen’s safe area. Make sure you consider a page’s download time when adding text and graphics. View your Web pages in various browsers and at various screen resolutions to see how they will appear to different users. On-screen content appears larger at lower resolutions, and smaller at higher resolutions.

column, 175 row, 175 cell, 175

Main Ideas ■ Templates help designers organize common

Web page elements such as logos, title graphics, navigation links, and footers. ■ Designers can create custom templates to meet the needs of a specific site. ■ Logos and title graphics help give each Web page in a site a consistent visual appearance. ■ Tables help organize a page’s content into rows and columns.

SECTION 6.4 Enhancing the Template Key Terms navigation button, 177 hover button, 177 interactive button, 177

active button, 177 link bar, 177 footer, 179

Main Ideas ■ A hover button changes appearance when touched ■ ■ ■ ■

by a mouse pointer. A related group of horizontally or vertically aligned links is called a link bar. Including both text links and graphic navigation links makes a site more user-friendly. Visited text links are typically a different color from nonvisited and active links. Including a link to an e-mail window helps users contact the site’s Webmaster or owner.

Developing Content and Layout

183

CHAPTER 6

Review and Assessment

AFTER YOU READ Create a Study Guide Go back to the questions you created from the colored headings in the text. Use these questions to create a study guide for reviewing the chapter content. If your teacher agrees, you might want to form a small group to share your questions as a review activity.

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

15. Identify how you can use headings to create a well-organized Web site.

Reviewing Key Terms 1. What elements make up a Web page’s content? 2. What should you use to create visual space between images and body text? 3. What is a pixel? 4. Which of the following items should be placed in a page’s safe area: footer, logo, text link? 5. What is the standard screen resolution that most Web designers target? 6. Why is it helpful to use a template when creating a Web page? 7. True or false: A table consists of vertical rows and horizontal columns. 8. Rewrite this statement to make it true: A navigation button is a symbol used to identify a business or an organization.

Understanding Main Ideas 9. Describe how the size of an element affects a user’s perception of content. 10. Discuss how you can use an inverted pyramid to organize your ideas. 11. Explain why it is necessary to keep important elements within certain areas of the Web page. 12. Discuss why Web designers use tables in the design of a Web page. 13. Explain how table rows, columns, and cells are related to one another. 14. Discuss ways in which link bars make Web pages more user-friendly. 184

Chapter 6

Headings

16. List four properties that you can modify for a table within the Properties inspector, and what the modification would change. Property

Result of Modification

Property #1

Critical Thinking 17. Describe three situations in which an interactive button’s appearance might change. 18. Identify two situations in which you might want to include links to an e-mail window. Then give two reasons a site might use text links and graphic navigation links. Explain your answer. 19. Compare and Contrast Do you prefer reading a magazine in print or online form? Why do you prefer one over the other? Analyze how online magazines present their articles compared to the print editions. How do these magazines adapt their content to suit online readers? What online magazine do you read? Use that online magazine to illustrate your answers.

CHAPTER 6

Review and Assessment

20. Analyze Content Imagine designing a Web site for your favorite movie. Following the rule of function over form, identify the elements that you would include on your home page and those you would resist including. Explain your answers. 21. Evaluate Layout You are a professional Web designer. Evaluate how you might use premade templates, custom templates (that you have created), or custom-designed sites in your business. Use a matrix like the one below to organize your ideas. Premade Templates

Custom Templates

Custom-Designed Sites

Charts & Graphs Read the paragraph and chart below and then answer the question.

The chart below shows the results of a survey in which students from 72 schools, grades K–12, described how they participated in distance learning. Participation in Distance Learning 50% 40% Classes Shared with Other Schools

30%

Research Projects Science Fair Projects

20%

E-mail Communication

22. Analyze Design Describe ways in which a well-designed Web page provides visual cues to help users navigate the site. Explain how these visual cues help make a site more user-friendly. 23. Evaluate a Web Site Choose a Web site and analyze the site’s home page. Then, describe the visual cues that help users navigate that site. Is the site userfriendly? Are the visual cues working? Use examples to support your ideas.

10% 0%

According to the chart, which of the following statements is true?  Over 50% of the students shared classes with other schools.  Only 5% of the students used distance learning for research projects.  At least 18% of the students used e-mail.  Fewer than 5% of the students participated in science fair projects.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.

WebDesignDW.glencoe.com

On your own paper, copy and complete the chart shown below.

Study with PowerTeach

24. 25. 26.

Result

+

Result

+

WebDesignDW.glencoe.com

Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 6.

Online Self Check Result

Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 6. Developing Content and Layout

185

CHAPTER 6

Activities

1. MAKING CONNECTIONS Language Arts—Write Web Text Rewrite the following text for use on a Web page. Use headings and bulleted lists to break the text into smaller sections. Then, create a basic Web page using your revised text. Cape Cod, Massachusetts, is a popular vacation destination. In the summer, you can swim in the ocean, go on a whale-watching expedition, or walk the beach on Cape Cod Bay. In the fall, you can take nature walks at the National Seashore, attend cranberry harvest festivals, or visit Plymouth Plantation to learn how the pilgrims lived. Many people also visit Cape Cod in the winter to enjoy the snow and to attend the holiday festivals. If you are planning a visit to Cape Cod in the spring, plan to spend time visiting the many museums, parks, and other historical monuments.

2. STANDARDS AT WORK Students use telecommunications to collaborate, publish, and interact with peers, experts, and other audiences. (NETS-S 4)

Evaluate Layout You have been hired by a Web design company to evaluate Web sites of the company’s designers. Go to the home page of a Web site you visit often. Assume this site was designed by one of the company’s designers. Evaluate the page’s layout and prepare an evaluation that you could send to the Web designer. 1. Create an evaluation. In your evaluation, consider whether important content is emphasized. Where does your eye go first? Are related items grouped together? Use a table like the one shown below to evaluate the page’s layout. PAGE TRAIT

EVALUATION

Important Content White Space Proximity Alignment

2. Write an e-mail that summarizes your evaluation. Be sure to include the link to the page you reviewed. With your teacher’s permission, exchange e-mails with another student or exchange printouts of your evaluations. Review each other’s evaluations. Reply to the other student’s evaluation explaining why you agree or disagree. 186

Chapter 6

CHAPTER 6

Activities

3. TEAMWORK SKILLS Evaluate Content Select one Web page you have created and have it reviewed by your peers. Following your teacher’s instructions, form a team with three other students. Make sure that no one in the team has seen each other’s pages. Look at the first Web page for ten seconds. As a group, discuss the following: 1. Look at the whole Web page. What is the Web page about? 2. Is information easy to see and understand? Why or why not? 3. Compare the use of text and graphics to convey information. Did the author choose form over function? Explain your answers to your team. 4. What theme or scheme do you see? (What are the coordinating colors, text enhancements, graphic enhancements, people enhancements?) 5. Describe how the site is user-friendly. 6. How can the page be improved? The team must agree on how the page should be revised. Repeat this for each member’s Web page. Make any needed changes to your page, and share the pages again as a group. Point out how you improved your page and see if your team members agree.

4. CHALLENGE YOURSELF Create a Template Use Dreamweaver to design a template based on the diagram below. This template can be used to create a photo gallery. Include placeholder text as appropriate. The text can describe the expected content for the page. Save the template and give it an appropriate name. Logo and title graphic

Short paragraph introducing photos

Table with six cells Navigation buttons Text links

After you have created the template, create a second photo gallery template. Use the same information from the diagram, but redesign the template so that it is different from the first. On your own paper, sketch a diagram of the new template. Then, use Dreamweaver to create it. Developing Content and Layout

187

CHAPTER 6

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Create Web Content Family friends have just opened an Italian restaurant. They want you to design a Web site that contains their menu, phone number, and e-mail so that customers can make reservations or call in take-out orders.  Make a list of keywords that apply to the restaurant.  Use the information from their advertisement (shown right) to write the content for the site’s Featuring the best pasta in town, outstanding home page. pizza, and terrific panini sandwiches!  Write the content for the restaurant’s menu page.

2. Create a Template



  

At Giovanni’s, we offer the finest food at reasonable prices! Our chef brings his authentic family recipes direct from Italy.

Create a template for the restaurant site in You Try It Come dine with us at 1234 Riverview Avenue. Skills Studio #1. Call in advance for reservations or takeout orders. Sketch a layout for the home We also deliver. page that uses a two-column table. The template must also Reach us by phone 323-555-5555 or e-mail at include a logo, a title, a footer, [email protected] and navigation buttons. Place the navigation buttons in the table’s left column and the page’s content in the right column. Create a template in Dreamweaver for the site’s home page based on your sketch. Add the home page content you wrote in You Try It Skills Studio #1. Add navigation buttons for other pages in the site. ◆ Menu page ◆ Restaurant Events page ◆ Employee of the Month page

 Add text links and E-mail the Webmaster in the footer.  Add a link from E-mail the Webmaster to an e-mail window.  Save your work.

188

Chapter 6

CHAPTER 6

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Develop Content for a Template In Chapter 5, you created a storyboard and thumbnails for a Web site about a local band. Use the storyboard and thumbnails to plan the content for the home page and create the Web site. First, write the content for the home page. Then, create a template for the site. The template should include a title bar, navigation buttons, and a footer. Plan a table for the template that places navigation links and content in appropriate places. Enter the content information for the home page. As you create the page, evaluate whether or not you should break the information into pieces and place it on multiple Web pages. Determine which information would belong on which page in your site. Then, create the additional pages in the Web site, but do not add content to them. Link all pages using the navigation structure shown in your storyboard.

2. Create a Personal Web Site Plan and create a personal Web site template. First, sketch a storyboard for your template. The template should include a title area, a navigation menu, a graphic placeholder, a text placeholder, and a footer. Your personal Web site will include at least three other pages. As you design your template, think about what pages you will have in your site. Ideas for pages include a portfolio page showing work you are proud of, an interests page describing your hobbies, pages for one or more of the classes you are taking, a creativity page for ideas you want to explore further or use later, or a résumé page. Based on your sketch, use Dreamweaver to create the template for your site. Be sure to include a link bar and text links. Use appropriate colors on your template page. Save your work.

My Web Site My Hobbies My Classes

All About Me

Image

My Portfolio P Text ext Links Copyright Information E-mail the Webmaster

Developing Content and Layout

189

CHAPTER

7

Selecting Design and Color

YOU WILL LEARN TO… Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2 Use color scheme guidelines Add colors to a Web site Identify Web-safe colors Section 7.3 Adjust text properties Summarize formatting guidelines Format text in Dreamweaver

WHY IT MATTERS ................................................. Imagine traveling to another state and finding that the road signs look different from place to place. To avoid confusion, roads and highways in the United States have standardized designs. For instance, an octagon shape is always a stop sign. Consistency in Web design is just as essential. In this chapter, you will learn the skills and concepts to design consistent Web sites. Think about a tool that you use every day (a pen, television set, computer, etc.). Write a short paragraph identifying the features or controls that make this tool easy to use. What would happen if you used a similar tool that did not have these features? How easy or hard would it be to relearn how to use this tool if it were redesigned?

190

Chapter 7

CHAPTER

7

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 7.1 Compare and Contrast Graphics ..................................... 197 7.2 Explore Background Colors ...... 201 7.3 Evaluate Fonts ............................ 209 You Try It Activities 7A Use a Template to Create New Pages .................................. 7B Organize the Site’s File Structure .................................... 7C Insert Page Headers .................. 7D Add Content and Color to the Home Page.................................. 7E Format Text ................................

193 195 196 199 208

You Try It Skills Studio Format Text in Tables ........................ 216 Add a Contact Us Page ...................... 216 Web Design Projects Add Text to a Web Page ..................... Refine Your Personal Web Site ........ Write for a Web Audience ................. Create a Web Site About Your Community ......................................... Create a Food Festival Web Page .....

217 217 218 218 219

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................

214 214 215 215

Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Get Creative An excellent way to stay engaged in your reading is to make associations while you read. For example, drawing an image of a piece of computer hardware and labeling it helps you remember it. Thinking of an easy-to-remember rhyme or setting a series of short steps to music is another way to help your brain make associations for easier recall. Your memory trick does not have to be beautiful or impressive—it only has to mean something to you.

WebDesignDW.glencoe.com

Selecting Design and Color

191

SECTION 7.1 PRINCIPLES OF PRESENTATION DESIGN Focus on Reading Read to Find Out The main purpose of this section is to explain the core principles of good Web design. Pay close attention to the key terms consistency and repetition. Read to find out how Web designers use the principles of consistency and repetition to develop well-designed sites.

Main Ideas

Key Terms

Reading Strategy

Well-designed Web pages follow the principles of consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page help make a site user-friendly.

consistency repetition page header

Identify five presentation design principles. Use a web diagram similar to the one below (also available online).

Presentation Principles

A user-friendly Web site is a site that visitors feel comfortable navigating. Two features that make Web sites user-friendly are consistency and repetition. These are important elements of presentation design.

Consistency and Repetition Activity 7.1 Explore Presentation Design Find out more about presentation design by visiting WebDesignDW.glencoe.com.

How do Web designers use consistency and repetition to develop well-designed Web sites?

To make a visitor to your site feel at ease and comfortable, you will want to establish a consistent design theme throughout your Web site. Consistency is a similarity among the parts of a whole. From its home page to its subpages, your Web site should have the same look throughout, from the graphics to the layout to the writing style. For example, every page should have the same logo, header graphics, navigation, and footer information. A consistent design: ◆ helps users become familiar with the site quickly. ◆ puts users at ease. ◆ makes it easier for users to find information quickly. Another characteristic that users expect in Web sites is repetition. Repetition is the duplication of specific elements on all (or most) of a site’s pages. Repeating elements on your Web pages allows users to become familiar and comfortable with your site quickly. Elements that every Web page should have are shown in Figure 7.1 on page 193.

192

Chapter 7

WebDesignDW.glencoe.com

Figure 7.1

Title of the page and where it is in the site

A logo or name of the site

Repeating elements helps users learn where items are located quickly. Why is it important that users are comfortable with a Web site?

Web Page Elements Navigation options

A link back to the home page

Following the principles of consistency and repetition on your Web pages will make users more comfortable with your site. This, in turn, will encourage users to visit the site more often. Summarize What four elements should be the same on every page in a Web site?

Jargon The term experience design refers to creating an environment that customers can relate to on an emotional level.

Using a Template How can using a template help me create a well-designed Web site?

Using a template is a good way to create a user-friendly Web site. Templates help you build consistency and repetition into your Web site and give the site a unified design from page to page.

Assigning Page Titles and File Names In the following activity, you will use the page template you developed in Chapter 6 to create a home page and three subpages for the Language Club Web site. You will then assign page titles and file names to each of these pages.

Shortcut To display the files for a Web site, press F8.

ACTIVITY 7A Use a Template to Create New Pages 1 Start Dreamweaver or, if necessary, close any open sites to see the Dreamweaver Start page. 2 In the Start page, under Create New, click the More folder. 3 In the New Document dialog box, click the Templates tab. Under Templates for, select your Language Club site. Under Site, select Language_Main. Click Create to open the template. 4 At the top of the page, in the Title box, select Language Main (see Figure 7.2). Key: Language Club – Home Page. Press Enter.

Figure 7.2 Enter the title of the home page in the Title box.

5 Choose File>Save As. Name the file index.html. Click Save. Selecting Design and Color

193

6 Choose File>New (or press Ctrl + N) to display the New from Template dialog box. Follow steps 3 through 5 to create three additional Web pages. Use the page titles and file names shown in Table 7.1 to create these new pages.

Table 7.1

Page Titles and File Names

Assign each page the page title and file name shown here.

Page Title

File Name

Language Club – About Us

about_us.html

Language Club – Events

events.html

Language Club – Contact Us

contact_us.html

7 When complete, your file list should resemble the list shown in Figure 7.3. Save your work.

Figure 7.3 Four pages have been created using the Language_Main template.

Troubleshooting Your file names must match Table 7.1 exactly in order for the links created in Chapter 6 to work properly. Double check the names before saving the file.

Pages and Navigation Structure Now that you have set up the pages for the Language Club site, you will need to create a folder in which to put the subpages. One way is to make an individual folder for each section. For example, the About Us section would appear in the browser as: http://www.myschool.com/ about_us/about_us.html. Another way is to create a single “pages” folder and place all the subpages into it. The About Us section would then appear as http://www.myschool.com/pages/about_us.html. In the following activity, you will create a pages folder to store your Language Club Web site pages. 194

Chapter 7

ACTIVITY 7B Organize the Site’s File Structure 1 In the Files panel, right-click your Language Club Web site’s index_html file. In the options menu, select Set as Home Page. Right-click Site – Language Club and choose New Folder from the menu (see Figure 7.4). Name the new folder: pages.

Figure 7.4 Files panel menu with New Folder option selected.

You Should Know To create a third-level page, follow the steps to create a new page based on the template. On the page you would like to link to it, create a button or hyperlink to the new page.

2 Select the about_us page, then hold the Ctrl key down and select the contact_us and events pages. Drag the files into the pages folder. In the Update Links dialog box, click Update. 3 Your Files panel should look like Figure 7.5. In the Files panel, select Map view and click Expand/Collapse to view the site’s navigation map. Click Expand/Collapse again and return to Local view.

Figure 7.5 The three subpages added to the pages folder.

4 Preview your site in a browser. If you have any broken links, ask your teacher how to fix them.

Selecting Design and Color

195

Page Headers In Chapter 6, you created sections in the Language Club template for both page headers and footers. Page headers, also known as page banners, are typically graphics that appear at the top of a page. These graphics identify: ◆ the site. ◆ the section you are currently in. ◆ the site’s primary navigation (possibly). In the next activity, you will add a page header to each section of the Language Club site.

ACTIVITY 7C Insert Page Headers 1 In the Files panel, double-click index.html to open it. 2 Double-click the header editable region. Press Delete to remove any text that may be in the section. 3 Choose Insert>Image (or press Ctrl + Alt + I). In the Look in box, browse to the DataFiles\Ch07\Images folder. 4 Double-click the file hdr_welcome.gif. If necessary, click Yes. Save the file in your Web site’s images folder. 5 The header graphic is inserted into the home page, as shown in Figure 7.6.

Figure 7.6 The page header inserted into the home page.

Design Headers should be similar in appearance on both home and subpages to add consistency to a site.

Page header

6 Make sure the image is still selected. In the Properties inspector, in the Alt box, key: Language Club Web Site. Press Enter. 7 Choose File>Save to save the page. 196

Chapter 7

8 Repeat steps 1 through 7 for the subpages about_us.html, events.html, and contact_us.html. For each page, insert the header graphic and alternative text shown in Table 7.2. Make sure you save each page’s graphic file in your Web site’s images folder. Be careful to insert the correct graphic file into each page.

Table 7.2

Page Header Information File Name

Graphic

Alternative Text

about_us.html

hdr_aboutus.gif

About Us

events.html

hdr_events.gif

Events

contact_us.html

hdr_contactus.gif

Contact Us

Insert the graphic and alternative text for the remaining three pages.

9 When finished, select File>Close All. Save your changes if prompted to do so.

You have now completed the basic framework of the Language Club site. You can use the skills learned in this section to create a simple site or a site with multiple pages. In the next sections, you will develop the site by adding content and text formatting. Describe What is the purpose of a page header?

Section 7.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Two characteristics of most well-designed Web pages are consistency and repetition.

1. Define consistency, repetition, page header. 2. Explain why consistency and repetition are important design principles.

4. Analyze How does a template help to make a site consistent? How may templates both help and hurt the development of a site?

3. List three items that are typically repeated on a Web site’s main pages. Why are these three items typically repeated?

5. Synthesize Discuss several ways in which you rely on consistency and repetition in your daily life. Provide examples.

• Elements such as page headers, logos, and link bars should be repeated on the site’s main pages in order to make a site easier to navigate. • A page header (banner) helps users identify where they are in a Web site. • A template helps Web designers make a Web site consistent.

Apply It! Compare and Contrast Graphics Each Language Club Web page has a graphic that identifies the entire site and a graphic that identifies each individual page. How are these two graphics different from one another? How are they alike?

Selecting Design and Color

197

SECTION 7.2 CHOOSING COLORS Focus on Reading Read to Find Out Ask yourself why choosing appropriate colors is an important part of designing a Web site. How does choosing colors relate to the two design goals of consistency and repetition? Read to find out why selecting a color scheme plays a crucial role in Web site development.

Main Ideas

Key Terms

Reading Strategy

A Web site’s color scheme should both appeal to visitors and create a sense of continuity throughout the pages. Using hexadecimal values for colors ensures that the colors will appear the same to all users.

color scheme Web-safe color

Identify four color scheme guidelines. Use a web diagram similar to the one below (also available online).

Color Scheme Guidelines

Color adds impact and visual interest to Web pages. As the designer, you decide what colors to use and how to apply them to each page. You should, however, keep certain guidelines in mind when choosing colors.

Color Scheme Guidelines Activity 7.2 Select Color Schemes Find out more about using color in your Web pages by visiting WebDesignDW.glencoe.com.

What do I need to consider when choosing a color scheme?

A color scheme, also known as a color palette, is the selection of colors you use throughout your Web site. As you choose a color scheme, limit the number of colors to no more than three. Select colors that complement the site’s theme and purpose. Color scheme guidelines are shown in Figure 7.7.

Figure 7.7 Selecting a color scheme is an important part of designing a Web site. Why should you try to choose contrasting colors when selecting a color scheme?

Color Scheme

Bold colors

Limiting colors

Excessive color and use of color on color

➠ ➠ ➠ ➠

Reinforces consistency and repetition

Highlight important information

Creates unified look and feel

Makes it difficult to read content

Evaluate Why is it important to choose a color scheme that supports a Web site’s theme? 198

Chapter 7

WebDesignDW.glencoe.com

Web-Safe Colors How can using Web-safe colors help me create a user-friendly site?

In the mid 1990s, many computer systems were capable of displaying only 256 colors. Of these, only 216 displayed the same on the Macintosh and Windows operating system. At the time, many designers adopted this limited color palette, known as Web-safe colors, to provide reliable color within their pages. Today, many computer systems can display thousands or millions of colors. Choosing Web-safe colors has thus lost some of its importance, although most Web designers still reference the palette when choosing colors. Most graphics and development applications, including Dreamweaver, also make use of Web-safe colors. To identify a Web-safe color, examine the hexadecimal value pairs. If the hexadecimal value contains 00, 33, 66, 99, CC or FF in any combination, it falls within the Web-safe color palette (see Appendix C for an overview of the palette). As you choose colors for your site in the following activity, watch the Text Color box in the Properties inspector to see the color’s corresponding hexadecimal number.

You Should Know Dreamweaver’s Command>Set Color Scheme option provides examples of how various link colors interact with background colors.

ACTIVITY 7D Add Content and Color to the Home Page 1 In the Language Club Web site, expand the Templates folder and double-click Language_Main.dwt to open the template. 2 Click in the word content in the content editable region. In the Properties inspector, click the Bg drop-down arrow and select white. The hexadecimal value #FFFFFF displays in the box. In the Properties inspector, click the Vert drop-down arrow and select Top. Your screen should look similar to Figure 7.8.

Figure 7.8 The content region with a white background and vertical alignment set to Top.

Content region with new background color

Vertical alignment Background color

Selecting Design and Color

199

3 With the insertion point still in the content region, choose Modify>Table>Split Cell. In the Split Cell dialog box, under Split cell into, select Columns. Set the Number of columns to 2. Click OK. 4 Click inside the new table cell and choose Insert>Template Objects>Editable Region. In the dialog box, in the Name box, key: bodytext. Click OK. 5 Save your template file. When asked to update all the files dependent on this template, click Update. Click Close. Close the template file. 6 Open index.html and double-click on the content editable region. Press Delete to remove any text. 7 Choose Insert>Image. Browse to the DataFiles\Ch07\Images folder and double-click photo_members.jpg. Save the file in the images folder. 8 In the Properties inspector, click Align Center. In the Alt box, key: Club Members. Your screen should look like Figure 7.9.

Figure 7.9 Photo center aligned using the Align Center option in the Properties inspector.

Align Center

9 Place the insertion point to the left of the photo. Press Shift + Enter to insert space above the photo. 10 Position the insertion point in the space above the photo and key: Hello! Hola! Bonjour! 11 Double-click the bodytext editable region. Press Delete to remove any text. Key: Here is a group photo of our club members at this year’s kick-off meeting. It is never too late to join in and explore new languages and cultures from around the world! 200

Chapter 7

Figure 7.10 Your Language Club home page now includes a photo and text.

12 Your page should look similar to Figure 7.10. Select Text>Check Spelling to check for errors (or press Shift + F7). If you receive spelling errors for “Hola” and “Bonjour” choose Ignore. Save your file.

Design As you design, think about users who are color blind. Avoid using red or green to emphasize important information.

In this section, you learned that there is more to selecting color than just being creative. Selecting color requires you to consider many different aspects of the site including the purpose of the site, the site’s intended audience, and the reason color is needed. Keeping these items in mind will help you to use color like a professional. Analyze Why did Web designers originally decide to use Web-safe colors when creating sites?

Section 7.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• A Web site’s color scheme is a set of selected colors that should create a sense of continuity.

1. Define color scheme, Web-safe color.

4. Evaluate Describe a color scheme from a Web site that you believe is well designed. Defend your opinion with examples from the Web site.

• You can use different colors to emphasize important content. • Using Web-safe colors will ensure that the colors will look the same in a variety of browsers.

2. List the steps you follow to change an editable region’s background color. 3. Summarize four guidelines that you should follow when selecting colors and describe why these guidelines are important.

5. Analyze Select three news sites and determine what dominant colors appear on each. Why do you think these colors were selected?

Apply It! Explore Background Colors Experiment with three different background colors for the Language Club home page. What effect do these changes have on the look of the page? (Do not save your changes.)

Selecting Design and Color

201

SECTION 7.3 FONTS AND TYPOGRAPHY Focus on Reading Read to Find Out Think about how the fonts or text styles you use in a Web site can influence your audience. Read to find out how you can use different styles and formatting to make your Web site’s message clear.

Main Ideas

Key Terms

Reading Strategy

Text can be formatted with font type, size, and color, as well as by line alignment and spacing. Format your site so your pages are readable, consistent, and attractive.

typography formatting font pixel alignment serif sans serif

Compare and contrast serif and sans serif fonts. Use a Venn diagram like the one below (also available online).

Serif

Sans Serif

Typography is the style, arrangement, and appearance of text. On the Web, the use of fonts and good typography can influence how clearly you communicate with your audience. In this section, we will discuss how to choose fonts and formatting so your message is clear. Content Many word processors have textediting features that are not available in Dreamweaver. It is often easier to create a document in a word processor before inserting it into a Web page.

Formatting Text in a Web Site How does formatting influence how a user views your Web site?

When creating Web pages, you need to consider what font sizes, colors, styles, typefaces, and alignments you want to use. Determining these text properties is referred to as formatting.

Font Types A font is a set of characters with a specific shape and style. Times New Roman, Courier, and Arial are examples of frequently used fonts. Dreamweaver features a predefined list of fonts commonly installed on most computer systems (see Figure 7.11). Less common fonts might not be available on all computers. Using these predefined fonts will allow you to maintain some control over the appearance of text in your pages.

Figure 7.11 Dreamweaver’s list of standard fonts. What are some of the fonts available on your computer system?

202

Chapter 7

WebDesignDW.glencoe.com

Font Size To specify font size in Dreamweaver, you can either enter your own numerical value in the Size box on the Properties inspector, or you can select a size from the Size drop-down menu shown in Figure 7.12. The default, and most common, unit of measurement for fonts on the Web is the pixel. The larger the pixel value, the larger the text on your pages will be. When selecting font sizes, bear in mind that various operating systems, platforms, and browsers may all display the same font size differently.

Figure 7.12 Use the Size menu to select a font’s size. Why would you want fonts to be different sizes on a page?

Font Style You can apply bold, italic, or underlined styles to the text on Web pages. Of these three styles, you will use bold and italic most often. The use of underlined text in a Web page generally indicates a hyperlink. Avoid using underlined text so you do not mislead visitors. In Figure 7.13, you will notice that Dreamweaver has left out the underline style to discourage you from using it on your pages. If necessary, you can access this style from the Text>Style menu. Bold

Figure 7.13 Style buttons are found on the Properties inspector. Why do Web designers avoid underlining text on Web pages?

Italic

Selecting Design and Color

203

Text Alignment Alignment is the position of text on a page. Figure 7.14 shows the four text alignment styles. Most text on the Web is left-aligned. The three other alignment styles are rarely used, since they tend to distract visitors and make it more difficult to read text.

Figure 7.14 Text can be left-aligned, centered, right-aligned, or justified. Which alignment is most often used in Web design?

Left-aligned text is positioned flush with the left edge of the page. Text is usually left-aligned automatically when you enter it on a page.

Centered text is positioned in the middle of the page.

Right-aligned text is positioned flush with the page’s right edge.

Justified text is positioned so that all lines have the same left and right margins.

Font Color Using color on text can help highlight important words on pages. Use color sparingly to increase the impact. Many Web designers use a single color for most text, and then use one or two additional colors to attract attention to key content. Use the Text Color menu on the Properties inspector to select and apply color to text, as shown in Figure 7.15.

Figure 7.15 Use the Text Color menu to make your fonts different colors. Why might you make a font a different color on a page?

204

Chapter 7

Formatting Style Menu The Format drop-down menu on the Properties inspector contains a number of different heading and paragraph options to choose from. The heading settings range from Heading 1 to Heading 6. The higher the number, the smaller your text will be. Heading 1 displays text in a large size, while Heading 6 displays text in a much smaller size. The six different headings and examples of how they display text are shown in Figure 7.16.

Figure 7.16 Use the Format menu to select predefined heading styles. What is the advantage of using these heading styles?

When you apply a heading style to text, the browser then displays that text as bold. You should therefore use headings to help important text stand out on your Web page. Use the heading settings to format items such as: ◆ Titles ◆ Subtitles ◆ Sections within documents Use the higher level headings (Headings 1 and 2) to make titles and subtitles stand out on your page. Use the lower level headings (Heading 3 and up) to format sections and subsections within documents. Using the predefined styles in the Format menu allows you to format text quickly. If you want more control over the scale of your text, use the Size option in the Properties inspector instead. Identify Why is the underline style not featured on the Dreamweaver Properties menu? Selecting Design and Color

205

Formatting Guidelines How can I format text to make my Web site more user-friendly?

Text on your Web pages should be readable, formatted consistently, and attractive in presentation.

Readability Of the three factors mentioned above, the most important is readability. If your text is difficult to read, users will not be able to understand the information you want to communicate. Ensure that your text is as readable as possible by applying some of the following formatting guidelines.

Use Sans Serif Fonts Two of the most commonly used font categories are serif and sans-serif. ◆ Serif fonts have additional lines or curves on certain letters and numbers. ◆ Sans serif fonts are “clean” with no additional lines. Examples of both fonts are shown in Figure 7.17. The titles and headings used in this book are sans serif fonts, while the body text is a serif font. Most Web designers use sans serif fonts such as Arial since people generally find it easier to read sans serif fonts on the screen.

Figure 7.17 Most people find sans serif fonts easier to read on the screen than serif fonts. How is a serif font different from a sans serif font?

Figure 7.18 Make sure there is enough contrast between your text color and your background color. Which example do you find easier to read?

Serif Fonts

Sans Serif Fonts

Times New Roman

Arial

Courier New

Futura

Garamond

Verdana

Choose High-Contrast Fonts and Backgrounds Both the color of text and a page’s background can affect readability. Choose colors that strongly contrast with one another. Black text on a white background is generally the best combination. However, this combination may not always fit your site’s design. Think light and dark as you select colors and be sure to look at the page in your browser to preview the results. You may even want to invite other people to view your page to determine its effectiveness.

POOR CONTRAST

SHARP CONTRAST

Text is easier to read when it is used with an appropriate background. The color and size of the text as well as the color and pattern of the background influence readability. Is this text easy to read?

Text is easier to read when it is used with an appropriate background. The color and size of the text as well as the color and pattern of the background influence readability. Is this text easy to read?

206

Chapter 7

Consistency As with the colors and graphics in your Web site, keep the formatting of text consistent throughout as well. This aids users in finding information on new pages and puts them at ease by using a format they are already familiar with. Table 7.3 contains some guidelines for making text consistent.

Table 7.3

Font Consistency Guidelines Guideline

Purpose

Use styles and colors sparingly

Too much formatting can overwhelm users. Also try to avoid formatting text in all uppercase.

Align text consistently

Uneven alignment can be confusing. Titles, subheadings, and the main body text should appear the same across all your pages.

Limit the number of fonts

Using too many fonts can distract users. Try to use no more than three different fonts.

Formatting fonts consistently can help make a site more readable. Why is it important that a site be readable?

Appearance As with your color scheme, the fonts you use should visually support the message of your site and page.

Use Formatting to Emphasize Text The formatting you use should also reflect the item’s importance. Use a larger font size, a different color, or other formatting options to highlight important elements. Generally, the more important the page element, the larger its size should be. Items such as titles are often larger than body text, as shown in Figure 7.19.

Figure 7.19 The size of text reflects the item’s importance. What is the most important element on this page?

Title: 36px

Author: 18px

Body: 16px

Copyright: 12px

Selecting Design and Color

207

Use Standard Fonts As mentioned earlier, Dreamweaver includes a predefined list of fonts commonly installed on most users’ computers. Use these fonts (shown in Table 7.4) to avoid difficulties such as text reflowing or reformatting differently when viewed in a user’s browser. Table 7.4 Different computers have different fonts installed on their hard drives. Which of the fonts below are serif fonts?

Mac OS and Windows Font Substitutions Mac OS System Font

Windows System Font

Courier

Courier New

Helvetica

Arial

Times

Times New Roman

Use Standard Font Sizes The type of browser, operating system, and computer can all influence how a font looks. This is also true for the size of the font. Think about what type of computer systems your target audience will have and select standard fonts that will work on their systems. Summarize What three factors must you consider when deciding how to format text on your Web pages?

Formatting Text in Dreamweaver What menus should I use to format text in Dreamweaver?

In this activity, you will format text using size, color, alignment, style, and font type.

ACTIVITY 7E Format Text 1 Open the Language Club Web site’s index.html page. 2 Select the Hello! Hola! Bonjour! text above the photo. In the Properties inspector, click the Font drop-down arrow and select Arial, Helvetica, sans-serif. 3 In the Size box, key: 20. Click the Bold style option. 4 In the Text Color box, key #3300FF to change the Hello! Hola! Bonjour! text’s color to blue. 5 Select the text in the bodytext editable region. Change the Font to Verdana, Arial, Helvetica, sans-serif. 6 Change the font Size to 18 pixels. 7 If necessary, click Align Center to center the text. 8 Press F4 to hide the panels. Your home page should look similar to Figure 7.20 on page 209. Press F4 again to open the panels. 9 Save your file. Select File>Close All (or press Ctrl + Shift + W) to close all of the files in the Web site. Exit Dreamweaver. 208

Chapter 7

Figure 7.20 The Language Club’s home page with modified style and alignment of elements.

In this unit, you learned the basic principles of information and presentation design, including how to add a color scheme and format text in Dreamweaver, and the importance of consistency and repetition. As you continue to create Web sites, keep these principles in mind to create sites that are both attractive and user-friendly. Identify Which menu do you use to select a font size?

Section 7.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Text properties include font type, style, alignment, and color.

1. Define typography, formatting, font, pixel, alignment, serif, sans serif.

4. Evaluate Select a Web site and describe how the text is formatted. What is emphasized by the formatting used?

• A font is a set of characters that have a specific shape and style.

2. Discuss two reasons why the on-screen size of a font can vary from one computer system to another.

• Centered, right-aligned, and justified text are rarely used on Web pages.

3. Identify the three most common ways for specifying a font size in a Web site.

• Text should be readable, consistently formatted, and attractive.

5. Draw Conclusions Imagine that the colors of a company’s logo clash with the background color of its Web pages. How should this conflict be handled?

Apply It! Evaluate Fonts Apply three different types of fonts to the photo caption on the Language Club home page. Evaluate each font for readability and appearance. (Close the site without saving your changes.)

Selecting Design and Color

209

Respecting Intellectual Property

M

any people do not understand that online resources are protected by copyright and trademark laws.

Understanding Intellectual Property The term intellectual property refers to an idea that is a product of a person’s intellect and creativity, such as: ◆

Text (books, plays, and articles)

◆

Songs

◆

Photographs and illustrations

◆

Software programs

Copyright laws guarantee a work’s creator the right to determine where and how the work is used. Similarly, trademark laws protect “marks,” such as company and product names and logos. If you download a copyrighted work or use a trademark without permission, you may be breaking the law.

Using Resources Ethically Avoid violating someone’s copyright or trademark by following these guidelines: ◆

Never copy text or graphics from a Web site without getting permission. If you use the material, cite the source.

◆

Only download music from legal services that compensate the songs’ creators.

◆

Never copy software programs to give away or sell. Distributing copied software is piracy, and is illegal.

◆

The Department of Justice’s Cybercrime Web site is full of Never use a company’s name or information about intellectual property. trademark to misrepresent the source of a product or site’s content.

1. Compare and Contrast Use a Venn diagram to examine the similarities and differences between copyright and trademarks. 210

Chapter 7

2. Research Use the Cybercrime Web site or other sources to identify real-world examples of copyright and trademark violations and their consequences.

CHAPTER 7

Reading Review

SECTION 7.1 Principles of Presentation Design Key Terms consistency, 192 repetition, 192

page header, 196

Main Ideas ■ Two characteristics of most well-designed Web sites ■

■

■ ■ ■

are consistency and repetition. Using consistent visual elements and placing key items in the same place from page to page make a site user-friendly. Elements such as page headers, logos, and link bars should be repeated on the site’s main pages in order to make a site easier to navigate. A universal color scheme contributes to consistency across the site. A page header (banner) helps users identify where they are in a Web site. A template helps Web designers make a Web site consistent.

SECTION 7.3 Fonts and Typography Key Terms typography, 202 formatting, 202 font, 202 pixel, 203

Main Ideas ■ Text properties include font type, size, style, ■ ■

■ ■ ■ ■

SECTION 7.2 Choosing Colors color scheme, 198

Web-safe color, 199

Main Ideas ■ A Web site’s color scheme is a set of selected colors ■

■ ■ ■

■ ■

Key Terms

that should create a sense of continuity. The color scheme of a Web site should be used consistently in elements such as title graphics, navigation buttons, and backgrounds. The color scheme should be compatible with the Web site’s purpose. You can use different colors to emphasize important content. Using Web-safe colors will ensure that the colors will look the same in a variety of browsers.

alignment, 204 serif, 206 sans serif, 206

alignment, and color. A font is a set of characters that have a specific shape and style. Do not underline text for emphasis on a Web page. Users might think that underlined words are hyperlinks. The most common type of text alignment on Web pages is left-aligned because it is easiest to read. Centered, right-aligned, and justified text are rarely used on Web pages. Limit the number of fonts you use on a Web page to no more than three. Best practice is to use standard fonts that are found on most computer systems. Most people find it easier to read sans serif font online. Text should be readable, consistently formatted, and attractive.

Left-aligned text is positioned flush with the left edge of the page. Text is usually left-aligned automatically when you enter it on a page.

Centered text is positioned in the middle of the page.

Right-aligned text is positioned flush with the page’s right edge.

Selecting Design and Color

Justified text is positioned so that all lines have the same left and right margins.

211

CHAPTER 7

Review and Assessment

AFTER YOU READ Using Creative Study Tools Choose a topic from the chapter and create some artwork or compose a brief song based on the content to help you remember it. Exchange your study tool with a friend. Does your friend’s study tool mean as much to you as the one you developed yourself? Evaluate how this study tool helps you remember the topic.

Reviewing Key Terms 1. Give three examples of ways in which repetition is commonly used in Web sites. 2. What is the difference between consistency and repetition in Web site design? 3. What is a page header? Describe how it is used in a Web site. 4. How many Web-safe colors were available and used in the past? 5. Why is it important to consider typography when designing a Web site? 6. What is a pixel? 7. Give examples of three standard fonts. 8. What is an example of a serif font?

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

14. Discuss the factors that influence the type of font a Web designer uses on a particular page. Factor

Choice of Font

(Example) Body Text

Factor

Factor

➠ ➠ ➠

(Example) Sans serif font

Font

Font

15. Identify the four types of alignment. Highlight the alignment that is used most often in Web design. Alignment

Alignment

Alignment

Alignment

Most Common Alignment

Understanding Main Ideas

Critical Thinking

9. Discuss ways in which the Language Club Web site exhibits the characteristics of consistency and repetition. 10. Identify the factors that you should consider when choosing a color scheme. 11. Explain the meaning of the term standard font. Discuss the main reason you should use standard fonts on a Web site. 12. List five ways in which text can be formatted. 13. Describe the difference between serif and sans serif fonts. Which type of font is considered most readable in printed text? Which type of font is considered most readable on a computer screen?

16. Make Predictions This chapter discusses why you should design your site to be readable. Do you think readability guidelines will change as people increasingly use online materials? Explain your answer. 17. Analyze Copy and complete the graphic organizer shown below on your own paper. Discuss two ways that the hardware and software used by Web site visitors can affect the decisions made by the Web designer.

212

Chapter 7

Hardware

Software

1. (example) Default fonts

1. Software element

2. Hardware element

2. Software element

Review and Assessment

CHAPTER 7

18. Draw Conclusions Which font would you use in a site about a children’s theater? Which font would you use in a site about mountain climbing in the Swiss Alps? Explain your answers. 19. Synthesize Select another communication device with which you are familiar, such as television or mobile phone. Are principles such as consistency and repetition applied in this method? How are the ways in which they are applied similar to Web design principles? How are they different? Copy the Venn diagram shown below and use it to illustrate your answer. Television

Mobile Phone

Reading & Writing Read the paragraph below and then answer the question.

Well-designed Web pages follow the principles of consistency and repetition. Consistency means maintaining a similarity among the parts of a whole. From its home page to its subpages, your Web site should have the same look throughout, from the graphics to the layout to the writing style. Repetition is the duplication of specific elements on all (or most) of a site’s pages. Repeating elements on your Web pages allows users to become familiar and comfortable with your site quickly. According to the paragraph, which of the following statements is true?

20. Analyze Which formatting features would you use to create titles? Which would you use to emphasize important passages of text? 21. Compare and Contrast Identify five valid reasons a Web site might use many colors and unusual fonts. Then give five reasons a site would use limited colors and traditional fonts. Think of examples for both types of sites.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.

22.

+

23.

+

24.

+

WebDesignDW.glencoe.com

+

+

 When it comes to Web design, consistency and repetition are basically the same thing.  Repetition means making sure the layout is the same on every page.  Using a different logo on each page of a Web site is a sign of consistency.  If you use an entirely new look on a subpage of your site, you are not using consistency.

WebDesignDW.glencoe.com Study with PowerTeach

Result

Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 7.

Result

Online Self Check

Result

Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 7.

Selecting Design and Color

213

CHAPTER 7

Activities

1. MAKING CONNECTIONS Science—Demonstrate Color Differences The human eye views differences in color based on their wavelengths. Colors with a long wavelength, such as blue, indigo, and violet, appear to come forward when viewed on a computer screen. Colors with a shorter wave length, such as red and orange, appear to recede or go backward when viewed on a computer screen. Create a Web page that demonstrates this concept. Use the figure on the right as a model. Notice the color differences. Use red text on a blue background and blue text on a red background. Compare the printed screen to the Web page you create. Compare and contrast the two color combinations. Do the colors appear to have the same effect in print as they do online? Identify which combination is easier to read and explain why. Then, explain whether or not people who are color-blind would be able to read this combination of colors.

Making Connections

Making Connections

2. STANDARDS AT WORK Students use technology tools to enhance learning, increase productivity, and promote creativity. (NETS-S 3)

Analyze Text Styles and Color Create a Web page in Dreamweaver that contains a two-column table with four rows. Color the rows from top to bottom as follows: white, black, light blue, and dark red. Use hexadecimal values to create the colors. Key the following text in the top left cell: This is a Heading 1. This is a Heading 2. This is a Heading 3. This is a paragraph size 2. This is a paragraph size 3. Style each line of text as described by the text. For example, use the Heading 1 style for “This is a Heading 1.” Use a serif font for all lines of text. All text should be black. Copy the text into all the other rows in both columns. Change the text color so that the text is legible and easy to read. In the left column change all text to a serif font. In the right column change all text to a sans serif font. Compare the two columns. Write a paragraph that compares and contrasts the legibility of text in each cell of the table. 214

Chapter 7

CHAPTER 7

Activities

3. TEAMWORK SKILLS Create Web Content Your team is creating a “Web Design Tips and Resources” page for your school’s online handbook. You plan to include the following pages: Home Page, Dreamweaver Tips and Tricks, Graphic Resources, Reviews, and Equipment Information. 1. Write the content for the site home page, including a short descriptive paragraph about the site and a bulleted list with details of the site. 2. Research Web sites that could be used as sources of images. You will use this research to create links on the Graphic Resources page. Write the content for the Graphic Resources page, including a short paragraph for each link describing what the site contains, the type of images available, and terms of use (if any). 3. Write a brief content summary for each of the other pages in the site.

4. CHALLENGE YOURSELF Create a Color Scheme It is often easier to design a color scheme using colors in an existing object or image. In this activity, you will create a color scheme for a store specializing in holiday decorations. Use Dreamweaver to create a new page template. Add elements like those shown in the figure below. Then, locate a graphic that best represents the products and images of the store. The graphic you choose will be the starting point for your color scheme. Select Web-safe colors that coordinate with the graphic for each of the following page elements: ◆ Background ◆ Logo ◆ Bulleted list ◆ Buttons ◆ Heading 1 ◆ Heading 2 ◆ Visited links ◆ Unvisited links Update your template to reflect your new color scheme. Refine your choices as needed until you are satisfied with your overall color scheme. Selecting Design and Color

215

Projects

CHAPTER 7

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Format Text in Tables In this activity, you will add information to the Language Club’s About Us page.  In your Language Club site, double-click in the content editable region. Change the Font color to #3300FF. Key: The Language Club is dedicated to expanding an awareness of world nationalities and cultural diversity. Format the text Verdana, Arial, Helvetica, sansserif font, size 18 pixels.  Use Insert>Table to insert a table with 5 rows and 2 columns into the bodytext editable region. In the Table width box, key 100 and change pixels to percent.  Key the text shown below into the table. Make the column headings (Office and Name) bold and add a header row named Language Club Officers. Proofread and save your work. LANGUAGE CLUB OFFICERS Office

Name

President

Camisha Roberts

Vice President

Hoang Pho

Secretary

Darryl Nevels

Treasurer

Bo Hernandez

2. Add a Contact Us Page In this activity, you will add information to the Language Club’s Contact Us page.  Open your Contact Us page. In the content editable region, key the subhead How to Reach Us and below that key the subhead How to Become a Member. Format each subhead Verdana, Arial, Helvetica, sans-serif, Size 18, Font Color #3300FF.  Below the first subhead, key your teacher’s name, the school’s address, and the school’s phone number. Press Enter after each item. Below the second subhead, key one or two sentences about who to contact to become a member. Format the text under each subhead Verdana, Arial, Helvetica, sans-serif, Size 16, Font color #3300FF.  In the bodytext editable region, key and format the subhead Upcoming Meetings. Below the subhead, create a table with 4 rows and 3 columns, Table width 100%. Label the columns Meetings, Date, and Time. Bold the column heads and enter information about three upcoming meetings. Format the table text Size 16, Font color #3300FF. Proofread and save your work.

216

Chapter 7

CHAPTER 7

Projects

Read the projects described below. Then follow the directions to complete the project.

1. Add Text to a Web Page   





In this activity, you will add text to the Language Club’s Events page and create a Fundraiser subpage. Use your Language_Main.dwt file to create a new fundraiser.html subpage in your pages folder. Insert the hdr_fundraiser.gif file from the DataFiles\Ch07\Images folder into the page’s header editable region. Save the file in your images folder. In the content editable region, copy and paste or key the content you created in You Try It Activity 6A, page 165. Change the font style and size of the text to be consistent with the Web site. Save and close the Fundraiser page. Open the Events page. Navigate to the DataFiles\Ch07\Text folder and select the file Events.doc. Open this file in a word processing program. Copy the text into the content editable region. Modify the text to be consistent with the site. In the first paragraph, select the word Fundraiser. Create a hyperlink that links to your fundraiser.html page, as shown below. Proofread and save your work.

2. Refine Your Personal Web Site

    

In Chapter 6 you created a template for a personal Web site. Now you will create a color scheme for the entire Web site, decide what fonts and styles you want to use, and create content for the site’s pages. Use fonts and colors to create a header for the home page and a smaller header for other pages. Add content and a photo to your home page layout. Add a caption such as More about who I am to the photo. Apply your selected color scheme and styles to the home page. Use your template to create the other pages for your site and save them in a pages folder. Add content to these pages and apply your color scheme and styles to each page, so the entire site has a consistent look.

Selecting Design and Color

217

Communication Skills: Write for a Web Audience Locate a short printed document such as a company flyer, brochure, or advertisement. Then, adapt the material for a Web page. You do not need to worry about copyright and trademark laws, unless you plan to publish the site on the Web. 1. Draw a sketch of the Web page. 2. Consider the Web audience, and rewrite the content if necessary. Use bulleted lists, headings, subheadings, or links to secondary pages if needed. 3. Use Dreamweaver to create or design your page. 4. Have classmates review your work. 5. If you agree with their assessment, revise your Web page. Good Web designers continually assess and review their sites, even after they are up and running.

Teamwork: Create a Web Site About Your Community Work with a team to create a Web site about one specific feature in your community, such as a favorite place to meet, a well-known site, or a famous resident. 1. As a team, decide on a purpose and target audience for the Web site. 2. Brainstorm content and sketch a diagram of how the home page and subpages should look. Determine the layout and color scheme. 3. Divide the following tasks among your team members: writing the text, finding graphics, finding sites for hyperlinks, and creating the page in Dreamweaver. 4. Present the site to the class.

218

Chapter 7

Create a Food Festival Web Page For this project, you will create a Web page for the Language Club’s International Food Festival. Choose one of the following topics for your page:  A profile of one of the teachers or administrators in your school who will represent another country as a guest speaker.  A restaurant in the area that will be donating food for one of the booths representing a particular nationality.  A writing contest offered by the Language Club about Diversity and Cultural Awareness. When creating your Web page, follow these steps: 1. Determine your mission statement and audience.

Web Page Checklist

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

2. Determine how visitors will navigate to your page from the Web site’s home page. 3. Determine the elements to include on the page, including:

✓ ❑

◆ title

◆ navigation elements

✓ ❑

◆ text

◆ themes

✓ ❑

◆ visuals

◆ colors

✓ ❑

4. Locate any images you might need (remember copyright and fair use). 5. Create a sketch showing how the page will be laid out to include all the necessary elements.

✓ ❑ ✓ ❑

6. Use Dreamweaver to create or design your Web page. 7. Add hyperlinks to other pages on the Language Club Web site or to other relevant Web sites. 8. Use the checklist (shown on the right) to evaluate the items on your site. 9. Present your finished page to your teacher and peers for their review. Have them evaluate it based on the checklist. 10. Review your Web page based on the evaluations. 11. For your portfolio, include a screen shot or printed copy and an electronic copy of your finished product.

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

OVERALL APPEARANCE & CONTENT The subject of the Web page is clearly identified. The design is consistent and uncluttered. Most important elements are visible on the screen without scrolling. Images and links relate to the text on the page. ORGANIZING TEXT Content is organized logically. Text is broken into small sections. The fonts are easy to read. Key points are highlighted effectively. Headings and subheadings follow a logical hierarchy. Paragraphs or text blocks are separated by white space. LANGUAGE Sentences are short and simple. Bulleted or numbered lists are used effectively. Grammar, punctuation, and spelling are correct. Language is concise. Text uses effective style such as active voice, strong verbs and nouns, etc.

Selecting Design and Color

219

UNIT

3

Enhancing a Web Site

Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 3 Evaluating Web Sites. Learn how to evaluate Web sites to make sure the information is reliable.

220

Think About It Hooking the Audience Books and magazines often use images and color to attract readers. These visual elements help make the publication interesting and exciting.

Design Evaluation Activity Look at some books or magazines. Jot down the visual elements that attract you and those that make you want to put the publication down. Then describe how some of the same design principles might apply to Web pages.

221

CHAPTER

8

Using Web Graphics

YOU WILL LEARN TO… Section 8.1 Identify types of graphics Identify and compare graphic formats Describe compression schemes Section 8.2 Identify image sources Use graphics ethically Insert an inline graphic Crop, resize, and resample a graphic Modify a graphic Section 8.3 Create an image map with hotspots Create a Web photo album Create a thumbnail

WHY IT MATTERS ................................................. Images can convey feelings and meaning in ways that words cannot. Have you ever seen a person in a painting or photo and imagined what he or she must have felt? Images are evocative—they make us react intensely and immediately. Using images effectively can help you create a powerful Web site. Think of a powerful image you have seen in the last few weeks. It could have been a piece of artwork, a newspaper photograph, or an image on television or in a movie. How did you react to that image? Write a paragraph about how that image made you feel. Describe the characteristics of the image that you think caused this emotional reaction.

222

Chapter 8

CHAPTER

8

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 8.1 Convert File Formats ................. 227 8.2 Create a Logo ............................. 235 8.3 Create a Web Photo Album ....... 242 You Try It Activities 8A Insert an Inline Graphic ............ 8B Crop, Resize, and Resample a Graphic ....................................... 8C Modify a Graphic........................ 8D Create an Image Map with Hotspots ..................................... 8E Create a Web Photo Album Using Fireworks ......................... Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................

230 233 234 238

You Try It Skills Studio Add Graphics to a Web Page ............ 248 Use Hotspots...................................... 248 Web Design Projects Create a Virtual Field Trip Web Site ............................................. 249 Create an Art Styles Web Site .......... 249

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB 240

246 246 247 247

Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Prior Knowledge Imagine some friends are talking about a new movie you have not seen. You soon lose interest. However, when they talk about your favorite movie, you become interested. Reading works much the same way. The more you know about a subject, the more you understand. That makes it easier to be an active, interested participant. Look over the “You Will Learn To” at the beginning of the chapter. Write down what you already know about each objective and what you want to find out by reading the chapter. As you read, find examples for both categories.

WebDesignDW.glencoe.com

Using Web Graphics

223

SECTION 8.1 WEB GRAPHIC TYPES AND FILE FORMATS Focus on Reading Read to Find Out The main purpose of this section is to explain the different types of Web graphics. Read to find out how Web designers determine which type of graphic to use in their Web pages.

Main Ideas

Key Terms

Reading Strategy

The two basic types of graphics are raster and vector. The two most common graphic file formats are GIF and JPEG. Compression schemes reduce an image’s download time but also diminish its quality.

raster graphic vector graphic Graphic Interchange Format (GIF) Joint Photographic Experts Group (JPEG) Bitmap (BMP) Portable Network Graphics (PNG) lossless compression lossy compression

Compare and contrast the characteristics of the GIF and JPEG file formats. Use a Venn diagram like the one below (also available online).

GIF File

JPEG File

Graphics are an important part of Web pages. Creating a good graphic presentation greatly enhances the design of a site. Web designers have two major concerns when they use graphics on a Web site. The first concern is how good the image will look on the screen. The second concern is how quickly the image will download. In this section, you will learn how Web designers must constantly balance these two concerns when choosing graphic file formats.

You Should Know Software programs can automatically calculate the equations used to produce a vector graphic.

Types of Graphics What are the two basic types of graphics?

How a graphic is created determines its type. There are two basic types of graphics: raster graphics and vector graphics. ◆ A raster graphic is made up of pixels. Pixels are tiny squares of color arranged on a rectangular grid like tiles in a mosaic. The human eye reads collections of pixels as a seamless image. ◆ A vector graphic is composed of simple lines defined by mathematical equations. Logos, text banners, and 3D Web buttons are often vector graphics. Summarize What is the difference between a raster and a vector graphic?

224

Chapter 8

WebDesignDW.glencoe.com

Graphic File Formats What is the difference between a GIF file and a JPEG file?

Once you create a graphic, you must save it in a graphic file format. The two most popular file formats used in Web design are: ◆ Graphic Interchange Format (GIF) ◆ Joint Photographic Experts Group (JPEG) format The fact that most Web browsers only display images saved in these file formats is what makes them popular. However, some Web designers also save graphics with file formats such as: ◆ bitmap (BMP) ◆ Portable Network Graphics (PNG) A comparison of the four different graphic file formats is shown in Table 8.1.

Table 8.1

Graphic File Formats File Format

File Extension Advantages

Disadvantages

GIF

.gif

• Small file size downloads quickly • Good for line drawings and simple graphics • Used to create transparent GIFs and images with animation effects

• Only supports a maximum of 256 colors • Limited number of colors makes it not appropriate for saving photographs

JPEG

.jpg or .jpeg

• Supports millions of colors • Color support makes it good for saving photographs

• Because files have a higher quality, they are often large and download slowly

BMP

.bmp

• Supports millions of colors

• Very large files download slowly • Generally not used for Web pages

PNG

.png

• Supports more colors than GIF files but still downloads quickly • Features better support of transparency than GIF files

• Not supported by many browsers (but may become increasingly popular as more new browsers accept format)

The format in which you choose to save a graphic affects both the graphic’s quality and download time. Which two formats download quickly?

You Should Know GIF is pronounced with a hard “g” as in the word “graphic”. JPEG is pronounced “jay-peg.” Both formats are based on pixels, so most images on the Web are raster graphics. If you save a vector graphic as a GIF or JPEG file, it also gets converted into pixels.

Evaluate Which graphic file format is better for saving photographs?

Using Web Graphics

225

Compression Schemes and Download Times Why do Web designers compress image files?

The more pixels an image contains, the higher its resolution and quality. However, an image that contains more pixels also has a larger file size. As an image’s file size increases, so does its download time. Download time is usually measured in Kilobytes per second (Kbps). Web designers usually compress image files so they download more quickly in a user’s browser. Compression is a process that reduces an image’s file size by removing some color information. However, while compression makes files smaller, it can also reduce an image’s quality.

Lossless and Lossy Compression Schemes Graphics are compressed using either lossless or lossy compression schemes. ◆ A lossless compression scheme means that a graphic file loses no data when it is compressed. However, compressing a file using lossless compression does not gain you any significant download time. GIF (and PNG) files automatically use lossless compression. ◆ A lossy compression scheme removes data from a graphic file so the file is significantly smaller and downloads more quickly in a Web browser. However, decompressing the image does not restore the data. For this reason, the restored image has a reduced image quality on the screen. JPEG files use lossy compression.

Adjusting Files and Calculating Download Times To help you manage download times, Dreamweaver displays the approximate modem download time on the status bar, in the lower-right corner of a document’s window (see Figure 8.1). You can use this estimate to determine how adding images, such as photographs, affects your page download speed.

Figure 8.1 The status bar for a Web page indicates 57K/9 sec which means the page will require 9 seconds to download on a 56Kbps modem (the default connection speed setting specified in Dreamweaver). What does Kbps stand for?

226

Chapter 8

Download time

Low-Bandwidth Alternatives To reduce download times, you can also use an image editing program to create two versions of an image, one in full color and the other with a reduced color palette. The Web browser can then display the reduced-color image as a placeholder until the full-color version downloads.

Converting Graphic Formats Many graphic applications allow you to open a graphic and save it in another format. For example, you can open a JPEG file in Photoshop and then save the image as a GIF file. Use this method if you want to create an animation, since only GIF files can be animated. When you convert a file from one format to another, the converted image may not look like the original. For example, if you convert a JPEG photograph to a GIF, the resulting image will not have as many colors and may look distinctly different, as shown in Figure 8.2.

Figure 8.2 The left photo is a full-color JPEG image, while the right image shows the same photo saved in GIF format with 256 colors. When is it better to use a GIF format?

Contrast What is the difference between lossless and lossy compression?

Section 8.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• There are two basic types of graphics: raster and vector.

1. Define raster graphic, vector graphic, Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Bitmap (BMP), Portable Network Graphic (PNG), lossless compression, lossy compression.

3. Evaluate Why should you consider an image’s download time when creating Web pages?

• The GIF graphic file format works best for line art and simple drawings. • The JPEG graphic file format works best for photographs. • Compression schemes reduce an image’s download time but also diminish its quality.

2. Compare and Contrast raster graphics and vector graphics.

4. Make Decisions You are creating a Web site for a new art gallery. What issues will you need to consider when choosing graphic file formats for this site?

Apply It! Convert File Formats Open a graphics application, such as Macromedia Fireworks. Open a JPEG image such as bike.jpg. Save the image as a GIF file. Compare the quality of the two images and the sizes of the two files.

Using Web Graphics

227

SECTION 8.2 OBTAINING AND MODIFYING GRAPHICS Focus on Reading Read to Find Out The main purpose of this section is to explain how to obtain and modify graphics. As you read, stop and make sure you understand the key terms cropping, resizing, and resampling. Read to find out how and why Web designers make changes to graphics.

Main Ideas

Key Terms

Reading Strategy

You can insert pre-made graphics or use tools to create images for your Web pages. Always check the terms of use before downloading pre-made graphics. You must use image editing programs to make substantial changes to graphics.

dots per inch (dpi) image editing program draw program inline graphic cropping resizing aspect ratio resampling

Identify five ways in which you can obtain or create graphics. Use a web diagram like the one below (also available online).

Ways to Obtain or Create Graphics

Images on Web sites come from many sources. In this section, you will learn about tools and resources you can use to create and modify graphics.

Obtaining Graphics What are the two main ways of acquiring graphics?

Activity 8.1 Locate Graphics Online Get more ideas for locating images for your Web pages by visiting WebDesignDW.glencoe.com.

Troubleshooting Some sites spell “Clip Art” as one word: “Clipart.” Try both variations when using a search tool to look for Clip Art on the Web.

228

Chapter 8

There are two main ways that you can acquire the graphics you need for your Web pages. You can obtain premade graphics and insert them directly into your Web pages. Or, you can use tools to create your own graphic files.

Using Premade Graphics One of the easiest ways to add images to your Web pages is to use premade graphics. Premade graphics are readily available both online and from other sources.

Locating Graphics Online The Web is an excellent source of premade graphics. You can use a search engine to locate the exact image you want. Most sites organize their images by categories such as nature, travel, sports, and work. When you find an image that you want, right-click it and select Save Picture As from the menu to save the image to your hard drive. Using Clip Art Many software applications include large image collections that you can insert on your pages. You can also purchase commercial image packages. These packages provide both general image collections and collections built around specific themes or events. Clip collections may include illustrations, photos, sound effects, and short video clips. WebDesignDW.glencoe.com

Creating Graphic Files To use graphics from print sources, such as photographs or magazines, you must first use an input device to convert them into digital images. You can also use software applications to create digital images.

Using Input Devices A scanner is an example of an input device that converts a printed image into a digital format that can be used, for instance, on a Web page (see Figure 8.3). A scanner converts an image into a grid of dots, or pixels. The size of the grid a scanner can create defines its resolution, which is stated in dots per inch or dpi. A scanner with a 600 dpi resolution will give you 600 pixels for every linear inch of the original image. While input devices can capture details in high-resolution, most monitors generally display images at a resolution of 72 dpi or 96 dpi. With a digital camera, you can take a picture and then download the image to your computer. Digital camera prices and capabilities vary widely. A resolution of 640 x 480 pixels is acceptable for photographs for use on the Web.

Figure 8.3 Flatbed scanners enable you to convert a printed image to digital format. Why do you need a scanner if you want to insert a photograph into a Web page?

Using Software Applications Web designers use different software applications to create raster graphics and vector graphics for their sites. ◆ Raster graphics are created with image editing programs, or graphic applications, such as Adobe® Photoshop® , Macromedia® Fireworks® , Mac® iPhoto® , and Corel® Paint Shop™ Pro® . ◆ Vector graphics are created with draw programs, such as Adobe Illustrator, PhotoDraw, and Macromedia Freehand. Graphics can also be created in word processing applications such as Microsoft Word. Once created, the graphic must be copied into a draw or paint program and saved as a GIF file before insertion into a Web page.

Using Graphics Ethically Whether you are using premade images, or converting existing images into graphic files, you need to make sure you are using graphics ethically. Unless you have specific permission to use someone else’s images, downloading graphics violates copyright laws. These laws apply whether or not you see a copyright statement on the Web site. You also need the owner’s consent to use images with a registered trademark. Most Web sites that provide graphics also include instructions for legally using their images. Some sites may indicate that specific images are “royalty free.” This, however, does not mean that you are free to use the images in any way you want. Follow the site’s rules carefully and identify your source. Explain How can you make sure you are using a graphic ethically?

Troubleshooting If you are unsure about how you can use an image, send the site’s owners an e-mail. Ask for clarification of the policy or for permission to use the selected image.

Using Web Graphics

229

Inserting Graphics into Dreamweaver What is an inline graphic? You Should Know Sometimes a broken image icon will appear on a Web page. This icon indicates that the image is missing or damaged and cannot be displayed.

When you insert a graphic file into a Web page, the actual image is not inserted into the page’s HTML code. If you look at the page’s HTML code, you will see that only the picture’s file name appears. An tag tells the browser where to locate the stored file. The browser must request the graphic file and insert it onto the page. This type of picture is called an inline graphic. In this unit, you will create the Centerville Community Center Fundraiser Web site, which will promote the annual Bike and Hike event. In the following activity, you will add a photograph to the Web site’s Scrapbook page.

ACTIVITY 8A Insert an Inline Graphic 1 Start Dreamweaver. Browse to the DataFiles\Ch08\WebExamples folder. Use the Site>Manage Sites option to define the example site. Name it Bike and Hike Web site and save it in your Web site folder. If necessary, review the steps in You Try It activity 1B in Chapter 1. Open the Scrapbook page (scrapbook.html) in Design view. 2 Position the insertion point just after the View Video Page button and press Enter once. 3 If necessary, press Ctrl + F2 to open the Insert toolbar. On the Insert toolbar, in Common view, click the Images drop-down arrow and select Image. In the Select Image Source dialog box, browse to the DataFiles\Ch08\Images folder. Double-click bike.jpg and save it in your site’s images folder. 4 With the image selected, in the Properties inspector, in the Alt text box, key: Bike Photo. Select the photo, and switch to Split view. Notice how the image is inserted with the tag (see Figure 8.4). Return to Design view. Save your file.

Figure 8.4 An tag is used to insert the photograph into the Web page.

Image tag

Identify What tag does Dreamweaver use to insert graphic files into a Web page?

230

Chapter 8

Modifying Graphics How can I use Dreamweaver to modify graphics?

After you have obtained or created an image, you will probably have to modify the graphic to make it work on your Web page. You can edit images using either image editing software or basic Dreamweaver tools.

Image Editing Programs

Figure 8.5

To make major changes to images, use a graphic or image editing program. Popular image editing programs include Adobe® Photoshop® , Macromedia® Fireworks® , Corel® Paint Shop™ Pro® , and Mac® iPhoto® . The more sophisticated and relatively expensive applications, such as Photoshop, allow you to modify images in a variety of ways. Special tools, called filters, can change an image’s appearance, such as making it look like an oil painting. Figure 8.5 shows some examples of filters.

Original

Paint Daubs

Image editing programs, such as Adobe® Photoshop®, allow you to manipulate an image in different ways. When might these filters be useful?

Twirl

Using Fireworks to Modify Images in Dreamweaver Macromedia Fireworks is an image editing program that is used to create and modify graphics. Select Fireworks tools are incorporated into Dreamweaver. You can, for example, crop, resize, and resample an image in Dreamweaver. These tools behave the same way in Dreamweaver as they do in Fireworks, and they allow Dreamweaver users to make minor edits to images without needing a separate program.

Cropping and Resizing Graphics When you insert an image into Dreamweaver, the picture appears at the exact pixel dimensions in which it was originally stored. You will usually need to either crop or resize the image to make it the size you want. ◆ Cropping an image involves removing portions of the image that you do not want to use. This process can significantly reduce the size of a file. ◆ Resizing an image refers to changing the size that the image appears to be on the screen. You can resize the image by selecting it and then dragging its sizing handles to the desired size. Sizing handles are located on the right, bottom, and lower-right corner of the selection box. Dragging a corner handle while pressing the Shift key keeps the image’s aspect ratio (the relationship between the image’s height and width) constant and in proportion.

Navigation You can customize your own Dreamweaver toolbar. With your teacher’s permission, right-click the Insert toolbar and select Customize Favorites. Click and choose the commands you want. Then, display your Favorites toolbar by selecting Favorites on the Insert toolbar.

Using Web Graphics

231

Figure 8.6 The Properties inspector allows you to modify an image in a variety of ways. What three ways can you use to change an image’s size?

Width

Height

Crop

Resample

Sharpen

Brightness/Contrast

You also can use the Properties inspector’s width and height box to resize an image (see Figure 8.6). Specify the image’s width and height in pixels to increase or decrease the image’s size. Sometimes the numeric values in the width or height box are bold and sometimes they are normal. The bold values indicate the width or height is larger or smaller than the saved size of the image. To quickly restore the image to its original width or height, click the W or H to the left of the numeric value boxes. When you are resizing an image, it is best to use a dedicated image editor rather than rely on Dreamweaver. If you resize an image in Dreamweaver, the quality will be lower because the file size remains the same as the original. Your image may look distorted.

Resampling Graphics Resizing a graphic changes its appearance but does not change the actual number of pixels in the graphic’s file. Resampling changes the number of pixels in a graphic’s file to match the new screen area occupied by the image’s altered size. For example, if you enlarge a 100 x 100 pixel image so that it occupies a 200 pixel square area, resampling adjusts the image so that it is 200 pixels wide and 200 pixels high. Caution: When you resize an image, you do not change the image’s file. While the image may look smaller on screen, its file size has not changed. Resampling makes an image’s file smaller so that it downloads more quickly. However, resampling also permanently changes your graphic file by changing the number of pixels in that file. Many of the actions you perform in this section’s activities can permanently alter your graphic file. For example, to undo changes, you can use: ◆ Edit>Undo ◆ click the Restore button, or ◆ press Ctrl + Z. However, once a change is saved, it cannot be undone. It is a good idea to keep copies of all your graphic files in case you perform an action that you cannot undo and need to return to the original file. 232

Chapter 8

In the following activity, you will use the Properties inspector to edit the photo you added to the Scrapbook page.

ACTIVITY 8B Crop, Resize, and Resample a Graphic 1 In the Bike and Hike Web site, open the Scrapbook page in Design view. Select the photograph. 2 In the Properties inspector, click the Crop button. A warning box appears telling you that this action will permanently alter your graphic file. In the warning box, with your teacher’s permission, select Don’t show me this message again and click OK. A dashed outline box with eight square handles appears over the image. 3 Click and drag the handles to adjust the crop marks until they look similar to Figure 8.7. Note that a double arrow appears when the insertion point is directly over a handle. 4 Click the Crop button a second time to finalize cropping the image. Your screen should look similar to Figure 8.8.

Figure 8.7 Adjust the crop marks to indicate the areas you want to remove from the image.

Handles

Crop lines

Figure 8.8 Crop marks are finalized.

Shortcut Instead of clicking the Crop button a second time, you can simply double-click the image to complete the crop.

Using Web Graphics

233

5 Make sure the image is selected. Click and drag the handle in the image’s lower-right corner. As you drag the handle, hold down the Shift key to maintain the image’s proportions. Resize the image so, in the Properties inspector, its width (W) is 370. 6 In the Properties inspector, click the Resample button once. Note that you must resize an image before the Resample button becomes active. 7 Make sure the image is selected. In the Properties inspector, click Align Center. Your screen should look similar to Figure 8.9. Save and close your file.

Figure 8.9 The photograph has been cropped, resized, resampled, and center aligned.

Adjusting Brightness, Contrast, and Pixel Definition In the following activity, you will use the Properties inspector to finetune and format an image. You can use the Brightness and Contrast button to increase and decrease the brightness and contrast of the selected image. and the Sharpen button to increase the sharpness, or pixel definition, of the selected image.

ACTIVITY 8C Modify a Graphic 1 In the Bike and Hike Web site, open the Scrapbook page in Design view. Select the photograph. On the Properties inspector, click the Brightness and Contrast button. 2 In the Brightness/Contrast dialog box, make sure the Preview box is checked. Under Brightness, key: -10. Under Contrast, key: 10. Your dialog box should look like Figure 8.10. Click OK.

Figure 8.10 You can key values into the dialog box, or move the slider to adjust an image’s brightness and contrast. 234

Chapter 8

3 In the Properties inspector, click the Sharpen button. In the Sharpen dialog box, key: 3. 4 Click OK. Your screen should look similar to Figure 8.11. Save the file.

Figure 8.11 The photograph with its brightness, contrast, and pixel definition adjusted.

Summarize What four buttons in the Properties inspector can you use to edit and format an image?

Section 8.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• You can use the Web to locate pre-made graphics, such as Clip Art.

1. Define dots per inch (dpi), image editing program, draw program, inline graphic, cropping, resizing, aspect ratio, resampling.

4. Compare and Contrast Discuss the difference between cropping a photo and resizing a photo.

• Always make certain you have permission to use a pre-made graphic before placing it on your Web page. • You can crop an image to remove areas that you do not want to use.

2. Describe how you can resize an image in Dreamweaver. 3. Explain the purpose of resampling an image.

5. Make Decisions You are designing a Web site for your community theater. Make a list of how you might use each of the following: a digital camera, a scanner, Clip Art, an image editing program.

Apply It! Create a Logo Select a small business in your community. Use a software application such as Microsoft Word or Adobe Photoshop to create a new logo for this business. If possible, use an image editing program to save the file for use on a Web page.

Using Web Graphics

235

Envisioning the Internet’s Future

W

hile Tim Berners-Lee is credited with creating the Web, no one entity is responsible for running it. The Web “runs itself” using standardized technologies, protocols, and rules. But who creates these standards?

What is the W3C? The World Wide Web Consortium (W3C) is a global organization started by Tim Berners-Lee to oversee the development of new technologies and standards that keep the Web functional and open to everyone. So far, the W3C has published more than 50 specifications for Web technologies, including Hypertext Markup Language (HTML), Cascading Style Sheets The World Wide Web Consortium strives to keep the Web vibrant (CSS), and Extensible Markup and open to everyone. Language (XML). Developers rely on these specifications to create Web-based or Web-enabled products that are fully compatible with one another.

Shaping the Web’s Future The W3C is also focusing on a number of emerging technologies that will change the way the Web works. ◆

The semantic Web will use deductive tools that give search agents artificial “reasoning” abilities, which will make it even easier for users to find information.

◆

The talking Web will allow people to navigate the Web using voice commands by enabling voice input and audio output.

◆

The multimodal Web will accept input from every type of source including keyboards, mice, voice, and even gestures such as eye movements.

1. Research Technology Research either the 2. Give Examples Find out how to become a member semantic, talking, or multimodal Web. How is that of the W3C. What would you have to do once you technology being developed, how will it be used on become a member? the Web, and what is its importance? 236

Chapter 8

SECTION 8.3 IMAGE MAPS AND WEB ALBUMS Focus on Reading Read to Find Out Graphics can be used to create links to external or internal Web pages. Read to find out how you can use Dreamweaver and other applications to add advanced graphic features to your Web site.

Main Ideas

Key Terms

Reading Strategy

Image maps let users click hotspots that link to related pages or information. A Web photo album is a collection of images. Thumbnails are small images that link to full-size versions of the same image.

image map hotspot photo album thumbnail

Identify the four steps involved in creating a hot spot. Use a flow chart like the one below (also available online).

➠

➠

➠

Not only can graphics help make Web pages more attractive and interesting, they can also perform various functions, such as linking to external and internal pages or allowing users to click a small version of an image to open a larger version of the same image. In this section, you will learn how to add these advanced features to a Web site.

Image Maps What is the relationship between an image map and a hotspot?

An image map is a graphic with clickable areas called hotspots. A hotspot provides a graphic link to related pages or other areas on the current page. For example, an image map of the United States might contain fifty hotspots, one for each state. If you clicked on Texas, you would be taken to a page containing additional information on that state. To create an image map in Dreamweaver, you draw outlines to define the clickable hotspots. Hotspots can be rectangular, circular, or polygonal, as described in Table 8.2.

Table 8.2 Dreamweaver contains three tools that you can use to create hotspots. Why do you need hotspots that are different shapes?

Hotspot Tools Properties Inspector Button

Name

Description

Rectangular Hotspot Tool

Drag the mouse pointer over the portion of the image that you want to be a rectangular hotspot.

Oval Hotspot Tool

Drag the mouse pointer over the portion of the image that you want to be a circular hotspot.

Polygon Hotspot Tool

Drag the mouse pointer around the edges of the shape you want and click the starting point for a polygon hotspot.

WebDesignDW.glencoe.com

Using Web Graphics

237

The Bike and Hike’s home page will contain an image map. When users click an image, they will be taken to different pages in the Web site. In the following activity, you will insert the graphic that will be used for the image map and assign hotspots to it.

ACTIVITY 8D Create an Image Map with Hotspots 1 In the Bike and Hike Web site, open the home page (index.html) in Design view. Position the insertion point at the end of the paragraph, and press Enter once. 2 On the Insert toolbar, click Image. Browse to the DataFiles\Ch08\ Images folder. Double-click the image_map.gif file. Save the file in the Web site’s images folder. Make sure the image is inserted correctly on the page (the word Register should be at the bottom of the image). Select the image and center it. 3 On the Properties inspector, in the Map box, key: home. This will assign a name to the image map.

Figure 8.12

4 In the Properties inspector, click the Polygon Hotspot Tool. Click in the upper-left corner of the image, and click around the Contact Us wedge. Be sure to cover as much of the logo as possible without overlapping any of the wedges for the other four pages (see Figure 8.12).

Use the Polygon Hotspot Tool to create a hotspot on the image.

5 In the Properties inspector, in the Link box, key: pages/contact.html. If you see the number symbol (#) in the Link box, be sure to delete this before you key the text. Note that the Link box only becomes active after the hotspot is created. In the Alt text box, key: Contact Us Page.

Area turns blue to indicate a hotspot is present

6 Repeat Steps 4 and 5 for the remaining logos. Use the link and alternate text information from Table 8.3.

Map box Polygon Hotspot Tool

Table 8.3

Hotspot Information

Use the information in the table to create four more hotspots.

238

Chapter 8

Logo

Link

Alternate Text

Donate

pages/donate.html

Donate Page

Register

pages/register.html

Register Page

Scrapbook

pages/scrapbook.html

Scrapbook Page

Sponsors

pages/sponsors.html

Sponsor Page

7 When complete, save your changes. Preview the page in a browser. When you click the Scrapbook hotspot, you should be sent to the Scrapbook page, as shown in Figure 8.13.

Figure 8.13 Use hotspots to create links between pages.

Activity 8.2 Explore Image Editing Programs Find out more about newer image editing applications and the advanced features they provide at WebDesignDW. glencoe.com. Click the Scrapbook hotspot and the Scrapbook page opens.

Explain What happens when you click a hotspot?

WebDesignDW.glencoe.com

Using Web Graphics

239

Troubleshooting To get more information about how this process works, press F1 to access Dreamweaver help. Key Create Web Photo Album or Fireworks into the Search For box in the Help task pane.

Creating a Web Photo Album Using Fireworks How can other software applications add advanced Web features?

A photo album (also referred to as a photo gallery) is a collection of photographs, typically with a brief description of each image. A combination of Dreamweaver and Fireworks makes it easy to create such a photo album. When you create a photo album, Dreamweaver creates a thumbnail of each image automatically. A thumbnail is a small image that links to a larger version of the same image. Thumbnails enable users to decide whether they want to view a larger version of the image (which typically takes extra time to download). In the following activity, you will create a photo album that showcases some of the scenery from last year’s Bike and Hike fundraiser.

ACTIVITY 8E Create a Web Photo Album Using Fireworks 1 In your Bike and Hike Web site, open the Scrapbook page in Design view. Choose Commands>Create Web Photo Album. In the Create Web Photo Album dialog box, in the Photo album title box, key: Bike and Hike Photos.

Figure 8.14 Use the Create Web Photo Album dialog box to specify the characteristics of your Web album.

2 To the right of the Source images folder box, click the Browse button. Browse to the DataFiles\Ch08\Images folder. Double-click the Photos folder, and click Select. 3 To the right of the Destination folder box, click the Browse button. Double-click the Bike and Hike Web site’s images folder, and click Select. 4 Click the Thumbnail size drop-down arrow and select 72 x 72. In the Columns box, key 3. Do not change the other options. Your dialog box should look similar to Figure 8.14. Click OK. 5 Macromedia Fireworks opens and processes the images. If you receive an error message, Fireworks may not be installed on your computer. Talk to your teacher if you receive an error message.

240

Chapter 8

6 When Fireworks completes the image processing, close Fireworks. A message saying Album created appears. Click OK. Your screen should look like Figure 8.15.

Figure 8.15 The index page of the album is displayed after Fireworks processes the photos.

7 In Dreamweaver, open the scrapbook.html page. Click the View Web Photo Album button. In the Properties inspector, to the right of the Link box, click the folder icon. In the Select File dialog box, double-click the images folder. In the folder, select the index.htm file and click OK. (Caution: Do NOT select the index.html page). 8 Open the index.htm file. Click on the first thumbnail, in the Properties inspector in the Alt box, key: Cactus Flowers. Add descriptive text to the Alt box for all of the other images. 9 Save your work. Preview the Scrapbook page in a browser by clicking the View Web Photo Album button. Your screen should look similar to Figure 8.16.

Figure 8.16 The Web Photo Album’s index as viewed in a browser.

Using Web Graphics

241

10 Each photo in this index is a thumbnail of a larger photo. Click the photo_landscape.jpg thumbnail to view the larger photo, as shown in Figure 8.17. Close the browser. Save and close all open documents in Dreamweaver.

Figure 8.17 Click the thumbnail to open the larger photo in the Web Photo Album.

In this chapter, you added graphics to the Bike and Hike Web site. These graphics enhanced your pages and provided different ways for users to view the site’s content. In the next chapter, you will further enhance the site by adding multimedia elements to its pages. Identify What is a thumbnail?

Section 8.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• You can use graphics to link to either external or internal Web pages.

1. Define image map, hotspot, photo album, thumbnail.

4. Evaluate Why might a Web designer decide to use an image map as opposed to a navigation button or a text link?

• An image map has areas called hotspots that, when clicked, take the user to another location. • When using Dreamweaver, you need to use other software applications such as Macromedia Fireworks to add certain advanced features to a Web page.

242

Chapter 8

2. Compare and Contrast How is a hotspot similar to and different from a thumbnail? 3. Identify What special software application do you need to create a photo album in Dreamweaver?

5. Describe two situations in which thumbnails would be particularly useful on a Web page.

Apply It! Create a Web Photo Album Obtain at least six digital images of family members or friends. Create a Web page that displays these pictures in a photo gallery. Include one interesting fact about each person pictured.

CHAPTER 8

Reading Review

SECTION 8.1 Web Graphic Types and File Formats Key Terms raster graphic, 224 vector graphic, 224 Graphic Interchange Format (GIF), 225 Joint Photographic Experts Group (JPEG), 225

Key Terms Bitmap (BMP), 225 Portable Network Graphics (PNG), 225 lossless compression, 226 lossy compression, 226

■ There are two basic types of graphics: raster and

■ ■ ■

image map, 237 hotspot, 237 photo album, 240 thumbnail, 240

Main Ideas ■ You can use graphics to link to either external or

Main Ideas ■

SECTION 8.3 Image Maps and Web Albums

vector. Raster graphics are more common on the Web than vector graphics. The GIF graphic file format works best for line art and simple drawings. The JPEG graphic file format works best for photographs. Compression schemes reduce an image’s download time but also diminish its quality.

■ ■ ■

■ ■

internal Web pages. An image map has areas called hotspots that, when clicked, take the user to another location. Hotspots can be rectangular, circular, or polygonal. When using Dreamweaver, you need to use other software applications such as Macromedia Fireworks to add certain advanced features to a Web page. A photo album consists of a collection of photos. A thumbnail is a smaller version of a larger image.

SECTION 8.2 Obtaining and Modifying Graphics Key Terms dots per inch (dpi), 229 image editing program, 229 draw program, 229 inline graphic, 230

cropping, 231 resizing, 231 aspect ratio, 231 resampling, 232

Main Ideas ■ You can use the Web to locate premade graphics,

such as Clip Art. ■ Always make certain you have permission to use a premade graphic before placing it on your Web page. ■ You can crop an image to remove areas that you do not want to use.

Using Web Graphics

243

CHAPTER 8

Review and Assessment

AFTER YOU READ Add to Your Knowledge Look over the Main Ideas listed in the Reading Review on page 243. Which main ideas did you know before you read the chapter? Which did you learn more about as you read? What did you learn that is not listed? Write down any topics that you want to know more about but were not covered in the chapter. Use these as follow-up questions for your teacher or a class discussion.

Reviewing Key Terms 1. What is the difference between a raster graphic and a vector graphic? 2. Which of the following is NOT a graphic file type: PAINT, GIF, JPEG, BMP? 3. What does the abbreviation “dpi” stand for? 4. Identify two input devices that you can use to create images for your Web pages. 5. Rewrite the following sentence to make it true: Image maps contain fonts that you click to go to related topics. 6. How do you resize a graphic in Dreamweaver?

Understanding Main Ideas 7. Explain how you can determine the format of a graphic file by looking at the file’s name. 8. List five ways you can obtain images to use on your Web pages. 9. Identify two programs used to create raster graphics and two programs used to create vector graphics. 10. Explain why it is important to maintain a picture’s aspect ratio when you are resizing it. 11. Summarize how resizing an image differs from resampling it. 12. Describe an advantage of an image map over text-based links.

244

Chapter 8

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

13. Compare and contrast resizing and cropping.

Resizing

Cropping

14. Summarize the similarities and differences of GIF, JPG, and PNG files. GIF

JPG

PNG

Critical Thinking 15. Evaluate Ethics A friend is creating a Web site to buy and sell trading cards. While making the site, she copies graphics from other Web sites and inserts them on her Web pages. What would you tell your friend to explain why her actions violate copyright laws? 16. Make Decisions You have been hired to create a Web site for a local business. The site will include photographs. Which compression scheme will you use to save the graphic files? Visitors to the site will use high speed Internet connections, so download time is not an issue. What kind of compression scheme will you use? Explain your answer. 17. Understand Graphic File Formats You have been asked to create an animation for the Bike and Hike Web site. This animation will be based on a cartoon drawing of a bicycle, which is in the JPEG format. What do you have to do to the file and why?

Review and Assessment

CHAPTER 8

18. Troubleshoot Graphics You are testing a site and realize that when you click a graphic link you see a rectangular framed outline but no picture. What is wrong with the link and what can you do to correct it? 19. Explain a Process Your uncle has sent you a photograph that he wants you to scan and then post to your family’s Reunion Web site. Use a graphic like the one below to outline the process for converting the photograph to a digital format. In the final step, identify the type of graphic file format you would use.

➠

➠

➠

20. Make Decisions You have created the Bike and Hike graphics in Macromedia Fireworks. Would you save the graphics in JPEG or GIF format? Explain your answer. 21. Analyze Graphics Summarize the relationship between a graphic’s quality, its file size, and its download time. Explain how this relationship might influence you when choosing graphics to include on a Web page.

Tables A comparison of the graphic file formats is shown below. Graphic File Formats Format

Advantages

Disadvantages

• • •

Small file size Quick download Good for simple graphics

• •

Not appropriate for saving photos Only supports 256 colors

JPEG

• •

Good for photos Supports millions of colors

• •

Large file size Slow download

BMP

•

Supports millions of colors

• •

Large file size Slow download

PNG

•

Supports more colors than GIF Quick download

•

Not supported by many browsers

GIF

•

According to the table, which of the following statements is true?  PNG files are similar to JPEG files because they support millions of colors.  The GIF format is a good choice for photos.  The BMP format supports millions of colors, so it is great for Web graphics.  For speed of file download, the PNG format is superior to the BMP format.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.

WebDesignDW.glencoe.com

22.

+

Result

Study with PowerTeach

23.

+ [Z]

Result

To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 8.

24.

Result

Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 8.

WebDesignDW.glencoe.com

Using Web Graphics

245

CHAPTER 8

Activities

1. MAKING CONNECTIONS Math—Compare Download Times Locate five graphics. At least one should be a GIF (e.g., Clip Art), and at least one should be a JPEG (e.g., digital photograph). Insert each graphic into a blank Dreamweaver page (one image per page). Create a line graph. Place each graphic’s type and file size (if known) on the x-axis and the download time of its page on the y-axis. Analyze your findings. Then, resave one of your JPEG files as a GIF file, and insert it into a new blank page. Compare the quality and download time of the GIF file to the original JPEG file. Finally, save one of your five graphic files as either a BMP or a PNG file. Compare the quality and download time of that file compared to the other four files. Analyze your findings. Use a pyramid table like the one to the right to report your findings for the slowest to the fastest (bottom to top) downloading file based on your research.

2. STANDARDS AT WORK Students practice responsible use of technology systems, information, and software. (NETS-S 2)

Copyrights and Permissions for Use A copyright is the exclusive legal right to reproduce, publish, and sell literary or artistic works. The creator of the work owns the copyright regardless of whether it is filed with the government. Visit two sites that contain Clip Art or other visual images. Locate the page that discusses the site’s terms of use or licensing agreements. Report the information you find using a table. Based on your findings, summarize how each site’s images may be used in the following types of media: 1. 2. 3. 4.

A report for one of your classes A Web site for a non-profit organization A brochure for a new business in your community A Web site for your school

List the projects that would need permission from the source. Describe how you would obtain permission to use the work. 246

Chapter 8

Fastest download time

Slowest download time

CHAPTER 8

Activities

3. TEAMWORK SKILLS Create Images and a Web Site As a team, select a topic for a Web site. For example, you could select a Web site that features highlights from a class trip or event, or a Photo Club Web site. After you have selected your topic, plan and design a site that has: ◆ A home page ◆ Two additional pages Use graphics acquired from at least two different sources to create a common look among the pages. Find or create images such as photographs, Clip Art, and drawings to enhance your site. Once all the images have been selected, add them to the site. Use all of the following tools in the Properties inspector as you create the pages for the site: ◆ resize

◆ contrast

◆ crop

◆ brightness

◆ resample

◆ sharpen

Have another team review the site and give you suggestions for improvements. As a team, evaluate these suggestions and make changes that will improve the site.

4. CHALLENGE YOURSELF Compare Graphic File Types Use a draw or image editing program to create a simple line drawing. Save the file in each of the formats available in the program. Name each file with the type of format being used. Create a table similar to the one below that compares the file types and sizes. If you are using word processing software, you may add a column to display the graphic files in the table.

FILE TYPE

FILE EXTENSION

SIZE

24-bit bitmap

.bmp

3,165 KB

JPEG

.jpeg

22 KB

Compare your results. Then, answer the following questions: 1. What quality difference can you see among the different files? 2. How do the download times for the various formats compare? 3. Do these results match your expectations? Explain why or why not. Using Web Graphics

247

CHAPTER 8

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Add Graphics to a Web Page  



 



Create a Web page for an event in your community. Select an event that will occur in your community in the next three months. Plan a Web page to announce the event. Gather the information you will need for the page’s content. Sketch a storyboard that shows where you will place text and graphics. The page should include a logo for the event and at least two other graphics. Plan your page’s color scheme. Locate or create graphics that will work on the page. Use Clip Art, graphics inserted from a digital camera or scanner, or graphics created in a draw or image editing program. Be sure the graphics work with your page’s color scheme. Use Dreamweaver to create your page. Add your text and modify fonts as needed. Insert the graphics into your Web page (use the Insert option to insert files created using different programs or devices). Add alternate text. Crop, resize, and modify the images as needed to suit your page. If possible, add a photo album to your page. Supply permission information as needed for all content. Save the file. View the page in a browser.

2. Use Hotspots Add hotspots to the community event page.  Assign a hotspot to the logo. Assume the hotspot will link to a page in your site where visitors can learn more about how to volunteer for the event.  Create hotspots for the two other graphics on the Web page. Link the graphics to other pages in the site (imagine it has more than one page), to other community Web sites, or to other appropriate sites. Create a table similar to the one shown below to record the graphic’s name, the page to which it links, and the link’s alternate text. GRAPHIC Logo Graphic #1 Graphic #2

 Proofread and save your work.

248

Chapter 8

LINK

ALTERNATE TEXT

CHAPTER 8

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Create a Virtual Field Trip Web Site Create a Web site that features virtual trips to the following events or eras: ◆ The American Civil War

◆ The Middle Ages in Europe

◆ The Ming Dynasty in China

◆ The French Revolution

◆ The building of the pyramids in Egypt

◆ World War II

Use the Internet to acquire a graphic for each of the virtual field trips listed above. Edit the images you select so that they are suitable for use on the Web. Create a site that has a home page and six additional pages (one for each trip). Place a title graphic at the top of the page and a navigation bar on the left side. Layout the home page as illustrated: Content area Navigation bar

Nested table with six equally sized cells. An image will be placed in each cell. Each image will link to a page in the Web site.

Use your graphics to create an image map on the home page. Each image should link to its corresponding trip page. Add title graphics with the page title (the name of the trip) to each page. Do not add content to the trip pages at this time.

2. Create an Art Styles Web Site You have been asked to create a Web site illustrating different artistic styles from the 19th and 20th centuries. The site will have a home page that links to a page for each of the following styles: Realism, Impressionism, Modernism, and Symbolism. Select one of the styles and find representative images on the Web or scan them from print sources. Obtain permissions for their use as needed. In Dreamweaver, create the home page and a page for each period. Add the navigation from the home page to each of the styles pages. Then build the style page that you have selected, placing the images that you have located. Manipulate the images as needed. Provide alternative text for each image. View the Web site in a browser.

Using Web Graphics

249

CHAPTER

9

Adding Multimedia to a Web Site

YOU WILL LEARN TO… Section 9.1 Identify multimedia design guidelines Identify sources of multimedia files Explain the ethical use of multimedia files Describe multimedia authoring tools Evaluate multimedia Web sites Section 9.2 Identify audio file formats Identify video file formats Insert audio files into a Web page Insert video files into a Web page Describe the equipment needed to create audio and video Section 9.3 Identify animation file formats Insert animation into a Web page

250

Chapter 9

WHY IT MATTERS ................................................. People absorb information through all their senses. Sounds and smells make us aware of what is happening in our environment in ways that words cannot. Many recreational activities, such as concerts and video games, use light, images, and sound to enhance the audience’s experience. Using sound, video, and animation in your Web site can help to both engage your visitors and to provide information in multiple ways. Think of a site with which you are familiar that uses components such as sound, animation, and video. Do you think you enjoy the site more because of these components? Do they make you want to stay longer? Write several sentences explaining your answers to these questions. Explain why you think these components may be important to a Web site.

CHAPTER

9

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 9.1 Define Ethical Use ...................... 256 9.2 Evaluate Multimedia Components ............................... 264 9.3 Evaluate Animations .................. 268 You Try It Activities 9A Insert Background Sounds ....... 9B Insert a Video Clip ..................... 9C Insert an Animation ................... 9D Create and Insert a Flash Button .........................................

267

Chapter Assessment Making Connections ......................... Standards at Work ............................ Teamwork Skills ................................ Challenge Yourself ............................

272 272 273 273

260 262 266

You Try It Skills Studio Add Sound to a Web Page ................. 274 Use Animation on a Web Page .......... 274 Web Design Projects Create a Web Design Class History ................................................ 275 Add Multimedia to the Virtual Field Trips Web Site .................................... 275

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Prepare with a Partner You might find it easier to work with a partner as you read through a chapter. Before you read, you and your partner can ask each other questions about the topics that will be discussed in the chapter. (Use the section headings or the “You Will Learn To” objectives to identify the topics.) What do you both think is important to know after reading the section? Write down the questions you both have about each section. Keep these questions in mind as you read.

WebDesignDW.glencoe.com

Adding Multimedia to a Web Site

251

SECTION 9.1 MULTIMEDIA AND WEB DESIGN Focus on Reading Read to Find Out The main purpose of this section is to explain how to use multimedia effectively and ethically. Read to find out more about the design guidelines for using audio, video, and animation.

Main Ideas

Key Terms

Reading Strategy

Multimedia elements should never distract visitors from your page’s main purpose. Always use multimedia files ethically and legally.

multimedia audio video animation streaming media codec multimedia authoring tool

Identify six multimedia design guidelines. Use a web diagram like the one below (also available online).

Multimedia Design Guidelines

Multimedia is the combined use of different media forms, such as text, graphics, audio, video, and animation. Since most people like to visit sites that contain multimedia, adding these elements is a good way to attract visitors.

Multimedia Design Guidelines Caution Some audio formats use compression to reduce file size and help the audio download more quickly. However, compression generally reduces a file’s quality.

Why is it important to consider file size when adding multimedia features to a Web site?

Multimedia only benefits a Web site when it helps meet the site’s goals and purpose. As you plan a site, consider each type of multimedia element and define how you can use it effectively to enhance the user’s experience.

Audio Guidelines Audio, which consists of live or recorded sound, can attract visitors’ interest and impart information. For example, a Web site for a movie could play that movie’s theme song. A travel site could include essential phrases for different countries. When using audio: ◆ Before you insert any audio file on a Web page, listen to it and make certain that the quality is acceptable. ◆ Make sure the audio supports your content. ◆ Try to limit the audio’s playing time. Audio that plays continuously can distract visitors and may cause them to move to another site. Instead, have the audio play for only a short time when the site first loads, or have visitors click a button to hear it.

252

Chapter 9

WebDesignDW.glencoe.com

Video Guidelines Video, which consists of live or recorded moving pictures, can inform, teach, and entertain. When including video: ◆ Remember that video files are large. Use them to enhance your site and not to convey your main message. ◆ Consider the type of connection your target audience will have. Videos that take too long to download can frustrate visitors. Well-designed multimedia sites allow visitors to specify the type of connection they are using and supply a lower-resolution presentation for those with slower connections.

Design Not all hosting services will allow you to use streamed data. It is a good idea to check with your service if you plan to stream media on your site.

Animation Guidelines Animation uses graphics or text to represent motion. When including animations: ◆ Use them to draw the visitor’s attention to important content. ◆ Limit the number of animations you use. Too many animations can distract visitors and make it difficult for them to read text or locate needed information.

File Size Guidelines

Figure 9.1 Streaming technology works by breaking a media file into pieces and then delivering them in order to the user’s computer. How can streaming technology make a site more userfriendly?

When using multimedia files, remember that the larger the file, the longer it will take to download. Streaming media, whether audio or video, reduces the user’s waiting time. To stream media, the Web server breaks the transmission Part 6 into pieces. The user’s media player starts playing the first piece of the file as soon as it Part 5 downloads. As the player receives Part 4 the remaining pieces, it stores them and plays them in order. Part 3 The result is a continuous stream of content, where each downPart 2 The server sends multimedia loaded piece plays as the rest of content in pieces to be the file arrives (see Figure 9.1). buffered by the client PC. Streaming requires the use of a codec (compression/ The first piece of streaming decompression scheme) to content is buffered, then first compress and then decomplayed as the next piece press the data. arrives.

Explain How does streaming media work?

Adding Multimedia to a Web Site

253

Downloading Multimedia Files How can I use multimedia files ethically?

It is easy to locate and download online multimedia files. However, you must be careful to always use downloaded files ethically.

Figure 9.2 The Dogpile® search engine lets you request audio files. What other kinds of files can you search for with Dogpile?

Locating Multimedia Files You can use search engines to locate online multimedia files. For example, the Dogpile® search engine lets you search for specific file types (see Figure 9.2). Many Web sites that contain Clip Art collections also offer short audio and animation files.

Select Audio to instruct the search engine to locate only audio files.

Using Multimedia Files Ethically Regardless of how you obtain multimedia files, you must have permission to use them. While many Clip Art collections allow you to use their files on personal sites, they may set limits on their use. If you download a file from the Web: Activity 9.1 Evaluate Multimedia Web Sites Find out more about evaluating multimedia Web sites by visiting WebDesignDW.glencoe.com.

◆ Read and follow any rules stated on that Web site about how to use the files legally. ◆ Give credit to a file’s author if you use someone else’s work on your Web site. Sites that allow you to download music files for personal use may not allow you to include these same files on a Web site without paying a fee. If the site has usage rules, read and follow them for downloading music. These same rules apply to downloading and using video files on your Web pages. Define What are usage rules?

254

Chapter 9

WebDesignDW.glencoe.com

Tools for Creating Multimedia Web Sites What is the most popular multimedia authoring tool?

Designers who create multimedia Web sites use special software packages called multimedia authoring tools. Multimedia authoring tools help you integrate media components, such as audio, video, animation, and images, into a seamless whole. The most widely used authoring tool is Macromedia® Director®. Authoring tools are expensive and require experience to use successfully. Numerous applications are available for acquiring and editing audio and video files. ◆ Audio Applications You can use applications such as GoldWave®, Sound Forge®, and Audacity to create and edit high-quality audio files. Microsoft® Windows contains an application called Sound Recorder that lets you create and save audio files. While Sound Recorder allows you to make some changes, it does not provide the sophisticated features of commercial audio applications.

You Should Know Some authoring tools have been developed for special purposes. For example, Macromedia® Authorware® is designed for creating multimedia training programs, such as interactive tutorials.

◆ Video Applications Many versions of Windows come with Windows Movie Maker, an application that allows you to perform some basic editing tasks with video clips. However, Windows Movie Maker does not allow you to perform sophisticated frame-by-frame editing and it supports only one format, Windows Media Video® (WMV). Adobe Premiere Pro provides full control over every frame within a video clip and supports a variety of formats. Identify What is the purpose of a multimedia authoring tool?

Evaluating Multimedia Web Sites Which criteria can you use to evaluate multimedia Web sites?

One of the most important rules to remember when using multimedia is to use it sparingly. Too much noise or movement will distract and annoy visitors. When you evaluate or plan a multimedia Web site, ask yourself the questions shown in Figure 9.3.

Figure 9.3

Multimedia Evaluation Checklist

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

Do the audio, video, and/or animations support each page’s goals? Are the pages cluttered? Do any media components distract visitors (for example, do they flash on and off)? Does the site give you the option to skip lengthy audio or video clips? Do components such as sound and video work properly? Do audio or video files take too long to download? Do the media components add to your enjoyment of the site?

A Web site that uses multimedia effectively should follow these guidelines. Why should you avoid using too many multimedia elements on a Web page?

Adding Multimedia to a Web Site

255

Figure 9.4 This site uses animation and sound to attract the visitor’s attention. How might sound be used effectively on a page such as this?

The Web page shown in Figure 9.4 follows good multimedia design principles. The page contains numerous items, yet it still provides considerable “white space” where the eye can rest. Animated buttons reveal new information when clicked and let users know when items have been selected. Visitors also have the option to turn the site’s audio on or off. List Name an effective use of audio, video, and animation.

Section 9.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Effective audio, video, and animation on a Web page can attract visitors’ attention and present useful information.

1. Define multimedia, audio, video, animation, streaming media, codec, multimedia authoring tool.

4. Analyze A friend’s page contains a flashing banner that makes it hard to read the page’s text, as well as a video with a long download time. How should your friend improve her site?

• You can obtain multimedia files from a variety of sources.

2. Identify guidelines for using audio, video, and animation effectively in a Web site.

• To use multimedia files ethically, always read and follow a Web site’s usage rules.

3. Summarize the features of a well-designed multimedia Web site.

• Multimedia authoring tools help you integrate media components, such as video, audio, and animation, into a seamless whole.

256

Chapter 9

5. Make Decisions Discuss how audio could be used to enhance an educational site about World War II.

Apply It! Define Ethical Use Visit two sites that have Clip Art, audio, and/or video clips. Print their license and usage pages. Review the printouts and write a summary of how files from these sites may be used on Web sites.

What Makes a Leader?

Y

our future plans may not involve managing the people and resources it takes to complete business projects. Yet, the leadership skills used by managers will help you on the job and off.

Qualities of a Leader Effective leaders share certain characteristics: ◆ Communication Good managers are diplomatic but straightforward when giving directions and making evaluations. ◆ Decision-Making Skills Managers often have to make unpopular choices. Decision-making is easier when you understand as much as possible about the project, its mission, and resources.

Effective leaders communicate well and understand the value of their co-workers.

◆ Trustworthiness Managing people means motivating and directing them. For this to happen, people must believe they can trust you. Good leaders deliver on promises, keep confidences, and are honest.

◆ Accountability A manager may have to justify decisions and explain failures. Good leaders accept responsibility and give credit to those who deserve it. ◆ Relationship Skills Good leaders learn as much as they can about the responsibilities of others. This knowledge increases their ability to give appropriate instructions and feedback to colleagues.

Building Leadership Skills You can do many things to build leadership qualities. Get involved in classroom or community projects and activities. Take business, communications, and management courses. These studies will give you insights into leadership. Many organizations can help you develop leadership skills. Consider joining the Business Professionals of America and Future Business Leaders of America.

1. Identify Skills Make a list of effective leadership qualities. Use the list to identify and assess your own leadership skills. Why are these skills valuable?

2. Research Leadership Form a team. Each team member will research a different leadership skill and be prepared to present their own research to the class. Adding Multimedia to a Web Site

257

SECTION 9.2 ADDING AUDIO AND VIDEO TO A SITE Focus on Reading Read to Find Out This section explains how to insert audio and video files into a Web site. As you read, make sure you understand the differences between each audio and video file format. Read to find out the advantages and disadvantages of each format.

Main Ideas

Key Terms

Reading Strategy

You can insert both audio and video into your Web pages. Audio and video files come in a variety of formats.

plug-in analog video recorder video capture card digital video recorder

Identify two ways to incorporate audio into a Web site. Use a tree diagram like the one below (also available online). Ways to Incorporate Audio Files

Many Web sites make extensive use of audio and video. Each audio or video segment used on a Web page is stored in a separate file.

Audio and Video Files Why is the sampling rate of an audio file important?

Table 9.1

Every file has a specific format that enables the Web browser to interpret and properly display or play the file’s content.

The file name extension identifies the audio file format. What type of file would you create using a digital piano?

Audio File Formats Table 9.1 lists the most common audio file formats. Not every OS or browser supports every format. Always test pages containing audio.

Common Audio File Formats Format

File Extension

Description

Wave®

.wav

Developed jointly by Microsoft® and IBM®. Mainly used for very short audio clips.

Midi

.mid

Used by synthesizers and electronic instruments.

RealAudio®

.ram, .ra

Developed by RealNetworks®, Inc.

AIFF

.aif, .aifc, .aiff

Developed specifically for the Macintosh®.

AU, SND

.au, .snd

Early formats that are no longer widely used.

MPEG Audio-Player 3

.mp3

Developed by the Moving Picture Experts Group. Can create very small, highly compressed audio files.

Shockwave® Flash Object

.swf

Developed by Macromedia®. Used to create cross-platform multimedia files. Users need the Macromedia Flash plug-in to hear .swf files.

258

Chapter 9

WebDesignDW.glencoe.com

Video File Formats You can insert video as well as audio files into your Web pages. Table 9.2 lists the video file formats commonly used on the Web. Again, not every OS or browser supports every format, so you should always test pages containing video. Many audio and video files also require a plug-in, which is an application that works with the Web browser to play a particular file format.

Table 9.2

Common Video File Formats Format

File Extension

Description

AVI (Audio Visual Interleaved)

.avi

Used with Windows Media Player®. Entire file must be downloaded before it can play.

MPEG (Moving Picture Experts Group)

.mpg

Compressed format that can be used for streaming.

QuickTime®

.mov, .qt

Developed by Apple® Computer, Inc., can be used for streaming video. Also known as MOV (Movie) format.

RAM RealVideo®

.ram, .ra

From RealNetworks®, Inc., can be used for streaming audio and video. Good for low-speed connections.

WMV (Windows Media® Video)

.wmv, .asf

Used with Windows Media® Player. Can be used for streaming audio and video.

Shockwave® Flash Object

.swf

Developed by Macromedia®. Used to create cross-platform multimedia files. Users need the Macromedia Flash plug-in to view .swf files.

Video files usually require a browser plug-in to play. Which format would you use if your target audience had low-speed connections?

Audio and Video File Quality Digital recording devices capture sound by sampling (recording fragments of) a sound wave. When played together, these fragments reproduce the entire sound. ◆ The sampling rate is the number of times per second a recording device samples sound waves. ◆ The higher the sampling rate, the better the audio clip’s sound quality. Each single image in a video clip is called a frame. Frames appear on the screen at a rate measured in frames per second (FPS). A slow frame rate can result in jerky video. Internet video generally varies from 10 to 30 FPS, but a rate of at least 15 FPS is recommended. A faster FPS results in better video quality, but it also means the video file will be larger and more difficult to download.

You Should Know Common plug-ins include Macromedia Shockwave, as well as RealNetwork’s RealOne Player, Apple QuickTime, and Microsoft Windows Media Player. You can download most plug-ins for free from the company’s Web site.

Define What is a plug-in?

Adding Multimedia to a Web Site

259

Creating and Adding Audio Files What equipment and software do you need to create a sound file? Caution When using an audio clip as a background sound, it is best to allow it to play for only a short period of time, such as a few seconds.

To play audio, your computer needs a sound card (or sound capabilities) and speakers. To record audio and save it in a file, you also need a microphone and an audio application. Once you store the sound file on your hard disk, you can use audio editing software to modify it. You can incorporate sound into your Web pages in two basic ways. 1. You can link an audio file to a button that a user can click in order to play the sound. This gives visitors control of the audio file. 2. You can set the sound file to play automatically when the page loads. The file can be set-up to play once or loop repeatedly. Remember that some browsers and operating systems may not play the sound file or play it correctly. If your site relies heavily on sound, you can insert a short note explaining the purpose of the sound for users who do not have a sound card or who have their volume turned down or off. In the following activity, you will insert a sound file into a Web site.

ACTIVITY 9A Insert Background Sounds 1 Start Dreamweaver. Open your Bike and Hike home page (index.html) in Design view. Position the insertion point after the image map graphic. 2 Select Insert>Media>Flash. In the Source File dialog box, click the Look in drop-down arrow. Browse to the DataFiles\Ch09\Multimedia folder. In the folder, select sound.swf and click OK. If necessary, in the warning box, click Yes. 3 In the Copy File As dialog box, click Create New Folder. Name the folder multimedia and click Open. Click Save. The sound file is embedded into the page in Flash format. 4 In the Properties inspector, uncheck the Loop box (see Figure 9.5). The sound file will now play only once.

Figure 9.5 The Properties inspector allows you to specify how many times the sound file plays.

File saved in multimedia folder Loop

5 Save your work. Preview the page in several browsers to determine whether the sound file plays correctly. Close your browser(s).

List Identify two ways you can incorporate sound into Web pages. 260

Chapter 9

Creating and Adding Video Files What tools do I need to create video files?

You need a video recorder to create your own video. There are two types of video recorders, analog and digital. ◆ When you create video with an analog video recorder (or with a VCR), the data must be translated into digital format before a computer can use it. A special circuit board called a video capture card can perform this conversion. ◆ A digital video recorder, such as the one shown in Figure 9.6, creates video that a computer can use directly. Digital video recorders include cables that connect the video recorder to the computer. You can then transfer the video to the computer’s hard disk, where it is saved in a file. Video editing software can be used to edit this file. The file is then ready to insert into a Web page. There are many reasons it can be challenging to include video on a Web site. ◆ Video clips can require significant download time.

Activity 9.2 Locate Clips Online Learn more about finding audio, video, and animation clips online at WebDesignDW.glencoe.com.

◆ Different file formats require different codecs to compress and decompress the file’s data. ◆ The Web browser must be able to understand both the file’s format and its codec. Because of these challenges, most Web designers do not insert clips directly into Web pages. Instead, they provide a link to the video clip. That way, visitors who have the necessary plug-in can decide whether or not they want to access the video and wait for it to download.

Figure 9.6 Video recorders can capture video and sound that you can transfer to a computer. How might video contribute to a Web site for a high school art class?

WebDesignDW.glencoe.com

Adding Multimedia to a Web Site

261

In the following activity, you will insert a video clip directly into the Bike and Hike site’s Scrapbook video page. Since visitors will need the Flash Player plug-in (or another plug-in capable of playing video in MPEG format) to view this clip, you will include a link to this plug-in in case they do not already have it installed on their computers.

ACTIVITY 9B Insert a Video Clip 1 In your Bike and Hike Web site, open the video.html page in Design view. In the Content area, double-click the word video. Press Delete. 2 Choose Insert>Media>Flash. In the Select File dialog box, browse to DataFiles\Ch09\Multimedia. Select the bike.swf file and click OK. If necessary, in the warning box, click Yes. Save the file in the Web site’s multimedia folder. 3 A gray box with a Flash plug-in icon appears. With the gray box still selected, in the Properties inspector, next to Loop, uncheck the check box. In the W box, change the number to 240. In the H box, change the number to 180. Your screen should look similar to Figure 9.7.

Figure 9.7 In Design view, the video is represented by a plug-in icon.

Plug-in icon You Should Know The plug-in icon will not display in the Web site when you preview or view the page.

4 Position the insertion point after the Flash plug-in icon and press Enter once. 5 Key the following text: To view this video, you may need to download the latest Macromedia Flash Player plug-in. Click here to go to the player. 262

Chapter 9

6 Select the words Click here. In the Properties inspector, in the Link text box, key the following URL: http://www.macromedia.com/go/ getflashplayer. Your screen should look similar to Figure 9.8.

Figure 9.8 Some of your users might need the Flash Player plug-in to view your video. Providing a link will help your users download the plug-in quickly.

7 Save your work. Preview the page in several browsers to determine whether the video file plays correctly (see Figure 9.9).

Figure 9.9 The video clip plays when you view the Scrapbook video page in a browser.

Adding Multimedia to a Web Site

263

8 With your teacher’s permission, click the Flash Player link in a browser (see Figure 9.10). The Macromedia Flash Player Download Center site should open in the browser window.

Figure 9.10 Test the link to the Flash Player plug-in to make sure that it works properly.

9 Click your browser’s Back button to return to your Bike and Hike Web site. 10 Close your browser(s). Save the file.

Explain What three factors make it difficult to include video on a Web page?

Section 9.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Audio and video files come in a variety of formats.

1. Define plug-in, analog video recorder, video capture card, digital video recorder.

• A file’s extension identifies its format.

2. Identify three audio file formats and three video file formats.

4. Analyze Multimedia You are creating a Web site that presents the history of your school. Discuss how the site might ethically use audio and video.

• You can incorporate sound into a Web page by linking the file to a button or setting it to play in the background.

3. Summarize the relationship between a video’s FPS, its quality, and its file size.

• To create video, you need a video recorder and hardware and software that lets you transfer the video from the recorder to the computer’s hard disk.

264

Chapter 9

5. Compare and Contrast How is a microphone different from a video recorder? How are they similar?

Apply It! Evaluate Multimedia Components Visit a site that advertises a movie you have seen in the last few months. Write an evaluation of the multimedia components of the site, using the checklist shown on page 255.

SECTION 9.3 ADDING ANIMATION TO A SITE Focus on Reading Read to Find Out The main purpose of this section is to explain how to add animation to Web pages. As you read, make sure you understand the difference between GIF and Flash animations. Read to find out what factors Web designers consider when choosing which animation to use.

Main Ideas

Key Terms

Reading Strategy

Animation provides the appearance of motion. One way of creating animations is to use a series of GIF images, which you can incorporate into a Web page in the same way as a graphic.

GIF animation Macromedia Flash

Compare and contrast GIF and Flash animations. Use a Venn diagram like the one below (also available online). GIF

Flash

Animation creates the appearance of motion. You can animate both graphics and text to add interest and interactivity to your pages.

Table 9.3

Animation Files What is the difference between GIF and Flash animation files?

There are two main types of animation files. GIF animation files are the simplest type of animation file. Macromedia Flash animations are more sophisticated and interactive than GIF animations. The two types of animation files are compared in Table 9.3.

The two main types of animation files are GIF animations and Flash animations. A GIF animation’s file contains what information?

GIF versus Flash Animation Files Characteristics

GIF

Flash

Description

Individual GIF images are displayed one after the other. All the images that make up the animation are stored in a single GIF file.

More sophisticated files that can include interactivity and download more quickly than GIF animations.

How Created

Can be created using graphic applications such as Macromedia Fireworks, Adobe ImageReady, and Microsoft PhotoDraw.

Must be created using Macromedia Flash or a similar application that supports this format.

How Inserted and Viewed

Inserted into page like GIF image. GIF file contains instructions that tell the browser the order in which the images should load, the position where each image should appear, and how long each image should appear on the screen.

Inserted into page like other files. To view Flash files, users must have the Flash plug-in, available free at the Macromedia Web site.

File Extension

.gif

.swf

Contrast Describe the differences between Flash and GIF animations. WebDesignDW.glencoe.com

Adding Multimedia to a Web Site

265

Incorporating Animation Files into a Site How do you use Dreamweaver to add animation to a Web page?

Dreamweaver provides a number of ways to incorporate animation into your Web pages. In the following activity, you will insert an animated GIF into the Bike and Hike Register page. You can insert and resize these animation files as you would a static GIF.

ACTIVITY 9C Insert an Animation 1 In the Bike and Hike Web site, open the Register page (register.html) in Design view. 2 Double-click the word Content. Press Delete. 3 On the Insert toolbar, click the Images button. Click the Look in dropdown arrow and browse to the DataFiles\Ch09\Multimedia folder. Select title_animate.gif and click OK. Save the file in the Web site’s multimedia folder. 4 On the Properties inspector, in the Alt text box, key: Register Today. 5 Save your work. Preview the page. The words Register Today should appear from behind the trees and move up to a stopped position (see Figure 9.11).

Figure 9.11 A GIF animation is inserted into a Web page in the same way as a static (nonanimated) GIF.

You Should Know Animation files created with Macromedia Flash can include interactivity. Flash is therefore a useful tool for creating tutorials and similar teaching materials.

6 Close your browser. Save your file.

Summarize How can you resize the dimensions of an animated GIF in Dreamweaver?

266

Chapter 9

Adding Flash Buttons How can Flash buttons make my pages more user-friendly?

Using Dreamweaver, you can create and insert animated Flash buttons for use in a Web site. A Flash button reacts to the mouse pointer, changing as the mouse pointer moves over or clicks it. Animated buttons can liven up a site and add a sense of interactivity to a page. They can also make a site more user-friendly because they let users know when a button has been used or clicked. In the following activity, you will create a Flash button that links to a Word document.

You Should Know If you want to include text in a non-standard font, you can use Flash Text. To access Flash Text, select Insert> Media>Flash Text.

ACTIVITY 9D Create and Insert a Flash Button 1 Browse to the DataFiles\Ch09\Text folder. Select and copy (press Ctrl + C) the registration.doc file. Browse to the location of your Bike and Hike root folder. In the folder, create a text folder. Paste (press Ctrl + V) the registration.doc file into the new text folder. 2 In the Bike and Hike Web site, open the Register page. Position the insertion point after the animated GIF file and press Enter once. 3 Select Insert>Media>Flash Button. In the Insert Flash Button dialog box, in the Style box, scroll down and select the Diamond Spinner style. 4 In the Button text box, key: Registration. Click the Browse button to the right of the Link text box. In the Select File dialog box, browse to the text folder in your Bike and Hike site. Select the registration.doc file. In the Relative to box, make sure Document is selected. Click OK. The Flash button will now link to this document.

Troubleshooting If an error message appears after you click OK, check the file pane to be sure that the text folder was saved properly. If the text folder does not appear, redo Step 1.

5 In the Save as box, delete button1.swf. Key: registration.swf. Your dialog box should look similar to Figure 9.12. Click OK.

Figure 9.12 Use the Insert Flash Button dialog box to create a Flash button in Dreamweaver.

Adding Multimedia to a Web Site

267

6 Save your file and preview it in a browser. When you position the mouse pointer over the Flash button, the diamond should spin (see Figure 9.13). Click the button to go to the registration.doc file. With your teacher’s permission, in the warning box click Open. Close the file. Close your browser. Save and close your Web site.

Figure 9.13 Your Flash button is animated when the mouse pointer is positioned over it.

Troubleshooting To edit a Flash button, select it and click the Edit button in the Properties inspector.

Describe What does a Flash button do when you place the insertion point over it?

Section 9.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• A GIF animation consists of individual GIF images, displayed on the screen one after the other.

1. Define GIF animation, Macromedia Flash.

4. Compare and Contrast Explain the differences between Flash and GIF animation.

• Macromedia Flash can create more sophisticated animations than GIFs. • Flash files often have faster download times than GIF animations. • You can use Dreamweaver to create and insert animated Flash buttons into a Web page.

268

Chapter 9

2. Identify the applications used to create GIF and Flash animation files. 3. Explain how animation differs from video.

5. Analyze Animation Television weather forecasters use radar to generate animated images of weather movement. What does this technique add to the viewer’s knowledge?

Apply It! Evaluate Animations Visit a Web portal and locate three examples of animations. What purpose does each animation serve? Why is your eye attracted to this animation? Explain how you would use each animation on a Web page.

CHAPTER 9

Reading Review

SECTION 9.1 Multimedia and Web Design Key Terms multimedia, 252 audio, 252 video, 253 animation, 253

streaming media, 253 codec, 253 multimedia authoring tool, 255

■ Effective audio, video, and animation on a Web page

■ ■

■

Key Terms GIF animation, 265

Macromedia Flash, 265

Main Ideas ■ The two main types of animation files are GIF

Main Ideas

■

SECTION 9.3 Adding Animation to a Site

can attract visitors’ attention and present useful information. You can obtain multimedia files from a variety of sources. To use multimedia files ethically, always read and follow a Web site’s usage rules. Multimedia authoring tools help you integrate media components, such as video, audio, and animation, into a seamless whole. To evaluate a multimedia site, determine whether the media elements support rather than distract from the site’s goals, work properly and play for an appropriate length of time, and add to the viewer’s enjoyment without creating clutter.

■ ■

■ ■ ■ ■

animations and Flash animations. A GIF animation consists of individual GIF images, displayed on the screen one after the other. All images that make up a GIF animation are stored in one file, along with instructions that tell the browser the order in which to load the images as well as where and how long to display them. Macromedia Flash can create more sophisticated animations than GIFs. Flash files often have faster download times than GIF animations. You can use Dreamweaver to incorporate animation into your Web pages. You can use Dreamweaver to create and insert animated Flash buttons into a Web page.

SECTION 9.2 Adding Audio and Video to a Site Key Terms plug-in, 259 analog video recorder, 261 video capture card, 261

digital video recorder, 261

Main Ideas ■ Audio and video come in a variety of formats. ■ A file’s extension identifies its format. ■ You can incorporate sound into a Web page by

linking the file to a button or by setting it to play in the background. ■ To create video, you need a video recorder and hardware and software that lets you transfer the video from the recorder to the computer’s hard disk. Adding Multimedia to a Web Site

269

CHAPTER 9

Review and Assessment

AFTER YOU READ Compare Notes with Your Partner After you read each section, team up with your partner again. Discuss the content of the section. See which of your questions were answered. Together, see if you can find out the answers to questions that may still be unclear.

Understanding Main Ideas 8. Summarize some of the ways in which you can make certain you are using audio, video, and animation files ethically. 9. Describe the purpose of a multimedia authoring tool, and give an example of one. 10. Identify some of the tools used to create audio and video files. 11. Explain the difference between an analog video recorder and a digital video recorder. 12. List the hardware needed to listen to audio. List the hardware needed to create audio. 13. Describe two ways that an audio file can be inserted into a Web page. 14. Discuss some reasons why animation is a common feature on the Web. 15. Explain how an animated GIF file is different from a static (nonanimated) GIF file. 270

Chapter 9

How to Use Multimedia Files Ethically

➠

1. Identify the different media forms that can be combined to produce multimedia. 2. What is animation? 3. How does a codec help to stream media? 4. Rewrite the following sentence to make it true: Using multimedia authoring tools can help reduce a file’s download time. 5. What is the purpose of a plug-in? 6. What is the purpose of a video capture card? 7. Rewrite the following sentence to make it true: A GIF animation is made up of individual JPG files.

16. Summarize two guidelines that will help you use multimedia files ethically.

➠

Reviewing Key Terms

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

17. Identify three problems that using audio or video clips on Web pages can create. For each problem, also identify a possible solution. (example) Need plug-in to play

➠ ➠ ➠

(example) Provide link to plug-in

Critical Thinking 18. Cause and Effect Some Web sites contain numerous animated advertisements. How might the animations affect your behavior? For example, would you be more likely to click on an animated advertisement than on a nonanimated one? Why? 19. Make Decisions You want to take video of your family’s summer vacation and place it on your personal Web site. Use a table like the one below to identify what hardware and software you will need to create and insert your video. Hardware/Software Needed

Why Needed

Review and Assessment

CHAPTER 9

20. Evaluate Animations You are creating a Web site for a local physical fitness center. The manager wants the site to have animated images of people lifting weights. Because she wants these images to be abstract, you cannot use video. Which application do you think would work best for creating these animations? Why? 21. Analyze Do you think the saying “If in doubt, leave it out” is appropriate when adding audio, video, and animation to Web pages? Give specific examples in your answer. Then, locate a Web site that you think contains too many multimedia items. Use a problem-solution chart similar to the one below to identify three of the site’s multimedia problems and propose how you think those problems could be solved. Multimedia Problem

➠

Proposed Solution

22. Synthesize Information Search the Web for sites that provide free audio, video, and animation files for downloading. Create a list of these Web sites. In general, how would you cite one of these files? How would you cite a file that was not free?

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.

23.

+

24.

+

Result

25.

+

Result

WebDesignDW.glencoe.com

+

Result

Reading & Writing Read the paragraph below and then answer the question.

When using multimedia, remember that the larger the file, the longer it will take to download. Streaming media, whether audio or video, reduces the download time. To stream media, the Web server breaks the transmission into pieces. The media player starts playing the first piece of the file as soon as it downloads. As the player receives the remaining pieces, it stores them and plays them in order. The result is a continuous stream of content, where each downloaded piece plays as the rest of the file arrives. According to the paragraph, which of the following statements is true?  You can use streaming media for audio files, but you should not use it for video.  When media is streamed, the media player downloads an entire file before playing that file.  Streaming media breaks up large files so they can be transmitted more quickly.  When using multimedia, the smaller the file, the longer it will take to download.

WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 9.

Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 9.

Adding Multimedia to a Web Site

271

CHAPTER 9

Activities

1. MAKING CONNECTIONS Language Arts—Summarize a Book or Story Select a book or story that you have read recently. After you have selected your book or story, make an audio file by following these steps: 1. Write a summary of the plot and make a list of the characters. 2. Read the summary aloud and record it. 3. Listen to the recording and re-record it until you are satisfied with the quality of the recording. Then, use Dreamweaver to create a Web page. The purpose of this Web page is to recommend your book or story to another reader. On your page, include: ◆ The book’s title ◆ An appropriate graphic or visual element(s) ◆ The list of characters in the book ◆ The sound recording of your summary With your teacher’s permission, team up with a partner and review each other’s sites. Use a table to list the multimedia elements used in the site. In your table, also identify whether the use of multimedia is effective or ineffective and explain your reasoning.

2. STANDARDS AT WORK Students are proficient in the use of technology. (NETS-S 1)

Use Technology Tools Assume you are planning a Web site about an upcoming event at your school. 1. Plan and sketch the pages for your site. 2. Identify the multimedia elements you would like to include on each page. 3. Make a list of the technology tools (scanner, digital camera, video recorder, voice/sound recorder, and so forth) available to you. Then, consider how you can use the technology tools available to you to create your Web site. On a separate piece of paper, create a three-column chart like the one shown below. List the Web site’s pages, the multimedia elements to be included on the page, and the technology tool you will use to create the multimedia element. Using your chart as a reference, create your multimedia elements and save them in one folder.

WEB PAGE

272

Chapter 9

MULTIMEDIA ELEMENT

TECHNOLOGY TOOL

CHAPTER 9

Activities

3. TEAMWORK SKILLS Create a Presidential Web Page You and your team need to create a Web page about a modern president. As a team, select one of the American presidents who served during the last half of the twentieth century. 1. Visit his presidential library online and explore the audiovisual resources available. 2. Identify resources that could be used in a Web page honoring the president. 3. Conduct other research as necessary to learn more about the president. Plan and create a Web page about the president. The page should include: ◆ A picture of the president ◆ Reference to at least one well-known statement he made ◆ Audiovisual resources that note important events in the president’s life or career Either download audio or video resources from the library or create links to the resources you want to use in your page. Get your teacher’s permission before downloading any files. Carefully review the site’s usage guidelines before downloading and using its materials and cite your sources on your page.

4. CHALLENGE YOURSELF Compare and Contrast Plug-ins Research Windows Media Player and QuickTime Player, two plug-ins for streaming audio and video elements. Your research should focus on answering the following questions: 1. 2. 3. 4. 5.

What video file formats will each plug-in read? Besides video, what other types of multimedia does the plug-in play? What is the current version of the plug-in? What company supplies the plug-in? What features does the supplier highlight?

Summarize your findings in a list. Based on your findings, create a Venn diagram like the one below to compare and contrast the two plug-ins.

Windows Media Player

QuickTime Player

Adding Multimedia to a Web Site

273

CHAPTER 9

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Add Sound to a Web Page  

 

Add sound or sound effects to the community event page you created in the Chapter 8 You Try It Skills Studio Activities (see page 248). Review the Web page you created in the Chapter 8 You Try It Skills Studio. Decide how you could add sound or sound effects to the page. Either create the sound or sound effect or search the Web for an appropriate sound. For example, you may choose to use a voice recording of people who attended last year’s event, or you may add a sound effect related to the event. Review all usage agreements and get your teacher’s permission before downloading any files. Using Dreamweaver, add the sound to the page. Save the file in a multimedia folder. Set the file so it only loops once when the page is opened. Save the page and preview it in a browser to make sure the sound is working properly.

2. Use Animation on a Web Page 

  



 

274

Build a Web page to display an animation. Locate an animation file. You can use an animation file from the student data files, or find animations online. Review all usage agreements and get your teacher’s permission before downloading any files. Create a new Web page in Dreamweaver. Insert the animation file and save it in a multimedia folder. Save the page. Preview the animation in a Web browser to see what movement occurs. Write one or two sentences describing the movement. Add this text in Dreamweaver and make any adjustments needed to display the text attractively. Proofread and save your work. View your completed page in a browser to make sure that it works properly. If possible, view the page in different browsers to see if it displays the same way in each browser.

Chapter 9

CHAPTER 9

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Create a Web Design Class History Plan and create a two-page Web site that presents an oral history of your class. ◆ The home page should display information about the class and at least one multimedia element. ◆ Title the second page “A Typical Day in Class.” Plan to include several multimedia components in your site. Consider the technology tools available to you. Then, if possible: ◆ Interview either your teacher about his or her goals for the class, or other class members about important things they have learned. Record your interviews as digital audio or video files. ◆ Edit your audio and video clips so that they are no more than 15 to 30 seconds long. Select an appropriate quality for the clips to minimize file size. Create the site in Dreamweaver. Create and insert multimedia elements as appropriate. If you have time, create a third page titled “Projects I Have Completed.” On this page, briefly describe your projects and include hyperlinks to your work. Preview your site in a browser.

2. Add Multimedia to the Virtual Field Trips Web Site In Chapter 8, Web Design Project #1, you created the home page and navigation structure for a Web site that lets visitors explore past events or eras (see page 249). ◆ Research one event or era listed in the site. ◆ Develop content based on your research. Your content should identify the event or era and summarize it in one or two paragraphs. ◆ If possible, add hyperlinks to additional information about the event or era. As you research the topic, consider how to build a multimedia element into the page. Create or obtain the multimedia and place it on the page. Cite your sources as needed. Save your work. Preview the site in a browser to make sure that it works properly.

Adding Multimedia to a Web Site

275

CHAPTER

10

Adding Interactivity to a Web Site

YOU WILL LEARN TO… Section 10.1 Define scripting Summarize interactivity design guidelines Identify scripting languages Compare common scripting languages Identify markup languages Section 10.2 Apply DHTML effects Create a banner ad Add update information Remove a page from a template Insert layers Section 10.3 Create a form Identify different field types Place fields and labels into forms Add a jump menu

WHY IT MATTERS ................................................. Interactivity is a basic component of the Web—users move from one page to another by sending messages to the browser. It is natural to expand on these capabilities to communicate in more sophisticated ways, such as playing online games, using interactive tutorials, and generating online maps. This chapter looks at some ways of creating interactivity. List five ways in which you have interacted with Web pages in the past week. Then write down how these interactions were useful to you. For example, did they save you time? Did they make the site more interesting or entertaining? Did they make you want to stay longer?

276

Chapter 10

CHAPTER

10

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 10.1 Identify Scripting ....................... 281 10.2 Apply Dynamic Effects ............... 291 10.3 Identify Form Fields ................... 298 You Try It Activities 10A Insert a Banner Ad .................... 10B Add Update Information............ 10C Remove a Page From a Template ..................................... 10D Insert Show-Hide Layers Behavior ..................................... 10E Create a Form with Fields ......... 10F Add a Jump Menu to a Web Page ............................................

284 285 286 288 293 297

You Try It Skills Studio Create a Drama Club Web Site ........... 304 Add an Order Form to a Web Site ...... 304 Web Design Projects Create a Sandwich Takeout Site ........ Create a Form to Collect Survey Data ...................................................... Create a Web Site for Voters .............. Create a Web Photo Album ................. Create an Educational Web Site ........

305 305 306 306 307

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................

302 302 303 303

Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Managing Time How much time should you take to read a chapter? The answer depends on many factors. The more difficult the material, the longer it will take to read the chapter. Illustrations can make material easier to understand, but they can also be distracting. Use the main ideas, chapter headings, and section assessment questions to focus your reading. Also, do your reading at a time and in a place where you can concentrate on the material without interruptions. This will increase your speed and comprehension of the material.

WebDesignDW.glencoe.com

Adding Interactivity to a Web Site

277

SECTION 10.1 SCRIPTING AND MARKUP LANGUAGES Focus on Reading Read to Find Out The main purpose of this section is to explain the uses of different scripting and markup languages. Read to find out how Web designers use these languages to make their Web pages interactive.

Main Ideas

Key Terms

Reading Strategy

Scripting languages make Web pages dynamic and interactive. Examples of scripting languages include JavaScript, Java applets, CGI, and DHTML. XML and XHTML are types of markup languages.

script interactivity JavaScript Java applet Common Gateway Interface (CGI) markup languages Extensible Markup Language (XML) Extensible Hypertext Markup Language (XHTML)

Identify four types of scripting languages and a use for each. Use a table like the one below (also available online). Types of Scripting

Use

Dreamweaver makes it easy to insert dynamic elements such as rollover buttons and image maps into Web sites. In this chapter, you will learn about the scripting needed to create interactive elements on Web pages.

Scripting and Interactivity Activity 10.1 Compare Scripting Languages Learn more about the purposes of different scripting languages at WebDesignDW.glencoe.com.

What is a script?

A script is a short program that you can insert into a Web page’s HTML code in order to make your pages dynamic. A Web page is dynamic when it: ◆ contains information that changes regularly. ◆ allows interactivity, meaning that the user can perform an action that the Web page responds to.

Using Interactivity in Web Sites Interactivity on a Web site makes communication a two-way process: you give your visitors information and your visitors send information back to you. This is one way in which the Web is different from books or newspapers. You can attract repeat traffic by ensuring that your site is timely and easy to find. You can solicit information from your visitors by asking them for feedback. Summarize When is a Web page dynamic?

278

Chapter 10

WebDesignDW.glencoe.com

Scripting Languages For which type of interactivity is Common Gateway Interface used?

Scripting languages can be used to create interactive elements, such as rollover buttons, banner displays, clocks, forms, and games, within Web pages (see Figure 10.1). Often, the script’s code can be inserted directly into a Web page’s HTML code. Some scripts or programs run on the user’s machine, and others run on a Web server. ◆ JavaScript is a scripting language that works as a part of an HTML document. As the Web page loads onto a user’s computer, the browser reads the JavaScript and completes the operation. Dreamweaver includes different snippets of JavaScript that you can insert into a page to make it dynamic and interactive. A number of sites offer free JavaScript code samples that you can copy and paste into your HTML documents. ◆ A Java applet is a small, cross-platform Java application that is designed to be executed within another application. Although it may appear with other elements on a Web page, it operates separately from the overall page. An applet would appear as a link within the HTML code for a Web page. Java applets are used by companies in a number of ways. For example, travel companies may use a Java date picker applet that allows users to select travel dates by clicking on a calendar. ◆ Common Gateway Interface (CGI) is a program that creates a link, or interface, between a user’s computer and the Web server. This link allows information to transfer back and forth in real-time between the two computers. CGI programs make it possible to search online databases and to fill out, submit, and process forms over the Internet.

Content Not all browsers fully support JavaScript. Internet Explorer, for example, supports only a subset of JavaScript. Think about your audience before you add scripts to a site.

Figure 10.1 In this game, the player must react quickly to onscreen images. How is this game interactive?

◆ Dynamic HTML (DHTML) is an extension of HTML. This scripting language combines HTML with Cascading Style Sheets (CSS) and JavaScript to create interactive Web sites. Remember, do not go overboard when adding interactive elements to a Web site. If every item on your page is moving, visitors will quickly become annoyed.

Summarize What types of interactivity can you create using scripting languages? Adding Interactivity to a Web Site

279

Markup Languages What is the difference between HTML and XML?

A markup language uses tags, or special sequences of characters, to tell a program how to interpret a text file. HTML, XML, and XHTML are three types of markup languages.

HTML versus XML Caution XML requires sophisticated programming. To use XML, the site must reside on a Web server that provides special services supporting this feature.

Figure 10.2 XML tags allow users to perform a targeted search of a site’s database. How is XML different from HTML?

HTML is a markup language that defines the appearance of data. The tags tell a browser how and where to display text and images on a Web page. For example, the code <STRONG>Shakespeare will display the name Shakespeare in bold letters. HTML cannot, however, tell you who or what Shakespeare is. Unlike HTML, Extensible Markup Language (XML) is a markup language that defines the meaning, and not the appearance, of Web elements. XML allows you to label or classify different Web elements according to what each item represents and how it relates to other items. This classification system allows information to become searchable based on whichever characteristics you define. For example, you could use XML to code the name Shakespeare as Shakespeare. A search for all items classified as would produce Shakespeare among the results. XML coding also allows users to search for information across multiple platforms. For example, if a site such as that shown in Figure 10.2 uses XML tags, then a user can access and search this site’s information using many different tools such as a Web browser, cell phone, or PDA.

XHTML The Extensible Hypertext Markup Language (XHTML) is designed to combine the different functions of HTML and XML. XHTML uses the same structure and tags as HTML, but it is designed to be far more versatile. As more XML tags are added to XHTML pages, search engines and browsers will be able to interpret a Web page’s content more precisely. This will, for example, allow a user to identify every bookstore within a certain radius that has a copy of Shakespeare’s play Hamlet currently in stock.

Identify What does XHTML stand for?

280

Chapter 10

Interactivity Design Guidelines How can interactivity enhance my Web site?

Using interactivity requires careful planning. Figure 10.3 shows some design guidelines to consider when using interactivity. In general, interactive elements should perform a function. For example, having a button change color when clicked tells the user that something is happening.

Figure 10.3

Interactivity Guidelines

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

Use interactivity only when it enhances the site. For example, having a button change color when clicked tells the user that something is happening. Keep it simple. Too much movement is distracting and may annoy users. Make sure that users understand the response expected of them. If the user needs to fill out and submit a form, clearly label each field. Check interactive components in all the browsers your visitors are likely to use. Supply alternative text that will appear if a particular component does not function properly.

Follow these guidelines when adding interactive elements to a Web page. Why do you want to avoid using too many interactive elements on your site?

It is easy to go overboard when adding interactivity to Web pages. Using restraint will help you create Web pages that people will enjoy visiting. List Name two design guidelines related to interactivity.

Section 10.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• You can use scripts to make your Web pages dynamic and interactive.

1. Define script, interactivity, JavaScript, Java applet, Common Gateway Interface (CGI), markup language, Extensible Markup Language (XML), and Extensible Hypertext Markup Language (XHTML).

3. Analyze Scripting Why was the development of CGI an important step in the development of interactive Web pages?

• Interactivity enables a Web site and a user to send information back and forth. • Limit the amount of interactivity you include on your Web site and keep it simple and easy to understand. • Scripting languages include JavaScript, Java applets, CGI, and DHTML. • Markup languages include HTML, XML, and XHTML.

2. Discuss how XML code is similar to HTML code. How is it different? Identify examples of how XML code is both similar to and different from HTML code.

4. Compare and Contrast How does interactivity make Web pages different from other sources of information, such as books, newspapers, and television shows?

Apply It! Identify Scripting View the source code of your favorite entertainment Web site. Identify one or two examples of scripting used in the site. Explain what function the scripting performs on the site.

Adding Interactivity to a Web Site

281

Accessibility on the Web

W

eb sites often include elements that can limit their usability for many people.

Designing for Different Needs When the Web first became popular, many developers did not consider the needs of differently-abled users. Yet these individuals make up an important part of the online community. People may not be able to access the information on a Web site for many reasons, including: ◆

physical disabilities or environments that make it difficult to see, hear, or understand graphic or audio elements.

◆

limited movement that restricts the use of input devices.

◆

poor language or technology skills.

◆

old technology and software or slow Internet connections.

Operating systems such as Windows provide tools that make computers more accessible.

Accessibility Guidelines Successful Web sites allow all visitors to get information quickly and easily. The World Wide Web Consortium (W3C) and Section 508 of the United States Rehabilitation Act provide accessibility guidelines to create accessible sites. Some guidelines include the following. ◆

Text Options Provide text versions of graphics or audio, including navigation buttons. For example, if a photo of chili can be clicked to display a recipe, then the text version might read “Recipe for making chili.”

◆

Cascading Style Sheets Pages designed with CSS allow users to easily change settings such as colors, text size, etc.

◆

Multiple Technologies Web sites should be accessible to individuals using any major browser, as well as older technologies.

1. Identify Find out what accessibility tools are 2. Research Guidelines Learn more about the available on your word processor, operating accessibility guidelines issued by the W3C or system, or authoring software. Make a chart listing Section 508 of the Rehabilitation Act. Create a at least five tools, the disabilities they address, checklist to make your site accessible to their functions, and how to activate them. everyone. 282

Chapter 10

SECTION 10.2 ADDING DYNAMIC EFFECTS Focus on Reading Read to Find Out This section explains how to add dynamic effects to your Web pages. Read to find out how Web designers use effects, such as banner ads, update information, and layers, to make their Web pages dynamic.

Main Ideas

Key Terms

Reading Strategy

Dreamweaver makes it easy to apply dynamic effects to your pages. Dynamic effects include banner ads, automatic date insertion, and layers. Using dynamic effects makes your Web site interesting.

rollover button banner ad layer

Identify the purpose of dynamic effects, such as banner ads, update information, and layers. Use a web diagram like the one below (also available online).

Dynamic Effects

Adding dynamic effects helps make Web pages interesting. Dreamweaver makes it easy to add dynamic effects such as banner ads and update information.

Banner Ads How do banner ads work?

As discussed in Chapter 6, a rollover button is a button that changes appearance in response to a user’s action. Dreamweaver uses DHTML to create rollover buttons. You can create a rollover effect by inserting interactive buttons on a site. The rollover behavior seen in a rollover button works on any type of image whether it is a JPEG, GIF, or PNG. When you create a rollover button, you can specify whether the image will change or “rollover” when: ◆ a user clicks the image. ◆ a user positions the mouse pointer over the image. Rollover buttons are often used to create banner ads. A banner ad is an advertisement that, when clicked, takes the visitor to the sponsor’s home page. Banner ads, which are usually rectangular, make it easy for interested consumers to go to the sponsor’s Web site. In the following You Try It activity, you will create a simple banner ad with a rollover effect for the Centuryville Bike Shop Web site. You will specify which image should appear initially on the screen, and which image should appear when the user positions their mouse over the banner ad.

WebDesignDW.glencoe.com

Adding Interactivity to a Web Site

283

ACTIVITY 10A Insert a Banner Ad 1 In your Bike and Hike Web site, open the Sponsors page (sponsors.html) in Design view. Position the insertion point to the right of the video store logo. Press Enter. 2 If necessary, change the Insert toolbar to Common view. Click the Images drop-down arrow and select Rollover Image. In the Insert Rollover Image dialog box, in the Image name box, key: bike_ad. 3 Click the Browse button next to the Original image box. Browse to the DataFiles\Ch10\Images folder. Select banner_01.gif and save it in the site’s images folder.

Troubleshooting For a review of how to insert rollover buttons, see You Try It activity 6F on page 178.

4 Click the Browse button next to the Rollover image box. Browse to the DataFiles\Ch10\Images folder. Select banner_02.gif and save it in the site’s images folder. 5 In the Alternate text box, key: Centuryville Bike Shop. 6 In the When clicked, Go to URL box, key the following: http://www.centuryvillebike.com/. Click OK. 7 Save your file. Preview the page in a browser. When you position the mouse pointer over the rollover banner ad, it should look like Figure 10.4. Test the link (note that this link does not connect to an active page). Close your browser and save your work.

Figure 10.4 When you position your mouse pointer over the banner ad, the text changes.

Identify What is a banner ad?

284

Chapter 10

Update Information Why do news sites usually display update information?

Many Web sites display the date when the site was last updated. News sites usually display the current date to let you know that the site’s content is up-to-date. Dreamweaver’s Insert Date feature provides two options. If you check the Update automatically on save check box, then your site’s date will change whenever you make and save changes to the site. If you do not check this box, then the date displayed will always be the date that you originally created the page.

ACTIVITY 10B Add Update Information 1 Open the Bike and Hike template (Bike_Main.dwt) in Design view. In the template’s footer, position the insertion point after the copyright text. Press Enter. 2 Choose Insert>Date. In the Insert Date dialog box, click the Day format drop-down arrow. Select Thursday,. 3 In the Date format list, make sure March 7, 1974 is selected. 4 Click the Time format drop-down arrow and select 10:18 PM. 5 Make sure the Update automatically on save check box is checked. Your dialog box should look like Figure 10.5. Click OK.

Figure 10.5 When you select Update automatically on save, the page displays the date when the page was last updated.

Figure 10.6 6 Save your file. Update all template files and close the Update Pages dialog box. Preview the page in a browser. It should look similar to Figure 10.6. Close your browser.

The update information appears in the page’s footer.

Explain How do you insert update information in Dreamweaver? Adding Interactivity to a Web Site

285

Using DHTML Behaviors Which Dreamweaver feature can you use to create custom effects? You Should Know Dreamweaver’s Behaviors panel contains several predefined behaviors. Go to the Macromedia Web site to browse for additional behaviors, commands, and components.

DHTML scripts help make Web pages dynamic. You can use the Behaviors panel in Dreamweaver to add predefined DHTML scripts to Web sites. To use many of the behaviors, you must first select a Web page object such as text, an image, or a plug-in. You can then use the Behaviors panel to apply a variety of effects to the selected object. For example, you can have a pop-up menu appear when an image is clicked, or allow users to activate a Flash movie by moving the mouse pointer over a word. Depending on what browser version(s) you are designing your site for, some items may be unavailable. Always consider your target audience when adding behaviors to a site.

Inserting Behaviors into a Web Site As you already know, templates can save you time in developing a multi-page Web site. Occasionally, however, you may need to create a unique page that does not rely on template information. Examples of this situation might be when you want to use DHTML effects on a page or when you have complex scripting on a page. The Donate page of the Bike and Hike Web site will use DHTML behaviors. You must remove the Donate page from the site’s template in order to use DHTML effectively and without errors.

ACTIVITY 10C Remove a Page From a Template Figure 10.7

1 In your Bike and Hike Web site, open the Donate.html file in Design view.

Add a title to the page.

2 In the Title box, key: Bike and Hike – Donate (see Figure 10.7).

286

Chapter 10

3 Choose Modify>Templates>Detach from Template (see Figure 10.8). The donate.html page is no longer defined by the template.

Figure 10.8 Select Detach from Template to remove a page from the Web site’s template.

Caution If you update navigation links, footer information, or other content in the Bike and Hike template, you will need to apply the changes to the Donate page separately as it is no longer controlled by the template.

4 Choose File>Save As. If necessary, in the warning box, click OK. In the Save As dialog box, click the Save in drop-down arrow and navigate to your Bike and Hike Web site’s root folder. Select and open the pages folder. 5 If the file name does not appear in the Save As dialog box, key donate.html into the File name box. Click Save. If necessary, in the warning box, click Yes. Your screen should look like Figure 10.9.

Figure 10.9 The Donate page is now a unique page that no longer relies on a template.

Adding Interactivity to a Web Site

287

Inserting Behaviors into a Web Site A layer is a container within an HTML page that can include objects such as text, images, and forms. Web designers often use layers instead of tables when they want to position objects precisely on a page. Like tables, layers allow you to stack or “layer” information on a page, but they are easier to update than static tables. There is no limit to how many layers you can include on a Web page. However, including a lot of layers can cause a page to download very slowly. It is best to avoid using too many layers on a single page. In the following activity, you will create two layers that appear and disappear as the user moves the mouse pointer over navigation buttons.

ACTIVITY 10D Insert Show-Hide Layers Behavior 1 With the Donate page open in Design view, click after the word Donations. Press Enter. Key: Select the buttons below to learn how to donate to the Centuryville Community Center. Format the text size 20px, Black, Unbold, Align Left. Deselect the text. Press Enter. 2 On the Insert toolbar, click Images and select Image. Browse to the DataFiles\Ch10\Images folder. Select the button_funds.gif file. Insert the file and save it in the site’s images folder. In the Alt text box, key: Funds. 3 Click to the right of the image. On the Insert toolbar, click Images. Browse to the DataFiles\Ch10\Images folder. Insert the button_resale.gif file and save it in the site’s images folder. In the Alt box, key: Resale. Press Enter. Your buttons should look like Figure 10.10. 4 Click to the right of the Resale button. Press Enter once. On the Insert toolbar, click the Common drop-down arrow and select Layout. Make sure Standard mode is selected. Click the Draw Layer button. Click and drag a layer box as shown in Figure 10.10.

Figure 10.10 Use the Draw Layer button to create a layer box.

Standard Mode

Layer box

288

Chapter 10

5 Click inside the layer and key the text shown in Figure 10.11. Resize the layer to fit the text in the box. Format the text Arial, 20px. 6 Click the layer’s top-left handle. The Properties inspector’s view changes (see Figure 10.11). In the L box, key: 272px. In the T box, key: 290px. Click the Vis drop-down arrow and select hidden. Under Layer ID, in the box, key: funds. Your screen should look similar to Figure 10.11. Click in an empty area of the Web page to deselect the layer (it will become invisible).

Troubleshooting In Step 6, be sure to key the px after the numeric values. The L moves the layer 272 pixels from the left of a browser window. The T value moves the layer 290 pixels from the top of a browser window.

Figure 10.11 First layer created on Donate page.

Visibility option

7 Click Draw Layer again to create a second layer that is roughly the same size as the first. Inside the layer, key the text shown in Figure 10.12. 8 Repeat Steps 5 and 6 except, under Layer ID, key: resale.

Figure 10.12 Second layer created on Donate page.

Adding Interactivity to a Web Site

289

9 Select the Funds graphic. In the Properties inspector, in the Link box, key the number sign (#). This creates a link around the graphic that does not have to link to a file or to a Web page. 10 Choose Window>Behaviors (or press Shift + F4) to open the Behaviors panel. In the panel, click the plus sign (+) drop-down arrow. Select Show-Hide Layers. 11 In the Show-Hide Layers dialog box, in the Named layers box, select layer “funds” and click Show. Select layer “resale” and click Hide. Your dialog box should look like Figure 10.13. Click OK.

Figure 10.13 Use the dialog box to select how layers will display when viewed in a browser.

12 In the Behaviors panel, click the plus sign (+). Select Show-Hide Layers. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Hide. Click OK. 13 In the Behaviors panel, in the first line, click directly on the word onLoad. Click the drop-down arrow that appears and select onMouseOver (see Figure 10.14). In the second line, click directly on the word onLoad and select onMouseOut.

Figure 10.14 Click directly on the text onLoad to make the dropdown arrow appear.

Troubleshooting In Step 13, you can resize the menu by selecting the divider line and dragging it to the right.

14 Select the Resale graphic. In the Properties inspector, in the Link box, key the number sign (#). 15 In the Behaviors panel, click the plus sign (+) drop-down arrow. Select Show-Hide Layers. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Show. Click OK. Select Show-Hide Layers again. In the dialog box, select layer “funds” and click Hide. Select layer “resale” and click Hide. Click OK. 16 In the Behaviors panel, in the first line, click directly on the word onLoad. Click the drop-down arrow that appears and select onMouseOver. In the second line, click directly on the word onLoad and select onMouseOut.

290

Chapter 10

17 Save your file. Preview the page in a browser. When you position the mouse pointer over the Funds button, the Funds layer appears (see Figure 10.15). When you position the mouse pointer over the Resale button, the Resale layer appears. The layers disappear as soon as you move the pointer off the buttons. Close your browser and save your work.

Figure 10.15 When you position the mouse pointer over one of the buttons, the layer it is linked to appears.

When designing your own Web sites, carefully evaluate the effects you add to a page. Remember that adding too many effects will only distract, and potentially annoy, your visitors.

You Should Know To review the layers you have created, select Window>Layers or press F2 to open the Layers panel. You can select a layer to view it on screen, or delete layers that you no longer need.

Explain Why is it important not to include too many layers on a Web page?

Section 10.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• You can use Dreamweaver to insert dynamic effects into your Web pages.

1. Define rollover button, banner ad, layer.

4. Analyze Your Web design business specializes in banner ads. How might you convince clients to invest in a banner ad rather than a static ad?

• Clicking a banner ad takes you to the sponsor’s Web site. • Update information lets visitors know when you last made changes to your site. • You may need to remove a page from a template to add dynamic effects. • You can use the Behaviors panel to add DHTML scripts to a Web site.

2. Explain how to use the Behaviors panel to apply effects to page components. 3. List three types of dynamic effects and how they are used to make Web pages interesting.

5. Draw Conclusions Why is update information important when you are evaluating a Web site’s reliability?

Apply It! Apply Dynamic Effects Use the Behaviors panel to apply various effects to text on a Web page. Identify how different effects change the text. Evaluate why you would or would not want to apply these effects to a Web page.

Adding Interactivity to a Web Site

291

SECTION 10.3 ADDING A FORM TO A WEB SITE Focus on Reading Read to Find Out The main purpose of this section is to explain how to add a form, which is a Web page that collects data from a site’s users. As you read, make sure you understand the components of a well-designed form.

Main Ideas

Key Terms

Reading Strategy

Forms make Web sites interactive by letting users submit data. Users enter each data item in a field identified by a label. Different types of fields fulfill different purposes.

form field label jump menu

Identify five common field types found on forms. Use a table like the one below (also available online). Field Type

Description

Web sites often need to obtain data from visitors. Whenever you order an item online, for example, you must enter information such as the item’s number, the shipping address, and payment information. Web programmers and designers create forms to allow users to enter and submit this information. Activity 10.2 Create WellDesigned Forms Learn more about designing forms at WebDesignDW.glencoe.com.

Forms and Their Components Which buttons do most forms include?

A form is a structure for collecting data from visitors. Every form contains two main components: fields and labels. ◆ A field allows a user to enter information into the form. ◆ A label is used to identify each field. The label tells the user what information (name, address, etc.) should be entered into a field.

Form Fields What is the difference between a text box and a text area?

A form can contain different types of fields. Each field type has a specific purpose. For example: ◆ A text box lets users enter a relatively small amount of text (such as an address) into a form. ◆ A text area allows users to enter larger amounts of text, such as comments and suggestions. ◆ Limited-option fields, such as radio buttons, check boxes, and drop-down lists, allow users to select predefined choices.

292

Chapter 10

WebDesignDW.glencoe.com

Table 10.1

Common Form Fields Field Type

Button

Each type of form field has a specific purpose. How would you use a radio button on a form?

Description

Text Field

Allows user to enter a line of text.

Text Area

Allows user to enter many lines of text, such as comments or suggestions. Also called a scroll box.

Radio Button

Allows user to select only one option from multiple options, such as Yes/No/Maybe, True/False, or Male/Female. Also called an option button.

Check Box

Allows user to select one or more options from a list.

List/Menu

Allows user to select from a list of choices. Also called a drop-down list or menu. A user can select one, some, none, or all of the items in the list.

Submit/Reset Buttons

Allows user to submit a completed form and to erase the form’s content.

Using limited-option fields helps prevent users from entering invalid data. Including predefined choices also allows the form creator to specify exactly what type of information he or she wants from users. Most forms also contain a Submit and a Reset button. After filling out the fields, visitors click the Submit button to submit the form’s contents. They use the Reset button to erase the form’s content. Table 10.1 shows commonly used form fields and the Dreamweaver button used to create each field.

Creating a Form Using Dreamweaver In the next activity, you will create a form that lets users send contact information to the organizers of the Bike and Hike Web site. This form will include text fields, a pull-down menu, and a check box.

ACTIVITY 10E Create a Form with Fields 1 In your Bike and Hike Web site, open the Contact Us page (contact.html) in Design view. 2 Click after the word Center. Press Enter. On the Insert toolbar, click the Layout drop-down arrow and select Forms to change the toolbar to Forms view. Click the Form button to declare a form area on the Web page. 3 Click in the form area and select Insert>Table (Ctrl + Alt + T). In the Table dialog box, create a table with 7 rows and 2 columns. If necessary, set the Table width to 760 pixels. Click OK. Adding Interactivity to a Web Site

293

Figure 10.16 Resize the table so the first column is 150px wide and the second column is approximately 339px wide.

Click to resize table columns

4 In the Properties inspector, set the height (H) to 250px. In the table, click the column divider (see Figure 10.16). Drag the divider to the left until the first column is 150px wide. If necessary, set the alignment in the first column to Left. 5 Click in the table’s first cell. Key the label: First Name:. Press Tab. On the Forms toolbar, click the Text Field button. If necessary, switch the Insert toolbar to Forms view. 6 Make sure the white text box that appears in the right cell is selected. In the Properties inspector, in the text box below TextField, key the title: first_name. In the Char width text box, enter a value of 40. 7 Click in the cell under the label you just keyed. Repeat Steps 4 and 5 to create five more fields. Use the information shown in Table 10.2.

Table 10.2 Enter the labels in the table’s left column and enter titles in the Properties inspector. Note that all field labels end with a colon.

Field Labels, Titles, and Character Widths Label

Title

Character Width

Last Name:

last_name

40

Address:

address

40

City:

city

40

State:

state

2

ZIP Code:

zip_code

10

E-mail Address:

e_mail

40

8 When you are finished, your screen should look like Figure 10.17 on page 295. 294

Chapter 10

Figure 10.17 The table with all of the form’s text fields entered.

9 Click in the cell below the E-mail Address: label, key: Age:. Press Tab. 10 On the Forms toolbar, click the List/Menu button. In the Properties inspector, under List/Menu, delete select and key: age. Click the List Values button located in the right-hand side of the Properties inspector. 11 In the List Values dialog box, in the field under Item Label, key: Under 12. Leave the value empty. Click the plus sign (+) to add another value. 12 Repeat Step 10 for the following choices: 12 to 17 and Over 17. Your dialog box should look like Figure 10.18. Click OK. Deselect the Age box.

Figure 10.18 You can use the List Values dialog box to enter the options you want to appear in the text box.

13 Outside the table, click under the Age label. On the Forms toolbar, click the Checkbox button. If necessary, click Yes in the warning box. Position the insertion point after the check box. Press the spacebar. Key: Send me more information about the Bike and Hike fundraiser. Select the check box. In the Properties inspector, under Checkbox name, key: more_info. Adding Interactivity to a Web Site

295

14 Position the insertion point at the end of the checkbox line. Press Enter. On the Forms toolbar, click Button to insert a Submit button. 15 Click Button again. In the Properties inspector, next to Action, select Reset form to create a Reset button. 16 Deselect the buttons and click next to the Reset button. In the Properties inspector, click Align Center to center the buttons (see Figure 10.19).  Save your file. Preview your page in a browser. Practice entering data into the form as shown in Figure 10.19.  Click Submit. In some browsers, an error message may appear when you click Submit. The Web site must be published and other actions taken before the form can be processed. Click Reset to remove any data that you have entered into the form. Close your browser. Save the page.

Figure 10.19 The finished form as viewed in a Web browser.

You have now created a simple form. However, this form does not do anything with the data that the user enters. To function, a form must be published on a Web server that has the capabilities needed to manage the resulting data. In a case such as the Bike and Hike Web site, the form would generate only a small amount of data that would simply be e-mailed to the individual in charge of handling site communications. In cases where forms generate large amounts of data, the server would typically insert the data into databases to be stored and manipulated as necessary. You will learn more about forms in the next unit. Describe What does a well-designed form include?

296

Chapter 10

Adding Dynamic Effects to a Form How can adding a jump menu make a form more dynamic?

Dynamic effects can also be applied to forms to make entering and working with data easier. For example, some forms are smart enough to recognize when a user enters an invalidly formatted e-mail address. Other effects can automatically change or update entered data so it supports or reflects any new data entered by a user. In the following activity, you will create a jump menu. A jump menu is a dynamic menu that allows users to access hyperlinks from a single drop-down menu.

ACTIVITY 10F Add a Jump Menu to a Web Page 1 In your Bike and Hike Web site, open the Sponsors page (sponsors.html) in Design view. 2 Position the insertion point to the right of the text Use the menu below to visit our sponsors. Press Shift + Enter. 3 If necessary, change the Insert toolbar to Forms view. On the toolbar, click the Jump Menu button. 4 In the Insert Jump Menu dialog box, in the Text box, key: Centuryville Bike Shop. 5 In the When selected, go to URL box, key: http://www.centuryvillebike.com. Your dialog box should look like Figure 10.20. Press the Add item button (button with the plus sign) to create a new menu item.

Figure 10.20 The Centuryville Bike Shop will be the first item in the jump menu.

Add item

6 Repeat Steps 4 and 5 using the text and link information shown in Table 10.3.

Table 10.3

Jump Menu Links

Enter the information in the table into the Insert Jump Menu dialog box.

Text

URL

New Wave Music

http://www.newwavemusicsite.com

1st Video Store

http://www.1stvideostore.com

Standard Auto Repair

http://www.standardautorepair.com

Adding Interactivity to a Web Site

297

7 When finished entering the text and links, click OK. Save the file. Preview the page in a browser. 8 Click the jump menu’s drop-down arrow. Your screen should look similar to Figure 10.21. When you select an item from the jump menu, the browser will take you to the URL. Because the jump menu’s URLs are not real, you will get an error message. Ask your teacher for permission to enter real URLs. Close your browser. Save and close your Web site. Exit Dreamweaver.

Figure 10.21 In your jump menu, each button is linked to the sponsor’s Web site.

In this unit, you learned how to work with graphics and multimedia elements, and how to add interactivity to your Web pages. All of these items help make Web sites more enjoyable and interesting. When adding these items to your pages, always follow good design guidelines. Remember that a busy page that is filled with images and motion may overwhelm visitors and cause them to surf elsewhere. List What are examples of limited-option fields?

Section 10.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Use forms to let visitors submit information.

1. Define form, field, label, jump menu.

• Forms consist of fields for entering specific pieces of information.

2. Explain why it is important to clearly label each field in a form.

4. Analyze Fields Could you use a drop-down list to allow users to enter their last names? Explain your answer.

• Labels tell users what information to enter into each field.

3. Summarize how a radio button is different from and similar to a check box.

• Different field types are used to request different types of information. • A jump menu allows users to access multiple links from a single menu.

298

Chapter 10

5. Make Decisions What kind of form would be needed to register for classes online? List possible names and field types for five fields on this form.

Apply It! Identify Form Fields Select five fields on a printed form that you have used. If you were to create this form for a Web site, identify the type of field you would use for each field you selected.

CHAPTER 10

Reading Review

SECTION 10.1 Scripting and Markup Languages Key Terms script, 278 interactivity, 278 JavaScript, 279 Java applet, 279 Common Gateway Interface (CGI), 279 markup language, 280 Extensible Markup Language (XML), 280 Extensible Hypertext Markup Language (XHTML), 280

SECTION 10.2 Adding Dynamic Effects Key Terms rollover button, 283 banner ad, 283

Main Ideas ■ You can use Dreamweaver to insert dynamic effects

■ ■

Main Ideas

■

■ You can use scripts to make your Web pages ■ ■

■ ■

dynamic and interactive. Interactivity enables a Web site and a user to send information back and forth. Limit the amount of interactivity you include on your Web site and keep it simple and easy to understand. Scripting languages include JavaScript, Java applets, CGI, and DHTML. Markup languages include HTML, XML, and XHTML.

layer, 288

■ ■ ■

such as rollover buttons and update information into your Web pages. Clicking a banner ad takes you to the sponsor’s Web site. Rollover buttons are often used to create banner ads. Update information lets visitors know when you last made changes to your site. You may need to remove, or break, a page from a template to add dynamic effects. You can use the Behaviors panel to add DHTML scripts to a Web site. Layers are containers in an HTML page that can contain objects such as text, images, and forms.

SECTION 10.3 Adding a Form to a Web Site Key Terms form, 292 field, 292

label, 292 jump menu, 297

Main Ideas ■ Use forms to let visitors submit information. ■ Forms consist of fields for entering specific pieces ■ ■ ■ ■

of information. Labels tell users what information to enter into each field. Different field types are used to request different types of information. Always make certain to clearly label each field. A jump menu allows users to access multiple links from a single menu. Adding Interactivity to a Web Site

299

CHAPTER 10

Review and Assessment

AFTER YOU READ Reading Without Distractions When you look through this chapter, you will see illustrations, tables, features, and questions. Determine which are most important to the content you are reading. Which can wait until later? Share your list with your classmates. Are their listed items the same as yours? Come up with a reading strategy. Determine the elements that need to be included the first time you read through a chapter.

Reviewing Key Terms 1. Give three examples of interactive Web sites that you have visited. What makes each site interactive? 2. Why is scripting widely used on Web pages? 3. List three scripting languages. 4. List three markup languages. 5. CGI stands for which one of the following: Common Gateway Internet, Common Gateway Interface, or Common Graphic Interface? 6. Change the following sentence to make it true: A banner ad keeps track of the number of visitors to a site. 7. What is the purpose of a form? 8. How are form fields and labels related to one another?

Understanding Main Ideas 9. Summarize interactivity design guidelines. 10. List three types of tasks that can be performed with JavaScript. 11. Describe some advantages that DHTML has over HTML. 12. Identify a situation in which a visitor might want to know when a site was last updated. 13. Explain how adding a form can make a Web site interactive. 300

Chapter 10

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

14. Summarize the advantages and disadvantages of using layers in a Web page. Using Layers

Advantages

Disadvantages

15. List the different types of fields that you used on the Bike and Hike registration form. Identify why each field type was appropriate. Field Type

Why Appropriate

1.

1.

2.

2.

Critical Thinking 16. Evaluate why it is important to provide clearly written labels for your fields. Explain your answer. 17. Analyze You often visit a Web site that sells books. Each time you visit, the site displays a list of books in which you might be interested. The site personalizes this list to your reading habits. Briefly discuss how a site might use scripting languages to generate this list. 18. Make Predictions Do you think the use of interactive Web sites in education will increase or decrease over the next decade? Explain your answer. 19. Compare and Contrast In a previous chapter, you inserted business logos into the Sponsors Web page. In this chapter, you inserted a banner ad. What advantages does this banner ad have over the business logos? Can you think of a disadvantage?

Review and Assessment

CHAPTER 10

20. Analyze Field Types What are two advantages to using limited option fields? Can you think of a disadvantage? 21. Evaluate Why are scripting languages necessary tools for developing dynamic Web pages? How have scripting languages influenced the evolution of the Internet and the way people use Web sites? 22. Evaluate Interactivity Design Imagine you are planning a Web site that will feature your Web design portfolio. Identify the types of interactivity you would include on your site. Using a cause-effect chart like the one below, explain what function each interactive element would perform on your site. Then, with your teacher’s permission, trade plans with a partner and use the Interactivity Design Guidelines shown on page 281 to evaluate each other’s plan.

➠ ➠ ➠

Interactive Element

Function

+

25.

WebDesignDW.glencoe.com

Many different scripting languages can be used with Web pages. Each language is designed for specific types of interactivity. Here is a sample survey in which 676 programmers reported the scripting languages they use most often. Popularity of Scripting Languages Ruby TCL Rexx Python Perl PHP 0%

10%

20%

30%

40%

50%

According to the chart, which of the following statements is true?  PHP is twice as popular as Python.  Perl is three times as popular as TCL.  The three most popular languages are PHP, Perl, and Ruby.

On your own paper, copy and complete the chart shown below.

24.

Read the paragraph and chart below and then answer the question.

 Ruby is half as popular as PHP.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.

23. When in a table, press

Charts & Graphs

WebDesignDW.glencoe.com Study with PowerTeach

Result

Go to the book Web site shown above. To review the main points in this chapter select e-Review>PowerTeach Outlines>Chapter 10.

Result

Online Self Check

Result

Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 10.

Adding Interactivity to a Web Site

301

CHAPTER 10

Activities

1. MAKING CONNECTIONS Social Studies—Analyze Your Environment Elements such as banner ads and jump menus are designed to catch a viewer’s attention. Over the course of one day, note the items in your environment that catch your attention. These may include: ◆ Billboards

◆ Television commercials

◆ Print ads

◆ Non-commercial items

Make a list of at least three items that you have noticed. Then, analyze why these items caught your attention. Next, create a table like the one below. In the first column, list the items that caught your attention. In the second column, identify a similar object that you could insert into a Web site. In the third column, summarize how including this element in your site would make your site more appealing to visitors.

ATTENTION-GETTING ITEM

WEB SITE EQUIVALENT

EVALUATION

2. STANDARDS AT WORK Students employ technology in the development of strategies for solving problems in the real world. (NETS-S 6)

Plan Interactivity You have a friend who owns a clothing store. The store has a Web site that receives about 3,000 hits each month. Your friend is planning a large sales event for next month and would like to use the Web to advertise the event. You recommend adding interactivity to the site. Your friend asks what that means. Make specific recommendations about what interactive elements you would add to your friend’s Web site to advertise the upcoming sale. Assume your friend likes your ideas for interactivity, but would like to see a sample before making a final decision. In Dreamweaver: ◆ Create a banner ad that advertises the sale. With your teacher’s permission, go online to locate images, use tools to create images, or use images from data files if appropriate. ◆ Display the banner ad in a browser. 302

Chapter 10

CHAPTER 10

Activities

3. TEAMWORK SKILLS Add Interactive Elements to a Web Site As a team, review the presidential Web site you created in Chapter 9 (see page 273). Look for opportunities to add interactivity. Select two types of interactive elements to add to the site. These elements may include: ◆ Rollover buttons ◆ Update information ◆ Forms ◆ Jump menus Use a web diagram like the one below to brainstorm which elements you will add and the purpose that each element will serve on the Web page.

Interactive Element and Purpose

Interactive Elements

Interactive Element and Purpose

After you have decided which elements to include: 1. Use the Dreamweaver tools that you have learned about in this chapter to add the interactive elements to the site. 2. Test each element in at least two Web browsers. Do they work the same way in both browsers? If they work differently, describe the differences.

4. CHALLENGE YOURSELF Research JavaScripts Many Web sites offer free JavaScripts that anyone can use in their Web sites. 1. Locate two sites that offer free JavaScripts. 2. Review the options that are available. What categories of scripts are available at each site? What are the copyright and fair use policies of the site? 3. On the Web sites you have chosen, locate two different JavaScripts for clocks. 4. View and print the source code for each JavaScript. 5. Compare the two source codes. What similarities do they share? What are the primary differences between the two scripts? Why do you think the two scripts are both similar and different? 6. Create a Web page. Insert the JavaScripts into the page. Do the scripts function as you thought they would? 7. Evaluate the advantages of using JavaScripts that others have written. Are there any drawbacks? Adding Interactivity to a Web Site

303

CHAPTER 10

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Create a Drama Club Web Site   

  

The drama club at your school wants to provide a way to order tickets online. In this activity, you will create a Web page for the drama club. Create a Dreamweaver Web page for the drama club. Use the Language Club template as your site template. Add a banner ad that reads: Buy Your Tickets Now! Add text to the page announcing an upcoming show. If your school is not planning a play or musical, use the following text: Our new show is “Our Town” by Thornton Wilder. Performances start at 7 p.m. on Friday, Saturday, and Sunday. Use the easy order form below to buy your tickets early! Add a short applause sound that will play upon loading the page. If necessary, cite your sources on your page. Add update information to the page. Save the page. Preview it in a browser to test the banner ad and the sound.

2. Add an Order Form to a Web Site  



 

304

Add an order form to the Drama Club Web site you created in Activity #1. Open your Drama Club Web page in Dreamweaver. Insert a form onto the page. Use the Forms toolbar to define a form area. Key the form’s title and introductory text as shown on this page into the form area. Insert a table with 2 columns and 5 rows into the form area. Add the form fields and labels shown on this page into the table. Adjust the table as needed to make the form display correctly. Proofread and save your work. View your completed page in a browser.

Chapter 10

CHAPTER 10

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Create a Sandwich Takeout Site Create a one-page Web site in Dreamweaver for a sandwich restaurant that takes orders online. ◆ Add text to the page that includes the date and time and announces delivery hours of 11 a.m. to 11 p.m. Add other text that advertises the food and guarantees on-time delivery. ◆ Create a banner ad that reads: Sandwiches To Go: 555-5555. ◆ Create an order form that asks for the customer’s name, address, telephone number, and e-mail address. Also include where and when items should be delivered. ◆ In the form, include a menu that lists several sizes of sandwiches and the toppings available. For each item, select the best way to make choices (radio buttons, check boxes, pull-down menus, and so on). ◆ Proofread and save your work. View the page in a browser and test the order form. Reset the options when finished. (Note: The Submit button will not work until the site has been published. You will not publish the site at this time.)

2. Create a Form to Collect Survey Data You are conducting research to see which books on a school reading list were most popular. Obtain a list of recommended fiction books for 5th and 6th graders from a school librarian or a public library. Then, decide what items you need to complete your research. For example, you may want to know which books were most popular with boys and which were most popular with girls. ◆ Based on what you want to learn, create a form in Dreamweaver for students to use. Lay out the form so it is easy for young readers to understand and follow. ◆ Add fields to the form, but only include fields that will help you with your research and that do not violate personal privacy guidelines. For example, you do not need students’ addresses or phone numbers. ◆ Proofread and save your work. Preview the site in a browser.

Adding Interactivity to a Web Site

305

Civic Responsibility: Create a Web Site for Voters Create a Web site that encourages people 18 and older to vote. 1. Plan a Web site that includes a home page and two other pages.

◆ The home page should include introductory text. You will also insert a JavaScript file that displays famous presidential quotes and slogans. ◆ The other two pages should contain information about registering to vote and reasons why it is important to vote. 2. Develop the content for the three pages. Locate a graphic to include on each page. Identify links you can include to send visitors to related sites. 3. Link the home page to the other two pages. 4. Add the text and graphics to the three pages. 5. Change to Code view, select all of the text. Click Delete. Browse to the DataFiles\Ch10\Multimedia folder. Copy the quotes.html file’s source code. Paste it in the home page’s source code. You can change the background color by editing the code, if you wish. 6. Preview your site in a browser. Test all navigation and hyperlinks. Spell check and proofread your work. Make any needed changes or improvements to the site.

Use Technology Tools: Create a Web Photo Album Create a Web photo album about a topic that interests you, such as nature, music, sports, literature, or movies. 1. Plan a Web page with a Web photo album to display your images. 2. Gather the images for your gallery. Use as many of the technology tools you have available, such as the Internet or scanners and cameras, to gather the images. You may use drawings, Clip Art, photos, and animations. 3. Place the images in the album. Crop, resize, and resample the images as needed. Add captions to each image. 4. Create a form in which visitor’s can submit names and e-mail addresses so you can let them know when you have updated the gallery. 5. Evaluate your photo album in a browser. Make changes as needed.

306

Chapter 10

Create an Educational Web Site Create an eight-page Web site that provides information about the the seven continents. The Web site is targeted to elementary school children. The home page will introduce the site and provide a link to facts about the seven continents.

Web Page Checklist

✓ ❑

 Africa  Antarctica

✓ ❑

 Asia  Australia

✓ ❑

 Europe

✓ ❑

 North America  South America When creating your Web site, follow these steps: 1. Conduct research about the seven continents to develop the content for the site. 2. Gather or create multimedia components such as sound, video, and animations to include in the site. For example, you could use an animation of a spinning globe. 3. Remember to use all multimedia images in an ethical manner. Follow copyright guidelines and any Terms of Use agreements from the copyright holder. 4. Use Dreamweaver to create a Web site that has a home page and seven additional pages (one for each continent). Create the navigation structure for the site. Apply a color scheme and text styles to the site. 5. Build the pages by adding the content and multimedia elements you have developed.

✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑

✓ ❑ ✓ ❑

6. Create hyperlinks between the pages. 7. Use the Web page checklist shown on this page to evaluate your site.

✓ ❑

8. Ask a peer to review your finished site and make any needed changes.

✓ ❑

9. For your portfolio, include a screen shot and an electronic copy of your finished product.

✓ ❑

INFORMATION DESIGN The subject of the Web site is clearly identified. Information is accurate and organized logically. Text is broken into small blocks. All content supports the site’s purpose and goals. LAYOUT AND PRESENTATION DESIGN The design is consistent, uncluttered, and supports the site’s goals. The fonts are easy to read. Related items are grouped. Text blocks are separated by white space. Images are cropped and resized to work well on the Web page. MULTIMEDIA COMPONENTS Multimedia elements enhance the content of the page. All multimedia elements function properly in a variety of Web browsers. All multimedia elements are properly cited. Alternative text has been added as needed. Users understand how to use all multimedia elements.

Adding Interactivity to a Web Site

307

UNIT

4

The Web Site Development Process

Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 4 Copyright and Fair Use. Recognize the importance of understanding copyright policies, and learn what information you can and cannot use legally.

308

Think About It It Takes Teamwork It often takes a team of people to create a large Web site. Besides using tools such as Dreamweaver or HTML, project teams also need to use “soft skills” such as communication and problem-solving skills to get the job done.

Discover Soft Skills Activity What other soft skills (also called “people skills”) do you think you need to have to create a Web site? Name as many as you can think of and explain why the skill is important.

309

CHAPTER

11

Project Planning

YOU WILL LEARN TO… Section 11.1 Identify the stages of the Web site development life cycle Identify the responsibilities of project team members Use a checklist to evaluate progress Explain the use of source control Section 11.2 Explain project scope Define e-commerce Identify types of e-commerce Summarize guidelines for developing e-commerce Web sites

WHY IT MATTERS ................................................. Each member of a sports team has a specific assignment. Some members focus on defense while others take shots to score points. Teams win when all members work together. Complex Web sites are often created by teams. Web site development teams create winning sites when all team members contribute their best effort to their assigned tasks. Think about the qualities that you admire about good teams and team members. In a short paragraph, identify two characteristics of good teams and two characteristics of good team members. Explain why you think these characteristics help create a winning team.

310

Chapter 11

CHAPTER

11

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 11.1 Research Team Jobs ................. 319 11.2 Compare E-commerce Sites ..... 326 You Try It Activities 11A Identify Team Responsibilities ... 317 11B Enable Source Control .............. 318 11C Identify Tasks and Milestones ... 325 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................

330 330 331 331

You Try It Skills Studio Evaluate Web Sites .............................. 332 Compare Evaluations .......................... 332 Web Design Projects Identify Client Goals ............................ 333 Create a Schedule ............................... 333

IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Use Notes When you are reading, you may not want to stop to look up a word or review a difficult concept. To avoid interruptions, keep a note pad handy. Whenever you come upon a section or term you want to go back to, write the word or your question on the note paper and mark the place. After you have finished the chapter, go back to the places you marked. Look up the terms or try to answer your questions based on what you have read.

WebDesignDW.glencoe.com

Project Planning

311

SECTION 11.1 THE PROJECT LIFE CYCLE Focus on Reading Read to Find Out The main purpose of this section is to explain how every Web development project follows the same basic development cycle. You will learn about the roles and responsibilities of project team members.

Main Ideas

Key Terms

Reading Strategy

A project team usually develops a Web site for the client. Each team member has specific responsibilities and works with other team members to create a site that meets the client’s goals and expectations.

client client liaison representative milestone project manager source control remote server

Identify one responsibility of six different project team members. Use a table similar to the one below (also available online).

Figure 11.1 Every Web development project follows the same basic life cycle. Why do you think a circle is used to illustrate the Web development process?

Team Member

Responsibility

Client Liaison Representative

Web sites are often developed by project teams. Project teams follow the same steps that you have used to create Web sites in the first three units of this book. The primary difference is that, in a team, different people are responsible for different tasks.

Overview of the Project Life Cycle What are the basic stages of the Web development life cycle?

Stage 5 Evaluation and Maintenance

Stage 1 Analysis and Planning

Stage 2 Design and Development

Stage 4 Implementation

Stage 3 Testing

312

Chapter 11

Web sites developed by teams follow a basic life cycle model, as shown in Figure 11.1. During each stage of the life cycle, team members must complete certain steps before they can start other steps. Each project team member must understand their specific responsibilities, and the timelines needed to complete the project. The amount of time assigned to each stage of the life cycle varies by project, and stages may overlap. For example, people may begin designing the site’s navigation scheme before all of the site’s content has been determined. The key is to remember that every Web development project follows this basic pattern. Analyze Why may life cycle stages overlap?

WebDesignDW.glencoe.com

Tasks in the Project Life Cycle How does my role fit into the life cycle model of Web site development?

The number of people involved on a Web site development team varies by project. Typical team members include a client liaison representative, project manager, Web author, Web designer, Web developer, and Webmaster. Different team members participate in different stages of the project. For example, as shown in Table 11.1, the Webmaster usually becomes involved during the project’s testing phase, while the client liaison representative and project manager are involved in every stage. It is important for every team member to understand the project’s life cycle and know how his or her role fits into the model.

Activity 11.1 Explore Web Programming Identify the resources available to Web developers by visiting WebDesignDW.glencoe.com.

Table 11.1

Project Life Cycle Life Cycle Stage

Purpose

Team Members Actively Participating

Analysis and Planning

• Meet with client to determine site’s goals, budget, and scope • Research site’s audience • Set project milestones

• Client liaison representative • Project manager

Design and Development

• Determine navigation scheme • Develop content • Plan site’s layout and visual appearance

• Client liaison representative • Project manager • Web author • Web designer • Web developer

Testing

• Finalize site’s beta (final test) version • Evaluate beta version

• Client liaison representative • Project manager • Web author • Web designer • Web developer • Webmaster

Implementation

• Transfer site to Web server • Publicize Web site

• Client liaison representative • Project manager • Web developer • Webmaster

• Evaluate audience reaction to site • Update site information • Maintain site and links

• Client liaison representative • Project manager • Webmaster

Evaluation and Maintenance

Team members work through a basic life cycle as they create a Web site. Why do certain team members participate throughout the life cycle?

You Should Know Every team member must be able to work well with others. Use your team projects in this course and other courses as an opportunity to learn teamwork.

Identify Which Web development project team members take part in all stages of a project?

WebDesignDW.glencoe.com

Project Planning

313

Forming a Project Team What team members are essential to the Web development process?

Most Web sites are developed for a client. The client is the person or organization who pays for the work. Examples of clients include: ◆ a corporation that wants to develop a corporate presence site. ◆ an organization that needs a convenient way to stay in touch with its members. ◆ a retail store that wants to develop an e-commerce site.

Client Liaison Representative The client liaison representative maintains contact with the client throughout the Web site development process. Other team members may talk with the client. The client liaison representative, however, is the person responsible for understanding the client’s needs and keeping all other team members working toward the client’s goals. The client liaison representative asks many questions, including: ◆ What are the specific goals for the site? ◆ Who is the target audience? ◆ What is the budget? ◆ When does the site need to be published? ◆ Who will approve the site? ◆ How often does the client want a status report? During the analysis and planning stage, the client liaison representative defines the deliverables, which are the actual work that the team will submit. Since a Web site development project may last for many months, the client liaison representative works with the client to set milestones. A milestone is a specific step in the Web site development process and a date for its completion. Examples of milestones are shown in Figure 11.2.

Figure 11.2

Select images

Establishing deliverables and milestones is an important part of a Web development project. What milestones might need to be set for a Web development project?

Determine basic design

Web Site Development Milestones Develop content

Determine navigation

Project Manager The project manager oversees the work of all the team members and ensures that team members work together. He or she assigns responsibilities and specific tasks to team members and tracks their progress to make sure the completed Web site is delivered on time and on budget. The project manager also provides resources and help as needed to achieve this goal, as shown in Figure 11.3 on page 315. 314

Chapter 11

Figure 11.3 Project managers are problem solvers. What part of project management would you find most interesting?

Web Author The Web author, also known as the content developer, writes the material that appears on the Web site. Web authors may also select images that support or complement a site’s text. Large projects may require several Web authors. When a project has multiple Web authors, a content editor may work with the team of Web authors to gather all the material that will appear on the site. Web authors use outlines to explain their ideas about the content for each page. As the team decides on the specific pages to include in the site, the Web author begins writing the words. Web site text should: ◆ support the site’s purpose and goals. ◆ be presented in an easy-to-read format. ◆ be appealing.

Figure 11.4 Web designers create animations and other visual elements for Web sites. Why do you think Web authors and Web designers must work together?

◆ be accurate and grammatically correct.

Web Designer The Web designer provides visual direction for the Web site (see Figure 11.4). Based on the site’s goals and content, the Web designer selects a color palette, gives shape and definition to each page, and provides a consistent look to the site. The Web designer then makes sketches or creates storyboards for the site. After the team has approved the prototypes, the Web designer: ◆ creates the graphics, including navigation buttons, animations, interface layout, and charts. ◆ creates or obtains photographs, maps, and other visuals to enhance the site. Project Planning

315

Web Developer

Figure 11.5 Many Web developers use storyboards to map a Web site. Why should you consider how visitors move between a Web site’s pages?

Storyboards • Model site • Determine navigation

➠

Web developers use software applications, such as Dreamweaver, and authoring languages, such as HTML, to develop or program the Web site. The Web developer’s goal is to enable visitors to successfully load the Web site in their browser, to navigate within the site, and to navigate to external links. To meet this goal, the Web developer explores the Web server that will host the site to learn the technical requirements. He or she also works with the client to identify the types of browsers that the audience will be using. As shown in Figure 11.5, Web developers often use storyboards to determine a Web site’s design and navigation. They focus on the interactivity of the site, determining how visitors will move between pages. They then use the storyboards to create an alpha, or first, version of the Web site. After the team and client review this site, the Web developer creates a beta, or final test, version of the site. The site is then reviewed, tested, and published. Alpha Site Includes • Placeholder text and graphics • Basic navigation

➠

Beta Site Includes • Final text and graphics • Final navigation

➠

Final Site • Test Beta site • Resolve issues • Publish site

Webmaster The Webmaster implements and maintains the completed site. He or she posts the site on the Web server, keeps the site updated, and answers questions from visitors. The Webmaster also adds new content as provided by the project team, tests links on a regular basis, and updates external links as needed. Contrast What is the difference between a Web developer and a Web designer? Project Management Software programs such as Microsoft Project are available to help manage schedules and assign tasks. It is a good idea to track the status and priority of your tasks, including when they were last modified and whether or not they have been completed.

316

Chapter 11

Evaluating Progress How can a Web site checklist help me to evaluate a Web site’s progress?

When a project starts, the project manager holds a meeting to explain the project and to define team members’ roles and responsibilities. Between team meetings, each team member completes specific assignments. Assignments are completed either by individuals or by groups. During the design and development stage, the team meets periodically to assess team members’ progress and resolve outstanding issues. Teams function best when each team member takes responsibility for completing assigned tasks. The project manager holds team members accountable for their work.

Using Web Site Development Checklists Throughout this unit, you will be creating a Web site for an online company that sells pre-designed blank DVD and CDR disks called MyDiskDesigns.biz. The company has decided to target its products to individuals who purchase CDs and DVDs in quantity, such as teens, tech-savvy consumers, and businesses. In the following activity, you will use a checklist to identify the team members responsible for performing specific tasks during the site’s development.

ACTIVITY 11A Identify Team Responsibilities 1 Create a Web site development checklist like the one in Figure 11.6. This checklist contains a series of questions designed to help you evaluate the interaction, information, and presentation design of the MyDiskDesigns.biz Web site. 2 Add two columns to the right of your checklist. 3 Label the left column: Team Member(s). 4 In the left column, next to each question on your checklist, identify the project team member who is responsible for that step. For example, the Web author is responsible for ensuring the accuracy of the site’s information. 5 If more than one team member is responsible for evaluating a particular item, identify all the team members responsible for completing that task. 6 Label the right column: Project Stage(s). 7 In the right column, next to each question on your checklist, identify the stage of the development cycle in which this evaluation step is completed. Again, note that specific items may need to be evaluated at more than one stage of the life cycle. For example, links should be tested in the development, testing, and maintenance stages.

Figure 11.6 Checklists enable team members to use consistent criteria for evaluating sites.

Web Site Development Checklist INFORMATION DESIGN ✓ Is the information accurate? ❑ ✓ Is the information concise, clear, and spelled correctly? ❑ ✓ Does the content support the site’s purpose and goals? ❑ LAYOUT ✓ Does the site have enough white space? ❑ ✓ Is important content emphasized? ❑ ✓ Are related items grouped? ❑ ✓ Is text aligned consistently? ❑ ✓ Are all links clearly labeled? ❑ NAVIGATION SCHEME ✓ Can you move easily between pages? ❑ ✓ Can you locate specific information quickly? ❑ ✓ Do all internal and external hyperlinks work? ❑ ✓ Can you easily return to the home page? ❑ USER-FRIENDLINESS ✓ Does the site download quickly? ❑ ✓ Is the text easy to read? ❑ ✓ Are both graphic and text links used? ❑ ✓ Is important information displayed in the safe area? ❑ ✓ Does the site include accessibility features? ❑ PRESENTATION DESIGN ✓ Is the color palette consistent? ❑ ✓ Does the design support the site’s purpose and goals? ❑ ✓ Are graphics and multimedia used effectively? ❑ ✓ Do all multimedia features work properly? ❑

Project Planning

317

Using Check In/Check Out Caution To complete You Try It activity 11B, you must have access to files both on a server and on your computer. In addition, you must have the Web site you are working on already defined in Dreamweaver.

When many people are working on a Web site, it is important that different team members do not work on the same page at the same time. Dreamweaver’s Check In/Check Out feature, also referred to as source control, protects a site’s files by ensuring that only one person at a time can edit a particular file. When you check out a file for editing, a green checkmark appears next to the file. If another team member has a file checked out, a red checkmark appears instead. A file must be checked back in before others can make any additional changes. This control avoids the frustration of having one person overwrite another’s changes. The following activity will show you how to enable the Check In/Check Out feature in Dreamweaver. While you will enable the feature, it will not work completely. To make the feature fully functional, your Web site files must be uploaded from your computer (the location where the Web site was created) to a remote server, such as an FTP server, that is connected to the Web (you will learn more about this subject in Chapter 14). Because computer systems work differently, ask for your teacher’s permission before enabling the Check In/Check Out feature.

ACTIVITY 11B Enable Source Control 1 Open your Language Club Web site in Dreamweaver. 2 Choose Site>Manage Sites from the menu bar. In the Manage Sites dialog box, select your Language Club Web site and click Edit.

Figure 11.7

3 In the Site Definition for Language Club dialog box, click the Advanced tab and select Remote Info from the Category list.

The Site Definition for Language Club dialog box.

4 Click the Access drop-down arrow and select the FTP server connection. Select the local folder where your Web documents are stored. Click the Enable file check in and check out option. 5 In the Check Out name text box under the Check out files when opening check box, key your name. 6 In the Email address text box, enter your e-mail address or an address provided by your teacher. Your screen should look similar to Figure 11.7. 7 Click OK and select Done on the Manage Sites dialog box.

Enable file check in and check out Check out files when opening

318

Chapter 11

Check out name

Email address

8 If you are connected to a remote server, you can click Check Out to lock the file so that only you can edit it (see Figure 11.8).

Figure 11.8 Green checkmarks show that you have checked out the file. Red checkmarks show that someone else has the file checked out.

Check In Check Out Green checkmarks indicate that this computer has checked out these two files.

Red checkmarks appear when files are checked out by another user.

9 To disable the source control feature, repeat Steps 1 and 2. In the Site Definition for index dialog box, select Remote Info from the Category list and click in the Check Out name text box. Press Control + A to select all the text. Press Delete to remove your name. 10 Click in the Email address text box. Press Control + A to select all. Press Delete to remove your e-mail address. Deselect the Enable file check in and check out check box. Click OK. Click Done.

Explain How does Dreamweaver’s source control feature protect a Web site’s files?

Section 11.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Web site development follows a basic life cycle.

1. Define client, client liaison representative, milestone, project manager, source control, remote server.

4. Analyze Options Two team members prefer a hi-tech look for a Web site, while two prefer a classic look. How can they reach an agreement?

• The client liaison works with the client to define variables and establish milestones. • Project teams use Web site checklists to evaluate the effectiveness of the site’s interaction, information, and presentation design.

2. Explain why it is important to have a project manager when developing a Web site. 3. Describe how project team members use checklists.

5. Draw Conclusions Why do you think testing happens before implementation in the life cycle of Web site development?

Apply It! Research Team Jobs Select one of the following jobs: project manager, Web author, Web designer, or Web developer. Research the job requirements for this position and write a paragraph summarizing your findings.

Project Planning

319

Ethics in the Workgroup

T

o be a successful member of a team, you need to understand how to share information and resolve conflicts.

Sharing Sharing ideas, or collaborating, is an important part of being a team member. If you have a great idea, a group can help you develop it. You can work out any potential problems or improvements with your group before you put your idea in action. When workgroups do not share resources and ideas, the group becomes less productive. Each member needs to appreciate the diverse skills and backgrounds of other members. Combining individual talents can create a strong team.

Reaching Common Goals It is a constant challenge to balance one’s own wishes with those of the group. Imagine you are designing the interface of a new Web site. Your work will look good if the new site includes a lot of graphics. The project manager, however, is worried about budget and time restrictions. The group votes to reduce the number of graphics so that the site can “go live” sooner. Although your personal interests are different from those of the group as a whole, you accept the majority vote.

Effective teamwork requires communication skills and the ability to compromise.

Negotiating When you negotiate, you participate with the other group members in considering different points of view. Look at your preferences from a business perspective, not a personal one, and use logic to support your position. Then the team can reach a compromise that is most acceptable to the whole group.

1. Evaluate Why is it useful to work in a team with 2. Describe Processes In a group, work out the people from diverse backgrounds? What are some purpose, audience, and elements of a Web page of the benefits and problems that might occur about a popular tourist destination. Describe the when working as a team? processes your group used to resolve conflicts.

320

Chapter 11

SECTION 11.2 DETERMINING PROJECT SCOPE Focus on Reading Read to Find Out The main focus of this section is to help you to determine the amount of time, money, resources, and people needed to develop an e-commerce Web site. Read to find out why knowing your target market is essential to the development of an e-commerce Web site.

Main Ideas

Key Terms

Reading Strategy

The amount of time, money, resources, and people needed to complete a Web site helps to determine the project’s scope. E-commerce sites often require significant amounts of time, money, and people to complete.

scope e-commerce business-to-business (B2B) business-toconsumer (B2C) target market budget instant storefront

Identify three items to be considered when designing an e-commerce Web site. Use an organizer like the one below (also available online). Designing an E-commerce Web site

One of the first steps in starting a new Web development project is determining how many pages and features a site will include. Identifying the size and complexity of a site helps determine the amount of resources needed to complete that site.

Analysis and Planning What elements should I consider when planning a Web site?

The first stage in the Web site development life cycle involves analysis and planning. During this stage, the client liaison representative meets with the client to identify the site’s purpose, goals, and audience. The Web site’s mission statement helps determine that site’s content. A list is usually made of all the content and features that people want to include on the Web site. This list of desired items is then balanced against the amount of time, money, and resources available for the project. This balancing act defines the project’s scope, which is the set of features and content that can be provided given the time and resources available. It is often necessary to omit some content or features to stay within the project’s budget and schedule. The project team then reviews the project’s scope during this initial stage to determine what is and is not essential to the site.

Activity 11.2 Explore E-Commerce Identify the growing importance of e-commerce to businesses by visiting WebDesignDW.glencoe.com.

Define What is a project’s scope?

WebDesignDW.glencoe.com

Project Planning

321

The Business of E-commerce Figure 11.9

What are some of the advantages of running an e-commerce site?

Some businesses only exist online. What challenges do online businesses face?

E-commerce is the electronic buying and selling of goods and services. The growth of e-commerce sites has transformed the Internet into a worldwide marketplace.

The Role of E-commerce Although e-commerce includes all forms of electronic transactions, including access to bank accounts through ATMs, this unit will focus on online exchanges. Online e-commerce exchanges include: ◆ customers ordering products online and receiving them through the mail. ◆ businesses providing online technical product support for a fee. ◆ educational institutions offering online courses for a fee. ◆ government agencies allowing citizens to renew their license plates online.

Table 11.3 Consumers can often buy the same products in retail stores and online. Which advantage of online shopping is most helpful to you?

Some businesses offer online services in addition to a more traditional brick-and-mortar (i.e., an actual physical store) shopping experience. Other businesses, such as ebay.com, only do business online (see Figure 11.9). E-commerce sites provide an alternative to retail shopping. Table 11.3 lists the advantages and disadvantages of traditional and online shopping.

Traditional versus Online Shopping Traditional Retail Shopping

Online Shopping

Advantages

• You can examine the merchandise. • You can pay with cash, checks, credit cards, or debit cards. • You can take the merchandise home immediately.

• You can shop from home, 24 hours a day, 7 days a week. • You can easily compare prices among different online sources. • You can purchase merchandise that is not available in your local community.

Disadvantages

• You must travel to the store. • You cannot easily compare prices. • Your local stores may not carry the merchandise.

• You cannot examine the merchandise closely. • You usually must pay with a debit or credit card. • You must wait for the merchandise to be delivered. • You may have to pay shipping and handling charges.

322

Chapter 11

Types of E-commerce E-commerce Web sites offer a variety of goods and services to individuals and businesses. The online marketplace can be divided into two main categories: business-to-business (B2B) and business-to-consumer (B2C). The two types of e-commerce are compared in Figure 11.10.

Figure 11.10

Business-to-Business (B2B) Businesses sell goods and services to other businesses.

E-commerce Sites

Business-to-Consumer (B2C) Businesses sell goods and services to individual consumers.

E-commerce is the electronic buying and selling of goods and services. What are the two main categories of e-commerce Web sites?

Summarize What is the difference between a businessto-business and business-to-consumer e-commerce site?

Designing an E-commerce Web Site How should I design an e-commerce Web site?

In the early days of e-commerce, some people thought that simply making products available online would bring success. However, businesses soon realized that they must market their e-commerce Web sites for people to visit them.

Determining the Target Market When you plan an e-commerce site, you must know your target market. Your target market is the group of potential customers for the product or service that you are selling. Businesses often consider the characteristics of market segments when defining their target market. A market segment is a group of people who share common traits or interests and who have money to spend. Businesses use images, sound, colors, and text on Web sites to appeal to particular age groups, as shown in Figure 11.11. Other characteristics used to define a target market include income, educational background, interests, and activities.

Figure 11.11 Businesses target their products to people in specific age groups. How does this Web site target a specific age group?

Project Planning

323

Creating the Schedule You Should Know The amount of time assigned to each stage of the Web development process varies by project.

It is important to set a realistic schedule when developing a Web site. Project managers are responsible for determining a Web site development project’s schedule. The schedule identifies the project’s milestones. Project managers often determine these due dates by working backwards from the date the site is scheduled to go live (be published). Creating a detailed schedule makes it easier to determine how long particular stages of the project will take to complete. As shown in Figure 11.12, some tasks can only begin after other tasks are completed. Other tasks can occur at the same time. For example, content development can begin while planning for the site’s interaction and presentation is still taking place. Other tasks in the Web development process that can overlap include: ◆ testing, design, and development. ◆ implementation and testing. ◆ evaluation, maintenance, and implementation.

Figure 11.12

The Project Life Cycle

Stages in the development process often overlap. Why does testing overlap with design and development?

Stage 1

Project Stage

Stage 2

Stage 3 Stage 4

Stage 5 1

2

3

4

5

6

7

8

9 10 11 12 13 14 15 16 17 18 19 20

Development Time in Weeks Analysis and Planning

Implementation

Design and Development

Evaluation and Maintenance

Testing

In the following You Try It activity, you will identify the tasks and milestones that the MyDiskDesigns.biz Web development team will need to complete in order to stay on task. 324

Chapter 11

ACTIVITY 11C Identify Tasks and Milestones 1 Read the proposal from MyDiskDesigns.biz found in the DataFiles\Ch11\Text folder (click proposal.doc). MyDiskDesigns.biz has prepared this proposal to define the scope of its new Web development project. 2 As you read the proposal, list the tasks that people on the Web site development team will need to complete in each stage of the project. 3 Then list the team members who will be responsible for completing each task. 4 Create a list of the milestones that the project team will need to meet in order for the site to go live in three months. 5 Develop a schedule for the Web development project. 6 Use the information in Table 11.4 to help you determine how long particular stages of the project will take to complete.

Table 11.4

Web Site Development Schedule Time Frame

Stage

Sample Tasks

4 to 6 weeks

Analysis and Planning

• Research client’s needs. • Define the target market. • Determine what equipment the site will need to function properly. • Identify available resources and set a realistic budget. • Set milestones for the project.

8 to 10 weeks

Design and Developmment

• Design interaction. • Design presentation. • Gather information and write content. • Gather visual elements. • Program site.

4 to 5 weeks

Testing

• Debug HTML code as needed. • Test all elements of the site in two browsers. • Fix all problems and retest as needed.

1 week

Implementation

• Transfer all files in the site to the Web server hosting the site. • Test the site after moving it and before going live. • Go live.

Ongoing

Evaluation and Maintenance

• Respond to customer feedback. • Test internal and external links regularly. • Communicate ideas for improvement to project team.

Schedules help team members stay on task.

Shortcut A quick way to undo or remove a change is to press Control + Z. To restore the change, press Control + Shift + Z.

Project Planning

325

Considering Budget and Human Resources Caution When determining a budget for an e-commerce site, businesses must also ensure that the servers and telecommunications lines are able to handle the amount of customer traffic that the business thinks their site will receive.

As businesses seek to establish or expand their presence online, they must determine what resources they are willing to commit to a project.

Determining Budget A budget defines the total financial resources available for site development. Budgets help to define the scope of the project. For example, MyDiskDesigns.biz would like to develop an electronic store for its products. However, after considering all the options available, it decides that the budget is only sufficient to provide product information online and to accept e-mail orders. Determining Human Resources When businesses decide that e-commerce will be a primary way to sell to customers, they must decide whether to use in-house employees to develop and maintain the site. The in-house solution brings together people who already have knowledge of the existing business. There are potential drawbacks to an in-house solution, however, including a lack of computer expertise among existing employees or employees who cannot commit time to developing the site, and the cost to purchase and deploy the software needed to maintain an e-commerce site. Businesses that do not expect significant sales from e-commerce may choose less costly solutions, such as instant storefronts. An instant storefront is a portal site that helps businesses create their own e-commerce Web sites in a few hours. Some instant storefronts, such as Microsoft’s bCentral, help businesses market their sites. Others also help businesses through the maze of privacy and security issues that can be difficult for small businesses to handle on their own. List How can businesses with limited resources set up an online presence?

Section 11.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• E-commerce is the electronic buying and selling of goods and services.

1. Define scope, e-commerce, business-to-business (B2B), business-to-consumer (B2C), target market, budget, instant storefront.

3. Predict Outcomes What effect do you think e-commerce will have in the next ten years on traditional retail stores?

• Project managers determine the schedule for all aspects of the site’s life cycle. • Businesses with limited resources may use instant storefronts to quickly set up an online presence.

326

Chapter 11

2. Explain the difference between an in-house solution and an instant storefront.

4. Draw Conclusions Why do you think you need to consider a budget before you begin working on an e-commerce Web site?

Apply It! Compare E-commerce Sites Find two e-commerce sites on the World Wide Web that sell similar products. Compare and contrast the two sites and write two paragraphs summarizing your findings.

Reading Review

CHAPTER 11

SECTION 11.1 The Project Life Cycle

SECTION 11.2 Determining Project Scope

Key Terms

Key Terms

client, 314 client liaison representative, 314 milestone, 314 project manager, 314 source control, 318 remote server, 318

scope, 321 e-commerce, 322 business-to-business (B2B), 323 business-to-consumer (B2C), 323 target market, 323 budget, 326 instant storefront, 326

Main Ideas ■ Project teams often develop Web sites. ■ Web site development follows a basic life cycle. ■ Teams vary in size, but often include a client liaison

■ ■

■

■

■ During analysis and planning, the client liaison

■ ■

■ ■ ■ ■

representative works with the client to identify the site’s purpose, goals, and audience. E-commerce is the electronic buying and selling of goods and services. Business-to-business (B2B) e-commerce involves transactions between businesses, while businessto-consumer (B2C) e-commerce involves businesses selling to individual consumers. E-commerce businesses must know their target markets. Project managers determine the schedule for all aspects of the site’s life cycle. Web site developers base their choices on the budget and resources available. Businesses with limited resources may use instant storefronts to quickly set up an online presence.

The Project Life Cycle Analysis and Planning

Stage 1 Design and Development Testing

Stage 2 Project Stage

■

representative, project manager, Web author, Web designer, Web developer, and Webmaster. Team members have specific assignments that help the team achieve the goal of developing a Web site that meets the client’s expectations. The client liaison works with the client to define deliverables and establish milestones. The project manager holds team members accountable for their work and for the team’s progress. Project teams use Web site checklists to evaluate the effectiveness of the site’s interaction, information, and presentation design. Source control helps teams manage the files they are creating for a Web site.

Main Ideas

Implementation

Stage 3

Evaluation and Maintenance

Stage 4

Stage 5 1

2

3

4

5

6

7

8

9 10 11 12 13 14 15 16 17 18 19 20

Development Time in Weeks

Project Planning

327

CHAPTER 11

Review and Assessment

AFTER YOU READ Revisit Your Notes Go back to the sections of the chapter where you have notes. Look up any words you recorded. Review illustrations or reread sections to help understand complicated ideas. If you still are having trouble, ask your teacher to review any concepts that you still have questions about.

On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.

15. Identify the phases in the Web site development life cycle. Explain why some overlap may occur within stages of the process. Phase 1

➠

Phase 2

➠

Phase 3

➠

Phase 4

➠

Phase 5

Reviewing Key Terms

328

Chapter 11

➠

9. Summarize the ways both project managers and Web developers contribute to Web site development teams. 10. Explain the major tasks that a Web designer performs. How do these differ from the responsibilities of a Web developer? What are the similarities? 11. Describe how Web site checklists help team members evaluate and track their performance. 12. Discuss the factors to consider when identifying a project’s scope. 13. Explain the difference between B2B and B2C e-commerce. 14. Explain why businesses must market their e-commerce sites.

E-commerce Transactions

➠

Understanding Main Ideas

16. Identify three types of e-commerce transactions.

➠

1. Who are typical team members for a Web site development project? 2. Who are typical clients for Web site development teams? 3. How does the role of a client liaison differ from that of a project manager? 4. What are the advantages of setting milestones for a project? 5. What is source control? 6. What is e-commerce? 7. What are the two main categories of e-commerce Web sites? 8. What type of portal site enables small businesses to easily and quickly begin selling products on the Web?

Type 1

Type 2

Type 3

Critical Thinking 17. Summarize This chapter discusses why knowing your target market is essential to the development of an e-commerce Web site. What characteristics do businesses use to define a market segment? 18. Make Decisions The Web designer and Web developer on a project team disagree about who should create the animations for the site. Each thinks the other person should perform this task. As the project manager, what would you do to resolve the disagreement so that the project can move ahead? What other tasks will they perform? How will they work together? Copy the Venn diagram shown below and use it to illustrate your answer.

Web Designer

Web Developer

Review and Assessment

CHAPTER 11

19. Analyze Project Scope An e-commerce site’s mission statement is as follows: “The instant storefront will provide easy access to all products in our catalog. Our products, targeted to buyers from the ages of 15 to 25, will ship within 48 hours of the order.” Make a list of factors to consider when defining the scope of this e-commerce site. 20. Sequence Steps During which parts of the development cycle is it important to test your Web site? Explain your answer. 21. Identify Milestones You are the client liaison representative for a local Web development company wanting to do more business with companies catering to teens. You plan to meet with the client’s marketing director about a new Web site for the 24 Cinema Theater. What milestones will need to be established and what kinds of deliverables will need to be defined? Use a table like the one shown below to illustrate your answer. Milestones

•

Deliverable

Milestone 2

•

Deliverable

On your own paper, copy and complete the chart of general Dreamweaver editing commands shown below.

+

23.

+

24.

+

The Web author, also known as the content developer, writes the material that appears on the Web site. Web authors may also select images for the Web site that support or complement the site’s text. Large projects may require several Web authors. When a project has multiple Web authors, a content editor may work with the team of Web authors to gather all the material that will appear on the site. Web authors use outlines to describe their ideas for each page. According to the paragraph, which of the following statements is true?  The sole job of Web authors is to write text for Web sites.  A content developer may choose images that will appear on the Web site.

 A project may have several content editors, but there is only one Web author.

You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.

22.

Read the paragraph below and then answer the question.

 Outlines created by content editors are used to describe their ideas for the site.

Deliverables

Milestone 1

Reading & Writing

WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 11.

Result

Online Self Check

WebDesignDW.glencoe.com

+

Result

Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 11.

Result

Project Planning

329

CHAPTER 11

Activities

1. MAKING CONNECTIONS Math—Conduct a Salary Survey Research online to find salary ranges for the following jobs: ◆ Webmaster ◆ Web designer (may also be called graphic designer) ◆ Web developer (may also be called information architect or information engineer) ◆ Project manager If possible, find a survey that lists salary ranges from low to high. Then, make a bar chart based on the data you collect. Plot your results for each job on the bar chart. Give the chart an appropriate title and label it so that others can easily understand the information you have included. Be sure to document your sources. After you have completed your bar chart, create a two-column table that lists the highest to lowest paid jobs, and then compare your table with a partner. Compare and contrast the two tables and write two paragraphs summarizing your findings. As a project manager for MyDiskDesigns.biz, why might this information be important?

JOB

SALARY RANGE

Highest Paid Job

Lowest Paid Job

2. STANDARDS AT WORK Students understand the ethical, cultural, and societal issues related to technology. (NETS-S 2)

List Confidential Items When clients hire companies to create Web sites, they share information about the company that must be kept confidential. Often each member of the project team is required to sign a confidentiality agreement. This agreement tells signers not to discuss any aspects of the project with people outside the project team. Assume you are assigned to a project team that is designing an e-commerce site for a toy store. You sign a confidentiality agreement that states that you may not disclose any information about the company, its employees, or its products. ◆ Make a list of things that the team would need to know about the company to develop the site. ◆ Place a check mark beside each item that you should not disclose to people who are not on the team. 330

Chapter 11

CHAPTER 11

Activities

3. TEAMWORK SKILLS Identify Project Team Strengths Compare the intelligences listed in the table shown below to the skills needed by a project team. Then, create a table like the one below that lists each intelligence and the project team members who should be strong in it. Can you think of any other intelligences to add to the list? PROJECT TEAM STRENGTHS Intelligence

Project Team Member

• Works well with spoken and written language • Works well with numbers and understand the relationship between objects • Understands how something drawn on paper will look when created • Coordinates the body effectively (for example, dancers and athletes) • Works well with music • Deals well with the behavior, emotions, and motivations of other people • Deals well with one’s own emotions and motivations • Works well with one’s physical surroundings

4. CHALLENGE YOURSELF Compare Storefront Solutions Sites that sell instant storefront solutions explain the services the site offers, the steps you need to take to set up a storefront, and the prices for the services. Some sites also offer a demonstration (demo) of how the storefront works. ◆ Find two instant storefront sites that offer a demo. As you view each demo, make a list of the features that the site offers. Use your lists to create a chart comparing the two storefronts. ◆ Based on your chart, write a one-page proposal identifying which storefront you would recommend to a friend who wants to sell video games. Explain your reasoning. Project Planning

331

CHAPTER 11

Projects

These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.

1. Evaluate Web Sites Many project teams rely on reviewers to evaluate the usability of a Web site as they develop it. All the reviewers should use the same criteria to evaluate the site. This helps the project team develop sites that most people will find useful.  With a partner, select three different sites: one e-commerce site, one entertainment-oriented site, and one college or university site.  With your partner, decide what criteria a site has to meet to be rated 1 (poor), 2 (good), or 3 (excellent). Use the checklist shown in Figure 11.6 (see page 317) to help determine your criteria and evaluate the sites.  Evaluate each site separately. Use a chart like the one on this page to rate each aspect of the three sites.

Site URL: Name of Site: Type of Site: Aspect Being Rated

1 (poor)

2 (good)

3 (excellent)

Information Design Layout Navigation Scheme UserFriendliness Presentation Design Overall Rating

2. Compare Evaluations When reviewers evaluate sites, they bring their personal backgrounds and preferences into the evaluation. Therefore, different reviewers may have very different evaluations of the same site.  Ask two classmates to evaluate the same sites you reviewed in You Try It Skills Studio Activity #1. They should use the same evaluation tool as in the activity above.  Compare the similarities and differences among the evaluations. Note any evaluation items that differ by two points from your evaluation. Ask your classmates to explain their reasoning for these ratings.  Write a summary of the evaluations and explain what you learned about evaluating Web sites.

332

Chapter 11

CHAPTER 11

Projects

Read the projects described below. Then follow the directions to complete each project.

1. Identify Client Goals Your company has assigned a new client to you. The client, Outdoor Excursions, sells camping equipment. The client’s budget is limited, so it has decided to develop a corporate presence site. Eventually, it plans to develop an e-commerce site to market its products. At your first meeting with the client, you learn the following: ◆ Its customers include people of all ages. ◆ Families often visit the store together to select gear. ◆ The company advertises at local campgrounds and in the telephone book. ◆ Many of its customers recommend the store to their friends. ◆ Their staff members are experienced campers. Based on this information, prepare a list of pages for the site. You have determined that the budget will support development of eight to ten pages. Prepare a list of follow-up questions that you need to ask the client so that the Web author can begin developing content.

2. Create a Schedule Carol has been making candles that commemorate a theme or an occasion for friends and family members. Her work has met with great success, and she has decided to broaden her business with an e-commerce site—Candles by Carol. The site will allow people to select a candle that is accompanied by a poem related to the occasion. Identify the tasks and milestones needed to create a site for Candles by Carol. Create a Web site development schedule (for help, refer to Table 11.1 shown on page 313). Assume that Carol would like the site completed within three months.

LIFE CYCLE STAGE

SCHEDULE (TIME TO COMPLETE)

TASK LIST (THINGS TO DO)

MILESTONES (DELIVERABLES)

Analysis and Planning Design and Development Testing Implementation Evaluation and Maintenance

Project Planning

333

CHAPTER

12

Developing a Web Site

YOU WILL LEARN TO… Section 12.1 Discuss the functions of a Web site Compare and contrast style sheets Apply cascading style sheets (CSS) to a Web site Section 12.2 Create a feedback form Compare and contrast radio buttons and check boxes Section 12.3 Explain the use of privacy policies Compare and contrast Web site privacy and security Discuss security measures used by e-commerce sites Section 12.4 Identify and describe accessibility issues Identify strategies for maximizing site accessibility Validate accessibility

334

Chapter 12

WHY IT MATTERS ................................................. Blueprints help builders and contractors know how to construct a building. As you build sites in Dreamweaver, your planning serves as the blueprint for your site. Like buildings, many Web sites start small and grow over time. Before a Web site can grow, however, it must be built on a solid foundation. Creating a good foundation greatly enhances the design of your Web site. Review what you have learned about designing Web sites to this point. Write a list of steps you would take to build the home page for a personal Web site. Then compare your list with a classmate’s list to see if you both created similar “blueprints.” In a short paragraph, describe the similarities and differences between the two lists.

CHAPTER

12

WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 12.1 Edit CSS ...................................... 341 12.2 Develop a Form ...........................346 12.3 Research Digital Certificates.... 352 12.4 Add Alternative Text................... 356

You Try It Skills Studio Create an Order Form ......................... 362 Add a Privacy Policy ............................ 362 Web Design Projects Create a Feedback Form ..................... 363 Plan a Web Site with Feedback .......... 363

IN THE WORKBOOK

You Try It Activities 12A Explore the MyDiskDesigns.biz Web Site ...................................... 12B Create an Internal Style Sheet... 12C Attach an External Style Sheet... 12D Edit an External Style Sheet...... 12E Add a Feedback Form ................ 12F Add Radio Buttons ..................... 12G Add Check Boxes ........................ 12H Add a Privacy Policy................... 12I Run an Accessibility Report ......

337 338 339 340 343 344 345 349 355

Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................

360 360 361 361

Optional Activities and Projects Guided Reading Web Design Projects

ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments

BEFORE YOU READ Check Your Understanding Stop often and think about what you are reading. Are you following along with the ideas? Have you immediately forgotten what you just read? Reread parts when necessary. On a note pad, draw pictures or diagrams to summarize the information. As you complete a section, see if you can connect the ideas. Write down the main idea on your note pad. Then write down supporting information or examples around the main idea. Draw lines or arrows to show the connections.

WebDesignDW.glencoe.com

Developing a Web Site

335

SECTION 12.1 EXAMINING AN E-COMMERCE WEB SITE Focus on Reading Read to Find Out In this section, you will learn how businesses use Web sites to present information about their products and services. As you read, pay close attention to the main pages commonly found in e-commerce sites.

Main Ideas

Key Terms

Reading Strategy

Many e-commerce sites exist to provide information about a company and its products. You can use a cascading style sheet to format an e-commerce or other Web site.

cascading style sheet (CSS) internal style sheet external style sheet

Compare and contrast internal and external style sheets. Use a Venn diagram like the one below (also available online).

Internal Style Sheet

External Style Sheet

Many businesses use Web sites to present information about their products and services. While these Web sites may give visitors a chance to place orders and give feedback, their main function is to provide the business with an online presence.

Examining the MyDiskDesigns.biz Site How do businesses use Web sites?

Content A company’s contact page should provide e-mail addresses to general locations or departments, such as the customer service department. That way, the addresses do not have to change when company personnel changes.

The Web site featured in this unit, MyDiskDesigns.biz, is a B2C e-commerce site. The business sells pre-designed blank DVDs and CDRs directly to consumers. The Web site targets consumers who are tech-savvy and buy multiple quantities of disks at full price from retailers. The average age of these consumers ranges from 15 to 25. The company also targets designers, small- to medium-size businesses, and individuals looking for hip, new products. Each page of the MyDiskDesigns.biz site helps to promote the company and its products. These types of pages are common on e-commerce Web sites. ◆ The Home page introduces visitors to the business. ◆ The Products page provides an overview of the business’s products and services and a link to an order form. ◆ The FAQ (Frequently Asked Questions) page answers common questions about the business and its services. ◆ The News page announces what is new in the company. ◆ The Contact Us page provides contact information to visitors.

336

Chapter 12

WebDesignDW.glencoe.com

In the following activity, you will define the MyDiskDesigns.biz Web site and become familiar with its pages and features. As you navigate through the site, pay close attention to the function of each page and how MyDiskDesigns showcases its products and services.

ACTIVITY 12A Explore the MyDiskDesigns.biz Web Site 1 Start Dreamweaver. Use the Site>Manage Sites option to define the MyDiskDesigns Web site, which you can find by browsing to the DataFiles\Ch12\WebExamples\MyDiskDesigns folder. Save it in your Web site folder. 2 Open the pages folder to see the site’s pages. In the Files panel, right-click index.html and select Set as Home Page. Click Expand/Collapse. In Map view, click Site Map and select Map and Files (see Figure 12.1). Review the site’s structure. Click Expand/Collapse to return to Local view.

Figure 12.1 Use Map view to review the site’s structure. Expand/ Collapse Site Map

3 Preview the home page (index.html) in a Web browser. Use the navigation bar at the top of the page to navigate to each page in the site (see Figure 12.2). Identify the purpose of each page and describe how the page contributes to the site. Close your browser when finished. Save and close the site.

Figure 12.2 Use the navigation bar to view the pages in the MyDiskDesigns.biz site.

Navigation bar

Summarize What is the purpose of a FAQ page?

Developing a Web Site

337

Cascading Style Sheets How can I use CSS to format a Web site?

Accessibility Some browsers do not support CSS. Double check whether your target audience’s browsers will support the style sheets that you may use. To disable Dreamweaver’s default CSS feature, choose Edit> Preferences. In the General category view, uncheck Use CSS instead of HTML tags.

Developed in 1996 by the World Wide Web Consortium (W3C), cascading style sheets, or CSS, allow Web designers to separate presentation information (how items look) from content information. The term “cascading” refers to the fact that multiple style sheets can be attached to one Web page. Because it helps make items consistent, many Web designers use CSS to control an entire Web site’s text color, background colors, borders, spacing, and positioning of elements.

Using CSS in Dreamweaver Dreamweaver uses CSS to style HTML elements by default. This makes it easy to create and modify CSS information. A CSS Styles panel allows you to attach, edit, and delete style sheets. In addition, you can define new CSS styles for use in your Web pages or use the sample sheets included in Dreamweaver. The two main types of style sheets that you can use in a Web site are internal and external style sheets.

Internal Style Sheets An internal style sheet embeds CSS information within an individual Web page’s header HTML code. In the following activity, you will create a simple Web page that uses an internal style sheet.

ACTIVITY 12B Create an Internal Style Sheet 1 In Dreamweaver, create a new HTML document named: css_style.html. Open the page in Design view. Title the page: Internal Style Sheet. In the page, key: This sentence uses cascading style sheet information to change its appearance. 2 Choose Window>CSS Styles (or press Shift + F11) to open the CSS Styles panel. In the panel, click the New CSS Style button. In the New CSS Style dialog box, in the Name box, key: .mystyle. For Selector Type, choose Class (can apply to any tag). For Define in, choose This document only. Click OK. 3 In the CSS Style definition for .mystyle dialog box, adjust the settings to match those shown in Figure 12.3. When done, click OK.

Figure 12.3 Use the CSS Style definition dialog box to define a new style in a style sheet.

338

Chapter 12

4 In your Web page, select the words cascading style sheet. In the Properties inspector, click the Style drop-down arrow and select mystyle to apply the new CSS style. 5 On the Document toolbar, click Split view. Note that the .mystyle style information is contained in the document’s header code (see Figure 12.4). Return to Design view. Save and close the page.

Figure 12.4 The style you defined and applied is displayed in the page’s HTML header code.

You Should Know An external style sheet always uses a .css file extension.

External Style Sheet An external style sheet is a separate file that contains CSS information. Unlike internal style sheets, this file is not embedded in a single Web page but can instead be linked to multiple Web pages. Any changes made to an external style sheet are reflected in every Web page to which the CSS file is linked. Using an external style sheet thus makes it quick and easy to change an entire Web site.

ACTIVITY 12C Attach an External Style Sheet 1 In your MyDiskDesigns.biz Web site, open the index.html page in Design view. On your hard drive or network, browse to your MyDiskDesigns.biz site’s root folder. In the root folder, create a new folder named: css. 2 Browse to the DataFiles\Ch12\CSS folder. Copy the mydiskdesigns.css file and place the copy in your MyDiskDesigns site’s css folder. 3 In Dreamweaver, open the CSS Styles panel if necessary. Click the Attach Style Sheet button. In the Attach External Style Sheet dialog box, click the Browse button. In the Select Style Sheet File dialog box, navigate to and select the mydiskdesigns.css file in your site’s css folder. Click OK.

Figure 12.5 Use the Attach External Style Sheet dialog box to link an external style sheet to your Web page.

4 In the Attach External Style Sheet dialog box, next to Add as, select Link. Your dialog box should look like Figure 12.5. Click OK.

Developing a Web Site

339

5 The site changes to reflect the new styles (see Figure 12.6). Repeat Steps 3 and 4 to attach the style sheet to the site’s other five pages. Save the files. Preview the Web site in a Web browser. Close the browser when finished.

Figure 12.6 Click the plus sign next to mydiskdesigns.css to view the style information contained in the css file.

Inline CSS Unlike the CSS information provided by an internal style sheet, inline CSS is included directly in the HTML tags used to create individual Web page elements. Inline CSS thus only applies style information to unique elements on a page. Because it is much less flexible than either internal or external style sheets, the use of inline CSS is discouraged. To use inline CSS in Dreamweaver, you must edit the HTML code yourself in either Code or Split view.

Modifying CSS in Dreamweaver You can modify the style information in a CSS file to further customize a site’s appearance. In Dreamweaver, the same steps are used to edit either an internal or an external style sheet.

ACTIVITY 12D Edit an External Style Sheet 1 Open the index.html file of your MyDiskDesigns.biz site in Design view. 2 In the CSS Styles panel, double-click mydiskdesigns.css to open the file in the Document window. 3 In the CSS Styles panel, open the mydiskdesigns.css file. Scroll down and click the .copyright selector. Click the Edit Style button. In the CSS Style definition for .copyright dialog box, increase the font Size to 14 pixels. Set Weight to bold and Color to value #3300FF. 340

Chapter 12

4 Click OK. Notice the .copyright style definition in the Document window changes to reflect your edits (see Figure 12.7).

Figure 12.7 Changes made in the CSS Style definition dialog box are reflected in the style sheet file.

Figure 12.8 The Web page’s formatting changes to reflect the edited style sheet.

5 Save and close the mydiskdesigns.css file. Click the index.html tab to view the home page. The information is now blue, bold and 14 pixels in size (see Figure 12.8). Save your file. Summarize What two main types of style sheets can you apply to a Web site?

Section 12.1 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Many e-commerce sites exist to provide an online presence for the company and to showcase that company’s products.

1. Define cascading style sheet (CSS), internal style sheet, external style sheet.

4. Synthesize Information How does CSS make it easy to create a consistent Web site?

2. Summarize the purpose of the five main pages in the MyDiskDesigns.biz site.

5. Make a Decision You are creating a Web site with multiple pages. Why would you decide to use an external style sheet when creating your site?

• You can use cascading style sheets to format an entire Web site. • There are two main types of style sheets: internal and external.

3. Explain the difference between internal and external style sheets.

Apply It! Edit CSS In your MyDiskDesigns site, open the mydiskdesigns.css file. Select three styles and use the CSS panel to modify them. View the site in a browser to see your changes. Do not save the changes.

Developing a Web Site

341

SECTION 12.2 USING FEEDBACK FORMS Focus on Reading Read to Find Out In this section, you will learn how Web sites use feedback forms to gather information from visitors. Read to find out how to create a feedback form.

Main Ideas

Key Terms

Reading Strategy

Feedback forms allow visitors to share their thoughts about the business, the products, and the site. Radio buttons and check boxes allow you to provide preset options for visitors.

feedback form text area radio button check box

Compare and contrast radio buttons and check boxes. Use a Venn diagram like the one below (also available online).

Radio Button

Check Box

Feedback Forms How can a feedback form enhance an e-commerce site? Shortcut A quick way to preview a Web page in your primary browser is to press F12.

The MyDiskDesigns.biz site has limited e-commerce functionality. The company processes orders once a day by telephone, fax, and e-mail. The plan for the Web site is to expand its e-commerce capabilities gradually until it can process credit card orders electronically. An important step in improving an e-commerce site’s capabilities is to establish and maintain relationships with its customers. In this section, you will focus on adding more ways for a customer to communicate with MyDiskDesigns.biz.

Creating a Feedback Form A feedback form provides customers with a way to voice opinions, comments, and suggestions. E-commerce sites especially encourage feedback because it helps cement the relationship between the customer and the business. Customers who take the time to contact the business are also likely to return to the business’s Web site. In the next You Try It activity, you will add a feedback form to the MyDiskDesigns.biz Contact Us page. The form will include a text area, also known as a scroll box, in which visitors can type specific comments to the company. The form will not actually process data until the site is published to a server. Once the site is published, information is sent to the server when a visitor clicks Submit. A server-side script such as ColdFusion, ASP, or PHP then processes the information and responds by either sending requested information back to the user, or by performing some other action required by the form’s contents.

342

Chapter 12

WebDesignDW.glencoe.com

ACTIVITY 12E Add a Feedback Form 1 In your MyDiskDesigns.biz site, open the Contact Us page (contact.html) in Design view. Click after [email protected] and press Enter. Select Insert>Form>Form. In the dashed box, key: Send us your comments! Format the text Bold. Press Enter. 2 On the Insert toolbar, change the view to Forms. On the toolbar, click Text Field. In the form, make sure the text field is selected. In the Properties inspector, in the TextField box, key: Customer_name. Press Tab. In the Char width box, key: 40. Press Tab. In the Init val box, key: Your name. Press Tab. Deselect the text field and position the insertion point after it. Press Enter. 3 On the Insert toolbar, click Text Field. In the Properties inspector, in the TextField box, key: Customer_email. In the Char width box, key: 40. In the Init val box, key: Your e-mail address and press Tab. 4 In the form, position the insertion point after the text field. Press Enter. Key: Enter your comments, questions, and suggestions below. Format the text Bold, if necessary. Press Shift + Enter. 5 On the Insert toolbar, click Textarea. With the text area selected, in the Properties inspector, in the TextField box, key: Feedback. In the Char width box, key: 40. Press Tab. In the Num Lines box, key: 5. Press Tab. Leave the Init val box empty. Position the insertion point after the Textarea box. Press Enter. 6 On the Insert toolbar, click Button to create a Submit button. In the form, position the insertion point after the button. Click Button again. In the Properties inspector, select Reset form to insert a Reset button. Deselect the button. Your form should appear as shown in Figure 12.9. Save your work.

Figure 12.9 Adding words in the form’s text fields lets customers know what data to enter in the field.

Text boxes

Text area

Evaluate Why might a company add a feedback form to its Web site?

Developing a Web Site

343

Adding Preset Choices for Visitors How do preset choices make it easy for visitors to provide feedback?

To encourage visitors to provide site feedback, you can include various types of response mechanisms on your forms, such as radio buttons and check boxes. A radio button gives visitors the chance to select one, and only one, choice from a list. A check box allows visitors to select multiple items from a list.

Radio Buttons In the next activity, you will add a feedback question that uses radio buttons as preset choices for visitors.

ACTIVITY 12F Add Radio Buttons

Figure 12.10 Key the values shown into the Properties inspector to create a radio button.

1 If necessary, open your MyDiskDesigns.biz site’s Contact Us page (contact.html) in Design view. Click after the text area and press Enter. Make sure the insertion point is left aligned. Key: Which one element on the MyDiskDesigns.biz site do you like the most? Format the text Bold, if necessary. Press Shift + Enter. 2 With the Insert toolbar in Forms view, click Radio Button. Make sure the radio button field is selected. In the Properties inspector, in the box under Radio Button, delete the placeholder text and key: Feedback. Press Tab. In the Checked value box, key: logo (see Figure 12.10). 3 In the form, click after the radio button. Key the label: Logo. Press Shift + Enter. 4 Repeat Steps 2 and 3 to create three more radio buttons. Use the information in Table 12.1 to create the radio buttons. Do not press Shift + Enter after you create the last radio button.

Table 12.1

Radio Button Information

Use this information to create three more radio buttons in the form.

Radio Button text field

Checked value

Label

Feedback

Products_page

Products page

Feedback

Feedback_form

Feedback form

Feedback

Order_form

Order form

5 Your form should appear similar to Figure 12.11. Save your work.

Figure 12.11 Visitors can choose one of the options to provide feedback about the usefulness of the MyDiskDesign.biz site.

344

Chapter 12

Check Boxes MyDiskDesigns.biz would like to gather information from visitors about ways to improve the site. Since the business wants visitors to select all items that apply, it will use check boxes rather than radio buttons. In the next activity, you will add a question with check boxes to the feedback form.

ACTIVITY 12G Add Check Boxes 1 If necessary, open the MyDiskDesigns.biz Contact Us page in Design view. Position the insertion point after the Order form radio button. Press Enter. Key: What can we improve about the MyDiskDesigns.biz site? Select all answers that apply. Press Shift + Enter. 2 With the Insert toolbar in Forms view, click the Checkbox button. In the Properties inspector, in the Checkbox name box, key: Order_ease. Press Tab. In the Checked value box, key: ON (see Figure 12.12).

Figure 12.12 Key the values shown into the Properties inspector to create a check box.

3 In the form, position the insertion point after the check box and key the label: Ease of ordering. Press Shift + Enter to start a new line. 4 Repeat steps 2 and 3 to create three more check boxes. Use the information in Table 12.2 to create the remaining check boxes. Do not press Shift + Enter after you create the last check box.

Table 12.2

Names and Values CheckBox name text field

Checked value

Check box label

Navigation_ease

ON

Ease of navigation

Info_use

ON

Usefulness of information

Contact_us

ON

Ability to contact us

Assign each check box a unique name.

5 Your check boxes should look like Figure 12.13. Save your work.

Figure 12.13 Check boxes allow visitors to select as many choices as they desire.

Developing a Web Site

345

6 Preview the form in a browser. Test all the areas of the form. You should be able to select only one radio button and multiple check boxes (see Figure 12.14). The Submit button will not work until you publish the site. However, you can use the Reset button to erase all your selections and return the form to its original state. Close your browser. Save your work.

Figure 12.14 Visitors can select one radio button and multiple check boxes.

List What are two types of Web site feedback response mechanisms?

Section 12.2 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Feedback forms enable visitors to communicate comments, questions, and suggestions to the site owner.

1. Define feedback form, text area, radio button, check box.

4. Synthesize Why might a small business choose to create a limited e-commerce site?

• Radio buttons allow visitors to choose only one of the options listed. • Check boxes allow visitors to select as many choices from the list as they desire.

346

Chapter 12

2. Summarize the functions of a feedback form. 3. Explain the difference between radio buttons and check boxes.

5. Make a Decision What type of form component would work best for a business that wants to gather data about its visitors’ hobbies?

Apply It! Develop a Form Expand the feedback form to ask for additional information from visitors. Determine the questions you want to ask. Then select the best type of form component to get feedback. Add the information to the MyDiskDesigns.biz site in Dreamweaver.

Security on the Web

S

ecurity is a constant concern for e-commerce sites or sites that transfer sensitive data, such as credit information. Sites that are not secure risk losing customers, reputations, and money.

Threats to Web Sites and Web Site Users Hackers can target Web sites and Web site users by attacking either the server itself or the user’s computer. A server-side attack can expose information about the customers of the Web site. A client-side attack allows the hacker direct access to an individual user’s computer. Firewalls, password schemes, and antivirus programs must constantly evolve to keep up with new threats from hackers and viruses.

Blended Attacks An attack that combines hacking and viruses is called a blended attack. These attacks are carried out by first hacking into a system and then spreading a virus. Fighting blended attacks requires integrated security measures such as firewalls, AV software, intrusion detection software, and packet sniffers. Coordinating the work of these different technologies further protects networks against attacks.

Wireless Threats The wireless trend is creating a new layer of threats. Wireless security may improve Different security measures are being developed to when the industry adopts the new protect wireless technology. Wi-Fi Protected Access (WPA) encryption standard. This standard features strong data-encryption techniques and user-validation measures. These features will make it more difficult for intruders to access a wireless LAN or to use its data.

1. Research Technology Research current or emerging security measures used to protect e-commerce Web sites. Identify the capabilities and limitations of these systems.

2. Analyze Procedures Create a presentation about a corporate or e-commerce site that was hacked or had a virus. Assess the security the site used and the results of the attack.

Developing a Web Site

347

SECTION 12.3 WEB SITE PRIVACY AND SECURITY Focus on Reading Read to Find Out The main focus of this section is to learn more about Web site privacy and security. Read to find out how businesses prevent unauthorized access to data contained on their Web servers.

Main Ideas

Key Terms

Reading Strategy

E-commerce sites work to maintain the privacy of their customers. They must also try to ensure that business conducted over the Internet is secure.

privacy cookie privacy policy security data encryption Secure Socket Layer (SSL) digital certificate

Identify ways to protect privacy and ensure security. Use a table similar to the one below (also available online). Protecting Privacy

Ensuring Security

E-commerce sites depend on information they gather from their customers. To protect this data and maintain customer trust, e-commerce sites spend a lot of time and resources on privacy and security.

Web Site Privacy How do e-commerce sites gather customer data?

Privacy on the Web is the ethical collection and use of visitors’ personal information. Many Web sites use cookies to gather information about visitors.

Cookies A cookie is a small data file that a Web site writes to your hard drive when you visit that site. Cookies contain personal information about you, including your preferences and login/registration information. E-commerce sites use cookies extensively. Some sites use the information they have gathered and stored in cookies to welcome customers by name and to display items similar to those the customer purchased in the past. While cookies can make buying online easier and faster, they also pose a potential privacy threat. Cookies can gather data about visitors without their knowledge, and visitors cannot control the use of this data.

Legal Protection of Privacy You Should Know Web sites that are likely to attract children must make a reasonable effort to identify the visitor’s age.

348

Chapter 12

Some federal and state laws regulate the information a Web site can collect. For example, the Children’s Online Privacy Protection Act (COPPA) regulates the business practices of gathering personal data online from children under age 13. If a Web site knows that a visitor is under age 13, that site must obtain parental consent before it collects any personal data from that visitor. WebDesignDW.glencoe.com

Privacy Policies Many Web sites post privacy policies, or privacy statements. A privacy policy is a written statement that outlines the information the site is collecting and explains how the organization will use that information. Most privacy policies also explain: Activity 12.1 Explore Web Site Privacy Learn more about Web site privacy at WebDesignDW.glencoe.com.

◆ how visitors can control the amount of information they provide to the site. ◆ how customers can review and correct any information the site collects. MyDiskDesigns.biz does not use cookies or gather information about its customers. However, the company wrote a privacy policy in anticipation of adding these features in the near future. In the next activity, you will add a privacy policy to the MyDiskDesigns.biz site.

ACTIVITY 12H Add a Privacy Policy 1 Open your MyDiskDesigns.biz site in Dreamweaver. 2 In the Files panel, open the pages folder, and right-click blank.html. On the shortcut menu, choose Edit>Duplicate (or press Ctrl + D). 3 Right-click the Copy of blank.html file and choose Edit>Rename (or press F2). Rename the file privacy.html. 4 In the Files panel, double-click privacy.html to open the page. Click in the page’s right content area (see Figure 12.15).

Figure 12.15 Click in the page’s right content area.

Insertion point

5 On the Insert toolbar, in Common view, click the Images button. Insert the hdr_privacy.gif file located in the DataFiles\Ch12\Images folder. Save the file in your site’s images folder. Select the page header and, in the Alt box, key: Privacy Policy. In the Title box, delete the text and key: MyDiskDesigns – Privacy Policy. WebDesignDW.glencoe.com

Developing a Web Site

349

6 Position the insertion point under the page header. Choose File>Import>Word Document. Browse to the DataFiles\Ch12\Text folder. Select the privacy.doc file. Click Open. 7 Make sure the text is formatted Georgia, Times New Roman, Times, serif, size 14 pixels. Proofread and spell check (or press Shift + F7) the text. Your page should look similar to 12.16. Save and close the file.

Figure 12.16 The privacy policy outlines how MyDiskDesigns.biz will use customer information.

8 Open the site’s home page in Design view. Click in the white space under the bulleted list in the Why shop with us? box. A large blinking cursor appears to the right of the bulleted list. Press Enter. Key: OUR PRIVACY POLICY. Format the text Bold, 14 pixels. 9 Select the text. In the Properties inspector, move the mouse pointer over the Point to File icon. Click and drag from the icon to the privacy.html file in the Files panel (see Figure 12.17). The highlighted text will now link to the Privacy Policy page.

Figure 12.17 You can use the Point to File icon in the Properties inspector to create links between files.

Point to File

10 Save your file. View the home page in a Web browser and test the links. Close your browser.

Analyze Why do Web sites post privacy policies?

350

Chapter 12

Web Site Security Why is security an important issue for e-commerce Web sites?

Security is the protection of data from unauthorized access, both on the Web server and during transmission over the Web. Web businesses try to prevent intruders from stealing or altering sensitive information contained on their Web servers. Much of the information available on the Web is open to the public. However, as e-commerce continues to develop, an increasing amount of information is sent and received without proper authority. Security audits can identify gaps or problems with security. One type of audit attempts to access information that should not be available without proper authority. Businesses also use other methods to protect sensitive information.

Activity 12.2 Investigate Web Site Security Learn more about data encryption at WebDesignDW.glencoe.com.

Data Encryption One way to protect sensitive information, such as credit card numbers, is data encryption. Data encryption is the process of encoding and decoding information for security. It uses an algorithm, or set of instructions, that alters the appearance of information before it is transmitted. The receiving computer then applies a decryption algorithm to restore the information to its original state. A common data encryption method among Web site publishers is Secure Socket Layer (SSL). SSL uses an encryption algorithm specifically designed to protect data transmitted across the Internet. Because SSL transmits encrypted data, it ensures that only the intended receiver with the proper decryption algorithm can read the information. E-commerce sites, such as the one shown in Figure 12.18, rely heavily on SSL to safeguard financial transactions on their sites.

Figure 12.18 The security padlock in the lower corner of the screen indicates that the site uses SSL to protect transmitted data. How does data encryption provide security to an e-commerce site?

Security padlock

WebDesignDW.glencoe.com

Developing a Web Site

351

Digital Certificates Many Web sites purchase digital certificates to ensure visitors that the site is authentic and to prevent unauthorized access to its online information. A digital certificate is a document issued by an independent certification authority that confirms a business’s credentials. For example, the digital certificate shown in Figure 12.19 confirms that you are visiting the real circuitcity.com, and not another site that is using that name. A digital certificate also confirms that an online business is genuine and not fake. Digital certificates contain encrypted data such as: ◆ Authorized names ◆ The certificate serial number ◆ Expiration dates ◆ A copy of the certificate holder’s public key ◆ The digital signature of the certificate-issuing authority

Figure 12.19 Double-clicking on the SSL padlock allows you to view a site’s digital certificate. Who issued this digital certificate?

Once a business has purchased a digital certificate, it is authorized to display the logo of the company that issued the certificate on its Web site. VeriSign, TRUSTe, and Thawte are examples of businesses that issue digital certificates. Identify What is a commonly used data encryption method among Web site publishers?

Section 12.3 Assessment Reading Summary

What Did You Learn?

Critical Thinking

• Web sites use cookies to gather and store information about their visitors.

1. Define privacy, cookie, privacy policy, security, data encryption, Secure Socket Layer (SSL), digital certificate.

4. Analyze Information Why is legislation necessary to protect Internet users?

• A privacy policy describes the data a site gathers and the way the site owner will use it.

2. Summarize the difference between privacy and security.

• Security is the protection of information from unauthorized access.

352

Chapter 12

3. Explain the importance of privacy policies for e-commerce sites.

5. Make Predictions If counterfeiters found a way to forge digital certificates, what effect would this have on e-commerce?

Apply It! Research Digital Certificates Visit the site of a company that issues digital certificates, such as VeriSign, TRUSTe, and Thawte. Make a checklist of the kinds of information that a business must provide to receive a digital certificate.

SECTION 12.4 WEB SITE ACCESSIBILITY Focus on Reading Read to Find Out Think about all the different people who use the Internet. How do people with different needs and abilities locate and use online information? Read to find out how Web designers can make sites accessible to all users.

Main Ideas

Key Terms

Reading Strategy

An accessible Web site is one that people with different needs and abilities can access and use. Dreamweaver includes tools that can be used to test a site’s accessibility.

accessibility accessibility standards alternative text

Identify four Web page elements that should always include alternative text. Use a graphic organizer similar to the one below (also available online). Alternative Text

➠

➠

➠

➠

Dynamic Content

Graphics and Charts

Images

Multimedia Elements

Making a Web site accessible involves making sure that all types of people can access and use its content. E-commerce sites, in particular, need to create accessible Web sites that can be used by a broad market.

Web Site Accessibility Why is accessibility important to Web design?

Many Web users have visual, hearing, learning, or other disabilities that make it difficult to use the Internet. Accessibility enables individuals with different needs to access and receive online information more efficiently. To make your site accessible, you should try to present information in as many different ways as you can. For example, providing text that describes your site’s audio elements allows people who have difficulty hearing to understand how you are using audio on your page. Voice-enabled Web sites and screen readers can make the Web’s content more accessible to people who have difficulty seeing.

You Should Know As much as 10 percent of all Web users have a disability that limits them from accessing online information effectively.

Accessibility Standards Section 508, a 1998 amendment to the U.S. Rehabilitation Act, states that Federal agencies must make their Web sites accessible to all visitors, including those with disabilities. The amendment provides a number of accessibility standards that can be incorporated into a Web site’s design. Many of these standards encourage designers to make it easier for all users to understand, scan, and respond to elements included in the site. The World Wide Web Consortium’s Web Accessibility Initiative also outlines guidelines and recommendations that support many of the Section 508 standards. WebDesignDW.glencoe.com

Developing a Web Site

353

Making a Site Accessible It is important to think about how you can make your online content accessible to all users. Table 12.3 outlines some techniques for making Web pages accessible. For example, including alternative text is an important part of making a site accessible.

Table 12.3 Follow the guidelines shown in the table to make your Web site accessible. Why is it important to include alternative text in a Web site?

Caution When selecting alternative text, be very specific. For example, using “Blue button” to describe a blue Submit button will not make as much sense to a visitor as the alternative text “Submit button.”

Web Site Accessibility Guidelines Component

Accessibility Feature

Dynamic Content

Provide alternative text and content for information contained in scripts, plug-ins, and applets.

Forms

Make sure individuals can complete and submit forms when using assistive technology.

Frames

Provide text that describes the purpose of each frame. Use the tag so people with browsers that do not support frames can still view the site.<br /> <br /> Graphs and Charts<br /> <br /> Include alternative text that summarizes the graph or chart’s content. Use the longdesc attribute to link to long descriptions, when necessary.<br /> <br /> Images<br /> <br /> Include alternative text or the alt attribute for every image element in a Web site. Use the longdesc attribute, when necessary.<br /> <br /> Links<br /> <br /> Use linking text that is descriptive and makes sense when read out of context.<br /> <br /> Multimedia Elements<br /> <br /> Provide alternative text for all animations, videos, and audio items, along with descriptions of video content and transcripts of presentations. Provide controls to pause and continue playback.<br /> <br /> Page Layout<br /> <br /> Use CSS for page layout but make sure your pages are readable without it.<br /> <br /> Tables<br /> <br /> Use appropriate headers to identify rows and columns. The headers should make sense when read aloud by a screen reader.<br /> <br /> Text/Objects<br /> <br /> Use colors that provide a high contrast between a site’s content and its background.<br /> <br /> Text-Only Page<br /> <br /> If you cannot follow accessibility guidelines, provide a text-only page that contains the same information as your site, but uses only words. Describe What is the purpose of accessibility standards?<br /> <br /> 354<br /> <br /> Chapter 12<br /> <br /> Validating Accessibility in Dreamweaver How can I use Dreamweaver to test a site’s accessibility?<br /> <br /> Dreamweaver provides a built-in validation tool to check the accessibility of a Web site or document. When you run an Accessibility report, Dreamweaver lists accessibility errors and identifies what part of Section 508 the error violates. You can use the Reference panel to learn more about the identified error. In the following activity, you will check the accessibility of the home page in the MyDiskDesigns.biz site.<br /> <br /> ACTIVITY 12I Run an Accessibility Report 1 If necessary, open home page (index.html) of you MyDiskDesigns.biz site in Design view. 2 From the menu bar, choose Site>Reports. In the Reports dialog box, click the Report on drop-down arrow and select Current Document. In the Select reports box, check the Accessibility box. Click the Run button.<br /> <br /> Figure 12.20 The Results panel displays accessibility problems identified in the site.<br /> <br /> 3 A Results panel opens beneath the Properties inspector. This panel displays any accessibility issues that should be addressed as well as a brief description of the problem (see Figure 12.20).<br /> <br /> More Info<br /> <br /> 4 Highlight the first line in the Results panel and click the More Info button in the panel’s left-hand column. A detailed description of the problem appears in the Reference panel. 5 Close the Reference panel (press Shift + F1). Close the Results panel (press F7). Save your work and close the Web site.<br /> <br /> Aside from using Dreamweaver’s validation tool, you can also use a number of Web sites to check your site or pages. Useful Web sites include Watchfire WebXACT, Cynthia Says™ Portal, and the Section 508 Web site. Developing a Web Site<br /> <br /> 355<br /> <br /> Figure 12.21 Use the checklist to test a Web site’s accessibility. Why might an individual need to increase a page’s font size to view its content?<br /> <br /> Accessibility Checklist<br /> <br /> ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑<br /> <br /> Browse pages without images turned on. Check for appropriate ALT text. Turn the volume on the computer off. Check that audio content is available through other sources such as a text equivalent. Change the font size on the browser. Verify the page is still usable with larger font sizes. View the site at different screen resolutions or resize the browser window. Verify that horizontal scrolling is not required. Change the monitor’s color display to grayscale or print out the Web page in grayscale or black and white. Observe whether contrast of text, images, and other elements is adequate. Navigate through the site with keyboard and Tab key. Verify you can access all links and form elements.<br /> <br /> If you have access to only a Web browser, you can use the checklist shown in Figure 12.21 to test some of the standards and guidelines. Ask your teacher for permission before testing the checklist items. After you have completed the checklist, consider what problems you encountered. If testing an outside site, what recommendations could you make to the site’s owner about how to overcome accessibility obstacles? How can you make your own sites more accessible? Explain What is an Accessibility report?<br /> <br /> Section 12.4 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • An accessible Web site is one that people with different needs and abilities can access and use.<br /> <br /> 1. Define accessibility, accessibility standards, alternative text.<br /> <br /> 4. Evaluate Why does the U.S. government require all Federal agencies to create accessible Web sites?<br /> <br /> • Section 508 of the U.S. Rehabilitation Act requires Federal agency Web sites to be accessible to all visitors, including those with disabilities. • Including alternative text is an important part of making a site accessible.<br /> <br /> 356<br /> <br /> Chapter 12<br /> <br /> 2. Summarize What does it mean for a Web site to be accessible to all visitors? 3. Explain Why is it important to include alternative text for a site’s multimedia elements?<br /> <br /> 5. Analyze Accessibility You are creating a Web site that will contain images, video, and dynamic content. What three things can you do to make your site more accessible to all users?<br /> <br /> Apply It! Add Alternative Text Open the Hardware Devices Web site that you created in Unit 1. Add alternative text to the three images included in that site.<br /> <br /> CHAPTER 12<br /> <br /> Reading Review<br /> <br /> SECTION 12.1 Examining an E-commerce Web Site<br /> <br /> SECTION 12.3 Web Site Privacy and Security<br /> <br /> Key Terms<br /> <br /> Key Terms<br /> <br /> cascading style sheets (CSS), 338 internal style sheet, 338 external style sheet, 339<br /> <br /> privacy, 348 cookie, 348 privacy policy, 349 security, 351<br /> <br /> data encryption, 351 Secure Socket Layer (SSL), 351 digital certificate, 352<br /> <br /> Main Ideas ■ Many e-commerce sites mainly exist to provide an<br /> <br /> Main Ideas<br /> <br /> online presence for the company and to showcase that company’s products. ■ You can use cascading style sheets to format an entire Web site. ■ There are two main types of style sheets: internal and external. ■ External style sheets make it easy to change a site’s formatting.<br /> <br /> ■ Many Web sites use cookies to gather and store<br /> <br /> SECTION 12.2 Using Feedback Forms Key Terms feedback form, 342 text area, 342 radio button, 344 check box, 344<br /> <br /> Main Ideas ■ Web sites use feedback forms to gather information ■<br /> <br /> ■<br /> <br /> ■ ■<br /> <br /> from visitors. Feedback forms enable visitors to communicate comments, questions, and suggestions to the site owner. Forms provide various ways for visitors to respond, including text areas, text boxes, radio buttons, and check boxes. Radio buttons allow visitors to choose only one of the options listed. Check boxes allow visitors to select as many choices from the list as they desire.<br /> <br /> ■ ■<br /> <br /> ■<br /> <br /> ■<br /> <br /> information about their visitors. A privacy policy describes the information the site gathers and the way the site owner will use it. Security is the protection of data from unauthorized access, both on the Web server and during transmission over the Web. Data encryption alters the appearance of information before transmission so that only the intended receiver with the proper decryption program can restore it to readable form. Digital certificates confirm the validity of online businesses.<br /> <br /> SECTION 12.4 Web Site Accessibility Key Terms accessibility, 353 accessibility standards, 353 alternative text, 354<br /> <br /> Main Ideas ■ An accessible Web site is one that people with<br /> <br /> different needs and abilities can access and use. ■ Section 508 of the U.S. Rehabilitation Act requires Federal agency Web sites to be accessible to all visitors, including those with disabilities. ■ Including alternative text is an important part of making a site accessible. ■ Dreamweaver includes tools that can be used to test a site’s accessibility. Developing a Web Site<br /> <br /> 357<br /> <br /> CHAPTER 12<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ Use Diagrams to Help Understanding Review a section in this chapter that you found difficult. Write down the main idea. (Often, the section heading will be the main idea.) On a note pad, write down any facts, explanations, or examples you find in the section. Start at the main idea and draw arrows to the information that directly supports it. Then draw arrows from these examples to any information that supports them.<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers. 13. Summarize What information is available when a user double-clicks the padlock icon in the lower-right corner of a Web site?<br /> <br /> Digital Certificate<br /> <br /> Reviewing Key Terms 1. What is the purpose of a cascading style sheet? 2. What purpose does a feedback form serve on an e-commerce site? 3. Rewrite this statement to make it true: Radio buttons allow visitors to select as many choices from a list as they desire. 4. What is the name of a small data file that a Web site writes to a person’s hard drive when he or she visits the site? 5. What does a digital certificate tell a visitor about a Web site? 6. How can e-commerce sites benefit from Web accessibility?<br /> <br /> Understanding Main Ideas<br /> <br /> 15. Make Recommendations You are part of a Web site development team hired to develop an e-commerce site. Your client sells custom-designed calendars to individuals and businesses. In addition to the home page, what pages would you recommend for this site? Use a storyboard like the one below to show the pages you would add. Explain your reasoning. Home Page<br /> <br /> ➠<br /> <br /> ➠<br /> <br /> Chapter 12<br /> <br /> Text Area<br /> <br /> Critical Thinking<br /> <br /> ➠<br /> <br /> 358<br /> <br /> Text Box<br /> <br /> ➠<br /> <br /> 7. Explain how you can use an external style sheet to format a Web site. 8. Identify the types of information that are typically included in a Web site’s privacy policy. 9. Evaluate how cookies can present a potential security concern. 10. Analyze the reasons why solid Web site security is important for e-commerce businesses. 11. Explain how data encryption helps ensure Web site security. 12. List five ways in which accessibility can be designed into Web pages.<br /> <br /> 14. Distinguish between a text box and a text area.<br /> <br /> 16. Make Predictions As the amount of business conducted online continues to increase, how important will Web site privacy and security issues be in the future?<br /> <br /> Review and Assessment<br /> <br /> 17. Evaluate Information The marketing director would like to gather information from site visitors, including visitor’s name, visitor’s e-mail address, visitor’s age range, products used (assume the company sells six different products), and suggestions for product improvements. What form features would you use for each of these pieces of information? 18. Analyze How does Web site privacy and security give visitors confidence to make online purchases? 19. Make Decisions Assume you are responsible for creating a new privacy policy for the MyDiskDesigns.biz Web site. What elements would you keep, and what would you change? Explain the reasons behind the changes you want to make. Create a table similar to the one below to record the elements for the new policy. Element<br /> <br /> Keep/Change<br /> <br /> Reason<br /> <br /> Charts & Graphs Read the paragraph and chart below and then answer the question.<br /> <br /> Security is a constant concern for sites that transfer sensitive data, such as credit information. The chart below shows the number of Internet security attacks in different countries during one year. Countries Suffering Digital Attacks 35,000 Number of Attacks<br /> <br /> CHAPTER 12<br /> <br /> United States<br /> <br /> 30,000<br /> <br /> United Kingdom<br /> <br /> 25,000<br /> <br /> Denmark<br /> <br /> 20,000<br /> <br /> China<br /> <br /> 15,000<br /> <br /> Brazil<br /> <br /> 10,000 5,000 0<br /> <br /> According to the chart, which of the following statements is true?  Brazil and Denmark suffered the fewest attacks.  The United States suffered three times as many attacks as Brazil.  Brazil suffered more than 5,000 attacks.  The United States and the United Kingdom suffered the most attacks.<br /> <br /> You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart of general Dreamwaver editing commands shown below.<br /> <br /> 20.<br /> <br /> WebDesignDW.glencoe.com Study with PowerTeach<br /> <br /> +<br /> <br /> Result<br /> <br /> 21.<br /> <br /> +<br /> <br /> Result<br /> <br /> 22.<br /> <br /> +<br /> <br /> Result<br /> <br /> Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 12.<br /> <br /> Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 12.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Developing a Web Site<br /> <br /> 359<br /> <br /> CHAPTER 12<br /> <br /> Activities<br /> <br /> 1. MAKING CONNECTIONS Social Studies—Debate an Issue Find three examples of American companies that use the Internet to conduct global business. Research the following questions: ◆ How have these companies benefited from the Internet? Be sure to review the history of the company before the Internet became available for business. ◆ What economic impact do these businesses have on the countries where they operate? ◆ What impact do they have on the U.S. economy? Business Using Internet<br /> <br /> ➠ Impact of Internet on Business<br /> <br /> Impact on U.S. Economy<br /> <br /> ➠<br /> <br /> ➠<br /> <br /> Use the information you find to argue for or against the following statement: The Internet has made it possible for international companies to improve the lives of people in developing countries. Use a Chain of Events flow chart to document your findings.<br /> <br /> Impact on Global Economy<br /> <br /> 2. STANDARDS AT WORK Students understand the ethical, cultural, and societal issues related to technology. (NETS-S 2)<br /> <br /> Evaluate Home Pages Select three different e-commerce Web sites in one of the following industries: clothing, entertainment, computer equipment, or travel. Evaluate the home pages of each company. Rate each company’s home page based on the following factors: 1. 2. 3. 4.<br /> <br /> Ease of navigating to product and service information Ease of locating contact information Prominence of special offers Attractiveness of home page<br /> <br /> Rate each home page as poor, good, or excellent. Create a chart that contains each home page’s URL, its rating, and your explanation for why it received this rating. Then, evaluate each site’s security features. Identify which security features (if any) are present on each site. Are any SSL protected? Do you see any patterns from those sites that are protected versus those that are not? Share your findings with a classmate in a brief report. 360<br /> <br /> Chapter 12<br /> <br /> CHAPTER 12<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Plan a Web Site A local CD store wants to redo its Web site. The existing site has a random navigation structure. In researching the site’s needs, the team learns that people are most likely to search for CDs in one of three ways: ◆ By artist ◆ By CD title ◆ By musical category The store’s owner wants to further update the Web site by including a space where customers can rate CDs and submit requests for hard-to-find items. The store owner also wants to build a list of contacts and to get feedback on the company’s products. Divide the team into two groups. One group should revise the Web site’s navigation structure. Research other Web sites that sell CDs to see how they structure their sites. The other group should determine what additional features need to be added to the site. Research other Web sites that sell CDs to see what features they offer. Determine what privacy and security features and information need to be incorporated into the site. Then, create a storyboard for the revised site. The storyboard should reflect both the store owner’s goals and the team’s research.<br /> <br /> 4. CHALLENGE YOURSELF Research Web Site Security The local florist has an e-commerce site and would like to add a digital certificate to the site to ensure protection for its customer order form and e-mail. The florist has asked you to research how the digital certificate would work, and how to obtain a demonstration version to try out the process. Use the Internet or other sources to locate three companies that issue digital certificates. Prepare a table like the one below that shows the requirements and costs to obtain digital certificates from each company and the benefits each company offers. Then, locate a company that offers a free download version for personal use (which may be one of the three companies you have researched). With your teacher’s permission, download the demonstration to see how it works. Based on your research, recommend a digital certificate company to the florist. Explain the reasoning behind your recommendation.<br /> <br /> DIGITAL CERTIFICATE<br /> <br /> FEATURES<br /> <br /> REQUIREMENTS<br /> <br /> COSTS<br /> <br /> Company #1 Company #2 Company #3 Developing a Web Site<br /> <br /> 361<br /> <br /> CHAPTER 12<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Create an Order Form You design and produce mouse pads. Create an order form for your Web site’s Products page.  Create a new Web site in Dreamweaver. You can use the Language Club template or you can create a new basic site.  Create an Order Form page that contains a form similar to the one below.  Save your page. Preview the page in a browser and test to see that the form works as intended. Make changes as needed.<br /> <br /> 2. Add a Privacy Policy <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 362<br /> <br /> Add a privacy policy to your mouse pad Web site. Locate several privacy policies at ecommerce sites on the Web. Identify the key elements to include in a privacy policy. Create a Privacy Policy page. If necessary, you can copy the MyDiskDesigns.biz Privacy Policy page and paste the page into the Web site you created in You Try It Skills Studio #1. Format the text to make it consistent with the font and sizes used on your Web site. If you have copied the text, modify the content as needed to reflect the mouse pad company. Add a link to the Order Form page that you created in You Try It Skills Studio #1 that directs visitors to the privacy policy. Save your work. Preview your site in a browser. Test the link to the Privacy Policy page.<br /> <br /> Chapter 12<br /> <br /> CHAPTER 12<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the directions to complete each project.<br /> <br /> 1. Create a Feedback Form Outdoor Excursions, a retailer that sells camping equipment, has teamed up with a travel agency to offer exciting camping adventures for families. During the initial planning phase of this venture, Outdoor Excursions wants to build its customer list and to get feedback about the type of trips people most want to take. Create a feedback form in Dreamweaver. This form will be used to gather relevant contact information, to find out what trips will be most popular, and to help determine the optimum length for these trips. Possible trips are listed in the table below.<br /> <br /> POSSIBLE CAMPING TRIPS Domestic Trips<br /> <br /> International Trips<br /> <br /> Badlands National Park<br /> <br /> Argentina Tour<br /> <br /> Cape Cod National Seashore<br /> <br /> Australia Tour<br /> <br /> Everglades National Park<br /> <br /> Kenya Tour<br /> <br /> Grand Canyon National Park<br /> <br /> Brazil Tour<br /> <br /> Hawaii Volcanoes National Park<br /> <br /> Canada Tour<br /> <br /> Indiana Dunes National Lakeshore<br /> <br /> Germany Tour<br /> <br /> 2. Plan a Web Site with Feedback You are a member of a band called The Speckled Band. The band’s flyer reads: “We play live music for parties, weddings, and other events. If cost is an issue, we also offer a oneperson DJ service. You choose the type of music you want played. We work in two-hour time blocks at $250 per hour, plus travel costs. To schedule your event, contact us at 555-5555.” The band wants to develop a Web site that provides information about its services and gathers feedback about the range of services it should offer. Create a site in Dreamweaver for the band. The site will have two pages: a home page and a feedback page. Use the information provided in the flyer to create the home page. For the feedback page, write ten short “what we do” sentences that describe services the band does or could offer. Create a feedback form asking each visitor to rate these services as extremely interesting, very interesting, of neutral interest, of little interest, or of no interest. Use option buttons for each of the five ratings. Add basic contact information to the form and a text area for additional feedback.<br /> <br /> Developing a Web Site<br /> <br /> 363<br /> <br /> CHAPTER<br /> <br /> 13<br /> <br /> Adding Web Site Functionality<br /> <br /> YOU WILL LEARN TO… Section 13.1 Identify the limitations of hit counters Monitor Web site traffic Describe the information gathered by tracking systems Identify database interface pages Section 13.2 Identify Web site search features Add named anchors to a Web page Section 13.3 Identify tools used to share news Identify tools used to collect visitor information Create a guest book Section 13.4 Explain how frames work Identify guidelines for frames pages Create a framesbased page Use frames on a site<br /> <br /> 364<br /> <br /> Chapter 13<br /> <br /> WHY IT MATTERS ................................................. When selling a car, sellers emphasize the car’s best features. These features transform a basic mode of transportation into a vehicle that people want to drive. Adding features can also turn a basic Web site into something much more interesting and useful. Guest books, search capabilities, and databases help visitors interact with the site while also collecting useful information for site owners. Books, such as textbooks, include features that make them more user-friendly. For example, an index helps you locate topics that you want to find. What other features increase a book’s usability? What features do Web sites have to make them more user-friendly? How do these features compare to those found in books?<br /> <br /> CHAPTER<br /> <br /> 13<br /> <br /> WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 13.1 Explore Tracking Software ....... 13.2 Identify Search Features .......... 13.3 Write a Proposal ........................ 13.4 Evaluate Frames ........................<br /> <br /> 369 374 379 384<br /> <br /> You Try It Activities 13A Add Named Anchors .................. 373 13B Create a Guest Book .................. 377 13C Use Frames on a Site ................ 382 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................<br /> <br /> 388 388 389 389<br /> <br /> You Try It Skills Studio Add a Guest Book ................................ 390 Create a Frames-Based Page ............. 390 Web Design Projects Create Named Anchors for a Résumé................................................. 391 Create an Investing for Teens Web Site................................................ 391<br /> <br /> IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects<br /> <br /> ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments<br /> <br /> BEFORE YOU READ Organize Information If you were told to remember the names of everyone in your class on the first day, you would probably find the task difficult. However, what if you grouped people in ways that made it easier? You could remember the names of one row at a time. Grouping information also helps when you have to remember material that you have read. When you take notes, think about how topics relate to each other. Organizing them as a group makes them easier to remember.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Adding Web Site Functionality<br /> <br /> 365<br /> <br /> SECTION 13.1 TRACKING VISITORS AND COLLECTING INFORMATION Focus on Reading Read to Find Out In this section, you will learn how organizations measure the effectiveness of their Web sites. Read to find out how Web sites track visitors and use databases to store and process data.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Hit counters and tracking software tally the number of visitors to a Web site. Databases collect, store, and organize information gathered from a site’s visitors.<br /> <br /> hit counter tracking software database record database driven database interface page<br /> <br /> Identify the information provided by hit counters and tracking software. Use a table like the one below (also available online). Information Provided by Hit Counters<br /> <br /> Information Provided by Tracking Software<br /> <br /> Organizations that conduct business online need ways to measure the success of their efforts. For e-commerce sites, the total amount sold online is a good indicator of success. However, organizations can measure their site’s effectiveness in other ways as well.<br /> <br /> Tracking a Web Site’s Visitors How do Web developers measure Web traffic?<br /> <br /> Web developers often use dynamic components to keep track of Web site traffic. Hit counters, page views, and unique visits are three types of dynamic components that are used to track a site’s visitors.<br /> <br /> Hit Counters, Page Views, and Unique Visits You Should Know People who use search engines often jump directly to the page they want. This visit will not count as a hit unless a hit counter exists on the exact page the visitor downloads.<br /> <br /> 366<br /> <br /> Chapter 13<br /> <br /> A hit counter records the number of times that a Web browser requests a file from the Web server (one request equals one “hit”). A file is requested when a user first accesses a page, as well as when a graphic or other element is displayed on a page. Web developers may incorporate either public or hidden hit counters on any of a site’s pages. Public hit counters show the hit tally to anyone who views the page. Hidden hit counters show the hit tally only to people with access to the site’s private data, such as the Webmaster or Web site administrator. Instead of using a hit counter, many companies use page views and unique visits to measure a site’s traffic. Hit counters, page views, and unique visits are compared in Table 13.1 on page 367.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Table 13.1<br /> <br /> Dynamic Tracking Components Tracker<br /> <br /> Function<br /> <br /> Example<br /> <br /> Pro/Con<br /> <br /> Hit Counter<br /> <br /> Records how often a file is accessed from a Web server. Each file on a Web page counts as one hit.<br /> <br /> If an individual views a Web page that contains three graphics, this would count as four hits: one hit for the Web page itself, and three hits for each graphic.<br /> <br /> Does not measure: • length of visit • whether visitor goes to other site pages • whether visitor has previously accessed the site<br /> <br /> Page View<br /> <br /> Records how many times a Web page was visited.<br /> <br /> If an individual views a Web page that contains three graphics, this would count as one page view.<br /> <br /> Useful for determining how many people visit certain pages.<br /> <br /> Unique Visit<br /> <br /> Records how many people visit a site overall.<br /> <br /> If 100 people visit a site, this would count as 100 unique visits even if each person visited every page in the site.<br /> <br /> Useful for determining how many people visit a site in total.<br /> <br /> Hit counters, page views, and unique visits track different types of hits. Why are page views and unique visits more accurate ways to track visitors than a hit counter?<br /> <br /> Tracking Software Many sites use tracking software to gather information about the site’s users. Tracking software records information such as: ◆ What country visitors are from ◆ How they navigated to your site ◆ What browser they used Tracking software can help individuals and companies decide where and how to advertise their sites. Tracking software can also help you identify the most popular pages on your Web site. You can then improve the site’s structure by making these pages readily available in the site’s navigation.<br /> <br /> Activity 13.1 Explore Tracking Software Learn more about tracking software at WebDesignDW.glencoe.com.<br /> <br /> Hosting Company Statistics Hosting companies rent space on their Web servers to other businesses, organizations, and individuals to use for their Web sites. Most hosting companies provide Web statistic software as part of a hosting package. The amount of information the statistics provide depends on the software used. Most statistics show the number of visitors to a site in a given time range, their country of origin, what Web pages were viewed and for how long, as well as what Web browsers and operating systems the visitors used to access a site. Common statistics software includes WebSTAT, AWStats, and Urchin. Identify What information does tracking software record?<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Adding Web Site Functionality<br /> <br /> 367<br /> <br /> Connecting Web Sites and Databases How can I use a database to collect information? You Should Know MySQL (pronounced “my ess cue el”) is an open-source database primarily used for Web applications. MySQL databases are easily accessed through programming languages such as PHP, Perl, Java, and C++.<br /> <br /> When visitors place online orders or provide feedback, the company must have a way to collect, organize, and store this information. Many companies use databases to maintain the information they receive.<br /> <br /> Using Databases A database is a collection of information that is organized by fields and records. A field is one piece of information, such as a first name or last name. A record is a group of related fields that contains the information gathered about a particular person or item. For example, a record could include fields for a product’s item number, type, quantity, and price. Using fields and records makes it easier to retrieve and use stored information.<br /> <br /> Linking to a Database Figure 13.1<br /> <br /> You can link your Web site to databases created with a variety of applications, such as Microsoft Access and MySQL. You must publish the database with your Web site to enable visitors to access its information. Once you make the database accessible, you can create your Web pages to either display information from the connected database or to request information from visitors that is then stored in the database (see Figure 13.1).<br /> <br /> A database can send information to users or receive information from users. How does a database organize information?<br /> <br /> Database<br /> <br /> Database sends information to users.<br /> <br /> Users submit information to the database.<br /> <br /> Static versus Dynamic Pages Web site developers often use the terms “static” and “dynamic” to distinguish between pages that contain fixed information and those capable of change. On a static page, the information is embedded in the HTML code that makes up the page. It cannot change without changing the code. Dynamic pages, on the other hand, are shells that contain changing information. The information that changes comes from an external source. When the external source is a database, the Web site is said to be database driven.<br /> <br /> Types of Dynamic Pages A database interface page is a dynamic Web page that connects to and interacts with a database. There are two important types of database interface pages: ◆ An order form is a database interface page that allows visitors to send order information to a database. ◆ A results page is a database interface page that records orders that have been placed. Dreamweaver provides options and settings for defining database connections when you define a Web site. Although the database information comes from an external source, you can format the information displayed in these forms to reflect your site’s design. 368<br /> <br /> Chapter 13<br /> <br /> Before it can interact with a database, an order form must be saved as an active server page (.asp), a java server page (.jsp), a cold fusion page (.cfm), or a PHP: Hypertext Preprocessor page (.php). The Web server software will dictate the scripting language used to define a database connection. For example, Microsoft typically uses .asp with Microsoft server software, Linux uses the .php extension, Sun uses .jsp, and ColdFusion server software uses .cfm language. The page shown in Figure 13.2 has a .jsp extension. Some sites contain dynamic pages so that they can be updated easily. This page interacts with a database that stores and updates information about new products.<br /> <br /> You Should Know Restricting access to the results page helps to keep personal customer information secure.<br /> <br /> Figure 13.2 A file must be saved as a dynamic page to interact with a database. What function does this page perform in the Web site?<br /> <br /> Identify What are the two main reasons for connecting a database to a Web site?<br /> <br /> Section 13.1 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Hit counters, page views, and unique visits are used to track a site’s visitors.<br /> <br /> 1. Define hit counter, tracking software, database, record, database driven, database interface page.<br /> <br /> 4. Draw Conclusions What information can a tracking system provide to help you decide where to place banner ads?<br /> <br /> 2. Summarize the advantages of using tracking systems to learn about the visitors to a Web site.<br /> <br /> 5. Make Decisions You are the Webmaster for a teen entertainment site. Will you set up the results page for your order forms as public or private? Why?<br /> <br /> • Tracking software can identify the countries where visitors live, how they navigated to your site, and the browsers they used. • Pages can be made static or dynamic. Dynamic pages rely on database driven information.<br /> <br /> 3. Explain the difference between static and dynamic pages.<br /> <br /> Apply It! Explore Tracking Software Conduct Internet research to locate a tracking software application. Search the site to learn what information the tracking software will gather. Categorize the information in list form.<br /> <br /> Adding Web Site Functionality<br /> <br /> 369<br /> <br /> Starting an E-business<br /> <br /> L<br /> <br /> ike any business, a commercial Web site has to attract customers. A good business plan can help attract visitors.<br /> <br /> Start with a Plan A business plan should outline the company’s mission and issues for running the business, including: ◆<br /> <br /> The product or service you sell<br /> <br /> ◆<br /> <br /> The type of customers you expect<br /> <br /> ◆<br /> <br /> The methods you will use to advertise, market, and sell<br /> <br /> ◆<br /> <br /> The expenses you expect to have and the income you expect to receive<br /> <br /> Business Functions Remember that a Web site should provide many of the same functions you find in a traditional store, such as ways to: ◆<br /> <br /> Advertise, like a newspaper or radio ad<br /> <br /> ◆<br /> <br /> Market, like a printed brochure or coupon<br /> <br /> ◆<br /> <br /> Browse, like a printed catalog or a store’s shelves<br /> <br /> ◆<br /> <br /> Order, like a customer service counter or toll-free number<br /> <br /> ◆<br /> <br /> Pay, like a check-out counter<br /> <br /> If your site’s message is clear and the design is appealing, potential customers are more likely to become real customers.<br /> <br /> Your Web site’s main mission is to deliver your company’s message to potential clients or customers. Create your site’s marketing message as if you were a first-time customer. Your site should clearly describe the products or services you offer, prices and availability, ordering and shipping instructions, and so on. Most important, the site should make visitors feel there is an advantage to doing business with you.<br /> <br /> 2. Create a Business Plan Suppose you have 1. Evaluate Create a checklist to evaluate how well started a business that provides a service, such a commercial Web site works as a marketing tool. as gardening or photography. Create a plan that Compile your checklist with the rest of the class. explains how you would use a Web site to market Then use this group checklist to evaluate three that business. Web sites. 370<br /> <br /> Chapter 13<br /> <br /> SECTION 13.2 MAKING INFORMATION EASY TO FIND Focus on Reading Read to Find Out The main purpose of this section is to identify the tools Web developers use to make a site’s information easy to find. As you read, note how each feature makes a site more user-friendly.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Web developers use tools such as site maps, tables of contents, and bookmarks to help visitors locate information on the site. Site search components enable visitors to find specific words or phrases on the site.<br /> <br /> site map table of contents search capabilities frequently asked questions (FAQ) named anchor<br /> <br /> Identify four ways to make information easy to find on a Web site. Use a web diagram like the one below (also available online).<br /> <br /> Ways to Make Information Easy to Find<br /> <br /> The Web sites you have created in this textbook do not have many pages. Visitors to these sites will be able to locate the information they need by simply clicking the links on the navigation bar. However, Web sites that contain hundreds or thousands of pages often add features that make information easier for visitors to locate. Such features include site maps, tables of contents, frequently asked questions pages, and search capabilities.<br /> <br /> Search Features How can I make it easier for users to find information on my site?<br /> <br /> Tables of contents and indexes make it easy for readers to locate the information contained in printed magazines and books. Large Web sites often contain similar features that individuals can use to locate online information.<br /> <br /> Site Maps A site map organizes a Web site’s pages into logical categories. Visitors can target their search by identifying the categories that may contain the information they need. The Web developer must carefully consider how to organize the pages so the groupings make sense to visitors. While Dreamweaver does not have tools to generate a site map that visitors can see, you can download extensions from the Macromedia Exchange site to incorporate this functionality. Many extensions require dynamic pages (those with file extensions ending in .php, .asp, or .cfm rather than .html) in order to function properly. WebDesignDW.glencoe.com<br /> <br /> Adding Web Site Functionality<br /> <br /> 371<br /> <br /> Tables of Contents A table of contents on a Web site functions in much the same way as a table of contents in a book. It allows visitors to see the contents and organization of the site in one glance. As shown in Figure 13.3, a table of contents generally lists each main page on the site. Subpage lists then appear beneath these main pages. This makes it easy for visitors to jump quickly to the page that they want to see. A link bar is often called a table of contents because it provides an overview of the site’s content.<br /> <br /> Figure 13.3 Each item in the table of contents links to a page on the Web site. Why is a table of contents a good way to access books published online?<br /> <br /> Search Capabilities<br /> <br /> Activity 13.2 Identify Search Features Learn more about search features at WebDesignDW.glencoe.com.<br /> <br /> Most e-commerce sites, portals, and corporate Web sites use search capabilities to help visitors quickly find information and products. It would be very time-consuming to try to find specific information, such as a particular word or phrase, if search capabilities on such sites did not exist. Search functionality is a dynamic feature that often requires adding scripting language to a Web page so it can work with a Web server. Most companies and businesses rely on programmers to integrate proprietary search capabilities within a Web site. Others rely on search engine technology from companies such as Yahoo and Google. For instance, the Google search box shown in Figure 13.3 allows visitors to search within the selected Web site for a specific topic. The search box also gives visitors the option of searching the entire Web. In either case, once a search engine is in place, the pages of a Web site must be indexed in order to show up in search results. Describe What is the difference between a site map and a table of contents?<br /> <br /> 372<br /> <br /> Chapter 13<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Frequently Asked Questions Pages How can I use named anchors if my site has long pages?<br /> <br /> A frequently asked questions (FAQ) page answers common questions that visitors are likely to have about the site. Many FAQ pages include named anchors. A named anchor is a hyperlink to a specific place in another document or to a specific place within a document. Intrapage (within the same page) named anchors are useful when you have long pages, or when you want to jump from a central list of links to multiple locations on the page.<br /> <br /> ACTIVITY 13A Add Named Anchors 1 In Dreamweaver, open your MyDiskDesigns.biz faq.html page in Design view. Position the insertion point before the text How can I get a custom design made? Make sure you click before the question that does NOT have a bullet point in front of it. 2 With the Insert toolbar in Common view, click the Named Anchor button (or press Ctrl + Alt + A). In the Named Anchor dialog box, in the Anchor name box, key: custom. Click OK. An anchor icon appears in front of the sentence (see Figure 13.4).<br /> <br /> Troubleshooting If you do not see the anchor icon after you complete Step 2, choose View>Visual Aids> Invisible Elements.<br /> <br /> 3 At the top of the page, select the bulleted question How can I get a custom design made? In the Properties inspector, in the Link box, key: #custom. Press Tab. Deselect the question. Your screen should look similar to Figure 13.4.<br /> <br /> Figure 13.4 Each question in the list will link to a named anchor.<br /> <br /> Anchor<br /> <br /> Table 13.2 Make your named anchor names logical and unique.<br /> <br /> 4 Repeat Steps 1 through 3 to create named anchors for the remaining four questions on the FAQ page. Use the information in Table 13.2 to complete the steps.<br /> <br /> Question<br /> <br /> Anchor Name<br /> <br /> Link<br /> <br /> What if the design I want is temporarily sold out?<br /> <br /> soldout<br /> <br /> #soldout<br /> <br /> How can I use my blank DVDs and CDRs?<br /> <br /> use<br /> <br /> #use<br /> <br /> What is the return policy?<br /> <br /> policy<br /> <br /> #policy<br /> <br /> How long will it take to get my disks?<br /> <br /> disks<br /> <br /> #disks<br /> <br /> Adding Web Site Functionality<br /> <br /> 373<br /> <br /> 5 Save your work. Test the named anchors in a Web browser. When you click the last question in the bulleted list, you should go to the end of the page, as shown in Figure 13.5.<br /> <br /> Figure 13.5 The hyperlink connects the question at the top of the page to the answer.<br /> <br /> Define What is a named anchor?<br /> <br /> Section 13.2 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • A site map enables visitors to search for information by category.<br /> <br /> 1. Define site map, table of contents, search capabilities, frequently asked questions (FAQ), named anchor.<br /> <br /> 4. Analyze What types of information should be easy to locate on an e-commerce site? Explain your reasoning.<br /> <br /> 2. Explain why it is useful to include search features on a large Web site.<br /> <br /> 5. Evaluate Identify two Web sites in which you have used a search form. Explain how this search feature helped you locate information on the site.<br /> <br /> • Search capabilities allow visitors to access site information by searching for a word or phrase. • A FAQ page provides answers to common questions about the site. • Named anchors enable visitors to jump to marked locations within a page or in a separate document.<br /> <br /> 374<br /> <br /> Chapter 13<br /> <br /> 3. Summarize why Web sites post FAQ pages.<br /> <br /> Apply It! Identify Search Features Visit the Web site of your local newspaper or the site of an “e-zine” that you like to read. Which of the features described in this section are available? Write a paragraph describing each feature.<br /> <br /> SECTION 13.3 BUILDING A SENSE OF COMMUNITY Focus on Reading Read to Find Out This section explains the tools that are often used to communicate with a Web site’s visitors. As you read, focus on the methods Web sites use to motivate visitors to return to their sites.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Web sites use newsletters, blogs, and syndicated content to share information with visitors. Bulletin boards and guest books allow visitors to share information with other online users.<br /> <br /> newsletter blog RSS bulletin board guest book<br /> <br /> Identify five tools that a Web site can use to either share or receive information. Use a table like the one below (also available online). Share Information<br /> <br /> Receive Information<br /> <br /> The Web is an important online community. When you create a Web site, you want to include features that will help your visitors feel that your site is part of this community. Providing communication tools such as newsletters, blogs, syndicated content, bulletin boards, and guest books can help build a sense of community that will keep visitors coming back to your site.<br /> <br /> Sharing Information with Visitors What tools can I use to share information with my site’s visitors?<br /> <br /> The growing popularity of communication tools has led to their adoption by many businesses and companies as a way to share news and information with Web visitors. Tools such as newsletters, Web blogs, and syndicated content allow you to share information with your site’s visitors. When deciding which tool to use, you should consider how you want to distribute your information and how often you plan to update your news.<br /> <br /> Newsletters Many Web sites use an e-mail newsletter to share news, information, and ideas about a particular topic. Newsletters provide a convenient method to stay in touch with users and to motivate them to visit a site again. Visitors subscribe to a newsletter by completing an online form. Newsletters are usually published either monthly or quarterly. When creating a newsletter, you must determine how you will send it to users. You can use an e-mail program to send out your newsletter or you can purchase specialized software to help you distribute it. Some companies, such as Constant Contact, provide newsletter distribution and management through a Web-based interface.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Content When using a newsletter, you need to consider how you will manage subscribers who change their e-mail address or cancel their subscription. Linking your subscription form to an online database can help subscribers to update their information when necessary.<br /> <br /> Adding Web Site Functionality<br /> <br /> 375<br /> <br /> Blogs<br /> <br /> Jargon The abbreviation RSS can also stand for Rich Site Summary or RDF (Resource Description Framework) Site Summary. All of these terms refer to content syndication.<br /> <br /> A blog, short for Web log, is a public journal in which one or more individuals share their thoughts on a variety of subjects. While a newsletter is sent to visitors, a blog is a Web page that visitors access to read what is posted. Most blogs are updated on a daily basis. To create a blog, users need specialized publishing software they can install on their computers or control through an online blogging service. Popular online blogging services include Blogger™, TypePad™, and Movable Type™. These services provide a number of blog publishing options as well as templates that users can modify to match their site’s design.<br /> <br /> Syndicated Content (RSS) An increasingly popular way to build a following for a Web site is through content syndication or RSS feeds. The acronym RSS is short for Really Simple Syndication. Syndicated content can include items such as news feeds, headlines, blog entries, company news, and event listings. Once it is created, syndicated Web content can be published on a number of different Web sites. Anytime the RSS feed is updated, the new information shows up on any site that syndicates the content. In Figure 13.6, the My Yahoo!® Web site allows users to include RSS feeds from thousands of content sources to create a highly customizable and personal page.<br /> <br /> Figure 13.6 Yahoo allows individuals to use RSS feeds to create customized Web pages. What does the abbreviation RSS stand for?<br /> <br /> To create an RSS feed, you need to save your content in a specialized XML format that can be read by RSS aware programs called news aggregators or readers. Some Web browsers have built-in RSS news aggregators. RSS readers can also be downloaded from the Web. Popular RSS readers include WinRSS and FeedDemon. Describe What is a blog?<br /> <br /> 376<br /> <br /> Chapter 13<br /> <br /> Receiving Information from Visitors What tools can I use to receive information from my site’s visitors?<br /> <br /> Tools such as bulletin boards and guest books allow you to receive information from your site’s visitors.<br /> <br /> Bulletin Boards A bulletin board is where people can exchange messages with other online users. Users can post items such as questions, photos, news, thoughts, or artwork for others to discuss or comment on. Most bulletin boards require users to register before they can read or respond to posts. Different Web sites use bulletin boards in different ways: ◆ Software companies sometimes use bulletin boards to provide technical support for their customers. ◆ Schools use bulletin boards to allow students to post questions to teachers or other students.<br /> <br /> Caution When collecting information from visitors, you should always consider how to protect the privacy and safety of the people who are submitting information.<br /> <br /> Guest Books A guest book gives visitors a place to record their experiences with the Web site. Unlike a feedback form, a guest book is a public record of comments made by the site’s visitors. Many guest books gather visitors’ names, e-mail addresses, and comments. This information is then stored in a log file that other visitors can read.<br /> <br /> ACTIVITY 13B Create a Guest Book 1 In your MyDiskDesigns.biz Web site, in the Files panel, right-click blank.html. On the shortcut menu, choose Edit>Duplicate. Right-click the Copy of blank.html file and choose Edit>Rename. Rename the file: guestbook.html. Open the guestbook.html page. In the Title box, delete the text and key: MyDiskDesigns – Guest Book. 2 Click in the header graphic area (top-right box). With the Insert toolbar in Common view, click the Images button. Browse to the DataFiles\Ch13\Images folder. Select the hdr_guestbook.gif file and save it in your site’s images folder. With the graphic selected, in the Alt box, key: Guest Book.<br /> <br /> Figure 13.7 Text added to guest book page.<br /> <br /> 3 Click under the graphic header and key: How do you like our Web site? Please sign our public guest book so we can share your thoughts with other visitors. (Return to the Contact Us page.). Format the text bold. Your page should look like Figure 13.7.<br /> <br /> Adding Web Site Functionality<br /> <br /> 377<br /> <br /> 4 Select the text Contact Us. In the Properties inspector, move the mouse pointer over the Point to File icon. Click and drag from the icon to the contact.html file in the Files panel. The highlighted text will now link to the Contact Us page. Click after the sentence and press Enter. Your screen should look like Figure 13.8.<br /> <br /> Figure 13.8 A link is created so visitors can return to the Contact Us page.<br /> <br /> Figure 13.9 Visitors will use the text area to enter their comments into the guest book.<br /> <br /> 5 Key: Add Your Comments. Select the text. In the Properties inspector, click the Format drop-down arrow and select Heading 3. Click after the text and press Enter. 6 Change the Insert toolbar to Forms view and click the Textarea button. In the Add form tag? dialog box, click Yes. 7 Select the Textarea element. In the Properties inspector, under TextField, delete the text and key: comments. In the Char width box, key: 40. In the Num Lines box, key: 5. Leave the Init val box blank. Your page should look like Figure 13.9.<br /> <br /> Text area<br /> <br /> 378<br /> <br /> Chapter 13<br /> <br /> 8 In the Document window, position the insertion point after the Textarea box. Press Enter. On the Forms toolbar, click Button to create a Submit button. Click after the Submit button and click Button again. In the Properties inspector, under Action, select Reset form to insert a Reset button.<br /> <br /> 9 Save your work. Preview the page and test the Contact Us link. Your completed form should look similar to Figure 13.10. Close your browser.<br /> <br /> Figure 13.10 Finished guest book as viewed in a Web browser.<br /> <br /> 10 In Dreamweaver, open contact.html. In the Get In Touch box, select the text guest book. In the Properties inspector, click and drag from the Point to File icon to the guestbook.html file in the Files panel. The highlighted text will now link to the Guest Book page. Save your work and test the link in a browser. Close your browser. Close your MyDiskDesigns Web site.<br /> <br /> Troubleshooting For the guest book to function, you would have to make the Web page dynamic by inserting scripting code. When you publish the page to a server that recognizes the code, the guest book would be active.<br /> <br /> Describe What is the difference between a guest book and a feedback form?<br /> <br /> Section 13.3 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Newsletters, blogs, and syndicated content are used to share information with a site’s visitors.<br /> <br /> 1. Define newsletter, blog, RSS, bulletin board, guest book.<br /> <br /> 4. Analyze If you created a Web site about a local softball team, what types of syndicated content would you include on the site? Explain your reasoning.<br /> <br /> • Syndicated content (RSS) is content that is distributed to multiple Web sites. • Bulletin boards and guest books are used to receive information from a site’s visitors.<br /> <br /> 2. List the steps you would follow to create a guestbook in Dreamweaver. 3. Explain how Web sites use periodic e-mail newsletters.<br /> <br /> 5. Evaluate Identify two Web sites in which you have used a bulletin board. Explain how you used this feature.<br /> <br /> Apply It! Write a Proposal Your school district is creating a new Web site. Write a short proposal that identifies three communication tools that you think should be included in your school’s site. Explain your reasoning.<br /> <br /> Adding Web Site Functionality<br /> <br /> 379<br /> <br /> SECTION 13.4 FRAMES Focus on Reading Read to Find Out Web designers use frames to control a Web site’s layout. As you read, make sure you understand the difference between a frame and a frameset.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Frames allow designers to control how individual areas of a site display and scroll. Dreamweaver provides predefined framesets that make it easy to create frames-based sites.<br /> <br /> frame frameset<br /> <br /> Compare and contrast a Web page that uses frames and one that does not. Use a Venn diagram like the one below (also available online). Frames<br /> <br /> No Frames<br /> <br /> The MyDiskDesigns.biz subpages currently use one HTML document to display content. The top of the page contains the company’s logo and navigation bar. The middle of the page contains the page’s main content. The bottom of the page contains text links and copyright information. Some sites use frames to display this information.<br /> <br /> Creating Frames-Based Pages How many files are usually in a frames-based page?<br /> <br /> A frame is a separate region on a Web page that contains its own Web document. With frames, different parts of the screen can scroll independently. Frames are designed to make navigation easier by keeping part of a site constant. For example, many frames-based sites place the navigation bar in a frame on the left side of the page. When a visitor selects any item on the navigation bar, the frame on the right displays the selected page. The navigation bar frame itself, however, remains unchanged.<br /> <br /> Files in a Frames-Based Page Caution Many older browsers do not support frames. When creating a frames-based site, be sure to consider your target audience. If this audience mainly uses older browsers, you may not want to create a site with frames.<br /> <br /> 380<br /> <br /> Chapter 13<br /> <br /> A basic frames-based page usually consists of three separate files (see Figure 13.11 on page 381). ◆ One file defines the Web page that will display in frame one. This Web page is usually the site’s link bar. ◆ A second file defines the Web page that will display in frame one. This second page usually contains the Web site’s main content. ◆ A third file defines how the separate frames files will display on the Web page (their size, settings, and placement). This file is like a shell that contains the other files, and is sometimes referred to as a container page. In Dreamweaver, you can identify the container page by looking for the label frameset. WebDesignDW.glencoe.com<br /> <br /> Figure 13.11 The container page directs the browser how to display the two frames files. How many files would be needed to create a Web page with three frames?<br /> <br /> Container Page<br /> <br /> Frame 1<br /> <br /> Frame 2<br /> <br /> Guidelines for Frames-Based Pages While useful, frames-based pages can also cause problems for some viewers. Following certain guidelines will help make your frames-based pages more user-friendly.<br /> <br /> Size Guidelines In theory, you can create an unlimited number of frames on a page. However, dividing the pages into many small segments can confuse visitors. As you design your site, you should consider the number, placement, and size of the frames. ◆ On a site that contains a left and right frame, the Web designer usually defines the pixel width of the left frame. The right frame takes up the remaining space on the page. It is best not to define the pixel width of the right frame since monitor sizes and resolution vary. ◆ On a site that contains a top and bottom frame, the designer assigns a pixel width to the top frame. The bottom frame then fills the remaining space on the page.<br /> <br /> Usability Guidelines Frames can make a site more difficult to navigate for visitors with accessibility issues. People with sight limitations, for example, use devices called screen readers that read aloud the contents of Web pages. These devices have difficulty making sense of pages with frames. For frames to meet the requirements of the Americans with Disabilities Act, you must assign each frame a logical title. You may also choose to reproduce each frames page as a non-frames page to increase your site’s accessibility.<br /> <br /> Design Before you create a framesbased site, think about how your site will be used. Using frames in a Web site often inhibits search engines from indexing the contents of the site. This makes it difficult for people to find the site if they use search engines to browse the Web.<br /> <br /> Identify What is a frameset?<br /> <br /> Adding Web Site Functionality<br /> <br /> 381<br /> <br /> Creating Frames Using Dreamweaver You Should Know Use the Frames panel to edit options for a particular frame. Use the Document window to edit the HTML page within the frame just as you would with an unframed Web page.<br /> <br /> How can I use a predefined frameset as a template for my Web site?<br /> <br /> It is easy to create a frames-based page using Dreamweaver. For instance, you can select one of the predefined framesets in Dreamweaver’s Start page or you can create your own. You can also convert a non-frames-based site into a frames-based site. When you save a frames-based Web page, the frameset file must be saved along with each frame page’s file. For example, if you have a page that contains two frames, you will save three files: the frameset page and the two frame pages. In the following activity, you will use a predefined frameset template to create a frames-based Web page.<br /> <br /> ACTIVITY 13C Use Frames on a Site 1 Create a root folder named: My Frames Site. In the root folder, create a folder named: images. 2 Open Dreamweaver. In the Start page, in the Create from Samples column, select Framesets. In the New Document dialog box, in the Framesets list, select the Fixed Top frameset (see Figure 13.12). Click Create.<br /> <br /> Figure 13.12 Dreamweaver provides predefined framesets for frames-based pages.<br /> <br /> 3 The Document window shows the two frames that make up the frameset Web page. In the Title box, delete the text and key: My Frameset. 4 The Properties inspector displays properties for the frameset that controls the two frames. Modifying the frameset will change how the frames display on the page. Click the Borders drop-down arrow and choose Yes. In the Border width box, key: 5. In the Border color box, key: #FF0000. Under Value, in the Row box, key: 20. Press Enter. The top frame resizes to 120 pixels. 382<br /> <br /> Chapter 13<br /> <br /> 5 Choose File>Save All. In the dialog box, in the File name box, name the frameset file index.html and save it in your root folder. 6 You are then prompted to save either the top or bottom frame. Look in the page’s Document window. The frame that is outlined is the frame you are about to save. Name the bottom frame bottomframe.html and save it in your root folder. Name the top frame topframe.html and save it in your root folder. Use Site>Manage Sites to define your My Frames site in Dreamweaver. 7 Choose Window>Frames (or press Shift + F2) to open the Frames panel. A model of the two frames appears in the Frames panel. In the model, click inside the frame labeled topFrame. The Properties inspector changes to show the options for the top frame (see Figure 13.13). 8 In the Properties inspector, click the Scroll drop-down arrow and select Yes. Uncheck the No resize option (see Figure 13.13). This will allow users to resize the top frame within their Web browser if they wish.<br /> <br /> Figure 13.13 When you select a frame, the Properties inspector changes to display that frame’s options.<br /> <br /> Top frame<br /> <br /> Bottom frame<br /> <br /> Name of frame that is selected<br /> <br /> 9 In the Document window, click inside the top frame. In the Title box, key: Top Frame. In the Properties inspector, click the Page Properties button. In the Background color box, key: #FFCC00. Click OK. 10 With the Insert toolbar in Common view, click Images. Browse to the DataFiles\Ch13\Images folder. Select logo_mydiskdesigns.gif and save it in the site’s images folder. Provide the Alt text MyDiskDesigns logo. 11 In the Frames panel, in the frames model, click in the frame labeled mainFrame. In the Properties inspector, click the Scroll drop-down arrow and select Yes. Uncheck the No resize option, if necessary. In the Document window, click inside the bottom frame. In the Title box, key: Bottom Frame. In the Properties inspector, click the Page Properties button. Set the Font Size to 18. In the Background color box, key: #99CCFF. Click OK. Adding Web Site Functionality<br /> <br /> 383<br /> <br /> 12 In Dreamweaver, click in the bottom frame. Select File>Import>Word Document. In the Open dialog box, browse to the DataFiles\Ch13\Text folder and open the frames_privacy.doc file. Format the text Privacy Policy font size 36 pixels, Bold. Your screen should look like Figure 13.14.<br /> <br /> Figure 13.14 When you scroll one frame in the page, the other frame remains constant.<br /> <br /> 13 Save all three files and preview your framed page in a browser. Resize the top frame by clicking and dragging up or down on the red border that separates the two frames.<br /> <br /> Identify How many files are contained in a site with two frames?<br /> <br /> Section 13.4 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Frames enable different parts of the screen to scroll independently.<br /> <br /> 1. Define frame, frameset.<br /> <br /> 4. Compare and Contrast How are sites with frames similar to sites without frames? How are they different?<br /> <br /> • A frameset contains information about the size and placement of all frames within a Web page. • The Framesets category in the New Document dialog box displays the Dreamweaver predefined framesets for creating a frames-based Web site.<br /> <br /> 384<br /> <br /> Chapter 13<br /> <br /> 2. Describe the information contained in a frameset. 3. Identify three problems with using frames on a Web site.<br /> <br /> 5. Make Predictions Do you think the number of new sites created with frames will increase in the future? Explain your reasoning.<br /> <br /> Apply It! Evaluate Frames You want to publish a book online. You plan to list the table of contents on the left and the text on the right. The table of contents will list the book’s 12 chapters. The text is one long document. Is this book a good candidate for a frames-based site?<br /> <br /> CHAPTER 13<br /> <br /> Reading Review<br /> <br /> SECTION 13.1 Tracking Visitors and Collecting Information<br /> <br /> SECTION 13.3 Building a Sense of Community<br /> <br /> Key Terms<br /> <br /> Key Terms<br /> <br /> hit counter, 366 tracking software, 367 database, 368 record, 368 database driven, 368 database interface page, 368<br /> <br /> newsletter, 375 blog, 376 RSS, 376 bulletin board, 377 guest book, 377<br /> <br /> Main Ideas ■ Hit counters, page views, and unique visits are used<br /> <br /> to track a site’s visitors. ■ Tracking software can identify the countries where<br /> <br /> visitors live, how they navigated to your site, and the browsers they used. ■ Pages can be made static or dynamic. Dynamic pages rely on database driven information.<br /> <br /> SECTION 13.2 Making Information Easy to Find Key Terms site map, 371 table of contents, 372 search capabilities, 372 frequently asked questions (FAQ), 373 named anchor, 373<br /> <br /> Main Ideas ■ A site map enables visitors to search for<br /> <br /> information by category. ■ Search capabilities allow visitors to access site information by searching for a word or phrase. ■ A FAQ page provides answers to common questions about the site. ■ Named anchors enable visitors to jump to marked locations within a page or a separate document.<br /> <br /> Main Ideas ■ Newsletters, blogs, and syndicated content are used<br /> <br /> to share information with a site’s visitors. ■ Newsletters are sent to users, while blogs are Web pages that users access online. ■ Syndicated content (RSS) is content that is distributed to multiple Web sites. ■ Bulletin boards and guest books are used to receive information from a site’s visitors.<br /> <br /> SECTION 13.4 Frames Key Terms frame, 380 frameset, 380<br /> <br /> Main Ideas ■ A frame is a separate region on a Web page that ■ ■ ■<br /> <br /> ■<br /> <br /> contains its own Web document. Frames enable different parts of the screen to scroll independently. A frameset contains information about the size and placement of all frames within a Web page. The Framesets category in the New Document dialog box displays the Dreamweaver predefined framesets for creating a frames-based Web site. You must save the frameset file and each individual frame file when creating a frames-based page.<br /> <br /> Adding Web Site Functionality<br /> <br /> 385<br /> <br /> CHAPTER 13<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ Organize to Remember Review the chapter by looking over headings and subheadings. Notice how topics are organized. Are they grouped together in helpful ways? Would you regroup some topics to make the information easier to remember? Find a section that you think is particularly well organized. Read it through once. Then write down all the information you can remember. Did you hit all the main points? How many smaller details did you remember?<br /> <br /> Reviewing Key Terms 1. Change the following sentence to make it true: A record is one piece of information, such as a last name or telephone number. 2. What do search capabilities allow a visitor to do? 3. What is a named anchor? 4. What is a blog? 5. How is a newsletter different from a bulletin board? 6. What element provides a space for visitors to submit comments about a Web site? 7. On a frames-based site, what is the name of the shell page that includes the information about the size and shape of each frame on the page?<br /> <br /> Understanding Main Ideas 8. Describe the limitations of hit counters. 9. Identify the types of decisions that tracking software can help companies make. 10. Explain how databases are organized. 11. Summarize the purpose of a database interface page. 12. Evaluate how search capabilities make a site more user-friendly. 13. Describe how intrapage named anchors can be useful on long pages. 14. Explain how a guest book is different from a feedback form. 386<br /> <br /> Chapter 13<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.<br /> <br /> 15. Compare and Contrast static and dynamic pages.<br /> <br /> Static Pages<br /> <br /> Dynamic Pages<br /> <br /> 16. Summarize how each of the following communication tools is distributed: newsletter, blog, RSS content. Communication Tools<br /> <br /> Newsletter<br /> <br /> Blog<br /> <br /> RSS<br /> <br /> Critical Thinking 17. Draw Conclusions Six of your ancestors were writers. Their writings include short stories, poems, and one novel. You have collected all these works and plan to post them online. What techniques can you use to help visitors find the work of a particular person or a specific genre? 18. Make Recommendations You are working on a team that is developing a Web site examining the opposing points of view on a community issue. One team member has suggested using a frames-based site with four frames. The top frame would contain the navigation. The rest of the page would be divided into three equal frames, each containing information about one of the three viewpoints being expressed. What problems, if any, do you see with this approach? Explain your reasoning.<br /> <br /> Review and Assessment<br /> <br /> CHAPTER 13<br /> <br /> 19. Categorize A hosting company is offering your school’s yearbook staff the choice of three different Web site packages to supplement this year’s yearbook. As a bonus with the package, you get to select one free service: blog, newsletter, or bulletin board. Which one service would you choose for the yearbook staff and yearbook site? Why would you choose this service? Write a paragraph to illustrate your answer. 20. Evaluate Your community library is planning to update the library Web site. The librarian has decided to create a frames-based site with a left frame and a right frame. If the librarian asked you to help create the site, what content would you place in the left frame and why? What content would you place in the right frame and why? Use a table like the one below to organize your ideas. Explain your reasoning. Left Frame<br /> <br /> Right Frame<br /> <br /> Content/Purpose<br /> <br /> Reading & Writing Read the paragraph below and then answer the question.<br /> <br /> Web site developers often use the terms static and dynamic to distinguish between pages that contain fixed information and those capable of change. On a static page, the information is embedded in the HTML code that makes up the page. It cannot change without changing the code. Dynamic pages, on the other hand, are shells that contain changing information. The information that changes comes from an external source. When the external source is a database, the Web site is said to be database driven. According to the paragraph, which of the following statements is true?  Dynamic pages may be database driven.  The information on a static page comes from an external source.  Static pages are composed of information that is constantly changing.<br /> <br /> Content/Purpose<br /> <br />  Both static and dynamic pages are composed of embedded information.<br /> <br /> You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart of general Dreamwaver editing commands shown below.<br /> <br /> 21.<br /> <br /> +<br /> <br /> +<br /> <br /> Study with PowerTeach Go to the book Web site listed above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 13.<br /> <br /> Online Self Check<br /> <br /> 22. 23.<br /> <br /> Result<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Result<br /> <br /> +<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Result<br /> <br /> Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 13.<br /> <br /> Adding Web Site Functionality<br /> <br /> 387<br /> <br /> CHAPTER 13<br /> <br /> Activities<br /> <br /> 1. MAKING CONNECTIONS Language Arts—Design a Table of Contents Imagine you are planning to post your class notes from all the classes you are currently taking to a Web site. Review your notes from the last month. Then write a table of contents that organizes the material: ◆ By class ◆ By appropriate subcategories within that class Use the fishbone diagram shown on this page as a model for each class. Make certain that the subcategories you use will be helpful to people visiting the site. For example, you could use the date the notes were taken as a subcategory. Classmates who missed a particular class could use this subcategory to search for your notes.<br /> <br /> Subcategory Class<br /> <br /> Subcategory Subcategory<br /> <br /> Then, consider whether it would be beneficial to distribute your class notes in a blog or a newsletter. Which one would be better? Explain your answer.<br /> <br /> 2. STANDARDS AT WORK Students demonstrate a sound understanding of the nature and operation of technology systems. (NETS-S 1)<br /> <br /> Evaluate Guest Books Locate a Web site that includes a guest book. Navigate through the site and evaluate the design and content of each page. 1. As you navigate the site, identify its strengths and weaknesses. Create a table comparing the strengths and weaknesses. 2. When finished, review your table. What do you think is the greatest strength of the site? How would you improve one of the weaknesses? 3. With your teacher’s permission, make an entry in the site’s guest book. Compliment the site on its specific strengths. In a positive way, suggest an improvement or an additional feature for the site. Visit the site after you have posted your guest book entry to see how the entry appears. Remember not to include any personal contact information in your entry. If your school does not allow posting to a guest book, key your entry into a word processing document. Share your entry with a classmate. 4. Compare the site you selected with that of a classmate. How are the guest books similar? How are they different? Discuss these similarities and differences with your classmate.<br /> <br /> 388<br /> <br /> Chapter 13<br /> <br /> CHAPTER 13<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Design a Database Interface Your school is developing a Web site where students and faculty can post book reviews. The site will also allow students to buy or trade books. Your team is planning and designing the databases and forms needed to support the site. 1. Plan the book review form. Research sites that include book reviews. Note what information is gathered from people posting reviews (titles of books for sale, book costs, purchase information, etc.). 2. Choose the database fields needed to manage the book buying and trading. Make a list of all the information needed about the person offering the book for sale or trade. Then list the book information (title, author, price, etc.) that someone would need to make a decision to buy or trade the book. Create a list of field names for the database. Use a table like the one below to list what information you need to include in the form, the field name you will use to label this information, and what element you plan to include in the form to collect the necessary information.<br /> <br /> FORM INFORMATION NEEDED (example) Title of book for sale<br /> <br /> FIELD NAME Sale book title<br /> <br /> FORM ELEMENT Text field<br /> <br /> 3. Use Dreamweaver to create the buying and trading form. Name the fields on the form to match the field names in the database.<br /> <br /> 4. CHALLENGE YOURSELF Research Tracking Software Use a search engine to locate three businesses that sell tracking software. Navigate each of these sites. Make a list of the types of information that the tracking software can gather. Also note how much these services cost. Some sites offer online demonstrations of the software. Do not sign up for free trials unless you have your teacher’s permission to do so. Based on your research, create a chart that compares the types of information that can be gathered by each of the tracking software applications. Then write a short report that explains what types of Web sites would find tracking software useful. Using this information, make a recommendation as to which tracking software should be acquired for your school’s Web site. Be sure to include in your recommendation the tracking software features, the purpose and benefit to the school, the company and site in which you found the best deal, and the cost.<br /> <br /> Adding Web Site Functionality<br /> <br /> 389<br /> <br /> CHAPTER 13<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Add a Guest Book <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> Add a guest book to the mouse pad e-commerce site. Open the site you created in the Chapter 12 You Try It Skills Studio #1 (see page 362). Select a name for the business. Design a simple logo for the site. Add a home page to the site (make the Order Form page a subpage of the home page). Place the logo on the home page. Add content describing the custom mouse pads offered by your company. Add a guest book page. Make the page another subpage of the home page. Save your work. Preview the site in a browser.<br /> <br /> 2. Create a Frames-Based Page  <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 390<br /> <br /> Change a page from the MyDiskDesigns Web site into a frames-based page. In Dreamweaver, use Framesets to create a new Fixed Top frames-based Web page. Name the frameset file: My Second Frameset. Adjust the file so it has a red border with a Border width of 5 and a Row value of 120. Save all of the site’s files to a new root folder named: My Second Frames Site. Open the Frames panel. Set the topFrame to scroll and resize. Give it a Title of Top Frame and a yellow background color. Open the FAQ page in your MyDiskDesigns Web site. Copy and paste the bulleted list from the FAQ page into the new site’s top frame. Set the mainFrame to scroll and resize. Give it a Title of Bottom Frame and a blue background color. Copy and paste the unbulleted list of questions from your MyDiskDesigns FAQ page to the new site’s bottom frame. Save your work. Preview your frames-page in a browser. Make sure that the frames work properly and practice resizing them.<br /> <br /> Chapter 13<br /> <br /> CHAPTER 13<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the directions to complete each project.<br /> <br /> 1. Create Named Anchors for a Résumé Gather the information you need to create a résumé that includes the following sections: ◆ Contact Information ◆ Career Objective ◆ Education ◆ Software Proficiency ◆ Experience ◆ References Under software proficiency, you will list specific software applications that you know well enough to use on the job. For your reference section, list the teacher of your Dreamweaver class and one other teacher or an employer who knows you well. Create the résumé in Dreamweaver (Hint: with the Insert toolbar in Text view, use the Characters: Other Characters button to add the é to your page). Add named anchors that allow visitors to quickly move to each section of the résumé. Proofread the résumé carefully and make changes as needed. Preview the résumé in a browser. Test the named anchors to make certain they work properly.<br /> <br /> 2. Create an Investing for Teens Web Site Your school has formed a new club called Investing for Teens. The club explores the basics of financial investments and helps students plan future investments. Develop a Web site that contains the following four pages: ◆ A home page that introduces the club and gives the list of upcoming meetings. ◆ A membership form page that gathers e-mail addresses from visitors who want to receive a monthly online newsletter. ◆ An informational page that describes basic financial tips for savings and investing money. The page includes links to other investing sites aimed at teens. ◆ A glossary page that lists common investing terms and their definitions. Create the site in Dreamweaver. Add named anchors to the glossary page so that visitors can move quickly to the terms. Preview the site in a browser and make changes as needed.<br /> <br /> Adding Web Site Functionality<br /> <br /> 391<br /> <br /> CHAPTER<br /> <br /> 14<br /> <br /> Publishing a Web Site<br /> <br /> YOU WILL LEARN TO… Section 14.1 Identify the technical needs of a Web server Evaluate Web hosts Compare and contrast internal and external Web hosting Section 14.2 Select a Web site name Register a domain name Maintain a site’s directory structure Publish and test a Web site Section 14.3 Validate a Web site against W3C standards Check for broken links Check your Web site against target browsers Section 14.4 Identify techniques for publicizing Web sites Insert meta tags Evaluate the use of cookies for targeted marketing<br /> <br /> 392<br /> <br /> Chapter 14<br /> <br /> WHY IT MATTERS ................................................. Publishing a Web site is similar to publishing a book. Publishing a book involves converting an author’s manuscript into a finished print product that can be distributed to readers. Publishing a Web site involves moving Web page files from the computer where they were developed to a Web server. The last piece of the process is making your audience aware that the product is available. Think about an item that you purchased recently. Write a short paragraph explaining why you decided to purchase this item. How did this item first come to your attention? Did you see it advertised on television or the Internet? Did you hear about it from friends? Evaluate how important advertising was in your decision to buy this item.<br /> <br /> CHAPTER<br /> <br /> 14<br /> <br /> WHAT YOU WILL DO .......................................................................... You Try It Skills Studio Calculate Web Site Size ....................... 420 Add Meta Tags and Publish a Site...... 420<br /> <br /> ACTIVITIES AND PROJECTS Apply It! 14.1 Evaluate Web-Hosting Services ...................................... 14.2 Create a Directory Structure ... 14.3 Check Links ................................ 14.4 Promote a Web Site ................... You Try It Activities 14A Calculate Web Site Size and Bandwidth .................................. 14B Publish a Web Site Using FTP.... 14C Validate a Web Site .................... 14D Check for Broken Links ............. 14E Perform a Target Browser Check .......................................... 14F Register a Site with a Search Engine ......................................... 14G Add Meta Tags to a Web Site..... Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................<br /> <br /> 397 403 409 414<br /> <br /> 396 401 406 407 408 411 412<br /> <br /> Web Design Projects Organize Web Site Structure .............. 421 Publish a Site ....................................... 421<br /> <br /> IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects<br /> <br /> ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments<br /> <br /> 418 418 419 419<br /> <br /> BEFORE YOU READ Take Good Notes The chapters in this book are organized so that main headings describe main ideas and subheadings introduce supporting details. You can organize your notes by this method. Think of main ideas as Level 1 ideas. Supporting details can be Level 2, 3, or 4. Every time you read a main idea, write down a brief Level 1 note. Under that, write down the Level 2 supporting details. Level 2 may also have its own supporting information. Those are Level 3 details. Note those details beneath Level 2. Continue this method as you read through the chapter.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Publishing a Web Site<br /> <br /> 393<br /> <br /> SECTION 14.1 WEB SERVERS Focus on Reading Read to Find Out This section explains how to publish a Web site. As you read, make sure you understand how Web-hosting services work.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Publishing a Web site involves transferring the site’s page files from a local computer to a Web server. Web hosts give customers access to Web servers in return for a fee.<br /> <br /> publish Web server Web host host Web server clusters internal Web hosting external Web hosting<br /> <br /> Compare and contrast internal and external Web hosting. Use a Venn diagram like the one below (also available online).<br /> <br /> Internal<br /> <br /> External<br /> <br /> To publish a Web site, you transfer that site’s Web page files from the local computer where you created them to a remote Web server. Knowing how to publish a Web site is crucial in the Web site development process.<br /> <br /> The Technical Needs of a Web Server How do I evaluate a Web server’s hardware?<br /> <br /> As shown in Figure 14.1, a Web server is a powerful computer that maintains a constant connection to the Internet. A server’s power and efficiency is largely determined by its hardware. Understanding this hardware can help you select an appropriate server when you publish your Web site.<br /> <br /> Figure 14.1 Web servers are constantly connected to the Internet. What factors affect a Web server’s efficiency?<br /> <br /> 394<br /> <br /> Chapter 14<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> When choosing a Web server, evaluate the following items: ◆ CPU Power A Web server’s CPU power determines the number of instructions it can process in a given time period. The maximum processing capability of a server is determined by the number of central processing units (CPUs) it has and the running speed (frequency) of those processors. A high-performance Web server is generally able to process about 16 times more instructions per second than a typical desktop computer. ◆ Hard Drive Speed and Capacity Many high-capacity Web servers support multiple hard drives. The hard drives in Web servers usually retrieve data at a substantially higher rate than the drives in common desktop systems.<br /> <br /> Jargon Throughput, or “bandwidth,” is measured in kilobytes per second (Kbps), Megabytes per second (Mbps), or Gigabytes per second (Gbps). Bandwidth refers to the amount of data that can be transferred in a fixed amount of time.<br /> <br /> ◆ Communications Channel Bandwidth Fast and powerful CPUs and fast hard drives will not accomplish much if the Web server has a limited communication channel. High-speed digital communication lines such as DSL or T1/T3 lines transfer data quickly between computers. ◆ Scalability The term “scalability” refers to a Web server’s ability to meet response time and to handle increasing Web traffic. A server that can be easily upgraded to handle a dramatic increase in traffic is said to be highly scalable. ◆ Reliability Some servers are more reliable than others. For instance, some servers incorporate dual power supplies so that if one burns out, the other will continue running the system. Other servers will continue to operate if the computer’s CPUs malfunction. Define What is scalability?<br /> <br /> Web Hosts How do Web-hosting services work?<br /> <br /> Figure 14.2 Companies such as BlueHost offer Web-hosting services. What is a Web host?<br /> <br /> Instead of purchasing their own Web server, many individuals and small companies pay Webhosting services to store their Web site files for them. A Web host is a company that provides Web server space to customers for a fee (see Figure 14.2), so that they can post their Web site on the server. Customers post, or transfer, their files to a host. A host is the name of the Web server on which a particular Web site resides. Publishing a Web Site<br /> <br /> 395<br /> <br /> Choosing a Web Host You should consider several factors when choosing a service to host your Web site, including:<br /> <br /> Activity 14.1 Explore Web Hosts Find out more about Web hosts and the services they provide by visiting WebDesignDW.glencoe.com.<br /> <br /> ◆ Cost Some Web hosts charge customers an initial setup fee while others charge a monthly fee. Large hosting companies generally charge higher monthly fees than smaller companies but often can provide superior benefits. ◆ Performance Large Web-hosting companies typically offer much better performance, or bandwidth. Their servers have faster CPUs, bigger and faster hard drives, and higher capacity communication lines. ◆ Reliability One Web server might be more reliable than another. For example, many large Web hosts provide Web server clusters that store a given Web site on multiple computers acting as a single virtual host. If one computer in the cluster should fail, the other computers in the cluster can continue without interruption. ◆ Tech Support Different Web hosts offer different levels of support. If you do not want to troubleshoot your site’s problems, you may want to use a Web host that offers a higher level of support. ◆ Storage Space and Bandwidth Make sure the host server or hosting plan you choose has enough room for all your Web files, and has enough bandwidth to handle your site’s traffic.<br /> <br /> ACTIVITY 14A Calculate Web Site Size and Bandwidth 1 Locate your MyDiskDesigns.biz site’s root folder. In Windows, right-click the folder and choose Properties. Note the size option (see Figure 14.3). This indicates how large the Web site is in kilobytes. 2 Divide this number by your target audience’s lowest likely connection speed in Kbps (kilobytes per second). This will tell you how many seconds it will take your Web site to download at the slowest connection.<br /> <br /> Figure 14.3 Use the Properties dialog box to determine the size of your Web site.<br /> <br /> Size Content To estimate how much space the site’s images will occupy, go to the site’s root folder. Select only the site’s images folder and calculate its size by using the method described in the You Try It activity.<br /> <br /> 396<br /> <br /> Chapter 14<br /> <br /> 3 Estimate how many visitors you think will access your site in a month. For example, suppose that the MyDiskDesigns.biz site will receive approximately 100 visits a month.<br /> <br /> 4 Multiply the estimated number of visits per month (Step 3) by the site’s size (Step 1). The result is the site’s approximate transfer bandwidth. This is the minimum amount of bandwidth that a Web host should have to effectively administer your site.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Internal Versus External Hosting When companies use their own Web server to host their site, they are using internal Web hosting. When companies pay someone else to host their site, they are using external Web hosting. Cost, performance, and reliability are important factors in the decision to use either internal or external hosting. Figure 14.4 explains some of the differences between the two options.<br /> <br /> Figure 14.4 Web Hosting<br /> <br /> Internal<br /> <br /> Most companies that own or operate one or more Web servers use internal Web hosting. What are some advantages of external Web hosting? External<br /> <br /> • Company has greater control over content and functionality of Web site • Better suited for hosting Web applications that access large databases or conduct financial transactions<br /> <br /> • More cost effective than buying a Web server • Can provide more up-todate computer hardware and communications equipment • Provide benefits such as Internet and backup services<br /> <br /> List In what three ways is bandwidth measured?<br /> <br /> Section 14.1 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Consider your site’s technical needs when selecting a Web server.<br /> <br /> 1. Define publish, Web server, Web host, host, Web server clusters, internal Web hosting, external Web hosting.<br /> <br /> 3. Compare and Contrast Explain how internal Web hosting differs from external Web hosting.<br /> <br /> • Consider costs and benefits when selecting a Web host. • Internal hosting is when a company hosts its own sites. External hosting is when a company uses a hosting service.<br /> <br /> 2. Identify five factors that an individual should consider when choosing a Web host.<br /> <br /> 4. Draw Conclusions How might a Web server that an individual buys differ from a server that a large company buys?<br /> <br /> Apply It! Evaluate Web-Hosting Services Research two Web hosting companies. Determine their setup costs, monthly fees, and performance and reliability safeguards. Create a chart comparing the two companies.<br /> <br /> Publishing a Web Site<br /> <br /> 397<br /> <br /> SECTION 14.2 THE PUBLISHING PROCESS Focus on Reading Read to Find Out The main focus of this section is to explain the Web site publishing process. Read to find out how to transfer Web files to a Web server.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> HTTP and FTP are the two main protocols used to transfer Web files to a Web server. Test your published site on different hardware and in different browsers.<br /> <br /> InterNIC case sensitive directory structure download upload File Transfer Protocol (FTP) cross-platform testing<br /> <br /> Identify three guidelines for selecting a Web site name. Use a diagram similar to the one below (also available online). Guidelines for Choosing a Web Site Name<br /> <br /> The process of publishing a Web site involves more than transferring Web files to a Web server. You also need to determine your site’s name and make sure that your files and folders are properly named and organized. In particular, always make sure that your graphic files are saved in the site’s images folder.<br /> <br /> Naming a Web Site Publishing Remember that the domain name extension you choose is an important part of the Web site name. The extension tells users what type of organization uses the URL. For a list of common domain name extensions, see Chapter 3.<br /> <br /> How do I select a name for my Web site?<br /> <br /> Choosing your Web site’s name is an important part of the Web development process. Visitors will see your site’s name before they see any pages, so the name you choose should make a good first impression. In many cases, the Web site name is the same as the site’s URL.<br /> <br /> Selecting a Name The name you give your site determines how easily visitors can locate and access the site. Consider the following when selecting a name: ◆ Choose a logical name. Pick a Web site name that has a logical relationship with the company, institution, product, or individual it represents. Good examples include ibm.com or ucla.edu. ◆ Keep your name short. Keep your Web site name as short as possible without losing clarity. For example, NBA.com is easier to enter into a Web browser than NationalBasketballAssociation.com. ◆ Choose a unique name. Select a name that will attract users to your site and set your site apart from similar ones.<br /> <br /> 398<br /> <br /> Chapter 14<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Registering a Domain Name You can register a domain name so that no one else can use it. The Internet Corporation for Assigned Names and Numbers (ICANN) assigns Web site names and IP addresses. ICANN provides a Web site called InterNIC. This site contains information about the Web name registration process and maintains a list of domain registration services and Web hosts. Before you can register a domain name, you must first make sure that the name you want is available. As shown in Figure 14.5, you can access a database of registered names through the InterNIC site. You generally pay a small yearly fee to use domain names that you have registered.<br /> <br /> You Should Know Newer domain names include .info, .name, .museum, and .coop.<br /> <br /> Figure 14.5<br /> <br /> Reviewing Page Files and Folders How can I ensure that my Web site is ready to be published?<br /> <br /> After you have chosen a server or a Web-hosting service and have selected your site’s name, you are ready to publish your Web site. However, you need to consider some issues regarding page file and folder names before you actually transfer your site’s files to your chosen Web server.<br /> <br /> Maintaining Web Page File Names<br /> <br /> You can key your selected domain name into the WHOIS registration database to see if it is already registered. Why can you not use a domain name that is already registered?<br /> <br /> When transferring files to a server, use their exact names. Many servers are case sensitive—they distinguish between file names that contain uppercase and lowercase letters and those that contain only lowercase letters. For example, suppose your home page contains an internal hyperlink to a page called OliverTwist.htm. You, however, mistakenly publish this page as olivertwist.htm. If your Web host uses a case-sensitive server, then users will receive an error message when they click on this link (see Figure 14.6 shown on page 400). This error occurs because the link target name does not exactly match the actual file name. Publishing a Web Site<br /> <br /> 399<br /> <br /> Figure 14.6 Users may receive an error message such as this if you do not publish your Web pages exactly as they are named. What does it mean to be case sensitive?<br /> <br /> You can easily correct case-sensitive errors if you publish a Web page incorrectly. Use either of the two following methods to correct casesensitive errors. ◆ Change the hyperlink reference in the first Web page to match the actual name of the target page. ◆ Rename the target Web page so that it matches the hyperlink reference in the first page.<br /> <br /> Maintaining a Site’s Directory Structure Jargon The terms “directory” and “folder” are often used interchangeably. “Folder” is the preferred name on the Windows OS, and “directory” is used on most other platforms. Both terms refer to the organizational structure of the platform’s file management system.<br /> <br /> Publishing a small Web site typically does not require great organizational skills. However, suppose you create a Web site that contains more than 30 Web pages. If you stored every Web page in its own folder, you would need a plan to organize those folders. A directory structure, sometimes called a folder structure, is a hierarchy used to organize folders and the files the folders contain.<br /> <br /> Creating a Directory It is difficult to manage many files if they all reside in a single directory or folder. Users will experience slow download times if the server has to scan hundreds of files every time they click a hyperlink on your site. You should instead create multiple folders to contain your Web pages, and then be sure to organize these folders in a logical fashion. A Web site’s directory structure should divide Web page files into groups of approximately the same size (see Figure 14.7). For example, you can divide a group of 900 files into 30 groups of 30 folders.<br /> <br /> Figure 14.7 To keep track of all the files that may be included in a Web site, you should set up a logical structure for the files and folders on the site. Why do you think such organization is important?<br /> <br /> 400<br /> <br /> Chapter 14<br /> <br /> Root Directory File File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> File<br /> <br /> Publishing a Directory When you publish your site, you must maintain its directory structure on the Web server exactly as it is on the computer used to develop the site. All of the folders must be named exactly the same on the server as on the local computer, and they must maintain the same relative position in the directory hierarchy. If you fail to do this, many of the hyperlinks on your Web site will cease to function correctly when you publish the site. When you publish a Web site with Dreamweaver, you must specify only the document root, or top-level, directory on the target Web server. Dreamweaver will create and name all other folders on the site appropriately during the transfer process, so you do not need to do this manually. Explain Why should you avoid keeping many files in a single directory?<br /> <br /> Transferring Files to a Server How can I transfer my Web files to a Web server?<br /> <br /> When it is time to upload your files to a server, you can choose from several transfer methods. If you are using a Web hosting service, they will tell you which transfer method you should use.<br /> <br /> Transferring Files Using HTTP Hypertext Transfer Protocol (HTTP) is the main protocol used to download files over the Internet. The term download means to transfer data from a file server to a client (user) machine. Virtually all Web browsers use this protocol to access Web pages. However, HTTP is a two-way protocol, so it can also be used to upload, or transfer, data from a client’s computer system to a server as well.<br /> <br /> Activity 14.2 Explore File Transfers Find out more about transferring files to a server by visiting WebDesignDW.glencoe.com.<br /> <br /> Transferring Files Using FTP Many people use File Transfer Protocol (FTP) to publish or upload files to a Web server. To use FTP, you need the name of the designated FTP server and a valid user name and password. In the following activity, you will use Dreamweaver’s built-in FTP tool to publish your MyDiskDesigns.biz site. Your teacher will need to supply the remote Web site location, FTP address, user name, and password.<br /> <br /> ACTIVITY 14B Publish a Web Site Using FTP Get permission from your teacher before starting this activity!<br /> <br /> 1 Open your MyDiskDesigns.biz Web site in Dreamweaver. Select Sites>Manage Sites. Select the MyDiskDesigns.biz site and click Edit. 2 In the Site Definition dialog box, click the Advanced tab. Under Category, choose Remote Info. 3 From the Access drop-down menu, select FTP. In the FTP host text box, key the FTP address supplied by your teacher. An example of an FTP address would be ftp.thissamplesite.com. WebDesignDW.glencoe.com<br /> <br /> Publishing a Web Site<br /> <br /> 401<br /> <br /> 4 In the Host directory box, key the path on the server to the folder to which you will be publishing your site. An example of this would be \public_html\mydiskdesigns\. In the Login box, key the user name provided by your teacher. In the Password box, key a password. 5 Click the Test button to see if Dreamweaver is able to connect to the FTP address you specified. 6 Ask your teacher if you need to modify any other settings. Do NOT change any more settings without your teacher’s permission! Your dialog box should look similar to Figure 14.8. Click OK. In the Manage Sites dialog box, click Done.<br /> <br /> Figure 14.8 You transfer files from your computer to the remote location. Test button<br /> <br /> You Should Know A number of FTP programs are available for purchase or download on the Web for those who do not wish to use Dreamweaver’s built-in FTP program.<br /> <br /> Figure 14.9 The FTP log helps you track your file transfers.<br /> <br /> 7 To publish your site, open the Files panel, if necessary. Click the Put File(s) button. When you see Are you sure you wish to put the entire site?, click OK. The file transfer will initiate. 8 Once the transfer is complete, open a browser to view your published Web site. To view a log of files transferred, click Window>Results. In the Results panel, click the FTP Log tab (see Figure 14.9). The log displays what files were successfully uploaded or downloaded. After viewing the log, in the Files panel, click the Disconnects from remote host button to disconnect from the remote server.<br /> <br /> Summarize Why is HTTP a two-way protocol?<br /> <br /> 402<br /> <br /> Chapter 14<br /> <br /> Testing a Published Web Site Why is it important to test my site on a variety of platforms?<br /> <br /> It is important to test a Web site after you publish it to ensure that it displays and functions properly on a variety of Web platforms. The process of testing sites on a variety of computer hardware and software configurations is known as cross-platform testing.<br /> <br /> Testing on Various Hardware Personal computers running Microsoft Windows are currently the most common hardware/software configuration in use. However, many individuals and businesses choose to run the Linux operating system on PCs, while others prefer to run the Apple Macintosh. Many large Web hosts use highend servers manufactured by IBM, Sun, or Hewlett-Packard. These systems typically run a version of the Unix operating system: AIX, Solaris, and HP-UX, respectively.<br /> <br /> Testing on Different Browsers<br /> <br /> Troubleshooting Any Web developer who wishes to provide a truly cross-platform Web site should ensure that the site’s software operates consistently and correctly on all the Internet platforms listed in this section.<br /> <br /> As you know, most Web surfers use either Microsoft Internet Explorer or Netscape Navigator to access Web sites. After you publish a site, you must test it in various browsers. Web developers use the most current HTML standards in order to achieve maximum success with different hardware, software, and browser configurations. Pages created in Dreamweaver comply with most current Web coding standards. Define What is cross-platform testing?<br /> <br /> Section 14.2 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • When you publish your site, you must keep its directory structure exactly the same on the server as it was on the computer used to develop the site.<br /> <br /> 1. Define InterNIC, case sensitive, directory structure, download, upload, File Transfer Protocol (FTP), cross-platform testing.<br /> <br /> 4. Draw Conclusions Why is it important to register a domain name?<br /> <br /> • HTTP is the most common protocol used to download files. • FTP is the most common protocol used to upload files to a Web server.<br /> <br /> 2. Explain the importance of developing a logical directory structure for a large Web site. 3. Summarize how HTTP and FTP are similar and different.<br /> <br /> 5. Compare and Contrast How are the guidelines for choosing a Web site name similar to and different from the guidelines for choosing a Web page name?<br /> <br /> Apply It! Create a Directory Structure A music store asks you to create a site that describes and organizes their CDs by genre (Pop/Rock, Classical, Country). Artists are arranged alphabetically within each genre. Create a directory structure that mirrors this organization.<br /> <br /> Publishing a Web Site<br /> <br /> 403<br /> <br /> How We Use the Web<br /> <br /> F<br /> <br /> or many people, the Internet has become the place to go in order to accomplish a wide variety of tasks. Besides providing access to amazing amounts of information, the Internet offers a range of services that has changed the way the world operates.<br /> <br /> Online Services Here are just a few of the services provided online: ◆<br /> <br /> Job Hunting Many job hunters use online career services to find a job.<br /> <br /> ◆<br /> <br /> Banking Most banks offer online services that allow customers to manage their accounts, pay bills online, and apply for loans.<br /> <br /> ◆<br /> <br /> Real Estate House hunters can find a realtor on the Web and compare interest rates through online mortgage brokers.<br /> <br /> Some Web sites offer free publications and news and media updates.<br /> <br /> You can find information about many online services at the Federal Citizen Information Center’s Web site.<br /> <br /> ◆<br /> <br /> Insurance Most major insurance companies can give online quotes for car, home, or life insurance policies.<br /> <br /> ◆<br /> <br /> Taxes Taxpayers can fill out and file their tax forms online through the Internal Revenue Service (IRS) site. Companies such as H&R Block offer online tax preparation services.<br /> <br /> The Future of the Web As new technologies emerge, new possibilities open up for online services: ◆<br /> <br /> Communications In a few years, people may routinely use the Internet for telephone calls and wireless PDAs for live, real-time videoconferences.<br /> <br /> ◆<br /> <br /> Health Care Surgeons will be able to use virtual reality systems and cameras to control surgical robots and perform surgeries remotely.<br /> <br /> 1. Compare Web Sites Use the Internet to locate a bank with online services. What services does it offer? Create a two-column table that compares the personal and business services available on the site. 404<br /> <br /> Chapter 14<br /> <br /> 2. Make Predictions Research developments in one area of Internet services. What will it be like in five, ten, or twenty years? Write an essay predicting whether the developments will have positive or negative consequences.<br /> <br /> SECTION 14.3 RESULTS AND SITE REPORTS IN DREAMWEAVER Focus on Reading Read to Find Out This section explains how to use maintenance tools to validate HTML and check for target browsers, broken links, and orphaned files. Read to find out how reports can help you maintain an efficient and effective Web site.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Dreamweaver’s site reports are used for effective and efficient site maintenance. Dreamweaver has features to validate HTML, check against browser requirements, and to check links.<br /> <br /> reports Validation report Link Checker report orphaned file Target Browser Check<br /> <br /> Describe three reports that you can run to check your Dreamweaver site. Use a table like the one below (also available online). Report<br /> <br /> Reports are useful tools that help you to spot errors or make maintenance easier. Web developers use reports and validations to be sure their Web sites are ready to run smoothly before being published.<br /> <br /> Function<br /> <br /> Figure 14.10 Dreamweaver allows you to run workflow reports. How can a report showing workflow information be helpful to a Web developer?<br /> <br /> Site Reports What types of reports are available in Dreamweaver?<br /> <br /> Dreamweaver allows you to generate a variety of reports that can help you monitor the condition of files, folders, and entire Web sites. To access the Dreamweaver reports, choose Site>Reports. The Reports dialog box allows you to select Workflow or HTML reports (see Figure 14.10). Use the Workflow reports to track a Web site’s files when several people are working on the same project. Use the HTML reports to spot code errors such as missing alternative text and empty tags. Note that some of these reports cannot be generated until the Web site is published and transferred to a Web server.<br /> <br /> Identify What two main types of reports are available in the Reports dialog box? WebDesignDW.glencoe.com<br /> <br /> Publishing a Web Site<br /> <br /> 405<br /> <br /> Running Reports in a Web Site How can I use reports to ensure that my Web site is running smoothly?<br /> <br /> A variety of reports are also available in the Dreamweaver Results panel. You can use these reports to validate a site’s code, to check for broken hyperlinks, and to confirm that your site will display correctly in your target audience’s Web browsers.<br /> <br /> Validation The Validation report in Dreamweaver checks a site’s files to ensure they meet the established W3C (World Wide Web Consortium) standards (see Chapter 4 for an overview of these standards). You can validate documents written in HTML, XHTML, Synchronized Multimedia Integration Language (SMIL), and Wireless Markup Language (WML). In the following activity, you will validate the MyDiskDesigns.biz site against the HTML 4.0 standards.<br /> <br /> ACTIVITY 14C Validate a Web Site 1 In your MyDiskDesigns.biz site, select Window>Results (or press F7) to open the Results panel. You Should Know The name of the green arrow in the Results panel changes to match the tab you currently have selected. For example, when the Validation tab is open, the green arrow is called the Validate button.<br /> <br /> Figure 14.11 The validation report shows that the MyDiskDesigns.biz site does not have any errors.<br /> <br /> Validate button<br /> <br /> 406<br /> <br /> Chapter 14<br /> <br /> 2 In the Results panel, click the Validation tab. On the panel’s left side, click the Validate button and select Settings. 3 In the Preferences dialog box, under If no DOCTYPE is detected, validate against:, click the HTML 4.0 option. Uncheck any other options that might be checked. Click OK. 4 Click the Validate button again. Select Validate Entire Site. Any validation errors will appear in the Results panel (see Figure 14.11). The File column displays the file where the problem exists. The Line column displays the HTML code line where the problem occurs. The Description column displays information about the problem.<br /> <br /> 5 Double-click an item in the Results panel. The selected file opens. If there are any errors, they will be highlighted in the page’s HTML code (see Figure 14.12). Correct any errors you find in the Web site.<br /> <br /> Figure 14.12 Double-click an error to view the selected code.<br /> <br /> Shortcut You can also use the Link Checker report by opening the Results panel, clicking the green arrow in the panel and choosing a report to run from the list of options.<br /> <br /> 6 With your teacher’s permission, in the Results panel, click Save Report. Ask your teacher where to save the report.<br /> <br /> Link Checker Updating hyperlinks is an essential part of Web site maintenance. The Link Checker report identifies broken links in your site or within a particular file. Only broken links will show up in the report. You can also use the report to check your site’s external links. The Link Checker also identifies orphaned files. An orphaned file is a file that does not link to other files in the site. For example, if you replace one image with another image but keep the original image’s file in your site, that file is an orphaned file.<br /> <br /> ACTIVITY 14D Check for Broken Links 1 In your MyDiskDesigns.biz Web site, choose Site>Check Links Sitewide (or press Ctrl + F8). 2 In the Results panel, the bottom of the Link Checker tab displays the results of the link check (see Figure 14.13).<br /> <br /> Figure 14.13 The Link Checker report shows that the MyDiskDesigns.biz site does not have any broken links.<br /> <br /> Publishing a Web Site<br /> <br /> 407<br /> <br /> 3 The status bar displays the number of links in the site, the number of HTML files checked, and the number of orphaned links. It also displays how many of those links are OK, Broken, or External. Near the top of the Results panel, click the Show drop-down arrow and select External Links. The site’s external links are displayed (see Figure 14.14). Double-click a link to go to that link in the site.<br /> <br /> Figure 14.14 Use the Link Checker report to check your site’s external links.<br /> <br /> Troubleshooting You should periodically check for and delete unnecessary orphaned files to keep your site’s overall size down.<br /> <br /> 4 With your teacher’s permission, in the Results panel, click Save Report. Ask your teacher where and how to save your report.<br /> <br /> Target Browser Check It can be difficult to create pages that work effectively in all the different Web browsers currently available. Dreamweaver provides a Target Browser Check that allows you to specify which types and versions of browsers you want to check your site against. In the next activity, you will check the MyDiskDesigns.biz site against some common browsers.<br /> <br /> ACTIVITY 14E Perform a Target Browser Check 1 In your MyDiskDesigns.biz site, open the Results panel, if necessary. Click the Target Browser Check tab. In the panel, click the Check Target Browsers button and select Settings. 2 In the Target Browsers dialog box, under Minimum browser versions, select Microsoft Internet Explorer and set the browser version to 6.0. Select Mozilla, version 1.0. Select Netscape Navigator, version 7.0. Your dialog box should look like Figure 14.15. Click OK.<br /> <br /> Figure 14.15 Use the Target Browsers dialog box to select different types and versions of Web browsers.<br /> <br /> 408<br /> <br /> Chapter 14<br /> <br /> 3 In the Results panel, click the Check Target Browsers button again. Choose Check Target Browsers for Entire Site. 4 Any target browser errors will appear in the Results panel (See Figure 14.16). The panel again displays the File and Line where the error appears, and a Description of the error. Double-click an item to display the file that contains the problem. The item in question will be highlighted. If possible, correct any identified errors.<br /> <br /> Figure 14.16 The Target Browser Check report shows that the MyDiskDesigns.biz site should have no problems when viewed in the selected browsers.<br /> <br /> If there are any HTML tags the Target Browser Check should avoid, you can specify these by clicking the green arrow and selecting Edit Ignored Error List. A file called Exceptions.xml will open to which you can add any tags you do not want to have checked. Ask your teacher for permission before editing this file. Summarize A Link Checker report provides what types of information about a site’s links?<br /> <br /> Section 14.3 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Dreamweaver provides reports to help you locate errors.<br /> <br /> 1. Define report, Validation report, Link Checker report, orphaned file, Target Browser Check.<br /> <br /> 3. Draw Conclusions Why should you do a Target Browser Check?<br /> <br /> • Validation reports ensure your site meets the W3C standards.<br /> <br /> 2. Explain how reports can help you maintain a more efficient and effective Web site.<br /> <br /> • The Link Checker report displays information about internal and external links and orphaned files. • Use the Target Browser Check to check your site against different browsers.<br /> <br /> 4. Compare and Contrast How are a Target Browser Check and a Link Checker report similar and different from each other?<br /> <br /> Apply It! Check Links Your favorite radio station has asked you to help them determine why their Web site has reached its maximum file size. Explain orphaned files to the radio station owners. Then describe how to locate orphaned files in Dreamweaver.<br /> <br /> Publishing a Web Site<br /> <br /> 409<br /> <br /> SECTION 14.4 PROMOTING A WEB SITE Focus on Reading Read to Find Out The main purpose of this section is to learn how to publicize your Web site. Pay close attention to how meta tags are used to influence how a search tool categorizes a Web page.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> A published Web site serves little purpose if few people know about it. You can use different methods to promote your Web site.<br /> <br /> publicize spam link trading meta tag<br /> <br /> Summarize the pros and cons of various Web site publicizing methods. Use a table like the one below (also available online). Publicizing Method<br /> <br /> Pros<br /> <br /> Cons<br /> <br /> Once you have published your site to a Web server, you need to publicize that site. Publicizing a site involves letting the general public know about your site and how to access it.<br /> <br /> Publicizing Web Pages How can I publicize my Web site?<br /> <br /> You can publicize your Web site through a variety of methods. Each technique has advantages and disadvantages.<br /> <br /> Advertising a Site People need to know that a site exists before they can use it. E-mail, print media, and link trading are often used to let people know that a site exists.<br /> <br /> E-Mail Advertising Some Web site publishers use e-mail messages to promote their sites or sell products or services. Many publishers also include a hyperlink embedded in the e-mail’s body to launch the site. This approach can be cost effective since many Internet accounts allow users to send an unlimited number of e-mail messages for no additional cost. However, many ISPs use message filtering technologies to eliminate unsolicited e-mail messages, commonly known as spam, from their users’ e-mail boxes. Some ISPs have even adopted no-spam policies, and they will terminate the accounts of users who violate these rules. In addition, some legislators are drafting laws that would fine the senders of spam. Print Advertising Some Web site publishers send printed ads through regular mail to promote their site. A print ad can reach individuals who do not use e-mail services. However, it costs money to print and mail advertisements and to obtain mailing lists. A printed ad also lacks the immediacy of an e-mail promotion since recipients cannot click a hyperlink to visit the Web site. 410<br /> <br /> Chapter 14<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Link Trading Web sites that share common goals may agree to display a link to each other’s site, an arrangement referred to as link trading. Trading links can increase a Web site’s traffic and attract new visitors who are interested in the site’s subject matter. It also costs very little to trade links.<br /> <br /> Registering with Search Tools Perhaps the most effective way to publicize a Web site is to register it with an Internet search engine or directory service. Registering your site exposes it to millions of Internet users who frequently use search tools to locate products, services, or information on the Web. There are two main disadvantages to registering a site with a search tool:<br /> <br /> You Should Know While link trading is cost effective, it does not always make sense. For example, a company will not want to link its Web site to a competitor’s Web site.<br /> <br /> ◆ Users generally receive many hits when making a search request. Depending on the number of hits received, users may or may not visit your site. ◆ Search engines process so many registration requests that it often takes several days or weeks to include a site in their database. Even with these drawbacks, however, registering a site is an important way to publicize it. In the following activity, you will learn how to register a Web site with a search engine.<br /> <br /> ACTIVITY 14F Register a Site with a Search Engine 1 With your teacher’s permission, open your Web browser. Go to a search engine such as AltaVista, Google, or Dogpile. 2 Locate the engine’s site submission page. For example, on Dogpile, select Submit Your Site. 3 To register your Web site, you would key the site’s URL into the engine’s form and then submit it (see Figure 14.17). Note: Do not enter a URL at this time. Close the submission page.<br /> <br /> Figure 14.17 You can help attract visitors to your Web site by registering it with a search engine.<br /> <br /> Publishing a Web Site<br /> <br /> 411<br /> <br /> Using Meta Tags You Should Know You can see meta tags by viewing a page’s source code. Select View and then Source (or Page Source) from your browser to open a page’s source code in Notepad (meta tags are located near the top of the HTML document).<br /> <br /> Description tag<br /> <br /> Keywords tag<br /> <br /> A meta tag is a piece of HTML code that the Web author places in a page’s file. Meta tags do not affect how the page displays in a Web browser. Instead, they influence how a search tool categorizes the page. Meta tags provide information about the Web site. The “description” meta tag describes the site’s purpose. This description usually displays in a search tool’s search results. The “keywords” meta tag contains words or phrases that describe the site’s content. Search engines use these keywords to create their databases. Adding the right meta tags to your Web pages can improve how your site displays on a search tool’s hit list. The description and keywords meta tags for the Smithsonian Institution are shown below. &lt;meta name=“description” content=“America’s national educational facility with 16 museums, 9 research centers and 120 affiliates around the world.”> &lt;meta name=“keywords” content=“Smithsonian, Smithsonian Institution, education, educational institution, learning, museum, museums, study, research, fieldwork, United States, USA, America, America institution”><br /> <br /> ACTIVITY 14G Add Meta Tags to a Web Site 1 Open your MyDiskDesigns.biz home page (index.html) in Dreamweaver. Select View>Head Content. On the Head Content toolbar, click the Description button.<br /> <br /> Figure 14.18 Use the Head Content toolbar to enter meta tags into your Web site.<br /> <br /> Head Content toolbar Keywords Description<br /> <br /> Description text box<br /> <br /> 2 The Properties inspector changes views to display a Description text box (see Figure 14.18). 412<br /> <br /> Chapter 14<br /> <br /> 3 Key a description of the products and services that the MyDiskDesigns.biz site will offer into the box. Press Tab to insert the information into the page. On the toolbar, click the Keywords button. Enter the keywords for the site in the text box. Press Tab to insert the information. 4 View the page in Code view. The meta tags have been added to the site’s source code. Save and close the site. Close Dreamweaver.<br /> <br /> Shortcut Press Ctrl + ` to change views.<br /> <br /> Explain What information does the description meta tag provide about a Web site?<br /> <br /> Increasing Web Site Traffic How do Web site publishers expand their user base?<br /> <br /> Once a site has established an initial base of visitors, most Web site publishers will want to expand that base over time. Some techniques for increasing Web site traffic include: ◆ Offer periodic sales and promotions. E-commerce sites often use sales to attract repeat customers. Many sites also offer other types of promotions, such as gift certificates, referral bonuses or discounts, or free shipping (see Figure 14.19). ◆ Give away prizes. Some Web publishers sponsor drawings in which Web surfers can win a prize just by visiting the site. ◆ Offer recognition. To some people, the opportunity to win recognition is almost irresistible. For this reason, many Web sites solicit information, suggestions, and articles from their user base, and then publish the names of the contributors.<br /> <br /> Figure 14.19 Periodic sales help attract visitors to Dell’s Web site. How do you think limited time offers help an e-commerce site increase its sales?<br /> <br /> Identify List three types of promotions that Web sites often use to increase Web traffic. Publishing a Web Site<br /> <br /> 413<br /> <br /> Figure 14.20 Privacy settings can be adjusted to control cookies. How are cookies useful? How might they be harmful?<br /> <br /> Using Cookies for Targeted Marketing How can I learn more about my target audience?<br /> <br /> Advertising is most effective when it is aimed at a highly focused target audience. Many Web publishers use cookies to gather information about their target audience. A cookie is a small file stored on the user’s computer that contains specific information about the user. Cookies often contain information regarding what sites the user has visited, the products the user has purchased, how much time and money the user has spent online, and the user’s credit card or checking account information. Businesses use cookies to target users that they think will want to know about a particular promotion or product. However, dishonest people can also use cookies to invade a user’s privacy, or they could even use personal information illegally. For this reason, all Web browsers give users the ability to prevent certain types of cookies from being stored on their computer (as shown in Figure 14.20).<br /> <br /> Define What is a cookie?<br /> <br /> Section 14.4 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Techniques for publicizing Web pages include e-mail, printed ads, link trading, and registering with search tools.<br /> <br /> 1. Define publicize, spam, link trading, meta tag.<br /> <br /> 4. Draw Conclusions Why do you suppose Web sites depend so heavily on repeat visitors?<br /> <br /> • Some search engines use meta tag information to associate a site with a particular topic. • Businesses often use cookie information to target potential customers.<br /> <br /> 414<br /> <br /> Chapter 14<br /> <br /> 2. Describe the methods commonly used to publicize Web sites. 3. Explain what a cookie is and what it contains.<br /> <br /> 5. Compare and Contrast What similarities and differences do you see in promoting a Web site via e-mail and promoting it with printed media?<br /> <br /> Apply It! Promote a Web Site Write a proposal for publicizing an e-commerce Web site that sells extreme sports gear. First, define the objective of the site. Then determine the most effective ways to market the site.<br /> <br /> CHAPTER 14<br /> <br /> Reading Review<br /> <br /> SECTION 14.1 Web Servers Key Terms publish, 394 Web server, 394 Web host, 395 host, 395<br /> <br /> Web server clusters, 396 internal Web hosting, 397 external Web hosting, 397<br /> <br /> SECTION 14.3 Results and Site Reports in Dreamweaver Key Terms reports, 405 Validation report, 406 Link Checker report, 407<br /> <br /> orphaned file, 407 Target Browser Check, 408<br /> <br /> Main Ideas<br /> <br /> Main Ideas<br /> <br /> ■ Consider your site’s technical needs when selecting<br /> <br /> ■ Dreamweaver provides reports to help you locate<br /> <br /> a Web server. ■ Consider costs and benefits when selecting a Web host. ■ Internal hosting is when a company hosts its own sites. External hosting is when a company uses a hosting service.<br /> <br /> ■ ■ ■ ■<br /> <br /> SECTION 14.2 The Publishing Process<br /> <br /> errors. Validation reports ensure your site meets the W3C standards. The Link Checker report displays information about internal and external links and orphaned files. An orphaned file is a file without any links to other files in the site. Use the Target Browser Check to check your site against different browsers.<br /> <br /> Key Terms InterNIC, 399 case sensitive, 399 directory structure, 400 download, 401 upload, 401 File Transfer Protocol (FTP), 401 cross-platform testing, 403<br /> <br /> Main Ideas<br /> <br /> SECTION 14.4 Promoting a Web Site Key Terms publicize, 410 spam, 410<br /> <br /> Main Ideas ■ Techniques for publicizing Web pages include e-mail,<br /> <br /> ■ Web site names should be as unique, logical, and ■<br /> <br /> ■ ■ ■<br /> <br /> short as possible. When you publish your site, you must keep its directory structure exactly the same on the server as it was on the computer used to develop the site. HTTP is the most common protocol used to download files. FTP is the most common protocol used to upload files to a Web server. You should test your published site on a variety of hardware configurations and browsers to make sure that it displays properly.<br /> <br /> link trading, 411 meta tag, 412<br /> <br /> ■<br /> <br /> ■ ■<br /> <br /> ■<br /> <br /> printed ads, link trading, and registering with search tools. Meta tags provide additional information about the Web page, including keywords indicating the site’s purpose and content. Some search engines use meta tag information to associate a site with a particular topic. Sites can increase traffic by offering sales and promotions, giving away prizes, or offering recognition. Businesses often use cookie information to target potential customers.<br /> <br /> Publishing a Web Site<br /> <br /> 415<br /> <br /> CHAPTER 14<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ<br /> <br /> 16. Explain how to register a domain name. Step<br /> <br /> ➠ ➠<br /> <br /> Create an Outline Use the headings in this chapter to create an outline. Use red headings as Level 1 main ideas. Blue headings are Level 2. Use the information under the blue headings to fill in Level 3 and Level 4 details. Keywords and green headings might also be included as supporting details.<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.<br /> <br /> Step<br /> <br /> Reviewing Key Terms 1. What is a Web server? 2. What is the difference between internal Web hosting and external Web hosting? 3. Change the following sentence to make it true: When you download files, you transfer them from a client computer system to a server. 4. What is InterNIC? 5. What is the most common protocol for downloading files? 6. Why is cross-platform testing important? 7. List three reports that you can run in Dreamweaver. 8. What is spam?<br /> <br /> Understanding Main Ideas 9. Explain why a Web site must be published before visitors can view the site in their browsers. 10. Summarize five factors that affect a Web server’s efficiency. 11. Discuss the reasons that a site’s directory structure should be well organized. 12. Summarize the importance of case sensitivity when transferring Web page files to a server. 13. Identify five methods that can be used to publicize and promote a new Web page. 14. Evaluate the advantages and disadvantages of e-mail advertising. 15. Describe three ways to increase traffic to a Web site. 416<br /> <br /> Chapter 14<br /> <br /> Step<br /> <br /> 17. Identify five factors you need to consider when selecting a Web host.<br /> <br /> Web host<br /> <br /> Critical Thinking 18. Analyze Imagine you are helping a small company choose an external Web host. What factors would you tell the company to consider when making its choice? Why would the level of technical support provided by the Web host be a factor in determining which Web host to use? 19. Compare and Contrast Scalability and reliability are two important factors in a Web server’s efficiency. Distinguish between these two factors and create a table showing their characteristics. Scalability<br /> <br /> Reliability<br /> <br /> CHAPTER 14<br /> <br /> Review and Assessment<br /> <br /> 20. Draw Conclusions You are responsible for publishing a Web site that has several hundred pages organized into about twenty folders. How would a log of publishing events be useful to you? 21. Evaluate You are in charge of marketing for a small Web site and you want to expand the site’s user base. Do you promote the use of cookie information, spam, or link trading as a first choice? Use a pyramid chart to put your preferences in a hierarchy, and explain your rationale.<br /> <br /> Tables Read the paragraph and chart below and then answer the question.<br /> <br /> Companies who provide their own Web server are using internal Web hosting. Companies who pay someone else to host their site are using external Web hosting. Internal Hosting Advantages • Company has greater control over content and functionality of Web site • Better suited for hosting Web applications that access large databases or conduct financial transactions<br /> <br /> Choice 1<br /> <br /> External Hosting Advantages • More cost effective than buying a Web server • Can provide more up-to-date computer hardware and equipment<br /> <br /> Choice 2<br /> <br /> According to the table, which of the following statements is true?<br /> <br /> Choice 3<br /> <br />  It is more cost effective to buy a Web server.<br /> <br /> 22. Analyze Your Web site is getting fewer hits now than it did when it was first published. What might be some reasons for this decline and how might you help your site receive more hits?<br /> <br />  Companies who own Web servers have greater control over their Web sites.  Companies who buy their own server have more up-to-date computer equipment.  Companies who conduct a lot of financial transactions find it is better to pay someone to host their site.<br /> <br /> You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> On your own paper, copy and complete the chart shown below.<br /> <br /> Study with PowerTeach<br /> <br /> Result<br /> <br /> 23. 24.<br /> <br /> +<br /> <br /> Result<br /> <br /> 25.<br /> <br /> +<br /> <br /> Result<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 14.<br /> <br /> Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 14. Publishing a Web Site<br /> <br /> 417<br /> <br /> CHAPTER 14<br /> <br /> Activities<br /> <br /> 1. MAKING CONNECTIONS Language Arts—Conduct a Debate Conduct a classroom debate on the following topic: Cookies should not be allowed because using cookies to collect information is an invasion of a user’s privacy. With your teacher’s permission, organize into two teams. One team will argue for the use of cookies, while the other will argue against the use of cookies. Research the issues involved and be prepared to argue your assigned point of view. As part of your research, review privacy policies at two different Web sites that you frequent. Are cookies mentioned? Does the information support your side? Identify three examples that you can use to support your argument. Use a main idea chart like the one shown below to help organize your evidence. Cookies<br /> <br /> ➠<br /> <br /> ➠<br /> <br /> ➠<br /> <br /> Supporting Evidence<br /> <br /> Supporting Evidence<br /> <br /> Supporting Evidence<br /> <br /> 2. STANDARDS AT WORK Students use productivity tools to collaborate in constructing technology-enhanced models, prepare publications, and produce other creative works. (NETS-S 3)<br /> <br /> Create a Web Page with Meta Tags Create a one-page Web page in Dreamweaver. This page is targeted at families in your community who have children under the age of five. The purpose of the page is to provide an overview of services available to these young children and their families. These services could include health care centers, preschools, day care centers, and local parks, recreation areas, and businesses that cater to children. List four services or businesses on your page. To keep the amount of text on the page to a minimum, you decide: ◆ To include a one-sentence description for each service or business ◆ To provide a link to the Web site for each service or business You want to provide the right meta tags to improve how your community service site displays on a search tools hit list. Consider what meta tags you need to include to make this happen. Add these meta tags to your page. 418<br /> <br /> Chapter 14<br /> <br /> CHAPTER 14<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Publicize a Web Site Your team is creating a Web site for a business that offers classes in English as a second language. Your intended audience is recent immigrants to the United States who have limited English skills. 1. Select a name for the business. 2. Select a domain name for the Web site. 3. Explain why this is a good domain name for your site. 4. Research the domain name to see if it is available. If it is not available, select another domain name. 5. Write an advertising plan that describes how you will let people know about the site. Identify and describe at least three ways to advertise the site. 6. List your three choices. Place the method that you think would be most effective at the top of your list. Explain why you think this method would be an effective way to advertise your site. Create a matrix like the one below showing your choices, reasons, and results.<br /> <br /> Method<br /> <br /> POSSIBLE ADVERTISING PLANS Reason<br /> <br /> Results<br /> <br /> 1. 2. 3.<br /> <br /> 4. CHALLENGE YOURSELF Recommend a “Pay-per-click Service” You are helping a local bed and breakfast launch their Web site. The owners are interested in the “pay-per-click” service available from some search engines. With this service, a search engine will list your site as a link, a banner, or at the top of the search list for a small fee. Charges are based on the number of people who actually click on your URL. Research the “pay-per-click” services available from three search engines. Locate their pricing structures and other important information about their programs. Based on your research, create a chart that compares pricing structures. Write a paragraph recommending one of the services. State the reasons for your choice. Publishing a Web Site<br /> <br /> 419<br /> <br /> CHAPTER 14<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Calculate Web Site Size<br /> <br />   <br /> <br /> <br /> <br /> You are ready to publish the Language Club Web site. In this activity, you will calculate the size of the Web site and estimate the minimum amount of bandwidth that a Web host will need to host your site. Locate your Language Club site’s root folder. Open the folder’s Properties dialog box and write down the Web site’s size. Estimate the number of visitors you expect to access your site in a month. Assume that 15 percent of the students in your school will visit the site each month. In addition, you expect about 50 people outside the school to access the site monthly. Calculate the site’s approximate transfer bandwidth by multiplying the estimated number of visitors per month by the Web site’s size.<br /> <br /> 2. Add Meta Tags and Publish a Site     <br /> <br /> Select a site you have created in this course, but have not yet published. Add meta tags to the source code and publish the site. Find at least two sites on the Web covering the same topic as your site. View the source code for these sites. Identify any meta tags used by these sites. Based on your research of other sites, as well as your own ideas, create a list of meta tags for your site. Use a table like the one shown here to organize your meta tags. Open the site you want to publish in Dreamweaver. Add your meta tags to your site. Publish your site using the instructions your teacher supplies. Be sure to ask for your teacher’s permission before publishing the site! View the site in a browser. View the site’s source code to check the meta tags you created. DESCRIPTION<br /> <br /> 420<br /> <br /> Chapter 14<br /> <br /> KEYWORDS<br /> <br /> CHAPTER 14<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the directions to complete each project.<br /> <br /> 1. Organize Web Site Structure The Tools for Home and Business Company wants to offer its products online. Use Dreamweaver to create the Tools for Home and Business Web site. Use placeholder text for graphics. Use a diagram like the one shown here to organize the site’s files. Then use that information to create the directory structure in Dreamweaver. Select a consistent naming structure and use lowercase for all file and folder names. If you were to choose a Web host that required case sensitive file names, how would using all lowercase make a difference? ◆ The home page should contain a company overview and a table of contents with links to all the site’s pages. ◆ The Tools for Home page should include information and photos about small power tools, gardening tools, plumbing tools, and first aid kits. ◆ The Tools for Business page should include information and photos about large tools such as table saws, electric sanders, and routers. ◆ Add an order form that allows customers to place an order and e-mail it to the business. Home Page<br /> <br /> Contact Us<br /> <br /> About Us<br /> <br /> FAQ<br /> <br /> Tools for Home<br /> <br /> Products<br /> <br /> Tools for Business<br /> <br /> Order Form<br /> <br /> Products<br /> <br /> Order Form<br /> <br /> 2. Publish a Site With your teacher’s permission, upload the Tools for Home and Business Company site to a server. ◆ Run reports to test the site before you publish it. Check for code validation and broken links. Also run a Target Browser Check using different browsers. ◆ Add meta tags to your site. ◆ With your teacher’s permission, publish the site and test the site in two browsers to make sure that the site structure has transferred properly. If possible, test the site on different hardware configurations.<br /> <br /> Publishing a Web Site<br /> <br /> 421<br /> <br /> CHAPTER<br /> <br /> 15<br /> <br /> Maintaining a Web Site<br /> <br /> YOU WILL LEARN TO… Section 15.1 Identify Webmastering tasks Identify Web server maintenance techniques Describe the importance of backups Section 15.2 Identify guidelines for updating a site Explain the purpose of archiving a Web site Edit and update a Web page Section 15.3 Identify Web site access controls Create a login screen<br /> <br /> WHY IT MATTERS ................................................. Most people would welcome the opportunity to live in a beautiful home. Even the grandest house, however, loses its appeal if the roof leaks or the walls are falling down. Most objects require maintenance to keep them attractive and useful. Web sites are no exception. You must repair and update your sites on a regular basis if you want your visitors to return. Think about the Web sites you have created. What items on these sites might need maintenance? What would happen if you failed to maintain these items? What impact could this have on people who visit your site? How does maintenance make a Web site more useful or attractive to visitors?<br /> <br /> 422<br /> <br /> Chapter 15<br /> <br /> CHAPTER<br /> <br /> 15<br /> <br /> WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 15.1 Choose a Data Backup Utility.... 427 15.2 Plan Updates to a Site ............... 432 15.3 Analyze Security......................... 436 You Try It Activities 15A Research Webmaster Jobs ....... 427 15B Download and Upload Files from a Remote Server ............... 430 15C Create a Login Screen ............... 434 Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................<br /> <br /> 440 440 441 441<br /> <br /> You Try It Skills Studio Update a Web Site ............................... 442 Create a Job Description .................... 442 Web Design Projects Document a Procedure ....................... Plan and Develop a Web Site .............. Develop a Commercial Web Site ........ Create an Online Portfolio ..................<br /> <br /> 443 443 444 445<br /> <br /> IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects<br /> <br /> ON THE WEB Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments<br /> <br /> BEFORE YOU READ Two-Column Notes Two-column notes are a useful way to organize and study what you have read. Divide a piece of paper into two columns. In the left column, write down main ideas. They can be written as a word, phrase, or question. In the right column, write down supporting details. Use short phrases rather than sentences. For example, a main idea could be types of monitors, and the details could be: 1) CRT (cathode ray tubes) are less expensive. Take lots of power and space. 2) Flat screens use LCD (liquid crystal display). Images may not be as clear as CRT.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Maintaining a Web Site<br /> <br /> 423<br /> <br /> SECTION 15.1 WEB SERVER MAINTENANCE Focus on Reading Read to Find Out This section focuses on Web server maintenance. Read to find out how to back up critical system data.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> A Webmaster’s primary responsibility is Web server maintenance. Maintenance includes diagnosing and repairing a server’s hardware and software, and backing up critical system data.<br /> <br /> hot-swappable hard drives hard drive mirroring backup incremental backup<br /> <br /> Identify three important tasks required to maintain a Web server. Use a table like the one below (also available online). Maintenance Task<br /> <br /> Purpose of Task<br /> <br /> Web server maintenance involves several kinds of tasks. Webmasters must monitor both the Web server’s hardware and its software to make sure that they are working correctly. In addition, Webmasters must back up Web server data to preserve the data in case of a malfunction. Activity 15.1 Explore Web Server Maintenance Find out more about maintaining a Web server by visiting WebDesignDW.glencoe.com.<br /> <br /> Maintaining a Web Server How does a Webmaster monitor a server’s hardware and software?<br /> <br /> The Webmaster is responsible for ensuring the uninterrupted operation of the company’s Web servers. Although some Webmasters develop and publish Web sites, most primarily focus on making sure the servers can properly upload, download, store, and back up Web site files.<br /> <br /> Uploading and Downloading Capabilities A Web server’s primary function is to upload and download Web site files. The server’s ability to do this depends on two basic components.<br /> <br /> Communication Hardware The first component is the communication lines and equipment that allow the server to “talk” to the outside world. This equipment includes hardware such as network adapters, routers, load balancers, and firewalls. The Webmaster must diagnose and repair this hardware should it fail. However, individual Webmasters or businesses have little or no control over other types of communication failures. Large telecommunications companies, such as AT&T, Verizon, BellSouth, SBC, and Sprint, own and operate most transmission lines (see Figure 15.1 on page 425). If these channels fail, the Web site host will not be able to fix the problem. For this reason, some Web hosts lease high-speed data lines from two or more telecommunications vendors so that they can still service customers if one network goes down. 424<br /> <br /> Chapter 15<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Figure 15.1 Telecommunications companies customize services for businesses and individuals. What type of customer would be most likely to use high-speed data lines?<br /> <br /> Communication Software The second component that determines a server’s ability to upload and download files is the protocol software that controls the flow of data across the communication lines. The HTTP and FTP software that a Web server uses to transfer data may crash or malfunction as the result of a program bug or a power failure. The Webmaster must quickly address any software glitch that causes the server to stop responding to requests. In some cases, the Webmaster can stop and restart the offending server without affecting other programs. However, sometimes the Webmaster may have to reboot the entire server to recover from such an error.<br /> <br /> Storage Capabilities<br /> <br /> You Should Know Web servers use ports to connect to the Internet. The Web server that connects to the World Wide Web is typically port 80 and the FTP server is typically port 21. Clients connect to services at a specific IP address and port.<br /> <br /> Web hosting services that allow their users to upload files must prepare for the possibility that their storage space will fill up. Once this happens, the Web server itself may crash because the operating system can no longer create files. To prevent problems, a Webmaster must delete unused or outdated files when possible, or upgrade the server’s storage capacity before problems occur. Webmasters use different techniques for maintaining a Web server’s storage devices. Some Web servers use a system of between two and six hot-swappable hard drives to store information. Each drive has a small indicator that glows green when the drive is operating correctly and red when it fails. If a failure occurs, the Webmaster can easily remove the damaged drive from the server and replace it without having to turn off the server. Some Web servers use a technique called hard drive mirroring to maintain storage. With this option, data written to a primary drive are automatically written onto one or more secondary drives in a parallel operation. If the primary drive fails, a secondary drive takes over. This switch occurs automatically, without requiring any manual intervention, so the Web server remains fully functional. Maintaining a Web Site<br /> <br /> 425<br /> <br /> Table 15.1<br /> <br /> Storage Option Pros and Cons<br /> <br /> Web server storage maintenance options vary significantly in complexity and cost. Which storage option would a small business probably choose to maintain its server’s storage?<br /> <br /> Storage Option<br /> <br /> Pro(s)<br /> <br /> Con(s)<br /> <br /> Hot Swappable Hard-Drive<br /> <br /> Damaged drives can be replaced quickly without having to power down the server.<br /> <br /> Substantially more expensive than standard hard drives.<br /> <br /> Hard Drive Mirroring<br /> <br /> No down time (the computer works without interruption). Inexpensive to replace drives in system.<br /> <br /> Speed at which data are stored may not be as fast as other storage options.<br /> <br /> As shown in Table 15.1, each storage option has pros and cons. The Webmaster must assess the company’s needs when deciding which option to choose.<br /> <br /> Backing Up Data The loss of critical information can potentially drive a company out of business. For example, an e-commerce business that loses its customer information database will not be able to fulfill orders and will lose money. Webmasters protect the company’s valuable information by making backups. A backup is a copy of a specific set of data. Webmasters can store backups on: ◆ Tapes ◆ CD-ROMs ◆ Hard drives ◆ Floppy disks Some backup systems can transmit data over the Internet to a remote location, thereby protecting the data from any disaster that might occur at the source location. Sometimes the backup is an exact copy of the original data. Other times, the files are compressed so that they occupy less disk space on the backup device. Nearly all backup devices give users the option of doing a complete system backup or an incremental backup. An incremental backup only stores data on the backup device that have changed since the last full backup was performed. When evaluating various backup solutions, Webmasters must consider factors such as performance, convenience, and cost. Many Webmasters will choose a simple, low-cost backup strategy, while others will opt for extra performance and extra data protection at a higher cost. Explain Why must a Webmaster regularly delete a site’s unused or outdated files?<br /> <br /> 426<br /> <br /> Chapter 15<br /> <br /> The Role of the Webmaster What skills do I need to become a Webmaster?<br /> <br /> A Webmaster’s primary role is to maintain a Web site. In the next activity, you will examine the skills required to become a Webmaster.<br /> <br /> ACTIVITY 15A Research Webmaster Jobs 1 With your teacher’s permission, go to a career resource Web site such as America’s Job Bank (www.ajb.dni.us). 2 Use the search feature to locate information about the career of Webmaster (see Figure 15.2). For example, the Princeton Review provides salary information, an overview of a typical day in the life of a Webmaster, and an occupational forecast. 3 Go to a job Web site. Use the search feature to view the job description of three Webmaster positions. Make a list of the job Copyright © 2005 America’s Job Bank. skills for this position. Write a Used by permission. report that describes the tasks performed by a Webmaster and the skills needed to do these tasks.<br /> <br /> Identify What is a Webmaster’s primary role?<br /> <br /> Enter job title here<br /> <br /> Figure 15.2 The America’s Job Bank site provides information about the job market and the skills needed for a specific career.<br /> <br /> Section 15.1 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • The Webmaster maintains the uninterrupted operation of the company’s Web servers.<br /> <br /> 1. Define hot-swappable hard drives, hard drive mirroring, backup, incremental backup.<br /> <br /> 4. Compare and Contrast Explain the similarities and differences between a complete backup and an incremental backup.<br /> <br /> • Webmasters protect the company’s data by making backups. • A Webmaster’s primary role is to maintain a Web site.<br /> <br /> 2. Summarize the important aspects of maintaining a Web server. 3. Identify various strategies for data storage maintenance.<br /> <br /> 5. Draw Conclusions What can you conclude about the value a skilled Webmaster brings to a large company?<br /> <br /> Apply It! Choose a Data Backup Utility Use the Web to locate information on three backup utilities. Determine the features and cost of each one. Then, recommend the one that you believe provides the best overall value.<br /> <br /> Maintaining a Web Site<br /> <br /> 427<br /> <br /> Privacy Issues and the Internet<br /> <br /> W<br /> <br /> hen you voluntarily give out personal information over the Internet, you may unknowingly let someone track your online activities.<br /> <br /> Site Registration Many Web sites ask visitors to register in order to purchase from an online store, enter a sweepstakes, or join a chat room. While many Web sites use this information to improve services, some sites sell or share users’ personal information. To avoid this problem, check the site’s privacy statement to see how it will handle your information.<br /> <br /> Cookies and Web Bugs Cookies are text files that a Web site can Some operating systems provide tools for blocking place on your computer. A Web bug is a cookies. GIF-format file used to gather information from your system. Web bugs are harder to track than cookies. For example, you can easily find a collection of cookies on your hard drive. To find Web bugs, you need to view a Web page’s underlying code.<br /> <br /> Taking Precautions Here are some other steps you can take to guard your privacy online: ◆<br /> <br /> To avoid spam, some users get a second address (such as a free Web-based e-mail account) to access sites that require registration.<br /> <br /> ◆<br /> <br /> You are not anonymous in newsgroups and chat rooms! If you post a message, a user can track you by your IP address, so be careful what you post.<br /> <br /> ◆<br /> <br /> Use a cookie management program with Web bug controls to keep Web bugs off your system and reject the cookies you do not want.<br /> <br /> 1. Make Recommendations Research a potential problem between employees and employers regarding individual privacy and the Internet. What measures can users or organizations take to overcome this problem? Share your findings with the class. 428<br /> <br /> Chapter 15<br /> <br /> 2. Analyze an Issue Using the Internet can give you access to information about a variety of topics. It can also give others access to information about you. Is it worth giving up your privacy for the convenience of using the Internet? Write an essay that analyzes this conflict.<br /> <br /> SECTION 15.2 UPDATING INFORMATION Focus on Reading Read to Find Out It is important to update the information on a Web site to fix errors and keep the site useful to visitors. Read to find out how to update and archive Web pages.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Published Web sites require regular updating. Webmasters often archive rather than discard the elements they remove. Preparing technical documentation is an important part of Web site maintenance.<br /> <br /> file management direct server update local client update archiving<br /> <br /> Compare and contrast direct server updates and local client updates. Use a Venn diagram similar to the one below (also available online). Direct Server<br /> <br /> Local Client<br /> <br /> Webmasters are responsible for updating information on the site and fixing errors. As the Webmaster of the sites you create, you should plan to update your sites regularly.<br /> <br /> Figure 15.3<br /> <br /> Guidelines for Updating a Site What factors should I consider when updating my site?<br /> <br /> Some sites require constant updating to remain useful. Companies must update their sites to display new merchandise and offers (see Figure 15.3). When updating a site, consider the following guidelines:<br /> <br /> Merchandise displays on e-commerce sites change frequently. What other types of sites should be updated frequently?<br /> <br /> ◆ Think about how your changes will benefit your visitors. ◆ Frequently update content elements such as the site’s graphics, text, last-updated date, and recommended links. ◆ Try to maintain the site’s overall structure, navigation bars, logos, color schemes, and contact information. Changing these elements may confuse repeat visitors. ◆ Schedule regular updates. © 2000–2005, Walmart.com USA, LLC and Wal-Mart Stores, Inc. All rights reserved. Wal-Mart, Walmart.com and the Wal-Mart logo are trademarks or registered trademarks of Wal-Mart Stores, Inc.<br /> <br /> Explain Why do some sites require constant updating to remain useful? WebDesignDW.glencoe.com<br /> <br /> Maintaining a Web Site<br /> <br /> 429<br /> <br /> Managing and Archiving Web Files How can file management help me maintain my site? Caution If you update a live site, viewers may see your half-completed changes as you work on the page. You should only update a live site if you need to make an emergency fix, such as correcting important information or replacing broken links.<br /> <br /> You Should Know When you switch from Local to Remote view, the folders in the Files panel change colors. This can help you know what view you are currently seeing in Dreamweaver.<br /> <br /> A comprehensive Web site maintenance plan should include a strategy for file management. File management refers to creating, naming, moving, updating, deleting, and archiving files on a computer system.<br /> <br /> Editing and Updating Files Webmasters can update a Web page in one of two ways. They can either perform direct server updates or local client updates.<br /> <br /> Direct Server Updates A direct server update involves updating the file directly on the Web server where it resides. The Webmaster opens a text editor, such as Notepad, on the server, loads the Web page for editing, makes the desired changes, and saves the file back to the server. This process allows updates to become visible to visitors immediately. Local Client Updates You can make a local client update by downloading a Web page and modifying it on a client workstation (for example, on the computer you used to create the Web site). You can then upload the revised page to the server. Web surfers will not see the new version until you upload the file to the server. In the following activity, you will use the Dreamweaver FTP tool to download and edit a file from your published MyDiskDesigns.biz Web site. You will not be able to complete this activity if you have not already published this site using FTP (see You Try It activity 14B on page 401). If necessary, talk to your teacher about publishing this site before starting this activity.<br /> <br /> ACTIVITY 15B Download and Upload Files from a Remote Server Figure 15.4 The news.html file downloaded from the remote site to the local site.<br /> <br /> Get permission from your teacher before starting this activity!<br /> <br /> 1 Open your MyDiskDesigns.biz Web site in Dreamweaver. In the Files panel toolbar, click the Connects to remote host button to connect to the server where your site is published. After you are connected, select Remote view in the Files panel. Get File(s)<br /> <br /> 430<br /> <br /> Chapter 15<br /> <br /> 2 In the Files panel, open the pages folder and open the news.html file. On the Files panel toolbar, click Get File(s) (or press Ctrl + Shift + D) to download the file. In the Dependent files dialog box, click No. The news.html file has been downloaded to the local site (see Figure 15.4).<br /> <br /> 3 In the Files panel, click the Disconnects from remote host button to disconnect from the server. Switch to Local view. 4 Open the news.html file. Press Ctrl + F. In the Find and Replace dialog box, in the Find box, key: 1000th. In the Replace box, key: 2000th. Click the Replace button. After you have updated the file, save your changes. If possible, browse to your published site and open the News page. Note that your changes do not appear in the page on the remote server. 5 To upload the edited file, in the Files panel, select the news.html file. Click the Put File(s) button (or press Ctrl + Shift + U) to upload the file to the remote site. If necessary, in the Dependent Files dialog box, click No. 6 Browse to your published site and open the News page to view your changes. In Dreamweaver, you can also switch to Remote view to view pages located on your remote server. If you are connected to the server, you should see your changes (see Figure 15.5). In Dreamweaver, disconnect from the remote server and close the Web site.<br /> <br /> Figure 15.5 Modified page viewed in Remote view.<br /> <br /> Put File(s)<br /> <br /> Text change<br /> <br /> You can synchronize local and remote files by using the Synchronize command on the Files panel option menu. Synchronizing allows you to replace older files with newer files, so your published site is always up-to-date. You can use the Synchronize command to synchronize your entire Web site or selected files.<br /> <br /> Automated Updates Any Web site that requires frequent changes must use an automated update process. This allows multiple people to generate new Web content on their local workstations, test those pages to ensure that they look right and function correctly, and then submit them for inclusion in the next regular Web site update. An automated tool can then connect to the server (or servers) via HTTP or FTP and post all of the new content files in a single operation. This allows many people to perform updates, while protecting the live Web site from mistakes and/or tampering.<br /> <br /> Caution When you save a file while working in Remote view, you only save a copy to your local client. To save the file to the server, select File>Save to Remote Server or press Ctrl + Shift + U.<br /> <br /> Maintaining a Web Site<br /> <br /> 431<br /> <br /> Archiving Web Pages When you update a site, do not immediately discard old Web elements. Instead, keep old pages and graphics for at least six months to a year. Old pages and graphics can be reused. The process of saving old pages is called archiving. You can store archived information in several ways. The easiest way is to create a folder named “Archive” and copy old Web page elements into subfolders within that folder. You can store an archive folder on a local computer, a removable storage device, or your Web host’s server. When archiving an HTML document, remember to archive the document’s associated graphics files and folders. Store the graphics in a folder with the same name as the original graphics folder so that your archived page’s links will work properly.<br /> <br /> Developing Technical Documentation Many Web site publishers provide various forms of technical documentation to accompany their software. Such documentation might be intended for Web site users, Webmasters, or even Web developers. Regardless of its intended readership, documentation is an essential part of a Web site. Web site user documentation is usually limited to online help files or downloadable PDF files that users can print or view electronically. Documentation intended for Web site content developers contains instructions for creating content in a form that will flow easily into the Web page design. Other people, such as Webmasters and system administrators, may require documentation to learn how to execute automated publishing tools and to verify that an update runs smoothly. Define What is a local client update?<br /> <br /> Section 15.2 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • A Web site requires regular updating to keep it useful and attractive to visitors.<br /> <br /> 1. Define file management, direct server update, local client update, archiving.<br /> <br /> 4. Compare and Contrast How are direct server updates similar to and different from local client updates?<br /> <br /> • To make a local client update, download the page from the remote site, change it on your computer, and upload the modified page to the server. • After you update a site, archive rather than discard old Web elements.<br /> <br /> 432<br /> <br /> Chapter 15<br /> <br /> 2. Explain the importance of archiving Web pages. 3. Summarize why it is useful to develop technical documentation.<br /> <br /> 5. Summarize Describe the steps you would use to download a file from an FTP site.<br /> <br /> Apply It! Plan Updates to a Site The MyDiskDesigns business plans to add disk cases to their product line. Describe your plan to update the site to include these cases. Explain the reasons for your planned updates.<br /> <br /> SECTION 15.3 KEEPING A WEB SITE SECURE Focus on Reading Read to Find Out Ask yourself why safeguarding the confidentiality of users’ personal data is important to e-commerce sites. Read to find out how Webmasters keep a site secure.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Many Web sites collect valuable information about the Web surfers who visit them. Part of a Webmaster’s job is keeping this personal data secure from unauthorized access.<br /> <br /> access control password user authentication global access control<br /> <br /> Describe three ways to control access to a Web site. Use a web diagram similar to the one below (also available online). Access Control<br /> <br /> Web servers often contain important information such as individuals’ names, addresses, phone numbers, e-mail addresses, credit card information, and other personal data. Safeguarding this data must be a primary concern for any Web site publisher who collects and stores such information.<br /> <br /> Controlling Access to a Site How can Webmasters control access to data on a site?<br /> <br /> Webmasters are usually responsible for setting up a system that will allow access to a site for users with permission and keep out users without permission. Restricting the availability of a site to a specific set of authorized users is known as access control.<br /> <br /> Password Controls Passwords are a common form of access control. A password is a set of letters or numbers that a user enters to gain access to a site. Almost every Web site that restricts access to a specific group of authorized users requires a user ID and a password. The system checks the password entered by the user to make sure it matches the one assigned to the identified user. This process is known as user authentication. Some sites encourage users to improve the security of their passwords by enforcing various password rules. For example, one site might require that passwords contain a minimum number of characters, while another site might reject all passwords that do not include at least one number. Other sites require users to change their password every 30, 60, or 90 days. All of these rules make it harder for hackers to use other people’s passwords. WebDesignDW.glencoe.com<br /> <br /> Jargon People skilled at fooling computer systems into granting access to restricted information or performing unauthorized operations are commonly known as hackers.<br /> <br /> Maintaining a Web Site<br /> <br /> 433<br /> <br /> To enter a protected Web site, users must typically enter their user ID and password into the site’s login screen. In the following activity, you will use Dreamweaver to create a login screen.<br /> <br /> ACTIVITY 15C Create a Login Screen 1 Open Dreamweaver. Create a new HTML page in Design view. Title the page: Login Screen. 2 With the Insert toolbar in Forms view, click the Form button to add a form tag and outline to the document. 3 In the form outline, key: User name:. Press the spacebar once. On the Forms toolbar, click the Text Field button. With the text field selected, in the Properties inspector, under TextField, key: username. In the Char width box, key: 40. Press Enter. In the form, click after the text field and press Enter once. 4 Key: Password:. Press the spacebar. Click Text Field again. In the Properties inspector, under TextField, key: password. In the Char width box, key: 40. Next to Type, select Password. 5 Ask your teacher where to save the file. Save the file as: login.html. Preview the file. Your screen should look similar to Figure 15.6.<br /> <br /> Figure 15.6 The login screen requires the user to enter a username and password.<br /> <br /> 6 Key some text in the User name box. Enter the same text into the Password box. Note that the text does not display the same way in both boxes (see Figure 15.7). Close your browser. Save and close your Web page.<br /> <br /> Figure 15.7 The password is automatically obscured.<br /> <br /> When you key text into the Password field, dots or asterisks replace the text. Obscuring text in the Password field helps promote Web site security by keeping the password a secret from other users. 434<br /> <br /> Chapter 15<br /> <br /> Global Access Controls Once the site authorizes a user to enter, it may use additional access control mechanisms to safeguard valuable data. Granting or denying access to system data for multiple users is known as global access control. Users are assigned to groups, and different groups are given different levels of access to the system. For example, one group of users may be granted rights to view system data but denied the right to change any data. Another group may be given rights to enter new data records into the central database but not to delete an existing record from it. The administrator group typically has rights to perform any operation to the system. Only a small number of people, such as the Webmaster and the system administrators, have this high level of access. Potential user groups and their levels of access are shown in Figure 15.8. User Group 1<br /> <br /> • •<br /> <br /> Activity 15.2 Explore Global Access Controls Find out more about global access controls by visiting WebDesignDW.glencoe.com.<br /> <br /> Figure 15.8<br /> <br /> User Group 2<br /> <br /> View system data Denied the right to change any system data<br /> <br /> Global Access Controls<br /> <br /> • •<br /> <br /> Using global access control can substantially enhance a Web site’s security. Which user group is probably the administrator group?<br /> <br /> Enter new data records Denied the right to delete data records<br /> <br /> User Group 3<br /> <br /> • • • •<br /> <br /> View system data Change system data Enter new data records into central database Delete data records<br /> <br /> Describe What is a password?<br /> <br /> Ethics and Webmastering What ethical decisions must a Webmaster address?<br /> <br /> The need for Web site security is well established, as is the technology to implement such security. However, the question still remains as to how much security any given Web site publisher should be required to provide. For instance, a public school district that provides information about its students’ grades should take steps to ensure that such information is not made available to everyone. However, should that district be required to implement passwords, global access controls, and other measures to keep that information as secure as possible? These questions do not yet have a clear legal answer. Webmasters often must make ethical decisions when monitoring Web sites. For instance, some Web sites allow users to upload images to the server. Web hosting services often store image files in a “holding” directory until a moderator, who may be the Webmaster, can preview them. Once approved, the files are then moved to a “live” directory. During this process, the Webmaster must make choices regarding what is and is not appropriate material. These ethical choices are sometimes part of the Webmaster’s job. WebDesignDW.glencoe.com<br /> <br /> Maintaining a Web Site<br /> <br /> 435<br /> <br /> In this unit, you learned about some of the Web site features that give businesses a strong online presence. Whether you are developing a Web site for a major corporation, or creating a site for your own personal use, many of the same basic steps need to be followed, as shown in Figure 15.9.<br /> <br /> Figure 15.9 Use a checklist like the one shown here to answer some of the basic questions for Web site development.<br /> <br /> Development Checklist<br /> <br /> ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑ ✓ ❑<br /> <br /> Establish team members and assign tasks Maximize site accessibility Include tools to collect visitor information Apply privacy and security policies Evaluate Web host options Select and register domain name Publish and test Web site Identify techniques for publicizing site Identify maintenance techniques Protect the company’s data by making backups Make ethical choices about what is and is not appropriate material for the Web site<br /> <br /> The projects you have completed throughout this book have given you the fundamental skills needed to create interesting, user-friendly Web sites. In the next unit, you can enhance these skills by learning more about how to use HTML code. As you develop as a Web designer, you will continue to build upon the basic skills learned in this book. Identify What is one ethical decision that a Webmaster must make when monitoring a site?<br /> <br /> Section 15.3 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Passwords are a common form of access control.<br /> <br /> 1. Define access control, password, user authentication, global access control.<br /> <br /> 4. Draw Conclusions How do global access control mechanisms enhance the security provided by user passwords?<br /> <br /> • Global access control mechanisms enable different levels of system access to different groups of users.<br /> <br /> 2. Explain the need for Web site security. 3. Summarize the ethical questions Webmasters encounter.<br /> <br /> • Webmasters often need to make ethical as well as technical decisions.<br /> <br /> 5. Compare and Contrast How are access control mechanisms similar to data encryption techniques (see page 351)? How do they differ?<br /> <br /> Apply It! Analyze Security Visit three online shopping, auction, or banking sites. Identify the means they employ to keep customer data secure.<br /> <br /> 436<br /> <br /> Chapter 15<br /> <br /> CHAPTER 15<br /> <br /> Reading Review<br /> <br /> SECTION 15.1 Web Server Maintenance Key Terms hot-swappable hard drives, 425 hard drive mirroring, 425 backup, 426 incremental backup, 426<br /> <br /> Main Ideas ■ The Webmaster maintains the uninterrupted ■<br /> <br /> ■ ■ ■ ■<br /> <br /> operation of the company’s Web servers. A server’s ability to upload and download files depends on the communication lines and other hardware and on the protocol software that controls the flow of data. Some servers use two to six hot-swappable hard drives with indicator lights to report drive failure. Webmasters protect the company’s data by making backups. Incremental backups copy only the data that changed since the last full backup. A Webmaster’s primary role is to maintain a Web site.<br /> <br /> SECTION 15.3 Keeping a Web Site Secure Key Terms access control, 433 password, 433 user authentication, 433 global access control, 435<br /> <br /> Main Ideas ■ Passwords are a common form of access control. ■ Many Web sites collect valuable information about ■<br /> <br /> ■ ■ ■<br /> <br /> the Web surfers who visit them. Safeguarding the confidentiality of users’ personal data must be a primary concern for any Web site publisher who collects and stores such information. Using global access controls can substantially enhance a Web site’s security. Global access control mechanisms enable different levels of system access to different groups of users. Webmasters often need to make ethical as well as technical decisions.<br /> <br /> SECTION 15.2 Updating Information Key Terms file management, 430 direct server update, 430 local client update, 430 archiving, 432<br /> <br /> User Group 1<br /> <br /> Global Access Controls<br /> <br /> User Group 2<br /> <br /> Main Ideas ■ A Web site requires regular updating to keep it<br /> <br /> useful and attractive to visitors. ■ A direct server update is quick and easy, but visitors can see your half-completed changes. ■ To make a local client update, download the page from the remote site, change it on your computer, and upload the modified page to the server. ■ After you update a site, archive rather than discard old Web elements.<br /> <br /> User Group 3<br /> <br /> Maintaining a Web Site<br /> <br /> 437<br /> <br /> CHAPTER 15<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ Study with Two-Column Notes Two-column notes are helpful study tools when you need to review material on your own. To use this method, cover the right column with a piece of paper. After looking at the idea on the left, test yourself by coming up with as much information about the topic as you can. Slide the paper down to see if your response was correct. Take notes on one section of this chapter to try out this technique.<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.<br /> <br /> 15. Summarize what factors a Webmaster must consider when maintaining a site’s hardware, software, and storage capabilities. Hardware<br /> <br /> Site Maintenance<br /> <br /> Software<br /> <br /> Storage<br /> <br /> Reviewing Key Terms<br /> <br /> Understanding Main Ideas 8. Describe the primary tasks of Webmasters. 9. List two techniques Webmasters use to maintain Web server storage devices. 10. Summarize the guidelines for updating a Web site. 11. Explain why some Web sites use an automated update process. 12. Identify two ways in which documentation may be provided to Web site users. 13. Describe the most common way for Web sites to implement access control. 14. Discuss how Webmasters can use Web tracking systems. 438<br /> <br /> Chapter 15<br /> <br /> Step 1<br /> <br /> ➠ ➠<br /> <br /> 1. How do hot-swappable hard drives help reduce down time for Web servers? 2. What is hard drive mirroring? 3. What do Webmasters use to make backups? 4. How is a direct server update different from a local client update? 5. What does it mean when a site has access controls? 6. Change the following sentence to make it true: The process of saving old Web pages is called file management. 7. What is the name of the process that compares the password entered by the user with the password assigned to the identified user?<br /> <br /> 16. List the steps you must follow to update a Web page locally in Dreamweaver.<br /> <br /> Critical Thinking 17. Draw Conclusions You work for a Web hosting company. A customer contacts you because her Web site contains a graphic that she did not authorize. Why might her site contain content that she did not authorize? How should you resolve the problem? 18. Analyze Maintenance Contact your school district or campus Webmaster to find out what the school’s policy or procedure is regarding archiving old Web pages. For example, how long must files be maintained in an archive folder? Is the Webmaster required to maintain printed versions of each page? Create a table like the one below to list each requirement and its purpose. Policy or Procedure<br /> <br /> Purpose<br /> <br /> CHAPTER 15<br /> <br /> Review and Assessment<br /> <br /> 19. Assess Practices What is the best practice for updating a Web site: local client update or direct server update? Review the policies for the Web hosting company you used for previous activities. Does that company allow direct server updates? Explain why you think the service does or does not allow direct server updates. 20. Evaluate Security You are setting global access controls for a large e-commerce site and its customer and product information. You are assigning access to the following groups: salespeople, product managers, customers, warehouse personnel, and top-level managers. What level of access should each group be given? Use the pyramid chart below to explain your reasoning.<br /> <br /> Reading & Writing Read the paragraph below and then answer the question.<br /> <br /> Many Web development teams use an automated update process to apply changes to their sites. This process allows multiple people to generate new Web content on their local workstations, test those pages to ensure that they look right and function correctly, and then submit them for inclusion in the next regular Web site update. An automated tool can then connect to the server (or servers) via HTTP or FTP and post all of the new content files in a single operation. According to the paragraph, which of the following statements is true?  Automated updates can only be made on one workstation.<br /> <br /> High Access<br /> <br />  An individual must upload the new information to the server.  Automated updates make it possible for several people to make changes to a Web site.  Automated updates appear immediately on the Web site.<br /> <br /> Low Access<br /> <br /> You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> On your own paper, copy and complete the chart shown below.<br /> <br /> Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 15.<br /> <br /> 21.<br /> <br /> +<br /> <br /> 22.<br /> <br /> +<br /> <br /> +<br /> <br /> Result<br /> <br /> 23.<br /> <br /> +<br /> <br /> +<br /> <br /> Result<br /> <br /> Study with PowerTeach<br /> <br /> Result<br /> <br /> Online Self Check<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 15.<br /> <br /> Maintaining a Web Site<br /> <br /> 439<br /> <br /> Activities<br /> <br /> CHAPTER 15<br /> <br /> 1. MAKING CONNECTIONS Create an Oral Presentation Assume that you work for a company that sells hardware solutions for Web server storage devices. The company offers each of the storage solutions discussed in the chapter to its customers. Prepare an oral presentation that you can use on sales calls to businesses. Assume that your customers include both large companies and Web hosting businesses. Your presentation should focus on the features and benefits of each storage device offered by your company and the cost of each option (research options as needed). Be prepared to answer questions at the end of your presentation. Use a table like the one shown below to help organize your research. Web Server Storage Devices Storage Option<br /> <br /> Benefit<br /> <br /> Cost<br /> <br /> 2. STANDARDS AT WORK Students use a variety of media and formats to communicate information and ideas effectively to multiple audiences. (NETS-S 4)<br /> <br /> Create Technical Documentation You are the Webmaster for your company’s Web site. You are currently completing a round of local client updates to the site, which will be posted to the Web server. However, you have been assigned to a special project team and will not be able to complete the next round of updates to the Web site. You must therefore document your tasks so they can be completed by another person. ◆ Write a set of procedures for the person who will be doing the updates. ◆ Explain in words, drawings, or screen shots the updating process. Test your procedures by updating your MyDiskDesigns.biz site. Update the product prices on the Products page using the information contained in the table below. Old Product Price<br /> <br /> 440<br /> <br /> Chapter 15<br /> <br /> New Product Price<br /> <br /> $4.99<br /> <br /> $6.99<br /> <br /> $10.99<br /> <br /> $11.99<br /> <br /> $22.99<br /> <br /> $24.99<br /> <br /> CHAPTER 15<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Update a Web Site As a team, select a Web site that you have created in this course but have not yet published. With your teacher’s permission, publish the site to a Web server. Check with your teacher to learn how and where you should publish the site. After it is published, review the site to identify at least three improvements the team can make to the site. Use a tree diagram like the one below to identify and record the changes you want to make to the site. Update a Web site<br /> <br /> Change 1<br /> <br /> Change 2<br /> <br /> Change 3<br /> <br /> Once you have identified three changes, complete the following tasks. You may want to have different members of the team complete different tasks. ◆ Make the changes as a local client update. ◆ Preview the site in a browser to test your changes. ◆ Publish the site again to the same location. ◆ View the published site in a browser and verify that your changes appear and work as expected.<br /> <br /> 4. CHALLENGE YOURSELF Identify Security Procedures Conduct an interview with a Webmaster from your school, school district, or local business. Before the interview, write a series of questions that you would like to ask about the types of security procedures he or she uses to manage access to Web sites. Write down the Webmaster’s answers to your questions and ask additional follow-up questions as needed. Security Procedures<br /> <br /> Compare the Webmaster’s answers with the security procedures and services from the hosting company you have been using in previous activities. What is similar? What is different? Use a Venn diagram to compare and contrast the two. Based on these similarities and differences, write a two-page report that explains how the Webmaster controls access to all the information contained on the Web site, and your findings from the hosting company.<br /> <br /> Webmaster<br /> <br /> Hosting Company<br /> <br /> Maintaining a Web Site<br /> <br /> 441<br /> <br /> CHAPTER 15<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Update a Web Site    <br /> <br />  <br /> <br /> Add an additional question and answer to the MyDiskDesigns.biz FAQ page. Open your MyDiskDesigns.biz faq.htm1 page in Dreamweaver. Add the following question to the page: How much data can I store on a CDR? Research CDR media and provide an easy-to-understand answer for users. Emphasize how much more data a CDR can hold as compared to a traditional 3.5 inch floppy disk. Include this question in the list at the top of the page. Add a bookmark to the question. Proofread your work and save the site. With your teacher’s permission publish the site. Check the FAQ page carefully to make sure it has been updated.<br /> <br /> 2. Create a Job Description Create a job description for the MyDiskDesigns site’s Webmaster.  MyDiskDesigns.biz has decided to hire a new Webmaster, and they have asked you to create the job description. Use the Internet to research the training, skills, and salaries associated with this job. You can also use the information you have learned in past activities.  Use your information to create a job description for the position. Make sure the training and skills you include in your description are tailored to meet the needs of the MyDiskDesigns Web site.  You also need to help the company determine the salary for the position. Create a table like the one below that shows the salary range an individual can expect based upon how many years they have worked as a Webmaster. YEARS EXPERIENCE 0–1 year 2–5 years 6+ years<br /> <br /> 442<br /> <br /> Chapter 15<br /> <br /> SALARY RANGE<br /> <br /> CHAPTER 15<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the directions to complete each project.<br /> <br /> 1. Document a Procedure You are the Webmaster for a Web hosting service. The hosting service allows clients to select the backup method for their sites. The least expensive method is incremental backup. The mid-range option is daily incremental backups and monthly complete backups. The most expensive option is a daily complete backup. The service has several clients who have chosen each option. You will be on vacation next week. The person filling in for you knows little about your job. Write a set of procedures for each of the backup options available. With your procedures, provide a schedule of when backups are done. Let the schedule reflect the fact that you process incremental backups in the early afternoon. You schedule complete backups to run overnight and you check the results the following morning.<br /> <br /> 2. Plan and Develop a Web Site Imagine you have been helping companies to develop effective e-commerce sites. As a consultant, you have: ◆ helped to hire Webmasters. ◆ designed and created an e-commerce Web site. ◆ helped determine the best hosting company for a company to use. You are now starting your own business. This company will provide the services listed above, and will also sell Web hosting services. ◆ Plan your business’s Web site. The site will include pages that feature the various services offered by the company. ◆ Use Dreamweaver to create your commercial site. Use the information you have learned in various activities to create the content for the different pages in the site. ◆ Add graphics and multimedia elements to the site as needed. Be sure to include all necessary copyright information.<br /> <br /> Maintaining a Web Site<br /> <br /> 443<br /> <br /> Problem Solving: Develop a Commercial Web Site You are working on the Web site for a furniture store that has just added computer furniture to their inventory. The store owners have decided that they need a new Web site that features the new computer furniture line. 1. Write a mission statement and goals for the site and determine the target market. The computer furniture is high quality and ergonomic, meaning that it is specifically designed for physical comfort and safety. The company plans to sell this line of products for home-office use. As part of your planning process, determine a name for the site. 2. Create a storyboard for the site. The site should include information about the business and its products.<br /> <br /> ◆ The home page should explain the benefits of an improved working environment. ◆ Each type of product should have its own page. Include pages for Desks, Chairs, Accessories, and Storage Units. ◆ Include a Frequently Asked Questions (FAQ) page. The page will include named anchors to help visitors locate answers quickly. 3. Create the Web site in Dreamweaver. Test the site in a browser after each page has been added. 4. Add an order form that can be accessed from each of the product pages. Design the order form so that it includes all the information the business would need to fill the order. You may want to look at similar product catalogs to see what types of styles, sizes, finishes, and other features you should include in your form. You also may want to research order forms online for ideas on how to structure the form. 5. Add a privacy policy to the site. 6. Run reports on your site to test for broken links and HTML validation. 7. Make sure your site includes alternative text and other needed accessibility features. 8. With your teacher’s permission, publish the site. Test the site. Make corrections as needed. 444<br /> <br /> Chapter 15<br /> <br /> Create an Online Portfolio In this project, you will create a frames-based site to house an online portfolio. An online portfolio is a great way to display your best Web site designs. 1. Create a Web site in Dreamweaver that uses a Fixed Left frameset.<br /> <br /> ◆ The narrow left frame will contain links to the content pages. ◆ The right frame will display content pages. The content pages will contain your best Web pages. 2. Review the sites that you have created during this class. Select pages to include in your portfolio. Try to include pages that demonstrate the various Dreamweaver skills that you have learned. Aim to include six to eight samples. 3. Create a home page that introduces you and your portfolio. Assume that the visitors to your site will be potential employers. 4. Create blank content pages for each of the Web pages or sites you plan to add to your portfolio. 5. Open the Web pages that you want to include in your portfolio. In Split view, copy the code from each page and paste it into one of the blank content pages of your portfolio Web site. 6. Create links from the left frame to each of the content pages. 7. Add a copyright statement to the left frame that identifies you as the copyright holder of your work. 8. Add a guest book to the site to invite visitors to comment on your portfolio. 9. Preview your site in a b r ow s e r, m a k i n g changes as appropriate. 10. With your teacher’s permission, publish the finished Web site on your school or class Web site. 11. For your por tfolio, include a screen shot and an electronic copy of your finished product. 12. Ask three classmates to review your portfolio. Have each of them add an entry in the guest book.<br /> <br /> Maintaining a Web Site<br /> <br /> 445<br /> <br /> UNIT<br /> <br /> 5<br /> <br /> Advanced HTML<br /> <br /> Go to this book’s Web site at WebDesignDW.glencoe.com. Click Unit Activities and select Unit 5 Cyber Manners and Netiquette. Take a quiz to check your knowledge of safe and effective online communication.<br /> <br /> 446<br /> <br /> Think About It Technology of Tomorrow Even though you may not know exactly how they work, computers and the Internet are part of our daily lives. From telephone networks to bank networks to the Internet, we are connected to the world at home, at school, and at work.<br /> <br /> Predict the Future Activity For many years, telephones affected more people than any other type of communication. Do you think in the next ten years more people will communicate with each other using the telephone, the Internet, or another new kind of technology? Explain your answer.<br /> <br /> 447<br /> <br /> CHAPTER<br /> <br /> 16<br /> <br /> HTML Tables and Frames<br /> <br /> YOU WILL LEARN TO… Section 16.1 Create a basic table using HTML Define borders Merge cells Align content in tables Section 16.2 Create a framesbased Web page using HTML Create a link bar page Create a content page Create a container page Control Web page layout with frames Create links between frames Section 16.3 Identify inline CSS Identify internal style sheet code Create an external style sheet Use CSS for Page Layout<br /> <br /> IMAGE TO COME<br /> <br /> WHY IT MATTERS ................................................. Businesses use tables and grids to track inventory, organize annual reports, and create sales summaries. Organizing this information in vertical columns and horizontal rows enables people to find information quickly and easily. An HTML table on a Web page functions in a similar way. It both organizes the layout space and allows Web designers to carefully evaluate the content that they add to a Web page. Examine the notes you have taken for one of your other classes. Select one day’s notes and organize the information into a table. How does a table help you organize and interact with information?<br /> <br /> 448<br /> <br /> Chapter 16<br /> <br /> CHAPTER<br /> <br /> 16<br /> <br /> WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 16.1 Merge Cells ................................ 454 16.2 Explain Frame Placement ......... 461 16.3 Use CSS ....................................... 466 You Try It Activities 16A Create a Table Using HTML ....... 16B Create a Frames-Based Web Page .................................... 16C Create an External Style Sheet Using HTML ................................. 16D Use CSS to Position Page Elements .....................................<br /> <br /> 453 459<br /> <br /> You Try It Skills Studio Create a Table ...................................... 472 Create Frames ..................................... 472 Web Design Projects Create an Inventory Table ...................473 Create a Frames-Based Recipe Index ..................................................... 473<br /> <br /> IN THE WORKBOOK<br /> <br /> 464<br /> <br /> Optional Activities and Projects Guided Reading Web Design Projects<br /> <br /> 465<br /> <br /> ON THE WEB<br /> <br /> Chapter Assessment Making Connections ............................ 470 Standards at Work .............................. 470 Teamwork Skills ..................................471 Challenge Yourself .............................. 471<br /> <br /> Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments<br /> <br /> BEFORE YOU READ Study with a Partner It can be difficult to review your own notes and quiz yourself on what you have read. According to research, studying with a partner for just 12 minutes can help you study better. Two-column notes are particularly useful for studying with a friend. One person reads one main idea from the left column of the notes. The other person tries to recite all the supporting details in the right column. The first person provides any information missed by the second person. When you have gone through all the main ideas, switch roles.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> HTML Tables and Frames<br /> <br /> 449<br /> <br /> SECTION 16.1 CREATING TABLES IN HTML Focus on Reading Read to Find Out In this section, you will learn how to define and modify a table using HTML coding. Read to find out how to merge cells and control table alignment.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> HTML tables give Web page designers a great deal of control over page layout and the formatting of information. There are many HTML tags and attributes available for this purpose.<br /> <br /> cell spacing cell padding header row header column<br /> <br /> Identify three tag sets you need to create a basic table. Use a table similar to the one below (also available online). HTML Table Tags<br /> <br /> What Tag Set Defines<br /> <br /> In this chapter, you will learn how to build a table using HTML tags.<br /> <br /> Defining a Basic Table How do Web designers use HTML tags to define a table?<br /> <br /> Three sets of HTML tags define a table. ◆ The <TABLE></TABLE> tag set marks the beginning and end of the table area.<br /> <br /> Figure 16.1 Notice that you cannot see the boundaries of the cell in the browser. How many rows and columns are in a single table cell?<br /> <br /> ◆ The <TR></TR> tag set marks the beginning and end of a row. ◆ The <TD></TD> tag set marks the beginning and end of a column. The simplest table is one that defines a single table cell—that is, a table with one row and one column. Figure 16.1 shows the HTML source code that defines such a table, and illustrates how it will look in a Web browser.<br /> <br /> Identify What tag set marks the beginning and end of a table row? 450<br /> <br /> Chapter 16<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Using Table Attributes How can I use attributes to modify a table’s appearance?<br /> <br /> It is easy to modify a table’s characteristics by using table attributes. The HTML table code defines an area on the Web page where you can place items within a grid. As shown in Figure 16.1 on page 450, this grid is invisible.<br /> <br /> Creating Table Borders To outline a table grid and make it visible on the screen you need to use the border attribute, which defines the width of the border. In addition, you can use the bordercolor attribute to specify the table border’s color. Figure 16.2 shows the HTML code used to create a blue border. The bordercolor attribute uses a hexadecimal number or one of the 16 named colors to define the border color (see Appendix C for a listing of hexadecimal and named colors).<br /> <br /> The border attribute creates a boundary around the cell. What defines the width of the border?<br /> <br /> Notice that two blue rectangles actually appear around the table cell in Figure 16.2. The browser draws a border around each cell in the table, and then another border around the entire table. The space between the outer border and the cell border is the cell spacing. You can adjust this spacing with the cellspacing attribute. The space between a cell border and the cell’s content is the cell padding. You use the cellpadding attribute to adjust this spacing. Figure 16.3 shows the Figure 16.2 table with cell padding and only one border.<br /> <br /> Set the cell spacing to zero if you only want to see one border. What does a cell padding of 5 do?<br /> <br /> Figure 16.2<br /> <br /> Figure 16.3<br /> <br /> HTML Tables and Frames<br /> <br /> 451<br /> <br /> Merging Cells Figure 16.4 You add the colspan attribute within the <TD> tag. What information often appears in a header row?<br /> <br /> Most tables contain more than one cell. The code used to create a cell is also used to create a table with multiple rows and columns—you just add additional row and column tags. You can combine, or merge, two or more table cells to make one larger cell. You can merge cells horizontally by grouping multiple columns in a row. By merging columns, you create a header row. A header row contains titles for each column in a table. As shown in Figure 16.4, you place the colspan attribute within a <TD> tag to merge cells horizontally.<br /> <br /> The number after the attribute (2) indicates the number of columns to be merged.<br /> <br /> Code<br /> <br /> Code shown in browser<br /> <br /> You can also merge cells vertically by grouping multiple rows in a column. By merging rows, you can create a header column. A header column contains titles for each row in the table. You use the rowspan attribute to merge cells vertically. Activity 16.1 Explore Table Attributes Learn more about table attributes at WebDesignDW.glencoe.com.<br /> <br /> Controlling Table Alignment You can use the align attribute to: ◆ align a table on a page. ◆ align items in a cell. The possible values for the align attribute are left, center, and right. When used in the <TABLE> tag, the align attribute affects the horizontal alignment of the entire table. When used in the <TR> tag, the align attribute will align the contents of all the cells in that row. When used in the <TD> tag, the align attribute defines how the contents of one particular table cell will align. If the align attribute is not present, the default alignment for tables and table cells is left.<br /> <br /> 452<br /> <br /> Chapter 16<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Figure 16.5 Using the align attribute in the <TABLE> tag centers the entire table on the Web page. How would right alignment in the <TABLE> tag affect the appearance of the table in the browser? Code<br /> <br /> Figure 16.5 illustrates the use of the align attribute in both the <TABLE> tag and the <TD> tag. The attributes cause the Web browser both to center the entire table on the Web page and to center the table heading within the first row of the table.<br /> <br /> Creating a Table In the following activity, you will create a table using HTML. You will add a border to the table and adjust its cell spacing and cell padding. Remember to use Code view when entering HTML in Dreamweaver.<br /> <br /> Code shown in browser<br /> <br /> ACTIVITY 16A Create a Table Using HTML 1 Open a text editor such as Notepad or use Dreamweaver as an HTML editor. Enter the HTML source code shown in Figure 16.6. Save the file as table.html.<br /> <br /> Figure 16.6 Enter the source code to create an HTML table.<br /> <br /> Troubleshooting For information about how to create and save an HTML document in Notepad, go to You Try It activity 4B on page 104.<br /> <br /> HTML Tables and Frames<br /> <br /> 453<br /> <br /> 2 With your teacher’s permission, print the file (press Ctrl + P to print). Proofread your code and make any necessary corrections. Re-save the file. 3 Launch your Web browser. 4 Open the file that you just created in the browser. Your results should look like Figure 16.7.<br /> <br /> Figure 16.7 Using rowspan creates a header column.<br /> <br /> As you can see, it is easy to create a basic table using HTML. By defining a sufficient number of table cells within a given Web page, a Web designer can organize a Web page’s content and position elements on the user’s screen very precisely. Define What is a header row?<br /> <br /> Section 16.1 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Tables organize data into rows and columns.<br /> <br /> 1. Define cell spacing, cell padding, header row, header column.<br /> <br /> 4. Compare and Contrast Explain how using the align attribute in the <TABLE> tag is different from using the align attribute in the <TD> tag.<br /> <br /> • Table attributes define the table grid, the alignment of the table on the page, and the alignment of text in the cells. • You can combine, or merge, cells to make larger cells.<br /> <br /> 2. Summarize the ways in which tables can be used for page layout. 3. Identify the HTML tags and attributes that define tables.<br /> <br /> 5. Draw Conclusions Identify a scenario where you would need to use a header column.<br /> <br /> Apply It! Merge Cells Review the HTML source code in Figure 16.5. Revise the table structure so that the table heading appears on the left side of the table rather than on the top. Make the table cell that holds the header text two rows high.<br /> <br /> 454<br /> <br /> Chapter 16<br /> <br /> The Home and Workplace of the Future<br /> <br /> D<br /> <br /> reams of “intelligent homes” with appliances that fix themselves have largely remained science fiction. But smart houses and workplaces are becoming real.<br /> <br /> Smart Houses Today’s smart homes have networks that automatically adjust lights, temperature, and TV or stereo volume. Emerging home technologies include: ◆<br /> <br /> Internet-enabled appliances.<br /> <br /> ◆<br /> <br /> next-generation refrigerators to warn when milk will expire, order more eggs, or schedule their own repair service when a repair is needed.<br /> <br /> ◆<br /> <br /> kitchen computers that can manage recipes and oven timers.<br /> <br /> Imagine a home for an elderly or disabled resident with doors that open automatically or motion sensors to track movement. Such a house could call for help if it detects no motion for a certain amount of time, in case the person has fallen or lost consciousness. Programmable appliances and fixtures can be controlled automatically. Others can be voice or breath controlled rather than hand controlled so that an occupant can lead a more independent life.<br /> <br /> Smart Workplaces<br /> <br /> Today, many workers carry a laptop PC, a cell phone, and a PDA. Some companies have even started advertising a single small device that does the work of all three.<br /> <br /> 1. Evaluate Technology Research current and emerging smart-house technologies. Discuss the positive or negative impact of smart houses on individuals and on society.<br /> <br /> With the advent of wireless networks and widespread, broadband Internet access, workers in the future will not be tethered to a desk. In fact, the “office of tomorrow” may be anyplace you want—the kitchen table, a park bench, or a lounge chair by a hotel pool. As workers gain mobility, they will demand more integrated devices.<br /> <br /> 2. Analyze an Issue Consider the ways in which people have become reliant on technology, both at home and work. In your view, what are the key advantages and disadvantages of this reliance? Share your opinion with the class. HTML Tables and Frames<br /> <br /> 455<br /> <br /> SECTION 16.2 CREATING FRAMES IN HTML Focus on Reading Read to Find Out The main purpose of this section is to explain how HTML frames are used to display two or more Web pages on the screen at the same time. Read to find out how to create hyperlinks between frames.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> HTML frames give you the ability to display more than one Web page on the screen at the same time. You can customize hyperlinks to support frames.<br /> <br /> frame container page left-hand navigation content page top navigation<br /> <br /> Compare and contrast content pages and container pages. Use a Venn diagram similar to the one below (also available online).<br /> <br /> Content<br /> <br /> Figure 16.8 In this Web page, the frame on the right moves independently of the frame on the left. What advantage is there to creating a Web page with frames?<br /> <br /> 456<br /> <br /> Chapter 16<br /> <br /> Container<br /> <br /> As you learned in Chapter 13, some Web designers find it useful to divide Web pages into two or more frames. Each frame contains its own Web page, and each Web page can operate completely independent of the others, or interact with the others. For example, Figure 16.8 shows a Web page that contains two frames. The link bar in the left frame does not change. The content in the right frame changes whenever a user clicks a hyperlink in the link bar. The frames behave independently of each other.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Creating Frame Pages in HTML How many HTML documents do I need to create a frames-based page?<br /> <br /> A Web page with two frames is composed of three separate HTML documents (see Figure 16.9). ◆ One document defines the Web page that will display in frame 1. This Web page is usually the site’s link bar. ◆ The second document contains the code for the page that will display in frame 2. This second page usually contains the Web site’s content. ◆ The third HTML document, called a container page, defines the characteristics of the frames that contain the other two documents. This page directs the browser to display the other two HTML documents in frames.<br /> <br /> Shortcut To access Notepad’s Help feature, press F1.<br /> <br /> All of these documents together are referred to as a frame set.<br /> <br /> Figure 16.9<br /> <br /> Container Page<br /> <br /> Frame 1<br /> <br /> The container page directs the browser to display the other two HTML documents in frames. What document usually displays in frame 1?<br /> <br /> Frame 2<br /> <br /> Figure 16.10 The file name for this page is linkbar.html. What type of list is created in this document?<br /> <br /> Creating a Link Bar Page Most HTML frame sets contain a link bar (also called a navigation bar). As you learned earlier, a link bar is a set of buttons containing hyperlinks to other Web pages on the site. The HTML code shown in Figure 16.10 uses different levels of heads and a bulleted list to create a very simple link bar. A link bar can appear virtually anywhere on the screen. Most Web designers place it on the left side. A frames-based Web site with a link bar on the left is often said to have left-hand navigation. HTML Tables and Frames<br /> <br /> 457<br /> <br /> Creating a Content Page Figure 16.11 The file name for this page is welcome.html. How do you know that this page is a complete HTML document?<br /> <br /> The link bar page is usually designed to occupy as little screen space as possible. This is to save room for the content page, which should capture the user’s attention and fulfill the primary purpose of the Web site. In many frames-based sites, clicking the link bar will cause the main content page to change to present new information, a new message, or a new product. Figure 16.11 contains HTML code that displays a simple content page.<br /> <br /> Creating a Container Page Once you create the link bar page and the content page, you can tie them together with a container page. The container page has the responsibility of telling the Web browser where to position the page’s frames, how big to make them, and what HTML files to display in them. A container page is composed of three main commands: ◆ The <FRAMESET></FRAMESET> tag set defines the container page. ◆ The <FRAME> tag defines each frame on the container page. Code<br /> <br /> ◆ The src attribute identifies the file name that will display in the frame. The code in Figure 16.12 creates a container page. This page contains two frames as defined by the two <FRAME> tags. Each frame tag contains an src attribute. This attribute identifies the file name that will display in the frame. As shown in Figure 16.12, the first frame displays the linkbar.html file, while the second frame displays the welcome.html file.<br /> <br /> Code shown in browser<br /> <br /> Figure 16.12 The code shown above creates a left frame that displays a link bar and a right frame that displays the content page. How is the <FRAME> src attribute similar to the src attribute you used in Chapter 4? 458<br /> <br /> Chapter 16<br /> <br /> Laying Out Frames Vertically While the <FRAMESET></FRAMESET> tag set supports a variety of attributes, one of the most important is the cols attribute. This attribute instructs the browser to place the frames in columns, giving the page a vertical layout. The cols attribute also specifies the width of each column. In a twocolumn site, the width of the first column is usually defined with a number, and the width of the second column is usually defined with an asterisk. The asterisk character ( * ) represents the remaining space on the screen. In the code in Figure 16.12, the first column is 200 pixels wide, and the second column covers the remaining width of the screen.<br /> <br /> You Should Know The noresize attribute can be used to prevent users from dragging a frame’s border and changing the size of the frame.<br /> <br /> Laying Out Frames Horizontally The frame set shown in Figure 16.11 uses left-hand navigation. Some Web sites, however, place link bars along the top of the page (also called top navigation). The rows attribute defines a Web page that is organized in rows instead of columns. The number assigned to the attribute defines the height, rather than the width, of the frames. Web developers usually specify the height of the top frame and use an asterisk ( * ) for the bottom frame. In the following activity, you will use HTML to create a frames-based page with a horizontal layout.<br /> <br /> ACTIVITY 16B Create a Frames-Based Web Page 1 Open your text editor. Enter the HTML code listed below. If using Dreamweaver, be sure to use Code view when entering HTML. When finished, save the file as header.html. <HTML> <BODY bgcolor=“#FF0000”> <CENTER> <H2>Header Frame</H2> </CENTER> </BODY> </HTML> 2 Enter the HTML code listed below. Save the file as content.html. Save it in the same folder as header.html. <HTML> <BODY bgcolor=“#FFFFFF”> <CENTER> <H1>Main</H1> <H1>Content</H1> <H1>Frame</H1> </CENTER> </BODY> </HTML> 3 Enter the HTML code listed below. Save the file as footer.html. Save it in the same folder as the other two files. <HTML> <BODY bgcolor=“#3399CC”> <CENTER> <H2>Footer Frame</H2> </CENTER> </BODY> </HTML><br /> <br /> Design The Americans with Disabilities Act (ADA) discourages the use of frames because they are difficult for people with various disabilities to navigate. Think about who will be visiting your site before you decide to use frames.<br /> <br /> HTML Tables and Frames<br /> <br /> 459<br /> <br /> Activity 16.2 Explore Frames Learn more about frames at WebDesignDW.glencoe.com.<br /> <br /> 4 Enter the HTML code listed below. Save the file as frameset.html. Save it in the same folder as the other three files. <HTML> <HEAD> &lt;TITLE>Three Row Frameset</TITLE> </HEAD> <FRAMESET rows=“60,*,60”> <FRAME src=“header.html”> <FRAME src=“content.html”> <FRAME src=“footer.html”> </FRAMESET> </HTML> 5 Launch your Web browser. Open frameset.html in the browser. Your results should look like Figure 16.13.<br /> <br /> Figure 16.13 The three frames display in rows across the page.<br /> <br /> You Should Know To remove scrollbars from a frame, include the attribute<br /> <br /> scrolling=no within the frame tag.<br /> <br /> Explain What does the asterisk character ( * ) represent?<br /> <br /> Creating Links between Frames How can I tell a browser to load a page into a specified frame?<br /> <br /> Whenever a user clicks a hyperlink, the Web browser’s default behavior is to load the page to which the hyperlink points. When using frames, a Web designer may want the browser to behave differently. For example, when the user clicks a hyperlink in the link bar, the designer may want the content page to change, while the link bar itself remains unchanged.<br /> <br /> Figure 16.14 The target attribute is added to a hyperlink’s anchor tag. What is the purpose of the target attribute? 460<br /> <br /> Chapter 16<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Figure 16.15 Both the Welcome and About Me pages are loaded into the content frame when their link is clicked in the link bar. What is the purpose of the name attribute?<br /> <br /> Code<br /> <br /> Code shown in browser<br /> <br /> To keep the link bar from changing, include the target attribute in the link’s anchor tag. This attribute tells the browser to load the target Web page into a specified frame (the content frame) rather than into the current frame. For example, the target attributes shown in Figure 16.14 on page 460 tell the browser to load both the welcome.html and the about_me.html pages into the content frame when a user clicks the corresponding link on the link bar. For the target attribute to work, you must also add the name attribute to the <frame> tag found on the container page (see Figure 16.15). If you do not include this attribute, then the browser will not know which frame you want a page to load in. Summarize How can a Web designer change the content page, while the link bar remains unchanged?<br /> <br /> Section 16.2 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Frames-based sites use at least three separate HTML documents to display a Web page.<br /> <br /> 1. Define frame, container page, left-hand navigation, content page, top navigation.<br /> <br /> 4. Draw Conclusions Why do you think left-hand navigation is more common on frames-based sites than top navigation?<br /> <br /> • Common pages in a frame set include the link bar page, the content page, and the container page. • You can use the target and name attributes to tell the browser to load the target Web page into a specified frame.<br /> <br /> 2. Explain the purpose of a container page. 3. Summarize the attributes needed to change the behavior of hyperlinks on a frames-based page.<br /> <br /> 5. Analyze Links Why is it common for the link bar on a frames-based page to remain constant as the content page changes?<br /> <br /> Apply It! Explain Frame Placement A friend is building a Web site using frames and has decided to place the navigation bar on the right. Explain to your friend why you think it would be better to place the navigation bar on the left.<br /> <br /> HTML Tables and Frames<br /> <br /> 461<br /> <br /> SECTION 16.3 CASCADING STYLE SHEETS Focus on Reading Read to Find Out When creating HTML documents, you need to use tags to specify how your document will look in a browser. Read to find out how to use CSS to format HTML documents.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Cascading Style Sheets provide Web designers more control over the appearance of elements within a Web page. CSS can also be used for page layout.<br /> <br /> selector class selector id selector<br /> <br /> Compare and contrast how you use internal and external style sheets in an HTML document. Use a Venn diagram similar to the one below (also available online).<br /> <br /> Internal<br /> <br /> External<br /> <br /> You are already familiar with how using Cascading Style Sheets (CSS) in Dreamweaver can change the appearance of fonts, tables, paragraphs, and more. In this section, you will discover how to integrate CSS into HTML code.<br /> <br /> CSS and HTML How can I use CSS in an HTML document?<br /> <br /> Maintenance For effective site organization, place any CSS files within a separate CSS folder when creating a Web site.<br /> <br /> There are three different ways you can apply CSS to an HTML document: ◆ Inline ◆ Internal Style Sheets ◆ External Style Sheets<br /> <br /> Inline CSS Inline CSS is integrated within tags in an HTML page. For example: <P style=“color:#003366; text-indent:25px;”> This is a paragraph. </P><br /> <br /> The CSS style attributes are applied to the paragraph tag. They specify that the text color should be blue and that the first line be indented 25 pixels. As noted in Chapter 12, the use of inline CSS is not recommended because it does not separate content from presentation information. 462<br /> <br /> Chapter 16<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Internal Style Sheets An internal style sheet specifies style attributes within the <HEAD> section of an HTML document. An example of how to declare an internal style sheet within a document is shown in Figure 16.16. Notice the style sheet is contained within &lt;STYLE> tags. Older browsers (versions 3 and lower) will ignore the &lt;STYLE> tags so it is necessary to include all style information between <!-- and -->.<br /> <br /> Figure 16.16 Code for an internal style sheet is inserted into a document’s <HEAD> section.<br /> <br /> The code sample in Figure 16.16 contains three selectors: body, .newColor, and #newColor. A selector contains properties and corresponding values within curly braces that control the appearance of HTML elements. Each property is followed by a colon, then the value. The value ends in a semi-colon. When only one property/value pair is used within a selector, the semi-colon is not required but is recommended. The body selector applies a background color of blue to the entire HTML page. The property/value pairs, known as an HTML selector, simply apply a style to an existing HTML element: the <BODY> tag. The .newColor selector is known as a class selector. When used within an HTML document, it applies an orange background to any HTML element that references it. A class selector can be applied over and over in an HTML document. When referencing a class selector, you must include the word “class” and remove the selector’s period: <TABLE class=“newColor”> Table code </TABLE><br /> <br /> The #newColor selector is known as an id selector. This type of selector is always preceded by a # sign within the style sheet. Unlike the other selectors, an id selector is used to identify only one element within an HTML document. You reference an id selector as follows: <TABLE id=“newColor”> Table code </TABLE><br /> <br /> As with inline CSS, internal style sheets should be used sparingly as they do not separate content from presentation. HTML Tables and Frames<br /> <br /> 463<br /> <br /> External Style Sheets An external style sheet is a separate text document that only contains selectors along with their properties and values. The separate CSS file uses a .css file extension. You reference this separate file in an HTML document’s <HEAD> section. As discussed in Chapter 12, external style sheets are the best form of CSS in use because they allow you to change the look of an entire Web site by editing only one style sheet.<br /> <br /> ACTIVITY 16C Create an External Style Sheet Using HTML 1 In Notepad, open a new file. Key the code shown in Figure 16.17 into the file. Save the file as style.css.<br /> <br /> Figure 16.17 Key the code shown to create an external style sheet.<br /> <br /> Figure 16.18<br /> <br /> 2 Browse to the DataFiles\Ch16\HTML folder. Open the stylesheet.html file. Ask your teacher how and where to save the file. Make sure you save the file in the same folder as your style.css file.<br /> <br /> The document’s formatting is determined by the attached external style sheet.<br /> <br /> 3 In the stylesheet.html file, position your insertion point after the </TITLE> tag and press Enter. Key: <LINK href=“style.css” rel=“stylesheet” type=“text/css”>. In the second <P> tag, click after P. Press the spacebar. Key: id=”myStyle”. 4 Save your work. Preview the HTML file in a browser. The second paragraph should appear with a light yellow background and large, blue text (see Figure 16.18). If your screen looks different, reopen the HTML file in Notepad (press Ctrl + O). Proofread the code and make any necessary corrections.<br /> <br /> Identify What is a selector?<br /> <br /> 464<br /> <br /> Chapter 16<br /> <br /> Using CSS for Page Layout How can I use CSS to position elements on a Web page?<br /> <br /> Due to the limitations of early browsers and HTML code, Web designers needed to use tables to format page layout. Using tables for layout can be inefficient in that tables can make pages inaccessible and add several lines of code to a page. Many designers are starting to use internal CSS instead of tables to easily control the position and appearance of elements on a page. The two main tag sets used to define page layout are <DIV></DIV> and &lt;SPAN></SPAN>. The <DIV> tag is mainly used to control blocks of information in paragraphs, images, or forms. The &lt;SPAN> tag is typically used in individual inline tags. You can use <DIV> and &lt;SPAN> tags to specify the right, left, top, and bottom position of an HTML element. There are three types of positions that you can specify. ◆ Absolute positioning uses numeric values to place elements precisely on a page, relative to the top and left of a browser window. You can specify values in pixels, percentages, inches, points, and several other units of measure. ◆ Static positioning places elements on a page normally, just as if you had laid out the page without tables or <DIV> tags. ◆ Relative positioning also places elements on a page normally. However, you can adjust the position of an element relative to how it would normally appear on a page. Of the three position types, absolute is the most common because it allows designers to position elements precisely on the page.<br /> <br /> ACTIVITY 16D Use CSS to Position Page Elements 1 Open a text editor such as Notepad or use Dreamweaver as an HTML editor. 2 Enter the HTML code shown in Figure 16.19. Save your file as layout.html.<br /> <br /> Figure 16.19 Key the code shown to create a simple Web page.<br /> <br /> HTML Tables and Frames<br /> <br /> 465<br /> <br /> 3 Position the insertion point after the </TITLE> tag. Press Enter. Key the code shown in Figure 16.20. 4 Preview the file in a browser. The block of text should appear within a light blue box that is 150 pixels in width and 50 pixels from the top and left side of the browser, as shown in Figure 16.20. Close your browser and all open files. Close Notepad.<br /> <br /> Figure 16.20 The code added to the page’s <HEAD> section positions the element absolutely on the page.<br /> <br /> You Should Know Including a padding and margin property within the body tag sets the HTML document’s margins to zero. By default, all browsers have a pre-existing margin value ranging from 5 – 10 pixels.<br /> <br /> Code shown in browser Code<br /> <br /> Summarize What three types of positions can you specify using CSS?<br /> <br /> Section 16.3 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Inline CSS is integrated within tags in an HTML page.<br /> <br /> 1. Define selector, class selector, id selector.<br /> <br /> 4. Draw Conclusions Why are inline CSS and internal style sheets rarely used?<br /> <br /> • Internal style sheets specify style attributes within the <HEAD> section of an HTML document. • An external style sheet is a simple text document that contains selectors along with properties and values.<br /> <br /> 466<br /> <br /> Chapter 16<br /> <br /> 2. Compare internal and external style sheets. 3. Summarize how a class selector works in a style sheet.<br /> <br /> 5. Analyze Why would a Web designer want to specify exactly where an element appears on a Web page?<br /> <br /> Apply It! Use CSS Open the MySkills.html file you created in Chapter 4. Create a simple external style sheet and attach it to your MySkills.html file.<br /> <br /> CHAPTER 16<br /> <br /> Reading Review<br /> <br /> SECTION 16.1 Creating Tables in HTML Key Terms cell spacing, 451 cell padding, 451<br /> <br /> SECTION 16.3 Cascading Style Sheets Key Terms<br /> <br /> header row, 452 header column, 452<br /> <br /> selector, 463 class selector, 463 id selector, 463<br /> <br /> Main Ideas ■ Tables organize data into rows and columns.<br /> <br /> Main Ideas<br /> <br /> ■ The <TABLE> and </TABLE> tags define a<br /> <br /> ■ Inline CSS is integrated within tags in an HTML page.<br /> <br /> ■ ■ ■<br /> <br /> ■ ■ ■<br /> <br /> table’s area. The <TR> and </TR> tags define rows. The <TD> and </TD> tags define columns. Table attributes define the table grid, the alignment of the table on the page, and the alignment of text in the cells. You can merge cells to make larger cells. The colspan attribute is used to create a header row. The rowspan attribute is used to create a header column.<br /> <br /> ■ Internal style sheets specify style attributes in an ■<br /> <br /> ■<br /> <br /> ■ ■<br /> <br /> HTML document’s <HEAD> section. A selector contains properties and corresponding values within curly braces that control the appearance of HTML elements. An external style sheet is a simple text document that contains selectors along with properties and values. You reference an external style sheet in an HTML document’s <HEAD> section. You can use <DIV> and &lt;SPAN> tags to layout elements on a page.<br /> <br /> SECTION 16.2 Creating Frames in HTML Key Terms frame, 456 container page, 457 left-hand navigation, 457<br /> <br /> content page, 458 top navigation, 459<br /> <br /> Main Ideas ■ Frames-based sites use at least three separate ■ ■ ■<br /> <br /> ■<br /> <br /> HTML documents to display a Web page. Common pages in a frame set include the link bar page, the content page, and the container page. The container page tells the browser how to display the link bar and content pages. If your page has two frames, specify the width (or height) of one frame and use an asterisk (*) to let the other frame fill the remaining space. You can use the target and name attributes to tell the browser to load the target Web page into a specified frame. HTML Tables and Frames<br /> <br /> 467<br /> <br /> CHAPTER 16<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ Study for Success One of the advantages to studying with a partner is that you can exchange information that might be missing from your notes. As you test each other, find out if you have gaps in your notes. Write down any missing information. Doing this reinforces concepts. You can also compare notes with your study partner before you start quizzing each other. Try that with your notes for this chapter.<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.<br /> <br /> 13. Identify the HTML documents needed to create a Web page using frames. Frameset<br /> <br /> Document 1<br /> <br /> Reviewing Key Terms 1. What is the difference between cell spacing and cell padding? 2. Where are column titles placed in an HTML table? 3. Where are row titles placed in an HTML table? 4. What is the name of the HTML document that defines the characteristics of the frames in a frames-based Web site? 5. Where does the navigation frame usually appear in a vertical frame layout? 6. Where are inline CSS integrated? 7. Where do internal style sheets specify style attributes?<br /> <br /> Understanding Main Ideas 8. Summarize how to create a table border using HTML code. 9. Describe the ways in which tables and items in cells can be aligned on a Web page. 10. Identify the attributes commonly used with the table tag. 11. Explain how you control the width of the frames on a Web page. 12. Describe what selectors do, and what symbols are used to mark them in the line of code.<br /> <br /> 468<br /> <br /> Chapter 16<br /> <br /> Document 2<br /> <br /> Document 3<br /> <br /> 14. Discuss what generally happens when a user selects an item from the link bar in a frames-based Web site. Identify which attributes you need to include to make this action occur. Click link in link bar<br /> <br /> ➠<br /> <br /> Critical Thinking 15. Make Recommendations You have been asked to create a frames-based Web site for a small business in your community. The owner insists that the link bar should be placed on the right-hand side of the page and the content on the left. How would you convince the owner that lefthand navigation would be a better choice? Copy the table shown below and use it to illustrate the advantages and disadvantages of each choice. Left-hand Navigation<br /> <br /> Right-hand Navigation<br /> <br /> Advantages<br /> <br /> Advantages<br /> <br /> Disadvantages<br /> <br /> Disadvantages<br /> <br /> CHAPTER 16<br /> <br /> Review and Assessment<br /> <br /> 16. Draw Conclusions What advantages and disadvantages do you see in building a frames-based Web site? What types of issues should you consider before deciding to use frames in a Web site? For example, if your Web site targets an older audience, why might you decide not to include frames in this site? 17. Evaluate A local printer wants to expand business by updating the company Web site. The owner has asked for your help in making changes. You realize the Web site relies on inline CSS, and uses tables within tables for page layout. Using a main idea chart like the one below, explain to the owner why you must update the site so it uses external style sheets instead of inline CSS. Also explain why you want to use <DIV> and &lt;SPAN> tags instead of tables to lay out pages.<br /> <br /> Tables Study the table below and then answer the question.<br /> <br /> Table Elements HTML Table Tag<br /> <br /> What Tag Defines<br /> <br /> Additional Information<br /> <br /> <TABLE> ... </TABLE><br /> <br /> Beginning and end of table area<br /> <br /> Using a border attribute will make your table display with a border.<br /> <br /> <TR> ... </TR><br /> <br /> Beginning and end of row<br /> <br /> You can define default attributes for the entire row.<br /> <br /> <TH> ... </TH><br /> <br /> Beginning and end of header<br /> <br /> Default position is bold and centered.<br /> <br /> <TD> ... </TD><br /> <br /> Beginning and end of column<br /> <br /> Default position is aligned left.<br /> <br /> According to the table, which of the following statements is true?<br /> <br /> Web site Changes<br /> <br />  The </TH> tag defines the end of a column.  The <TR> tag defines the beginning of a row.  The default setting for a column is bold and centered.  You use the <TD> ... </TD> tags to display a table border. You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.<br /> <br /> 18.<br /> <br /> Result<br /> <br /> 19.<br /> <br /> +<br /> <br /> Result<br /> <br /> 20.<br /> <br /> +<br /> <br /> Result<br /> <br /> WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 16.<br /> <br /> Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 16.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> HTML Tables and Frames<br /> <br /> 469<br /> <br /> CHAPTER 16<br /> <br /> Activities<br /> <br /> 1. MAKING CONNECTIONS Social Studies—Create a Table Many artists such as Piet Mondrian have created highly-structured paintings based on square and rectangle shapes. ◆ If possible, view examples of Mondrian’s work on the Web or at the library. ◆ Think of a place or event in your community that you could describe using only squares, rectangles, and colors. ◆ Then, use HTML table code to create this work of art. ◆ View it in a browser and make changes as needed to express your ideas.<br /> <br /> 2. STANDARDS AT WORK Students use technology to locate, evaluate, and collect information from a variety of sources. (NETS-S 5)<br /> <br /> Explore Accessibility Section 508 of the Americans with Disabilities Act includes a number of specific standards that Web sites should meet to be accessible to people with disabilities. The law mandates that government and education sites comply with its rulings. Research the specific standards listed in Section 508. Select one of the standards (other than the one shown below). Then, write an HTML code sample that does not meet the provision and an HTML code sample that does meet the provision. For example, one standard states “A text equivalent for every non-text element shall be provided.” HTML code that does not meet this standard is: <IMG src=“images/books.gif” width =“40” height=“30”>.<br /> <br /> HTML code that does meet the standard is: <IMG src=“images/books.gif” alt=“Books” width=“40” height=“30”>.<br /> <br /> Write one or two paragraphs about the standard you selected. ◆ Summarize why the standard is important. ◆ Explain how you could meet this standard when designing a Web page. Provide an example of how to meet the standard.<br /> <br /> 470<br /> <br /> Chapter 16<br /> <br /> CHAPTER 16<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Create a Frames-Based Web Site Your school has decided to create a frames-based site featuring its faculty. The site will have two frames. The left frame will be the link bar frame and will contain a list of the school’s faculty members. The right frame (or content frame) will display a picture and text about each faculty member. Your task is to set up this site and create a content page for one teacher at your school. 1. Create the HTML code for the link bar. 2. Decide as a group what information you will give about the teacher. For example, you could list the courses that he or she teaches, or summarize his or her educational background. Gather the information needed from the teacher you have selected. 3. Draw a sketch of the Web site. Using the sketch, create the HTML code for the content page for the teacher. Include your teacher’s information in the page. Be sure to follow the guidelines for writing Web content when including this information. If necessary, see Chapter 6 to review these guidelines. 4. Write the HTML code for the container page. Test your work in a browser, making revisions until you are satisfied with the results.<br /> <br /> 4. CHALLENGE YOURSELF Create a Nested Table A table that is entirely contained within a cell of another table is called a nested table. Nested tables help you accomplish particular tasks. Suppose, for example, that you want to place a thick blue border around the following table. Row 1 Column 1<br /> <br /> Row 1 Column 2<br /> <br /> Row 2 Column 1<br /> <br /> Row 2 Column 2<br /> <br /> An easy way to accomplish this is to place the code used to create the table inside another table. 1. Use HTML to create the table shown above and test the results in a browser. 2. Then add a blue border around the entire table. Do this by nesting your table code inside another table that has one row and one column. Adjust cell spacing and cell padding as needed. 3. View the table in a browser and make any necessary adjustments. 4. Complete the same task. However, instead of using nested tables, use CSS with <DIV> and &lt;SPAN> tags. Do the pages look the same? Explain the results. HTML Tables and Frames<br /> <br /> 471<br /> <br /> CHAPTER 16<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Create a Table Make a list of local trees for a nature group’s Web site.  Compile a list of the different trees found in your community.  Write the common name of the tree in the left column of a table similar to the one shown below. Research to find the information needed to complete the table. COMMON NAME<br /> <br /> SCIENTIFIC NAME<br /> <br /> BRIEF DESCRIPTION<br /> <br /> Red maple Burr oak White pine<br /> <br />  Use a text editor to create the HTML code for this table. Add cell spacing and cell padding as needed to make the table readable. Specify an appropriate border color.  Add a header row to the table that spans the entire width of the table. Use the title: The Trees Around Us.  Save your work and preview it in a browser.  Make changes, as needed, to the HTML code to improve the look of the table.<br /> <br /> 2. Create Frames     <br /> <br /> 472<br /> <br /> A local park would like to include your table as part of a frames-based Web site about the park. Write the HTML code for a link bar page that will include links to the following content pages: About the Park, Trees in Our Community, Coming Events, and Contact Us. Using HTML, create a content page for the Trees in Our Community page. The content should include the title and table created in the previous activity. Using HTML, create the container page needed to make the frames work together. Save your work and preview the site in a browser. Test the site to make sure that all pages work properly. Make changes as needed to get the frames to display properly.<br /> <br /> Chapter 16<br /> <br /> CHAPTER 16<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the directions to complete each project.<br /> <br /> 1. Create an Inventory Table You want to organize the CDs, videos, or DVDs that you own. You decide to create a table to manage this information. Select one of your collections (CDs, videos, and so on). Plan the type of information that you would like to track. For example, you may decide to classify your CDs as music CDs and data CDs. For your music CDs, you may want to list the title of the CD, the artist(s) performing, and your favorite track. ◆ Once you plan the information to include, draw a sketch of a table that would organize this information in a useful way. ◆ Based on your sketch, write the HTML code to create the table. You do not need to create a row for every item in your collection. You simply need to enter several items from your collection to test how your table is functioning. ◆ Proofread and save your work. View the table in a browser and make any changes needed to improve the look of the table.<br /> <br /> 2. Create a Frames-Based Recipe Index You are learning to cook and you have begun collecting easy-to-follow recipes. You decide to display these recipes in a frames-based site. Find a recipe that you can use for this project. ◆ Create the link bar page listing just one recipe. You will expand the link bar as you add new recipes. ◆ Create the content page which will display the recipe. The recipe should have a title, a table listing the ingredients, and an ordered list of the steps required to complete the recipe (see Appendix B for the tags needed to create an ordered list). ◆ Create the container page needed to display the link bar frame and the content frame. ◆ Proofread and save your work. Preview the site in a browser and make changes as needed so that the frames display properly.<br /> <br /> HTML Tables and Frames<br /> <br /> 473<br /> <br /> CHAPTER<br /> <br /> 17<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> YOU WILL LEARN TO… Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down menu using HTML Add a text area using HTML Modify a text box using CSS Section 17.2 Identify client-side scripting languages Create a rollover button using JavaScript Identify server-side scripting languages Debug code<br /> <br /> WHY IT MATTERS ................................................. Programmers include scripts in HTML pages to make specific actions occur on a Web page. While HTML can be used to create interesting and useful Web pages, neither HTML nor any other markup language can provide all the features and functionality that every Web developer might want. For this reason, HTML lets you add other technologies such as scripts to Web pages. These supplemental technologies can add useful functions to the Web site. This chapter looks at some of the ways HTML is used with other technologies. HTML can be used with various technologies. How does its versatility make it more likely that HTML will be around longer than if it did not work with other programming languages?<br /> <br /> 474<br /> <br /> Chapter 17<br /> <br /> CHAPTER<br /> <br /> 17<br /> <br /> WHAT YOU WILL DO .......................................................................... ACTIVITIES AND PROJECTS Apply It! 17.1 Use HTML Attributes .................. 481 17.2 Explore HTML Web Sites ............ 486 You Try It Activities 17A Add an Audio File Using HTML ........................................... 17B Add Text Boxes Using HTML....... 17C Add Radio Buttons and Check Boxes Using HTML ...................... 17D Add a Pull-down Menu Using HTML .......................................... 17E Add a Text Area Using HTML...... 17F Use CSS to Style a Form ............ 17G Create a Rollover Button Using JavaScript ........................ Chapter Assessment Making Connections ............................ Standards at Work .............................. Teamwork Skills .................................. Challenge Yourself ..............................<br /> <br /> 476 477 478 479 480 480 484<br /> <br /> You Try It Skills Studio Create a Web Page with Audio in HTML ..................................................... 492 Create a Ticket Order Form ................ 492 Web Design Projects Create a Survey Form ......................... Use JavaScript to Add a Submit Button ................................................... Use HTML and JavaScript ................... Create a Community Services Web Site................................................ Create a Feedback Form .....................<br /> <br /> 493 493 494 494 495<br /> <br /> IN THE WORKBOOK Optional Activities and Projects Guided Reading Web Design Projects<br /> <br /> ON THE WEB 490 490 491 491<br /> <br /> Activities at WebDesignDW.glencoe.com Reading Strategy Organizers Go Online Activities Study with PowerTeach Self-Check Assessments<br /> <br /> BEFORE YOU READ How Can You Improve? What do you do after you take a test on the material you have studied? If you do well, your study strategies were successful. If you do poorly, think about how to improve your studying for the next test. It can be very helpful to think about the process you use to learn material. How can you improve your understanding? Discuss study techniques with classmates. But remember, what works for one person might not work for you. Pay attention to your study methods and find out how you learn best.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 475<br /> <br /> SECTION 17.1 ADDING INTERACTIVITY USING HTML Focus on Reading Read to Find Out In this section, you will learn how to use HTML to insert multimedia elements and forms. As you read, pay attention to the HTML tags used for each element.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> You can use HTML code to insert multimedia elements into a Web page. Other HTML tags allow you to create forms.<br /> <br /> animated GIF radio button pull-down menu text area<br /> <br /> Identify four HTML tags used to add features to a form. Use a table like the one below (also available online). HTML Tag<br /> <br /> Function<br /> <br /> In Chapters 9, 10, and 12, you learned how to use Dreamweaver to insert multimedia elements and forms into a Web site.<br /> <br /> Adding Multimedia Elements How can I use HTML to incorporate multimedia into my site?<br /> <br /> In this section, you will learn how to insert multimedia elements into your Web pages using HTML.<br /> <br /> Inserting Audio Files Using HTML Adding an audio (or video) file to a Web page is very similar to adding an image file. You use the <A href rel="nofollow"></A> tag set to identify the location of the file. You can also create a text link by including text within the anchor tag set.<br /> <br /> ACTIVITY 17A Add an Audio File Using HTML<br /> <br /> Figure 17.1 Enter this HTML code to insert an audio file into a Web page.<br /> <br /> 476<br /> <br /> Chapter 17<br /> <br /> 1 In the folder where you are storing your Web sites, create a folder named audio. In the audio folder, create a folder called multimedia. Copy birds.wav from the DataFiles\ Ch17\Multimedia folder into the multimedia folder. 2 Open a text editor and enter the HTML code in Figure 17.1. Name the file birds.html and save it in the audio folder. View the birds.html file in a browser.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> Adding Animated GIFs Using HTML An animated GIF is a sequence of GIF images stored together in a single file with an image transition delay value. This value determines the amount of time each image will remain on screen before the next image replaces it. You use an <IMG> tag to insert animated GIFs into a Web page. Identify What tag set do you use to identify the location of an audio file?<br /> <br /> Activity 17.1 Explore HTML Resources Learn more about advanced HTML at WebDesignDW.glencoe.com.<br /> <br /> Creating a Registration Form What form fields can I add to my Web site using HTML?<br /> <br /> In Chapter 10, you used the Dreamweaver Forms toolbar to create a registration form. In this section, you will create a similar form using HTML.<br /> <br /> Text Boxes An HTML text box allows visitors to enter limited amounts of text on a Web page. The <INPUT> tag indicates where a text box should appear on a page. The <INPUT> tag has a type attribute that takes different values. When creating a text box, the type attribute should equal “text”.<br /> <br /> ACTIVITY 17B Add Text Boxes Using HTML 1 Open a text editor, such as Notepad. Enter the HTML source code listed in Figure 17.2. Save the file as text_box.html. 2 View text_box.html in a browser (see Figure 17.2). Save your work. You will build on this file throughout this section.<br /> <br /> Figure 17.2 The code on the left looks like the figure on the right when displayed in a browser.<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 477<br /> <br /> Preset Options Jargon Within HTML, option buttons and radio buttons are the same thing.<br /> <br /> A radio button (also referred to as an option button) is an interactive control that allows the user to select only one item from a list. Like text boxes, radio buttons are defined with the <INPUT> tag. When creating a radio button, however, the type attribute should equal “radio”. Check boxes are another type of interactive control that allows the user to select multiple items from a list. Check boxes are also defined in HTML with the <INPUT> tag. To create a check box, set the type attribute to equal “checkbox”.<br /> <br /> ACTIVITY 17C Add Radio Buttons and Check Boxes Using HTML 1 Open text_box.html in your text editor. 2 Save the file as buttons.html. 3 Place the insertion point after the last </TR> tag you keyed in Activity 17B and press Enter twice. Enter the HTML source code listed in Figure 17.3.<br /> <br /> Figure 17.3 Enter this code to add radio buttons and check boxes to the form.<br /> <br /> 4 View the buttons.html file in a Web browser. The results should look like Figure 17.4. Save your work.<br /> <br /> Figure 17.4 Radio buttons and check boxes provide visitors with preset options.<br /> <br /> 478<br /> <br /> Chapter 17<br /> <br /> Pull-Down Menus A pull-down menu (also referred to as a drop-down menu) is an interactive element that gives users a list of options to choose from. Users may select only one of those options at a time. Pull-down menus are defined with the &lt;SELECT></SELECT> tag set. Options in the menu are defined by the <OPTION></OPTION> tag set.<br /> <br /> ACTIVITY 17D Add a Pull-down Menu Using HTML 1 Open buttons.html in your text editor. Save the file as menu.html. 2 Place the insertion point after the last </TR> tag you keyed in Activity 17C and press Enter twice. Enter the HTML source code listed in Figure 17.5.<br /> <br /> Figure 17.5 Enter this code to add a pull-down menu to the form.<br /> <br /> 3 View menu.html in a Web browser. The results should look like Figure 17.6. Save your work.<br /> <br /> Figure 17.6 Visitors can choose only one option from the pull-down menu.<br /> <br /> Text Areas A text area (also referred to as a scroll box) allows the user to enter more information than a text box. If the amount of text the user enters exceeds the space provided, the control will automatically display a scroll bar that allows the user to scroll the text up and down or left and right. The <TEXTAREA></TEXTAREA> tag set defines a text area. In the next activity, you will use HTML to create a text area. You will also use HTML to add Submit and Reset buttons to the registration form (note that the Submit button is not functional). HTML, Scripting, and Interactivity<br /> <br /> 479<br /> <br /> ACTIVITY 17E Add a Text Area Using HTML 1 Open menu.html in your text editor. Save the file as final_form.html. 2 Place the insertion point after the last </TR> tag you keyed in Activity 17D and press Enter twice. Enter the HTML source code listed in Figure 17.7. 3 View final_form.html in a Web browser. The results should look like Figure 17.7.<br /> <br /> Code<br /> <br /> Figure 17.7 Enter this code to add a text area and Submit and Reset buttons to the form.<br /> <br /> Caution Since the form you created is not stored on a Web server, your form will not retain any entered data or selections.<br /> <br /> Code shown in browser<br /> <br /> It is not difficult to create a form using HTML. Knowing which HTML tags to use can help you adjust form elements when you create a form in Dreamweaver. Describe What occurs when the amount of text the user enters exceeds the space provided in the text area?<br /> <br /> Forms in CSS How can I use CSS to modify a form element?<br /> <br /> Cascading style sheets (CSS) allow you to modify the appearance of form elements within an HTML document. In the next activity, you will specify that a text field have a light yellow background, no border, and that any text entered is bold and blue.<br /> <br /> ACTIVITY 17F Use CSS to Style a Form 1 Open Notepad. Key the code shown in Figure 17.8 on page 481. Save the file as cssform.html.<br /> <br /> 480<br /> <br /> Chapter 17<br /> <br /> CSS coding<br /> <br /> Figure 17.8 The code on the left looks like the figure on the right when displayed in a browser.<br /> <br /> 2 Place the insertion point in the first <INPUT> tag just after the word INPUT. Press the spacebar once. Key: class=“formStyle”. Repeat this step for the second <INPUT> tag. Save and preview the file in a browser (see Figure 17.8). Not all form controls respond to CSS properties. For example, specifying no border for option buttons will have no effect. Explain How can you modify the appearance of form elements within an HTML document?<br /> <br /> Section 17.1 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • You can use the<br /> <br /> 1. Define animated GIF, radio button, pull-down menu, text area.<br /> <br /> 4. Drawing Conclusions How might a company use the information that visitors submit in a registration form?<br /> <br /> <A href rel="nofollow"></A> tag set to insert an audio or video file. • An animated GIF is a sequence of GIF images stored together in one file along with an image transition delay value. • The <INPUT> tag has a type attribute that takes different values, depending on the type of element you are creating.<br /> <br /> 2. Explain how radio buttons and pull-down menus are similar. 3. List the HTML tags needed to create a pull-down menu.<br /> <br /> 5. Compare and Contrast In what ways are radio buttons similar to check boxes? In what ways are they different?<br /> <br /> Apply It! Use HTML Attributes Under appropriate supervision, locate a Web site that provides advanced HTML reference information. Use this site to identify optional attributes that you could use to affect the appearance of text boxes, pull-down menus, and text areas.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 481<br /> <br /> What Does a Webmaster Do?<br /> <br /> A<br /> <br /> Webmaster’s main function is to keep the site up and running, which often simply means publishing HTML documents that someone else produces.<br /> <br /> However, the Web has become a complicated place. Designers commonly create sophisticated pages using cascading style sheets and nested code. Accordingly, the Webmaster’s job has become more complicated and varied, often with added responsibilities such as server and network management, site design, HTML coding and programming, troubleshooting, and monitoring site traffic.<br /> <br /> Knowledge and Skills Webmasters should understand network architecture and software, as well as telecommunication technologies. Many Webmasters are also skilled in HTML and other scripting languages.<br /> <br /> Webmasters often manage teams of designers and programmers.<br /> <br /> Some Webmasters have training in graphics or multimedia. Others specialize in database technologies or security, which can be valuable in building secure e-commerce sites. Webmasters with business experience may focus on a site’s efficiency and profitability.<br /> <br /> Becoming a Webmaster Many Webmasters start out by learning about one aspect of the Web, such as design, programming, networking, or business, then gain real-world experience working on Web teams. Organizations such as the World Organization of Webmasters (WOW) have established standards and certifications for Webmasters. WOW certification courses, usually offered through professional schools, can provide a wide range of skills that you need to land a job in the Web field.<br /> <br /> 1. Conduct an Interview Use the Web to find and contact a professional Webmaster, and interview him or her via e-mail or instant messaging. Discuss the job requirements and training. Summarize the interview in a report. 482<br /> <br /> Chapter 17<br /> <br /> 2. Identify Job Skills Aside from technical skills, what other kinds of skills might be required of a professional Webmaster, especially one who must manage a team of designers and programmers, as well as the site’s efficiency and profitability?<br /> <br /> SECTION 17.2 ADDING INTERACTIVITY USING SCRIPTING Focus on Reading Read to Find Out The main purpose of this section is to explain how a Web developer can use scripting languages to supplement an HTML-based Web site. As you read, make sure you know the difference between client-side scripts and server-side scripts.<br /> <br /> Main Ideas<br /> <br /> Key Terms<br /> <br /> Reading Strategy<br /> <br /> Scripting languages are used to supplement the capabilities of standard HTML. Scripting languages are divided into client-side scripts and serverside scripts.<br /> <br /> client-side script object event event handler function variables conditional statements server-side script<br /> <br /> Compare and contrast client-side and server-side scripts. Use a Venn diagram like the one below (also available online).<br /> <br /> Client-side script<br /> <br /> Server-side script<br /> <br /> A script is a small program that a Web developer can add to an HTML document to make a static page dynamic. Scripting languages allow Web developers to write small programs that give them greater control over Web site functionality.<br /> <br /> Client-Side Scripts How does a client-side script interact with an HTML-based site?<br /> <br /> Different scripting technologies interact with HTML-based Web sites in different ways. A client-side script is designed to be transferred to the user’s computer along with the HTML code. Once on the user’s computer, this script is then executed by the user’s Web browser.<br /> <br /> Activity 17.2 Explore Scripts Learn more about different types of scripts at WebDesignDW.glencoe.com.<br /> <br /> JavaScript Web developers commonly use JavaScript for developing client-side scripts. You can incorporate JavaScript code into a standard Web page by using the &lt;SCRIPT></SCRIPT> tag set. Everything contained between the two tags must be JavaScript and must conform to the rules of the JavaScript language. For example, JavaScript is case sensitive, so you must enter the code exactly. If you copy script from a Web site, make sure to get permission from the Web developer. JavaScript code contains different elements that make the script work: ◆ JavaScript treats each element in a browser window as an object, which can have properties that define it. For example, if a page contains a graphic, then the <IMG> tag defines that object, and the graphic’s height is one of the object’s properties. WebDesignDW.glencoe.com<br /> <br /> You Should Know Including <!-- and //--> tags in your code tells browsers that cannot read JavaScript to skip the code. Browsers that can read JavaScript will still process the code.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 483<br /> <br /> ◆ An event is something that causes an effect to occur. An event may be triggered by a user action or by the computer system itself. Jargon When discussing what a script does, Web developers usually state what an object “knows,” as though the object were living. For example, a graphic object may know its height and width.<br /> <br /> ◆ The JavaScript event handler defines the action that will occur when an event takes place. ◆ A function is code that performs the specific action defined by the event handler code. ◆ JavaScript uses variables to identify values that will change when the script is executed. ◆ Conditional statements are commonly used in JavaScript to allow the script to react differently depending on the user’s actions. Web developers can use JavaScript for a variety of programming tasks. In the next activity, you will use JavaScript to create a rollover button.<br /> <br /> ACTIVITY 17G Create a Rollover Button Using JavaScript 1 Copy the button1.gif and button2.gif files from the DataFiles\Ch17\ Images folder into the images folder. 2 Open a text editor, such as Notepad. Enter the source code listed in Figure 17.9. Name the file rollover.html and save it in the rollover folder.<br /> <br /> Figure 17.9 Enter this JavaScript code to create a rollover button.<br /> <br /> Variable Objects<br /> <br /> 484<br /> <br /> Function<br /> <br /> Conditional Statement<br /> <br /> Event<br /> <br /> Event Handler<br /> <br /> Chapter 17<br /> <br /> 3 View rollover.html in a Web browser. The results should look like Figure 17.10. Test the button by touching it with your mouse.<br /> <br /> Figure 17.10 The button image changes when the user’s mouse touches it.<br /> <br /> Figure 17.11 The &lt;APPLET> tag directs the HTML code to locate the programming code. What is the name of the applet embedded in this code?<br /> <br /> Java Applets Java applets are small programs written in the Java programming language. These client-side programs can also be embedded in a Web page. However, unlike JavaScript, the actual Java source code is not included with the HTML file. Instead, the Web developer may simply include an &lt;APPLET> tag that tells the Web browser where to locate the applet program. The applet then downloads over the Internet and executes within a specified area on the Web page. Figure 17.11 shows the code used to insert a small applet into a Web page. Define What is an event handler?<br /> <br /> Server-Side Scripts How can a Web page interact with server-side scripts?<br /> <br /> Other scripting languages execute on the Web server and transfer the output to the user’s computer as a Web page. A program such as this is called a server-side script.<br /> <br /> Common Gateway Interface (CGI) The Common Gateway Interface (CGI) is a standard set of rules that allows Web pages to interact with server-side scripts. Web developers often use CGI to create Web-based forms that users fill out and then submit to the server. The information the users provide passes through the CGI to a server-side script that then processes the information. The script typically saves such information in a database and sometimes generates a confirmation or notification e-mail message as well.<br /> <br /> Content CGI scripts can be written in a variety of languages including Java, C, or C++. On Linux Web servers, the Perl scripting language is one of the most popular choices for implementing CGI scripts.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 485<br /> <br /> Dynamic Content Troubleshooting Several shortcuts can help you fix a lengthy Notepad document. Use Ctrl + F to open the Find dialog box. Press F3 to find the term again. If you need to replace faulty code throughout the document, press Ctrl + H to open the Find and Replace dialog box.<br /> <br /> HTML pages are generally static. Once a server has transferred an HTML page to a user’s browser, the information on that page does not change. Server-side scripts, however, can be used to change static content into dynamic content. “Dynamic content” is a generic term that refers to information that changes based on a user’s action. For example, some forms will offer different options depending on the information submitted by the user. Server-side scripts help make this feature possible. A server-side script retrieves data based on the user’s input and then generates a Web page that displays in the user’s browser. While it looks like a typical HTML document, the information on this page has been changed to suit that particular user. Identify What does CGI stand for?<br /> <br /> Debugging Code How can I identify potential problems in my coding?<br /> <br /> As discussed in Chapter 4, you can use an HTML validator to debug HTML code. Another way to identify potential problems is to include an alert statement in your code. An alert statement tells you when a particular action is not occurring as specified. Alert statements are useful to Web developers during the testing phase. They are not helpful, however, to visitors to the Web site. Therefore, alert statements should be removed before the site is published. Error messages can also help you locate and fix code errors. Explain When is an alert statement most useful to a Web developer?<br /> <br /> Section 17.2 Assessment Reading Summary<br /> <br /> What Did You Learn?<br /> <br /> Critical Thinking<br /> <br /> • Scripts executed by a user’s browser are known as client-side scripts.<br /> <br /> 1. Define client-side script, object, event, event handler, function, variables, conditional statements, server-side script.<br /> <br /> 4. Draw Conclusions Why do many Web developers copy scripts written by other people into their own pages?<br /> <br /> 2. Explain the difference between client-side scripts and serverside scripts.<br /> <br /> 5. Make Recommendations What types of dynamic content would you recommend adding to a site that provides historical information about your city?<br /> <br /> • JavaScript is widely used for client-side scripting applications. • Server-side scripts execute on a Web server and transfer the results to the user’s browser.<br /> <br /> 3. List the HTML tags used to create interactive elements.<br /> <br /> Apply It! Explore HTML Web Sites Under appropriate teacher supervision, search the Internet to locate one or more Web sites that contain JavaScript tutorials. Review the information and write a paragraph summarizing one new fact or technique you have learned.<br /> <br /> 486<br /> <br /> Chapter 17<br /> <br /> CHAPTER 17<br /> <br /> Reading Review<br /> <br /> SECTION 17.1 Adding Interactivity Using HTML<br /> <br /> SECTION 17.2 Adding Interactivity Using Scripting<br /> <br /> Key Terms<br /> <br /> Key Terms<br /> <br /> animated GIF, 477 radio button, 478 pull-down menu, 479 text area, 479<br /> <br /> client-side script, 483 object, 483 event, 484 event handler, 484 function, 484 variables, 484 conditional statements, 484 server-side script, 485<br /> <br /> Main Ideas ■ You can use the <A href rel="nofollow"></A> tag set to insert ■<br /> <br /> ■<br /> <br /> ■<br /> <br /> ■ ■<br /> <br /> an audio or video file. An animated GIF is a sequence of GIF images stored together in one file along with an image transition delay value. The <INPUT> tag has a type attribute that takes different values, depending on the type of element you are creating. The type attribute for a text box should equal “text”. For a radio button, it should equal “radio”. For a check box, it should equal “checkbox”. The &lt;SELECT></SELECT> tag set defines a pull-down menu. The <TEXTAREA></TEXTAREA> tag set defines a text area.<br /> <br /> Main Ideas ■ Scripts executed by a user’s browser are known as ■ ■ ■ ■ ■<br /> <br /> ■ ■<br /> <br /> ■ ■ ■<br /> <br /> client-side scripts. JavaScript is widely used for client-side scripting applications. JavaScript events are triggered by user action or by the computer system. A JavaScript event handler responds to events. Web developers can use JavaScript for a variety of common programming tasks. Java applets are client-side programs that download and execute when browsers encounter their reference tag in the HTML code. Server-side scripts execute on a Web server and transfer the results to the user’s browser. CGI is a server-side scripting language used to process information, often saving the information in a database. CGI enables Web pages to interact with server-side scripts. Dynamic content is customized information generated by a Web server. An alert statement in your code tells you when an action is not occurring as specified.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 487<br /> <br /> CHAPTER 17<br /> <br /> Review and Assessment<br /> <br /> AFTER YOU READ Find Your Study Method Consider your reading weaknesses and strengths. Think about recurring problems you have when you study and take tests. Then go back over the Read to Succeed features at the beginning of each chapter in this book. Determine which suggestions would be most useful to you. Try using one or more Read to Succeed methods when you read through this chapter and review the material.<br /> <br /> On a separate piece of paper, sketch the graphic shown for each question below. Complete the graphic and answer the questions. Be ready to explain and discuss your answers.<br /> <br /> 13. List the HTML tag and type attribute used for radio buttons, check boxes, and pull-down menus. Form Field<br /> <br /> HTML Tag<br /> <br /> Type Attribute<br /> <br /> radio buttons check boxes pull-down menus<br /> <br /> Reviewing Key Terms 1. Which interactive element allows users to select only one item from a list, where all the items in the list are viewed at the same time? 2. What is another term for option buttons? 3. What are the similarities and differences between check boxes and radio buttons? 4. Which interactive element uses the &lt;SELECT></SELECT> tag set? 5. How does a text area allows users to move up and down to review what they have typed? 6. Rewrite this statement to make it true: Objects are triggered by a user’s action or by the computer system. 7. What scripting language do Web developers use to develop client-side scripts? 8. Which types of scripts are transferred to the user’s Web browser with the HTML code?<br /> <br /> Understanding Main Ideas 9. Describe the benefits of having interactive elements in a Web site. 10. Explain how an animated GIF works. 11. Identify the tag used to insert both audio and video files. 12. List the tag and type attribute used for text boxes. 488<br /> <br /> Chapter 17<br /> <br /> 14. Explain the similarities and differences between a JavaScript and a Java applet.<br /> <br /> JavaScript<br /> <br /> Java Applet<br /> <br /> Critical Thinking 15. Distinguish between an event and an event handler. 16. Describe a common use of CGI scripts. 17. Analyze Multimedia You are planning a Web site to announce a new soft drink. What types of sound files might you use? Also, describe an animated GIF that could be used in the site. 18. Make Decisions You are creating an online form. One of the questions that users must answer is “Which conference will you attend?” The conference will be held in 10 cities. What type of interactive control would you use? Explain your decision. 19. Draw Conclusions Some e-commerce sites include wish lists that allow visitors to select items that they may want to purchase in the future. Is the script that supports the wish list feature a client-side script or a server-side script? Explain the reasons for your choice.<br /> <br /> CHAPTER 17<br /> <br /> Review and Assessment<br /> <br /> 20. Analyze Languages Identify ways in which scripting languages are similar to and different from HTML or other markup languages. How has the development of scripting languages changed how users interact with the Internet? 21. Make Recommendations A client wants a specific effect for her Web site, and she has asked you to explain how JavaScript works. Complete a flow chart like the one below to show your client how an object is affected. Include five boxes in your chart. Begin with what triggers an event, and include variables and conditional statements in your process. JavaScript Code Element<br /> <br /> Reading & Writing Read the paragraph below and then answer the question.<br /> <br /> HTML pages are generally static. Once a server has transferred an HTML page to a user’s browser, the information on that page does not change. Server-side scripts, however, can be used to change static content into dynamic content. “Dynamic content” is information that changes based on a user’s action. A server-side script retrieves data based on the user’s input and then generates a Web page that displays in the user’s browser. The information on this page has been changed to suit that particular user.<br /> <br /> ➠ ➠ ➠ ➠<br /> <br /> According to the paragraph, which of the following statements is true?<br /> <br /> Element<br /> <br />  Dynamic pages change based on a user’s action.  Static pages utilize a server-side script to retrieve data.<br /> <br /> Element<br /> <br />  Both static and dynamic pages change based on a user’s action.<br /> <br /> Element<br /> <br />  HTML pages are usually dynamic.<br /> <br /> Element<br /> <br /> You are the center of control when you are at the keyboard creating a Web site. You can work faster if you know the shortcut commands for the more frequently used menu items. On your own paper, copy and complete the chart shown below.<br /> <br /> 22.<br /> <br /> +<br /> <br /> 23. 24.<br /> <br /> Result Result<br /> <br /> +<br /> <br /> WebDesignDW.glencoe.com<br /> <br /> WebDesignDW.glencoe.com Study with PowerTeach Go to the book Web site shown above. To review the main points in this chapter, select e-Review>PowerTeach Outlines>Chapter 17.<br /> <br /> Online Self Check Test your knowledge of the material in this chapter by selecting e-Review>Self Checks>Chapter 17.<br /> <br /> Result<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 489<br /> <br /> CHAPTER 17<br /> <br /> Activities<br /> <br /> 1. MAKING CONNECTIONS Social Studies—Create a Survey Form Your psychology class is exploring birth order and personality traits. Use a psychology textbook, library book, or the Internet to find a list of personality traits. Then create a survey form that asks people to identify their birth order (oldest, middle, or youngest) and select the traits that apply best to them. Create the survey form using HTML and test it in a browser.<br /> <br /> 2. STANDARDS AT WORK Students use productivity tools to collaborate in constructing technologyenhanced models, prepare publications, and produce other creative works. (NETS-S 3)<br /> <br /> Debug Scripts Select a partner. You and your partner should then use Dreamweaver to create separate Web pages that contain JavaScript code. You may download the JavaScript code from a Web site (ask for your teacher’s permission before downloading anything from the Web!). 1. Test the page in a browser to make sure that the JavaScript code works correctly. 2. Replace one line of the script by keying the following: code replaced. Be sure to write down the exact script replaced. 3. Have your partner debug the JavaScript code by opening the page in a browser. See if your partner identifies the correct place where the JavaScript code has been removed. 490<br /> <br /> Chapter 17<br /> <br /> CHAPTER 17<br /> <br /> Activities<br /> <br /> 3. TEAMWORK SKILLS Convert a Printed Form into an Electronic Form With your teacher’s permission, form a team. Have the team members find three printed forms that they have seen or used. As a team, select one form. Then, plan how to convert the printed form into an electronic form. Beside each element on the printed form, write the type of field that should be used. Use text areas only when the information truly cannot be selected in some other way. For example, many printed forms include a line or box to list the state. However, the list of states is known, and therefore should be included as a pull-down menu. Create the form in HTML. Test it in a browser and make changes and modifications as needed.<br /> <br /> 4. CHALLENGE YOURSELF Create a Dictionary of Terms The World Wide Web Consortium provides an HTML validator that can check HTML code and report errors. This tool is free of charge, but the results are not always easy to understand. ◆ With your teacher’s permission, go to the World Wide Web Consortium’s Web site at www.w3.org. Review the documentation provided about the HTML validator. ◆ As you read the material, write down at least five words or phrases that you do not clearly understand. For example, the word parse is used frequently in the documentation. Create a table with two columns and five rows. List each word or phrase in the left column of the table. ◆ Find a definition or description of each word or phrase you have written down, including the word parse. Use the information to complete the table. ◆ Use your table to create a Web page using HTML code that displays these words or phrases and definitions or descriptions. ◆ With your teacher’s permission, use the HTML validator to check the page you have created. Save your work and test it in a browser. Make changes or modifications, as needed, to the HTML code to improve the look of the table. HTML, Scripting, and Interactivity<br /> <br /> 491<br /> <br /> CHAPTER 17<br /> <br /> Projects<br /> <br /> These exercises reinforce the skills you learned in this chapter’s You Try It activities. Refer back to the You Try It activities if you need extra guidance.<br /> <br /> 1. Create a Web Page with Audio in HTML         <br /> <br /> Build a Web page in HTML that contains two audio files. Locate two audio files that are related in some way. Write a short story or poem that incorporates these two audio files. Create a folder named Skills_17. In this folder, create a second folder named multimedia. Copy the two audio files into the multimedia folder. Open Notepad or another text editor. Create an HTML document that includes links to the two audio files within the text you have written. Use HTML to format the document. Proofread your work carefully. Save the file as an .html document in the Skills_17 folder. Open the file in a Web browser. Test the links to the audio files. Make any changes or improvements needed and test the file in the browser again.<br /> <br /> 2. Create a Ticket Order Form<br /> <br /> <br /> <br />     <br /> <br /> 492<br /> <br /> To reduce long lines at tickets counters, the local sports team has placed order booths around the city. On paper, plan the order form. The form should include game dates, type of payment information, customer information, and the number of tickets desired (use the form on this page as a model). Open Notepad or another text editor. Use HTML to create the form. Save the form as an .html document. Open the file in a Web browser and test the form. Make any changes or improvements needed and test the form in the browser again.<br /> <br /> Chapter 17<br /> <br /> CHAPTER 17<br /> <br /> Projects<br /> <br /> Read the projects described below. Then follow the direction to complete each project.<br /> <br /> 1. Create a Survey Form A summer day camp staff is planning programs for next summer. They want to survey parents about what programs they would like to see offered. The possible types of programs include: art camp, soccer camp, baseball camp, bird watching camp, animal care camp, music camp, mystery adventure camp, swimming camp, and gardening camp. The staff is also open to ideas from the parents about other types of camp experiences. Use HTML to create a form that parents can complete online. You want to gather contact information from the parents, as well as their preferences for camp types. Test the form in a browser, making any changes or improvements as needed.<br /> <br /> 2. Use JavaScript to Add a Submit Button You will now add a Submit button to the form you created in Project 1 above. This Submit button will include a JavaScript function that will allow people to verify their information. ◆ Add the HTML code below to create the Submit button. Place this code after the last row in the community form.<br /> <br /> HTML Code JavaScript<br /> <br /> ◆ Add the JavaScript shown at right to the head of your form code. This script will add interactivity to the Submit button. ◆ Carefully proofread your code. Test the HTML code in at least two browsers. Make corrections as needed.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 493<br /> <br /> Problem Solving: Use HTML and JavaScript You are part of a customer service group. People who need help may call or e-mail questions to your company. A representative is available 24 hours a day, seven days a week to respond. Create a Web page that advertises these services. 1. Create an HTML document that includes the JavaScript code (shown below) in its <HEAD> section. 2. Customize the script by replacing INSERT text here. with your own messages. 3. Write HTML code for the <BODY> section of the page. The page should list the services you are offering in an unordered list. 4. Create a table that contains three answers to common customer problems. 5. Carefully proof your code. Test your site in at least two browsers. Make any needed changes.<br /> <br /> Communication Skills: Create a Community Services Web Site Create a frames-based Web site that provides information about services available in your community, such as libraries, parks, hospitals, and community events. 1. Use a text editor to create the link bar page that will display in the left frame. The list of pages will include the home page, a community services page, a community connections page, and a parks and recreation page. 2. Create the content page for the home page (content pages will display in the right frame). Use WordArt or drawing tools to create a simple community logo. The page should also welcome visitors and describe what can be found at the site. 3. Create the container page that describes how the link bar page and the content page will display. 4. Create the links between the link bar and each of the content pages. 5. Create content pages for the remaining pages. The other content pages should contain brief descriptions of services available in your community, including contact information. 6. Proofread your HTML code carefully. Test your site in a browser. Make changes as needed. 494<br /> <br /> Chapter 17<br /> <br /> Create a Feedback Form Select a Web site that you have created for your Web design class and add a feedback form to the site. In this project, you will use your HTML skills to create the feedback form. 1. Create a feedback form page that will link to the home page of the site you have selected. Use Dreamweaver to create the new page and to add it to the site’s navigation scheme. 2. Switch to Code view. Create the form using HTML coding. Title the form Help Me Improve the Web Site. 3. Create the following statements and check boxes for responses:<br /> <br /> What did you like about this Web site? ❏ Site design ❏ Color scheme ❏ Navigation ❏ Ease of use ❏ Hyperlinks<br /> <br /> ❏ ❏<br /> <br /> Information structure<br /> <br /> What did you NOT like about this Web site? ❏ Site design ❏ Color scheme ❏ Navigation ❏ Ease of use ❏ Hyperlinks<br /> <br /> ❏ ❏<br /> <br /> Information structure<br /> <br /> Content<br /> <br /> Content<br /> <br /> 4. Create the following statement with radio (option) buttons for the response:<br /> <br /> Rate my site: Excellent<br /> <br /> Good<br /> <br /> Needs improvement<br /> <br /> 5. Create a text area labeled Comments that people can use to write specific suggestions and ideas. 6. Include a statement at the bottom of the form that thanks visitors for responding. 7. Add code to make the form page consistent with the rest of the Web site. For example, you may want to add a background color or specify a particular font. 8. Test the form in a browser. Make sure that you can navigate to the form from the site’s home page. 9. Optional (with your teacher’s permission)—publish the finished Web site on your school or class Web site. 10. For your portfolio, include a screen shot and an electronic copy of your finished product.<br /> <br /> HTML, Scripting, and Interactivity<br /> <br /> 495<br /> <br /> Dreamweaver® Reference Guide Activities in this book can be completed using Dreamweaver MX 2004 and, with some modifications, Dreamweaver MX. The following guide identifies differences between the versions and lists which activities these differences might influence.<br /> <br /> Dreamweaver MX versus Dreamweaver MX 2004 1. Page View Options View buttons function the same way in MX and MX 2004. However, the buttons are labeled Design, Code, and Split in MX 2004, and are not labeled in MX.<br /> <br /> VIEW<br /> <br /> DESCRIPTION<br /> <br /> Design View<br /> <br /> Lets you edit a page in a What You See Is What You Get environment.<br /> <br /> Code View<br /> <br /> Lets you examine and edit the HTML code for the page.<br /> <br /> Split View<br /> <br /> Shows Code view on the top of the screen and Design view at the bottom. Click on an element in Design view to highlight the corresponding HTML code.<br /> <br /> 2. Dreamweaver Interface There are some important differences between the MX and MX 2004 interfaces.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> The Insert toolbar has been redesigned in MX 2004.<br /> <br /> Insert toolbar has tabs allowing you to select different views.<br /> <br /> Insert toolbar has drop-down arrow allowing you to select different views.<br /> <br /> Used throughout activities.<br /> <br /> The Insert toolbar allows users to customize a Favorites view in MX 2004.<br /> <br /> Favorites view not available.<br /> <br /> Can customize Favorites view with most often used buttons.<br /> <br /> Used throughout activities.<br /> <br /> Position of Document tabs that allow users to switch between open pages has changed in MX 2004.<br /> <br /> Tabs that allow you to jump between open pages are located below document at bottom of screen.<br /> <br /> Tabs that allow you to jump between open pages are located above document at top of screen.<br /> <br /> Used throughout activities.<br /> <br /> 496<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> 3. Creating, Defining, and Publishing Sites In Dreamweaver MX, you use menus or panels to create or open Web site files. In MX 2004, you use the Start page to open existing sites, to create new sites, or to edit definitions.<br /> <br /> Opens new blank HTML page<br /> <br /> Opens more options, including templates<br /> <br /> Allows user to define new site or edit an existing one<br /> <br /> The differences between creating, defining, and publishing sites in Dreamweaver MX and MX 2004 are outlined in the table below.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> To create a new blank page.<br /> <br /> Choose File>New, select Basic Page from the Catalog list and HTML from the Basic Page list.<br /> <br /> On Start page, under Create New, click HTML.<br /> <br /> You Try It (YTI) Activity 2A, p. 49<br /> <br /> To define a new site.<br /> <br /> Choose Window>Site. On Site menu toolbar, select Site>New Site<br /> <br /> On Start page, under Create New. Select Dreamweaver Site. OR click Site>Manage Sites and click New.<br /> <br /> YTI Activity 2A, p. 49 YTI Activity 8A, p. 230 YTI Activity 12A, p. 337<br /> <br /> To use a template to create a new page.<br /> <br /> Choose File>New, select Templates tab.<br /> <br /> On Start page, under Create New, click More. Select the Templates tab.<br /> <br /> YTI Activity 7A, p. 193<br /> <br /> To edit the site definition of an existing site.<br /> <br /> Select Site>Edit Sites.<br /> <br /> Select Site>Manage Sites.<br /> <br /> YTI Activity 1B, p. 23 YTI Activity 11B, p. 318<br /> <br /> To publish a site using FTP.<br /> <br /> Can publish using passive FTP only.<br /> <br /> Offers option to publish using passive or secure FTP.<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> 497<br /> <br /> 4. Formatting There are differences between MX and MX 2004 that influence how you copy and paste text between applications and how you format font sizes on a Web page.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> To copy and paste text from Microsoft Word and Excel.<br /> <br /> Pasted text does not retain fonts, colors, or formatting.<br /> <br /> Pasted text and data retain fonts, colors, and formatting, using CSS.<br /> <br /> Chapter 12, Skills Studio #2, p. 362<br /> <br /> To change the font size in the Properties inspector.<br /> <br /> In the Font Size drop-down menu, font sizes range from 1 to 7 and +1 to +7.<br /> <br /> Font size choices range from 9 to 36 pixels and from xxsmall to larger.<br /> <br /> YTI Activity 3D, p. 86<br /> <br /> 5. Images Dreamweaver MX 2004 contains limited Macromedia Fireworks capabilities that allow you to manipulate images. These capabilities are not present in Dreamweaver MX. Resample<br /> <br /> Brightness and Contrast<br /> <br /> Crop<br /> <br /> Sharpen<br /> <br /> The image capabilities available in MX and MX 2004 are outlined in the table below.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> To crop or resample an image in Dreamweaver.<br /> <br /> Cropping and resampling must be done in an external image editor.<br /> <br /> Crop and Resample buttons appear in the Properties inspector when an image is selected (see above).<br /> <br /> YTI Activity 8B, p. 233<br /> <br /> To change the brightness, contrast and sharpness of an image.<br /> <br /> The brightness, contrast, and sharpness of an image must be adjusted in an external image editor.<br /> <br /> Brightness and Contrast and Sharpen buttons appear in the Properties inspector when an image is selected (see above).<br /> <br /> YTI Activity 8C, p. 234<br /> <br /> 498<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> 6. Page Properties Dialog Box You use the Page Properties dialog box to specify a Web page’s layout, formatting, and other characteristics.<br /> <br /> Categories<br /> <br /> The table below outlines how the dialog box is different in MX and MX 2004.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> To change the category on the Page Properties dialog box.<br /> <br /> Does not contain separate box labeled Category. Enter title into Title text box at top of dialog box.<br /> <br /> Under Category, select Title/Encoding to find the Title text box.<br /> <br /> YTI Activity 4I, p. 117<br /> <br /> To change the color of a Rollover link in the Page Properties dialog box.<br /> <br /> Enter values for Links, Visited links, and Active links.<br /> <br /> In Links category, includes Rollover links option.<br /> <br /> YTI Activity 6H, p. 180<br /> <br /> 7. CSS While Dreamweaver MX automatically uses tables to lay out pages, MX 2004 uses CSS by default for page layout. Some of the CSS features available in MX 2004 are outlined below.<br /> <br /> CATEGORY<br /> <br /> DREAMWEAVER MX<br /> <br /> DREAMWEAVER MX 2004<br /> <br /> To see which CSS rules apply to a page.<br /> <br /> Not available.<br /> <br /> Relevant CSS tab in Tag Inspector panel shows which CSS rules apply to the current selection.<br /> <br /> To create new CSS files.<br /> <br /> In the New CSS Style dialog box, next to Type, choose Make Custom Style (Class).<br /> <br /> In the New CSS Style dialog box, for Selector type, choose Class (can apply to any tag).<br /> <br /> Browser validation (used to confirm that pages can be viewed by specific browsers).<br /> <br /> Not available.<br /> <br /> Documents are checked for CSS rules and tags compatibility. Click the Check Browser Support button on the Document toolbar to view any problems.<br /> <br /> TEXTBOOK ACTIVITY<br /> <br /> YTI Activity 12B, p. 338<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> 499<br /> <br /> Windows versus Macintosh Commands The following table outlines some of the more frequently used Windows commands (and the corresponding Mac shortcuts) covered in this book.<br /> <br /> ACTION<br /> <br /> WINDOWS SHORTCUT<br /> <br /> MACINTOSH SHORTCUT<br /> <br /> Align>Center<br /> <br /> Ctrl + Alt + Shift + C<br /> <br /> Cmd + Option + Shift + C<br /> <br /> Align>Justify<br /> <br /> Ctrl + Alt + Shift + J<br /> <br /> Cmd + Option + Shift + J<br /> <br /> Align>Left<br /> <br /> Ctrl + Alt + Shift + L<br /> <br /> Cmd + Option + Shift + L<br /> <br /> Align>Right<br /> <br /> Ctrl + Alt + Shift + R<br /> <br /> Cmd + Option + Shift + R<br /> <br /> Bold<br /> <br /> Ctrl + B<br /> <br /> Cmd + B<br /> <br /> Check links in the entire site<br /> <br /> Ctrl + F8<br /> <br /> Cmd + F8<br /> <br /> Check selected links<br /> <br /> Shift + F8<br /> <br /> Shift + F8<br /> <br /> Check spelling<br /> <br /> Shift + F7<br /> <br /> Shift + F7<br /> <br /> Clear<br /> <br /> Delete<br /> <br /> Delete<br /> <br /> Close<br /> <br /> Ctrl + W<br /> <br /> Cmd + W<br /> <br /> Close All<br /> <br /> Ctrl + Shift + W<br /> <br /> Cmd + Shift + W<br /> <br /> Close Window<br /> <br /> Ctrl + F4<br /> <br /> No shortcut<br /> <br /> Copy<br /> <br /> Ctrl + C or Ctrl + Insert<br /> <br /> Cmd + C<br /> <br /> Create new file<br /> <br /> Ctrl + Shift + N<br /> <br /> Cmd + Shift + N<br /> <br /> Create new folder<br /> <br /> Ctrl + Alt + Shift + N<br /> <br /> Cmd + Option + Shift + N<br /> <br /> Ctrl + X or Shift + Delete Ctrl + Q or Alt + F4<br /> <br /> Cmd + X or Shift + Delete Cmd + Q or Option + F4<br /> <br /> Find and Replace<br /> <br /> Ctrl + F<br /> <br /> Cmd + F<br /> <br /> Get selected files or folders from remote site<br /> <br /> Ctrl + Shift + D<br /> <br /> Cmd + Shift + D<br /> <br /> Insert Flash Files<br /> <br /> Ctrl + Alt + F<br /> <br /> Cmd + Option + F<br /> <br /> Insert Image<br /> <br /> Ctrl + Alt + I<br /> <br /> Cmd + Option + I<br /> <br /> Insert Named anchor<br /> <br /> Ctrl + Alt + A<br /> <br /> Cmd + Option + A<br /> <br /> Insert Table<br /> <br /> Ctrl + Alt + T<br /> <br /> Cmd + Option + T<br /> <br /> Italic<br /> <br /> Ctrl + I<br /> <br /> Cmd + I<br /> <br /> Move to end of code<br /> <br /> Ctrl + End<br /> <br /> Cmd + End<br /> <br /> Cut Exit/Quit<br /> <br /> 500<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> ACTION<br /> <br /> WINDOWS SHORTCUT<br /> <br /> MACINTOSH SHORTCUT<br /> <br /> Move to the next cell<br /> <br /> Tab<br /> <br /> Tab<br /> <br /> New document<br /> <br /> Ctrl + N<br /> <br /> Cmd + N<br /> <br /> Open an HTML file<br /> <br /> Ctrl + O<br /> <br /> Cmd + O<br /> <br /> Open/close CSS Styles panel Shift + F11<br /> <br /> Shift + F11<br /> <br /> Open/close Files panel<br /> <br /> F8<br /> <br /> F8<br /> <br /> Open/close Frames panel<br /> <br /> Shift + F2<br /> <br /> Shift + F2<br /> <br /> Open/close Insert toolbar<br /> <br /> Ctrl + F2<br /> <br /> Cmd + F2<br /> <br /> Open/close Layers panel<br /> <br /> F2<br /> <br /> F2<br /> <br /> Open/close Properties inspector<br /> <br /> Ctrl + F3<br /> <br /> Cmd + F3<br /> <br /> Open/close Results panel<br /> <br /> F7<br /> <br /> F7<br /> <br /> Page properties<br /> <br /> Ctrl + J<br /> <br /> Cmd + J<br /> <br /> Paste<br /> <br /> Ctrl + V or Shift + Insert<br /> <br /> Cmd + V or Shift + Insert<br /> <br /> Preview in primary browser<br /> <br /> F12<br /> <br /> F12<br /> <br /> Put selected files or folders to remote site<br /> <br /> Ctrl + Shift + U<br /> <br /> Cmd + Shift + U<br /> <br /> Redo<br /> <br /> Ctrl + Y<br /> <br /> Cmd + Y<br /> <br /> Reference<br /> <br /> Shift + F1<br /> <br /> Shift + F1<br /> <br /> Replace<br /> <br /> Ctrl + H<br /> <br /> Cmd + H<br /> <br /> Save<br /> <br /> Ctrl + S<br /> <br /> Cmd + S<br /> <br /> Save as<br /> <br /> Ctrl + Shift + S<br /> <br /> Cmd + Shift + S<br /> <br /> Select All<br /> <br /> Ctrl + A<br /> <br /> Cmd + A<br /> <br /> Show/Hide panels<br /> <br /> F4<br /> <br /> F4<br /> <br /> Show Rulers<br /> <br /> Ctrl + Alt + R<br /> <br /> Cmd + Option + R<br /> <br /> Switch between Design and Code views<br /> <br /> Ctrl + `<br /> <br /> Cmd + `<br /> <br /> Switch to Design view<br /> <br /> Ctrl + `<br /> <br /> Option + `<br /> <br /> Undo<br /> <br /> Ctrl + Z<br /> <br /> Cmd + Z or Option + Backspace<br /> <br /> Using Dreamweaver Help Topics<br /> <br /> F1<br /> <br /> F1<br /> <br /> View site files<br /> <br /> F8<br /> <br /> F8<br /> <br /> View site map<br /> <br /> Alt + F8<br /> <br /> Option + F8<br /> <br /> Appendix A Dreamweaver Reference Guide<br /> <br /> 501<br /> <br /> HTML Reference Guide The tables in this appendix contain common HTML tags (as used in Chapter 4) and advanced HTML tags (as used in Chapters 16 and 17).<br /> <br /> How to Use the Tables ◆ Attributes associated with a tag are listed under the tag. ◆ “Italic text” that appears between quotes represents values such as numbers and colors that are selected by the programmer. ◆ “Non-italic text” that appears between quotes indicates specific values that the programmer cannot change. Common HTML Tags and Attributes<br /> <br /> TAGS AND ATTRIBUTES <A></A><br /> <br /> DESCRIPTION Tag set that marks the anchor, or clickable, portion of a hyperlink. Anchor content is specified between the anchor tags and can include text or an image.<br /> <br /> href=“URL or file name”<br /> <br /> Attribute that specifies the URL or file being linked to. Can also be used to create links to audio and video files.<br /> <br /> target=“name of frame”<br /> <br /> Attribute that tells the browser to load the target Web page into a specified frame (see advanced HTML table).<br /> <br /> <BLOCKQUOTE> </BLOCKQUOTE><br /> <br /> Tag set that offsets a paragraph from the regular body text, usually by indenting the paragraph’s left and right margins. Useful when formatting quotes or citations.<br /> <br /> <BODY></BODY><br /> <br /> Tag set that marks the start and end of the Web page’s displayable content.<br /> <br /> bgcolor=“selected color”<br /> <br /> Attribute that specifies a page’s background color.<br /> <br /> text=“selected color”<br /> <br /> Attribute that specifies the text color for an entire Web page.<br /> <br /> <BR><br /> <br /> Empty tag that inserts a line break.<br /> <br /> &lt;EM></EM><br /> <br /> Tag set used to display text between tags in italics.<br /> <br /> <FONT></FONT><br /> <br /> Tag set that lets you specify the enclosed text’s characteristics.<br /> <br /> 502<br /> <br /> color=“selected color”<br /> <br /> Attribute that defines the font color used.<br /> <br /> face=“selected font type”<br /> <br /> Attribute that defines the font type (e.g., Arial) used.<br /> <br /> size=“selected font size”<br /> <br /> Attribute that defines the font size used. Possible numbers range from 1 to 7, where 1 is the smallest font size.<br /> <br /> Appendix B HTML Reference Guide<br /> <br /> Common HTML Tags and Attributes (cont.)<br /> <br /> TAGS AND ATTRIBUTES <H1></H1> <H2></H2> <H3></H3> <H4></H4> <H5></H5> <H6></H6> align=“selected alignment”<br /> <br /> DESCRIPTION Specifies heading level. 1 (<H1>) is the largest heading and 6 (<H6>) is the smallest heading.<br /> <br /> Attribute used to define a heading’s alignment. Alignment values include: left, right, or center.<br /> <br /> <HEAD></HEAD><br /> <br /> Tag set that defines the header area of an HTML document. Header information is not displayed on the Web page.<br /> <br /> <HR><br /> <br /> Empty tag that inserts a horizontal line.<br /> <br /> <HTML></HTML><br /> <br /> Tag set that marks the start and end of an HTML document.<br /> <br /> <IMG><br /> <br /> Empty tag that displays an image on a Web page.<br /> <br /> src=“image file name”<br /> <br /> Attribute that specifies the image’s source location. This attribute must be included in all image tags.<br /> <br /> alt=“alternative text”<br /> <br /> Attribute that gives the browser an alternative text message to display in place of a missing image. This attribute should be included in all image tags to make a site accessible.<br /> <br /> align=“selected alignment”<br /> <br /> Attribute used to wrap text around an image or to align an image on the page.<br /> <br /> border=“selected number”<br /> <br /> Attribute that specifies the pixel size of an image’s border.<br /> <br /> width=“selected width”<br /> <br /> Attribute that specifies an image’s width in pixels.<br /> <br /> height=“selected height”<br /> <br /> Attribute that specifies an image’s height in pixels.<br /> <br /> <LI></LI><br /> <br /> Tag set that identifies a list item within an unordered (bulleted) or an ordered (numbered) list.<br /> <br /> <OL></OL><br /> <br /> Tag set used to specify an ordered, or numbered, list.<br /> <br /> <P></P><br /> <br /> Tag set that indicates the start and end of a paragraph.<br /> <br /> align=“selected alignment”<br /> <br /> Attribute used to define a paragraph’s alignment. Alignment values include: left, right, or center.<br /> <br /> &lt;STRONG></STRONG><br /> <br /> Tag set used to display text between tags in boldface.<br /> <br /> &lt;TITLE></TITLE><br /> <br /> Tag set that defines the Web page’s title, which is displayed in the Web browser’s title bar.<br /> <br /> <UL></UL><br /> <br /> Tag set used to specify an unordered, or bulleted, list.<br /> <br /> type=“selected bullet type”<br /> <br /> Attribute used to specify the type of bullet used to display each list item. Types include disc, square, and circle.<br /> <br /> Appendix B HTML Reference Guide<br /> <br /> 503<br /> <br /> Advanced HTML Tags and Attributes<br /> <br /> TABLE TAGS AND ATTRIBUTES <TABLE></TABLE><br /> <br /> DESCRIPTION Tag set that marks the beginning and end of the table area.<br /> <br /> align=“selected alignment”<br /> <br /> Attribute that defines the horizontal alignment of the entire table. Alignments include: left, right, or center.<br /> <br /> border=“selected width”<br /> <br /> Attribute that creates a table border. The higher the border width number, the thicker the border.<br /> <br /> bordercolor= “selected color”<br /> <br /> Attribute that specifies the table border’s color.<br /> <br /> cellpadding= “selected number”<br /> <br /> Attribute that adjusts the space between a cell’s border and the cell’s content.<br /> <br /> cellspacing= “selected number”<br /> <br /> Attribute that adjusts the space between the outer border and a cell’s border.<br /> <br /> width=“selected number”<br /> <br /> Attribute that specifies a table’s width. Number can be in pixels or a percentage of the document’s width.<br /> <br /> <TD></TD><br /> <br /> Tag set that marks the start and end of a table column.<br /> <br /> colspan= “selected number”<br /> <br /> Attribute used to merge cells horizontally. The number indicates the number of columns to be merged.<br /> <br /> rowspan= “selected number”<br /> <br /> Attribute used to merge cells vertically. The number indicates the number of rows to be merged.<br /> <br /> align=“selected alignment”<br /> <br /> Attribute that defines how the contents of a particular table cell will align. Alignments include: left, right, or center.<br /> <br /> <TH></TH><br /> <br /> Tag set that defines a table header.<br /> <br /> <TR></TR><br /> <br /> Tag set that marks the start and end of a table row.<br /> <br /> align=“selected alignment”<br /> <br /> Attribute that aligns the contents of all the cells in a selected row. Alignments include: left, center, and right.<br /> <br /> FRAME TAGS AND ATTRIBUTES <FRAME><br /> <br /> Empty tag that defines each frame on a container page.<br /> <br /> noresize<br /> <br /> Attribute used to prevent users from resizing the frame.<br /> <br /> src=“name of document”<br /> <br /> Attribute that specifies file name that will display in the frame.<br /> <br /> name=“name of frame”<br /> <br /> Attribute on the container page that works with the target attribute to tell the browser which frame to open a page in.<br /> <br /> <FRAMESET> </FRAMESET><br /> <br /> 504<br /> <br /> DESCRIPTION<br /> <br /> Tag set that defines the container page.<br /> <br /> cols=“selected sizes”<br /> <br /> Attribute that defines a frame page organized in columns. Number specifies the width of each column in pixels or as percentages. An asterisk (*) can be used to represent the remaining space on screen (e.g., cols=“45, *”).<br /> <br /> rows=“selected number”<br /> <br /> Attribute that defines a frame page organized in rows. Number specifies the height of each row in the page.<br /> <br /> Appendix B HTML Reference Guide<br /> <br /> Advanced HTML Tags and Attributes (cont.)<br /> <br /> FRAME TAGS AND ATTRIBUTES <NOFRAMES>

FORM TAGS AND ATTRIBUTES

DESCRIPTION Tag set that establishes an alternative layout for browsers incapable of supporting frames.

DESCRIPTION

Tag set that defines start and end of form.



Empty tag that defines a form element.

name=“selected name”

Attribute that defines the name of the form element.

type=“checkbox”

Attribute that defines a check box.

type=“radio”

Attribute that defines a radio button.

type=“text”

Attribute that defines a text box.

type=“submit”

Attribute that defines a Submit button.

type=“reset”

Attribute that defines a Reset button.

size=“number”

Attribute used to define the size of a text field.

value=“selected number” <SELECT> name=“selected name”

Tag set that creates individual options in a form menu. Must be placed within the <SELECT> tag set. Attribute that specifies the initial value of a menu option. Tag set that defines a pull-down menu. Attribute that defines the menu’s name. Tag set that defines a text area.

cols=“selected number”

Attribute that defines a text area’s width.

name=“selected name”

Attribute that defines the text area’s name.

rows=“selected number”

Attribute that defines a text area’s height.

SCRIPT TAGS AND ATTRIBUTES <APPLET>

DESCRIPTION Tags that tell browsers that cannot read JavaScript to skip the code. Empty tag that inserts an applet into an HTML document.

height=“selected number”

Attribute used to define the applet’s height.

src=“name of program”

Attribute used to define location of applet.

width=“selected number”

Attribute used to define the applet’s width.

<SCRIPT>

Tag set that inserts a script into an HTML document.

Appendix B HTML Reference Guide

505

Web-Safe Color Reference Guide Using Colors on the Web As discussed in Chapter 7, not every monitor displays color in the same way. To avoid complications, you should select colors from the 216-color Web-safe color palette when formatting text, choosing backgrounds, and creating basic graphics for your site. Using this limited color palette (shown on the next page) helps ensure that colors will display properly no matter what computer system, monitor settings, or Web browser people use to view your pages.

The 16 Named Colors You can also use the World Wide Web Consortium’s 16 named colors to maintain color consistency across various platforms, monitors, and Web browsers. These 16 colors can be used by name in an HTML tag in place of a hexadecimal number. For example, both the tag and the tag can be used to define a green font color. The 16 named colors and their corresponding hexadecimal values are shown in the table below. 16 Named Colors Color Name

506

Hexadecimal Value

Aqua

#00FFFF

Black

#000000

Blue

#0000FF

Fuchsia

#FF00FF

Gray

#808080

Green

#008000

Lime

#00FF00

Maroon

#800000

Navy

#000080

Olive

#808000

Purple

#800080

Red

#FF0000

Silver

#C0C0C0

Teal

#008080

White

#FFFFFF

Yellow

#FFFF00

Appendix C Web-Safe Color Reference Guide

Example

The Web-Safe Color Palette Colors in the chart are notated in both their hexadecimal values for use in Web design programs and their RGB (red, green, blue) values for use in graphics programs. ◆ The first number/letter combination shown represents the color’s hexadecimal value. You can use hexadecimal values to select colors when creating HTML documents or when using Dreamweaver. ◆ The second set of numbers shown represents the color’s RGB value. Each of these numbers correlates to an intensity value of red, green, and blue as displayed on a monitor. For example, an orange color would have the RGB color designation of: red 255, green 102, and blue 51. FFFFFF R=255 G=255 B=255 FFCCFF R=255 G=204 B=255 FF99FF R=255 G=153 B=255 FF66FF R=255 G=102 B=255 FF33FF R=255 G=51 B=255 FF00FF R=255 G=0 B=255 CCFFFF R=204 G=255 B=255 CCCCFF R=204 G=204 B=255 CC99FF R=204 G=153 B=255 CC66FF R=204 G=102 B=255 CC33FF R=204 G=51 B=255 CC00FF R=204 G=0 B=255 99FFFF R=153 G=255 B=255 99CCFF R=153 G=204 B=255 9999FF R=153 G=153 B=255 9966FF R=153 G=102 B=255 9933FF R=153 G=51 B=255 9900FF R=153 G=0 B=255

FFFFCC R=255 G=255 B=204 FFCCCC R=255 G=204 B=204 FF99CC R=255 G=153 B=204 FF66CC R=255 G=102 B=204 FF33CC R=255 G=51 B=204 FF00CC R=255 G=0 B=204 CCFFCC R=204 G=255 B=204 CCCCCC R=204 G=204 B=204 CC99CC R=204 G=153 B=204 CC66CC R=204 G=102 B=204 CC33CC R=204 G=51 B=204 CC00CC R=204 G=0 B=204 99FFCC R=153 G=255 B=204 99CCCC R=153 G=204 B=204 9999CC R=153 G=153 B=204 9966CC R=153 G=102 B=204 9933CC R=153 G=51 B=204 9900CC R=153 G=0 B=204

FFFF99 R=255 G=255 B=153 FFCC99 R=255 G=204 B=153 FF9999 R=255 G=153 B=153 FF6699 R=255 G=102 B=153 FF3399 R=255 G=51 B=153 FF0099 R=255 G=0 B=153 CCFF99 R=204 G=255 B=153 CCCC99 R=204 G=204 B=153 CC9999 R=204 G=153 B=153 CC6699 R=204 G=102 B=153 CC3399 R=204 G=51 B=153 CC0099 R=204 G=0 B=153 99FF99 R=153 G=255 B=153 99CC99 R=153 G=204 B=153 999999 R=153 G=153 B=153 996699 R=153 G=102 B=153 993399 R=153 G=51 B=153 990099 R=153 G=0 B=153

FFFF66 R=255 G=255 B=102 FFCC66 R=255 G=204 B=102 FF9966 R=255 G=153 B=102 FF6666 R=255 G=102 B=102 FF3366 R=255 G=51 B=102 FF0066 R=255 G=0 B=102 CCFF66 R=204 G=255 B=102 CCCC66 R=204 G=204 B=102 CC9966 R=204 G=153 B=102 CC6666 R=204 G=102 B=102 CC3366 R=204 G=51 B=102 CC0066 R=204 G=0 B=102 99FF66 R=153 G=255 B=102 99CC66 R=153 G=204 B=102 999966 R=153 G=153 B=102 996666 R=153 G=102 B=102 993366 R=153 G=51 B=102 990066 R=153 G=0 B=102

FFFF33 R=255 G=255 B=51 FFCC33 R=255 G=204 B=51 FF9933 R=255 G=153 B=51 FF6633 R=255 G=102 B=51 FF3333 R=255 G=51 B=51 FF0033 R=255 G=0 B=51 CCFF33 R=204 G=255 B=51 CCCC33 R=204 G=204 B=51 CC9933 R=204 G=153 B=51 CC6633 R=204 G=102 B=51 CC3333 R=204 G=51 B=51 CC0033 R=204 G=0 B=51 99FF33 R=153 G=255 B=51 99CC33 R=153 G=204 B=51 999933 R=153 G=153 B=51 996633 R=153 G=102 B=51 993333 R=153 G=51 B=51 990033 R=153 G=0 B=51

FFFF00 R=255 G=255 B=0 FFCC00 R=255 G=204 B=0 FF9900 R=255 G=153 B=0 FF6600 R=255 G=102 B=0 FF3300 R=255 G=51 B=0 FF0000 R=255 G=0 B=0 CCFF00 R=204 G=255 B=0 CCCC00 R=204 G=204 B=0 CC9900 R=204 G=153 B=0 CC6600 R=204 G=102 B=0 CC3300 R=204 G=51 B=0 CC0000 R=204 G=0 B=0 99FF00 R=153 G=255 B=0 99CC00 R=153 G=204 B=0 999900 R=153 G=153 B=0 996600 R=153 G=102 B=0 993300 R=153 G=51 B=0 990000 R=153 G=0 B=0

66FFFF R=102 G=255 B=255 66CCFF R=102 G=204 B=255 6699FF R=102 G=153 B=255 6666FF R=102 G=102 B=255 6633FF R=102 G=51 B=255 6600FF R=102 G=0 B=255 33FFFF R=51 G=255 B=255 33CCFF R=51 G=204 B=255 3399FF R=51 G=153 B=255 3366FF R=51 G=102 B=255 3333FF R=51 G=51 B=255 3300FF R=51 G=0 B=255 00FFFF R=0 G=255 B=255 00CCFF R=0 G=204 B=255 0099FF R=0 G=153 B=255 0066FF R=0 G=102 B=255 0033FF R=0 G=51 B=255 0000FF R=0 G=0 B=255

66FFCC R=102 G=255 B=204 66CCCC R=102 G=204 B=204 6699CC R=102 G=153 B=204 6666CC R=102 G=102 B=204 6633CC R=102 G=51 B=204 6600CC R=102 G=0 B=204 33FFCC R=51 G=255 B=204 33CCCC R=51 G=204 B=204 3399CC R=51 G=153 B=204 3366CC R=51 G=102 B=204 3333CC R=51 G=51 B=204 3300CC R=51 G=0 B=204 00FFCC R=0 G=255 B=204 00CCCC R=0 G=204 B=204 0099CC R=0 G=153 B=204 0066CC R=0 G=102 B=204 0033CC R=0 G=51 B=204 0000CC R=0 G=0 B=204

66FF99 R=102 G=255 B=153 66CC99 R=102 G=204 B=153 669999 R=102 G=153 B=153 666699 R=102 G=102 B=153 663399 R=102 G=51 B=153 660099 R=102 G=0 B=153 33FF99 R=51 G=255 B=153 33CC99 R=51 G=204 B=153 339999 R=51 G=153 B=153 336699 R=51 G=102 B=153 333399 R=51 G=51 B=153 330099 R=51 G=0 B=153 00FF99 R=0 G=255 B=153 00CC99 R=0 G=204 B=153 009999 R=0 G=153 B=153 006699 R=0 G=102 B=153 003399 R=0 G=51 B=153 000099 R=0 G=0 B=153

66FF66 R=102 G=255 B=102 66CC66 R=102 G=204 B=102 669966 R=102 G=153 B=102 666666 R=102 G=102 B=102 663366 R=102 G=51 B=102 660066 R=102 G=0 B=102 33FF66 R=51 G=255 B=102 33CC66 R=51 G=204 B=102 339966 R=51 G=153 B=102 336666 R=51 G=102 B=102 333366 R=51 G=51 B=102 330066 R=51 G=0 B=102 00FF66 R=0 G=255 B=102 00CC66 R=0 G=204 B=102 009966 R=0 G=153 B=102 006666 R=0 G=102 B=102 003366 R=0 G=51 B=102 000066 R=0 G=0 B=102

66FF33 R=102 G=255 B=51 66CC33 R=102 G=204 B=51 669933 R=102 G=153 B=51 666633 R=102 G=102 B=51 663333 R=102 G=51 B=51 660033 R=102 G=0 B=51 33FF33 R=51 G=255 B=51 33CC33 R=51 G=204 B=51 339933 R=51 G=153 B=51 336633 R=51 G=102 B=51 333333 R=51 G=51 B=51 330033 R=51 G=0 B=51 00FF33 R=0 G=255 B=51 00CC33 R=0 G=204 B=51 009933 R=0 G=153 B=51 006633 R=0 G=102 B=51 003333 R=0 G=51 B=51 000033 R=0 G=0 B=51

66FF00 R=102 G=255 B=0 66FF00 R=102 G=204 B=0 669900 R=102 G=153 B=0 666600 R=102 G=102 B=0 663300 R=102 G=51 B=0 660000 R=102 G=0 B=0 33FF00 R=51 G=255 B=0 33CC00 R=51 G=204 B=0 339900 R=51 G=153 B=0 336600 R=51 G=102 B=0 333300 R=51 G=51 B=0 330000 R=51 G=0 B=0 00FF00 R=0 G=255 B=0 00CC00 R=0 G=204 B=0 009900 R=0 G=153 B=0 006600 R=0 G=102 B=0 003300 R=0 G=51 B=0 000000 R=0 G=0 B=0

These colors may appear differently on your monitor than they do here in print.

Appendix C Web-Safe Color Reference Guide

507

Web Design Rubric A rubric is a tool that you can use to evaluate Web pages and Web sites. The rubric in this appendix lists criteria that you can use to assess various aspects of Web site design. You can use the rubric to evaluate existing sites, or to evaluate your own sites. As you create a site, ask yourself the questions listed in the rubric. Then determine if your site rates as excellent, good, or poor. Revise your site as needed to improve its rating.

Web Site Evaluation Rubric CRITERIA

EXCELLENT (3)

GOOD (2)

POOR (1)

Information Design Is the site’s purpose clearly stated?

The site’s purpose is clearly stated.

The site’s purpose is understood but not strongly stated.

The site’s purpose is unclear.

Is all content current, accurate, and properly cited?

All content is current, accurate, and properly cited.

Some content is current, accurate, and properly cited.

None of the content is current, accurate, and properly cited.

Is the text logically organized and presented in short sections?

Text is presented in short sections and is logically organized.

Some text is presented in short sections and is logically organized.

Text is presented in long sections and its organization is unclear.

Has all the content been proofread and spell checked?

All content is proofread and spell checked.

There are minor problems with grammar and spelling.

Problems with grammar and spelling are strongly noticeable.

Does the site’s content, formatting, and color scheme support its purpose?

The site’s content, formatting, and color scheme supports its purpose.

Some of the site’s content, formatting, and color scheme supports its purpose.

None of the site’s content, formatting, and color scheme supports its purpose.

Is the site’s color scheme, layout, and formatting consistent?

The site’s color scheme, layout, and formatting is consistent.

The site’s color scheme, layout, and formatting is inconsistent in some pages.

The site’s color scheme, layout, and formatting is inconsistent in every page.

Does the page contain sufficient white space?

The page contains sufficient white space.

The page contains some white space.

The page contains insufficient white space.

Is text readable against the background?

Text is readable against the background.

Text is difficult to read against the background.

Text is unreadable against the background.

Is formatting used to emphasize important text?

Formatting is used to emphasize important text.

Formatting is sometimes used to emphasize important text.

Formatting is not used to emphasize important text.

Is important information displayed in the safe area?

Important information is displayed in the safe area.

Some of the important information is displayed in the safe area.

None of the important information is displayed in the safe area.

Presentation Design

508

Appendix D Web Design Rubric

CRITERIA

EXCELLENT (3)

GOOD (2)

POOR (1)

Interaction Design Do all internal and external hyperlinks work properly?

All internal and external hyperlinks work properly.

Not all internal and external hyperlinks work.

None of the internal and external hyperlinks work.

Can users move easily between pages?

Users can move easily between all pages.

Users can move easily between some pages.

Users cannot move easily between pages.

Can users locate specific information quickly?

Users can locate specific information quickly.

Users can locate specific information with some searching.

Users cannot locate specific information.

Can users easily return to the Web site’s home page?

Users can easily return to the Web site’s home page.

Users can easily return to the Web site’s home page from some pages.

Users cannot easily return to the Web site’s home page from any page.

Multimedia and Interactivity Does every element enhance the site and promote usability (i.e., buttons change colors to let users know when something is clicked)?

All elements enhance the site and promote usability.

Some elements enhance the site and promote usability.

None of the elements enhance the site and promote usability.

Do users clearly know how to use all interactive elements?

Users clearly know how to use all interactive elements.

Users know how to use most interactive elements.

Users do not know how to use any interactive elements.

Are all form elements and links clearly labeled?

All form elements and links are clearly labeled.

Some form elements and links are clearly labeled.

None of the form elements or links are clearly labeled.

Does every multimedia and interactive element work properly in a variety of browsers?

All multimedia and interactive elements work properly in a variety of browsers.

Some multimedia and interactive elements work properly in a variety of browsers.

None of the multimedia and interactive elements work properly in a variety of browsers.

Does the site display properly in a variety of different browsers at different resolutions?

Site displays properly in a variety of different browsers at different resolutions.

Site displays properly in some different browsers at different resolutions.

Site does not display properly in different browsers at different resolutions.

Are both graphic and text links included?

Both graphic and text links are included.

Some text links are included.

No text links are included.

Does a frames site offer alternatives to help users whose browsers do not support frames?

Frames site offers the option to help users whose browsers do not support frames.<br /> <br /> Frames site offers some alternative to help users whose browsers do not support frames.<br /> <br /> Frames site does not offer any alternative to help users whose browsers do not support frames.<br /> <br /> Does every frame in a frames-based site have a logical title?<br /> <br /> All frames in a frames-based site have a logical title.<br /> <br /> Some frames in a framesbased site have a logical title.<br /> <br /> None of the frames in a frames-based site have a logical title.<br /> <br /> Is alternative text provided for all non-text items?<br /> <br /> Alternative text is provided for all non-text items.<br /> <br /> Alternative text is provided for some non-text items.<br /> <br /> Alternative text is not provided for any non-text items.<br /> <br /> Does every page download quickly for the target audience?<br /> <br /> All pages download quickly for the target audience.<br /> <br /> Some pages download quickly for the target audience.<br /> <br /> None of the pages download quickly for the target audience.<br /> <br /> Usability and Accessibility<br /> <br /> Appendix D Web Design Rubric<br /> <br /> 509<br /> <br /> A absolute link A type of link that contains the complete URL or path of the file being linked to. (p. 112) Acceptable Use Policy (AUP) See Internet Use Agreement. (p. 84) access control A security measure in which a site’s availability is restricted to a specific set of authorized users. (p. 433) accessibility Hardware and software options that allow differently abled individuals to access and use Web pages. (p. 353) accessibility option A feature that allows differently abled individuals to access and use Web pages. (p. 73) accessibility standards A series of accessibility features that make it easier for users to understand, scan, and respond to elements in a Web site. (p. 353)<br /> <br /> applications See application software. (p. 41) archiving The process of saving and storing old Web pages and their components. (p. 432) aspect ratio The relationship between an image’s height and width. (p. 231) attribute An HTML instruction that is included in an HTML tag to specify a characteristic of a Web page element. (p. 104) audio Live, streamed, or recorded sound; often used on Web pages to attract visitors’ interest and to impart information. (pp. 12, 252)<br /> <br /> B backup A copy of a specific set of data, usually stored in a different place such as a tape, CD-ROM, or another hard drive. (p. 426) banner ad An advertisement that, when clicked, takes the visitor to the sponsor’s home page. (p. 283)<br /> <br /> active button A clicked button that is in the process of doing something such as transferring the user to another Web page. (p. 177)<br /> <br /> bitmap (BMP) A graphic file format that supports millions of colors and tends to download slowly. (p. 225)<br /> <br /> alignment The position of text on a page, such as left, right, or center. (p. 204)<br /> <br /> blog A public journal in which one or more individuals share their thoughts on a variety of subjects. (p. 376)<br /> <br /> alternative text Text used in place or in addition to audio, video, and graphic Web elements to assist differently abled individuals. (p. 354) analog video recorder A device that creates analog video. This video must be translated into a digital format before a computer can use it. (p. 261) anchor tag An HTML tag used to create hyperlinks. The tag identifies what is clicked on and where it links to. (p. 110) animated GIF A sequence of GIF images that are all stored in a single file along with an image transition delay value that controls the amount of time each image will stay on the screen. (p. 477)<br /> <br /> Boolean search A type of search that combines keywords in specific ways to locate specific pages. (p. 76) border A visual break on the page that is used to add visual interest and to separate elements. (p. 120) budget The total financial resources available for a Web site’s development. (p. 326) bulleted list See unordered list. (p. 106) bulletin board An online area where users can exchange messages. (p. 377)<br /> <br /> animation The movement of text and graphics; a common feature on the Web. (pp. 12, 253)<br /> <br /> business-to-business (B2B) e-commerce Electronic exchanges in which both parties are businesses. (p. 323)<br /> <br /> application software Computer programs that allow users to perform a specific task on the computer; also referred to as applications. (p. 41)<br /> <br /> business-to-consumer (B2C) e-commerce Electronic exchanges between businesses and individual consumers. (p. 323)<br /> <br /> 510<br /> <br /> Glossary<br /> <br /> C cascading style sheet (CSS) A style sheet that consists of code that defines formatting and layout settings for HTML tags in a single location. (p. 338) case sensitive Distinguishing between file names that contain uppercase and lowercase letters and those that contain only lowercase letters. (p. 399) cell Each individual square within a table; the intersection of a column and a row. (p. 175) cell padding The space between a table cell’s border and its content. (p. 451) cell spacing The space between the outer border of a table and the cell border. (p. 451) check box A form field option that allows visitors to choose as many items from a list as they desire. (p. 344) class selector A selector that applies the same attribute to any HTML element that references it. Can be used multiple times in an HTML document. (p. 463) client In a network, the individual computers that are part of that network. (p. 45) In a Web site development team, the person or organization that contracts and pays for the work. (p. 314) client liaison representative The project team member who maintains contact with the client throughout the Web site development process. (p. 314) client-side script A script that is executed by the user’s Web browser. (p. 483) closing tag See ending tag. (p. 98) codec Compression and decompression scheme used with streaming media; the Web server breaks the transmission into pieces allowing the media to display more quickly on the user’s screen. (p. 253) color palette A menu of colors available in the Dreamweaver program. (p. 116) color scheme A set of selected colors used consistently for a Web site’s interface elements, such as title graphics, navigation buttons, and background. (p. 198) column Cells in a table that are arranged vertically. (p. 175)<br /> <br /> commercial software Software that is developed and distributed with the intention of making a profit. (p. 85) Common Gateway Interface (CGI) A type of script that provides a link, or interface, between an external application and a Web server. This link allows the Web server to pass a user’s request to an application program and then return information to the user. (p. 279) conditional statement A type of code that allows a script to respond differently depending on the action taken by the user. (p. 484) consistency A similarity among parts of a whole; a rule that encourages designers to use similar design elements throughout a site. (p. 192) container page Page that defines the characteristics of each page in a frames-based site. (p. 457) content The text and graphics included on a Web page. (p. 162) content page The page that contains the main information on a frames-based site and fulfills the site’s main purpose. (p. 458) cookie A small data file that a Web site writes to a visitor’s hard drive containing personal information such as login or registration information. (p. 348) copyright A law that asserts that only the copyright’s owner has the right to sell his or her work or to allow someone else to sell it. (p. 86) cropping To remove portions of an image that you do not want to use. (p. 231) cross-platform testing The process of testing Web sites on a variety of computer hardware and software configurations to make sure that the site will function properly for different users. (p. 403)<br /> <br /> D data encryption Security measure in which sensitive information is encoded and decoded as it is transferred across the Internet. (p. 351) database A collection of information that is organized by fields and records for easy retrieval. (p. 368) database driven Dynamic page that uses a database for its source of information. (p. 368) database interface page A Web page that connects to and interacts with a database. (p. 368) Glossary<br /> <br /> 511<br /> <br /> debugging The process of locating and correcting any obvious errors in a Web site’s HTML code. (p. 113)<br /> <br /> event handler The part of the script that responds to an event and defines the action that will occur when the event takes place. (p. 484)<br /> <br /> digital camera A photographic device that saves images in a digital format so they can be easily used on the Web. (p. 229)<br /> <br /> Extensible Hypertext Markup Language (XHTML) A markup language that is designed to bridge the differences between HTML and XML. (p. 280)<br /> <br /> digital certificate A document issued by an independent certification authority that confirms a business’s credentials. (p. 352)<br /> <br /> Extensible Markup Language (XML) A markup language whose tags impose a specific structure and meaning on data without providing any information about how the data should be displayed. (p. 280)<br /> <br /> digital video recorder A device that creates digital video that a computer can use directly. (p. 261) direct server update The act of updating or revising a Web site’s files directly on the Web server where the site resides. (p. 430) directory structure A hierarchy used to organize folders and the files contained in the folders; also called folder structure. (p. 400) Document window Interface element that displays the user’s current document. (p. 22) domain name Part of a URL that identifies the entity (such as a university, individual, or business) that sponsors the Web site. (p. 72)<br /> <br /> external hyperlink A hyperlink that takes a user to a page on a different Web site. (p. 81) external style sheet A style sheet containing format and layout settings that is stored in a separate file. (p. 339) external Web hosting When a company pays another business to host its Web sites. (p. 397) extranet A type of network that can be accessed by outside or remote users who are authorized to use the network. (p. 70)<br /> <br /> F<br /> <br /> domain name extension Part of the URL that tells users what type of organization uses the address. (p. 72)<br /> <br /> fair use Allows for small portions of a copyrighted work to be used for educational purposes. (p. 86)<br /> <br /> dots per inch (dpi) A definition of resolution that defines the number of pixels created for every linear inch of an image, such as 600 dpi. (p. 229)<br /> <br /> feedback form A form that allows customers to voice their opinions, comments, and suggestions, and can help to cement a relationship between the customer and the business. (p. 342)<br /> <br /> download To transfer data from a file server to a client (user) machine. (p. 401) draw program A type of software application such as PhotoDraw that is used to create vector graphics. (p. 229)<br /> <br /> E e-commerce The electronic buying and selling of goods and services. (p. 322) empty tag An HTML tag that requires only an opening tag; also known as an orphan tag. (p. 99) ending tag The last of a pair of HTML tags; also known as a closing tag. (p. 98) event Anything that causes an effect to occur; often triggered by user action. (p. 484)<br /> <br /> 512<br /> <br /> Glossary<br /> <br /> field A form component that allows the user to enter information into the form. A form field often corresponds to a field database. (p. 292) file Contains information, such as text, graphics, video, or animation, that is stored on computer hardware. (p. 6) file management The process of creating, naming, moving, updating, and deleting files on a computer system. (p. 430) file name The name of the HTML document that makes up the Web page itself. (p. 148) file name extension The three or four characters after a period in a file name that tell the computer system what type of file it is reading. (p. 103) File Transfer Protocol (FTP) Provides a standardized method of uploading and downloading files on the Internet. (pp. 68, 401)<br /> <br /> Files panel A Dreamweaver interface element that enables users to manage and navigate the files and folders in a Web site. (p. 22) folder An item that helps the user organize files. (p. 48) folder structure See directory structure. (p. 400) font A family of letters, numbers, and other symbols that share a consistent style. (pp. 51, 202) footer The bottom portion of a Web page; usually contains date information, copyright information, contact information, and text links. (p. 179) form A structure that includes fields for collecting data from visitors to a Web site. (p. 292) format The way text characters look on a page. (p. 51) formatting Determining the font sizes, colors, styles, typefaces, and alignments to use on a page. (p. 202) frame A separate region on a Web page that contains its own HTML document. (pp. 380, 486) frameset A shell page in a frames site that contains information about the size and placement of the frames within the site. (p. 381) freeware Software that can be freely copied and used for any legal purpose. (p. 85) frequently asked questions (FAQ) A list of questions and answers to questions that visitors are likely to have about the Web site, the business, or a company’s products. (p. 373) FTP See also File Transfer Protocol. (pp. 68, 401) function In JavaScript, code that performs a specific task or action. (p. 484)<br /> <br /> G GIF (Graphic Interchange Format) A graphic file format that can save only a maximum of 256 colors. (p. 225) GIF animation A simple type of animation file in which individual GIF images are displayed one after the other. (p. 265) global access control A security measure in which groups of users are granted or denied access to computer system data; different groups of users are often given different levels of access to system data. (p. 435)<br /> <br /> graphic A drawing, chart, diagram, painting, or photograph stored in a digital format. (p. 12) graphic link A type of link in which users click an image to activate the link. (p. 111) graphical user interface (GUI) Type of interface that allows users to interact with software by selecting words, symbols, or graphics from a desktop. (p. 40) guest book A public record of comments from visitors to a Web site. (p. 377) GUI See graphical user interface. (p. 40)<br /> <br /> H hard drive mirroring Writing data to more than one hard drive at the same time; ensures reliability and keeps Web servers fully functional at all times. (p. 425) hardware The physical components of the computer. (p. 6) header column Column in a table that contains the titles for each row. (p. 452) header row Row in a table that contains the titles for each column. (p. 452) hierarchical navigation scheme Type of navigation plan in which pages are arranged in levels from top to bottom, with the topmost level being the Web site’s home page. (p. 141) hit counter A dynamic Web component that records how often a file is accessed from a Web server. Each file on a Web page counts as one hit. (p. 366) home page The main page on a Web site that contains general information about the site, such as an introduction and a list of the other available pages; generally the first page a visitor sees. (p. 7) host The name of the Web server on which a particular Web site resides. (p. 395) hotspot A graphic link to a related page or another area on the current page. (p. 237) hot-swappable hard drives System used by some Web servers that contains multiple hard drives; allows a Webmaster to replace one drive for another in case of failure of the drive. (p. 425) hover button A navigation button that changes appearance when touched by a mouse pointer. (p. 177) Glossary<br /> <br /> 513<br /> <br /> HTML See also Hypertext Markup Language. (p. 98) HTML editor See text editor. (p. 78) HTML tag Text contained between two angle brackets (< >) that tells the Web browser how to display a page’s content. (p. 98) HTTP See also Hypertext Transfer Protocol. (p. 68) hyperlink A way to link Web pages together and allow users to move from one online location to another. Link may consist of text or a graphic. (p. 13)<br /> <br /> intellectual property Creative works created and owned by individuals such as authors, software developers, and musicians. (p. 86) interaction design Part of the Web site design process in which you determine how the user is likely to navigate through the site. (p. 16) interactive button Type of button that changes to let users know that an action has taken place; also called a dynamic button. (p. 177)<br /> <br /> Hypertext Markup Language (HTML) The code used to create Web pages. (p. 98)<br /> <br /> interactivity Allows communication between the visitor and the Web page; the user can perform an action that the Web page responds to. (p. 278)<br /> <br /> Hypertext Transfer Protocol (HTTP) Used to transfer files from a Web server to a Web browser. (p. 68)<br /> <br /> interface Means by which a user interacts with a computer or a computer program. (p. 22)<br /> <br /> I id selector A selector that identifies only one element within an HTML document. Always preceded by a # sign. (p. 463) image editing program A type of software application such as Fireworks used to create raster graphics. (p. 229) image map A graphic with clickable areas called hotspots that link to another page or to another area on the same page. (p. 237) incremental backup Copies only the data that has changed since the last full backup to the backup device. (p. 426)<br /> <br /> internal style sheet A style sheet that embeds CSS information within an individual Web page. (p. 338) internal Web hosting When a company uses its own Web server to host its Web site. (p. 397) Internet Hardware, such as computers, cables, and telephone wires, that is connected to create a massive worldwide network. (p. 6) Internet service provider (ISP) A business that provides a network to customers that they use to access the Internet. (p. 67) Internet Use Agreement Used by organizations such as schools and businesses to regulate online use. Also called Acceptable Use Policy or AUP. (p. 84)<br /> <br /> information design Part of the Web site design process in which you determine the content that will appear on each page. (p. 16)<br /> <br /> InterNIC A Web site providing information about the Web name registration process; it is hosted by the Internet Corporation for Assigned Names and Numbers (ICANN), which assigns Web site names and IP addresses. (p. 399)<br /> <br /> inline graphic Created by storing a picture in an electronic format on a hard drive and inserting the graphic into a Web page. (p. 230)<br /> <br /> intranet A LAN or WAN that is designed to make it easy to share information within an organization, such as a business or a school. (p. 70)<br /> <br /> input device Tool used to enter data into a computer, such as the keyboard and mouse. (p. 38)<br /> <br /> inverted pyramid A type of narrative structure that places the most important information at the beginning of a story, where it will best catch the reader’s attention. (p. 164)<br /> <br /> inspector Dreamweaver interface element that provides information about Web page items. The Properties inspector is a commonly used type of inspector. (p. 22) instant storefront A portal site that provides easy-to-use screens that walk businesses through the process of creating their own Web sites. (p. 326)<br /> <br /> 514<br /> <br /> Glossary<br /> <br /> J Java applet A short Java code program that runs in a browser. (p. 279)<br /> <br /> JavaScript A scripting language used to enhance the capabilities of Web programming by allowing the creation of special effects such as fading backgrounds and button rollovers. (p. 279) JPEG (Joint Photographic Experts Group) A graphic file format that can support millions of colors; preferred format for saving photographs. (p. 225) jump menu A dynamic menu that allows the user to access hyperlinks from a single drop-down menu. (p. 297)<br /> <br /> K keyword An important word related to the specific topic you are trying to locate. (p. 76)<br /> <br /> L<br /> <br /> lossless compression A compression scheme in which a graphic file loses no data when it is compressed. (p. 226) lossy compression A compression scheme that removes data from a graphic file so that the file is significantly smaller and downloads more quickly in a Web browser than one saved with lossless compression. (p. 226)<br /> <br /> M Macromedia Flash A sophisticated animation formation, usually carrying a .swf extension. (p. 265) Map view Dreamweaver view used to examine a Web site’s navigation structure. (p. 143) markup language A text file that contains special sequences of characters that function as tags, such as HTML, XML, and XHTML. (p. 280)<br /> <br /> label Text that tells the user what type of information to enter into a form’s field. (p. 292)<br /> <br /> menu bar Interface element that features dropdown menus that contain related options. (p. 22)<br /> <br /> layer A container within an HTML page that can include objects such as text, images, and forms. (p. 288)<br /> <br /> meta tag A piece of HTML code that the Web author places in the page document to help search engines categorize the page; does not affect how the site is displayed. (p. 412)<br /> <br /> left-hand navigation A frames-based Web site with a link bar on the left side of the screen. (p. 457) linear navigation scheme Type of navigation plan in which every page exists at the same level; each page in the site is accessed from the one before it. (p. 142) link bar A related group of horizontally or vertically aligned links; also known as a navigation bar or table of contents. (p. 177) Link Checker report A tool that identifies broken links within a site or particular file. (p. 407) link trading An agreement between Web site publishers to display a link to each other’s sites; inexpensive way to publicize Web sites. (p. 411) local area network (LAN) Type of network that connects computers in a single location, such as a single department within a company. (p. 43) local client update The process of revising Web pages by copying the files from the Web server to a local (client) workstation, updating the files on the local workstation, and uploading the revised files to the Web server. (p. 430) logo A symbol used to represent a business or an organization. (p. 174)<br /> <br /> milestone A specific step in the Web site development process and the date for its completion. (p. 314) mission statement A brief statement that describes the purpose and audience of a Web site. (p. 136) multimedia The integration of elements such as graphics, text, audio, video, animation, and interactivity by means of computer technology. (p. 252) multimedia authoring tool Special software applications used by Web site designers and developers to create multimedia Web sites. (p. 255)<br /> <br /> N named anchor A hyperlink to a specific place in another document or to a specific place within a document. (p. 373) navigation button A button that users click to locate additional information and to navigate to other Web pages. (p. 177) navigation scheme The plan that determines how Web pages will relate to each other within a Web site. (p. 140) Glossary<br /> <br /> 515<br /> <br /> nested tag An HTML tag that is enclosed within another set of tags. (p. 99) netiquette General guidelines that have developed over the years to guide Internet interactions. (p. 85) network A system in which communication lines or wireless connections are used to connect computers together. (p. 43) newsletter A method of staying in touch with a Web site’s users, usually includes news, information, and updates about a particular topic. (p. 375)<br /> <br /> O<br /> <br /> parent-child relationship In a hierarchical navigation scheme, a page that is connected to another page; the page that is on the level above is the parent, and the page that is on the level below is the child. (p. 141) password A set of letters or numbers that a user enters to gain access to a Web site. (p. 433) peer-to-peer relationship In a hierarchical navigation scheme, two or more child pages with the same parent page. (p. 141) photo album A collection of photographs with brief descriptions. (p. 240)<br /> <br /> object In JavaScript, an element in a browser window; it can have properties that define it. (p. 483)<br /> <br /> pixel A single point in a graphic image; short for picture element. (pp. 169, 203)<br /> <br /> opening tag See starting tag. (p. 98)<br /> <br /> plug-in An application that works with a Web browser to play a particular file format, such as an audio or video file. (p. 259)<br /> <br /> operating system (OS) Program that specifies how the computer receives and processes input; acts as an interface between a user and the computer hardware. (p. 40) ordered list A type of list that contains items, usually numbered, that must appear in a particular sequence. (p. 106)<br /> <br /> Portable Network Graphics (PNG) A graphic file format that supports more colors and transparency than GIF files, and is currently becoming a more popular format. (p. 225)<br /> <br /> orphan tag See empty tag. (p. 99)<br /> <br /> presentation design Part of the Web site design process in which the user determines the physical appearance of the site’s pages. (p. 16)<br /> <br /> orphaned file A file that does not link to other files on a site. (p. 407)<br /> <br /> privacy The ethical online collection and use of visitors’ personal information. (p. 348)<br /> <br /> output device Tool that lets users examine the results of processed data, such as a monitor, printer, or speakers. (p. 38)<br /> <br /> privacy policy A written statement that outlines what information the site collects about visitors and explains how that information will be used. (p. 349)<br /> <br /> P page header Page element that contains graphics and/or text, such as a site’s logo and title graphic, and helps users identify where they are in a Web site. Also called page banners. (p. 196)<br /> <br /> project manager The project team member who oversees the work of all the team members and ensures that team members work together. (p. 314) protocol A set of rules and procedures that specify how data are formatted and transmitted between computer systems. (p. 68)<br /> <br /> page title The name that appears in the title bar when the Web page is displayed in a browser. Also called page name. (p. 148)<br /> <br /> proximity The closeness of elements on a page that can cause readers to make assumptions about how elements relate to each other. (p. 168)<br /> <br /> page view Records how many times a Web page was visited. (p. 366)<br /> <br /> publicize The process of letting the general public know that your Web site exists and telling them how to access it. (p. 410)<br /> <br /> panel Element of Dreamweaver interface that contains tools and commands that users can use to manipulate their workspace. (p. 22)<br /> <br /> 516<br /> <br /> Glossary<br /> <br /> publish To transfer files from a local computer to a remote Web server so that the Web site can be viewed over the Internet. (p. 394)<br /> <br /> pull-down menu An interactive element that looks like a text field, but operates like a set of option buttons in that users can choose only one item from a list of options; also known as a drop-down menu. (p. 479)<br /> <br /> R radio button An interactive control that allows a user to select only one option from a list of options; also known as an option button. (pp. 344, 478) random-access navigation scheme A type of navigation plan in which a site’s pages are not organized in any particular order. (p. 142) raster graphic A graphic made up of pixels; also known as a bitmap. (p. 224) record A group of related fields in a database that contain all the information gathered about a particular person or product. (p. 368) relative link A type of link that is used when linking to a local file, such as one within the same Web site. (p. 111) repetition Design rule that encourages designers to duplicate specific elements on all (or most) of a site’s pages to make the site more user-friendly. (p. 192) reports Tools that help Web developers find errors and maintain their Web sites more easily. (p. 405) resampling Changing the number of pixels in a graphic file to match the new screen area occupied by the image; this changes the size of the graphic file. (p. 232) resizing Changing the size of the image as it appears on the screen without changing the file size of the graphic. (p. 231) rollover button A button that changes appearance when the mouse pointer passes over it. (p. 283) root folder The main folder on a Web site that contains all of the site’s other files and folders. (p. 48) row Cells in a table that are arranged horizontally. (p. 175) RSS (Really Simple Syndication) A content feed that allows syndicated Web content to be published on several different Web sites. (p. 376)<br /> <br /> S safe area Amount of space available on every Web browser and system combination; generally defined as 640 x 480 pixels, the size of the smallest monitor available. (p. 169) sans serif A font that does not have special adornment at the end of letters or numbers. (p. 206) scanner A piece of hardware that converts a printed image into a digital format that can be used on a Web page. (p. 229) scope In a Web site development project, the features and content on a Web site that can be provided with the time and resources available. (p. 321) screen resolution The amount of pixels that a monitor can display; measured by width and height such as 640 x 480. (p. 169) script A short program that you can insert into HTML code using special tags; expands the capabilities of HTML to create dynamic Web pages. (p. 278) search capabilities A Web site feature that allows visitors to find specific words or phrases in the site’s content. (p. 372) search engine An application that locates information about Web pages and then stores this information in searchable databases that you can access from your browser. (p. 75) security The protection of data from unauthorized access, both on the Web server and during transmission over the Web. (p. 351) selector Part of HTML code that contains properties and corresponding values within curly braces that control the appearance of HTML elements. (p. 463) serif Font that has an extra line or curve on the ends of certain letters or numbers. (p. 206) server A powerful central computer that manages files and services for a network. (p. 45) server-side script A script that is executed on the Web server, with the output transferred to the user’s computer as a Web page. (p. 485) shareware Copyrighted software that an author allows to be freely distributed. (p. 85) site map A list of categories that organizes the content of large Web sites. (p. 371)<br /> <br /> Glossary<br /> <br /> 517<br /> <br /> software The set of instructions that tells the computer what to do. (p. 40) source code The text and HTML commands used to create the Web page. (p. 101) source control A Dreamweaver feature that protects the integrity of the Web site’s files by ensuring that only one person at a time can edit a particular file. (p. 318) spam Unsolicited e-mail messages. (p. 410) SSL (Secure Socket Layer) Data encryption method commonly used by Web site publishers because its algorithm is specifically designed to protect data transmitted across the Internet. (p. 351) starting tag The first of a pair of HTML tags; also known as an opening tag. (p. 98) status bar Interface element that provides information such as the estimated download time of the current page. (p. 22) storyboard A visual representation of a Web site and its pages. (p. 146) streaming media A downloading process that shortens the user’s wait time by breaking the transmission into small pieces. (p. 253)<br /> <br /> template A reusable pattern that helps you place information quickly and efficiently on a Web page. (p. 171) testing The process of repeatedly checking the Web page and site to make certain that elements display as designed. (p. 113) text Consists of words, letters, numbers, and other symbols. (p. 12) text area A form field that will expand to allow visitors to enter any length comment; also known as a scroll box. (pp. 342, 479) text editor An application used to enter and edit the HTML code in a Web page. (p. 78) text link A type of link in which users click text to activate the link. (pp. 111, 180) thumbnail A small image that links to a larger version of the same image; lets users decide if they want to view the larger image, which takes longer to download. (p. 240) title bar Interface element that displays information such as the name of the current document in the Document window. (p. 22) title graphic An image that appears at the top of every page on a Web site. (p. 174)<br /> <br /> subfolder A folder contained within a folder, used to further organize files. (p. 48)<br /> <br /> toolbar Interface element that allows the user to select options by clicking a button. (p. 22)<br /> <br /> subpage A page that is a child of another page. (p. 55)<br /> <br /> top navigation A frames-based Web site with a link bar at the top of the screen. (p. 459)<br /> <br /> T table An item consisting of columns and rows that is used to organize a Web page’s content. (p. 175) table of contents A Web site element that allows visitors to see the contents and organization of the site in one glance; similar to the table of contents of a book. (p. 372) target audience The main group of people that you want to visit your Web site. (p. 137) Target Browser Check A Dreamweaver feature that allows users to specify which types and versions of browsers they can check their site against. (p. 408) target market The potential customers for the product or service that you are selling; often defined by characteristics such as age, income, and interests. (p. 323) 518<br /> <br /> Glossary<br /> <br /> top-level page The highest level in a hierarchical navigation structure; usually the home page. (p. 141) tracking software Records information about Web site visitors such as what browser they used, how they navigated to the site, and what country they are from. (p. 367) trademark A name, symbol, or other feature that identifies a product with a specific owner. (p. 86) Transmission Control Protocol/Internet Protocol (TCP/IP) Basic Internet protocol that contains the specific information that allows computers to identify each other and exchange data. (p. 68) typography The style, arrangement, and appearance of text. (p. 202)<br /> <br /> U uniform resource locator (URL) A unique address that enables a browser to locate specific page files on the Web. (p. 71)<br /> <br /> Web server A powerful computer that maintains a constant connection to the Internet; stores Web pages and makes them available on the Internet. (p. 394)<br /> <br /> unique visit Records how many people visit a Web site overall. (p. 367)<br /> <br /> Web server cluster System that stores a Web site on multiple physical computers that act as a single virtual host. (p. 396)<br /> <br /> unordered list A list that contains items that can appear in any order; also known as a bulleted list. (p. 106)<br /> <br /> Web site A group of related files organized around a common topic; the files may include Web pages, graphics, audio, and video. (p. 7)<br /> <br /> upload To transfer data from a client computer (user) to a server. (p. 401)<br /> <br /> Web site development application Sophisticated application package that some Web developers use to create Web sites. (p. 78)<br /> <br /> URL See uniform resource locator. (p. 71) user authentication The process of checking the password the user enters against the one assigned to the user. (p. 433)<br /> <br /> V Validation report A tool that checks a site’s files to ensure they meet the W3C standards. (p. 406) variables Used by scripts to identify a value that will change when the script is executed. (p. 484) vector graphic A graphic composed of simple lines defined by mathematical equations. (p. 224) video Live or recorded moving images. (p. 12) video capture card A circuit board that can convert analog video to digital video. (p. 261)<br /> <br /> W Web author Person who writes the text that will appear on each Web page. (p. 18) Web browser Software application that interprets files to display Web pages on the user’s computer. (p. 7) Web designer Person who focuses on the look and feel of the Web site. (p. 18)<br /> <br /> Webmaster Person who manages and maintains Web sites. (p. 19) Web-safe colors The 216 colors that display consistently from computer to computer giving Web designers some control over their pages’ appearance. (p. 199) white space An area on a Web page without any content. (p. 168) wide area network (WAN) Network that connects computers across a wide geographical area, such as a region of the United States. (p. 43) World Wide Web Software that sends information that is stored in files along the Internet’s hardware. (p. 6) WYSIWYG Applications that allow you to create Web pages so that what you see on the screen is very similar to the appearance of the final page; stands for “what you see is what you get.” (p. 78)<br /> <br /> X XHTML See Extensible Hypertext Markup Language. (p. 280) XML See Extensible Markup Language. (p. 280)<br /> <br /> Web developer Person who uses programming skills to develop Web sites. (p. 18) Web host A business that provides Web server space to customers for a fee. (p. 395) Web hosting service Service that sells Web server space, usually for a monthly fee. (p. 80) Web page A single file within a Web site that has a unique name. (p. 7)<br /> <br /> Glossary<br /> <br /> 519<br /> <br /> A Absolute link, 112 using HTML to insert, 112 Absolute positioning, 465 Acceptable Use Policy (AUP), 84. See also Internet Use Agreement Access control, 433 global, 435 Accessibility, 73, 353 and alternative text, 354 and guidelines, 282, 354 and online content, 354 validating, in Dreamweaver, 355 Accessibility Standards, 353 Accountability, leadership and, 257 Active button, 177 Active server page (.asp), 369 Adobe Photoshop, 79, 231 Aligning text, 168 Alignment, 204 in tables, 452–453 Alternative text, accessibility and, 354 Analog video recorder, 261 Anchor, named, 373–374 Animated GIF, 477 Animation, 12, 253 adding, to a Web site, 265–268 design guidelines, 253 Animation file creating and using, 265–268 incorporating, in a Web site, 266 Antivirus program, 347 Apple QuickTime, 79, 259 Application software, 41 audio, 79 graphics, 79 text, 79 video, 79 Web page component, 79 Archiving (for Web pages), 432 ARPANET, 66 Aspect ratio, 231 Attribute, 104 adding, 104–106 alignment, 105 background, 105 font color, 105 heading, 105 HTML reference guide, 502–505 image, 109 table, 451–454<br /> <br /> 520<br /> <br /> Index<br /> <br /> Audio, 12, 252 design guidelines, 252 forms of, 12 input devices, 38 Audio file adding using HTML, 476 background sound, 260 creating and adding, to a Web site, 260–262 editing applications, 79, 255 formats, 258 playing, 79 using HTML to add, 476 AUP. See Acceptable Use Policy Automated updates, 431<br /> <br /> B B2B. See Business-to-business e-commerce B2C. See Business-to-consumer e-commerce Background color adding, in Dreamweaver, 116 adding, in HTML, 105 Backup, 426 incremental, 426 Bandwidth, 44 alternatives, 227 calculating, 396 Banner ad, 283 inserting, 284 Behaviors panel, 286 Berners-Lee, Tim, 66, 236 Blended attacks, 347 Blogs, 376 Boolean operator, 76 Boolean search, 76–77 Border, 120 Broadband connection, 44 Broken links, checking for, 407–408 Browsers. See Web browsers Budget, 326 Bulletin boards, 377 Business plan, 370 Business-to-business e-commerce, 323 Business-to-consumer e-commerce, 323, 336 Buttons view of, 496<br /> <br /> C Cable connection, 44 Careers mapping a path for, 20 Web site development, 18–19 Cascading style sheet (CSS), 282, 338, 499 modifying, in Dreamweaver, 340 page layout using, 465 use of, in HTML document, 462–466 using to modify a form element, 480 Case sensitivity, 399 and HTML, 100 and publishing Web files, 399–400 Cell(s), 175 merging, in HTML, 452 split into Dreamweaver, 200 Cell padding, 451 Cell spacing, 451 Central processing unit (CPU), 37 CGI. See Common Gateway Interface Character widths, 294 Chat room, 69 Check box, 293 adding, in Dreamweaver, 344–345 adding, in HTML, 478 Checklists, 317 Children’s Online Privacy Protection Act (COPPA), 348 Citing online sources, 88 Class selector, 463 Client in a client/server network, 45 in Web development project team, 314 Client liaison representative, 314 Client-server network, 45 Client-side script, 483–486 Clip Art, 228 Codec, 253 Collaborating as sharing ideas, 320 Color adding, in Dreamweaver, 116 choosing a color scheme, 198 selecting background, 116 Web-safe, 199, 506–507 Column, 175 Common Gateway Interface (CGI), 279, 485<br /> <br /> Communication and good managers, 257 hardware, 424 software, 425 Community, building a sense of, 375–379 Compression scheme and download times, 226–227 lossless, 226 lossy, 226 Compression/decompression scheme. See Codec Computer avoiding physical injuries, H7, 47 and the computer system, 36 hardware, 37–39 input devices, 38, 80 memory, 37 output devices, 38, 80 processing components, 37 safe use of equipment, 47 software, 40–41 storage devices, 39 system requirements, 80 Computer hardware, 37–39 Computer software, 40–41 application, 41 operating system, 40 Connectivity needs, 80 Web hosting service, 80, 394–396 Consumer privacy. See Privacy Contact information form, using Dreamweaver to create, 293–296 Container page, 457 creating, 458 Content, 162 developing, 164–165 Content page creating, 458 Cookies, 348 blocking, 428 for targeted marketing, 414 COPPA (Children’s Online Privacy Protection Act), 348 Copying files, 85 Copyright, 86 adding, to a Web site, 86–87 importance of, H3, 210 Copyrighted work, obtaining permission to use, H3 CPU (central processing unit), 37 Creating subpages, 55–56 Cropping, 231–232 Cross-platform issues, 42 Cross-platform testing, 403 CSS. See Cascading style sheet (CSS)<br /> <br /> D Data encryption, 351 and digital certificates, 352 Database, 368–369 linking to, 368 setting up connection to, 368–369 Database driven, 368 Database interface page, 368 Debugging code, 113, 486 Decision-making skills, 257 Designing a Web site information design, 16–17 interaction design, 16–17 presentation design, 16–17 Developing Web content, 152 DHTML (Dynamic Hypertext Markup Language), 279 using, in Dreamweaver, 286 Dial-up connection, 44 Digital camera, 38 Digital certificate, 352 Digital recording, 259 Digital subscriber line. See DSL connection Digital video recorder, 261 Direct server update, 430 Directory structure, 400 Disks, and distance-learning technology, 166 Distance learning, 10, 166 Domain name, 72 registering, 399 Domain name extensions, 72 Donate page, 286 Download, 401 Download time, 168 calculating, 226 and compression schemes, 226–227 low bandwidth alternatives, 227 Downloading files, 85 commercial software, 85 freeware, 85 shareware, 85 Dreamweaver, 17 adding animation to a Web page, 266 adding audio, 260 adding color in, 116 adding feedback form in, 343 adding graphics in, 120–121 adding links in, 120–121 adding meta tags in, 412–413 adding named anchors in, 373–374 adding privacy policy in, 349–350 adding Update Information, 285 adding video, 261–264 closing, 25–26<br /> <br /> Code view, 25 creating a login screen in, 434 creating a one-page Web site, 49–50 creating a table using HTML, 453 creating banner ad in, 283–284 creating form in, 293–296 creating frames in, 382–384 creating guest book in, 377–379 creating headings in, 118 creating lists in, 118–119 Design view, 25 DHTML, creating rollover buttons in, 283 and Flash button, 267 formatting text in, 116 inserting graphics into, 230 inserting page banners/headers in, 196–197 interface, 21–22, 496 introduction to, 21–26 modifying CSS in, 340 MX versus MX 2004, versions of, 496–499 versus Notepad, 116–122 opening a Web site, 23–24 results in, 405–409 saving a Web page in, 48 site reports in, 405–409 source control, 318–319 split view, 25 template, 171–182 testing a Web page in, 122 toolbars, 22 using cascading style sheets in, 338–339 using DHTML Behaviors in, 286 using different views, 25–26 using Fireworks to modify images, 231–233 using frames, 382–384 using spell check, 122 viewing home pages in, 23 DSL connection, 44 Dynamic content, 486 Dynamic effects adding, 283–291 adding, to form, 297 Dynamic Hypertext Markup Language. See DHTML Dynamic Web page, 368<br /> <br /> E E-commerce, 322–323 designing Web site for, 323–326 role of, 322 starting an e-business, 370 versus traditional shopping, 322 Index<br /> <br /> 521<br /> <br /> types of, 323 Web sites, 8, 336–341 Editors and web content, 152 E-mail, 69 advertising, 410 as distance-learning tool, 166 link to, 181–182 Error message, 486 Ethernet card, 46 Ethical Internet use, H2, 84–85 Internet use agreement, 84 of multimedia files, 254 netiquette, H5, 85 obtaining graphics, 229 protecting privacy online, H7, 85, 428 and respecting intellectual property, H3, 210 Ethics in the workgroup, 320 Evaluating Web sites, H9, 17, 508–509 Event, 484 Extensible Hypertext Markup Language (XHTML), 280 Extensible Markup Language (XML), 115, 280 External style sheets, 339, 464 using HTML to create, 464 Extranet, 70<br /> <br /> F Fair use laws, 86 FAQ (frequently asked questions), 373 Feedback form, 342–343 Field labels, 294 File, 6 animation, 265 audio, 258 organizing, in folders, 102 saving, 42 size guidelines, 253 video, 259 File format types of audio, 258 types of video, 259 File name, 148 assigning, 103, 193 relationship to page title, 148 specifying, 148–149 File name extension, 103 File Transfer Protocol. See FTP Files frames-based pages in, 380 transferring to a Web server, 401–402 and Web site management, 430 Firewall, 347 Fireworks creating photo album in, 240–242 522<br /> <br /> Index<br /> <br /> as image modifier in Dreamweaver, 231–233 toolbar in, 232 and Web Photo Album, 240–242 Flash. See Macromedia Flash Flash button, 267 Floppy disk, 39 Folder, 48 creating to organize a site, 102 organizing, 102 subfolder, 48 Folder structure. See Directory structure Font, 51, 202–209 alignment, 204 appearance, 207–208 bold, 203 color, 204, 207 consistency, 207 contrast with background, 206 italic, 203 limit number of, 207 sans serif, 206 serif, 206 size, 203, 208 standard, 208 styles, 207 substitutions, 208 system, 208 types, 202 underline, 203 Footer, 179 Form adding, to Web site, 292–298 components of, 292 creating, using Dreamweaver, 293–296 Form fields, 292–293 Format, 51 Formatting text for appearance, 207–208 for consistency, 207 in Dreamweaver, 116, 208–209 guidelines, 206–209 for readability, 206 using Style menu, 205 Formatting toolbar, 203 FPS (frames per second), 259 Frames, 380–384 creating, in Dreamweaver, 382–384 creating, in HTML, 456–461 creating links between, 460 guidelines for, 381 horizontal layout of, 459 selecting frame templates, 382 vertical layout of, 459 Frames per second (FPS), 259 Frameset, 380<br /> <br /> Frequently asked questions (FAQ), 373 FrontPage. See Microsoft FrontPage FTP (File Transfer Protocol), 68 transferring files using, 401<br /> <br /> G Gateway, 67 GIF, 225 adding, using HTML, 477 animated, 477 GIF animations, 265 Goals of Web site determining, 16, 136 immediate, 138 long-term, 138 target audience and, 138 Gopher, 68 Graphic designer(s), 152. See also Web designer Graphic file formats BMP, 225 converting, 227 GIF, 225 JPEG, 225 PNG, 225 Graphic Interchange Format. See GIF Graphic link, 111 Graphical user interface (GUI), 40, 66 Graphics, 12. See also Image adding, in Dreamweaver, 120–121 adding, to Web page, 52 cropping, 231–232 download times, 226–227 editing and formatting, 231–235 ethical use of, 229 and file compression, 226–227 inserting, 52–54 modifying, 231–235 obtaining pre-made, 228 raster, 224 resampling, 232 resizing, 231–232 types of, 224 vector, 224 Graphics application, 79 Guest book, 377 GUI. See Graphical user interface<br /> <br /> H Hackers, 347 Hard disk (hard drive), 39 hot-swappable, 425 Hard drive mirroring, 425 Hardware, 37–39 components, 67 Internet is, 6<br /> <br /> Heading, 118 creating, in Dreamweaver, 118–119 creating, in HTML, 105 Hexadecimal number, 199, 451 Hit, 366 Hit counter, 366–367 Home page, 7 Hosting company statistics, 367 Hotspot, 237 creating an image map with, 238–239 tools, 237 Hot-swappable hard drives, 425 Hover button, 177. See also Interactive button HTML (Hypertext Markup Language), 7, 98 adding animated GIFs using, 477 adding audio file using, 476 adding check boxes using, 478 adding images in, 109–110 adding interactivity using, 476–481 adding pull-down menu using, 479 adding radio buttons using, 478 adding text area using, 480 adding text boxes using, 477 and case sensitivity, 100 coding, 98–101 creating frames in, 456–461 creating lists using, 106–107 creating registration form using, 477–480 creating tables in, 450–454 entering, in text editor, 102–108 guidelines, 100–101 inserting image using, 110 inserting links using, 110–112 new Web languages versus, 115 and spacing, 100 viewing code, 101 and W3C, 100 HTML document adding attributes to, 104–106 creating, 104 and CSS, 462–464 enhancing, 109–114 parts of, 103 saving, in Notepad, 103–104 testing, 113–114 viewing, in browser, 108 HTML tag, 98 anchor, 110 attributes with, 104–106, 109 creating lists using, 106–107 empty, 99 ending tag, 98 image, 109 nested, 99<br /> <br /> starting tag, 98 tag sets, 98 HTTP (Hypertext Transfer Protocol), 68 requirements of, 71 transferring files using, 401 Hyperlink, 13 absolute, 112 adding, in Dreamweaver, 81–82, 120–121 appearance in different browsers, 73 external, 13, 81 between frames, 460 graphic, 110 internal, 13 intrapage, 13 relative, 111 text, 81–82, 110 using HTML to insert, 110–112 Hypertext Markup Language. See HTML Hypertext Transfer Protocol. See HTTP<br /> <br /> I ICANN (Internet Corporation for Assigned Names and Numbers), 399 Id selector, 463 IM (instant messaging), 69 Image. See also Graphics adding, in HTML, 109–110 cropping, 231–232 manipulating with Fireworks toolbar, 231–232 Image editing programs, 231 Image maps, 237–239 Image tag, 109 Images, 498 Implementing a Web site, 17 Information design, 16–17 Information sharing, 375 Inline CSS, 340 Inline graphic, 230 Input devices, 38 audio, 38 graphic, 38 used by Web developers, 80 video, 38 Insert toolbar, 22 Instant messaging (IM), 69 Instant storefront, 326 Instructional designers, 152 Integrated Services Digital Network (ISDN), 44 Intellectual property, 86, 210 Intelligent homes, 455 Interaction design, 16–17<br /> <br /> Interactive button, 177 Interactivity, 278 design guidelines, 281 and scripting, 278 using scripting to add, 483–486 Interface, 21–22 Internal style sheets, 338, 463 Internet, 6, 66–70 citing digital sources, H2, 88 communication on, 69 and copyright protection, H3 distance learning and, 166 effects on society, 84 entertainment on, 69 ethical issues related to, 84–85 future of, 236 hardware components, 67 how it works, 67–68 how we use the Web, 404 online resources, reliability of, 87 origins of, 66 protecting your privacy online, H7, 10, 85, 348–349 software components, 67 using online resources, H6 using search tools for, H8, 76–77 verify online information, 1, 83 Internet browser, 115 Internet connection broadband, 44 dial-up, 44 types of, 44 wireless, 44 Internet Corporation for Assigned Names and Numbers (ICANN), 399 Internet protocol, 68 Internet protocol address (IP address), 68 Internet relay chat (IRC), 69 Internet service provider (ISP), 67 Internet Use Agreement, 84. See also Acceptable Use Policy (AUP) InterNIC, 399 Intranet, 70 Inverted pyramid, 164 IP address. See Internet protocol address IRC (Internet relay chat), 69 ISDN (Integrated Services Digital Network), 44 ISP (Internet service provider), 67<br /> <br /> J Java applet, 279 client-side script, 485 JavaScript, 115 browser support of, 279 client-side script, 483 Index<br /> <br /> 523<br /> <br /> conditional statements, 484 creating rollover button using, 484–485 event, 484 event handler, 484 function, 484 and integrated cell phones, 115 object, 483 and PDAs, 115 and portable computer systems, 115 variable, 484 JPEG (Joint Photographic Experts Group), 225 Jump menu adding to Web page, 297<br /> <br /> K Keyboard, 38 Keyword search, 76 Kitchen computers, 455<br /> <br /> L Label, 292 LAN (local area network), 43 Layer, 288 inserting show-hide behavior, 288–291 Leadership qualities, 257 Left-hand navigation, 457 Link. See Hyperlink Link bar, 177 creating frame page for, 457 Link checker, 407 Link trading, 411 Linking to online resources, 81–82 Lists creating, in Dreamweaver, 118–119 creating, in HTML, 107 ordered, 106 types of, 106 unordered, 106 using HTML to create, 106–107 Listserv, 69 Local area network (LAN), 43 Local client update, 430 Logo, 174<br /> <br /> M Macromedia Director, 255 Macromedia Dreamweaver. See Dreamweaver Macromedia Flash, 265 Maintaining a Web server, 424–427 uploading and downloading capabilities, 424–425 524<br /> <br /> Index<br /> <br /> Maintaining a Web site, 17 updating information, 429–432 Markup language, 280 Menu, 7 Menu bar, 22 Meta tag, 412 Microphone, 38 Microsoft FrontPage, 17 Microsoft Internet Explorer browser, 7 main components, 7 Microsoft PhotoDraw, 265 Microsoft Windows Media Player, 79, 259 operating system, 40 Microsoft Word, 79 word processing tools, H4 Milestone, 314 Mission statement, 136 determining purpose and goals, 136 writing, 138–139 Modems, 45 Monitors, 38 Mouse, 38 Multimedia, 12, 252 adding using HTML, 476 design guidelines, 252–253 Web design, 252–256 Multimedia authoring tools, 255 Multimedia files downloading, 254 locating, 254 size guidelines, 253 using ethically, 254 Multimedia Web sites evaluating, 255–256, 508–509 tools for creating, 255–256 Multimodal Web, 236 Multiple technologies (Web accessibility), 282<br /> <br /> N Named anchor, 373–374 Navigation bar. See Link bar Navigation button, 7 adding, 178 hover button, 177 interactive button, 177 Navigation buttons, 177–178, 288 Navigation link, 177 Navigation scheme, 140 charting, 147 combination, 142 hierarchical, 141 linear, 142 random-access, 142 storyboarding, 146–147<br /> <br /> types of, 140–142 viewing, 143–145 Navigation structure, adding Web pages to, 194–195 Navigation toolbar, 143–145 Negotiation and workgroup members, 320 Netiquette, H5, 85 Network, 6, 43–46 client/server, 45 comparing, 70 hardware, 45–46 local area, 43 modem, 45 operating system, 46 provide access to Internet, 43 router, 46 software, 46 types of, 43 wide area, 43 Network interface card (NIC), 46 New Web languages, 115 News group or forum, 69 Newsletters, 375 NIC (network interface card), 46 Notepad creating HTML document in, 103–104 versus Dreamweaver, 116–122 saving HTML document in, 103–104 using, 103–104<br /> <br /> O Online privacy, taking precautions for, 428 Online services, 404 Operating system software, 40 commonly used, 40 compatibility of, 42 graphical user interface, 40 Macintosh OS, 40 Microsoft Windows, 40 responsibilities of, 40 Operating systems (OS), 40 Ordered list, 106 Orphaned file, 407 OS (operating system), 40 Output device, 38<br /> <br /> P Page header or banner, 196 inserting, 196–197 Page layout guidelines for, 167–168 using CSS for, 465 Page Properties dialog box, 499 Page template. See Template<br /> <br /> Page title, 148 assigning, 193 relationship to file name, 148 Page view, 367 Page view options, 25 Parent-child relationship, 141 Password, 433 Password controls, 433 Peer-to-peer relationship, 141 Photo album, 240 creating, with thumbnails, 240–242 Photoshop. See Adobe Photoshop Picture cropping, 231 resampling, 232 resizing, 231 Pixel, 169 and font size, 203 Pixel definition and brightness, 234 and contrast, 234 Planning checklist, 150–151 Plug-in, 259 adding, to a Web page, 259 Positioning absolute, 465 relative, 465 static, 465 Presentation design, 16–17 consistency in, 192 navigation structure in, 194–195 principles of, 192–197 repetition in, 192 Printer, 38 Privacy, 348 cookies and, 428 legal protection of, 348 protecting, H7, 10, 85 site registration for, 428 Web bugs and, 428 Privacy policy, 349 adding, in Dreamweaver, 349–350 Project life cycle analysis and planning, 321 budget considerations, 326 creating the schedule, 324 determining target market, 323 human resource considerations, 326 overview of, 312 stages of, 313 tasks in, 313 Project manager, 314 Project scope, determining, 321–326 Project team evaluating progress, 316–318 forming a Web design, 314–316<br /> <br /> identifying responsibilities of, 317–318 Protocol, 68 Publicizing a Web site, 410–413 Publishing a Web site, 394, 398–403 choosing a Web host, 396 Pull-down menu, 479<br /> <br /> Q QuickTime. See Apple QuickTime<br /> <br /> R Radio button, 293, 478 adding, 344 Random-access memory (RAM), 39 Readability, 206 Really Simple Syndication (RSS), 376 Refrigerators, next generation of, 455 Registration form, using HTML to create, 477–480 Relationship skills, and leadership qualities, 257 Relative link, 111 Relative positioning, 465 Reliability of Web host, 396 of Web server, 395 Remote server downloading files, 430–431 uploading files, 430–431 Removable storage devices, 39 Reports, 405 Resampling, 232 Resizing, 231–232 Rollover button creating, 283 using JavaScript to create, 484–485 Router, 46 Row, 175 RSS (Really Simple Syndication), 376 Rubric and Web design, 508–509<br /> <br /> S Safe area, 169 Saving files, 42 Scalability, 395 Scanners, 38 Screen resolution, 169–170 viewing Web page at different, 169–170 Script, 278 client-side, 483–486 server-side, 485 Scripting adding interactivity using, 483–486 and interactivity, 278<br /> <br /> Scripting languages, 279 Scroll box, 342 Search capabilities, 372 Search engine, 75 registering a Web site with, 411 Search tools, H8, 75–76 Secure Socket Layer (SSL), 351 Securities and Exchange Commission, 83 Security, 351–352 concern for e-commerce sites, 347 data encryption, 351 digital certificate, 352 Selector, 463 Semantic Web, 236 Server, 45 Server-side scripts, 485–486 Site map, 371 Site registration, 428 Site Reports, 405 Sites creating, 497 defining, 497 publishing, 497 Smart houses, 455 Smart workplaces, 455 Software, 40–41. See also Application software applications for creating Web page, 78–79 components, 67 graphics application, 79 text application, 79 text editor, 78 Web site development application, 78 Sound. See Audio Source code, 101 Source control, 318–319 Spam, 410 Speakers, 38 SSL (Secure Socket Layer), 351 Starting an E-business, 370 Static positioning, 465 Static Web page, 368 Storage capacity, 39 Storage device, 39 hard drive, 39 removable storage devices, 39 Storyboard, 146 Storyboarding creating sketches of individual pages, 149–150 drawing navigation structure, 147 Web site, 146–151 Streaming media, 253 Subpages, 55–56<br /> <br /> Index<br /> <br /> 525<br /> <br /> T T1 connection, 44 T3 connection, 44 Table, 175 controlling alignment in, 452–453 creating, in Dreamweaver, 175–176 creating, in HTML, 450–454 creating table border in HTML, 451 merging cells in HTML, 452 spliting cells in Dreamweaver, 200 Table of contents, 372 Talking Web, 236 Target audience, 137–138 Target browser check, 408–409 Target market, 323 Targeted marketing, 414 TCP/IP protocol, 68 Technical documentation, 432 Telnet, 68 Template creating, 171–176 designing, 171–173 enhancing, 177–182 tables in, 175–176 Testing a Web site, 17, 113 in different browser, 17, 403 in Dreamweaver, 122 published Web site, 403 with various hardware, 403 Text, 12 aligning, 168, 204 formatting, 51 formatting, in Dreamweaver, 208–209 inserting, 51 Text applications, 79 Text area, 292–293, 342, 479 creating, in HTML, 480 Text box, 292, 477 creating, in HTML, 477 Text editor, 78 entering HTML code in, 102–108 Notepad, 103 Text field, 293 Text link, 111, 180 adding, in Dreamweaver, 81–82, 180 adding, in HTML, 110–111 Text options, 282 Thumbnail, 240 Title bar, 7, 22 Title grapic, 174 Titles, 294 Toolbars, 22 Top-level page, 141 Tracking software, 367 Tracking visitors, 366–367 526<br /> <br /> Index<br /> <br /> Trademark, 210 Transmission Control Protocol/ Internet Protocol. See TCP/IP protocol Trustworthiness, as management skill, 257 Typography, 202–209<br /> <br /> U Uniform Resource Locator (URL), 71–72 Unique visit, 367 Unordered list, 106 creating, in Dreamweaver, 118–119 creating, in HTML, 107 Update Information, 285 Updates, automated, 431 Updating a Web site, 429–432 Upload, 401 URL. See Uniform Resource Locator User authentication, 433 Utility software, 41<br /> <br /> V Validating accessibility, 355–356 Validation report, 406 Video, 12, 253 design guidelines, 253 Video capture card, 261 Video file adding, to a site, 261–264 creating, 261 editing software, 79, 255 formats, 259 Videoconference, 166 Visitors, sharing information with, 375<br /> <br /> W W3C. See World Wide Web Consortium WAIS (Wide area information servers), 68 WAN (wide area network), 43 Web. See World Wide Web Web author, 18, 315 Web browsers, 7 and accessibility, 73 functions, 7 menus of, 7 Microsoft Internet Explorer as a, 7 navigating to Web pages, 7 platform differences, 73 previewing, 74 restrictions, 73<br /> <br /> retrieving a Web page, 73 testing Web sites in different, 17, 403 title bar of, 7 using, 73–75 viewing area of, 7 viewing HTML page in, 108 viewing Web site in, 13–14 Web bugs, 428 Web content developing of, 152 and editors, 152 Web design forming project team for, 314–316 multimedia and, 252–256 Web designer, 18, 20, 315 Web developer, 18 Web development, 15–19 analysis and planing, 321 careers, 18–19 designing and implementing a Web site, 16–17 determining purpose and goals, 16 evaluating and testing a Web site, 17 maintaining a Web site, 17 project life cycle of, 312 project schedule, 325 publishing a Web site, 17, 398–403 skills, 18 software, 78–79 steps in process, 15–17 tools, 78–82 Web directory, 75 Web graphic formats, 224–227 types, 224–227 Web host, 395–396 bandwidth of, 396 choosing, 396 cost of, 396 performance of, 396 reliability of, 396 storage space of, 396 technical support from, 396 Web hosting external, 397 internal, 397 Web hosting service, 80 Web logs, 83 Web pages, 7 adding graphics to, 52–54 adding jump menu to, 297–298 adding text to, 51 animation on, 12 application for creating, 78–79 archiving, 432 audio on, 12 compared to Web site, 7<br /> <br /> component application, 79 content, 164 creating, 48–56, 193–194 creating content for, 165 creating frames-based, 459–460 developing, 165 dimensions, 169 dynamic, 368 elements of, 11–14 footer, 179 frames-based, 380 graphics on, 12 hyperlinks on, 13 layout guidelines, 167–168 maintaining file names for, 399–400 multimedia on, 12 naming, 193–194 previewing, in different browsers, 74 retrieving, in browser, 73 saving, 48 static, 368 testing, 113–114 testing, in Dreamweaver, 122 text on, 12 uniform resource locator for, 71–72 video on, 12 viewing at various screen resolutions, 169–170 Web Photo Album (using Fireworks), 240–242 Web server, 394–395 communication channel bandwidth, 395 CPU power, 395 hard drive speed and capacity, 395 maintenance, 424–427 reliability, 395 scalability, 395 storage options, 425–426 technical needs of, 394–395 transferring files to, 401–402 Web server clusters, 396 Web site accessibility, 353–356 Web site checklists, 317 Web site design, and workgroup common goals, 320 Web site development application, 78 design categories, 17 graphical user interface, 78 Web site users, threats to, 347 Web sites, 7 adding animation to, 265–268 adding audio files to, 260 adding form to, 292–296 adding meta tags to, 412–413 adding video files to, 261–264<br /> <br /> and blended attacks, 347 calculating size of, 396 commercial, 8 compared to Web page, 7 controlling access to, 433–434 corporate presence, 8 creating content for, 162–165 determining purpose, 16, 136 development, 15–19, 312–318 e-commerce, 8, 323–324, 336–341 educational, 10 evaluation of, H9 goals, 136, 138 and graphic designers, 152 increasing traffic on, 413 informational, 9 inserting behaviors into, 286–289 linking to database, 368–369 maintaining directory structure of, 400 mission statement, 136 multimedia, 255–256 naming, 398 navigation scheme, 143–145 personal, 10 planning, 136–152 planning checklist, 150–151 portal, 9 privacy, 348–349 promoting, 410–414 publicizing, 410–413 reliability of, 87 running reports in, 406 security, 351–352 templates, 171–182 testing published, 403 threats to, 347 tracking visitors, 366–367 types of, 8–10 update information in, 285 updating, 429–432 validating, 406–407 viewing, in a browser, 13–14 Web text developing, 164–165 guidelines, 163 mission statement in, 164 organizing, 164 reading online, 163 revising, 164 Web writer. See Web author Web-based chat rooms, 166 Web-based writers, 152 Webmaster, 19 becoming a, 482 ethics and, 435–436 implementing access controls, 433 knowledge and skills, 316, 482 role of, 424, 427<br /> <br /> Web-safe color, 199 chart, 507 choosing, 198–199 16 named colors, 506 using, 198–201 White space, 168 Wide area information servers. See WAIS Wide area network (WAN), 43 Wi-Fi Protected Access (WPA), 347 Windows versus Macintosh commands, 500–501 Wireless, 44 Wireless trend, threats of, 347 Word. See Microsoft Word Workgroup ethics in, 320 and negotiation, 320 World Wide Web (WWW), 6 accessibility on, 282 created, 66 downloading multimedia files from, 254 finding a job using, 20 future of, 404 how it works, 6 and protected information, 85–88 security threats to, 347 writing for, 162–164 World Wide Web Consortium (W3C), 66, 236, 338 and HTML, 100 WPA (Wi-Fi Protected Access), 347 Writers, web-based, 152 WWW. See World Wide Web WYSIWYG, 78<br /> <br /> X XHTML (Extensible Hypertext Markup Language), 280 XML (Extensible Markup Language), 115, 280<br /> <br /> Z Zip disk, 39<br /> <br /> Index<br /> <br /> 527<br /> <br /> SCREEN CAPTURE CREDITS Abbreviation Key: MS = Screen shots used by permission from Microsoft Corporation. © 2005 McGraw-Hill companies, 7; © 1983–2005 MS Explorer, 7, 9, 11, 13–14, 20, 32–33, 68, 74, 77, 82, 99–100, 104–105, 108, 111, 113, 127, 163, 168, 210, 215, 239, 241–242, 236, 239–240–242, 253–254, 256, 264, 266, 268, 279–280, 282, 284, 290–291, 296, 298, 322, 337, 351–352, 374, 379, 391, 396, 399, 400, 404, 411, 413–414, 419, 428–429, 434, 442, 444, 451–454, 458, 460-461, 464, 466, 477-481, 485, 487, 491–492; © 2005 Ask Jeeves, Inc., All rights reserved, 9; National Aeronautics and Space Administration, 11; © 2005 Monster- All rights reserved., 20; © 1997–2004 Macromedia® Dreamweaver® MX 2004, All rights reserved., 22–26, 30, 49, 50–56, 87, 92, 94, 117–121, 127, 143–145, 169-170, 172–176, 178-182, 193–195, 199–205, 207, 209, 217; © 2005 USA TODAY, a division of Gannett Co. Inc., 32; © 2005 Museum of Modern Art, 33; © 1981–2005 MS ClipArt 39, 53, 54, 55; © Apple Computers Inc. All Rights Reserved, 40; © 1981–2001 MS ClipArt, Microsoft Corporation, All rights reserved., 52–54, 82, 274; © 2005 Yahoo! Inc. All rights reserved., 68, 376; © 2003 Netscape Communications Corporation. All rights reserved., 75; © 2005 Google, 77; © Adobe Systems Inc., 79, 81; © 2005 MSN Encarta®, 83; © 1981–2005 MS Notepad, 103–104, 107, 110, 112, 281, 450–452, 427, 450–453, 457–458, 461, 463–465, 476–481, 484–485, 493–494; © 1983–2005 MS Word, 115; © 2005 Digital Chicago Inc., 168; U.S. Department of Justice, 210; © 1994–2005 W3C®, 236; © 2005 InfoSpace, Inc. All Rights Reserved., 254, 411; © 2005 holleratme.com, 256; © 2005 Macromedia Flashplayer, 264, 267; © 2005 Electronic Arts Inc. All rights reserved., 279; © 2005 PetCareRx.com™, 280; © 1995–2005 eBay Inc. All Rights Reserved., 322; © 2005 Viacom International Inc. All rights reserved., 323; © 2005 Kellogg, 323; © 1996–2005 Circuit City Stores, Inc., 351; © 2005 Trek Bicycle Corporation, 369; © 2002 Lynch and Horton, all rights reserved, 372; © 2003–2005 BlueHost.Com. All Rights Reserved., 395; U.S. Department of Commerce. Internet Corporate for Assigned Names and Numbers, 399; Federal Citizen Information Center, 404; © 1999-2005 Dell Inc., 413; © 2005 AT&T. All rights reserved. 425; © 2005 America’s Job Bank, 427; © 2005 WAL-MART.COM, All rights reserved., 429; © 2005 Humanscale.com, 444; © 2005 City of Gering Nebraska U.S.A. All rights reserved., 456.<br /> <br /> ®<br /> <br /> PHOTO CREDITS COVER: Peter Adams/Index Stock; Jody Dole/Getty Images; Andrew Douglas/Masterfile; Jeff Greenberg/Index Stock; Image Source Limited/Index Stock; Lou Jones/Index Stock; LLC, Vstock/Index Stock; Richard Orton/Index Stock; Photos.com Select/Index Stock. Age Fotostock/SuperStock 474; Ansgar Photography/CORBIS 446–447; Craig Aurness/CORBIS 159; Paul Barton/CORBIS 220–221, 308–309; Francisco Cruz/SuperStock 34; Jon Feingersh/CORBIS 250, 257, 269; Tom Grill/Age Fotostock v, 64; Brownie Harris/CORBIS 200–201, 209; John Henley/CORBIS 2–3; image100/SuperStock 190; Image Source Ltd./Age Fotostock 276; Kaluzny-Thatcher/Getty Images vii, 152; Michael Keller/CORBIS iv, 4, 473; France Keyser/In Visu/CORBIS 13; Johnathan Kirn/Getty Images 347; Rob Lewine/CORBIS 315; Don Mason/CORBIS 364; Ryan McVay/Photodisc 166; Michael Newman/PhotoEdit vi, 229; Michael Newman/PhotoEdit/Picturequest 129; Richard T. Nowitz/CORBIS H9; Gabe Palmer/CORBIS 222; Jose Luis Pelaez, Inc./CORBIS xv, 334; PictureQuest, Inc. xxiii, 275; Justine Pumfrey/Getty Images x, 482; Michael Prince/CORBIS 13; Mug shots/CORBIS 443; Darius Ramazani/CORBIS xi, 448; Royalty-free/CORBIS ix, 13, 218; Royalty-free/Digital Vision/Getty Images 315; Royalty-free/Getty Images 233–235; Royalty-free/Paul Viant&Carrie B/Age Fotostock 134; Royalty-free/PhotoDisc/Getty Images xvi, xxii, H1; Royalty-free/SuperStock 310; RyanStock/Getty Images 18; Norbet Schafer/CORBIS 370; Ariel Skelley/CORBIS 233–235; Bob Stefko/Getty Images ix, 455, 467; Tom Stewart/CORBIS 96, 392, 422; Terry Sutherland, Sutherland Photo Design 47; SW Productions/Photodisc/Getty Images H6; Stephen Swintek/Getty Images x, 394; Arthur Tilley/ PhotoDisc H7; Anton Vengo/SuperStock viii, 320; Alexander Walter/Getty Images 305; David Woolley/ Getty Images 132–133; David Young-Wolff/PhotoEdit 261.<br /> <br /> 528<br /> <br /> Image Credits<br /> <br /> </div> </div> </div> <div class="row hidden-xs"> <div class="col-md-12"> <h2></h2> <hr /> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/student-workbook.html"> <img src="https://epdf.tips/img/300x300/student-workbook_5a9b4777b7d7bc415f774b4e.jpg" alt="Student Workbook" /> <h3 class="note-title">Student Workbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/student-workbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/foundation-web-design-with-dreamweaver-8.html"> <img src="https://epdf.tips/img/300x300/foundation-web-design-with-dreamweaver-8_5a46c8f4b7d7bce375be85c3.jpg" alt="Foundation Web Design with Dreamweaver 8" /> <h3 class="note-title">Foundation Web Design with Dreamweaver 8</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/foundation-web-design-with-dreamweaver-8.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/using-adobe-dreamweaver-cs5.html"> <img src="https://epdf.tips/img/300x300/using-adobe-dreamweaver-cs5_5a41afb6b7d7bc4916aff768.jpg" alt="Using ADOBE DREAMWEAVER CS5" /> <h3 class="note-title">Using ADOBE DREAMWEAVER CS5</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/using-adobe-dreamweaver-cs5.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-cs5-basic-student-manual.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-cs5-basic-student-manual_5bf416dbb7d7bcf71f8d88ff.jpg" alt="Dreamweaver Cs5: Basic, Student Manual" /> <h3 class="note-title">Dreamweaver Cs5: Basic, Student Manual</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-cs5-basic-student-manual.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-perl-student-workbooke20336a5a522312c92a5a5151bfcbe5697285.html"> <img src="https://epdf.tips/img/300x300/learning-perl-student-workbook_5b4b28c8b7d7bc6b4857b084.jpg" alt="Learning Perl Student Workbook" /> <h3 class="note-title">Learning Perl Student Workbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-perl-student-workbooke20336a5a522312c92a5a5151bfcbe5697285.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/economics-student-workbook.html"> <img src="https://epdf.tips/img/300x300/economics-student-workbook_5b4b28fab7d7bc6b4857b085.jpg" alt="Economics Student Workbook" /> <h3 class="note-title">Economics Student Workbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/economics-student-workbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/learning-perl-student-workbook.html"> <img src="https://epdf.tips/img/300x300/learning-perl-student-workbook_5b4b28b3b7d7bc6b4857b083.jpg" alt="Learning Perl Student Workbook" /> <h3 class="note-title">Learning Perl Student Workbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/learning-perl-student-workbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-business-student-edition-5ea6a38b55664.html"> <img src="https://epdf.tips/img/300x300/introduction-to-business-student-edition_5ea6a38b097c4700418b4603.jpg" alt="Introduction to Business, Student Edition" /> <h3 class="note-title">Introduction to Business, Student Edition</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-business-student-edition-5ea6a38b55664.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-technology-student-edition.html"> <img src="https://epdf.tips/img/300x300/introduction-to-technology-student-edition_5ba54a0ab7d7bcfd6dc82f75.jpg" alt="Introduction To Technology Student Edition" /> <h3 class="note-title">Introduction To Technology Student Edition</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-technology-student-edition.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-business-student-edition.html"> <img src="https://epdf.tips/img/300x300/introduction-to-business-student-edition_5a4435e1b7d7bc10708dd4a9.jpg" alt="Introduction to Business, Student Edition" /> <h3 class="note-title">Introduction to Business, Student Edition</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-business-student-edition.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-based-training-using-technology-to-design-adult-learning-experiences.html"> <img src="https://epdf.tips/img/300x300/web-based-training-using-technology-to-design-adul_5a4480fbb7d7bcea6598dfa0.jpg" alt="Web-Based Training: Using Technology to Design Adult Learning Experiences" /> <h3 class="note-title">Web-Based Training: Using Technology to Design Adult Learning Experiences</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-based-training-using-technology-to-design-adult-learning-experiences.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/web-photoshop-amp-dreamweaver.html"> <img src="https://epdf.tips/img/300x300/web-photoshop-amp-dreamweaver_5a3db3b4b7d7bc70565fff34.jpg" alt="Web-дизайн: Photoshop &amp; Dreamweaver" /> <h3 class="note-title">Web-дизайн: Photoshop &amp; Dreamweaver</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/web-photoshop-amp-dreamweaver.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-mx-php-web-development.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-mx-php-web-development_5a3ef846b7d7bc2249ec33a3.jpg" alt="Dreamweaver MX PHP Web Development" /> <h3 class="note-title">Dreamweaver MX PHP Web Development</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-mx-php-web-development.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-compiler-design.html"> <img src="https://epdf.tips/img/300x300/introduction-to-compiler-design_5b416961b7d7bc6266f669da.jpg" alt="Introduction to Compiler Design" /> <h3 class="note-title">Introduction to Compiler Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-compiler-design.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/student-workbook-for-phlebotomy-essentials.html"> <img src="https://epdf.tips/img/300x300/student-workbook-for-phlebotomy-essentials_5b94638ab7d7bcd57662b74d.jpg" alt="Student Workbook for Phlebotomy Essentials" /> <h3 class="note-title">Student Workbook for Phlebotomy Essentials</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/student-workbook-for-phlebotomy-essentials.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-microsystem-design.html"> <img src="https://epdf.tips/img/300x300/introduction-to-microsystem-design_5b41698db7d7bc6266f669dc.jpg" alt="Introduction to Microsystem Design" /> <h3 class="note-title">Introduction to Microsystem Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-microsystem-design.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-optimum-design-5ea7d391ed07c.html"> <img src="https://epdf.tips/img/300x300/introduction-to-optimum-design_5ea7d392097c47d2248b620b.jpg" alt="Introduction to Optimum Design" /> <h3 class="note-title">Introduction to Optimum Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-optimum-design-5ea7d391ed07c.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-optimum-design0b8ef8318e7a680a2468e6fd19a1be8d23039.html"> <img src="https://epdf.tips/img/300x300/introduction-to-optimum-design_5a8cd0b9b7d7bcf220faf57c.jpg" alt="Introduction to Optimum Design" /> <h3 class="note-title">Introduction to Optimum Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-optimum-design0b8ef8318e7a680a2468e6fd19a1be8d23039.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-optimum-design353703a2c615e28bbd4b92bf5086940c30047.html"> <img src="https://epdf.tips/img/300x300/introduction-to-optimum-design_5a8cd0c9b7d7bcf220faf57d.jpg" alt="Introduction to Optimum Design" /> <h3 class="note-title">Introduction to Optimum Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-optimum-design353703a2c615e28bbd4b92bf5086940c30047.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-logic-design.html"> <img src="https://epdf.tips/img/300x300/introduction-to-logic-design_5a8cd0c4b7d7bcf420a7db7c.jpg" alt="Introduction to Logic Design" /> <h3 class="note-title">Introduction to Logic Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-logic-design.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-engineering-design.html"> <img src="https://epdf.tips/img/300x300/introduction-to-engineering-design_5a8cd19bb7d7bcf220faf580.jpg" alt="Introduction to Engineering Design" /> <h3 class="note-title">Introduction to Engineering Design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-engineering-design.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-optimum-design.html"> <img src="https://epdf.tips/img/300x300/introduction-to-optimum-design_5a46e67bb7d7bcef6611255e.jpg" alt="Introduction to optimum design" /> <h3 class="note-title">Introduction to optimum design</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-optimum-design.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver-8-design-and-construction.html"> <img src="https://epdf.tips/img/300x300/dreamweaver-8-design-and-construction_5ab58590b7d7bccd12c65127.jpg" alt="Dreamweaver 8 Design and Construction" /> <h3 class="note-title">Dreamweaver 8 Design and Construction</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver-8-design-and-construction.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-programming-using-java.html"> <img src="https://epdf.tips/img/300x300/introduction-to-programming-using-java_5b977f6ab7d7bc1e3f1a89a0.jpg" alt="Introduction to Programming Using Java" /> <h3 class="note-title">Introduction to Programming Using Java</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-programming-using-java.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/introduction-to-programming-using-python.html"> <img src="https://epdf.tips/img/300x300/introduction-to-programming-using-python_5a49c642b7d7bcc5174e9110.jpg" alt="Introduction to Programming Using Python" /> <h3 class="note-title">Introduction to Programming Using Python</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/introduction-to-programming-using-python.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/design-patterns-java-workbook.html"> <img src="https://epdf.tips/img/300x300/design-patterns-java-workbook_5b856ec6b7d7bcba0efa1056.jpg" alt="Design Patterns Java Workbook" /> <h3 class="note-title">Design Patterns Java Workbook</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/design-patterns-java-workbook.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver72d7b0095b93aeac11e44150b0a96eff26028.html"> <img src="https://epdf.tips/img/300x300/dreamweaver_5bebb1d3b7d7bcf41f4fb9f5.jpg" alt="Dreamweaver" /> <h3 class="note-title">Dreamweaver</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver72d7b0095b93aeac11e44150b0a96eff26028.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver68579c97d7c2013a0c888469dca5cd287103.html"> <img src="https://epdf.tips/img/300x300/dreamweaver_5bebb1d5b7d7bcf71f8d2b59.jpg" alt="Dreamweaver" /> <h3 class="note-title">Dreamweaver</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver68579c97d7c2013a0c888469dca5cd287103.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/irjet-design-of-student-security-system-using-rfid-mechanism.html"> <img src="https://epdf.tips/img/300x300/irjet-design-of-student-security-system-using-rfid_5f92ad319a3be206448b493f.jpg" alt="IRJET- Design of Student Security System using RFID Mechanism" /> <h3 class="note-title">IRJET- Design of Student Security System using RFID Mechanism</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/irjet-design-of-student-security-system-using-rfid-mechanism.html">Read more</a> </div> </div> </div> <div class="col-lg-2 col-md-3"> <div class="note"> <div class="note-meta-thumb"> <a href="https://epdf.tips/dreamweaver2fd128930b14eb7251c53d37bd46e25798020.html"> <img src="https://epdf.tips/img/300x300/dreamweaver_5beb31d1b7d7bcf71f8d1644.jpg" alt="Dreamweaver" /> <h3 class="note-title">Dreamweaver</h3> </a> </div> <div class="note-action"> <a class="more-link" href="https://epdf.tips/dreamweaver2fd128930b14eb7251c53d37bd46e25798020.html">Read more</a> </div> </div> </div> </div> </div> <div class="col-lg-3 col-md-4 col-xs-12"> <div class="panel-recommend panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title">Recommend Documents</h4> </div> <div class="panel-body"> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/student-workbook.html"> <img src="https://epdf.tips/img/60x80/student-workbook_5a9b4777b7d7bc415f774b4e.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/student-workbook.html"> Student Workbook </a> </label> <div class="note-meta"> <div class="note-desc">7CMP06SE_CSTOC.qxd 5/22/06 11:04 AM Page viii Comparing and Scaling Ratio, Proportion, and Percent Unit Opener . . . . ...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/foundation-web-design-with-dreamweaver-8.html"> <img src="https://epdf.tips/img/60x80/foundation-web-design-with-dreamweaver-8_5a46c8f4b7d7bce375be85c3.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/foundation-web-design-with-dreamweaver-8.html"> Foundation Web Design with Dreamweaver 8 </a> </label> <div class="note-meta"> <div class="note-desc">Foundation Web Design with Dreamweaver 8 Craig Grannell Foundation Web Design with Dreamweaver 8 Copyright © 2006 by C...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/using-adobe-dreamweaver-cs5.html"> <img src="https://epdf.tips/img/60x80/using-adobe-dreamweaver-cs5_5a41afb6b7d7bc4916aff768.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/using-adobe-dreamweaver-cs5.html"> Using ADOBE DREAMWEAVER CS5 </a> </label> <div class="note-meta"> <div class="note-desc">Shay Friedman IronRuby UNLEASHED 800 East 96th Street, Indianapolis, Indiana 46240 USA IronRuby Unleashed Copyright ...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/dreamweaver-cs5-basic-student-manual.html"> <img src="https://epdf.tips/img/60x80/dreamweaver-cs5-basic-student-manual_5bf416dbb7d7bcf71f8d88ff.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/dreamweaver-cs5-basic-student-manual.html"> Dreamweaver Cs5: Basic, Student Manual </a> </label> <div class="note-meta"> <div class="note-desc">ADOBE ® Dreamweaver CS5 ® B A SIC 5.0/5.0 rating from ProCert Labs L E A R N HOW TO: ™ÂŽ Perform basic editing ™Â...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-perl-student-workbooke20336a5a522312c92a5a5151bfcbe5697285.html"> <img src="https://epdf.tips/img/60x80/learning-perl-student-workbook_5b4b28c8b7d7bc6b4857b084.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-perl-student-workbooke20336a5a522312c92a5a5151bfcbe5697285.html"> Learning Perl Student Workbook </a> </label> <div class="note-meta"> <div class="note-desc">Student Workbook brian d foy SECOND EDITION Student Workbook for Learning Perl brian d foy Beijing • Cambridge • F...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/economics-student-workbook.html"> <img src="https://epdf.tips/img/60x80/economics-student-workbook_5b4b28fab7d7bc6b4857b085.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/economics-student-workbook.html"> Economics Student Workbook </a> </label> <div class="note-meta"> <div class="note-desc">Sloman WBK fnl AW2 08/11/2005 11:13 Page 1 sixth edition John Sloman • Peter Smith STUDENT WORKBOOK This comprehen...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/learning-perl-student-workbook.html"> <img src="https://epdf.tips/img/60x80/learning-perl-student-workbook_5b4b28b3b7d7bc6b4857b083.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/learning-perl-student-workbook.html"> Learning Perl Student Workbook </a> </label> <div class="note-meta"> <div class="note-desc"></div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/introduction-to-business-student-edition-5ea6a38b55664.html"> <img src="https://epdf.tips/img/60x80/introduction-to-business-student-edition_5ea6a38b097c4700418b4603.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/introduction-to-business-student-edition-5ea6a38b55664.html"> Introduction to Business, Student Edition </a> </label> <div class="note-meta"> <div class="note-desc">interactive student edition Jeremy Woodhouse/Masterfile Betty J. Brown Ball State University John E. Clow National C...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/introduction-to-technology-student-edition.html"> <img src="https://epdf.tips/img/60x80/introduction-to-technology-student-edition_5ba54a0ab7d7bcfd6dc82f75.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/introduction-to-technology-student-edition.html"> Introduction To Technology Student Edition </a> </label> <div class="note-meta"> <div class="note-desc">interactive student edition Alan J. Pierce Dennis Karwatka SAFETY NOTICE The reader is expressly advised to consider...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> <div class="row m-0"> <div class="col-md-3 col-xs-3 pl-0 text-center"> <a href="https://epdf.tips/introduction-to-business-student-edition.html"> <img src="https://epdf.tips/img/60x80/introduction-to-business-student-edition_5a4435e1b7d7bc10708dd4a9.jpg" alt="" width="100%" /> </a> </div> <div class="col-md-9 col-xs-9 p-0"> <label> <a href="https://epdf.tips/introduction-to-business-student-edition.html"> Introduction to Business, Student Edition </a> </label> <div class="note-meta"> <div class="note-desc">interactive student edition Jeremy Woodhouse/Masterfile Betty J. Brown Ball State University John E. Clow National C...</div> </div> </div> <div class="clearfix"></div> <hr class="mt-15 mb-15" /> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://epdf.tips/report/introduction-to-web-design-using-dreamweaver-student-workbook" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title">Report "Introduction to Web Design Using Dreamweaver®, Student Workbook"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6Lemmz0UAAAAAANSnNH_YtG0406jaTUcUP7mxrLr"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-success">Send</button> </div> </form> </div> </div> </div> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright &copy; 2024 EPDF.TIPS. All rights reserved. <div class="pull-right"> <span><a href="https://epdf.tips/about">About Us</a></span> | <span><a href="https://epdf.tips/privacy">Privacy Policy</a></span> | <span><a href="https://epdf.tips/term">Terms of Service</a></span> | <span><a href="https://epdf.tips/copyright">Copyright</a></span> | <span><a href="https://epdf.tips/dmca">DMCA</a></span> | <span><a href="https://epdf.tips/contact">Contact Us</a></span> | <span><a href="https://epdf.tips/cookie_policy">Cookie Policy</a></span> </div> </div> </footer> <!-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://epdf.tips/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://epdf.tips/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> <hr style="margin-top: 15px;" /> <a href="https://epdf.tips/login/facebook" class="btn btn-facebook btn-block"><i class="fa fa-facebook"></i> Login with Facebook</a> </div> </div> </div> </div> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-111550345-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-111550345-1'); </script> <script src="https://epdf.tips/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://epdf.tips/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://epdf.tips/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script> <!-- cookie policy --> <div id="EPDFTIPS_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #97c479; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://epdf.tips/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_EPDFTIPS_cookie_box();return false;">Agree & close</a> </div> <script> function accept_EPDFTIPS_cookie_box() { document.cookie = "EPDFTIPS_cookie_box_viewed=1;max-age=15768000;path=/"; hide_EPDFTIPS_cookie_box(); } function hide_EPDFTIPS_cookie_box() { var cb = document.getElementById('EPDFTIPS_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var EPDFTIPS_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('EPDFTIPS_cookie_box_viewed'); if (EPDFTIPS_cookie_box_viewed) { hide_EPDFTIPS_cookie_box(); } })(); </script> <!-- end cookie policy --> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>