08 店鋪中的代碼

1、,,,,,淘寶美工全攻略,店鋪中的代碼,店鋪中的代碼,8.1.1,Photoshop切片——作用和技巧,,,,,,文件格式,作用與技巧,切片的作用瀏覽網(wǎng)店時，頁面打開的速度受圖片大小的影響很大。將一張大圖切成多張小圖，可以加快頁面打圖片打開的速度，提升買家體驗滿意度。便于裝修時單一的替換商品，而不影響其他產(chǎn)品。切片可以用在首頁，寶貝詳情頁的關聯(lián)。

2、 切片技巧依靠參考線：基于參考線的切片比直接手動繪制切片區(qū)域更精準。必須切片的區(qū)域：虛線、轉(zhuǎn)角與漸變形狀在DreamWeaver不能實現(xiàn)，只能使用Photoshop切片。特殊文字效果必須切片：除黑體和宋體外，其他字體必須切片。在瀏覽器中最有效的字體只有宋體和黑體，其它字體瀏覽器可能不兼容。,店鋪中的代碼,8.1.2,Photoshop切片——切片與存儲,,,,,,文件格式,切片與存儲,(1) 在Potoshop中按Ctrl

3、+O組合鍵，在彈出的對話框中打開一張圖片，按Ctrl+R組合鍵打開標尺，根據(jù)需要切割的區(qū)域，從左側(cè)和頂端拖出參考線； 在工具箱中選擇裁剪工具，按住鼠標，在展開的工具組中選擇切片工具， 在選項欄中單擊“基于參考線的切片”按鈕；,(2) 此時圖像被切割為多個小塊，對于頂部不需要切割的區(qū)域還需要將其組合成完整的圖片。使用切片選擇工具，按住Shfit鍵，選擇多個切片，單擊鼠標右鍵，執(zhí)行“組合切片”命令，用同樣的方法，將其他需要組合的切片進行組合

4、，按Ctrl+；組合鍵隱藏參考線；,店鋪中的代碼,8.1.2,Photoshop切片——切片與存儲,,,,,,文件格式,(3) 使用切片選擇工具選擇一個切片后，雙擊鼠標，彈出的對話框，在URL中粘貼鏈接網(wǎng)址；單擊“確定”按鈕。為其他需要添加鏈接的切片執(zhí)行相同的操作；執(zhí)行“文件”|“存儲為Web所用格式”命令；,(4) 打開的對話框，為了顯示全部切片，在對話框下方單擊“縮放級別”三角按鈕，在展開的列表中選擇“符號視圖大小”選項；按住Shf

5、it鍵選擇多個切片，在右側(cè)選擇“優(yōu)化的文件格式”為JPEG；存儲選擇格式為“HTML和圖像”，并設置存儲路徑與文件名。,店鋪中的代碼,8.2.1,Dreamweaver的使用——切片生成代碼,,,,,,文件格式,(1) 首先進入賣家中心上傳圖片”；在彈出的對話框中單擊“點擊上傳”按鈕，彈出對話框，選擇所用切片所在的路徑，選中所用切片，單擊“打開”按鈕，等待上傳完成即可；,（2）在Dreamweaver中操作。選擇前面保存的HTML格式的

6、文件，單擊鼠標右鍵，執(zhí)行“打開方式”|“Adobe Dreamweaver”命令；選擇一張圖片，在“屬性”面板中的Src中可以看到圖片的地址；(打開圖片空間，找到對應的圖片，單擊“復制鏈接”按鈕；,切片生成代碼,店鋪中的代碼,8.2.2,Dreamweaver的使用——熱點與鏈接,,,,,,(1) 啟動啟動Dreamweaver CC，新建HTML文檔，執(zhí)行“插入”|“圖像”|“圖像”命令；在彈出的對話框中選擇圖像，單擊“確定”按鈕，在

7、“屬性”面板中修改圖片地址，單擊矩形熱點工具；,（2）在圖像上的“收藏優(yōu)惠券”區(qū)域拖出一個矩形熱點；在“屬性”面板中粘貼“鏈接”地址，選擇“屬性”面板中的橢圓熱點工具；,熱點與鏈接,店鋪中的代碼,8.2.2,Dreamweaver的使用——熱點與鏈接,,,,,,(3) 在圖像中繪制圓形熱點區(qū)域；在“屬性”面板中選擇指針熱點工具；,（4）在“屬性”面板中修改鏈接地址后復制代碼，粘貼到店鋪自定義區(qū)域中。,店鋪中的代碼,8.3,源代碼裝修,,

8、,,,,(1) 將代碼區(qū)域中的之間的代碼選中，單擊鼠標右鍵，執(zhí)行“拷貝”命令；下將代碼裝修進店鋪中，進入淘寶店鋪裝修后臺，在店鋪右側(cè)的任意模塊上，單擊右下角的“添加模塊”按鈕；,(2) 在打開的對話框中選擇“自定義內(nèi)容區(qū)”，單擊右側(cè)的“添加”按鈕， 在添加的模塊右上角單擊“編輯”按鈕，打開對話框，選中“編輯源代碼”復選框；,源代碼裝修,店鋪中的代碼,8.3,源代碼裝修,,,,,,(3) 在文本框中粘貼前面復制的代碼，在顯示標題后單擊“不

9、顯示”單選按鈕；,（4）擊“確定“按鈕，單擊裝修后臺右上角的“發(fā)布”按鈕，彈出對話框，單擊“確定”按鈕， 在對話框中單擊“查看店鋪”按鈕，查看裝修的效果。,店鋪中的代碼,8.4.1,獲取淘寶常見鏈接代碼——寶貝鏈接,,,,,,寶貝鏈接：,寶貝的鏈接是最常用的鏈接，在“賣家中心”單擊“出售中的寶貝”鏈接，展開寶貝列表，單擊寶貝后的“復制鏈接”鏈接?；蛘撸蜷_寶貝頁面，在瀏覽器的地址欄中即為該寶貝的鏈接，如圖8 47所示。按Ctrl+A組合

10、鍵，按Ctrl+C組合鍵復制后即可使用。,店鋪中的代碼,8.4.2,獲取淘寶常見鏈接代碼——圖片鏈接,,,,,,圖片鏈接：,進入圖片空間，選擇一個圖片，單擊下方中間的“復制鏈接”按鈕，即可復制圖片鏈接。或者打開圖片，單擊“復制鏈接”文字也可。,店鋪中的代碼,8.4.3,獲取淘寶常見鏈接代碼——購物車鏈接,,,,,,購物車鏈接：,（1）在Dreamweaver代碼視圖中將所有代碼刪除，輸入文字“加入購物車”，并選中文字，在“屬性”面板中設

11、置鏈接，鏈接的地址為需要添加購物車的寶貝地址，為鏈接添加樣式名“J_CartPluginTrigger”；,(2) 添加后可修改文字的樣式或?qū)⑽淖中薷臑閳D片，這里將文字換成圖片，復制代碼。在店鋪裝修頁面中，將代碼粘貼到自定義內(nèi)容區(qū)的源碼模式中；確定后預覽效果。,店鋪中的代碼,8.4.4,獲取淘寶常見鏈接代碼——分享鏈接,,,,,,分享鏈接：,(1) 在瀏覽器的地址欄中輸入sns.taobao.com，進入淘寶sns組件平臺，單擊“組件中

12、心”按鈕，切換頁面；,(2) 在頁面下方選擇一種外觀，在右側(cè)有相應的效果預覽，選擇外觀后單擊“復制代碼”按鈕，從右側(cè)的配置項中可以得知，我們復制的代碼中還有多個必填選項需要填寫；將復制的代碼粘貼到Dreamweaver中，填寫這些參數(shù)完成代碼。將代碼裝修到店鋪中即可。,店鋪中的代碼,8.4.5,獲取淘寶常見鏈接代碼——評論鏈接,,,,,,(1) 在淘寶sns組件平臺“組件中心”頁面，單擊“評論組件”選項， 跳轉(zhuǎn)頁面，在頁面下方顯示了“

13、外觀預覽”和代碼；,(2) 在代碼上方包含三個選項，“標簽”、“JS API”和“Iframe”，我們只需要“標簽”中的內(nèi)容。同樣，右側(cè)的配置項中顯示了需要填寫的內(nèi)容，單擊“復制代碼”按鈕將代碼復制，并粘貼到Dreamweaver代碼視圖的與之間，將參數(shù)修改；,評論鏈接：,店鋪中的代碼,8.4.6,獲取淘寶常見鏈接代碼——喜歡鏈接,,,,,,喜歡鏈接：,(1) 在淘寶sns組件平臺“組件中心”頁面，單擊“喜歡”選項；,(2) 選擇一種

14、代碼，單擊下方的“復制代碼”按鈕。將代碼粘貼到Dreamweaver中，將商品ID修改即可將代碼應用到店鋪中了。,店鋪中的代碼,8.4.7,獲取淘寶常見鏈接代碼——客服旺旺鏈接,,,,,,(1) 百度搜索“阿里旺旺旺遍天下”，進入頁面，在該頁面中可選擇旺旺的動態(tài)圖片格式；,(2) 填寫旺旺用戶名及圖片提示后，單擊“生成網(wǎng)頁代碼”按鈕即可在下方的文本框中生成代碼；單擊“復制代碼”按鈕后選擇文本框中的代碼，按Ctrl+C復制即可應用到其它

15、地方。,客服旺旺鏈接：,店鋪中的代碼,8.4.7,獲取淘寶常見鏈接代碼——店鋪ID的獲取,,,,,,打開店鋪首頁，在瀏覽器的地址欄中可以看到店鋪首頁的地址：shop106160225.taobao.com，而這個shop后的一串數(shù)字就是店鋪的ID。,店鋪ID的獲?。?店鋪中的代碼,8.4.7,獲取淘寶常見鏈接代碼——商品ID的獲取,,,,,,在“賣家中心”選擇出售中的寶貝，將鼠標移至寶貝的標題上，此時在瀏覽器左下方的狀態(tài)欄中即顯示了商品