關于我們
書單推薦
新書推薦
|
電子商務網(wǎng)頁設計與制作(慕課版) 隨著網(wǎng)上購物的不斷流行,電子商務成為了互聯(lián)網(wǎng)時代的新興商務模式,電子商 1.本書將職業(yè)場景引入課堂教學,設計以米拉和領導老洪為主人公的故事情節(jié),將整本書的知識點串聯(lián)起來,讓讀者有貼近實際工作的體會。 2.本書采用Photoshop CS6和Dreamweaver CS6為教學軟件,舉例了電商系統(tǒng)中常用的網(wǎng)頁、商品圖、優(yōu)惠券、商家等案例,具有實際參考價值。 3.作者為重要的操作錄制了教學視頻,讀者可以通過掃碼觀看教學視頻跟隨操作。 4.本書提供了所有書中提到的案例的素材和效果文件,并附贈了教學大綱、PPT、素材等教學資源,方便教師上課教學和讀者自學。
作者長期從事電子商務專業(yè)、電子商務網(wǎng)頁設計課程教學,教學經(jīng)驗豐富,同時具有豐富的實操技能和項目經(jīng)驗。
第 1章 電子商務網(wǎng)頁設計與網(wǎng)站建設基礎
1.1 電子商務網(wǎng)頁設計基礎知識 2 1.1.1 認識網(wǎng)站與網(wǎng)頁...........................................2 1.1.2 電子商務網(wǎng)站概述.......................................2 1.1.3 電子商務網(wǎng)站的主要內(nèi)容和功能..............2 1.1.4 網(wǎng)頁常見布局結(jié)構(gòu).......................................3 1.1.5 網(wǎng)頁的基本構(gòu)成元素...................................3 1.1.6 網(wǎng)頁常用術(shù)語...............................................4 1.1.7 網(wǎng)頁色彩搭配...............................................4 1.1.8 HTML標記語言............................................6 1.2 課堂案例:創(chuàng)建“宅家商城”網(wǎng)站 9 1.2.1 電子商務網(wǎng)站開發(fā)流程...............................9 1.2.2 網(wǎng)站制作流程.............................................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 賞析營銷類電子商務網(wǎng)站.........................15 1.3.2 規(guī)劃并創(chuàng)建“婚紗網(wǎng)”站點....................17 1.4 課后練習 18 練習1:規(guī)劃燈飾照明電子商務網(wǎng)站..................18 練習2:創(chuàng)建“格什溫電器”站點......................18 1.5 技巧提升 19 1.站點命名規(guī)則...................................................19 2.網(wǎng)頁設計師需要知道的網(wǎng)頁設計內(nèi)容..........19 3.網(wǎng)頁設計需要遵循的原則...............................19 4.網(wǎng)站設計時的色彩聯(lián)想...................................20 第 2章 使用Photoshop處理產(chǎn)品圖像 2.1 Photoshop基本操作 22 2.1.1 設置前景色與背景色.................................22 2.1.2 圖層的基本操作.........................................22 2.1.3 裁剪并更改圖像尺寸.................................23 2.1.4 批處理圖像.................................................24 2.2 課堂案例:調(diào)整產(chǎn)品圖像的亮度 與對比度 25 2.2.1 提高亮度與對比度.....................................26 2.2.2 調(diào)整高光、陰影和中間調(diào).........................26 2.2.3 增強亮度與暗度的對比.............................29 2.3 課堂案例:修飾產(chǎn)品圖像的瑕疵 30 2.3.1 矯正偏色.....................................................30 2.3.2 清除污漬.....................................................31 2.3.3 光滑材質(zhì)表面.............................................32 2.3.4 增加金屬質(zhì)感.............................................33 2.4 課堂案例:摳取并合成產(chǎn)品圖像 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:處理金屬材質(zhì)...........................................47 2.7 技巧提升 48 1.文字的應用.......................................................48 2.使用調(diào)整圖層...................................................48 第3章 使用Photoshop設計網(wǎng)頁元素 3.1 課堂案例:設計網(wǎng)頁橫幅廣告 50 3.1.1 制作通欄橫幅廣告.....................................50 3.1.2 制作常規(guī)橫幅廣告.....................................54 3.2 課堂案例:設計網(wǎng)頁海報 55 3.2.1 制作全屏輪播海報.....................................56 3.2.2 制作常規(guī)輪播海報.....................................60 3.3 課堂案例:設計產(chǎn)品推廣圖 63 3.3.1 制作橫向產(chǎn)品推廣圖................................63 3.3.2 制作常規(guī)產(chǎn)品推廣圖................................65 3.4 項目實訓 66 3.4.1 設計化妝品橫幅廣告................................66 3.4.2 設計洗衣機全屏海報................................67 3.5 課后練習 68 練習1:制作女包全屏輪播海報..........................68 練習2:設計宅家商城海報..................................69 3.6 技巧提升 70 1.網(wǎng)頁導航欄設計技巧.......................................70 2.電子商務網(wǎng)頁元素設計注意事項..................70 第4章 使用Photoshop設計網(wǎng)站界面 4.1 課堂案例:制作“宅家商城”主頁 72 4.1.1 設計網(wǎng)頁頭部.............................................73 4.1.2 網(wǎng)頁內(nèi)容設計.............................................77 4.1.3 網(wǎng)頁底部設計.............................................88 4.2 課堂案例:輸出“宅家商城”網(wǎng)站 主頁 90 4.2.1 創(chuàng)建切片.....................................................91 4.2.2 輸出切片.....................................................92 4.3 項目實訓 93 4.3.1 制作“返場活動”網(wǎng)頁效果圖................93 4.3.2 設計“矮凳詳情頁”效果圖....................96 4.4 課后練習 98 練習1:設計“墨韻婚紗”網(wǎng)站首頁..................98 練習2:設計“燈具網(wǎng)主頁”效果圖..................99 4.5 技巧提升 100 1.網(wǎng)頁效果圖設計技巧.....................................100 2.組合切片.........................................................100 3.直接輸出為HTML文件..................................100 第5章 使用Dreamweaver制作基礎網(wǎng)頁 5.1 課堂案例:制作“代金券說明”網(wǎng)頁 102 5.1.1 創(chuàng)建網(wǎng)頁文檔...........................................102 5.1.2 設置頁面屬性...........................................103 5.1.3 添加文字...................................................104 5.1.4 設置文字格式...........................................104 5.1.5 添加水平線...............................................107 5.1.6 保存、預覽和關閉網(wǎng)頁文檔..................108 5.2 課堂案例:美化“幫助中心”網(wǎng)頁 109 5.2.1 插入與編輯圖像.......................................109 5.2.2 優(yōu)化圖像...................................................111 5.2.3 創(chuàng)建鼠標經(jīng)過圖像...................................112 5.2.4 插入Flash動畫..........................................113 5.2.5 添加背景音樂...........................................114 5.3 課堂案例:網(wǎng)頁跳轉(zhuǎn)設計 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 美化“酒店預訂”網(wǎng)頁..........................124 5.4.2 為“墨韻”網(wǎng)頁設計網(wǎng)頁跳轉(zhuǎn)..............126 5.5 課后練習 128 練習1:制作“小兒郎學校簡介”網(wǎng)頁............128 練習2:制作“服裝”網(wǎng)頁................................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 課堂案例:制作“產(chǎn)品展示”部分 145 6.2.1 創(chuàng)建表格...................................................147 6.2.2 調(diào)整表格結(jié)構(gòu)...........................................148 6.2.3 設置表格和單元格...................................149 6.2.4 在表格中插入內(nèi)容...................................151 6.3 項目實訓 154 6.3.1 制作“歇山園林”網(wǎng)頁..........................154 6.3.2 制作“花店”網(wǎng)頁...................................155 6.4 課后練習 158 練習1:布局“墨韻婚紗”首頁........................158 練習2:布局“酒店預訂”網(wǎng)頁........................159 6.5 技巧提升 160 1.CSS樣式鏈接..................................................160 2.批量設置AP Div.............................................160 3.導入表格數(shù)據(jù).................................................160 7.1 課堂案例:制作“宅粉注冊”網(wǎng)頁 162 7.1.1 認識表單...................................................162 7.1.2 創(chuàng)建表單...................................................163 7.1.3 插入表單對象...........................................164 7.2 課堂案例:完善網(wǎng)頁行為效果 173 7.2.1 行為的基礎知識.......................................173 7.2.2 彈出窗口...................................................175 7.2.3 打開瀏覽器窗口.......................................176 7.2.4 檢查表單...................................................177 7.3 項目實訓 179 7.3.2 制作“用戶注冊”網(wǎng)頁..........................179 7.3.2 為網(wǎng)頁添加行為.......................................180 7.4 課后練習 182 練習1:制作“寵物網(wǎng)注冊”頁面....................182 練習2:制作“學員注冊”網(wǎng)頁........................183 練習3:制作“登錄”頁面................................183 7.5 技巧提升 184 8.1 課堂案例:制作“新品體驗”網(wǎng)頁 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 利用“庫”快速制作“酒店預訂” 頁面。196 8.3.2 制作“婚紗詳情頁”網(wǎng)頁模板..............197 8.4 課后練習 199 練習1:制作“精品推廣”頁面........................199 練習2:制作“花店”網(wǎng)頁................................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)網(wǎng)站平臺 204 9.1.1 認識動態(tài)網(wǎng)頁...........................................204 9.1.2 動態(tài)網(wǎng)頁常用的開發(fā)語言......................204 9.1.3 動態(tài)網(wǎng)頁的開發(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)網(wǎng)頁 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 制作“用戶登錄”網(wǎng)頁..........................219 9.3.2 制作“發(fā)貨記錄”網(wǎng)頁..........................221 9.4 課后練習 222 練習1:制作網(wǎng)站后臺系統(tǒng)................................223 練習2:制作“注冊”動態(tài)頁面........................223 9.5 技巧提升 224 10.1 課堂案例:電子商務平臺網(wǎng)頁制作 226 10.1.1 目前主流的電子商務平臺....................226 10.1.2 電子商務平臺網(wǎng)頁制作要求和注意 事項.........................................................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 裝修產(chǎn)品詳情頁.....................................240 10.4.2 裝修分類導航模塊.................................241 10.5 課后練習 242 練習1:裝修耳機店鋪頁頭................................242 練習2:裝修耳機詳情頁.....................................243 10.6 技巧提升 243 1.電商平臺店鋪首頁設計的注意事項............243 2.電商平臺店鋪首頁布局的要點....................244 第9章 制作動態(tài)網(wǎng)頁鏈接網(wǎng)站后臺 第 10章 電子商務平臺的網(wǎng)頁制作與上傳 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設計網(wǎng)頁效果圖............248 11.5.2 使用Dreamweaver合成網(wǎng)頁...................260 11.6 項目實訓 266 11.6.1 制作“微觀多肉植物”網(wǎng)頁................266 11.6.2 制作珠寶官網(wǎng)頁面.................................267 11.7 課后練習 269 練習1:制作“產(chǎn)品中心”頁面........................269 練習2:制作“聯(lián)系我們”頁面........................270 第 11章 綜合案例——綜合案例——制作墨韻箱包館網(wǎng)頁
你還可能感興趣
我要評論
|