教学大纲

学时:72 理论:36  实践:36  学分:4  适用专业:计算机相关专业  制定人:秋彦芳
 
一、课程的性质与目标
《HTML5》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容,通过本课程的学习,学生能够了解网页web发展历史及其未来方向,熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果,学会制作各种企业、门户、电商类网站。
 
二、课程的教学目的
通过本课程的学习,学生能够掌握基本的HTML5+CSS3网页布局,最终可以独立开发出高颜值、多特效的前PC网页。
 
三、教学内容,教学要求及教学重点和难点
第一章  初识HTML5
(理论教学:3学时 实践:3学时)
1、讲授内容
html5概述、html5基础、文本控制标记、图像标记、超链接标记。
2、教学要求和重点内容
(1) 了解HTML5发展历程。
(2) 理解HTML5浏览器支持情况。
(3) 熟悉HTML5基本语法,掌握HTML5语法新特性。(重点)
(4) 掌握HTML5相关标记及属性,能够制作简单的网页页面。(重点)
3、难点及处理方法:上机操作完成任务,锚点链接有用法。
第二章 html5页面元素及属性
(理论教学:3学时 实践:3学时)
1、讲授内容
列表元素、结构元素、分组元素、页面交互元素、文本层次语义元素、全局属性。
2、教学要求和重点内容
(1) 掌握结构元素的使用,可以使页面分区更明确。(重点)
(2) 理解分组元素的使用,能够建立简单的标题组。(重点)
(3) 掌握页面交互元素的使用,能够实现简单的交互效果。
(4) 理解文本层次语义元素,能够在页面中突出所标记的文本内容。 
(5) 掌握全局属性的应用,能够使页面元素实现相应的操作。
3、难点及处理方法:上机操作完成任务,列表的嵌套应用,注意区别无序序列还是有序序列,特别注意在书写过程中,要能体现各层级的嵌套关系。
第三章 CSS入门
(理论教学:2学时 实践:2学时)
1、讲授内容
CSS简介、CSS核心基础、文本样式属性、CSS高级特性。
2、教学要求和重点内容
(1) 了解CSS3的发展历史以及主流浏览器的支持情况。
(2) 掌握CSS基础选择器,能够运用CSS选择器定义标记样式。
(3) 熟悉CSS文本样式属性,能够运用相应的属性定义文本样式。(重点)
(4) 理解CSS优先级,能够区分复合选择器权重的大小。(重点)
3、难点及处理方法:上机操作完成任务,CSS优先级,通过大量的练习,能熟练掌握。
第四章 CSS选择器
(理论教学:4学时 实践:4学时)
1、讲授内容
属性选择器、关系选择器、结构化伪类选择器、伪元素选择器、链接伪类。
2、教学要求和重点内容
(1)掌握CSS3中新增加的属性选择器,能够运用属性选择器为页面中的元素添加样式。
(2)理解关系选择器的用法,能够准确判断元素与元素间的关系。
(3)掌握常用的结构化伪类选择器,能够为相同名称的元素定义不同样式。(重点)
(4)掌握伪元素选择器的使用,能够在页面中插入所需要的文字或图片内容。(重点)
(5) 掌握CSS伪类,会使用CSS伪类实现超链接特效。
3、难点及处理方法:上机操作完成任务,:nth-child(n)和:nth-last-child(n)选择器、:before选择器、:after选择器选择器,结合相应素材,对同一素材添加不同的选择器,对结果进行比较,总结各类选择器的用法。
第五章 盒子模型
(理论教学:4学时 实践:4学时)
1、讲授内容
盒子模型概述、盒子模型相关属性、背景属性、css渐变属性。
2、教学要求和重点内容
(1) 掌握盒子的相关属性,能够制作常见的盒子模型效果知识。(重点)
(2) 掌握背景属性的设置方法,能够设置背景颜色和图像。(重点)
(3) 理解渐变属性的原理,能够设置渐变背景。(重点)
(4) 熟悉CSS控制列表样式的方式,能够运用背景图像定义列表项目符号。
3、难点及处理方法:上机操作完成任务,对盒子模型添加box-shadow属性,如何改变阴影的投射方向以及添加多重阴影效果。
第六章 浮动与定位
(理论教学:4学时 实践:4学时)
1、讲授内容
元素的浮动、overflow属性、元素的定位、元素的类型与转换。
2、教学要求和重点内容
(1) 理解元素的浮动,能够为元素设置浮动样式类型。(重点)
(2) 熟悉清除浮动的方法,可以使用不同方法清除浮动。
(3) 掌握元素的定位,能够为元素设置常见的定位模式。(重点)
3、难点及处理方法:
上机操作完成任务,使用浮动和定位对页面重新排版。
第七章 表单的应用
(理论教学:4学时 实践:4学时)
1、讲授内容
认识表单、表单属性、input元素及属性、其他表单属性、CSS控制表单样式。
2、教学要求和重点内容
(1) 了解表单功能,能够快速创建表单。
(2) 掌握表单相关元素,能够准确定义不同的表单控件。(重点)
(3) 掌握表单样式的控制,能够美化表单界面。(重点)
3、难点及处理方法:
上机操作完成任务,创建表单,输入Input元素的type属性、并设置CSS控制表单样式。
第八章 多媒体技术
(理论教学:2学时 实践:2学时)
1、讲授内容
html5多媒体特性、多媒体的支持条件、嵌入视频和音频、css控制视频的宽高、视频和音频的方法和事件、html5音、视频发展趋势。
2、教学要求和重点内容
(1) 熟悉HTML5多媒体特性。
(2) 了解HTML5支持的音频和视频格式。
(3) 掌握HTML5中视频的相关属性,能够在HTML5页面中添加视频文件。(重点)
(4) 掌握HTML5中音频的相关属性,能够在HTML5页面中添加音频文件。(重点)
(5) 了解HTML5中视频、音频的一些常见操作,并能够应用到网页制作中。
3、难点及处理方法:
上机操作完成任务,注意通过video元素添加宽高的方式给视频预留一定的空间。
第九章 CSS3高级应用
(理论教学:5学时 实践:5学时)
1、讲授内容
过渡、变形、动画。
2、教学要求和重点内容
(1) 理解过渡属性,能够控制过渡时间、动画快慢等常见过渡效果。
(2) 掌握CSS3中的变形属性,能够制作2D转换、3D转换效果。(重点)
(3) 掌握CSS3中的动画,能够熟练制作网页中常见的动画效果。(重点)
3、难点及处理方法:
上机操作完成任务,在网页中对元素进行移动、缩放、倾斜、旋转,结合这些变形属性,产生更复杂的动画。
第十章制作电商网站首页
(理论教学:3学时 实践:3学时)
1、讲授内容
准备工作、首页面详细制作。
2、教学要求和重点内容
(1) 掌握站点的建立,能够建立规范的创建。
(2) 完成首页面的制作,并能够实现简单的CSS3动画效果。(重点)
3、难点及处理方法:
上机操作完成任务,对页面实现网页布局的美化,用css为网页添加动态效果。
四、课时分配
序号 教学内容 总学时 理   论 实   践
1 第一章 初识HTML5 6 3 3
2 第二章 HTML5 页面元素及属性 6 3 3
3 第三章 CSS3入门 8 4 4
4 第四章 CSS3选择器 8 4 4
5 第五章 CSS盒子模型 8 4 4
6 第六章 浮动与定位 8 4 4
7 第七章 表单的应用 8 4 4
8 第八章 多媒体技术 4 2 2
9 第九章 CSS3高级应用 10 5 5
10 第十章 实战开发—制作电商网站首页面 6 3 3
 
五、教材的选用
《HTML5+CSS3网站设计基础教程》 作者:传智播客高教产品研发部   人民邮电出版社  出版时间:2016.03
参考教材
《html5+css3》 作者:黑马程序员 人民邮电出版社 出版时间:2020.04  
《html+css3+javaScript》web前端开发案例教程,作者王浩,人民邮电出版社,出版时间:2020.07