admin 管理员组

文章数量: 1184232


2023年12月18日发(作者：volumn和volume)

博学谷——让IT教学更简单，让IT学习更有效

《HTML5+CSS3网页设计与制作》课程教学大纲

（课程英文名称）

课程编号：

学 分：5学分

学 时：74学时 （其中：讲课学时：50学时 上机学时：24学时）

先修课程：计算机基础、计算机网络、计算机应用

后续课程：UI设计、JavaScript网页特效

适用专业：信息技术及其计算机相关专业

开课部门：计算机系

一、课程的性质与目标

《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。

二、课程设计理念与思路

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

课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。

博学谷——让IT教学更简单，让IT学习更有效

三、教学条件要求

开发工具：Dreamweaver CS6或其他代码编辑工具

四、课程的主要内容及基本要求

第一章 HTML5+CSS3网页设计概述

学习单元

学习目标

HTML5+CSS3网页设计概述 学时 2学时

◆ 了解网页概念和组成。

◆ 理解HTML、CSS和JavaScript的功能和作用。

◆ 熟悉Dreamweaver工具的基本操作。

知识点

认识网页

网页名词解释

Web标准

HTML简介

CSS简介

学习内容

JavaScript简介

网页的展示平台—浏览器

认识Dreamweaver界面

Dreamweaver初始化设置

Dreamweaver基本操作

【阶段案例—创建第一个网页】

了解

√

√

√

√

√

√

√

√

√

√

掌握

√

重点

难点

第二章 初识HTML5

学习单元 初识HTML5

◆

◆

◆

◆

学时 6学时

了解HTML和HTML5的基本结构，能够区分两者的结构差异。

熟悉HTML头部相关标记。

掌握HTML文本控制标记的用法，能够使用该标记定义文本。

掌握HTML图像标记的用法，能够自定义图像。

了解

√

√

掌握

√

√

√

重点

√

√

难点

√

学习目标

知识点

HTML5的优势

HTML5全新的结构

标签的分类

学习内容

标签的关系

标签的属性

HTML5文档头部相关标签

页面格式化标签

博学谷——让IT教学更简单，让IT学习更有效

文本样式标签

文本格式化标签

time标签

mark标签

cite标签

特殊字符标签

常见图像格式

图像标签

相对路径和绝对路径

【阶段案例—制作图文混排新闻】

√

√

√

√

√

√

√

√

√

√

√

√

第三章 初识CSS3

学习单元 初识CSS3

1.

2.

3.

4.

学时 6学时

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

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

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

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

了解

√

√

掌握

√

√

√

√

√

重点

√

√

√

√

难点

√

√

√

学习目标

知识点

结构与表现分离

CSS3的优势

CSS样式规则

引入CSS样式表

CSS基础选择器

学习内容

CSS字体样式属性

CSS文本外观属性

CSS复合选择器

CSS层叠性和继承性

CSS优先级

【阶段案例—制作活动通知页面】

第四章 CSS3选择器

学习单元 CSS3选择器

◆

◆

◆

◆

熟悉CSS3中新增加的属性选择器。

理解关系选择器的用法。

理解常用的结构化伪类选择器。

掌握伪元素选择器的用法。

了解 掌握 重点 难点

学时 6学时

学习目标

学习内容 知识点

博学谷——让IT教学更简单，让IT学习更有效

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选择器

:before选择器

:after选择器

链接伪类

√

√

√

√

√

√

√

√

√

√

√

√

√

√

√

√

√

【阶段案例—制作招聘页面】

第五章 盒子模型

学习单元 盒子模型

◆

◆

◆

◆

学时 8学时

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

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

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

掌握元素类型的分类，能够进行元素类型的转换。

了解

√

√

√

√

√

√

√

掌握

√

√

√

√

√

√

重点

难点

√

√

√

学习目标

知识点

认识盒子模型

边框属性

内边距属性

外边距属性

背景属性

学习内容

颜色透明度

圆角

图片边框

阴影

渐变

多背景图像

修剪背景图像

元素的类型

博学谷——让IT教学更简单，让IT学习更有效

标签

标签

元素类型的转换

相邻块元素垂直外边距的合并

嵌套块元素垂直外边距的合并

【阶段案例——制作音乐排行榜】

√

√

√

√

√

√

√

第六章 列表和超链接

学习单元

学习目标

浮动与定位 学时 6学时

◆ 掌握无序、有序及定义列表的使用，可以制作常见的网页模块。

◆ 掌握超链接标签的使用，能够使用超链接定义网页元素。

◆ 掌握CSS伪类，能够使用CSS伪类实现超链接特效。

知识点 了解

√

√

√

掌握

√

√

重点

√

√

√

√

√

√

√

难点

√

√

学习内容

无序列表