精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程

让网站适合各种浏览器(建设网站注意问题)

来源:网页教学译文 时间:07-11-16 点击: 点击这里收藏本文

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像素的空白。
9 7 3 1 2 4 8 :

用户评论

广而告之