网页设计如何自学（初学网页设计）

1

在Dreamweaver中搭建不同的页面，需要掌握HTML的语句了，通过调整各项数值就可以制作出排版漂亮的页面，跟着就可以

学习一些可视化设计软件。下面介绍网页设计如何自学，希望可以帮助到各位。

Dreamweaver

在Dreamweaver中搭建不同的页面，就需要掌握HTML的语句了，通过调整各项数值就可以制作出排版漂亮的页面，跟着就可

以学习一些可视化设计软件，这些软件可以让你的代码变成可视化的状态，也能够提高你的工作效率。

合理的时间成本

如果学习任务超过了时间成本，这个时候你就应该好好斟酌是不是还值得继续学习了，或者说调整你的学习方式。对于转

行的人来说，很多时候时间和精力的成本比金钱的成本更加高，如果你的学习跟不上行业的潮流，如果你的收获对不起付

出的时间，那么你就要停下来好好想清楚了。

正确的学习方法

学习、思考、联系、梳理知识的方法都一定要正确哦

清晰的职业规划

如果你决定入行并转行，就要提前了解清楚你学的专业能够胜任什么岗位，细分到每一个岗位需要用到什么软件，有针对

性的进行学习，才能在短时间内达到成功转行并上手工作的效果。通俗来说就是有一个好的职业规划

学会设计的技巧

一个好的网页设计，在美观基础上实用性也是并存的。字体、色彩、留白、内容的和谐安排可以让你的网页漂亮起来，实

用、直观、层级简单却又有一些小心思设计的功能才可以让用户保留下来。做到这一点难度就比较大了。跟小编来看看怎

么做吧。

01留白很重要

留白是艺术中非常重要的一点，就包括你现在在看这篇文章，网页的左右两侧是不是都是空白的，留白可以让页面简单化

，突出核心内容。给出最适合的距离。

02提炼字体与色彩的使用

一个好的网页，字体花样不宜太多，饱和度高的色块字体会影响你网页的色彩平衡，你可以试一试只用简单的两三种颜色

进行整体的设计和搭配。

03考虑主流用户的体验效果

不要去顶着最大的分辨率制作，很多电脑打开根本显示不出来整个网页的设计，这一点应该多考虑主流用户的分辨率。

04文字间距要注意

行距可以用CSS直接调整，文字的行距、间距、段落距离的合适，都能够提升用户的体验。

网页设计保持整体性05

一个网站下面的子链接都应该使用同一套设计系统，这样才能让你的整个网站有联系性。

2

如果你也是小白想学习网页设计，希望你能做好以下几点。

1、心理准备;想学好网页设计，就必须有颗强大的内心，耐得住寂寞。

2、做好规划;学好网页设计是个按部就班，循序渐进的过程。

3、勤动手。学习网页不要依赖课本或者教学视频，勤动手才是王道，把每个小块内容都要自己亲手写出代码(至少五遍)才

行。

下面讲讲学习网页设计的步骤，(步骤很重要，网页是个循序渐进的过程)

1、html。html是编辑网页的基础。是最简单，最基础的，基本写几遍代码就能理解。

2、table布局。table布局属于html的内容，但是是html 的重点，学会用table布局网页，虽然table布局有点过时，但是

很多时候很多用得到的地方。

3、divcss。这是网页设计的重点，写好了，网上95%你见到的页面都能自己写出来了，当然我说的是静态部分。divcss相

对html 难度上升了一个等级，但是也不很难，只要耐心点研究也是可以学好的。float属性和绝对定位相对定位是重点。

4、JavaScript/jquery。Javascript是网页脚本语言，是实现网页动态效果的语言，使用JavaScript可以使网页更加酷炫

，有吸引力。比如网页上的轮播图，弹窗等都是用Javascript/jquery实现的

5、html5css3响应式网页设计，是现在比较流行，也是一种趋势，html5css3做成的页面比较美观大气，也能适应各个终端

。html5是趋势现在需求也是很大，学习好html5也是一个前端人员必备知识技能。

3

在网站之间的竞争愈发激烈的今天，也许已经在思索如何从页面排版方面入手，来提升自己网站的竞争力，给用户带来耳

目一新的感觉。如今空间共享式的网页排版开始火热，这种排版模式让各种元素跨越不同的板块，就能让整个网站充满层

次感，也可以给用户带来很好的视觉享受。那页面设计如何创新呢?

什么是空间共享式的网页排版呢?

共享空间其实就可以看做为分屏设计的一种变种，由老式的界限分明的分屏设计延伸而来。其特点就在于，让页面中的很

多核心元素不再被分屏所限制，而是让其存在于多个空间与其他元素进行共享。同时，这里的空间也不再局限于分屏，而

是包括多个图层或区块，有时为了达到更好的视觉效果，还会出现元素互相叠加的设计。

这种排版有很多好处，如可以使重点信息的层次更加分明，这样可以帮助用户更好的理解网站的内容;也可以让网页间的各

个元素得到更好的联系，就可以让这些内容更好地被承载，尤其是一些文本元素，使之可以被安排在更为瞩目的区域。

图片与文字混搭。在共享空间排版中，混搭文字与图片是最先出现的，也是被使用次数最多的一种方式。越来越多的设计

师喜欢在这种排版样式中使用竖直的图片——在以往由于电脑屏幕都为横屏，所以水平的图片的使用更为广泛。这种竖直

的图片可以让文字的使用变得更加自由，人们不再需要一味的将图片作为背景或是配图，而是可以让文字横跨过图片与空

白区域，以此来提升页面的视觉效果。当然，这种混搭的方式中，文字的使用十分灵活，你既可以让文字跨越图片与空白

区域，同时也可以让文字在任何一个你希望的地方单独出现。

使用独特、夸张的字体。传统的页面排版中出现的文本，绝大部分以标准字体为主。但是在空间共享式排版中，就可以摆

脱这个枷锁，让设计师们尽情的发挥。因为独特的字体明显会在跨越不同区域的表达方式中的表现更加亮眼，这些平常非

常少见的字体在空间共享式排版中可以强烈的表现出页面的重点，同时也不会产生违和的感觉。但是，如果你选择了这种

字体，需要注意的是一定要选择一些显眼的字体，并且文本的长度不能过短。此外，字体的颜色要与背景色相关，取对比

色往往是不错的选择，因为这样可以有效的提升文本的可读性。虽然这种排版模式非常新潮，但是想要协调好不同元素以

及字体颜色的搭配，还是需要费一些脑筋的。

色块与文本相结合。随着空间共享式排版的不断更新，色块与文本相结合的设计也越来越多。相比于图片与文本的结合，

色块结合文本会给人一种简单、干练的感觉。明朗的几何色块加上文字，这些看似简单的元素搭配在一起往往能够达到意

想不到的效果。如果你苦于找不到合适的图片，不如就请色块出山吧。空间共享式设计体现出的更多是一种现代化的风格

，运用得当能够给用户提供非常棒的视觉享受，并且对比于传统的页面设计，其实空间共享式排版也并不复杂太多，只要

掌握了技巧和一定的设计理念，就可以设计出非常好看的页面了。

4

第一、导航设计要瞩目

网站建设的目的肯定是想要留住更多的用户，而不是用户在浏览时只看一个页面就离开的。但，如果用户在浏览时没有立

刻离开，并且同时浏览了好几个页面，就说明这个网站有一定的吸引力，网站效果也是显著的，有用户比较感兴趣和有用

的内容存在。因此，在网站设计的时候，要将网站的导航设置在网页的醒目位置，一般是在顶部，以便于用户能够在第一

时间找到想要的内容。

第二、要充分利用网站设计中的留白

网站建设在设计的时候，要特别注意页面上的所有空间都是非常有价值的，要充分利用这些空间，但也不能一味地将整个

页面全部塞满，纷乱的内容不仅会影响视觉，也会阻碍用户在第一时间找到有效信息而离开网站。因此，网站页面在设计

的时候，要注意保持页面的一致性和整洁性，这是非常重要的。用户在进入网站时都是靠第一视觉留下的，广州网站建设

认为留白的设计，可以让用户在浏览的时候有呼吸的空间，扩大视觉效果。

第三、切记不要将底色当做透明色而忽略

网站建设在运用图片的时候，要注意换掉底色，可使用其他的颜色，而并非千篇一律的白色，这样也能够避免将部分白色

当作透明色的误区。

第四、背景色与文字要有强烈的对比，强化视觉效果

在设置背景色与文字时，建议不要使用鲜艳的颜色，在保证风格统一的同时，扩大两者的视觉对比度，这样才能方便用户

阅读，给用户提供更加舒适的阅读环境。

第五、网站建设在设计页面时，长页面建议使用内部连续形式设置

一般来说，用户在浏览长页面时，情绪会发生较大的波动，为了避免用户的耐心不够，在设计时一定要注意画面的简洁，

突出重点，才能够提升页面的吸引力和给用户提供及时有效的信息。