肖鹏 网页制作课件第4章.ppt

网页制作 第4章 网页布局与模板 4.1 页面组成 4.2 网页布局版式类型 4.3 注意事项 4.4 表格布局 4.5 CSS布局 4.6 模板 4.1 页面组成 网页页面由各种页面元素组成，而页面元素表现出网页的信息。 这些信息区域主要包括：页眉区（网站标志logo、横幅banner、导航栏navigator）、内容区（侧栏、主内容区）、页脚区（版权copyright）。 4.2 网页布局版式类型 网页布局版式的基本类型可分为网页页面布局版式的基本类型可分为封面型、“国”字型、拐角型、标题正文型等几种。。 1. 封面型 封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合局部的动画效果，之后在网页中放上几个简单的链接或者仅放一个“进入”或“Enter”之类的链接，以提示访问者进入网站的下一级页面。 2. “国”字型 “国”字型结构是指网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列，其中中间的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 “国”字型结构主要用在网站的首页中。 3. 拐角型 拐角型结构与“国”字型结构其实只是形式上存在一些区别，即网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的两列，其中较宽的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 拐角型结构主要用在网站首页或栏目页面中。 4. 标题正文型 标题正文型结构是指网页的主要内容是文章的标题正文，此外也包括网页的Logo、横幅、导航栏、版权信息等内容。 一些文章页面或注册页面等就是这种类型。 4.3 注意事项 1. 网页的宽度 2. 网页的高度 3. 网页文件大小 1. 网页的宽度 浏览器一般都有一个大概25像素宽的纵向滚动条，所以网页的最大宽度小于或等于水平分辨率-25。 2. 网页的高度 网页的高度一般以浏览器窗口的屏数来度量，网页的长度一般不宜超过3屏。 过长的网页不方便访问者查找自己想要的内容。 3. 网页文件大小 在设计网页时，必须保证网页能被访问者快速地下载，即保证网页文件体积尽可能小。 一般地，网站的首页文件（包含所有图像、文本和多媒体对象）不宜超过30KB，网站二级页面的文件不宜超过45KB。 4.4 表格布局 表格作为传统HTML语言中主要的页面容器，可以作为网页页面的布局手段。 表格布局方式通常采用表格和CSS相结合的方式表现网页页面，除了表格的一些基本属性外，页面元素的表现修饰都采用CSS来完成。 4.4.1 表格布局一般步骤 1. 页面基本属性设置 2. 使用表格纵向划分页面区域 3. 添加嵌套表格 4. 添加页面元素 1. 页面基本属性设置 页面基本属性主要包括页面字符集编码、文字修饰（字体、大小、颜色）、链接效果、页面背景等。 页面基本属性修饰主要通过CSS规则设置来完成，而且最好放入外部CSS文件中，以便网站中其他页面引用，统一网站网页显示效果。 2. 使用表格纵向划分页面区域 页面区域主要包括页眉区、广告区、内容区、页脚区等。这些区域通常为纵向排列，使用独立表格来分别表现各自区域。通常这些表格的宽度相同，边框、填充和间距都为0，行列数由区域表格包含的分块内容决定。 3. 添加嵌套表格 在页面区域表格中的相应单元格里添加嵌套表格，用于表现页面区域中的分块内容。而嵌套表格的单元格中有时根据表现需要可以继续嵌套表格，用于区域内容划分、内容表现修饰等。 嵌套表格的各个属性设置通常根据内容划分需要和表现需要进行设置。 4. 添加页面元素 在页面表格或嵌套表格中选择合适的单元格，其内添加页面元素，同时利用CSS规则对相应单元格和页面元素进行表现修饰。 4.4.2 表格布局的问题 表格布局页面通常需要大量嵌套表格，这样多层表格嵌套会带来两个问题：一个是浏览器解析的缓慢；另一个是代码维护与内容修改带来麻烦，例如找到插入点困难，调整布局结构难。 表格布局的最大问题是网页表现层与结构层混在一起，这对于页面的维护、更新、动态控制都带来麻烦。 4.5 CSS布局 CSS是Web标准中进行页面布局的基础，可以完全实现结构与表现的分离，还可以对网页中的元素对象位置进行像素级的精确控制。 CSS布局摒弃了表格式布局，取代table的是div元素。div属于块级元素，也包括ul、li、dl等元素，都可用于布局。 4.5.1 盒模型 盒模型是CSS布局中的一个核心概念，简单地说，盒模型就是将每一个XHTML元素都看成一