网页设计与开发（HTML5+CSS3）- 教学大纲、授课计划

网页设计与开发教学大纲(本课程采用授课+任务驱动教学模式)课程性质和任务本课程是移动互联网应用技术(五年高技)专业必修的一门专业课，作为用于培养学生专业基本能力和基本素养的重要组成部分。本课程涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。本课程基于工作过程开发内容，以行动为导向进行教学内容设计，以学生为主体，以案例实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。二、课程教学目标以培养高素质、高技能应用型人才为目标，通过以情境化、项目制为特色的实践教学，将本课程专业知识系统地融于实践全过程。从而培养学生独立与协作工作的能力，提升学生自主学习的兴趣，锻炼学生通过自主学习掌握工作思路与方法的能力，切实提高学生的职业技能和处理实际问题的综合素质。1．专业能力目标培养学生熟练使用HTML5相关标记及属性，制作简单的网页页面的能力。培养学生熟练掌握全局属性的应用，能够使页面元素实现相应的操作。培养学生熟练使用CSS选择器定义标记样式的能力。培养学生熟练使用运用属性选择器为页面中的元素添加样式的能力。培养学生熟练使用CSS控制列表样式的能力。培养学生熟练使用为元素设置常见的定位模式的能力。培养学生熟练掌握创建表单的能力。培养学生熟练利用CSS3制作网页特效的能力。2．社会能力目标培养学生的沟通能力及团队协作能力。培养学生分析问题、解决问题的能力。培养学生勇于创新、敬业乐观的工作作风。培养学生的质量意识、安全意识、环保意识。培养学生爱岗敬业的态度与社会责任心。3．方法能力目标培养学生收集与整理资料的能力。培养学生制定、实施工作计划的能力。培养学生利用各种信息媒体，获取新知识、新技术的能力。培养学生时间管理与规划工作的能力。培养学生分析问题、解决问题的能力。三、课程内容和要求项目1利用HTML5制作图文混排页面学时12学习要求了解HTML5发展历程理解HTML5浏览器支持情况熟悉HTML5基本语法,掌握HTML5语法新特性掌握HTML5相关标记及属性，能够制作简单的网页页面学习内容教学方法和建议创建第一个HTML5页面HTML5文档基本格式创建图文混排的网页·理论讲授·模拟演练项目2利用HTML5搭建网页结构学时12学习要求掌握结构元素的使用，可以使页面分区更明确理解分组元素的使用，能够建立简单的标题组掌握页面交互元素的使用，能够实现简单的交互效果理解文本层次语义元素，能够在页面中突出所标记的文本内容掌握全局属性的应用，能够使页面元素实现相应的操作学习内容教学方法和建议结构元素的使用页面交互元素的使用文本层次语义元素的使用搭建网页结构框架理论讲授模拟演练案例驱动启发式项目3利用CSS3美化网页文本学时14学习要求掌握CSS基础选择器，能够运用CSS选择器定义标记样式熟悉CSS文本样式属性，能够运用相应的属性定义文本样式理解CSS优先级，能够区分复合选择器权重的大小学习内容教学方法和建议CSS基础选择器与样式表CSS文本样式属性CSS3优先级

·理论讲授·模拟演练项目4利用CSS3新增的选择器制作网页学时10学习目标掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式理解关系选择器的用法，能够准确判断元素与元素间的关系掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容掌握CSS伪类，会使用CSS伪类实现超链接特效学习内容教学方法和建议属性选择器的应用关系选择器的用法伪元素选择器的使用CSS伪类选择器的应用案例驱动启发式讲授法示范法项目5利用盒子模型布局网页学时12学习目标掌握盒子的相关属性，能够制作常见的盒子模型效果掌握背景属性的设置方法，能够设置背景颜色和图像理解渐变属性的原理，能够设置渐变背景理解元素的浮动，能够为元素设置浮动样式熟悉清除浮动的方法，可以使用不同方法清除浮动掌握元素的定位，能够为元素设置常见的定位模式学习内容教学方法和建议盒子的相关属性背景属性的设置方法渐变属性的应用设置浮动样式清除浮动的方法元素的定位·理论讲授·模拟演练项目6利用CSS3美化列表样式学时10学习目标熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号掌握利用列表与CSS3结合制作网页导航熟练利用列表与CSS3制作列表栏目学习内容教学方法和建议设置列表项目符号列表制作导航利用列表制作新闻栏目·理论讲授·模拟演练项目7利用CSS3美化表格和表单样式学时12学习目标了解表单功能，能够快速创建表单掌握表格与表单相关元素，能够准确定义不同的表单控件掌握表单样式的控制，能够美化表单界面学习内容教学方法和建议表单功能表格与表单相关元素表单样式的控制·理论讲授·模拟演练项目8利用CSS3制作网页特效学时12学习目标理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。学习内容教学方法和建议transition-property属性transition-duration属性transition-timing-function属性transition-delay属性transition属性认识transform2D转换3D转换@keyframesanimation-name属性animation-duration属性animation-timing-function属性animation-delay属性animation-iteration-count属性animation-direction属性animation属性·理论讲授·模拟演练项目9实战开发——制作信息技术网站首页学时12学习目标掌握站点的建立，能够建立规范的站点。利用HTML5与CSS3综合完成首页面的制作。学习内容教学方法和建议建立站点站点初始化设置效果图分析页面布局定义公共样式制作头部、导航及视频内容制作内容部分（新品）制作内容部分（试装）制作内容部分（评测）制作脚部（信息注册）及版权信息部分·理论讲授·模拟演练四、学时分配与建议序号内容讲课实训总课时1利用HTML5制作图文混排页面48122利用HTML5搭建网页结构48123利用CSS3美化网页文本68144利用CSS3新增的选择器制作网页46105利用盒子模型布局网页48126利用CSS3美化列表样式48127利用CSS3美化表格和表单样式48128利用CSS3制作网页特效48129实战开发——制作信息技术网站首页391210综合复习与实训24611理论与实操考试66合计3981120说明1．学习材料选用与编写（1）本课程采用电子工业出版社教材《网页设计与开发（HTML5+CSS3）》，该教材采用项目+案例模式编写,体现了先进性和实践性，将理论与实践有机结合，突出实践能力的培养。（2）无论是选用教材还是编写新教材，应力争突出应用性，避免把职业能力简单理解为单纯的技能操作，同时要具有前瞻性。能将本专业领域的发展趋势及实际业务操作中的新知识、新技术和新方法及时纳入其中。内容做到简明扼要，突出重点，图文并茂，并具有可操作性。2．教学组织与设计（1）以完成模拟项目小组的工作任务为教学内容。重点是教会学生如何完成工作任务，知识、技能学习结合任务完成过程来进行。（2）围绕工作任务学习的需要，以典型产品为载体设计“工作项目”，组织教学。本课程基于任务驱动进行教学内容设计，学生按项目任务进行训练。（3）本课程教学重点是：循环语句和分支语句、组合数据类型的使用。本课程教学难点是：组合数据类型的使用，函数的定义和使用。3.补充说明：同个课程不同年级可能存在每个项目分配课时不一样的问题，主要是根据当前学期总课时进行适当调配，课时多时每个项目会在原来基础上增加一些课外补充实训，课时少时会在原有基础上适当减少一些补充实训内容，尽量完成本项目基本任务。XXX班XX学年度第X学期授课计划序号周次课时数教学内容教学方式课外作业备注116项目一：利用HTML5制作图文混排页面任务1第一个网页的创建任务2页面格式化标签的应用任务3HTML5标签属性的应用任务4文本样式标签的应用任务5文本格式化标签的应用任务6文本语义标签的应用任务7图像标签的应用理实一体复习项目一所学标签意义226项目一：利用HTML5制作图文混排页面任务8超链接标签的应用任务9音频和视频标签的应用项目实战制作杭州亚运会精彩赏析课后拓展任务与项目总结理实一体项目一课后习题336项目二：利用HTML5搭建网页结构任务1ul元素的应用任务2ol元素的应用任务3dl元素的应用任务4列表的嵌套应用任务5header元素的应用任务6nav元素的应用任务7article、section、aside、footer元素的应用理实一体复习项目二所学标签意义446项目二：利用HTML5搭建网页结构任务8figure和figcaption元素的应用任务9hgroup元素的应用任务10details和summary元素的应用项目实战制作“青少年心理健康教育”页面课后拓展任务与项目总结理实一体项目二课后习题XXX班XX学年度第X学期授课计划序号周次课时数教学内容教学方式课外作业备注556项目三：利用CSS3美化网页文本任务1行内式的应用任务2内嵌式的应用任务3链入式的应用任务4导入式的应用任务5标签选择器和类选择器的应用任务6ID选择器的应用任务7通配符选择器的应用任务8标签指定式选择器的应用任务9后代选择器的应用理实一体CSS3基础知识记忆666项目三：利用CSS3美化网页文本任务10并集选择器的应用任务11字体样式属性的应用任务12@font-face的应用任务13文本外观属性的应用任务14文本装饰与文本阴影属性的应用任务15文本溢出属性的应用任务16CSS3层叠性和继承性的应用任务17CSS3优先级的应用项目实战制作“反诈小课堂”页面理实一体项目三课后习题776项目三：利用CSS3美化网页文本课后拓展任务与项目总结项目四：利用CSS3新增的选择器制作网页任务1属性选择器的应用任务2子代选择器的应用任务3兄弟选择器的应用任务4:root选择器的应用任务5:not选择器的应用任务6:only-child选择器的应用理实一体CSS3新增选择器知识点记忆XXX班XX学年度第X学期授课计划序号周次课时数教学内容教学方式课外作业备注886项目四：利用CSS3新增的选择器制作网页和:last-child选择器的应用f-type(n)和:nth-last-of-type(n)选择器的应用任务10:before选择器的应用任务11:after选择器的应用任务12链接伪类选择器的应用项目实战制作“安全教育”页面课后拓展任务与项目总结理实一体项目四课后习题996项目五利用盒子模型布局网页 任务1盒子模型基本属性的应用 任务2border属性的应用任务3border-radius属性的应用 任务4padding和margin属性的应用任务5box-sizing属性的应用任务6box-shadow属性的应用任务7float属性的应用任务8盒子模型清除浮动的应用任务9position属性的应用理实一体盒子模型相关属性意义记忆与背诵10106项目五利用盒子模型布局网页任务10背景属性的应用 任务11opacity属性的应用 任务12渐变属性的应用 任务13重复渐变属性的应用 任务14使用盒子模型布局网页项目实战制作“消防安全知识教育”页面 课后拓展任务与项目总结理实一体项目五课后习题XXX班XX学年度第X学期授课计划序号周次课时数教学内容教学方式课外作业备注11116期中考试项目六利用CSS3美化列表样式任务1设置列表项目符号任务2制作横向导航 任务3制作立体导航 理实一体补充任务12126任务4制作下拉式菜单导航 任务5制作下拉式面板导航项目6利用CSS3美化列表样式任务6制作旅游攻略栏目 任务7设计图片列表版式 项目实战制作“青年教育宣传”页面拓展任务与项目总结理实一体项目六课后习题13136项目七利用CSS3美化表格和表单样式任务1设置表格的背景颜色 任务2设置表格的边框样式任务3设置单元格的边框样式 任务4设置表头的样式任务5制作网页通讯录任务6制作用户登录表单任务7制作并美化用户注册表单理实一体表格和表单相关标记和属性记忆背诵14146项目7利用CSS3美化表格和表单样式任务8制作并美化用户信息注册表单项目实战制作“景点排行榜”页面课后拓展任务与项目总结理实一体项目七课后习题XXX班XX学年度第X学期授课计划序号周次课时数教学内容教学方式课外作业备注15156项目八利用CSS3制作网页特效任务1定义平移效果