dreamweaver 课件第七单元（经典实用）

1、dreamweaver 课件第七单元 第七单元第七单元 模板应用及网站发布模板应用及网站发布 主 编：王树平 副主编：杜大志 宋彦琴 马文惠 目录目录上一上一 页页 下一下一 页页 退出退出 第七单元 模板应用及网站发布 任务描述：任务描述：本单元将使用模板把以前创建的网页进行整合， 使整个网站的风格统一，然后利用Dreamweaver 8内置的上传 功能，测试、发布网站，对网站进行维护。其中，首页套用模 板后的效果如图所示： 目录目录上一上一 页页 下一下一 页页 退出退出 第七单元第七单元 模板应用及网站发布模板应用及网站发布 任务一 创建网站模板 任务二 套用模板 任务三 测试站点内容

2、任务四 网上安家 目录目录上一上一 页页 下一下一 页页 退出退出 任务一任务一 创建网站模板创建网站模板 任务描述：任务描述：利用原有网页创建网站模板。 任务分析：任务分析：创建网站模板，就是将相同的页面元素制作成 模板，这样不但可以统一整个网站的风格，而且能够加快网页 的制作、更新与浏览的速度。 创建模板的方法有两种：一种方法是将原有网页转存为模 板文件，另一种方法是新建一个模板文件。本任务采用第一种 方法。 第七单元 模板应用及网站发布 目录目录上一上一 页页 下一下一 页页 退出退出 自己动手：自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。 任务一 创建网站模板

3、 2在文件面板中显示“幽幽我心的个人网站” 的文件结 构，如图所示。 “访客信息”页面 “心情日记”页面 “家乡山水”页面 “作品展示”页面 “幽幽我心的个人网站”首 页 图7-1 站点当前文件结构 目录目录上一上一 页页 下一下一 页页 退出退出 3创建模板 打开“作品展示”页面 任务一 创建网站模板 选择 “文件” “另存为模板”菜单项，将“作品 展示”页面另存为模板，如图所示： 1.选择站点 2.输入模板名称 3.保存 4.单击 “是” 保存模板之后，当前编辑文档的名称及其站点目录如何变化？ 利用网页创建模板的方式还有哪些？ 目录目录上一上一 页页 下一下一 页页 退出退出 4设定可编辑

4、区域 任务一 创建网站模板 准备工作：删除表格“table2”与“table3”及其内容， 并插入表格“edit”，如下图所示。 在模板中有几种类 型的区域？ 目录目录上一上一 页页 下一下一 页页 退出退出 创建可编辑区域 任务一 创建网站模板 选择“插入”“模板对象”“可编辑区域”菜单项，弹 出“新建可编辑区域”对话框，如图所示： 1.输入可编辑区域名称 2.单击“确定”按 钮 创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么 办？命名可编辑区域时有哪些规定？办？命名可编辑区域时有哪些规定？ 目录目录上一上

5、一 页页 下一下一 页页 退出退出 任务一 创建网站模板 删除可编辑区域方框内的文本内容。 可编辑区域名称可编辑区域内的文本内容 保存模板，关闭文件。 如何删除可编辑区域？ 目录目录上一上一 页页 下一下一 页页 退出退出 任务总结：任务总结： 通过完成本任务学习了利用网页创建模板的方法，其中， 重点掌握创建和删除可编辑区域。 任务一 创建网站模板 目录目录上一上一 页页 下一下一 页页 退出退出 举一反三：举一反三： 1将本单元素材“举一反三”文件夹中的“pra7-1”文件 夹复制到D盘根目录下，创建站点“pra7-1”，文件存储在“D： pra7-1”,使用“文件”菜单中的“新建”选项，新

6、建一个 HTML类型模板“pra7-1.dwt”，效果如图JYFS7-1所示。提示： 所用背景图像在“pra7-1images”文件夹中，页面使用表格布 局。 启发思路 创建模板的方法有两种：一种方法是将原有页面转存为模 板文件，另一种方法是新建一个模板文件。本任务采用第二种 方法。 分组完成任务。 任务一 创建网站模板 目录目录上一上一 页页 下一下一 页页 退出退出 任务一 创建网站模板 作业：作业： 1. 总结命名可编辑区域时名称中不能包含的字符有哪些。 2. 将本单元素材“举一反三”文件夹中的“pra7-2”文件夹 拷贝到D盘根目录下，创建站点“pra7-2”，将页面“pra7-2.

7、html”，另存为模板“pra7-2.dwt”，在表格“table_edit”中添加 可编辑区域“edit7-2”，如图JYFS7-2所示，保存模板。 目录目录上一上一 页页 下一下一 页页 退出退出 任务二任务二 套用模板套用模板 任务描述：任务描述：套用模板并完善模板中的链接关系。 任务分析：任务分析：将任务一中创建的模板套用到网站中的“首 页”、“家乡山水”、“景区介绍”、“访客信息”和“作品 展示”页面，修改相关页面及文本中的内容，完成整个网站的 制作工作。 套用模板的方法有两种：一种是将模板文件套用到已存在 的页面，另一种是通过模板新建一个网页文件。本任务通过第 一种方法，统一整个网

8、站的风格，完善网站内页面之间的链接 关系。 第七单元 模板应用及网站发布 目录目录上一上一 页页 下一下一 页页 退出退出 自己动手：自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。 2在文件面板中打开首页Index.html。 3应用模板 在“CSS样式”面板中删除“body”样式。 套用模板：选择“修改”“模板”“套用模板到页” 菜单项，在“选择模板”对话框中进行设置，如图所示： 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 单击“选定”按钮，弹出“不一致的区域名称”对话框， 如下图所示。 。 1. 表示套用模板前页面 标签中的内容全部 插入到套

9、用后的可编辑区 域中。 2. 表示套用模板前后 标签中的内容不 变。 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 修改网页标题为“幽幽我心的个人网站”。 同理，完成“家乡山水”、“景区介绍”、“访客信 息”和“作品展示”页面应用模板的操作。 （分组完成） 添加超级链接：打开模板文件“site.dwt”，按照下表所示， 编辑页面中表格“tabel1-1”内的导航文本，添加超级链接。 完善站点 导航文本链接目标 首页“./index.html” “作品展示”“./works/works.html” “家乡山水”“./travel/travel.html” “访客信息”“./

10、bbs/bbs.html” “心情日记”“#”（空链接） 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 在“行为”面板中，将该行为事件设置为“onClick”。 选中添加了空链接的文本“心情日记”，在“行为”面 板中添加“打开浏览器窗口”行为，在对话框中进行参数设置， 如图所示： 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 保存模板文件 在“更新模板文件”对话框，单击“更新”按钮，完成更 新后，单击“更新页面”对话框中的“关闭”按钮 ，如图所示。 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 任务总结：任务总结： 通过完成本任

11、务学习了将模板文件套用到已存在的页面； 学习了完善模板中的链接关系。 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 举一反三：举一反三： 将本单元素材“举一反三”文件夹中的“pra7-3”文件夹拷 贝到D盘根目录下，创建站点“pra7-3”，使用模板“pra7- 3.dwt”创建两个新页面，将文件夹中的文本文件内容拷贝到两 个页面的可编辑区域，分别保存为“pra7-3.html”、“pra7- 4.html”。为文件夹中已有页面“pra7-5.html”、“pra7-6.html” 套用模板。 编辑站点“pra7-3”中的模板文件，为其添加相应的超级链 接，保存后预览整个

12、站点。 1启发思路：关键是解决如何使用模板“pra7-3.dwt”创 建新页面的问题，可以借助于帮助、上网等寻求答案。 2分组完成任务。 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 作业：作业： 1. 分析本任务中作品展示页面套用模板后还有没有必要修 改标题。 2. 总结套用模板的步骤。 任务二 套用模板 目录目录上一上一 页页 下一下一 页页 退出退出 任务三任务三 测试站点内容测试站点内容 任务描述：任务描述：测试并完善现有网站内容。 任务分析：任务分析：网站制作完成并不意味着工作的结束，设计与 制作只是网站开发的一部分工作，还要将创建好的网站发布到 互联网上，让用

13、户去浏览，在这之前需要对网站文件进行检查 和整理，避免将存在错误的网页上传到互联网。本任务将使用 Dreamweaver 8中的“结果”面板，测试站点当中存在的各种 错误链接和孤立文件。 第七单元 模板应用及网站发布 目录目录上一上一 页页 下一下一 页页 退出退出 自己动手：自己动手： 1向表格内部添加内容 在“设计”视图中，选择菜单栏“窗口”“结果”选项， 在“属性”面板下方打开“结果”面板，选择“链接检查器” 标签。如下图所示： 任务三 测试站点内容 为什么要进行站点测试 站点测试有那些 目录目录上一上一 页页 下一下一 页页 退出退出 单击“检查链接”按钮，选择“检查整个当前本地站点的

14、 链接”选项，如下图所示，测试当前站点中的所有链接 若要检查当前文档内的链接，应先将文档保存。 注意：可以在“文件”面板中选中文件、文件 夹或整个当前站点来设置检查范围。 任务三 测试站点内容 目录目录上一上一 页页 下一下一 页页 退出退出 测试完成后，分别查看“显示”下拉列表中包含的3种类 型的链接（断掉的链接、外部链接、孤立文件）报告，如下图 所示。 下拉列表中各选项的含义是什么？ 任务三 测试站点内容 可以在其中编辑断掉的链接和保存测试报告，如下图所示。 目录目录上一上一 页页 下一下一 页页 退出退出 在编辑框中编辑断掉的链接 保存报告 任务三 测试站点内容 目录目录上一上一 页页

15、下一下一 页页 退出退出 知识小结知识小结 1. 利用“结果”面板测试站点内的错误链接、孤立文件。 2. 纠正并整理错误的链接，删除多余的孤立文件。 3. 保存测试报告。 任务三 测试站点内容 目录目录上一上一 页页 下一下一 页页 退出退出 举一反三：举一反三： 将本单元素材“举一反三”文件夹中的“pra7-4”文件夹拷 贝到D盘根目录下，创建站点“pra7-4”，使用“检查链接器” 检查“个人简历”网站中有无断掉的链接，分析并修复站点中 的断开链接。 任务三 测试站点内容 启发思路 检查网站中有无断掉的链接的方法有那些，回想如何打开 “检查链接器”，并在面板中修复断开的链接。 分组完成任务

16、。 目录目录上一上一 页页 下一下一 页页 退出退出 1分析网站中的孤立文件产生的原因都可能有哪些，对于 不同情况应该如何处理。 2使用“检查链接器”检查 “pra7-4”网站中有无孤立的 文件，并保存报告，删除孤立的文件。 作业作业 任务三 测试站点内容 目录目录上一上一 页页 下一下一 页页 退出退出 任务四任务四 网上安家网上安家 任务描述：任务描述：将网站上传并推广。 任务分析：任务分析：网站创建完成之后，还需要上传、发布并进行 必要的宣传活动。如果没有人知道网站的存在，那这个网站只 能是形同虚设。本任务将申请网站空间并上传站点，通过各项 宣传工作，增加网站的访问量，推广网站。 第七单

17、元 模板应用及网站发布 目录目录上一上一 页页 下一下一 页页 退出退出 自己动手：自己动手： 1申请域名和服务器空间 任务四 网上安家 首先，根据网站内容和主题特点，定义域名。然后上网查 询此域名是否被注册。如果已被注册，不能重名使用，需另行 定义；如果没有被注册，则需向域名注册服务商注册申请。 注册域名以后，还需要获得服务器或服务器空间，方法有： 购买自己的服务器、租用专用服务器或专用服务器上的空间、 申请免费服务器空间。通常采用向服务器空间供应商租用空间 的方法，把要发布的网站上传到自己租用的空间上，发布到互 联网。 什么是域名? 目录目录上一上一 页页 下一下一 页页 退出退出 完成了

18、上传前的准备工作后，需要把网站上传到 Internet服务器。Dreamweaver 8提供了多种上传方式，通常使 用FTP方式上传网站。 2网站的上传和下载 。 任务四 网上安家 运行Dreamweaver 8，选择菜单栏“站点” “管理站点” 选项，打开“管理站点”对话框，从列表框中选择“幽幽我心 的个人网站”，单击“编辑”按钮，弹出“站点定义”对话框。 选取“高级”选项卡“远程信息”分类项，在“访问”下拉列 表选中“FTP”，设置参数如下图所示。 目录目录上一上一 页页 下一下一 页页 退出退出 访问下拉列表中各 选项的含义是什么？ 单击这个按钮，弹 出“首选参数”对 话框并进行设置 选

19、中此复选框，表 示更新网页、模板 等后，自动上传到 服务器，使站点维 护变得非常简单。 选中此复选 框，应用于 多个人在协 作环境中工 作。 单击“确定”按钮， 完成“远程信息” 界面设置。打开 “文件”面板，如 下图所示。 单击这个按 钮，对用户 名和密码进 行测试，测 试成功后出 现测试成功 对话框。 任务四 网上安家 目录目录上一上一 页页 下一下一 页页 退出退出 连接/断开上传文件 展开 获取文件 在“文件”面板中，单击“连接”按钮连接到远端主机， 连接成功后，单击“展开”按钮，展开“文件”面板，如下图 所示。左侧为“远端站点”窗口，右侧为“本地文件”窗口。 任务四 网上安家 目录目

20、录上一上一 页页 下一下一 页页 退出退出 展开“文件”面板 任务四 网上安家 目录目录上一上一 页页 下一下一 页页 退出退出 选中本地站点中需要上传的文件或文件夹，单击“上传文 件”按钮，或者用鼠标直接拖拽文件到“远端站点”窗口中相 应的文件夹位置，进行文件上传。完成上传后，“本地文件” 窗口中被选择上传的文件将出现在“远端站点”窗口中，如下 图所示。至此，完成网站上传工作。 任务四 网上安家 如何下 载文件? 如何进 行网站 维护? 目录目录上一上一 页页 下一下一 页页 退出退出 3推广个人网站 网站发布后，为了推广自己的网站，可以把本网站注册到 搜索引擎中，以实现通过搜索引擎宣传推广

21、本网站的目的。常 见的搜索引擎有“搜狐”、“百度”、“Google”等，下面以 “搜狐”为例介绍搜索引擎的注册。在浏览器中打开搜狐引擎 网站“”，单击“免费登录入口”链接按钮，出现注册页面， 如下图所示，按要求填写信息，填写完信息后单击“确定”按 钮，完成注册。 任务四 网上安家 除了加入搜索引擎外，还有那些常用的方法推广个人 网站？ 目录目录上一上一 页页 下一下一 页页 退出退出 任务四 网上安家 注册界面 目录目录上一上一 页页 下一下一 页页 退出退出 任务总结：任务总结： 通过完成以上任务，学习了申请域名及服务器空间， “站 点定义”对话框及“文件”面板中相关功能的设置与应用，推 广

22、网站知识。 任务四 网上安家 目录目录上一上一 页页 下一下一 页页 退出退出 举一反三：举一反三： 1将本单元素材“举一反三”文件夹中的“pra7-5”文 件夹拷贝到D盘根目录下，创建站点“pra7-5”，将网站上 传到免费空间中，通过网络浏览该网站。 A.启发思路： 要上传网站首先要申请域名和服务器空间，如何申请？ 接下来通过什么面板可以设置并上传网站？ B.分组完成任务。 任务四 网上安家 目录目录上一上一 页页 下一下一 页页 退出退出 作业：作业： 1通过网络了解收费空间的获取方法，比较收费与免费空 间的区别。 2申请免费的网站空间，了解服务器的登陆与连接方法。 任务四 网上安家 任

23、务一 创建网站模板 相关知识：相关知识： 1保存模板之后，当前编辑文档的名称由“works.html” 变为“site.dwt”，其站点目录的变化如图所示。 站点目录中自动生成站点目录中自动生成 一个一个“Templates”文件夹，文件夹， 模板文件模板文件“site.dwt”自动自动 保存在此文件夹保存在此文件夹 。 2利用网页创建模板的方式 A.选择“文件” “另存为模板”菜单项； B. 单击“插入”栏“常用”类别中的“模板”按钮，在弹出的下 拉菜单中选择“创建模板”菜单项； C. 选择 “插入”“模板对象”“创建模板”菜单项。 任务一 创建网站模板 3模板中的区域类型 在模板中有可编辑

24、区域和锁定区域两种类型的区域。可编 辑区域是基于模板创建的页面中可以编辑的区域，其余为锁定 区域，即不可编辑的区域。 任务一 创建网站模板 4与可编辑区域有关的相关知识 创建可编辑区域之前，必须先选择想要设置为可编辑区域的文 本、图像、表格等，或将插入点放在想要插入可编辑区域的地 方，然后使用上述方法插入可编辑区域。如果页面中可编辑区 域名称不可见，可以勾选菜单栏“查看”“可视化助 理”“不可见元素”选项。命名可编辑区域时，不能使用单引 号、双引号、尖括号和“&”符号。 任务一 创建网站模板 5删除可编辑区域的方法： 单击可编辑区域名称后按Delete键；或在模板文件可编辑 区域内单击，选择菜

25、单栏“修改”“模板”“删除模板标记” 选项。 任务一 创建网站模板 相关知识：相关知识： 1在站点建设过程中，最好不断地对站点进行测试并 解决出现的问题，以便尽早发现问题，避免重复出错。 2站点测试主要包括：检查浏览器的兼容性，检查链 接，检查下载速度等。本单元主要介绍链接测试。 任务三 测试站点内容 3“链接检查器”参数介绍 “断掉的链接”：检查文档中是否存在断开的链接。假若存在 断开的链接，可以进行链接修复，也就是在断掉的链接列表中，选 择文件，单击右侧的“断掉的链接”，重新输入链接地址或单击右 侧的文件夹图标，打开“选择文件”对话框，在对话框中重新输入 链接地址。 “外部链接”：用于检查

26、外部链接。对于外部链接，检查器不 能判断正确与否，应自行核对。如果要修改一个外部链接，可以在 面板窗口中选择该外部链接，在右侧“外部链接”处输入一个新的 链接。 “孤立文件”：这些文件在站点中孤立存在，通常应该把它清 除。清除办法是：先选中该文件，按Delete键，选择“确定”按钮， 这样这些文件就放到了“回收站”。该选项只在检查整个站点链接 的操作中有效。 如果不想删除这些文件，可以单击“保存报告”按钮，在弹出 的对话框中为报告文件选择一个保存路径和文件名。该报告文件为 一个检查结果列表，可以参照此表，进行处理。 任务三 测试站点内容 相关知识：相关知识： 1域名类似于互联网上的门牌号码，是用于识别和定位互 联网上计算机的层次结构式字符标识，与该计算机的互联网协 议（IP）地址相对应。相对IP地址而言，域名更便于使用者理 解和记忆。域名属于互联网上的基础服务，基于域名可以提供、 FTP等应用服务。 任务四 网上安家 2“远程信息”参数说明 “FTP主机”、“登录”、“密码”等主要参数由服务器 空间供应商提供。 “FTP主机”：设置FTP主机地址，即提供空间的服务器 主机地址。 “主机目录”：用于输入远程存放网站的路径，如果没有 特别规定，可以为空，服务器将依据帐号自动进入专用的路径。 “登录”：输入登录提供空间的服务器的用户名。 “密码”：输入登录提供空间的服务