HTML5+CSS3+JavaScript 网页设计实战 第一章
Web前端开发技术 (第3版)储久良1
3 ftp 4 mailto
文件传输协议 电子邮件地址
5 ldap 6 news 7 file
轻型目录访问协议搜索 Usenet新闻组 当地电脑或网上分享的文件
8 gopher
Internet Gopher Protocol (Internet 查找协议)
教育部高等学校软件工程专业教学指导委员会规划教材
括代码的可维护性、组件的易用性和浏览器兼容性等。
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 11
Web前端开发技术-HTML5、CSS3、JavaScript
1.3 Web前端开发技术
1.3.1 HTML HTML是SGML（Standard Generalized Markup
教育部高等学校软件工程专业教学指导委员会规划教材
第1章 Web前端开发技术综述
Page: 10
1.2 Web前端开发工程师职业需求
Web前端开发技术-HTML5、CSS3、JavaScript
我国互联网行业的发展呈现迅猛的增长势头，对网站开发、 设计制作的人才需求随之大量增加。前端开发和后台开发人员的 比例为1：1，而在我国目前依旧在1：3以下，人才缺口较大。
Language，标准通用标记语言）下的一个应用(也称为一个子集) ，也是一种标准规范，它通过标记符号来标记要显示的网页中的 各个部分。而SGML是一种定义电子文档结构和描述其内容的国 际标准语言，是所有电子文档标记语言的起源。
HTML是构成Web页面(Page)的基础。 HTML文档：用来描述网页，由HTML 标记和纯文本构成文 本文件。不同于纯文本文件（不含HTML标记）。
协议类型://服务器地址（端口号）/ 路径/文件名 http://info.cern.ch/www20/0002 /kexuetansuo_1 2385/index.shtml
习题答案-HTML5+CSS3+JavaScript 网页设计案例开发-吕云翔-清华大学出版社
习题答案第一章1.学习HTML/CSS/JavaScript的使用通常要准备哪些工具？IDE主要有：Sublime, VS code, Dreamweaver, Atom2.HTML中<!DOCTYPE html>、<html> 、<head> 、<title>、<body>、<h1> 、<p> 标签的基本含义是什么？<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
它是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。
如果添加html，标明使用的是HTML5的版本。
<html> 此元素可告知浏览器其自身是一个 HTML 文档。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。
<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
<title> 元素可定义文档的标题。
<body> 元素定义文档的主体,包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
<h1> 标签定义一级标题。
<p> 标签定义段落。
3.现代网页设计思路经常将网页分成哪三个层次？主要有：结构层、表示层、行为层。
结构层（structural layer）由HTML或XHTML之类的标记语言负责创建。
标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。
表示层（presentation layer）由CSS负责创建，对“如何显示有关内容”的问题做出了回答。
行为层（behavior layer）负责“内容应该如何对事件做出反应”这一问题。
这是 Javascript 语言和 DOM 主宰的领域。
《Web前端开发技术——HTML5、CSS3、JavaScript(第3版)》教学大纲
Web前端开发技术(Web客户端编程)学分：3.5 学时：56 (28时理论/28时上机)一、课程的性质、地位与任务《Web前端开发技术》（又名“Web客户端编程”）课程是计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体、物联网工程等专业的一门专业课程，也是其他计算机相关专业的普及型课程，通过对Web前端三大主流开发技术学习和研究，让学生理解和掌握HTML5、CSS3、JavaScript等脚本语言的相关知识，通过项目实践培养学生开发和设计Web站点的基本操作技能和工作岗位适应能力。
二、课程的教学目标与基本要求本课程教学基本要求是让学生理解Web前端开发与设计的基本原则、Web网站的目录结构定义、主流页面布局方法、导航菜单制作、图文排版、页面交互等方面的基础知识。
掌握网站规划、设计、制作、管理、发布的相关技术及Web前端设计的操作技能；并熟练运用HTML中的文字、链接、列表、表格、表单、图像、多媒体、框架标记及属性设计出框架网页、表格与表单网页、多媒体动态网页；掌握使用DIV+CSS结合技术进行网页布局的基本方法。
掌握JavaScript脚本语言的基本语法知识，HTML中JavaScript程序的嵌入方法，理解对象的概念及使用JavaScript来进行开发、维护、管理和设置Web应用程序；掌握综合网站设计和发布的基本流程和方法。
本课程的教学目标是让学生理解HTML5、CSS3、JavaScript三大脚本语言的基本语法，掌握常用的Web页面布局技术，理解并熟练应用JavaScript常用的对象的属性与方法，熟练地使用DOM 技术编写页面交互的客户端程序，通过项目实训，培养学生Web页面布局和页面交互设计初步能力。
三、课程内容（重点△，难点★）1 Web前端开发技术综述1.1 Web概述1.1.1 了解Web起源1.1.2 理解Web特点1.1.3理解Web工作原理1.1.4 掌握Web相关概念，掌握URL构成、Web服务器、超链接基本概念。
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 设计倒影。
《Web前端开发课件(包含HTML5、CSS3、JavaScript)》
事件处理
2
选取和内容修改，以实现动态的页面 效果。
学习JavaScript中的事件对象、事件
类型和事件处理函数，以实现交互式
的页面行为。
3
事件委托
了解使用事件委托来提高事件处理效 率和减少内存占用。
JavaScript的Ajax技术与JSON格式
Ajax技术
学习使用JavaScript的Ajax技 术在网页中实现异步数据加载 和交互。
JavaScript的基础语法
1
操作符和表达式
2
掌握常见的JavaScript操作符和表达
式，以编写有效的代码。
3
变量和数据类型
学习如何声明变量和理解JavaScript 中的常见数据类型。
条件语句与循环语句
深入理解JavaScript中的条件语句和 循环语句，以实现复杂的逻辑控制。
JavaScrip变换
学习使用CSS过渡和变换属性创建平 滑的过渡和动态效果。
CSS3的响应式设计与F lex bo x
1 响应式设计
了解响应式设计的原理和实 践，以适应不同设备和屏幕 尺寸。
2 Flexbox布局
深入掌握Flexbox布局模型， 以实现灵活的自适应页面布 局。
3 媒体查询
学习使用媒体查询来根据不同的设备条件应用不同的CSS样式。
1
表单
学习HTML5表单元素的新特性和增强
媒体元素
2
功能，如表单验证和输入类型。
了解如何使用HTML5的音频和视频元
素来嵌入和控制媒体内容。
3
Canvas
学习使用HTML5的Canvas元素创建 可交互的图形和动画。
CSS3的新特性与选择器
HTML+CSS+JavaScript网站开发实用技术第1章
1.1 互联网的访问过程
IP地址和域名 我们要浏览服务器上的资源，必须知道服务器在 网络中的地址，这是通过IP地址来实现的。为了 实现IP地址的易理解、易识别，又引入了域名的 概念。 IP地址是识别互联网上计算机和网络设备的标识 。 域名是IP地址的一种符号化表示，域名通过域名 解析系统（Domain Name System，DNS ）保证每台主机的域名与IP地址一一对应。
1.7 建立站点
1.7.3创建站点 （1）在本地计算机上创建要用于存储站点文件的 本地文件夹e:\e_learning，文件夹结构根据网 站需要设计，将e:\e_learning作为本地根文件 夹。 （2）在Dreamweaver窗口中执行[站点]/[新 建站点]命令。输入用于存储站点文件的本地文件 夹的地址即可。
命令[查看]/[源文件]，可在浏览器中查看这个网页的 HTML语言描述
1.3 网站设计中的一些基本概念
静态网页是指在浏览器中运行，不需要到后台数 据库检索数据、不含有程序的纯HTML格式的网 页文件，其文件后缀一般为.html、.htm、 .shtml等。 动态网页是指网页文件中除了包含HTML标记， 而且还包含需要在服务器上执行的程序代码。动 态网页需要后台数据库与Web服务器交互，利用 数据库实现数据更新和查询服务。动态网页扩展 名一般是.asp、.jsp、.php等。
1.3 网站设计中的一些基本概念
1．网站即Website，也称作站点，是指在互联网 上，根据一定的规则，使用HTML语言编写的用于 展示内容的网页的集合。在本地计算机上，网站体 现为一组文件夹。 网站由域名、网站空间、网页3部分组成。 2. 网页实际上是用HTML语言编写的文本文件。在 浏览网页时，浏览器将HTML语言翻译成用户看到 的网页。
HTML+CSS+JavaScript网页制作(Web前端开发)(第3版)课时授课计划
教学组织形式
讲解、示范、边讲边练
作业
备注
第7章使用CSS布局页面
7.1 Div+CSS布局技术概述144
7.1.1认识Div+CSS布局144
7.1.2正确理解Web标准145
7.2 Div的嵌套布局145
7.2.1将页面用Div分块145
7.2.2案例——制作爱心包装活动发布页面146
7.3常见的CSS布局样式149
1.掌握Div嵌套布局的方法；
2.掌握常见的CSS布局样式；
3.掌握使用CSS布局制作综合案例页面的技术。
培养学生对网页、网站概念的认识，培养学生的相互沟通能力和团队协作精神。
能力训练任务
教材案例与习题
教学重点
教学难点
1.使用Div嵌套布局制作基本的页面。
2.使用CSS布局制作综合案例页面。
教学方法、手段
3.2.1 details元素和summary元素46
3.2.2 progress元素47
3.3表格48
3.3.1表格的结构48
3.3.2表格的基本语法48
3.3.3表格的属性49
3.3.4不规范表格51
3.3.5表格数据的分组52
3.3.6案例——使用表格布局爱心包装产品展示页面54
3.4表单55
7.3.1两列布局样式149
7.3.2三列布局样式149
7.4综合案例——制作爱心社区页面150
课时教学计划
教师姓名
时数
8
日期
班级
上课地点
课程（学习领域）名称
章节
第8章JavaScript语言基础
单元主要教学内容
数据类型、表达式、程序结构、函数、对象
HTML5+CSS3网页设计与制作—教学大纲
《HTML5+CSS3网页设计与制作》课程教学大纲（课程英文名称）课程编号：学分：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的基本结构，能够区分两者的结构差异。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网站的组成
DNS域名解析
DNS（Domain Name System，域名系统），是互联网 （Internet）上作为域名和IP地址相互映射的一个分布式数据库， 能够使用户更方便的访问互联网，而不用去记住能够被机器直 接读取的IP地址。 DNS（域名系统）在互联网中扮演着非常重要的角色，可以不 夸张的说，离开该系统互联网将会彻底乱套。
<!DOCTYPE html> <html lang="en"> <head> <!-- …… --> </head> <body> <!-- …… --> </body> </html>
HTML网页
HTMLLeabharlann 页头部 网页头部中包含的标签是页面的标题、序言、说明等内容，它本身不 作为内容来显示，但影响网页显示的效果。 网页头部中最常用的标签是标题标签和meta标签，其中标题标签用于 定义网页的标题，其内容显示在网页窗口的标题栏中；而meta标签可 以被浏览器用作书签和收藏的清单。 另外，还可以在网页头部设置文档标题和其它在网页中不显示的信息， 例如：方向（direction）、语言代码（Language Code）、指定字典 中的元信息、等等。
HTML网页
HTML网页结构
HTML网页由一个<html>标签来开始，再由一个</html>标签来结束。 在HTML网页内部由“头”（Head）和“主体”（Body）两部分所组 成。其中，“头”部由一个<head>标签来开始，再由一个</head>标 签来结束，用于提供关于网页的信息；“主体”部分由一个<body>标 签来开始，再由一个</body>标签来结束，用于提供网页的具体内容。
员需要花费非常大的力气才能设计出来的界面效果，对于HTML5来说
可谓是易如反掌。
HTML5初步
HTML5新特性
语义特性
• HTML5赋予了网页更好的意义和结构，更加丰富的标签，增加了对微数据 与微格式等方面的支持，将真正形成以数据驱动的Web应用。
本地存储特性
• 基于HTML5开发的网页应用拥有更短的启动时间和更快的联网速度，这全 是因为HTML5具有的APP Cache、以及本地存储功能。
• IIS服务器与ASP和语言 • Tomcat服务器与JSP语言 • Nginx服务器与PHP语言
IIS、Tomcat和Nginx是目前非常流行的轻量级Web服务器，这 三款Web服务器也全部支持HTML网页。
HTML网页
HTML网页介绍
HTML（Hyper-Text Markup Language，超文本标签语言）网 页，就是我们常说的超文本标签语言网页。 而所谓“超文本”，就是指页面内可以包含图片、链接，甚至 音乐、程序等非文字元素。
HTML网页
HTML网页主体
网页主体部分用于显示网站的具体内容，其包含的HTML标签也很多。
<body> <h1>HTML网页 - 主体（Body）</h1> <p>HTML网页 - 主体（Body）</p> </body>
HTML5初步
HTML5介绍
HTML5是万维网的核心语言、标准通用标签语言下的一个应用超文本 标签语言（HTML）的第五次重大修改版本。 目前，国外支持HTML5的主流浏览器包括Firefox（火狐浏览器）、 IE9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera、等等； 国内支持HTML 5的浏览器包括傲游浏览器、360浏览器、搜狗浏览器、 QQ浏览器、猎豹浏览器、等等，不过国内的很多浏览器的内核都是基 于Firefox、Chrome或IE开发的。 HTML5的最大优势就是开发移动端应用。最初，移动端应用的开发人
网站的组成
网站程序与数据库
我们简单列举几个常用的网站程序与数据库相搭配组合。
• ASP语言与Access数据库 • 语言与MSSQL数据 • JSP语言与Oracle数据库 • JSP语言与DB2数据库 • PHP语言与MySQL数据库
网站的组成
Web服务器
网站有了空间、程序和数据库，基本就算完成了。但还差最关 键的一部分才能让网站跑起来，这个就是Web服务器。
网站的组成
域名
域名是由一串用点分隔的字母组成的互联网（Internet）上某一 个网站的名称，相当于网站的地址。一个标准的域名由三部分 组成，包括网络名、域名主体和域名后缀。
网站的组成
网站空间
网站空间（Website Host），简单来说可以理解为存放网站内 容（包括网页、文件、数据库、图片、动画、多媒体资源等） 的空间。 一般意义上，网站空间通常也称为虚拟主机空间，大多数的中 小企业网站都不会自己架设服务器，而是选择以虚拟主机空间 作为放置网站内容的网站空间。 而大型企业的专业网站，虚拟主机空间就不适用了，通常会购 买单独的服务器作为网站空间，其安全性能很高、且网站访问 速度也快，自然成本也会成倍的增长。
HTML网页
HTML网页头部
<head> <meta charset="UTF-8"> <meta name="Generator" content="WebStorm"> <meta name="Author" content="KING"> <meta name="Keywords" content="HTML HEAD"> <meta name="Description" content="HTML Page"> <title>HTML网页 - 头部（Head）</title> </head>
HTML开发工具与HTML5网页实例
文本编辑器 EditPlus编辑器 Sublime Text 3编辑器 WebStorm开发平台 DreamWeaver开发平台
课程小结
• • • • • 网站的组成 HTML网页 HTML5初步 网页开发编辑工具概览 课程小结
Thanks
HTML5+CSS3+JavaScript 网页设计实战
第一章 网站与HTML网页
课程内容
• • • • •
网站的组成 HTML网页 HTML5初步 网页开发编辑工具概览 课程小结
网站的组成
网站与网页
网站（Website）或称万维网，是指在因特网（Internet）上依 据一定的规则所创建的、用于展示特定内容的、由相关网页及 图片、动画、视频等多媒体元素的集合。 网页（Webpage）则是构成网站的主体元素，一个网站通常由 一个或多个网页所组成，且各个网页间均有相应的逻辑关系， 网站其实是由网页组成的一个有机整体。 通常我们讲的网页就是HTML网页，HTML的英文全拼是HyperText Markup Language，即超文本标签语言或超文本链接标示 语言。
网页多媒体特性
• HTML5支持网页端的Audio、Video等多媒体功能，可与网站自带的影音多 媒体功能互为助力。
三维、图形及特效特性
• HTML5支持基于SVG、Canvas、WebGL及CSS3的3D功能，这些功能会 在浏览器中呈现出相当绚丽的视觉效果。
HTML开发工具与HTML5网页实例