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


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

HTML中基本的文本格式

只包含单一文本的网页是很单调的，要建立一个具有吸引力的网页，你需要控制文本的大小、颜色、字体等一系列属性。在本节中，你将 学习如何控制这些属性。

使用字体

<FONT>标识符在本章前部分已简单提起过，它具有三个属性：SIZE、COLOR和FACE。下面是个使用SI ZE属性的例子：

<HTML>

<HEAD>

<TITLE> Font Sizes </TITLE>

</HEAD>

<BODY>

<FONT SIZE=1> I am small. </FONT>

<P>

<FONT SIZE=7> I am big! </FONT>

<P>

<FONT SIZE= +1> I am a little bigger than the base font. </FONT>

<P>

<FONT SIZE= -1> I am a little smaller than the base font. </FONT>

<P>

</BODY>

</HTML>

你可以通过在1~7间选个数来设定SIZE属性的值来指定文本的大小，1是最小的字体，而7是最大的。这是一个指定文本绝对大小 的方法。另外你也可指定文本的相对大小，如果你仔细察看下面的代码，你能发现SIZE属性的值被设为+1，就告诉浏览器以比基本 字体大一号的字体来显示文本。

基本字体的大小由<BASEFONT>标识符来指定，你也可以不使用这个标识符，如上例所示，这种情况下基本字体就 由浏览器来设定。

<BASEFONT>标识符与<FONT>的用法相似，只不过<BASEFONT>对整个 文件都起作用，<BASEFONT>标识符只能在文件中使用一次，并应该放置于所有<FONT>标识符 之前，下面是一个使用这个标识符的例子：

<HTML>

<HEAD>

<TITLE> Base Font </TITLE>

</HEAD>

<BODY>

<BASEFONT SIZE=6>

I am big.

<P>

<FONT SIZE= +1> I am bigger! </FONT>

</BODY>

</HTML>

I am big. 将以<BASEFONT>设置的文本大小来显示。大小是6。而I am bigger! 显示出来字体要大一号，是7。

你不能保证你网页上的文本将会以你设定的绝对大小来显示，最终在浏览器上显示的文字的大小可以由用户来设定，用户有最终决定权。 因此当你的网页在浏览器上显示时，所有的文本可能比你所期望的要大或小。

你可以控制你网页上的文本的颜色，这可通过设置<FONT>标识符的COLOR属性的值来完成，如下所示：

<HTML>

<HEAD>

<TITLE> Color Fonts </TITLE>

</HEAD>

<BODY>

<FONT COLOR=」GREEN」> I am green. </FONT>

<P>

<FONT COLOR=」RED」> I am red. </FONT>

</BODY>

</HTML>

在此例中，第一个句子的颜色是绿色，而第二个句子是红色。使用颜色的名字是指定文本颜色的简单方法。但是，为了保障网页在所有浏 览器上的兼容性，你应当使用使用RGB值（附录D列出了所有颜色及其RGB值）

<FONT>标识符还有一个比较有用的属性FACE，使用它可以指定文本的字体，下面是一个例子：

<HTML>

<HEAD>

<TITLE> Font Face </TITLE>

</HEAD>

<BODY>

<FONT FACE=」Courier」> I am Courier. </FONT>

<P>

<FONT FACE=」Courier」> I am Arial, but if that does not work,

I am Courier. </FONT>

</BODY>

</HTML>

当在网页上显示这个HTML文件时，第一个句子的字体是Courier，而第二个句子是Arial。当然，可能会是这样的。浏览 器软件在它运行的机器上尽可能的做的更好。不是所有的计算机都有某一种字体。例如，如果这台计算机上没有Arial字体，那么浏 览器就会使用FACE属性指定的下一个字体，再上例中就会使用Courier字体。你可以尽可能的列出你所需要的替换字体。

对我个人而言，我经常使用<FONT>标识符，但是你应当认识到它有某些限制。当使用它时，你应当注意背景和前景的 兼容性问题。

相对来说，<FONT>标识符是比较新的，在旧版的浏览器上它不会起作用。例如在Netscape Navigator 3.0上可以识别<FONT>的SIZE和COLOR属性，但却不能识别FACE属性。其它的浏览器干脆就不识别& lt;FONT>标识符。

<FONT>标识符是当前HTML规范中的一部分，但FACE属性却不是。进一步说，在不远的将来，<FON T>标识符可能会从HTML规范中去掉，<FONT>标识符的所有功能可能会被cascading style sheets（见第七章）代替。当你使用这个有用的标识符时应该牢记这些兼容性问题。

建立大字体及小字体

如果你不想使用<FONT>标识符来控制文字的大小，你可以使用<BIG>和<SMALL> ;标识符来显示大字体或小字体。显而易见，<BIG>使你的文字比正常文字看起来更大，而<SMALL> ;使你的文字看起来比正常文字要小。下面是一个例子：

<HTML>

<HEAD>

<TITLE> Big and Small </TITLE>

</HEAD>

<BODY>

<BIG> How big of you. </BIG>

<P>

<SMALL> How small of you. </SMALL>

</BODY>

</HTML>

加入标题

标题对于把一段文字分成许多小节是很有用的，它也可用来控制在网页上显示时的字体大小（可代替<FONT>标识符的 SIZE属性）。下面是一些使用<H>标识符的例子：

<HTML>

<HEAD>

<TITLE> Headings </TITLE>

</HEAD>

<BODY>

<H6> I am a small heading. </H6>

<H4> I am a medium heading. </H4>

<H1> I am a large heading. </H1>

</BODY>

</HTML>

你通过给标指定不同的数字来规定他们的大小，有６种大小的标题。例如由<H1>包含的文字在在浏览器上显示是最大的 ，而由<H^>包含的文字显示出来最小。

注意你并不需要使用<P>标识符来分行，因为紧跟在<H>后面的文字会自动从一个新行开始显示，因此就 用不著使用<P>了。

从技术上来说，由<H>包含的文字说明了它们的重要性，而并不仅仅是尺寸不同。理论上，浏览器不应当把这种标题的重 要性仅仅以字体尺寸来反映，而应当以其它方式（如高亮度、加黑等）。然而在实际使用中，我用过的所有浏览器都把<H> ;看作尺寸标识符。
Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


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

黑体、斜体、下划线及删除线

如我们前面所说的<B>标识符使文字以黑体显示，要让文字以斜体显示，应把文字置于<I>之间。你也可 通过<U>来给文字加下划线。最后如果你需要删除线（有一道横线穿过的文本），应该使用<STRIKE> ;或<S>标识符。下面是一些例子：（图5.5是在浏览器上的显示结果）

<HTML>

<HEAD>

<TITLE> Text Formatting </TITLE>

</HEAD>

<BODY>

<B> To boldly go where no? </B>

<P>

<I> Really? Really? Are you sure? </I>

<P>

<U> I am not a hypertext link. </U>

<P>

<S> Strike One! </S>

<P>

<STRIKE> Strike Two! </STRIKE>

</BODY>

</HTML>

 

图5.5 黑体、斜体、下划线及删除线的文本

要注意<STRIKE>和<S>标识符，如果你想在旧版的浏览器上有好的兼容性，就使用<STR IKE>。如果你想让你的网页在未来版本的浏览器上正确显示，则使用<S>。

注意

原则上不要去使用<U>标识符，不要在你的HTML文件中使用——通常网页中带下划线的文字表示这是一个超连接，使 用<U>会给用户带来困惑，如果你想强调某些文本，就使用<I>吧。

上标和下标

在某些不常见的情况下，你可能要使用上标和下标（出现在正常文本上端或下端的文字，如E=mc2和H2o）。你可以使用< SUP>和<SUB>标识符来实现。下面是怎样使用这两个标识符的例子：

<HTML>

<HEAD>

<TITLE> Superscript and Subscript </TITLE>

</HEAD>

<BODY>

<SUP> I』m feeling high. </SUP>

<P>

<SUB> I』m feeling low. </SUB>

</BODY>

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


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

闪烁的文本

在没有哪里个HTML标识符比<BLINK>更令人讨厌的了。人们通常一看到闪烁的东西就不加思索的点击他们的浏览器 的返回键了。只有Netscape Navigator才支持这一标识符，它也不是HTML 3.2规范中的一部分。Microsoft也拒绝在它的Internet Explorer中支持这个标识符。下面是一个使用<BLINK>的例子：

<HTML>

<HEAD>

<TITLE> Blinking Text </TITLE>

</HEAD>

<BODY>

<BLINK> Blink, blink </BLINK>

</BODY>

</HTML>

如果你想要人们再次参观你的网点，你可要小心地使用这一标识符。

加入特殊字符

某些情况下，你要输入一些键盘上没有的字符。例如你要输入一些版权及商标符号，或使用一些外文符号，你可以通过字符码的在你的网 页中加入这些特殊字符。如下例所示（见图5.6）：

<HTML>

<HEAD>

<TITLE> Special Characters </TITLE>

</HEAD>

<BODY>

I am copyrighted &copy;

<P>

I am a registered tradmark &reg;

<P>

My name is Kurt G&ouml;del

</BODY>

</HTML>

在这个例子中，表达式&copy产生了版权符号，&reg产生了注册商标符号，而&ouml在小写字母 o上产生了德语中的曲音符号（关于这些特殊字符的全部列表，可参阅附录D）。

 

图5.6 版权、注册及音标符号

当使用这些特殊字符表达式时，你需要全部用小写字母来输入。例如在Netscape Navigator （版本3.0或4.0）上，表达式&Copy是不会产生版权符号的，而只会显示出实际上你输入的东西。

这些特殊字符的另一个应用是用来产生大于及小于符号（< 和 >），你可能会奇怪键盘上明明有这两个字符，为何还要通过特殊字符来显示它们？问题就在于如果你直接在你的HTML文件中 输入< 和 >符号，浏览器会将他们解释成HTML标识符，而不是< 和 >字符。因此你必须使用特殊字符，如下例所示：

<HTML>

<HEAD>

<TITLE> Special Characters </TITLE>

</HEAD>

<BODY>

HTML Lesson 1:

<P>

How to use the &lt;BR&gt; tag.

</BODY>

</HTML>

在此例中，你输入&lt和&gt来产生大于和小于符号（见图5.7）。如果你想在你的网页上显示一个HTML标 识符，而不是使用它，那么你就得使用这两个表达式。

 

图5.7 显示HTML标识符

最后一个值得一提的特殊字符是空格。假如你想缩进一段文本的第一句话，实现这一目的的一个方法是使用特殊表达式&nbs p，如下例所示：

<HTML>

<HEAD>

<TITLE> Creating Space </TITLE>

</HEAD>

<BODY>

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;I am the first sentence in this paragraph

and I am indented. <BR>

I am the second sentence and I am flush left.

</BODY>

</HTML>

通过在此行插入五个空格字符，你就获得了五个字符宽度的缩进。

使用特殊字符要小心，虽然现版的浏览器软件都能使用它们，但当你在不支持他们的浏览器上使用时，你就会得到错误的结果。通常一个 浏览器不能识别HTML标识符时，它就会忽略它，而不会造成显示上的混乱。然而，特殊字符不是真正的HTML标识符，当浏览器不 能识别它们时就会在屏幕上显示出你实际输入的东西，这就变得特别难看了。

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


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

连接HTML页

如果不存在超连接，环球网就不算是网络了。超连接使你能从一个HTML文件连到另一个。你只需用鼠标轻轻点一下就能从一个网页跳 到另一个，而不费一点功夫。在本节中，你将学习怎样把你的网页连到全球网上去，当然第一步你需了解Internet地址是如何工 作的。

理解Internet地址

你可以在您的网络浏览器的地址框中输入http://www.hotwired.com来参观HotWired的网点。当年输入时http://www.hotwired.com时，你实际上在输入一个统一资源定位器（URL），URL也可被看作是网页的地址，虽然它们也可以是其它类型文件的地址。

注意

一般地，URL的发音是「You are Elle」，而不是earl 。

一个URL包含三个部分：

第一部分告诉浏览器你将使用何种网络协议与Internet进行通信。当使用网络浏览器时，你经常使用超文本传输协议（HTTP ），因为通常你要接收HTML文件，而HTTP是在Internet上从一台计算机传输文件到另一台计算机的协议。

URL的第二部分提供你想要连接的资源的域名。例如，因为HotWired在Internet上注册了一个域名：www.hotwired.com，你就可以在你的浏览器的地址条中输入http://www.hotwired.com来获得这个网点的主页。

通常HotWired的网点有不止一个网页，实际上，大部分的商业网址都有几十到几百个网页，它们被组织在不同的目录下。如果你 要浏览HotWired站点上的某一特定网页，而不是它的主页，那么你就要提供附加的地址信息，在URL的第三部分，你就要提供 你感兴趣的某一HTML文件的位置。

假如您想浏览HotWired网点的一个名为new.cfm的文件，在这种情况下，你可以在浏览器的地址框中输入http://www.hotwired.com/new.cfm来获得这一特定的HTML文件。URL的最后一部分就指明了你所感兴趣的HTML文件。

通常，HTML文件在网点上是组织在不同的子目录下的。例如，HotWired网点上有两个名为new和old的子目录，每个目 录下都有许多文件，要想浏览new子目录下的HTML文件new.cfm，你就要输入： http://www.hotwired.com/new/new.cfm 。如果这个文件被安置在old目录下，你就要输入：http://www.hotwired.com/old/new.cfm。可见，地址很快就变得很长了，这也是为什么超连接非常重要的原因。
Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


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

网点间的联结

将你的网页与环球网上的其它网页相连，你将要使用一种称为超文本定位器的东西，你可以使用<A>标识符来建立一个超 文本定位器。下面的例子说明了怎样在你的网页中与HotWired的网点相连接：

<HTML>

<HEAD>

<TITLE> Inter-site Anchor </TITLE>

</HEAD>

<BODY>

<A HREF=http://www.hotwired.com> HotWired </A>

</BODY>

</HTML>

　

注意<A>是个容器标识符，由它所包含的文字是一个超连接。在此例中，浏览器上显示出的HotWired带有一道下 划线，这就告诉用户这是一个超连接，如果用鼠标点击这个字符，那么HotWired网点的主页就会在你的浏览器上显示出来。

你在<A>的HREF属性中提供网页的地址，这个地址可以是世界上任何一个网点的任何一个网页的URL。你可以很轻 松的将你的网页连接到香港的网点上或是加利福尼亚的网点上。

注意

一般而言，你并不需要取得其它网点的作者的允许来将你的网页与他们的相连，大部分网页制作者都希望有尽可能多的连接到他们的网页 上，在你的网页上加入与他们主页的超连接，实际上是增加了他们网页的潜在客户。

一个HTML文件可以根据你的需要加入超连接。例如，你需要在一个网页上连接到一些Internet上的搜索引擎，你可以输入如 下的代码：

　

<HTML>

<HEAD>

<TITLE> Inter-site Anchor </TITLE>

</HEAD>

<BODY>

<A HREF=http://www.yahoo.com> Yahoo </A>

<P>

<A HREF=http://altavista.digital.com> Alta Vista </A>

<P>

<A HREF=http://www.excite.com> Excite </A>

</BODY>

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


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

在网点内部连接

你的网点上可能不只一个网页，而且你希望你的网点的用户能够轻松的从一页跳到另一页，要实现这一点，你需要把你网点中的页连接在 一起。在网点内部建立连接与在网点间建立连接是一样的。表5.1和5.2 显示了两个HTML文件，分别叫this.cfm和that.cfm，它们通过<A>标识符互相连接在一起：

　

表5.1 文件this.cfm

<!-- This -->

<HTML>

<HEAD>

<TITLE> Inter-site Anchor </TITLE>

</HEAD>

<BODY>

<A HREF=」that.cfm」> That </A>

</BODY>

</HTML>

　

　

表5.2 文件that.cfm

<!-- That -->

<HTML>

<HEAD>

<TITLE> Inter-site Anchor </TITLE>

</HEAD>

<BODY>

<A HREF=」this.cfm」> This </A>

</BODY>

</HTML>

　

如果你将这两个文件存在同一个目录下，并起名为：this.cfm和that.cfm，那么你用鼠标点机this，就连接到th is.cfm，反之亦然。

注意<A>的HREF属性的值，这不是一个完全的Internet地址，因为它仅仅提供了HTML文件的名字而没有 指明协议和域名。一个完整的Internet 地址称为绝对URL，而此例中的部分地址被称为相对URL。

你当然可以使用绝对URL来指定一个HTML文件，但如果你是在同一台计算机或是同一个网点中建立连接，还是使用相对URL会较 好些。这不仅仅是因为相对地址短小简单，而

且当以后将你的HTML文件移入一个新的子目录中时会方便些。

假设你的网点上有一个目录叫maindir，在此目录下有两个子目录称为subdir1和subdir2，this.cfm文件 放于subdir1下，而that.cfm 放于subdir2下，使用下面所述的绝对URL和相对URL您可以在this.cfm和that.cfm间建立连接：

<-- This -- >

<HTML>

<HEAD>

<TITLE> Inter-site Anchor </TITLE>

</HEAD>

<BODY>

<A HREF=」http://www.yourdomain.com/maindir/subdir2/that.cfm」> That </A>

<P>

<A HREF=」/maindir/subdir2/that.cfm」> That </A>

<P>

<A HREF=」../subdir2/that.cfm」> That </A>

</BODY>

</HTML>

此例中的三个URL地址都能连接到正确的文件。第一个地址使用了that.cfm的绝对URL，只有当that.cfm文件是存 于maindir的subdir1子目录下时它是起作用的。

第二个地址使用了相对URL，因为this.cfm和that.cfm存在于同一个网点上，不再需要指明域名了。实际上，，如果 你网点的域名变更了，或是你将这些HTML文件从一台网络服务器上传到了另一台上，this.cfm和that.cfm间的连接 仍然是有效的。

第三个地址也用了相对URL，相对地址 ../subdir2/that.cfm中的两个圆点（..）表明当前文件所在目录的父目录。由于this.cfm的父目录是m aindir，因此这个URL就等效于/maindir/subdir2/that.cfm，这也是个正确的URL。

相对URL一般都比绝对URL要好，因为使用相对URL对于网点目录结构的改变时适应性更强，不会像绝对地址那样会造成连接的失 败。如果你将目录maindir改为别的名字，上例中的第三个地址仍能正确工作。甚至你将maindir及其下的所有子目录都移 到另一新的目录下，这个地址仍是正确的，因此应尽量使用相对地址。

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


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

网页内部的联结

有时你需要跳到同一网页的某个特定位置去，这种超连接也是很有用的。例如，你的网页顶部是一张内容目录，希望用户只要用鼠标点一 下目录上的特定部位就能跳转到文档的相应章节去。你可以使用<A>标识符来建立这种超连接。表5.3就是一个例子：

　

表5.3 目录表的连接

<HTML>

<HEAD>

<TITLE> Linking Within A Web Page </TITLE>

</HEAD>

<BODY>

<H1> Contents </H1>

<A HREF=」#section1」> Section Ⅰ </A>

<BR>

<A HREF=」#section2」> Section Ⅱ </A>

<P>

<A NAME=」#section1」> Section Ⅰ </A>

<BR>

This is the first section.

<P>

<A NAME=」#section2」> Section Ⅱ </A>

<BR>

This is the second section.

<A HREF=」that.cfm」> That </A>

</BODY>

</HTML>

　

在此例中，网页的顶部是两部分的目录，如果用鼠标任点一个，就会立即跳转到文档的相应部分中去（见图5.8）。

你可使用<A>的NAME属性在文档中建立定位，当你使用NAME属性时，你建立的不是一个超连接，而是一个超连接 所连接的目标。你可以在网页中根据需要建立许多定位，并为每个定位取你喜欢的名字。

要建立一个指向定位的超链接，你可以使用HREF属性，当然，你必须在你要链接的定位的名称前加上符号＃。在上述例子中，标识符 <A HREF=」#section1」>链接到文档中名为section1的定位。

 

图5.8 与目录连接

如果你需要，你可以为同一个定位指明多个超链接。如果你的网页很长，则这将是很有用的。例如你要为用户提供一个简单的办法快速回 到文档的顶部，下面的例子说明了如何去做：

<HTML>

<HEAD>

<TITLE> Multiple Links Within A Web Page </TITLE>

</HEAD>

<BODY>

<A NAME=」TOP」> Welcome </A>

…some long text…

<A HREF=」#top」> Back To Top </A>

…some more long text…

<A HREF=」#top」> Back To Top </A>

</BODY>

</HTML>

你也可以用在另一个HTML文件中的<A>标识符建立对一个定位的超链接。例如，你已经在that.cfm中建立了 一个定位称作there_in_that，可以在this.cfm使用下面的语句来建立一个指向此定位的超链接：

<A HREF=」that.cfm #there_in_that」> Go There </A>

当用户浏览this.cfm时，用鼠标点击Go There，网页就会眺转到that.cfm中名为there_in_that的定位所在的位置。

你可以将表达式#there_in_that看作一种扩展的URL地址。它通过指定同一个或另一个HTML文件中特定的定位来扩 展一般的URL地址。包含有定位的文件可以是你当地网站上的文件或是环球网上的任何一个文件。

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


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

控制超链接的颜色

在Netscape Navigator中，一个超链接在点击它之前的颜色是浅蓝色，点击它并链接到目的网页后，这个超链接的颜色就变为紫红色。而且 当鼠标的指针移动到超链接的位置并点击它时，它的颜色变为了红色。

你可以根据你的需要改变这些颜色，控制超链接颜色的三个属性是LINK、VLINK和ALINK，它们都是BODY标识符的属性 ，下面是个例子：

<HTML>

<HEAD>

<TITLE> Link Colors </TITLE>

</HEAD>

<BODY LINK=」lime」VLINK=」lime」 ALINK=」lime」>

<A HREF=」http://www.yahoo.com」> Yahoo </A>

</BODY>

</HTML>

在此例中，超链接Yahoo显示的颜色在你点击前、点击时及点击后都是草绿色。LINK属性决定还未访问的超链接的颜色，VLI NK属性决定已访问过的超链接的颜色，而ALINK属性决定正在点击超链接时它显示的颜色。你可以用颜色名或RGB值来设定这些 颜色属性。
Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 
koioggo
Groupie
Groupie


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

加入图象

Internet上的网站可分成两种类型，一种使用大量的图片，一种不使用图片。一个极端的例子是象HotWired这样的网站 ，每一页几乎都被各种各样的图片占满了。HotWired网站的这种设计使得它有非常鲜明的特色（见图5.9）。

另一个极端的例子是如Amazon books这样的网站。Amazon的网页上几乎没有什么图片，每一页上除了文字以外就几乎没有别的东西。这使得网页传输显示的 速度很快（见图5.10）

哪里种方法更好？这与你网点的目的有关。HotWired网点致力于向用户提供各种特殊的图片，因此在网页中包含各种惹人注目的图 片能获得完美的效果。从另一方面来说，Amazon网站的目的是出售图书，如果一个用户要等待很长时间来调入一个网页，他可能就 会干脆到书店去买书了。

当设计你的网页时，你可以在这两种极端间找到一个平衡点。我好方法也有坏方法在你的网页中加入图片，如果您小心地选择你的图片类 型，你既可以让将你的网页生动有趣，也可以用较快的速度显示。在这一节中你将学习怎样做到这一点。

 

图5.9 使用大量图片的HotWired网站

 

图5.10 几乎不使用图片的Amazon网站

GIF和JPEG

环球网上最常用的图象格式是图象交换格式（GIF），你可以把你网页中的任何东西都用GIF图象来实现，包括标志、页分隔及超链 接。GIF有很多你应当知道的性质：

首先，GIF图象可以有不同大小的调色板，在一个GIF图象中显示的最大色彩数为256，然而，通常建立的图象都采用较少的调色 板。减少GIF图象的调色板大小可以显著地减少图象文件的大小，而越小的图象文件调入网络浏览器就越快。

GIF图象具有透明色彩，如果你不想让你的图象以矩形区域来显示，你可以设定一种透明色彩，这样你可以将你的图象边缘设置成任何 一种形状。当你想让你网页上的背景图象或颜色透过前景图象显示出来，透明色彩就可以做到这一点。

GIF图象可以交错，当浏览器读入一个交错GIF图象时，浏览器可以在全部读入这个图象文件前就开始显示，这就给用户一种快速显 示的感觉。由于这个原因，你应该使用交错GIF图象而不是非交错GIF图象。

最后，GIF图象可以用来创建动画。你可以建立在一系列图片中循环显示的GIF图象，而不是单一的图象。

注意

GIF的发音是硬音或丝音的g。

GIF图象不是环球网上唯一使用的一种图象格式。另一种格式，静止图象专家组（JPEG）格式也是广泛使用的，使用JPEG格式 的图象都有jpg的扩展名。

为什么有两种图象格式？每种格式都适用于一些特定类型的图片。

注意

JPEG的发音是「jay peg「。

通常在网页上显示照片用JPEG格式较好──JPEG适合显示有许多不同颜色的图象，这有下面的原因：

与GIF不同，JPEG图象不局限于256种颜色，JPEG图象可以有上百万种色彩，当然这并不意味著所有的显示器都能显示这些 颜色。

第二个理由涉及到两种格式对图象数据的压缩方式。如果你用GIF格式建立了一个有许多不同颜色的图象，这个文件的大小就会比用J PEG格式创建的大得多。这一点是很重要的，因为网络浏览器总是在读入小文件时要快些。

在大部分情况下，你可以用GIF格式为你的网页创建图象，一般GIF图象比较小，调入比较快。它们还可以设定透明色彩，而JPE G则不具有这一特性。

注意

第三种图象格式现在用得还不多，但在不久的将来可能会大量使用。World Wide Web Consortium推出了PNG（发音ping）格式，作为GIF格式的替代品。GIF格式的一个问题是它不是公开的，它最初 是由CompuServe开发的。虽然GIF格式是私有的，但你可以在你的网页中使用GIF图象而不用支付任何费用。

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


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

为你的网页搜集图象

在学习怎样在你的网页中加入图象之前，你应该知道到哪里儿去搜集图象。通常有四种办法：

雇用一个网页设计公司来为你设计图象，这可能会很贵，特别是为一个较大的网点设计图象。对于专业级的图象设计，你可能要为每幅图 像支付50到100美元。网页设计公司对于类似导航条、动画、标志这类图象会收取更高的费用。对一个中型的网站，一般要支付50 00美元或更多。

如果你付得起，而且又能找到一个优秀的网页设计公司，这是为你的网站设计图象的最好办法。再没有比图象更好的东西能吸引用户对你 的网点加以注意。如果可能的话，多花些钱去设计漂亮的图象，这会使你的网页很不一般。

购买一些专门用于网站设计的图象光盘。你可以根据你的需要修改或直接在你的网站上使用这些图片，例如，Microsoft Visual Studio的光盘中包含了上百个图片，你可以在你的网站中使用它们，而不用支付任何费用。

从环球网上的免费或商业图象站点上下载图片。一个较好的收集网页图片的商业站点是Photo Disc，地址是http://www.photodisc.com 。在下载图片并在你的网页中使用之前，你应获得使用它们的权限，未经过作者的同意而随意从网页上拷贝和使用别人的图片是不合法 和另人讨厌的。

通过一些作图软件自己为网页制作一些图片。即使你用上述的办法获得了一些图片，你也可能要根据你的需要对这些图片作一些修改。要 作到这一点，你需一些与网页上使用的图象格式相兼容的作图软件。

　

　

注意

你不能用Windows NT或Windows 95自带的绘图软件来为你的网页制作图片。这个软件即不支持GIF也不支持JPEG。第26章「使用Microsoft Image Composer」将教你怎样使用Image Composer软件（它是Microsoft Visual Studio的组件之一）来制作网页图片。如果你没有Visual Studio，你可以使用共享软件Paint Shop Pro（可在http://www.jasc.com下载）。另外，如果你想买一个高质量的作图软件，我推荐Adobe Photoshop或是Fractal Design Painter。
Back to Top 查看 koioggo's 资料 搜索其它贴子 koioggo 访问 koioggo's
 

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

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

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

This page was generated in 0.2344 seconds.

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