第 1章　電子商務(wù)網(wǎng)頁(yè)制作與網(wǎng)站建設(shè)基礎(chǔ)　1

1.1　了解電子商務(wù)網(wǎng)站　2

1.1.1　網(wǎng)頁(yè)的基本構(gòu)成元素　2

1.1.2　電子商務(wù)網(wǎng)站的概念　4

1.1.3　電子商務(wù)網(wǎng)站的視覺營(yíng)銷　5

1.1.4　電子商務(wù)網(wǎng)站的主要內(nèi)容　6

1.2　電子商務(wù)網(wǎng)頁(yè)制作相關(guān)軟件和技術(shù)　7

1.2.1　Dreamweaver　7

1.2.2　Photoshop　8

1.2.3　HTML5　8

1.2.4　JavaScript　9

1.2.5　CSS3　10

1.2.6　ASP　10

1.3　創(chuàng)建和管理站點(diǎn)　11

1.3.1　創(chuàng)建本地站點(diǎn)　11

1.3.2　管理站點(diǎn)　12

【單元小結(jié)】　13

【綜合實(shí)訓(xùn)】規(guī)劃并創(chuàng)建“祥和家居”網(wǎng)站站點(diǎn)　13

【理論練習(xí)】　15

【實(shí)戰(zhàn)演練】創(chuàng)建“寶盛首飾”站點(diǎn)　16



第　2章 使用Photoshop處理商品圖片　17

2.1　Photoshop工作界面　18

2.2　調(diào)整與美化商品圖片　19

2.2.1　調(diào)整圖片大小　20

2.2.2　使用“色階”命令　20

2.2.3　使用“曲線”命令　21

2.2.4　調(diào)整圖片亮度與對(duì)比度　22

2.2.5　調(diào)整圖片色相與飽和度　22

2.3　創(chuàng)建文字　24

2.3.1　輸入文字并設(shè)置文字屬性　24

2.3.2　為商品圖片添加立體文字　25

2.4　修飾商品圖片　27

2.4.1　去除背景中多余的物品　27

2.4.2　提高圖片的清晰度　29

2.5　添加圖片特效　30

2.5.1　虛化背景　30

2.5.2　添加精美邊框　31

【單元小結(jié)】　32

【綜合實(shí)訓(xùn)】處理“祥和家居”商品圖片　32

【理論練習(xí)】　35

【實(shí)戰(zhàn)演練】處理“寶盛首飾”商品圖片　36



第3章　使用Photoshop設(shè)計(jì)網(wǎng)頁(yè)中的圖片元素　38

3.1　設(shè)計(jì)網(wǎng)站Logo　39

3.1.1　網(wǎng)站Logo的分類　39

3.1.2　網(wǎng)站Logo的設(shè)計(jì)策略和技巧　40

3.1.3　網(wǎng)站Logo的制作方法　41

3.1.4　設(shè)計(jì)網(wǎng)站Logo　41

3.2　設(shè)計(jì)商品主圖　44

3.2.1　商品主圖的設(shè)計(jì)規(guī)范　44

3.2.2　商品主圖的設(shè)計(jì)形式　44

3.3　設(shè)計(jì)商品促銷海報(bào)　45

3.3.1　商品促銷海報(bào)的設(shè)計(jì)標(biāo)準(zhǔn)　45

3.3.2　商品促銷海報(bào)的設(shè)計(jì)思路　47

3.4　設(shè)計(jì)網(wǎng)站首頁(yè)　49

3.4.1　設(shè)計(jì)分類導(dǎo)航模塊　49

3.4.2　設(shè)計(jì)宣傳海報(bào)模塊　53

3.4.3　設(shè)計(jì)商品展示區(qū)　56

3.5　切割網(wǎng)站首頁(yè)　60

【單元小結(jié)】　62

【綜合實(shí)訓(xùn)】設(shè)計(jì)“祥和家居”網(wǎng)頁(yè)促銷海報(bào)　62

【理論練習(xí)】　64

【實(shí)戰(zhàn)演練】設(shè)計(jì)“寶盛首飾”網(wǎng)頁(yè)促銷海報(bào)　65



第4章　使用Dreamweaver制作基本網(wǎng)頁(yè)　67

4.1　添加文本元素　68

4.1.1　在網(wǎng)頁(yè)中添加文本并設(shè)置文本屬性　68

4.1.2　插入特殊字符　70

4.1.3　插入水平線　71

4.2　創(chuàng)建超鏈接　72

4.2.1　超鏈接的基本概念　72

4.2.2　創(chuàng)建E-mail鏈接　73

4.2.3　創(chuàng)建下載文件的鏈接　74

4.2.4　創(chuàng)建圖像熱點(diǎn)鏈接　75

4.2.5　創(chuàng)建腳本鏈接　76

4.3　在網(wǎng)頁(yè)中插入圖像與背景音樂　77

4.3.1　插入圖像　77

4.3.2　插入背景圖像　79

4.3.3　創(chuàng)建鼠標(biāo)經(jīng)過圖像　80

4.3.4　使用代碼提示添加背景音樂　83

【單元小結(jié)】　84

【綜合實(shí)訓(xùn)】制作“祥和家居”圖文混排網(wǎng)頁(yè)　84

【理論練習(xí)】　87

【實(shí)戰(zhàn)演練】制作“寶盛首飾”圖文混排網(wǎng)頁(yè)　88



第5章　使用CSS美化和布局網(wǎng)頁(yè)　90

5.1　CSS的使用　91

5.1.1　CSS基本語(yǔ)法　91

5.1.2　添加CSS的方法　91

5.2　使用CSS美化網(wǎng)頁(yè)　93

5.2.1　使用CSS美化文本　93

5.2.2　使用CSS美化圖片　94

5.3　CSS布局理念　96

5.3.1　將頁(yè)面用DIV分塊　97

5.3.2　設(shè)計(jì)各個(gè)板塊的位置　97

5.3.3　用CSS定位　98

5.4　CSS定位　98

5.4.1　盒子模型的概念　99

5.4.2　float定位　99

5.4.3　position定位　101

【單元小結(jié)】　102

【綜合實(shí)訓(xùn)】應(yīng)用CSS樣式美化“祥和家居”網(wǎng)頁(yè)　103

【理論練習(xí)】　105

【實(shí)戰(zhàn)演練】應(yīng)用CSS樣式美化“寶盛首飾”網(wǎng)頁(yè)　106



第6章　使用表格布局網(wǎng)頁(yè)　108

6.1　在網(wǎng)頁(yè)中插入表格　109

6.1.1　插入表格　109

6.1.2　添加內(nèi)容到單元格　112

6.2　表格的基本操作　115

6.2.1　選擇表格元素　115

6.2.2　添加、刪除行或列　116

6.2.3　拆分單元格　117

6.3　排序表格內(nèi)容　118

6.3.1　導(dǎo)入表格式數(shù)據(jù)　118

6.3.2　排序表格　120

【單元小結(jié)】　122

【綜合實(shí)訓(xùn)】使用表格布局“祥和家居”主頁(yè)　122

【理論練習(xí)】　126

【實(shí)戰(zhàn)演練】使用表格創(chuàng)建“寶盛首飾”網(wǎng)頁(yè)　127



第7章　使用模板和庫(kù)快速制作網(wǎng)頁(yè)　129

7.1　使用模板　130

7.1.1　認(rèn)識(shí)模板　130

7.1.2　創(chuàng)建模板　130

7.1.3　創(chuàng)建可編輯區(qū)域　132

7.1.4　創(chuàng)建基于模板的網(wǎng)頁(yè)　133

7.2　管理站點(diǎn)中的模板　137

7.2.1　從模板中分離　137

7.2.2　修改模板　137

7.3　創(chuàng)建與應(yīng)用庫(kù)項(xiàng)目　138

7.3.1　創(chuàng)建庫(kù)項(xiàng)目　138

7.3.2　應(yīng)用庫(kù)項(xiàng)目　140

7.3.3　更新庫(kù)項(xiàng)目　141

【單元小結(jié)】　142

【綜合實(shí)訓(xùn)】創(chuàng)建“祥和家居”模板網(wǎng)頁(yè)　142

【理論練習(xí)】　146

【實(shí)戰(zhàn)演練】創(chuàng)建“寶盛首飾”模板網(wǎng)頁(yè)　146



第8章　使用行為創(chuàng)建特效網(wǎng)頁(yè)　149

8.1　行為概述　150

8.1.1　行為的概念　150

8.1.2　行為面板　150

8.2　調(diào)用JavaScript行為　151

8.2.1　利用JavaScript實(shí)現(xiàn)打印功能　151

8.2.2　利用JavaScript實(shí)現(xiàn)關(guān)閉網(wǎng)頁(yè)　152

8.3　設(shè)置瀏覽器行為　153

8.3.1　設(shè)置狀態(tài)欄文本　153

8.3.2　設(shè)置轉(zhuǎn)到URL　155

8.3.3　打開瀏覽器窗口　156

8.4　設(shè)置圖像行為　158

8.4.1　預(yù)先載入圖像　158

8.4.2　交換圖像　160

8.5　設(shè)置效果行為　161

8.5.1　Blind、Clip、Slide、Fold　161

8.5.2　Fade、Highlight、Drop　162

8.5.3　Puff、Scale　162

8.5.4　Bounce、Pulsate、Shake　163

【單元小結(jié)】　163

【綜合實(shí)訓(xùn)】制作“祥和家居”網(wǎng)頁(yè)特效　163

【理論練習(xí)】　166

【實(shí)戰(zhàn)演練】制作“寶盛首飾”網(wǎng)頁(yè)特效　167



第9章　使用JavaScript制作交互頁(yè)面　169

9.1　JavaScript簡(jiǎn)介　170

9.2　JavaScript基本語(yǔ)法　170

9.2.1　常量和變量　170

9.2.2　基本語(yǔ)句　171

9.2.3　函數(shù)　174

9.3　JavaScript的事件　175

9.3.1　事件與事件驅(qū)動(dòng)　175

9.3.2　調(diào)用函數(shù)的事件　177

9.3.3　調(diào)用代碼的事件　177

9.4　JavaScript對(duì)象的聲明和引用　178

9.4.1　聲明和實(shí)例化　178

9.4.2　對(duì)象的引用　180

9.5　使用JavaScript制作網(wǎng)頁(yè)特效　180

9.5.1　制作歡迎提示信息　181

9.5.2　禁止鼠標(biāo)右鍵　182

9.6　使用jQuery制作網(wǎng)頁(yè)特效　183

9.6.1　使用Tabs制作選項(xiàng)卡　183

9.6.2　使用Accordion制作折疊面板　185

【單元小結(jié)】　186

【綜合實(shí)訓(xùn)】使用JavaScript創(chuàng)建“祥和家居”網(wǎng)頁(yè)特效　187

【理論練習(xí)】　191

【實(shí)戰(zhàn)演練】使用jQuery創(chuàng)建“寶盛首飾”網(wǎng)頁(yè)Tab選項(xiàng)卡　191