2019级计算机应用技术专业
《HTML5+CSS3》实训大纲
课程名称：HTML5+CSS5
课程编码：
适用专业：计算机应用技术
学时：80（16+64）学分：5
编写者：刘衍会编写时间：2020年8月
审核者：王亮审核时间：2020年8月
本实训大纲根据计算机应用技术专业《HTML5+CSS3》课程标准以及课程培养目
标和我院本专业学生的实际情况而制定，旨在培养合格的实用型人才为目的。
一、实训目的
通过实训，使计算机应用技术专业的学生在所学理论知识的基础上，加强实践
操作能力的培养，将理论上升至实践，对知识进行综合的应用，在实践中培养学生
运用所学知识分析问题和解决实际问题的能力。
（1）掌握一般网站设计的基本思路和流程。
（2）培养学生独立创作网页、建设网站的能力。
（3）要求学生独立完成网页的制作,能在网页中应用美观的图形图像、动画等，
从而制作出具有一定思想和创意的网页。
（4）树立严谨的科学作风，培养学生综合运用理论知识解决实际问题的能力。
二、实训内容
将《HTML5+CSS3》课程分模块进行针对性的强化训练，具体如下：
模块一：初识HTML5
阶段案例一——制作HTML5百科页面
模块二：HTML5+CSS3页面元素及属性
阶段案例二——制作电影影评网
模块三：CSS3入门
阶段案例三——制作服装推广软文
模块四：CSS3选择器
阶段案例四——制作网页设计软件列表
模块五：CSS3盒子模型
阶段案例五——制作音乐排行榜
模块六：浮动与定位
阶段案例六——制作网页焦点图
模块七：表单应用
阶段案例七——制作HTML5百科页面信息登记表
模块八：多媒体技术
阶段案例八——制作音乐播放界面
模块九：CSS3高级应用
阶段案例九——制作工作日天气预报
模块十：实战开发
阶段案例一——制作电商网站首页
三、实训的地点、时间与方式
1、实训地点：机房（B2-203）
2、实训时间：2020年9月至2020年1月
3、实训方式：教师讲授＋操作演示+指导答疑+实训报告
四、实训项目
（一）阶段案例一：制作一个HTML5百科页面
1、实训目的
（1）理解HTML5基本语法，掌握HTML5语法新特性
（2）掌握文本控制标签、图像标签、超链接标签、能够制作简单的页面
2、效果如下：
当在上图所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，
效果如下图所示。
点击上图所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳
转至“HTML5百科—page02.html”页面，效果如下图所示。
点击上图所示页面中的“返回”按钮时，返回至首页面；点击“上一页”按钮时，
跳转至“HTML5百科—page01.html”页面。
（二）阶段案列二：制作一个“电影影评网”
1、实训目的
（1）掌握结构元素的使用，可以使页面分区更明确
（2）掌握页面交互元素的使用，能够实现简单的交互效果
（3）掌握全局属性的使用，能够使页面元素实现相应的操作
2、效果如下：
当点击“动作电影”时，会显示动作电影的下拉菜单，如下图所示；再次点击，将
下拉菜单收缩。
同样，点击“科幻电影”时，会显示科幻电影的下拉菜单，如下图所示；再次点
击，将下拉菜单收缩。
（三）阶段案例三：制作服装推广软文
1、实训目的
（1）掌握CSS基础选择器，能够运用CSS选择器选择页面元素
（2）熟悉CSS文本样式属性，能够运用相应的属性定义文本样式
（3）理解CSS优先级、能够区分复合选择器的权重大小
2、效果如下
（四）阶段案列四：制作一个“网页设