《淘寶天貓網(wǎng)店美工實戰(zhàn)視覺設計+店鋪裝修+移動端店鋪》教學課件-第10章裝修網(wǎng)店

1、淘寶天貓網(wǎng)店美工實戰(zhàn)-視覺設計+店鋪裝修+移動端店鋪（微課版）第10章裝修網(wǎng)店淘寶天貓網(wǎng)店美工實戰(zhàn)-視覺設計+店鋪裝修+移動端店鋪（微課目錄 Contents10.1 裝修前的準備工作10.2 裝修PC端網(wǎng)店10.3 裝修移動端網(wǎng)店10.4 課堂實訓裝修開學季專題頁目錄 Contents10.1 裝修前的準備工作10.2 10.1.1 切片與保存圖片其具體操作如下。1 添加參考線2 切片圖片本例為“女包網(wǎng)店首頁”的首頁圖片創(chuàng)建切片，并將創(chuàng)建的切片保存到計算機中，方便后期裝修網(wǎng)店時使用，下面介紹網(wǎng)頁切片與保存的方法。10.1.1 切片與保存圖片其具體操作如下。1 添加參考線10.1.1 切片與保

2、存圖片3 設置保存格式4 查看保存效果10.1.1 切片與保存圖片3 設置保存格式4 查看保存效10.1.2 上傳圖片至圖片空間進行裝修或發(fā)布商品前，商家可將需要使用的圖片上傳到圖片空間，在需要使用對應的圖片時可以直接從中選擇。其具體操作如下。1 輸入文件夾名稱10.1.2 上傳圖片至圖片空間進行裝修或發(fā)布商品前，商家10.1.2 上傳圖片至圖片空間2 單擊“上傳”超鏈接4 查看上傳的圖片3 選擇需要上傳的圖片10.1.2 上傳圖片至圖片空間2 單擊“上傳”超鏈接4 目錄 Contents10.1 裝修前的準備工作10.2 裝修PC端網(wǎng)店10.3 裝修移動端網(wǎng)店10.4 課堂實訓裝修開學季專題

3、頁目錄 Contents10.1 裝修前的準備工作10.2 10.2.1 認識裝修模塊在進行模塊布局前，需要了解網(wǎng)店裝修的基礎模塊。常用的基礎模塊包括店鋪招牌模塊、寶貝推薦模塊、寶貝排行模塊、默認分類模塊、個性分類模塊、自定義區(qū)模塊、圖片輪播模塊等。網(wǎng)店裝修的常用模塊，如圖所示。10.2.1 認識裝修模塊在進行模塊布局前，需要了解網(wǎng)店裝10.2.2 裝修 PC 端網(wǎng)店首頁本例將使用“全屏寬圖”系統(tǒng)模塊裝修首頁中的一個頁面，其具體操作如下。1 裝修首頁頁面2 添加模塊10.2.2 裝修 PC 端網(wǎng)店首頁本例將使用“全屏寬圖”10.2.2 裝修 PC 端網(wǎng)店首頁3 選擇要添加的圖片4 調整裁剪區(qū)域

4、5 選擇要添加的圖片6 預覽裝修后的效果10.2.2 裝修 PC 端網(wǎng)店首頁3 選擇要添加的圖片410.2.3 裝修 PC 端商品詳情頁1 單擊“發(fā)布寶貝”超鏈接2 選擇商品類目詳情頁的裝修主要是在發(fā)布商品時進行的，當完成詳情頁的設計后，即可將其上傳到圖片空間中，再直接通過“淘寶神筆”中的模板生成。下面講解PC端商品詳情頁的裝修方法，其具體操作如下。10.2.3 裝修 PC 端商品詳情頁1 單擊“發(fā)布寶貝”10.2.3 裝修 PC 端商品詳情頁4 選擇圖片5 單擊“發(fā)布寶貝”超鏈接 3 “立即使用”按鈕6 選擇寶貝信息10.2.3 裝修 PC 端商品詳情頁4 選擇圖片5 單擊10.2.3 裝修

5、 PC 端商品詳情頁7 完成編輯10.2.3 裝修 PC 端商品詳情頁7 完成編輯目錄 Contents10.1 裝修前的準備工作10.2 裝修PC端網(wǎng)店10.3 裝修移動端網(wǎng)店10.4 課堂實訓裝修開學季專題頁目錄 Contents10.1 裝修前的準備工作10.2 10.3.1 裝修移動端網(wǎng)店首頁在網(wǎng)店裝修中除了涉及PC端，還需要對移動端網(wǎng)店進行裝修。下面將使用移動端中的自定義模塊對首頁進行簡單裝修，其具體操作如下。1 添加模塊2 編輯板式10.3.1 裝修移動端網(wǎng)店首頁在網(wǎng)店裝修中除了涉及PC端10.3.1 裝修移動端網(wǎng)店首頁4 單擊“上傳”按鈕5 選擇需要上傳的圖片3 單擊“添加圖片”

6、超鏈接10.3.1 裝修移動端網(wǎng)店首頁4 單擊“上傳”按鈕5 選10.3.1 裝修移動端網(wǎng)店首頁7 單擊“保存”按鈕6 選擇圖片10.3.1 裝修移動端網(wǎng)店首頁7 單擊“保存”按鈕6 選10.3.1 裝修移動端網(wǎng)店首頁8 繪制其他矩形并添加圖片10 查看預覽效果9 添加鏈接地址10.3.1 裝修移動端網(wǎng)店首頁8 繪制其他矩形并添加圖片10.3.2 裝修移動端商品詳情頁打開“商品發(fā)布”頁面，單擊選中“使用文本編輯器”單選項，單擊“添加”按鈕 ，打開“圖片空間”對話框，在其中選擇需要添加的商品詳情頁圖片，單擊“確定”按鈕，完成后單擊“提交寶貝信息”按鈕，即可完成移動端商品詳情頁的裝修。移動端商品詳

7、情頁裝修10.3.2 裝修移動端商品詳情頁打開“商品發(fā)布”頁面，單目錄 Contents10.1 裝修前的準備工作10.2 裝修PC端網(wǎng)店10.3 裝修移動端網(wǎng)店10.4 課堂實訓裝修開學季專題頁目錄 Contents10.1 裝修前的準備工作10.2 10.4 課堂實訓裝修開學季專題頁本例將裝修開學季專題頁，在裝修前先使用切片工具進行切片，再上傳到圖片空間，并進行頁面的裝修。在裝修時將直接使用全屏寬圖進行裝修，完成后的參考效果如圖所示。實訓目標10.4 課堂實訓裝修開學季專題頁本例將裝修開學季專題10.4 課堂實訓裝修開學季專題頁實訓思路根據(jù)實訓目標，完成本實訓主要需進行以下主要操作。（1）打開“開學季專題頁.jpg”素材文件，將其進行切片操作。（2）登錄淘寶，在“千牛賣家中心”下拉列表中單擊“免費開店”超鏈接進入“千牛賣家中心”頁面，在左側列表框的“店鋪管理”欄中單擊“圖片空間”超鏈接，進入“素材管理”頁面，將切片后的圖片上傳到“素材管理”頁面中。（3）打開“店鋪裝修”頁面，添加“全屏寬度”模塊，打開“全屏寬度”