您现在的位置是:首页 > 前端学习 > Web前端Web前端

网页中的图像(第四节)(图文)

第十三双眼睛2019-10-30【Web前端】人已围观

简介一个页面中,出去文本部分,最常见的就是图像了,在网页中,一张图片大到可以覆盖整个页面的背景,也可以小到成为一个Logo,他们在不经意间充斥着整个页面,本章的知识点如下:
1计算机图像的概念
2如何用计算机术语表达图像
3学习如何排版图像
4制作自己的图像
5使用技巧来美化图像
6设置页面背景

图像的基础知识
页面中放入图像不难,使用HTML标签很容易就可以做的,困难的是明白放如什么格式的图片,如何去修改图片,如何在网页在应用这些图像,这些知识基于需要对图像有个清晰的认识,了解这些,能使一个设计师在制作页面时,更加游刃有余,得心应手。
最常用的位图图像
位图又称为光栅图,是由许多像素组成的,像素是很小的颜色块,如马赛克一样,当这样的图像被放大到一定的倍数后,图像呈现出锯齿一样的边缘,当图像继续放大的时候,看到的就是一个个的小方格。每一个小方格就是一个像素。像素表示为一个正方形的颜色块。
放大位图能使图像失真,如果减小位图,也能使图像失真,这是因为缩小图像,减小的是图像中像素的数量。通常位图又被分为8,16,24,32.这并不是说只有8中颜色,而是有2的8次方,从人的眼睛来说,有16位颜色基本能满足需求了。而24位颜色又称为真彩色。32位色是个例外,不是说有2的32次方种颜色,而是在在24位色的基础上又加入了256阶颜色的灰度
在制作页面的时候,一般选择24位图像,32位图像的质量虽好,但是却带来了更大的图像质量。如果一个页面使用的图像体积过大,会导致浏览者浏览页面的时间变长。而事实上,人的眼睛无法分辨出24位颜色和32位颜色。

最常用的位图格式
生活中,画的种类可以分为很多种,如素描,油画,水墨画等,在计算机的世界里,图像也可以分为很多种格式,但是问题是,人们仅凭肉眼就可以看得出素描和油画,却不能凭肉眼直观得分辨计算机得图像,他们看上去都是一样,但是计算机可以做到。常用得3种位图图像格式是jpeg,png,gif.

1JPEG格式得图像
JPEG文件是最常用的格式之一,后缀名是.jpg.几乎所有的软件或者平台都可以打开它。JPEG文件是一种经过压缩的图像,压缩的图像可以保持位8位,24位,32位深度的图像,压缩比率可以达到100:1,JPEG可以很好的处理大面积色调的图像,如摄影作品相片。但是不适用于色彩对比强烈,有清晰边界,简单构图的图像。如logo,banner.
PNG格式的图像
PNG文件的后缀名是.png.是一种能够存储32位位图信息的图像。采用的是一种无损压缩的方式。而且他支持透明信息,所谓透明,是可以浮现在其他文件活页面上。可以说PNG的文件是专门为WEB创造的图像。通常大部分页面设计者,在页面中加入logo或者一些点缀的小图像,都会选择使用PNG。

GIF
GIF是一种图像交互格式,后缀是.gif.它只支持256色以内的图像。所以,GIF图像的效果是很差的,但是GIF图像有一个最大的特点,就是可以制作动画。图像制作者利用图像处理软件。将静态的图像设置为单帧画面,然后把这些单帧画面连在一起,设置好上一副画到下一副画的间隔时间,最后保存为GIF格式就好了。可以说,这就是简单的逐帧动画。
总体来说,这三种图像从使用上各有千秋,JPEG可以压缩图像的容量,PNG的质量较好,GIF可以做动画,当然,位图图像的格式还有很多,如BMP,TGA,TIFF,PSD,这些在页面种并不常用,这些格式的图片容量都很大,通常,图像设计者为了保证图片的质量,使用这些格式的图片进行设计,修改。最后成品任然需要转换为网页中最常用的格式图片。

矢量图
计算机种显示的图像分为两类,前面介绍的是位图,还有一种是适量图。矢量图和位图最大的区别就是,前者无论如何放大或者缩小,都不会影响其效果,而后者会有损图像质量,矢量图是一种以数学描述的方式来记录图像的内容,如一个方程y=kx,当这个方程提现在左表系上的时候,设置不同的参数可以绘制一条任意角度的直线。这就是矢量图的构图原理,矢量图一般以线条,曲线和色块为主,不易制作色调丰富,效果绚丽的图像,其文件所占的容量也比较小。
矢量图由于可以随意放大缩小的特点,通常被看成是一种图像模板放在图库种,这样方便设计者备用保存,在需要的时候拿出来用用。遗憾的是,矢量图不易制作色调复杂的图像。矢量图的后缀有.ai ,.cdf,.fh,.swf,.ai后缀的文件是指一种静帧的矢量文件格式,.cdf后缀的文件多以工程图为常见,而.swf格式文件指的就是flash,也是页面中最常见的一种动画。

图像的分辨率
分辨率的单位是dpi,即每英寸显示的线数,通常人们所指的分辨率是两种,分辨为屏幕分辨率和图片分辨率,屏幕分辨率就是指计算机显示器默认的分辨率。一般来说,目前大部分的下显示器的分辨率是1024*768,如果设计者制作的页面超过了显示器默认的分辨率,即使在浏览器全屏的情况下,页面也不能完全展现出来,这时候会出现滚动条。图片分辨率定义是,用于量度位图图像内数据量多少的一个参数,分辨率越高的图像,包含的数据越多,图像的容量越大,需要消耗更多的计算机资源,需要更大的存储空间,所以,对于页面开发者,选择适当的图片才是最好的选择。
那么图像和分辨率有什么关系呢,分辨率指的是每英寸的像素值,通过像素和分辨率的换算可以测算长度,举例来说,一副400*300分辨率的图像,在一个屏幕分辨率为300dpi的浏览器种,最终图像的长度和宽度是通过分辨率和像素的换算得出的。
1英寸=2.54厘米
400/300*2.54=3.39厘米
300/300*2.54=2.54厘米,那么最终会显示成一个长为3.39厘米,宽2.54厘米的图片,所以,当遇到不同屏幕分辨率的显示器时,换算成厘米的数值也是不同的。

几种网页种最常用的banner尺寸
在网页种,经常涉及使用banner,banner指网幅广告。旗帜广告,横幅广告。一个优秀的页面,不仅仅时放入的banner需要美观精致,更要符合页面的风格,banner有一定的标准可以参考,但是不一定非要按照标准。几种国际尺寸的banner如下:
468*60:全尺寸banner,应用最为广泛的广告条尺寸,用于页眉或者页脚,
392*72:全尺寸banner,带导航条主要用于有较多图片的展示的广告条,用于页眉或者页脚。
234*60:这种规格适用于框架或左右形式主页的广告链接。
125*125:方形按钮,这种规格适于表现照片效果的图像广告
120*90:按钮类型,主要应用有产品演示或者大型logo
120*60:按钮类型,这种广告类型主要用于logo类型
88*31:小按钮,主要用于网页链接,或网站小型logo
120*240:垂直广告

页面中的图像
图像是增加网页可视效果的最有力武器之一,在语言文字无法描述的地方,一些只可意会无法言传的地方,这个时候,使用一张图片就可以表达清楚设计者的信息。

图像路径
在页面种使用图像,实际上是使用了服务器上的一张图像,设计者将所有的图像放在一台服务器上,然后通过HTML语言将图片的位置告诉浏览器,浏览器就会根据图片的位置找到图片,并展示在浏览器种。在页面文档种,使用<img src="" alt=""/> 将图像放入页面中,img表示image,src表示source,alt是浏览者不能看到图片时的提示。

像编辑文本一样,在页面中对齐图片,如果一个页面中放入图片的时候,可以像放入文本一样,令图片左右或者中对齐,只要在img标签中放入align属性,图像的对齐和文本的对齐在使用上不同,当对图像命令左对齐或者右对齐时,align可以放在<img>内,也可以放在包裹<img>标签的标签内。但是居中对齐不一样,左对齐和右对齐可以理解为图像放在文字的左边或者右边, 从这个角度理解,就知道为什么居中对齐不管用了。HTML的用法右很多,需要慢慢积累。

图像与文本的对齐方式
在编辑图像的时候,图像不同于文本的意义在于,图像都是一个一个分开的整体,而编辑图像时,如果设计者想在图像的旁边放入文本内容,就需要考虑图像和文本的对齐方式,在HTML文档中,分为4种,
使图像的顶部和同一行的文本对齐,使用代码如下:
<img style="vertical-align:text-top"/>
使图像的中部和同一行的文本对齐,使用代码如下:
<img style="vertical-align:text-middle"/>
使图像的底部和同一行的文本对齐,使用代码如下:
<img style="vertical-align:text-bottom"/>

使图像的底部和同一行的文本基线对齐,使用代码如下:
<img style="vertical-alignbaseline"/>

控制图像与文本的距离
编辑页面的时候,除了可以控制图像与文本的编排方式,甚至可以进一步的调整图像和文本的距离,当设置好图片和文本的距离后,可以利用hspace,vspace属性来分别控制图片四周与其他内容间隔的水平方向的宽度,或者使垂直方向的高度,这种效果可以令页面展示出更多不一样的特色,
<body>
<h4>图像与文本的距离控制</h4>
<img alt="pic" src="head.jpg" hspace="30">
这段文字距离左边图像的距离使30px
<br>
<img alt="pic" src="head.jpg" vspace="30">
这段文字距离上边图像的距离使30px
</body>


给图像添加边框
编辑图像时,有一种使用频度很高的修饰图片的方式,给图像添加边框,虽然这是对图片小小的修饰,但是带来的效果时相当的突出,在<img>标签中添加border属性,输入像素值,指边框的宽度,

独树一帜的水平线
经常在设计页面的时候,需要在页面中插入一条水平线来隔开文本,代码的写法是<hr align="" width="" size="">,width表示水平线的宽度,size表示水品先的粗细。

改变页面的背景
放入背景图片的方式和插入图片的方式是不一样的,添加图可以放入页面的任意位置,但是不能再图片上编辑内容,而背景图就是整个页面的最底层,原先是一片空白的页面改成了一张图,代码如下:<body background="...">,这是HTML的写法,也可以用css的写法来写,代码如下:
<body style="background: url(head.jpg) no-repeat">
<h4>图像与文本的距离控制</h4>
</body>


 

Tags:HTML   网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计149篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们