Lutz F.

Krebs

Introduction to
Microsoft FrontPage
© 2001 – 2002 Universiteit Maastricht.
All rights reserved. No part of this publication may be reproduced, in any
form or by any means, without prior, written permission from the publisher.

PICTURE CREDITS
Section cover background: size-isnt-everything.co.uk

TYPEFACES
Headlines are set in TheSansCorrespondence © TheTypes b.v., Lucas de
Groot. Input strings are set in Arial Narrow © The Monotype Corporation
plc. Image components are labeled in Arial © The Monotype Corporation
plc. Body text and side notes are set in Times New Roman © The Monotype
Corporation plc. Keys are set in RatCaps 3D PC and RatKeys 3D PC ©
Quadrat Communications, David Vereschagin.

TRADEMARKS
Product names, logos, designs, titles, words or phrases mentioned in this
publication may be trademarks, service marks, or trade names of companies
or other entities and may be registered in certain jurisdictions or
internationally.

DISCLAIMER
WE HAVE USED EXCEPTIONAL CARE IN PREPARING THIS BOOK.
NONETHELESS, PUBLISHER AND AUTHOR MAKE NO CLAIMS OR
WARRANTIES WITH RESPECT TO THE ACCURACY OR
COMPLETENESS OF THE BOOK AND SPECIFICALLY DISCLAIM
ANY WARRANTIES REGARDING THE USEFULNESS FOR A
PARTICULAR PURPOSE. THERE ARE NO WARRANTIES EXCEPT
THOSE GRANTED HERE. THE ADVICE GIVEN IN THIS
PUBLICATION IS NOT GUARANTEED TO PRODUCE ANY
PARTICULAR RESULTS AND MAY NOT BE SUITABLE FOR EVERY
INDIVIDUAL OR UNDER PARTICULAR CIRCUMSTANCES.
NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE
FOR ANY LOSS OF PROFIT OR ANY OTHER COMMERCIAL
DAMAGES, INCLUDING BUT NOT LIMITED TO SPECIAL,
INCIDENTAL, CONSEQUENTIAL OR OTHER DAMAGES.

ACKNOWLEDGEMENTS
I would like to thank the following for their continued support:
Dirk Tempelaar. The computer whiz kids at ACO and ICTS. Andreas van
Rienen and Carsten Sturmann. Christiane Arndt.

FEEDBACK
We are happy to hear from you. You can contact the author directly at
l.krebs@ke.unimaas.nl.

Version 1.1 – 28/07/02

Maastricht University
P.O. Box 616
6200 MD Maastricht
Netherlands
 CONTENTS

A. GENERAL TOPICS
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

1. Introduction 3
2. Getting Acquainted 7

B. CREATING A WEBSITE
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

3. Setting Up a Website 19
4. Formatting Text & Pages 25
5. Publishing Your Site 39

APPENDIX
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

A. Design & Development Resources on the Web 45

B. Free Web-Hosting 47
 Image: size-isnt-everything.co.uk

GENERAL TOPICS
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
WYSIWYG
What You See Is What You Get.
SMR (Studenten Micro Ruimte)
Synonym for computer lab at our
university.
1. INTRODUCTION
Microsoft FrontPage 2000 is one of the leading applications for creating
websites. Its functions serve first-time home users as well as
corporations of any size, and it is by now one of the most popular
WYSIWYG editors for web pages. Its main advantage: it allows you to
easily create navigation tools for your website and keeps track of all the
files and links on your site.
An overview
This book is meant as an introduction to the most important issues in
designing web pages and sites. In the present chapter, we talk about the
assumptions underlying this book and what you can do if you get stuck.
In the second chapter, we get acquainted with Microsoft FrontPage. The
following three chapters discuss the three steps of creating a website:
creating the structure, entering and formatting content, and publishing
the site. This book focuses on visually designing web pages instead of
writing HTML code. If you are interesting in learning about HTML,
there are a number of good resources listed in appendix A. Finally,
appendix B lists a number of providers of free web space.
What you need to get started
Strictly speaking, you do not need anything. Microsoft FrontPage is
installed in our faculty’s computer labs (or SMRs as they are called at
our university). There are two SMRs at the Faculty of Economics and
Business Studies, and both are located in the main building at
Tongersestraat 53. To use a PC there, you need your student ID number
and a password that has been mailed to you together with your student
ID card.
THE COMPUTER ROOMS
SMR 1 SMR 2
LOCATION Rooms 3.047 – 3.061 Rooms 0.012 – 0.014
NUMBER OF PCS 120 60
OPENING HOURS
Mon – Thu 9 a.m. – 10 p.m. 9 a.m. – 5 p.m.
Fridays 9 a.m. – 5 p.m. 9 a.m. – 5 p.m.
Weekends closed closed
MORE INFO www.fdewb.unimaas.nl/smr/
In general, the SMRs should only be used for study related activities. If
you want to work on your private website or perform other non-
educational activities, you are asked to restrict yourself to the early
4 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

morning (9 – 10 a.m.) or the evening (after 5 p.m.). Even with these

rules in place, the SMRs tend to get crowded often.

When the SMRs are closed, you can walk over to the library, which
offers a small computer room of its own. Be aware that other faculties
also use this computer room – you may have to wait (possibly a long
time) for a PC to become available. If you know in advance that you
need a PC for a study related reason, you can make a reservation for up
to two hours per day.

THE LIBRARY

ADDRESS Bonnefantenstraat 2
PHONE (043) 388 34 27
WEBSITE www.ub.unimaas.nl

OPENING HOURS
Mon – Thu 8.30 a.m. – 10 p.m.
Fridays 8.30 a.m. – 9 p.m.
Saturdays 10 a.m. – 5 p.m.
Sundays 12 a.m. – 5 p.m.

Our computer labs can get very crowded during peak times, and it may
be a good idea to buy a used or new PC to work at home. In that case,
you will also need to buy a copy of Microsoft FrontPage, as it is a
commercial program. You can purchase FrontPage for 25 €1 from the
ICT Service Center.

THE ICT SERVICE CENTER

ADDRESS Looiersgracht 14, Room 0.011

PHONE (043) 388 35 64
EMAIL servicedesk@icts.unimaas.nl
WEBSITE www.icts.unimaas.nl

OFFICE HOURS Phone/Email Walk in

Weekdays 8 a.m. – 10 p.m. 8.30 a.m. – 5 p.m.
Saturdays 10 a.m. – 4 p.m. closed

On the use of this book

In this book, we assume that you have access to a PC with the
appropriate software. More importantly, we also assume that you have a
working knowledge of the Internet, i.e. that you know what websites,
links and related concepts are. If you feel that your knowledge might be
lacking in these areas, we encourage you to visit www.learnthenet.com.
If you want to learn what goes on behind the scenes when you surf the

1
These prices are sharply reduced in comparison to normal retail prices, because Maastricht University (in cooperation
with other Dutch universities) buys large quantities of educational licenses.
 General Topics: Introduction 5
●●●●●●●●●●●●

web, watch the 12 minute-movie at www.warriorsofthe.net. Finally, as

FrontPage is in some ways similar to Word, we assume that you have
some experience in using Word.

This manual is not meant to be all-encompassing. It is meant as an

introduction and as a guide. We will focus on getting you started, and in
doing so will ignore a number of useful advanced features.2 You are
encouraged to go beyond the contents of this book and explore the tools
that you are working with. If you feel that you need further guidance,
there are a number of excellent printed resources. Personally, we find the
jargon-free language and useful hints of the ‘For Dummies’ series to be
particularly appealing, but there are certainly many other useful and
well-written computer books out there. There is also a lot of helpful
information on the web. We have assembled a number of useful websites
aimed at both beginning and advanced web designers in the appendix.

This book focuses on showing you how to accomplish certain tasks in

Microsoft FrontPage. Be aware that there are usually several ways to get
things done. We will endeavor to show you as many of them as possible.
In doing so, we will use the following conventions:

· Toolbar buttons that initiate a certain function are usually

A toolbar. displayed in the margin together with a brief description of what
the button does.

· If you need to press a key on the keyboard, we will indicate this

by printing the key, e.g. / implies that you need to push the
‘enter’ key. Frequently, key combinations are used to accomplish
tasks. An example of such a key combination would be c +
P, which means that you should press and hold the ‘ctrl’ key
while pressing ‘p’.

· When you need to enter more than a few characters, we will not
print the individual keys, because that would be space consuming
and hard to read. Instead, we will indicate the text using a special
font, as demonstrated here: ‘enter this’.

· Some of the options cannot be initiated by using a keyboard

shortcut or an on-screen button. Such options can usually be
found in the menu bar. If we want you to select an option from
A menu bar. the menu bar, we will list the names of the options in
chronological order. E.g. ‘File’ „ ‘Print’ would imply that you
click on ‘File’ in the menu bar, and then select ‘Print’ from the
menu that appears. Instead of clicking on the items, you can also
use your keyboard: press a and the underlined letter, in our
example a + F. Once the menu is open, simply pressing the
underlined letter is sufficient. E.g. after pressing a + F,

2
In particular, any discussion of HTML, the language in which web pages are written, has been avoided for the sake of
brevity. However, you will find several good introductory sources on HTML listed in appendix A. Especially GlassDog’s
Design-O-Rama guide to HTML is a good resource for beginners.
6 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

pressing P will be enough to take you to the print menu.

· Finally, we will use a similar notation when you need to select

options from the Start menu, e.g. ‘Start’ „ ‘Programs’ „
‘Microsoft Word’ will launch Word. Once again, you can use
keyboard shortcuts: press the Windows key (ÿ), followed by the
The Start menu.
underlined letters.

If you are stuck…

If you cannot find the answer here, there are still a number of ways to
get help.

If you are stuck using a certain program, the first thing you can try is
pressing the 1 key. Pressing 1 is like asking the computer for help.
In most cases, the appropriate program will then give you additional
information on whatever you are currently doing. The intricacies of the
help system are discussed in more detail in the second chapter.

There are, however, cases when your computer does not understand your
problem (because the persons that built the software did not foresee it) or
when your PC is not able to help you (because it is malfunctioning). In
such cases, you may want to check out a helpful website, Tech24
SelfHelp at www.tech24inc.com/help.html. Tech 24 offers self-help
links that are sorted by category (e.g. ‘Internet’, ‘Email’, ‘Outlook’).
They also offer live support from certified technicians.

You can also try contacting the producer directly. If you have trouble
with FrontPage, you might want to visit www.microsoft.com to see if
they know the answer to your question. However, some producers do not
offer a lot of support or charge money for it.

Another option is to call or email the computer whiz kids at the ICT
service center of our university. They offer support for the software used
throughout the university, which includes among others Windows,
Microsoft Office, Internet Explorer, and the McAfee virus scanner. (See
the info box on p. 4 for their contact information.)

Finally, befriending a geek may be the best solution. Geeks are by nature
friendly, helpful and extremely well versed in all things computer. If you
can count one of them as your friend, he (or in rare cases she) probably
won’t mind dropping by and helping you out when you are having
trouble with your PC. An invitation to dinner or to the movies in return
won’t hurt either.

We hope you enjoy designing web pages and wish you success in
working with Microsoft FrontPage!
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
COMING UP…
This chapter introduces you to
2. GETTING ACQUAINTED
the different tools and views that
you will use when working with In this chapter we give you the tour of all the different elements that you
FrontPage.
will work with in FrontPage. But first, let’s start FrontPage.

You can start Microsoft FrontPage by clicking on its icon on the

desktop, or alternatively by selecting it from the ‘Programs’ category of
the Start menu. You will then see the main screen:
‘Start’ „ ‘Programs’ „
‘Microsoft FrontPage’

The FrontPage Screen

As all Microsoft Office programs, FrontPage features the usual

assortment of a menu bar, several toolbars and a status bar. Beyond that,
there are three prominent elements: the view selector, the folder list and
the editing area. We will now discuss these elements one by one.

The menu bar

The menu bar offers you access to all services of the application you are
using. You can call up any item on the menu bar either by clicking on it
8 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

directly or by pressing and holding the a key while pressing the

underlined letter of the entry. (E.g. to open the ‘File’ menu, press a +
F.)

Clicking on any of the headings will bring up the appropriate menu,

which contains a broad range of functions. Be aware that FrontPage does
not display all of the available functions right away. Many computer
users experienced the vast range of available options as confusing. This
is why all Microsoft Office applications initially display only the most
frequently used items. Only if you do not do anything for a moment after
opening a menu will they display the remaining options. To speed up the
Click the ‘expand menu’ button process, you can also press the ‘expand menu’ button at the bottom of
to see the entire range of options. the menu.

If the option you are

looking for is not in the
list, you can wait a few
moments for the menu to
expand to its full length…

… or you can click on the

‘expand menu’ button to
enlarge it to full size
immediately.

All available options are grouped into one of the menus:

· The ‘File’ menu offers options to create and open web pages or
entire websites, to save, preview and print your work and to
publish it on the Internet.

· The ‘Edit’ menu allows you easy access to the most fundamental
editing options, such as cutting, copying and pasting, undoing
and redoing changes, as well as finding and replacing text.

· The ‘View’ menu allows you to switch between the different

views of your website and allows you to display or hide toolbars.

· The ‘Insert’ menu lives up to its name: it enables you to insert all
sorts of objects into your web pages, such as symbols,
hyperlinks, navigation tools and interactive components.

· Under the ‘Format’ heading, you find all of the formatting

options for text, paragraphs, pages, pictures and so forth.

· The ‘Tools’ menu contains an assortment of helpful functions,

such as the spell checker.

· The ‘Table’ menu allows you to easily create and manipulate

tables, one of the most important design elements of web pages.

Use this button to get access to
infrequently used shortcut
buttons.
‘View’ „ ‘Toolbars’
3
Frames are a controversial topic in the community of web developers, and it is usually advised to use them only for very
particular purposes. Therefore, we will not discuss them any further.
The World Wide Web: Security on the Internet 9
●●●●●●●●●●●●
· The ‘Frames’ menu is designed to help you work with frames, a
technology which allows you to break a web page into different
subpages that can be updated separately from each other.3
· The ‘Window’ menu comes in handy when you are working on
several documents simultaneously, as it allows you to switch
between different pages.
· Finally, the ‘Help’ menu is your first stop whenever you are
stuck.
The toolbars
While the menu bar is highly useful, it would be frustrating if you had to
use it all the time. Imagine you want to cut a line of text and place it
somewhere else – it would take quite long if you had to select ‘Edit’,
‘Cut’ and then ‘Edit’, ‘Paste’ for every simple adjustment. For that
reason, there are a number of toolbars that contain shortcuts to the most
frequently used functions.
Generally, FrontPage will display only the two most important toolbars
at startup: the standard toolbar and the formatting toolbar.
The standard toolbar gives access to the most common functions:
creating, opening, saving, and printing documents, cutting, copying and
pasting text, undoing and redoing changes, etc.
The formatting toolbar simplifies access to the most common formatting
options. Using this toolbar, you can change e.g. the typeface, size,
alignment, and indentation of your text.
The function of the most important buttons will be discussed in the
appropriate sections of the next chapters. If you are looking for a
particular shortcut or are not certain what a specific button does, there is
a quick way to get help: let your mouse pointer hover above the button
for a few moments, and a yellow sign will appear with a brief
explanation.
Toolbars are similar to menus in one aspect: unless there is an
abundance of space, they only show the most commonly used functions.
If you do not use a particular shortcut button for a while, it will drop off
the toolbar. To get it back, click on the ‘more buttons’ button at the right
end of the appropriate toolbar.
FrontPage also offers seven additional specialty toolbars for specific
10 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

problems. You can make them visible by clicking on ‘View’, ‘Toolbars’

on the menu bar, and then selecting the appropriate toolbar.

The status bar

FrontPage’s status bar does not have a lot to tell, but it yields one vital
bit of information: the time it takes to download your current page at
28.8 kbps, the slowest modem speed still in use. You should endeavor to
keep this time as short as possible – if you use a modem yourself, you
are probably know how annoying it is to wait for a page to appear.

The view selector

FrontPage does not only allow you to create web pages, it also enables
you to maintain entire websites. Administering your site involves a
number of different functions, and FrontPage includes a view for each of
them. You can switch between views using the view bar on the left side
‘View’ of the screen, or by using the ‘View’ menu. In the following, we give a
brief explanation of the purpose of each view.

– Page view
This view is where you create your actual web pages. You can do so in
‘View’ „ ‘Page’ the ‘normal’ mode, which closely resembles the way that documents
look in Word, the ‘HTML’ mode were you can work on the actual code
of your page, or in the ‘preview’ mode, which gives you an impression
of what your page will look like in the end. You can switch between
these three page views using the tabs below the actual page.

– Folders view
The folders view allows you to organize the files and folders that make
‘View’ „ ‘Folders’ up your website. It is important that you use the folders view instead of
Windows Explorer, because most, if not all files in a website are linked
to each other and moving them outside FrontPage may break these links.

– Reports view
This view allows you to check the status of your website in several
‘View’ „ ‘Reports’ categories. You can e.g. search your site for broken links, check for
pages that are slow to download or find out which files have not been
updated in a while.
 The World Wide Web: Security on the Internet 11
●●●●●●●●●●●●

– Navigation view
The navigation view allows you to work on the structure of your
‘View’ „ ‘Navigation’ website. You can move around existing pages, create new pages, make
them visible or invisible for the visitors of your web page etc.

– Hyperlinks view
The hyperlinks view allows you to analyze the interrelations of your web
‘View’ „ ‘Hyperlinks’ pages. You can see which pages link to any individual page, and in turn
which pages are referred to in that page.

– Tasks view
The task view helps you in organizing the process of building a website.
‘View’ „ ‘Tasks’ It is extremely useful if you are a) working on a complex task, b)
working in a team with shared responsibilities, or c) simply forgetful.

The folder list

The folder list is a miniature folder view, and fulfills the same purpose.
It allows you to move, copy and delete files with the least possible
damage to the links in your website. Its advantage: you can do so while
working on your page, you do not have to switch to the folder view. If
you are working on a website and the folder list is not visible, you can
make it visible by clicking on the folder list button or selecting ‘View’,
‘View’ „ ‘Folder List’ ‘Folder List’.

Common functions
We will now turn to some of the most commonly used functions. There
are usually several ways to activate each function, such as a button on a
toolbar, a keyboard shortcut or an entry in the menu bar. All possible
ways to launch a feature are detailed in the margin.

Please note that buttons on the toolbar work slightly differently than the
other two options: they immediately execute the feature, without giving
you an opportunity to change any settings. If you press e.g. the ‘print’
button on the toolbar, your document will be printed immediately using
the settings from the last print job. This could be dangerous if you are
working in the SMR and your last print process used the expensive color
printer! If you want to check or change any of the settings before
activating a feature, you should use the keyboard shortcut or the entry in
the menu bar.
12 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

Creating new pages and sites

c + N
‘File’ „ ‘New’ „ ‘Page…’
Create a new web page.
‘File’ „ ‘New’ „ ‘Web…’
Create a new website.
Pressing the ‘new page’ button or using the keyboard shortcut will get
you a blank page. Using the ‘File’, ‘New’, ‘Page’ entry will allow you to
choose between a blank document and some prefabricated templates,
such as feedback forms or search pages. Alternatively, you can click on
the right part of the ‘new page’ button and select ‘web’ or select ‘File’,
‘New’, ‘Web’ from the menu bar to start an entirely new website. The
difference: a page is just like an individual document in Word. A web,
however, can contain infinitely many pages that are linked to each other.
In creating a new web, you can also choose from a number of templates.
All pages that belong to a web will be placed in a new directory which
will be saved in the ‘My documents\My webs’ folder by default.

Opening existing documents

c + o If you want to access an existing document, you can press the ‘open’
‘File’ „ ‘Open…’
Open a page.
button on the standard toolbar, select ‘File’, ‘Open’ in the menu bar or
press c + O. All of them work in the same way; they lead to a
‘File’ „ ‘Open Web…’ window in which you can select the file to be opened. Alternatively, you
Open a website. can open an entire web by pressing the right part of the ‘open’ button
and selecting ‘web’ or by choosing ‘File’, ‘Open web’ from the menu
‘File’ „ ‘Recent Files’
‘File’ „ ‘Recent Webs’
bar. The pages and webs that you edited most recently can be found
Open a recently edited file or under the ‘Recent Files’ and ‘Recent Webs’ headings.
web.

Saving documents
If you have worked on a web page and wish to save your progress so that
c + S you can continue editing or using it later, use the ‘save’ button, select
‘File’ „ ‘Save…’
Save the current page. ‘File’, ‘Save’ from the menu or press c + S. If the page was created
as part of a web, or if you created it in the navigation view, you will not
need to enter a name – the page has already been assigned one.

– Saving under a new name

In some cases, you may want to save a file without overwriting the old
version, e.g. because you have made significant changes and you want to
‘File’ „ ‘Save as…’
preserve the original together with the revised edition. In that case, you
Save the current document under can select ‘File’, ‘Save as’ from the menu bar and enter a new filename.
a new name. Links pointing to the original page will continue to do so.

Printing documents
c + P Pressing the ‘print’ button will immediately print the entire document on
‘File’ „ ‘Print…’ the standard printer, or on the printer that was used for the last printout.
Print the current document. Pressing c + P or choosing ‘File’, ‘Print’ from the menu bar will
allow you to make a number of choices before printing, such as:
 The World Wide Web: Security on the Internet 13
●●●●●●●●●●●●

· which parts of the document you want to print

· which printer you would like to use
· how many copies you would like to print

– Print preview
Pressing the ‘print preview’ button or selecting the appropriate item
‘File’ „ ‘Print preview…’ from the menu bar will get you a miniature preview of the printed
Print preview. document.

Closing pages and sites

If you are done with a particular web page, but want to continue working
c + 4 in FrontPage, you can close the page. Press c + 4 or select ‘File’,
‘File’ „ ‘Close’ ‘Close’ from the menu bar. Alternatively, you could click on the ever-
Close the current page.
present ‘close’ button that can be found in the name bar of the page.
‘File’ „ ‘Close Web’ Alternatively, selecting ‘File’, ‘Close Web’ will close all pages in the
Close the current website. entire web.

Cutting, copying, pasting

The most comfortable way to move text or other items around on a page
or to transfer them between pages is to cut or copy the desired item and
to paste it wherever it is needed.

– Cutting or copying?
First, you will need to select the desired text or picture. Then, you will
s + x or c + x
‘Edit’ „ ‘Cut’ have to choose between cutting and copying it. Both methods will allow
Cut you to insert the object in some other spot, but there is a crucial
difference between them: cut text disappears from its original location
while copied text remains where it is. E.g. if you want to move a passage
c + i or c + C from the middle of your page to the end, you would usually cut it. If, on
‘Edit’ „ ‘Copy’ the other hand, you want to re-use a passage on some other page, you
Copy would copy it.

Before you can insert the text, you need to move the cursor to its new
s + i or c + V location, e.g. to the end of your essay. You can then push the ‘paste’
‘Edit’ „ ‘Paste’ button, press s + i or select ‘Edit’, ‘Paste’ from the menu bar.
Paste You can paste the same element as many times as you like.

Undoing changes
When you have done something really disastrous, e.g. deleted all the text
c + Z on a page, you can undo the changes one at a time by clicking on the
‘Edit’ „ ‘Undo’
Undo ‘undo’ button. If you click on the right part of the ‘undo’ button , you
will see a list of your last changes and you can undo as many of them as
you like.
14 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

If it turns out that the changes were indeed justified, you can re-do them
c + Y by clicking the ‘redo’ button. If you use the ‘redo’ button immediately
‘Edit’ „ ‘Redo’ after pressing the ‘undo’ button, then your changes will be restored. If
Redo your last action however was not to ‘undo’ something, then the ‘redo’
button will be deactivated. Unlike other Office applications, FrontPage
does not offer a ‘Repeat’ option.

The help system

If you get stuck working in Microsoft FrontPage, simply hit 1 or push
1 the ‘help’ button. What happens next depends on the settings of your
‘Help’ „ ‘Microsoft FrontPage
Help’
computer. If the Office Assistant is installed, it will spring to action and
Launch the help system. offer help. If the Office Assistant is not installed, pressing 1 will bring
up the help system, which is a combination of a user manual and a list of
anticipated questions.

– The regular help system

The help system will appear in the form of another window that will
push your current window to the side so that both windows are visible at
the same time. Its window is split into two main areas: a navigation area,
which helps you find the topics you want, and a text area, where the
actual help will be displayed.

There are three different ways to get information:

The contents and index work just like you would expect them to: the
‘contents’ area offers a list of all the chapters and sections contained in
the user manual, while the index is an alphabetical list of all the words
used in the manual. The answer wizard is probably the most useful tool:
it lets you search a list of topics for your particular problem. Let’s

Clippy, the best-known (and
most hated) office assistant.
‘Help’ „ ‘Hide the Office
Assistant’
The World Wide Web: Security on the Internet 15
●●●●●●●●●●●●
assume you want to italicize text, but you do not know how. Simply call
up the help system, click on ‘answer wizard’ and type in a couple of
keywords:
When you push the ‘search’ button, the help system will return with a
list of topics that may be of relevance for you:
In our case, the answer to our problem is right at the top of the list. If
you have trickier problems, you may have to go through a number of
topics. To read any of the listed topics, click on its title. The topic will
then be displayed in the adjacent area:
– The office assistant
The office assistant is a cartoon character that is meant to help you do
your daily chores using Microsoft Office programs. It will take the form
of a paperclip unless you actively ‘hire’ another character as your
assistant. When you press 1 and the office assistant is installed on
your computer, you can ask questions in the same way as when you are
dealing with the answer wizard (see above).
Furthermore, as long as the office assistant is visible on the screen, it
will monitor what you are doing and will offer suggestions when it
thinks that you could accomplish a task more efficiently. This behavior
may be quite useful while you are still learning the ropes, but after a
while, many users get irritated with the office assistant. If you want to
get rid of it, right-click on it and select ‘hide’ from the menu that pops
up. Alternatively, you can select ‘Help’, ‘Hide the Office Assistant’ from
the menu bar.
16 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
Dialogue box
A window that requires your
decision on some topic. E.g.
when you save a document, your
PC needs to know under what
name it should save the
document and will open a
window where you can enter the
filename. This window would be
a dialogue box.
– Help in working with dialogue boxes
During some particular activities, there is a quicker way to get help.
Let’s assume that you want to print something. You have clicked on
‘File’, ‘Print’ and a window has popped up where you can adjust some
of the print settings before printing. However, you are unfamiliar with
some of the advanced settings. In almost all of these dialogue boxes, you
will find a button with a question mark in the upper right corner.
Pushing this button will put you into ‘quick help’ mode. To indicate you
are in this mode, a question mark will be added to your mouse pointer
. When you now click on any element of the dialogue box, a brief
description of its function will be displayed.
For example, clicking on the ‘ok’ button in quick help mode…
will yield the following explanation:
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
 Image: size-isnt-everything.co.uk

CREATING A WEBSITE
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
COMING UP…
In this chapter, we create a new
3. SETTING UP A WEBSITE
website and structure it.
As an experienced user of the Internet, you are probably aware that
information alone does not make a website useful. The information
needs to be accessible, and the best way to make information accessible
is by structuring it. This is the reason why it almost never pays off to
create one single web page. Instead, we start off by creating a site
consisting of several pages that contain parts of the information. We
dedicate some time to the choice of a theme. Finally, we discuss how
you can build the structure for your web page using the navigation and
folders views.

Creating a new website

Websites are simply called webs in FrontPage. You can create a new
‘File’ „ ‘New’ „ ‘Web…’
Create a new website.
web by selecting ‘File’, ‘New’, ‘Web’ from the menu bar or by clicking
on the right part of the ‘new page’ button and selecting web. FrontPage
will then offer you a list of templates, such as ‘customer support web’ or
‘personal web’. However, these templates serve only as very broad
suggestions and even if you want to create a personal website, the
‘personal web’ template may restrict your ideas more than it helps you to
develop them. Furthermore, some of the templates rely on technology
that is not available everywhere.4 Therefore, it almost always pays off to
opt for the ‘one page web’. ‘One page’ does not imply that there is a
restriction on the amount of pages, but that initially there is only one
page in the web. This page is empty and has been labeled ‘index.htm’.

The significance of ‘index.htm’

By default, every web needs to have a page that is called ‘index.htm’ or
‘index.html’5, which fulfills an important function. Imagine you want to
visit a site for the first time, e.g. the renowned Internet magazine
Salon.com. As a first time visitor, you have no idea what their pages are
called. Do they have a politics section? And if they do, can you find it at
www.salon.com/politics.htm or at www.salon.com/pol.html?6 There is
no way you could know this before your first visit. And even if you
frequently read Salon, would you remember the exact addresses of the
pages? Probably not. That’s why every website has a page called
‘index.htm’ or ‘index.html’. This page is the page that is called when
someone visits your website and does not specifically request a different
page. E.g. when you direct your browser to www.salon.com, it actually
takes you to www.salon.com/index.html.

4
As we will learn in ch. 5, your web page will need to be transferred to a server on the web before anyone can see it on the
WWW. Some templates rely on a set of tools called FrontPage server extensions, but these tools are not available on the
majority of servers. In that case, some of your pages would not work as they should.
5
There is no difference between ‘index.htm’ and ‘index.html’. The former stems from a time when it was not possible to
place more than three letters after the dot.
6
Neither is correct, it is located at www.salon.com/politics/.
20 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
Homepage
The front door of your website,
which welcomes visitors and
directs them to the different
sections of your site.
‘Format’ „ ‘Theme…’
Because almost everyone automatically uses this page, it can be seen as
the front door of your website. It is also frequently called the homepage,
because it is the point of departure from which your visitors start to
explore your site. And because first impressions count, this page is the
most important page of your site.
Choosing a folder for your web
After you have selected the template, you can also specify where your
web should be saved on the hard drive. By default, FrontPage lovingly
suggests names as ‘myweb3’ and places them in your ‘My Documents’
folder under ‘My Webs’. However, you are free to choose more
meaningful names for your webs and it certainly is advantageous to do
so.
What do I do with the ‘My Webs’ folder?
It is of outmost importance that you leave the ‘My Webs’ folder alone as
much as possible. FrontPage will automatically create the folder and all
your original and subsequent web pages. It will also create a number of
files that are normally hidden from view and that are used in the
administration of your site. If you were to use the Windows Explorer to
manually rename, move or delete files, you may unintentionally ‘break’
pictures on your pages or hyperlinks between your pages, and fixing
such problems is a pain in the lower back.
Instead, if you feel the urge to rearrange parts of your website, use the
folders view in FrontPage. If you rename, move or delete files there,
FrontPage will keep track of all hyperlinks and will automatically repair
any broken links.
By the way, it is entirely save to create or copy new files into the ‘My
Webs’ folder.
Applying a standardized look
It is a good idea to think about the layout of your pages before you fill
them with content, so that your pages have a standardized look.
Unfortunately, developing an appealing design for your website is a
complicated process that usually requires additional software such as
image editing applications. Creating your own design is beyond the
scope of this manuals on FrontPage.
However, there is an alternative that is far less work intensive: themes.
Themes are preconfigured designs that you can adopt for you website.
To apply a theme, select ‘Format’, ‘Theme’ from the menu bar.
FrontPage will then present you with a selection of themes, which you
can preview immediately.
 Creating a Website: Setting Up a Website 21
●●●●●●●●●●●●

Simply browse through the available themes and select the theme that
you like best. There are a number of options that influence the final
result:
· All pages vs. selected pages. A coherent look is always
beneficial, so it is recommended that you select ‘all pages’. You
can still modify the look of individual pages at a later stage.
· Vivid colors. Uses stronger colors when creating your web page.
You can see the difference between both settings in the preview
pane.
· Active graphics. With this setting, your buttons will become
interactive: they change color or shape when your mouse pointer
moves across them, e.g.
changes
to
· Background picture. Adds a background picture to your pages.
You can preview the difference between both settings in the
preview pane.
· Apply using CSS. This does not influence the look but the
implementation of the theme of your choice. Cascading Style
Sheets are a relatively recent technology, so older browsers may
not understand them.

You can also modify the look of any theme to suit your taste. Be sure to
save your creation under a different name. Once you are done, you can
apply your changes by clicking ‘ok’ and confirming with ‘yes’.

Structure your site

Helping the user

There is nothing more frustrating than browsing through a badly
structured website on the hunt for a tiny, elusive bit of information.
22 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

Especially in this information-rich age, information is only useful if it

can be easily found and retrieved. If your website is too hard to navigate,
your visitors will simply move on to a different site. That’s why you
should think about the structure of your site before you do anything else.
Think about two issues:
· What is the purpose of your website?
· Who is your main audience?

The answers to these questions will affect a) which information you are
going to include and b) how you are going structure it. Write down the
answer to both questions, e.g. using a mind map.

Once you have an idea about the structure, it is time to implement it in

your website. To do so, we switch to the navigation view by clicking on
‘View’ „ ‘Navigation’ the ‘navigation view’ button or selecting ‘View’, ‘Navigation’ from the
menu bar. You will then see an organization chart of your website,
which will be rather simple at this point:

The homepage will always be at the top of your website. It fulfills the
function of a greeting and directory to your website, but is not supposed
to contain significant bits of information. You can create new pages
‘below’ the homepage by pressing c + N or by right-clicking on the
homepage and selecting ‘new page’. You can add as many pages as you
want, and they are not required to be linked to the homepage directly. To
create pages below another page, click on that page once and then press
c + N.

You can then proceed to label your pages: click on a page, then press
2 or click on its name. Be sure to give your pages meaningful names.

At this point, you may e.g. have a structure like this:


‘Format’ „ ‘Shared Borders…’
Creating a Website: Setting Up a Website 23
●●●●●●●●●●●●
If you are not happy with the arrangement you can move the individual
pages around by clicking on a page and holding the mouse button down
while you drag the page to its new position.
Automatically add navigation elements
From this organization chart, Microsoft FrontPage can create title bars
and navigation elements for you automatically. If you want navigation
elements only on a few pages, then you need to select them by holding
the c button and clicking on them. Then, call up the shared borders
dialogue by selecting ‘Format’, ‘Shared Borders’ from the menu bar.
Here, you can determine a unified look for all you pages by adding top,
bottom, left and right borders. The top and left border can include
optional navigation elements.
As the name suggests, these borders are shared by all (or at least by all
selected) pages. If you change the border on one page, it will be adjusted
on all pages. This allows you to quickly make changes to the navigation
elements on all pages.
If you do not want such borders, but you would like to use title bars and
navigation elements on your pages, you still need to visit the shared
borders menu once to enable these elements. To do so, select ‘apply to
all’ and unselect all borders.
You are now ready to begin editing your web pages. To start out with
any particular page, double-click on it and FrontPage will open it for you
24 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

in the page view.

Helping yourself
Making a site easy to navigate for users is one issue. You should
however also take precautions to make the site easy to maintain for
yourself. Websites have a habit of growing pretty fast: every picture and
every page is a separate file and it won’t be long until you have dozens
or hundreds of files in your website folder. Plan ahead and create a
number of subdirectories. Such subdirectories can be arranged by topic,
e.g. following our site structure above, you may want to create a separate
folder for your interests, your photos and your family. Subdirectories can
also be arranged by file type, e.g. one subdirectory for pictures, one
subdirectory for Word documents etc.

To create and manage these folders, do not use the Windows Explorer.
Doing so can destroy the navigation elements of your site. Instead,
‘View’ „ ‘Folder view’ switch to the ‘folder’ view in FrontPage. It works exactly like the
Windows Explorer, so we will not discuss its functions here.
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
COMING UP…
In this chapter, we learn how to
4. FORMATTING TEXT & PAGES
set up individual web pages.
Now, we are ready to work on the pages themselves. In this chapter, we
learn how to design pages. We start by entering and formatting text, then
go on to add pictures as well as navigation elements and finally format
entire pages. But before we start, we need to discuss some of the
properties of web pages.

Peculiarities of web pages

Web pages are not like normal printed-paper documents, but you already
knew that. However, the differences are not only limited to the fact that
web pages can be interactive and that they can contain multimedia
content. For web designers, there is a bigger issue: the fact that nothing
is truly fixed. If you write a document in Word, you can determine what
everything looks like and where your design elements are positioned. If
you place a letter 2.5 cm below the top margin and 2 cm to the right of
the left margin, it will be exactly in that position when you print your
document. And if you color it a light shade of blue, it will be exactly the
same shade of blue (presuming a good printer is used). Not so with
Internet documents.

Internet documents are flexible, and there is a good reason for that. You
have certainly heard about the analogy of the information highway. And
just like an ordinary highway, the Internet is used in a number of
different vehicles. While you will see Ladas, Fiats, Citroëns and Mercs
on a highway, you can use the Internet with PCs, Apple Macintoshs and
iMacs, fast Solaris Workstations, or even with a Sega Dreamcast console
and a TV. And the differences do not stop there: there is a myriad of
different possible combinations of computer types, operating systems,
graphics equipment, screens sizes and web browsers, and all of them
affect the way your site looks. Possibly the most frustrating fact for
beginning web designers is that they do not have entire control about the
look and feel of their product.

This fact is especially noticeable in the following four areas:

· Type fonts are not transmitted together with your web page, so
you need make sure that you use a font that is present on the
user’s computer. This limits you to a small set of six type fonts
that are commonly used on all sorts of computers.

Web-safe colors
Colors that look the same no
matter what computer and which
software you are using to access
the Internet.
· Some operating systems assemble colors in a different way than
others, and some colors cannot easily be translated. To overcome
this problem, a ‘web-safe’ palette of 256 colors has been created,
which can be displayed without significant differences on most
devices. You should stick to that palette.

· There is no such thing as a fixed page size. While some people

26 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
Paragraph break
A line break that leaves some
space between the previous and
the next line.
‘Insert’ „ ‘Symbol’
may be using a 14” monitor with a 640 × 480 resolution, others
may be using a 21” monitor with a 1024 × 768 or even higher
resolution. This leads to two problems: on the one hand there is a
need for formatting, as line lengths may become to long, but on
the other hand many of the tools that you would find in a word
processor become meaningless.
· Some of your visitors have the benefit of a very fast Internet
connection while others are using an ordinary modem and a
telephone connection. Since the latter is still a very common
mode of access, you need to make sure that people with a slow
connection are not forced to wait for ages while accessing your
website. Therefore, you should use small images that are
optimized for the net and keep an eye out for the required
download time displayed in FrontPage’s status bar.
Now that you are aware of the main problem areas, we can start working
on your web pages.
Entering text
Entering text works almost exactly like in Word. However, many useful
functions such as tabulators are not available for compatibility reasons.
Besides that, there are two significant differences.
You will notice the first one very soon: if you press /, FrontPage
inserts a paragraph break, not a line break. The difference between the
two: a paragraph break automatically leaves some space between the two
lines. To get a normal line-break, you need to press s + /.
Pressing / results in a … while pressing s + /
paragraph break with space between results in an old-fashioned line break.
the lines…
The second difference is sneakier: you cannot just use any symbols you
like. In Word, you could use almost all letters from all alphabets on the
planet, and you could also use fonts full of useful symbols (such as
WingDings) to illustrate your document. Because web pages need to be
encoded in a certain way, your choice of symbols is restricted. To enter a
symbol that cannot be found on the keyboard, select ‘Insert’, ‘Symbol’
from the menu bar, then make your selection from the window that
appears.

c + K
‘Insert’ „ ‘Hyperlink’
Generate a link that sends email.
Creating a Website: Formatting Text & Pages 27
●●●●●●●●●●●●
To ensure that your text is translated into proper code, you should
always enter text in the ‘normal’ view, not in HTML view.
Insert and overtype mode?
You may remember that Word (and most other applications) have two
modes for typing, insert and overtype. FrontPage, however, does not: it
always uses insert mode, where new characters push any characters to
the right of the cursor further in that direction.
Creating links
Links are probably the most important element in web pages. To convert
text into a link, highlight the text, then click on the hyperlink button. A
new window will open where you can specify the target of your link.
If you want to link to a page or file on your own website, you can
immediately select it from the file list. If you want to link to a document
in another part of the Internet, simply enter the complete URL (do not
forget to include the ‘http://’ part). If you want to create a link that refers
to an email address, click on the email link button and enter the target
email address.
28 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

Creating ordered and unordered lists

FrontPage also helps you in the creation of lists, however, it does not
Ordered list. Unordered automatically recognize when you are working on a list. Before you start
list. typing, you should therefore click on the ordered or unordered list button
‘Format’ „ ‘Bullets and
to indicate you want to set up a list. Alternatively, you can also select
Numbering…’ ‘Format’, ‘Bullets and Numbering’ from the menu bar, which allows you
to specify the type of numbering or bulleting used for your list.

Once that is taken care of, you can enter your list without having to
worry about numbering your items. To indicate that you are done with
your list, press / twice.

Formatting text
Formatting text generally works like in Word, but there are a number of
peculiarities that you need to consider. In the following, we will discuss
all the different text attributes that you can format.

Selecting text
If you want to move, format or delete text, you need to select the part of
your document to which the changes should be applied. To select text
using the mouse, follow these three steps:
1) Move your mouse pointer to the beginning of the text that you
want to highlight.

2) Press the left mouse button and keep it pressed while…

3) you move the mouse pointer to the end of the text.

Instead of using the mouse, you can also use the keyboard:
1) Move the cursor to the beginning of the text.
2) Press and hold the s key while…
3) moving the cursor around with the arrow keys u, d, l and
r.

This allows you to highlight one character at a time. You can speed up
the process by holding s and c while using the arrow keys. This
will highlight one word at a time.

Some additional timesavers:

· Pressing s + h or s + e highlights everything
from your current position to the beginning or end of the current
line.
· Pressing s + M or s + W selects larger portions of
text.
 Creating a Website: Formatting Text & Pages 29
●●●●●●●●●●●●

· Pressing c + s + h or c + s + e
highlights everything from your current position to the top or
bottom of the document.
· Pressing c + s + u or c + s + d selects
everything from your current position to the top or bottom of the
paragraph.

Once you selected all desired elements, you can cut or copy them
normally (see ch. 2), delete them by pressing x, or format them as
described below.

Font
This changes the typeface of your text. Remember that Internet
c + s + F documents need to rely on fonts that are installed on the user’s
computer, so you cannot simply use any font that you like. While
FrontPage allows you to use any of the typefaces on your computer, you
should restrict yourself to the following fonts:

With the possible exception of Geneva, all of these fonts should be

available on your PC.

Font size
This changes the size of your text. Font sizes for Internet documents are
c + s + P
measured in steps from 1 to 6. These steps are supposed to correspond to
certain font sizes:
Step Font Size
1 8 pt.
2 10 pt.
3 12 pt.
4 14 pt.
5 18 pt.
6 24 pt.

However, most browsers allow users to specify whether they want to use
small or large fonts, so it is hard to make any claims regarding the exact
font size. The default font size in FrontPage is 3.
30 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

Font style
Bold c + B
Italics c + I These options influence the appearance of your text. You can set your
text in boldface and italics, and you can underline it. However, you
Underline c + U should refrain from underlining words, as underlining is associated with
links on the Internet.

Clicking on the left part of the
button will change the color of
your text to the color indicated
on the button.
If you wish to use another color,
click on the right part of the
button.
Font color
To change the color of the text, click on the ‘font color’ button. This will
change the color of your text to whatever color is indicated on the
button. (It is indicated in the bar below the ‘A’; in our case, it is black.)
If you do not want your text to appear in that particular color, you can
click on the right part of the button to expand the color menu.

The color menu contains a small subset of colors. Clicking on ‘more

colors’ will take you to the web-safe color palette, which offers a
broader range of colors.

While you can also define additional colors, you should refrain from
doing so. The colors on this palette can safely be used on the web,
meaning that they will look more or less the same regardless of where
they are displayed. If you opt for colors that are not contained in this
palette, your site may not look as you intended on some computers.

Highlighting text
Clicking on the ‘highlight’ button will allow you to mark important
Highlights your text.
sentences or words by highlighting them. Clicking on the left side of the
 Creating a Website: Formatting Text & Pages 31
●●●●●●●●●●●●

button will add the corresponding background color to your text. If you
do not like the default color, click on the right side of the button and
choose another color.

Further options…
The options described above are clearly the most important options.
However, there are a number of other choices for your text that can be
accessed by clicking on ‘Format’, ‘Font’ on the menu bar. Under the
‘Format’ „ ‘Font…’
‘font’ category, you find most of the previously discussed options, as
well as a range of typesetting effects. In the ‘character spacing’ section,
you can increase the space between characters and raise or lower the
text.

Formatting entire paragraphs

Paragraph formatting is formatting that cannot be applied to single
words but only to entire paragraphs. FrontPage allows for three different
types of paragraph formatting.

Paragraph alignment
Left c + L
Here, you can choose the alignment for the current paragraph. You can
Center c + E
align it to the left or right margin, or you can center each row so that the
Right c + R distance to both margins is equally big.

Indentation
Increase Decrease The ‘decrease indent’ and ‘increase indent’ buttons allow you to adjust
indent indent the indentation of text.

Word, line & paragraph spacing

‘Format’ „ ‘Paragraph…’ This feature is located in the paragraph options – you can access it by
clicking on ‘Format’, ‘Paragraph’ on the menu bar. It determines how
large the gap between individual words and lines as well as before and
after paragraphs should be.

Preformatted styles
To speed up the web-design process, a number of predefined styles are
‘Format’ „ ‘Style…’ available, including styles for headings, definitions, etc. You can access
them from the style box on the formatting toolbar or by selecting
‘Format’, ‘Style’ from the menu bar.

Recycling your work

You can also create your own styles. However, this is not as convenient
as in Word, where you simply selected a paragraph that was formatted to
32 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
‘Format’ „ ‘Style…’
‘Table’ „ ‘Insert’ „ ‘Table…’
‘Table’ „ ‘Properties’ „
‘Table…’
‘View’ „ ‘Toolbars’ „ ‘Tables’
your liking and typed a name into the style box. In FrontPage, you need
to select ‘Format’, ‘Style’ from the menu bar. You can then define a new
style by clicking on ‘new’, entering a name and selecting the appropriate
font and paragraph formatting. The new style will then be available in
the style box on the formatting toolbar. You will find it below the
predefined styles with a full stop in front of its name.
Inserting tables
You can insert a table by clicking on the ‘add table’ button on the
standard toolbar and selecting the dimensions of your table from the grid
that pops up:
By default, the table will cover the full width of the page and all
columns will be equally wide. Furthermore, all borders will be invisible,
allowing you to use tables to undetectably format your document.
Alternatively, you can select ‘Table’, ‘Insert’, ‘Table’ from the menu
bar. A dialogue will then allow you to specify:
· the number of rows and columns
· the alignment of the table (not of the text in the table)
· the thickness of the border
· the distance between the text in a cell and the cell border
· the distance between cells
· the width of the table
You can also adjust any of these attributes at a later stage by selecting
‘Table’, ‘Properties’, ‘Table’ from the menu bar. (Your cursor needs to
be inside the table or this option will be unavailable.)
Formatting tables
You can now format the table to your liking. You can resize cells by
placing your mouse pointer on top of any of the borders, so that it turns
into a double line that is pulled by two opposing arrows . Press and
hold the left mouse button and resize the column or row.
Most of the other formatting options are best accessed through the
‘tables’ toolbar, which you can make visible by selecting ‘View’,
‘Toolbars’, ‘Tables’. In the following, we provide a brief overview of its
functions:

Press this button to draw a table.
When drawing tables, your
mouse pointer looks like a pen.
Erase cells and borders using this superfluous cells, you can take care of them by using the eraser. Click on
tool.
When erasing, your mouse
pointer will look like this.
Insert rows. Insert columns.
Delete rows or columns.
Merge as many cells as you like
using this button.
This button lets you split a cell
into a number of rows and/or
columns.
Top Center Bottom
Distribute rows and columns
evenly.
Make a table fit its content
automatically.
Creating a Website: Formatting Text & Pages 33
●●●●●●●●●●●●
– Drawing tools
Instead of creating a table as described above, you can also use the
drawing tools. Click on the ‘draw table’ button and your mouse point
will turn into a pen . Now you can conveniently draw cells and entire
tables. When you are done, you need to turn the drawing feature off by
clicking on the ‘draw table’ button a second time.
If you made mistakes when drawing or if your table has a few
the ‘eraser’ button to switch the feature on or off. When the tool is
activated, your mouse pointer will look like an eraser and will perform
the same function: it will remove unnecessary lines and cells from your
tables.
– Insert and delete rows and columns
It is possible to effortlessly insert new rows or columns by clicking on
the ‘insert rows’ and ‘insert columns’ buttons. New rows will be placed
below the current row; new columns will be placed to the right of the
current column. You can also delete rows and columns using the ‘delete
cells’ button. The button only becomes available once you have selected
an entire column or row. To do so, place your mouse pointer slightly to
the left of the desired row or slightly above the appropriate column and
click once.
– Merge & split cells
In some cases, you may want to combine a number of cells into one
larger cell. You can do so by highlighting these cells and then clicking
the ‘merge cells’ button. Obviously, this button will only work if you
have selected more than one cell. The opposite is also possible: you can
split a cell into as many rows and columns as you want, simply by
clicking on the ‘split cell’ button. This button is not available when you
have selected more than one cell.
– Vertical alignment
The vertical alignment determines whether your text is located at the top,
the center or the bottom of each cell.
– Row and column sizes
You can ensure that all columns and rows are the same size by using the
‘distribute rows evenly’ and ‘distribute columns evenly’ buttons.
Alternatively, you can design the entire table to auto-fit its content. If
you click on the ‘auto-fit’ button, all cells will be just big enough to
display their content.
34 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

– Background color
You can set the background color of any cell using the ‘background
This button allows you to pick a
background color for your cells.
color’ button. As always, you can take your pick from the standardized
color scheme or you can opt for a color from the web-safe palette.

Inserting pictures
You can easily insert pictures into your web pages either from a file or
by pasting them into your page. Microsoft FrontPage also contains a
library of clip art that can be used to decorate your page.

Inserting pictures from files

‘Insert’ „ ‘Picture’ „ ‘From
File’
Insert a picture from a file.
This is by far the best solution. To insert a picture from a file, click on
the ‘insert picture’ button or select ‘Insert’, ‘Picture’, ‘From File’ from
the menu bar. While FrontPage will allow you to insert any type of
picture, most browsers only understand three different types of pictures:
.gif, .jpg/.jpeg and .png pictures.7 To ensure that no other types of
pictures accidentally make their way into your site, you can switch the
file type from ‘all pictures’ to ‘GIF, JPEG, and PNG’ before making a
selecting.

If you want to use a picture that is in a different format, the best solution
is to paste it into your web page.

Pasting pictures
You should use this method only when your picture is not available as a
file or when it is not in the .gif, .jpg/.jpeg or .png format. Copy the
s + i or c + V object from another application and paste it into your web page by
‘Edit’ „ ‘Paste’
Paste
clicking on the ‘paste’ button, pressing s + i or selecting ‘Edit’,
‘Paste’ from the menu bar. FrontPage will automatically determine the
optimal file type for your picture and offer to save it for you as a .gif,
.jpg/.jpeg or .png file.

Using clip arts

‘Insert’ „ ‘Picture’ „ ‘Clip
Art…’ You can also insert pictures from Microsoft’s ClipArt library, which
comes with Microsoft Office. To do so, select ‘Insert’, ‘Picture’, ‘Clip
Art’. You will then be able to select illustrations from a broad range of
categories.

7
These file endings are acronyms for the Graphics Interchange Format, the JPEG File Interchange Format and the Portable
Network Graphics file type. The former two are ubiquitous, while the latter is only slowly being adopted. You should stick
to .gif and .jpg/.jpeg files as much as possible.
 Creating a Website: Formatting Text & Pages 35
●●●●●●●●●●●●

Creating a hyperlink from your picture

Like text, you can use pictures to link to other documents. The procedure
works just as described above (p. 27), except for the fact that you need to
select a picture instead of text before adding the link. To do so, click
once on the desired picture.

Picture options
Once you have inserted a picture into your page, you may want to adjust
some of its attributes. To do so, select the picture by clicking on it once,
a + / then press a + / or select ‘Format’, ‘Properties’ from the menu
‘Format’ „ ‘Properties…’ bar. You will then be able to fine-tune several aspects of the picture,
such as its file type. However, two attributes are of particular interest.

– Alternative text
Some of the visitors of your site may have chosen to deactivate pictures
to be able to surf faster. Others are not able to see pictures at all for
technical reasons. You have the option to leave a description of the
picture’s content for these people in the ‘alternative representations’,
‘text’ field on the ‘general’ tab. However, the number of netizens that
ignore pictures is small by now, so you may safely ignore this attribute.

– Layout
On the ‘appearance’ tab, you can adjust a number of layout attributes.
Most important is the alignment of the picture, as it controls how the
picture is arranged in relation to the surrounding text. There are 11
different settings:
· Default. Usually either ‘bottom’ or ‘baseline’, but the actual
setting depends on the browser.
· Left. Aligns the picture to the left margin of the page and lets the
text flow around it.
· Right. Aligns the picture to the right margin of the page and lets
the text flow around it.
· Top. Aligns the top of the image with the tallest item in the
current line of text. (This could be another image.) The
remaining text continues below the image.
· Texttop. Aligns the top of the image with the tallest letter in the
current line of text. The remaining text continues below the
image.
· Middle. Aligns the baseline of the current line of text with the
vertical middle of the image. The remaining text continues below
the image.
· Absmiddle. Aligns the image to the vertical middle of the text.
· Baseline, bottom. (Usually the default.) Aligns the baseline of the
current line of text with the bottom of the image. The remaining
36 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
Pixel
One individual point on a
computer monitor.
‘View’ „ ‘Navigation’
‘Format’ „ ‘Shared Borders…’
‘Insert’ „ ‘Page Banner…’
‘Insert’ „ ‘Navigation Bar…’
text continues below the image. (There are slight differences
between the two settings depending on browser interpretation.)
· Absbottom. Aligns the absolute bottom of the current line of text
with the bottom of the image.
· Center. Aligns the text horizontally to the center of the image.
All text will be placed below the picture.
Besides that, you can also set the thickness of the image border as well
as the horizontal and vertical distance between the image and the
surrounding text. All values are in pixels.
Inserting navigation and orientation elements
Even if you decided not to include shared borders on your page, you can
easily add navigation and orientation elements to your page. All of these
elements require that you visit the navigation view once and to enable
them. To do so, switch to the navigation view, select ‘Format’, ‘Shared
Borders’ from the menu bar, choose ‘all pages’ and unselect all borders.
Page banners
Page banners indicate the page title. You can insert a page banner simply
by selecting ‘Insert’, ‘Page Banner’ from the menu bar. You can then
choose whether you want a text or picture banner and what it should say.
You will only be able to get picture banners if you are using a theme
(see ch. 3).
Navigation bars
Navigation bars help your visitors move through the website. You can
insert a bar by selecting ‘Insert’, ‘Navigation Bar’ from the menu bar.
Once again, you can opt for a text or picture version of the bar. If you
are not using a theme, only the text version will be available. You can
also select which pages should be listed on the bar.
Formatting pages
There is very little about pages that requires formatting. There are,
however, two issues: the page title and the line length.
The page title
Every page has a title, which is not visible on the page itself. Instead, it
gets displayed in the title bar of your browser. This title is also suggested
as the name of the bookmark when someone bookmarks your page.
By default, your pages have such endearing names as ‘new page 17’ that
do not look particularly professional. The most convenient way to assign
 Creating a Website: Formatting Text & Pages 37
●●●●●●●●●●●●

‘View’ „ ‘Navigation’ names to your pages is to switch to the navigation view, where you can
easily label many pages in one go. To change the name of a page, click
on it once, then click on its name or press 2.

If you want to change the name of a single page, it is probably more

convenient to stay in the page view. If you right-click on any part of the
page, you will be able to select ‘page properties’ from the pop-up menu,
allowing you to specify the name for this particular page.

The line length

A more pressing problem is the line length used for your text. By
default, your text will run all the way from the left to the right border of
the browser window. If your visitors use a high screen resolution, the
average line could contain as many as 30 words. In comparison, the
average line of a novel contains approximately 12 – 16 words, or half as
much. Long lines are problematic because the reader will tend to lose
orientation as he switches from the end of one line to the beginning of
the next: because of the length of the line, the eyes cannot conveniently
glide along the previous line to its beginning. Your visitor also is less
likely to remember the exact words at the beginning of the last line, so
she may have to read a couple of words to recognize how the last line
started and which line is the next one. For many, this is not a conscious
process, but it continually interrupts the reading experience; as a result,
the reader is more likely to lose interest.

Unless you use a table, your text will look like this for some people.

Unfortunately, there is no setting for the line length. Instead, you will
have to use a trick to work around the problem: insert a one column by
one row table (i.e. a table consisting of only one cell). Place your cursor
inside the cell, select ‘Table’, ‘Properties’, ‘Table’, adjust the table width
to some 450 – 600 pixels and place your text inside the table. At a
normal font size, this will result in a reasonable line length.
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
COMING UP…
In this chapter, we prepare your
site for publishing and transfer it
to a server on the Internet.
7 You can launch a page-wide spell check by selecting ‘Tools’, ‘Spelling’
‘Tools’ „ ‘Spelling…’
Initiate a complete spelling
check.
‘View’ „ ‘Reports’ „ ‘Broken
Hyperlinks’
Verify all hyperlinks.
5. PUBLISHING YOUR SITE
In the next pages, we do some final checks on your site and then publish
it on the Internet.
Preparing for publishing
Before your site ‘goes live’ as web designers say, you may want to make
sure that everything is watertight by checking the spelling and the
hyperlinks in your site.
Doing a complete spell check
from the menu bar or by pressing 7. FrontPage will then take you past
all the mistakes it found, giving you the opportunity to correct or ignore
every single one. You will have to do such a check manually for every
page; there is no possibility to do a site-wide check.
Checking the hyperlinks
Hyperlinks are the lifeblood of the Internet and there is nothing more
annoying than a hyperlink that sounds interesting but does not work.
Fortunately, you can easily check whether the hyperlinks on your site
work by selecting ‘View’, ‘Reports’, ‘Broken Hyperlinks’ from the
menu bar.
To successfully test your links, you need to connect to the Internet
before pressing the ‘verify hyperlinks’ button. FrontPage will then check
both internal hyperlinks, i.e. hyperlinks between pages of your own site,
and external hyperlinks, i.e. links to other websites. You will receive a
final report that indicates each link together with its status and location.
If FrontPage finds any broken hyperlinks, you can fix them without
going to the appropriate page. Instead, double-click on the damaged link
and enter the correct address:
40 Introduction to Microsoft FrontPage
●●●●●●●●●●●●

You have the option of adjusting the link in all pages, which is usually
the way to go.

Other reports
Especially if you created a state-of-the-art website, you may want to
consult some of the other reports too. The slow pages report is
particularly useful: it indicates pages that force a user to wait for more
than half a minute when using a 28.8 kbps modem.

Publishing your website

Web space
Space on someone else’s web
server. Required to publish
information on the web as long
as you do not own your own
server.
Once you are sufficiently satisfied with your site, it is time to publish it
on the Internet. To make information available on the Internet, you need
access to a web server, a computer that contains information and
distributes it over the web. Operating your own server is prohibitively
expensive, but there is the option to use the server of another
organization. To get you started, Maastricht University allocates 5 MB
of web space8 to any student who wants to have his or her own website.

You need to sign up for your Unimaas web space on this website:
„ http://www.unimaas.nl/iis/aanvraag/aanvraag_stud.htm

Once your request has been processed by our ICT service center, you
will be assigned a URL like www.student.unimaas.nl/j.smeets, using the
same name that is used for your student.unimaas.nl email address. You
will also be given a login name and password, which will generally be
the same as the username/password combination for your email account.

8
5 MB of space will be more than enough for your initial projects. You may however find at a later stage that 5 MB are no
longer sufficient. Fortunately, there are a number of companies and institutions that provide ‘web space’ for free. This
usually implies that these organizations will place advertisements on your pages – a necessary evil if you want to avoid
paying for your web space. We have listed a number of providers of free web space in appendix B.

‘File’ „ ‘Publish web…’
Publish your site on the Internet.
The World Wide Web: Security on the Internet 41
●●●●●●●●●●●●
Once ICTS has confirmed that your web space is ready, you can transfer
your documents. Select ‘File’, ‘Publish web’ from the menu bar. The
location you will be publishing to is the URL of your web page, e.g.
http://www.student.unimaas.nl/j.smeets. If you are publishing this
particular web site for the very first time, select ‘publish all pages’ and
confirm by clicking ‘publish’.
At a later point, you will be required to enter your username and
password to authenticate that you are the rightful owner of that web
space.
By the way, if you are using a web provider other than the University of
Maastricht, you will most likely not use your URL as the location for
publishing your web. Instead, most providers will give you an ftp-
address, which is used for publishing, and a URL, which is used for
viewing your website.
If you make any changes to your website at a later stage, you will only
need to publish the changed pages. This cuts down on the time it takes to
transfer your files.
We hope you have fun and success creating web sites!
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
 Image: size-isnt-everything.co.uk

APPENDIX
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

A. DESIGN & DEVELOPMENT RESOURCES

ON T HE W EB
Art and the Zen of Websites
Hints and directions regarding the design of websites.
„ www.tlc-systems.com/webtips.shtml
CNet Builder.Com
How-Tos, references and resources for web designers.
„ www.builder.com
DevShed
A site for advanced open-source web development.
„ www.devshed.com
DreamInk
A guide to design basics.
„ www.dreamink.com
GlassDog Design-O-Rama
A good resource on HTML, plus some resources on JavaScript and CSS.
„ www.glassdog.com/design-o-rama/
HTML Goodies
Good resources for the beginning web developer.
„ htmlgoodies.earthweb.com
Lynda Weinman
Lynda Weinman is at the forefront of graphic and web design and offers
useful tips on her website.
„ www.lynda.com
Project Cool
A portal for web developers, featuring guides and tutorials for both basic
and advanced development techniques.
„ www.devx.com/projectcool/
WebMonkey
A portal for web developers, featuring guides and tutorials for both basic
and advanced development techniques.
„ hotwired.lycos.com/webmonkey/
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●

B. FREE WEB-HOSTING
The ‘complete’ list
Google’s WebDirectory lists several hundred free web-hosting services.
„ directory.google.com „ Computers „ Internet „ Web Design and
Development „ Hosting „ Free „ Personal
Tripod
20 MB of web space, URL: members.tripod.com/yourname/, banner ads.
„ www.tripod.lycos.com
Yahoo! GeoCities
15 MB of web space, URL www.geocities.com/userid/, banner ads.
„ www.geocities.com
FreeServers
12 MB of web space, URL: yourname.freeservers.com, banner ads.
„ www.freeservers.com
PageSpin (recommended)
Only for students: 60 MB of web space, URL: yourname.pagespin.net,
no banner ads, but only available from September – May.
„ www.pagespin.net
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●