Join Daniel Short for an in-depth discussion in this video The new code toolbar, part of Dreamweaver 8 Beyond the Basics.
>>Male Speaker: Hello, and welcome to Dreamweaver 8 Beyond the Basics. I'm going to start this title by walking you through some of the rapid coding techniques that you can develop inside Dreamweaver to help speed up your development. We're going to spend a lot of time in future chapters working with CSS, developing some complex layouts, and eventually doing some dynamic development using ColdFusion. Now in order to make that process to go smoothly, and for you to speed up your entire development process, we're going to cover things like the new Code toolbar, code collapse, creating shortcuts for your snippets, and even showing you some file comparison utilities so you can compare two files and figure out where you've made changes, or need to make changes.
So to start off, we're just going to go with a new feature you may not have noticed yet inside Dreamweaver 8, which is the Code toolbar. Now the Code toolbar is by far my most favorite new feature inside Dreamweaver. I spend the majority of my time in Code view. So if I open an HTML file, you'll get to see my new favorite feature, which is right here. The Code toolbar runs along the left hand gutter of all of your open documents. And this gives you a lot of access to features that, first, are new, such as the code collapse, and that you also have to dig through a menu to find, such as the applied source formatting, indenting and outdenting, as well as commenting your code.
And these we're also going to cover inside this chapter. So first let's quickly go over what all of these buttons do. So the first button here lists all of your open documents. So let's just assume that you had, you know, 30 documents up here at the top open, which I have been known to do. You'd end up with a whole bunch of tabs and then the little scroll widget here in order to see the tabs that have run off the screen. Well with the Open Documents button, you can simply click there, and you can see all of your open documents. So let's go ahead and give this one a name, call it File 1 and save it.
And we'll name it File 1. And we'll create another new file. We'll name this one File 2, and save it. And now my open documents shows all of the files that I have open, and it also shows me the entire path. So if you're working on four different files named index, or default.htm, and they're in four different folders, you'll be able to see which one you want, versus looking up here in the open documents area and trying to figure out which index file you actually need to work on.
So that's the first button in here. The next group is code collapse. This allows you to collapse a tag, collapse a selection, or expand all of your selections. We're going to cover code collapse a little bit more in-depth in a later chapter, so I'll skip that for right now. The next option on the Code toolbar is the Select Parent Tag. Now this one allows you to, if you have your cursor in some text here, select a tag that surrounds that text. So I click it, that selects the title tag, click it again, that selects the head tag.
The next one turns off the highlighting for invalid code. So if we go up here and want to create some invalid code, let's say we added another content tag, or attribute, rather, and I click Highlight Invalid Code, and we'll get Dreamweaver to refresh here, we'll switch. There we go, so now my invalid code. I just had to switch to design view and back to code for Dreamweaver to refresh its display. But it's showing me that I have a problem, and if I open the Properties Inspector and select this tag, it tells me what that problem is; I have a duplicate attribute.
So if I toggle this button off, then that highlighting goes away. So you can turn that on and off. So that's what that button does. We'll get rid of my bad attribute there. The next has to do with code commenting. You can now apply a variety of code comments. And we'll cover that in a separate movie. And the next button simply removes comments. And then you have the Wrap Tag command and the recent snippets. Now the Wrap Tag we're also going to cover in quick tag selection, but the recent snippets actually shows you all of the snippets that you have most recently used and gives you quick access to the snippets panel, which in Dreamweaver 8 is located in the files panel group over here.
It used to be in a separate code panel. So that's where your snippets are. And we will play with this button a little bit more when we get into the Snippets movie. The next two buttons are the Indent and Outdent Code buttons. So if I have some text here, for instance, and I click the Indent button, it will indent that entire line, and I click the Outdent, and it will outdent the entire line. Now you can also do this just by pressing the Tab key on your keyboard, or if you press Shift, Tab, it will move it backwards.
So you can either use these buttons, or I'm a keyboard shortcut junkie. You can use Tab and Shift, Tab, to move your selections. And then lastly is the Applied Source Formatting and you click that little button, and you can apply the source formatting to the entire document. Just to your selection, you can go straight to the code format settings in the Preferences, and you can actually edit your tag libraries directly from here. So that's it for the Code toolbar, at least as it stands now. I'll show you another trick with the Code toolbar as we get a little bit further into the Customizing Toolbars video.
So now that you're familiar with that we will move onto the next video where we will cover these three new buttons on code collapse.
- Dreamweaver shortcuts and customization tips
- Simple and advanced CSS layout and navigation
- Advanced template design
- Working with XML to set up an RSS Feed
- Designing a site to integrate with Contribute
- Search engine optimization
- Building usable forms
- Building dynamic data-driven websites