 |
|
Web GraphicsOne of the most useful tools I've ever bought for creating websites is WebStyle4. Every graphic and photo we place on any of our websites is created or optimized using this tool. Get your free trial version. |
Free Web TemplatesSunrise - Sunset SeriesAll 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. LOOK: You can replace the heading background photo and the photo on the web page, on all of these templates, with a photo from your digital camera using Webstyle 4. Note: The Color Scheme Tool was down when I was creating these, so if you would like a version created in your own color choices please Contact Me. |
Web Hosting Services |
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.
Download the Free Trial Version of Webstyle 4.
Even if you decide not to buy it,
the photo editor continues to function after the 15 day trial period is up.
Use Webstyle 4 to create your own background headings for these templates. See our screenshot tutorial.
In each of the templates below, I took a photo from my wife's digital camera and loaded it into Webstyle 4.
I cut out a slice for the heading background and resized and optimized the image and placed in the body of the web page.
The heading graphic and buttons were also created using Webstyle 4.
|
|
|
|
|
|
|
|
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.
Frames Template Kits You can also place an order for a free frames template kit, created in your own color scheme.
Order a Free Template
 |
|
|
| Net Success 2000 Plus Inc PO Box 1508 Somerset, KY 42502 Copyright 2000 - 2008 Net Success 2000 Plus Inc Last Modified: March 6, 2008 |