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 ever think if it is just a toolbar. More than likely you'll think of it as an extension of the document that you are working on. Now Document toolbar is found just above any open document and it allows you to access different views, preview your pages, upload files, title your pages, check your page code and a lot more. So in order to sort of go over a little bit about what the Document toolbar can do for you, I went ahead and defined my site to target the 01_06 folder and I have opened up the index file that you can find inside of that.
So it's okay if you have a blank document open, it doesn't really matter that it's the index page, but for this exercise I am going to go ahead and use the files found within that folder. Now another thing I want to do is I am going to turn off my Style Rendering toolbar and the reason for that is because it's not really a part of the Document toolbar and on the PC interface, it's really easy to get it confused. Plus, one of things that's really kind of interesting about the Document toolbar is it will sort of flex based on what you are focused on and what you're looking at, you'll see fewer or more options up on the Document toolbar. So I don't want to get really crowded up there, so I am just going to turn Style Rendering off by right clicking the Document toolbar and turning Style Rendering off.
Now, if you didn't have Style Rendering on, don't worry about turning it on just sort of leave it off. Okay now, you'll notice that currently I'm in the Code view of this file and the first thing you will notice in the Document toolbar are four buttons; Code, Split, Design and Live. Let's talk about what those will do for you. Code view is a pretty self-explanatory, it lets you see the code of your page edit and work with that code and if you're somebody that really likes to hand code this is going to be probably your default view inside Dreamweaver. Now we also have a Split screen view and this Split view, what this does for you is it's going to show you code on the one side and on the other side it's going to show a Design view that shows you the page that you're currently working on.
So this is incredibly handy, especially for people that are brand-new to learning Web design, because this allows you to make changes say over in the Design side and see those changes in the code. So you can see the code that's being generated based on what you're doing and it's a really nice way of sort of learning that. It also helps you sort of look through the code and then figure out what you're looking at over here on the page. So if you are wondering, you know, who is this if you highlight this, notice the Design view changes and it highlights the content on the page that belongs to this code. So it's very, very nice way of sort of figuring out what's what, who's who and learning about the process of affecting an item on the page and seeing the code update or writing the code and seeing what that does in the Design view.
Now if you prefer to work visually, we do have the Design view. Now I want to show you guys something about Design view that's much truer today than it was say four years ago when I started doing Dreamweaver titles and that is that this Design view is beginning to really sort of show its age. This Design view uses a very, very old rendering engine and it can't handle the majority of the CSS that most modern browsers can handle. So you might code a layout that's going to look just fine, but you will notice that in this Design view, the layout looks terrible and it's very hard to access certain things.
If I click inside this particular container for example, because of the way Dreamweaver's Design view renders this, I can't click inside and select a code. All I can do is highlight this one element. It becomes a lot harder to click inside of an element and select something. Plus you're not really getting a good look at what actually is going on inside your page. So while the Design view is helpful, don't ever look at a page within Design view and think that that's the way it's going to look in a browser, because it just is not going to look the same. Now with that in mind, there is a button over here on the right-hand side just beside Design view called Live.
And this is going to toggle Live view on and off. Now if I click on Live view, I see a totally different view of my page. Live view turns on Dreamweaver's internal WebKit rendering engine. WebKit is an open-source rendering engine that a lot of browsers like Apple Safari and Google's Chrome uses to render its pages. So, by turning this on, I get a much more realistic view of kind of what's going on within my page. For example, it will even show interactive things like, if I hover over this, I can see the transitions happening between these elements and I just can't see that in normal Design view.
Now you might say to yourself, well wow! Why would you ever use Design view, why don't you just leave this particular view on? Well that's because this view is really designed for previewing. You can't select an item in here and work on it. I can highlight code, but if I begin to type, you can see I'm not making any changes to my page. So I would need to switch back and turn Live view off, then I can highlight content on the page and make changes to them. So Live view is a great preview function, but is not something that you are going to be using when you're making edits to your pages. Now you may have noticed this, you may not, so I am going to toggle it on and off again so you can see this.
So Inspect is incredibly helpful. Now we also have this nice little address window and what's really cool about this is when you're in Live view you really are looking at a browser. So I'm seeing the page or let's say I can pass parameters to my page, I can type in new addresses as a matter of fact if I wanted to, well let's just try it, http://www.lynda.com, let's see if that works. It does. This is a browser within Dreamweaver, so it allows you to just type in and kind of do your thing. So it's really cool if you have tutorials online like at Lynda.com, you can go into Dreamweaver and sort of browse through those, really cool! So if you are looking for certain things or if you are searching for something or more importantly and this is really why this function is here, if you have absolute links in your page that link out to external websites, you can make sure they're working.
You can also hit the Back button, you can refresh the page and you can go back to the page we were looking at, at any time. Now I am going to turn Live view off and I am going to take a look at this set of icons right here. Now, each one of these set of icons has a series of things that you can do within your page. The Multiscreen preview if I grab that that helps you if you are designing for multiple-screens, you can change the Preview pane of your window. So for example if I went down to Smart Phone, you can see that it shrinks all the window size down, so the page sort of displays the same way it would on a Smart Phone.
I can also open up Multiscreen Preview if I want to see the Multiscreen Preview panel which allows me to see the page in different sizes all at once. So that's a very handy tool and of course I can always reset it back to Full Size. Now we also have other options like previewing in a browser which I am going to explore in a little bit more detail later on, uploading and downloading files to your server, Validation, so you can validate your document through the W3C to make sure you are using valid HTML. We have browser compatibility to make sure that your CSS is relatively error-free.
We can check spelling from here, so all sorts of things and we also have Visual Aids so we can turn off things like CSS Layout Box Model Guides, Table Borders, Fluid Grid Layouts, which is a new feature in Dreamweaver CS6. So we have a lot of things that we can do in terms of previewing and checking our document right from the Document toolbar without having to go out to any external panels or opening closing panels. So it's incredibly handy. And perhaps one of the nicest things about it is right here is the Title of our page or Document Title and that's something you definitely want to do for every single page, so the last thing I am going to do with the Document toolbar is give this page a title because it doesn't have one and I am just going to type in Welcome to Roux Academy.
Now what does that do for you? Well if I save the file and I look inside my source code, you can see up in the head of the document now, my title tag now has Welcome to Roux Academy in it. That's going to help me in terms of letting search engines know what that page is all about. They will use that when they display the results. And if I preview this in a browser, you can see right up top it says Welcome to Roux Academy now. So it's very important if you've never worked with Page Titles before, it's very important that you title them, so your pages then come up and say Untitled Document. So it's incredibly handy to have the titling functional right there in the Document toolbar.
You know it just does an amazing job of putting really much of Dreamweaver's functionality right there in your fingertips in one toolbar. But focusing on using it, as you learn Dreamweaver, you are going to develop an efficient workflow when performing the majority of tasks within Dreamweaver.
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.