标题标题  显示论坛会员列表名单  搜索论坛搜索  HelpHelp
  注册注册  登入登入
ASP教学区
 DoReMe : ASP教学区
主题 话题: 第五章 初级HTML 回复发表新主题
作者
贴子内容 << Prev Topic下一个主题 >>
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回复: 58
Posted: 2004/11月/16 12:48下午 | IP记录 引用 koioggo

在网页中加入图象

在网页中加入图象是很简单的,它通过<IMG>标识符来实现,下面是个例子:

<HTML>

<HEAD>

<TITLE> Image Example </TITLE>

</HEAD>

<BODY>

<IMG SRC=」myimage.gif」>

</BODY>

</HTML>

在此例中,图象myimage.gif将在网络浏览器上显示出来。<IMG>标识符的SRC属性指明了要显示的图象 文件。你可以使用绝对或相对URL来指定一个图象文件,图象文件可以不是你本机上的文件,可以是环球网上任何一个地方的文件。

例如,如果你的机器与Internet相连,你可以使用下列代码在你的网页上显示一幅Active Server Pages网站上的图象:

<HTML>

<HEAD>

<TITLE> External Image </TITLE>

</HEAD>

<BODY>

<IMG SRC=」http://www.aspsite.com/testimage.gif」>

</BODY>

</HTML>

<IMG>标识符有许多有用的属性。例如,使用WIDTH和HEIGHT属性你可以在图象被读入之前通知浏览器图象 的大小。虽然指定图象的长宽并不会加快图象读入的速度,但指定这两个值会让浏览器在读入图象时预先在网页上为图象留下空地,结果 是网页显示得快了,因为浏览器不用在图象读入以后再一次计算图象周围其它元素的位置了。

注意

要养成使用<IMG>的WIDTH和HEIGHT属性的习惯,因为使用它们会使网络浏览器显示变快。

<IMG>标识符另一个有用的属性是ALT,使用ALT你可以指定替代图片显示的文本。一些用户(虽然我得承认这样 的人不多)在使用网络浏览器时会关掉调入图象的选项,当这些人浏览网页时,他们看不见图片,看到的是由ALT属性指定的替代文本 。

ALT属性还可以创建弹出式文字,当你的鼠标指针移到图象上的某一位置时会弹出来。这在Internet Explorer3.0及4.0和Netscape Navigator4.0上都能实现。下面是一个使用ALT属性的例子:

<HTML>

<HEAD>

<TITLE> Image With An Alternative </TITLE>

</HEAD>

<BODY>

<IMG SRC=」myimage.gif」 WIDTH=10 HEIGHT=12 ALT=」This is my image!」>

</BODY>

</HTML>

<IMG>标识符另一个有用的属性BORDER,这个属性在Netscape和Microsoft的浏览器上会有不 同的效果。在Netscape Navigator上,BORDER属性可以用来为一幅图象加黑边框,当你想让图象在一个框中显示时这是很有用的(见图5.11 )。

 

图5.11 Netscape Navigator中具有边框和空白的图象

另一方面,在Internet Explorer上使用时,BORDER属性为图象加了一个透明边框(见图5.12),理论上,当要确保网页上在图象附近的其它 元素与图象间隔一定距离时,这是很有用的。但是,在Netscape Navigator上,要取得BORDER属性的效果,用下面两个标识符来取代会更好些。

它们是HSPACE和VSPACE属性,它们指定图象周围水平和竖直方向的空间大小,这两个属性在Microsoft和Nets cape的浏览器上都能工作,下列的例子使用了BORDER、HSPACE和VSPACE属性:

<HTML>

<HEAD>

<TITLE> Image Attributes </TITLE>

</HEAD>

<BODY>

<IMG SRC=」myimage.gif」 WIDTH=10 HEIGHT=12 ALT=」This is my image!」

BORDER=5 HSPACE=10 VSPACE=10>

This is some text.

</BODY>

</HTML>

注意句子:This is some text,在图象右边界10个象素远的地方显示出来,在Netscape Navigator上,这句话在图象黑框右边界的10个象素远处显示,而在Internet Explorer,这句话在图象透明边框的右边界10个象素处显示。

 

图5.12 Microsoft Internet Explorer中具有边框和空白的图象

<IMG>标识符的最后一个有用的属性是ALIGN,它用来根据基行的文本定位图象,通常这个属性可取五个值:to p、middle、bottom、left和right。下面的例子使用了这几个值(见图5.13):

<HTML>

<HEAD>

<TITLE> Image Alignment </TITLE>

</HEAD>

<BODY>

<IMG SRC=」myimage.gif」> This image is not aligned

<P>

<IMG SRC=」myimage.gif」 ALIGN=」top」> This image is top aligned

<P>

<IMG SRC=」myimage.gif」 ALIGN=」middle」> This image is middle aligned

<P>

<IMG SRC=」myimage.gif」 ALIGN=」bottom」> This image is bottom aligned

<P>

<IMG SRC=」myimage.gif」 ALIGN=」left」> This image is left aligned

<P>

<IMG SRC=」myimage.gif」 ALIGN=」right」> This image is right aligned

</BODY>

</HTML>

在Netscape和Microsoft的浏览器中这五个值的效果是完全一样的,图象的定位是有基行文本的位置决定的。例如,当 ALIGN属性的值是「top」时,图象与文本在同一行上显示但上端对齐。

 

图5.13 使用不同对齐方式的图象

 

注意

Netscape为图象的ALIGN属性引入了一些特殊的值。然而我不支持你使用它们,因为它们只在Netscape Navigator上起作用,详细信息可参阅附录D。

Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回复: 58
Posted: 2004/11月/16 12:52下午 | IP记录 引用 koioggo

用图象建立链接

你可以用图象来在网页间建立链接,这和文本是一样的。通常当你建立一个超链接时,你用<A>标识符包含你要链接的地 址文本,你也可以将图象放于<A>标识符间,如同文本一样:

 

<HTML>

<HEAD>

<TITLE> Image Attributes </TITLE>

</HEAD>

<BODY>

<A HREF=」http://www.yahoo.com」><IMG SRC=」myimage.gif」></A>

</BODY>

</HTML>

在此例中如果用户用鼠标点击图象myimage.gif,那么Yahoo!的主页就会被调入(见图5.14)。

 

图5.14 作为链接使用的图象

注意作为链接用的图象显示时的边界,它的颜色与超链接的颜色一样是可以控制的──通过使用<BODY>标识符的LI NK、VLINK和ALINK属性(见前一节「控制链接的颜色」)。然而大部分情况下,你不想在图象周围显示一个边框,要去掉这 个边框,使用<IMG>标识符的BORDER属性,将边框的宽度设为零。

Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回复: 58
Posted: 2004/11月/16 12:53下午 | IP记录 引用 koioggo

使用图象作为背景

你可通过使用背景图象而使你的网页取得显著改观,背景图象将会在你网页上的其它所有的元素底下平舖开来。背景图象越小,重复的次 数越多,看下面的例子:

<HTML>

<HEAD>

<TITLE> Background Image </TITLE>

</HEAD>

<BODY BACKGROUND=」mylittleimage.gif」>

Hello World!

</BODY>

</HTML>

当这个HTML文件在网络浏览器上显示时,图象mylittleimage.gif在水平和竖直方向上重复排列开来(见图5.1 5)。如果你使用较大的图象,图象不会平舖(见图5.16),你在这两幅图中可看见两种效果。

 

图5.15 小图片在屏幕上平舖

注意

为网页选择背景图象时要小心,选择一个糟糕的背景图象会使显示在它上面的文字无法阅读,如果网页上有大量的文本,最好不要选择背 景图象。

 

图5.16 大图片在屏幕上平舖

使用背景图象的另一个有趣效果是在网页左端显示一个彩色竖条,这个效果是通过使用一幅只有一个象素高但有1200个象素宽的图象 实现的。这幅图象的前300个象素是一种颜色,而后900个象素是另一种颜色,当这幅图象在屏幕上平舖时,由于它的宽度比屏幕宽 ,因此只在竖直方向上重复(如图5.17)。

 

图5.17 具有两列不同色彩的背景

Microsoft在<BODY>标识符里添加了一个只在Internet Explorer上起作用的属性。通常滚动一个有背景图象的网页时,背景图象也跟著滚动,然而有时你希望背景图象固定不动。你可 使用<BODY>标识符的BGPROPERTIES属性来实现这一效果。例如,如果你想让图象myimage.gi f固定不动,你可使用下面的语句:

对于短小的网页,这个附加的属性没有什么特别的用处。但如果你的网页很长,需要滚动时,你就会注意到背景图象没有滚动。

即使你在使用背景图象,你还应该使用<BODY>标识符的BGCOLOR属性来设置网页的背景色,与所有图象一样, 读入背景图象也是耗费时间的,当读入背景图象时,将会显示背景色直到图象全部读入。

Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


加入: 2004/5月/22
Online Status: Offline
回复: 58
Posted: 2004/11月/16 12:53下午 | IP记录 引用 koioggo

创建快速读入的带图象的网页

在网页中使用图象的问题在于读入网页的速度,如果你在网页中正确地使用图象,这个问题不会很突出。要创建快速读入的带图象的网页 ,请遵循下面的原则:

在你的网页中尽可能地使用同一幅图象。当浏览器读入一幅图象时,它会在缓存中保留一幅图象的拷贝。如果你在许多页中都使用同一幅 图象,浏览器从Internet上读入这些页时就不会每次都读入这个图象文件。当你读入同一个图象文件时,你应确保<IM G>标识符的SRC属性的值在每一页上都是相同的。

减少图象中调色板的大小。大部分作图软件都允许你指定GIF图象的调色板大小,尽可能使用最小的调色板。注意这与减少图象中颜色 的数目是不同的。例如,如果你在一幅只有两种颜色的图象中建立了一个256色的调色板,这将是很低效的。

一定要使用<IMG>标识符的WIDTH和HEIGHT属性。如果你不指定这两个属性,浏览器就不会知道该为一幅图 像留多大的空地。在这种情况下,当图象全部被读入后,浏览器会重画整个网页。而且,当你的网页上有很多图象时,浏览器会为每一幅 图象一次又一次地重画屏幕。

尽量使用交错的GIF图象。交错GIF图象在屏幕上显示出来时看起来较快,因为在整个文件都传输到浏览器之前,它们就开始显示了 。这种心理感觉是很有效的,你应该经常使用它们。

你尽可能地不要去选择那些有许多不同色彩的图象。具有大量同一色彩的图象传输起来会较快。任何事都是均等的,图象中色彩越多,需 要传输的信息就越多。通常,简单的图片总是比复杂的图片效果要好。

不要在网页中使用太多的图片。在特定情况下,浏览器需要为网页上的每一幅特定的图片向服务器发出单独的请求。将许多相邻的小图片 组合成一个大图片要比单独传输这些小图片的效果要好。通常,当你能将许多小图片组合成一个大图片时,你就应该这样做。

 

 

 

小结

本章讲述了许多内容,你学会了所有基本的HTML标识符,你现在应该知道怎样创建你自己的网页了。

你学会了怎样使用颜色,怎样使用HTML标识符来设定页格式和文本格式,你还学会了怎样使用超链接将你的网页与其它网页链接起来 ,现在你还知道怎样有效地将图象加入你的网页。

在这一点上,你应当感受到HTML的灵活性和强大功能,只要使用本章所介绍的HTML标识符,你就可以建立很复杂的网页。然而我 们在下一章中还会介绍一些更令人兴奋的标识符,你将学习怎样在你的网页中建立窗体、列表和表格。

Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 

如果你想回复的话你必须首先 login
如果你还没有注册的话你必须首先 注册

<< 上一页 页 of 3
  回复发表新主题
显示可打印的页面 显示可打印的页面

论坛跳转
不能 张贴新论题在这个讨论版
不能 回应论题在这个讨论版
不能 删除你的发言在这个讨论版
不能 编辑你的发言在这个讨论版
不能 新增投票标题在这个讨论版
不能 在这个讨论版投票

Edit by doreme Forums version 2004
Welcome ©2001-2004 doreme Guide

This page was generated in 0.1875 seconds.

 
保养品
保养品, Skin Care
www.elady.tw
美材批发
美材, Cosmetic
www.elady.tw/beauty_org
保养品批发
名牌保养品、保养品批发
gb.perfume.com.tw/skincare
饰品批发
饰品、饰品批发
gb.perfume.com.tw/ornament