1

Dreamweaver 課程講義

製作網頁的參考網站

素材之森 http://enet.cool.ne.jp/ 篆刻素材 http://www.aoiweb.com/aoi2/ Communication Arts 雜誌 http://www.commarts.com/ 下載 Dreamweaver 擴充元件的網站 http://exchange.macromedia.com http://www.yaromat.com/

網頁簡介

網頁的原始碼稱為 HTML，網頁其實是以.htm 或.html 為副檔名的純文字檔，文件裡面包含特殊格式的指令和程式，告訴瀏覽器如何編排頁面、設定超連結，以

及執行程式。

HTML 指令採用 < 符號開始，> 符號結束，例如：。 HTML 指令大多是成對的，結尾的標籤在 < 符號後面將緊跟著 / ，例如：

網頁內文…，其中的即是結尾。 基本的網頁至少包含下列元素：

...：定義網頁的起始和結束

...：檔頭區，定義網頁的標題和文字編碼

...：定義網頁的內文區

歡迎光臨

網頁的內文寫在這裡...

Owner矩形

Owner螢光標示

Owner螢光標示

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner橢圓形

Owner橢圓形

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

Owner線段

2

標題字體格式 …：這些標記將顯示粗體字，n 代表數字 1~6；這些標記將自動在文末

插入空行。

控制文字段落 HTML 文件不理會一個以上的空白，以及換行字元。控制文字的段落和斷行，要使用

和
指令。

段落（Paragraph）指令：

…

第一段

第二段

。

斷行（break）：

同一段
強制斷行。

網頁的色彩 所有顏色都可以用紅、黃、藍三原色調和而成，HTML 語言中的色彩也是用這三種顏色的數值比重值（0~255）來表示，例如：紅色是(255,0,0)，而十六進位的表示方法為(FF0000)、白色則是(FFFFFF)。 在標籤中的"bgColor=#FFFFFF"屬性設定，就是指網頁背景色為白色。 超連結（Hyperlink） 連結到不同網頁的基本语法： ...

這是一個超連結的例子

跳到同一個頁面的另外一个地方： ... 設定連結名稱的語法： ...

跳到"bottom"錨點

：

：

這是 bottom 錨點

Owner螢光標示

Owner螢光標示

Owner螢光標示

3

字體相關說明

設定字元集（文字編碼） 觀看 Dreamweaver 建立的 html 檔原始碼時，您可以在檔頭< head>和< /head>之間看到底下的一行指令： < meta http-equiv="Content-Type" content="text/html; charset=BIG5"> 這指令的作用是告訴瀏覽器，這個網頁採用 BIG5 編碼，讓瀏覽器採用 BIG5字元集來解讀 HTML。BIG5 就是繁體中文碼，簡體中文的編碼是 GB2312，英文則是 iso-8859-1，不同語系的網頁需要指定成該語言的編碼。如果要在同一個網頁裡面呈現多國文字，網頁就要採用 Unicode (UTF-8)編碼，並且以 Unicode 格式存檔（Windows NT 和以後的作業系統才內建支援 Unicode）。

選用字體 設定字體的標籤是網景（Netscape）公司提出的，語法格式如下： < font face="字體名稱">顯示文字< /font> 例如，假設您要將網頁上的 “Hello World” 文字使用 “Verdana” 字體來呈現，設定語法如下： < font face="Verdana">Hello World< /font> IE 瀏覽器的預設字體是新細明體和英文 times new Roma 字體。也就是說， 如果你沒有指定任何字體，網頁將以這兩種標準字體顯示。只要是在 Windows作業系統底下，這兩種字體都能正常顯示。請注意到，如果您指定了一個特

殊的字體，例如華康的勘亭流，在沒有安裝這種字體的電腦上，該字體將被

迫使用新細明體或其他字體呈現。

字體大小 在早期的網頁上，字體大小分成 1~7 級，級數越高，字體越大。設定字體大小的方法也是透過標籤，例如，把 “Hello World” 設定成 5 級大小的語法是： Hello World 到了 IE 4.0 瀏覽器之後，開始支援 CSS 樣式表，CSS 提供了靈活的版面編排指令，以及更多的文字控制功能，所以現在我們也可以透過 CSS，使用「點」

Owner矩形

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

4

或「公厘」等單位，來設定文字大小。 表格的基本語法 在網頁中，表格最常見的用途不是用來呈現表列資訊，而是編排網頁。所有的表

格元素都包含在< table>和< /table>標籤之間，表格的基本元素指令如下：

定義列 < tr> 定義行 < th> 定義表頭 < td>

例如底下的敘述：

姓名 班級 學號 小趙 六年八班 590608 將在瀏覽器上呈現底下的結果（75%瀏覽器視窗寬、邊框寬度為 1）：

姓名 班級 學號 小趙 六年八班 590608

圖檔格式 用在網頁上的圖檔主要是 JPEG 和 GIF 兩種，從 IE 5.0 開始，又增加了 PNG 格式的支援。

關於 GIF 格式

非破壞性壓縮，不會遺漏圖像資訊 可產生動畫 可去背（alpha 通道）

Owner矩形

Owner矩形

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

5

最多只能表現 256 色

關於 JPEG 格式

破壞性壓縮，在高壓縮比的情況下，圖像會失真 可以存成灰階或全彩圖像，適用於照片 不能做動畫 不能去背

關於 PNG 格式

非破壞性壓縮，影像不失真 可儲存全彩影像 可去背 不能做動畫 舊版瀏覽器不支援

設定頁框的名稱 為了便於在超連結中，指定顯示連結目標的頁框，請先替目標頁框命名。 1. 拉好頁框之後，選擇「視窗→其他→頁框」指令，開啟頁框面板。

2. 從頁框面板，點選您想要設定名稱的窗格。 3. 在屬性面板輸入頁框的名稱。

Owner螢光標示

Owner螢光標示

Owner底線

Owner底線

Owner底線

Owner底線

Owner底線

6

分配頁框的大小 分配各個頁框大小，是頁框組（frameset）的工作，因此，修改頁框大小之前，要先點選主頁框，屬性面板才會出現主頁框才有的版面大小設定。

假設目前的頁面分成左、右兩個頁框；左邊的頁框高度要固定成"130"像點寬，其餘的版面空間由右邊的頁框佔據。設定方式如下： 1. 點選主頁框屬性面板，代表左方頁框空間的灰色區域。

2. 在左邊的值欄位，輸入 130，單位選擇成"像點"。 3. 再來分配右邊頁框的空間。 4. 點選主頁框屬性面板，代表右邊頁框空間的灰色區域。 5. 在左邊的單位選單，選擇"相對"。

這樣就 OK 了。 關於主頁框的其他屬性設定，請參閱書本第 7-14 頁。

7

Flash 影片的超連結語法 1. 在按鈕上按右鍵，選擇「動作」指令，開啟動作面板。 2. 在專家模式下，輸入底下的指令： on (release) {

getURL("連結網址", "頁框名稱"); } 註： 如果頁框名稱的參數設定成"_blank"，代表將指定網址開啟在新的瀏覽視窗中；設定成"_self"，代表用目前的視窗開啟。 使用 Flash 按鈕的問題 Dreamweaver 內建產生 Flash 按鈕和文字的功能，放在「媒體」工具列。

使用方法很簡單，只要按下工具列上的 Flash 鈕，再填入一些資訊就可以了：

8

不過，它的連結功能有一個 bug，請在插入 Flash 鈕之後，再切換到 HTML 原始碼，並且找到標籤和標籤中的 base 屬性，然後將它刪除掉！否則，它將無法連到指定的網址。

標籤裡的 base 屬性也要刪掉：

9

透明背景的 Flash 影片 為了顯現透明背景的效果，建議您把 Flash 影片放在圖層裡面。這樣一來，您就可以把 Flash 影片疊在原有的網頁圖文上方： 1. 繪製一個圖層，然後在此圖層裡面放置 Flash 影片。

2. 為了方便編輯嵌入 Flash 影片的 HTML 內碼，請先在 Dreamweaver 的設計檢

視模式之下，點選圖層裡的 Flash 灰色區塊。

3. 切換到程式編輯模式，Dreamweaver 應該已經幫我們選取了類似底下的程式段落：

： 4. 請在...標籤之間，加入上面的紅色部分。這樣就可以在 PC

版的 IE 瀏覽器上呈現透明背景了！ 使用行為指令 行為指令代表預先寫好、可以放在網頁裡面執行的程式，例如，開啟沒有工具列

的瀏覽器視窗、設定狀態列上的文字…等等互動網頁效果。如果預設的行為指令

不敷使用，請到 Macromedia Exchange 網站自行下載「擴充元件（Extentions）」，網址：http://exchange.macromedia.com/。請注意，少部分的擴充元件（例如：購物車）需要付費才能下載。 萬一在 Macromedia Exchange 網站還是找不到您想要的功能，例如，文字跟隨游標移動的效果，這時候，請到一般的 JavaScript 程式集散網站（例如：http://www.javascripts.com/），找尋您需要的程式，再依照該網頁上的說明，把程式碼貼入網頁。 課堂上提到的捲動狀態列文字的範例，可以在底下的網址取得： http://webdeveloper.earthweb.com/repository/javascripts/2002/02/73581/DS_StatusBarScroll.html

Owner矩形

Owner螢光標示

Owner螢光標示

Owner螢光標示

Owner螢光標示

10

跟隨游標移動的文字效果 示範網頁檔名：follow.htm 這是在 www.javascripts.com 找到的原始碼，請在 ... 裡的JavaScript 程式區塊， 找到底下的敘述： // --- 請把底下，雙引號的內容換成您的訊息 --- var message="跟著游標移動的訊息".split(""); // --- 其他程式不要改 var x; ： ： 在上面的紅色字體部分，輸入您的文字，就能改變跟隨文字的內容了！ 設定轉場效果 擴充元件檔名：MX583581_ffx_transition.mxp 示範網頁檔名：transition.htm 1. 請先安裝 MX583581_ffx_transition.mxp 擴充元件 2. 重新開啟 Dreamweaver MX，並打開要套用轉場效果的網頁 3. 選擇「命令→FFX Page Transitions」指令，並按照下圖的說明設定。

11

加入 QuickTime 影片 擴充元件檔名：MX282845_fiXMovie.mxp 示範網頁檔名：quickTime.htm 1. 請先安裝 MX282845_fiXMovie.mxp 擴充元件 2. 重新開啟 Dreamweaver MX 3. 請注意看，Dreamweaver 上方的工具列將多出一個"Spacial" 項目，按下裡面

的 QuickTime 圖框，即可在網頁上加入 QuickTime 影片。

讓圖層跟隨捲軸移動 擴充元件檔名：flevPersistentDivs.mxp 示範網頁檔名：index.htm（首頁） 1. 請先安裝 flevPersistentDivs.mxp 擴充元件 2. 重新開啟 Dreamweaver MX 3. 在網頁上繪製一個預備要跟隨捲軸移動的圖層。 4. 點選編輯視窗左下方的 標籤，然後開啟「視窗→行為」面板。 5. 按下行為面板的「+」鈕，替 標籤加入 Persistent Layer 的行為。

12

時間軸＋圖層＝動畫 動畫的實現原理就是將一串相關的靜態畫面連起來播放，產生運動的錯覺，換句

話說，動畫的基本單位就是一個畫面，稱之為「影格」。Dreamweaver 和 Flash一樣，都採用一個稱為「時間軸」的面板來編輯動畫，更精確地說，時間軸的用途

是排列不同畫面的出現順序。

如下圖所示，除了橫向的時間順序之外，時間軸的垂直面可以包含許多通道

（channel），每個通道在同一個時間點上，只能放置一個移動物體。時間軸裡面

的圓點代表關鍵影格，也就是動畫內容改變的關鍵點。像 Flash 一樣，它有有一

個播放磁頭，播放磁頭所指的位置就是動畫目前所播放的影格。至於最上面的 B

通道，則用來放置和設定行為指令。

動畫物件要放在圖層裡面。此動畫的長度為 30 格影格，目前動畫播放的內容是第 15 格的內容。動畫開始、結束和路徑最低點的三個位置是移動物體的關鍵位置，所以它們都是關鍵影格。

1. 繪製一個圖層，然後在圖層中放置一張圖片。

2. 在圖層的手把上按滑鼠右鍵，從右鍵選單選擇「加入至時間軸」指令。

3. 如果時間軸沒有出現在螢幕上，請選擇「視窗→其他→時間軸」指令。預設

的動畫長度是 15 格影格長度（約 1 秒鐘），您大可自行拖放關鍵影格，決定動畫的長短。

4. 現在第一影格和最後一影格都是關鍵影格。假設我們要調整最後一個影格，確定動畫的結束位置。請先點選最後一個影格，然後將圖層拖放到指定的位

13

置。拖曳之後，文件上面將出現一條代表移動路徑的直線。

5. 如果要設定彎曲的路徑，請在路徑之間加入新的關鍵影格。設定的方法是在前後兩個關鍵影格之間按一下滑鼠鈕，再按滑鼠右鍵，從右鍵選單選擇「增

加關鍵影格」指令。

6. 將圖層拖拽到指定位置，直線就變成曲線了。

7. 如果您希望網頁被開啟時，就能自動播放動畫，請勾選時間軸上的「自動播放」選項。

Dreamweaver 與 Flash 整合應用 隨著越來越多的網頁使用 Flash 影片做為整個介面設計的主軸，Flash 和瀏覽器之間的互動日益顯得重要。ActionScript 程式語言無法控制瀏覽器，頂多只能設定連結網址。像控制瀏覽器視窗狀態列上的文字，或者開啟沒有工具列的新視窗等

功能，只有網頁上的 JavaScript 或 VBScript 語言才辦得到。由於 VBScript 語言只能用於 IE 瀏覽器（而且 Mac 版的 IE 瀏覽器從 5.0 版才開始支援 VBScript），所以通常我們都選用 JavaScript。

Flash 可以透過 getURL()指令去呼叫執行網頁上的 JavaScript 程式。因此，當您需要執行某一項瀏覽器操作時，請先把相關的 JavaScript 程式放在 Flash 網頁上，再讓 Flash 呼叫即可。getURL()的語法格式如下： getURL("連結網址或其他協定", “頁框名稱”, 變數的傳送方法) 除了第一個參數是必要的以外，其餘兩個都是選擇性參數。getURL()函式不只能連結 http 網址，它還能執行 Director 的 Lingo 指令（.swf 動畫必須包含在 Director影片中），以及 JavaScript 和 VBScript 程式。下表列出 getURL()函式所支援的協

Owner螢光標示

Owner螢光標示

Owner註解DREAMWEAVER用JavaScript程式語言

Flash用ActionScript(AS)程式語言

網頁原始碼稱HTML

DREAMWEAVER的行為（Behavior）:在右邊面板,按下「+」加入你想要的行為，如play sound等.

14

定： 協定格式 說明

“http://伺服器網址/” 透過 http 協定開啟指定的網頁

“ftp://伺服器網址/” 透過 ftp 協定下載檔案

“mailto:郵件內容” 透過用戶端的郵件軟體送信。基本的設定格式如下： mailto:cubie@yahoo.com?subject=主旨&body=訊息內容 影片必須嵌入在網頁裡面，才能順利執行上述

指令。

“file://磁碟機編號/檔案路徑” 讀取本地端的檔案，例如： file://c:/temp/note.htm 將會開啟 C 磁碟 Temp 資料夾裡的 note.htm 檔。

“javascript:JavaScript 指令” 執行 JavaScript 指令或呼叫同一個網頁裡的JavaScript 函式

“vbscript:VBScript 指令” 執行 VBScript 指令或呼叫同一個網頁裡的VBScript 程序

“lingo:Lingo 指令” 執行 Director 影片中的 Lingo 程式

“event:事件名稱” 觸發 Director 影片裡的事件程式 您可以把完整的 JavaScript 程式寫在 Flash 影片中，例如，底下的敘述將令瀏覽器開啟一個警告窗，並顯示「大家好！」的訊息： getURL(“javascript:alert(‘大家好！’);”);

請注意，並非所有的瀏覽器都支援從 getURL()函式執行 JavaScript！目前，Mac版的 IE 4.5 和以前的版本、Windows 和 Mac 的 Netscape 6.0 和 6.01 版都不支援。而且在 Netscape 瀏覽器底下執行時，警告視窗的訊息會出現亂碼。 我們通常不會在 getURL()函式裡面寫一堆 JavaScript 程式，而是把 JavaScript 函式放在網頁裡面，再用 getURL()呼叫它。以常見開啟新瀏覽器視窗的範例來說，我們可以使用 Dreamweaver 產生開啟視窗的 JavaScript 函式，再從 getURL()函式呼叫它，製作步驟如下：

15

1. 開啟 Dreamweaver，並打開新的 HTML 網頁。

2. 在網頁文件上輸入”open window”幾個字，並且將它框選起來。

3. 在屬性面板的超連結（Link）欄位輸入一個虛設的超連結符號“#”。

4. 維持文字的選取狀態，執行 Window | Behaviors 指令開啟 Behaviors（行為）面板。

5. 從 Behaviors 面板的「+」鈕選擇 Open Browser Window 指令，開啟 Open Browser Window（打開瀏覽器視窗）設定面板，設定放在新視窗裡的網頁網址，以及視窗的大小。

16

6. 設定完畢之後，按下 OK 鈕，您便能在 Behaviors（行為）面板看見加在超連結文字上的開啟新視窗行為。

7. 切換到程式碼編輯模式觀看 HTML 原始碼。

程式第 6 到 12 行即是開啟新瀏覽視窗的 JavaScript 程式。函式的名稱為MM_openBrWindow，它包含三個引數，分別用來設定要顯示在新視窗裡的網頁URL 位址、新視窗的名稱以及是否要開啟工具列、狀態列、選單、視窗大小…等等的功能敘述。 呼叫此函式的程式碼則寫在第 16 行的超連結標籤裡面，程式內容為：onClick="MM_openBrWindow('brainRoids.htm','brainRoids','width=550,height=400')"。在 onClick 事件程式中，呼叫 MM_openBrWindow()函式的敘述，就是我們要寫在 Flash 按鈕裡的程式。

17

請選取 MM_openBrWindow('brainRoids.htm','brainRoids','width=550,height=400')敘述（不要框選前後的雙引號），然後按下 Ctrl 與 C 鍵複製。 接著回到 Flash 軟體，在按鈕上設定一段 getURL()指令，並將複製指令貼入getURL()函式，如下所示（因為版面不夠寬的關係，實際上 getURL()敘述應該是寫成一行）： on (release) {

getURL(“javascript: MM_openBrWindow('brainRoids.htm','brainRoids','width=550,height=400')”) } 最後，記得把匯出成.swf 格式的 Flash 影片嵌入這個網頁，才能進行測試。請參考附件裡的 openWindow.htm 檔，觀看完成品示範。

建立留言版的資料表

本範例的留言版資料表包含下表的欄位。在建立資料表的時候，我們除了要指定

欄位的名稱之外，還要設定該欄位儲存的資料格式類型，如果欄位的資料類型為

文字的話，還得指出該欄位所能儲存的字元數目。 欄位名稱 資料類型 欄位大小 說明 備註

id 自動編號 用戶編號 此欄為資料表的主索引

userName 文字 30 用戶姓名

email 文字 50 電子郵件

comment 文字 255 留言內容

date 日期時間 留言日期 讓資料表自動輸入目前的日期

本章將以微軟的 Access 2002（Access 2000 的操作方式和新版差不多）建立上述的資料表。請依照底下的步驟建立資料表： 1. 開啟 Access 2002 軟體，按一下「新增檔案」窗格中的空白資料庫選項。

Owner矩形

18

2. 此時，畫面將秀出「開新資料庫」對話方塊，請將此資料庫命名成 fmxData.mdb檔存入本機網站根目錄的 database 資料夾（c:\Intetpub\wwwroot\fmx\database）。

3. 存檔完畢後，畫面將顯示 guestbook 的資料表檢視畫面。請雙按其中的使用設計檢視建立資料表。

4. 在資料表的設計檢視畫面第一列的欄位名稱，輸入“id”，資料類型選擇自動編號，然後在這一列的開頭按滑鼠右鍵，從快捷選單選擇主索引。

5. 點選資料表的第二列，在欄位名稱輸入“userName”、資料類型選擇文字、底

下的文字欄位大小設定則輸入 30。

19

6. 重複上一步驟，建立 email 和 comment 資料欄位。

7. 建立 date（日期時間）欄位時，請在底下的預設值欄位輸入”=Date()”、索引

選項選擇是（可重複）。

8. 輸入完畢後，按下工具列上的「存檔」鈕，把這個資料表命名成”msgBoard”儲存。最後，關閉設計檢視視窗。這就完成了本章所需的資料表了！

20

最後，請先關閉 Access 軟體，因為資料輸入和檢視的工作將交給 ASP 網頁來完成。

資料庫連線設定

定義網站是運用 Dreamweaver MX 建立動態資料庫網站的第一步，接下來的步驟則是設定資料庫的連線，以便讓網站中的網頁能存取指定資料庫裡面的資訊。 設定資料庫連線的步驟如下： 1. 按下 Databases 面板的「+」鈕，從彈出式選單可以看到 Dreamweaver 提供兩

種連線資料庫的方式。Custom Connection String（自訂連線字串）比較實用，而且效率也比較高，所以請選擇它。

2. 畫面將出現 Custom Connection String 設定面板，請在 Connection Name 欄位

輸入“connFMX”或其他您自訂的連線字串名稱。在習慣上，我們會使用“conn”作為連線字串名稱的開頭。

3. 在 Connection String 欄位輸入底下的字串： ”DRIVER={Microsoft Access Driver (*.mdb)};DBQ= D:\Inetpub\wwwroot\FMX\database\fmxData.mdb”

21

上面的連線字串的語法格式如下： ”DRIVER={Microsoft Access Driver (*.mdb)};DBQ=資料檔完整路徑和名稱”

4. 底下的選項請選擇 Using Driver On Testing Server（採用測試伺服器上的驅動程式），測試伺服器指的就是本機伺服器。

5. 按下 Test 鈕看看是否能夠連線到指定的資料檔。如果連線字串沒有錯誤，您將看到如下的對話方塊，告訴您連線成功。

上面第 3 步驟設定的是針對 Access 資料庫的連線字串，而且您必須知道資料庫所在的完整路徑。不過在多數的情況下（例如，假設我們的網站存放在免費網頁

空間），我們不太可能知道資料庫存放在遠端伺服器上的實體路徑，此時若要取

得完整的路徑，就給藉助 Server 物件的 MapPath 方法，其語法格式如下（其中的“&”字元是 VBScript 的字串連結指令，相當於 ActionScript 的”+”）： “DRIVER={Microsoft Access Driver (*.mdb)};DBQ=” & Server.MapPath(“此檔案目錄之下的資料庫路徑”) 以筆者目前的規劃為例，fmxData.mdb 資料庫的路徑就要寫成： "Driver={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath("/fmx/database/fmxData.mdb")

22

請將第 3 步驟的連線字串改成以上的設定。

建立寫入資料庫的 ASP 網頁

定義好網站，決定伺服器採用的技術，以及設定好資料庫的連線之後，我們就可

著手建立動態資料庫夢幻網站了。 HTML 表單是普遍用來收集用戶資料的方式，雖然本章的目標是製作出 Flash 形式的留言版，不需要一般的 HTML 表單介面。不過，如果您想運用 Dreamweaver來自動產生輸入資料到資料庫的程式碼，就一定要先在網頁上放置表單，所以底

下就先從基本的 HTML 表單開始做起。 製作表單介面

請先製作好留言版需要的表單和欄位，等到 ASP 程式自動產生之後，再刪除所有表單元素。Dreamweaver MX 的表單製作方式和之前的版本沒有什麼差異：放置表單元素之前，請先按下 Forms 工具列上的【 】鈕，插入表單範圍標籤（），然後再將表單元素放在表單範圍的紅色虛線框裡面。詳細的操作步驟如下： 1. 選擇 File | New 指令，從 New Document 面板中點選 Dynamic Page 類別裡的

ASP VBScript 網頁，然後按下 Create 鈕。

23

2. 點選工具列上的 Forms 面板。

3. 按一下【 】鈕，插入表單範圍標籤（）。 從 Properties 面版可以看到，這個表單範圍的預設名稱是”form1”。我們不需要改變這個名稱，也無須設定其他參數。

本文的留言版範例需要用戶填寫三種資料：姓名、e-mail 以及留言內容，因此我們需要三個文字輸入方塊（留言日期和留言編號則由資料庫自動產生）。由於這

些文字輸入方塊只是我們要求 Dreamweaver 產生後端程式的手段，因此不必在意版面是否美觀。但是，文字輸入方塊的名稱最好設定成和資料表的欄位名稱相

同，例如，用戶名稱的單行文字輸入方塊的名稱為”userName”、e-mail 的文字方塊名稱叫做“email”、留言的文字方塊名稱則是”comment”（請和上文「建立留言版的資料表」一節的資料表欄位對照）。因為將來把表單內容對應到資料表欄位

時，Dreamweaver 會自動把名稱相同的部分連結在一起。 設定文字輸入方塊的步驟如下： 1. 將文字插入點設定在表單範圍的紅色虛線方框內。

網頁上的表單範圍

2. 按下 Forms 面板上的 鈕，插入一個文字輸入方塊。

24

1. 開啟 Properties 面板，將文字輸入方塊的名稱改成 userName，其餘的參數都不用設定。

2. 按下 Enter 鍵後，重複 2, 3 步驟，在表單範圍內插入其餘兩個文字輸入方塊，並且把它們的名稱分別命名成 email 和 comment。下圖是製作完成後的畫面：

設定新增資料的程式

不論您採用的伺服器技術是 ASP, ASP.Net 或 PHP，設定新增資料的方法都一樣。繼續底下的操作步驟之前，如果您尚未設定資料庫連線（亦即，Application 面板的 Database 面板沒有出現任何資料庫連線名稱），請參閱前文「連線資料庫」一文，先設定好資料庫連線。 設定新增資料到資料表的步驟如下： 1. 開啟 Application 面板，並點選 Server Behaviors（伺服器行為）項目。

2. 按下「+」鈕，從彈出式選單選擇 Insert Record（輸入紀錄）指令。

25

3. 畫面秀出如下的 Insert Record 設定面板。這個面板分成兩個部分，上層的設定選項用來選擇資料庫連線（Connection）、要輸入資料的資料表（Insert into Table）、以及輸入資料後，瀏覽器所要呈現的網頁。

下層的設定選項，則讓您選擇輸入資料來源（Get value from）的表單和表單的元素（Form Elements）。

4. 從 Connection（連線）下拉式選單選擇 connFMX，再從 Insert into Table（插入資料表）選擇 msgBoard。過一會兒，底下的 Form Elements（表單元素）中的文字輸入方塊會自動與資料表的欄位對應。

5. 假設我們希望在表單資料輸入到資料庫之後，瀏覽器能夠自動切換到done.htm 網頁，請在 After Inserting, Go To:欄位輸入 done.htm。

6. 設定完畢後按下 OK 鈕，新增資料的動態網頁就完成了！

7. 按下 Ctrl 和 S 鍵，將檔案命名成 postGuest_asp.asp 存入

C:\Inetpub\wwwroot\fmx 資料夾。

26

製作讀取資料庫內容的程式

從資料庫取出我們所需部分的動作，稱為資料查詢（Query）。ASP 和 PHP 網頁上，查詢資料將存放在 Recordset（資料集）物件裡面。所謂的資料集是指依據您的查詢需求（例如，從書籍資料庫中查詢單價介於 400 到 800 元之間的程式設計書籍），從資料庫之中取出的資料子集合。 Dreamweaver 使用 Bindings（資料繫結）面板來統合管理目前的動態網頁所需的各項資料來源。對於資料庫網頁來說，最主要的資料來源則是本章所要介紹的

Recordset（資料集）物件。 建立資料集

底下是本章使用的留言資料表內容，我們需要取出其中的 date, userName, email和 comment 欄位資料。 名稱 說明

id 留言的編號

date 留言日期

userName 姓名

email e-mail

comment 留言的內容 如同上一節介紹的，ASP 網頁需要使用 Recordset（資料集）物件暫存從資料庫查詢到的資料，因此獲取資料庫內容的頭一個步驟，就是建立資料集。設定步驟

如下： 1. 將 Application 面板切換到 Bindings 項目。

2. 按下 Bindings 面板裡的「+」鈕，從彈出式選單選擇 Recordset (Query)指令，

秀出 Recordset 面板。

27

3. Recordset 面板有 Simple（簡易）和 Advanced（進階）兩種模式，如果螢幕

上顯示的面板和下圖不同，請按下面板右邊的 “simple” 鈕，切換到簡易模式。

4. 在 Name 欄位輸入 rsGuest 替資料集命名（註：為了方便區別不同物件的名稱，ASP 程式設計師通常會在 Recordset 物件的名稱前面加上“rs”）。

5. 從 Connection（連結）下拉式選單，選擇 connFMX 連結到 Access 資料庫

（fmxData.mdb 檔）。

28

選擇連結選項之後，面板中間的 Columns 欄位會秀出目前選擇的資料表（Table）裡的所有資料欄位。

6. 從 Table 下拉式選單選擇 msgBoard。

7. 點選 Columns 選項的 Selected（選取部份欄位）項目，然後按著 Ctrl 鍵點選其中的 date, userName, email 和 comment 欄位。

8. 最底下的 Sort（排序）選項選擇 Date（日期欄位）、和 Descending（降冪）選項，讓資料集的內容依據日期由大到小排序。

29

9. 按下 Test（測試）鈕預先觀看上述的設定所傳回的資料。

10. 按下 OK 鈕關閉 Test SQL Statement 視窗，再按下 OK 鈕完成設定。

現在，Bindings 面板裡面包含了 date, userName, email 和 comment 這些資料欄位，和其他預設的三個欄位（參閱下文「顯示資料的總筆數」一節說明）。

按下「+」鈕展開資料集的欄位內容

30

當您設定好資料集之後，Dreamweaver 便自動幫您產生連結資料庫和設定Recordset 物件的相關程式。接下來，我們將要把資料集的內容呈現在網頁上。

在網頁上呈現資料欄位內容

資料庫程式最基本的功能就是把暫存在 Recordset（資料集）裡面的各個資料欄位呈現網頁上。一般的資料網頁都是把資料集的內容排列在表格裡面，不過我們

的目的是把查詢資料傳入 Flash 影片，所以不需要製作表格。請依照底下的步驟，直接把資料集的內容呈現在網頁上： 1. 先在網頁上輸入「姓名：」，然後把 rsGuest 資料集裡面的 userName 項目拖

放到姓名：文字的後面。

2. 按下 Shift 和 Enter 鍵，建立一個折行。

3. 重複 1, 2 步驟，陸續在網頁上輸入 e-mail：、留言：和日期：字串，並且把

email, comment 和 date 項目拖放到對應的位置。

31

4. 最後，在日期資料的下一行輸入一行虛線（破折號），方便將來分辨一筆資料的結尾。

到此為止，我們已經粗略完成了能夠顯示資料內容的網頁了。不過，目前這個網

頁只能顯示一筆資料，請繼續下一節的設定步驟在網頁上顯示多筆資料。 顯示一筆以上的資料

呈現多筆資料的指令叫做 Repeat Region（重複範圍）。您可以設定每次顯示資料上限，或者一次呈現全部的資料。 設定最多顯示 10 筆留言紀錄的步驟如下： 1. 選取網頁上的所有內容。

32

2. 按下 Server Behavior（伺服器行為）面板的「+」鈕，選擇 Repeat Region（重複範圍）指令，秀出 Repeat Region 設定面板。

3. Recordset 選單讓我們選擇資料來源，本例的資料來源就是 rsGuest。在底下的欄位輸入 10，讓它一次秀出前 10 筆資料。假若資料筆數很多（數十筆以上）那最好不要一次呈現全部資料，一來網頁的檔案會很大（浪費連線資源），二

來會加重伺服器的負擔。 4. 設定完畢後按下 OK 鈕，所有將重複顯示的內容會被灰色方框包圍，而且重

複區域的起始位置還會有的灰底白字的 Repeat 字樣。 5. 最後，按下 Ctrl 和 S 鍵將網頁命名成” readGuest_asp.asp”，存入

C:\Inetpub\wwwroot\fmx 路徑。