Sign In | Subscribe
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

Bookmark and Share

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 Style Tools

  • Dreamweaver offers tools to assist you when working with CSS
  • Those tools are the Code Navigator & Live View with Inspect
  • Working with the Code Navigator
  • The Code Navigator pops up in Design View automatically once your cursor resides on content for 2 seconds
  • When it appears it looks like a ships wheel
  • You can click on it once it appears to see the CSS rules where your cursor is located
  • Click in the line for the H1 tag in index.html and click the code navigator for the h1
  • You will see the CSS rules shown
  • Notice how it lists the CSS rules that apply to what you have selected in the document window
  • Working in Live View with Inspect and Live View
    • Live View with Inspect allows you to visually see which CSS applies to the content you have selected
    • This view offers a visual way to view the box model within CSS
  • Those are the tools that are available within Dreamweaver to assist with CSS

Dreamweaver Style Tools

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
  • Code Navigator 0:30
  • Enable/Disable Styles Option 3:50
    • Comments Out Style Rule
    • Enable/Disable All
  • Live View 6:37
    • Live Code
    • Inspect
  • Summary 10:10

Transcription: Dreamweaver Style Tools

I now want to familiarize you with a few of these style tools that are built into Dreamweaver that can assist us when working in CSS.0000

There are actually three different pieces to these, and I think you will find them very helpful, especially when you get to the positioning piece.0012

But there are times when I use them specifically for formatting, as well, so I want to address them now and show you how to work with them.0021

Let's take a look at the first one.0030

If I put my cursor in a page (and right now, I have the specials.html open to use as an example--from the Course Files) somewhere (and you have probably noticed this already, working in Dreamweaver), after two milliseconds, what happens is: this little looks like a ship's wheel...shows up, and that is known as the Code Navigator.0033

What the Code Navigator does: if you click on that, it shows you the styles for exactly where your cursor is placed in the page.0063

In other words, my cursor is in this Heading area for each one of our specials that are being listed on the Specials page; and so, if I click on that, here is the external style sheet.0074

But if I hover over each individual rule within that style sheet, it pops up the information.0089

The idea behind this is: you don't always have to have your CSS Styles open...and Browser Lab popped open on me, so I am going to right-click and close that.0097

I am tending to find that is coming open a little bit; that is actually a service that has been discontinued, so that is not a panel I want to have open, taking up space, within my panel structure.0110

I don't have the CSS Styles panel open, but I want to see what the styles are that are applying to this text: I put my cursor in that line; after a length of time, I can click on this, and if I hover, it shows me all the properties and values for the various rules.0124

There is a class applied; so if I move off of this, you can see, there is a p and an li rule applying to this text, and then there is also a class.0144

I know it's a class, because it has a dot in front of it.0155

I hover over the class; it shows me the properties and values for that class; I hover over the tag information, and it does the same for that rule.0159

Now, down in this area, it shows you how to pop it up automatically; I never disable this--you just kind of get used to moving your cursor around to get off of that little navigator.0169

I think you will find it a very handy one when you are working in Design View in Dreamweaver; this is a Design View feature.0185

Put your cursor where you want it--that pops up; you click on it, and here is the information for the styles for that particular text.0193

If I go up here, I should have an H1 in my rules.0204

And as I said, you can always follow the instructions in this bottom-left corner of this dialog, if you don't want to have to place your cursor in there and wait for a minute.0211

That is the Code Navigator; it is a very handy feature, especially if you don't tend to have your Styles panel open.0222

Now, another tool that is available to you is the ability to enable or disable styles; and this one is right in front of the property.0230

So, let's say I want to determine what my sentence here would look like if I didn't have something specific turned on.0242

I'll select the class that is applying to that text, and then I can click on Color, and you can see, it turns off the color; I can change the font family, and now it is default; I can even change the font size.0251

Now, since we are using 1 em as our unit of measure, our font size is not going to change at all; basically, 1 em is the default HTML sizing; so that one I will turn back on.0267

How about the bold or not?--you can see, the bold turns on and off.0281

When you get to the positioning piece, this Enable/Disable really becomes valuable; for the formatting, it is a nice way to be able to determine if you want to see it or not, without having to dig around in the style sheet and add comments to do it.0286

Now, if I go in, and I have all three of these disabled, what it does is put a comment in my CSS file; so let me show you that.0302

If I scroll up to where this is located within my Styles panel here, you can see, it gets this Disabled little piece; so this is in my external style sheet, because I am using an external style sheet on this page.0315

If you ever see Disabled up there, that means that you selected to disable that property within the Styles panel.0331

Now, watch what happens when I enable it again: I'll add back in the font family--you can see, it's no longer light grey.0342

What that is doing is putting the content inside CSS comments, and it is also adding the word Disabled.0351

Now, it can get to be a pain, if you end up turning off a whole bunch of these at one time; and what you can do, instead of having to click each one--if I right-click the class itself, notice we have this Disable All or Enable All.0359

I'll click Enable All, and what it does is go through and re-enable them for me.0377

So you can see, we no longer have any comments in our specials code; so that is known as the Enable/Disable CSS property piece.0382

I'll go back to Design View.0393

Those are two of them: now, there is one other tool that I am going to show you, and it is known as Live View, and you have to be in Live View in order to use this one.0396

I'll click on the word Live; and what Live does is show me within Dreamweaver what the page would look like within a webkit-type browser.0408

Now, the webkit-based browsers (at least, as of right now) are Chrome and Safari; Google Chrome--Google is going to be moving away from the webkit base (and basically, that means: that is the code that they used to start creating their browser, and then they customized from there).0421

But the idea is: in Dreamweaver CS6, this is a full webkit browser built into the program, so I can click Live View to get somewhat of an idea of what my page would look like in the browser.0441

But it certainly does not take the place of our preview in the browser piece; but just be aware, you can do that if you want a quick look and don't want to have to bother going out to a full-fledged browser.0458

Now, when I turned on Live here, it also gave me two additional buttons: Live Code--what it does is: it puts your code into this yellow color, and that is a debugging tool...0470

What it is showing you is the live code that is occurring in the browser right now.0485

That is a little more important if we are working in Javascript than in HTML or CSS; so, you probably won't use Live Code much; so I'll click that off.0492

But what you can do is click on Inspect; and what happens in Inspect (and I'll go over to Design View) is: as I move around Inspect, you can see, it is hovering over different pieces.0504

What that is doing is: whatever I hover over, it is showing me the CSS for all of that; and what I am going to do is: instead of being in the All button in the CSS Styles panel, I am going to move over to the Current button.0519

And watch this as I move around: what it is doing is showing me the current styles that are being applied to whatever I am hovering over.0536

So, as I move, each piece of content is going to show me different information within this area.0548

Here is my p; and when I hover over it, watch the Tag Selector down here: this is a nice method to use for figuring out what tags apply to what you are doing.0555

So, when I hover here, notice, it shows the H2 in the Tag Selector; and the Styles panel gives me the styles for that H2.0571

This is a handy feature; but if I click off of Live View, you can see, those two buttons (Live Code and Inspect) disappear.0580

You do have to turn on Live View, then move over to Inspect, and then move your mouse around the content you want to inspect or take a look at; the Styles panel displays the current styles that are applying if you are in the Current button.0590

Those are a few of the tools that Dreamweaver offers to help you with your CSS styles, whether they be formatting or positioning.0610

The first is the Code Navigator, which you simply click and hold it there for a second, and that is this little icon to click on.0620

We also took a look at the Enable/Disable feature in the CSS Styles panel; and that shows up in front of the specific property.0630

And then, we took a quick look at Live View and the Inspect button that becomes available when you are in Live View.0640

If you are in the Current selection within the CSS Styles panel, as you hover over content, the Styles panel displays the styles for that content.0649

Those are three different types of tools within Dreamweaver to assist you with working with CSS.0661

Thank you for watching; see you in the next lesson!0669