Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
While Dreamweaver has an impressive array of visual tools designed to help you create websites, what is often overlooked is that it has an equally impressive set of tools designed to help you write and edit code. In this chapter, I want to take a closer look at some of Dreamweaver's coding tools, so that you can author code in Dreamweaver in the most efficient manner. Now by the way, if you're a visual designer that's now moving into Web design, you might be tempted to skip this chapter and focus on the visual tools of Dreamweaver. I know that there's a lot of visual designers are out there that run at the first mention of the code.
I hope that you'll reconsider this for a couple of reasons. First, if you really want to be a Web designer, there's simply no getting around needing to learn HTML and CSS, and one of the best ways of learning them is to actually spend time writing them. Second, Dreamweaver's visual tools are quite impressive, but there is a limit as to what you can do with them. At some point you're going to want to do something that you simply can't do visually in Dreamweaver. When that happens, you will have to turn the writing code to get it done. Fortunately, Dreamweaver makes writing code just as quick and easy as it does everything else.
I want to first introduce you to the coding environment in Dreamweaver by showing off the Code toolbar. To do that, we're going to use a sample file here, I've got the index.htm file opened from the 05_01 folder, and you can see that I've got just the Code view. So I'm not doing Split view this time, just Code view, opened up and I've also minimized the Properties Inspector, so that we have more sort of vertical space so I can show off the coding toolbar. Now the Code toolbar is found just to the left of your line numbers, right over here and if you hover over at some of these icons, you'll get a little tooltip that tells you exactly what that icon does and what its functionality is.
Now throughout this chapter, we're going to be experimenting with a lot of those different features of the coding toolbar. So I really just want to sort of hit some of the highlights of them so you have an idea as to how the Code toolbar works. Okay, so I'm just going to scroll down in my code a little bit and one of the first things that you'll notice when you start writing code is that it can sometimes get a little tedious just to find what it is that you're looking for. You know if you're working on a very specific area and you need to go back to the top for something and then scroll back down again, it can become really difficult to sort of figure out where you are.
Let me give you an example. Let's say I was going to go all the way down to the footer and just work on the footer. Well, it would help me if I could just isolate that footer in terms of just looking at the footer itself. That's actually really easy to do using the coding toolbar. So if I click anywhere inside this footer down here at the bottom, I can go down to my tag selector and I can click the footer right there to select all of that code. Now as soon as I do that, I get these little handles that show up. Now these aren't officially part of the Code toolbar, but they have the same type of functionality, they allow me to collapse a series of code down and then expand that later on.
So you can sort of collapse code to hide it and then expand it later on when you need to work on it. Well, I mentioned wanting to isolate say just the footer and work on this, while the rest of the code is sort of minimized like that, right? Well, if I hover over the Code toolbar, I have a couple of collapsing options, I have a Collapse Selection and I have Collapse Full Tag. They're very similar in terms of their functionality. If I click on them, you'll notice that it's doing exactly the same things as lines were doing for me before, but this one gives me some options here. If for example, let me expand those back out and you can see that right here this little icon will go ahead and expand this back out.
If I hold down the Alt key, that'd be the Opt key on the Mac, and click that icon again, notice that that collapses everything except for the footer. So now I know that if I'm working on code and writing code, I've isolated the footer, I'm working on just the footer itself, and it helps sort of shorten the amount of code that I need to scroll through in order to find something which is really nice. Now anytime I want to expand something back out again, I have a couple of choices for doing that. One, I can click on the collapse section and click the plus (+) symbol beside it or I can come more right over here to the coding toolbar, click Expand All and that's going to expand that down again.
So you can see the coding toolbar makes a lot of the functionality within Dreamweaver very quick and very easy. Just to give you an overview of the different sections of the coding toolbar, we have our collapsible icons here that allow us to isolate code sections. And we have one of my favorite ones right here which is Select Parent Tag. If you click inside of a very complex structure such as this unordered list for example, if I click that, it's going to select the tag that I'm inside of. If I click it again, it's going to select that parent tag, if I click it again, it's going to select the parent tag that that's inside of and I can keep going all the way until I get to the body tag.
So if I want to know exactly what section an element is inside of, it's very easy for me to find that by simply clicking there and then clicking up until I get the appropriate section. Now I have that code isolated and I can begin to work with it or change that in some way as well. We have a section just below that that helps us spot errors in our code. I can turn Line Numbers on and off, Ican Highlight Invalid Code, of course I don't have any invalid code, so you're not going to see anything there. But as you're authoring code, if that's turned on and you write something that is invalid, you'll get a nice little underline. It's almost like Word, when you misspell something, so that's pretty cool.
You also have Syntax Error Alerts, you have the ability to apply comments, which we're going to play around with a little bit later on, manage files like CSS. We have the ability to indent code and change the indentation of our code and then we have this Format Source Code that we're going to be doing a little bit later on in a title as well. So that's a quick overview of the coding toolbar. Once again we're going to use a lot of this functionality throughout the chapter. So it's certainly not the last time that we're going to see it. So I want to encourage you to go over the coding toolbar, click on some of these icons, hover over them, see what they do, experiment with them, and by doing so you're not only going to get comfortable with the coding toolbar, you're also going to get a lot more comfortable within Dreamweaver's coding environment.
Get unlimited access to all courses for just $25/month.Become a member
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.