網頁設計與制作(Photoshop+Dreamweaver+Flash)立體化教程

項目一 網頁設計基礎 1
任務一 購物網站賞析 2
一、任務目標 2
二、相關知識 2
（一）網站、網頁、主頁概念 2
（二）網頁常用術語 2
（三）常用網頁制作軟件 4
（四）HTML標記語言 5
三、任務實施 7
任務二 規划「蓉錦大學」網站 7
一、任務目標 7
二、相關知識 8
（一）網頁設計內容 8
（二）網頁設計原則 8
三、任務實施 9
（一）前期策划與內容組織 9
（二）搜集和整理資料 10
（三）網頁效果圖設計 10
（四）網頁中動畫設計 11
（五）網站頁面設計制作 11
（六）網站測試與發布 12
實訓 規划「果蔬網」網站 12
常見疑難解析 13
拓展知識 13
課后練習 14

項目二 Dreamweaver CS5的基本操作 15
任務一 創建「果蔬網」站點 16
一、任務目標 16
二、相關知識 16
（一）認識Dreamweaver CS5的工作界面 16
（二）Dreamweaver CS5參數設置 20
（三）命名規則 20
三、任務實施 21
（一）創建站點 21
（二）編輯站點 21
（三）管理站點和站點文件夾 22
任務二 制作「學校簡介」頁面 24
一、任務目標 24
二、相關知識 24
三、任務實施 25
（一）新建與保存網頁 25
（二）設置頁面屬性 26
（三）輸入文本 27
（四）設置文本格式 29
（五）插入網頁其他元素 32
實訓一 創建「蓉錦大學」站點 33
實訓二 編輯「招生就業概況」網頁 34
常見疑難解析 34
拓展知識 35
課后練習 36

項目三 編輯網頁元素 37
任務一 制作「蓉錦大學」首頁頁面 38
一、任務目標 38
二、相關知識 38
（一）音頻文件格式 38
（二） 視頻文件格式 38
三、任務實施 39
（一）插入與編輯圖像 39
（二）優化圖像 40
（三）設置鼠標經過圖像 42
（四）添加背景音樂 43
（五）插入SWF動畫 44
任務二 為「果蔬網」網頁創建超鏈接 45
一、任務目標 45
二、相關知識 46
（一）超鏈接的組成 46
（二） 超鏈接的種類 46
三、任務實施 47
（一）插入文本超鏈接 47
（二）創建圖像超鏈接 49
（三）創建熱點圖片超鏈接 50
（四）創建錨點超鏈接 51
（五）創建電子郵件超鏈接 53
（六）創建外部超鏈接 54
（七）創建空鏈接 55
（八）創建腳本鏈接 55
實訓一 制作果蔬網首頁 57
實訓二 為果蔬網創建超鏈接 58
常見疑難解析 58
拓展知識 59
課后練習 60

項目四 布局網頁頁面 61
任務一 制作「果蔬網優惠區」頁面 62
一、任務目標 62
二、相關知識 62
（一）認識「表格」屬性面板 62
（二）認識「單元格」屬性面板 63
三、任務實施 63
（一）創建表格 63
（二）調整表格結構 65
（三）設置單元格屬性 66
（四）在表格中添加內容 67
任務二 使用框架布局「蓉錦大學首頁」頁面 70
一、任務目標 70
二、相關知識 70
（一）版式設計基本類型 71
（二）版式設計准則 71
（三）框架和框架集 72
三、任務實施 74
（一）創建框架與框架集 74
（二）保存框架集與框架 75
（三）制作框架網頁 76
實訓一 制作「蓉錦大學導航」頁面 77
實訓二 使用框架布局果蔬網 78
常見疑難解析 79
拓展知識 79
課后練習 80

項目五 使用CSS+DIV統一頁面風格 81
任務一 制作「享受生活」頁面 82
一、任務目標 82
二、相關知識 82
（一）認識CSS樣式 82
（二）CSS樣式的各種屬性設置 84
三、任務實施 88
（一）創建並應用CSS樣式 88
（二）編輯CSS樣式 93
任務二 使用CSS+DIV制作蓉錦大學教務處網頁 94
一、任務目標 94
二、相關知識 95
（一）認識CSS+Div盒子模式 95
（二）盒子模型的優勢 95
三、任務實施 96
（一）插入Div標簽 96
（二）插入AP Div 97
（三）使用CSS+DIV控制整個頁面風格 99
（四）使用Spry制作導航欄 102
實訓一 制作「公司文化」頁面 104
實訓二 制作「招生就業」頁面 104
常見疑難解析 105
拓展知識 106
課后練習 106

項目六 庫、模板、表單、行為的應用 107
任務一 配置動態網頁數據源 130
一、任務目標 130
二、相關知識 130
（一）認識動態網頁 130
（二）動態網頁的開發流程 130
（三）Web服務器 131
三、任務實施 131
（一）安裝與配置IIS 131
（二）使用Access創建數據表 133
（三）創建與配置動態站點 134
（四）創建數據源 136
任務二 制作登錄數據管理頁面 137
一、任務目標 138
二、相關知識 138
三、任務實施 138
（一）創建記錄集 138
（二）創建插入記錄 139
（三）插入重復區域 140
（四）分頁記錄集 140
實訓一 制作「加入購物車」頁面 141
實訓二 制作蓉錦大學「用戶登錄」動態頁面 142
常見疑難解析 143
拓展知識 143
課后練習 144

項目七 實現動態網頁效果 129
任務一 制作「蓉錦大學館藏資源」頁面 108
一、任務目標 108
二、相關知識 108
（一）了解庫的概念 108
（二）「資源」面板 108
三、任務實施 109
（一）創建庫文件 109
（二）應用庫文件 110
任務二 制作「果蔬網聯系我們」頁面 111
一、任務目標 111
二、相關知識 111
三、任務實施 112
（一）創建模板 112
（二）創建可編輯區域 112
（三）應用與管理模板 114
任務三 制作會員注冊頁面 115
一、任務目標 115
二、相關知識 116
（一）認識表單屬性面板 116
（二）行為的基礎知識 116
三、任務實施 118
（一）創建表單 118
（二）使用行為檢查表單 123
（三）為網頁添加彈出信息 124
（四）為網頁添加打開瀏覽器窗口效果 124
實訓一 完善蓉錦大學首頁的登錄版塊 125
實訓二 制作「蓉錦大學合作交流」頁面 126
常見疑難解析 127
拓展知識 127
課后練習 128

項目八 Photoshop CS5的基本操作 145
任務一 制作「蓉錦大學首頁」背景效果圖 146
一、任務目標 146
二、相關知識 146
（一）網頁中的圖片格式 146
（二）位圖、矢量圖、分辨率 147
（三）認識Photoshop CS5的工作界面 148
三、任務實施 150
（一）新建圖像文件 150
（二）創建參考線 151
（三）創建並填充選區 152
（四）描邊選區 153
（五）復制並裁剪圖像 154
（六）保存圖像文件 155
任務二 制作「七月」首頁背景 155
一、任務目標 155
二、相關知識 156
三、任務實施 156
（一）使用漸變工具填充顏色 156
（二）多種摳圖方法摳取圖像 158
（三）使用畫筆工具 160
實訓一 制作「登錄」界面 162
實訓二 制作網頁懸浮廣告效果圖 164
常見疑難解析 164
拓展知識 165
課后練習 166

項目九 使用Photoshop CS5處理圖像 167
任務一 調整「果蔬網——時令果蔬」頁面圖片 168
一、任務目標 168
二、相關知識 168
（一）圖像的色彩模式 168
（二）網頁色彩搭配技巧 169
（三）網頁色彩搭配注意事項 171
三、任務實施 172
（一）使用「色階」調整圖片 172
（二）使用「曲線」調整圖片 173
（三）使用「色相／飽和度」調整圖片 174
任務二 制作「蓉錦大學Logo」 176
一、任務目標 176
二、相關知識 176
（一）認識路徑 176
（二）認識「路徑」面板 177
三、任務實施 177
（一）使用形狀工具繪制並編輯路徑 177
（二）添加文字 179
任務三 制作「果蔬網」網頁按鈕 180
一、任務目標 180
二、相關知識 181
（一）圖層的作用和類型 181
（二）認識「圖層」面板 182
三、任務實施 183
（一）新建並分組圖層 183
（二）添加圖層樣式 183
（三）設置圖層混合模式 184
（四）使用濾鏡制作質感效果 187
任務四 切片「果蔬網」局部效果圖 188
一、任務目標 188
二、相關知識 188
三、任務實施 188
（一）創建切片 188
（二）保存切片 189
實訓一 美化蓉錦大學網頁圖片 190
實訓二 制作果蔬網網頁標志區 191
常見疑難解析 191
拓展知識 192
課后練習 192

項目十 使用Flash CS5制作動畫 193
任務一 制作「果蔬網banner」動畫 194
一、任務目標 194
二、相關知識 194
（一）認識Flash CS5工作界面 194
（二）認識時間軸中的圖層 196
（三）認識時間軸中的幀 197
三、任務實施 198
（一）新建Flash文件 198
（二）導入圖像 198
（三）創建圖層和插入關鍵幀 199
（四）保存Flash文件 203
任務二 制作「蓉錦大學首頁」百葉窗動畫 203
一、任務目標 203
二、相關知識 204
三、任務實施 205
（一）創建元件 205
（二）繪制並編輯形狀 206
（三）編輯元件 207
（四）測試動畫 210
（五）發布動畫 210
任務三 制作「果蔬網」圖片輪顯動畫 211
一、任務目標 211
二、相關知識 211
（一）變量 212
（二）數據類型 212
（三）ActionScript語句的基本語法 212
三、任務實施 213
（一）制作圖片輪顯背景 213
（二）添加輪顯動作 214
實訓一 制作飛機動畫效果 215
實訓二 制作百葉窗動畫 216
常見疑難解析 217
拓展知識 217
課后練習 218

項目十一 微觀多肉世界網站建設 219
任務一 前期規划 220
（一）分析網站需求 220
（二）定位網站風格 220
（三）規划草圖 220
（四）收集素材 220
任務二 使用Photoshop CS5設計網頁界面效果圖 221
（一）設計頁面效果圖 221
（二）切片效果圖並導出 233
任務三 使用Flash CS5制作圖片輪顯動畫 234
（一）制作元件 234
（二）添加動作並測試動畫 235
任務四 使用Dreamweaver CS5進行頁面編輯 236
（一）制作主頁 236
（二）制作其他頁面 243
常見疑難解析 245
拓展知識 246
課后練習 246