商务网站设计与制作课程资源2017 HTML基本标记 项目十 制作包含特效的网页.ppt

* * * * * * * * * * 计算机应用技术专业主干课程 项目十 制作包含特效的网页 引入新课 将JavaScript程序嵌入到HTML代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。在网页中添加一些恰当的特效,使页面具有一定的交互性和动态效果，能吸引浏览者的眼球，提高页面的观赏性和趣味性。 教学目标 知识目标： （1）了解JavaScript基本概念 （2）掌握JavaScript基本语法 （3）掌握JavaScript代码嵌入HTML文档的方法 技能目标： （1）学会编写简单的JavaScript程序，能看懂较复杂的JavaScript程序，明确其实现的功能和各语句的含义 （2）能根据功能需求改写JavaScript程序代码，以改进或扩展其功能 （3）掌握在在网页中显示当前日期的实现方法 （4）掌握不同时间段显示不同问候语的实现方法 （5）掌握在网页中动态显示日期和时间的实现方法 态度目标： （1）培养独立思考问题、解决问题的能力 （2）培养学生认真仔细的工作态度 课前准备 1.将“sucai1”文件夹复制到本地硬盘 2.启动Dreamweaver CS3 3.创建名称为“生态游 ”的本地站点,站点根目录为“sucai1”文件夹 4.打开index0901.html，链接CSS样式文件sytle/09style.css 课堂引导训练 任务：制作包含特效的“云南旅游”网页 网页主题：云南旅游 任务描述： 在网页index0901.html中编写JavaScript程序，实现以下特效： （1）在网页中显示当前日期 （2）在不同时间段显示不同问候语 （3）在网页中动态显示日期和时间 课堂引导训练 课堂引导训练---任务实现流程 1．在网页中显示当前日期 【操作要求】 在网页index0901.html中文字“云南风光”的右侧显示当前日期及星期数，日期格式及顺序如图所示。 课堂引导训练---任务实现流程 【操作示范，知识讲解】 (1)编写显示当前日期的JavaScript代码 SCRIPT language=JavaScript type=text/javascript !-- var tempDate , year, month , day ; tempDate = new Date(); year= tempDate.getYear(); month= tempDate.getMonth() + 1 ; day = tempDate.getDate(); document.write(year+年+month+月+day+日); var weekArray=new Array(6); weekArray[0]=星期日 ; weekArray[1]=星期一 ; weekArray[2]=星期二 ; weekArray[3]=星期三 ; weekArray[4]=星期四 ; weekArray[5]=星期五 ; weekArray[6]=星期六 ; weekday=tempDate.getDay(); document.write(weekArray[weekday]) ; // -- /SCRIPT 课堂引导训练---任务实现流程 (2)分析显示当前日期的JavaScript代码 ①JavaScript代码嵌入到HTML代码中的标记符script与/script。 ②对于某些浏览器不支持JavaScript代码的注释符。 ③JavaScript区分字母的大小写，具有大小写敏感的特点。 ④JavaScript的变量声明语句、赋值语句和输出语