第 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 課堂案例：創建“宅家商城”網站 9
1.2.1 電子商務網站開發流程...............................9
1.2.2 網站制作流程.............................................10
1.2.3 Dreamweaver CS6工作界面........................12
1.2.4 創建本地站點.............................................13
1.2.5 編輯站點.....................................................13
1.2.6 管理站點和站點文件夾.............................14
1.3 項目實訓 15
1.3.1 賞析營銷類電子商務網站.........................15
1.3.2 規劃並創建“婚紗網”站點....................17
1.4 課後練習 18
練習1：規劃燈飾照明電子商務網站..................18
練習2：創建“格什溫電器”站點......................18
1.5 技巧提升 19
1．站點命名規則...................................................19
2．網頁設計師需要知道的網頁設計內容..........19
3．網頁設計需要遵循的原則...............................19
4．網站設計時的色彩聯想...................................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 摳取毛發.....................................................39
2.4.4 摳取半透明物體.........................................40
2.5 項目實訓 44
2.5.1 為原汁機更換背景.....................................44
2.5.2 打造街拍圖像風格.....................................45
2.6 課後練習 46
練習1：為沙發更換背景.......................................46
練習2：處理金屬材質...........................................47
2.7 技巧提升 48
1．文字的應用.......................................................48
2．使用調整圖層...................................................48
第3章 使用Photoshop設素
3.1 課堂案例：設計網頁橫幅廣告 50
3.1.1 制作通欄橫幅廣告.....................................50
3.1.2 制作常規橫幅廣告.....................................54
3.2 課堂案例：設計網頁海報 55
3.2.1 制作全屏輪播海報.....................................56
3.2.2 制作常規輪播海報.....................................60
3.3 課堂案例：設計產品推廣圖 63
3.3.1 制作橫向產品推廣圖................................63
3.3.2 制作常規產品推廣圖................................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 創建切片.....................................................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 創建網頁文檔...........................................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 優化圖像...................................................111
5.2.3 創建鼠標經過圖像...................................112
5.2.4 插入Flash動畫..........................................113
5.2.5 添加背景音樂...........................................114
5.3 課堂案例：網頁跳轉設計 115
5.3.1 認識超鏈接...............................................116
5.3.2 插入文字超鏈接.......................................118
5.3.3 創建空鏈接...............................................120
5.3.4 創建圖像超鏈接.......................................120
5.3.5 創建圖像熱點超鏈接..............................121
5.3.6 創建錨點超鏈接.......................................121
5.3.7 創建電子郵件超鏈接..............................122
5.3.8 創建外部超鏈接.......................................123
5.3.9 創建腳本鏈接...........................................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布局模式的優勢........................134
6.1.4 插入並編輯Div.........................................135
6.1.5 創建與編輯CSS樣式................................138
6.1.6 應用CSS樣式............................................140
6.1.7 使用AP 素.......................................143
6.2 課堂案例：制作“產品展示”部分 145
6.2.1 創建表格...................................................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．導入表格數據.................................................160
7.1 課堂案例：制作“宅粉注冊”網頁 162
7.1.1 認識表單...................................................162
7.1.2 創建表單...................................................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 創建庫文件...............................................187
8.1.3 應用庫文件...............................................189
8.2 課堂案例：制作“宅家優購”頁面 190
8.2.1 創建模板...................................................192
8.2.2 創建可編輯區域.......................................192
8.2.3 應用與管理模板.......................................193
8.3 項目實訓 196
8.3.1 利用“庫”快速制作“酒店預訂”
頁面 .........................................................196
8.3.2 制作“婚紗詳情頁”網頁模板..............197
8.4 課後練習 199
練習1：制作“精品推廣”頁面........................199
練習2：制作“花店”網頁................................200
8.5 技巧提升 201
1．編輯已有的庫文件.........................................201
2．更新庫文件.....................................................201
3．分離庫文件.....................................................201
4．創建重復區域.................................................202
5．創建可選區域.................................................202
6．創建可編輯的可選區域................................202
4
目 錄
9.1 課堂案例：搭建動態網站平臺 204
9.1.1 認識動態網頁...........................................204
9.1.2 動態網頁常用的開發語言......................204
9.1.3 動態網頁的開發流程..............................206
9.1.4 認識Web服務器.......................................207
9.1.5 安裝與配置IIS..........................................207
9.1.6 使用Access創建數據表...........................209
9.1.7 創建與配置動態站點..............................210
9.1.8 創建數據源...............................................212
9.2 課堂案例：制作“用戶登錄”
動態網頁 214
9.2.1 創建記錄集...............................................214
9.2.2 插入動態表格...........................................215
9.2.3 創建記錄集導航.......................................216
9.2.4 插入記錄...................................................217
9.2.5 刪除記錄...................................................219
9.3 項目實訓 219
9.3.1 制作“用戶登錄”網頁..........................219
9.3.2 制作“發貨記錄”網頁..........................221
9.4 課後練習 222
練習1：制作網站後臺繫統................................223
練習2：制作“注冊”動態頁面........................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章 制作動態網頁鏈接網站後臺
第 10章 電子商務平臺的網頁制作與上傳
11.1 實訓目標 246
11.2 專業背景 247
11.3 制作思路分析 247
11.4 準備工作 248
11.4.1 站點規劃.................................................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：制作“聯繫我們”頁面........................270
第 11章 綜合案例——綜合案例——制作墨韻箱包館網頁