.... Internet marketing resources, ecommerce web site design tutorials
  Taming the Beast - quality web marketing and ecommerce development services .... .

 

Return to web marketing and ecommerce articles index

Free FrontPage template and tutorial

I'm often asked by people about using Microsoft FrontPage as Taming the Beast.net was developed using this software. 

Microsoft FrontPage is grossly underrated by many people and often viewed as a beginners tool. It's true, it is very beginner friendly - but FrontPage is also very powerful and  capable of developing/maintaining complex sites. Taming the Beast is now over 400 pages, not including sub domains and FrontPage handles it all very well.

One of the secrets of using FrontPage is making use of the FrontPage Include function and CSS (Cascading Style Sheets). This will dramatically decrease development and maintenance time.  To better demonstrate these features, I've developed a simple free FrontPage template kit for download, that also includes the following tutorial - please remember to read the terms of use. 

Instructions

Simply download the free FrontPage template and unzip it to a folder on your hard drive - all the files you need are included and will be unzipped to their proper folders.

After unzipping:

  • Open FrontPage
  • Select "Open Web", 
  • Navigate to the folder and then 
  • View the index.htm file, which contains part 1 or the tutorial in relation to FrontPage includes - 
  • Page2.htm has the CSS tutorial.

A copy of the included tutorials follow:

-----

FrontPage Includes/CSS template tutorial

This template isn't meant to be pretty :). It's just an example of using FrontPage Includes and CSS as a way of creating a site that's easy to update and maintain. After familiarizing yourself with the information I've provided on these two pages, you can adjust the template to suit your needs, save it and use it as a basis to build your site.

Business proposal templates
With these proposal templates, you deliver exactly what your clients need - fast, accurate quotes, proposals & contracts that increase business & sense of professionalism. Templates for a variety of web & multimedia developers. Download now! New for 2009, hundreds of new pages of content & contract templates!
 

Looking for web development/design work?
Review business contracts & tenders here!

FrontPage Includes

FrontPage Includes are a cross-browser and search engine friendly alternative to frames. You create your elements, such as the top, right, left and bottom navigation bars as separate files. In your base template page, you then insert those files with the FrontPage Include function.

To make the navigational elements appear in your base template as I have here, simply go to "Insert" on the FrontPage menu bar, select "Include Page" and then select the appropriate file.

FrontPage Include elements incorporated into your web site can turn site wide update time from many hours to just a few minutes! 

About this template

This simple FrontPage template makes use of FrontPage include functions for the header, footer, left and right menu areas. 

  • Open up the template in FrontPage and view the index.htm page in Edit mode. 
  • Move your mouse over the left menu area. 
  • The mouse cursor will change to a hand holding a card
  • Right mouse button click over the left menu
  • Select "Open file:/// etc" 

This will then open the page containing the left menu element, which you can update, save and then return to the template and view the changes. If you use this template as a basis for a site, then all the pages saved will also update with the new menu. 

Title and Meta-tags

Don't forget to use separate meta-tags for each page as this is an important part of search engine optimization

The two most important meta tags are description and keywords; example:

<meta name="description" content="A human readable statement describing the page up to 200 characters contain keyword rich text">

<meta name="keywords" content="A,list,of,keywords,and phrases relevant,to,the,page with,a,comma between,each,keyword,and phrase,as,demonstrated here,Should,be,no,more,than,500,characters,in,total">

These two tags can be viewed and edited by switching into HTML view mode in FrontPage - they are towards the top of the source code. More on meta tags

The title tag can be easily adjusted in FrontPage while in page edit mode by right mouse clicking on the page and selecting "Page Properties". More on title tags

Let's move on to learning about Cascading Style Sheets (CSS) as a means of controlling the text formatting throughout your site with a single file.

Looking for web site templates?

Hundreds of professional web template designs available for download. Compatible with Microsoft FrontPage and Dreamweaver. Visit our web templates section

Using simple CSS to control formatting.

Cascading Style Sheets (CSS) were introduced way back in 1996. Even 8 years later, many webmasters still haven't taken advantage of this *huge* time-saving technology. 

A cascading style sheet is a set of instructions in a linked external file or within the source code of a page that tells a browser how to render page elements - text color and sizes, page backgrounds, tables etc. 

How can using CSS help you? For example, let's say you have a 40 page web site and the main body text you use is 12pt. Times New Roman. This would entail numerous instances of repetition in your coding:

<p><font face="Times New Roman" size="2">This is a line of text</font></p>

If you wanted to change the font to Verdana, you would need to edit every single page to make the changes. By using a *linked* style sheet you only need to change one file and then the entire site would be updated. 

Using CSS also makes your coding a lot tidier through making the repetition of formatting instructions obsolete. Less code = faster download times.

Linked External Style Sheets 

This is just a text file, saved in your web with the tail extension of .css that contains a series of instructions. In this sample template web, the css file can be found in the "elements" folder in my free FrontPage template.

When a page in the web links to this file, the browser references the CSS instructions first before displaying the the page. To attach a CSS file in Frontpage:

  • Have the page open in Edit (Normal mode)

  • Go to "Format" on the menu, select "Style Sheet Links"

  • Click the "Add" button

  • Navigate to the .css file, highlight and click "OK"

If you are going to use this template as the basis of the site, you won't need to do this as it's already been done.

Understanding the CSS coding

Let's take a look inside the site.css file to gain a better understanding of how it operates. In the elements folder, open "site.css".

The first statement:

BODY {
background-color:#ffffff;
margin-bottom:0%;
margin-left:0%;
margin-right:0%;
margin-top:0%;
}

This controls the main body elements 

  • The background-color sets the background color for the page in "hex" values

  • The margin-x sets the size of the margins around the page 

The next statement:

TD       {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
color: #273A5B;
            }

As this template is made up of entirely of tables, we need to specify how the fonts will be represented in the table cells, which is represented by TD (Table Data).

  • The multiple fonts are listed in case a visitor to your site doesn't have the first font installed on their computer-  in that scenario the next font type will be used. Add as many fonts as you want, but it's recommended that you only used similar font types.

  • The font-size is either a px (pixel) or pt (point) size.

  • The font-color is the color that the font will be displayed using hex values.

  • Note that ";" is used at the end of each line of values.

CSS gives you incredible flexibility. Here's another example. Your table text is in 10 pt. Verdana, but you have other tables or cells where you want Verdana 8pt, such as in the right menu on this page. 

Since you've already used the TD element in your CSS file, you'll need to create a new "class". Here's an example of this scenario:

.smallblue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: normal;
color: #273A5B;
}

When creating your own classes, you can give them any name, as long as it is a single word and is preceded by a "." as shown above. 

Applying formatting styles and classes is simple - just highlight the element; then select the class or style from the dropdown selector on the menu bar - it's usually on the left hand side in FrontPage. 

Other standard CSS elements included in the site.css file:

  • A:link  - specifies how linked text should be represented

  • A:visited - specifies how links that have been visited should display

  • A:hover - specifies how links should display when a mouse is moved over them.

  • H1  - Heading 1 style

  • H2 - Heading 2 style

For other standard elements, view this CSS reference.

These examples are just the very basics - there's so much you can do with CSS.

Conclusion.

I hope this template and tutorial assists you in making better use of Microsoft FrontPage - it really is a wonderful web development software package; often criticized simply because Microsoft are the authors!

Good luck to you in your endeavors!

Michael Bloch
Taming the Beast
http://www.tamingthebeast.net 
Tutorials, web content, tools and software.
Web Marketing, Internet Development & Ecommerce Resources
____________________________

Click here to view article index 

Online meeting & webinar software review
Powerful, easy to use collaboration tools that can help improve your marketing sales and training efforts. Learn more about these services in this review & try a free trial!

The best shopping cart software
Our reviews of some of the best shopping carts around - free ecommerce solutions  through to premium services offering affiliate programs, marketing modules & online soft goods delivery.  Shopping cart software guide 

Autoresponder software/mailing list manager
 Read our beginners guide and reviews of all-in-one autoresponder & email marketing software solutions.

Credit card transaction fraud screening!  Effective fraud screening is an essential part of running an online businesses. Fraud transactions cost you money and can threaten your merchant account. Pick up a stack of transaction screening tips in this free guide! 

Need some advice/tools for writing/creating a web design, development or marketing proposal?

 

 

 

Home

 

Get paid cash taking online surveys - free to join online 
survey companies that will pay you cash for your opinion!

In Loving Memory - Mignon Ann Bloch

copyright (c) 1999-2011  Taming the Beast  Adelaide - South Australia 

Profile - Contact - Privacy - Consultants Portfolio 

Search Site - Terms of Service - Social/environmental