繁體中文当前位置: 首页 > 网络学院 > 设计教程 > 设计理念 > 显示器的尺寸大小对网页设计的影响
设计理念 中的 显示器的尺寸大小对网页设计的影响
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-03-01 浏览: 3429 ::
收藏到网摘: n/a
Have you ever visited a Web site that looked, well … strange? Something about it just wasn't right. The design was well done but it just didn't seem to fit the screen. It happens quite a bit. The cause is lack of attention on the designer's part.
相信在你以前访问的网站中，有的虽然看上去非常舒服，但却有种让人难以接受的感觉。这就说明，它们的布局都是存在瑕疵的。不是说他们设计的不好，而是因为这些精心设计的网页难以适应显示器的尺寸变化。这种情况其实经常会发生。导致这个情况的原因是设计时考虑的不够周全。
One of the most challenging things a Web designer faces is designing a site that looks good on everyone's computer screen. Because there are so many different browsers, and because each surfer can have their monitor set to a different screen size, the designer must pay attention to how the pages will look in a variety of situations. Let's take a look at the three most important issues:
网页设计师所面临的最大问题就是：如何使每个网站的布局适应所有人的显示器尺寸和分辨率。因为用户使用的浏览器各不相同，显示器尺寸也存在差异，所以设计师所设计出来的网页就必须适应上述不同的情况。那么，让我们先来看看下面三个典型案例吧：
Does This Look Small to You?
你觉得这样的尺寸看上去小吗？
An important thing to understand about screen resolution is that it is NOT the same thing as screen size. The screen "size" (15", 17", etc.) itself always stays constant, whereas the "resolution" of a screen can change depending on your display settings. A 15" screen and a 17" screen might both have the same exact resolution, which means that the display would look the same, even though one screen is larger than the other.
我们首先要明白的重要一点就是显示器的分辨率和显示器的尺寸没有绝对的关系。显示器的尺寸是固定的（如：15寸、17寸等等），但是，分辨率的大小是依照显示器的内部设置来决定的。一个15寸显示器的分辨率可以和一个17寸显示器的分辨率相同。这就意味着，尽管17寸显示器比15寸大，但是其显示效果看上去却几乎相同。
Resolution is measured in pixels. A pixel is basically one dot on the screen. There are three basic screen resolution settings on computers: 640 x 480 pixels, 800 x 600 pixels, and 1024 x 768 pixels. A 640 x 480 setting means the screen is showing 640 pixels horizontally and 480 pixels vertically for a total of 307,200 pixels on the screen. A 1024 x 768 setting means 1024 pixels horizontally and 768 pixels vertically for a total of 786,432 pixels. So what does this mean to you?
分辨率是通过像素来定义的。显示就是显示器上的最小颗粒单元，即：一个基本点。一般的计算机中包含三个基本分辨率的设置：640 x 480 像素、 800 x 600 像素以及1024 x 768像素。640 x 480表示该显示器的水平扫描线上所包含的640个像素，垂直扫描线上包含480个像素，总共307,200个像素；1024 x 768表示该显示器的水平扫描线上所包含的1024个像素，垂直扫描线上包含768个像素，总共786,432个像素。想过吗，这些对你来说意味着什么呢？
Think of it as "zooming in" or "zooming out" on the same image. If you are viewing a Web page at a 640 x 480 resolution, you have "zoomed in" on it and are viewing it close up. The text and images probably appear larger but you might not be able to see the entire picture. Scroll bars might appear on the screen that all you to scroll horizontally to see everything on the page.
你可以设想一下，这就像是对同一张图片进行“放大”或“缩小”。如果你以640 x 480的分辨率查看这张图片，那就意味着你对这张图进行了放大。当然，这张图图看上去是更为清晰一点；但是，这张图很可能无法全屏显示。因此，你需要拖动水平或垂直滚动条来查看页面上的完整图片，这就比较麻烦。
Changing to a resolution of 600 x 800 would be similar to "zooming out" slightly from the 640 x 480 size. The text and images appear smaller than they did at the 640 x 480 setting and you may be able to see the entire picture rather than having to scroll from left to right. And finally, the 1024 x 768 setting "zooms out" even more. You can view the entire page, but there might be a lot of surrounding white space. Text and images appear much smaller and further away than they did at the 640 x 480 resolution.
如果你把分辨率改成800 x 600，那等同于你将这张图片在640 x 480分辨率的基础上进行缩小。虽然这样做可能会使原来的文字或图片缩小，但是，你可能无需拖动滚动条便可以浏览全部图片；当你把分辨率设置成1024 x 768时，那就意味着图片将会变得更小。你可以看到整张图片，但是，在图片的周围，可能会出现大片的空白区域。文字和图片都会变得比在640 x 480的分辨率下显示时小很多了
At this point, you might be interested in experimenting with your screen resolution to see the differences first hand.
基于这一点，你可能会饶有兴趣地在不同的分辨率下测试页面的显示效果。
Important note: You may want to make a note of your original resolution so you can change back after experimenting.
这里要指出一个重点：你应该记录原始分辨率下的页面显示效果，以帮助你在页面测试完毕之后改回原样。
For Windows users:
Windows用户设置分辨率的方法：
·Clicking on the Start button,
·点击“开始”按钮
·Select Settings,
·选择“设置”
·Select Control Panel,
·选择“控制面板”
·Double click on Display,
·鼠标双击“显示”
·The Display Properties window opens up
·此时，将打开“显示属性”窗口
·Click on the Settings tab at the top of the window
·点击窗口顶部选项卡中的“设置”选项
·Take note of original resolution
·记录原始分辨率
·Move the screen area bar by dragging it to the desired resolution.
·移动“屏幕分辨率”滚动棒设置你所希望的分辨率
For MAC users:
MAC用户设置分辨率的方法：
·Click the colored apple in the top left corner
·点击左上角的“彩色苹果”图标
·Choose Control Panels
·选择“控制面板”
·Choose Monitor and Sound
·选择“显示器和声音”
·Take note of original resolution
·记录原始分辨率
·On resolution, use the drop down selector to set your resolution.
·在“分辨率”窗口中，选择下拉菜单选择器选择你需要的分辨率
A Web designer needs to take all three of these screen resolutions into consideration when designing a Web site. Not an easy task as what looks good in a 640 x 480 resolution doesn't usually look good in a 1024 x 768 resolution and vice versa.
网页设计师必须在创建网站时同时考虑网页在上述三种不同分辨率下的显示情况。这并不是件容易的工作。因为在640 x 480分辨率下正常显示的页面，在1024 x 768的分辨率下未必得体，反过来也是一样。所以，要好好画上一番工夫。
Are Your Colors Safe?
你使用了“网络保险色”吗？
Mac's and PC's both use different color palettes, however they have 216 colors that are common to both. These 216 colors are considered to be "Web safe" colors. Using the 216 Web safe colors means that your colors will look fairly consistent on different computer platforms (Mac or PC), different operating systems (Windows or Mac), as well as different browsers (Internet Explorer and Netscape Navigator, to name two). As a side note, any graphics created for the Web, such as logos or buttons should also use the 216 Web safe colors.
虽然Mac 和 PC 使用不同的调色板，但是，其中有216种颜色是二者之间都通用的，我们称之为“网络保险色”。使用“网络保险色”意味着它可以适应不同的电脑平台、不同的操作系统（Windows或Mac）、不同的浏览器（IE 或 Netscape）。这里我要提醒你的是：对于像logo和按钮这样的图形也最好使用“网络保险色”对其进行配色。
How do you determine if a color is Web safe? Many programs, such as Macromedia Dreamweaver, come with a color picker that allows you to specifically choose Web safe colors. If you don't have a program like that, there are many free ones available on the 'Net. .
那么，你如何确定某个颜色是否是“网络保险色”呢？这里有很多软件，如：Macromedia Dreamweaver（Macromedia公司开发的专门用于网页制作的软件），它带有一个包含所有“网络保险色”的拾色器，你可以根据实际需要从中进行选择。如果你没有类似于这样的软件，你也可以在网上找到免费提供“网络保险色”的软件。
Your Browser, Their Browser… It's All the Same. NOT!
注意：你的浏览器和别人的不是完全一样的！
A Web site will appear differently depending on the browser being used to view it. The two most commonly used Web browsers are Internet Explorer and Netscape Navigator. However, there are many more - including the AOL browser, Mosaic, Opera, Lynx and Web TV to name a few.
通过不同的浏览器浏览网站，所看到的效果是不同的。当今最常用的两个浏览器是：IE和Netscape Navigator[网景]。同样的，还有很多其它的浏览器，如：AOL 浏览器、Mosaic、Opera、Lynx 以及 Web TV。
Not only do designers need to worry about cross-browser compatibility, but they also need to consider the version of the browser being used. For example, Internet Explorer 3.0 and Internet Explorer 5.5 support different features and may display pages differently.
Want to check your Web site for compatibility with Internet Explorer and Netscape Navigator? Run it through the validator at http://www.netmechanic.com. As a plus, this service also checks a Web site for broken links, html errors, possible spelling errors and approximate download times.
网页设计师不仅要考虑不同浏览器之间的兼容性问题，还要考虑浏览器的版本。举个例子来说，IE3.0和IE5.5支持的是不同的特性或脚本，因此，显示页面的效果也会不同。你过你想检测IE和Netscape Navigator的兼容性问题，你可以运行http://www.netmechanic.com 上面的检验器；同时，该检验器还能对网站中的无效链接、html错误、拼写错误和页面家在的大致时间进行验证或测试。
总而言之，要尽可能地从各个方面来测试一个网站。将网站放在不同的分辨率下、不同的电脑平台上以及不同的浏览器上进行测试，尽最大可能确保网站在各种条件下都能够正常显示。这对于你的用户来说，会是一个很好的网络体验。
评论 (3) 