admin 管理员组文章数量: 1184232
2024年3月6日发(作者：二叉树的题目及答案)
《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
版权声明：本文标题：《HTML5+CSS3网站设计基础教程》课程标准 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709672376a543055.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
解锁家庭网络无限可能——轻松搞定Wi-Fi设置
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
Win10电脑连蓝牙耳机时的立体声无声问题，如何破解？
我是笔记本荣耀 MagicBook 16 Pro连接FreeBuds 4 只有hands free有声音而stereo没有查阅过网络资料都不行去荣耀授权点让你重装系统，无奈之下只好自己来了，这次集合我搜集到的所
从主机到路由器：简单步骤教你如何用电脑创造家庭无线网络环境
其实win7本身就自带无线热点的功能，按下面的方法设置。 开启windows 7的隐藏功能：虚拟WiFi和SoftAP（即虚拟无线AP），就可以让电脑变成无线路由器，实现共享上网，节省网费和路由器购买费。 以
不花钱也能享受高速网速：教你如何将电脑变成无线路由器
其实win7本身就自带无线热点的功能，按下面的方法设置。 开启windows 7的隐藏功能：虚拟WiFi和SoftAP（即虚拟无线AP），就可以让电脑变成无线路由器，实现共享上网，节省网费和路由器购买费。 以
Win11系统IP配置大揭秘，轻松搞定IP设置
说明：由于项目开发的需要，有时候要更改主机的ip地址来进行测试或进行合作开发，以下是修改主机ip地址的步骤。 1、选择此电脑（我的电脑），右击选择属性，进入如下面板选择网络与Internet，接着点击
为什么在校园网里，能登陆QQ，但浏览器就是不听话？
今天下午本来是打算来机房多看几篇博客顺便评论的，结果来了之后发现新装的win10系统说是激活失败，于是上网查了一个激活工具，然后下载下来激活（这个不是什么好的行为，大家一定要支持正版啊~），结果激活软件运行之后不仅系统没有激活成功，
Echarts+折线仪：你的CPUE监控新宠，一文教你如何玩转
【本文为转载文章】 CPU page <script type="textjavascript" >var myChart;var eCharts;var cpu_r = 100;
电脑屏幕自动翻转？用这些步骤马上解决 Adobe Flash 相关问题！
如下提供两种解决方案： 1.桌面--属性--设置--高级--选择你显卡的那一项,然后图形属性--旋转--180度就可以了； 2.一般pc支持倒转画面,你同时按住"Alt和Ctrl键"然后按键盘上的
告别卡顿，提升体验：优化Adobe Flash Player播放技巧
如下提供两种解决方案： 1.桌面--属性--设置--高级--选择你显卡的那一项,然后图形属性--旋转--180度就可以了； 2.一般pc支持倒转画面,你同时按住"Alt和Ctrl键"然后按键盘上的
打造高效家庭网络环境：路由器配置全面解析
一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。 二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用
Windows大招：快速掌握创建隐藏文件，让文件安全无痕，一招搞定！
简介 收集到以下一些在Windows系统下的一些将文件隐藏的方法和让文件无法被删除的方法,渗透中可以隐藏一些木马文件。 attrib隐藏文件 新建一个文件 命令行中执行attrib +a +
VSCode用户必学：自定义快捷键，实现新建文件夹的智能操作
实现目标在获取左侧项目栏文件夹焦点情况下 添加新建文件夹的快捷键 Shift + A 我本来是个atom忠实粉丝, 但是atom使用window10自带输入法在书写汉字时总是会出现首字母缺失的情况, 查了好久没
Adobe Flash Player的超实用技巧：SWF文件属性大揭秘
简介：本教程着重介绍如何查看和修改计算机操作系统中的文件属性，包括隐藏、只读、系统和存档等标志。文件属性对于控制文件可见性、可编辑性以及与其他系统组件的交互至关重要。通过本教程，用户可以学习如何有效地管理和保护自己的文件，例如设置文件
掌握文件属性：让你的SWF文件更强大
简介：本教程着重介绍如何查看和修改计算机操作系统中的文件属性，包括隐藏、只读、系统和存档等标志。文件属性对于控制文件可见性、可编辑性以及与其他系统组件的交互至关重要。通过本教程，用户可以学习如何有效地管理和保护自己的文件，例如设置文件
Windows隐藏文件恢复指南：找回你的文件大行动
显示隐藏文件的方法 打开文件资源管理器，点击顶部菜单栏的“查看”选项。在“显示隐藏”区域勾选“隐藏的项目”。此时所有隐藏文件和文件夹会以半透明图标显示，可直接访问或操作。 通过文件夹选项恢复 在文件资源管理器
优化网络环境：掌握Adobe Flash Player的带宽限制方法
注：以下内容转自不同的电脑教程第一章：WINXP全攻略一、优化启动设置（适用于家用版及专业版）1."我的电脑"->"属性"->"高级"
笔记本连无线网怎么都失败？实用攻略来帮你！
笔记本无线网络连接不上的解决方法 第一步：应检查无线网卡的驱动是否安装正确。右键点击“我的电脑”-属性-硬件-设备管理器，查看是否存在标有问号或叹号的网络设备，如果有，则说明无线网卡驱动安装不正确。使用金山卫士的“硬件检测”功
桌面图标下有阴影怎样去掉???
我在安装东西时突然出现了图标阴影,我在 爱好者博墅我的电脑-属性-高级-性能-设置-视觉效果 中的 爱好者博墅'i T9G l p+g自定义 中 把在桌面上为图标标签使用阴影 的复选框去掉后还有阴影
Windows XP 桌面图标阴影设置
以前版本的Windows在用自定义桌面的时候，图标的文字下面都有阴影（就是你的桌面颜色），影响了桌面的视觉效果。原来只能借助其他软件解决，但是性能不稳定，又占用系统资源。Windows XP帮你解决了这个问题！只要你打开电脑属性——先用
192.168.1.1的秘密通道：探索家庭网络的入口
虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的
发表评论