dreamweaver 课件第七单元.ppt

《dreamweaver 课件第七单元.ppt》由会员分享，可在线阅读，更多相关《dreamweaver 课件第七单元.ppt（55页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、目录目录上一上一页页下一下一页页退出退出dreamweaver 课件第七单元 Four short words sum up what has lifted most successful Four short words sum up what has lifted most successful individuals above the crowd: a little bit more. individuals above the crowd: a little bit more. -author -author -date-date目录目录上一上一页页下一下一页页退出退出第七单元 模板

2、应用及网站发布任务描述：任务描述：本单元将使用模板把以前创建的网页进行整合，使整个网站的风格统一，然后利用Dreamweaver 8内置的上传功能，测试、发布网站，对网站进行维护。其中，首页套用模板后的效果如图所示：目录目录上一上一页页下一下一页页退出退出第七单元第七单元 模板应用及网站发布模板应用及网站发布任务一 创建网站模板任务二 套用模板 任务三 测试站点内容 任务四 网上安家 目录目录上一上一页页下一下一页页退出退出任务一任务一 创建网站模板创建网站模板 任务描述：任务描述：利用原有网页创建网站模板。 任务分析：任务分析：创建网站模板，就是将相同的页面元素制作成模板，这样不但可以统一整

3、个网站的风格，而且能够加快网页的制作、更新与浏览的速度。创建模板的方法有两种：一种方法是将原有网页转存为模板文件，另一种方法是新建一个模板文件。本任务采用第一种方法。第七单元 模板应用及网站发布目录目录上一上一页页下一下一页页退出退出自己动手：自己动手：1启动Dreamwear 8，打开“幽幽我心的个人网站”。任务一 创建网站模板2在文件面板中显示“幽幽我心的个人网站” 的文件结构，如图所示。“访客信息”页面“心情日记”页面“家乡山水”页面“作品展示”页面“幽幽我心的个人网站”首页图7-1 站点当前文件结构目录目录上一上一页页下一下一页页退出退出3创建模板 打开“作品展示”页面任务一 创建网站

4、模板 选择 “文件” “另存为模板”菜单项，将“作品展示”页面另存为模板，如图所示：1.选择站点2.输入模板名称3.保存4.单击“是”保存模板之后，当前编辑文档的名称及其站点目录如何变化？ 利用网页创建模板的方式还有哪些？目录目录上一上一页页下一下一页页退出退出4设定可编辑区域 任务一 创建网站模板 准备工作：删除表格“table2”与“table3”及其内容，并插入表格“edit”，如下图所示。在模板中有几种类型的区域？目录目录上一上一页页下一下一页页退出退出 创建可编辑区域任务一 创建网站模板选择“插入”“模板对象”“可编辑区域”菜单项，弹出“新建可编辑区域”对话框，如图所示：1.输入可编

5、辑区域名称2.单击“确定”按钮 创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么办？命名可编辑区域时有哪些规定？办？命名可编辑区域时有哪些规定？目录目录上一上一页页下一下一页页退出退出任务一 创建网站模板 删除可编辑区域方框内的文本内容。 可编辑区域名称可编辑区域内的文本内容 保存模板，关闭文件。 如何删除可编辑区域？目录目录上一上一页页下一下一页页退出退出 任务总结：任务总结：通过完成本任务学习了利用网页创建模板的方法，其中，重点掌握创建和删除可编辑区域。任务一 创建网站模板目录目录上一上一页页下一下一页页退

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

7、编辑区域时名称中不能包含的字符有哪些。 2. 将本单元素材“举一反三”文件夹中的“pra7-2”文件夹拷贝到D盘根目录下，创建站点“pra7-2”，将页面“pra7-2. html”，另存为模板“pra7-2.dwt”，在表格“table_edit”中添加可编辑区域“edit7-2”，如图JYFS7-2所示，保存模板。目录目录上一上一页页下一下一页页退出退出任务二任务二 套用模板套用模板 任务描述：任务描述：套用模板并完善模板中的链接关系。 任务分析：任务分析：将任务一中创建的模板套用到网站中的“首页”、“家乡山水”、“景区介绍”、“访客信息”和“作品展示”页面，修改相关页面及文本中的内容，完

8、成整个网站的制作工作。 套用模板的方法有两种：一种是将模板文件套用到已存在的页面，另一种是通过模板新建一个网页文件。本任务通过第一种方法，统一整个网站的风格，完善网站内页面之间的链接关系。第七单元 模板应用及网站发布目录目录上一上一页页下一下一页页退出退出自己动手：自己动手：1启动Dreamwear 8，打开“幽幽我心的个人网站”。2在文件面板中打开首页Index.html。3应用模板 在“CSS样式”面板中删除“body”样式。 套用模板：选择“修改”“模板”“套用模板到页”菜单项，在“选择模板”对话框中进行设置，如图所示：任务二 套用模板目录目录上一上一页页下一下一页页退出退出 单击“选定

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

10、水”“./travel/travel.html”“访客信息”“./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”中的模板文件，为其添加相应的超级链接，保存后预览整个站点。1启发

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

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

14、注意：可以在“文件”面板中选中文件、文件夹或整个当前站点来设置检查范围。任务三 测试站点内容目录目录上一上一页页下一下一页页退出退出 测试完成后，分别查看“显示”下拉列表中包含的3种类型的链接（断掉的链接、外部链接、孤立文件）报告，如下图所示。下拉列表中各选项的含义是什么？任务三 测试站点内容 可以在其中编辑断掉的链接和保存测试报告，如下图所示。目录目录上一上一页页下一下一页页退出退出在编辑框中编辑断掉的链接保存报告任务三 测试站点内容目录目录上一上一页页下一下一页页退出退出 知识小结知识小结 1. 利用“结果”面板测试站点内的错误链接、孤立文件。 2. 纠正并整理错误的链接，删除多余的孤立文

15、件。 3. 保存测试报告。任务三 测试站点内容目录目录上一上一页页下一下一页页退出退出 举一反三：举一反三： 将本单元素材“举一反三”文件夹中的“pra7-4”文件夹拷贝到D盘根目录下，创建站点“pra7-4”，使用“检查链接器”检查“个人简历”网站中有无断掉的链接，分析并修复站点中的断开链接。任务三 测试站点内容 启发思路检查网站中有无断掉的链接的方法有那些，回想如何打开“检查链接器”，并在面板中修复断开的链接。 分组完成任务。目录目录上一上一页页下一下一页页退出退出1分析网站中的孤立文件产生的原因都可能有哪些，对于不同情况应该如何处理。2使用“检查链接器”检查 “pra7-4”网站中有无孤

16、立的文件，并保存报告，删除孤立的文件。 作业作业任务三 测试站点内容目录目录上一上一页页下一下一页页退出退出任务四任务四 网上安家网上安家 任务描述：任务描述：将网站上传并推广。 任务分析：任务分析：网站创建完成之后，还需要上传、发布并进行必要的宣传活动。如果没有人知道网站的存在，那这个网站只能是形同虚设。本任务将申请网站空间并上传站点，通过各项宣传工作，增加网站的访问量，推广网站。 第七单元 模板应用及网站发布目录目录上一上一页页下一下一页页退出退出 自己动手：自己动手： 1申请域名和服务器空间 任务四 网上安家 首先，根据网站内容和主题特点，定义域名。然后上网查询此域名是否被注册。如果已被

17、注册，不能重名使用，需另行定义；如果没有被注册，则需向域名注册服务商注册申请。 注册域名以后，还需要获得服务器或服务器空间，方法有：购买自己的服务器、租用专用服务器或专用服务器上的空间、申请免费服务器空间。通常采用向服务器空间供应商租用空间的方法，把要发布的网站上传到自己租用的空间上，发布到互联网。什么是域名?目录目录上一上一页页下一下一页页退出退出 完成了上传前的准备工作后，需要把网站上传到Internet服务器。Dreamweaver 8提供了多种上传方式，通常使用FTP方式上传网站。 2网站的上传和下载 。任务四 网上安家 运行Dreamweaver 8，选择菜单栏“站点” “管理站点”

18、选项，打开“管理站点”对话框，从列表框中选择“幽幽我心的个人网站”，单击“编辑”按钮，弹出“站点定义”对话框。选取“高级”选项卡“远程信息”分类项，在“访问”下拉列表选中“FTP”，设置参数如下图所示。目录目录上一上一页页下一下一页页退出退出访问下拉列表中各选项的含义是什么？单击这个按钮，弹出“首选参数”对话框并进行设置选中此复选框，表示更新网页、模板等后，自动上传到服务器，使站点维护变得非常简单。 选中此复选框，应用于多个人在协作环境中工作。 单击“确定”按钮，完成“远程信息”界面设置。打开“文件”面板，如下图所示。单击这个按钮，对用户名和密码进行测试，测试成功后出现测试成功对话框。 任务四

19、 网上安家目录目录上一上一页页下一下一页页退出退出连接/断开上传文件展开获取文件 在“文件”面板中，单击“连接”按钮连接到远端主机，连接成功后，单击“展开”按钮，展开“文件”面板，如下图所示。左侧为“远端站点”窗口，右侧为“本地文件”窗口。任务四 网上安家目录目录上一上一页页下一下一页页退出退出展开“文件”面板任务四 网上安家目录目录上一上一页页下一下一页页退出退出 选中本地站点中需要上传的文件或文件夹，单击“上传文件”按钮，或者用鼠标直接拖拽文件到“远端站点”窗口中相应的文件夹位置，进行文件上传。完成上传后，“本地文件”窗口中被选择上传的文件将出现在“远端站点”窗口中，如下图所示。至此，完成

20、网站上传工作。任务四 网上安家如何下载文件?如何进行网站维护?目录目录上一上一页页下一下一页页退出退出 3推广个人网站 网站发布后，为了推广自己的网站，可以把本网站注册到搜索引擎中，以实现通过搜索引擎宣传推广本网站的目的。常见的搜索引擎有“搜狐”、“百度”、“Google”等，下面以“搜狐”为例介绍搜索引擎的注册。在浏览器中打开搜狐引擎网站“http:/”，单击“免费登录入口”链接按钮，出现注册页面，如下图所示，按要求填写信息，填写完信息后单击“确定”按钮，完成注册。任务四 网上安家 除了加入搜索引擎外，还有那些常用的方法推广个人网站？ 目录目录上一上一页页下一下一页页退出退出任务四 网上安家

21、注册界面目录目录上一上一页页下一下一页页退出退出 任务总结：任务总结： 通过完成以上任务，学习了申请域名及服务器空间， “站点定义”对话框及“文件”面板中相关功能的设置与应用，推广网站知识。任务四 网上安家目录目录上一上一页页下一下一页页退出退出 举一反三：举一反三： 1将本单元素材“举一反三”文件夹中的“pra7-5”文件夹拷贝到D盘根目录下，创建站点“pra7-5”，将网站上传到免费空间中，通过网络浏览该网站。 A.启发思路： 要上传网站首先要申请域名和服务器空间，如何申请？接下来通过什么面板可以设置并上传网站？ B.分组完成任务。任务四 网上安家目录目录上一上一页页下一下一页页退出退出

22、作业：作业： 1通过网络了解收费空间的获取方法，比较收费与免费空间的区别。 2申请免费的网站空间，了解服务器的登陆与连接方法。 任务四 网上安家任务一 创建网站模板相关知识：相关知识： 1保存模板之后，当前编辑文档的名称由“works.html”变为“site.dwt”，其站点目录的变化如图所示。 站点目录中自动生成站点目录中自动生成一个一个“Templates”文件夹，文件夹，模板文件模板文件“site.dwt”自动自动保存在此文件夹保存在此文件夹 。 2利用网页创建模板的方式A.选择“文件” “另存为模板”菜单项；B. 单击“插入”栏“常用”类别中的“模板”按钮，在弹出的下拉菜单中选择“创

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

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

25、文件夹图标，打开“选择文件”对话框，在对话框中重新输入链接地址。 “外部链接”：用于检查外部链接。对于外部链接，检查器不能判断正确与否，应自行核对。如果要修改一个外部链接，可以在面板窗口中选择该外部链接，在右侧“外部链接”处输入一个新的链接。 “孤立文件”：这些文件在站点中孤立存在，通常应该把它清除。清除办法是：先选中该文件，按Delete键，选择“确定”按钮，这样这些文件就放到了“回收站”。该选项只在检查整个站点链接的操作中有效。 如果不想删除这些文件，可以单击“保存报告”按钮，在弹出的对话框中为报告文件选择一个保存路径和文件名。该报告文件为一个检查结果列表，可以参照此表，进行处理。任务三

26、测试站点内容相关知识：相关知识： 1域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的互联网协议（IP）地址相对应。相对IP地址而言，域名更便于使用者理解和记忆。域名属于互联网上的基础服务，基于域名可以提供www、Email、FTP等应用服务。任务四 网上安家 2“远程信息”参数说明 “FTP主机”、“登录”、“密码”等主要参数由服务器空间供应商提供。 “FTP主机”：设置FTP主机地址，即提供空间的服务器主机地址。 “主机目录”：用于输入远程存放网站的路径，如果没有特别规定，可以为空，服务器将依据帐号自动进入专用的路径。“登录”：输入登录提供空间的

27、服务器的用户名。“密码”：输入登录提供空间的服务器的密码。 如果要取消远程主机的设置，可以从“访问”下拉列表中选择“无”。任务四 网上安家 3“防火墙设置”对话框输入端口值（常见的是21，这要看空间供应商的规定） 在这里输入FTP地址 设置好后，单击“确定”按钮，回到“远程信息”设置界面。 任务四 网上安家 测试成功对话框设置好后，单击“确定”按钮，回到“远程信息”设置界面。 任务四 网上安家 5下载文件 在“远端站点”窗口中选择要下载的文件，单击“获取文件”按钮，即可将服务器中的文件下载到本地计算机中。 6网站维护 网站发布后，还要进行网站的后期维护工作，这项工作是网站长期顺利运转的保障。假

28、若网站建成后，维护力度不够，信息更新工作迟迟跟不上，建成的网站也就失去了它的意义。网站维护主要从以下几个方面入手。 第一，定时更新网站内容、备份网站数据； 第二，网站宣传，让更多的人知道网站； 第三，做好网站安全管理，防范黑客入侵网站，检查网站各个功能。例如，检查链接是否有错。任务四 网上安家 第一种方法是发送电子邮件： 利用Email向自己的网友发封信，告诉他们“我有自己的个人主页了”。 第二种方法是使用论坛、BBS、新闻组： 参加论坛、BBS或新闻组（NEWSGROUP）讨论，经常进入与网站主题相关的论坛，在论坛发言时，在签名档留下网站的名字及网址，利用自己的专业知识，为网友提供意见、分享经验、排忧解难，都会让自己网站的名字在网友中留下良好的印象。久而久之，网站的访问量也会随之增加的。当然，参与论坛的讨论是一项长期而艰巨的任务，需要持之以恒。7常用推广个人网站方法：任务四 网上安家 第四种方法是使用传统的媒介： 使用传统的传播媒介也是一种宣传的方法，如在名片上印上网站的网址，在报纸杂志上做广告等。 第三种方法是提供免费服务： 在网络上提供免费的资源下载、免费电影等，也会使网站的浏览量增加。 任务四 网上安家