電子商務(wù)網(wǎng)頁(yè)設(shè)計(jì)與制作（微課版）

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