第三章网页布局.PDF

第三章 网页布局 知识要点 网页布局的各种设计要素 TABLE 布局技术中表格元素的使用 DIV+CSS 布局技术中DIV 的盒子模型概念 灵活运用CSS 实现对DIV 的控制 网页布局设计是根据网站内容和建站目的等基本要素,运用版面设计原理，将网页上的视觉元素 进行合理配置与表现的过程。网页布局的目的是实现信息传递的清晰化、合理化、人性化，并考虑 视觉形态的美化,使浏览者在阅读信息的同时，获得审美感受。要实现网页的功能性与审美性，设计 者必须为网页建立一种秩序。网页的布局过程不是简单地摆放各种元素，而是为网页建立秩序的过 程。 第一节 网页布局的设计要素 3.1.1 页面尺寸 由于页面尺寸和显示器大小及分辨率有关系，网页的局限性就在于你无法突破显示器的范围。 网页设计时，有一个最常用的指导性原则：页面长度原则上不超过3 屏，宽度不超过1 屏。这个原 则明显是从用户的体验出发，特别是宽度不超过一屏，其最基本的表现是浏览器不出现横向滚动条， 这几乎是目前的设计准则。那么这里的一屏到底是多大呢？普通用户通常浏览网页时，其浏览网页 的有效面积会受到下面几个方面的影响： 1.显示器的分辨率 主流的分辨率大小随着科技发展和用户购买力，这几年呈现上升趋势。具体采用哪种分辨率， 其数据取决于统计，页面设计应遵循网页的有效可视区域在绝大部分用户的浏览器中宽度占一屏的 范围内显示。下面是关于屏幕分辨率的最新统计数据： 图3- 1 W3Counter 于2014.6 发布的全球分辨率统计数字 从统计数据中可以看出，基本上用户绝大部分都在1024×768 以上。 2.网页浏览器软件 浏览器软件市场经过20 年的纷争与发展，现在是百花齐放，百家争鸣。随着WEB2.0 标准的推 广，现在的浏览器软件中互相冲突和矛盾的地方越来越少。只要保证市场占有率居大份额的两三种 浏览器效果完好，基本上因为浏览器引起页面错乱的情况就可以避免。下面是关于浏览器的最新统 计数据： 图3- 2 W3Counter 于2014.6 发布的全球浏览器软件统计数字 从图3-3 的数据中可以看出，浏览器软件占有率最大的三个软件是Chrome 浏览器、IE 浏览器 和Firefox 浏览器。在网页制作的过程中，应该至少保证在这三种浏览器中查看网页是效果一致的。 图3- 3 W3Counter 于2014.6 发布的全球浏览器软件市场份额统计 3.操作系统 毫无疑问操作系统目前是Windows 的天下，其中Windows 7 占绝大多数。 图3- 4 W3Counter 于2014.6 发布的全球操作系统统计数字 国内的浏览器依然是IE 的天下，这将会持续较长的时间，1024*768 的分辨率是主流，页面的 显示尺寸为：1007x600，操作系统以Windows 7 系统占主导地位。 1、800*600 下，网页宽度保持在778 以内，就不会出现水平滚动条，高度则视版面和内容决定。 2、1024*768 下，网页宽度保持在1002 以内，就不会出现水平滚动条，高度则视版面和内容决定。 3.1.2 页眉 页眉的概念是从书籍杂志设计中移植而来的。在网页设计中,页眉的作用是定义页面的主题。大 多数站点的名字都会设计在页眉区域里。这样做的目的是使浏览者能很快知道站点的名称及主题。 因此,在网页设计中，网站的页眉是页面设计的关键环节之一，直接影响了整个页面风格，它牵涉到 下面的更多设计细节和整个页面的协调性。页头常放置站点名字的图片和公司标志以及旗帜广告。 如图3-5 所示福建师范大学网站首页中页头放置了banner 图片和LOGO 标识。 图3- 5 福建师范大学网站首页 3.1.3 页脚 页脚和页眉相呼应，页眉是放置站点主题的地方，而页脚是放置制作者或者公司信息的地方。 另外，一些制作信息、联系方式都是放置在页脚的。还有一些网站，在页脚部分放置了一些文字版 的导航，让浏览者可以不必来回拖动，而在此处就进入其他的页面。如图3-6 所示腾讯网站首页的 页脚部分放置了网站许可证，文字版的导航，图片版的导航。页脚在整个页面中所占比例份额很少。 图3- 6 腾讯网站首页网页