Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Support for HTML5 in CSS3 was one of the most anticipated additions to Dreamweaver in recent memory. Really, Adobe wasted no time in putting these capabilities in the hands of designers with the release of the HTML5 pack update earlier in 2010, making Dreamweaver one of the first web development tools to support the emerging standards. After initially putting out the HTML5 pack, Adobe added these features to the 11/03 Dreamweaver update, which is available on adobe.com for users of Dreamweaver CS5.
So even though technically these features have been available in Dreamweaver in a previous update, in this chapter I want to go over many of the new HTML5 and CSS3 features. Dreamweaver CS5.5 marks the first release that these features are native to Dreamweaver without requiring an additional update. I want to start with the options that Dreamweaver gives you when creating new HTML5 documents. Before I get too deep into this, I think it's worth mentioning here that I'm not going to go into a great amount of detail about HTML5 and CSS3 and their capabilities; I'm just going to cover Dreamweaver's support for them.
For more on HTML5 and CSS3, check out some of the related titles in the lynda.com Online Training Library, including my HTML5 First Look and CSS3 First Look titles. Now, the first time that you're likely to encounter options relating to HTML5 is when creating a new HTML document in Dreamweaver, so that's a logical place for us to start. So I'm just going to go to File and choose New, and that brings up the New Document dialog box. Now, I'm just going to start with my defaults here, so I'm going to choose a Blank Page. Page Type is going to be HTML, and the Layout is going to be none.
But now, when I go over here to my options for this page, instead of choosing the XHTML 1.0 transitional doctype, which apparently is the default here, I can grab this pulldown menu and I notice that the HTML5 doctype is now supported. So I'm going to go ahead and select that and click Create, or Choose, and here we have a brand-new HTML5 document. Now, you'll notice it's a lot less cluttered than previous versions. We have a very short doctype, so it's a very simple HTML declaration, and we have one element that you're probably not used to seeing, which is the meta element with the character set attribute, set to utf-8, which is just basically setting the character set encoding for the page. And that's it.
We've just got a really simple clean document that now we can go in and add any of the elements that we need to. Now, it would be really inefficient if the only way I could get an HTML5 document is opining up that dialog box and choosing that doctype every single time. There are a lot of different ways to create documents inside Dreamweaver. What if you want to just work with HTML5 documents from here on out, or maybe you have a project where you want all the documents inside that project to be HTML5? Well, for that we can go into our Preferences. So what I'm going to do is just close this document without saving it, and I'm going to go up to Edit and choose Preferences.
If you're on the Mac, you're going go to Dreamweaver and choose Preferences. And I want to go down to my New Document category. Now, currently you can see the Default preference for Dreamweaver is to choose XHTML 1.0 Transitional. If I grab that pulldown menu, notice I can also ask for HTML5 to be the Default Document Type. As soon as I click OK, now it doesn't matter which method I used to create a new document, even the Welcome Screen, I'm going to get an HTML5 document, so that's really cool.
Now, we have other options available to us as well. So I'm going to close this again, and I want to bring that New Document dialog back, so I'm going to go right up to File and choose New one more time. Now, this time instead of choosing a Blank Page with no Layout, I want to go down to the bottom of these layouts, and I notice that I have two additional starter pages that weren't in CS5: I have the HTML5: 2 column fixed layout and the HTML5: 3 columns fixed. So I'm just going to go ahead and choose the 2 column fixed, and I notice when I do that the DocType is automatically selected for me.
I'm going to make sure the Layout CSS is added to head, and I'm going to go ahead and click Create. Now, if you've ever used a starter page before, you know what it does is it just sort of gives you a page with an existing structure and the CSS for the layout already written. So it gives you a nice little head start on creating your pages. Now, if I switch back over to Code view, you'll notice that if I scroll all the way up to the top, there is our HTML5 doctype, there is our meta tag, and here are the embedded styles that we asked to be placed in the head of the document. Now, there is something about these styles that I want to point out to you guys.
If I scroll down towards the bottom of these, you're going to notice that we have some CSS support built in for these HTML5 elements. That's normally something you'd have to do yourself, but using the starter pages, Dreamweaver will go ahead and put that in there for you. We also have a nice little conditional comment that basically says, hey, if Internet Explorer 9 is being used, go out to Google Code and find the HTML5 shiv. Essentially what this file does for you is go ahead and create those elements. Since they didn't exist in earlier versions of Internet Explorer, it will go ahead and create them for you, so that Internet Explorer will know what those new HTML5 elements are and it will render them properly.
So I'm going to go ahead and save this page in the 02_01 as html5.htm. In addition to supporting the HTML5 doctype and properly structuring your initial page, as we just saw, Dreamweaver gives you the option of these two new starter pages that include HTML5 structure and page layout CSS that are both designed to get you up and running with HTML5 quickly. Now, whether you're going to be creating your own pages or letting Dreamweaver give you a head start, make sure that you check your options carefully when creating new documents to make sure you're getting the structure and doctype that you expect.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.