Instructions for Using the Templates
What is a CSS based layout? Rather than using a table to layout the elements on your page, a template with CSS-based layout uses a Cascading Style Sheet to place the various elements. The "look" for the site - colors, fonts, graphic images that are part of the layout - are called from the cascading style sheet.
These template packages do NOT require any specific web editor and are provided in zipped format with two default template pages ready to create new pages with, an index page, and all supporting files. One template uses server side includes and the other does not. Some of the templates include a complete small site.
Instructions for UnZipping and Using Website Files
Your web site template set is a zipped file (zip). You will need a zipping utility program to open the file and extract (or install) the contents.
- Click on the download link to start the process
- When the File Download dialog box appears, tick Save File, click the OK button.
- This will open a Save As dialog window.
- Save the zip file to a convenient location on your computer. I recommend saving the file to your desktop. You can always move the file to another location later.
- Once your file has been downloaded, you will need to unzip the file. From your desktop, right-click on the zipped file. Depending on what program you use for extracting files, follow the instructions for extracting the files.
- Once the files have been extracted you can then move them to where your websites are located on your hard drive. Typically this is under My Documents/My Webs or My Web Sites. Follow the instructions for opening a website for your particular program.
- You can now begin working on your new web. Don’t forget to save the original zipped file to a floppy disk or other removable media for backup purposes.
Working with the Template Files
If you look at the template source code, you will see that it contains the html code for your page with NO formatting. Use care in editing the HTML code or you will break the layout for the page.
This is the code that inserts the site name graphic image into the page. If you wish to change the image and use your own graphic, this is the code you would change:
<!-- Masthead begins here -->
<div id="header">
<img alt="" src="images/site-logo-blue.gif" width="542" height="125" /> </div>
<!-- Masthead ends here -->
This is the HTML code that adds the Google custom search box to the left side navigation. You will need to edit the code to fit that of your search engine.
<div class="search">
<form id="cse-search-box" class="myform" action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="009206261522604705567:szjmq6-ogvi" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="10" />
<input class="submit" type="submit" name="sa" value="Search" /> <br />
Google Custom Search</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</div>
There are two sets of style rules that format the "look" of the search box. The are the class .search and .myform.
Working with Server Side Includes
Both the top and side menus for the templates use server side includes. They are located in the _includes folder. The page footer also makes use of a server side include. All three of these are plain text files inserted into the template using the following code:
<!--#include virtual="_includes/footer.txt" -->
This will work on all pages that are saved to the root directory of your site. If you save the pages to a subdirectory that you create you will need to adjust the path of the include. If the page you want to insert the include is down one or two levels (folders) then you would need to add ../ for each level. You can read more about working with server side includes:
Working with the Cascading Style Sheet
Changes to the look and layout of the template are made by editing the Cascading Style Sheet. As an example:
body {
text-align: center; /* Centers the page content container in IE 5 browsers. */;
padding: 0px 0px 0px 0px;
background-color: #838A98;
line-height: 1.2em;
font-size: 1em;
color: #2d2e2e;
font-family: Arial, Helvetica, sans-serif;
margin: 0px 0px 0px 0px;
background-image: url('../images/bg.jpg');
background-repeat: repeat-x;
}
To make a change to the font-family style rule, specify a different font family. There are two types of font family names:
- family-name - The name of a font-family, like "times", "courier", "arial", etc.
- generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
- Start with the font you want, and always end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
To make a change to the background-color of the page, you can specify a different color. To change the background image used, specify a new url and whether the image should be tiled vertically or horizontally or both. You can read more about using background images CSS Background
Each of the sets of style rules are commented so you can tell what they are used for.
CSS Resources
- CSS Tutorial from W3Schools
- CSS Basics - written by Ben Partch - an eighteen chapter book you can either download in pdf format or print.
- Working with CSS
- Introduction to CSS
- CSS and images
- CSS in webpages
- CSS Play