Free Web Page Templates

By Floyd Jay Winters 03/31/2011

Background Info and Basic Directions

WAIT!!! Do NOT use a template until AFTER the 8th or 9th week or a week after the midpoint of the class. It is important that you go through all of the stages of setting up a Web page and a Web site first. You must understand HTML code and CSS styles before you are able to make all your desired modifications to a fully customizable template. You will cripple yourself in this class if you use a template before the Midterm. I can recognize most templates and I will not accept your early work if you use a template for the first half of the course. Keep in mind, it is relatively easy to copy the content (the text and images) from your first 8 weeks of work into a new template.

Also sometimes, it is easier to just start over; what may have take 8 weeks while you were learning may only take a few hours - and end up much better. And if you start over - do it step by step - add the masthead, test it; add the background; test it, add the Nav section; test it... - so that that you fully understand it and see how everything is affected. And the smaller the problem, the easier it is to debug.

You can use one of the free template Web sites listed below or do a Web Search on "Free Web Page Templates." You may choose to use only part of the template - such as only the Masthead or the Nav.

Note - there is a difference between a Template that can be easily modified, and a Dynamic Web Template (where a main .dwt page controls the styles and layouts with <!-- #BeginEditable --> and <!-- #EndEditable --> regions), and a scripted template where you have very little control after you set it up. Many sites allow you to download a .zip file - this may or may not be the best way to go, depending on what you get after you download the .zip file - will the template file(s) be truly customizable?

Use a template that can be easily modified using the assignments given and tools provided in class - so that the template is truly customizable - ANY way you want.

What I would suggest if you use a free online template is:
Simply Preview it, Copy it, and Save it - so you know exactly what you have.

1. Make a folder called NewSite and an images folder inside NewSite
2. Choose the option to Preview the template
3. Right-click and View Source - if the code looks like the "well-formed" code we have used in our class -
    Copy the source HTML code, paste it to Notepad or Dreamweaver, and save it to the NewSite folder
4. Find and copy the name of the css file, ex: abcSite.css. (Remember the CSS file link is in the <head> section. )
    A sample is: <link href="abcSite.css" rel="stylesheet" type="text/css" />
a. Append the name of the css file to the URL in the browser's Address Bar ( Ex: http://abcSite.com/abcSite.css )
b. Tap [Enter] and the css file should open up
    If for some reason you cannot open the CSS file, use the browser's Developer Toolbar to display the CSS file
c. Save the CSS file to the NewSite folder
5. Right-click on any images that you may want to temporarily use - and Save As to the NewFolder images subfolder
    (You may have to use the CSS file to find the image name and path of some images, especially Nav bar images.)
6. Finally, someplace on your page - give credit to the person who gave you the template:
    Ex: <!-- Original template from http://NiceGuy.com, but substantially modified by me -->
7. Now customize the template to do what you want - experiment and play!

Some Free Web Page Template Links

Do not pick the first template you like - browse through several sites first so that you might pick the best template.

In Dreamweaver - choose: File > New > Blank Page > Two column fixed, left sidebar (with Nav), header and footer.
When done, view the Code to see the many comments to explain how this page is created.
The Layout CSS dropdown gives you the option to Add to Head section of the same HTML file or the preferable Create New [CSS] File that will be linked to the HTML file.
(You can also click the Get More Content... link and type templates in the Search box to find free Dreamweaver Templates to download.)

In Expression Web - choose: Help > Online Community > Expression Community Home > Gallery > Web Templates:
http://gallery.expression.microsoft.com/  <!--- DWT files, download as .zip -->

Look for more "Free Web page templates" on the Web.
http://www.expression-web-designer-help.com/Free_expression_web_templates.htm
http://www.wix.com/flash_websites/fish_msn_website__templates  <!-- excellent; requires email login -->
http://www.steves-templates.com/     <!-- A favorite: clean, simple, well-formed code -->
2820Web/SamplesCSS_Styles/       <!-- Simple, well-formed all-in-one CSS code by F J Winters -->
http://www.freewebsitetemplates.com/ <!-- Stylish -->
http://www.oswd.org/               <!--- May need to use Developer tools to see CSS -->
http://www.freewebtemplates.com