网页制作整合与发布网站教案.ppt

网页设计与制作 任务驱动式教程 单元11　整合与发布网站 教学环节 【教学导航 】 1 【操作准备 】 2 【引导训练/引导训练考核评价】 3 【同步训练 /同步训练考核评价】 4 【拓展训练 /拓展训练考核评价】 5 【教学导航】 （1）将多个网页整合为一个完整的网站 （2）测试网站 （3）清理文档 本单元重点 （1）测试网站 （2）发布网站 本单元难点 任务驱动法、分组讨论法、分析探究法、四步训练法 （操作准备－引导训练－同步训练－拓展训练） 教学方法 4课时（含考核评价） 课时建议 （1）学会将多个网页整合为一个完整的网站 （2）掌握测试网站的方法 （3）掌握发布网站的方法 （4）掌握清理文档的方法 （5）了解域名的申请方法 （6）了解宣传与推广网站的方法 教学目标 【操作准备】 （1）创建所需的文件夹，拷贝所需的资源 （2）启动Dreamweaver CS6 （3）创建本地站点 【引导训练】 【任务10-1】整合与发布“E游天下”网站 本单元“引导训练”的任务卡如表11-1所示。 【引导训练】 （1）创建一个网页文档index.html。 （2）设置网页的标题、Meta属性、关键字、说明和刷新属性。 【任务描述】 【任务10-1-1】新建网页文档index.html 【任务实施】 （1）新建一个网页文档 在站点文件夹“单元11”中创建一个名称为“index.html”或“default.html”的网页文档。 （2）设置网页标题 在【文档】工具栏的“标题”文本框输入网页标题“E游天下”。 （3）设置网页的Meta属性、关键字、说明和刷新属性 分别设置网页所使用的编码语言等Meta属性、站点关键字、站点说明和站点刷新属性，网页index.html的HTML代码如表11-3所示。 （4）保存该网页，预览其效果。 【引导训练】 （1）设置网页index1101.html的图像热点超链接。 （2）设置网页index1101.html导航栏的超链接。 【任务描述】 【任务10-1-2】设置网站主页的超级链接 【任务实施】 1．设置图像热点超链接 在网页index1101.html的地图中分别绘制矩形热点区域，然后设置热点超链接。网页index1101.html中插入的地图以及热点超链接的HTML代码如表11-4所示。 2．设置导航栏的超链接 打开子文件夹“webPage”中的网页top_nav.html，切换到【代码视图】窗口，添加必要的HTML代码，为相应的文字设置超级链接。 设置网页top_nav.html一级导航条中文字“E游调查”链接的网页地址为“../../../Unit07/task07-1/0701.html”，目标为“_parent”，一级导航条中文字及超链接设置对应的代码如表11-5所示。 为网页top_nav.html二级导航条中的菜单文字“张家界”、“黄山”、“千岛湖”、“上海”和“九寨沟”设置链接，其中菜单文字“上海”链接的地址为“../../../Unit06/task06-1/0602.html”，目标为“_blank”，二级导航条中的菜单文字及超链接设置对应的代码如表11-6所示。 【引导训练】 对“E游天下”网站进行测试。 【任务描述】 【任务10-1-3】测试“E游天下”网站 【任务实施】 1．测试网页 （1）检查链接 利用Dreamweaver CS6提供的【链接检查器】选项卡可以方便地检查错误链接，检查方法如下： 切换到已建立的站点“单元11”，在Dreamweaver CS6主界面中，选择命令【站点】→【检查站点范围的链接】，将显示如图11-2所示的检查结果。 图11-2　【链接检查器】选项卡中显示“断掉的链接” 【任务实施】 在“显示”下拉列表框中选择“外部链接”选项，则可以显示本网站中所有的外部链接，以便对外部分链接进行管理，如图11-3所示。 图11-3　【链接检查器】选项卡中显示“外部链接” 【任务实施】 在“显示”下拉列表框中选择“孤立文件”选项，则可以显示本网站中所有的孤立文件，以便对孤立文件进行管理，如图11-4所示。 图11-4　【链接检查器】选项卡中显示“孤立文件” 【任务实施】 （2）检查浏览器的兼容性 在Dreamweaver CS6主界面中，选择命令【文件】→【检查页】→【浏览器兼容性】，验证结果如图11-7所示。 图11-7　“浏览器兼容性”的检查结果 【任务实施】 2．测试本地站点 （1）检查链接 这一次检查链接不再利用“链接检查器”来检查错误链接，而是通过浏览网页逐个检查链接，主要检查是否有空链、断链和链接错误；页面之间是否能顺利切换；是否有回到上层