FrontPage 2003 - Course Aware and User Guide

Chapter 1 - Web Site Decisions
CHAPTER 1 - WEB SITE DECISIONS
Before you can start to use FrontPage, you have some big decisions to take about the nature of
your web site. These are:
♦ Should you use frames?
♦ Should you use shared borders?
♦ What browser should you aim at?
♦ What screen size can you assume?
♦ Should you use a theme?
♦ What navigation method should you use?
♦ Do you want your web site to appear high up in searches?
♦ Where will your pictures come from?
♦ What will the layout of your web site be?
♦ Should your web site use style sheets?
♦ On what server will your web site be published (will you be able to use FrontPage
extensions)?
♦ What about other web tools, like dynamic HTML and Active Server Pages?
This chapter attempts to explain and answer all of these questions!
© Copyright 2010 Page 1

1.1 Frames
An example of the use of frames in a web site is shown below:
The advantage of using frames is that you

can scroll each window independently –
something which is very hard to achieve
otherwise.
Here are two good reasons not to use frames:
1) Wise Owl experience is that they create complex problems with navigation, since each
frame functions as an independent page.
2) Most (nearly all) commercial web sites don’t use them – all those professional web
designers must know something.
This courseware does not make any reference to frames – instead we will
Wise Owl’s use layout tables and shared borders to divide up our pages.
Hint
This web site is divided

into a top banner, left menu
page and right content page
using tables – the only loss
is that you can not scroll
each part independently.

1.2 Shared Borders
An example of the use of shared borders is shown below:
The top shared border

always contains a graphic
giving the page title.
The left shared border

always contains the buttons
allowing you to move
between pages.
Shared borders make creating web sites much simpler, and we will use
Wise Owl’s
them in our example web site.
Hint

1.3 Choice of Browser
A browser takes the raw material of a web page (written in HTML) and shows it graphically!
A typical section of HTML (HyperText Markup Language) What a browser would display
Browsers on the Market
There are two main choices of browser on the market:
♦ Internet Explorer (IE) comes with nearly all Version of Vers

new Windows computers – it has about 75% of the Windows ion
of
browser market, and this share is growing. The versions IE
of IE more or less correspond to the versions of
Windows shown on the right. 98 4.0
2000 5.0
♦ Netscape is the other main browser, and comes in many versions (the current one is
6.2). However, some people may still be using versions as early as 4.0.
In addition there are numerous specialist browsers – for example, WAP-enabled mobile phones
rely on specialist cut-down browsers to surf the web.
Choosing a Browser
The biggest question you need to consider is – who will be viewing my site?
♦ If your web site is for a corporate intranet, there is a good chance everyone will
be using the same version of Internet Explorer. This means that you can use features of
FrontPage without considering whether they will work under Netscape.
♦ If it is not vital that everyone in the world should be able to view your site (for
example, it is a sales site and a coverage rate of 80%+ is adequate), consider ignoring
all browsers but Internet Explorer – again, this will mean that you can ignore Netscape.
♦ Otherwise, you must test your web site on all browsers which may be used to view it.
In practice this means that you must be very careful what FrontPage tools you use.
There are a huge number of differences between the way in which
Internet Explorer and Netscape interpret HTML. If you possibly can,
Wise Owl’s assume that everyone viewing your site will be using Internet Explorer –
Hint otherwise, recruit the services of a professional web designer!

1.4 Screen Size
As a web designer, you have very little control over the way in which people will view your web
site:
Carol has a 19” monitor,

with fine pixel resolution
Bob has an old 14”

monitor, with 640 x 480
pixel resolution
When creating a web site, you have two basic options:
♦ Create every page of fixed width (600 pixels, say), and risk the sort of problem shown
above if someone views it using fine resolution on a large monitor.
♦ Create your pages so that they fill any screen, and ensure that text wraps sensibly when
they are viewed on smaller monitors.
You can create tables and change their width settings to control how web sites appear – see the
sections on “Tables” in this courseware for more details.
Many big web sites use a fixed screen width (often 600 pixels) – in Wise
Wise Owl’s Owl’s opinion these look awful. Be nice to your viewers – create
Hint variable width web sites!

1.5 Themes
A theme in FrontPage controls the look and feel of a site – as an example, here is an example of
the same page using 3 different themes:
The Expedition theme The Canvas theme No theme at all
What this shows is that themes provide a quick and easy way to impose a consistent and visually
pleasing style onto all of the pages in your web site. They do, however, have two disadvantages:
Disadvantage Notes
Lack of professionalism You can usually spot a web site which has been designed using a
FrontPage theme – they tend to look a bit amateur.
Lack of flexibility Once you have elected to use a theme, there are certain things that
you can not do. For example, in the box below for changing the
border styles of tables, several of the options are set to Automatic
showing that they are controlled by your theme and can not be
changed:
If you want to create a web site quickly and it is not your main job, use a
Wise Owl’s FrontPage theme to create a good effect quickly. Professional web
Hint designers will avoid using themes and create their own effects.

1.6 Navigation Method
The web site shown below has a very clear method of navigation:
You can use these buttons

to jump to different parts of
your site.
The buttons shown above form

part of a FrontPage feature called a
navigation bar. This automatically
creates link buttons from the Navigation bars work only
navigational structure of your site. when you have a clear
hierarchical structure.
Navigation bars such as the one shown above can also be horizontal, and can contain text, not
buttons:
Text links shown across

the top or bottom of the
page can often look more
professional.
Use navigation bars to control links round your site, otherwise you will
Wise Owl’s have to learn dynamic HTML and JavaScript (which you definitely don’t
Hint want to do unless you have to)!

1.7 Search Engines
One of the main ways in which members of the public will find your web site is by searching for
it. Below is an example of a search run using Google (one of the main search engines on the
Net):
Typing in caveman …
… gives about 102,000 web

sites – how can you ensure
yours is in the top 10?
The main search engines include Yahoo, Lycos, MSN, Google, Excite,
Wise Owl’s AltaVista and the BBC. Each one uses a different technique for
Hint searching the web.
Most people just look at the top 10 sites returned from a search, but there are thousands –
perhaps tens of thousands – of other sites competing with yours for a single search phrase. Here
are some thoughts:
♦ There are many companies who will offer to submit your web site to 2,000+ search
engines, but be aware that 1,995 of these will be obscure and unused. A good example
of such a company is Submit It! (www.submitit.com).
♦ Many web sites offer guidance on getting your web site submitted to search engines –
always use free help when it’s available on the web!
♦ Finally, accept that if your main aim is to get to the top of a search engine’s lists, a
reasonable ambition is to choose a single engine (Google is a popular one) and a single
search phrase to target.
Developers for internal Intranets can ignore this page. External

Wise Owl’s developers should avoid targeting common phrases – choose
Hint “Manchester Excel Training” rather than “IT Training”, for example.

1.8 Where Will Your Pictures Come From?
One of the most time-consuming aspects of creating a web site is to get good graphics.
You can make your life much easier if you choose a white background for
Wise Owl’s your web site – otherwise all your images will have to have the correct
Hint background colour.
Types of Images
Web images are stored in one of two formats:
♦ GIF (file extension .GIF)

♦ JPEG (file extension .JPG)
Although there is a difference between the two formats, either will do for your web site.
Typically JPEG files are used more often for photographs.
Sources of Images
Here are some possible ways in which you can get images for a web site:
Method Notes
Clipart Microsoft Office comes with a large collection of clipart pictures.
When inserting clipart you can also view the Microsoft web site clip
art collection, which contains thousands more pictures.
You can right click on any clipart picture to ungroup it, allowing you
to edit the picture (when you have finished, just group the
component parts back together again). The diagram below shows
the results of ungrouping a cartoon duck:

Method Notes
Someone else’s web site Simply find the picture you want, and click on it with the right
mouse button to copy it or to save it as a picture on your computer:
You should always get the permission of the relevant company

before copying pictures, as they will remain the copyright of the
artist.
Commercial clip-art A search on the Internet will reveal hundreds of web sites
sites specialising in clip-art, most of which will be prepared to draw
images that you specify for a fee.
Graphic artists For really professional sites, there is no alternative to commissioning
a local graphic artist who you can meet regularly to produce artwork.
This must be someone who has experience of producing graphics for
the web.
Draw them yourself You can use packages like Paint Shop Pro and Adobe Photoshop to
create your own images, but be aware that this will consume huge
amounts of your time. Avoid this if at all possible!

1.9 Style Sheets
Style sheets allow you to set up default appearances for different parts of an HTML page – an
example is shown below:
This style sheet sets body text

to be in Comic Sans font with
a yellow background, and any
bold text to appear in large
Brush Script font.
Applying a style sheet to an HTML page completely changes its appeareance!
Style sheets have two huge advantages:
3) You don’t have to apply the same formatting to each bit of text – just specify that (for
example) all text in tables should appear in blue.
4) When you want to change the appearance of your web site, you can do it with just a
single change to a style sheet, rather than having to edit every single page.
The only reason not to use style sheets is if you can’t be sure that
Wise Owl’s everyone viewing your web site will be using Internet Explorer –
Hint Netscape and IE do not use style sheets in the same way!

1.10 FrontPage Extensions
When you have finished your web site, you will want to publish it. This is the process of
copying it from your computer to one which everyone can see:
Publishing your web

site involves copying it
to a web server, which
many people (perhaps
the whole world) can
see.
You develop a web site on your

own computer, normally – no
one else can see it.
Unfortunately, when you are creating a web site

you need to ask two things of your server
administrator:
♦ Is the server UNIX or Windows? If you

will be publishing to a UNIX server, you will not
be able to use FrontPage components.
♦ Even if the server to which you will

publish your web site is running Windows NT or
XP, does it have FrontPage extensions installed?
These are the extra bits of software which allow
you to use FrontPage components.
If the answer to either of the above questions is

“no”, you won’t be able to use many of the options
on the menu shown on the right.
Automatic hit counters, for example, will not run except

on a Windows server with FrontPage extensions installed.

1.11 Other Web Techniques
Dynamic HTML
DHTML (or dynamic HTML)

produces some of the best web
effects. Here is a simple example.
When you click on the + … the menu expands to
button next to a menu … show submenu options
Dynamic HTML is the way to make the contents of a web page change when your viewers click
on a drop list, hover the mouse over a piece of text, etc. However, it is not easy to learn!
Dynamic HTML looks great, but the huge learning curve puts it out of
the reach of most part-time web developers. Be prepared to learn
Wise Owl’s JavaScript and experience endless difficulty getting DHTML to work in
Hint the same way under Netscape and IE.
Showing Database Records
Active Server Pages (ASPs) are pages of HTML interspersed with other commands written
(usually) in a language called vbScript. Typically you use ASPs to present results from a
database. Here is an example:
This is the result of running the page on the left
The red lines are vbScript commands
This is the web page as viewed in IE
Other variations on this theme are ASP.NET and PHP. If you do go

Wise Owl’s down this route, prepare for a long learning curve.
Hint

CHAPTER 2 - CREATING AND EDITING WEB SITES
This chapter describes how to plan and create a web site, and how to add web pages using the
simple example shown below.
2.1 The Example Used for this Manual
We will create a web site for Sandy Stone (a caveman) – Sandy’s home page is shown below:
There are two other pages,

listing how to find Sandy
and his hobbies and
interests.
Although the web sites that you create are likely to be much more
Wise Owl’s complicated than this simple example, the principles used here can be
Hint
applied universally.

2.2 Entering and Leaving FrontPage
Going into FrontPage
To start using FrontPage, choose menu options

similar to those shown below:
a) If you have used

FrontPage recently it will be
listed in this part of the Start
Menu.
b) Alternatively you can

locate FrontPage within All
Programs.
Leaving FrontPage
To exit FrontPage from the menu, select: File Exit
Click the cross at

the top right of
You can also close down the window to
Wise Owl’s close FrontPage.
FrontPage with a single click.
Hint

2.3 Planning Your Web Site
Before starting with FrontPage, it is a good idea to sketch a rough design of your web site. The
diagram below gives an idea of how Sandy Stone’s (fairly simple) web site was planned.
How we want to show it:

What we want to show:
Home Page Where to Find Me Hobbies & Interests
Introduction
Introduction Name Dinosaur hunting
Contact details
Address Discus throwing
Tel. No. Javelin
Hobbies & Interests
E-mail Web site design
Just brief notes are … then split into three columns The three columns will
shown here… with notes underneath for what become three pages on the
will be included. web site.
In FrontPage the home page will be the “parent page”, and any other pages will be linked to it
rather like an ancestral tree.
Home Page
Where to Find Me Hobbies & Interests
Once you have a rough plan of how you want your web pages to look you are ready to create
your first web site!

2.4 Creating a New Web Site
To create a new web site:
5) From the menu select: File New...
6) From the task pane select: One Page Web Site…
7) Complete the dialog box, which appears as shown below, then select OK .
Make sure this option is

selected – this creates a
simple web site
containing one page,
rather than using one of
the wizards to create a
web site, which
probably isn’t what you
want.
Type in a folder path

here (but see the notes
on disk-based and
server-based web sites
below).
8) If the folder doesn’t exist, FrontPage will create it for you. If the folder exists but
didn’t previously contain a website, FrontPage will convert it into a web folder for you.
Disk-Based and Server-Based Web Sites
The web site above is an example of a disk-based web site. Below is an example of a server-
based web site:
If the web site location is

preceded by http, you are
creating a server-based web.
Broadly speaking, you can only create a server-based web site on a computer which is running
IIS (Internet Information Server).
Wise Owl’s The only reason you are likely to want to create a server-based web is if
Hint you are using Active Server Pages – they don’t work on disk-based webs.

2.5 Opening, Closing and Deleting Web Sites
Opening a Web Site
To open a web site, either:
♦ from the menu select: File Open Site...
♦ from the menu select: File Recent Sites and select a site you have been using
recently; or
♦ use the toolbar as shown below:
The file open tool has a

drop arrow to the right of
it, allowing you to choose
to open either a web page
or a web site.
Closing a Web Site
A web site consists of a number of different pages, any of which you may be editing at any one
time. You can close pages individually, or close down the entire site in one go:
9) From the menu select: File Close Site
Deleting a Web Site
You can either delete the entire contents of a web site, or simply stop it being a web site but
leave the files on your computer’s disk:
a) If the folder b) Click with the c) To ensure that you have deleted the web
list is not visible right mouse button site you must choose to delete the web entirely
on the left of on the web site itself, – otherwise the files are still left on your hard
your screen, and choose delete disk.
press + to from the menu that
display it. appears.

2.6 Viewing Web Sites
The FrontPage Screen, and Changing What You See
FrontPage allows you to view individual pages within your web site, or information about your
web site as a whole.
Web Site Views
You can view different categories of information about your entire web site as shown below:
a) Selecting the Web b) This toolbar allows you to

Site tab allows you to choose what information to view.
view information about Currently we are looking at
the entire web site. Folders.
The Folder List, which is displayed on the left hand side of the screen,
can be used to move, copy or delete files or folders. You can press + to
Wise Owl’s
Hint hide the Folder List if it gets in your way. Use the same keyboard
shortcut to redisplay it.

Showing a Map of your Web Site (“Navigation View”)
This is probably the most useful way in which to work with a web site:
Make sure that you have the … then click Navigation to

Web Site tab selected… view a map of your web site
Showing the Navigation Tree Sideways
Sometimes it is useful to rotate the navigation tree so that

the root is shown on the left:
Use the right mouse button to bring up

this menu – the option shown will
rotate the web site map 90°
Sandy Stone’s
web site map in…
... portrait…
… and landscape.

Showing All of your Web Site in One Window
To compress your web site’s navigation view so that it fits into a single window, choose the
options shown below:
In the top right of the

navigation window is a
drop arrow.
This option fits your web

site onto a single screen.
Normally you
have to scroll to
the right to see a
full web site.
The size to fit

option allows you
to see all the pages
in your web site in
one go.

2.7 Creating Web Pages
A web site is just a collection of web pages. Web pages can be added to a web site in several
different ways.
Creating a Web Page as part of Your Hierarchical Web Site
To create and name a web page that you want to be part of your site map:
a) Click b) Click the New

on the page Page button.
beneath
which you
want to add c) Click once on
a page the page, then once
again to rename it.
When you have added or renamed pages, they will not immediately
appear in the folder list in FrontPage. To refresh your web site so that
Wise Owl’s its contents are up to date, press or from the menu select: View
Hint Refresh.
Creating a Web Page Normally
Alternatively you can create a web page as follows:
10) From the Folder List select the folder in which you want to create a new page.
11) Choose any of Tool Top Menu Keyboard Right Mouse

the following options to
create a new page: File New Page... Ctrl +N New Blank Page
12) You can now rename the page created.
Type in a new
name here.
If you rename a page in this way be sure to keep the .htm filename
Wise Owl’s
extension. If you don’t then FrontPage won’t be able to recognise it as a
Hint
web page.

2.8 Moving and Deleting Web Pages
Moving Pages to the Navigation Structure
To include a page in the navigation structure of your web site, simply click and drag it from the
folder list:
a) Click and drag b) Position the page and

c) The page is now part of the
the page from the release the mouse button. A
navigation structure of the web
folder list to the grey outline shows where your
site.
navigation structure. page will fit into the web site.
Deleting Web Pages
To delete a web page, simply click on it in the folder list and

press Delete , or use the right mouse button:
Click here to
delete a
selected page.
If you choose to delete a page on the Navigation view you will be given the
Wise Owl’s
option of deleting the page completely or just removing it from the navigation
Hint structure.
Choose between the

two options.

2.9 Viewing Web Pages
To edit web pages you first need to view them. You can view any page within your web site by
double-clicking on it, regardless of what view you are in.
b) This toolbar allows you to c) Switch between

a) Whichever view you
choose different page views. open pages by clicking
are in, double-clicking a
Currently we are looking at the their respective tabs at
page will open it.
Design view. the top of the page.
When working with individual pages the left

Wise Owl’s hand section of the screen can be set to
Hint display either the Folder List, or the
Navigation Map.
Choose between
the two views by
clicking.

CHAPTER 3 - LAYOUT TABLES
3.1 What are Layout Tables?
Layout tables are used to create the structure of your web pages. Layout tables contain Layout
cells, which in turn hold the contents of your web pages.
Sandy’s homepage
consists of four main
areas.
These areas are

defined by creating a
layout table with
four layout cells.

3.2 Creating Layout Tables and Cells
There are several ways to create layout tables, the methods

we will look at use the Layout Tables and Cells task pane.
a) Select b) …and the

this option task pane
from the appears on the
Table right of your
menu… screen.
Inserting a Layout Table
Inserting a simple layout table of predefined size can be accomplished as shown below:
a) Select this
option from the task
pane…
b) …and an empty
layout table is
inserted on the page.
Drawing a Layout Table
Alternatively, layout tables can be drawn to size:
a) Select this
button from the task
pane…
b) …your mouse
cursor will change to
look like a pencil,
and you can draw a
layout table by
dragging and
dropping.

Drawing Layout Cells
Once you have created a blank layout table you will need to create some layout cells.
a) Select this
button from the task
pane…
b) …then draw a
layout cell by
dragging and
dropping within the
layout table.
You can draw as many layout cells as you like:
From very simple…
…to incredibly
complex designs.
Inserting a Predefined Layout Table
FrontPage contains a number of template layout tables with predefined cells. To insert one of
these into a web page simply select it from the task pane:
Click on the layout you

require and it will be
inserted into the web page.
If you make a mistake and want to start from scratch, selecting the No
Wise Owl’s Layout template from the task pane will remove the currently selected
Hint layout table.

3.3 Selecting Parts of a Layout Table
Once you have created layout tables and cells you can move, resize and rearrange them. To do
any of these things with a layout table or cell you must first select it:
13) Click anywhere within the table.
14) Use the Quick Tag Selector to select the part you require as shown below:
The Quick Tag Selector can be found at the top of the page you are editing.
Clicking this tag selects the Clicking this tag selects the
entire layout table. current table data cell.
The layout table is Selecting a layout Layout cells are

outlined in green. table displays row and outlined in blue.
column size tags.

3.4 Moving and Resizing Layout Cells
One of the great features of layout tables and cells is their flexibility. Cells can be moved and
resized to create exactly the layout you require.
Resizing a Single Layout Cell
a) When you select a layout

cell this tag appears, showing
you the size of the cell in pixels.
b) When you select a cell these

sizing handles (blue squares)
also appear.
c) To resize the cell, move

your mouse cursor over a sizing
handle…
d) …then click, drag, and

release the left mouse button.
Resizing Multiple Layout Cells
When you add cells to a layout table you

will see dotted lines representing column Dotted lines and green
and row borders. Moving these lines diamonds show column
and row borders.
affects all cells whose borders are in line
with them.
Clicking and dragging will move the border.
Moving this border affects

the top edge of all 3 cells.

the bottom edge of cell 1.

the bottom edge of cells 2+3.

Moving Layout Cells
Layout cells can be moved around within a layout table, as long as there is free space to do so.
a) Move your mouse cursor over b) Click and drag with the left
the border of a layout cell. mouse button to move the cell.
c) If you move the cell

over an existing cell your
mouse cursor will change
shape to indicate that it
can’t be dropped there.
Deleting Layout Cells
To delete a layout cell:
15) Select the cell
16) Press Delete on the keyboard

3.5 Setting a Fixed Size for a Layout Table
Layout tables can be resized in several different ways. This can be done either before or after
cells have been added to the table.
Using the Task Pane
The task pane shows the width

and height of the table in pixels.
To change a size, simply click

on it and overtype.
Using the Sizing Handles
a) Move your mouse cursor over one of the

sizing handles (small blue squares) and the
cursor will change shape.
b) Click and drag with the mouse until you

have the size you require, and then release
the mouse button.
Using the Row and Column Size Tags
a) Click on the dropdown arrow b) Fill in the value for column

to the right of any Size Tag and width or height and click
w
select the first option in the list.
When you start adding cells to your table you will automatically create
Wise Owl’s more rows and columns, and thus more row and column size tags. This
Hint makes it more confusing to use this method to change the size of a table.

3.6 Setting a Percentage Size for a Layout Table
Using a percentage size for a layout table means that your table can adjust itself to suit different
combinations of screen sizes, screen resolutions and web browsers. For example:
Using a fixed size value in pixels

means the table will stay the same size
no matter the size of the browser
window.
Using a percentage value of 100%

means the table and cells will fill
100% of the available space, no matter
the size of the browser window.
Setting a Percentage Size for the Whole Table
a) On the quick tag selector

click the drop arrow to the
right of the <table> tag.
b) Select this option from

the drop down menu.
c) From the dialog box

choose to specify width
and/or height.
d) Select the In
percent option.
e) Finally, type
in a value.
Note that you don’t have to set a percentage value of 100% - if you
Wise Owl’s intend for your table to only fill part of the screen then you can set a
Hint
smaller value.

Setting a Percentage Size for Columns and Rows (Autostretch)
Setting a percentage size for an entire table means that every cell in the table is affected when
the viewing area changes. It is often useful to only allow certain parts of the table to do this.
For Sandy’s homepage we

would like to keep the area
containing the navigation
buttons the same size…
…but allow the area

containing the text to
stretch if the viewing area
changes.
To do this requires setting one of the columns to autostretch:
a) Click the drop

b) Select the
arrow next to the
Autostretch option
appropriate column
from the list.
size tag.

Effects of Autostretching
Without autostretch enabled, part …and a big gap is left when the
of the page is hidden when the viewable area is larger.
viewable area becomes smaller…
With autostretch turned on, the …and it stretches when the

column shrinks when the viewable viewable area increases.
area becomes smaller…

3.7 Useful Tools for Creating Layout Tables
When drawing and placing layout tables and cells it is handy to have a guide to help you arrange
them neatly. FrontPage has two useful tools for exactly that purpose.
The Ruler
To view the ruler, choose the option from the View menu as shown:
Choose the Show Ruler The ruler is displayed at the top

option from the menu. and left edges of the page.
The Grid
To view the grid, choose the option from the View menu as shown:
Choose the Show Grid

option from the menu.
The grid is displayed on the page you are

working on. Note that the grid can be seen
only in the design view of FrontPage, so it
won’t appear on your website.

CHAPTER 4 - THEMES
4.1 Overview
Applying themes to your web site is a quick and easy way of formatting your pages. Below you
can see how two of Sandy Stone's pages might look before and after applying a theme.
Before After
Before After

4.2 Applying a Theme
To apply a theme to your web site:
17) From the menu select: Format Theme...
18) From the task pane select the theme you require as shown:
Move your mouse cursor over any

theme and click the drop arrow
that appears.
Select this option to apply the

theme to every page in your web
site.
Select this option to apply the

theme to just the current page.
Underneath the themes list there are another three options which change the way your
selected theme will work. Try changing these and see how the theme looks.
Vivid colours brightens colours for headings, text and links

Active graphics animates some advanced features in your site
Background Image switches the background colour/design on/off
An alternative way to create a common look for the pages in your web site
is to use Cascading Style Sheets. These are more powerful but require
Wise Owl’s knowledge of HTML tags. They are covered in a separate chapter.
Hint

4.3 Customising a Theme
If you like a theme, but want to change a specific aspect of it (the font, colours used, etc.):
19) From the drop list of any theme select: Customize…
20) Complete the dialog box which appears as shown below, then select OK .
Choose which part of the Fill in the appropriate details in

theme you want to modify. the dialog box that appears.
An Example – Changing the Background Picture
You can change the background picture as shown below:
a) Choose to b) Choose to
change the set a different
theme’s background
graphics. picture.
c) Click on the Browse… button

which appears to find a different
picture.
This is a good example of something which seems easy to change, but is

actually quite difficult. Background pictures have to have a number of
Wise Owl’s properties to work correctly, and Wise Owl’s best advice is to avoid
Hint changing parts of a theme unless you understand the implications.

CHAPTER 5 - WORKING WITH WEB PAGES
5.1 Editing Pages
Editing Pages
You can edit any page by double-clicking on it, regardless of what view you are in:
Double-clicking on a page will

open it for editing, regardless of
where you see it.
Setting a Page Title
The title of a web page shows up in your browser (it’s also one of the main things logged by
search engines, when determining how to catalogue your site):
The title of this page is

“Hobbies and interests”.
You can change the title of a page as shown below (noting that this doesn’t affect the file name):
Right-click on a
file to change
its properties, as
shown here…
…then type in the new title and select .

Moving Between Pages
At any time, you may be editing a number of pages simultaneously. You can move from one to
the other in several different ways:
1) Click on the tab of the page you require.
2) Use the Window

menu.
3) Double click on
the page in the
folder list.
Saving Pages
To save the changes to a page:
21) Choose to save the current page: Tool Top Menu Keyboard
File Save Ctrl +S
Closing Pages
When you have finished working with a page in a web site (but still want to keep the site itself
open:
22) Go to the page.
23) Choose to close it down: Top Menu Keyboard
File Close Ctrl + F4

5.2 Adding Text
Where to Add Text
When you create a new web page, a typical structure

is shown on the right:
You can type text at the

vertical flashing cursor.
The other areas of the page which you may have visible are called shared borders - these are
covered in a separate section:
These are the top and left

shared borders - you
should not alter these until
you understand how they
work!
Inserting Line Breaks
When you reach the end of one line, FrontPage Editor will automatically continue on the next.
To throw a new line, press either or + :
Pressing automatically
creates a spacer line followed by a
new paragraph.
Advanced Hint
Wise Owl’s The two options shown above correspond to the HTML <p> and <br>
tags respectively. Pressing + generates a new paragraph that
Hint
follows on immediately from the preceding one.
5.3 Formatting Text
The first step towards formatting text is to select it:
You can click and drag across text to select it

- alternatively, you can hold down the key
and use the , , and keys to select text.
You can then make formatting changes to your text - some ideas are shown below:
Formatting Tool What it Does Example

This box gives a drop-down list of different
Sandy Stone
styles you can use.
This box gives a drop-down list of different
Sandy Stone
fonts you can use.
This box gives you a drop down list of font Sandy Stone
sizes you can use.
Click on this tool to make text bold. Sandy Stone
Click on this tool to italicise text. Sandy Stone
Click on this tool to underline text. Sandy Stone
This tool allows you to set a background

Sandy Stone
colour for the selected text.
This tool allows you to change the font
Sandy Stone
colour of the selected text.
In addition, you can also use the following tools to change the alignment of all the paragraphs
that you have selected:
Aligns text to the left of the page. Sandy Stone
Centres text on the page. Sandy Stone
Aligns text to the right of the page. Sandy Stone
These tools change the indent of selected

Sandy Stone
text from the left margin.

5.4 Bullet Points & Numbering
Items in typed lists often stand out better when bullet points are used. To apply bullet points:
24) Go to the right point on your page.
First of all, make sure you have the

cursor at the place where you want
your bullet list to begin.
25) Click on the bullets icon.
Clicking on the bullets icon

on the toolbar...
… will place the first bullet

where the cursor was.
26) You can now type the first item after the bullet point. If you have a theme for your site,
FrontPage will choose the bullet type for you and you won’t be able to alter this.
27) When you press another bullet point will automatically appear on the next line.
When you have finished your bullet list,

press twice after the last entry in order to
stop another bullet point from appearing at
the beginning of your next line.
Creating number lists is done in exactly the same way as for creating
bullet lists, except that you choose the numbering icon instead of
Wise Owl’s the bullets icon .
Hint

5.5 Adding Clipart and Pictures
Placing clipart pictures into your web site will help to keep the interest of your viewer.
Microsoft Office includes a wide variety of clipart for you to choose from. To insert clipart:
28) Position the cursor where you want the clipart to go.
29) From the menu select: Insert Picture Clip Art...
30) Choose a picture as shown below:
a) Type in a keyword
here and click Go.
b) Move your mouse

cursor over the
picture you want and
click the drop arrow.
c) Choose Insert from

the menu to insert
the image into your
page.
31) FrontPage adds the image to your page:
You can now resize, move,

align, etc. this picture.

Resizing Clipart
To resize Sandy without stretching or squashing him, select his image and click and drag one of
the corner handles, as shown in the example below.
a) Click and drag this

handle…
b) …then let go of it when the

picture is the size you want.
If you prefer to stretch or squash Sandy, choose a handle that is not on the corner of the image,
and click and drag as above.
Removing the Clipart Background
You may want to remove the white background from a picture. To do this:
32) Click on the picture, and then click on the Make Transparent icon on the
drawing toolbar at the bottom of the screen.
33) You can now confirm what you want to do - a message box will appear as below:
Choose this button to make the image

transparent. Don't worry about the
message - GIF is one of the two standard
web image formats.
34) Click on the colour within your picture which you want to make transparent. All pixels
of this colour will now appear transparent.
The background of the

image has gone, and
Sandy now blends in
nicely with the page
background.

Clipart Aligning
The default alignment for clipart and other graphics is the left-hand side of the page i.e. left
aligned. However, you may prefer to centre your clipart or have it right aligned.
The icons for changing the alignment of your image (or text) on the toolbar are shown below:
Align Left Centre Align Right
To change the alignment, select the image to align and click on the required alignment icon.
Adding Other Images
If someone has very kindly drawn a picture for you, you can insert this also:
35) From the menu select: Insert Picture From File...
If the file isn’t stored within

your website, you will need to
search for where it is located on
your computer.

Saving Pictures
Pictures are saved separately from text in web pages. When you come to save or close down a
web page, you will be asked where you want to save the pictures it contains:
It’s a good idea to give a

sensible name to your pictures.
Click on any individual file and
click the Rename button.
Click here to change where the

files will be stored – you do not
have to store them in the same
folder as the text file.
When you have set a name and

save location, click OK to
save your picture.
By default FrontPage puts all

pictures in the root folder of your
Wise Owl’s web site. This means you get
Hint hundreds of images in the same
folder, plus it looks untidy. Use the
Change Folder… button to store
different sets of images in different
folders, and hence make them easier
to find.

Picture Size and Layout Cells
The size of layout cells can be affected when pictures are added to them. This can result in some
confusing information being displayed on the layout table.
a) This layout table has two layout b) The picture that has been inserted is wider
cells, each 225 pixels wide and than the layout cell, which has
450 pixels high. automatically stretched to accommodate it.
c) The size tags now give

conflicting information.
d) The original
e) …whilst the
size is shown at
new size is shown
the left of each
in brackets.
tag…
If you make the picture smaller the layout cell will shrink back to the original size. Alternatively
you can leave the picture the same size and force the layout cell to accept the new width.
a) To clear the contradicting

widths, click on the drop arrow of
the tag and choose the option
b) Complete the
shown
dialog box as
shown, then click .

5.6 Horizontal Lines
To add a line to your page (e.g. underneath a picture):
Select Horizontal Line

from the Insert menu.
Your line will appear where

the cursor was.
Changing How Lines Appear
To change the appearance of a horizontal line, simply double-click on the line, or right-click to
format it:
a) Click with the right mouse

button on the line and choose
the menu shown.
b) You can then set

how wide it is as a
percentage of the
screen size or in
absolute terms, how
high it is, etc.

5.7 Views of a Web Page
There are 5 ways in which you can view a web page: Design view, Code view, Split view, and
Preview view (described below) or in a web browser (see following page).
Design view provides a more-or-less accurate Code view shows the underlying HyperText Markup Language in
view of how your page will look in Internet which all web pages are ultimately written. You can try editing
Explorer or Netscape, and is the view you this if you like – it is a fairly forgiving language, and invalid
normally use for editing web pages. “commands” are normally just ignored.
Split view shows a combination of the design and code views. Preview view allows you to see
an exact representation of how your web page will look in Internet Explorer:
Click on this tab to see a web page

in Preview view.
Preview view is not a good idea. It does not do what it claims (there are
sometimes discrepancies between preview view of a web page and how
Wise Owl’s the page looks in a browser), and offers no additional advantages. Avoid
Hint it and view your pages in a browser (see next page) instead!

Viewing Pages in a Browser
The best way to see what a web page will look like in a browser is to … view it in a browser. To
do this, you must follow these steps:
Failure to follow the steps below exactly is one of the most common
mistakes you can make when creating a web site. In particular,
Wise Owl’s forgetting to refresh pages can make you think you have made a mistake,
Hint when in fact you’re just not seeing your most recent changes.
37) Make sure that you have installed on your computer every browser with which you
want to test your web site. For example, if you want to see what your site will look like
in Netscape 4.0 (a good thing to do), you will need to install this software on your PC.
38) Save your page (although FrontPage will warn you if you miss out this step).
39) From the menu select: File Preview in Browser...
40) Select the option required as shown below:
a) Select the browser and

screen resolution you want to
use to view your web page (here
there’s not much choice!).
b) Click here to add other

browsers (e.g. Netscape) to the
list.
41) If necessary, FrontPage will load the relevant browser program – otherwise, it will just
switch you to it. It will then display your page.
42) Finally (and most importantly), refresh your view to ensure that you are viewing the
latest page, and not an old cached copy!
In Internet Explorer 6, for

example, you can refresh a page
by pressing or by clicking on this
tool.
43) Provided that you remember to refresh your page, you are now seeing what it will look
like to the world. Be aware, however, that what your audience sees will also depend on
their screen resolution, browser settings and what fonts they have installed on their PC.

CHAPTER 6 - SHARED BORDERS
In the chapter on Layout Tables we created layout cells to contain a page banner and navigation
buttons. An alternative way to do this would be to use Shared Borders.
6.1 What are Shared Borders?
Shared borders allow you to create a common look and feel to your web site. The advantage of
this is that you only have to set up the border once and it can be included on every page:
This very old version of

the Wise Owl web site
contains one left shared
border, containing the
navigation buttons.
Sandy Stone's site contains:

a top shared border
containing the page title
a left shared border
containing navigation
buttons.
You can set left, right, top or bottom shared borders for a web site, and then suspend or change
them for any single page.
Experienced web authors should note that to a large extent shared

Wise Owl’s
borders make the use of frames unnecessary.
Hint

6.2 Setting Shared Borders
Setting Shared Borders for your Web Site
When you have designed your web site, you will be ready to tell FrontPage what shared borders
you want to set. To do this:
44) In FrontPage, from the menu select: Format Shared Borders...
Make sure that you are changing

the shared borders for every page
in your web site.
Tick the borders that

you want.
This will put navigation buttons in the

left shared border, allowing you to
move between pages of your web site
– see later in this chapter for more
information.
Changing Border Settings for a Single Page
For the home page only,

we might suspend the
top shared border.
Often you will want to suspend the

standard shared border settings for
(say) the home page of your web
site.

You can suspend the shared borders for a single page by selecting Selected page in the dialog
box above.

6.3 Editing Shared Borders
Shared borders are easy to edit - you can get at them from any page in your web site!
Under normal circumstances, you

are editing a page in your web site
(here it is howto.htm).
Click in a shared border to edit it (the edges of all the

selected borders change from dotted to black). When you
have finished, click back in the main body of the page.
Editing shared borders is frightening because although you appear just

Wise Owl’s to be changing a single page, you are actually making a change which
Hint will affect most if not all pages in your web site!
Where are My Shared Borders Stored?
Sometimes it can be useful to know where shared borders are stored (for copying them from one
site to another, for example). Your shared borders are stored in the _borders folder within your
web site, but you can not usually see this. To view hidden folders:
46) From the menu select:

Tools Site Settings…
47) Complete the dialog box which

appears as shown, then select OK .
Select this option in the

Advanced tab.
48) You should now be able to see some or all of the four possible shared border files in the
folder called _borders: top.htm, left.htm, bottom.htm and right.htm.

6.4 Navigation Bars
Navigation bars allow your readers to move between pages in your web site easily. Navigation
bars can go anywhere in a web page, but are usually positioned in a shared border.
To create a navigation bar:
49) Position the cursor in the shared border in which you want to create a navigation bar:
Here the navigation bar will

go in the Left shared border
(and in doing so will make it
a bit wider!).
50) From the menu select: Insert Navigation...
51) Complete the series of dialog boxes which appear as shown below.
a) Choose which type of nav bar to b) Choose a style for the bar. Theme
use. One that is based on the styles will create graphic buttons,
navigation structure you have text styles can be found at the
already set up is most useful. bottom of the list).
c) Choose the orientation for your nav

bar. Typically you would include a
horizontal bar in a top border, and a
vertical bar in a left border.
d) Click Finish, and see the following

page for what to do next.

Navigation Bar Properties
The final stage in inserting a navigation bar is to choose which pages your buttons will link to.
Tick this option if you

want your navigation
bar always to include a
button allowing your
user to return to your
home page.
The key changes
depending on
which options Tick this option if you
you choose. want your navigation
bar always to include a
button allowing our
user to return to the
next highest level page
in your web site.
The next page describes the effects of the different button options.

The Different Button Options
Consider this fairly old incarnation of the Wise Owl web site:
The table below shows what the various navigation bar options would display:
Option What you will see What it is showing

All the examples below assume that this is the page
we are editing, and that neither the home page nor
the parent page has been requested:
All pages at the next level up of the web site
hierarchy (this page's parent, uncles and aunts).
All pages on the same level of the web site

hierarchy (this page's brothers and sisters). This
includes a link to the page itself!
Pointers to the previous and next pages.
All pages on the next level down in the hierarchy

(this page's children).
All pages on the top row of the navigation tree

(all this page's most distant ancestors). In our
web there is only one home page and we have
chosen not to show it, so we will not see
anything.

Changing the Properties of a Navigation Bar
To change your mind about the buttons a

navigation bar should display, simply double- The hand holding a
click on it: sheet of paper shows
you can change the
properties of this
navigation bar.
Changing how Up, Back, Down and Next Appear
Depending on the options you have chosen, you may get some or all of the following buttons
appearing:
You can change the text which appears

on these standard buttons.
To change the text on these standard buttons:
52) From the menu select: Tools Site Settings...
a) Select this
tab.
b) Change the text that

appears on the standard
buttons by typing new
text here.

6.5 Timestamps
This page gives one idea for how to create a bottom shared border that identifies when a page
was last updated.
It is good practice
for every page of
your web site to
show a timestamp,
showing when the
page was last
edited.
To create a timestamp:
54) Position the mouse pointer where the timestamp should go (this does not have to be in a
shared border, but typically would be).
55) From the menu select: Insert Date and Time...
This is the best option

- it shows when
someone last edited
the page.
Choose a format
for the date and
time.
57) You can now add some text before or after the timestamp - in our example above we
have typed in Page last updated on: before the timestamp.

CHAPTER 7 - LINKS
7.1 Overview
You can use hyperlinks to move between pages within web sites, and to link to other web sites.
Clicking on this link… …takes the reader to another page.
This chapter covers the following sorts of links:
Type of link Notes

Hyperlink Click on the link to jump to another page
Mail link Click on the link to send an email to someone
Hover Buttons which glow when you let your mouse linger
buttons over them – click on them to jump to other pages
Image maps When you click on part of a picture, you jump to
another page
Bookmarks Links to different points within the same page.

7.2 Basic Hyperlinks
To create a basic hyperlink:
58) Type text to describe your link (e.g. "Click here to …."), then select this text.
59) From the menu select: Insert Hyperlink...
Select the page you

want to create a link
to. Note that pages
currently being edited
are indicated as open.
FrontPage puts the URL (the link information) in this box. This
shows that FrontPage is going to create a relative link (i.e. jump to
the file called hobbies_&_interests.htm in the same folder as the
current page) rather than the less useful absolute one (jump to
hobbies_&_interests.htm in f:\training\ … \trainingsite).
61) The text you had highlighted is now a different colour and is also underlined:
Your new hyperlink

has now been created.
A link can also be added to a picture - just select the picture before choosing to insert the link.
Different themes will show hyperlinks in different colours. For most

Wise Owl’s themes, “used” hyperlinks will appear in a different colour to that used
Hint for unused hyperlinks.

7.3 Creating Mail Links
To create a hyperlink that enables your viewers to e-mail you:
62) Type some meaningful text (e.g. "Click to contact the Author"), then select this text.
64) Complete the dialog box which appear as shown, then select OK .
Select the E-mail

Address button, and
type in an e-mail
address.
Recently used email When you are ready,

addresses are listed here. click OK .
65) When a reader clicks on this link while viewing your page on the web, his/her e-mail
software will run and open a "new e-mail message" window for him/her to contact you.
When your user clicks on the link, they

will be given the chance to e-mail you.

7.4 Interactive Buttons
An interactive button is another type of link in the form of an animated button. It actually
consist of three separate images, which are saved when you save the page.
When someone hovers their mouse

button over this hover button, it
glows and changes colour.
To create a hover button:
66) As always, position your cursor where you want your interactive button to go.
67) From the menu select: Insert Interactive Button…
You can see a Use the font and

preview of the image tabs to
button here. change the
appearance of the
button.
Choose the style

of button from the
extensive list.
Type in the text

for the button
The link can be to here.
another page, an
email address or a
bookmark.
In some browsers (for example, some versions of Netscape) when you

return to a web page you have previously viewed hover buttons can
Wise Owl’s appear to vanish! In this case you should click on the Refresh button to
Hint redisplay them.

7.5 Image Maps
Image Maps are images containing hyperlinks to other pages.
a) A polygonal
hotspot is created on
this image.
b) When the reader moves the

mouse over Ireland, the pointer
changes to a hand and a text message
tells the reader where the hyperlink
goes to.
To create an image map:
69) Insert an image onto your page (e.g. a clipart picture), then select the image.
70) Create a hotspot on it by following the steps below:

Choose to draw a
(i) Choose the type of hotspot you want rectangular, circular or
to create from the Pictures toolbar: polygonal hotspot.
(ii) Draw your choice on the top of your image (for polygonal hotspots, click at the
end of each line segment and then double-click to finish).
(iii) Complete the dialog box which appears as shown, then select OK .
Click on the page you

wish to link to…
… or type the location of

the required page here,
then click on .
71) Repeat step 2 for any further hotspots you wish to create on your image map.
You can click on the tool to highlight all the image maps you
Wise Owl’s have created - then click again to hide them again.
Hint

7.6 Bookmarks
You can use Bookmarks to take your reader to a particular location on a large web page:
When you click on this hyperlink

it jumps your user to the correct
point on the page.
Your reader can still view earlier parts of the page by using the
scroll bar, or by pressing or on the keyboard.
Creating Bookmarks
To create a bookmark:
72) Place the cursor where you want

the bookmark to be created.
This is where Sandy

Stone wants a bookmark
on his Hobbies &
Interests page.
73) From the menu select: Insert Bookmark...
74) Complete the dialog box which appears as

shown, then select OK .
Type in a name for

Bookmarks the bookmark and
show as flags. click on .

Creating Links to Bookmarks
Once you have created a bookmark, you can create a link to it:
75) Select the text which you want to become a clickable hyperlink.
a) Choose to link to a
place in this document.
b) Choose any of the

bookmarks present on the
page you have selected,
then click .
Note that in order to be able to create a link to a bookmark in this way,

Wise Owl’s the file containing the bookmark must be open.
Hint

CHAPTER 8 - BASIC TABLES
Previously we used layout tables to create a structure for a web page. Simple tables can also be
used in FrontPage; these lack the flexibility of layout tables but are still useful.
The reason tables are so useful for web sites is that they are largely
browser and screen independent - what looks acceptable on a 14"
Wise Owl’s monitor running Netscape 3 will also look more or less the same on a
Hint 17" monitor running Internet Explorer 5.
8.1 Creating a Table
There are three different ways to create a table in FrontPage.
Inserting a Table from the Menu
This method allows you to specify other options at the same time:
78) From the menu select:

Table Insert Table... Choose to
disable layout
tools.
79) Complete the dialog box
which appears as shown, then select
OK .
Enter the number of rows and

columns.
Options below this point deal

with formatting, which we will
cover later in this chapter.
80) FrontPage will insert a

table at the cursor position.
A blank table will appear

on your page.

Drawing a Table
81) From the menu select: View Toolbars Tables to display the tables toolbar.
82) Choose to draw a table: Tool Top Menu
Table Draw Table
83) The mouse pointer will change into a pencil. Follow the steps shown below:
b) Release the mouse button and

a) Click and drag with the left mouse
your table appears on the page as
button until you have the size you require.
above.
84) The mouse pointer will still look like a pencil. To draw in your columns and rows,
click and drag to form a line from two opposite edges of the table.
a) Click and hold the mouse where you want … and when the pointer is more than half
your line to start, and drag the dotted line way across or down the table, the dotted line
towards the opposite side… will automatically join the opposite side.
85) Repeat the above steps for the remainder of your lines, then click the icon again
to end “drawing” mode (or press Esc ).

Creating a Table Using the Table Icon
86) To create a table using the Insert Table icon:
87) Click and hold the icon on the toolbar. The box below will appear:
Each square represents

a cell in a table.
88) With your mouse button still held down, drag to fill in the required number of cells for
your table:
As you move the mouse, the selected

squares change to a dark blue.
The bottom of the box confirms the

type of table you have selected.
89) Release the mouse button to insert the table onto your page.
As soon as you release the

mouse button, the table is
drawn onto your page, as
shown here.

8.2 Using Tables
Moving between Cells
Clicking on any cell in the table will position the cursor in that cell. Alternatively, once you are
in the table, you might find that pressing the keys below is an easier way of moving around:
Keys What they do

or Moves to the end/start of a cell character by
character, then jumps to the next/previous cell.
or Moves to the previous or next row
Moves to the next cell to the right (or to the first
cell in the next row if there is none)
+ Moves to the next cell to the left (or to the last cell
in the previous row if there is none)
Pressing at the end of a table inserts a new row:
Wise Owl’s
Hint
Press here to create a fifth
row for this table.
Adding Text
90) Position the cursor in the cell where you want your text to be.
91) Type in your text as required:
The cell will grow taller

automatically to accommodate
the text you type.
You can insert almost anything into a table cell - text (as above), clipart
Wise Owl’s pictures, or even another table!
Hint

8.3 Selecting in Tables
Before you can insert, delete or format table rows, columns or cells, you must know how to
select them.
Selecting a Single Cell
To select a single cell, either:
♦ Click in the cell and use the <td> tag on the quick tag selector;
♦ Holding the Alt key down, click in the cell; or
♦ Click in the cell, then from the menu select: Table Select Cell
FrontPage highlights the cell

to show that it is selected.
Those with good mouse skills might like to try the method shown below for
selecting a single cell - it doesn't work for the top row of a table:
Wise Owl’s
Hint
When this "North-East" arrow
appears beside a cell, you can click to
select the cell.
Selecting Multiple Cells
You can click and drag down/across cells to select them, or use the Ctrl key to select non-
adjacent cells:
You can click down and across cells in a You can select non-adjacent cells like this by
block to select them. Alternatively, click on selecting the first block, then holding down the
the top left cell, then with the key Ctrl key while you select subsequent blocks.
held down click on the bottom right cell.

Selecting Rows
You can select rows by clicking and dragging down them:
a) Position the mouse immediately to b) Click and drag to

the left of the first row you want to select as many rows as
select. you want.
Alternatively, use the <tr> tag from the quick tag selector, or select one or more cells and then
from the menu select: Table Select Row
Selecting Columns
You can select columns as for rows, by clicking and dragging across them:
b) Click and drag

to select as
many columns
as you want.
a) Position the mouse immediately above

the first column you want to select.
Alternatively, select one or more cells and then from the menu select: Table Select Column
As for selecting cells, you can use the key to add rows/columns onto
Wise Owl’s your selection:
Hint
Here we used the

key to select rows
1, 3 and 4
simultaneously.
Selecting a Whole Table

To select a whole table, click on any cell within the table then from the menu select: Table
Select Table. Alternatively, you can double-click to the left of the table, or use the quick tag
selector.

8.4 Adding Cells, Rows & Columns
Adding Cells
To add new cells to a table (without adding rows and columns):
92) Position the cursor in the

cell to the left of where you want
your new cell to be created.
The cursor is positioned

inside the table.
93) From the menu select: Table Insert Cell
Note that the spaces above and below

this cell are not part of the table.
The width of the columns

has been reduced in order
Inserting cells like this is something which is probably more often
to fit four columns in a
done
Wise Owl’s by same
table of the accident
width.than design – it can make for very confusing tables!
Hint

Adding Rows or Columns
To insert one or more rows or columns into a table:
94) Position the cursor in a cell:
The cursor is in the second

row in the second column.
95) From the menu select: Table Insert Rows or Columns...
You can choose whether you want to

insert rows or columns, how many to
insert, and whether they should go
before or after the current row/column.
Don’t forget that you can also use the icon in the Tables toolbar to
Wise Owl’s draw in new rows or columns.
Hint

8.5 Deleting Cells, Rows & Columns
The principle for deleting rows, columns and cells is the same - the example below would delete
the address row from the table shown:
97) Select the cell or cells you wish to delete.
Here we have selected

the second row.
98) Choose one of these Tool Top Menu Right Mouse

options:
Table Delete Cells Delete Cells
99) FrontPage deletes the row(s), column(s) or cell(s) you had selected:
The selected cells

have been deleted.
Don’t forget that you can also use the in the Tables toolbar to
Wise Owl’s erase row and column dividers.
Hint

8.6 Resizing Columns and Rows
Unless formatted manually, columns and rows are always distributed

Wise Owl’s
evenly within a table.
Hint
Changing Column Widths
To quickly alter the width of a column, follow the steps below:
a) Place the cursor over the border you

wish to move until the pointer changes
to a two-headed arrow.
b) Click and drag the border

until the dotted line is where
you want the border to be.
Changing Row Heights
To quickly alter the height of a row, follow the steps below:
a) Place the cursor over

the border you wish to
move until the pointer
changes to a two-headed
arrow.
Click and drag the border until the

dotted line is where you want the
border to be.
You can also try double-clicking with the mouse at step (a) above - this
will automatically change the width of the column to be exactly wide
Wise Owl’s enough to accommodate its widest entry. This method works for all but
Hint the right-most column.

Sizing Allowing for Different Browsers/Screen Sizes
The table below looks sensible using Internet Explorer on a 17" monitor at 1024 x 768 pixels
resolution:
By centrally aligning the

table, we ensure that it
looks sensible.
However, what will happen to the table if we make the browser window smaller or use a
different screen or browser? The answer comes from the column height and row width settings:
a) Select the row or column whose

width/height you want to determine
and right click with the mouse.
b) Select this option to display

its properties.
Here are the settings for the table shown above, with what they mean:
Rows 1, 3 and 4 Row 2 Column 1 Column 2
Because the row heights are measured in Because the widths of your columns are measured as a
pixels, readers using smaller screens may have percentage of the table's width (which may or may not be
to scroll down to see the whole of your table. 100% of the screen), the column widths will appear smaller
on smaller screens.
The simple way to avoid problems is to ensure that in every table that
Wise Owl’s you create, columns are measured as a percentage of the total table
Hint width, and the sum of these percentages is not more than 100%.

8.7 Table Alignment
Table alignment enables positioning of a table on the left, the right or the centre of a web page.
Left Aligned Centre Aligned Right Aligned
To align a table:
100) Ensure that the cursor is inside any of the cells within the table.
101) Choose one of these Top Menu Right Mouse

options:
Table Properties Table Table Properties
102) Complete the dialog box which

appears as shown below, then select
OK .
Choose from this drop

down list of alignment
options.
Specify the table width as a

percentage of the total
screen width – although
12% (as here) is a bit on
the small side!
Choosing centrally aligned tables, and making sure that their width (as
specified in the above dialog box) does not exceed 100% of the screen,
Wise Owl’s should mean that your tables look sensible using most browsers and most
Hint screen sizes.

8.8 Aligning Cells
You can align text within cells horizontally or vertically:
This FrontPage table shows the main horizontal and vertical alignment options.
Text or graphics can be aligned horizontally and/or vertically within a cell. To set the alignment
for cells in your table, follow the steps below:
103) Ensure that the cursor is positioned in the cell or, if you wish to align more than one
cell, select the cells required.
104) Choose one of Top Menu Keyboard Right Mouse

these options:
Table Properties Cell Alt + Cell Properties
Select the horizontal

alignment required.
Select the vertical

alignment required.
Unless this Wise Owl is missing the point, the baseline vertical alignment
Wise Owl’s option is not worth bothering with!
Hint

CHAPTER 9 - ADVANCED TABLES
This section contains more details on how you can use and format tables.
9.1 Merging and Splitting Cells
Merging Cells Together
This option is particularly useful for

table headers:
This header spans two cells -

they have been merged together.
To create a header like this:
106) Enter text into the left-most cell in your block of cells to be merged:
You can type text into the cells to

be merged, although often it is
easiest to merge then enter data.
107) Select the cells you want to merge:
These are the two cells

which we want to consider as
a single cell.
108) Choose to merge the Tool Top Menu Right Mouse

selected cells:
Table Merge Cells Merge Cells

Splitting Cells
Less usefully, you can also tell FrontPage to subdivide a cell in your table into different parts:
To split a cell as shown above:
109) Click in the cell you want to Tool Top Menu Right Mouse
split, then choose to split it up:
Table Split Cells... Split Cells…
Here we are subdividing the address

into three separate rows.
111) You can now drag and drop to move

the address lines into the correct cells:
FrontPage is not clever

enough to know that you
want one line of the
address in each cell.
Advanced Hint
Wise Owl’s
One other thing to try is to change the
Hint span of a cell, by altering its
properties. This quickly leads to
messy and unsymmetrical tables,
however.
It's not often that you will want to

change these numbers.

9.2 Table Captions
Instead of merging cells together, you could use a table caption to achieve the effect shown
below:
Using merged cells, the title carries the

same border as the rest of the text. A table caption avoids this problem.
Setting a caption like the one shown above is easy!
112) Click anywhere within the table.
113) From the menu select: Table Insert Caption
Selecting a Caption
To select a caption for formatting, simply click to its left:
Click with this mouse pointer

to select a table caption.
Deleting a Caption
To delete a caption, double-click to its left to select it then press Delete .
Double-click with this mouse

pointer to the left of the caption
to select it, then press .

9.3 Table Borders and Shading
The options described in this section can be equally applied to both

Wise Owl’s normal tables and layout tables.
Hint
The Parts of a Table
The diagram below shows the various parts of a table:
Every table has a border round it - even

though it may sometimes have zero
width. This border is 10 pixels wide.
The gaps between cells (shown here in

grey) are called the cell spacing. Here the
cell spacing is set to 20 pixels.
The gap between the contents of each cell and its border is called
the cell padding. Here the cell padding is set to 10 pixels.
Setting Borders
You can choose to set borders for a table as follows:
114) Click anywhere within your table, Top Menu Right Mouse
then choose to change its properties:
You must first set the border size to

be at least one pixel, otherwise you
won't see the border!
Set the border colour (the colour of

the Default option is determined by
any theme you have applied).
Cell borders must be set separately. See later in this chapter for how to do this.

Setting 3-Dimensional Effects
By judicious use of light border and dark border colours, you can set 3-dimensional effects for
your table:
The "light colour" here is The "dark colour"

silver - this determines the top here is black - this
and left edges of your table. determines the
right and bottom
edges of your table.
To set effects like this:
117) Complete the dialog box which appears in part as shown below, then select OK .
Set any light and dark border colours.

If you set a light colour but no dark
colour, FrontPage will automatically set
the dark border.
Collapsing the table border

will remove any cell spacing
you have set.

Cell Spacing
To control how spaced out your cells look, you can set the properties as shown:
119) Enter a cell spacing value in the dialog box as shown below, then select OK .
A cell spacing value of 0 means that all your A cell spacing value of 10 puts a gap of 10
cells touch each other. pixels between all your cells.
Cell Padding
To control margins in relation to cell borders, you can set cell padding values (from the table
properties dialog box) as shown.
A cell padding value of 0 means that the cell A cell padding value of 10 puts a gap of 10
contents are placed in contact with the cell pixels between the cell contents and all the cell
border to which they are aligned (left in this borders.
case).

Table Background Colours and Pictures
Below are a couple of examples of possibilities with table backgrounds:
Here the table background colour is set to grey, but Here a caveman forms the table's background
each cell's background colour has been set to white. image – cells have a white background colour.
To set the background colour/image for a table:
121) Complete the dialog box which appears in part as shown below, then select OK .
Click on this button to

choose a picture to form
your table's background -
but notice that "busy"
pictures like the caveman
shown above make for
messy-looking tables.
Choose the background colour for your table. In this example if

the caveman image is transparent, the background colour for the
image will be set to be white.
122) When you have finished, select all the cells in your table and set their background
colour (see the next page for how to do this).

9.4 Cell Borders and Shading
In addition to setting global settings for a table, you

can set individual cells' borders and background.
Here the table has a grey background, but

the six cells have a white background.
The first steps towards doing this are always as follows:
123) Select the cell(s) whose borders or colour you want to change.
124) Choose to change the Top Menu Keyboard Right Mouse

cells' properties:
Table Properties Cell Alt + Cell Properties…
Setting Cell Borders
You can change the borders of a cell in an identical way to changing a table's borders:
Alternatively, set any light and dark

border colours to create a 3-
dimensional effect for the selected
cells (this is explained in more detail
in the preceding pages).
To set the border colour for the selected

cell(s), choose a colour here.
Setting Cell Backgrounds
You can change the background colours or images of cells just like for a table:
Click on this button to choose a

picture to form the background
for the selected cell(s), but note
that having different pictures for
different cells can look messy!
Choose the background colour for the selected cells. In this example the selected cell(s) will have
a picture of a caveman as their background, and this picture will have a white background.
The options for formatting layout cells are more limited - for example you
cannot set a background picture. To format a layout cell, click in the cell,
Wise Owl’s from the menu select Table Cell Formatting… and then use the task
Hint pane to set border and background colours.

CHAPTER 10 - HTML
HTML is a language with many keywords, and this chapter doesn’t

attempt to give a reference to more than a few of them. If you want to
Wise Owl’s become a serious HTML programmer, a good first move is to buy an
Hint HTML reference book.
10.1 What is HTML
HTML (HyperText Markup Language) is the language in which web sites are written (FrontPage
just makes it easier to do this). Here is a sample:
HTML is interpreted by browsers

like Internet Explorer into pages on
screen
Viewing Other People’s HTML
The great thing about HTML is that it’s publicly viewable. Go to any web site in Internet
Explorer or Netscape and click with the right mouse button, and you’ll be able to view its
contents:
This shows how to view the contents of the Google
web site in IE5 – like many pages on commercial
web sites, this HTML also contains embedded
JavaScript, a progamming language which makes
sites dynamic

10.2 HTML Tags and Attributes
Tags
The basis of an HTML document is the tag – the format is:

<formatting code> text </formatting code>
where formatting code can be any valid HTML code. For example, this piece of HTML would
display “Wise Owl” in bold:
<b>Wise Owl</b>
Some general principles of HTML documents:
Principle Details
Spaces are ignored Any space that you type into HTML is ignored. To get a
space to show up, you must type it in as a non-breaking
space – “ ”
Blank lines are Likewise, any blank lines you put into HTML by pressing
ignored will be ignored. If you do want to put a blank line in,
put <p> </p> (i.e a paragraph with a blank space
in), to ensure it doesn’t get ignored.
All tags have to Every tag has to begin with a <> tag and end with a </> tag,
start and end apart from paragraph tags like <p> (which you can use in
isolation to generate a new paragraph).
Attributes
Most of the standard HTML tags have a pre-defined set of attributes, controlling how they work.
For example, the <p> tag has an attribute controlling whether the paragraph is to be left, centre
or right-justified.
This tag specifies that the paragraph which follows

should be centre justified.

10.3 Tags
This section describes some common tags and their associated attributes. This is by no means an
exhaustive list!
Title <title>
The title tag only appears in the <head> section and specifies the text to appear in the browsers
title bar.
HTML Web Preview

<head>
<title>HOME PAGE</title>
</head>
Comment 
Comments are used for annotation and are never displayed in the browser window - in fact
browsers completely ignore anything inside a comment tag. Comments are used to break your
HTML into logical ‘chunks’.
HTML Web Preview

 No preview - comments do not appear!
Note that the comment has no closing tag (</!-- --> does not exist!).
Headers <H1>, <H2>, … , <H6>
Headers are predefined text styles. <H1> being the largest and <H6> being the smallest.
HTML Web Preview
<H1>Welcome to the Pets DataBase!</H1>

<H2>Please select an option</H2>
Paragraph <p>
The paragraph tag forces two carriage returns (pressing ENTER on the keyboard twice).
Compare the second example which uses no tags at all.
HTML Web Preview

<p>The cat sat on the mat</p> The cat sat on the mat
<p>The dog sat on the cat</p>
The dog sat on the cat
The cat sat on the mat.
The dog sat on the cat The cat sat on the mat.The dog sat on the cat

Image <img>
Image tags are used to insert pictures. Note the src=“filename” attribute.
HTML Web Preview
<img src="owl.bmp">
HyperLinks <a>
Hyperlink tags are used to create clickable areas on your web pages.
HTML Web Preview

Please click
<a href="mailto:mail@wiseowl.co.uk">here<a> Please click here to contact us.
to contact us.
Bold <B>, Italic <I> and Underline <U>
As you can probably guess, these tags apply formatting.
HTML Web Preview

<p>The <b>cat</b> <i>sat</i> on the The cat sat on the mat.
<u>mat</u>.</p>
Align=“Alignment” (attribute)
Again you can probably guess the purpose of the align attribute. Notice it is placed inside the
<p> tag. Replace “Alignment” with “Center”, “Left”, “Right” or “Justify”
HTML Web Preview

<p align="right">The cat sat on the The cat sat on the mat.
mat.</p>
Alt <alt> (attribute)
This tag displays alternate text for images when you hold the mouse cursor over it.
HTML Web Preview

<p><img alt="Owl" src="owl.bmp"></p>

10.4 Tables
The Tags in a Table
The main building blocks (tags) of a table are:
Tag What it means

<table>, Begin and end a table – the entire contents of the table must
</table> come between these two tags.
<tr>, </tr> Begin and end a row in the table
<td>, <td> Begin and end each cell in a row (if you think of td as
standing for “table data”, it makes sense)
HMTL Web Preview

<table width="20%">
<tr>
<td width="50%">Pet</td>
<td width="50%">Owner</td>
</tr>
<tr>
<td width="50%">Boris</td>
<td width="50%">Fred</td>
</tr>
</table>
Spanning Rows and Columns
In HTML every table must be a rectangular grid of cells. To ensure that this is the case, HTML
uses the RowSpan and ColSpan attributes to fill in extra spaces, as in the above example:
Sandy’s address
Name: Sandy Stone
How the table appears
First row spans 2 columns

The HTML view of 2 of the rows
in the above table Single cell Single cell
How HTML constructs the table

10.5 Structure of a Web Page
How a Web Page is Structured
Every HTML page is structured as follows:
<HTML>
<HEAD>
The Head section contains the title of the page, whether it was … other header information goes here …
built in FrontPage, whether it uses themes or shared borders, etc.
<Title> Title goes here </Title>
</HEAD>
<Body>
The Body section contains the contents of the page, including all
text and images to be displayed … content of page goes here …
</Body>
</HTML>
FrontPage Headers
FrontPage creates cryptic-looking headers – here are the main lines explained:
The page was generated using

FrontPage 2003 (or FrontPage
6.0, as it is known internally).
The page uses the Expedition

theme (referred to here by its
internal name).
This page uses top (t) and left (l) shared borders.
The main thing that you need to know about FrontPage headers is that
Wise Owl’s you should avoid editing them (with the exception of the title) – it may
Hint have unpredictable results!

10.6 An Insight into Professional Web Design
Virtually all professional web sites compose pages from a number of nested tables, which can be
difficult to interpret.
The reason for using tables to construct pages is that they are more or
less browser independent (an HTML table will look the same in Internet
Wise Owl’s Explorer and Netscape) and screen independent (provided you use
Hint percentage widths, tables will look sensible on all screens).
An Example – Microsoft.Com
Here is what the Microsoft web site looked like at

the time of writing:
Here is how the main tables for this web site are made up:
This search form actually consists of six different

rows, including spacer rows. As commonly The main table is set at 621 pixels wide, to ensure that it
happens in big web sites, single pixel transparent will be visible in its entirety in a predictable way on most
images are used to fill spacer rows to ensure that browsers. This ensures maximum compatibility, but looks
they are not ignored by browsers. strange on large resolution screens.
This column of options consists

of more nested tables – these are
not shown here to avoid
complicating the diagram!
This is a cell spanning two

columns of the table to which
it belongs.
This consists of a set of nested

tables (not shown here).
Another table is nested within the

bottom row of the screen.

CHAPTER 11 - STYLE SHEETS
Style sheets are a (better) alternative to using themes – they work in the same way as for
Microsoft Word, determining the default way in which various parts of a site appear.
Before deciding to use style sheets, do a little test to make sure that all
Wise Owl’s your web site users will be able to view them correctly (particularly non-
Hint Internet Explorer users).
11.1 Overview of Style Sheets
The diagram below shows the same page with and without styles applied:
The same page with body text set to Comic Sans font, a
A page without styles applied
yellow background and table cell formats changed
The style sheet which effected the formatting changes shown above is as follows:
This shows that body text (i.e. most

normal text) will appear in Comic Sans
font (or the closest to it possible) with a
white background.
This shows that table cells will be displayed with white lettering on a yellow background.
The above diagram shows that to use style sheets effectively you need to
Wise Owl’s understand HTML tags. You don’t, however, need to learn the codes for
Hint the different colours – the style sheet editor will fill these in for you.

11.2 Creating a Style Sheet
You can have a number of different style sheets, although if you want to apply the same look-
and-feel throughout your site it is a good idea only to have one. To create this style sheet:
125) From the menu select: File New
126) Select More page templates from the task pane.
a) Select to
create a style
sheet.
b) Choose this icon to

avoid creating a style
sheet which has been
already filled in.
128) See the following page for what to do next!
Initially style sheets appear

as blank sheets!
129) When you have finished setting styles, Tool Top Menu Keyboard
choose to save your style sheet:
File Save As... Ctrl +S
130) The style sheet will appear in the FrontPage file list (all style sheets have a CSS
extension, standing for Cascading Style Sheet):
You can double-click on a style

sheet file to edit it, just like for any
other FrontPage file.

11.3 Creating and Editing Styles
To set a style within a style sheet:
131) Make sure you have created or are editing a style sheet (see previous page).
132) Identify which HTML tag you want to change. Here are a few examples:
Tag What it will change

Body Most content within your site
Table The format of tables
TD The format of each table cell
P The format of paragraphs of text
IMG How inserted images will appear
133) From the menu select: Format Style...
134) Complete the dialog box which appears as shown below:
b) Select an HTML tag

(here we have chosen the TD
tag, which will affect all table
cells).
a) Make sure that you

have this option selected
(the alternative, User-
defined styles, is beyond
the scope of this
courseware).
c) Click here to change how this tag will appear.

135) You can now choose which aspect of the style you want to change:
The name of the selected tag.
This shows what current

settings you have.
Click here to change how

this style appears …
… then choose which aspect of the

style you want to change.
136) Select OK twice to return to the style sheet.
There’s nothing to stop you editing the style sheet directly (if you are
happy doing this):
Wise Owl’s
Hint
Are you brave enough to try different numbers in here?

11.4 Applying a Style Sheet
There’s not much point creating a style sheet unless you apply it to one or more pages in your
web site! To do this:
137) From the menu select: Format Style Sheet Links...
138) Complete the dialog boxes which appear as shown below, then select OK .
a) Select this option to apply the

style sheet to all the pages in
your web site.
c) Select a style sheet.
b) Click here to choose which style d) Select OK .

sheet you want to link to each
page in your web site.
139) FrontPage puts the following HTML line in each page of your web site:
This line shows that this page uses the caveman.css style
sheet. If the page also uses a theme the style sheet settings
will override the theme settings where they conflict.

CHAPTER 12 - PUBLISHING A WEB SITE
When your web site is ready to be viewed by the world, you should check and publish it.
You may have been editing your final web site directly, in which case you
Wise Owl’s won’t need to publish it – however, this will mean that anyone will have
Hint been able to view your development work in progress.
12.1 Checking your Spelling
You can run a spell check on any page that you are working on, or check your whole web site in
one go. To do this:
1) Switch to the web site view.
2) Choose to check your spelling: Tool Top Menu Keyboard
Tools Spelling... F7
3) Choose to check the spelling of the entire web:
Select this button to check the

whole of your web site.
4) FrontPage shows you a list of all errors found:
Double-click on each mistake

to choose what to do about it
– it’s fairly intuitive to work
out what to do!
You can also right click on any individual spelling mistake (shown with
Wise Owl’s wavy red underlining) to correct it, add it to the dictionary or ignore it:
Hint
Here the correct option is shown,
so you could just select it.

12.2 Using Reports to Check for Errors
When you think your web site is ready for publishing, use the built-in reports to check for
inconsistencies and errors:
A good place to start is

with the default Site
Summary report,
which summarises all
the pages in your web
site.
The main reports for checking for errors are shown below:
The menu options shown list items as follows:
Report What it shows

Unlinked Files Files that can’t be reached by
following links from the home
page.
Slow Pages Shows all files exceeding the
download time set in Tools
Options... under the Reports
View tab. The default is set to 30
seconds download at 28 kbps
download speed, but you can
change this.
Broken Hyperlinks Lists files which have hyperlinks
which don’t go anywhere.
Component Errors Lists files containing “broken”
FrontPage components. For
example, you might have
specified to include one page
within another, when the
included page no longer exists.
Note that you can double-click on any row of the site summary report to
Wise Owl’s see its detail. For example, the site summary report above shows 4
Hint unlinked files – double-click on this row to see where they are.

12.3 Publishing your Site
After correcting spelling and other errors, you are ready to publish your web site to the world!
The first step is to switch to the Remote Web Site view.
Switch to the Remote Web

Site view and click the
remote web site properties
button.
Fill in the dialog box which

appears as shown below.
Choose the type of server your web

site will run from. Here we have
chosen a remote server suporting
FrontPage Server Extensions.
Specify where the web site is to be

stored (this could be an internal server
on your Intranet, or – as here – a server
provided by a hosting company).
On the Publishing tab select what

part of your web site to publish.
Just publishing pages that you have
changed will speed up the process.
If you are publishing to a remote

server, clicking OK will prompt
you for a username and password,
which should have been provided
by your hosting company.
Make sure
that you are
copying
from Local
to Remote.
Finally, click the Publish Web Site
button to copy your files to the
location specified. After all, copying
files is all publising really is!

Publishing Selected Pages
FrontPage 2003 allows you to publish individually selected pages, which makes updating your
website even quicker.
From the Folders tab of the Web

Site view, select the pages you
want to publish. You can use to
select multiple pages.
Click with the right mouse

button on one of the selected
pages and choose the option
shown.
The pages you have selected will then be copied straight to the location you specified when you
first published your web site.

12.4 Possible Problems when Publishing
Here are some of the main problems you may have when publishing a web site:
Problem Solution
FrontPage won’t give you access to Contact the server administrator or web site
the web site to which you want to host for the correct name and password, and to
publish ensure that you have access to publish to this
server.
Certain features of FrontPage don’t The server to which you are publishing doesn’t
work, or your site looks nothing like it support FrontPage components. If it is a
did in FrontPage. Windows server, contact the server
administrator to see if it is possible to install
FrontPage extensions (without which
FrontPage components won’t work).
Active server pages won’t work. You have published to a disk-based (not
server-based) web, or the server to which you
are publishing isn’t running IIS. Contact the
server administrator to ask if IIS can be
installed.
Your web site hasn’t changed Have you refreshed the page?

FrontPage 2003 - Course Aware and User Guide

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

FrontPage 2003 - Course Aware and User Guide

Uploaded by

Copyright:

Available Formats

Chapter 1 - Web Site Decisions

CHAPTER 1 - WEB SITE DECISIONS

♦ Should you use frames?

♦ Should you use shared borders?

♦ What browser should you aim at?

♦ What screen size can you assume?

♦ Should you use a theme?

♦ What navigation method should you use?

♦ Do you want your web site to appear high up in searches?

♦ Where will your pictures come from?

♦ What will the layout of your web site be?

♦ Should your web site use style sheets?

This chapter attempts to explain and answer all of these questions!

© Copyright 2010 Page 1

An example of the use of frames in a web site is shown below:

The advantage of using frames is that you

Here are two good reasons not to use frames:

This web site is divided

© Copyright 2010 Page 2

1.2 Shared Borders

An example of the use of shared borders is shown below:

The top shared border

The left shared border

© Copyright 2010 Page 3

1.3 Choice of Browser

Browsers on the Market

There are two main choices of browser on the market:

♦ Internet Explorer (IE) comes with nearly all Version of Vers

© Copyright 2010 Page 4

1.4 Screen Size

Carol has a 19” monitor,

Bob has an old 14”

When creating a web site, you have two basic options:

© Copyright 2010 Page 5

The Expedition theme The Canvas theme No theme at all

© Copyright 2010 Page 6

1.6 Navigation Method

You can use these buttons

The buttons shown above form

Text links shown across

© Copyright 2010 Page 7

1.7 Search Engines

… gives about 102,000 web

Developers for internal Intranets can ignore this page. External

© Copyright 2010 Page 8

1.8 Where Will Your Pictures Come From?

Web images are stored in one of two formats:

♦ GIF (file extension .GIF)

© Copyright 2010 Page 9

You should always get the permission of the relevant company

© Copyright 2010 Page 10

1.9 Style Sheets

This style sheet sets body text

Applying a style sheet to an HTML page completely changes its appeareance!

Style sheets have two huge advantages:

© Copyright 2010 Page 11

1.10 FrontPage Extensions

Publishing your web

You develop a web site on your

Unfortunately, when you are creating a web site

♦ Is the server UNIX or Windows? If you

♦ Even if the server to which you will

If the answer to either of the above questions is