网站设计时,有一个最常用的指导性原则:页面长度原则上不超过3屏,宽度不超过1屏。这个原则明显是从用户的体验出发,特别是宽度不超过一屏,其最基本的表现是浏览器不出现横向滚动条,这几乎是目前的设计准则。那么这里的一屏到底是多大呢?
普通用户通常浏览网页时,其浏览网页的有效面积会受到下面几个方面的影响:
- 显示器的分辨率
这个由科技发展和用户购买力及喜好决定,其数据取决于统计。 - 操作系统
毫无疑问目前是Windows的天下,其中WindowsXP占绝大多数。 - 网页浏览器
IE依旧份额最高,但是Firefox、Opera和Safari等也有一定市场。 - 个人定制
主要是用户定制操作系统的样式、操作系统任务栏是否隐藏和浏览器的样式,但是总体上这部分应该属于高级用户,绝大部分用户依旧会使用操作系统和浏览器的默认样式。
计算一屏大小应基于以下原则:
- 一屏指绝大部分用户的浏览器显示网页的有效可视区域。
- 一屏的计算环境是Windows XP和浏览器均处于默认样式。
- 由于IE无论是否超过一屏都存在纵向滚动条的位置,Firefox和Opera是在页面超过一屏的时候出现纵向滚动条,且浏览绝大部分网页都有纵向滚动条的存在,所以一屏大小的计算都基于浏览器有纵向滚动条的状态下。
- 由于Firefox2.0在只浏览一个网页时不出现多窗口的控制栏,而其它的多窗口浏览器都出现多窗口控制栏且使用时都会同时浏览多个网页,所以一屏大小在Firefox中指多窗口的控制栏存在时。
下面是基于上面的原则得到常用浏览器和分辨率下的的数据结果:
| 有效可视区域(单位:px) | ||||||
|---|---|---|---|---|---|---|
| 屏幕 | 一 | 二 | 三 | |||
| 800 | 600 | 1024 | 768 | 1280 | 1024 | |
| IE6.0 | 779(+21) | 432(+168) | 1003(+21) | 600(+168) | 1259(+21) | 856(+168) |
| IE7.0 | 779(+21) | 452(+148) | 1003(+21) | 620(+148) | 1259(+21) | 876(+148) |
| Firefox2.0 | 783(+17) | 417(+183) | 1007(+17) | 585(+183) | 1263(+17) | 841(+183) |
| Opera9.0 | 781(+19) | 461(+139) | 1005(+19) | 629(+139) | 1261(+19) | 885(+139) |
关于上面数据的解释和一些其他事实:
- 在800×600分辨率和Windows XP下定制Windows的经典样式IE6的有效可视区域是780×445,Windows98、Windows 2000和Windows2003均采用经典样式切IE5.0、IE5.5、IE6.0的布局上相似,所以相同分辨率下应该比Windows XP默认的样式要大。
- 知道浏览器型号和屏幕的分辨率能够很容易的推算出可视区域面积,比如1024×768下IE7.0的可视面积是(1024-21)×(1024-148)
CSS样式命名规则(仅供参考)
1.样式命名
外 套: wrap
主导航: mainnav
子导航: subnav
页 脚: footer
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainbav(globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
旗 志: logo
标 语: banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写:
< -- Footer -->
内容区
< -- End Footer -->
3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css