Microsoft Office FrontPage 2003

1. Microsoft Office FrontPage 2003 Tutorial 2 – Working with Graphics and Hyperlinks New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

2. Change the background color of a Web page • 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 Office FrontPage 2003 Tutorial 2

3. Change the background color • 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 Formatting 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 Office FrontPage 2003 Tutorial 2

4. The Background tab of the Page Properties dialog box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

5. A Web page with a yellow background New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

6. Insert a picture on a Web page • 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 three most widely used file formats for graphics are GIF, JPEG, and PNG: • GIF files are small and load fast • JPEG files are usually larger than GIF, but are best-suited for photographs • PNG was created as a license-free alternative to GIF • 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 Office FrontPage 2003 Tutorial 2

7. 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 Office FrontPage 2003 Tutorial 2

8. 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 Office FrontPage 2003 Tutorial 2

9. The Marquee Properties dialog box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

10. Add a picture • 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 Office FrontPage 2003 Tutorial 2

11. A Web page with a graphic New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

12. 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 Office FrontPage 2003 Tutorial 2

13. 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 Office FrontPage 2003 Tutorial 2

14. Open an imported page • The imported Web page can be opened by double-clicking 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 Office FrontPage 2003 Tutorial 2

15. View imported pages in Folders view New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

16. 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 Office FrontPage 2003 Tutorial 2

17. Create a hyperlink • 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 Office FrontPage 2003 Tutorial 2

18. Create an e-mail hyperlink • An e-mail hyperlink allows users to click the link to easily send a message to the address embedded in the link. • FrontPage 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, select the text to format as a mailto, and click the Insert Hyperlink button on the Standard toolbar. • In the Insert Hyperlink dialog box, click the E-mail Address button on the Link to bar. • Type the target e-mail address in the E-mail address text box. • If desired, type an optional subject in the Subject text box . • Click the OK button. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

19. A mailto hyperlink in a Web page New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

20. Creating an Image Map • Click the picture in which to create the hotspot to select it. • Click the button for the desired hotspot shape on the Pictures toolbar. • Click and hold down the mouse button while you drag the pointer to specify the desired size of the hotspot on the picture, and then release the mouse button. The Insert Hyperlink dialog box opens. • Click the button on the Link to bar to specify the target of the hyperlink, and then specify the target of the hyperlink on the page that opens. • Click the OK button. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

21. Creating a Hotspot New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

22. Highlighting Hotspots in a Picture • Click the picture that contains the hotspot(s) to select it. • Click the Highlight Hotspots button on the Pictures toolbar. • Click the Highlight Hotspots button again to turn off the highlights. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

23. Creating a Thumbnail Picture • A thumbnail picture is a small picture that contains a hyperlink to a larger version of the same picture, or to any other target, such as a Web page. • If necessary, insert the full-size picture into the Web page in the desired location. • Select the picture. • Click the Auto Thumbnail button on the Pictures toolbar. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

24. Creating a Thumbnail Picture New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

25. Adding Text on a Picture • Click the picture to select it. • Click the Text button on the Pictures toolbar to open a text box on top of the selected picture. If necessary, click the OK button to convert the picture to a GIF file. • Type the desired text. If necessary, press the Enter key to start a new line, and format the text as desired. • Click anywhere in the Web page to close the text box. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

26. Text Added on Thumbnail Picture New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

27. Creating an Interactive Button • An interactive button is a button that displays special effects to change its appearance depending on how the user interacts with it. • Click the location in the Web page to insert the interactive button. • Click Insert on the menu bar, and then click Interactive Button. The Interactive Buttons dialog box opens. • On the Button tab, select the type of button you want to create. Select the default text in the Text box, and then type the text that you want to appear on the button. Finally, click the Browse button to select the target of the hyperlink. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

28. Creating an Interactive Button • If desired, click the Text tab to change the default font, font style, font size, font color, and alignment of the button. • If desired, click the Image tab to change the button’s size, characteristics, background color, or transparency. • Click the OK button. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

29. Interactive Buttons Dialog Box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

30. Applying a Page Transition • A page transition is an animated effect that you can apply to one or more Web pages in a Web site. • With the desired page open in Design view, click Format on the menu bar, and then click Page Transition to open the Page Transitions dialog box. • If necessary, click the Event list arrow, and then select the desired event. • Enter a value (in seconds) in the Duration (seconds) text box. • Click the desired transition effect. • Click the OK button. New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2

31. Page Transitions Dialog Box New Perspectives on Microsoft Office FrontPage 2003 Tutorial 2