課程適用范圍: 具有Photoshop和Dreamweaver基礎的學員或對店鋪裝修感興趣的學員。
課程簡介: 本套教程可以使一個零基礎的菜鳥變成裝修達人。隨著電商的發展,美工的需求量越來越大,零基礎的同學很難入門,看了很多教程不見起色,這是因為學習的知識過于零碎,沒有形成統一的課程體系。我們的課程全面講解從開店到使用淘寶默認模板進行簡單裝修,以及利用在線生成工具、專業的代碼編寫軟件Dreamweaver實現個性化的、復雜的頁面裝修效果。教程沒有涉及太多視覺設計方面的知識,主要是裝修技巧的講解。相關視覺設計知識,大家也可以在勤學網學習其他專業視覺類課程。
課程基于淘寶店鋪進行講解,主要適用于淘寶店鋪裝修的同學學習哦~
涉及軟件及版本: Photoshop CS6 和Dreamweaver CC 2015 大家可以下載對應版本或者更高版本進行學習。
注:GIF格式圖像色彩空間有限,圖片失真比較多,主要展示動態過程,實際應用圖片會很清晰自然。
輪播海報效果
▽
開關燈效果
▽
十二卡盤效果
▽
自定義布局
▽
旋轉木馬應用案例
▽
帶左右按鈕的自定義輪播效果圖
▽
應用彈出層做帶有下拉菜單的店招
▽
倒計時的應用
▽
突破950px帶有鼠標特效的分類展示區域
▽
自定義模塊插入視頻效果
▽
生成動態旺旺效果
▽
第一章 認識淘寶后臺管理界面
|
介紹課程總體內容及學習課程需要做的準備 |
介紹裝修店鋪的常用后臺操作,包括淘寶默認模板,頁面添加,配色處理,模塊添加等等。 |
店鋪裝修需要的軟件工具,在線生成工具,以及淘寶開放平臺的使用 |
第二章 簡易的頁面裝修
|
淘寶首頁標準尺寸介紹及如何利用淘寶默認工具進行簡單的店招裝修 |
使用淘寶默認的模塊裝修輪播圖效果,寶貝分類,寶貝推薦,排行榜等 |
使用淘寶默認模塊對分類頁面進行裝修,包括店招的設置,添加和刪除模塊等。 |
詳情頁的裝修范圍及如何設置寶貝信息及詳情描述等 |
如何添加自定義的專題頁面,以及導航條項目設置和添加的方法 |
其他兩套默認模板的介紹及裝修備份還原 |
第三章 使用生成工具裝修家居類店鋪實戰案例
|
設計稿的展示以及店鋪配色等的整體設置及全局分析 |
實例講解通屏店招背景設置及店招主圖的裝修過程 |
使用Photoshop對店招設計稿進行切片并添加鏈接,裝修店招的過程演示。 |
使用在線生成工具制作自定義導航條效果 |
使用在線生成工具突破淘寶默認最小寬度限制,制作全屏輪播海報效果。 |
使用在線生成工具制作爆款開關燈效果,以及去除模塊間隙的方法。 |
使用在線生成工具制作通欄圖片及12圖卡盤效果 |
主要講解如何在店鋪中添加客服阿里旺旺聯系入口,方便買家咨詢。 |
第四章 店鋪高級裝修需要學習的HTML代碼
|
認識熟悉代碼編輯器Dreamweaver的界面及與HTML的關系詳解 |
講解常用的文字相關HTML標簽及用法包括標題標簽、加粗、傾斜、段落標簽、橫線標簽、區塊標簽等 |
詳細介紹標簽屬性的編寫方法及嵌套的原則 |
介紹超鏈接標簽、屬性及代碼書寫規范 |
講解Dreamweaver插入圖片的方法及對應標簽,以及如何繪制熱點地圖 |
介紹表格的相關標簽及用法,以及如何利用表格來制作淘寶店鋪裝修中的開關燈效果 |
介紹表單標簽及利用百度搜索的代碼方便快捷制作店鋪搜索框 |
第五章 店鋪高級裝修需要學習的CSS樣式
|
css樣式編寫規范及常用文本的CSS樣式設置方法 |
講解如何定義網頁中元素的尺寸及背景顏色、背景圖像和定位等。 |
講解css樣式盒子模型中內部填充值和外邊距屬性及實際應用時值的設置技巧 |
主要講解盒子模型的邊框編寫規范和技巧,類選擇器以及火狐瀏覽器firebug的使用。 |
主要講解塊元素、行元素、行內塊元素的特征及相互轉換的方法 |
浮動布局的設置方法及原理,后代選擇器的編寫方式,以及溢出隱藏設置。 |
使用偽類選擇器、項目列表、超鏈接標簽、浮動布局等知識制作淘寶店鋪導航欄效果 |
元素相對定位、絕對定位、固定定位的屬性設置及實際應用 |
講解CSS3新增的圓角、陰影及不透明度等參數設置 |
如何將Dreamweaver中的CSS樣式修改為行內樣式,以符合店鋪裝修代碼要求。 |
第六章 使用代碼裝修自定義店鋪
|
使用Dreamweaver實現全屏店招效果及添加熱點地圖 |
使用CSS樣式修改設置導航條的樣式,制作店招和導航條統一背景圖像效果 |
完全自定義店招和導航條樣式,制作店招上動態圖片效果及裝修方法 |
通過使用淘寶自帶類樣式設置自定義搜索框的定位 |
使用系統提供類名打破系統默認寬度制作全屏海報 |
講解活動專題頁面切圖、制作熱點地圖以及突破淘寶默認950px寬度的裝修方法 |
將大面積的背景圖片定義為固定背景以及滾動背景的方法,優化店鋪裝修的結構 |
使用淘寶自帶類樣式.footer-more制作鼠標經過時圖片顯示與隱藏效果等 |
結合前面所學知識,講解了一個綜合案例,主要涉及知識點包括浮動布局,定位布局,突破淘寶默認950px寬度,鼠標經過指針變化,圖像變化,以及添加跳轉鏈接等 |
第七章 使淘寶開放平臺widget規范和SNS組件
|
淘寶J_TWidget組件之Carousel旋轉木馬的使用方法介紹 |
通過實例講解鼠標放置到按鈕上實現切換,并且主圖實現淡入淡出切換的裝修效果 |
使用旋轉木馬制作帶箭頭的輪播圖效果,以及定義箭頭位置的實際案例。 |
J_TWidget之Popup彈出層應用方式講解以及元素位置、對齊點的原理 |
使用彈出層制作帶有下拉菜單的店招效果 |
使用在線生成工具結合Dreamweaver代碼制作店鋪活動倒計時效果 |
加入購物車、分享、喜歡等組件介紹,以及利用組件制作產品交互效果 |
第八章 裝修店鋪內頁及總結
|
詳情頁裝修權限以及在裝修頁面中插入視頻的方法 |
為自定義頁面添加動態旺旺圖標和總結 |