web前端工程师修炼之道pdf扫描版

web前端工程师修炼之道是一本Web前端工程师开发指南，由美国前端工程师罗宾斯编著。本书将帮助你学习如何使用当前最新的Web前端技术，其中包括了HTML5和CSS3，全书每一章都会提供一些练习和小测验，可以很好的帮助你了解不同的Web前端技术，巩固你对重要概念的理解。本书主要内容包括使用文本、链接、图像、表格和表单来创建HTML页面，学习新的HTML5元素、APl和CSS3属性，学习的工作原理及其在Web设计中的重要性等等，是一本非常适合所有的Web前端程序员下载阅读的书。欢迎有需要的朋友来3322软件站免费下载阅读。

web前端工程师修炼之道内容介绍：

《web前端工程师修炼之道(原书第4版)》全书分5部分共22章，第一部分从HTML基本知识讲起，首先让读者快速掌握常见的HTML标记，之后重点介绍了HTML表格与表单。第二部分介绍了HTML定义、标记语言，以及如何给网页添加图片、链接、表单等基本内容。第三部分涉及网页制作的高级部分，包括层叠样式表、格式文本、颜色和背景、边框和边距、浮动和定位、CSS页面布局、变换和动画、CSS技术等高级话题。第四部分介绍了JavaScript技术，从最基础的程序语法开始，使读者能很快地融入到编程的环境中。利用JavaScript做出常用的网页动态效果。第五部分介绍了网页图形制作，包括Web图形制作的基础知识。

web前端工程师修炼之道简介：

书名：《web前端工程师修炼之道(原书第4版)》
作者: [美] 罗宾斯
出版社: 机械工业出版社
原作名: Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics, Fourth Edition
译者: 谢合亮 / 张晶 / 靳志伟
出版年: 2014-9-1
页数: 585
装帧: 平装
ISBN: 978711147168

web前端工程师修炼之道作者简介：

Jennifer.Niederst.Robbins，资深Web设计师、信息架构师，从事Web设计20余年，在Web设计方面有独到的见解与认识。她于1993年设计了全球第一个商业网站——O’Reilly全球网络导航器（O’Reilly.Global.Network.Navigator，GNN）。她曾在马萨诸塞艺术学院和约翰森威尔士大学任教，并且经常在全美许多重要会议上发表演讲，广受欢迎。她现在是O’Reilly.Media的数码产品设计师，对信息架构、交互设计、网站制作、应用程序开发和电子书拥有浓厚的兴趣。除了本书，还著有《Web Design in a Nutshell》和《HTML5 Pocket Reference》。

web前端工程师修炼之道目录：

前言 1
xx部分 开始起步
第1章 我从哪里开始 9
我该从哪里开始呢 10
Web设计师是做什么的 10
我需要学习哪些语言 16
我需要购买些什么 19
你学会了什么 24
自我测验 25
第2章 Web是如何工作的 27
互联网与Web 27
提供你的信息 27
关于浏览器 29
网页地址（URL） 30
网页结构 32
小结 36
自我测验 38
第3章 Web设计基本概念 39
眼花缭乱的设备 40
与标准一致 41
逐步提高 42
自适应Web设计 43
可访问性——所有用户，一个网站 46
连接速度的要求（站点性能） 48
自我测验 50
第二部分 HTML结构化标记
第4章 创建简单网页（HTML概述） 53
一个网页，一步一步来 53
开始之前，启动文本编辑器 54
第1步：从内容开始 57
第2步：文档结构化 59
第3步：确定文本元素 62
第4步：添加图像 65
第5步：使用样式表改变外观 68
当网页出错时 69
验证你的文档 70
自我测验 71
元素回顾：文档结构 72
第5章 标记文本 73
段落 74
标题 74
列表 77
更多内容元素 80
组织网页内容 83
内联元素综述 88
泛型元素（div和span） 99
特殊字符 103
小结 104
自我测验 106
元素回顾：文本 107
第6章 添加链接 109
href特性 110
链接到Web上的网页 111
站内链接 112
以新浏览器窗口为目标 122
邮件链接 123
电话链接 124
自我测验 125
元素回顾：链接 126
第7章 添加图片 127
首先，关于图片格式的信息 127
img元素 128
窗口中的窗口 134
自我测验 135
元素回顾：图片 135
第8章 表格标记 137
如何使用表格 137
X小表结构 139
表头 142
合并单元格 143
表格可达性 146
小结 148
自我测验 150
元素回顾：表格 150
第9章 表单 151
表单如何工作 151
表单元素 153
变量和内容 155
重要表单控件综述 156
表格的可访问性 175
表单布局和设计 177
自我测验 179
元素回顾：表单 180
第10章 HTML 5 185
在通往XHTML 2的路上发生的有趣的事 186
标记部分 188
遇到API 193
视频与音频 195
canvas 202
小结 205
自我检测 206
第三部分 表现层的CSS
第11章 CSS入门 211
CSS的益处 211
样式表如何工作 213
大概念 218
继续使用CSS 224
自我测验 226
第12章 格式化文本（使用更多选择器） 229
字体属性 229
改变文本颜色 246
更多选择器类型 247
字行设置 253
下划线和其他的“修饰” 256
改变字母大写 256
空格 257
文本阴影 258
改变列表的数字编号 263
自我测验 265
CSS回顾：字体和文本属性 267
第13章 颜色和背景（附加更多选择器和外部样式表） 269
指定颜色值 269
前景色 276
背景色 277
使用不透明度 278
伪类选择器简介 279
伪元素选择器 282
属性选择器 284
背景图像 287
快捷背景属性 296
像彩虹一样（渐变） 299
X后，外部样式表 303
自我测验 306
CSS回顾：色彩和背景属性 307
第14章 盒子思想（填充、边框和空白边） 309
元素盒子 309
指定盒子尺寸 310
填充 316
边框 320
空白边 332
分配显示角色 337
给盒子添加阴影 338
自我测验 340
CSS回顾：基本盒子属性 342
第15章 浮动与定位 345
普通流 345
浮动 346
定位基础 360
相对定位 361
xx定位 362
固定定位 372
自我测验 373
CSS回顾：浮动和定位属性 374
第16章 使用CSS进行网页布局 375
网页布局策略 375
网页布局技术 382
使用浮动元素的多栏布局 382
定位布局 394
自上而下的栏目背景 397
自我测验 400
第17章 过渡、变换和动画 401
很容易做到（CSS过渡） 401
CSS变换 412
关键帧动画 422
自我测验 425
CSS回顾：过渡、变换和动画 427
第18章 CSS技术 429
一个干净的石板（CSS重置） 429
图像代替技术 431
CSS sprite 432
样式化表单 436
样式化表格 442
简单的自适应Web设计 445
小结 456
自我测验 456
CSS回顾：表格属性 458
第四部分 行为
第19章 简介 461
什么是 461
给网页添加 464
脚本剖析 465
浏览器对象 478
事件 478
综合应用 481
自我测验 483
第20章 使用 485
遇见DOM 485
polyfills 493
库 497
小结 501
自我测验 502
第五部分 创建Web图像
第21章 Web图像基础 505
图像来源 505
格式简介 508
图像尺寸和分辨率 520
使用透明度 524
SVG简介 531
小结 536
自我测验 536
第22章 精简Web图像 539
通用图像优化策略 539
优化GIF图像 541
优化JPEG图像 544
优化PNG图像 550
优化到指定大小 551
小结 552
自我测验 552
附录A 答案 555
附录B CSS3选择器 583

web前端工程师修炼之道精彩文摘：

第1章
我从哪里开始
第2章
Web是如何工作的
第3章
Web设计基本概念
第1章 我从哪里开始
Web的存在已经有20多年了，先后经历了令人兴奋的早期扩张、网络泡沫的破裂、创新的重生。有一件事情是肯定的，那就是网络作为沟通和商业的工具正在成为现实。而且不仅如此，网络也在影响着智能手机、平板电脑、电视等。懂得如何设计网页的程序员迎来了前所未有的机会。
通过教授Web设计课程和工作的经历，我可以满足所有对Web设计感兴趣的人的需求，无论这些人拥有什么样的背景。在此，请允许我介绍一下：
“我有17年的印刷设计师从业经验，现在我所有的客户都需要Web设计服务。”
“我曾在一个小办公室里做过秘书。我的老板曾要求我制作一个很小的内部网站以方便员工分享公司信息。”
“我做程序员很多年了，但是我希望在视觉设计上一展身手。我感觉Web是一个很好的学习新技术的机会。”
“我是一个艺术家，我想知道如何在线获取我的画和雕塑的样品。”
“我曾在高中简单接触过Web设计，我想它可能成为我今后的生活依赖。”
无论动机如何，都会遇到一个相同的问题：“我该从哪里开始呢？”看起来有太多的东西需要学习，所以往往不知道该如何起步。但是你必须从某个地方开始。
本章试图从学习曲线的角度来回答准备学习的人最常遇见的问题。本章将介绍与Web设计相关的规则、技术和工具。
我该从哪里开始呢
根据你的背景和目标，你的起点也应该有所不同。然而，对于每个人来说，第一步应当是理解Web和网页运作的基本原理。现在你看的这本书将教给你正确的学习方法。一旦了解了基本知识，Web上和书店图书馆有很多资源可以方便你进一步学习特定的领域。
同样，学习Web设计也有许多不同目标，有的只是为了创建一个自己的站点，有的却要把它当做职业。你可以是能够提供全套服务的一个网站开发者，也可以只把它当做一项技术。你完全可以自由选择。
如果你学习Web设计只是出于爱好，或者你需要发布一个或两个Web项目，你会发现要完成手头的任务，你可能需要做的仅是个人研究（就像阅读本书），利用现有的模板，或者购买一个可视化的Web设计工具（如Adobe.Dreamweaver），可以帮你完成手头的任务。还有许多继续教育项目提供关于Web设计和制作的一些入门级课程。
如果你想把Web设计作为职业，那么你就需要把技术锤炼到专业水平。雇主可能并不需要你具有Web设计学位，但是他们期望看到一些样本站点，以便证明你的技术和经验。这些站点可能只是课堂作业、个人项目，也可能只是为了做些小生意而制作的简单站点。重要的是，这些站点看起来要专业，在后台使用清晰的HTML、样式表和可能的脚本。获得一个基本的工作，并且和一个团队一起工作，可以了解大型站点是如何构建的，同时可以帮助你确定Web设计的哪些方面是你真正喜爱的。
Web设计师是做什么的
多年来，术语“Web设计”已经成为包罗万象、包含许多不同的学科的一个学科，包括用户体验设计、文档标记和编程等。本节介绍最基本的一些东西。
如果你正在设计自己的一个小网站，你会需要多个头衔。当然你可能没有注意到。想一下，日复一日的家居生活，需要你既是兼职厨师、清洁工、会计师、外交家、园丁，还得是建筑工人，但对你来说，都只是你的生活而已。同样，作为一个Web设计师，你需要是一名兼职平面设计师、作家、HTML作者和信息架构师，但对你来说，它都只是 “网页制作”而已。除此之外没什么可担心的。
如果你不具备某些技能，你可以聘请一些专家。例如，我自1993年以来就创建网站，当我的客户需要交互功能时，我仍然聘请程序员和多媒体开发者。这可以让我专注于我做的那一部分（对我来说，主要工作是内容组织、界面和视觉设计）。
大型网站几乎都是由一个团队创建的，从几人到数百人。在这种情况下，每个团队成员专注于网站建设过程的一个方面。如果你的情况确实如此，你可能只会用到你目前的一套技能（写作、Photoshop和编程等）或者可以把你的兴趣投入新的方面。
我把“Web设计”分成了多种角色和责任，共有四个大类：设计、开发、内容策略和多媒体。
设计啊，设计！这听起来很简单，但即使这样简单的要求，在建立站点的过程中也已经分成多种专业。虽然这里有一些有关设计一个站点的新工作的介绍，但请记住学科往往是重叠的，自称“设计师”的人往往需要承担多种职责（如果不是全部）。
用户体验、交互和用户界面设计
通常情况下，我们认为设计是应该思考东西看起来怎么样。在Web上，第一件事是设计的站点是如何工作的。在选取颜色和字体前，重要的是要确定站点的目标、站点将如何使用以及访客如何在网站内浏览。这些任务属于学科的交互设计（Interaction Design，IxD）、用户界面（User Interface，UI）设计和用户体验（User.Experience，UX）设计。这些设计中有很多重叠的关系，由一个人或一个小组来处理这三种设计屡见不鲜。
交互设计师的目标是尽可能使站点方便、高效、愉快地使用。用户界面设计与交互设计密切相关，用户界面设计往往是更狭隘地专注于页面的功能组织以及具体工具（按钮、链接、菜单等），用户通过这些来导航内容或完成任务。
在Web设计领域的新生的职位是用户体验设计师。 UX设计师需要更全面的看法，以确保整个站点的体验是良好的。
UX设计基于观察和访谈理解用户的需求。Donald.Norman（他创造了UX这个词）认为，用户体验设计包括“用户与产品交互的各个方面：它是如何感知、学习和使用的”。对于一个网站或应用程序来说，这包括视觉设计、用户界面、内容的质量和信息，甚至是站点的整体性能。用户体验必须符合该组织的品牌和业务目标，才能取得成功。
IxD、UI或UX设计师可能提供的文档包括：
用户研究和测试报告
了解用户的需求、欲望和局限对于站点或Web应用程序设计成功至关重要。这种设计方法围绕用户的需求，是以用户为中心的设计（User Centered.Design，UCD），它是当代设计的核心。站点设计通常从研究用户开始，包括访谈和观察，以更好地理解站点如何解决问题，或者将如何使用。对于设计师来说，在设计过程的每个阶段进行用户测验以确保其设计的可用性是非常普遍的。如果用户很难弄清楚在哪里可以找到的内容或如何移动到一个过程的下一个步骤，就需要回到绘图板重新设计了。
线框图
线框图对每个内容类型和窗口都使用大纲来显示网页结构（见图1-1）。线框图的目的是表明屏幕如何划分，并指出导航、搜索框、表单元素等功能和内容都放在哪里，因此线框图没有任何装饰或图形设计。它们通常只是注释，仅仅说明事情应该如何工作，以便于开发团队知道如何去做。
站点图
站点图表示站点作为一个整体与单独的网页之间如何链接的结构。图1-2显示了一个非常简单的站点图。某些站点图填满整个墙壁！
故事板和用户流程图
故事板是从一个典型用户（UX的术语是一个角色）的角度来看站点或应用程序的路径。它通常包含一个脚本和“场景”，场景包括屏幕的观点或用户与屏幕的交互。其实，故事板旨在说明完成任务所需要的步骤、可能的选项，并且介绍了一些标准的页面类型。图1-3显示了一个简单的故事板。用户流程图是显示如何连接一个站点或应用程序的各个部分，它往往专注于技术细节，而不是讲故事。例如，当用户这样做时，它会触发服务器上的某个功能。对设计师来说，使用用户流程图来描述某个过程的步骤是很常见的，如描述用户注册或网上支付过程中的步骤。

免责声明：

web前端工程师修炼之道来源于网络，仅用于分享知识，学习和交流!请下载完在24小时内删除。
web前端工程师修炼之道禁用于商业用途！如果您喜欢《web前端工程师修炼之道》，请购买正版，谢谢合作。
爱学习，请到3322软件站 / 查找资源自行下载！