Viewers: in countries Watching now:
Managing CSS in Dreamweaver with James Williamson shows how to create cascading style sheets that are efficient, reusable, and easy to navigate. In this course, James shares tips on how to find and use panels and tools, and how to deploy style sheets to screen, print, and mobile environments. Course topics include creating customized starter pages, learning to rapidly hand-code CSS through using Snippets, and using Dreamweaver's CSS preferences to deploy lightweight styles. Exercise files are included with the course.
If you only use the visual tools in Dreamweaver, you're really only using half the program. Now, I know that some designers are a bit hesitant to start coding on their own, but in reality CSS is incredibly easy to learn, and Dreamweaver's coding tools make it the fastest way to create your styles. In this movie, we'll take a brief tour of Dreamweaver's coding environment and start coding by writing a simple CSS Rule. If you're familiar with coding CSS, and just want to see how Dreamweaver's coding environment works, stick around. We'll be covering some of that as well. I'm just going to go ahead and create a brand-new CSS file because we really don't have one attached to the page yet.
So I'm just going to go to File and choose New. From the New Document dialog box, I'm going to go down to Blank Page and choose CSS, and go ahead and create it. So here we just have an empty CSS file. I'll go ahead and save it, and I'm going to save it in the 01_08 CSS directory, and I'll just save it as main.css. Now, I could go ahead and start coding here, but I kind of like working with my HTML and my CSS files sort of side-by-side. So I'm going to close this document and go back to Resources.
I'll go over to my CSS Styles panel. The CSS Styles panel is sort of the central nervous system of working with styles in our sites. I'm just going to go right down here to the bottom and choose Attach Style Sheet. I'm going to go ahead and browse, and I'm going to browse to 01_08/_css and find the style sheet that we just created, click OK and for Media, I'm going to go ahead and type in screen,projection. So you can grab from the pulldown menu, or you can go ahead and type in comma separated Media types if you want to apply more than one.
We're just going to do Link. Click OK. Now, our main.css is attached, even though the style sheet is still empty. So why didn't I'd want to just start hand-coding directly in the CSS Style Sheet? Why did I go through the process of attaching it to the sheet? Well, inside Dreamweaver we have what's known as Related Files, and you can see that now that we've attached the CSS Styles Sheet to this page, I'm just going to go ahead and save my page, you see right below the tab, there is main.css, and all I have to do to view that is click on that, and it goes in and opens that up. Now, I'm going to switch to the Code environment, so that I can see nothing but my CSS, even though I'm still working on resources.htm.
So this allows me to switch back-and- forth between Design and Code, and I can visualize those changes that I'm making. I can also do a Split Screen view where I see the Design view on this side and the Code view on this side. It's a very efficient way of working with both your code and your page. You can sort of see those changes you're making all at once. Okay. Well, let's take a brief tour of the coding environment. Now, over here on the left-hand side, we have a brand-new toolbar. This is a Coding toolbar, and this has some really interesting things. It allows us to collapse Tags and expand those Tags, select Parent Tags, and that's all well and good for working with HTML, but it doesn't do a whole lot of good for us with CSS.
Now, we do have Line Numbers that we can turn on and off, so all these icons refer to something within your code. You can highlight invalid code. You can do word wrap, in case you have long strings of code. You can wrap your code in a comment, or you can delete a comment. Notice that I don't have quite enough screen real estate to show everything, so I click this little Show More section, and I can do things like Move or Convert CSS. So I can convert inline CSS to an external rule. I can move CSS Rules from one sheet or one page to another. I can indent code, and I can apply other formatting which we'll take a look at in just a moment.
I'm going to place my cursor right below the character set encoding option and the comment for CSS Document. By the way, these are all optional. You don't have to use them. You can use your own comments. You don't have to add the encoding characters here, but that's just something that Dreamweaver puts in by default. So we're going to write our first selector, and the first thing we want to do is just to control the body tag. Go ahead and set some defaults for our page. So I'm going to type in "body" for the selector. Now, Dreamweaver is not going to help you write your selectors. You're going to have to know what selector it is you're writing.
In this case, we're writing an element selector, and we're controlling the body tag. Then I'm going to open up a curly brace. Now, notice that the moment I open up curly braces, we get something that's known as Code Hinting and Code Completion. We're going to take a closer look at that a little bit later on. Now, if I hit Enter or Return, it will return me to the next line, but notice that it indents for me. It's basically following the rules that I've set up for in my code formatting, and we set that earlier in the movie on Preferences. I'm going to type in an m and notice that it jumps right down to Margin. So if that's what I want and in this case it is what I want, I can just hit Return, and it finishes typing it for me.
I'm going to type in a 0 for no margin and a semicolon, and that property and value are done. You can see how fast that is. Now, I'm going to hit Return to go down to the next line, and I'm going to type in padding. I want to type in the whole thing because this is a better way to learn the syntax. So I'm going to type in padding, then type in a colon. So your properties and your values are separated by a colon. I'll type in a 0 again and then a semicolon padding: The semicolon basically ends the line. It says, okay I'm done with this one, and I want to move on to the next one. Watch what happens when you leave it off. I'm going to remove the semicolon, hit Return to go down to the next line.
Now, in the next line, notice that we're not getting our code hinting anymore; we're getting values for the previous property, because we haven't closed it yet. Then I can type in the word font, but watch what happens. You notice that font has not changed color. It's still that sort of light blue that I set earlier. Now here, if I type in font:, I'm not getting any code hinting whatsoever. So Dreamweaver is giving us all sorts of clues that our syntax is currently wrong. I'm going to type in 100% and then a space, then type in Georgia, "Times New Roman" three words, Times, serif.
Now here, I'm going to go ahead and type in a semicolon, hit Return and finish by closing my curly brace. Now, you might say well, you know, is this going to work? Actually, a lot of browsers will render that correctly, but it's a really good idea to go ahead and put the semicolon back in. Notice as soon as I do that, Dreamweaver tells me okay, yes, that's okay, because it gives me the code coloring to let me know that that syntax is correct. Now, that's not the only way that you can write your CSS styles. I have each property on a separate line because it really helps me read that. But there is nothing saying you have to do that. If I go down to the next line and type in h1 and open up a curly brace, notice that I could say font-size: 2em for 2 ems, and I could type in a semicolon, and on the very same line I can just type in color and then do #193742, another semicolon.
So 193742, and I can do margin-bottom: .4em and then a semicolon. And on that very same line, I can close my curly brace, so this syntax is exactly the same as this syntax. It all has to do with readability. The machine doesn't care whether it's on the same line or whether it's on a separate line. So this is a little bit easier for us to read, but this rule will work just fine. In fact, it would save you a little bit of space when you go to deploy your styles, and we'll talk more about that a little later on in the title.
Now, what happens if you get a mixture? Maybe you've written it; maybe someone else has written it. You have some rules are formatted one way. Some rules are formatted another way. Well, that's where our Code Format Preferences come into play. Just to review those really quickly, if I go up to Edit and choose Preferences, that would be Dreamweaver Preferences on the Mac, I can go to my Code Formatting, click on the CSS button, and I get all these different properties that I can set and a preview of how my styles are going to be written, and that, of course, is if Dreamweaver writes them for me. But what's nice about that is Dreamweaver remembers those preferences.
So if I come down here to my Coding toolbar, click on Show More, and I go right here to this little paint bucket where it says Format Source Code, I can say Apply Source Formatting and notice it goes ahead and converts the rule that we just created to being from one line to multiple line. So at any point, if you're coding and you want to go ahead and change all of your rule formatting all at once, rather than having to do that all by hand and going there and hit Return or move everything to one line, you can just change your Preferences, hit that, and it's going to go ahead and switch it for you, which is really cool. So hand-coding your styles does require you to understand how to write the desired selector.
You have to know which properties you can set for that particular selector and which values are accepted by those properties. So in short, if you want to hand-code, you need to know CSS; however, as we'll see in our next movie, code hinting and code completion make this process much easier and can assist designers that are new to writing CSS by hand.
There are currently no FAQs about Managing CSS in Dreamweaver.
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.