《HTML5+CSS3网页设计与制作》课程教学大纲
（课程英文名称）
snapshotrepository
课程编号：
学分：5学分
学时：74学时（其中：讲课学时：50学时上机学时：24学时）
先修课程：计算机基础、计算机网络、计算机应用
后续课程：UI设计、JavaScript网页特效
适用专业：信息技术及其计算机相关专业
开课部门：计算机系
一、课程的性质与目标
《HTML5+CSS3网页设计与制作》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标
签、CSS样式、网页布局、变形与动画等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。该课程属于“1+X证书制度”Web前端的初级课程，通过本课程，能够为学习后面的前端知识夯实基础。
二、课程设计理念与思路
课程设计理念：课程的集中实践教学环节需明确必要的理论知识的生化与知识层面的拓展，不能局限于单纯的技能训练。单纯的技能训练不是提高高等职业教育的理想课程。以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念
课程设计思路：基于工作过程开发课程内容，以行动为导向进行教学内容设计，以学生为主体，以案例（项目）实训为手段，设计出理论学习与技能掌握相融合的课程内容体系。教学整体设计“以技能培养为目标，以案例（项目）任务实现为载体、理论学习与实践操作相结合”。
三、教学条件要求
开发工具：Dreamweaver CS6或其他代码编辑工具
四、课程的主要内容及基本要求
第一章HTML5+CSS3网页设计概述
学习单元HTML5+CSS3网页设计概述学时2学时
学习目标◆了解网页概念和组成。
◆理解HTML、CSS和JavaScript的功能和作用。
◆熟悉Dreamweaver工具的基本操作。
学习内容知识点了解掌握重点难点认识网页√
网页名词解释√
Web标准√
HTML简介√
CSS简介√
JavaScript简介√
网页的展示平台—浏览器√
认识Dreamweaver界面√
Dreamweaver初始化设置√
Dreamweaver基本操作√
【阶段案例—创建第一个
网页】
√
第二章初识HTML5
学习单元初识HTML5 学时6学时
学习目标◆了解HTML和HTML5的基本结构，能够区分两者的结构差异。5g影讯5g天线在线进入
◆熟悉HTML头部相关标记。
◆掌握HTML文本控制标记的用法，能够使用该标记定义文本。
◆掌握HTML图像标记的用法，能够自定义图像。
学习内容知识点了解掌握重点难点HTML5的优势√
HTML5全新的结构√
标签的分类√
标签的关系√
标签的属性√√HTML5文档头部相关标
签
√
页面格式化标签√
文本样式标签√
文本格式化标签√
time标签√
mark标签√
cite标签√
特殊字符标签√
常见图像格式√
图像标签<img /> √√
相对路径和绝对路径√√
【阶段案例—制作图文混
排新闻】
jetbrains clion√
第三章初识CSS3
轻量级linux发行版
学习单元初识CSS3 学时6学时
学习目标1.了解CSS3的发展历史以及主流浏览器的支持情况。
2.掌握CSS基础选择器，能够运用CSS选择器定义标签样式。
3.熟悉CSS文本样式属性，能够运用相应的属性定义文本样式。
4.理解CSS优先级，能够区分复合选择器权重的大小。
学习内容知识点了解掌握重点难点结构与表现分离√
CSS3的优势√
CSS样式规则√
引入CSS样式表√√CSS基础选择器√√CSS字体样式属性√
CSS文本外观属性√
CSS复合选择器√√CSS层叠性和继承性√
CSS优先级√
【阶段案例—制作活动通
知页面】
√
第四章CSS3选择器
学习单元CSS3选择器学时6学时
学习目标◆熟悉CSS3中新增加的属性选择器。
◆理解关系选择器的用法。
◆理解常用的结构化伪类选择器。
◆掌握伪元素选择器的用法。
学习内容知识点了解掌握重点难点
E[att^=value]属性选择器√
E[att$=value]属性选择器√
E[att*=value]属性选择器√
子代选择器√
相邻兄弟选择器√
:root选择器√
:not选择器√
:only-child 选择器√
:first-child和:last-child选
择器
学生个人网页html代码
√
:nth-child(n)
和:nth-last-child(n)选择器
switch游戏什么意思√
:nth-of-type(n)
和:nth-last-of-type(n)选择
器
√
:empty选择器√
:before选择器√
:
after选择器√
链接伪类√√
【阶段案例—制作招聘
页面】
√
第五章盒子模型
学习单元盒子模型学时8学时
学习目标◆掌握盒子的相关属性，能够制作常见的盒子模型效果。
◆掌握背景属性的设置方法，能够设置背景颜和图像。
◆理解渐变属性的原理，能够设置渐变背景。
◆掌握元素类型的分类，能够进行元素类型的转换。
学习内容知识点了解掌握重点难点认识盒子模型√
边框属性√
内边距属性√
外边距属性√
背景属性√√颜透明度√
圆角√√图片边框√
阴影√√渐变√
多背景图像√
修剪背景图像√
元素的类型√
<div>标签√
<span>标签√
元素类型的转换√√
相邻块元素垂直外边距的
合并
√
嵌套块元素垂直外边距的
合并
√
【阶段案例——制作音乐
排行榜】
√
第六章列表和超链接
学习单元浮动与定位学时6学时
学习目标◆掌握无序、有序及定义列表的使用，可以制作常见的网页模块。
◆掌握超链接标签的使用，能够使用超链接定义网页元素。
◆掌握CSS伪类，能够使用CSS伪类实现超链接特效。
学习内容知识点了解掌握重点难点无序列表<ul>√
有序列表<ol>√
定义列表<dl>√
列表嵌套的应用√
list-style-type属性√
list-style-image属性√
list-style-position属性√
list-style属性√
创建超链接√
锚点链接√√链接伪类控制超链接√√【阶段案例—制作新闻列
表】
√
第七章表格和表单
学习单元表格和表单学时8学时
学习目标◆掌握表格标签的应用，能够创建表格并添加表格样式。
◆理解表单的构成，可以快速创建表单。
◆掌握表单相关标签，能够创建具有相应功能的表单控件。
◆掌握表单样式，能够使用表单样式美化表单界面。
学习内容知识点了解掌握重点难点创建表格√
<table>标记的属性√
<tr>标记的属性√
<td>标记的属性√

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