| 适于打印的网页设计 |
|
来源：互联网 |
时间：2008-02-28 |
浏览：
相关评论 |
报告错误 |
发布文章
|
【字号：大 | 中 | 小】
【背景色 
 】
|
|
Your site looks like it's working perfectly. You've tested it with several different browsers under various resolutions. The HTML complies with the standards and your CSS is impeccable.
你的网站看上去运行顺利，你在不同的浏览器、不同的分辨率状态下进行了测试，效果很好。HTML符合标准，CSS也没有错误。
Even if all of the above statements are accurate, everything still might not be the way it should. We often design for screens and blissfully forget that we need to take other devices into account as well. It's surprising to notice that while printers are very widely used, a large part of designers seem to completely ignore them.
即使上述情况都正常，也有可能出现其它问题。我们经常考虑显示器状况，但却忽视了其它装置，比如说，很多网站设计者忽视了广泛使用的打印机。
Why should I do this?
原因
The more text your site contains, the more reason you have to think about printers. Many people prefer to print out long pages instead of reading them from their screen. They can't take their 19" screen to the park, to their bed or to the beach. However, if they print your content on paper, they can read it whenever they want to, wherever they want to.
网站文本内容越多，你越应该考虑打印机问题，因为很多人不喜欢在显示屏中阅读大段文字，而喜欢打印下来，这样他们可以随身携带这些文字材料。然而，如果打印的内容不便于阅读，他们就很难满意了。
By giving your users the possibility to easily print your pages, you're making your site more usable. At the same time, you're encouraging people to spread the word about you and your site. What's more convenient, "Hey, read this great article" or "Hey, go to your computer, fire up your browser and go to this address to read a great article"?
网页便于打印的网站，可用性高，这样便于用户宣传网站。或者直接出现一些宣传性语言：“请阅读这篇有价值的文章”或者“打开电脑，输入这个网址，阅读这篇对你有帮助的文章”。
How do I do this?
方法
Ensuring that your site is printer friendly can be done in many ways. Personally, I prefer to use CSS for the job. While it is not supported by some older browsers, CSS is a good choice because it eliminates the need to create separate "printer friendly" versions of your pages. The same page can have one layout for browsers and another one for printers!
你可以使用很多方法，保证网页有一个好的打印效果。我个人比较喜欢运用CSS。当一些旧式浏览器不支持时，你可以使用CSS，这时你就不需要单独创建网页的打印版本，这张网页会在不同的浏览器中呈现同样的布局。
Unless you're already familiar with CSS, you might benefit from taking a quick look at HTML Help's CSS Tutorial before we begin. It's especially important that you familiarize yourself with class selectors, as many of the examples below will use them.
在利用CSS之前，你可以快速浏览HTML Help's CSS Tutorial，除非你已经了解CSS。最重要的一点是，你需要熟悉分类器，因为下面我们会用到。
That being said, let's open up Notepad and start creating our new external stylesheet file.
打开记事本，开始创建外部样式表文件。
Modify the layout...
修改布局
The first step is to eliminate everything that is useless in a printed version of the page. Banner ads, navigation menus and all unnecessary graphics should be removed. You can do this by adding a new class to the stylesheet:
首先去除网页打印版本中无用的内容，包括横幅广告、导航菜单以及其它不需要的图片，你可以在样式表中增加一个新类别，来完成这项任务。
BODY { background-color: white; font-family: "Times New Roman", Times, serif; font-size: 12pt; color: black }
Next, you'll need to think about page width. If your pages are too wide, they won't fit on the paper. Width problems are often caused by a layout that contains fixed-width tables. The solution is to either use relative widths, or to make sure that the fixed width is not too large. In order for your pages to print correctly, they should have a maximum width of approximately 600 pixels.
然后，你需要设置网页宽度。如果网页太宽，就适于打印。包含固定宽度表格的网页布局通常会引起宽度问题。解决方法是使用相对宽度，或者不能把固定宽度定得太大。为使网页打印效果良好，宽度不能超过600像素。
As CSS overrides the HTML definitions, it's easy to change the size of your tables. For example, defining a relative width of 100% can be done with the following class:
由于CSS不需要考虑HTML说明，所以很容易修改表格大小，比如说，你可以通过以下内容定义100% 的相对宽度：
BODY { background-color: white; font-family: "Times New Roman", Times, serif; font-size: 12pt; color: black }
...and don't forget the details!
不要忘记以下内容！
Your next concern is the font. The one you use for screen display might not be the best one for paper. Sans-serif fonts, such as Arial, are often considered to be the most suitable fonts for the Web. On the other hand, Times New Roman is generally the best solution for printed content.
接下来要考虑字体问题。显示器中的字体并不一定是理想的打印字体。Sans-serif字体，例如Arial，通常被认为是最合适的网站字体，但Times New Roman被认为是最好的打印字体。
In addition to the font style, you'll also need to consider its size. The font has to be large enough so that it can be read easily. However, if it's too large, it'll take up unnecessary space. The optimal size in my opinion is somewhere around 12-14 points.
当然，我们还需要考虑字号。字体必须足够大，便于用户阅读，然而，如果太大，会占用不必要的空间。我个人认为最理想的字号为12-14pt。
Consider setting the background color to white and the text color to black with CSS. Some printers do print background images and colors, which is usually just a waste of ink. Even worse, if the text color and background color are close to each other, the printout may be impossible to read.
假如，网页背景颜色为白色，文本为黑色。有些打印机确实能打印背景图片以及颜色，但通常是浪费墨。更糟糕的是，如果文本颜色与背景颜色接近，打印内容会难以阅读。
Instead of using a class selector for these modifications, it's usually more comfortable to simply change the way in which the text inside the BODY tag is displayed. Setting the font to black 12-point Times New Roman and the background to white can be achieved with the following CSS statement:
我们可以更改BODY标签中的内容，这样比利用分类器修改还方便。通过以下CSS内容，可以把字体设置为黑色的Times New Roman字体，12pt，背景为白色：
BODY { background-color: white; font-family: "Times New Roman", Times, serif; font-size: 12pt; color: black }
The final touch
实行
After you've created a stylesheet that is to your liking, link it to your HTML files. To do that, simply place the following line between the
建立了自己需要的样式表以后，把样式表与HTML文件进行链接。你只需要把以下内容放入
BODY { background-color: white; font-family: "Times New Roman", Times, serif; font-size: 12pt; color: black }
tags:
标签中
BODY { background-color: white; font-family: "Times New Roman", Times, serif; font-size: 12pt; color: black }
All that you'll need to do now is to use your new classes in the appropriate places and you're set to go. Happy printing!
现在，你需要做的就是在合适的地方运用新的分类，希望网页可以呈现出好的打印效果。
|
|
 |
| |
|
|
|
|
收 藏
投 稿
繁 体
RSS 
欢迎在本站发布信息，在线投递稿件
我要投稿
打印本文
推荐本文
加入收藏
返回顶部
关闭窗口
