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
- 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
Skill Level Intermediate
As Web designers, we are likely to get caught up and writing styles for the screen without taking into consideration that there are many other devices such as printers that are likely to consume your content. If your site is not equipped with printer styles, pages will be printed as unstyled content, or by using your site's default styles. Now, the good news is that writing print style sheets is incredibly easy to do and gives us the ability to create an entirely new look and feel for our site, designed specifically for the printed page. So I have the resources.htm file open in the 04_01, and I'm just going to preview this really quickly in our browser.
So I'm going to preview that in Firefox, and I'm going to go up and do a Print Preview. So on the Mac, you could go ahead and do Print and then click the Preview button. And now we get to see what this page would look printed out. So we have a nice, big headline that shouts Welcome to Explore California, an unordered list that doesn't mean anything on the printed pages, an image, boy, that looks horrible. Look at that. The page breaks are happening poorly. There's some really bad stuff going on here. Our sidebar information is printed. Now, some of the things that people might want such as the address here is printing out just all by itself.
There are certain things we don't need to print. The navigation doesn't need to print. You cann't navigate using the print document. The sidebar information probably doesn't need to print. The footer information doesn't need to print, the header information. So we're just going to go ahead, and do the following selectors. So type in #header, #mainNav, #sidebar, #footer. Okay, so we're going to define that, not in main.css, but in a brand-new style sheet file. So this is kind of an interesting technique because here, we're going to create a brand-new CSS rule, put it in an external style sheet and link the external style sheet to this page, all in one step.
So that's pretty cool. I'm going to go ahead and click OK, and I'm going to save our brand-new external style sheet in the _css directory, and I'm just going to call it print.css, perfect. I'm going to go ahead and save that. Now our CSS Rule Definition dialog box comes up. So it went ahead and created the style sheet for us, linked it to the page, and now we're free to go ahead and place styles inside of it, which is really cool. Now, I'm going to go to the Block category, and the first thing that I want to tell this is to display none. I don't want these to print out at all. So display none, I'm going to go ahead and click OK and do a Save All.
Now, I wasn't going to say well, look, nothing on the page changed, but nothing could be further from the truth; a lot of stuff changed. So what happened here? Well, if I look over at my CSS Styles panel, and I'm just going to roll the Files panel down a little bit here, you can see that the print.css style sheet looks very different up here from the main.css. Let me collapse those so you can see them together. Notice main.css says hey, I'm only affecting screen of projection but print, it's mum on that issue entirely. So if a style sheet does not have a media type assigned to it, it goes ahead and applies to all media types, which in this case is causing us some big problems here onscreen.
So we need to tell the print style sheet that indeed it only affects the printed page. You'll notice we didn't get that prompt when we created the style sheet that way. That's for me one of the drawbacks of using that, but it's easy enough to put in ourselves, and we'll just switch over to code and do it very quickly. So I'm going to switch over to Code View and in Code View, I want to find Line #7, that's where my print style sheet has attached itself. At the very end of that, I'm going to add media="print", and you can just go ahead and let code hinting help you out with that. Just make sure that you have the self closing tag done right, space forward slash and that there'll be end of the tag.
So I'll go ahead and save that and switch back into Design View. Now what's really interesting here in Design View, we get our page back, yay, right? Everything is showing up again. And over here, it says print.css, and this says print. Now, I want to introduce you to a toolbar that you may have seen. I know we've talked about a little bit earlier, but you may have never used it, and it's this toolbar right here. This is the Style Rendering toolbar. If you don't see it, you can go up to View, choose toolbars, and you want the Style Rendering toolbar. You can also right-click the Document toolbar and choose it that way.
Now, this toolbar can float unless you are on a Mac, in which case it's always going to remain docked with the Document toolbar. I like it being there as well, and so I'm using to have it docked somewhere on the Document toolbar, usually on the right-hand side, but left-hand is fine, too. It's not really hurting anything. And what I'm going to do now is going to make designing our print style sheet a lot easier for us. So what I'm going to do is go over to the Style Rendering toolbar, and I'm going to tell it to render the Print Media Type. As soon as I do that, notice that the page entirely changes, and now we're seeing a preview of what the printed page is going to look like.
This is really cool. This means that we can start designing inside of our print style sheet, adding selectors to it, and we'll see the changes here directly in our screen, which is really neat. Now let's add a few more selectors to our print style sheet. So I'm going to go over to my CSS Styles panel and click on the selector that I have here already. And I'm going to go ahead and create a brand-new CSS Rule. Now for this one, again, I'm going to go down to Compound because I'm going to be grouping some selectors together. I'm going to type in a.breadcrumb, that's the links at the top of the page, comma a.top,ul.faqNav so faqNav.
So three other elements: breadcrumbs, links at the top of the page and any unordered list that is part of the faq.navigation, so those were actually links that you could click on to jump further down the page. I'm going to make sure that they're being defined in the print.css. I'm going to go ahead and click OK, and I'm going to go to the Block category and once again, I'm going to tell it to display none. So while I think they are great, I certainly don't need to see them in the printed page. So I'm going to go ahead and Save All. If you're working on your print styles, you don't have to create all of them within the CSS Styles panel.
I'm going to go ahead and collapse the CSS Styles panel down to Icons, switch to a Split View and click on the print.css. So I'm actually working on the print style sheet. So again, I can see the Design View to the right of me. It's showing my print styles, and on the left-hand side, I get my code. Cool! Let's do a couple of more styles here. Let's type in #wrapper and put up curly brace, hit Return to go down to the next line, and here we're going to just type in width and then 6.5in, for inches. Now that, my friends, is interesting, is it not? Let's go ahead and close our curly brace.
Now every single medium you design for is different, and I've had plenty of students asked me before, why in the world you can use inches in CSS? It doesn't translate to the screen at all. No, but it translates to the printed page. So when you're doing a print style sheet, it's really handy to be able to use inches. I'll go down to the next line. I'll type in body, and in the body tag selector, I'm going to do a font-family, and I want to do a font- stack that I don't see here. So this is one of the cool things about working in Dreamweaver. If you want to do a font-stack that you don't already see, you can click Edit Font List, and that comes right up.
I'm actually going to check for Chaparral Pro, and after Chaparral Pro, I'm going to do Cambria. So I'm going to find Cambria. There we go. After that, I'm going to do Georgia and then a San Serif. Now, if you're wondering, these are fonts, at least the first couple of them, that are more likely to be installed on your machine. Because these styles are for the printed page, I have a little bit more freedom in working with specific types of fonts. In this case, Chaparral Pro comes with a lot of programs these days. It's installed on a lot of machines. So is Cambria.
And then finally, I have a Georgia fallback font. So these are more print friendly fonts and at the very end, I'm going to add the Serif. There we go. So if you don't like the font stacks that are in there, you can build your own. I'm going to go ahead and choose that one and click OK, and then I can scroll down and grab it, hit Return, and it finishes it for me. You don't have to do that every single time. You only have to do at once, and it will remain in there. After that, I'm going to do font-size and my font-size is going to be 12 points. Points, ya! So again, all of our graphic designers, when I tell them only when you're doing the style, print styles sheets can use points.
They get so excited because they know exactly what 12-point text is supposed to look like, right? All right, now I'm going to do a line-height here. So I'm going to do a line-height of 16 points. So now we're just going to go ahead and continue using points for the units of measurement when we deal with the print page. Let's do one more selector. Hit Enter, go down and do an h1 selector and here, we're going to do a font-size of 20 points, font-weight of normal - so I don't want it bold - and a margin-bottom of 20 points.
Again, we're working in points is quite extensively here, so there is our h1 selector. All right, so now, let's see if this looks any different. We're going to do a Save All. We're going to preview this in our browser. Now once again, we're going to do a Print Preview, and that looks a lot better. Notice the font. Again, there's Chaparral Pro font in here. Everything is looking pretty decent at least, or at least it's moving in the right direction. Let's put it that way. Now if we were satisfied with just changing the look of the printed pages, all we would really need to do is continue to style a couple of these individual elements here and there; however, there are some styles that are specific to print styles, and they can only be used with the printer, and they give us a pretty powerful functionality.
In our next movie, we're going to explore some of those print-specific styles and a few other techniques that can make our print style sheets even more powerful.