This page is a quick guide to using Frontpage 2000 to build your pwp. Click on one of the links below to find out how do a few common tasks in creating your website.
- Saving your first page
- Editing your first page
- Importing files into your web
- Page properties
- Inserting images
- Creating a new page
- Creating hyperlinks
- Creating tables
- Table properties
- Cell properties
- Viewing your page in a web browser
- Advanced features
- Publishing your site on the world wide web (www)
Saving your first page
After opening FrontPage, you will notice two panes within the single application window. The left pane is the views and the right pane is the actual web page in editing mode.
Frontpage opens a page for you after running the application and names it new_page_1.htm. We will now save the page before doing any editing. Click on the 
icon and a window will pop up prompting you to save the page. It is good practice to always save the first page as default.htm or index.htm.
You will have a default folder called 'My Webs' which is created for you to save all your web projects in. After naming the file you want, click on the save button. The top of the right pane has the name you gave the page, and a middle one has been created showing the structure of your web files including your saved page and graphics, or any other media elements that you may add into your site.
The 'images' folder has also been created for you to save all your graphics or photos in, so that they can be found easily at a later stage.
Editing your first page
In the right hand pane you can now type anything you wish and start editing your page as shown in the figure below:
Frontpage has a similar set of editing tools for text editing as your standard word processor does, enabling you to align text, vary the font, its size and colour, set and indent paragraphs, put bullet points etc into your page.
To do this simply highlight the desired text and select the text modifications from the buttons and drop down menus provided as shown in the figure below:
Importing files into your web
You will need to import files into your web folder if you wish to include them in your site. For example if you wish to insert graphics into your pages, and created your graphic in a location outside your web folder then you have to import it into your working web. To do this:
- In the middle pane, click on the folder you want your imported files/folders to go under
- Click 'Import' from the 'File' menu
- Select either 'Add Folder' / 'Add File' depending on whether you wish to add one file or a list of files located in a folder, and press 'Open' / 'OK' respectively to add them to the list (refer to figure below)
- Press 'OK' to close the list
The files should now be added to the current folder.
Page properties
There are some basic page properties that you should be aware of.
To get to these, click the right button of the mouse anywhere in the editing pane and select page properties.
A window pops up enabling you to modify:
Title - type a title that best describes your page; this will show up in the title bar of your explorer window.
Click the background tab - you can modify the page background by either changing its colour or by inserting a background image of your choice. Before inserting any graphics though, you must import them into your web from the location stored . To insert an image, check the 'Background Picture' box and select your image by clicking the 'Browse' button. The colour can be changed by selecting a colour from the drop down list box under 'Background'.
Enable hyperlink rollover effects - You can make your links change styles when a mouse is moved over them, by clicking on the 'Enable hyperlink rollover effects' box and selecting the style you wish by clicking on the 'Rollover Style' button.
It is also advisable to have three different colours for the three different status's of hyperlinks. Change them by selecting the desired colour from the drop down list box.
Inserting images
To insert images into your web page, position your cursor where you want your graphic to go and click on the 
button to select the desired image. Note: you have to import the desired graphic into your web folder before inserting it in the page. Click on the 'Browse' button to select your image and press 'OK'.
Creating a new page
To create a new page click on the 
button and select 'page'.
This opens a new page in the right hand pane. It does not appear in the folder list until you save it. It is always a good idea to save any new pages before doing any editing. Save this page so that we can create a link to this.
Creating hyperlinks
Hypelinks are basically the passage to another page on your site and provide the means of navigation. Both text and graphics can be used as links.
To create a hyperlink simply highlight the text or select the image you want, and press the 
button to display a pop up window. Select the page you want your link to point to and press 'OK'.
If you have selected text, it will usually be underlined and the colour changed to the one selected in the page properties. To navigate to the next page within Frontpage you must hold down the CTRL key whilst clicking on the link with the mouse. In the browser however, you would just click on it directly.
If you wish to add hyperlinks to external sites such as Virgin Media's then you must type it explicitly (e.g. http://www.virginmedia.com).
If you wish to add an email link then type mailto:{your email address}
(e.g. mailto:joe.bloggs@blueyonder.co.uk). Clicking this link will launch the user's default email application such as Outlook Express and fill in the 'To' box with your email address.
Creating tables
Probably the most useful tool when developing a website is the table. Tables provide us with a useful way of arranging our elements. To create a table simply click on the 
button to give you a pop up grid as shown below.
By moving your mouse select the size of the table you want to insert and just click the mouse. You can now edit some of the table properties by clicking the right button on the mouse anywhere in the table and selecting 'Table Properties'
Table properties
- Alignment - You can align the table anywhere you want with respect to the current page by selecting any of the values in the 'Alignment' drop down menu.
- Cell padding - the distance between the edges of adjacent cells. This can be increased or decreased either by clicking on the arrows, or by entering the value manually.
- Cell spacing - distance between contents of the individual cell and its border.
- Border size - you can vary the border thickness Border colour - vary the border colour by clicking on the drop down menu 'Colour' and selecting the desired colour.
- Light border and dark border colours - These two borders come into play when one has a cellpadding of greater than 0.
- Background colour - The background colour of the table can also be varied by selecting the 'Background Colour' drop down menu.
- Background picture - Lastly, a background image can also be inserted by checking the 'Use background picture' checkbox and selecting the image by using the 'Browse' button.
Cell properties
For cell properties click the right button of the mouse anywhere in the desired cell and select 'Cell Properties' from the drop down menu.
As you can see, many of the cell properties are similar to table properties (e.g. content alignment), but instead refer to the content of the cell.
A new property here is the cell spanning property. A cell's width and height can be adjusted by setting the number of rows and columns that it spans. This allows one to have cells of varying heights or widths in a table. For instance, you can set the span of a cell to two rows in height. Just enter the number of columns or rows that you want the particular cell to span in the relevant box.
Viewing your page in a web browser
After you've made your changes you will probably want to view your changes in your favourite browser (e.g. Internet Explorer, Netscape). To do this select the 'Preview in Browser' from the File menu.
If prompted to save, click 'yes' and the current page will launch in your default browser.
Advanced features
Front Page comes with a set of features that help you enhance your web pages by providing dynamic or moving elements thus adding interactivity for the user. We will take a look at the most common ones as indicated in the figure below. To access these features select 'Component' from the 'Insert' menu.
Banner Ad Manager - this feature allows you to do something similar to the advertising banners you come across on various sites. The images you wish to display are basically rotated on a periodical basis (the time of which you set in the 'Show each picture for' text box). Transitional effects can also be incorporated between respective images to give a variety of effects.
Click on 'Banner Ad Manager' from the 'Component' menu. The window that pops up enables you to specify the width and height of the images, select the transitional effect, put a hyperlink in the banner by entering the address in the 'Link to' text box, and of course add the images in the 'Pictures to display' area. To add images, click the 'Add' button and browse to select them. The sequence can also be adjusted by using the 'Move Up' and 'Move Down' buttons. When finished click on 'OK'. Note that the size of the Banner should be equal to all the image sizes of the images you will insert or else they will either be cut off or have a white border around them.
Hit Counter - this allows you to keep track of the number of visitors viewing your site. Just position your cursor on the page, select the look you would like, the initial count you want displayed by checking the 'Reset counter to' box and entering a figure, and the amount of digits you want displayed from the 'Fixed number of digits' checkbox.
Hover Button - Use this feature to create rollover effects with pre-defined buttons and add some interactivity for the user. By clicking on the 'Hover Button' from the 'Insert' menu you get the window shown below:
The 'Button Text' field enables you to type in the test that will appear on the button; the font can also be changed by clicking on the button next to the box.
Use the 'Link to' field to create a link for the button by pressing the 'Browse' button.
The 'Effect' menu lets you select an effect that occurs when the mouse is positioned over the button.
Marquee - enables you to create scrolling text effects and set their speeds.
'Delay' is the time in milliseconds (thousandths of a second) that the desired text moves by the amount specified in the 'Amount' box; this distance is measured in pixels.
If you do not want your text to scroll again and again then uncheck the 'Continuously' check box.
Publishing your site on the world wide web (www)
Before going ahead with the publishing, it is a good idea to test your site thoroughly on your machine using the most popular browsers such as Netscape Navigator and Microsoft Internet Explorer. It is a good idea to test the site in more than one browser as certain elements of HTML behave differently in different browsers. Check that every page looks and reads as expected, and that every link is working properly.
If your HTML looks markedly different in any one browser, you may wish to check that the code is OK through a HTML validation service such as HTMLHelp's validator found on our tools site, or http://validator.w3.org.
When everything is OK you will proceed to the publishing stage. To do this select 'Publish Web' from the file menu.
A pop up window will appear that asks you to specify a location to publish the web to. In this box type http://www.
