1.3 Coding Features

So in the second video, we're gonna look at some of Dreamweaver's features in the coding environment and how they can help you. So like many Adobe packages, there are a few toolbars that you can turn on and off to help you. The coding toolbar is available by default. They can be turned off in the View menu, let's turn it back on again, and has some useful items on it, so it's worth keeping it visible. It shows you options to turn line numbering on and off. The word wrapping, quick commenting that features which will come on to a little bit later on. Code hints. You may have noticed when I was typing earlier that as you type in your HTML, you get code hints in this dropdown panel. These can be very useful. You don't have to have them on, and I'll show you how to turn those off in a bit. But they can be a great way of reminding yourself of what's available in terms of attributes. So if you type an image tag, just what is actually available to the image tag. And they can also be a quick way of adding the content itself rather than you having to type things out. The same applies in CSS. So as you type in you will get the same drop down and it gives you all of the properties of that style. Particularly useful for things like fonts. So you don't have to copy and paste and remember long sort of type and font family declarations. You can customize this in the settings. So code hint in here. What's nice is you can change the delay, so rather than appearing immediately, you can make it wait a while. You can also turn different aspects on and off. So whether you want them to appear in HTML or CSS, it's all in this menu here. They're also available in PHP and jQuery too. So that's all accessible in the properties. So now I've set that, you'll see when I apply and close the window, that now when I start typing my styles, There is now a delay. So that's enough time to just carry on typing. So now you will only see them when you pause. You may notice that some of these line numbers are red. Now, that's actually showing me that there's an error in the code, both in CSS and HTML. Obviously, I've done this deliberately here, and it will actually show you the problem when you hover over. Let's hover over. Here it'll tell you. So it's telling me here that attack must be paired. It must, because there's no opening div. So it's really nice that it's highlighted that and told me the problem involved. Now it's giving me two, and that's because it needs to be within the body tag. So again, that just shows how useful it is. Another really useful thing is just a really simple thing which seems to be missing from a lot of editors and that's being able to see the closing tag of the element you're on. So if I click on the opening div I can see the closing div. Body, I can see the end of the body. HTML, I can see the close of the HTML tag. And it's just really useful, especially when you get to much more complex files with lots of nested divs and content. To be able to see if you've closed a div is really, really useful. And this makes it possible. And a quick note, this option on the toolbar, if you keep clicking it. Once, twice, three times, selects some up the DOM of different tags which can be very useful. Okay, so this is a really neat little feature which I find myself using more and more. I quite often do a lot of design directly into code. So I'm styling directly into HTML just because I'm experimenting. And I haven't quite got round to creating classes for repeated items. So I might do this kind of thing just to get an idea of the feel and how it's all looking in the browser. But then at some point you need to tidy of all this up. Which can be a bit of a manual job, but Dreamweaver has a really nice little function, so if you click back into your inline style, right-click, go to Convert Inline CSS to Rule. Get a little option box, give it a class name, make sure the style sheet is connected, which it is. Then when we switch to our style sheet, we'll see that a brand new style has been created, all beautifully laid out. And then of course we can just go back. Delete our horrible inline style which we don't really want to be using. Just make sure the right class is on there, very, very handy. This is a beautiful little feature. Again, it took me ages to find it. It wasn't very intuitive. But once you know it, it's a lifesaver, especially in massive projects when you've got really big style sheets. So basically if you want to find that class of intro, rather than having to go to your style sheet with a thousand or three thousand lines in it and searching it. If you just right-click on it and go to Code Navigator. Now you can see a highlight of the code in here, which can also be useful, but if you can click on, see where you can see the highlight when you hover over the class. And if you click on it, you'll be taken through to the stylesheet with that class, right directly to that class. And that is just indispensable. So it can be quite useful to know where you are within the wider DOM, or document object model, the structure of your HTML when you're designing. We can see that in a couple of places in Dreamweaver all the time. So down in this bottom status bar here, we can see that currently, my cursor is within the p tag or paragraph tag. And if I click on that, it selects it. And that's currently sitting within the body tag. And again, clicking selects all of that. And we can see also that there's a DOM panel, which is available to turn off and on in here. And that shows you the same locator concept. But it will also show you all the others available to you. So this is quite handy because it can act as a complete shortcut map to all the elements and all the objects in your document. Very, very useful. As I mentioned at the beginning, live view, we might not want to be using all the time. We are not gonna design with it but it can be useful for locating code and locating content, especially within longer design pages. If we go to live view, we can click on elements and get a little bit more help with each one. So you get this kind of sort of blue controls. And that allows you to jump to the HTML. And you can play with the HTML in here, or you can go straight to the class in the style sheet. So if you right click on that and go to Code, that'll jump you again into the style sheet. So it's another way of kind of short cutting and fast tracking to bits of styling information that you wanna get to without having to search very long style sheets. So that's it for part two. In the next video, we're gonna look at some of Dreamweaver's time saving features.