Tutorial for Creating Webpages with Microsoft FrontPage
10 Pages
English

Tutorial for Creating Webpages with Microsoft FrontPage

-

Downloading requires you to have access to the YouScribe library
Learn all about the services we offer

Description

Æ 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 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 ...

Subjects

Informations

Published by
Reads 10
Language English
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
. If text is
bookmarked, the text is displayed with a dashed underline.
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
. Select the contents of the
URL
box,
and then press DELETE.
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
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
In Page view, do this
A table background
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.
A cell 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