This page is a quick guide to using Frontpage Express to build your pwp. Click on one of the links below to find out how do a few common tasks in creating your website.
- Getting started
- The main toolbar
- The formatting toolbar
- Web pages and html
- Creating a web page using frontpage express
- Saving your page
- Viewing your page in a web browser
- Importing text into frontpage express
- Inserting images into a web page
- Creating a second web page
- Creating hyperlinks
Getting started
Once FrontPage Express has opened, you will see a screen that resembles Microsoft's Word application. On the default page you will see a brief reminder of the legal aspects of publishing on the Web followed by a set of template headings and paragraphs that you can use as the basis for your first page.
Before moving on to editing the default page, the following text explains the various FrontPage Express icons and menu items. Some will be familiar to MS Office users - such as the save, copy and paste icons - but others are specific to FP Express. Some of the familiar icons also perform slightly different operations in Express so it is worth reading the text that follows.
The main toolbar
The Main Toolbar is similar to Word and many of the sub-menus are the same.
File
From the File option, of note is Page Properties which enables you to set the background colour of the page, the colour of the text and links and to change the title of the page. More information on this topic is available in Creating a basic Web Page.
edit
The Edit option has the usual cut, copy and paste, but also includes Bookmark, Hyperlink, Unlink. A bookmark - in FrontPage - is a marked location on a page which a hyperlink can point to. This way, you can have a set of links at the top of your page which take the user straight to each bookmark without the person having to manually scroll down the page. The section on Hyperlinks demonstrates how to create bookmarks and how to link to them. This section also explains the other types of hyperlinks and describes how to create hyperlinks between your pages as you add to your Web site. Unlink removes a link.
view
The View option has the option of displaying the HTML which FrontPage automatically generates. You rarely need to edit the HTML by hand but it does show the structure of a Web page. More information on this is in the next section on The Basics of a Web Page.
insert
The Insert option contains many FrontPage Express specific items. These will be covered in more detail in the sections on Creating a basic Web Page and Creating a second page but as a summary:
- a Break causes text to continue on a new line
- pressing Return in FrontPage Express gives you a new paragraph with a blank line between the lines of text
- Image allows you insert an image in your page,
- File allows you to insert text, for example, which you already have saved in a Word document
- Hyperlinks to bookmarks, other pages and e-mail accounts can also be inserted via the Insert option but as files and images, icons are also present which perform the same function.
format
The format option is like that in Word - you can set all of the font, paragraph and list properties from this menu. You can also set the background colour and other page properties and easily remove all of the text formatting if necessary.
table
If you have ever had to create a Web page by hand you will know that tables, with the various tags for aligning columns and rows, is laborious and errors can easily creep in. FrontPage lets you create tables visually, much as you would in Word. Familiar options include Inserting Rows or Columns, Merging Cells and setting the cell properties. Actually inserting a table on the page can also be accomplished using the table icon as in Word.
To resize a table, click with right mouse button and select Table Properties. You will see the following window:
This image shows a table with a width set at 100% so that it will stretch across the entire width of the browser window and a background colour set to yellow. There are also four other important settings. The alignment value allows you to change whether the table is aligned to the left, centre or right of the page. The border size refers to the width of the lines surrounding the table cells. The scale refers to pixels - the smallest dot possible on the screen - so 1 will give you a narrow border. The two values beneath again refer to pixel dimensions: Cell Padding is the amount of the gap between the text in the table cells and the edge of those cells; Cell Spacing refers to the gap between the individuals cells and the outside border of the table.
In other words, setting the cellspacing to zero makes for a neater border whilst the cellpadding value of 5 pixels keeps the text away from the borders.
Tip: You'll find that creating a table with a border size set to 0 is the easiest way of laying out text in columns, If you right click any of the individual cells you'll find that you can set the width of individual cells, their colour and how the text is aligned within them. Tip: the default setting for the vertical alignment of individual cells is middle so if you want your text to be up in the top left-hand corner of a cell, select Vertical Alignment as Top:
The formatting toolbar
FrontPage Express has the familiar format toolbar with its combination of drop-down lists and icons. Whilst the drop-down list of fonts is the same, the list of styles is specific to the Web. Basic text is still normal but the choice of headings ranges from 1 to 6, with 1 being the largest.
fonts
FrontPage Express lists all of the fonts installed on your machine but one thing to remember is that if you choose an unusual font, it may be that some visitors to your site won't have that particular font on their machine. In that case, the other person's browser will display the page in the default browser font - usually Times New Roman or Times.
lists
The two types of list you are most likely to use are Numbered (ordered) and Bulleted (unordered).You can also convert paragraphs to lists via the icons at the end of the format toolbar.
Font Size, Bold, Italics, Underlining and Colour
Font sizes range from 1( 8pt) to 7(36 pt) and the default size of 3(12pt) can be changed by clicking on the either of the two A icons.
The familiar B, I, U icons work as in other applications but as the convention that browsers use for indicating a link is underlining, users can be confused as what is a link if you underline plain text.
The font colour icon allows you to choose from either a set of predetermined colours or else enter specific colour values.
Tip - The best way of changing all of the font properties at once is by selecting a piece of text, right-clicking it and then selecting Font Properties from the menu. The window that then appears displays font face, bold, italics, size and colour together.
alignment
Paragraphs, tables and images can be aligned using the standard icons.
lists and indenting text
Lists have been mentioned above but to recap, paragraphs can be converted into either numbered or bulleted list by clicking on the respective icons. Text can be indented as follows by using the indent icon. Clicking on the outdent icon will reverse the operation.
images and hyperlinks
Both images and hyperlinks can be inserted using the main toolbar. These two icons also perform the same operation.
show/hide formatting characters
The familiar icon shows or hides the characters which show where, for example, paragraphs begin and end.
Web pages and html
There are basically two parts to a Web page, the BODY which is essentially what appears in the browser window, and the HEAD which contains the TITLE of the page - this is the text which appears at the very top of the browser window.
The BODY is the main part of a Web page - this sentence is part of the body. It is also part of a paragraph and as you enter new paragraphs, edit the text to be bold or italic etc, you are actually writing tags which the browser understands as formatting commands.
These tags make up HTML - Hypertext Mark-up Language. FrontPage Express allows you to create a Web page much as you do a word-processed document, hiding all of the mark-up tags from you but if you want to see the page as your browser sees it, select View, HTML in FrontPage Express.
Here's what a very basic Web page looks like:
<html> <head> <title>Page Title</title> </head> <body> <h1>A Heading</h1> <p>This is paragraph</p> </body> </html>
Creating a web page using frontpage express
When you open FrontPage Express for the first time, instead of a blank page you will see the following:
You can use this page as a template or simply delete all of the text and begin with a blank page - the easiest way of doing this is via Edit, Select all, and then press Delete.
If you choose to use the main part of the template beneath the horizontal line, simply select the horizontal line and the paragraphs above and press Delete. You can then replace the name and other details with your own information.
Text in red is there to advise you about publishing issues.
If you click on Your Name, you will see in the Style field that the text is a size 3 heading, so any text you type on this line will be larger.
The rest of the text is normal, with certain words in bold. FrontPage shows you that there is a line-break at the end of the line. To recap, to hide these formatting characters, click on the icon on the toolbar.
Saving your page
When you select to save you page, the following window will appear:
Change the page title to what's appropriate and then click on As File.
YOU MUST SAVE YOUR PAGE AS FILE RATHER THAN JUST CLICKING ON OK
You then need to locate the folder in which your Web pages have to be saved. You will find that a file already exists, named default.htm. This is a copy of the template page which appears when you open FrontPage Express. You should opt to replace this file with your Home Page.
The reason for replacing the file default.htm with your own home page is because the server assumes that if no particular web page is included in a URL, then it will serve a file named default.htm.
You can have up to 30MB worth of files in your web space but you find that most Web pages are deliberately small. Smaller file sizes mean the pages download quicker. FrontPage Express gives an indication of how long the page will take to download via a modem in the bottom right-hand corner of the window.
Large images are the one thing most likely to increase the time your pages take to download.
Viewing your page in a web browser
You'll find that once you have saved your Web page to your web space, anyone on the Internet will be able to see the page providing they know your home page URL.
To view your page in a browser, open IE5 and enter the location of your home page. The URL of your home page will be as follows:
http://www..pwp.blueyonder.co.uk
Remember, there's no need to add default.htm after your website address as the server will automatically look for this file (or default.html, index.htm or index.html). Any other pages will have a longer URL. For example, if I have a CV as a Web page the URL might be:
http://www..pwp.blueyonder.co.uk/cv.html
To make everyone's time on line easier, hyperlinks in one page can point to another page which instead of having to enter long URLs, visitors to your site can just click on a link. There is more information on hyperlinks after the section on creating a second Web page.
Importing text into frontpage express
One of the most common tasks will be importing text from another source into your Web pages. Most likely you'll have the information stored as a Word document.
Normally you would just copy and paste, but you will find that FrontPage Express won't just paste the text, it will also pastes all of the hidden code which formats the text.
So instead of getting:
hello
You'll get
...pard\plain \widctlpar\adjustright \f1\fs20\lang2057\cgrid {Hello}}
Not quite the same! The way round this is to first save your Word document as a plain text only file (.txt).
Now you select Insert, File from the toolbar and chose the text file you want to include on your page. Once you have chosen the file, FrontPage will display the following window:
Select Normal paragraphs and click on OK. You find that the text of your Word document is now pasted into your Web page. You can link to the original Word document by copying the file to your H-space Web folder and then creating a hyperlink on your Web pages.
Inserting images into a web page
Before inserting an image into your Web page it is important to save your Web page to your Web folder. It is also a good idea to create a folder within your web space called images and to use this folder as a store for all your Web graphics. The images you intend to use should be in the folder before you start to include them on your page.
The reason for keeping the images and the graphics together in your Web folder is that when you insert an image on the page, you are actually writing a piece of HTML that tells the browser where to look for an image to display.
As an example, the HTML for this image 
is:
<img src="images/new1.gif" alt="new" width="43" height="18">
The "images/new1.gif" part of the code means that the browser will request a graphic from the images sub-folder within your Web folder. The browser knows to automatically prefix the images folder name with the URL of your Web space. If you were to insert instead an image from your desktop, the HTML would look like this:
<img src="file:///C:/WINDOWS/desktop/new1.gif" alt="new" width="43" height="18">
Although you would have a file at that location, another person's browser would be unable to show the image as it would be looking on their machine rather than the Virgin Media Web space. Once you saved the files to your Web folder, to insert an image in a Web page, click on the toolbar icon 
. FrontPage Express will then display the following window:
Click on Browse and locate the image you want to use from your Web images folder. You should only use either JPEG or GIF image files as these are the common Web formats.
Once you have clicked on Open, FrontPage Express will insert the image in your page.
Creating a second web page
For a new Web page, just click on the 
icon.
This will open the FPExpress template page:
This time, select All from the Edit option and then press Delete to leave a blank page to work on. (Tip: The quickest way of selecting all the text is to hold down the Ctrl key and then press A)
The page can now be altered. The next section has information on how to link from one Web page to another as well as how to set links to e-mail addresses.
Creating hyperlinks
This sections explains how to create hyperlinks to internal and external pages and to e-mail accounts.
internal hyperlinks
Creating a link from one page to another in FrontPage Express is easy. Tip: create and save both pages to your Web folder before making the links.
Select the piece of text which will become the link.
Tip: it's a good idea to use text which indicates where the link will take the user - click here to read my CV might seem a good idea but using My CV is available on-line makes it easier to find for someone looking for the link.
Click on the 
icon to create or edit a hyperlink.
The following window will appear:
Enter the name of the file you have already saved to your Web folder. Here, the link is to a file named cv.htm
The reason for saving the Web pages first is that you can create a link from one to the other just by referring to file names. The browser knows to automatically prefix the file name with the URL of your Web space so there is no need to add any other information as long as all your Web pages are all in the same place.
Click on OK. You will find that the text you originally selected is now underlined in blue.
If you now open the page in your browser, you will find that the cursor changes to a hand when you roll over the link. If you have named the link correctly, clicking on the link will take to your second page.
You can repeat the process with as many pages as you create. If you decide to change the name of a file, you can select the link and click on the same hyperlink icon to edit where the links points.
You can also create a link to a location on the same page - this is useful if you have a lot of information on the page and want to have links to the different section at the top of the page. FrontPage refers to these locations as bookmarks.
In order to link to a bookmark:
First select the piece of text which you want to turn into a bookmark.
Select Edit, Bookmark and you will see the following window:
The Bookmark name will show whatever text you selected. When you come to view the page in a Web browser, the actual bookmark is not visible - it is merely a marker to which a link can point.
Delete the Bookmark name and replace it with one word that summarises the text. It is not advisable to use multiple words as the spaces between them can cause problems for the link. If you must use more than one word, use the underscore _ character in place of a space. E.g. Font_support.
The bookmark will be indicated as a broken blue line if you have selected to view the formatting marks by clicking on the formatting icon. Now select the piece of text which is to become the link. Click on the hyperlink icon and Create Hyperlink will appear:
The first tab is labelled Open Pages - click this and select the page which you are working on. If you look in the drop-down list of bookmarks, you will see the bookmarks on the selected page. Select the bookmark you want and click OK to finish.
external hyperlinks
There may be occasions when you want to link to another page not stored within your web space. This time time you need to repeat the previous steps but enter the complete URL of the page you want to link to.
The simplest way of doing this is to open the page to which you want to link and then select the URL showing in the location field by clicking on it once and then selecting Edit, Copy from the browser's toolbar. Now you can switch to FrontPage Express and in the URL field of the Create Hyperlink window paste the URL of the page.
e-mail hyperlinks
To create a link to an e-mail account which visitors to your site click to contact you, follow these steps:
Type your full e-mail address on the page - this way people can also copy down the address if they don't want to e-mail you there and then. Select the e-mail account details - e.g. j.bloggs@blueyonder.co.uk. Next click on the same hyperlink icon you use to create a link to another Web page.
This time, enter the e-mail address into the URL field:
Next select mailto: from the Hyperlink Type drop-down menu. FrontPage Express will now prefix the e-mail address so that the browser knows the link refers to an e-mail account.
At this point the hyperlink window should look like this:
Click OK and the e-mail link is created.
You are now ready to begin creating lots of pretty web sites take care not to use too much of your web space on a single site. Good Luck!
