by Graham Hawkes
Editor
WordsinBusiness.com

Contents

1. Introduction
2. On-paper planning
3. Renaming sections and pages
4. Things you’ll want to change
5. Adding content
6. Congratulations

Introduction
You’ve extracted your new OutFront website template from its .exe file, opened it from within your FrontPage program, and you are now looking at the Index page on your computer screen. What’s next? Where do you start, and where do you go from there? Here are some signposts.

Step One is to click on Navigation in the vertical Views bar at the left of your screen. This delivers you a graphic layout of the template’s structure. It will come up in a horizontal layout, but you may wish to right-click on the background of the Navigation page and click on Rotate. This will recast the layout to a vertical format. Whichever layout you choose, you should now send it to your printer, by holding down the Control key and tapping the P key.

At this point, grab a pencil, an eraser and a ruler, and go sit down at a desk with your printed layout page. This is where you need to do the essential planning for your new website. It’s not necessary to pre-plan it down to the last detail – you can make changes at any time – but you should have a good idea of what you wish to achieve, and how to do it.

On-paper planning

The first thing you notice on your print-out (I am working from the vertical format) is that the template (in most cases) has been designed over three levels, containing (i) the site’s ‘top-line’ pages (ii) its various sub-sections and (iii) its individual pages.

The first level, or top-line page level, will contain the index.html file, which is the HHHome Page for your website. Depending on how OutFront has designed the template, there might also be files on the first level called About, What’s New, Contact, etc. When you ‘preview’ the website (either within FrontPage or in your web browser) the links to these pages will most likely appear near the top of the Home Page, perhaps inside the website’s title box.

The second level contains the sections of the website. On the template, these might be named Section 1, Section 2 etc, but you will want to change these to more appropriate names. (More on this soon).

The third level contains the various individual pages of the website, provided by OutFront to help form a basic site structure. You can add more pages, and of course you should rename these pages, which OutFront have simply dubbed ‘New Page 8’, ‘New Page 12’ etc.

(Note how the boxes on the various levels are connected by a ‘wire diagram’. This shows the way each file (or page) is connected to the Home Page or index.html file).

Renaming sections and pages

Now let’s use the print-out to see how we can create the structure for a new website, based on the OutFront template. Let’s say our new website is for a tennis pro shop, called The Tennis Shop. Take your pencil, and alongside the index.html box, write in the words, The Tennis Shop. (Don’t cross out index.html, because it’s important to remember this is one of the few file names on the website that you must not change!) However, by writing The Tennis Shop down on the print-out you have established the “name” of your new site. From here, you can rename the various sections, and the individual page names.

For instance, Section 1 could become Rackets. Section 2 could become Accessories and Section 3 could become Clothing. Unexciting choices I know, but you get the drift.

Now, we can move to the individual page names and assign them appropriate new names. Under the Rackets section we could have several different pages, perhaps called Competition, Recreation, Junior. In Accessories we could have pages called Balls, Gear Bags, Strings, and in Clothing we could have pages entitled Shirts, Caps, Shoes. (Or, we could have pages named for different brands of tennis clothing, with each page detailing the items each brand offers).

Get the idea? The aim is to provide a logical structure of sections and pages streaming down from the Home Page or index.html file. At this point, look at your print-out again, and note how that wire diagram links index.html, Section 1, and the pages ‘underneath’ Section 1. This shows the path a visitor to your site will follow when he or she “digs down” through the various levels in search of information.

Things you’ll want to change

1. Website title: In Page View, look for a file called ‘header.htm’ which is nestled inside the folder named ‘includes’. When the file is open on your screen, select the words that OutFront have put there – it might be something like, ‘Website name here’.

Type in your new title - whatever it might be (e.g. The Tennis Shop)  and go to the Formatting Toolbar at the top of the page to select what size heading you want. (If you can’t see the Formatting Toolbar, click View, Toolbars and then select it). Also on the Formatting Toolbar, you can choose Align Left, Center or Align Right to position the website title. You might want to position your selected text even more exactly - for instance, to align it very closely to the left of the page, against a logo. To do this ‘Select’ your title text, and click Format, Position, Absolute. Then, enter numerical values to precisely alter the alignment of the text, e.g. from the left and from the top. (Tip: Preview each change you make. Be ready to return to the Normal view and click Edit, Undo Position to ensure the change you made hasn’t impacted badly on the appearance and design of the page header).

2. Section names: As suggested above, Section 1 etc will need to be renamed to suit your website – e.g. Rackets, Accessories, Clothing. To do this, select Navigation in the vertical Views bar at the left of your screen (just as you did earlier to print out your website structure diagram). This time, right-click on the Section 1 box, and select Rename. Tap in, Rackets. Left-click outside the box and FrontPage will make the change to your main website file. Now select Page view and open the index.html file. You will see that Section 1 has now been renamed Rackets. Go back to Navigation and rename the other Section headers.

Congratulations, you’ve just made major progress towards shaping your new website!

3. Page names: As suggested above, you will want to change the automatically generated page names that appear on the Folder List, such as new_page_11.htm

You will want to replace these with a name that instantly indicates the content of that page – like, product list, our profile, catalogue, etc. So, right click with your mouse on the page name listed and choose Rename. Next, type in the new name (let’s say you want to rename it ‘profile’) – but ensure you retain the necessary style, i.e. profile.htm  

If you wanted to call the page ‘our profile’ you would type in our_profile.htm with our and profile separated by an underscore. Remember, it’s best not to use capital letters or figures when renaming these pages. Remember too, these are names that only you will see, and only while working within FrontPage. When the website is published, the names won’t show up, UNLESS you change the names in Navigation, as explained above.

Adding content

There are a number of excellent articles on the OutFront website dealing with adding content, and you should refer to these before you start to write your pages.

However, keep in mind that your copy should be short, sharp and to the point. Depending on the type of website you are creating, don’t try to be overly ‘clever’ with your writing. If you are selling something, or providing information, then give visitors what they want from your site – the facts.

Be economical with your words, and ensure all your messages and instructions are clearly expressed. Run your pages by a few friends and business colleagues before publishing, to ensure they convey the right messages.

Congratulations

Well done! If you have followed the advice in this article, and the instructions provided by OutFront, you should now have a publishable website. It might not be perfect at this stage - but get the site up and running, and look to edit it and fine-tune it as soon as practicable.

Once you’ve published the site, it’s best to leave your project alone for a couple of days – just to clear your head – and then come back to it and run a critical eye over it. Any errors or omissions should stand out like beacons!

Be sure to run through all the pages, one by one, and ensure that they work properly, and that the content is up to scratch.

Then, all you have to do is to start marketing your new website! Good luck!