Join Paul Trani for an in-depth discussion in this video Adding HTML5 content, part of Dreamweaver: Creative Cloud Updates.
The latest version of Dreamweaver has robust support for HTML 5. Now, in Dreamweaver CS6, your support for HTML 5, if I go to File > New, was really this DOC type, as well as a couple templates. And that's a great place to start. In fact, I'm just going to start with a blank page. Select Create, and I'll just save this page. And I'll just call this Index. Because what I want to do with this page is I want to insert HTML 5 elements, and various HTML 5 tags.
So, right in here, in my body right here, I can go to the Insert panel. I can go to structure, and this has been reorganized. It's nice and clean. It gives me all of these HTML5 tags that I can start inserting right away. So if I need to insert a header, I can select Header. I can give it a class or ID, or I could just click Okay and leave those blank. You can see right in here. I have that content and I can replace it with whatever I want. The header for my page. Moving on from that, I can insert navigation the same way, adding that nice HTML 5 tag.
Easy to read, and this is where my navigation will go for this page. So, you can see how easy it is to start to insert HTML 5 content into any page, whether it's a new page or a current page that you already have created. Go ahead and insert one last thing here, which will be an article. An article tag just like that, you can see how that's set up. So, I have an article, I have an aside and whether I'm using this Insert panel or not. What I can also do is I can hand code this.
So, I can start typing in article. There it is, selecting it. And you guessed it, we have code completion. Because as I do that forward slash, you can see it completes that closing tag for me, and this will be my article number two. So there's HTML 5, easy to insert into a new page, or a page that you already have. In fact, if I open up this website that I've been working on, this index HTML, you can see it in action. Because as I scroll down, you can see here I have the heading, I have the NAV scrolling down.
You can see figure various HTML 5 elements that I've implemented and even going beyond that. If I just take a look in media you also have HTML file and video audio which is being used in here as well. And lastly, if we just Preview this, you can see that it looks great not only is the code easy to read, but you can see how the contents laid out everything looks clean. All using HTML 5 tags easily insertable using the Insert panel or just typing it directly in Code View.
Note: Adobe Creative Cloud is updated on a regular basis. We will add more tutorials as features are added or changed, so check back often.
- Getting used to the new interface
- Syncing your settings
- Implementing media queries with CSS Designer
- Working with the Fluid Grid layout updates
- Adding HTML5 audio and video