巧學巧用Dreamweaver 8製作網頁

《巧學巧用Dreamweaver 8製作網頁》通過大量的網頁和網站製作實例，系統地介紹使用Dreamweaver 8進行網頁製作和網站開發的知識與技巧，操作步驟講解詳細，並依據網頁製作的實際需要，講解如何使用Fireworks輔助網頁設計。

基本介紹

• 中文名：巧學巧用Dreamweaver 8製作網頁
• ISBN：711514832
• 作者：前沿電腦圖像工作室
• 出版社：人民郵電出版社
• 作用：DreamWaver8實例講解
• 出版日期：2006-7-1
• 定價：36
• 包裝：平裝
• 開本：16開

基本信息

書名:巧學巧用Dreamweaver 8製作網頁

ISBN:711514832

作者:前沿電腦圖像工作室

出版社:人民郵電出版社

定價:36

出版日期:2006-7-1

版次: 1

開本:16開

包裝:平裝

簡介

本書通過大量的網頁和網站製作實例，系統地介紹使用Dreamweaver 8進行網頁製作和網站開發的知識與技巧，操作步驟講解詳細，並依據網頁製作的實際需要，講解如何使用Fireworks輔助網頁設計。

全書由大量講授專項操作的典型網頁實例和綜合使用Dreamweaver各種功能的綜合網頁與網站實例構成。這些實例涵蓋了使用Dreamweaver進行網頁和網站設計的各個方面，而且每個綜合實例都實現了相對完整的功能，為讀者製作網頁和開發網站提供了不可多得的範例。

本書可作為網頁設計製作培訓班的教材，也可作為初學者的自學教材，同時對於有一定網頁製作和網站開發經驗的專業人員也有很好的參考價值。

目錄

第0章　網頁設計綜述　1

本章對網站開發的流程、頁面的幾種布局類型進行介紹，讓讀者在開始學習製作網頁之前，對網站有個整體的認識和了解。

0.1　網站開發的流程簡介　1

介紹網站的設計、製作流程

0.1.1　明確網站定位　1

0.1.2　收集信息和素材　2

0.1.3　策劃欄目內容　2

0.1.4　設計頁面方案　2

0.1.5　製作頁面　2

0.1.6　實現後台功能　3

0.1.7　整合與測試網站　3

0.2　頁面設計布局介紹　3

介紹頁面設計的幾種常見布局類型

0.2.1　版面構成的原理　3

0.2.2　網頁版面構成中常見的布局形式　4

1．“T”型布局　4

2．“口”型布局　5

3．“三”型布局　5

4．對稱對比布局　6

5．宣傳單型布局　6

6．門戶型網頁布局　7

7．區塊型布局　7

0.2.3　網頁布局設計的步驟　8

1．草圖　8

2．粗略布局　8

3．定案　8

0.2.4　網頁版面構成的布局技巧　9

0.3　本章小結　9

第1章　初識Dreamweaver 8　11

本章中對一些與Internet有關的術語進行簡單的解釋，然後闡述與HTML有關的知識，接著對Dreamweaver MX 2004的各項功能進行介紹，最後講解如何使用Fireworks輔助網頁設計，為製作網頁提供更大的方便。

1.1　HTML基本知識　11

介紹Internet和HTML語言的基本知識

1.1.1　Internet基本術語　11

1.1.2　HTML檔案基礎　12

1．HTML語言基本知識　12

2．HTML語言的標記符　13

1.1.3　使用HTML語言編寫簡單頁面　17

1.2　Dreamweaver 8快速入門　18

介紹Dreamweaver的程式界面及最基本的操作

1.2.1　Dreamweaver 8用戶界面　18

1．起始頁　19

2．文檔視窗　19

3．插入工具列　20

4．“屬性”面板　21

5．其他面板　21

6．打開和關閉面板　22

7．面板重組　22

1.2.2　設定頁面屬性　22

1.2.3　插入頁面元素　24

1．插入文本　24

2．插入和編輯圖片　25

3．插入和編輯表格　26

4．行為　27

5．Dreamweaver 8的其他功能和特性　27

1.3　使用Fireworks輔助頁面設計　28

講解如何使用Fireworks輔助網頁設計

1.3.1　Fireworks 8用戶界面簡介　28

1．打開和創建圖像檔案　28

2．常用工具列　30

3．層與資源面板　31

1.3.2　使用Fireworks 8進行網頁圖像設計　32

1．網頁設計思想　32

2．插入文本　33

3．切割圖片　33

4．最佳化圖片　34

5．導出圖像和HTML檔案方法一　35

6．導出HTML檔案方法二　36

1.4　本章小結　38

第2章　創建網頁和網站　39

本章主要介紹創建基本的網頁文檔和Dreamweaver站點的方法，包括使用Dreamweaver的基本功能對頁面進行簡單的編輯，並講解網站的有關概念。

2.1　創建簡單文檔　39

創建文檔並製作一個簡單網頁

2.1.1　創建空白文檔　40

2.1.2　年輕真好——製作一個簡單網頁　42

2.2　創建本地站點　44

創建本地站點並向站點中添加檔案

1．本地資料夾　44

2．遠程資料夾　44

3．測試伺服器資料夾　44

2.2.1　使用Dreamweaver 8創建本地站點　44

2.2.2　為本地站點添加檔案　47

1．向本地站點添加新檔案　47

2．向站點添加已有檔案　49

3．使用地圖視圖功能查看站點檔案間的連結關係　50

2.3　創建以模板為基礎的文檔　51

使用文檔模板創建文檔

2.3.1　使用已有模板創建文檔　51

2.3.2　創建以範例為基礎的文檔　52

1．從“頁面設計(CSS)”創建新文檔　52

2．從“入門頁面”創建新文檔　53

3．從“頁面設計(有輔助功能的)”創建新文檔　54

2.3.3　打開並編輯已有文檔　55

2.4　本章小結　55

第3章　編輯文檔　57

本章詳細說明了編輯HTML文檔的各種具體操作，並以實例進一步說明了各種操作的具體方法，同時還講解了如何為頁面添加連結，包括文字連結、圖片連結和熱點連結等內容。

3.1　編輯文本和圖片　57

介紹格式化文本及在頁面中使用圖片的操作

3.1.1　使用屬性面板格式化文本　57

1．用“大小”下拉列表設定文字大小　58

2．使用“格式”下拉列表設定文字大小　59

3．設定文字的字型列表　59

4．設定文字的加粗、傾斜和顏色屬性　60

5．設定段落的對齊方式　61

6．創建清單　61

3.1.2　使用層疊樣式表格式化文本　62

1．創建樣式表　62

2．套用層疊樣式表　63

3．其他類型的層疊樣式表　65

3.1.3　使用和處理圖片　67

1．插入圖片　67

2．改變圖片的大小　67

3．對圖片重新取樣　68

4．裁剪圖片　68

5．調整圖片的亮度和對比度　69

6．使用Fireworks對圖片進行處理　69

3.1.4　名車風範——網頁實例製作　70

1．設定頁面屬性　70

2．添加文本　71

3．添加圖片　71

3.2　網頁超級連結　72

介紹為文字和圖片添加超級連結的操作

3.2.1　為文字添加超級連結　72

3.2.2　為圖片添加超級連結　74

3.3　如歌歲月——網頁實例製作　76

使用Fireworks和Dreamweaver的基本操作製作了一個簡單網頁

3.3.1　使用Fireworks 8輔助頁面設計　76

3.3.2　使用Dreamweaver編輯網頁　77

3.4　本章小結　78

第4章　網站建設與管理　79

本章介紹了建設、管理網站的方法，還介紹了管理和維護網站、測試網站、向遠程伺服器上傳檔案等操作。

4.1　網站建設　79

介紹網站建設之前的一些準備工作

1．網站的題材　79

2．網站形象設計　80

3．網站主頁的製作　80

4．網站結構設計　80

4.2　網站管理與維護　81

介紹設定檔案結構和管理站點內超連結等操作

4.2.1　設定網站檔案結構　81

4.2.2　管理站點內的超級連結　82

1．檢查連結　83

2．更新連結　83

4.2.3　利用查找和替換功能管理站點　84

1．查找含有特定文本的標記　84

2．修改站點中的連結URL　85

4.3　網站的測試和最佳化　86

介紹測試網站的瀏覽器兼容性和HTML最佳化的操作

4.3.1　測試網站的瀏覽器兼容性　86

4.3.2　HTML最佳化　89

1．清理Word生成的HTML代碼　89

2．清理HTML　90

3．添加/刪除Netscape調整修復　91

4.4　在Internet上建立網站　91

介紹域名申請與信息發布和向伺服器上傳網站的操作

4.4.1　域名申請與信息發布　91

1．域名申請　91

2．信息發布　92

4.4.2　向伺服器上傳網站　92

4.5　網站宣傳　94

介紹對網站進行宣傳的一些技巧和注意事項

1．登錄搜尋引擎　94

2．友情連結　95

3．提供聯繫電子信箱　95

4.6　本章小結　96

第5章　添加頁面元素　97

本章通過4個實例深入講解向頁面中添加頁面元素的方法，包括使用表格顯示數據和內容，添加音樂、視頻等多媒體，添加各種Flash元素，同時講解在頁面中添加和使用表單的方法。

5.1　使用表格　97

介紹如何向頁面中添加表格並對表格進行相關的設定

5.1.1　表格的基本操作　98

1．創建表格　98

2．設定表格屬性　100

3．拆分合併單元格　101

5.1.2　新聞網——網頁實例製作　102

1．使用Fireworks對標題欄圖片進行切片　103

2．製作主頁　103

5.2　添加多媒體及控制項——媒體天地　107

介紹添加多媒體及控制項的基本操作

5.2.1　添加多媒體及控制項的基礎操作　107

1．添加背景音樂　108

2．添加音頻視頻檔案　108

5.2.2　媒體天地——網頁製作實例　110

1．首頁的製作　111

2．為首頁做超連結　113

5.3　添加Flash元素　113

介紹添加Flash文本、Flash按鈕和Flash動畫等Flash元素的操作

5.3.1　添加Flash元素的基本操作　114

1．添加Flash文本　114

2．添加Flash按鈕　116

3．添加Flash電影　118

5.3.2　Flash精品驛站——網頁製作實例　119

1．製作基本頁面　119

2．添加圖片和Flash元素　120

5.4　表單的使用　123

介紹在網頁中使用表單的基本操作

5.4.1　表單的基本操作　124

1．添加文本欄位　124

2．添加文本區域　126

3．添加按鈕　127

4．添加複選框　128

5．添加單選按鈕　128

6．添加列表/選單　129

7．添加檔案域　130

8．添加圖像域　130

9．添加隱藏域　131

10．添加單選按鈕組　131

11．添加跳轉選單　132

5.4.2　極限運動註冊專區——網頁製作實例　133

1．製作基本頁面　133

2．添加註冊表單　134

5.5　本章小結　136

第6章　層疊樣式表　137

本章介紹使用層疊樣式表對各種頁面元素設定樣式的基本操作，同時介紹一下對圖片做各種效果處理的操作。

6.1　層疊樣式表的基本套用　137

創建和對頁面元素套用層疊樣式表

6.1.1　創建和編輯層疊樣式表　138

6.1.2　套用層疊樣式表　144

1．對頁面元素套用層疊樣式表　144

2．導出層疊樣式表檔案　146

3．連結外部樣式表　146

6.1.3　CSS濾鏡效果　148

6.2　精品軟體公司——網頁製作實例　153

通過實例介紹製作基本頁面、定義和套用層疊樣式表的方法

6.2.1　製作基本頁面　153

6.2.2　定義層疊樣式表　154

6.2.3　套用層疊樣式表　155

6.3　本章小結　156

第7章　定位頁面　157

本章在前面已經學過的表格操作的基礎上介紹有關表格的高級操作，還有如何使用布局表格和布局單元格進行定位網頁的知識，同時還詳細介紹使用層和框架進行頁面定位的技術。

7.1　表格定位頁面　157

介紹使用布局表格和布局單元格來製作頁面的方法

7.1.1　表格高級操作　158

1．設定表格分隔線和框線效果　158

2．調整表格大小　160

7.1.2　使用布局表格和布局單元格　161

1．布局視圖模式　161

2．創建布局表格　163

3．創建布局單元格　164

4．設定布局表格和布局單元格的屬性　164

5．設定布局寬度　165

6．使用空白圖片　166

7.1.3　大家一起學英文——網頁製作實例　168

1．使用布局表格和布局單元格規劃頁面結構　168

2．製作基本頁面　169

7.2　層定位頁面　171

介紹層的基本知識和使用層製作頁面的方法

7.2.1　層的基本知識　172

1．創建和移動層　172

2．設定層屬性　173

3．嵌套層的使用　174

4．將層轉換成表格　176

7.2.2　網路咖啡館——網頁製作實例　180

1．製作基本頁面　180

2．添加頁面內容　181

7.3　嵌入式框架定位頁面　182

介紹使用嵌入式框架來定位頁面的方法

7.3.1　嵌入式框架基本知識　183

1．創建嵌入式框架　183

2．為嵌入式框架設定連結　186

7.3.2　文學咖啡館——網頁製作實例　186

1．製作首頁頁面　187

2．製作連結頁面　188

3．使用嵌入式框架　188

7.4　框架定位頁面　189

介紹使用框架和框架集來定位頁面的方法

7.4.1　框架和框架集基本知識　189

1．創建框架和框架集　190

2．刪除框架　192

3．編輯框架　192

4．編輯框架內容　193

7.4.2　音樂天堂——網頁製作實例　194

1．製作框架集頁面　194

2．製作顯示在框架中的頁面　195

3．將HTML檔案連結到框架　197

7.5　本章小結　200

第8章　網頁動態效果　201

本章主要講解使用Dreamweaver的行為功能和JavaScript腳本代碼及其他腳本代碼為網頁添加各種網頁動態效果的操作。

8.1　行為　201

介紹向頁面添加各種行為的基本方法

8.1.1　行為的基本操作　202

1．行為基本知識　202

2．交換圖像與交換圖像恢復　202

3．彈出信息　205

4．打開瀏覽器視窗　206

5．播放聲音　207

6．改變屬性　208

7．顯示彈出式選單　209

8．檢查外掛程式　210

9．檢查瀏覽器　211

10．設定導航欄圖像　211

11．設定狀態欄文本　213

12．轉到URL　213

13．預先載入圖像　214

14．拖動層　214

15．顯示-隱藏層　216

8.1.2　公司網站——網頁製作實例　217

1．製作基本頁面　217

2．向頁面中添加行為　218

8.2　JavaScript腳本代碼　219

介紹使用JavaScript代碼添加動態效果的方法

8.2.1　使用JavaScript代碼的基本操作　220

1．在網頁中顯示時間　220

2．垂直滾動的文字　221

3．隨時間顯示不同的問候　222

4．彩色連結文字　223

8.2.2　文化長廊——網頁製作實例　225

1．製作基本網頁　225

2．為首頁添加JavaScript腳本代碼　225

3．為圖片欣賞頁面添加JavaScript腳本代碼　231

8.3　拼圖遊戲　232

介紹製作更為複雜的完全不藉助任何外掛程式的網頁遊戲，需要綜合運用“時間軸”和“拖拽圖層”的行為

8.3.1　準備圖層　233

8.3.2　使圖片動態分離　234

8.3.3　加入開始按鈕　235

8.3.4　設定可拖拽圖層　237

8.3.5　調用JavaScript技巧　239

8.3.6　進一步地完善和改進　242

8.4　本章小結　243

第9章　庫和模板的套用　245

本章詳細介紹利用模板和庫功能來提高工作效率，減少在製作網頁和建設網站過程中的許多勞動，同時使網站和網頁的更新和維護更加方便的方法。

9.1　庫　245

介紹使用庫功能的基本方法

9.1.1　庫的基本操作　246

1．定義本地站點　246

2．創建庫項目　247

3．使用庫項目　247

4．更新庫項目　248

9.1.2　電視線上——使用庫功能來製作網站　248

1．定義本地站點　249

2．製作標題欄庫項目　249

3．製作版權資訊庫項目　251

4．製作首頁基本頁面　251

5．製作二級頁面　253

6．更改庫項目和更新網頁　254

7．從源檔案中分離庫項目　255

9.2　模板　256

介紹使用模板功能的基本方法

9.2.1　模板的基礎知識　257

9.2.2　網路商務驛站——使用模板製作網頁　257

1．創建空白網頁模板　257

2．編輯模板頁　258

3．套用模板製作網頁　261

4．修改模板並更新網頁　263

5．分離模板　264

9.3　本章小結　264

第10章　伺服器端程式開發入門　265

這一章是本書惟一介紹伺服器端技術的一章，目的是使讀者對如何使用Dreamweaver來開發伺服器端的程式有一個初步的了解。

10.1　動態網頁與ASP　265

介紹動態網頁的概念和作用

10.2　ASP的開發　267

介紹ASP運行環境的配置方法和幾種基本的ASP程式

10.2.1　ASP運行環境及配置　267

10.2.2　熟悉ASP程式　269

10.3　製作留言簿　272

通過完整的網上留言簿實例掌握ASP的套用方法

10.3.1　準備工作　273

10.3.2　建立站點　274

10.3.3　建立資料庫　274

10.3.4　製作演示留言頁面(index.asp)　275

10.3.5　製作添加留言頁面(insert.asp)　280

第11章　綜合實例(一)——網路公司網站　283

本章通過製作完整的網站的綜合實例，引導讀者掌握開發網站的基本技術和整個網站製作的工作流程。

11.1　實例概述　283

11.2　網站策劃　284

11.3　使用Fireworks製作網頁效果　285

11.3.1　繪製網頁基本效果　285

11.3.2　繪製導航欄　287

11.3.3　繪製網頁正文效果　288

11.3.4　添加裝飾圖示　289

11.3.5　繪製子頁面效果　291

11.4　使用Dreamweaver 8創建站點　291

11.5　使用Fireworks切片並輸出首頁　292

1．繪製首頁的切片　292

2．切片輸出　293

11.6　在Dreamweaver 8中編輯首頁　294

1．背景化處理相應位置圖像　294

2．插入文本內容　294

3．設定熱區並定義熱區連結　295

11.7　使用Fireworks切片並導出二級頁面　295

1．將二級頁面作為JPEG格式圖片插入到首頁PNG檔案的新圖層中　295

2．修改二級頁面切片並導出　296

11.8　在Dreamweaver中編輯導出的二級頁面　296

11.9　使用Fireworks切片並輸出模板　297

1．繪製切片參考線　297

2．輸出切片　297

11.10　使用Dreamweaver編輯模板頁　298

1．設定熱區並定義熱區連結　299

2．背景化處理相應位置的圖像　299

3．設定可編輯區域完成模板的製作　299

11.11　套用模板創建其他二級頁面　300

11.12　重新檢查所有頁面連結並瀏覽最終效果　300

第12章　綜合實例(二)——汽車時代網站　303

本章通過製作完整的網站的綜合實例，引導讀者掌握開發網站的基本技術和整個網站製作的工作流程。

12.1　實例概述　303

12.2　網站策劃　304

12.3　使用Fireworks製作網頁效果　305

12.3.1　繪製網頁基本效果　305

12.3.2　繪製導航欄　306

12.3.3　繪製正文欄效果　308

12.3.4　添加素材圖片　310

12.3.5　繪製網頁連結頁效果　311

12.4　使用Dreamweaver 8創建站點　311

12.5　使用Fireworks切片並輸出模板　312

1．繪製切片參考線　312

2．輸出切片　312

12.6　使用Dreamweaver編輯模板頁　313

1．設定熱區並定義熱區連結　313

2．背景化處理相應位置圖像　314

3．製作表單區域　314

4．設定可編輯區域完成模板的製作　315

12.7　在Fireworks中製作首頁並切片輸出HTML　315

12.8　在Dreamweaver中製作首頁　317

將Fireworks導出的首頁初始文檔插入到可編輯區域中　317

12.9　用Flash製作Banner　318

12.9.1　製作動態文字效果　318

12.9.2　製作遮罩效果　320

12.10　使用Fireworks切片並導出二級頁面　322

製作僅包含可編輯區域的二級頁面文檔　322

12.11　使用Dreamweaver編輯二級頁面　323

12.12　套用模板創建其他二級頁面　324

12.13　為所有頁面輸入文本內容　324

12.14　重新檢查所有頁面連結　324

12.15　插入Flash Banner並瀏覽最終效果　325