当前位置:首页>>视障教育>>盲校教学>>正文
2008年4月21日 星期一 8:57:16 星期一
盲人如何制作网页讲座三--------控制网页中的图片
[ 来源: | 作者: | 时间:2008-4-5 16:47:27 | 浏览: ]
收藏到新浪ViVi 添加到收藏夹 字号选择〖 〗 / 双击滚屏 单击停止


盲人如何制作网页讲座
一、控制网页中的图片

图片能使网页变得错落有致、缤纷多彩。

下面我们以实例的方式对图片的插入与排列进行详细介绍:

1、<img src=“?”> 插入图片标签的应用:

将一幅图片放置在网页中之前,你需要知道该文件的名称以及文件存储在服务器的哪个目录下,这样你就可以告诉浏览器到哪里去查找该幅图片了。储存图片最简便的方法是将图片保存在与 html 网页文件所在的目录中,这样浏览器就可以自动寻找到图片。假设我们有一幅名为 “abc.gif” 的图片,并与你制作的 html 文件在同一个目录中,这时你应该输入下列代码 <img src=“abc.gif”> 。这样就把一幅名为 “abc.gif” 的图片插入到网页中了。如果图片没有与 html 文件在同一目录中的话,则需要把图片所在位置的全路径地址及图片名称填入 src="" 属性中。

2、<img align=“?”>排列图片标签的应用:

使用排列图片标签可以控制图片在网页中的位置,如果使图片显示在网页右边的话其代码是 <img align=“right”src=“abc.gif”>,若要使该图片居左显示,把 align=“right” 改为 align=“left” 即可。

将图片放置在网页的正中则略显复杂,因为 <img align=center> 标志符并不能在所有浏览器中产生正确的效果,因此如果需要将图片居中,首先需要把该段内容全部居中,方法是使用<p align=center>标志符,然后再添加插入图片的标签即可。具体的代码是:

<p align=center><img src=“abc.gif”>

3、<img border=“?”>  设置图片边界标签的应用:

对图片的边界大小控制也就是控制一个网页中图片的边缘显示有多宽,一般图片的边界只有当你把它当作一个链接时才会显示出来,不过我们也可以根据需要利用 <img border=“?”> 这个标签来任意设置图片的边界,只需把“?”替换为从0至99的数字即可。另外,一般最常用的是你可以把图片边界的宽度设为0,即<img border=“0”> 这样图片就不会显示边界了。例如,如果我们为“abc.gif” 设置一个边界,可以这样做:<img border=“5”src=“/web/pic/abc.gif”>。

4、 <img width=“?” height=“?”>设置图片的宽度和高度标签的应用:

在网页中插入一幅图片,如果我们不对其大小做更改的话,浏览器将以默认的尺寸进行显示,但很多时候我们都要根据网页制作的某些需求来调整图片的显示尺寸,这时候就要用到 <img width=“?”height=“?”> 这一标签了,其中 width=“?”是设置图片的宽度, height=“?”是设置图片的高度,只要根据需求把其中的“?”换成数值即可,在设置图片显示尺寸的时候一定要注意必须在图片原尺寸的基础上进行调整,查看原图片的尺寸后再根据相应的比例进行调整,否则有可能出现图片变形的情况,比如原图片是正方形的,但我们在网页中控制图片的高度和宽度的值不一样就造成了图片变成长方形的了。若我们设置 “abc.gif” 的宽度和高度的话则表示为:<img width=“300” height=“280”src=“/web/pic/abc.gif”>。

5、<body background="?">  设置背景图片标签的应用:

网页的背景不仅可以设置成不同的颜色,而且还可以用某张图片做为其背景,其特点是完全填充整个页面,而且显示在所有网页元素的后面,不影响文字或其他图片的显示。比如我们要在页面上显示一段文字并且以雪花飞舞为背景的话,有的朋友可能会想到首先要做一张雪花飞舞的图片,然而这样操作似乎显得太麻烦了,只要做一张非常小的只有一两片雪花飞动的图片,利用本标签就可以达到整个页面雪花飞舞的效果了,其原代码如下:

<body background=“abc.gif”>

天下雪了,冬天来了。

</body>

特别值得注意的就是该标签如果用的不合适的话可能造成网页显示非常杂乱,所以在应用的过程中一般可以考虑使用小的图片起到对网页的点缀的效果即可,最好能在明眼人的帮助下使用该标签。

6、图文混排的方法:

虽然网页中提供各种图片可以使网页显得更加漂亮,但有时你也需要在图片旁边添加一些文字说明。图文混排一般有几种方法,通过<img align>标志符来实现。对于初学者而言,你可以将图片放置在网页的左侧或右侧,然后将文字内容放置在图片旁边。请看下面图文混排的例子,文字信息会与图片并排从左侧开始:

<p><img align=“left”src=“/web/pic/abc.gif”>让我们共同努力学习吧,相信很快大家一定能做出非常精美的网页的!

本新闻共2页,当前在第1页  1  2  

责任编辑:

读者评论:



发表评论:

会员名称:
密码:匿名 ·注册·忘记密码?
评论内容:
(最多300个字符)
  查看评论



相关文章:

[发送给好友] [打印本页] [关闭窗口] [返回顶部] 转载请注明来源:Www.tejiao.cn
上一篇文章:盲人如何制作网页讲座:第二讲 如何处理网页中的文字
下一篇文章:盲人如何制作网页四-链接的创建
特别声明: 本站文章版权归文章原始作者所有。除部分特别声明禁止转载的专稿外的其他文章勿用于商业用途的可以转载,但请务必注明出处和原始作者。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。
文章搜索
    
精彩推荐
论坛新贴
热点图文