Front Page 2003
The Front Page screen:
A web site is a collection of documents and images designed to be viewed by a web
browser such as Internet Explorer or Netscape (new name Mozilla.) Web sites are
usually stored on web servers, which provide worldwide access to the content. It is,
however, possible to create disk based web sites either during the creation process or
even for distribution on a CD etc.
Opening a web site:
To establish the connection to your server
account and start creating pages, simply
click on File>Open Site
This operation will give you a list of your folders and files that are stored in your account.
When a web account is created, two folders are automatically placed in that area.
_Private folder is for files that hold files that you do not wish others to have access, such
as data files from on-line forms etc.
Images folder is for any pictures you may include in your site. When saving a file with
embedded images, FrontPage allows you to place them in this folder for better account
The user can create folders
as necessary by right
clicking at the root and
choosing New>Folder from
the pop up menu
Note: Please remember that the folder name will be a part of the URL for your web site
and thus you should follow file naming conventions in your folder names. Folders can be
converted to sub-webs to facilitate separate parameters such as themes, security options
To convert a folder into a sub-web simply
right click on the folder name and selecting
the Convert to Web option from the pop up
menu. This operation takes a while.
Creating a web page:
Before starting the actual development of your site, you should take time to gather all the
materials (text, pictures, addresses of links etc.) Ask yourself some basic questions:
Why is this site needed? Who are the potential viewers? What are you trying to
communicate? What do you want your visitors take away, when they visit your site?
Other considerations should include the technologies your audience will likely to have,
such as connection speed; latest plug ins; up-to-date browsers; newer computers. You
also need to develop an outline of your site to determine the starting point, additional
pages and navigation.
Once the above issues have been
addressed, and you are ready to start,
choose file>new or click on the new page
icon. Front Page provides templates and
wizards for your convenience. They are
located on the right hand side of the screen.
You can choose one of the templates and
replace the text or start with a fresh page
and create your own web.
You can change the properties of your page by right clicking anywhere on the page and
bringing up the Page Properties menu.
This menu shows where your page is saved, if it is, and allows you to add a page title.
Page titles are different than the file name by which the document is saved. Titles appear
at the top of the menu bar of the browser (title bar) in which your visitors are viewing this
page. Title also serves as the identifier of your page to various search engines such as
The formatting tab allows you to change the colors in your page as well as inserting a
Front Page allows
you to change the
margins of your page
as well as creating
styles and other
effects through the
Advanced Tab in the
menu. We will
explore styles and
Sheets in a different
When starting a new page, FrontPage opens the
task pane that contains several design layouts
from which the designer can choose. You can
also create your own layout, if none of the
available options are suitable.
Entering and Editing Text:
Front Page text editing and formatting menus are very similar to Microsoft Word. This is
the easiest part of the web page creation, provided you can think of what to write. If the
formatting toolbar is not visible, turn it on by clicking View>Toolbars>formatting. To
insert special characters in your text, click Insert>symbol.
The styles (found in the upper left hand
corner of the FrontPage screen) are useful
design elements, which provide the
designer with easy formatting options.
Text colors may be adjusted by using the
font color button in the tool bar.
To add some pizzazz to your
web site, you may want to
insert images. Images can
also be used for navigation
tools (such as buttons and/or
hyperlinks.) To insert an
image to your page, simply
choose Insert>picture>clip art
(or from file.) To create a
hyperlink from the image,
simply click on the image to
activate it and follow the
Inserting Hyperlink steps
You can use three types of images on a web page (although Front Page will allow any
type of image to be inserted.) They are:
GIF – graphic interchange format – was created by CompuServe. This file format is best
for images with large areas of solid color (due to high compression rate) such as
illustrations, logos, text as graphics e.g.
JPEG – joint photographic experts group – file format is best for photos because there is
almost no limitation on the number of colors that can be used with this file type (16.7
million colors with jpeg as opposed to 256 colors with gif files.)
PNG – portable network graphics – is the new gif. When CompuServe demanded
royalties from gif images, the png was developed.
All three of these formats are cross platform, meaning all computers and all browsers are
capable of viewing them.
Thumbnails are smaller sized images that bring up the actual image when clicked. They
are useful for photo galleries. Due to their smaller size, they do not negatively effect the
downloading time of your web page. You can create a thumbnail of your picture by
clicking on the auto thumbnail icon in the picture toolbar. When you select a picture in
Front Page, the picture toolbar appears at
the bottom of your screen. If it doesn’t, you
can open it from the View>toolbars
You can also right click on your picture, to
create an auto thumbnail.
By right clicking on
your picture and
choosing the picture
you will have
control over the
position and other
properties of the
image you inserted
in your web site.
Please keep in mind
that wrapping and
are difficult to
control due to the
variety of browsers
resolutions. It is
always best to use
tables in your web
page to better
positioning of your
The General tab in
the picture properties
menu allows you to
enter alternate text to
describe your image.
This is useful in
making your web
page accessible to
those with visual
The last tab in the
picture properties menu
controls the video
options such as inserting
the vide source to your
page as well as how it
will be played.
Importing other documents:
A simple drag and drop operation is all that is needed to import other documents to your
web account. To make things easier on you, open the folder which contains these
documents and display it side by side with your FrontPage screen.
All Microsoft documents can be used to create web pages (.htm files.) To create an htm
file from Word, Excel or PowerPoint, simply click on the File menu within the software
and choose Save as Web Page.
Note: Documents that contain embedded elements such as a Word document with
inserted pictures, an Excel document with a chart and all PowerPoint presentations create
a folder as well as a file when saved as web pages. In order to display these documents
properly, make sure that you drag the file and the folder to your FrontPage folder list.
Creating a hyperlink:
Highlight the sentence or double click on a word to create a hyperlink, and then choose
the link icon on the standard toolbar. This action will bring up the hyperlink menu.
There are several types of links you can create:
1. Link to another web page – type in
the address of the page in the
address line or select the page from
the web by clicking on the web icon
2. Link to an area in the same page
(bookmark) –This is a useful tool
for pages that are long and causes
the reader to scroll. Choose
Insert>Bookmark at certain points
of your document. To create a link
to the bookmarks, simply select
them from the list Front Page
provides in the insert Hyperlink
3. E-mail link – type in the e-mail address
to which you wish to send the reader – This
tool provides a feedback mechanism for
Spell checking your site:
FrontPage includes spell checking tools much like Word. If you are editing a page,
Tools>Spelling menu will provide spell checking capability for that page. In the folder
list view, you can use the Tools>Spelling menu to check your entire site for correct
Previewing your page:
At any time in the page editing process, you can preview your page by clicking on the
preview tab at the bottom of your screen.
When editing the Design tab is the active view. The split tab will show the HTML code
and the Design view in split screen so you can follow along with Front Page as it creates
the codes that make up your web page. The Code view only shows the HTML that Front
Page is creating in the background as you are editing your page. The Preview tab will
allow you to see your page as if in a browser. Your links will perform as intended in this
Once you save your page, you can also
preview it in an actual browser by selecting
Preview in browser from the file menu.
Saving/publishing your pages:
If you chose to create your pages directly on the server, they will be published as soon as
you save them. Try to follow the file naming conventions for the web as these file names
will be a part of the URL for your page. If you decided to develop your pages on a local
disk, you can publish your site once you are completely ready to unveil it.
To publish a completed site:
1. In the folder menu, choose Remote Web
site in the lower left hand corner
2. Select Remote Web Site Properties in
the upper right hand corner
3. Select the appropriate destination (from
disk to server for publishing or from server
to disk for backup)
4. Push Publish Web site button
You have successfully created and published your web pages, congratulations! In
the next installment of the FrontPage 2003 series, we will consider design elements
such as table layouts and themes.