HTML5 Web基础开发 大纲

《HTML5+CSS3响应式Web开发》课程教学大纲学分：4学分总学时数：64学时先修课程：计算机基础、计算机网络、计算机应用后续课程：Javascript程序设计、VUE框架技术等适用专业：信息技术及其计算机相关专业一、课程性质与任务《HTML5+CSS3响应式Web开发》是面向计算机相关专业的一门专业课程，涉及HTML5基础、CSS3基础、CSS3布局、CSS3中的变形与动画效果、Web存储、响应式开发基础、Bootstrap框架技术等内容，通过课程的学习，学生能够掌握HTML5新功能，利用HTML5新技术制作网页的方法，利用响应式开发技术进行移动开发的方法，能够进行网站建设的项目分析、方案规划、设计开发和应用的能力。二、课程教学目标（一）知识目标1.掌握HTML5新增元素和新增属性。2.掌握CSS3新增选择器和新增属性。3.掌握CSS3中的过渡、变形与动画效果。4.掌握HTML5的web存储、多媒体、画布等新特性。5.掌握使用弹性盒模型布局页面。6.掌握使用Bootstrap进行响应式开发的方法。（二）能力目标1.能用HTML5新增元素和新增属性对网页进行设置。2.能用CSS3新增选择器和新增属性对网页进行美化。3.能实现CSS3中的过渡、变形与动画效果。4.能使用弹性盒模型布局页面。5.能正确运用HTML5的web存储、画布等新特性。6.能按照项目设计规范要求，使用HTML5、CSS3和Bootstrap制作响应式网站。（三）素质目标1.具有勤奋学习的态度，严谨求实、创新的工作作风。2.具有良好的心理素质和职业道德素养。3.具有高度责任心和良好的团队合作沟通能力。4.具有较强的网页设计创意思维、较强的实践能力。5.具有发现问题、分析问题和解决问题的能力。6.具有吃苦耐劳、细致认真、一丝不苟的工作作风。三、课程内容与要求序号教学项目教学内容与教学要求教学活动设计建议（含课程思政设计）参考课时1模块一网站综合设计（项目规划）1.了解项目背景、项目构思、模块划分。2.明确项目开发周期、组织角色及阶段分工。3.掌握项目开发工具的使用。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练，小组自评和互评以及分享，老师点评、总结。课后：学生完成拓展网页设计任务。42模块二实现商城商品分类（HTML5基础）1.了解HTML5的发展史与优势。2.掌握HTML5语法规则。3.掌握HTML中文本与图像标签。4.掌握HTML中表格与表单标签。5.掌握HTML中列表与超链接标签。6.掌握HTML中div与span标签。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（职业素养等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课堂贯穿创新发展带来新技术的思考讨论。课后：学生完成拓展网页设计任务。43模块三实现商城首页页眉页脚（CSS3基础）1.掌握CSS3语法规则及引入方式。2.掌握CSS3基本选择器（标签、类、ID、交集、并集、后代、子代选择器）的用法。3.掌握CSS3新增选择器（兄弟选择器、属性选择器、伪类选择器、伪元素选择器）的用法。4.掌握CSS3字体属性、文本属性。5.掌握CSS3边框属性、背景属性等。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（忠诚爱国、技能强国、科技兴国等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课后：学生完成拓展网页设计任务。84模块四实现商城首页布局（CSS3布局）1.掌握盒子模型的属性。2.掌握浮动与定位。3.理解弹性盒模型语法基础概念。4.掌握使用弹性盒子布局的方法。5.掌握元素的显示与隐藏。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（家国情怀、大国工匠精神等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课后：学生完成拓展网页设计任务。105模块五实现详情页动画效果（CSS3变形与动画）1.理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。2.掌握CSS33中的变形属性，能够制作2D转换、3D转换效果。3.掌握CSS33中的动画，能够熟练制作网页中常见的动画效果。4.掌握Javascript语法、变量、函数及对象等。5.掌握canvas语法的结构。6.掌握使用canvas绘制基本图形的方法。7.掌握使用canvas绘制图像的方法。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（职业素养、大国工匠精神等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课后：学生完成拓展网页设计任务。66模块六实现登录与注册页（Web存储）1.掌握HTML5的新增元素。2.掌握HTML5表单新增相关元素，能够准确定义不同的表单控件。3.掌握localStorage的使用，能够实现数据的设置、获取和删除。4.掌握sessionStorage的使用以及WebStorage事件监听，能够实现数据的设置、获取和删除，并能够监听数据的变化。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（法律意识等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课堂贯穿创新发展带来新技术的思考讨论。课后：学生完成拓展网页设计任务。87模块七实现订单页（响应式页面）1.掌握视口的设置。2.掌握媒体查询。3.掌握响应式布局的方法。4.了解Bootstrap的概念，能够说出Bootstrap的内容和特点。5.掌握Bootstrap的下载和使用，能够动手完成Bootstrap预编译文件的下载、引入和初始模板的创建。6.掌握Bootstrap布局容器，能够灵活运用.container类和.container-fluid类完成对不同容器宽度的设置。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练（忠诚爱国、技能强国、科技兴国等思政融入项目任务），小组自评和互评以及分享，老师点评、总结。课后：学生完成拓展网页设计任务。187.掌握Bootstrap栅格系统，能够利用栅格系统实现导航栏效果。8.熟悉Bootstrap响应式工具，能够利用响应式工具类实现元素在不同屏幕设备上的显示和隐藏。9.掌握导航组件的使用，能够创建多种导航页面。10.掌握导航栏组件的使用，能够设置导航栏的品牌标志，能够实现可折叠的导航栏。11.掌握表单组件的使用，能够在页面中创建表单控件，并且能够对表单进行布局和验证。12.掌握按钮组件的使用，能够创建基础按钮、按钮组和按钮工具条。13.熟悉辅助样式，能够设置元素的背景颜色、边框样式和元素间距。8模块八实现商城移动端（手机端APP开发）1.掌握HBuilder开发移动APP的流程。2.熟悉主流APP开发模式。3.了解HTML5Plus规范。4.掌握常用模块规范。5.掌握HTML5+App的常用规范。6.掌握MUI前端框架的应用。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练，小组自评和互评以及分享，老师点评、总结。课堂贯穿创新发展带来新技术的思考讨论。课后：学生完成拓展网页设计任务。49模块九实现商城上线（测试发布）1.了解商城项目的测试流程。2.了解商城项目发布流程。课前：教师通过教学平台发布教学资源，学生自主学习。课中：教师对教学平台中问题比较多的课前任务进行演示讲解。学生分小组完成当堂任务训练，小组自评和互评以及分享，老师点评、总结。课堂贯穿创新发展带来新技术的思考讨论。课后：学生完成拓展网页设计任务。2合计64四、课程实施建议1．师资条件担任本课程的主讲教师需要具有扎实的Web前端开发理论知识和熟练的Web前端开发技能，能够独立完成教学项目并且能够解决实训过程中出现的常见问题。2．教学场所和实训条件（1）教学做一体化教室教学环境需要有投影仪或者广播教学的实训机房，能够