Web设计标准成为Web设计界热衷讨论的话题和普遍关注的技术。本书将Web设计行业界的最佳实践和基于标准的设计技巧结合在一起。它构建了很多实用的示例和简短的联系来帮助读者快速地了解和获取信息。本书从互联网基础、设计、内容策略、信息架构、HTML和CSS、可访问性等基础知识起步。
本书的作者来自InterACT论坛(http://interact.webstandards.org)、Opera Web标准教程(http://opera.com/wsc),以及负责The Web Standards Project的专家。因此,本书是学习Web设计基础的权威教程。本书强调实践和经过验证的技术,从而成为专业人士开始职业生涯的必备图书。
“Web代表了21世纪出版、沟通和应用程序设计的最前沿技术。遗憾的是,Web教育仍然处于一个不理想的时代。本书给出了一种迫切需要的课程纠正方式。阅读本书,教育工作者可以更好地为明天的Web设计师服务,而通过他们则可以更好地为数以百万计的读者服务。”
—— Jeffrey Zeldman 《网站重构》作者
“像我这样的雇主经常在寻找新的Web设计天才。但是,在进入人才市场的年轻人中,具备适当的技能组合(不管是通过正规培训还是自学)的人还很少,远远不能满足需求。本书是教育工作者让自己的学生准备好进入工作岗位的最好方式。”
—— Paul Boag Boagworld.com的Headscape、创意总监
本书将行业最佳实践和基于标准的设计编织在一起,为深刻理解Web设计打下牢固的基础。它构建在真实的示例和简短的练习上,而这些示例和练习都专门用来帮助读者快速学习和获取知识。
本书主要内容
站点规划、内容策略和信息架构
HTML和CSS核心技术
可访问性技术
在Web上更高效学习的原则
CSS 3和HTML 5基础知识——未来一瞥
本书由带领你学习创新的InterACT课程(http://interact.webstandards.org)和Opera Web Standards Curriculum(http://opera.com/wsc)的大师以及推动The Web Standards Project的专家编写,是学习Web设计基础知识的权威指南。本书强调具有实用性和经过检验的技术,这使得它成为每位Web专业人士在其职业生涯中获得成功的最佳实践指南。
本书所有作者报酬的25%将捐献给The Open Web Education Alliance,用以帮助全世界的Web教育的进步。
计算机\Web设计
“Web代表了21世纪出版、沟通和应用程序设计的最前沿。遗憾的是,Web教育仍然处于一个不理想的时代。本书给出了一种迫切需要的课程纠正方式。阅读本书,教育工作者可以更好地为明天的Web设计师服务,而通过Web设计师可以更好地为数以百万计的读者服务。”
——Jeffrey Zeldman,《Designing with Web Standards 3rd Edition》作者
“像我这样的雇主经常在寻找新的Web设计天才。但是,在进入人才市场的年轻人中,具备适当的技能组合(不管是通过正规培训还是自学)的人还很少,远远不能满足需求。本书是教育工作者让自己的学生进入工作岗位的最好方式。”
——Paul Boag
Boagworld.com的Headscape、创意总监
本书将行业最佳实践和基于标准的设计编织在一起,为深刻理解Web设计打下牢固的基础。它构建在真实的示例和简短的练习上,而这些示例和练习都专门用来帮助读者快速学习和获取知识。
本书注意内容
站点规划、内容策略和信息架构
HTML和CSS核心技术
可访问性技术
在Web上更高效学习的原则
CSS 3和HTML 5基础知识——未来一瞥
本书由带领你学习创新的InterACT课程(http://interact.webstandards.org)和Opera Web Standards Curriculum(http://opera.com/wsc)的大师以及推动The Web Standards Project的专家编写,是学习Web设计基础知识的权威指南。它强调实践和经过检验的技术,这使得本书成为每位Web专业人士在其职业生涯中获得成功的最佳实践指南。
本书所有作者报酬的25%将捐献给The Open Web Education Alliance(http://www.w3.org/2005/Incubator/owea/),用以帮助全世界的Web教育的进步。
(美)Erin Anderson;Virginia DeBolt;Derek Featherstone 等著:暂无简介
刘红伟 等译:暂无简介
所谓Web标准,即是一些规范的集合,是由W3C和其他的标准化组织共同制定的。它用来创建和解释基于Web的内容。这些规范包括结构化语言、表现类语言、对象模型和脚本语言等。这些规范专门为那些在网上发布的、可向后兼容的文档而设计,使其能够被大多数人访问。正因为如此,Web标准已经成为当前Web设计和开发应该遵从的规范,也是Web设计师和开发者必须学习和掌握的知识。
本书是由十位来自世界各地的、致力于Web前端设计和开发领域的作者共同完成。本书以关注Web标准的方式来介绍Web前端设计和开发。通过阅读和完成练习,你可以对互联网基础知识、Web站点规划、HTML和CSS有更深刻的理解。作者吸取行业专家和优秀教师的经验,将本书的内容编写成易于阅读和理解,并且深入探讨了概念和技术,从而帮助你牢固掌握前端Web设计和开发。
与同类图书相比,本书具有以下一些特点:
?围绕Web站点构建整个流程,介绍了Web站点规划、HTML和CSS,以及可访问性等知识。内容全面而新颖,可实践性强。
?第25章是独立的、实践性的一章,将全书中介绍过的概念和主题综合应用到一起。
?以InterAct课程为背景,配备资源、提示、自行尝试、警告等多个特色版块,便于学生学习和教师教学。
?配套站点(http://interact.webstandards.org)提供示例等多种有用的教学资源。
正是这些特点,使得本书成为同类图书中的佼佼者。相信读者通过阅读本书,既能够有全新的学习体验,又能够轻松愉快地掌握本书所介绍的知识技能。
参与翻译本书的有:刘红伟、景龙、景文正、孙海军、李振胜、李秋强、楚亚军、景文生、王志刚、安宁宁、党耀云、谯谊、武文超。读者在阅读学习过程中有任何疑问,可通过liuhongwei198004@sina.com与译者交流。
译者序
第一部分 预备和背景知识
第1章 InterACT简介 3
1.1 本书目标读者 4
1.2 如何使用本书 4
1.3 关于本书 6
1.3.1 作者 6
1.3.2 设计者 6
第2章 工具 9
2.1 知道想要实现什么 10
2.2 了解你的工具 10
2.2.1 文本编辑器 10
2.2.2 图片编辑器 10
2.2.3 FTP客户端 11
2.2.4 数据库 11
2.2.5 验证器 11
2.2.6 故障排除工具 11
2.3 管理你的工作 11
2.4 本书站点上的工具链接和介绍 12
第3章 在Web上学习 15
3.1 有关学习 16
3.2 找到答案 17
3.2.1 有效的Web搜索 17
3.2.2 过滤结果 18
3.2.3 资源的类型 19
3.3 做笔记 19
3.3.1 保存到“云”中 19
3.3.2 类比笔记—老方式 20
3.3.3 手写笔记 21
3.3.3 文本档案 22
3.4 保持更新 22
3.4.1 RSS反馈 22
3.4.2 播客 22
3.4.3 Email订阅 22
3.5 关注任务 23
3.5.1 生产力系统 23
3.5.2 任务管理和日历 23
3.6 从其他人那里找到答案 24
3.7 提供回答 24
3.7.1 做一个在线好市民 24
3.7.2 使用良好的Web礼仪 25
3.7.3 反馈 26
3.8 协作 26
3.9 学习和灵感 26
3.10 小结 27
第4章 互联网基础 31
4.1 计算机、用户界面和计算机通信的简单历史 32
4.2 互联网核心技术 33
4.2.1 字符、字符集和编码 33
4.2.2 Web技术 34
4.2.3 浏览器及其战争 35
4.3 Internet和Web架构 35
4.3.1 域名系统 36
4.3.2 IP协议族 37
4.3.3 客户端/服务器和点对点 37
4.3.4 Internet访问 37
4.4 Web服务器 37
4.5 Web体验 38
4.5.1 民主的Web 39
4.5.2 协作智慧 40
4.5.3 Web上的沟通以及Web作为社区 40
4.5.4 实时Web 41
4.6 小结 42
第5章 为Web编写内容 45
5.1 为印刷品编写内容和为Web编写内容:有何区别 46
5.1.1 Web编写远不止我们在屏幕上所看到的文案 46
5.1.2 Web内容撰写面临着一组独特的挑战 46
5.1.3 什么使得Web内容撰写如此可怕 48
5.1.4 Web内容撰写综合了众多不同的学科和技能 49
5.1.5 谁造就了优秀的Web内容撰写者 49
5.2 理解在线用户体验 50
5.2.1 人们在线阅读方式不同 50
5.2.2 Web用户不会阅读,他们只是扫过 50
5.2.3 Web站点不是线性的 51
5.2.4 Web站点比印刷材料更难阅读 51
5.2.5 Web站点必须可供有视力障碍的用户访问 51
5.2.6 Web用户给出反馈 52
5.3 奏效的Web内容撰写(或不奏效的Web内容撰写) 53
5.3.1 蹩脚的Web内容撰写看上去是什么样的呢 53
5.3.2 良好的Web内容撰写是什么样的 53
5.4 在开始撰写之前,需要一些工具、一个过程和一个团队 54
5.4.1 工具/文档 54
5.4.2 Web内容来自何处 59
5.4.3 谁负责你的内容创建团队 59
5.5 Web内容撰写十大技巧 59
5.5.1 喜欢倒转的金字塔 60
5.5.2 相信少即是(几乎总是)多 60
5.5.3 避免听起来像广告 60
5.5.4 让你的文案易于扫描 60
5.5.5 编写重要标题 61
5.5.6 用主动词汇打头 61
5.5.7 使用简单的句子 62
5.5.8 承诺 62
5.5.9 设置审阅过程 63
5.5.10 从好的Web站点学艺 63
5.6 通过日常更新保证Web内容新鲜 63
5.6.1 执行常规内容审计 64
5.6.2 使用编辑日历 64
5.6.3 制作内容所有者列表 64
5.6.4 扮演执行Web编辑(或者搞清楚谁负责) 64
5.7 小结 64
第二部分 规划Web站点
第6章 信息架构简介 69
6.1 规划过程 70
6.2 平衡的设计 72
6.3 项目角色 72
6.4 什么是信息架构师 73
6.4.1 信息架构的界限 74
6.4.2 信息架构的职责 74
6.5 小结 76
6.6 信息架构师的十种主要角色 77
第7章 站点规划 78
7.1 发现项目定义 79
7.1.1 访问客户 79
7.1.2 项目简述—居高临下的俯瞰 81
7.1.3 来看看技术:技术规范 82
7.1.4 维护计划 84
7.1.5 工作分解结构 85
7.2 小结 87
第8章 内容分析 88
8.1 聚焦用户 89
8.1.1 访问和调查 89
8.1.2 人物角色 90
8.1.3 基于任务的场景 91
8.1.4 内容—站点的主体 92
8.1.5 内容详单/审计—我们已经有什么 92
8.1.6 Web分析—访问者要做什么 93
8.1.7 竞品评阅—其他人在做什么 95
8.1.8 提议的内容概览 95
8.1.9 卡片分类 96
8.2 小结 96
第9章 内容策略 98
9.1 Chez Sous le Vent: 客户 99
9.2 内容策略描述 100
9.3 批准的内容概览 101
9.4 缺陷分析和内容创建规划 102
9.5 蓝图:信息架构图 103
9.5.1 内容图 103
9.5.2 页面描述图 104
9.5.3 线框图 105
9.5.4 交互设计的故事板 106
9.6 小结 107
第三部分 实现—HTML、CSS基础和可访问性
第10章 HTML简介 111
10.1 HTML的历史 112
10.2 什么是HTML 112
10.3 HTML文档的结构 114
10.4 HTML元素的语法 115
10.5 块级元素和内联元素 117
10.6 良好语意的重要性 117
10.7 HTML最佳实践 119
10.8 字符引用 120
10.9 HTML 5 121
10.10 小结 122
第11章 CSS简介 123
11.1 CSS历史简介 124
11.2 CSS规则的构成 124
11.3 CSS如何应用于HTML 125
11.3.1 内联CSS 126
11.3.2 内部样式表 126
11.3.3 外部样式表 126
11.3.4 用哪一种 128
11.4 CSS注释 128
11.5 CSS缩写 129
11.6 CSS单位 130
11.7 CSS中的颜色 130
11.7.1 关键字 131
11.7.2 十六进制值 131
11.7.3 RGB(a) 131
11.7.4 HSL(a) 132
11.8 CSS选择器指南 133
11.9 解决冲突—继承和层叠 136
11.9.1 继承 136
11.9.2 层叠 137
11.10 支持CSS的浏览器 139
11.11 CSS的未来—CSS 3 140
11.12 小结 140
第12章
12.1 DOCTYPES 142
12.1.1 DOCTYPE切换和显示模式 142
12.1.2 选择DOCTYPE 143
12.1.3 XHTML和HTML 144
12.2 设置文档的主语言 145
12.3 给文档一个
12.4 添加关键字和说明 146
12.5 添加样式和脚本 148
12.6 链接元素 149
12.6.1 反馈 149
12.6.2 让书签更有趣—使用网页图标 150
12.7 小结 151
第13章 标题和段落 152
13.1 复习!标题和段落 153
13.2 文本的一般样式 154
13.2.1 行长度 154
13.2.2 设置字体 156
13.2.3 文本大小 157
13.2.4 其他文本属性 159
13.3 赋予文本含义的其他HTML元素 160
13.3.1 强调—和 160
13.3.2 引用其他来源—
、和 161
13.3.3 提供页面作者的联系信息— 162
13.3.4 换行 162
13.3.5 水平分隔线—
163
13.3.6 省略 163
13.3.7 上标和下标 164
13.3.8 修改文档(插入和删除) 164
13.3.9 代码和变量 165
13.4 表现性元素—不要使用这些 165
13.4.1 165
13.4.2 165
13.4.3和166
13.4.4 166
13.4.5 166
13.4.6 和 166
13.5 小结 166
第14章 空白 167
14.1 重申空白的重要性 168
14.1.1 浏览器如何显示HTML中的空白 169
14.1.2 用覆盖规则 170
14.2 盒子模型 171
14.2.1 块级元素周围的空间 171
14.2.2 当两个边距相遇 172
14.2.3 旧浏览器中的盒子模型问题 172
14.3 通过CSS设置补白、边框和边距 172
14.3.1 padding 173
14.3.2 border 173
14.3.3 边距 174
14.4 控制段落中的空间 175
14.4.1 text-align 175
14.4.2 letter-spacing 175
14.4.3 word-spacing 176
14.4.4 line-height 176
14.5 将页面内容居中 177
14.6 小结 178
第15章 链接 179
15.1 链接语法 180
15.2 不同类型的链接目标 181
15.2.1 绝对链接 181
15.2.2 相对链接 182
15.2.3 段标识符 182
15.2.4 混合链接类型 182
15.3 链接最佳实践 183
15.3.1 链接文本应该精练,且能说明链接到什么内容 183
15.3.2 告知用户大或不可预期的文件 184
15.3.3 不要用意料之外的行为惊吓用户 185
15.3.4 框架、新窗口和弹出窗口—直接说不 185
15.4 链接样式化 186
15.5 链接CSS 187
15.6 为链接添加图标 189
15.7 小结 190
第16章 图像 191
16.1 HTML 语法 192
16.1.1 使用alt提供文字说明 192
16.1.2 用于支持信息的title属性 194
16.1.3 使用width和height定义图像大小 194
16.2 CSS背景图像语法 195
16.2.1 控制图像重复 195
16.2.2 定位背景图像 196
16.2.3 background-attachment 197
16.2.4 background缩写 197
16.2.5 background-color 198
16.2.6 和CSS:何时使用 198
16.3 图像格式快速教程 198
16.3.1 .bmp 199
16.3.2 .gif 199
16.3.3 .jpg 200
16.3.4 .png 200
16.3.5 .svg 200
16.4 图像最佳实践 201
16.4.1 保证图像中的信息最小化 201
16.4.2 优化图像 202
16.4.3 选择合适的格式 202
16.4.4 总是提供替代内容 202
16.5 贴图和渐变 202
16.6 图像替换文字 203
16.7 CSS“精灵” 206
16.8 Chez Sous Le Vent案例学习 209
16.9 小结 209
第17章 列表 210
17.1 三种列表类型 211
17.1.1 无序列表 212
17.1.2 有序列表 213
17.1.3 定义列表 214
17.2 选取列表类型 215
17.3 嵌套列表 216
17.4 列表样式化 217
17.4.1 做些基本的改进 217
17.4.2 更改符号/编号类型 218
17.4.3 使用自己定制的符号图像 220
17.4.4 list-style-position 221
17.4.5 list-style缩写 221
17.5 将列表用于导航菜单 221
17.6 小结 225
第18章 表格 226
18.1 基本的表元素 227
18.2 高级表元素 229
18.2.1 表头 229
18.2.2 为表添加一个标题 230
18.2.3 使用、、和colgroup的额外表结构 231
18.3 样式化表格 232
18.3.1 一般性布局 232
18.3.2 文本格式化 233
18.3.3 添加颜色和图形 234
18.3.4元素 237
18.4 小结 238
第19章 表单 239
19.1 表单最佳实践 240
19.1.1 仔细考虑需要收集什么数据,然后再要求这些数据 240
19.1.2 把大表单划分到多个页面中 240
19.1.3 先在纸上规划好表单 241
19.1.4 允许人们使用鼠标或键盘选择,而不是必须输入 241
19.1.5 灵活地接受不同的数据格式 241
19.1.6 让出错消息有意义 241
19.1.7 不要只通过颜色传达信息 242
19.1.8 采取适当的安全措施 242
19.1.9 在服务器端和客户端都要进行数据
验证 242
19.2 用于表单的HTML 242
19.2.1 表单包装器 242
19.2.2 单行文本输入 243
19.2.3 密码 244
19.2.4 复选框 244
19.2.5 单选按钮 245
19.2.6 文件上传 246
19.2.7 提交数据 246
19.2.8 多行文本输入 247
19.2.9 下拉选择列表 247
19.2.10 使用