Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
As you might expect, the area most impacted by Dreamweaver's HTML5 support is the coding environment. By adding HTML5 elements and attributes to Dreamweaver's code hinting, the process of hand-coding HTML5 becomes a lot easier. So I have the contact_start.htm from the 02_02 folder open, and I am just going to go ahead and do a save-as. And in the same directory, I am going to save this as contact_structure.
So we're just going to build the basic structure of our contact page. The first thing I am going to do is go right between the body tags, and I am going to do a technique that's quite common in most web pages today; I'm just going to add a wrapper div tag. So I am just going to open up an angle bracket. My element list comes up, and as I begin to type, it goes through the elements. So if I just type in 'di', I can hit Enter or Return and Dreamweaver will finish my div tag for me. It also supports code hinting for attributes. So if I hit Space and then an i, it will go through all the attributes with an i.
And if I type in id and hit Enter or Return, it will not only finish that attribute for me, but it will also go ahead and finish the attribute syntax. And all I have to do now is give it the ID that I want, which is wrapper. I can then go outside of the quotation marks, close the angle bracket, and then if I want to close the div tag, simply go down to the next line, begin to close the tag, and it will self close for me. That's code hinting. Now, a wrapper div tag is not new to HTML5; people have been using this technique for years as a way to center content and define width, and that's what I am going to use it for here.
What I was really wanting to show you more was code hinting and how Dreamweaver makes it a lot easier for you to hand-code your elements. Now, prior to the release of the HTML5 pack there was no code hinting support for HTML5, so as you hand-coded it, you had to basically just do it the long way. That's usually not a huge burden, but code hinting makes this more efficient. So let's check out how Dreamweaver supports code hinting for HTML5 elements, and we're going to do that by building our contacts page structure. So just inside my wrapper div tag, the first element I want to start with is the new HTML5 header element.
So just inside that, I am going to open up my bracket, begin to type header, and again, I can just hit Return or Enter, and it will finish it for me. Now, Dreamweaver supports all the normal attributes for this as well, so I can do an id for header, and I am just going to call this one mainHeader. I'll go ahead and close that out and close my header element. So you can see how quick and easy it is to add these new HTML5 elements. Now, inside my header is going to be my main site navigation, so for that I'll use the new nav element, so again, just an n and an a brings me nav.
And again, I am just going to do an id here, and that's going to be mainNavigation, and I'll close it. So you can see you can quite rapidly build these elements out. Now, just after the header, I am going to have a new section element. Sections do just that; they create a new section of content, and they also create a new section in the document's outline. So that's going to be section id="mainContent". And we'll close that as well. Now, there's no law against how many headers you can use on your page in HTML5.
So I want my section to have its own header. so right inside my section tag, I am going to add a brand-new header, and that one I am going to go ahead and give it an id of contentHeader. And again, I am just going to close that tag. After my contentHeader, I need an article. Now, articles basically allow us to create sections of content, and generally they are used for any content that you might want to republish or content that can stand on its own.
So this article is going to have an id of mainArticle. And if you're wondering, hey, do I have to give all this HTML5 elements an ID? Absolute not. You certainly don't. I'm simply using it as a way of identifying what that content is going to be to make the structure a little bit clearer. Now, just after that, I am going to go right below the section and create a new aside. Asides are elements that are related to the rest of the page content but aren't germane to the page content. So they're just what they say. They are the sidebars, pull quotes, things like that.
I am going to go ahead and give this an id of secondaryContent. And we're almost done. I am going to go ahead and close that out. And then finally, just underneath the aside, I am going to go ahead and add a footer. So that's another new HTML5 element is the footer. This one is going to have an id of pageFooter. And then I am going to go ahead and close that as well and save this file. So you see how quickly and easily we can code these HTML5 elements with the code hinting editions in Dreamweaver CS5.5.
Now, that's not the only place that they've added support for new elements; in our next movie, we're going to take a look at some of the other locations that you can find support for these new HTML5 elements.