HTML5+CSS3零基础特训班

【学习目标】
让你掌握HTML5和CSS3知识体系及UI设计、经典布局等必备技能

【授课对象】
对编程感兴趣的你
无基础无经验的你
想要从零开始学习HTML5和CSS3的你
学生/在职人员均可，职业不限

【教材说明】
教学内容主要涉及：HTML5的布局和框架、表单、视频和音频、Canvas、Web 存储、可编辑内容、拖放等，课程将会带你感受真实的HTML5+CSS3开发场景，推荐希望零基础转行前端工程师的同学学习。

2、课程：H5搭建第一个商业化主页（下）

1、主页的需求分析和设计（一）

2、主页的需求分析和设计（二）

3、HTML搭建（一）

4、HTML搭建（二）

5、Header部分CSS（一）

6、Header部分CSS（二）

7、Header部分CSS（三）

8、Header部分CSS（四）

9、Header部分CSS（五）

10、Header部分CSS（六）

11、Banner部分CSS

12、Content部分CSS （一）

13、Content部分CSS （二）

14、Content部分CSS （三）

15、Content部分CSS （四）

16、Content部分CSS （五）

17、Footer部分CSS（一）

18、Footer部分CSS（二）

3、课程：HTML5简介、布局、框架和表单

1、HTML简介（一）

2、HTML简介（二）

3、XHTML简介

4、HTML5简介（一）

5、HTML5简介（二）

6、HTML5的文档结构（一）

7、HTML5的文档结构（二）

8、HTML5的文档结构（三）

9、元素分类：结构性、级块性、行内语义性、交互性元素

10、构建主体内容

11、添加语义模块

12、用HTML5改造页面

13、表单—input类型

14、HTML5支持的input类型（一）

15、HTML5支持的input类型（二）

16、Input的新增属性

17、Form的新增属性

4、课程：音频、视频与画布

1、音频编解码（一）

2、音频编解码（二）

3、浏览器支持情况

4、播放音频

5、用JS控制音乐

6、视频编解码

7、浏览器支持情况

8、播放视频

9、Canvas简介

10、绘制图形（一）

11、绘制图形（二）

12、绘制曲线

13、图形变换（一）

14、图形变换（二）

15、图形变换（三）

16、图形组合与裁切

17、绘制图像

18、绘制文字

5、课程：Web存储、拖放

1、简述

2、本地存储、cookie vs Web Storage（一）

3、本地存储、cookie vs Web Storage（二）

4、浏览器支持情况（一）

5、浏览器支持情况（二）

6、Local Storage的使用

7、Session Storage兼容性

8、Web Storage事件

9、示例一：网页皮肤

10、示例二：跟踪Local Storsge数据（一）

11、示例二：跟踪Local Storsge数据（二）

12、示例二：跟踪Local Storsge数据（三）

13、示例二：跟踪Local Storsge数据（四）

14、WebSQL数据库

15、示例三：访问数据库

16、可编辑区域

17、拖拽

6、课程：CSS3介绍、选择器、权重计算

1、简述

2、CSS发展史

3、CSS基础知识（一）

4、CSS基础知识（二）

5、标签选择器

6、ID选择器

7、类选择器

8、伪类选择器（一）

9、伪类选择器（二）

10、伪对象选择器

11、属性选择器

12、属性选择器

13、分组选择器和通用选择器

14、选择器的应用哲学

15、演示文档的引用

16、权重计算

17、CSS属性缩写（一）

18、CSS属性缩写（二）

19、CSS单位

7、课程：盒子模型、浮动、定位、经典布局（上）

1、简介

2、什么是盒子模型

3、非块元素的盒模型

4、外边距

5、行内元素的外边距

6、块状元素、浮动元素、绝对元素的外边距

7、内边距及其性质

8、边框、宽和高、IE5.5中的宽和高

9、网页布局的一般问题及三种基本形式

10、浮动（一）

11、浮动（一）

12、浮动（二）

8、课程：盒子模型、浮动、定位、经典布局（下）

1、水平错位问题、定位

2、静态定位、绝对定位

3、相对定位、固定定位

4、定位的参照对象——包含块

5、利用包含块达到窗口居中效果

6、绝对定位中的坐标值

7、定位层叠、相对定位的坐标值

8、IE6中select控件的bug

9、嵌套层叠

10、层叠包含框

11、兼容IE和非IE的嵌套层叠问题

12、示例

9、课程：文字、图片背景、变形

1、简述

2、字体类型、大小

3、字体颜色、粗细、斜体

4、字体修饰、对齐方式、字间距、行间距、词间距、缩进

5、图片边框、大小

6、图片的横向、纵向对齐

7、文字环绕图片、背景颜色、背景图片

8、列表项符号、列表项图片符号

9、文字阴影

10、文字溢出、颜色与透明

11、形变、Transform

12、旋转、平移、缩放、倾斜

13、定义复杂形变

10、课程：第十讲 项目实战（上）

1、简介

2、怎么实现动画（一）

3、怎么实现动画（二）

4、做一个有动画的网页

5、技术栈

6、响应式布局

7、创建网页引用框架（一）

8、创建网页引用框架（二）

9、导航条HTML编写（一）

10、导航条HTML编写（二）

11、导航条CSS编写（一）

12、导航条CSS编写（二）

13、导航条logo、电话动态画编写

14、导航条菜单动画编写（一）

15、导航条菜单动画编写（二）

16、导航条响应式布局（一）

17、导航条响应式布局（二）

18、导航条响应式布局（三）

11、课程：项目实战（下）

1、Banner HTML编写

2、Banner CSS编写（一）

3、Banner CSS编写（二）

4、Banner 动画编写

5、Banner 响应式布局

6、Welcome部分HTML编写

7、Welcome部分CSS编写

8、Figure部分HTML编写

9、Figure部分CSS编写（一）

10、Figure部分CSS编写（二）

11、Figure部分CSS编写（三）

12、Service部分HTML编写

13、Service部分CSS编写（一）

14、Service部分CSS编写（二）

15、总结