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

8. 添加页面元素
在页面相应区域、相应表格或单元格
内添加页面元素（如图片，文字，链接
等）。
9. 设置页面元素属性
利用CSS对各页面元素进行格式设置。
7.4 模板
模板实质上就是一种特殊类型的文档， 作为创建其他文档的基础，用于设计布 局比较固定的页面结构或元素。 使用模板的好处：

网页风格一致，避免制作同一页面的麻烦。 修改共同的页面时，不必一个一个修改，只 需要更改应用模板。
7.3 页面布局基本步骤
1.
2. 3. 4. 5. 6. 7. 8. 9.
设计草图 建立本地站点 创建网页 页面属性设置 使用表格或div划分页面区域 设置表格或div属性 插入嵌套表格或嵌套div 添加页面元素 对页面元素属性设置
1. 设计草图
2. 建立本地站点
建立一个文件夹用于管理站点所有文 件，并在Dreamweaver8中将其设置为 站点的根文件夹。 在站点根文件夹中建立一个 resources子文件夹，用于存放非网页 文件资源。
注意：表格的最上方、最下方、最左侧
和最右侧的行列可用于“区域间隔”使
用。
6. 表格属性设置
对页面中的表格的属性和单元格的属
性进行设置，便于下面页面元素的添加。
注意：表格的边框、边距、间距值通常
设置为0。
7. 插入嵌套表格
在前面添加的区域表格的某些单元格 中添加表格（即嵌套表格），明确各细 小部分的位置和大小。 注意：页面中只要是与其他部分性质有 区别的内容，都可以占据一个独立的小 表格。
浏览器一般都有一个20像素宽的纵向 滚动条，所以网页的最大宽度小于或等 于水平分辨率-20。
2. 网页的高度
网页的高度一般以浏览器窗口的屏 数来度量，网页的长度一般不宜超过3屏。
过长的网页不方便访问者查找自己 想要的内容。
3. 网页文件大小
在设计网页时，必须保证网页能被 访问者快速地下载，即保证网页文件体 积尽可能小。 一般地，网站的首页文件（包含所 有图像、文本和多媒体对象）不宜超过 30KB，网站二级页面的文件不宜超过 45KB。
定义步骤： （1）打开新建的模板文件，在文档中选 择要定义为可编辑区的区域。 （2）选择【插入】|【模板对象】| 【可编辑区域】命令。 （3）在打开的【新建可编辑区域】对话 框中给该可编辑区域命名。
3. 应用模板




（1）选择【文件】|【新建】命令，打 开【新建文档】对话框。 （2）选择【模板】选项卡，切换到【从 模板新建】对话框。 （3）在【模板用于】列表中选择当前站 点，并在右侧列表中选择站点中模板。 （4）单击【创建】按钮。
7. Flash动画型
Flash动画型结构与封面型结构类似， 只是该结构的网页是由Flash动画组成。 由于Flash动画具有丰富及强大的交 互功能，所以该结构的网页可表达的信 息更丰富，而且其视听效果也十分完美。
7.2 网页版式设计注意事项

网页的宽度 网页的高度 网页文件大小
1.网页的宽度
网页制作
项目一

认识网页和网站
网页：存放在Web服务器上供客户机服务
用户浏览的页面； 是一种综合了文字、图片、动画和音乐等内容 的超文本文件，具有可视化和交互性的特点。
网站： 是网页的集合，网页是
构成网站的基本元素。
学习目标
了解网页的构成 掌握网页的布局设计 掌握不同风格网页的布局 熟悉Photoshop软件工具的应用
Logo
Banner 导航栏
版权声明等信息
3. 标题正文型
标题正文型结构是指网页的最上面 是当前网页的标题或类似的对象（如修 饰性图像），下面是当前网页的正文。
一些文章页面或注册页面等就是这 种类型。
当前页面的标题
当前页面的正文
4. 左右框架型
左右框架型结构，一般左面是导航 链接，有时最上面会有一个小的标题或 标致，右面是正文。 我们见到的大部分的大型论坛都是 这种结构的，有一些企业网站也喜欢采 用。 这种类型结构非常清晰，一目了然。
第1章 网页版式设计

网页版式的基本类型 网页版式设计注意事项 页面布局基本步骤 模板
7.1 网页版式的基本类型
网页版式的基本类型可分为“国” 字型、拐角型、标题正文型、左右框架 型、上下框架型、封面型、Flash动画型 等几种。
1. “国”字型
“国”字型结构是指网页的最上面是 网站的Logo（标志）、Banner（横幅 广告条）和导航栏，中间是当前网页的 主要内容（通常被分成大小不等的三列， 其中中间的一列用来放置当前网页的主 体内容），最下面是网站的版权声明等 信息。
Logo
Banner
导航栏
版权声明等信息
Hale Waihona Puke Baidu
2. 拐角型
拐角型结构与“国”字型结构其实只是 形式上存在一些区别，即网页的最上面是 网站的Logo（标志）、Banner（横幅广 告条）和导航栏，中间是当前网页的主要 内容（通常被分成大小不等的两列，其中 较宽的一列用来放置当前网页的主体内 容），最下面是网站的版权声明等信息。
3. 创建网页
在站点中新建一个网页文件，并命名， 例如：index.html。
4. 页面属性设置
利用菜单中【修改】|【页面属性】 命令，进行页面基本设置。 包括：
基本文字格式 页面背景设置 链接效果设置 页面标题 编码

5. 插入表格
根据设计草图在网页页面中添加表格，
明确各页面主要区域的位置和大小。
（2）新建模板
选择【文件】|【新建】命令，打开 【新建文档】对话框，然后在【类别】 列表中选择【基本页】，并在【基本页】 列表中选择【HTML模板】选项。单击 【创建】按钮。
2. 定义可编辑区域
模板创建之后，需要根据具体要求对 模板进行编辑，指定哪些区域可以编辑， 哪些区域不能编辑。在模板文档中，可 编辑区是页面中可变的区域，如具体栏 目区。不可编辑区是页面中不可变的区 域，如导航栏和版权栏等。
如果一个网站布局比较统一，拥有相 同的导航，并且显示不同栏目内容的位 置基本保持不变，那么这种布局的网站 就可以考虑使用模板来创建。

1. 创建模板 2. 定义可编辑区域 3. 应用模板
1. 创建模板

（1）将网页另存为模板 （2）新建模板
（1）将网页另存为模板


1）打开一个存在或已制作好的网页，删除其 中不要的内容，选择【文件】|【另存为模板】 命令，打开【另存为模板】对话框。 2）在【站点】下拉列表中设置模板保存的站 点，在【现存的模板】列表框中显示了当前站 点中的已有模板。在【另存为】框中输入模板 名称，单击【保持】按钮。
当前页面的标题
导 航 链 接
显示当前链接的内容
5. 上下框架型
上下框架型结构与左右框架型类似， 区别仅仅在于是一种上下分为两页的框 架。
导航链接
修 饰 图 案
显示当前链接的内容
6. 封面型
封面型结构一般出现在网站的首页， 大部分是通过精美的平面设计并结合局 部的动画效果，之后在网页中放上几个 简单的链接或者仅放一个“进入”或 “Enter”之类的链接，以提示访问者进 入网站的下一级页面。