Join James Williamson for an in-depth discussion in this video Toolbars, part of Dreamweaver CC Essential Training.
- View Offline
In Dreamweave Creative Cloud, toolbars have become a less important part of the interface. As several of the toolbars have either seen features removed from them or have the toolbar itself removed entirely in an effort to streamline the application. Toolbars do remain an important part of working within Dreamweaver so let's explore the different toolbars that Dreamweaver has to offer. Now I have the index.htm file open here from the 01_03 directory. It's not important that you have just that file open because we're not really going to do anything to it.
But, you won't really see your toolbars unless a document is open. So, I went ahead and opened this one up so that we can see all of our toolbars. Now, you really only have about, I don't know, four toolbars total inside Dreamweaver now, if you count the Application toolbar. Now, again, the Application tool bar can be found sort of up top, on the PC or the Windows version, if you will. It will be docked horizontally along with the menu. Whereas, on the Mac, as you can see here, it's directly underneath the menu. There's only two options on this. Well, three, really, if you count the Help file option.
But we have our Workspace, which we'll talk about later on. We have the Creative Cloud Sync settings, so if you have, say, multiple computers that you have Dreamweaver installed in. Maybe you have one at home and one at work, you could sync the settings between the two of them so that the preferences and site definitions updated. Once you got home, for example, from working, you could pull those back up again. So that's a nice feature. And then we have a little bit of a information or quick help file if you will. But that's really the only thing that you'll find on the Application toolbar. So is it really a toolbar? Maybe in name only.
Alright, so let's turn out attention to the three toolbars that you'll probably be using a good bit and you can find them. There's one that's always open and it's this one, this is the Document toolbar. You'll find this toolbar just above any open file and the other two you'll find depending upon which view you're in. Right now I'm in what we call Design View and we'll talk more about those views and editing them a little bit later on. But if I'm looking for my toolbars, I can go up to View toolbars, and right now it looks like you only have two, Document and Standard. We'll talk about why we only see two here in just a moment. I'm going to choose Standard so I can open this one up. And the Standard toolbar will come in the Mac interface, it'll open up just below the document toolbar, on the PC interface.
If you have enough room, it'll show up side by side. But, if you don't have enough room, then it'll show up below it, as well sort of stacked the way you are seeing it here. But that's another interesting interface difference. On the PC you're able to actually dock and un-dock toolbars and dock them side by side, whereas on the Mac they stay sort of locked within the Frame. So, the Standard toolbar includes icons to open up a new file, open existing files, save files, cut and paste things to the clipboard, undo items, redo items. So it's very much a, if you will pardon the term, a standard toolbar that you'll find in other programs like Microsoft Word and things like that. If its a toolbar you use a good bit you can have it open then you can work with it but as you can see it takes up a good bit of screen illustrated. Its really nothing I use on a consistent basis because those are tasks that I typically perform through keyboard shortcuts or menu items. So I don't typically use it but if you find it useful its available for you now. If you want to turn a toolbar on and off, and you don't want to always go up to the menu.
A very quick and easy way to do this is to simply either right-click or control-click on any open toolbar. And you'll get a check box that allows you to turn that toolbar on or off, which is kind of nice. Now, I mentioned before that we had really kind of three of these types of tool bars, but we only see two right now. And the reason for that is the view that we are in. So, I'm going to go right over here on my Document toolbar, and click on Code View. Now, that's going to change the way I'm viewing the open document. I'm going to actually view the code for that file, instead of preview of it. And this allows me, of course, in Code View to edit code and work with the code in my file.
I actually prefer to hand code, so this is the view that I see typically when I'm working inside Dreamweaver. Well, there's another toolbar available to us now. And in fact, if I right-click on the toolbar, you can see that the Coding toolbar is now an option, whereas, it wasn't before. The Coding toolbar is a little different. It's this little vertical toolbar, right here to the left of the code. And it does this that make it a little bit easier for you to edit your code. It'll show you syntax errors, it'll allow you to place comments and uncomment things out. It will allow you to auto format your code, expand and collapse code down. So, it's a very handy too bar for those of you who like to, to hand code. But of course if you're not in Code View there's no reason for it to show up. So if I were to click back, for example, on Design View the Coding toolbar goes away.
Now, what that tells us is the only toolbar that's really going to be consistently visible to you. No matter how you like to work inside Dreamweaver, that's the document tool bar. And that's what you're seeing right here. Now the document tool bar used to have a ton of stuff on it and in the Creative Cloud. They've sort of pulled some of the features off of it. Now the reason for that was the engineers really just felt like it was getting too cluttered. And so, instead of having all those icons up there and having it be a little bit confusing, they decided to go a little bit more minimal on it.
Now the Document toolbar still changes based from the way you're viewing the file. In fact, I'm betting there are a couple of you out there right now that are looking at the Document toolbar. And saying to yourself, no, no, no, mine doesn't look like that. I'm missing some of that stuff. How do you get that stuff on there? Well let me show you. I'm going to turn off this Live View option that I have right now. And you'll notice that a lot of the stuff disappeared. My page rendering also changed as well, but I noticed a lot of the options up here disappeared. So, let's go over, just a really brief overview, of the document toolbar.
But basically, since then, you've been able to open up any related file to the file you're working on without having to go out and find that file. Notice if I click, for example, on main.css, which is the external style sheet attached to this file. I can start to edit all my CSS code, without actually having to open that file separately. So that's a huge time saver. It also allows me to see at a very quick and easy glance how many files are relinked or related or, how many dependencies if you will, I have for a specific file. So that's really nice, and anytime I want to go back to editing the file at hand, all I have to do is click Source Code. And then go right back to editing that file which is really nice. Now you'll notice that a lot of the changes that we make when I click on these Icons change how the document actually looks in the open window. And that's really based on these 4 icons right here. We have Code, Split, and Design.
As I've shown you before, the Code View gives you just a window on how the code looks. Design View gives you a visual rendering of the page. Now, I need to be really careful here when I say this. This is a very, very old feature in Dreamweaver and it hasn't been updated in a long time. It does a very poor job of rendering your CSS files. So when you're looking at the Design view, it does give you a very quick and easy way to highlight elements on the page and edit them. But you should in no way, shape, or form look at this as a representation of how the page is going to render within the browser.
Because this is a very, very old rendering engine that just doesn't support a lot of the newest CSS properties. So you're not going to get a good feel for how your page is going to look within the browser by looking at this. Now, however, it is a nice way of learning certain things. For example, if I click on the Split View I see the code on the left hand side and I see sort of the design view rendering on the right hand side. Now this is very valuable for those of you who maybe don't know so much about code or you're just learning HTML. And the reason for that is if you make a change on one side you'll see that change update on the other side.
Let me give you an example. Let's say you want to know where this programs is within the code. If I just simply highlight it, notice that, in the code view it jumped right to that and highlighted that text. So it's a very quick and easy way of finding where something is within the code. It works both ways too. If I go over to the code and highlight something in the code, in Design View I get to see exactly where that element is. It's also true of editing things. So, if I edited programs for example and just changed it to program, notice that if I click over into Design View, it makes that change.
In Design View, if I change it back, by adding an S to this. I can see that it adds it right there to Code View, so you can sort of work in either side and see it update in real time. It's a real nice way of finding things. And figuring out exactly you know, what it is you're doing to the file, what's that doing to the code. Or if you edit code what's that doing to the visual side, so it's a very nice view. Now if you don't like the default way that this is setup you can go up to View and you can change how the Split View looks. If I choose Split Vertically for example and turn that off, then I get sort of this sort of horizontal stacking of the two views. I don't like that, so I'm going to turn that back on. And you can also change it so that the Design View switches and is on the left if you'd rather have it over there.
So it's really about personal preferences. Now, the last little icon that I want to cover right here is Live, and this turns on Live View. Now, I'm going to talk more about Live View later on. But what Live View is, it's a web kit rendering within the Dreamweaver environment. So this is a much more truer representation of what it might look like in the browser. It's not 100% accurate, but it's certainly a lot more accurate than the Design View itself. The problem is, you can't edit in this view, at least not yet. It's one of the things that I understand they're going to be adding to Dreamweaver a little bit later on.
This allows me to actually navigate through pages within my site and even click on external links and see if my site is wired up the way that I'm wanting it to. Now some of these don't belong to Live View. If I turn Live View back off, for example, you'll notice that we have a little planet icon, this allows us to preview our files in our browsers. I'm going to go over that a little bit more later on. We have title, which allows us to title our pages, for example, I could title it Welcome to Roux Academy. That's going to add a title to our page. And as a matter of fact, if I switch over to Split View, and scroll up into the head of my document, you can see exactly what that's done for us within the code. And then finally, I have these little icons right here that allow me to upload and download files to my remote servers.
Now, I don't have one defined right now, so those are grayed out, but that's an option that this allows me to do. Okay, I know that's a very quick overview of what the Document toolbar allows us to do. And I'm going to cover those features in more detail as we go throughout the course. I just wanted to give you a quick overview of all of the toolbars that are available to you in Dreamweaver. And how, you know, they put a lot of the functionality within Dreamweaver right at your fingertips. Now, if you focus on how these toolbars can make you more efficient as you learn Dreamweaver. You're going to develop a more efficient workflow when performing common tasks.
So, pay attention to the toolbars, and when it's appropriate to use them.
- Learning how to approach web design
- Managing workspaces
- Defining a new site
- Managing starter pages
- Exploring the authoring options
- Creating links
- Setting CSS preferences and styling a page
- Placing and styling images
- Working with tabular data
- Uploading files
- Checking for broken links