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!

Dreamweaver Interface Overview

  • This section will introduce you to the various components of the DW interface
  • Once you open Dreamweaver, you get the welcome screen
  • Welcome screen:
    • Discuss when this shows & what it shows
    • Describe the various areas in the welcome screen
    • Mention Adobe area
  • The Dreamweaver interface also includes
    • Menus
    • Insert bar
    • Document window
    • Properties - show both the HTML & CSS buttons within this area
    • Windows
    • Tag Selector

Dreamweaver Interface Overview

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
  • Menus 0:43
  • Create New HTML 1:33
  • Design View 1:49
  • Insert Bar and Tabs 2:21
  • Document Window 3:24
  • Properties Tab 4:11
  • Panels 5:05
  • Overview and Summary 5:21

Transcription: Dreamweaver Interface Overview

We are going to now take a look around the Dreamweaver interface and get a feel for all these different little pieces.0000

So, that when I reference the name of a piece in the interface, you know what I am talking about.0007

Let us take a look at the different panels and pieces within the Dreamweaver interface.0013

First of all, I have opened Dreamweaver, I have also gone into the Classic workspace, which is in the listing right here.0020

On the Mac side, it is just over little bit further, and it probably says the word Designer if you just did installed Dreamweaver.0028

We are going to switch it to Classic, so I am in the default Classic mode.0037

And we what we have up across the top of the program are known as menus.0043

This is the File menu, if I click on the word that is the menu I am referencing.0048

If I say go to the Insert menu, I will hover over the word Insert and you can see the menu pops up.0054

That is the menu piece within Dreamweaver.0061

We also have panels available, on the right hand side, and we have a little piece up across the top.0065

If I do not have any pages open in Dreamweaver we do not really have access to being able to see anything within those panels.0073

You can see they are all kind of grayed out down in our Properties, it is completely blank.0081

My CSS style is somewhat hidden all, that means is I need to open up a page.0087

So, just for the sake of us navigating the interface, I am going to, in this middle section, where it says Create new, I am going to click HTML.0093

As soon as I do that, you will see that my panels are now activated.0104

I am going to click the word Design in this menu area, this is known document window section and this is the Design view button that I am going to click.0111

Right now you can see I am in code, and it is showing me the code on the page.0122

And I do not want that to scare you off, let us click Design and you can see my pages completely blank right now.0128

I only want to have one page open so you can see the various interfaces within the program.0135

Now, underneath the menus up at the top of the page, when I am in Classic view I have this feature here and it has a variety of tabs available to it.0140

I have the Data tab, the jQuery Mobile tab, the Text tab and as you move around these tabs you will see different icons located within this bar.0153

And I think when you are new to the program, especially, it is important to have this open.0163

Dreamweaver, by default, wants to put that Insert panel over here on the right hand side, and everything is kind of buried is hard to find things.0171

So, I usually tell people to open up the Insert bar and click on the Common tab.0180

What that means is these are the most common things you would do within the program.0186

That is why I tend to keep it, if I need to move up to another tab I will come back to the Comment tab when I am done.0191

So, this is known as the Insert bar and the various tabs within the Insert bar.0199

Underneath that, we have the document window.0204

And there is quite a few different pieces to this window, but just know that this entire middle section is all known as the document window.0208

The document window has three views to it, it has the Design view, which you can see that button is clicked, and it is just little bit lighter.0217

There is also Split view, and what that does is allow you to see the code at the same time as you see the page itself, within Dreamweaver.0226

I can also click into pure code, so Dreamweaver makes it really easy to move around and be able to see the code at the same time as you are seeing your page.0238

We will go back to Design view, for now.0248

Down at the bottom, we have the Properties tab, and the Properties area down here is known as a contextual menu.0252

What that means is, it changes based on what I have selected in the document.0260

And by default, you can see this all set up for text, so it has Bold and Italic and Bullets and that type of thing.0266

Now, the Properties have two buttons, an HTML button and a CSS button.0281

I will be keeping you in the HTML button throughout the entire course.0288

So, if your Properties area ends up looking kind of funny as you move, it is easy to accidentally bump your mouse and hit the CSS.0293

Just go back to the HTML piece.0302

The right hand side has panels located within it.0306

And I am going to customize those panels later, and go through how to modify those for you.0310

But the panels open up on the right hand side in our Classic view.0317

We have the Insert bar across the top, the document window area, the Properties and some people call these the Properties inspector, and we also have the menus up at the top.0321

So, that is a real quick view of the Dreamweaver interface.0336

Once we get moving throughout the program, you will start to get very comfortable with it.0341

Most people when they open it up are not quite sure what all the icons are and you do not need to worry about it, we will get to that.0346

Just know that we have menus, an Insert bar for inserting things on to our page.0351

We have a document window, a Properties section that changes based on what we select, and we have the panels on the right hand side.0358

That is a quick overview of some of the terminology related to the Dreamweaver interface, itself.0368

As we move forward, you will start to get very comfortable with the interface itself and I will start showing you a few little more details within it.0375

But that is the Dreamweaver CS6 interface.0386