dw8 Getting Started

Dreamweaver 入門
商標
1 Step RoboPDF、ActiveEdit、ActiveTest、Authorware、Blue Sky Software、Blue Sky、Breeze、Breezo、Captivate、Central、
ColdFusion、Contribute、Database Explorer、Director、Dreamweaver、Fireworks、Flash、FlashCast、FlashHelp、Flash
Lite、FlashPaper、Flex、Flex Builder、Fontographer、FreeHand、Generator、HomeSite、JRun、MacRecorder、Macromedia、
MXML、RoboEngine、RoboHelp、RoboInfo、RoboPDF、Roundtrip、Roundtrip HTML、Shockwave、SoundEdit、Studio
MX、UltraDev 和 WebHelp 是 Macromedia, Inc. 的註冊商標或商標，且可能已在美國或全球部分其他地區註冊。本刊物
所提及的其他產品名稱、標誌、設計、標題、字詞或片語，可能是 Macromedia, Inc. 或其他實體的商標、服務標誌或商品
名稱，且可能已在全球部分地區註冊。
協力廠商資訊
本手冊包含連至協力廠商網站的連結，這些網站皆不受 Macromedia 的管轄，Macromedia 對連結網站的內容概不負責。
如果您存取本手冊提及的協力廠商網站，則必須自行承擔風險。Macromedia 之所以提供這些連結，僅是為了帶給貴用戶
方便，並不意謂 Macromedia 願意為這些協力廠商網站的內容背書或負擔任何責任。
Opera ® 瀏覽器版權 © 1995-2002 Opera Software ASA 及其供應商。保留所有權利。
版權 © 1997-2005 Macromedia, Inc. 保留一切相關權利。事前未經過 Macromedia, Inc. 的書面同意，貴用戶禁止對

本手冊全部或部份內容進行複製、複印、重製、翻譯或轉換為任何電子或機器可讀的形式。不論本文中的敘述為何，隨附
本手冊之軟體的有效拷貝之擁有者或授權使用者，得基於此擁有者或授權使用者對學習使用此軟體的單一目的，從本手冊
的電子版本列印出一份書面手冊。惟該擁有者或授權使用者不得因任何其他目的，包括商業目的 ( 如銷售本刊物拷貝或提
供付費支援服務 )，毫無限制地將本手冊全部或部份內容加以列印、複印、發行、再銷售或傳輸。文件編號 ZDW80M100C
致謝
管理：Charles Nadeau
撰寫：Jon Michael Varese
編輯：Rosana Francescato、Lisa Stanziano、Evelyn Eldridge、Mark Nigara
生產及編輯管理：Patrice O’Neill 和 Rosana Francescato
多媒體設計和生產：Adam Barnett、Aaron Begley、Paul Benkman、John Francis、Geeta Karmarkar、Paul Rangel、Arena
Reed、Mario Reynoso
本地化管理：Melissa Baerwald
本地化品管：Andrew Tsai
特別感謝 Sheila McGinn、Jennifer Rowe、Jay Armstrong、Sally Sadosky、Jennifer Taylor、Paul Gubbay、Melissa Baerwald、
Sami Kaied、Jung Choi、Masayo Noda、Kristin Conradi、Yuko Yagi 和整個 Dreamweaver 工程及 QA 小組。
第一版：2005 年 9 月
Macromedia, Inc.
601 Townsend St.
San Francisco, CA 94103
目錄
第 1 部分 : DREAMWEAVER 簡介
簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
利用 Dreamweaver 8 可完成的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Dreamweaver 8 新增功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .12
安裝 Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
註冊 Dreamweaver 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13
印刷慣例 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14
第 1 章 : 了解 Dreamweaver . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
從何開始 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15
取得 Dreamweaver 文件的最新資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .19
使用 Dreamweaver 說明系統. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
第 2 章 : Dreamweaver 基本概念 . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
認識 Dreamweaver 8 工作區 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
自訂 Dreamweaver 8 工作區 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
在 Dreamweaver 8 中完成基本工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
第 2 部分 : 教學課程
第 3 章 : 教學課程：設定網站和專案檔案 . . . . . . . . . . . . . . . . . . . . . . . 43
了解 Dreamweaver 網站 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
設定專案檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
定義本機資料夾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
第 4 章 : 教學課程：建立表格式頁面版面 . . . . . . . . . . . . . . . . . . . . . . . 49
檢查設計樣稿 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
建立及儲存新頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .51
插入表格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
設定表格屬性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
插入影像預留位置 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
新增頁面顏色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
3
第 5 章 : 教學課程：加入頁面內容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
尋找您的檔案. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
檢視您的工作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
插入影像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
插入及播放 Flash 檔 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
插入 Flash 視訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
插入文字 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
建立連結 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
在瀏覽器中預覽頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
第 6 章 : 教學課程：使用 CSS 設定頁面格式 . . . . . . . . . . . . . . . . . . . . 91

尋找您的檔案. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
檢視您的工作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
了解 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
建立新的樣式表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
附加樣式表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
探索 CSS 樣式面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
建立新的 CSS 規則 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
將類別樣式套用至文字 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
設定導覽列文字的格式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
( 選擇性 ) 將頁面內容置中 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
第 7 章 : 教學課程：發佈您的網站 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
了解遠端網站. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
定義遠端資料夾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
上傳本機檔案. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
疑難排解遠端資料夾設定 ( 選擇性 ) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123
第 3 部分 : 進階教學課程
第 8 章 : 教學課程：使用程式碼. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
查看程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
切換為編碼工作區 ( 僅適用於 Windows) . . . . . . . . . . . . . . . . . . . . . . . . . .129
使用標籤選擇程式新增標籤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
編輯標籤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
查詢關於標籤的資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
以程式碼提示新增影像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136
檢查變更 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
列印程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
4 目錄
第 9 章 : 教學課程：建立 CSS 式頁面版面 . . . . . . . . . . . . . . . . . . . . . 141
了解 CSS 式頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
檢查設計樣稿 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
建立及儲存新頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
插入圖層 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145
新增頁面顏色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
第 10 章 : 教學課程：顯示 XML 資料 . . . . . . . . . . . . . . . . . . . . . . . . . 159

尋找您的檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160
了解搭配網頁使用 XML 和 XSL. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
了解 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
將 HTML 頁面轉換為 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164
將 XML 資料來源附加至 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
修改 XSLT 頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
將 XML 資料繫結到 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
在 XML 資料上套用樣式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
建立動態連結 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
新增重複區域 XSLT 物件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
附加 XSLT 頁面至 XML 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
了解其他部署選項 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
第 11 章 : 教學課程：開發網路應用程式 . . . . . . . . . . . . . . . . . . . . . . . . 177
在您開始之前 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
開啟要使用的文件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180
定義資料集 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
顯示資料庫記錄 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
將動態欄位新增至表格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
設定重複區域 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
檢視頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
建立記錄插入表單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188
將檔案複製到伺服器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192
進階閱讀 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193
第 4 部分 : 附錄
附錄 A: 了解網路應用程式. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
關於網路應用程式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
網路應用程式的運作方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
目錄 5
撰寫動態網頁. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
選擇伺服器技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
網路應用程式詞彙 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
附錄 B: 安裝網站伺服器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
入門 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
安裝 Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
測試 IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
測試 Macintosh 網站伺服器 (PHP 開發人員 ) . . . . . . . . . . . . . . . . . . . . .212
網站伺服器基本資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
附錄 C: ColdFusion 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . 215

ColdFusion 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . .215
設定系統 (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
定義 Dreamweaver 網站 (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . .221
連線到範例資料庫 (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
附錄 D: ASP.NET 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . 229

ASP.NET 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
設定系統 (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231
定義 Dreamweaver 網站 (ASP.NET). . . . . . . . . . . . . . . . . . . . . . . . . . . 234
連線到範例資料庫 (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
附錄 E: ASP 範例網站的設定. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

ASP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
設定系統 (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
定義 Dreamweaver 網站 (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
連線到範例資料庫 (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251
附錄 F: JSP 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

JSP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
設定系統 (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
定義 Dreamweaver 網站 (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
連線到範例資料庫 (JSP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
6 目錄
附錄 G: PHP 範例網站的設定. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
PHP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
設定系統 (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
定義 Dreamweaver 網站 (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
連線到範例資料庫 (PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
索引 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
目錄 7
8 目錄
1
第 1 部分
Dreamweaver 簡介
本書的第一部分將介紹 Macromedia Dreamweaver 8，並包含安裝資訊和工作

區概觀。此外，也提供學習 Dreamweaver 的有用資源清單。
這部份包含下列各節：
簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
了解 Dreamweaver. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Dreamweaver 基本概念 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
9
簡介
Macromedia Dreamweaver 8 是用來設計、編碼和開發網站、網頁及網路應用

程式的專業 HTML 編輯器。不論您喜歡手動撰寫 HTML 程式碼的控制感，
或是喜歡在視覺編輯環境下工作，Dreamweaver 都提供您實用的工具來增強網
站建立經驗。
如果您對 Macromedia Dreamweaver 8 的主要概念不熟悉，本手冊可為您介紹
如何使用它。本手冊中的教學課程會引導您建立一個簡單且可供運作的網站。
本章包含下列主題：
利用 Dreamweaver 8 可完成的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . .11
Dreamweaver 8 新增功能 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
安裝 Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
註冊 Dreamweaver 8. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
印刷慣例. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
利用 Dreamweaver 8 可完成的工作
Dreamweaver 中的視覺編輯功能讓您在不撰寫任何一行程式碼的情況下，就可
以快速建立網頁。您可以檢視所有網站項目或資源，並將它們從方便使用的面
板直接拖曳到文件中。您可以透過在 Macromedia Fireworks 或其他圖形應用
程式中建立和編輯影像的方式簡化開發工作流程，再直接將影像匯入
Dreamweaver。Dreamweaver 也提供工具，讓您能輕鬆地將 Flash 資源加入網
頁中。
除了可協助您建立網頁的拖放功能以外，Dreamweaver 還提供功能完整的編碼
環境，其中包含程式碼編輯工具 ( 如程式碼色彩標示、標籤完成、編碼工具列
和程式碼收合 ) 和「階層式樣式表」 (CSS)、JavaScript、ColdFusion 標記語
言 (CFML) 和其他語言的語言參考資料。Macromedia Roundtrip HTML 技
術不需要重新格式化程式碼，就可以匯入您手動撰寫的 HTML 文件，然後您
可以使用偏好的格式樣式來重新格式化程式碼。
11
Dreamweaver 也能讓您使用如 CFML、ASP.NET、ASP、JSP 和 PHP 等伺服
器技術，建立動態、資料庫驅動的網路應用程式。如果您的偏好設定適用於
XML 資料，Dreamweaver 會提供可讓您輕鬆建立 XSLT 頁面、附加 XML 檔
案並在網頁上顯示 XML 資料的各項工具。
Dreamweaver 可以完全自訂。您可以建立自己的物件和命令、修改快速鍵、甚至
撰寫 JavaScript，用新的行為、「屬性」檢視窗和網站報告來擴充 Dreamweaver
功能。
如需關於學習 Dreamweaver 之可用資源的詳細資訊，請參閱第 15 頁第 1 章
「了解 Dreamweaver」。
Dreamweaver 8 新增功能
Dreamweaver 8 包括很多新功能，可協助您以最少的時間和心力建立網站和應
用程式。Dreamweaver 讓複雜的技術變得簡單且容易使用，讓你事半功倍。
以下是 Dreamweaver 8 中的一些重要新功能：
■ 縮放工具和導引線
■ 視覺 XML 資料繫結
■ 新的 CSS 樣式面板
■ CSS 版面視覺化
■ 程式碼收合
■ 編碼工具列
■ 背景檔案傳輸
■ 插入 Flash Video 命令
如需 Dreamweaver 8 新功能的完整清單和說明，請參閱「使用 Dreamweaver」
( 「說明＞使用 Dreamweaver」 ) 中的「Dreamweaver 8 新增功能」。
12 簡介
安裝 Dreamweaver 8
本節說明如何安裝 Dreamweaver。
請務必閱讀 Macromedia 網站 ( 位於 www.macromedia.com/go/
dw_documentation_tw) 上的版本說明，以取得最新的資訊或指示。
若要安裝 Dreamweaver：
1. 將 Dreamweaver 光碟插入電腦的光碟機。
2. 請執行下列其中一項作業：
■ 在 Windows 中，Dreamweaver 安裝程式會自動啟動。
■ 在 Macintosh 中，請按兩下出現在桌面上的 Dreamweaver 安裝程式
圖示。
3. 依照螢幕上的指示。
安裝程式會提示您輸入必要的資訊。
4. 如果有提示您重新啟動電腦，請依指示進行。
註冊 Dreamweaver 8
若要取得其他 Macromedia 支援，最好利用電子方式或是郵件，替您的
Macromedia Dreamweaver 8 版本註冊。
您註冊時，可登記索取有關升級和 Macromedia 新產品的最新通知。您也可
以登記索取及時的電子郵件通知，提供您有關產品更新以及在
www.macromedia.com/tw/ 和 www-euro.macromedia.com 網站上出現的新
內容。
若要註冊 Macromedia Dreamweaver 8，請執行下列其中一項作業：

■ 選取「說明＞線上註冊」並填妥電子表單。
■ 選取「說明＞列印註冊」，列出該表單，並將它寄到表單上所列的地址。
註冊 Dreamweaver 8 13
印刷慣例
本手冊使用下列印刷慣例：
■ 選單項目顯示格式：選單名稱＞選單項目名稱。子選單中的項目以這種格
式顯示：選單名稱＞子選單名稱＞選單項目名稱。
■ 程式碼字體表示 HTML 標籤和屬性名稱，以及在範例中使用的文字。
■ 斜體程式碼字體表示程式碼中可取代的項目 ( 有時稱為「移轉符號」 )。
■ 粗體 Roman 文字表示您逐字輸入的文字。
14 簡介
第1章
了解 Dreamweaver
1
Macromedia Dreamweaver 8 包括多種資源，可協助您快速瞭解本程式並成為
建立網頁的高手。所有的 Dreamweaver 文件都會以電子檔說明和 PDF 格式的
方式提供使用。
從何開始. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
取得 Dreamweaver 文件的最新資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
使用 Dreamweaver 說明系統 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
從何開始
Dreamweaver 文件包含適合各種不同背景讀者的資訊。本節協助您瞭解如何根
據自己的背景和要使用 Dreamweaver 完成的工作，研讀利用本文件。
本節包含下列主題：
■ 第 16 頁「網路設計初學者」
■ 第 16 頁「有經驗的網路設計人員」
■ 第 17 頁「有經驗的程式設計師」
■ 第 18 頁「網路應用程式開發人員」
15
網路設計初學者
如果您是網路設計上相當新的初學者，本節指出 Dreamweaver 文件中非常適
合您背景的章節。
對於網路設計初學者：
1. 請先閱讀第 25 頁第 2 章「Dreamweaver 基本概念」。然後，執行本手冊中
的教學課程繼續進行。教學課程分為兩個小節。前面五個教學課程適合初
學者使用，它們會從頭到尾引導您開發一個小型但可供運作的網站。第二
小節的教學課程則為您介紹更進階的概念。您可能希望在擁有建立網頁的
開發經驗之前，就能進行更進階的教學課程。
2. 在「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中，您所獲得
的概念會比閱讀此「Dreamweaver 入門」手冊的第 1 章「探索工作區」、
第 2 章「設定 Dreamweaver 網站」、第 4 章「管理檔案」和第 3 章「建
立和開啟文件」內容更加完整。
3. 閱讀「使用 Dreamweaver」中的第 7 章「使用 CSS 配置頁面」和第 8 章
「以表格呈現內容」來瞭解頁面版面。
4. 若要了解關於在網頁中格式化文字和加入影像的資訊，請閱讀「使用
Dreamweaver」中的第 13 章「插入和格式化文字」和第 14 章「插入影像」。
5. 這就是您要開始製作高品質網站所真正需要做的事，但是當您準備好要了解
如何使用進階工具時，可以依序閱讀「使用 Dreamweaver」中靜態網頁章
節的其他部分。最好等到比較熟悉如何建立網頁之後再閱讀動態網頁章節。
有經驗的網路設計人員
如果您是有經驗的網路設計人員，本節指出 Dreamweaver 文件中非常適合您
背景的小節。這裡有兩種不同的方式：一種是提供給剛接觸 Dreamweaver 的
設計人員，另一種是提供給熟悉 Dreamweaver 但想要學習更多有關建立動態
網頁資訊的設計人員。
對於有經驗但是新接觸 Dreamweaver 的網路設計人員：

1. 利用閱讀此「Dreamweaver 入門」手冊中的教學課程開始進行。
2. 在「使用 Dreamweaver」 (「說明＞使用 Dreamweaver」) 中，請閱讀第 1 章
「探索工作區」，以了解更多有關 Dreamweaver 使用者介面的資訊。
3. 雖然第 2 章「設定 Dreamweaver 網站」和第 4 章「管理檔案」中的許多
資料可能對您來說都很熟悉，但是您可以略讀這些章節，看看這些熟悉的
概念如何在 Dreamweaver 中實作。請特別注意有關設定 Dreamweaver 網
站的章節。
16 了解 Dreamweaver
4. 如需有關使用 Dreamweaver 建立基本 HTML 網頁的有用詳細資訊，請閱
讀第 13 章「插入和格式化文字」和第 14 章「插入影像」。
5. 如需在 Dreamweaver 中撰寫程式碼的資訊，請參閱第 19 章「設定程式碼
撰寫環境」、第 20 章「在 Dreamweaver 中撰寫程式碼」、第 21 章「程
式碼最佳化和除錯」和第 22 章「在設計檢視中編輯程式碼」。
6. 請閱讀「使用 Dreamweaver」中每章開頭處的綜覽，來決定您是否對其主
題感興趣。
對於有經驗、熟悉 Dreamweaver，並且想要了解更多有關建立動態網
頁資訊的網路設計人員：
1. 利用閱讀第 197 頁附錄 A「了解網路應用程式」和第 177 頁第 11 章「教學
課程：開發網路應用程式」開始進行。
2. 在「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中，請閱讀
第 1 章「探索工作區」，以了解有關 Dreamweaver 使用者介面新概念的
資訊，再閱讀第 30 章「最佳化視覺開發的工作區」。
3. 若要熟悉 Dreamweaver 的動態網頁工作流程，請閱讀第 31 章「動態網頁
設計的工作流程」。
4. 設定網路伺服器和應用程式伺服器(請參閱第 23 章「設定網路應用程式」)。
5. 連線到資料庫。( 請參閱第 23 章「設定網路應用程式」中的「連線到資

料庫」 )。
題感興趣。
有經驗的程式設計師
如果您是有經驗的程式碼撰寫者，本節指出 Dreamweaver 文件中非常適合您
背景的小節。
對於有經驗的程式設計師：
1. 利用閱讀此「Dreamweaver 入門」手冊中的第 8 章「教學課程：使用程
式碼」開始進行。
2. 在「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中，請閱讀第 1
章「探索工作區」，以了解更多有關 Dreamweaver 使用者介面的資訊。
站的章節。
從何開始 17
4. 請閱讀第 19 章「設定程式碼撰寫環境」、第 20 章「在 Dreamweaver 中
撰寫程式碼」、第 21 章「程式碼最佳化和除錯」和第 22 章「在設計檢視
中編輯程式碼」中更多有關使用 Dreamweaver 撰寫程式碼的資訊。
題感興趣。
網路應用程式開發人員
如果您是網路應用程式開發人員，本節指出 Dreamweaver 文件中最適合您背
景的小節。這裡有兩種不同的方式，視您先前是否使用過 Dreamweaver 而定。
對於沒有使用過 Dreamweaver 的網路應用程式開發人員：

1. 請先快速閱讀「Dreamweaver 入門」手冊，以熟悉 Dreamweaver 的基本
使用概念。
2. 在「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中，請閱讀第 1
章「探索工作區」，以了解更多有關 Dreamweaver 使用者介面的資訊。
站的章節。
4. 使用 Dreamweaver 設定網路伺服器和應用程式伺服器 ( 請參閱第 23 章「設
定網路應用程式」 )。
5. 連線到資料庫。( 請參閱第 23 章「設定網路應用程式」中的「連線到資
料庫」 )。
6. 請閱讀「使用 Dreamweaver」中其他各章開頭處的綜覽，來決定您是否對
其主題感興趣。
對於有經驗並且使用過 Dreamweaver 的網路應用程式開發人員：

1. 利用閱讀「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中的
「Dreamweaver 8 新增功能」開始進行。新增功能小節位於「簡介」中。
2. 略讀第 1 章「探索工作區」以了解有關 Dreamweaver 使用者介面新概念
的資訊。
取得 Dreamweaver 文件的最新資訊
Dreamweaver 包括各種媒體，可協助您快速瞭解本程式並成為建立網頁的高
手。Dreamweaver 說明系統包括數份文件，可協助您瞭解 Dreamweaver、
Dreamweaver 擴充功能和 ColdFusion。還有很多其他線上資源，可在您學習
如何建立網頁時提供諮詢。
存取 Dreamweaver 文件
下列表格會摘要說明 Dreamweaver 說明系統中所包含的文件內容：
您可以購買所選取標題的書面列印版本。如需詳細資訊，請參閱
www.macromedia.com/go/buy_books。
標題說明 / 對象所在位置
Dreamweaver 入提供 Dreamweaver • 在 Dreamweaver 中檢視：選
門概念和介面的基本簡取「說明＞ Dreamweaver 入
介，以及詳細的初學者門」
教學課程。專為初級使 • 線上檢視：http://
用者設計，還有想學習
livedocs.macromedia.com/
go/
新功能的中級和進階使
livedocs_dreamweaver_tw
用者也適用。
• 取得 PDF：
www.macromedia.com/go/
dw_documentation_tw
使用所有 Dreamweaver • 在 Dreamweaver 中檢視：選

Dreamweaver 功能的完整資訊。專為取「說明＞ Dreamweaver 說
所有 Dreamweaver 明」或「說明＞使用
使用者設計。 Dreamweaver」
• 線上檢視：http://
go/
• 取得 PDF：
dw_documentation_tw
取得 Dreamweaver 文件的最新資訊 19
標題說明 / 對象所在位置
擴充說明 Dreamweaver • 在 Dreamweaver 中檢視：選
Dreamweaver 功架構和應用程式設計介取「說明＞擴充
能面 (API)。專為想要建 Dreamweaver 功能」
立擴充功能或自訂 • 線上檢視：http://
Dreamweaver 介面 livedocs.macromedia.com/
go/
的進階使用者設計。
• 取得 PDF：
dw_documentation_tw
Dreamweaver 說明公用程式 API 和 • 在 Dreamweaver 中檢視：選

API 參考 JavaScript API，兩取「說明＞ Dreamweaver
者都可讓您在開發 API 參考」
Dreamweaver 擴充 • 線上檢視：http://
功能時，執行各種支援
go/
工作。專為想要建立擴
充功能或自訂
• 取得 PDF：
Dreamweaver 介面 www.macromedia.com/go/
的進階使用者設計。 dw_documentation_tw
使用 ColdFusion 包括 ColdFusion 文 • 在 Dreamweaver 中檢視：選

件集中精選的最重要書取「說明＞使用 ColdFusion」
籍 ( 完整的文件集可在 • 線上檢視：http://
LiveDocs 上取得 )。 livedocs.macromedia.com/
專為對 ColdFusion
go/livedocs_coldfusion/
感興趣的使用者設計，取得 PDF：
•
從初學者到進階開發人
cf_documentation
員都適用。
參考包括很多種與 • 在 Dreamweaver 中檢視：選

HTML、伺服器模型取「說明＞參考」。如需完整的
和其他主題相關的參考手冊清單，請按一下「參考」面
手冊，主要都由 O 悐板中的「手冊」彈出式選單。
eilly 發佈。專為需要
編碼語法、概念等相關
詳細資訊的使用者設
計。
存取其他線上 Dreamweaver 資源
下列表格會摘要說明學習 Dreamweaver 所需的其他線上資源。
資源說明 / 對象所在位置
Dreamweaver 支 Dreamweaver 使 www.macromedia.com/go/
援中心用者專用的 dreamweaver_support_tw
TechNote、支援
和問題解決資訊。
Dreamweaver 開文件和教學課程可 www.macromedia.com/go/

發人員中心協助您改善技巧並 dreamweaver_devcenter_tw
學習新的技巧。
Dreamweaver 文取得 PDF 格式的 www.macromedia.com/go/

件資源中心手冊、勘誤表、教 dw_documentation_tw
學課程和版本說明。
Macromedia 線上由 Dreamweaver www.macromedia.com/go/
討論區使用者、技術支援 dreamweaver_newsgroup
人員和
Dreamweaver 開
發小組所提供的討
論及問題解決資訊。
Macromedia 訓練針對實用工作和真 www.macromedia.com/go/

實狀況設計的課程。 dreamweaver_training_tw
取得 Dreamweaver 文件的最新資訊 21
使用 Dreamweaver 說明系統
「說明」選單中的線上說明系統提供了您可以使用 Dreamweaver 執行的所有
工作之詳細資訊。若要查看「說明」中可用的文件清單，請參閱第 19 頁「存
取 Dreamweaver 文件」。
■ 第 22 頁「開啟說明」
■ 第 22 頁「搜尋說明」
■ 第 23 頁「使用索引」
■ 第 23 頁「變更字體大小」
■ 第 23 頁「使用起始頁面」
■ 第 24 頁「列印 Dreamweaver 文件」
■ 第 24 頁「與 LiveDocs 討論 Dreamweaver 文件」
開啟說明
在 Dreamweaver 中工作時，您可以存取產品內附的說明。
若要開啟 Dreamweaver 說明：

■ 選取「說明＞ Dreamweaver 說明」。
搜尋說明
您可以進行 Dreamweaver 說明的全文檢索。
若要搜尋產品內附的說明 (Windows)：
1. 在「Dreamweaver 說明」中，按一下「搜尋」索引標籤。
2. 在文字方塊中輸入一個文字或文句，然後按一下「列出主題」。
3. 按兩下結果清單中的主題以顯示它。
若要搜尋產品內附的說明 (Macintosh)：
提示
若要搜尋特定的文句，請 1. 在「Dreamweaver 說明」的「詢問問題」文字方塊中輸入一個文字或文

將以雙引號將它括住。
句，然後按 Enter 鍵。
2. 按兩下結果清單中的主題以顯示它。
使用索引
您可以利用索引快速尋找資訊。
若要使用索引 (Windows)：
1. 在「Dreamweaver 說明」中，按一下「索引」索引標籤。
2. 捲動到按照字母順序排列的清單中之索引項目，再按兩下某項目以顯示索
引的資訊。
若要使用索引 (Macintosh)：
提示
1. 在「Dreamweaver 說明」中，按一下目錄中的「索引」連結。您可以開始在文字方塊
中輸入關鍵字以便快速
2. 按一下某個字母，然後捲動到清單中的索引項目。捲動到索引項目。
3. 按一下項目旁邊的數字以顯示索引資訊。
變更字體大小
您可以變更說明系統所使用的字體大小。
若要變更 Windows 說明檢視器中的字體大小：

1. 開啟 Internet Explorer。
Windows 說明檢視器中的字體大小已在 Internet Explorer 中設定。
2. 選取「檢視＞文字大小」，然後選取一種大小。
若要變更 Apple 說明檢視器中的字體大小：

■ 在說明中，選取「編輯＞減少字體大小」或「編輯＞增加字體大小」。
使用起始頁面
當您啟動 Dreamweaver 但未開啟文件時，Dreamweaver 「起始頁面」便會出
現在工作環境中。「起始頁面」可讓您快速存取 Dreamweaver 教學課程、最近
使用的檔案和 Dreamweaver Exchange，您可以在該頁面上將新功能加入一些
Dreamweaver 功能中。「起始頁面」的用法與網頁的用法很類似。按一下您能
看到要使用的任何功能。
若要停用「起始頁面」：
1. 執行 Dreamweaver 但未開啟文件。
「起始頁面」便會顯示。
2. 按一下「不要再顯示」。
使用 Dreamweaver 說明系統 23
列印 Dreamweaver 文件
您可在 Macromedia 網站 (www.macromedia.com/go/dw_documentation_tw)
上取得 PDF 格式的下列手冊：
■ 使用 Dreamweaver
■ Dreamweaver 入門
■ 擴充 Dreamweaver 功能
■ Dreamweaver API 參考
您可以在自己的印表機上列印全部或部分的 PDF，或者將 PDF 送交複印商店
處理。
與 LiveDocs 討論 Dreamweaver 文件
Dreamweaver 文件也可以從線上利用 LiveDocs 格式取得。LiveDocs 版本的
Dreamweaver 說明看起來很像產品內附的說明，但是它可讓您針對個別說明頁
面的內容加以註解。您可以根據自己的經驗或從其他 Dreamweaver 設計人員
和開發人員徵詢所得的建議，在特定的 Dreamweaver 主題上加入有用的資訊。
Dreamweaver LiveDocs 也可以在 http://livedocs.macromedia.com/go/
livedocs_dreamweaver_tw 上取得
第2章
Dreamweaver 基本概念 2
為了將 Macromedia Dreamweaver 8 經驗的功效發揮到極致，您應該要瞭解
Dreamweaver 工作區的基本元素。本章會介紹最重要且最常用的工作區元素，
並告訴您如何在 Dreamweaver 中完成一些基本的工作。
本章包含下列各節：
認識 Dreamweaver 8 工作區 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
自訂 Dreamweaver 8 工作區 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
在 Dreamweaver 8 中完成基本工作 . . . . . . . . . . . . . . . . . . . . . . . . . . .37
認識 Dreamweaver 8 工作區
Dreamweaver 工作區可讓您檢視文件和物件屬性。工作區的工具列中也放置了
許多最常用的作業選項，因此，您可以快速地變更文件。
本節的設計可為您提供 Dreamweaver 8 工作區的綜覽。如需本節所介紹之任何
工作區元素的更完整資訊，請參閱「使用 Dreamweaver」中的第 1 章「探索
工作區」。
■ 第 26 頁「工作區版面」
■ 第 28 頁「文件視窗」
■ 第 29 頁「文件工具列」
■ 第 30 頁「狀態列」
■ 第 31 頁「插入列」
■ 第 32 頁「編碼工具列」
■ 第 33 頁「「屬性」檢視窗」
■ 第 33 頁「檔案面板」
■ 第 34 頁「CSS 樣式面板」
25
工作區版面
在 Windows 中，Dreamweaver 提供了一個全方位視窗整合式版面。整合式工
作區中的所有視窗和面板，都整合成一個較大的單一應用程式視窗。
插入列
文件工具列文件視窗面板群組
標籤選取器「屬性」檢視窗檔案面板

注意
Windows 工作區也有「程式碼撰寫者」選項，依預設，它會將面版群組停駐在

左邊，並在「程式碼」檢視中顯示「文件」視窗。如需詳細資訊，請參閱「使
用 Dreamweaver」中的「使用程式碼撰寫者導向的工作區域 ( 僅適用於
Windows)」。若要使用這個選項，請參閱第 35 頁「選擇工作區版面 ( 僅適用
於 Windows)」。
26 Dreamweaver 基本概念
在 Macintosh 上，Dreamweaver 可以於單一視窗內顯示多份文件，且會以索引
標籤來識別每份文件。Dreamweaver 也可以顯示為浮動工作區的一部分，在該
工作區中每份文件會出現在它自己的個別視窗中。面板群組一開始就停駐在一
起，但是也可以回到自己的視窗。當您拖曳視窗或調整它們的大小時，它們會
自動彼此貼齊、貼齊到畫面的邊上及貼齊到「文件」視窗。
文件工具列
插入列文件視窗面板群組
標籤選取器「屬性」檢視窗檔案面板
不論在 Windows 或 Macintosh 中都可以於不同的版面之間切換。如需詳細資

訊，請參閱第 35 頁「選擇工作區版面 ( 僅適用於 Windows)」和第 36 頁「顯
示外框包圍的檔案 (Macintosh)」。
認識 Dreamweaver 8 工作區 27
文件視窗
「文件」視窗顯示目前的文件。您可以選取以下任何檢視：
設計檢視是可供開發視覺頁面版面、視覺編輯及快速應用程式的一種設計環境。
在這種檢視中，Dreamweaver 會顯示文件的完全可編輯、視覺的表示法，類似
您在瀏覽器中檢視頁面時所看到的。
程式碼檢視是一個手動撰寫程式碼的環境，用來撰寫及編輯 HTML、JavaScript、
伺服器語言程式碼，如 PHP 或 ColdFusion 標記語言 (CFML)，以及各種其他
的程式碼。如需詳細資訊，請參閱「使用 Dreamweaver」中的第 20 章「在
Dreamweaver 中撰寫程式碼」。
程式碼和設計檢視可讓您在單一視窗中同時檢視同一個文件的「程式碼」檢視
和「設計」檢視。
當「文件」視窗有標題列時，標題列會顯示頁面標題以及檔案路徑和檔案名稱
( 以括號括住 )。如果您對該檔案進行過變更而尚未儲存的話，Dreamweaver 會
在檔案名稱之後顯示一個星號。
當「文件」視窗在整合式工作區版面 ( 僅適用於 Windows) 中為最大化時，
「文件」視窗便沒有標題列，在這種情況下，頁面標題以及檔案路徑和檔案名
稱會顯示在主要工作區視窗的標題列。
此外，當「文件」視窗最大化時，在「文件」視窗區域的頂端會出現索引標
籤，顯示所有開啟文件的檔案名稱。若要切換到文件，請按一下它的索引標籤。
如需關於使用「文件」視窗的詳細資訊，請參閱「使用 Dreamweaver」中的
第 1 章「探索工作區」。
文件工具列
「文件」工具列包含能讓您在不同的文件檢視之間快速切換的按鈕：「程式
碼」、「設計」和可同時顯示「程式碼」和「設計」檢視的分割檢視。
工具列還包含一些常用命令和選項，這些命令和選項都是與檢視文件、在本機
和遠端網站之間傳送文件有關。
顯示程式碼檢視沒有瀏覽器 / 檢查錯誤

顯示程式碼和設計檢視驗證標記
顯示設計檢視檔案管理
視覺輔助
伺服器除錯文件標題檢視選項
重新整理設計檢視
在瀏覽器中預覽 / 除錯
下列選項出現在「文件」工具列中：
顯示程式碼檢視只會在「文件」視窗中顯示「程式碼」檢視。
顯示程式碼和設計檢視會在「文件」視窗的一部份顯示「程式碼」檢視，另一

部份則顯示「設計」檢視。當您選取此組合檢視時，「檢視選項」選單中的
「設計檢視在上方」選項會變成可用狀態。使用這個選項來指定哪一個檢視要
顯示在「文件」視窗的上方。
顯示設計檢視只會在「文件」視窗中顯示「設計」檢視。
伺服器除錯會顯示一份報告，協助您對目前的 ColdFusion 網頁進行除錯。這份

報告會列出您網頁中的錯誤 ( 如果有的話 )。
文件標題可讓您輸入要顯示在瀏覽器標題列中的文件標題。如果您的文件已有
標題，它會出現在此欄位中。
沒有瀏覽器 / 檢查錯誤可供您檢查瀏覽器之間的相容性。
驗證標記可讓您驗證目前的文件或所選取的標籤。
檔案管理會顯示「檔案管理」彈出式選單。
在瀏覽器中預覽 / 除錯讓您能在瀏覽器中預覽文件及針對文件加以除錯。從彈出
式選單中選取瀏覽器。
重新整理設計檢視會在您於「程式碼」檢視中進行變更之後，重新整理文件的
「設計」檢視。在執行某些動作 ( 如儲存檔案或按一下這個按鈕 ) 之前，您在
「程式碼」檢視中所作的變更不會自動出現在「設計」檢視中。
檢視選項可讓您設定「程式碼」檢視和「設計」檢視的選項，包括哪一個檢視
應該出現在另一個檢視之上。目前檢視中的選單選項有：「設計」檢視、「程
式碼」檢視或兩者。
視覺輔助讓您使用不同的視覺輔助來設計頁面。
如需關於使用「文件」工具列的詳細資訊，請參閱「使用 Dreamweaver」中
的第 1 章「探索工作區」。
狀態列
「文件」視窗底部的狀態列提供現在所建立文件的其他資訊。
文件大小和估計下載時間
視窗大小彈出式選單
標籤選取器設定顯示比例
縮放工具
手掌工具
選取工具
標籤選取器會顯示目前選取範圍左右標籤的階層。按一下階層中的任何標籤就
能選取該標籤及其所有內容。按一下 <body> 以選取整個文件的內文。若要在
標籤選取器中設定標籤的 class 或 id 屬性，請按一下右鍵 (Windows) 或
Control + 按一下 (Macintosh) 該標籤，並從快顯選單中選取類別或 ID。要選
取標籤時，標籤選取器是較好的方法，因為它會確保您一定能準確選取標籤。
「手掌」工具可讓您按一下文件並在「文件」視窗中拖曳它。按一下「選取」
工具停用「手掌」工具。
「縮放」工具和「設定顯示比例」彈出式選單可讓您設定文件的顯示比例等級。
如需詳細資訊，請參閱「使用 Dreamweaver」中的「放大和縮小顯示」。
「視窗大小」彈出式選單 ( 只有「設計」檢視中看得到 ) 可讓您將「文件」視
窗的大小調整為預先決定或自訂的尺寸。如需詳細資訊，請參閱「使用
Dreamweaver」中的「調整文件視窗大小」。
「視窗大小」彈出式選單的右邊是估計的文件大小和估計的頁面下載時間，包
括所有相關檔案，如影像和其他媒體檔。如需詳細資訊，請參閱「使用
Dreamweaver」中的「設定下載時間和大小偏好設定」。
如需關於使用狀態列的詳細資訊，請參閱「使用 Dreamweaver」中的第 1 章
「探索工作區」。
插入列
「插入」列包含建立及插入物件 ( 如表格、圖層和影像 ) 所用的按鈕。在將指
標滑過按鈕時，工具提示便會和按鈕名稱一起出現。
這些按鈕分成數個類別，您可在「插入」列的左邊切換。當目前文件含有伺服
器程式碼時 ( 如 ASP 或 CFML 文件 )，就會出現其他類別。在啟動
Dreamweaver 時，就會開啟您最後使用的類別。
部分類別的按鈕含有彈出式選單。當您從彈出式選單中選取某一選項後，該選
項便會成為該按鈕的預設動作。例如，如果您從「影像」按鈕的彈出式選單中
選取了「影像預留位置」，則下次當您按一下「影像」按鈕時，Dreamweaver
便會插入影像預留位置。每當您從彈出式選單中選取新的選項後，按鈕的預設
動作就會變更。
「插入」列會以下列類別組織：
常用類別可讓您建立和插入最常使用的物件，如影像和表格。
版面類別可讓您插入表格、div 標籤、圖層和頁框。也可以選擇以下三種表格
檢視的其中一種：標準 ( 預設檢視 )、展開表格和版面。當選取「版面」模式
時，可使用 Dreamweaver 版面工具：「繪製版面儲存格」和「繪製版面表格」。
表單類別包含建立表單和插入表單元素所用的按鈕。
文字類別可讓您插入各種文字和清單格式的標籤，如 b、em、p、h1 和 ul。

HTML 類別可讓您插入用在水平線、檔頭內容、表格、頁框和 Script 的 HTML
標籤。
伺服器程式碼類別僅適用於使用特定伺服器語言的網頁，這些語言包含 ASP、
ASP.NET、CFML Basic、CFML Flow、CFML Advanced、JSP 和 PHP。這
些類別每個都能提供可以在「程式碼」檢視中插入的伺服器程式碼物件。
應用程式類別可讓您插入動態元素，如資料集、重複區域以及記錄插入和更新
表單。
Flash 元素類別可讓您插入 Macromedia Flash 元素。
最愛類別可讓您將最常用的「插入」列按鈕加以群組並排列組織在一個常用的
地方。
如需關於使用「插入」列的詳細資訊，請參閱「使用 Dreamweaver」中的
第 1 章「探索工作區」。
編碼工具列
「編碼」工具列包含的按鈕能讓您執行許多標準的編碼作業，例如收合和展開
程式碼選取範圍、反白標示無效的程式碼、套用和移除註解、縮排程式碼，以
及插入最近使用過的程式碼片段等等。「編碼」工具列只有在「程式碼」檢視
中才看得到，而且會垂直顯示在「文件」視窗的左邊。
您無法解除鎖定或移動「編碼」工具列，但是可以將它隱藏。如需詳細資訊，
請參閱「使用 Dreamweaver」中的「顯示工具列」。
如需關於使用「編碼」工具列的詳細資訊，請參閱「使用 Dreamweaver」中
的「使用「編碼」工具列快速插入程式碼」。
「屬性」檢視窗
「屬性」檢視窗可供您檢查及編輯目前選取的頁面元素 ( 如文字或插入的物件 )
的最常用屬性。「屬性」檢視窗的內容會隨著選取的元素而不同。例如，如果
您選取頁面上的影像，「屬性」檢視窗會變更為顯示影像的屬性 ( 比如說，若
有的話會顯示影像的檔案路徑、影像的寬度和高度、影像周圍的邊框等等 )。
依預設，「屬性」檢視窗位在工作區的下方，但您也可以依照需要，將其停駐
在工作區的上方，或者，使其成為工作區中的浮動面版。如需關於移動「屬
性」檢視窗的詳細資訊，請參閱「使用 Dreamweaver」中的「停駐及解除鎖
定面板和面板群組」。
如需關於使用「屬性」檢視窗的詳細資訊，請參閱「使用 Dreamweaver」中
的「使用「屬性」檢視窗」。
檔案面板
您會使用「檔案」面板來檢視及管理 Dreamweaver 網站中的檔案。
在「檔案」面板中檢視網站、檔案和資料夾時，您可以變更檢視區域的大小，
以及展開或收合「檔案」面板。「檔案」面板收合時，會將本機網站、遠端網
站或測試伺服器的內容顯示為檔案清單。「檔案」面板展開時，便會顯示本機
網站以及遠端網站或者是測試伺服器。「檔案」面板也可以顯示本機網站的視
覺網站地圖。
對於 Dreamweaver 網站，藉由變更收合的面板中預設出現的檢視 ( 不論是本機
或遠端網站 )，便可以自訂「檔案」面板。
如需關於使用「檔案」面板來管理網站的詳細資訊，請參閱「使用
Dreamweaver」中的第 4 章「管理檔案」。
CSS 樣式面板
「CSS 樣式」面板能讓您追蹤影響目前選取的頁面元素之 CSS 規則和屬性 (「目
前」模式 )，或者追蹤影響整份文件的規則和屬性 ( 「全部」模式 )。「CSS 樣
式」面板上方有一個切換按鈕可以讓您切換這兩種模式。「CSS 樣式」面板也
可以讓您在「全部」和「正在」模式中修改 CSS 屬性。
您可以拖曳窗格之間的邊框，藉此調整任一窗格的大小。
在「正在」模式中，「CSS 樣式」面板會顯示三種窗格：顯示文件中目前選取
範圍之 CSS 屬性的「選取範圍摘要」窗格、顯示所選屬性位置 ( 或根據選取
範圍顯示所選標籤的規則重疊顯示 ) 的「規則」窗格，以及可以讓您編輯定義
選取範圍的規則之 CSS 屬性的「屬性」窗格。
在「全部」模式中，「CSS 樣式」面板會顯示兩種窗格：「所有規則」窗格 ( 上
方 )，以及「屬性」窗格 ( 下方 )。「所有規則」窗格會顯示在目前文件中定義
的規則清單，以及在所有附加於目前文件的樣式表中定義的規則。而「屬性」
窗格能讓您編輯任何在「所有規則」窗格中所選規則的 CSS 屬性。
您在「屬性」窗格中所作的任何變更都會立即套用，讓您在變更的同時即可預
覽您的工作。
如需關於「CSS 樣式」面板的詳細資訊，請參閱「使用 Dreamweaver」中的
「關於 CSS 樣式面板」。
自訂 Dreamweaver 8 工作區
有一些基本的技巧您可以用來自訂 Dreamweaver 以符合自己的需求，不需要
了解複雜的程式碼或編輯文字檔即可達成。
■ 第 35 頁「選擇工作區版面 ( 僅適用於 Windows)」
■ 第 36 頁「顯示外框包圍的檔案 (Macintosh)」
■ 第 37 頁「隱藏和顯示起始頁面」
選擇工作區版面 ( 僅適用於 Windows)

在 Windows 中，您可選擇使用「設計人員」或「程式碼撰寫者」工作區版
面。第一次啟動 Dreamweaver 時，會有一個對話方塊讓您選擇工作區版面。您
可隨時切換到不同的工作區。
若要在首次啟動 Dreamweaver 時選擇工作區版面：

1. 選取下列其中一個版面：
設計人員是使用 MDI ( 多重文件介面 ) 的一種整合式工作區，在該工作區
中所有的「文件」視窗和面板都是整合到一個較大的應用程式視窗中，將
面板群組停駐在右邊。
自訂 Dreamweaver 8 工作區 35
程式碼撰寫者是相同的整合式工作區，但是將面板群組停駐在左邊，其版面
類似 Macromedia HomeSite 和 Macromedia ColdFusion Studio 所使用的
版面，而且依預設，「文件」視窗會顯示「程式碼」檢視。
注意
您可以將面板群組停駐在任何版面的工作區的任一邊。
2. 按一下「確定」。
若要在選定工作區之後切換到不同的工作區：
■ 選取「視窗＞工作區版面」，再選取您偏好的工作區版面。
除了「程式碼撰寫者」和「設計師」外，您也可以選擇「雙重螢幕」。如果
您有第二個監視器，「雙重螢幕」會將所有面板放在第二個監視器上，並將「文
件」視窗保留在主要監視器上。
顯示外框包圍的檔案 (Macintosh)
在 Macintosh 上，Dreamweaver 可以在單一「文件」視窗中顯示多份文件，
並利用索引標籤來識別每份文件。Dreamweaver 也可以將這些文件顯示為浮動
工作區的一部分，在該工作區中每份文件會出現在它自己的視窗中。
若要在另一個視窗中開啟外框包圍的檔案：
■ 按一下右鍵或 Control + 按一下索引標籤，再從快顯選單中選取「移至新
視窗」。
若要將個別文件合併至以外框包圍的視窗中：
■ 選取「視窗＞以索引標籤方式組合」。
若要變更外框包圍的檔案預設值：
1. 選取「Dreamweaver ＞偏好設定」，然後選取「一般」類別。
2. 選取或取消選取「在索引標籤中開啟文件」，再按一下「確定」。
注意
當您變更偏好設定時，Dreamweaver 並不會改變目前已開啟的文件顯示方
式。但是，在您選取新的偏好設定後，隨後開啟的文件都將依據選取的偏好設
定來顯示。
隱藏和顯示起始頁面
當您啟動 Dreamweaver 時，以及每當您沒有開啟任何文件時，便會出現
Dreamweaver 「起始頁面」。您可以選擇隱藏「起始頁面」，並於稍後再顯示
它。當隱藏「起始頁面」且沒有開啟文件時，「文件」視窗便會是空白的。
若要隱藏「起始頁面」：
■ 在「起始頁面」上選取「不要再顯示」核取方塊。
當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便
不會出現。
若要顯示「起始頁面」：
1. 選取「編輯＞偏好設定」 (Windows) 或「Dreamweaver ＞偏好設定」
(Macintosh)。
「偏好設定」對話方塊便會出現並顯示「一般」偏好設定類別。
2. 選取「顯示起始頁面」核取方塊。
當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便

會出現。
在 Dreamweaver 8 中完成基本工作
本節會說明如何完成基本工作，例如建立、開啟及儲存檔案。如需詳細資訊，
請參閱「使用 Dreamweaver」中的第 3 章「建立和開啟文件」。
■ 第 38 頁「關於 Dreamweaver 檔案」
■ 第 39 頁「在 Dreamweaver 中建立新檔案」
■ 第 39 頁「在 Dreamweaver 中儲存檔案」
■ 第 39 頁「在 Dreamweaver 中開啟檔案」
在 Dreamweaver 8 中完成基本工作 37
關於 Dreamweaver 檔案
在 Dreamweaver 中您可以處理各種檔案類型。要處理的主要檔案種類是
HTML 檔。HTML 檔 ( 或「超文字標記語言」檔 ) 包含了負責在瀏覽器中顯
示網頁的標籤語言。您可以使用 .html 或 .htm 副檔名來儲存 HTML 檔。
Dreamweaver 預設使用 .html 副檔名來儲存檔案。
以下是在 Dreamweaver 中工作時，您可能會使用的一些其他常用檔案類型：
CSS ( 或「階層式樣式表」檔 ) 具有 .css 副檔名。它們的用途是設定 HTML
內容的格式及控制各種頁面元素的定位。如需使用這些檔案類型的詳細資訊，
請參閱「使用 Dreamweaver」中的「了解階層式樣式表」。
GIF ( 或 Graphics Interchange Format 檔 ) 具有 .gif 副檔名。GIF 格式是常見
的網頁圖形格式，適用於卡通、標誌、含透明區域的圖形和動畫。GIF 最多會
包含 256 色。
JPEG ( 或 Joint Photographic Experts Group 檔，其名稱由來是以建立該格式
的公司為名 ) 具有 .jpg 副檔名，而且通常是照片或高色彩的影像。JPEG 格式
最適用於數位或掃描的照片、使用材質的影像、具有漸層色彩轉換的影像，以
及任何需要 256 色以上的影像。
XML ( 或「可擴展標記語言」檔 ) 具有 .xml 副檔名。它們包含原始形式的資
料，您可以利用 XSL ( 可擴展樣式表語言 ) 來設定資料格式。如需使用這些檔
案類型的詳細資訊，請參閱「使用 Dreamweaver」中的第 36 章「在網頁中顯
示 XML 資料」。
XSL ( 「可擴展樣式表語言」檔 ) 具有 .xsl 或 .xslt 副檔名。它們可用來設定您
想要顯示在網頁上的 XML 資料的樣式。如需使用這些檔案類型的詳細資訊，
請參閱「使用 Dreamweaver」中的第 36 章「在網頁中顯示 XML 資料」。
CFML ( 或「ColdFusion 標記語言」檔 ) 具有 .cfm 副檔名。它們可用來處理
動態網頁。如需使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」
中的第 40 章「快速建立 ColdFusion 應用程式」。
ASPX ( 或 ASP.NET 檔 ) 具有 .aspx 副檔名。它們可用來處理動態網頁。如需
使用這些檔案類型的詳細資訊，請參閱「使用 Dreamweaver」中的第 41 章
「快速建立 ASP.NET 應用程式」。
PHP 或 PHP：超文字前置處理器 (PHP Hypertext Preprocessor) 檔具有 .php
副檔名。它們可用來處理動態網頁。如需使用這些檔案類型的詳細資訊，請參
閱「使用 Dreamweaver」中的第 43 章「快速建立 PHP 應用程式」。
在 Dreamweaver 中建立新檔案
本節告訴您如何在 Dreamweaver 中建立新的空白文件。
您也可以根據 Dreamweaver 設計檔或現有的樣版，在 Dreamweaver 中建立新
文件。如需詳細資訊，請參閱「使用 Dreamweaver」中的「建立新文件」。
若要建立新的空白文件：
1. 選取「檔案＞開新檔案」。
「新增文件」對話方塊便會出現。已選取「一般」標籤。
2. 從「分類」清單中，選取「基本頁面」、「動態網頁」、「樣版頁面」、「其
他」或「頁框組」，然後再從右側的清單中，選取要建立的文件類型。
例如，選取「基本頁面」建立一個 HTML 文件，或選取「動態網頁」建
立一個 ColdFusion 或 ASP 文件等等。
如需此對話方塊中選項的詳細資訊，請按一下對話方塊中的「說明」按鈕。
3. 按一下「建立」按鈕。
新文件便會在「文件」視窗中開啟。
4. 儲存文件 ( 請參閱第 39 頁「在 Dreamweaver 中儲存檔案」 )。
在 Dreamweaver 中儲存檔案
建立新文件時，需要儲存此文件。
若要儲存新文件：
1. 選取「檔案＞儲存」。
2. 在出現的對話方塊中，導覽到您要儲存檔案的資料夾。
提示
將您的檔案儲存在
3. 在「檔案名稱」文字方塊中，輸入該檔案的名稱。
Dreamweaver 網站
在檔案和資料夾名稱中，請避免使用空格和特殊字元，同時也不要以數字中，是個不錯的方法。
做為檔名的開頭。特別針對您想放在遠端伺服器上的檔案名稱，請勿使用如需詳細資訊，請參閱
特殊字元 ( 如 é、ç 或 ¥) 或標點符號 ( 如冒號、斜線或句點 )；很多伺服器第 43 頁第 3 章「教
學課程：設定網站和專
會在上傳期間變更這些字元，這將造成與該檔案的任何連結中斷。
案檔案」。
4. 按一下「儲存檔案」。
在 Dreamweaver 中開啟檔案
在 Dreamweaver 中，您可以輕易地開啟並編輯文件。
若要開啟檔案：
1. 選取「檔案＞開啟舊檔」。
2. 在「開啟舊檔」對話方塊中，選取檔案再按一下「開啟」。
在 Dreamweaver 8 中完成基本工作 39
2
第 2 部分
教學課程
本書的第二部分包含五個基本教學課程，將逐步引導您建置網頁。您將建立虛
構餐廳 Cafe Townsend 的網站首頁。
教學課程：設定網站和專案檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
教學課程：建立表格式頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
教學課程：加入頁面內容 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
教學課程：使用 CSS 設定頁面格式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
教學課程：發佈您的網站 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
41
第3章
教學課程：設定網站和專案
檔案
3
本教學課程介紹 Macromedia Dreamweaver 8 網站的概念，並說明如何設定
Cafe Townsend 範例網站的專案檔案。在 Dreamweaver 中，網站通常由兩個
部分組成：本機電腦 ( 本機網站 ) 上的一組檔案，以及當您準備將檔案公佈時，
所要上傳的遠端網站伺服器位置 ( 遠端網站 )。您使用 Dreamweaver 「檔案」
面板來管理網站的檔案。
利用 Dreamweaver 建立網站最常用的方法，是在本機磁碟上建立及編輯頁面，
然後再將這些頁面的複本上傳到遠端網站伺服器上，以便在網路上進行檢視。
本教學課程僅教導如何設定本機網站，讓您能立即開始建立網頁。初步完成網
站後，接著要學習如何建立遠端網站，以便將檔案上傳到網站伺服器。
在本教學課程中，您將會完成下列工作：
了解 Dreamweaver 網站 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
設定專案檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
定義本機資料夾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
43
了解 Dreamweaver 網站
在 Dreamweaver 中，「網站」一詞可指網站 (Website) 或是放置網站文件的本
機儲存位置；這個本機儲存位置是建立網站之前必須先建立的。Dreamweaver
網站會組織所有網站相關文件，並讓您追蹤和維護連結、管理檔案、共用檔案，
以及將網站檔案傳送到網站伺服器。
注意
Macromedia HomeSite 和 ColdFusion Studio 使用者可以將
Dreamweaver 網站想成是 HomeSite 或 Studio 專案。
Dreamweaver 網站由三個部份組成，會因您的計算環境及開發的網站類型而異：
本機資料夾是您的工作目錄。Dreamweaver 會將此資料夾視為您的本機網站。
本機資料夾通常位於硬碟上。
遠端資料夾是您儲存檔案的地方，會因您測試、實際執行、共同作業和發佈的
環境而異。Dreamweaver 會將此資料夾視為遠端網站。遠端資料夾位於執行網
站伺服器的電腦上。執行網站伺服器的電腦通常 ( 但不一定 ) 是讓您的網站可
供在網路上公開使用的電腦。
動態網頁資料夾 (測試伺服器資料夾) 是 Dreamweaver 處理動態網頁時所使用的
資料夾。這個資料夾和遠端資料夾通常會是同一個資料夾。除非您要開發網路
應用程式，否則無需使用這個資料夾。如需關於「測試伺服器」資料夾的詳細
資訊，請參閱「使用 Dreamweaver」中的「指定可以處理動態網頁的位置」。
「網站定義精靈」會引導您完成設定程序，而「網站定義進階」設定則可讓您
視需要分別設定本機、遠端和測試資料夾；這兩者都可以用來設定
Dreamweaver 網站。本教學課程將使用「網站定義進階」設定來設定您專案
檔案的本機資料夾。稍後，您將學習如何設定遠端資料夾，以便將網頁發佈至
網站伺服器，供大家使用。
如需關於如何使用「網站定義精靈」來設定 Dreamweaver 網站的詳細資訊，
請參閱「使用 Dreamweaver」中的「設定新的 Dreamweaver 網站」。
如需關於如何設定遠端網站的詳細資訊，請參閱第 7 章「教學課程：發佈您的
網站」。
如需有關 Dreamweaver 網站的一般資訊，請參閱「使用 Dreamweaver」中的
「設定 Dreamweaver 網站」。
44 教學課程：設定網站和專案檔案
設定專案檔案
當您建立本機網站時，您可以將任何現有的資源 ( 影像或其他內容片段 ) 放在
本機網站的根資料夾 ( 網站的主要資料夾 ) 中。如此一來，當您準備好要將內
容加入頁面時，表示這些資源已備妥並可供使用。
Dreamweaver 內附的範例檔案中會包含要利用這些「Dreamweaver 入門」教
學課程建立的範例網站所需之資源。建立網站的第一步驟就是將範例檔案從
Dreamweaver 應用程式資料夾複製到硬碟上合適的資料夾。
1. 在硬碟上建立名為 local_sites 的新資料夾。
例如，在以下兩個位置中擇一建立名為 local_sites 的資料夾：
■ Windows：C:\Documents and Settings\your_user_name\My
Documents\local_sites
■ Macintosh：Macintosh HD/Users/your_user_name/Documents/
local_sites
注意
在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資

料夾不可以做為本機資料夾，Sites 資料夾是當您以 Macintosh 做為網站伺服器
時，用來放置公用網頁的地方。
2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。
如果您將 Dreamweaver 設定於預設的位置，資料夾的路徑即如下所示：

■ Windows：C:\Program Files\Macromedia\Dreamweaver
8\Tutorial_assets\cafe_townsend\。
■ Macintosh：Macintosh HD/Applications/Macromedia Dreamweaver
8/Tutorial_assets/cafe_townsend。
關於…
關於本機和遠端「根」資料夾 Dreamweaver 網站的本機「根」資料夾通常是網站的主要或最上層資料夾。通

常在遠端網站 ( 網站伺服器 ) 上也會有一個對應的相同資料夾。根資料夾通常就是網站 URL 中，接在網域名稱之後
的第一個部分。例如，如果本機根資料夾叫做 mywebsite，而您在遠端網站上定義了相同的根資料夾，那麼您網站
的 URL 可能會像是 http://www.yahoo.com/mywebsite。
某些情況下，本機根資料夾可能不會和遠端網站的根資料夾使用完全相同的名稱。例如，如果您擁有名為
www.mywebsite.com 的網域名稱，其遠端根目錄為 public_html，但您的本機根資料夾可能還是叫做
mywebsite。本機和遠端根目錄中的檔案可能完全相同；只有資料夾名稱 ( 在遠端網站上為 public_html，在本機
電腦上是 mywebsite) 不一樣。
設定專案檔案 45
3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中。
cafe_townsend 資料夾將用來當作 Dreamweaver 網站的根資料夾 ( 主要資
料夾 )。
定義本機資料夾
您必須為您建立的每個新網站定義 Dreamweaver 本機資料夾。本機資料夾就
是硬碟中用來儲存網站檔案工作複本的資料夾。如果您沒有定義本機資料夾，
Dreamweaver 中的某些功能就無法正常運作。
定義本機資料夾除了可讓您管理檔案，還可以用一些檔案傳送方法來與網站伺
服器往來傳送檔案。
現在請定義 cafe_townsend 資料夾，此資料夾已複製到 local_sites 資料夾中作
為本機資料夾。
1. 啟動 Dreamweaver，然後選取「網站＞管理網站」。
「管理網站」對話方塊便會出現。
2. 按一下「新增」按鈕，然後選取「網站」。
「網站定義」對話方塊便會出現。
3. 如果出現這個精靈 ( 「基本」索引標籤 )，請按一下「進階」索引標籤，然
後從「類別」清單中選取「本機資訊」 ( 應該是預設值 )。
4. 在「網站名稱」文字方塊中，輸入「Cafe Townsend」當作網站的名稱。
5. 在「本機根資料夾」文字方塊中，指定您在上一節複製到 local_sites 資料
夾中的 cafe_townsend 資料夾。
您可以按一下資料夾圖示，瀏覽至該資料夾後加以選取，或在「本機根資
料夾」文字方塊中輸入路徑。
6. 在「預設影像資料夾」文字方塊中，指定已經存在於 cafe_townsend 資料
夾中的影像資料夾。
您可以按一下資料夾圖示，瀏覽至該資料夾後加以選取，或在「預設影像
資料夾」文字方塊中輸入路徑。
「網站定義」對話方塊現在看起來如下所示：
「管理網站」對話方塊便會出現，顯示您的新網站。
8. 按一下「完成」，關閉「管理網站」對話方塊。
定義本機資料夾 47
「檔案」面板現在會顯示您目前網站的新本機根資料夾。「檔案」面板中的檔
案清單就像檔案管理員的角色一樣，可以讓您複製、貼上、刪除、移動及開啟
檔案，就像您在電腦桌面上執行的動作一樣。
如需有關「檔案」面板運作方式的詳細資訊，請參閱第 33 頁「檔案面板」。

您現在已經定義了網站的本機根資料夾。本機根資料夾就是本機電腦上您用來
儲存網頁的工作複本之位置。日後，如果您想要發佈網頁並讓它們可供公開使
用，便需要定義一個遠端資料夾 ( 該資料夾位於執行網路伺服器的遠端電腦上，
用來儲存本機檔案的發佈複本 )。
您可以依照本手冊其他的教學課程，建立 Cafe Townsend 範例網站，或是處理
您個人的網頁。完成頁面的建立與編輯後，請接著定義伺服器上的遠端資料夾，
並發佈網頁。如需詳細資訊，請參閱第 7 章「教學課程：發佈您的網站」。
第4章
教學課程：建立表格式頁面
版面
4
本教學課程會說明如何在 Macromedia Dreamweaver 8 中建立表格式頁面版
面。「頁面版面」會決定在瀏覽器中如何顯示頁面，例如，顯示選單、影像和
Macromedia Flash 內容的位置。
表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。您
可以使用表格，輕鬆快速地建立版面。在這個教學課程中，您將在新的
Dreamweaver 文件中建立幾個表格。表格的列和儲存格其實是用來容納您稍後
要加入內容的「容器方塊」。
檢查設計樣稿 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
建立及儲存新頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
插入表格. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
設定表格屬性 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
插入影像預留位置 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
新增頁面顏色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62
檢查設計樣稿
一般而言，當您著手建立網站時，不會馬上開啟 Dreamweaver 並配置頁面。一
開始建立網站，通常是使用紙張或圖形編輯應用程式 ( 如 Macromedia
Fireworks) 進行設計。為了向客戶展示網站的最初構想並取得認可，美工設計
人員多半會先草繪一份完整的網站圖稿 ( 也稱為「樣稿」 )。
樣稿由客戶要求的網站頁面元素組成，而這些頁面元素的數目不限。例如，客
戶可能會說：「我希望將商標放在頁面頂部，頁面中則要安排可連結至其他頁
面的導覽、一塊屬於網路商店的區域以及可讓我插入視訊片段的地方」。設計
人員隨即根據這樣的要求，著手規劃網站版面並製作滿足客戶需求的範例頁面
草稿。
49
本教學課程為您提供了一份已完成且經認可的樣稿，對象是需要設立網站的虛
構餐廳 Cafe Townsend。身為網頁設計師，您的職責就是要將樣稿轉換成可以
實際運作的網頁 ( 這可能需要其他美工設計人員和 Flash 開發人員從旁協助 )。
您會注意到美工設計人員提供給您的網頁樣稿，包括很多內容區域，還有一些
圖形概念。在下一節中，您將使用 Dreamweaver 來配置這份設計。
如果您想在電腦螢幕上查看原始樣稿檔，也可以開啟該檔案。您可以在
cafe_townsend 資料夾的 fireworks_assets 資料夾中找到樣稿 homepage-
mockup.jpg (cafe_townsend 資料夾是在第 3 章「教學課程：設定網站和專案
檔案」中複製到硬碟上的資料夾 )。甚至您可能會想將樣稿列印出來，如此在
建立頁面時才能將樣稿放在手邊參考。
50 教學課程：建立表格式頁面版面
建立及儲存新頁面
設定了網站並檢查所有樣稿之後，即可準備開始建立網頁。首先要建立新頁面，
然後將它儲存在網站的 cafe_townsend 本機根資料夾內。這個頁面最後會成為
虛構餐廳 Cafe Townsend 的網站首頁。
如果您尚未建立 cafe_townsend 本機根資料夾，則必須先完成這項作業，才能
繼續進行。如需相關說明，請參閱第 3 章「教學課程：設定網站和專案檔案」。
1. 在 Dreamweaver 中，選取「檔案＞新增」。
2. 在「新增文件」對話方塊的「一般」索引標籤中，在「類別」清單中選
取「基本頁面」，再於「基本頁面」清單中選取「HTML」，然後按一下
「建立」。
3. 選取「檔案＞另存新檔」。
4. 在「另存新檔」對話方塊中，瀏覽到網站「本機根資料夾」的 cafe_townsend
資料夾並開啟它
( 您已於第 3 章「教學課程：設定網站和專案檔案」中，在 local_sites 資
料夾內建立了這個資料夾 )。
5. 在「檔案名稱」文字方塊中輸入「index.html」，然後按一下「儲存」。
檔案名稱便會出現在應用程式視窗頂端的標題列中。
6. 在新文件頂端的「文件標題」文字方塊中，輸入 Cafe Townsend。
這是頁面的標題 ( 與檔案名稱不同 )。當網頁瀏覽者在網頁瀏覽器中檢視頁

面時，將會在瀏覽器標題列中看到這個標題。
7. 請選取「檔案＞儲存」以儲存頁面。
建立及儲存新頁面 51
插入表格
接下來，您將加入用來容納文字、圖形和 Macromedia Flash 資源的表格。
1. 在頁面上按一下，將插入點置於頁面左上角。
2. 選取「插入＞表格」。
3. 在「插入表格」對話方塊中，執行下列動作：
■ 在「列」文字方塊中輸入 3。
■ 在「欄」文字方塊中輸入 1。
■ 在「表格寬度」文字方塊中輸入 700。
■ 從「表格寬度」彈出式選單中選取「像素」。
■ 在「邊框粗細」文字方塊中輸入 0。
■ 在「儲存格內距」文字方塊中輸入 0。
■ 在「儲存格間距」文字方塊中輸入 0。
含三列及一欄的表格便會在文件中出現。表格的寬度為 700 個像素，其中

沒有邊框、儲存格內距或儲存格間距。
關於…
進一步瞭解表格表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列

所構成；而每一列則是由一個或多個儲存格構成。當您建立多個含多個儲存格的列時，儲存格便會形成欄。技術上
來說，儲存格在是水平列內的分隔區塊，而欄則是這些儲存格區塊的垂直總合。
在 Dreamweaver 中選取表格後或當插入點位於表格中時，它便會在「表格」選取器 ( 以綠色線標示 ) 中顯示表格
寬度和每個表格欄的寬度。
寬度旁邊是表格標題選單與欄標題選單的箭頭。您可以使用選單來快速存取常用的表格相關命令。您也可以選取「檢
視＞視覺輔助＞表格寬度」來啟用或停用寬度和選單的顯示。
表格可以有邊框，而表格的儲存格則可以有內距、間距或兩者都有。儲存格內距是指儲存格內容和儲存格邊界之間
的像素數目。儲存格間距則是指相鄰表格儲存格之間的像素數目。
如果您沒有明確指定儲存格內距和儲存格間距的值，則大部份瀏覽器會以儲存格內距設定為 1 且儲存格間距設定為
2 的方式顯示表格。如果要讓瀏覽器以沒有內距和間距的方式顯示表格，請將儲存格內距和儲存格間距設定為 0。
如需關於表格的詳細資訊，請參閱「使用 Dreamweaver」中的第 8 章「以表格呈現內容」。
5. 按一下表格右方以取消選取它。
6. 選取「插入＞表格」以插入另一個表格。
7. 在「插入表格」對話方塊中，對第二個表格執行下列動作：
插入表格 53
一列三欄的第二個表格便會出現在第一個表格下方。
9. 按一下表格右方以取消選取。
10. 選取「插入＞表格」以插入第三個表格，然後在「插入表格」對話方塊中

輸入下列值：
一列一欄的第三個表格便會出現在第二個表格下方。
按一下表格右方以取消選取。現在的頁面外觀應如下所示：
注意
插入表格之後，就會出現表格選取器 ( 以綠色線標示 )。只要按一下表格外部，表

格選取器便會消失。您也可以選取「檢視＞視覺輔助＞表格寬度」來停用「表格」
選取器。
設定表格屬性
現在，請使用「展開表格」模式來設定精確的表格屬性，這個模式可在表格中
暫時加入儲存格內距和間距以及增加表格邊框，方便您簡化編輯工作。更明確
地說，「展開表格」模式可讓您精確地放置插入點，避免不小心誤選表格或其
他表格內容。
注意
在「展開表格」模式中完成表格屬性的設定之後，一律會返回「標準」模式。「展
開表格」模式並不是 WYSIWYG ( 所見即所得 ) 環境，所以有些作業並不會顯示
預期的結果，例如調整大小
1. 選取「檢視＞表格模式＞展開表格模式」。
注意
出現「展開表格模式入門」對話方塊時，按一下「確定」。
2. 在第一個表格的第一列內按一下。
設定表格屬性 55
3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的「儲存格高度 (H)」文字方塊中
輸入「90」，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
注意
如果您看不到「儲存格高度」文字方塊，請按一下「屬性」檢視窗右下角的展開

箭頭。
4. 在第一個表格的第二列內按一下。
5. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 166，然後按 Enter

鍵 (Windows) 或 Return 鍵 (Macintosh)。
6. 在第一個表格的第三列內按一下。

第一個表格現在應該會有三個各具不同高度的列。
接下來，請設定第二個表格 ( 包含三欄的表格 ) 的屬性。

8. 在第二個表格的第一欄內按一下。
9. 在「屬性」檢視窗的「儲存格寬度 (W)」文字方塊中輸入「140」，然後

按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
10. 在第二個表格的第二欄內按一下。
11. 在「屬性」檢視窗的「儲存格寬度」文字方塊中輸入「230」，然後按
Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
12. 將第三欄的寬度設定為 330 個像素。

如果您已開啟「表格」選取器 ( 「檢視＞視覺輔助＞表格寬度」 )，則可在
個別的表格欄上方看到剛才輸入的三個像素值。
您不需要替這個表格中的儲存格輸入任何高度值，因為這些儲存格的高度
會隨著稍後加入的內容而增減。
13. 最後，請在最後一個表格 ( 含一列及一欄的表格 ) 內按一下。
此時的版面外觀應如下所示：
15. 按一下「文件」視窗頂端的「結束展開表格模式」連結，以返回「標準」

模式。
16. 儲存您的頁面。
插入影像預留位置
影像預留位置是將最終插圖加入網頁之前所使用的圖形。當您配置網頁時，影
像預留位置非常有用，因為它可以讓您在實際建立影像之前，先在頁面上定位
影像。
1. 在「文件」視窗中，在第一個表格的第一列內按一下。
2. 選取「插入＞影像物件＞影像預留位置」。
3. 在「影像預留位置」對話方塊中，執行下列動作：
■ 在「名稱」文字方塊中輸入 banner_graphic。
■ 在「寬度」文字方塊中輸入 700。
■ 在「高度」文字方塊中輸入 90。
■ 按一下顏色方塊，然後在顏色挑選器中選取顏色。針對本教學課程，我
們選擇紅棕色 (#993300)。
■ 將「替代文字」文字方塊保留空白。
關於…
替代文字的備註替代文字是網頁上與影像有關的文字說明。屬於 HTML 程式碼的一部分，但不會顯示在頁面上。為

大部分的影像提供替代文字是很重要的，因為如此一來使用螢幕讀取器或純文字瀏覽器的使用者才能接收到影像所
提供的資訊。如果是只顯示網站標誌的橫幅圖形的話，就不需要提供替代文字。在「影像預留位置」對話方塊中將
「替代文字」文字方塊保留空白時，Dreamweaver 會在 img 標籤中加入 alt="" 屬性。如果日後要為影像加入替
代文字，您可以選取該影像，再到「屬性」檢視窗中輸入替代文字。例如，如果您日後將標誌變更為包含電話號碼
或地址，可能會想以替代文字的方式提供該項資訊。
關於…
關於影像預留位置影像預留位置是將最終插圖加入到網頁之前所使用的圖形；它並不是顯示在瀏覽器中的圖形影
像。發佈網站之前，請以適合在網頁上顯示的圖形檔 ( 如 GIF 或 JPEG)，來取代任何已經加入的影像預留位置。
如果您有 Macromedia Fireworks，便可以在 Dreamweaver 影像預留位置中建立新的圖形。選取影像預留位置，
再按一下「屬性」檢視窗中的「建立」按鈕，Fireworks 便會開啟，同時顯示新的畫布。這個新影像的大小會設定
成與預留位置影像同樣的大小。接著，您可以依自己的喜好建立並編輯影像，然後取代 Dreamweaver 中的預留位
置影像。如需關於在 Fireworks 中利用影像預留位置建立影像的詳細資訊，請參閱「使用 Dreamweaver」中的
「使用 Fireworks 修改 Dreamweaver 影像預留位置」。
影像預留位置便會出現在第一個表格內。影像預留位置會顯示一個標籤，
以及您最後會放在該處的影像大小屬性。
注意
在瀏覽器中檢視時，影像預留位置的標籤和大小文字並不會出現。
插入影像預留位置 61
新增頁面顏色
現在，請為部分表格儲存格和頁面背景設定顏色，以增添頁面色彩。
1. 在三欄表格的第一個儲存格內按一下。
2. 按一下標籤選取器中的 <td> 標籤 ( 儲存格標籤 ) 以選取該儲存格。
3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的「背景顏色」文字方塊內按一下。

文字方塊就在「背景顏色 (Bg)」顏色方塊的旁邊。
注意
如果您看不到「背景顏色」文字方塊，請按一下「屬性」檢視窗右下角的展開

箭頭。
4. 在「背景顏色」文字方塊中輸入十六進位值 #993300，然後按 Enter 鍵
(Windows) 或 Return 鍵 (Macintosh)。
表格儲存格的顏色會變成紅棕色。
5. 在三欄表格的第二個儲存格內按一下。
6. 按一下標籤選取器中的 <td> 標籤 ( 儲存格標籤 ) 以選取該儲存格。
7. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下，再輸入十六進位值
#F7EEDF，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
表格儲存格的顏色會變成淺棕褐色。
8. 重複步驟 5 至 7，將第三個表格儲存格的顏色同樣變更為淺棕褐色。
9. 當您設完三個儲存格的顏色之後，在表格外按一下即可取消選取它。
新增頁面顏色 63
接下來，請修改頁面屬性以變更整個頁面的背景顏色。「頁面屬性」對話方塊
可供您設定一些頁面屬性，包括頁面字體的大小和顏色、查閱過連結的顏色和
頁面邊界等選項。
1. 請選取「修改＞頁面屬性」。
2. 在「頁面屬性」對話方塊的「外觀」類別中，按一下「背景顏色」顏色
方塊，然後從顏色挑選器中選取黑色 (#000000)。
關於…
挑選顏色在 HTML 中，顏色會以十六進位值 ( 例如，#FF0000) 或顏色名稱 (red) 來表示。網頁安全色指使用

256 色模式時，Windows 和 Macintosh 系統上的 Netscape Navigator 和 Microsoft Internet Explorer 都能
出現相同結果的顏色。總共有 216 種常用顏色，及組合 00、33、66、99、CC 或 FF (RGB 值分別是 0、51、
102、153、204 和 255) 值對的任何十六進位值來代表網頁安全色。
在 Dreamweaver 中選取顏色的方法，就是在適當的文字方塊中輸入十六進位值，或是從顏色挑選器中選取顏色。
顏色挑選器使用 216 色網頁安全色的色盤；從這個色盤選取顏色便能顯示該顏色的十六進位色彩值。要使用顏色挑
選器，只需按一下顏色方塊，再使用滴管游標選取顏色即可。
您也可以使用顏色挑選器來配色。例如，如果頁面上的影像包含某個色度的藍色，而您希望表格儲存格的背景顏色
能夠與它吻合，請先選取該表格儲存格，再按一下顏色方塊來開啟顏色挑選器，接著將滴管游標擺在影像中的藍色
部分上，然後按一下滑鼠按鈕。顏色挑選器就會利用以滴管所選取的顏色，找一個最相近的可能顏色填入您所選取
的區域。不過，使用這種方法選取顏色時，顏色挑選器所選擇的顏色不一定是網頁安全色。
頁面背景會變成黑色。
4. 儲存您的工作。
您的頁面版面現在已完成了。版面會包含一些表格，讓您存放如影像、文字和
Flash 視訊 (FLV) 檔之類的資源。下一個教學課程第 5 章「教學課程：加入頁
面內容」中，您將學習如何使用 Dreamweaver 所提供的各種插入功能，將資
源加入頁面。
第5章
教學課程：加入頁面內容
5
本教學課程示範如何在 Macromedia Dreamweaver 8 中加入網頁內容。您可以在
網頁中加入許多不同種類的內容，包括圖形、Macromedia Flash 檔、Macromedia
Flash 視訊檔及文字等。為頁面加入內容後，您可以使用瀏覽器進行預覽，查看
您所設計的網頁在網路上的外觀。
尋找您的檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
插入影像. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .70
插入及播放 Flash 檔 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
插入 Flash 視訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
插入文字. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
建立連結. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
在瀏覽器中預覽頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
67
尋找您的檔案
在此教學課程中，您將從在第 4 章「教學課程：建立表格式頁面版面」中建立
的表格式頁面版面 (index.html) 開始進行。如果您沒有完成上述單元的教學課
程，可以先完成它再繼續進行此教學課程，或者開啟已完成的教學課程版本，
再利用它開始著手進行。
該教學課程的已完成版本 table_layout.html 位在 completed_files/dreamweaver
資料夾內，而該資料夾位於您在第 3 章「教學課程：設定網站和專案檔案」中
複製到硬碟的 cafe_townsend 資料夾內。
注意
如果使用已完成的 table_layout.html 檔案來開始本教學課程，而非使用來自

第 4 章「教學課程：建立表格式頁面版面」的 index.html 檔案，教學課程中
的一些步驟和圖例都會與您在畫面上看到的不符。
68 教學課程：加入頁面內容
檢視您的工作
在此教學課程中，您要將資源加入 Cafe Townsend ( 虛構的餐廳 ) 的首頁。您
會學習到如何加入影像、Macromedia Flash 檔、Macromedia Flash 視訊檔和
文字。完成時，頁面外觀將如下所示：
您會注意到頁面上的文字並未設定格式。那是因為下一個教學課程中，您將學
習到如何利用「階層式樣式表」 (CSS) 來設定文字格式。
檢視您的工作 69
您可以在 cafe_townsend 根資料夾 ( 您在第 3 章「教學課程：設定網站和專案
檔案」中將該資料夾複製到硬碟上 ) 中找到本教學課程所需的資源。如果您還
沒有完成上述教學課程，則必須先完成才能繼續進行。本教學課程可讓您在進
行期間明確地知道資源的所在位置。
插入影像
建立頁面版面之後，即可開始為頁面加入資源。首先請加入影像。在
Dreamweaver 中，您可以使用數種方法來將影像加入網頁。在本節中，您將使
用各種方法，為 Cafe Townsend 的索引頁面加入四個不同的影像。
取代影像預留位置
1. 在 Dreamweaver 中，開啟您在第 4 章「教學課程：建立表格式頁面版面」
中建立的 index.html 檔案。
注意
如果您還沒有完成第 4 章「教學課程：建立表格式頁面版面」，請參閱第 68 頁
「尋找您的檔案」以瞭解如何繼續進行。
2. 在頁面的頂端，按兩下影像預留位置 banner_graphic。
3. 在「選取影像原始檔」對話方塊中，瀏覽至您定義為網站根資料夾的
cafe_townsend 資料夾，選取其中的 images 資料夾。
4. 選取 banner_graphic.jpg 檔並按一下「確定」。
Dreamweaver 便會使用 Cafe Townsend 的橫幅圖形來取代該影像預留位置。
5. 在表格的外面按一下以取消選取影像。
6. 儲存頁面 ( 「檔案＞儲存」 )。
插入影像 71
利用插入選單插入影像
1. 在第一個表格的第三列內按一下 ( 位於您剛才插入的橫幅圖形下方、有色表
格儲存格的正上方 )。
2. 選取「插入＞影像」。
3. 在「選取影像原始檔」對話方塊中，瀏覽至 cafe_townsend 資料夾中的

images 資料夾，選取 body_main_header.gif 檔案，再按一下「確定」。
注意
如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。
一個有色的長形圖形便會出現在表格列中。這看起來可能更像是表格儲存
格的背景顏色，而不是圖形。不過仔細看時，您會看到圖形具有圓角。圓
角效果可讓您在加入所有資源之後，為頁面下半部的外觀增色不少。
利用拖曳方式插入影像
1. 在頁面上最後一個表格的最後一列中按一下 ( 在有色表格儲存格的正下方 )。
2. 在「檔案」面板 ( 「視窗＞檔案」 ) 中找出 body_main_footer.gif 檔案 ( 該
檔案位於 images 資料夾內 )，再將檔案拖曳至最後一個表格中的插入點。
注意
3. 在表格外按一下，然後儲存頁面 ( 「檔案＞儲存」 )。
插入影像 73
從資源面板插入影像
1. 在三欄表格的中間欄內按一下 ( 第一個淺棕褐色的表格儲存格 )。
2. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的「水平」彈出式選單中選取「置
中對齊」，再從「垂直」彈出式選單中選取「靠上對齊」。這麼做會在儲
存格中央對齊表格儲存格的內容，並將儲存格內容推到儲存格頂端。
注意
如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角的

展開箭頭。
3. 按一下 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以加入更多空間。
關於…
「資源」面板您可以使用「資源」面板來檢視及管理目前網站中的資源。「資源」面板中會顯示與「文件」視窗

內作用中文件相關的網站資源。
您必須先定義本機網站，然後才可以在「資源」面板中檢視資源。如需詳細資訊，請參閱第 3 章「教學課程：設定
網站和專案檔案」或是「使用 Dreamweaver」。
「資源」面板提供兩種檢視：
「網站」清單會顯示您網站中的所有資源，包括網站的任何文件中所使用的顏色和 URL。
「最愛」清單中只會顯示您明確選擇的資源。如果要將某資源加入「最愛」清單，請在「網站」清單中選取該資源，
然後從「檔案」面板右上角的「選項」選單中，選取「加入至最愛」。
當您按一下「資源」面板中的資源時，預覽區域便會顯示您所選取的資源。要變更預覽區域的大小，請拖曳預覽區
域和資源欄標題之間的分隔線。
如需詳細資訊，請參閱「使用 Dreamweaver」中的「使用資源」。
4. 按一下「檔案」面板中的「資源」索引標籤，或選取「視窗＞資源」。
您的網站資源便會出現。
影像按鈕
5. 如果沒有選取「影像」檢視，請按一下「影像」以檢視您的影像資源。
6. 在「資源」面板中，選取 street_sign.jpg 檔。
插入影像 75
7. 請執行下列其中一項作業：
■ 將 street_sign.jpg 檔案拖曳到表格儲存格中央的插入點。
■ 按一下「資源」面板底部的「插入」。
注意
street_sign.jpg 圖形便會出現在頁面上。
8. 在表格的外面按一下以取消選取影像。
9. 儲存頁面。
插入及播放 Flash 檔
接著，請插入一個 Flash 檔案，以播放 Cafe Townsend 主題食物項目的相片幻
燈片。您插入的 Flash 檔是一個彈性的訊息區域，或是 FMA 檔。FMA 是 Flash
應用程式的常見類型，它會對使用者顯示資訊訊息。該訊息會根據業務需求而
有所變更。例如，如果 Cafe Townsend 要舉行特殊的活動，FMA 可以輕易地
變更 ( 不會影響網頁的其他內容 ) 為顯示活動相關資訊，而不是顯示主題食物
項目。
若要插入 Flash FMA 檔，您需要插入可將檔案嵌入 Dreamweaver 網頁的
HTML 程式碼。最容易方式就是在頁面中插入 SWF 檔案 ( 匯出的 Flash 影片
檔案 )。當您在 Dreamweaver 中插入 SWF 檔案時，Dreamweaver 會自動寫入
所有必要的 Flash HTML 程式碼。
1. 在 Dreamweaver 「文件」視窗中開啟 index.html 頁面時，在第一個表格
的第二列內按一下
( 這個表格列就在前一節所插入橫幅圖形的正下方 )。
2. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的「水平」彈出式選單中選取「置
中對齊」，再從「垂直」彈出式選單中選取「置中對齊」。
這麼做會將表格儲存格的內容放在儲存格中央。
注意
如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角

的展開箭頭。
插入及播放 Flash 檔 77
關於…
關於 Flash 檔案在 Macromedia Flash 中建立資源時，您所使用的是 FLA 檔案，這是 Flash 應用程式的預設

檔案類型。副檔名為 .fla 的檔案便是 FLA 檔案。例如，如果您在處理網站的動畫標誌，Flash 檔案的檔案名稱就可
能是 animated_logo.fla。
當您在 Flash 中處理完 FLA 檔案以後，必須將檔案匯出為能在網頁上以 Flash Player 播放的格式。當您在 Flash
中匯出 FLA 時，會將它們轉換為 SWF 檔並指定加上 .swf 副檔名。SWF 檔 ( 不是 FLA 檔 ) 會在網頁瀏覽器中
播放 Flash 內容，而且該種檔案類型一定要插入使用 Dreamweaver 建立的網頁中。
3. 選取「插入＞媒體＞ Flash」。
在「選取檔案」對話方塊中，瀏覽至 flash_fma.swf 檔案 ( 位於網站的
cafe_townsend 根資料夾中 )，選取檔案，再按一下「確定」。
如果出現「物件標籤輔助功能屬性」對話方塊，請按一下「確定」。
「文件」視窗中便會出現一個 Flash 內容預留位置，而非 FMA 檔本身的

動畫畫面。這是因為 HTML 程式碼會「指向」 SWF 檔案
flash_messaging_area.swf。當使用者載入 index.html 網頁時，瀏覽器便會
播放 SWF 檔案。
4. 當您插入 SWF 檔案以後，只要不按頁面上的其他任何位置，Flash 內容預

留位置就會維持在選取狀態。
如果未選取，按一下 Flash 內容預留位置即可加以選取。
5. 在「屬性」檢視窗 ( 視窗＞屬性 ) 中，按一下「播放」。
注意
如果看不到 Flash 「播放」按鈕，請按一下「屬性」檢視窗右下角的展開箭頭。
Dreamweaver 便會在「文件」視窗中播放 Flash 檔案，顯示網站瀏覽者以

瀏覽器檢視網頁時會看到的內容。
6. 在「屬性」檢視窗中，按一下「停止」以停止播放 Flash 檔。
7. 儲存頁面。
插入及播放 Flash 檔 79
插入 Flash 視訊
接著，您要使用所提供的資源來插入 Flash 視訊檔案。
1. 在 Dreamweaver 「文件」視窗中開啟 index.html 頁面後，在三欄表格的
中間欄內，按一下您所放置圖形的正上方
( 在前一節中，您在插入圖形之前加入了一些空間，請按一下該處 )。
2. 選取「插入＞媒體＞ Flash 視訊」。
3. 在「插入 Flash 視訊」對話方塊中，從「視訊類型」彈出式選單中選取

「漸進式下載視訊」。
關於…
關於 Flash 視訊 Dreamweaver 中的「Insert Flash Video」命令可讓您在網頁中插入 Flash 視訊內容，而不需

要使用 Flash 編寫工具。這個命令會插入 Flash 組件，當您在瀏覽器中進行檢視時，該組件便會顯示您所選取的
Flash 視訊內容以及一組播放控制項。
「插入＞ Flash 視訊」命令提供下列視訊內容傳遞選項，方便您的網站瀏覽者觀賞：
「漸進式下載視訊」會將 Flash 視訊 (FLV) 檔案下載至網站瀏覽者的硬碟，然後再播放檔案。不同於傳統的「下載
後播放」視訊傳遞方法，漸進式下載允許視訊檔案在下載完成之前開始播放。
「串流視訊」會串流 Flash 視訊內容，並立即在網頁上播放它。但是，若要在網頁上啟用串流視訊，您必須具有
Macromedia Flash Communication Server 的存取權，它是唯一能夠串流 Flash 視訊內容的伺服器。
如需關於使用 Flash 視訊的詳細資訊，請參閱「使用 Dreamweaver」中的「插入 Flash 視訊內容」。
4. 在「URL」文字方塊中，指定 cafe_townsend_home.flv 檔的相對路徑，只
要按一下「瀏覽」，瀏覽至 cafe_townsend_home.flv 檔 ( 位於網站的
cafe_townsend 根資料夾中 )，再選取 FLV 檔即可。
5. 從「外觀」彈出式選單中選取「Halo Skin 2」。
所選取外觀的預覽便會出現在「外觀」彈出式選單的下方。「外觀」選項
會指定包含 Flash 視訊內容之 Flash 視訊組件的外觀和感覺。
如需有關如何為 Flash 視訊組件選取不同外觀的詳細資訊，請前往
www.macromedia.com/go/flv_tutorial。
插入 Flash 視訊 81
6. 在「寬度」和「高度」文字方塊中，執行下列動作：
■ 在「寬度」文字方塊中，輸入「180」。
■ 在「高度」文字方塊中，輸入「135」，並按 Enter 鍵 (Windows) 或
Return 鍵 (Macintosh)。
「寬度」和「高度」文字方塊中的值會以像素為單位來指定 FLV 檔案的寬

提示
您可以按一下「偵測度和高度。您可以任意調整這些值，以變更網頁上 Flash 視訊的大小。若

大小」來決定 FLV 檔
是增加視訊的尺寸，視訊的圖片品質通常便會降低。
案的確切寬度和高度。
但是，有時候
注意
「外觀元素的總計」就是 FLV 檔案的寬度和高度，加上所選外觀的寬度和高度。

Dreamweaver 無法
決定 FLV 檔案的尺
寸。如果發生這種情 7. 其餘選項則請保留預設的選取項目：
況，您必須手動輸入寬「限制」會將 Flash 視訊組件的寬度和高度維持在相同的比例。此選項為預
度和高度值。設選取的選項。
「自動播放」指定是否要在開啟網頁時播放視訊。此選項依預設是取消選
取的。
「自動倒帶」指定是否要在播放完視訊後，讓播放控制項返回起始位置。此
選項依預設是取消選取的。
8. 按一下「確定」關閉對話方塊，然後為網頁加入 Flash 視訊內容。
「插入 Flash 視訊」命令會產生一個視訊播放程式 SWF 檔案和一個外觀

SWF 檔案，這些檔案可用來在網頁上顯示您的 Flash 視訊內容 ( 您可能需
要在「檔案」面板中按一下「重新整理」按鈕以查看新的檔案 )。這些檔
案以及加入 Flash 視訊內容的 HTML 檔案 ( 在這裡指的是 cafe_townsend
根資料夾 )，都會儲存在相同的目錄中。當您上傳內含 Flash 視訊內容的
HTML 網頁時，Dreamweaver 會將這些檔案當做相關檔案上傳 ( 只要您按
一下「要上傳相關檔案嗎 ?」對話方塊中的「是」即可 )。
9. 儲存頁面。
插入文字
現在請在頁面中加入一些文字。您可以直接在 Dreamweaver 「文件」視窗中
輸入文字，或是從其他地方 ( 如 Microsoft Word 或純文字檔案 ) 剪下並貼上文
字。然後，您會使用「階層式樣式表」 (CSS) 來格式化文字。
插入內文文字
1. 在「檔案」面板中，找出 sample_text.txt 檔案 ( 位於 cafe_townsend 根資
料夾中 ) ，並按兩下該檔案的圖示，以便在 Dreamweaver 中開啟該檔案。
由於這個檔案並非 HTML 檔案，您會注意到此視窗會使用「程式碼」檢
視，而且無法切換為「設計」檢視 ( 您在此之前進行的作業都是使用「設
計」檢視 )。
插入文字 83
2. 在 sample_text.txt 的「文件」視窗中，按 Control + A 鍵 (Windows) 或
Command + A 鍵 (Macintosh) 以選取所有文字，然後選取「編輯＞複製」
以複製文字。
3. 按一下文件右上角的 X 以關閉 sample_text.txt 檔案。
4. 在 index.html 的「文件」視窗中，在三欄表格的第三個表格儲存格內按一
下 ( 這個儲存格就在內含圖形和 Flash 視訊的那一欄的右方 )。
5. 選取「編輯＞貼上」。
取自文字檔的文字便會出現在選取的表格儲存格中。
三欄表格會根據您監視器的解析度，變寬以容納文字。目前請先不要擔心
這樣的問題。在下個教學課程中，您將學習如何使用 CSS 來設定文字的格
式，讓所有的內容都能適合表格大小。
6. 請確定插入點仍位於您剛貼上文字的表格儲存格內。如果不是的話，請在
表格儲存格內按一下。
7. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，從「垂直」彈出式選單中選取
「靠上對齊」。如此一來，您剛才貼上的文字就會對齊表格儲存格的頂端。
如果看不到「垂直」彈出式選單，請按一下「屬性」檢視窗右下角的展開
箭頭。
8. 儲存頁面。
插入導覽列的文字
接下來，請插入導覽列的文字。不過，您必須要在下個教學課程中設定文字格
式，這些文字看起來才會像是導覽列。
1. 在三欄表格的第一欄 ( 紅棕色的那一欄 ) 內按一下。
2. 輸入文字「Cuisine」。
3. 按下空格鍵並輸入「Chef Ipsum」。
插入文字 85
4. 重複前一個步驟，直到您將下列所有文字輸入完畢 ( 每個單字之間都要有
空格 )：「Articles」、「Special Events」、「Location」、「Menu」和
「Contact Us」。
輸入文字時，請勿按下 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。請
使用空格鍵來分隔文字，並讓這些文字自動換行。表格儲存格的固定寬度
會決定一行之內可容納的字數。
5. 當插入點仍位於三欄表格的第一個儲存格內時，按一下標籤選取器中的
<td> 標籤。
6. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，從「垂直」彈出式選單中選取
「靠上對齊」。
如此一來，您剛才輸入的文字就會對齊表格儲存格的頂端。
注意
如果看不到「垂直」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。
建立連結
一個連結就是插入網頁中的一項參考，它會指向另一個文件。您幾乎可以將任
何類型的資源轉換為連結，但是最常見的連結種類是文字連結。
您可以在網站建立過程的任何階段中建立連結。在本節中，您將建立導覽列的
連結 ( 雖然您還未將文字格式設定為導覽列的形式 )。
cafe_townsend 網站根資料夾包含一個已完成的 HTML 網頁 (Cafe Townsend
的菜單網頁 )，您可以連結到該網頁。導覽列中的所有連結都會連往這個頁面
( 建立真正的網站時，各連結可能會連往不同的頁面 )。
1. 在「文件」視窗中開啟 index.html 頁面，選取您在三欄表格的第一個儲存
格中輸入的「Cuisine」一字。請小心只選取「Cuisine」這個字，不要選
取到它後面的空格。
建立連結 87
2. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，按一下「連結」文字方塊旁的
資料夾圖示。
3. 在「選取檔案」對話方塊中，瀏覽至 menu.html 檔案 ( 位於與 index.html

檔案相同的資料夾中 )，並按一下「確定」(Windows) 或「選擇」(Macintosh)。
4. 在頁面上按一下以取消選取 Cuisine 一字。Cuisine 文字變成藍色並具有底
線，表示已經成為一項連結。
5. 重複前一個步驟以連結您為導覽輸入的每個字或字集。您還想要再建立六個
連結：Chef Ipsum、Articles、Special Events、Location、Menu 和 Contact Us。
將每個字或字集連結至 menu.html 頁面，在建立連結時，請小心避免將單
字或字集前後的空格也包含在內。這只是一組虛設連結；在實際情況中，
您可能需要將各個導覽文字分別連結到個別頁面。
注意
在 Dreamweaver 的「文件」視窗中按一下連結時，並不會有作用；連結只在瀏
覽器中才能運作。若要確定連結是否正確作用，請在瀏覽器中預覽頁面。如需關於
如何執行此項作業的相關說明，請繼續進行第 88 頁「在瀏覽器中預覽頁面」。
在瀏覽器中預覽頁面
「設計」檢視能讓您大致瞭解頁面在網路上的外觀，但若要查看最後的結果，
還是必須在瀏覽器中預覽頁面。使用瀏覽器進行檢視時的結果通常都差不多，
但是在不同的瀏覽器版本中檢視 HTML 頁面時，顯示畫面可能稍有不同。
Dreamweaver 嘗試在不同瀏覽器中，產生具有盡可能相似外觀的 HTML；不
過有時仍是無法避免些許差異。因此，要確認您所發佈的頁面在網站瀏覽者瀏
覽器中的外觀，唯一方法就是使用瀏覽器預覽您的工作。
1. 在「文件」視窗中開啟 index.html 檔案。
2. 按 F12 鍵 (Windows) 或 Option + F12 鍵 (Macintosh)。
如果主要瀏覽器尚未啟動，該瀏覽器便會啟動並顯示索引頁面。
注意
Dreamweaver 會自動偵測您的主要瀏覽器，並使用該瀏覽器進行預覽。如果沒
有出現預覽，或者如果頁面沒有出現在您預期的瀏覽器中，請切換回
Dreamweaver ( 如有必要 ) 並選取「檔案＞在瀏覽器中預覽＞編輯瀏覽器清單」。
當「在瀏覽器中預覽」偏好設定對話方塊出現時，將正確的瀏覽器加入清單。如
需詳細資訊，請按一下「偏好設定」對話方塊中的「說明」按鈕。
3. ( 選擇性 ) 切換回 Dreamweaver 以進行任何必要的變更。
儲存您的工作，並再次按下 F12 鍵，讓變更生效。

現在您的網頁已擁有完整的內容。下一步就是設定部分內容的格式，讓它更美
觀大方。在下一個教學課程中，您會學習到如何使用 CSS 來設定所加入文字
的格式。
在瀏覽器中預覽頁面 89
第6章
教學課程：使用 CSS 設定頁

面格式
6
此教學課程為您示範在 Dreamweaver 中，如何使用「階層式樣式表」 (CSS)
設定頁面上文字的格式。CSS 讓您以 HTML 無法達成的方式來設定文字格式
及定位，所以對頁面外觀能提供較佳的控制能力。
尋找您的檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
了解 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
建立新的樣式表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
探索 CSS 樣式面板 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
附加樣式表 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98
建立新的 CSS 規則 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
將類別樣式套用至文字 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .106
設定導覽列文字的格式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107
( 選擇性 ) 將頁面內容置中 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
91
尋找您的檔案
在此教學課程中，您將從在第 5 章「教學課程：加入頁面內容」中加入網頁內
容的 Cafe Townsend 索引頁面開始進行。如果您沒有完成上述教學課程，可以
先完成它再繼續進行此教學課程，或者開啟已完成的教學課程版本，再利用它開
始著手進行。該教學課程的已完成版本 add_content.html 位在 completed_files/
dreamweaver 資料夾中，而該資料夾位於您在第 3 章「教學課程：設定網站和
專案檔案」中複製到硬碟的 cafe_townsend 資料夾內。
注意
如果使用已完成的 add_content.html 檔案來開始本教學課程，而非使用來自第 5 章

「教學課程：加入頁面內容」的 index.html 檔案，教學課程中的一些步驟和圖例都
會與您在畫面上看到的不符。
92 教學課程：使用 CSS 設定頁面格式

檢視您的工作
在此教學課程中，您會使用「階層式樣式表」 (CSS) 來設定 Cafe Townsend
( 虛構的餐廳 ) 首頁文字的格式。還要建立不同種類的 CSS 規則來設定內文
文字格式。您也會設定頁面左邊的連結文字格式，以建立導覽列。完成後，頁
面看起來如下列範例所示：
如需有關 CSS 的詳細資訊，請繼續進行下一節。若要立即開始建立 CSS，請

繼續進行第 96 頁「建立新的樣式表」。
了解 CSS
「階層式樣式表」 (CSS) 是控制網頁內容外觀的格式規則集合。當您使用 CSS
來設定頁面格式時，會依呈現方式來分隔內容。頁面內容 (HTML 程式碼 ) 位
於 HTML 檔內，但是定義程式碼呈現方式的 CSS 規則卻位於另一個檔案 ( 外
部樣式表 ) 或位於 HTML 文件的另一個部分 ( 通常是 <head> 區段 )。使用
CSS 可以讓您對網頁的確切外觀 ( 從版面的精確位置到特定的字體和樣式 ) 有
相當大的彈性和控制能力。
CSS 能讓您控制無法單獨使用 HTML 控制的許多屬性。例如，您可以為選取
的文字指定不同的字體大小和單位 ( 像素、點等等 )。使用 CSS 以像素為單位
設定字體大小，也可以確保頁面的版面和外觀在多種瀏覽器中具有更為一致的
處理方式。
CSS 格式規則是由兩個部分構成：選取器和宣告。選取器是一種用語 ( 例如 P、
H1、類別名稱或 id)，可用來識別格式化的元素，而宣告則會定義什麼是樣式
元素。在以下範例中，H1 是選取器，而在大括弧 ({}) 中的所有內容都算是宣告：
H1 {font-size:16 pixels;
font-family:Helvetica;
font-weight:bold;
}
宣告由兩個部分構成：屬性 ( 例如 font-family) 和值 ( 例如 Helvetica)。

前面的範例會為 H1 標籤建立樣式：所有連結到這個樣式之 H1 標籤的文字大小
都是 16 像素，而且使用粗體的 Helvetica 字體。
「階層式」一詞是指您可以套用多個樣式到同一個元素或網頁。例如，您可以
建立一個 CSS 規則以套用顏色，然後建立另一個規則以套用邊界，最後將這
兩個規則套用到網頁上相同的文字。而定義的樣式會「重疊」於網頁的元素
下，最後建立您要的設計。

CSS 的主要優點是易於更新；當您在其中一個位置更新 CSS 規則時，使用這
個定義的樣式之所有文件格式都會自動更新為新的樣式。
您可以在 Dreamweaver 中定義下列規則類型：
■ 自訂 CSS 規則，也稱為「類別樣式」，可以讓您將樣式屬性套用到任何文
字範圍或區塊。所有類別樣式的開頭都是句點 (.)。例如，您可以建立一個
類別樣式叫做 .red，將規則的 color 屬性設定為 red，再將樣式套用至已
設定樣式之段落文字的一部分。
■ HTML 標籤規則會重新定義特定標籤 ( 例如 p 或 h1) 的格式。當您建立或
變更 h1 標籤的 CSS 規則時，所有以 h1 標籤格式化的文字都會立即更新。
■ CSS 選取器規則 ( 進階樣式 ) 會為特定元素組合或其他 CSS 允許的選取器
形式重新定義格式 ( 例如每當 h2 標題出現在表格儲存格內時，便會套用選
取器 td h2)。進階樣式也會重新定義包含特定 id 屬性之標籤的格式 ( 例
如，由 #myStyle 定義的樣式會套用至內含 id="myStyle" 屬性 - 值配對
的所有標籤 )。
如需詳細資訊，請參閱「使用 Dreamweaver」中的「關於 Dreamweaver 中的
文字格式化」。
了解 CSS 95
建立新的樣式表
首先，您會建立一個外部樣式表，內含會定義段落文字樣式的 CSS 規則。當
您在外部樣式表中建立樣式時，便可以從中央位置控制多個網頁的外觀，而不
必在每個個別網頁上設定樣式。
1. 選取「檔案＞開新檔案」。
2. 在「新文件」對話方塊中，選取「分類」欄中的「基本」頁面，在「基
本頁面」欄中選取「CSS」，然後按一下「建立」。
空白的樣式表會出現在「文件」視窗中。「設計」檢視和「程式碼」檢視

按鈕便會停用。CSS 樣式表是純文字檔，它們的內容並非用於在瀏覽器中
進行檢視。

關於…
進一步瞭解 CSS 規則
CSS 規則可以存放在下列位置：
外部 CSS 樣式表是 CSS 規則的集合，儲存在分開的外部 .css 檔案 ( 並非 HTML 檔案 ) 中。該 .css 檔案使用文
件 head 區段中的連結，連至一或更多個網站的頁面。
內部 ( 或內嵌 ) CSS 樣式表是 CSS 規則的集合，其包括在 HTML 文件 head 部份的 style 標籤中。例如，下
列範例會定義文件中以段落標籤設定格式之所有文字的字體大小：
<head>
<style>
p{
font-size:80px
}
</style>
</head>
行內樣式是使用整份 HTML 文件內的特定標籤實體加以定義。例如，<p style="font-size:9px"> 只會為以

內含行內樣式之標籤設定格式的段落定義字體大小。
Dreamweaver 會呈現大部分您套用的樣式屬性並在「文件」視窗中顯示它們。您也可以在瀏覽器視窗中預覽文
件，查看樣式套用的情況。有些 CSS 樣式屬性在 Microsoft Internet Explorer、Netscape Navigator、
Opera 和 Apple Safari 中所呈現出來的不一樣。
3. 將頁面儲存 ( 「檔案＞儲存」 ) 為 cafe_townsend.css。

當您儲存樣式表時，請確定將它儲存在 cafe_townsend 資料夾 ( 網站的根
資料夾 )。
4. 在樣式表中輸入下列程式碼：
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
輸入時，Dreamweaver 會使用程式碼提示做為您完成輸入時的建議選項。
當您看到想要的程式碼時，請按 Enter 鍵 (Windows) 或 Return 鍵
(Macintosh) 讓 Dreamweaver 為您完成輸入。
建立新的樣式表 97
不要忘記在屬性值之後、每一行結尾處加上分號。
完成時，程式碼看起來應該如下列範例所示：
5. 儲存樣式表。
提示
如需關於任何 CSS 屬
接下來，您要將樣式表附加至 index.html 頁面。
性的詳細資訊，請參閱
Dreamweaver 所附
的 O’Reilly 參考手冊。
若要顯示手冊，請選取附加樣式表
「說明＞參考」，再從
「參考」面板中的彈出當您將樣式表附加至網頁時，樣式表中所定義的規則會套用至頁面上對應的元
式選單內選取素。例如，將 cafe_townsend.css 樣式表附加至 index.html 頁面時，所有的段
「O’Reilly CSS 落文字 (HTML 程式碼中以 <p> 標籤設定格式的文字 ) 都是根據您定義的
Reference」。 CSS 規則設定格式的。

1. 在「文件」視窗中，開啟 Cafe Townsend index.html 檔 ( 如果它已開啟的
話，可以按一下它的索引標籤 )。
2. 選取您在第 5 章「教學課程：加入頁面內容」中貼到頁面中之第一個段落
的文字。
3. 在「屬性」檢視窗中查看，並確定段落是以段落標籤設定格式。
如果「屬性」檢視窗中的「格式」彈出式選單顯示出「段落」，表示段落

是以段落標籤設定格式。如果「屬性」檢視窗中的「格式」彈出式選單顯
示出「無」或其他項目，請選取「段落」來格式化段落。
4. 為第二個段落重複步驟 3。
附加樣式表 99
5. 在「CSS 樣式」面板中 ( 「視窗＞ CSS 樣式」 )，按一下位於面板右下方
角的「附加樣式表」按鈕。
6. 在「附加外部樣式表」對話方塊中，按一下「瀏覽」並瀏覽至您在前一節
中建立的 cafe_townsend.css 檔。
「文件」視窗中的文字會根據外部樣式表中的 CSS 規則來設定格式。

探索 CSS 樣式面板
「CSS 樣式」面板可讓您追蹤會影響目前選取之頁面元素的 CSS 規則和屬性，
或會影響整個文件的規則和屬性。它也可以讓您修改 CSS 屬性，但不必開啟
外部樣式表。
1. 請確定在「文件」視窗中開啟 index.html 檔案。
2. 在「CSS 樣式」面板 ( 「視窗＞ CSS 樣式」 ) 中，按一下面板頂端的「全
部」並檢查您的 CSS 規則。
在「全部」模式中，CSS 面板會顯示套用至目前文件的所有 CSS 規則，
不論這些規則是在外部樣式表中或位於文件本身。您應該會在「所有規則」
窗格中看到兩個主要類別：「樣式」標籤類別和 cafe_townsend.css 類別。
3. 如果「樣式」標籤類別還沒展開的話，請按一下加號 (+) 將它展開。
4. 按一下內文規則。
設定為 #000000 值的 background-color 屬性便會出現在下面的「屬

性」窗格中。
注意
您可能需要收合另一個面板，如「檔案」面板，才能看到「CSS 樣式」面板的完

整長度。您也可以改變「CSS 樣式」面板的長度，只要拖曳窗格間的邊框即可。
在第 4 章「教學課程：建立表格式頁面版面」中，您利用「修改頁面屬
性」對話方塊來設定頁面的背景顏色。以這種方法設定頁面屬性時，
Dreamweaver 會將 CSS 樣式寫入至文件內部。
探索 CSS 樣式面板 101

5. 按一下加號 (+) 展開 cafe_townsend.css 類別。
6. 按一下 p 規則。
您在外部樣式表中為 p 規則定義的所有屬性和值都會出現在下面的「屬
性」窗格中。
7. 在「文件」視窗中，於您剛才設定格式之兩個段落中的任一位置上按一下。
8. 在「CSS 樣式」面板中，按一下面板頂端的「正在」並檢查您的 CSS 樣
式。在「正在」模式中，CSS 面板會顯示目前選取範圍的屬性摘要。顯示
出來的屬性會對應至外部樣式表中規則的屬性。
在下一節中，您將使用「CSS 樣式」面板來建立新規則。就像您剛開始建立
外部樣式表時所做的一樣，使用「CSS 樣式」面板來建立新規則比手動輸入
規則來得簡單得多。

建立新的 CSS 規則
在本節中，您要使用「CSS 樣式」面板來建立自訂的 CSS 規則或類別樣式。
類別樣式可讓您為任何文字範圍或文字區塊設定樣式屬性，而且可套用至任
何 HTML 標籤。如需不同 CSS 規則類型的詳細資訊，請參閱第 94 頁「了
解 CSS」。
1. 在「CSS 樣式」面板中，按一下面板右下角的「新增 CSS 規則」。
2. 在「新增 CSS 規則」對話方塊中，從「選取器類型」選項中選取「類

別」。依預設值，這個組件應該會選取。
3. 在「名稱」文字方塊中輸入「.bold」。
請確定在「bold」文字之前有輸入句點 (.)。所有類別樣式的開頭都必須是
句點
建立新的 CSS 規則 103

4. 從「定義在」彈出式選單中，選取 cafe_townsend.css。依預設值，這個組
件應該會選取。
「CSS 規則定義」對話方塊便會出現，指出您正在 cafe_townsend.css 檔中
建立一個叫做 .bold 的類別樣式。
6. 在「CSS 規則定義」對話方塊中，執行下列動作：
■ 在「字體」文字方塊中，輸入「Verdana, sans-serif」。

■ 在「大小」文字方塊中，輸入「11」，並從正右邊的彈出式選單中選取像素。
■ 在「行高」文字方塊中，輸入「18」，並從正右邊的彈出式選單中選取像素。
■ 從「粗細」彈出式選單中選取「粗體」。

■ 在「顏色」文字方塊中輸入「#990000」。
.
提示
8. 按一下「CSS 樣式」面板頂端的「全部」。
9. 如果還沒有展開 cafe_townsend.css 類別的話，請按一下 cafe_townsend.css Dreamweaver 所附
類別旁邊的加號 (+) 按鈕。的 O’Reilly 參考手冊。
若要顯示手冊，請選取
您會看到 Dreamweaver 將 .bold 類別樣式加入外部樣式表中所定義的規則「說明＞參考」，再從
清單。如果您按一下「所有規則」窗格中的 .bold 規則，規則的屬性便會「參考」面板中的彈出
出現在「屬性」窗格中。新的規則也會出現在「屬性」檢視窗的「樣式」式選單內選取
彈出式選單中。「O’Reilly CSS
Reference」。
建立新的 CSS 規則 105

將類別樣式套用至文字
現在您已建立了類別規則，接下來要將它套用至一些段落文字中。
1. 在「文件」視窗中，選取第一個段落中的前四個字：Cafe Townsend’s
visionary chef。
2. 在「屬性」檢視窗 (「視窗＞屬性」) 中，從「樣式」彈出式選單選取 bold。
粗體的類別樣式便會套用至您的文字。
3. 重複步驟 2 來將粗體類別樣式套用至第二個段落的前四個字。

設定導覽列文字的格式
接下來，您會使用 CSS 將樣式套用至導覽列的連結文字。很多網頁會使用有
色的矩形影像並於影像內加入文字來建立導覽列，但使用 CSS 的話，您只需
要將文字和一些格式加以連結即可。只要利用 display:block 屬性和設定區
塊的寬度，便可以有效地建立矩形，不必使用個別的影像。
為導覽建立新規則
1. 如果還沒有開啟 cafe_townsend.css 檔的話，請開啟它或在它的索引標籤上
按一下進行查看。
2. 在檔案中 .bold 類別樣式之後輸入下列程式碼，定義新的規則：
.navigation {
}
這是一個空的規則。
檔案中的程式碼看起來應該如下列範例所示：
3. 儲存 cafe_townsend.css 檔。
接下來，您會使用「CSS 樣式」面板將屬性加入規則中。
設定導覽列文字的格式 107
4. 如果還沒開啟 index.html 檔的話，請開啟它。
5. 在「CSS 樣式」面板中，確定已選取「全部」模式，再選取新的 .navigation

規則，然後按一下面板右下角的「編輯樣式」。
6. 在「CSS 規則定義」對話方塊中，執行下列動作：
■ 在「字體」文字方塊中輸入「Verdana, sans-serif」。
■ 從「大小」彈出式選單中選取「16」，再從「大小」彈出式選單正右
邊的彈出式選單中選取「像素」。
■ 從「樣式」彈出式選單中選取「一般」。
■ 從「裝飾」清單中選取「無」。
■ 從「粗細」彈出式選單中選取「粗體」。

■ 在「顏色」文字方塊中輸入「#FFFFFF」
提示
現在您要使用「CSS 樣式」面板再將一些屬性加入 .navigation 規則中。
8. 在「CSS 樣式」面板中，確定已選取 .navigation 規則，再按一下「顯示 Dreamweaver 所附
清單檢視」。的 O’Reilly 參考手冊。
若要顯示手冊，請選取
「說明＞參考」，再從
「參考」面板中的彈出
式選單內選取
「O’Reilly CSS
Reference」。
清單檢視會將「屬性」窗格重新組織，將所有可用屬性，按字母順序成清
單來顯示 ( 和前一個檢視相反，
「設定屬性」檢視只會顯示您已設定的屬性 )。
9. 在 background-color 屬性右邊的欄中按一下。
若要查看屬性的完整用語，請將滑鼠停留在屬性上。
10. 輸入「#993300」做為十六進位值，並按 Enter 鍵 (Windows) 或 Return
鍵 (Macintosh)。
11. 找出 display 屬性 ( 您可能需要向下捲動 )，在其右邊的欄中按一下，再從

提示
若要查看您的工作如何彈出式選單中選取區塊。
影響外部樣式表，在工
作時，請在「文件」
視窗中保持開啟
cafe_townsend.css
檔。當您在「CSS 樣
式」面板中進行選取
時，便會看到
Dreamweaver 同時
在樣式表中撰寫 CSS
程式碼。
12. 找出 padding 屬性，在其右邊的欄中按一下，輸入「8px」做為它的值，

再按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
13. 找出 width 屬性，在其右邊的欄中按一下，在第一個文字方塊中輸入「140」
，
從彈出式選單中選取「像素」，再按 Enter 鍵 (Windows) 或 Return 鍵
(Macintosh)。

14. 按一下「顯示設定屬性」，好讓您設定好的屬性出現在「屬性」窗格中。
15. 在 cafe_townsend.css 檔上按一下以顯示它。您會看到 Dreamweaver 已將

您指定的所有屬性加入檔案中。
16. 儲存 cafe_townsend.css 檔並關閉它。
現在您已建立好可設定導覽列文字格式的規則。接下來，便要將規則套用至選
取的連結。
套用規則
1. 先在「文件」視窗中開啟 index.html 頁面，按一下「Cuisine」，將插入
點放在該字中的某個位置。
2. 在標籤選取器中，按一下最右邊的 <a> 標籤。

這個動作會選取指定的 <a> 標籤的所有文字或連結。
3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，從「樣式」彈出式選單中選取

「navigation」。
在「文件」視窗中，Cuisine 文字的外觀便會完全改變。文字現在已根據
您在前一節中所定義的 .navigation 規則的屬性，格式化成導覽列按鈕。

4. 為導覽列中的每個連結重複步驟 1 至 3。
您必須將 navigation 類別樣式指定給每個 <a> 標籤或連結，所以請務必使

用標籤選取器分別選取每個連結，再分別為每個標籤或連結指定類別樣式。
如果您在設定連結文字格式時遇到問題，請確定每個已連結的文字之間是
空格 ( 而非換行 )。還要確定兩個連結之間的空格本身並未設定連結。如果
設定為連結的話，請小心選取已連結的空格，清除「屬性」檢視窗中的
「連結」文字方塊，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
5. 當您完成導覽列所有文字的格式設定之後，請儲存頁面，然後在瀏覽器中
預覽工作 ( 「檔案＞在瀏覽器中預覽」 )。
您可以在連結上按一下以確定連結是否可以運作。
加入滑鼠變換影像效果
接下來，您要加入滑鼠變換影像效果，讓導覽列的背景顏色能在滑鼠指標滑過
其中一個連結時進行變更。若要加入滑鼠變換影像效果，請加入包含 :hover 虛
擬類別的新規則。
1. 開啟 cafe_townsend.css 檔。
2. 選取整個 .navigation 規則。
3. 複製文字 ( 「編輯＞複製」 )。
關於…
關於 :hover 虛擬類別虛擬類別是用來影響 HTML 文件中之某些元素的一種方法，它的根據基礎並不是文件本

身的 HTML 程式碼，而是網頁瀏覽器所套用的其他外部條件。虛擬類別可以是動態的，當使用者與文件互動時，
頁面上元素多少可能會得到或失去虛擬類別。
當使用者將滑鼠停留在已設定格式的頁面元素上時，:hover 虛擬類別會影響該元素的變更。例如，將 :hover 虛擬
類別加入 .navigation 類別樣式 (.navigation:hover) 以建立新規則時，由 .navigation 規則設定其格式的所有文
字元素便會根據 .navigation:hover 規則屬性進行變更。

4. 在規則結尾處按一下，再按幾次 Enter 鍵 (Windows) 或 Return 鍵
(Macintosh) 以製造一些空間。
5. 在您剛才建立的空間中貼上 ( 「編輯＞貼上」 ) 複製的文字。
6. 將 :hover 虛擬類別加入貼上的 .navigation 選取器，如下所示：
7. 在新的 .navigation:hover 規則中，以 #D03D03 取代目前的背景顏色
(background-color) (#993300)。
8. 儲存檔案並關閉它。
9. 在「文件」視窗中開啟 index.html 檔，並在瀏覽器中預覽頁面 ( 「檔案＞

在瀏覽器中預覽」 )。
當您將滑鼠停留在任何連結上時，便可以看到新的滑鼠變換影像效果。
( 選擇性 ) 將頁面內容置中
最後，您要使用標籤選取器來選取文件中的所有 HTML，將文件的內容置中。
注意
有些瀏覽器 ( 例如 Internet Explorer 6)，在您使用本節所述的方法時，會將頁面

上表格儲存格內容的文字置中。如果您在瀏覽器中預覽頁面時對預覽結果不滿意，
可能會想要略過此節，讓頁面內容保持靠左對齊。

1. 在「文件」視窗中開啟 index.html 頁面，按一下標籤選取器中的 <body>
標籤。
按一下 <body> 標籤會在「文件」視窗中選取 <body> 的開始和結束標籤

之間的所有項目。若要查看選取範圍，請按一下「文件」視窗頂端的「程
式碼」檢視。
( 選擇性 ) 將頁面內容置中 117

2. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，按一下「置中對齊」按鈕。
Dreamweaver 會插入 CSS <div> 標籤，該標籤會將頁面的內文內容置中。

在「設計」檢視中，會有虛線將 <div> 標籤置中的區域框起來。
3. 儲存頁面。
現在您的頁面已完成了。建立網站的最後一項工作是發佈頁面。若要發佈頁面，
您必須定義遠端網站上的資料夾，並將檔案上傳至該資料夾。如需相關說明，
請繼續下一個教學課程。

第7章
教學課程：發佈您的網站
7
本教學課程將教您如何使用 Macromedia Dreamweaver 8 設定遠端網站並發
佈網頁。遠端網站通常位於遠端電腦上，此遠端電腦執行網站伺服器並容納本
機檔案的複本。當使用者在瀏覽器中檢視您的網頁時，會存取在此網站伺服器
上執行的遠端網站。
了解遠端網站 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
定義遠端資料夾 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .120
上傳本機檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
疑難排解遠端資料夾設定 ( 選擇性 ). . . . . . . . . . . . . . . . . . . . . . . . . . . .123
了解遠端網站
建立網站之後，下一步是將檔案上傳到遠端資料夾，以便發佈網站。遠端資料
夾是您儲存檔案的地方，會因您測試、實際執行、共同作業的環境而異。
Dreamweaver 會將此資料夾視為遠端網站。
在繼續進行之前，您必須擁有對遠端網站伺服器 ( 如 ISP 的伺服器、您服務的
用戶端所擁有之伺服器、您公司內的 Intranet 伺服器，或是 Windows 電腦上
的網際網路資訊服務 (IIS)) 的存取權。如果您還沒有這類伺服器的存取權，請
洽詢 ISP、客戶或系統管理員。
或者，您可以在本機電腦執行網站伺服器，例如 IIS (Windows) 或 Apache
(Macintosh)。如需在本機電腦設定網站伺服器的詳細資訊，請參閱第 209 頁
附錄 B 「安裝網站伺服器」。
本教學課程中所描述的程序在遠端根資料夾為空白時效果最佳。如果遠端網站
已包含檔案，則請先在遠端網站中建立空的資料夾 ( 在伺服器上 )，然後將這
個空資料夾做為您的遠端根資料夾來使用。
119
開始之前，您必須先定義本機網站。如需詳細資訊，請參閱第 43 頁「教學課
程：設定網站和專案檔案」。
如需 Dreamweaver 網站的詳細資訊，請參閱「使用 Dreamweaver」中的第 2
章「設定 Dreamweaver 網站」。
定義遠端資料夾
現在，您將設定遠端資料夾以便發佈網頁。由於遠端網站通常為本機網站的完
全複製，遠端資料夾和本機資料夾通常會有相同的名稱。也就是說，發佈到遠
端資料夾的檔案和子資料夾是在本機所建立之檔案和子資料夾的複本。
1. 在遠端伺服器上，於伺服器的網站根資料夾內建立空資料夾。
將新的空資料夾命名為 cafe_townsend ( 與本機根資料夾相同的名稱 )。
關於…
使用 Dreamweaver 建立遠端資料夾如果 Dreamweaver 是您存取遠端伺服器的唯一方式，則必須先完成

Dreamweaver 中的遠端設定並建立連線，才能在遠端伺服器上建立空資料夾。在此情況下，您可以將主機目錄定
義為遠端資料夾，或在連線到伺服器之後建立遠端資料夾。不論您選擇哪個方法來建立遠端資料夾，都請依照本教
學課程指示繼續進行，直到連線到遠端伺服器。建立連線之後，您可以使用 Dreamweaver 「檔案」面板建立新的
遠端資料夾。
當您連線到遠端伺服器時，「檔案」面板會在「遠端」檢視中顯示遠端伺服器所有的檔案 ( 同樣地，它會在「本機」
檢視中顯示電腦所有的本機檔案 )。若要顯示「遠端」檢視，請從「檔案」面板上方的彈出式選單中選取「遠端」
檢視，或按一下「檔案」面板工具列上的「擴展 / 收合」。當您按一下「擴展 / 收合」時，「檔案」面板會同時顯
示「本機」檢視和「遠端」檢視。
若要在「遠端」檢視中加入空資料夾，請先使用上述其中一個方法來顯示「遠端」檢視 ( 如果您一開始看不到連線，
請按一下「檔案」面板工具列上的「重新整理」 )。當您看到已連線到網站伺服器時，請在「遠端」檢視中按一下
右鍵 (Windows) 或 Command + 按一下 (Macintosh)，然後選取「新增資料夾」。
重新整理按鈕擴展 / 收合按鈕
如需詳細資訊，請參閱「使用 Dreamweaver」中的第 4 章「管理檔案」。
2. 在 Dreamweaver 中，選取「網站＞管理網站」。
120 教學課程：發佈您的網站
3. 在「管理網站」對話方塊中，選取 Cafe Townsend 網站。
如果您尚未定義 Cafe Townsend 網站，請建立此網站的本機資料夾，然後

再繼續。如需詳細資訊，請參閱第 43 頁「教學課程：設定網站和專案檔案」。
4. 按一下「編輯」。
5. 在「網站定義」對話方塊中，如果「進階」設定未顯示，請按一下「進
階」索引標籤。
6. 從左邊的「分類」清單中選取「遠端資訊」。
7. 選取「存取」選項。
網際網路上最常見的連線到伺服器方式就是 FTP 和 SFTP；而如果您使用
內部網路上的伺服器 ( 或本機電腦 ) 作為網站伺服器，最常見的連線到伺
服器方式則是「本機 / 區域網路」。如果您不確定在這裡要選擇什麼選項，
請洽詢伺服器系統管理員。
如需詳細資訊，請按一下對話方塊中的「說明」。
8. 如果您選取 FTP，請輸入下列選項：
■ 輸入伺服器的主機名稱 ( 如 ftp.macromedia.com)。
■ 在「主機目錄」文字方塊中，輸入伺服器從 FTP 根資料夾到遠端網站
根資料夾 (cafe_townsend) 的路徑。如果您不確定路徑為何，請洽詢系
統管理員。
在很多情況下，這個文字方塊應該保留空白。
■ 在適當的文字方塊中輸入您的使用者名稱和密碼。
■ 如果您的伺服器支援 SFTP，請選取「使用安全 FTP (SFTP)」選項。
■ 按一下「測試」，測試連線設定。
■ 如果連結不成功，請洽詢系統管理員。
9. 如果您選取「本機 / 區域網路」，請按一下文字方塊旁邊的資料夾圖示，
並瀏覽到遠端網站的根資料夾。
Dreamweaver 會建立到遠端資料夾的連線。
11. 按一下「完成」，關閉「管理網站」對話方塊。
定義遠端資料夾 121
上傳本機檔案
在設定本機和遠端資料夾後，便可以將本機資料夾的檔案上傳到網站伺服器。
即使您是在本機電腦上執行網站伺服器，若要使頁面可供公開存取，您仍必須
將這些頁面上傳。
1. 在「檔案」面板 ( 「視窗＞檔案」 ) 中，選取網站的本機根資料夾
(cafe_townsend)。
2. 按一下「檔案」面板工具列中的藍色「上傳檔案」箭頭圖示。
3. 當 Dreamweaver 詢問您是否要上傳整個網站時，請按一下「確定」。

Dreamweaver 會將所有檔案複製到您在第 120 頁「定義遠端資料夾」中所
定義的遠端資料夾。這項作業會花一些時間，因為 Dreamweaver 必須上傳
網站上的所有檔案。
4. 在瀏覽器中開啟遠端網站，確保所有檔案都已正確上傳。
疑難排解遠端資料夾設定 ( 選擇性 )
網站伺服器有許多設定方式。以下清單提供了設定遠端資料夾時，可能會遇到
的一些常見問題的相關資訊，及解決方法：
■ Dreamweaver FTP 實作可能因為使用某些 Proxy 伺服器、多層防火牆及其
他間接的伺服器存取形式而無法正常運作。
如果您遇到 FTP 存取的問題，請洽詢本機系統管理員尋求協助。
■ 若是實作 Dreamweaver FTP，您必須連線至遠端系統的根資料夾 ( 在很多
應用程式中，您可以連線至任何遠端目錄，然後瀏覽整個遠端檔案系統，
尋找您要的目錄 )。
請確定已將遠端系統的根資料夾指定為主機目錄。
如果連線發生問題，而您已使用單斜線 (/) 指定主機目錄，那麼可能需要指
定從連線的目錄到遠端根資料夾的相對路徑。
例如，如果遠端根資料夾是較高層的目錄，您可能必須使用 ../../ 來指定主
機目錄。
■ 包含空格和特殊字元的檔案和資料夾名稱，經常會在傳送到遠端網站時造
成問題。
使用底線取代空格，並且盡可能避免在檔案和資料夾名稱中使用特殊字元。
檔案或資料夾名稱中的冒號 (:)、斜線 (/)、句點 (.) 及省略符號 (') 尤其會
造成問題。檔案或資料夾名稱中的特殊字元有時候也可能讓 Dreamweaver
無法建立網站地圖。
■ 如果您在使用長檔名時遇到問題，請以較短的名稱重新命名。在 Macintosh
上，檔案名稱長度不能超過 31 個字元。
■ 很多伺服器使用符號連結 (UNIX)、快速鍵 (Windows) 或別名 (Macintosh)，
連結位於伺服器磁碟某一部份的資料夾與其他位置的資料夾。
例如，伺服器主目錄中的 public_html 子目錄，實際上可能是伺服器另一
個部份的連結。在大部份的情況下，這種別名對您連結至適當的資料夾或
目錄並沒有影響，但是，如果可以連結至伺服器的某個部份卻無法連結至
另一個部份，表示可能有別名矛盾存在。
■ 如果您遇到像「無法上傳檔案」之類的錯誤訊息時，表示您的遠端資料夾
空間可能不足。如需詳細資訊，請查看 FTP 記錄。
注意
通常，當您遇到 FTP 傳輸問題時，可選取「進階＞ FTP 記錄」來檢查 FTP

記錄。
疑難排解遠端資料夾設定 ( 選擇性 ) 123

3
第 3 部分
進階教學課程
本書第三部分所含的教學課程將介紹 Dreamweaver 進階功能。您不需要預先

具備 HTML 或其他語言的知識，即可完成這些教學課程，但這部分的教學課
程確實比先前的教學課程更為複雜。
教學課程：使用程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127
教學課程：建立 CSS 式頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
教學課程：顯示 XML 資料 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159
教學課程：開發網路應用程式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
125
第8章
教學課程：使用程式碼
8
當您在網頁上加入文字、影像和其他內容時，Dreamweaver 8 會產生 HTML 程
式碼。這個教學課程將說明如何使用「程式碼」檢視來顯示文件的基本程式碼，
以及如何以手動方式新增與編輯程式碼。
如果您已經安裝網站並且完成了前一個教學課程，您可以繼續使用相同的
index.html 檔案。
如果您還沒有完成前一個教學課程，仍然可以完成這個教學課程。首先，請遵
循第 43 頁「教學課程：設定網站和專案檔案」的指示來安裝網站。接著，請使
用 cafe_townsend/completed_files/dreamweaver 資料夾中的 index_code.html 檔
案，來完成這個教學課程。index_code.html 是您在第 91 頁第 6 章「教學課程：
使用 CSS 設定頁面格式」中已完成的 index.html 檔案的複製備份。
注意
如果使用已完成的 index_code.html 檔案來開始本教學課程，而非使用來自第 91

頁第 6 章「教學課程：使用 CSS 設定頁面格式」的 index.html 檔案，教學課程
中的一些步驟和圖例都會與您在畫面上看到的不符。
查看程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
切換為編碼工作區 ( 僅適用於 Windows) . . . . . . . . . . . . . . . . . . . . . .129
使用標籤選擇程式新增標籤 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .130
編輯標籤. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .133
查詢關於標籤的資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .135
以程式碼提示新增影像 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136
檢查變更. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
列印程式碼 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
127
查看程式碼
Dreamweaver 提供您兩種檢視頁面的方式：「設計」檢視 ( 在這個檢視中文件看
起來比較像在瀏覽器中看起來的樣子 ) 與「程式碼」檢視 ( 在這個檢視中可以
看到基本的 HTML 程式碼 )。您也可以使用同時顯示「程式碼」和「設計」檢
視的分割檢視。
注意 1. 在「文件」視窗中開啟 index.html 檔案。
如果您未進行前面的教學課程以完成 index.html 檔案，請參閱本教學課程的簡介。
2. 在「文件」工具列中，選取「顯示程式碼與設計檢視」按鈕 ( 標示為「分割」)。
注意
如果看不到「文件」工具列，請選取「檢視＞工具列＞文件」。
視窗便會分割以顯示「設計」檢視與基本的 HTML 程式碼。
重新整理
按鈕
128 教學課程：使用程式碼
您可以在「程式碼」檢視中編輯程式碼。按一下「文件」工具列上的「重
新整理」，或按一下「設計」檢視的任意處時，對程式碼所做的變更才會
出現在「設計」檢視。
3. ( 選擇性 ) 若要只顯示「設計」檢視，請按一下「設計」檢視。
4. ( 選擇性 ) 若要只顯示「程式碼」檢視，請按一下「程式碼」檢視。

當您在自己的頁面上工作時，可以使用您喜歡的任何檢視方式。本手冊中大部
份的教學課程都是假設您使用「設計」檢視。
切換為編碼工作區( 僅適用於Windows)
如果您在安裝時沒有變更工作區，現在可以選擇讓 Windows 工作區的外觀與操
作像 Macromedia HomeSite 和 ColdFusion Studio 的常用編碼環境。
注意
Macintosh 使用者不能夠變更工作區。
切換為程式碼工作區
■ 選取「視窗＞工作區版面＞程式碼撰寫者」。
切換為編碼工作區 ( 僅適用於 Windows) 129

使用標籤選擇程式新增標籤
接著，您將使用「標籤選擇程式」，在網頁上的其中一個影像前後加上 div 標
籤。您可以視需要指定影像的邊界、邊框或顏色。在影像旁圍繞 div 標籤的方
式有許多種，本節將說明如何使用「標籤選擇程式」，幫助您插入任何標籤並
新增適當的屬性值。
1. 開啟 index.html 檔案 ( 如果尚未開啟的話 )。
2. 在「設計」檢視中，按一下 Cafe Townsend 橫幅圖形 (banner_graphic.jpg)
以選取它。
3. 按一下「文件」工具列上的「程式碼」檢視，或選取「檢視＞程式碼檢

視」，切換到「程式碼」檢視。
您會看到「程式碼」檢視中所選影像的程式碼將會顯示為已選取。請確定
選取了整個 img 標籤，包括開頭和結尾角括弧。
4. 選取「檢視＞程式碼檢視選項＞文字換行」以啟用文字換行 ( 如果尚未啟用 )。
5. 按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh) 選取的文字，

然後從彈出式選單中選取「插入標籤」。
「標籤選擇程式」就會出現。
6. 在「標籤選擇程式」中，展開「HTML 標籤」類別的「格式與版面」子
類別，然後選取「一般」。
使用標籤選擇程式新增標籤 131
右窗格中會出現標籤名稱清單，請從清單中選取 div。
注意
您也可以選取「HTML 標籤」類別，然後在右窗格中選取 div 標籤，而不必先

展開「格式與版面」。
7. 按一下「插入」。
div 標籤的標籤編輯器就會出現。
8. 在標籤編輯器中，選取「樣式表 / 輔助功能」類別，並在 ID 文字方塊中輸
入 banner。
9. 按一下 [ 確定 ]，關閉標籤編輯器並插入標籤。
Dreamweaver 會在頁面中插入 div 標籤，圍繞在影像標籤旁。
10. 按一下「關閉」，關閉「標籤選擇程式」。
編輯標籤
接下來，您會使用「標籤」檢視窗以快速變更標籤屬性。「標籤」檢視窗會顯
示「文件」視窗中所選標籤的屬性。
1. 在「程式碼」檢視中開啟 index.html 頁面 ( 如果尚未開啟的話 )。
2. 選取「視窗＞標籤檢視窗」以開啟「標籤」檢視窗 ( 如果尚未開啟的話 )。
3. 選取「屬性」索引標籤。
4. 在「標籤」檢視窗中，按一下「顯示清單檢視」，依字母順序檢視所選取
之標籤所有的屬性。
5. 在「文件」視窗的「程式碼」檢視中，於任何標籤的開啟和結束括號之間
按一下。
「標籤」檢視窗的「屬性」索引標籤會顯示關於標籤的 HTML 屬性資訊。
編輯標籤 133
6. 仍然在「程式碼」檢視中，尋找並按一下頁面頂端 banner_graphic.jpg 影
像的 img 標籤。
「標籤」檢視窗的「屬性」索引標籤會顯示關於 img 標籤屬性的資訊。

7. 在「標籤」檢視窗中，按一下 alt 屬性旁的空白文字方塊，輸入 Cafe
Townsend 後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
Dreamweaver 會顯示「標籤」檢視窗中的新值並變更「文件」視窗中的

程式碼。
查詢關於標籤的資訊
如果您需要關於標籤屬性和屬性值的說明，請查詢 Dreamweaver 內的參考資訊。
1. 在「程式碼」檢視中開啟 index.html 頁面 ( 如果尚未開啟的話 )。
2. 在「文件」視窗中，選取 img 標籤的 alt 屬性名稱 ( 不是屬性值 )。
3. 按一下右鍵 (Windows) 或 Command + 按一下 (Macintosh) 選取的文字，

然後從彈出式選單中選取「參考」。
「參考」面板會開啟並顯示關於 alt 屬性的資訊。

注意
您也可以選取「視窗＞參考」，以顯示「參考」面板。
查詢關於標籤的資訊 135
4. 如需其他標籤或屬性的詳細資訊，請在「參考」面板中適當的彈出式選單
內選取標籤或屬性。
以程式碼提示新增影像
若要手動將程式碼新增到頁面中，請在「程式碼」檢視中按一下，就可以開始
輸入。您可以使用程式碼提示功能加快工作。
在本節中，您將使用程式碼提示，在 Cafe Townsend 索引頁中加入門牌影像。
1. 開啟 index.html 頁面 ( 如果尚未開啟的話 )。
2. 在「設計」檢視中，選取 street_sign.jpg 影像 ( 在 Flash 視訊預留位置下方 )，
再按「刪除」。
現在，您將使用程式碼提示重新插入影像，而不是如第 67 頁第 5 章「教
學課程：加入頁面內容」中一樣，從「資源」面板中拖曳。
3. 按一下「文件」工具列上的「程式碼」檢視，或選取「檢視＞程式碼檢
視」，切換到「程式碼」檢視。
在「程式碼」檢視中，插入點應該介於開頭和結尾段落標籤中間，如下所示：
如果您在結尾表格儲存格 </td> 標籤之前沒有看到開頭和結尾段落標籤，

請如下所示輸入它們：
然後再將插入點放在開頭 <p> 標籤和結尾 <p> 標籤之間。

4. 刪除開頭 <p> 標籤和結尾 <p> 標籤之間的任何內容，例如，不斷行空白
( )。
5. 在開頭 <p> 標籤和結尾 <p> 標籤之間放置插入點之後，輸入開頭角括弧 (<)。
插入點處就會出現標籤清單。
注意
選取「編輯＞偏好設定」 (Windows) 或「Dreamweaver ＞偏好設定」

(Macintosh)，然後從左邊的類別清單中選取「程式碼提示」，就可以設定清單
出現之前的延遲時間長度。您可以隨時在「程式碼」檢視中按 Control + 空格鍵
以顯示程式碼提示選單，也隨時可以按 Esc 鍵以關閉程式碼提示選單。
以程式碼提示新增影像 137
6. 從清單中選取 img 標籤，然後按 Enter 鍵 (Windows) 或 Return 鍵
(Macintosh) 插入標籤的第一個部份。
7. 按空格鍵以顯示標籤屬性的清單。
提示
若要快速捲動到標籤，
8. 開始輸入 src，當提示選單選取了 src 屬性後按 Enter 鍵 (Windows) 或
請開始鍵入標籤名稱。
您剛才所輸入的程式碼下方便會出現瀏覽字樣。
9. 按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh) 以瀏覽檔案。
10. 在「選取檔案」對話方塊中，瀏覽至 street_sign.jpg 檔案 ( 位在 cafe_townsend

根資料夾的 images 資料夾中 )，再按「確定」 (Windows) 或「選擇」
(Macintosh)。
會將影像檔案的 URL 插入作為 src 的屬性值，並在結束引號之後顯示插

入點。
11. 按空白鍵，選取提示選單中的 alt 屬性，然後按 Enter 鍵 (Windows) 或
12. 將引號保持空白，因為這個影像只是圖例。
使用向右鍵將插入點移到引號的右側。
13. 輸入結尾角括弧 (>) 以完成標籤。
檢查變更
提示
若要新增現有標籤的屬
性，只需要將插入點放
在變更程式碼之後，您可以立刻獲得視覺回應效果。
在標籤的最後一個屬性
值之後，再按空白鍵。
若要查看程式碼的視覺呈現，請執行下列其中一項作業：
當屬性清單出現時，加
■ 按一下「設計」檢視，或「文件」工具列上的「程式碼和設計檢視」 ( 標
入屬性並視需要指定一
示為「分割」 )。個值。
■ 按 F12 (Windows) 或 Option + F12 (Macintosh)，在網頁瀏覽器中預覽頁
面。若要關閉瀏覽器並回到程式碼，請按 Alt + F4 ( 僅適用於 Windows)。
列印程式碼
您可列印程式碼，以便離線編輯、建檔或分發。
若要列印程式碼：
1. 在「程式碼」檢視中檢視頁面。
2. 選取「檔案＞列印程式碼」。
3. 指定列印選項後按一下「確定」 (Windows) 或「列印」 (Macintosh)。
列印程式碼 139
第9章
教學課程：建立 CSS 式頁面

版面
9
在第 4 章「教學課程：建立表格式頁面版面」，您已瞭解如何使用 Dreamweaver
的表格設計功能以建立頁面版面。在本教學課程中，您將學習如何使用「階層
式樣式表」 (CSS) 建立類似版面。許多設計人員偏好 CSS 式版面，因為 CSS
會提供對元素定位的更大控制、減少需要的程式碼數量，並讓您以邊界、邊框、
顏色等格式化版面區塊。
如果您尚未定義 Dreamweaver 網站並建立 cafe_townsend 本機根資料夾，則
必須先完成這些作業，才能繼續進行。如需相關說明，請參閱第 3 章「教學課
程：設定網站和專案檔案」。
在這個教學課程中，您將會完成下列工作：
了解 CSS 式頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
檢查設計樣稿 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .142
建立及儲存新頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .144
插入圖層. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .145
新增頁面顏色 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
141
了解 CSS 式頁面版面
許多網站使用表格式版面來顯示網頁資訊。表格對於呈現表格式資料 ( 例如重
複元素的列和欄 ) 很有用，並且很容易在網頁上建立。但表格通常會產生大量
難以讀取和維護的程式碼。此外，因為表格有大量必要標籤和可能的「巢狀結
構」，對於使用螢幕讀取器檢視網頁的行動不便人士，可能會造成問題。
CSS 式版面使用區塊元素 ( 而不是表格列和欄 )，比起相同特性的表格式版面，
包含較少程式碼。CSS 式版面通常會使用 <div> 標籤 ( 而不是 <table> 標籤 )
建立版面所使用的 CSS 版面區塊。您可以將這些 CSS 版面區塊定位在頁面任
意處，並指定版面區塊的屬性，例如邊框、邊界、背景顏色等。此外，使用螢
幕讀取器檢視網頁的人，在瀏覽 CSS 建置網頁時會輕鬆許多，這是因為程式碼
比較簡單，也比較短。
Dreamweaver 可讓您建立圖層。Dreamweaver 圖層是您可以放置在頁面上任何
地方的 HTML 頁面元素。更詳細地說，它是具有絕對位置的 <div> 標籤 ( 或
任何其他標籤 )。您可以使用 Dreamweaver 在頁面上拖曳圖層，然後在任意位
置上放置圖層。圖層會做為容納影像、Flash 檔案、文字等資源的內容區塊。
Dreamweaver 圖層是絕對定位的元素。也就是說，它們的位置是相對於頁面的
上邊界和左邊界設定。您不能使用圖層建立 CSS 式版面，然後再置中對齊頁
面內容。因此，本教學課程中的版面與您在第 4 章「教學課程：建立表格式
頁面版面」中所建立的版面稍微不同。
如需 Dreamweaver 版面的詳細資訊，請參閱「使用 Dreamweaver」中的第 7 章
「使用 CSS 配置頁面」。
檢查設計樣稿
注意
如果您已完成第 4 章「教學課程：建立表格式頁面版面」，並已檢查設計樣稿，
則可以進行下節，立即開始建立 CSS 式版面。
一般而言，當您著手建立網站時，不會馬上開啟 Dreamweaver 並配置頁面。一

開始建立網站，通常是使用紙張或圖形編輯應用程式 ( 如 Macromedia
Fireworks) 進行設計。為了向客戶展示網站的最初構想並取得認可，美工設計
人員多半會先草繪一份完整的網站圖稿 ( 也稱為「樣稿」 )。
樣稿由客戶要求的網站頁面元素組成，而這些頁面元素的數目不限。例如，客
戶可能會說：「我希望將商標放在頁面頂部，頁面中則要安排可連結至其他頁
面的導覽、一塊屬於網路商店的區域以及可讓我插入視訊片段的地方」。設計
人員隨即根據這樣的要求，著手規劃網站版面並製作滿足客戶需求的範例頁面
草稿。
142 教學課程：建立 CSS 式頁面版面

本教學課程為您提供了一份已完成且經認可的樣稿，對象是需要設立網站的虛
構餐廳 Cafe Townsend。身為網頁設計師，您的職責就是要將樣稿轉換成可以
實際運作的網頁 ( 這可能需要其他美工設計人員和 Flash 開發人員從旁協助 )。
您會注意到美工設計人員提供的網頁樣稿中，包含了一些內容區域以及圖形設
計。在下一節中，您將使用 Dreamweaver 來配置這份設計。
如果您想在電腦螢幕上查看原始樣稿檔，也可以開啟該檔案。您可以在
cafe_townsend 資料夾的 fireworks_assets 資料夾 ( 在第 3 章「教學課程：設定
網站和專案檔案」中，已複製到硬碟 ) 找到樣稿檔 homepage-mockup.jpg。最
好將樣稿列印出來，這樣就可以在建置頁面時放在手邊參考。
檢查設計樣稿 143
建立及儲存新頁面
設定了網站並檢查所有樣稿之後，即可準備開始建立網頁。首先要建立新頁面，
然後將它儲存在網站的 cafe_townsend 本機根資料夾內。這個頁面最後會成為
虛構餐廳 Cafe Townsend 的網站首頁。
如果您尚未建立 cafe_townsend 本機根資料夾，則必須先完成這項作業，才能
繼續進行。如需相關說明，請參閱第 3 章「教學課程：設定網站和專案檔案」。
1. 在 Dreamweaver 中，選取「檔案＞新增」。
2. 在「新增文件」對話方塊的「一般」索引標籤中，在「類別」清單中選
取「基本頁面」，再於「基本頁面」清單中選取「HTML」，然後按一下
「建立」。
3. 選取「檔案＞另存新檔」。
4. 在「另存新檔」對話方塊中，瀏覽到網站「本機根資料夾」的 cafe_townsend
資料夾並開啟它
( 您已於第 3 章「教學課程：設定網站和專案檔案」中，在 local_sites 資
料夾內建立了這個資料夾 )。
5. 在「檔案名稱」文字方塊中輸入 index_css.html，然後按一下「儲存」。
在應用程式視窗上方標題列中，該檔案名稱 ( 位於括號中 ) 便會出現。

6. 在新文件頂端的「文件標題」文字方塊中，輸入 Cafe Townsend。
這是頁面的標題 ( 與檔案名稱不同 )。當網頁瀏覽者在網頁瀏覽器中檢視頁

面時，將會在瀏覽器視窗標題列中看到這個標題。
7. 請選取「檔案＞儲存」以儲存頁面。

插入圖層
接著，您將在頁面上加入圖層。圖層是可用來容納影像、文字、Flash 檔案及
其他內容的絕對定位元素。如需關於圖層的詳細資訊，請參閱第 142 頁「了
解 CSS 式頁面版面」。
繪製新圖層
1. 在「文件」視窗中開啟 index_css.html 頁面之後，從「插入」列選取「版
面」模式。
2. 按一下「繪製圖層」。
當您在頁面上移動滑鼠指標時，它會變成十字形狀。
3. 拖曳任何大小的圖層至頁面，然後放開滑鼠按鈕。
4. 按一下圖層左上角的選取範圍控點，確定選取圖層。
5. 選取新圖層之後，在「屬性」檢視窗中 ( 「視窗＞屬性」 ) 執行下列動作：
■ 在「圖層編號」文字方塊中按一下，將圖層重新命名為
banner_graphic。
■ 在「寬 (W)」文字方塊中，輸入 700px。
■ 在「高 (H)」文字方塊中，輸入 90px。
■ 在「左 (L)」文字方塊中，輸入 20px。
■ 在「上 (T)」文字方塊中，輸入 20px。
插入圖層 145
■ 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的
項目。
Dreamweaver 便會調整新圖層 banner_graphic 的大小和位置。

banner_graphic 圖層是 700 像素寬、90 像素高。其位置距離頁面左邊界
為 20 像素，距離頁面上邊界也是 20 像素。
6. 開啟「圖層」面板 ( 「視窗＞圖層」 )。您會看到 Dreamweaver 已將新圖
提示
除了在「屬性」檢視層 (banner_graphic) 加入至圖層清單中。

窗中使用精確像素值定
位 banner_graphic 7. 在新圖層外按一下，以取消選取它。
圖層，您也可以拖曳所 8. 儲存您的頁面。
選圖層左上角的選取範
圍控點，在頁面任意處
定位圖層。加入更多圖層
現在，您將在頁面上加入更多圖層。您將使用第一個圖層 (banner_graphic) 做
為其他圖層定位的參考點。您也可以使用「CSS 圖層背景」功能，協助您定
位並區別這些圖層。
1. 在「插入」列的「版面」類別中，按一下「繪製圖層」按鈕，將另一個
任意大小的圖層拖曳到頁面。

2. 按一下新圖層的選取範圍控點，以選取它。
3. 選取新圖層之後，在「屬性」檢視窗中執行下列動作：
■ 在「圖層編號」文字方塊中按一下，將圖層重新命名為 flash_fma。
■ 在「上 (T)」文字方塊中，輸入 111px。
■ 請按 Enter (Windows) 或 Return (Macintosh) ，以套用您所輸入的
項目。
Dreamweaver 便會調整新圖層 flash_fma 的大小和位置。
.
flash_fma 圖層是 700 像素寬、166 像素高。其位置距離頁面左邊界為 20 像

素，距離頁面上邊界為 111 像素。這個圖層距離頁面上邊界 111 像素，這
樣才不會與 banner_graphic 圖層重疊。
當圖層重疊時，您會注意到其中一個圖層 ( 尤其是下方圖層 ) 的邊框由虛
線表示。
4. 在新圖層外按一下，以取消選取它。
插入圖層 147
5. 選取「檢視＞視覺輔助＞ CSS 版面背景」。
Dreamweaver 會加入圖層背景顏色。這些顏色是隨機選取，並不會在發佈
的網頁上出現。它們只是 Dreamweaver 所提供的視覺輔助，協助您看清楚
頁面上的圖層和其他區塊元素類型。
您可以選取「檢視＞視覺輔助」，然後取消選取「CSS 版面背景」，以停
用「CSS 版面背景」。

6. 接著，再拖曳三個圖層到頁面，將它們放在 banner_graphic 圖層和 flash_fma
圖層底下。
請記住，每次拖曳新圖層之前，必須按一下「插入」列上的「繪製圖層」。
插入圖層 149
7. 頁面上有這三個新圖層之後，請使用「屬性」檢視窗執行下列動作：
■ 選取第一個圖層，將它命名為 header，並且指定其大小為 700 像素寬、

24 像素高。
項目。
■ 選取第二個圖層，將它命名為 center_content，並且指定其大小為 700
提示
選取圖層時，確定在圖像素寬、350 像素高。

層邊框的任意處或圖層
的選取範圍控點上按一 ■ 請按 Enter (Windows) 或 Return (Macintosh)，以套用您所輸入的
下，而不是在圖層內按項目。
一下。當您看到圖層邊
注意
框的調整大小控點，以 center_content 圖層大小指定為 350 像素高度時，它會與頁面上的其餘圖層重

及在「屬性」檢視窗疊。進行下一個步驟之前，請選取其餘圖層，並拖曳選取範圍控點到頁面底部，以
的寬度和高度屬性時，移動 center_content 圖層底下的其餘圖層。
可以確定圖層已選取。
■ 選取第三個圖層，將它命名為 footer，並且指定其大小為 700 像素寬、
您也可以在「圖層」
面板 (「視窗＞圖層」)
24 像素高。請按 Enter (Windows) 或 Return (Macintosh)，以套用您
按一下圖層名稱，以選所輸入的項目。
取圖層。完成時，頁面應該看起來如下圖：

8. 接著，選取 header 圖層並拖曳選取範圍控點，直到 header 圖層位於
flash_fma 圖層底下。
拖曳圖層時，您可以在圖層外按一下，取消選取它，以隨時檢查位置。
9. 選取並拖曳 center_content 圖層和 footer 圖層，或使用電腦上的方向鍵定
提示
位圖層，如下列範例所示：您也可以按鍵盤方向鍵，
一次移動所選取的圖層
一個像素。嘗試使用「屬
性」檢視窗，在距離頁面
左邊界 20 像素處對齊
header 圖層。然後使用
向上鍵，將圖層上移，直
到接觸 flash_fma 圖層
的下邊框。
插入圖層 151
10. 圖層就定位之後，選取「檢視＞視覺輔助」，然後取消選取「CSS 版面背
提示
您也可以使用「文景」，以停用「CSS 版面背景」 ( 如果未停用 )。

件」工具列上的「視
覺輔助」按鈕，以啟
用或停用「CSS 版面
背景」。
在圖層內加入圖層
在 center_content 大圖層內部，將繪製最後幾個圖層。這些圖層相當於加入到
頁面的表格儲存格 ( 如果您已完成第 4 章「教學課程：建立表格式頁面版面」)。
1. 在圖層右方按一下，確定沒有選取任何圖層。
2. 在「插入」列的「版面」類別中，按一下「繪製圖層」，將另一個圖層拖
曳到 center_content 圖層內，如下列範例所示：
3. 按一下新圖層的選取範圍控點，確定已選取它。
■ 在「圖層編號」文字方塊中按一下，將圖層重新命名為 navigation。
項目。

5. 使用鍵盤的向上鍵，移動 navigation 圖層直到完全位在 center_content 圖
層內，如下列範例所示：
6. 按一下「繪製圖層」並拖曳另一個圖層，在 center_content 圖層內建立另

一個圖層，如下列範例所示：
插入圖層 153
■ 在「圖層編號」文字方塊中按一下，將圖層重新命名為 flash_video。
項目。
9. 拖曳 flash_video 圖層或使用鍵盤方向鍵定位圖層，如下列範例所示：
10. 再按一下「繪製圖層」並拖曳另一個圖層，在 center_content 圖層內建立

另一個圖層，如下列範例所示：

■ 在「圖層編號」文字方塊中按一下，將圖層重新命名為 text。
■ 請按 Enter (Windows) 或 Return (Macintosh) ，以套用您所輸入的
項目。
13. 拖曳 text 圖層或使用鍵盤方向鍵定位圖層，如下列範例所示：
注意
如果圖層邊框出現虛線並不會造成問題。這表示圖層之間重疊一、二個像素。
插入圖層 155
新增頁面顏色
現在，請為部分圖層和頁面背景設定顏色，以增添頁面色彩。
提示
您可以向左或向右拖曳
1. 在「圖層」面板 ( 「視窗＞圖層」 ) 按一下 navigation 圖層名稱，以選取
欄標題的右邊框，以變
更「圖層」面板的此圖層。
「名稱」欄寬度。
2. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下。
文字方塊就在「背景顏色 (Bg)」顏色方塊的旁邊。
3. 在「背景顏色」文字方塊中輸入十六進位值 #993300，然後按 Enter 鍵
(Windows) 或 Return 鍵 (Macintosh)。
navigation 圖層的背景顏色會變成紅棕色。
4. 在「圖層」面板上選取 flash_video 圖層名稱，以選取此圖層。
5. 在「屬性」檢視窗的「背景顏色」文字方塊內按一下，再輸入十六進位值
#F7EEDF，然後按 Enter 鍵 (Windows) 或 Return 鍵 (Macintosh)。
flash_video 圖層的顏色會變成淺棕褐色。
6. 重複以上步驟，將 text 圖層的顏色也變成淺棕褐色。

7. 設定這三個圖層的背景顏色之後，在所有圖層的右方按一下，確定沒有選
取任何圖層。
接下來，請修改頁面屬性以變更整個頁面的背景顏色。「頁面屬性」對話
方塊可供您設定一些頁面屬性，包括頁面字體的大小和顏色、查閱過連結
的顏色和頁面邊界等選項。
8. 請選取「修改＞頁面屬性」。
9. 在「頁面屬性」對話方塊的「外觀」類別中，按一下「背景顏色」顏色

方塊，然後從顏色挑選器中選取黑色 (#000000)。

頁面背景會變成黑色。
現在您已完成 CSS 頁面版面。此版面包含一些可容納影像、文字和 Flash Vidoe

檔案等資源的圖層。下一個步驟是加入內容。
如果您已完成第 5 章「教學課程：加入頁面內容」，便會知道可以使用
Dreamweaver 在頁面輕鬆插入資源。如果您尚未完成該教學課程，可以在加入
內容至剛完成的 CSS 式頁面版面時，參考相關說明。
您可以在 cafe_townsend/completed_files/dreamweaver 資料夾中找到該教學
課程的完成版本。
第 10 章
教學課程：顯示 XML 資料
10
本教學課程示範如何建立顯示 XML 資料的網頁。顯示 XML 資料包括擷取儲
存在本機或遠端 XML 檔案中的資訊，並在網頁中呈現這項資訊。在網頁上使
用 XML 資料最主要優點是能夠將內容從呈現方式中獨立出來。也就是說，您
網頁上的內容 ( 資料 ) 會與網頁的呈現方式 ( 版面、文字樣式等 ) 分開。這樣
一來，任何人都可以在 XML 檔案中執行作業，而無須修改呈現方式的頁面，
反之亦然。
建議您在完成這項教學課程之前，先熟悉「階層式樣式表」 (Cascading Style
Sheets，CSS)。如果您還不熟悉 CSS 的話，您可能想要先完成第 91 頁第 6 章
「教學課程：使用 CSS 設定頁面格式」。
在這個教學課程中，您將會完成下列工作：
尋找您的檔案 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .160
了解搭配網頁使用 XML 和 XSL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
了解 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163
將 HTML 頁面轉換為 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . .164
將 XML 資料來源附加至 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . .165
修改 XSLT 頁面版面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .166
將 XML 資料繫結到 XSLT 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . .168
在 XML 資料上套用樣式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .169
建立動態連結 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
新增重複區域 XSLT 物件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172
附加 XSLT 頁面至 XML 頁面 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
了解其他部署選項 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
159
尋找您的檔案
完成此項教學課程所需的檔案放置在您先前複製到電腦的 cafe_townsend 根
資料夾內部之 xml 資料夾中。( 您應該已在第 3 章「教學課程：設定網站和專
案檔案」中完成檔案的複製。如果您未完成該教學課程，請務必先完成它，然
後再進行其他步驟。)
這個 xml 資料夾包含您在此教學課程將處理的主要檔案 (xml_menu.html)、選
單頁面的 CSS 樣式表 (xml_menu.css)、包含 XML 資料的檔案 (specials.xml)、
images 資料夾，以及其他 HTML 頁面。
本教學課程的已完成版本 (xml_menu.xsl) 位於 cafe_townsend/completed_files/
dreamweaver/xml 目錄中。
檢視您的工作
Cafe Townsend ( 虛構的餐廳 ) 在網站上公佈了每日特餐的清單。他們使用帶
有一系列表格列的 HTML 表格來顯示資訊。每列的左邊欄位顯示了項目的名
稱以及該項目的說明。每列的右邊欄位顯示了該項目的價格。頁面上所有的資
訊都是人工撰寫而成 ( 亦即，這些資訊並不是來自動態資料來源 )，並使用外
部樣式表來格式化文字。
160 教學課程：顯示 XML 資料

Cafe Townsend 的老闆已經決定要採用「動態方式」並使用 XML 檔案的資
料，來顯示他們的每日特餐。XML 允許頁面內容 ( 特餐菜單 ) 與呈現方式 ( 版
面、文字樣式等 ) 之間的分隔。就算是完全不了解 HTML 或網頁維護方式的
員工，也可以藉由編輯 XML 檔案來更新資訊，並讓菜單資訊的網頁樣式保持
不變。
在本教學課程中，您需要將現有的特餐頁面 (HTML 頁面 ) 轉換成 XSLT 頁
面，以在頁面上顯示 XML 資料。同時，您將在 XML 資料上套用樣式，讓資
料的外觀在整個頁面中維持一致。
如果您已熟悉 XML、XSLT 與用戶端變形，可以跳至第 164 頁「將 HTML
頁面轉換為 XSLT 頁面」。如果您並不熟悉這些概念，請閱讀下面各節。
了解搭配網頁使用 XML 和 XSL

「可擴展標記語言」(XML) 是一種可以讓您建立資訊結構的語言。就像 HTML
一樣，XML 可讓您使用標籤來建立資訊結構，但 XML 標籤並非和 HTML 標
籤一樣是預先定義好的；不同的是，XML 可讓您建立最適合用來定義您的資
料結構的標籤。標籤會以巢狀的方式層層包覆，以建立父標籤和子標籤的綱要。
如同大部分的 HTML 標籤，XML 綱要中的所有標籤都有開頭和結尾標籤。
下面範例示範了 XML 檔案的基本結構：
<?xml version="1.0">
<mybooks>
<book bookid="1">
<pubdate>03/01/2004</pubdate>
<title>Displaying XML Data with Macromedia Dreamweaver</
title>
<author>Charles Brown</author>
</book>
<book bookid="2">
<pubdate>04/08/2004</pubdate>
<title>Understanding XML</title>
<author>John Thompson</author>
</book>
</mybooks>
在這個範例中，每一個父 <book> 標籤都含有三個子標籤：<pubdate>、
<title> 和 <author>。然而每一個 <book> 標籤同時也是 <mybooks> 標籤
的子標籤，後者在綱要中高了一個層級。您可以使用任何您喜歡的方式來命名
及建立 XML 標籤的結構，前提是要以巢狀方式來建立標籤結構，並替開頭的
標籤指定一個相對應的結尾標籤。
了解搭配網頁使用 XML 和 XSL 161

XML 文件不包含任何格式設定 - 它們只是結構化資訊的容器。( 您會注意到範
例程式碼不包含字型、表格或標題標籤 )。只要您有 XML 綱要，就可以使用
「可擴展樣式表語言」 (XSL) 來顯示這項資訊。如同「階層樣式表」 (CSS) 可
讓您格式化 HTML 的方式一般，XSL 可讓您格式化 XML 資料。您可以定義
XSL 檔案中的樣式、頁面元素與版面等，並且將它附加到 XML 檔案，以便當
使用者在瀏覽器中檢視 XML 資料時，該資料可以根據您在 XSL 檔案中的定義
進行格式化。將內容 (XML 資料 ) 和呈現方式 ( 由 XSL 檔案定義 ) 完全分開，
讓您可以有效控制資訊在網頁上的顯示方式。基本上，XSL 是 XML 的呈現技
術，而其主要輸出是 HTML 網頁。
「可擴展樣式表語言變形」 (XSLT) 是 XSL 的一套子語言，讓您在網頁上顯示
XML 資料，並讓 XML 資料 ( 和 XSL 樣式一起 ) 「變形」成可讀、樣式化且
以 HTML 格式資訊。您可以使用 Dreamweaver 建立 XSLT 頁面，以便使用應
用程式伺服器或瀏覽器來執行 XSL 變形。當您執行伺服器端的 XSL 變形時，
伺服器會負責將 XML 和 XSL 變形，並顯示在頁面上。當您執行用戶端變形
時，瀏覽器 ( 例如 Internet Explorer) 就會負責這項工作。
您最後採取的方法 ( 伺服器端變形或用戶端變形 ) 要視您嘗試要達到的最終結
果、您可用的技術、您的 XML 原始檔的存取權層級以及其他因素而定。這兩
種方式都有其優點與限制。舉例來說，伺服器端變形適用於所有伺服器，而用
戶端變形則受限於最新的瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla 1.8
和 Firefox 1.0.2)。伺服器端變形可以讓您從自己的伺服器或網路上的任何一處
動態顯示 XML 資料，但是用戶端變形必須使用掛載在本機網站伺服器上的
XML 資料。此外，伺服器端變形要求您將網頁部署至已設定完成的應用程式
伺服器，但是用戶端變形只要求至網站伺服器的存取。
本教學課程會帶領您建立 XSLT 頁面並執行用戶端變形 ( 因為用戶端的工作流
程較容易執行，且不需要使用到應用程式伺服器 )。如需關於其他部署 XSLT
頁面方式的詳細資訊，請參閱第 175 頁「了解其他部署選項」。

了解 XSLT 頁面
當使用伺服器端 XSL 變形時，您可用 Dreamweaver 來建立 XSLT 頁面以產生完
整的 HTML 文件 ( 完整的 XSLT 頁面 )，或產生部份 HTML 文件的 XSLT 片段。
完整的 XSLT 頁面類似於一般的 HTML 頁面，它包含一個 <body> 標籤一個
和 <head> 標籤，並讓您將 HTML 和 XML 資料組合顯示在頁面上。XSLT 片
段是獨立文件使用的程式碼，可以顯示格式化的 XML 資料。和完整的 XSLT
頁面不同的是，它是一個獨立的檔案，不包含 <body> 或 <head> 標籤。
如果您想要顯示專屬頁面上的 XML 資料，就要建立一個完整的 XSLT 頁面，
然後將您的 XML 資料繫結到該頁面。另一方面，如果想要將 XML 資料顯示
在現有動態頁面上的某一特定區段 ( 例如，運動用品商店的動態網頁，頁面的
另一端顯示了來自 RSS 反饋檔案的比賽分數 )，您必須建立一個 XSLT 片段，
並將參考插入至動態頁面中。執行伺服器端變形時，較常見的方法是建立 XSLT
片段，然後結合其他動態頁面一起使用，以顯示 XML 資料。
在本教學課程中，您將建立一個完整的 XSLT 頁面，並使用它來變形範例 XML
檔案。這個變形為使用現代瀏覽器 (Internet Explorer 6、Netscape 8、Mozilla
1.8 或 Firefox 1.0.2) 的用戶端變形。伺服器端變形超出本教學課程的範圍，因
為它們需要以變形引擎設定的應用程式伺服器。
如需關於伺服器端與用戶端 XSL 變形的綜合概觀，請參閱「使用 Dreamweaver」
( 「說明＞使用 Dreamweaver」 ) 中的「關於伺服器端 XSL 變形」與「關於用
戶端 XSL 變形」。
如需其他資源 ( 例如，教您更多關於伺服器端變形的教學課程 )，請參閱
www.macromedia.com/go/dw_xsl_tw。
了解 XSLT 頁面 163
將 HTML 頁面轉換為 XSLT 頁面
在一開始，您將把 Cafe Townsend 現有的特餐頁面 (HTML 頁面 ) 轉換為可以
顯示 XML 資料的 XSLT 頁面。
1. 在「檔案」面板 ( 「視窗＞檔案」 ) 中，尋找 xml_menu.html，然後按兩
下以開啟該檔案。xml_menu.html 檔案位於 cafe_townsend 根資料夾內部
的 xml 資料夾。如需詳細資訊，請參閱第 160 頁「尋找您的檔案」。
2. 選取「檔案＞轉換＞ XSLT 1.0」。
Dreamweaver 會在「文件」視窗中，開啟 xml_menu 頁面。新的頁面為

XSL 樣式表，儲存的副檔名為 .xsl。
3. 按一下 xml_menu.html 頁面以關閉檔案。這樣一來，只有新的 xml_menu.xsl
頁面會顯示在「文件」視窗中。

將 XML 資料來源附加至 XSLT 頁面
接下來您會使用「繫結」面板，將 XML 資料來源附加至頁面。
1. 在「繫結」面板 ( 「視窗＞繫結」 ) 中，按一下 XML 連結。
注意
您也可以按一下「繫結」面板右上角的「來源」連結，以新增 XML 資料來源。
2. 選取「附加本機檔案」 ( 根據預設，它應該是已選取的狀態 )，按一下「瀏

覽」按鈕，瀏覽至位於電腦上的 specials.xml 檔案 ( 也是位在 cafe_townsend/
xml 資料夾 )，然後按一下「確定」。
3. 按一下「確定」以關閉「尋找 XML 來源」對話方塊。
Dreamweaver 會以 XML 資料來源的綱要填入「繫結」面板。
如需綱要中符號的指南，請參閱「使用 Dreamweaver」 ( 「說明＞使用

Dreamweaver」 ) 中的「建立 XSLT 頁面」。
將 XML 資料來源附加至 XSLT 頁面 165

修改 XSLT 頁面版面
現在您在頁面上使用的為 XML 資料而非靜態文字，因此您不需要所有的表格
列。接下來您會刪除多數的表格列，僅留下其中之一來顯示資料。
1. 按一下最後一表格列 (New York Cheesecake 列 )，然後按一下標籤選取器
中最右邊的 <tr> 標籤，以選取該列。
2. 按 Delete 鍵。
3. 重複上述的步驟，刪除 Grilled Pacific Salmon 列與 Thai Noodle Salad 列。

結束後，頁面上會留下最後一列 : Summer Salad 列。
4. 選取左邊表格儲存格中的所有文字。

5. 在「屬性」檢視窗 (「視窗＞屬性」) 中，選取「樣式」彈出式選單裡的「無」。
這個步驟可以移除所選取文字的菜單類別樣式。在一般的工作流程中，您
可能不會這樣做。但您在此移除所有的樣式，是為了稍後可以學習將樣式
套用至 XML 資料的方法。
6. 文字仍在選取狀態，請按 Delete 鍵。
7. 儲存您的工作 ( 「檔案＞儲存檔案」 )。
修改 XSLT 頁面版面 167

將 XML 資料繫結到 XSLT 頁面
現在您已經準備好將 XML 資料繫結至頁面上。
1. 在「繫結」面板 ( 「視窗＞繫結」 ) 中，選取項目元素，然後將其拖曳至
空的表格欄中。
XML 資料預留位置便會出現在頁面上，而預留位置會反白標示並包含在大
括號之中。預留位置會使用 XPath (XML 路徑語言 ) 語法以描述該 XML
綱要的階層式結構。
2. 按鍵盤上的向右鍵，將插入點移動至 XML 資料預留位置的右側。
3. 按空白鍵，輸入連字符號，再按空白鍵。
4. 在「繫結」面板中，選取描述元素，並將之拖曳至插入點。
另一個 XML 資料預留位置便會顯示在頁面上。視您螢幕的解析度而定，

預留位置可能會移至下一行。但您不需擔心這個問題。稍後您在瀏覽器上
顯示頁面時，資料將會照著填入表格中。
5. 最後，選取右邊表格欄中的價格 (7)。

6. 在「繫結」面板中，按兩下價格元素。
同樣，XML 資料預留位置會影響頁面的版面。但您不需擔心這個問題。
注意
XML 資料預留位置所保留的價格會以菜單類別樣式來格式化，這是因為您並沒
有先移除樣式 ( 像對左邊表格欄那樣 )。
7. 儲存頁面，然後按 F12 (Windows) 或 Option + F12 (Macintosh)，在瀏覽

器中預覽您的工作。
瀏覽器顯示頁面，而該頁面顯示來自 XML 檔案資料的一列。
在 XML 資料上套用樣式
現在，您將套用樣式至項目與描述的 XML 資料預留位置。當您將樣式套用至
XML 資料預留位置時，預留位置的文字會顯示樣式。稍後，當您在瀏覽器中
預覽頁面時，XML 資料的結果將會顯示指定的樣式。
1. 在左邊表格儲存格中按一下，然後按一下標籤選取器的最右邊 <td> 標籤，
以選取該儲存格。
選取該欄，這樣就可以一次格式化該欄所有的內容 ( 包括連字號 )。
2. 在「屬性」檢視窗中，選取「樣式」彈出式選單裡類別樣式清單中的菜單。
3. 按一下左邊表格欄內部，以取消選取。
4. 按一下 XML 項目資料預留位置，以選取它。
在 XML 資料上套用樣式 169

5. 在「屬性」檢視窗中，按一下「斜體」按鈕。

如需關於套用樣式至 XML 資料的詳細資訊，請參閱「使用 Dreamweaver」
( 「說明＞使用 Dreamweaver」 ) 中的「將樣式套用至 XSLT 片段」。
建立動態連結
接下來，您將建立動態連結，讓特餐菜單上的項目名稱連結到包含該項目圖片
的頁面。
1. 在「文件」視窗中，按一下 XML 項目資料預留位置，以選取它。
2. 在「屬性」檢視窗中，按一下「連結」文字方塊旁邊的「瀏覽檔案」圖示。

3. 在「選取檔案」對話方塊中，選取「資料來源」。
如果您的電腦使用 Windows 作業系統，這個選項位於對話方塊頂端。如

果您的電腦使用 Macintosh 作業系統，這個選項位於對話方塊的底部。
4. 當 XML 綱要出現在對話方塊中時，請選取連結元素。
Dreamweaver 將建立動態連結。在 XML 檔案中，每個連結元素均指向包
含其對應菜單項目圖片的 HTML 頁面。
注意
若您開啟 specials.xml 檔案，並檢視程式碼，您將會發現每個 <link> 元素均包含

含有其對應菜單項目圖片的 HTML 檔案名稱。事實上，這是通往 HTML 檔案
的路徑，因為含有圖片的 HTML 頁面和您處理的 XSLT 頁面位於相同的 xml 目
錄中。連結元素一直都是通往連結頁面的完整路徑，而且經常以 HTTP 位址的
形式顯示。

瀏覽器將以即時連結顯示頁面。如果按一下連結，就會將您帶到新的頁面。
建立動態連結 171
新增重複區域 XSLT 物件
「重複區域」XSLT 物件可讓您在網頁中顯示來自 XML 資料來源的重複元素。
接下來，您將新增「重複區域」XSLT 物件至表格列，以在頁面上顯示多種特餐。
1. 在「文件」視窗中，按一下包含 XML 資料預留位置表格列內部的任何一處。
2. 在標籤選取器中，按一下最右邊的 <tr> 標籤，以選取表格列。
3. 選取「插入＞ XSLT 物件＞重複區域」。

4. 在「XPath 運算式建立器」中，選取重複元素 menu_item。( 重複元素已
由小的加號符號指出 )。
在「文件」視窗中，重複區域的四週會出現細細的灰色外框。( 您將需要
取消選取表格，才能看見它 )。稍後，當您在瀏覽器中預覽工作時，灰色的
外框將會消失，然後選取範圍會展開以顯示 XML 檔案中特定的重複元素。
Dreamweaver 也會將 XML 資料預留位置的長度變短。這是因為
Dreamweaver 會更新 XML 資料預留位置的 XPath，以便使它能相對於
重複元素的路徑。如需關於這個主題的詳細資訊，請參閱「使用
Dreamweaver 」中的「關於 XML 資料和重複元素」。
瀏覽器現在會顯示展示出每個選單項目的頁面。
新增重複區域 XSLT 物件 173

附加 XSLT 頁面至 XML 頁面
當您完成 XSLT 頁面後，請務必將其附加至 XML 頁面。當您使用
Dreamweaver 來附加頁面時，Dreamweaver 會在 XML 頁面頂端插入連至
XSLT 頁面的連結。
XML 頁面是網頁瀏覽者在線上檢視頁面時所瀏覽到的頁面。這是因為他們必
須瀏覽到包含資料 (XML 檔案 ) 的「內容」頁面，而不是包含樣式 (XSLT 頁
面 ) 的頁面。
注意
您用來進行用戶端變形的 XML 和 XSL 檔案，必須位於相同的目錄下。如果不

是，瀏覽器將會讀取 XML 檔案，並尋找變形的 XSLT 頁面，但卻無法找到在
XSLT 頁面中相對連結所定義的資源 ( 樣式表、影像等 )。
1. 現在 xml_menu.xsl 頁面已在「文件」視窗中開啟，如果尚未開啟「繫結」
面板的話，請使用「視窗＞繫結」將之開啟。
2. 在「繫結」面板中，連按兩下 specials.xml 的「綱要」，以開啟 specials.xml
檔案。( 您必須在這兩個字上按兩下，而不是按頁面圖示 )。
3. 選取「命令＞附加 XSLT 樣式表」。
4. 在「附加 XSLT 樣式表」對話方塊中，按一下「瀏覽」按鈕，瀏覽至
xml_menu.xsl 頁面，然後選取並按一下「確定」。
5. 按一下「確定」以關閉「附加 XSLT 樣式表」對話方塊。
Dreamweaver 會將參考插入至 XML 文件上方的 XSLT 頁面。

6. 儲存 specials.xml 頁面。
7. 按 F12 (Windows) 或 Option + F12 (Macintosh)，以在瀏覽器中預覽 XML

頁面。
瀏覽器將顯示這個 XML 頁面，並以您建立的 XSLT 頁面做為其樣式。
請記住，一旦您將兩個頁面均部署至伺服器上，網站瀏覽者就會瀏覽到
XML 頁面 ( 而不是 XSLT 頁面 )。如需詳細資訊，請參閱「使用
Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中的「關於用戶端 XSL
變形」。
了解其他部署選項
在本教學課程中，您將學習如何建立完整的 XSLT 頁面，以進行用戶端變形。
您也可以使用完整的 XSLT 頁面進行伺服器端變形。使用完整的 XSLT 頁面進
行伺服器端變形時，您必須以完全相同的方式來建立頁面。
一般執行伺服器端變形的方式，就是使用 XSLT 片段。XSLT 片段是獨立文件
使用的程式碼，可以顯示格式化的 XML 資料。
了解其他部署選項 175
如需關於完整 XSLT 頁面與 XSLT 片段的簡介，請參閱第 163 頁「了解 XSLT
頁面」。如需關於完整 XSLT 頁面與 XSLT 片段如何作用的詳細綜合概觀，請
參閱「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中的「關於伺服
器端 XSL 變形」。
如需教您關於處理 XSLT 片段的教學課程和其他資源，請至
下列是以 XSLT 頁面執行伺服器端變形的工作流程：
■ 設定 Dreamweaver 網站。請參閱「使用 Dreamweaver」中的第 2 章「設
定 Dreamweaver 網站」。
■ 選擇伺服器技術，並設定應用程式伺服器。請參閱「使用 Dreamweaver」
中的「設定應用程式伺服器」。
■ 測試該應用伺服器以確認能正常運作。例如，建立一個要求處理的頁面，
然後確定應用程式的確有處理該頁面。如需有關操作的教學課程，請瀏覽
■ 請執行下列其中一項作業：
■ 在您的 Dreamweaver 網站建立一個 XSLT 片段或完整的 XSLT 頁面。
請參閱「使用 Dreamweaver」中的「建立 XSLT 頁面」。
■ 將現有的 HTML 頁面轉成完整的 XSLT 頁面。請參閱「使用
Dreamweaver」中的「將 HTML 頁面轉換成 XSLT 頁面」。
■ 如果程序尚未完成，請將 XML 資料來源附加至頁面。請參閱「使用
Dreamweaver 」中的「附加 XML 資料來源」。
■ 將您的 XML 資料繫結至 XSLT 片段或完整的 XSLT 頁面。請參閱「使用
Dreamweaver」中的「顯示 XSLT 頁面中的 XML 資料」。
■ 如果適當的話，請新增「重複區域」 XSLT 物件至包含 XML 資料預留位
置的表格或表格列。請參閱「使用 Dreamweaver」中的「顯示重複的 XML
元素」。
■ 請執行下列其中一項作業：
■ 使用 XSL 變形伺服器行為以將參考資料插入至動態網頁的 XSLT 片
段。請參閱「使用 Dreamweaver」中的「在動態網頁中插入 XSLT
片段」。
■ 刪除動態頁面中所有的 HTML 程式碼，然後使用「XSL 變形」伺服
器行為，以將參考插入在動態頁面的完整 XSLT 頁面中。
■ 將動態網頁和 XSLT 片段 ( 或完整的 XSLT 頁面 ) 公佈到您的應用程式伺
服器。如果您使用本機的 XML 檔案，您也需要將該檔案公佈出來。
■ 在瀏覽器中檢視動態網頁。當您這麼做時，應用程式伺服器會變形 XML
資料、將其插入動態頁面中，然後在瀏覽器中顯示。

第 11 章
教學課程：開發網路應用程式
11
在本教學課程中，您將學習如何使用 Macromedia Dreamweaver 8，快速啟動
開發動態的資料庫驅動網路應用程式，讓您可以將資料庫資訊呈現在網頁上。
您將使用 Dreamweaver 提供的範例資料庫，在 Cafe Townsend 網站的網頁上
顯示資料。您還將使用 Dreamweaver 建立一個插入記錄表單，供網頁瀏覽者
留言。
在您開始之前 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
檢視您的工作 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
開啟要使用的文件 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .180
定義資料集 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
顯示資料庫記錄 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .184
將動態欄位新增至表格 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
設定重複區域 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
檢視頁面. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
建立記錄插入表單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .188
將檔案複製到伺服器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .192
進階閱讀. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .193
177
在您開始之前
您必須先設定應用程式開發的 Dreamweaver 工作環境，才能完成本教學課程。
如需設定資訊，請參閱下列清單中適合應用程式伺服器使用的設定章節。如果
您不知道自己使用的應用程式伺服器，請洽系統管理員。
■ 第 215 頁附錄 C 「ColdFusion 範例網站的設定」
■ 第 229 頁附錄 D 「ASP.NET 範例網站的設定」
■ 第 241 頁附錄 E 「ASP 範例網站的設定」
■ 第 255 頁附錄 F 「JSP 範例網站的設定」
■ 第 269 頁附錄 G 「PHP 範例網站的設定」
這些設定章節會教您如何完成下列工作：
■ 設定您的系統。
■ 設定 Dreamweaver 與選擇的應用程式伺服器一起使用。
■ 定義與資料庫的連結。
您必須完成這些工作，才能完成這個教學課程。
這個教學課程中的畫面範例顯示 Macromedia ColdFusion 對話方塊。但是您可
以使用 Dreamweaver 支援的任何伺服器模式，完成這個教學課程。
檢視您的工作
您的工作是為 Cafe Townsend 網站建立下列動態網頁：
■ 一個能夠顯示資料庫現有意見的網頁。
■ 讓網頁瀏覽者傳送意見到公司 ( 然後儲存在資料庫 ) 的網頁。
178 教學課程：開發網路應用程式
讓 Cafe Townsend 員工檢視資料庫現有意見的網頁，看起來如下列範例：
讓網頁瀏覽者傳送意見的網頁，看起來如下列範例：
開啟要使用的文件
開始開發資料庫應用程式的較佳方式是先建立一個網頁，列出資料庫中儲存的
記錄。您將在您在這個教學課程中建置的應用程式中建立一個動態網頁，列出
由資料庫中的客戶意見表繪製的資訊。稍後，您將建立另一個動態網頁，讓客
戶直接將意見或問題插入資料庫中。
讓我們先找到建立這些頁面時要使用的文件。
1. 選取「視窗＞檔案」開啟「檔案」面板。
「檔案」面板便會開啟。
2. 在「網站」彈出式選單中，選取您在設定程序中定義的 Cafe Townsend
網站。
如需詳細資訊，請參閱第 178 頁「在您開始之前」中列出的設定章節。
3. 在「檔案」面板中，按兩下名為 view 的檔案開啟它。

文件便會在「文件」視窗中開啟。
4. 如果您現在正在「程式碼」檢視中檢視文件，請按一下「文件」工具列上
的「顯示設計檢視」( 標示為「設計」標籤 ) 或「顯示程式碼和設計檢視」
( 標示為「分割」標籤 )；那麼當您完成教學課程時，便可以使用所提供的
畫面範例做為檢查點。
定義資料集
現在您將建立資料集，選擇想要顯示的資料。資料集是藉由資料庫查詢，擷取
自資料庫的一組資訊 ( 在 ASP.NET 中，資料集 (Recordset) 稱為資料集
(DataSet))。資料庫查詢是一種使用指定的搜尋條件向資料庫要求資料的方法，
通常使用於 SQL 語言中。接下來，您將使用擷取的資料庫資訊，做為動態網
頁的內容來源。
Dreamweaver 提供易於使用的介面，建立簡單的 SQL 查詢 ( 您不需要瞭解
SQL 就可以在 Dreamweaver 中建立資料集 )。
您建立的資料集會選取教學課程資料庫 COMMENTS 表格中的所有值。
注意
您必須連接資料庫，才能完成這個程序。如需詳細資訊，請參閱第 178 頁「在您

開始之前」。
1. 使用 Dreamweaver 開啟 Cafe Townsend 文件之後，將插入點放在「客戶

意見」標題底下。
2. 請執行下列其中一項作業，開啟「資料集」(Recordset) 或「資料集」(DataSet)
對話方塊 (ASP.NET)：
■ 在「插入」列的「應用程式」類別中，按一下「資料集」( 在 ASP.NET
中為 Recordset) 或「資料集」 (DataSet)。
■ 選取「視窗＞繫結」，開啟「繫結」面板，然後按一下加號 (+) 並選
取「資料集」 ( 在 ASP.NET 中為 Recordset) 或「資料集」 (DataSet)。
定義資料集 181
「資料集」 (Recordset) 或「資料集」 (DataSet) 對話方塊 (ASP.NET) 便會
出現。
注意
如果看到的對話方塊比前一個對話方塊複雜，請按一下「簡單」。
3. 在「名稱」文字方塊中，輸入 rs_Comment。
4. 在「資料來源」彈出式選單 (ColdFusion) 或「連線」彈出式選單 ( 其他伺
服器頁面類型 ) 中，選取 connTownsend。
「資料集」(Recordset) 或「資料集」(DataSet) 對話方塊便會更新為資料庫
中的資料。
5. 如果使用者名稱和密碼與資料來源或連線有關聯，請輸入之。如果您設定
資料來源時並未提供使用者名稱或密碼，請讓這些方塊保持空白。
6. 在「表格」彈出式選單中，保持選取 COMMENTS。
7. 確定是在「欄」中選取「全部」，表示選取表格的所有欄。
8. 讓「篩選」彈出式選單保持設定「無」，表示選取表格的所有列。
9. 在第一個「排序」彈出式選單中選取 LAST_NAME，並在第二個彈出式

選單中選取「遞增」。
這個步驟指定根據客戶姓氏，按字母順序列出擷取的記錄。
10. 按一下「測試」，測試資料集 (Recordset) 或資料集 (DataSet)。
定義資料集 183
符合您資料集 (Recordset) 或資料集 (DataSet) 選取範圍準則的資料庫記
錄，會出現在「測試 SQL 陳述式」視窗中。在這樣的情況下，您選取表
格中的所有資料。
11. 按一下「確定」關閉「測試 SQL 陳述式」視窗。
12. 按一下「確定」關閉「資料集」 (Recordset) 或「資料集」 (DataSet) 對話

方塊並且建立「資料集」 (Recordset) 或「資料集」 (DataSet)。
資料集會在「繫結」面板中出現。「文件」視窗不變更。
提示
如果您在「繫結」面
板中看不到所有資料集
欄位，請按一下「資
料集」(rs_Comment)
旁的加號 (+)
(Windows) 或展開箭
頭 (Macintosh)，展
開資料集結構。
顯示資料庫記錄
接著，您將建立一個頁面，該頁面列出目前存在於 COMMENTS 表格中的記
錄。您將動態地產生頁面，而不用手動輸入資訊。
首先，您先建立一張表格，建構該資料清單。
1. 在 Cafe Townsend 文件中，將插入點放在「客戶意見」標題後的空白行上。
2. 請使用下列其中一種方式插入表格：
■ 在「插入」列中選取「常用」類別，然後按一下「表格」按鈕或將此

按鈕拖曳到文件。
■ 選取「插入＞表格」。
「表格」對話方塊便會出現。
3. 在對話方塊中，設定下列選項：
■ 在「列」中，輸入 2。
■ 在「欄」中，輸入 4。
■ 將「表格寬度」保留 100 百分比的設定。
■ 讓「邊框粗細」保持設定 1。
■ 在「儲存格內距」中，輸入 2。
■ 在「儲存格間距」中，輸入 2。
■ 在「頁首」區段中，選取「上方」選項。
在「摘要」文字方塊中提供類似下面的表格文字說明，方便瀏覽者使用螢
幕讀取器時瞭解內容：
這個表格列出網頁瀏覽者在資料庫中輸入的所有意見。
完成的對話方塊應該看起來如下列範例：
表格便會插入文件中。
5. 在表格第一列中，新增表格項目的標籤：
■ 在表格的第一儲存格中，輸入 FIRST_NAME。
■ 在下一個儲存格中，輸入 LAST_NAME。
■ 在下一個儲存格中，輸入 EMAIL。
■ 在下一個儲存格中，輸入 COMMENTS。
顯示資料庫記錄 185
將動態欄位新增至表格
現在您已準備好將記錄集欄位新增至表格。
1. 執行下列其中一項作業，開啟「繫結」面板 ( 如果它尚未開啟 )。
■ 選取「視窗＞繫結」。
■ 按一下「應用程式」面板群組的展開箭頭，然後選取「繫結」面板。
2. 執行下列其中一項作業，新增 FIRST_NAME 欄位至表格中。
■ 將插入點放在「名字」標籤下方的表格儲存格，然後在「繫結」面板
中選取 FIRST_NAME，再按一下「插入」。
■ 將「繫結」面板中的 FIRST_NAME，拖曳到「名字」標籤的下方的
表格儲存格。
3. 重複步驟 2，將 LAST_NAME、EMAIL 和 COMMENTS ( 非
COMMENT_ID) 新增至表格。
您的表格應該看起來類似下列範例。您可能要放寬「文件」視窗，才能看
到整個表格。
設定重複區域
您建立的表格只包含一列資料。若要看到所有記錄，需要將表格列設定成重複
區域。在瀏覽器中檢視表格時，每個符合資料集搜尋條件的記錄有一列。
1. 在「文件」視窗中，執行下列其中一項作業，選取表格最後一列：
■ 按一下其中一個儲存格，然後在標籤選取器中，按一下清單中的最後
一個 <tr> 標籤。
■ 將指標放在表格列的左側，當它變為向右箭頭時，按一下表格列的邊
框，選取該列。
2. 請使用下列其中一種方式建立重複區域：
■ 在「伺服器行為」面板中，按一下加號 (+)，然後選取「重複區域」。

■ 在「插入」列的「應用程式」類別中，按一下「重複區域」。
■ 選取「插入＞應用程式物件＞重複區域」。
「重複區域」對話方塊便會出現。
3. 在對話方塊中按一下「確定」，表示接受預設設定。
表格列的四週會出現外框，外框左上方出現的索引標籤表示這是重複區域
( 索引標籤的標籤因您使用的伺服器技術而異 )。
檢視頁面
接著，您將檢視頁面。若要在 Dreamweaver 中檢視經過伺服器處理後的頁面
外觀，可以使用「即時資料」檢視。
在 Cafe Townsend 文件呈作用中狀態時，執行下列其中一項作業，檢視頁面資料：
■ 在「文件」工具列中，按一下「即時資料檢視」。
■ 選取「檢視＞即時資料」。
頁面更新顯示從資料庫中解開的資料。
檢視頁面 187
建立記錄插入表單
接著您要為 Cafe Townsend 網站建立一個能讓客戶在資料庫中新增意見的頁面。
Dreamweaver 包括一些應用程式物件，可協助您快速輕鬆地建立網路應用程式
頁面。您將使用應用程式物件，建立插入頁面。「插入記錄」應用程式物件藉
由建立 HTML 表單、對應到資料庫欄位的資料欄位和必要的伺服器 Script，
建立動態網頁。
新增記錄插入表單應用程式物件
您可以使用「記錄插入表單」應用程式物件，建立一個能讓使用者在資料庫中
輸入資料的表單。應用程式物件讓您選取包含在表單中的欄位、設定欄位標籤，
並選取要插入的表單物件類型。當使用者在表單欄位內輸入資料並按一下送出
按鈕時，一筆新記錄便會插入資料庫中。您也可以在成功地送出一筆記錄之後，
設定將開啟的頁面，如此一來，送出者就知道資料庫已更新。
1. 在「檔案」面板中，找到檔名為 send 的檔案，然後按兩下檔案開啟它。
文件便會在「文件」視窗中開啟。
2. 將插入點放在含有段落之表格列下方的空白表格列。
應用程式物件便會插入到空白列。
3. 若要在頁面上新增記錄插入物件，請執行下列其中一項作業：
■ 在「插入」列的「應用程式」類別中，選取「插入記錄」彈出式選單

中的「插入記錄表單精靈」。
■ 選取「插入＞應用程式物件＞插入記錄＞記錄插入表單精靈」。
「記錄插入表單」對話方塊便會出現。
4. 在「資料來源」(ColdFusion) 或「連線」彈出式選單中，選取 connTownsend。

5. 如果使用者名稱和密碼與資料來源或連線有關聯，請輸入之。
如果您設定資料來源或連線時並未提供使用者名稱或密碼，請讓這些方塊
保持空白。.
6. 在「表格」彈出式選單中，確定 COMMENTS 已選取。
7. 按一下「插入後，請前往」或「如果成功，請前往」 (ASP.NET) 文字方

塊旁的「瀏覽」按鈕。
8. 在出現的對話方塊中，選取名為 view 的檔案，然後按一下「確定」，關閉
對話方塊。
為了測試，在輸入意見後，您會想要看到顯示所有意見的頁面。測試網路
應用程式之後，請變更此設定，以顯示感謝瀏覽者意見的頁面。
9. 遵循下一節的程序，完成精靈的其餘部分。
建立記錄插入表單 189
建立插入表單
在「記錄插入表單精靈」的「表單欄位」區段中，定義瀏覽者要輸入資料的
表單。
1. 在「記錄插入表單精靈」中執行下列作業，移除不希望包含在表單內的欄位：
■ 選取 COMMENT_ID，然後按一下「減號」 (-)。
■ 選取 TELEPHONE，然後按一下「減號」 (-)。
■ 選取 SUBMIT_DATE，然後按一下「減號」 (-)。
■ 選取 ANSWERED，然後按一下「減號」 (-)。
2. 如果您建立 ASP.NET 的頁面，請依照下列步驟變更表單欄位的字母順序：
■ 在「欄」清單中，選取 COMMENTS，然後按一下向下鍵，將
COMMENTS 置於 LAST_NAME 下方。
■ 在「欄」清單中，選取 EMAIL，然後按一下向下鍵，將 EMAIL 置於
LAST_NAME 下方。
3. 在「表單欄位」清單中，選取 FIRST_NAME，指定欄位在表單中顯示的
方式。
4. 在「標籤」文字方塊中鍵入 First Name，取代預設文字。
這是將出現在文字方塊旁 HTML 表單中的標籤。

5. 依照下列步驟為欄位設定表單物件類型：
■ 如果您使用 ASP.NET，請在「顯示為」彈出式選單中接受預設值「文
字欄位」，並在「送出為」彈出式選單中將預設值 WChar 變更為
VARCHAR。
■ 如果您不是使用 ASP.NET 伺服器技術，請在「顯示為」彈出式選單
中接受預設值「文字欄位」，並在「送出為」彈出式選單中接受預設
值「文字」。
6. 讓「預設值」欄位保持空白。
在某些網路應用程式中，您可能想使用這個欄位設定欄位的起始文字，讓
使用者知道應提供何種資訊。這裡的欄位標籤「名字」，明確指出使用者
應該輸入自己的名字。
完成時，FIRST_NAME 項目應該看起來像下列範例：
7. 對 LAST_NAME 表單欄位重複執行步驟 3 到 6，這個欄位的標籤是

「LAST_NAME:」，顯示為「文字欄位」，送出為「文字」。
8. 對 EMAIL 表單欄位重複執行步驟 3 到 6，這個欄位的標籤是「EMAIL:」，
顯示為「文字欄位」，送出為「文字」。
9. 在「表單」欄位清單中，選取 COMMENTS。
10. 在「標籤」欄位中，輸入 Comments。
11. 請執行下列其中一項作業，為「意見」表單欄位設定表單物件類型：

■ 如果您使用 ASP.NET，請在「顯示為」彈出式選單中選取「文字區
域」，然後在「送出為」彈出式選單中選取 VARCHAR。
■ 如果您不是使用 ASP.NET 伺服器技術，請在「顯示為」彈出式選單中
選取「文字區域」，然後在「送出為」彈出式選單中接受預設值「文字」。
完成時，對話方塊應該看起來像下列的範例：
建立記錄插入表單 191
12. 按一下「確定」關閉對話方塊並且建立記錄插入表單。
「記錄插入表單」應用程式物件便會插入文件中。
將檔案複製到伺服器
接下來，要將更新過的檔案複製到伺服器上。複製檔案後，您可以檢視插入記
錄頁面、新增意見或問題，並送出資料測試應用程式。
1. 在「檔案」面板中，在名為 view 和 send 的檔案上用 Control + 按一下
(Windows) 或 Command + 按一下 (Macintosh)，然後按一下藍色「上傳
檔案」箭頭圖示，將檔案上傳到伺服器。
2. 如果 Dreamweaver 詢問您是否要將相關檔案複製到伺服器，請選取「是」。
注意
在有些伺服器模式下，Dreamweaver 會在本機資料夾中建立 Connections 資

料夾。您也必需將該資料夾複製到您的遠端伺服器，讓網路應用程式可以執行。在
「檔案」面板中，選取 Connections 資料夾，然後按一下「上傳檔案」將資料夾
複製到伺服器。
3. 當名為 send 的檔案作為作用中文件時，選取「檔案＞在瀏覽器中預覽」，

或按 F12 鍵在瀏覽器中檢視頁面。
4. 在表單中輸入測試資料，然後按一下文件中的「插入記錄」，將資料送出。
應用程式伺服器會接收所送出的資訊、更新資料庫，然後顯示已更新的意
見頁。
進階閱讀
這個教學課程提供資訊，說明您可以用來建立動態、資料驅動頁面的小型工具
組。您已了解如何建立資料集，定義要在網站使用的資料，也已經使用
Dreamweaver 應用程式物件，建立了可與資料庫儲存的資料互動的有效網路應
用程式。
如需有關如何開發網路應用程式的詳細資訊，請參閱「使用 Dreamweaver」中
的下列主題：
■ 「取得網頁的資料」
■ 「定義動態內容的來源」
■ 「新增動態內容到網頁」
■ 「顯示資料庫記錄」
進階閱讀 193
4
第 4 部分
附錄
本書第四部份所含的附錄會為前面章節所提出的概念提供其他資訊。
了解網路應用程式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .197
安裝網站伺服器 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 209
ColdFusion 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
ASP.NET 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
ASP 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
JSP 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255
PHP 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
195
附錄 A
了解網路應用程式
A
網路應用程式是一組網頁，可以與使用者、本身的網頁以及網站伺服器上的各
種資源 ( 包括資料庫 ) 互動。在開始建立自己的網路應用程式前，您應該要對
本章所討論的概念有相當的認識。
關於網路應用程式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
網路應用程式的運作方式 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .199
撰寫動態網頁 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
選擇伺服器技術 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
網路應用程式詞彙 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
關於網路應用程式
網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部
都尚未決定。只有在使用者向網站伺服器要求網頁時，網頁的最後內容才會確
定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結果都
不同，所以這種網頁便稱為動態網頁。
建立網路應用程式時，必須考慮到各種需要和問題。本節說明網路應用程式的
常見用法，並提供一個簡單的範例。
197
網路應用程式的常見用法
網頁瀏覽者和開發人員應用網路應用程式的方法很多，其中包括：
■ 讓使用者在內容豐富的網站上輕鬆快速地找到資訊。
這類型的網路應用程式可以根據使用者的需求，為使用者提供搜尋、組
織和導覽內容的功能。範例包括公司的內部網路、Microsoft MSDN
(www.msdn.microsoft.com) 和 Amazon.com (www.amazon.com)。
■ 收集、儲存和分析網站使用者所提供的資料。
在過去，在 HTML 表格中輸入的資料是透過電子郵件傳送給員工，或以
CGI 應用程式的形式處理。網路應用程式可以將表格資料直接儲存到資料
庫，還可以將資料擷取出來，建立網站報告以提供分析。常見的範例包括
網路銀行網頁、商店的結帳網頁、意見調查和使用者意見表格等。
■ 更新經常變更內容的網站
網路應用程式可以除去網頁設計師需要經常更新網站之 HTML 的負擔。
如新聞編輯人員之類的內容提供者可以為網路應用程式提供內容，而網路
應用程式即可自動更新網站。範例包含 Economist (www.economist.com)
和 CNN (www.cnn.com)。
網路應用程式範例
小珍是長時間使用 Dreamweaver 的專業網頁設計師，她負責為一家擁有 1000
名員工的中等規模公司維護其內部網路和網際網路網站。有一天，人力資源部
門的王先生來向她請教一個問題。人力資源正在執行一項員工健康方案，不論
是走路、騎腳踏車或跑步，員工所運動的每公里都可獲得點數。每個員工都必
須用電子郵件將每月運動的里程數報告給王先生。每個月的月底，王先生會收
集所有的電子郵件，並根據員工的總點數，提供小額的現金獎勵給員工。
王先生的問題是這項健康方案太過熱門，參加的員工數量太龐大，現在每到月
底，王先生的信箱都快被蜂擁而來的電子郵件塞爆了。王先生問小珍有沒有可
用的網路解決方案。
小珍建議他使用可執行下列工作的內部網路應用程式：
■ 讓員工在網頁上使用簡單的 HTML 表格輸入運動里程數
■ 將員工的里程數儲存在資料庫內
■ 根據里程數資料計算健康點數
■ 讓員工追蹤每月進度
■ 讓王先生在每月月底只要按一下便可以看到總點數
小珍在中午前靠 Dreamweaver 的工具，便輕鬆快速地建好了應用程式並開始
執行。
198 了解網路應用程式
網路應用程式的運作方式
網路應用程式是靜態和動態網頁的集合。靜態網頁不因網站使用者要求而變
更：網站伺服器會直接將網頁傳送到要求的網頁瀏覽器而不修改。相反地，「動
態網頁」在傳送到要求的瀏覽器前，會由伺服器進行修改。因為網頁會變更，
所以才稱為動態。
例如，您可以設計顯示健康結果的網頁，並將某些資訊 ( 例如員工名稱和結果 )
留到特定員工要求該網頁時才決定。
處理靜態網頁
靜態的網站是由一組相關的 HTML 網頁和檔案 ( 存放在執行網站伺服器的電
腦上 ) 所組成。
網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。當使用者在網
頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文字方塊中輸入
URL 時，便會產生網頁要求。
靜態網頁的最後內容是由網頁設計師決定，不會在要求網頁時變更。以下是一
個範例：
<html>
<head>
<title>Trio Motors Information Page</title>
</head>
<body>
<h1>About Trio Motors</h1>
<p>Trio Motors is a leading automobile manufacturer.</p>
</body>
</html>
這個網頁的 HTML 程式碼的每一行都是由設計師所撰寫，然後才被放到伺服

器上。因為 HTML 一旦放到伺服器上後就不會變更，所以這類網頁又稱為靜
態網頁。
注意
嚴格說來，「靜態」網頁並不是靜態。例如，滑鼠變換影像或 Flash 內容 (SWF

檔案 ) 都會使靜態網頁變得活靈活現。不過，只要是在傳送到瀏覽器時沒有經過修
改的網頁，這本手冊便將它稱為靜態網頁。
網路應用程式的運作方式 199
當網站伺服器接到靜態網頁的要求時，伺服器會讀取要求、找到網頁，然後將
它傳送到要求的瀏覽器，如下圖所示：
步驟 1 - 網頁瀏覽
器要求靜態網頁。
步驟 3 - 網站
伺服器將網頁
傳送到要求的
瀏覽器。
步驟 2 - 網站伺
服器找到網頁。
以網路應用程式的例子而言，當使用者要求網頁時，某些特定的程式碼行是未
決定的。將網頁傳送到瀏覽器前，您必須使用某些機制決定這些程式碼行。下
一節中將討論這個機制。
處理動態網頁
當網站伺服器收到靜態網頁的要求時，伺服器會直接將網頁傳送到要求的瀏覽
器。當網站伺服器收到動態網頁的要求時，卻會有不同的反應：它會將網頁傳
送到負責完成網頁的特定軟體，這個特殊軟體稱為應用程式伺服器。
應用程式伺服器會讀取網頁上的程式碼、根據程式碼中的指示完成網頁，然後
再將程式碼從網頁移除。然後應用程式伺服器會將靜態網頁傳回網站伺服器，
後者則將該網頁傳送到要求的瀏覽器。瀏覽器在網頁到達時所取得的資料是純
粹的 HTML。下面是處理過程的檢視：
步驟 1 - 網頁
瀏覽器要求動
態網頁。
步驟 5 - 網站伺
服器將完成的網
頁傳送到要求的
瀏覽器。
步驟 2 - 網站
伺服器找到網
頁，並將它傳
送給應用程式
伺服器。
步驟 4 - 應用程
式伺服器將完成
的網頁傳回給網
步驟 3 - 應用站伺服器。
程式伺服器掃
描網頁上的指
示並完成網頁。
存取資料庫
應用程式伺服器可以讓您使用資料庫之類的伺服器端資源，例如，動態網頁可
以指示應用程式伺服器從資料庫擷取資料，並將其插入網頁的 HTML 中。如
需詳細資訊，請參閱「使用 Dreamweaver」中的「資料庫入門手冊」。
從資料庫擷取資料的指示稱為資料庫查詢。查詢是由搜尋準則所組成，這些準
則是以稱為 SQL ( 結構化查詢語言 ) 的資料庫語言表達。SQL 查詢會被寫入
網頁的伺服器端 Script 或標籤。
應用程式伺服器無法直接與資料庫溝通，因為資料庫的專用格式會使資料變得
無法辨認，就像在「記事本」或 BBEdit 中開啟 Word 文件會使文件變得無法
辨認一樣。應用程式伺服器只能經由資料庫驅動程式這個媒介才能與資料庫進
行溝通：資料庫驅動程式是軟體，作用就像應用程式伺服器和資料庫之間的解
譯器。
驅動程式建立了通訊後，便可以針對資料庫進行查詢並建立資料集。資料集是
從資料庫中的一或多個表格中擷取出的一組資料。資料集會傳回至應用程式伺
服器，而伺服器會使用資料以完成動態網頁。
以下是一個以 SQL 所寫成的簡單資料庫查詢：
SELECT lastname, firstname, fitpoints
FROM employees
這個陳述式會建立一個三欄的資料集，並將資料庫中所有員工的姓、名和健
康點數等列填入。如需詳細資訊，請參閱「使用 Dreamweaver」中的「SQL
入門」。
以下是查詢資料庫並將資料傳回瀏覽器的程序說明：
步驟 1 - 網頁瀏覽器要
求動態網頁。
步驟 9 - 網站伺服器
將完成的網頁傳送到
要求的瀏覽器。
步驟 2 - 網站伺服器
找到網頁，並將它傳
送給應用程式伺服器。
步驟 8 - 應用程式伺
服器在網頁中插入資
料，然後將網頁傳送
到網站伺服器。
步驟 3 - 應用程式伺服
器掃描網頁上的指示。
步驟 4 - 應用程式伺
服器將查詢傳送到資
料庫驅動程式。
步驟 7 - 驅動程式將
資料集傳送到應用程
式伺服器。
步驟 5 - 驅動程式針
對資料庫執行查詢。
步驟 6 - 將資料集傳回
驅動程式。
您的網路應用程式幾乎可以使用任何的資料庫，只要伺服器上安裝了適當資料
庫驅動程式即可。
如果您計劃建立小型廉價的應用程式，可以使用以檔案為主的資料庫，例如以
Microsoft Access 建立的資料庫。如果您計劃建立商務關鍵性的完整應用程式，
可以使用伺服器架構的資料庫，例如以 Microsoft SQL Server、Oracle 9i 或
MySQL 建立的資料庫。
如果存放資料庫的系統不是您的網站伺服器，請確定這兩個系統之間的連線速
度夠快，這樣網路應用程式才能快速而有效地運作。
撰寫動態網頁
動態網頁的撰寫包含下列事項：先撰寫 HTML、然後在 HTML 中加入伺服
器端 Script 或標籤，使網頁變成動態。當您檢視產生的程式碼時，該語言會以
內嵌的形式出現在網頁的 HTML 中，所以這些語言被稱為 HTML 內嵌程式
語言。下列基本範例使用的是「ColdFusion 標記語言」 (CFML)：
<html>
<head>
</head>
<body>

<cfset department="Sales">
<cfoutput>
<p>Be sure to visit our #department# page.</p>
</cfoutput>

</body>
</html>
這個網頁上的內嵌指示會執行下列動作：
1. 建立稱為 department 的變數，並將字串 "Sales" 指定給它。
2. 在 HTML 程式碼中插入變數的值 "Sales"。
應用程式伺服器會將下列網頁傳回網站伺服器：
<html>
<head>
</head>
<body>
<p>Be sure to visit our Sales page.</p>
</body>
</html>
網站伺服器會將網頁傳送給要求的瀏覽器，後者會將其顯示為：
About Trio Motors
Trio Motors is a leading automobile manufacturer.
Be sure to visit our Sales page.
您需要視伺服器上提供的伺服器技術，選擇要使用的 Script 或標籤語言。以下
是 Dreamweaver 所支援的五種伺服器技術最常用的語言：
伺服器技術語言
ColdFusion ColdFusion 標記語言 (CFML)
ASP.NET Visual Basic
C#
Active Server Pages (ASP) VBScript
JavaScript
Java Server Pages (JSP) Java
PHP PHP
如需詳細資訊，請參閱第 205 頁「選擇伺服器技術」。

Dreamweaver 可以建立網頁運作時必要的伺服器端 Script 或標籤，或者您也可
以在 Dreamweaver 程式碼環境中自行撰寫。
選擇伺服器技術
您可以使用 Dreamweaver，應用五種伺服器技術建立網路應用程式：ColdFusion、
ASP.NET、ASP、JSP 或 PHP。每種技術在 Dreamweaver 中都有相對應的文件
類型。為網路應用程式選擇技術時必須考慮幾種因素，包括您對各種 Script 語言
的熟悉程度以及您計劃使用的應用程式伺服器。
如果您不熟悉網路應用程式開發或一般的應用程式開發，您可能會偏好
ColdFusion，因為它提供容易學習的伺服器 Script 環境，可與 Dreamweaver
密切整合。如果您熟悉其他伺服器技術，例如 JSP、PHP、ASP，或 ASP.NET，
Dreamweaver 也提供很好的支援。
選擇伺服器技術還要視您計劃用於網路應用程式的應用程式伺服器而定。應用
程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤的網
頁。例如，如果您有 ColdFusion MX 7 Server，便可以選擇 ColdFusion 做為
伺服器技術。如果您存取使用 .NET Framework 執行 Microsoft Internet
Information Server 5 (IIS) 的伺服器，您可以選擇 ASP.NET。如果您存取具有
PHP 應用程式伺服器的網站伺服器，便可選擇 PHP；如果您存取具有 JSP 應
用程式伺服器 ( 例如 Macromedia JRun) 的網站伺服器，便可選擇 JSP。
選擇伺服器技術 205
ColdFusion MX 7 開發人員版可從 Dreamweaver CD （僅限於 Windows 版 )
以及 Macromedia 網站上取得，網址為 www.macromedia.com/go/coldfusion/。
如需詳細資訊，請參閱「使用 Dreamweaver」中的「設定應用程式伺服器」。
若要了解更多有關 ColdFusion 的資訊，請從「說明」選單中選取「使用
ColdFusion」。
若要了解更多有關 ASP.NET 的資訊，請造訪 Microsoft 網站，網址是 http://
msdn.microsoft.com/asp.net/。
若要了解更多有關 ASP 的資訊，請造訪 Microsoft 網站，網址是 http://
msdn.microsoft.com/library/default.asp?url=/library/en-us/dnanchor/html/
activeservpages.asp。
若要了解更多有關 JSP 的資訊，請造訪 Sun Microsystems 網站，網址是
java.sun.com/products/jsp/。
若要了解更多有關 PHP 的資訊，請造訪 PHP 網站，網址是 www.php.net/。
網路應用程式詞彙
本節定義網路應用程式相關的常用詞彙。
應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器端 Script 或標籤
的網頁。從伺服器要求這種網頁時，網站伺服器會將網頁交由應用程式伺服器
處理，再傳送給瀏覽器。如需詳細資訊，請參閱第 199 頁「網路應用程式的
運作方式」。
常見的應用程式伺服器包括 Macromedia ColdFusion、Macromedia JRun
Server、Microsoft .NET Framework、IBM WebSphere 和 Apache Tomcat。
資料庫是存放在表格中的資料集合。表格的每一列構成一筆記錄，而每一欄構
成記錄中的欄位，如下列範例所顯示。
資料庫驅動程式是一種軟體，作用就像網路應用程式和資料庫之間的解譯器。
資料庫中的資料是以專用格式儲存的。資料庫驅動程式可以讓網路應用程式讀
取和操作無法用其他方式解讀的資料。
資料庫管理系統 (DBMS 或稱資料庫系統 ) 是用來建立和操作資料庫的軟體。常
見的資料庫系統包括 Microsoft Access、Oracle 9i 和 MySQL。
資料庫查詢是從資料庫擷取資料集的作業。查詢是由搜尋準則所組成，這些準
則是以稱為 SQL 的資料庫語言來表示。例如，查詢可以指定資料集內只能包
含特定的欄或記錄。
動態網頁是在頁面傳送至瀏覽器前，由應用程式伺服器所自訂的網頁。如需詳
細資訊，請參閱第 199 頁「網路應用程式的運作方式」。
資料集是從資料庫中的一或多個表格中擷取出的一組資料，如下列範例所示：
關聯式資料庫是包含多個表格並會在表格間共用資料的資料庫。下列資料庫是
關聯式的，因為兩個表格共用 DepartmentID 欄。
伺服器技術是應用程式伺服器用來在執行階段修改動態網頁的技術。
Dreamweaver 開發環境支援下列伺服器技術：
■ Macromedia ColdFusion
■ Microsoft ASP.NET
■ Microsoft Active Server Pages (ASP)
網路應用程式詞彙 207
■ Sun Java Server Pages (JSP)
■ PHP：Hypertext Preprocessor (PHP)
您也可以使用 Dreamweaver 編碼環境，開發未列於此處的其他伺服器技術的
網頁。
靜態網頁是在頁面傳送至瀏覽器前，不會由應用程式伺服器修改的網頁。如需
詳細資訊，請參閱第 199 頁「處理靜態網頁」。
網路應用程式是一個包含網頁的網站，其中這些網頁的內容可能有部分或全部
都尚未決定。這些網頁的最後內容只有在使用者向網站伺服器要求網頁時，才
會確定。因為網頁的最後內容會根據網頁瀏覽者的動作而變化，每個要求的結
果都不同，所以這種網頁便稱為動態網頁。
網站伺服器是會對網頁瀏覽器的要求做出回應而傳送網頁的軟體。當使用者在
瀏覽器中的網頁上按一下連結、在瀏覽器中選擇書籤，或者在瀏覽器的網址文
字方塊中輸入 URL 時，便會產生網頁要求。
常見的網站伺服器包括 Microsoft Internet Information Server、Microsoft
Personal Web Server、Apache HTTP Server、Netscape Enterprise Server 和 Sun
ONE Web Server。
附錄 B
安裝網站伺服器
B
若要開發並測試動態網頁，您需要可運作的網站伺服器。本章說明大多數的
Windows 使用者如何在本機電腦上安裝並使用 Microsoft 網站伺服器。
如果 Windows 使用者要開發 ColdFusion 網站，則可以使用 Macromedia
ColdFusion MX 7 應用程式伺服器的開發人員版中所包含的網站伺服器，開發
人員版是可供免費安裝及使用的。如需詳細資訊，請參閱第 215 頁附錄 C
「ColdFusion 範例網站的設定」。
如果是 Macintosh 使用者，則可以使用網路電腦上或虛擬主機公司提供的網站
伺服器。如果要開發 PHP 應用程式，則可以使用已經安裝於 Macintosh 上的
Apache 網站伺服器。
入門 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
安裝 Internet Information Server . . . . . . . . . . . . . . . . . . . . . . . . . . .210
測試 IIS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
測試 Macintosh 網站伺服器 (PHP 開發人員 ). . . . . . . . . . . . . . . . . .212
網站伺服器基本資訊 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
注意
Macromedia 不提供協力廠商軟體 ( 如 Microsoft Internet Information

Server) 的技術支援。如果您需要 Microsoft 產品協助，請聯絡 Microsoft 技術
支援。
209
入門
如果您是 Windows 使用者，可以在系統上安裝並執行 Internet Information
Server (IIS)。您還可以在網路的 Windows 電腦上安裝網站伺服器，讓開發小
組中的其他成員一起使用。
如果 Windows 使用者要開發 ColdFusion 應用程式，則也可以使用 ColdFusion
MX 7 開發人員版所安裝的網站伺服器。如需詳細資訊，請參閱第 215 頁附錄 C
「ColdFusion 範例網站的設定」。
您的電腦上可能已經安裝了 IIS。請檢查您的資料夾結構，看它是否包含
C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。
如果此資料夾不存在，請安裝 IIS。如需詳細資訊，請參閱第 210 頁「安裝
Internet Information Server」。
有興趣開發 PHP 應用程式的 Macintosh 使用者，則可以使用已經安裝於
Macintosh 上的 Apache 網站伺服器。如需詳細資訊，請參閱第 212 頁「測試
Macintosh 網站伺服器 (PHP 開發人員 )」。
安裝 Internet Information Server

Windows 2000 和 Windows XP Professional 使用者應該安裝 Internet
Information Server (IIS)。
如果您使用的是 Windows 2000 或 Windows XP Professional，請確定系統上
已經安裝並執行了 IIS。執行這項作業的方法是尋找 C:\Inetpub 資料夾。如果
資料夾不存在，表示系統上可能沒有安裝 IIS。
若要在 Windows 2000 和 XP Professional 上安裝 IIS：

1. 選取「開始＞設定＞控制台＞新增 / 移除程式」，或「開始＞控制台＞新增
/ 移除程式」。
2. 選取「新增 / 移除 Windows 元件」。
3. 選取「Internet Information Services (IIS)」，然後按一下「下一步」。
4. 依照安裝說明執行。
您可以在安裝網站伺服器後進行測試。
210 安裝網站伺服器
測試 IIS
若要測試網站伺服器，請建立稱為 myTestFile.html 的簡單 HTML 頁面，並
將其儲存於網站伺服器所執行電腦的 Inetpub\wwwroot 資料夾。這個 HTML
頁面可以只有一行，如：
<p>My web server is working.</p>
接下來，請透過 HTTP 要求在網頁瀏覽器中開啟測試頁面。如果正在本機電

腦上執行 IIS，請在網頁瀏覽器中輸入下列 URL：
http://localhost/myTestFile.html
如果正在網路電腦上執行 IIS，請用網路電腦的名稱當做網域名稱。例如，如
果執行 IIS 的電腦名稱是 rockford-pc，請在瀏覽器中輸入下列 URL：
http://rockford-pc/myTestFile.html
注意
如需關於電腦名稱的詳細資訊，請參閱第 213 頁「網站伺服器基本資訊」。
如果瀏覽器顯示您的網頁，表示網站伺服器運作正常。
如果瀏覽器無法顯示網頁，請確定伺服器是否有執行。如果仍然無法開啟頁面，
請確定測試頁面位於 Inetpub\wwwroot 資料夾中，且副檔名為 .htm 或 .html。
測試 IIS 211
測試 Macintosh 網站伺服器
(PHP 開發人員 )
您可以使用 Macintosh 上已安裝的 Apache 網站伺服器，開發 PHP 應用程式。
若要測試伺服器，請建立稱為 myTestFile.html 的簡單 HTML 頁面，並將其儲存
於 Macintosh 上的 /Users/your_user_name/Sites/ 資料夾 ( 其中 your_user_name
是您的 Macintosh 使用者名稱 )。這個 HTML 頁面可以只有一行，如：
<p>My web server is working.</p>
接下來，請在網頁瀏覽器中輸入下列 URL，以透過 HTTP 要求在網頁瀏覽器

中開啟測試頁面：
http://localhost/~your_user_name/myTestFile.html
注意
依預設值，Apache 伺服器會執行於連接埠 80。
如果瀏覽器顯示您的網頁，表示網站伺服器運作正常。如果瀏覽器顯示無法顯
示網頁，請開啟「系統偏好設定」查看「共用偏好設定」面板，確定已啟動
網站伺服器。「個人網路共用」選項應該會啟用。
Apache 網站伺服器預設不使用 PHP，您必須設定才能使用。如需詳細資訊，
請參閱第 270 頁「設定系統 (PHP)」。
網站伺服器基本資訊
網站伺服器是提供網頁的軟體，會回應網頁瀏覽器發出的要求。網站伺服器有
時稱為 HTTP 伺服器。
假設您使用 IIS 來開發網路應用程式。網站伺服器的預設名稱是電腦的名稱。
您可以變更電腦名稱以變更伺服器名稱。如果您的電腦沒有名稱，伺服器會使
用 localhost 這個字。
伺服器名稱對應到伺服器的根資料夾，如果在 Windows 電腦上，通常是
C:\Inetpub\wwwroot。您可以在電腦上執行的瀏覽器中輸入下列 URL，開啟
任何儲存在根資料夾內的網頁：
http://your_server_name/your_file_name
例如，如果伺服器名稱是 mer_noire，而 C:\Inetpub\wwwroot\ 中儲存了稱為
soleil.html 的網頁，則您可以在本機電腦上執行的瀏覽器中輸入下列 URL，開
啟該網頁：
http://mer_noire/soleil.html
注意
請記得 URL 是使用正斜線，而非反斜線。
您也可以在 URL 中指定子資料夾，開啟儲存在根資料夾子資料夾內的任何網

頁。例如，假設 soleil.html 檔案是儲存在稱為 gamelan 的子資料夾中，如下所示：
C:\Inetpub\wwwroot\gamelan\soleil.html
您可以在電腦上執行的瀏覽器中輸入下列 URL，開啟這個網頁：
http://mer_noire/gamelan/soleil.html
當網站伺服器在電腦上執行時，您可以用 localhost 取代伺服器名稱。例如，
下列 URL 會在瀏覽器中開啟相同的網頁：
http://mer_noire/gamelan/soleil.html
http://localhost/gamelan/soleil.html
注意
除了伺服器名稱或 localhost 以外，另一項您可以使用的表示法是 127.0.0.1

( 例如，http://127.0.0.1/gamelan/soleil.html) 。
網站伺服器基本資訊 213
附錄 C
ColdFusion 範例網站的設定
C
Macromedia Dreamweaver 8 隨附有 ColdFusion 頁面，可以讓您建立小型的
網路應用程式。本章描述如何設定範例應用程式。
設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義
Dreamweaver 網站。第三，將應用程式連結到資料庫。這本設定手冊依照這三
個步驟進行。
ColdFusion 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . .215
設定系統 (ColdFusion). . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .216
定義 Dreamweaver 網站 (ColdFusion) . . . . . . . . . . . . . . . . . . . . . .221
連線到範例資料庫 (ColdFusion) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225
ColdFusion 開發人員的設定檢查
清單
若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連
線到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部
份中詳細描述。
設定系統：
1. 安裝 ColdFusion 應用程式伺服器 ( 包含網站伺服器 )。
2. 建立根資料夾。
定義 Dreamweaver 網站：
1. 複製範例檔案到硬碟上的資料夾。
2. 將資料夾定義為 Dreamweaver 本機資料夾。
3. 將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
215
4. 指定要處理動態頁面的資料夾。
5. 上傳範例檔案到網站伺服器。
連線到資料庫：
1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。
2. 在 Dreamweaver 中建立連線。
設定系統 (ColdFusion)
本節針對兩種常用的系統設定提供指示：其中一種是將 ColdFusion 安裝於您
的硬碟上，而另一種是將 ColdFusion 安裝於遠端的 Windows 電腦上。若要使
用不同的設定，請參閱「使用 Dreamweaver」中的「設定網路應用程式」。
下圖顯示本節所描述的兩種設定：
቏ᑨ⥑હ ⳵Ὁ̗ሺ‫⥑ݽ‬હ
(༉ᎌҢܻġWindowsġ‫ٺ‬Ң‫)ޱ‬ (ᎌҢܻġMacintoshġ‫ܖ‬ġWindowsġ‫ٺ‬Ң‫)ޱ‬
WINDOWS PC MAC ໣ WINDOWS PC
Dreamweaver Dreamweaver
ColdFusion ̗ሺ‫ݽ‬
̤ᅠġc:\Inetpub\wwwroot\ġ
᱿ℐἿዾᲿ⻞⫏ᅆप
ℐ⭰໣ FTP એ‫ח‬
WINDOWS ̗ሺ‫ݽ‬
ColdFusion ̗ሺ‫ݽ‬
216 ColdFusion 範例網站的設定

若要設定您的系統：
1. 安裝 ColdFusion 應用程式伺服器。
注意
安裝應用程式伺服器是只需做一次即可的工作。
安裝 ColdFusion MX 7
若要處理動態網頁，則需要網站伺服器和應用程式伺服器。這兩種
ColdFusion MX 7 都有提供。網站伺服器是提供網頁的軟體，會回應網頁瀏覽
器發出的要求。應用程式伺服器是軟體，可以協助網站伺服器處理包含伺服器
端 Script 或標籤的網頁。當瀏覽器要求這類網頁時，網站伺服器會將網頁交由
應用程式伺服器處理，再傳送網頁給瀏覽器。如需詳細資訊，請參閱第 197 頁
「了解網路應用程式」。
您可以從 Macromedia 網站下載及安裝功能齊全的 ColdFusion MX 7 開發人
員版，網址為 www.macromedia.com/go/coldfusion/。確定您選取 Windows 版
本的 ColdFusion MX 7 開發人員版。Dreamweaver CD ( 僅限於 Windows 版 )
中也有提供 ColdFusion MX 7 開發人員版。
注意
您也可以將 ColdFusion 安裝在執行 J2EE 伺服器 ( 例如 JRun 或 Tomcat) 的

Mac OS X 電腦上。如需詳細資訊，請參閱 Macromedia 網站，網址是
www.macromedia.com/go/cfmx7_mac。不過，安裝程序很複雜，目前還沒
有在 Macintosh 上利用 ColdFusion 測試 Dreamweaver。此外，
Macintosh 上的 ColdFusion 可能不易連接諸如 MySQL 的資料庫伺服器。
設定系統 (ColdFusion) 217

若要安裝 ColdFusion MX 7：
1. 如果可以，請使用「管理員」使用者帳號登入 Windows 系統。
2. 關閉所有開啟的應用程式。
3. 按兩下 ColdFusion MX 7 安裝程式檔。
4. 依照螢幕上的指示執行。
安裝精靈中的部份螢幕已包含清楚的指示。然而，對於下列螢幕，請選取
下列選項：
■ 在 Installer Configuration 「安裝程式設定」螢幕上，請選取 Server
Configuration 「伺服器設定」選項。

■ 在 Installation Directory 「選取安裝目錄」螢幕上，請接受預設資料夾
C:\CFusionMX7，再按 Next 「下一步」。
■ 在 Configure Web Server 「設定網站伺服器」螢幕上，請選取螢幕底

部的 Built-in Web Server 「內建網站伺服器」選項。
設定系統 (ColdFusion) 219

■ 在 RDS Password「RDS 密碼」螢幕上，確定 Enable RDS「啟用 RDS」
選項已選取，然後輸入並確認密碼。
如需詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 ( 「說明＞使

用 ColdFusion 」 ) 。
在安裝且啟動 ColdFusion 之後，請建立您網路應用程式的根資料夾。
建立根資料夾
安裝伺服器軟體之後，請在執行 ColdFusion 的系統上建立網路應用程式的根
資料夾，並確定此資料夾有必要的權限。
若要建立網路應用程式的根資料夾：
■ 在執行 ColdFusion 的系統上的 CFusionMX7\wwwroot 資料夾中，建立稱
為 MySampleApps 的資料夾。
注意
寫下這個資料夾名稱備用。稍後鍵入資料夾名稱時，大小寫必須和建立時用的完全
相符。
依預設值，ColdFusion 會設定其網站伺服器將 CFusionMX7\wwwroot 資料夾

內的網頁提供做為伺服器網頁。網站伺服器將提供這個資料夾或其子資料夾中
的任何頁面，以回應網路瀏覽器所發出的 HTTP 要求。
設定系統之後，您必須定義 Dreamweaver 網站。

定義 Dreamweaver 網站
(ColdFusion)
設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站
以管理檔案。
若要定義 Dreamweaver 網站：

1. 將範例檔案複製到硬碟上的資料夾 ( 請參閱第 221 頁「複製範例檔案」 )。
2. 將資料夾定義為 Dreamweaver 本機資料夾 ( 請參閱第 222 頁「定義本機資
料夾」 )。
3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 (請參閱第 222 頁
「定義遠端資料夾」 ) 。
4. 指定處理動態網頁的資料夾 ( 請參閱第 223 頁「指定處理動態網頁的位置」)。
5. 上傳範例檔案到網站伺服器 ( 請參閱第 224 頁「上傳範例檔案」 )。
複製範例檔案
如果您尚未這樣做，請將範例檔案從 Dreamweaver 應用程式資料夾複製到硬
碟上的資料夾。
若要複製範例檔案：
1. 在硬碟上您的使用者資料夾中建立稱為 local_sites 的新資料夾。
例如，建立下列其中一個資料夾：
■ C:\Documents and Settings\your_user_name\My
Documents\local_sites (Windows)
■ /Users/your_user_name/Documents/local_sites (Macintosh)
注意


如果您將 Dreamweaver 安裝於預設的位置，資料夾的路徑即如下所示：
8\Tutorial_assets\cafe_townsend\
8/Tutorial_assets/cafe_townsend
定義 Dreamweaver 網站 (ColdFusion) 221

3. 將 cafe_townsend 資料夾複製到 local_sites 資料夾中，
料夾 )。
複製 cafe_townsend 資料夾之後，請將此資料夾定義為 Dreamweaver 本機資
料夾。
複製 cafe_townsend 資料夾之後，將包含 ColdFusion 範例檔案的資料夾定義
為 Dreamweaver 本機資料夾。
若要定義 Dreamweaver 本機資料夾：

1. 在 Dreamweaver 中，選取「網站＞管理網站」。
在「管理網站」對話方塊中，按一下「新增」，然後選取「網站」。
2. 如果是顯示「基本」索引標籤，請按一下「進階」索引標籤。
3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ColdFusion。
這個名稱在 Dreamweaver 中代表您的網站。

4. 按一下「本機根資料夾」文字方塊旁的資料夾圖示，然後瀏覽至下列包含
ColdFusion 範例檔案的資料夾：
■ C:\Documents and Settings\your_user_name\My
Documents\local_sites\cafe_townsend \contact\coldfusion (Windows)
■ /Users/your_user_name/Documents/local_sites/cafe_townsend/
contact/coldfusion (Macintosh)
5. 按一下「選取」，完成定義 Dreamweaver 本機資料夾。
讓「網站定義」對話方塊保持開啟。接下來，將網站伺服器資料夾定義為
Dreamweaver 遠端資料夾。
定義本機資料夾之後，將網站伺服器資料夾定義為 Dreamweaver 遠端資料夾。
若要定義 Dreamweaver 遠端資料夾：

1. 在「網站定義」對話方塊的「進階」索引標籤中，從「類別」清單中選
取「遠端資訊」。
「遠端資訊」畫面便會出現。

2. 在「存取」彈出式選單中，選擇您要在伺服器之間來回移動檔案的方式：
透過區域網路 ( 「本機 / 區域網路」選項 ) 或使用 FTP。
注意
「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需其他選項的詳
細資訊，請參閱「使用 Dreamweaver」。
3. 輸入您在第 220 頁「建立根資料夾」中所建立網站伺服器資料夾的路徑或

FTP 設定。
資料夾可位在您的硬碟或遠端電腦上。即使資料夾是建立在您的硬碟上，
該資料夾仍然應視為遠端資料夾。如果選擇了「本機 / 區域網路」存取，
而且遠端資料夾是位於您的 Windows 硬碟上，下列範例顯示可能的「遠
端資料夾」路徑：
遠端資料夾：C:\CFusionMX7\wwwroot\MySampleApps
如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」中的「設定 FTP 存
取的遠端選項」。
讓「網站定義」對話方塊保持開啟。接下來，定義要處理動態網頁的資料夾。
指定處理動態網頁的位置
定義 Dreamweaver 遠端資料夾之後，請指定要處理動態網頁的資料夾。當您開
發應用程式時，Dreamweaver 會使用這個資料夾顯示動態網頁並連線到資料庫。
若要指定處理動態頁面的資料夾：
1. 在進階的「網站定義」對話方塊中，按一下「類別」清單中的「測試伺
服器」。
「測試伺服器」畫面便會出現。當您工作時，Dreamweaver 需要測試伺服
器的服務以產生並顯示動態內容。測試伺服器可以是您的本機電腦、開發
伺服器、開發用伺服器或實際執行伺服器，只要能處理 ColdFusion 頁面即
可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端
資訊」類別相同的設定 ( 請參閱第 222 頁「定義遠端資料夾」 )，因為這些
設定指向能夠處理 ColdFusion 頁面的伺服器。
2. 從「伺服器模式」彈出式選單中選取「ColdFusion」。
3. 在「存取」彈出式選單中，選取指定給存取遠端資料夾的相同方法 ( 「本
機 / 區域網路」或 FTP)。
Dreamweaver 便會輸入您在「遠端資訊」類別中指定的設定。讓設定保持
不變。
定義 Dreamweaver 網站 (ColdFusion) 223

4. 在「URL 前置詞」文字方塊中，輸入您會在網路瀏覽器中輸入的根 URL，
以要求網路應用程式的頁面。
為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔、
將其複製到網站的根資料夾，並試圖使用 URL 前置詞來要求它。
注意
Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接近的
URL 前置詞。但如果建議的 URL 前置詞不正確，請更正 URL 或輸入新的 URL
前置詞。如需詳細資訊，請參閱「使用 Dreamweaver」中的「設定 URL 前置詞」。
如果「遠端資料夾」文字方塊中指定的資料夾是
c:\CFusionMX7\wwwroot\MySampleApps，那麼 URL 前置詞應該如下
所示：
http://localhost:8500/MySampleApps/
注意
依預設值，ColdFusion 網站伺服器會執行於連接埠 8500。
5. 按一下「確定」，定義網站並關閉「網站定義」對話方塊，然後按一下

提示
URL 前置詞永遠應該「完成」，關閉「管理網站」對話方塊。

指定到一個目錄，而不
要指定網站上的特定頁指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。
面。此外，大小寫必須
和建立資料夾時使用的
完全相符。上傳範例檔案
指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。即使網站伺
服器是在本機電腦上執行，您也必須上傳檔案。
如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可
能無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以
「即時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁
面時，按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。
若要上傳範例檔案到網站伺服器：
1. 在「檔案」面板 ( 「視窗＞檔案」 ) 的「本機檢視」窗格中，選取網站的
根資料夾。
根資料夾是清單中的最上層資料夾。
2. 在「檔案」面板工具列中按一下藍色「上傳檔案」箭頭圖示，確認要上傳
整個網站。
定義的網站伺服器資料夾。
現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起
安裝的範例資料庫。

連線到範例資料庫 (ColdFusion)
安裝時，Dreamweaver 會將 Microsoft Access 範例資料庫複製到您的硬碟。本
節描述如何建立與範例資料庫的連線。
注意
如需有關連線到其他資料庫的詳細資訊，請參閱「使用 Dreamweaver」中的

「適用於 ColdFusion 開發人員的資料庫連線」。
若要建立資料庫連線：
1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。( 請參閱
第 225 頁「設定資料庫 ( 遠端電腦上的伺服器 )」 )。
2. 建立 ColdFusion 資料來源，並在 Dreamweaver 檢視連線 ( 請參閱第 226 頁
「連線到資料庫」 )。
設定資料庫 ( 遠端電腦上的伺服器 )
本節僅適用於在遠端電腦上執行的網站伺服器。如果您的網站伺服器與
Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至第 226 頁「連線
到資料庫」。
在嘗試連線到範例資料庫之前，請先將資料庫複製到遠端電腦的硬碟。如果您
將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb)
的路徑即如下所示：
■ C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tut
orial.mdb (Windows)
■ /Applications/Macromedia Dreamweaver 8/Tutorial_assets/
cafe_townsend/data/tutorial.mdb (Macintosh)
您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。
注意
如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。

檔案不宜放在公用資料夾中。
放置好資料庫之後，請建立 ColdFusion 資料來源。
連線到範例資料庫 (ColdFusion) 225

連線到資料庫
若要連線到資料庫，您必須建立指向範例資料庫檔案且名為 connTownsend 的
ColdFusion 資料來源。
若要連線到資料庫：
1. 在 Dreamweaver 中，開啟 ColdFusion 網頁，例如 send.cfm 和 view.cfm。
2. 在「資料庫」面板 ( 「視窗＞資料庫」 ) 中，按一下「RDS 登入」連結，
輸入 RDS 密碼，再按「確定」。
3. 按一下「資料庫」面板工具列上的「加號」 (+)，然後從彈出式選單中選
取「Microsoft Access 連線」。
注意
如果「加號」按鈕未出現在「資料庫」面板，請重新啟動 Dreamweaver。
4. 在「CF 資料來源名稱」文字方塊中，輸入 connTownsend。
5. 在「資料庫檔案」文字方塊中，輸入 tutorial.mdb 資料庫檔案的路徑。
如果 ColdFusion 是在本機電腦上執行，且 Dreamweaver 是安裝於預設的

位置，請使用下列路徑：
C:\Program Files\Macromedia\Dreamweaver
8\Tutorial_assets\cafe_townsend\data\tutorial.mdb
如果 ColdFusion 在遠端電腦上執行，請輸入您在第 225 頁「設定資料庫

( 遠端電腦上的伺服器 )」中的遠端電腦資料庫檔案路徑。
如需詳細資訊，請參閱 Dreamweaver 中的 ColdFusion 文件 ( 「說明＞使
用 ColdFusion」 )。

6. 按一下「確定」，建立這個連線。
「資料庫」面板中便會出現此連線。
如果連線未在面板中出現，請執行下列其中一項作業：
■ 檢查 Dreamweaver 用來處理動態網頁的資料夾設定 ( 請參閱第 223 頁
「指定處理動態網頁的位置」 )。
■ 請參閱「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中的
「疑難排解資料庫連線」。
連線到範例資料庫 (ColdFusion) 227

7. 展開 connTownsend 分支，然後展開 Tables 分支。
如果 Tables 分支包含三個如下所示的表格，表示範例 ColdFusion 應用程

式已經設定好，可供「Dreamweaver 入門」教學課程使用。如需詳細資
訊，請參閱第 177 頁「教學課程：開發網路應用程式」。
如果 Tables 分支不包含這些表格，請按一下「資料庫」面板工具列上的

「修改資料來源」圖示，重新檢視「設定和管理 ColdFusion MX」中的連
線參數。特別確定資料庫檔案的路徑是正確的。

附錄 D
ASP.NET 範例網站的設定
D
Macromedia Dreamweaver 8 有隨附 ASP.NET 範例頁面，可以讓您建立小型
的網路應用程式。本章說明一種建立範例應用程式的方法。
本章適用於 ASP.NET 開發人員。如需關於 ASP 的詳細資訊，請參閱第 241 頁
「ASP 範例網站的設定」。
Dreamweaver 網站。第三，將應用程式連結到資料庫。這個設定章節依照這三
個步驟進行。
ASP.NET 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . 230
設定系統 (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .231
定義 Dreamweaver 網站 (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . 234
連線到範例資料庫 (ASP.NET) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238
229
ASP.NET 開發人員的設定檢查清單
若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線
到資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中
詳細描述。
設定系統：
1. 確定您有網站伺服器。
2. 安裝 Microsoft .NET Framework。
230 ASP.NET 範例網站的設定

設定系統 (ASP.NET)
本節針對兩種常用的系統設定提供指示：其中一種是將 Windows 2000 或
Windows XP Professional 安裝於您的硬碟上，而另一種是將 Windows 2000
或 Windows XP Professional 安裝於遠端電腦上。如果您要使用不同的設定，
請參閱「使用 Dreamweaver」中的「設定網路應用程式」。
(༉ᎌҢܻġWindows 2000 ‫ܖ‬ġXP ‫ٺ‬Ң‫)ޱ‬ (ᎌҢܻġMacintoshġ‫ܖ‬ġWindowsġ‫ٺ‬Ң‫)ޱ‬
WINDOWS 2000 ໣ XP MAC ໣ WINDOWS PC
IIS 5 ໣ሩᅘᦹ቏
.NET Framework
᱿ℐἿዾᲿ⻞⫏ᅆप ℐ⭰໣ FTP એ‫ח‬
IIS 5 ໣ሩᅘᦹ቏
.NET Framework
設定系統 (ASP.NET) 231

1. 確定您有網站伺服器 ( 請參閱第 232 頁「檢查網站伺服器」 )。
2. 安裝 .NET Framework ( 請參閱第 232 頁「安裝 .NET Framework」 )。
3. 建立根資料夾 ( 請參閱第 233 頁「建立根資料夾」 )。
注意
安裝網站伺服器和 .NET Framework 的工作是只需做一次就好的工作。
檢查網站伺服器
若要發展和測試動態網頁，您需要網站伺服器。網站伺服器是提供網頁的軟體，
會回應網頁瀏覽器發出的要求。
ASP.NET 頁面只能用於一種網站伺服器：Microsoft IIS 5 或更新版本。因為
IIS 5 是 Windows 2000 和 Windows XP Professional 作業系統的服務，所以您
能使用這兩種版本的 Windows 來執行 ASP.NET 應用程式。
請確定 IIS 5 是在執行 Windows 2000 或 Windows XP Professional 的電腦上
安裝並執行。如果您有 Windows 2000 或 Windows XP Professional，即可使
用本機電腦做為伺服器。
如果想要快速查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含
C:\Inetpub 或 D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。
如果未安裝 IIS，請現在安裝。如需詳細資訊，請參閱第 210 頁「安裝 Internet
Information Server」。
安裝網站伺服器之後，請安裝 .NET Framework。
安裝 .NET Framework
若要處理動態網頁，您需要應用程式伺服器。應用程式伺服器是軟體，可以協
助網站伺服器處理包含伺服器端 Script 或標籤的網頁。當瀏覽器要求這類網頁
時，網站伺服器會將網頁交由應用程式伺服器處理，再傳送網頁給瀏覽器。如
需詳細資訊，請參閱第 197 頁「了解網路應用程式」。
在 ASP.NET 中，應用程式伺服器稱為 Microsoft .NET Framework 1.1。若要
開發 ASP.NET 網路應用程式，您還必須安裝 Microsoft .NET Framework 1.1
Software Development Kit (SDK)。請確定 Framework 和 SDK 是在執行 IIS 5
或更新版本的 Windows 2000 或 Windows XP Professional 系統上安裝並執行。

若要安裝 .NET Framework 和 SDK：
1. 檢視「新增或移除程式」對話方塊 ( 「開始＞控制台＞新增或移除程式」 )
中的應用程式清單，查看系統上是否已經安裝 .NET Framework。
如果列出 Microsoft .NET Framework 1.1，表示已安裝 Framework，不需
再次安裝它。跳到步驟 3。
2. 如果系統上未安裝 .NET Framework，請從 Microsoft 網站 ( 網址是
http://msdn.microsoft.com/netframework/downloads/framework1_1/)
安裝 Microsoft .NET Framework 1.1 Redistributable 套件，並遵循網站
上的安裝指示進行。
Framework 會安裝成 Windows 更新。
3. 從相同網站下載 Microsoft .NET Framework 1.1 Software Development
Kit (SDK)，並遵循安裝指示進行。
安裝 Framework 和 SDK 之後，請建立網路應用程式的根資料夾。
建立根資料夾
在安裝伺服器軟體之後，請針對執行 Microsoft IIS 系統的網路應用程式建立根
資料夾，並確定此根資料夾有必要的權限。
1. 在執行 IIS 的系統上，建立名為 MySampleApps 的資料夾。
注意
相符。
建立資料夾的建議位置為 C:\Inetpub\wwwroot\。依預設值，IIS 網站伺服

器會設定將 Inetpub\wwwroot 資料夾內的網頁，提供做為伺服器網頁。網
站伺服器將提供這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽
器所發出的 HTTP 要求。
2. 若要確定資料夾啟用 Script 權限，請啟動 IIS 系統管理工具 ( 在 Windows
XP 中選取「開始＞控制台」或「開始＞設定＞控制台」，然後按兩下「系
統管理工具」，再按兩下「Internet Information Services」 )。依序展開
「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。以滑鼠右鍵
按一下 MySampleApps 資料夾，選取彈出式選單中的「屬性」。確定有選
取「執行許可權」彈出式選單中的「僅 Script」選項 ( 基於安全因素，請
勿選取「Script 和執行檔」選項 )，然後按一下「確定」。
現在網站伺服器已在您根資料夾中設定完成提供伺服器網頁，回應網路瀏覽器
所發出的 HTTP 要求。
設定系統 (ASP.NET) 233

定義 Dreamweaver 網站
(ASP.NET)
以管理檔案。

料夾」 )。
3. 將網站伺服器的根資料夾定義為 Dreamweaver 遠端資料夾 ( 請參閱第 236 頁
「定義遠端資料夾」 )。
4. 指定處理動態網頁的資料夾 ( 請參閱第 236 頁「指定可以處理動態網頁的
位置」 )。
複製範例檔案
■ C:\Documents and Setting\your_user_name\My
注意


8\Tutorial_assets\ cafe_townsend\

料夾 )。
料夾。
複製 cafe_townsend 資料夾之後，將包含 ASP.NET 範例檔案的資料夾定義為
Dreamweaver 本機資料夾。

1. 在 Dreamweaver 中，選取「網站＞管理網站」。在「管理網站」對話方
塊中，按一下「新增」按鈕，然後選取「網站」。
3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ASP.NET。

ASP.NET 範例檔案的資料夾：
Documents\local_sites\cafe_townsend\contact\aspnet (Windows)
contact/aspnet (Macintosh)
定義 Dreamweaver 網站 (ASP.NET) 235


注意
「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需相關的詳細資
訊，請參閱「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 )。

FTP 設定。
遠端資料夾：C:\Inetpub\wwwroot\MySampleApps
指定可以處理動態網頁的位置
服器」。
伺服器、開發用伺服器或實際執行伺服器，只要能處理 ASP.NET 頁面即
可。在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端
資訊」類別相同的設定 ( 請參閱第 236 頁「定義遠端資料夾」 )，因為這些
設定指向能夠處理 ASP.NET 頁面的伺服器。

2. 從「伺服器模式」彈出式選單中選取 ASP.NET VB 或 ASP.NET C#。
不變。
為了要在您工作時顯示頁面上的即時資料，Dreamweaver 會建立暫存檔，
將它複製到網站的根資料夾並試圖使用 URL 前置詞要求它。
Dreamweaver 會依「網站定義」對話方塊中提供的資訊為基礎，猜測最接
近的 URL 前置詞。但是，所建議的 URL 前置詞可能不正確。如果
Dreamweaver 中的建議是錯誤的，請更正或輸入新的 URL 前置詞。如需
詳細資訊，請參閱「使用 Dreamweaver」中的「設定 URL 前置詞」。
例如，如果「遠端資料夾」文字方塊中指定的資料夾是
C:\Inetpub\wwwroot\MySampleApps，那麼 URL 前置詞應該如下所示：
http://localhost/MySampleApps/
提示
「完成」，關閉「管理網站」對話方塊。 URL 前置詞永遠應該
指定處理動態網頁的資料夾之後，將範例檔案上傳到網站伺服器。要指定網站上的特定頁
上傳範例檔案完全相符。
定義 Dreamweaver 網站 (ASP.NET) 237

根資料夾。
整個網站。
連線到範例資料庫 (ASP.NET)
注意
如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver」 ( 「說

明＞使用 Dreamweaver」 ) 中的「ASP.NET 開發人員的資料庫連線」。
1. 如果使用遠端電腦做為伺服器，請將範例資料庫複製到遠端電腦。( 請參閱
2. 在 Dreamweaver 中建立連線 ( 請參閱第 239 頁「建立資料庫連線」 )。
Dreamweaver 在同一部電腦一執行，請略過本節，直接跳至第 239 頁「建立
資料庫連線」。
在嘗試連線到範例資料庫之前，請先將資料庫複製到遠端電腦的硬碟。如果您
將 Dreamweaver 安裝於預設的位置，則本機硬碟上資料庫檔案 (tutorial.mdb)
的路徑即如下所示：
■ C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data\tut
orial.mdb (Windows)

您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資料夾。
在任一情況下，請在紙上寫下連至資料庫檔案的完整路徑。
注意
如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問

題。檔案不宜放在公用資料夾中。
資料庫安置妥當之後，請連線至資料庫。
建立資料庫連線
設定流程的最後一個步驟是建立資料庫的連線。
若要在 Dreamweaver 中建立資料庫連線：

1. 在 Dreamweaver 中開啟任一 ASP.NET 頁面，然後開啟「資料庫」面板
( 「視窗＞資料庫」 )。
2. 按一下「資料庫」面板上的加號 (+) 按鈕，並從彈出式選單中選取「OLE
DB 連線」。
「OLE DB 連線」對話方塊便會出現。
3. 輸入 connTownsend 做為連線名稱。
4. 按一下「樣版」按鈕。
「連線字串樣版」對話方塊便會出現。
5. 從樣版清單中，選取「Microsoft Access 2000 (Microsoft Jet 4.0 Provider)」
並按一下「確定」。
Dreamweaver 便會在「OLE DB 連線」對話方塊中新增連線字串樣版。這
個樣版包含連線字串中遺失資訊的預留位置。
6. 在「資料來源」文字方塊中，輸入您的硬碟上或遠端電腦硬碟上範例資料
庫檔案的完整路徑。如果 ASP.NET 是在本機電腦上執行，且 Dreamweaver
是安裝於預設的位置，請使用下列路徑：
C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\data\tutorial.mdb
注意
路徑會隨著 Dreamweaver 安裝的位置而跟著改變。
例如，您可能會為本機硬碟上的資料庫，輸入此路徑做為「資料來源」的值：
Data Source=C:\Program Files\Macromedia\Dreamweaver 8\Tutorial_asse
ts\data\tutorial.mdb;
或者您可能會為遠端伺服器上的資料庫，輸入此路徑：
Data Source=C:\users\Denman\Sites\data\tutorial.mdb;
連線到範例資料庫 (ASP.NET) 239

7. 刪除「使用者 ID」和「密碼」行。
Access 資料庫不需要使用者 ID 或密碼。
8. 按一下「測試」。
Dreamweaver 便會嘗試連線到資料庫。如果連線失敗，請執行下列動作：
■ 重複檢查連線到資料庫的路徑。
「指定可以處理動態網頁的位置」 )。
■ 選取「網站＞進階＞部署支援檔案」，以部署支援檔案。
「資料庫連線疑難排解」。
「資料庫」面板中便會出現新的連線。
現在，ASP.NET 範例應用程式已經設定好了，可以供「Dreamweaver 入門」
教學課程使用。如需詳細資訊，請參閱第 177 頁「教學課程：開發網路應用
程式」。

附錄 E
ASP 範例網站的設定
E
Macromedia Dreamweaver 8 有隨附 Microsoft Active Server Pages (ASP) 範例
網頁，可以建立小型的網路應用程式。本章將描述如何使用 Microsoft Internet
Information Server (IIS) 設定範例應用程式。如需關於這個網站伺服器的詳細
資訊，請參閱第 209 頁「安裝網站伺服器」。
本章僅適用於 ASP 開發人員。如需關於 ASP.NET 的詳細資訊，請參閱第 229 頁
「ASP.NET 範例網站的設定」。
個步驟進行。
ASP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242
設定系統 (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
定義 Dreamweaver 網站 (ASP). . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
連線到範例資料庫 (ASP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .251
241
ASP 開發人員的設定檢查清單
詳細描述。
設定系統：
2. 安裝應用程式伺服器。
3. 測試安裝。
242 ASP 範例網站的設定

設定系統 (ASP)
本節提供兩個最常用的 ASP 系統設定相關指示：其中一種是將 Microsoft IIS
安裝於您的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。
IIS
ℐ⭰໣ FTP એ‫ח‬
IIS
2. 必要的話，安裝應用程式伺服器 ( 請參閱第 244 頁「安裝 ASP 應用程式伺
服器」 )。
3. 測試安裝 ( 請參閱第 244 頁「測試安裝」 )。

注意
安裝網站伺服器和應用程式伺服器的工作可以一次完成。
設定系統 (ASP) 243

確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS (Macintosh
使用者需要在遠端 Windows 電腦上安裝 Microsoft IIS)。如果想要快速查出電
腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或
D:\Inetpub 資料夾。IIS 在安裝期間會建立這個資料夾。
如果未安裝 IIS，請現在安裝。如需相關說明，請參閱第 209 頁「安裝網站伺
服器」。
安裝網站伺服器之後，通常需要安裝應用程式伺服器。
安裝 ASP 應用程式伺服器
如果將 IIS 安裝於 Windows 的電腦上，就不需要獨立的 ASP 應用程式伺服器。
IIS 也會像 ASP 應用程式伺服器一樣運作。如需關於安裝和測試 IIS 的詳細資
訊，請參閱第 209 頁「安裝網站伺服器」。
您應該測試伺服器以確定它運作正常。
測試安裝
您可以執行測試頁面，測試 IIS 的 ASP 引擎。
若要測試 IIS 的 ASP 引擎：

1. 在 Dreamweaver 或任何文字編輯器中，建立純文字檔並命名為
timetest.asp。
2. 在這個檔案中，輸入下列程式碼：
<p>This page was created at <b>
<%= Time %>
</b> on the computer running ASP.</p>
此程式碼顯示在伺服器上處理頁面的時間。
3. 將檔案複製到執行 IIS 的 Windows 電腦中的 C:\Inetpub\wwwroot 資
料夾。

4. 在您的網路瀏覽器中，輸入測試網頁的 URL 然後按 Enter。
如果本機電腦執行 IIS，可以輸入下列 URL：

http://localhost/timetest.asp
測試頁面應該會開啟及顯示一天中的時間，如下所示：
所指出的時間即稱為動態內容，因為只要您一要求頁面，它就變更一次。按一
下瀏覽器上的「重新整理」按鈕，產生有不同時間的新頁面。
注意
查看原始碼 (Internet Explorer 中的「檢視＞原始檔」 )，確定頁面並非使用任何

用戶端的 JavaScript 來達到這個效果。
如果頁面未如預期般運作，請檢查以下可能的錯誤：
■ 檔案副檔名不是 .asp。
■ 您在瀏覽器「位址」文字方塊上輸入了頁面的檔案路徑
(C:\Inetput\wwwroot\timetest.asp)，而不是 URL ( 例如，
http://localhost/timetest.asp)。
如果您在瀏覽器中輸入檔案路徑 ( 如您在一般 HTML 頁面中所做的動作 )，
您將略過網站伺服器和應用程式伺服器。因此，您的頁面將無法由伺服器
處理。
■ URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如
http://localhost/timetest.asp/。
■ 頁面程式碼包含輸入錯誤。
安裝及測試伺服器軟體之後，請建立網路應用程式的根資料夾。
設定系統 (ASP) 245

建立根資料夾
注意
相符。

站伺服器將提供這個資料夾或其子資料夾中的任何頁面，回應網路瀏覽器
2. 若要確定該資料夾已啟用「讀取」和「Script」權限，請執行下列作業：
a. 啟動 IIS 系統管理工具 ( 在 Windows XP 中選取「開始＞控制台」或

「開始＞設定＞控制台」，然後按兩下「系統管理工具」，再按兩下
「Internet Information Services」 )。
b. 依序展開「本機電腦」清單、「網站」資料夾和「預設網站」資料夾。
c. 以滑鼠右鍵按一下 MySampleApps 資料夾，選取彈出式選單中的
「屬性」。
d. 確定有選取「執行許可權」彈出式選單中的「僅 Script」選項 ( 基於安
全因素，請勿選取「Script 和執行檔」選項 )。
e. 按一下「確定」。
設定系統之後，必須定義 Dreamweaver 網站。

定義 Dreamweaver 網站 (ASP)
以管理檔案。

料夾」 )。
位置」 )。
複製範例檔案
注意


定義 Dreamweaver 網站 (ASP) 247

料夾 )。
複製 cafe_townsend 資料夾之後，請將此資料夾定義為 Dreamweaver 本機
資料夾。
複製 cafe_townsend 資料夾之後，將包含 ASP 範例檔案的資料夾定義為

3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend ASP。

ASP 範例檔案的資料夾：
Documents\local_sites\cafe_townsend\contact\asp (Windows)
contact/asp (Macintosh)


「遠端資訊」對話方塊便會出現。
2. 在「存取」彈出式選單中，選擇要如何在伺服器之間來回移動檔案：透過
區域網路 ( 「本機 / 區域網路」選項 ) 或使用 FTP。
注意
「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需這些選項的詳

FTP 設定。
服器」。
伺服器、執行伺服器或生產伺服器，只要能處理 ASP 頁面即可。在許多情
況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」類別相
同的設定 ( 請參閱第 249 頁「定義遠端資料夾」)，因為這些設定指向能夠
處理 ASP 頁面的伺服器。
定義 Dreamweaver 網站 (ASP) 249

2. 從「伺服器模式」彈出式選單中選取 ASP JavaScript 或 ASP VBScript。
不變。

提示
URL 前置詞永遠應該
指定到一個目錄，而不「完成」，關閉「管理網站」對話方塊。
要指定網站上的特定頁指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器。

根資料夾。
整個網站。
連線到範例資料庫 (ASP)
注意
如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver 」中的

「適用於 ASP 開發人員的資料庫連線」。
1. 如果使用遠端電腦做為伺服器，請將範例資料庫設定到遠端電腦 ( 請參閱
在嘗試連線到範例資料庫之前，請先在執行網站伺服器的遠端電腦上執行下列
工作：將範例資料庫複製到電腦硬碟中，並在電腦上建立指向資料庫的 DSN。
連線到範例資料庫 (ASP) 251

若要在遠端電腦上設定範例資料庫：
1. 將資料庫複製到遠端電腦的硬碟上。如果您將 Dreamweaver 安裝於預設的
位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：
■ C:\Program
Files\Macromedia\Dreamweaver 8\Tutorial_assets\cafe_townsend\data
\tutorial.mdb (Windows)
您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資
料夾。
注意
如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問

題。檔案不宜放在公用資料夾中。
2. 確定 4.0 版或以上的 Microsoft Access 驅動程式，已安裝在遠端電腦上。
若要查出驅動程式是否已安裝，請參閱「使用 Dreamweaver」中的「檢

視安裝在 Windows 系統上的 ODBC 驅動程式」。
如果尚未安裝驅動程式，請下載並於遠端電腦上安裝 Microsoft Data
Access Components (MDAC) 2.5 和 2.7 套件。您可以從 Microsoft 網站
( 網址是 http://msdn.microsoft.com/data/mdac/downloads/) 免費下載
MDAC。這些套件包含最新的 Microsoft 驅動程式，包括 Microsoft Access
驅動程式。
注意
安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5。
3. 在遠端電腦上設定稱為 CafeTownsend 的 DSN，並指向範例資料庫。
如需相關說明，請參閱 Microsoft 網站上的下列文章：

■ 如果遠端電腦執行 Windows 2000，請參閱文件 300596，網址為
support.microsoft.com/default.aspx?scid=kb;en-us;300596。
■ 如果遠端電腦執行 Windows XP，請參閱文件 305599，網址為
妥當配置資料庫、資料庫驅動程式和 DSN 之後，請在 Dreamweaver 中建立資
料庫連線。

如果網站伺服器執行於本機電腦上，您可以使用 Dreamweaver 在安裝時所建
立的資料來源名稱 (DSN)，快速連線到範例資料庫。若要瞭解更多有關 DSN
的資訊，請參閱「使用 Dreamweaver」中的「使用 DSN」。

1. 在 Dreamweaver 中開啟任何 ASP 頁面，然後開啟「資料庫」面板 ( 「視
窗＞資料庫」 )。
2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中，選取「資料來源名稱
(DSN)」。
「資料來源名稱 (DSN)」對話方塊便會出現。
4. ( 僅適用於 Windows) 請執行下列其中一項作業：
■ 如果伺服器執行於本機電腦上，請選取「使用本機 DSN」選項。

■ 如果伺服器執行於遠端系統上，請選取「使用測試伺服器上的 DSN」
選項。
Macintosh 使用者可以忽略這個步驟，因為所有的資料庫連結都是使用測
試伺服器上的 DSN。
5. 按一下「DSN」按鈕，並從 DSN 清單中選取「CafeTownsend」。
如果您在 Windows 電腦上使用 Dreamweaver，在安裝期間，Dreamweaver

會建立指向 Dreamweaver 應用程式資料夾的 Microsoft Access 資料庫、名
為 CafeTownsend 的 DSN。
■ 重複檢查 DSN。
■ 請參閱「使用 Dreamweaver」中的「資料庫連線疑難排解」。
現在，ASP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學
課程使用。如需詳細資訊，請參閱第 177 頁「教學課程：開發網路應用程式」。
連線到範例資料庫 (ASP) 253

附錄 F
JSP 範例網站的設定
F
Macromedia Dreamweaver 8 隨附有 Java Server Pages (JSP) 範例網頁，可以讓
您建立小型的網路應用程式。本章將描述使用 Microsoft Internet Information
Server (IIS) 設定範例應用程式的方法。如需關於這些網站伺服器的詳細資訊，
請參閱第 209 頁「安裝網站伺服器」。如果您使用不同的網站伺服器，請參閱
「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」 ) 中的「設定網路應用
程式」。
個步驟進行。
JSP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
設定系統 (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 257
定義 Dreamweaver 網站 (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
連線到範例資料庫 (JSP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
255
JSP 開發人員的設定檢查清單
詳細描述。
設定系統：
2. 安裝 JSP 應用程式伺服器。
1. 安裝 JDBC-ODBC 橋接驅動程式 .
256 JSP 範例網站的設定

設定系統 (JSP)
本節針對兩種常用的系統設定提供指示：其中一種是將 Microsoft IIS 安裝於您
的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。如果您要使用
不同的設定，請參閱「使用 Dreamweaver」中的「設定網路應用程式」。
IIS
JSP ະᮢỄೣ̗ሺ‫ݽ‬
IIS
JSP ະᮢỄೣ̗ሺ‫ݽ‬
設定系統 (JSP) 257

2. 安裝 JSP 應用程式伺服器 ( 請參閱第 258 頁「安裝 JSP 應用程式伺服器」)。
注意
確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS (Macintosh
使用者需要在遠端 Windows 電腦上安裝 Microsoft IIS)。如果想要快速查出電
腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或
服器」。
安裝網站伺服器之後，請安裝應用程式伺服器。
安裝 JSP 應用程式伺服器
確定已安裝 JSP 應用程式伺服器且在執行 IIS 的系統上執行 (IIS 可能位在本
機硬碟或遠端電腦上 )。
如果您沒有 JSP 應用程式伺服器，可以從 Macromedia 網站下載並安裝功能
齊全的 JSP 應用程式伺服器 - Macromedia JRun 開發人員版，網址為
www.macromedia.com/go/jrun/。
JRun 適用於 Windows 和 Macintosh。但是本手冊不介紹如何在 Macintosh 上
使用 JRun。

若要安裝 JRun：
1. 如果可以，請使用「管理員」帳號登入 Windows 系統。
2. 關閉所有開啟的應用程式。
3. 按兩下 JRun 開發人員版安裝程式檔。

開頭顯示畫面便會出現。
4. 如果系統上沒有「Java 執行階段環境」 (JRE)，請選取開頭顯示畫面上的
選項來安裝。
由於 JRun 應用程式伺服器依賴 Java，所以必須在要執行應用程式伺服器
的系統上，先安裝 JRE。安裝 JRE 之後，您就可以安裝 JRun 應用程式伺
服器。
5. 選取開頭顯示畫面上的選項來安裝 JRun。
6. 依照螢幕上的說明，完成程式的安裝與測試。
7. 完成安裝之後，請選取「開始＞程式集＞ Macromedia JRun 4 ＞網站伺服

器設定」，以建立 IIS 網站伺服器的 JRun 連接器。
如需相關說明，請參閱 JRun 文件。
安裝及啟動 JRun 之後，請建立網路應用程式的根資料夾。
建立根資料夾
注意
相符。

站伺服器將提供這個資料夾或其子資料夾中的任何頁面，回應網路瀏覽器
2. 若要確定該資料夾已啟用「讀取」和「指令碼」權限，請執行下列其中一
項作業：
設定系統 (JSP) 259

「屬性」。
定義 Dreamweaver 網站 (JSP)
以管理檔案。

料夾」 )。
位置」 )。

複製範例檔案
注意


料夾 )。
料夾。
定義 Dreamweaver 網站 (JSP) 261

複製 cafe_townsend 資料夾之後，將包含 JSP 範例檔案的資料夾定義為

3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend JSP。

JSP 範例檔案的資料夾：
Documents\local_sites\cafe_townsend \contact\jsp (Windows)
contact/jsp (Macintosh)

注意
「存取」彈出式選單中尚有其他選項，但本手冊不會加以討論。如需這些選項的詳

FTP 設定。
如需 FTP 的詳細資訊，請參閱「使用 Dreamweaver」 ( 說明＞使用
Dreamweaver」中的「設定 FTP 存取的遠端選項」。
服器」。
伺服器、開發用伺服器或實際執行生產伺服器，只要能處理 JSP 頁面即可。
在許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資
訊」類別相同的設定 ( 請參閱第 262 頁「定義遠端資料夾」 )，因為這些設
定指向能夠處理 JSP 頁面的伺服器。
2. 從「伺服器模式」彈出式選單中選取 JSP。
不變。
定義 Dreamweaver 網站 (JSP) 263

提示
URL 前置詞永遠應該「完成」，關閉「管理網站」對話方塊。

要指定網站上的特定頁指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器。
根資料夾。
整個網站。

連線到範例資料庫 (JSP)
注意
如需連線到另一個資料庫的詳細資訊，請參閱「使用 Dreamweaver 」中的

「適用於 JSP 開發人員的資料庫連線」。
1. 安裝橋接驅動程式 ( 請參閱第 265 頁「安裝橋接驅動程式」 )。
2. 如果使用遠端電腦做為伺服器，請將範例資料庫設定到遠端電腦 ( 請參閱
安裝橋接驅動程式
在嘗試連線到範例資料庫之前，請先在執行網站伺服器的電腦上安裝 Sun
JDBC-ODBC Bridge 驅動程式。橋接驅動程式讓您使用 Windows 資料來源名
稱 (DSN) 來建立連結。這個驅動程式隨附適用於 Windows 的 Sun Java 2 SDK
標準版。
若要知道您是否已經有 Java 2 SDK 以及這個驅動程式，請檢查硬碟中是否有
下列其中一個目錄：
C:\jdk1.2.x
C:\jdk1.3.x
C:\j2sdk1.4.x
注意
「Java 2」一詞係指 Java 1.2 和更新版本。
如果您沒有 SDK，請從 Sun 網站下載，網址為 http://java.sun.com/j2se/。在

下載安裝檔案之後，按兩下該檔案以執行安裝程式。依照螢幕上的說明，並確
定已從「選取組件」對話方塊中選取「Java 2 執行階段環境」組件。依預設
值，這個組件應該會選取。當您安裝 SDK 時，該驅動程式會自動安裝。
雖然在開發階段使用低階的資料庫系統，例如 Microsoft Access，就已經足夠，
但是 Sun JDBC-ODBC Bridge 驅動程式並不適用於生產階段。例如，它一次
只讓一個 JSP 頁面連結到資料庫 ( 即不支援多個執行緒同時使用 )。如需有關
驅動程式限制的詳細資訊，請參閱「Macromedia 支援中心」的 TechNote
17392，網址為 www.macromedia.com/go/17392。
連線到範例資料庫 (JSP) 265

安裝橋接驅動程式之後，請依需要設定資料庫，然後在 Dreamweaver 中建立
資料庫連線。
在嘗試連線到範例資料庫之前，請先在執行網站伺服器的遠端電腦上執行下列
工作：將範例資料庫複製到電腦硬碟中，在電腦上建立指向資料庫的 DSN 並
在電腦上安裝 Sun JDBC-ODBC Bridge 驅動程式。
若要在遠端電腦上設定範例資料庫：
1. 將資料庫複製到遠端電腦的硬碟上。如果您將 Dreamweaver 安裝於預設的
位置，則本機硬碟上資料庫檔案 (tutorial.mdb) 的路徑即如下所示：
■ C:\Program
\tutorial.mdb (Windows)
您可以將檔案放置到遠端電腦的任一資料夾內，也可以為它建立新的資
料夾。
注意
如果您將資料庫檔案放在遠端電腦的 Inetpub 資料夾內，可能會有安全上的問題。

檔案不宜放在公用資料夾中。
2. 確定 4.0 版或以上的 Microsoft Access 驅動程式已安裝在遠端電腦上。
若要查出驅動程式是否已安裝，請參閱「使用 Dreamweaver」中的「檢

視安裝在 Windows 系統上的 ODBC 驅動程式」。
如果尚未安裝驅動程式，請下載並於遠端電腦上安裝 Microsoft Data
Access Components (MDAC) 2.5 和 2.7 套件。您可以從 Microsoft 網站
( 網址是 http://msdn.microsoft.com/data/mdac/downloads/) 免費下載
MDAC。這些套件包含最新的 Microsoft 驅動程式，包括 Microsoft Access
驅動程式。
注意
安裝 MDAC 2.7 之前，請先安裝 MDAC 2.5。

3. 在遠端電腦上設定稱為 CafeTownsend 的 DSN，並指向範例資料庫。
如需相關說明，請參閱 Microsoft 網站上的下列文章：

■ 如果遠端電腦執行 Windows 2000，請參閱文件 300596，網址為
■ 如果遠端電腦執行 Windows XP，請參閱文件 305599，網址為
4. 確定遠端電腦上有安裝 Sun JDBC-ODBC Bridge 驅動程式。
您將使用這個驅動程式以及 DSN，建立資料庫連結。如需相關說明，請參
閱第 265 頁「安裝橋接驅動程式」。
妥當配置資料庫、DSN 和橋接驅動程式之後，請在 Dreamweaver 中建立資料
庫連線。

1. 在 Dreamweaver 中開啟任何 JSP 頁面，然後開啟「資料庫」面板 ( 「視
2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「Sun JDBC-ODBC
驅動程式 (ODBC 資料庫 )」。
「Sun JDBC-ODBC 驅動程式 (ODBC 資料庫 )」對話方塊便會出現。
4. ( 僅適用於 Windows) 請執行下列其中一項作業：
■ 如果伺服器執行於本機電腦上，請選取「使用這台電腦上的驅動程式」
選項。
■ 如果伺服器執行於遠端系統上，請選取「使用測試伺服器上的驅動程
式」選項。
Macintosh 使用者可以忽略這個步驟，因為所有的資料庫連結都是使用測
試伺服器上的驅動程式。
5. 將 URL 文字方塊中的 [odbc dsn] 預留位置取代為 CafeTownsend。
URL 文字方塊應該看起來像這樣：
jdbc:odbc:CafeTownsend
如果您在 Windows 電腦上使用 Dreamweaver，在安裝期間，Dreamweaver

會建立指向 Dreamweaver 應用程式資料夾的 Microsoft Access 資料庫、名
為 CafeTownsend 的 DSN。
連線到範例資料庫 (JSP) 267

■ 重複檢查 DSN 和另一個連線參數。
現在，JSP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課
程使用。如需詳細資訊，請參閱第 177 頁「教學課程：開發網路應用程式」。

附錄 G
PHP 範例網站的設定
G
Macromedia Dreamweaver 8 有隨附 PHP 範例頁面，可以讓您建立小型的網路
應用程式。本章將描述使用 Microsoft Internet Information Server (IIS) 設定範
例應用程式的方法。如需關於這個網站伺服器的詳細資訊，請參閱第 209 頁「安
裝網站伺服器」。如果您使用不同的網站伺服器，請參閱「使用 Dreamweaver」
中的「設定網路應用程式」。
如果是 Macintosh 使用者，您可以使用與作業系統一起安裝的 Apache 網站伺服
器和 PHP 應用程式伺服器，於本機系統中連接遠端 PHP 伺服器或開發 PHP 網
站。如需設定資訊，請參閱下列網站：
■ http://developer.apple.com/internet/opensource/php.html
■ www.entropy.ch/software/macosx/php/
設定網路應用程式有三個步驟。第一，先設定您的系統。第二，定義 Dreamweaver
網站。第三，將應用程式連結到資料庫。這本設定手冊依照這三個步驟進行。
PHP 開發人員的設定檢查清單 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
設定系統 (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
定義 Dreamweaver 網站 (PHP). . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
連線到範例資料庫 (PHP) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282
269
PHP 開發人員的設定檢查清單
若要設定網路應用程式，您必須先設定系統、定義 Dreamweaver 網站並連線到
資料庫。本節提供每一項工作的檢查清單。這些工作將在本章的其他部份中詳
細描述。
設定系統：
2. 安裝 PHP 應用程式伺服器。
3. 測試安裝。
1. 建立 MySQL 範例資料庫。
設定系統 (PHP)
您必須先設定系統，才能執行 PHP 頁面。尤其要注意的是，您必須確定網站伺
服器和 PHP 應用程式伺服器已經安裝並執行於系統上，然後必須建立 PHP 檔
案的根資料夾。
270 PHP 範例網站的設定

設定 Windows 系統 (PHP)
本節針對兩種常用的 Windows 設定提供指示：其中一種是將 Microsoft IIS 安裝
於您的硬碟上，而另一種是將 IIS 安裝於遠端的 Windows 電腦上。如果您要使
用不同的設定，請參閱「使用 Dreamweaver」中的「設定網路應用程式」。
IIS
PHP ະᮢỄೣ̗ሺ‫ݽ‬
IIS
PHP ະᮢỄೣ̗ሺ‫ݽ‬
1. 確定您有網站伺服器 ( 請參閱第 272 頁「檢查網站伺服器 (Windows)」)。
2. 安裝 PHP 應用程式伺服器 ( 請參閱第 272 頁「安裝 PHP 應用程式伺服器
(Windows)」 )。
3. 測試安裝 ( 請參閱第 273 頁「測試安裝 PHP (Windows)」 )。
4. 建立根資料夾 ( 請參閱第 275 頁「建立根資料夾 (Windows)」 )。

注意
設定系統 (PHP) 271

檢查網站伺服器 (Windows)
確定硬碟或遠端 Windows 電腦上安裝且執行的是 Microsoft IIS 如果想要快速
查出電腦是否有安裝 IIS，可以查看資料夾結構，看看是否包含 C:\Inetpub 或
服器」。
安裝網站伺服器之後，請安裝應用程式伺服器。
安裝 PHP 應用程式伺服器 (Windows)

確定已安裝 PHP 應用程式伺服器且在執行 IIS 的系統上執行 (IIS 可能位於硬
碟或遠端 Windows 電腦上 )。您可以從 PHP 網站 ( 網址是 www.php.net/
downloads.php) 下載並安裝此伺服器。
對於 PHP 5，Windows 安裝程式依預設不會安裝或啟用讓 PHP 搭配 MySQL
資料庫伺服器使用的擴充功能。您必須手動安裝並啟用它。
若要在 Windows 系統上安裝 PHP 5：

1. 如果可以，請使用「管理員」帳號登入 Windows 系統。
2. 從 PHP 網站 ( 網址是 www.php.net/downloads.php) 下載 Windows PHP
5.x 安裝程式。
3. 按兩下您所下載的安裝程式檔，並依照螢幕上的安裝指示執行。
4. 成功安裝 PHP 之後，請從 PHP 網站 ( 網址是 www.php.net/
downloads.php) 下載 Windows PHP 5.x zip 套件，然後在硬碟的暫存資料
夾中解壓縮此套件。
此 zip 套件包含與 MySQL 搭配使用所需的擴充功能。
5. 在包含解壓縮檔案的暫存資料夾中，尋找名為 ext 的資料夾，並將它複製
到 C:\PHP\ 資料夾。
ext 資料夾包含常用的 PHP 擴充功能，包括 MySQL 擴充功能。

6. 在 C:\Windows 資料夾中，尋找名為 php.ini 的檔案，並在「記事本」中
開啟它。
您必須編輯這個檔案，以啟用 MySQL 擴充功能。
7. 在 php.ini 檔案中尋找下面這一行：
extension_dir = "./"
這一行會指定 PHP 尋找擴充功能的位置。
8. 如下所示，編輯此行：
extension_dir = "C:\PHP\ext\"
9. 在 php.ini 檔案中尋找下面這一行：
提示
請勿省略最後一個
;extension=php_mysql.dll
斜線。
行首的分號 (;) 會告訴 PHP 忽略此行。
10. 刪除行首分號，以啟用擴充功能。
extension=php_mysql.dll
11. 儲存並關閉 php.ini 檔案。
12. 在包含解壓縮 PHP 檔案的暫存資料夾中，尋找名為 libmysql.dll 的檔案，
並將它複製到 C:\Windows\system32 資料夾。
IIS 需要這個檔案，才能與 PHP 5 和 MySQL 搭配使用。
13. 重新啟動 IIS。
如需啟用 MySQL 擴充功能的詳細資訊，請參閱 PHP 網站，網址是

www.php.net/manual/en/ref.mysql.php。如需應用程式伺服器的詳細資訊，請
參閱 PHP 文件，您可以從 PHP 網站下載該文件，網址為 www.php.net/
download-docs.php。
安裝 PHP 之後，您可以測試伺服器以確定運作正常。
測試安裝 PHP (Windows)

您可以執行測試頁面來測試 PHP 應用程式伺服器。
若要測試 PHP 應用程式伺服器：

timetest.php。
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>

3. 將檔案複製到執行 IIS 的 Windows 電腦中的 C:\Inetpub\wwwroot 資
料夾。
4. 在網頁瀏覽器中，輸入測試網頁的 URL 然後按 Enter。
如果您在本機電腦上安裝了 PHP，就可以輸入下列 URL：

http://localhost/timetest.php
測試頁面應該會開啟及顯示一天中的時間，如下所示：
注意
查看原始碼 (Internet Explorer 中的「檢視＞原始檔」 )，確定頁面並非使用任何

用戶端的 JavaScript 來達到這個效果。
■ 檔案副檔名不是 .php。
■ 您在瀏覽器「位址」文字方塊上輸入了頁面的檔案路徑
(C:\Inetput\wwwroot\timetest.php)，而不是 URL ( 例如，http://
localhost/timetest.php)。
如果您在瀏覽器中輸入檔案路徑 ( 如您在一般 HTML 頁面中所做的動作 )，
您將略過網站伺服器和應用程式伺服器。因此，您的頁面將無法由伺服器
處理。

■ URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如 http://
localhost/timetest.php/。
安裝及測試伺服器軟體之後，請建立網路應用程式的根資料夾。
建立根資料夾 (Windows)
注意
相符。

站伺服器將提供這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽
器所發出的 HTTP 要求。
2. 若要確定該資料夾已啟用「讀取」和「指令碼」權限，請執行下列其中一
項作業：
「屬性」。
設定系統之後，您必須定義 Dreamweaver 網站 ( 請參閱第 277 頁「定義
Dreamweaver 網站 (PHP)」 )。

設定 Macintosh 系統 (PHP)
如果是 Macintosh 使用者，您可以使用與作業系統一起安裝的 Apache 網站伺服
器和 PHP 應用程式伺服器，於您的電腦中執行 PHP 頁面。設定系統的動作包
含：確定網站伺服器和 PHP 應用程式伺服器是在正常運作中，然後建立 PHP
檔案的根資料夾。
■ 第 276 頁「測試安裝 PHP (Macintosh)」
■ 第 277 頁「建立根資料夾 (Macintosh)」
如需 Macintosh 版本 Apache 和 PHP 的詳細資訊，請參閱下列網站：
■ http://developer.apple.com/internet/opensource/php.html
■ www.entropy.ch/software/macosx/php/
測試安裝 PHP (Macintosh)

您可以在 Macintosh 上執行測試頁面來測試 Apache 網站伺服器和 PHP 應用程
式伺服器。
不過，若要使用網站伺服器來服務 PHP 頁面和 MySQL 資料庫內容，您必須先
設定伺服器才能使用 PHP 和 MySQL。如需這個程序的詳細資訊，請參閱
www.macromedia.com/go/php_macintosh。
若要測試 Apache 網站伺服器和 PHP 應用程式伺服器：

1. 依照 Macromedia 網站上文件的說明，設定伺服器。
timetest.php。
<?php echo date("h:i:s a", time()); ?>
</b> on the computer running PHP.</p>
4. 將檔案複製到 Macintosh 中的 /Users/your_user_name/Sites 資料夾。
這個 Sites 資料夾是您個人的 Apache 網站伺服器根資料夾。

5. 在網路瀏覽器中，輸入下列 URL 並按 Return：
http://localhost/~your_user_name/timetest.php
測試頁面應該會開啟及顯示一天中的時間。

注意
查看原始碼 (Safari 中的「檢視＞檢視原始檔」 )，確定頁面並非使用任何用戶端

的 JavaScript 來達到這個效果。
■ 檔案副檔名不是 .php。
■ URL 包含輸入錯誤。檢查錯誤並確定檔名之後未跟著斜線，例如 http://
localhost/~your_user_name/timetest.php/。同時也請確認在使用者名稱前
有波狀符號 (~)。
■ Apache 伺服器尚未執行。查看「共用」類別中的「系統偏好設定」，看
看是否已經啟用「個人網頁共用」。
測試及測試伺服器軟體之後，請建立網路應用程式的根資料夾。
建立根資料夾 (Macintosh)
安裝伺服器軟體之後，請在 Macintosh 中建立網路應用程式的根資料夾。
■ 在 /Users/your_user_name/Sites 資料夾中建立稱為 MySampleApps 的資
料夾。
Apache 將處理這個資料夾或其子資料夾中的任何頁面，以回應網路瀏覽器
定義 Dreamweaver 網站 (PHP)
設定系統之後，請將範例檔案複製到本機資料夾，並定義 Dreamweaver 網站以
管理檔案。

料夾」 )。
定義 Dreamweaver 網站 (PHP) 277

4. 指定處理動態網頁的資料夾 ( 請參閱第 280 頁「指定可以處理動態網頁的位
置 (PHP)」 )。
複製範例檔案
如果您尚未這樣做，請將範例檔案從 Dreamweaver 應用程式資料夾複製到硬碟
上的資料夾。
注意


料夾 )。
料夾。

複製 cafe_townsend 資料夾之後，將包含 PHP 範例檔案的資料夾定義為

3. 在「網站名稱」文字方塊中，輸入 Cafe Townsend PHP。

PHP 範例檔案的資料夾：
Documents\local_sites\cafe_townsend\contact\php (Windows)
contact/php (Macintosh)

注意
「存取」彈出式選單中尚有其他選項，但本章並不會討論這些選項。如需這些選項
的詳細資訊，請參閱「使用 Dreamweaver」。

3. 輸入您在第 275 頁「建立根資料夾 (Windows)」中所建立網站伺服器資料
夾的路徑或 FTP 設定。
在 Macintosh 上，資料夾應該如下所示：
遠端資料夾：/Users/your_user_name/Sites/MySampleApps
指定可以處理動態網頁的位置 (PHP)
服器」。
伺服器、開發用伺服器或實際執行伺服器，只要能處理 ASP 頁面即可。在
許多情況下，包含設定 Cafe Townsend 網站，您可以使用與「遠端資訊」
類別相同的設定 ( 請參閱第 279 頁「定義遠端資料夾」)，因為這些設定指
向能夠處理 PHP 頁面的伺服器。
2. 從「伺服器模式」彈出式選單中選取「PHP MySQL」。
不變。

詳細資訊，請參閱「使用 Dreamweaver」 ( 「說明＞使用 Dreamweaver」
中的「設定 URL 前置詞」。
對於 Windows 中的 PHP 範例內容，前置詞應該如下所示：
URL 前置詞：http://localhost/MySampleApps/
在 Macintosh 上，前置詞應該如下所示：
URL 前置詞：http://localhost/~your_user_name/MySampleApps/
提示
「完成」，關閉「管理網站」對話方塊。 URL 前置詞永遠應該
指定處理動態頁面的資料夾之後，將範例檔案上傳到網站伺服器。要指定網站上的特定頁
上傳範例檔案完全相符。
如果您不上傳檔案，像「即時資料」檢視和「在瀏覽器中預覽」等功能，可能
無法以動態頁面方式正常執行。例如，因為影像檔還不在伺服器上，所以「即
時資料」檢視中的影像連結可能中斷。同樣地，當在瀏覽器中預覽主要頁面時，
按一下連至細節頁面的連結，如果伺服器遺漏細節頁面，將會造成錯誤。
根資料夾。
整個網站。
現在已定義了 Dreamweaver 網站。下個步驟是要連線到與 Dreamweaver 一起安
裝的範例資料庫。

連線到範例資料庫 (PHP)
安裝時，Dreamweaver 會將 SQL Script 複製到您的硬碟。您可以使用這個 Script
自動建立範例 MySQL 資料庫。本節描述如何建立與範例資料庫的連線。
本節假設您已經在本機或遠端電腦上安裝並設定 MySQL。若要下載並安裝資料
庫系統，請造訪 MySQL 網站，網址為 www.mysql.com。
1. 使用 SQL Script 建立 MySQL 範例資料庫 ( 請參閱第 282 頁「建立 MySQL
資料庫」 )。
建立 MySQL 資料庫
Dreamweaver 範例檔案包含 SQL Script，可以建立及填入 MySQL 範例資料庫。
在開始之前，確定 MySQL 已在您的本機或遠端電腦上安裝且設定好。請從
MySQL 網站 ( 網址是 http://dev.mysql.com/downloads/) 下載最新版本。為了開
發目的，請下載並安裝 MySQL 資料庫伺服器的 Windows Essentials 版。
若要建立範例 MySQL 資料庫：

1. 將 SQL Script 檔案 insert.sql 複製到有安裝 MySQL 的電腦中的適當資料夾。
如果您將 Dreamweaver 安裝於預設的位置， Script 檔案的路徑即如下
所示：
■ C:\Program
\insert.sql (Windows)
cafe_townsend/data/insert.sql (Macintosh)
如果是在 Windows 電腦上執行 MySQL，請將 insert.sql Script 複製到
Program Files\MySQL\MySQL Server 4.x\bin。如果是在 Macintosh 電腦上執
行 MySQL，請將 insert.sql Script 複製到主資料夾的 Documents 資料夾中。
2. 在已安裝 MySQL 的電腦上，啟動 MySQL Command Line Client
(Windows) 或 Terminal (Macintosh)。
■ 在 Windows 上，選取「開始＞ MySQL ＞ MySQL Server 4.x ＞ MySQL
Command Line Client」，以啟動 MySQL Command Line Client。
■ 在 Macintosh 上，您可以到「應用程式」資料夾中開啟「公用程式」
資料夾，並且按兩下 Terminal，以啟動 Terminal。

3. 在 Windows，輸入使用者名稱 ( 如果有的話 ) 和密碼，然後按 Enter 鍵。
MySQL 用戶端命令提示便會出現，如下所示：
mysql>
4. 在 Macintosh 上，輸入下列命令：
mysql -uUser -pPassword
例如，如果您的 MySQL 使用者名稱 ( 也稱為帳號名稱 ) 和密碼為 Tara 和

Telly3，請輸入下列命令：
mysql -uTara -pTelly3
如果您沒有密碼，請如下所示省略 -p 引數：
mysql -uTara
如果您在設定 MySQL 安裝時沒有定義使用者名稱，請如下所示輸入 root

當做使用者名稱：
mysql -uroot
MySQL 用戶端命令提示便會出現，如下所示：
mysql>
5. 在 MySQL 提示處輸入下列命令，建立新資料庫：
mysql>CREATE DATABASE CafeTownsend;
MySQL 會建立新的資料庫，但尚未包含任何表格或記錄。
6. 在提示處輸入下列命令，登出 MySQL 用戶端：
mysql>quit;
7. (Windows) 選取「開始＞執行」，並在「執行」對話方塊中輸入 cmd，以

開啟 Windows 命令提示字元。
8. 在系統命令提示中，填入 MySQL 中的新 CafeTownsend 資料庫。
在 Windows 中，使用下列命令：
cd \
cd Program Files\MySQL\MySQL Server 4.x\bin
mysql -uUser -pPassword CafeTownsend < insert.sql
在 Macintosh 上，使用下列命令：
mysql -uUser -pPassword CafeTownsend < ~/Documents/
insert.sql
這個命令使用 insert.sql 檔案，將表格和記錄新增至您在步驟 5 所建立的

CafeTownsend 資料庫。
建立 MySQL 資料庫之後，在 Dreamweaver 中建立連至該資料庫的資料庫連線。
連線到範例資料庫 (PHP) 283


1. 在 Dreamweaver 中開啟任何 PHP 頁面，然後開啟「資料庫」面板 ( 「視
2. 按一下面板上的加號 (+) 按鈕，並從彈出式選單中選取「MySQL 連線」。
「MySQL 連結」對話方塊便會出現，
4. 在「MySQL 伺服器」文字方塊中，指定裝載 MySQL 的電腦。

輸入 IP 位址或伺服器名稱。如果 MySQL 與 Dreamweaver 在同一台電腦
上執行時，請輸入 localhost。
5. 輸入 MySQL 使用者名稱和密碼。
如果設定 MySQL 安裝時並未定義使用者名稱，請在「使用者名稱」中輸
入 root。如果您沒有密碼，請如下所示讓「密碼」文字方塊空白。
6. 在「資料庫」文字方塊中，輸入 CafeTownsend。
CafeTownsend 是您所建立的 MySQL 範例資料庫名稱 ( 請參閱第 282 頁
「建立 MySQL 資料庫」 )。
■ 請重複檢查伺服器名稱、使用者名稱和密碼。
「指定可以處理動態網頁的位置 (PHP)」 )。
現在，PHP 範例應用程式已經設定好了，可以供「Dreamweaver 入門」教學課
程使用。如需詳細資訊，請參閱第 177 頁「教學課程：開發網路應用程式」。

索引
符號 ColdFusion 標記語言 (CFML) 204

ColdFusion，使用的語言 205
.NET Framework 205
CSS 樣式面板 34, 101
安裝 232 CSS。請參閱階層式樣式表
數字 D
127.0.0.1 IP 編號 213 DBMS ( 資料庫管理系統 )。請參閱資料庫管理系統
A F
Access。請參閱 Microsoft Access Flash
Active Server Pages。請參閱 ASP
在 Dreamweaver 中播放內容 79
Apache Tomcat 應用程式伺服器 206
插入 SWF 檔案 77
Apple。請參閱 Mac OS X Flash 視訊，插入 80
ASP
時間，顯示 244
疑難排解 245 H
網路應用程式，設定 241
HomeSite 129
應用程式伺服器，安裝 244
HTML
ASP.NET
.NET Framework 232 另請參閱程式碼
內嵌程式語言 204
伺服器，支援 232
HTTP 伺服器。另請參閱伺服器
使用的語言 205
資料集 181
網路應用程式，設定 229 I
IBM WebSphere 應用程式伺服器 206
C IIS (Internet Information Services) 205
支援 ASP.NET 232
C# ( 語言 ) 205
安裝 210
CFML (ColdFusion 標記語言 ) 204
ColdFusion 管理工具，啟動 233
關於 210
安裝 217
IP 位址和編號 (127.0.0.1) 213
ColdFusion MX 伺服器開發版 217
ColdFusion Studio 129
ColdFusion 管理員 226
285
J PWS (Microsoft Personal Web Server) 208
支援 ASP.NET 232
Java 205
關於 210
Java Server Pages (JSP) 205
JavaScript 205
JRun 205
JSP (Java Server Pages)
S
Sequel (SQL) 202
SQL ( 結構化查詢語言 ) 202
應用程式伺服器，安裝 258
Sun ONE Web Server 208
L T
localhost 213
Tomcat 應用程式伺服器 206
M U
Mac OS X 上的 Apache 網站伺服器 212
Macintosh URL 前置詞選項 224, 237, 250, 264, 280
伺服器 212
執行 Apache 和 PHP 的 Mac OS X 276
Macintosh，外框包圍的檔案 36
V
Macromedia JRun 205 variables in CFML 204
VBScript 205
安裝 259
Microsoft Access 204 Visual Basic 205
Microsoft Internet Information Server (IIS)。請參閱
IIS
Microsoft Personal Web Server (PWS) 208, 210 W
Microsoft SQL Server 204 WebSphere 206
MySQL 資料庫 204
下載 282
X
XML ( 可擴展標記語言 )
N 在網頁上顯示 159
Netscape Enterprise Server 208 建立連結 170
套用樣式 169
關於 161
O XSL ( 可擴展樣式表語言 ) 162
Oracle 9i 資料庫 204 請參閱 XSLT
變形，用戶端 163
XSLT ( 可擴展樣式表語言變形 )
P 片段 163
PHP 和用戶端變形 163
重複區域 XSLT 物件 172
Mac OS X，設定 276
頁面 163
疑難排解 (Macintosh) 277
頁面，附加 XML 資料至 165
疑難排解 (Windows) 274
頁面，連至 XML 檔案 174
頁面，轉換成 164
應用程式伺服器 (Windows)，安裝 272
頁面，顯示 XML 資料於 168
PHP，伺服器技術 205
關於 162
286 索引
一畫六畫
一般偏好設定 129 印刷慣例 14
在瀏覽器中預覽
關於 88
三畫變更偏好設定 89
下載，設定時間 30 在瀏覽器中預覽，疑難排解動態網頁
上傳檔案 ASP 250
範本 281 ASP.NET 237
上傳檔案按鈕 192 ColdFusion 224
工作區 JSP 264
版面 30 PHP 281
浮動版面 26 字體，變更說明中的大小 23
關於 25 安裝
工作區版面，編碼 129 .NET Framework 232
工具列 ColdFusion MX 217
文件 29, 187 Dreamweaver 13
編碼 32 IIS (Internet Information Services) 210
應用程式伺服器，ASP 244
應用程式伺服器，JSP 258
四畫應用程式伺服器，PHP 272
手掌工具 30
文件
儲存 51, 144
七畫
顯示於索引標籤中 (Macintosh) 36 伺服器
文件工具列 HTTP 213
即時資料檢視 187 IP 位址 213
關於 29 另請參閱網站伺服器，應用程式伺服器
文件視窗上傳檔案 122, 224, 250, 264, 281
狀態列 30 ASP.NET 237
頁面大小和下載時間 30 支援 ASP.NET 232
基本概念 28 存取選項 121
視窗大小彈出式選單 30 根資料夾 222, 236, 249, 262, 279
標題列 28 測試 211
標籤選取器 30 疑難排解 211
文字網站伺服器，定義的 208
動態的 186 應用程式伺服器 201
插入 83 關於 213
插入動態 186 伺服器行為面板 186
選取 84 伺服器技術
支援 205
定義 207
五畫選擇 205
伺服器的技術支援 209
本機資料夾
定義 46–48, 235, 248, 262, 279 伺服器端 Script 語言 205
根資料夾 222 伺服器模式 . 請參閱伺服器技術
即時資料檢視 187
疑難排解 224, 237, 250, 264, 281
系統，設定 216, 231, 243, 257, 270
索引 287
八畫建立 (ASP.NET) 233
建立 (ColdFusion) 220
定義遠端資料夾 222, 236, 249, 262, 279
建立 (JSP) 259
版面建立 (PHP) 275
CSS 式 141
記錄
表格式 49–65
插入 188
狀態列
顯示 184
視窗大小彈出式選單 30 記錄插入表單對話方塊 189
關於 30
表格
使用建立版面 49–65 十一畫
展開表格模式 55
偏好設定對話方塊，一般類別 129
設定屬性 55–59
動態文字，插入 186
插入 52–54, 184
動態頁面
資料庫 202
在 ASP 中處理 249
關於 53
在 ASP.NET 中處理 236
表格標題選單 53
在 ColdFusion 中處理 223
在 JSP 中處理 263
九畫在 PHP 中處理 280
使用 201, 204
指定測試伺服器 223, 236, 249, 263, 280 關於 207
查詢參考面板 135
定義 207
常見網路應用程式詞彙名詞解釋 206
測試 183
從資料庫擷取資料 202
資料庫 202 教學課程：使用 CSS 格式化您的頁面 91
背景顏色，設定 62, 156
教學課程：建立表格式頁面版面 49
重新整理按鈕 129
教學課程：將內容新增至頁面 67
重複區域 XSLT 物件 172
教學課程：發佈網站 119
重複區域，建立 186 設定
面板 ASP 241
伺服器行為面板 186 ASP.NET 229
資源 75 ColdFusion 215
繫結面板 181 JSP 255
頁面 PHP 269
動態，定義 197
有 ASP 應用程式伺服器的系統 243
動態，建立 204
有 ColdFusion MX 的系統 216
動態，處理 201
有 JSP 應用程式伺服器的系統 257
插入記錄 188
有 PHP 應用程式伺服器的系統 270
靜態 199
含有 .NET Framework 的系統 231
顯示資料庫資料 202
設計檢視 128
連結
至資料庫 (ColdFusion) 225
十畫到資料庫 (ASP) 253, 267, 284
修改，標籤 133 到資料庫 (ASP.NET) 238
展開表格模式 55 連結，建立 87
時間，在 ASP 中顯示 244
根資料夾
另請參閱本機資料夾
定義 222, 235, 248, 262, 279
建立 (ASP) 246
288 索引
十二畫選擇 204
檔案 204
插入列
關於 206
應用程式類別 186, 189 關聯式 207
類別 31 驅動程式 202, 206
插入列的應用程式類別 186, 189
顯示資料 184, 202
插入記錄物件 188
資料庫管理系統 207
插入記錄表單，建立 188 資料庫驅動程式 202, 206
替代文字 60
資料集
測試伺服器
另請參閱資料庫
指定 223, 236, 249, 263, 280
定義 207
關於 211 建立 181
測試連結按鈕 121
測試 183
發佈 119–123
資料集 (ASP.NET 資料集 ) 181
程式碼資源，加入網站 45
列印 139 資源面板 75
使用標籤選擇程式建立 130
程式碼工作區 129
程式碼提示 136 十四畫
程式碼檢視
圖層 142
設計檢視和指定 29
巢狀化 152
透過「設計」檢視展示 128, 129
插入 145
顯示文字檔 83
慣例，印刷 14
程式碼檢視中的文字檔 83
疑難排解 250
視窗大小彈出式選單 30
ASP 245
註冊 Dreamweaver 13
PHP (Macintosh) 277
階層式樣式表 (CSS)
PHP (Windows) 274
CSS 樣式面板 34
未開啟的頁面 211
用以格式化 91–118
伺服器 209, 211
和版面 141
頁面未顯示 245, 274
附加 98
動態頁面 224, 237, 250, 264, 281
建立 96
關於 277
關於 94
網頁 . 請參閱網頁
網站
十三畫本機 44
定義 46–48
資料 ASP 247
動態，插入 186 ASP.NET 234
從資料庫擷取 202 ColdFusion 221
資料來源 JSP 260
ColdFusion 226 PHP 277
資料庫
資源，新增 45
伺服器 204
遠端 44, 120
表格 202
關於 44
查詢 202, 207
網站伺服器
連結至 (ColdFusion) 225
另請參閱伺服器，應用程式伺服器
連結到 (ASP.NET) 238
定義 208
連線到 (ASP) 253, 267, 284
驗證網站伺服器正在執行 232, 244, 258, 272
搭配網路應用程式使用 198
資料集 202
索引 289
網路應用程式 ColdFusion 225
ASP.NET，設定 229 JSP 267
ASP，設定 241 PHP 284
ColdFusion，設定 215 編碼工具列 32
JSP，設定 255 編輯，標籤 133
PHP，設定 269
定義 208
常見用法 198 十六畫
開發 177 靜態網頁 199
關於 197 另請參閱網頁
網路應用程式的常見詞彙，定義 206
網路應用程式詞彙 206
網路應用程式詞彙定義 206 十七畫
網路應用程式範例 198
應用程式，網路 . 請參閱網路應用程式
語言，伺服器端 202, 204, 205
應用程式伺服器 201, 206
說明 ColdFusion MX，安裝 217
使用 15 .NET Framework (ASP.NET)，安裝 232
變更字體大小 23 PHP，安裝 272
遠端資料夾 120
用於 ASP，安裝 244
使用 Dreamweaver 建立 120
用於 JSP，安裝 258
定義 (ASP) 249
檔案
定義 (ASP.NET) 236
上傳至伺服器 192
定義 (ColdFusion) 222
上傳範例 224, 237, 250, 264
定義 (JSP) 262
從本機資料夾上傳 122
定義 (PHP) 279
檢查清單
疑難排解設定 123 ASP 設定 242
ASP.NET 設定 230
ColdFusion 設定 215
十五畫 JSP 設定 256
影像 70–76 PHP 設定 270
影像：插入 72, 73, 74 檢視
影像：預留位置 60 即時資料檢視 187
影像預留位置程式碼檢視 128
建立影像來源 70
插入 60
關於 61 十八畫
數值網址 213
顏色挑選器 64
標籤
伺服器端 202
尋找參考資訊 135 十九畫
提示 136
繫結面板 181
標籤選擇程式 130
關聯式資料庫 207
編輯 133
選擇 130
標籤選取器 86
標籤選擇程式 130
二十一畫
標籤檢視窗 133 屬性，參考資訊 135
範例資料庫，連線至欄位，動態 186
ASP 251, 253 欄標題選單 53
ASP.NET 238
290 索引

dw8 Getting Started

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

dw8 Getting Started

Uploaded by

Copyright:

Available Formats

Dreamweaver 入門

Opera ® 瀏覽器版權 © 1995-2002 Opera Software ASA 及其供應商。保留所有權利。

版權 © 1997-2005 Macromedia, Inc. 保留一切相關權利。事前未經過 Macromedia, Inc. 的書面同意， 貴用戶禁止對

第 6 章 : 教學課程：使用 CSS 設定頁面格式 . . . . . . . . . . . . . . . . . . . . 91

第 10 章 : 教學課程：顯示 XML 資料 . . . . . . . . . . . . . . . . . . . . . . . . . 159

附錄 C: ColdFusion 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . 215

附錄 D: ASP.NET 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . 229

附錄 E: ASP 範例網站的設定. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241

附錄 F: JSP 範例網站的設定 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 255

本書的第一部分將介紹 Macromedia Dreamweaver 8，並包含安裝資訊和工作

Macromedia Dreamweaver 8 是用來設計、編碼和開發網站、網頁及網路應用

若要註冊 Macromedia Dreamweaver 8，請執行下列其中一項作業：

對於有經驗但是新接觸 Dreamweaver 的網路設計人員：

5. 連線到資料庫。( 請參閱第 23 章 「設定網路應用程式」中的 「連線到資

對於沒有使用過 Dreamweaver 的網路應用程式開發人員：

對於有經驗並且使用過 Dreamweaver 的網路應用程式開發人員：

使用 所有 Dreamweaver • 在 Dreamweaver 中檢視：選

Dreamweaver 說明公用程式 API 和 • 在 Dreamweaver 中檢視：選

使用 ColdFusion 包括 ColdFusion 文 • 在 Dreamweaver 中檢視：選

參考 包括很多種與 • 在 Dreamweaver 中檢視：選

Dreamweaver 開 文件和教學課程可 www.macromedia.com/go/

Dreamweaver 文 取得 PDF 格式的 www.macromedia.com/go/

Macromedia 訓練 針對實用工作和真 www.macromedia.com/go/

若要開啟 Dreamweaver 說明：

若要搜尋特定的文句，請 1. 在 「Dreamweaver 說明」的 「詢問問題」文字方塊中輸入一個文字或文

若要變更 Windows 說明檢視器中的字體大小：

若要變更 Apple 說明檢視器中的字體大小：

標籤選取器 「屬性」檢視窗 檔案面板

Windows 工作區也有 「程式碼撰寫者」選項，依預設，它會將面版群組停駐在

標籤選取器 「屬性」檢視窗 檔案面板

不論在 Windows 或 Macintosh 中都可以於不同的版面之間切換。如需詳細資

顯示程式碼檢視 沒有瀏覽器 / 檢查錯誤

顯示程式碼和設計檢視會在 「文件」視窗的一部份顯示 「程式碼」檢視，另一

伺服器除錯會顯示一份報告，協助您對目前的 ColdFusion 網頁進行除錯。這份

文字類別可讓您插入各種文字和清單格式的標籤，如 b、em、p、h1 和 ul。

選擇工作區版面 ( 僅適用於 Windows)

若要在首次啟動 Dreamweaver 時選擇工作區版面：

當您啟動 Dreamweaver 時，或在您開啟和關閉文件之後，「起始頁面」便

在 Macintosh 中，您的使用者資料夾中已經有一個資料夾稱為 Sites。Sites 資

2. 在硬碟上的 Dreamweaver 應用程式資料夾中找出 cafe_townsend 資料夾。

如果您將 Dreamweaver 設定於預設的位置，資料夾的路徑即如下所示：

關於本機和遠端 「根」資料夾 Dreamweaver 網站的本機 「根」資料夾通常是網站的主要或最上層資料夾。通

如需有關 「檔案」面板運作方式的詳細資訊，請參閱第 33 頁 「檔案面板」。

這是頁面的標題 ( 與檔案名稱不同 )。當網頁瀏覽者在網頁瀏覽器中檢視頁

含三列及一欄的表格便會在文件中出現。表格的寬度為 700 個像素，其中

進一步瞭解表格 表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列

10. 選取 「插入＞表格」以插入第三個表格，然後在 「插入表格」對話方塊中

插入表格之後，就會出現表格選取器 ( 以綠色線標示 )。只要按一下表格外部，表

如果您看不到 「儲存格高度」文字方塊，請按一下 「屬性」檢視窗右下角的展開

5. 在 「屬性」檢視窗的 「儲存格高度」文字方塊中輸入 166，然後按 Enter

7. 在 「屬性」檢視窗的 「儲存格高度」文字方塊中輸入 24，然後按 Enter

接下來，請設定第二個表格 ( 包含三欄的表格 ) 的屬性。

9. 在 「屬性」檢視窗的 「儲存格寬度 (W)」文字方塊中輸入 「140」，然後

12. 將第三欄的寬度設定為 330 個像素。

15. 按一下 「文件」視窗頂端的 「結束展開表格模式」連結，以返回 「標準」

替代文字的備註替代文字是網頁上與影像有關的文字說明。屬於 HTML 程式碼的一部分，但不會顯示在頁面上。為

3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的 「背景顏色」文字方塊內按一下。

如果您看不到 「背景顏色」文字方塊，請按一下 「屬性」檢視窗右下角的展開

6. 按一下標籤選取器中的 <td> 標籤 ( 儲存格標籤 ) 以選取該儲存格。

挑選顏色 在 HTML 中，顏色會以十六進位值 ( 例如，#FF0000) 或顏色名稱 (red) 來表示。網頁安全色指使用

如果使用已完成的 table_layout.html 檔案來開始本教學課程，而非使用來自

Dreamweaver 便會使用 Cafe Townsend 的橫幅圖形來取代該影像預留位置。

3. 在 「選取影像原始檔」對話方塊中，瀏覽至 cafe_townsend 資料夾中的

版權 © 1997-2005 Macromedia, Inc. 保留一切相關權利。事前未經過 Macromedia, Inc. 的書面同意，貴用戶禁止對

5. 連線到資料庫。( 請參閱第 23 章「設定網路應用程式」中的「連線到資

使用所有 Dreamweaver • 在 Dreamweaver 中檢視：選

參考包括很多種與 • 在 Dreamweaver 中檢視：選

Dreamweaver 開文件和教學課程可 www.macromedia.com/go/

Dreamweaver 文取得 PDF 格式的 www.macromedia.com/go/

Macromedia 訓練針對實用工作和真 www.macromedia.com/go/

若要搜尋特定的文句，請 1. 在「Dreamweaver 說明」的「詢問問題」文字方塊中輸入一個文字或文

標籤選取器「屬性」檢視窗檔案面板

Windows 工作區也有「程式碼撰寫者」選項，依預設，它會將面版群組停駐在

標籤選取器「屬性」檢視窗檔案面板

顯示程式碼檢視沒有瀏覽器 / 檢查錯誤

顯示程式碼和設計檢視會在「文件」視窗的一部份顯示「程式碼」檢視，另一

關於本機和遠端「根」資料夾 Dreamweaver 網站的本機「根」資料夾通常是網站的主要或最上層資料夾。通

如需有關「檔案」面板運作方式的詳細資訊，請參閱第 33 頁「檔案面板」。

進一步瞭解表格表格是在 HTML 網頁上呈現表格式資料以及展示文字和圖形的強大工具。表格是由一列或多列

10. 選取「插入＞表格」以插入第三個表格，然後在「插入表格」對話方塊中

如果您看不到「儲存格高度」文字方塊，請按一下「屬性」檢視窗右下角的展開

5. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 166，然後按 Enter

7. 在「屬性」檢視窗的「儲存格高度」文字方塊中輸入 24，然後按 Enter

9. 在「屬性」檢視窗的「儲存格寬度 (W)」文字方塊中輸入「140」，然後

15. 按一下「文件」視窗頂端的「結束展開表格模式」連結，以返回「標準」

3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 的「背景顏色」文字方塊內按一下。

如果您看不到「背景顏色」文字方塊，請按一下「屬性」檢視窗右下角的展開

挑選顏色在 HTML 中，顏色會以十六進位值 ( 例如，#FF0000) 或顏色名稱 (red) 來表示。網頁安全色指使用

3. 在「選取影像原始檔」對話方塊中，瀏覽至 cafe_townsend 資料夾中的

如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。

如果出現「影像標籤輔助功能屬性」對話方塊，請按一下「確定」。

如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角的

「資源」面板您可以使用「資源」面板來檢視及管理目前網站中的資源。「資源」面板中會顯示與「文件」視窗

4. 按一下「檔案」面板中的「資源」索引標籤，或選取「視窗＞資源」。

5. 如果沒有選取「影像」檢視，請按一下「影像」以檢視您的影像資源。

如果看不到「垂直」或「水平」彈出式選單，請按一下「屬性」檢視窗右下角

關於 Flash 檔案在 Macromedia Flash 中建立資源時，您所使用的是 FLA 檔案，這是 Flash 應用程式的預設

如果看不到 Flash 「播放」按鈕，請按一下「屬性」檢視窗右下角的展開箭頭。

Dreamweaver 便會在「文件」視窗中播放 Flash 檔案，顯示網站瀏覽者以

6. 在「屬性」檢視窗中，按一下「停止」以停止播放 Flash 檔。

2. 選取「插入＞媒體＞ Flash 視訊」。

3. 在「插入 Flash 視訊」對話方塊中，從「視訊類型」彈出式選單中選取

關於 Flash 視訊 Dreamweaver 中的「Insert Flash Video」命令可讓您在網頁中插入 Flash 視訊內容，而不需

5. 從「外觀」彈出式選單中選取「Halo Skin 2」。

「寬度」和「高度」文字方塊中的值會以像素為單位來指定 FLV 檔案的寬

您可以按一下「偵測度和高度。您可以任意調整這些值，以變更網頁上 Flash 視訊的大小。若

3. 按下空格鍵並輸入「Chef Ipsum」。

如果看不到「垂直」彈出式選單，請按一下「屬性」檢視窗右下角的展開箭頭。

3. 在「選取檔案」對話方塊中，瀏覽至 menu.html 檔案 ( 位於與 index.html

空白的樣式表會出現在「文件」視窗中。「設計」檢視和「程式碼」檢視

如果「屬性」檢視窗中的「格式」彈出式選單顯示出「段落」，表示段落

設定為 #000000 值的 background-color 屬性便會出現在下面的「屬

您可能需要收合另一個面板，如「檔案」面板，才能看到「CSS 樣式」面板的完

2. 在「新增 CSS 規則」對話方塊中，從「選取器類型」選項中選取「類

■ 在「字體」文字方塊中，輸入「Verdana, sans-serif」。

接下來，您會使用「CSS 樣式」面板將屬性加入規則中。

12. 找出 padding 屬性，在其右邊的欄中按一下，輸入「8px」做為它的值，

3. 在「屬性」檢視窗 ( 「視窗＞屬性」 ) 中，從「樣式」彈出式選單中選取

關於 :hover 虛擬類別虛擬類別是用來影響 HTML 文件中之某些元素的一種方法，它的根據基礎並不是文件本

9. 在「文件」視窗中開啟 index.html 檔，並在瀏覽器中預覽頁面 ( 「檔案＞

按一下 <body> 標籤會在「文件」視窗中選取 <body> 的開始和結束標籤