新書推薦:
《
血色帝国:近代英国社会与美洲移民
》
售價:HK$
59.8
《
海外中国研究·王羲之:六朝贵族的世界(艺术系列)
》
售價:HK$
182.9
《
唐宋绘画史 全彩插图版
》
售價:HK$
101.2
《
“御容”与真相:近代中国视觉文化转型(1840-1920)
》
售價:HK$
113.9
《
鸣沙丛书·大风起兮:地方视野和政治变迁中的“五四”(1911~1927)
》
售價:HK$
102.4
《
海洋、岛屿和革命:当南方遭遇帝国(文明的另一种声音)
》
售價:HK$
109.3
《
铝合金先进成型技术
》
售價:HK$
273.7
《
英雄之旅:把人生活成一个好故事
》
售價:HK$
89.7
|
編輯推薦: |
名师经典网页设计教材新版,全面覆盖HTML5与CSS3相关知识点
学练结合,题型丰富,度假村和瑜伽馆,两大精彩案例学习贯穿全书
16个视频,91个动手实作,英文版配套网站资源丰富,深受师生好评
特色段落类型丰富,约有120道练习题,包括选择题、判断题和是非题
|
內容簡介: |
《HTML5与CSS网页设计基础(第6版 知识点 案例 习题 视频)》针对HTML5和CSS的最新标准进行及时的更新和修订,主题涉及如何创建HTML5网页、如何用CSS配置颜色和文本、如何用CSS配置页面布局、如何配置图像和多媒体、如何应用网页设计最佳实践、如何设计可访问和可用的网页、如何为搜索引擎优化而设计、如何选择域名及如何发布网站。
《HTML5与CSS网页设计基础(第6版 知识点 案例 习题 视频)》适合对网页设计感兴趣的读者阅读,是一本较为理想的网页设计教程。
|
關於作者: |
特丽·安·菲尔克-莫里斯(Terry Ann Felke-Morris)
博士是哈珀学院(位于伊利诺伊州帕拉汀市)的荣誉退休教授。她拥有教育学博士学位和信息系统理学硕士学位,她还通过了很多认证,包括Adobe认证Dreamweaver8开发者、WOW认证合作伙伴Webmaster、Microsoft认证专家、Master CIW Designer和CIW认证讲师。
为了表彰她在设计CIS网页开发大学项目与课程上的贡献,哈珀学院授予她Glenn A. Reich教育技术纪念奖。2006年,她获得了Blackboard Greenhouse Exemplary网络课程奖,以表彰她在学院积极使用互联网技术。莫里斯博士在2008年获得了两个国际大奖:教育技术委员会颁发的电子教学优秀员工奖和MERLOT网上示范教学资源奖。
莫里斯博士拥有二十多年的工商业及信息技术从业经历。她于1996年发布了自己的第一个网站,并从此与网络结下不解之缘。作为网页标准项目任务组的成员,她一直致力于网页标准的推广。她协助哈珀学院设立了网页证书和学位课程,并担任骨干教员。她还是另外一本经典教材《学习HTML5》系列版本 ( 目前已到第10版)的作者。有关她的更多信息,请访问 http://terrymorris.net。
|
目錄:
|
第1 章 互联网和万维网基础 1
第2 章 HTML 基础 29
第3 章 网页设计基础 75
第4 章 CSS 基础 117
第5 章 图形和文本样式基础 151
第6 章 CSS 进阶 191
第7 章 页面布局基础 231
第8 章 灵活响应布局基础 279
第9 章 表格基础 341
第10 章 表单基础 363
第11 章 媒体和交互性基础 413
第12 章 Web 发布基础 447
详细目录
第1 章 互联网和万维网基础 1
1.1 互联网和万维网 2
互联网 2
互联网的诞生 2
互联网的发展 2
万维网的诞生 2
第一个图形化浏览器 3
各种技术的融合 3
1.2 网页标准和无障碍访问 4
W3C 推荐标准 4
网页标准和无障碍访问 4
无障碍访问和法律 4
网页通用设计 5
网络概述 5
客户端/ 服务器模型 6
客户端 7
服务器 7
1.3 Internet 协议 8
电子邮件协议 8
超文本传输协议 8
文件传输协议 8
传输控制协议/Internet 协议 8
IP 地址 9
1.4 统一资源标识符(URI)
和域名 10
URI 和URL 10
域名 10
顶级域名 11
通用顶级域名 11
国家代码顶级域名 12
域名系统DNS 13
1.5 网上的信息 14
网上的信息可靠吗? 14
网上的信息是最新的吗? 14
有没有指向额外资源的链接? 14
是维基百科吗? 15
使用网上信息时的道德规范 15
1.6 HTML 概述 16
什么是HTML 16
什么是XML 17
什么是XHTML 17
HTML 的最新版本HTML5 17
1.7 网页幕后揭秘 18
文档类型定义(DTD) 18
网页模板 18
html 元素 19
页头区域 19
主体区域 19
1.8 第一个网页 20
新建文件夹 20
保存文件 21
测试网页 23
复习和练习 24
第2 章 HTML 基础 29
2.1 标题元素 30
无障碍访问和标题 31
HTML5 更多的标题选项 31
2.2 段落元素 32
对齐 33
2.3 换行和水平标尺 34
换行元素 34
水平标尺元素 35
2.4 块引用元素 36
2.5 短语元素 38
2.6 有序列表 40
type 属性、start 属性和reversed属性 40
2.7 无序列表 42
2.8 描述列表 44
2.9 特殊实体字符 46
2.10 HTML 语法校验 48
2.11 结构元素 50
div 元素 50
header 元素 50
nav 元素 50
main 元素 50
footer 元素 50
2.12 练习使用结构元素 52
2.13 更多结构元素 54
section 元素 54
article 元素 54
aside 元素 54
time 元素 54
2.14 锚元素 56
链接目标 57
绝对链接 57
相对链接 57
将整个块作为锚 57
无障碍访问和超链接 57
2.15 练习使用链接 58
站点地图 58
2.16 电子邮件链接 62
复习和练习 64
第3 章 网页设计基础 75
3.1 为目标受众设计 76
浏览器 77
屏幕分辨率 77
3.2 网站组织 78
分级式组织 78
线性组织 79
随机组织 79
3.3 视觉设计原则 80
重复:在整个设计中重复视觉元素 80
对比:添加视觉刺激和吸引注意力 81
近似:分组相关项目 81
对齐:对齐元素实现视觉上的统一 81
3.4 提供无障碍访问 82
通用设计和增强无障碍访问的受益者 82
无障碍设计有助于提高在搜索引擎中的排名 82
法律规定 83
无障碍设计的热潮 83
3.5 文本的使用 84
文本设计的注意事项 84
3.6 调色板 86
十六进制颜色值 86
网页安全色 87
无障碍设计和颜色 87
3.7 针对目标受众进行设计 88
面向所有人 88
面向老年人 88
面向儿童 89
面向年轻人 89
3.8 选择颜色方案 90
以一张图片为基础的方案 90
色轮 90
变深、变浅和变灰 91
单色 91
相似色 92
互补色 92
分散互补色 92
三色 93
四色 93
实现颜色方案 93
3.9 使用图片和多媒体 94
文件大小和图片尺寸 94
抗锯齿/ 锯齿化文本的问题 94
只使用必要的多媒体 95
提供替代文本 95
3.10 更多设计考虑 96
移动设备 96
适当留白 96
视差滚动 97
目前的扁平化网页设计趋势 97
3.11 导航设计 98
网站要易于导航 98
导航栏 98
面包屑导航 98
图片导航 99
动态导航 99
站点地图 99
站点搜索功能 99
3.12 线框和页面布局 100
3.13 固定和流动布局 102
固定布局 102
流动布局 102
3.14 为移动网络设计 104
移动设备设计考虑 104
为移动优化布局 104
为移动优化导航 105
为移动优化图片 105
为移动优化文本 105
3.15 灵活响应的网页设计 106
3.16 网页设计最佳实践 108
复习和练习 110
第4 章 CSS 基础 117
4.1 CSS 概述 118
层叠样式表的优点 118
配置CSS 的方法 119
层叠样式表的“层叠” 119
4.2 CSS 选择符和声明 120
CSS 语法基础 120
background-color 属性 120
color 属性 121
配置背景色和文本色 121
4.3 CSS 颜色值语法 122
4.4 配置内联CSS 124
style 属性 124
4.5 配置嵌入CSS 126
style 元素 126
4.6 配置外部CSS 128
link 元素 128
4.7 CSS 的class、id 和
后代选择符 130
class 选择符 130
id 选择符 130
后代选择符 130
4.8 span 元素 132
span 元素 132
第一部分 132
第二部分 133
4.9 练习使用CSS 134
4.10 层叠 136
4.11 练习使用层叠 138
4.12 CSS 语法校验 140
复习和练习 142
第5 章 图形和文本样式基础 151
5.1 图片 152
GIF 图片 152
JPEG 图片 153
PNG 图片 153
WebP 图片格式 154
流行图形处理软件 155
5.2 img 元素 156
用alt 属性提供无障碍访问 157
5.3 图片链接 158
无障碍访问和图片链接 159
5.4 配置背景图片 160
background-image 属性 160
同时使用背景颜色和背景图片 160
浏览器如何显示背景图片 160
background-attachment 属性 161
5.5 定位背景图片 162
background-repeat 属性 162
定位背景图片 162
5.6 配置多张背景图片 164
5.7 用CSS 配置字体 166
font-family 属性 166
5.8 CSS 文本属性 168
font-size 属性 168
font-weight 属性 168
font-style 属性 169
line-height 属性 169
text-align 属性 169
text-decoration 属性 169
text-indent 属性 169
text-transform 属性 169
letter-spacing 属性 169
5.9 练习配置图形和文本 170
5.10 用CSS 配置列表符号 172
图片作为列表符号 173
5.11 收藏图标 174
配置收藏图标 174
5.12 图像映射 176
map 元素 176
area 元素 176
探索矩形图像映射 176
5.13 figure 元素和figcaption 元素 178
figure 元素 178
figcaption 元素 178
复习和练习 180
第6 章 CSS 进阶 191
6.1 宽度和高度 192
width 属性 192
min-width 属性 192
max-width 属性 193
height 属性 193
6.2 框模型 194
内容 194
填充 194
边框 195
边距 195
框模型实例 195
6.3 边距和填充 196
margin 属性 196
padding 属性 196
6.4 边框 198
6.5 CSS 圆角 200
6.6 页面内容居中 202
6.7 CSS 边框阴影和文本阴影 204
CSS box-shadow 属性 204
CSS text-shadow 属性 205
6.8 CSS 属性background-clip
和background-origin 206
CSS 属性background-clip 206
CSS 属性background-origin 207
6.9 background-size 属性 208
6.10 练习使用CSS 的属性 210
6.11 CSS 的opacity 属性 212
6.12 CSS RGBA 颜色 214
6.13 CSS HSLA 颜色 216
色调、饱和度、亮度和alpha 216
HSLA 颜色示例 216
6.14 CSS 渐变 218
线性渐变语法 218
辐射渐变语法 218
CSS 的渐变和渐进式增强 218
复习和练习 220
第7 章 页面布局基础 231
7.1 正常流动 232
CSS 布局属性 233
7.2 浮动 234
float 属性 234
7.3 清除浮动 236
7.4 溢出 238
overflow 属性 238
用overflow 属性清除浮动 238
对比clear 属性与overflow 属性 238
用overflow 属性配置滚动条 239
7.5 CSS 的属性box-sizing 240
7.6 基本双栏布局 242
双栏布局的例子 245
7.7 用无序列表 246
用CSS 的配置无序列表 246
用CSS text-decoration 属性消除
下划线 246
7.8 用无序列表实现水平导航 248
CSS 的display 属性 248
用CSS 配置 248
7.9 用伪类实现CSS 交互性 250
7.10 练习CSS 双栏布局 252
7.11 用CSS 控制打印 254
打印样式最佳实践 254
7.12 CSS 精灵 256
7.13 用CSS 进行定位 258
static 定位 258
fixed 定位 258
相对定位 258
粘性定位 259
绝对定位 260
z-index 属性 260
7.14 固定位置的导航栏 262
7.15 区段标识符 264
区段标识符和FAQ 264
区段标识符和无障碍访问 265
使用区段标识符 265
7.16 单页网站 266
复习和练习 268
第8 章 灵活响应布局基础 279
8.1 CSS 灵活框布局 280
配置灵活容器 280
display 属性 280
flex-wrap 属性 281
flex-direction 属性 281
8.2 灵活容器的更多知识 282
流向 282
justify-content 属性 282
align-items 属性 283
flex-flow 属性 283
灵活框和gap 属性 283
8.3 灵活框图片库 284
8.4 配置灵活项 286
比例灵活项 286
order 属性 287
8.5 练习灵活框技术 288
8.6 CSS 网格布局 290
配置网格容器 290
display 属性 290
设计网格 290
配置网格列和网格行 291
8.7 网格列、行和间隙 292
网络布局和gap 属性 292
order 属性 292
8.8 双栏网格页面布局 294
配置网格列和行 294
配置网格项 295
网格行编号 295
8.9 使用网格区域的布局 298
grid-area 属性 298
grid-template-areas 属性 298
配置带空白区域的网格 299
grid-template 属性 301
8.10 渐进式增强网格 302
CSS 特性查询 302
8.11 用灵活框和网格来居中 304
8.12 viewport meta 标记 306
8.13 CSS 媒体查询 308
什么是媒体查询 308
使用link 元素的媒体查询例子 308
使用@media 规则的媒体查询示例 309
移动优先 309
8.14 用媒体查询实现灵活响应的布局 310
8.15 用媒体查询实现灵活响应的网格
布局 316
8.16 用CSS 实现灵活图像 320
8.17 picture 元素 322
source 元素 322
8.18 灵活img 元素属性 324
sizes 属性 324
srcset 属性 324
loading 属性 325
8.19 测试移动显示 326
用桌面浏览器测试 326
灵活测试工具 326
浏览器内置工具 327
更多移动测试工具 327
复习和练习 328
第9 章 表格基础 341
9.1 表格概述 342
table 元素 342
border 属性 342
表题 343
9.2 表行、单元格和表头 344
9.3 跨行和跨列 346
9.4 配置无障碍访问表格 348
headers 属性和id 属性 349
scope 属性 349
9.5 用CSS 配置表格样式 350
9.6 CSS 结构性伪类 352
配置首字母 353
9.7 配置表格区域 354
复习和练习 356
第10 章 表单基础 363
10.1 表单概述 364
form 元素 364
表单控件 365
10.2 input 元素和文本框 366
文本框 366
10.3 提交按钮和重置按钮 368
提交按钮 368
重置按钮 368
示例表单 368
10.4 复选框和单选钮 370
复选框 370
单选钮 371
10.5 textarea 元素 372
10.6 select 元素和option 元素 374
select 元素 374
option 元素 374
10.7 label 元素 376
10.8 fieldset 和legend 元素 378
fieldset 元素 378
legend 元素 378
无障碍访问和表单 379
10.9 用CSS 配置表单样式 380
属性选择符 381
10.10 CSS 网格布局表单 382
10.11 服务器端处理 384
隐私和表单 385
10.12 表单练习 386
10.13 密码、隐藏和文件上传控件 388
密码框 388
隐藏输入控件 388
文件上传控件 388
10.14 更多文本表单控件 390
E-mail 地址输入表单控件 390
URL 表单输入控件 390
电话号码表单输入控件 391
搜索词输入表单控件 391
10.15 datalist 元素 392
10.16 表单输入控件 394
slider 表单输入控件 394
spinner 表单输入控件 394
渐进式增强 395
10.17 日历和颜色池控件 396
日期和时间表单控件 396
颜色池表单控件 397
10.18 更多表单练习 398
复习和练习 400
第11 章 媒体和交互性基础 413
11.1 音频和视频入门 414
多媒体和浏览器兼容问题 414
容器和codec 414
11.2 audio 和source 416
audio 元素 416
source 元素 416
音频和无障碍访问 417
11.3 video 和source 418
video 元素 418
source 元素 418
视频和无障碍访问 419
11.4 练习视频 420
我可以使用网上找到的任何
东西吗? 421
11.5 iframe 元素 422
iframe 元素 422
11.6 CSS 属性transform 424
CSS 旋转变换 424
CSS 的伸缩变换 424
11.7 CSS 属性transition 426
11.8 练习使用过渡 428
11.9 练习使用CSS 下拉菜单 430
11.10 details 和summary 432
details 元素 432
summary 元素 432
11.11 JavaScript 和jQuery 434
JavaScript 434
jQuery 435
11.12 HTML5 的API 436
地理位置 436
Web 存储 436
渐进式Web 应用程序 436
用canvas 元素绘图 437
复习和练习 438
第12 章 Web 发布基础 447
12.1 文件组织 448
相对链接的例子 448
12.2 注册域名 450
选择域名 450
注册域名 451
12.3 选择Web 主机 452
选择虚拟主机 452
12.4 安全套接字层(SSL) 454
数字证书 455
12.5 用FTP 发布 456
FTP 应用程序 456
用FTP 连接 456
使用FTP 456
启动和登录 456
文件上传、下载和删除 457
进一步探索 457
12.6 提交到搜索引擎 458
搜索引擎的组成 458
机器人 458
数据库 458
搜索表单 458
在搜索引擎中列出自己的网站 459
12.7 搜索引擎优化 460
关键字 460
网页标题 460
标题标记 460
描述 460
meta 标记 460
链接 461
文件名 461
HTTPS 协议 461
图片和多媒体 461
有效代码 461
有价值的内容 461
12.8 无障碍访问测试 462
通用设计和无障碍访问 462
Web 无障碍访问标准 462
Section 508 条款 462
WCAG 462
测试无障碍设计相容性 463
自动无障碍设计测试 463
手动无障碍测试 463
12.9 可用性测试 464
进行可用性测试 464
复习和练习 466
附录 473
附录A HTML5 速查表 474
附录B CSS 速查表 478
附录C WCAG 2.1 快速参考 484
附录D ARIA 地标角色 486
附录E Web 安全调色板 488
|
內容試閱:
|
《HTML5 与CSS3 网页设计基础》适合网页设计或前端开发初级课程。大多数主题都用两页篇幅进行讲解,在指出关键点的同时,一般还包含动手实作。本书覆盖网页设计师需要掌握的基础知识,具体涉及以下主题:
? 互联网和万维网的概念
? 用HTML5 创建网页
? 用层叠样式表(CSS) 配置文本、颜色和网页布局
? 配置网页上的图片和多媒体
? 探索CSS Flexbox和CSS网格布局系统
? 网页设计最佳实践
? 创建在桌面和移动设备上都能良好显示的网页
? 对无障碍访问、可用性和搜索引擎优化的考量
? 获取域名和主机
? 发布到网上
本书中文版的学生文件可以从配套网站https://bookzhou.com 下载( 区分大小写),动手实作的原始文件和解决方案以及案例分析的原始文件都可以在此下载。
在本书第5 版取得极大成功之后,第6 版新增了以下特色:
? 更丰富的动手实作
? 全面更新了示例代码、案例学习和网上资源
? 更新了HTML5 元素和属性
? 扩充了网页布局设计和灵活响应网页设计技术的内容
? 扩充了CSS灵活布局模块(Flexbox) 和CSS网格布局的内容
? 扩充了灵活响应图像技术的内容,加入了对延迟加载的介绍
? 更新了HTML5 和CSS参考资源
本书特色
立足于当下,展望未来。本书采用独特的教学方式,使学生在学习网页设计技能的同时,掌握新的HTML5 和CSS 编码技术,以迎接未来的挑战。
精心挑选主题。本书既传授“硬”技能,比如HTML5 和层叠样式表( 第1 章~ 第2 章,第4 章~ 第11 章),也传授“软”技能,比如网页设计( 第3 章) 和发布到网上( 第12 章)。打下良好的基础之后,学生更容易实现自己的职业梦想成为一名网页设计师。使用本书的学生和老师会发现,课程变得更有趣了。学生在创建网页和网站时,可以一起讨论、综合和运用软硬技能。大多数主题都用两页的篇幅来讲解,除了快速提供需要掌握的知识点,还为学生及时提供动手实作来巩固所学到的知识。
大多数主题只有两页篇幅。大多数主题都用一个简洁的、两页篇幅的小节进行讲述。许多小节还包含马上就可以开始练习的动手实作,旨在帮助巩固新学的技能或概念。这种精心设计对学业沉重的学生尤其有用,因为他们需要在极短的时间内掌握关键概念。
动手实作。网页开发是一门技能,只有通过动手实作才能更好地掌握。本书十分强调实际动手能力的培养,因而每章都有动手实作练习题、章末练习题以及真实的案例学习。
网站案例学习。从第2 章开始,案例学习将贯穿全书。它的作用是巩固每章所学的技能。教师资源中心提供了案例的示例解决方案,网址是https://pearsonhighered.com/felke。
聚焦于网页设计。大多数章都提供额外的活动来探索与本章有关的网页设计主题。这些活动可用于巩固、扩展和增强课程主题。
FAQ。在我的网页开发课堂中,学生经常会问到一些同样的问题,所以我在书中列出了这些问题,并用FAQ 标志来注明。
聚焦于无障碍设计。开发无障碍网页的重要性日益增强,所以书中将穿插无障碍网页提示,这个特殊标记可以让您更方便地找到这些信息。
聚焦于道德与伦理。本书使用特殊的道德规范标记来注明与网页开发有关的道德规范话题。
简明提示。提供有用的背景资料或者帮助提高生产力。
深入探索。这个特殊标记代表可以进行深入探索的网络资源,进一 步了解当前主题。
参考资料。附录提供了丰富的参考资料,包括HTML5 参考、CSS 参考、WCAG 2.1快速参考以及ARIA 地标角色概述。
英文版视频讲解(Video Note)。讲解关键编程概念和技术,演示从设计到编码的问题解决过程。视频讲解有利于学生自学自己感兴趣的主题,支持选择、播放、倒退、快进和暂停。每当看到 这样的图标,就表示当前主题有对应的视频讲解。视频列表可从本书中文版配套网站获取,网址是http://pan.baidu.com/s/1yd43W。注意,由于是英文视频,所以为了方便索引,书中保留了这些视频的英文名称。
补充材料
学生资源。本书中文版读者请访问https://bookzhou.com 获取学生资源( 含视频讲解)。
作者网站。除了出版社为本书提供的配套网站,作者还专门创建了一个网站,网址为https://www.webdevbasics.net。该网站拥有许多额外资源,包括调色板和学习/ 复习游戏,还为每一章都单独建了一个网页,提供这一章的示例、链接和更新信息。该网站由作者自行维护,和出版商无利益关系。
致谢
特别感谢培生的工作伙伴,他们是特蕾·约翰逊、卡罗尔·施耐德、司各特·迪萨诺和艾琳·苏利文。
感谢我的家人,尤其是我的“另一半”,感谢他的耐心、关爱、支持和鼓励。最后还要特别以此纪念我的父亲,我们永远想念他。
作者简介
特丽? 安? 菲尔克- 莫里斯(Terry Ann Felke-Morris) 博士是哈珀学院( 位于伊利诺伊州帕拉汀市) 的荣誉退休教授。她拥有教育学博士学位和信息系统理学硕士学位,还通过了很多认证,包括Adobe 认证Dreamweaver 8 开发者、WOW 认证合作伙伴Webmaster、Microsoft 认证专家、Master CIW Designer 和CIW 认证讲师。
为了表彰她在设计CIS 网页开发大学项目与课程上的贡献,哈珀学院授予她Glenn A.Reich 教育技术纪念奖。2006 年,她获得了Blackboard Greenhouse Exemplary 网络课程奖,以表彰她在学院积极使用互联网技术。莫里斯博士在2008 年获得了两个国际大奖:教育技术委员会颁发的电子教学优秀员工奖和MERLOT 网上示范教学资源奖。
莫里斯博士拥有二十多年的工商业及信息技术从业经历。她于1996 年发布了自己的第一个网站,并从此与网络结下不解之缘。作为网页标准项目任务组的成员,她一直致力于网页标准的推广。她协助哈珀学院设立了网页证书和学位课程,并担任骨干教员。她还是另外一本经典教材《学习HTML5》系列版本( 目前已到第10 版)的作者。有关她的更多信息,请访问http://terrymorris.net。
|
|