Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- 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
Skill Level Intermediate
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.