電子商務網(wǎng)頁設計與制作（微課版）

項目一 賞析規(guī)劃電子商務網(wǎng)站 ——了解電子商務網(wǎng)站
知識鏈接：　1
1、網(wǎng)頁的構成元素　1
2、電子商務網(wǎng)站的概念和特點　5
3、電子商務網(wǎng)站的分類　5
4、電商網(wǎng)站的視覺營銷　6
5、電子商務網(wǎng)站的開發(fā)流程　8
任務一　賞析電子商務網(wǎng)站　11
任務描述——分析電子商務網(wǎng)站首頁　11
技術引進——分析頁面結構與色彩　12
任務實施——提高用戶體驗的要素　15
新手試煉——賞析電子商務頁面　18
任務二　規(guī)劃“學設計吧”電子商務網(wǎng)站　19
任務描述——分析電子商務網(wǎng)站結構　19
技術引進——完成電子商務網(wǎng)站線框圖　21
任務實施——設計電子商務網(wǎng)站　24
新手試煉——電子商務網(wǎng)站會員頁面設計　26
項目小結　26
課后習題　26
項目二　創(chuàng)建并管理電商網(wǎng)站站點——掌握網(wǎng)站搭建基礎
知識鏈接：　28
1、電子商務網(wǎng)站制作相關術語　28
2、遠程站點和本地站點　30
3、統(tǒng)一資源定位器URL　30
4、站點規(guī)劃　31
任務一　創(chuàng)建網(wǎng)站文件結構　32
任務描述——創(chuàng)建本地靜態(tài)站點　32
技術引進——了解“站點設置對象”對話框　33
任務實施——站點文件的優(yōu)化與管理　36
新手試煉——創(chuàng)建個人網(wǎng)站站點　37
任務二　設置遠程站點服務器信息　38
任務描述——設置“服務器”選項　38
技術引入——設置“站點設置對象”對話框　39
任務實施——設置遠程服務器　41
新手試煉——站點中的操作　43
項目小結　43
課后習題　43
項目三　使用HTML編寫頁面——搭建頁面底層的基礎
知識鏈接：　45
1、電子商務網(wǎng)站設計建設原則　45
2、電子商務頁面設計規(guī)則　46
3、了解HTML　5　48
4、HTML的基本結構　48
5、掌握HTML的標簽　49
任務一　布局學設計吧“關于我們”頁面　52
任務描述——了解頁面基本結構　53
技術引進——在Dreamweaver中編寫HTML　53
任務實施——制作關于我們頁面結構　56
新手試煉——制作社區(qū)生活頁面　59
任務二　制作學設計吧“關于我們”頁面　60
任務描述——了解關于我們頁面結構　60
技術引入——Div+CSS盒模型　60
任務實施——完成關于我們頁面制作　64
新手試煉——制作藍色企業(yè)網(wǎng)站　66
項目小結　67
課后習題　67
項目四　使用CSS樣式美化頁面——簡單快捷規(guī)范制作頁面
知識鏈接：　69
1、電子商務網(wǎng)頁常用術語　69
2、CSS樣式基礎　72
3、CSS樣式的基本語法　74
4、CSS樣式的使用方法　75
任務一　美化“關于我們”頁面導航　77
任務描述——了解頁面導航的結構　77
技術引進——了解id選擇符　77
任務實施——美化關于我們頁面導航　80
新手試煉——制作個人作品網(wǎng)站頁面　81
任務二　美化“關于我們”文本內容　82
任務描述——分析“關于我們”頁面結構　82
技術引入——使用CSS控制字體　82
任務實施——美化頁面文字　86
新手試煉——制作網(wǎng)站公告　88
項目小結　89
課后習題　89
項目五　使用CSS控制列表樣式——制作商品列表頁面
知識鏈接：　91
1、電子商務網(wǎng)站常用商品列表頁布局　91
2、商品展示頁設計要點　94
3、網(wǎng)頁中的列表控制　96
4、列表的類型及使用　97
任務一　制作商品列表索引導航　100
任務描述——商品列表索引導航結構分析　101
技術引進——有序列表和無序列表　101
任務實施——制作商品列表索引　104
新手試煉——制作個人作品網(wǎng)站頁面　106
任務二　美化商品列表頁面　107
任務描述——商品列表頁面結構分析　107
技術引入——使用定義列表　108
任務實施——制作頁面中商品列表　109
新手試煉——制作縱向導航菜單　111
項目小結　112
課后習題　112
項目六　使用CSS控制頁面文字樣式——制作商品詳情頁面
知識鏈接：　114
1、商品詳情頁設計原則　114
2、如何做好商品詳情頁　118
3、CSS控制字體與大小　119
4、CSS控制顏色和粗細　122
任務一　制作商品詳情頁頭部　124
任務描述——了解文字標簽　124
技術引進——掌握文字裝飾標簽　124
任務實施——制作商品詳情頁頭部　127
新手試煉——網(wǎng)頁文字修飾　130
任務二　制作商品詳情頁文本介紹　130
任務描述——了解分區(qū)標簽的使用　131
技術引入——使用CSS控制段落　131
任務實施——制作商品詳情頁底部　134
新手試煉——應用多個類樣式　135
項目小結　136
課后習題　136
項目七　在頁面中使用多媒體——制作視頻播放頁面
知識鏈接：　138
1、打造具有說服力的商品頁面　138
2、電商網(wǎng)站中多媒體視頻的使用　141
3、使用標簽嵌入音頻和視頻　142
4、HTML　5中多媒體的應用　143
任務一　制作商品列表索引導航　143
任務描述——商品列表導航頁面結構　144
技術引進——在頁面中嵌入音頻或視頻　144
任務實施——制作視頻播放頁面　148
新手試煉——在網(wǎng)頁中嵌入視頻　151
任務二　制作視頻播放頁詳情部分　152
任務描述——使用標簽　152
技術引入——與標簽的屬性　153
任務實施——制作商品詳情頁底部　156
新手試煉——實現(xiàn)網(wǎng)頁中視頻的播放與暫?！?58
項目小結　159
課后習題　159
項目八　使用CSS控制表單——制作會員注冊頁面
知識鏈接：　161
1、注冊登錄界面的設計要求　161
2、如何設計人性化的登錄界面　164
3、表單與表單屬性　165
4、表單中的其他元素　166
任務一　制作會員注冊頁面　170
任務描述——會員注冊頁結構分析　170
技術引進——在Dreamweaver中使用表單元素　170
任務實施——制作網(wǎng)站會員注冊頁面　174
新手試煉——制作多彩下拉列表　176
任務二　制作會員信息完善頁面　177
任務描述——會員信息完善頁結構分析　177
技術引入——與標簽的屬性　178
任務實施——制作會員信息完善頁面　179
新手試煉——制作舞動會員登錄界面　182
項目小結　183
課后習題　183
項目九　使用CSS控制超鏈接——制作電子商務網(wǎng)站首頁
知識鏈接：　185
1、電商網(wǎng)站導航設計技巧　185
2、電商網(wǎng)站首屏設計要點　189
3、認識超鏈接　192
4、了解超鏈接路徑　193
任務一　制作電商網(wǎng)站首屏　195
任務描述——分析電商網(wǎng)站首頁結構　196
技術引進——了解超鏈接屬性控制　196
任務實施——制作電商網(wǎng)站首屏　201
新手試煉——制作活動公告　203
任務二　制作電網(wǎng)網(wǎng)站版底信息　204
任務描述——分析電商網(wǎng)站版底結構　204
技術引入——使用CSS控制鼠標指針特效　205
任務實施——制作電商網(wǎng)站首頁版底　207
新手試煉——制作圖片式超鏈接　210
項目小結　210
課后習題　210
項目十　使用JavaScript腳本豐富頁面——制作頁面交互動畫
知識鏈接：　212
1、電商網(wǎng)站交換設計技巧　212
2、交互設計需要考慮的內容　215
3、JavaScript的應用范圍　216
4、jQuery和jQuery事件　217
任務一　制作電商網(wǎng)站輪播圖動畫　220
任務描述——分析網(wǎng)頁輪播圖的作用　220
技術引進——了解Javascript的使用方法　221
任務實施——制作電商網(wǎng)站首頁輪播圖　223
新手試煉——使用JavaScript實現(xiàn)圖像滑動切換　225
任務二　制作電網(wǎng)網(wǎng)站彈出頁面　226
任務描述——分析電商網(wǎng)站版底結構　226
技術引入——jQuery　Mobile和jQuery UI　226
任務實施——使用JavaScript實現(xiàn)彈出頁面　229
新手試煉——使用JavaScript制作動態(tài)網(wǎng)站相冊　230
項目小結　231
課后習題　231
知識鏈接：　185
1、電商網(wǎng)站導航設計技巧　185
2、電商網(wǎng)站首屏設計要點　189
3、認識超鏈接　192
4、了解超鏈接路徑　193
任務一　制作電商網(wǎng)站首屏　195
任務描述——分析電商網(wǎng)站首頁結構　196
技術引進——了解超鏈接屬性控制　196
任務實施——制作電商網(wǎng)站首屏　201
新手試煉——制作活動公告　203
任務二　制作電網(wǎng)網(wǎng)站版底信息　204
任務描述——分析電商網(wǎng)站版底結構　204
技術引入——使用CSS控制鼠標指針特效　205
任務實施——制作電商網(wǎng)站首頁版底　207
新手試煉——制作圖片式超鏈接　210
項目小結　210
課后習題　210
項目十一　電子商務網(wǎng)站綜合實例——睿歐電子商務網(wǎng)站搭建
知識鏈接：　233
電子商務網(wǎng)站的發(fā)展局勢　233
電子商務網(wǎng)站產品原型　235
電子商務網(wǎng)站瀏覽器兼容性測試　237
電子商務網(wǎng)站的上傳與管理　239
任務一　設計睿歐電子商務網(wǎng)站的原型　242
任務描述——睿歐電子商務網(wǎng)站結構和層級　242
技術引進——了解產品原型軟件Axure　243
基本工具　244
任務實施——制作睿歐電子商務網(wǎng)站原型　248
新手試煉——根據(jù)電子商務網(wǎng)站原型設計頁面　250
任務二　睿歐電子商務網(wǎng)站的設計與制作　251
任務描述——電子商務網(wǎng)站頁面設計與制作　251
技術引入——瀏覽器適配的方法　252
任務實施——設計睿歐電子商務網(wǎng)站　253
新手試煉——使用FTP維護電子商務網(wǎng)站　256
項目小結　256
課后習題　256