Navigating the new Dreamweaver CS4 interface

show more Navigating the new Dreamweaver CS4 interface provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 New Features show less
please wait ...

Navigating the new Dreamweaver CS4 interface

Welcome to Dreamweaver CS4 New Features. In this title we'll examine some of the new features that Adobe has in store for you in Dreamweaver's latest release. Before diving into the specifics, let's take a brief tour of Dreamweaver's updated interface. We'll need to start by defining a site that's going to hold all of our exercise files. So one of the nice new features is we no longer have a Title bar at the top of program. We have what's know as the Application toolbar and a lot of the tasks that you perform can be done right up in the Application toolbar working right off these icon. So if I go up to the Application toolbar and I go to this icon right here that is our Site icon. If I click the pulldown menu, I can define a new site without having to go through any type of menu structure, which is really nice.

So let's go ahead and choose New Site. Now the New Site Definition dialog box comes up and it's pretty much the same as we had before. We have two tabs, we have the Basic and we have the Advanced tab. The Basic tab acts just like a widget that walks you through defining a new site whereas the Advanced tab lets you just go ahead and enter in your own information and that's what we're going to do. So let's click on the Advanced tab and we're going to name to this site CS4 New Features and you can name it whatever you'd like. If you want to name it something else, that's fine.

We'll go to our local root folder and I'm going to click on the Browse icon and you just need to get it to wherever you copied over your exercise files. Now mine are out on my desktop so I'm going to go to the desktop and find the exercise files. I will select them and then we'll just leave everything else at their defaults and we'll click OK. Now before we get into the new interface and the look and feel of Dreamweaver, let's take a minute to look at our new splash screen. Not a whole lot has changed with the splash screen, but there is one small change. If you notice on the far right-hand side, we have a column that says Top Features videos and these are videos that go into some of the new top features of Dreamweaver, such as Related Files, Live view, Code Navigator. All things that we're about to talk about in this title, but you want to see another video on these, it'll be on Adobe's website. If you click, it'll go, it'll launch it and it'll play the video for you which is pretty cool. So now let's take a look at the new Dreamweaver CS4 interface and we'll do that by opening up a file. I'm going to go over to my Files panel, go to the 01 folder and open up the index.htm and I'm just going to click on Design view so that we see the file in Design view rather than Split Screen view.

Adobe's new look and feel is called OWL, which stands for OS Widget Library and it drives the look and feel of Dreamweaver CS4. This new look completes the process of bringing Dreamweaver into the Adobe interface experience. One of the first you'll notice is the minimal look and feel of the program. It certainly is, you might say to yourself, gray. Well, the OWL interface is designed to allow you to focus on the content, not the application, so colors are neutral and toned down. Branding is also minimal and the Document Title bar has replaced with the Application bar.

Let's examine a few of the new interface elements that are going to make your life easier and I want to start by talking about workspaces. We are currently in the Designer workspace and if we look at the Application toolbar at the very top of the screen, we can see that we have a pulldown menu that lists all of our different workspaces. And you can see we're currently on the Designer workspace. Well, there are a lot of preset workspaces inside Dreamweaver now. We no longer have to go to the Window menu to get them. We can just go right here to the Application toolbar, click on the workspace and then grab the one we want. For example, if we were doing a lot of hand coding, we might want the Coder workspace, which gives us our files on the left-hand side and a very large Code view in the center and right portion of the screen.

You may have also noticed from looking at this menu that we can now create a new workspace. So if you like to have a customized workspace where you have certain palettes open and certain palettes closed, maybe certain palettes sized a certain way or docked in a new location, you can save that as a workspace. Let's go back to the Designer workspace for just a moment. You may have noticed one really significant change to the workspace, which is the Insert toolbar location. It is now the upper right-hand corner, docked as a panel, and it's not above the document window as we've had in the past.

Well we can still go to all of our different objects by just clicking on the pulldown menu and going to say our Spry objects or our Form objects, but it's taking up a lot of screen real estate. Well, if I go to the Insert panel menu, I can choose to hide my labels and that gives me just a series of icons. So notice that now is we flip back-and-forth we actually save a little bit of screen real estate by moving this up a little bit. Of course there is one problem with this. If you have a lot of icons, you might inadvertently clip some of those off. So if you're using this without labels, notice that we don't get any scroll bars and notice that I kind of hide a couple of those so you want to be really careful about this type of view.

Now if you don't like where its current location is you can undock it and dock in a new location. To do that we don't have a gripper anymore. We can just grab anywhere. So it could be the tab here. Could be the gray bar. Anything you want up here in the Insert toolbar you can simply click and drag and you can undock it. So can float that as a separate window or if you wanted to you can dock it in an entirely new location such as this horizontal docking above the document window. Now that's more what I'm used to. And notice that if it re-docks horizontally that we get our tabbed structure like we had before. You may say to yourself, Hey, I need to create a new workspace for myself for the Insert toolbar and thank goodness I can do that. Well, Adobe has kind guessed that you guys might like it there better so you notice that we can go to our Classic view and in Classic view the Insert toolbar is there by default. [00:05:28.1 0] So you may want to do that instead. Now, one of the things that you're also going to notice is that if you customize one these existing workspaces, Dreamweaver remembers that. So if I go back to Designer, it's going to say, "Well, in Designer you have the Insert toolbar over here so that must be where you want it." So occasionally you may need to reset these workspaces to their default look and feel and you can do that by going back up to our Workspace icon and choosing Reset and whichever workspace you're in, it'll allow you to reset that and it'll just go ahead and take it back to its default. Notice we go back to a Split Screen Code view and we go back to the Insert toolbar docked in the upper right-hand corner.

Well for the purpose of this title, I'm actually going to work from the Classic workspace because it's my favorite. I really like having the Insert toolbar above everything. I like having the tabs there so that's how we're going to work with that. If you like the Designer view, if you like that up there in the upper right corner, that's fine, no problem. Just continue to use it up there. Another difference you're going to notice right off the bat is the Document toolbar and because we have index.htm opened up and notice that we have the index.htm tab. To the right of that we have the path of it, which is really nice. This used to be up in the Title bar and now it's here. Of course this is going to make sure that we're working on the right file and that we're not working on a back up of this file. Somewhere we can actually see the full path to it. Directly underneath this, which is really nice, we have a couple of related files. Now if I go into Split Screen view, right now I'm looking at my source code and underneath that is the actual file itself rendered out, but if I click on say main.CS the source code is replaced with my cascading stylesheets. Now how cool is that? That is really nice. That's the Related Files feature, and we're going to take a closer look at that in just a moment. I've always really hated the Split Screen view though because in a small monitor size, it doesn't really give you a lot of room to work and it's very hard to tell exactly what you're working on, which is not so nice. Well they've changed some things here and now instead of having just a horizontal Split Screen view- I'm going to go back up to my Application toolbar and I have this little Layout icon and notice that I can now split my code and my Design view vertically, which is awesome. I absolutely love this feature.

Now I can work on my CSS on the left-hand side and see real-time rendering updates on the right-hand side, which is great. And we'll take a closer look at the Related Files feature in just a little bit. All right. Well, I'm going to go back to my source code and click back on Design view to get my file back. One other change that you're going to notice is that just to the right of the Design view icon, we see a little icon for Live view. Now Live view is new in CS4 and before if we were working on dynamic pages, we always had sort of a dynamic page Live view. So we could see instead of a placeholder data, actual data on the page, which was nice. But we could never really see JavaScripts working or our CSS working in a Live view.

Well now we can. If I click on Live view, the preview window changes and all of my layout elements go away and I just see my layout. Notice that the CSS-based rollovers that I have now work and if I scroll down, I've got another CSS menu down here and this works as well. So any JavaScript that I've got going on, all those things work. Again this may be a little bit of a cramped view in smaller monitor sizes so we have a really nice feature. I can hit F4 and that's going to hide all of my panels and give me kind of a nice little preview mode. Now if you still want to do work, you can still work in Live view. There's nothing wrong with this. If I scroll over to the right-hand side I've got a little gray bar over there and if I scroll over then hover over that, the panels that I have docked will fly out and you can use these panels and do whatever I need to do with them. I can flip back and forth between different panels and then when I roll back off of them, they'll go ahead and hide again. So if you would like to work this way, you could certainly work this way.

And hitting F4 brings all of your panels back, which is really nice. So if you do want to save a little bit of screen real estate with this you don't have to have the panels fully expanded the whole time. Notice that right up here at the top of my panels I have this little Collapse to Icons and if I click on that, I'll get just solely icons. I'm not going to get the full panel itself, which is really nice, and I can further collapse that down so that I now simply just have icons and no labels at all. So you can expand this out so you get all the labels or you can collapse that in so you just have icons. Now if I want to use any one of these individual panels, I'd just simply click on the icon.

It expands the panel out. I get to use it and do whatever I want to do. I can click on the icon again, and it'll collapse it again. And of course anytime you want to go back to a fully expanded panel view you simply click on these double arrows up top. It expands the panels back and you can go back to working. So maybe you just want save a little bit of screen real estate for a little bit of time and then expand them back out again when you're done with that. Well, now that we've gotten a peek at what Dreamweaver CS4 has in store for us, we'll explore these and other new features in a little more detail.

Navigating the new Dreamweaver CS4 interface
Video duration: 10m 11s 1h 58m Intermediate


Navigating the new Dreamweaver CS4 interface provides you with in-depth training on Web. Taught by James Williamson as part of the Dreamweaver CS4 New Features

please wait ...