Web Design Using FrontPage

Starting a page in FrontPage Editor

(1) Setting the Site Structure - select New - Web to create the basic site structure first.  This will give you a location to store the pages and images.

When you start to create something in FrontPage you are given the option to make a new PAGE or a WEB.  Select a WEB and then select EMPTY WEB.  You can specify yourself where to store it or let the computer decide.  It will give the WEB SITE a folder name (which can be altered later).  It will also create various storage folders.  You need to name your opening page index.htm ( it needs to be this for uploading later on)

See help sheet for details of setting up site structure

(2) Creating your first page .

FrontPage is largely WYSIWYG 'what you see is what you get' and you will see the page appear largely as it will do in a browser on the Internet.  You create the page much as in a word processor. You have a 'Formatting toolbar'.  Here you can set up features for the page such as:

• The fonts and font size

• The emphasis for the text

• The colours for the text and background

• Justification and setting up bullets and lists (as used here)

The page will have a simple text/image structure just like this one.  To create more complex layouts you need to use a table and cells.  (see page1)

(3) Inserting a text file and a graphic Image

Text can be typed into the page as you go along.  Use this for small passages of text and for headings.  Larger text extract are best imported from text files prepared in word processors. 

Look at this file about web editors.  You can either  link directly to it by clicking on this underlined link, or you can import it into a blank page from a saved file (see Basic Formatting help page)

Inserting graphic files. 

Graphic files saved from art programs can be inserted into the page. You will have to resize it.  You will have limited control over position (left,centre,right).

Use 'gif' or 'jpg' images for your site as they are recognised by web browsers and don't take up much space.

See Formatting help page for more information on inserting text and graphic files.

(4) Viewing your pages

Preview the page by clicking on the Preview tag at bottom of Editor screen or select Preview icon on Standard toolbar.  This opens up Internet Explorer for proper viewing of the whole site.
See basic Formatting page for more information on this.

Odds and Ends
You can insert other things to divide up the page such as the horizontal lines used on this page. (Go to Insert menu)

Pressing the enter key to start a new line inserts two line breaks. (paragraph tag).  To insert a simple line break hold down Shift key when hitting Enter key or go to Insert menu and select Break.

Have a look at the HTML (Hypertext Markup Language) code used on this page by clicking on the HTML tag at bottom of editor.  You will then see the commands (tags) you have used to create the effects on the page.

Finally be consistent in the use of colour and font/style and size.  Pick one alphabet.  Pick a one size for body text (12 or 14) and another for subheadings and another for main headings.  This page of course follows these rules!