Professional Documents
Culture Documents
Before you can start to use FrontPage, you have some big decisions to take about the nature of
your web site. These are:
♦ 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?
1.1 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
Shared borders make creating web sites much simpler, and we will use
Wise Owl’s
them in our example web site.
Hint
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
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!
As a web designer, you have very little control over the way in which people will view your web
site:
♦ 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:
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.
The web site shown below has a very clear method of navigation:
Navigation bars such as the one shown above can also be horizontal, and can contain text, not
buttons:
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)!
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 …
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.
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
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:
Style sheets allow you to set up default appearances for different parts of an HTML page – an
example is shown below:
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!
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:
Dynamic HTML
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.
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 chapter describes how to plan and create a web site, and how to add web pages using the
simple example shown below.
We will create a web site for Sandy Stone (a caveman) – Sandy’s home page is shown below:
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.
Leaving FrontPage
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.
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
Once you have a rough plan of how you want your web pages to look you are ready to create
your first web site!
7) Complete the dialog box, which appears as shown below, then select OK .
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.
The web site above is an example of a disk-based web site. Below is an example of a server-
based web site:
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.
♦ from the menu select: File Recent Sites and select a site you have been using
recently; or
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:
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.
FrontPage allows you to view individual pages within your web site, or information about your
web site as a whole.
You can view different categories of information about your entire web site as shown below:
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.
This is probably the most useful way in which to work with a web site:
Sandy Stone’s
web site map in…
... portrait…
… and landscape.
To compress your web site’s navigation view so that it fits into a single window, choose the
options shown below:
Normally you
have to scroll to
the right to see a
full web site.
A web site is just a collection of web pages. Web pages can be added to a web site in several
different ways.
To create and name a web page that you want to be part of your site map:
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.
10) From the Folder List select the folder in which you want to create a new page.
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.
To include a page in the navigation structure of your web site, simply click and drag it from the
folder list:
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.
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.
Choose between
the two views by
clicking.
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.
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.
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.
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.
…to incredibly
complex designs.
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:
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.
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:
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.
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.
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.
Layout tables can be resized in several different ways. This can be done either before or after
cells have been added to the table.
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.
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:
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 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.
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…
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:
The Grid
To view the grid, choose the option from the View menu as shown:
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
18) From the task pane select the theme you require as shown:
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.
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
If you like a theme, but want to change a specific aspect of it (the font, colours used, etc.):
20) Complete the dialog box which appears as shown below, then select OK .
a) Choose to b) Choose to
change the set a different
theme’s background
graphics. picture.
Editing Pages
You can edit any page by double-clicking on it, regardless of what view you are in:
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):
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…
At any time, you may be editing a number of pages simultaneously. You can move from one to
the other in several different ways:
3) Double click on
the page in the
folder list.
Saving Pages
21) Choose to save the current page: Tool Top Menu Keyboard
Closing Pages
When you have finished working with a page in a web site (but still want to keep the site itself
open:
The other areas of the page which you may have visible are called shared borders - these are
covered in a separate section:
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.
You can then make formatting changes to your text - some ideas are shown below:
In addition, you can also use the following tools to change the alignment of all the paragraphs
that you have selected:
Items in typed lists often stand out better when bullet points are used. To apply bullet points:
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.
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
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.
a) Type in a keyword
here and click Go.
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.
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.
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:
34) Click on the colour within your picture which you want to make transparent. All pixels
of this colour will now appear transparent.
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:
To change the alignment, select the image to align and click on the required alignment icon.
If someone has very kindly drawn a picture for you, you can insert this also:
36) Complete the dialog box which appears as shown below, then select OK .
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:
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.
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.
To change the appearance of a horizontal line, simply double-click on the line, or right-click to
format it:
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:
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!
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).
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!
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.
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.
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:
You can set left, right, top or bottom shared borders for a web site, and then suspend or change
them for any single page.
When you have designed your web site, you will be ready to tell FrontPage what shared borders
you want to set. To do this:
45) Complete the dialog box which appears as shown below, then select OK .
You can suspend the shared borders for a single page by selecting Selected page in the dialog
box above.
Shared borders are easy to edit - you can get at them from any page in your web site!
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:
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.
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.
49) Position the cursor in the shared border in which you want to create a navigation bar:
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).
The final stage in inserting a navigation bar is to choose which pages your buttons will link to.
The next page describes the effects of 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:
Depending on the options you have chosen, you may get some or all of the following buttons
appearing:
53) Complete the dialog box which appears as shown below, then select OK .
a) Select this
tab.
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).
56) Complete the dialog box which appears as shown below, then select OK .
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.
58) Type text to describe your link (e.g. "Click here to …."), then select this text.
60) Complete the dialog box which appears as shown below, then select OK .
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:
A link can also be added to a picture - just select the picture before choosing to insert the link.
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 .
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.
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.
66) As always, position your cursor where you want your interactive button to go.
68) Complete the dialog box which appears as shown below, then select OK .
a) A polygonal
hotspot is created on
this image.
69) Insert an image onto your page (e.g. a clipart picture), then select the image.
(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 .
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:
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:
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.
77) Complete the dialog box which appears as shown below, then select OK .
a) Choose to link to a
place in this document.
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.
This method allows you to specify other options at the same time:
Drawing a Table
81) From the menu select: View Toolbars Tables to display the tables toolbar.
83) The mouse pointer will change into a pencil. Follow the steps shown below:
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 ).
87) Click and hold the icon on the toolbar. The box below will appear:
88) With your mouse button still held down, drag to fill in the required number of cells for
your table:
89) Release the mouse button to insert the table onto your page.
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:
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.
You can insert almost anything into a table cell - text (as above), clipart
Wise Owl’s pictures, or even another table!
Hint
Before you can insert, delete or format table rows, columns or cells, you must know how to
select them.
♦ 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
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.
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
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:
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
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.
Adding Cells
96) Complete the dialog box which appears as shown below, then select OK .
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
The principle for deleting rows, columns and cells is the same - the example below would delete
the address row from the table shown:
99) FrontPage deletes the row(s), column(s) or cell(s) you had selected:
Don’t forget that you can also use the in the Tables toolbar to
Wise Owl’s erase row and column dividers.
Hint
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.
The table below looks sensible using Internet Explorer on a 17" monitor at 1024 x 768 pixels
resolution:
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:
Here are the settings for the table shown above, with what they mean:
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%.
Table alignment enables positioning of a table on the left, the right or the centre of a web page.
To align a table:
100) Ensure that the cursor is inside any of the cells within the table.
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.
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.
105) Complete the dialog box which appears as shown below, then select OK .
Unless this Wise Owl is missing the point, the baseline vertical alignment
Wise Owl’s option is not worth bothering with!
Hint
This section contains more details on how you can use and format tables.
106) Enter text into the left-most cell in your block of cells to be merged:
Splitting Cells
Less usefully, you can also tell FrontPage to subdivide a cell in your table into different parts:
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…
110) Complete the dialog box which appears as shown below, then select OK .
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.
Instead of merging cells together, you could use a table caption to achieve the effect shown
below:
Selecting a Caption
Deleting a Caption
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
114) Click anywhere within your table, Top Menu Right Mouse
then choose to change its properties:
Table Properties Table Table Properties
115) Complete the dialog box which appears as shown below, then select OK .
Cell borders must be set separately. See later in this chapter for how to do this.
By judicious use of light border and dark border colours, you can set 3-dimensional effects for
your table:
116) Click anywhere within your table, Top Menu Right Mouse
then choose to change its properties:
Table Properties Table Table Properties
117) Complete the dialog box which appears in part as shown below, then select OK .
Cell Spacing
To control how spaced out your cells look, you can set the properties as shown:
118) Click anywhere within your table, Top Menu Right Mouse
then choose to change its properties:
Table Properties Table Table Properties
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).
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.
120) Click anywhere within your table, Top Menu Right Mouse
then choose to change its properties:
Table Properties Table Table Properties
121) Complete the dialog box which appears in part as shown below, then select OK .
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).
123) Select the cell(s) whose borders or colour you want to change.
You can change the borders of a cell in an identical way to changing a table's borders:
You can change the background colours or images of cells just like for a table:
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 (HyperText Markup Language) is the language in which web sites are written (FrontPage
just makes it easier to do this). Here is a sample:
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
Tags
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.
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.
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’.
Note that the comment has no closing tag (</!-- --> does not exist!).
Headers are predefined text styles. <H1> being the largest and <H6> being the smallest.
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.
Image <img>
Image tags are used to insert pictures. Note the src=“filename” attribute.
<img src="owl.bmp">
HyperLinks <a>
Hyperlink tags are used to create clickable areas on your web pages.
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”
This tag displays alternate text for images when you hold the mouse cursor over it.
10.4 Tables
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
<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:
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!
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 how the main tables for this web site are made up:
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).
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 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.
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:
127) Complete the dialog box which appears as shown below, then select OK .
a) Select to
create a style
sheet.
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):
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:
135) You can now choose which aspect of the style you want to change:
There’s nothing to stop you editing the style sheet directly (if you are
happy doing this):
Wise Owl’s
Hint
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:
138) Complete the dialog boxes which appear as shown below, then select OK .
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.
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.
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:
Tools Spelling... F7
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.
When you think your web site is ready for publishing, use the built-in reports to check for
inconsistencies and errors:
The main reports for checking for errors are shown below:
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.
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.
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!
FrontPage 2003 allows you to publish individually selected pages, which makes updating your
website even quicker.
The pages you have selected will then be copied straight to the location you specified when you
first published your web site.
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?