Contact Us

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

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

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.

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.

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 the CSS version of this free Dreamweaver template was created using WebAssist's CSS Menu Writer. It allows you to create standards-compliant cross-browser multi-level navigation (is that enough hyphenated words?) through an easy-to-use wizard-like (two more) interface.

The great thing about CSS Menu Writer is the ability to reenter the configuration wizard at any point and change any aspect of your menu. It also allows you to save your menus for use in other projects. If you need a solid Dreamweaver extension for creating CSS menu navigation, check out CSS Menu Writer.

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. 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.