Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short cut: Right-click the mouse and click Page Properties. 1.2 Background Color 1. In Page view, right-click the page, click Page Properties on the shortcut menu, and then click the Background tab. 2. In the Background box, select a background color. 1

1.3 Background Image: Set a background picture for a page You can use pictures from a web, local folder, the World Wide Web, or clip art. You can also set the background picture to be a watermark, which means the picture that does not scroll as the page scrolls. However, not all Web browsers support watermarks. 1. In Page view, right-click the page, and then click Page Properties on the shortcut menu. 2. Click the Background tab. 3. Select the Background picture check box, and then click Browse. 4. Select the background picture: o If the picture is in a web, browse to the web and folder that contains the picture, select the picture you want, and then click OK. o If the picture is on your local network, click File, browse to the picture you want from your local network, and then click OK. o If the picture is on the World Wide Web, click World Wide Web. In your Web browser, browse to the picture that you want, and then switch back to Microsoft FrontPage. The location of the page you visited will be displayed in the URL box. Click OK. If the picture is clip art, click Clip Art to display the Microsoft Clip Gallery, right-click the picture that you want, and then click Insert. 2. Create a hover button Creating a hover button is an easy way to add animation to your web without any scripting. Like any other button, a hover button contains a hyperlink to another page or file. However, when a site visitor clicks or points to a hover button, the button can also glow, display a custom picture, or play a sound effect. 1. In Page view, position the insertion point where you want to create a hover button. 2. On the Insert menu, point to Component, and then click Hover Button. 3. In the Button text box, type the text label for the hover button. Leave this box blank if you want to use a custom picture that already contains a text label. 4. In the Link to box, type the URL of the page or file you want to display when the hover button is clicked. Or, click Browse to locate the page or file. 3. Template 3.1 Create a page template A template is a predesigned page that can contain page settings, formatting, and page elements. You can create your own page templates so that you can create pages for your web quickly and consistently. Templates are very useful in a multiple-author environment because they help authors create pages the same way. 2

For example, if all your pages always have a logo and description at the top of the page, create a template with those elements. Then, use your template when you want to create a new page, and the logo and description will automatically be placed on the page. 1. In Page view, create a page that includes the page settings and elements that you want in the template. For example, create a page that includes generic text, comments, and so on. 2. Click Save on the File menu. 3. Check the Page title. If you need to change it, click the Change button and provide an appropriate title for the page. 4. Click Save. 5. In the File name box, type the file name of the template. 4. Hyperlinks 4.1 Create a hyperlink to a page or file in a web 1. In Page view, type the text you want to use as a hyperlink and then select it. For example, type and select "Philosophy" to link to a page that contains your philosophy statement on technology. Or, if you want to use the title of the destination page (for example, Home Page) or location of the file (for example, http://localhost/filename) as the hyperlink text, position the insertion point where you want to insert the hyperlink. 2. Click Hyperlink or choose Insert Hyperlink. 3. Navigate to the web in which the destination page or file is located, and then select the page or file. Tip If the destination page or file is in the current web, click the page or file in the Folder List, and then drag it to the open page where you want the hyperlink. 4.2 Create a hyperlink to a page or file on the World Wide Web 1. In Page view, type the text you want to use as a hyperlink and then select it. For example, type and select "University of Illinois at Urbana-Champaign." Or, if you want to use the title of the destination page (such as " University of Illinois at Urbana-Champaign ") or the location of the file (such as http://www.uiuc.edu) as the hyperlink text, position the insertion point where you want to insert the hyperlink. 2. Click Hyperlink In the URL box, type (or copy-and-paste) the web address of the destination page. 3

3. Or you can click World Wide Web Then, in your Web browser, browse to the page that you want, and then press ALT+TAB to switch back to Microsoft FrontPage. The location of the page you visited will be displayed in the URL box. 4.3 Internal Link: Bookmark A bookmark is a location or selected text on a page that you have marked. You can use bookmarks as a destination for a hyperlink. For example, you can use bookmarks to navigate a long page that contains five headings. Create a bookmark at each heading, and at the top of the page add a table of contents that lists these headings. Each entry in the table of contents is a hyperlink that uses a bookmarked heading as a destination. If a location (rather than text) is bookmarked, the bookmark is indicated by bookmarked, the text is displayed with a dashed underline.. If text is Step 1: Insert a bookmark 1. In Page view, position the insertion point where you want to create a bookmark, or select the text to which you want to assign the bookmark. 2. On the Insert menu, click Bookmark. 3. In the Bookmark name box, type the name of the bookmark. Step 2: Create a hyperlink to a bookmark A hyperlink to a bookmark, also called an anchor, is indicated by a pound sign (#), which precedes the destination URL. 1. In Page view, type the text you want to use as a hyperlink, and then select it. Or, if you want to use the name of a bookmark as the hyperlink text, position the insertion point where you want to insert the hyperlink. 2. Click Hyperlink. 3. Select the page that contains the bookmark. 4. In the Bookmark box, click the bookmark you want to use as the destination. 4.4 Create a hyperlink to send an e-mail message 1. In Page view, type the text you want to use as a hyperlink and then select it, for example type and select "Send me an e-mail message." Or, if you want to use mailto:address as the hyperlink text, position the insertion point where you want to insert the hyperlink. 4

2. Click the Hyperlink button 3. Click the E-Mail button. 4. Type the e-mail address to which you want the message sent. 4.5 Set hyperlink colors You can select three colors to use for a hyperlink, depending on its status: Hyperlink a hyperlink that has not been selected. Active hyperlink a hyperlink that is currently selected. Visited hyperlink a hyperlink that has already been followed. 1. In Page view, right-click the page, click Page Properties on the shortcut menu, and then click the Background tab. 2. In the Hyperlink, Visited hyperlink, and Active hyperlink boxes, select the colors you want to use. 4.6 Delete a hyperlink 1. In Page view, select the hyperlink. 2. Do one of the following: o To delete the hyperlink completely, including the hyperlink text, press DELETE. o To preserve the hyperlink text but delete the hyperlink associated with it, select the hyperlink, and then click Hyperlink and then press DELETE.. Select the contents of the URL box, 5. Table 5.1 Create a table and set its properties When you create a table, you can also specify its properties, such as the number of rows and columns, its size and alignment, border attributes, and so on. 1. In Page view, position the insertion point where you want to insert the table. 2. On the Table menu, point to Insert, and then click Table. 3. In the Rows box, enter the number of rows you want. 4. In the Columns box, enter the number of columns you want. 5. In the Alignment box, select the position for the table on the page. 6. In the Border size box, enter the width you want for the table border in pixels. If you do not want a border, type 0. 5

7. To change the table's cell padding (the space between a cell's border and content), enter a number in the Cell padding box. 8. To change the table's cell spacing (the space between cells), enter a number in the Cell spacing box. 9. To change the table's width, do one of the following: o Select In pixels, then type the width you want the table to be in pixels. o Select In percent, then type a percentage of the screen width you want the table to be. If the table is to appear in a frame, specify a percentage of the frame width. Note The properties that you specify for the new table will be used as the default properties the next time you create a table. 5.2 Set the table layout You can set the layout of a table by changing the following properties: Alignment of the table relative to the page Text flow around the table Thickness of the table's outer border Cell padding (the space between text and cell borders) Cell spacing (the distance between cells in a table) 1. In Page view, right-click the table, and then click Table Properties on the shortcut menu. 2. In the Alignment box, select the alignment to use for the table. 3. In the Float box, specify whether you want text to flow around the left or right of the table. If you do not want text to flow around the table, select Default. 4. Under Borders, in the Size box, enter the width of the border in pixels. 5. In the Cell padding box, enter how much space to allow between the contents and inside edges of cells, in pixels. 6. In the Cell spacing box, enter how much space to allow between the cells in the table, in pixels. 5.3 Resize a table You can quickly resize a table by selecting its border and dragging it to the height or width you want. You can also resize a table by specifying its height and width. You can set the size in pixels or as a percentage of the page size. 6

If a table is sized in pixels, its size remains constant, regardless of the size of the page in which it is displayed. If a table is sized as a percentage of the browser window, its size changes depending on the size of the window. If a height or width is not specified, the table is sized according to its content. Note If the table is displayed in a frame, the percentage applies to the size of the specific frame rather than the entire page. 1. In Page view, right-click the table, and then click Table Properties on the shortcut menu. 2. To specify width, select the Specify width check box, type a value for the width of the selected cell, and then select In pixels or In percent. 3. To specify height, select the Specify height check box, type a value for the height of the selected cell, and then select In pixels or In percent. 5.4 Delete table elements You can delete a table or its elements. To delete A table A cell A row A column A table caption In Page view, do this Select the table to delete, and then press DELETE. Select the cells to delete, right-click, and then click Delete Cells on the shortcut menu. Select the rows to delete, right-click, and then click Delete Cells on the shortcut menu. Select the columns to delete, right-click, and then click Delete Cells on the shortcut menu. Select the caption to delete, and then press DELETE. Tip You can also delete selected cells, rows, and columns by clicking Delete Cells on the Tables toolbar. To display the Tables toolbar, point to Toolbars on the View menu, and then click Tables. 5.5 Merge and split cells To merge cells, select a row, column, or a group of adjacent cells. Right-click the selection, and then click Merge Cells on the shortcut menu. You can divide cells into columns or rows by splitting them. 1. Select the cells to split. 7

2. Right-click, and then click Split Cells on the shortcut menu. 3. Click Split into Columns or Split into Rows. 4. In the Number of Columns or Number or Rows field, enter the number of columns or rows into which you want the cells split. Tip You can also split selected cells by clicking Split Cells on the Tables toolbar. To display the Tables toolbar, point to Toolbars on the View menu, and then click Tables. 5.6 Set the cell layout You can set the layout of a cell and its content by changing cell properties. 1. In Page view, select the cells for which you want to set the layout. 2. Right-click, and then click Cell Properties on the shortcut menu. 3. In the Horizontal alignment and Vertical alignment boxes, select the alignment you want for the contents of the cell. 4. To set the cells as header cells and emphasize them, select Header cell. By default, the emphasis is bold text. 5. To prevent Web browsers from wrapping text in the cell, select No wrap. 5.7 Set the background color in a table You can set the background color for a table. You have the option of setting the background color for the entire table, for individual cells, or both. When you set background colors both for individual cells and the entire table, the cell color will take priority. To set a color for A table background A cell background In Page view, do this Right-click the table, and then click Table Properties on the shortcut menu. Under Background, in the Color list, select a color for the table background. Select the cells, right-click, and then click Cell Properties on the shortcut menu. Under Background, in the Color list, select a color for the cell background. Tip You can also set a background color for a selected table or group of cells by clicking Fill Color on the Tables toolbar. To display the Tables toolbar, point to Toolbars on the View menu, and then click Tables. 6. Image 6.1 Add a picture from a file 8

You can add a picture from your local file system. Pictures can have the following file formats: GIF (standard and animated), JPEG (standard and progressive), BMP (Windows and OS/2), TIFF, TGA, RAS, EPS, PCX, PNG, PCD (Kodak Photo CD), and WMF. When you save the page, Microsoft FrontPage prompts you to save the picture to your web. If the picture is not in GIF or JPEG format, pictures that use 256 or fewer distinct colors are automatically converted to GIF, and all other pictures are converted to JPEG. 1. Position the insertion point where you want to insert a picture. 2. Click Insert Picture. 3. Click File. 4. Browse to the picture you want from your local file system and then select the file. You can specify the type of file you want to view in the Files of type box. 6.2 Add clip art Microsoft FrontPage includes the Microsoft Clip Gallery. You can preview clip art, pictures, and videos, and then select items to use on your page. 1. In Page view, position the insertion point where you want to insert clip art. 2. On the Insert menu, point to Picture, and then click Clip Art. 3. Browse the Microsoft Clip Gallery to find the clip art you want to use, right-click a graphic, and then click Insert on the shortcut menu. 4. Close the Microsoft Clip Gallery. 6.3 Resize a graphic Resizing a graphic changes the HTML tags that tell a Web browser how to display the graphic; the actual graphic file is not changed. For example, you want to reduce the download time for a page with a large picture. If you only resize the picture, it will be displayed in a smaller area on a site visitor's screen, but its file size and the download time are unchanged. To decrease the file size of a picture and its download time, resample the picture after resizing it. 1. Right-click the graphic, click Picture Properties on the shortcut menu, and then click the Appearance tab. 2. Select the Specify size check box. 3. If you want to preserve the height-to-width proportions, select the Keep aspect ratio check box. If you select this check box and then enter a pixel value in either the Width or Height box, Microsoft FrontPage automatically changes the value in the other box to preserve the graphic's proportions. 4. Specify whether you want to change the size in pixels or percentage, and then enter values in the Width and Height boxes. Tip You can also resize the graphic directly. Click the graphic, and then resize it by clicking and dragging the handles on the graphic. To resize the graphic and preserve its proportions (its aspect ratio), drag a corner handle. When you drag a side handle, the graphic will be distorted. 9

7. Add a horizontal line to a page You can add a horizontal line to a page, for example to separate text or add an accent. After you add a horizontal line, you can modify its properties to change its width, height, alignment, and color. If your page uses a theme, the horizontal line uses a graphic to match the theme, for example: 1. In Page view, position the insertion point where you want to insert a line. 2. On the Insert menu, click Horizontal Line. 3. To modify the appearance of the horizontal line, double-click it, and do one or more of the following: o Under Width, specify the width of the line as a percentage of the window width or as a number of pixels. o Under Height, enter the number of pixels high the line should be. o Under Alignment, specify the alignment of the line on the page. o In the Color box, select a color for the line if you do not want a shaded line. o Select the Solid Line check box if you want the line to appear solid. Clear the check box if you want the line to appear shaded. If you select a color, the line will be solid, and you cannot apply shading. Note If the current page uses a theme, you can change only the alignment of the line. 8. Getting Help Even the experts consult the Help menu often. When you are working on your Web pages and encounter some problems, you can look for help. 1. Choose Help --> select Microsoft FrontPage Help. 2. Scroll down and click on the topic you are interested in. You can also search for a topic: 1. On the left side of the Help window, click Index 2. type keywords or choose the topics you need 3. click search. 10