《Web前端工程师修炼之道》[45M]百度网盘|亲测有效|pdf下载

产品特色

编辑推荐

适读人群：本书尽管是面向初学者的，但也涉及高级主题，这有助于读者全面梳理所学内容，并明确发展方向。本书不仅适合学生，也适合有一定背景和技能的专业人士。

这书是一本完整的Web 设计和制作的入门指南。全书七百多页！详解WEB前端基础知识，如HTML、CSS、JavaScript、Web图像制作等等，带领读者学习网站开发的全过程。无论你是一名初学者还是想进一步提高自己的网页设计技能，本书都能为你提供极具参考性的信息。

内容简介

你是否曾想过自己创建网页，但苦于没有经验？那么从现在开始学习吧！本书由浅入深地讲解了Web设计的一些重要概念、基本原理，以及HTML、CSS和JavaScript的具体使用方法与技巧。当你读完本书后，将会掌握创建适用于移动设备的多列页面的技巧。

每章都提供了一些练习和小测验，帮助你了解不同的技术，巩固对重要概念的理解。

第5版进行了全面更新和修订，涵盖了Web前端开发所需的一切，无论对初学者还是对想提高已有技能的专业开发人员，本书都是理想的选择。

【本书主要内容】：

●使用文本、链接、图像、表格和表单来构建HTML页面。

●使用CSS调整颜色、背景、页面布局以及格式化文本，甚至是实现简单的动画效果。

●学习JavaScript的工作原理及其在Web设计中的重要性。

●创建并优化Web图像，加快图像下载速度。

【本版新增内容】：

●使用CSS Flexbox和网格实现复杂灵活的页面布局。

● 学习自适应Web设计的细节，使Web页面在所有设备上看起来都很棒。

● 熟悉现代Web开发者工具包中的命令行、Git和其他工具。

●了解SVG图像的超强能力。

【本书的组织结构】：

本书分为六部分，每一部分都是Web开发的一个重要方面。

第①部分：开始起步

第①部分为本书后面的学习奠定了基础。我从关于Web设计的一些重要信息开始讲述，包括你可能会扮演的各种角色，你可能会学到的技术和工具。你会学到HTML和CSS，并学习Web和网页一般如何工作。我也会介绍一些重要的概念，带你体会现代Web设计师的思想。

第②部分：

第②部分涵盖每个元素和属性的本质以及语义结构。我们将讨论如何标记文本、链接、图像、表格、表单和嵌入式媒体。

第③部分：表现层的

在第③部分，你会学习使用CSS来改变文本的外观，为页面创建多列布局，甚至添加基于时间的动画、交互等。该部分还介绍了自适应Web设计，以及作为现代开发人员工作流一部分的工具和技术。

第④部分：

在第④部分，Mat Marquis从JavaScript的语法开始讲解，带领你逐步学习变量、函数。你也会学到JavaScript的使用方式（包括DOM脚本），以及已有的JavaScript工具（如polyfill和库），即便你还没有准备好从头开始编写代码，这些工具也可以帮助你更快地使用JavaScript。

第⑤部分：

第⑤部分介绍Web适用的各种图像文件格式，提供了将其作为自适应工作流的一部分进行选择的策略，而且描述了如何进行优化才能使文件尺寸尽可能小。此外，该部分还包括一个关于SVG图形的章节，这为自适应设计和交互式设计提供了极大的便利。

第⑥部分：附录

第⑥部分包含参考资料，如测验答案、HTML全局属性列表和CSS选择器，还介绍了HTML5及其历史。

作者简介

Jennifer Niederst Robbins 资深Web设计师，有25年行业经验，在Web设计方面有独到的见解与认识，全球第①个商业Web网站——O’Reilly的“全球网络导航器”（Global Network Navigator，GNN）的设计者。她是Artifact Conference的创始人和组织者，该会议致力于解决与移动Web设计相关的问题。她是全美广受欢迎的会议演讲者，著有Web Design in a Nutshell和HTML5 Pocket Reference。

内页插图

精彩书评

★无论你是一名初学者还是想进一步提高自己的网页设计技能，本书都能为你提供极具参考性的信息。我力求生动地展现每一个设计细节，配以大量的练习和实例帮助你掌握新的技术。阅读本书就好像跟随我在课堂中学习一样，轻松且愉悦！——Jennifer Niederst Robbins

★“与其他所有从头开始讲解的书不同，本书会让你快速地了解核心知识。Jennifer会解释你所需要的每一个设计细节，包括一些非常高级的概念。”——Jen Simmons，Mozilla的设计者，CSS工作组成员

前言/序言

【前言】

非常欢迎阅读第5版！

几十年来，我一直在像这样的书中记录Web设计和开发工作，着迷于Web环境是如何从一个版本变化到另一个版本的。第5版也不例外!这个版本不仅比上一版多了将近200页，而且还有一些重要的更新和值得注意的新增内容。

首先，一些在上一版中是全新甚至实验性的技术已经很好地实现了—HTML5得到广泛应用，CSS正朝着模块化方法推进。我们在围绕着各种各样的设备进行设计。现在自适应Web设计（RWD）是构建网站的实际方法，因此，RWD在本版中占据了单独的一章（第17章）。在上一版中，我们讨论了如何处理自适应图像标记，而在第5版中，新的自适应图像元素被标准化了并得到很好的支持（第7章）。我们已经掌握了处理这个移动事物的窍门!

在过去的几年里，我看到了很多Web设计的巨大变化，而这一次，Flexbox和网格（Grid）从根本上改变了我们的设计方式。正如我们看到CSS将基于表的布局和1像素间隔的GIF从困境中解脱出来一样，Flexbox和网格最终将我们以前基于浮动的布局技巧抛到了一边，这简直就是一场革命。25年后，拥有一个实实在在的布局解决方案是令人耳目一新的。这一版新增了一个关于使用Flexbox和网格进行正确页面布局的章节（第16章）。

尽管HTML、CSS和JavaScript是Web开发的核心知识，但这门学科一直在发展，而且坦率地说，也在变得更加复杂。因此，有必要介绍一些新的工具，如CSS处理器、特性检测、命令行、任务运行程序和Git等（第20章）。当然，这需要你学习更多的东西，但好处是得到一个精简、更有效的工作流程。

对我个人来说，最大的惊喜是第4版以来网络图像制作方面发生了巨大的变化。除了引入PNG格式外，图像章节在过去20年里基本没有变化。但这次不是这样了！旧格式GIF正处于“退役”的边缘，PNG成了默认配置，这要归功于它的性能优势和新工具，甚至可以让更小的8位PNG包含多个级别的透明度。但是，PNG必须密切关注WebP，这是本书第一次提到WebP，其可能会在文件大小和功能方面成为强有力的竞争者。然而，最重要的关于Web图像的消息是SVG（可伸缩矢量图形）的出现。多亏了广泛的浏览器支持，SVG从上一版中的未来展望一节变成了本版中完整的应用实践一章（第25章）。

与前4版一样，无论初学者的背景是经验丰富的平面设计师、想扩展技能的程序员以及任何想学习制作网站的人，本书都可以满足需求。我已经尽最大努力把自己初学Web设计课程的经验融入本书中，并提供了练习和测验，这样你就可以获得实操经验，并且可以检查学习进度。

无论你是专门阅读本书，还是将其作为Web设计课程的辅助读物，我都希望它能给你一个良好的开端，并预祝你学得开心。

【本书的组织结构】

本书分为六部分，每一部分都是Web开发的一个重要方面。

第一部分：开始起步

第一部分为本书后面的学习奠定了基础。我从关于Web设计的一些重要信息开始讲述，包括你可能会扮演的各种角色，你可能会学到的技术和工具。你会学到HTML和CSS，并学习Web和网页一般如何工作。我也会介绍一些重要的概念，带你体会现代Web设计师的思想。

第二部分：HTML结构

第二部分涵盖每个元素和属性的本质以及语义结构。我们将讨论如何标记文本、链接、图像、表格、表单和嵌入式媒体。

第三部分：表现层的CSS

在第三部分，你会学习使用CSS来改变文本的外观，为页面创建多列布局，甚至添加基于时间的动画、交互等。该部分还介绍了自适应Web设计，以及作为现代开发人员工作流一部分的工具和技术。

第四部分：JavaScript行为

在第四部分，Mat Marquis从JavaScript的语法开始讲解，带领你逐步学习变量、函数。你也会学到JavaScript的使用方式（包括DOM脚本），以及已有的JavaScript工具（如polyfill和库），即便你还没有准备好从头开始编写代码，这些工具也可以帮助你更快地使用JavaScript。

第五部分：Web图像

第五部分介绍Web适用的各种图像文件格式，提供了将其作为自适应工作流的一部分进行选择的策略，而且描述了如何进行优化才能使文件尺寸尽可能小。此外，该部分还包括一个关于SVG图形的章节，这为自适应设计和交互式设计提供了极大的便利。

第六部分：附录

第六部分包含参考资料，如测验答案、HTML全局属性列表和CSS选择器，还介绍了HTML5及其历史。

【译者序】

Web已经存在近30年，经历了早期扩张、萧条、重生，以及在此过程中的不断演变。有一点是肯定的：Web作为一种交流和商业媒介将会继续存在下去。不仅如此，它还在智能手机、平板电脑、电视等设备上找到了出路。从来没有这么多可以运用Web设计技巧的机会。

无论动机是什么，第一个问题总是一样的：“我从哪里开始?”可能看起来要学的东西堆积如山，弄清楚从哪里介入并不容易，但你必须从某个地方开始。

本书是一本完整的Web 设计和制作的入门指南。它分为六大部分：关于Web和Web设计的基本知识、HTML、CSS、JavaScript、Web图像制作和附录。实践是最好的学习方法，因此本书给出了很多练习，同时还提供了在线资料。

同之前的版本相比，第5版增加了一些新的主题，例如：

CSS Flexbox和网格布局，主要用于复杂和灵活的页面布局。

自适应Web设计，使Web页面在不同尺寸的屏幕上都能正常工作。

命令行、Git和其他一些现代Web开发工具。

关于SVG的新章节，以及如何在自适应布局中使用它。

本书作者Jennifer Niederst Robbins是早期的Web设计师之一，从1993年就开始设计网站，是第一个商业网站—O’Reilly的“全球网络导航器”（Global Network Navigator，GNN）的设计师。自1995年以来，她一直在编写有关Web设计的书籍。

本书尽管是面向初学者的，但也涉及高级主题，这有助于读者全面梳理所学内容，并明确发展方向。因此，本书不仅适合学生，也适合有一定背景和技能的专业人士。只要你的工作与创建、改造或者升级网站有关系，或者打算以后从事与Web相关的工作，都应该看看这本书。

由于翻译水平和时间有限，译文难免存在错误和疏漏，恳请读者批评指正。

刘红泉

【序言】

如果你到硅谷旅行，在世界上一些最著名的互联网公司的全球总部之间穿梭，可以前往计算机历史博物馆。漫步在博物馆里，寻觅古老的大型机和穿孔卡的故事，你会发现这是万维网的开始。在一张与书籍同名的软盘上有一份Mosaic浏览器的副本，有一份装在盒子里出售的Netscape Navigator的副本，还有一份叫作“盒子里的互联网”的东西—一个最畅销的Windows互联网解决方案。当然，其中还有一些网站。一些最早、最著名、最重要的网站都在永久性地展出，包括1993年的由本书作者设计的O’Reilly的“全球网络导航器”。早在大多数人知道网络存在之前，甚至在很多人出生之前，Jennifer就在忙着设计第一个商业网站。她从一开始就在那里，见证、参与了网络发展的每一个阶段。

本书现在已经是第5版，里面有很多新的内容以及对早期内容的更新。

经常有人问我：“学习Web技术的最佳资源是什么?”反正我是通过读书来学习的。博客文章很棒，但你也需要全面深入地了解这个主题。起初，所有的书都是针对初学者的，讲述HTML、URL以及如何使用浏览器。当CSS出现时，关于CSS的书假设你已经在使用HTML了，教你如何切换到新技术。然后CSS3出现了，所有的书又在教我们如何将新的CSS属性添加到对CSS2的理解中。当然，总是有适合初学者的书，但它们是超级基础的，从没有触及适用于专业人员的专业技术。每一代的新书都假设你具备了之前的知识，这对从事这个行业的人来说太棒了，但对新手来说却不适用。

那么，在这个世界上，你应该如何阅读20多年来的技术，丢弃过时的东西，记住仍然正确的东西呢？如果根本不知道日常工作中“真正的专业代码是什么”这样的基础知识，你怎么能开启一段职业生涯呢？

这不可能。这就是为什么如今人们让我推荐一本书时，我只会给出一个答案，那就是本书。

你现在读的这本书不需要任何预备知识。你不需要以前制作过网页，也不需要知道在哪里可以获得代码编辑器。本书从头开始讲解Web设计。然而，与其他所有从头开始讲解的书不同，本书会让你快速地了解核心知识。Jennifer会解释你所需要的每一个设计细节，包括一些非常高级的概念。本书中充满了来自顶尖专家的前沿知识和内部知识。

老实说，我不知道她是怎么做到的。一个人怎么能同时教授基础知识和高级知识呢？通常情况下，你会分几年学习这些东西，同时你会有一个痛苦的过程。在这里，无论你基础如何，Jennifer都会带你走得更远。我们中的每一个人，包括我自己—CSS工作组（发明新CSS技术的那些人）成员—都可以从本书中学到很多东西。每次我拿起它时都有这样的感觉。

请注意页边的注释，阅读她推荐的网站，观看视频。Jennifer为你提供了一条成为专业网络技术人员的捷径。关注她提到的人，阅读他们建议的链接，这些人可能是你未来的同事。要敢于梦想你会遇见他们，毕竟他们也只是推特用户而已。这是一个小世界，但充满了真实的人，你可以成为其中的一部分，本书会帮你入门。

Jen Simmons

Mozilla的设计者和开发倡导者，CSS工作组成员

查看全部↓

Web前端工程师修炼之道