《dreamweaver 第七单元》由会员分享，可在线阅读，更多相关《dreamweaver 第七单元（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启发思路：关键是解决如何使用模板“
9、pra7-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将本单元素材“举一反三”文件夹中的“pra7-5”文件夹拷贝到D盘根目录下，创建站点“pra7-5”，将网站上传到免费空间中，通过网络浏览该网站。,A.启发思路： 要上传网站首先要申请域名和服务器空间，如何申请？接下来通过什么面板可以设置并上传网站？,B.分组完成任务。,任务四 网上安家,作业： 1通过网络了解收费空间的获取方法，比较收费与免费空
