网页设计与制作模版与库课件.pptx

1、第七章第七章 模版与库模版与库学习目标：学习目标：通过本章的学习，要求掌握模板与库的基本概念，如何创建模板、库，如何设置模板、库的属性，熟练运用模板与库来创建并更新网站的内容。第七章第七章 模版与库模版与库 一个大型网站往往需要让许多甚至所有网页在某个固定的位置显示相同的内容，如网站的标志、公司徽标、网站导航条等。这样制作这些网页的时候就可以直接在一个模板制作，而不必从头开始，其功能类似PowerPoint幻灯片中的模板。当改动这些网页时，也不必逐一修改页面元素，而是可以一次同时修改完毕。此外，还需要重复使用网页上的某些元素，而不必再重新插入或编写他们。对于这些需求Dreamweaver提供了

2、“模板”和“库”的功能，来使你的网页制作事半功倍。用模版与库的两大理由用模版与库的两大理由l统一整个网站的风格l做到一改全改1Dreamweaver的模板的模板l在开发Web网站时，使用Dreamweaver的模板功能有助于设计风格一致的网页。众所周知，站点必须经常更新，才能赢得更多的访问量，在Dreamweaver中通过模板来创建和更新网页，便于网站的维护和管理，可以充分地重用资源，从而大大提高工作的效率。l顾名思义，模板就是一种样板，照着这个样板，可以制作出多个样式一致的网页。模板面板提供了一种建立同一风格网页基本框架的方法。例如，对于一个大型站点，大多数文档上通常会出现相同的内容，如公司

3、的名称、网站的标志、公司徽标、网站导航条等。如果将这些格式存储为模板，再通过该模板创建新文档，所生成的新文档中会自动出现这些共有内容。这样，在编辑网页时，只需输入每个文档中不同的内容就可以了。1Dreamweaver的模板的模板l模板的原理是由可编辑区域和不可编辑区域两部分组成。不可编辑区域包含了在所有面面中共有的元素，即构成页面的基本框架；而可编辑区域是为添加相应的内容而设置的。Dreamweaver的模板的扩展名为“.dwt”。创建模板后，Dreamweaver会自动在当前站点的根目录中创建一个名为“Templates”的目录，然后将该模板文件存储在该目录中。用户可以在将模板应用于文档之后

4、，再修改模板。当使用修改后的模板更新文档时，文档只有不可编辑的部分才会随模板更新，不会影响到其他内容。2Dreamweaver的库的库l除了模板之外，为了重复地使用网页设计资源，Dreamweaver还提供了库。用户可以将Dreamweaver的库，理解为可重用的网页对象集合，还可以利用库来处理在多个页面中出现的内容，版权信息、公司地址等。l库是一种特殊的 Dreamweaver 文件，其中包含您已创建以便放在 Web 页上的单独的资源或资源副本的集合，用来存储要在整个 Web 站点上经常重复使用或更新的页面元素（如图像、文本和其他对象）的方法。库里的这些资源称为库项目（Library Ite

5、m），可以将单个网页对象创建为库项目，也可以将多个网页对象的组合创建为库项目。库项目就是在网页中能重复使用的“零件”。每当更改某个库项目的内容时，可以更新所有使用该项目的页面。可以在库中存储各种各样的页面元素，如图像、表格、声音和 Flash 文件。2Dreamweaver的库的库lDreamweaver库项目的扩展名为“.lib”。每个站点都有自己的库，用户可以为每个站点定义不同的库。Dreamweaver 将库项目存储在每个站点的本地根文件夹内的“Library”文件夹中。第七章第七章 模版与库模版与库l7.1 创建模板创建模板l7.2 设置模板的属性设置模板的属性l7.3 应用模板应用模

6、板l7.4 库项目库项目7.1 创建模板l模板的创建有两种方式：一种是从头创建一个新的模板；另一种是将现有文档进行修改，然后存储为模板文件。创建模板后，Dreamweaver会自动在当前站点的根目录中创建一个名为“Templates”的目录，然后将该模板文件存储在该目录中。7.1 创建模板l7.1.1 新建模板文件l7.1.2 将现有的HTML文档转换成模板7.2 设置模板的属性设置模板的属性l7.2.1 设置模板的页面属性l7.2.2 定义模板的可编辑区l每个模板都包含可编辑区和不可编辑区两部分。可编辑区是指一个页面中可以更改的部分，不可编辑区是指在所有页面中不能改变的内容。它的内容只能在编

7、辑模板中修改。7.2 设置模板的属性设置模板的属性l7.2.3 定义模板的重复区域l重复区域可以是根据需要在基于模版的页面中任意复制的模版部分，通常用于表格，当然也可以为其他页面元素设置重复区域。l重复区域是不可编辑区，如果要在重复区域中编辑不同的内容，必须在重复区域中插入可编辑区域。l重复区域可以使用两种重复区域模板对象：重复区域和重复表格。1在模板中插入重复区域在模板中插入重复区域 在模板中插入重复区域，步骤如下：l在“文档”窗口中执行下列操作之一：l选择想要设置为重复区域的文本或内容。l将插入点放入文档中想要插入重复区域的地方。l执行下列操作之一创建重复区域：l选择【插入】/【模板对象】

8、/【重复区域】菜单命令。l单击右键，在弹出的快捷菜单中选择【模板】/【新建重复区域】。l在【常用】工具栏中，单击【模板】按钮右侧的箭头，从弹出的菜单中选择【重复区域】按钮。l将弹出“新建重复区域”对话框，如图7-7所示。在“名称”文本框中为模板区域输入唯一的名称。单击【确定】按钮，重复区域被插入到模板中。2插入重复表格插入重复表格可以使用重复表格创建包含重复行的表格。单元格为可编辑区域。l插入重复表格，步骤如下：l在“文档”窗口中，将插入点放在文档中想要插入重复表格的位置。l执行下列操作之一：l选择【插入】/【模板对象】/【重复表格】菜单命令。l在【常用】工具栏的中单击【模板】按钮右侧的箭头，

9、从弹出的菜单中选择【重复表格】按钮。l将弹出【插入重复表格【对话框。如图7-8所示。l按需要输入值。单击【确定】按钮，重复表格即出现在模板中。7.2.4 定义可选区域l可选区域可以控制不一定在基于模版的文件中可选区域可以控制不一定在基于模版的文件中的显示内容。的显示内容。l可选区域是模板中的特殊区域，能控制模板中可选区域是模板中的特殊区域，能控制模板中内容在特定的页面中显示或隐藏。可选区域是内容在特定的页面中显示或隐藏。可选区域是通过一个通过一个“if”条件语句进行控制的。通过简条件语句进行控制的。通过简单或复杂的条件语句和表达式，来决定该区域单或复杂的条件语句和表达式，来决定该区域的显示或隐

10、藏。的显示或隐藏。1插入可选区域插入可选区域插入可选区域的步骤如下：l在模板中选中想要设置为可选区域的文本或内容。l任选以下操作之一：l选择【插入】/【模板对象】/【可选区域】菜单命令。l在【常用】工具栏的中，单击【模板】按钮右侧的箭头，从弹出的菜单中选择【可选区域】按钮。l右击鼠标，在弹出的菜单中选择【新建可选区域】命令。l弹出的【新建可选区域】对话框，如图7-9所示。1插入可选区域插入可选区域l在【名称】文本框中输入可选区域名称，单击【确定】按钮。l说明：在“代码”视图中，可以找到有关可选区域的代码。模板参数在head部分定义：ll在插入可选区域的位置，将出现类似于下列代码的代码：l第三行

11、l从模板创建的网页的head区中，也将插入模板参数部分代码。如果网页中不需显示可选区域内容时，只需在网页HTML代码head部分找到上述代码，把其中的value值设置为false即可。2插入可编辑的可选区域插入可编辑的可选区域插入可编辑的可选区域的步骤如下：在模板中选中想要设置为可编辑的可选区域的文本或内容。l任选以下操作之一：l选择【插入】/【模板对象】/【可编辑的可选区域】菜单命令。l在【常用】工具栏的中，单击【模板】按钮右侧的箭头，从弹出的菜单中选择【可编辑的可选区域】按钮。l弹出的【新建可选区域】对话框，在【名称】文本框中输入可选区域名称，单击【确定】按钮。3修改可选区域修改可选区域

12、在模板中插入可选区域之后，可以编辑该区域的设置。例如，可以对是否显示内容默认值的设置进行更改，将参数链接到现有可选区域，或者修改模板表达式。l修改可选区域，步骤如下：l打开要修改的模板文件。l执行下列操作之一：l在文档窗口中，单击要修改的可选区域“EditRegion5”的模板选项卡。l图图7-10l在“设计”视图中，将插入点放置在模板区域中；然后在文档窗口底部的标签选择器中选择模板标签。l在【属性】面板中单击【编辑】按钮，如图7-11所示。3修改可选区域修改可选区域l将弹出【新建可选区域】对话框，如图7.12所示。l按需要进行更改后，单击【确定】按钮，就完成可选区的修改。l撤消一个区域的可选

13、区域标记的操作为：选择【修改】/【模板】/【删除模板标记】7.2.5 定义嵌套模板l嵌套模板是指其设计和制作都基于另一个模板的模板。嵌套模板不但可以用来创建基本模板的变体；还可以嵌套多个模板来定义更加精确的布局。若要创建嵌套模板，必须首先保存原始模板或基本模板，然后基于该模板创建新文档，最后将该文档另存为模板。在新模板中，可以在原来在基本模板中定义为可编辑的区域中进一步定义可编辑区域。7.2.6 创建嵌套模板创建嵌套模板的步骤如下：l创建一个基于模板的文件。l选择【文件】/【另存为模板】菜单命令，或单击插入栏“常用”面板上【模板】按钮右边的下拉箭头，在弹出菜单中单击【创建嵌套模板】命令，出现“

14、另存模板”对话框，输入名字后单击【保存】按钮保存文档，如图7-13所示。l在基于嵌套模板的文档中，可以添加或更改从基本模板传递的可编辑区域（以及在新模板中创建的可编辑区域）中的内容。7.3 应用模板应用模板l7.3.1应用模板创建新文档l选择【文件】/【新建】命令，打开【新建文档】对话框，在对话框中选择【模板】选项卡，出现【从模板新建】对话框 l也可以通过【资源】面板来完成以上操作，具体步骤如下：l还可以把模板文件应用到现有文档中，具体操作步骤如下：l先打开一文档，然后选择【修改】/【模板】/【应用模板到页】命令，打开【选择模板】对话框，如图7-16所示 分离模版分离模版将文件从模板中分离的操

15、作如下：l打开想要分离模板的文件。l选择【修改】/【模板】/【从模板中分离】命令。l则页面从模板中分离出来，所有区域都可以编辑了。7.3.2修改模板并更新站点 模板创建好后，可以进行修改，更改模板之后，Dreamweaver MX 2004会提示更新基于该模板的所有文档。如果需要也可以手动更新基于模板的文档。l修改模板并更新站点的步骤如下：l打开一个模板文件。l对模板文件进行修改，然后保存。l将弹出【更新模板文件】对话框，如图7-18所示。l在列表框中选择应用了模板的文件，单击【更新】按钮，完成更新操作。l更新整个站点或更新使用了模板的文件的操作如下：l选择【修改】/【模板】/【更新页面】命令

16、，弹出【更新页面】对话框，如图7-19所示。l在【查看】下拉列表中，根椐需要选择其中一项。l选择【整个站点】，再选择站点名称。则该站点的所有页面都将被相应的模板更新。l选择【文件使用】，再选择模板名称。则当前站点中所有使用了该模板的页面都将被更新。l确定【更新】选项组中的【模板】复选框被选项中。单击【开始】按钮。7.4 库项目库项目 与模版不同的是，模版应用的是整个页面，而库文件只是页面中的一部分。利用库文件可以将页面中常用到的某个对象或多个对象转换为库文件，然后将库文件作为一个对象插入到页面中，这样就能够通过简单的插入操作创建页面局部内容了。7.4.1 生成库项目l库是一种特殊的Dreamw

17、eaver Mx 2004 文件，其中包含已创建以便放在网页上的单独的资源或资源拷贝的集合。库中可以存储各种各样的元素，如文本、表格、表单、Java applet、插件、ActiveX 元素、导航条和图像。使用库项目可处理在多个页面中使用并且需要经常更新的内容。l可以从文档 body 部分中的任意元素创建库项目，对于链接库项目（如图像），库只存储对该项的引用。原始文件必须保留在指定的位置，才能使库项目正确工作。7.4.1 生成库项目l1基于选定内容创建库项目l2创建一个空白库项目7.4.2 库的属性设置l【SRC】：显示库项目源文件的文件名及路径。l【打开】：打开源文件。l【从源文中件分离】：断开选中的库项目与其源文件的链接。当一个库项目被断开链接后，它不再是一个库项目，可以被编辑。l【重新创建】：用当前选中的内容覆盖原有的库项目。如果库项目不存在、库项目名称被修改过或者库项目被重新编辑过，这个命令将重新生成一个库项目。7.4.3 修改使用库项目的页面l1在文档中插入库项目l2编辑库项目l3更新整个站点或所有使用特定库项目的文档l4使文档中的库项目可编辑7.5 资源管理器资源管理器l站点列表l收藏夹