HTML5和CSS3已成为新一代网页设计师不可缺少的工具。本书作者在信息技术行业浸染二十多年，具有丰富的教学和从业经验，她的经典教材《Web开发与设计基础(第5版)》被誉为“美国网页设计师就业宝典”。这是作者针对HTML 5和 CSS 3推出的最新标準教程。本书包含的主题有：Internet和Web概念，创建HTML5网页；用CSS配置颜色和文本；用CSS配置页面布局；配置图像和多媒体；探索新增的CSS3特性；套用网页设计最佳实践；设计可访问和可用的网页；搜寻引擎最佳化设计；选择域名；发布网站。本书适合所有对网页设计感兴趣的读者阅读。

第1章Internet和Web基础 1

1.1Internet和Web 2

Internet 2

Internet的诞生 2

Internet的发展 2

Web的诞生 3

第一个图形化浏览器 3

各种技术的聚合 3

1.2Web标準和无障碍访问 4

W3C推荐标準 4

Web标準和无障碍访问 4

无障碍访问和法律 4

Web通用设计 5

1.3网上的信息 6

信息和可靠性 6

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

1.4浏览器和伺服器 7

网路概述 7

客户端/伺服器模型 8

1.5Internet协定 9

电子邮件协定 9

超文本传输协定 9

档案传输协定 10

IP位址 10

1.6统一资源标识符(URI)和域名 11

URI和URL 11

域名 12

1.7HTML概述 13

什幺是HTML 13

什幺是XML 13

什幺是XHTML 14

HTML5——HTML的最新版本 14

1.8网页幕后揭秘 14

文档类型定义(DTD) 15

网页模板 15

html元素 15

页头部分 15

主体部分 16

1.9第一个网页 16

动手实作1.1 16

创建资料夹 17

保存档案 18

测试网页 18

複习和练习 19

複习题 19

动手练习 20

Web研究 20

聚焦Web设计 20

第2章HTML基础 23

2.1标题元素 24

动手实作2.1 24

HTML5更多的标题选项 25

2.2段落元素 25

动手实作2.2 26

对齐 26

2.3换行和水平标尺 27

换行元素 27

动手实作2.3 27

水平标尺元素 28

动手实作2.4 28

2.4块引用元素 29

动手实作2.5 29

2.5短语元素 30

2.6有序列表 31

type，start和reversed属性 32

动手实作2.6 32

2.7无序列表 33

动手实作2.7 33

2.8描述列表 34

动手实作2.8 35

2.9特殊字元 36

动手实作2.9 36

2.10HTML语法校验 37

动手实作2.10 38

2.11结构性元素 39

div元素 39

HTML5结构性元素 40

header元素 40

nav元素 40

footer元素 40

动手实作2.11 40

2.12锚元素 42

动手实作2.12 42

连结目标 43

绝对连结 43

相对连结 43

blockanchor 43

2.13练习使用连结 44

站点地图 44

动手实作2.13 44

2.14电子邮件连结 47

动手实作2.14 48

複习和练习 48

複习题 48

动手练习 49

聚焦Web设计 50

案例学习：PacificTrailsResort 50

案例学习：JavaJamCoffeeHouse 53

第3章网页设计基础 57

3.1为目标客群设计 58

浏览器友好性 59

萤幕解析度 59

3.2网站组织 59

分级式组织 60

线性组织 60

随机组织 61

3.3视觉设计原则 61

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

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

近似：分组相关项目 63

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

3.4提供无障碍访问 63

无障碍设计的受益者 63

无障碍设计有助于提高在搜寻

引擎中的排名 64

法律规定 64

无障碍设计的热潮 64

3.5文本的使用 65

文本设计的注意事项 65

3.6Web调色板 66

十六进制颜色值 67

Web安全颜色 67

无障碍设计和颜色 67

3.7颜色的运用 68

面向儿童 68

面向年轻人 69

面向所有人 69

面向老年人 70

3.8使用图形和多媒体 71

档案大小和图片尺寸 71

抗锯齿/锯齿化文本的问题 71

只使用必要的多媒体 71

提供替代文本 72

3.9更多设计上的考虑 73

感觉到的载入时间 73

第一屏 74

适当留白 74

水平滚动 74

3.10导航设计 74

网站要易于导航 74

导航栏 74

麵包屑导航 75

图片导航 76

动态导航 76

站点地图 76

站点搜寻功能 76

3.11线框和页面布局 77

3.12固定和流动布局 79

固定布局 79

流动布局 80

3.13为行动网路设计 81

三种方式 81

移动设备设计考虑 81

桌面和移动网站的例子 82

移动设计小结 83

3.14回响式网页设计 83

3.15Web设计最佳实践 85

複习和练习 87

複习题 87

动手练习 88

聚焦Web设计 89

案例学习：Web项目 89

项目里程碑 89

第4章CSS基础知识(一) 93

4.1CSS概述 94

层叠样式表的优点 94

配置CSS的方法 95

层叠样式表的“层叠” 95

4.2CSS选择符和声明 96

CSS语法基础 96

background-color属性 96

color属性 96

配置背景色和文本色 96

4.3CSS颜色值语法 97

4.4配置内联CSS 99

style属性 99

动手实作4.1 99

4.5配置嵌入CSS 100

style元素 100

动手实作4.2 101

4.6配置外部CSS 103

link元素 103

动手实作4.3 103

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

class选择符 104

id选择符 105

后代选择符 105

动手实作4.4 105

4.8span元素 106

span元素 106

动手实作4.5 106

4.9练习使用CSS 108

动手实作4.6 108

将嵌入CSS转换为外部CSS 109

将网页与外部CSS档案关联 109

4.10CSS语法校验 111

动手实作4.7 111

複习和练习 113

複习题 113

动手练习 114

聚焦网页设计 114

案例学习：PacificTrailsResort 115

案例学习：JavaJamCoffeeHouse 118

第5章图片样式基础 121

5.1图片 122

GIF图 122

JPEG图片 123

PNG图片 124

新的WebP图像格式 124

5.2img元素 125

动手实作5.1 125

5.3图片连结 126

动手实作5.2 127

无障碍访问和图片连结 128

5.4配置背景图片 128

background-image属性 128

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

浏览器如何显示背景图片 129

background-attachment属性 129

5.5定位背景图片 130

background-repeat属性 130

定位背景图片 130

动手实作5.3 131

5.6用CSS3配置多张背景图片 132

渐进式增强 133

动手实作5.4 133

5.7收藏图示 134

配置收藏图示 135

动手实作5.5 135

5.8用CSS配置列表符号 136

用图片代替列表符号 136

动手实作5.6 137

5.9图像映射 137

map元素 137

area元素 137

探究矩形图像映射 138

複习和练习 139

複习题 139

动手练习 140

聚焦Web设计 141

案例学习：PacificTrailsResort 141

案例学习：JavaJamCoffeeHouse 143

第6章CSS基础知识(二) 147

6.1字型 148

动手实作6.1 148

6.2文本属性 150

font-size属性 150

font-weight属性 151

font-style属性 151

text-transform属性 151

line-height属性 151

动手实作6.2 151

6.3对齐和缩进 152

text-align属性 153

text-indent属性 153

动手实作6.3 153

6.4CSS的宽度和高度 154

width属性 154

min-width属性 155

max-width属性 155

height属性 155

动手实作6.4 156

6.5CSS的框模型 156

框模型实例 157

6.6CSS的边距和填充 158

margin属性 158

padding属性 158

6.7CSS的框线 159

动手实作6.5 160

6.8CSS3的圆角 161

动手实作6.6 162

6.9CSS的页面内空居中设定居中

页面内容 163

动手实作6.7 164

6.10CSS3的框线阴影和文本阴影 165

CSS3的box-shadow属性 165

CSS3的text-shadow属性 166

动手实作6.8 166

6.11CSS3的background-clip和

background-origin属性 167

CSS3的background-clip属性 167

CSS3background-origin属性 168

6.12CSS3背景大小和缩放 168

6.13CSS3的opacity属性 170

动手实作6.9 170

6.14CSS3RGBA颜色 172

动手实作6.10 173

6.15CSS3HSLA颜色 173

色调、饱和度、亮度和alpha 173

HSLA颜色示例 174

动手实作6.11 175

6.16CSS3的渐变 175

CSS3线性渐变语法 176

CSS3渐变和渐进式增强 176

配置CSS3渐变 176

複习和练习 177

複习题 177

动手练习 178

聚焦Web设计 179

案例学习：PacificTrailsResort 179

案例学习：JavaJamCoffeeHouse 181

第7章页面布局基础 185

7.1正常流动 186

动手实作7.1 186

7.2浮动 188

float属性 188

动手实作7.2 189

浮动元素和正常流动 189

7.3清除浮动 190

clear属性 190

7.4溢出 191

overflow属性 191

7.5CSS的双栏页面布局 194

左侧导航的双栏布局 194

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

还不算完美 195

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

用CSS配置无序列表 196

用CSStext-decoration属性消除

下划线 196

动手实作7.3 197

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

CSSdisplay属性 198

动手实作7.4 199

7.8用伪类实现CSS互动性 200

动手实作7.5 201

7.9CSS双栏布局练习 202

动手实作7.6 202

7.10用CSS进行定位 205

static定位 205

fixed定位 205

相对定位 206

绝对定位 207

7.11定位练习 208

动手实作7.7 208

7.12CSS精灵 210

动手实作7.8 211

複习和练习 212

複习题 212

动手练习 212

聚焦网页设计 213

案例学习：PacificTrailsResort 213

案例学习：JavaJamCoffeeHouse 214

第8章连结、布局和移动开发进阶 217

8.1深入了解相对连结 218

相对连结的例子 218

动手实作8.1 219

8.2区段标识符 220

动手实作8.2 221

8.3figure元素和figcaption元素 222

figure元素 222

figcaption元素 222

添加图题 222

动手实作8.3 223

8.4图片浮动练习 224

动手实作8.4 224

8.5更多HTML5元素 226

8.5更多HTML5元素 227

hgroup元素 227

section元素 227

article元素 227

aside元素 227

time元素 227

动手实作8.5 227

8.6HTML5与旧浏览器的兼容性 229

配置CSS块显示 229

HTML5Shim 230

动手实作8.6 230

8.7CSS对列印的支持 231

列印样式最佳实践 231

动手实作8.7 232

8.8移动网页设计 233

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

为移动使用最佳化布局 234

最佳化移动导航 234

最佳化移动图片 235

最佳化移动文本 235

为OneWeb而设计 235

8.9viewportmeta标记 235

8.10CSS3媒体查询 238

什幺是媒体查询 238

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

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

8.11媒体查询练习 240

动手实作8.8 240

8.12灵活的图像 242

动手实作8.9 243

8.13测试移动显示 244

用桌面浏览器测试 245

针对专业开发人员 246

複习和练习 247

複习题 247

动手练习 248

聚焦网页设计 248

案例学习：PacificTrailsResort 249

案例学习：JavaJamCoffeeHouse 252

第9章表格基础 257

9.1表格概述 258

table元素 258

border属性 259

表格标题 259

9.2表行、单元格和表头 260

动手实作9.1 261

9.3跨行和跨列 261

动手实作9.2 262

9.4配置无障碍访问表格 263

9.5用CSS配置表格样式 265

动手实作?9.3 265

9.6CSS3结构性伪类 267

动手实作9.4 267

配置首字母 268

9.7配置表格区域 268

複习和练习 270

複习题 270

动手练习 271

聚焦Web设计 271

案例学习：PacificTrailsResort 272

案例学习：JavaJamCoffeeHouse 273

第10章表单基础 275

10.1概述 276

form元素 277

表单控制项 277

10.2文本框 278

10.3提交按钮和重置按钮 279

提交按钮 279

重置按钮 279

示例表单 279

动手实作10.1 280

10.4複选框和单选钮 281

複选框 281

单选钮 282

10.5隐藏栏位和密码框 283

隐藏栏位 283

密码框 283

10.6textarea元素 284

动手实作10.2 285

10.7select和option元素 286

select元素 287

option元素 287

10.8label元素 288

动手实作10.3 288

10.9fieldset元素和legend元素 289

fieldset元素 289

legend元素 289

前瞻：用CSS配置fieldset分组

样式 290

10.10用CSS配置表单样式 291

10.11伺服器端处理 292

隐私和表单 293

10.12表单练习 294

动手实作10.4 294

10.13HTML5文本表单控制项 295

E-mail地址输入表单控制项 295

URL表单输入控制项 296

电话号码錶单输入控制项 296

搜寻词输入表单控制项 296

HTML5文本框表单控制项的

有效属性 296

10.14HTML5的datalist元素 297

10.15HTML5的slider控制项和

spinner控制项 298

slider表单输入控制项 298

spinner表单输入控制项 299

HTML5和渐进式增强 300

10.16HTML5日曆和颜色池控制项 300

日曆输入表单控制项 300

颜色池表单控制项 301

10.17HTML5表单练习 302

动手实作10.5 302

複习和练习 304

複习题 304

动手练习 305

聚焦Web设计 305

案例学习：PacificTrailsResort 305

案例学习：JavaJamCoffeeHouse 309

第11章媒体和互动性基础 313

11.1外挂程式、容器和codec 314

辅助应用程式和外挂程式 314

11.2配置音频和视频 315

访问音频或视频档案 315

动手实作11.1 316

多媒体和浏览器兼容问题 316

11.3Flash和HTML5embed元素 317

embed元素 317

动手实作11.2 318

11.4HTML5的audio元素和source元素 318

audio元素 318

source元素 319

动手实作11.3 320

11.5HTML5的video元素和

source元素 320

video元素 321

source元素 321

11.6HTML5视频练习 322

动手实作11.4 322

11.7嵌入YouTube视频 323

iframe元素 323

动手实作11.5 324

11.8CSS3的transform属性 325

CSS3旋转变换 325

动手实作11.6 326

11.9CSS3的transition属性 327

动手实作11.7 328

11.10CSS过渡练习 329

动手实作11.8 329

11.11HTML5的canvas元素 331

複习和练习 333

複习题 333

动手练习 333

聚焦Web设计 334

案例学习：PacificTrailsResort 334

案例学习：JavaJamCoffeeHouse 336

第12章上网发布 339

12.1注册域名 340

选择域名 340

注册域名 341

12.2选择主机 341

主机的类型 342

选择虚拟主机 342

12.3用FTP发布 344

FTP应用程式 344

用FTP连线 344

使用FTP 344

12.4提交到搜寻引擎 345

搜寻引擎的组成 346

在搜寻引擎中列出你的网站 347

12.5搜寻引擎最佳化 347

连结 349

图片和多媒体 349

有效代码 349

有价值的内容 349

12.6无障碍访问测试 349

通用设计和无障碍访问 349

网路无障碍访问标準 349

测试无障碍设计相容性 350

12.7使用性测试 351

进行使用性测试 351

动手实作12.1 352

複习和练习 353

複习题 353

动手练习 354

聚焦Web设计 354

案例学习：PacificTrailsResort 354

案例学习：JavaJamCoffeeHouse 355

附录A複习和练习答案 357

附录BHTML5速查表 358

附录CCSS速查表 362

附录DXHTML速查表 366

附录E对比XHTML和HTML5 369

附录FWCAG2.0快速参考 375