网页制作基础教程-模板和库的应用

作
将具体内容填入可编辑区域。
基 础
可编辑区域
重复区域
教
程
10.1 应用模板制作相似网页
10.1.3 实现步骤
网
页
1. 制作模板
制
作
1) 基本元素的制作
基
础
2) 插入模板区域
教
程
创建可编辑区域
创建重复区域
2. 创建基于模板的网页文档
3. 修改模板并更新
10.2 模板的基本操作
10.2.1 模板的基本特点
网页制作基础教程 （Dreamweaver CS3）
第10章 模板和库的应用
本章重点：模板、库的创建、编辑、 应用、修改，站点的更新。
难点：如何合理的设置和定义模板 的可编辑区域。
第10章 模板和库的应用
10.1 应用模板制作相似网页 10.2 模板的基本操作 10.3 库的应用 10.4 资源管理
④ 模板修改完成后，选择【文件】｜【保存】命令，保存 模板。
10.2 模板的基本操作
2. 更新页面：
网
页
保存模板时，Dreamweaver CS3会询问它是
制 作
10.2 模板的基本操作
网 10.2.3 创建模板区域
页 制
3. 修改模板区域
作 基
①在“文档”窗口中，选择区域选项卡。
础 教
②选择“修改”|“模板”|“删除模板标记”。
程
③对于“可选区域”，在选中其标识后，在
“属性”面板中单击“编辑”按钮进行修改。
10.2 模板的基本操作
10.2.4 创建基于模板的网页
10.2 模板的基本操作
10.2.5 更新模板及页面
网
页 1. 修改模板
制 作
① 选择【窗口】｜【资源】命令，打开资源面板，切换到
基
【模板】资源。
础
教
② 选中要修改的模板后右击鼠标，在快捷菜单中选择【编
程
辑】命令，或双击该模板，便可打开要修改的模板.
③ 在快捷菜单中选择【新建可编辑区域】╱【删除模板标 记】以添加或删除可编辑区域
网 1. 使用菜单方式
页 制
1. 选择【文件】｜【新建】|【新建文档】|【模板】，
作
选择新建的页面存放的站点及所用模板名称。
基 础
2. 选中【当模板改变时更新页面】的复选框时，当模板
教
被修改后，用此模板创建的网页也会被修改。
程
3. 单击【创建】按钮，此时在网页编辑窗口建立了一个
由模板生成的网页，设计者可在可编辑区域输入相关
建该文件夹。
模板文件的扩展名为.dwt。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 1. 创建可编辑区域
制
作
可编辑模板区域控制基于模板的页面中的
基 础
哪些区域可以编辑。设置可编辑区域，需
教
要在制作模板的时候完成。
程
不同部分（设为可编辑区域）
相似网页
完全一样部分（在模板中制作）
10.2 模板的基本操作
10.1 应用模板制作相似网页
10.1.1 案例综述
网 页
本例通过模板设计出网页的整体风格、布局，
制
当制作各个分页时，通过模板来创建，而当修改模
作
板时，与之相链接的网页都将随之改变。
基
础
教
程
10.1 应用模板制作相似网页
10.1.2 案例分析
网 页
在制作中，可利用模板来设计其相同部分，不
制
同之处留为可编辑区域，待在具体制作网页时，再
页，选择需创建的模板类型。单击【确定】，
创建了一个空白模板
10.2 模板的基本操作
10.2.2 模板的创建与保存
网
页 1.模板的创建Fra Baidu bibliotek法
制 作 方法二：在【资源】面板创建模板
基
础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【窗口】｜【资源】命令，打开【资源】面板，
选定面板左侧的【模板】按钮，单击“添加”按钮。
设置可编辑区域的具体步骤如下：
网 页 制
步骤1 在已创建的模板文件中，编辑网页， 其布局、制作方法与普通网页完全一致。
作
基
步骤2 将插入点放在想要插入可编辑区域的
础
地方
教
程 步骤3 在插入栏中选择【模板】，然后单击 【可编辑区域】按钮。
步骤4 在【新建可编辑区域】对话框中，输 入该区域的名称,单击【确定】按钮
的内容。而将AP元素的内容设为可编辑区域
时，则只能改变AP元素中的内容而不能改变
AP元素的位置。
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制
作
重复区域是可以根据需要在基于模板的页
基 础
面中复制任意次数的模板部分。
教
程
重复区域通常用于表格；但是，也可以为
其他页面元素定义重复区域。
方法三：利用现成网页创建模板
1. 打开欲做模板的网页。
2. 选择【文件】｜【另存为模板】命令。
10.2 模板的基本操作
2、模板的保存
网
页
新建的模板文件会保存在本地站点的
制
作
Templates文件夹中。
基
础
如果该Templates文件夹在站点中尙不存在，
教
程
Dreamweaver CS3将在保存新建模板时自动创
10.2 模板的基本操作
10.2.3 创建模板区域
网 页 2. 创建可重复区域
制 作
在模板中插入重复区域的操作步骤：
基
础
① 选择想要设置为重复区域的文本或内容。
教 程
② 选择“插入”|“模板对象”|“重复区域”。出现
“新建重复区域”对话框。
③ 在“名称”文本框中为模板区域输入唯一的名称。
④ 单击“确定”。 重复区域被插入到模板中。
10.2 模板的基本操作
要点提示：
网 页
1.表格布局的模板定义可编辑区域时，可将整
制
个表格或表格的某个单元格定义为可编辑区
作
域，但是不能同时将多个单元格定义为一个
基 础
单独的可编辑区域。
教
程
2.AP元素和AP元素中的内容是不同的元素，当
AP元素设为可编辑区域时，在应用该模板编
辑文档时，可改变AP元素的位置和AP元素中
内容。
10.2 模板的基本操作
10.2.4 创建基于模板的网页
网 2. 使用资源面板
页 制
1. 首先新建页面，通过【窗口】菜单打开资源面板
作
2. 选择面板中的模板资源。
基
础
3. 选中欲使用的模板，单击【应用】按钮；或将选中的
教 程
模板拖到编辑窗口。应用模板文档在右上角会标明模
板名称。
4. 在应用了模板的文档的可编辑区域内编辑相关内容。
网
页
制 使用模板的好处在于：
作
基
础
1.可以生成大批的风格相近的网页。
教 程
2.一旦模板修改了，就修改了一批网页（自动
更新）。
10.2 模板的基本操作
10.2.2 模板的创建与保存
网 页
1.模板的创建方法
制 作
方法一：通过菜单创建模板
基 础
1. 在文件面板中选择要创建模板的站点。
教 程
2. 选择【文件】｜【新建】｜【常规】｜模板