New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Dreamweaver CS5.5 New Features
Illustration by
Watching:

Interface changes


From:

Dreamweaver CS5.5 New Features

with James Williamson

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.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Dreamweaver CS5.5 New Features
1h 50m Intermediate May 02, 2011

Viewers: in countries Watching now:

This course covers the enhancements to the latest release of Adobe's web design and development software. Author James Williamson examines Dreamweaver's updated support for current Web standards, such as code hinting for HTML5, CSS3, and jQuery, and new W3C-compliant code validation. James also demonstrates the new features introduced specifically for mobile development that allow developers to download, install, and configure native applications for Android and Apple iOS. These features include support for PhoneGap integration, jQuery mobile framework, native binaries, and platform emulators launched directly in Dreamweaver.

Topics include:
  • Creating new HTML5 documents
  • Using code hinting for CSS3, HTML5, DOM elements, and jQuery
  • Configuring jQuery widgets with the Widget Browser
  • Managing media queries
  • Previewing web pages on multiple devices with the Multiscreen Preview panel
  • Configuring mobile application frameworks
  • Building and emulating mobile applications
Subject:
Web
Software:
Dreamweaver
Author:
James Williamson

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.

Find answers to the most frequently asked questions about Dreamweaver CS5.5 New Features.


Expand all | Collapse all
please wait ...
Q: This course teaches us how to create mobile app in the "Mobile App Support" chapter and the app works great. But when we try to upload to android market, it says that the Android Market can't upload a debug/release version. What's wrong with the app?
A: As mentioned in the movie, the Dreamweaver emulator support does not create deliverable apps. It is designed to act as an IDE and debugging environment only. From there it is up to the developer to package and distribute apps to the various app stores.

Take a look at https://build.phonegap.com/. It's an early service dedicated to creating deliverable binaries for multiple platforms. Since it's PhoneGap, it's also the same framework used within Dreamweaver, so Dreamweaver based apps should port right over.
 
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.
Upgrade now


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 Upgrade now

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

Notes cannot be added for locked videos.

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.