Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... 5 Creating a Web... 6 Creating a Web using a Wizard... 6 Creating a Web Using a Template... 7 Creating a New Page in Page View... 8 Changing the Web Page Title... 9 Viewing the HTML Source Code... 10 Previewing a Web Page... 10 Linking Web Pages... 10 Linking to a Web Page in the Current Web... 10 Testing Hyperlinks... 11 Linking to a Web Page on the Internet... 11 Creating a Hyperlink to an E-Mail Address... 12 Editing a Hyperlink... 12 Creating Bookmarks... 13 Adding Style to a Web Page... 14 Applying a Theme... 14 Using the Format Painter... 15 Formatting Web Pages... 15 Creating and Formatting a Bulleted List... 15 Creating a Numbered List... 15 Inserting a Table... 16 Adding Table Rows and Columns... 16 Merging Table Cells... 17 Deleting Table Rows and Columns... 17 Formatting a Table... 17 Formatting a Cell(s)... 18 Adding Graphics and Components... 18 Inserting a Picture... 18 Exploring the Clip Art Gallery... 19 Converting the Images into Hyperlinks... 19 Creating Hot Spots... 20
Inserting a Marquee... 20 Inserting an Interactive Button... 21 Inserting a Background... 22 Working with Frames... 23 Targeting Frames... 24 Optimizing Web Site Downloading Time... 24 Tips for Speeding up Web Site Download Time... 24 For additional written instructional guides, visit us @ http://www.calstatela.edu/handouts Introduction to Microsoft FrontPage 2003-2
Introduction to Microsoft FrontPage 2003 FrontPage 2003 is a software application for creating and modifying entire Web sites or single Web pages. The program provides an enhanced design environment, layout and design tools, and templates to help the user realize the Web site vision without any knowledge of HTML (Hyper Text Markup Language). It also offers an HTML interface with color-coded command lines and organized formatting. After a Web page has been created using FrontPage, the user will still need to load it on a server for the site to become part of the Internet. This guide is an introduction to FrontPage 2003 and illustrates the basic functions the program offers. Please start from the beginning for a general overview, or choose a desired topic from the Contents page. Launching FrontPage There are six Open Access Labs (OALs) on Campus. Microsoft FrontPage can be launched from any OAL. To open FrontPage in an Open Access Computer Lab: 1. Select the Start menu at the bottom left corner of the screen. 2. Select the All Programs menu. 3. Select the Microsoft Office 2003 folder. 4. Click the Microsoft FrontPage icon. A shortcut way to open FrontPage 2003 is to double-click the MS Office 2003 folder on the desktop and double-click the Microsoft FrontPage icon. Working with the FrontPage Interface Like other Microsoft Office applications, the FrontPage window has a Title bar, Menu bar, and Standard and Formatting toolbars. These items function the same as in other Microsoft Office applications (see Figure 1). Besides the default toolbars, additional toolbars are available. To quickly access help, use the Type a question for help box on the Menu bar. Below the toolbars is the FrontPage workspace in which Web pages or Websites are created. On the left side of the workspace is the Folders List followed by the Page View frame and the Task Pane on the right side. At the bottom is the Status Bar, which displays various types of status information, such as the URL (Uniform Resource Locator) to which a hyperlink points. Introduction to Microsoft FrontPage 2003-3
Figure 1 - FrontPage Interface VIEW OPTIONS There are several ways to look at the content of the website as it is created. Using different views of the page(s) allows the user to design, publish, and manage the website. Additionally, the different views assist in solving site problems and make the whole Web creation, revision, and publication process more effective. Depending on the tab selected in the Page View frame, the different views will be available (see Figure 1). Table 1 Views Options View Option View Page View Design Split Code Preview Description This is the default Page View. This view allows the user to view a document as it will appear in the final form and to directly edit the text, graphics, and other elements on the page. Allows reviewing and editing Web page content in a split screen format that offers the user simultaneous access to both the Code and Design views. Allows the user to write and edit HTML tags. With the optimized features in FrontPage, a user can create clean HTML, and remove any unwanted code. Allows the user to see an approximation of how the page will look in the Web browser without having to save the page. Introduction to Microsoft FrontPage 2003-4
View Option View Web Folders Site View Remote Web Site Reports Navigation Hyperlinks Tasks Description Similar to Microsoft Windows Explorer, allows the user to create, delete, copy, and move folders. Used for publishing an entire Website or for selectively publishing individual files. Also allows the user to synchronize files between two or more locations that is, make sure that sites with the same content are upto-date with recent changes. Allows analyzing the content of a Website after running a report query. A user can calculate the total size of the files in their site, show which files are not linked to other files, identify slow or outdated pages, group the files by task or by person assigned to, etc. Provides a hierarchical view of the Web pages. This view enables the user to arrange the pages in their site by selecting a page and moving it to a new location in the site. Shows the status of the hyperlinks in the Website in a list. This list includes both internal and external hyperlinks and uses icons to indicate whether the hyperlinks have been verified or are broken. Displays all the tasks for creating the Website in a column format and provides current information about each task under various headings. THE FOLDERS LIST The Folders List displays all folders and files in the current Web. The currently selected page is displayed in the Page View frame (see Figure 1). A user can open and manage Web pages and navigate a Web using the Folder List. Table 2 Folder List Folder main folder Explanation The default folder that FrontPage uses for storing Web pages, images, and Java files. FrontPage creates this folder within the My Webs folder on the hard disk. The name of the main folder is determined when the user names the Web. _private FrontPage stores form results in this folder. The user can also use this folder to create subfolders containing files that can be viewed by other Web developers in the team but cannot be viewed by visitors to the Web site. images The folder containing image files, if images are used. If there are a large number of image files, this folder helps remove clutter from the main folder. THE PAGE VIEW FRAME The Page View frame displays the contents of a selected page. It has four different views (see Table 1). Figure 2 shows the web page in the Preview option. Introduction to Microsoft FrontPage 2003-5
Figure 2 Previewing a Web in the FrontPage Window Creating a Web Web sites contain multiple pages that are all interconnected. In FrontPage, this is referred to as a Web. A user can create a Web in FrontPage using three different methods: using a wizard, a template, or creating a new Web from scratch. The method selected depends on the specific needs and situation. If the user is not sure how to start, then a template or wizard may be used to assist in creating a Web site. CREATING A WEB USING A WIZARD FrontPage wizards are best used for complex Webs. Wizards walk the user through the process of creating a page. Each wizard creates a different type of Web using a series of dialog boxes in which specific options are selected to fit the desired design (see Table 3). Table 3 - FrontPage Wizards Wizard Description Corporate A Web for a company. It includes: a home page, a table of Presence contents, a What s New page, Product/Service pages, a Customer Feedback page, and a page that allows a visitor to Search the site. Customer A Web in which a company can answer customer questions and get Support feedback. It combines a message board with several other features, such as a frequently asked questions (FAQ) list, a suggestions form, and an area for downloads. Discussion A Web with a message board. It allows visitors to view, post, and reply to messages on a Web site. Import A Web from files stored in a folder on the local hard disk, on a network drive, or from a site already on the Internet. If the wizard is used, it is a good idea to save the work to a higher capacity storage disk (i.e., a flash drive or the hard drive on the local computer). Introduction to Microsoft FrontPage 2003-6
To use a wizard: 1. Select the File menu on the Menu bar. 2. Select the New command. The New Task Pane appears on the right side of the work area (see Figure 3). 3. Select the More Web site templates link from the New Web site section. The Web Site Templates dialog box opens (see Figure 4). All wizard icons have a magic wand in the picture; for example the Corporate Presence Wizard icon. 4. Select the appropriate type of Web site (or wizard). 5. Enter a location to store the web in the Specify the location of the new Web site: text box. Figure 3 - New Task Pane The name of the new web folder must be specified after defining the location (i.e. My Documents\My Webs\NewWeb ). Figure 4 - Web Site Templates Dialog Box 6. Click the OK button. 7. Follow the series of dialog boxes. 8. After the wizard is complete, save the work by clicking the Save button on the Standard toolbar. CREATING A WEB USING A TEMPLATE Unlike wizards, which prompt a user for information and then design a Web based on that input, templates are ready-made Webs or Web pages that the user can modify. Introduction to Microsoft FrontPage 2003-7
Table 4 - FrontPage Templates Template Customer Support Project Web Personal Web Share Web One Page Web Empty Web Description A Web site in which a company can answer customer questions and get feedback. It combines a message board with several other features, such as a frequently asked questions (FAQ) list, a suggestions form, and an area for downloading information and software. A Web site to share information about a project with members of a project team. It includes a page that lists team members, a schedule page, a project status page, a message board, and a search page. A Web site to showcase the interests of an individual. It includes a home page, a photo album page, an interest page, and a Web page for links to other Web sites. A Web site with a team events calendar, library for shared documents, task list, contact list, and more. A Web site with only a home page. A User might want to use this template as a starting point, adding other pages as work is completed. A Web site that the user builds from scratch. FrontPage creates folders for the site but does not include any Web pages. To use a template: 1. Select the File menu from the Menu bar. 2. Select the New command. The New Task Pane appears (see Figure 3). 3. Select the More Web site templates link from the New Web site section. The Web Site Templates dialog box opens (see Figure 4). 4. Select a template. Templates are the icons without the wand image. 5. Enter a location to store the web in the Specify the location of the new web site: text box. 6. Click the OK button. 7. Make the necessary changes to the template. 8. After the web creation is complete, save the work by clicking the Save button on the Standard toolbar. CREATING A NEW PAGE IN PAGE VIEW The Web site can consist of a single Web page. If there is a lot of content, the user may want to have multiple pages in the Web site. Adding pages is a simple task. A user can either create a new page or import an existing page and add it to the existing Web site. When creating a page in the Page View frame, the user can use the wizards or the templates. However, if a page is added in any other view, FrontPage creates a new blank page. FrontPage also includes page templates that can be used for individual pages, rather than a complete Web site. Introduction to Microsoft FrontPage 2003-8
Table 5 - Template Types Template Name Home What s New Products/Services Table of Contents Feedback Form Search Form Description A home page containing information that the user specifies. A page with information about new pages or other updates on the Web site. One or more pages about products or services offered by a company, with a description of each product or service, benefits, part numbers, and pricing. Lists all the pages in the Web site, with a hyperlink to each page. Allows a Web site visitor to send feedback to a specified e-mail. Allows a Web site visitor to search the Web site for pages containing specific words. To use a template to create a page: 1. Select the File menu from the Menu bar. 2. Select the New command. The New Task Pane appears (see Figure 3). 3. Select the More Page templates link from the New Page section. The Page Templates dialog box opens (see Figure 5). 4. Select the template. 5. Click the OK button. Figure 5 Page Templates Dialog Box CHANGING THE WEB PAGE TITLE The file name for a Web page can be different from the title of the Web page. The title is the text that appears in the Title bar of a Web browser when someone is viewing the page. FrontPage uses the file name for a page title automatically unless specified differently. To change the page title: 1. In the Folder List, right-click the page whose title should be changed. The drop-down menu appears. Select the Properties command. The Properties dialog box opens. Selected the General tab (see Figure 6). 2. In the Title: text box, type in the title of the Web page. 3. Click the OK button. 4. Click the Save button on the Standard toolbar. FrontPage saves the home page with its new title. Figure 6 - Page Properties Introduction to Microsoft FrontPage 2003-9
VIEWING THE HTML SOURCE CODE FrontPage allows editing of the HTML source code of Web pages. An experienced user will find this useful, especially when editing code that is not visible when working in the Design View. FrontPage color codes the HTML links, text, and tags to make it easier to edit the code. To edit HTML source code: Click the Code button in the Page View frame (see Figure 2). PREVIEWING A WEB PAGE FrontPage provides a preview of what the pages will look like to Web visitors (in a simplified view). It is a good practice to preview a page before it is posted on the World Wide Web. Pages can be previewed in the FrontPage window, but it is more accurate to preview a page in a browser such as Internet Explorer, Netscape Navigator, or Mozilla Firefox. To preview the Web page in the FrontPage window: Click the Preview button in the Page View frame (see Figure 2). To preview the Web page in a Web browser: 1. Click the Preview in Browser button on the Standard toolbar. FrontPage opens the default Web browser and displays the page within it. The title given to the page appears in the Title bar of the browser (see Figure 7). 2. Click the Close button in the top-right corner of the Web browser to close the browser window. Figure 7 - Previewing a Web in a Web Browser Linking Web Pages A hyperlink, often called a link, is a crucial part of any Web site. Hyperlinks are the connections between elements on Web Pages. Hyperlinks are what make surfing the Internet possible. A hyperlink can be a word, phrase, symbol, or image. LINKING TO A WEB PAGE IN THE CURRENT WEB Each hyperlink has two parts: the hyperlink itself and the target (which is the destination file displayed after a visitor clicks the hyperlink). When the visitor moves the mouse pointer over a hyperlink, the cursor changes from an arrow to a hand. This tells the visitor that the pointer is over a hyperlink. Introduction to Microsoft FrontPage 2003-10
To create a hyperlink: 1. Create and save two new pages. Save the first as index.htm and the other as new_page_1.htm. Refer to: Creating a New Page in Page View to create the new Web pages. 2. Insert some information on the pages to distinguish between the two pages. 3. On the home page (index.htm), type [New Page] and select the text. 4. Click the Insert Hyperlink button on the Standard toolbar. FrontPage displays the Insert Hyperlink dialog box (see Figure 8). The user may also select the Hyperlink command from the Insert menu on the Menu bar. 5. Select the file new_page_1.htm. 6. Click the OK button. Figure 8 - Create Hyperlink Dialog Box Testing Hyperlinks Testing a hyperlink is much like previewing a Web page. The purpose of testing the link is to make sure that it works properly in the browser. The user can test the links by clicking the Preview button in the Page View frame, or by launching a Web browser. Selecting a link in either of these views will test it. LINKING TO A WEB PAGE ON THE INTERNET Creating links to a site outside the Web adds versatility to the site. Visitors realize that the web site developer(s) had their interests in mind because links make it easy to obtain additional information. For example, the Web site may have a link to the university. To insert a hyperlink to another Web page: 1. Click the Design button in the Page View frame. 2. On the web page, type [CSULA]. 3. Highlight CSULA and click the Insert Hyperlink button on the Standard toolbar. FrontPage displays the Insert Hyperlink dialog box. 4. In the Address: text box and type [http://www.calstatela.edu]. Introduction to Microsoft FrontPage 2003-11
5. Click the OK button. 6. Click the Save button and test the link. CREATING A HYPERLINK TO AN E-MAIL ADDRESS When a visitor clicks the e-mail hyperlink, the Web browser starts the default e-mail program and displays a message composition window with the e-mail address already entered. Having an e-mail link is a way to get feedback from the visitor. To create an E-mail link: 1. Click the Design button in the Page View frame. 2. On the web page, type [E-mail Me] and select the text. 3. Click the Insert Hyperlink button on the Standard toolbar. The Insert Hyperlink dialog box opens. 4. On the Insert Hyperlink dialog box, click the E-mail Address button. The Insert Hyperlink dialog box changes to accommodate creation of an e-mail link (see Figure 9). Figure 9 - Create E-mail Hyperlink Dialog Box 5. Type the e-mail address in the E-mail address: text box. 6. Click the OK button. EDITING A HYPERLINK Hyperlink targets often change. For example, the name of a Web page file might change, or a Web page might be moved to a different Web site. When such a change occurs, the user needs to edit any hyperlinks that change to maintain connectivity to the correct target. To edit a hyperlink: 1. Click the Design button in the Page View frame. 2. Right-click the link to be changed and select the Hyperlink Properties command from the shortcut menu. The Edit Hyperlink dialog box opens (see Figure 10). 3. Select a new file from the file list or type in the new URL in the Address: text box. 4. Click the OK button. Introduction to Microsoft FrontPage 2003-12
Figure 10 - Edit Hyperlink Dialog Box CREATING BOOKMARKS When a Web page has lengthy content that cannot be displayed within a single screen, site visitors must scroll down the page to see all of the content. Scrolling lengthy Web pages can be a cumbersome process. A bookmark can help solve this problem by creating links to specific sections of a Web page. To link to a location within the same page: 1. Click the Design button in the Page View frame. 2. Select the text to assign a bookmark to. 3. Select the Insert menu on the Menu bar. 4. Select the Bookmark command. The Bookmark dialog box opens (see Figure 11). 5. Type the bookmark name in the Bookmark name: text box, i.e. Campus Events. 6. Click the OK button. Notice that the text on the Web page is now underlined with a broken line. This means that the text has been bookmarked as a target. Only IE 6.0 or later recognizes bookmark names with spaces. (Netscape and Firefox do not). Figure 11 - Bookmark Dialog Box 7. Go to the beginning of the document and type in the text for a hyperlink. (i.e. Calendar ). 8. Highlight the text and click the Insert Hyperlink button on the Standard toolbar. The Insert Hyperlink dialog box opens. 9. Click the Bookmark button and select the desired bookmark name (in this case Campus Events followed by the OK button. The following text should be in the Address: text box once the bookmark name is selected: #Campus Events. 10. Click the OK button. 11. Test the bookmark the same as hyperlinks. To link to a location of another page: 1. Go to another page in the Web, and type the text Calendar. Introduction to Microsoft FrontPage 2003-13
2. Highlight the text and click the Insert Hyperlink button on the Standard toolbar. The Insert Hyperlink dialog box opens. 3. Select the file or page that has the bookmark to link to (In this case, the page that has the bookmark Campus Events ). 4. Under the Bookmark drop-down list, select the bookmark Campus Events. (The following text should be in the Address: text box: Title of the page.htm#campus Events ). 5. Test the bookmark the same as hyperlinks. Adding Style to a Web Page When a Web page is designed, developers want to make sure that it attracts visitors. Using FrontPage 2003, a user can easily add graphic elements to emphasize the content of the Web. FrontPage has several built-in features that allow the user to insert graphic elements, design themes, and dynamic components to the Web page. APPLYING A THEME A theme is a set of design elements and color schemes that the user can apply to the Web pages. The user can choose to apply the theme to every page of a Web or only to specific pages. Themes are useful if is desired to keep a consistent look throughout the entire Web. To apply a theme to a Web site: 1. Select the Format menu on the Menu bar. 2. Select the Theme command. The Theme task pane opens (see Figure 12). 3. Scroll the list of available themes in the Select a theme section. 4. Select any of the check boxes on the bottom of the task pane as desired. 5. Hover the mouse pointer over the selected theme, for example Breeze. The drop-down arrow appears on the right side of the selected theme. 6. Click the drop-down arrow. The drop-down menu appears (see Figure 13). 7. Select the necessary options. 8. Click the OK button to apply the theme Figure 12 - Theme Task Pane Figure 13 Drop-Down Menu for the Selected Theme Introduction to Microsoft FrontPage 2003-14
USING THE FORMAT PAINTER Changing the style for text can be a repetitive process. If a text style is created for a certain part of the page and it is necessary to apply the same style to other parts, the user would have to change the styles one section at a time. A feature that can be used to simplify this process is the Format Painter. The Format Painter allows the user to apply the style of one section to other sections of the page in fewer steps. It works for characters, words or paragraphs. To apply a style with Format Painter: 1. Select the text with the desired style. 2. Click the Format Painter button on the Standard toolbar. Notice that the cursor changes into a paintbrush icon. 3. Highlight the destination text where the desired style is to be applied. To apply the same style to several locations: 1. Select the text with the desired style. 2. Double-click the Format Painter button on the Standard toolbar. Notice that the cursor changes into a paintbrush icon. 3. Highlight the destination text where the desired style is to be applied. The Format Painter will stay active allowing the user to highlight one location after another and apply the desired text characteristics. 4. When done, disable the Format Painter by clicking the Format Painter button again. Formatting Web Pages Besides adding style to the Web site, a user might also consider formatting the text to make information easier to find. If there are large sections of plain text, it may be possible to organize it into lists to facilitate reading. The user can also add tables to organize the information. CREATING AND FORMATTING A BULLETED LIST Lists can be organized by adding bullets or numbers. If the order of the items in the list is important, use a numbered list. Otherwise, use a bulleted list. To create a bulleted list: 1. Highlight the text to include in the list 2. Click the Bullets button on the Formatting toolbar. To remove or undo bulleting, highlight the bulleted list and click the Bullets button again. CREATING A NUMBERED LIST When the order of the list is important, a numbered list is preferable to indicate the correct sequence. To create a numbered list: 1. Highlight the text to include in the list. 2. Click the Numbering button on the Formatting toolbar. Introduction to Microsoft FrontPage 2003-15
To remove or undo the numbering, highlight the numbered text and click the Numbering button again. INSERTING A TABLE A table allows the user to present the data in a row-and-column format. In addition, it allows positioning text and graphics in a more organized manner. To insert a table: 1. Position the cursor at the point where the table should be inserted. 2. Select the Table menu on the Menu bar. 3. Select the Insert command. 4. Select the Table option. The Insert Table dialog box opens (see Figure 14). 5. In the Size section, select the number of columns and rows of the table. 6. Select the appropriate options in the Layout and Borders sections. 7. Select a background color, or click the Use background picture check box to select a background picture if these options are desired. 8. Click the Set as default for new tables check box if necessary. 9. Click the OK button. Figure 14 - Insert Table Dialog Box Adding Table Rows and Columns When updating a Web, a user may need to add rows or columns to a table. FrontPage makes this task quick and easy to perform. To add more rows or columns after creating the table: 1. Click the cursor at the location in the table to insert an extra row or column. 2. Select the Table menu on Menu bar. 3. Select the Insert command. 4. Select the Rows or Columns option. The Insert Rows or Columns dialog box opens (see Figure 15). 5. Click the Rows or Columns option button to select the appropriate option. The appearance of the dialog box changes depending on the selected option. 6. Specify the number of rows or columns to insert in the Number of rows: spin box. Introduction to Microsoft FrontPage 2003-16
7. Select the proper option button for where to add the rows or columns in the Location: section. 8. Click the OK button. Figure 15 - Insert Rows or Columns Dialog Box Merging Table Cells If the original table is not sufficient it can be modified. Sometimes merging cells can solve the problem. Merging cells gives the user larger cells and a different table layout. To merge cells: 1. Select the cells to merge. 2. Select the Table menu on the Menu bar. 3. Select the Merge Cells command to create an expanded cell. Cells can be merged only if adjacent in the same column or row. Deleting Table Rows and Columns Sometimes a user might want to delete columns or rows from the table. To delete rows and columns: 1. Select all the column or row to delete. 2. Select the Table menu on the Menu bar. 3. Select the Delete Cells command. FORMATTING A TABLE After the user types in the text, the table may be customized to make the contents fit better. Customizing can include making a column wider, a row higher, or changing the display of the border to make the text more readable. To change the properties of a table: 1. Right-click anywhere in the table. A drop-down menu appears. 2. Select the Table Properties command. The Table Properties dialog box opens (see Figure 16Error! Reference source not found.). 3. Make the desired changes. 4. Click the Apply button to apply the changes. 5. Click the OK button. Introduction to Microsoft FrontPage 2003-17
Figure 16 Table Properties Dialog Box Figure 17 Cell Properties Dialog Box FORMATTING A CELL(S) The user can change cell format to give the text a better appearance in the table. To change the properties of a cell: 1. Select the cell(s) to change. 2. Right-click inside any of the cells that are selected. 3. Select the Cell Properties command from the drop-down menu. The Cell Properties dialog box opens (see Figure 17Error! Reference source not found.). 4. Make the necessary changes. 5. Click the Apply button to apply the changes. 6. Click the OK button. Adding Graphics and Components It is often useful to add multimedia elements such as images, sounds, animations, etc. to help catch the attention of the viewer. INSERTING A PICTURE Some of the image formats and their file extensions that can be used in Web pages include: GIF: Graphics Interchange Format (.gif) JPEG: Joint Photographic Experts Group (.jpg) PNG: Portable Network Graphics (.png) These formats are the best for Web page use since their small size allows for quick download times to visitors. To insert a picture file: 1. Select the Insert menu on the Menu bar. 2. Select the Picture command. 3. Select the From File option. The Insert Picture dialog box opens. 4. Locate the image file and select it. 5. Click the OK button. Introduction to Microsoft FrontPage 2003-18
EXPLORING THE CLIP ART GALLERY Besides the pictures saved as scanned images, photographs, or drawn objects, FrontPage also offers a Clip Art Gallery. The Clip Art Gallery contains many images, sounds, and animations that can be added to the pages. To explore the Clip Art Gallery: 1. Select the Insert menu on the Menu bar. 2. Select the Picture command. 3. Select the Clip Art option. The Clip Art Task Pane opens (see Figure 18Error! Reference source not found.). Figure 18 Clip Art Task Pane Figure 19 Drop-Down Menu for the Selected Clip Art 4. Type in the keywords of the desired clip art in the Search for: text: text box. 5. Click the Go button. The search results appear. 6. Hover the mouse pointer over the selected clip art. The drop-down arrow appears on the right side. 7. Click the drop-down arrow. The drop-down menu appears (see Figure 19Error! Reference source not found.). 8. Select the Insert command to insert the clip art. The user may also click anywhere on the image to insert the picture directly onto the Web page. Converting the Images into Hyperlinks Once an image has been inserted, it can be used as a hyperlink. To convert an image into a hyperlink: 1. Insert an image, either a clip art or a picture from a file, as described above. 2. Click anywhere on the image that was inserted. This will select the image (indicated by the handle bars - small black boxes on each side and at each corner of the image). 3. Click the Insert Hyperlink button on the Standard toolbar. The Insert Hyperlink dialog box opens. 4. Type the address in the Address: text box or choose an existing page or file. 5. Click the OK button. Introduction to Microsoft FrontPage 2003-19
6. Test the hyperlink. Creating Hot Spots Creating a hot spot is similar to converting an image into a hyperlink. While there can be only one hyperlink in an image, hot spots are hyperlinks in particular areas of an image. Hot spots are commonly used in image mapping. To create a hot spot: 1. Insert an image (see Inserting a Picture). 2. Click anywhere on the image and ensure that the Pictures toolbar is open (see Figure 20). Figure 20 - Pictures Toolbar 3. Depending on the image, choose the best hot spot option for highlighting certain spots. 4. Select the hot spot. a. When using the Rectangular Hotspot, click at a corner of the desired hot spot area and drag the cursor to the opposite corner. b. When using the Circular Hotspot start from the center of the area to highlight, and drag the cursor outward. c. When using the Polygonal Hotspot click to place the points that outline the area of the hot spot. Place several points to get the exact curve or shape desired. To enclose the hotspot, click the first point that was placed. 5. The Insert Hyperlink dialog box will open. Follow the same procedure as inserting a hyperlink (see Linking Web Pages). INSERTING A MARQUEE A Marquee is text that moves across a Web page. Using a Marquee is a good way to catch the attention of a visitor. To insert a Marquee: 1. Type the text to display in the Marquee. 2. Select the text. 3. Click the Web Component button on the Standard toolbar. The Insert Web Component dialog box opens (see Figure 21Error! Reference source not found.). 4. In the Component type: section select the Dynamic Effects option. 5. In the Choose an effect: section, select the Marquee option. Click the Finish button. The Marquee Properties dialog box opens (see Figure 22Error! Reference source not found.). 6. Set the properties of the Marquee. 7. Click the OK button. 8. Preview the change, preferably in the Internet Explorer browser. Introduction to Microsoft FrontPage 2003-20
Figure 21 - Insert Web Component Dialog Box Figure 22 - Marquee Properties Dialog Box An alternative way to insert a marquee is: 1. Select the Insert menu on the Menu bar 2. Select the Web Component command. 3. Follow Steps 4-7 above. INSERTING AN INTERACTIVE BUTTON An interactive button is a button that changes its appearance when the mouse pointer is placed over it. To insert an interactive button: 1. Click the location to position the interactive button. 2. Click the Web Component button on the Standard toolbar. The Insert Web Component dialog box opens (see Figure 21Error! Reference source not found.) 3. In the Component type: section select the Dynamic Effects option. 4. In the Choose an effect: section, select the Interactive Button option. 5. Click the Finish button. The Interactive Buttons dialog box opens (see Figure 23). 6. Type the text the button should contain in the Text: text box. 7. Type the hyperlink address in the Link: text box or click the Browse button to link to a file or page. Figure 23 Interactive Buttons Dialog Box Introduction to Microsoft FrontPage 2003-21
The user can change the button color, the effect color, the type of effect, the width, height, and the font of the interactive button. 9. Click the OK button. 10. Preview the change, preferably in the Internet Explorer browser. Another way to insert an interactive button is: 1. Select the Insert menu on the Menu bar 2. Select the Web Component command. 3. Follow Steps 3-9 above. INSERTING A BACKGROUND Background color or a background picture can be inserted to enhance the pages. Remember that the text and pictures will have to blend for the viewer to be able to read the text easily. To insert a background color: 1. Right-click any area of the page. 2. Select the Page Properties command from the shortcut menu. The Page Properties dialog box opens (see Figure 24). Figure 24 Page Properties Dialog Box 3. Select the Formatting tab. 4. Click the Background: drop-down arrow and select a color. Clicking the More Colors button will open up a color palette allowing the user to choose a color that is not in the current list. 5. Click the OK button. Introduction to Microsoft FrontPage 2003-22
To insert a background picture: 1. Right-click any area of the page. 2. Select the Page Properties command from the shortcut menu. The Page Properties dialog box will open (see Figure 24). 3. Click the Formatting tab and check the Background picture check box in the Background section. 4. Click the Browse button. The Select Background Picture dialog box opens (see Figure 25). 5. Locate and select the picture file to use as a background. 6. Click the OK button. If the picture is smaller than the browser window size, the image will be displayed in a tile pattern. Figure 25 Select Background Picture Dialog Box Working with Frames Frames divide the browser window into different areas, each of which can display a different page. Clicking a hyperlink on a page in one frame usually displays the page pointed to by that hyperlink in another target frame. Frame pages are often used as an index page which is the home page. To create a page with frames: 1. Select the File menu from the Menu bar. 2. Select the New command. The New Task Pane will open. 3. In the New Pages task pane section, select the More page templates link. The Page Templates dialog box will open. 4. Select the Frames Pages tab. 5. Select a frame style. A preview will be displayed in the Preview section. 6. Click the OK button. 7. FrontPage will return to Page View frame with the frame style applied. Each frame has two buttons, Set Initial Page and New Page. 8. Click the Set Initial Page button to display a page that is already made on that particular frame. The New Page button allows the user to add a blank page that can be customized later. Introduction to Microsoft FrontPage 2003-23
9. The Insert Hyperlink dialog box will open. 10. Select the file to display from the Web folder. The page that the user selects would be the first page to display on that particular frame. 11. Click the OK button. TARGETING FRAMES An advantage of a frames page is that it allows a frame that does not change when clicking on a link. (A frame can be the table of contents, another frame, or the target frame can then show the content of that page.) To create target frames: 1. For the left frame (which is also referred to as the header frame), click the New Page button to create a new page with a table of contents. 2. Type in the text to be linked. 3. Select the text and click the Insert Hyperlink button. 4. Select the HTML file or page to display on another frame from the Web folder. 5. Click the Target Frame button. The Target Frame dialog box opens. 6. Select a target in the Common Targets section or a frame in the Current frames page. 7. Click the OK button on the Target Frame dialog box. 8. Click the OK button on the Insert Hyperlink dialog box. 9. Preview the change, preferably in Internet Explorer. Optimizing Web Site Downloading Time When generating a Web site, it is wise to consider the time it will take for a viewer to download the site to their Web browser. It is possible a viewer will lose interest if each page on the site takes too long to download. At the bottom right of the page there is a status bar that shows an estimated download time for the page over a 56-Kbps modem connection. If a page takes over one or two minutes to download, it is recommended to simplify it to accommodate an Internet user with slow modem speeds. To change the modem connection indicator: 1. Select the Tools menu on the Menu bar. 2. Select the Options command. The Options dialog box will open. 3. Select the Reports View tab (see Figure 26). 4. In the General section, click the Assume connection speed of: drop-down arrow to view the list of modem connections. Figure 26 Options Dialog Box Reports View TIPS FOR SPEEDING UP WEB SITE DOWNLOAD TIME There are several ways to speed up web site downloading time. To speed up the downloading time: Try to limit the amount of large size graphics on each individual Web page. Try not to include too many images so that the information does not become cluttered or difficult to read. If the page contains a lot of information, consider placing the data on several pages. Introduction to Microsoft FrontPage 2003-24