<![CDATA[静怡家园]]> http://www.zhanghaijun.com/index.php zh-cn http://www.zhanghaijun.com/post// <![CDATA[HTML 初学者指南(8)]]> 碟舞飞扬 <webmaster@zhanghaijun.com> Fri, 23 Mar 2007 00:21:29 +0000 http://www.zhanghaijun.com/post// 多数 Web 浏览器可以显示嵌入行中的X 位图(XBM), GIF, 或 JPEG 格式的图象(即和文本想邻的图象) . 其他格式的图象正在合并到Web 浏览器中[如, Portable Network Graphic (PNG) 格式]. 每个图象都花费处理时间并降低文档显示的速度. 仔细选择你的文档中的图象和图象的个数.

包含一个嵌入行中的图象, 输入:

<IMG SRC=图象名>
ALT="FORWARD" HEIGHT=32 WIDTH=32>

其中 图象名 是图象文件的URL .

<IMG SRC> URLs 的语法格式和锚链HREF使用的格式相同. 如果图象文件是GIF 文件, 则图象名中的文件名部分必须以.gif结束. X 位图格式的文件必须以.xbm结尾; JPEG 图象文件必须以.jpg或 .jpeg结束; Portable Network Graphic 文件必须以.png结束.

图象大小属性
在<IMG> 标记中你应该包含其它两个属性，用于通知浏览器正在和文本一起下载的图象的大小. HEIGHT 和 WIDTH 属性使浏览器在下载文件其它部分的时候为图象留出适当的空间（象素）. (从你的图象处理软件如Adobe Photoshop中可以得到象素大小.)

例如, 要在文件中包含一幅自己的肖像, 输入:

<IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>
ALT="FORWARD" HEIGHT=32 WIDTH=32>

注意: 当图象大小与属性描述大小不一致时，有些浏览器使用 HEIGHT 和 WIDTH属性来扩大或缩小一幅图象以使它适用于分配的空间. 并非所有的浏览器开发者都赞同放大／缩小图象. 因此，在安排时不要假设你的读者都可以使用这种特性. 最好查看一下图象大小，使用正确的尺寸.

图象定位
对于图象的显示你具有一定的灵活性. 你可以让图象和文本分开，把图象放在左边，右边，或者中间. 或者你可以让图象和文本在同一行。你可以尝试多种形式，看一看哪种最好

使图象和文本在同一行
缺省情况下图象的底部和随后的文本在同一行显示，就象现在的这段. 你也可以通过把ALIGN= 属性的值设为 TOP 或 CENTER，把图象放到一段的顶端或中间。

这段文本与图象的顶端在同一行(<IMG SRC = "BarHotlist.gif" ALIGN=TOP>). 注意只有一行文本如此，其他行跳到图象的底部显示.

这一行文本显示在图象中间(<IMG SRC = "BarHotlist.gif" ALIGN=CENTER>). 同样，只有一行显示在中间，其他行在图象的下面.

不带文本的图象
如果要显示一幅不带文本的图象(例如，你的组织的徽标), 只要把它作为单独的一段即可. 使用段落标记的 ALIGN=属性把图象调整到窗口的中间或右边，如下所示:

<p ALIGN=CENTER>
<IMG SRC = "BarHotlist.gif">
</p>

结果为:

图象显示在中间; 本段从它下面靠左开始.

图象的替换文本
一些 World Wide Web 浏览器--主要是那些在 VT100 终端上运行的浏览器--不能显示图象. 有些用户会关掉图象下载功能，就算他们的软件可以显示图象(特别是如果他们是 modem 或低速线路的用户). HTML 提供一种机制使得读者知道他们看到的页面上缺少了什么.

ALT 属性使你可以指定一段可以替代图象来显示的文本. 例如:

<IMG SRC="UpArrow.gif" ALT="Up">
ALT="" HEIGHT=48 WIDTH=50>

其中 UpArrow.gif 是一个向上的箭头.在具有图象显示功能并且图象下载打开的浏览器中，你可以看到一个上箭头的图形。在VT100 浏览器中或者图象下载关闭的情况下, 你的窗口中将显示 Up 这个单词.

你应该对出现在你的文档中的每个图象都使用一个替换文本, 这是一种对读者的礼貌.

背景图象
新版本的 Web 浏览器可以下载一幅图象用做显示一个主页时的背景. 有些人喜欢使用背景，有些人不喜欢. 通常，如果你想包含一个背景, 你要确保你的文本在背景上依然可以被很清晰地阅读.

背景图象可以是一个物体的组织 (例如亚麻布纸张)或图象 (可能是一个徽标). 你可以象生成其他任何图象一样来生成背景图象。

不过你只需要制作一个很小的图象. 浏览器会使用一种称之为“盖瓦”tiling的特性重复显示这个图象，填满整个浏览器窗口。简单地说，你只要生成一幅图象，浏览器会自动重复多次，直到填满你的窗口。当你使用下面说明的标记时，这个动作会自动执行.

包含背景图象的标记包含在 <BODY> 标记描述中作为一个属性:

<BODY BACKGROUND="filename.gif">

背景颜色
缺省情况下浏览器使用灰底黑字显示文本. 但是, 你可以改变它们. 一些 HTML 作者选择一个背景颜色，配以文本颜色的相应改变.

对于这种改变一定要预先看一看，是否还易于阅读. (例如, 不少人用黑底红字，非常难以阅读!)

使用<BODY>标记的多种属性，你可以改变文本，链接，看过的链接和活动链接的颜色. 例如, 输入:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

将创建一个窗口，背景为黑色 (BGCOLOR), 文本为白色 (TEXT), 超链为银色 (LINK).

六位的数字和字母的组合代表颜色，它给出某种颜色的 RGB (红red, 绿green, 蓝blue)的值. 这个六位数字实际上是三个顺序排列的两位数, 代表从00到FF的红，绿，蓝比重的十六进制值。例如, 000000 表示黑色(没有任何颜色), FF0000 是亮红, FFFFFF 是白色 (所有三种颜色全部饱和). 这些数字和字母的组合的含义是模糊的. 幸运的是有一个在线资源可以帮助你了解各种组合与颜色的对应关系:

ColorPro Web server
外部图象，声音，和动画
你可能希望当用户激活你的文档中一个单词或小的图象作成的链接时，把一幅图象作为单独的文档打开. 这种情况称为一个外部图象, 当你不想由于大的图象而降低主文档的下载速度时，它是很有用的.

要包含一个外部图象的链接, 输入:

<A HREF="MyImage.gif">link anchor</A>

你也可以用一个小的图象作为到大图象的链接. 输入:

<A HREF="LargerImage.gif"><IMG SRC="SmallImage.gif"></A>
ALT="" HEIGHT=48 WIDTH=50>

读者看到图象 SmallImage.gif ，点击它就可以打开文件 LargerImage.gif .

使用同样的语法链接外部动画和声音. 唯一的不同在于链接文件的扩展名. 例如,

<A HREF="AdamsRib.mov">link anchor</A> ]]> http://www.zhanghaijun.com/post//#blogcomment <![CDATA[[评论] HTML 初学者指南(8)]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://www.zhanghaijun.com/post//#blogcomment