《網頁設計與製作實例教程》是2013年人民郵電出版社出版的圖書，作者是劉萬輝。
基本介紹
- 書名：網頁設計與製作實例教程
- 作者：劉萬輝
- ISBN：978-7-115-29373-2
- 類別：網頁設計製作
- 頁數：259
- 定價：39.80 元
- 出版社：人民郵電出版社
- 出版時間：2013年2月
- 裝幀：平裝
- 開本：16
- 字數：426000
內容提要,圖書目錄,
內容提要
本書以培養職業能力為核心，以工作實踐為主線，以實例套用為導向，建立以企業工作流程為框架的現代職業教育課程結構，面向網頁設計師崗位設定課程內容。
本書教學內容採用模組化的編寫思路，主要有網頁設計概述、網站規劃與製作流程、網頁效果圖設計、Dreamweaver創建基本網頁、多媒體元素的製作與套用、框架與表格布局頁面、HTML語言套用、CSS樣式表的套用、模板與庫的套用、JavaScript腳本套用、HTML+CSS頁面布局、網站的測試與發布、綜合教學實例、項目開發綜合實訓14個主教學模組，構成了系統的課程教學內容體系，所有教學內容符合崗位需求。同時本書以“書法家莊輝個人網站”項目貫穿始終講解了靜態網站的開發過程，同時又以“淮安市專用汽車製造有限公司網站”作為綜合實例系統講解了動態網站的開發過程。初級網頁設計師通過本書的學習，輔助項目實訓的系統鍛鍊必將勝任企業網頁設計師的崗位。
本書結構合理，內容豐富，實用性強，可以作為計算機類專業、商務類專業、藝術類專業的教學用書，也可以作為培訓教程，還可以作為相關專業從業人員的自學用書。
本書教學內容採用模組化的編寫思路，主要有網頁設計概述、網站規劃與製作流程、網頁效果圖設計、Dreamweaver創建基本網頁、多媒體元素的製作與套用、框架與表格布局頁面、HTML語言套用、CSS樣式表的套用、模板與庫的套用、JavaScript腳本套用、HTML+CSS頁面布局、網站的測試與發布、綜合教學實例、項目開發綜合實訓14個主教學模組，構成了系統的課程教學內容體系，所有教學內容符合崗位需求。同時本書以“書法家莊輝個人網站”項目貫穿始終講解了靜態網站的開發過程，同時又以“淮安市專用汽車製造有限公司網站”作為綜合實例系統講解了動態網站的開發過程。初級網頁設計師通過本書的學習，輔助項目實訓的系統鍛鍊必將勝任企業網頁設計師的崗位。
本書結構合理，內容豐富，實用性強，可以作為計算機類專業、商務類專業、藝術類專業的教學用書，也可以作為培訓教程，還可以作為相關專業從業人員的自學用書。
圖書目錄
第1章 網頁設計概述 1
1.1 網頁、網站的概念 1
1.1.1 網頁、網站和主頁 1
1.1.2 專業術語 1
1.1.3 靜態網頁和動態網頁 3
1.2 Web標準 4
1.2.1 Web標準的概念 4
1.2.2 建立Web標準的目的 4
1.2.3 採用Web標準的優點 4
1.3 常用網頁製作軟體 5
1.3.1 網頁圖形圖像處理工具 5
1.3.2 網站頁面的編輯工具 6
1.3.3 網頁動畫的製作工具 7
1.3.4 網頁CMS系統套用軟體 8
1.3.5 網頁上傳工具 9
1.4 實例1：優秀網站的賞析與蒐集 11
1.4.1 優秀網頁實例欣賞 11
1.4.2 實例拓展：網頁界面的收集與整理 13
1.5 習題 14
第2章 網站規劃與製作流程 15
2.1 網站規劃的內容及原則 15
2.1.1 網站策劃的一般內容 15
2.1.2 網站形象策劃原則 16
2.2 實例1：專業建設網站製作流程 18
2.2.1 前期策劃與內容組織 18
2.2.2 收集和整理資料 20
2.2.3 網站效果圖的設計製作 20
2.2.4 網站頁面的設計製作 21
2.2.5 靜態頁面的動態化 22
2.2.6 網站測試與發布 23
2.2.7 站點的更新與維護 23
2.3 實例2：書法家莊輝網站項目規劃 23
2.3.1 網站策劃書的要點 23
2.3.2 書法家莊輝網站策劃書 25
2.4 習題 27
第3章 網頁效果圖設計 28
3.1 網頁色彩概述 28
3.1.1 色彩的基本理論 28
3.1.2 顏色的含義 29
3.2 網頁配色方案 30
3.2.1 網頁配色的原則 30
3.2.2 網頁配色的方法 31
3.3 網站版式布局 33
3.3.1 網頁版式布局的要點 33
3.3.2 版式構成的類型 34
3.3.3 網頁布局類型的確定方法 35
3.4 Photoshop套用基礎 38
3.4.1 認識Photoshop CS5界面 38
3.4.2 Photoshop CS5的基本操作 39
3.4.3 圖層的相關套用 46
3.4.4 Photoshop CS5專業快捷鍵的套用 49
3.5 實例1：書法家莊輝主頁效果圖設計 49
3.5.1 實例製作過程 49
3.5.2 實例拓展1：企業Logo的製作 52
3.5.3 實例拓展2：網頁效果圖切片 54
3.6 Photoshop高級套用 55
3.6.1 通道的概念與使用技巧 55
3.6.2 蒙板的概念與使用技巧 57
3.6.3 路徑的概念與使用技巧 58
3.7 實例2：書法家莊輝模板頁效果圖設計 61
3.7.1 實例實施過程 61
3.7.2 實例拓展：線的製作與使用技巧 65
3.8 習題 66
第4章 Dreamweaver創建基本網頁 67
4.1 Dreamweaver CS5入門 67
4.1.1 Dreamweaver CS5工作環境 67
4.1.2 Dreamweaver CS5的參數設定 71
4.2 製作簡單網頁 72
4.2.1 創建網站站點 73
4.2.2 新建與保存網頁 75
4.2.3 頁面屬性設定 75
4.2.4 網頁的基本排版 77
4.2.5 插入圖像 79
4.3 插入表格、超級連結與Flash 80
4.3.1 Dreamweaver插入表格 80
4.3.2 Dreamweaver插入超級連結 81
4.3.3 Dreamweaver插入Flash元素 82
4.4 實例：書法家莊輝個人介紹頁面製作 83
4.4.1 實例設計思路 83
4.4.2 實例實施過程 84
4.5 練習 87
第5章 多媒體元素的製作與套用 89
5.1 多媒體對象的基本知識 89
5.1.1 音頻媒體的格式 89
5.1.2 視頻媒體的格式 90
5.2 多媒體素材的製作 91
5.2.1 FlashPaper電子文檔的製作方法 91
5.2.2 螢幕錄製視頻的方法 92
5.3 常用動畫製作軟體 93
5.3.1 Photoshop的“動畫”面板 93
5.3.2 Photoshop製作過渡動畫 94
5.3.3 Flash Swish軟體認識 95
5.4 實例：書法家莊輝個人網站動畫的設計 96
5.4.1 實例展示 96
5.4.2 實例實施過程 97
5.5 插入多媒體元素 99
5.5.1 插入視頻與音頻元素 99
5.5.2 插入FlashPaper電子文檔 100
5.5.3 插入背景音樂 100
5.6 習題 101
第6章 框架與表格布局頁面 102
6.2 框架布局的基本套用 102
6.1.1 框架面板 102
6.1.2 創建框架頁 103
6.1.3 框架的選擇與保存 104
6.1.4 設定框架的屬性 104
6.1.5 設定框架集的屬性 105
6.2 實例1：無名山人作品集框架網頁 105
6.2.1 實例設計思路 105
6.2.2 實例實施過程 107
6.3 實例2：淮安市維達科技有限公司網站布局 109
6.3.1 實例設計思路 109
6.3.2 實例實施過程 109
6.4 習題 113
6.2 實例1：無名山人作品集框架網頁 105
6.2.1 實例設計思路 105
6.2.2 實例實施過程 107
6.3 實例2：淮安市維達科技有限公司網站布局 109
6.3.1 實例設計思路 109
6.3.2 實例實施過程 109
6.4 習題 113
第7章 HTML語言套用 114
7.1 HTML的基本概念 114
7.1.1 HTML簡介 114
7.1.2 HTML的結構 114
7.1.3 HTML的標記 115
7.2 <head>與<body>標籤 116
7.2.1 <head>標籤 116
7.2.2 <body>標籤 117
7.3 文欄位落與多媒體元素 117
7.3.1 文欄位落相關標記 117
7.3.2 網頁中插入圖片標籤<img> 120
7.3.3 播放音頻與視頻 120
7.4 列表 121
7.4.1 無序列表<ul> 121
7.4.2 有序列表<ol> 121
7.4.3 嵌套列表 122
7.5 表格 122
7.5.1 表格的基本結構 123
7.5.2 表格的尺寸設定 124
7.5.3 表格內文字的對齊與合併 124
7.6 超連結 125
7.6.1 創建內部超連結 125
7.6.2 創建文字超連結 125
7.6.3 創建圖片超連結 126
7.7 插入表單 127
7.7.1 表單的定義 127
7.7.2 表單控制項 127
7.8 框架的使用 131
7.8.1 框架集 131
7.8.2 子視窗<frame>標籤的設定 132
7.9 實例1：現代教育技術中心網站HTML編輯 133
7.9.1 實例設計思路 133
7.9.2 實例實施過程 133
7.10 實例2：客戶留言信息表單編輯 137
7.11 實例3：無名山人作品集框架頁HTML編輯 138
7.12 習題 139
7.1 HTML的基本概念 114
7.1.1 HTML簡介 114
7.1.2 HTML的結構 114
7.1.3 HTML的標記 115
7.2 <head>與<body>標籤 116
7.2.1 <head>標籤 116
7.2.2 <body>標籤 117
7.3 文欄位落與多媒體元素 117
7.3.1 文欄位落相關標記 117
7.3.2 網頁中插入圖片標籤<img> 120
7.3.3 播放音頻與視頻 120
7.4 列表 121
7.4.1 無序列表<ul> 121
7.4.2 有序列表<ol> 121
7.4.3 嵌套列表 122
7.5 表格 122
7.5.1 表格的基本結構 123
7.5.2 表格的尺寸設定 124
7.5.3 表格內文字的對齊與合併 124
7.6 超連結 125
7.6.1 創建內部超連結 125
7.6.2 創建文字超連結 125
7.6.3 創建圖片超連結 126
7.7 插入表單 127
7.7.1 表單的定義 127
7.7.2 表單控制項 127
7.8 框架的使用 131
7.8.1 框架集 131
7.8.2 子視窗<frame>標籤的設定 132
7.9 實例1：現代教育技術中心網站HTML編輯 133
7.9.1 實例設計思路 133
7.9.2 實例實施過程 133
7.10 實例2：客戶留言信息表單編輯 137
7.11 實例3：無名山人作品集框架頁HTML編輯 138
7.12 習題 139
第8章 CSS樣式表的套用 140
8.1 CSS簡介 140
8.1.1 CSS的概念 140
8.1.2 CSS的特點 141
8.1.3 樣式表的規則 141
8.2 創建新樣式表與套用樣式表 141
8.2.1 “CSS樣式”面板 141
8.2.2 “新建CSS規則”對話框 142
8.2.3 新建與套用CSS樣式 143
8.2.4 連結外部CSS樣式表 144
8.3 CSS的規則定義 145
8.3.1 定義CSS樣式“類型”屬性 145
8.3.2 定義CSS樣式“背景”屬性 146
8.3.3 定義CSS樣式“區塊”屬性 146
8.3.4 定義CSS樣式“方框”屬性 147
8.3.5 定義CSS樣式“框線”屬性 148
8.3.6 定義CSS樣式“列表”屬性 149
8.3.7 定義CSS樣式“定位”屬性 149
8.3.8 定義CSS樣式“擴展”屬性 150
8.4 實例：淮安市高校教學資源共建共享平台CSS樣式設計 150
8.5 習題 154
8.1 CSS簡介 140
8.1.1 CSS的概念 140
8.1.2 CSS的特點 141
8.1.3 樣式表的規則 141
8.2 創建新樣式表與套用樣式表 141
8.2.1 “CSS樣式”面板 141
8.2.2 “新建CSS規則”對話框 142
8.2.3 新建與套用CSS樣式 143
8.2.4 連結外部CSS樣式表 144
8.3 CSS的規則定義 145
8.3.1 定義CSS樣式“類型”屬性 145
8.3.2 定義CSS樣式“背景”屬性 146
8.3.3 定義CSS樣式“區塊”屬性 146
8.3.4 定義CSS樣式“方框”屬性 147
8.3.5 定義CSS樣式“框線”屬性 148
8.3.6 定義CSS樣式“列表”屬性 149
8.3.7 定義CSS樣式“定位”屬性 149
8.3.8 定義CSS樣式“擴展”屬性 150
8.4 實例：淮安市高校教學資源共建共享平台CSS樣式設計 150
8.5 習題 154
第9章 模板與庫的套用 155
9.1 模板 155
9.1.1 模板的概念 155
9.1.2 模板的新建 155
9.1.3 定義可編輯區域 157
9.2 模板的套用 158
9.3 庫 159
9.3.1 庫的概念 159
9.3.2 庫項目的創建 160
9.3.3 編輯庫項目 161
9.4 實例：書法家莊輝個人網站模板套用 161
9.4.1 模板與庫的設計 161
9.4.2 創建庫項目 162
9.4.3 網站模板的創建 162
9.4.4 套用模板創建並編輯網頁 163
9.5 習題 164
9.1 模板 155
9.1.1 模板的概念 155
9.1.2 模板的新建 155
9.1.3 定義可編輯區域 157
9.2 模板的套用 158
9.3 庫 159
9.3.1 庫的概念 159
9.3.2 庫項目的創建 160
9.3.3 編輯庫項目 161
9.4 實例：書法家莊輝個人網站模板套用 161
9.4.1 模板與庫的設計 161
9.4.2 創建庫項目 162
9.4.3 網站模板的創建 162
9.4.4 套用模板創建並編輯網頁 163
9.5 習題 164
第10章 JavaScript腳本套用 165
10.1 JavaScript套用基礎 165
10.1.1 JavaScript簡介 165
10.1.2 JavaScript的特點 165
10.1.3 網頁中套用JavaScript的方法及定義 166
10.2 基於對象的JavaScript腳本語言 166
10.2.1 對象及相關概念 166
10.2.2 DHTML對象模型簡介 168
10.2.3 事件介紹 168
10.3 Spry構件套用 169
10.3.1 Spry選單欄構件 169
10.3.2 Spry選項卡式面板構件 170
10.3.3 Spry摺疊構件 171
10.4 常用的JavaScript特效套用實例 172
10.4.1 實例1：日期顯示效果 172
10.4.2 實例2：圖片展示幻燈片Flash切換效果 172
10.4.3 實例3：圖片展示幻燈片切換效果 174
10.4.4 實例4：文本或圖像滾動效果 176
10.4.5 實例5：網頁飄動廣告效果 177
10.5 實例：驗證用戶登錄界面 178
10.6 習題 181
10.1 JavaScript套用基礎 165
10.1.1 JavaScript簡介 165
10.1.2 JavaScript的特點 165
10.1.3 網頁中套用JavaScript的方法及定義 166
10.2 基於對象的JavaScript腳本語言 166
10.2.1 對象及相關概念 166
10.2.2 DHTML對象模型簡介 168
10.2.3 事件介紹 168
10.3 Spry構件套用 169
10.3.1 Spry選單欄構件 169
10.3.2 Spry選項卡式面板構件 170
10.3.3 Spry摺疊構件 171
10.4 常用的JavaScript特效套用實例 172
10.4.1 實例1：日期顯示效果 172
10.4.2 實例2：圖片展示幻燈片Flash切換效果 172
10.4.3 實例3：圖片展示幻燈片切換效果 174
10.4.4 實例4：文本或圖像滾動效果 176
10.4.5 實例5：網頁飄動廣告效果 177
10.5 實例：驗證用戶登錄界面 178
10.6 習題 181
第11章 HTML+CSS頁面布局 183
11.1 DIV布局基礎 183
11.1.1 理解表現和內容的分離 183
11.1.2 選擇符的分類 184
11.1.3 類標籤與id標籤的套用 185
11.1.4 元素的繼承性與分類 187
11.2 DIV+CSS布局基礎 187
11.2.1 CSS盒模型 187
11.2.2 CSS布局基礎 189
11.2.3 單行單列結構 190
11.2.4 二列布局結構 191
11.2.5 三列式布局結構 196
11.3 實例：數位化教學資源平台網站布局 199
11.3.1 效果圖的分析與切片 199
11.3.2 製作站點的首頁頭部 200
11.3.3 製作首頁的主體部分 204
11.3.4 製作首頁的底部 214
11.4 習題 215
11.1 DIV布局基礎 183
11.1.1 理解表現和內容的分離 183
11.1.2 選擇符的分類 184
11.1.3 類標籤與id標籤的套用 185
11.1.4 元素的繼承性與分類 187
11.2 DIV+CSS布局基礎 187
11.2.1 CSS盒模型 187
11.2.2 CSS布局基礎 189
11.2.3 單行單列結構 190
11.2.4 二列布局結構 191
11.2.5 三列式布局結構 196
11.3 實例：數位化教學資源平台網站布局 199
11.3.1 效果圖的分析與切片 199
11.3.2 製作站點的首頁頭部 200
11.3.3 製作首頁的主體部分 204
11.3.4 製作首頁的底部 214
11.4 習題 215
第12章 網站的測試與發布 216
12.1 網站的整合 216
12.2 本地站點測試網站 217
12.2.1 網站測試的參數 217
12.2.2 實例：測試書法家莊輝個人網站 217
12.3 網站的發布 220
12.3.1 域名申請 220
12.3.2 申請空間 221
12.3.3 申請免費域名、空間 221
12.3.4 設定遠程站點 222
12.3.5 連線伺服器 223
12.3.6 檔案的上傳和下載 223
12.3.7 測試發布後的網站 224
12.4 習題 224
12.1 網站的整合 216
12.2 本地站點測試網站 217
12.2.1 網站測試的參數 217
12.2.2 實例：測試書法家莊輝個人網站 217
12.3 網站的發布 220
12.3.1 域名申請 220
12.3.2 申請空間 221
12.3.3 申請免費域名、空間 221
12.3.4 設定遠程站點 222
12.3.5 連線伺服器 223
12.3.6 檔案的上傳和下載 223
12.3.7 測試發布後的網站 224
12.4 習題 224
第13章 淮安市專用汽車製造有限公司網站建設 225
13.1 項目目標與項目展示 225
13.1.1 項目展示 225
13.1.2 項目目標 225
13.2 項目資訊 226
13.2.1 網站需求分析 226
13.2.2 網站的風格定位 226
13.2.3 規劃草圖 227
13.3 項目計畫 227
13.4 效果圖與靜態頁面製作 228
13.4.1 效果圖設計 228
13.4.2 效果圖切片導出網頁 231
13.4.3 後期網頁編輯 232
13.4.4 動畫製作 236
13.4.5 動畫的使用 237
13.5 動態網站管理系統與靜態頁面的融合 237
13.5.1 搜尋網站管理平台 238
13.5.2 靜態前台與動態後台的檔案整合 239
13.5.3 IIS的安裝與配置 239
13.5.4 系統登錄與欄目的設定 241
13.5.5 網站內容的添加 242
13.5.6 網站模板的添加 243
13.5.7 前台網站調用後台程式 245
13.5.8 網站測試與後期完善 247
13.6 習題 248
13.1 項目目標與項目展示 225
13.1.1 項目展示 225
13.1.2 項目目標 225
13.2 項目資訊 226
13.2.1 網站需求分析 226
13.2.2 網站的風格定位 226
13.2.3 規劃草圖 227
13.3 項目計畫 227
13.4 效果圖與靜態頁面製作 228
13.4.1 效果圖設計 228
13.4.2 效果圖切片導出網頁 231
13.4.3 後期網頁編輯 232
13.4.4 動畫製作 236
13.4.5 動畫的使用 237
13.5 動態網站管理系統與靜態頁面的融合 237
13.5.1 搜尋網站管理平台 238
13.5.2 靜態前台與動態後台的檔案整合 239
13.5.3 IIS的安裝與配置 239
13.5.4 系統登錄與欄目的設定 241
13.5.5 網站內容的添加 242
13.5.6 網站模板的添加 243
13.5.7 前台網站調用後台程式 245
13.5.8 網站測試與後期完善 247
13.6 習題 248
第14章 項目開發綜合實訓 249
14.1 網頁設計師職業成長規律 249
14.1.1 從初學者到專家 249
14.1.2 網頁設計師的現狀分析 249
14.1.3 網頁設計師的崗位要求與學習重點 250
14.2 網站開發規範 253
14.2.1 組建開發團隊 253
14.2.2 開發工具 253
14.2.3 網站開發流程 254
14.2.4 資料夾檔案名稱命名規範 255
14.2.5 網站首頁head區代碼規範 255
14.2.6 網站建設尺寸規範 256
14.3 實訓任務安排 256
14.4 項目進展計畫 257
14.5 實訓報告書 258
14.1 網頁設計師職業成長規律 249
14.1.1 從初學者到專家 249
14.1.2 網頁設計師的現狀分析 249
14.1.3 網頁設計師的崗位要求與學習重點 250
14.2 網站開發規範 253
14.2.1 組建開發團隊 253
14.2.2 開發工具 253
14.2.3 網站開發流程 254
14.2.4 資料夾檔案名稱命名規範 255
14.2.5 網站首頁head區代碼規範 255
14.2.6 網站建設尺寸規範 256
14.3 實訓任務安排 256
14.4 項目進展計畫 257
14.5 實訓報告書 258
參考文獻 259
