1.2.3　WebStorm开发工具

通过上一节的学习可以发现，使用记事本编辑HTML其实是非常消耗时间的，必须要一个一个字符输入。本节将介绍一款非常专业的网页开发工具——WebStorm。

1．下载安装

访问WebStorm官方网站http://www.jetbrains.com/webstorm/可以获取最新版本的下载安装包，整个下载及安装过程较为简单，本书不再赘述。

2．WebStorm主界面

WebStorm开发工具软件主界面，如图1-4所示。

图1-4　WebStorm主界面

WebStorm主界面主要分为三大区域，顶部为菜单栏，左边为项目结构，右边为代码窗口。其基本操作与绝大部分IDE工具是一致的，此处不再赘述。

3．创建一个HTML项目

选择“File”→“New Project”命令，打开新建项目设置对话框，输入项目的名称及路径即可完成项目创建，如图1-5所示。

图1-5　新建WebStorm项目

需要注意的是，这里选择创建一个Empty Proejct（空项目）即可，文本框中的HTML-Learn是项目名称。

4．创建项目目录结构

在项目根目录下继续再创建几个目录用于后续开发使用。右击项目名称，选择“New”→“Directory”命令，输入目录名称即可。

图1-6　新建项目目录

如图1-6所示，这里创建了animation、basic、css、image、js和project六个目录，后续设计开发过程中会陆续使用到这些目录。创建项目目录时，名称可以使用中文或英文，但是建议使用英文，且使用标准的英文单词或缩写，不建议使用全拼或中文或其他无任何意义的字母或单词。这个习惯在程序设计过程中具有良好的便利性。

5．创建HTML文件

项目目录创建完成后，在basic目录下创建一个html源文件，如图1-7所示。

图1-7　新建HTML文件命令

设置HTML文件名为“HTML-入门”，建议给文件取有意义的名称，以便于后续查阅，如图1-8所示。

图1-8　新建HTML文件对话框

6．快速完成内容填充

创建完成一个HTML5文件后，WebStorm开发工具已经完成了很多工作，把页面的基本结构已经自动生成，开发人员只需要填充网页内容和标题即可，如图1-9所示。

图1-9　WebStorm源代码窗口

7．运行HTML页面

即使是使用WebStorm开发的网页，同样可以利用资源管理器打开项目所在目录，双击该HTML-入门.html文件用浏览器打开运行即可。

另外，WebStorm提供了非常方便的运行方法，在打开的网页编辑器中，当鼠标指针移动到右上角时，会出现几个浏览器图标，单击任意一个即可用相应的浏览器打开该页面（前提是操作系统中已经安装该浏览器），如图1-10所示。

图1-10　在WebStorm中打开浏览器

8．修改编辑区格式

利用WebStorm工具可以显著提升开发效率，它自带智能提示，可以让开发人员的输入效率大幅提高；同时，用不同的颜色帮助开发人员显示不同类型的文本内容，更加便于区分和快速查阅。

但是，WebStorm工具默认的编辑器字体设置得太小，不太容易看得清楚，这样很容易导致一些错误，比如应该使用英文半角的双引号、单引号等，却使用了中文全角，很难发现这种类似的失误，但是这样会导致网页无法正常解析。所以开发过程中需要将编辑器的字体大小调整得更加容易识别，操作如下。

（1）选择“File”→“Settings”菜单，如图1-11所示。

图1-11　设置菜单

（2）进入选项设置页，选择“Editor”→“Colors&Fonts”标签，在右侧窗格的“Scheme”下拉列表中选择Default（默认），单击按钮“Save As…”按钮，将此配置信息重命名为MyScheme，单击“OK”按钮，如图1-12所示。

图1-12　保存Scheme信息

（3）再进入Font选项卡，“Scheme”选择“MyScheme”，将“Primary Font”修改为“Consolas”，“Size”设为16，单击“OK”按钮，如图1-13所示。

这样，代码编辑器的字体即被修改为16px的大小，属于在计算机上看到的标准字体大小，也比较容易区分格式正误。

图1-13　修改WebStorm字体大小