New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS5.5 New Features
Illustration by

HTML5 code hinting


From:

Dreamweaver CS5.5 New Features

with James Williamson

Video: HTML5 code hinting

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS5.5 New Features
1h 50m Intermediate May 02, 2011

Viewers: in countries Watching now:

This course covers the enhancements to the latest release of Adobe's web design and development software. Author James Williamson examines Dreamweaver's updated support for current Web standards, such as code hinting for HTML5, CSS3, and jQuery, and new W3C-compliant code validation. James also demonstrates the new features introduced specifically for mobile development that allow developers to download, install, and configure native applications for Android and Apple iOS. These features include support for PhoneGap integration, jQuery mobile framework, native binaries, and platform emulators launched directly in Dreamweaver.

Topics include:
  • 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
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

HTML5 code hinting

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.

Find answers to the most frequently asked questions about Dreamweaver CS5.5 New Features.


Expand all | Collapse all
please wait ...
Q: This course teaches us how to create mobile app in the "Mobile App Support" chapter and the app works great. But when we try to upload to android market, it says that the Android Market can't upload a debug/release version. What's wrong with the app?
A: As mentioned in the movie, the Dreamweaver emulator support does not create deliverable apps. It is designed to act as an IDE and debugging environment only. From there it is up to the developer to package and distribute apps to the various app stores.

Take a look at https://build.phonegap.com/. It's an early service dedicated to creating deliverable binaries for multiple platforms. Since it's PhoneGap, it's also the same framework used within Dreamweaver, so Dreamweaver based apps should port right over.
 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Dreamweaver CS5.5 New Features.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.