第8讲 使用库和模板
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
五、从源文件中分离库项目
一旦在网页文档中应用了库项目,如果希望其成为 网页文档的一部分,这就需要将库项目从源文件中 分离出来。方法是,在当前网页中选中库项目,然 后在【属性】面板中单击 按钮,在弹出的 信息提示框中单击 按钮,将库项目的内容与库 文件分离,如图所示。分离后,就可以对这部分内 容进行编辑了,因为它已经是网页的一部分,与库 项目再没有联系。
返回目录
二、添加模板对象
比较常用的模板对象如下。
可编辑区域。 重复区域。 重复表格。
返回目录
(1)可编辑区域
可编辑区域是指可以对其进行添加、修改和删除网页元素等 操作的区域。选择【插入】/【模板对象】/【可编辑区域】 命令打开【新建可编辑区域】对话框,在【名称】文本框中 输入可编辑区域名称,单击 按钮即可,如图所示。
返回目录
也可以选择【文件】/【新建】命令打开【新建文档】 对话框,然后选择【空白页】/【HTML模板】或 【空模板】/【HTML模板】中的选项来创建模板文 件,如图所示。此时在【资源】面板的【模板】分 类中将增加此模板文件。
返回目录
(2)将现有网页另存为模板
将现有网页保存为模板是一种比较快捷的方式,方法是,打 开一个现有的网页,删除其中不需要的内容,并设置模板对 象,然后选择【模板】/【另存为模板】命令,打开【另存模 板】对话框,将当前的文档保存为模板文件,如图所示。
返回目录
返回目录
8.2.3 课堂实训——制作“一翔学校”网页模板
首先将“课堂实训\素材\第8讲\8-2-3”文件夹下的内 容复制到站点根文件夹下,然后制作“一翔学校” 网页模板,最终效果如图所示。 这是使用库和模板制作网页的一个例子,库项目已 经制作好不需要再制作,主要问题是创建模板,在 模板中引用库项目,并添加模板对象,最后使用模 板创建网页。
返回目录
(2)创建基于选定内容的库项目
也可以将网页中现有的对象元素转换为库文件。方法是,在 页面中选择要转换的内容,然后选择【修改】/【库】/【增 加对象到库】命令,将选中的内容转换为库项目,并显示在 【库】列表中,最后输入库名称并确认即可,如图所示。
返回目录
二、应用库项目
库项目是可以在多个页面中重复使用的页面元素。应用库项 目的方法是,单击【资源】面板底部的 按钮(或者单击 鼠标右键,在弹出的快捷菜单中选择【插入】命令),将库 项目插入到当前网页文档中。在使用库项目时, Dreamweaver不是向网页中直接插入库项目,而是插入一个 库项目链接,通过【属性】面板中的“Src / Library/ruishi.lbi”可以清楚地说明这一点,如图所示。
返回目录
可编辑区域在模板中由高亮显示的矩形边框围绕,该边框使 用在首选参数中设置的高亮颜色。该区域左上角的选项卡显 示该区域的名称。 在插入可编辑区域时,可以将整个表格定义为可编辑区域, 也可以将单个单元格定义为可编辑区域,但不能同时指定某 几个单元格为可编辑区域。 修改可编辑区域等模板对象的名称可通过【属性】面板进行。 这时首先需要选择模板对象,方法是单击模板对象的名称或 者将鼠标光标定位在模板对象处,然后在工作区下面选择相 应的标签,在选择模板对象时会显示其【属性】面板,在 【属性】面板中修改模板对象名称即可,如图所示。
返回目录
四、更新应用了库项目的文档
在库项目被修改且保存后,通常引用该库项目的网 页会进行自动更新。如果没有进行自动更新,可以 选择【修改】/【库】/【更新当前页】命令,对应 用库项目的当前网页进行更新,或选择【更新页面】 命令,打开【更新页面】对话框,进行参数设置后 更新相关页面,如图所示。
返回目录
从零开始
Dreamweaver CS4中文版基础培 中文版基础培 训教程
主讲:XXX老师
人民邮电出版社
第8讲 使用库和模板创建网页
教学目标 8.1 使用库
8.1.1 功能讲解 8.1.2 范例解析──使用库制作“美图欣赏”网页 8.1.3 课堂实训——将页面元素转换为库项目
8.2 使用模板
8.2.1 功能讲解 8.2.2 范例解析——使用模板制作“世界名瀑”网页 8.2.3 课堂实训——制作“一翔学校”网页模板
8.3 综合案例──使用库和模板创建网页和文件
教学目标
了解库和模板的概念。 掌握创建和应用库的方法。 掌握创建和应用模板的方法。
返回目录
8.1 使用库
8.1.1 功能讲解 8.1.2 范例解析──使用库制作“美图欣赏”网页 8.1.3 课堂实训——将页面元素转换为库项目
返回目录
8.1.1 功能讲解
返回目录
三、修改库项目
库项目创建以后,根据需要适时地修改其内 容是不可避免的。如果要修改库项目,需要 直接打开库项目进行修改。方法是,在【资 源】面板的库项目列表中双击库项目,或先 选中库项目再单击面板底部的 按钮打开库 项目,也可以在引用库项目的网页中选中库 项目,然后在【属性】面板中单击 按钮打 开库项目。
返回目录
8.2.2 范例解析——使用模板制作“世界名瀑”网页
首先将“范例解析\素材\第8讲\8-2-2\”文件夹 下的内容复制到站点根文件夹下,然后使用 库和模板制作“世界名瀑”网页,最终效果 如图所示。 这是使用库和模板制作网页的一个例子,库 项目已经制作好不需要再制作,主要问题是 创建模板,在模板中引用库项目,并添加模 板对象,最后使用模板创建网页,具体操作 步骤参考教材。
返回目录
(2)重复区域
重复区域是指可以在模板中复制任意次数的指定区域。选择【插入】/ 【模板对象】/【重复区域】命令,打开【新建重复区域】对话框,在 【名称】文本框中输入重复区域名称并单击 按钮,即可插入重复 区域,如图所示。 重复区域不是可编辑区域,若要使重复区域中的内容可编辑,必须在重 复区域内插入可编辑区域或重复表格。 重复区域可以包含整个表格或单独的表格单元格。如果选定“<td>”标签, 则重复区域中包括单元格周围的区域,如果未选定,则重复区域将只包 括单元格中的内容。在一个重复区域内可以继续插入另一个重复区域。 整个被定义为重复区域的部分都可以被重复使用。
创建库项目。 应用库项目。 修改库项目。 更新应用了库项目的文档。 从源文件中分离库项目。 删除库项目。
返回目录
一、创建库项目
创建库项目的方法有两种。
创建空白库项目。 创建基于选定内容的库项目。
返回目录
(1)创建空白库项目
创建空白库项目的方法是,选择【窗口】/【资源】命令打开 【资源】面板,单击 (库)按钮切换至【库】分类,单击 【资源】面板右下角的 (新建库项目)按钮新建一个库项 目,然后在列表框中输入库项目的名称并按Enter键确认, 如图所示。此时的库项目还是一个空白库项目,是没有实际 意义的,还需要通过单击面板底部的 (编辑)按钮打开库 项目添加内容。
创建模板。 添加模板对象。 应用模板。
返回目录
一、创建模板
创建模板文件通常有以下两种方式。
直接创建模板。 将现有网页另存为模板。
返回目录
(1)直接创建模板
在【资源】面板的【模板】分类中,单击右下角的 按钮,在“Untitled”处输入新的模板名称,并按 Enter键确认即可,如图所示。此时的模板还是一个 空文件,需要通过单击面板底部的 (编辑)按钮 打开添加模板对象才有实际意义。
返Hale Waihona Puke Baidu目录
返回目录
返回目录
六、删除库项目
如果要删除库项目,方法是,打开【资源】 面板并切换至【库】分类,在库项目列表中 选中要删除的库项目,单击【资源】面板右 下角的 按钮或直接在键盘上按Delete键即 可。如果删除一个库项目,将无法进行恢复, 所以应特别小心。
返回目录
8.1.2 范例解析──使用库制作“美图欣赏”网 页 首先将“范例解析\素材\第8讲\8-1-2\images” 文件夹复制到站点根文件夹下,然后创建两 个库项目“head.lbi”和“foot.lbi”和一个网页 文档“8-1-2.htm”,并在文档中引用两个库项 目制作网页,最终效果如图所示。 这是插入库项目的一个例子,可以先制作库 项目,然后再在网页中引用库项目,具体操 作步骤参考教材。
返回目录
返回目录
8.1.3 课堂实训——将页面元素转换为库项目 首先将“课堂实训\素材\第8讲\8-1-3”文件夹 下的内容复制到站点根文件夹下,然后将网 页文档“8-1-3.htm”中的页眉和页脚部分转换 为库项目,最终效果如图所示。 这是将网页中现有的对象元素转换为库文件, 可以先选择要内容,然后通过【修改】/【库】 /【增加对象到库】命令,将选中的内容转换 为库项目。
返回目录
(2)在已存在页面中应用模板
首先打开要应用模板的网页文档,然后选择【修改】/【模 板】/【应用模板到页】命令,或在【资源】面板的模板列 表框中选中要应用的模板,再单击面板底部的 按钮,即 可应用模板。如果已打开的文档是一个空白文档,文档将 直接应用模板;如果打开的文档是一个有内容的文档,这 时通常会打开一个【不一致的区域名称】对话框,如图所 示,该对话框会提示读者将文档中的已有内容移到模板的 相应区域。
在网页制作中,有时需要将一些网页元素应用在多个页面内。 当要修改这些重复使用的页面元素时,逐页修改相当费时, 但如果使用库功能则可以解决这个问题。 库是一种特殊的 Dreamweaver文件,可以用来存放诸如文本、图像等网页元 素,这些元素通常被广泛用于整个站点,并且经常被重复使 用或更新。在创建库项目时将自动生成库文件夹“Library”, 用于存放库项目,不能对其进行修改。
返回目录
(3)重复表格
重复表格是指包含重复行的表格格式的可编辑区域,可以定义表格的属 性并设置哪些单元格可编辑。选择【插入】/【模板对象】/【重复表格】 命令,打开【插入重复表格】对话框,并进行参数设置,然后单击按钮, 即可插入重复表格,如图所示。 重复表格可以被包含在重复区域内,但不能被包含在可编辑区域内。另 外,不能将选定的区域变成重复表格,只能插入重复表格。
返回目录
返回目录
8.2 使用模板
8.2.1 功能讲解 8.2.2 范例解析——使用模板制作“世界名瀑” 网页 8.2.3 课堂实训——制作“一翔学校”网页模板
返回目录
8.2.1 功能讲解
模板是制作具有相同版式和风格的网页文档 的基础文档。在Dreamweaver中,创建的模 板文件保存在站点的“Templates”文件夹内, “Templates”文件夹是自动生成的,不能对 其进行修改。
返回目录
8.3 综合案例──使用库和模板创建网页和文件
首先将“范例解析\素材\第8讲”文件夹下的 所有内容复制到站点根文件夹下,然后使用 库和模板创建网页,最终效果如图所示。 这是创建和编辑框架网页的一个例子,可以 先插入预定义框架集,接着再插入一个右侧 框架,然后在各个框架中打开网页,最后插 入浮动框架。
返回目录
三、应用模板
创建模板的目的在于应用,应用模板生成网 页的方式有两种。
从模板新建网页。 在已存在页面中应用模板。
返回目录
(1)从模板新建网页
选择【文件】/【新建】命令打开【新建文档】对话框,选择 【模板中的页】选项,然后在站点列表框中选择站点,在模 板列表框中选择模板,并勾选【当模板改变时更新页面】复 选框,以确保模板改变时更新基于该模板的页面,然后创建 基于模板的网页文档。