XP Microsoft Front Page 2002 Tutorial 2 Creating

XP Microsoft Front. Page 2002 Tutorial 2 – Creating Web Pages With Multimedia, Special Effects, and Hyperlinks New Perspectives on Microsoft Front. Page 2002 Tutorial 2 1

Change the background color of a Web page XP • By default, the background color of all Web pages is white. • Most text and graphics display best on a white background, but there is little visual interest to that. • You can use any of the standard colors or the Web-safe colors available in the More Colors palette. • It is important to emphasize that you select one that coordinates well with the text color you have selected. • If, after making edits, you find that none of the colors work, you can always change back to the white background. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 2

Change the background color XP • To apply a background color, click the Format menu and then click Background to open the Page Properties dialog box. • In the dialog box, select the Background tab. • Click the Background list arrow in the Colors section to display the Standard Colors chart. • Click a color to apply it to the Web page. • Click OK to return to the page and see how it looks. – If the color you chose is too dark, the text will be hard to read and you will have to repeat the process until you find a color that works New Perspectives on Microsoft Front. Page 2002 Tutorial 2 3

The Background tab of the Page Properties XP dialog box This figure shows the background colors palette displayed. You can choose one of the standard colors shown, or click the More Colors button to select a custom color. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 4

A Web page with a blue background XP The blue color that was selected in the previous figure has now been selected and applied to the Web page. Note that this dark blue background and the black text do not go well together. You should either choose a different background color, or change the text color. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 5

XP Apply a theme to a Web site • When a solid background color isn't what you want on a Web page, you can try one of the Front. Page Themes. • Themes are coordinated design elements and color schemes that can be applied to a single page in your Web site or to all of them. • If you don't find a theme that meets your needs, you can modify existing ones or create your own. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 6

Apply a theme XP • To apply a theme, click Format on the menu bar and select Theme. • In the Themes dialog box, you will find a list of all the available themes. • Scroll through them and click on any theme to see a preview of theme in the Sample of Theme box. – Some of themes may not be installed and may require Microsoft Office installation CD to be inserted New Perspectives on Microsoft Front. Page 2002 Tutorial 2 7

The Themes dialog box XP When you click on a theme name in the left hand pane, you will see a preview of that theme in the right hand pane. You can change any aspect of theme by clicking the Modify button at the bottom of the dialog box. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 8

XP Finish applying theme • You can apply a theme to all pages or just selected pages. • Once you've selected a theme, click OK and then click Yes. A message appears indicating that applying theme will change the way your Web page(s) appear. • All the elements in your Web page(s) will change to the elements specified in theme. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 9

A Web page with a theme applied XP This Web page has had a theme applied to it. This theme includes a background, pre-formatted horizontal lines, and colors assigned to the page’s hyperlinks. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 10

Insert a picture on a Web page XP • Web pages need more than text and navigation bars to be interesting. • Logos, graphics, and photographs can all work together to make your site attractive and inviting to the user. • The two most widely used file formats for graphics are GIF and JPEG: – GIF files are small and load fast – JPEG files are usually larger than GIF, but are best-suited for photographs – Most browsers will support both of these formats • When you save a Web page in which you have inserted a picture, you must be sure to save the picture to the Web site's images folder. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 11

Add a picture XP • To add a picture to your Web page, click in the page where you want the picture to be placed. • Click the Insert Picture From File button on the Standard toolbar. • In the Picture dialog box, click the Look in list arrow to locate the picture and double-click it to insert it on your page. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 12

A Web page with a graphic XP This figure shows a graphic inserted on a Web page. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 13

Use sound files in Web pages XP • Just like a theme can add interest to your Web site, so can a sound file. • Sound files come in two formats: WAV or MIDI. WAV files provide higher quality sound, but MIDI files are smaller. • You (and the Web page user) must have a computer equipped with a sound card and speakers to take advantage of this. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 14

XP Add sound to a Web page • To add a sound file to a page: – Click the File menu, and then select Properties – On the General tab, click the Browse button in the Background section – Click the Look in list arrow to browse for the sound file – Double-click the file to select it – You can specify that the sound play forever in the Loop section or use the Loop text box to specify how many times the sound will play. Click OK • You can test the sound file on the Preview tab. • Make sure the sound file is saved in the Web site's images folder. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 15

Sound file considerations XP • While sound files can add interest to a Web page, they also have disadvantages. • One disadvantage is that they take longer to download than page text and most images. • The viewer can lose interest in the page if it takes too long to load. • Also, the overuse of sound clips can cause some people to become irritated at the constant sound and leave before viewing the whole page. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 16

XP Insert a marquee on a Web page • A marquee is an eye-catching graphic that you can add to a Web page. • It's actually a text box that displays a scrolling message that you create. • You can use existing text for the marquee or add new text. • Marquees should be used sparingly because they can easily overpower a page and distract the Web page viewer. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 17

XP Add a marquee • To add a marquee: – Select the text for the scrolling message or click on the page in the area you want the marquee text to appear – Click the Web Component button on the Standard toolbar to open the Insert Web Component dialog box – Click on Dynamic Effects in the Component type list, and then click Marquee in the Choose an effect list – Click the Finish button, and the Marquee Properties dialog box will open – Click OK to activate the marquee • You can apply formats and other characteristics to the marquee using options in this dialog box. • You can test the marquee by first saving the page, then changing to Preview page view. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 18

XP The Marquee Properties dialog box You can create and customize the marquee in this dialog box. There are many options that can be set, including the direction the marquee will run, the timing of each run, the color of the text and the background, etc. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 19

XP Import an existing Web page into a Web site • The ability to import existing Web pages into a Web site can save you the time and effort of re-keying information that's already keyed in and in the proper HTML format. • To import a Web page, be sure the Web site you want to import to is open in the Folders view. • Click the File menu and then click Import. • In the Import dialog box, click the Add File button to open the Add File to Import List dialog box. • Use the Look in list arrow to navigate to the HTML file and double-click it. • You will then return to the Import dialog box where the file's path will display. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 20

XP Import additional pages • You can repeat the process from the previous slide with the Add File button to include multiple files. • Click the OK button to import the selected file(s) into the open Web site. • The new HTML file will display as a page in the Contents pane. • Once the page is part of the Web site, you can double-click it to open it in Page view and modify it like other pages. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 21

XP Open an imported page • The imported Web page can be opened by doubleclicking on the file name in the Contents pane. • The imported file will have the default white background. • If other files already in the Web site have a theme applied, you should apply the same theme to the imported file for continuity. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 22

View imported pages in Folders view XP This figure illustrates the Folders view with an imported Web page, along with the previously existing index. htm page. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 23

XP Insert the contents of a file in a Web page • Entering several paragraphs of text or tables of data to a Web page takes time. • But, if the text or data already exist in another file format, such as Word, Excel, or Access, you can easily import it into the page. • Front. Page will automatically convert it to HTML once it's included on the page. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 24

XP Import text • To import text: – Open the Web page where the text will be included and position your pointer to where you want the data inserted – Open the Select File dialog box – Use the Look in list arrow to navigate to the file you want to insert – Front. Page will only display HTML pages by default, so you will have to change the Files of type list box to All Files, or their specific file type – Find the file in the dialog box and double-click it • The contents of the file will be added to your Web page. • When you double click the file to add it to the Web page, the file will be opened and its contents converted automatically to HTML. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 25

XP A Word file imported into a Web page An example of an imported file in Web page format is shown in this figure. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 26

XP Create bookmarks and hyperlink to them on a Web page • Bookmarks on a page will help users easily navigate through large chunks of text without using the scroll bar. – A bookmark is a named location within the text, which becomes the target for a hyperlink • You can place a table of contents at the top of a Web page and then insert a hyperlink for each entry to its location in the body of text. • The user can then click the contents entry and jump directly to the topic. • At the end of the topic, you can place a hyperlink that takes the user back to the contents. • You need to create your bookmarks first (each one must have a unique name) and then create the hyperlinks to each bookmark. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 27

Create a bookmark XP • To create a bookmark, select the text you want to become a bookmark and click the Insert menu. • Select Bookmark from the menu to open the Bookmark dialog box. • The text that you selected is automatically used as the bookmark name. You can change this name if you like. • Click the OK button. • The text you selected as the bookmark will now be underlined with a dashed line. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 28

The Bookmark dialog box XP This figure shows the text that was selected in the document and the Bookmark dialog box. The selected text will display as the suggested name for the bookmark. You can accept it or you can enter a different name to identify that bookmark. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 29

XP A page with bookmarks inserted This figure shows a page that has had bookmarks inserted into it. Note the bookmarks appear with a dashed underline beneath them. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 30

XP Create a hyperlink for a bookmark • To insert a hyperlink to the bookmark, select the text to use for the bookmark and click the Insert Hyperlink button on the Standard toolbar. • Click the Place in This Document button on the Link bar to display a list of bookmarks in the Web page. • Select the bookmark to be the target of the hyperlink and then click the OK button. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 31

XP Create and test hyperlinks to other Web pages • Select the hyperlink's location on the current Web page and then specify the target Web page. – You should also create return hyperlinks from each page you linked to from the index. htm page – On all the other pages, you should add a Home hyperlink to allow the viewer to instantly return to the home page • You should test all your hyperlinks in a browser. • Click the Preview in Browser button on the Standard toolbar and the browser will open the selected Web page. • Click the hyperlinks to ensure they jump to the correct target. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 32

Create a hyperlink XP • To create hyperlinks to Web pages: – Select the text that will be the link – Click the Insert Hyperlink button on the Standard toolbar • When the Insert Hyperlink dialog box opens: – Click the Existing File or Web Page button – Locate the file name in the file list – Click the OK button New Perspectives on Microsoft Front. Page 2002 Tutorial 2 33

Create an e-mail hyperlink XP • An e-mail hyperlink allows users to click the link to easily send a message to the address embedded in the link. – Front. Page recognizes e-mail addresses when you enter them on a page and automatically changes them to hyperlinks • You simply enter a mailto or select an object, like a mailbox graphic, and the link is automatically set. • To create an e-mail link, open the page where you want to add the email link, click where you want the link to be positioned, and type in the full address, such as jane. smith@xyzcompany. com. • When you press the spacebar, Front. Page will change the text into a hyperlink. • Click the Preview in Browser button so you can test the address in Internet Explorer. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 34

A mailto hyperlink in a Web page XP In this figure a mailto address has been entered into a Web page. Notice that the text automatically appears in a different format then the rest of the text on the page. When you point to the e-mail address in the Web page, the status bar also shows the address to which mail will be sent. New Perspectives on Microsoft Front. Page 2002 Tutorial 2 35