網(wǎng)頁(yè)設(shè)計(jì)第九章網(wǎng)頁(yè)制作初步

第九章網(wǎng)頁(yè)制作初步

第九章網(wǎng)頁(yè)制作初步

9.1HTML語(yǔ)言

9.2Web技術(shù)

9.3FrontPage2000

■■■I|x

第九章網(wǎng)頁(yè)制作初步

Web網(wǎng)頁(yè)是一個(gè)文本文件，其中包含文本、圖

形和超鏈接等元素。制作網(wǎng)頁(yè)的基本技術(shù)標(biāo)準(zhǔn)是

超文本標(biāo)記語(yǔ)言(HTML,HyperTextMarkup

Language)o

HTML是根據(jù)國(guó)際標(biāo)準(zhǔn)化組織（ISO）的廣義置

標(biāo)語(yǔ)言SGML(StandardGeneralizedMarkup

Language）標(biāo)準(zhǔn)定義的，它規(guī)定了文檔的邏輯組

織格式，包含了文本、圖像、動(dòng)畫(huà)、表單和鏈接

等多種形式。

aiBaBS

第九章網(wǎng)頁(yè)制作初步

9.1HTML語(yǔ)言

由至ML雷理erT筋tMarkupLanguage燧，

文本標(biāo)記語(yǔ)言）是標(biāo)準(zhǔn)文檔格式化系統(tǒng)，乏

使用HTML控制信息的文本文件被稱(chēng)為HTMll

:交件在西楸eb文件。至爰其全二毒爰三叁；

第九章網(wǎng)頁(yè)制作初步

1.創(chuàng)建簡(jiǎn)單Web頁(yè)

使用普通的文本編輯器就可以創(chuàng)建

Web文件。方法是：在文本編輯器中，

輸入一段文本，再給文本加上HTML標(biāo)記

，然后以擴(kuò)展名htm或html存盤(pán)。

HTML文件由控制部分和正文部分組成。HTML的

控制標(biāo)記對(duì)大小寫(xiě)不敏感，同時(shí)控制標(biāo)記用“<

〉”進(jìn)行區(qū)分。

第九章網(wǎng)頁(yè)制作初步

(1)〈HTML〉和〈/HTML〉標(biāo)記，把全部源代碼“

括起來(lái)“，就像括號(hào)一樣。

⑵〈HEAD〉和〈/HEAD〉標(biāo)記，把全部控制部分

括起來(lái)。

⑶〈TITLE〉和〈/TITLE》標(biāo)記，把頁(yè)面標(biāo)題括

起來(lái)。

(4)〈BODY〉和〈/BODY〉標(biāo)記，把全部正文部分

括起來(lái)。

第九章網(wǎng)頁(yè)制作初步

HTML標(biāo)記一般配對(duì)使用，只有少數(shù)標(biāo)記單獨(dú)使用。

廠(chǎng)例如：]

⑴〈P〉表示一個(gè)自然段落的結(jié)束，一般加在兩

個(gè)自然段落之間，此時(shí)〈/P〉被省略。

⑵<BR〉表示轉(zhuǎn)行（斷行），不表示自然段落的

結(jié)束。與〈P>標(biāo)記相比，〈BR〉標(biāo)記因?yàn)楫a(chǎn)生的行間

距較小，被廣泛使用。

J⑶〈HR〉表小固水半線(xiàn)。J

第九章網(wǎng)頁(yè)制作初步

2.超級(jí)鏈接

超級(jí)鏈接是指多個(gè)Web頁(yè)面通過(guò)關(guān)鍵字或

圖像連結(jié)起來(lái)，通過(guò)關(guān)鍵字或圖的單擊操作

,可以自動(dòng)切換內(nèi)容的技術(shù)。帶有“鏈接”

的文本文件叫做超文本。鏈接所使用的關(guān)鍵

字一般為藍(lán)色下劃線(xiàn)的文字標(biāo)志，通過(guò)＜A

HREF二….〉和〈”〉標(biāo)記實(shí)現(xiàn)。

留01IF

第九章網(wǎng)頁(yè)制作初步

⑴本地鏈接。本地鏈接與網(wǎng)絡(luò)無(wú)關(guān)，通過(guò)鏈接

把本地的HTML文件鏈接起來(lái)構(gòu)成信息整體。

例如：包含〈ahref=〃hl.htm〃〉單擊此處

</A>

⑵異地鏈接。通過(guò)Internet的統(tǒng)一資源定位器

(URL),鏈接遠(yuǎn)程其它計(jì)算機(jī)上的HTML文件。

例如：〈AHREF="http://www.xju.edu.cn〃〉

新疆大學(xué)主頁(yè)〈/A〉。

演示例9

3

第九章網(wǎng)頁(yè)制作初步

9.1.1文字控制］

有關(guān)控制文字的HTML標(biāo)記是：〈FONT〉…〈/FONT〉

常見(jiàn)的屬性參數(shù)如下：

規(guī)定字體的大小尺寸

COLORS規(guī)定文字的顏色。

FACE二規(guī)定字體

ir

第九章網(wǎng)頁(yè)制作初步

/^HTML標(biāo)記中，下列標(biāo)記也能進(jìn)行字體顯示效果\

的控制：

<SMALL></SMALL>規(guī)定〃'字體顯示

<BIG>……</BIG>規(guī)定大字體顯示

<B></B>規(guī)定黑體字顯示

<Center></Center>規(guī)定文字居中

\?齊顯示

aiBaBS

第九章網(wǎng)頁(yè)制作初步

9.1.2圖像和動(dòng)畫(huà)

__插__入.__圖__形__或__動(dòng)__畫(huà)__的__標(biāo)__記__是__：._＜__IM_G__S._R_C_二__〃_文_件_名__〃__》_/

有以下屬性:

SRC=〃...〃圖象（動(dòng)畫(huà)）文件的URL地址文件名。

ALT=〃...〃在圖像未完全收到時(shí)，圖像位置顯示的

文字信息。

ALIGNS...”確定圖像的對(duì)齊方式。

1

________一-一"""""7；-?__

——______寅示

第九章網(wǎng)頁(yè)制作初步

9.L3整體控制

頁(yè)面的整體控制屬性在＜BODY＞標(biāo)記中，常用的以下

屬性：

BACKGROUND=構(gòu)成背景的圖片文件名。

BGCOLORS...”背景顏色。TEXT二〃...〃默認(rèn)文本顏色。

LINK二〃...〃未被訪(fǎng)問(wèn)的文字鏈接源的顏色。

ALINK=〃...〃被激活的文字鏈接源的顏色。

VLINK=〃...〃訪(fǎng)問(wèn)過(guò)的文字鏈接源的顏色。BORDER='

圖像邊界的寬度，單位是像素點(diǎn)。

第九章網(wǎng)頁(yè)制作初步

9?1.4表格標(biāo)記

//表格的標(biāo)記是\

/〈TABLE>...</TABLE>

<f屬性語(yǔ)法如下：

\⑴邊線(xiàn)控制：BORDERS..

\⑵寬度控制：WIDTH=〃...〃

■0FlIV

第九章網(wǎng)頁(yè)制作初步

表格的行標(biāo)記是〈TR>..?</TR>

屬性語(yǔ)法如下：

ALIGH=“.”行中單元水平對(duì)齊方式

VALIGN=〃...〃表行中垂直對(duì)齊方式

IT

第九章網(wǎng)頁(yè)制作初步

表格的列標(biāo)記是<TD〉..?</TD>

屬性語(yǔ)法如下：

ALIGN=〃??.〃單元內(nèi)容水平對(duì)齊方式

VALIGN=〃??.〃單元內(nèi)容垂直對(duì)齊方式

ROWSPAN=〃...〃該單元跨過(guò)的行數(shù);

COLSPAN=〃...〃該單元跨過(guò)的列數(shù)。

■S

第九章網(wǎng)頁(yè)制作初步

9.L5其它控制標(biāo)記

HTML標(biāo)記非常多，而且數(shù)量和規(guī)則一直還處于

不斷發(fā)展變化的過(guò)程中，隨著可視化網(wǎng)頁(yè)自動(dòng)制

作工具的迅速普及，不常用的標(biāo)記已經(jīng)沒(méi)有必須

記憶的必要。用戶(hù)只要知道最常用的一些標(biāo)記，

就可以學(xué)習(xí)XML、ASP和JavaScript等更強(qiáng)勁的信

息控制技術(shù)。

留0

第九章網(wǎng)頁(yè)制作初步

⑴幀標(biāo)記<FRAMESET>

、（2）表單標(biāo)記〈FORM〉…〈/FORM〉

y

表單包含的控制標(biāo)記是：（INPUT〉。

〈INPUT〉標(biāo)記具有豐富的屬性參數(shù)，語(yǔ)法如下:

TYPE="表示控制部件的類(lèi)型，

NAME=“表示該控制部件的名稱(chēng)。

SIZE=表示該控制部件的大小。

alue二”??.”表示該控制部件所具有的值。

aiBaBS

第九章網(wǎng)頁(yè)制作初步

小結(jié):

?HTML概念

?認(rèn)識(shí)WEB頁(yè)

?HTML標(biāo)記簡(jiǎn)介

留01IF

第九章網(wǎng)頁(yè)制作初步

9.2Web技術(shù)

Web的面貌已經(jīng)發(fā)生了非常重要的變化，

以訪(fǎng)問(wèn)DBMS和在線(xiàn)商務(wù)活動(dòng)等功能為代表的

動(dòng)態(tài)Web應(yīng)用程序成為計(jì)算機(jī)發(fā)展的熱門(mén)技

術(shù)之一O

動(dòng)態(tài)Web技術(shù)也是基于客戶(hù)機(jī)/服務(wù)器結(jié)構(gòu)

的，在總體上可分為客戶(hù)端擴(kuò)展技術(shù)和服務(wù)

器端擴(kuò)展技術(shù)兩大類(lèi)，以客戶(hù)機(jī)/服務(wù)器應(yīng)

工用模式為基礎(chǔ)

二_________________________________7

aiBaBS

第九章網(wǎng)頁(yè)制作初步

在客戶(hù)端擴(kuò)展的技術(shù)主要是

JavaScript>VBScript、PerL,

Applets、ActiveX、XML、CSS

和Flash等。

服務(wù)器端擴(kuò)展的技術(shù)主

要是CGI、ISAPLNSAPI、

SSLASP、PHP、JSP和

Net等。

留01IF

第九章網(wǎng)頁(yè)制作初步

1.客戶(hù)端擴(kuò)展技術(shù)

客戶(hù)端擴(kuò)展技術(shù)是指瀏覽器中集成或增加的

支持?jǐn)?shù)據(jù)變動(dòng)的新技術(shù)，提高了Web頁(yè)面的實(shí)

用化程度?？蛻?hù)端擴(kuò)展技術(shù)可以驗(yàn)證交互數(shù)

據(jù)的合法性，進(jìn)行數(shù)據(jù)計(jì)算、分類(lèi)和統(tǒng)計(jì)等

功能，甚至可以在頁(yè)面內(nèi)制作游戲程序。

第九章網(wǎng)頁(yè)制作初步

2.標(biāo)記擴(kuò)展

為了讓W(xué)eb“動(dòng)”起來(lái)，HTML本身的標(biāo)記規(guī)則

也在進(jìn)一步擴(kuò)展和改進(jìn)，CSS（疊層式表單語(yǔ)

言）以精良的界面裝飾技術(shù)占據(jù)了不可替代

的技術(shù)角色，它支持三維立體的超文本組織

方式，允許設(shè)計(jì)者自己定義Web頁(yè)面的樣式，

具有更好的易用性和擴(kuò)展性。XML（擴(kuò)展式標(biāo)

記語(yǔ)言）是HTML語(yǔ)言的改良版，支持用戶(hù)自

定義的控制標(biāo)記，可以有效地降低閱讀的復(fù)

雜性。

第九章網(wǎng)頁(yè)制作初步

3,服務(wù)器端擴(kuò)展技術(shù)

瀏覽器擴(kuò)展技術(shù)和服務(wù)器擴(kuò)展技術(shù)總是聯(lián)合使

用，動(dòng)態(tài)Web技術(shù)的發(fā)展主流是服務(wù)器擴(kuò)展技術(shù)。

動(dòng)態(tài)Web頁(yè)面最好是服務(wù)器和瀏覽器共同協(xié)作，才

能達(dá)到較好的網(wǎng)絡(luò)應(yīng)用效果。

CGI（CommonGatewayInterface,通用公共網(wǎng)關(guān)

接口）是最先發(fā)展起來(lái)的動(dòng)態(tài)Web技術(shù)、是一種接口

規(guī)范，定義了交互操作中雙方必須遵守的規(guī)則集。

aiBaBS

第九章網(wǎng)頁(yè)制作初步

4.ASP(ActiveXServerPages)

ASP是微軟公司面向大眾化的動(dòng)態(tài)Web技術(shù)方案，

建立了一整套動(dòng)態(tài)Web服務(wù)器環(huán)境，可使ASP指令

標(biāo)記與ActiveX控件程序結(jié)合使用，建立高效的動(dòng)

態(tài)Web應(yīng)用程序。

ASP指令標(biāo)記(腳本)使用特殊符號(hào)(<%%>)加

以標(biāo)注，例如：<%=Now()%>o含有ASP腳本的

Web頁(yè)面以asp為后綴名，全部ASP腳本都在Web服

務(wù)器端執(zhí)行，Web服務(wù)器僅將執(zhí)行的結(jié)果發(fā)送到瀏

覽器端。一

aiBaBS

第九章網(wǎng)頁(yè)制作初步

5.PHP(HypertextPreprocessor)

cPHP也是一種服務(wù)器端嵌入式腳本

標(biāo)記語(yǔ)言，其工作原理與ASP和JSP

相似，它的特色是高速，比ASP執(zhí)行

速度更快。PHP腳本采用了C、Java

和Perl等多種語(yǔ)法格式，源于

RedHatLinux,已被很多Internet

站點(diǎn)所采用。

留01IF

第九章網(wǎng)頁(yè)制作初步

9.3FrontPage2000

……

FrontPage2000是Microsoft公司推出的

i)ffic套為ooo系列辦公套裝軟件之一，使用方「

窺，充分體現(xiàn)了“所見(jiàn)即所得”制作效果，

一——————————————————一—一————————————————————————————————————————————————

操作簡(jiǎn)單和交互能力強(qiáng)的特點(diǎn)吸引了廣大的專(zhuān)

^二-三―二―二二-三—二—二二-三―二-二三二二-三―二—二二-三―二―二二-三—二?三J

，??

P

第九章網(wǎng)頁(yè)制作初步

T具欄

1.用戶(hù)界面標(biāo)題欄

KMicrosoftFront1□Ix|

菜單欄文件（E）編輯3s＞（v）插入①格式@xa（i）表格?框架?窗口曲）幫助（由JL

囤M

D，］，同篇|晅卜身毆呼|X電包◎'I?n

［（無(wú)）▼（默認(rèn)字體）?普通，BZUE在串隼,,

任務(wù)

\普通碑比4預(yù)覽7臼

狀態(tài)：要獲取幫助，語(yǔ)按F1

欄

第九章網(wǎng)頁(yè)制作初步

FrontPage2000提供了6種視圖方式

1.網(wǎng)頁(yè)視圖4.導(dǎo)航視圖口

2.文件夾視圖5.超鏈接視圖

3.報(bào)表視圖6.任務(wù)視圖

網(wǎng)頁(yè)視圖上，有3種頁(yè)面模式

(1)普通標(biāo)簽

⑵HTML標(biāo)簽

(3)預(yù)覽標(biāo)簽

第九章網(wǎng)頁(yè)制作初步

2文字符號(hào)處理

在FrontPage2000窗口的“普通”標(biāo)簽頁(yè)面中,

對(duì)文字信息輸入和編輯的處理方法；常用工具和

格式工具的外形也基本上與Word相似。

網(wǎng)頁(yè)中需要重;

I一般具有4

點(diǎn)突出的內(nèi)容（大種段落的對(duì)齊

小標(biāo)題等）應(yīng)米用方式：左對(duì)齊、

比較突出的顏色，居中對(duì)齊、右

而正文則最好采用對(duì)齊和兩端對(duì)

?一的顏色。J

F0網(wǎng)國(guó)國(guó)國(guó)

第九章網(wǎng)頁(yè)制作初步

9.3.1超鏈接

在FrontPage2000中，將鏈接被定義為兩部分

組成：超鏈接主體和超鏈接目標(biāo)地址。超鏈接主

體是指引導(dǎo)超鏈接的部分（包含文本和圖像）。

當(dāng)鼠標(biāo)指針移動(dòng)到超鏈接的主體

上時(shí)，鼠標(biāo)指針將會(huì)變成一個(gè)手的

形狀。超鏈接目標(biāo)地址是指鼠標(biāo)單

擊后，將要顯示內(nèi)容，即切換對(duì)彖。）

F

第九章網(wǎng)頁(yè)制作初步

書(shū)簽用來(lái)標(biāo)記網(wǎng)頁(yè)中的信

息位置，因而建立頁(yè)內(nèi)超鏈

接。當(dāng)一個(gè)頁(yè)面文件很大或

者要定位光標(biāo)位置時(shí)，書(shū)簽

超鏈發(fā)揮積極的作用。創(chuàng)建

書(shū)簽超鏈接時(shí)，首先必須定

義書(shū)簽，然后再把超鏈接指

向書(shū)簽。

第九章網(wǎng)頁(yè)制作初步

9.3.2圖像控制

FrontPage2000對(duì)Web中插入圖像的技術(shù)，提供

了比較完整的技術(shù)支持。

FrontPage2000充分體現(xiàn)了圖文混排工具的優(yōu)

越性，極大地加快網(wǎng)頁(yè)制作的效率和提高網(wǎng)頁(yè)制

作的質(zhì)量。

第九章網(wǎng)頁(yè)制作初步

9.3.3表格處理

在Web中，表格可以有效的組織、規(guī)劃

和布局頁(yè)面。但是，表格標(biāo)記是屬于比

較復(fù)雜的標(biāo)記，手工編寫(xiě)容易出錯(cuò)。

第九章網(wǎng)頁(yè)制作初步

9.3.4動(dòng)態(tài)元素

在網(wǎng)上瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)?？梢钥吹接行┰?/p>

在運(yùn)動(dòng)，為了能夠容易制作網(wǎng)頁(yè)的動(dòng)態(tài)效果，

FrontPage2000提供了多種動(dòng)態(tài)效果制作技術(shù)，

并把這些動(dòng)態(tài)元素作為組件集中在一起，通過(guò)

“插入”菜單中“組件”選項(xiàng)（或工具欄中的組

件按鈕）可以插入動(dòng)態(tài)元素。

留01IF

第九章網(wǎng)頁(yè)制作初步

1.橫幅廣告

FrontPage2000中，可以制作幾幅圖片

一幅幅地按照一定的切換效果不斷播放，

還可以控制每一幅圖片顯示的時(shí)間。

第九章網(wǎng)頁(yè)制作初步

2.懸停按鈕

懸停按鈕是一個(gè)動(dòng)感按鈕，如果把鼠標(biāo)

移到該按鈕上，就會(huì)它會(huì)改變顏色和亮度,

如果單擊該按鈕時(shí)，就會(huì)鏈接到另一個(gè)頁(yè)

面。缺省情況下，懸停按鈕是一個(gè)彩色方

框的文字按鈕。

第九章網(wǎng)頁(yè)制作初步

3.字幕

可以滾動(dòng)的文字一般稱(chēng)為字幕。在很多網(wǎng)

頁(yè)中都可以看到滾動(dòng)字幕，特別醒目，經(jīng)

常用來(lái)發(fā)布一些站點(diǎn)的通知或提示信息等。

滾動(dòng)字幕在網(wǎng)頁(yè)中的效果是：包含一些文

字或〃'圖片的一個(gè)方框沿著一個(gè)方向滾動(dòng)

或來(lái)回滾動(dòng)。

覷同國(guó)

第九章網(wǎng)頁(yè)制作初步

4.站點(diǎn)計(jì)數(shù)器

站點(diǎn)計(jì)數(shù)器的主要功能是顯示被訪(fǎng)問(wèn)的

次數(shù)。瀏覽者訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí)，站點(diǎn)計(jì)數(shù)器

中的數(shù)字就會(huì)增加，就可以實(shí)現(xiàn)訪(fǎng)問(wèn)統(tǒng)

計(jì)的目的。只有將包含計(jì)數(shù)器的網(wǎng)頁(yè)從

Web服務(wù)器進(jìn)行發(fā)布后，站點(diǎn)計(jì)數(shù)器才能

正常工作。

第九章網(wǎng)頁(yè)制作初步

5.DHTML

DHTML是表示動(dòng)態(tài)元素的HTML技術(shù)。使

用DHTML技術(shù)可以把所選定的網(wǎng)頁(yè)元素設(shè)

置為動(dòng)態(tài)效果。

第九章網(wǎng)頁(yè)制作初步

6.過(guò)渡效果

網(wǎng)頁(yè)過(guò)渡效果是指當(dāng)瀏覽者進(jìn)入或離開(kāi)

網(wǎng)頁(yè)時(shí)所產(chǎn)生的效果。

網(wǎng)頁(yè)過(guò)渡

事件事:過(guò)渡效果（X）：

無(wú)效

果

混

合

盒

收縮

狀

盒

放射

周期砌@）:狀

圓

收縮

形

圓

放射

形

向

擦除

上

向

擦除

下

向

擦除

右