DreamweaverCS3網站製作炫例精講

12•••3•••1 12•••3•••2 14•••3•••1

圖書信息

作 者:戴一波編著
出 版 社: 電子工業出版社
出版時間: 2008-10-1
頁 數: 492頁
開 本: 16開
ISBN 9787121071256
分類: 圖書 >> 計算機/網頁設計>>Dreamweaver
定價:¥59.00元(含光碟1張)

內容簡介

本書是一本介紹利用Dreamweaver 軟體進行網頁製作、網站建設的書籍。Dreamweaver 是工具,製作網頁建設網站是目的。本書通過大量的網頁實例讓讀者在掌握網頁製作技巧的同時不知不覺理解並套用Dreamweaver 的工具功能,這是本書的最大特點。
本書內容由三部分組成,分別是基礎篇、提高篇和綜合篇。基礎篇主要是針對網頁製作所需要的基礎技術作入門性講解,通俗易懂能很快上手。提高篇則對於如何快速製作網頁、如何融入最新網頁製作技術作詳細介紹,以確保讀者在掌握基礎的同時也能接觸到網頁製作的流行技術。對於綜合篇,本書則通過介紹各類不同網站的建設作為每章的敘事藍本,讓讀者深切體會到製作網頁、建設網站的完整流程,同時也是對不同類型網站的建設體驗。
本書重點推薦使用遵循Web 標準的CSS 布局方式進行網頁的設計製作,並且本書介紹的就是通過Dreamweaver 軟體來進行的CSS 布局。這是本書的又一特點也是最大亮點。
本書對於網頁初學者建立新思維指明了方向,對於傳統網頁設計者轉變新思維提供了借鑑,更重要的是對Dreamweaver 各項功能進行了立體化的範例介紹,是一本適合初、中級網頁設計愛好者們的不錯書籍。

前言

網頁設計和製作已經不再是什麼新鮮而難學的技術了。那么對於初學者來說,如何快速上手、融合技術,通過各種各樣網頁範例的學習操作無疑是最好的學習方法之一,本書的核心主旨就是圍繞於此。同時,為適應越來越趨向於Web 標準化建設網站的步伐,進行網頁的CSS 布局則是首要之重點。所以本書總括即是以CSS 布局為基礎的網頁實例集合的描述。
本書內容
本書主要介紹的是各種各樣網頁實例的製作。通過對這些實例的學習和套用,逐漸掌握Dreamweaver 這個作為網頁製作利器的各項功能。全書共分為三篇進行結構組成。
第1 篇是基礎篇,主要針對初學者,如何快速掌握最全面的基礎知識。本篇由5章組成。
第1 章,輕輕鬆鬆網頁文本。本章是文本在網頁中多屬性多狀態的全方位描述。
第2 章,耳目一新的網頁圖像。通過圖像才使得我們的網頁“多姿多彩”,同時在本章我們還會運用到“圖文混排”。
第3 章,表格布局網頁。傳統的網頁布局的方法是使用表格布局的,那么我們如何認識和使用表格,將在本章詳細看到。
第4 章,炫酷的網頁多媒體。音頻、視頻和Flash 動畫,這些網頁元素的加入使得我們的網頁更酷更炫了,本章將逐一介紹。
第5 章,超能的超連結。超連結的作用是舉足輕重的,沒有超連結的網頁是一個信息孤島。同樣超連結的方式也是多種多樣的,欲知詳情,本章即知。
第2 篇是提高篇,在基礎的前提下提高,本篇的提高內容共分為3 章。
第6 章,耀眼的DIV 標籤。DIV 作為網頁中的一個小小的標籤,我們竟然需要一個篇章來介紹,必然有其閃亮之處。同時這也為我們進行CSS 布局打下了基礎。
第7 章,網頁模板。模板就是快速建設網頁的很好的功能,這也絕對是值得每個網頁愛好者使用的功能。
第8 章,Ajax 框架spry。這是本書所介紹Dreamweaver CS3 版本軟體所特有的附帶功能,運用這些高級技術讓我們的網頁離現實越來越近了。
第3 篇則是綜合篇,綜合各種類型的網際網路網站進行範例頁面的講解,這些網站有:
第9 章,個人部落格網站
第10 章,婚紗攝影網
第11 章,房地產類網站
第12 章,遊戲類網站
第13 章,企業類網站
第14 章,門戶類網站
所有類型網站的網頁製作均通過Dreamweaver 軟體進行CSS 布局。
本書光碟和技術支持
本書附贈光碟包含了書籍中相關案例的演練視頻,通過對書中圖文內容的閱讀及對本教學視頻的觀看,相信能為讀者加深內容的理解和具體操作的步驟帶來一定的輔助作用。
同時光碟還收錄了書中涉及的所有檔案源碼,為讀者朋友在實踐操作時能查看原始文檔起一定的參考作用。
歡迎訪問專業Dreamweaver 技術站點(www.dw8.cn)進行網頁網站技術交流,同時歡迎點擊作者部落格(www.cnbruce.com/blog)。
本書特色
本書是一本介紹利用Dreamweaver 軟體進行網頁製作、網站建設的書籍。
Dreamweaver 是工具,製作網頁建設網站是目的。本書通過大量的網頁實例讓讀者在掌握網頁製作技巧的同時不知不覺理解並套用Dreamweaver 的工具功能,這是本書的最大特點。本書重點推薦使用遵循Web 標準的CSS 布局方式進行網頁的設計製作,並且本書介紹的就是通過Dreamweaver 軟體來進行的CSS 布局,這是本書的又一特點也是最大亮點。
致 謝
全書由戴一波負責執筆編寫並統稿,同時參加本書編寫和審校的還有葉新紅、劉東、周天敏、巫明、王友萍、夏愛軍、王常紅、朱婷、管春風、孟長會等。特別感謝劉東,感謝北斗科技所有同仁的大力支持和鼓勵,感謝朱沭紅編輯辛苦工作,感謝你們一直以來對我的信任和等待。
感謝孕育著小生命的愛妻,這段時間你辛苦了,讓我們共同期待著作品的誕生。
儘管作者為本書稿全力以赴、傾注心血,但由於本人水平有限,書中難免存在疏漏和錯誤之處,盼請各位讀者朋友不吝斧正。
戴一波
於揚州
2008 年6 月

目錄

基 礎 篇
第1 章 輕輕鬆鬆網頁文本•••••••2
1.1 個人簡歷——網頁文本排版•••••••• 2
1.1.1 文本行..•••• 2
1.1.2 文本段落.. 4
1.1.3 項目列表.. 5
1.1.4 個人簡歷示例..•••••• 6
1.2 有色有彩——網頁文本顏色.••••••••••• 11
1.2.1 為文本挑選顏色.. ••• 11
1.2.2 為文本套用顏色樣式.••••• 12
1.2.3 自定義(顏色)樣式.••••• 13
1.3 唐詩三首——網頁文本字型.••••••••••• 16
1.3.1 編輯字型列表..•••• 16
1.3.2 定義文本字型樣式.••••••••• 18
1.3.3 套用文本字型樣式.••••••••• 19
1.4 花色文本——網頁特色文本.••••••••••• 20
1.4.1 解決網頁空格問題.••••••••• 21
1.4.2 Dreamweaver 軟體自帶的特殊字元••••••••22
1.4.3 輸入法自帶特殊字元.••••• 22
1.4.4 特殊字型——特殊字元••••24
1.5 多彩文案稿——網頁背景••••• 26
1.5.1 文本的背景顏色••••• 26
1.5.2 文本的背景圖像•••••28
1.6 網頁字型樣式正常設定步驟.••••••••••• 30
1.6.1 網頁主體文本的定義.••••• 30
1.6.2 網頁段落文本的定義.••••• 32
1.6.3 自定義文本樣式•••••33
第2 章 耳目一新的網頁圖像35
2.1 一張照片——插入圖像•••••••35
2.1.1 有關圖像插入的反面案例•••••35
2.1.2 規範的圖像插入到網頁.•••••39
2.1.3 縮略圖效果••••••••••••43
2.2 網路相冊——真正的網站相冊•••••••••45
2.2.1 創建網站相冊•••••••••45
2.2.2 相冊框線•••••48
2.3 老母雞變鴨——滑鼠經過圖像.•••••••••50
2.3.1 滑鼠經過圖像效果前的準備工作.••••50
2.3.2 滑鼠經過圖像的製作.•••••••••52
2.3.3 滑鼠經過圖像的網頁套用.•53
2.3.4 網頁導航條..••••••••••••55
2.4 領導致辭——圖文混排.•••••••57
2.4.1 常規的圖文混排..•••••57
2.4.2 CSS 設定的圖文混排.•••••••••60
2.5 立體感的網頁——背景圖像.•••••••••••••62
2.5.1 書本活頁——縱向重複的背景圖像.63
2.5.2 玻璃瓦屋檐——橫向重複的背景圖像•••••••••••••65
2.5.3 書頁卷角——定位的背景圖像.••••••••68
第3 章 表格布局網頁.••••••••••• 71
3.1 課程表——表格基礎.•••••••••••71
3.1.1 建立Dreamweaver 站點.•••••71
3.1.2 插入表格•••••73
3.1.3 合併單元格..••••••••••••74
3.1.4 表格屬性•••••76
3.2 色卡填充——表格背景.•••••••80
3.2.1 設定背景顏色..•••••••••80
3.2.2 CSS 定義背景顏色•••••82
3.3 六神合體——插入切片圖像.•••••••••••••84
3.3.1 獲得切片圖像•••••••••85
3.3.2 插入表格•••••86
3.3.3 插入切片圖像•••••87
3.4 表格大演習——圓角、細線、陰影表格••••••••••88
3.4.1 圓角表格•••••88
3.4.2 細線表格•••••92
3.4.3 陰影漸變表格••••••95
3.5 個人網頁——表格布局.•••••100
3.5.1 個人網頁製作前準備.••• 100
3.5.2 表格布局網頁..•• 101
3.5.3 嵌套表格..•••••••••• 103
3•••5•••4 CSS 樣式定義•••••••• 105
第4 章 炫酷的網頁多媒體•••109
4•••1 我要聽歌——插入音頻到網頁•••••••• 109
4•••1•••1 音樂線上視聽•••••••• 109
4•••1•••2 網頁背景音樂•••••••••111
4•••2 家庭影院——插入視頻到網頁•••••••• 112
4•••2•••1 常見插入視頻方案•••••••••••112
4•••2•••2 插入視頻代碼方案•••••••••••114
4•••2•••3 線上影院•••••••••••••••••116
4•••3 動感網頁——插入Flash 動畫••••••••• 119
4•••3•••1 純Flash 網頁•••••••••••119
4•••3•••2 插入Flash 按鈕到頁面••• 121
4•••4 透明Flash——Flash 套用•••••••••••••••• 122
4•••4•••1 透明Flash 的套用說明••• 122
4•••5 FLV 視頻站——Flash 視頻•••••••••••••• 126
4•••5•••1 Flash 視頻基礎••••••• 126
4•••5•••2 插入Flash 視頻•••••• 127
第5 章 超能的超連結•••••••••••129
5•••1 網址大全——外部連結••••• 129
5•••1•••1 文本連結•••••••••••••••• 129
5•••1•••2 圖像連結•••••••••••••••• 130
5•••1•••3 其他形式的連結•••••••••••••• 132
5•••2 我的網站——內部連結••••• 133
5•••2•••1 站內連結方法一•••••••••••••• 133
5•••2•••2 站內連結方法二•••••••••••••• 134
5•••2•••3 站內連結更新•••••••• 134
5•••3 頁內連結——錨記連結••••• 135
5•••3•••1 命名錨記•••••••••••••••• 135
5•••3•••2 添加錨記連結•••••••• 136
5•••3•••3 錨記連結的網頁套用•••••• 137
5•••4 中國地圖——圖像熱點連結•••••••••••• 140
5•••4•••1 圖像熱點連結的製作•••••• 140
5•••4•••2 圖像熱點連結的套用•••••• 142
5•••5 連結也精彩——連結的CSS 樣式••• 144
5•••5•••1 文本連結的樣式••••••••145
5•••5•••2 單個頁面的不同連結樣式••••••••••••••••148
提 高 篇
第6 章 “耀眼”的DIV 標籤••••••••••••••152
6•••1 超酷相冊——顯示/隱藏層•••152
6•••1•••1 繪製層、隱藏層••••••••153
6•••1•••2 顯示/隱藏層•••••••••••••••154
6•••1•••3 顯示/隱藏層的套用——超酷相冊•••157
6•••2 線上試衣——拖動AP 元素•••••••••••••••162
6•••2•••1 拖動AP 元素•••••••••••••163
6•••2•••2 線上試衣••••••165
6•••3 漂浮廣告——時間軸動畫••••168
6•••3•••1 時間軸動畫••••••••••••••••168
6•••3•••2 動感的下拉選單••••••••171
6•••4 CSS 布局——DIV 標籤的套用••••••••••175
6•••4•••1 一列固定居中顯示••••••••••••••176
6•••4•••2 兩列固定並排顯示••••••••••••••178
6•••4•••3 兩列並排居中顯示••••••••••••••181
6•••5 Web 標準網頁製作——XHTML+CSS••••••••••••185
6•••5•••1 認識Web 標準•••••••••••185
6•••5•••2 Web 標準的實現••••••••185
6•••5•••3 Web 標準的布局標籤••••••••••186
6•••5•••4 文本列表布局示例••••••••••••••187
第7 章 網頁模板••••••••••189
7•••1 網頁模板及可編輯區域••••••••189
7•••1•••1 新建網頁模板••••••••••••189
7•••1•••2 新建可編輯區域••••••••190
7•••1•••3 套用模板到網頁••••••••191
7•••2 重複區域••••••••192
7•••3 套用模板後的操作••••••196
7•••3•••1 更新模板檔案••••••••••••196
7•••3•••2 從模板中分離••••••••••••197
網頁賞析
第8 章 Ajax 框架Spry•••••••••198
8•••1 Spry 頁面特效••••••••••• 198
8•••1•••1 Spry 選單欄•••••••••••• 198
8•••1•••2 Spry 選項卡式面板••••••••• 201
8•••1•••3 Spry 摺疊式•••••••••••• 202
8•••1•••4 Spry 可摺疊面板••••••••••••• 204
8•••2 Spry 驗證表單••••••••••• 205
8•••2•••1 在網頁中套用表單•••••••••• 205
8•••2•••2 Spry 驗證文本域••••••••••••••211
8•••2•••3 Spry 驗證選擇•••••••• 214
8•••2•••4 Spry 驗證複選框••••••••••••• 215
8•••2•••5 Spry 驗證文本區域••••••••• 216
8•••3 Spry XML 數據操作••••••••••• 217
8•••3•••1 Spry XML 數據集•••••••••• 218
8•••3•••2 Spry 區域••••••••••••••• 219
8•••3•••3 Spry 重複項••••••••••• 220
8•••3•••4 Spry 重複列表••••••• 222
8•••3•••5 Spry 表••••••••••••••••••• 223
8•••3•••6 Spry 遠程XML 數據套用•••••••••••• 226
綜 合 篇
第9 章 個人部落格網站•••••••••••230
9•••1 部落格網站的策劃準備••••••••• 230
9•••1•••1 了解部落格網站的概況•••••• 230
9•••1•••2 建立Dreamweaver 站點•••••••••••••••• 231
9•••2 部落格網站模板網頁建立••••• 232
9•••2•••1 模板檔案和CSS 檔案的建立••••••• 232
9•••2•••2 設計模板布局•••••••• 235
9•••2•••3 豐富模板內容•••••••• 237
9•••3 CSS 定義模板網頁布局••••• 245
9•••3•••1 定義網頁的主體CSS 樣式••••••••••• 245
9•••3•••2 定義網頁的標識區CSS 樣式••••••• 246
9•••3•••3 定義網頁的導航區CSS 樣式••••••• 249
9•••3•••4 定義網頁的內容區CSS 樣式••••••• 253
9•••3•••5 定義網頁的底部信息區CSS 樣式•••••••••263
9•••3•••6 增加廣告條並定義CSS••••••264
9•••4 定義模板的可編輯區域和重複區域••••••••••••266
9•••4•••1 定義可編輯區域••••••••266
9•••4•••2 定義重複區域••••••••••••267
9•••5 套用模板完成部落格網站••••••••269
9•••5•••1 製作部落格首頁••••••••••••269
9•••5•••2 製作部落格內容頁••••••••270
9•••5•••3 添加連結完成部落格網站••••••270
第10 章 婚紗攝影網站••••••••••272
10•••1 婚紗攝影網站之思考••••••••••272
10•••1•••1 如何設計婚紗攝影網站••••272
10•••1•••2 建立Dreamweaver 站點••••273
10•••2 建立網站模板••••••••••••274
10•••2•••1 建立模板檔案和CSS 檔案•••••••••••••275
10•••2•••2 設計模板網頁的結構••••••••277
10•••2•••3 在模板頁插入網頁內容••••281
10•••3 CSS 布局網頁••••••••••••283
10•••3•••1 定義網頁主體CSS••••••••••••283
10•••3•••2 定義網頁標識區CSS••••••••284
10•••3•••3 定義廣告條區CSS••••••••••••285
10•••3•••4 定義側欄CSS ••••••••••287
10•••3•••5 定義主要內容區域的CSS ••••••••••••••288
10•••3•••6 清除浮動••••••••••••••••••292
10•••3•••7 定義底部信息的CSS••••••••293
10•••4 設定模板可編輯區域並套用模板••••294
10•••4•••1 為模板新建可編輯區域••••294
10•••4•••2 套用模板製作網頁••••••••••••295
10•••5 完善網站首頁和內容頁從而完成網站製作••••••••••••296
10•••5•••1 完善“作品展示”頁••••••••296
10•••5•••2 完善“關於我們”頁••••••••300
第11 章 房地產類網站••••••••••304
11•••1 房地產類網站之思考••••••••••304
11•••1•••1 了解房地產類網站••••••••••••304
11•••1•••2 建立Dreamweaver 站點••••305
11•••2 建立房地產類網站模板••••••306
11•••2•••1 建立網站模板和CSS 檔案•••••••••••••306
11•••2•••2 設計網站模板檔案的頁面結構•••••••308
11•••2•••3 繼續豐富網站模板結構••••312
11•••3 CSS 定義網頁布局••••••••••• 314
11•••3•••1 定義網頁主體的CSS•••• 314
11•••3•••2 定義頂部信息的CSS•••• 315
11•••3•••3 定義頁面內容區的CSS •••••••••••••• 316
11•••3•••4 定義側欄區的CSS•••••••• 317
11•••3•••5 定義主要內容區的CSS •••••••••••••• 319
11•••3•••6 清除浮動•••••••••••••• 322
11•••3•••7 定義底部信息區的CSS •••••••••••••• 323
11•••4 定義模板可編輯區域並套用模板•••••••••• 324
11•••4•••1 定義模板的可編輯區域•••••••••••••• 324
11•••4•••2 套用模板完成站點內頁•••••••••••••• 325
第12 章 遊戲類網站••••••••••••330
12•••1 遊戲類網站之思考••••••••••• 330
12•••1•••1 遊戲類網站準備•••••••••••• 330
12•••1•••2 建立Dreamweaver 站點•••••••••••••• 331
12•••2 設計網站模板頁面••••••••••• 332
12•••2•••1 新建模板檔案和CSS 檔案••••••••• 332
12•••2•••2 設計模板頁面結構•••••••• 334
12•••2•••3 豐富模板頁面內容•••••••• 337
12•••3 定義CSS 布局••••••••• 339
12•••3•••1 定義網頁主體的CSS•••• 339
12•••3•••2 定義網頁頭部的CSS 布局••••••••• 340
12•••3•••3 定義網頁主要內容區的CSS 布局•••••••••••••••342
12•••3•••4 定義網頁底部信息區的CSS 布局••••••••••••345
12•••3•••5 定義廣告條區的CSS 布局••••••••• 346
12•••3•••6 定義主要內容區的CSS 布局••••• 348
12•••3•••7 清除浮動•••••••••••••• 349
12•••4 定義模板可編輯區域和套用模板••••••••••••• 350
12•••4•••1 定義模板的可編輯區域•••••••••••••• 350
12•••4•••2 套用模板到頁••••••• 351
12•••4•••3 設計網頁內容••••••• 352
12•••4•••4 定義網頁內容CSS 布局••••••••••••• 353
第13 章 企業類網站••••••••••••360
13•••1 企業類網站之思考••••••••••• 360
13•••1•••1 了解企業類網站•••••••••••• 360
13•••1•••2 建立Dreamweaver 站點•••••••••••••• 360
13•••2 網站模板建設•••••••••• 361
13•••2•••1 建立模板網頁和CSS 檔案••••••••• 361
13•••3•••2 定義網頁“頂部信息區”的CSS•••373
13•••2•••3 豐富網頁模板結構••••••••••••368
13•••3 CSS 定義網頁布局••••••••••••••371
13•••3•••1 定義網頁主體CSS••••••••••••371
13•••3•••2 定義網頁“頂部信息區”的CSS•••373
13•••3•••3 定義網頁“導航區”的CSS•••••••••••378
13•••3•••4 定義網頁“內容區”的CSS•••••••••••382
13•••3•••5 定義網頁“側欄區”的CSS•••••••••••386
13•••3•••6 定義網頁“底部信息區”的CSS•••394
13•••4 套用模板製作網站內頁••••••395
13•••4•••1 定義模板的可編輯區域••••395
13•••4•••2 套用網頁模板•••••••••••396
13•••5 套用模板製作網站首頁••••••403
13•••5•••1 套用模板、分離模板••••••••403
13•••5•••2 設計首頁內容結構••••••••••••404
13•••5•••3 CSS 定義樣式•••••••••••409
第14 章 門戶類網站••••••••••••••416
14•••1 門戶類網站之準備••••••••••••••416
14•••1•••1 了解門戶類網站•••••••416
14•••1•••2 建立Dreamweaver 站點••••417
14•••2 網站模板建設••••••••••••418
14•••2•••1 建立模板網頁和CSS 檔案•••••••••••••418
14•••2•••2 設計網頁模板結構••••••••••••420
14•••2•••3 豐富網頁模板結構••••••••••••422
14•••3 CSS 定義網頁布局••••••••••••••425
14•••3•••1 定義網頁主體CSS••••••••••••425
14•••3•••2 定義網頁頭部區CSS ••••••••427
14•••3•••3 定義網頁搜尋區CSS ••••••••434
14•••3•••4 定義網頁底部信息區CSS ••••••••••••••437
14•••4 定義和套用網頁模板••••••••••440
14•••4•••1 新建網頁可編輯區域••••••••440
14•••4•••2 套用網頁模板•••••••••••440
14•••5 建設網站首頁••••••••••••441
14•••5•••1 創建網站內容區域••••••••••••441
14•••5•••2 建設網站側欄結構••••••••••••446
14•••5•••3 建設網站主要內容欄••••••••457
14•••5•••4 建設網頁廣告欄區域••••••••467
網頁賞析

相關詞條

相關搜尋

熱門詞條

聯絡我們