Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Dreamweaver CS5 Essential Training, Adobe Certified Instructor James Williamson explores the tools and techniques of Dreamweaver CS5, Adobe's web design and development software. This course covers both the ins and outs of Dreamweaver, as well as recommended best practices for crafting new web sites and files, the fundamentals of HTML and CSS, and how to ensure clean and accessible code. The course also includes how to use tools in Dreamweaver to create and style web pages, manage multiple sites, and add user interactivity with widgets and scripting. Exercise files are included with the course.
In any program as complex as Dreamweaver, one of the biggest challenges is keeping the workspace organized. There are multiple panels, views and panel groups to keep track of and access when needed. In this movie, we'll take a closer look at managing and arranging those panels so that you're taking control of the Dreamweaver workspace. So here I just have the index file open as the sample document, but really, our focus is on the panels in this particular movie. Now, one of the easiest ways to arrange panels is to use the preset workspaces.
If I go up to my Application toolbar, I can see that I have a full listing of default workspaces. So I can go to the Classic workspace. Notice that it rearranges a lot of my panels. I can go to the Designer one, which is the one we're just looking at, Coder one. There is even a workspace for Dual Screen setup if you want to move all of your panels to one monitor and have your file working on another. So that's a very quick and easy ways to arrange those panels, but how do they actually get them in those locations? Now, let's take a look at what we can do to modify and work with these different panels and panel groupings.
Now, one of the first things you'll want to point out is that you're free to dock and undock these panels as much as you want. You'll notice, for example, that here I have a panel called AP Elements. If I click on that tab, it's going to bring that tab to the forefront. So when you're working with these groups, simply clicking on the name of the panel activates that panel and hides all the other panels within that group. Well, you can create new groups or rearrange groups anywhere that you want. I can take this AP Elements panel, for example, and by clicking on this tab and holding the mouse down, I can drag it away from that group and even away from that panel dock, and float it as its own individual panel.
Now, when we open up Dreamweaver for the first time, we don't see all of the panels that are available to us. In fact, if you go up to the menu and go to Window, you're going to see a full listing of all the panels that Dreamweaver has to offer. The ones with the checkmarks beside them are the ones that are currently active. So if I chose the Tag Inspector, for example, notice that it opens up the Tag Inspector. Most panels do have a default location, so the Tag Inspector opened up right here beside the CSS Styles panel. Now there is nothing to prevent me from taking that and undocking that as well.
Now, if you have two panels, and you want to combine them within a group, again, you simply click the tab, move it over to that other panel, and you'll see a nice blue outline all the way around it. As soon as you let go of that, we now have a new panel grouping. Now, panel groupings can either be floating panel groups, like this one, or they can fit into this area right over here on the right-hand side, which is what we call a panel dock. The panel dock is a collection of different panels sort of all arranged in this vertical row. There are a very nice and efficient way of arranging your panels, and saving a good bit of screen real estate.
I'm going to go ahead and take this panel grouping. Notice that I'm clicking on the top sort of darker bar of this. I'm just going to move that over here into my panel dock. Notice that I can either add it to an existing set of panels - this is the blue outline that I get all the way around the CSS Styles panel - or if I just go up slightly more, notice that I get a blue insert line between those panels now. If I let go there, now our new group is right here in its own grouping, but still within that dock.
Now, your dock can get crowded pretty quickly, so one of the ways of sort of reducing the space that different panels are taking up within the dock, is to double-click their tab. Notice for the AP Elements panel, if I double-click this tab, it collapses it, and so I can sort of close all the panels that I'm not using to focus on a single panel. If I want a CSS Styles, for example, I can double-click to open that up. I can double-click the Files panel to close it, and now I'm just looking at my CSS Styles panel. So the panel dock is a really nice and efficient way of organizing all of the panels that you need to work with.
Having floating palettes, unfortunately, is not all that effective. Now, what happens if you do get it a little too crowded over here? Well, let's say we want to take out this whole AP Elements grouping. If you hold-down the Option key on the Mac, or the Alt key on the PC, when you click on one of the tabs, instead of taking out an individual panel, you take out the entire group. Well, as I mentioned before, having floating groups really isn't an effective way to tackle your workspace, because you end up with a lot of clutter. But if you've got too many panels in one dock, it's okay to go ahead and create an entirely new dock.
Notice that if I grab this group and drag it all the way over to the left edge of the screen, I get a nice little highlight over here, and when I release, I've created an entirely new panel dock on this side, which I could then populate with as many panels as I want. So you're free to create new docs in different locations, float panel groups all by themselves, or dock everything together in one big group. It's really up to you how you want to arrange these. Now, there's also other ways to save a little bit of screen real estate as well.
If you notice at the very top of this panel dock there are these two little dual arrows right there. That is collapsed icons. If I click on that, it's going to collapse all these panels down to a series of icons. The initial view has the icon and a label out beside it. This is a really handy way of learning what these different little icons mean, so that you know that this icon, for example, represents the CSS Styles panel. Now, accessing that panel is as simple as clicking on the icon. The panel floats out, we're able to interact with it, and we can simply click on the icon again to close the panel back.
If you want to save even more screen real estate, you can place your cursor between the Document window and the panel dock. You get this nice sort of dual arrow, which allows you to move that to the right and collapse that down to a single series of icons. This is an amazingly efficient way to save a lot of screen real estate, but still allow yourself quick and easy access to your panels. Now there is even a quicker way to hide that. I'm going to go ahead and expand these back out from icons, and I want to show you a way to quickly hide all of your panels that might be located within a dock.
If you click F4, all of your panels will suddenly collapse, and you won't even see icons, but you will notice on the right-hand side of the screen where our dock used to be, we do have a gray bar. If I hover over that gray bar, our panels come right back, allow me to access these panels and use them, and then when I mouse off of the panels, they go back to being in that collapsed gray bar state. Hitting F4 again will toggle the collapsed panels back again so they come back, and we can access them. Now, I know that's a lot to take in, but there's actually one more thing that I wanted to show you.
Some of your panels don't work well as vertical panels. Take the Insert panel, for example. I'm just going to go ahead and undock that and float it. The Insert panel allows us to access a lot of objects, such as our Common objects, Form objects, and even common text objects, like building text or adding an Emphasis tag. Now, you have to do a lot of scrolling when this panel is in its vertical state. It actually works a lot better as a horizontal panel. There is nothing wrong with that. And if we grab the Insert panel and drag it up, notice that we can create a horizontal dock, so all the panels can be docked horizontally.
And now the Insert panel becomes a tabbed panel that we can go through and see all of those icons at the same time, which is pretty cool. Now, if you experiment with this - and I encourage that, go ahead and play around with it, move your panels around, dock them, undock them, trust me. You can't break them, okay? You might close the panel and not mean to. You might have too many of them out there, but that's okay, because at the end of the day, you can go right back up to our workspace, which are right here. And you can grab that pulldown menu, and I can choose to reset whatever workspace I'm currently on.
As soon as I do that, it's going to take me back to the default panel layout for that set. So if you guys are experimenting a little bit, things get a little wild, don't worry about it. You can just go right back up there, reset it, and you're going to be in good shape. I hope that illustrates how flexible the Dreamweaver workspace is. Now, you might have said yourself, "Wow, that's a lot of work moving those "panels around. If I get it where I like it, I don't want to have to do that every single time I open up Dreamweaver," well, I'd agree with you, and that's where our workspaces come in. So what we're going to do in our next movie is show you guys how to use your newfound ability to move all these panels around to save your own custom workspaces, and we'll do that next.
Find answers to the most frequently asked questions about Dreamweaver CS5 Essential Training.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.