電子商務網頁設計與制作（慕課版）

第 1章 電子商務網頁設計與網站建設基礎
1．1　電子商務網頁設計基礎知識　2
1．1．1　認識網站與網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．2
1．1．2　電子商務網站概述．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．2
1．1．3　電子商務網站的主要內容和功能．．．．．．．．．．．．．．2
1．1．4　網頁常見布局結構．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．3
1．1．5　網頁的基本構成元素．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．3
1．1．6　網頁常用術語．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4
1．1．7　網頁色彩搭配．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．4
1．1．8　HTML標記語言．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．6
1．2　課堂案例：創(chuàng)建“宅家商城”網站　9
1．2．1　電子商務網站開發(fā)流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．9
1．2．2　網站制作流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．10
1．2．3　Dreamweaver CS6工作界面．．．．．．．．．．．．．．．．．．．．．．．．12
1．2．4　創(chuàng)建本地站點．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．2．5　編輯站點．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．2．6　管理站點和站點文件夾．．．．．．．．．．．．．．．．．．．．．．．．．．．．．14
1．3　項目實訓　15
1．3．1　賞析營銷類電子商務網站．．．．．．．．．．．．．．．．．．．．．．．．．15
1．3．2　規(guī)劃并創(chuàng)建“婚紗網”站點．．．．．．．．．．．．．．．．．．．．17
1．4　課后練習　18
練習1：規(guī)劃燈飾照明電子商務網站．．．．．．．．．．．．．．．．．．18
練習2：創(chuàng)建“格什溫電器”站點．．．．．．．．．．．．．．．．．．．．．．18
1．5　技巧提升　19
1．站點命名規(guī)則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
2．網頁設計師需要知道的網頁設計內容．．．．．．．．．．19
3．網頁設計需要遵循的原則．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
4．網站設計時的色彩聯(lián)想．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
第　2章 使用Photoshop處理產品圖像
2．1　Photoshop基本操作　22
2．1．1　設置前景色與背景色．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
2．1．2　圖層的基本操作．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
2．1．3　裁剪并更改圖像尺寸．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．23
2．1．4　批處理圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．24
2．2　課堂案例：調整產品圖像的亮度
與對比度　25
2．2．1　提高亮度與對比度．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．26
2．2．2　調整高光、陰影和中間調．．．．．．．．．．．．．．．．．．．．．．．．．26
2．2．3　增強亮度與暗度的對比．．．．．．．．．．．．．．．．．．．．．．．．．．．．．29
2．3　課堂案例：修飾產品圖像的瑕疵　30
2．3．1　矯正偏色．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．30
2．3．2　清除污漬．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．31
2．3．3　光滑材質表面．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．32
2．3．4　增加金屬質感．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．33
2．4　課堂案例：摳取并合成產品圖像　35
2．4．1　摳取簡單背景．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．35
2．4．2　摳取復雜圖形．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．37
2．4．3　摳取毛發(fā)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．39
2．4．4　摳取半透明物體．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．40
2．5　項目實訓　44
2．5．1　為原汁機更換背景．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．44
2．5．2　打造街拍圖像風格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．45
2．6　課后練習　46
練習1：為沙發(fā)更換背景．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．46
練習2：處理金屬材質．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
2．7　技巧提升　48
1．文字的應用．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．48
2．使用調整圖層．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．48
第3章　使用Photoshop設計網頁元素
3．1　課堂案例：設計網頁橫幅廣告　50
3．1．1　制作通欄橫幅廣告．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．50
3．1．2　制作常規(guī)橫幅廣告．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．54
3．2　課堂案例：設計網頁海報　55
3．2．1　制作全屏輪播海報．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．56
3．2．2　制作常規(guī)輪播海報．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．60
3．3　課堂案例：設計產品推廣圖　63
3．3．1　制作橫向產品推廣圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．63
3．3．2　制作常規(guī)產品推廣圖．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．65
3．4　項目實訓　66
3．4．1　設計化妝品橫幅廣告．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．66
3．4．2　設計洗衣機全屏海報．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．67
3．5　課后練習　68
練習1：制作女包全屏輪播海報．．．．．．．．．．．．．．．．．．．．．．．．．．68
練習2：設計宅家商城海報．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．69
3．6　技巧提升　70
1．網頁導航欄設計技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
2．電子商務網頁元素設計注意事項．．．．．．．．．．．．．．．．．．70
第4章　使用Photoshop設計網站界面
4．1　課堂案例：制作“宅家商城”主頁　72
4．1．1　設計網頁頭部．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．73
4．1．2　網頁內容設計．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．77
4．1．3　網頁底部設計．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．88
4．2　課堂案例：輸出“宅家商城”網站
主頁　90
4．2．1　創(chuàng)建切片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．91
4．2．2　輸出切片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．92
4．3　項目實訓　93
4．3．1　制作“返場活動”網頁效果圖．．．．．．．．．．．．．．．．93
4．3．2　設計“矮凳詳情頁”效果圖．．．．．．．．．．．．．．．．．．．．96
4．4　課后練習　98
練習1：設計“墨韻婚紗”網站首頁．．．．．．．．．．．．．．．．．．98
練習2：設計“燈具網主頁”效果圖．．．．．．．．．．．．．．．．．．99
4．5　技巧提升　100
1．網頁效果圖設計技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．100
2．組合切片．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．100
3．直接輸出為HTML文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．100
第5章　使用Dreamweaver制作基礎網頁
5．1　課堂案例：制作“代金券說明”網頁　102
5．1．1　創(chuàng)建網頁文檔．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．102
5．1．2　設置頁面屬性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．103
5．1．3　添加文字．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．104
5．1．4　設置文字格式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．104
5．1．5　添加水平線．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．107
5．1．6　保存、預覽和關閉網頁文檔．．．．．．．．．．．．．．．．．．108
5．2　課堂案例：美化“幫助中心”網頁　109
5．2．1　插入與編輯圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．109
5．2．2　優(yōu)化圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．111
5．2．3　創(chuàng)建鼠標經過圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．112
5．2．4　插入Flash動畫．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．113
5．2．5　添加背景音樂．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．114
5．3　課堂案例：網頁跳轉設計　115
5．3．1　認識超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．116
5．3．2　插入文字超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．118
5．3．3　創(chuàng)建空鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．120
5．3．4　創(chuàng)建圖像超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．120
5．3．5　創(chuàng)建圖像熱點超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121
5．3．6　創(chuàng)建錨點超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．121
5．3．7　創(chuàng)建電子郵件超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．122
5．3．8　創(chuàng)建外部超鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123
5．3．9　創(chuàng)建腳本鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123
5．4　項目實訓　124
5．4．1　美化“酒店預訂”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．124
5．4．2　為“墨韻”網頁設計網頁跳轉．．．．．．．．．．．．．．126
5．5　課后練習　128
練習1：制作“小兒郎學校簡介”網頁．．．．．．．．．．．．128
練習2：制作“服裝”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．128
5．6　技巧提升　129
1．添加日期．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．129
2．在CSS中定義超鏈接樣式a：link、a：visited、
a：hover、a：active的順序．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．129
3．刪除鏈接圖片上的藍色邊框．．．．．．．．．．．．．．．．．．．．．．．．130
4．設置鼠標移動到文字鏈接上改變文字
的大小或顏色．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．130
5．添加滾動文字．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．130
6．1　課堂案例：布局“宅家商城”主頁　132
6．1．1　認識CSS樣式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．133
6．1．2　認識Div+CSS布局模式．．．．．．．．．．．．．．．．．．．．．．．．．．．．133
6．1．3　Div+CSS布局模式的優(yōu)勢．．．．．．．．．．．．．．．．．．．．．．．．134
6．1．4　插入并編輯Div．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．135
6．1．5　創(chuàng)建與編輯CSS樣式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．138
6．1．6　應用CSS樣式．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．140
6．1．7　使用AP Div元素．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．143
6．2　課堂案例：制作“產品展示”部分　145
6．2．1　創(chuàng)建表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．147
6．2．2　調整表格結構．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．148
6．2．3　設置表格和單元格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．149
6．2．4　在表格中插入內容．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．151
6．3　項目實訓　154
6．3．1　制作“歇山園林”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．154
6．3．2　制作“花店”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．155
6．4　課后練習　158
練習1：布局“墨韻婚紗”首頁．．．．．．．．．．．．．．．．．．．．．．．．158
練習2：布局“酒店預訂”網頁．．．．．．．．．．．．．．．．．．．．．．．．159
6．5　技巧提升　160
1．CSS樣式鏈接．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
2．批量設置AP　Div．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
3．導入表格數(shù)據(jù)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．160
7．1　課堂案例：制作“宅粉注冊”網頁　162
7．1．1　認識表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．162
7．1．2　創(chuàng)建表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．163
7．1．3　插入表單對象．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．164
7．2　課堂案例：完善網頁行為效果　173
7．2．1　行為的基礎知識．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．173
7．2．2　彈出窗口．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．175
7．2．3　打開瀏覽器窗口．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．176
7．2．4　檢查表單．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．177
7．3　項目實訓　179
7．3．2　制作“用戶注冊”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．179
7．3．2　為網頁添加行為．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．180
7．4　課后練習　182
練習1：制作“寵物網注冊”頁面．．．．．．．．．．．．．．．．．．．．182
練習2：制作“學員注冊”網頁．．．．．．．．．．．．．．．．．．．．．．．．183
練習3：制作“登錄”頁面．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．183
7．5　技巧提升　184
8．1　課堂案例：制作“新品體驗”網頁　186
8．1．1　認識“資源”面板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．187
8．1．2　創(chuàng)建庫文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．187
8．1．3　應用庫文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．189
8．2　課堂案例：制作“宅家優(yōu)購”頁面　190
8．2．1　創(chuàng)建模板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．192
8．2．2　創(chuàng)建可編輯區(qū)域．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．192
8．2．3　應用與管理模板．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．193
8．3　項目實訓　196
8．3．1　利用“庫”快速制作“酒店預訂”
頁面?。?96
8．3．2　制作“婚紗詳情頁”網頁模板．．．．．．．．．．．．．．197
8．4　課后練習　199
練習1：制作“精品推廣”頁面．．．．．．．．．．．．．．．．．．．．．．．．199
練習2：制作“花店”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．200
8．5　技巧提升　201
1．編輯已有的庫文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．201
2．更新庫文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．201
3．分離庫文件．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．201
4．創(chuàng)建重復區(qū)域．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．202
5．創(chuàng)建可選區(qū)域．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．202
6．創(chuàng)建可編輯的可選區(qū)域．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．202
4
目　錄
9．1　課堂案例：搭建動態(tài)網站平臺　204
9．1．1　認識動態(tài)網頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．204
9．1．2　動態(tài)網頁常用的開發(fā)語言．．．．．．．．．．．．．．．．．．．．．．204
9．1．3　動態(tài)網頁的開發(fā)流程．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．206
9．1．4　認識Web服務器．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．207
9．1．5　安裝與配置IIS．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．207
9．1．6　使用Access創(chuàng)建數(shù)據(jù)表．．．．．．．．．．．．．．．．．．．．．．．．．．．209
9．1．7　創(chuàng)建與配置動態(tài)站點．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．210
9．1．8　創(chuàng)建數(shù)據(jù)源．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．212
9．2　課堂案例：制作“用戶登錄”
動態(tài)網頁　214
9．2．1　創(chuàng)建記錄集．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．214
9．2．2　插入動態(tài)表格．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．215
9．2．3　創(chuàng)建記錄集導航．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．216
9．2．4　插入記錄．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．217
9．2．5　刪除記錄．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．219
9．3　項目實訓　219
9．3．1　制作“用戶登錄”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．219
9．3．2　制作“發(fā)貨記錄”網頁．．．．．．．．．．．．．．．．．．．．．．．．．．221
9．4　課后練習　222
練習1：制作網站后臺系統(tǒng)．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．223
練習2：制作“注冊”動態(tài)頁面．．．．．．．．．．．．．．．．．．．．．．．．223
9．5　技巧提升　224
10．1　課堂案例：電子商務平臺網頁制作　226
10．1．1　目前主流的電子商務平臺．．．．．．．．．．．．．．．．．．．．226
10．1．2　電子商務平臺網頁制作要求和注意
事項．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．228
10．2　課堂案例：使用圖片空間　229
10．2．1　進入圖片空間的方法．．．．．．．．．．．．．．．．．．．．．．．．．．．．229
10．2．2　上傳圖像到圖片空間．．．．．．．．．．．．．．．．．．．．．．．．．．．．229
10．2．3　移動空間圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．231
10．2．4　刪除與替換空間圖像．．．．．．．．．．．．．．．．．．．．．．．．．．．．232
10．3　課堂案例：使用模塊裝修店鋪　233
10．3．1　認識裝修模塊．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．234
10．3．2　裝修頁頭．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．234
10．3．3　裝修熱點．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．236
10．3．4　裝修其他模塊．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．238
10．4　項目實訓　240
10．4．1　裝修產品詳情頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．240
10．4．2　裝修分類導航模塊．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．241
10．5　課后練習　242
練習1：裝修耳機店鋪頁頭．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．242
練習2：裝修耳機詳情頁．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．243
10．6　技巧提升　243
1．電商平臺店鋪首頁設計的注意事項．．．．．．．．．．．．243
2．電商平臺店鋪首頁布局的要點．．．．．．．．．．．．．．．．．．．．244
第9章　制作動態(tài)網頁鏈接網站后臺
第　10章 電子商務平臺的網頁制作與上傳
11．1　實訓目標　246
11．2　專業(yè)背景　247
11．3　制作思路分析　247
11．4　準備工作　248
11．4．1　站點規(guī)劃．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．248
11．4．2　素材收集．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．248
11．5　操作過程　248
11．5．1　使用Photoshop設計網頁效果圖．．．．．．．．．．．．248
11．5．2　使用Dreamweaver合成網頁．．．．．．．．．．．．．．．．．．．260
11．6　項目實訓　266
11．6．1　制作“微觀多肉植物”網頁．．．．．．．．．．．．．．．．266
11．6．2　制作珠寶官網頁面．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．267
11．7　課后練習　269
練習1：制作“產品中心”頁面．．．．．．．．．．．．．．．．．．．．．．．．269
練習2：制作“聯(lián)系我們”頁面．．．．．．．．．．．．．．．．．．．．．．．．270
第　11章　綜合案例——綜合案例——制作墨韻箱包館網頁