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

Interface changes

From: Dreamweaver CS5.5 New Features

Video: Interface changes

As you might expect with a .5 release, there aren't a lot of interface changes from CS5 to CS5.5. The majority of the changes are small and are centered around additions to menus or dialog boxes. I'll point those out as we cover those features they relate to a little bit later on. Now, there are, however, a couple of changes that you're going to notice right away, especially if you didn't install the HTML5 pack, which later became the 11.0.3 update. So let's go ahead and take a look at those. So I am going to start with the CSS Styles panel.

Interface changes

As you might expect with a .5 release, there aren't a lot of interface changes from CS5 to CS5.5. The majority of the changes are small and are centered around additions to menus or dialog boxes. I'll point those out as we cover those features they relate to a little bit later on. Now, there are, however, a couple of changes that you're going to notice right away, especially if you didn't install the HTML5 pack, which later became the 11.0.3 update. So let's go ahead and take a look at those. So I am going to start with the CSS Styles panel.

I have the index.htm file open from the 01_01 folder. And the first thing I am going to do is just give myself a little bit more room, so I am going to go over to the Files panel, double-click that tab to collapse it so that we can see the CSS Styles panel maybe a little bit better. Okay, I am in the All view, and inside the All view I have three different views of the properties. So these properties that are listed here, I have three different ways to view those. Now that's the way it's always been, so this isn't a huge change. But if I go down to these three icons, they represent showing a list of just the properties you have set for a specific rule.

Your middle option shows a list view of all of the properties, with the properties that you have set at the very top. And on the far left side there's a category view. Now before we go into that category view, I want to show you something that's a little, minor change that's really, really cool. With the addition of CSS3 support in Dreamweaver, a lot of the properties you're going to be dealing with have shorthand notation or maybe have multiple values attached to them. And in the past, if you were going to use the CSS Styles panel to populate those, you would basically have to go ahead and know the syntax and type those in individually.

Well, now if you're setting any property that has that type of a dialog, Dreamweaver gives you a dialog box. So you can come right over here, click this little sort of Plus icon, and you get a whole dialog box that you can go ahead and enter those values in, without really having to have that syntax memorized or deal with any lengthy syntax within the dialog box, which is pretty cool. So that's a really neat little feature. Now if I go over to the far left icon, the Show category view, here I see sort of a more obvious change. In the past, we've only had about six or seven different categories of properties, but now with the addition of CSS3 support in Dreamweaver, they had to reorganize all of the properties, and we can see there is a lot more categories.

So things that just weren't even supported in the past, like multi-column layout, now has its own category that you can go in and set properties for. We even have support for vendor-specific properties, like Mozilla, Microsoft, Opera, and WebKit. So if you need to access those vendor-specific properties, they are right there for you as well. Now, I feel that I need to point out here that this particular dialog box is the only place that this reorganization and new list of categories is visible. If I double-click a rule to go ahead and open that up in the CSS Rules dialog box, you'll notice that we're back to the old categories.

And that change just hasn't propagated itself into other dialog boxes yet, although I would assume that later versions of Dreamweaver will probably have the same Category view that the CSS Styles panel has now. So I'll just click OK to go ahead and close the dialog box. And the next thing I want to talk about is the Multiscreen Preview panel. Now again, if you installed the HTML5 pack or if you installed the later update, the 11.0.3 update, you already have this as part of Dreamweaver. But if you didn't, it's brand-new in CS5.5 as part of the actual base install.

So in the Document toolbar right up here, I have the Multiscreen Preview button. And if I go ahead and click that, it's going to give me a floating preview of my current page in three different views, and it's all based on screen resolution. So this is perfect for viewing sites that are optimized for mobile devices and tablets and desktop and sort of seeing what that design looks like all at the same time. Now we're going to talk about this in a lot more detail a little bit later on as we have a movie that talks specifically about the Multiscreen Preview.

But since it wasn't part of the original CS5 interface, I wanted to point it out here. Now an interface improvement that's related to the Multiscreen Preview is the new resolution management improvements that they've added to Dreamweaver. Now in the past we've always been able to say resize the current Design view and have Dreamweaver let us know what our current resolution was. And we even had the ability to set those and change them, but they've beefed this is up considerably, so I want to take a closer look at it. If I go down to my status bar, I can see the current window size.

Now yours is probably going to be different than mine because it's based on the actual viewport size currently in Design view. You'll notice, for example, if I collapse the Properties Inspector, it updates and changes to reflect a new size. So if I click on that, I get a list. Now, we've gotten this list in the past, but what's really neat about this is that there is a whole new list of resolutions here that have been targeted for specific devices. Now, we also have the ability to edit those sizes, so if I click on Edit Sizes, I go right into my preferences, and I get to go ahead and create new sizes or rename these or even remove them if I so choose.

Now in addition to those fixed resolution sizes, you'll notice that we also have orientation, and we can look at the page as landscape or portrait. So if you're previewing for mobile devices or tablets, this is a really, really useful feature. You can check and see, in Design view, what your page is going to look like when the device is oriented towards portrait versus landscape, and you could do all of that without having to preview that in the browser or the device, so that's really, really cool. We also have access to any media queries that might be on the page. Now, if you're not familiar with media queries, we're going to cover them in just a little bit.

But if you already have those defined in your page, they're accessible right here in your resolution management. So that's really cool. You can toggle those on and off, and you can choose which one you're going to view. Let me go back to the Landscape. Now you can access this dialog in a couple of different places. One of them I've already shown you, right down here on the status bar. But you can also access the same dialog box right here in this little pulldown menu, right off the Multiscreen icon. So you can grab that there as well and you can toggle Multiscreen Preview on and off there, or change any of these sizes.

You can also access it by going to the menu, so I can go to View > Window Size and I get the same dialog box. Now, on certain screens you're going to be able to see your entire page all at once. In fact, your monitor might be so large, or your resolution might be so high, that you can see not only your page but some pasteboard areas on the outside of that. If that happens to you-- and I am going to go ahead and just change that to a portrait orientation so I can see some of the pasteboard right here--you can right-click or Ctrl+Click that and you'll get the exact same option as well. All right, let me go ahead and set that back to landscape.

And I want to talk about one additional interface change. If I go up to my Insert panel-- and you'll notice that I am looking at the Insert panel in Classic view right now which goes ahead and docks it up top as a toolbar. That's kind of the way that I prefer to look at that, but you could also see that there's a floating panel over here in your panel dock as well. But if I look closely, I'll notice a category that wasn't there before, which is jQuery Mobile. And if I click on that, I have a whole new set of icons dealing with jQuery Mobile UI elements, like radio buttons and textboxes and collapsible panels and list views.

So if you're building mobile applications, the jQuery mobile framework is now integrated into Dreamweaver, and we even have visual tools that are going to help us build those mobile application interfaces. So when we talk about mobile development a little bit later on, we're going to go deeper into how jQuery has been integrated into Dreamweaver and how you can use it to develop interfaces for mobile applications. So, there you have it. As you can see, if you comfortable working with Dreamweaver CS5, the interface is almost exactly the same, so you're not really going to have any trouble finding your way around or working the way that you're used to.

The interface changes are minor and are just reflections, basically, of either new capabilities or support for emerging technologies.

Show transcript

This video is part of

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

18 video lessons · 12697 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.