任何一个网站从开辟到终极上线， 都是需求团队协作且慎重的一个流程，而实际中往往会遇到各类问题，因而网页计划师通俗需求扮演多种角色，除了掌握必备的网页计划技艺外，更应该对后期的开辟流程及内容有所明白，以便从全局来把握网页的雅观与实用。这里小编总结了一些实用易懂的计划与开辟教程，大家先睹为快吧！

（一）网页计划教程

1.呼应式计划

呼应式计划师由闻名网页计划师Ethan Marcotte最初提出来的计划概念，随后席卷前端和计划范畴，如今已成为网页计划的大趋向之一。呼应式计划的网页如今曾经很多了，而相干的教程也是不可胜数：

呼应式网页计划：它是什么以及怎样运用？

引荐指数：★★★★★

这是一篇很不错的入门根底教程，作者Kayla Knight将会引导你逐渐明白呼应式计划的根底知识，并让你明确它的根底原理。假如你对网页计划感兴味，这篇文章不容错过。

呼应式网页计划指南

引荐指数：★★★★★

关于需求更进一步明白呼应式网页计划理论，及实际的产品计划、界面计划及与交互计划的不同点，这篇文章都会通知你。

2.扁平化计划

现如今，扁平化计划比起最初的作风曾经没有那么“平”了，更明晰的层次，更丰厚的细节，以及更良好的视觉体验，使得它仍然占据主流，而且跟呼应式计划有着极高的符合度。

35个扁平化网站计划灵感

引荐指数：★★★★

这篇文章罗列了大量扁平化计划实例，并对应将其计划的亮点做阐明，协助你更好地明白怎样排版、配色以及网页布局等等。

扁平化能否曾经得宠？10个案例通知你答案

引荐指数：★★★★★

这篇文章追根溯源将扁平化计划的开展史及近况进行引见，同时罗列和比照了它的优缺陷，关于想要曾经入门或正想尝试扁平化计划的小同伴来说，有很好的引导价值。

3.字体计划

受限于技术的缘由，网页计划中的字体，并不像平面计划中运用那么自由，除了比较固定的一些字体（比方雅黑、宋体、黑体等）外，很多特别字体的计划也只能通过图片的方式进行出现。

环球着名的5大顶尖字体及其用法

引荐指数：★★★★★

这里网罗了环球各地的网页计划中，最常用的6中字体，包括：Google字体、Open Sans字体、Montserrat字体等，每款字体中都附有下载链接和知心的用例示范。

4.表单计划

网页表单是拜访者与网站拥有者主要的疏导途径，因而确保网页表单容易明白和运用的紧张度，天然不必多说。但是要做到不让表单乏味，还是有很多特别且风趣的小技巧的。

网页后台计划：列表计划、表单计划

引荐指数：★★★★

这篇文章细致引见了，网页后台中的表格和表单的计划细节，从菜单/导航、数据/图形展现、表格，到表单、控件/组件以及弹窗等，都有触及。

3个表单计划的最佳技巧

引荐指数：★★★★★

你能够晓得，计划师、贩子乃至平凡的访客对表单计划的不同想法，以及应该避免的雷区和进步用户体验的当心机。

（二）网页开辟教程

下面是针对网页开辟及建立内容的站点，此中包括对CMS（比如WordPress）的讨论，CSS和HTML教程代码等。

1. Instant Shift

这个站点在国外的网页计划师和开辟人群中很盛行，里面有很多关于网站搭建工具、CSS，教程等高质量的博文。

2. CSS-Tricks

这是由Chris Coyler创立的只涵盖CSS内容的博客站点，此中包括网页开辟与计划的各个方面，以文章、视频、代码片断、教程等方式进行出现。

3. Mockplus

作为简洁高效的原型计划工具，Mockplus的博文提供了丰厚的计划开辟教程，涵盖 前端开辟职员需掌握的技艺 、 建站模板 、 初级iOS开辟 、 UI开辟与前端开辟的不同 等内容，支持订阅推送。

4. Six Revisions

这个网站是Jacob Gube在2008年创立，包括构建网站及使用程序的整个工作流程。每周发布更新教程、新音讯及指南，针对的读者人群，包括PS到自由职业者。

5. Smashing Magazine

这个站点转为计划师和开辟职员打造，提供了一系列相干的文章和教程，内容包括代码、挪动使用程序和计划、图形等。当然，也有不少的网站主题、PS、CSS等。

（三）网页开辟与计划工具

正所谓“工欲善其事，必先利其器”。想要成为一个良好的计划师，工具的运用也是至关紧张的一个要素。这里小编也预备了网页计划与开辟中需求用到的工具清单，不妨尝尝。

1.UI计划工具

PS ：又名Adobe Photoshop CS，是现在公认的很好的通用平面美术计划软件，主要功用包括：图像处置和绘图。

Adobe Illustrator ：一款不错的矢量图形处置工具，可使用于网页、多媒体图像以及印刷出版等页面的制造，合适小到大型的复杂项目。

Fireworks ：相似于于Illustrator，不只具有编辑矢量图形与位图图像的灵敏性，还提供了一个事先构建资源的公用库。

2.交互原型工具

Mockplus ：强大易用的疾速原型制造工具，一键拖拽创立交互，海量UI资源与封装组件，团队协作省时省力。

Sketch ：一款轻量的在线矢量计划工具，能够基于制造好的视觉计划稿做交互，周边的插件及教程比较丰厚。

InVision ：主要针对原型计划和团队协作提供效劳，也是将事先做好的视觉计划稿上传后，添加链接来生成在线原型。

3.网页开辟工具

Dreamweaver ：现在公认的专业级网页制造程序，支持HTML、CSS、PHP、JSP及ASP等浩繁脚本言语的语法着色表现，是初学者或专业级网站开辟职员必选工具。

FrontPage ：一款轻量级静态网页制造软件，合适开辟静态网站的新手运用。

CSS Design ：实用于对CSS对进调试的专业级使用，也支持即时检查款式功用，方便程序的调试和结果的比照。

的确，没有所谓最好的工具、只要最合适的，选工具的确是make a balance的流程。最紧张的，还是本人经过学习与考虑后沉淀下来的经历和发明力，计划之路一同加油！