Optional Side Navigation This is bold text. Attention grabbing, isn't it?

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

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

Here's a text link.

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.

More information can go here. Optional navigation links are also styled. Simply use an unordered list for your links and they look like this:

WebAssist CSS Sculptor
This CSS layout was created using CSS Sculptor. Create standards-compliant pure CSS layouts in minutes.

WebAssist CSS Menu Writer
The multi-level CSS drop-down menu was created using CSS Menu Writer.

Yup, you can even insert either the light or dark sidebar boxes on this side too.

They style the same and have the same text link styles.

A Free Dreamweaver Template

Trellian is a new free Dreamweaver template that was created using some of our favorite Dreamweaver extensions from WebAssist. The page structure was created using Eric Meyer's CSS Sculptor and the menu navigation was created using CSS Menu Writer.

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.

H2 level heading

The H2 tag is defined as 18 pixel 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.

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

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

The Header

The header is simply a JPG image that is easily customized with Fireworks to include your logo, slogan, or other images. The header graphic is included in the Fireworks file, so customization is easy.

The Menu Navigation

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

<ul class="level-0" id="cssmw">
<li><span><a href="#">Home</a></span></li>
<li><span><a href="#">Products</a></span>
<ul class="level-1">
<li><span><a href="#">Product 1</a></span></li>
<li><span><a href="#">Product 2</a></span></li>
<li><span><a href="#">Product 3</a></span>
<ul class="level-2">
<li><span><a href="#">Pricing</a></span></li>
<li><span><a href="#">Specifications</a></span></li>
<li><span><a href="#">Order Now</a></span></li>
</ul>
</li>
</ul>
</li>
<li><span><a href="#">Services</a></span>
<ul class="level-1">
<li><span><a href="#">Service 1</a></span></li>
<li><span><a href="#">Service 2</a></span></li>
<li><span><a href="#">Service 3</a></span></li>
</ul>
</li>
<li><span><a href="#">About Us</a></span></li>
<li><span><a href="#">Contact Us</a></span></li>
</ul>

You can change any of the menu items simply by changing the anchor text for the link. To add an additional main level menu item, copy and paste an existing item and change the anchor text.

To add a submenu to a main menu link, simply wrap the list items with <ul class="level-1"> </ul> directly beneath the main link <li> selector, but BEFORE the closing tag of the main list item </li>.

To add a second level menu to a sub menu, wrap the list items with <ul class="level-2"> </ul> directly beneath the sub menu <li> selector, but BEFORE the closing tag of the sub menu list item </li>.

For easier customization of the menu, including unlimited levels and complete control over the styling via an easy-to-use interface, buy 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 - Admin Suite
  • 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!

This free Dreamweaver template created by JustDreamweaver.com