第1部分 了解网页设计基础知识

第1天 网页与网站基础知识

1.1认识网页和网站

1.1.1什么是网页

1.1.2什么是网站

1.2网页的相关概念

1.2.1浏览器

1.2.2网页与HTML

1.2.3URL、域名与IP地址

1.2.4网站上传和下载

1.3网页的HTML构成

1.3.1文档标记

1.3.2头部标记

1.3.3主体标记

1.4HTML常用标记

1.4.1链接标记〈LINK〉

1.4.2段落标记〈P〉

1.4.3通用块标记〈DIV〉

1.4.4行内标记〈SPAN〉

1.4.5元数据标记〈META〉

1.4.6图像标记〈IMG〉

1.4.7框架容器标记〈FRAMESET〉

1.4.8子框架标记〈FRAME〉

1.4.9表格标记〈TABLE〉

1.4.10浮动帧标记〈Iframe〉

1.4.11滚动标记〈marquee〉

1.5技能训练1——制作日程表

1.6技能训练2——保存整站

第2天 认识Web新面孔——HTML 5新增元素与属性速览

2.1新增的主体结构元素

2.1.1section元素

2.1.2article元素

2.1.3aside元素

2.1.4nav元素

2.2新增的非主体结构元素

2.2.1header元素

2.2.2hgroup元素

2.2.3footer元素

2.2.4figure元素

2.3新增的其他元素

2.3.1新增input元素的类型

2.3.2其他元素

2.4新增的属性和废除的属性

2.4.1新增的表单属性

2.4.2新增的链接相关属性

2.4.3新增的其他属性

2.4.4废除的属性

2.5新增的全局属性

2.5.1contentEditable属性

2.5.2designMode属性

2.5.3hidden属性

2.5.4spellcheck属性

2.5.5tabIndex属性

第3天 读懂样式表密码——网页设计中的CSS 3

3.1认识CSS 3

3.1.1CSS 3简介

3.1.2CSS 3发展历史

3.1.3浏览器与CSS 3

3.2样式表的基本用法

3.2.1在HTML中插入样式表

3.2.2单独的链接CSS文件

3.3CSS 3新增的选择器

3.3.1属性选择器

3.3.2结构伪类选择器

3.3.3UI元素状态伪类选择器

3.4技能训练——制作彩色标题

第2部分 使用HTML 5的高级应用

第4天 网页将变得更加活泼——网页表单技术应用

4.1新增HTML5表单

4.1.1基本表单元素

4.1.2高级表单元素

4.1.3新增表单元素

4.2新增表单属性

4.2.1autocomplete属性

4.2.2min.max和step属性

4.2.3multiple属性

4.2.4placeholder属性

4.2.5required属性

4.3技能训练——创建用户注册页面

第5天 让页面从此告别单调——网页多媒体应用

5.1音/视频容器与视频编/解码器

5.1.1视频容器

5.1.2音频和视频编/解码器

5.1.3audio和video元素的浏览器支持情况

5.1.4在HTML 4和HTML 5中播放多媒体的异同

5.2属性与方法

5.2.1理解媒体元素

5.2.2使用audio元素

5.2.3使用video元素

5.3事件触发机制

5.3.1事件概述

5.3.2事件处理应用

5.4技能训练——为网页添加背景音乐

第6天 网页中的北斗星——获取地理位置

6.1Geolocation API获取地理位置

6.1.1地理定位的原理

6.1.2地理定位的方法

6.1.3指定纬度和经度坐标

6.1.4如何获取位置信息

6.2技能训练——在网页中调用百度地图

第7天 通信不再是件难事儿——Web通信新技术

7.1跨文档消息传输

7.1.1跨文档消息传输的基本知识

7.1.2跨文档通信应用测试

7.2Web Sockets API

7.2.1Web Sockets通信基础

7.2.2服务器端使用Web Sockets API

7.2.3客户端使用Web Sockets API

7.3技能训练——编写简单的Web Socket服务器

第8天 把数据放至客户端——本地存储技术

8.1认识Web Storage

8.2使用HTML 5 Web Storage API

8.2.1sessionStorage对象应用

8.2.2localStorage对象应用

8.2.3Web Storage API的其他操作

8.3在本地建立数据库

8.3.1本地数据库概述

8.3.2用executeSql来插入数据

8.3.3使用transaction方法处理事件

8.4技能训练——制作简单的Web留言本

第9天 让通信更顺畅——线程处理

9.1Web Worker概述

9.2线程中常用的变量、函数与类

9.3与线程进行数据交互

9.4线程嵌套

9.4.1技能训练1——单线程嵌套

9.4.2技能训练2——多个子线程中的数据交互

第10天 浏览页面更快捷——构建离线应用程序

10.1HTML 5离线应用程序

10.1.1本地缓存

10.1.2浏览器网页缓存与本地缓存的区别

10.1.3目前浏览器对Web离线应用的支持情况

10.1.4支持离线行为

10.2了解manifest（清单）文件

10.3了解applicationCache API

10.4技能训练——离线定位跟踪

第3部分 使用CSS 3控制网页样式

第11天 网页上温暖的光芒——CSS 3控制网页文本样式

11.1CSS 3文字样式

11.1.1定义文字的颜色

11.1.2定义文字的字体

11.1.3定义文字的字号

11.1.4加粗字体

11.1.5定义文字的风格

11.1.6文字的阴影效果

11.1.7控制溢出文本

11.1.8控制换行

11.1.9字体复合属性

11.1.10文字修饰效果

11.2CSS 3段落文字

11.2.1设置字符间隔

11.2.2设置单词间隔

11.2.3水平对齐方式

11.2.4垂直对齐方式

11.2.5文本缩进

11.2.6文本行高

11.3技能训练——网页图文混排效果

第12天 同一张图却有着不一样的风景——CSS 3控制网页图像样式

12.1图片缩放

12.1.1通过标记设置图片大小

12.1.2使用CSS 3中的width和height

12.1.3使用CSS 3中的max-width和max-height

12.2设置图片的边框

12.3图片的对齐方式

12.3.1横向对齐方式

12.3.2纵向对齐方式

12.4图文混排效果

12.4.1设置图片与文字间距

12.4.2文字环绕效果

12.5技能训练——酒店宣传单

第13天 不可思议的杰作——CSS 3控制表格、表单与菜单样式

13.1CSS 3与表格

13.1.1表格的基本样式

13.1.2表格边框宽度

13.1.3表格边框颜色

13.1.4技能训练1——隔行变色

13.1.5技能训练2——鼠标悬浮变色表格

13.2CSS 3与表单

13.2.1美化表单中的元素

13.2.2美化下拉菜单

13.2.3美化提交按钮

13.2.4技能训练3——美化注册表单

13.2.5技能训练4——美化登录表单

13.3CSS 3与菜单

13.3.1美化无序列表

13.3.2美化有序列表

13.3.3图片列表

13.3.4列表缩进

13.3.5无须表格的菜单

13.3.6菜单的横竖转换

13.4技能训练5——制作soso导航栏

第14天 风景这边独好——CSS 3控制鼠标与超链接样式

14.1鼠标特效

14.1.1如何控制鼠标箭头

14.1.2鼠标变换效果

14.2超链接特效

14.2.1改变超链接基本样式

14.2.2设置超链接背景图

14.2.3超链接按钮效果

14.3技能训练1——制作图片鼠标放置特效

14.4技能训练2——制作图片超链接

第15天 让一切趋近于完美——CSS 3滤镜样式应用

15.1什么是CSS滤镜

15.2通道（Alpha）

15.3模糊（Blur）

15.4透明色（Chroma）

15.5翻转变换（Flip）

15.6光晕（Glow）

15.7灰度（Gray）

15.8反色（Invert）

15.9遮罩（Mask）

15.10阴影（Shadow）

15.11 X射线（X-ray）

15.12图像切换（RevealTrans）

15.13波浪（Wave）

15.14渐隐渐现（BlendTrans）

15.15 立体阴影（DropShadow）

15.16灯光滤镜（Light）

第16天 创造力不再是神话——CSS 3完善的网页美化设计

16.1增强的边框属性

16.1.1 border-color属性

16.1.2 border-image属性

16.2增强的背景图像属性

16.2.1 background属性

16.2.2 background-origin属性

16.2.3 background-clip属性

16.2.4 background-size属性

16.2.5 overflow-x和overflow-y属性

16.3增强的其他属性

16.3.1 border-radius属性

16.3.2 box-shadow属性

16.3.3 box-sizing属性

16.3.4 resize属性

16.3.5 outline属性

16.3.6 nav-index属性

16.3.7 content属性

第4部分 HTML 5+CSS 3综合实战

第17天 服务类网站设计

17.1网站规划与分析

17.1.1网站框架设计

17.1.2网站栏目划分

17.1.3网站模块划分

17.1.4网站色彩搭配

17.2修改样式表确定网站风格

17.2.1修改网站通用样式

17.2.2修改网站布局样式

17.3借用其他网站优秀模块

17.3.1导航条模块实现

17.3.2首页主体布局模块实现

17.3.3网页特效显示模块实现

第18天 休闲旅游类网站设计

18.1休闲旅游类网站主页规划

18.1.1旅游网站主页配色规划

18.1.2网页整体架构布局规划

18.1.3用DIV+CSS布局网页框架

18.2制作网站的步骤

18.2.1使用HTML 5设计网站

18.2.2定义网站CSS样式

18.2.3设计页面头部模块

18.2.4设计页面中间部分模块

18.2.5设计页面底部模块

18.2.6微调网站细节并预览

第19天 时尚音乐类网站设计

19.1时尚音乐类网站的构思布局

19.1.1设计分析

19.1.2排版架构

19.2制作网站的步骤

19.2.1页头部分

19.2.2左侧内容列表

19.2.3中间内容列表

19.2.4右侧内容列表

19.2.5页脚部分

19.3完善网站的效果

19.3.1页面内容主体调整

19.3.2页面整体调整

第20天 商业门户类网站设计

20.1商业门户类网站整体设计

20.1.1颜色应用分析

20.1.2架构布局分析

20.2制作网站的步骤

20.2.1网页整体样式插入

20.2.2网页局部样式

20.2.3顶部模块样式代码分析

20.2.4中间主体代码分析

20.2.5底部模块分析

20.3完善网站的效果

20.3.1部分内容调整

20.3.2模块调整

20.3.3调整后预览测试

第21天 网页设计模块化重组秘籍

21.1网站类型分析与重组

21.2网站建站特点分析

21.2.1用户群分析

21.2.2建站设计分析

21.3网站设计布局

21.3.1整体布局设计分析

21.3.2各模块化设计分析

21.3.3颜色搭配分析

21.4网站制作详细步骤

21.4.1CSS样式表分析

21.4.2网页头部设计分析

21.4.3主体第一通栏

21.4.4主体第二通栏

21.4.5主体第三通栏

21.4.6网页底部模块分析