OpenSpaces - Another Free Dreamweaver Template

 

It's really easy to customize the header graphic!

We recommend using the full-width template with the header graphic on your home page and either the left navigation or right navigation templates on your subpages. You can either include the header graphic on your subpages or use the two templates provided that replace the header graphic with a nice drop shadow effect.

Here are some examples of other header images we created in about 10 minutes using the included Fireworks file:

Here are the links to the other template styles that are included in the downloadable zip file:

 

Image Floated Left

Dreamweaver CS3An image with the assigned class "fltlft" will be aligned with the left edge of the content div, with a 10 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

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

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.

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

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 the main content section and both sidebars. To create identical sitewide navigation or content in either sidebar, go into code view and find either this tag: <!-- TemplateBeginEditable name="leftsidebar" --> or this tag: <!-- TemplateBeginEditable name="rightsidebar" --> depending on which sidebar you want to lock, and cut the entire tag from the code. The paste the code directly above the code you want to remain editable in each page of your site.

Fireworks Graphics File Included

We've included the original Fireworks file in which we created the the site images. 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. If you wish to remove the link, you can license our templates really cheap! Just visit our templates page and look for the fees to license this template.

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, Netscape and Opera, so if there are any issues on any other browsers we'd be interested to know.

To Extend this Template

Here are some suggestions for creating the ultimate website from this template.

  • 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 JustDreamweaver.com.
Optional Side Navigation This is bold text. Attention grabbing, isn't it?

Rounded Corner Boxes

 

This box is created using three images, the top rounded corners, the bottom rounded corners, and a vertically-repeating background image.

 

Rounded corners are eye-pleasing and we've included the vector box in the Fireworks file, so you can make your boxes whatever color you like.

Square Corners too!

If you like square corners better make a box like this simply by applying the "sidebarlt" class to a paragraph tag.

But remember to use hard line breaks rather than a new paragaraph. Or you'll have a bunch of little boxes!

Here's a text link.

Even Dark Square Boxes

To make a box like this, assign the "sidebardk" class.

You can do anything with a sidebar box. Insert images, ads or other web content.

Here's a text link.


Free Dreamweaver template courtesy of JustDreamweaver.com