1、LOGO Dreamweaver CS5 网页制作项目实践网页制作项目实践 项目十项目十 模板的应用模板的应用 任课教师：陈春艳 项目十项目十 模板的应用模板的应用 项目分析项目分析 1 项目分解（子任务）项目分解（子任务） 2 任务目标任务目标 3 任务实现任务实现 4 任务扩展任务扩展 5 项目小结项目小结 6 Dreamweaver CS5网页制作项目实践 2 任课教师：陈春艳 项目导入项目导入 网站欣赏网站欣赏 思考问题： 这些网站有什么统一 的特点呢？ Dreamweaver CS5网页制作项目实践 3 任课教师：陈春艳 1 项目分析（概念的分析）项目分析（概念的分析） 模板是统一站
2、点网页风格的工具，用户在设计模板是统一站点网页风格的工具，用户在设计 批量网页布局的过程中，为了站点的统一性，批量网页布局的过程中，为了站点的统一性， 许多页面的布局都是相同的，可以将具有相同许多页面的布局都是相同的，可以将具有相同 布局结构的页面制作成模板，可以随时调用模布局结构的页面制作成模板，可以随时调用模 板，减少重复操作，提高制作速度板，减少重复操作，提高制作速度 。 使用模板既能快速创建风格一致的各个网页，使用模板既能快速创建风格一致的各个网页， 还能快速改变整个站点的布局和外观，为后期还能快速改变整个站点的布局和外观，为后期 的网站维护提供方便。的网站维护提供方便。 Dreamw
3、eaver CS5网页制作项目实践 4 任课教师：陈春艳 项目分析项目分析 本项目通过模板设计出网页的整体风格、布局，本项目通过模板设计出网页的整体风格、布局， 当制作各个分页当制作各个分页时，通过时，通过模板来创建模板来创建，而当修，而当修 改模板时，应用该模板的网页都将随之改变，改模板时，应用该模板的网页都将随之改变， 这使网页的制作形成一种这使网页的制作形成一种批量生产批量生产的形式，大的形式，大 大提高工作效率。大提高工作效率。 在网站中，常常有很多布局格式相似的在网站中，常常有很多布局格式相似的WEB 页面，在制作中，可利用模板来设计其相同部页面，在制作中，可利用模板来设计其相同部
4、分，不同之外留为可编辑区域，在具体制作分，不同之外留为可编辑区域，在具体制作 网页时，再将具体内容填入可编辑区域。网页时，再将具体内容填入可编辑区域。 Dreamweaver CS5网页制作项目实践 5 任课教师：陈春艳 应用 模板 创建 模板 管理 模板 项目分解（子任务）项目分解（子任务） 任务任务1 任务任务2 任务任务3 Dreamweaver CS5网页制作项目实践 6 任课教师：陈春艳 任务任务1创建模板创建模板 创建模板由两种形式，一种是直接创建空白模创建模板由两种形式，一种是直接创建空白模 板，另一种是将当前网页保存为模板文件。板，另一种是将当前网页保存为模板文件。 1.创建空
5、白模板创建空白模板 创建空白模板的操作步骤如下：创建空白模板的操作步骤如下： 新建模板新建模板 添加可编辑区添加可编辑区 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 注意事项注意事项 TIPS DW对中文的支持不佳，对中文的支持不佳， 在命名文件时候尽量使在命名文件时候尽量使 用英文字母。用英文字母。 模板是特殊文档，扩展模板是特殊文档，扩展 名是名是.dwt，不是，不是html 模板制作后，模板制作后，无法直接无法直接 预览预览 Dreamweaver CS5网页制作项目实践 8 任课教师：陈春艳 任务任务1创建模板创建模板 步骤步骤1：站点的设置：站点的设置 步骤步骤
6、2：制作模板（编辑统一风格区域：制作模板（编辑统一风格区域：不可不可 编辑区编辑区） 创建模板常用的方法创建模板常用的方法1： 使用资源面板来创建新模板或直接创建空白模板使用资源面板来创建新模板或直接创建空白模板 Dreamweaver CS5网页制作项目实践 9 任课教师：陈春艳 任务任务1创建模板创建模板 步骤步骤2：制作模板：制作模板规划网页布局规划网页布局 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 Logo区（锁定区）区（锁定区） 导航区导航区 （锁定区）（锁定区） 可变创作区可变创作区 （可编辑区可编辑区） 版权区版权区（锁定区锁定区） 任务任务1创建模板创建
7、模板 步骤步骤3：插入模板：插入模板可编辑区可编辑区 （用于显示（用于显示不同内容的编辑不同内容的编辑 区域区域） 方法方法1：选择“：选择“ 插入”插入”“ 模模 板对象”板对象”“ 可编辑区域”可编辑区域” 方法方法2：右键单击，然后选：右键单击，然后选 择“择“ 模板”模板”“ 新建可编辑新建可编辑 区域”区域” Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务1创建模板创建模板概念概念 锁定区域锁定区域主要用来锁定体现网站风格部分。主要用来锁定体现网站风格部分。 可编辑区域可编辑区域：需要经常要改变的文字、图像、：需要经常要改变的文字、图像、 链接等网页元素的
8、位置设置成可编辑区域，网链接等网页元素的位置设置成可编辑区域，网 页中只编辑可编辑区域的内容，从而得到与模页中只编辑可编辑区域的内容，从而得到与模 板相似但又有所不同的新的网页。板相似但又有所不同的新的网页。 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 可编辑区 对比 锁定区 知识延伸：创建模板的方法二知识延伸：创建模板的方法二 当前已设计好的网页保存为模板文件。当前已设计好的网页保存为模板文件。 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 TIPS 创建模板后，系统会自动在本地 站点目录中添加一个名为 Templates的新目录，然后将模 板文件保
9、存到此目录中。注意不 要将模板移动到Templates文件 夹之外，或者将任何非模板文件 放在Templates文件夹中；也不 要将Templates文件夹移动到本 地根文件夹之外，否则会引起模 板路径错误。 注意事项注意事项 Dreamweaver CS5网页制作项目实践 14 任课教师：陈春艳 注意事项注意事项 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 正确 设置 对比 错误 设置 任务任务2应用模板应用模板 步骤步骤1：创建基于模板的网页的文档：创建基于模板的网页的文档 单击“文件”单击“文件”-“新建”命令，调出“新建文档新建”命令，调出“新建文档 ”对话框。单
10、击“模板”标签，“新建文档”对话框。单击“模板”标签，“新建文档” 对话框变为“从模板新建”对话框。在“模板对话框变为“从模板新建”对话框。在“模板 用于”列表框中单击“站点”列表项。用于”列表框中单击“站点”列表项。 Dreamweaver CS5网页制作项目实践 16 任课教师：陈春艳 任务任务2应用模板应用模板 步骤步骤2、在可编辑区内输入内容，完成后单击、在可编辑区内输入内容，完成后单击 保存，文件格式是保存，文件格式是html，完成网页制作。，完成网页制作。 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务3更新和管理模板更新和管理模板 1. 模板的修改模板
11、的修改 模板创建后，用户利用模板生成了网页文件。模板创建后，用户利用模板生成了网页文件。 在网页文件的编辑过程中可能会有一些不合适在网页文件的编辑过程中可能会有一些不合适 的地方，比如：链接有错误、网页布局中单元的地方，比如：链接有错误、网页布局中单元 格对齐方式不合理、图像不能正常显示等，而格对齐方式不合理、图像不能正常显示等，而 对于锁定区域，是无法在网页编辑状态进行修对于锁定区域，是无法在网页编辑状态进行修 改，因此需要对模板进行修改。改，因此需要对模板进行修改。 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务3更新和管理模板更新和管理模板 修改模板：打开修改
12、模板：打开模板文件模板文件*.dwt，针对在网针对在网 页编辑中发现的问题进行修改。页编辑中发现的问题进行修改。 对锁定区域进行修改。对锁定区域进行修改。 对可编辑区修改：对可编辑区修改： 删除可编辑区域：在模板编辑状态，选中已定义的删除可编辑区域：在模板编辑状态，选中已定义的 可编辑区域，选择“修改”菜单“模板”“删可编辑区域，选择“修改”菜单“模板”“删 除模板标记”命令，该可编辑区域就不存在了。除模板标记”命令，该可编辑区域就不存在了。 添加可编辑区域：方法同添加可编辑区域：方法同任务任务1步骤步骤3 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务3更新和管理
13、模板更新和管理模板 2. 用模板更新网页和网站用模板更新网页和网站 一旦模板被应用到多个网页文档中，对此模板一旦模板被应用到多个网页文档中，对此模板 的修改则会更新全部与其相关联的文档。这种的修改则会更新全部与其相关联的文档。这种 使用模板更新文件的方法大大节省了用户的时使用模板更新文件的方法大大节省了用户的时 间，尤其在涉及大量的改动时极为有效。间，尤其在涉及大量的改动时极为有效。 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务3更新和管理模板更新和管理模板 模板更新网页模板更新网页 方法方法1：自动更新修改模板：自动更新修改模板 将修改后的模板保存，弹出“更新模
14、板文件”对话框，系将修改后的模板保存，弹出“更新模板文件”对话框，系 统将自动的对列表中的文件进行更新统将自动的对列表中的文件进行更新 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 任务任务3更新和管理模板更新和管理模板 模板更新网页模板更新网页 方法方法2：手动更新修改模板：手动更新修改模板 修改修改-模板模板更新当前页面（更新页面）更新当前页面（更新页面） Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 知识拓展知识拓展页面与模板脱离页面与模板脱离 使用了模板的文档总会收到模板的限制，这样使用了模板的文档总会收到模板的限制，这样 对网页的制作会产生一定
15、的显示。如果页面与对网页的制作会产生一定的显示。如果页面与 模板脱离，用户可以任意修改可编辑区域和不模板脱离，用户可以任意修改可编辑区域和不 可编辑区域的内容。可编辑区域的内容。 如果要让使用了模板的文档脱离模板的控制，如果要让使用了模板的文档脱离模板的控制， 可按以下方法操作。可按以下方法操作。 知识拓展知识拓展页面与模板脱离页面与模板脱离 步骤步骤1：打开应用了模板的文档：打开应用了模板的文档*.html 步骤步骤2 ：选择：选择【修改修改】-【模板模板】-【从模板冲分从模板冲分 离离】命令，则当前文档与模板分离。命令，则当前文档与模板分离。 此时文档中的此时文档中的锁定区锁定区域将自动域
16、将自动变为可编辑区域变为可编辑区域。 文档实际上已变为了普通文档，用户可以对文档文档实际上已变为了普通文档，用户可以对文档 的的任何部分任何部分进行进行编辑编辑。 知识拓展知识拓展页面与模板脱离页面与模板脱离 Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 脱离前： 脱离后： 对比 归纳与思考归纳与思考 模板特点：模板特点：可以可以使站点的结构和网页外观保持一致使站点的结构和网页外观保持一致。 锁定区：锁定区：网页网页中的某些元素是中的某些元素是相对固定不变相对固定不变的，在创建模的，在创建模 板时可以把它们定义板时可以把它们定义为锁定区，为锁定区，用模板创建网页时这些元用模
17、板创建网页时这些元 素无需重新输入和设计，可以减少无谓的重复劳动素无需重新输入和设计，可以减少无谓的重复劳动。 可编辑区：可编辑区：需要需要经常修改的部分经常修改的部分可以定义为可编辑区，用可以定义为可编辑区，用 模板创建网页时就可以对这些部分进行修改模板创建网页时就可以对这些部分进行修改。 模板的更新：模板的更新：对于对于网页中网页中相对固定部分必须进行修改相对固定部分必须进行修改时，时， 可以通过修改模板文件的锁定区，让可以通过修改模板文件的锁定区，让DreamweaverDreamweaver根据我根据我 们的修改自动们的修改自动更新更新整个网站的所有网页整个网站的所有网页。 结结论论：
18、充分：充分利用利用DreamweaverDreamweaver的模板功能，可以快速更新的模板功能，可以快速更新 网页，大大网页，大大提高工作效率提高工作效率。 Company Logo 知识练习知识练习 判断题判断题 （1）应用了模板文件的文档不能使用模板的）应用了模板文件的文档不能使用模板的 样式表，只能使用自己的样式表。（样式表，只能使用自己的样式表。（ ） （2）可选区域与可编辑的可选的区别就在于）可选区域与可编辑的可选的区别就在于 是不是可以编辑这个区域的内容，相比较来说是不是可以编辑这个区域的内容，相比较来说 ，可编辑的可选区域用得更多一些。（，可编辑的可选区域用得更多一些。（ ） Dreamweaver CS5网页制作项目实践 任课教师：陈春艳 课外练习课外练习 以组为单位完成以组为单位完成XX建材网站设计（要求风建材网站设计（要求风 格一致，不少于格一致，不少于4个个html文件，鼓励自主创文件，鼓励自主创 作）作） Dreamweaver CS5网页制作项目实践 任课教师：陈春艳
