Dreamweaver-CC第7章-模板和站点发布.ppt

1、网页制作案例教程第7章 模板和站点发布l 了解库和模板的概念。l 掌握创建和应用库的方法。l 掌握创建和应用模板的方法。l 掌握设置测试服务器的方法。l 掌握连接远程服务器的方法。l 掌握发布站点的方法。学习目标7.1.1 认识库7.1 使用库 库是一种特殊类型的文档，其中包含可放置到网页中的一组单个资源或资源副本。库中的这些资源称为库项目，也就是要在整个网站范围内反复使用或经常更新的元素。在网页制作实践中，经常遇到要将一些网页元素在多个页面内应用的情形。当修改这些重复使用的页面元素时如果逐页修改会相当费时，这时便可以使用库项目来解决这个问题。当编辑某个库项目时，可以自动更新所有使用该项目的页

2、面。使用库项目时，Dreamweaver将向文档中插入该项目的HTML源代码副本，并添加一个包含对原始外部项目引用的HTML注释。自动更新过程就是通过这个外部引用来实现的。在Dreamweaver中，创建的库项目保存在站点的“Library”文件夹内，“Library”文件夹是自动生成的，不能对其名称进行修改。7.1.2 创建库项目7.1 使用库 (1)选择菜单命令【窗口】/【资源】，打开【资源】面板，单击（库）按钮切换至【库】分类。(2)单击【资源】面板右下角的（新建库项目）按钮，新建一个库项目，然后在列表框中“Untitled”处输入库项目的新名称并按Enter键确认。7.1.2 创建库项

3、目7.1 使用库 (3)在选中库项目的前提下，单击面板底部的（编辑）按钮或在鼠标右键快捷菜单中选择【编辑】命令打开库项目。(4)在文档窗口中插入一幅图像并保存文档。7.1.2 创建库项目7.1 使用库 用户也可以将网页文档中现有的对象元素转换为库项目。方法是：在页面中选择要转换的内容，然后选择菜单命令【工具】/【库】/【增加对象到库】，即可将选中的内容转换为库项目，并显示在【库】列表中，最后输入库名称并确认即可。7.1.3 应用库项目7.1 使用库 库项目是可以在多个页面中重复使用的页面元素。在【资源】面板中选中库项目，单击底部的【插入】按钮（或者在鼠标右键快捷菜单中选择【插入】命令），将库项

4、目插入到网页文档中。在插入库项目时，Dreamweaver不是向文档中直接插入库项目，而是插入一个库项目链接，【属性】面板中的“Src/Library/head.lbi”可以清楚地说明这一点。7.1.4 维护库项目7.1 使用库 (1)编辑库项目。在引用库项目的当前网页中，选择库项目后，在【属性】面板中单击（打开）按钮，可打开库项目的源文件进行编辑，这等同于单击【资源】面板【库】类别底部的（编辑）按钮或在鼠标右键快捷菜单中选择【编辑】命令打开库项目。(2)重命名库项目。在【资源】面板的【库】类别中，当库项目数量超过一个时，需要先选中要重命名的库项目，然后再单击库项目的名称或在鼠标右键快捷菜单中

5、选择【重命名】命令，使库项目名称处于编辑状态，接着输入一个新名称并按Enter键使更改生效。此时，需要在弹出的【更新文件】对话框中选择是否更新使用该项目的文档。7.1.4 维护库项目7.1 使用库 (3)更新库项目。在库项目被修改保存后，引用该库项目的网页文档会进行自动更新。如果没有进行自动更新，可以选择菜单命令【工具】/【库】/【更新当前页】，对应用库项目的当前文档进行更新。也可选择菜单命令【工具】/【库】/【更新页面】，打开【更新页面】对话框更新相关页面。如果在【更新页面】对话框的【查看】下拉列表中选择【整个站点】选项，然后从其右侧的下拉列表中选择站点的名称，将会使用当前库项目更新所选站点

6、中的所有页面，如图7-6所示。如果选择【文件使用】选项，然后从其右侧的下拉列表中选择库项目名称，将会更新当前站点中所有应用了该库项目的文档，如图7-7所示。7.1.4 维护库项目7.1 使用库 (4)分离库项目。一旦在网页文档中应用了库项目，如果希望其成为网页文档的一部分，这就需要将库项目从源文件中分离出来。方法是：在当前网页中选中库项目，然后在【属性】面板中单击（从源文件中分离）按钮，在弹出的信息提示框中单击（分离）按钮，将库项目的内容与库文件分离，如图7-8所示。分离后，就可以对这部分内容进行编辑了，因为它已经是网页的一部分，与库项目再没有联系。7.1.4 维护库项目7.1 使用库 (5)

7、删除库项目。打开【资源】面板并切换至【库】分类，在库项目列表中选中要删除的库项目，单击【资源】面板右下角的（删除）按钮或直接在键盘上按Delete键即可。一旦删除了一个库项目，将无法进行恢复，因此应特别小心。7.2.1 认识模板7.2 使用模板 模板是一种特殊类型的文档，用于设计固定的并可重复使用的页面布局结构。基于模板创建的网页文档会继承模板的布局结构，在批量制作具有相同版式和风格的网页时使用模板是一个不错的选择，而且模板变化时可以同时更新基于该模板创建的网页文档，从而提高站点管理和维护的效率。在设计模板时，设计者需要在模板中插入模板对象，从而指定在基于模板创建的网页文档中哪些区域是可以编辑

8、的。在Dreamweaver CC 2017中，常用的模板对象有可编辑区域、重复区域、重复表格等。可编辑区域是指可以进行添加、修改和删除网页元素等操作的区域。重复区域是指可以复制任意次数的指定区域。重复区域不是可编辑区域，若要使重复区域中的内容可编辑，必须在重复区域内插入可编辑区域或重复表格。重复表格是指包含重复行的表格格式的可编辑区域，用户可以定义表格的属性并设置哪些单元格可编辑。重复表格可以被包含在重复区域内，但不能被包含在可编辑区域内。模板操作必须在Dreamweaver站点中进行，如果没有站点，在保存模板时系统会提示创建Dreamweaver站点。在Dreamweaver中，创建的模板

9、文件保存在站点的“Templates”文件夹内，“Templates”文件夹是自动生成的，不能对其名称进行修改。7.2.2 创建模板7.2 使用模板 (1)选择菜单命令【窗口】/【资源】，打开【资源】面板，单击（模板）按钮，切换至【模板】分类。(2)单击【资源】面板右下角的（添加）按钮，创建一个模板文件，然后在列表框中“Untitled”处输入模板的新名称并按Enter键确认，如图7-9所示。7.2.2 创建模板7.2 使用模板 (3)在选中模板的前提下，单击面板底部的（编辑）按钮或在鼠标右键快捷菜单中选择【编辑】命令打开模板文档。(4)选择菜单命令【插入】/【Table】插入一个4行1列的表

10、格，表格宽度为“800像素”，对齐方式为“居中对齐”，边框粗细、间距和填充均为“0”，如图7-10所示。7.2.2 创建模板7.2 使用模板 (5)将鼠标光标置于表格第1行单元格内，然后选择菜单命令【插入】/【模板】/【可编辑区域】，打开【新建可编辑区域】对话框，在【名称】文本框中输入可编辑区域名称，单击（确定）按钮插入可编辑区域，如图7-11所示。7.2.2 创建模板7.2 使用模板 (6)可编辑区域左上角显示可编辑区域的名称，单击模板对象的名称将其选中，在【属性】面板的【名称】文本框中可以修改模板对象名称，如图7-12所示。7.2.2 创建模板7.2 使用模板 (7)将鼠标光标置于表格第2

11、行单元格内，选择菜单命令【插入】/【模板】/【重复区域】，打开【新建重复区域】对话框，在【名称】文本框中输入重复区域名称并单击（确定）按钮插入重复区域，如图7-13所示。7.2.2 创建模板7.2 使用模板 (8)将文本“内容1”删除，然后插入一个2行1列的表格，表格宽度为“100%”，边框粗细、间距均为“0”，填充为“5”，然后依次在两个单元格中分别插入可编辑区域，名称分别为“标题”和“具体内容”，如图7-14所示。7.2.2 创建模板7.2 使用模板 (9)将鼠标光标置于倒数第2行单元格内，然后选择菜单命令【插入】/【模板】/【重复表格】，打开【插入重复表格】对话框，进行参数设置后单击（确

12、定）按钮插入重复表格，如图7-15所示。7.2.2 创建模板7.2 使用模板 (10)将所插入重复表格的第1行所有单元格的宽度均设置为“25%”，将第1行和第2行所有单元格的对齐方式均设置为“居中对齐”。(11)将最外层表格最后一行的单元格对齐方式设置为“居中对齐”，然后在其中插入一个可编辑区域，如图7-16所示。7.2.2 创建模板7.2 使用模板 除了通过【资源】面板来创建模板文件，也可以选择菜单命令【文件】/【新建】，打开【新建文档】对话框，在【新建文档】类别中选择【HTML模板】，单击（创建）按钮来创建空白模板文档，如图7-17所示，然后根据实际需要设计页面并添加模板对象。7.2.2

13、创建模板7.2 使用模板 也可以将现有网页保存为模板。首先打开一个网页文档，删除其中不需要的内容，保留页面布局结构，然后根据需要添加模板对象，最后选择菜单命令【文件】/【另存为模板】，打开【另存模板】对话框，设置好保存的位置和名称，然后保存即可，如图7-18所示。7.2.2 创建模板7.2 使用模板 创建模板的目的在于通过模板批量生成网页。在Dreamweaver CC 2017中，应用模板的方法是：(1)选择菜单命令【文件】/【新建】，打开【新建文档】对话框。(2)选择【网站模板】选项，在【站点】列表框中选择相应的站点，在模板列表框中选择需要的模板，并勾选【当模板改变时更新页面】复选框，如图

14、7-19所示。7.2.2 创建模板7.2 使用模板 (3)单击（创建）按钮创建基于模板的网页文档，如图7-20所示。7.2.2 创建模板7.2 使用模板 (4)“页眉”和“页脚”两处是可编辑区域，可以根据需要直接添加内容。(5)在“重复：内容1”中的“标题”和“具体内容”中可以输入相应的标题和内容，如果还有更多类似的内容，可以单击+按钮添加重复区域，按照同样的方法可以在“重复：内容2”中添加相应的内容并根据需要添加重复区域，如图7-21所示。7.2.2 创建模板7.2 使用模板 (6)根据实际可以设置文本格式，最后保存网页文档。另外，也可以将现有页面应用模板。方法是，首先打开要应用模板的网页文

15、档，然后选择菜单命令【工具】/【模板】/【应用模板到页】，或在【资源】面板的模板列表框中选中要应用的模板，再单击面板底部的（应用）按钮即可应用模板。如果已打开的文档是一个空白文档，文档将直接应用模板；如果打开的文档是一个有内容的文档，这时通常会打开一个【不一致的区域名称】对话框，该对话框会提示用户将文档中的已有内容移到模板的相应区域。7.2.4 维护模板7.2 使用模板 (1)打开附加模板。在一个网站中，如果模板很多，使用模板的网页也很多，该如何快速地打开当前网页文档所使用的模板呢？首先打开使用模板的网页文档，然后选择菜单命令【工具】/【模板】/【打开附加模板离】，这样就可快速打开模板了。(2

16、)重命名模板。在【资源】面板的【模板】类别中，当模板数量超过一个时，需要先选中要重命名的模板，然后再单击模板的名称或在鼠标右键快捷菜单中选择【重命名】命令，使模板名称处于编辑状态，接着输入一个新名称并按Enter键使更改生效。(3)删除模板。在【资源】面板的【模板】类别中选择要删除的模板，单击面板底部的 按钮或按Delete键，然后确认要删除该模板。删除模板后，该模板文件将被从站点中删除。基于已删除模板的文档不会与此模板分离，它们仍保留该模板文件在被删除前所具有的结构和可编辑区域。可以将这样的文档转换为没有可编辑区域或锁定区域的网页文档。7.2.4 维护模板7.2 使用模板 (4)更新应用了模

17、板的文档。7.2.4 维护模板7.2 使用模板 (5)将网页从模板中分离。打开想要分离的基于模板的文档，然后选择菜单命令【工具】/【模板】/【从模板中分离】。网页文档脱离模板后，模板中的内容将自动变成网页中的内容，网页与模板不再有关联，用户可以在文档中的任意区域进行编辑。7.3.1 应用实例配置本地Web服务器7.3 发布站点 1.在Windows 7中打开【控制面板】，在【查看方式】中选择【小图标】选项，如图7-23所示。7.3.1 应用实例配置本地Web服务器7.3 发布站点 2.单击【管理工具】选项，进入【管理工具】窗口，如图7-24所示。7.3.1 应用实例配置本地Web服务器7.3

18、发布站点 3.双击【Internet信息服务（IIS）管理器】选项，打开【Internet信息服务（IIS）管理器】窗口，并在左侧列表中展开网站的相关选项，如图7-25所示。7.3.1 应用实例配置本地Web服务器7.3 发布站点 4.保证Web服务器已经启动，如果没有启动，选择【Default Web Site】选项，然后单击鼠标右键，在弹出的快捷菜单中选择【管理网站】/【启动】命令启动Web服务器，如图7-26所示。7.3.1 应用实例配置本地Web服务器7.3 发布站点 5.选择【Default Web Site】选项，然后在右侧列表中单击【操作】中的【基本设置】选项，打开【编辑网站】对

19、话框修改【物理路径】选项为本地网站的实际保存位置即可，如图7-27所示。7.3.1 应用实例配置本地Web服务器7.3 发布站点 6.单击（确定）按钮关闭对话框，双击【默认文档】选项打开如图7-28所示窗口。7.3.1 应用实例配置本地Web服务器7.3 发布站点 7.在右侧列表中单击【添加】，打开【添加默认文档】对话框，根据需要添加默认文档名称（如果已存在不需要再添加），如图7-29所示。7.3.1 应用实例配置本地Web服务器7.3 发布站点 8.单击（确定）按钮添加默认文档。这样Windows 7中Web服务器的基本设置就完成了，可以运行HTML网页了。9.如果要运行ASP网页，还需要双

20、击【ASP】选项，将【启用父路径】的值设置为“True”，如图7-30所示。7.3.2 应用实例设置测试服务器7.3 发布站点 1.在菜单栏中选择【站点】/【管理站点】命令打开【管理站点】对话框，选中相应站点（也可新建），然后单击（编辑）按钮打开站点设置窗口，如图7-31所示。7.3.2 应用实例设置测试服务器7.3 发布站点 2.在左侧列表中选择【服务器】类别，如图7-32所示。【服务器】类别允许用户指定远程服务器和测试服务器，单击+按钮将添加一个新服务器，单击-按钮将删除选中的服务器，单击（编辑）按钮将编辑选中的服务器，单击（复制）按钮将编辑选中的服务器。7.3.2 应用实例设置测试服务器

21、7.3 发布站点 3.单击+按钮添加一个本地测试服务器，在【基本】选项卡的【服务器名称】文本框中设置新服务器的名称，在【连接方法】下拉列表框中选择与服务器的连接方法，在【Web URL】文本框中设置Web URL，要求与Web服务器中的设置一样，如图7-33所示。7.3.2 应用实例设置测试服务器7.3 发布站点 4.切换到【高级】选项卡，设置测试服务器要用于Web应用程序的服务器模型，如图7-34所示。7.3.2 应用实例设置测试服务器7.3 发布站点 5.单击（保存）按钮关闭选项卡，然后在【服务器】类别中，指定刚添加的服务器的类型为“测试”，如图7-35所示。6.单击（保存）按钮关闭对话框

22、，同时关闭【管理站点】对话框。7.3.3 应用实例连接远程服务器7.3 发布站点 1.选择菜单命令【站点】/【管理站点】，打开【管理站点】对话框，在站点列表中选择站点“mysite”，然后单击（编辑）按钮，打开站点设置窗口。2.在左侧列表中选择【服务器】选项，单击+按钮，在弹出的对话框中的【基本】选项卡中进行参数设置，如图7-36所示。7.3.3 应用实例连接远程服务器7.3 发布站点 3.选择【高级】选项卡，根据需要进行参数设置，如图7-37所示。7.3.3 应用实例连接远程服务器7.3 发布站点 4.最后单击（保存）按钮关闭窗口，然后在【服务器】类别中，指定刚添加的服务器的类型为“远程”，

23、如图7-38所示。7.3.4 应用实例发布站点7.3 发布站点 1.在【文件】面板中单击（展开/折叠）按钮，展开站点管理器，在【显示】下拉列表中选择要发布的站点，在后面的下拉列表框中选择“远程服务器”，如图7-39所示。7.3.4 应用实例发布站点7.3 发布站点 2.单击（连接到远程服务器）按钮，将会开始连接远程服务器，连接成功后可以在【本地文件】列表中选择站点根文件夹“mysite”（如果仅上传部分文件，可选择相应的文件或文件夹），然后单击（上传文件）按钮将文件上传到远程服务器即可。如果要从远程服务器下载文件，可以在远程服务器中选择相应的文件，然后单击 按钮下载即可。7.3.4 应用实例发布站点7.4 应用实例杭州西湖 根据操作步骤使用库和模板制作网页，效果如图7-40所示。