Click on any phrase to play the video from that point.
[ADOBE DREAMWEAVER CS5.5 MULTISCREEN AUTHORING]
Hi, I'm Scott Fegette, senior product manager for Dreamweaver.
I wanted to talk a little bit about Dreamweaver's specific
multiscreen authoring features today.
So we've got a website here.
This is a standard website, and it's very common today to have clients come to us
and say, "I just looked at my website on device X, and it just didn't look right."
"Is there anything you can do to help this look a little bit better?"
First up, we can see that this is definitely built for a desktop site.
It's got a nice wide three-column layout.
There's a lot of things we may want to do, but first and foremost
we just need to set the project up to work this way.
So the Multiscreen Preview panel is how we get started.
By kicking in to the Multiscreen Preview panel,
you can quickly get three different resolutions--desktop, tablet, and phone--
and view each of these resolutions appropriately as we add CSS 3 media queries
to actually separate these interfaces and make them more specific.
So what we want to do is first jump in to the Media Queries dialog
and take a look at what's here.
CSS 3 media queries let you simply give a different style sheet
to a browser based on certain rules.
In the case of Dreamweaver's feature here, we're mostly looking at screen width.
So based on screen width, a different style sheet will be applied
based on what type of device you're using.
We have the ability to write media queries just to the document,
so it's just really quick and dirty work.
Or if we plan on doing a lot of work in our site around multiscreen development,
we can click the sitewide Media Queries file and have these saved
to where you can share them and reapply them across different files.
If you want to just get started quickly, just click the default Presets button,
and you'll get the phone, tablet, and desktop resolutions set up.
From here, selecting each one of them will let you then add specifics.
We start out with basically 320 pixels is the max width for phone,
768 pixels is the max width for tablet, and desktop is anything 769 pixels and above.
From here let's just go ahead and attach some CSS files to each of these.
So we've already created some. I'm going to go ahead and choose one for my phone.
Let's jump in to the CSS area, the mobile CSS.
We'll attach that to our phone media query.
Let's attach the tablet one.
Click Use Existing File, tablet.css. We've attached that.
And then let's go to desktop, and we'll choose the large file
that we are using for our basic CSS right now, which is main.css.
Once we attach these, we've basically set Dreamweaver up
to now let us work with each of these resolutions independently.
So once we've set up the project, we can come back in to Dreamweaver,
and now we can start building out CSS appropriate
for each of these screen resolutions.
So right now you can see we're still at full size,
so we're not exactly getting the benefit of media queries.
There's a number of ways you can actually preview
what your multiscreen res looks like in Dreamweaver.
The main way is the Resolution Management menu down here
at the bottom of your window.
From here you can very quickly choose a variety of preset resolutions
and quickly snap to those resolutions to see, for example,
what it will look like on a smartphone and maybe what it will look like on a standard tablet.
And you can see we're already getting those very specific CSS interfaces
for each one of these.
This is a really quick way for you to take your site,
get it up and running fast on multiscreen,
and use your existing CSS skills to adapt each of these phone, tablet,
and desktop interfaces to uniquely suit the device you're working with.
We really feel that with these features in Dreamweaver CS5.5
you'll be able to take your existing sites and make them multiscreen aware
in a matter of minutes, if not hours--
a lot easier than it's been in the past.
I hope you really enjoy using the Multiscreen Preview panel.
And by all means, keep posted to Adobe TV channel here,
and we're going to be posting a little bit more workflow tips and ideas
as we go for these features so you can really dig in to multiscreen development more.
Thanks a lot for listening, and we'll talk to you next time.
[ADOBE DREAMWEAVER CS5.5 OVERVIEW]
