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 element support


From:

Dreamweaver CS5.5 New Features

with James Williamson

Video: HTML5 element support

One of the great things about HTML5 support in Dreamweaver CS5.5 is that the support really permeates the entire program. It's not limited to just the code environment and the code hinting that I was showing you in the previous movie. Anywhere that you can interact with an element, you're going to find that support for those HTML5 elements and attributes. So in this movie, I want to show you that HTML5 support while we're in say Design view instead of Code view. This is going to be particularly helpful for those of you that really like to work in Design view rather than hand coding.

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 element support

One of the great things about HTML5 support in Dreamweaver CS5.5 is that the support really permeates the entire program. It's not limited to just the code environment and the code hinting that I was showing you in the previous movie. Anywhere that you can interact with an element, you're going to find that support for those HTML5 elements and attributes. So in this movie, I want to show you that HTML5 support while we're in say Design view instead of Code view. This is going to be particularly helpful for those of you that really like to work in Design view rather than hand coding.

So I have the contact.htm file open from the 02_03 folder, and one of the first things that I want to do is talk about what we're going to be updating. So this is the same page, actually, that you worked on in the previous exercise. There's just a little bit more there. So the structure is exactly the same. If I click inside these elements, you can see, there is our rapper, there is our secondaryContent, there is our mainContent, there is the mainHeader. So the same structure, there is just stuff inside of it now. So in Design view, but with Live view turned off, I am going to scroll down and find our form.

You may have to scroll over a little bit because Dreamweaver's Design view doesn't render this all that well. That's okay. We'll turn on Live view so that we can preview what this form is going to actually look like when we're done with it, but we just need to access the form elements right now. They don't need to be really pretty. We just need to be able to select them and work with them. So the first thing I am going to do is select our first text field in our forms So again, if you just scroll down, you may have to go over to the right-hand side, but just underneath the mainContent, you want to find this contact form. And I am going to select the first element on the page, which is the Name element. And you can see I have this Personal Information legend obscuring that, but it's okay. All you have to do is select that first form element. Okay.

So I am going to use the panel that doesn't get a whole lot of attention in Dreamweaver and that is the Tag Inspector panel. This is a really cool panel, because if you select an element on the page in Design view, you're going to see all of the properties set for that particular element, and then you're going to be able to set those properties as well, all without ever having to go in and manipulate the code yourself. So I can see maybe a little bit more of this. I am going to collapse the Files panel, and I can see that again I have some category views here. I can view a list view of all the properties or a categorized view, and just to make it a little bit easier to find things, I am going to stick with the categorized view. And again, I am just going to make sure I have this form element selected. Okay.

I am going to go down to the Uncategorized and open that up, and there are a lot of new HTML5 attributes that support forms, and one of those is placeholder. So if I look down here, I can see that placeholder is currently empty. What placeholder allows you to do is have placeholder content in the form that offers a hint to the users as to what type of content goes there. So I am going to click inside placeholder and I am just going to type in first and last name and hit Return. Now, of course we're not going to see anything rendered differently on our screen, but as soon as we preview that in Live mode, we should see that placeholder data.

Now, another thing I want to do is I want to make this required. HTML5 has a required attribute that's basically a Boolean value; it's either yes or no. So directly underneath that, I am going to find required, click in the value area, and I am just going to grab the pulldown menu and choose Yes. So while sometimes you have the option of typing in a value, other times you are going to have specific values that you can set by using that pulldown menu. Now, you'll notice that as soon as I do that, I see this little red line show up over here indicating that this form element is required.

I just wanted to point out that that's CSS that I've written. Form elements are automatically going to get that little red line on the right-hand side. I just wrote that CSS to let me know when that attribute has been applied and when it hasn't. I want to go down to the next element, which is Email. Now, in addition to using say placeholder or required attributes here, I want to actually change the type of input element that this is. So the first thing I am going to do is just set placeholder, just like we did before, and I am going to type in 'valid email address', and hit Enter. And once again, I am going to make that required by choosing Yes.

But I also want to come up to this General category, and for type, I am going to change that from text--once again grabbing the pulldown menu--to email. So this is a new HTML5 input type. And what email is going to allow us to do in supported devices, like mobile devices for example, when you click on this text field, you might see the keyboard change. For example, the @ symbol might come up because it knows this form element requires an email address. So we're just going to keep going. I am going to go down to the Phone one, and here I am going to change its type from text to tel, which is telephone.

Once again, I am going to go down to Uncategorized and I am going to change its placeholder to 'optional phone number'. Obviously, because it's optional, we're not going to make it required, so we're just going to leave that blank. And then finally for Address, I am going to grab that and change required to Yes. So these HTML5 attributes are available to us right in the Tag Inspector. We can also take advantage of them in other ways as well. For example, if I grabbed Zip Code and did Ctrl+T on the PC, and Command+T on the Mac, I get the Quick Tag Editor.

If I wanted to set a required value there, notice that my code hinting is available to me right here using the Quick Tag Editor. I'll just type in 'req'. There is required. I hit Enter. And I can either give this a value, or actually, one of the things that you can do is simply not pass a value. Just the presence of the required attribute assumes it's true, and now we notice that that's being listed as required as well. Now, I am going to go ahead and save this file, and I am going to switch over to Live view and scroll down to see the form.

And we can see not only our required form elements, but we can also see the placeholder data that we put in as well. So there you have it. Whether you're a fan of hand coding or a fan of using these Dreamweaver aids like the Tag Inspector or the Quick Tag Editor, Dreamweaver's HTML5 support is going to make it a lot easier, no matter where you're working in Dreamweaver, to create and structure your HTML5 content.

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

Notes cannot be added for locked videos.

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.