《HTML5+CSS3网站设计基础教程》课程标准

2024年1月25日发(作者：)

《HTML5+CSS3网页设计基础教程》课程标准

课程代码：

课程性质：专业必修课

适用专业：计应专业

开设时间：第2学期

学时：64

课程归属：

编写执笔人及编写日期：2022年2月

审定负责人及审定日期：

系主任及审定日期：

学分：4

第一部分、课程定位

一、课程性质

本课程是计算机应用专业一门专业必修课程

二、课程性质与目标

《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。

三、前导、后续课程

（1）前导课程

计算机应用基础

（2）后续课程

JavaScript编程、、微信小程序开发

第二部分、课程设计

一、基本理念

高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。

1

二、课程设计思路

（1）以职业岗位和后续课程需求确定课程目标

首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队，进行课程服务专业的人才培养目标分析，确定计算机应用专业的岗位面向；进而确定本课程所织成的具体核心课程有哪些？同时结合行业对岗位任职的具体标准，确定课程的具体目标。

（2）依据职业标准，通过对所服务的后续课程和必修课程本身分析，以专业基础课与学习领域课程聚合点构建教学内容

通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析，得出后续专业课程负载点与专业基础课程支撑点存在聚合，将这些聚合点作为教学内容选择、实训任务确定的依据。

（3）根据教学内容需求和学生学情的分析设计教学方法和手段

根据教学内容需求，以及根据学生形象思维强、逻辑思维相对弱的现状，设计案例教学法、引导文教法等，应用项目应用设计等教学手段服务抽象的理论教学。

（4）以优质的教学资源和优秀的教学团队，为课程实施和后续课程服务提供保障。

开发与相关专业课程衔接的特色教材，开发网页制作的实训指导书，需求同时熟悉专业必修课和相关专业课程的优秀教学团队，为课程实施和后续课程服务提供有力保障。

第三部分、课程目标

《HTML5+CSS3网页设计基础》主要包括HTML5入门基本内容、CSS样式表、网站的总体设计等内容，使学生能熟练运用 HTML中的文字、图像、列表、链接、表格、表单、多媒体等元素设计出简单的静态网页；熟练操作应用任一种支持HTML5的Web集成开发环境，如：Hbuilder、Visual Studio Code、WebStorm、Sublime、Dreamweaver等，进行网站布局的实现，能独立设计小型WEB站点。

一、知识目标：

1．了解网页设计的基础知识；

2

2．掌握在网页中插入文本、列表、图像、超链接的方法；

3．掌握表格的设计方法；

4、掌握表单的设计方法

5．掌握DIV+CSS布局技术；

6．掌握CSS美化网页的方法；

二、职业技能目标：

1．能熟练运用Hbuilder、Visual Studio Code、WebStorm、Sublime、Dreamweaver等中任意一款应用软件；

2. 熟练掌握在网页中加入文字、列表、图像、超链接等元素的方法

3. 学会制作表格

4. 学会制作表单

5．学会用DIV+CSS布局网页的方法；

6. 学会运用CSS对网页元素进行格式设计；

三、职业素养目标：

1．具有勤奋学习的态度，严谨求实、创新的工作作风；

2．具有良好的心理素质和职业道德素养；

3．具有高度责任心和良好的团队合作精神；

4．具有科学思维方式和一定的唯物辩证法思想；

5．具有较强的网页设计创意思维、艺术设计素质。

四、职业技能证书考核要求：

职业技能认证：web前端开发-1+X技能证书（初级）

考核要求：自愿

第四部分、课程内容

一、理论教学部分

本课程主要讲解HTML5入门基本内容、CSS样式以及网站的建设等知识。

1. 网页设计基础知识

2. 网页中使用文本、列表、图像、超链接的方法

3. 表格的制作方法

4. 表单的制作方法

3

5. DIV+CSS布局网页的方法

6. 用CSS美化网页的方法

7. CSS3高级应用

8. 响应式Web设计中的媒体查询、流式布局、弹性盒布局

二、实践教学内容与要求：

1． 站点的创建

要求学生掌握在Hbuilder、Visual Studio Code、WebStorm、Sublime、Dreamweaver等任意一款应用软件中建立站点的能力。

2． HTML语言图文混排的网页设计

要求学生能够使用HTML语言及标签属性进行网页的图文混排网页的设计。

3． 使用CSS样式美化网页格式

使用CSS样式对网页进行美化

4． 使用DIV+CSS进行网页布局

能够利用DIV+CSS布局，结合实例设计网页。

三、教材主要内容及要求

第一章 HTML概述

学习单元 HTML概述

1.

2.

3.

4.

学时 6学时

学习目标

了解HTML5发展历程

理解HTML5浏览器支持情况

熟悉HTML5基本语法,掌握HTML5语法新特性。

掌握HTML5相关图像、超链接标记及属性，能够制作简单的网页页面。

了解

√

√

√

√

√

掌握

√

√

√

√

√

√

重点

√

√

难点

知识点

HTML5发展历史

HTML5的优势

HTML5浏览器支持情况

创建第一个HTML5页面

HTML5文档基本格式

HTML5语法

学习内容

HTML标记

标记的属性

HTML5文档头部相关标记

标题和段落标记

文本格式化标记

特殊字符标记

常用图像格式

4

图像标记

绝对路径和相对路径

创建超链接

锚点链接

第二章 HTML5标签及属性

学习单元 HTML5标签及属性

1.

2.

3.

4.

5.

√

√

√

√

√

学时 6学时

学习目标

掌握结构元素的使用，可以使页面分区更明确。

理解分组元素的使用，能够建立简单的标题组。

掌握页面交互元素的使用，能够实现简单的交互效果。

理解文本层次语义元素，能够在页面中突出所标记的文本内容。

掌握全局属性的应用，能够使页面元素实现相应的操作。

了解

√

√

√

√

√

√

√

掌握

√

√

√

√

√

√

√

√

√

√

重点

√

√

√

√

难点

√

知识点

ul元素

ol元素

dl元素

列表的嵌套应用

header元素

nav元素

article元素

section元素

footer元素

学习内容

figure和figcaption元素

hgroup元素

details和summary元素

progress元素

meter元素

time元素

mark元素

cite元素

draggable属性

hidden属性

spellcheck属性

contenteditable属性

第三章 CSS3入门

学习单元 CSS3入门

1.

2.

3.

4.

学时 4学时

学习目标

了解CSS3的发展历史以及主流浏览器的支持情况。

掌握CSS基础选择器，能够运用CSS选择器定义标记样式。

熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。

理解CSS优先级，能够区分复合选择器权重的大小。

了解 掌握 重点 难点

5

学习内容

知识点

CSS3概述

CSS3发展历史

CSS3浏览器支持情况

CSS样式规则

引入CSS样式表

CSS基础选择器

字体样式属性

文本外观属性

CSS层叠性和继承性

CSS优先级

第四章 CSS3选择器

学习单元 CSS3选择器

√

√

√

√

√

√

√

√

√

√

√

√

√

学时 6学时

学习目标

1. 掌握CSS3中新增加的属性选择器，能够运用属性选择器为页面中的元素添加样式。

2. 理解关系选择器的用法，能够准确判断元素与元素间的关系。

3. 掌握常用的结构化伪类选择器，能够为相同名称的元素定义不同样式。

4. 掌握伪元素选择器的使用，能够在页面中插入所需要的文字或图片内容。

5. 掌握CSS伪类，会使用CSS伪类实现超链接特效。

知识点

E[att^=value] 属性选择器

E[att$=value]属性选择器

E[att*=value]属性选择器

子代选择器（>）

兄弟选择器（+、~）

:root选择器

:not选择器

:only-child 选择器

:first-child和:last-child选择器

:nth-child(n)和:nth-last-child(n)选择器

:nth-of-type(n)和:nth-last-of-type(n)选择器

:empty选择器

:target选择器

:before选择器

:after选择器

链接伪类

了解

√

掌握

√

√

√

√

√

√

√

√

重点

√

√

难点

√

学习内容

√

√

√

√

√

√

√

第五章 CSS盒子模型

学习单元

CSS盒子模型 学时 8学时

6

学习目标

1.

2.

3.

4.

掌握盒子的相关属性，能够制作常见的盒子模型效果。

掌握背景属性的设置方法，能够设置背景颜色和图像。

理解渐变属性的原理，能够设置渐变背景。

熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。

了解

√

掌握

√

√

√

√

√

√

√

√

√

√

√

√

√

重点

√

√

√

√

√

√

√

难点

√

知识点

认识盒子模型

标记

盒子的宽与高

边框属性

边距属性

box-shadow属性

box-sizing 属性

设置背景颜色

设置背景图像

学习内容

背景与图片不透明度的设置

设置背景图像平铺

设置背景图像的位置

设置背景图像固定

设置背景图像的大小

设置背景的显示区域

设置背景图像的裁剪区域

设置多重背景图像

背景复合属性

线性渐变

径向渐变

重复渐变

第六章 元素的浮动与定位

学习单元

学习目标

元素的浮动与定位 学时 4学时

1. 理解元素的浮动，能够为元素设置浮动样式。

2. 熟悉清除浮动的方法，可以使用不同方法清除浮动。

3. 掌握元素的定位，能够为元素设置常见的定位模式。

知识点

元素的浮动属性float

清除浮动

overflow属性

元素的定位属性

静态定位static

相对定位relative

绝对定位absolute

固定定位fixed

z-index层叠等级属性

了解

√

掌握

√

√

√

√

重点

√

√

√

√

难点

√

√

√

7

学习内容

元素的类型

标记

元素的转换

第七章 表单的应用

学习单元

学习目标

表单的应用

√

√

√

学时 6学时

1. 了解表单功能，能够快速创建表单。

2. 掌握表单相关元素，能够准确定义不同的表单控件。

3. 掌握表单样式的控制，能够美化表单界面。

知识点

表单的构成

创建表单

表单属性

Input元素的type属性

Input元素的其他属性

textarea元素

select元素

datalist元素

keygen元素

output元素

CSS控制表单样式

了解

√

√

√

√

掌握

√

√

重点

√

√

√

√

√

难点

√

√

学习内容

第八章 HTML5音视频技术

学习单元 HTML5音视频技术

1.

2.

3.

4.

5.

学时 4学时

学习目标

熟悉HTML5多媒体特性。

了解HTML5支持的音频和视频格式。

掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。

掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。

了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。

了解

√

√

√

√

√

√

掌握

√

√

√

重点

√

√

难点

√

√

知识点

HTML5多媒体的特性

视频和音频编解码器

多媒体的格式

支持视频和音频的浏览器

学习内容

在HTML5中嵌入视频

在HTML5中嵌入音频

音视频中的source元素

调用网页多媒体文件

CSS控制视频的宽高

视频和音频的方法和事件

HTML5音视频发展趋势

第九章 CSS3高级应用

8

学习单元

学习目标

CSS3高级应用 学时 8学时

1. 理解过渡属性，能够控制过渡时间、动画快慢等常见过渡效果。

2. 掌握CSS3中的变形属性，能够制作2D转换、3D转换效果。

3. 掌握CSS3中的动画，能够熟练制作网页中常见的动画效果。

知识点

transition-property属性

transition-duration属性

transition-timing-function属性

transition-delay属性

transition属性

认识transform

2D转换

3D转换

@keyframes

animation-name属性

animation-duration属性

animation-timing-function属性

animation-delay属性

animation-iteration-count属性

animation-direction属性

animation属性

了解

掌握

√

√

√

√

√

√

√

√

√

√

√

√

重点

√

√

√

√

难点

√

√

学习内容

第十章 跨平台移动 Web 技术

学习单元

学习目标

跨平台移动 Web 技术 学时 12学时

1. 掌握站点的建立，能够建立规范的站点。

2. 完成首页面的制作，并能够实现简单的CSS3动画效果。

知识点

响应式Web设计简介

响应式Web设计相关技术

CSS2媒体查询

CSS3媒体查询的用法

媒体查询常用尺寸及代码

创建流式布局

CSS3流式排版

Flexbox简介

基本概念

伸缩容器的属性

伸缩项目的属性

了解

√

√

√

掌握

√

√

√

重点

√

√

√

√

√

难点

√

√

√

√

学习内容

四、学时分配

9

课时分配表

课时分配

序号 课程内容

理论课

1

2

3

4

5

6

7

8

9

10

HTML概述

HTML5标签及属性

CSS3入门

CSS3选择器

CSS盒子模型

元素的浮动与定位

表单的应用

HTML5音视频技术

CSS3高级应用

跨平台移动Web技术

3

3

2

3

4

2

3

2

4

4

习题课

实训课

3

3

2

3

4

2

3

2

4

8

其它

共计

6

6

4

6

8

4

6

4

8

12

合计

31 33 64

第五部分、课程实施

一、教学组织

在教学过程中充分体现学生的主体性。具体体现在以下2个模块的教学模式上：

(1) 基础模块：

理论讲授→小实例驱动→学生自主实践教师巡回指导→教师补授→综合实例驱动→学生自主练习教师巡回指导→展示部分学生作品 师生共同欣赏、评价→教师总结

(2) 应用模块：

项目驱动→师生讨论项目素材→学生实践制作素材→师生讨论关键技术教师补授→学生实践完成项目→测试、评价学生作品→教师总结→企业网上平台展示优秀作品

二、实施条件

1. 师资条件

本课程建设已经形成一种专兼结合、具备良好双师素质、双师结构的课程教

10

学团队，还拥有一支由一线技术人员组成的技术指导支持团队。

2. 设备条件

多媒体机房

3．学习场所条件

1）校内实训基地条件：

多媒体计算机

2）校外实训基地条件：

第六部分 课程考核与评价

本课程考核内容包括过程性评价和总结性评价，其中过程性考核占60%，总结性评价（网站总体设计）占40%。

过程性评价主要包括：

（1） 课堂纪律、学习态度、出勤情况占30%

（2） 平时作品 30%

一、考核标准

1.过程性评价考核标准

（1） 课堂纪律、学习态度、出勤情况（30%）：采取灵活考勤方式，通过教学日志反应。

（2） 平时布置作业能否按时、是否独立、高质量完成。（30%）

2. 总结性评价考核标准

（1） 期末作品网站总体设计（ 40% ） 主要从作品的美观、流畅、交互性以及行业标准来判断。

实际考核过程中，任课教师可结合学生实际情况和教学情况进行分值和内容的适当调整。

第七部分、课程资源的开发与利用

多媒体课件

电子教案

实验指导书

实训指导书

11

校本教材

课程网站

技能竞赛活动

推荐教材

本课程所选用的教材，其内容应满足本专业标准和本课程标准的要求。语言应精炼、准确、科学，体现先进性、通用性、实用性。教材应图文并茂，提高学生学习兴趣与积极性。

建议采用以下教材：

《HTML5+CSS3网页设计基础教程》

12