Word
You will have mastered the material in this feature when you can:
Save a Word document as a Web page
Format and preview a Web page
Create and modify a frames page
Insert and modify hyperlinks
Word provides two techniques for creating Web pages. If you have an existing Word document, you can save it as a Web page. If you do not have an existing Word document, you can use Word to create a Web page from scratch. Word has many Web page authoring tools that allow you to incorporate objects such as frames, hyperlinks, sounds, videos, pictures, scrolling text, bullets, horizontal lines, check boxes, option buttons, list boxes, text boxes, and scripts on Web pages.
This Web Feature illustrates how to save the resume created in Project 3 as a Web page. Then, it uses Word to create another Web page that contains two frames (Figure 1a on the next page). A frame is a rectangular section of a Web page that can display another separate Web page. Thus, a Web page with multiple frames can display multiple Web pages simultaneously. Word stores all frames associated with a Web page in a single file called the frames page. When you open the frames page in Word or a Web browser, all frames associated with the Web page are displayed on the screen.
CASE PERSPECTIVE
In Project 3, Benjamin Kane Okamoto created his resume with your assistance (Figure 3-1 on page WD139). Recently, Benjamin has been surfing the Internet and has discovered that many people have their own personal Web pages. Their Web pages contain links to other Web sites and also to personal Web pages such as resumes and schedules. These personal Web pages are very impressive.
To make himself more marketable to a potential employer, Benjamin has asked you to help him create a personal Web page. He wants his Web page to contain a hyperlink to his resume – with the hyperlink on the left side of the page and his resume on the right side of the page. On the left side of the Web page, Benjamin would like another hyperlink called My Favorite Site. When a Web site visitor clicks this link, Benjamin’s favorite Web site (www.scsite.com) will be displayed on the right side of his personal Web page.
Finally, Benjamin wants the e-mail address on his resume Web page to be a hyperlink to an e-mail program. This way, potential employers easily can send him an e-mail message to schedule an interview or request additional information. You show Benjamin how to save his resume as a Web page and incorporate frames and hyperlinks into a Web page.
As you read through this Web Feature, you will learn how to use Word to create a Web page. If you are stepping through this feature on a computer, you will need the resume document created in Project 3. (If you did not create the resume, see your instructor for a copy of it.)
WD 204 • Word Web Feature • Creating Web Pages Using Word
In this Web Feature, the file name of the frames page is Okamoto Personal Web Page. When you initially open this frames page, the left frame contains the title, Benjamin Okamoto, and two hyperlinks — My Resume and My Favorite Site; the right frame displays Benjamin’s resume (Figure 1a). As discussed in Project 3, a hyperlink is a shortcut that allows a user to jump easily and quickly to another location in the same document or to other documents or Web pages. In the left frame, the My Resume hyperlink is a link to the resume Web page, and the My Favorite Site hyperlink is a link to www.scsite.com.
When you click the My Favorite Site hyperlink in the left frame, the www.scsite.com Web site is displayed in the right frame (Figure 1b). When you click the My Resume hyperlink in the left frame, the resume Web page is displayed in the right frame. The resume itself contains a hyperlink to an e-mail address. When you click the e-mail address, Word starts your e-mail program automatically with the recipient’s address (okamoto@earth.net) already filled in (Figure 1c). You simply type a subject and message and then click the Send button, which places the message in the Outbox or sends it if you are connected to an e-mail server.
Once you have created Web pages, you can publish them. Publishing is the process of making Web pages available to others, for example on the World Wide Web or on a company’s intranet. In Word, you can publish Web pages by saving them to a Web folder or to an FTP location. The procedures for publishing Web pages in Microsoft Office are discussed in Appendix C.
This Web Feature is for instructional purposes. Thus, you create and save your frames page and associated Web pages to a floppy disk rather than to the Web.
Once you have created a Word document, you can save it as a Web page so that it can be published and then viewed by a Web browser, such as Internet Explorer. The following steps show how to save the resume created in Project 3 as a Web page.
1. Start Word and then open the file named Okamoto Resume created in Project 3. Click File on the menu bar (Figure 2).
2. Click Save as Web Page on the File menu.
· When Word displays the Save As dialog box, type Okamoto Resume Web Page in the File name text box and then, if necessary, change the Save in location to 31/2 Floppy (A:).
· Click the Change Title button.
· When Word displays the Set Page Title dialog box, type Okamoto Resume Web Page in the Page title text box (Figure 3).
When the Web page is displayed in a browser, it will show the text, Okamoto Resume Web Page, on the title bar.
3. Click the OK button in the Set Page Title dialog box.
• Click the Save button in the Save As dialog box. Word saves the resume as a Web page and displays it in the Word window (Figure 4).
1. On File menu click Save As, click Save as type box arrow, click Single File Web Page, click Save button
Word switches to Web layout view and also changes some of the toolbar buttons and menu commands to provide Web page authoring features. For example, the Standard toolbar now displays a New Web Page button (Figure 4 on the previous page). The Web Layout View button on the horizontal scroll bar is selected.
The resume is displayed in the Word window much like it will be displayed in a Web browser. Some of Word’s formatting features are not supported by Web pages. Thus, your Web page may look slightly different from the original Word document.
When you save a file as a Web page, Word converts the contents of the document into HTML (hypertext markup language), which is a language that browsers can interpret. The Save as Web Page command, by default, saves the document in a format called single file Web page (shown in Figure 3 on the previous page). The single file Web page format saves all of the components of the Web page in a single file that has an .mht extension. This format is particularly useful for e-mailing documents in HTML format. Another format, called Web Page format, saves the Web page in a file and some of its components in a folder. This format is useful if you need access to the individual components, such as images, that make up the Web page. The filtered Web Page format saves the file in Web page format and then reduces the size of the file by removing specific Microsoft Office formats.
If you wanted to save a file using the Web Page format or the filtered Web page format, or any other type of format, you would follow these steps.
1. Click File on the menu bar and then click Save As.
2. When Word displays the Save As dialog box, type the desired file name in the File name box.
3. Click the Save as type box arrow.
4. Select the desired file format in the Save as type list.
5. Click the Save button in the Save As dialog box.
If you have access to a Web server and it allows you to save files to a Web folder, then you can save the Web page directly to the Web server by clicking My Network Places in the lower-left corner of the Save As dialog box (Figure 3). If you have access to a Web server that allows you to save to an FTP site, then you can select the FTP site under FTP locations in the Save in box just as you select any folder to which you save a file. To learn more about publishing Web pages to a Web folder or FTP location using Microsoft Office applications, refer to Appendix C.
In this feature, the e-mail address on the Okamoto Resume Web page is to be formatted as a hyperlink. Also, the colors and formats of elements on the Web page should follow a standard theme. The following sections describe how to modify the Web page to include these enhancements. After modifying the Web page, you will see how to preview the Web page in Word.
The e-mail address in the resume is to be formatted as a hyperlink so that when someone clicks the e-mail address on the Web page, his or her e-mail program starts automatically and displays an e-mail window with the e-mail address already filled in.
The next steps show how to format the e-mail address as a hyperlink.
If you wish to view the HTML source code associated with a
Web page, click View on the menu bar and then click HTML Source, which starts the Script Editor. To close the Script Editor, click File on the menu bar and then click Exit.
For information on guidelines for designing Web pages, visit the Word 2003 More About Web page (scsite.com/ wd2003/more) and then click Web Page Design.
More About
• Select the e-mail address (okamoto@earth.net) and then right-click the selected text (Figure 5).
• Click Hyperlink on the shortcut menu.
• When Word displays the Insert Hyperlink dialog box, click E-mail Address in the Link to bar.
• In the Text to display text box, type okamoto@earth.net and then click the E-mail address text box.
• Type okamoto@earth.net in the E-mail address text box. As soon as you begin typing the e-mail address, Word inserts mailto: in front of the address, which connects the hyperlink to your e-mail program (Figure 6). The text in the Text to display text box will be displayed as the hyperlink text on the screen.
• Click the OK button. Word formats the e-mail address as a hyperlink; that is, it is colored blue and underlined (shown in Figure 7 on the next page).
If you want to test the e-mail address hyperlink, CTRL+click the mouse while pointing to the hyperlink. This should open an e-mail window.
To edit a hyperlink, right-click the hyperlink and then click Edit Hyperlink on the shortcut menu.
The next step is to apply a theme to the Web page. A theme is a predefined set of colors, fonts, and other design elements for backgrounds, graphics, headings, lists, lines, hyperlinks, and tables. By using themes, you easily can make Web pages and other online documents consistent with one another.
The steps on the next page show how to apply a theme to the Okamoto Resume Web Page document.
1. Click Insert Hyperlink button on Standard toolbar
2. On Insert menu click Hyperlink
3. Press CTRL+K
4. In Voice Command mode, say “Insert, Hyperlink”
WD 208 • Word Web Feature • Creating Web Pages Using Word
• Click Format on the menu bar (Figure 7).
• Click Theme on the Format menu.
• When Word displays the Theme dialog box, scroll to Rice Paper in the Choose a Theme list and then click Rice Paper. Word presents a variety of themes in the Theme dialog box (Figure 8).
• Click the OK button. Word applies the Rice Paper theme to the open document (shown in Figure 9).
If you like all elements except for the background in a theme, remove the check mark from the Background Image check box in the Theme dialog box (Figure 8) before clicking the OK button.
In Word, you can see how a Web page looks in your default browser — before publishing it and without actually connecting to the Internet. To do this, use the Web Page Preview command, which displays on the File menu when Word is in Web layout view. The next steps show how to preview a Web page in Word.
1. In Voice Command mode, say “Format, Theme”
• Click File on the menu bar (Figure 9).
• Click Web Page Preview on the File menu.
• If necessary, maximize the browser window. Word opens the Web browser in a separate window and displays the open Web page file in the browser window (Figure 10).
• Click the Close button on the browser title bar to close the browser window. You now are finished modifying the Okamoto Resume Web Page file. The following step describes saving the file again.
Click the Save button on the Standard toolbar.
Word saves the file.
In the previous section, you saved an existing Word document as a Web page. Next, you want to create the frames page that will be divided into two separate frames. The left frame is to contain two links: one to the Okamoto Resume Web Page file just created and one to www.scsite.com.
1. In Windows Explorer, double-click Web page file name
2. In Voice Command mode, say “File, Web Page Preview” Web Page Preview
The following steps show how to create a frames page and then add a frame so the frames page contains two frames side-by-side.
• Click Format on the menu bar and then point to Frames (Figure 11).
• Click New Frames Page on the Frames submenu. Word opens a new document window that contains the Okamoto Resume Web Page in the current frame (called Frame1) and displays the Frames toolbar on the screen (Figure 12).
• Click the New Frame Left button on the Frames toolbar. Word opens a new frame to the left of the current frame (Figure 13). The new frame is called Frame2.
The frames page is divided into two frames, one on the left and one on the right. A frame border separates the frames. The next step is to add text to the left frame, as described below.
With the insertion point in the left frame (Frame2), click the Font Size box arrow. Click 16 in the Font Size list. Type Benjamin Okamoto and then click the Font Size box arrow. Click 12 in the Font Size list. Press the ENTER key twice.
Type My Resume and then press the ENTER key twice.
Type My Favorite Site as the last entry in the left frame.
Word displays the text in the left frame (shown in Figure 14).
More AboutWeb Pages
You can use horizontal lines to separate sections of a Web page. To add a horizontal line at the location of the insertion point, click Format on the menu bar, click Borders and Shading, click the Horizontal Line button, click the desired line type in the Horizontal Line dialog box, and then click the OK button.
The next step is to make the left frame narrower. To do this, you drag the frame border. When you point to and drag the frame border, the mouse pointer shape changes to a double-headed arrow. The following step shows how to resize a Web page frame.
• Drag the frame border to the left until it is positioned between the letters a and m in Okamoto in the left frame (Figure 14). Word narrows the left frame and widens the right frame (shown in Figure 15).
In this feature the left frame uses the Rice Paper theme, except it does not contain a background image. The following steps describe how to apply a theme, without a background image.
1. With the insertion point in the left frame, click Format on the menu bar and then click Theme.
2. When the Theme dialog box is displayed, scroll to and then click Rice Paper in the Choose a Theme list.
3. Place a check mark in the Vivid Colors check box.
4. Remove the check mark from the Background Image check box (Figure 15).
5. Click the OK button.
Word applies the Rice Paper theme, without a background image (shown in Figure 16 on the next page).
In the left frame, you want the text, My Resume, to be a hyperlink to the Okamoto Resume Web Page document. This means when you click the My Resume link in the left frame, the Okamoto Resume Web Page file will be displayed in the right frame. Similarly, you want the My Favorite site text to be a hyperlink. That is, when you click the hyperlink in the left frame, the www.scsite.com Web site should be displayed in the right frame.
The following steps describe how to link the My Resume text in the left frame to an existing Web Page file that will be displayed in the right frame (Frame1) when the user clicks the My Resume link in the left frame (Frame2).
• Drag through the text, My Resume, in the left frame to select it.
• Click the Insert Hyperlink button on the Standard toolbar.
• When Word displays the Insert Hyperlink dialog box, if necessary, click Existing File or Web Page in the Link to bar.
• If necessary, click the Look in box arrow and then click 31/2 Floppy (A:).
• Click Okamoto Resume Web Page.
Word displays the Okamoto Resume Web Page file name in the Address box (Figure 16).
• Click the Target Frame button.
• When Word displays the Set Target Frame dialog box, click the page diagram.
The Set Target Frame dialog box displays a diagram of the left and right frames in the frames page (Figure 17).
• Click the OK button in the Set Target Frame dialog box.
• Click the OK button in the Insert Hyperlink dialog box.
Word formats the selected text as a hyperlink (shown in Figure 18). When you click the My Resume link in the left frame, the Okamoto Resume Web Page file will be displayed in the right frame.
The following steps describe how to link the My Favorite Site text in the left
frame to a Web site that will be displayed in the right frame.
1. Drag through the text, My Favorite Site, in the left frame.
2. Click the Insert Hyperlink button on the Standard toolbar.
3. When Word displays the Insert Hyperlink dialog box, if necessary, click Existing File or Web Page in the Link to bar. Type www.scsite.com in the Address text box.
4. Click the Target Frame button. When Word displays the Set Target Frame dialog box, click the right frame in the diagram (Figure 18).
5. Click the OK button in each dialog box.
Word formats the text, My Favorite Site, as a hyperlink that, when clicked, displays the associated Web site in the right frame (shown in Figure 1b on page WD 204).
If you wanted to edit an existing hyperlink, you right-click the hyperlink text and then click Edit Hyperlink on the shortcut menu. Word will display the Edit Hyperlink dialog box instead of the Insert Hyperlink dialog box. Other than the title bar, these two dialog boxes are the same.
The next task is to modify the frame properties of the left frame so it does not display a scroll bar between the left and right frames, as shown on the next page.
1. Right-click selected text, click Hyperlink on shortcut menu
2. With text selected, click Hyperlink on Insert menu
3. With text selected, press CTRL+K
For a table that lists how to complete the tasks covered in this book using the mouse, menu, shortcut menu, and keyboard, see the Quick Reference Summary at the back of this book, or visit the Word 2003 Quick Reference Web page (scsite.com/ wd2003/qr).
To add color to an online document or e-mail message, highlight the text. Highlighting alerts the reader to the text's importance, much like a highlight marker does in a textbook.
To highlight text, select it, click the Highlight button arrow on the Formatting toolbar, and then click the desired highlight color.
• With the insertion point in the left frame, click the Frame Properties button on the Frames toolbar.
• When Word displays the Frame Properties dialog box, if necessary, click the Borders tab.
• Click the Show scrollbars in browser box arrow and then click Never.
The Borders sheet in the Frame Properties dialog box allows you to set options related to the frame borders (Figure 19).
• Click the OK button.
Word formats the border to no scroll bar.
The next step is to save the frames page with a file name and specify the title to be displayed on the Web page title bar, as described below.
1. Insert your floppy disk into drive A. Click File on the menu bar and then click Save as Web Page.
2. &#...
Januszek66