QUICK GUIDE
TO CREATING A WEBSITE
WITH FRONTPAGE EXPRESS

This is our short guide to creating a basic website with Frontpage Express. It is designed for people who have a basic knowledge of computing (i.e.. Opening, saving files and creating new folders) and are happy using word processor or DTP software (for a more detailed step by step guide click here)

First step is to create a folder on your hard drive to store all your webpages and graphics in prior to publishing your site (if you don't know how to do this see here). Call the folder what you want (e.g. Website)

Now open Frontpage express. You will begin with a simple blank page with the default grey background

Begin by saving this page. Ether click the save icon or click on file -> save. Type in the title name (e.g. my home page) (1). This will appear on the top bar of a browser. Do not click return but click as file (2).

Now select your website folder and save the file into it (keep the name in lowercase and with no spaces e.g. index or homepage). With any site we'd advise you to make sure the first (or your index/homepage) page is called index. This because if you type in a URL without a distinct file target e.g. http://www.fluffbucket.com, your browser will actually seek out the index file (e.g. http://www.fluffbucket.com/index.htm)

You can open the file in Frontpage Express or your browser anytime you want to view it (just open your browser and click file -> open and browse to find your file).

Now lets create a proper page

If at any time you make a mistake just click on edit and select undo.

Lets begin by adding text to your blank page. Just Click on and begin typing as you would do on any word processor or DTP package. The usual options are available

You can alter the alignment.....

the size & font....

Colour and emphasis (e.g. Italics, bold etc.)

by using the relevant icons and pull down menus (or highlighting the text and right clicking)

You also have a series of predetermined text appearance (principally headings, and lists) available by the pulldown menu on the left side of the menu bar

You will now have a basic text webpage (Yippee!!) so lets add some pics..

You should initially restrict yourself to .jpeg (or .jpg) files (best for photos) and .gif (best for simple images). For more on this see here.

Put your picture files in your website folder.

Either select insert image icon or click insert -> image

Use the browse button (A) to find and select your image file.

Click okay and it will appear on your page

If you right click over the image later you can alter the image's alignment in relation to text and the size of the image. You should also put in an alternative text message value you in (important as lots of people with disabilities can't see pics on their browsers and also helpful for images that are links). (for more on images see here)

You can use an image (or just a colour) to provide your page a background.

Click format -> Background.

You can select the background (Y) colour or (X) image

With background images make sure you put your image in your website folder. You should pick small images that tiles together

e.g. This tiles out well

Images like this will tile out as and take up less space say a 640x1000 sized background image

If you select watermark (above (X)) the image stays still as the text and images scrolls over the top.

As well as graphics you can add horizontal lines to break your page up. Either click the icon or click insert -> horizontal line. Then you can highlight a line and right-click you can edit its properties.

Just adjust your options to create a line that suits

e.g. 75% wide right aligned 4 pixel tall line with shading

We've now got a basic page with pictures and lines and text but it doesn't link to other pages. So lets add some hyperlinks.

Linking within your own site is easy. Create 2 webpages and open both up in Frontpage Express.

In one page highlight the text you want to use as a link and either select the hyperlink icon or
click insert -> hyperlink.

On the Open pages (1) you should see the (2) 2 open pages. Select your target page and click OK (just select yes in warning box that appears about not linking on the web - as long as both pages are published it'll work)

You can link to a certain area on an open page (even on the same page for example this will take you to the start of the graphics bit above) if you first create a bookmark (or anchor). Before setting up your link add a bookmark (anchor). Highlight the first few word or the image you are using as the bookmark and click edit -> bookmark. Then create link to page as before but select your bookmark (3)

To create a link to another website on the Internet is easy.

Highlight the text you want to use, right click and select hyperlink. This time click the world wide web tab (1).

In the box marked URL (3) type the address without http://.
(e.g. www.fluffbucket.com). and then with the box above select http (2). Then click OK.

To add an e-mail link enter the amyl address in the URL box (3) and select mailto in pull box (2) above.

Pictures can also act as links.
Right click over your selected image.

Enter your Hyperlink in the (3) Default Hyperlink box. It is a good idea to add (2) alternate text (the cursor will show this as you hover over the image so comment like "link to homepage" is useful).

By default all images which are links will have a border around them. You can avoid this by force set the border value under appearance (A) to 0.

That's all you need to create a basic site

Once you've got your site together check it thoroughly (a good tip is to change the name of the website folder and recheck all the links and graphics still work) before you publish it. Remember you'll need a to have one page file entitled index.htm (or .html)

We have a great guide to publish your website using FTP. Make sure you transfer the contents of your web folder (not the folder itself!!)

Then you can go on to enjoy our intermediate & advanced tutorials.

BACK TO BASIC TUTORIALS MAIN