作者：聂常红 刘伟

出版社：人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

前端HTML+CSS修炼之道(视频同步+直播)试读：

前言

这是一本 Web 前端开发入门的学习书籍，它完成于我创办 “妙味课堂” 的七年后。在这七年间，有许多朋友都问过我同一个问题：我想学习前端开发，能不能给我推荐一本好书？每次遇到这种问题，我多少还是有些犯难的。虽然市面上好书不少，但细琢磨起来，给别人推荐一本技术类书籍，最起码需要满足两个条件：

一是自己看过以后，感觉这本书确实好；

二是这本书对学习者真得有帮助。

先说第一个条件，怎样才算是自己感觉真得好呢？无非是这种情况：自己曾经在某个阶段，被某些技术问题所困扰，就在这段迷茫期，刚好遇见一本好书，它恰到好处地解决了我的困惑，因此对这本书印象深刻、感觉很好。

第二个条件说的是你觉得好的书，如何能确保其他人也感觉好呢？为了满足这个条件，我需要去了解咨询者的学习基础，例如他学到了哪个阶段？做了哪些练习？经常遇到的困惑是什么？他的解决方案通常是什么？即便如此，阅读风格也会因人而异，有些人喜欢阅读幽默风趣比喻颇多的书籍，而有些人却不喜欢太多花里胡哨的内容，认为思路清晰、简洁明了地把问题描述清楚就行。因此，如果你完全站在对方的立场、设身处地去想这些实际问题，那么推荐一本书这种看似简单的小事，也变得困难了 。

因此，面对推荐书籍这样的问题，我的回答是这样：你想买一本真正适合自己的书，那你最好到书店里，亲自去翻翻那些书，如果遇到你看了超过 15 分钟以后还不愿撒手的书，那就果断把它买走吧！这本书应该适合当下的你。

这样的回答并不能让所有的咨询者满意，他们会执着地继续追问下去，直到我给他们推荐几本市场上卖得好的书，才十分感谢地离开。

好在这样的尴尬状况终于结束了，因为我们自己的图书即将出版！我可以非常兴奋、郑重其事地将这本书推荐给所有前端初学者，并且告诉你这本书为何适合你，因为这本书至少有以下这些特点。

第一，这本书完全根据妙味课堂的培训大纲改编而来，它既源于实战，又十分注重系统性和专业性，最关键的是：当你在学习这本书的知识点时，如果遇到技术问题，随时可以到妙味课堂的社区中去提问。妙味课堂是资深的前端开发培训机构，妙味的讲师们每天都在回答众多初学者的各类技术困惑，因此，我们极有把握在你简短的提问中准确判断出你的困惑是什么，并指导你去解决它。

第二，为了保证妙味课堂的教学质量，我们坚持做实体培训，经过七年时间的一线前端开发培训，我们深知学员会在什么地方有困惑，会在什么地方容易犯错误，这些问题的解决办法都汇集在妙味课堂的视频库。现在，我们把与本书相关的视频资源共享出来，希望能够帮助到正在用本书学习前端开发的你。

第三，在编写本书时，我们把妙味课堂多年来精心设计的案例（与本书相关的部分）几乎全都融入到本书中，你完全可以像我们的实体学员一样，一边学习一边动手实战！实战是学习的必经之路，也是检测是否真正掌握知识的关键！更何况，当你遇到练习上的难点时，妙味课堂社区上有非常多热心的学员与你一起讨论交流，讲师也会参与其中。在这种相互鼓励、相互帮助的氛围中，在讲师频繁到社区解答各种技术问题的条件下，还有什么理由学不会呢？

接下来我想和大家聊聊关于 Web 前端开发的学习路径。在此之前，你需要了解“Web 前端开发” 这个职业的工作内容。职场上的 “Web 前端开发工程师”需要解决的问题主要有四类：

一是浏览器端的各种界面展示问题；

二是产品与用户之间的一系列人机交互问题；

三是前端与后台开发者之间的数据处理问题；

四是产品功能上的程序逻辑问题。

在前端的表现形式上，会从 PC 端一直延伸到移动端。因此，学习前端开发需要经历以下几个阶段。

第一阶段：要把设计师精心设计的效果图和网站内容，通过一系列的技巧和编码方式，在浏览器上完美展现。以 PC 端为例，想要达成这个目标，意味着你必须要掌握 HTML 和 CSS，并能使用一些其他的辅助软件工具（如 PS 、编辑器、浏览器插件等），这样，才能在 PC 端浏览器上把设计师设计的静态图片变成浏览器内高效运行的 HTML 文件。那怎样才能算掌握HTML 和 CSS呢？你需要知道 “布局”是怎么回事，需要熟悉各种各样的页面结构制作技巧，需要知道如何用运用恰当的 HTML 标签并以最佳的语义化去呈现，还需要能够编写灵活且易维护的 CSS 代码……最后架构出 PC 端的整套静态页面，使得它在不同的浏览器内都能完美展现。这是学习前端开发的基础，非常关键！不论前端开发的新技术迭代有多么迅速，都必须要先踏踏实实地掌握HTML和CSS。这也是本书的定位。

第二阶段：能够完成整套的静态页面搭建之后，可以开始思考人机交互的诸多问题。作为前端开发人员，需要能开发出一个用户体验完善的网站界面。例如，看到一则网页新闻，被网页里面的一张小图片所吸引，轻点鼠标，图片即可放大呈现，左右滑动时图片还能以超细腻的动画方式进行切换。这是一个简单的交互体验，却能让用户产生好感，感觉这个网站是有生命的、有趣味的，这样，用户才愿意花更多时间停留在你的网页中。除了考虑用户体验，还要考虑各种数据交互问题、功能逻辑问题等，这些点点滴滴的问题组合起来，共同构成网站体验至关重要的环节。如果想做到这些，需要紧密配合上一阶段所讲述的布局结构，以及更多 CSS 命令，还需要你具有慎密的思维逻辑。这些问题是我们正在编写的JavaScript一书需要去解决的。

第三阶段：征服了PC 端大屏幕上的一切，可以转战到一块更小的屏幕：移动端！别小看这个小小的屏幕，相对PC端，移动端对新特性的支持变多了，度量单位也随之变化，各种脑洞大开的移动端适配技巧纷纷登场，诸多挑战性能极限的解决方案也不断出炉。无论是单指滑屏、双指操作，还是长按短触、摇晃手机……任何用户行为，移动端皆可随其变化而发生响应。那些为了解决某些问题而诞生的各种框架、各类组件库等，但凡工程化级别的开发人员，必不会对其感到陌生。我们想要征服移动端、想要构建各种易用性更佳的移动化产品，就必须遵循移动端开发的规则。带着镣铐却仍要跳出更精彩的舞蹈，这才是高手的风范！这些精炼的内容，将会在我们后续推出的移动端开发一书中去呈现。

经历了以上三个阶段的学习，算是踏上了前端开发工程师修炼之路。在掌握了诸多开发技巧过后，应当要实践更多项目，以此来验证自身所学。系统化的学习，一定是循序渐进的，这是我们多年实体培训和课程优化、改革的心得。我希望这套打磨了七年时间、经过上万名实体学员检验的课程体系，能给你带来实质上的帮助。

值得一提的是，这些年妙味学员已经遍布全国各大 IT 公司，在腾讯、阿里、网易、新浪、360、小米、京东等公司都能看到他们奋斗的身影。他们时常回到妙味课堂的社区，和大家讨论技术问题。通过社区，除了技术问题外，还可以探讨职业规划、公司招聘等问题，也可以看看他们在技术上遇到的新问题，以及他们的解决方案。

最后，回到这本书的话题上。我们录制了一个短视频，请在学习之前，扫描封面的二维码进行播放。短视频中详细介绍了高效地利用本书进行学习的方法，例如：本书的案例源码下载地址、作业源文件下载方式、章节相对应的视频观看方式、提问和问题解答通道、QQ 交流群、作品提交平台、问题反馈等。另外，要强调一点：购买本书后免费观看妙味课堂视频的有效期是1年。因为我们认为，在本书和视频的帮助下，你可以很快打好基础，成为前端开发的高手！

这套书籍的出版承载了我们极大的期望，尽管我们竭尽全力去编写，但书稿中难免会有不妥之处，若你在阅读本书时发现任何问题，或有不认同之处，请给我发送电子邮箱：leo@miaov.com，不胜感激。致谢

在这里我希望表达内心诚挚的感谢，因为在这本书的形成过程中，有一些至关重要的人物，在多次重要时刻给予了我极为重要的帮助。首先，我要感谢人民邮电出版社的税梦玲女士，如果不是她的出现，我们出书的计划恐怕还要继续延后，在日常琐事的纷扰和拖延症的双重夹击下，若不是她积极主动努力安排，且在诸多问题上给予专业的指导，恐怕我们的书稿会一再延期、永无尽头……其次，我要感谢广州大学华软软件学院的聂常红老师，感谢她极为认真地参与本书架构体系的讨论、感谢她责任感十足地撰写书稿，并以她精湛的技术实力不断加速本书成稿进度，假如没有她帮我们整理此书，天晓得以我们口语化的表达方式，何时才能成书！最后，我还要感谢多年来坚持为妙味课堂默默付出的各位老师们，若不是他们不断更新课程案例、不断改良课程大纲、长期持续地贡献各种精巧有趣的课件代码，也就无法形成本书的课程体系和诸多令人拍案叫绝的课后练习，参与本书案例代码编写，以及对书稿进行了耐心校对的妙味老师有：莫涛、周逸之、钟毅、王允、倪志鹏、付强……感谢你们多年来的不断努力与辛勤付出！妙味课堂因为有你们才能绽放光彩！能与你们共事，是我此生最大的幸运！妙味课堂创始人：刘伟（Leo）2017年6月12日▶▶第1章探本溯源，前端开发基础漫谈

看文字太累？那就看视频！

妙味视频

遇到困难？去社区问高手！

技术交流社区

在步入代码世界大门之前，我们很有必要来一场 “热身运动”，譬如第一章所展示的这些基础知识，熟悉它们，就是你大展身手的开端。

许多公司都有制作网站的需求，他们希望把自己的产品或服务通过互联网展示给更多用户。在这种情况下，我们需要了解一个网站的制作过程会涉及哪些环节。一般来说，网站的诞生过程会经历这些环节：“网站策划 >网页设计 >前端开发 > 后端开发 > 测试发布”。从这个流程来看，我们的网站开发是一个系统工程，它需要多个部门之间紧密配合，而 “前端开发” 这个环节处于整个系统工程的中间部位，起到承上启下的核心作用，因此 “前端开发工程师” 这个职位越来越受到重视。接下来我们先和大家详细聊聊关于前端开发这些事。1.1 前端开发是做什么的

前端开发是从网页制作演变而来的，在国内被大家所认知并接受是在2005年之后。在2005年之前，处于1.0时代的Web并没有“前端”这个概念，此时的网页内容主要就是一些文字和图片，用户使用网站的行为也以浏览为主，这样的网页使用几个网页制作软件，诸如Photoshop+Dreamweaver+Flash就能制作出来。所以Web1.0时代的网页开发也叫网页制作。2005年之后，互联网进入Web2.0时代，对网页的开发要求越来越高，比起1.0时代，其开发难度加大，开发方式也有了本质改变，因此网页开发不再叫网页制作，而是叫前端开发。前端开发已经不再是掌握几个制作软件就可以做好的事了，它需要专业的前端工程师才能做好。随着互联网行业的发展，前端开发在产品开发环节中的作用变得越来越重要，因而近几年来前端工程师备受青睐，一般水平的前端工程师平均年薪可达10万元，资深前端工程师年薪高达20万~80万元。但就这样的年薪，很多企业还是很难找到合适的前端工程师。图1-1是从拉勾网（一个专注互联网招聘的平台）随机截取的一段招聘信息截图。图1-1 拉勾网招聘职位信息

从上述企业的招聘信息来看，前端行业的就业薪资是较为可观的。读者朋友们，如果你对此感兴趣并能潜下心来，花一段时间认真学习前端开发相关技术并不断实践的话，相信有一天你也能成为一名专业的前端工程师，拿到上述月薪将不再是遥不可及的梦想了。

各位读者朋友们，在我们即将踏入前端学习之旅前，我们必须了解一些基本问题，例如，前端开发既然不仅仅是网页制作，那它是什么呢？如何才能做好专业的前端开发呢？下面将为大家一一讲解。图1-2 2005年以前的网页

前端开发的主要工作就是开发用户操作界面，通俗来说就是网页。在2005年以前，网页功能比较单一，主要用于展示信息，在那个年代还不太注重交互和用户体验，网页内容也主要是文字和图片，如图1-2所示。2005年以后，网页除了展示信息以外，还需要美观的设计、炫酷的交互、良好的用户体验、复杂的业务逻辑处理、跨终端的适配兼容等，如图1-3所示。图1-3 2005年以后的炫酷的网页

如今这个时代，是讲究“颜值”和个人体验的时代。“高颜值”以及能与用户进行友好交互的网站会极大地吸引用户，用户会更加愿意深入地了解这样的网站。同时，“高颜值”以及交互性好的网站也能极大地提高网站的黏度（即网站黏滞程度，是吸引访客第二次访问或者在网页长时间停留的重要指标）。面对这些较高的要求，专业前端开发人员必须要具备以下能力。

1.复杂炫酷的页面交互设计能力

在进行前端开发时，开发人员除了要将设计图完美还原以外，还需要对交互效果进行编写。当用户打开页面的时候，如果页面风格新颖、交互炫酷，那他就会感觉你的产品技术含量很高。相反如果页面风格老旧、交互呆板，他就会觉得你的产品不行，不买你的账。因此，前端开发工程师要具备设计复杂炫酷页面的能力。例如：妙味官网首页的Logo以及导航，在鼠标悬停和移开时的不同效果，就体现了一种较为炫酷的交互效果，如图1-4所示。图1-4 交互炫酷的页面

2.良好的用户体验设计能力

用户体验是从用户的角度出发，不仅要把炫酷的视觉效果展现给用户，还要从功能上让用户有所感知。例如当用户注册微博账号时，电话号码提供错误或者没有输入密码，输入框右侧应有相应提示，如图1-5所示。这种用户体验的细节问题是否处理妥当，是判断一名前端工程师是否优秀的因素。

3.复杂的业务逻辑处理能力

现在的前端工程师不仅要制作页面，还需要配合服务端工程师一起去实现某些功能。例如，微博的文章发布、用户搜索、评论留言等内容的开发，前端开发工程师对后端数据接收是否成功、搜索结果状态以及评论留言是否合法等进行逻辑判断处理。因此，前端开发工程师要具备处理复杂业务逻辑的能力。图1-5 用户输入数据不正确时显示提示信息

4.能处理跨终端的适配兼容问题

近年来，智能手机发展迅猛，几乎人手一部，大街上随处可见“低头族”。随着手机、平板电脑等不同移动终端的普及，越来越多的人喜欢移动办公、移动学习、移动娱乐……人们经常会在不同的终端之间进行切换，因此，这就要求一个页面能实现跨终端的适配兼容——即能在不同终端中正确显示。比如域名www.miaov.com，在PC和移动端浏览器中的显示如图1-6所示，该示例给我们展示了该域名跨终端适配兼容的其中一种情况，这种适配兼容运用于网站内容比较复杂的情况，通过后台判断，渲染不同模板进行输出或跳转。

还有一种情况，就是各终端显示的页面内容完全一样，但页面布局等样式会根据终端屏幕的大小进行自动切换，如图1-7所示就是响应式设计。响应式网页开发主要是基于一套代码来适配不同尺寸的终端，有关响应式网页开发技术请阅读本系列丛书的响应式开发。图1-6 妙味官网 PC端和移动端的显示效果图1-7 响应式页面显示效果

综上所述，前端开发的工作主要是开发用户操作界面，其中涉及的内容包括实现炫酷的页面交互、提供良好的用户体验、配合服务端工程师处理复杂的业务逻辑和实现Web的跨终端适配兼容。至此，我们已经大致了解了前端开发到底是做什么的。现在的问题是如何成为一名合格的前端开发工程师？怎样才能将前端开发的各项工作做好？要成为专业的前端开发工程师、做好前端开发的各项工作，需要掌握哪些相关的技术呢？下一节我们将就这些内容进行介绍。1.2 前端开发技术

在上一节我们已了解前端开发是做什么的，现在的问题是，如何才能成为一名合格的前端开发工程师？相信这个问题是大家比较关心的。如果大家在一些搜索引擎上搜索前端开发工程师需要具备什么技能，可以看到搜索结果中会出现许多诸如要掌握“HTML”“CSS”“JavaScript”“DOM”“Ajax”“React.js”“vue.js”“node.js” 等技术的信息。一些想入行的朋友看到要学习这么多东西，可能会望而却步，不敢去了解它。其实前面所搜索到的结果，很多都是由前端开发的核心技术衍变而来的。不管前端开发技术怎么发展，万变不离其宗，它的核心都是HTML、CSS 和 JavaScript这三大技术。只要把这些核心技术的知识体系掌握扎实，就可以顺利地进行前端开发了，至于“React.js”“vue.js”“node.js” 这些技术，不妨等基础稳妥扎实后，再慢慢地学习，毕竟很多 “框架” 或 “类库” 都是流行一时，没准正在看本书的你在学完本书后发现，有些技术早不流行了，而那些原生语言却依然有着强悍的生命力，仍然活跃在各类商业应用中。因此，从这个意义上来说，作为开发者，掌握原生语言的开发技能才是重点。

在人类社会，语言是人与人之间用来沟通的方式，比如和英国人说话需要用英语，和俄罗斯人说话就得用俄语。在计算机世界，我们要与计算机进行信息的交流同样需要语言，这个语言称为计算机语言。人类语言存在不同的类型，计算机语言也同样存在不同类型。针对不同的应用，我们需要使用不同的计算机语言，比如针对服务端进行业务逻辑和数据的处理需要Java、C#、C++等计算机语言，而针对在浏览器中展现网页以及实现用户与网页的交互等效果的应用，则需要使用HTML、CSS、JavaScript等计算机语言。所以，要成为一名合格的前端开发工程师，必须熟练掌握HTML、CSS、JavaScript。此外，还需要熟悉这些技术在不同浏览器上的兼容处理、网页的性能优化、SEO（搜索引擎优化）、工程化模块化开发，以及一些制图软件如Photoshop，开发辅助工具，如Google Chrome的开发者调试工具等。

在本节将介绍HTML、CSS、JavaScript，其他技术和软件及工具的介绍请参见本书后续相关章节和本系列其他图书。1.2.1 HTML超文本标记语言：搭建网页“结构”

HTML（Hypertext Markup Language），中文意思是超文本标记语言。为了方便记忆和理解，我们将HTML中的3个单词拆分开来，分别解释其中含义。

Hypertext （超文本）指的是页面中的各种内容。在一个网页中，有文字、超链接、图片、音频、视频等，这些内容共同构成了网站信息，这些信息以计算机语言的形式编写而成，因此称它们为“超文本” 内容。

Markup（利润、盈利。在这里指标记或标签），HTML语言在大多情况下，使用一对标签“<>” 来表示，其中 “<>” 为开始标签，“” 为结束标签。标签的尖括号内放置着各种英文关键词，例如：“

妙味课堂是国内知名的IT培训机构

前端概要

Language（语言），HTML就是由各种各样的标签组成的语言，在这套语言体系内，描述着网页的 “视频、音乐、文字、图片” 等内容。

HTML从诞生到现在经历多个版本，依次是HTML2.0、HTML3.2、HTML4.0、HTML4.01、HTML5这几个版本，另外，在HTML4.01发展到HTML5之前又出现了XHTML1.0和XHTML2.0（未推行应用）两个版本。HTML5相比于其他版本，增加了许多语义化标签，如header、nav等文档结构标签，音频和视频以及canvas画布等标签。1.2.2 CSS层叠样式表：给网页添加“样式”

CSS（Cascading Style Sheets），中文意思是层叠样式表，以下简称为“样式表”。样式表的作用就是给网页加样式。使用HTML标签搭建页面结构时，标签使用的都是自己本身在浏览器中的“模样”，即默认样式。这些默认样式大部分情况下都毫无美感。而CSS样式就相当于“化妆师”，把页面上的内容“梳妆打扮”一番，然后将美好的状态呈现在用户面前。例如，图1-8就是浏览器默认显示的样式，图1-9则是使用CSS稍加修饰以后的样式。图1-8 默认样式输出结果图1-9 CSS样式输出结果

从图1-9中可以看到，使用CSS样式可以修改页面内容的对齐方式、颜色以及背景颜色等样式。两图相比较，图1-9更加丰富多彩，更能突出重点，也更吸引人。1.2.3 JavaScript：让网页响应某种“行为”

JavaScript（简称JS）是一种脚本式语言，它可以让网页响应某些“行为”。例如，用户在网页中用鼠标单击某个按钮以后，如果他希望浏览器能够切换下一张图片，这样的想法就可以通过 JS来实现。在图1-10中，用户可以通过单击图片左、右两边的和箭头来实现图片的切换。

又或者我们希望在搜索框中输入部分内容时能在弹出的下拉框中显示出所有相关的数据供用户选择，如图1-11所示。这种根据部分内容弹出下拉框并显示出所有相关数据的效果使用 JS 将很容易实现。图1-10 单击图片两边的向左和向右箭头切换图片图1-11 根据部分内容实现相关数据的下拉显示

综上所述，我们可以看到：HTML、CSS和JavaScript各司其职，分工合作，共同构建Web页面。其中，HTML用于搭建页面结构，就像人的骨骼，有了骨骼才能支撑起身体；CSS样式表相当于“化妆师”，让页面内容以美好的状态呈现在用户面前，这就如同每个人都有不同的穿衣风格一样；JS能让页面具备响应各种 “行为”的能力，产生各种交互效果，使页面真正的“鲜活”起来，就如同让一个原本静止的模特开始活动，他可以微笑、可以表演。1.3 前端开发所需软件

工欲善其事，必先利其器，编写HTML页面之前必须了解一些常用的前端开发工具。前端开发工具主要分3类：图片编辑软件、代码编辑器、浏览器。这些工具在网页制作过程中发挥着很大的作用，下面对它们进行一一介绍。1.3.1 Photoshop

Photoshop（简称Ps）是一种图像处理软件。很多人都称Ps是“修图神器”，因为对于绝大多数普通用户来说，Ps最大的用途就是美化用手机拍的照片。在前端开发时，也会经常使用Ps，但此时使用Ps并不是用来修图的，而是用它来分割图片或测量图片尺寸。例如，开发人员需要根据设计图来制作页面，此时必须确定每个页面区域的尺寸、文字大小和颜色等数据，Ps将在这时派上用场。下面介绍在前端开发中使用Ps来测量图片尺寸和分割图片的方法。

1.使用Ps测量图片大小

在前端开发中使用Ps测量图片大小涉及以下5个步骤。

第一步 运行Ps（本书使用的是Photoshop CS6）软件，打开图1-12所示对话框。图1-12 新建画布对话框

第二步 打开想要的文件：在图1-12中依次单击菜单“文件” → “打开”，打开“文件打开为”对话框，在对话框中找到需要打开的文件所在的位置后，单击“打开”按钮。

第三步 测量图片尺寸，分为以下4步。

① 放大图片：使用缩放工具，单击鼠标左键，放大图片。

② 选框选出边界：使用选框工具，沿边界画出选框，可以使用上下键来调整位置。

③ 画出辅助线：将鼠标放到标尺内，按下鼠标左键并拖动辅助线至选框边界。如果打开的页面没有标尺，可单击“视图”→“标尺”来调出标尺。

④ 测量：使用选框工具从辅助线开始框选出需要测量的区域，该区域的图片尺寸将通过选框来测量，如图1-13所示。

第四步 查看尺寸：依次单击菜单“窗口”→“信息”，打开信息面板，从信息面板中可以看到元素的尺寸，其中W代表宽度，H代表高度，如图1-14所示。如果把鼠标移到选框区域内，还可以在信息面板上看到鼠标位置处的颜色等信息。图1-13 测量选框所选图片尺寸图1-14 在信息面板中查看所测量的图片尺寸

第五步 修改尺寸单位：在Ps中，标尺的单位可以有：像素（px）、厘米（cm）、百分比（%）等多种类型，但默认的单位是cm。由于在网页中常用的单位是像素（px），因而在测量图片时需要修改Ps的标尺单位。可以通过以下步骤来切换Ps中的单位。

① 如图1-15所示，单击菜单中的“编辑”，并从下拉菜单中选择 “首选项”，然后单击弹出菜单中的“常规”子菜单，此时弹出图1-16所示对话框。

② 在图1-16所示对话框中单击左窗口中的“单位与标尺”，在打开的右边窗口的“单位”栏中单击标尺下拉箭头，从弹出的下拉列表中选择“像素”，如图1-16所示。图1-15 单击“编辑”菜单下的子菜单打开首选项窗口图1-16 修改标尺单位

2.使用Ps切图

在前端开发中使用Ps切图涉及以下4个步骤。

第一步 运行Ps软件，打开需要切图的图片，放大图片，先使用选框工具然后再画辅助线（先使用选框工具的目的是为了对齐像素），具体操作请参见“使用Ps测量图片大小”的步骤介绍。

第二步 使用选框工具选中要切的内容，如图1-17所示。

第三步 复制、粘贴要切割的内容到新画布：选中要切割的内容后，按Ctrl+C组合键复制选中的图片，然后依次单击菜单“文件”→“新建”，打开如图1-18所示新建画布对话框。在图1-18中根据实际情况设置画布的宽度和高度，其余参数尽量保持不变。单击“确定”按钮，新建一个空白画布。在新画布中按Ctrl+V组合键粘贴选中的内容。图1-17 选中要切的内容图1-18 新建画布对话框

注意：按Ctrl+C组合键复制图片时，一定要注意选中当前的图层，如图1-19所示。

第四步 保存图片：依次单击菜单“文件”→“存储Web所用格式“，将放置在新画布中的切割图片格式保存为“Web所用格式”中的“PNG-24”格式，并勾选“透明度”，如图1-20所示。

注意：png是图片的一种格式，png支持透明度变化、渐变或带阴影的图片， png格式的图片质量比较高。此外图片还有其他常见格式，如jpg和gif，它们的区别参见表1-1。图1-19 选中当前图层进行复制图片图1-20 将切割图片存储为Web所用格式的PNG-24格式表1-1 网页常见图片格式比较

网站项目开发中较为常见的是以上3种图片格式，但图片格式种类却不仅仅有这3种，例如还有“PNG-8 格式、BMP格式、PCX格式、TIFF格式”等，每种图片特点各不相同，限于本书篇幅，不在此过多介绍，感兴趣的读者可以自行查阅相关资料进行了解。1.3.2 编辑器

编辑器是编写代码的工具，一个顺手的编辑器可以帮助开发人员更便捷地完成编码工作。现在市面的编辑器有很多种，从最古老的记事本到风靡一时的 Dreamweaver（DW），再到近年来的Sublime、HBuilder、Webstorm 等，如图1-21所示。每款编辑器都各有特色，建议大家都上手试一试，用得顺手的就是最适合自己的。

试读结束[说明：试读内容隐藏了图片]

下载完整电子书