《HTML5+CSS3网站设计基础教程》课程教学大纲
（课程英文名称）
课程编号：201601210011
学    分：5学分
学    时：76学时  （其中：讲课学时：47学时  上机学时：26学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI设计、 JavaScript网页特效
适用专业：信息技术及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
二、课程设计理念与思路
课程设计理念：高职教育的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计除理论学习与技能掌握相融合的课程内容体系。教学整体设计“以职业技能培养为目标，以案例（项目）任务实现为载体、理论学习与时间操作相结合”。
三、教学条件要求
开发工具：Dreamweaver CS6
四、课程的主要内容及基本要求
第一章  初识HTML5
学习单元
初识HTML5
学时
10学时
学习目标
1. 了解HTML5发展历程
2. 理解HTML5浏览器支持情况
3. 熟悉HTML5基本语法,掌握HTML5语法新特性。
4. 掌握HTML5相关标记及属性，能够制作简单的网页页面。
学习内容
知识点
了解
掌握
重点
难点
HTML5发展历史
√
HTML5的优势
√
HTML5浏览器支持情况
√
创建第一个HTML5页面
√
HTML5文档基本格式
√
HTML5语法
√
HTML标记
√
标记的属性
√
HTML5文档头部相关标记
√
标题和段落标记
√
文本格式化标记
√
特殊字符标记
√
常用图像格式
√
图像标记<img/>
√
绝对路径和相对路径
√
创建超链接
√
锚点链接
√
√
第二章  HTML5页面元素及属性
学习单元
HTML5页面元素及属性
学时
6学时
学习目标
1. 掌握结构元素的使用，可以使页面分区更明确。
2. 理解分组元素的使用，能够建立简单的标题组。
3. 掌握页面交互元素的使用，能够实现简单的交互效果。
4. 理解文本层次语义元素，能够在页面中突出所标记的文本内容。
5. 掌握全局属性的应用，能够使页面元素实现相应的操作。
学习内容
知识点
了解
掌握
重点
难点
ul元素
√
ol元素
√
dl元素
√
列表的嵌套应用
√
√
header元素
√
nav元素
√
article元素
√
section元素
√
footer元素
√
figure和figcaption元素
√
hgroup元素
√
details和summary元素
√
progress元素 
√
meter元素
√
time元素
√
mark元素
√
cite元素
√
draggable属性
√
hidden属性
√
spellcheck属性
√
contenteditable属性
√
第三章  CSS3入门
学习单元
CSS3入门
学时
8学时
学习目标
1. 了解CSS3的发展历史以及主流浏览器的支持情况。
2. 掌握CSS基础选择器，能够运用CSS选择器定义标记样式。
3. 熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。
4. 理解CSS优先级，能够区分复合选择器权重的大小。
学习内容
知识点
了解
掌握
重点
难点
CSS3概述
√
CSS3发展历史
√
CSS3浏览器支持情况
√
CSS样式规则
√
引入CSS样式表
√
CSS基础选择器
√
字体样式属性
√
√
文本外观属性
√
√
CSS层叠性和继承性
√
CSS优先级
√
√
第四章  CSS3选择器
学习单元
CSS3选择器
学时
8学时
学习目标
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学时
学习目标
1. 掌握盒子的相关属性，能够制作常见的盒子模型效果。
2. 掌握背景属性的设置方法，能够设置背景颜和图像。
3. 理解渐变属性的原理，能够设置渐变背景。
4. 熟悉CSS控制列表样式的方式，能够运用背景图像定义列表项目符号。
学习内容
知识点
了解
掌握
重点
难点
认识盒子模型
√
<div>标记
√
盒子的宽与高
√
边框属性
√
边距属性
√
box-shadow属性
√
√
box-sizing 属性
√
设置背景颜
√
设置背景图像
√
背景与图片不透明度的设置
√
设置背景图像平铺
√
设置背景图像的位置
√
设置背景图像固定
√
设置背景图像的大小
√
设置背景的显示区域
√
设置背景图像的裁剪区域
√
设置多重背景图像
√
背景复合属性
√
线性渐变
√
径向渐变
√
重复渐变
√
第六章  浮动与定位
学习单元
浮动与定位
学时
8学时
学习目标
1. 理解元素的浮动，能够为元素设置浮动样式。
2. 熟悉清除浮动的方法，可以使用不同方法清除浮动。
3. 掌握元素的定位，能够为元素设置常见的定位模式。
学习内容
知识点
了解
掌握
重点
难点
元素的浮动属性float
√
√
清除浮动
√
overflow属性
√
元素的定位属性
√
静态定位static
√
相对定位relative
√
√
绝对定位absolute
√
√
固定定位fixed
√
z-index层叠等级属性
√
元素的类型
√
<span>标记
√
元素的转换
√
第七章  表单的应用
学习单元
表单的应用
学时
8学时
学习目标
1. 了解表单功能，能够快速创建表单。
2. 掌握表单相关元素，能够准确定义不同的表单控件。
3. 掌握表单样式的控制，能够美化表单界面。
学习内容
知识点
了解
掌握
重点
难点
表单的构成
√
创建表单
√
表单属性
√
Input元素的type属性
√
√
Input元素的其他属性
√
textarea元素
√
select元素
√
datalist元素
√
keygen元素
√
output元素
√
CSS控制表单样式
√
√
第八章  多媒体技术 
学习单元
多媒体技术 
学时
6学时
学习目标
1. 熟悉HTML5多媒体特性。
2. 了解HTML5支持的音频和视频格式。
3. 掌握HTML5中视频的相关属性，能够在HTML5页面中添加视频文件。
4. 掌握HTML5中音频的相关属性，能够在HTML5页面中添加音频文件。
5. 了解HTML5中视频、音频的一些常见操作，并能够应用到网页制作中。
学习内容
知识点
了解
掌握
重点
难点
HTML5多媒体的特性
√
视频和音频编解码器
√
多媒体的格式
√
支持视频和音频的浏览器
√
在HTML5中嵌入视频
√
√
在HTML5中嵌入音频
√
√
音视频中的source元素
√
调用网页多媒体文件
√
CSS控制视频的宽高
√
视频和音频的方法和事件
√
HTML5音视频发展趋势
√
第九章  CSS3高级应用 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。