Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
The Document toolbar is such an important part of Dreamweaver, I doubt you'll think of it as just a toolbar. More than likely, you'll think of it as an extension of the document that you're currently working on. Now, the Document toolbar can be found just above any open document. It allows you to access different views, preview your pages, upload files, title your page and a host of other capabilities. Now, we're just going to do a quick overview of the Document toolbar. Many of the features and functionalities that we're going to show off here are described in more detail later in the title. Now, I have got our index.htm file opened here, and we're going to use the Document toolbar to kind of show off some other things that it can do with any document that you're working in.
Now, we also have a Design view. And that's going to take you to Dreamweaver's WYSIWYG, or What You See Is What You Get Editor. Here we see a nice visual display of our page, and it represents, more or less, what our page would look like within our browser. We also have a Split View, which shows you both the Code and the Design view. Now, you're able to customize this. And if you go up to the View menu, notice that you can turn Split Vertically off so that it splits the Code and the Design view horizontally. And there is also an option for moving Design view on Top or to the left, depending upon whether you're looking at, horizontal or vertically split code.
So feel free to go ahead and change that to your personal preferences as well. Now, I'm going to switch this back to Design view, because I want to talk about this set of icons here on the right-hand side: Live Code, Live View and Inspect. Now, those all have to do with Dreamweaver's WebKit Integration. WebKit is an open source browser- rendering engine used to power such browsers as Apple's Safari browser and Google's Chrome. So if I click Live View, my Design view changes to a rendered view of our page, and we see that as it's rendered with the WebKit rendering engine.
So it's a nice sort of preview as to what it's going to look like in one of those browsers. Now, there is a lot more to that feature, and we're going to be covering that a little bit later on. But I'm going to toggle Live View off now, and the Document toolbar allows us to preview our pages in a slightly different way as well. Let's say you wanted to see your page actually within the browser. This little planet icon just to the right of that, if you click that, it's going to show you a list of any browsers that you have installed or that you have added through Dreamweaver. You'll notice the first listing we have here is the Preview in Firefox.
So if I click on that, it's going to launch my page within the Firefox browser, and I can see how it's going to look like live online as well. Now we have a lot of other options that we can do here as well. We have Visual Aids, for example, which can show us things like CSS Layout Backgrounds that shows specific regions of our pages, the Box model properties, which will show you padding and margin if you click on an object, or even these Layout Outlines that gives us this nice sort of dotted lines or dashed lines around different elements on the page. So feel free to going in and tinker around with those and see which Visual Aids tend to help you, and which ones tend to be a little distracting.
So you can sort of modify those to your own liking. Now, just beside that, we also have the Title dialog box. So if you create a new page, and you need to give it a title, or if you open an existing page that somebody forgot to title, this is a very quick and easy way to do that. So I'm just going to click inside my Title page here, and I'm going to say, "Come Explore California." Now our document has a title, and it says exactly what we want it to say. Now, as you're working on your document, once it's finished, and it's ready to go online, you can also use the Document toolbar to very quickly and easily upload your file, or even download the latest copy of your file, from your Web server.
So once we're finished, we can choose Put, and it will go ahead and upload our file to our remote server as long as we have one defined, and we'll talk about defining remote servers a little bit later on in the title. Now, more than likely, you're going to use the Document toolbar most frequently to switch between Code and Design view. However, don't forget to take advantage of features, such as file uploading, previewing your pages within browsers, or Live View, or all these other options that we've taken a look at. These options are located in a nice central location, and they're really going to speed up your workflow once you're used to using them.
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.
Your file was successfully uploaded.