項(xiàng)目一　網(wǎng)頁設(shè)計(jì)基礎(chǔ)　1
任務(wù)一　賞析購物網(wǎng)站首頁　2
一、　任務(wù)目標(biāo)　2
二、相關(guān)知識　2
（一）網(wǎng)站、網(wǎng)頁、主頁的概念　2
（二）網(wǎng)頁常用術(shù)語　2
（三）常用網(wǎng)頁制作軟件　4
（四）HTML標(biāo)記語言　5
三、任務(wù)實(shí)施　7
任務(wù)二　規(guī)劃“四方好茶網(wǎng)”網(wǎng)站　7
一、　任務(wù)目標(biāo)　8
二、相關(guān)知識　8
（一）商業(yè)網(wǎng)站開發(fā)流程　8
（二）網(wǎng)頁設(shè)計(jì)內(nèi)容　8
（三）網(wǎng)頁設(shè)計(jì)原則　9
三、任務(wù)實(shí)施　10
（一）前期策劃與內(nèi)容組織　10
（二）搜集和整理資料　11
（三）網(wǎng)頁效果圖設(shè)計(jì)　11
（四）網(wǎng)頁中動畫設(shè)計(jì)　11
（五）網(wǎng)站頁面設(shè)計(jì)制作　12
（六）測試站點(diǎn)　12
（七）發(fā)布站點(diǎn)　13
（八）更新和維護(hù)站點(diǎn)　13
實(shí)訓(xùn)　規(guī)劃“果蔬網(wǎng)”網(wǎng)站　13
常見疑難解析　14
拓展知識　14
課后練習(xí)　16
項(xiàng)目二　Dreamweaver CS6的基本操作　17
任務(wù)一　創(chuàng)建“四方好茶”站點(diǎn)　18
一、　任務(wù)目標(biāo)　18
二、相關(guān)知識　18
（一）認(rèn)識Dreamweaver　CS6的操作界面　18
（二）Dreamweaver　CS6參數(shù)設(shè)置　22
（三）命名規(guī)則　22
（四）更完善的CSS功能　23
三、任務(wù)實(shí)施　23
（一）創(chuàng)建站點(diǎn)　23
（二）編輯站點(diǎn)　24
（三）管理站點(diǎn)和站點(diǎn)文件夾　25
任務(wù)二　制作“學(xué)校簡介”網(wǎng)頁　26
一、　任務(wù)目標(biāo)　26
二、相關(guān)知識　27
（一）設(shè)置HTML格式　27
（二）編輯CSS規(guī)則　28
三、任務(wù)實(shí)施　28
（一）新建與保存網(wǎng)頁　28
（二）設(shè)置頁面屬性　30
（三）輸入文本　31
（四）設(shè)置文本格式　33
（五）插入網(wǎng)頁其他元素　35
實(shí)訓(xùn)一　創(chuàng)建“會展中心”站點(diǎn)　36
實(shí)訓(xùn)二　編輯“招生就業(yè)概況”網(wǎng)頁　37
常見疑難解析　38
拓展知識　39
課后練習(xí)　40
項(xiàng)目三　編輯網(wǎng)頁元素　41
任務(wù)一　制作“游戲介紹”頁面　42
一、　任務(wù)目標(biāo)　42
二、相關(guān)知識　42
（一）音頻文件格式　42
（二）　視頻文件格式　43
三、任務(wù)實(shí)施　43
（一）插入Flash動畫　43
（二）插入插件　44
（三）設(shè)置鼠標(biāo)經(jīng)過圖片　45
（四）插入與編輯圖像　46
（五）優(yōu)化圖像　47
（六）添加背景音樂　49
任務(wù)二　為“品牌文化”網(wǎng)頁插入超鏈接　50
一、　任務(wù)目標(biāo)　50
二、相關(guān)知識　50
（一）超鏈接的組成　50
（二）　超鏈接的種類　51
三、任務(wù)實(shí)施　52
（一）插入文本超鏈接　52
（二）創(chuàng)建空鏈接　53
（三）創(chuàng)建圖像超鏈接　54
（四）創(chuàng)建熱點(diǎn)圖片超鏈接　54
（五）創(chuàng)建錨點(diǎn)超鏈接　55
（六）創(chuàng)建電子郵件超鏈接　56
（七）創(chuàng)建外部超鏈接　57
（八）創(chuàng)建腳本鏈接　57
實(shí)訓(xùn)一　制作果蔬網(wǎng)首頁　58
實(shí)訓(xùn)二　制作“蓉錦大學(xué)”首頁網(wǎng)頁　59
常見疑難解析　60
拓展知識　61
課后練習(xí)　61
項(xiàng)目四　布局網(wǎng)頁頁面　63
任務(wù)一　制作“花卉推薦”網(wǎng)頁　64
一、　任務(wù)目標(biāo)　64
二、相關(guān)知識　64
（一）認(rèn)識“表格”屬性面板　64
（二）認(rèn)識“單元格”屬性面板　65
三、任務(wù)實(shí)施　65
（一）創(chuàng)建表格　65
（二）設(shè)置單元格　66
（三）在表格中添加內(nèi)容　67
任務(wù)二　制作“后臺管理系統(tǒng)”網(wǎng)頁　69
一、　任務(wù)目標(biāo)　69
二、相關(guān)知識　70
（一）版式設(shè)計(jì)基本類型　70
（二）版式設(shè)計(jì)準(zhǔn)則　71
（三）框架和框架集　72
三、任務(wù)實(shí)施　73
（一）創(chuàng)建框架與框架集　73
（二）保存框架集與框架　74
（三）制作框架頁　75
實(shí)訓(xùn)一　制作“2015年日歷”頁面　77
實(shí)訓(xùn)二　制作“OA后臺管理” 網(wǎng)頁　77
常見疑難解析　78
拓展知識　79
課后練習(xí)　80
項(xiàng)目五　使用CSS+Div　81
任務(wù)一　美化“Flower_L．html”網(wǎng)頁　82
一、　任務(wù)目標(biāo)　82
二、相關(guān)知識　82
（一）認(rèn)識CSS樣式　82
（二）CSS樣式的各種屬性設(shè)置　84
三、任務(wù)實(shí)施　89
（一）創(chuàng)建并應(yīng)用CSS樣式　89
（二）引用外部樣式　90
任務(wù)二　制作“花店”網(wǎng)頁　90
一、　任務(wù)目標(biāo)　91
二、相關(guān)知識　91
（一）認(rèn)識CSS+Div盒子模式　91
（二）盒子模型的優(yōu)勢　92
三、任務(wù)實(shí)施　92
（一）插入Div布局　92
（二）使用CSS+Div控制頁面風(fēng)格　93
實(shí)訓(xùn)一　制作“導(dǎo)航菜單”頁面　96
實(shí)訓(xùn)二　制作“招生就業(yè)”頁面　96
常見疑難解析　97
拓展知識　98
課后練習(xí)　99
項(xiàng)目六　庫、模板、表單、行為的應(yīng)用　101
任務(wù)一　制作“蓉錦大學(xué)館藏資源”
頁面　102
一、　任務(wù)目標(biāo)　102
二、相關(guān)知識　102
（一）了解庫的概念　102
（二）“資源”面板　102
三、任務(wù)實(shí)施　103
（一）創(chuàng)建庫文件　103
（二）應(yīng)用庫文件　104
任務(wù)二　制作西餐廳網(wǎng)頁　105
一、　任務(wù)目標(biāo)　105
二、相關(guān)知識　105
三、任務(wù)實(shí)施　106
（一）創(chuàng)建模板和可編輯區(qū)域　106
（二）應(yīng)用與管理模板　107
任務(wù)三　編輯“l(fā)ogin．html”登錄頁面　109
一、　任務(wù)目標(biāo)　109
二、相關(guān)知識　110
（一）認(rèn)識表單屬性面板　110
（二）行為的基礎(chǔ)知識　110
三、任務(wù)實(shí)施　112
（一）創(chuàng)建表單　112
（二）插入表單對象　113
（三）使用行為　115
實(shí)訓(xùn)一　制作“蓉錦大學(xué)合作交流 ”
頁面　116
實(shí)訓(xùn)二　制作“會員注冊”頁面　116
常見疑難解析　117
拓展知識　118
課后練習(xí)　119
項(xiàng)目七　實(shí)現(xiàn)動態(tài)網(wǎng)頁效果　121
任務(wù)一　配置動態(tài)網(wǎng)頁數(shù)據(jù)源　122
一、　任務(wù)目標(biāo)　122
二、相關(guān)知識　122
（一）認(rèn)識動態(tài)網(wǎng)頁　122
（二）動態(tài)網(wǎng)頁開發(fā)語言　122
（三）動態(tài)網(wǎng)頁的開發(fā)流程　125
（四）Web服務(wù)器　125
三、任務(wù)實(shí)施　126
（一）安裝與配置IIS　126
（二）使用Access創(chuàng)建數(shù)據(jù)表　127
（三）創(chuàng)建與配置動態(tài)站點(diǎn)　128
（四）創(chuàng)建數(shù)據(jù)源　130
任務(wù)二　制作“發(fā)貨記錄”動態(tài)網(wǎng)頁　132
一、　任務(wù)目標(biāo)　132
二、相關(guān)知識　132
三、任務(wù)實(shí)施　132
（一）創(chuàng)建記錄集　132
（二）插入動態(tài)表格　133
（三）創(chuàng)建記錄集導(dǎo)航條　134
（四）插入記錄　134
（五）刪除記錄　135
實(shí)訓(xùn)一　制作“用戶注冊”頁面　136
實(shí)訓(xùn)二　制作登錄動態(tài)網(wǎng)頁　137
常見疑難解析　138
拓展知識　138
課后練習(xí)　139
項(xiàng)目八　Photoshop CS6的基本操作　141
任務(wù)一　制作“四方好茶”網(wǎng)頁背景　142
一、　任務(wù)目標(biāo)　142
二、相關(guān)知識　142
（一）網(wǎng)頁中的圖片格式　142
（二）位圖、矢量圖、分辨率　143
（三）認(rèn)識Photoshop　CS6的操作界面　144
三、任務(wù)實(shí)施　146
（一）新建圖像文件　146
（二）創(chuàng)建參考線　147
（三）創(chuàng)建并填充選區(qū)　148
（四）移動并裁剪圖像　149
（五）描邊選區(qū)　150
（六）保存圖像文件　151
任務(wù)二　制作“網(wǎng)頁banner”圖片　152
一、　任務(wù)目標(biāo)　152
二、相關(guān)知識　152
（一）認(rèn)識文字工具屬性欄　152
（二）認(rèn)識“字符”面板　153
（三）認(rèn)識“段落”面板　154
三、任務(wù)實(shí)施　154
（一）使用漸變工具　154
（二）創(chuàng)建并編輯選區(qū)　156
（三）使用多種摳圖方法扣取圖像　156
（四）輸入文本　158
（五）使用形狀工具　159
實(shí)訓(xùn)一　制作“獎品展示”圖像　160
實(shí)訓(xùn)二　制作“登錄”界面　161
常見疑難解析　162
拓展知識　163
課后練習(xí)　164
項(xiàng)目九　使用Photoshop CS6處理圖像　165
任務(wù)一　調(diào)整“葡萄酒”網(wǎng)頁圖片　166
一、　任務(wù)目標(biāo)　166
二、相關(guān)知識　166
（一）圖像的色彩模式　166
（二）網(wǎng)頁色彩搭配技巧　167
（三）網(wǎng)頁色彩搭配注意事項(xiàng)　169
（四）網(wǎng)站配色方案參考　170
三、任務(wù)實(shí)施　170
（一）使用“色階”調(diào)整圖片　170
（二）使用“曲線”調(diào)整圖片　172
（三）使用“色相/飽和度”調(diào)整圖片　173
任務(wù)二　制作“網(wǎng)頁Logo”　174
一、　任務(wù)目標(biāo)　174
二、相關(guān)知識　175
（一）認(rèn)識路徑　175
（二）認(rèn)識“路徑”面板　175
三、任務(wù)實(shí)施　176
（一）使用形狀工具繪制路徑　176
（二）使用鋼筆工具繪制路徑　178
任務(wù)三　制作“會員登錄”按鈕　179
一、　任務(wù)目標(biāo)　180
二、相關(guān)知識　180
（一）圖層的作用和類型　180
（二）認(rèn)識“圖層”面板　181
三、任務(wù)實(shí)施　182
（一）新建圖層　182
（二）創(chuàng)建圖層樣式　182
（三）使用濾鏡　185
任務(wù)四　為“熱門商品”圖像切片并
輸出　186
一、　任務(wù)目標(biāo)　186
二、相關(guān)知識　186
三、任務(wù)實(shí)施　187
（一）創(chuàng)建切片　187
（二）輸出并保存切片　188
實(shí)訓(xùn)一　美化蓉錦大學(xué)網(wǎng)頁圖片　189
實(shí)訓(xùn)二　制作“電影宣傳”網(wǎng)頁效果圖　189
常見疑難解析　191
拓展知識　191
課后練習(xí)　192
項(xiàng)目十　使用Flash CS6制作動畫　193
任務(wù)一　制作“久釀Logo”動畫　194
一、　任務(wù)目標(biāo)　194
二、相關(guān)知識　194
（一）認(rèn)識Flash動畫　194
（二）認(rèn)識Flash　CS6操作界面　196
（三）認(rèn)識時(shí)間軸中的圖層　198
（四）認(rèn)識時(shí)間軸中的幀　199
三、任務(wù)實(shí)施　201
（一）新建Flash文件　201
（二）導(dǎo)入圖像　201
（三）創(chuàng)建圖層和插入關(guān)鍵幀　202
（四）保存Flash文件　203
任務(wù)二　制作“生日賀卡”　204
一、　任務(wù)目標(biāo)　204
二、相關(guān)知識　205
（一）Flash常用的圖片格式　205
（二）認(rèn)識元件　205
（三）認(rèn)識“庫”面板　206
三、任務(wù)實(shí)施　207
（一）創(chuàng)建元件　207
（二）編輯元件　208
（三）繪制并編輯形狀　210
（四）測試動畫　212
（五）發(fā)布動畫　213
任務(wù)三　制作導(dǎo)航動畫　214
一、　任務(wù)目標(biāo)　214
二、相關(guān)知識　215
（一）變量　215
（二）數(shù)據(jù)類型　216
（三）ActionScript語句的基本語法　216
三、任務(wù)實(shí)施　217
（一）制作汽車動畫部分　217
（二）制作導(dǎo)航條部分　221
（三）制作文字部分　224
（四）制作載入動畫部分　225
實(shí)訓(xùn)一　制作網(wǎng)頁廣告動畫　226
實(shí)訓(xùn)二　制作“蓉錦大學(xué)”百葉窗動畫　227
常見疑難解析　228
拓展知識　229
課后練習(xí)　229
項(xiàng)目十一　綜合網(wǎng)站建設(shè)　231
任務(wù)一　前期規(guī)劃　232
（一）　分析網(wǎng)站需求　232
（二）定位網(wǎng)站風(fēng)格　232
（三）規(guī)劃草圖　232
（四）收集素材　232
任務(wù)二　使用Photoshop CS6設(shè)計(jì)網(wǎng)頁界面
效果圖　232
（一）設(shè)計(jì)頁面效果　233
（二）為網(wǎng)頁切片　237
任務(wù)三　使用Flash CS6設(shè)計(jì)網(wǎng)頁動畫　238
（一）制作元件　238
（二）為元件輸入腳本　239
任務(wù)四　使用Dreamweaver CS6設(shè)計(jì)網(wǎng)頁　240
（一）Div+CSS布局網(wǎng)頁　240
（二）制作頭部內(nèi)容　241
（三）制作網(wǎng)頁中間部分　242
（四）制作網(wǎng)頁鏈接信息　244
常見疑難解析　245
拓展知識　246
課后練習(xí)　246