当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > HTML网页图片标记

HTML/XHTML教程
一些不太常用的XHTML标签用法以及实例
网页中图片的设置涉及的三个问题
商业HTML邮件的制作建议
HTML Marquee 字符片段滚动
DOCTYPE 文档类型声明(网页爱好者必看)
纯HTML标签你熟悉多少?
HTML元素的ID和Name属性的区别
HTML meta的大作用
HTML标签tbody的用法与说明
HTML 特殊字符转换表
HTML基础 HTML的组成结构
HTML基础之HTML内容细则
Shtml 精简教程
浅谈html table 标签
html Frame、Iframe、Frameset 的区别
HTML 网页页面切换的各种变换效果
HTML的10个表格相关标记
让IE8启动IE7兼容模式的代码
HTML 结构化实现方法
xhtml的块级标记小结

HTML/XHTML教程 中的 HTML网页图片标记


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 344 ::
收藏到网摘: n/a

插入图片标记<IMG>
今天看到的丰富多彩的网页,都是因为有了图像的作用。想一想过去,网络中全部都是纯文本的网页,非常枯燥,就知道图像在网页设计中的重要性了。在html页面中可以插入图像,网页常用的图像格式有JPEG和GIF两种:
JPEG(Joint Photographic Experts Group)是特别为照片图像设计的文件格式。JPEG支持数百万种色彩。JPEG是质量有损耗的格式,这意味着在压缩时一些图像数据被丢失了,这降低了最终文件的质量。然而图像数据被抛弃得很少,不会在质量上有非常明显的不同。
图形交换格式GIF是网页图像中很流行的格式。虽然它仅包括256种色彩,但GIF提供了出色的、几乎没有丢失的的图像压缩。并且GIF可以包含透明区域和多动画。它靠水平扫描像素行找到固定的颜色区域进行压缩,然后减少同一区域中的像素数量。因此GIF 通常适应于卡通、图形、Logo、带有透明区域的图形、动画等。
页面中插入图片可以起到美化的作用。插入图片的标记只有一个,那就是<img>标记。插入图片的时候,仅仅使用<img>标记是不够的,需要配合其它的属性来完成,如下表所示。
                         属性             描述                               src             图像的源文件                               alt             提示文字                               width,height             宽度、高度                               border             边框                               vspace             垂直间距                               hspace             水平间距                               align             排列                               dynsrc             设定avi文件的播放                               loop             设定avi文件循环播放次数                               loopdelay             设定avi文件循环播放延迟                               start             设定avi文件播放方式                               lowsrc             设定低分辨率图片                               usemap             映象地图              图像的源文件属性SRC
配合src属性指定图像源文件所在的路径,就可以完成图像的插入了。
基本语法 <img src="File_name">
语法解释
通过src属性指定路径,File_name为要插入图像的路径。 文件范例:9-1.htm
通过<img>标记的src属性插入图片。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-1.htm -->
03 <!-- 文件说明:插入图片 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>插入图片</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了JPEG格式的图片文件。
                                                   
图像的低分辨率源文件属性LOWSRC
如果用户的浏览器速度很慢,网页设计者可以在页面中为其插入一张低分辨率的图像供显示。
基本语法 <img lowsrc="File_name">
语法解释
通过lowsrc属性指定路径,"File_nname"为要插入图像的路径。 文件范例:9-2.htm
通过<img>标记的lowsrc属性插入低分辨率图像。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-2.htm -->
03 <!-- 文件说明:插入低分辨率图片 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>插入低分辨率图片</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img lowsrc="9-2.JPG">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了一张低分辨率JPEG格式的图片。
                                                   
图像的提示文字属性ALT
提示文字有两个作用。当浏览网页时,如果图像下载完成,鼠标放在该图像上,鼠标旁边会出现提示文字。也就是说,当鼠标指向图像上方的时候,稍等片刻,可以出现图像的提示文字,这用于说明或者描述图像。第二个作用是,如果图像没有被下栽,在图像的位置上就会显示提示文字。
基本语法 <img src="File_name" alt="说明提示文字">
语法解释
说明提示文字的内容中英文均可。 文件范例:9-3.htm
通过<img>标记的alt属性设定图片的提示文字。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-3.htm -->
03 <!-- 文件说明:设定图片的提示文字 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定图片的提示文字</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG" alt="超梦幻劲爆网页Dreamweaver mx 2004、Flash mx 2004、Fireworks mx 2004完美结合,作者最新出版的一本书">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文字说明
第11行设定了图片的提示文字。
                                                   
图像的宽度和高度属性WIDTH、HEIGHT
默认情况下,页面中图像的显示大小就是图片默认的宽度和高度,我们也可以手动更改图片的大小。但是我们建议使用专业的图像编辑软件对图像进行宽度和高度的调整。
基本语法 <img src="File_name" width="value" height="value">
语法解释
图像的宽度和高度的单位可以是像素,也可以是百分比。如果你的显示器是800×600,那你的屏幕就相当于水平方向上有800个像素点的宽度,垂直方向上有600个像素点的宽度。因为网页主要是通过屏幕显示,所以建议编辑者使用像素作为单位。 文件范例:9-4.htm
通过<img>标记的width、height属性设定图片的大小。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-4.htm -->
03 <!-- 文件说明:设定图片的大小 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定图片的大小</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG">
12 <img src="9-1.JPG" width=100 height=140>
13 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
14 </body>
15 </html> 文件说明
第11行设定了图片的大小为默认,第12行改变了图片的宽度和高度。
                                                   
图像的边框属性BORDER
默认的图片是没有边框的,通过属性可以为图像添加边框线。我们可以设置边框线的宽度,但边框的颜色是不可以调整的。当图像上没有添加链接的时候,边框的颜色为黑色;当图像添加了链接时,边框的颜色和链接文字颜色一致,默认为深蓝色。
基本语法 <img src="File_name" border="value">
语法解释
value为边框线的宽度,单位为像素。 文件范例:9-5.htm
通过<img>标记的border属性设置图片的边框。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-5.htm -->
03 <!-- 文件说明:设定图片的边框 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定图片的边框</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG" border="3">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Firewrks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行设定了图片的边框为3像素。
                                                   
图像的垂直间距属性VSPACE
图像和文字之间的距离是可以调整的,这个属性用来调整图像和文字之间的上下距离。此功能非常有用,有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。
基本语法 <img src="File_name" vspace="value">
语法解释
value为图片垂直方向上和文字的距离,单位是像素。 文件范例:9-6.htm
通过<img>标记的vspace属性设定图片的垂直距离。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-6.htm -->
03 <!-- 文件说明:设定图片的垂直间距 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定图片的垂直间距</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG" vspace="30">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行设定了图片的垂直间距为30像素。
                                                   
图像的水平间距属性HSPACE
图像和文字之间的距离是可以调整的,这个属性用来调整图像和文字之间的左右距离。此功能非常有用,有效地避免了网页上文字图像拥挤的排版。其单位默认为像素。
基本语法 <img src="File_name" hspace="value">
语法解释
value为图片水平方向上和文字的距离,单位为像素。 文件范例:9-7.htm
通过标记的属性设定图片的水平距离。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-7.htm -->
03 <!-- 文件说明:设定图片的水平间距 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设定图片的水平间距</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img src="9-1.JPG" hspace="30">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行设定了图片的水平距离为30像素。
                                                   
图像的排列属性ALIGN
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样,只有三种:居左、居中、居右;而相对文字对齐方式是指图像与一行文字的相对位置。     "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同,是指图像底端和文字的底端对齐。     对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。     "中间"(Middle)方式是指图像的中间线和文字的底端对齐。     "绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大,文字前如有小图标,那么图标应该使用"绝对中间"对齐方式。
基本语法 <img src="File_name" align="Top"> <img src="File_name" align="Middle"> <img src="File_name" align="Bottom"> <img src="File_name" align="Left"> <img src="File_name" align="Right"> <img src="File_name" align="Absbottom"> <img src="File_name" align="Absmiddle"> <img src="File_name" align="Baseline"> <img src="File_name" align="Texttop">
语法解释
其中align的属性值如下表所示                          属性值             描述                               Top             文字的中间线居在图像上方                               Middle             文字的中间线居在图像中间                               Bottom             文字的中间线居在图像底部                               Left             图片在文字的左部                               Right             图片在文字的右部                               Absbottom             文字的底线居在图片底部                               Absmiddle             文字的底线居在图片中间                               Baseline             英文文字基准线对齐                               Texttop             英文文字上边线对齐              文件范例:9-8.htm
通过<img>标记的align属性设定图片的排列。
01 <!-- ------------------------------ -->
02<!-- 文件范例:9-8.htm -->
03<!-- 文件说明:设定图片的排列 -->
04<!-- ------------------------------ -->
05<html>
06<head>
07<title>设定图片的排列</title>
08</head>
09<body>
10<h1>主流的网页设计软件</h1>
11<img src="9-1.JPG" align=Left width="100" height="140">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13<hr>
14<img src="9-1.JPG" align=Right width="100" height="140">
15 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
16<hr>
17<img src="9-1.JPG" align=Middle width="100" height="140">
18 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
19 </body>
20</html> 文件说明
第11、14、17行分别设定了图片的排列为居左、居右和文字居中。
                                                   
图像的排列属性ALIGN
图像和文字之间的排列通过align属性来设定。图像的绝对对齐方式和相对文字对齐方式是不一样的。绝对对齐文字的效果和文字的对齐一样,只有三种:居左、居中、居右;而相对文字对齐方式是指图像与一行文字的相对位置。     "基线"(Baseline)、"底部"(Bottom)、"绝对底部"(Absolute Bottom)效果相同,是指图像底端和文字的底端对齐。     对于中文"顶端"(Top)、"文本上方"(TextTop)方式是指图像顶端和文字行最高字符的顶端对齐。     "中间"(Middle)方式是指图像的中间线和文字的底端对齐。     "绝对中间"(Absolute Middle)是指图像的中间线和文字的中间线对齐。"绝对中间"对齐方式用处比较大,文字前如有小图标,那么图标应该使用"绝对中间"对齐方式。
基本语法 <img src="File_name" align="Top"> <img src="File_name" align="Middle"> <img src="File_name" align="Bottom"> <img src="File_name" align="Left"> <img src="File_name" align="Right"> <img src="File_name" align="Absbottom"> <img src="File_name" align="Absmiddle"> <img src="File_name" align="Baseline"> <img src="File_name" align="Texttop">
语法解释
其中align的属性值如下表所示                          属性值             描述                               Top             文字的中间线居在图像上方                               Middle             文字的中间线居在图像中间                               Bottom             文字的中间线居在图像底部                               Left             图片在文字的左部                               Right             图片在文字的右部                               Absbottom             文字的底线居在图片底部                               Absmiddle             文字的底线居在图片中间                               Baseline             英文文字基准线对齐                               Texttop             英文文字上边线对齐              文件范例:9-8.htm
通过<img>标记的align属性设定图片的排列。
01 <!-- ------------------------------ -->
02<!-- 文件范例:9-8.htm -->
03<!-- 文件说明:设定图片的排列 -->
04<!-- ------------------------------ -->
05<html>
06<head>
07<title>设定图片的排列</title>
08</head>
09<body>
10<h1>主流的网页设计软件</h1>
11<img src="9-1.JPG" align=Left width="100" height="140">
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13<hr>
14<img src="9-1.JPG" align=Right width="100" height="140">
15 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
16<hr>
17<img src="9-1.JPG" align=Middle width="100" height="140">
18 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
19 </body>
20</html> 文件说明
第11、14、17行分别设定了图片的排列为居左、居右和文字居中。
                                                   
AVI的源文件属性DYNSRC
使用<img>标记,可以在网页中插入avi格式的文件。
基本语法 <img dynsrc="File_name">
语法解释
通过dynsrc属性指定路径,File_name为要插入图像的路径。 文件范例:9-9.htm
通过<img>标记的dynsrc属性插入avi文件。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-9.htm -->
03 <!-- 文件说明:插入avi -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>插入avi</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img dynsrc="9-9.avi" align="Left" hspace=30 vspace=30 width=200 height=150>
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了avi格式的视频文件。
                                                   
设定AVI文件循环次数属性LOOP
通过loop属性可以设置avi文件的循环次数。
基本语法 <img dynsrc="File_name" loop=value>
语法解释
value的取值可以是数值,也可以为infinite,实现无限次播放。 文件范例:9-10.htm
设置avi文件的循环次数。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-10.htm -->
03 <!-- 文件说明:设置avi循环次数 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置avi循环次数</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img dynsrc="9-9.avi" align="Left" hspace=30 vspace=30 width=200 height=150 loop=infinite>
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromweaver公司的网页设计三剑客软件Dreamweaver、Flash、Fierworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了avi格式的视频文件,并设置其循环次数为无限次。
                                                   
设定AVI属性文件循环延时LOOPDELAY
通过loopdelay属性可以设置影片重复播放所停留的时间。
基本语法 <img dynsrc="File_name" loop=value loopdelay=timevalue>
语法解释
timevalue的取值以秒数为单位进行设置。 文件范例:9-11.htm
设置影片重复播放所停留的时间。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-11.htm -->
03 <!-- 文件说明:设置avi停留时间 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置avi停留时间</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img dynsrc="9-9.avi" align="Left" hspace=30 vspace=30 width=200 height=150 loop=2 loopdelay=0>
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了avi格式的视频文件,并设置其循环为两次,每次循环之间的停留时间为0秒。
                                                   
设定AVI文件播放方式属性START
通过start属性可以设定avi文件的播放方式。
基本语法 <img dynsrc="File_name" start=value>
语法解释
start属性的属性值如下表所示
                         属性值             描述                               Fileopen             网页打开时即播放                               Mouseover             当鼠标滑动到AVI文件上方后播放              文件范例:9-12.htm
设置avi播放方式。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-12.htm -->
03 <!-- 文件说明:设置avi播放方式 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>设置avi播放方式</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 <img dynsrc="9-9.avi" align="Left" hspace=30 vspace=30 width=200 height=150 start=mouseover>
12 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
13 </body>
14 </html> 文件说明
第11行插入了avi格式的视频文件,并设置当鼠标滑动到其上方时开始播放。
                                                   
图片的超链接
图片的链接标记和文字是相同的,都是<a>标记。和文字不同的是,一张图片的链接地址可以是唯一,也可以是多个。 文件范例:9-13.htm
通过<a>标记为图像建立两个链接,分别链接到另外两个html页面中。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-13.htm -->
03 <!-- 文件说明:建立图像链接 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>建立图像链接</title>
08 </head>
09 <body>
10 <h1>主流的网页设计软件</h1>
11 目前,网页技术进入了一个新的阶段,现在的网页再也不是图片的堆积和枯燥无味的文本了,人们现在追求的是网页的动态效果和交互性。而Macromedia公司的网页设计三剑客软件Dreamweaver、Flash、Fireworks正是交互性网页设计的杰出代表,其最新版本mx 2004继承了前期版本的优点,进行了功能的进一步整合,非常适合于网页设计和网站建设的需要。<p>
12 <a href="9-13-1.htm"><img src=9-13-1.JPG width="100" height="100" border=0>Dreamweaver mx 2004</a>
13 <a href="test/9-13-2.htm"><img src=9-13-2.JPG width="100" height="100" border=0>Flash mx 2004</a>
14 </body>
15 </html> 文件说明
第12行和第13行是图像和文字的链接,并设定了图像的宽度、高度及宽度为0的边框。 文件范例:9-13-1.htm
这个文件是"网页制作软件Dreamweaver mx 2004"页面,通过<a>标记为图像建立返回到9-13.htm页面的链接。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-13-1.htm -->
03 <!-- 文件说明:内部链接文件之一 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>内部链接文件之一</title>
08 </head>
09 <body>
10 <h1>Dreamweaver mx 2004</h1>
11 Dreamweaver mx 2004作为网页设计软件的代表,具有站点管理和页面制作两大核心功能。如果你也拥有织梦的理想,那么这个软件无疑是帮助你实现梦想的最好手段。完全的可视化编辑、优秀的代码控制、完整的站点规划和管理、超乎寻常的动态效果设计,这些都为设计人员提供了得心应手的途径。mx 2004版本的软件将动态网站和传统的静态页面功能进行了更进一步的整合,无疑为制作网站提供了更多的实现方式。<p>
12 <a href="9-13.htm"><img src="9-13-4.JPG" border=0>返回</a>
13 </body>
14 </html> 文件说明
第12行定义了图像和文字到9-13.htm同级页面的链接。 文件范例:9-13-2.htm
这个文件是"网页动画软件Flash mx 2004"页面,通过<a>标记建立返回到9-13.htm页面的图像文字链接。
01 <!-- ------------------------------ -->
02 <!-- 文件范例:9-13-2.htm -->
03 <!-- 文件说明:内部链接文件之二 -->
04 <!-- ------------------------------ -->
05 <html>
06 <head>
07 <title>内部链接文件之二</title>
08 </head>
09 <body>
10 <h1>Flash mx 2004</h1>
11 Flash mx 2004作为网页矢量交互动画软件的代表,提供了图形绘制、动画制作和交互三大功能。掌握了这个软件的核心,也就有能力在网上冲浪的同时,充当一把闪客的角色。越来越多的个人、商业网站采用Flash技术,广告banner、动画片头、mtv、交互游戏,广阔的应用为Flash的学习者提供了广泛的发展平台,学习Flash mx 2004软件更是一个具有诱惑力的过程。
12 <p>
13 <a href="../9-13.htm"><img src="../9-13-4.JPG" boredr=0>返回</a>
14 </body>
15 </html> 文件说明
第13行定义了到上一级页面的图像文字链接。