dreamweaver教案整编第七单元.ppt

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

1、Dreamweaver网页制作,第七单元 模板应用及网站发布,主 编：王树平 副主编：杜大志 宋彦琴 马文惠,第七单元 模板应用及网站发布,任务描述：本单元将使用模板把以前创建的网页进行整合，使整个网站的风格统一，然后利用Dreamweaver 8内置的上传功能，测试、发布网站，对网站进行维护。其中，首页套用模板后的效果如图所示：,第七单元 模板应用及网站发布,任务一 创建网站模板,任务二 套用模板,任务三 测试站点内容,任务四 网上安家,任务一 创建网站模板,任务描述：利用原有网页创建网站模板。,任务分析：创建网站模板，就是将相同的页面元素制作成模板，这样不但可以统一整个网站的风格，而且能够

2、加快网页的制作、更新与浏览的速度。 创建模板的方法有两种：一种方法是将原有网页转存为模板文件，另一种方法是新建一个模板文件。本任务采用第一种方法。,第七单元 模板应用及网站发布,自己动手： 1启动Dreamwear 8，打开“幽幽我心的个人网站”。,任务一 创建网站模板,2在文件面板中显示“幽幽我心的个人网站” 的文件结构，如图所示。,“访客信息”页面,“心情日记”页面,“家乡山水”页面,“作品展示”页面,“幽幽我心的个人网站”首页,图7-1 站点当前文件结构,3创建模板, 打开“作品展示”页面,任务一 创建网站模板,4.单击“是”,保存模板之后，当前编辑文档的名称及其站点目录如何变化？ 利用

3、网页创建模板的方式还有哪些？,4设定可编辑区域,任务一 创建网站模板, 准备工作：删除表格“table2”与“table3”及其内容，并插入表格“edit”，如下图所示。,在模板中有几种类型的区域？, 创建可编辑区域,任务一 创建网站模板,选择“插入”“模板对象”“可编辑区域”菜单项，弹出“新建可编辑区域”对话框，如图所示：,创建可编辑区域前，要做哪些准备工作？页面中可编辑区域名称不可见怎么办？命名可编辑区域时有哪些规定？,任务一 创建网站模板, 删除可编辑区域方框内的文本内容。,可编辑区域名称,可编辑区域内的文本内容, 保存模板，关闭文件。,如何删除可编辑区域？,任务总结： 通过完成本任务学

4、习了利用网页创建模板的方法，其中，重点掌握创建和删除可编辑区域。,任务一 创建网站模板,举一反三： 1将本单元素材“举一反三”文件夹中的“pra7-1”文件夹复制到D盘根目录下，创建站点“pra7-1”，文件存储在“D：pra7-1”,使用“文件”菜单中的“新建”选项，新建一个HTML类型模板“pra7-1.dwt”，效果如图JYFS7-1所示。提示：所用背景图像在“pra7-1images”文件夹中，页面使用表格布局。, 启发思路 创建模板的方法有两种：一种方法是将原有页面转存为模板文件，另一种方法是新建一个模板文件。本任务采用第二种方法。, 分组完成任务。,任务一 创建网站模板,任务一 创

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

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

7、站”。 同理，完成“家乡山水”、“景区介绍”、“访客信息”和“作品展示”页面应用模板的操作。 （分组完成）, 添加超级链接：打开模板文件“site.dwt”，按照下表所示，编辑页面中表格“tabel1-1”内的导航文本，添加超级链接。,完善站点,任务二 套用模板,在“行为”面板中，将该行为事件设置为“onClick”。, 选中添加了空链接的文本“心情日记”，在“行为”面板中添加“打开浏览器窗口”行为，在对话框中进行参数设置，如图所示：,任务二 套用模板, 保存模板文件,在“更新模板文件”对话框，单击“更新”按钮，完成更新后，单击“更新页面”对话框中的“关闭”按钮 ，如图所示。,任务二 套用模板

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

9、a7-3.dwt”创建新页面的问题，可以借助于帮助、上网等寻求答案。,2分组完成任务。,任务二 套用模板,作业： 1. 分析本任务中作品展示页面套用模板后还有没有必要修改标题。 2. 总结套用模板的步骤。,任务二 套用模板,任务三 测试站点内容,任务描述：测试并完善现有网站内容。,任务分析：网站制作完成并不意味着工作的结束，设计与制作只是网站开发的一部分工作，还要将创建好的网站发布到互联网上，让用户去浏览，在这之前需要对网站文件进行检查和整理，避免将存在错误的网页上传到互联网。本任务将使用Dreamweaver 8中的“结果”面板，测试站点当中存在的各种错误链接和孤立文件。,第七单元 模板应用

10、及网站发布,自己动手： 1向表格内部添加内容,在“设计”视图中，选择菜单栏“窗口”“结果”选项，在“属性”面板下方打开“结果”面板，选择“链接检查器”标签。如下图所示：,任务三 测试站点内容,为什么要进行站点测试 站点测试有那些,单击“检查链接”按钮，选择“检查整个当前本地站点的链接”选项，如下图所示，测试当前站点中的所有链接,若要检查当前文档内的链接，应先将文档保存。,注意：可以在“文件”面板中选中文件、文件夹或整个当前站点来设置检查范围。,任务三 测试站点内容,测试完成后，分别查看“显示”下拉列表中包含的3种类型的链接（断掉的链接、外部链接、孤立文件）报告，如下图所示。,下拉列表中各选项的

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

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

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

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

15、家,连接/断开,上传文件,展开,获取文件,在“文件”面板中，单击“连接”按钮连接到远端主机，连接成功后，单击“展开”按钮，展开“文件”面板，如下图所示。左侧为“远端站点”窗口，右侧为“本地文件”窗口。,任务四 网上安家,展开“文件”面板,任务四 网上安家,选中本地站点中需要上传的文件或文件夹，单击“上传文件”按钮，或者用鼠标直接拖拽文件到“远端站点”窗口中相应的文件夹位置，进行文件上传。完成上传后，“本地文件”窗口中被选择上传的文件将出现在“远端站点”窗口中，如下图所示。至此，完成网站上传工作。,任务四 网上安家,如何下载文件?,如何进行网站维护?,3推广个人网站 网站发布后，为了推广自己的网

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

17、”文件夹中的“pra7-5”文件夹拷贝到D盘根目录下，创建站点“pra7-5”，将网站上传到免费空间中，通过网络浏览该网站。,A.启发思路： 要上传网站首先要申请域名和服务器空间，如何申请？接下来通过什么面板可以设置并上传网站？,B.分组完成任务。,任务四 网上安家,作业： 1通过网络了解收费空间的获取方法，比较收费与免费空间的区别。 2申请免费的网站空间，了解服务器的登陆与连接方法。,任务四 网上安家,任务一 创建网站模板,相关知识：,1保存模板之后，当前编辑文档的名称由“works.html”变为“site.dwt”，其站点目录的变化如图所示。,站点目录中自动生成一个“Templates”

18、文件夹，模板文件“site.dwt”自动保存在此文件夹 。,2利用网页创建模板的方式,A.选择“文件” “另存为模板”菜单项； B. 单击“插入”栏“常用”类别中的“模板”按钮，在弹出的下 拉菜单中选择“创建模板”菜单项； C. 选择 “插入”“模板对象”“创建模板”菜单项。,任务一 创建网站模板,3模板中的区域类型 在模板中有可编辑区域和锁定区域两种类型的区域。可编辑区域是基于模板创建的页面中可以编辑的区域，其余为锁定区域，即不可编辑的区域。,任务一 创建网站模板,4与可编辑区域有关的相关知识 创建可编辑区域之前，必须先选择想要设置为可编辑区域的文本、图像、表格等，或将插入点放在想要插入可编

19、辑区域的地方，然后使用上述方法插入可编辑区域。如果页面中可编辑区域名称不可见，可以勾选菜单栏“查看”“可视化助理”“不可见元素”选项。命名可编辑区域时，不能使用单引号、双引号、尖括号和“&”符号。,任务一 创建网站模板,5删除可编辑区域的方法： 单击可编辑区域名称后按Delete键；或在模板文件可编辑区域内单击，选择菜单栏“修改”“模板”“删除模板标记”选项。,任务一 创建网站模板,相关知识： 1在站点建设过程中，最好不断地对站点进行测试并解决出现的问题，以便尽早发现问题，避免重复出错。 2站点测试主要包括：检查浏览器的兼容性，检查链接，检查下载速度等。本单元主要介绍链接测试。,任务三 测试站

20、点内容,3“链接检查器”参数介绍 “断掉的链接”：检查文档中是否存在断开的链接。假若存在断开的链接，可以进行链接修复，也就是在断掉的链接列表中，选择文件，单击右侧的“断掉的链接”，重新输入链接地址或单击右侧的文件夹图标，打开“选择文件”对话框，在对话框中重新输入链接地址。 “外部链接”：用于检查外部链接。对于外部链接，检查器不能判断正确与否，应自行核对。如果要修改一个外部链接，可以在面板窗口中选择该外部链接，在右侧“外部链接”处输入一个新的链接。 “孤立文件”：这些文件在站点中孤立存在，通常应该把它清除。清除办法是：先选中该文件，按Delete键，选择“确定”按钮，这样这些文件就放到了“回收站

21、”。该选项只在检查整个站点链接的操作中有效。 如果不想删除这些文件，可以单击“保存报告”按钮，在弹出的对话框中为报告文件选择一个保存路径和文件名。该报告文件为一个检查结果列表，可以参照此表，进行处理。,任务三 测试站点内容,相关知识：,1域名类似于互联网上的门牌号码，是用于识别和定位互联网上计算机的层次结构式字符标识，与该计算机的互联网协议（IP）地址相对应。相对IP地址而言，域名更便于使用者理解和记忆。域名属于互联网上的基础服务，基于域名可以提供www、Email、FTP等应用服务。,任务四 网上安家,2“远程信息”参数说明 “FTP主机”、“登录”、“密码”等主要参数由服务器空间供应商提供

22、。 “FTP主机”：设置FTP主机地址，即提供空间的服务器主机地址。 “主机目录”：用于输入远程存放网站的路径，如果没有特别规定，可以为空，服务器将依据帐号自动进入专用的路径。 “登录”：输入登录提供空间的服务器的用户名。 “密码”：输入登录提供空间的服务器的密码。 如果要取消远程主机的设置，可以从“访问”下拉列表中选择“无”。,任务四 网上安家,3“防火墙设置”对话框,输入端口值（常见的是21，这要看空间供应商的规定）,在这里输入FTP地址,设置好后，单击“确定”按钮，回到“远程信息”设置界面。,任务四 网上安家,测试成功对话框,设置好后，单击“确定”按钮，回到“远程信息”设置界面。,任务四

23、 网上安家,5下载文件 在“远端站点”窗口中选择要下载的文件，单击“获取文件”按钮，即可将服务器中的文件下载到本地计算机中。,6网站维护 网站发布后，还要进行网站的后期维护工作，这项工作是网站长期顺利运转的保障。假若网站建成后，维护力度不够，信息更新工作迟迟跟不上，建成的网站也就失去了它的意义。网站维护主要从以下几个方面入手。 第一，定时更新网站内容、备份网站数据； 第二，网站宣传，让更多的人知道网站； 第三，做好网站安全管理，防范黑客入侵网站，检查网站各个功能。例如，检查链接是否有错。,任务四 网上安家,第一种方法是发送电子邮件： 利用Email向自己的网友发封信，告诉他们“我有自己的个人主

24、页了”。 第二种方法是使用论坛、BBS、新闻组： 参加论坛、BBS或新闻组（NEWSGROUP）讨论，经常进入与网站主题相关的论坛，在论坛发言时，在签名档留下网站的名字及网址，利用自己的专业知识，为网友提供意见、分享经验、排忧解难，都会让自己网站的名字在网友中留下良好的印象。久而久之，网站的访问量也会随之增加的。当然，参与论坛的讨论是一项长期而艰巨的任务，需要持之以恒。,7常用推广个人网站方法：,任务四 网上安家,第四种方法是使用传统的媒介： 使用传统的传播媒介也是一种宣传的方法，如在名片上印上网站的网址，在报纸杂志上做广告等。,第三种方法是提供免费服务： 在网络上提供免费的资源下载、免费电影等，也会使网站的浏览量增加。,任务四 网上安家,