Let's face it. Building a web site that browses consistently on multiple platforms and multiple browsers is not always as easy as we would like.

正视一个问题：设计出适合所有浏览器的网站，是一件很难的事情。

It is safe to say that most designers spend most of their time building their sites on a given platform. Those with the highest standards should, upon completion, take a look at their creation in different browsers and different platforms.

现在，大多数设计者为固定浏览器设计网站。而标准更高的设计者，则会考虑创建适合不同浏览器的网站。

Sure, you could see how it looks in Window 98 with Internet Explorer and let that be good enough, but do you really want to risk a bad web experience for millions and millions of potential visitors? Consider this....

当然，你可以考虑在IE浏览器的Windows98中，让网站呈现最好状态。但你真的希望让数百万潜在客户，对你的网站产生厌烦吗？

A recent statistic I saw reported that 12% of internet users were Macintosh users. Ignoring this fact is like creating a catalog that can only be optimally viewed by one in eight of your customers. Further more, not all of the Windows users are using Windows 98. Windows 95 continues to be widely used, and Windows 2000 and NT represent a significant percentage of visitors.

我看到，最近一项统计显示：12%的网络用户是Macintosh用户。如果忽视这个问题，就等于网站减少了1/8的客户。并且，并不是所有Windows用户都使用Windows98，仍然有很多用户使用Windows95，并且Windows2000以及NT用户也占到不小的一部分。

It would be remiss to ignore the small, but growing contingency of Linux users. Though small in number at this time, the popularity of the OS grows daily.

并且Linux用户数量正在不断增加，我们不应该忽视这一部分用户。尽管现在这部分用户数量少，但OS普及率每天都在提高。

Platform issues aside, Internet Explorer, despite Microsoft's inclusion of it with all Windows Installations, does not represent the only browser option. Netscape continues to enjoy a strong following of users numbering in the millions, and Lotus Notes is being used by numerous corporations as the "standard" browser and e-mail application.

尽管微软公司包含所有的Windows装置，但IE并不是唯一的浏览器。Netscape公司拥有数百万的浏览器用户。并且很多公司把Lotus Notes作为标准的浏览器和电子邮件应用程序。

Then, of course, there is AOL. Although basically an IE engine "under the hood" AOL continues to include certain differences. Considering the vast numbers of AOL users, this browser must not be overlooked. If your site does not look good in AOL, then you are risking turning away a huge percentage of potential visitors.

当然，还有AOL。尽管从根本上说，IE是AOL的默认浏览器，但它包含不同的种类。考虑到大量的AOL用户，网站必须重视这种浏览器。如果网站在AOL浏览器中呈现出糟糕的外观，你会流失掉大量潜在客户。

It should be clear that cross platform and multiple browser compatibility is a must. Therefore, understanding a few very basic and simple techniques to help keep your pages looking their best in the most places is also a must. Following, you will find a few tips and ideas to help you do just that.

网站设计中，我们必须考虑多种浏览器的兼容性。因此，为保证网站在不同浏览器中呈现出精美页面，我们必须了解几种基本、简单的设计技巧。下面几条建议可能会对你的网站设计有帮助。

1. Paint the canvas your visitors will see
1.精美的布局

As a web site designer wanting to be as efficient in my work as possible, I have configured my Mac to use two monitors. As my mouse leaves the screen of one, it appears on the other. Thus, I have a canvas that, on most days, is 1856 pixels wide over 32 horizontal inches. If I want to, I can easily boost that to over 2000 pixels wide. But, my clients and the average visitor on the web do not have two monitors. In fact, most of them have the screen resolution set to 800 X 600 or 1024 X 768. What's more, every single time I have gone to a client who uses AOL, their browser window opens to what looks to be a 640 pixel wide default no mater how large the monitor or screen resolution.

为设计最有效的网站，我在电脑上安装两个显示器，鼠标离开一个屏幕，就会出现在另一个屏幕上。因此，我的电脑屏幕宽度为1856像素，超过了32英尺；如果我喜欢，还可以增加到2000像素。但是，大多数客户和游览者不具备两个显示器，其实，大多数用户电脑屏幕分辨率为800x600或者1024x768。更重要的是，每一次见到AOL用户，他们的浏览器窗口设定为640像素，不管显示器分辨率是多少。

On one of my first projects, I had designed a site to a modest 700 pixel wide format with a nice top navigation area. I went to my clients office to get some "point and discuss" feedback to find her new 21 inch monitor -- set at 640X480 resolution. My designs looked terrible!

在我设计第一个网站时，把宽度设为700像素，网页顶部设置了精美的导航条。当我进入客户办公室，征求反馈意见时，看到在21英寸的显示屏（分辨率640x480）上，我的网站外观很糟糕。

If you intend your web site to appeal to the broadest range of visitors, you need to design in a way that will look good even at low resolutions. Check with some of your typical visitors and see what kind of resolutions they normally use.

要想网站吸引最多用户，必须保证网站在低分辨率的屏幕上，呈现出精美的外观。你可以对某些有代表性的访问者做一个调查，了解他们常用的分辨率类型。

2. Use Tables to Control Width
2.运用表格控制宽度

Tables are great things when trying to control the way text and images go together. In order to achieve a nice looking design, using tables is the first technique to consider.

控制文章和图片最好的方法就是使用表格。要想设计美观，可以首先考虑表格。

Tables can be assigned a fixed width in pixels or a fixed percentage of the window width. There are advantages to both approaches. If you are not concerned about the relative vertical arrangement of objects in a table cell, using the fixed percentage allows for more fluid layouts.

表格可以设置固定像素宽度或者窗口百分比宽度。这两种方法各有各自的优点，但如果你不介意表格内容垂直安排，你可以利用固定百分比宽度，因为它使布局更加多变。

If, however, you want to keep text wrapped around an image with more consistency, using the percent approach could lead to major differences. Text will wrap quite differently in a cells of different pixel widths.

然而，如果希望文字更连贯地围绕在图片周围，固定百分比方法可能会导致很大的变化。在不同像素宽度的表格中，文字环绕方式差别很大。

To have better control, consider using fixed pixel width. However, you must now start making some compromises. If you want to offer a site that looks good at 640X480, you will need to set your table width to 600 -- 620 MAX! You will want to center the table in the window to provide a nice look when wider windows are used. However, if your visitor has monitor resolutions set to 1600X800 and has the browser "maximized" your page will have 500 pixels of blank space on either side of your 600 pixel table.

可以利用固定像素宽度的方法，更好地控制网站。但首先你要做出一个选择。如果希望网站在640x480分辨率显示器中呈现精美外观，就把表格宽度设定在600-620（最大值）之间。你可能希望把表格放在窗口中心位置，在窗口宽度变大时，会使布局非常好看。然而，如果访问者的显示率设定为1600x800，让浏览器呈现最大状态，那么网页就会很难看：600像素表格的两边会出现500像素的空白。

Fortunately, few people will be browsing at this configuration. My experience visiting clients, friends, and family suggests that, even if monitor resolution is set at over 1000 pixels, the actual width of the browser window will be reduced to something less.

很幸运，没有人在这种情况下浏览网站。通过与客户、朋友以及家人的交谈，我发现：即使显示器分辨率超过1000像素，浏览器窗口的实际宽度也会被缩小。

You must decide if you will risk an odd looking page for those few who have HUGE monitor resolution or risk the annoying scroll bar for those with the basic 640X480

你是否希望在高分辨率的显示器上呈现出带有空白部分的页面呢？或者你是否希望在640x480分辨率状态下，出现水平滚动条浏览呢？这些问题必须要考虑。

3. Compromise your Font Use.
3.字体的运用

Supposing you select a fixed width table and have a cell that is 300 pixels wide. You write a headline in this cell, pick a font, and size it to look just right. Good for you. Too bad that headline will come up different on different systems.

假设：你选择了固定宽度的表格，有一个单元宽度为300像素。你在这个单元中写了标题，选定了字体，尺寸调整到最佳。你可能完成任务了，但标题会在不同系统中呈现不同状态。

Even on the same computer, there are very slight differences between how Netscape and IE render fonts. Remember the 1 in 8 visitor using a Mac? For technical reason it is beyond the scope of this article to describe, fonts are significantly smaller on a Mac than on Windows. Don't forget that your visitors can also set the default size for font display in their browser, too. If they do that, you are really starting to lose control of how fonts are displayed!

即使在同一台电脑中，字体在IE与Netscape两个浏览器下，呈现的状态也有细微的区别。记住：1/8的用户使用Mac。由于技术原因（就不在这篇文章中介绍了），字体在Mac中比在Windows中要小。不要忘记，用户可以在浏览器中设置默认字号，如果是这样，你就不能控制字体的布局。

One solution is to use cascading style sheets, but that technique goes beyond the casual designer's typical experiences. The other solution is to compromise. Make sure that it looks good on the predominant platform -- currently Windows -- but don't use the smallest font possible either or your Mac visitors won't be able to read it!

一个解决方案就是利用CSS，但是业余设计者不了解这项技术。另一种解决方案就是做出让步。确保网站在主要的展示平台中呈现精美外观，经常是在Windows中。但是尽量不要使用最小的字体，因为Mac访问者很难浏览这些尺寸很小的文字。

4. Check Your Final on Multiple Platforms
4.在不同浏览器中检验网站

I commit to my web design clients that their site will be look good to ALL visitors. To make sure this is the case, I have an Intel computer as well as my Macintosh. I have the Intel computer configured to boot into Windows 98, Windows 2000, and Linux. I test all the pages I design in these environments. I test in both Netscape and Internet Explorer on the Windows systems and the Mac. I enlist a partner to test with Lotus Notes and AOL.

我向网站设计用户承诺：网站会在所有的浏览器中呈现精美的布局。为了保证这个目标实现，我准备了两台电脑：Intel以及Macintosh。在Intel电脑上我设置了Windows 98、Windows 2000以及Linux。在这些操作系统下，我测试了所有的网页；同时在Windows与Mac系统下的Netscape和IE浏览器中，测试了所有的网页。同时，一位同事帮我测试了Lotus Notes和AOL浏览器中，网页的布局和运行。

This may seem excessive, but frequently there will be some little thing that shows up in one of the platform/browser configurations that requires some minor correction. Would it be good enough if I did not make the correction? Probably. However, it is always best to make a good first impression and on the web, where you have about 5 to 7 seconds to get visitors to commit to take an actual look, every little thing counts.

这个过程看起来很没有必要，但是网页经常会在某些浏览器中出现小问题，需要我们进行修改。如果不做修改，是不是也挺好呢？可能。但是，用户对网站的第一印象很重要，用户只需用5到7秒钟就对网站有了大体的印象，所以每一个细节都很重要，必须要注意。

If you do not have access to multiple platforms, enlist your friends. Stop by a library or a Kinkos and use their computers (often these places may have Macintosh computers as well as Windows computers).

如果你不能利用多个浏览器进行测试，你可以请朋友帮忙。你也可以利用图书馆或者Kinkos的电脑，通常那里既有Mac电脑，也有Windows电脑。

These four simple suggestions are the beginning of a journey toward the much larger goal of making the content of your web site universally available to your visitors. Ultimately, reaching this goal depends upon many factors. However, progress toward this goal must commence with awareness.

要让大部分用户浏览你的网站，只遵循这四条建议还是不够的。按照这些规则设计网站，只不过是实现目标的开始。完成目标还需考虑很多因素，然而实现目标必须从建立意识开始。

Understanding that your site will appear differently on different browsers and based on different user preference settings is an important first step toward awareness. Using tables and being conscientious with your use of fonts takes you one step further. Checking your work on various systems will begin to hint at how much further you have to go.

了解不同浏览器下，网站外观会不同；还要了解根据用户设置设计网站，这是确立意识的第一步。使用表格、慎用字体，让你更进一步。在各种系统中检验网站，可以让你了解还需要作哪些工作。

But, every journey must begin somewhere....

然而，每一个过程都是从某个地方开始的。

大学网站内容应该从简 高水平网站设计的三个主要规则

评论 (0) All