网页制作_页面布局与模板.pptVIP

网页制作 第7章 网页版式设计 7.1 网页版式的基本类型 7.2 网页版式设计注意事项 7.3 页面布局基本步骤 7.4 模板 7.1 网页版式的基本类型 网页版式的基本类型可分为“国”字型、拐角型、标题正文型、左右框架型、上下框架型、封面型、Flash动画型等几种。 1. “国”字型 “国”字型结构是指网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的三列，其中中间的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 2. 拐角型 拐角型结构与“国”字型结构其实只是形式上存在一些区别，即网页的最上面是网站的Logo（标志）、Banner（横幅广告条）和导航栏，中间是当前网页的主要内容（通常被分成大小不等的两列，其中较宽的一列用来放置当前网页的主体内容），最下面是网站的版权声明等信息。 3. 标题正文型 标题正文型结构是指网页的最上面是当前网页的标题或类似的对象（如修饰性图像），下面是当前网页的正文。 一些文章页面或注册页面等就是这种类型。 4. 左右框架型 左右框架型结构，一般左面是导航链接，有时最上面会有一个小的标题或标致，右面是正文。 我们见到的大部分的大型论坛都是这种结构的，有一些企业网站也喜欢采用。 这种类型结构非常清晰，一目了然。 　　 5. 上下框架型 上下框架型结构与左右框架型类似，区别仅仅在于是一种上下分为两页的框架。 6. 封面型 封面型结构一般出现在网站的首页，大部分是通过精美的平面设计并结合局部的动画效果，之后在网页中放上几个简单的链接或者仅放一个“进入”或“Enter”之类的链接，以提示访问者进入网站的下一级页面。 7. Flash动画型 Flash动画型结构与封面型结构类似，只是该结构的网页是由Flash动画组成。 由于Flash动画具有丰富及强大的交互功能，所以该结构的网页可表达的信息更丰富，而且其视听效果也十分完美。 7.2 网页版式设计注意事项 网页的宽度 网页的高度 网页文件大小 1.网页的宽度 浏览器一般都有一个20像素宽的纵向滚动条，所以网页的最大宽度小于或等于水平分辨率-20。 2. 网页的高度 网页的高度一般以浏览器窗口的屏数来度量，网页的长度一般不宜超过3屏。 过长的网页不方便访问者查找自己想要的内容。 3. 网页文件大小 在设计网页时，必须保证网页能被访问者快速地下载，即保证网页文件体积尽可能小。 一般地，网站的首页文件（包含所有图像、文本和多媒体对象）不宜超过30KB，网站二级页面的文件不宜超过45KB。 7.3 页面布局基本步骤 设计草图 建立本地站点 创建网页 页面属性设置 使用表格或div划分页面区域 设置表格或div属性 插入嵌套表格或嵌套div 添加页面元素 对页面元素属性设置 1. 设计草图 2. 建立本地站点 建立一个文件夹用于管理站点所有文件，并在Dreamweaver8中将其设置为站点的根文件夹。 在站点根文件夹中建立一个resources子文件夹，用于存放非网页文件资源。 3. 创建网页 在站点中新建一个网页文件，并命名，例如：index.html。 4. 页面属性设置 利用菜单中【修改】|【页面属性】命令，进行页面基本设置。 包括： 基本文字格式 页面背景设置 链接效果设置 页面标题 编码 5. 插入表格 根据设计草图在网页页面中添加表格，明确各页面主要区域的位置和大小。 注意：表格的最上方、最下方、最左侧和最右侧的行列可用于“区域间隔”使用。 6. 表格属性设置 对页面中的表格的属性和单元格的属性进行设置，便于下面页面元素的添加。 注意：表格的边框、边距、间距值通常设置为0。 7. 插入嵌套表格 在前面添加的区域表格的某些单元格中添加表格（即嵌套表格），明确各细小部分的位置和大小。 注意：页面中只要是与其他部分性质有区别的内容，都可以占据一个独立的小表格。 8. 添加页面元素 在页面相应区域、相应表格或单元格内添加页面元素（如图片，文字，链接等）。 9. 设置页面元素属性 利用CSS对各页面元素进行格式设置。 7.4 模板 模板实质上就是一种特殊类型的文档，作为创建其他文档的基础，用于设计布局比较固定的页面结构或元素。 使用模板的好处： 网页风格一致，避免制作同一页面的麻烦。 修改共同的页面时，不必一个一个修改，只需要更改应用模板。 如果一个网站布局比较统一，拥有相同的导航，并且显示不同栏目内容的位置基本保持不变，那么这种布局的网站就可以考虑使用模板来创建。 1. 创建模板 2. 定义可编辑区域 3. 应用模板 1. 创建模板 （1）将网页另存为模板