admin 管理员组文章数量: 1184232
2024年3月6日发(作者：qq联系代码生成)
HTML5+CSS3网站设计基础教程课程教学大纲
课程英文名称
课程编号：0011
学 分：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文档头部相关标记
√
标题和段落标记
√
文本格式化标记
√
特殊字符标记
√
常用图像格式
√
图像标记
√
绝对路径和相对路径
√
创建超链接
√
锚点链接
√
√
第二章 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-last-child
n 选择器
√
√
:和:nth-last-of-type
n 选择器
√
:
√
:target选择器
√
:选择器
√
√
:选择器
√
√
链接伪类
√
第五章 CSS盒子模型
学习单元
CSS盒子模型
学时
8学时
1. 掌握盒子的相关属性,能够制作常见的盒子模型效果。
2. 掌握背景属性的设置方法,能够设置背景颜色和图像。
学习目标
3. 理解渐变属性的原理,能够设置渐变背景。
4. 熟悉CSS控制列表样式的方式,能够运用背景图像定义列表项目符号。
知识点
了解
掌握
重点
难点
认识盒子模型
√
√
盒子的宽与高
√
边框属性
学习内容
边距属性
√
√
box-shadow属性
√
√
box-sizing 属性
√
设置背景颜色
√
设置背景图像
√
背景与图片不透明度的设置
√
设置背景图像平铺
√
设置背景图像的位置
√
设置背景图像固定
√
设置背景图像的大小
√
设置背景的显示区域
√
设置背景图像的裁剪区域
√
设置多重背景图像
√
背景复合属性
√
线性渐变
√
径向渐变
√
重复渐变
√
第六章 浮动与定位
学习单元
浮动与定位
学时
8学时
1. 理解元素的浮动,能够为元素设置浮动样式。
学习目标
2. 熟悉清除浮动的方法,可以使用不同方法清除浮动。
3. 掌握元素的定位,能够为元素设置常见的定位模式。
知识点
了解
掌握
重点
难点
元素的浮动属性float
√
√
清除浮动
√
overflow属性
√
元素的定位属性
√
静态定位static
√
学习内容
相对定位relative
√
√
绝对定位absolute
√
√
固定定位fixed
√
z-index层叠等级属性
√
元素的类型
√
标记
√
元素的转换
√
第七章 表单的应用
学习单元
表单的应用
学时
8学时
1. 了解表单功能,能够快速创建表单。
学习目标
2. 掌握表单相关元素,能够准确定义不同的表单控件。
3. 掌握表单样式的控制,能够美化表单界面。
知识点
了解
掌握
重点
难点
表单的构成
√
创建表单
√
表单属性
√
Input元素的type属学习内容
性
√
√
Input元素的其他属性
√
WORDarea元素
√
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高级应用
学习单元
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属性
√
第十章 实战开发—制作电商网站首页面
学习单元
实战开发—制作电商网站首页面
学时
6学时
1. 掌握站点的建立,能够建立规范的站点。
学习目标
2. 完成首页面的制作,并能够实现简单的CSS3动画效果。
知识点
了解
掌握
重点
难点
建立站点
√
站点初始化设置
√
效果图分析
√
页面布局
学习内容
定义公共样式
√
√
制作头部、导航及视频内容
√
√
制作内容部分 新品
√
√
制作内容部分 试装
√
√
制作内容部分 评测
√
√
制作脚部 信息注册
及版权信息部分
√
…………………………………………………………………
五、学时分配
章目
第一章 初识HTML5
第二章 HTML5页面元素及属性
第三章 CSS3入门
第四章 CSS3选择器
第五章 CSS盒子模型
第六章 浮动与定位
第七章 表单的应用
第八章 多媒体技术
第九章 CSS3高级应用
第十章 实战开发—制作电商网站首页面
合计
讲课
6学时
4学时
5学时
5学时
5学时
5学时
5学时
4学时
5学时
3学时
上机
4学时
2学时
3学时
3学时
3学时
3学时
3学时
2学时
3学时
3学时
合计
10学时
6学时
8学时
8学时
8学时
8学时
8学时
6学时
8学时
6学时
47学时 29学时 76学时
六、考核模式与成绩评定办法
本课程为考试课程,期末考试采用百分制的闭卷考试模式。学生的考试成绩由平时成绩 30% 和期末考试 70% 组成,其中,平时成绩包括出勤 5% 、作业 5% 、上机成绩 20% 。
七、选用教材和主要参考书
本大纲是根据教材HTML5+CSS3网站设计基础教程所设计的。
参考书籍：
传智播客.网页设计与制作 HTML+CSS 中国铁道出版社.201408
传智播客.HTML+CSS+JavaScript网页制作案例教程人民邮电出版社.201508
八、大纲说明
本课程的授课模式为：课堂授课+上机,其中,课堂主要采用多媒体的方式进行授课,并且会通过测试题阶段测试学生的掌握程度；上机主要是编写程序,要求学生动手完成指定的程序设计或验证。
撰写人： 审定人：
批准人： 执行时间：
版权声明：本文标题：HTMLCSS网站设计基础教程教学大纲 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1709672084a543041.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
更多相关文章
Windows XP新手必学：轻松定制你的任务栏外观
1、在XP系统的任务栏属性里，开启显示“快速启动栏”鼠标右击电脑桌面底部的“任务栏”–》属性—》勾选√“显示快速启动” 2、点击桌面左下角的“开始”–》运行–》输入: regsvr32 n i:u shell3
掌握Ubuntu里的PDF打印神器——Adobe虚拟打印机
在windows下经常使用pdffactory或者MS Office自带的PDF打印机把一些网页文档等打印成pdf格式。在Linux下很多地方也需要这样一个工具，尤其是linux下的一些文档和windows下不能兼容时，把资料打印为p
掌握Vista激活密码：突破技术壁垒
陆涛夏琳告诉父母二人要结婚了周梅玉和夏春生也决定复婚一家终于团员了 米莱决定去美国继续深造米立雄和米莱妈妈决定去陪读虽然生意失败了但一家人永远一起最重要 陆涛夏琳、向南杨晓云领了结婚证经历诸多波折两对终于走到了一起 陆涛夏琳
掌握Vista激活之道：破解策略深入解析
陆涛夏琳告诉父母二人要结婚了周梅玉和夏春生也决定复婚一家终于团员了 米莱决定去美国继续深造米立雄和米莱妈妈决定去陪读虽然生意失败了但一家人永远一起最重要 陆涛夏琳、向南杨晓云领了结婚证经历诸多波折两对终于走到了一起 陆涛夏琳
为什么在校园网里，能登陆QQ，但浏览器就是不听话？
今天下午本来是打算来机房多看几篇博客顺便评论的，结果来了之后发现新装的win10系统说是激活失败，于是上网查了一个激活工具，然后下载下来激活（这个不是什么好的行为，大家一定要支持正版啊~），结果激活软件运行之后不仅系统没有激活成功，
校园内网的双面人生：登录QQ轻而易举，网页却成了难题！
今天下午本来是打算来机房多看几篇博客顺便评论的，结果来了之后发现新装的win10系统说是激活失败，于是上网查了一个激活工具，然后下载下来激活（这个不是什么好的行为，大家一定要支持正版啊~），结果激活软件运行之后不仅系统没有激活成功，
掌握Windows Vista Basic，从小白到小能手的进阶之路
Home将分为： Windows Starter 2007 （初级版本） Windows Vista Home Basic （初级家庭版）[还有专门针对欧洲市场的 Home Basic N ] Windows
从Flash到Adobe Flash Player：SWF文件的新起点
制面板大全在程序运行过程中启动控制面板的各个设置功能：var x:cardinal;begin{启动控制面板}x:=winexec('rundll32.exe shell32.dll,Con
Adobe Flash Player的超实用技巧：SWF文件属性大揭秘
简介：本教程着重介绍如何查看和修改计算机操作系统中的文件属性，包括隐藏、只读、系统和存档等标志。文件属性对于控制文件可见性、可编辑性以及与其他系统组件的交互至关重要。通过本教程，用户可以学习如何有效地管理和保护自己的文件，例如设置文件
C#与文件属性：操作指南与实践指南
简介：C#作为流行的编程语言，广泛应用于Windows应用、Web应用和游戏开发等领域。本文档“C# 文档操作FileProperties”深入探讨了如何在C#中处理文件属性，包括基本文件属性的读取、修改和创建，以及如何操作文件的元数
电脑没网？手机数据线来帮忙，瞬间连通网络！
如何用手机数据线连接电脑上网，相信这个问题是我们很多人热切关注的问题，虽然比起以前我们又多了4G网，但比起无线网，手机数据还是要慢很多，而与宽带网络相比较，无线网也还是有很多的不足之处。因此，为了给大家一个满意的答复，接下来我将仔细地
用手机数据线，轻松共享网络给电脑
转自：微点阅读（www.weidianyuedu.com）如何用手机数据线连接电脑上网，相信这个问题是我们很多人热切关注的问题，虽然比起以前我们又多了4G网，但比起无线网，手机数据还是要慢很多，而与宽带网络相比较，无线网
小白也能学会：Windows和Ubuntu双系统安装超详细教程
前言 由于工作所用的开发环境是linux的，所以决定把自己电脑装一个windowsubuntu双系统。Ubuntu不同版本的物理机安装流程都是一样的，而且极其简单，不要怕自己没装过把电脑整坏了，大不了连windows一起给它
制作Linux启动光盘？使用mkisofs轻松搞定ISO镜像
linux环境下使用mkisofs制作系统镜像ISO 1 ，打开linux环境，如centos，kylin10等环境，并挂载镜像到系统上。 [root@localhost ~]# mount devsr1 mntky
笔记本操作不再受扰！快速关闭触摸板步骤详解
很多笔记本的触摸板不好用，想要禁止，然后另外连接键盘鼠标使用，小编自己就是使用的笔记本禁用触摸板驱动，安装完重启电脑后，在电脑右下角任务栏上有个图标，点鼠标右键，选择设置--定点装置属性--禁用，就可以了，想用的时候就开启回来就行了。
桌面图标下面的阴影怎么去掉
电脑|属性|高级|性能项的 设置|自定义|在桌面上为图标标签使用阴影|打上勾|如果不行，再在桌面空白处右击|排列图标|在桌面上锁定web项目|把勾去掉可以尝试以下4种方法：1.右击“我的电脑”，依次
两台电脑用一根网线连接组成局域网共享传输文件_网站连接两台电脑传文件
两台电脑传输文件有很多方法，小的qq就解决了，稍微大点的可以通过安装的快传软件来达到目的，当然用u盘也是可以的。这都还好，那如果传输文件数量多或者大文件（超过百G的）的时候该怎么办呢，硬盘是一种，但因为是传输的中间介质，所以比较麻烦，
网站打不开怎么办，收藏以备不时之需_有的网站打不开怎么设置打开
DNS设置示范教程 部分地区有使用移动网络的小伙伴们吐槽无法访问部分网站的情况，同样的网站，使用电信和联通的用户就能正常访问。 这其实有很大几率是由于运营商的网络问题导致的，容易出现网站打不开的结果。 DNS
掌握192.168.1.1：家庭网络中的基础配置与管理
虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的
192.168.1.1的神奇世界：家庭网络中的私有地址
虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的
发表评论