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.

Web 2.1 - Another Free Dreamweaver Template

CSS or DHTML Menu Navigation

This free Dreamweaver template is available with CSS Navigation created by CSS Menu Writer, and also with a very cool DHTML menu created in AllWebMenus Pro. They both allow you to easily create multi-level drop-down website navigation in Dreamweaver. You will need to purchase one or the other in order to create your own custom menus, unless you can hack your way through the code. Trust us, you won't regret either purchase.

Left or Right Sidebars Included

There are two layout versions included in the template, left navigation and right navigation. The templates are identical, with the only difference being the ID's assigned to the content and sidebar blocks. These determine whether the navigation sits on the left or right of the content.

AdSense-ready Header

The header includes a pre-styled block for inserting an AdSense 728x90 leaderboard ad. To enable the block, simply find the commented-out code for the block in code view and remove the comment tags (those look like this: <-- and this: -->). Then insert your AdSense code for the ad block inside the div. We've included a preview on this mini-site, so just click on the navigation that says "View with AdSense ad" and you'll see the ad.

Image Floated Left

Dreamweaver CS3 An 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 Computer An 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.

H2 level heading

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

The Header

The header is a JPG image that is easily customized with Fireworks to include your logo, slogan, or other images. We include the Fireworks source file with this template, so as long as you have Fireworks, you can easily modify this template to suit your needs. If you don't have Fireworks, download a free trial version at Adobe!

The Menu Navigation

The menu in this template was created with AllWebMenus Pro version 5 to showcase the capabilities of this great DHTML menu extension. It integrates into Dreamweaver via a free extension and allows for unbelievable customization of your menu. If you already have AllWebMenus Pro, you can easily insert your own navigation into this template simply by specifying the "topNavigation" id selector as the placement div in AllWebMenus.

If you don't have AllWebMenus, we highly recommend taking a look at it's features at Likno Software's website. If you prefer to incorporate CSS navigation into the site, CSS Menu Writer is a Dreamweaver extension that builds standards-compliant cross-browser navigation through an easy-to-use wizard.

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:  or this tag:  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. 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, 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.

Get free Dreamweaver templates at JustDreamweaver.com