Click on any phrase to play the video from that point.
[ADOBE CREATIVE SUITE 5.5 WEB PREMIUM]
[Greg Rewis] Hi, I'm Greg Rewis, Principal Evangelist at Adobe.
I'd like to talk to you about Creative Suite Web Premium 5.5.
Now, unless you've been living under a rock,
you know that a lot of things have changed on the web, and a lot of things have changed
in our flagship product Dreamweaver CS 5.5.
I'd like to talk to you about a few of those things.
How many of you have heard of HTML5 or CSS 3?
I'm sure every single one of us.
And, in fact, I'm sure our clients are all banging down the doors
asking for an HTML5 website,
and Dreamweaver can help us out.
Let's take a look at our new document dialogue,
where we can see that we have a list of starter layouts
that we introduced back in Creative Suite 5,
and shortly after the release of Dreamweaver CS 5,
we introduced the HTML5 update for Dreamweaver.
And this added these 2 new HTML5 based layouts.
Now, I want to just point something out.
Again, I'm sure that a lot of you are being asked to create HTML5 documents.
Well, let me let you in on a little secret.
You can choose any one of the starter layouts that we have in Dreamweaver CS 5
and still make it an HTML5 document,
by simply choosing the HTML5 doc type.
But if we are wanting to go all out and use those new elements from HTML5,
we'll begin by selecting one of these two starter layouts--
either the 2-column or the 3-column layout.
Now, I guess first we need to decide what it is that we're going to be building,
so let's take a real quick look
at the copy that was delivered by our designer.
As we can see, this is a pretty complicated copy, if you think about it.
Now, at first glance, it's just a 3-column layout,
but if we look closely, there are a lot of things that we're going to have to tackle.
Things like transparency, rounded corners,
a native video, things that aren't quite sitting straight,
like the little wine-tasting badge in the upper right-hand corner.
These are all things that we're going to solve
through HTML5 and CSS 3.
So let's head back over into Dreamweaver, knowing that
it's probably going to be the 3-column layout that we're going to use.
So I'll simply begin by clicking on that HTML5 3-column layout,
again, remembering to choose my doc type set to HTML5,
and specify where I want to put my CSS.
Now, for me, I'm just going to start with it in the head of my document,
so that we can take a look at it together more easily,
and then, at the end, I would go ahead and move that into an external style sheet
to use among all the other pages that I'm building in the site.
Creating this particular page, you can see that we have some starter instructions
to let us know sort of how these pages are put together.
We can see that we've even provided some basic links--a navigation area over here.
But if we take a look behind the scenes in the source code of this document,
you're going to see that this source code is now
actually using these new HTML5 elements.
And again, this is because at the very top of the document,
we've specified that this is an HTML5 doc type.
Now, yes, this is the HTML doc type--
short, concise, and to the point.
It's simply HTML.
Now, going back down to those new elements,
I want to just toss out a little bit of information for those new elements.
As you can see, I've got all of my CSS there.
It's nicely commented, so that we know what is going on.
And when I get back down to these elements, just a little word of information as I point out
that we have a nav element here.
Obviously, very obvious what a nav should do.
We have a header element here--
obvious as to what it should do?
Perhaps, but with HTML5, it's all about the semantics of the elements themselves.
So while we do have a header in our document,
and would typically think that well, a header goes at the top of the document,
we can use the header element basically anywhere in the page.
We actually have a footer element as well,
all the way down here at the bottom, and that footer element could go
in a different place.
It doesn't have to be at the bottom of the document itself.
It might be at the bottom of an article,
because, yes, an article might have footer content,
or it might also have a header content.
So just remember, you can mix and match these to really semantically markup
what the elements mean in the context of the page.
Now, for us, we're probably going to want to do a little bit of moving things around,
so I'm going to take my nav, and I'm just going to move that on up into my header element.
And then I've got a sidebar with some asides inside of it.
And an aside, you can kind of think of as an element
that belongs to the document, but could potentially be removed from the document
without harming the meaning of the overall document.
This aside--maybe we actually want to move it outside of the sidebar itself.
Again, we can change the order to match what it is that we are looking to design.
Now, once we've got everything arranged the way that we want,
it's a real big question--
what browsers are going to actually support these HTML5 elements?
The good news is--how about all of them?
Well, that's a little white lie.
All of the new modern browsers support HTML5,
so we're talking things like Firefox.
And we're talking things like Safari and Chrome--they're already embracing HTML5.
Opera--also embracing HTML5, but what about Internet Explorer?
Well, there's some good news.
Internet Explorer 9 supports HTML5 and does it really well, in fact.
I'm sure you're thinking what about all of those other older Internet Explorer browsers?
Well, we've got you covered there as well.
You see, because in this document, right up here at the end of head section,
we actually have a little comment in there.
This is an Internet Explorer conditional comment.
In other words, read only by Internet Explorer.
And it simply says "if less than Internet Explorer number 9,"
so that means, of course, 8, 7, and 6--they're going to read this
and do the instructions right here in this line.
This is simply a script tag linking off to a piece of Java script
that was written by Remy Sharp to help enable Internet Explorer 6, 7, and 8
to understand these HTML5 elements.
So that means that the way this page looks in Dreamweaver's design view--
when we turn on live view, is actually rendering the web kit--
the web standards version of the page.
It's also going to look exactly like this over in Internet Explorer 9,
and through through that little Java script, 8, 7, and 6, as well.
So that means we can begin building with HTML5 elements today,
and Dreamweaver has full support for not only rendering these elements in live view,
but for coding them in the code itself.
And I'll show you that in a future demonstration.
For now, this is Greg Rewis, saying thanks for watching,
and please be sure to follow this channel on Adobe TV
or check out the other sections on adobe.com
about new and exciting things that you can find
in Dreamweaver CS 5.5.
[ADOBE™ TV - tv.adobe.com]
