Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating new HTML5 documents

From: Dreamweaver CS5.5 New Features

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.

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.

Show transcript

This video is part of

Image for Dreamweaver CS5.5 New Features
Dreamweaver CS5.5 New Features

18 video lessons · 12675 viewers

James Williamson
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
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.


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 "Already a member? Log in

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

Your file was successfully uploaded.

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.