Join James Williamson for an in-depth discussion in this video Code hinting and code completion, part of Managing CSS in Dreamweaver.
- View Offline
To some, hand-coding can seem like a real chore. And I could certainly understand that, especially when you constantly have to make sure you're following proper syntax and writing your selectors properly. That's why I want to take a moment to explore Code Hinting and Code Completion for CSS in Dreamweaver. Both can make writing your styles faster and help ensure your styles are being written correctly. So I have the resources, and we have our main.css attached to this page. I'm just going to go to Split view so that I can see the code on one side and the design on the other. Now, if you have a limited amount of screen real estate, like I do, when you're working in this environment, one of the things I like to do is collapse these panels down to icons.
So I'm just going to go ahead and do that, and you can expand those panels at anytime if you want to see the labels on them and if you want to use one, you can simply click on the panel, and it shows up, or you can expand the whole dock back again. So that's really kind of nice. It gives you enough room so that you can see what you're doing in both panes. Okay. So now what I'm going to do is I'm going to scroll down a little bit, and I'm going to write a new rule beneath these two existing rules. So I'm just going to hit Return to go down on line below the last rule. Now, we're going to write a selector for the h2 tag. So I'm just going to type in h2, and then open up a curly brace.
Now again, we see this list comes up. So where is this list coming from? Well, this is called Code Hinting and since we're working with the CSS Document, Dreamweaver is giving us our Cascading Style Sheet Code Hints. So where to get those from? Well, if we go up to our Preferences, if we go to Edit and choose Preferences, that will be Dreamweaver Preferences on the Mac, I can go to Code Hints, and I can see which items I can turn Code Hinting on and off for. Notice that CSS Property Names is on, and I want to leave that on. I don't want to change that. But if, for whatever reason, you go in to Dreamweaver and start typing, and you don't see these lists come up, this is where you would go to make sure that check box has been selected. All right! I'm going to go ahead and click OK.
Now, notice my code hinting has gone away. If I return to go down to the next line, it comes back again. But if you lose focus on that for whatever reason, if you go to a line, and you want code hinting to come up, there is a couple of different ways that you can force that to happen. Number one, you can right-click, Ctrl+ Click on the Mac, and you can say Code Hinting tools, and there are couple of things here like the Color Picker, the URL browser, and the Font List that will bring those particular items up. But if you want all of the list back like we had a second ago, the way to force that is to do Ctrl+Spacebar. Now, that's the same shortcut key on the PC and the Mac: Ctrl+Spacebar.
So it's not Command+Spacebar on the Mac. It's Ctrl+Spacebar. So that list comes right back up, and we can just begin typing. Now, if I type in F, notice that it goes right down the list into the Fs. I'm also free to scroll through the scroll- bar if I want, or I can just continue to type. It will start narrowing down the properties that are available to me. I'm actually going to go down and choose font-family from the list. So rather than continuing to type, I can just use my arrow keys to go up and down to the list, and at this place, I want to go to the font-family. I'm going to hit Return or Enter. What's going to happen is it not only types out the property for me, but notice that it adds the colon at the end of the property.
So I get proper syntax out of that as well, and I don't have to remember that colon. Now, here's another really nice thing that Dreamweaver does for me, and this is one of the reasons why I really like this Code Hinting tools. Because I chose font-family, it's not bringing up a list of available font stacks. Now, these font-stacks are customizable. You can make your own. Notice if you scroll down through the list, you can see right down at the bottom, it says Edit Font List. So if you don't see a font stack that you want to use, you can just go ahead and create your own. So in this case, I could say Arial, Helvetica, sans-serif, hit Return or Enter.
It's going to finish typing all that for me. So I don't have to worry about remembering the font-stack, spelling all of the fonts correctly, which I am really bad at, that sort of thing. I'll type in a semicolon and go down to the next line, and here I'm going to do color. So I'm going to type in co. Let Color show up. I always take just a moment to make sure that the property that I want is indeed the property that's selecting, and then I'm going to hit Enter or Return. Now, as soon as I do that, notice that it finishes that for me, and it brings up this menu of properties. One of those properties is Color. It's this nice little color palette. If I double-click that, it's going to bring up the Color Picker.
Notice that it brings me a Swatch panel with all of the Web safe colors on it. It also brings me a RGB Color Picker, so I could click on that and just mix together any RGB color that I want. Again, anytime this stuff goes away, remember I can right-click or Ctrl+click, go to my Code Hint tools, and say I want the Color Picker back and bring it back. That's really nice. But what if one of these colors is not the one you want to use? Well, that's fine too. You're free to just go ahead and type in any hexadecimal value that you want. So I'll type in the hex value here, and then I'm going to type in 51341a, and then type in a semicolon color.
Now, I'm going to go down to the next line, and I'm going to type font-weight. As soon as I do that, notice that I get a brand-new list that comes up, and here I have all of the different settings that I can choose for font-weight. If I type in n, it goes down to normal. I can hit Return and have that finish for me. So not only does it help you with the properties, it helps you with the values for those properties, as well. Let's do margin-top. Again, I can scroll through that list if I'd like. Here I'll do 1.2ems. Then I'm going to do margin-bottom. Notice that I don't have to type out the whole thing.
I can just go right to margin-b. It will isolate it, and I hit Return and finish it. So a lot of times I'll type just to a certain point where I know everything else is isolated, and then I'll finish that. We'll do 1em, and we'll finish that up. Cool! So there is our h2 rule. We've used almost all of our Code Hinting tools. There is one more property I want to show you. So to do that, I'm going to scroll up, and modify our body selector. So just after the font I'm going to hit Return to create a brand-new line, and I'm going to type in b, for background. Now, notice what happens when I hit Return or Enter if I'm isolated on background.
A couple of things come up. The background property can have colors applied to it. It can have background images, all sorts of things. So the first thing I'm going to do is a color. Now, I could choose the Color Picker like we've just seen, or I can just type in a hex value. So I'm just going to do that. So I'm going to type in #e1d8b9, then I'll hit Space. Now, Dreamweaver again is very intelligent. It says, okay, I know what you can do next. You could put a URL or whatever you want. If I type in u, notice that it goes right to URL, and it allows me to choose a background image. Now, what I really like about this is if I hit Return right now, or Enter, or click on this, it's going to allow me to browse for my background image.
So I'm not going to have to type out the path for it. I'm not going to have to remember all of that. So I'm just going to go in the 01_09 folder/Images directory. I'm going to switch to Details view, so I can see this a little bit better, and I'm just going to move this up a little bit. I'm going to scroll down and find my page background right there. I will click OK, and notice it goes ahead and finishes typing out that for me. So that URL, all that stuff, I did not have to type that. I did not have to know the path to that. I can just let Dreamweaver finish that for me. Then I'm going to type in repeat-x, so it will repeat along the x axis.
And I'll do a Save All, and I'm going to switch over to Design view now. Now, I can see that background image showing up behind my page. Cool! Now, hand-coding can be a little tedious at times. But if you take advantage of Code Hinting, Code Completion and many of the shortcuts that we have available to us, it can really dramatically speed up that code writing process. Once you're familiar with those techniques and begin to use them like they are just second nature to you, you're going to find that hand-coding is the quickest and easiest way to create styles within Dreamweaver.
- Building a CSS-friendly workspace in Dreamweaver
- Creating style sheets visually
- Hand-coding styles
- Working with code hinting
- Organizing style sheets with color coding and sections
- Writing global classes
- Eliminating style conflicts
- Deploying styles
- Dealing with browser compatibility issues