Sign In | Subscribe

Enter your Sign on user name and password.

Forgot password?
  • Follow us on:
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

Navigating the Interface

  • The Dreamweaver interface is extremely customizable
  • You can open, close, minimize, collapse, resize, dock& undock panels
  • To open a panel, simply click the panel name
  • To close a panel, double click it
  • You can increase the size of the panel area by adjusting the separator bar
  • You can also control how much space is taken up by the 2 panels in Split view
    • Move code view so less shows

Navigating the Interface

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Modify/Customize Panels 0:44
  • Move Panels 3:53
  • Rearrange Panels 4:42
  • Open and Close Properties Tab 7:13

Transcription: Navigating the Interface

We are going to take a look at navigating the Dreamweaver interface, and showing you how to customize the interface however you like depending upon your monitor situation.0000

Let us take a look at the interface itself.0012

Right now I have Dreamweaver CS6 open and I do not have a page open so some of the panels are all grayed out.0016

The first thing I want to do is I want to be able to open up a page so at least I can see what some of these panels are all about.0025

I am going to click Create new HTML right here and when I do that, it activates the panels for me.0035

So, how do I modify and customize these panels?0044

Well, first of all, you just be aware of these panels on the right, are all accessible through the window menu.0049

If you some reason a panel over there closes or you cannot locate it, this is where you want to come in order to customize and open or close that.0056

I have check marks in front of the panels that are open within my interface.0066

The CSS styles panel is open on the right hand side here.0073

Notice the files panel is open and that one is listed down here.0079

So, you can always check and see which panels are open within the interface in this manner.0085

If it is not open you can certainly open it just by clicking on it and it opens up that panel for you.0091

Now, each one of these panel views are hooked together, so to speak, into a tab group.0099

The idea is, this tab group actually contains three different tabs, the Databases, the Bindings and the Server behaviors tab,0107

Those are default sequences and order with the new panels.0117

If I go up to the window menu notice there is this little bar across.0122

That is a separator bar and that shows you the panel groupings within these tab groups.0128

Now I am in the Classic interface right now, and you can see it says Classic here.0137

What that does is put my insert bar up across the top.0142

And if you ever get into a situation, where your panels, you cannot find them or you cannot quite figure out how to get them back in to place, you can always click Reset classic.0146

What that does is put your panels exactly back to where they were at the beginning of that workspace.0157

So, I have the databases binding and server behavior is still open, it is available on my panel structure, but those panels are not specifically open.0163

First of all I want to close up the panels we will not be using.0176

I am going to right click in the tab itself.0181

Right on the tab that says Adobe browser lab, I am going to right click and say Close.0186

Because this is only one tab, I will choose the Close option and that closes that single tab.0192

I am going to go down to the databases tab down here and the panel is not open but that does not matter, I can right click and say close tab group.0200

What that does is close all three tabs within this area at the same time, so I will say close tab group.0210

What I have opened now are the two most important panels you will be working in almost every webpage you work with.0218

And that is the CSS styles panel and the Files panel.0227

So, how do I dock or move these around?0234

First of all, we have this little area between the two and I can go ahead and click and pull on that to open, to enlarge any of these panels, or close them.0237

Between the panels themselves, there is an area where you can customize moving things up and down.0249

And some panels like this CSS styles panel they actually have their own additional panels right within that area.0256

Now, to close a panel I double click, to open I single click, so you can see double click, single click.0266

I am going to close up my CSS styles panel for now and just keep my files panel open.0275

Now what if I want to rearrange these, I do not like how they are set up.0281

If you want to move a tab out of an area, I can just click on the name, right on the tab and drag it out.0287

Now it is a free floating panel and I can do what I want with it.0296

If I had a second monitor set up I can take all these panels pull them out and move them over into my second monitor as I like.0301

So, you can move these around as well, so that is my files panel, now that I have right here let me show you these icons on the upper right.0310

First of all, the X closes the panels all together and right next to it are these two double arrows.0321

And what that does, is collapse the panel down to make it a smaller size and it gives the name and the icon for that specific panel.0329

If I want to open the back up again, I just click on those other arrows.0340

The right facing arrow open, the left arrow facing close or collapse.0344

That is how I can make them smaller in case my screen real state is pretty limited.0350

That is how I can take them out of the interface over here.0356

How do I get them back in? Well, it is literally the exact same thing, so I click on the tab for Files, I will drag it over and you will see it gets this blue border.0361

What that would mean it is going in with the assets and snippets tabs, if I move it up it would populate into this tab group.0374

I am going to put it back where it was, I am going to highlight that one and when I let go, it always become the last tab within this tab group.0383

I will click on Files and drag it to the left and now, it is the first one, just like I had it originally.0393

So, you can move these around just by highlighting, opening and closing.0400

You can close up a tab by double clicking you can open a tab by single clicking.0406

And you can always access any of these that have closed up on you using the window menu in order to access them.0414

So, that is how you can move around the interface and customize it as you need it and specifically the right hand panels.0423

Now, the Properties area, down at the bottom of your screen, has a tab as well.0434

If I right click, notice I get the same option, closer close tabs group.0438

I can close up my Properties very easily.0444

I do tend to find people sometimes do that accidentally.0447

And also my insert bar up at the top here, as well.0452

What they have done is put the Insert bar as the very first item in the window menu and the Properties is the second.0456

I will click right there to open it back up again.0464

That is how you are going open and close and move and manipulate the panels to your liking.0467

Those are the panels within Dreamweaver specifically the window panels on the right hand side and you can see our Properties takes up the space at the bottom as well and works the exact same way.0475

Those are the panels and how to work with them in Dreamweaver.0489