網頁設計第九章網頁制作初步

第九章網頁制作初步

第九章網頁制作初步

9.1HTML語言

9.2Web技術

9.3FrontPage2000

■■■I|x

第九章網頁制作初步

Web網頁是一個文本文件，其中包含文本、圖

形和超鏈接等元素。制作網頁的基本技術標準是

超文本標記語言(HTML,HyperTextMarkup

Language)o

HTML是根據國際標準化組織（ISO）的廣義置

標語言SGML(StandardGeneralizedMarkup

Language）標準定義的，它規(guī)定了文檔的邏輯組

織格式，包含了文本、圖像、動畫、表單和鏈接

等多種形式。

aiBaBS

第九章網頁制作初步

9.1HTML語言

由至ML雷理erT筋tMarkupLanguage燧，

文本標記語言）是標準文檔格式化系統(tǒng)，乏

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

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

第九章網頁制作初步

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

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

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

輸入一段文本，再給文本加上HTML標記

，然后以擴展名htm或html存盤。

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

控制標記對大小寫不敏感，同時控制標記用“<

〉”進行區(qū)分。

第九章網頁制作初步

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

括起來“，就像括號一樣。

⑵〈HEAD〉和〈/HEAD〉標記，把全部控制部分

括起來。

⑶〈TITLE〉和〈/TITLE》標記，把頁面標題括

起來。

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

括起來。

第九章網頁制作初步

HTML標記一般配對使用，只有少數標記單獨使用。

廠例如：]

⑴〈P〉表示一個自然段落的結束，一般加在兩

個自然段落之間，此時〈/P〉被省略。

⑵<BR〉表示轉行（斷行），不表示自然段落的

結束。與〈P>標記相比，〈BR〉標記因為產生的行間

距較小，被廣泛使用。

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

第九章網頁制作初步

2.超級鏈接

超級鏈接是指多個Web頁面通過關鍵字或

圖像連結起來，通過關鍵字或圖的單擊操作

,可以自動切換內容的技術。帶有“鏈接”

的文本文件叫做超文本。鏈接所使用的關鍵

字一般為藍色下劃線的文字標志，通過＜A

HREF二….〉和〈”〉標記實現。

留01IF

第九章網頁制作初步

⑴本地鏈接。本地鏈接與網絡無關，通過鏈接

把本地的HTML文件鏈接起來構成信息整體。

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

</A>

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

(URL),鏈接遠程其它計算機上的HTML文件。

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

新疆大學主頁〈/A〉。

演示例9

3

第九章網頁制作初步

9.1.1文字控制］

有關控制文字的HTML標記是：〈FONT〉…〈/FONT〉

常見的屬性參數如下：

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

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

FACE二規(guī)定字體

ir

第九章網頁制作初步

/^HTML標記中，下列標記也能進行字體顯示效果\

的控制：

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

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

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

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

\?齊顯示

aiBaBS

第九章網頁制作初步

9.1.2圖像和動畫

__插__入.__圖__形__或__動__畫__的__標__記__是__：._＜__IM_G__S._R_C_二__〃_文_件_名__〃__》_/

有以下屬性:

SRC=〃...〃圖象（動畫）文件的URL地址文件名。

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

文字信息。

ALIGNS...”確定圖像的對齊方式。

1

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

——______寅示

第九章網頁制作初步

9.L3整體控制

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

屬性：

BACKGROUND=構成背景的圖片文件名。

BGCOLORS...”背景顏色。TEXT二〃...〃默認文本顏色。

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

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

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

圖像邊界的寬度，單位是像素點。

第九章網頁制作初步

9?1.4表格標記

//表格的標記是\

/〈TABLE>...</TABLE>

<f屬性語法如下：

\⑴邊線控制：BORDERS..

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

■0FlIV

第九章網頁制作初步

表格的行標記是〈TR>..?</TR>

屬性語法如下：

ALIGH=“.”行中單元水平對齊方式

VALIGN=〃...〃表行中垂直對齊方式

IT

第九章網頁制作初步

表格的列標記是<TD〉..?</TD>

屬性語法如下：

ALIGN=〃??.〃單元內容水平對齊方式

VALIGN=〃??.〃單元內容垂直對齊方式

ROWSPAN=〃...〃該單元跨過的行數;

COLSPAN=〃...〃該單元跨過的列數。

■S

第九章網頁制作初步

9.L5其它控制標記

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

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

作工具的迅速普及，不常用的標記已經沒有必須

記憶的必要。用戶只要知道最常用的一些標記，

就可以學習XML、ASP和JavaScript等更強勁的信

息控制技術。

留0

第九章網頁制作初步

⑴幀標記<FRAMESET>

、（2）表單標記〈FORM〉…〈/FORM〉

y

表單包含的控制標記是：（INPUT〉。

〈INPUT〉標記具有豐富的屬性參數，語法如下:

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

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

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

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

aiBaBS

第九章網頁制作初步

小結:

?HTML概念

?認識WEB頁

?HTML標記簡介

留01IF

第九章網頁制作初步

9.2Web技術

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

以訪問DBMS和在線商務活動等功能為代表的

動態(tài)Web應用程序成為計算機發(fā)展的熱門技

術之一O

動態(tài)Web技術也是基于客戶機/服務器結構

的，在總體上可分為客戶端擴展技術和服務

器端擴展技術兩大類，以客戶機/服務器應

工用模式為基礎

二_________________________________7

aiBaBS

第九章網頁制作初步

在客戶端擴展的技術主要是

JavaScript>VBScript、PerL,

Applets、ActiveX、XML、CSS

和Flash等。

服務器端擴展的技術主

要是CGI、ISAPLNSAPI、

SSLASP、PHP、JSP和

Net等。

留01IF

第九章網頁制作初步

1.客戶端擴展技術

客戶端擴展技術是指瀏覽器中集成或增加的

支持數據變動的新技術，提高了Web頁面的實

用化程度。客戶端擴展技術可以驗證交互數

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

功能，甚至可以在頁面內制作游戲程序。

第九章網頁制作初步

2.標記擴展

為了讓Web“動”起來，HTML本身的標記規(guī)則

也在進一步擴展和改進，CSS（疊層式表單語

言）以精良的界面裝飾技術占據了不可替代

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

方式，允許設計者自己定義Web頁面的樣式，

具有更好的易用性和擴展性。XML（擴展式標

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

定義的控制標記，可以有效地降低閱讀的復

雜性。

第九章網頁制作初步

3,服務器端擴展技術

瀏覽器擴展技術和服務器擴展技術總是聯合使

用，動態(tài)Web技術的發(fā)展主流是服務器擴展技術。

動態(tài)Web頁面最好是服務器和瀏覽器共同協(xié)作，才

能達到較好的網絡應用效果。

CGI（CommonGatewayInterface,通用公共網關

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

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

aiBaBS

第九章網頁制作初步

4.ASP(ActiveXServerPages)

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

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

標記與ActiveX控件程序結合使用，建立高效的動

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

ASP指令標記(腳本)使用特殊符號(<%%>)加

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

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

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

覽器端。一

aiBaBS

第九章網頁制作初步

5.PHP(HypertextPreprocessor)

cPHP也是一種服務器端嵌入式腳本

標記語言，其工作原理與ASP和JSP

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

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

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

RedHatLinux,已被很多Internet

站點所采用。

留01IF

第九章網頁制作初步

9.3FrontPage2000

……

FrontPage2000是Microsoft公司推出的

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

窺，充分體現了“所見即所得”制作效果，

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

操作簡單和交互能力強的特點吸引了廣大的專

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

，??

P

第九章網頁制作初步

T具欄

1.用戶界面標題欄

KMicrosoftFront1□Ix|

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

囤M

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

［（無）▼（默認字體）?普通，BZUE在串隼,,

任務

\普通碑比4預覽7臼

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

欄

第九章網頁制作初步

FrontPage2000提供了6種視圖方式

1.網頁視圖4.導航視圖口

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

3.報表視圖6.任務視圖

網頁視圖上，有3種頁面模式

(1)普通標簽

⑵HTML標簽

(3)預覽標簽

第九章網頁制作初步

2文字符號處理

在FrontPage2000窗口的“普通”標簽頁面中,

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

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

網頁中需要重;

I一般具有4

點突出的內容（大種段落的對齊

小標題等）應米用方式：左對齊、

比較突出的顏色，居中對齊、右

而正文則最好采用對齊和兩端對

?一的顏色。J

F0網國國國

第九章網頁制作初步

9.3.1超鏈接

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

組成：超鏈接主體和超鏈接目標地址。超鏈接主

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

當鼠標指針移動到超鏈接的主體

上時，鼠標指針將會變成一個手的

形狀。超鏈接目標地址是指鼠標單

擊后，將要顯示內容，即切換對彖。）

F

第九章網頁制作初步

書簽用來標記網頁中的信

息位置，因而建立頁內超鏈

接。當一個頁面文件很大或

者要定位光標位置時，書簽

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

書簽超鏈接時，首先必須定

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

向書簽。

第九章網頁制作初步

9.3.2圖像控制

FrontPage2000對Web中插入圖像的技術，提供

了比較完整的技術支持。

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

越性，極大地加快網頁制作的效率和提高網頁制

作的質量。

第九章網頁制作初步

9.3.3表格處理

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

和布局頁面。但是，表格標記是屬于比

較復雜的標記，手工編寫容易出錯。

第九章網頁制作初步

9.3.4動態(tài)元素

在網上瀏覽網頁時，經?？梢钥吹接行┰?/p>

在運動，為了能夠容易制作網頁的動態(tài)效果，

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

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

“插入”菜單中“組件”選項（或工具欄中的組

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

留01IF

第九章網頁制作初步

1.橫幅廣告

FrontPage2000中，可以制作幾幅圖片

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

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

第九章網頁制作初步

2.懸停按鈕

懸停按鈕是一個動感按鈕，如果把鼠標

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

如果單擊該按鈕時，就會鏈接到另一個頁

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

框的文字按鈕。

第九章網頁制作初步

3.字幕

可以滾動的文字一般稱為字幕。在很多網

頁中都可以看到滾動字幕，特別醒目，經

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

滾動字幕在網頁中的效果是：包含一些文

字或〃'圖片的一個方框沿著一個方向滾動

或來回滾動。

覷同國

第九章網頁制作初步

4.站點計數器

站點計數器的主要功能是顯示被訪問的

次數。瀏覽者訪問網頁時，站點計數器

中的數字就會增加，就可以實現訪問統(tǒng)

計的目的。只有將包含計數器的網頁從

Web服務器進行發(fā)布后，站點計數器才能

正常工作。

第九章網頁制作初步

5.DHTML

DHTML是表示動態(tài)元素的HTML技術。使

用DHTML技術可以把所選定的網頁元素設

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

第九章網頁制作初步

6.過渡效果

網頁過渡效果是指當瀏覽者進入或離開

網頁時所產生的效果。

網頁過渡

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

無效

果

混

合

盒

收縮

狀

盒

放射

周期砌@）:狀

圓

收縮

形

圓

放射

形

向

擦除

上

向

擦除

下

向

擦除

右