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

Dreamweaver CS5.5 New Features
Illustration by

Creating new HTML5 documents


From:

Dreamweaver CS5.5 New Features

with James Williamson

Video: Creating new HTML5 documents

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.

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

Creating new HTML5 documents

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.

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.