Professional Documents
Culture Documents
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.
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
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
GENERAL TOPICS
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
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
WYSIWYG easily create navigation tools for your website and keeps track of all the
What You See Is What You Get. 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.
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
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
●●●●●●●●●●●●
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.
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
●●●●●●●●●●●●
· 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’.
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
●●●●●●●●●●●●
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.
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
●●●●●●●●●●●●
· 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 ‘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.
· 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.
‘View’ „ ‘Toolbars’ FrontPage also offers seven additional specialty toolbars for specific
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.
10 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
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.
– 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.
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
●●●●●●●●●●●●
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.
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
●●●●●●●●●●●●
– 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.
– 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 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
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:
Dialogue box
A window that requires your – Help in working with dialogue boxes
decision on some topic. E.g.
when you save a document, your During some particular activities, there is a quicker way to get help.
PC needs to know under what Let’s assume that you want to print something. You have clicked on
name it should save the ‘File’, ‘Print’ and a window has popped up where you can adjust some
document and will open a
window where you can enter the
of the print settings before printing. However, you are unfamiliar with
filename. This window would be some of the advanced settings. In almost all of these dialogue boxes, you
a dialogue box. 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.
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
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.
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 Because almost everyone automatically uses this page, it can be seen as
The front door of your website, the front door of your website. It is also frequently called the homepage,
which welcomes visitors and
directs them to the different
because it is the point of departure from which your visitors start to
sections of your site. explore your site. And because first impressions count, this page is the
most important page of your site.
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.
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’.
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.
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.
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.
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
●●●●●●●●●●●●
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.
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.
Web-safe colors · Some operating systems assemble colors in a different way than
Colors that look the same no others, and some colors cannot easily be translated. To overcome
matter what computer and which
software you are using to access this problem, a ‘web-safe’ palette of 256 colors has been created,
the Internet. which can be displayed without significant differences on most
devices. You should stick to that palette.
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.
Paragraph break You will notice the first one very soon: if you press /, FrontPage
A line break that leaves some inserts a paragraph break, not a line break. The difference between the
space between the previous and
the next line.
two: a paragraph break automatically leaves some space between the two
lines. To get a normal line-break, you need to press s + /.
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
‘Insert’ „ ‘Symbol’
symbol that cannot be found on the keyboard, select ‘Insert’, ‘Symbol’
from the menu bar, then make your selection from the window that
appears.
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.
Creating links
c + K Links are probably the most important element in web pages. To convert
‘Insert’ „ ‘Hyperlink’ 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
Generate a link that sends email. email address.
28 Introduction to Microsoft FrontPage
●●●●●●●●●●●●
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.
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.
· 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:
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.
Font color
To change the color of the text, click on the ‘font color’ button. This will
Clicking on the left part of the
button will change the color of
change the color of your text to whatever color is indicated on the
your text to the color indicated button. (It is indicated in the bar below the ‘A’; in our case, it is black.)
on the button. If you do not want your text to appear in that particular color, you can
If you wish to use another color, click on the right part of the button to expand the color menu.
click on the right part of the
button.
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.
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.
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.
your liking and typed a name into the style box. In FrontPage, you need
‘Format’ „ ‘Style…’ 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.
‘Table’ „ ‘Insert’ „ ‘Table…’ 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
‘Table’ „ ‘Properties’ „ You can also adjust any of these attributes at a later stage by selecting
‘Table…’ ‘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.
‘View’ „ ‘Toolbars’ „ ‘Tables’ 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:
Creating a Website: Formatting Text & Pages 33
●●●●●●●●●●●●
– Drawing tools
Instead of creating a table as described above, you can also use the
Press this button to draw a table.
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
When drawing tables, your tables. When you are done, you need to turn the drawing feature off by
mouse pointer looks like a pen. clicking on the ‘draw table’ button a second time.
– Vertical alignment
Top Center Bottom The vertical alignment determines whether your text is located at the top,
the center or the bottom of each cell.
– 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.
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.
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
●●●●●●●●●●●●
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
Besides that, you can also set the thickness of the image border as well
One individual point on a as the horizontal and vertical distance between the image and the
computer monitor. surrounding text. All values are in pixels.
Page banners
Page banners indicate the page title. You can insert a page banner simply
‘Insert’ „ ‘Page Banner…’ 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’ „ ‘Navigation Bar…’ 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.
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.
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
5. PUBLISHING YOUR SITE
site for publishing and transfer it
to a server on the Internet. In the next pages, we do some final checks on your site and then publish
it on the Internet.
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.
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.
The World Wide Web: Security on the Internet 41
●●●●●●●●●●●●
Once ICTS has confirmed that your web space is ready, you can transfer
‘File’ „ ‘Publish web…’ your documents. Select ‘File’, ‘Publish web’ from the menu bar. The
Publish your site on the Internet. 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’.
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.
APPENDIX
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
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
●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●