HTMLCSS课程标准.docx
《网页设计与制作》课程标准.doc
《网页设计与制作》课程标准前言：《网页设计与制作》是理实一体化课程，是计算机专业（软件与信息服务、数字媒体、计算机应用专业）的一门重要的专业必修课。
本课程定位于WEB技术开发工作岗位。
它是WEB前端技术开发的必备课程，在整个课程体系中具有重要的作用，一、课程的说明：通过本课程的学习，使学生了解网页设计技术的起源和发展、常用的网页制作软件及HTML语言，掌握运用Dreamweaver（以下简称DW）网页制作软件制作网页的方法，通过运用Photoshop图像处理软件和Flash动画制作软件，三个软件互相配合，完成网页设计与制作任务的方法。
为今后从事网页设计与制作、网站开发和管理奠定基础。
在网页设计的实践中重点培养团队协作、沟通交流能力，培养自主学习能力和探索创新能力。
二、课程内容与基本要求：该课程涉及的知识是网页设计人员必备的基本技能，职业活动与课程内容的对应关系如下：三、教学目标1、职业关键能力目标(1)掌握使用Photoshop进行图像处理的基本方法及操作技能(2)掌握DreamweaverCS5的基本知识及操作技能(3)掌握建立与管理站点的方法(4)掌握制作主要内容为文本的网页的方法(5)掌握在网页中插入与编辑图像的方法(6)掌握在网页中插入多媒体元素的方法(7)掌握表格处理与网页布局的方法(8)掌握创建超级链接的方法(9)掌握使用框架制作旅游网站的方法(10)掌握创建和使用模板的方法(11)掌握创建和使用库的方法(12)掌握在网页中添加AP Div的方法(13)掌握在网页中使用行为的方法(14)掌握HTML基础知识及通过代码修饰网页的方法(15)掌握使用CSS样式表修饰网页的方法(16)掌握动态网页的概念及简单动态网页的制作方法2、职业专门能力目标(1)通过完成相关的项目，掌握网页设计的基本工作流程。
(2)通过完成相关的项目，掌握网页设计常用工具的使用方法。
(3)通过完成相关的项目，掌握网页布局及美化的基本方法。
html+css课程结构与内容
一、课程结构1.1 前期准备- 课程简介- 学习目标- 所需基础知识1.2 HTML基础- 标签和属性- 文本排版- 图片和信息- 表单和输入1.3 CSS基础- 样式表及其引入 - 选择器和属性 - 盒模型- 布局和定位1.4 综合实战项目 - 实战项目介绍 - 项目需求分析 - 项目实施及展示二、课程内容2.1 前期准备在开始HTML+CSS课程学习之前，学员需要了解本课程的简介和学习目标，以及需要具备的基础知识。
对于初学者来说，有一定的计算机基础和对网页设计的基本了解可以更好地理解和运用课程知识。
2.2 HTML基础在HTML基础部分，学员将学习HTML的标签和属性的基本概念和用法，以及如何进行文本排版、插入图片和信息，创建表单和输入框等基本操作。
通过实际的案例演练和练习，学员将理解并掌握HTML 的基本语法和常用标签用法。
2.3 CSS基础在CSS的基础部分，学员将学习如何创建和引入样式表，如何使用选择器和属性来设置网页的样式，掌握盒模型的概念和运用，以及实现网页布局和定位的方法。
通过实例演练和练习，学员将掌握CSS的基本语法和常用属性的使用。
2.4 综合实战项目在课程的最后阶段，学员将参与一个综合实战项目，通过对项目需求的分析和实施，巩固并应用在课程中学到的HTML和CSS知识。
在实施过程中，学员将学会如何运用HTML和CSS来实现一个完整的网页设计，并将自己的作品展示出来，让老师和同学进行评价和交流。
三、课程特点3.1 理论与实践结合本课程注重理论与实践的结合，通过理论讲解和实际操作的演练，帮助学员更好地理解和掌握HTML和CSS的知识。
3.2 项目驱动学习课程设置了综合实战项目，以项目驱动学习，让学员在实践中巩固所学知识，提高动手能力和问题解决能力。
3.3 实用性强课程设置的内容和案例都是基于实际工作场景设计的，能够帮助学员更好地应用所学知识解决实际问题。
3.4 针对性强课程根据学员的学习需求和水平设置了不同难度的练习和实战项目，帮助不同水平的学员提高技能。
《HTML网页编程》课程标准
移动通信技术专业《HTML网页编程》课程标准课程编号：03160202编制日期：2019年3月20 BX X X X X X X 学院《HTML网页编程》课程标准课程名称：HTML网页编程适用专业：移动通信技术专业适用阶段：高职阶段_、学习领域定位本课程是移动通信专业基础能力课程，是一门必修课程。
网站伴随着网络的快速发展而快速兴起，作为上网的主要依托，由于人们使用网络的频繁而变得非常的重要。
由于企业需要通过网站呈现产品、服务、理念、文化，或向大众提供某种功能服务。
因此网页设计必须首先明确设计站点的目的和用户的需求，从而做出切实可行的设计方案。
因此，网页设计这门专业课就是为培养出具有现代移动通讯技术知识和能力的应用型人才这一目标服务的。
课程的任务是：具有初步的实践操作能力，会简单的网页制作与设计;能正确分析网页的工作原理、工作过程;掌握网页设计的制作和设计技能。
基于职业能力的培养,本课程所承担的具体任务为：(1)能根据彳壬务进行正确的分析，能进行网页和简单的设计，工作过程的分析。
(2 )熟悉网站的构成，掌握各个环节的运行。
(3 )掌握网页的组成、工作原理、特点及应用。
二、课程设计(一)、课程基本理念基于工作过程整合、序化课程内容，基于企业技能需求组织教学进程，以达到教中学、学中做、做中教的理论与实践循环一体化，通过模拟岗位体验工作，通过工作体验学习，从而突出学生职业素养和职业能力的培养。
1、与企业合作，课程内容满足IT企业和学生双方的需要。
通过聘请或引进企业专家,在校企合作、实践教学的基础上,通过学习情境和布置典型的工作任务,设计出适合于学生操作和学习的基于工作过程的教学内容。
并着眼于学生未来工作岗位和终身学习发展的需要，满足IT企业对岗位中基础知识、专业知识和新技术的发展要求。
2、教学做一体化，加强学生实践技能和与人协作、沟通能力的培养。
通过基于工作过程的职业技能训练体系，在模拟和真实的环境中，教学做一体化，以达到教中学、学中做、做中教的教学效果，培养学生的动手能力。
HTML5+CSS3课程标准
第1章 Web开发新时代1.1 HTML5概述1.1.1 HTML5新特性1.1.2 HTML5组织1.1.3 HTML5构成1.2 HTML5设计原理1.2.1 HTML开发历程1.2.2 HTML5开发动力1.2.3 HTML5设计理念1.3 编写第一个HTML5页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用HTML5编写简单的Web页面1.4 HTML5页面的特征1.4.1 使用HTML5结构化元素1.4.2 使用CSS美化HTML5文档第2章从HTML、XHTML到HTML5视频讲解：2小时2.1 HTML基础2.1.1 HTML简介2.1.2 HTML特性2.1.3 HTML结构2.1.4 HTML语法2.1.5 HTML标签2.1.6 HTML属性2.2 XHTML基础2.2.1 XHTML结构2.2.2 XHTML语法2.2.3 XHTML类型2.2.4 DTD解析2.2.5 命名空间2.3 HTML5基础2.3.1 HTML5语法2.3.2 HTML5元素2.3.3 HTML5增加及废除的属性2.3.4 HTML5全局属性2.3.5 HTML5其他功能第3章创建HTML5文档视频讲解：1小时13分钟3.1 认识HTML5文档结构3.2 HTML5元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战：使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战HTML5表单视频讲解：1小时08分钟4.1 新增的input输入类型4.1.1 email类型的应用4.1.2 url类型的应用4.1.3 number类型的应用4.1.4 range类型的应用4.1.5 日期检出器类型的应用4.1.6 search类型的应用4.1.7 tel类型的应用4.1.8 color类型的应用4.2 新增的input属性4.2.1 新增的autocomplete属性4.2.2 新增的autofocus属性4.2.3 新增的form属性4.2.4 新增的表单重写属性4.2.5 新增的height与width属性4.2.6 新增的list属性4.2.7 新增的min、max和step属性4.2.8 新增的multiple属性4.2.9 新增的pattern属性4.2.10 新增的placeholder属性4.2.11 新增的required属性4.3 新增的form元素4.3.1 新增的datalist元素4.3.2 新增的keygen元素4.3.3 新增的output元素4.4 新增的form属性4.4.1 新增的autocomplete属性4.4.2 新增的novalidate属性第5章实战HTML5画布视频讲解：2小时5.1 认识HTML5 canvas元素5.1.1 在页面中添加canvas元素5.1.2 Canvas如何绘制图形5.1.3 认识Canvas坐标5.1.4 何时不用Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复Canvas状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向Canvas中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5音频与视频视频讲解：50分钟6.1 HTML5多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用JavaScript检测音频格式支持情况6.2.2 用JavaScript检测视频格式支持情况6.3 在HTML5中播放音频6.3.1 认识audio元素6.3.2 播放音频6.4 在HTML5中播放视频6.4.1 认识video元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web存储视频讲解：1小时20分钟7.1 认识Web Storage7.1.1 Cookie存储机制的优缺点7.1.2 为什么要用Web Storage7.1.3 Web Storage的优缺点7.1.4 浏览器支持概述7.2 使用Web Storage7.2.1 检查浏览器的支持性7.2.2 设置和获取数据7.2.3 防止数据泄露7.2.4 Web Storage的其他用法7.2.5 Web Storage事件监测7.2.6 实例1：设计网页皮肤7.2.7 实例2：跟踪localStorage数据7.2.8 实例3：设计计数器7.2.9 综合应用：Web应用项目实时跟踪7.3 Web SQL数据库7.3.1 Web SQL数据库概述7.3.2 使用Web SQL数据库7.3.3 实例1：创建简单的本地数据库7.3.4 实例2：批量存储本地数据7.3.5 综合应用：Web Storage和Web SQL混合开发第8章离线应用视频讲解：23分钟8.1 HTML5离线应用概述8.1.1 为什么要学习HTML5离线应用8.1.2 浏览器支持概述8.2 HTML5离线应用详解8.2.1 解析manifest文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript接口实现8.2.6 离线存储事件监听8.3 实战1：缓存首页8.4 实战2：离线编辑内容8.5 实战3：离线跟踪第9章 Workers多线程处理视频讲解：1小时01分钟9.1 认识Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉Web Workers成员9.2 使用Web Workers9.2.1 检查浏览器支持性9.2.2 创建Web Workers9.2.3 与Web Workers通信9.2.4 使用Web Workers上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci数列9.3.6 使用多线程绘图9.4 综合应用：模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写worker.js9.4.4 与Web Workers通信第10章 Geolocation地理位置10.1 位置信息概述10.1.1 为什么要学习Geolocation 10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP定位10.1.5 GPS定位10.1.6 Wi-Fi定位10.1.7 手机定位10.1.8 自定义定位10.2 使用Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用position对象10.3 案例实战10.3.1 使用Google地图10.3.2 跟踪行走速度第11章 CSS3概述视频讲解：1小时01分钟11.1 回顾CSS11.1.1 CSS发展简史11.1.2 CSS 1.0和CSS 2.0概述11.1.3 CSS与DIV标记之缘11.1.4 CSS编码规范11.2 了解CSS3新增特性11.2.1 属性选择器11.2.2 RBGA 透明度11.2.3 多栏布局11.2.4 多背景图片11.2.5 字符串溢出11.2.6 块阴影与圆角阴影11.2.7 圆角11.2.8 边框图片11.2.9 形变11.3 CSS3前景展望11.3.1 CSS3的应用范围11.3.2 当前支持CSS3的浏览器11.4 案例实战：设计漂亮的表单第12章 CSS选择器视频讲解：34分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI伪类选择器12.3.1 认识常用UI伪类选择器12.3.2 案例实战12.4 其他选择器第13章文本、字体与颜色视频讲解：49分钟13.1 设计文本阴影13.1.1 定义text-shadow属性13.1.2 应用阴影效果13.1.3 综合实战：设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用RGBA颜色值13.3.2 使用HSL颜色值13.3.3 使用HSLA颜色值13.3.4 定义opacity属性13.3.5 定义transparent颜色值第14章背景和边框视频讲解：1小时09分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战：设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战：设计Windows7界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15章 2D变形视频讲解：31分钟15.1 认识transform15.2 2D变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战：设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16章设计动画视频讲解：1小时20分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战：设计Mac OS导航器16.2 3D动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战：设计图片翻转特效16.3 渐变效果16.3.1 设计Webkit渐变16.3.2 Webkit案例实战16.3.3 设计Gecko渐变16.3.4 Gecko案例实战16.3.5 设计IE渐变16.3.6 设计W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17章网页布局视频讲解：40分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战：设计多列网页第18章用户界面视频讲解：35分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用initial的情况第19章 CSS3其他新特性视频讲解：40分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用@font-face规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识Media Queries模块19.3.2 认识@media规则19.3.3 使用@media规则19.3.4 在网站中应用@media规则19.4 添加语音功能19.5 设计倒影第1章 Web开发新时代1.1 HTML5概述1.1.1 HTML5新特性1.1.2 HTML5组织1.1.3 HTML5构成1.2 HTML5设计原理1.2.1 HTML开发历程1.2.2 HTML5开发动力1.2.3 HTML5设计理念1.3 编写第一个HTML5页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用HTML5编写简单的Web页面1.4 HTML5页面的特征1.4.1 使用HTML5结构化元素1.4.2 使用CSS美化HTML5文档第2章从HTML、XHTML到HTML5视频讲解：2小时2.1 HTML基础2.1.1 HTML简介2.1.2 HTML特性2.1.3 HTML结构2.1.4 HTML语法2.1.5 HTML标签2.1.6 HTML属性2.2 XHTML基础2.2.1 XHTML结构2.2.2 XHTML语法2.2.3 XHTML类型2.2.4 DTD解析2.2.5 命名空间2.3 HTML5基础2.3.1 HTML5语法2.3.2 HTML5元素2.3.3 HTML5增加及废除的属性2.3.4 HTML5全局属性2.3.5 HTML5其他功能第3章创建HTML5文档视频讲解：1小时13分钟3.1 认识HTML5文档结构3.2 HTML5元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战：使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战HTML5表单视频讲解：1小时08分钟4.1 新增的input输入类型4.1.1 email类型的应用4.1.2 url类型的应用4.1.3 number类型的应用4.1.4 range类型的应用4.1.5 日期检出器类型的应用4.1.6 search类型的应用4.1.7 tel类型的应用4.1.8 color类型的应用4.2 新增的input属性4.2.1 新增的autocomplete属性4.2.2 新增的autofocus属性4.2.3 新增的form属性4.2.4 新增的表单重写属性4.2.5 新增的height与width属性4.2.6 新增的list属性4.2.7 新增的min、max和step属性4.2.8 新增的multiple属性4.2.9 新增的pattern属性4.2.10 新增的placeholder属性4.2.11 新增的required属性4.3 新增的form元素4.3.1 新增的datalist元素4.3.2 新增的keygen元素4.3.3 新增的output元素4.4 新增的form属性4.4.1 新增的autocomplete属性4.4.2 新增的novalidate属性第5章实战HTML5画布视频讲解：2小时5.1 认识HTML5 canvas元素5.1.1 在页面中添加canvas元素5.1.2 Canvas如何绘制图形5.1.3 认识Canvas坐标5.1.4 何时不用Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复Canvas状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向Canvas中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5音频与视频视频讲解：50分钟6.1 HTML5多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用JavaScript检测音频格式支持情况6.2.2 用JavaScript检测视频格式支持情况6.3 在HTML5中播放音频6.3.1 认识audio元素6.3.2 播放音频6.4 在HTML5中播放视频6.4.1 认识video元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web存储视频讲解：1小时20分钟7.1 认识Web Storage7.1.1 Cookie存储机制的优缺点7.1.2 为什么要用Web Storage7.1.3 Web Storage的优缺点7.1.4 浏览器支持概述7.2 使用Web Storage7.2.1 检查浏览器的支持性7.2.2 设置和获取数据7.2.3 防止数据泄露7.2.4 Web Storage的其他用法7.2.5 Web Storage事件监测7.2.6 实例1：设计网页皮肤7.2.7 实例2：跟踪localStorage数据7.2.8 实例3：设计计数器7.2.9 综合应用：Web应用项目实时跟踪7.3 Web SQL数据库7.3.1 Web SQL数据库概述7.3.2 使用Web SQL数据库7.3.3 实例1：创建简单的本地数据库7.3.4 实例2：批量存储本地数据7.3.5 综合应用：Web Storage和Web SQL混合开发第8章离线应用视频讲解：23分钟8.1 HTML5离线应用概述8.1.1 为什么要学习HTML5离线应用8.1.2 浏览器支持概述8.2 HTML5离线应用详解8.2.1 解析manifest文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript接口实现8.2.6 离线存储事件监听8.3 实战1：缓存首页8.4 实战2：离线编辑内容8.5 实战3：离线跟踪第9章 Workers多线程处理视频讲解：1小时01分钟9.1 认识Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉Web Workers成员9.2 使用Web Workers9.2.1 检查浏览器支持性9.2.2 创建Web Workers9.2.3 与Web Workers通信9.2.4 使用Web Workers上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci数列9.3.6 使用多线程绘图9.4 综合应用：模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写worker.js9.4.4 与Web Workers通信第10章 Geolocation地理位置10.1 位置信息概述10.1.1 为什么要学习Geolocation 10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP定位10.1.5 GPS定位10.1.6 Wi-Fi定位10.1.7 手机定位10.1.8 自定义定位10.2 使用Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用position对象10.3 案例实战10.3.1 使用Google地图10.3.2 跟踪行走速度第11章 CSS3概述视频讲解：1小时01分钟11.1 回顾CSS11.1.1 CSS发展简史11.1.2 CSS 1.0和CSS 2.0概述11.1.3 CSS与DIV标记之缘11.1.4 CSS编码规范11.2 了解CSS3新增特性11.2.1 属性选择器11.2.2 RBGA 透明度11.2.3 多栏布局11.2.4 多背景图片11.2.5 字符串溢出11.2.6 块阴影与圆角阴影11.2.7 圆角11.2.8 边框图片11.2.9 形变11.3 CSS3前景展望11.3.1 CSS3的应用范围11.3.2 当前支持CSS3的浏览器11.4 案例实战：设计漂亮的表单第12章 CSS选择器视频讲解：34分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI伪类选择器12.3.1 认识常用UI伪类选择器12.3.2 案例实战12.4 其他选择器第13章文本、字体与颜色视频讲解：49分钟13.1 设计文本阴影13.1.1 定义text-shadow属性13.1.2 应用阴影效果13.1.3 综合实战：设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用RGBA颜色值13.3.2 使用HSL颜色值13.3.3 使用HSLA颜色值13.3.4 定义opacity属性13.3.5 定义transparent颜色值第14章背景和边框视频讲解：1小时09分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战：设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战：设计Windows7界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15章 2D变形视频讲解：31分钟15.1 认识transform15.2 2D变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战：设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16章设计动画视频讲解：1小时20分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战：设计Mac OS导航器16.2 3D动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战：设计图片翻转特效16.3 渐变效果16.3.1 设计Webkit渐变16.3.2 Webkit案例实战16.3.3 设计Gecko渐变16.3.4 Gecko案例实战16.3.5 设计IE渐变16.3.6 设计W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17章网页布局视频讲解：40分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战：设计多列网页第18章用户界面视频讲解：35分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用initial的情况第19章 CSS3其他新特性视频讲解：40分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用@font-face规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识Media Queries模块19.3.2 认识@media规则19.3.3 使用@media规则19.3.4 在网站中应用@media规则19.4 添加语音功能19.5 设计倒影。
计算机应用技术专业《H5+CSS3》课程标准
《HTML5+CSS3》课程标准一、课程的性质该课程是软件与信息服务专业的一门专业核心课程。
该课程是一门具有很强的实践性和应用性的课程，主要培养学生面向基于HTML5+CSS开发跨平台Web应用HTML5工程师岗位的核心能力和职业素质；培养学生使用HTML5技术开发移动web应用，主要认识和掌握HTML5特性：语义特性、本地存储特性、设备兼容特性、性能与集成特性、连接特性、网页多媒体特性、三维、图形及特效特性、CSS3特性等。
其前导课程为《程序设计基础》、《网页制作基础》、《数据库SQL》和《JavaScript程序设计》二、课程设计理念（一）课程设置的依据该课程总体设计思路是以岗位面向为依据、以就业为导向、以能力培养为目标、以案例引领式教学为手段，依据当前HTML5的发展状况和web前端开发岗位所提出的新要求，既可以巩固前期所学web前端开发的理论知识和设计软件应用知识，还重在于给学生开拓新的专业知识面，认知一个新的设计领域--跨平台应用开发，从而拓展职业能力和就业选择面。
（二）课程内容确定依据该门课程的总学时为108。
以基于工作过程的课程开发理念为指导，以职业能力培养和职业素养养成为重点，根据技术领域和职业岗位（群）的任职要求，以学生就业为导向，在行业专家的指导下，对HTML5，web开发等专门化方向所涵盖的岗位进行任务与职业能力分析，以实际工作任务为引领，以创新能力培养为主线，将课程知识体系整合，在教学过程中注意体现学生设计和开发能力培养的循序渐进性。
在教学内容和方法上贯彻“技能培养为主，知识够用为度”的教学思想，旨在培养学生的创新意识，提高岗位实践能力和适应能力，保证学生专业能力、方法能力和社会能力的全面培养。
（三）课程开发思路根据高职教育的特点，按照学院“厚德强技”的校训，积极探索以实践能力考核为主的课程评价方法，从而提高学生的职业能力和就业竞争力，具体措施体现在以下几个方面：●基于典型工作过程分析，构建课程体系；●职业能力培养为核心，设计教学内容；●以提高学生职业能力和职业素养为目标，重视实践教学；●融合职业资格标准，推行双证书制；●校企合作，共建新型实践教学基地；●校企合作，形成实践技能课主要由企业兼职教师讲授的机制。
网页设计与制作HTMLCSS教学大纲
《网页设计与制作(HTML+CSS)》课程教学大纲（课程英文名称）课程编号：2学分：5学分学时：64学时（其中：讲课学时：45 上机学时：19 ）先修课程：计算机基础、计算机网络、计算机应用后续课程：UI设计javascript网页特效适用专业：信息及其计算机相关专业开课部门：计算机系一、课程的性质与目标《网页设计与制作(HTML+CSS)》是面向计算机相关专业的一门专业基础课，涉及计算机基础、互联网等内容，通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果、学会制作各种企业，门户，电商类网站。
二、课程的主要内容及基本要求第一章HTML与CSS网页设计概述（4学时）[知识点]➢Web的基础知识➢HTMLl简介➢CSS简介➢常用浏览器介绍➢Dreamweaver 工具使用➢利用Dreamweaver创建第一个页面[重点]➢HTML简介➢Dreamweaver工具使用[难点]➢Dreamweaver工具创建第一个页面[基本要求]➢了解HTML版本的发展历程➢掌握Dreamweaver工具的使用，能够使用Dreamweaver创建一个包含html结构和CSS样式的简单网页。
第二章 HTML入门（6学时）[知识点]➢HTML基本语法结构➢HTML 标记属性➢HTML 常用文本控制标记➢HTML 文本格式化标记➢HTML 图像标记➢HTML 相对路径和绝对路径➢HTML 图文混排技巧[重点]➢HTML基本语法结构➢HTML 常用文本控制标记➢HTML 图像标记➢HTML 相对路径和绝对路径[难点]➢HTML 标记属性的使用➢HTML 相对路径和绝对路径[基本要求]➢掌握HTML基本语法结构➢掌握HTML中常用的文本标记➢区分什么是相对路径和绝对路径➢掌握HTML图像标记的使用➢掌握图片混排常用技巧[阶段案例]使用HTML文本控制标记、HTML图像标记及相关标记的属性实现网页中常见的图文混排效果，如下图所示。
htmlcss课程设计模板
html css课程设计模板一、教学目标本课程的教学目标是使学生掌握HTML和CSS的基本知识，能够使用HTML和CSS创建简单的网页。
具体来说，知识目标包括了解HTML的基本结构、标签和属性，以及CSS的基本语法、选择器和样式规则。
技能目标包括能够使用HTML 和CSS编写网页代码，并能够通过实践项目来应用所学知识。
情感态度价值观目标包括培养学生的创新意识和团队协作能力，使学生能够独立思考并解决问题的能力。
二、教学内容根据课程目标，本课程的教学内容主要包括HTML和CSS两个部分。
教学大纲如下：1.HTML基本结构与标签：介绍HTML的基本结构，常用的标签及其功能。
2.CSS语法与选择器：介绍CSS的基本语法，选择器的使用方法。
3.盒子模型与布局：讲解盒子的概念，布局的方法和技巧。
4.响应式设计：介绍响应式设计的基本概念，使用CSS媒体查询实现响应式布局。
5.实践项目：通过实践项目，让学生综合运用所学知识制作网页。
三、教学方法为了激发学生的学习兴趣和主动性，本课程将采用多种教学方法。
包括：1.讲授法：讲解HTML和CSS的基本概念，让学生掌握基础知识。
2.案例分析法：分析实际案例，让学生了解HTML和CSS在实际应用中的作用。
3.实验法：让学生动手实践，培养学生的实际操作能力。
4.小组讨论法：分组讨论实践项目，培养学生的团队协作能力和创新意识。
四、教学资源为了支持教学内容和教学方法的实施，丰富学生的学习体验，我们将准备以下教学资源：1.教材：选用权威、实用的HTML和CSS教材，为学生提供系统的学习资料。
2.参考书：提供丰富的参考书籍，拓展学生的知识面。
3.多媒体资料：制作精美的PPT课件，直观地展示HTML和CSS的知识点。
4.实验设备：提供计算机实验室，让学生进行实践操作。
5.网络资源：利用互联网为学生提供更多的学习资源和实践项目。
五、教学评估本课程的评估方式包括平时表现、作业和考试三个部分。
csshtml课程设计
csshtml课程设计一、课程目标知识目标：1. 学生能理解HTML的基本结构和常用标签的功能，掌握CSS的基础语法和选择器。
2. 学生能够运用HTML和CSS创建和布局简单的网页，实现文本、图像、链接等基本元素的展示。
3. 学生了解HTML5和CSS3的新特性，并能够运用到实际项目中。
技能目标：1. 学生掌握使用HTML和CSS进行网页设计和布局的技能，能够独立构建静态网页。
2. 学生能够运用网页开发工具（如VS Code、Sublime Text等）进行代码编写和调试。
3. 学生学会运用浏览器开发者工具进行页面调试和优化，提高页面性能。
情感态度价值观目标：1. 培养学生对前端开发的兴趣和热情，激发他们主动探索新技术的欲望。
2. 培养学生的团队协作精神，让他们学会在项目合作中沟通、解决问题。
3. 培养学生的审美观念，让他们关注网页设计的美感和用户体验。
课程性质：本课程为信息技术课程，旨在让学生掌握HTML和CSS的基础知识，培养他们独立设计和制作网页的能力。
学生特点：六年级学生已具备一定的计算机操作基础，对网络和多媒体有较高的兴趣，好奇心强，但注意力容易分散。
教学要求：结合学生特点，课程设计应注重实践操作，以任务驱动法引导学生主动探究，同时关注个体差异，提供有针对性的指导。
通过小组合作、作品展示等形式，激发学生的学习兴趣和自信心。
教学过程中，注重培养学生的动手能力和创新能力，为后续学习打下坚实基础。
二、教学内容1. HTML基础：- 网页结构及基本标签：Doctype、html、head、body等；- 文本、图像、链接、列表等元素的创建与属性设置；- 表格、表单的使用及其属性；- HTML5新特性：语义标签、音频、视频、Canvas等。
2. CSS基础：- 选择器：标签、类、ID、属性等；- 布局属性：display、position、float等；- 盒子模型：margin、border、padding、width、height；- 文本样式：font、color、text-decoration等；- CSS3新特性：圆角、阴影、过渡、动画等。
《网页设计(HTML5+CSS3)》核心课程标准
《网页设计（HTML5+CSS3）》核心课程标准本课程是软件技术专业的核心课程，也是后续JavaScript程序设计与jQuery框架的基础课程，在Web前端开发中占有重要地位。
通过本课程的课堂教学和实践教学，使学生能够掌握网页设计的两大基础，HTML和CSS,具备常见门户网站、电商网站的设计与制作能力，培养学生科学的思维方法，灵活运用知识的能力和自主学习的能力，为后续网站开发课程的学习、网页制作员工作的胜任打下坚实的基础。
二、课程设计理念本课程强调对学生职业素养和Web前端编程能力的培养，按照理实一体、课内外互补、课堂教学与培优工程相结合的课程设计指导思想，以任务或项目为载体组织教学内容，采取讲练结合、微课教学、视频辅导、单元测试、赛练融合等多种教学形式和手段，突出学生的主体地位，在校内实训室完成所有教学环节，实现“教、学、做”的有机融合；通过班级讲授、团队学习、个体辅导、展示交流、技能大赛等手段，实现从模仿到应用到创新的高职学生递进式培养。
三、课程目标（一）总体目标本课程涉及网页基础、HTML5标记、CSS3样式、网页布局等内容。
通过本课程的学习，学生能够了解HTML5基本标签和CSS3常用样式，熟悉网页设计流程，掌握常见的网页布局效果，掌握一定的Web前端开发知识，学会制作各种企业、门户、电商类网站。
同时通过教学过程中的实际开发过程的规范要求强化学生的职业道德意识和职业素质养成意识，为学生后续课程学习夯实基础。
（二）具体目标1.能力目标了解Web前端程序员等相关职业岗位的工作职责；具有一定的网页设计与制作能力;具备良好的编程习惯和准确的语言表达能力；具有一定的科学思维方式和分析判断解决问题的能力；具有社会适应能力、沟通能力与自我学习能力；具有良好的职业道德与敬业精神，具有团队合作意识。
2.知识目标认识网页和网站,了解相关概念；熟悉ViSU阿StUdioCode和HbUilder的使用;熟练掌握HTML5基本标签;掌握常用H5表单控件并能熟练运用；理解CSS3样式规则及选择器，能合理使用CSS美化页面；理解CSS盒子模型、浮动和定位布局，并能应用到网页设计中；掌握HTML和CSS多媒体应用;掌握CSS3的变形、动画和转换；能达到“1+X”Web前端开发初级标准。
《HTML5+CSS3网站设计基础教程》课程标准
《HTML5+CSS3网页设计基础教程》课程标准第一部分、课程定位一、课程性质本课程是计算机应用专业一门专业必修课程二、课程性质与目标《HTML5+CSS3网站设计基础教程》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、变形与动画等内容。
通过本课程的学习，学生能够了解网页web发展历史及其未来方向，熟悉网页设计流程、掌握网络中常见的网页布局效果及变形和动画效果，学会制作各种企业、门户、电商类网站。
三、前导、后续课程（1）前导课程计算机应用基础（2）后续课程JavaScript编程、Vue.js、微信小程序开发第二部分、课程设计一、基本理念高职教育的集中实践教学环节需明确必要的理论知识的深化与知识层面的拓展，不能局限于单纯的技能训练。
单纯的技能训练不是提高高等职业教育的理想课程。
以能力的培养为重点，以就业为导向，培养学生具备职业岗位所需的职业能力，职业生涯发展所需的能力和终身学习的能力，实现一站式教学理念。
二、课程设计思路（1）以职业岗位和后续课程需求确定课程目标首先组建专业必修课、专业教师、企业专家三方人员组成的课程开发团队，进行课程服务专业的人才培养目标分析，确定计算机应用专业的岗位面向；进而确定本课程所织成的具体核心课程有哪些？同时结合行业对岗位任职的具体标准，确定课程的具体目标。
（2）依据职业标准，通过对所服务的后续课程和必修课程本身分析，以专业基础课与学习领域课程聚合点构建教学内容通过对职业标准进行剖析和本门课程所服务的后续课程本身进行分析，得出后续专业课程负载点与专业基础课程支撑点存在聚合，将这些聚合点作为教学内容选择、实训任务确定的依据。
（3）根据教学内容需求和学生学情的分析设计教学方法和手段根据教学内容需求，以及根据学生形象思维强、逻辑思维相对弱的现状，设计案例教学法、引导文教法等，应用项目应用设计等教学手段服务抽象的理论教学。
（4）以优质的教学资源和优秀的教学团队，为课程实施和后续课程服务提供保障。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
序号课程单元第1章 Web 开发新时代1.1 HTML5 概述1.1.1 HTML5 新特性1.1.2 HTML5 组织1.1.3 HTML5 构成1.2 HTML5 设计原理1.2.1 HTML 开发历程1.2.2 HTML5 开发动力1.2.3 HTML5 设计理念1.3 编写第一个 HTML5 页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用 HTML5编写简单的 Web 页面1.4 HTML5 页面的特征1.4.1 使用 HTML5结构化元素1.4.2 使用 CSS美化 HTML5 文档第2章从 HTML、XHTML 到HTML5视频讲解： 2小时2.1 HTML 基础2.1.1 HTML 简介2.1.2 HTML 特性2.1.3 HTML 结构2.1.4 HTML 语法2.1.5 HTML 标签2.1.6 HTML 属性2.2 XHTML 基础2.2.1 XHTML 结构2.2.2 XHTML 语法2.2.3 XHTML 类型2.2.4 DTD 解析2.2.5 命名空间2.3 HTML5 基础2.3.1 HTML5 语法2.3.2 HTML5 元素2.3.3 HTML5 增加及废除的属性2.3.4 HTML5 全局属性2.3.5 HTML5 其他功能第3章创建 HTML5 文档视频讲解： 1小时 13 分钟3.1 认识 HTML5文档结构3.2 HTML5 元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战：使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战 HTML5 表单视频讲解： 1小时 08 分钟4.1 新增的 input 输入类型4.1.1 email 类型的应用4.1.2 url 类型的应用4.1.3 number 类型的应用4.1.4 range 类型的应用4.1.5日期检出器类型的应用4.1.6 search 类型的应用4.1.7 tel 类型的应用4.1.8 color 类型的应用4.2 新增的 input 属性4.2.1新增的 autocomplete属性4.2.2新增的 autofocus 属性4.2.3新增的 form 属性4.2.4新增的表单重写属性4.2.5新增的 height 与 width 属性4.2.6新增的 list属性4.2.7新增的 min 、max 和 step 属性4.2.8新增的 multiple 属性4.2.9新增的 pattern 属性4.2.10新增的 placeholder 属性4.2.11新增的 required 属性4.3 新增的 form 元素4.3.1新增的 datalist 元素4.3.2新增的 keygen 元素4.3.3新增的 output 元素4.4 新增的 form 属性4.4.1新增的 autocomplete属性4.4.2新增的 novalidate 属性第5章实战 HTML5 画布视频讲解： 2小时5.1 认识 HTML5 canvas 元素5.1.1 在页面中添加 canvas 元素5.1.2 Canvas 如何绘制图形5.1.3 认识 Canvas坐标5.1.4 何时不用 Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复 Canvas 状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向 Canvas 中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5 音频与视频视频讲解： 50 分钟6.1 HTML5 多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用 JavaScript 检测音频格式支持情况6.2.2 用 JavaScript 检测视频格式支持情况6.3 在 HTML5 中播放音频6.3.1 认识 audio 元素6.3.2 播放音频6.4 在 HTML5 中播放视频6.4.1 认识 video 元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web 存储视频讲解： 1小时 20 分钟7.1 认识 Web Storage7.1.1 Cookie 存储机制的优缺点7.1.2 为什么要用 Web Storage7.1.3 Web Storage 的优缺点7.1.4 浏览器支持概述7.2 使用 Web Storage7.2.1检查浏览器的支持性7.2.2设置和获取数据7.2.3防止数据泄露7.2.4Web Storage的其他用法7.2.5Web Storage事件监测7.2.6实例 1：设计网页皮肤7.2.7实例 2：跟踪 localStorage 数据7.2.8实例 3：设计计数器7.2.9综合应用： Web 应用项目实时跟踪7.3 Web SQL 数据库7.3.1 Web SQL 数据库概述7.3.2 使用 Web SQL 数据库7.3.3 实例 1：创建简单的本地数据库7.3.4 实例 2：批量存储本地数据7.3.5 综合应用： Web Storage 和Web SQL 混合开发第8章离线应用视频讲解： 23 分钟8.1 HTML5 离线应用概述8.1.1 为什么要学习 HTML5 离线应用8.1.2 浏览器支持概述8.2 HTML5 离线应用详解8.2.1 解析 manifest 文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript 接口实现8.2.6 离线存储事件监听8.3 实战 1：缓存首页8.4 实战 2：离线编辑内容8.5 实战 3：离线跟踪第9章 Workers 多线程处理视频讲解： 1小时 01 分钟9.1 认识 Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉 Web Workers 成员9.2 使用 Web Workers9.2.1 检查浏览器支持性9.2.2 创建 Web Workers9.2.3 与 Web Workers 通信9.2.4 使用 Web Workers 上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci 数列9.3.6 使用多线程绘图9.4 综合应用：模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写 worker.js9.4.4 与 Web Workers 通信第10 章 Geolocation 地理位置10.1 位置信息概述10.1.1 为什么要学习 Geolocation10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP 定位10.1.5 GPS 定位10.1.6 Wi-Fi 定位10.1.7 手机定位10.1.8 自定义定位10.2 使用 Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用 position 对象10.3 案例实战10.3.1 使用 Google 地图10.3.2 跟踪行走速度第11 章 CSS3概述视频讲解： 1小时 01 分钟11.1 回顾 CSS11.1.1CSS 发展简史11.1.2CSS 1.0 和CSS 2.0概述11.1.3CSS 与 DIV 标记之缘11.1.4CSS 编码规范11.2 了解 CSS3新增特性11.2.1属性选择器11.2.2 RBGA 透明度11.2.3多栏布局11.2.4多背景图片11.2.5字符串溢出11.2.6块阴影与圆角阴影11.2.7圆角11.2.8边框图片11.2.9形变11.3 CSS3 前景展望11.3.1CSS3 的应用范围11.3.2 当前支持 CSS3的浏览器11.4 案例实战：设计漂亮的表单第12 章 CSS选择器视频讲解： 34 分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI 伪类选择器12.3.1 认识常用 UI 伪类选择器12.3.2 案例实战12.4 其他选择器第13 章文本、字体与颜色视频讲解： 49 分钟13.1 设计文本阴影13.1.1 定义 text-shadow 属性13.1.2 应用阴影效果13.1.3 综合实战：设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用 RGBA颜色值13.3.2 使用 HSL颜色值13.3.3 使用 HSLA颜色值13.3.4 定义 opacity 属性13.3.5 定义 transparent 颜色值第14 章背景和边框视频讲解： 1小时 09 分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战：设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战：设计 Windows7 界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15 章 2D 变形视频讲解： 31 分钟15.1 认识 transform15.2 2D 变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战：设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16 章设计动画视频讲解： 1小时 20 分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战：设计 Mac OS导航器16.2 3D 动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战：设计图片翻转特效16.3 渐变效果16.3.1 设计 Webkit 渐变16.3.2 Webkit案例实战16.3.3 设计 Gecko 渐变16.3.4 Gecko 案例实战16.3.5 设计 IE 渐变16.3.6 设计 W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17 章网页布局视频讲解： 40 分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战：设计多列网页第18 章用户界面视频讲解： 35 分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用 initial 的情况第19 章 CSS3其他新特性视频讲解： 40 分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用 @font-face 规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识 Media Queries 模块19.3.2 认识 @media 规则19.3.3 使用 @media 规则19.3.4 在网站中应用 @media 规则19.4 添加语音功能19.5 设计倒影学习任务参考学时第1章 Web 开发新时代1.1 HTML5 概述1.1.1 HTML5 新特性1.1.2 HTML5 组织1.1.3 HTML5 构成1.2 HTML5 设计原理1.2.1 HTML 开发历程1.2.2 HTML5 开发动力1.2.3 HTML5 设计理念1.3 编写第一个 HTML5 页面1.3.1 搭建上机练习环境1.3.2 检测浏览器是否支持1.3.3 使用 HTML5编写简单的 Web 页面1.4 HTML5 页面的特征1.4.1 使用 HTML5结构化元素1.4.2 使用 CSS美化 HTML5 文档第2章从 HTML、XHTML 到HTML5视频讲解： 2小时2.1 HTML 基础2.1.1 HTML 简介2.1.2 HTML 特性2.1.3 HTML 结构2.1.4 HTML 语法2.1.5 HTML 标签2.1.6 HTML 属性2.2 XHTML 基础2.2.1 XHTML 结构2.2.2 XHTML 语法2.2.3 XHTML 类型2.2.4 DTD 解析2.2.5 命名空间2.3 HTML5 基础2.3.1 HTML5 语法2.3.2 HTML5 元素2.3.3 HTML5 增加及废除的属性2.3.4 HTML5 全局属性2.3.5 HTML5 其他功能第3章创建 HTML5 文档视频讲解： 1小时 13 分钟3.1 认识 HTML5文档结构3.2 HTML5 元素分类3.3 构建主体内容3.3.1 标识文章3.3.2 给内容分段3.3.3 设计导航信息3.3.4 设计辅助信息3.3.5 设计微格式3.3.6 添加发布日期3.4 添加语义模块3.4.1 添加标题块3.4.2 给标题分组3.4.3 添加脚注块3.4.4 添加联系信息3.5 综合实战：使用HTML5设计博客主页3.5.1 设计大纲3.5.2 设计样式第4章实战 HTML5 表单视频讲解： 1小时 08 分钟4.1 新增的 input 输入类型4.1.1 email 类型的应用4.1.2 url 类型的应用4.1.3 number 类型的应用4.1.4 range 类型的应用4.1.5日期检出器类型的应用4.1.6 search 类型的应用4.1.7 tel 类型的应用4.1.8 color 类型的应用4.2 新增的 input 属性4.2.1新增的 autocomplete属性4.2.2新增的 autofocus 属性4.2.3新增的 form 属性4.2.4新增的表单重写属性4.2.5新增的 height 与 width 属性4.2.6新增的 list属性4.2.7新增的 min 、max 和 step 属性4.2.8新增的 multiple 属性4.2.9新增的 pattern 属性4.2.10新增的 placeholder 属性4.2.11新增的 required 属性4.3 新增的 form 元素4.3.1新增的 datalist 元素4.3.2新增的 keygen 元素4.3.3新增的 output 元素4.4 新增的 form 属性4.4.1新增的 autocomplete属性4.4.2新增的 novalidate 属性第5章实战 HTML5 画布视频讲解： 2小时5.1 认识 HTML5 canvas 元素5.1.1 在页面中添加 canvas元素5.1.2 Canvas 如何绘制图形5.1.3 认识 Canvas坐标5.1.4 何时不用 Canvas5.1.5 如果浏览器不支持Canvas5.1.6 检测浏览器支持5.2 绘制简单图形5.2.1 绘制直线5.2.2 绘制矩形5.2.3 绘制圆形5.2.4 绘制三角形5.2.5 清空画布5.3 绘制贝塞尔曲线5.3.1 绘制二次方贝塞尔曲线5.3.2 绘制三次方贝塞尔曲线5.4 图形的变换5.4.1 保存与恢复 Canvas 状态5.4.2 移动坐标空间5.4.3 旋转坐标空间5.4.4 缩放图形5.4.5 矩阵变换5.5 图形的组合与裁切5.5.1 图形的组合5.5.2 裁切路径5.6 更多的颜色和样式选项5.6.1 应用不同的线型5.6.2 绘制线性渐变5.6.3 绘制径向渐变5.6.4 绘制图案5.6.5 设置图形的透明度5.6.6 创建阴影5.7 绘制文字5.7.1 绘制填充文字5.7.2 文字相关属性5.7.3 绘制轮廓文字5.7.4 测量文字宽度5.8 操作与使用图像5.8.1 向 Canvas中引入图像5.8.2 改变图像大小5.8.3 创建图像切片第6章 HTML5 音频与视频视频讲解： 50 分钟6.1 HTML5 多媒体技术概述6.1.1 关于编解码器6.1.2 音频编解码器6.1.3 视频编解码器6.2 浏览器支持概述6.2.1 用 JavaScript 检测音频格式支持情况6.2.2 用 JavaScript 检测视频格式支持情况6.3 在 HTML5中播放音频6.3.1 认识 audio 元素6.3.2 播放音频6.4 在 HTML5中播放视频6.4.1 认识 video 元素6.4.2 播放视频6.5 音频与视频相关属性、方法与事件6.5.1 音频与视频相关属性6.5.2 音频与视频相关方法6.5.3 音频与视频相关事件6.6 综合实战6.6.1 用脚本控制音乐播放6.6.2 查看视频帧画面第7章 Web 存储视频讲解： 1小时 20 分钟7.1 认识 Web Storage7.1.1 Cookie 存储机制的优缺点7.1.2 为什么要用 Web Storage7.1.3 Web Storage 的优缺点7.1.4 浏览器支持概述7.2 使用 Web Storage7.2.1检查浏览器的支持性7.2.2设置和获取数据7.2.3防止数据泄露7.2.4Web Storage的其他用法7.2.5Web Storage事件监测7.2.6实例 1：设计网页皮肤7.2.7实例 2：跟踪 localStorage 数据7.2.8实例 3：设计计数器7.2.9综合应用： Web 应用项目实时跟踪7.3 Web SQL 数据库7.3.1 Web SQL 数据库概述7.3.2 使用 Web SQL 数据库7.3.3 实例 1：创建简单的本地数据库7.3.4 实例 2：批量存储本地数据7.3.5 综合应用： Web Storage 和Web SQL 混合开发第8章离线应用视频讲解： 23 分钟8.1 HTML5 离线应用概述8.1.1 为什么要学习 HTML5离线应用8.1.2 浏览器支持概述8.2 HTML5 离线应用详解8.2.1 解析 manifest 文件8.2.2 搭建离线应用程序8.2.3 检查浏览器是否支持8.2.4 离线缓存更新实现8.2.5 JavaScript 接口实现8.2.6 离线存储事件监听8.3 实战 1：缓存首页8.4 实战 2：离线编辑内容8.5 实战 3：离线跟踪第9章 Workers 多线程处理视频讲解： 1小时 01 分钟9.1 认识 Web Workers9.1.1 Web Workers概述9.1.2 浏览器支持概述9.1.3 熟悉 Web Workers 成员9.2 使用 Web Workers9.2.1 检查浏览器支持性9.2.2 创建 Web Workers9.2.3 与 Web Workers 通信9.2.4 使用 Web Workers 上机练习9.3 案例实战9.3.1 使用多线程实现后台运算9.3.2 在后台过滤值9.3.3 多任务并发处理9.3.4 在多线程之间通信9.3.5 使用线程技术计算Fibonacci 数列9.3.6 使用多线程绘图9.4 综合应用：模拟退火算法9.4.1 认识模拟退火算法9.4.2 编写应用主页面9.4.3 编写 worker.js9.4.4 与 Web Workers 通信第10 章 Geolocation 地理位置10.1 位置信息概述10.1.1 为什么要学习 Geolocation10.1.2 位置信息表示方式10.1.3 位置信息来源10.1.4 IP 定位10.1.5 GPS 定位10.1.6 Wi-Fi 定位10.1.7 手机定位10.1.8 自定义定位10.2 使用 Geolocation API10.2.1 检查浏览器支持性10.2.2 获取当前地理位置10.2.3 监视位置信息10.2.4 停止获取位置信息10.2.5 隐私保护10.2.6 处理位置信息10.2.7 使用 position 对象10.3 案例实战10.3.1 使用 Google 地图10.3.2 跟踪行走速度第11 章 CSS3概述视频讲解： 1小时 01 分钟11.1 回顾 CSS11.1.1CSS 发展简史11.1.2CSS 1.0 和CSS 2.0概述11.1.3CSS 与 DIV 标记之缘11.1.4CSS 编码规范11.2 了解 CSS3新增特性11.2.1属性选择器11.2.2 RBGA 透明度11.2.3多栏布局11.2.4多背景图片11.2.5字符串溢出11.2.6块阴影与圆角阴影11.2.7圆角11.2.8边框图片11.2.9形变11.3 CSS3 前景展望11.3.1CSS3 的应用范围11.3.2 当前支持 CSS3的浏览器11.4 案例实战：设计漂亮的表单第12 章 CSS选择器视频讲解： 34 分钟12.1 属性选择器12.1.1 认识属性选择器12.1.2 案例实战12.2 结构伪类选择器12.2.1 认识结构伪类选择器12.2.2 案例实战12.3 UI 伪类选择器12.3.1 认识常用 UI 伪类选择器12.3.2 案例实战12.4 其他选择器第13 章文本、字体与颜色视频讲解： 49 分钟13.1 设计文本阴影13.1.1 定义 text-shadow 属性13.1.2 应用阴影效果13.1.3 综合实战：设计黑客网站首页13.2 定义文本样式13.2.1 文本样式简介13.2.2 溢出文本13.2.3 文本换行13.3 设计颜色样式13.3.1 使用 RGBA颜色值13.3.2 使用 HSL颜色值13.3.3 使用 HSLA颜色值13.3.4 定义 opacity 属性13.3.5 定义 transparent 颜色值第14 章背景和边框视频讲解： 1小时 09 分钟14.1 设计多色边框14.1.1 用法详解14.1.2 案例实战14.2 设计边框背景14.2.1 用法详解14.2.2 案例实战14.3 设计圆角14.3.1 用法详解14.3.2 案例实战：设计椭圆图形14.4 设计阴影14.4.1 用法详解14.4.2 案例实战：设计 Windows7 界面效果14.5 设计背景14.5.1 定义背景坐标14.5.2 定义背景裁剪区域14.5.3 定义背景图像大小14.5.4 定义背景图像循环方式14.5.5 定义多背景图像第15 章 2D 变形视频讲解： 31 分钟15.1 认识 transform15.2 2D 变形15.2.1 旋转动画15.2.2 缩放动画15.2.3 移动动画15.2.4 倾斜动画15.2.5 变形动画15.2.6 案例实战：设计涂鸦墙15.3 自定义变形15.4 定义复杂变形第16 章设计动画视频讲解： 1小时 20 分钟16.1 平滑过渡16.1.1 定义过渡属性16.1.2 定义过渡时间16.1.3 定义过渡延迟时间16.1.4 定义过渡效果16.1.5 案例实战：设计 Mac OS导航器16.2 3D 动画16.2.1 定义动画名称16.2.2 定义动画时间16.2.3 定义动画播放方式16.2.4 定义动画延迟时间16.2.5 定义动画播放次数16.2.6 定义动画播放方向16.2.7 案例实战：设计图片翻转特效16.3 渐变效果16.3.1 设计 Webkit 渐变16.3.2 Webkit案例实战16.3.3 设计 Gecko 渐变16.3.4 Gecko 案例实战16.3.5 设计 IE 渐变16.3.6 设计 W3C渐变16.4 案例综合实战16.4.1 设计礼品盒16.4.2 设计折叠面板16.4.3 设计易拉罐16.4.4 设计光盘滑动动画16.4.5 设计下拉菜单16.4.6 设计精致按钮第17 章网页布局视频讲解： 40 分钟17.1 设计多列布局17.2 设置多列显示样式17.2.1 定义列宽17.2.2 定义列数17.2.3 定义列间距17.2.4 定义列边框样式17.2.5 定义跨列显示17.2.6 定义列高度17.2.7 定义打印列17.3 设计盒布局17.4 设置盒布局格式17.4.1 定义自适应宽度17.4.2 定义列显示顺序17.4.3 定义列排列方向17.4.4 定义模块大小自适应17.4.5 消除空白17.4.6 定义对齐方式17.5 综合实战：设计多列网页第18 章用户界面视频讲解： 35 分钟18.1 改变盒模型组成方式18.2 调节元素尺寸18.3 设计轮廓18.3.1 定义轮廓线18.3.2 定义轮廓线宽度18.3.3 定义轮廓线样式18.3.4 定义轮廓线颜色18.3.5 定义轮廓线位移18.4 设计导航18.4.1 定义导航顺序18.4.2 定义方向键控制顺序18.5 添加显示内容18.6 恢复默认样式18.6.1 取消元素样式18.6.2 慎用 initial 的情况第19 章 CSS3其他新特性视频讲解： 40 分钟19.1 溢出处理19.2 自定义字体类型19.2.1 使用 @font-face 规则19.2.2 开放字体19.3 定义设备类型19.3.1 认识 Media Queries 模块19.3.2 认识 @media 规则19.3.3 使用 @media 规则19.3.4 在网站中应用 @media 规则19.4 添加语音功能19.5 设计倒影。