Tutorial for Creating Webpages with Microsoft FrontPage

Ed-314n

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

Informations

• Publié par: Ziom
• Nombre de lectures: 10
• Langue: English

Extrait

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