|
|||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||
|
 |
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. InstructionsSimply 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:
A copy of the included tutorials follow: ----- FrontPage Includes/CSS template tutorialThis 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.
FrontPage IncludesFrontPage 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 templateThis simple FrontPage template makes use of FrontPage include functions for the header, footer, left and right menu areas.
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-tagsDon'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.
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 SheetsThis 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:
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 codingLet'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:
This controls the main body elements
The next statement:
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).
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:
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:
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 Click here to view article index
|
|
|
|||||||||||||||||||||||||||||||||||||||||||
