Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Most new software releases will have at least one new feature that you realize it's going to change the way you work in the program. For me that feature in Dreamweaver CS4 it is the Code Navigator. Simply put, the Code Navigator is the fastest and easiest way to navigate to related code when selecting elements on the page. The Code Navigator will give you quick access to external CSS, server-side includes, external scripts, template files, library items, and I-frame source files.
Now Adobe has made the Code Navigator extremely easy to use giving you still many ways to access it that you're bound to find a method that fits your workflow. Now if you're following along with me, I've opened up the gear.htm, which is found in the 03 folder so if you're working with the exercise files, just go to the 03 folder and open up gear.htm, although you can access the Code Navigator in one of your files very easily. So I'm just going to scroll down a little bit and as I scroll down I can see that there's a little extra green background, of the background color, showing up underneath the ad over here on the left-hand side and that is definitely not what I want. Now in the past we would have to go to the CSS Styles panel and view the cascade to figure out which rule's causing the problem and maybe even open up an external stylesheet, fix it, preview it in a browser and see how that's going, but the Code Navigator is going to speed that process up considerably.
So what I'm going to do is I'm going to select the ad, so go ahead and click on the graphic there and if you wait about half a second, you can see this little steering wheel icon comes up and that is the Code Navigator. If you mouse over that and you click that will bring up our Code Navigator. Now what's really cool about this- this is relating to CSS at the moment- but you're seeing all the rules that are affecting this element. So we're seeing the cascade from the least specific rule all the way down to the most specific rule and the last rule that's applying to it. So if I hover up through these, I can what's going on with it and I can see where the problem is occurring and you can see, it's this group selector that's dealing with the sidebar DIV tags that has padding on the bottom of one em. So we need to overwrite that and so it'll probably happen about there so we'll go ahead and overwrite that.
Before we do that, I want to go back to bringing the Code Navigator up. Obviously clicking on something then having to wait a half second really isn't that big a deal, but maybe you want a faster way to access this or even a more efficient way to access it. And another thing, quite frankly, is that every time you click on something from here on out, the Code Navigator icon shows up and sometimes it can become annoying if it's really not what you looking for. So in the lower right-hand corner of the Code Navigator, we have a little checkbox that says Disable and if I click that, the icon won't come up automatically anymore. It'll only come up when I request it.
And if you look on the left-hand side, you'll see it says Alt+click to show, so that's giving you a little hint on how to bring this up using a keyboard shortcut or keyboard and a click combination. Now on the Mac, it's going to be Option+Command and a click. So it's quite different on the Mac side. So that would be Option+Command+click. All right. So to get rid of the Code Navigator window all you have to do is click somewhere else and it'll go away. So now, to bring this up in a much faster, a more efficient way I'm going to hold down my Alt key and then simply click on the image and the Code Navigator automatically just jumps right up so I don't have a delay or have to click on any icons. I can just do that. So if you're on a Mac remember, Option+Command+click. If you're on the PC, it's Alt+ click and that's a much faster way to access this.
OK, let's go ahead and edit our CSS. Here we're going to see another really powerful feature, the Code Navigator, so as I scroll down it's not so much the group selector that I need to change because it's controlling a lot of things site-wide. It's the more specific style that I need to basically zero out that bottom padding on so that I don't see that anymore, so finding that rule, the two column fix small side #sidebar div#ad. When I click on that, you can see that it goes right to Split Screen view and it opens up the main.css, the external stylesheet that contains these styles, and not only that, but look where it placed my cursor. It placed my cursor right in the middle of that selector so that is awesome.
Let's just see a couple of different ways we can get the Code Navigator to come up. Well, one way is to use the menu. So if I go up to View and I scroll down and I can see that there's the Code Navigator. So there's another place to access it. And a place that at first might seem little hidden to you, if you come down to your tag selector. Now for those of you that have never used the tag selector, it's still in CS4 and it is still as awesome as ever, but if I go down to the Status bar, right down here below the document. Here's our tag selector and if I right-click on the tag selector, you can see the Code Navigator comes up and it shows me all the CSS and any script files that might be pertaining to this paragraph, which is nice. Now if this comes up by mistake and you don't need the Code Navigator, don't panic. Just don't click on anything. All you have to do is just click outside of it and the Code Navigator will go away, which is awesome. Now it won't take you very long to get the hang of using the Code Navigator and once you get used to it, you won't ever want to access your CSS and external script files any other way.
It is simply the fastest, most efficient way to do this. Next up we'll focus on our next feature, Live view.
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.