Dreamweaver Templates for HTML5 Layouts

elements through the page and little, if any idea what they were. Introduced in Dreamweaver 5. HTML5 starter layouts appeared and in Dreamweaver CS5.5, that continues. This one development is huge, partly because it makes it easier to understand what’s happening on a page.

First, in the New Document dialog box (File: New Document – Ctrl+N), you’ll see two HTML5 document options at the bottom of the Layout column. In this case, I’ll choose the HTML5: 3 column fixed, header and footer. Before you click on the Create button, have a look at the Create New File popup. You have three choices: Add to Head, Create New File or Link to Existing File. In this case we’ll choose Add to Head and click on the Create button.

And this brings up a layout that you’ve no doubt seen before. Be aware that each section of the layout has instructions in it so you get more information about how to configure the layout. In another article, I made use of one of these formats when I built a site for a customer. These started layouts make life a lot easier.

Now there’s one other important thing to note. When you use any of these templates, you can convert them to an HTML5 layout. Here’s how it works. Go to File: New. When you choose any one of the starter layouts you can also change it into an HTML5 document, by going to the Doc Type popup on the right and choosing HTML5, then create the document. We’ll stick with the first layout we created above because it’s now time to look at the code.

 

 

At the tops of the layout we’ll click on the Code button. At the top of the page you’ll see the DOCTYPE, which is simply HTML, nothing else. Below that is the CSS and once we create this page to our satisfaction we can save the CSS as a separate file and link it to our pages. You’ll also notice a lot of commenting in the CSS to help you understand what’s happening with your layout.

Moving down the page, we see the HTML and you’ll notice that the elements are HTML5 semantics, instead of