This is additional text that can be put in the sidebar.

Make sure the text is wrapped in a paragraph tag so the margins are applied correctly.

To make a box like this, wrap your text in a div with the class "sidebarlt".

To make a box like this, wrap your text in a div with the class "sidebardk".

This image has the "fltrt" class applied.

If your image extends below your text, include a <br/> with the "clearfloat" class applied.

This is where your 160x600 Google AdSense ad goes. If you don't want to serve ads on your site, simply delete this div.

Welcome to our site. This is the H1 tag.

The H1 tag is styled with the Arial font, but will display as Helvetica or sans-serif if Arial is not installed. It is 24 pixels and is coded in the template to display at -.1em letter spacing in IE browsers. Other browsers will display at normal letter spacing.

#mainContent paragraph settings are 12 pixel Verdana font (as defined in the body tag) but will default to Arial or Helvetica depending on installed fonts. The line height of the P tag in the #mainContent div is set to 18 pixels to give more spacing between the lines. If you wish to allow your visitors to change the font size in IE, change the 12 pixel setting to a em or % setting.

This is a text link

Image Floated Left

An image with the assigned class "fltlft" will be aligned with the left edge of the content div, with a 15 pixel right margin and a 10 pixel bottom margin.

Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus.

Image Floated Right

An image with the assigned class "fltrt" will align with the right margin of the content with a left margin of 15 pixels and a bottom margin of 10 pixels.

H2 level heading

The H2 tag is defined as 18 pixel bold Arial or Helvetica font. To change the font style, simply go into the #mainContent H2 entry in the CSS panel and define a new font.

It is also styled with a solid bottom border and a 5 pixel bottom padding to separate the border from the text.

H3 level heading

The H3 tag is defined at 12 pixel font and inherits the font style from the body tag.

An Unordered List

Unordered lists are styled with a 5 pixel bottom margin.

This is a list item
This is another list item
This is the third list itme

This is a Blockquote.

The blockquote CSS defines the background color, borders and the left and right margins, and the left and right padding inside the box. The #mainContent p selector controls the top and bottom padding around the paragraphs inside the blockquote tag.

A Styled Form

This form is created using a table and styled in css. To apply these stylings to a different form, assign the ID of "signup" to the form, the class "labelcell" to the cells with the labels, "fieldcell" to the cells with the fields, and "button" to the submit button.

Name
Address Line 1
Address Line 2
City
State		Zip
Email Address

The Logo and Header

The logo is simply a .gif image with a transparent background to allow the swirly header image to show through. To change the logo image, simply find the #logo entry in the CSS file and change the background image to your logo. The #logo id also controls the link text on the upper right side of the header.

The header image is a 780 pixel wide by 95 pixel tall PNG image. It's called "header-background.png" in the images directory. To change it simply create a different image at the same dimensions and upload to the images directory. Go to the #header id in the CSS and change the background-image to your new file (or simply name your file the same as the original and you won't have to change the CSS code.)

The Menu Navigation

The navigation is a pure CSS navigation menu. To add a menu item to the list, simply find the code towards the top of the code view that looks like this:

<li><a href="#1" title="Link 1">Home</a></li>
<li><a href="#2" title="Link 2">Our Products</a>
<li><a href="#3" title="Link 3">Our Services</a></li>
<li><a href="#4" title="Link 4">About Our Company</a>
<li><a href="#5" title="Link 5">Contact Us</a></li>

Copy the last line and paste directly beneath it. You can edit the text in code view or switch to design view and simply type in your new link on the menu itself.

To edit the menu items already there, simply highlight the item and type in new anchor text.

Editable Metatags and Head Section

The template allows for editing of the Title, Description and Keywords tags for each page plus another editable area in the Head for inserting scripts and other Head content.

Editable Template Areas Included

The template has editable areas included for the content section and the sidebar section below the navigation. If you wish to include the same content on every page below the sidebar, simply delete the editable region called "Sidebar Content".

Fireworks Graphics File Included

I've included my original Fireworks file that I mocked up the the site in. It includes all the graphic elements in this template with all the slices already created. It will be very easy to customize this template to suit your needs. All the image elements are vector graphics, so you can change colors, gradients, shadows, etc very quickly to generate a new look.

What's the Catch?

We supply our templates and graphic files free of charge, with the only requirement being the small link at the bottom of the template be left in place and not altered in any way. We've styled it very small and unobtrusive, so that's a pretty minor requirement considering the time we spend creating these templates AND it will keep us developing more templates in the future!

Thanks for trying out our template and if you run into any code or browser issues, let us know. We test our templates in IE 6, IE 7, Firefox 2, Netscape 9 and Opera 9, so if there's any issues on Safari we'd be interested to know.

To Extend this Template

Here are some suggestions for creating the ultimate website from this template. (Preview template in a browser to click the links)

Database integration - to easily create a website powered by a database, check out DataAssist.
User Registration and User Profile management - AdminSuite
Build a CMS to update your site via your browser, use DataAssist and irite or get the Web Developer Suite
To easily integrate Google map either from an address you type in or from a database, try Pro Maps for Google
To integrate a shopping cart system, check out: eCart or eCommerce Suite
To easily validate form input and cut down on spam, take a look at Validation Toolkit
For other excellent Dreamweaver extensions that are too numerous to mention, check out this site, this one and this one too. And don't forget about our sweet extension collection on ProConsultancy.com!