《WEB前端开发实战》课件 任务六：选项卡特效制作.pptx

项目二JavaScript网页特效制作主讲：陈倩htmlh5imgjavascriptwebcsscolorhr任务一选项卡特效制作

目录任务情境任务目标任务描述任务实施学习资源考核评价课后拓展1+X考证练习htmlh5imgjavascriptwebcolorhr

任务情境在当前网络无处不在的信息化时代，当我们浏览一些网页时，会发现有很多文章或图片会不停地进行各种各样的变化，这使得网站更加的生动和活泼，这些动画的效果很大程度是由JavaScript控制的。JavaScript是Web页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，直接嵌入到HTML页面中，把静态页面转变成支持用户交互并响应事件的动态页面。JavaScript在网页中常用于读写HTML元素、嵌入动态文本、动态修改CSS样式表、对浏览器事件做出响应、表单数据验证、检测访客的浏览器信息等等。

工作任务单工作任务单任务要求在古迹页面中“新闻聚焦”栏目基础上制作“通知公告”栏目，并为其添加选项卡切换效果甲方提供的设计图如右图所示评判标准1.能够进行正确的页面布局分析2.能够进行正确的切图3.网站文件命名正确4.代码编写符合标准5.样式编写正确，能够达到参考效果1+X技能考核标准能掌握JavaScript基础语言、函数、DOM的功能技能大赛考核要求1.创建符合并通过W3C标准验证的代码（HTML5，CSS3）2.能创建JavaScript代码，实现选项卡切换效果，增强网站功能性3.JavaScript代码具有模块化和可重用性作品提交要求站点文件夹评判标准1.能正确运用HTML标签、CSS样式和JavaScript相关知识实现设计图效果2.代码编写符合W3C标准验证3.JavaScript语法使用正确，具有可重用性切换前：切换后：

任务目标任务目标能够掌握变量的命名规则和声明方法。能够掌握函数的声明和调用方法。了解常用的HTML事件，掌握事件的使用方法。了解DOM模型的概念，掌握运用DOM访问节点，改变节点属性的方法。

任务描述选项卡也可以简称为Tab，它是将不同的内容重叠放置在某一布局区块内，在重叠的内容区里每次只有其中一层是可见的。用户通过鼠标点击或移到内容区所对应的标签上，来请示显示该层内容区。在如今的网页设计中，Web界面的设计趋势是缩短页面屏长，降低信息的显示密度，但同时又不能牺牲可视的信息量。在这种趋势下，Tab这种交互元素成为了一个越来越普遍的应用。基本在每个网站中都有这样的效果被应用到前台的设计中去。本次专题任务将为广西少数民族文化资源网古迹页面中“新闻聚焦”栏目添加选项卡切换效果。

任务实施分析任务构建HTML+CSS美化页面JavaScript特效默认状态时，效果分析：（1）添加“通知公告”选项卡，设置未选中状态的样式。（2）添加“通知公告”栏目内容，设置样式，默认不显示。

任务实施分析任务构建HTML+CSS美化页面JavaScript特效特效后，效果分析：（1）“新闻聚焦”选项卡样式改变，为未选中状态样式（.title2）。（2）“通知公告”选项卡样式改变，为选中状态样式(.title1）。（3）“新闻聚焦”栏目内容不显示（display:none）。（4）“通知公告”栏目内容显示（display:block）。

任务实施分析任务构建HTML+CSS美化页面JavaScript特效构建HTML标准流布局+CSS页面美化操作步骤步骤一：制作通知公告选项卡构建HTML结构构建CSS样式步骤二：制作通知公告栏目内容构建HTML结构构建CSS样式

单击选项卡时，调用不同的函数。步骤八任务实施分析任务构建HTML+CSS美化页面JavaScript特效编写JavaScript脚本，实现特效新建JavaScript文件声明变量newsT，通过DOM获取“新闻聚焦”选项卡所在的span标签。声明变量noticeT，通过DOM获取“通知公告”选项卡所在的span标签。声明变量newsB，通过DOM获取新闻聚焦栏目内容所在的div标签。步骤一步骤二步骤三步骤四声明变量noticeB，通过DOM获取通知公告栏目内容所在的div标签。步骤五声明单击“通知公告”选项卡时调用的函数步骤六声明单击“新闻聚焦”选项卡时调用的函数。步骤七

学习资源DOM变量什么是变量？函数事件通俗的说，变量是用于存放数据的容器，就像一个装东西的盒子，我们通过变量名获取数据，甚至修改数据。?

学习资源DOM变量变量的使用函数事件声明变量varsum;//声明一个名称为sum的变量（1）var是一个JS关键字，用来声明变量。（