DW网页设计教学—单元7实现网页特效.ppt

* * 单元7　实现网页特效 操作演练 1.2 技术提升 1.3 操作准备 1.1 考核评价 1.4 操作准备 1.1 操作准备 1.1 操作准备 1.1 操作准备 1.1 操作准备 7.1 操作演练 1.2 操作演练 1.2 操作演练 1.2 操作演练 1.2 操作演练 1.2 操作演练 7.2 技术提升 1.3 技术提升 1.3 技术提升 7.3 考核评价 1.4 考核评价 7.4 将javascript程序嵌入到HTML代码中，对网页元素进行控制，对用户操作进行响应，从而实现网页动态交互的特殊效果，这种特殊效果通常称为网页特效。 在网页中添加一些恰当的特效，使页面具有一定的交互性和动态性，能吸引浏览者的眼球，提高页面的观赏性和趣味性。 【教学导航】 教学目标 （1）学会编写简单的javascript程序，能看懂较复杂的javascript程序，明确其实现的功能和各语句的含义 （2）掌握在网页中显示当前日期的实现方法 （3）掌握不同时间段显示不同问候语的实现方法 （4）掌握动态改变网页中文本字体大小的实现方法 （5）掌握滚动网页标题栏中的文字的实现方法 （6）掌握鼠标指针指向不同的超级链接时，切换不同图片的实现方法 （7）了解在网页中自动切换焦点图片的实现方法 （8）了解在网页中自动滚动图片的实现方法 （9）了解在网页中自动漂浮图片的实现方法 （10）通过对典型javascript程序代码的分析，掌握javascript的基本语法，javascript程序的基本语法格式，能熟练链接外部javascript脚本文件等 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价） 【 7.1　操作准备】 在本地硬盘（例如D盘）中创建一个文件夹“网页设计与制作案例”，将光盘中的“单元2”（包括所有子文件夹以及文件）拷贝到该文件夹中。 使用创建站点向导创建名称为“单元7”的本地站点。 【7.2　操作演练】 【任务7-1】在网页中显示当前日期和问候语 【任务描述】 在网页文档0701.html中的合适位置编写javascript代码实现以下功能： （1）在网页文档0701.html的顶部显示当前日期及星期数，日期格式为：年－月－日－星期。 （2）在网页文档0701.html顶部当前日期及星期数的右侧根据不同时间段（采用24小时制）显示相应的问候语。 （3）关闭网页0701.html时自动弹出对话框。 网页0701.html的浏览效果如图7-1所示。 图7-1　网页0701.html的浏览效果 【任务实施】 1．编写javascript代码在网页中显示当前日期 打开网页文档0701.html，在网页头部输入表7-1所示的javascript代码。 在网页0701.html主体部分的合适位置 输入HTML代码script type=text/javascript dateweek()/script，调用自定义函数dateweek()，显示当前日期。 2．编写javascript代码在网页中显示问候语 在网页的【代码】视图中，将光标置于显示当前日期的javascript代码之后，然后输入表7-2所示的javascript代码。 3．编写javascript代码实现关闭网页时自动弹出对话框 在网页0701.html的头部的输入表7-3所示的javascript代码。 4．分析具有类似功能的javascript代码的作用与含义 表7-4也是显示当前日期的javascript代码，请分析这些代码的作用与含义，应用了哪些javascript知识。 【任务7-2】动态改变网页中文本字体大小 【任务描述】 在网页文档0702.html中的合适位置编写javascript代码，实现动态改变网页中文本字 体大小的功能。 网页文档0702.html的浏览效果如图7-3所示，单击“大”、“中”或“小”可以动态改变该区域的字体大小，单击“在线打印”会弹出【打印】对话框，单击“关闭”可以关闭该页面。 图7-3　网页文档0702.html的浏览效果 【任务实施】 1．编写改变文本字体大小的代码 在网页的【代码】视图中，将光标置于“/head”之前，然后输入表7-6所示的javascript代码。 2．设置超级链接，调用改变字