COMSATS Institute of Information

Technology (CIIT) Vehari Campus

Introduction to FrontPage

Khalid Abubakr

1
 What is FrontPage?
• FrontPage is a graphics-based HTML editor.
• It is a WYSIWYG (what you see is what you get)
•editor, which means that it renders HTML as a
•browser would.
• You do not have to know any HTML to use the
•program.
• We will only discuss FrontPage 2000. It should be
•available in all DePaul labs.
• The menus and toolbars in FrontPage are similar
•to other Microsoft programs.

2
 Getting started
The easiest way to start creating Web pages is
to make one new page.

The process:
• Select File/New/Page
• Once the file is open you type text into the
window as you would with any other MS
editor.

Example: Open a blank page.

3
 Views of a Web site
• Page view: Displays the content of a Web page
so that it can be created, edited, and formatted.
• Folders view: Lists all files and folders within
the site.
• Reports view: Used to display information about
slow pages, unused files, broken hyperlinks, etc.
• Navigation view: Allows you to create a structure
resembling a flowchart that represents your site.
• Hyperlinks view
• Tasks view

4
 Our first Web page
 We will now create a Web page that contains the
following items:
• Title
• Heading
• Lists of items
• A background color
• Hyperlinks
 We will create a resume page as an example
 In creating the page we will also learn about
paragraph and page formatting.
5
 Web page titles
Titles for Web pages typically appear at the top
of the browser.
Example: http://facweb.cs.depaul.edu/asettle/

These titles are useful because:

• It helps identify the page in a search engine.
• It is given on a bookmark list.

Be sure to give each page a title and make it as

descriptive as possible.
6
 Saving the newly created file
Next we want to save the file and add a title to it.
1. Click Save As in the File menu
2. Type of the name of the title and page
3. Click OK

You can change the title by clicking “Change

Title” button.
A dialog box will appear presenting current title.
You can alter or rewrite new title and click OK
to save the new title.
By default the name of the first page will be
index.html/htm 7
 Paragraph formatting
Paragraph formatting is applied to all the text in the
paragraph where the insertion point is located.
The most common types of paragraph formatting:
1. Headings
2. Alignment and indention
3. Line spacing

To change paragraph formatting, move the insertion

point inside the paragraph to be changed and then
select the desired format.
8
 Making a heading
Headings identify the beginning of page sections
and are usually displayed in bold type with extra
space around the heading.

There are six possible headings, numbered from 1

to 6. The smaller the heading number, the larger
the text will be displayed.

Example: Add headings to the resume.

9
 Alignment
Paragraph alignment can be used to align a
paragraph with the left or right margin or to
center the paragraph between the two margins.

To change the alignment of the current paragraph,

select the appropriate alignment icon.
Example: Change the first heading to Center.

FrontPage also gives you option to justify the

paragraph, that is, cause the text to be even with
both the right and left margins.
10
 Indentation
• To indent the current paragraph, click on either
the right or left indent button on the toolbar.
• You can click the Indent toolbar button many
times to indent a paragraph further. It is
indented approximately half an inch each time
the button is clicked.
• In FrontPage 2000 more precise indentation is
available on the Paragraph dialog box. This
box can be reached by selecting Paragraph
from the Format menu.
• Indentation is measured in points (72 points = 1”)
11
 Lists
Lists are common on Web pages because they
organize information in an efficient, easy-to-read
manner.

The two most common types of lists are bulleted

lists and numbered lists.

You can change the bullets and numbering styles

used in the lists by selecting Bullets and
Numbering from the Format menu and choosing
the desired style.
12
 Types of Lists
There are two basic types of lists used in the documents
• Ordered List
• Examples:
1. Computer Science
2. Management Science
c. Pakistan
d. India
• Unordered List
 Books
 Video
o Audio
13
 Creating a list
To create a list:
• Click the appropriate toolbar button for the type
(bulleted or numbered) of list
• The first number or bullet will be displayed. It
will be indented by one line. Type the first
item and press Enter.
• Continue typing each list item, pressing Enter
after each one. A new number or bullet will
be displayed indented at the same location.
• To end the list, press Enter an additional time.

14
 Nested lists
You can also create a nested list using the following:
• Type the first list until you reach the point where
the nested list should begin.
• Press the Increase Indent button twice to indent the
list and display the appropriate number or bullet.
Then type the nested list.
• To return to the level of the first list, press the
Decrease Indent button two times.

Example: Add lists to the resume

15
 Line spacing
• Line spacing can be specified in the paragraph
dialog box. (Recall that the paragraph dialog
box can be found under Format in the main
toolbar).
• It can be set to one of Single, 1.5 lines, or Double.
• The paragraph dialog box can also be used to
change the spacing before or after paragraphs.
To do this, type the desired spacing amount in
points.
Note: These spacing options are browser dependent.
16
 Background and text color
• Page properties such as background color and text
color are changed using the Page Properties box.

• The Page Properties box can be reached by right

clicking anywhere on the page.

• The Background tab of the dialog box can be used

to specify the desired colors for the background,
text, and text-based hyperlinks of the current page.

17
 Changing the background color
To change the background or text color:
• Click on the down arrow next to the appropriate
box and select the desired color from the color
palette displayed.
• If the desired color is not listed, click More Colors
to display the More Colors dialog box. On that
box click the desired color or choose to use a
custom color.
• Custom colors are done by specifying an RGB
value. An RGB value is a set of three numbers
(from 0 to 255) specifying each color’s intensity.
18
 Warning about colors
• Be careful when choosing background and text
colors that the combination is readable.
• With a dark background, use light text colors,
and with a light background, use dark text
colors.
• Always specify a text color if you change the
background color or use a background image,
since the default for text may be a color that
does not display well with your background.
• Example: Change the background and text color
of the resume page.
19
 Hyperlinks
 Virtually all Web pages contain hyperlinks.
 Hyperlinks can be connected to either text or
an image on a Web page.
 There are four types of hyperlinks:
1. Links to external pages
2. E-mail address links
3. Links to internal pages
4. Links to bookmarks within the current
document

20
 Links to external pages
To add a hyperlink to an external Web page:
• Select the text to be linked and click the link
toolbar button. (You can also choose Insert
and then select hyperlink). This will bring
up the Create Hyperlink dialog box.
• Type in the appropriate URL in the box and
click OK.

Example: Add a hyperlink for my home page

and DePaul University’s page on the resume.
21
 E-mail hyperlinks
To add an e-mail hyperlink:
• Select the text to be linked and click on the link
toolbar button to display the Create Hyperlink
dialog box.
• Click the mail icon to open the Create E-mail
Hyperlink dialog box. Type the appropriate
e-mail address and click OK.
• Click OK to finish creating the link.

Example: Add an e-mail link for my e-mail address.

22
 Editing hyperlinks
Existing hyperlinks can be modified or unlinked
as follows:
• To edit what a text-based hyperlink is linked to,
click the link toolbar button to display the
Edit Hyperlink dialog box, then select or type
the appropriate URL or e-mail address and
click OK.
• To unlink a hyperlink, move the insertion point
inside the hyperlink, click the link toolbar
button to display the Edit Hyperlink dialog
box, and then delete the contents of the URL.
23
 Links to internal pages
To specify an internal link you must:
1. Select the text to be linked and click the
hyperlink toolbar button to display the
Create Hyperlink dialog box.
1. Browse the open pages or enter the path
to the internal page.
1. Click OK.

24
 Relative paths
The relative path of a page is obtained by:
• Using the name of the file if it is in the same folder
as the Web page in which the link is created.
• Using ../ whenever you must move up a level in the
hierarchy of directories to reach the file.
• Using the name of a directory to move down the
hierarchy of folders.

When you publish the pages the files must have the
same relative structure or your path will be incorrect.
25
 Examples
• Link from my resume to DePaul University:
http://www.cs.depaul.edu
• E-mail link on my resume:
mailto:[email protected]
• Link from my resume to my home page:
info/home.htm
• Link from my home page to my resume:
../resume.htm

26
 Bookmarks
• You can specify that a hyperlink jump the user to
a particular location on the current page.
• This is done by placing a bookmark at the location.
(Do not confuse this bookmark with the one that
is created by a Web browser).
• When creating the link, you then specify both the
page and the bookmark on the page.
• Bookmarks are useful when you have long pages
with multiple, distinct sections.

27
 Creating a bookmark
1. Select some text in the appropriate location.
Then choose Bookmark from the Insert menu.
The bookmark text will have a dashed underline
appearance in the FrontPage window.
1. Highlight the text to be linked to the bookmark
and click the hyperlink button to display the
Create Hyperlink dialog box.
1. Insert the appropriate page name and select the
bookmark from the Bookmark box.

Example: Create bookmarks to each section.

28
 Inserting an image
To insert an image into a page using FrontPage:
1. Move the insertion point to where the image
is to be located.
1. Click the Insert Picture From File toolbar
button to display the Picture dialog box.
1. If the image is on your machine, use the folder
button to navigate to the appropriate folder,
select the desired image and click OK.
1. If the image is located on a web server, use the
Web button to locate the desired URL.
1. There is also a Clip Art button in the dialog box.
29
 General image properties
To change an image’s properties, right click on the
image to reach the Picture Properties dialog box.
The options on the General tab:
• Interlace or make a GIF transparent
• Change the quality or progressive information on
a JPEG
• Specify a low resolution image to display while
the higher resolution image is loading
• Indicate text that should display in place of the
image in text-only mode
30
 Appearance properties
The Appearance tab allows you to change the
following properties of an image:
• Display size
You can choose to keep the image proportional
by locking the aspect ratio.
• Border
Default for is black except for a hyperlinked
image.
• Alignment
It can be fine-tuned with blank padding space
horizontally and/or vertically.
31
 Using a background image
1. Open the Page Properties box and select the
Background tab.
1. Click inside the Background Picture box to
check it and then click on the Browse button
to locate the image file.
1. Select the image and close the box.
2. The background image should now be listed
in the box next to the Browse button. Click
OK to close the Page Properties box.

32
 Hyperlinked images
To make an image a hyperlink:
1. Select the image to be linked and click the Add
Hyperlink dialog box.
1. Specify the hyperlink information as for a text-
based hyperlink.
1. Click OK to create the link.

Hyperlinks on images can be changed in the same

manner as text-based hyperlinks.

33
 A warning
Like HTML files, image files must be moved over
to your students.depaul.edu account using FTP.

Make sure to check that the names and the directory

structure remain the same as you transfer them.

If there is a problem you can correct the Web page

using pico. Simply look for the <img> tag and
modify the file name.

34
 Modifying images
FrontPage allows you to modify images.

These modifications include:

• Adding text to images
• Creating thumbnail images
• Cropping and resizing images

For more information see Running Microsoft

FrontPage 2000, Jim Buyens, Microsoft Press.

35
 Adding text to images
1. Add the graphic to the page.
2. Select the graphic by clicking it.
3. Choose the Text tool on the Picture toolbar.
4. Click inside the inner handles to place an
insertion marker and then type the text.
1. The font size, color, and other attributes can
be modifying using the Format menu.
1. Click outside the graphic to stop text entry.

36
 Creating thumbnail images
1. Insert the full-size image where you want the
thumbnail to appear.
1. Select the large image.
2. Select AutoThumbnail from the Tools menu.
This will remove the large image, create the
thumbnail in its place, and set up a hyperlink
from the thumbnail to the large image.
1. Use the thumbnails handles to resize it.

37
 Cropping images
Cropping images is the process of choosing part
of an image and discarding the rest.

To crop an image in FrontPage:

1. Select the image
2. Select the Crop tool from the Picture toolbar.
3. Within the selected image, FrontPage will
draw a bounding box with handles. Move
the handles so that the bounding box encloses
the part of the image you want to retain.
38
 Resizing images
• To resize an image, simply select it and drag its
handles.
• Dragging the corner handles resizes the image
proportionally, keeping the aspect ratio the
same.
• The top or bottom handle changes the height.
• The right or left handle changes only the width.

39
 Using image editors
You can also use image editors to perform more
sophisticated tasks or to create your own images.

Example: MS Photo Editor

For this class you may also download already

existing images for use in your page. Be sure to
cite your sources for images that you use!

40
 Tables
Tables are used on Web pages to:
• Place a table of contents or other important
information in a specific location
• Keep images and text aligned properly
• Divide the page into columns

Although it is not always apparent, many pages

use tables within other tables for layout.

Tables consist of rows, columns, and cells.

41
 Creating a table
1. Click on the Insert Table toolbar button.
2. Use the mouse to highlight the desired number
of rows and columns on the Insert Table grid.
1. Release the mouse button and the table will
appear.
1. The table will have a default size and style that
you can modify.

Once the table has been created, text can be typed

and images inserted into cells of the table.
42
 Table and cell properties
• The properties of a table determine its alignment,
border, width, colors, etc.
• To change table properties, right click on the table
and select Table Properties from the menu.

• The properties of cells include layout, colors, width,

height, etc.
• Individual cell properties can be changed by right-
clicking on the inside a cell to reach the Cell
Properties dialog box.
43
 Table properties
• Alignment: The alignment of the entire table on
the Web page. One of Default, Left, Right,
Center, or Justify.
• Cell padding: The number of pixels between the
cell contents and border.
• Cell spacing: The number of pixels between the
two cell borders.
• Width and height: Dimensions in either pixels
or percentage of the browser window.

44
 Table properties
• Border size: Width of border in pixels.
• Border colors: One or two colors used for the
border of all cells. Only visible if the border
size is non-zero.
• Background color or picture: Used in the back-
ground of all cells unless otherwise specified.
Default is to use the page background.

45
 Modifying table structure
It is often necessary to change the structure of a
table after it has been created.

Modifications include:
• Inserting rows and columns
• Deleting rows and columns
• Merging cells: combine a rectangular group of
cells into a single, larger cell
• Splitting cells

46
Inserting/deleting rows/columns
Inserting rows or columns:
• Move the insertion point inside the row or column
closest to where the new row or column should
be placed.
• Select Insert Rows or Columns from the Table
menu.
• Specify how many rows or columns to insert and
where they should be located. Click OK.
Deleting rows or columns:
• Select the appropriate row or column.
• Select Delete Cells from the Table menu.
47
 Merging/splitting cells
• Merging cells combines a rectangular group of
cells into one cell. It is used when the contents
of a table are not a uniform size.
• To merge cells, select all the appropriate cells,
then choose Merge Cells from the Table menu.

• To split a cell into multiple ones, move into the

cell, then select Split cells from the Table menu.
At the Split Cells dialog box, indicate the desired
number of rows and columns.
48
 Formatting with tables
• Tables with border width zero can be used to
arrange information on a Web page.
• To use a table to lay out an entire Web page,
select a table of the appropriate size and
then create additional tables inside the main
table.

Example: Format the resume page.

49