Dream weaver網(wǎng)頁(yè)設(shè)計(jì)技術(shù)

第2章Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)技術(shù)

—學(xué)刁目:標(biāo)----------

?面板組、插入菜單、屬性面板的使用

?文本的格式化類(lèi)型

?超鏈接的使用

?用表格組織網(wǎng)頁(yè)

?框架、表單及層的使用

?動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)

返回總目錄

第2章Dreamweaver網(wǎng)頁(yè)設(shè)計(jì)技術(shù)

教學(xué)內(nèi)容

2.1Dreamweaver基研;知識(shí)

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面

2.3鏈接與導(dǎo)航

2.4用表格和表格布局模式布局頁(yè)面

2.5用框架布局頁(yè)面

2.6表單的使用

2.7層的使用

2.8動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)

本章小結(jié)

返回目錄

2.1Dreamweaver基石出知識(shí)

Dreamweaver由

Micromedia公司

出品，是當(dāng)今最

流行的專(zhuān)業(yè)網(wǎng)頁(yè)

設(shè)計(jì)、網(wǎng)站管理、

網(wǎng)頁(yè)可視化編程

應(yīng)用軟件。主要

用于制作網(wǎng)站的

靜態(tài)網(wǎng)頁(yè)，具有

跨平臺(tái)、跨瀏覽

器的特點(diǎn)。左圖

為Dreamweaver

MX2004工作界

DreamweaverMX2004工作界面面。

返回目錄

Dreamweaver基礎(chǔ)知識(shí)一菜單欄

文件(F)翻⑻聒(V)福人⑴腋(M):miF松6站點(diǎn)⑸窗口(W)幫助(H)

菜單欄

“文件”菜單：包含“文件”菜單的標(biāo)準(zhǔn)菜單項(xiàng)。

“編輯”菜單：包含“編輯”菜單的標(biāo)準(zhǔn)菜單項(xiàng)。

“查看”菜單：可以設(shè)置文檔的各種視圖。

“插入”菜單：與“插入”欄功能相似，用于向文檔插入對(duì)象。

“修改”菜單：可以更改選定項(xiàng)目的屬性。

“文本”菜單：用于設(shè)置文本的格式。

“命令”菜單：提供對(duì)各種命令的訪(fǎng)問(wèn)。

“站點(diǎn)”菜單：提供用于管理站點(diǎn)、上傳站點(diǎn)和下載文件的菜單項(xiàng)。

“窗口”菜單：提供對(duì)Dreamweaver中的所有面板、檢查器和窗口

的訪(fǎng)問(wèn)。在窗口菜單中可以設(shè)置面板的打開(kāi)或關(guān)閉。

“幫助”菜單：提供對(duì)Dreamweaver文檔訪(fǎng)問(wèn)的幫助信息，在

Dreamweaver中遇到的大部分問(wèn)題都可以從“幫助”菜

單

中找到答案。

返回目錄

2.1Dreamweaver基礎(chǔ)知識(shí)一插入欄

單擊“插入”欄的下拉按鈕,

出現(xiàn)菜單方式的選項(xiàng)卡。

-ft?

可以根據(jù)插入對(duì)象的不同選衰綽

擇不同類(lèi)別的選項(xiàng)卡，不同選項(xiàng)文本

ITML

卡包含創(chuàng)建不同類(lèi)型對(duì)象的按應(yīng)用

鈕。單擊“顯示為制表符”可轉(zhuǎn)尸laah

為收由夾_________

豆奈汨偉U雙療

常規(guī)樣式的“插入”欄。圖為插

入”

▼插入常用布局袤單文本HTML應(yīng)用桎序Flash元素收藏莢

欄的兩種顯示方式:AEJ，昌|匡）國(guó)-回臼|的,字

“插入”欄的兩種顯示方式

返回目錄

2.1Dreamweaver基礎(chǔ)知識(shí)一文檔工具欄

文檔工具欄如右圖所示,

U犒i酚?計(jì)嫄壬麗

包含按鈕和彈出式菜單,

提供各種“文檔”常用視圖、各種查文檔工具欄

看選項(xiàng)和一些普通操作。文檔工

具欄內(nèi)容從左到右依次為：

代碼視圖：以代碼的形式顯示頁(yè)面，方便文檔代碼編寫(xiě)。

拆分視圖：同時(shí)顯示代碼和設(shè)計(jì)視圖，可同時(shí)看到兩種效

果。

設(shè)計(jì)視圖：以設(shè)計(jì)形式顯示視圖，可看到所見(jiàn)即所得的網(wǎng)頁(yè)

效果。

標(biāo)題：可在標(biāo)題文本框中為文檔輸入或修改標(biāo)題。

服務(wù)器調(diào)試：顯示一個(gè)調(diào)試現(xiàn)行瀏覽器的報(bào)告。

文件管理：顯示“文件管理”彈出式菜單。

在瀏覽器中預(yù)覽/調(diào)試：隨時(shí)預(yù)覽網(wǎng)頁(yè)在瀏覽器中的效果。

返回目錄

2.1Dreamweaver基礎(chǔ)知識(shí)一文檔窗口

文檔窗口用于顯示文檔，有“設(shè)計(jì)視圖”、“代碼視

圖”、“拆分試圖”三種顯示方式。

設(shè)計(jì)視圖：用于可視化頁(yè)面布局、可視化編輯和應(yīng)用

程序開(kāi)發(fā)的設(shè)計(jì)環(huán)境，此視圖類(lèi)似在瀏覽器中查看頁(yè)面。

代碼視圖：用于編寫(xiě)或編輯html、JavaScript＞服務(wù)

器語(yǔ)言代碼、其他類(lèi)型代碼的編碼環(huán)境。

拆分視圖：可以在單個(gè)窗口中同時(shí)看到同一文檔的

“代碼”視圖和“設(shè)計(jì)”視圖。

返回目錄

2.1Dreamweaver基砒｝知識(shí)一屬性面板

屬性面板用于

顯示和修改已選定

對(duì)象的屬性，可以

對(duì)文本、圖像、表

格、層等進(jìn)行屬性

設(shè)置。不同的對(duì)像

對(duì)應(yīng)不同的屬性面

板。

打開(kāi)“窗口”屬性面板

菜單一選“屬性”，

可以顯示或隱藏屬

性面板

8

返回目錄

2.1Dreamweaver基砒｝知識(shí)一面板組

好設(shè)計(jì)

h：?代碼

面板組在工作界面的h?應(yīng)用程序

右邊，如圖所示。單擊面好標(biāo)簽檢查器

板窗口左邊的按鈕，可展文件三

■IL

開(kāi)或折疊整個(gè)面板窗口。r

11囹桌面3管理站點(diǎn)

單擊每一個(gè)面板組左上方

的按鈕，可展開(kāi)或折疊該日面桌面

Bi我的電腦

面板組窗口。E卬網(wǎng)上鄰居

函FTP&RDS服務(wù)器

E)O桌面項(xiàng)目

L_____________?力

面板組

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一創(chuàng)建文檔

1.創(chuàng)建網(wǎng)頁(yè)文件

創(chuàng)建空白網(wǎng)頁(yè)可以用兩種方法：

方法1：在起始頁(yè)“創(chuàng)建新項(xiàng)目”列表中單擊“HTML”，建立一個(gè)

空白

頁(yè)。

方法2：在工作窗口打開(kāi)“文件”菜單一選“新建”一“類(lèi)另列

表中選

“基本頁(yè)”一“基本頁(yè)”列表中選“HTML”一單擊“創(chuàng)建”，建立一

個(gè)空白

頁(yè)。

2.利用Dreamweaver提供的示例文件創(chuàng)建網(wǎng)頁(yè)

“文件”菜單一“新建”一在“類(lèi)別”列表中選一種實(shí)例文檔（如

頁(yè)面設(shè)計(jì)

CSS）T在“頁(yè)面設(shè)計(jì)CSS”列表中選一種網(wǎng)頁(yè)樣式一單擊“創(chuàng)建”，

網(wǎng)頁(yè)

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一創(chuàng)建文檔

3.保存新建立的網(wǎng)頁(yè)

“文件”菜單一“保

頁(yè)面屬性

>分類(lèi)外觀(guān)

存"—題t

頁(yè)面字體但）：|默認(rèn)字體

標(biāo)-3

標(biāo)i

跟大?。簗31'-：_d

指定保存位置、文件名及文本藪色①匚mi

背景顏色也）CJI-

保存類(lèi)型一單擊“保存”。

左邊距電）：Ipz?:jj右邊距也）I卜」

-

4.設(shè)置文檔屬性上邊距比）：Ipn―3下邊距@）If-_J

“修改”菜單一“頁(yè)面I確定|取消］應(yīng)用必）|幫助卸|

屬頁(yè)面屬性對(duì)話(huà)框

性”，打開(kāi)“頁(yè)面屬性”

對(duì)話(huà)

框，如圖所示。通過(guò)“頁(yè)

面

房樁”74*；壬木庠nTIHVvFTFf而

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一設(shè)置文本_________

文本是網(wǎng)頁(yè)元素中主要部分。

1.輸入文本

在文檔窗口單擊，將插入點(diǎn)置于文檔中所需位

置，輸入文本或插入其他網(wǎng)頁(yè)元素。

2.設(shè)置文本格式

文本格式的設(shè)置利用屬性面板完成，屬性面板

可以對(duì)文字標(biāo)題、字體字號(hào)、顏色、對(duì)齊方式、

列表等作設(shè)置。

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一插入水平線(xiàn)

水平線(xiàn)能將網(wǎng)頁(yè)中不同

功能的區(qū)域分割開(kāi)來(lái)。

插入水平線(xiàn)練習(xí)

1.在頁(yè)面單擊鼠標(biāo)確定水平線(xiàn)位

置一“插入”菜單一“水平

線(xiàn)“O

2.速中太平線(xiàn)一在屬性面板為水

平線(xiàn)起名"line-1”。

3.寬度設(shè)為200像素，高度為10

像素，若用“百分比”作寬度

單位，表示寬度占瀏覽器窗口插入水平線(xiàn)

的百分比。設(shè)置水平線(xiàn)在頁(yè)面

中的對(duì)齊方式為“居中對(duì)齊”

如圖4木。

13

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一使用CSS樣式

樣式是一系列預(yù)制的排版命令。CSS（CascadingStyleSheet

層疊式樣式表）是一系列格式規(guī)則，包括對(duì)文字及段落的修飾，用

于控制網(wǎng)頁(yè)的外觀(guān)，使整個(gè)站點(diǎn)中的網(wǎng)頁(yè)格式保持統(tǒng)一，快速實(shí)現(xiàn)

網(wǎng)頁(yè)格式化。同一網(wǎng)頁(yè)中樣式按不同等級(jí)應(yīng)用，手動(dòng)html格式覆蓋

css樣式所應(yīng)用的格式。

樣式表文件擴(kuò)展名為.CSS,是純文本格式，可使用任何純文本

編輯器創(chuàng)建或打開(kāi)樣式表文件。建立樣式表文件要依據(jù)CSS規(guī)則，

它由兩部分組成：選擇器和聲明。選擇器為樣式名稱(chēng)，聲明用于定

義樣式元素。Dreamweaver提供創(chuàng)建樣式表的模板，可輕松創(chuàng)建出

用戶(hù)所需的樣式表。

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一使用CSS樣式

1.創(chuàng)建CSS樣式表

(1)“文件”菜單一“新建”(打開(kāi)“新建文檔”對(duì)話(huà)框)一在

“類(lèi)別”列表框中選擇“CSS樣式表”T在右側(cè)的列表框中選

擇一種樣式表，通過(guò)預(yù)覽框查看其效果。

(2)單擊“創(chuàng)建”按鈕打開(kāi)樣式表編輯頁(yè)面，擴(kuò)展名為“.css”。

(3)“文件”菜單->“保存”->下拉框中選擇“樣式表

(*.css)”一輸入樣式表名稱(chēng)一單擊“保存”按鈕。

2.新建CSS樣式

若對(duì)創(chuàng)建的模板樣式不滿(mǎn)意，還可以新建樣式，步驟如下：

(1)確定插入點(diǎn)，執(zhí)行下面操作之一打開(kāi)“新建CSS樣式”對(duì)話(huà)框。

?在“CSS樣式”面板中單擊“新建css樣式”按鈕；

■在文本屬性面板中選擇“樣式”一“管理樣式”一新建；

?“文本”菜單一“CSS樣式"T“新建CSS樣式”，對(duì)話(huà)框如圖

(新建

CSS樣式)所示；

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一使用CSS樣式

(2)在“名稱(chēng)”文本框中輸

入

新樣式名。

(3)“類(lèi)型”區(qū)中提供3種

類(lèi)型

選擇其中一項(xiàng)。

新建CSS樣式

(4)單擊“確定”按鈕，出.新樣式的css樣式定義兇

分類(lèi)類(lèi)型

現(xiàn)類(lèi)型

背景

區(qū)塊

方框

“新樣式的CSS樣式定邊報(bào)

列表

定位

義”擴(kuò)展

對(duì)話(huà)框，在其中定義樣

式的屬性。

(5)創(chuàng)建樣式后，單擊“確

定”按鈕，該樣式會(huì)出

現(xiàn)

在樣式表文本中。

CSS樣式定義

(6)單擊“文件”一“保存”

16命

令，保存當(dāng)前樣式表文

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一使用CSS樣式

3.樣式表在網(wǎng)頁(yè)中的應(yīng)用

(1)打開(kāi)需要應(yīng)用樣式表的網(wǎng)頁(yè)一“文本”菜單

一CSS

樣式一編輯樣式表一在彈出的對(duì)話(huà)框中單擊“鏈

接”一單擊“瀏覽”一選擇剛創(chuàng)建的樣式表一單

擊“確

定”回到“編輯樣式表”對(duì)話(huà)框一在列表中顯示

剛添

加的樣式表文件一單擊“完成”。

(2)如果給標(biāo)題套用剛創(chuàng)建的樣式，方法為：將插入

點(diǎn)置于“類(lèi)”所在的段落一“窗口”菜單

一CSS樣式

.五曰“CGO士工一P*，，不7小:r+nM+“田中土上一^，，

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一使用CSS樣式

4.修改樣式

若對(duì)已設(shè)置的樣式中某些屬性設(shè)置不滿(mǎn)意，可以修改該樣式。

單擊“CSS樣式”面板中的“編輯樣式”按鈕一在列表中右擊需

要修改

的樣式名T快捷菜單中選擇“編輯”命令一在彈出的屬性對(duì)話(huà)框中改

動(dòng)

“樣式”及“大小”。

5.刪除樣式表

“文本”菜單一CSS樣式表一彈出“編輯樣式表”對(duì)話(huà)框T在列

表框中

選中要?jiǎng)h除的樣式名一單擊“刪除”按鈕。

6.更改樣式表

單擊“編輯”按鈕一完成用戶(hù)對(duì)樣式表更改一單擊“完成”按鈕。

18

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一插入圖像

Web頁(yè)圖像的格式通常有三種：GIF、JPEG、PNG。

1.插入圖像

在網(wǎng)頁(yè)中插入圖像可按以下操作進(jìn)行：

在文檔窗口中單擊以確定圖像要插入的位置一“插入”

菜

單一“常用”類(lèi)別中單擊“圖像”圖標(biāo)旁的向下箭頭一在

彈出的

菜單中選擇“圖像”一彈出“選擇圖像源文件”對(duì)話(huà)框

（“文件

系統(tǒng)”用來(lái)選擇圖形文件，“數(shù)據(jù)源”用來(lái)選擇動(dòng)態(tài)圖像

源文

19件）一指定圖像文件所在位置一從列表框選取所需的圖像

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一插入圖像

2.編輯頁(yè)面圖像

在Dreamweaver中可以直接編輯頁(yè)面圖像，包括改變

大小、對(duì)齊方式、調(diào)整亮度和對(duì)比度、銳化圖像等。

1）調(diào)整大小

單擊頁(yè)面中的圖像一鼠標(biāo)移至調(diào)節(jié)柄處拖動(dòng)（按shift

鍵保持圖像比例不變），也可通過(guò)“屬性”面板輸入“高”

和

“寬”的具體數(shù)值來(lái)調(diào)整圖像大小。

2）設(shè)置圖像的對(duì)齊方式

選定圖像一單擊“屬性”面板中對(duì)齊按鈕組中的一個(gè)

使圖

像移至頁(yè)面的左側(cè)、右側(cè)或居中。若既有文字又有圖像，

返回目錄

2.2創(chuàng)建及設(shè)計(jì)頁(yè)面一插入圖像

用“屬性”面板中“對(duì)齊”下拉列表框來(lái)改變圖像與文字

的相互

對(duì)齊方式。

3）調(diào)整亮度/對(duì)比度或銳化圖像

選擇圖像一單擊圖像屬性面板中的“亮度/對(duì)比

度”T拖動(dòng)滑塊進(jìn)行調(diào)節(jié)T單擊“銳化”T改變圖像

銳度。

21

返回目錄

2.3鏈接與導(dǎo)航一文檔位置和路徑

每個(gè)網(wǎng)頁(yè)都有一個(gè)惟一的地址，稱(chēng)為統(tǒng)一資源

定位器（URL）。當(dāng)創(chuàng)建本地鏈接時(shí)，通常指定一個(gè)起自

當(dāng)前文檔或站點(diǎn)根文件夾的相對(duì)路徑。

連接路徑有三種類(lèi)型：

1.絕對(duì)路徑：提供所鏈接文檔的完整URL。

2.文檔相對(duì)路徑：省略當(dāng)前文檔和所鏈接文檔都相

同的絕對(duì)URL部分，只提供不同的路徑部分。

3.站點(diǎn)根目錄相對(duì)路徑：提供從站點(diǎn)文件夾到文檔的

路徑。

返回目錄

2.3鏈接與導(dǎo)航一鏈接到文檔的常用方法

超鏈接源通常采用文本和圖像，鏈接目標(biāo)通常為

網(wǎng)頁(yè)或文件，一般用URL定義。一個(gè)文本超級(jí)鏈接只

分配一個(gè)目標(biāo)URL地址。圖像上的超級(jí)鏈接不能直接

在瀏覽器中顯示，訪(fǎng)問(wèn)時(shí)可利用鼠標(biāo)指針判斷包含超

級(jí)鏈接的圖像。

圖像超級(jí)鏈接可以用兩種方式分配目標(biāo)RUL：

1.整個(gè)圖像作為一個(gè)超級(jí)鏈接。

2.圖像分為多個(gè)熱點(diǎn)，用熱點(diǎn)作為圖像上的超級(jí)

鏈接區(qū)域。

返回目錄

2.3鏈接與導(dǎo)航一創(chuàng)建文本超鏈接

使用屬性面板的文件夾圖標(biāo)、鏈接文本框或“點(diǎn)到文

件，，

圖標(biāo)鏈接文檔。方法如下：

1.文檔窗口的“設(shè)計(jì)視圖”中選擇文本或圖像。

2.屬性面板的“鏈接”框中填入要鏈接到的頁(yè)面地址,

最好用相對(duì)路徑地址，也可以單擊“點(diǎn)到文件”圖標(biāo)，選

取

要鏈接到的文件，或用鼠標(biāo)把本地站點(diǎn)文件列表中的文件

直接拖到屬性面板的“鏈接”框中。

3.對(duì)“目標(biāo)”進(jìn)行設(shè)置?！澳繕?biāo)”用來(lái)定義超鏈接被

點(diǎn)擊

時(shí)鏈接到的頁(yè)面視窗打開(kāi)方式。目標(biāo)后的下拉選框可不

返回目錄

2.3鏈接與導(dǎo)航一命名錨記鏈接

命名錨記用于在文檔中設(shè)置標(biāo)記，這些標(biāo)記通常放在

文檔的特定主題處或頂部，然后創(chuàng)建到這些命名錨記的鏈

接。

創(chuàng)建到命名錨記的連接過(guò)程分兩步：創(chuàng)建命名錨記和

創(chuàng)建到命名錨記的鏈接。

1.創(chuàng)建命名錨記：將插入點(diǎn)置于要放置錨記的位置

一“插入”菜單一“命名錨記”一在“錨記名稱(chēng)”框中輸

入錨記名

字一單擊“確定”。在插入點(diǎn)即出現(xiàn)一個(gè)錨記。

2.創(chuàng)建錨記鏈接：選定要添加鏈接的文字一屬性面板

的“鏈接”框中輸入和錨記名字一回車(chē)確認(rèn)。

返回目錄

2.3鏈接與導(dǎo)航—圖像地圖

用一個(gè)圖形的不同部位制作熱點(diǎn)分別鏈接到不同頁(yè)

面，稱(chēng)為圖像地圖。分兩步如下：

1.創(chuàng)建圖像地圖熱點(diǎn)

圖形屬性面板左下方有一項(xiàng)為地圖，用它完成制作圖

像地圖。在其后可填入映象名稱(chēng)，若不填，Dreamweaver

會(huì)自動(dòng)加上一個(gè)名字?！暗貓D”下面有三個(gè)圖標(biāo)，從左到

右

依次為：截取矩形、截取圓形和截取不規(guī)則圖形。用鼠標(biāo)

選中圖形的某個(gè)區(qū)域，當(dāng)鼠標(biāo)拖出的選框與目標(biāo)不重合

時(shí)，可使用鍵盤(pán)上的方向箭頭來(lái)調(diào)節(jié)。

2.為熱點(diǎn)指定鏈接

?選定董添加鏈接的熱點(diǎn)，在熱點(diǎn)屬性面板中輸入鏈接目

標(biāo)，在“替代”框中輸入提示性文字。

返回目錄

2.4用表格和表格布局模式布局頁(yè)面一創(chuàng)建表格

1.將插入點(diǎn)置于網(wǎng)頁(yè)中要插入

表格的位置-“插入”菜單一“表

格”，

出現(xiàn)如圖所示的“插入表格”對(duì)話(huà)

框。

“行數(shù)”框指定表格行數(shù)。

“列數(shù)”框指定表格列數(shù)，

“寬度”框指定表格寬度。

“邊框”框指定表格邊框線(xiàn)寬度。

“單元格填充”框指定表格中各

單

元格的內(nèi)容與其邊框之間的距離。

“單元格間距”框中指定表格的插入表格對(duì)話(huà)框

各

單元格之間的距離。

272.設(shè)置完成后單擊“確定”按

鈕，

返回目錄

2.4用表格和表格布局模式布局頁(yè)面一編輯表格

1.添加行或列：

單擊某單元格一＞“修改”菜單一“表格”一“插入行”（或“插

入列”）。

2.刪除行或列

選定完整的行或列一“編輯”菜單一“清除”（或按delete鍵）。

3.合并單元格或拆分單元格

選取連續(xù)單元格一“修改”菜單一“表格”一“合并單元格”

（或拆分單

元格）。也可單擊屬性面板中“合并單元格”或“拆分單元格”按

鈕。

4.改變單元格所跨的行或列的數(shù)目

選定單元格一“修改”菜單一“表格”一“增加行寬”（或“增

加列寬”）o

選定單元格一“修改”菜單一“表格”一“減少行寬”（或“減

少列寬”）。

285.使用剪切、復(fù)制、粘貼命令對(duì)單個(gè)單元格或多個(gè)單元格進(jìn)行操

住臺(tái)匕但即由十枚的枚#出皆

返回目錄

2.4用表格和表格布局模式布局頁(yè)面一表格屬性面板

選定表格后，表格屬性面板如圖所示?？蓪?duì)表格

屬性面板中各選項(xiàng)進(jìn)行設(shè)置。

r一n

Lr趟Id行?3一翅7廠(chǎng)廠(chǎng)3色砌廠(chǎng)淞Q)麻一3

Lr

見(jiàn)?廠(chǎng)蒯廠(chǎng)幗勺間嬲「遮Q)L-

用用目般鼬@口

表格屬性面板

29

返回目錄

2?4用表格和表格布局模式布局頁(yè)面一用布局模式布局頁(yè)面

1.繪制布局單元格

繪制布局單元格步驟：gg標(biāo)準(zhǔn)視圖梅函|口口

1）“插入”欄中“布

局”選

項(xiàng)卡當(dāng)前一選“布局視

圖”。

2）單擊“繪制布局單

元

格”按鈕。

3）將鼠標(biāo)指針移到頁(yè)

面上拖動(dòng)創(chuàng)建布局單元布局單元格

格。如圖繪制的單元格為

藍(lán)色的輪廓、白色的背

景。

返回目錄

2?4用表格和表格布局模式布局頁(yè)面一用布局模式布局頁(yè)面

2.繪制布局表格

繪制布局表格的步驟：

1）布局視圖當(dāng)前一單擊“插

入”欄。

2）“布局”選項(xiàng)卡當(dāng)前一＞選

“繪

制布局表格”按鈕。

3）將鼠標(biāo)指針在頁(yè)面拖動(dòng)以

創(chuàng)建布局表格。

如圖繪制的表格具有綠色輪

廓線(xiàn)。在繪制的每個(gè)表格頂部有

一個(gè)“布局表格”標(biāo)簽，能幫助布局表格

用

戶(hù)識(shí)別并選定表格。

31

返回目錄

2-4用表格和表格布局模式布局頁(yè)面一用布局模式布局頁(yè)面

3.繪制嵌套布局表格

步驟如下：

1）在布局視圖中單擊“插入”欄一“布局”

頁(yè)—>"繪

制布局表格”按鈕。

2）將鼠標(biāo)指針定位到已有布局表格的灰色空

間中一單擊并拖動(dòng)鼠標(biāo)創(chuàng)建嵌套布局表格。嵌套布

局表格不能大于包含它的布局表格。

4.向布局單元格中添加內(nèi)容

單擊需要插入內(nèi)容的布局單元格，輸入文本或

者插入其他對(duì)象。要想讓布局單元格自動(dòng)適應(yīng)文

本內(nèi)容，應(yīng)選擇“清除單元格高度”命令。

返回目錄

2?4用表格和表格布局模式布局頁(yè)面一用布局模式布局頁(yè)面

5.移動(dòng)或調(diào)整大小7.設(shè)置列寬度

(1)調(diào)整布局單元格或表格大?。翰季忠晥D可以使用兩種類(lèi)型寬度：固

單擊布局單元格的邊框或單擊定寬度和自動(dòng)伸展。固定寬度以像素

布局表格上方的“布局裝盾”

值指定寬度，自動(dòng)伸展則使得寬度根

標(biāo)簽一將鼠標(biāo)指針指向某個(gè)句據(jù)窗口方小自動(dòng)調(diào)整。

桶一■按住鼠標(biāo)無(wú)鍵施動(dòng)。

(2)移動(dòng)布局單元格或表格：何福僦"瞅『?jiǎn)輐肝明犧

單擊布局單元格的邊框或單擊

石局表格標(biāo)簽一＞拖動(dòng)布局市?！埂盖陂坷漆倏谝欢?際三

格或表格到目標(biāo)地。

布局單元格屬性面板

6.格式化布局單元格和布局表

格

通過(guò)屬性面板可以改變布局單

元格或表格的外觀(guān)，設(shè)置單元

格內(nèi)容的對(duì)齊方式、寬度、高

度和背景顏色等。如右兩圖所布局表格屬性面板

7J\O

返回目錄

2.5用框架布局頁(yè)面一創(chuàng)建框架和框架集

Dreamweaver提供兩種創(chuàng)建框架集的方法：選擇預(yù)定義框架集

或用戶(hù)自己設(shè)計(jì)。

1.插入預(yù)定義框架集

單擊“布局”卡的“框架”按鈕，彈出菜單如下圖所示?？蓮闹羞x

擇預(yù)

定義框架。若對(duì)預(yù)定義框架集不滿(mǎn)意，可進(jìn)

IT-1左側(cè)J才國(guó)雜行手工改動(dòng)。方法是：先用預(yù)定

^31貢司s市國(guó)多同義框架集產(chǎn)生一個(gè)框架，用鼠標(biāo)

(=1咸青口王在弟上下拖邊框可以水平劃分窗口，

g〒萬(wàn)彳口卷*白勺冬iwu*匡坨

D1下方彳口筋:*的七1WU*匡坨左右拖邊框可以垂直劃分窗口，

fra主仞》!l彳口取*白tT-F*KnH王用

曰I方倒!J不口筋r蕃白勺下方本田坨從四角拖，可以劃分四個(gè)框架。

!_i上方不口下方未住用拖動(dòng)框架之間的分割線(xiàn)可調(diào)整框

rr=i主知u彳口錠*白勺了貝音RT匡致

曰|君曲！j,口應(yīng)毒自勺上方*匡華架大小。若想繼續(xù)拆分，按ALT鍵

^3皿酒簾彳口好*白勺江詢(xún)叨*1至疑拖動(dòng)框架。如果要?jiǎng)h除某框架，

F=fl上方不口有關(guān)*白勺者flWU*醫(yī)叁痣

將框架邊框拖離頁(yè)面即可。

預(yù)定義框架集樣式

34

返回目錄

2.5用框架布局頁(yè)面一設(shè)置框架集與框架屬性

1.設(shè)置框架集屬性。2.設(shè)置框架屬性

單擊框架邊框線(xiàn)選定框架集，下圖按住ALT鍵單擊框架內(nèi)部，

為“頂部和嵌套的左部框架”屬性面板。此時(shí)屬性面板為框架屬性面板,

如下圖所示。

口

框

行

列

“頂部和嵌套的左部框架”屬性面板框架屬性面板

35

返回目錄

2.5用框架布局頁(yè)面一在框架中插入文本和圖像

可以加載已經(jīng)創(chuàng)建的網(wǎng)頁(yè)，也可直接在每個(gè)框架區(qū)域中插入

文本和圖像。

1）在框架中單擊一＞“插入”菜單一“圖像”，可在當(dāng)前位

置插入

在框架中插入文本和圖像

36

返回目錄

2.5用框架布局頁(yè)面一保存框架和框架集

框架結(jié)構(gòu)完成后，首先選定框架集，“文件”菜單

―“保存框架”，在“另存為”對(duì)話(huà)框中選擇要放置網(wǎng)頁(yè)

的文件夾，為框架文件命名，最后單擊“保存”按鈕。要

保存框架集中的所有的文件，單擊“文件”菜單一“保存

全部”，在“保存為”對(duì)話(huà)框中，使用框架線(xiàn)辨別正保存

的是哪個(gè)框架或框架集，為每個(gè)框架文件指定文件名，逐

一保存。

如果某頁(yè)面選定的框架為“頂部和嵌套的左部框架”，

頁(yè)面被劃分為3個(gè)框架，存儲(chǔ)時(shí)要存儲(chǔ)4個(gè)獨(dú)立文件：一個(gè)

是框架集文件，通常起名為“index.htm"，另外三個(gè)是框架

內(nèi)容文件?？蚣芗募舜鎯?chǔ)頁(yè)面框架大小和位置信息，

還存儲(chǔ)每個(gè)框架載入文檔的文件名?？蚣軆?nèi)容文件則存儲(chǔ)

頁(yè)面框架中的內(nèi)容。

返回目錄

2.6表單的使用一表單概述

表單是由文本和表單域組成的集合，用于在因特網(wǎng)上

收集指定類(lèi)型的信息，如登錄注冊(cè)、圖書(shū)訂購(gòu)等。表單的

工作原理很簡(jiǎn)單，訪(fǎng)問(wèn)者在被稱(chēng)為“表單域”的特定網(wǎng)頁(yè)

元

素中鍵入或選擇相關(guān)的信息，單擊“提交”按鈕將信息提

交

給服務(wù)器。服務(wù)器根據(jù)表單結(jié)果進(jìn)行處理，并將這些信息

保存到特定文件中以便站點(diǎn)管理員查看。

一個(gè)完整的表單應(yīng)該包含兩個(gè)組件：一個(gè)是表單對(duì)象,

它在網(wǎng)頁(yè)中進(jìn)行描述，另一個(gè)是表單處理程序，它是Web

服務(wù)器上的一個(gè)程序，當(dāng)站點(diǎn)訪(fǎng)問(wèn)者向服務(wù)器提交一個(gè)表

單時(shí)程序開(kāi)始執(zhí)行。只有將網(wǎng)頁(yè)中的表單與某個(gè)表單結(jié)果

處理程序關(guān)聯(lián)之后才能實(shí)現(xiàn)該表單功能。表單中包含多種

被稱(chēng)作“控件”的對(duì)象。

返回目錄

2.6表單的使用一創(chuàng)建表單

1.插入表單

插入表單可采用兩種方法：

(D將插入點(diǎn)置于要插入表單的位置一“插入”菜單

一“表單”，可看到表單被插入到當(dāng)前位置。

(2)將插入點(diǎn)置于要插入表單的位置一單擊“插入”欄

內(nèi)“表單”頁(yè)一單擊“表單”按鈕，表單將被插入到當(dāng)前

位置。

2.各表單對(duì)象圖標(biāo)

表單卡如圖所示，上面有各表單對(duì)象的按鈕圖標(biāo)，單擊

苴中的苴小坊釗論在走的山小能粒v吐笏

八而回|口畋吸…I:團(tuán)肌乖口

表單卡

39

返回目錄

2.6表單的使用一創(chuàng)建表單

3.設(shè)置表單域?qū)傩?/p>

將插入點(diǎn)置于表單內(nèi)部，顯示表單的屬性面板，如圖所示。

屬性

表單緘麟廠(chǎng)瞄|3

D方法3啞翹?3

表單屬性面板

表單名稱(chēng)：在文本框中為表單設(shè)一個(gè)名稱(chēng)，命名后的表單可以用

JavaScript或VBScript之類(lèi)的腳本語(yǔ)言進(jìn)行控制。

動(dòng)作：指定表單被客戶(hù)端提交后在服務(wù)器端對(duì)其信息和數(shù)據(jù)做出響應(yīng)

和處理的程序或腳本的URL地址，在此項(xiàng)中輸入程序的路徑名稱(chēng)，或者單

擊右邊的文件夾圖標(biāo)，在彈出的對(duì)話(huà)框中選擇要運(yùn)行的程序或帶有腳本程

序的網(wǎng)頁(yè)。

目標(biāo)：指定一個(gè)窗口，顯示調(diào)用程序所返回的數(shù)據(jù)。

MIME類(lèi)型：指定對(duì)提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用MIME編碼類(lèi)型。

返回目錄

2.6表單的使用一添加表單對(duì)象

1.添加表單對(duì)象

在表單中要插入對(duì)象的位置單擊一單擊表單頁(yè)中對(duì)

象圖標(biāo)。

2.添加文本域?qū)ο?/p>

文本域是用來(lái)輸入信息的表單對(duì)象。文本域類(lèi)型有3

種：

1）單行文本域：用來(lái)填寫(xiě)單個(gè)字符或者簡(jiǎn)短回答。

女口卅山卜o

2）多行文本域：用于填有較長(zhǎng)內(nèi)容。該文本域行數(shù)

和字?jǐn)?shù)都可由用戶(hù)自己確定。

3）密碼域：一種特殊的文本域。當(dāng)輸入文本時(shí)，文

本顯示為星號(hào)或其他符號(hào)。

41

返回目錄

2.6表單的使用一添加表單對(duì)象_________

3.添加單選按鈕組

單選按鈕組提供彼此排斥的選項(xiàng)值，在單選按鈕組內(nèi)只

能選擇一個(gè)選項(xiàng)。

4.添加復(fù)選框

復(fù)選框允許從一組選項(xiàng)內(nèi)同時(shí)選擇多個(gè)選項(xiàng)。

5.添加列表

列表提供一個(gè)滾動(dòng)條供用戶(hù)瀏覽項(xiàng)目，能在有限的空間

內(nèi)為用戶(hù)提供許多選項(xiàng)，并進(jìn)行多重選擇。

6.添加按鈕對(duì)象

使用表單按鈕能將輸入表單的數(shù)據(jù)提交到服務(wù)器，還可

將其他已經(jīng)在腳本中定義的處理任務(wù)分配給按鈕，例如，

表單按鈕可以根據(jù)指定的值計(jì)算出所選商品的總價(jià)。

返回目錄

2.6表單的使用—檢查表單

表單通常有確定的填寫(xiě)規(guī)范，在網(wǎng)頁(yè)中應(yīng)提醒訪(fǎng)

問(wèn)者避免簡(jiǎn)單的填寫(xiě)錯(cuò)誤。

“檢查表單”動(dòng)作能檢查指定文本域的內(nèi)容以確

保用戶(hù)輸入的正確性。使用。nBuIr事件可將此動(dòng)作附

加到單個(gè)文本域，在用戶(hù)填寫(xiě)表單時(shí)對(duì)域進(jìn)行檢查。

使用onSubm讓事件可將動(dòng)作附加到表單，在用戶(hù)單

擊“提交”按鈕時(shí)對(duì)多個(gè)文本域進(jìn)行檢查。

43

返回目錄

2.7層的使用一創(chuàng)建層

層是網(wǎng)頁(yè)制作的新技術(shù)，特點(diǎn)是使用方

便，可以使用“層”來(lái)布局網(wǎng)頁(yè)，比表格更

靈活。在Dreamweaver中，層可以放置在網(wǎng)

頁(yè)內(nèi)任何位置，不但可以包含文本、圖像、

表格、插件，還可以在層中嵌套另外的層。

1.在網(wǎng)頁(yè)中插入層

在網(wǎng)頁(yè)中插入層的操作步驟為：將插入

點(diǎn)置于要插入新層的位置一單擊“插入”欄

“布局”頁(yè)中的“層”按鈕。拖動(dòng)可以改變

層大小。

2.創(chuàng)建嵌套層

嵌套層是包含在其他層中的層，嵌套可

以將若干層組織在一起。嵌套層隨父層一起嵌套層

移動(dòng)，并且可以設(shè)置為繼承其父層的可見(jiàn)性。

要?jiǎng)?chuàng)建嵌套層，只需將插入點(diǎn)置于已經(jīng)創(chuàng)建

的層中，單擊“插入”菜單，選“層”命令

即可。嵌套層如右圖所示。

返回目錄

2.7層的使用一創(chuàng)建層

3.通過(guò)層屬性面板定義屬性(5)可見(jiàn)性:參數(shù)有default、

選定層后，其屬性面板如圖所示。visible>hidden和inherit,對(duì)應(yīng)的含

義為：默認(rèn)、可見(jiàn)、隱藏、繼承父

畫(huà),可而，隔T廠(chǎng)噩餐近~~j層的可見(jiàn)性。

荊恒陋生上07生I?：：5p可贓QJderwlt飛短牌0口^位一(6)背景顏色：指定層的背景顏

鼬I三整:左一右一色。

上!—下一(7)背景圖像：指定層的背景圖

像。

層的屬性面板(8)溢出：選擇visible則擴(kuò)展層的

各選項(xiàng)的意義說(shuō)明如下：大小使其所有內(nèi)容均可見(jiàn)。選擇

(1)層編號(hào)：指定層的名稱(chēng)。hidden則保持層的大小裁掉所有超

(2)寬、高：指定層的寬度和高度。出層大小的內(nèi)容。選擇scroll則不管

(3)左、上：指定層相對(duì)于頁(yè)面或被嵌內(nèi)容是否超過(guò)層的大小都提供滾動(dòng)

套層的左上角的位置。條。選擇auto則只有在內(nèi)容超出層

(4)Z軸：指定層的疊放次序。編號(hào)大的大小時(shí)才出現(xiàn)滾動(dòng)條。

的層在編號(hào)小的層上面。

返回目錄

2.7層的使用—編輯層

1.選定層

對(duì)層編輯前應(yīng)先選定層，選定一個(gè)層可以使用下列

方法之一：

(D單擊層的邊框，即可選定該層。

(2)單擊層內(nèi)部的任意位置，層矩形的左上角將顯

示句柄圖標(biāo)，然后單擊句柄圖標(biāo)，即可選定該層。

(3)在層面板中單擊該層的名稱(chēng)。

2.移動(dòng)層

選定層后按住鼠標(biāo)左鍵拖動(dòng)層左上角的句柄圖標(biāo)，

或者直接按鍵盤(pán)上的方向鍵進(jìn)行移動(dòng)，每按一次方向鍵

可將選定的層沿相應(yīng)的方向移動(dòng)一個(gè)像素。

46

返回目錄

2.7層的使用—編輯層_____________

3.改變層的大小

可以調(diào)整單個(gè)層大小，也可以同時(shí)調(diào)整多個(gè)層大小使

它們具有同樣的高度和寬度。

方法為：先選定層一用鼠標(biāo)拖曳層周?chē)娜我庖粋€(gè)句

柄。

4.對(duì)齊多個(gè)層

使用層的對(duì)齊命令，可以對(duì)齊兩個(gè)或者多個(gè)層，在對(duì)

齊多個(gè)層時(shí)將使用最后一個(gè)被選定的層作為基準(zhǔn)。

對(duì)齊層的操作步驟為：選定需要對(duì)齊的多個(gè)層一“修

改”菜單一“對(duì)齊”—從級(jí)聯(lián)菜單中選擇一種對(duì)齊方

式。

返回目錄

2.7層的使用—在層中插入對(duì)象

層是一種容器，可以向其中插入任何對(duì)象。具體操

作步驟如下：

（D將插入點(diǎn)置于層中，使該層處于激活狀態(tài)。

（2）在層中輸入文本或者插入圖像，方法與在空白

頁(yè)面中的操作相同。

48

返回目錄

2.8動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)實(shí)用行為

1.行為概述

行為是在網(wǎng)頁(yè)中進(jìn)行的一系列動(dòng)作，通過(guò)這些動(dòng)作實(shí)現(xiàn)用戶(hù)同

網(wǎng)頁(yè)的交互，也可以通過(guò)動(dòng)作使某個(gè)任務(wù)被執(zhí)行。通常，一個(gè)行為

由一個(gè)事件和一個(gè)動(dòng)作組成。事件是瀏覽器為每個(gè)網(wǎng)頁(yè)元素做的定

義，以響應(yīng)用戶(hù)的動(dòng)作。動(dòng)作包含了預(yù)先寫(xiě)好的用來(lái)執(zhí)行任務(wù)的

JavaScript代碼。網(wǎng)頁(yè)中的每個(gè)元素都可以看作是一個(gè)對(duì)象，在

DreamweaverMX2004中可以給任何對(duì)象附加一個(gè)行為。

2.行為面板

“窗口”菜單一“行為”，打開(kāi)“行為”面板，行為列表中顯

示已經(jīng)附加在當(dāng)前元素上的動(dòng)作，如果同一事件對(duì)應(yīng)幾個(gè)動(dòng)作，對(duì)

應(yīng)的動(dòng)作將按被執(zhí)行順序出現(xiàn)。面板的加號(hào)和減號(hào)按鈕用于添加和

刪除動(dòng)作，上下箭頭按鈕用于調(diào)整針對(duì)同一對(duì)象動(dòng)作的執(zhí)行順序。

49

返回目錄

2.8動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)實(shí)用行為

3.附加行為

可以對(duì)整個(gè)頁(yè)面附加行為，也可以對(duì)鏈接、圖像、表單中的元

素附加行為。

4.編輯行為

步驟如下：

1）選定一個(gè)附加了行為的對(duì)象。

2）打開(kāi)“行為”面板，該對(duì)象附加的行為出現(xiàn)在行為列表中。

3）選定行為后，單擊上箭頭或下箭頭按鈕可以改變給定事件

的順序，。

4）雙擊行為或選定行為后回車(chē)，可以在出現(xiàn)的對(duì)話(huà)框中改變

參數(shù)，如將上例中“你好，歡通訪(fǎng)問(wèn)本網(wǎng)站！”改為“你好，歡

也進(jìn)入本網(wǎng)站！”。

5）選定行為后單擊“一”按鈕可刪除某個(gè)行為。

50

返回目錄

2.動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)一創(chuàng)建圖像交換效果

圖像交換效果是指在瀏覽器中當(dāng)鼠標(biāo)指針移到一幅圖像上時(shí)，圖像會(huì)

變成另一幅圖像，當(dāng)鼠標(biāo)移出圖像范圍時(shí)，又換回原來(lái)的圖像。

創(chuàng)建圖像交換效果之前先準(zhǔn)備兩張圖像，一張是初始圖像，另一張是

鼠標(biāo)移到圖像上時(shí)更換的圖像，兩張圖像最好有相同尺寸，否則在替換時(shí)

會(huì)打亂頁(yè)面上其他內(nèi)容的編排。

圖像交換練習(xí)

1）將插入點(diǎn)置于要添加圖像的位置。

2）“插入”菜單一“交互式圖像”一“鼠標(biāo)經(jīng)過(guò)圖像”，出現(xiàn)“插

入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框。如圖,

3）在該對(duì)話(huà)框中設(shè)置參數(shù),

設(shè)置完畢后單擊“確定”按鈕。

4）按F12鍵在瀏覽器中預(yù)

覽。鼠標(biāo)在圖像外時(shí)是原始圖

像，將鼠標(biāo)指向圖像時(shí)，圖像

就變?yōu)榻粨Q圖像了。“插入鼠標(biāo)經(jīng)過(guò)圖像”對(duì)話(huà)框

返回目錄

2.動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)一插入Flash對(duì)象

Flash對(duì)象為SWF文件，在DreamweaverMX2004中可以直接插入

Flash影片。下面，我們用幾個(gè)例子來(lái)說(shuō)明操作方法。

插入Flash影片練習(xí)

1）將插入點(diǎn)置于想插入Flash影片的位置。

2）“插入”菜單一“媒體”一"Flash”命令，出現(xiàn)“選擇文件”對(duì)

話(huà)框。

3）選擇要插入的Flash文件一單擊“確認(rèn)”，將影片插入到網(wǎng)頁(yè)中。

4）單擊屬性面板中的“播放”按鈕可在文檔窗口中預(yù)覽Flash影片,

'JF14121和球站Q）f回西/1搬郵匯Q4I殛二］、°

/［'蒯i"—

卜一,一一，一一］一L一,一一.,，；

豳。通瞅）一瞬）懶*小

既醐Q）杼儂）_嫻?和至緯年@口|魏

插入Flash電影

52

返回目錄

2.8動(dòng)態(tài)網(wǎng)頁(yè)技術(shù)一插入Flash對(duì)象

使用Flash按鈕練習(xí)

1)“設(shè)計(jì)視圖”編輯狀態(tài)下一在文檔窗口中單擊以確定插入按鈕的

位置T“插入”菜單一選“交互式圖像"T再選“Flash按鈕”，出現(xiàn)如

圖所示的“插入Flash按鈕”對(duì)話(huà)框。

2)“樣式”列表框中選擇需要

的按鈕樣式-“按鈕文本”框中輸入插

的文本將是按鈕上的顯示文本-“字入

F

_

體”下拉列表框中選擇使用的字體。a