From the screen to the printer: Print CSS with Dreamweaver
Stephanie Sullivan
Www.communitymx.com www.violetsky.net
Adrian Senior
Www.Webade.co.ukwww.communitymx.com
Send Feedback Get An E-mail Update of New Articles
purpose
In the newsgroup, there is often a problem to ask how to organize good in the case of printing. Once, developers need to create a copy that only contains text and related images for all the web pages in the site to achieve this. CSS has completely changed this situation. In Community MX, we have benefited from the characteristics of printing a single specified style sheet through a stacked style sheet. Since the Community MX has a lot of tutorial, this can save time. To follow the reasons and methods behind the decision.
This article will analyze how our layout shows a set of elements on the screen, while using a set contains a layout that does not display the elements on the screen when printing. You will learn the type of media and how to use them, and it is to use laminated techniques to create a lightweight, practical print layout. Because Community MX regular changes to its site, if you read it after this article, some things may have little difference.
Claim
To complete this tutorial, you need to install the following software and files:
Dreamweaver MX 2004
Try Buy
Media properties: Screen, Print, and All
In Community MX, since the user is mainly composed of web developers, we decide not to support Netscape 4 (NN4) and Internet Explorer 4 (IE 4) browser on site. You will not see an example of a compatible old browser in this article, but you will know how the media type affects it if you want to provide NN4 support. There are a total of nine media descriptors to customize the display mode on different devices. If you are not familiar with the media type and their applications, Stephanie Sullivan has articles on Community MX Media Types.
Our website uses three different style sheets to control each tutorial. Each XHTML document is linked to the main style sheet (CMXLayout.css) that is set to all of the media type. This indicates that all devices use this style sheet. Then we set the media type of the main print style sheet (NewPrint.css) to Print. This indicates that the browser applies it when printing a preview and printing. In addition to the content in NewPrint.css, we used all the selectors in cmxlayout.css in print because of the stacking rules and its media type-all. We only need to use NewPrint.css for selectors that need to be hidden or changed during printing.
Note: The NN4 only understands the CSS documentation that does not specify the media type or specified by the media type of Screen. It can't understand the type of all media. So if you want NN4 to see the style, you must use one of them here. IE4 can read the CSS of the media type ALL. If you must support the old browser, you may need to use JavaScript methods or by hiding the media type ALL. Remember when printing, the style sheet for media types for Screen will not participate in print-print styles. To do this, you need to override all the selectors that appear in the Screen Style Table, transfer them to the Print style sheet to allow them to be used for printing.
Our third style sheet (pdfprint.css) used on Community MX is used to dynamically create a PDF document from each article or tutorial. Since the PDF document and document printing use the same style sheet, we use the ColdFusion designed a dynamic approach to specify the style sheet we need. The advantage of using these three style sheets is that we can coordinate globally from a centralized location - Those XHTML documents. If we need to change a tutorial, we only need to simply modify the XHTML documentation. Then, thanks to the power of CSS, we can create a PDF immediately, CSS will automatically see the screen and print version.
The order is very important
Based on lamination, the order of the style sheet links in the X / HTML document head link will affect the processing effect of all devices. Since cmxLayout.css uses the all media type, it is in the uppermost layer in the inheritance sequence. Any device for displaying information will access this file. When one day, the handheld device provides more support for CSS, we will likely add a style sheet using the Handheld Media Type to reformat information on those devices. If you use the Handheld style sheet, it will follow the main style sheet. Next, we placed NewPrint.css So so that it can also be beneficial by inheriting cmxlayout.css. Finally, we have also set up a dynamic PDF style sheet, you can't see it here. The PDF style sheet will use a lot of colorful appearance with a PDF using a slightly colorful look. It looks more like a screen with a print version. Below is a style sheet that is arranged in the correct order (XHTML format):
This is the same page that is processed by each of the various style sheets.
Figure 1. Two page versions of using different style sheets
As you can see, the two pages are different but the content is the same. When printing, the user does not need navigation elements, advertisements, or information on the sidebar. Because he is just interested in the tutorial. Remember this, you will remove those elements that don't need to create a clean, meaningful print style. Here, look at how we created these.
Hide elements from print style table
In Community MX, the left column of the site contains information on the latest subscription, free content, and accessibility tools. This information is located in the DIV element of one ID is #infodiv. This selection is in cmxlayout.css, which is defined:
#infodiv {
Position: absolute;
TOP: 160px;
LEFT: 7PX;
Width: 10em;
Z-Index: 1;
Background-color: #fff;
Color: # 036;
Font-Family: Verdana, Geneva, Arial, Helvetica, Sans-Serif
}
Be in
This element is completely removed from NewPrint.css
NewPrint.css redefined
#infodiv selector
, As follows:
#infodiv {
Display: none;
}
This is simple and easy to see the meaning from the literal. You only need to make DISPLAY: NONE to see the browser, you can remove #infodiv from the print display. To keep newprint.css simple and fine, combine you want to hide all the selectors hidden at print, separate them through a comma and space. In this example, we hide the CMXLayout.css, the elements in the middle are as follows.
#nav, #logo, #infodiv, #blue, #subbar, #menufooter, #tall, #ads, #sbg, #cacheit, .feedback {
Display: none;
}
Note: You may want to know why we have to use Display: None instead of seeing Visibility: Hidden to do the same thing. Both methods prevent the elements from display, but the Visibility property retains the space that is originally occupied. The Display property will not leave a vacancy. In this case, we prefer this effect - this is also needed.
Optimize page elements
When deleting or optimizing elements among NewPrint.cs, use the same selector name with the original style sheet. Although in fact, select Div # ArticleContent and a ID of the #ArticleContent selection is the same object, sometimes they lead to problems in the print style table. The Div # ArticleContent selectors will not overwrite the original #ArticleContent selectors in some cases. So when you want to redefine the H1 element in #ArticleContent Div, even if this is only the H1 in #ArticleContent Div, you should write #articlcontent H1-as the original style sheet. Please believe in us at this point; otherwise you may take hours to find any problems! Outer distance and width
Since the tutorial in the Community MX is in a DIV for #articlecontent, we need to make up to it in NewPrint.css. We hope that the content of the user is equilibrium and can attract people. Please remember that you are now a print designer. Therefore, you should now replace the pixel as a measure unit through inches and points to achieve a constant result. Remember the outer distance (margin) on the print page is determined by the user's printer settings. Repeated testing on a computer or colleague's computer is a good method so that you can verify that you can design it under most settings.
We set #ArticleContent Div to 7 inches wide. My test shows that this setting can work normally in us. We set the top-margin and the bottom distance to 0, and set the two side margins to Auto. In this way, we will not increase the margins set by the printer. Note that we reset the font color to black. If you are less familiar with those express CSS properties that appear in our most selectors, you may think that John Gallant and Holly Bergevin's Writing Efficient CSS will be helpful.
#ArticleContent {
Color: # 000;
Width: 7in;
Padding: 0;
MARGIN: 0 Auto;
}
Replace LOGO
Simplified logo in the print version actually exists in the XHTML document. Just as we hide from the print view, we used the Display: None method hidden from the screen from the screen in cmxlayout.css. The selection of the following hides the print version logo.
#printlogo {
Display: none;
}
.
#logo {
Display: none;
}
Since #printlogo is hidden, the normal stacking rules keep it, so we must change the declaration of this selection in NewPrint.css. As follows.
#printlogo {
Display: block;
}
Note: If you use the absolutely positioned layer, you must put them in the print style sheet back to the document stream, remember to change them to POSITION: Static to override the position: absolute. You may also need to set the width: Auto declaration. Remember to change these changes in the future.
Optimize font
The Sans-Serif font looks great on the screen, but what is the best on the print page? Very big reason makes books without Verdana, Lucida Grande, or Arial to print. When printing, the serif font can better help the eye identify the letter shape. Change your printing page into a Serif font like Times New Roman to make your page better than your default screen font, easier to read.
I am sure you have heard of pixels and points. And you know not to apply points definitions in the web document. But as mentioned earlier, you are making a style of printing. This is also a good time to change the font size to a point number. If you are not using black, then you have to change the font color. Test in a variety of browsers that use black as font color. Remember that many people will not print your colored web pages. It is important to compress it into grayscale. We keep the title as the same blue on the root screen to form a contrast with the staples of the black. With the title size, it is also easy to read with grayscale, dark gray. Redefine special selection
Community MX's articles and tutorials use some special CLASs with borders and background colors to highlight tips, warnings, and code blocks. Many people set their print preferences to make the background colors are not printed. But not all platform / browser combination allows you to control this. When printing with grayscale, the background color may generate a problem. Therefore, we decided to override our screen style with new print-friendly styles. In these styles, the background color is set to white to match the page background, and the border is also re-imparted. This means that even if the user can resolve the code block and prompt.
As an example, see two versions of the #ArticleContent .tip selectors. In CMXLayout.css, this selectator has a blue background and a 1 pixel border. It looks like this:
#articlecontent .tip {
Background-color: # 99b5e1;
Border: 1PX Solid # 036;
Color: # 000;
Font: 0.8em Verdana, Geneva, Arial, Helvetica, Sans-Serif
Margin-bottom: 10px;
Margin-Right: 0px;
Padding: 5px;
Width: auto;
}
In NewPrint.css, we change the background to the above, and set the border to a wider and expanded with a broken line, and indent on both sides so that it can be more prominent in the page. We set an 80% width and 10% of the margins per side to get it. Without the side margin, this prompt will be left aligned and displayed as 80% of its parent elements.
#articlecontent .tip {
Width: 80%;
Border: 2px dashed # 0158a6;
FONT: 0.8EM "Times New Roman", Times, Serif
Background-color: #fff;
Margin-Right: 10%;
Margin-left: 10%;
}
Note that the above selectors are different. Since the color and inner margin (Padding) are inherited by CMXLayout.css, there is no need to define. In the style sheet, we also redefined the style of all the inline elements in the tutorial so that inline and important code, usually have different background colors, through a deep font color and / or italic to help highlight These texts.
We hope this practice can swim your swimming and help you learn how to create a print style sheet for your site.
About author
