Click on any phrase to play the video from that point.
[Adobe™ TV tv.adobe.com]
So now let's take a look at what is new in Adobe Creative Suite Design Premium CS5.5
for people that are doing web design.
And, of course, with the web ever-evolving, ever-changing, HTML5
has become a very important aspect of web design for designers,
and, of course, Adobe, providing the best-of-breed tools for your web design work--
HTML5 is a part of that, and CSS3 as well.
So let's take a look at some new things, especially for print designers
who are making that transition over to the web
--what it's like or what would it be like to now do the kind of design work you probably
always dreamed of doing for the web, but it just really wasn't technically possible
until now.
So I'm here in the new Dreamweaver CS5.5,
which is a part of the Creative Suite Design Premium CS5.5.
And what I'd love to do is start from the beginning.
What happens when you want to create a new web page?
What do you do?
Well, let's start with the comp.
In other words, I know that I need to create a web page,
but what does that web page need to look like?
So for that, I'm going to switch over to Acrobat.
I'm in Acrobat 10, and I have a pdf on screen,
that my client delivered
and said, "I want my web page to look like this."
Maybe the designer mocked it up, and kind of thought,
"Hey, this would make a great looking web page."
The problem with this web page is that it is doing all kinds of things
that would be bad in the web of yesterday.
But with Dreamweaver CS5.5, HTML5, and CSS3,
these things are possible today.
For example, you'll notice the banner at the top
looks like it has a transparency in it.
Well, how would you do that before?
You'd have to go into PhotoShop and composite an image together
and it would be a static image that you would put together with that transparency.
You'll also notice that these columns or these borders are rounded.
Again, a concept that is new or didn't exist before HTML5.
So how do we do this in the new Dreamweaver CS5.5?
Let's go ahead and take a look.
So let's go ahead and open up that page from our site,
and, as you can see, it looks very much like the pdf,
but there are some things that need to be addressed.
First of all, I don't see any transparency.
I don't see a lot of things.
I'm seeing all of these lines and borders and things that I probably wouldn't see on the web.
And there is a quick fix for that.
It's actually the Live View button.
By pressing the Live View button, what I've just told Dreamweaver CS5.5 to do
is enable the web kit render.
The rendering engine--the same one that is powering Safari and the Chrome browser.
So with that engine in place, I'm actually rendering this page
the way it would look on the web, but I'm not having to go out to a browser to see it.
I can do that right inside of Dreamweaver CS5.5.
More importantly, because of the web kit engine, I'm able to see
the latest and greatest HTML5 and CSS3 live inside of Dreamweaver.
So I'm seeing the transparency.
I'm seeing the rollovers.
I'm seeing everything the way it would look on the web.
So this is actually live text
just like it would be on the web, so that's not an image.
That's not in PhotoShop.
It's actually the live text in HTML5.
So now, we have some text here that is on a white background.
What I would love to do is make the background for this text transparent.
So with that, I'll go ahead and click on the element for that particular text.
I'll bring up my CSS styles panel.
And with that, I'll go to the properties that control that particular element.
And I can see that that particular element is set to white, so I'll go ahead and click on it.
And, of course, I can choose whatever color I want,
and that is the way we would've done it in the past,
but now I have more options in HTML5.
So, for example, I can click a little fly-out menu here.
And one of the things I can enable is the brand new--
not only RGB, but RGBA or RGB Alpha support.
And alpha--for those of you who are video people--you would know the term
alpha channel, or PhotoShop users would know the term alpha channel
as transparency.
When I enable RGBA, then I can pick whatever color I want.
And not only does it change it to that color,
but it also gives me, of course, the red, green, and blue values.
You'll notice that there is a comma 1 after it, for 100 percent.
That's the transparency value.
So if I go ahead and change that 1 to--let's say-- .6,
to make it 60% opacity or opaque.
Then I get that as my background.
So very cool to be able to do this.
Now, I've gone ahead and tabbed down to the next element in my CSS properties.
And what I'd love to do is change the border radius.
In other words, border radius is a new element in HTML5 and CSS3,
and I can now implement that right here inside of Dreamweaver CS5.5.
So we'll just go ahead and start typing--border radius.
We'll tab over and just tell it how much you want to round those corners.
So I'll say by 10 pixels, and I get a 10-pixel rounded corner.
Now, last, but not least, over here on the right-hand side--
I'll move the panel out of the way, so you can see it--we have this wine tasting area.
And again, in the past, you would have to do that as a graphic and drop it on the page.
But in HTML5, CSS3, and of course, Dreamweaver CS5.5,
this is live, so this text is actually an element
that we can now go in and change right here inside of Dreamweaver CS5.5.
So if I right-click on that element and say go to code,
it will take me over to the coding panel for the CSS stylesheet for this particular page.
And in the code, I can see that element.
But more importantly, I can see the rotation of that element.
So all I have to do to change the rotation--
again, since we're looking at this in the web kit engine,
I would just change the rotation here to what I wanted it to be.
So let's say I wanted it to be 45 degrees, so we can see a nice change there.
And if we move over, so we can actually see it, and move the panel,
we can see that that has now changed to 45 degrees.
Here we'll change it back, so you can see it better.
Once again, we started with 20 degrees.
If we change it to 45,
we can see that it is actually rotating the text live on the page.
Again, we're just changing the CSS3 properties inside of Dreamweaver CS5.5.
Okay, let's take a look at one more aspect of this page
and that is the video.
So, as you can see, we have video,
and this is actually HTML5 video, so using the video tag in HTML5,
we can author this directly inside of Dreamweaver CS5.5.
But there is actually something that is even more important
than working with the native video.
And that is how will this look on multiple devices, multiple screens?
So let's go ahead and put away the CSS panel for a moment here.
And what I'm going to do is click on the Multiscreen button.
And what the Multiscreen preview will allow me to do is preview this layout
from multiple screens.
So, for example, we have the three most popular screen sizes here,
and that would be a phone, a tablet, and down below--a desktop.
Now, when you think about your design, how should your design look
on each one of these screens?
Well, if we look at the desktop design, of course, it should be everything.
It should be the exact representation of the HTML5 page that you laid out.
However, when you go to a tablet, the tablet screen
is not going to be as large as your desktop screen.
So, in this case, things are starting to fall off.
The user would have to scroll back and forth.
We don't want that to happen.
And it gets even worse when we go to down to the size of a phone
because we don't want the user to have to scroll too far vertically,
and we don't want the user to have to scroll horizontally at all.
It's just bad design.
So how can we solve this problem without having to design 3 separate pages?
We can do it with Dreamweaver CS5.5, the new Multiscreen preview,
and Media Queries, which will allow me to attach a CSS3 style sheet
to each one of these displays
So, let's go to our Media queries.
The first thing I want to do is write the queries to the document.
Then I want to add one for each one, so I want to say for my desktop
it will have a minimum width of 801 pixels.
So that means if it's 801 pixels or wider, it will be
most likely a desktop viewer.
And for that, I'm going to go ahead and say that it is going to use the CSS style sheet
called large because it's a large display.
Next we'll add another Media Query called Tablet.
But this time I don't want to set a minimum.
I want to set a maximum.
I want to say that hey, if it's 800 pixels wide,
it's a tablet.
If it's larger than that, it must be a desktop.
So we'll go ahead and choose the CSS style sheet for working with a tablet.
Last, but not least, we'll add one more,
and that's going to be the one for a phone.
So if it's a phone device, and the maximum width for that is going to be 400 pixels.
Again, we'll choose the CSS style sheet for a phone or a mobile.
Now, when we click okay, we'll get a much difference experience
for each one of those devices.
If we look at the phone, that looks like a mobile app almost,
but it's the exact same web content sized appropriately for a phone.
If we look at the tablet, again using the CSS3 properties,
the video gets larger.
The content get wider, but it's, again, appropriate for a tablet.
And last, but not least, of course, the desktop doesn't change
because it is, in fact, larger than the 800 pixels wide.
So with that, you have now seen how designers can get started
with Dreamweaver CS5.5 and take advantage of the latest web technologies
inside your Creative Suite Design Premium CS5.5 and, of course, Dreamweaver CS5.5
to author in HTML5, CSS3 for the desktop, tablet, and mobile devices.
Thank you, and my name is Terry White.
Thanks for watching.
[ADOBE™ TV tv.adobe.com]
