《電子商務網頁設計與製作》是2021年人民郵電出版社出版的圖書，作者是方丹。
基本介紹
- 中文名：電子商務網頁設計與製作
- 作者：方丹
- 出版時間：2021年
- 出版社：人民郵電出版社
- 頁數：248 頁
- ISBN：9787115553942
- 類別：工學教材
- 定價：49.8 元
- 開本：128 開
- 裝幀：平裝-膠訂
內容簡介,圖書目錄,作者簡介,
內容簡介
隨著網上購物的不斷流行，電子商務成為了網際網路時代的新興商務模式，電子商
務網頁設計也應運而生。電子商務網頁設計通常分為兩個部分，即先使用Photoshop
設計出網頁效果圖，再使用Dreamweaver來合成網頁頁面。本書即以Photoshop CS6和
Dreamweaver CS6為藍本，講解使用這兩個軟體進行電子商務網頁設計與製作的相關
知識。
本書由淺入深、循序漸進，採用情景導入案例的方式講解軟體知識，然後通過“項目實訓”和“課後練習”加強對學習內容的訓練，*後通過“技巧提升”來提升學生的綜合學習能力。全書通過大量的案例和練習，著重對學生實際套用能力的培養，並將職業場景引入課堂教學，讓學生提前進入工作角色。
本書可作為高等院校網頁設計類相關課程的教材，也可作為各類社會培訓學校相
關專業的教材，同時還可供電子商務網頁設計與製作初學者自學使用。
圖書目錄
第 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 Div元素.......................................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章 綜合案例——綜合案例——製作墨韻箱包館網頁
作者簡介
作者長期從事電子商務專業、電子商務網頁設計課程教學，教學經驗豐富，同時具有豐富的實操技能和項目經驗。
