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.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.
2.
3.
4.

In Page view, right-click the page, and then click Page Properties on the shortcut menu.
Click the Background tab.
Select the Background picture check box, and then click Browse.
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.

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
destination page.

In the URL box, type (or copy-and-paste) the web address of the

Then, in your Web browser, browse to the page

3. Or you can click World Wide Web
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.
2.
3.
4.
5.
6.

In Page view, position the insertion point where you want to insert the table.
On the Table menu, point to Insert, and then click Table.
In the Rows box, enter the number of rows you want.
In the Columns box, enter the number of columns you want.
In the Alignment box, select the position for the table on the page.
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.

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.

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

In Page view, do this

A table

Select the table to delete, and then press DELETE.

A cell

Select the cells to delete, right-click, and then click Delete Cells on the shortcut
menu.

A row

Select the rows to delete, right-click, and then click Delete Cells on the shortcut
menu.

A column

Select the columns to delete, right-click, and then click Delete Cells on the
shortcut menu.

A table
caption

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

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
A cell background
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

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