bootstrap是目前使用广泛使用人数多也是非常受欢迎的前端开发框架之一，bootstrap现在有两个版本分别是bootstrap3.4和bootstrap4.2.1，bootstrap是美国Twitter公司推出的开源免费的前端快速开发框架，你可以从GitHub上下载最新的源码。bootstrap可以是前端开发人员快速的制作出各种自适应界面的响应式网页，因为其易学易用而很受人们的欢迎，目前已有很多关于bootstrap的中文帮助文档和学习社区，bootstrap是移动优先的设计模式，可以轻松解决几乎所有浏览器（包括手机端）的兼容性问题。

不仅如此，bootstrap还能让你很容易的实现各种响应式设计，对于初学前端设计或需要快速搭建一个项目，那么bootstrap都是最佳的选择。bootstrap V3.x系列版本是最稳定的，V4.x系列版本虽然是更新快效率更高，但是不稳定，v4.1和v4.2两个版本我都用过，但差别还真的有很多，对于一些不太了解或想要入手bootstrap的伙伴可能会有很多的问题想问，所以我就都写出来呢。

问题一：为什么要选择bootstrap而不是别的前端框架？

第一是快速解实现目标，我们在前端网页设计的时候，几乎都会遇到各种浏览器兼容、响应式设计、css和JS各种繁琐的而且又不得不做的问题，使用bootstrap可以不用担心这些了，你只需要知道他兼容那些浏览器即可，而对于主流的浏览器如火狐。谷歌、Opera等都好绝对可以的，同时也包括手机端Android和iOS上的各种浏览器都OK。第二是学习，对于一个新手，只要你能看得懂什么是css、HTML基本元素，就可以使用bootstrap制作出漂亮且使用价值很高的网页，你还可以从他的各种代码写法中体会和学习到很多前端设计的知识，简直就是一个大型的活案例；对于有经验的大咖，bootstrap是一种设计的思路和规范的大纲，你可以从中窥探前端设计的前沿技术和改进你的写作规范及设计思想。

问题二：如何选择bootstrap的版本？

前面说了bootstrap有2个重要的版本，V3.x系列的版本最稳定，当前最新是bootstrapV3.4.0，我且称为稳定版吧，而V4.x系列版本则不稳定，每一个小版本变化都蛮大的，但是V4系列各方面的确都比V3系列要好，v3和v4最根本也还是大家最关心的问题应该是支持的IE版本问题：bootstrapV3系列依然支持老旧的IE8和IE9及早期的iOS系统等；bootstrapV4系列支持IE10-11/ Microsoft Edge，Chrome >= 45，Firefox >= 38，Edge >= 12，Explorer >= 10，iOS >= 9，Safari >= 9，Android >= 4.4，Opera >= 30。可以看出V4系列版本已经不支持很多低版本的浏览器了，V4所支持的这些浏览器在win10、iPhone 7以上的系统都没有问题，但是对于国内仍然有很多使用win7~8、iPhone5~6没升级ios系统 的用户，如果希望这些使用老旧浏览器的人也能正常使用您的网站，那么请选择V3.x的最新版本即可，反之则选择V4.x最新版本为佳。

Bootstrap v3 is now closed off to new features. It has gone into maintenance mode so that we can focus our efforts on Bootstrap v4, the future of the framework. Pull requests which add new features (rather than fix bugs) should target Bootstrap v4 (the v4-dev git branch) instead.

上面是bootstrap在GitHub上的原文，当前已停止V3系列版本的更新，但是会维护V3这一版本，在未来的几年内，win7~8系统也会很快退出我们的生活，就像Windows XP系统那样，即使当时的IE6称霸一时但也逃不过被淘汰的现实。

对于bootstrap版本的选择问题最核心的也可以理解为是兼容IE版本的问题，根据实际情况和需要，如果是软件后台、网站后台的前端这些不需要IE内核来渲染的界面，果断选择V4，如果是需要用户使用的前度界面，目前依然推荐使用V3，毕竟我们做出来的网站项目主要是给用户看的，她都看不了，那我们做这个项目又还有什么意义呢。

bootstrap是流行的前端库建，用于快速创建响应式页面，她是移动优先的前端框架。建议新手可以从V3版本学习练手，学会V3对于V4那就易如反掌了，后面我将继续发布bootstrap更多的教程，有疑问请留言~

由于代码技术的限制，普通大众往往在网站建设方面总是一站难求。但是，想要拥有一个自己的网站，真的必须由程序员通过代码实现？哼，在当今满满科技感的新时代，这个问题不存在的~ 小编为大家整理了个人认为最好用的免费网站设计工具。新的一年，拥有一个自己设计的网站不是问题！

根据经验来讲，糟糕的软件，也一定会导致糟糕的工作效率和成果。如果你不是专业人员，光是前期工具的选择就足够让人头痛了。正确的网页设计工具可以简化工作流程，高效快速的完成工作。那什么是好用的网站设计工具？不用说，一定是高效，省时，省事，低成本的产品。

"The best design tool is a long eraser with a pencil at one end." -- Marty Neumeier

针对不同的人群，适合的工具不同，“最好用“的定义自然也是有所区别的。以下，我将我认为的“最好用的免费网站设计工具”分类整理给大家：

- 针对初学者的网页设计软件

- 基本的网页设计软件

- 好用的网页设计助手

言归正传，让我把这些个人认为最好用的网站设计工具分享给大家吧~

"Good art inspires; Good design motivates." -- Otl Aicher

针对初学者的网页设计软件

1. Wix

价格：基础版免费

付费模式4.5美元/月 起

适合人群：非技术性人员

简介：可以自由拖拽编辑的网站建设平台。Wix 提供完整的一站式网站创建服务，包含注册网址、网站设计、网站管理和修改，让用户只需要操作GUI界面，就可以创建网站，不需要了解DNS对应、网页编程语言、服务器创建/租赁等事务，一切都由 Wix 自动化处理，让用户能专心在网页视觉与内容呈现上。

个人体会：Wix的最大优点是可以自由的拖拽组件。你可以按任意大小任意布置按钮、图片，或文本框在网站上的任何一个地方。但缺点是，如果改了模板，很多内容和格式就不使用了，几乎得重新做网站，而且它的手机模式，需要对内容重新进行编辑。因此，如果网站经常更新的话，每次更新后都得用手机编辑器再改改手机版本。因此 Wix 比较适合不经常更新，但设计别致的小型网站。

2.Squarespace

价格：免费注册建站

适合人群：最适合非技术型人员（不需代码、设计功底）

简介：Squarespace这款自助建站服务始于2004年，十年的岁月使其发展成了使用最广泛的建站程序之一。不需要设计或是编程基础，便可通过Squarespace快速搭建一个精致的响应式网站。它本身提供了三种定价模式，第一种是可免费注册与建站。但若要发布网站，则有根据网站类型每月12至40美元的两种方案可供选择。

个人体会：Squarespace最大的特点是注重细节。从创始人Anthony Casalena的一些公开信息中知道，squarespace这款智能建站产品非常适合个人网站，因为它很多模板的表现模式和后台插件体验都偏向小站长，立足于把自己的小站打造为细节丰富的网站。

"Creating something out of thin air is easy. It’s finding the air that’s hard. " -- Asher Trotter

基本的网站设计软件

1. 原型设计工具 - Mockplus

价格：基础版-免费

专业版 - 199元/年

网站设计的第一步是准备网站原型。而原型设计的任务就是根据用户的需求描绘出页面的草图。应用市场上不乏一些优秀的原型设计工具，例如Mockplus。作为一款面向国际市场的原型工具，Mockplus不仅仅在手机App制作上有出色表现，网页设计也非常给力。

作为一款优秀的原型设计工具，Mockplus是怎样实现网站设计的呢？请参考Mockplus例子项目：StyleXstyle - 时尚类网站原型。

第一步：下载Mockplus并登陆账号；若没有Mockplus账号，可免费注册。

第二步：打开Mockplus，选择网页项目类型，设置网页宽高。网页最大高度为6000像素。

第二步：从软件左侧组件库中拖拽添加需要的页面元素：按钮、图标、文本框、图片等；右侧面板支持调整页面背景、字体、字号。

第三步：为特定组件添加交互：页面跳转链接、组件跳转链接等;右侧属性面板中支持多种属性、交互、页面设置。内容非常丰富。

第四步：通过F5本地预览或发布HTML在线预览。PS：Mockplus提供8种预览方式。

StyleXstyle在线预览地址: http://run.mockplus/yYoEMZcBxFGdhfYW/index.html

2. 多才多艺的设计工具 - Photoshop

价格：9.9美元/月

虽然它不是免费的，但它作为最佳网页设计软件市场领导者，它的地位不容忽视。那么关于Photoshop本身：一句话，它是一个非常多才多艺的工具，可以用于任何类型的设计项目，而不仅仅是网页设计。它的主要目的是帮助你使用光栅图形。

除了调整图像或图形的颜色，饱和度，模糊，清晰度等，Photoshop还可以从头创建完全自定义的图形（例如网站布局和可视化）。例如，你可以将多个图像合并为一个项目的一部分，并确保通过使用各种过滤器或执行某些转换将它们全部组合在一起。

Photoshop本身是一个非常手动的工具。如果你想要明确的借助它来达到网站设计的目的，那么你应该具备一些设计技能和知识才能真正能够充分利用它。

Photoshop网站设计教程：How to design Website in Photoshop

3. 网站UI界面设计工具 - Figma

价格 - 个人免费

- 团体每人12美元/月

简介：Figma是第一个实时协作的界面设计工具。它有三个难能可贵的功能：实时协作，矢量网络和版本控制。Figma就像是基于浏览器并具有实时协作功能的Sketch。

个人体会：我起初对Figma的用户体验是持怀疑态度，因为它是一个基于浏览器的界面设计工具。但后来发现用起来还是很灵敏的。而且，浏览器的工具的优点在于接收方不需要安装任何东西，只需要在电脑上打开浏览器便可参与项目。Figma文件可以在Mac、Windows、Linux和移动设备（仅限查看）上使用。

"There is only one type of designer — the type that cares about type." -- Rohan Nanavati

好用的网站设计助手

1. Canva（免费）

非常适合设计定制设计卡片，博客图片和各种社交媒体图片（对于Twitter，Facebook等）。 非常好用。

2.Zeplin (免费）

Zeplin 是面向设计师和前端工程师的标注、Style Guide、备注文档与简单的团队协作工具。

结语

以上，是我个人总结的最好用的网站设计工具。虽然并不是都免费，但以经验之谈，这些工具都是你创建属于自己的网站的好伙伴。希望对您的网站设计有帮助，也期待您在2018年设计出自己独特的网站。

我们从网络上常见到的企业网站是用什么软件制作？

网页制作从图片处理，Flash，数据库等完成，我们来看看网络上常用的软件有那些：

一、网页制作软件：

1、Microsoft FrontPage 如果你曾对Word很熟悉，那么相信你用 FrontPage进行网页设计一定会非常顺手。使用FrontPage制作网页，你能真正体会到“功能强大，简单易用”的含义。页面制作由FrontPage中的Editor完成，其工作窗口由3个标签页组成，分别是“所见即所得”的编辑页，HTML代码编辑页和预览页。FrontPage带有图形和GIF动画编辑器，支持CGI和CSS。向导和模板都能使初学者在编辑网页时感到更加方便。

FrontPage最强大之处是其站点管理功能。在更新服务器上的站点时，不需要创建更改文件的目录。FrontPage会为你跟踪文件并拷贝那些新版本文件。FrontPage是现有网页制作软件中惟一既能在本地计算机上工作，又能通过Internet直接对远程服务器上的文件进行工作的软件。

2、Netscape编辑器Netscape Communicator和Netscape Navigator Gold3.0版本都带有网页编辑器。如果你喜欢用Netscape浏览器上网，使用Netscape编辑器真是简单方便!当你用Netscape浏览器显示网页时， 单击编辑按钮，Netscape就会把网页存储在硬盘中，然后就可以开始编辑了。你也可以像使用Word那样编辑文字、字体、颜色，改变主页作者、标题、背景颜色或图像，定义描点，插入链接，定义文档编码，插入图像，创建表格等，是不是与FrontPage 2000还有些像?但是，Netscape编辑器对复杂的网页设计就显得功能有限了，它连表单创建、多框架创建都不支持。

Netscape编辑器是网页制作初学者很好的入门工具。如果你的网页主要是由文本和图片组成的，Netscape编辑器将是一个轻松的选择。如果你对HTML语言有所了解的话，能够使用Notepad或Ultra Edit等文本编辑器来编写少量的HTML语句，也可以弥补Netscape编辑器的一些不足。

3、Claris Home Page

如果使用ClarisHomePage软件，你可以在几分钟之内创建一个动态网页。这是因为它有一个很好的创建和编辑Frame(框架)的工具，你不必花费太多的力气就可以增加新的Frame(框架)。而且ClarisHomePage3.0集成了FileMaker数据库，增强的站点管理特性还允许你检测页面的合法连接。不过界面设计过于粗糙，对ImageMap图像的处理也不完全。

4、Adobe Dreamweaver

，简称“DW”，中文名称"梦想编织者"，最初为美国MACROMEDIA公司开发[1]，2005年被Adobe公司收购。DW是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对HTML、CSS、JavaScript等内容的支持，设计师和程序员可以在几乎任何地方快速制作和进行网站建设。

二、图像处理软件：

1、Flash是由macromedia公司推出的交互式矢量图和 Web 动画的标准，由Adobe公司收购。做Flash动画的人被称之为闪客。网页设计者使用 Flash 创作出既漂亮又可改变尺寸的导航界面以及其他奇特的效果。

2、Adobe Photoshop，简称“PS”，Photoshop主要处理以像素所构成的数字图像。使用其众多的编修与绘图工具，可以有效地进行图片编辑工作。ps有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。

三、数据库：

1、MySQL所使用的SQL语言是用于访问数据库的最常用标准化语言。MySQL软件采用了双授权政策，分为社区版和商业版，由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，一般中小型网站的开发都选择MySQL作为网站数据库。

2、MS ACCESS以它自己的格式将数据存储在基于Access Jet的数据库引擎里。它还可以直接导入或者链接数据(这些数据存储在其他应用程序和数据库)。

四、环境搭建工具：

1、php程序员工具箱：中国最大的php学习行业网站php中文网开发的 "php程序员工具箱"，php程序员工具箱是迄今为止全网唯一款php程序员的专属工具箱，集合了php环境搭建、在线小工具、原生手册、文字与视频教程、问答社区等，非常适合初学者。

2、phpstudy：该程序包集成最新的Apache+Nginx+LightTPD+PHP+MySQL+phpMyAdmin+Zend Optimizer+Zend Loader，一次性安装，无须配置即可使用，是非常方便、好用的PHP调试环境。该程序绿色小巧简易迷你仅有32M，有专门的控制面板。总之学习PHP只需一个包。

CSS是样式,p是层.p+CSS是网站标准（web标准），通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别.因为XHTML网站设计标准中，不再使用表格定位技术，而是采用p+CSS的方式实现各种定位。

1：学会HTML语言，再学习p+CSS时会得心应手。

看得懂HTML语法，那么世界上80%的网站都能被你看穿。HTML语言很好学，一定要熟记常用的一些代码，因为有了像dreamweaver这样的帮助生成html代码的工具,所以很多人都忽略了HTML的学习.学会了HTML互联网中最基本的语言之后，在学习p+CSS时，你会发现：原来p+CSS也就那样，小菜一碟。

推荐网站：HTML在线学习网站：http://w3school/html/html_intro.asp

2.使用Dreamweaver的代码模式来编写p和CSS。

对于网页设计初学者来说，直接使用记事本、Notepad等工具来书写代码很困难。因为Dreamweaver的代码模式有提示功能，可以在保证语法编写的正确性。并且对不熟悉的语法可以一次性书写正确。

如图所示：书写p，html时DW的提供功能。

书写CSS时DW工具栏右侧的CSS可视化编辑功能.

我学习p+CSS时就是从Dreamweaver的代码模式学起的，也许不是最好，但很实用。

推荐网站：CSS在线学习网站：http://w3school/css/

3：养成良好的书写习惯.

有良好的生活习惯，说明这人会过日子，有良好的CSS书写习惯，说明这人做事严谨。写css的时候网上有很多推荐的规范，比如菜单类用menu，版权用copyright（CoryRight），底部用footer等等，在书写顺序上一般是：显示属性-自身属性-文本属性。当然这些都没有硬性的规定，但是遵循一些不成文的规定不是坏事，这样让自己写的代码，容易让别人读懂，搜索引擎也更加喜欢。

4：只有目的明确，结果清晰，过程才最高效，才不会轻易被干扰，被改变方向。

CSS+p网页样式与布局精通视频教程：http://pcedu.pconline/videoedu/ztsp/0904/1618470.html

在 IT 工程师和培训机构多如牛毛的时代，拜师学艺并不难。但自学编程对于毫无基础的同学来说却可能是个问题，相信有过类似经历的朋友都有一把辛酸泪和一肚不吐不快的体会。让我们从一个故事说起…

故事

某君在一个普通大学读着自己不喜欢的专业，以打游戏、刷段子和睡觉度日，突然有一天想学点什么。学编程好像挺酷，而且听说IT行业充满了机会，没准一不小心就和大佬一起“改变世界”了。

那么第一个问题来了，他该选择什么语言？

是世界上最好的语言 PHP？还是语言之母的 C？幸好还知道个编程语言排行榜，找到一看、几十种不带重样，这要逼死天秤座的小朋友。选 PHP 吧？上非诚勿扰都要被灭灯，而且就只能做个网页。万般纠结之后我们选 C 吧，听起来既高级又底层，说不准还能考个计算机二级。

接下来得干正事儿了。在这个便捷的网络时代，自学可选择的方式非常丰富。除了在网络上收集资料、阅读干货外，某君还向一些前辈咨询了自学的方法。

网络上流传的编程学习方式有：

看书（这是最容易想到的方法）

观看视频教程

阅读官网文档

读源码

到大学蹭课或者报名培训（不知道还算不算自学，没交学费都算吧？）

某君又得纠结一番了，大学蹭课和培训并不一定有合适条件，且不符合自学的气质；观看视频教程，前辈们觉得比较low；阅读官网文档和源码，这不适合初学者。总得来说看书算是比较中肯的方法，至于看什么书呢，前辈推荐了《C Primer Plus》，据说是学习C语言的经典之作。

好吧，不再纠结，直接啃这本大部头，虽然有人说看原版好一些，但是实在能力有限、还是看中文版吧。一口气花了一周时间读完这本书，果然是经典，变量、语句、条件判断甚至指针都知道怎么回事了。

某君决定按照书中的说法实践一下了，于是打开了记事本，折腾很久装了GCC，把书上的第一个例子抄了下来，在控制台的小黑窗输出了“Hello World”，成就感满满。决定上手写点高级的的东西一试身手，合上书。咦，为什么会报错？哦，原来少个分号。不禁陷入思考：为什么学了两个月还是只能在这个黑窗口算算秋水仙数？网友还说要看官网文档、要读源码、要看英文原版，我一样都不能做到，我一定是能力不够，编程果然是天才做的事情……

正经话

上面的故事是我编的，但其中的纠结却是自学者或多或少都经历过的。实际上，IT从业者并不像传说中那样需要天才般的智商，要点在于能否找到合适的入门途径，再加上一点点坚持和思考。比较可惜的情况是一些人没能找到适合自己的学习方法，并在纠结和碰壁后失去信心，然后沮丧的认定自己并不适合干这行。学编程很多时候就是一个趟坑的过程，但不是每一个坑都有必要趟，写这篇文章的目的是希望能够帮助初学者尽量少趟一些坑。

IT世界的地图

初学者遇到的一个典型问题是对IT世界没有一个大的图景。比如大多数的Java书籍，教完你基础语法知识和秋水仙数的求法后就结束了，并没告诉你接下来能干什么。我曾经为此感到非常困惑，学完Java SE后做了一个非常简陋的GUI demo，就失去了后续的Java学习方向，带着对Java的偏见，这成为了我一段令人沮丧的学习经历。关于这个话题一本书可能都不够，简单来说，我尝试从计算机科学知识和技术实践两方面来聊聊成为一名IT工程师需要具备哪些东西。

计算机科学基础

首先初学者要具备一些非常基础的知识，这些知识在你踏上工作岗位后能被实际的用到，比如计算机运行原理、网络的传输、常用数据结构和算法等。这部分属于计算机科学，也是应该被计算机专业本科课程涵盖的，不要伤心错过了大学本科的相关课程，我会分享一些有用的资源。

这里我罗列了一些计算机专业的学生一般需要学习的课程，当然每个学校专业设计都不一样，甚至采用的教材名字也不一样，仅供参考。大学计算机科学课程往往包括：《高等数学》、《离线数学》、《电子电路》、《数据结构》、《程序设计》、《计算机组成原理》、《编译原理》、《计算机网络》、《软件工程》、《数据库原理》等。有些学校会有一些额外的课程，例如《通信原理》、《汇编语言》、《线性代数》、《C语言》、《Java 语言》等。

图片来源于网易计算机专业的课程体系

尽管IT行业知识更迭非常快，但是基础知识并不容易过时，因此有大量的资料可以选择。可以选择从计算机经典丛书系列开始，比如佛罗赞和莫沙拉夫的《计算机科学导论》，甚至可以阅读一些计算机科普类读物例如《穿越计算机的迷雾》。另一种直观的方式是观看大学精品课和去跟慕课课程，比较推荐的有几个：

中国大学精品开放课程，高等教育出版社的精品课程项目，有全国大量的名校授课视频和课件

中国大学MOOC ，这个是中国大学MOOC和网易合作的，提供了上文附图中计算机课程体系中所有课程

果壳网的MOOC学院，主打翻译全球名校的优秀课程，比如斯坦福的《编译原理》和MIT的《Python》

从知识到实践

除此之外，还需要了解实际应用于设计软件或者开发网站中的实践类知识，包括某个特定语言以及周边的库、框架和工具等。 我们可以把特定需求中用到的语言、库和框架以及其他的工具称为技术栈，在技术选型上通常也是被这样考虑的，HR常常会根据技术栈来寻找需要的工程师。比如需要学习SSH 三大框架和Java的Java技术栈；为服务器web开发而生的PHP技术栈；在移动开发领域流行的IOS、安卓技术栈等。当然这里面有一些重合和共用的技术也需要学习，比如版本管理器Git、SVN就是每个合格的工程师需要去学习的。

换句话说，大学课程主要定位在上面说到的计算机科学基础知识，而市面上的培训机构主要是告诉你在怎么在实际工作中运用，所以大学和培训机构都有他们的价值。

想要更加详细的了解这部分内容，这里有一些开源的技能图谱可以参考:

图片来自： http://skill-map.stuq.org/

如何挑选你的兵器？

在介绍完计算机领域的大致图景后，就需要选择一门合适的编程语言，一个较为形象的例子是把编程语言比喻成兵器，因为我们深知编程语言对于工程师而言是实实在在的工具，我们不是为了学它而学，学编程不仅仅是学语言特性，一般来说我们也不用知道赋值语句像“茴香豆蔻”的“茴”字有四种写法。

当然语言之争从来没有停止过，如果把编程语言比喻江湖武器的话十分有趣。

C语言是M1式加兰德步枪，很老但可靠。

C++是双截棍，挥舞起来很强悍，很吸引人，但需要多年的磨练来掌握，很多人希望改用别的武器。

Perl语言是燃烧弹，曾经在战场上很有用，但现在很少人使用它。

Java是M240通用弹夹式自动机枪，有时它的弹夹是圆的，但有时候不是，如果不是，当你开火时，会遇到NullPointerException问题，枪会爆炸，你就会被炸死。

JavaScript是一把宝剑，但没有剑柄。

— 来自网络

老实来讲IT行业的最终目的是交付可用的软件，编程语言也是适应市场的。这对于初学者或许有些残酷，在工作中我们发现最好的语言是用来处理工作任务或者构建合适的应用，并不是出于爱好或者某种Geek精神。

对于初学者而言，在选择合适的入门语言时至少需要考虑两点：

是否能适用于构建你想要的应用。如果你的目标是创建一个运行在IPhone上的APP，那么最好选择 Object C 或者 Swift，学习web开发可以选择PHP 或者JAVA。实际上我们仍然可以用汇编做出网页，但是这样做成本高昂。

是否容易学习，在满足第一点的条件下请尽量选择容易学习的语言。容易不仅仅指语法简单，包括环境搭建、部署等都需要考虑在内，以及能不能容易找到好的学习资料，因此尽可能的选择主流语言。

别忘了非常重要的一点，学习编程语言还包括平台提供的API，比如Win 32 之于C++/C#/VB，以及周边的库和框架（这些库、框架和工具能在上面说的技术图谱中找到）。IT历史上甚至出现框架和库引领编程语言走向的情况：JQuery 和Angular 改变了前端开发的思想; Rails 抢走了Ruby的名气；而SSH三大框架一度代表了Java世界。

最后我为初学者整理了一个流行编程语言和用途的表：

另外还需要注意的是开发工具，可以选用IDE和有代码提示的编辑器，但尽量不要在这上喋喋不休，这就像用来盛放你锋利兵器的架子，用着顺手就行，也不推荐使用纯文本编辑器，这看起来像赤手空拳。 推荐一些编辑器和IDE

挑选合适的资料和有效的阅读

对初学者而言，我仍然推荐好的视频教程，虽然我已经听到不下5个人声称是靠阅读官方文档或者看源码学会编程的，而且认为观看视频教程见效太慢。但这个思想对初学者很危险，不得不承认阅读文档和源码能更准确找到自己想要的信息，这对深入技术原理非常有用，但视频能比文字传达出更丰富的内容，有更直观的演示和细致的讲解，我想没有比这个更适合初学者了。

除了上面提到的精品课程和慕课教程，国内有像网易云课堂，国外有lynda这种在线学习视频网站，甚至在优酷和土豆都能找到足够的教程资源。

如果选择了阅读技术类书籍，我们来聊聊怎么有效的阅读一本技术书籍。

读IT类书籍和读考试类书籍的方式不同，初学者需要选择更接地气、并且能告诉你最终能做出什么案例的书籍。你不需要通读整本书，而是需要搭建好和书中版本一致的环境，然后把书中的每行代码敲入电脑，观察这些代码怎样被运行，在遇到问题时去请教朋友或者到搜索引擎中寻找解决办法，直到示例程序能被正确运行。

可能一个月才能读完一本书，但慢点并没什么坏处，敲过一遍的代码才能算是你的，否则永远存在于纸上的代码清单中。对于关键的概念和知识点，可以在阅读的同时做一些笔记，去尝试使用思维导图来做你的笔记吧，这让你的笔记跟上你的思考，并形成一个知识网络。

自我激励

自学无疑是寂寞的。编程学习耗时较长，如何保证在这个阶段能坚持下去？

我们知道很多人都能对游戏产生强烈的兴趣、愿意为之投入时间，这其中的秘密就是游戏的奖励规则。杀死一个怪物就能得到一些金币，通过完成任务获得满足感，通过关卡的设计产生持续吸引力，进而形成正向的反馈。

其实学习编程也一样，实现一小段程序并运行，足以让人感到成就感和满足，借鉴这个简单的心理学技巧，定期给自己设定一些有实际意义但是不太难的目标和任务。太难会让人失去耐心，太简单又很无聊，最好设定一个跳起来刚好摸得着的任务。每完成一个目标就给予自己奖励，可以是完成任务的成就感，也可以是其他的物质奖励。

这个时候一个代办记事的清单就可以帮上忙了，可以是一个to do list的软件，或者自己手写一张卡片贴到墙上，关键在于不要忘了在任务达成后给予自己适当的奖励。

图片来源：https://appadvice

那如果真的遇到一些麻烦的任务呢，如何顺利解决而不至于丧失信心？笛卡尔在《方法论》一书中告诉了我们研究复杂问题的方法和步骤:

尽量将其分解为多个比较简单的小问题，一个一个地分开解决

将小问题从简单到复杂排列，先从容易解决的问题着手

子问题被解决后，进行联调测试，看是否能协同运行

在敏捷开发这种工程思想中我们正是这样做的，我们需要把业务需求进行拆分然后评估工作量，不仅可以直观的看到任务进展，手上的工作也不会看起来庞大得难以完成。

最后多说几句

非科班出身的工程师入门是有一定痛苦的，不像武侠世界里面的名门正派弟子，也没有机缘遇到骨骼精奇的世外高人，如何选择合适自己的学习方式并自我管理是很重要的一方面。没有任何Low的学习方式，只要直接而又高效，而且要能达到我们的目的就好。以我为例，从大专学校毕业并没有机会参加本科课程，曾经也在网上攫取各种视频教程，去别的学校蹭课，甚至带上礼物去一个老师那里登门拜访补课。

另一方面是如何上桌，吃上编程这碗饭。学习的成果如果无处施展便成为屠龙之技，参加一些开源项目和一些公益活动，谁不喜欢一个热心的人呢。也可以尝试去实现自己的一些idea，当做一个小项目来开发，有了一些项目实践后去找一个公司实习会容易的多。

我不知道算是有幸还是不幸经历了这一个过程，矫情一点来说是有一些曲折，但是我知道“聪明”从来不是这个行业的门槛。引用流行于知乎的一句老话“以大多人的努力程度，还轮不到拼天赋的程度”，在Thoughtworks有大量优秀的工程师，从他们身上我能看到聪明不是学习编程成功的关键，坚持和勤于思考才是。

1.1 Google Blockly概述

美国计算科学教育一直认为计算机作为当今各个领域的基础技术工具，有必要让学生尽早的了解和学习计算机工作原理，理解基础的编程思维。在2006年周以真教授提出计算思维概念，这很大程度上促进了人们对计算机编程教学的认识。图形化编程摒弃了繁琐的代码语法，以直观的图形化模块进行编程，其思想最早来源于西摩尔·帕伯特的心理学家在从事儿童学习的研究中发明的LOGO语言。近年来随着计算机技术的快速发展，出现了很多优秀的图像化编程工具提供给学生学习计算机程序设计，比如：Alice、Scratch、AppInventor等著名软件。在2012年6月，Google发布了完全可视化的编程语言Google Blockly，这是一款完全开源的，集合多种编程语言的编程工具。很多图形化编程平台都是基于Google Blockly二次开发的，譬如：APPInventor、Wyliodrin、Earsketch等优秀编程平台。Google Blockly作为一种易于掌握的图像化开源编程环境，是编程初学者学习和掌握程序设计方法的有力工具，非常有必要予以了解和掌握。

1.2 什么是Google Blockly

1、一种基于网页的可视化程序

Google Blockly是基于网页的可视化编程工具库。用户可以以离线或者在线的方式在Windows、Linux、MC和Android平台上的浏览器端进行编程操作。可以使用计算机端、手机或平板移动端进行随时随地的完成编程设计，教学编程方式多种多样。

2、多种开发语言环境库

Blockly基于图形化编程设计可以导出Javascript、Python、PHP、Lua、Dart等多种语言。通过图形化编程完成程序设计，在Blockly中有一个类似语言转换器的工具箱，可以将图形化编程语言转化成多种编程语言代码。用图形化编程方式去理解多种程序语言。

3、开源的自定义编程环境

Blockly是开源的编程工具，用户可以根据自己编程的特点要求，对Blockly工具箱进行自定义设计。同时，Blockly开发工具能让用户自定义块导出至工具箱，并在工作区工厂完成对代码的封装。如图所示。

1.3 Google Blockly的编程环境

Blockly是一个可用于Web、Android、iOS的可视化代码编辑器库

1. Blockly在线使用

打开浏览器，在地址栏输入https://developers.google/blockly/，前往Blockly官网，即可体验编程。如图所示

2、Blockly的离线环境搭建

在Github网站或者Blockly主页上找到对应系统的文件包，下载后，无需安装，解压，进入demos目录，打开index.html，选择相应的选项，即可体验。Linux系统，可下载TAR Ball，在终端进行文件解压即可；Windows系统，可下载ZIP File，并继续解压即可;Github Blockly地址: https://github/google/blocklyTAR Ball地址: https://github/google/blockly/tarball/masterZIP File地址: https://github/google/blockly/zipball/masterBlockly离线使用都是免安装的，只需Clone或解压后，进入demos目录，打开index.html，选择相应的选项，即可体验。

1.4 Google Blockly在中学信息技术课程教育应用优势

Blockly 是一个基于 Web 的可视化编程工具，以图形化语言编程，这个新语言的主要目的是为web应用提供宏(或脚本编程)的支持。可以把生成的脚本输出成Javascript, python 等，还可以自定义图形化编程工具。目前可以在中小学利用blockly开始信息技术课程的编程学习，同时结合Arduino开发板，进行创客教育的探索与实践。

1、基于WEB跨平台的图形化编程软件

在中小学信息技术课程中，编程算法的教学工具的选择一直是教师专家探究的主要问题。代码程序的封装使得图形化编程工具的优势越来越明显，在计算机编程方面出现许多优秀的图形化编程工具。Blockly是基于WEB平台的图形化编程工具，可以在任何系统平台进行在线与离线版操作使用编程，也可以在教室主机现场搭建服务器平台，WEB界面实时编程，测试编程结果。

2、定制自己的编程工具—项目式教学探索

目前的Scratch、PencilCode以及APPInventor等流行的图形化编程软件中，由于图形程序模块的局限性，一些特殊功能很难在平台实现。Blockly提供的代码自定义工厂功能，使得用户可以利用集成块编辑器，创建符合自己创作要求的应用程序块。Blockly只是一种生成代码的方法, 你的应用程序的核心在于如何处理该代码。这样一种自定义图形化块的方式可以方便师生在教学任务过程中自定义符合教学功能的模块，实现教学工具的再次开发。

3、结合开源Arduino进行创新体验编程教学

中小学阶段使用Arduino开源硬件版进行创客课程教学非常普及，使用Blockly平台结合Arduino开源硬件，是构建高中信息技术课堂的STEAM教学项目新探索。学生可以基于图形化编程跨平台创造作品，通过程序功能设计的硬件外化过程，建构跨学科知识课堂。

课后练习

进入Blockly官网，熟悉Blockly，并使用在线Blockly输入“Hello Blockly”。在本地配置离线版Blockly，并完成“Plane”游戏的练习。

如果你是网页制作新手，而且又想在线学习，但又不知道哪个好，哪么不用担心，今天小编分享的就是都是精心挑选出来，而且无论是新手还是老手都很适合的网站！

1，W3school在线教程

在w3school，你可以找到你所需要的所有的网站建设教程。从基础的HTML到XHTML，乃至进阶的XML、SQL、数据库、多媒体和WAP。

2，爱集网

https://aiji66/so/wangyezhizuo/

这网站的东西是从w3school上学不到的，爱集主要是获取一些设计灵感、有很多不错的网页制作的精品！所以无论新手还是有经验的，都建议多浏览获取灵感！

3，Jquery

jQuery是一个简洁的Javascript库，学习jQuery也是目前的大热门。

4.WebMonkey

Webmonkey 有很多不错的文章资源，都写得不错哦。

5，HtmlCodeTutorial

开始学网页制作就必须学这个HTML了

6，WebDesign

网页设计图书馆，很多网页设计的资源，不错不错。

7，Msdn Microsoft

MSDN，这个我不太懂，对.NET的人有用。

8，Tizag

Tizag 比较适合初学者去的一个网站

9，WebDevelopersNotes

WebDevelopersNotes 提供的资源很多很多HTML、教程、JS、FLASH、几乎什么都有啦

以上是资源使用率比较高的9大网页制作相关网站！分享给大家，希望可以多多点赞，转发哦~~有其他的好的推荐也可以留言给我！！

网站分为静态和动态两种，初学者可以从简单的静态页面学起。这里就给各位童鞋介绍几种常用的创建静态网站的方法。

最简单直接的方法就是去网络搜索html源代码，下载下来后使用网页编辑器修改图片和文字信息即可。

初学者推荐使用这种方法，可以让你直观的看到效果，学习起来更方便。

打开Dreamweaver，选择创建HTML项目。

点“设计”按钮，可以直接进行设计而不用管代码的如何编写。

如我们在页面上创建一个表格，直接点表格按钮，在弹出的窗口中设置相应内容，点确定就可以添加一个表格。然后可以在表格里直接输入文字，插入图片，创建超链接等操作。

待编辑完毕排版完成后，保存成Html文档。Html文档可以用IE直接打开预览。所有的页面都编辑好后，放到网站所在目录，设置默认页面就可以正常访问了。

如下图，加入我们想用这个图片作为网页背景，然后在上面写字。我们就利用用Photoshop的切片功能来实现。

用Photoshop打开图片，用切片工具将图片制作完成。

点“文件”-“存储为Web和设备所用格式”，然后在新窗口什么都不用修改，点“存储”，然后选择存储路径，格式选成“HTML和图像”，保存后打开保存的路径，就可以看到已经生成html文件，images文件夹中存放的是被切割的图片。

用编辑器打开note.html，将要写字地方的图片设置为背景，然后就可以在上面写字了。

对于网页制作者来说，了解常用的网页制作软件及功能是必备之基础，但是对于初学者来说，往往显得还不明确，下面小编就为大家介绍几款常用的网页制作软件，通过分析其优缺点，以便方便大家根据需要来选择。

一、最简单的网页制作软件：其实我们完全可以利用办公软件来设计网页，只要网页内容不太复杂或只涉及静态网页部分时，我们只需要利用办公软件即可快速生成网页。具体做法，首先设计好页面，然后另存为网页格式即可。

二、Microsoft FrontPage,是一款轻量级静态网页制作软件，特别适合新手开发静态网站的需要，目前该应用很少用于制作网页。

三、Dreamweaver网页制作软件，该软件已成为专业级网页制作程序，支持HTML、CSS、PHP、JSP以及ASP等众多脚本语言的语法着色显示，同时提供了模板套用功能，支持一键式生成网页框架功能。是初学者或专业级网站开发人员必备之选择工具。

四、CSS Design:一款适合对CSS对进调试的专业级应用，能够对CSS语法进行着色，同时支持即时查看样式功能，特别方便程序的调试以及效果的比对。

五、Flash动画制作软件：动画或动态图片是网页的重要组成部分，充分合理的使用Flash程序来设计网页元素，往往可达到意想不到的效果。

六、PS（Photoshop）图像处理软件：用于对网页图片进行润色或特殊效果处理，是一款网页制作必备之软件。

在给大家看个高级网页制作软件

1、Microsoft Visual Studio该系列的版本有：2003、2005、2008和未来的版本；适合开发动态的aspx网页，同时，还能制作无刷新网站、webservice功能等，仅适合高级用户。2、Jbuilder不论是各种版本，均适合使用其开发出JSP网页，仅适合高级用户。3、记事本别以为记事本功能非常少，软件很简单；但是，如何想使用它来制作网页，也仅适合高级用户；因为在其内容，没有任何可视化的操作可直接制作网页，而只能编写各种HTML代码、CSS代码、JS代码和各种动态脚本，方能制作出网页来。

参加工作后才发现，掌握PS技术可以给自己带来多大的方便。可惜上班族时间有限，想要集中报班学习并不是那么容易，但如果懂得利用网络资源，想利用业余时间学习一门实用的技能，就没有那么难实现了。今天小编来给大家分享几个非常好的免费PS学习网站，希望对大家的学习有所帮助。

1.优设网

http://uisdc/

优设网为设计师提供ps教程、UI设计、素材下载、高清图库、配色方案、用户体验、网页设计等全方位设计师网站导航指引。每周更新及时，是优秀网页设计联盟。这个网站有些设计作品很有创意，教程内容丰富，还有一些设计师分享一些经验。

2.PS爱好者

http://psahz/

PS爱好者网提供Ps教程，PhotoShop教程，ps实例教程，PS抠图教程,ps，调色教程，Ps基础入门教程，文字特效，Ps视频教程，让您轻松快乐的学会Adobe公司的Ps照片处理软件。适合初学者，也适合有一定PS基础的人学习。

3. PS学习网

http://ps-xxw/shilijiaocheng/

PS学习网是为网友提供PS教程，图片处理PS教程，文字效果PS教程，非主流制作等Photoshop教程和Photoshop视频教程的专业网站，实例丰富，讲解详细，很适合设计爱好者收藏，并抽出时间深入钻研。

4. 中国PhotoShop资源网

http://86ps/

PS新人学习PhotoShop教程的好地方，有摄影PS教程和PhotoShop软件，并提供免费照片处理 PSD模板 PS素材等，内容非常丰富！

5. ps教程自学网

http://16xx8/

适合新手学习的ps教程，包括新手教程、技巧教程、工具教程、通道教程、理论教程、滤镜使用等等。内容多而广，教程资源源源不断！

6. 思缘设计

http://missyuan/school/photoshop/

这个网站的教程，相对而言比较专业，调出的效果也不错，有些海报的设计还挺养眼的。做图的时候可以进来看一看，欣赏一下优秀的设计作品，从中学习人家的修图技法，助自己进步更快。

7.PS家园网

http://psjia/

PS家园网集PS教程、PS笔刷、滤镜下载、PS素材下载、PS交流于一体，提供一站式的ps学习体验。

8.设计前沿网

http://wzsky/

设计前沿网是中国优秀设计师联盟网站，提供平面、广告、海报、插画、标志、logo图片、室内装修等设计作品欣赏，以及ps教程、网页设计教程、css教程等技术文章和免费网页设计教程，网站精美简洁，素材丰富，是个非常不错的学习网站。

以上学习网站，你觉得有用就收藏起来，有空的时候好好学习。教程里的方法是灵活的，只要找到共同点，就能触类旁通，举一反三！祝大家学有所成！