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 Educator.com

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!

Working in Code View

  • It is possible to use Dreamweaver as a coding interface
  • When you are in code view you get line numbers and also the coding toolbar
  • You can do a variety of tasks using the coding toolbar including adding comments
  • When you comment code, it is visible on the page only in code view for HTML, CSS & JavaScript

Working in Code View

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
  • Example Page 0:26
  • Coding Toolbar 1:13
    • Apply HTML Comment
    • Remove Comment
  • Properties Area 4:56
  • Line Numbers 5:58
  • Summary 6:08

Transcription: Working in Code View

I want to show you a couple of things with regards to working in Code view, in Dreamweaver and do not get concerned, we are not going to be leaping into the code, right away.0000

But, I do want to make you aware there are a couple of features in Code view that are not available in Design view.0012

And I want to show you how to work with one of them so you understand the Code view piece and what is available for you.0019

So, what I have here is a page open in Dreamweaver and the only reason I did that was because I want to have some code to show you in Code view.0026

Do not be concerned, you do not need to specifically open anything.0036

I am also going to close up this Properties area at the bottom, because the Properties is taking up a lot of screen real estate, as you can see.0041

I will right click and say Close that is how I can close this Properties area and when I decide I want to reopen it, I go up to window and it is the second item in the window.0050

So, In case your Properties, ever closes on you, that is how you can access it once again, using the Window menu and just going to Properties.0064

Let us take a look at the coding toolbar. 0073

Now, I am in it what is known as Design view.0076

I am in the Design button and you can see there is a picture, there is an image, and this is my webpage in Design view, and this is the page we will be working on, for Wanderlust travel.0079

Now, if I click on the Split View or the Split button, right here, next to Design, you will see my screen ends up part Code and part Design.0093

And when I do that, within the Code view, you will see there are some extra pieces on the left hand side.0106

And there are actually two additional things that occur, and that is the piece I want to show you.0113

I am going to click on the word Code, do not panic, this is Code, but it is not a big deal, we will not be working in it.0119

Let me show you how Code view works.0128

If I am in Code view, here, and I select something, you will see, I get this little minus sign over here, and if I click on that, it allows me to collapse code.0132

Once, I get that I have the plus sign so now I can expand code.0145

Let us say you had a bunch of code, 20 lines of code and you wanted to collapse it, so you could see the rest of the code a little bit easier, that is what you do.0151

You select it and click the minus and then you could always click the plus.0161

Now, within the coding toolbar, there are some additional pieces you can use.0168

What do I mean by coding toolbar?0173

It is this first piece, right here.0175

There are a whole bunch of different icons available, within this area, and if you hover over them, each one has a specific task.0178

At since we are not really doing much in Code view, but I am going to do it is just show you something that you may find comes in handy.0187

So, right now I have line 11 selected. 0196

Now, I could go in and select that, and I usually tend to select from the end of a line forward, for some reason, it seems easier for me.0200

But, I could also click the number 11 and that selects the entire line for me.0209

Notice number 12, here takes up a couple lines, and let me put this into Split view to show you.0216

So, number 12, you can see there is nothing listed after it. 0223

If I click the number 12, I have the whole line and exactly that line.0227

Let us say I have decided I do not want to have that in my code, any longer.0232

The other thing Code view or the coding toolbar, specifically, shows you, is these two commenting pieces.0237

If I decided I did not want to have this within my code any longer, I could click on this Apply comment I have in the toolbar.0246

And I could say apply HTML comment. 0256

What that does is comment out the code and you could see it turns like grey.0259

Now, when you do that, I modified Code view, Design view has to refresh and if it does not I can just click in it and you could see that whole upper Nav bar is completely disappeared. 0264

If I want to remove my comment, what I can do is select the whole thing, and when I click this one with the red X it removes the comment for me.0279

Now, I need to refresh Design view again, just by clicking in it and let me do that same thing one more time and show you what the Properties open.0292

If I am up in window and open up the Properties, so I have opened up the Properties area down at the bottom.0301

Let me select that same thing, so I will select line 12 and I will go ahead and apply a comment.0309

Notice what the Properties area shows me, it says I have made changes to the code.0318

What this refresh is going to do is the same thing as us clicking in Design view.0324

It is going to refresh this view to show the change we made in Code view.0329

So, I will click refresh and you could see our Nav bar is gone.0335

Now, what I will do is do that same thing just the opposite.0339

So, I still have it selected and I am going to remove the comment, so I will click the red X, with it selected, I get the refresh once again and I click that or I can click in Design view0344

But, these are known as line numbers and they help you when you are working in code view, it helps differentiate between code.0358

We also have the coding toolbar available, and that is something you are going to want to explore a little bit more as you move into working in code in Dreamweaver.0367

Some people just use code within Dreamweaver and these features make it helpful in order to work in Code view.0378

They are little extra features we can add on.0387

But just be aware, the name of this is the coding toolbar, here we have our line numbers and whether I am in Code view or I am in Split view you have that option for both of those showing.0390

Anytime you are working in Code view, you have those extra features available to assist you, within Dreamweaver. 0404

So, that is Code view and its extra tools that are available for you, when you are working in the code.0413