《网页设计与制作HTML5》课程标准.docx
《《网页设计与制作HTML5》课程标准.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作HTML5》课程标准.docx（31页珍藏版）》请在冰豆网上搜索。
《网页设计与制作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.掌握文本标签使用
能够根据HTML常用标签的编写方法，完成学院简介、相亲网页等案例
学习养成积极思考问题、自主学习和解决问题的习惯和能力
2.认识多媒体标签
2.掌握多媒体标签使用
2
HTML常用标签
3.认识区块标签
4.认识表格标签
3.掌握区块标签使用
4.掌握表格标签使用
10
5.认识表单标签
5.掌握表单标签使用
6.认识超链接标签
6.掌握超链接标签使用
7.认识列表标签
7.掌握列表标签使用
3
CSS样式入门
1.了解CSS3基础知识及语法
2.了解CSS样式的创建方法
3.认识CSS选择器
4.理解选择器权重问题
1.掌握CSS样式的创建
2.熟练运用多种CSS选择器
3.利用CSS基础知识完成
页面简易美化
能够利用多种CSS样式，完成设计、品牌网页等案例
培养学生对待工作和学习一丝不苟、精益求精的精神
4
1.认识CSS浮动属性
1.熟练应用CSS控制文本的外观和背景的样式
2.熟练运用CSS实现图文混排效果
3.掌握列表样式控制
4
CSS核心属性
2.认识CSS文本属性
3.认识超链接属性
4.认识CSS背景属性
5.认识CSS边框属性
能够编写多种CSS核心属性，完成个人作品、广告网页等案例
培养学生发现问题、分析问题和解决问题的能力
12
6.认识CSS列表属性
序号
学习情境
知识目标
专业能力
方法能力
社会能力
学时
5
盒模型
1.了解盒模型的组成部分
2.了解盒模型的相关元素
3.了解文本溢出相关的属性
4.了解定位属性
1.掌握使用盒模型进行页面布局的方法
2.利用边框属性制作三角形
3.掌握div定位方法
能够利用盒模型编写网页，完成产品展示、企业介绍网页等案例
培养学生理论联系实际的能力
12
6
元素类型
1.了解元素类型分类依据和元素类型分类
2.理解元素类型的转换
3.了解inline-block元素类型的应用
1.掌握元素类型特征
2.掌握元素类型之间的转换
能够利用元素类型转换安排网页效果，完成企业、活动公告网
页等案例
培养学生勇于创新、吃苦耐劳的精神
10
7
CSS3与HTML5
高级应用
1.认识H5新标签
2.了解CSS3渐变、动画、选项卡
1.掌握H5新标签的运用2.掌握CSSSprite技术、CSS3渐变、动画
能够运用CSS3及HTML5新内容，完成极速赛车、飞越天空
网页等案例
培养学生团队协作能力，诚实守信的优秀品质
6
8
多设备响应式页面的实现
1.了解响应式Web设计
2.了解响应式页面实现方式
1.掌握响应式Web设计2.掌握mediaquery相关知识
能够制作在PC端、Pad端和手机端3类设备中都能自适应的
响应式页面
培养学生责任心和良好的团队合作精神
6
9
WebApp类页面的设计与实现
1.了解WebApp开发基础知识
2.认识Bootstrap框架和Swiper插件3.了解页面实现过程
1.掌握移动端页面设计规范
2.掌握等比缩放布局/rem
布局
能够制作移动端网站，完成商城网页
培养学生科学的思维方式和判断分析问题的能力
6
10
综合复习
1.综合复习本学期学习内容
2.重点内容及难点内容解答
掌握HTML5+CSS3布局技
术方法和技巧
能够综合运用所学知
识完成网页制作
培养学生举一反三、
归纳总结的能力
4
合计
讲授24学时、实践44学时、复习与习题课4学时，共72学时
（二）课程学习单元内容与要求
学习单元情境设计
单元名称
初识HTML
学时
2
学习要求
1.掌握相关专业术语
2.掌握站点的创建
3.使用记事本创建简单的HTML5页面
任务分解
任务1
Web前端工程师行业前景
任务2
网站建设流程
任务3
HTML相关概念，HTML发展历史及WEB标准
任务4
网页构成的基本要素
任务5
HTML基本结构和语法
学习单元情境设计
单元名称
HTML常用标签
学时
10
学习要求
1.掌握文本标签使用
2.掌握多媒体标签使用
3.掌握区块标签使用
4.掌握表格标签使用
5.掌握表单标签使用
6.掌握超链接标签使用
7.掌握列表标签使用
任务分解
任务1
文本标签
任务2
多媒体标签
任务3
区块标签
任务4
表格标签
任务5
表单标签
任务6
超链接标签
任务7
列表标签
学习单元情境设计
单元名称
CSS样式入门
学时
4
学习要求
1.掌握CSS样式的创建
2.熟练运用多种CSS选择器
3.利用CSS基础知识完成页面简易美化
任务分解
任务1
CSS3基础知识及语法
任务2
CSS样式的创建方法
任务3
CSS选择器
任务4
选择器权重
学习单元情境设计
单元名称
CSS核心属性
学时
12
学习要求
1.熟练应用CSS控制文本的外观和背景的样式
2.熟练运用CSS实现图文混排效果
3.掌握列表样式控制
任务分解
任务1
CSS浮动属性
任务2
CSS文本属性
任务3
超链接属性
任务4
CSS背景属性
任务5
CSS边框属性
任务6
CSS列表属性
学习单元情境设计
单元名称
盒模型
学时
12
学习要求
1.掌握使用盒模型进行页面布局的方法
2.利用边框属性制作三角形
3.掌握div定位方法
任务分解
任务1
盒模型的组成
任务2
盒模型相关元素
任务3
文本溢出相关属性
任务4
定位属性
学习单元情境设计
单元名称
元素类型
学时
10
学习要求
1.掌握元素类型特征
2.掌握元素类型之间的转换
任务分解
任务1
元素类型分类依据和元素类型分类
任务2
元素类型的转换
任务3
inline-block元素类型的应用
学习单元情境设计
单元名称
CSS3与HTML5高级应用
学时
6
学习要求
1.掌握H5新标签的运用
2.掌握CSSSprite技术、CSS3渐变、动画
任务分解
任务1
H5新标签
任务2
CSS3渐变、动画、选项卡
学习单元情境设计
单元名称
多设备响应式页面的实现
学时
6
学习要求
1.掌握响应式Web设计
2.掌握mediaquery相关知识
任务分解
任务1
响应式Web设计
任务2
响应式页面实现方式
学习单元情境设计
单元名称
WebApp类页面的设计与实现
学时
6
学习要求
1.掌握移动端页面设计规范
2.掌握等比缩放布局/rem布局
任务分解
任务1
WebApp开发基础知识
任务2
Bootstrap框架和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+CSS3Web前端设计基础教程》，编著者：
吴丰，人民邮电出版社。
2.长期有效的网络资料平台，储备大量的优秀作品以备参考。
3.信息化教学资源库，储备多媒体课件、多媒体素材、电子图书、专业软件。
4.符合教学大纲和课程要求的试题库、实训指导书，增加图书馆内学习参考书、专业期刊等馆藏。
八、任课教师要求
教学团队的素质培养以职业道德素质、专业理论知识、专业实践技能、教育教学能力、课程和教材设计能力、科研创新能力为基本内容。
教学质量取得成功的关键是拥有一支教学与实践经验丰富、治学严谨、锐意进取、勇于创新，爱岗敬业、团结协作、结构合理的教学团队。
根据专业人才培养需要，本课程教师应具备以下3方面的基本能力：
1、具有良好的思想政治素质和教师职业道德；
2、掌握网页设计的知识与方法，了解网页设计的发展状况、并且有一定的程序语言功底与审美能力等；
3、掌握职业教育教学方法，具有课程设计和教学实施的能力。
相关核心课程的实践教学中均应聘请具有丰富项目经验的行业人员参与课程建设和担任兼职教师。
169
九、教学实训场所
教学场所：
机房
实训场所：
计算机实训室
安装软件：
SublimeText3、Photoshop、谷歌浏览器。
十、其它说明
无
附件1:
授课计划审批表
系部：
信息工程系教师姓名：
章亦淼2019~2020学年一学期
专业
计算机应用技术
课程
Web前端基础
班级
18计算机1、2、3班
培养目标：
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
考核方式
考核形式
□考查
☑考试
□纯理论
□纯实践
☑理论+实践
学时/项目
总学时
理论学时
比例
实践学时
比例
计划学时
72
24
35%
48
65%
本课程实际学时
72
24
35%
48
65%
在上列方框中打√
教材及教学参考书：
（名称、版本、主编、出版社）
《HTML5+CSS3Web前端设计基础教程》第1版、吴丰、人民邮电出版社
教研室主任审核意见：
年
签名：
月
日
系（部）主任审核意见：
年
签名：
月
（公章）日
授课计划表
周次
学时
授课内容
目的要求
作业
教具
备注
1
2
初识HTML5
掌握网站建设流程、HTML相关概念，HTML发展历史及WEB标准、网页构成
的基本要素、HTML基本结构和语法
1
2
文本标签、多媒体标签
掌握标题、段落、换行、水平线、空格、加粗、倾斜、图像、音频、视频
标签
上机
2
2
区块标签、表格标签
掌握div、span、表格标签
上机
2
2
表单标签
掌握文本框、密码框、单选框、多选框、文件域、下拉菜单、文本域、按
钮标签
上机
3
2
超链接标签
掌握内部链接、外部链接、电子邮件
链接、下载文件链接、空链接、锚点链接标签
上机
3
2
列表标签
掌握有序列表、无序列表、自定义列表标签
作业1：
第二章PPT倒数两页
上机
4
2
CSS基础知识及语法、引入方式
掌握内联样式、内部样式、外部样式的创建
4
2
CSS选择器
掌握多种通配符、标签、类、id、后代、群组选择器
5
2
CSS浮动属性
掌握div浮动属性和清除浮动的设置
上机
5
2
CSS文本属性
掌握文本大小、颜色、字体、行高、修饰等设置
上机
6
2
超链接属性
掌握超链接访问前、后和访问时、单击时的设置
上机
6
2
CSS背景属性
掌握背景颜色、背景图片等设置
作业2：
第四章PPT倒数两页
上机
7
2
CSS边框属性
掌握边框宽度、样式、颜色设置
上机
7
2
CSS列表属性
掌握列表符号、位置设置
上机
8
2
盒模型
（一）
掌握盒模型的组成及使用盒模型进行页面布局的方法
8
2
盒模型
（二）
掌握盒模型内边距、外边距设置
上机
9
2
盒模型（三）
掌握盒模型边框设置、三角形制作
上机
9
2
文本溢出属性
掌握溢出属性、空余空间、省略号显示
作业3：
第五章PPT倒数两页
10
2
元素定位
（一）
掌握相对定位
上机
10
2
元素定位
（二）
掌握绝对定位、固定定位
上机
11
2
块状元素
掌握块状元素特点及用法
11
2
内联元素
掌握内联元素特点及用法
12
2
内联块状元素
掌握内联块状元素特点及用法
作业4：
第六章PPT倒数两页
12
2
元素类型的转换
（一）
掌握内联元素转块状元素
上机
13
2
元素类型的转换
（二）
掌握块状元素转内联元素
上机
13
2
HTML5新标签、CSS精灵图
掌握HTML5新标签的编写、精灵图的创建及调用
上机
14
2
CSS3动画
掌握CSS3渐变、变形、过渡
上机
14
2
CSS3选项卡
掌握CSS3选项卡创建
作业5：
第七章PPT倒数两页
上机
15
2
viewport网页可视区域
掌握viewport语法、效果
15
2
媒体查询详解
掌握mediaquery语法及使用
16
2
响应式页面的设计与实现
掌握响应式页面制作
上机
16
2
Boostrap框架
掌握Boostrap框架
17
2
Swiper插件
掌握Swiper插件
17
2
WebApp页面
掌握WebApp页面制作
作业6：
第九章PPT倒数两页
上机
18
2
综合复习
（一）
复习CSS+Div布局方法和技巧、CSS样式的编写
上机
18
2
综合复习
（二）
综合运用CSS+Div制作网页
上机
附件2：
计算机专业
Web前端基础实训指导书
计算机应用技术教研室二〇一年月
一、实训目的
《Web前端基础》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、JavaScript语言、网页布局、变形与动画等内容，是一门实践性、操作性很强的课程，学生必须通过动手实践操作才能更好地掌握。
因此，在本学期，特设置针对此课程的实训，集中一段时间使学生能将所学知识用于具体的实践。
本实训课程是计算机应用技术专业重要的实践性环节之一，是在学生快学习完《Web前端基础》课程时进行的一次全面的综合练习。
通过实训课程，使学生熟练掌握Web前端网页布局的基本技和技能方法，培养学生将专业理论知识和技术应用有机结合的高级应用能力。
通过实训课程，加深学生对Web前端课程内容以及相关技术的理解，并提高学生运用理论解决实际问题的能力，使学生具备从事Web前端开发方向的职业的基本素质和技能，提高构建网站的能力。
二、仪器设备工具材料
（一）软件环境
SublimeText3以上版本、PhotoShopCS6以上版本、谷歌浏览器
（二）硬件环境
不做特殊要求，一般电脑即可
（三）操作系统
Windows7/8/10/XP
（四）网络条件
与因特网连接的局域网
三、主要内容和原理
以多个静态网站设计的实例指导学生如何独立完成静态站点的设计和制作。
让学生在机房实际操作，按照给定的实例完成综合项目制作。
项目一——制作医疗健康类网站页面项目二——制作教育类网站页面
项目三——制作社区类网站页面项目四——制作水上乐园网站页面项目五——制作餐饮类网站页面
四、实训步骤
项目一.制作医疗健康类网站页面
医疗健康类网站通常会使用色彩清淡柔和、明度低的色调搭配一些轻松快活的动画形象，整个页面营造出一种轻松温和的氛围，达到使浏览者身心愉快的效果，这样更能体现出该页面的实用性和浏览性。
实例分析：
本实例制作的是医疗健康类网站页面，该页面使用适合的排版方式将许多的页面信息排列得井井有条，给浏览者带来整洁、规律的视觉感受，并以图片、文字和动画相结合的方式减轻了浏览者浏览信息时的压力，页面最终效果如下图所示。
知识点：
本实例页面采用了居左的布局方式，页面分为上中下三个部分，而中间部分采用左右布局的方式，层次清晰分明；左边中间部分使用一个轻松美观的动画展示，更显得页面整洁美观。
该页面设计的知识点有div标签、li标签、span标签和图片文字的类CSS样式等。
项目二.制作教育类网站页面
在制作教育方面的网站时，首先应考虑到页面整体的视觉效果，例如图像的清晰度、文字的排版方式以及色彩搭配等。
不管网站的哪方面都要以体现教育的严谨性和科学性为目的，使得浏览者在浏览页面时能够充分信任页面中所展现的信息。
实例分析：
本实例制作的是教育类的网站页面，页面采用了蓝色及其邻近色作为页面的主体色调，体现出教育严谨和端正的一面，并且蓝色能够给人一种理智、清晰的视觉效果，从而增强该页面的诚信度，页面最终效果如下图所示。
知识点：
在页面中插入Spry选项卡式面板后，可以对面板的名称、标签的数量和顺序以及默认面板进行设置。
另外，还可以通过对所链接的外部CSS样式表文件SpryTabbedPa
升级会员 