Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Defining and structuring new sites
- Adding and styling text, images, video, Flash, and more
- Previewing work in progress using multiple browsers
- Integrating assets from other CS4 applications
- Uploading and managing finished sites
Skill Level Beginner
Formatting text in Dreamweaver requires a slightly different approach than other programs that you might be used to. Unlike a page layout program like InDesign or a word processing program like Word, you don't just highlight the text and begin formatting. That's not to say you can't; just that the long-term results won't be what you are hoping for. Styling web pages is controlled through cascading style sheets. These styles can be stored within an external file linked to your web page, inside the web page itself, or a combination of these two techniques. Dreamweaver offers complete support for CSS, with the creation and management of your styles built into all formatting controls. Let's take a look at how Dreamweaver handles style creation when formatting text.
Here we have our index page open, and you can see that most of the page is styled, but in this section we still need to add a little bit of styling. Well, this is our main content section, and understanding the structure of your page is very important to controlling how it's styled. I am going to click inside my first heading here. I can see in this area called the tag selector; you will notice, it's right down here below our open document. It shows me the structure of the page in relation to where I am. I am inside a heading 1, which is inside of div named mainContent, which is inside another div called container, which is inside the body tag.
Now, understanding this structure means that we can create rules that are very specific for this heading and no other headings. We do that by writing what we call a contextual or descendant selector. Now, if that sounds complicated, don't worry. Dreamweaver help us along the rule creation process by writing these selector for us, which is really nice. So I can go down to my Properties inspector. Notice that it says, your targeted rule, if you started working right now, would be mainContent, but if I highlight some of the heading 1, notice that it would target a new CSS rule. So it responds to where you are focused and what you have highlighted.
I am going to click Edit Rule, and it's going to allow me to create a new one. Now I have to tell it which type of selector I want to use. In this case, I want a compound selector. This creates a descendant selector just like we were talking about. Notice that Dreamweaver goes ahead and resolves that for me. I could make it less specific or I could make it more specific, that's up to me. But here Dreamweaver gives me the option. I can also choose exactly where I want this rule placed and I am going to go ahead and place it in my existing external style sheet. Now, when I click OK, I get a series of formatting options that should be fairly familiar to you if you have ever worked with another program; what font do you want to use, what size do you want it. So here we get back into an area that most people are comfortable with.
Well, for the font-family, I am going to go to pulldown menu and I am going to choose Trebuchet. That's what I want my headings to be. For color, I can grab the color chip here and choose a color from the swatches, or if I happen to know the hexadecimal value of the color I want, I can type that in. So I will type in #1B9D95. I can see that's going to give me sort of an aqua color. Well, I am going to go ahead and click OK and you can see the heading changes to exactly what I want. Now at this point I can edit the selector as well. I didn't change the size, but I think that's a little too big. So I can come down into my Properties inspector and as I click inside of it, I can go ahead and change the size of this. So I can select the targeted rule and I can go ahead and click inside that and say, "No, I want that to be 1.6 ems," and as soon as I do that, the heading changes in size. Perfect.
Now, the Properties inspector is not the only place that Dreamweaver allows you to create style. In fact, most of the work that you do with your styles will be done through this panel, the CSS Styles panel. This panel is considered the central nervous system or hub for all of the style interaction in my document. So I have two tabs; the Current, which shows me what I am currently looking at on my page, and the All, which shows me all the styles. As a matter of fact, you can see the style that we just created. So now I want to create a style that controls the paragraphs and I can do that through the CSS Styles panel just as easily. I can go down here to the New CSS Rule, click, and I see a dialog box that looks very similar to what I saw before. I am just going to go ahead and edit this manually. If our last one controlled our heading 1's, I want this one to control our paragraph. So I'm just going to create a rule that says #mainContent p.
Again, Dreamweaver can sort of help me out with how this rule needs to be structured. I will define that in the external style sheet and I will just go ahead and click OK. Here I see the same exact dialog box I saw earlier. We will go ahead and choose Arial for the Font. We will size it at 0.9 em. Dreamweaver lets you know what units of measurement you have available to you. There's pixels, points, em. You have a lot of choices when deciding exactly which unit of measurement to use. I will also do some line-height; that will give us some line spacing. So, we'll do 1.4 em for that, little bigger. We will go ahead and make the color black, so #000.
Now, soon as I click OK, my paragraph restyles and reformats as well. Now, we have got one little last thing we want to do here. I noticed that the secondary heading hasn't styled either. The past two rules that we have created, we have created from scratch, but if you have got an existing rule, it's very similar to what you need. You don't really need to create it from scratch; you can just duplicate it and change it. So I am going to go to the mainContent rule over in my CSS Styles panel. I am going to right click it, that will be Ctrl+Click on the Mac, and I will just choose Duplicate. Now, when I do that, it says "Okay, well, what selector do you want to have these properties?" I will just choose the h2, which will be my subheadings, and click OK.
It creates a duplicate rule and my h2s now look exactly like my h1s. I can make a very quick edit by clicking on the rule, and then changing the size. Maybe I am going to change this one into 1.2 em. As soon as I do that, my secondary headings are a little smaller. So the mainContent is now formatted and matches the rest of our site stylistically. Well, Dreamweaver makes formatting our text very straightforward and efficient. I think that's easy to see than having a full understanding of CSS is important when planning out the look and feel of your web pages. If you are new to CSS, using Dreamweaver's starter pages and Style Creation dialog boxes can help speed up the learning process. Even better, as you learn more about writing and utilizing CSS, Dreamweaver actually becomes easier to use, since Dreamweaver is built around CSS based workflows.