怎么自学网页设计？

如何自学成为网页设计师？

网页设计是相当复杂的，可以说令人生畏的。每天不断出现新的技术和新的思想让人目不暇接。网页设计师之所以是个火爆的职业，归功于现在的网络和科技的发展，网络已经成为人们生活必不可少的获取信息的方式。每天都有数以万计的网站出现在人们的视线里。所以，现在越来越多的人想学网页设计，赚更多的钱，甚至有的人想要在家学习就能当网页设计师，今天我就和大家说说如何从零开始学习网页设计。

1. 首先，你要明白什么是网页设计？

网页设计就是一个创作的过程，把用户想要的内容呈现在网页上，通过网页浏览器进行访问的过程。

网页设计是指使用HTML/JAVASCRIPT/CSS语言，通过一系列设计、建模、和执行的过程，新时代的网页设计，更加符合大众的审美标准，更加有利于产品的交互、体验.——知乎

2. 网页设计的五大元素

布局：网页和平面设计，广告和海报是类似的，都要注重页面的布局方式。在网页中，我们的目标是为了帮助用户能一目了然地找到他们寻求的信息。这包括保持设计的平衡性，一致性和完整性。

颜色：颜色的选择取决于网页制作目的和用户的喜好; 它可以是简单的黑白色设计，传达个人的个性或公司的品牌，或者是大胆前卫的多彩颜色，表达时尚年轻的元素。但尽量使用安全的颜色。

图形：图形可以包括logo，图片，剪贴画或图标，这些都增强了网页设计整体风格。为了方便用户，这些元素需要适当的放置，来结合网页的颜色设计和内容，不要让网页过于拥挤或加载缓慢。

字体：使用各种字体可以增强网站设计感。大多数网络浏览器只能读取选定数量的字体，称为“网络安全字体“，大多数设计师都会在这安全区域内进行创作。

内容：网站的内容可以通过视觉和文字来传递网站的信息。文字要始终保持高相关，并且是有用的，以免混淆读者。给他们想要的信息是为了增加页面的停留时间和降低跳转率。内容应针对搜索引擎进行优化，具有适当的长度，并且要有关键字。

3. 需要掌握的技能：

如果只需要设计一个网页页面的话，那么需要熟悉掌握Photoshop，在加深一点的就是Illustrator，用来设计网站上各个板块需要用到的小图标。或者更好的办法就是使用原型工具进行设计，快速简单的有Mockplus，功能全面且有动态面板的有Axure。使用工具进行原型设计能让设计师的工作事半功倍。

学习前台静态页面制作

要掌握最基础的html代码

要掌握div+css建站的技术

要掌握javascript特效

学习后台动态页面制作

要掌握php语言或者 http://asp.net语言

要掌握数据库的用法

4. 如何自学网页设计？

一篇文章肯定是说不全所有内容的，还是给大家介绍一些实用的网页设计的学习网站：

编程：

1. W3Schools

学习最基础的编程语言，包括：HTML和CSS等。

2. Google Code University

再来一个学习编程的网站，又Google的开发团队给大家讲解基础的教程和编程技术。

3. Code Avengers

类似大冒险的一个轻松学习代码的网站，可以参与他们的编程挑战和bug hunting等。

HTML和CSS：

30 Days to Learn HTML and CSS

A Beginner’s Guide to HTML & CSS

Don’t Fear the Internet

网页设计在线课程：

Treehouse

Lynda

Udemy

Blog：

1. Smashing Magazine

2. Mockplus blog

3. Webdesigner Depot

4. Webdesignledger

5. WEB DESIGN LIBRARY

网页设计书籍：

1. HTML and CSS: Design and Build Websites

2. Learning Web Design: A Beginner’s Guide

3. Don’t Make Me Think: A Common Sense Approach to Web Usability

4. Learning How to Make Web Pages Functional

5. Designing with Web Standards

相关阅读：

反面教材，这9个糟糕的网页设计实例引以为戒

设计类网站的“联系我们”页面设计盘点

干货！2018年你值得一看的网页设计作品集赏析

网页设计有难题？12款网页设计模板给你灵感！

极简网页设计技巧，打造简约之美

进阶学习，如何无代码设计一款美观且实用的网站？

网站着陆页设计，让用户开心着陆的10大技巧！

网站设计缺乏创意？视差滚动网站设计让你与众不同

收集网站用户反馈的5个常用问题

这9款小众时尚的酒店网站设计，让你不再恋家

时尚的不仅仅是它们的服装，还有它们的网站设计

10个最新交互式Web设计实例欣赏

尽管当下移动端的设计越来越繁荣，但网站仍然是人机交互的重要平台，网页设计也依旧是是硬性的设计需求。在我们的日常生活、学习和工作中，也会接触到各种类型的网站：比如百度、京东、淘宝、豆瓣、贴吧、空间，还有各个公司的企业官网、产品网站、后台网站等。

网页设计作为界面设计中的一部分，自然也就成为了我们UI设计师需要重点学习和掌握的知识版块了。

想要自学网页设计，其实通过视频教程的学习会让学习变得更直观、高效。我们阿多比设计将我们线下的网页设计全套课程上传到B站，这套课程完全免费，就希望帮助到哪些想要自学网页设计的同学。

设计时，我们通常会使用PS、XD、Sketch、Axure等软件来绘制页面的视觉稿和原型图，我们阿多比设计的课程主要围绕网页设计的基本理论、栅格系统与线框原型、网页设计规范、响应式网站设计、一屏式网站设计、B端与数据大屏等知识点进行讲解和教授，基本涵盖了网页设计所需的绝大部分知识点，作为衔接平面设计和界面设计的关键节点，操作简单易上手，能帮助学员循序渐进地去理解互联网产品设计这件事情。学习过程中的难点更多的还是会在于大家对操作、知识点的灵活理解和运用，虽然每天都在和网站打交道，但是我们很可能没有仔细地去总结过、归纳过、分析过不同网站之间的区别，所以这次学习一定要坚持“多看、多收集、多对比、多分析”。

　　一、美工方面：

　　1、美术功底，如：素描，构成，色彩搭配，字体设计等等．．．

　　2、软件应用，如：FLASH、FIREWORKS、photoshop、CorelDRAW等等．．．

　　二、程序方面：

　　1、编程语言：HTML，这是最基础的。学会了HTML跟CSS语言，接着下面就得选择一条路走了，是学习ASP，还是JSP，还是PHP，还是直接学习.net。。另外，每种编程环境，都要脚本语言，如JAVAScript、VBScript、c#等等．．．（相关的资料请上网查）（另外，web2.0的ajax技术的出现，将传统的几种技术的完美结合，又引起了编程界的轰动，学习AJAX技术，XML，也是相当重要的）

　　2、软件应用：FrontPage、Dreamweaver．．．其实我觉得，新手大可不必学习FrontPage，虽然都说FrontPage是入门软件，但是，你迟早都得跳过这个软件，去学习Dreamweaver的，到时，FrontPage那简单得可怜的功能，你再也用不到了。把学习FrontPage的时间，去了解Dreamweaver，这才是正道．．．

　　3、数据库应用：SQL SERVER、ACCESS、MYSQL等等．．．新手可先学习ACCESS数据库，这个是最简单的，一看就会操作的那种。难的是SQL语法．．．

网页制作设计 这有相关的视频，楼主学习一下吧。

按流程走，一步一步走。

第一步，学习ps制作网页效果图，一定要商业化，如果不知道如何让设计出商业化的作品，可以先先模仿制作，或者是在网上看到好的企业站可以模仿着设计，其中可以加入自己的元素，设计完成后利用ps切片，准备制作html代码。

第二步，有了刚才的切片，开始在dw里面制作html页面了，建议你可以先学table，table排版网页比较简单，代码是自动生成的。

第三步，当你已经会做出来一个页面的时候，我建议你放弃table，学习div+css排版页面，这个是现在的趋势，table已经被淘汰了。

第四步，网页中往往会有些动态的元素，比如简单的头部广告，你需要学习flash制作简单动画。

第五步，网页中同样会有许多的动态效果，比如图片切换，但是不是flash动画，属于特效，常见的特效有js语言的，这个你了解就好做到会用就行，不需要你会写这个特效。

慢慢来，主要是要设计商业化，切片，制作html网页。

网页设计和网页制作是两回事。

设计的主要工具是Photoshop，制作的主要工具是代码编辑器，如记事本，制作也称之为“前端”。

比如，韩雪冬就不太会前端制作，但网页设计水平一流。也有不太会设计，但是前端制作水平的很多大牛存在，我就不举例了。

随着国内互联网的快速发展，中国网民的数量大量的增加。所以很多人通过互联网去实现自己的要求。

比如说现在很流行的网购、通过招聘网站进行求职等等，随着社会的发展，人们的生活会更加的依赖网络。

因此每个人，每个公司都想去做网站，个人通过网站推广自己、公司通过网站推广公司的品牌与知名度、获得更大的利益化。所以学网页设计有没有前途显而易见。

有很多转行想学网页设计的，不知道抱着什么目的去学习的，如果你纯粹觉得这个工作轻松还好赚钱，那我想说，只要社会和平，每个行业都有钱赚，但赚钱和你的付出永远是对等的。

网页设计只是一种职业,是另一种赚钱的机会，可以这样说每个行业都赚钱,每个行业也都会亏钱,关键是看你如何去做,你是不是适合这行?

记住一点，行业没有贵贱好坏之分 ！关键在于， 做一行， 精一行 ！

那么怎样自学网页设计呢？

第一：学习网页设计——热爱网页设计。

热爱网页设计就是你喜欢网页设计，不会把网页设计当成你的工作，而把网页设计和你的生活结合在一起，在学习网页设计的过程中，一定不能急躁，要怀着一个良好的态度去学习网页设计。

第二：学习网页设计——临摹优秀的网页设计作品

用专业的网页设计软件来进行网页设计，比如：Photoshop等网页设计软件。在网上找一些比较好的网页设计作品进行临摹，临摹一段时间就按照自己的思想来设计网页，可以多看看哪些比较好的网页设计作品，看的多了做的多了，自己的脑子里肯定对网页设计有了一点想法。

其三：学习网页设计——网页设计教程

现在网上有很多专门学习网页设计的教程网站和教程视频等，可以找一些这样的网站，这个网站上有很多关于网页设计、网站设计等特别好的教程，或许对你学习网页设计有帮助。

想要成为网页设计师需要学些什么软件呢？

成为网页设计师需要学静态网页：

Dreamweaver CS4：网页布局、制作；Html&Css简介；网站管理与维护、上传与下载；案例分析

Fireworks：美工设计、网页配色；CI、LOGO、Banner的制作；常见网页动画制作、网页布局

Flash CS4：经典网页动画、广告、片头、贺卡设计与分析；MTV制作、交互式网站简介

Photoshop CS4：Photoshop操作基础、图像优化处理、经典实例分析与制作、gif动画、广告gif图片

Illustrator CS4：广告招牌制作、灯箱广告、服装广告设计、企业徽标设计、名片设计

对于高级网页设计师，还需要学动态网页：

Html语言详细解介、CSS样式、IIS、C#语言、Asp. net动态、SQLServer数据库、Access数据(送)、JavaScript、Flash8.0高级编程、 网站筹划、网站推广、电子购物车、ChatRoom、BBS制作。

在互联网越来越深入到生活中每一个角落的年代，网页的表现形式就如同以前书本上的文字，传达着的是网络语言，每一条线、每一个色块、每一种版式、每一种组合都传递给阅读者一种感觉。

实际上网页的表现形式已是互联网至关重要的元素，这些工作都是由网页设计师来做的，是一种创造性、有成就感的工作，更是不可或缺的职业。

最后，小编强烈安利的自媒体资源免费下载的网站 mishu.pro ，如果你需要图片摄影资源，音效文件，视频资源素材以及简历模板等资源，收藏这个网站，你会有不一样的惊喜！

首先我认为想要自学网页设计，需要了解网页设计的每一步是什么，然后再把这每一个过程做好，也就学会了网页设计。

网页设计的本质就是视觉设计加上交互设计，这两点就是网页设计的核心。首先我认为想要做好网页设计肯定需要的是熟悉网页设计的设计软件，像什么photoshop、ai等基础软件，还有就是 墨刀设计软件等都需要进行学习和熟悉，墨刀的话就是比较简单的页面设计软件，交互和平面设计的功能都比较不错，值得去使用。

等有了合适的工具的加持，在接下来就是要进行一些色彩搭配和排班的设计学习了，毕竟网页得做的好看才能更加吸引人，所以不断提升自己的审美也是十分重要的。网页的风格、颜色搭配都需要进行深度考量，还有就是按键的布局，这些细节的问题都会影响网页设计出来的质量。

除此之外，我认为深度了解网站要表达出的信息也是十分重要的，只有充分了解了网站要表达的东西和客户群体，才能更好的迎合他们。

先花2周时间看看wordpress能不能搭建一个简单的个人网站，如果能做到的话，也许适合你。

本人（平面设计一枚）最近开始自学网页设计，于两周前开始。具体过程为：1.看视频（我要自学网以及很多网站都有，淘宝也可以买，几十块很便宜）首先把html与css笼统的看一遍，然后试着做一做布局，插入一些图片。

因为涉及到尺寸，一开始也是不懂，然后画了一个这样的布局草稿

后来觉得自己手量太费劲而且有误差，所以下了一个很好用的ps插件parker,这是第二次练习前画的。这款插件可以自行标注你圈住的尺寸。

第二次练习

当然，也不是纯瞎做，我找了一个网页作为参考。

可以找那种带源码的文件（网页模板），这个懒人素材，站长素材等有很多模板，把它下下来，如果一开始不会做，可以先看一看，理解它，然后再照着做一做。之后不看再做一版。嗯，我现在就是做到这里了，明天继续练习。 ️

网络上学习网页设计的教程太多，太多。自学必须谨慎，如果总听一句，西听一句，结果会什么也学不到。从事网页设计8年，就一句建议：不要着急动手去做，尤其是软件，首先要了解网页设计制作流程，这个不知道什么都可以先不用做。一般完整制作流程分三步：1、网页效果图设计 2、div css网页布局 3、网站后台

我觉得在自己想自学的时候自己需要先弄清楚以下三点：

首先，网页设计师这块分为美工设计和代码程序。美工设计这块针对网页的话，比较简单，比一般的包装设计还有其他艺术设计要简单得多，程序这块主要就是html+div css,难度要大些，如果你认真学这块代码，也就是一个星期多一点就能掌握，但是熟练运用，则是要花费你大量的时间和努力。

美工这块，网页美工的话，如果你按照平面设计的要求去学习可能会更好，也就是一个月左右就能学成，学费也不贵，出来后多加练习，半年一年坚持下来就会有成就！

然后要弄清楚淘宝美工是做什么的：淘宝美工是淘宝网店页面的美化工作者的统称，周边工作有网店设计（平面设计）、P图（图片处理）。

最后，要搞清楚自己是否具备美学色彩基础：色彩对于一幅作品来说尤为重要，所以对色彩的了解是很有必要的。接触过PS的朋友都会听过RGB色彩、CMYK色彩这样的基本概念，对于很多初学PS的朋友来说，这些生涩的概念很不容易理解。

综上所述，如果觉得自己掌握了以上三点，可以不参加培训，如果觉得还有差距，可以针对薄弱环节进行补强，如果是小白，应该要参加一下系统集成的培训，

这里提供一个全国试听公开课预约地址供参考：

(电脑版)：：

(手机版)：

推荐这门课程

网站的设计会涉及到很多方面，有的细节能为用户提供极大的便利，却很容易在设计时被忽略，所以想要设计出用户体验优越的网站并非易事。那么怎样进行瓦那个也设计呢?

以下图列内容源于零一科技节在百格活动上设计的网页

1、简单便捷的页面

用户浏览网页时，是快速扫描整个网页而不是通读。所以网站设计成可视化层级架构可以帮助用户尽快达成自己的目的。在设计网站时，要确保网页标题、登录注册按钮、导航栏或其它同等重要的元素放在用户很容易看到的地方，以减少用户寻找的时间。

2、明确和突出的品牌设计

很多时候品牌化的设计是为了抓人眼球，从激烈的竞争中脱颖而出。突出品牌的方式有很多，无论是内容、视觉还是体验都不容忽略。比如独树一帜的LOGO和色彩分明的配色，将品牌色彩、设计元素贯穿于整个网站的设计，这样能自然而然地强化整体品牌的概念。有时候产品占据优势，也可采用产品图片作为网站的设计背景图，不仅对产品起到一定的宣传效果，而且为网站增添了魅力，也更容易让用户记住你的网站与品牌。

3、抢眼独到的头条

头条是一个网站的拳头，无论是是产品、内容还是图片，它都要抢眼，干脆，直击用户，在网页上要一目了然，成为视觉焦点。在头条文案上，也需要多花心思打磨，这样才能确保它真正有吸引力。

4、清晰明了的导航

导航设计是网页实用性的基石，用户以最少的点击次数，最快地到达他们想要浏览的网页，这才是导航设计的目的。可以参考以下原则：

·简单 网站的结构都应该尽可能的简单

·清晰 导航的栏目都应该清楚直白

·一致 导航栏在每页都保持一

5、功能强大的搜索引擎

对于目标相对明确的用户来说，他们多数时候会直接使用搜索引擎而不是漫无目的地浏览。用户的需求是非常明晰的，所以网站需要提供可用性良好的搜索引擎，帮助用户找到内容，提高用户的停留时间和内容的阅读量。还应确保网站搜索结果的相关性，而且搜索引擎应设计在醒目的位置，让用户在任何时候都能够快速找到它，开始搜索。

6、 改变访问过的链接的颜色

链接是导航的一个关键因素。假如用户点击过的链接没有改变颜色，很可能导致用户多次点击同一个链接。如果可以轻易区分访问与未访问的链接，那么用户会减少重复点击的可能性。

7、 提升加载速度

用户的耐心和注意力是非常少的，如果加载速度缓慢，你很有可能会丢失这个用户。当网站越来越复杂，越来越视觉化，加载时间不可避免地受到影响，可以通过一些小技巧来解决这个问题：

·简化内容

·优化网站图片

·通过内容分发系统(CDN)来提升网站

8、优化网站文字排版

网络上的信息95％以上是以书面文字的形式呈现的，文字排版是一个重要的设计范围，做出正确的排版选择可以让您的网站焕然一新。可以参考以下原则：

·尽量使用少的字体

·尝试使用标准字体

·有英文时避免所有字母大写

·确保足够的颜色对比度

·避免使用闪烁的文

9、尽量避免自动播放视频

大部分用户会比较难接受在后台自动播放视频，所以最好让用户自己选择是否播放。如果网站以视频展示为主，可以默认为静音状态。当用户意识到有视频在播放时，可以自己点击屏幕决定声音的有无以及大小。

10、明显的分享按钮

如果你想让你的网站拥有更多的访客，或者让更多人知道你的产品。充分利用社交媒体，让你的网站文章有更高的曝光度，是不错的选择。在这样的需求之下，让你网站中的分享按钮尽量明显一些。

用户体验的好坏，差异往往只在于细节。对网站设计细节的精益求精也许并不能保证你的网站一定能大获成功，但是会让用户感受到你的用心。

怎么自学网页设计？首先要了解这些网页设计技巧！

1.阅读者观看网站页面时，眼睛的第一集中点在网站页面的左上角

客户浏览网站页面的这一习惯应当在意料之中，毕竟左上部为主要操作中心这一点一直被大多数计算机使用设计所运用。在你推进网络站点设计时，应当尽量保持这一格式。要清楚了解，如果你希望创建一个成功的网络站点，就必须尊重客户的习惯。

2.相对于图像来说，文字才更具吸引力

与大多数人所支持赞同的看法相反，在阅读一个网络站点的时候，满足直接吸引客户目光的并不是图像。据有关官方数值表现，大多数通过偶然点击进入你的网络站点的客户，他们是来寻觅的是文字信息，而不是图像。因此，确保你的网络站点设计凸现出最关键的信息板块，这才是网站页面设计的首要原则。而且文字对于搜索引擎优化来说也比图像更有利。

3.花哨的字体和格式将被客户忽视

为什么呢？那是因为客户会认为这些是广告，并非他们所需要的信息。事实上，探索表明客户很难在充满大批色彩的花哨字体格式里寻发现所需的信息，因为视觉线索告诉他们把这些忽视吧。保持网络站点的清爽，不要因为华而不实的表面，让关键的信息被忽视。

4.字体的大小会作用客户的阅读举动

想转变人们对你的网站页面的看法吗？转变网站页面字体的大小是一个好办法。小的字体则提升焦点阅读量，而大的字体能够刺激客户阅读。根据你的需要合理配置两者的比如。

5.简短的段落相对于长段落来说更能降低阅读疲劳

网站页面信息是为大多数强调快速阅读的互联网客户提供的。除非上下文的衔接要求，保持信息由简短的段落和句式组成，更有利于客户长时间的阅读，降低阅读疲劳感。

6.横幅广告很多情景概况下会被阅读者忽视

探索表明，阅读者经常会忽视大部分的横幅广告，尽管那是你关键的生意来源。阅读者在横幅广告上停留的视线往往只有几分之一秒，如果你想通过广告挣钱，那么必须创新你的广告位以及合理配置网络站点广告形式。郑州网络站点创建

7.将广告放置在最佳内容一旁，能够提升客户关注力

如果想要提升广告的可视性和点击率，能够将其设置于最能引起阅读者兴趣的内容一旁，整合进网站页面的设计里。这样，客户既能够发现所需的内容，你也能够提升广告效益。

8.用数词来代替数字

如果运用数词取代数字的罗列，读者会发觉在你的网络站点能够很容易地发觉真实的材料。要清楚了解，你是写给那些将第一次阅读你的网络站点的读者，让他们更容易地发觉所需的信息才是最关键的事情。

9.图像越大越满足吸引阅读者的关注力

如果要在网站页面设计中运用图片，那越大越好。人们更倾向于查看那些满足了解地见到细节和获取信息的图像。要确保你所用的图片与文章内容相关联，否则它更容易被忽视。目前互联网的网速已经不断攀升，所以请放心在你的网络站点上运用那些较大体积的图片。郑州网络站点创建

10.阅读者会花费大批的时间去查看按钮和菜单

你应当花费较多的时间去设计你的网站页面上的按钮和菜单。毕竟，他们不仅仅为了吸引读者的眼球，更是网络站点设计的关键组成部分。

先学一学HTML，找本自己能看懂的 教材，浏览为主，不用记住所有的 概念，只要记住使用 原理就行了，这一阶段，估计三天就够了；然后用两天时间学CSS，方法同上；进而再花些时间了解一下JavaScript。

然后就可以用 记事本尝试写几个网页，记住这时千万不要用那些 可视化工具，比如FrontPage、Dreamweaver（那些以后再学）。

有一个提高自己“写网页”的捷径，就是上各大网站，把网页保存下来（什么？你说你不会保存网页？就是“文件→另存为”），然后打开保存下来的网页，点击 右键→查看 源文件，看看人家的网页是怎么写的，然后模仿他们的 写法，不断规范自己的 代码。嘿嘿，这个方法不错吧。先好好模仿一下吧。

接下来该学一下Fireworks了。建议一开始就到网上找些 实例教程，这些实例教程一般都介绍得很详细，跟着它 一步一步做下来，每 学会一个实例就掌握了几项操作，而且也有了自己的作品，很有 成就感的，长期积累下来对自己的提高很有帮助。学Fireworks主要是学图片处理，比如加一些效果，还有很重要的就是 切图，这对于 初学者是很重要的。

这时还可以结合Dreamweaver进行学习，你就可以体会到Dreamweaver和Fireworks的无缝集成了。利用这些工具多做几个网页，你就可以达到一定水平了。

要是想让你的网页多一些炫目的效果，建议你学一下Flash，难度并不大，而且要是前面的JavaScript 基础打得好的话，学到Flash中ActionScript时，你会有一种似曾相识的感觉，因为这两种 语法几乎是一模一样的。

到这时，相信你就可以真正领会到“网页三剑客”的威力了。

在实践中不断提高

要是每天能拿出两个小时来学习，完成以上这些学习估计只要20天就差不多了。要是 天赋高的话（比如说像我这样的，呵呵)，那需要的时间就更少了。接下来该实习了，找个地方锻炼一下自己，比如可以去一些公司干干兼职，或是给自己的单位设计一下 主页等。

最好是能进入一个正规的开发 团队，你就会学会如何以 团队合作的 方式开发网站，特别是怎样和 程序组合作，把 页面与 后台程序数据库配合起来。可能你会担心自己是 新手，人家会嫌弃你， 没关系，只要努力去找，总会 有机会的。

到此，你就基本可以称作是一个“准Web Designer”了，不过要从根本上提高自己，最好去学学 美术，这是当一个 网页设计师的 基本功。