10大优享服务
62项会员特权

使用网页背景图片的小方法

发布时间:2021-12-01 09:32:34     阅读次数:10131次     评论数:0次

    相信大家在浏览网页的时候都会观看到各大网站的网页背景图片,并且根据每个网站所存在的意义都不同,所选择的网页背景图片也就应该要有所不同,因此我们应该要根据网站的不同特点和方向,来进行有针对性的网页背景图片,那么,网页背景图片的使用技巧有哪些?

使用网页背景图片的小方法

    1 图片位置的选择与设置

    通常网页图像主要包括网站logo,网站banner,网站导航和各种辅助修饰图片以及网页背景图片等等。这些图像位置的选择应该有利于浏览者接受信息和提高页面美感,做到既不喧宾夺主又能很好的传达信息。

    一个网站页面的头部一般由导航和网站banner组成,网站设计者可以在bannar中投放广告吸引用户,并利用导航栏清晰的像用户展现网站的栏目结构。

    网站logo做为网站的标志性图像,应该安排在页面最突出最显眼的位置,而辅助说明的小文字应当紧靠相应的文字。对于大篇幅的文字内容,在适当的位置插入概括大意的图片可以帮助用户理解内容,而且还可以通过这些插入的图片划分章节。

    以京东商城首页的头部页面为例,他总共包括网站banner,网站logo,搜索栏和导航三个部分。他直接将网站banner放在了顶部,将店内最重要的信息通过这个显著的位置发布出去。将logo放在了第二行位置来显示网站的品牌属性,同时网站banner和导航都用红色加深,突出了视觉效果,京东这么做的目的主要是从视觉效果,用户体验方面来考量的。

    值得注意的是,图片位置的选择不必局限于常规手法,适当的发挥创意调整位置,能使网站更具有吸引力。

    2 设置图片尺寸

    在布局网页的时候,将切割好的图片插入相应的位置,不应使用图片的width和hight属性改变图片的尺寸,因为那样会使图片变形和失真。使用矢量绘图工具制作的图像适合保存为png格式,其大小尺寸应在设计的时候确定,变为位图后不宜对其进行缩放操作。

    3 切图规则

    对于一个已经设计好的网页效果图进行切图是主要涉及两个原则:一个以色块为单位尽量保持网页元素相对独立。二是尽量保证切线的水平对齐从而方便页面布局。大面积相同色块部分在切割时只需切割一小段,充分利用背景重复的特性,提高页面加载速度。

    4 背景图片的设置

    如果想在某个图片上添加文字,则可以将该图片设计为背景图片。除此功能外,灵活设置网页背景图片还能大大加快网页的加载速度。对于大面积相同色块的背景图片,我们可以只切割狭小的长条,然后利用背景图在水平和垂直方向上自动重复的特性设置背景图片。对于单一颜色的背景,我们则可以利用html单元格背景属性直接设置相应的背景颜色。

    以上给大家介绍的,就是网页背景图片的使用技巧了。通常消费者评论哪一个网站的好坏其实会首先考虑到这一网站的背景图片,因此想要获得消费者的认可,我们就必须要搞好自己网站上的背景图片,同时也应该要远离网页背景图片设计和制作的误区,否则会造成整个网页和网站的失败。

本文地址:
来源:一品威客,转载须经版权人书面授权并注明来源

留言(0

↓展开留言

该攻略尚无留言记录