网页设计该怎么学？

• 什么是网页设计

• 如何开始？
  

主目录下应有一个help目录,存放说明文件。说明文件包括：

目录说明

文件列表说明：存放位置、文件名称、功能及处理逻辑描述、所涉及的库表、调用关系。

数据库说明：数据库位置、空间分配要求、表设计、关系设计、视图设计、存储过程设计等。

更多规范可以参考：网站设计规范

一系列经验的分享：

http://jirengu.com/app/album/10

• VIVUS
  

• BLOCS
  

• http://PIXACT.LY
  

【这些灾难性网页设计体验逼疯了我们】

设计者只根据经验设计，是一件多麽让人沮丧的事情。当我们使用设备浏览网页，如果给我们一个很差的用户体验，总会有那么些时候这些体验会把人逼疯。

这让我思考一些让人会抓狂的错误用户体验。错误的设计对网站有直接的影响，无论是对页面浏览还是销售业绩。

下面我列出了7个灾难性设计，遇到这种情况，作为用户的我们，是不是几近疯狂。

没有什么比得上注册后操作、浏览让人们想破口大骂、鄙视了又鄙视的事情了。我承认，这是一个获得用户电子邮件或者其他信息的方法，但是反过来想：你有失去了多少用户呢？(PS:PEACE OUT=BYEBYE)

人们已经不再仅仅是使用电脑了，手机、平板也成了浏览工具，所以，不要幻想用户喜欢用手机等小屏幕设备浏览电脑网页。开发移动应用程序吧，从长远看，你给与了用户更多灵活性。

没有人喜欢填写冗长的表格，特别是在移动设备中。如果可以，就可能减少不需要的表格内容、选项。

你希望人们能够阅读你的网站，并喜欢你的网站。网站字体会给人留下第一印象，所以不要把它搞砸了。记住，选择一个对浏览者友好的字体。

当一个页面或网站杂乱无章，用户也不见得会想去通过搜索寻找结果，情况就是这样。

糟糕的搜索功能的结果，会引起用户的不满，最终离开网站。

Web是一个可视化媒体，他更像是彩印的杂志而不是垃圾小说。

在网站中使用图片、照片、视频，和长篇大论说byebye。如果不这样做，我想只会让读者犯困或不在继续访问。

如果比的网站是一个电子商务网站，那么Web就是你的展

览厅。所以，不要拿一些颗粒状、如同邮票的图片给你的客户观看。你不仅仅要提供高质量的图片，还要提供多元产品给浏览者。

更多好文章：

如果你在过去10年里经常访问外国网页，你肯定会浏览过Reddit, Craigslist, Wikipedia, 4Chan, Hacker News或者是The Drudge Report这样的网站。虽然这些网站都各自有其各自的行业所属，但是它们都有一个共通点，那就是它们的网页视觉效果都极差，可是它们却又都是最受欢迎的网站。

Web技术经过了这些年的提升，设计师们可以透过这些技术和一些工具来处理更多前端视觉效果。然而，这些网站的功能布局不良，在今天的网络环境下并没有与现代的设计理念相连接。

为什么还有一些网页看起来还像是在九十年代？是因为那样的页面布局干净、字体精简而又颜色互补吗？

根据记录，The Drudge Report和Craigslist自从1995年推出以来都已经超过了20岁了。维基百科还差15个月就到20岁，Reddit已经10岁，4Chan也奔向了13。

重点是，这些网站受欢迎与否并不是看网站是否经过了精心的设计。你可能一眼看上去就会对一个网站有第一印象，喜欢还是不喜欢。但有好的设计不仅仅是创造一个美观的布局。你还要考虑的是如何去使用这个网站，如何帮助访客更好地透过网页效果完成他们所想要达到的目的和任务。

Data Visualization的创始人兼CEO Amit Das对此应该很有发言权。

这是在设计上与Reddit、4Chan等站的巨大差距。差距来自今天内容消费者对于媒体的预期已经从聚合内容转移到了用户生成。就像Facebook和Twitter这样的社交媒体以及，一些分类驱动的内容平台就像Craigslist那样，当然还包括一些论坛像黑客新闻。

但我们从上述网站的现状来看，他们已经存在很长一段时间了。在2016年到来之际并没有初步达到受众的期望。作为组织，他们的重点是偏向于内容业务，他们有强有力的流量和用户基础。例如Reddit，这是全球点击量排名第32的网站。

人们总是期待着有新的竞争对手的加入，有更好的设计和视觉效果来挑战这些旧的网站。这就像房产网站Trulia挑战Craigslist那样。但是却有不得不面临流量这座大山，要知道房产搜索一大部分流量都来自于Craigslist。而这仅仅是Craigslist在全球广告业务的冰山一角。

一些最可能的原因就是以下几点：

• 易读性不佳：各种字体和冲突的颜色可以让网站很难读，特别是一些很长很难度的帖子。
  

• 网站导航混乱：如果用户在您的网站上不知道该看些什么，或者不知道一个链接会给他们带来什么，他们不会在你的网站待多久。

• 加载缓慢：如果你的设计使用了很多脚本，图片和动画，那么打开你的网站就需要很长一段时间，因为需要慢慢加载。一般人可等不起。

如果身为设计师的你规避了以上几点，相信您已经具有一定的设计水准。

维基百科的版面设计看起来好像也已经过时了，但是里面的信息都还是清晰可辨。Reddit可能第一次使用的时候不是那么好用，但是它的加载及其迅速而且在与众多站点的比较当中都算得上是轻量级的。

没有说笑，这就是The Drudge Report在2016年你会看到的样子。

在2008年，Basecamp的联合创始人Jason Fried认为The Drudge Report的版面设计是相当成功的，他认为即使在今天一些设计理念也是很好的。因为它的设计理念很经典，易于维护且兼容性强。另外它的设计也是真正独特的。

这些就是重要的考虑因素，因为一个坚实的设计是需要花费时间反复迭代、反馈并认真实施的。

Hacker News的布局灵感来源于UNIX

Y Combinator的黑客新闻编辑Daniel Gackle解释了为什么vote-based 链接能够将创业者和开发者零散的界面这么好地连接起来：

这是因为Hacker News强调内容高于一切，花哨的UI界面会把人们的注意力分散。而这里面的文字和编码内容却是永恒的。Hacker News的信息密度是经过仔细校准过的，想要挤出更多的空间塞信息进去或者使得信息太轻薄都不实际。

Hacker News的设计指导精神其实也是为了简化，而且是要让读者自己决定什么是好的。

要做出一个漂亮的东西是基于代码脚本设计的，页面需要最小的负荷。我们用户关心的东西可能很多，我们要做的一定要比他们更多。社区也有其自身的优势，我们追求的是经典而不是现代。同时，我们希望吸引人的东西是内容，而不是花哨看起来新奇的东西。

▍有时候丑是不可避免的

腾讯的主页看上去就是一个忙碌的典型。

在外国人看来，中国的信息摄入以及互联网速度普遍比较低，一些网站也因此可以减轻网站的链接负担，有的也刻意减少用户的想要查找的页数。

根据Reddit和The Drudge Report的案例显示，用链接来填充页面是一件十分不可行的事。虽然一方面，它长得不漂亮，但另一方面，它却可以让你快速浏览大量的有效信息，让你的时间价值最大化。优化网站只是为了让新的访问者能够更好地去找到这些新闻来源，这么做也都是在经典的设计基础上做出的一些新的小尝试。

Gackle更提到了：

Hacker News的缺点在于他对于新访客来说有点儿神秘。在早期，探索未知像是一种乐趣，但到了现在更像是在解决一个难题。但是事情状况不会这样一直持续下去，当网站有了更大的内容储量时，必须解决掉易读性这个问题。一旦设计更复杂，那么事情不会变的清晰简单。显然我们不会这么做。

▍那改变会是好事吗？

当我们还在对于网站设计缺陷颇有微词的时候，唯一的解决办法就是彻底地改造他们。但有一点值得注意，重新设计对于用户来说是一次冲击，Digg当时这么做的时候就使得用户数量下降了可怕的34%，虽然它有了一个全新的面貌。

Das说明了为什么大改版不会是一件好事：

考虑到这是一些大流量的网站，一些小的设计变化都可能造成一些大的冲击。事实上Reddit最近在做一些设计上的改动测试，这个动作最起码表明了其实他们也是在适应设计技术的发展变化。

很多人认为Reddit会进行大改版，但是一点一点的不断做一些小的改动才应该是理想的，因为这样不会影响站点内的主要业务及变化。

当然大改动还是小改动都有可能通向成功，就像DeviantArt这个世界上最大的艺术和设计社区。重新整顿了网站以全新的品牌运营了几年后，还不错。这其实都是因为产品核心的DNA并没有改变，它仍然在慢慢改变内部的页面模板。他们认为要跟上技术的发展变化，不断做出变化是一个好的方法。

Gackle也阐述了一下Hacker News的主张：

相比起一下激起大的水花我们更喜欢以温水煮青蛙的方式来进行改变。其实我们跟我们的一些用户一样，都讨厌改变。我们实际上已经改变了很多在过去两年的事情，但有些东西就是只适合原来那样的，不需要有多少的变化和差异。当添加新功能的时候，程序员如果发现在代码上不用太大变化的话会很有乐趣。因为这验证了他们之前设计的价值。

我们喜欢的变化是把一些不必要的东西给拿掉，YC和Hacker News的CEO Paul Graham就是一个如此追求简单的人，对于我们来说，胜利就是看见我们的结构不断简化。

当你添加了新功能然后再把它删除掉的时候，你会发现简化的感觉真好。有一件事情我们不会做，那就是追求时尚潮流的设计。这对于Hacker News来说是一个很大的工程，因为首先你要去学习更多，然后透过重新的运营去提高内容的质量。

有哪些长得很丑的网站，可是你却很喜欢的，请告诉我们！

网页设计需要的学习的有：div+css+ps+js+jq。
网页设计主要是利用Dreamweaver或者其他软件，用div+css布局，用js实现需要的效果
根据ps做好的图稿进行切图，用div+css美化网页就好了。

首先找好定位，全栈？纯界面？前端？后端？前后端？纯开发？新技术研发？服务器？大数据？如果无法定位，就啥都尝试，找到自己所长。

1.打好基本功（软件，技能基本功）

2.多做（商业项目，免费开源项目，插件，UI KIT等等）

3.多想（多总结归纳）

4.多学（研究市场，探索新趋势新技术，不断学习）

编程语言Java，已经21岁了。从1995年诞生以来，就一直活跃于企业中，名企应用天猫，百度，知乎......都是Java语言编写，就连现在使用广泛的XMind也是Java编写的。Java应用的广泛已经到了“无处不用”的盛世，而且一直在语言排行榜榜首，从未被超越。废话不多说，今天主要是给大家讲讲怎样学习Java，给大家建议一条轻松精通Java的学习路线。有了相对标准的流程，那么你的学习效率一定会倍增。

基础篇发出后大家反响还是较好的，感兴趣的朋友可以百度《黑马程序员：轻松精通Java学习路线连载1-基础篇》，即可查看基础知识的学习内容。我出Java学习路线的系列文章，只是想给予爱好技术的人一个借鉴而已，也就是提前亮，希望可以在你学习与想要学习Java的时候尽一点微薄之力。文字我会尽量使用大白话说明，毕竟一些知识点也无法用大白话说清楚还请谅解。

JavaWeb网站设计基础阶段

简单理解JavaWeb就是网站设计，通过此阶段的学习过后应该要掌握以下几方面能力：

1.可以精品制任何网站前端页面

2.可以解决网页浏览器兼容性问题

3.可以解决PC端和移动端兼容性问题

4.可以使用前端脚本进行相关网页功能特效编写

5.可以使用JavaWeb核心技术轻松写出任何网站功能模块

6.可以使用JavaWeb高级部分知识解决网站的相关高并发问题

你完全可以胜任JavaWeb开发工程师的工作，为之后的框架和整体项目的学习打下良好的基础，下面我对知识点进行一个详细的介绍。

一、前端技术

1.HTML

超文本标记语言，标准通用标记语言下的一个应用。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。（网站页面的布局，可以点开任意一个页面右键查看源代码，即可看到html的字样）超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

学习内容：了解HTML语言，HTML语言背景知识，掌握HTML的整体结构、文件标签、排版标签、块标签、字体标签、列表标签、图形标签、超链接标签、表格标签、表单标签(form标签、input标签、select标签等)、分区标签、头标签。

2.SS

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。简单说就是网页的样式制作。

学习内容：CSS介绍、CSS导入方式(内部样式表、内联样式表、外部样式表)、五大CSS选择器(ID选择器、类选择器、元素选择器、属性选择器、伪类等)、样式属性介绍。

3.JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

学习内容：JavaScript编程，JavaScript语法、数据类型、运算符、表达式、流程控制，JavaScript内部对象、数组、字符串、日期时间、数学函数、正则表达式，JavaScript函数、自定义函数、全局函数，BOM介绍、window对象、location对象、history对象使用。 DHTML编程，理解DOM树，DOM对象，常用DOM对象的属性、方法 和事件，编写事件处理程序、使用DOM操作HTML文档、遍历文档树上的节点、搜索文档中特定的元素、修改文档内容、往文档添加新内容、使用DOM操作 XML文档。

4.jQuery

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。jQuery是免费、开源的，使用MIT许可协议。

jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

学习内容：认识JQuery、选择器介绍、css选择器、jQuery选择器及其优势势、基本选择器、层次选择器、过滤选择器、表单选择器、选择器练习小案例等;JQuery操作DOM：DOM分类、查找元素/属性节点、创造元素/属性/文本节点、插入节点、删除节点、复制节点、替换节点、包裹节点、属性操作、样式操作、遍历节点、CSS-DOM操作;动画和事件：jQuery中的事件、加载DOM、事件绑定、合成事件、事件冒泡、事件对象的属性、移除按钮上注册的事件、模拟操作、JQuery中的动画。

5.BootStrap

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。[1] 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。

Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

学习内容：响应式页面的的开发与设计，强大的栅格布局，内置的CSS类库，JS插件，快速布局商城页面。

二、MySQL及JDBC

MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下产品。MySQL 最流行的关系型数据库管理系统，在 WEB 应用方面MySQL是最好的 RDBMS (Relational Database Management System，关系数据库管理系统) 应用软件之一。

JDBC（Java Data Base Connectivity,java数据库连接）是一种用于执行SQL语句的Java API，可以为多种关系数据库提供统一访问，它由一组用Java语言编写的类和接口组成。JDBC执行SQL语句操作数据库。

这里在说明一下，数据库是非常重要的，以后可以说做项目做开发就离不开它，所以大家一定要好好学习此阶段课程。不知道大家有没有记忆，在基础阶段就学习MySQL和JDBC了,这里又加强学习，可以看出其有多重要。学习内容：

1.Mysql数据库回顾数据库使用，SQL语句介绍、数据库增删改操作DDL语句使用、表增删改操作DML语句使用、表查询操作DQL语句使用、以及查询语句条件、排序、聚合、分组操作。

2.JDBC开发回顾JDBC介绍、驱动的原理及使用、JDBC核心使用、DriverManager、Connection、Statement、ResultSet详细使用，JDBC的CURD操作、防止SQL注入及PrepareStatement使用。

3.连接池和DBUtils连接池的介绍，自定义连接池。常用的开源连接池的DBCP 和 C3P0的介绍和使用，JDBC的工具类DBUtils的使用。

三、JavaWeb开发核心内容

学会Web核心技术就拥有了开发b/s系统的基础能力可以来开发一个网站了，如：实现网站的用户登录、注册，商品信息的分页显示、商品信息的异步动态查询，用户名异步校验等功能，下面是学习内容：

1.XMLXML的概念与基本作用、XML的基本语法、XML的约束模式、DTD、Schema、名称空间。XML解析介绍、DOM4J 解析XML、XPath的使用。

2.HTTP及TomcatWEB服务器的工作原理、Tomcat的安装与启动运行、Tomcat的体系结构、在Tomcat中配置WEB虚拟目录与发布WEB应用程序的方式、设置目录的默认网页、使用Tomcat配置虚拟主机、WAR文件生成与使用。HTTP协议详解。

3.ServletServlet简介、Servlet生命周期、servlet配置详解、访问servlet路径分析、ServletConfig使用及servlet初始化参数的使用，ServletContext使用、系统初始化参数、web资源获取。

4.request与responseHttpServletResponse和HttpServletRequest的应用、HTTP协议在web开发中应用、请求转发与重定向使用。

5.Cookie与SessionCookie及Cookie的应用，Cookie实现商品浏览历史记录、Cookie实现记住用户名和密码,Session及Session域的应用，Session跟踪机制，利用Session防止表单重复提交，MD5算法及其应用，Session的持久化。最后结合之前所学知识完成一次性验证码和购物车小案例。

6.JSP技术JSP运行原理、JSP中的9个内部对象和作用、JSP表达式、JSP脚本片段、JSP声明、JSP注释,EL表达式简介，EL获得数据、EL执行运算、EL内置对象、EL函数，page指令及其重要的属性，在web.xml文件中设置全局错误处理。JSP中的include指令及其典型应用。pageContext对象的详细讲解。JSP动作标签介绍。JSTL标准标签库的介绍及使用。JSP模式介绍、MVC模式介绍、JavaBean介绍、BeanUtils使用。

7.JDBC高级JDBC的事务，转账案例的实现。JDBC的CRUD及分页，条件查询。

8.AJAX开发AJAX介绍、XMLHttpRequest对象详解、JQuery的AJAX、JSON介绍、JSONLIB插件的使用。

9.JavaWeb高级开发技术Servlet Listenert监听器介绍及使用、Servlet Filter过滤器介绍、过滤器生命周期、过滤器链分析、FilterConfig介绍。邮件发送，自动登录功能的实现。

10.基础加强注解介绍、自定义注解介绍、元注解使用、代理介绍、动态代理Proxy使用、类加载介绍。

11.Linux虚拟机安装及使用，CentOS的安装，Linux的常用命令，组、权限命令，在Linux上安装JDK，Tomcat，MySQL。

12.RedisRedis是时下非常流行的NoSQL数据库，使用Redis可以实现高性能的缓存方案，知识点包括：NOSQL介绍、什么是redis、redis安装配置、redis数据类型及操作(String、Hashs、Lists、Sets、Sorted Sets)、Jedis使用、发布订阅、持久化、主从复制。

四、阶段案例

学习了这么多知识没有项目案例的检验，根本不知道到底学了这么多有没有用，所以除了每个阶段的小案例外，最后一定要自己独立完成这个网站才可以。结合之前所学知识完成JavaWeb阶段电子商城，本系统采用经典的MVC设计模式，从需求分析到编码将涉及到Java Web大部分常见的技术，让学员理解真实项目的软件开发流程(分析、设计、编码、测试、部署)，通过此项目的锻炼学员可以熟练掌握基本的Java Web开发和复杂问题的解决方案，为后面的学习奠定基础，使用了最新的技术完成该案例，在项目中会使用Redis缓存技术，会抽取IOC的工厂，并且可以运行在Linux服务器上。

JavaWeb的知识相对于Java基础的知识来说不会那么枯燥，大家在学习的时候一定要“燥起来”，多练习多打代码，自己喜欢什么样的页面，就赶快看看源代码，看多了自己就会做了。做出自己的想要的网站是一件多么自豪的事啊。

个人觉得，以下分享即是最终答案！

一、明确网页设计需要学些什么

软件技能、创意表达、视觉刻画，这是网页设计师的核心技能。网页设计是生产运营中的一个技术支撑环节，其最终的作品输出都是为企业或商业产品服务的。学会理解你的服务对象，将企业的文化价值、产品的功能属性准确传递给潜在客户，这就是网页设计的阶段性目的，也是一名好的网页设计师需要学会的东西。

二、网页设计师的工作日常

1.信息的收集整理（前期调研阶段、竞品分析、受众分析）

说人话：首先要分析理解自己的设计内容，设计初期可以先收集一些同行、或竞品相关的网页设计、或者图片素材做参考。

2.信息的归纳提炼（策划设计阶段）

说人话：把收集来的信息加以提炼，归纳整理出适合自己的网页设计的有用信息，以此来把握整体的网页设计风格及大的方向。

3.信息的视觉化表现（软件制作及执行传播阶段）

说人话：信息的视觉化表现也就是，在Photoshop软件中完成排版布局、页面的icon设计、图片的合成处理等，以及推广banner海报的设计，然后切图交接给web前端开发。

三、网页设计的常见类型

△房地产官网设计，作者：腾讯-郭亮，来源：网页设计高级教程

目前，关于网页设计的常见类型及方向有：淘宝天猫类型的电商视觉设计、企业官网的设计、新品宣传、活动专题类型的网页设计、后台管控类的网页端UI设计。在日常的工作中这几种也许你都会接触到。在学习之初你还得从软件技能、排版布局、图像处理、切图输出等这些具体的点着手熟悉。

四、学习网页设计的具体知识点

(1).首先要精通设计软件，把photoshop玩转，这是网页设计的主力工具！

(2).深入学习排版设计，以及三大构成中的平面构成、色彩构成、立体构成，掌握一定的素描基础，以明确：光影变化、透视结构、构图平衡的基本视觉规律。

(3).掌握网页设计规范，学习网页设计概述、制作流程、视觉元素、色彩搭配、以网页布局排版、切图、交互知识等。

(4).学习网页设计创意表达的思路流程，如何将文案创意具体到视觉化呈现的全过程，以及画面光影细节刻画的技能提高。请参考：网页设计高级教程。

(5).了解一点前端代码HTML、CSS的运用，学一款代码编辑软件，推荐网页设计师用Dreamweaver。

(6).了解你设计网站的公司及产品，熟悉这个公司及其产品面向的人群！

(7).拓展学习网站优化、开发、后台数据处理常识（加分项目！）

五、学习网页设计，你要知道的以下三点。

1、网站的制作流程

引用于：自学网页设计，需要了解的网站开发流程

通常情况下，任何一网站的建立，都会经过“分析策划—交互设计—视觉设计—前端制作—后端制作—测试上线”6个环节。

在实际的工作岗位中，一般由“网页设计师”负责「视觉设计」板块，即我们平常所说的「网页设计」。而「前端制作」环节则主要有“前端工程师”来负责，即用代码来重构还原设计师的视觉稿，这一环节也就是我们平常所说的「网页制作」。

很多初学网页设计的朋友，对这两者的关系往往是傻傻分不清楚的状态，对自己的专业定位没有清晰的认识。这就导致学设计的同学，后来干到了“前端工程师”的岗位，学前端的孩子开始猛补“设计知识”，这个就是要走偏的节奏。

2、网页设计，是以视觉设计为主的工作。

自学网页设计的核心任务是学习“视觉设计”相关的知识点。用什么样的排版，去梳信息的层次逻辑，用什么样的颜色，以及多大的字号？如何让画面表现更具视觉创意、交互体验会更好，这是新手学习网页设计应该画下的重点。

一个网页被设计出来，是给人用，给人看的。 要好看（简洁）、要好用（高效）这才是一个设计师需要反复考虑的。视觉+交互，是网页设计师的核心竞争力。

其中“视觉设计”的依据，源于前面的策划和交互设计。最后出具的“视觉设计稿”得符合品牌定位，满足生产运营、以及用户需求，这是网页设计师必修的基本功！

3、前端制作，是以前端代码为主。

前端制作在流程上，是在视觉设计之后。这部分工作通常是由WEB前端工程师来完成的，工程师通常会运用到HTML、CSS、以及JavaScript、jQuery等网页前端代码，来重构网页设计师的“视觉设计稿”，以及交互动画等。

“前端工程师”除了要配合网页设计师外，还要配合做后端工程师，做好网页端的数据收集处理等工作。如果你要励志成为一个优秀的网页设计师，请牢记自己的岗位职责和学习重点，在没有认清“视觉设计”前，要当心自己是不是越位到Web前端开发这个坑里去了。

△图例：优秀的电商网页设计作品，视觉合成。作者：尚云

再比如优化网站所需的SEO、Ajax等技术，虽无需你动手实践，但能做到了解一二，也是不错的加分项。在设计的时候，也可充分利用这些规则和技术来规划你的版面，使其更加的专业友好。

再往后

上面所说的，都是网页设计师必须掌握或了解的基本功。在基本功掌握扎实了以后，则可围绕着创意表达、营销传播、用户心理、交互体验的维度在进行深入学习探讨，以指导你做出更好的设计。这一阶段，则是思维层面的提升，可购买相关领域书籍进行学习。

—

原创回答，禁止转载！图片版权归原作者所有。

近几年Web前端框架层出不穷，比如 React, Vue, AngulaJS等吸引了大量的注意力，前端技术发展势头迅猛，各大互联网公司也越来越重视前端开发，前端开发再也不是过去那种按照设计图做静态网页，再随便写点jQuery的职位了。现在，市场上对于前端开发的需求越来越大，我们经常听说前端开发入门难度低，但学习前端开发究竟需要多长时间呢？学多长时间就能找到工作赚到钱？结合了周边同事和自身的经验来谈谈学习网页开发到底需要花多长时间。

Note：一定要下定决心，并且要坚持。

1. 网页设计的基本概念和理论知识（10天）

在学习制作网页之前，必须掌握网页设计的基本概念和理论知识。什么是静态网页？什么是动态网页？网页的整体布局是什么？网页设计的原则是什么？网页基本构成要素是哪些？基础的网页设计概念都不了解，那么对于之后要制作网页更是难上加难。我认为利用10天时间了解网页设计的基本概念和理论是必不可少的，时代在不断变化，网页设计也会更新换代。所以了解基础知识是为了之后设计制作打好基础。当然，还需要了解基础的SEO知识。网上的视频教程个人建议还是少看，一本好的书绝对让你受益匪浅。推荐几本好书供大家学习：

制作网页设计

1. HTML AND CSS: DESIGN AND BUILD WEBSITES, BY JON DUCKETT

如何让网页设计更加功能化

2. JAVASCRIPT AND JQUERY: INTERACTIVE FRONT-END WEB DEVELOPMENT, BY JON DUCKETT

前端开发

3. LEARNING WEB DESIGN: A BEGINNER’S GUIDE TO HTML, CSS, JAVASCRIPT, AND WEB GRAPHICS, BY JENNIFER NIEDERST ROBBINS

可用性：

4.DON’T MAKE ME THINK, REVISITED: A COMMON SENSE APPROACH TO WEB USABILITY, BY STEVE KRUG

2. CSS+HTML+JavaScript（1个月）

相对来说， HTML是最简单的，只是标签语言， 格式规范; CSS相对来说复杂一些, 有浏览器的兼容问题等。但二者组合就能实现很多页面效果, 里面涉及的变化太多了。如果你只会基础语法, 而没有实际去写过, 那样是很难真正掌握的。我在这里说说我的经验吧，我一开始学习的Bootstrap，简单点说，就是给现有电商项目套上Bootstrap做的响应式皮肤。Bootstrap确实挺好上手，靠着官网的手册，基本上遇到的问题都能自己解决。

JavaScript 也没有那么难，你要知道Brendan Eich创建JavaScript语言一共就用了10天时间，所以它的语法并不复杂，相信你很快就能掌握基本语法。你可能还需要学习一些常见的库的API，这个可以根据你的需求来安排，你要用到什么库，就学习它的文档。

我觉得最好的网页开发学习资料就是 Mozilla Developer Network(https://developer.mozilla.org)的文档了，涵盖了HTML, CSS, JavaScript的方方面面，不论是初学还是老手查阅都是非常有用的，推荐给大家。

3. 开始制作网站（1个月）

了解了基本的知识，做了一些小练习之后，我认为最重要的是尽早参与实际项目，这样才能得到真正的锻炼。使用 Jekyll + GitHub Pages 为自己搭建一个静态博客是一个很好的开始，只需要简单的配置，不需要任何后台开发，几乎完全是前端开发。

建站的时间取决你自己对网站完成的满意度，如果参考模板， 那么几个小时内就可以搞定了；如果是要独立开发一个新的网站又要内容全面好看，1个月是跑不掉的，甚至需要更长时间。

4. 工具软件学习（半个月）

工具的掌握程度完全靠个人的领悟能力和学习，网上有很多关于以下这些工具的教学视频，跟着学会事半功倍的。需要学习的基本软件：

编辑器：Sublime Text

初学者我不建议立即使用强大的 IDE，先使用编辑器有利于学习。Sublime Text 是一款我个人非常喜欢的编辑器，界面优雅，操作流畅，自动支持语法高亮，还有丰富的插件，你也可以试试。

设计出图、切片：Photoshop

Adobe Photoshop，简称“PS”，是由Adobe开发和发行的图像处理软件，Photoshop主要处理以像素所构成的数字图像，使用其众多的编修与绘图工具，可以有效地进行图片编辑工作，PS有很多功能，在图像、图形、文字、视频、出版等各方面都有涉及。Photoshop非常专业，也稍显复杂，是专业的平面图片设计人员必须掌握的一款工具。作为前端开发，你需要跟设计师紧密配合，学习一些 PS 知识会对你之后的开发更有帮助。

原型设计：Mockplus（时间成本最低）

是一款上手非常简单的网页原型设计工具，通过拖拽就你完成一个简单的交互，项目类型诸多，有自由项目，网页项目，自定义项目，当然还有APP项目。网页项目最大的尺寸为3000*6000，你可以任意设计都没问题。200个封装组件和3000个图标可供使用，最近新出的格子功能更是方便使用，减少了很多重复设计的时间。

掌握一些原型设计知识绝对非常有必要，这是我投入最少却收益最多的事情之一，我强烈建议你尝试一下Mockplus，对之后在团队工作的沟通会非常有帮助。

5. 学习设计知识（持续）

前端开发是一个直接面向用户的职位，跟后端开发不一样，你的成果是用户直接可以看到的，我认为提高自己的审美，多掌握一些设计方面的知识，把握当下流行趋势和动向也是很有必要的。而这一过程是不能用具体时间来衡量的，需要不断持续吸收新的东西才能设计出理想的网站。这里有15个最好的网页设计博客资源可供大家每日阅读，我个人还是最喜欢medium。UI设计资源网站相信大家都了解了，dribbble和behance等都是每日必逛，必定是受益良多。

总结：

软件开发是一个需要持续学习的过程，尽管前端开发入门难度低，但是近几年来前端开发的复杂度越来越高，对个人素质的要求也越来越高。本文只是针对想要入门前端开发而找不到方向的人，经过这个过程后，你可以找到一个初级的开发职位了。不论做什么事情，学习是根本，希望这篇文章能帮助到新手。

网站设计有多个方面学习，最主要是看学习后自己想要如何去运用，自己想要做什么。如果只是想做静态的那么学好PS来进行页面前期的设计。然后学习HTML+CSS来布局页面，再学习javascript脚本来实现一些页面的效果。如果需要动态开发设计的，那么还需要学习下，PHP,JSP,http://ASP.NET等语言和SQL或者MYSQL等数据库。

我也是一名初学者，自建了自己的网站。网站设计,喜欢的朋友可以一起学习交流。

学网页设计需要耐心和细心。

以下总结了目前网络上常见的网页设计布局，其实还有许许多多别具一格的布局，关键在于你的创意和设计了。对于版面布局的技巧，这里提供四个建议，您可以自己推敲：

　　1."T"结构布局。所谓"T"结构。就是指页面顶部为横条网站标志+广告条，下方左面为主菜单，右面显示内容的布局，因为菜单条背景教深，整体效果类似英文字母"T",所以我们称之为"T"形布局。这是网站设计中用的最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明。是初学者最容易上手的布局方法。缺点是规矩呆板，如果细节色彩上不注意，很容易让人"看之无味"。

　　2."口"型布局。这是一个象形的说法，就是页面一般上下各有一个广告条，左面是主菜单，右面放友情连接等，中间是主要内容。这种布局的优点是充分利用版面，信息量大。缺点是页面拥挤，不够灵活。也有将四边空出，只用中间的窗口型设计，例如网易壁纸站。

　　3."三"型布局。这种布局多用于国外站点，国内用的不多。特点是页面上横向两条色块，将页面整体分割为四部分，色块中大多放广告条。

　　4.对称对比布局。顾名思义，采取左右或者上下对称的布局，一半深色，一半浅色，一般用于设计型站点。优点是视觉冲击力强，缺点是将两部分有机的结合比较困难。

　　5.POP布局。POP引自广告术语，就是指页面布局象一张宣传海报，以一张精美图片作为页面的设计中心。常用于时尚类站点，比如http://ELLE.com。优点显而易见：漂亮吸引人。缺点就是速度慢。作为版面布局还是值得借鉴的。

再举一些网页设计的分类别设计技巧和案例

一 页头设计

一般是主页的的头部及导航设计，主图需要高清，这张图也就是上面所说的T型布局。最广返的一种布局方式。这种布局的优点是页面结构清晰，主次分明，容易上手。详细可看10款网站页头设计欣赏，拯救你的模板生涯。

二导航设计

这种导航设计比较富有个性，而不是单单的拉横条，动感和不对称的随意性排列，让整个页面风格更加活泼和跳动。

三 滑动块设计

这是一个网页设计中算是细节的设计了，网页设计细节在网站设计中至关重要。我们说细节决定了网页的成和败，这也是基于浏览者的体验，这是我们做设计的最最根本的要义。设计行业的从业人员应该对此有所体会。很多时候，一个小小的网页设计细节的失误往往会毁了整个网站的品牌形象设计。

四 版式布局设计

上面第一段讲到了5种网站页面设计布局：T型，口型、三型、对称、pop布局。那么如果你是新人，就建议不要向着飞，先一步一步来，尝试前几种。但是技术和设计理念成熟了，可以试一试pop的布局和一些不对称的设计如下图：

五 分页设计

分页设计一般指在主页上使用过的网格系统让整个网站井井有条，同时还留有相当数量的空白，让眼睛能迅速抓取重要信息。但是也有不规则的额，到那时难度要大，把控不好就可能会让页面内容表达不清晰，但下图中的分页设计，你一定在想：怎么才能看到详细信息?就这样……快速滑动的效果，很棒吧!

六 页脚设计

网站页脚也是网站重要一部分。但是，最近本人在看别人网站的时候，发现很多问题，就是页脚设计的特别粗心，甚至很多都是草草了事，应付网站页脚。因此，我们在设计网站页脚就需要通过细心的方式，这不仅在网站优化带来好处，还在网站整体美感获得加分。

七 字体排版设计

其实很多人会觉得字体不就是那样吗 ？对刚接触页面设计的人更加是如此的。但是我要说的是：真的很重要，很重要，很重要。对于页面上的各式各样的字体想必已经看得熟透了，我们都希望创造出更加丰富新颖的文字版式，它能为网页设计加油添彩，我们可以回忆经典字体排版设计，并与现代的创意创新技术相结合，有一种叫字象乾坤的网站字体的排版设计可以看一看，使文字的版面越来越活波生动，富有创新。

最后再分享一些网页设计背景图的高清图片，有点适合创意行业的网站设计

1该项目作品中融入多种风格，包括逐渐消退和飞溅模式，以此形成一种手势绘画体验，让参观者们看到自己身体的移动和扭曲。作品精品佛在揭示一座全新未知的城市。

2霓虹色调的背景和彩色几何图形相互融合，图片模糊了真实情景与数字添加景观之间的界限，淡粉色的天空搭配超现实景观，这些色彩艳丽的虚拟几何形状凸显了艺术家对颜色的敏锐记忆。

3印度教徒在庆祝为期三天的Rakher Upabas节，拍摄于孟加拉国达卡附近，该作品荣获2015年意大利锡耶纳国际摄影奖。

4

5悉尼的海水与世界任何地方都不同，“闪耀、纯净得好似玻璃”。

6春装出镜，时髦的波波头，醒目的配饰，让自己在这个春天靓起来！适合于服装类的时尚网站！

这些网站需要好的颜色的充斥，不管是网站整体的配色还是图片的而色彩，对于一个网页是起到第一作用的，特别是做时尚网站的，色彩的敏锐度是生命。有兴趣的可以看看：

7灰加橙，不多说。

在美国加利福尼亚州南部的科罗拉多沙漠（Colorado Desert）中，耸立着一座用50万加仑油漆泼出的彩色“救赎山”（Salvation Mountain）。这是由当地居民莱昂纳德·奈特（Leonard Knight）花费30多年时间建成的，希望向所有访客传递“上帝之爱”。如果上帝真的存在,那一定是他借助老人Leonard Knight之手以展示信仰的力量和慈爱。——离天堂最近的地方。

这么多素材够学的了，不管是老手还是新人，提升自己的最好的办法就是不断欣赏，不断收藏，不断实践......