This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
or paragraph tag). When you apply a paragraph style to a paragraph, the entire paragraph acquires the characteristics of the style such as the font type and size. The other type of style is the text style that you can apply to characters in a paragraph without affecting the entire paragraph.
Note
FrontPage contains only one built-in character style — the default character style. The default character style is the style you apply when you want to remove a text style from selected text and return to the paragraph style.
You can select a style by clicking on the down arrow to the right of the Styles drop-down list box. The Styles drop-down list box appears below the top button bar on the left-hand side of the window. The box says “Normal” because that’s the default paragraph style for your Web page (see Figure 9-1).
Figure 9-1 The Styles drop-down list box in the FrontPage window
154872-7 ch09.F
8/28/01
12:43 PM
Page 85
Session 9—Formatting Web Pages with Styles
85
The Styles drop-down list box entries have symbols on the left side of each entry that denote the type of style. The paragraph symbol indicates a paragraph style and an underlined letter a denotes a text style.
Inserting Text Styles
Note
After you apply your new style to a paragraph, any other paragraphs that you add after that one also retain that new style. If you want the Normal style for a subsequent paragraph, you must apply the Normal style. Only the Heading styles automatically change the style in subsequent paragraphs to Normal.
Figure 9-2 The Style dialog box To add a new style: 1. In the Style dialog box, click New. The New Style dialog box appears (see Figure 9-3).
Part II—Saturday Morning Session 9
FrontPage contains only one text style, but that doesn’t mean that you can’t add others. You can add a text style by choosing Format ➪ Style, which results in the Style dialog box shown in Figure 9-2.
154872-7 ch09.F
8/28/01
12:43 PM
Page 86
86
Saturday Morning
Figure 9-3 The New Style dialog box 2. In the New Style dialog box, click the down arrow to the right of the Style Type drop-down list and then click Character. 3. Enter a new name for the style in the Name field. 4. Apply formatting by clicking Format. A pop-up menu appears just below the Format button so you can apply different characteristics including font, alignment, border, numbering, and text wrapping information. Individual windows appear when you click on each entry in the pop-up menu. 5. Click OK. The new style appears in the New Style menu as a user-defined style. 6. Finish adding the style by clicking OK. Now that you’ve added a style, when you click the down arrow next to the Styles drop-down list box, your new text style appears at the bottom of the list. Select the desired text on your page and apply your new text style to it.
154872-7 ch09.F
8/28/01
12:43 PM
Page 87
Session 9—Formatting Web Pages with Styles
87
Specifying Paragraph Styles
Figure 9-4 This address has the Address paragraph tag applied to it.
Part II—Saturday Morning Session 9
When you apply a paragraph style from the Styles drop-down list box to a block of text, the style affects all the text in that block. The FrontPage default paragraph style is Normal, but you can choose from over a dozen different styles. For example, the Address style automatically changes the font in the paragraph to italicized Times New Roman so it stands out. If you change the paragraph style to Formatted, the font changes to Courier New. If you apply the Normal paragraph style, the paragraph changes back to plain Times New Roman. You add paragraph styles just as you do text styles. The only difference is that you select Paragraph rather than Character in the New Style dialog box’s Style Type drop-down list box. After you add a new paragraph style it appears at the bottom of the Style drop-down list box. You can then click anywhere within the paragraph and select the new paragraph style from the Style drop-down list box; the style is applied to the entire paragraph (see Figure 9-4).
154872-7 ch09.F
8/28/01
12:43 PM
Page 88
88
Saturday Morning
Three separate paragraphs comprise the address in Figure 9-4 — the name, the address, and the city, state, and ZIP code. FrontPage continues to apply the Address paragraph style to subsequent paragraphs even after you press the Enter key, which makes it convenient for adding multiple-line addresses on your Web page.
Adding Headings HTML contains six built-in headings of various sizes. These headings appear in bold face in various sizes, with Heading 1 being the largest size (24 points) and Heading 6 being the smallest size (8 points). The font point sizes correspond to the font sizes used in HTML: 1 (8 points) to 6 (24 points). As for which heading to use, Heading 1 gets the visitor’s attention and is good for things like the title of a page topic; Heading 6 can be used for small text such as a graphic caption. Figure 9-5 shows all of the headings in order from 1 to 6. Headings 2 through 5 are smaller subheadings of various sizes in case you need to set aside a subtopic in your text.
Note
Headings are unique paragraph styles — so unique that they have their own HTML tags that identify them as headings and not as regular paragraphs. All heading styles use the tag where n is 1 to 6 instead of the
tag for paragraphs; for example, the Heading 1 style uses the tag. When you type in text with a heading style and press the Enter key, HTML adds the closing heading tag (for example, ) at the end of the heading. The next paragraph reverts back to the Normal style and its regular paragraph tag.
154872-7 ch09.F
8/28/01
12:43 PM
Page 89
Session 9—Formatting Web Pages with Styles
89
Part II—Saturday Morning Session 9
Figure 9-5 Heading styles from 1 to 6
REVIEW FrontPage makes it convenient for you to add basic HTML styles to your Web page. FrontPage contains a list of default styles that you can apply to the text in your Web page. You can add both text and paragraph styles to your pages from the Styles drop-down list box above the page editing area. You can create your own paragraph, text, and heading styles so you can apply them within your Web page. You can also add six built-in headings so you can set aside text for announcing sections or the whole of the entire page.
154872-7 ch09.F
8/28/01
12:43 PM
Page 90
90
Saturday Morning
QUIZ YOURSELF 1. What are some of the FrontPage default styles? 2. What are text styles and how do you apply them? 3. What are paragraph styles and how do they differ from text styles? 4. What are headings and how do you use them?
164872-7 ch10.F
8/29/01
11:35 AM
Page 91
SESSION
10 Formatting Web Pages with Cascading Style Sheets Session Checklist ✔
Getting a handle on cascading style sheets (CSS) ✔ Creating styles in an external CSS ✔ Inheriting a style from another style ✔ Discussing embedded CSS ✔ Applying CSS to your Web
A
s convenient as built-in HTML styles are in making your Web page design process easier, and as much as FrontPage makes selecting those styles easier, applying styles can still be tedious, especially if you have to create and apply styles on several pages. If your Web site has several pages that use the same styles — and you should strive to for consistency for the sake of appearance — then you should consider using cascading style sheets.
164872-7 ch10.F
8/29/01
11:35 AM
Page 92
92
Saturday Morning
Understanding Cascading Style Sheets A cascading style sheet (CSS) is a Web page that contains style information that any Web page can reference. That is, if you open a new Web page, you can use the styles in your CSS without having to reenter all your styles every time you create a new page. The CSS contains text and paragraph styles including text size, text characteristics (such as boldface), text color, alignment, and other characteristics that you can use for your text styles. You can create two different kinds of style sheets: external and embedded. An external CSS is a separate style sheet that other pages in your Web can reference. An embedded CSS is a style sheet that resides within the Web page that references that CSS. An embedded CSS is best if you have only one page that uses styles. If you have more than one page on your Web site, then you should use an external CSS so all of your pages can refer to that one style sheet, even if some of those pages don’t use as many styles in the CSS as others.
Creating Styles in an External Cascading Style Sheet We’ll start by learning how to create an external CSS and add a style to it. You can create an external CSS by following these steps: 1. Choose File ➪ New ➪ Page or Web. The New Page or Web window appears. 2. Click Page Templates. The Page Templates dialog box appears (see Figure 10-1). 3. Click the Style Sheets tab. 4. Click to select the type of cascading style sheet you want. FrontPage has many different styles to choose from, or you can create a blank CSS. 5. Click OK after you select a new style sheet. After you click OK, the Page Templates dialog box closes and a new page opens up in the editing area with the same name as your Web page (or if you haven’t saved the page yet, the page name is new_page_1) with the css file extension (for cascading style sheet). The Style toolbox appears in the FrontPage window (see Figure 10-2).
164872-7 ch10.F
8/29/01
11:35 AM
Page 93
Session 10—Formatting Web Pages with Cascading Style Sheets
93
Part II—Saturday Morning Session 10
Figure 10-1 The Style Sheets tab in the Page Templates window contains many default style sheets to choose from.
Figure 10-2 The cascading style sheet page with the Style toolbox
164872-7 ch10.F
8/29/01
11:35 AM
Page 94
94
Saturday Morning
Now you’re ready to enter a style. You can enter a new style for your style sheet by following these steps: 1. Click Style in the Style toolbox. The Style dialog box appears. 2. Click New. The New Style dialog box appears (see Figure 10-3). 3. Enter a new name in the Name (selector) field. 4. Select the style type (the default Paragraph or Character style) from the Style type drop-down list box. 5. Click Format. A drop-down menu appears below it so you can enter the different attributes for your style in different windows.
Figure 10-3 The New Style dialog box 6. After you finish entering the style characteristics, click OK.
164872-7 ch10.F
8/29/01
11:35 AM
Page 95
Session 10—Formatting Web Pages with Cascading Style Sheets
95
After you click OK, the New Style and Style dialog boxes disappear and you see a piece of HTML code that appears in the editing area. This piece of code contains the name of your style and the style’s characteristics contained within curly brackets ({}), as shown in Figure 10-4.
Part II—Saturday Morning Session 10
Figure 10-4 Your new style has been entered into the cascading style sheet. Each new style that you enter into your CSS appears directly below the previous one(s) you entered. When you finish entering styles you must save the style sheet by choosing the File ➪ Save As option. The Save As dialog box appears so you can enter the new style name in your Web.
Having a Style Inherit from Another Style If you need to create a new style that has many of the characteristics of an existing style in your CSS, you can copy the style text from your CSS to another style. Here’s how:
164872-7 ch10.F
8/29/01
11:35 AM
Page 96
96
Saturday Morning
1. In the editing area, triple-click on the line that contains the style code. (Triple-clicking selects the entire line.) 2. Copy the line by pressing Ctrl+C. 3. Click the cursor on the line below the first style. 4. Paste the line by pressing Ctrl+V (see Figure 10-5).
Figure 10-5 The copied style appears directly below the first style. The copied style appears below the first style. You can then modify your copied style by taking these steps: 1. Click Style in the Style toolbox. The Style dialog box appears. 2. Click on the style at the bottom of the Styles list. 3. Click Modify. You can now modify the copied style by giving it a new name and new characteristics just as you would with a new style in your style sheet.
164872-7 ch10.F
8/29/01
11:35 AM
Page 97
Session 10—Formatting Web Pages with Cascading Style Sheets
97
When you finish modifying the style, save the cascading style sheet by choosing File ➪ Save option and then closing the style sheet by choosing File ➪ Close. Your Web page appears in the FrontPage window.
Embedded Cascading Style Sheets
Refer to Session 9 to learn more about embedding style sheets within a page. Cross-Ref
Pretty simple, eh?
Applying Cascading Style Sheets If you have an external CSS, you need to tell your page that you want to link to that external CSS. You can do that by following these steps, but before you do, make sure you’ve saved your style sheet, and you’re back to viewing the Web page. 1. Choose Format ➪ Style Sheet Links. The Link Style Sheet dialog box appears (see Figure 10-6). 2. Click All Pages if you want to apply the CSS to all pages in your Web; click Selected Page(s) if you want to apply the CSS only to the page you’re working on. 3. Click Add. 4. Select the style sheet you want to add from the Select Style Sheet dialog box and then click OK. 5. Click OK in the Link Style Sheet dialog box.
Part II—Saturday Morning Session 10
As I mentioned earlier, an embedded CSS is a style sheet that resides within the Web page that references that CSS, so an embedded cascading style sheet is the list of styles that exist already in your document. When you add styles in a page (as you do in Session 9) you add to the default embedded style sheet that already exists in your document.
164872-7 ch10.F
8/29/01
11:35 AM
Page 98
98
Saturday Morning
Figure 10-6 The Link Style Sheet dialog box The styles in your style sheet appear in the Style drop-down list box. Be aware that if you make changes to the CSS that you want to use in your Web without saving it, only the styles available in the last saved copy of the CSS appear in the Style drop-down list box.
REVIEW Cascading style sheets (CSS) make applying styles to more than one Web page in your Web site an easy task. There are two types of cascading style sheets: external and embedded. An external CSS is a separate style sheet that other pages in your Web can reference. Embedded CSS are styles that apply only to the current page you’re working on; Session 9 explains how to create these. You can link all the pages in your Web site to an external CSS so you don’t have to keep entering the same styles for each Web page.
164872-7 ch10.F
8/29/01
11:35 AM
Page 99
Session 10—Formatting Web Pages with Cascading Style Sheets
99
QUIZ YOURSELF 1. What is a cascading style sheet? 2. What are the advantages of using a cascading style sheet? 3. What is an external CSS? 4. What is an embedded CSS? Part II—Saturday Morning Session 10
5. How do you link an external style sheet to your Web page?
174872-7 PR2.F
8/29/01
11:35 AM
Page 100
PART
II # Saturday Morning
1. How do you open a new Web page? 2. How do you view HTML code? 3. What are the two ways of previewing a page? 4. How can you see your printed Web page before you print it? 5. Why should you save your Web page often? 6. How do you add a task? 7. How do you set the priority for a task? 8. How do you start a task? 9. How do you complete a task? 10. What is Microsoft SharePoint? 11. How do you select text? 12. Does word wrap work when you type in text? 13. What is plagiarism and why is it important? 14. What does a red, squiggly line under a word in your Web page mean? 15. How do you access the thesaurus? 16. How can you make a simple list stand out from the rest of your text? 17. What is a bulleted list and when should you use it? 18. Why should you use a numbered list? 19. What is a definition list used for? 20. What are some of the FrontPage default styles?
174872-7 PR2.F
8/29/01
11:35 AM
Page 101
Part II—Saturday Morning Part Review 21. What are text styles and how do you apply them? 22. What are paragraph styles and how do they differ from text styles? 23. What are headings and how do you use them? 24. What is a cascading style sheet? 25. What are the advantages of using a cascading style sheet? 26. What is an external style sheet? 27. What is an embedded style sheet? 28. How do you link an external style sheet to your Web page?
101
184872-7 PO3.F
8/28/01
12:43 PM
Page 102
PART
III Saturday Afternoon
Session 11 Entering Text Links to Other Web Pages Session 12 Editing Text and Fonts Session 13 Designing Graphics Session 14 Inserting Graphics Session 15 Changing Colors and Graphics Session 16 Adding Backgrounds and Themes
194872-7 ch11.F
8/28/01
12:43 PM
Page 103
SESSION
11 Entering Text Links to Other Web Pages Session Checklist ✔
Linking to a page in your FrontPage Web ✔ Linking within a Web page ✔ Creating a new page and then linking to it ✔ Linking to another Web site ✔ Linking to an e-mail address
N
ow that you’ve eaten lunch and taken a break from your computer screen, it’s time to turn your attention to entering hyperlinks to other pages on your site or to other Web sites. Breaking up your site into different pages makes the information you have easier to digest. And if you have a page with a lot of information, you can make it easy for visitors to move around within the page by adding links. As for linking to other sites, your site probably isn’t able to provide all the information available on a certain topic, so you may want to refer visitors to other sites. For example, if you’re a fan of a rock band you can have a link to the band’s official Web site. You can also add links to e-mail addresses so visitors can contact you.
194872-7 ch11.F
8/28/01
12:43 PM
Page 104
104
Saturday Afternoon
You have two options for linking to another page in your FrontPage Web: a text link or an area of a graphic that has been enabled with a link, called a hotspot graphic. There are different methods for adding a link to a page in text and in graphics — this session deals with just text links. FrontPage makes it easy for you to add many different types of links from recognized areas in your text I cover adding links to graphics in Session 13. Cross-Ref
Adding a Text Link to a Page in Your FrontPage Web Adding a text link is very easy — the hardest part about it is figuring out what text you want to add the link to. Be sure your links relate to the text. For example, if you want to set up a link to a page about tabby cats, add the link to a word or string of words that refers to a tabby cat. You can also add a link to a row of text links at the top of your page or within a paragraph. Note
Add a text link to another page in your Web by following these steps: 1. Select the text that you want to add the link to. 2. Choose Insert ➪ Hyperlink. The Insert Hyperlink dialog box appears (see Figure 11-1). 3. Your Web folder is already open, so click on the Web page file name in the center box. 4. Click OK.
194872-7 ch11.F
8/28/01
12:43 PM
Page 105
Session 11—Entering Text Links to Other Web Pages
105
After you add the link, the text that contains the link is blue and underlined (see Figure 11-2). When viewers move the mouse pointer over the text, a pop-up box appears telling them to open the page the text links to by clicking the link.
Figure 11-2 The text that contains a link is blue and underlined.
Part III—Saturday Afternoon Session 11
Figure 11-1 The Insert Hyperlink dialog box
194872-7 ch11.F
8/28/01
12:43 PM
Page 106
106
Saturday Afternoon
Linking within a Web Page If you have a lot of information on one page, include links that go to certain sections on that page. For example, if you have a Web page about the early history of personal computers, you can have links that go to the text about the Radio Shack TRS-80, the IBM PC, and the Apple II. You add bookmarks to different areas of your Web page, and then you can link your text to the bookmark. To add a bookmark and then create a link to it: 1. Select the text that you want to bookmark. The text should be words in a heading that appears before the text you want to link to or the first word or sentence in the paragraph that you want to link to. 2. Choose Insert ➪ Bookmark. The Bookmark dialog box appears (see Figure 11-3).
Figure 11-3 The Bookmark dialog box 3. The text that you want to bookmark appears in the Bookmark Name text field. You can change the bookmark name by entering a new name in the field. 4. Click OK.
194872-7 ch11.F
8/28/01
12:43 PM
Page 107
Session 11—Entering Text Links to Other Web Pages
107
The Bookmark dialog box disappears, and FrontPage displays your bookmarked text with a dashed underline. (The underline doesn’t appear in Preview mode or when you load the Web page in a browser.) 5. Select the text that contains the link; then choose Insert ➪ Hyperlink (just as you did in the previous section). The Insert Hyperlink dialog box appears. 6. Click Place in This Document on the left side of the Insert Hyperlink dialog box. 7. Click the bookmark in the Bookmarks tree (see Figure 11-4).
Part III—Saturday Afternoon Session 11
Figure 11-4 Select a bookmark from the Bookmark tree. 8. Click OK. The link to the bookmarked text appears just as a link to another page in your Web does. When the viewer clicks the bookmark link, the page automatically scrolls down to the bookmarked text.
194872-7 ch11.F
8/28/01
12:43 PM
Page 108
108
Saturday Afternoon
Linking to a New Page You can’t link to a page that doesn’t yet exist; you must first create the page. Here’s how to create a new page and then link to it: 1. Choose File ➪ New option ➪ Page or Web. The New Page or Web window appears. 2. Click Blank Page. The new page appears in the editing window. 3. Click on the tab of the original page. 4. Create a new link to the page by following the same steps in the section “Adding a Text Link to a Page in Your FrontPage Web,” earlier in this session. (The page appears in the Insert Hyperlink dialog box.)
Linking to Another Web Site One advantage of the Internet is that your Web pages can link to another Web site with similar (or not so similar) information at the click of a mouse button. You can link to another Web site by following these steps: 1. Select the text that you want to add the link to. 2. Choose Insert ➪ Hyperlink. The Insert Hyperlink dialog box appears. 3. Enter the Web site address in the Address field (see Figure 11-5). Note: You do not have to enter http:// before the address.
Note
194872-7 ch11.F
8/28/01
12:43 PM
Page 109
Session 11—Entering Text Links to Other Web Pages
109
4. Click OK. The link in the affected text appears the same as any other link (blue with an underline).
Linking to an E-Mail Address Including a link to an e-mail address is one of the basic features you should have on your Web site. Linking to an e-mail address makes it easy for people to get in touch with you or with anyone else whom you want visitors to contact. As with other tasks in this session, adding a link to an e-mail address is a step-by-step process: 1. Select the text that you want to add the link to. 2. Choose Insert ➪ Hyperlink. The Insert Hyperlink dialog box appears. 3. Click the E-mail Address icon in the lower left-hand corner of the window. 4. Enter the e-mail address you want to link to in the E-mail Address field (see Figure 11-6). 5. If you’d like to, you can add a subject for e-mail messages sent to you from that link in the Subject field (for example, “Information request”).
Part III—Saturday Afternoon Session 11
Figure 11-5 Enter the Web site address you want to link to in the Address field.
194872-7 ch11.F
8/28/01
12:43 PM
Page 110
110
Saturday Afternoon
Figure 11-6 Enter the e-mail address you want to link to in the E-mail Address field. 6. Click OK. Just like all the other links in this session, the link to your e-mail address looks the same as all the other links. If you preview the page in Preview mode and click the link, your e-mail program starts and a new message opens with the e-mail addressed to the person in the link and any subject you entered for the link in the subject line. Thus you’ve made it virtually painless for users to e-mail you by opening their e-mail program, filling in the address, and supplying the subject line — all they have to do is type their message and click Send.
REVIEW FrontPage 2002 makes it easy for you to add several different types of links to selected text. You can link to different pages, a different location on an existing page, to another Web site, and to an e-mail address. When you add a link to text, the color of the linked text is blue and the text is underlined (no matter what type of text link you add).
194872-7 ch11.F
8/28/01
12:43 PM
Page 111
Session 11—Entering Text Links to Other Web Pages
111
QUIZ YOURSELF 1. Why would you want to link to other pages or Web sites? 2. How do you link to another page in your Web? 3. What is a bookmark? 4. How do you link to another Web site? 5. How do you link to an e-mail address?
Part III—Saturday Afternoon Session 11
194872-7 ch11.F
8/28/01
12:43 PM
Page 112
204872-7 ch12.F
8/28/01
12:43 PM
Page 113
SESSION
12 Editing Text and Fonts
Session Checklist ✔
Format with the Format Painter ✔ Deleting and moving text ✔ Changing the color of your text ✔ Getting a handle on fonts and browsers ✔ Adding fonts ✔ Changing the fonts and font sizes
I
n Session 9, I discuss some of the methods you can use to format text to your liking. This session discusses some of those methods in greater detail and also adds some more information about using fonts correctly so a visitor who views your page, no matter what the browser or operating system that visitor uses, won’t get a bunch of gobbledygook on his or her screen.
204872-7 ch12.F
8/28/01
12:43 PM
Page 114
114
Saturday Afternoon
Using the Format Painter to Format Text and Paragraphs You can format text and paragraphs easily by applying styles as you learned this morning in Session 9. You can format text by applying different fonts and font sizes. Finally, you can copy text and paragraph formats from one formatted block of text to an unformatted block using the Format Painter. Here’s how: 1. Select the text with the format that you want to copy. 2. Click Format Painter in the Standard toolbar. 3. Select the text that you want to copy the format to. The mouse pointer changes from an arrow to a cursor bar with a paintbrush that signifies you’re “painting” the format to your text (see Figure 12-1).
Figure 12-1 The Format Painter button If you accidentally click the screen before you select the text, you lose the format paintbrush, and you have to paint the format over again. Note
204872-7 ch12.F
8/28/01
12:43 PM
Page 115
Session 12—Editing Text and Fonts
115
After you select the text and release the mouse, the text appears in the same format as the copied format.
Deleting Text Deleting text from your page is a very simple process that resembles that of a word processor. You have more than one option when it comes to deleting:
Moving Text Moving text is simple, too. FrontPage gives you two different ways to move your text: by keyboard or by mouse. Use the keyboard to cut, copy, and paste text just as you would in a word processor. Select the block of text you want to move and press Ctrl+X. Then you can move the cursor to the new location for the text and paste the cut text there by pressing Ctrl+V. Paste text using the mouse by first selecting the block you want to move. Then click the left mouse button and drag the cursor to the new location; the mouse pointer appears with a small box below to indicate that you’re moving the text. When your mouse pointer arrives at the location you want to move the text to, release the left mouse button. Your text appears where your mouse pointer resides.
Part III—Saturday Afternoon Session 12
You can delete text simply by placing your cursor at a certain point and then deleting text to the left by pressing the Backspace key or text to the right by pressing the Delete key. You can delete a block of text by selecting the text and pressing the Delete key; this action deletes the word entirely, and you can bring it back only by using the Undo function. Access the Undo function by choosing Edit ➪ Undo; the Undo option appears at the very top of the menu and the name of the task you last performed appears after the Undo label in the menu. Quick fix: You can also access the Undo option by pressing Ctrl+Z. Another way to delete a block of text is selecting it and then cutting it by pressing Ctrl+X. If you cut the block of text by mistake, use the Undo function or copy the cut text back into its original position by pressing Ctrl+C.
204872-7 ch12.F
8/28/01
12:43 PM
Page 116
116
Saturday Afternoon
Changing Text Colors One advantage of a Web site over print media is that it costs you nothing to present colors on a browser screen. You can change colors of your text to your heart’s content — you can change a word color for emphasis or entire paragraphs, whatever you wish. If you’ve used a Windows word processor, changing a text color will be a familiar process. You can change a text color by following these steps: 1. Select text in your Web page. 2. Click the down arrow to the right of Font Color at the far right of the Formatting button bar. The available font colors appear in the drop-down menu (see Figure 12-2).
Figure 12-2 Font Color displays the font colors you can use. 3. Select one of the colors available in the menu. The selected text appears in the color you selected (readability varies with the color of your text).
204872-7 ch12.F
8/28/01
12:43 PM
Page 117
Session 12—Editing Text and Fonts
117
If none of the 16 standard colors appeal to you, click More Colors from the Font Color drop-down menu. A More Colors window appears, offering an additional 200 Web-safe colors for your text.
Understanding Fonts and Browsers
If you want a font that can be viewed by all visitors, save your text as a graphics file. A graphics file saves the text as it appears in the graphics program you enter the text into. Note
Adding Fonts If you want to add fonts for use in your Web site, you need to add those fonts in Windows. After you add the fonts in Windows, they appear in the Fonts drop-down box in FrontPage 2002, even if you have FrontPage running when you add the fonts. Though most versions of Windows from Windows 95 forward approach the addition of fonts the same way — the only real difference may be the forthcoming Windows XP — you should consult your Windows online help or any Windows books for specific instructions to add fonts on your Windows system.
Part III—Saturday Afternoon Session 12
Like Web colors, not all fonts can appear in different browsers. If a visitor doesn’t have the necessary fonts installed on his or her computer, the fonts usually defer to more standard fonts such as Arial and Times New Roman (or variants such as Helvetica and Times), which most browsers support. However, the change in fonts can result in text appearing in locations that you don’t want them to appear in, which can make your pages look funny to some visitors. If you’re designing a page for a corporate intranet, it’s fairly easy to determine the standard fonts installed on company computers so you can design to that. If the public views your page, determining what fonts everyone has is impossible. The rule of simplicity applies to fonts as it does to colors: keep the number of fonts to a minimum and to common fonts that most people can view (such as Arial, Times New Roman, and Verdana).
204872-7 ch12.F
8/28/01
12:43 PM
Page 118
118
Saturday Afternoon
Changing Fonts and Font Sizes Change fonts and font sizes by following these steps: 1. Open a new Web page if one isn’t open already. 2. Type in some text. 3. Select a word in your text. 4. Click the down arrow to the right of the Fonts drop-down list box. The Fonts drop-down list box appears just above the editing area and to the right of the Styles drop-down list box (see Figure 12-3). The list of available fonts appears.
Figure 12-3 The Fonts drop-down list box 5. Select the font that you want from the list. The selected text changes to the font that you selected. 6. To change the font size, click the down arrow to the right of the Font Size drop-down list box that appears directly to the right of the Fonts drop-down list box.
204872-7 ch12.F
8/28/01
12:43 PM
Page 119
Session 12—Editing Text and Fonts
119
7. Select one of the seven font sizes from the list. The selected text changes to the font size you selected. The number of fonts you have installed on your computer determines the number of fonts that appear in the Fonts drop-down list box. The HTML limit on specific font sizes keeps the number of font sizes in the Font Size drop-down list box to seven.
REVIEW
QUIZ YOURSELF 1. How do you copy a format from text in one part of your Web page to text in another part? 2. How do you move text? 3. How do you change the color of your text? 4. What should you consider when choosing fonts for your Web page? 5. How do you change the font size?
Part III—Saturday Afternoon Session 12
FrontPage 2002 makes it easy for you to manipulate text. You can copy formats, delete and move text, and change fonts, font sizes, and font colors. The Format Painter lets you “paint” the style from one piece of text and apply it to another piece of text elsewhere on your Web page. You can delete and move text with your keyboard or your mouse much like you do with a word processing document. FrontPage lets you apply different colors to selected pieces of text or to entire paragraphs. When you design your page you should be aware that not all browsers and computers may be able to display the fonts that you have on your page, so format your text with care. After you add fonts in Windows, FrontPage adds those fonts automatically to the Fonts drop-down list box. You can change fonts and font sizes using the Fonts and Font Size dropdown list boxes.
204872-7 ch12.F
8/28/01
12:43 PM
Page 120
214872-7 ch13.F
8/28/01
12:43 PM
Page 121
SESSION
13 Designing Graphics
Session Checklist ✔
Reviewing graphic file formats ✔ Using the Drawing Canvas to create graphics ✔ Editing your graphics in Drawing Canvas ✔ Saving a Drawing Canvas image ✔ Showing your stuff with the Photo Gallery
O
ne big feather in the Web’s cap is that you can create graphics that appear on your page in living color. Unfortunately, that feather can droop a bit because a lot of graphics on your page means that there is that much more data to transmit. If a visitor to your page has a slow modem — and there are many people out there who still use 28.8 Kbps modems to dial into the Internet — having lots of graphics on a page can cause long loading times. And that can result in people leaving your site. Fortunately you have some options when you create a graphic, and FrontPage 2002 now lets you create graphics within FrontPage itself instead of relying on other software. The graphics capabilities of FrontPage aren’t very sophisticated, but if you need basic graphics for your site, FrontPage is more than adequate.
214872-7 ch13.F
8/28/01
12:43 PM
Page 122
122
Saturday Afternoon
Understanding Graphic File Formats You have many different graphic file formats to choose from, and the variety can make it hard to figure out which one you need. For the Web, you have two different formats worth remembering: GIF (Graphic Interchange Format) and JPEG (Joint Photographic Experts Group). These two formats have the following benefits: They are standards so all browsers can view them. They don’t take up as much space as other formats. They let you manipulate their settings. For example, with GIF and JPEG formats you can make your graphic interlaced. If you have one or more non-interlaced graphics on your Web page it tells the visitors’ Web browsers that your graphic(s) must load completely before displaying your Web page. And if you have several non-interlaced graphics, that can mean a blank screen on your page — impatient people may not stick around. If you have interlaced graphics on your page, your Web page loads on visitors’ browsers immediately. The graphic appears fuzzy at first, but as your Web page continues to load, the graphic becomes sharper until it finally finishes loading. Interlaced graphics also let your visitors view the text on your page while the graphics load. The GIF format doesn’t give you as much interlacing control over your graphics as the JPEG format does. The JPEG format lets you set the number of passes the Web browser makes when refining the graphic — more passes mean greater quality but a larger graphic. Larger graphics take up more space, which means that the graphic takes longer to load. If you have quite a few graphics on your page, your page may take people quite a long time to load, and you will lose people who don’t have the patience to wait. It is generally a good idea to keep the number of graphics on a page to only a handful at most. Overall, GIF graphics are smaller but JPEG gives you the opportunity to have greater quality. For most purposes, use GIF graphics — they’re smaller files, and the quality is good enough.
Creating Graphics with Drawing Canvas FrontPage contains automatic drawing tools that may be familiar to you if you’ve used any other Microsoft Office products, such as Word. FrontPage 2002 does one
214872-7 ch13.F
8/28/01
12:43 PM
Page 123
Session 13—Designing Graphics
123
better by producing a drawing area in your page called the Drawing Canvas. The Drawing Canvas lets you create a drawing within a specific area. When you finish the drawing, you can move it as a complete object to a different location on your Web page. To create a new drawing in Drawing Canvas, choose Insert ➪ Picture ➪ New Drawing. A new Drawing Canvas area appears on your page (see Figure 13-1). Note
Part III—Saturday Afternoon Session 13
Figure 13-1 A new Drawing Canvas area Within the Drawing Canvas, you can create graphics using the Drawing toolbar at the bottom of the FrontPage window (see Figure 13-2). The Drawing toolbar contains many different tools for completing your graphic, including the Draw and AutoShapes menus for fine-tuning your drawing and adding basic shapes, respectively. You can also add lines and arrows, insert text and graphics, and create shadows and 3-D effects.
214872-7 ch13.F
8/28/01
12:43 PM
Page 124
124
Saturday Afternoon
Figure 13-2 The Drawing toolbar contains many different drawing tools to create graphics in your drawing.
Editing Graphics in Drawing Canvas Editing your drawings in the Drawing Canvas is easy, and it’s also easy for you to edit the Drawing Canvas itself to fit your needs. When you click on a drawing in the Drawing Canvas, little circles or “handles” appear (see Figure 13-3). You can resize the graphic by moving the mouse pointer to one of the handles, clicking the left mouse button, and dragging the mouse to change a particular dimension of your drawing.
214872-7 ch13.F
8/28/01
12:43 PM
Page 125
Session 13—Designing Graphics
125
A little green circular handle appears at the top of the drawing. If you move your mouse pointer over it, the pointer changes to a curled arrow. If you hold down your left mouse button and drag, the drawing rotates (though only the drawing outline rotates until you release the left mouse button). You can also edit the Drawing Canvas itself. Handles appear around the perimeter of the Drawing Canvas area when you click on it (along with a border comprised of dashed lines) so you can resize the window to be large or to fit around the graphic(s) in the area, just as you do with a drawing in the graphic. (You can also click on the handles in the Drawing Canvas window for resizing the Drawing Canvas.) FrontPage also makes other Drawing Canvas editing options available when you choose Format ➪ Drawing Canvas. The Format Drawing Canvas dialog box lets you edit the Drawing Canvas with greater precision (see Figure 13-4).
Part III—Saturday Afternoon Session 13
Figure 13-3 Little circular “handles” appear around the selected drawing.
214872-7 ch13.F
8/28/01
12:43 PM
Page 126
126
Saturday Afternoon
Figure 13-4 The Format Drawing Canvas dialog box From the Format Drawing Canvas dialog box, you can add colors and lines to the Drawing Canvas, change the size and layout options, and include any alternative text to display for your site visitors as the graphics in the Drawing Canvas load in the browser.
Saving Graphics in Drawing Canvas Because the graphics in the Drawing Canvas are part of the Web page, you do not need to perform any special saving procedures — just save the page and you have saved all of the graphics. (Just remember to save often in case you lose control of your computer for some reason.)
Creating a Photo Gallery The Drawing Canvas lets you import graphics into your Web page (something you learn more about in Session 14), but if you have a lot of graphics that you want to show people (such as pictures from your latest road trip), FrontPage 2002 has a
214872-7 ch13.F
8/28/01
12:43 PM
Page 127
Session 13—Designing Graphics
127
new tool for you: the Photo Gallery. The Photo Gallery is an easy way to put together a page full of graphics so visitors see what you have to offer. You can create a new Photo Gallery by following these steps: 1. Click on the point in your Web page where you want the photo gallery to appear. 2. Choose Insert ➪ Picture ➪ New Photo Gallery. The Photo Gallery Properties dialog box appears with the Pictures tab selected so you can add graphics to your new photo gallery (see Figure 13-5).
Part III—Saturday Afternoon Session 13
Figure 13-5 The Photo Gallery Properties dialog box Add files to the gallery by clicking Add and selecting from the pop-up menu that appears whether you want to add a graphic from a file or directly from a scanner or camera. Depending on your choice, you can then add files from the File Open dialog box or from your scanner or camera program, which will start so you can capture graphics. You can add as many graphics as you like into your gallery by clicking Add as many times as you need to.
214872-7 ch13.F
8/28/01
12:43 PM
Page 128
128
Saturday Afternoon
When you finish adding pictures, select the gallery layout by clicking the Layout tab (see Figure 13-6).
Figure 13-6 The Layout tab in the Photo Gallery Properties dialog box Within the Layout tab, select from one of four default layouts and how many pictures to place in a row or column. (Unfortunately, you can’t customize the layouts or how many pictures you can place.) When you finish picking your layout and click OK, your photo gallery appears at the insertion point you specified in your Web page.
REVIEW FrontPage 2002 provides several different methods for adding graphics. One method to add graphics is the Drawing Canvas, which provides drawing tools in the Drawing toolbar for drawing and importing graphics, adding text, and creating effects. You can also add numerous graphics on a Web page as part of the new FrontPage Photo Gallery.
214872-7 ch13.F
8/28/01
12:43 PM
Page 129
Session 13—Designing Graphics
129
QUIZ YOURSELF 1. What are the two common Web graphics formats? 2. What is the Drawing Canvas? 3. What does the Drawing toolbar do? 4. How do you edit the Drawing Canvas properties? 5. What does the Photo Gallery do?
Part III—Saturday Afternoon Session 13
214872-7 ch13.F
8/28/01
12:43 PM
Page 130
224872-7 ch14.F
8/28/01
12:44 PM
Page 131
SESSION
14 Inserting Graphics
Session Checklist ✔
Discovering graphics programs ✔ Using a scanner to get your graphics ✔ Inserting graphics in a Web page ✔ Using horizontal lines to break up a page ✔ Searching out graphics on the Web
I
f you haven’t taken a break yet, now is a good time to take a few minutes to stretch. (Nobody minds, really.)
Okay, now back to it. Session 13 discusses drawing graphics and how to include graphics in a photo gallery, one of FrontPage’s new features. This session continues with graphics, specifically inserting them into your Web page. You have several options to choose from — both within and outside FrontPage.
224872-7 ch14.F
8/28/01
12:44 PM
Page 132
132
Saturday Afternoon
Learning about Graphics Programs Many different programs exist for you to create and manipulate Web graphics. Some programs are designed specifically for Web graphics, and others let you create graphics for all sorts of different media including the Web. Some of the programs include: Adobe Photoshop Jasc Paint Shop Pro Macromedia Flash
CD-ROM
These programs have different advantages, and you may require more than one program for your graphics needs. Trial versions of these programs reside on this book’s accompanying CD so you can see how they operate and make a purchasing decision. (See Appendix B for a full list of what’s on the CD.) These programs let you save graphics in GIF and JPEG formats so you can import them into FrontPage.
Scanning Graphics You can scan graphics into FrontPage or into a graphics program using a scanner connected to your computer. For scanning to be successful, you must install your scanner and the appropriate software — FrontPage (or any other graphics program, for that matter) calls on the scanner software to actually scan your graphic or photo. Import a graphic from a scanner into FrontPage by choosing Insert ➪ Picture ➪ From Scanner or Camera. Note
Your scanner software starts up after you click From Scanner or Camera. If you don’t have scanner software installed or your scanner software won’t start for some reason, you receive an error dialog box alerting you to this problem. Refer to your scanner hardware and software documentation for more information about troubleshooting the problem. If you scan graphics in another software program for editing before you import it into FrontPage, consult the other program documentation for information about scanning.
224872-7 ch14.F
8/28/01
12:44 PM
Page 133
Session 14—Inserting Graphics
133
Inserting Graphics in a Web Page After you have a graphic or photo as an external file or one that you’ve scanned in and saved using another program, you can import your graphic into a Web page. Here’s how: 1. Click a location on your Web page where you want to insert your graphic. If you click on a blank area in your page, the cursor appears in the next empty line in your page. 2. Choose Insert ➪ Picture ➪ From File.
Figure 14-1 The Picture dialog box 3. Click the graphic file that you want to insert. 4. Click Insert. After you click Insert, the picture appears on your page at the location you specified in Step 1 (see Figure 14-2).
Part III—Saturday Afternoon Session 14
The Picture dialog box appears so you can choose a picture to import (see Figure 14-1).
224872-7 ch14.F
8/28/01
12:44 PM
Page 134
134
Saturday Afternoon
Figure 14-2 The graphic appears in your Web page.
Including Horizontal Lines When you want to break up information on a page between a header and the rest of the text or between different blocks of text that have different topics, adding a horizontal line is an effective way to achieve this break. The horizontal line is a standard HTML feature, and FrontPage makes it easy for you to add a horizontal line in your document. You can add a horizontal line in your document by following these steps: 1. Click on a location on your Web page where you want to insert your horizontal line. If you click on a blank area in your page, the cursor appears in the next empty line in your page. 2. Choose Insert ➪ Horizontal Line. After you select Horizontal Line, a horizontal line appears at the insertion point on the page (see Figure 14-3).
224872-7 ch14.F
8/28/01
12:44 PM
Page 135
Session 14—Inserting Graphics
135
You can change the properties of your horizontal line by clicking the line to select it and then choosing Format ➪ Properties. The Horizontal Line Properties dialog box appears (see Figure 14-4) so you can change properties including the size width, height, alignment, color, and style (such as having a dashed line instead of a solid one).
Figure 14-4 The Horizontal Line Properties dialog box
Part III—Saturday Afternoon Session 14
Figure 14-3 The horizontal line appears in your Web page.
224872-7 ch14.F
8/28/01
12:44 PM
Page 136
136
Saturday Afternoon
Finding Graphics on the Web If you’re in need of graphics, check out the Internet — there are plenty of free graphics available in the public domain (or graphics that require you only to say where the graphic came from). Using these graphics files on your site doesn’t infringe any copyrights, but do double-check by reading the fine print on the Web site that contains the graphics file(s) for downloading. Note
Where do you find such graphics? One good location is a search engine or portal such as AltaVista (www.altavista.digital.com), HotBot (www.hotbot.com), Yahoo! (www.yahoo.com), or Go.com (www.go.com). Searching for “Web graphics” results in a lot of different finds; you can also search for specific graphic types (for example, “rose pictures” to find graphics specifically of a rose). Newer versions of browsers, such as Internet Explorer 5.5 and Netscape Navigator 6, contain built-in search engines of their own that are accessible from a button in the browser window. Tip
REVIEW FrontPage can import graphics from a file or directly from a scanner or digital camera. You can use other types of graphics programs for creating, importing, and editing graphics and then import those graphics files into your Web page. Break up graphics and text in your page by adding a horizontal line in between blocks of graphics and/or text. You can also look on the Web via search engines for free graphics you can use on your Web site.
224872-7 ch14.F
8/28/01
12:44 PM
Page 137
Session 14—Inserting Graphics
137
QUIZ YOURSELF 1. Why would you use a graphics program? 2. What happens if your scanner or camera is not installed and you try to import a graphic from a scanner or camera? 3. How do you insert a graphic file into your Web page? 4. How do you add a horizontal line? 5. What is a good way to find free graphics on the Web?
Part III—Saturday Afternoon Session 14
224872-7 ch14.F
8/28/01
12:44 PM
Page 138
234872-7 ch15.F
8/28/01
12:44 PM
Page 139
SESSION
15 Changing Colors and Graphics
Session Checklist ✔
Delving deeply into Web-safe colors ✔ Using colors in a pleasing fashion ✔ Searching out Web-safe colors on the Internet
S
ession 2 discusses Web-safe colors, and though it’s usually not a good thing to repeat a discussion, the issue of Web-safe colors not only bears repeating but also requires some additional information.
Understanding Web-Safe Colors When a monitor displays colors on the screen, it uses the three primary colors of light: red, green, and blue (RGB). The monitor takes different amounts of each color, combines them, and projects them onto a small patch of screen called a pixel. If a pixel must be white, then the monitor displays 100 percent of the red, green, and blue light in that pixel. If a pixel must be black, then the monitor displays zero percent of the red, green, and blue light in that pixel.
234872-7 ch15.F
8/28/01
12:44 PM
Page 140
140
Saturday Afternoon
HTML manages these RGB color combinations by using hexadecimal, or base-16, notation. Hexadecimal notation (which is referred to more often as hex notation) is shorthand for the binary (or base-2) notation that computers use to communicate. Hex notation has a number set from 0 to 15, unlike the 0 to 9 numbers in the decimal (base-10) notation we use every day. Because you can use only one digit in each number place, hex notation uses A through F to denote the numbers 10 through 15 (with A as 10, B as 11, and so on). For example, when you translate the number 60 into a hex number, the hex equivalent is 3C — the digit 3 represents 48 (3 x 16) and the C represents 12, so 48+12 = 60. Remembering the hex number 3C is much easier than remembering 111100 in binary notation.
Note
Harkening back to your days in elementary school, the decimal system has the 1s place, the 10s place, the 100s place, and so on. The 1s place goes from 0 to 9; when you get to 10, you put a 1 in the 10s place and a zero in the 1s place (10). The hexadecimal system works the same way: the 1s place goes from 0 to F; when you get to 16, you put a 1 in the 16s place and a 0 in the 1s place. So 10 hex is the same as 16 decimal. Putting 3 in the 16s place means 16 times 3, or 48. Add that to the C (or 12 decimal) in the 1s place and you get 60 decimal. Whew!
HTML specifies colors by using a six digit hex number, called a color code. The color code begins with a pound sign (#) and then the hex number follows. The sixdigit hex number is actually a combination of three two-digit hex numbers that denote the RGB values. These RGB codes let you set the red, green, and blue values of a color, and the color code combines these values and produces the color. For example, the color code #FF00FF denotes the strongest red (FF), no green (00), and the strongest blue (FF). FF is strongest because F is the highest hexadecimal number, and 0 is the absence of color because it is the lowest hexadecimal number.
Does the Web-safe palette matter? In today’s Microsoft Windows hegemony, you may think that Web-safe colors don’t matter anymore because everyone uses Windows. You may also think that everyone uses Internet Explorer because it comes with Windows, and even if your friend owns a Mac, chances are he’s using Internet Explorer as his browser. So if everyone is using Internet Explorer with either Windows or the Mac OS, why should anyone care about Web-safe colors anymore?
234872-7 ch15.F
8/28/01
12:44 PM
Page 141
Session 15—Changing Colors and Graphics
141
Today the hegemony is not as pure as Microsoft probably would like. There are still a significant number of users who use Netscape Navigator — some because they think it’s a better browser, and others because they don’t like Microsoft. Linux is becoming more popular, and Microsoft does not produce Internet Explorer for that operating system. There are also other browsers available such as Opera and Mosaic.
More on the Web-safe palette
Note
Use Web-safe colors to ensure that your Web site has a uniform look no matter who accesses it. Microsoft and other Web browser creators (not to mention FrontPage) also adhere to the Web-safe color palette.
Using Colors Effectively You may remember a discussion from Session 1 about a site called Web Pages That Suck (www.webpagesthatsuck.com). This site displays poorly designed Web sites and discusses what’s wrong with those sites. One issue that this “hall of shame” site always focuses on is the use of color. Color is the first thing that people notice about your site. If you don’t use color well, at best your site will be a hindrance to visitors and at worst the site will be so uninviting that no one wants to come back except the Web Pages That Suck people.
Part III—Saturday Afternoon Session 15
Finding the right RGB color code is usually a process of trial and error. When Netscape introduced Navigator, it helped simplify things a great deal by establishing a palette of 216 colors that display solid colors on any computer, monitor, and Web browser. Colors other than these 216 exhibit dithering — geometric patterns that appear in the color that tries to give the appearance of more colors. (For example, a red pattern that appears within a block of yellow can make that yellow block look orange.) What happens instead of more colors is that the dithered colors give the appearance of a freakish-looking quilt or tartan. What’s more, a dithered color looks different in different browsers and/or computers.
234872-7 ch15.F
8/28/01
12:44 PM
Page 142
142
Saturday Afternoon
You can apply colors efficiently by following these rules: Complement your colors so that they are pleasing to look at. For example, blue and yellow contrast well because they are dark and light colors, respectively. If you use similar colors like red and orange, each color may be difficult to distinguish. Contrast your colors so that your elements stand out, not wash out. For example, yellow text on a blue background is easy to read. Green text on a blue background is not easy to read. Coordinate your efforts so that your pages look like part of a whole, not several different elements and/or pages jumbled together. Planning for color should be one of the first things you do when planning your Web site. By keeping these rules in mind, you can create an inviting, consistent, and memorable Web site.
Covering the Basics of Color The World Wide Web is a semi-static medium, meaning that you can add live motion and other dynamic elements to your Web pages, but most elements on a Web page are stationary much like a page you read in a magazine. And if you read any magazines, you’ll agree that the ads that probably caught your eye were the ones that had good complementary colors. That is, the colors go together well and make the ad pleasing to look at. The same concept of complementary colors also applies to Web pages. If you have colors for your background, graphics, and text that harmonize with each other, your page is not only more readable but more pleasing to look at, too. And the more pleasing your Web page is to look at, the more visitors (and more returning visitors) your Web site receives. But what are complementary colors, exactly? This discussion gets a lot of its information from Microsoft’s Robert Hess; Hess wrote an article for Microsoft about color information in August 2000. You can find this article online at http:// msdn.microsoft.com/workshop/design/color/hess08142000.asp. (See Figure 15-1.) Even though the figure is in black and white, you can access the site online and view it in full color as you’re reading along. If you’re a Netscape Navigator user, the November 1998 article from Michael Bostock that includes the Color Picker utility contains information about color theory and using color properly. The articles is located at http://home.netscape. com/computing/webbuilding/studio/feature19981111-5.html.
234872-7 ch15.F
8/28/01
12:44 PM
Page 143
Session 15—Changing Colors and Graphics
143
In the strictest sense, complementary colors are two colors that are opposite each other on Microsoft’s Web color wheel created by Robert Hess (refer to Figure 15-1). This Web color wheel contains 12 distinct Web-safe colors that you use when you create a Web page. The wheel also contains the three primary colors (red, green, and blue) that you can combine to create any other color. The secondary colors (magenta, yellow, and cyan) come from the combination of the adjacent primary colors. That is, combining red and blue makes magenta, combining red and green makes yellow, and combining green and blue makes cyan. The other six colors are the tertiary colors created by the combination of the adjacent primary and secondary colors in the wheel. Color relationships come in two forms: analogous and complementary. Analogous colors are those colors directly on either side of a color. Complementary colors appear directly opposite each other on the color wheel. Complementary colors are also called contrast colors because they let the lighter colors stand out more against the darker colors. The most familiar contrasting colors are black and white. Books are printed with black ink on white (or light-colored) pages because it’s easy to read. The same is true for the Web; it’s much easier to see black text on a white background or, for example, a light yellow wallpaper that you use as a background graphic.
Part III—Saturday Afternoon Session 15
Figure 15-1 Color theory from Robert Hess at Microsoft (screen shot reprinted by permission from Microsoft Corporation)
234872-7 ch15.F
8/28/01
12:44 PM
Page 144
144
Saturday Afternoon
Finding Web-Safe Palettes on the Internet Most recent graphics programs you use contain a Web-safe palette within their programs because the Web is so prevalent now that graphics programs can’t afford to not include Web-specific features. But if you use an older graphics program or a program that does not include a Web-safe palette, some Web sites provide Web-safe palettes with colors that you can copy and paste into your graphic. These sites include: Microsoft safety palette information at http://msdn.microsoft.com/ workshop/design/color/colorpick.asp
The Netscape Color Picker at http://home.netscape.com/computing/ webbuilding/studio/feature19981111-5.html
The Visionquest Images ColorLab at www.visibone.com/colorlab These sites give you the color information you need so you can create Web-safe colors for your Web site.
REVIEW The Web-safe color palette is essential for your Web site because it ensures that as many visitors as possible can view your Web site correctly. Using the color palette is not enough, however. You must also apply your colors in a complementary fashion so they’re easy to read and contrast well. Most graphics programs employ Web-safe graphics, but if your program does not, several Web sites can help you.
QUIZ YOURSELF 1. What are Web-safe colors? 2. Why do you use Web-safe colors? 3. Does the Web-safe palette matter anymore? 4. What are the rules for using colors efficiently? 5. What are complementary colors?
244872-7 ch16.F
8/28/01
12:44 PM
Page 145
SESSION
16 Adding Backgrounds and Themes
Session Checklist ✔
Using a background color ✔ Selecting a background image ✔ Finding a theme for your Web pages
T
he standard color for any Web site is the background color that visitors select as their background in their browser and/or operating system. If you want your Web page background to be of a certain color or contain a certain image, you can tell FrontPage the color and/or image that you want. If you want all the pages in your site to have a certain theme, FrontPage contains several different built-in themes for your pages. This session covers both.
Adding a Background Color You can add any background color you want on your Web page. Before you do, however, test your background color with other screen elements, including text and graphics, to ensure that the colors contrast well. Otherwise, your page may cause headaches or may be completely unreadable. Either way, you lose visitors.
244872-7 ch16.F
8/28/01
12:44 PM
Page 146
146
Saturday Afternoon
You can add a background color by following these steps: 1. Choose Format ➪ Background. The Page Properties dialog box appears with the Background tab selected (see Figure 16-1).
Figure 16-1 The Page Properties dialog box 2. Click the down arrow to the right of the Background field. The color to the immediate left of the down arrow states that the page level is Automatic, meaning the page is your default Windows background color. After you click the down arrow, the color menu appears. 3. Select the color that you want the background to have from the menu. The color you select appears to the right of the Background label. 4. Click OK. The page background changes to the color you selected. If the color you want doesn’t appear in the color menu, you can select more colors by clicking More Colors in the color menu. When you do, the More Colors dialog box appears. Select from one of the Web-safe colors in the FrontPage palette (see Figure 16-2).
244872-7 ch16.F
8/28/01
12:44 PM
Page 147
Session 16—Adding Backgrounds and Themes
147
Inserting a Background Image If you would rather insert a background image on your Web page, FrontPage makes it very easy for you to do so — and you see the results of your work immediately. As with colors, test how all the other elements in your page mesh with your background color before you release your Web site to the public. Note
To insert a background image on your Web page: 1. Choose Format ➪ Background. The Page Properties dialog box appears with the Background tab selected. 2. Put a check in the Background Picture check box. 3. Click Browse (see Figure 16-3). The Select Background Picture dialog box appears. 4. Select the picture you want to use.
Part III—Saturday Afternoon Session 16
Figure 16-2 The More Colors dialog box
244872-7 ch16.F
8/28/01
12:44 PM
Page 148
148
Saturday Afternoon
Figure 16-3 Click Browse to browse for the picture you want to use. When you select your picture, the location of the picture appears in the field to the left of the Browse button. 5. Click OK. After you click OK, the graphic appears on the page. If the graphic is too small to fill the entire page, FrontPage tiles the graphic across the screen (see Figure 16-4). Unfortunately, you can’t center the graphic on your screen as you can do on your Windows desktop. A large graphic that’s too big for your screen results in the graphic getting cut off on the right and/or bottom edges of your page. Chances are that if you can’t see the entire graphic on your page, your visitors won’t be able to, either — which can lessen the impact of having a background graphic on your screen. If you decide that you don’t like the graphic and want to remove it, open the Page Properties window again, uncheck the Background Picture check box, and click OK. If you want to change the picture, you can select a new picture as you did in Step 3.
244872-7 ch16.F
8/28/01
12:44 PM
Page 149
Session 16—Adding Backgrounds and Themes
149
Selecting a Theme for Your Web Pages If you’ve ever used Microsoft PowerPoint, you know that it contains themes. Themes are basic templates that you can use to build your presentation or in the case of FrontPage, build your Web site. FrontPage contains nearly two dozen default themes that you can apply to your current page or to all the pages in your Web site. To apply a theme: 1. Choose Format ➪ Theme. The Themes dialog box appears (see Figure 16-5).
Part III—Saturday Afternoon Session 16
Figure 16-4 If a graphic is too small to fill the screen, it appears as tiles on your Web page.
244872-7 ch16.F
8/28/01
12:44 PM
Page 150
150
Saturday Afternoon
Figure 16-5 The Themes dialog box 2. If you want to apply the theme to all the pages in your Web site, click the All Pages radio button to select it. Otherwise you apply the theme to the current page only. 3. Select a theme from the themes list on the left. The theme sample appears in the Sample of Theme window to the right of the list.
Note
You can also select (No Theme) if you want to remove a theme or you can select (Install Additional Themes) if you want to import a theme file. When you open the Themes window the default selection is (No Theme).
4. Click OK. The background appears on the Web page with the styles applied (to either the one Web page or all the pages on your Web site, depending on your choice in Step 2). See Figure 16-6.
244872-7 ch16.F
8/28/01
12:44 PM
Page 151
Session 16—Adding Backgrounds and Themes
151
If none of the themes appeals to you, you can install additional themes from the Microsoft Office XP CD-ROM by clicking on the (Install Additional Themes) option at the top of the themes list. Note
REVIEW FrontPage gives you several choices for background colors and graphics to add to your Web page and your entire Web site. You can add background colors and graphics from the Page Properties dialog box. If you would rather give your page a consistent design theme, you can apply built-in FrontPage themes to one or all pages in your Web site.
Part III—Saturday Afternoon Session 16
Figure 16-6 The theme appears on the site with the theme styles applied to your page.
244872-7 ch16.F
8/28/01
12:44 PM
Page 152
152
Saturday Afternoon
QUIZ YOURSELF 1. Why should you test your background color with other elements in your Web page? 2. What happens if your background graphic is smaller than your Web page? 3. How do you add a theme? 4. How do you add a theme that is not in the themes list?
254872-7 PR3.F
8/28/01
12:44 PM
Page 153
PART
III # Saturday Afternoon 1. Why would you want to link to other pages or Web sites? 2. How do you link to another Web page in your Web? 3. What is a bookmark? 4. How do you link to another Web site? 5. How do you link to an e-mail address? 6. How do you copy a format from text in one part of your Web page to text in another part? 7. How do you move text? 8. How do you change the color of your text? 9. What should you consider when choosing fonts for your Web page? 10. How do you change the font size? 11. What are the two common Web graphics formats? 12. What is the Drawing Canvas? 13. What does the Drawing Toolbar do? 14. How do you edit the Drawing Canvas properties? 15. What does the Photo Gallery do? 16. Why would you use a graphics program? 17. What happens if your scanner or camera is not installed, and you try to import a graphic from a scanner or camera? 18. How do you insert a graphic file into your Web page? 19. How do you add a horizontal line?
254872-7 PR3.F
8/28/01
12:44 PM
Page 154
154
Part III—Saturday Afternoon Part Review
20. What is a good way to find free graphics on the Web? 21. What are Web-safe colors? 22. Why do you use Web-safe colors? 23. Does the Web-safe palette matter anymore? 24. What are the rules for using colors efficiently? 25. What are complementary colors? 26. Why should you test your background color with other elements in your Web page? 27. What happens if your background graphic is smaller than your Web page? 28. How do you add a theme? 29. How do you add a theme that is not in the themes list?
254872-7 PR3.F
8/28/01
12:44 PM
Page 155
264872-7 PO4.F
8/28/01
12:44 PM
Page 156
PART
IV Saturday Evening
Session 17 Creating Multimedia Session 18 Drawing Tables Session 19 Adding Table Elements Session 20 Inserting Forms
274872-7 ch17.F
8/28/01
12:44 PM
Page 157
SESSION
17 Creating Multimedia
Session Checklist ✔
Going over the different multimedia types ✔ Inserting sound and video ✔ Adding streaming video
T
he biggest advantage of the Web is that you can combine both static (text and still graphics) and non-static (audio, video, and animated graphic) elements; the latter element type is called multimedia. Multimedia is an amalgamation of the words “multiple media,” meaning that you can embed not only pictures and text on your page but also animated graphics, video clips, and sound. Multimedia provides the best of all worlds, and FrontPage embraces this by letting you easily import sound, video, and streaming video into your Web pages.
Understanding Multimedia Types Obviously, with multimedia meaning multiple media, several different media comprise the multimedia category. The following sections cover these different types of media.
274872-7 ch17.F
8/28/01
12:44 PM
Page 158
158
Saturday Evening
Text Text is a static medium that has been around since the invention of writing. Text is a staple of any Web page. Even if you have only one graphic on your page, chances are that graphic includes text — there is no faster way of communicating with your visitor.
Graphics Graphics are static illustrations that appear on your page and help communicate your message to visitors. You can use graphics to complement text, as a logo for your company business, and to serve as a menu from which visitors can select options.
Animated graphics Animated graphics contain several different graphics in the same file that “move” from one graphic to another very quickly just as scenes on a roll of film do. This animation makes animated graphics a non-static medium. These animated graphics come in GIF89 (Graphic Interchange Format 89) format. Animated graphics are very basic — you can set up FrontPage so they run again and again in your Web page, but you have to create these graphics in another program such as Macromedia Flash.
Sound Sound is another non-static medium where you can play and record sounds and music. The most common kind of sound file available for Windows is the .WAV file. The .WAV files is the standard file for Windows sounds, and you can use other programs — such as the Windows Media Player — for playing .WAV files. Other sound formats include .AU and .AIF. You can also record music for later playing in a MIDI (Musical Instrument Digital Interface) format file.
Video Two major video formats exist: MPEG and QuickTime. MPEG, or Moving Picture Expert Group, is the standard format for streaming video. You can view MPEG files using the Windows Media Player that comes with Windows (or you can download it from Microsoft’s Web site). Apple Computer produces QuickTime, which is also a popular streaming video format for both Windows and Mac OS platforms.
274872-7 ch17.F
8/28/01
12:44 PM
Page 159
Session 17—Creating Multimedia
159
Adding Sound and Video So now that you know about all the different multimedia types, how do you include sound and video into your Web site? FrontPage makes it easy for you to add background audio and video into your Web page. Don’t worry — you learn how to include animated graphics into your Web site tomorrow morning in Session 24. Cross-Ref
Inserting sound Add background sound to your Web page by following these steps: 1. Choose File ➪ Properties. The Page Properties dialog box appears with the General tab selected (see Figure 17-1). Part IV—Saturday Evening Session 17
Figure 17-1 The Page Properties dialog box
274872-7 ch17.F
8/28/01
12:44 PM
Page 160
160
Saturday Evening
2. In the Background Sound area, click Browse. The Background Sound dialog box appears. 3. In the Background Sound dialog box (see Figure 17-2), select the background sound you want to use and then click Open.
Figure 17-2 The Background Sound dialog box 4. With the location of your sound in the Location field, click OK in the Page Properties window.
Cross-Ref
Note
When you preview your Web page in Preview mode (see Session 5) or in a browser (see Session 30), the background sound will play.
The FrontPage default is for the music to keep playing in the background as a continuous loop. You can change the loop by checking the Forever check box that appears under the Location field and then changing the number of times the sound loops in the Loop field.
274872-7 ch17.F
8/28/01
12:44 PM
Page 161
Session 17—Creating Multimedia
161
Inserting video You can add a video to your Web page by following these steps: 1. Move the mouse pointer to the point on your page (usually the start of the first blank line) where you want to place the video. 2. Choose Insert ➪ Picture ➪ Video. The Video dialog box appears (see Figure 17-3).
Note
The Video dialog box automatically displays all files in each directory. You can narrow your search by clicking the down arrow to the right of the Files of Type field to determine what type of video files you want the window to display.
Part IV—Saturday Evening Session 17
Figure 17-3 The Video dialog box 3. Select the video that you want to add and then click Open. After you click Open, the Video dialog box disappears, and the video appears at the insertion point in your Web page (see Figure 17-4). When you preview your Web page in Preview mode or in a browser, the video runs with any accompanying sound embedded in the video file.
274872-7 ch17.F
8/28/01
12:44 PM
Page 162
162
Saturday Evening
Figure 17-4 The video appears in your Web page.
Adding Streaming Video If you’ve ever viewed a movie trailer from one of the movie studio Web sites (or a related site such as Lucasfilm’s Star Wars site) then you have seen streaming video. Streaming video players including Apple’s QuickTime, Real Networks’ RealPlayer, and Microsoft’s Windows Media download the video into a browser plug-in (you can download these for free from their respective manufacturers). Regular video requires you to wait until the entire video downloads before you can view it. With streaming video, more and more of the video appears for you to view as the video loads into your streaming video player. If you just can’t wait for an entire video to download you can see what has been downloaded so far by clicking Play in the streaming video player — even as the video file transfer is in progress. Fortunately, FrontPage supports streaming video formats so you don’t have to do anything differently than if you added a video in a different format.
274872-7 ch17.F
8/28/01
12:44 PM
Page 163
Session 17—Creating Multimedia
163
So what format do you use? If your audience uses mostly Windows or Mac OS and recent browsers, media that run on QuickTime, RealPlayer, or Windows Media work just fine. If your audience uses Linux, consult your browser documentation for more information. If some people use older browsers, they may not be able to view your streaming video file. If you provide one or more streaming video formats on your Web site, provide a link to the manufacturer’s Web site so people who don’t have the browser plug-in can download it. Visit the manufacturer’s site so you can get a graphic that links to the site’s streaming video plug-in download page from your Web page.
REVIEW
QUIZ YOURSELF 1. What are the static multimedia types? 2. What are the non-static multimedia types? 3. How can you set the number of audio loops on a page? 4. How do you play a video on your Web page? 5. What is the difference between video and streaming video?
Part IV—Saturday Evening Session 17
You can add several different media types in your Web page: text, graphics, animated graphics, sound, and video. These multimedia types can be static like text and graphics and non-static like sound and video. Non-static multimedia types such as text and graphics provide information that does not alter over time. FrontPage recognizes many different audio and video types (including streaming video) so you can add audio that plays when people view your Web page or video (and embedded audio) that people can view as they view your page.
274872-7 ch17.F
8/28/01
12:44 PM
Page 164
284872-7 ch18.F
8/28/01
12:44 PM
Page 165
SESSION
18 Drawing Tables
Session Checklist ✔
Creating a table from scratch ✔ Drawing a table ✔ Using a FrontPage template to add a table ✔ Using the Tables toolbar to edit your table ✔ Changing the row size and alignment ✔ Adding table rows and columns ✔ Merging and splitting table cells ✔ Deleting table cells ✔ Using cell padding and spacing to format your table
A
table is a way to organize page elements in rows and columns. Creating a table in FrontPage is just as easy as creating a table in Word. Though you can use tables in FrontPage just as you use them in Word, HTML tables have another hidden benefit.
284872-7 ch18.F
8/28/01
12:44 PM
Page 166
166
Saturday Evening
If you want to limit the width of your page to the width of a VGA screen — that is, 640 pixels — so anyone can view it, create a table that is 620 pixels wide so all the elements in your Web pages fit.
Note
I know I said to create a 620-pixel wide table on a 640-pixel wide screen. That isn’t a typo. Web pages don’t display the same way on all monitors, so it’s better to be safe than sorry and design your table to be a bit smaller so all monitors can view your page in its entirety.
You can also create a table so all your elements appear in the center of your screen. In sum, placing your Web elements within a table lets you have greater control over their placement.
Creating a Table from Scratch You have to first create the table. In FrontPage, you can create a table from scratch in one of three ways: from the button bar, from the menu, or by drawing the table yourself.
Creating a table from the button bar Create a table from the button bar by following these steps: 1. Click Table in the button bar. A pop-up window appears that shows a mock table of four rows by five columns. 2. Move the mouse pointer over the cells in the pop-up window. As you move the mouse pointer over the cells, FrontPage shows the number of row and column cells in a table for that selection (see Figure 18-1).
284872-7 ch18.F
8/28/01
12:44 PM
Page 167
Session 18—Drawing Tables
167
3. To add more rows and columns than what’s currently available, hold down the left mouse button while dragging up and down in the pop-up window. The window expands automatically as you add more rows and/or columns. 4. When you finish selecting the number of rows and columns in your table, click the left mouse button if you have less than four rows and five columns or release the left mouse button if you have more than four rows and five columns. After you create the table, it appears on your Web page (see Figure 18-2).
Part IV—Saturday Evening Session 18
Figure 18-1 The Table pop-up menu lets you determine how many rows and columns you want in your table.
284872-7 ch18.F
8/28/01
12:44 PM
Page 168
168
Saturday Evening
Figure 18-2 The table appears on your Web page.
Creating a table from the menu You can add a table from the menu by following these steps: 1. Choose Table ➪ Insert ➪ Table. The Insert Table dialog box appears (see Figure 18-3). 2. Enter the number of rows and columns in the Rows and Columns fields. 3. Click OK. The table appears in the Web page.
284872-7 ch18.F
8/28/01
12:44 PM
Page 169
Session 18—Drawing Tables
169
Figure 18-3 The Insert Table dialog box
A third way that you can create a table is by drawing a table in your page. Here’s how: 1. Choose Table ➪ Draw Tables. The Tables toolbar appears. 2. Click the Pencil button in the Tables toolbar. (You can learn more about the tools in the Tables toolbar in the “Editing Tables Using the Tables Toolbar” section of this session.) 3. Click on a point in your Web page, hold down the left mouse button, and drag the pencil tool across the screen (see Figure 18-4). A dashed box appears as you drag the tool across the screen so you can determine how big your table will be.
Part IV—Saturday Evening Session 18
Drawing a table in a Web page
284872-7 ch18.F
8/28/01
12:45 PM
Page 170
170
Saturday Evening
Figure 18-4 Draw a new table by dragging the pencil tool across the screen. The one-cell table appears on your Web page at the next insertion point on your Web page.
Adding a Table from a FrontPage Template FrontPage contains over a dozen different templates that are based on tables. If you would rather not go through the trouble of creating tables, these templates may be what you’re looking for. You can add a FrontPage template by following these steps: 1. Click Page Templates in the New Page or Web window at the right side of the FrontPage window.
284872-7 ch18.F
8/28/01
12:45 PM
Page 171
Session 18—Drawing Tables
171
If the New Page or Web window isn’t showing, choose View ➪ Task Pane. Note
2. Look for the templates that include the number of columns in the template name. These templates contain tables in one, two, or three columns (see Figure 18-5).
Part IV—Saturday Evening Session 18
Figure 18-5 The Page Templates window contains templates with one, two, or three column tables. 3. Click OK. The template appears with text (albeit fake Latin text) in the table (see Figure 18-6), which you can remove and replace with your own text.
284872-7 ch18.F
8/28/01
12:45 PM
Page 172
172
Saturday Evening
Figure 18-6 The Two-Column Body with Content and Sidebar template
Editing Tables Using the Tables Toolbar When you create a new table, the Tables toolbar appears in the FrontPage window. The Tables toolbar contains all the tools you need to edit your tables (see Figure 18-7).
Figure 18-7 The Tables toolbar The Tables toolbar has two rows of buttons, and those buttons starting with the top row from left to right are as follows:
284872-7 ch18.F
8/28/01
12:45 PM
Page 173
Session 18—Drawing Tables
173
Top Row Draw Table: Draws a table on your Web page as described earlier in this session. Eraser: Erases table rows and/or columns. Insert Rows: Inserts a number of rows above the currently selected row that is the same as the number of rows selected in your table. For example, if you select two rows in your table, FrontPage adds two rows above the selected rows. If you click on one cell in a table row, FrontPage adds only one row above the selected row. Insert Columns: Inserts a number of columns to the left of the currently selected column that is the same as the number of columns selected in your table. For example, if you select two columns in your table FrontPage, adds two columns to the left of the selected columns. If you click on one cell in a table row, FrontPage adds only one column to the left of the selected column. Delete Cells: Deletes the selected field.
Align Top: Aligns the text in the cell to the top of the cell. Align Middle: Aligns the text in the cell to the middle of the cell. Align Bottom: Aligns the text in the cell to the bottom of the cell. Bottom Row Distribute Rows Evenly: Resizes all the rows in the table to the size of the largest cell. Distribute Columns Evenly: Resizes all the columns in the table to the size of the widest column. AutoFit to Contents: Resizes all columns in the table to fit to the longest string of text in a column cell. Fill Color: Fills the cell with a background color or changes the color of selected text in a cell. Table AutoFormat Combo drop-down list box: Applies a selected table format template from the list to the table. Table AutoFormat: Opens the Table AutoFormat view so you can preview the table format templates before applying a template to the table.
Part IV—Saturday Evening Session 18
Merge Cells: Merges two or more selected cells. Split Cells: Splits a cell into rows or columns.
284872-7 ch18.F
8/28/01
12:45 PM
Page 174
174
Saturday Evening
Fill Down: Copies the contents and format of the topmost selected table cell to selected cells below it. Fill Right: Copies the contents and format of the leftmost selected table cell to selected cells to the right of the leftmost selected cell. You can edit tables using the Tables toolbar by selecting a row in your table and then performing a task by clicking the appropriate Tables toolbar buttons. For example, you can click on a row in the table and then add a row below the selected row by clicking Insert Rows.
Changing the Row Size and Alignment FrontPage makes it easy for you to change the size of rows in your table as well as the table alignment so the table appears on the screen either flush left, flush right, or centered.
Changing row height You can change the row size in one of four ways: Move the mouse pointer to the area in between rows; the mouse pointer changes to a double-headed arrow. Hold down the left mouse button and move the pointer up and down; the row grows or shrinks in size. Select two or more rows in the table and then click Distribute Rows Evenly in the Tables toolbar. The rows automatically resize to the same height. Right-click the row you want to resize and then click Cell Properties from the pop-up menu. The Cell Properties dialog box appears (see Figure 18-8). You can check the Specify height check box and then enter the height in pixels directly underneath the check box. Choose Table ➪ Table Properties option, and then select Cell in the side menu that appears. After you select Cell, the Cell Properties table appears so you can set the row height.
284872-7 ch18.F
8/28/01
12:45 PM
Page 175
Session 18—Drawing Tables
175
Figure 18-8 Set the row height in the Cell Properties dialog box.
You can change the table alignment in one of two ways: Right-click on a cell in your table and then select Table Properties in the pop-up menu. The Table Properties dialog box looks exactly like the Cell Properties dialog box. You can change the alignment by clicking the down arrow to the right of the Alignment drop-down box and selecting an alignment. Choose Table ➪ Table Properties, and then select Table in the side menu that appears. After you select Cell, the Cell Properties table appears so you can set the row height.
Adding Table Rows and Columns FrontPage gives you the ability to add rows and columns no matter how you inserted the table. You can add rows and columns in one of two ways: in the menu or from the Tables toolbar.
Part IV—Saturday Evening Session 18
Changing the table alignment
284872-7 ch18.F
8/28/01
12:45 PM
Page 176
176
Saturday Evening
Adding rows and columns from the menu Add a row or column in the menu by following these steps: 1. Click a cell in your table to select it. You will add a row above or below, or a column to the left or right, of the selected cell depending upon your choices later in these steps. 2. Choose Table ➪ Insert ➪ Rows or Columns. The Insert Rows or Columns dialog box appears (see Figure 18-9).
Figure 18-9 The Insert Rows or Columns dialog box 3. Select whether you want rows or columns, and then select the number you want added from the Number of Rows drop-down list. 4. In the Location area of the dialog box, select either Above Selection or Below Selection to determine where the rows or columns are placed. 5. Click OK. The row(s) or column(s) appear in their proper location.
Adding rows and columns from the Tables toolbar Add a row or column in the menu by following these steps: 1. Click a cell in your table to select it. You will add a row above or below, or a column to the left or right, of the selected cell. 2. Click either the Insert Rows or Insert Columns in the Tables toolbar. When you do, a row appears above the selected cell or a column appears to the left of the selected cell.
284872-7 ch18.F
8/28/01
12:45 PM
Page 177
Session 18—Drawing Tables
177
Merging and Splitting Table Cells You can merge two or more cells into one big cell. Conversely, if you decide that you want smaller cells in your table you can split one or more cells into two or more rows or columns.
Merging cells You can merge cells by following these steps: 1. Select the cells that you want to merge. (Make the selection by holding down the left mouse button on a cell and dragging until all the cells you want have been selected.) 2. Click Merge Cells in the Tables toolbar. An alternate method to merge cells is to choose Table ➪ Merge Cells.
The merged cells appear as one contiguous cell. If you have text in the cells, FrontPage merges the text into the cell with the text in the top row appearing at the top of the merged row; if you have columns, the text in the left-most column appears before the text in all other columns.
Splitting cells You can split cells by following these steps: 1. Select the cell(s) that you want to split. 2. Click Split Cells in the Tables toolbar. The Split Cells dialog box appears (see Figure 18-10).
Part IV—Saturday Evening Session 18
Note
284872-7 ch18.F
8/28/01
12:45 PM
Page 178
178
Saturday Evening
Figure 18-10 The Split Cells dialog box 3. Click the appropriate radio button to select splitting the cell into rows or columns. 4. Select how many rows or columns you want to split the cell into. The default number is two. 5. Click OK. The split cell appears below or to the right of the selected cell depending on if you split into rows or columns, respectively. If you have text in the split cell the text stays in the primary cell (that is, the first row or column in your newly split cell).
Deleting Table Cells FrontPage says that you can delete table cells, but that is a bit deceiving. You can only delete all the cells from a row or from a column. If you have a one-column, one-row table (thereby having only one cell) then you can delete that individual cell. You can also delete rows and columns from your table if you want. Delete table cells by following these steps: 1. Select the row or column cells that you want to delete. 2. Click Delete Cells in the Tables toolbar. An alternate method is to choose Tables ➪ Delete Cells.
Note
The cells disappear from your table, and you can go about your business.
284872-7 ch18.F
8/28/01
12:45 PM
Page 179
Session 18—Drawing Tables
179
Formatting Table Cell Padding and Spacing FrontPage lets you determine how much space appears between the cells in your table (cell padding) and the distance between text or graphics in your table and the edge of the cell (spacing). You can change the cell padding and spacing by following these steps: 1. Click the cell in your table that you want to format to select it. 2. Choose Table ➪ Table Properties ➪ Table. An alternate method is to right-click the cell and select Table Properties from the pop-up menu. Note
Figure 18-11 Change the cell padding and spacing in the Cell and Cell Spacing fields in the Table Properties window.
Part IV—Saturday Evening Session 18
3. In the Table Properties dialog box that appears, select the cell padding value in pixels in the Cell field and the cell spacing value in pixels in the Cell spacing field (see Figure 18-11).
284872-7 ch18.F
8/28/01
12:45 PM
Page 180
180
Saturday Evening
4. Click OK. After you click OK, the cell padding and/or spacing changes to your specifications. Unfortunately, you cannot change the cell padding or spacing in an individual cell — cell padding and spacing affect all the cells in your table.
REVIEW FrontPage contains many different tools for adding and modifying tables in your Web page. After you create a table, you can add and delete rows and columns, merge and split cells, change the size of rows, and change the table alignment. You can perform these tasks using the Tables toolbar or through the FrontPage Table menu option.
QUIZ YOURSELF 1. What are the advantages to using tables? 2. How do you draw a table? 3. How do you set the table alignment? 4. How do you merge cells? 5. Why do you pad and space cells?
294872-7 ch19.F
8/28/01
12:45 PM
Page 181
SESSION
19 Adding Table Elements
Session Checklist ✔
Adding text to a table ✔ Creating table headings ✔ Adding table captions ✔ Inserting images in a table ✔ Formatting text and images in a table ✔ Using background colors and images in your table
N
ow that you’ve learned to set up your table (Session 18) you can start putting information in that table. You can add text and graphics in your table just as you would in a Web page, and you can even add background colors and images to set your table apart from the rest of your Web page.
Inserting Text in a Table Adding text to a table is very simple — you just select a cell within the table and the blinking cursor appears so you can type in your text. The text is automatically left-justified, though you can change that just as you change the text alignment
294872-7 ch19.F
8/28/01
12:45 PM
Page 182
182
Saturday Evening
on a Web page. The text wraps to the next line in the cell automatically, and the cell grows longer as you add more text. You can add text in another cell by clicking on that cell and typing in text.
Creating Table Headings After you add your text to a cell, you may want to have a row that contains a heading. A heading describes all the text that appears in your table. For example, if your table cells contain stories about your dogs, a heading could be “My Dogs” (see Figure 19-1).
Figure 19-1 The heading cell appears above the table. Follow these steps to create table headings: 1. Insert a heading row above the top row in your table. If your heading row has more than one column in it, merge the cells. See Session 18 for details on adding rows and merging cells. Cross-Ref
294872-7 ch19.F
8/28/01
12:45 PM
Page 183
Session 19—Adding Table Elements
183
2. Enter the new text in the heading row. 3. Select one of the six heading styles in the Styles drop-down list box. After you select a style, the heading appears in the style you selected. Later in this session you see how to format text in a table so you can change the font size and style of your heading if you don’t like the predetermined heading styles.
Adding Table Captions If you have more than one table or your table contains a lot of information, you want to give it a caption — text that appears next to but outside of the table and identifies the table number and what the table does. Captions can also provide information for one or more table cells within your table. To add a table caption: 1. Choose Table ➪ Insert ➪ Caption. 2. Type the identifying text.
Figure 19-2 A caption identifies the table.
Part IV—Saturday Evening Session 19
The caption appears above the table (see Figure 19-2).
294872-7 ch19.F
8/28/01
12:45 PM
Page 184
184
Saturday Evening
Placing Images in a Table Placing images in a table is as easy as placing images anywhere else in your Web page. To place an image in a table: 1. Click the cell you want to place the image in. 2. Choose Insert ➪ Picture. 3. Select the type of picture — from clip art, from a file, or from another source such as from a scanner or camera — that you want to place in the table. After you select the image, it appears in the table cell you specified (see Figure 19-3).
Figure 19-3 The image appears in the table cell you specify.
294872-7 ch19.F
8/28/01
12:45 PM
Page 185
Session 19—Adding Table Elements
185
Formatting Text and Images in a Table After you add text and graphic images to a table, you can format them to your liking. Format text in a table just as you do anywhere else in your Web page. For example: If you change the alignment of the text from left-justified to centered, the text appears centered within the table cell. You can select the text and change it to a particular font or size, and the text changes within the confines of the table cell. If the text is too large for the table cell, it wraps to the next line (and becomes a little harder to read in the process). You can remedy this by either shrinking the size of the text or lengthening the width of the cell.
1. Click the graphic. Graphic boxes, or handles, appear around the perimeter of the graphic. 2. Move your mouse pointer to the lower-right handle, click and hold down your left mouse button, and then hold down your Shift key. 3. Move the mouse to resize the graphic to the size you want. The Shift key ensures that the proportions of your graphic remain the same (and don’t get stretched too wide or too long).
Adding Table Background Colors and Images You can add a background color or image to your table if you want to set your table apart from the rest of your Web page.
Adding a background color Add a background color to your table by following these steps:
Part IV—Saturday Evening Session 19
The same holds true for graphic images as well. If the graphic image you place in a cell is larger than the table cell, the table cell expands to hold the graphic. You can shrink the size of the table cell to its former size by shrinking the size of the graphic. To shrink the graphic, follow these steps:
294872-7 ch19.F
8/28/01
12:45 PM
Page 186
186
Saturday Evening
1. Choose Table ➪ Table Properties ➪ Table. The Table Properties dialog box appears. 2. Click the down arrow to the right of the Automatic entry in the Color drop-down list box (see Figure 19-4). The color menu appears.
Figure 19-4 Select the color from the Color drop-down list box. 3. Select a standard color from the menu. If you want a different color, click More Colors. 4. Click OK. The entire table contains your background color.
Adding a background image Add a background image to your table by following these steps: 1. Choose Table ➪ Table Properties ➪ Table. The Table Properties dialog box appears.
294872-7 ch19.F
8/28/01
12:45 PM
Page 187
Session 19—Adding Table Elements
187
2. Check the Use Background Picture check box. 3. Browse for an image by clicking Browse (see Figure 19-5). The Select Background Image dialog box appears.
4. Select an image from the Select Background Image dialog box. 5. Click Open. The file location of the image appears to the left of the Browse button. 6. Click OK. The image appears in the window. If the image is smaller than the width and/or height of the table, FrontPage tiles those images within the table. Unfortunately, you can’t center just one graphic within the table.
Part IV—Saturday Evening Session 19
Figure 19-5 Select the background picture in the Select Background Picture dialog box.
294872-7 ch19.F
8/28/01
12:45 PM
Page 188
188
Saturday Evening
REVIEW After you set up your table, you can add text and graphic images in your table just as you do elsewhere in your Web page. The size of your text and graphics can affect the size of cells in your table and, in the case of text, vice versa because lines of text will wrap in a cell, thus making the text smaller. You can also add a background color or image to your table if you want to set your table apart from the rest of your Web page.
QUIZ YOURSELF 1. How do you create a table heading? 2. How do you add a table caption? 3. What are some formatting issues with text and graphics in a table? 4. How do you add a background color? 5. How do you add a background image?
304872-7 ch20.F
8/28/01
12:45 PM
Page 189
SESSION
20 Inserting Forms
Session Checklist ✔
Checking out forms ✔ Using the Form Wizard ✔ Editing form fields and option buttons ✔ Inserting hidden fields ✔ Adding and editing form buttons ✔ Using images as form buttons ✔ Designing a form handler ✔ Using the confirmation form ✔ Designing a search form
Y
ou may want your site to be interactive — that is, receive information from your visitors. They can send their information to a database or as an e-mail message to you or someone else by using a form, an HTML function that FrontPage lets you program far more easily than entering HTML code.
304872-7 ch20.F
8/28/01
12:45 PM
Page 190
190
Saturday Evening
Understanding Forms So what are forms, anyway? An HTML form mimics a paper form as much as possible — you have fields to fill out and check boxes to check. HTML forms also include drop-down list boxes, radio buttons, and text boxes for entering comments. Finally, you can add buttons at the bottom of the form to submit the form to an e-mail address or other location (such as a database) or reset the form to its default values in case your visitor wants to change information in the form. Forms appear within a dashed box when you edit it in FrontPage Normal mode. The dashed box sets the form apart from the rest of your HTML page and also lets you change the form. You can enter a form in one of two ways: from the menu or with the Form Wizard. Using the Form Wizard is much easier than using the menu, so we’ll start with that.
Creating a Form in the Form Wizard Create a form in the Form Wizard by following these steps: 1. Choose File ➪ New ➪ New Page or Web. The New Page or Web dialog box appears to the right side of the FrontPage window. 2. Click the Page Templates link in the New Page or Web window. The Page Templates dialog box appears. 3. Select the Form Page Wizard template from the list. 4. Click OK. The Form Page Wizard dialog box appears (see Figure 20-1). 5. Start the wizard by clicking Next. 6. Select the type of input that you want to collect in your form. You can select from over a dozen options including contact information and ordering information (see Figure 20-2). The wizard presents the information in the form of a question or statement. This example selects contact information. After you select the input type, click Next.
304872-7 ch20.F
8/28/01
12:45 PM
Page 191
Session 20—Inserting Forms
Figure 20-2 Enter the type of input you want to collect.
Part IV—Saturday Evening Session 20
Figure 20-1 The Form Page Wizard dialog box
191
304872-7 ch20.F
8/28/01
12:45 PM
Page 192
192
Saturday Evening
7. Enter the types of contact information you want to add into the form (see Figure 20-3). When you finish entering the contact information, click Next.
Figure 20-3 Add the information types that will appear in your form. 8. The next page in the wizard asks you if you want to collect any other input types for the form. If you do, click Add. For this example, don’t add any additional questions — just click Next. 9. You can determine how you want the questions or statements in the form to appear, add a table of contents, and align form fields in the next wizard page (see Figure 20-4). Leave the default choices as they are and click Next. 10. Determine where you want all the form information to go — into a Web page, to a file, or to a custom script such as a CGI script (see Figure 20-5). You create custom scripts that add to your Web page’s functionality in a program outside FrontPage. You can also save the name of the results file. Leave the default choices as they are and click Next.
304872-7 ch20.F
8/28/01
12:45 PM
Page 193
Session 20—Inserting Forms
193
Figure 20-5 You can determine the output options for when the visitor submits the form.
Part IV—Saturday Evening Session 20
Figure 20-4 Determine how some of the form elements appear.
304872-7 ch20.F
8/28/01
12:45 PM
Page 194
194
Saturday Evening
11. Finish the wizard by clicking Finish. Your completed form appears in a new Web page that automatically opens when you complete the form (see Figure 20-6).
Figure 20-6 The finished form appears in its own Web page.
Editing Form Fields and Option Buttons Taking the example form that you created in the preceding section, you can edit the fields and the buttons that automatically appear in the form. The labels in your form appear in tables so you can edit those directly, but if you need to change the length of the field or the label in the buttons at the bottom of the form, you need to take a different approach.
304872-7 ch20.F
8/28/01
12:45 PM
Page 195
Session 20—Inserting Forms
195
Editing form fields You can edit form fields by following these steps: 1. Right-click on a form field in the form. 2. Select Form Field Properties option from the pop-up menu. The Text Box Properties dialog box appears (see Figure 20-7).
3. You can change the name, the initial value (the initial value is the default text — if any — that will appear in the text box), the width in characters, the tab order, and whether the field is a password field. You can also set style and validation information by clicking on the Style and Validate buttons. 4. Click OK when you finish editing the form field. The form field reflects your changes.
Editing option buttons You can edit option buttons by following these steps: 1. Right-click on the button you want to edit at the bottom of the form. 2. Select Form Field Properties in the pop-up menu. The Push Button Properties dialog box appears (see Figure 20-8).
Part IV—Saturday Evening Session 20
Figure 20-7 The Text Box Properties dialog box
304872-7 ch20.F
8/28/01
12:45 PM
Page 196
196
Saturday Evening
Figure 20-8 The Push Button Properties dialog box 3. You can change the button name, value, type, and tab order in the window. You can also change the button style when you click Style; the Modify Style dialog box appears so you can change the appearance of the button and additional identifying features such as an ID code. 4. Click OK. The button may or may not reflect the changes you made. For example, if you changed the button name, the button reflects the new name. However, if you change the button type (such as from Submit to Normal), you won’t see a visible change to the button.
Inserting Hidden Fields You can insert hidden fields that contain data that the user doesn’t see but that is passed along to another Web page, file, or script. For example, you may want to pass along the name of the page that the form came from if more than one page in your site contains a form. You can insert hidden fields by following these steps. 1. Right-click on a blank area in the form. 2. Select Form Properties from the pop-up menu. The Form Properties dialog box appears. 3. Click Advanced. The Advanced Form Properties dialog box appears (see Figure 20-9).
304872-7 ch20.F
8/28/01
12:45 PM
Page 197
Session 20—Inserting Forms
197
Figure 20-9 The Advanced Form Properties dialog box 4. Add a new hidden name and a value by clicking Add and then adding the name and value in the Name/Value Pair window that appears. For example, the name can be a Web page and the number can be the form number that appears on the page. 5. Click OK when you finish adding a name and value.
6. Click OK in the Advanced Form Properties dialog box. 7. Click OK in the Form Properties dialog box. Your Web site transmits the hidden fields along with the rest of the fields to the Web page, file, or script.
Adding and Editing Form Buttons You can add two types of form buttons: Simple push buttons that have simple labels Advanced buttons that you can add images and text to To add simple push buttons to your form, follow these steps: 1. Click on the area in the form where you want to add your button. 2. Choose Insert ➪ Form ➪ Push Button. The push button appears in the form.
Part IV—Saturday Evening Session 20
The new name and value now appear in the Advanced Form Properties dialog box.
304872-7 ch20.F
8/28/01
12:45 PM
Page 198
198
Saturday Evening
After you add a button, you can edit the button by right-clicking the button and then selecting Form Field Properties. Then you can edit the button just as you do with an option button (see the earlier section, “Editing option buttons”). For an advanced button, the procedure for adding and editing is very similar except that in Step 2, you choose Advanced Button (not Push Button). You can add text directly into the button itself. (When you create your button for the first time, FrontPage inserts the words “Type here.”) The next section covers adding images to your advanced buttons.
Adding Images to Advanced Form Buttons When you add an advanced button, you can also add images directly into the button. To do so: 1. Choose Insert ➪ Picture. 2. Add a graphic image from a file by clicking File in the side menu that appears. After you add the graphic, it appears in the button (see Figure 20-10). The button automatically resizes itself to fit the size of the graphic; you can shrink the button by shrinking the graphic. You can shrink the size of the button by shrinking the size of the graphic within the button. Shrink the graphic by following these steps: 1. Click the graphic. Graphic boxes, or handles, appear around the perimeter of the graphic. 2. Move your mouse pointer to the lower-right handle, hold down your left mouse button, and then hold down your Shift key. 3. Move the mouse to resize the graphic to the size you want. The Shift key ensures that the proportions of your graphic remain the same (and don’t get stretched too wide or too long).
304872-7 ch20.F
8/28/01
12:45 PM
Page 199
Session 20—Inserting Forms
199
Establishing a Form Handler When a visitor submits a form, your Web site sends the form to a form handler. The form handler takes the form and submits it to another location that you specify, such as to a file on the Web server, to another Web page, to an e-mail address, or to a custom script written in CGI (Common Gateway Interface) or ASP (Active Server Pages). You should talk with the server administrator before you establish a form handler so you don’t get any unforeseen surprises. See also Session 25 and Session 26, which cover CGI scripts and Active Server Pages in more detail. CD-ROM
You can establish a form handler by following these steps: 1. Right-click on a blank area in the form. 2. Select Form Properties. The Form Properties dialog box appears.
Part IV—Saturday Evening Session 20
Figure 20-10 This rather large graphic appears within the button.
304872-7 ch20.F
8/28/01
12:45 PM
Page 200
200
Saturday Evening
3. Click Options in the lower-left corner of the Form Properties dialog box. The Saving Results dialog box appears (see Figure 20-11).
Figure 20-11 The Saving Results dialog box 4. Select either the File Results tab or the E-Mail Results tab to enter the file location or the e-mail address to send the form information to. 5. When you finish entering information, click OK. 6. You can send to a database or to another script by clicking on the Send to Database and Send to Other Radio Buttons, respectively, in the Form Properties dialog box. When you click Send to Other Radio Buttons, you can send the form to a script or to an existing discussion or registration form handler. 7. Click OK when you finish establishing a form handler.
304872-7 ch20.F
8/28/01
12:45 PM
Page 201
Session 20—Inserting Forms
201
Adding a Confirmation Form FrontPage contains a series of form templates that you can use for creating different types of forms. One of them is a confirmation form that returns a confirmation page so the visitor knows that the submitted form has gone through. You can add a confirmation form by following these steps: 1. Click the Page Templates link in the New Page or Web window. If the window isn’t showing, choose View ➪ Task Pane.
Tip
2. Select the Confirmation Form template in the Page Templates window 3. Click OK. The confirmation form appears in a new Web page (see Figure 20-12). Part IV—Saturday Evening Session 20
Figure 20-12 The confirmation form appears.
304872-7 ch20.F
8/28/01
12:45 PM
Page 202
202
Saturday Evening
Designing a Search Form You can also design a search form using a built-in FrontPage search template. To add the template: 1. Click the Page Templates link in the New Page or Web window. If the window isn’t showing, choose View ➪ Task Pane.
Tip
2. Select the Search Page template in the Page Templates window. 3. Click OK. The search form appears in a new Web page (see Figure 20-13).
Figure 20-13 The search form appears.
304872-7 ch20.F
8/28/01
12:45 PM
Page 203
Session 20—Inserting Forms
203
REVIEW FrontPage contains many different tools for creating and editing forms. You can add form features including fields, buttons, check boxes, and hidden features. You can determine where the submitted form data will appear for further processing. You can even open forms from templates that you can edit to your liking.
QUIZ YOURSELF 1. What does a form do? 2. How do you add buttons to your form? 3. How do you add a graphic image to a form? 5. How do you add a form from a template?
Part IV—Saturday Evening Session 20
4. What is a form handler?
314872-7 PR4.F
8/28/01
12:45 PM
Page 204
PART
IV # Saturday Evening Part Review 1. What are the static multimedia types? 2. What are the non-static multimedia types? 3. How can you set the number of audio loops on a page? 4. How do you play a video on your Web page? 5. What is the difference between video and streaming video? 6. What are the advantages to using tables? 7. How do you draw a table? 8. How do you set the table alignment? 9. How do you merge cells? 10. Why do you pad and space cells? 11. How do you create a table heading? 12. How do you add a table caption? 13. What are some formatting issues with text and graphics in a table? 14. How do you add a background color? 15. How do you add a background image? 16. What does a form do? 17. How do you add buttons to your form? 18. How do you add a graphic image to a form? 19. What is a form handler? 20. How do you create a form from a template?
314872-7 PR4.F
8/28/01
12:45 PM
Page 205
324872-7 DPO3.F
8/28/01
12:45 PM
Page 206
324872-7 DPO3.F
8/28/01
12:45 PM
Page 207
Part V — Sunday Morning Session 21 Creating and Editing Frames Session 22 Adding Automatically-Updated Web Content Session 23 Including Java and ActiveX Code Session 24 Inserting Animations Session 25 Including CGI Scripts Session 26 Adding Active Server Pages
Part VI — Sunday Afternoon Session 27 Creating an Interactive Forum Session 28 Integrating with Databases Session 29 Including E-Commerce Features Session 30 Publishing Your Site
334872-7 PO5.F
8/28/01
12:45 PM
Page 208
PART
V Sunday Morning
Session 21 Creating and Editing Frames Session 22 Adding Automatically-Updated Web Content Session 23 Including Java and ActiveX Code Session 24 Inserting Animations Session 25 Including CGI Scripts Session 26 Adding Active Server Pages
344872-7 ch21.F
8/28/01
12:45 PM
Page 209
SESSION
21 Creating and Editing Frames
Session Checklist ✔
Introducing frames ✔ Using FrontPage frame templates ✔ Naming your frames ✔ Setting up frame targets ✔ Designing and editing frame pages ✔ Adding additional frames ✔ Saving your framed Web page
G
ood morning. Now that you’ve had a good night’s sleep and a good breakfast, it’s time to talk about frames. Frames are individual Web pages that appear inside a Web page. Framed pages not only let you view several Web pages within the same page, but they also make it easier to navigate on a page if you have a lot of information. For example, if your Web page is an index of terms, you can have one frame that lists the terms with each term having a link to its definition page. When visitors click the term link, the definition page can load in another frame on the page rather than open a new page entirely.
344872-7 ch21.F
8/28/01
12:45 PM
Page 210
210
Sunday Morning
Note
Universal support for frame pages doesn’t exist, particularly with older browsers. If a visitor’s browser doesn’t support frames, there may be unexpected results such as only one frame displaying on the browser or your page not displaying at all.
The rule about keeping it simple that has been used throughout this book also applies to frames. If you want to use frames, make sure that your visitors can view the frames correctly. If your audience is limited to people you know with computer equipment and browser software that supports frames, you’re okay. If your site will be viewed by the general public, you should either have a page with no frames or have two sites in one: one without frames and one with frames (and a page that lets the visitor choose).
Creating Frame Pages from a FrontPage Template As you learned yesterday in Session 18, FrontPage contains many different Web page templates that help make your life a bit easier. FrontPage also has ten different frame templates for your Web site that you can select from. Add a frame template by following these steps: 1. Click the Page Templates link in the New Page or Web window. If the window isn’t showing, choose View ➪ Task Pane.
Tip
The Page Templates dialog box appears. 2. Click the Frames Pages tab at the top of the window. The list of frame templates appears (see Figure 21-1).
344872-7 ch21.F
8/28/01
12:45 PM
Page 211
Session 21—Creating and Editing Frames
211
Figure 21-1 The Frames Pages tab contains the frame page templates. 3. Select a frame template from the list. 4. Click OK. Part V—Sunday Morning Session 21
The frame template appears in a new Web form so you can either enter an existing page into it or create a new page for the frame (see Figure 21-2).
344872-7 ch21.F
8/28/01
12:45 PM
Page 212
212
Sunday Morning
Figure 21-2 The frame template appears You can set an initial page or create a new Web page in each frame by clicking Set Initial Page or New Page in each frame. When you click New Page, a blank Web page appears so you can place elements in it. If you’d rather put an existing Web page in the frame, click Set Initial Page to bring up the Select File dialog box. 5. When you find the Web page you want to import, click OK in the Select File dialog box. The imported page appears in the frame (see Figure 21-3).
344872-7 ch21.F
8/28/01
12:45 PM
Page 213
Session 21—Creating and Editing Frames
213
Figure 21-3 The imported page appears in the frame.
After you create a frame page, name your frames so that you remember the frames more easily when you set up the relationships between frames. You can name your frames by following these steps: 1. Right-click on the frame you want to name. 2. Select Frame Properties. The Frame Properties dialog box appears (see Figure 21-4).
Part V—Sunday Morning Session 21
Naming Frames
344872-7 ch21.F
8/28/01
12:45 PM
Page 214
214
Sunday Morning
Figure 21-4 The Frame Properties dialog box 3. Enter the new frame name in the Name field. 4. Click OK.
Setting Frame Targets When you have a link in one frame page and the linked page needs to appear in another frame on your page, you need to tell the link where the linked page needs to appear. You do this by setting frame targets. To do so, follow the steps below. 1. Create a new framed Web page. For this exercise, select the Contents template in the Page Templates dialog box. 2. Click New Page in both frames. Blank pages appear in each page. 3. Type link in the left-hand frame page.
344872-7 ch21.F
8/28/01
12:45 PM
Page 215
Session 21—Creating and Editing Frames
215
4. Select the word Link; then choose Insert ➪ Hyperlink. The Insert Hyperlink dialog box appears (see Figure 21-5).
5. Click the Pencil button to the right of the Target frame field. The Target Frame dialog box appears (see Figure 21-6). 6. Click the frame that you want to link to in the Current frame area. In this exercise, click the right-hand frame. The Target setting field displays the name of the frame that you selected (in this case, main). 7. Click OK.
Part V—Sunday Morning Session 21
Figure 21-5 The Insert Hyperlink dialog box
344872-7 ch21.F
8/28/01
12:45 PM
Page 216
216
Sunday Morning
8. Click OK in the Insert Hyperlink dialog box. The link appears in the selected frame. When you preview your document, the linked document appears in the selected frame.
Figure 21-6 The Target Frame dialog box
Designing and Editing Frame Pages When you design and edit frame pages, you do so just as you would with any other Web page. The one design caveat to be aware of is that when your text or graphics exceed the size of the frame, horizontal and/or vertical scrollbars appear in the text. Having scrollbars appear in more than one frame can be cumbersome to a visitor because they have to scroll all over your page to find the information they’re looking for. This is especially true of narrow frames (either horizontal or vertical).
Note
You can change the height and width of frames by moving the mouse pointer to the frame border (the pointer changes to a double-headed arrow). Hold down the left mouse button and drag the frame either up or down or from left to right.
344872-7 ch21.F
8/28/01
12:45 PM
Page 217
Session 21—Creating and Editing Frames
217
Adding Frames FrontPage only lets you set up a Web page with frames using their built-in templates. However, you can place inline frames — frames that appear within Web pages — into a Web page. You can add an inline frame by following these steps: 1. Click on the location where you want the inline frame to appear. 2. Choose Insert ➪ Inline Frame. The inline frame appears within your Web page (see Figure 21-7). You treat the inline frame just as you do with any other frame; you can set the initial page or create a new page for your frame just as you did earlier in this session. You can change the size and position of the frame by clicking on the outer edge of the frame; when the handles appear around the frame perimeter, you can move and/or resize the frame by clicking and dragging the handles.
Part V—Sunday Morning Session 21
Figure 21-7 The inline frame appears on the Web page.
344872-7 ch21.F
8/28/01
12:45 PM
Page 218
218
Sunday Morning
Saving a Framed Web Page When you save a framed Web page, you don’t have to save each frame one at a time. However, when you save the framed Web page for the first time, FrontPage asks for the name of the Web page first and then the names of the individual frames because they’re considered individual Web pages. After you save the Web page the first time, FrontPage saves all of the frames and the page automatically.
REVIEW FrontPage contains ten different frame templates for having several Web pages within one Web page. Frames are best for navigating pages that have a lot of information. You can set links to different frames in your Web page using frame targets. You can embed one or more inline frames into a Web page (or a frame itself). When you save a Web page with frames, FrontPage saves those frames as individual Web pages the first time; after that, FrontPage automatically saves all the frames and the page together.
QUIZ YOURSELF 1. What are the advantages of using frames? 2. What are the disadvantages of using frames? 3. How do you create a frame from a template? 4. How do you set frame targets? 5. How do you add an inline frame?
354872-7 ch22.F
8/28/01
12:45 PM
Page 219
SESSION
22 Adding Automatically-Updated Web Content Session Checklist ✔
Linking to Web content ✔ Adding links to Microsoft content ✔ Adding the date and time
O
ne of the advantages that FrontPage 2002 has over its competition and earlier versions is that you can automatically create links to Microsoft-created Web pages and elements that Microsoft provides for FrontPage users.
Understanding Links to Web Content Microsoft understandably wants you to use their services on your site to promote visits to Microsoft. With FrontPage, you can directly place Microsoft-related information into your Web site. There is nothing in FrontPage that requires you to link to any Microsoft-related content. Note
354872-7 ch22.F
8/28/01
12:45 PM
Page 220
220
Sunday Morning
FrontPage lets you enter different Web components — small programs that provide added functionality for your Web page. Some components include the current date and time, a hit counter to see how many people have visited your site, and others that link you to different pieces of content. When you select some of these components, FrontPage sets them up automatically in your site so you have as little work as possible to do.
Adding Links to Microsoft Content You can add three different kinds of Microsoft content to your Web site: MSNBC content, MSN content, and Expedia content. MSNBC is Microsoft’s joint cable TV/Internet venture with NBC. MSN is the Microsoft Network, Microsoft’s online service. Expedia is Microsoft’s online travel service. These services let you perform such tasks as including business stock quotes, weather reports, Web searches, and maps. To add links to Microsoft content: 1. Click on the location in the Web page where you want to add Microsoft content. 2. Choose Insert ➪ Web Component. The Insert Web Component dialog box appears (see Figure 22-1). 3. Scroll down the Component Type list until you reach the Expedia, MSN, or MSNBC components you want to add. 4. Click to select the component in the Component type list box. 5. Click Finish. Figure 22-2 shows what an MSNBC weather report component looks like.
Note
Depending on the component you choose, you may have to enter additional information. For example, if you choose to include MSNBC weather reports, you’re asked to enter your ZIP code before the component appears on the screen.
The component appears as a sample in Normal mode, but the component activates when you preview the Web page.
354872-7 ch22.F
8/28/01
12:45 PM
Page 221
Session 22—Adding Automatically-Updated Web Content
221
Figure 22-1 The Insert Web Component dialog box
Part V—Sunday Morning Session 22
Figure 22-2 The sample weather report appears on the Web page.
354872-7 ch22.F
8/28/01
12:45 PM
Page 222
222
Sunday Morning
Adding the Dynamic Date and Time You can add the dynamic date and time to your Web page so users know when you last updated the Web page. The date and time are dynamic because they update automatically when you save your Web page; you don’t have to change them manually. To add the date and time: 1. Click the location in the Web page where you want to add the date and/or time. 2. Choose Insert ➪ Date and Time. The Date and Time dialog box appears (see Figure 22-3).
Figure 22-3 The Date and Time dialog box 3. Under Display, choose whether the date and/or time automatically updates when you last save the page or when FrontPage automatically saves the page. FrontPage automatically saves your Web page every few minutes just as other programs in the Microsoft Office XP suite do. Note
4. Determine the date and/or time format. If you do not want the page to display the date or time, select (none) for the format. 5. Click OK. The date and/or time appears on the page at the specified location. FrontPage automatically updates the date and/or time when either you or FrontPage saves the Web page, depending on your selection in Step 3.
354872-7 ch22.F
8/28/01
12:45 PM
Page 223
Session 22—Adding Automatically-Updated Web Content
223
REVIEW FrontPage 2002 has a new feature: adding Microsoft-related content such as weather reports and maps from Microsoft services onto your Web page. You can add this Microsoft-related content directly within FrontPage and embed the content into your Web page. You can add the date and time to your Web page that FrontPage updates automatically either when you or FrontPage saves the page.
QUIZ YOURSELF 1. What are some Microsoft services that you can import into your page as components? 2. How do you add a Microsoft-related component such as MSN Web searches? 3. How do you add the date and time to your Web page? 4. When does FrontPage update the Web page date and/or time?
Part V—Sunday Morning Session 22
354872-7 ch22.F
8/28/01
12:45 PM
Page 224
364872-7 ch23.F
8/28/01
12:46 PM
Page 225
SESSION
23 Including Java and ActiveX Code
Session Checklist ✔
Understanding Java, JavaScript, and ActiveX ✔ Insert JavaScript in your HTML code ✔ Adding Java applets ✔ Changing Java applet properties ✔ Utilizing ActiveX controls
H
TML is a modular language. You can integrate other pieces of HTML code into your program and include links to outside programs (written in languages such as Java) to expand the functionality of what your Web site does. For example, you can link your Web page to a Java program you wrote for acquiring and processing financial data from visitors. You (or someone else) can write these programs in languages designed for the Web; the most popular of these languages is Java. JavaScript, a cousin of Java, lets you include programming scripts within HTML itself for added functionality (such as entering a secure password on your site). You can also add Microsoft ActiveX controls, which are programs that let your Web page perform certain tasks in Windows.
364872-7 ch23.F
8/28/01
12:46 PM
Page 226
226
Sunday Morning
Understanding Java, JavaScript, and ActiveX Sun Microsystems produces Java, a programming language introduced in 1995 as not only a Web programming language but also a programming language that could be used on any computer with any operating system. Java failed at the latter goal, but it has been very successful as a Web programming language from day one. Java is an industrial-strength programming language based on C++ (one of the standard programming languages for the Intel-compatible computing platform) but for many Web needs, programming in Java can be overkill. Sun addressed this problem by producing JavaScript, a scripting language based on Java but one that you can include directly in your HTML code. Sun introduced JavaScript with Netscape Navigator 2.0, so most browsers support JavaScript. ActiveX is a property of Microsoft. ActiveX is a set of software components that you can use in Windows programs to perform certain tasks like producing a pop-up menu in a Web page. If you design a Web site for a corporate intranet that uses all Windows computers, you can use ActiveX components with your Web site. If your site is open to the public, it’s best to use Java or JavaScript because most browsers (even Microsoft Internet Explorer) support these two languages.
Inserting JavaScript in Your HTML Code You can find free JavaScript code on the Web — a good place to start your JavaScript search is at The Free Site at www.thefreesite.com — for producing certain effects on your Web page. When you find a piece of JavaScript that you like (or you have JavaScript code that you’ve written yourself), you can either cut and paste the code or enter the code directly. Either way, you have to enter the code manually in HTML mode. See Session 5 for more information about viewing your Web page in HTML mode. If you have pre-written JavaScript code, it usually contains information about how and where to insert that code. If you’ve written the JavaScript code yourself, chances are you know how to insert the code from experience. If not, check out a companion book on JavaScript such as JavaScript For Dummies, 3rd Edition (published by Hungry Minds, Inc.).
Adding Java Applets If you have a Java program already written, you need to create a link from your Web page to your Java program.
364872-7 ch23.F
8/28/01
12:46 PM
Page 227
Session 23—Including Java and ActiveX Code
Note
227
The difference between JavaScript and Java is that Java is a fullfledged programming language that you can use to create real, self-contained programs just like the ones you buy from a computer store. JavaScript, on the other hand, lets you enter code into your Web page for performing certain functions from your Web page.
FrontPage makes it easy for you to create the necessary links. A Java program that downloads from the Web server into the visitor’s computer so it can run is called an applet. FrontPage lets you decide where to place the Java program on your Web server so your Web page can call the file when the visitor invokes it. You can add a Java applet to your Web page by following these steps: 1. Choose Insert ➪ Web Component. The Insert Web Component dialog box appears. 2. Select the Advanced Controls component type. 3. Select Java Applet from the Choose a Control list box. 4. Click Finish. The Java Applet Properties dialog box appears (see Figure 23-1)
Part V—Sunday Morning Session 23
Figure 23-1 The Java Applet Properties dialog box
364872-7 ch23.F
8/28/01
12:46 PM
Page 228
228
Sunday Morning
5. Enter the Java applet properties, including the location of the applet in the window. Properties include: Applet Source: The name of the Java applet source that usually have a .class filename extension (such as myapplet.class). Applet base URL: The location on the Web where the source file exists. Message for browsers without Java support: The message that displays in place of the Java applet if the visitor’s browser doesn’t support Java. Applet Parameters: This area lets you add, modify, and remove Java applet parameter names and values. Refer to the Java applet documentation for the correct parameters so your applet behaves correctly. Layout: This area lets you set the spacing and alignment of the Java applet on your page. Size: This area lets you set the width and height of the Java applet on your page. Style: This button lets you add class and/or ID names (if necessary) and set text and graphic attributes for the area that bounds your Java applet (for example, a border line). 6. Click OK. The Java applet is represented in Normal mode by a large icon with the letter J. When you preview the Web page, the Java applet runs as it should.
Changing Java Applet Properties What happens if you want to change the properties of your Java applet, for example, the message for browsers that don’t support Java or where the applet appears on the page? You can change the properties of a Java applet by following these steps: 1. Right-click the Java applet icon. 2. Select Java Applet Properties. The Java Applet Properties dialog box appears. 3. Change the properties. 4. Click OK.
364872-7 ch23.F
8/28/01
12:46 PM
Page 229
Session 23—Including Java and ActiveX Code
229
Creating and Placing ActiveX Controls ActiveX controls are Microsoft programs that help tie in your Web site to different Windows components. For example, you can place an ActiveX control for the Windows Media Player into your Web site so that the Windows Media Player runs a specific video directly on your Web page. If your visitor doesn’t have Microsoft ActiveX support, that visitor won’t be able to view or use the ActiveX control on your page. Note
You can place an ActiveX control on your Web page by following these steps: 1. Choose Insert ➪ Web Component. The Insert Web Component dialog box appears. 2. Select the Advanced Controls component type. 3. Select ActiveX Control from the Choose a Control list box. 4. Click Next. 5. Select the desired ActiveX control from the Choose a Control list box (see Figure 23-2).
Part V—Sunday Morning Session 23
Figure 23-2 The Choose a Control list box
364872-7 ch23.F
8/28/01
12:46 PM
Page 230
230
Sunday Morning
6. Click Finish. The ActiveX control appears as a box with an icon that corresponds to the type of control you entered. Depending on the control you entered, you may have to enter some more information and settings. For example, if you add an Office Chart 10.0 ActiveX component, a Commands and Options window appears that lets you set chart information before FrontPage inserts the Office Chart ActiveX control on your page.
REVIEW FrontPage lets you link to Java programs, add JavaScript code, and import ActiveX controls that add greater functionality into your Web pages. FrontPage lets you add Java applets and ActiveX controls just like other Web components. You can’t add JavaScript code automatically — you have to add JavaScript code into HTML code in FrontPage’s HTML mode because JavaScript is an extension of HTML. When you preview your Web page, the Java applet, JavaScript code, and/or ActiveX control run so you can see how they work.
QUIZ YOURSELF 1. What is JavaScript? 2. What is a Java applet? 3. What is an ActiveX control? 4. How do you add JavaScript to your Web page? 5. How do you add an ActiveX control to a Web page?
374872-7 ch24.F
8/28/01
12:46 PM
Page 231
SESSION
24 Inserting Animations
Session Checklist ✔
Discussing Web animation ✔ Creating and inserting animated graphics ✔ Getting a handle on Dynamic HTML ✔ Adding animated text ✔ Transitioning from page to page
T
he Web combines the best of all worlds: A Web page can combine static elements such as text and still graphics; non-static elements such as animations, sound, and video; and interactive elements such as forms. This session explores animated graphics, which is a good way for you to call attention to certain areas of your Web site.
Introducing Web Animation When you were a kid, you probably saw one of those books with animations in the corners of all the pages that made the animations look as if they were moving
374872-7 ch24.F
8/28/01
12:46 PM
Page 232
232
Sunday Morning
when you flipped through the pages very quickly. The concept is similar for motion pictures and for animated graphics. Animated graphics come in GIF89a format in contrast to the plain GIF static graphics format. The difference between an animated GIF89a and plain GIF image is that the GIF89a format contains multiple images that run in a specific sequence. When you view the animated GIF, the graphic appears as if it’s moving.
Creating Animated Graphics Previous versions of FrontPage came bundled with a little program called Image Composer. With FrontPage 2002, however, Image Composer is no longer part of the FrontPage package. It was replaced with the Drawing Canvas for creating simple drawings, but if you want to create or edit an imported graphic you must do so using a graphics program (several trial versions are on this book’s CD). If you already have a program that creates Web animations, consult the program’s manual for detailed instruction. Plenty of animated graphics exist on the Web if you want to import some already-made animated GIFs to your Web site. Here are two locations that contain free Web animations that you can download: The Animation Factory (www.animfactory.com), which has a large number of GIFs available for free downloading GUIStuff.com (www.guistuff.com), which makes it easy for you to add animations to menus and add entire menu themes to your Web site
Note
Different sites that let you download animated graphics from the Web have different means of distributing them. Some sites like The Animation Factory let you place their images for free on a personal Web site but charge for placing images on a commercial site. Others charge for all their graphics. Be sure that the image you want to place on your Web site can be used legally before you use it on your Web site.
374872-7 ch24.F
8/28/01
12:46 PM
Page 233
Session 24—Inserting Animations
233
Inserting Animated Graphics FrontPage makes inserting animated graphics easy. Here are the steps on how to do it: 1. Choose Insert ➪ Picture ➪ From File. The Picture dialog box appears. 2. Select the desired animated graphic. 3. Click Insert. The animated graphic appears on your screen. The graphic is not animated in Normal mode but becomes animated in Preview mode or in a browser.
Learning about Dynamic HTML Dynamic HTML (or DHTML) is a group of technologies that extends HTML to provide greater functionality to your Web pages. These technologies include JavaScript, cascading style sheets (CSS), and technologies included with the browser itself. Fortunately you don’t have to learn about JavaScript or any other scripting technology because FrontPage has DHTML features built-in. You can use DHTML to animate certain elements in your Web page. To animate an element using DHTML: 2. Choose Format ➪ Dynamic HTML Effects. The DHTML Effects toolbar appears (see Figure 24-1).
Figure 24-1 The DHTML Effects toolbar 3. Click the down arrow to the right of the On field at the left side of the window. 4. Choose the event that will trigger the animation: on a mouse click, on a mouse double-click, on a mouse over (when the mouse pointer goes over the element), or when the page loads.
Part V—Sunday Morning Session 24
1. Click to select the element that you want to animate.
374872-7 ch24.F
8/28/01
12:46 PM
Page 234
234
Sunday Morning
5. Click the down arrow to the right of the Apply field. 6. Choose the animation effect that you want to apply to the element. For example, if you select the double-click event, you have two choices for animation effects: Fly out and Formatting. The former moves the element off the page in one of several different ways. The latter applies to selected text where the animation can be an addition of a border or changes in fonts, font size, and/or font color (see the next section for more details). 7. Click the down arrow to the right of the Settings field. 8. Select the setting that applies to the animation effect. Your list choices depend on what effect you choose the selections in the Settings field. For example, if you choose Fly out animation then you can choose from one of eight settings that determine how the object disappears from the screen, such as the element moving to the top of the screen and disappearing. After you set the DHTML settings, the DHTML effects appear when you preview the page. You can highlight the DHTML effects by clicking Highlight Dynamic HTML Effects in the DHTML Effects toolbar.
Note
You can remove DHTML effects from an element by selecting the element (for example, a block of text that you have animated) and clicking on the Remove Effect button at the right side of the DHTML Effects toolbar.
Animating Text You can also animate text in your document by following these steps: 1. Click to select the element that you want to animate. 2. Choose Format ➪ Dynamic HTML Effects. The DHTML Effects toolbar appears. 3. Click the down arrow to the right of the On field at the left side of the window. 4. For this example, select the Click option.
374872-7 ch24.F
8/28/01
12:46 PM
Page 235
Session 24—Inserting Animations
235
5. Click the down arrow to the right of the Apply field. 6. Click on the Formatting option from the list. 7. Click the down arrow to the right of the Settings field. 8. Select Choose Border from the list. The Borders and Shading dialog box appears (see Figure 24-2).
Figure 24-2 The Borders and Shading dialog box appears when you select the Choose Border setting in the DHTML Effects toolbar.
For this example, click on the Box graphic within the Setting: area at the left side of the window. When you do the Preview area shows how your border will look. 10. Click OK. 11. Select the Double click event from the On drop-down list in the DHTML Effects toolbar. The Apply setting will remain as Formatting. 12. Select Choose Font from the Settings drop-down list. The Font window appears (see Figure 24-3).
Part V—Sunday Morning Session 24
9. Select the type of border you want.
374872-7 ch24.F
8/28/01
12:46 PM
Page 236
236
Sunday Morning
Figure 24-3 The Font dialog box 13. Change the text to your liking by changing the font, font style, and font size in the Font, Font Style, and Size areas, respectively. You can also change the font color and apply effects (such as underline, blinking, and small caps). As you make changes the Preview area lets you view the changes before you commit to them. 14. Click OK. When you set the text DHTML settings, they appear when you preview the page in the Preview mode or in a browser. In this example, if you click the text, a border appears around it; if you double-click, the font changes you made to the text appear.
Setting Page Transitions You can also set page transitions much as you would in a PowerPoint presentation. For example, you can have a page “dissolve” into another. You can set page transitions by following these steps: 1. Choose Format ➪ Page Transition. The Page Transitions dialog box appears (see Figure 24-4).
374872-7 ch24.F
8/28/01
12:46 PM
Page 237
Session 24—Inserting Animations
237
Figure 24-4 The Page Transitions dialog box 2. Select the page event (such as when you enter or exit the page) in the Event drop-down list box. 3. Select the duration in seconds that the page transition will last in the Duration field. Usually five seconds is long enough for people to view the page in its entirety. 4. Select the transition effect in the Transition Effect list box. 5. Click OK. After you save the page you can preview the page in a browser and view the transition effect.
Web animation comes in the form of animated GIF files. You can import animated GIF files that you create in an outside graphics program or from pre-existing graphics on the Web. You can use FrontPage’s built-in Dynamic HTML features to create animated text and graphics when you perform a certain function. You can create page transitions that occur when you move from page to page in your Web site.
Part V—Sunday Morning Session 24
REVIEW
374872-7 ch24.F
8/28/01
12:46 PM
Page 238
238
Sunday Morning
QUIZ YOURSELF 1. What is an animated GIF file? 2. What should you be aware of when you download animated GIFs from the Web? 3. What is Dynamic HTML? 4. How do you add animated text? 5. How do you set page transitions?
384872-7 ch25.F
8/28/01
12:46 PM
Page 239
SESSION
25 Including CGI Scripts
Session Checklist ✔
Explaining the Common Gateway Interface ✔ Programming CGI Scripts ✔ Locating CGI scripts on the Internet ✔ Adding CGI Scripts to a Web page ✔ Testing and placing CGI scripts
D
espite the power HTML gives you in creating Web pages (see Session 24), you can only do so much with it. If your Web page needs more powerful capabilities, such as processing a form, asking for a password, or even offering games on your site, HTML can’t help you. Session 23 shows you how to include JavaScript in your HTML and link to Java programs and ActiveX controls. Unfortunately JavaScript has limited functionality, Java programs can take a long time to write, and ActiveX is best for Windows users. A common solution to these problems is writing powerful scripts using CGI — the Common Gateway Interface. Like Java programs, CGI scripts are self-contained programs that you can link your Web site to in FrontPage. You can write CGI scripts in popular, public-domain languages such as Perl and Python. Unlike JavaScript, CGI is a far more powerful scripting language. And unlike ActiveX, CGI is not a proprietary technology so you
384872-7 ch25.F
8/28/01
12:46 PM
Page 240
240
Sunday Morning
can use CGI scripts for Web pages that any Web browser on any operating system will be able to run.
Understanding the Common Gateway Interface The Common Gateway Interface has been around since the early days of the Web — before FrontPage and before Microsoft became a dominant Web player. CGI defines communications between information servers (like an HTTP server) and the resources on a Web server. As the I in CGI indicates, CGI is an interface that helps Internet servers, software applications, and programming languages work together. If you want to learn more about CGI, you can view the CGI introductory site at the National Center for Supercomputing Applications (NCSA) at the University of Illinois at Urbana Champaign, the center that developed Mosaic, the first major graphical Web browser, in 1992. The site is at http://hoohoo.ncsa.uiuc.edu/cgi (see Figure 25-1).
Figure 25-1 The Common Gateway Interface introductory site
384872-7 ch25.F
8/28/01
12:46 PM
Page 241
Session 25—Including CGI Scripts
241
Programming CGI Scripts You control CGI elements by writing a script program in a language that handles CGI scripting. Perl is the favorite program for writing CGI scripts because it’s a freely distributed language that’s also easy to program. You can also use other languages including C, C++, Python, Tcl, and Visual Basic for programming CGI scripts. Perl is free to download and use, and if you want to learn more about Perl, you can go directly to the Perl Web site at www.perl.com for the latest news and downloadable scripts (see Figure 25-2).
Note
To find out more about CGI and the programming languages you can use to program CGI scripts, and to download public domain CGI programs, go to The CGI Resource Index at www.cgi-resources.com.
Part V—Sunday Morning Session 25
Figure 25-2 The Perl Web site
384872-7 ch25.F
8/28/01
12:46 PM
Page 242
242
Sunday Morning
Downloading CGI Scripts Even if you don’t know a little bit of programming, you can get started from The CGI Resource Index (see Figure 25-3). Once you get your bearings, you can download and modify one of the many CGI scripts that The CGI Resource Index has available.
Figure 25-3 The CGI Resource Index site You can download CGI scripts that range from Web message boards to games in a number of different languages. As with other downloads, read the fine print on the Web sites so you can ensure that you use the scripts properly.
Adding CGI Scripts to a Web Page You program CGI scripts in the programming environment that comes with your language of choice. When you’re ready to add a CGI script to a Web page, you must add the following HTML code where you want to add the script, as follows:
384872-7 ch25.F
8/28/01
12:46 PM
Page 243
Session 25—Including CGI Scripts
243
1. Open a new Web page in FrontPage if you haven’t already. 2. Click the HTML tab at the bottom of the page. Your Web page displays in HTML mode. 3. Place the cursor between the and tags. 4. Enter the following text:
The location_of_script text must be replaced with the actual location of the CGI script on the server; for example, ftp://ftp. exampleprovider.com/myscript.pl. If you’re not sure, talk with your Internet service provider technical staff to get that information before you start. You can only add this information in FrontPage’s HTML mode (see Session 5).
Testing and Placing CGI Scripts You can test and place CGI scripts on your Web site by following these steps: If you aren’t a Web administrator, consult your administrator before placing the script and any related files on the server. Note
You can place the files on the server by using an FTP (File Transfer Protocol) utility. WS_FTP (available from www.ipswitch.com) is a good, cheap FTP utility. 2. Open the Web page that contains the reference to the script file. You can view the script file in Notepad (if the script is in Perl, the file will have a .pl file extension) or your programming language environment (such as Visual Basic). 3. Copy the HTML code from the Web page that contains the script reference to your Web page. You can also rename the Web page that contains the script reference and run it as a separate page if you want.
Part V—Sunday Morning Session 25
1. Place the CGI scripts and any related files on your Web server.
384872-7 ch25.F
8/28/01
12:46 PM
Page 244
244
Sunday Morning
When you preview your Web page, you can see and use your CGI script (see Figure 25-4) before you publish your site (see Session 30 for information on publishing).
Figure 25-4 The BeholderBoard chess CGI script lets you play chess on your Web site.
REVIEW CGI is a technology that provides much more power than HTML alone — CGI provides a lot of the “back office” work that the user doesn’t see. You can program sophisticated CGI applications into your site that your visitors can interact with. Use programming languages such as Perl and Visual Basic to write CGI scripts. After you write your script, you can insert a link in your Web page to your script so you can put the script through its paces.
384872-7 ch25.F
8/28/01
12:46 PM
Page 245
Session 25—Including CGI Scripts
245
QUIZ YOURSELF 1. What is CGI? 2. How do you program a CGI script? 3. Are already-made CGI scripts available? 4. How do you insert a CGI script into a Web page? 5. How do you test a CGI script?
Part V—Sunday Morning Session 25
384872-7 ch25.F
8/28/01
12:46 PM
Page 246
394872-7 ch26.F
8/28/01
12:46 PM
Page 247
SESSION
26 Adding Active Server Pages
Session Checklist ✔
Learn about Active Server Pages (ASP) ✔ Locating ASP tools on the Web ✔ Adding an ASP script to your Web page ✔ Testing and placing ASP scripts
C
GI predated Microsoft’s entry into the World Wide Web arena, but after Microsoft joined the Web craze, the company worked furiously to create a server-side scripting language that would go beyond the capabilities of CGI. The result, Active Server Pages (ASP), uses scripts that employ Microsoft technologies so your visitors have a richer experience on your Web site. Much of ASP is beyond the scope of this book, but this session gives you some guidance about placing Active Server Pages and where to go on the Web for more information.
394872-7 ch26.F
8/28/01
12:46 PM
Page 248
248
Sunday Morning
Covering Active Server Pages (ASP) Basics Microsoft’s Active Server Pages (ASP) technology combines HTML pages, scripting commands, and COM components. COM stands for Component Object Model, which is a Microsoft specification for software components that you can build into programs or add to programs that run in Windows. You use COM components with other programs in Microsoft Office (which explains why FrontPage is bundled with Office); COM components provide additional functionality such as custom commands to your Office programs. ASP is similar to CGI in that it combines HTML with scripting code so you can access “back end” applications on the Web server such as databases. However, ASP lets you script code directly in HTML code so you can create parts of Web pages “on the fly” without having to rely on an outside scripting program. Microsoft requires that any pages that include ASP code be placed on a Web server running Microsoft Internet Information Server (IIS) version 3.0 or higher. The Microsoft IIS contains code that can process and display ASP code on a Web page. However, third party software such as Chili! Soft from Sun (www.sun.com) lets you run ASP code on other operating systems and Web servers. Check with your Web site administrator to see if your Web server supports ASP before you start coding in ASP.
Tip
Despite Microsoft’s dominance in the Web browser arena, a user viewing an ASP with any browser other than Microsoft Internet Explorer — and some older versions of Internet Explorer — may not be able to view ASP scripts and pages correctly. If you want to add scripts to your page that are browser-independent, consider Java instead.
Finding ASP Tools on the Web A number of companies produce ASP scripts and tools, but the best place to start is at the Microsoft ASP.NET home page at www.asp.net (see Figure 26-1). Click any of the partner site links on the left side of the ASP.NET home page, and the partner site home page appears in your browser.
394872-7 ch26.F
8/28/01
12:46 PM
Page 249
Session 26—Adding Active Server Pages
249
Figure 26-1 The Microsoft ASP.NET home page (screen shot reprinted by permission from Microsoft Corporation)
Unlike past versions of FrontPage, FrontPage 2002 Web pages come with Active Server Pages technology already implemented so you can begin adding ASP code immediately into your page. You enter an ASP script within HTML mode; refer to ASP resources on the Web (especially from Microsoft’s ASP.NET home page) for information about how to program ASP scripts. However, you may need to remove ASP functionality from your Web page if the Web server you use doesn’t support ASP pages. If you remove ASP functionality, the ASP scripts on your page won’t run. Remove ASP functionality from your Web page by following these steps: 1. Choose Tools ➪ Page Options. The Page Options dialog box appears. 2. Click the Compatibility tab.
Part V—Sunday Morning Session 26
Removing ASP Functionality from Your Web Page
394872-7 ch26.F
8/28/01
12:46 PM
Page 250
250
Sunday Morning
3. Uncheck the Active server pages check box to deactivate Active server pages functionality (see Figure 26-2).
Figure 26-2 The Active server pages check box activates and deactivates ASP functionality.
Testing and Placing ASP Scripts You place ASP scripts directly in the HTML code, but how do you know that the scripts work? Follow these steps to place and test your ASP script: 1. Copy the Web page that contains the ASP script to the Web server. You can copy the page using an FTP utility like WS_FTP Pro. Contact your Webmaster if necessary for more information before you copy. 2. Open your Web browser (such as Internet Explorer or Netscape Navigator) and enter the Web address that contains your page. If you don’t know what the exact address is, consult your Webmaster.
394872-7 ch26.F
8/28/01
12:46 PM
Page 251
Session 26—Adding Active Server Pages
251
3. Run your ASP script from your browser to see how it runs so you can make any changes before you publish your page (see Session 30) for the public.
REVIEW Microsoft developed Active Server Pages (ASP) as a way to enhance the functionality of Web pages. ASP works best with Microsoft technologies, so you should be aware of your audience before using ASP scripts; otherwise, visitors may not be able to see your ASP-enabled site. FrontPage enables ASP technology automatically so you can write and test the scripts on your page.
QUIZ YOURSELF 1. What is Active Server Pages technology? 2. How does ASP differ from CGI? 3. Where can you find ASP tools on the Web? 5. How can you deactivate ASP functionality on a page?
Part V—Sunday Morning Session 26
4. How do you enter ASP scripts?
404872-7 PR5.F
8/29/01
11:35 AM
Page 252
PART
# V Sunday Morning
1. What are the advantages of using frames? 2. What are the disadvantages of using frames? 3. How do you create a frame from a template? 4. How do you set frame targets? 5. How do you add an inline frame? 6. What are some Microsoft services that you can import into your page as components? 7. How do you add a Microsoft-related component such as MSN Web searches? 8. How do you add the date and time to your Web page? 9. When does FrontPage update the Web page date and/or time? 10. What is JavaScript? 11. What is a Java applet? 12. What is an ActiveX control? 13. How do you add JavaScript to your Web page? 14. How do you add an ActiveX control to a Web page? 15. What is an animated GIF file? 16. What should you be aware of when you download animated GIFs from the Web? 17. What is Dynamic HTML? 18. How do you add animated text?
404872-7 PR5.F
8/29/01
11:35 AM
Page 253
Part V—Sunday Morning Part Review 19. How do you set page transitions? 20. What is CGI? 21. How do you program a CGI script? 22. Are already-made CGI scripts available? 23. How do you insert a CGI script into a Web page? 24. How do you test a CGI script? 25. What is Active Server Pages technology? 26. How does ASP differ from CGI? 27. Where can you find ASP tools on the Web? 28. How do you enter ASP scripts? 29. How can you deactivate ASP functionality on a page?
253
414872-7 PO6.F
8/28/01
12:46 PM
Page 254
PART
VI Sunday Afternoon
Session 27 Creating an Interactive Forum Session 28 Integrating with Databases Session 29 Including E-Commerce Features Session 30 Publishing Your Site
414872-7 ch27.F
8/28/01
12:46 PM
Page 255
SESSION
27 Creating an Interactive Forum
Session Checklist ✔
Using the Discussion Web Wizard ✔ Welcoming your visitors with a Welcome page ✔ Modifying the table of contents ✔ Adding chats ✔ Customizing and testing your forum
N
ow that you’ve eaten a healthy lunch, it’s time to move into the home stretch. This session continues the discussion of advanced FrontPage features from this morning by talking about discussions. That is, how you can create a message board for visitors to send and receive messages that other visitors can read and respond to from your Web site. You do this by creating a discussion Web site that is a standalone Web site that you can link your Web site to. Remember that the Web server that houses your Web site must have FrontPage server extensions installed for your message board to work. Note
414872-7 ch27.F
8/28/01
12:46 PM
Page 256
256
Sunday Afternoon
Activating the Discussion Web Wizard FrontPage 2002 makes it easy for you to create an online discussion using the Discussion Web Wizard. You can activate the Discussion Web Wizard by following these steps: 1. Click the Web Site Templates link in the New Page or Web window. The Web Site Templates dialog box appears. If the New Page or Web window isn’t showing, choose View ➪ Task Pane. Tip
2. Click the Discussion Web Wizard icon in the Web Sites list. 3. Click OK. A new FrontPage window opens so you can create your discussion Web site, and the Discussion Web Wizard dialog box appears (see Figure 27-1).
Figure 27-1 The Discussion Web Wizard dialog box
414872-7 ch27.F
8/28/01
12:46 PM
Page 257
Session 27—Creating an Interactive Forum
257
4. Proceed to the first step in the wizard by clicking Next. 5. Enter the discussion features you want on your discussion Web page (see Figure 27-2) and then click Next. You can add the following features for your discussion: A table of contents that contains a list of all the messages that have been sent. A search form so you can search messages for specific words in a message. Threaded replies so messages that reply to an original message appear under the original message instead of chronological format so you can follow the entire discussion. A confirmation page that lets you know that your visitor submitted the message to the discussion Web site successfully.
6. Enter the discussion name and the discussion folder name and then click Next.
Part VI—Sunday Afternoon Session 27
Figure 27-2 Select the main features for your discussion.
414872-7 ch27.F
8/28/01
12:46 PM
258
Page 258
Sunday Afternoon
7. Choose the basic set of input fields that you want to add into your discussion Web. The fields include subject, comments, category, and product. Click Next when you’re done. 8. Determine if the discussion will take place in a protected Web; that is, if only registered users can participate in the discussion. Click Next. 9. If you selected Table of Contents as a main feature in Step 5, determine how you want the table of contents to sort the list of posted articles; then click Next. 10. If you selected Table of Contents as a main feature in Step 5, determine if you want the table of contents as the discussion Web site home page. Click Next. 11. If you selected Search Form in Step 5, select the information that you want the search form to report; then click Next. 12. If desired, select a Web theme for your discussion Web site by clicking Choose Web Theme; otherwise click Next. 13. Determine if you want frames, no frames, or a dual interface (using frames if they are available or a normal HTML page if not) in your discussion Web; then click Next. See Session 21 for more information about frames. Cross-Ref
14. This is the last step! Click Finish to close the wizard and create your discussion Web site. After you click Finish, the FrontPage window doesn’t display the page in the window. Instead, you must choose File ➪ Open; the files in your discussion Web site appear automatically in the Open File dialog box(see Figure 27-3). Open the index file and the Welcome page appears (see Figure 27-4).
414872-7 ch27.F
8/28/01
12:46 PM
Page 259
Session 27—Creating an Interactive Forum
259
Figure 27-3 The discussion Web site appears in the Open File dialog box.
Creating a Welcome Page
Part VI—Sunday Afternoon Session 27
The Welcome page appears in the index.htm page, which is the first page in your discussion list Web site. The Welcome page has a name that contains the discussion name and _welc after it. When you open up the first page in your discussion list Web site, the Welcome page appears (see Figure 27-4).
414872-7 ch27.F
8/28/01
12:46 PM
Page 260
260
Sunday Afternoon
Figure 27-4 The Welcome page in your discussion Web site The text is editable just like any other Web page so you can change the text in both the Contents and Welcome frames to your liking. For example, you can customize the text in the Welcome frame to meet your needs or change the titles of the Contents and Windows frames.
Note
It is not a good idea to change the Form Results Inserted Here text in the Contents frame or the links to posting and searching for articles in the Welcome frame. FrontPage creates the form results text and the links so other pages in your discussion Web site will work properly, so it’s better to be safe than sorry and not tamper with them.
When you preview your page you can also verify that the links to the posting and search pages work as they should.
414872-7 ch27.F
8/28/01
12:46 PM
Page 261
Session 27—Creating an Interactive Forum
261
Editing the Table of Contents You can determine how the table of contents presents itself in the page. To edit the table of contents: 1. Choose File ➪ Open. The discussion Web site files appear in the Open File dialog box. 2. Select the table of contents file (it ends with _tocf) and click Open. 3. Right-click Form Results Inserted Here and then select Follow Hyperlink from the pop-up menu. 4. In the tocproto.htm page that appears, right-click Form Results Inserted Here and select List Properties from the pop-up menu. 5. In the List Properties dialog box that appears, select the type of table of contents list you want (see Figure 27-5). The default is the definition list, but you can choose from bulleted, directory, menu, and numbered lists. You can also have the list as plain text (or, as explained in Session 8, a simple list). You can change the style of the text in the table (such as font size and color) by clicking on the Style button. Note
6. Depending on what type of list you create, you can change the bullet style and the numbering style in the Picture Bullets and Numbers tabs, respectively.
7. When you finish editing the list, click OK. The edits you make to the table of contents will not appear until you preview your discussion Web site; then the changes appear in the contents.
Part VI—Sunday Afternoon Session 27
For example, if you create a numbered list you can click on the Numbers tab and select the numbering style such as alphabetical or Roman numeric.
414872-7 ch27.F
8/28/01
12:46 PM
Page 262
262
Sunday Afternoon
Figure 27-5 The List Properties dialog box
Adding Chats Unfortunately FrontPage 2002 has not yet acquired the ability to create a live chat room on your Web page so visitors can chat live with each other. However, you can search for existing chat rooms that come in the form of Java applets or ActiveX controls that you can insert into your Web page. Go to the Microsoft Web site at www.microsoft.com/com/resources/websites.asp to search for an ActiveX control for chat rooms.
Customizing and Testing Your Forum The pages you create in a forum (such as a discussion Web site) can be altered to your liking just as any other Web page can be.
414872-7 ch27.F
8/28/01
12:46 PM
Page 263
Session 27—Creating an Interactive Forum
263
You can rename the index.htm page to another name if you want to include the discussion list within another site (Web servers often recognize index.htm as the first page that appears when someone visits your site). After you’ve customized the forum you can view and test your discussion Web site when you publish it to your Web server. Check out Session 30 for more on publishing your site. Cross-Ref
REVIEW You can create your own discussion Web site as a standalone site that your Web site can link to. FrontPage lets you create a discussion Web site easily using the Discussion Web Wizard. The Welcome page is the first, or index, page of your discussion Web site. The Welcome page welcomes people to your discussion and provides orientation and instruction to visitors. You can edit the table of contents, which is a list of the messages available in the discussion Web, and include bullet and text styles. You can include a live chat area by integrating a Java applet or ActiveX control. After you set up the discussion Web site, you can change the pages just as you do any Web page.
1. How do you add a discussion Web site? 2. What is the Welcome page? 3. How do you customize a discussion Web site? 4. How do you edit the discussion Web table of contents? 5. Why do you have to add a chat room from a Java applet or ActiveX control?
Part VI—Sunday Afternoon Session 27
QUIZ YOURSELF
414872-7 ch27.F
8/28/01
12:46 PM
Page 264
424872-7 ch28.F
8/28/01
12:46 PM
Page 265
SESSION
28 Integrating with Databases
Session Checklist ✔
Using the Office Clipboard ✔ Putting the Database Interface Wizard to work ✔ Change database properties
F
rontPage 2002 ships with Microsoft Office XP, and even if you’re using a standalone version of FrontPage, Microsoft Office has such a commanding lead in the productivity software suite market that it’s likely you’ll be designing a Web site that at least partially ties in to other Office XP documents and files. For example, one of those files may be a database from Microsoft Access. You can tie into a database created in Access or any other database program by using the Database Interface Wizard.
Using the Office Clipboard As with all other programs in Office XP, FrontPage 2002 contains an Office Clipboard that you can cut, copy, and paste information to and from different Office components. The Office Clipboard lets you cut and paste as many as 24
424872-7 ch28.F
8/28/01
12:46 PM
Page 266
266
Sunday Afternoon
different objects, which it lists in the Clipboard in case you need to paste an object several times. You can activate the Office Clipboard by following these steps: 1. Click the down arrow to the right of the New Page or Web title in the New Page or Web window (see Figure 28-1). If the New Page or Web window isn’t showing, choose View ➪ Task Pane. Tip
Figure 28-1 The New Page or Web pop-up menu 2. Select Clipboard from the pop-up menu. The Clipboard window replaces the New Page or Web window and displays a list of the last 24 objects that have been copied to the Office Clipboard.
424872-7 ch28.F
8/28/01
12:46 PM
Page 267
Session 28—Integrating with Databases
267
You can customize how and when the Clipboard window displays by clicking Options at the bottom of the window. Tip
To select an object to paste, click on the point in your Web page where you want to paste the object and then double-click on the object in the Clipboard list.
Using the Database Interface Wizard If you’ve created a database in Microsoft Access or another database program, interfacing your Web site with your database can be a daunting task — that is, unless you use FrontPage. Fortunately, FrontPage 2002 makes it easy for you to tie your Web site to your database and determine how the database results appear on your Web page by using the Database Interface Wizard. Follow these steps to set up your database-Web integration: 1. Click Web Site Templates in the New Page or Web window. The Web Site Templates dialog box appears. If the New Page or Web window isn’t showing, choose View ➪ Task Pane. Tip
2. Click Database Interface Wizard Entry. 3. Click OK. The Database Interface Wizard dialog box appears (see Figure 28-2).
5. Go through each step in the wizard so you can set up your database. The type of database you created determines the steps in the wizard. 6. When you finish entering all the steps in the wizard, click Finish. Your database with the appropriate form page(s) appears in the FrontPage window so you can view, edit, and test them.
Part VI—Sunday Afternoon Session 28
4. Select whether you want to create a new Access database within your Web, use an existing database, or a sample database; then click Next.
424872-7 ch28.F
8/28/01
12:46 PM
Page 268
268
Sunday Afternoon
Figure 28-2 The Database Interface Wizard dialog box
Editing Database Properties When you set up a Web site that ties into a database, you can also edit the database properties directly from your Web site. You can activate this editing capability in the Database Interface Wizard when you create a database interface, as shown in the following steps. 1. Open the Database Interface Wizard dialog box as you did in the previous task. 2. In the first step, click on the Use a sample database connection radio button and then click Next. 3. After the wizard establishes the database connection, click Next. 4. Click Next for the next two steps until you get to the Database Interface Pages step (see Figure 28-3).
424872-7 ch28.F
8/28/01
12:46 PM
Page 269
Session 28—Integrating with Databases
269
Figure 28-3 The Database Interfaces Pages step. 5. Check the Database Editor checkbox, meaning that you want to edit the database within your Web page. 6. Click Next. 7. In the username and password step, enter the username and password that you will use to access the database editor and then click Next. If you don’t want to protect your database editor with a username and password check the Don’t protect my Database Editor with a username and password box. Note
After you click Finish, FrontPage creates your database interface Web site and opens all the pages for you; the index page appears first. In Normal mode you can view the Database Editor Web page by clicking on the database_editor.asp tab (see Figure 28-4).
Part VI—Sunday Afternoon Session 28
8. You’re at the last step, so click Finish.
424872-7 ch28.F
8/28/01
12:46 PM
Page 270
270
Sunday Afternoon
Figure 28-4 The Database Editor Web page. The Database Editor page contains a menu frame at top and an editing frame at the bottom. When you preview your site in Preview mode or in a Web browser, you can extract from and insert data into the sample Northwind database that comes with FrontPage and edit the database in the Database Editor page.
REVIEW The Office Clipboard lets you cut and paste as many as 24 different objects to and from your Web page. FrontPage 2002 makes it very easy for you to copy and edit data created with other programs in the Microsoft Office XP suite and to tie in your database — created with Microsoft Access or some other database program — into your Web site. You can set up your database-Web connection so you can edit database properties directly from your Web site.
424872-7 ch28.F
8/28/01
12:46 PM
Page 271
Session 28—Integrating with Databases
271
QUIZ YOURSELF 1. What objects does the Office Clipboard contain? 2. How many objects can be maintained in the Clipboard at one time? 3. What types of databases can you tie into from your Web site? 4. What does the Database Web Wizard do? 5. How can you change database properties from a Web site?
Part VI—Sunday Afternoon Session 28
424872-7 ch28.F
8/28/01
12:46 PM
Page 272
434872-7 ch29.F
8/28/01
12:46 PM
Page 273
SESSION
29 Including E-Commerce Features
Session Checklist ✔
Understanding e-commerce ✔ Installing the bCentral Commerce Manager add-in ✔ Building a catalog ✔ Creating and testing your e-commerce system
E
lectronic commerce, or e-commerce, is a way for people to purchase products and services on the Web from the comfort of the visitor’s home or office. E-commerce has become more popular in recent years and has caused a rise (and subsequent fall) of e-commerce-related companies. If you want to include e-commerce features on your Web site, FrontPage makes it easy with the Microsoft bCentral Commerce Manager. Unfortunately, taking advantage of this service means that you have to pay Microsoft $24.95 per month or $269.95 per year to create and maintain your product catalog online. Note
434872-7 ch29.F
8/28/01
12:46 PM
Page 274
274
Sunday Afternoon
Examining the Process of Setting Up an E-Commerce Site You can create an e-commerce Web site in FrontPage from scratch, but if you’d rather take the easy route, you can create an e-commerce system as a step-by-step process: 1. First, you have to tie in with the Microsoft bCentral Commerce Manager, which is part of the Microsoft bCentral service for people and companies that do business on the Web. 2. Second, you have to create a product catalog on your Web site so you can show your visitors what they’re buying. 3. Finally, after you have the product catalog set up, you can create the ecommerce site using the E-Commerce Wizard. The rest of this session takes you through all three steps and then takes you through testing of your e-commerce site.
Installing the bCentral Commerce Manager Add-In Take the first step of adding the bCentral Commerce Manager, as shown in the following steps: 1. Choose Insert ➪ Web Components. 2. Click bCentral Web Components in the Component Type list. 3. Click bCentral Commerce Manager Add-In in the Choose a bCentral Component list. 4. Click Finish. The bCentral Commerce Manager Add-In Properties dialog box appears (see Figure 29-1). 5. Download and install the latest version of the add-in by clicking the “here” link and following the steps in the windows that appear.
434872-7 ch29.F
8/28/01
12:46 PM
Page 275
Session 29—Including E-Commerce Features
275
Figure 29-1 The bCentral Commerce Manager Add-In Properties dialog box
Note
Just as when you download a file on the Web from your Internet browser, FrontPage downloads the file by opening your default downloading program that comes with your Internet browser, such as Internet Explorer or Netscape Navigator. Refer to your browser documentation if you have trouble downloading and installing the bCentral Commerce Manager.
7. Restart FrontPage.
Building a Catalog Now that you’ve installed the bCentral Commerce Manager add-in, you can build a catalog and your e-commerce system.
Part VI—Sunday Afternoon Session 29
6. Close the bCentral Commerce Manager Add-In Properties dialog box and the FrontPage window.
434872-7 ch29.F
8/28/01
12:46 PM
Page 276
276
Sunday Afternoon
To build the catalog: 1. Choose Tools ➪ E-commerce ➪ Add Products. Your browser window appears and takes you directly to the bCentral Login Web page so you can log in. 2. Enter your name and password (or sign up for a name and password). The Commerce Manager page appears so you can learn more about building a catalog (see Figure 29-2).
Note
Microsoft provides a promotional (read: limited) version of their catalog for FrontPage users at a reduced price of $12.95 per month or $99.95 per year. The catch is that you can only have 25 catalog items. If you want the full version of bCentral Commerce Manager, you have to pay $24.95 per month or $224.95 per year. Unfortunately, you can’t build the catalog without paying the fee.
Figure 29-2 The bCentral Commerce Manager Web page (screen shot reprinted by permission from Microsoft Corporation)
434872-7 ch29.F
8/28/01
12:46 PM
Page 277
Session 29—Including E-Commerce Features
277
Creating and Testing an E-Commerce System Before you can test your e-commerce system, you must first create an e-commerce Web site using the E-Commerce Wizard. You can access the E-Commerce Wizard by following these steps: 1. Click on the Web Site Templates option from the New Page or Web window. The Web Site Templates dialog box appears. If the New Page or Web window isn’t showing, choose View ➪ Task Pane. Tip
2. Click E-Commerce Wizard in the menu and then click OK. The E-Commerce Wizard appears (see Figure 29-3)
3. Enter your bCentral member login e-mail and password; then click Next.
Part VI—Sunday Afternoon Session 29
Figure 29-3 The E-Commerce Wizard dialog box
434872-7 ch29.F
8/28/01
12:46 PM
Page 278
278
Sunday Afternoon If you are new to bCentral click the I want to sign up for bCentral radio button and click Next. Your Internet browser starts automatically and displays the bCentral home page so you can sign up. Note
4. Click the Signup for bCentral Commerce Manager link if you have not signed up for bCentral Commerce Manager. When you click the link, your Internet browser starts automatically and displays the bCentral home page. 5. After you sign up with bCentral Commerce Manager, or if you have already signed up, follow the steps for building your catalog pages. When you finish with the wizard, FrontPage builds your e-commerce site and displays it in the FrontPage window. Now you can view, edit, and test it by publishing your Web site to the Web server. See Session 30 for details on publishing your site to the Web server. Cross-Ref
REVIEW You can create an e-commerce system for your Web site using the Microsoft bCentral Commerce Manager. FrontPage makes it easy for you to install the Commerce Manager, add a product catalog through bCentral, and then add a complete e-commerce site so it can interact with the bCentral catalog.
QUIZ YOURSELF 1. What is e-commerce? 2. What is Microsoft bCentral? 3. What are the steps for building an e-commerce Web site in FrontPage? 4. Is building a catalog in bCentral free? 5. Do you have to build a catalog before the E-Commerce Wizard works?
444872-7 ch30.F
8/28/01
12:46 PM
Page 279
SESSION
30 Publishing Your Site
Session Checklist ✔
Double-checking your Web site for errors ✔ Previewing your site in different browsers ✔ Publishing your site ✔ Publishing changes to your site ✔ Deleting FrontPage Webs
N
ow that you’ve learned how to create, modify, and add features to your Web site, it’s time to perform the final step: publishing your Web site to a Web server. FrontPage contains built-in tools so you can publish all the pages in your Web with minimal fuss. Be sure to test your site in Preview mode as well as in a browser. See Session 5 for information about previewing a site. Cross-Ref
444872-7 ch30.F
8/28/01
12:46 PM
Page 280
280
Sunday Afternoon
Getting Your Web Site in Order Before you publish your Web site to the Web server, ensure that you have your site in order. Check with your Web server administrator to ensure that all of the serverside technologies that FrontPage components need to work (such as the Internet Information Server) exist on the server. Ensure that all links are in the correct location on every page and that the pages that you link to appear as they should. Ensure that all the graphics appear correctly and in their proper locations. Check your text on all the pages for spelling and grammatical errors. After you’ve checked everything, test your site in different browsers.
Previewing Your Site in Different Browsers You can preview pages in your site within different browsers provided you’ve installed browsers other than Microsoft Internet Explorer (which comes preinstalled on Windows computers). If you have only one browser, the browser opens automatically and displays your site. Note
Preview a site page in a browser by following these steps: 1. Choose File ➪ Preview in Browser. The Preview in Browser dialog box appears (see Figure 30-1). 2. Click to select the browser that you want to view your page in. If you have a browser installed on your system but it isn’t in the browser list, add the browser by clicking Add. 3. Select the window size that you want to preview the page in. The default choice is Default, which is the default screen resolution on your computer.
444872-7 ch30.F
8/28/01
12:46 PM
Page 281
Session 30—Publishing Your Site
281
Figure 30-1 The Preview in Browser dialog box 4. Check the Automatically Save Page check box if you want to save the page each time you view the page in a browser. 5. Click Preview. If you haven’t yet saved the page, a dialog box appears asking you to save the page. The browser starts automatically, sizes the window to meet the window size you specified, and displays the page. You can now see how the page looks and make changes if necessary.
Publishing Your Site
1. Choose File ➪ Publish Web. The Publish Destination dialog box appears. 2. Enter the publishing destination for the Web server that the Web administrator gives you and then click OK. (You may need to enter the Web server user name and password in a separate window before you click OK.)
Part VI—Sunday Afternoon Session 30
After checking and previewing your site, you’re ready to publish your site on the Web, which you can do directly in FrontPage. Here’s how:
444872-7 ch30.F
8/28/01
12:46 PM
Page 282
282
Sunday Afternoon
Note
If you’re publishing your Web site from home, your Internet service provider (ISP) should provide instructions on their Web site for publishing to their Web servers. If they don’t, or if you have questions, contact your ISP’s technical support division.
3. The Publish Web dialog box appears with all the Web site page files listed (see Figure 30-2). You can show the Web site folders by clicking Show.
Figure 30-2 The Publish Web dialog box 4. Click Publish to publish the site. After you publish the site, a dialog box appears reporting that the site has been published. The box also contains a link that opens your published site on the Web server. 5. Click Done.
444872-7 ch30.F
8/28/01
12:46 PM
Page 283
Session 30—Publishing Your Site
283
Publishing Changes to Your FrontPage Web If you make changes to one or more pages in your FrontPage Web site, you can speed up the publishing process by publishing only the changed pages. Publish changed pages to your Web site by following these steps: 1. Activate the Publish Web dialog box as you did in Steps 1 and 2 of the previous section. 2. Click Options. The Options dialog box appears (see Figure 30-3).
Figure 30-3 The Options dialog box
4. Click OK to publish the site.
Part VI—Sunday Afternoon Session 30
3. Change how the pages are published within the Publish tab, which is already selected. You can publish changed or all pages, determining changes by comparing file contents or timestamps, and log changes when you publish your site.
444872-7 ch30.F
8/28/01
12:46 PM
Page 284
284
Sunday Afternoon
Deleting FrontPage Webs Over time you may have FrontPage Webs on your computer that no longer have any use and are just taking up space. You can remove a FrontPage Web site by following these steps: 1. Open a page in the FrontPage Web that you want to delete. 2. Choose View ➪ Folder List. The Folder List dialog box appears. 3. Right-click the Web file name at the top of the folder list tree and then select Delete. The Confirm Delete dialog box appears (see Figure 30-4).
Figure 30-4 The Confirm Delete dialog box 4. Select whether you want to remove the Web but preserve the files within it or delete the Web entirely. 5. Click OK. When you delete the Web it’s gone forever. If you worry that some day you’ll change your mind and want it back, be sure to back up your Web to another location first! Note
If you want to delete your Web site from the Web server, you can ask the Web administrator to do that for you. Tip
444872-7 ch30.F
8/28/01
12:46 PM
Page 285
Session 30—Publishing Your Site
285
REVIEW Before you publish your site be sure to check that your site works the way it should, looks presentable, and appears the way you want it to in different browsers. You can publish your site to a Web server directly from FrontPage. You can delete obsolete sites on your computer from the Folder List in the FrontPage window.
QUIZ YOURSELF 1. What is Web publishing? 2. What should you check to make sure your site is in order before you publish? 3. Why should you preview your Web site pages in different browsers? 4. How do you publish changes in your FrontPage Web? 5. How do you delete a FrontPage Web?
Part VI—Sunday Afternoon Session 30
454872-7 PR6.F
8/28/01
12:46 PM
Page 286
PART
VI # Sunday Afternoon
1. How do you add a discussion Web site? 2. What is the Welcome page? 3. How do you customize a discussion Web site? 4. How do you edit the discussion Web table of contents? 5. Why do you have to add a chat room from a Java applet or ActiveX control? 6. What objects does the Office Clipboard contain? 7. How many objects can be maintained in the Clipboard at one time? 8. What types of databases can you tie into from your Web site? 9. What does the Database Web Wizard do? 10. How can you change database properties from a Web site? 11. What is e-commerce? 12. What is bCentral? 13. What are the steps for building an e-commerce Web site in FrontPage? 14. Is building a catalog in bCentral free? 15. Do you have to build a catalog before the E-Commerce Wizard works? 16. What is Web publishing? 17. Why should you have your site in order before you publish? 18. Why should you preview your Web site pages in different browsers? 19. How do you publish changes in your FrontPage Web? 20. How do you delete a FrontPage Web?
464872-7 AppA.F
8/28/01
12:46 PM
Page 287
APPENDIX
A Answers to Part Reviews
F
ollowing are the answers to the Reviews at the end of each Part of the book. Think of these Reviews as quizzes that are designed to help you prepare for the big test: the Assessment Test on the CD that comes with this book.
Friday Evening Review Answers 1. So you know for whom you are designing the site. 2. For organizing your Web site. 3. Simplicity, good color coordination, keeping graphics to a minimum, and good spelling and grammar. 4. Breaking text up into smaller portions so visitors can get the information they need quickly. 5. Because not everyone uses the same browser or computer platform. 6. VGA (640 x 480 pixel) resolution. 7. Keep it simple. 8. A set of colors that all browsers can view the same way. 9. Because not everyone uses the same fonts you do. 10. A graphical Web design software product. 11. HTML is the standard coding language for Web pages. 12. From the Programs menu within the Start button menu. 13. By choosing the File ➪ New ➪ Web option.
464872-7 AppA.F
8/28/01
12:46 PM
Page 288
288
Appendix A
14. By using the tabs on top of the editing area. 15. By clicking on the window’s Close button or from the File menu option. 16. It displays your Web page and all its elements. 17. To see all the folders and the files within them. 18. By clicking on the Reports icon. 19. Displaying relationships between different Web pages. 20. By clicking on the Hyperlinks icon. 21. A message appears in the Tasks View saying that you have no tasks and tells you how to add one.
Saturday Morning Review Answers 1. In one of three ways: the Blank Page link, the New button, or through the File menu option. 2. By clicking on the HTML tab. 3. In Preview mode or in a browser. 4. By using Print Preview mode. 5. So you don’t lose your changes. 6. Through the Edit menu option. 7. The Priority area in the New Task window. 8. Through the Edit menu option or the Tasks table. 9. By marking the task as complete either through the Edit menu option or the Tasks table. 10. Microsoft Office XP network collaboration software. 11. Hold down the left mouse button and drag the mouse pointer across the text. 12. No. 13. Using text written by someone else without permission; avoiding plagiarism means avoiding legal problems. 14. The word is misspelled. 15. Through the Tools menu or by pressing Shift+F7. 16. Click on the Increase Indent button.
464872-7 AppA.F
8/28/01
12:46 PM
Page 289
Answers to Part Reviews
289
17. A list with characters that precede them; you can use them to call attention to key points. 18. For step-by-step instructions or a list of options. 19. For listing terms and their definitions. 20. Normal, six different Headings, and different List styles. 21. Text styles apply different characteristics to selected text; select the text and then apply the style. 22. Paragraph styles apply to an entire block of text instead of selected text. 23. Headings describe text that follows it; you place them before a block of text. 24. A Web page that contains style information that other Web pages can reference. 25. More than one Web page can use the style sheet so all the pages in your Web site have a consistent look. 26. A Web page containing different styles that any Web page in a Web site can access. 27. A list of styles that only apply to one Web page. 28. Using the Link Style Sheet dialog box.
Saturday Afternoon Review Answers 1. So visitors can view related information. 2. Adding the Web page name in the Insert Hyperlink window. 3. A hyperlink to another point in a Web page. 4. Adding the Web site address in the Insert Hyperlink window. 5. Adding the e-mail address in the Insert Hyperlink window. 6. Selecting text, clicking on the Format Painter button, and clicking the Format Painter cursor on new text. 7. Select the text, cut it, move the cursor to a new location on the page, and then paste the text. 8. Select the text and click on the Font Color button. 9. If everyone who views your page will have all the same fonts (or equivalents).
464872-7 AppA.F
8/28/01
12:46 PM
Page 290
290
Appendix A
10. Select the text and apply the new font size in the Font Size drop-down list box. 11. GIF and JPEG. 12. An area on the page where you can add and edit graphics. 13. Provides drawing tools for adding and editing graphics. 14. Through the Format menu after you click on the Drawing Canvas. 15. It lets you add images and descriptions in predefined formats. 16. So you can create and manipulate many different types of Web graphics with greater precision. 17. An error dialog box appears. 18. Click on the page where you want to insert the graphic and then insert the picture from the Insert menu. 19. Through the Horizontal Line menu option in the Insert menu. 20. Using search engines such as Hotbot and Yahoo. 21. Colors that all Web browsers can view the same way. 22. So all visitors can view the same colors in any browser. 23. Yes, because people still use different browsers and computing platforms. 24. Complement, contrast, and coordinate. 25. Colors that look good together. 26. To make sure that the text is readable and doesn’t cause headaches. 27. The graphic appears in a tiled pattern. 28. By clicking on the Theme option in the Format menu. 29. By clicking on the (Install Additional Themes) option.
Saturday Evening Review Answers 1. Text and still graphics. 2. Animated graphics, audio, and video. 3. By clicking on the Background check box and entering the number of loops. 4. Click on the location in the page where you want to insert the video and then insert the video from the Insert menu.
464872-7 AppA.F
8/28/01
12:46 PM
Page 291
Answers to Part Reviews
291
5. Streaming video lets you play video as it downloads. Plain video makes you wait until the video finishes downloading. 6. They let you organize and control page elements. 7. By selecting the Draw Tables option in the Table menu. 8. In the Table Properties window. 9. Selecting the cells to merge and then clicking on the Merge Cells button in the Tables toolbar. 10. To create distance between elements in your table. 11. Add a heading row in the table, enter your text, and then apply one of the heading styles to the text. 12. From the Insert side menu within the Table menu. 13. Text wraps within the cell, and the table cell automatically resizes to fit a graphic that is too large for the cell. 14. The Color drop-down box in the Table Properties window. 15. By clicking on the Use background picture check box and browsing for a picture. 16. A form lets users interact with your Web page. 17. By clicking on the Push Button option within the Form option in the Insert menu. 18. Click on an area in the button and insert the graphic from the Insert menu just as you would anywhere else on a Web page. 19. It takes the form and routes it to another location, such as a Web server, for processing. 20. From the Page Templates window.
Sunday Morning Review Answers 1. You can have different sections of a page remain static and have others scroll. 2. There is no universal browser support for frames. 3. From the Frames Pages tab in the Page Templates window. 4. Click on the Target Frame button in the Insert Hyperlink window. 5. By clicking on the Inline Frame option in the Insert menu.
464872-7 AppA.F
8/28/01
12:46 PM
Page 292
292
Appendix A
6. MSNBC, MSN, and Expedia content. 7. By clicking on the Web Components option in the Insert menu. 8. By clicking on the Date and Time option in the Insert menu. 9. When you last save the page or when FrontPage automatically saves the page, whichever you prefer. 10. A scripting language based on Java that you can insert into HTML code. 11. A Java program that downloads into a visitor’s computer so the program can run. 12. A Windows software component for performing certain tasks. 13. You add the script directly in HTML mode. 14. Within the Web Components option that you select in the Insert menu. 15. A GIF file that contains multiple images that display in a certain sequence. 16. Ensure that you have the legal means of displaying animated GIFs — you may have to pay for the privilege. 17. A group of technologies that extend Web functionality. 18. By selecting the text and setting the animation properties in the DHTML Effects toolbar. 19. Through the Page Transitions window that you access in the Format menu. 20. Common Gateway Interface; it defines communications between an information server and a Web server. 21. You use programming languages such as Perl or Visual Basic. 22. Yes, on the Web. 23. Copy the HTML code in the Web page that contains the script reference into the HTML in your Web page. 24. You can test the script when you preview your page. 25. It is a Microsoft technology that combines HTML code, scripts, and COM components. 26. ASP lets you enter script code directly into HTML code. 27. A number of companies provide scripts; many of them can be found on Microsoft’s ASP.NET home page. 28. You enter ASP scripts directly into HTML code. 29. In the Page Options window Compatibility tab.
464872-7 AppA.F
8/28/01
12:46 PM
Page 293
Answers to Part Reviews
Sunday Afternoon Review Answers 1. Using the Discussion Web Wizard. 2. The index page of the discussion Web site. 3. Just as you would with any other Web site. 4. Open up the table of contents file and edit the Form Results Inserted Here text. 5. Because FrontPage 2002 doesn’t let you create chat rooms. 6. Any Microsoft Office component. 7. 24. 8. Any database created in a database program. 9. It helps you integrate a database with your Web site. 10. By clicking on the Database Editor check box in the Database Interface Wizard. 11. Technology that lets you purchase products and services on the Web. 12. Microsoft’s e-commerce technology. 13. Add the bCentral Commerce Manager Add-In, build a catalog, and then create the site using the E-Commerce Wizard. 14. No. 15. Yes. 16. Copying the Web site onto a Web server. 17. So the site has no obvious errors that will cause people not to visit. 18. So the Web pages look as you intend them to look. 19. By setting the page publishing options in the Web Publishing window’s Options window. 20. From the Folders list.
293
464872-7 AppA.F
8/28/01
12:46 PM
Page 294
474872-7 AppB.F
8/28/01
12:46 PM
Page 295
APPENDIX
B What’s on the CD-ROM
T
his appendix provides you with information on the contents of the CD-ROM that accompanies this book.
There are nine programs included on this CD:
Adobe Acrobat Reader Camtasia Dubit Flash Microsoft Internet Explorer Paint Shop Pro Photoshop SnagIt WinZip
Also included is the FrontPage 2002 Weekend Crash Course Assessment Test along with an electronic, searchable version of the book that can be viewed with Adobe Acrobat Reader.
System Requirements Make sure that your computer meets the minimum system requirements listed in this section. If your computer doesn’t match up to most of these requirements, you may have a problem using the contents of the CD.
474872-7 AppB.F
8/28/01
12:46 PM
Page 296
296
Appendix B
For Microsoft Windows 9x or Windows 2000: PC with a Pentium II processor running at 233 MHz or faster At least 128MB of RAM Ethernet network interface card (NIC) or modem with a speed of at least 28,800 bps A CD-ROM drive — double-speed (2x) or faster You will need at least 300MB of hard drive space to install all the software from this CD.
Using the CD with Microsoft Windows To install the items from the CD to your hard drive, follow these steps: 1. Insert the CD into your computer’s CD-ROM drive. 2. A window appears with the following options. Install, Explore and Exit. Install: This will give you the option to install the supplied software and/or the author-created samples on the CD-ROM. Explore: Allows you to view the contents of the CD-ROM in its directory structure. Exit: Closes the autorun window. Note: If you don’t have autorun enabled or if the autorun window doesn’t appear, follow the steps below to access the CD. 1. Click Start ➪ Run. 2. In the dialog box that appears, type d:\setup.exe, where d is the letter of your CD-ROM drive, this will bring up the autorun window described above. 3. Choose the Install, Explore or Exit option from the menu. (See Step 2 that precedes this set of steps for a description of these options.) Follow the step-by-step installation instructions for the individual programs.
474872-7 AppB.F
8/28/01
12:46 PM
Page 297
What’s on the CD-ROM?
297
What’s on the CD The CD-ROM contains various applications and an electronic version of the book. Following is a summary of the contents of the CD-ROM arranged by category.
FrontPage 2002 Weekend Crash Course Assessment Test The CD-ROM contains multiple-choice questions with answers. These questions serve two purposes: You can use these test questions to assess how much FrontPage knowledge you already have and thereby determine what sessions you can skip. Or you can go through them after reading individual sessions or this book in its entirety to assess how much you have learned. The questions are organized by session and therefore follow the order of topics discussed in this book. The session that each question corresponds with is noted next to each question.
Applications The following applications are on the CD-ROM:
Browsers A browser is the client software you use to access files on the Internet or to read local HTML files. Internet Explorer: A Web browser for Windows 9x or later. Commercial version. For more information: www.microsoft.com
Graphics These graphics programs let you create and edit graphics optimized for viewing on the Web. Paint Shop Pro: Lets you create and edit graphics for different media including the Web. Evaluation version. For more information: www.jasc.com Photoshop: Photo editing utility for print and the Web. 30-day trial version. For more information: www.adobe.com
474872-7 AppB.F
8/28/01
12:46 PM
Page 298
298
Appendix B
Multimedia Multimedia programs let you create, capture, and edit animations and video on the Web. Camtasia: Captures action and sound from any part of the Windows desktop into an AVI multimedia file. Evaluation version. For more information: www.techsmith.com Dubit: Lets you add audio to movie clips and images. Evaluation version. For more information: www.techsmith.com Flash: Creates animations that you can display on the Web. Evaluation version. For more information: www.macromedia.com SnagIt: Captures all or part of Windows screens. Evaluation version. For more information: www.techsmith.com
Utilities These utilities help you manage files that you download from the Web. WinZip: The standard file compressor/extractor. Shareware. For more information: www.winzip.com
Electronic version of FrontPage 2002 Weekend Crash Course The complete (and searchable) text of this book is on the CD-ROM in Adobe’s Portable Document Format (PDF), readable with the Adobe Acrobat Reader (also included). For more information on Adobe Acrobat Reader, go to www.adobe.com.
Troubleshooting If you have difficulty installing or using the CD-ROM programs, try the following solutions: Turn off any anti-virus software that you may have running. Installers sometimes mimic virus activity and can make your computer incorrectly
474872-7 AppB.F
8/28/01
12:46 PM
Page 299
What’s on the CD-ROM?
299
believe that it is being infected by a virus. (Be sure to turn the anti-virus software back on later.) Close all running programs. The more programs you’re running, the less memory is available to other programs. Installers also typically update files and programs; if you keep other programs running, installation may not work properly. Turn off any programs that may be running in the background. These programs usually appear as icons at the right side of the Windows taskbar next to the clock. Background programs can take up memory that you may need to run the program. If you still have trouble with the CD, please call the Hungry Minds Customer Care phone number: (800) 762-2974. Outside the United States, call 1 (317) 572-3993. You can also contact Hungry Minds Customer Service by e-mail at [email protected]. Hungry Minds will provide technical support only for installation and other general quality control items; for technical support on the applications themselves, consult the program’s vendor or author.
474872-7 AppB.F
8/28/01
12:46 PM
Page 300
484872-7 index.F
8/28/01
12:46 PM
Page 301
Index accessing FrontPage, 23 Help system, 24–27 Active Server Pages (ASP) functionality, removing from Web pages, 249–250 overview, 247 scripts, placing, 250 scripts, testing, 251 technology, 248 tools, finding on Web, 248 ActiveX controls, placing in Web pages, 229–230 defined, 226 adding ActiveX controls in Web pages, 229–230 animated graphics, 233 background color to tables, 185–186 background images to tables, 186–187 background images to Web pages, 147–148 captions to tables, 183 CGI scripts to Web pages, 242–243 colors to backgrounds, 145–146 colors to Drawing Canvas, 126
columns to tables, 176 confirmation forms, 201 date/time, 222 files to Photo Gallery, 127 fonts, 117 form buttons, 197 frames, 217 graphics to Web pages, 133 hidden form fields, 196–197 horizontal lines, 134 images to form buttons, 198 images to tables, 184 Java applets, 226–228 JavaScript in HTML code, 226 links to Microsoft content, 220 paragraph styles, 87–88 rows to tables, 176 sound, 159–160 tables from templates, 170–171 tasks, 62–65 text links, 104–105 text styles, 85–86 text to tables, 181–182 text to Web pages, 70 themes, 149–150 video, 161 Adobe Photoshop, 132
484872-7 index.F
8/28/01
12:46 PM
Page 302
302 Adobe Web site, 7 Advanced Form Properties dialog box, 197 alignment, tables, changing, 175 AltaVista Web site, 136 analogous colors, 143 animations, 231 animated graphics, 158 Animation Factory Web site, 232 graphics, creating, 232 graphics, inserting, 233 GUIStuff.com Web site, 232 page transitions, 236–237 text, 234–236 ANSI character set, 17 ASP. See Active Server Pages (ASP) audience definition accomplishments, establishing, 8 Adobe Web site example, 7 demographics, 7–8 font color choice, 6–7
Background Sound dialog box, 160 backgrounds color, adding to tables, 185–186 color, adding to Web pages, 145–146 images, adding to tables, 186–187 images, adding to Web pages, 147–148 bCentral Commerce Manager add-in, installing, 274–275 dialog box, 275 Bookmark dialog box, 106–107 Borders and Shading dialog box, 235 browsers, 13 Internet Explorer, 14 Netscape Navigator, 14 video resolution, 15–16 Web-safe colors, 16–17 bulleted lists, 79
Index buttons form buttons, adding, 197 form buttons, adding images to, 198 form buttons, editing, 198 Pencil (Tables toolbar), 169 Push Button Properties dialog box, 196
Camtasia program, 295 captions, adding to tables, 183 cascading style sheets (CSS) adding styles to, 94 creating, 92 embedded, 92, 97 external, 92 linking, 97–98 overview, 92 saving, 95 CD-ROM components, 297–298 installing items on, 296–297 troubleshooting, 298–299 Cell Properties dialog box, 175 cells (table cells) deleting, 178 formatting padding/spacing, 179 merging, 177 splitting, 177–178 CGI (Common Gateway Interface) scripts adding to Web pages, 242–243 CGI Resource Index Web site, 241 downloading, 242 overview, 239 placing, 243–244 programming, 241 testing, 243–244 character sets, ANSI, 17 characters, special, 71 chats, 262 checking spelling. See spell checking
484872-7 index.F
8/28/01
12:47 PM
Page 303
Index chunking, 11–12 Clipboard activating, 266–267 overview, 265–266 Close Web command (File menu), 30 closing Web pages, 30 colors adding to Drawing Canvas, 126 analogous, 143 background, adding to tables, 185–186 background, adding to Web pages, 145–146 color code, 140 contrast, 143 design concepts, 11 dithering, 141 fonts, selecting for audience, 6 Netscape Color Picker, 144 primary, 139, 143 RGB color combination, 139–140 rules for applying, 141–142 secondary, 143 text color, changing, 116–117 Visionquest Image Color Lab, 144 Web-safe, 16–17, 139–141 columns, adding to tables, 176 commands Background (Format menu), 146–147 Bookmark (Insert menu), 106 Close Web (File menu), 30 Copy (Edit menu), 72 Cut (Edit menu), 72 Date and Time (Insert menu), 222 Delete (Edit menu), 65 Delete Cells (Table menu), 178 Draw Tables (Table menu), 169 Drawing Canvas (Format menu), 125 Dynamic HTML Effects (Format menu), 233 E-commerce (Tools menu), 276 Exit (File menu), 32 Folder List (View menu), 284 Horizontal Line (Insert menu), 134
303 Hyperlink (Insert menu), 104, 109 Import (File menu), 31 Inline Frame (Insert menu), 217 Insert (Table menu), 168 Mark Complete (Edit menu), 67 New (File menu), 50 Open (File menu), 258 Page Options (Tools menu), 249 Page Transition (Format menu), 236 Paste (Edit menu), 72 Picture (Insert menu), 122, 133, 184 Preview in Browser (File menu), 55, 280 Print (File menu), 56 Print Preview (File menu), 57 Properties (File menu), 52 Publish Web (File menu), 281 Run (Start), 296 Save (File menu), 58 Save As (File menu), 59 Spelling (Tools menu), 74 Start Task (Edit menu), 66 Style (Format menu), 85 Style Sheet Links (Format menu), 97 Table Properties (Table menu), 174–175 Task Pane (View menu), 202 Tasks (Edit menu), 62 Theme (Format menu), 149–150 Thesaurus (Tools menu), 75 Undo (Edit menu), 115 Web Component (Insert menu), 220, 227, 229, 274 Common Gateway Interface. See CGI (Common Gateway Interface) scripts completing tasks, 67 Confirm Delete dialog box, 65–66, 284 confirmation forms, 201 contrast colors, 143 Copy command (Edit menu), 72 copying styles to another, 95–96 text, 72
484872-7 index.F
8/28/01
12:47 PM
Page 304
304 creating animated graphics, 232 bulleted lists, 79 cascading style sheets (CSS), 92 forms, 190–194 frames, 210–212 numbered lists, 79–80 Photo Gallery, 126–127 simple lists, 78 table headings, 182–183 tables, drawing in Web page, 169 tables, from button bar, 166–167 tables, from menu, 168 tasks, 62–63 CSS. See cascading style sheets (CSS) Cut command (Edit menu), 72
Database Interface Wizard, 267–268 Date and Time dialog box, 222 date/time, adding, 222 definition lists, 80–81 Delete Cells command (Tables menu), 178 Delete command (Edit menu), 65 deleting FrontPage Web sites, 284 search forms, 202 table cells, 178 tasks, 65 text, 115 demographics, targeting audience with, 7–8 design concepts for Web sites, 10–11 DHTML. See Dynamic HTML (DHTML) dialog boxes Advanced Form Properties, 197 Background, 160 bCentral Commerce Manager, 275 Bookmark, 106 Borders and Shading, 235
Index Cell Properties, 175 Confirm Delete, 65–66, 284 Database Interface Wizard, 268 Date and Time, 222 Discussion Web Wizard, 256 E-Commerce Wizard, 277 Font, 236 Form Page Wizard, 191 Form Properties, 199 Format Drawing Canvas, 125–126 Frame Properties, 213–214 Horizontal Line Properties, 135 Import, 31 Insert Component, 221 Insert Hyperlink, 105, 215 Insert Rows or Columns, 176 Insert Table dialog box, 169 Insert Web Component, 229 Java Applet Properties, 227 Link Style Sheet, 98 New Style, 85–86, 94 New Task, 62 Open File, 259 Page Properties, 146, 148, 159 Page Template, 93, 171 Page Transitions, 236–237 Photo Gallery Properties, 127 Picture, 133 Preview in Browser, 55, 281 Print, 57 Publish Web, 282 Push Button Properties, 196 Save As, 59 Saving Results, 200 Select Background Image, 187 Spelling, 74 Split Cells, 178 Style, 85 Target Frame, 216 Task Details, 63–64 Themes, 149–150 Thesaurus, 75 Video, 161
484872-7 index.F
8/28/01
12:47 PM
Page 305
Index dialog boxes Task View, 64–65 Discussion Web Wizard activating, 256–258 adding features to, 257 chats, 262 dialog box, 256 table of contents, editing, 261 testing, 262–263 welcome page, creating, 259–260 dithering, 141 downloading CGI scripts, 242 Draw Tables (Table menu), 169 Drawing Canvas, 122 adding colors to, 126 creating graphics with, 122–123 editing graphics with, 124–126 saving graphics in, 126 window, resizing, 125 drawing tables, 169 Dubit program, 295 dynamic date and time, adding, 222 Dynamic HTML (DHTML), 233–234 Dynamic HTML Effects command (Format menu), 233
e-commerce bCentral Commerce Manager, 274–275 catalogs, building, 275–276 E-Commerce Wizard dialog box, 277 overview, 273 sites, setting up, 274 system, creating, 277–278 Edit menu commands Copy, 72 Cut, 72 Delete, 65 Mark Complete, 67 Paste, 72
305 Start Task, 66 Tasks, 62 Undo, 115 editing fonts, size of, 118–119 form buttons, 197–198 form fields, 195 form option buttons, 195–196 frames, 216 horizontal line properties, 135 Java applet properties, 228 table row size, 174 tasks, 63–65 text, 71 text, color of, 116 e-mail address, linking to, 109–110 Empty Web link (New Page window), 27–28 Exit command (File menu), 32 exiting FrontPage, 32 Extensible Hypertext Markup Language (XHMTL), 22 Extensible Markup Language (XML), 22
File menu commands Close Web, 30 Exit, 32 Import, 31 New, 50 Open, 259 Preview in Browser, 55, 280 Print, 56 Print Preview, 57 Properties, 52 Publish Web, 281 Save, 58 Save As, 59 flowcharts. See storyboarding Folder List command (View menu), 284
484872-7 index.F
8/28/01
12:47 PM
Page 306
306 Folders View, 37 Font dialog box, 236 fonts adding, 117 sizes, changing, 118–119 TrueType, 17 Web-safe, 17–18 Form Page Wizard dialog box, 191 Format Drawing Canvas dialog box, 125–126 Format menu commands Background, 146–147 Drawing Canvas, 125 Dynamic HTML Effects, 233 Page Transition, 236 Style, 85 Style Sheet Links, 97 Themes, 149–150 Format Painter, 114 formatting text, 114 in tables, 185 forms buttons, adding, 197 buttons, adding images to, 198 buttons, editing, 197 confirmation forms, adding, 201 creating, 190–194 fields, editing, 195 form handler, establishing, 199–200 Form Properties dialog box, 199 hidden fields, adding, 196–197 option buttons, editing, 195–196 overview, 190 Saving Results dialog box, 200 search forms, deleting, 202 Frame Properties dialog box, 213–214 frames adding, 217 creating, 210–212 designing, 216 height, changing, 216 naming, 213–214 saving, 218
Index simplicity rules, 210 targets, settings, 214–216 width, changing, 216 Free Site Web site, 226 FrontPage accessing, 23 exiting, 32 Folders View, 37 history of, 5 Hyperlinks View, 40–41 Navigation View, 39 online help system, 24–27 overview, 22 Page View, 36 Reports View, 38 Tasks View, 41–42 window, viewing, 23–24
General tab (Page Properties window), 52 GIF. See Graphic Interchange Format (GIF) goals, Web site goals, 8–9 Go.com Web site, 136 grammar checking, 11 Graphic Interchange Format (GIF), 122 graphics adding to Photo Gallery, 127 Adobe Photoshop program, 132 animated, creating, 232 animated, inserting, 233 design concepts, 11 Drawing Canvas, 122 GIF file formats, 122 inserting into Web pages, 133 Jasc Paint Shop Pro, 132 JPEG file formats, 122 Macromedia Flash program, 132 Photo Gallery, creating, 126–127 resizing, 124 rotating, 125
484872-7 index.F
8/28/01
12:47 PM
Page 307
Index saving, 126 scanning, 132 searching, 136 GUIStuff.com Web site, 232
307
headings, 88 table headings, creating, 182–183 help (online help system) Help link, 25 menu bar Help option, 26 question dialog box, 24 shortcut to, 27 hex notation, 140 hidden form fields, adding, 196–197 Horizontal Line Properties dialog box, 135 horizontal lines adding, 134 properties, changing, 135 HotBot Web site, 136 hotspot graphic, 104 HTML. See Hypertext Markup Language (HTML) Hyperlink command (Insert menu), 104 hyperlinks. See links Hyperlinks View, 40–41 Hypertext Markup Language (HTML), 22 adding JavaScript in, 226
importing themes, 150 Web pages, 31 Inline Frame command (Insert menu), 217 Insert Component dialog box, 221 Insert Hyperlink dialog box, 105, 215 Insert menu commands Bookmark, 106 Date and Time, 222 Horizontal Line, 134 Hyperlink, 104, 109 Inline Frame, 217 Picture, 122, 133, 184 Web Component, 220, 227, 229 Insert Rows or Columns dialog box, 176 Insert Table dialog box, 169 Insert Web Component dialog box, 229 inserting. See adding installing bCentral Commerce Manager add-in, 274–275 CD items, 296–297 interactive forums chats, 262 Discussion Web Wizard, activating, 256–258 Discussion Web Wizard, table of contents, 261 testing, 262–263 welcome page, creating, 259–260
images adding to tables, 184 background images, adding, 147–148 background images, adding to tables, 186–187 shrinking, 185 Import command (File menu), 31 Import dialog box, 31
Jasc Paint Shop Pro, 132 Java defined, 226 Java Applet Properties dialog box, 227 Java applets, adding, 226–228 Java applets, editing properties, 228 JavaScript, 226 Joint Photographic Experts Group (JPEG), 122
484872-7 index.F
8/28/01
12:47 PM
Page 308
308
Layout tab (Photo Gallery Properties dialog box), 128 lines, horizontal adding, 134 properties, changing, 135 Link Style Sheet dialog box, 98 linking cascading style sheets (CSS), 97–98 to e-mail addresses, 109–110 to Web pages, new, 108 within Web pages, 106–107 links, 103 adding to Microsoft content, 220 bookmarks, 106–107 Hyperlinks View, 40–41 Insert Hyperlink dialog box, 105 text links, adding, 104–105 Linux, 14 lists, 77 bulleted, 79 definition, 80–81 numbered, 79–80 simple, 78
Mac Os, 14 Macromedia Flash, 132 Mark Complete (Edit menu), 67 merging table cells, 177 Microsoft ASP.NET Web site, 248 Microsoft content, adding links to, 220 Microsoft SharePoint. See SharePoint Microsoft Web site, 262 moving text, 115 between Web pages, 29 Moving Picture Expert Group (MPEG), 158 MPEG. See Moving Picture Expert Group (MPEG)
Index multimedia, 157 animated graphics media, 158 Background Sound dialog box, 160 graphics media, 158 sound, adding, 159–160 sound media, 158 streaming video, 162–163 text media, 158 video, adding, 161 video media, 158
naming frames, 213–214 Web pages, 52–53 National Center for Supercomputering Applications (NCSA), 240 Navigation View, 39–40 NCSA. See National Center for Supercomputering Applications (NCSA) Netscape Color Picker, 144 Netscape Navigator, 14 New command (File menu), 50 New Page window, 27–28 New Style dialog box, 85–86, 94 New Task dialog box, 62 Normal tab (Page View), 36 notation, hex, 140 numbered lists, 79–80
Office Clipboard activating, 266–267 overview, 265–266 online help system Help link, 25 menu bar Help option, 26 question dialog box, 24 shortcut to, 27
484872-7 index.F
8/28/01
12:47 PM
Page 309
Index Open File dialog box, 259 opening Web pages, in Page View, 50–51 Web pages, new, 27–28
Page Options command (Tools menu), 249 Page Properties dialog box, 146, 148, 159 Page Template dialog box, 93, 171 page transitions, 236–237 Page Transitions dialog box, 236–237 Page View opening Web pages in, 50–51 viewing Web pages in, 36 pages. See Web pages Paint Shop Pro, 295 paragraph styles, 87–88 Paste command (Edit menu), 72 pasting text, 72 Pencil button (Tables toolbar), 169 Photo Gallery adding files to, 127 creating, 126–127 Layout tab, 128 Properties dialog box, 127 Photoshop program, 295 Picture command (Insert menu), 122, 184 Picture dialog box, 133 pixels, video resolution and, 15 placing ASP scripts, 250 CGI scripts, 243–244 plagiarism, 73 Preview in Browser command (File menu), 55, 280 Preview in Browser dialog box, 55, 281 Preview tab (Page View), 36 previewing Web pages, 54–55, 280–281
309 primary colors, 139, 143 Print command (File menu), 56 Print dialog box, 57 Print Preview command (File menu), 57 printing Web pages, 56–57 programming CGI scripts, 241 Properties command (File menu), 52 Publish Web command (File menu), 281 Publish Web dialog box, 281–282 Push Button Properties dialog box, 196
QuickTime, 158
Reports View, 38 resizing Drawing Canvas window, 125 graphics, 124 resolution, 15–16 RGB color combinations, 139–140 rotating graphics, 125 rows adding to tables, 176 table row size, changing, 174 Run command (Start menu), 296
Save As command (File menu), 59 Save As dialog box, 59 Save command (File menu), 58 saving cascading style sheets (CSS), 95 framed pages, 218 graphics in Drawing Canvas, 126 Web pages, 58–59 Saving Results dialog box, 200
484872-7 index.F
8/28/01
12:47 PM
Page 310
310 scanning graphics, 132 search forms, deleting, 202 searching graphics, 136 secondary colors, 143 Select Background Image dialog box, 187 selecting styles, 84 tasks, 63 SGML. See Standard Generalized Markup Language (SGML) SharePoint, 68 shortcuts deleting text, 115 exiting FrontPage, 32 Help window, 27 printing Web pages, 56–57 saving Web pages, 58 simple lists, 78 simplicity, Web sites and, 10 sites. See Web sites SnagIt program, 295 sound adding, 159–160 Background Sound dialog box, 160 special characters, 71 spell checking design concepts, 11 Spelling dialog box, 74 Spelling command (Tools menu), 74 Split Cells dialog box, 178 splitting table cells, 177–178 Standard Generalized Markup Language (SGML), 22 Start menu command, Run, 296 Start Task command (Edit menu), 66 starting tasks, 66 storyboarding, 9–10 streaming video, 162–163 Style command (Format menu), 85 Style dialog box, 85 Style Sheet Links (Format menu), 97 styles adding to cascading style sheets, 94 copying to another, 95–96
Index headings, 88 paragraph, 87–88 selecting, 84 text, 85–86 system requirements, 295–296
Table menu commands Delete Cells, 178 Draw Tables, 169 Insert, 168 Table Properties, 174 tables, 165 adding from templates, 170–171 alignment, changing, 175 background color, adding, 185–186 background images, adding, 186–187 captions, adding, 183 Cell Properties dialog box, 175 cells, deleting, 178 cells, formatting padding/spacing, 179 cells, merging, 177 cells, splitting, 177–178 columns, adding, 176 creating, drawing in Web pages, 169 creating from button bar, 166–167 creating from menu, 168 headings, creating, 182–183 images, adding, 184 Insert Table dialog box, 169 row size, changing, 174 rows, adding, 176 text, adding, 181–182 text, formatting, 185 Tables toolbar items on, 173 Pencil button, 169 tabs General (Page Properties window), 52, 159 HTML (Page View), 36 Layout (Photo Gallery Properties dialog box), 128
484872-7 index.F
8/28/01
12:47 PM
Page 311
Index Normal (Page View), 36 Preview (Page View), 36 Target Frame dialog box, 216 Task Details dialog box, 63–64 Task Pane (View menu), 202 Task View dialog box, 64–65 tasks adding, automatically, 64–65 creating, 62–63 deleting, 65 editing, 63 editing automatically, 64–65 marking as complete, 67 selecting, 63 starting, 66 Tasks command (Edit menu), 62 Tasks View, 41–42 templates, adding tables from, 170–171 testing ASP scripts, 251 CGI scripts, 243–244 e-commerce system, 277 interactive forum, 262–263 text adding to tables, 181–182 animating, 234–236 badly written, 69 color, changing, 116–117 copying, 72 deleting, 115 editing, 71 formatting, 114 formatting, in tables, 185 moving, 115 pasting, 72 special characters, 71 styles, adding, 85–86 typing, 70 themes adding, 149–150 importing, 150 installing additional, 151 removing, 150
311 Themes dialog box, 149–150 Thesaurus dialog box, 75 titles, inserting into Web pages, 52–53 Tools menu commands E-commerce, 276 Page Options, 249 Spelling, 74 Thesaurus, 75 troubleshooting CD-ROM installation, 298–299 TrueType fonts, 17 typing text, 70
Undo command (Edit menu), 115
VGA. See Video Graphics Array (VGA) video adding, 161 streaming video, 162–163 Video dialog box, 161 Video Graphics Array (VGA), 15–16 video resolution, 15–16 View menu commands Folder List, 284 Task Pane, 202 viewing FrontPage window, 23–24 HTML code, 53–54 Web pages, in Folders View, 37 Web pages, in Page View, 36 views Folders View, 37 Hyperlinks, 40–41 Navigation, 39–40 Page View, opening Web pages in, 50–51 Page View, viewing Web pages in, 36 Continued
484872-7 index.F
8/28/01
12:47 PM
Page 312
312 views (continued) Reports View, 38 Tasks View, 41–42 Visionquest Images Color Lab, 144
W3C. See World Wide Web Consortium (W3C) Web browsers, 13 Internet Explorer, 14 Netscape Navigator, 14 video resolution, 15–16 Web-safe colors, 16–17 Web Component command (Insert menu), 220, 227, 229 Web pages adding graphics to, 133 closing, 30 elements, adding, 51 HTML code, viewing, 53–54 importing, 31 moving between, 29 naming, 52–53 opening in Page View, 50–51 opening new, 27–28 previewing, 54–55, 280–281 printing, 56–57 saving, 58–59 titles, inserting, 52–53 viewing in Folders View, 37 viewing in Page View, 36 zooming in/out, 57 Web Pages That Suck Web site, 11, 141 Web-safe colors, 139–141 Web sites accomplishments, establishing, 8 Adobe, 7 AltaVista, 136 Animation Factory, 232 audience, defining, 6–8 bad design of, 11 CGI Resource Index, 241
Index chunking information in, 11–12 colors, Web-safe, 16–17 design concepts, 10–11 font color choice, 6–7 Free Site, 226 FrontPage, deleting, 284 goals, establishing, 8–9 Go.com, 136 good design of, 10–11 GUIStuff.com, 232 HotBot, 136 Microsoft, 262 Microsoft ASP.NET, 248 publishing, 281–282 resolution, 15–16 storyboarding, 9–10 Web Pages That Suck, 11, 141 Yahoo, 136 ZDNet, 6 windows FrontPage, viewing, 23–24 New Page, Empty Web link, 27–28 Page Properties, General tab, 52 WinZip program, 295 World Wide Web Consortium (W3C), 22
XHMTL. See Extensible Hypertext Markup Language (XHMTL) XML. See Extensible Markup Language (XML)
Yahoo Web site, 136
ZDNet Web site, 6 zooming in/out, 57
494872-7 EULA.F
8/28/01
12:47 PM
Page 313
Hungry Minds, Inc. End-User License Agreement READ THIS. You should carefully read these terms and conditions before opening the software packet(s) included with this book (“Book”). This is a license agreement (“Agreement”) between you and Hungry Minds, Inc. (“HMI”). By opening the accompanying software packet(s), you acknowledge that you have read and accept the following terms and conditions. If you do not agree and do not want to be bound by such terms and conditions, promptly return the Book and the unopened software packet(s) to the place you obtained them for a full refund. 1. License Grant. HMI grants to you (either an individual or entity) a nonexclusive license to use one copy of the enclosed software program(s) (collectively, the “Software”) solely for your own personal or business purposes on a single computer (whether a standard computer or a workstation component of a multi-user network). The Software is in use on a computer when it is loaded into temporary memory (RAM) or installed into permanent memory (hard disk, CD-ROM, or other storage device). HMI reserves all rights not expressly granted herein. 2. Ownership. HMI is the owner of all right, title, and interest, including copyright, in and to the compilation of the Software recorded on the disk(s) or CD-ROM (“Software Media”). Copyright to the individual programs recorded on the Software Media is owned by the author or other authorized copyright owner of each program. Ownership of the Software and all proprietary rights relating thereto remain with HMI and its licensers. 3. Restrictions on Use and Transfer. (a) You may only (i) make one copy of the Software for backup or archival purposes, or (ii) transfer the Software to a single hard disk, provided that you keep the original for backup or archival purposes. You may not (i) rent or lease the Software, (ii) copy or reproduce the Software through a LAN or other network system or through any computer subscriber system or bulletin-board system, or (iii) modify, adapt, or create derivative works based on the Software. (b) You may not reverse engineer, decompile, or disassemble the Software. You may transfer the Software and user documentation on a permanent basis, provided that the transferee agrees to accept the terms and conditions of this Agreement and you retain no copies. If the Software is an update or has been updated, any transfer must include the most recent update and all prior versions.
494872-7 EULA.F
8/28/01
12:47 PM
Page 314
4. Restrictions on Use of Individual Programs. You must follow the individual requirements and restrictions detailed for each individual program in Appendix B of this Book. These limitations are also contained in the individual license agreements recorded on the Software Media. These limitations may include a requirement that after using the program for a specified period of time, the user must pay a registration fee or discontinue use. By opening the Software packet(s), you will be agreeing to abide by the licenses and restrictions for these individual programs that are detailed in Appendix B and on the Software Media. None of the material on this Software Media or listed in this Book may ever be redistributed, in original or modified form, for commercial purposes. 5. Limited Warranty. (a) HMI warrants that the Software and Software Media are free from defects in materials and workmanship under normal use for a period of sixty (60) days from the date of purchase of this Book. If HMI receives notification within the warranty period of defects in materials or workmanship, HMI will replace the defective Software Media. (b) HMI AND THE AUTHOR OF THE BOOK DISCLAIM ALL OTHER WARRANTIES, EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE, WITH RESPECT TO THE SOFTWARE, THE PROGRAMS, THE SOURCE CODE CONTAINED THEREIN, AND/OR THE TECHNIQUES DESCRIBED IN THIS BOOK. HMI DOES NOT WARRANT THAT THE FUNCTIONS CONTAINED IN THE SOFTWARE WILL MEET YOUR REQUIREMENTS OR THAT THE OPERATION OF THE SOFTWARE WILL BE ERROR FREE. (c) This limited warranty gives you specific legal rights, and you may have other rights that vary from jurisdiction to jurisdiction. 6. Remedies. (a) HMI’s entire liability and your exclusive remedy for defects in materials and workmanship shall be limited to replacement of the Software Media, which may be returned to HMI with a copy of your receipt at the following address: Software Media Fulfillment Department, Attn.: FrontPage® 2002 Weekend Crash Course™, Hungry Minds, Inc., 10475 Crosspoint Blvd., Indianapolis, IN 46256, or call 1-800-762-2974. Please allow four to six weeks for delivery. This Limited Warranty is void if failure of the Software Media has resulted from accident, abuse, or misapplication. Any replacement Software
494872-7 EULA.F
8/28/01
12:47 PM
Page 315
Media will be warranted for the remainder of the original warranty period or thirty (30) days, whichever is longer. (b) In no event shall HMI or the author be liable for any damages whatsoever (including without limitation damages for loss of business profits, business interruption, loss of business information, or any other pecuniary loss) arising from the use of or inability to use the Book or the Software, even if HMI has been advised of the possibility of such damages. (c) Because some jurisdictions do not allow the exclusion or limitation of liability for consequential or incidental damages, the above limitation or exclusion may not apply to you. 7. U.S. Government Restricted Rights. Use, duplication, or disclosure of the Software for or on behalf of the United States of America, its agencies and/or instrumentalities (the “U.S. Government”) is subject to restrictions as stated in paragraph (c)(1)(ii) of the Rights in Technical Data and Computer Software clause of DFARS 252.227-7013, or subparagraphs (c) (1) and (2) of the Commercial Computer Software - Restricted Rights clause at FAR 52.227-19, and in similar clauses in the NASA FAR supplement, as applicable. 8. General. This Agreement constitutes the entire understanding of the parties and revokes and supersedes all prior agreements, oral or written, between them and may not be modified or amended except in a writing signed by both parties hereto that specifically refers to this Agreement. This Agreement shall take precedence over any other documents that may be in conflict herewith. If any one or more provisions contained in this Agreement are held by any court or tribunal to be invalid, illegal, or otherwise unenforceable, each and every other provision shall remain in full force and effect.
504872-7 Install.F
8/28/01
12:47 PM
Page 316
CD-ROM Installation Instructions The CD that accompanies this book includes the following nine programs: Adobe Acrobat Reader Camtasia Dubit Flash Microsoft Internet Explorer Paint Shop Pro Photoshop SnagIt WinZip Also included is the FrontPage 2002 Weekend Crash Course Assessment Test and an electronic, searchable version of the book that can be viewed with Adobe Acrobat Reader. See Appendix B for details on installing items from the CD.
