Free Dreamweaver Multiscreen Template

by James Cook on May 9, 2011

Free Dreamweaver Multiscreen Template

As part of an ongoing series to help you exploit the new features of Dreamweaver CS5.5, I’m offering a free Multiscreen Template based upon Dreamweaver’s built-in Three Column Fixed Width with Header and Footer layout. With the addition of CSS3 Media Queries targeted to mobile devices, the new layout has been optimized for a range of screen sizes (phone, tablet and desktop). Best of all, even though it was created with CS5.5, you can use it with any version of the Dreamweaver.

Click here to view the Multiscreen Template and right+click here to download the free Dreamweaver Multiscreen Template.

Creating the template

The release of Dreamweaver CS5.5 with its focus on developing for smart phones and tablets confirms that Adobe believes the future of web design - or at least a very large chunk of it – is mobile.

So I decided to test some of Dreamweaver’s new features, and see how difficult it would be to adapt one the built in layouts to display well at multiple screen resolutions. The answer is that it’s surprisingly easy. And, while there’s nothing particularly unique about the result, I’m making it available as a free Dreamweaver template for those of you who might want to use it as the basis for your own multiscreen layouts.

I’ll also have a video tutorial of the development process soon, but for now I’ll simply provide a quick overview of the Dreamweaver CS5.5 features I relied upon to create the layout: CSS3 Media Queries and Multiscreen Preview.

Dreamweaver Media Queries DialogCSS3 Media Queries

Media queries allow you to create CSS style sheets targeted to specific screen sizes so it is possible to create a series of totally unique style sheets to apply to your HTML page based upon the screen resolutions. So for instance you could create style sheets for:

  • Phones with screen width up to 320 pixels
  • Tablets with screen width between 321 pixels and 768 pixels
  • Desktops with screen width 769 pixels and greater.

Those are the defaults but you can alter them as I chose to do in my Multiscreen Template. I also chose not to use a Media Query for desktop devices. Instead I simply created a main style sheet (actually modified the one from the built in layout) and used media queries only for phone and tablet devices. That way I could rely on the main style sheet for most of the appearance of all three layout.s I only needed to create a few custom styles in the phone and tablet CSS files to overwrite rules from the main style sheet and optimize the layout for those devices. If you download the Multiscreen Template, you’ll see that I’ve commented the style sheets to make it easy for you to understand what I’ve done.

Multiscreen Preview

Of course, customizing layouts for tablets and phones would be a bit difficult without a way to preview the results without the need to upload your page and test it on a tablet or phone after every edit. That’s where the Multiscreen Preview palette comes in.

As the name implies, Multiscreen Preview allows you to simultaneously preview your webpage at three different screen resolutions: phone, tablet and desktop. In CS5.5 those previews have been updated to include Live View functionality so that you can also preview CSS effects and Java scripts.

Of course, you can also preview your page at different screen resolutions with Live View directly in the Design window by selecting a resolution from the Window Size menu in the status bar at the bottom of the Document window. [image]

Best of all Dreamweaver’s Live View is based upon the WebKit browser engine that powers Safari and Chrome browsers. So, for the most part, what you see in Multiscreen Preview should be what you get in iOS and Android.

Using the template

Installation:

  1. Right+click to download the multiscreen.zip file.
  2. Unzip the contents of the file into the folder where you normally keep your Dreamweaver websites. The contents of the package is a folder named multiscreencontaining the following:
    • Templates folder containing the multiscreen.dwt template file.
    • An assets folder containing the thrColHFmulti.cssphone.css and tablet.css files.
    • An images folder containing the bg.png and header.phg files and a header.psd file you can use to create your own header.
  3. Open Dreamweaver and select the menu: Site>New Site command.
  4. Define/setup your local site.
    • In the Local Info tab (DW CS4 and prior) point the local root folder to the multiscreen folder.
    • In the Site tab (DW CS5 and CS5.5) point the local site folder to the multiscreen folder.
  5. If you already have hosting input the remote site/server info and click OK/Save when you are done.

To use the template:

  1. Select the menu: File>New… command.
  2. Select Page from Template.
  3. Make sure the site you just set up is selected in the site column.
  4. Select multiscreen from the Template column.
  5. Click Create to make a new page based upon the template.

Join the conversation

As I said, I’ll have a video tutorial for you in a few days. In the mean time, if you have questions about the template, suggestions about how to improve it or question about Dreamweaver CS5.5’s mobile features, feel free to join the discussion by commenting below.

Douglas Roy February 2, 2016 at 9:03 am

Extremely helpful! Thank you so much! I’ve been able to make my new site mobile and tablet friendly! Other templates I’ve purchased in past were unable to do that.

Thanks so much!
Doug

DJ June 30, 2012 at 9:26 am

Hi, love the template. However, for the past 4 hours I have unsuccessfully tried to change the title. I see that it is an editable area, but even when I change the title in code, it insists on remaining “DWcourse.com Multiscreen Template” when made live. I have tried changing it in DW which did not work. I also tried changing it in Komodo and uploading it with FileZilla to see if it is a DW glitch. All the code seems fine I just have no idea why it does not show up live on the web. Any ideas? Much appreciated.

DJ May 19, 2012 at 11:09 am

I love the template, but I cannot edit the link names on the left sidebar or the right sidebar content. Please help. Thank you so much.

dwcourse May 19, 2012 at 11:30 am

It’s a Dreamweaver template. After unzipping the package, you’ll need to set the “mutiscreen” folder as your site’s local root folder. Then Dreamweaver should recognize the file as a template and allow you to edit the links in the template (.dwt) file.

Fred January 18, 2012 at 3:45 am

Hi
Great template. Could you please tell me how I can edit the sidebars. I would like to change their colour. I have tried in both html and css but nothing I do seems to make any difference.

Keep up the good work.

Kind Regards

Fred

dwcourse January 20, 2012 at 7:16 am

It’s a bit tricky. Full width the background colors of the columns are set by the background image referenced in the .container style rule. At smaller widths the background colors are controlled by the individual style rules for those items (.sidebar1, .content and .sidebar2)

chris December 8, 2011 at 11:23 am

display:none does ‘hide’ the content but it does not prevent it from downloading. There are many server/client side techniques that can be used in addition to media queries to load content based on device effectively.

dwcourse December 8, 2011 at 1:41 pm

@chris Thanks. You’re absolutely correct and I’d recommend that for users who are comfortable with php, etc. but it gets a bit complex and is somewhat beyond the focus of this site. If you have a link to a resource you like. Feel free to post it here.

david November 15, 2011 at 11:29 pm

i want to hide some content from desktop not visible on tablet and mobile version, just want to have more simple for mobile and tablet version , thanks !

dwcourse November 16, 2011 at 8:34 am

You’ll want to add a CSS3 Media Query in your style sheet for smaller screens and within that create a rule that sets the display property to hidden like this:

@media only screen and (max-device-width: 480px) {
.hidemobile {
display: none;
}
}

Set the max-device-width to whatever you need and notice the open and close brackets for the media query call.

david November 6, 2011 at 11:09 pm

wonderful work, this is what i have been looking around for months, God bless you man !!

PC Repair Ayr August 30, 2011 at 6:38 am

Thanks, I have been having all sorts of trouble trying to create an iphone version of my site but with this I think I should be able to do it!

Thanks again, Stuart.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact