The Document toolbar

show more The Document toolbar provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training show less
please wait ...

The Document toolbar

Now let's turn our attention to the Document window and its toolbar. The Document window is the main window that you see right here. I'm just going to resize that a little bit so you can see it a little bit better. It's in the Document window where you will actually create your web pages. We'll be getting into some of the windows properties in the next movie. But first, let's take a look at the toolbar running across the top of the window here. The Document toolbar contains several buttons and menus so that you do things like change the document view, set the page title, preview the page in a browser, and several other things. So, let's just work our way from left to right to get a brief overview what's available here. We'll get into more detail with many of these items later on.

First, we have this group of three buttons. Code, Split, and Design. By default we're looking at our page in design view. This is the view that displays your page in what's called WYSIWYG mode, or What You See Is What You Get. Unless you're a coder, this is the view that you'll use most often because the Design view hides all the behind the scenes coding that {italic}Dreamweaver{plain} is performing, and let's you concentrate on just laying out your page. And, it gives you a pretty accurate depiction of what your page will look like in an actual web browser. Now, of course the best way see how your page looks in a particular browser is to view it in that actual browser.

We'll get to that a little bit later. If you want to take a glance at the code, or if you want to go in and manually change the code if you know what you're doing, you can click the Code view button here. This displays all the code that creates your page. Notice that even with what appears to be a blank page in Design view, we already have a fair amount of necessary code that {italic}Dreamweaver{plain} has written for us. The third view is Split view, which lets you see both the Code and the Design views in separate panes of the same window. What's nice here is that if you make a change in the Design pane, you'll see the code immediately update up here up top.

If I just type some text, notice that it appears right up here in Split view in the code. If you manually change the code, for instance if I delete that text, and I click back down there you'll see that the design view is now updated. Pretty cool. I should mention that there is another way in {italic}Dreamweaver{plain} to simultaneously view both the Code and Design view. I have the option of selecting the Code Inspector from the Window menu. Window > Code Inspector. This opens the code in its own window, giving me a larger view of my actual page, so I don't have to share the window with the code in a split pane. I want to switch back to Design view here, I can just leave the code over here, and work in Design view and watch my code in the Code Inspector.

So, if you do prefer to work that way, just remember that the Code Inspector is available. Okay, so those are the three views that we have represented up here in the toolbar. Next we have the page title area. Text that you enter in this field appears at the top of the browser window, and is commonly used as the title for the page when someone bookmarks your page in a browser. So, you want to make sure to give each of your pages a good descriptive name. We'll talk about the importance of page titles more in the chapter on document basics. Next we have the File Management button. This lets you upload and download files from your web server to your computer, or vice versa. We haven't set up our web server settings yet, so I can't show you too much here.

Right now it's pretty much all grayed out. But, we'll get to uploading and downloading in the chapter on getting your site online. Next we have our Preview in Browser button, which launched your page in the browser of your choice so that you can see exactly what it'll look like in that particular browser. I'll show you how to set this up later in this chapter. The next button is the Refresh Design View button, which you can use if you've made some changes the page's code that haven't shown up in design view yet. If you go into Code, make a couple of changes and switch back to Design, and you don't see the changes, hit the Refresh button and you should see your changes then appear.

Next to that we have View Options, which lets you control several different options that modify the appearance of the view that you happen to be working in. Right now I'm in Design view, so I can choose to show head content, which are these items here, we'll talk about that later. If I don't want to see the rulers I can uncheck those. I can bring them back very easily. Or, if I'm working in Code view, and I hit that View Options menu again, you can see the options here have all changed. For instance, if I turn off Word Wrap you can see I now have to scroll left and right to see all of my code on screen. I generally like to keep that on. You can also turn Line Numbers on and off.

You can see the line numbers have disappeared there. If you switch to Split view, you see the options for both Design view and Code view down here. This is also where you can choose if you want to have your Design view on the top instead of on the bottom, or you could switch it back again. Incidentally, if you do use the Code Inspector that I was just talking about, you have the same View Options here as well. These are obviously just for the code view. Next to View Options we have our Visual Aids button, which lets you show and hide various things like table borders, image maps, layer outlines, and so on. I can't really show you any of those things right now because the page is empty, but we'll be using this menu occasionally as we go along. Basically, it's just useful for seeing borders of elements on your page that might not be so obvious by turning on certain borders or backgrounds that makes it much easier to see where certain sections of your page begin and end. Next to Visual Aids we have our Validate Markup button. This is a feature that was introduced in the previous version of {italic}Dreamweaver,{plain} {italic}Dreamweaver 8,{plain} and this button lets you check your code for tag of syntax errors. You can choose to your Validate Current Document, or all of the pages in your side once your site is defined, or just selected files in your site.

If you select Settings {italic}Dreamweaver's{plain} Validator Preferences opens up, and you can choose what type of code your page should be validated against. Finally, we have our check browser compatibility button. This is a useful option that lets you validate your pages code to see how it will stand up in different browsers. From here you can go to Settings to determine which versions of which browsers you want to perform checks against. Once you have that set up, you can come in here and choose Check Browser Compatibility to do an on the spot check. So, that's a brief tour of the Document toolbar. It appears at the top of every single Document window and we'll be using a lot of the tools found here throughout the rest of the movies in this tutorial.

Next, we'll take a look at the actual Document window itself.

The Document toolbar
Video duration: 6m 6s 10h 21m Beginner


The Document toolbar provides you with in-depth training on Web. Taught by Garrick Chow as part of the Dreamweaver CS3 Essential Training

please wait ...