Comboilers

Click here for more information about this free Dreamweaver template and Dreamweaver tutorials and training.

Adobe Dreamweaver CS5.5's live Multiscreen preview and enhanced support for CSS3 media queries makes designing for multiple platforms (desktop, tablet and phone) much simpler.

I've taken advantage of those tools and a little CSS magic to adapt Dreamweaver's built in three column starter layout to display well on any device.

Even though I used Dreamweaver CS5.5 to create this layout, there's no reason you can't use it no matter what version of Dreamweaver you own.

Device Specific Layouts

There's nothing particularly earth shattering about the features of this template. What makes itpowerful is the way it adapts seemlessly to varying screen sizes. As you can see from the screen shots, the three column layout with left side navigation that displays on desktopa (and in a narrower format on tablets) becomes a single column with top navigation on a phone.

Auto-Resizing of Images

In addition, the header image automatically resizes to fit the reduced layout and images floated using the .fltrt or .fltlft style rules are limited to no more than half the width of their containers by setting the max-width CSS property to a percentage and setting the image heights to auto using the following rules.

.header img { 
	max-width: 100%; 
	height: auto; 
}    

img.fltrt, img.fltlft { 
	max-width: 50%; 
	height: auto; 
}

This allows plenty of room for the related text to wrap around the images.

Commented CSS

I've removed the default comments from the style sheets but I have added comments explaining my additions and the tablet and phone specific style rules.