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