整体网页设计概念

计划和研究阶段通常由其他人完成，但是如果项目是由一个人完成的，那么它通常是由设计师完成的。想知道整体网页设计概念吗，不妨往下看看吧！

Google所提的“整体网页设计”概念最近被越来越多的人提及。对于设计人员和开发人员来说，这并不像看起来那么简单。

简单来说说，所谓整体网页设计就是把整个项目作为一个整体去看待，去处理，深入地理解和洞察整体中各个环节之间的关系，把控全程。如果视觉设计不理想，无论内容有多好都无法脱颖而出。

同样，如果世界上最好的视觉设计网页缺乏可用性，它们将很难在用户面前立足。这些都是在没有web设计整体方法的情况下出现的常见问题，也是大多数web设计项目迫切需要解决的问题。

整体网页设计的核心是设计过程。设计和开发团队在使用整体web设计方法推进项目时，可能会有非常不同的执行过程，但是在内容和细节上有许多相似之处。

从设计师的角度来看，设计、技术、性能和业务影响是主要因素。计划和研究阶段通常由其他人完成，但是如果项目是由一个人完成的，那么它通常是由设计师完成的。这些步骤可以进一步细分：内容和消息传递、UI设计、UX设计、视觉设计、测试、培训、反馈等等。

所有这些步骤看起来都不同，这取决于谁来计划它们。WebdesignerDepot曾经出过一个清单列表，包含了详细的注意事项。在做任何决定之前，你应该问自己这六个问题。

在网页的设计和开发中，因果关系是比较明确的。你所做的每一个决定都会影响到你的用户、你自己、你的同事或雇员、你的股东甚至是你还没考虑到的人。最终整个产品都会对你的生活产生影响，不管是好是坏。

网页设计怎么排版

在做网站时会遇到很多的问题，所以网页设计师通常要扮演多种角色，并且要掌握如何构建一个有效实用的网站布局知识。接下来小编告诉你网页设计怎么排版。

1.不要使用过多的字体

网站排版中建议最多不要超过3种字体类型，不然会使网站看起来松散和不专业，不仅太多的字体类型会造成这种问题，太多的字体尺寸也会破坏网页布局。

通常情况下，将字体家族的数量限制在最小数量（2个是很多，1个通常就够了），整个网站坚持使用相同的原则。如果使用多个字体，请确保俩个字体是否和谐。以下面的字体组合为例，Georgia和Verdana的搭配相得益彰，相对比较和谐。相比于右边Baskerville和Impact则会有明显的冲突感，非衬线Impact明显的超过了Baskerville的视觉冲击力。

而在中英文排版中，建议大家中文使用标准中文字体，而英文、数字和字符使用标准的英文字体。以下面的图为例，是否可以对比处那个美观一些。

2.尽量使用标准字体

在Google Web Font或者Typekit，和国内的“有字库”的字体嵌入式服务有很多有趣的字体，对于国内设计师来说，痛苦的是中文字体会很大，一个字体动则几兆，十几兆的，这样用户在会增加用户浏览网站的载入时间；反之英文字体26个字母大小写，加数字标点符号一共几百k的字体是很容易在网页中使用的。

尽可能选择标准字体（近几年网页中通常使用思源黑体，PingFang，英文可以使用Arial，Calibri或者其他常见的易于屏幕阅读的黑体字，如没有特殊概念指导尽可能避免使用衬线字体，如宋体）

不是每位用户都可以在终端上看到同一个字体，意味着你选择的适合的字体，用户有可能看不到。

用户更熟悉标准字体，因此他们可以更快的阅读

特殊的、并且少量的字体可以制作成。svg格式的素材嵌入Web使用

良好的排版会使用户更加关注内容本身，而不是字体的类型。

3.限制一行文字的长度

保证每一行文字的字符数量是文本可读的关键。不是设计师来定义文本的宽度，而是根据用户的可读性来定义。

太宽—会使得单行文字太长，读者的眼睛会难于专注文字。因为长时间阅读容易串行，大段的文本中很难找到正确的行。

太短—会使得用户的眼睛经常回到下一行文本，会打破读者的阅读节奏，长时间阅读造成视觉疲劳。太短也会倾向于向读者发出一种信号，使得读者没有读完当前这行就去跳到下一行阅读，可能会忽略潜在的重要词句。

4.选择用有多个字重并显示良好的字体

用户将通过不同屏幕分辨率的终端设备访问你的网站，大多数用户界面需要各种大小尺寸的文本（标题、副标题、文本、标注等等）。选择一款能够在不同屏幕分辨率的设备上运行良好的字体以保证它的不同尺寸的字体都具有极高可读性（Readability)和可用性（Usability)也是非常重要的。

如何用DW来做网页排版

1、如何用dreamweaver插入图像：

其实用Dreamweaver在网页里面插入图像真的很简单，只需要直接输入图像标签，或者直接点击插入图片按钮，即可实现。

插入图片后，我们还需要设置一下图片的属性，比如图片的宽度和高度，是否设置边框，以及图片文字说明等等，我们只需要鼠标在dw中点击图片，图片就会出现可任意拉动的伸缩框，我们可以随意拖动来设置图片大小，并且可以在属性栏中，显示出图片的信息。如果想要更加精确简便的设置，我们也可以直接在属性面板中，直接输入图像的尺寸大小，默认的单位是px也就是像素。之后就是如何调整图片的一个位置，这个比较简单，我们可以通过样式直接定义，也可以在当前位置，直接插入图片。

2、如何网页的背景：

一般网页的背景有两种格式，一个是直接用系统颜色来设置，在一个是直接用图片来作为网页背景，我们分别来说一下，

第一种：用颜色来设定网页的背景

最简便的方式，就是打开页面属性的对话框，我们点开网页背景色设置，就可以在颜色选框中随意选择自己的喜欢的颜色。

第二种：用图片来设置网页的背景

我们可以用到css样式，来设置网页背景，可以用一张图片直接作为背景，也可以用平铺整个页面，大家根据自己的情况来设定。

3、如何在Dreamweaver中处理图像：

上面我们说到可以给图片增加文字说明，作用就是在打开网页时，如果图片不能正常显示，可以用文字来代替，让用户哪怕看不到图片，也可以通过文字来了解图像的含义。可以在标签中加入alt属性来设置