联系方式

咨询热线：400-998-6158

网页设计怎么设置背景

颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。

颜色背景

颜色背景的设计是最为简单的，但同时也是最为常用和最为重要的，因为相对于图片背景来说，它有无与伦比的显示速度上的优势。在网页文件中，一般通过标签来指定页面的颜色背景

其中的"color"表示不同的颜色，可以用各种不同的颜色表示方法，比较常用的有直接用颜色的英文名称，如blue、yellow、black等等，还可以用颜色的十六进制表示方法，如#0000FF、#FFFF00、#000000等等，此外还可以用百分比值法和整数法，其效果都是一样的。

颜色背景虽然比较简单，但也有不少地方需要注意，如要根据不同的页面内容设计背景颜色的冷暖状态，要根据页面的编排设计背景颜色与页面内容的最佳视觉搭配等等。

沙纹背景

沙纹背景其实属于图片背景的范畴，它的主要特点是整个页面的背景可以看作是局部背景的反复重排，在这类背景中以沙纹状的背景是为常见，所以我们将其统称为沙纹背景。

初学主页制作者都有这样的经历，当试图把自己的照片作为页面的背景是，却发现浏览器上显示出来的不仅仅是一个照片，而是同一照片在水平和竖直方向上的反复排列。这就是浏览器处理图片背景时的规律方法，利用这一规律我们可以用一小块图片作为页面背景，让它自动在页面上重复排列，铺满整个页面，从而使网页的体积大大减小。

读者到现在恐怕都已经知道了沙纹背景的原理和实现方法，就是找一个小的图片，越小越好，但注意要使最后的背景看起来要像一个整体，而不是若干图片的堆砌。

其中的"picture"表示背景图片的URL路径。

条状背景

条状背景与沙纹背景是比较相似的，它适用于页面背景在水平或竖直方向上看是重复排列的，而在另一方向上看则是没有规律的。它也是利用浏览器对图片背景的自动重复排列，与沙纹背景所不同的是它只让图片在一个方向上重复排列。

以在竖直方向上排列为例，首先用图像处理软件做一个从左到右为蓝白渐变的水平条状图片，其长度与页面的宽度相当。将其设为页面背景，经浏览器显示后，就成为整个页面从左到右蓝白渐变的分栏颜色背景。当然，也可以用类似的方法实现条状背景在水平方向上的重复排列。

照片背景

把自己或朋友的照片作为页面的背景让大家看到，是有点令人激动的事情，但浏览器对图片的自动重复排列却使这一愿望难以实现。怎么办呢?只有想不到的，没有做不到的，这里我们用上一点简单的CSS。

这样，在网页页面中，就可以看到你的照片位于页面的正中间，而且在拉动浏览器窗口的滚动条时，照片仍然位于页面的正中间而不随页面内容一起滚动。如果你觉得照片位于页面的正中间不满意，你也可以随意地调整它在页面中的位置，只需要调整"background-position"的值就可以了。

复合背景

如果你在练习上面的“照片背景”时“不小心”也设置了标签里的颜色背景，那么你看到了什么?颜色背景还起作用吗?对，你能看到你的照片浮于你设的颜色背景之上，二者能够同时正常地显示出来。这就是复合背景的魅力，更为吸引人的是，当你所设置的图片背景因为某种不可知的因素而不能正常显示的时候，浏览器能够自动用你所设置的颜色背景取而代之。它的设计方法，就不用我再多说了吧!

局部背景

前面我们所说的背景都是整个页面的背景，能不能在页面上为某个局部的内容设置属于它自己的背景呢?回答是肯定的。

最为常见的是在表格的设计当中，我们可以为表格设置一个不同于页面的背景，甚至在不同的表格单元中，我们也可以设置各个表格单元自己的背景。

网页设计怎么设置返回

一、需求分类

任何一个功能的提出都是基于用户的需求。那么为什么用户需要「返回」呢?简单来说，返回可以给用户提供了一个离开当前页面的路径，回到上一个页面。而「上一个页面」可能是上一层级，例如从三级页面回到二级页面，这个属于层级返回;也有可能是同一层级，例如购买理财项目到输入短信验证码的时候突然想更改购买金额，可以点击返回，这属于任务流返回。

当然了，这种分类方式不一定准确，因为有的时候它既属于层级返回，也属于任务流返回。

二、交互设计

分类好了，我们再来了解一下最常见的返回样式。在界面左上角加箭头 icon 是我们最常见的返回样式，这么用没人敢说你不对。我们还可以在旁边加上文字，让用户知道返回的路径。

这种返回的样式，基本可以应付大部分的用户需求。但是有些特殊情况，我们还是要仔细斟酌的。

就以上面这个理财产品购买流程为例，这是一个任务流。假定用户需要5步才能完成购买理财产品的操作，如果用户在第4步的时候点击了返回，有两个可能：

用户想更改购买金额或者重新确认利率，周期等产品信息; 用户不想买了。

如果是第二种，用户一步步的返回就会很累。所以当用户处于一个任务流中，一旦用户点击了返回，我们可以考虑给用户提供关闭的功能，让用户可以*地离开。当然也不止是任务流，如果用户处于层级过深的情况下，我们也可以给用户提供关闭功能。

关闭功能在不同的阶段有不同的叫法，在任务流的终点，我们称之为「成功」。

设计师需要考虑不同的使用场景，例如当网络状况不佳的时候，新页面迟迟加载不了。我们应该给用户提供一个关闭功能，要不然像图上的这种，用户只能选择退出产品了。当然这个案例是开发的锅，返回功能应该是提前渲染好的，就像微信这样。所以一个产品要做好，设计师必须关注开发的还原度。

三、滑动手势

不管是返回，关闭还是完成，用户想离开当前的状态(页面或者弹框)，都必须要点击 icon 或者文字。这样会不会太单调了，我们可以尝试引入其他的手势。

以网易云音乐为例，如果用户想查看歌曲评论，需要点击「评论」icon，进入评论列表，然后再点击「返回」回到播放界面。但是在虾米音乐，歌曲评论的打开和收起只需用户上下滑动就能完成。当然设计师们怕步子太大，用户一下子接受不了，还是展示了 icon，用户通过点击 icon 也能返回。

这种新的尝试我非常的认可，因为它不仅丰富了返回的实现场景，还开拓了新的维度。用户对于操作流程「前后」的认知还停留在「左右」这个阶段，例如在 iPhone 中，用户可以通过右滑返回到上一个页面。突然发现上下滑动也能完成返回的功能。这样可以给我们在接下来的交互设计中提供一些新的思路。

而且从易用性的角度来说，滑动比点击更受到用户的喜爱。因为点击的区域很小，特别是放在界面左上角，单手操作和大屏手机的用户拇指很难直接触及到，需要更改手机握持姿势或者改为双手操作。可能会有人说，安卓有物理的返回键，用户也很容易操作，简直完美。

对于这个问题，我觉得这体现了安卓和 iOS 的两种不同的思路。我们都知道 iPhone 的一大革命性突破就是抛弃了物理键盘，引入虚拟按键，增加了屏幕面积。而去年发布的 iPhone X 则直接把 HOME 键也给去掉了，整个底部的空间也解放了出来。这让我想起了08年上高中的时候，父母给我买了*一部手机，当时如果想放大照片必须点+号，现在照片的放大缩小都完全依靠手势了。所以我在想会不会有一天手势完全取代了按钮。

当然任何创新本质都是打破原有的规则，挑战用户的固有认知，增加用户的学习成本。以上面的虾米音乐为例，即使引入了手势，还是保留了返回按钮，给用户一个过渡的时期。

手势的引入可以节省界面的空间，但是我们通过其他的方法也能达到这个目的。下图就是一个很好的例子。

上面提到了安卓和 iPhone 的差异性，所以我们在设计过程要充分考虑不同的操作系统和机型。我可以给大家再举一个例子。

在 iPhone 中，手势密码登录失败的时候，会跳出一个弹框，弹框的文字会抖动一下，告诉用户登录失败。但是一些安卓机不支持这个抖动效果，这个会造成用户无法获知第二次、第三次、第四次失败，因为弹框没有发生任何变化。直到最后失败次数超过限制，被锁定。

网页设计之怎样设计小版面网页

凡事一分为三：首先，我们定好总体的尺寸(比如，尺寸为 900 × 600px )。同时，将宽及高同时一分为三，你可以将下面占三分之*的底部区域加上一种较深的颜色。同时，链接区域的颜色与标志区域的颜色略有不同(我们在上面所选择的链接区域颜色为标志区域颜色的 90% )，这样使人看起来仍然浑为一体。如果象小图那样，下面的颜色反差较大，则形成一种分离感，应该避免。

将刚才三分之*的区域的宽与高再分成三等分，使到左边距与上边距设为该区域的三分之*的距离。留意白色区域中，上下的页边距比左右的页边距更窄一些。( 2 )，将刚才左边确定的页边距加宽 150% 来作为右边的页边距(也意味着，右边的页边距与左边的页边距比例仍为 3 ： 2 )。顺便提一下，这些数值并不需要精确到像素，我们这样分配，只是为了尽可能让各种比例统一，从而使观看时更加一致和谐。通过刚才的两个步骤，我们就形成一个放置信息的区域。

元素的安排应该以底线为基准(与我们设计一般的网页刚好倒过来，道理何在?因为一般的网页中，标志及链接都是放在上面，而在这里，它们是在底部，所以我们安排元素应该从下到上来配合这种转变)。无论是文字还是图片，都需要与加亮的这一点为准。也意味着，所有的文字与图片都要接触到这个基线。左侧的文字为右对齐，这样文字与图片的交接处才显得整洁。

放置文字与图片：每一个网页可以放置少量的文字或少量的图片，当然，也可以同时放置文字与图片。主要信息放在右边，次要的信息放在左边。

网页设计都是同一尺寸，同一种字体样式，但标题是粗体，颜色也是采用底部区域的颜色，这样可以与底部区域形成协调感。通过加大段落之间的空间而不是采用首行缩进的形式来区分各个段落。这些文字的底部应该去到我们刚才所确定的底线。文字不应该过于拥挤，如果你意犹未尽，还有文字要加上，那就加多一页，不要硬塞进去。同时，在下面加上各个页面的链接(箭头处)。

放置图片：将一张小图片放置在左侧的区域中，留意，图片的底部与上述所定的基准水平线接触，特别留意一点，上图中，无论是图片还是文字，都没有将信息区域完全填满。这是一种设计技巧，最后出来的效果就是一个呈拱形的开阔空间包围着信息元素。漂亮而且容易阅读。这个版面无论是在放置一张图片或者多张图片时都非常适用。这些图片可以是你的产品图，说明图及其它宣传图片等。

小元素产生大的冲击力：善于利用白色空间，一张小图片放在一个大空间时可以产生一种力量感(也更清晰)。效果比放上一张大图片要好得多，更容易吸引读者的眼光。 LOGO 同样具有这样的力量，绿色的空间引导你的眼睛去到上方的标志中，提醒标志的存在。网站设计也要注重小元素。

放置多张图片：每一个网页可以同时放置两张，三张、四张甚至更多的图片。将整体的图片安排成矩形的形状。所有的图片都是同一尺寸或同一形状效果最好，如果你希望图片尺寸不一样，那就让它们的尺寸反差大一点。图片与图片之间要有间隔，不要连在一起。

其它细节：除了标志之外，还有什么东西能够让这个网页在网站建设中传达独特的个性?我们还要对文字、字母、链接等很多细节进行精心安排。

Verdana 是一种常见的非衬线字体，这种字体的线条较细，与这个小网页版面非常搭配。在上面，我们采用的字体大小为 11px ，行距为 16px ，颜色较浅(大概 50% 灰)。标题为粗体，为了形成对比，标题文字的颜色可以是黑色或与底部区域的颜色一样。避免文字环绕图片的形式。图片与文字应该径渭分明，图片在一边，文字在另一边。

网页设计如何设置超链接

所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序

超链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素，什么是超链接?。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后,链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

超链接的类型：

按照链接路径的不同,网页中超链接一般分为以下3种类型：内部链接,锚点链接和外部链接。

超链接的对象：

如果按照使用对象的不同，网页中的链接又可以分为：文本超链接，图像超链接，E-mail链接，锚点链接，多媒体文件链接，空链接等。

超链接是一种对象，它以特殊编码的文本或图形的形式来实现链接，如果单击该链接，则相当于指示浏览器移至同一网页内的某个位置，或打开一个新的网页，或打开某一个新的WWW网站中的网页。

网页超链接：

网页上的超链接一般分为三种：一种是绝对URL的超链接。URL(Uniform Resource Locator)就是统一资源定位符，简单地讲就是网络上的一个站点、网页的完整路径。

第二种是相对URL的超链接。如将自己网页上的某一段文字或某标题链接到同一网站的其他网页上面去;

还有一种称为同一网页的超链接，这种超链接又叫做书签。

动态静态：

超链接还可以分为动态超连接和静态超连接。动态超连接指的是可以通过改变HTML代码来实现动态变化的超链接，例如我们可以实现将鼠标移动到某个文字链接上，文字就会象动画一样动起来或改变颜色的效果，也可以实现鼠标移到图片上图片就产生反色或朦胧等等的效果。而静态超链接，顾名思义，就是没有动态效果的超链接。

颜色：

在网页中，一般文字上的超链接都是蓝色(当然，用户也可以自己设置成其他颜色)，文字下面有一条下划线。当移动鼠标指针到该超链接上时，鼠标指针就会变成一只手的形状，这时候用鼠标左键单击，就可以直接跳到与这个超链接相连接的网页或WWW网站上去。如果用户已经浏览过某个超链接，这个超链接的文本颜色就会发生改变(默认为紫色)。只有图像的超链接访问后颜色不会发生变化。

HTML标记：

：创建一个超链接。创建一个有标题的超链接。

：创建一个自动发送电子邮件的链接。

：创建一个位于文档内部的锚点。

：创建一个指向位于文档内部锚点的链接。

图片超链接：

代码：a href="你要链接到的地址"target="_blank"img scr="图片地址URL"width="宽度"height="高度"alt="图片说明"border="0″/a

文字超链接：

代码：a href="所要链接的地址"target="_blank"输入的文字/a LOGO超链接：

代码：img src="图片logo地址"border="0″