《网页设计与制作(HTML5)》课程标准

一、课程说明
《网页设计与制作（HTML5）》课程标准
课程名称网页设计与制作（HTML5）标准简称Web 前端
适用专业计算机应用
技术
修读学期第三学期制订时间2018-08
课程代码课程学时72 课程学分 2
课程类型 B 类课程性质必修课课程类别专业核心课先修课程计算机文化基础、Photoshop
后续课程
对应职业资格证或内容Web 前端工程师
合作开发企业无
执笔人合作者无审核人
制（修）定
日期
2018-08
注：1.课程类型（单一选项）：A类（纯理论课）/B类（理论＋实践）/C类（纯实践课）
2.课程性质（单一选项）：必修课/专业选修课/公共选修课
3.课程类别（单一选项）：公共基础课/专业基础课/专业核心课
4.合作者：须是行业企业人员，如果没有，则填无
二、课程定位
《网页设计与制作（HTML5）》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、JavaScript语言、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

三、设计思路
课程设计理念：明确必要的理论知识的生化与知识层面的拓展，不局限于单纯的技能训练。

单纯的技能训练不是提高高等职业教育的理想课程。

以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。

教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。

160
四、课程培养目标
1.专业能力
（1）通过《网页设计与制作（HTML5）》课程的学习，掌握Sublime 编程工具的使用和网页设计的思路。

（2）掌握HTML5与CSS3基础知识及最新技术，提升网页制作应用能力。

2.方法能力
（1）能够运用HTML技术布局网页。

（2）能够运用CSS 技术美化网页。

（3）能够运用HTML及CSS等技术修改已有页面。

3.社会能力
（1）培养学生具有较强的专业学习、执行和创新能力。

（2）自觉的规范意识、团队协作意识和协作能力。

（3）能运用各种交流手段进行良好地表达和交流。

（4）提高使用英语进行阅读和交流的能力。

（5）培养学生具有分析问题、解决问题的能力。

五、课程内容、要求及教学设计
（1）标准教学周为18 周，课时为72 节，每周2 次课4 课时。

其中1 周用于实训，1周用于复习。

其中理论课时安排为24课时，实践课时（含习题课）为48课时
（2）实践项目包括：个人作品网页制作、广告网页制作、企业网页制作、产品介绍网页制作、新闻网页制作等。

161
（一）课程整体设计
序号学习情境知识目标专业能力方法能力社会能力学时
1.了解Web前端工程师行业前景
1初识 HTML 2.了解网站建设流程
3.了解 HTML 相关概念，HTML 发展历史
及 WEB 标准
4.认识网页构成的基本要素
1.掌握相关专业术语
2.掌握站点的创建
3.使用记事本创建简单的
HTML5 页面
能够在所学知识基础
上，结合以往学习和
生活经历，认识网页
的广泛应用
通过精美网页的欣
赏，提升学生审美能
力
2
5.了解HTML基本结构和语法
1.认识文本标签 1.掌握文本标签使用
2.认识多媒体标签 2.掌握多媒体标签使用
2HTML 常用标签3.认识区块标签
4.认识表格标签
3.掌握区块标签使用
4.掌握表格标签使用10
5.认识表单标签 5.掌握表单标签使用
6.认识超链接标签 6.掌握超链接标签使用
7.认识列表标签7.掌握列表标签使用
能够根据 HTML 常用
标签的编写方法，完
成学院简介、相亲网
页等案例
学习养成积极思考
问题、自主学习和解
决问题的习惯和能
力
3CSS 样式入门1.了解 CSS3 基础知识及语法
2.了解 CSS 样式的创建方法
3.认识 CSS 选择器
4.理解选择器权重问题
1.掌握 CSS 样式的创建
2.熟练运用多种 CSS 选择
器
3.利用 CSS 基础知识完成
页面简易美化
能够利用多种 CSS 样
式，完成设计、品牌
网页等案例
培养学生对待工作
和学习一丝不苟、精
益求精的精神
4 1.认识 CSS 浮动属性
4CSS 核心属性2.认识 CSS 文本属性
3.认识超链接属性
4.认识 CSS 背景属性
5.认识 CSS 边框属性
能够编写多种 CSS 核
心属性，完成个人作
品、广告网页等案例
培养学生发现问题、
分析问题和解决问
题的能力
12 6.认识 CSS 列表属性
1.熟练应用 CSS 控制文本
的外观和背景的样式
2.熟练运用 CSS 实现图文
混排效果
3.掌握列表样式控制
序号学习情境知识目标专业能力方法能力社会能力学时
5盒模型1.了解盒模型的组成部分
2.了解盒模型的相关元素
3.了解文本溢出相关的属性
4.了解定位属性
1.掌握使用盒模型进行页
面布局的方法
2.利用边框属性制作三角
形
3.掌握div定位方法
能够利用盒模型编写
网页，完成产品展示、
企业介绍网页等案例
培养学生理论联系
实际的能力
12
6元素类型1.了解元素类型分类依据和元素类型
分类
2.理解元素类型的转换
3.了解inline-block元素类型的应用
1.掌握元素类型特征
2.掌握元素类型之间的转
换
能够利用元素类型转
换安排网页效果，完
成企业、活动公告网
页等案例
培养学生勇于创新、
吃苦耐劳的精神
10
7CSS3 与 HTML5
高级应用1.认识 H5 新标签
2.了解CSS3渐变、动画、选项卡
1.掌握 H5 新标签的运用
2.掌握 CSS Sprite 技术、
CSS3 渐变、动画
能够运用 CSS3 及
HTML5 新内容，完成
极速赛车、飞越天空
网页等案例
培养学生团队协作
能力，诚实守信的优
秀品质
6
8多设备响应式
页面的实现1.了解响应式 Web 设计
2.了解响应式页面实现方式
1.掌握响应式 Web 设计
2.掌握 media query 相关
知识
能够制作在 PC 端、
Pad 端和手机端 3 类
设备中都能自适应的
响应式页面
培养学生责任心和
良好的团队合作精
神
6
9Web App 类页
面的设计与实
现
1.了解 Web App 开发基础知识
2.认识 Bootstrap 框架和 Swiper 插件
3.了解页面实现过程
1.掌握移动端页面设计规
范
2.掌握等比缩放布局/rem
布局
能够制作移动端网
站，完成商城网页
培养学生科学的思
维方式和判断分析
问题的能力
6
10 综合复习 1.综合复习本学期学习内容
2.重点内容及难点内容解答掌握HTML5+CSS3 布局技
术方法和技巧
能够综合运用所学知
识完成网页制作
培养学生举一反三、
归纳总结的能力
4
合计讲授 24 学时、实践 44 学时、复习与习题课 4 学时，共 72 学时
（二）课程学习单元内容与要求
学习单元情境设计
单元名称初识 HTML学时2
学习要求1.掌握相关专业术语
2.掌握站点的创建
3.使用记事本创建简单的HTML5页面
任务 1Web前端工程师行业前景
任务 2网站建设流程
任务 3HTML 相关概念，HTML 发展历史及 WEB 标准任务 4网页构成的基本要素
任务分解
任务 5HTML基本结构和语法
学习单元情境设计
单元名称HTML 常用标签学时10
学习要求1.掌握文本标签使用
2.掌握多媒体标签使用
3.掌握区块标签使用
4.掌握表格标签使用
5.掌握表单标签使用
6.掌握超链接标签使用
7.掌握列表标签使用
任务分解任务 1文本标签
任务 2多媒体标签
任务 3区块标签
任务 4表格标签
任务 5表单标签
任务 6超链接标签
任务 7列表标签
学习单元情境设计
单元名称CSS 样式入门学时4
学习要求1.掌握 CSS 样式的创建
2.熟练运用多种 CSS 选择器
3.利用CSS基础知识完成页面简易美化
任务 1CSS3基础知识及语法
任务 2CSS样式的创建方法
任务 3CSS 选择器
任务分解
任务 4选择器权重
学习单元情境设计
单元名称CSS 核心属性学时12
学习要求1.熟练应用CSS控制文本的外观和背景的样式
2.熟练运用CSS实现图文混排效果
3.掌握列表样式控制
任务 1CSS 浮动属性
任务 2CSS 文本属性
任务 3超链接属性
任务 4CSS 背景属性
任务 5CSS 边框属性
任务分解
任务 6CSS 列表属性
学习单元情境设计
单元名称盒模型学时12
学习要求1.掌握使用盒模型进行页面布局的方法
2.利用边框属性制作三角形
3.掌握 div 定位方法
任务 1盒模型的组成
任务 2盒模型相关元素
任务 3文本溢出相关属性
任务分解
任务 4定位属性
学习单元情境设计
单元名称元素类型学时10 学习要求 1.掌握元素类型特征
2.掌握元素类型之间的转换
任务分解任务 1元素类型分类依据和元素类型分类
任务 2元素类型的转换
任务 3inline-block元素类型的应用
学习单元情境设计
单元名称CSS3 与 HTML5 高级应用学时6
学习要求 1.掌握 H5 新标签的运用
2.掌握 CSS Sprite 技术、CSS3 渐变、动画
任务 1H5 新标签
任务分解
任务 2CSS3渐变、动画、选项卡
学习单元情境设计
单元名称多设备响应式页面的实现学时6
学习要求 1.掌握响应式 Web 设计
2.掌握 media query 相关知识
任务 1响应式 Web 设计
任务分解
任务 2响应式页面实现方式
学习单元情境设计
单元名称Web App 类页面的设计与实现学时6
学习要求 1.掌握移动端页面设计规范
2.掌握等比缩放布局/rem布局
任务 1Web App 开发基础知识
任务分解
任务 2Bootstrap 框架和 Swiper 插件
任务 3页面实现过程
学习单元情境设计
单元名称综合复习学时4学习要求掌握HTML5+CSS3布局技术方法和技巧
任务 1综合复习
任务分解
任务 2重点内容及难点内容解答
六、课程考核与评价
本课程考核分为平时成绩、实践成绩和期末成绩三个部分，分别占总评成绩的30%、40%、30%。

列表如下：
平时成绩
总评成绩
实践成绩期末成绩
出勤平时作业
100% 10% 20% 40% 30%
小计30% 40% 30%
（1）平时成绩包括：出勤、平时作业、实践操作
出勤占总成绩10%。

迟到、早退一次扣1分，缺勤一次扣5分。

正常请假不扣分。

平时作业占总成绩20%，共计5次，还有一次小测。

五次作业每次15分计算，小测按25 分计算。

作业成绩等级分A、B、C、D四类。

独立完成、书写工整，结论正确为A；独立完成、书写工整，结论有少量错误为B；书写笔记难以辨认，结论有较多错误为C；作业不完整为D。

（2）实践操作占总成绩40%。

共计一周实训。

独立完成为A，在他人指导下完成为B。

（3）期末成绩为上机考试成绩。

考试方式为闭卷考试。

试卷中含超纲题目分值不低于
5 分，不高于10 分。

七、教材及相关资源
1.工业和信息化“十三五”高职高专人才培养规划教材，《HTML5+CSS3 Web 前端设计基础教程》，编著者：吴丰，人民邮电出版社。

2.长期有效的网络资料平台，储备大量的优秀作品以备参考。

3.信息化教学资源库，储备多媒体课件、多媒体素材、电子图书、专业软件。

4.符合教学大纲和课程要求的试题库、实训指导书，增加图书馆内学习参考书、专业期
刊等馆藏。

八、任课教师要求
教学团队的素质培养以职业道德素质、专业理论知识、专业实践技能、教育教学能力、课程和教材设计能力、科研创新能力为基本内容。

教学质量取得成功的关键是拥有一支教学与实践经验丰富、治学严谨、锐意进取、勇于创新，爱岗敬业、团结协作、结构合理的教学团队。

根据专业人才培养需要，本课程教师应具备以下3方面的基本能力：
1、具有良好的思想政治素质和教师职业道德；
2、掌握网页设计的知识与方法，了解网页设计的发展状况、并且有一定的程序语言功底与审美能力等；
3、掌握职业教育教学方法，具有课程设计和教学实施的能力。

相关核心课程的实践教学中均应聘请具有丰富项目经验的行业人员参与课程建设和担
任兼职教师。

169
九、教学实训场所
教学场所：机房
实训场所：计算机实训室
安装软件：Sublime Text3、Photoshop、谷歌浏览器。

十、其它说明
无
附件 1:
授课计划审批表
系部： 信息工程系
教师姓名： 章亦淼
2019~2020 学年一学期
专业
计算机应用技术
课程
Web 前端基础
班级
18 计算机 1、2、3 班
考核方式 考核形式
培养目标： 通过本课程的学习，学生能够了解网页 web 发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

学时/项目 总学时 理论学时
比例 实践学时 比例 计划学时 72 24 35% 48 65%
□考查
☑考试
□纯理论 □纯实践 ☑理论+实践
本课程实际学时
72
24
35%
48
65%
在上列方框中打√
教材及教学参考书：（名称、版本、主编、出版社）
《HTML5+CSS3 Web 前端设计基础教程》第 1 版、吴丰、人民邮电出版社
教研室主任审核意见：
年
签名： 月
日 系（部）主任审核意见：
年
签名：
月
（公章）日
授课计划表
周次学时授课内容目的要求作业教具备注
12初识HTML5掌握网站建设流程、HTML 相关概念，HTML 发展历史及 WEB 标准、网页构成的基本要素、HTML基本结构和语法
12文本标签、多媒体标签掌握标题、段落、换行、水平线、空
格、加粗、倾斜、图像、音频、视频
标签
上机
22区块标签、表格标签掌握div、span、表格标签
上机
22表单标签掌握文本框、密码框、单选框、多选
框、文件域、下拉菜单、文本域、按
钮标签
上机
32超链接标签掌握内部链接、外部链接、电子邮件
链接、下载文件链接、空链接、锚点
链接标签
上机
32列表标签掌握有序列表、无序列表、自定义列
表标签
作业1：第二章
PPT 倒数两页
上机
42CSS基础知识及语法、引入方式掌握内联样式、内部样式、外部样式的创建
42CSS 选择器掌握多种通配符、标签、类、id、后代、群组选择器
52CSS 浮动属性掌握div浮动属性和清除浮动的设置上机
52CSS 文本属性掌握文本大小、颜色、字体、行高、
修饰等设置
上机
62超链接属性掌握超链接访问前、后和访问时、单
击时的设置
上机
62CSS 背景属性掌握背景颜色、背景图片等设置作业2：第四章
PPT 倒数两页
上机
72CSS 边框属性掌握边框宽度、样式、颜色设置上机72CSS 列表属性掌握列表符号、位置设置上机
82盒模型（一）掌握盒模型的组成及使用盒模型进行页面布局的方法
82盒模型（二）掌握盒模型内边距、外边距设置上机92盒模型（三）掌握盒模型边框设置、三角形制作上机
92文本溢出属性掌握溢出属性、空余空间、省略号显
示
作业3：第五章
PPT 倒数两页
10 2元素定位（一）掌握相对定位上机
10 2元素定位（二）掌握绝对定位、固定定位上机
11 2块状元素掌握块状元素特点及用法
11 2内联元素掌握内联元素特点及用法
12 2内联块状元素掌握内联块状元素特点及用法作业4：第六章PPT 倒数两页
12 2元素类型的转换（一）掌握内联元素转块状元素上机
13 2元素类型的转换（二）掌握块状元素转内联元素上机
13 2HTML5 新标签、CSS 精灵图掌握HTML5 新标签的编写、精灵图
的创建及调用
上机
14 2CSS3 动画掌握CSS3渐变、变形、过渡上机
14 2CSS3 选项卡掌握CSS3选项卡创建作业5：第七章
PPT 倒数两页
上机
15 2viewport网页可视区域掌握viewport语法、效果
15 2媒体查询详解掌握media query 语法及使用
16 2响应式页面的设计与实现掌握响应式页面制作上机
16 2Boostrap 框架掌握Boostrap 框架
17 2Swiper 插件掌握Swiper 插件
17 2Web App 页面掌握Web App页面制作作业6：第九章
PPT 倒数两页
上机
18 2综合复习（一）复习 CSS+Div 布局方法和技巧、CSS
样式的编写
上机
18 2综合复习（二）综合运用CSS+Div 制作网页上机
附件2：
计算机专业
Web
前
端
基
础
实
训
指
导
书
计算机应用技术教研室
二〇一年月
目录
一、实训目的 (177)
二、仪器设备工具材料 (177)
三、主要内容和原理 (177)
四、实训步骤 (178)
五、思考题或总结 (184)
六、其他（评分标准） (187)
一、实训目的
《Web前端基础》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、JavaScript语言、网页布局、变形与动画等内容，是一门实践性、操作性很强的课程，学生必须通过动手实践操作才能更好地掌握。

因此，在本学期，特设置针对此课程的实训，集中一段时间使学生能将所学知识用于具体的实践。

本实训课程是计算机应用技术专业重要的实践性环节之一，是在学生快学习完《Web 前端基础》课程时进行的一次全面的综合练习。

通过实训课程，使学生熟练掌握Web前端网页布局的基本技和技能方法，培养学生将专业理论知识和技术应用有机结合的高级应用能力。

通过实训课程，加深学生对Web前端课程内容以及相关技术的理解，并提高学生运用理论解决实际问题的能力，使学生具备从事Web前端开发方向的职业的基本素质和技能，提高构建网站的能力。

二、仪器设备工具材料
（一）软件环境
Sublime Text3以上版本、PhotoShopCS6以上版本、谷歌浏览器
（二）硬件环境
不做特殊要求，一般电脑即可
（三）操作系统
Windows 7/8/10/XP
（四）网络条件
与因特网连接的局域网
三、主要内容和原理
以多个静态网站设计的实例指导学生如何独立完成静态站点的设计和制作。

让学生在机
房实际操作，按照给定的实例完成综合项目制作。

项目一——制作医疗健康类网站页面
项目二——制作教育类网站页面
项目三——制作社区类网站页面
项目四——制作水上乐园网站页面
项目五——制作餐饮类网站页面
四、实训步骤
项目一.制作医疗健康类网站页面
医疗健康类网站通常会使用色彩清淡柔和、明度低的色调搭配一些轻松快活的动画形象，整个页面营造出一种轻松温和的氛围，达到使浏览者身心愉快的效果，这样更能体现出该页面的实用性和浏览性。

实例分析：本实例制作的是医疗健康类网站页面，该页面使用适合的排版方式将许多的页面信息排列得井井有条，给浏览者带来整洁、规律的视觉感受，并以图片、文字和动画相结合的方式减轻了浏览者浏览信息时的压力，页面最终效果如下图所示。

知识点：本实例页面采用了居左的布局方式，页面分为上中下三个部分，而中间部分采用左右布局的方式，层次清晰分明；左边中间部分使用一个轻松美观的动画展示，更显得页面整洁美观。

该页面设计的知识点有div标签、li标签、span标签和图片文字的类CSS样式等。

项目二.制作教育类网站页面
在制作教育方面的网站时，首先应考虑到页面整体的视觉效果，例如图像的清晰度、文字的排版方式以及色彩搭配等。

不管网站的哪方面都要以体现教育的严谨性和科学性为目的，使得浏览者在浏览页面时能够充分信任页面中所展现的信息。

实例分析：本实例制作的是教育类的网站页面，页面采用了蓝色及其邻近色作为页面的主体色调，体现出教育严谨和端正的一面，并且蓝色能够给人一种理智、清晰的视觉效果，从而增强该页面的诚信度，页面最终效果如下图所示。

知识点：在页面中插入Spry选项卡式面板后，可以对面板的名称、标签的数量和顺序以及默认面板进行设置。

另外，还可以通过对所链接的外部CSS样式表文件SpryTabbedPanels.css中的相关属性进行设置，从而达到想要的效果。

项目三.制作社区类网站页面
社区类网站页面通常会使用色彩清晰、有活力和生命力的色调搭配一些美观漂亮的动画形象，使整个页面洋溢着和谐、快乐的生活气息，可以给浏览者简单清晰的视觉感观，同时也更能体现出该页面的合理性和可浏览性。

实例分析：本实例制作的是社区类的网站页面，为了能够快速吸引受众实现，该网站页面采用了上中下的结构，通过图文的组合给人一种亲近感。

在色彩上使用绿色，给人一种天然清新、欢快的感觉，整个页面营造了一种温馨、和谐的页面效果，最终效果如下图所示。

知识点：需要明确在面对具有大量信息的页面时该如何分析页面的整体结构，并且能够掌握表单元素、项目列表的编辑方法以及dl标签的使用方法。

项目四.制作水上乐园网站页面
通常，一些娱乐性的网站都会采用动画来体现娱乐精神，并通过图文结合的方式来更加形象、生动地展现出其值得体验的页面效果。

在页面的色彩搭配上，应采用较为鲜亮、明快的色彩，从而能够使浏览者在浏览页面时找到游玩的激情。

实例分析：本实例制作的是水上乐园的网站页面，该页面无论在色彩搭配上还是页面排版上都以体现水的灵动与清澈为前提，能够在视觉上给浏览者身临其境的感觉，页面最终效果如下图所示。

知识点：通过为页面中的文字添加项目列表的方式来进一步对文字进行排版和修饰，并
且还可以再CSS 样式表中对项目列表进行定义，从而使其能够展现出更加完美的视觉效果。

项目五.制作餐饮类网站页面
餐饮类网站页面可采用清新自然的色彩，制造干净美味的画面效果。

该网站页面在页面布局结构上以公司食品展示为主，充分吸引浏览者的目光，勾起浏览者的食欲，达到宣传效果。

实例分析：本实例制作的是餐饮类的网站页面，开头以一个卡通插画展示，让浏览者感到休闲自在，不会有浏览负担。

该网页整体色调运用清新的淡绿色，充分体现了该产品无污染、环保自然的特色，并使用两个动画来丰富和活跃画面氛围，使得页面更加富有生机，页面最终效果如下图所示。

知识点：掌握如何对图像与文字进行适当的排版，以及使用div+CSS布局的知识点制作网页，为以后制作出更加美观、丰富多彩的网页打下坚实基础。

五、思考题或总结
项目一.思考题：
1.在什么情况下可以为文字内容创建项目列表？
2.项目列表相关属性有什么？（中文+英文）
3.在制作过程中遇到什么问题？
项目二.思考题：
1.S pry构件主要由哪几个部分组成？分别阐述作用。

2.如何更改Spry选项卡式面板的外观样式？
3.在制作过程中遇到什么问题？
项目三。

思考题：
1.什么是div？
2.使用div+CSS的方式来布局页面有什么优势？
3.在制作过程中遇到什么问题？
项目四.思考题：
1.如何安排图像尺寸？
2.类CSS样式的前面为什么要加“.”符号？
3.在制作过程中遇到什么问题？
项目五.思考题：
1.新建HTML页面默认编码格式是什么？
2.常用表单有哪几种？（中文+英文）
3.在制作过程中遇到什么问题？
六、其他（评分标准）
实训要求：
学生必须认真学习实训指导书，查阅相关参考资料，在教师的指导下按要求完成实训任务。

在实训过程中应勤于思考，刻苦钻研，把理论与实践结合起来，提高对理论知识的理解，增强动手
能力。

1、学生每天按上课时间进行实训，不迟到、不早退、不准中途溜出，学习委员负责考
勤登记，并及时将考勤情况报指导老师。

2、学生在实训课之前要按照要求进行分组。

3~4 人/组，每一个小组要有一名小组长，
负责本小组的实训纪律、卫生、收集作业、协助老师完成实训课题。

3、来实训室上课时需带上实训指导书，填写每部分相关题目及总结。

评分标准：
1、出勤20%
2、实训上交材料：实训指导书思考题及总结15%、实训结果65%
注意：
1）考勤：每迟到一次扣5 分，早退一次扣5 分，旷课一节扣10 分，迟到十五分钟以上，算旷课一节。

2）整个实训完成后，学习委员负责收集所有实训指导书和小组作业。

3）未交实训结果或拷贝他人，均按不合格计。