网页设计如何设置图片颜色背景的设计？简单的

网页设计中如何设置图片

彩色背景的设计是最简单的，但也是最常用也是最重要的，因为它与图片背景相比，具有无可比拟的显示速度优势。下面介绍如何设置网页设计的背景，希望对你有所帮助。

彩色背景

彩色背景的设计是最简单的，但也是最常用也是最重要的，因为它与图片背景相比，具有无可比拟的显示速度优势。在网页文件中，页面的颜色背景一般由标签指定

“颜色”表示不同的颜色，可以用多种方式表示。比较常用的颜色英文名称直接使用，如蓝色、黄色、黑色等。十进制表示方式，如#0000FF、#FFFF00、#000000等，另外还有百分比值法和整数法也可以，效果是一样的。

虽然颜色背景比较简单，但是需要注意的地方很多，比如根据不同的页面内容设计背景颜色的冷暖状态，设计背景之间的最佳视觉搭配根据页面布局的颜色和页面内容等。

沙背景

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

初学者有过尝试用自己的照片作为页面背景的经验，结果发现浏览器上不仅显示了一张照片，而且在水平和垂直方向上都显示了同一张照片。反复安排。这是浏览器处理图像背景时的常规方法。利用这个规则，我们可以用一小块图片作为页面背景，让它在页面上自动重复覆盖整个页面，从而大大减小了网页的大小。

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

其中“图片”代表背景图片的URL路径。

条纹背景

条形背景类似于沙子背景。适用于在水平或垂直方向重复，但在其他方向不规则的页面背景。它还使用浏览器自动重复图片背景的排列。与沙纹背景的区别在于，它只会让画面在一个方向重复。

以垂直方向的排列为例。首先，用图像处理软件制作一个从左到右呈蓝白色渐变的水平条形图像，其长度等于页面宽度。设置为页面背景，被浏览器显示后，成为整个页面的彩色背景，从左到右呈蓝白色渐变。当然，也可以采用类似的方法来实现条形背景在水平方向上的重复排列。

照片背景

将自己或朋友的照片作为页面背景供所有人查看有点令人兴奋，但是浏览器的图像自动重复排列使得这样做变得困难。怎么做？只有意想不到，没有不可能，这里我们用一点简单的CSS。

这样，在网页中，你可以看到你的照片在页面中间，而当你拉动浏览器窗口的滚动条时，照片仍然在页面中间，没有滚动与页面内容。如果不满意照片在页面中间，也可以随意调整其在页面中的位置，调整“background-position”的值即可。

复合背景

如果你在练习上面的“照片背景”的同时“不小心”在标签中设置了颜色背景，你看到了什么？彩色背景是否仍然有效？是的，您可以看到您的照片浮动在您设置的彩色背景之上，两者都可以同时正常显示。这就是复合背景的魅力。更吸引人的是，当您设置的图片背景由于某些未知因素而无法正常显示时，浏览器会自动将其替换为您设置的彩色背景。它的设计方法我就不用多说了！

部分背景

我们前面提到的背景是整个页面的背景。我们可以为页面上的某一部分内容设置自己的背景吗？答案是肯定的。

最常见的就是在表格的设计中，我们可以为表格设置与页面不同的背景，甚至在不同的表格单元格中，我们也可以为每个表格单元格本身设置背景。

如何重新设置网页设计

一、需求分类

任何功能都是根据用户需求提出的。那么为什么用户需要“回去”呢？简单地说，返回为用户提供了一条从当前页面返回到前一页面的路径。 “上一页”可能是上一级，如从三级页面返回到二级页面，属于一级返回；也可能是同级别的，比如你买了一个理财​​产品，输入短信验证码，突然想更改购买金额，可以点击退货，属于任务流退货。

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

二、交互设计

分类，我们来看看最常见的退货款式。在界面左上角添加箭头图标是我们最常见的返回样式，所以没人敢说你错了。我们还可以在它旁边添加文本，让用户知道返回的路径。

这种回归风格基本可以满足大部分用户的需求。但也有一些特殊情况，我们还是要慎重考虑。

以上面的金融产品购买流程为例，它是一个任务流。假设用户需要5个步骤完成购买理财产品的操作，如果用户在第4步点击返回，则有两种可能：

用户想要更改购买金额或重新确认利率、周期等产品信息；用户不想购买。

如果是第二个，用户一步一步返回会很累。所以当用户在一个任务流中，一旦用户点击返回，我们可以考虑为用户提供关闭功能，以便用户快速离开。当然，这不仅仅是任务流程。如果用户的层次太深，我们也可以为用户提供关机功能。

关闭函数在不同阶段有不同的名称。在任务流程结束时，我们称之为“成功”。

设计师需要考虑不同的使用场景，比如网络条件差时新页面加载速度慢。我们应该为用户提供一个关闭功能，否则就像图片中的一样，用户只能选择退出产品。当然，这个案例是开发的锅，应该提前渲染返回函数，就像微信一样。因此，要做好一个产品，设计师必须注意开发的还原度。

三、滑动手势

无论是返回、关闭还是完成，用户必须单击图标或文本才能离开当前状态（页面或弹出窗口）。会不会太单调了，我们可以尝试引入其他手势。

以网易云音乐为例，如果用户想要查看歌曲评论，需要点击“评论”图标进入评论列表，然后点击“返回”返回播放界面。但在虾米音乐中，歌曲评论的开启和关闭只需上下滑动即可。当然，设计者怕步子太大，用户不能一下子接受，所以还是展示了图标，用户点击图标就可以返回了。

我非常赞同这个新的尝试，因为它不仅丰富了返回的实现场景，而且开辟了新的维度。用户对操作过程“前后”的感知还停留在“左右”阶段。例如，在 iPhone 中，用户可以通过向右滑动来返回上一页。突然发现上下滑动也可以完成返回功能。这可以为我们在接下来的交互设计中提供一些新的思路。

从易用性的角度来看，用户更喜欢滑动而不是点击。因为点击区域很小，尤其是在界面的左上角，单手操作大屏手机的用户的拇指很难直接触及。需要改变手机的握持姿势或使用两只手。可能有人会说，Android有一个物理后退键，方便用户操作，很完美。

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

当然，任何创新的本质都是打破原有的规则网页制作门户网站图片展现中的1234滚动播放，挑战用户的固有认知，增加用户的学习成本。以上面的虾米音乐为例，即使引入了手势，后退键仍然保留，给用户一个过渡期。

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

Android和iPhone的区别上面已经讲过了，所以我们在设计过程中要充分考虑不同的操作系统和机型。我可以再举一个例子。

在iPhone中，当手势密码登录失败时，会弹出一个弹框，弹框的文字会抖动，告诉用户登录失败。但是部分安卓手机不支持这种抖动效果，会导致用户因为弹框没有变化而无法知道第二、第三、第四次故障。直到最后的失败次数超过限制，才会被锁定。

如何在网页设计中设计小布局页面

一切都分为三个部分：首先，我们设置整体尺寸（例如，尺寸为900×600px）。同时，通过将宽度和高度同时一分为三，可以为底部三分之一的底部区域添加较深的颜色。同时，链接区域的颜色与标志区域的颜色略有不同（我们上面选择的链接区域的颜色是标志区域颜色的90%），这样看起来还是比较浑浊的。如果下面的颜色对比度像小图一样大，会形成分离感，应该避免。

将刚才的三分之一区域的宽度和高度分成三等分，这样左边和上边距都设置为该区域的三分之一。请注意，在白色区域中，顶部和底部边距比左右边距窄。 (2)、将左边距扩大150%作为右边距（也就是右边距和左边距的比例还是3:2）。顺便说一句，这些值不需要是像素精确的，我们这样分配它们只是为了保持各种比例尽可能统一，以获得更一致和和谐的观看效果。通过刚才的两个步骤，我们已经形成了一个放置信息的区域。

安排

元素应该以底线为主（正好和我们设计的普通网页相反，这是什么原因呢？因为在普通网页中，logo和链接都是放在最上面的，而这里，它们在底部，所以我们的元素排列应该从底部到顶部以适应这种过渡）。无论是文字还是图片，以高亮点为准。这也意味着所有的文字和图片都必须触及这个基线。左边的文字是右对齐的，所以文字和图片的交界处看起来很整齐。

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

网页设计都是一样的大小和字体样式，但是标题加粗，颜色也是底部区域的颜色，可以与底部区域形成和谐感。通过增加段落之间的间距而不是使用第一行缩进来分隔段落。文本的底部应该到我们刚刚确定的底线。文本不应过于拥挤。如果您要添加更多单词，请添加额外的页面，不要强行添加。此外，在下方添加指向各个页面的链接（箭头）。

放一张图：在左边区域放一张小图，注意图片底部与上述参考水平线接触，特别注意，在上图中，是否图片或文字，没有信息的区域被完全填满。这是一种设计技术，可在信息元素周围形成拱形开放空间。漂亮且易于阅读。这种布局非常适合放置一张图片或多张图片。这些图片可以是您的产品图片、描述图片和其他宣传图片。

小元素产生大影响：善用留白空间，小图像放置在大空间中可以营造出力量感（和清晰感）。效果比放大图要好很多，也更容易抓住读者的眼球。标志也有这样的力量，绿色空间将你的视线引导到上面的标志，提醒标志的存在。网站设计也要注意小元素。

放置多张图片：每个页面可以同时放置两张、三张、四张或更多张图片。将整体画面排列成一个长方形。如果所有图像的大小或形状相同，则所有图像效果最佳，但如果您希望图像具有不同的大小，则使它们的大小对比更加鲜明。图片和图片之间要有空格，不要连在一起。

其他细节：除了logo，还有什么可以让这个页面在网站建设中传达出独特的个性？我们还需要仔细安排文字、字母、链接等很多细节。

Verdana 是一种常见的无衬线字体，带有细线，非常适合这种小型网页布局。上面，我们使用了 11px 的字体大小、16px 的行距和较浅的颜色（大约 50% 的灰色）。标题为粗体，为了对比网页制作门户网站图片展现中的1234滚动播放，标题文本可以是黑色或与底部区域相同的颜色。避免使用文字环绕图片的形式。图片和文字要分清楚，一边是图片，一边是文字。

如何在网页设计中设置超链接

所谓超链接是指从一个网页到一个目标的连接关系，目标可以是另一个网页，可以是同一个网页的不同位置，也可以是一张图片，一封邮件地址，文件，甚至是应用程序

超链接本质上是网页的一部分。它是一个允许我们与其他网页或网站连接的元素。什么是超链接？各个网页链接在一起后，才能真正构成一个网站。所谓超链接是指从一个网页到一个目标的连接关系，目标可以是另一个网页，可以是同一个网页上的不同位置，也可以是图片、邮箱地址、文件，甚至是应用程序。网页中用于超链接的对象可以是一段文字或一张图片。当查看者点击链接的文字或图片时，链接目标将显示在浏览器上，并根据目标类型打开或运行。

超链接类型：

根据链接路径的不同，网页中的超链接一般分为以下三种：内部链接、锚链接和外部链接。

超链接的对象：

根据对象不同，网页中的链接可分为：文本超链接、图片超链接、邮件链接、锚链接、多媒体文件链接、空链接等。

超链接是一个对象，它以特殊编码的文本或图形的形式实现链接，如果单击该链接，则会指示浏览器移动到同一网页中的某个位置，或者打开一个新的 ，或打开一个页面在新的 WWW 站点中。

网页超链接：

网页上的超链接一般分为三种：一种是绝对网址的超链接。 URL（Uniform Resource Locator）是一个统一资源定位器，简单来说就是一个网站或网页在互联网上的完整路径。

第二个是带有相对 URL 的超链接。例如将自己网页上的一段文字或标题链接到同一网站上的其他网页；

还有一种超链接叫同一个网页，也叫书签。

动态静态：

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

颜色：

在网页中，一般文字上的超链接都是蓝色的（当然用户也可以自己设置其他颜色），文字下方有下划线。当鼠标指针移动到超链接时，鼠标指针会变成一只手的形状。此时，单击鼠标左键可直接跳转到与超链接相连的网页或万维网站点。如果用户浏览了超链接，超链接的文本颜色会发生变化（默认为紫色）。只访问图片的超链接，颜色不变。

HTML 标签：

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

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

：在文档中创建一个锚点。

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

图片超链接：

代码：a href=”你要链接的地址”target=”_blank”img scr=”图片地址URL”width=”width”height=”height”alt=”图片描述”border=”0 ” /a

文字超链接：

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

代码：img src=”图片标识地址”border=”0″