Free Web Templates
Sunrise - Sunset Series
All of the templates provided below were created by taking a photo from my wife's digital camera and loading it into my favorite web graphics software, Webstyle 4 by Xara.
Each heading background at the top of the template is cut from the photo shown in the body content of the page.
The photo in the body content has been resized and optimized using Webstyle 4. It took a few seconds to create each set.
The templates are built using a simple table design and should be fairly easy to personalize. There are some instructions on the web pages. Click on the images below for a working demonstration of each template.
Each kit contains 2 linked pages, images and a style sheet.
Order the Heading Text for these templates here: Text Order Form
Note: These templates perform the same in IE and Mozilla browsers. Also tested at various monitor resolutions.
Generic Series
I'm not sure why I called the next set of templates Generic. Maybe it's because they are all created in a two color scheme. It may also be because I provide instructions for adding your own heading background to the web page.
I created a mini site using the template design that shows you how to use Webstyle 4 to create a background heading from one of your own photos. Click Here to see the mini site.
Webstyle No Longer Exists
|
|
|
|
|
|
|
|
Order the Heading Text for these templates here: Text Order Form
This next series of templates include some extra features which will only be enjoyed by IE7 and Mozilla browser users. The mouse-over feature on the links for these templates is programmed using only CSS.
Order the Heading Text for these templates here: Text Order Form
NEW - Step by Step Tutorial that shows how to take one of our free Webstyled templates and convert it to a 5 page website using NoteTab Light.
Note: Why the 750 wide pixel design? If the body portion of your template is set to 750 pixels as these templates are, you will have less degradation in appearance when someone visits your site with their monitor resolution set to 800X600. It still looks great at higher resolutions.
Is This Your First Website?
If this is the first website you are going to build I highly recommend that you go to our HTML Tutorial and study the lessons on:
Tables
Heading Tag
Paragraph Tag
Anchor tag
and Style Sheets
Some Tips
Height of Background Heading
When cropping the photo for your heading background keep the width close to 750 pixels wide. No Less Than 750!! That is because the widths of the tables on the template are set to 750 pixels.
The height adjustment for your top background image is set in the code shown below. It is set here to 125 pixels.
If you want a taller heading then you would crop your photo to your desired height. Then adjust the height setting in the code below to show more of the background image you create.
As an example look at Templates Generic 7 and Generic8. The height of Generic7 is set to 125 and the height of Generic8 is set to 280 pixels.
The Code:
<td height="125" align="center" style="background-color: #cccc99;background-image : URL(images/short-creek-back.jpg); background-repeat : no-repeat">
Image widths
The 750 pixel width of the body on your templates will limit the width of the pictures that you place on your pages. If you place large images on the 3 column page, do not set them in paragraphs. There are margin setting on paragraphs in the style sheet that will cause your pages to distort.
The widest image you can place in the body content portion of the 3 column template is about 390 pixels. If set in a paragraph the width should be less than 350 pixels.
You can place images that are about 550 pixels wide on the 2 column page.
Check your pages in your browser if you use large pictures.
Free Websites
Spruz.com
MoonFruit
LIVE JOURNAL
CalgaryPlanet
More websites
Free Website Builders
Web Hosting Services
Web Hosting FAQ
Web Hosting Chart
