Web前端开发（JavaScript+jQuery）【教案】 Web前端技术整体设计

编写说明：正文内容格式不限，此格式仅供参考课程教学设计（202*～202*学年第2学期）课程名称：Web前端技术开课学院（部）******8制定人：******合作人：制定时间：202*年2月PAGEPAGE5Web前端技术课程整体教学设计课程信息课程代码：032W36学分：3学时：64授课对象：*******课程类型：专业必修课课程性质：理实一体化二、课程目标设计整体目标：《WEB前端技术》课程计算机网络技术专业的岗位群平台课，旨在“有趣、有效、只学有用的”原则上，结合学生的认知规律和现状，使得学生能够在有限的课时内“专业”和“深入”地学习与WEB前端技术相关知识。课程始终以“社会主义核心价值观”为引领，秉承校训“尚德明责，笃学强能”的理念，通过案例教学和任务实践，引导学生在“学中做”、“做中学”，把基础知识的学习和基本技能的掌握有机地结合在一起，从具体操作中培养应用能力、解决复杂问题的综合能力和高级思维，并引导学生逐步养成精益求精，追求卓越的品质。由于本课程界面变现的特点，更多的是将思政内容融入网页变现内容上，同时将含有思政元素的内容作为课程素材提供给学生，通过思政与专业知识的结合，使学生逐步树立正确的价值观，做一个新时代爱祖国、爱人民，具有爱国情怀和社会责任感的合格‘匠人’。课程面向职业岗位采用基于任务的方式，以项目开发为主线，循序渐进的阐述Web前端的各项知识，通过三大模块WEB知识储备、WEB案例提高、WEB实战演练，分别完成知识点讲解、案例讲解、项目实战三大步骤，帮助学生把握前端的核心技术HTML5、CS3S、JavaScript，将其纳入真实的项目场景中，帮助学生更好的理解和应用这些技术。明确的学习目标及循序渐进的知识体系，使理论知识和实践技能同步提高。通过本课程的学习，能够使学习者熟悉WEB页面制作流程、掌握常见的页面布局效果、学会设计制作各种具有动态特效的网站。课程结构如图1所示。图1课程内容结构图知识目标掌握JavaScript的概念、应用与特点；掌握JavaScript的3种引入方式，了解每种方式的特点和应用场景；掌握JavaScript的语法、数据类型、基本的算数和逻辑运算操作；掌握JavaScript中条件分支语句和循环语句的使用；了解关键字与保留字；了解数据类型的分类；掌握基本数据类型的使用；掌握数组的定义；理解并能实现冒泡排序；理解并能实现插入排序；其他常用的数组操作方法；了解JavaScript函数的基本概念，掌握函数的基本代码；熟练掌握函数的各种参数设置；了解函数表达式的概念，能够区分函数表达式和普通函数的区别；理解函数嵌套调用的概念；掌握函数递归调用的原理与实现；理解闭包函数的特点和应用场景；掌握对象的定义语法；理解对象的深拷贝与浅拷贝机制；理解为什么使用构造函数；掌握如何自定义构造函数；理解私有成员的概念；掌握String、Number、Math、Date等对象的使用；掌握JavaScript如何进行错误处理；了解常见的错误类型。能够区分语法错误与普通错误；掌握如何在Chrome浏览器中调试JavaScript；掌握如何利用对象来保存数据；掌握BOM的基本结构；理解window对象与其他BOM对象的关系；掌握navigator对象的常用属性和方法；掌握screen对象的常用属性和方法；掌握HTML节点树的概念，能够说出节点之间的关系；认识常用的DOM对象，能够区分元素与节点；掌握节点的类型；掌握节点方式访问节点的常用属性的使用；运用面向对象编程更好地组织代码；掌握事件对象的常用属性和方法；掌握页面加载事件的机制；理解什么是jQuery库；了解jQuery的优势和设计理念；掌握jQuery的下载与引入；了解jQuery代码与JavaScript代码的区别；理解jQuery选择器的作用和设计思想；掌握jQuery操作页面元素；掌握jQuery操作DOM节点的方法；了解jQuery的事件触发机制；熟悉jQuery事件绑定和事件解绑的方法；熟悉jQuery事件对象的属性和方法的使用；掌握jQuery事件冒泡的概念；熟悉jQuery中常用动画的使用；掌握熟练运用jQuery动画于网页中；掌握jQuery的常用工具函数；掌握移动端响应式布局的实现方法。（2）技能目标能够掌握JavaScript的3种引入方式；能够正确使用常用输出语句；能够进行JavaScript的简单数据运算操作；能够对变量进行赋值操作；能够掌握各种运算符的使用；能够使用判断结构语句；能够使用while、do…while、for等循环结构语句；能够掌握跳转语句break、continue的使用方法；能够创建、删除数组；能够对数组进行遍历；能够正确使用函数；能够定义对象；能够访问与遍历对象成员；能够使用JavaScript内置构造函数实例化对象；能够自定义构造函数；能够掌握常用对象的使用方法；能够操作弹出对话框和窗口；能够使用浏览器对象模型“BOM”与浏览器“对话；能够对窗口位置和大小进行控制；能够使用定时器；能够使用location对象更改URL；能够使用history对象实现历史记录跳转；能够增加、删除、创建节点；能够运用DOM的方法和属性获取网页中的元素；能够掌握如何获取事件对象；能够掌握页面加载事件的机制；能够为页面中的元素绑定键盘或鼠标事件；能够正确的引用jQuery文件；能够使用jQuery遍历页面元素；能够使用jQuery操作页面样式、属性、内容等方法；能够熟练运用jQuery动画创建动态页面；能够运用jQuery进行自定义动画效果；能够运用jQuery操作DOM节点的方法；能够掌握jQuery事件冒泡及阻止事件冒泡的方式；能够使用JQuery库实现网页特效；能收集、整理、处理信息，并对网页所需素材进行加工处理；能利用表单、网络编程技术及数据库技术建立网页的交互式页面，实现简单的前后台数据传递功能。（3）素质目标具有勤奋学习、严谨求实的态度；具有勤精益求精、创新的工作作风；具有良好的心理素质和职业道德素养；具有高度责任心和良好的团队合作意识和创新精神；具有科学思维方式和一定的唯物辩证法思想；具有发现美、创造美的审美能力；具有较强的网页设计创意思维、艺术设计素质；具有一定的表达沟通能力和组织协调能力；具有良好的编写代码的习惯。三、课程教学活动设计基于混合式教学新需求，将纸质教材、在线课程、网站和教学资源库的线上线下教育资源有机衔接起来，结合《高等学校课程思政建设指导纲要》要求，全面融入“思政要求、岗位职业标准、技能竞赛标准、1+X证书职业技能等级标准”，以项目为载体,以任务为驱动，以学生为主体，构建了‘教学做比评’五位一体的教学模式，创建了基于翻转课堂需求的碎片化教学资源。以此把学生组织起来、把学习过程完善起来、让学生参与课堂、让学习主导课堂、增加课堂的吸引力、拓展课堂教学宽度。润物无声地将课程思政育人贯穿其中，充分运用在线学习平台优化课堂教学过程，针对重点和难点，创建基于翻转课堂需求的碎片化教学资源。结合产教融合真实案例，运用任务驱动和头脑风暴，将自主学习和小组合作探究相结合，借助信息化手段，在教学实施过程中，理论-实践-课程思政环环相扣。（1）教学组织安排1）让学生参与课堂。关注学生课堂学习，更关注他们的生活与实践；关注学生综合素质的发展，又关注学生的特长发展及在日常生活与社会实践中的表现，提升学生课堂参与度。2）让学习主导课堂。先学后教，让教有针对性；以学定教，让教有有效性。压缩教学时间，保障学生学习时间，提前发布课程学习任务单，通过在线评比等手段，促使学生主动学在教学之前。3）把学生组织起来。挖掘同学之间的学习资源，营造互帮互助共同受益的学习氛围。教师精准把握学生学习状况，分组分任务，充分调动学生，有效地把学生组织起来。4）把学习过程完善起来。注重预习的重要性，使学生对整个学习过程负起责任。根据学生学习进度，及时给予帮助指导，借助实时通讯软件答疑解惑。5）增加课堂的吸引力。课堂设计具有启发性、趣味性，同时注意语言的艺术性。借助教学手段创设教学情境，让学生更乐意于上课，课堂教学才能富有吸引力。6）拓展课堂教学宽度。借助信息化手段，联合企业行业专家，加大实践力度，延伸课堂高度，拓展教学宽度，提升学生自主学习与自主探究能力。（2）教学活动过程课前自主学习：借助于新的互动性较强的网络学习平台，构建在线学习视频供学生自主学习，培养学生自主学习能力，树立大局意识。课中知识内化：采用“教-学-做-比-评”五位一体的课堂教学方式，培养学生发现问题、分析问题及解决问题的能力。在这个过程中以社会主义核心价值观为引领，引导学生去思考，培养学生的创新创作能力和团队合作意识。课后巩固提高：借助互动交流平台和资源库，拓展学习实践空间，满足个性化学习需求，课后实践作业用以巩固课堂知识、拓展视野、与时俱进，以增强学生的创新能力和精益求精的品质。（3）学习考核评价动态评价，量化结果——建立人文性、多元性课程评价体系：基于学习效果，由任课教师、小组、学生本人组成评价主体，区分“课前”“课中”“课后”不同时间节点的动态评价，构建主体多元化、过程动态化、结果可视化的层级设计评价，突出学习参与度、思政心得、发帖数量与质量、团队合作等方面考核权重，实现客观量化评价与主观效度检验统一，侧面实时了解学生思想反映，达到精准掌握学生思想、素质、知识、技能育人的目标。课程评价贯穿课前（30%）、课中（30%）、课后（40%）全过程；评价内容包括理论测试（10%）、线上学习（10%）、项目作业（40%）和期末测评（40%）四个维度。2．课程教学标准课程标准建设应注重课程目标的明确、课程内容的更新拓展、教学方法的多样化、教学资源的丰富化和课程评价的科学化等方面的工作，以适应行业发展和市场需求的变化，不断提高课程的教学质量和水平。本课程标准建设从课程性质与任务、课程培养目标（基本知识教学目标、职业能力培养目标、素质教育目标）、设计思路、课程内容要求及教学设计、课程实施建议（教材建议、任课教师建议、教学方法建议、教学评价建议、课程诊改建议）、课程资源建设等方面进行课程标准的制定，规范各项教学要求，以提高教学质量与水平。根据专业培养目标、理论教学目标和实践教学目标及用人单位对于“前端设计师”的要求，修订了《Web前端技术》课程教学大纲，并制定了本课程的教学标准。通过本课程的教学，逐渐培养学生科学的思维方法和创新思维能力，使学生的操作能力、分析问题和解决问题的能力、获取新知识的能力、团结协作的能力得以提高。通过本课程的学习，使学生能够具备以下四方面的能力：1)Web站点的规划、构建与发布的能力；2)网页与图形图像创意、设计和制作的能力；3)动画创意、设计和制作的能力；4)考取前端设计师证书的能力。3．课程体系结构内容课程面向职业岗位采用基于任务的方式，以项目开发为主线，循序渐进的阐述Web前端的各项知识，通过三大模块（图2）Web知识储备、Web案例提高、Web实战演练，分别完成知识点讲解、案例讲解、项目实战三大步骤，帮助学生把握前端的核心技术HTML5、CSS3、JavaScript，嵌入企业项目真实案例，应用全新教材，依托行业企新技术，力求打造适应新形势，具有互联网思维和技能的IT技术人才。本门课程总学时为64学时，3学分。图2课程内容思维导图四、课程设计及安排序号项目名称工作任务知识、能力、素质教学情景或教学设计结果（作业、报告等）课时素质内容和要求知识内容和要求技能内容和要求1Web前端概述Web发展历程Web前端当前就业前景3.Web前端架构.4.Web前端开发工具1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.掌握HTTP协议格式2.了解HTTP状态码识别3.什么是Web前端开发4.Web前端开发工具有哪些5.了解浏览器兼容性问题1.掌握HTTP协议格式2.代码的书写合适格式3.Web前端开发工具的使用该学习项目的教学环境是教学做一体化机房。学习环节1：通过分析，使学生了解Web前端技术相关软件及其使用；学习环节2：学会利用图形编辑软件、Hbuilder设计制作Web前端页面。作业：Web前端开发的构成要素12Javascript入门JavaScript引入方式、语法风格、注释、输出语句1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯具体团队合作意识4.具有吃苦耐劳的品质5.具有良好的网络素养1.熟悉JavaScript的用途和发展状况2.理解JavaScript与ECMAScript的关系3.掌握JavaScript的基本使用方法1.掌握变量的定义与赋值2.掌握数据类型与运算符的使用学习环节1：什么是JavaScript；2.JavaScript的由来与发展；3.JavaScript的特点；4.开发工具介绍学习环节2：JavaScript的特点；JavaScript是脚本语言，具有脚本语言的一些特点：简单、易学、易用。JavaScript可以跨平台，开发和使用都非常方便，支持PC和移动端。JavaScript支持面向对象，诞生了许多库和框架，提高开发速度，能够用来解决复杂问题。JavaScript与ECMAScript的关系；ECMAScript是一种规范标准，用于统一JavaScript同类的语言，如JScript。学习环节3：【案例】第一个JavaScript程序学习环节4：JavaScript引入方式；学习环节5：JavaScript基本应用--【动手实践】验证用户输入的密码基本的算术运算2+13JavaScript基本语法1.网页模块拆分2.DIV标签的使用3.CSS3新增属性4.盒子模型5.JavaScript中脚本的基本结构6.JavaScript中语句的输入输出1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.理解标识符的概念。2.熟悉关键字与保留字。1.掌握变量的定义与赋值2.掌握数据类型与运算符的使用3.掌握流程控制语句的使用 4.掌握变量的基本使用学习环节1：熟悉关键字与保留字；掌握变量的基本使用；掌握变量的赋值操作。学习环节2：数据类型分类、基本数据类型、数据类型检测、数据类型转换学习环节3：表达式、算术运算符、字符串运算符、赋值运算符、比较运算符学习环节4：逻辑运算符、三元运算符、位运算符、运算符优先级、选择结构；学习环节5：循环结构、跳转语句学习环节6：【案例】打印金字塔。九九乘法口诀表的实现3+14函数函数的创建和使用、变量的作用域、匿名与回调函数、闭包函数1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.掌握函数的使用方法2.掌握变量的作用域3.掌握匿名函数与闭包函数1.能够进行函数的调用2.能够书写函数表达式学习环节1：对上节课布置的作业以及学生提出的问题进行答疑解惑；回顾前面学过的内容，引出本节课主题；明确学习方向。学习环节2：初识函数、参数设置、函数的调用、变量的作用域学习环节3：函数表达式、匿名函数、回调函数学习环节4：函数嵌套与作用域链、递归调用学习环节5：什么是闭包函数、闭包函数的实现、动手实践：网页计算器简易购物计算器的实现3+15BOMBOM组成结构、BOM常用对象和方法、定时器窗口位置和大小、框架操作、history、screen1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.了解BOM的组成结构2.掌握定时器的操作3.熟悉location与history对象1.能够操作BOM对象2.能够使用定时器制作倒计时3.能够进窗口的操作学习环节1：（1）对上节课布置的作业以及学生提出的问题进行答疑解惑。（2）回顾前面学过的内容，引出本节课主题。在前面的学习中，用到的alert()、prompt()函数其实是window对象的方法，关于window对象具体如何使用，它有哪些常用的属性和方法，将在本节进行具体讲解。（3）明确学习方向。理解什么是BOM。掌握BOM的基本结构。理解window对象与其他BOM对象的关系。掌握如何弹出对话框和窗口。掌握如何控制窗口位置和大小。掌握如何进行框架操作。掌握定时器的使用方法。学习环节2：什么是BOM对象、window对象学习环节3：【案例】限时秒杀学习环节4：location对象、案例：定时跳转、history对象学习环节5：【案例】定时跳转红绿灯效果的实现3+16DOM获取元素、元素操作、节点操作获取节点、节点追加1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.了解什么是DOM2.掌握元素与样式的操作3.掌握节点的操作1.能够进行元素操作。2.能够进行节点的操作。3.能够获取元素、添加节点学习环节1：在前面讲解了BOM对象的使用，BOM对浏览器进行操作，而DOM用来对文档进行操作，因此本节课将会讲解如何利用DOM对象来对文档进行操作。明确学习方向。 了解什么是DOM，DOM的版本和发展历史。掌握HTML节点树的概念，能够说出节点之间的关系。认识常用的DOM对象，能够区分元素与节点。掌握节点的类型。学习环节2：认识DOM、获取元素、内容操作、属性操作、样式操作学习环节3：获取节点、节点追加、节点删除学习环节4：动手实践：购物车的实现网络购物车的实现3+17JavaScript事件事件的绑定方式、事件对象、鼠标事件、键盘事件1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.掌握事件的绑定方式2.熟悉事件对象的使用3.掌握常用事件的实现1.能够进行事件绑定。2.能够获取事件对象3.能够将事件对象应在网页中学习环节1：回顾前面学过的内容，引出本节课主题。学习环节2：事件概述、事件的绑定方式、获取事件对象、常用属性和方法；学习环节3：页面事件、焦点事件、鼠标事件学习环节4：【案例】：鼠标拖拽特效学习环节5：键盘事件、表单事件、动手实践：图片放大特效鼠标经过效果的实现3+18jQuery基础调试工具的使用，jQuery的下载、jQuery的引入方式jQuery对象与DOM对象的转换jQuery基本选择器的使用1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.掌握jQuery的概念及优势2.掌握jQuery的下载和引入3.掌握jQuery对象与DOM对象的转换4.熟悉开发和调试工具的使用5.掌握jquery基本选择器1.能够正确引入jQuery2.能够书写基本的jQuery代码。3.能够正确使用jQuery基本选择器学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：jQuery的概念和版本介绍学习环节3：选择器概念和基本选择器学习环节4：学习环节5：jQuery基础选择器的使用3+19jQuery层级选择器通过向$()方法中传入选择器来获取元素。本章将通过分类的方式系统而全面深入地讲解jQuery选择器。1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.了解jQuery选择器的优势2.掌握jQuery基本选择器的使用3.掌握jQuery层次选择器的使用4.熟悉jQuery过滤选择器的使用1.能够使用jQuery的层级选择器进行页面操作学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：层级选择器和折叠式菜单学习环节3：基本过滤选择器、可见性过滤选择器和内容过滤选择器学习环节4：属性过滤选择器学习环节5：【案例】精品展示购物展示菜单的实现3+110jQuery操作DOMjQuery操作元素样式的方法jQuery操作元素属性的方法1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.掌握jQuery操作元素样式的方法2.掌握jQuery操作元素属性的方法3.掌握jQuery操作元素内容的方法1.能够使用jQuery操作元素样式2.能够使用jQuery操作元素属性学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：jQuery操作元素样式的方法学习环节3：jQuery操作元素属性和内容学习环节4：【案例】留言板理论知识测试3+111jQuery操作DOMjQuery操作元素内容的方法jQuery操作DOM节点的方法jQuery操作元素属性的方法1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养掌握jQuery操作DOM节点的方法了解jQuery链式编程的使用能够使用jQuery操作元素内容能够使用jQuery操作DOM节点学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：jQuery操作DOM学习环节3：【案例】高亮显示图片的实现学习环节4：动手实践：权限选择案例权限选择：全选与单选的实现3+112jQuery事件处理机制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.了解jQuery的事件触发机制2.熟悉jQuery事件绑定和事件解绑的方法3.熟悉jQuery事件对象的属性和方法的使用4.掌握jQuery常用事件的使用方法5.掌握jQuery事件冒泡的概念以及阻止事件冒泡的方式1.能够使用jQuery进行事件绑定与解绑2.能够操作jQuery事件的对象属性3.能够将jQuery事件应用与页面学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：页面加载事件、鼠标事件学习环节3：焦点事件、改变事件、星级评价案例星级评价案例的实现3+113jQuery事件处理机制jQuery常用事件的使用方法jQuery事件冒泡的概念以及阻止事件冒泡的方式1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养1.掌握jQuery绑定事件的方式2.掌握jQuery触发事件的方式1.能够使用jQuery进行事件绑定与解绑2.能够操作jQuery事件的对象属性3.能够将jQuery事件应用与页面学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：动态添加和删除表格学习环节3：用户单击“添加数据”按钮，弹出表单让用户输入“课程名称”、“所属学院”；学习环节4：用户在填入相关信息之后通过单击“添加”按钮让表格添加一行新数据学习环节5：用户单击每一行末的“删除”元素，将这一行数据删除。动态添加和删除表格的实现3+114jQuery动画元素的显示和隐藏、元素的淡入和淡出元素上滑和下滑、星空闪烁案例自定义动画、停止元素动画的方法判断元素是否是动画状态、无缝轮播效果的实现1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.培养学生严谨求实的学习态度4.培养学生规范化的职业习惯5.培养学生相关协助的团队意识6.具有良好的网络素养1.熟悉jQuery中常用动画的使用2.掌握jQuery中如何自定义动画3.掌握jQuery中停止动画的作用及使用1.能够使用jQuery动画进行页面操作2.能够使用jQuery中的animate()创建自定义动画3.能够使用jQuery中的stop()方法停止动画学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：元素的显示和隐藏、元素的淡入和淡出学习环节3：元素上滑和下滑、星空闪烁案例学习环节4：自定义动画、停止元素动画的方法学习环节5：判断元素是否是动画状态、无缝轮播效果的实现图片轮播效果的实现3+115综合信息网站的实现DIV的标记；jQuery滚动图片效果的实现；Bootstrap开源框架JavaScript表单验证1.养成细心、耐心、用心的学习习惯2.养成良好书写代码的习惯3.养成良好的浏览网页、发布网页的习惯4.具体团队合作意识5.具有吃苦耐劳的品质6.具有良好的网络素养掌握.jQuery滚动图片效果的实现；学会Bootstrap开源框架基本结构的使用掌握JavaScript表单验证的方法学会使用DIV的标记；掌握jQuery滚动图片效果的实现方式；了解Bootstrap开源框架学会使用JavaScript表单验证学习环节1：回顾上节课内容，创设情境，导入本章内容学习环节2：综合信息网站框架的实现学习环节3：页面头部、banner及导航具体实现学习环节4：图片浏览及新闻栏实现；学习环节5：房产、教育等信息栏的具体实现页脚及W3C验证；综合信息网的实现6+216综合项目实践自行设计一款主题网站画出页面布局图DIV划分布局模块实现页面布局图1.逐步培养细心、耐心的工作态度。2.培养团队协作和沟通交流的工作能力。3.培养表述、回答等语言表达能力，以及规范书写代码的习惯；4.培养学生具有良好的科学素养和职业道德；1.掌握CSS控制背景、超链接、列表样式2.掌握使用jQuery元素的选取的使用3.掌握jQuery元素控制及CSS样