Dreamweaver CS5網頁設計實例教程

本書介紹了運用Dreamweaver CS5進行網頁設計的基本方法和常用技巧。全書共分為12個項目。前兩個項目介紹網頁設計的基本知識，使讀者理解網頁設計的相關概念，掌握網頁設計的基本步驟和流程。項目3～項目8介紹用Dreamweaver CS5製作網頁的常用方法，主要包括幾種基本元素、超級連結、表格、框架的布局方法和目前較為流行的CSS+Div的布局方法。項目9介紹網頁中常見的特效行為的製作方法。項目10介紹表單的相關知識，項目11介紹模板的製作和使用方法，最後一個項目詳細介紹了一個網站開發的綜合實例。 本書既適合作為高職高專院校、培訓機構學習網頁設計的教學用書，也可以作為網頁設計愛好者的自學用書。

基本介紹

• 書名：Dreamweaver CS5網頁設計實例教程
• ISBN：9787302329503
• 定價：36元
• 出版時間：2015-1-19
• 裝幀：平裝
• 印次：1-2

圖書目錄

項目1網頁設計基礎/1任務1.1認識網頁1

1.1.1網頁的分類2

1.1.2網頁設計常用術語2

1.1.3網站開發流程5

任務1.2了解HTML5

1.2.1什麼是HTML5

1.2.2用HTML編寫自己的第一個網頁6

1.2.3HTML中的常用標籤符號7

任務1.3Dreamweaver CS5的安裝與使用11

1.3.1安裝Dreamweaver CS512

1.3.2使用Dreamweaver CS516

1.3.3用Dreamweaver CS5建立一個網頁16

項目小結20

項目實訓21

實訓1.1用HTML建立歡迎頁面21

實訓1.2用Dreamweaver CS5建立歡迎頁面21

項目2建立及管理網站/22

任務2.1在計算機上建立本地網站22

2.1.1建立“我的第一個網站”23

2.1.2本地站點的管理24

2.1.3管理和編輯本地站點檔案27

任務2.2發布網站28

2.2.1網站空間28

2.2.2設定遠程伺服器30

2.2.3上傳網站32

任務2.3網站的更新和維護33〖2〗〖3〗〖4〗2.3.1本地和遠程資料夾的結構33

2.3.2下載站點中的檔案33

2.3.3本地檔案和遠程檔案的同步34

項目小結35

項目實訓35

實訓2.1為站點申請空間35

實訓2.2建立並上傳網站“我的家”35

項目3向網頁中添加各種元素/36

任務3.1向網頁中添加文本36

3.1.1案例導入——建立“班級簡介”網頁36

3.1.2在Dreamweaver中創建普通文本37

3.1.3一些特殊文本的輸...

3.1.4文本的常用格式設定41

3.1.5觀察文本對應的代碼42

任務3.2向網頁中添加圖像43

3.2.1案例導入——建立“汽車之家”網頁43

3.2.2網頁中常用的圖像格式44

3.2.3插入圖像44

3.2.4給圖像描邊46

3.2.5給無法顯示的圖像加注釋47

3.2.6圖像的編輯47

3.2.7圖文混排49

3.2.8觀察圖像對應的代碼50

任務3.3向網頁中添加聲音50

3.3.1案例導入——建立“音樂播放”網站51

3.3.2向網頁中插入可控制播放的聲音51

3.3.3在網頁中套用背景聲音54

任務3.4向網頁中添加視頻56

3.4.1案例導入——建立“視頻播放”網頁56

3.4.2向網頁中添加Flash動畫56

3.4.3向網頁中添加FLV視頻60

3.4.4向網頁中添加其他視頻檔案60

3.4.5觀察各種插入視頻的方法對應的代碼62

項目小結63

項目實訓63

實訓3.1建立文字編輯網頁63

實訓3.2建立“香香美食”網64

項目4實現網頁的超級連結/65

任務4.1認識超級連結65

4.1.1超級連結的分類65

4.1.2超級連結的路徑66

任務4.2創建內部超級連結67

4.2.1案例導入——設定“九寨溝四季”系列頁面的內部超級連結67

4.2.2創建文字超級連結67

4.2.3創建圖像超級連結68

4.2.4滑鼠經過圖像連結70

4.2.5觀察連結對應的代碼72

4.2.6設定“九寨溝四季”系列頁面的內部超級連結73

任務4.3創建錨記連結75

4.3.1案例導入——設定“插花藝術”網頁的錨記連結75

4.3.2創建命名錨記75

4.3.3連結到命名錨記75

4.3.4創建虛連結75

4.3.5觀察錨記連結對應的代碼76

4.3.6設定“插花藝術”網頁的錨記連結76

任務4.4創建其他超級連結78

4.4.1案例導入——向“九寨溝四季”網頁添加超級連結78

4.4.2創建外部超級連結78

4.4.3創建Email連結78

4.4.4創建下載檔案超級連結79

4.4.5創建腳本連結79

4.4.6為“九寨溝四季”網頁添加外部和電子郵件等連結80

任務4.5編輯超級連結81

4.5.1設定超級連結的外觀81

4.5.2刪除超級連結82

項目小結82

項目實訓83

實訓4.1製作“犬類美容”網頁的導航條83

實訓4.2製作“黃山四絕”系列頁面83

項目5用表格布局頁面/84

任務5.1表格的基本操作84

5.1.1案例導入——製作“全球經典電影TOP10”網頁84

5.1.2創建表格85

5.1.3調整表格的結構86

5.1.4表格輸入內容89

5.1.5利用“屬性”面板設定表格的外觀效果90

5.1.6觀察表格對應的代碼91

5.1.7製作“全球經典電影TOP10”網頁91

任務5.2表格中數據處理93

5.2.1案例導入——製作“各專業畢業生人數統計”網頁93

5.2.2數據的導入與導出93

5.2.3數據的排序96

5.2.4製作“各專業畢業生人數統計”網頁98

任務5.3使用表格布局網頁102

5.3.1案例導入——製作“畢業生就業信息網”首頁102

5.3.2嵌套表格102

5.3.3表格製作技巧103

5.3.4表格布局網頁的設計要點105

5.3.5製作“畢業生就業信息網”首頁106

項目小結110

項目實訓110

實訓5.1製作“信息工程系圖形圖像112班課程表”網頁110

實訓5.2製作“花影襲人”網站中“菊花簡介”的網頁111

實訓5.3製作“信息工程系教學評估網”首頁111

項目6用框架布局頁面/113

任務6.1創建框架網頁113

6.1.1案例導入——製作“信息工程系課程表”網頁113

6.1.2認識框架網頁114

6.1.3創建框架網頁114

6.1.4保存框架網頁116

6.1.5觀察框架集檔案對應的代碼119

6.1.6製作“信息工程系課程表”框架網頁119

任務6.2框架和框架集的基本操作122

6.2.1案例導入——製作“花卉護理——牡丹”網頁122

6.2.2選擇框架和框架集123

6.2.3編輯框架集的屬性123

6.2.4編輯框架的屬性124

6.2.5調整框架的大小125

6.2.6刪除框架125

6.2.7製作“花卉護理——牡丹”網頁125

任務6.3設定框架網頁的連結128

6.3.1框架內的連結128

6.3.2關鍵字的連結130

項目小結131

項目實訓131

實訓6.1用框架技術製作“暗香盈袖”網站系列頁面131

實訓6.2用框架技術製作“心情驛站”個人部落格的首頁132

項目7用CSS美化網頁/134

任務7.1認識CSS134

7.1.1案例導入——對“影迷俱樂部”網站中的網頁套用CSS134

7.1.2打開“新建CSS規則”的幾種方法137

7.1.3CSS常用屬性138

任務7.2建立和管理CSS樣式143

7.2.1建立可套用於任何HTML元素的CSS樣式144

7.2.2建立套用於一個HTML元素的CSS樣式145

7.2.3建立套用於指定標籤的CSS樣式147

7.2.4建立套用於指定範圍內標籤的CSS樣式149

7.2.5建立套用於多個標籤的CSS樣式151

7.2.6建立定義超級連結的CSS樣式153

7.2.7觀察CSS樣式對應的代碼155

7.2.8用“CSS樣式”面板管理CSS樣式157

任務7.3建立並套用外部CSS樣式158

7.3.1建立外部CSS樣式定義頁面文字和背景159

7.3.2在一個網頁中套用已建好的外部樣式162

任務7.4CSS常見套用163

7.4.1用CSS控制段落樣式163

7.4.2用CSS控制圖片樣式164

7.4.3用CSS控制背景圖片的樣式167

7.4.4用CSS美化列表168

7.4.5套用CSS濾鏡169

項目小結171

項目實訓172

實訓7.1為“影迷俱樂部”網站中的網頁設定格式172

實訓7.2設定“茶文化”網頁172

實訓7.3設定“新聞公告”網頁173

項目8用CSS+Div布局頁面/174

任務8.1認識Div與CSS盒模型174

8.1.1Div標籤174

8.1.2CSS盒模型176

任務8.2套用CSS實現定位180

8.2.1CSS的定位方式180

8.2.2相對定位181

8.2.3絕對定位182

8.2.4固定定位184

8.2.5浮動185

8.2.6清除浮動186

任務8.3CSS+Div布局實例188

8.3.1案例導入——個人部落格頁面188

8.3.2用CSS+Div布局網頁的步驟188

8.3.3用CSS+Div布局個人部落格網頁190

項目小結199

項目實訓199

實訓8.1了解DreamweaverCS5中的預設布局199

實訓8.2用CSS+Div布局“園林設計”網頁199

項目9向網頁添加行為/201

任務9.1了解行為201

9.1.1認識行為202

9.1.2附加行為202

任務9.2使用DreamweaverCS5內置的行為204

9.2.1用“行為”面板實現交換圖像行為204

9.2.2製作頁面打開時彈出廣告信息205

9.2.3製作打開瀏覽器視窗206

9.2.4製作可移動的面板207

9.2.5下拉選單的製作208

9.2.6為元素添加特殊的動畫效果210

任務9.3JavaScript行為的套用211

9.3.1認識JavaScript211

9.3.2調用JavaScript211

9.3.3單擊按鈕背景顏色變換212

9.3.4添加到收藏夾和設為首頁214

9.3.5製作滾動文字215

9.3.6實現滑鼠跟隨特效216

9.3.7實現懸浮廣告特效220

9.3.8滾動圖片特效221

項目小結223

項目實訓223

實訓9.1製作下拉選單223

實訓9.2實現JavaScript特效223

實訓9.3給校園新聞網添加行為224

項目10表單和Spry構件/225

任務10.1認識表單225

10.1.1案例導入——製作會員登記表225

10.1.2表單的組成225

10.1.3創建表單域226

任務10.2表單對象228

10.2.1插入表單對象的方法228

10.2.2文本域228

10.2.3按鈕230

10.2.4複選框230

10.2.5單選按鈕232

10.2.6列表/選單233

10.2.7跳轉選單234

10.2.8檔案域235

10.2.9圖像域235

10.2.10製作會員登記表236

任務10.3Spry框架238

10.3.1案例導入——製作“中原線上註冊”頁面238

10.3.2認識Spry構件239

10.3.3驗證文本域構件239

10.3.4驗證文本區域構件242

10.3.5驗證複選框構件243

10.3.6驗證選擇構件244

10.3.7驗證密碼構件245

10.3.8驗證確認構件245

10.3.9用Spry驗證構件製作“中原線上註冊”頁面246

項目小結248

項目實訓248

實訓10.1利用表單製作個人簡介頁面248

實訓10.2利用Spry驗證表單製作個人註冊頁面249

項目11製作網站模板並使用模板創建網頁/250

任務11.1了解DreamweaverCS5模板250

任務11.2模板區域的類型251

11.2.1認識模板區域251

11.2.2模板區域的3種類型251

任務11.3模板的使用251

11.3.1案例導入——通過模板創建“中原線上”網站251

11.3.2創建“中原線上”模板252

11.3.3使用模板創建“中原線上”子頁面254

任務11.4更新模板257

項目小結258

項目實訓258

實訓11.1修改模板導航條258

實訓11.2創建院系網頁模板，並創建院系網站259

項目12網站製作實例/260

任務12.1網站布局規劃分析260

12.1.1案例導入——製作“海南旅遊”網站260

12.1.2網頁布局規劃260

任務12.2製作主頁263

12.2.1頁面的全局布局263

12.2.2製作logo部分265

12.2.3製作上部導航欄266

12.2.4製作主體內容區268

12.2.5製作彈出式子選單272

12.2.6製作圖片循環播放效果274

12.2.7製作版權資訊部分並使用分隔線275

任務12.3製作子頁276

12.3.1進行頁面的全局布局276

12.3.2布局主體內容區277

12.3.3製作主體內容區左側圖片連結278

12.3.4製作主體內容區右側圖片連結281

項目小結282

項目實訓282

實訓完成本項目網頁的製作282

參考文獻/283