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所示。
图1-13 测量选框所选图片尺寸
第四步 查看尺寸：依次单击菜单“窗口”→“信息”，打开信息面板，从信息面板中可以看到元素的尺寸，其中W代表宽度，H代表高度，如图1-14所示。如果把鼠标移到选框区域内，还可以在信息面板上看到鼠标位置处的颜色等信息。
图1-14 在信息面板中查看所测量的图片尺寸
第五步 修改尺寸单位：在Ps中，标尺的单位可以有：像素（px）、厘米（cm）、百分比（%）等多种类型，但默认的单位是cm。由于在网页中常用的单位是像素（px），因而在测量图片时需要修改Ps的标尺单位。可以通过以下步骤来切换Ps中的单位。
①如图1-15所示，单击菜单中的“编辑”，并从下拉菜单中选择“首选项”，然后单击弹出菜单中的“常规”子菜单，此时弹出图1-16所示对话框。
图1-15 单击“编辑”菜单下的子菜单打开首选项窗口
②在图1-16所示对话框中单击左窗口中的“单位与标尺”，在打开的右边窗口的“单位”栏中单击标尺下拉箭头，从弹出的下拉列表中选择“像素”，如图1-16所示。
图1-16 修改标尺单位
2．使用Ps切图
在前端开发中使用Ps切图涉及以下4个步骤。
第一步 运行Ps软件，打开需要切图的图片，放大图片，先使用选框工具然后再画辅助线（先使用选框工具的目的是为了对齐像素），具体操作请参见“使用Ps测量图片大小”的步骤介绍。
第二步 使用选框工具选中要切的内容，如图1-17所示。
图1-17 选中要切的内容
第三步 复制、粘贴要切割的内容到新画布：选中要切割的内容后，按Ctrl+C组合键复制选中的图片，然后依次单击菜单“文件”→“新建”，打开如图1-18所示新建画布对话框。在图1-18中根据实际情况设置画布的宽度和高度，其余参数尽量保持不变。单击“确定”按钮，新建一个空白画布。在新画布中按Ctrl+V组合键粘贴选中的内容。
图1-18 新建画布对话框
注意 按Ctrl+C组合键复制图片时，一定要注意选中当前的图层，如图1-19所示。
图1-19 选中当前图层进行复制图片
第四步 保存图片：依次单击菜单“文件”→“存储Web所用格式，“将放置在新画布中的切割图片格式保存为“Web所用格式”中的“PNG-24”格式，并勾选“透明度”，如图1-20所示。
图1-20 将切割图片存储为Web所用格式的PNG-24格式
注意 png是图片的一种格式，png支持透明度变化、渐变或带阴影的图片，png格式的图片质量比较高。此外图片还有其他常见格式，如jpg和gif，它们的区别参见表1-1。
表1-1 网页常见图片格式比较
网站项目开发中较为常见的是以上3种图片格式，但图片格式种类却不仅仅有这3种，例如还有“PNG-8格式、BMP格式、PCX格式、TIFF格式”等，每种图片特点各不相同，限于本书篇幅，不在此过多介绍，感兴趣的读者可以自行查阅相关资料进行了解。
1.3.2 编辑器
编辑器是编写代码的工具，一个顺手的编辑器可以帮助开发人员更便捷地完成编码工作。现在市面的编辑器有很多种，从最古老的记事本到风靡一时的Dreamweaver（DW），再到近年来的Sublime、HBuilder、Webstorm等，如图1-21所示。每款编辑器都各有特色，建议大家都上手试一试，用得顺手的就是最适合自己的。
图1-21 常用的前端开发编辑工具
1.3.3 浏览器
浏览器是用来展示网页内容的工具。前端开发人员编写的网页代码，都需要通过浏览器来呈现。
浏览器类型主要按内核来区分。不同的内核，对网页的语法解释也会有所不同，因此渲染出来的网页效果也将不相同。例如，支持CSS3的3D语法的浏览器，能够在网页中实现绚丽的立体效果，而在不支持这些特性的浏览器中，则无法观看到相应的效果。
目前，主流浏览器的内核以及开发厂商主要有：Trident\MSHTML、EdgeHTML（微软）、Gecko（火狐）、Webkit（苹果）、Chromium/Blink（谷歌）、Presto（Opera）等。根据浏览器的内核不同，浏览器划分为：微软系列浏览器（IE9、IE10等）、火狐浏览器（Firefox）、苹果浏览器（Safari）、谷歌浏览器（Chrome）、Opera浏览器。而国内很多浏览器，如搜狗、360、QQ浏览器等，都是在微软、火狐等浏览器的内核基础上套上外壳，增加一些操作方面的功能等，最后冠上厂商的品牌名推向市场。因此搜狗等浏览器又被称为衍生浏览器，或被称为套壳浏览器。
目前，我们推荐使用谷歌浏览器（Chrome），因为这款浏览器不仅对标准的支持程度足够好、调试工具足够丰富，并且它的版本更新速度非常快，最重要的一点是：它的JS渲染引擎V8足够强大、异常迅猛。因此，Chrome是前端开发专业人士的不二选择。
至此，我们已了解了前端开发到底是做什么的以及如何才能成为一个合格的前端开发工程师，明确了学习内容和学习目标。现在，就可以启动动力十足的学习引擎，开启前端开发学习之旅了！