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

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

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

9.1HTML語言

9.2Web技術(shù)

9.3FrontPage2000

■■■I|x

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

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

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

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

Language)o

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

標(biāo)語言SGML(StandardGeneralizedMarkup

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

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

等多種形式。

aiBaBS

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

9.1HTML語言

由至ML雷理erT筋tMarkupLanguage燧，

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

使用HTML控制信息的文本文件被稱為HTMll

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

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

1.創(chuàng)建簡單Web頁

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

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

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

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

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

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

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

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

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

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

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

括起來。

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

起來。

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

括起來。

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

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

廠例如：]

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

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

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

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

距較小，被廣泛使用。

J⑶〈HR〉表小固水半線。J

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

2.超級(jí)鏈接

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

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

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

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

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

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

留01IF

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

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

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

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

</A>

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

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

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

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

演示例9

3

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

9.1.1文字控制］

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

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

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

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

FACE二規(guī)定字體

ir

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

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

的控制：

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

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

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

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

\?齊顯示

aiBaBS

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

9.1.2圖像和動(dòng)畫

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

有以下屬性:

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

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

文字信息。

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

1

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

——______寅示

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

9.L3整體控制

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

屬性：

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

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

LINK二〃...〃未被訪問的文字鏈接源的顏色。

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

VLINK=〃...〃訪問過的文字鏈接源的顏色。BORDER='

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

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

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

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

/〈TABLE>...</TABLE>

<f屬性語法如下：

\⑴邊線控制：BORDERS..

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

■0FlIV

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

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

屬性語法如下：

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

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

IT

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

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

屬性語法如下：

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

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

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

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

■S

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

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

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

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

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

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

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

息控制技術(shù)。

留0

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

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

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

y

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

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

TYPE="表示控制部件的類型，

NAME=“表示該控制部件的名稱。

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

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

aiBaBS

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

小結(jié):

?HTML概念

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

?HTML標(biāo)記簡介

留01IF

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

9.2Web技術(shù)

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

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

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

術(shù)之一O

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

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

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

工用模式為基礎(chǔ)

二_________________________________7

aiBaBS

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

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

JavaScript>VBScript、PerL,

Applets、ActiveX、XML、CSS

和Flash等。

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

要是CGI、ISAPLNSAPI、

SSLASP、PHP、JSP和

Net等。

留01IF

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

記語言）是HTML語言的改良版，支持用戶自

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

雜性。

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

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頁面最好是服務(wù)器和瀏覽器共同協(xié)作，才

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

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

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

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

aiBaBS

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

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頁面以asp為后綴名，全部ASP腳本都在Web服

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

覽器端。一

aiBaBS

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

5.PHP(HypertextPreprocessor)

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

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

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

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

和Perl等多種語法格式，源于

RedHatLinux,已被很多Internet

站點(diǎn)所采用。

留01IF

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

9.3FrontPage2000

……

FrontPage2000是Microsoft公司推出的

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

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

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

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

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

，??

P

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

T具欄

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

KMicrosoftFront1□Ix|

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

囤M

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

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

任務(wù)

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

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

欄

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

FrontPage2000提供了6種視圖方式

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

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

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

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

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

⑵HTML標(biāo)簽

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

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

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

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

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

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

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

I一般具有4

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

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

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

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

?一的顏色。J

F0網(wǎng)國國國

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

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)頁制作初步

書簽用來標(biāo)記網(wǎng)頁中的信

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

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

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

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

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

義書簽，然后再把超鏈接指

向書簽。

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

9.3.2圖像控制

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

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

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

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

作的質(zhì)量。

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

9.3.3表格處理

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

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

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

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

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

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

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

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

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

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

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

留01IF

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

1.橫幅廣告

FrontPage2000中，可以制作幾幅圖片

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

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

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

2.懸停按鈕

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

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

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

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

框的文字按鈕。

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

3.字幕

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

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

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

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

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

或來回滾動(dòng)。

覷同國

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

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

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

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

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

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

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

正常工作。

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

5.DHTML

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

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

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

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

6.過渡效果

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

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

網(wǎng)頁過渡

事件事:過渡效果（X）：

無效

果

混

合

盒

收縮

狀

盒

放射

周期砌@）:狀

圓

收縮

形

圓

放射

形

向

擦除

上

向

擦除

下

向

擦除

右