第1章 Internet和Web基础

1.1 Internet和Web

Internet

Internet的诞生

Internet的发展

Web的诞生

第一个图形化浏览器

各种技术的聚合

1.2 Web标准和无障碍访问

W3C推荐标准

Web标准和无障碍访问

无障碍访问和法律

Web通用设计

1.3 网上的信息

信息和可靠性

有道德地使用网上信息的道德使用

1.4 浏览器和服务器

网络概述

客户端／服务器模型

1.5 Internet协议

电子邮件协议

超文本传输协议

文件传输协议

IP地址

1.6 统一资源标识符（URI）和域名

URI和URL

域名

1.7 HTML概述

什么是HTML

什么是XML

什么是XHTML

HTML5——HTML的最新版本

1.8 网页幕后揭秘

文档类型定义（DTD）

网页模板

html元素

页头部分

主体部分

1.9 第一个网页

动手实作1.1

创建文件夹

保存文件

测试网页

复习和练习

复习题

动手练习

Web研究

聚焦Web设计

第2章 HTML基础

2.1 标题元素

动手实作2.1

HTML5更多的标题选项

2.2 段落元素

动手实作2.2

对齐

2.3 换行和水平标尺

换行元素

动手实作2.3

水平标尺元素

动手实作2.4

2.4 块引用元素

动手实作2.5

2.5 短语元素

2.6 有序列表

type,start和reversed属性

动手实作2.6

2.7 无序列表

动手实作2.7

2.8 描述列表

动手实作2.8

2.9 特殊字符

动手实作2.9

2.10 HTML语法校验

动手实作2.10

2.11 结构性元素

div元素

HTML5结构性元素

header元素

nav元素

footer 元素

动手实作2.11

2.12 锚元素

动手实作2.12

链接目标

绝对链接

相对链接

block anchor

2.13 练习使用链接

站点地图

动手实作2.13

2.14 电子邮件链接

动手实作2.14

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第3章 网页设计基础

3.1 为目标受众设计

浏览器友好性

屏幕分辨率

3.2 网站组织

分级式组织

线性组织

随机组织

3.3 视觉设计原则

重复：在整个设计中重复视觉元素

对比：添加视觉刺激和吸引注意力

近似：分组相关项目

对齐：对齐元素实现视觉上的统一

3.4 提供无障碍访问

无障碍设计的受益者

无障碍设计有助于提高在搜索引擎中的排名

法律规定

无障碍设计的热潮

3.5 文本的使用

文本设计的注意事项

3.6 Web调色板

十六进制颜色值

Web安全颜色

无障碍设计和颜色

3.7 颜色的运用

面向儿童

面向年轻人

面向所有人

面向老年人

3.8 使用图形和多媒体

文件大小和图片尺寸

抗锯齿／锯齿化文本的问题

只使用必要的多媒体

提供替代文本

3.9 更多设计上的考虑

感觉到的加载时间

第一屏

适当留白

水平滚动

3.10 导航设计

网站要易于导航

导航栏

面包屑导航

图片导航

动态导航

站点地图

站点搜索功能

3.11 线框和页面布局

3.12 固定和流动布局

固定布局

流动布局

3.13 为移动网络设计

三种方式

移动设备设计考虑

桌面和移动网站的例子

移动设计小结

3.14 响应式网页设计

3.15 Web设计最佳实践

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Web项目

项目里程碑

第4章 CSS基础知识（一）

4.1 CSS概述

层叠样式表的优点

配置CSS的方法

层叠样式表的“层叠”

4.2 CSS选择符和声明

CSS语法基础

background-color属性

color属性

配置背景色和文本色

4.3 CSS颜色值语法

4.4 配置内联CSS

style属性

动手实作4.1

4.5 配置嵌入CSS

style元素

动手实作4.2

4.6 配置外部CSS

link元素

动手实作4.3

4.7 CSS的class、ID和上下文选择符

class选择符

id选择符

后代选择符

动手实作4.4

4.8 span元素

span元素

动手实作4.5

4.9 练习使用CSS

动手实作4.6

将嵌入CSS转换为外部CSS

将网页与外部CSS文件关联

4.10 CSS语法校验

动手实作4.7

复习和练习

复习题

动手练习

聚焦网页设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第5章 图片样式基础

5.1 图片

GIF图

JPEG图片

PNG图片

新的WebP图像格式

5.2 img元素

动手实作5.1

5.3 图片链接

动手实作5.2

无障碍访问和图片链接

5.4 配置背景图片

background-image属性

同时使用背景颜色和背景图片

浏览器如何显示背景图片

background-attachment属性

5.5 定位背景图片

background-repeat属性

定位背景图片

动手实作5.3

5.6 用CSS3配置多张背景图片

渐进式增强

动手实作5.4

5.7 收藏图标

配置收藏图标

动手实作5.5

5.8 用CSS配置列表符号

用图片代替列表符号

动手实作5.6

5.9 图像映射

map元素

area元素

探究矩形图像映射

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第6章 CSS基础知识（二）

6.1 字体

动手实作6.1

6.2 文本属性

font-size属性

font-weight属性

font-style属性

text-transform属性

line-height属性

动手实作6.2

6.3 对齐和缩进

text-align属性

text-indent属性

动手实作6.3

6.4 CSS的宽度和高度

width属性

min-width属性

max-width属性

height属性

动手实作6.4

6.5 CSS的框模型

框模型实例

6.6 CSS的边距和填充

margin属性

padding属性

6.7 CSS的边框

动手实作6.5

6.8 CSS3的圆角

动手实作6.6

6.9 CSS的页面内空居中设置居中页面内容

动手实作6.7

6.10 CSS3的边框阴影和文本阴影

CSS3的box-shadow属性

CSS3的text-shadow属性

动手实作6.8

6.11 CSS3的background-clip和background-origin属性

CSS3的background-clip属性

CSS3 background-origin属性

6.12 CSS3背景大小和缩放

6.13 CSS3的opacity属性

动手实作6.9

6.14 CSS3 RGBA颜色

动手实作6.10

6.15 CSS3 HSLA颜色

色调、饱和度、亮度和alpha

HSLA颜色示例

动手实作6.11

6.16 CSS3的渐变

CSS3线性渐变语法

CSS3渐变和渐进式增强

配置CSS3渐变

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第7章 页面布局基础

7.1 正常流动

动手实作7.1

7.2 浮动

float属性

动手实作7.2

浮动元素和正常流动

7.3 清除浮动

clear属性

7.4 溢出

overflow属性

7.5 CSS的双栏页面布局

左侧导航的双栏布局

顶部logo左侧导航的双栏布局

还不算完美

7.6 用无序列表实现垂直导航

用CSS配置无序列表

用CSS text-decoration属性消除下划线

动手实作7.3

7.7 用无序列表实现垂直导航

CSS display属性

动手实作7.4

7.8 用伪类实现CSS交互性

动手实作7.5

7.9 CSS双栏布局练习

动手实作7.6

7.10 用CSS进行定位

static定位

fixed定位

相对定位

绝对定位

7.11 定位练习

动手实作7.7

7.12 CSS精灵

动手实作7.8

复习和练习

复习题

动手练习

聚焦网页设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第8章 链接、布局和移动开发进阶

8.1 深入了解相对链接

相对链接的例子

动手实作8.1

8.2 区段标识符

动手实作8.2

8.3 figure元素和figcaption元素

figure元素

figcaption元素

添加图题

动手实作8.3

8.4 图片浮动练习

动手实作8.4

8.5 更多HTML5元素

8.5 更多HTML5元素

hgroup元素

section元素

article元素

aside元素

time元素

动手实作8.5

8.6 HTML5与旧浏览器的兼容性

配置CSS块显示

HTML5 Shim

动手实作8.6

8.7 CSS对打印的支持

打印样式最佳实践

动手实作8.7

8.8 移动网页设计

移动网页设计要考虑的问题

为移动使用优化布局

优化移动导航

优化移动图片

优化移动文本

为One Web而设计

8.9 viewport meta标记

8.10 CSS3媒体查询

什么是媒体查询

使用link元素的媒体查询例子

使用＠media规则的媒体查询示例

8.11 媒体查询练习

动手实作8.8

8.12 灵活的图像

动手实作8.9

8.13 测试移动显示

用桌面浏览器测试

针对专业开发人员

复习和练习

复习题

动手练习

聚焦网页设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第9章 表格基础

9.1 表格概述

table元素

border属性

表格标题

9.2 表行、单元格和表头

动手实作9.1

9.3 跨行和跨列

动手实作9.2

9.4 配置无障碍访问表格

9.5 用CSS配置表格样式

动手实作9.3

9.6 CSS3结构性伪类

动手实作9.4

配置首字母

9.7 配置表格区域

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第10章 表单基础

10.1 概述

form元素

表单控件

10.2 文本框

10.3 提交按钮和重置按钮

提交按钮

重置按钮

示例表单

动手实作10.1

10.4 复选框和单选钮

复选框

单选钮

10.5 隐藏字段和密码框

隐藏字段

密码框

10.6 textarea元素

动手实作10.2

10.7 select和option元素

select元素

option元素

10.8 label元素

动手实作10.3

10.9 fieldset元素和legend元素

fieldset元素

legend元素

前瞻：用CSS配置fieldset分组样式

10.10 用CSS配置表单样式

10.11 服务器端处理

隐私和表单

10.12 表单练习

动手实作10.4

10.13 HTML5文本表单控件

E-mail地址输入表单控件

URL表单输入控件

电话号码表单输入控件

搜索词输入表单控件

HTML5文本框表单控件的有效属性

10.14 HTML5的datalist元素

10.15 HTML5的slider控件和spinner控件

slider表单输入控件

spinner表单输入控件

HTML5和渐进式增强

10.16 HTML5日历和颜色池控件

日历输入表单控件

颜色池表单控件

10.17 HTML5表单练习

动手实作10.5

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第11章 媒体和交互性基础

11.1 插件、容器和codec

辅助应用程序和插件

11.2 配置音频和视频

访问音频或视频文件

动手实作11.1

多媒体和浏览器兼容问题

11.3 Flash和HTML5 embed元素

embed元素

动手实作11.2

11.4 HTML5的audio元素和source元素

audio元素

source元素

动手实作11.3

11.5 HTML5的video元素和source元素

video元素

source元素

11.6 HTML5视频练习

动手实作11.4

11.7 嵌入YouTube视频

iframe元素

动手实作11.5

11.8 CSS3的transform属性

CSS3旋转变换

动手实作11.6

11.9 CSS3的transition属性

动手实作11.7

11.10 CSS过渡练习

动手实作11.8

11.11 HTML5的canvas元素

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

第12章 上网发布

12.1 注册域名

选择域名

注册域名

12.2 选择主机

主机的类型

选择虚拟主机

12.3 用FTP发布

FTP应用程序

用FTP连接

使用FTP

12.4 提交到搜索引擎

搜索引擎的组成

在搜索引擎中列出你的网站

12.5 搜索引擎优化

链接

图片和多媒体

有效代码

有价值的内容

12.6 无障碍访问测试

通用设计和无障碍访问

网络无障碍访问标准

测试无障碍设计相容性

12.7 使用性测试

进行使用性测试

动手实作12.1

复习和练习

复习题

动手练习

聚焦Web设计

案例学习：Pacific Trails Resort

案例学习：JavaJam Coffee House

附录A 复习和练习答案

附录B HTML5速查表

附录C CSS速查表

附录D XHTML速查表

附录E 对比XHTML和HTML5

附录F WCAG 2.0快速参考