（47）网页布局常用工具

一、vscode代码编辑器

用于编写前端代码，微软公司使用electron前端客户端技术做出的vscode软件，功能虽然比不上webstrom编辑器强大，但是它使用起来启动速度更快，功能强大度达到webstrom的90%，自从vscode的出现，大部分企业的前端工程师都在使用vscode编辑器，因为它开发效率不仅高，启动速度还快。

二、Fireworks量取设计图软件

该工具可以测量整个页面版心的px像素值，以及可以使用标尺工具，按shift键可以查看到margin或者padding的距离，切片工具可以测量宽高尺寸，吸管工具可以吸取网页内容的颜色。

三、pxcook量取设计图软件

该工具可以测量整个页面版心的px像素值，以及可以使用标尺工具，可以查看到margin或者padding的距离，切片工具可以测量宽高尺寸，吸管工具可以吸取网页内容的颜色。是目前前端开发用的最多的设计图软件。

四、colors.exe拾色器软件

该工具可以吸取颜色，并且吸取的颜色可以复制，上面介绍的软件虽然可以吸取颜色，但是吸取的颜色无法复制。

五、FastStone Capture截图工具

非常好用的截图工具，推荐使用。适合做笔记使用。FastStone Capture是一款经典好用的屏幕截图软件，FastStone Capture可以捕获BMP、GIF、JPEG等众多格式的图片，软件还具有屏幕录像的功能，方便用户录制精彩的瞬间，软件还可以截取滚动页面，方便用户截图。

FastStone Capture截图工具下载网址：https://www.faststonecapture.cn/

5.1FastStone Capture功能介绍

      1.取色器

      现在网上各式各样的取色器应该不少了，包括之前一直用的蓝色经典推荐的ColorSPY ， Firefox 下还有一个专门的取色器扩展ColorZilla ，这些都是很好的软件。

      2.屏幕放大镜

      这确实是一个不错的功能，特别是现在我们已经习惯用DIV 来对页面定位，DIV 之间的对齐不像 表 格那样容易控制，有时为了调整几个象素的偏差，不得不对着屏幕盯很久。

     3.屏幕录像机

      屏幕录像机功能可以录制屏幕动作，将窗口/对象、矩形区域或全屏区域的屏幕录制为高清晰 WMV 视频。

     4. 截屏

      包括了全屏截取，当前活动窗口截取，截取选定区域，多边形截取和截取滚动页面等，基本上常用的都有了。

     5.图像浏览/ 编辑

      FastStone Capture (FSCapture) 还包括快速浏览/ 编辑图像的功能，可以点击主窗口的“ 打开” 图标快速打开一幅图片，进行简单的缩放、裁切、旋转、加文字等轻量级的操作。

5.2FastStone Capture软件特点 

 截长图，方便快捷！

      图文并茂没有图?深度好文图片渣?汇报展示效果糊?当务之急，使用 FastStone Capture，集图像捕捉、编辑、调整于一身。清晰大图，即刻生成。

      屏幕录制，流畅不卡顿!

      录制工具太复杂?录制效果不清晰?录完发现有卡顿?使用 FastStone Capture，软件操作、课件制作、网络教学、游戏录制轻松上手，操作简单画质优。

      清晰大图，即刻生成!

      效果展示内容太多?表格文档明细太长?其他工具截图不完整?隐私区域不能展示? 使用 FastStone Capture，对指定区域进行滚动截图，点到为止，想截哪里截哪里。

5.3FastStone Capture使用方法

   1、打开在本站下载FastStone Capture软件，打开软件后，进入软件主界面

      2、常用快捷的截图会在软件列出来，红框中的是快捷活动窗口截图功能，一点击就会将目前活动的窗口进行截屏，不需要选择。

    3、第二个是窗口截图选择，点击后会智能识别当前的窗口范围，选择窗口后就可成功截图。截取的图片会自动保存。

      4、第三个是矩形截图功能，您可以点击鼠标左键或点击一个角点，移动鼠标到另一个角点并点击就可截图。

      5、第四个是任意多边形截图功能，截取自定义图形图片，您可以在您要截取的图片上画出一个心形的形状，如图所截爱心形状的图。

    6、第五个是捕捉整个屏幕截图功能，点击这个选项就可以快速截取整个屏幕。

    7、第七个是固定大小截图，点击这个选择后，截取的图标是固定的大小，您还可以重新调整截图的大小。

5.4FastStone Capture常见问题

faststone capture如何自定义滚屏截图？

      1、打开您要滚动截取的网页。

      2、打开FastStone Capture软件，打开软件后点击第七个选项，如图所示，滚动截图选项

      3、按住“Ctrl”键不放，就可以用用鼠标光标拖动，自定义出要截图的区域，然后释放Ctrl键

      4、点击“向下滚动”箭头，开始滚动截图。

      5、接着页面就会自动向下滚动，此时FS Capture就能截取滚动出来的页面，如果不想截取整个页面，可以在滚动到适合位置时，按下“Esc”键结束截图，如果没有按“Esc”键，就会一直向下滚动把整个页面截下来。截图成功后，就会自动在Faststone Editor中打开，如下图所示：

FastStone Capture怎么录制视频

      1、打开FastStone Capture软件，点击视频录制选项。

      2、打开视频录像机窗口后，您可以选择您要录制的窗口，您可以选择矩形窗口，固定大小区域等您可以自行选择，您还可以选择录制的音频来源。

      3、如果您想进行其他选项的设置，您可以点击【选项】设置，打开选项窗口后，您可以对视频，音频，快捷键等进行设置，设置完成后点击【确定】就可以了。