《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)

上傳人：獨(dú)*** IP屬地：江蘇上傳時(shí)間：2023-01-06 格式：PPT 頁數(shù)：32 大?。?.73MB 積分：15 舉報(bào) 版權(quán)申訴

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第2頁

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第3頁

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第4頁

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)_第5頁

已閱讀5頁，還剩27頁未讀，繼續(xù)免費(fèi)閱讀

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

第

2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)

2.1

HTML網(wǎng)頁設(shè)計(jì)基礎(chǔ)

2.1.1

HTML

網(wǎng)頁設(shè)計(jì)的基本概念

HTML（Hypertext

Marked

Language，即超文本標(biāo)記語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。HTML

文檔是由

HTML

元素組成的文本文件，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)Windows

等）（如

Linux，進(jìn)行瀏覽。自

1990

年以來HTML就一直被用作

WWW（World

Wide

Web，萬維網(wǎng)）的信息表示語言，用于描述網(wǎng)頁的格式設(shè)計(jì)和它與

WWW

上其它網(wǎng)頁和文件的鏈接信息。使用HTML語言描述的文件，需要通過網(wǎng)頁瀏覽器顯示出效果。

HTML

是一切網(wǎng)頁實(shí)現(xiàn)的基礎(chǔ)，在網(wǎng)絡(luò)中瀏覽的網(wǎng)頁都是一個(gè)個(gè)的

HTML

文件，這些網(wǎng)頁中可以包含有文字、圖片、動(dòng)畫和聲音，還可以從當(dāng)前文件跳轉(zhuǎn)到另一個(gè)文件，與網(wǎng)絡(luò)中世界各地主機(jī)上的文件相連接，故稱為超文本文件。一個(gè)

HTML

文件包含了一些特殊的標(biāo)記來告訴瀏覽器應(yīng)該如何顯示文本、圖像以及網(wǎng)頁的背景，被稱為

HTML標(biāo)簽。例如，上一章中所見過的<html>、<body>、<font>等等。表

2-1

中列出了基本的

HTML語言標(biāo)簽。

HTML

不是像

C/C++、Visual

Basic、Java

之類的程序語言，它只是標(biāo)記語言，基本上來說，只要明白了各種HTML標(biāo)簽的用法就可以說是學(xué)懂了

HTML，HTML的格式非常簡單，只是由文字及標(biāo)簽組合而成。表

2-1列出了一些常用的

HTML標(biāo)簽。表2-1

常用的HTML語言標(biāo)簽記

HTML標(biāo)記<html></html>

<font

color=""></font>

<br>

<li>

<b></b>

<i></i>

href=""></a>

<img

scr="">

<hr>

尾使用結(jié)束標(biāo)記

聲明網(wǎng)頁文件頭，緊跟在html開始標(biāo)記之后

聲明網(wǎng)頁的標(biāo)題，在head的開始和結(jié)束標(biāo)記之間

聲明文件主體，包括所有的文本、圖片及文檔中其他標(biāo)記

聲明文字顏色

插入一個(gè)空行

聲明一個(gè)無序列表

聲明一個(gè)有序列表

聲明一個(gè)列表項(xiàng)

聲明其包含部分中的文字使用粗體

聲明其包含部分中的文字使用斜體

說明其包含的部分是個(gè)超鏈接，等號(hào)后面是鏈接目標(biāo)文件的URL

插入一個(gè)圖片文件，等號(hào)后面是圖片文件的url

插入一個(gè)水平分隔線含義

聲明這個(gè)文件是一個(gè)HTML文件。在文件的開頭使用開始標(biāo)記，在文件的結(jié)下面是學(xué)習(xí)HTML標(biāo)簽的幾點(diǎn)說明。（1）任何HTML標(biāo)簽都是由“<”號(hào)和“>”號(hào)所括住，標(biāo)簽名稱不區(qū)分大小寫。例如：32

<Html>、<html>和<HTML>表示相同的意思。W3C（World

Wide

Web

Consortium，萬維網(wǎng)聯(lián)盟）在

HTML4

建議中提倡使用小寫標(biāo)簽。（2）多數(shù)標(biāo)簽是成對(duì)出現(xiàn)的，一對(duì)標(biāo)簽的前面一個(gè)是起始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽，在起始和結(jié)束標(biāo)簽之間的文本是元素內(nèi)容。在起始標(biāo)簽的標(biāo)簽名稱前加上符號(hào)“/”便是結(jié)束標(biāo)簽，例如：<html>與</html>、<body>與</body>。成對(duì)出現(xiàn)的標(biāo)簽可以嵌套使用，例如：

<font

color="red">

<b>ASP

教程</b></font>

上面的標(biāo)簽將“ASP

教程”使用紅色粗體文字顯示。在嵌套時(shí)標(biāo)簽最好不要交叉，這會(huì)導(dǎo)致源文件的可讀性差，且易出錯(cuò)。（3）少數(shù)標(biāo)簽單獨(dú)出現(xiàn)，沒有配對(duì)的結(jié)束標(biāo)簽。例如：

ASP

動(dòng)態(tài)語言教程<br>電子工業(yè)出版社上面語句中，<br>標(biāo)簽是插入一個(gè)空行，在這里實(shí)際上是換行，即將“ASP

動(dòng)態(tài)語言教程”和“電子工業(yè)出版社”分成兩行顯示。（4）部分標(biāo)簽可以擁有屬性，屬性能夠?yàn)轫撁嫔系?/p>

HTML元素提供附加信息，屬性只可加于起始標(biāo)簽中。屬性通常由屬性名和值成對(duì)出現(xiàn)，格式如下：

name="value"

其中

name為屬性名稱，value為所設(shè)置的屬性值。例如：

<body

bgcolor="blue">

標(biāo)簽<body>定義了

HTML

頁面的主體元素，附加的

bgcolor

屬性將可以告訴瀏覽器，網(wǎng)頁頁面的背景顏色，上面標(biāo)記的意思是將網(wǎng)頁頁面的背景色是藍(lán)色。屬性值通常被包含在雙引號(hào)中，也可以使用單引號(hào)。在某些情況下——例如，屬性值本身包含引號(hào)時(shí)，使用單引號(hào)是很有必要的。（5）為了與其他標(biāo)簽相區(qū)別，HTML中規(guī)定了專門的標(biāo)簽來作為注釋標(biāo)簽，注釋標(biāo)簽用來在

HTML源文件中插入注釋，注釋在顯示時(shí)會(huì)被瀏覽器忽略，是不可見的。注釋標(biāo)簽以“”結(jié)束，如下所示：

<!--

注釋

-->

（6）很多標(biāo)簽都具有顏色屬性，HTML中的顏色可以有兩種表示方法：十六進(jìn)制的

RGB

格式和在

HTML

中定義的顏色名稱。RGB

格式的表示方式為“#RRGGBB”，其中

R、G、B

為

0～F

的十六進(jìn)制數(shù)，分別表示紅、綠、藍(lán)三種顏色的深度，從

至

顏色逐漸加深，00

為無色透明，ff為純色。HTML中定義的顏色名稱是一些常用顏色的英文單詞，如

red、black、

green、blue、yellow等。例如：

<font

color=”#0000ff”>ASP

教程</font>

<font

color=”blue”>ASP

教程</font>

上面的兩行代碼均將“ASP

教程”顯示為藍(lán)色文字。

2.1.2HTML文件結(jié)構(gòu)

HTML的文件結(jié)構(gòu)相當(dāng)簡單，其主體結(jié)構(gòu)主要由以下三組標(biāo)簽構(gòu)成：

<head></head>33

<html>標(biāo)簽用以告知瀏覽器從這里開始是

HTML

文件，讓瀏覽器認(rèn)出并正確處理此

HTML

文件，整個(gè)

HTML文件處于標(biāo)記<html>與</html>之間。

HTML文檔通常分兩部份，位于<head>和</head>標(biāo)簽之間的部分稱為

HTML文件頭，位于<body>至</body>標(biāo)簽之間的部分稱為正文。文件頭部分用以記錄與網(wǎng)頁相關(guān)的重要信息，例如標(biāo)題、字符集等，通常文件頭部分都不會(huì)顯示在瀏覽器中，只有正文部分會(huì)被顯示出來。一般

HTML文檔格式如下：

<html>

<head>文件頭信息

</head>

<body>在瀏覽器中顯示的

HTML文件的正文

</body>

</html>

HTML文檔中，HTML

第一個(gè)標(biāo)簽是<html>。這個(gè)標(biāo)簽告訴瀏覽器這是HTML文檔的開始。

文檔的最后一個(gè)標(biāo)簽是</html>，這個(gè)標(biāo)簽告訴瀏覽器這是

HTML

文檔的終止。在<head>和

</head>標(biāo)簽之間文本的是文件頭信息。在瀏覽器窗口中，文件頭信息是不被顯示的。HTML

文件頭部分可以使用一些專用的標(biāo)簽來記載信息，常用文件頭標(biāo)簽有<title>和<meta>

在<body>和</body>標(biāo)簽之間的文本是正文，會(huì)被顯示在瀏覽器中。<body>標(biāo)簽之間包含的是瀏覽器中所顯示的頁面內(nèi)容，作為對(duì)頁面的設(shè)置，<body>標(biāo)簽有一些附帶的屬性用于設(shè)置頁面的背景顏色、正文文字顏色、鏈接文字顏色和頁面背景圖像等，后面將逐一進(jìn)行介紹這些屬性。

1．設(shè)置文檔標(biāo)題

<title>標(biāo)簽用于指定文檔標(biāo)題，使用格式如下：

<title>

文檔標(biāo)題

</title>

在<title>和</title>標(biāo)簽之間的文本是文檔標(biāo)題，它被顯示在瀏覽器窗口的標(biāo)題欄。

2．設(shè)置網(wǎng)頁關(guān)鍵字

<meta>

標(biāo)簽是記錄有關(guān)當(dāng)前頁面的信息（如字符編碼、作者、版權(quán)信息或關(guān)鍵字）的

head

元素，該標(biāo)簽也可以用來向服務(wù)器提供信息，如頁面的失效日期、刷新間隔等。為了完成這些功能，<meta>標(biāo)簽提供了兩種附加屬性：name和

http-equiv。

name

主要用于描述網(wǎng)頁，以便于搜索引擎對(duì)網(wǎng)頁進(jìn)行查找、分類，目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找

meta

值來給網(wǎng)頁進(jìn)行分類。這其中最重要的是

description

（用于的網(wǎng)頁在搜索引擎上的描述）和

keywords（定義搜索引擎用來分類的關(guān)鍵詞)，從應(yīng)用角度來看，應(yīng)該給所網(wǎng)站中的每一頁都插入這兩個(gè)

name

屬性值。例如：

<meta

name="keywords"

content="ASP

教程">

其中，“ASP

教程”為所設(shè)置的當(dāng)前網(wǎng)頁的關(guān)鍵字。在文件頭加上這樣的定義后，搜索引擎就能夠讓讀者根據(jù)這些關(guān)鍵字查找到網(wǎng)頁，了解網(wǎng)頁內(nèi)容。34

也可以不使用

description

和

keywords

來讓搜索引擎進(jìn)行檢索，而使用

robots

來替代。

robots

的使用如下所示：

<meta

name="robots"

content="all

none

index

noindex

|follow

nofollow">

設(shè)置為

all

時(shí)文件將被檢索，并且頁上鏈接可以被查詢；設(shè)置為

none則表示文件不被檢索，而且不查詢頁上的鏈接；設(shè)置為

index

時(shí)文件將被檢索；設(shè)置為

follow時(shí)則可以查詢頁上的鏈接；設(shè)置為

noindex

時(shí)文件不檢索，但可被查詢鏈接；設(shè)置為

nofollow則表示文件不被檢索，但可查詢頁上的鏈接。此外，還可以使用

Author，告訴搜索引擎站點(diǎn)的設(shè)計(jì)者姓名，例如：

<meta

name="Author"

content="趙明">

上面標(biāo)簽將告訴搜索引擎當(dāng)前站點(diǎn)的設(shè)計(jì)者是趙明。

3．設(shè)置網(wǎng)頁字符集

http-equiv相當(dāng)于

http文件頭的作用，可以直接影響網(wǎng)頁的傳輸。常用方式如下：

<meta

http-equiv="content-type"

content="text/html?

charset=utf-8">

上面的標(biāo)簽用于描述網(wǎng)頁使用的字符集，瀏覽器根據(jù)此項(xiàng)，就可以選擇正確的編碼字符集，而不需要讀者在瀏覽器里選擇。常用中文字符集有

GB2312、UTF-8

和

BIG5，GB2312是簡體中文編碼，

BIG5

則是臺(tái)灣繁體中文編碼的主頁專用，而

UTF-8

是一種通用編碼，它可以在同一頁面顯示簡體中文、繁體中文等多種文字，是目前最為常用的編碼。本書中所有編碼均使用

UTF-8。

4．設(shè)置網(wǎng)頁刷新時(shí)間

<meta

http-equiv="refresh"

content="60?

url="new.htm">

上面標(biāo)簽用于刷新瀏覽器中的網(wǎng)頁，在這行標(biāo)簽中，瀏覽器將在

秒后，自動(dòng)轉(zhuǎn)到網(wǎng)頁

new.htm?？梢岳眠@個(gè)功能，制作一個(gè)網(wǎng)站標(biāo)志性封面頁，在若干時(shí)間后，自動(dòng)讓用戶轉(zhuǎn)到指定頁面。如果省略上面標(biāo)簽中的

url

項(xiàng)，瀏覽器將刷新當(dāng)前頁。這樣就可以實(shí)現(xiàn)網(wǎng)頁的定時(shí)刷新功能。

5．強(qiáng)制瀏覽最新網(wǎng)頁

<meta

http-equiv="program"

content="no-cache">

強(qiáng)制性調(diào)用服務(wù)器中網(wǎng)頁的最新版本。瀏覽器為了節(jié)約網(wǎng)絡(luò)訪問時(shí)間，在本地硬盤上都緩存了一個(gè)網(wǎng)頁的臨時(shí)文件。在下一次調(diào)用網(wǎng)頁時(shí)，直接顯示硬盤上的文件，而不是網(wǎng)絡(luò)上的。如果想讓用戶每次都看到最新的網(wǎng)頁，就需要加上這個(gè)標(biāo)簽。

6．設(shè)置網(wǎng)頁背景顏色和圖像

<body>標(biāo)簽的

bgcolor

屬性用于設(shè)置頁面背景顏色，例如：

<body

bgcolor=”yellow”>

上面的標(biāo)簽將頁面背景設(shè)置為黃色。

background屬性用于設(shè)置背景圖像，例如：

<body

background="images/bg.jpg">

上面的標(biāo)簽將站點(diǎn)中

images

目錄下的

bg.jpg

圖像文件設(shè)置為網(wǎng)頁背景圖像。在設(shè)置網(wǎng)頁35

背景圖像時(shí)應(yīng)該注意，由于圖像文件一般都比較大，網(wǎng)上傳輸較慢，最好是選擇較小的文件或者是以較小的圖片為背景。同時(shí)，背景圖像像不宜太復(fù)雜，以免影響正文的顯示效果。

7．設(shè)置正文文字顏色和鏈接文字顏色

<body>標(biāo)簽的

text

屬性用于設(shè)置頁面正文文字顏色，link

屬性用于設(shè)置鏈接文字顏色，

alink屬性用于設(shè)置激活的鏈接顏色，vlink屬性用于設(shè)置訪問過的鏈接文字顏色。例如：

<body

text="#000000"

link="#0000FF"

alink="#FF0000"

vlink="#FFFF00"

上面的標(biāo)簽設(shè)置網(wǎng)頁正文文字為黑色，鏈接文字為藍(lán)色，激活的鏈接文字為紅色，已訪問過的鏈接文字為黃色。

8．指定文檔邊距（只適用于

IE瀏覽器）

<body>標(biāo)簽的

topmargin、bottommargin、leftmargin、rightmargin

屬性可用于指定文檔距瀏覽器上、下、左、右的空白距離，單位為像素。marginwidth

和

marginheight

屬性可用于指定邊距寬度和邊距高度。例如：

<body

leftmargin="10"

topmargin="10"

rightmargin="10"

bottommargin="10">

上面的標(biāo)簽指定了網(wǎng)頁文檔距離瀏覽器上、下、左、右邊距為

10像素。

9．缺省<html>、<head>和<body>標(biāo)簽的網(wǎng)頁還有一些特殊的網(wǎng)頁，例如，將要包含在其它頁面中的網(wǎng)頁，由于要包含到其它頁面，因此設(shè)計(jì)時(shí)網(wǎng)頁中不能有<html>、<head>和<body>標(biāo)簽，以免與包含它的目標(biāo)網(wǎng)頁內(nèi)容發(fā)生沖突，出現(xiàn)多個(gè)<html>、<head>或<body>標(biāo)簽。這種沒有<html>、<head>和<body>標(biāo)簽的網(wǎng)頁，在瀏覽器中瀏覽時(shí)，會(huì)將其解釋為<body>部分的正文內(nèi)容。

2.1.3

標(biāo)題格式

HTML中，標(biāo)題格式由標(biāo)簽<h1>到<h6>定義。<h1>定義了最大的標(biāo)題元素，<h6>定義了最小的。此外，在顯示時(shí)，每行標(biāo)題后還會(huì)自動(dòng)添加一行空白。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>

標(biāo)題格式</title>

</head>

<body>

<h1>標(biāo)題

</h1>

<h2>標(biāo)題

</h2>

<h3>標(biāo)題

</h3>

<h4>標(biāo)題

</h4>

<h5>標(biāo)題

</h5>36

<h6>標(biāo)題

</h6>

</body>

</html>

上面網(wǎng)頁在瀏覽時(shí)效果如圖

2-1

所示。

2.1.4

文字布局

HTML

中，與文字布局相關(guān)的標(biāo)簽有段落<p>、換行<br>、預(yù)格式化<pre>、水平線<hr>

和對(duì)齊方式等等。

1．段落與換行在

HTML

網(wǎng)頁設(shè)計(jì)時(shí)，不能像文本編輯那樣使用回車鍵來進(jìn)行換行，這樣的換行在顯示時(shí)是無效的。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>失敗的段落排版</title>

</head>

<body>

<h1>蝶戀花

</h1>

蘇軾花褪殘紅青杏小。燕子飛時(shí)，綠水人家繞。枝上柳綿吹又少，天涯何處無芳草！墻里秋千墻外道。墻外行人，墻里佳人笑。笑漸不聞聲漸悄，多情卻被無情惱。

</body>

</html>

上面的網(wǎng)頁在瀏覽器中的顯示效果如圖2-2

所示。圖2-1標(biāo)題格式37

圖2-2失敗的段落排版從圖中可以看出，雖然在設(shè)計(jì)網(wǎng)頁時(shí)進(jìn)行了分段，但在瀏覽器中顯示時(shí)并沒有按設(shè)計(jì)時(shí)的排版顯示。所以，在

HTML

中，網(wǎng)頁設(shè)計(jì)時(shí)的回車分段在瀏覽器中是無效的，即使有多個(gè)回車換行，在顯示時(shí)也不會(huì)有效果。還有一種類似情況，HTML

中的空格即使在設(shè)計(jì)時(shí)有多個(gè)，在瀏覽時(shí)也只能顯示出一個(gè)空格。

HTMl

提供了兩個(gè)標(biāo)簽<p>和<br>來用于段落的分段和換行。

<p>用于分段，

<br>用于換行。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>正確的段落排版</title>

</head>

<body>

<h1>蝶戀花

</h1>

<p>

花褪殘紅青杏小。<br>

燕子飛時(shí)，綠水人家繞。<br>

枝上柳綿吹又少，天涯何處無芳草！

<br>

墻里秋千墻外道。<br>

墻外行人，墻里佳人笑。<br>

笑漸不聞聲漸悄，多情卻被無情惱。<br>

</p>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-3

所示。圖2-3正確的段落排版38

從圖中可以看到，使用了<p>和<br>標(biāo)簽后，得到了正確的段落排版格式。還有一點(diǎn)需要注意，<p>標(biāo)簽會(huì)自動(dòng)在段落后增加一行空白，表示分段。

2．預(yù)格式化除<p>與<br>標(biāo)簽外，HTML

還提供了預(yù)格式化標(biāo)簽<pre>。預(yù)格式化標(biāo)簽支持在網(wǎng)頁設(shè)計(jì)時(shí)的排版也瀏覽時(shí)相同，排版時(shí)的回車換行與空格等在瀏覽時(shí)也可以保留格式。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<pre>

<h1>蝶戀花

</h1>

</pre>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-4

所示。圖2-4預(yù)格式化排版39

從圖中可以看出，使用預(yù)格式化標(biāo)簽后，瀏覽器中顯示的內(nèi)容與在設(shè)計(jì)

HTML

代碼時(shí)完全相同，其中的空行、空格與回車換行等都得到了實(shí)現(xiàn)。

3．對(duì)齊方式在段落排版中，還常常會(huì)用到段落對(duì)齊方式，HTML中可以使用附加屬性align來控制段落對(duì)齊方式，該屬性可用的值有

left、

center

和

right，分別對(duì)應(yīng)于段落的左對(duì)齊、居中對(duì)齊和右對(duì)齊。此外，由于居中對(duì)齊用得比較多（如標(biāo)題文字、圖像等），HTML還提供了專門的居中對(duì)齊的標(biāo)簽<center>。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>

對(duì)齊方式</title>

</head>

<body>

align="left">

段落左對(duì)齊</p>

align="center">段落居中對(duì)齊</p>

align="right">段落右對(duì)齊</p>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如

2-5

圖所示。圖2-5對(duì)齊方式

4．水平線為了使網(wǎng)頁美觀，便于分開顯示中的不同區(qū)域，在

HTML

中，還提供了一個(gè)圖形化的分隔標(biāo)簽水平線<hr>。水平線用于在網(wǎng)頁中分隔不同區(qū)域，常見使用格式如下：40

<hr

color="

align="

size="

width="

noshade>

水平線可以附帶多種屬性，其中，color

用于指定水平線的顏色，缺省值為黑色；align用于指定水平線的對(duì)齊方式；size

用于指定水平線的粗細(xì)，以像素為單位，缺省值為

像素；

width用于指定水平線的寬度，可以用像素作單位，也可以用窗口寬度的百分比作單位，缺省值為

100%；noshade

屬性用于設(shè)定線條為是否為平面顯示，若刪去則有陰影，缺省值為有陰影。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<pre>

<center><h3>蝶戀花

</h3>

花褪殘紅青杏小。燕子飛時(shí)，綠水人家繞。枝上柳綿吹又少，天涯何處無芳草！墻里秋千墻外道。墻外行人，墻里佳人笑。笑漸不聞聲漸悄，多情卻被無情惱。

<hr

size="5"

color="#0000FF"

align="center"

width="90%">

江城子密州出獵</center>

</h3>

老夫聊發(fā)少年狂，左牽黃，右擎蒼。錦帽貂裘，千騎卷平岡。欲報(bào)傾城隨太守，親射虎，看孫郎。酒酣胸膽尚開張，鬢微霜，又何妨！持節(jié)云中，何日遣馮唐？會(huì)挽雕弓如滿月，西北望，射天狼。

</pre>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-6

所示。從圖中可以看到，下面的標(biāo)簽定義了一個(gè)高為

像素，寬為窗口的

90%，顏色為藍(lán)色，居中對(duì)齊且有陰影的水平線。

<hr

size="5"

color="#0000FF"

align="center"

width="90%">41

圖2-6水平線

2.1.5

字體格式字體格式是排版中的重要內(nèi)容，HTML中定義了多種標(biāo)簽來對(duì)文字字體格式進(jìn)行控制。

1．字體、顏色與大小字體標(biāo)簽<font>用于字體格式設(shè)置，其附帶的屬性可用于文字字體、顏色和大小的設(shè)置，使用格式如下：

<font

face=”

“color=”

“

size=”

”>

其中，face為客戶端字體，如宋體、隸書、黑體等等；color

為文字顏色，使用<font>標(biāo)簽定義的文字顏色優(yōu)于在<body>的

text

屬性中定義的顏色；size

為字號(hào)，HTML

中規(guī)定了從

至

共七種字體大小，1

為最小，7

為最大。此外，還可以使用+1～+7

和-1~-7

這樣的增減字號(hào)，它表示在當(dāng)前字號(hào)的基礎(chǔ)上減小或增大字號(hào)。例如：

<font

face=”宋體“

color=”blue“

size=”5”

>ASP

教程</font>

上面的語句將在瀏覽器中顯示字體為宋體，顏色為藍(lán)色，大小為5

號(hào)的“ASP

教程”。在設(shè)計(jì)時(shí)，face最好不要超出Windows

自帶字體以外的字體，否則，如果用戶在瀏覽時(shí)，用戶的計(jì)算機(jī)上沒有該字體，將會(huì)影響頁面的文字效果。還有一種解決的方法是在

face

的屬性值中列出多種字體，客戶端瀏覽器在瀏覽時(shí)會(huì)從左到右查詢字體，如果客戶機(jī)上沒有該字體，則會(huì)用下一種替代。例如：

<font

face=”方正簡標(biāo)宋,宋體“>ASP

教程</font>

上面語句在瀏覽時(shí)，如果客戶機(jī)沒有安裝字體“方正簡標(biāo)宋”，則以“宋體”顯示。

2．字體樣式除了文字字體、顏色與大小外，HTML還提供了可以進(jìn)行文字字體樣式（如加粗、斜體、刪除線等）控制的標(biāo)簽，常用的字體樣式標(biāo)簽有<i>斜體、<b>加粗、<u>下劃線、<strike>刪42

除線、<sup>上標(biāo)文字和<sub>下標(biāo)文字等。常用的字體樣式舉例如下：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<font

size="5">

X<sup>2</sup><br>

H<sub>2</sub>SO<sub>4</sub><br>

</font>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-7

所示。圖2-7字體樣式

2.1.6

字符實(shí)體在

HTML中，有些字符擁有特殊含義，比如小于號(hào)“<”和大于號(hào)“>”在HTML中是作為標(biāo)簽的一部分使用的，如果想要瀏覽器顯示這些字符的話，必須在

HTML

代碼中以字符實(shí)43

體的方式使用。

HTML

字符實(shí)體用于表示一些具有特殊意義的字符，而這些字符又不能在

HTML

中直接表示出來，如前面所說的“>”“<”、，還有引號(hào)（“””和“’”用于字符串的定界）、空格（在

HTML中，如果有連續(xù)的多個(gè)空格，則在瀏覽時(shí)只有一個(gè)空格有效，其它的都被忽略）、版權(quán)符號(hào)（在編輯時(shí)，?不能作為字符直接打印出來）等等。一個(gè)字符實(shí)體擁有三個(gè)部分：以&符號(hào)開頭，然后是一個(gè)實(shí)體名或者一個(gè)實(shí)體編號(hào)，最后是一個(gè)分號(hào)“?”。

HTML中常用的字符實(shí)體如表

2-2

所示。表2-2

HTML常用的字符實(shí)體顯示結(jié)果空格

￠

￡

￥

小于

大于

and符號(hào)

引號(hào)

單引號(hào)

分

英鎊

人民幣元

章節(jié)

版權(quán)

注冊(cè)

乘號(hào)

除號(hào)

描述 ?

´?

¢?

£?

¥?

§?

©?

®?

×?

÷?

實(shí)體名 ?

¢?

£?

¥?

§?

©?

®?

×?

÷?

實(shí)體編號(hào)例如，想要在

HTML

文檔中顯示一個(gè)小于號(hào)，可以寫成“<?”或者“<?”，而要輸出一個(gè)空格則要寫成“ ?”或“ ?”。使用實(shí)體名相對(duì)于使用實(shí)體編號(hào)的優(yōu)點(diǎn)是容易記憶，缺點(diǎn)是并非所有的瀏覽器都支持最新的實(shí)體名，但是幾乎所有的瀏覽器都能很好地支持實(shí)體編號(hào)。最后一點(diǎn)，在使用字符實(shí)體名時(shí)需要注意，實(shí)體名是大小寫敏感的，在書寫時(shí)注意分清大小寫字母。

2.2

網(wǎng)頁中的圖像、表格與列表

2.2.1

網(wǎng)頁中的圖像

1．圖像標(biāo)簽<img>

要設(shè)計(jì)一個(gè)漂亮的網(wǎng)頁，圖像元素是必不可少的，HTML中提供了<img>標(biāo)簽用于在網(wǎng)頁中插入圖像。使用格式如下：

<img

src="

align="

width="

height="

border=”

”

alt=”

“>

其中，src是圖像文件的路徑，通常是網(wǎng)站中的相對(duì)路徑，也可以是網(wǎng)絡(luò)上的

url，這一項(xiàng)44

是必填的；align可以是圖像與同一行上文字的對(duì)齊方式，可選的值有

top（頂端對(duì)齊）、middle

（居中對(duì)齊）、bottom（底部對(duì)齊），align

也可用于圖像與頁面的對(duì)齊關(guān)系，可選的值有

left

（靠頁面左側(cè)）、right（靠頁面右側(cè)）缺省值為底部對(duì)齊；width與

height

用于設(shè)置圖像的寬度和高度，可以使用像素為單位，也可以使用百分比為單位，缺省值為

100%；border

為圖像邊框?qū)挾龋籥lt

為替代圖像的信息文字，當(dāng)圖像由于某種原因不能顯示時(shí)，則在圖像位置顯示該信息文字。下面程序是圖像在網(wǎng)頁中的示例：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<p>埃及人面獅身像<img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81">埃及人面獅身像<img

src="images/SHIN.JPG"

alt="人面獅身像"

width="104"

height="81"

align="top">(圖像丟失后的信息）。</p>

<p>埃及人面獅身像<img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81"

align="top">埃及人面獅身像（頂端對(duì)齊）</p>

<p>埃及人面獅身像<img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81"

border="10"

align="middle">埃及人面獅身像（居中對(duì)齊，邊框?yàn)?/p>

像素）</p>

<br>

<p><img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81"

align="left"><img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81"

align="right">埃及人面獅身像埃及人面獅身像</p>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-9

所示。45

圖2-9網(wǎng)頁中的圖像

2．圖像的訪問路徑在網(wǎng)頁中，圖像、聲音、影像、動(dòng)畫等內(nèi)容都是以單獨(dú)的文件形式存在，HTML

中只是提供了在網(wǎng)頁中嵌入這些內(nèi)容的手段，在瀏覽網(wǎng)頁時(shí)，HTML會(huì)按標(biāo)簽語句中的

url

或路徑去訪問這些內(nèi)容，因此，在設(shè)計(jì)時(shí)必須保證在該

url

或路徑有需要嵌入的文件。為便于管理，通常都在網(wǎng)頁文件所在目錄中創(chuàng)建一個(gè)名為

images

的目錄，將網(wǎng)頁中所用到的圖像文件保存在該目錄中，這樣，可以使用相對(duì)路徑來訪問圖像。如果當(dāng)前網(wǎng)頁與

images

目錄在同一根目錄下，可以使用“images/*.*”（*.*表示圖像文件名）來訪問圖像，例如，上例中的<img

src="images/SPHINX.JPG"

alt="人面獅身像"

width="104"

height="81">，圖像文件

SPHINX.JPG就是保存在

images

目錄中。如果當(dāng)前網(wǎng)頁在與

images

目錄同級(jí)的另一目錄下，則使用“../images/*.*”（*.*表示圖像文件名，..表示上級(jí)目錄）來訪問圖像，例如，根目錄下有兩個(gè)目錄

images

和

page，圖像文件

SPHINX.JPG

保存在

images

目錄中，當(dāng)前網(wǎng)頁位于

page

目錄中，則可以通過<img

src="../images/SPHINX.JPG">來訪問圖像文件

SPHINX.JPG

最后，還要注意，由于是網(wǎng)絡(luò)訪問，在路徑和文件名中不要有中文，否則容易出錯(cuò)。

2.2.2

網(wǎng)頁中的表格表格是網(wǎng)頁設(shè)計(jì)中最常用的對(duì)象之一，幾乎沒有哪個(gè)網(wǎng)頁中不用到表格。表格主要有兩方面的用途：一是用于網(wǎng)頁中普通表格的繪制，以便于在表格中顯示數(shù)據(jù)、信息等；另一個(gè)用途則是用于網(wǎng)頁的頁面布局，用表格來控制網(wǎng)頁中各個(gè)對(duì)象的位置。46

1．表格設(shè)計(jì)

HTML中提供了多種標(biāo)簽來進(jìn)行網(wǎng)格的設(shè)計(jì)，<caption>、<th>、<tr>和<td>。

包括<table>、<table>標(biāo)簽用于表格的整體設(shè)置，<caption>標(biāo)簽用于設(shè)置標(biāo)題，<tr>標(biāo)簽用于表格的行設(shè)置，

<th>標(biāo)簽用于設(shè)置表頭，<td>標(biāo)簽用于設(shè)置行中的每個(gè)具體的單元格。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<table

border="1">

<tr>

</tr>

<tr>

<td>瓷器

A</td>

</tr>

<tr>

<td>畫框

B</td>

</tr>

</table>

47

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-10

所示。圖2-10商品列表為了便于表格的靈活設(shè)置，HTML

還為表格標(biāo)簽提供了多種屬性，下面對(duì)各個(gè)標(biāo)簽進(jìn)行一一說明。

2．表格標(biāo)題的設(shè)置表格標(biāo)題的位置，可由align屬性來設(shè)置，其取值可以有

top（位于表格上方）、bottom（位于表格下方）、left（位于表格上方左側(cè)）、right（位于表格上方右側(cè)）和

center（位于表格上方居中）。例如：

<caption

align=top>

商品列表

</caption>

上面語句將設(shè)置標(biāo)題“商品列表”位于表格上方。

3．表格大小、邊框與間距的設(shè)置一般情況下，表格的高度和寬度是根據(jù)各行和各列的總和自動(dòng)調(diào)整的，如果需要設(shè)置固定的表格大小，可以使用<tabale>標(biāo)簽的

width屬性和

height

屬性。width和

height

屬性分別指定表格的寬度和高度，其值可以是以像素為單位的數(shù)值，也可以是相對(duì)于窗口寬度的百分比值。例如：

<table

width="400"

height="100">

上面標(biāo)簽定義了一個(gè)高度為

200

像素，寬度為

400

像素的表格。

<table

width=90%

height=50%>

上面標(biāo)簽定義了一個(gè)高度為窗口的

50%，寬度為窗口的

90%的表格。表格的邊框樣式是由<tabale>標(biāo)簽的border

屬性來設(shè)置的，它表示表格的邊框邊厚度和框線。將

border

設(shè)置成不同的值，會(huì)有不同的效果。例如，對(duì)于上面圖

2-10

的例子，將<table

border="1">改為<table

border="10">，則瀏覽效果如圖

2-11左圖所示，如果改為<table

border="0">則效果如圖

2-11

右圖所示。48

可以看到，將不同的值賦給

border

屬性，可以產(chǎn)生不同的效果。特別是賦值為

時(shí)，將看不到表格框線，這種方式為使用表格實(shí)現(xiàn)網(wǎng)頁頁面的布局帶來了好處。在本節(jié)后面的部分，將學(xué)習(xí)相關(guān)的內(nèi)容。圖2-11表格邊框樣式表格中，單元格與單元格之間的線為格間線，格間線的寬度也稱為間距，可以使用<tabale>

標(biāo)簽的

cellspacing屬性加以調(diào)節(jié)。單元格內(nèi)的內(nèi)容與表格線之間的空白稱為填充，<tabale>標(biāo)簽的

cellpadding

屬性加以調(diào)節(jié)。cellspacing

屬性與

cellpadding

屬性的值都是數(shù)值，單位為像素。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<table

border="1"

cellpadding="10"

cellspacing="5">

<tr>

</tr>

<tr>

<td>瓷器

A</td>

<td>100.00</td>49

</tr>

<tr>

<td>畫框

B</td>

</tr>

</table>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-12

所示。圖2-12表格的填充與間距在程序段中，通過語句“<table

border="1"

cellpadding="10"

cellspacing="5">”將表格的間距設(shè)置為

5像素，單元格內(nèi)部的文字到表格線的距離設(shè)置為

像素。

4．表格中跨行、跨列單元格的設(shè)置在表格設(shè)計(jì)中，通常會(huì)用到跨行或跨列的單元格，<th>和<td>的

rowspan屬性可用于設(shè)置跨行單元格，colspan屬性可用于設(shè)置跨列單元格。rowspan和

colspan的屬性值為數(shù)值，即要跨越的行數(shù)或列數(shù)。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<table

border="1"

cellpadding="5"

>50

<tr>

<th

colspan="2">數(shù)碼設(shè)備</th>

<th

colspan="3">辦公設(shè)備</th>

</tr>

<tr>

<td>多功能一體機(jī)</td>

</tr>

</table>

<br>

<table

border="1"

cellpadding="5"

商品列表

</caption>

<tr>

<td

rowspan="2">數(shù)碼設(shè)備</td>

</tr>

<tr>

</tr>

<tr>

<td

rowspan="3">辦公設(shè)備</td>

</tr>

<tr>

<td>多功能一體機(jī)</td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-13

所示。程序段中，下面的語句用于單元格跨列設(shè)置：51

<th

colspan="2">數(shù)碼設(shè)備</th>

<th

colspan="3">辦公設(shè)備</th>

程序段中，下面的語句用于單元格跨行設(shè)置：

<tdrowspan="2">數(shù)碼設(shè)備</td>

<td

rowspan="3">辦公設(shè)備</td>

圖2-13跨行/跨列的表格

5．表格的對(duì)齊方式表格的對(duì)齊方式可分為表格整體在頁面中的對(duì)齊方式和表格中的內(nèi)容與表格的對(duì)齊方式。

<table>標(biāo)簽的align屬性可用于表格在頁面中的對(duì)齊，取值有

left（左對(duì)齊）、right（右對(duì)齊）和

center（居中對(duì)齊）三種。例如：

<table

align="center">

上面的語句可以把表格在頁面中以居中對(duì)齊方式設(shè)置。表格中內(nèi)容的對(duì)齊方式由<th>標(biāo)簽或<td>標(biāo)簽的

align

屬性和

valign

屬性來設(shè)置，表格中內(nèi)容的對(duì)齊方式有兩種，分別是左右對(duì)齊和上下對(duì)齊。左右對(duì)齊是以align屬性來設(shè)置，而上下對(duì)齊則由

valign屬性來設(shè)置。其中，左右對(duì)齊的位置可分為三種：

left（左對(duì)齊)、

right

(右

top

(頂端對(duì)齊)、

middle(居中對(duì)齊)、bottom

對(duì)齊)和

center

(居中對(duì)齊)。上下對(duì)齊常用的有四種：

(底端對(duì)齊)和

baseline(基線對(duì)齊)。例如：

<thalign="center"

valign="middl"

上面的語句將表頭標(biāo)簽<th>指定的單元格內(nèi)容的對(duì)齊方式設(shè)置為單元格中部（水平居中、垂直居中）。

<tdalign="left"

valign="bottom">

上面的語句將單元格標(biāo)簽<td>指定的單元格內(nèi)容的對(duì)齊方式設(shè)置為單元格左下方（左對(duì)齊、底端對(duì)齊）。52

6．表格顏色與背景

HTML

還支持表格的顏色與背景圖像的設(shè)置。表格顏色與背景可分表格整體的顏色與背景和單元格的顏色與背景。表格整體的顏色和背景由<table>標(biāo)簽的附帶屬性設(shè)置，格式如下：

<tablebordercolor="

bgcolor="

background="

其中，bordercolor

指定邊框顏色，bgcolor

屬性指定表格背景色，background

屬性指定表格背景圖像。如果同時(shí)指定了背景色和背景圖像，則背景色被背景圖像覆蓋。單元格的顏色和背景由<th>標(biāo)簽或<td>標(biāo)簽的附帶屬性設(shè)置，格式如下：

<th

bgcolor="

background="

<td

bgcolor="

background="

其中，bgcolor

屬性指定單元格背景色，background

屬性指定單元格背景圖像。如果同時(shí)指定了背景色和背景圖像，則背景色被背景圖像覆蓋。如果即為一個(gè)表格指定的整體的背景色或背景圖像，又為其中的單元格指定了背景色或背景圖像，則整體的設(shè)置將被單元格的設(shè)置所覆蓋。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>表格顏色與背景</title>

</head>

<body>

<table

height="140"

border="5"

cellpadding="5"

bordercolor="#FF9900"

background="images/back.jpg"

<caption><font

face="黑體"

size="5"

>商品列表</font></caption>

<tr>

<th

height="40"

colspan="2"

bgcolor="#0000CC"><font

color="white">數(shù)碼設(shè)備

</font></th>

<th

colspan="3"

bgcolor="#0000CC"><font

color="white">辦公設(shè)備</font></th>

</tr>

<tr>

<td

width="80"

height="80">數(shù)碼相機(jī)</td>

<td

width="80">數(shù)碼攝相機(jī)</td>

<td

width="60">打印機(jī)</td>

<td

width="100">多功能一體機(jī)</td>

<td

width="60">復(fù)印機(jī)</td>

</tr>

</table>

<br>53

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-14

所示。從圖中可以看到，表格設(shè)置了邊框顏色和背景圖像（皺紋紙圖像），但在表頭<th>標(biāo)簽中又設(shè)置了背景顏色，所以，表頭部分的紙紋圖像被單元格背景色覆蓋。圖2-14表格顏色與背景

7．表格與布局在表格的單元格中，除了可以嵌入文字外，還可以嵌入圖像、動(dòng)畫，甚至是另一個(gè)表格。同時(shí)，由于可以將表格邊框?qū)挾仍O(shè)為0，此時(shí)在瀏覽器中將看不到表格，因此，在網(wǎng)頁設(shè)計(jì)中，除了使用其制作普通的表格外，還常用于網(wǎng)頁的頁面布局。使用表格，可以解決網(wǎng)頁設(shè)計(jì)中的很多問題，如頁面區(qū)域的分割、多列文字/圖像的對(duì)齊、商品清單的設(shè)計(jì)等等，如果沒有表格，解決這些問題就很麻煩。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body

background="images/bg24.jpg">

<h1

align="center">商品價(jià)目表</h1>

<hr>

<table

border="0"

cellspacing="0"

cellpadding="0"

<tr>

<td

width="60"

height="30"

align="center"

bgcolor="#CCCCCC"

>產(chǎn)品

ID</td>

<td

width="70"

align="center"

bgcolor="#CCCCCC">產(chǎn)品名稱

</td>54

<td

width="70"

align="center"

bgcolor="#CCCCCC">類別

</td>

<td

width="80"

align="center"

bgcolor="#CCCCCC">單位數(shù)量

</td>

<td

width="70"

align="center"

bgcolor="#CCCCCC">單價(jià)

</td>

</tr>

<tr>

<td

height="23"><p>1</p></td>

<td><p>蘋果汁

</p></td>

<td><p>飲料

</p></td>

<td><p>每箱

瓶

</p></td>

</tr>

<tr>

<td

height="21"

bgcolor="#CCCCCC"><p>2</p></td>

<td

bgcolor="#CCCCCC"><p>牛奶

</p></td>

<td

bgcolor="#CCCCCC"><p>飲料

</p></td>

<td

bgcolor="#CCCCCC"><p>每箱

瓶

</p></td>

<td

bgcolor="#CCCCCC"><p>￥19.00</p></td>

</tr>

<tr>

<td

height="21"><p>3</p></td>

<td><p>蕃茄醬

</p></td>

<td><p>調(diào)味品

</p></td>

<td><p>每箱

瓶

</p></td>

</tr>

<tr>

<td

height="19"

bgcolor="#CCCCCC"><p>4</p></td>

<tdbgcolor="#CCCCCC"><p>鹽

</p></td>

<td

bgcolor="#CCCCCC"><p>調(diào)味品

</p></td>

<td

bgcolor="#CCCCCC"><p>每箱

瓶

</p></td>

<td

bgcolor="#CCCCCC"><p>￥22.00</p></td>

</tr>

<tr>

<td

height="23"><p>5</p></td>

<td

><p>麻油

</p></td>

<td><p>調(diào)味品

</p></td>

<td><p>每箱

瓶

</p></td>

</tr>

</table>55

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-15

所示。從圖中可以看到，利用表格的靈活特性，在網(wǎng)頁中顯示出了一個(gè)清晰的商品價(jià)目列表。圖2-15商品價(jià)目表

2.2.3

列表樣式在格式排版中，列表也是網(wǎng)頁中常用的排版樣式，常用于商品列表、合同條例、項(xiàng)目展示等。HTML提供三種列表方式：有序列表、無序列表和自定義列表。

1．有序列表有序列表是一個(gè)項(xiàng)目序列，各項(xiàng)目前加有數(shù)字作標(biāo)記。有序列表以<ol>標(biāo)簽開始，至</ol>

結(jié)束，其中，每個(gè)列表項(xiàng)目以<li>標(biāo)簽開始。例如：

<ol>

<li>項(xiàng)目

</li>

<li>項(xiàng)目

</li>

<li>項(xiàng)目

</li>

</ol>

上面語句在瀏覽器中顯示結(jié)果如下：

項(xiàng)目

<ol>標(biāo)簽中還可以設(shè)置屬性，其使用格式如下：

<ol

start="

type="

其中，start

屬性用于設(shè)置列表的起始項(xiàng)，即列表中第一項(xiàng)的序號(hào)，缺省時(shí)從

開始；type

用于設(shè)置列表的樣式，可用的有

1（數(shù)字）、i（小寫羅馬數(shù)字）、I（大寫羅馬數(shù)字）、a（小寫56

字母）和

A（大寫字母），缺省時(shí)為數(shù)字。此外，項(xiàng)目中還可以加入段落、圖像和鏈接，以及其他列表等等，如果列表項(xiàng)目中是另一個(gè)列表，則可以構(gòu)成多層列表。例如：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<ol

start="5"

type="I"</li>>

<li>食品

<ol

type="a">

</ol>

<ol

type="a">

</ol>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-16

所示。圖2-16嵌套的有序列表57

2．無序列表無序列表也是一個(gè)項(xiàng)目序列，與有序列表不同的是，無序列表各項(xiàng)目前不是以數(shù)字序號(hào)而是以圖形作標(biāo)記。無序列表以<ul>標(biāo)簽開始，至</ul>結(jié)束，其中，每個(gè)列表項(xiàng)目以<li>標(biāo)簽開始。無序列表的使用與有序列表相似，可以嵌套，也可以有不同的列表樣式，無序列表標(biāo)簽

<ul>的

type屬性可以有三種屬性值：disc（圓點(diǎn)）、circle（圓）、square（方塊）。無序列表的使用舉例如下：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

</head>

<body>

<ul

type="disc"

<ul

type="circle">

<li>牛奶

<ul

type="square">

</ul>

</ul>

</li>

<ul>

</ul>

</body>

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-17

所示。58

圖2-17無序列表

3．自定義列表除有序列表與無序列表外，HTML

還支持自定義列表。與有序列表和無序列表不同，自定義列表不是一個(gè)項(xiàng)目的序列，它是一系列條目和相關(guān)的說明文字，實(shí)際上，可以把它看成是一種縮進(jìn)排版格式。自定義列表以<dl>標(biāo)簽開始，以</dl>標(biāo)簽結(jié)束，自定義列表?xiàng)l目以標(biāo)簽<dt>表示，自定義列表的說明以標(biāo)簽<dd>表示。自定義列表示例如下：

<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML

1.0

Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html

xmlns="/1999/xhtml">

<head>

<meta

http-equiv="Content-Type"

content="text/html?

charset=utf-8"

<title>自定義列表</title>

</head>

<body>

<dl>

<dt>食品

</dt>

<dt>日用品

</dt>

</dl>

</body>59

</html>

上面的網(wǎng)頁在瀏覽器中顯示效果如圖

2-18

所示。圖2-18自定義列表

2.3

網(wǎng)頁鏈接

2.3.1

網(wǎng)頁之間的鏈接超級(jí)鏈接簡稱為超鏈接，是網(wǎng)絡(luò)中的重要內(nèi)容。如果沒有超級(jí)鏈接，在瀏覽網(wǎng)頁時(shí)就需要不停的在地址欄中輸入新的

url

來跳到其它網(wǎng)頁，這是讓人無法接受的，如果是這樣，可能互聯(lián)網(wǎng)就不會(huì)是今天這個(gè)樣子。有了超級(jí)鏈接，用戶在瀏覽網(wǎng)頁時(shí)，就可以方便地跳轉(zhuǎn)到所要瀏覽的頁面，而網(wǎng)頁設(shè)計(jì)者也能夠以此來引導(dǎo)用戶瀏覽希望其瀏覽的頁面（如廣告頁面）。

HTML

中可以使用超級(jí)鏈接來連接到網(wǎng)絡(luò)上的其他頁面，也可以使用超級(jí)鏈接來跳轉(zhuǎn)到當(dāng)前頁面的另一個(gè)位置，甚至還可以使用超級(jí)連接來打開電子郵件程序來編輯電子郵件。網(wǎng)絡(luò)中，使用最多的超級(jí)鏈接是網(wǎng)頁文件之間的超級(jí)鏈接，它使得用戶可以從一個(gè)頁面直接跳轉(zhuǎn)到另一個(gè)頁面繼續(xù)瀏覽，也可以讓用戶跳轉(zhuǎn)到其他的圖象或者服務(wù)器。超級(jí)鏈接的基本格式如下：

href="

">鏈接</a>

其中，標(biāo)簽<a>表示一個(gè)鏈接的開始，</a>表示鏈接的結(jié)束，標(biāo)簽之間的文字/圖像就是顯示在網(wǎng)頁中的超鏈接文字/圖像。屬性

href定義了該鏈接所要跳轉(zhuǎn)到的位置，通常是一個(gè)

url。這樣，就可能通過單擊“鏈接”可以到達(dá)指定的位置。例如：

href="/">新浪</a>

對(duì)于上面的語句，在瀏覽時(shí)，就可以通過單擊網(wǎng)頁上的鏈接文字“新浪”而打開新浪網(wǎng)首頁。在鏈接部分除了可以是文字外，還可以是圖像、動(dòng)畫、菜單選項(xiàng)等任何能夠在網(wǎng)頁上顯示的對(duì)象。

人人文庫> 全部分類> 行業(yè)資料 > 醫(yī)學(xué)制藥

溫馨提示

1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評(píng)論

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章 網(wǎng)頁設(shè)計(jì)基礎(chǔ)

文檔簡介

溫馨提示

最新文檔

評(píng)論

相關(guān)文檔

《ASP動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)與應(yīng)用（第2版）》第2章網(wǎng)頁設(shè)計(jì)基礎(chǔ)