Web前端现状和WebStorm的使用

Web前端现状

1. 市场缺口
   前端程序员缺口非常大，因为它正式成为一个岗位才几年，国内最早出现前端招聘岗位在2012年左右，在此之前，前端工作基本上都是由服务端工程师包办的，或者是由设计师来产出HTML页面。随着现代互联网应用的火爆，前端难度加大，导致后台程序员不能完全搞定，所以企业们急切需要真正懂前端技术的“前端人员”。
2. 传统网站功能
   单纯展示

3. 现在的网站功能
   不在是承载单一的文字和图片
   各种丰富媒体让网页的内容更加生动
   

4. 发展前景

   现在市场上的前端程序员鱼龙混杂，很多自称是前端的人实际上只会页面制作，他们搭着“前端”的顺风车，和企业要着高薪，却应付不了更复杂的工作。这是导致企业对前端需求大的原因，不是缺少前端，而是缺优秀的前端。

5. 职业发展路线
   == 前端页面制作、前端开发、前端架构师==
   本教程是每一名前端开发人员都要牢牢掌握的，这些知识如果由页面制作人员摸索学习成为开发人员，可能需要若干年的时间。在这里需要你4个月学完，所以压力可想而知，代码量可想而知！
   前端页面制作：利用html+css完成页面的搭建
   前端开发：更多的要求javascript技术
   前端架构师：要求知识面、实际项目经验、对技术的整体把控。

6. 前端工程师具体在做什么？

Web前端开发工程师，主要职责是利用HTML/CSS/JavaScript等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，同时结合后台技术模拟整体效果，致力于通过技术改善用户体验。

7. 谁和前端人员打交道？

产品经理把用户可能的需求提出来，和前端还有后端交涉，这个东西如何实现。确定可行后，由设计设计出UI图，前端把它做出来，第一步可能是静态的，纯html css，然后我们再用angularjs、js实现一些业务方面的功能，最后和后台的接口进行联调，一般会是这么一个过程。那运营呢？有时候会需要你配合他们的营销方案对产品做一些调整，比如圣诞节到了，它要求你对公司的官网加一些雪花的特效。这也是需要你配合的。

7. 常用网站
   w3cschool、w3c菜鸟、百度
   前端大牛的博客 http://caibaojian.com/some-fe
   这个里面收集了许多前端大牛博客的地址，你们有时间要多去学习，里面推荐几个人，阮一峰，有句话叫阮一峰出品，必属精品，他是学金融的，现在在IT方面这么有成就，转行过来的同学是不是更有信心了？
   张鑫旭，它博客里面会把一些技术讲的非常细，腾讯的前端。
   李松峰，大名鼎鼎，你们学到第二阶段会学习javascript，而javascript非常权威的书箱是《javascript高级程序设计》，就是他翻译的。

IDE环境介绍安装配置

1. 「IDE环境介绍」

它是”集成开发环境”的英文缩写。
我们都知道网上的页面是编程人员写出来的，用什么写的呢？用编码工具或IDE集成开发环境。

2. 编码工具
   辅助程序员编写源代码的工具，它类似
   word，我们写文档会打开word文档来编写。
   写代码也一样，需要借助工具来开发。

   常见的编码工具有记事本、sublime Text、notepad++
   

IDE集成开发环境

用于提供程序开发环境的应用软件，一般包括代码编辑器、编译器、调试器和图形用户界面工具。集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。
它和单纯的编码工具不同，它不仅包含了编辑器，还有分析、编译等功能。它集成了一系列软件开发所需的功能，所以称为“集成开发环境”。

这里不推荐使用Dreamweaver，它更多的是针对前端设计人员来用，而不是我们编程人员
其它语言的常见IDE有：eclipse、visio studio等

浏览器介绍

前面讲了IDE用来编码，写好的代码如何展示？通过浏览器来展示。

以上这些，都不要再使用，身为前端，要不论是学习还是工作都应该使用更符合业W3C规范的浏览器

推荐使用的浏览器

1. 速度快，不是指打开的速度，而是指解析页面CSS、JS的速度
2. 支持更多新的功能，比如最新的标准html5、css3的一些新功能
3. 插件化开发，chrome和firefox提示了应用商店，你可以安装自己喜欢的插件，定制自己的浏览器

调试工具：
chrome自带的开发者工具、firebug、IE有HttpWatch

WebStorm的使用

当用户第一次运行WebStorm或者没有打开项目，在WebStorm显示的欢迎屏幕上，可以快速访问的主要入口点。包括“新建项目”、“打开项目”、最近项目列表、注册等。

当打开了一个项目的时候，WebStorm会显示主窗口，包含有六个部分，分别是菜单栏 、工具栏 、导航栏、状态栏 、编辑器、WebStorm 工具窗口，如下图所示，图中已用红色标示

常用操作

1. 创建项目
   file–>new project–>指定路径–>点击上面的新建按钮创建一个文件夹，然后ok，创建好项目后，项目文件夹中会带有.idea这样一个文件

2. 创建文件
   右击项目–>new–>html file–>输入文件名–>下面的下拉框可以选择h5还是h4或是xhtml类型的文档，我们选择h5，也就是默认的。写名字的时候不用加html后缀，webstrom会自动为我们加。

3. 重命名
   右击html文件–>refactor–>rename—改好后回车

4. 删除文件
   右击html文件–>delete–>ok（或者直接按电脑上的del键，回车）

菜单栏常用

FILE下（通常操作关于文件、工程）

• New Project创建工程
• New 会弹出一个列表供选择要创建的类型
• Open 打开一个项目
• Save As 将当前页面另存为
• Reopen Project 近几次打开的项目列表
• Close Project 点击后回到欢迎页面上
• Rename Project 它修改的不是当前项目的文件夹名，而是文件夹目录下.idea的以iml结尾的文件，这个是项目的名字。rename后观察iml文件名的变化。
• settings 常用设置
• Exit 退出Webstorm

常用操作

1. 鼠标滑到编辑区的右上角，会显示出一排浏览器的图标，如果你电脑中安装了相应浏览器，webstorm会自动关联它，在你想看当前文档的效果时，点击浏览器按钮即会打开

2. 右击编辑区的左边栏，点击show Line Number，可以显示出行号，帮助我们快速定位代码

3. 点击状态栏右下角的click to go to line 可以快速跳到你要找到行，当代码量过千时，这个功能非常有用
   

webstorm常用配置

1. 如何更改主题（字体&配色）
   file->setting->editor->colors&fonts->scheme选择你的主题（darcula）

2. 如何让webstorm启动的时候不打开工程文件
   file->settings->Appearance&Behavior->System settings 去掉reopen last project on startup（在启动的时候总是打开最后的工程）

3. 如何完美显示中文
   file->settings->appearance中勾选override default fonts by(not recommended)，设置name:NsimSum,Size:12
   (appearance外观选项，选中“重写默认字体”，设置名字为NsimSum，它是windows下的宋体字，字号12)。这里设置的是整个IDE显示的文字，包括菜单列表的字。你可以试着把它改成英文，那样再在菜单项中看，中文有的会不正常显示，变成小方块了。

4. 如何显示行号
   在代码显示区的左边右击选择“show line number”。

5. 如何代码自动换行
   file-settings-editor->general-> “use soft wraps in editor” 打上钩，代码就自动换行了。
   你先试下，在一行中写很长的句子，看会不会换行。