HTML5与CSS3网页设计基础

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

Terry Felke-Morris博士，美国哈珀学院荣休教授。Morris博士的信息技术教学经历超过25年，熟悉各种平台和软件开发语言。她讲授的课程有网页开发、计算机信息系统、教学技术和数学，也给研究生讲过信息管理和数据库课程。Morris博士是一个富有创新精神的教师，曾经荣获2002―2003年度Glenn A.Reich纪念奖（嘉奖她在教育技术方面做出的努力），荣获2006 Blackboard Greenhouse远程教学示范奖（嘉奖她在课堂教学中率先使用互联网技术），此外还作为2008年远程教育杰出教师被选入美国教学技术委员会。Morris博士的《HTML5网页设计入门经典》已经出版发行到第7版，另一本以动手实作和案例学习著称的经典教材《HTML5与CSS3网页设计基础》也深受师生们欢迎。Morris博士拥有教育学博士学位，信息系统硕士学位，远程教学硕士学位。她还拥有很多从业资格证书：CIW电子商务设计师、CIW设计师、CIW认证讲师，WOW网络管理员和Adobe认证Dreamweaver 8开发人员。

第1章Internet和Web基础1
1.1Internet和Web2
Internet2
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和URL11
域名12
1.7HTML概述13
什么是HTML13
什么是XML13
什么是XHTML14
HTML5——HTML的近期新版本14
1.8网页幕后揭秘14
文档类型定义(DTD)15
网页模板15
html元素15
页头部分15
主体部分16
1.9第一个网页16
动手实作1.116
创建文件夹17
保存文件18
测试网页18
复习和练习19
复习题19
动手练习20
Web研究20
聚焦Web设计20
第2章HTML基础23
2.1标题元素24
动手实作2.124
HTML5更多的标题选项25
2.2段落元素25
动手实作2.226
对齐26
2.3换行和水平标尺27
换行元素27
动手实作2.327
水平标尺元素28
动手实作2.428
2.4块引用元素29
动手实作2.529
2.5短语元素30
2.6有序列表31
type，start和reversed属性32
动手实作2.632
2.7无序列表33
动手实作2.733
2.8描述列表34
动手实作2.835
2.9特殊字符36
动手实作2.936
2.10HTML语法校验37
动手实作2.1038
2.11结构性元素39
div元素39
HTML5结构性元素40
header元素40
nav元素40
footer元素40
动手实作2.1140
2.12锚元素42
动手实作2.1242
链接目标43
绝对链接43
相对链接43
block anchor43
2.13练习使用链接44
站点地图44
动手实作2.1344
2.14电子邮件链接47
动手实作2.1448
复习和练习48
复习题48
动手练习49
聚焦Web设计50
案例学习：Pacific Trails Resort50
案例学习：JavaJam Coffee House53
第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配置内联CSS99
style属性99
动手实作4.199
4.5配置嵌入CSS100
style元素100
动手实作4.2101
4.6配置外部CSS103
link元素103
动手实作4.3103
4.7CSS的class、ID和上下文选择符104
class选择符104
id选择符105
后代选择符105
动手实作4.4105
4.8span元素106
span元素106
动手实作4.5106
4.9练习使用CSS108
动手实作4.6108
将嵌入CSS转换为外部CSS109
将网页与外部CSS文件关联109
4.10CSS语法校验111
动手实作4.7111
复习和练习113
复习题113
动手练习114
聚焦网页设计114
案例学习：Pacific Trails Resort115
案例学习：JavaJam Coffee House118
第5章图片样式基础121
5.1图片122
GIF图122
JPEG图片123
PNG图片124
新的WebP图像格式124
5.2img元素125
动手实作5.1125
5.3图片链接126
动手实作5.2127
无障碍访问和图片链接128
5.4配置背景图片128
background-image属性128
同时使用背景颜色和背景图片128
浏览器如何显示背景图片129
background-attachment属性129
5.5定位背景图片130
background-repeat属性130
定位背景图片130
动手实作5.3131
5.6用CSS3配置多张背景图片132
渐进式增强133
动手实作5.4133
5.7收藏图标134
配置收藏图标135
动手实作5.5135
5.8用CSS配置列表符号136
用图片代替列表符号136
动手实作5.6137
5.9图像映射137
map元素137
area元素137
探究矩形图像映射138
复习和练习139
复习题139
动手练习140
聚焦Web设计141
案例学习：Pacific Trails Resort141
案例学习：JavaJam Coffee House143
第6章CSS基础知识(二)147
6.1字体148
动手实作6.1148
6.2文本属性150
font-size属性150
font-weight属性151
font-style属性151
text-transform属性151
line-height属性151
动手实作6.2151
6.3对齐和缩进152
text-align属性153
text-indent属性153
动手实作6.3153
6.4CSS的宽度和高度154
width属性154
min-width属性155
max-width属性155
height属性155
动手实作6.4156
6.5CSS的框模型156
框模型实例157
6.6CSS的边距和填充158
margin属性158
padding属性158
6.7CSS的边框159
动手实作6.5160
6.8CSS3的圆角161
动手实作6.6162
6.9CSS的页面内空居中设置居中
页面内容163
动手实作6.7164
6.10CSS3的边框阴影和文本阴影165
CSS3的box-shadow属性165
CSS3的text-shadow属性166
动手实作6.8166
6.11CSS3的background-clip和
background-origin属性167
CSS3的background-clip属性167
CSS3 background-origin属性168
6.12CSS3背景大小和缩放168
6.13CSS3的opacity属性170
动手实作6.9170
6.14CSS3 RGBA颜色172
动手实作6.10173
6.15CSS3 HSLA颜色173
色调、饱和度、亮度和alpha173
HSLA颜色示例174
动手实作6.11175
6.16CSS3的渐变175
CSS3线性渐变语法176
CSS3渐变和渐进式增强176
配置CSS3渐变176
复习和练习177
复习题177
动手练习178
聚焦Web设计179
案例学习：Pacific Trails Resort179
案例学习：JavaJam Coffee House181
第7章页面布局基础185
7.1正常流动186
动手实作7.1186
7.2浮动188
float属性188
动手实作7.2189
浮动元素和正常流动189
7.3清除浮动190
clear属性190
7.4溢出191
overflow属性191
7.5CSS的双栏页面布局194
左侧导航的双栏布局194
顶部logo左侧导航的双栏布局195
还不算完美195
7.6用无序列表实现垂直导航196
用CSS配置无序列表196
用CSS text-decoration属性消除
下划线196
动手实作7.3197
7.7用无序列表实现垂直导航198
CSS display属性198
动手实作7.4199
7.8用伪类实现CSS交互性200
动手实作7.5201
7.9CSS双栏布局练习202
动手实作7.6202
7.10用CSS进行定位205
static定位205
fixed定位205
相对定位206
绝对定位207
7.11定位练习208
动手实作7.7208
7.12CSS精灵210
动手实作7.8211
复习和练习212
复习题212
动手练习212
聚焦网页设计213
案例学习：Pacific Trails Resort213
案例学习：JavaJam Coffee House214
第8章链接、布局和移动开发进阶217
8.1深入了解相对链接218
相对链接的例子218
动手实作8.1219
8.2区段标识符220
动手实作8.2221
8.3figure元素和figcaption元素222
figure元素222
figcaption元素222
添加图题222
动手实作8.3223
8.4图片浮动练习224
动手实作8.4224
8.5更多HTML5元素226
8.5更多HTML5元素227
hgroup元素227
section元素227
article元素227
aside元素227
time元素227
动手实作8.5227
8.6HTML5与旧浏览器的兼容性229
配置CSS块显示229
HTML5 Shim230
动手实作8.6230
8.7CSS对打印的支持231
打印样式很好实践231
动手实作8.7232
8.8移动网页设计233
移动网页设计要考虑的问题234
为移动使用优化布局234
优化移动导航234
优化移动图片235
优化移动文本235
为One Web而设计235
8.9viewport meta标记235
8.10CSS3媒体查询238
什么是媒体查询238
使用link元素的媒体查询例子238
使用@media规则的媒体查询示例239
8.11媒体查询练习240
动手实作8.8240
8.12灵活的图像242
动手实作8.9243
8.13测试移动显示244
用桌面浏览器测试245
针对专业开发人员246
复习和练习247
复习题247
动手练习248
聚焦网页设计248
案例学习：Pacific Trails Resort249
案例学习：JavaJam Coffee House252
第9章表格基础257
9.1表格概述258
table元素258
border属性259
表格标题259
9.2表行、单元格和表头260
动手实作9.1261
9.3跨行和跨列261
动手实作9.2262
9.4配置无障碍访问表格263
9.5用CSS配置表格样式265
动手实作?9.3265
9.6CSS3结构性伪类267
动手实作9.4267
配置首字母268
9.7配置表格区域268
复习和练习270
复习题270
动手练习271
聚焦Web设计271
案例学习：Pacific Trails Resort272
案例学习：JavaJam Coffee House273
第10章表单基础275
10.1概述276
form元素277
表单控件277
10.2文本框278
10.3提交按钮和重置按钮279
提交按钮279
重置按钮279
示例表单279
动手实作10.1280
10.4复选框和单选钮281
复选框281
单选钮282
10.5隐藏字段和密码框283
隐藏字段283
密码框283
10.6textarea元素284
动手实作10.2285
10.7select和option元素286
select元素287
option元素287
10.8label元素288
动手实作10.3288
10.9fieldset元素和legend元素289
fieldset元素289
legend元素289
前瞻：用CSS配置fieldset分组
样式290
10.10用CSS配置表单样式291
10.11服务器端处理292
隐私和表单293
10.12表单练习294
动手实作10.4294
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.5302
复习和练习304
复习题304
动手练习305
聚焦Web设计305
案例学习：Pacific Trails Resort305
案例学习：JavaJam Coffee House309
第11章媒体和交互性基础313
11.1插件、容器和codec314
辅助应用程序和插件314
11.2配置音频和视频315
访问音频或视频文件315
动手实作11.1316
多媒体和浏览器兼容问题316
11.3Flash和HTML5 embed元素317
embed元素317
动手实作11.2318
11.4HTML5的audio元素和source元素318
audio元素318
source元素319
动手实作11.3320
11.5HTML5的video元素和
source元素320
video元素321
source元素321
11.6HTML5视频练习322
动手实作11.4322
11.7嵌入YouTube视频323
iframe元素323
动手实作11.5324
11.8CSS3的transform属性325
CSS3旋转变换325
动手实作11.6326
11.9CSS3的transition属性327
动手实作11.7328
11.10CSS过渡练习329
动手实作11.8329
11.11HTML5的canvas元素331
复习和练习333
复习题333
动手练习333
聚焦Web设计334
案例学习：Pacific Trails Resort334
案例学习：JavaJam Coffee House336
第12章上网发布339
12.1注册域名340
选择域名340
注册域名341
12.2选择主机341
主机的类型342
选择虚拟主机342
12.3用FTP发布344
FTP应用程序344
用FTP连接344
使用FTP344
12.4提交到搜索引擎345
搜索引擎的组成346
在搜索引擎中列出你的网站347
12.5搜索引擎优化347
链接349
图片和多媒体349
有效代码349
有价值的内容349
12.6无障碍访问测试349
通用设计和无障碍访问349
网络无障碍访问标准349
测试无障碍设计相容性350
12.7使用性测试351
进行使用性测试351
动手实作12.1352
复习和练习353
复习题353
动手练习354
聚焦Web设计354
案例学习：Pacific Trails Resort354
案例学习：JavaJam Coffee House355
附录A复习和练习答案357
附录BHTML5速查表358
附录CCSS速查表362
附录DXHTML速查表366
附录E对比XHTML和HTML5369
附录FWCAG 2.0快速参考375