怎么利用DW和ps給淘寶店招添加搜索框?

看到人氣店鋪店招都有搜索框,今天我來分享下具體實現方法。
1、找到一張自己喜歡的店招圖片,然后打開淘寶頁面,登陸自己的賬戶,點擊“賣家中心”--“圖片空間”--“上傳圖片”就可以將自己的店招上傳到自己的圖片空間了,過程見圖。
2、好,店招圖片已經上傳到空間了。打開DW軟件,選擇文件→新建,在彈出的對話中選擇空白頁→頁面類型:HTML→頁面布局:無→創(chuàng)建,具體看圖。
3、點擊代碼,進入代碼編輯狀態(tài),見圖。
4、按crtl+A,按鍵盤上的Delete鍵,將自帶的代碼刪除,然后將下面的代碼復制粘貼進去,見圖。
代碼:
- <table background="店招素材鏈接"
- width="950" height="120" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td> </td>
- <td> </td>
- <td> </td>
- </tr>
- </table>
5、其中店招素材鏈接就是第一步上傳到空間的店招圖片鏈接,打開淘寶的圖片空間,雙擊第一步上傳的店招圖片,進入大圖狀態(tài),點擊左上角的復制鏈接,這時店招的鏈接就復制下來了。我們回到DW中,將代碼中的 店招素材鏈接 刪除,然后粘貼剛剛復制的店招鏈接。
6、在DW中,將代碼編輯試圖 切換到 設計編輯試圖,用鼠標滑動表格里的兩個虛框,將表格中間的一列調整至空白處。
7、然后在DW中,從 設計編輯試圖 切換到 代碼編輯試圖,將全部代碼選中,復制。打開淘寶店鋪裝修頁面,點擊店招右上角的編輯,在彈出的對話框中選擇自定義招牌,然后點擊圖中的第二部,切換到源碼編輯,將剛DW中復制的代碼粘貼進來。
8、這時,我們發(fā)現店鋪店招是沒有搜索框字的,別著急,我們接著點擊店招右上角的編輯,不用切換到源碼編輯狀態(tài)了,我們直接在剛剛DW中調整的虛框中輸入文字,當然,需要提前設計好字號,字體,顏色等。
9、輸入需要的文字后,按一下ENTER(回車)鍵,然后再次轉到源碼編輯下,找到剛輸入的文字代碼,詳細見圖。在這個代碼后面復制下面的搜索源碼,將下面代碼中 您的店鋪鏈接 替換為自己淘寶店鋪鏈接,店鋪鏈接以http://*****.taobao.com為準,點擊保存就可以了:
- <form action="您的店鋪鏈接/search.htm?&&&scene=taobao_shop" method="post" style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;" target="_blank"> <input name="baobei_type" type="hidden" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#000;font-weight:bold;padding-top:0px;"> 店內搜索:</span><input name="keyword" style="line-height:16px;width:100px;font-size:12px;" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;color:#000;padding-top:0px;">價格: </span><input name="lowPrice" style="line-height:16px;width:50px;font-size:12px;" /> <span style="padding-bottom:0px;margin:0px;padding-left:0px;padding-right:0px;padding-top:0px;">-</span> <input name="highPrice" style="line-height:16px;width:50px;font-size:12px;" /> <input style="border-bottom:medium none;border-left:medium none;padding-bottom:1px;background-color:#FF0000;margin:0px; padding-left:10px;padding-right:5px;color:#FFF;font-size:12px;border-top:medium none;border-right:medium none; padding-top:3px;" type="submit" value="搜索" /> </form>
10、不要點擊保存,點擊源碼按鈕,發(fā)現字體是黑色,我們選中黑色字,改為白色。點擊后面紅色框的搜索后面,按回車,調整位置。就大功告成了。
相關推薦:
相關文章
- 淘寶店鋪公告總是滾動怎么設置成不滾動?本來公告就少,還一直滾動,感覺不能讓買家直接看到重要信息,該怎么將滾動取消呢?下面分享設置店鋪公告不滾動的教程,需要的朋友2015-12-17
- 淘寶全屏店招怎么安裝? 很多淘寶賣家都是自己身兼數職,客服,美工等,下面就教您專業(yè)版如何安裝全屏店招,需要的朋友可以參考下2015-05-13
- 這篇文章主要介紹了淘寶店鋪裝修之加入同店轉讓功能設置方法圖文教程,通過本文你還可以學習到創(chuàng)建自定義頁面的方法,需要的朋友可以參考下2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修之裝修布局設置方法圖文教程,淘寶店鋪可以自由選擇網店的布局,也就是你可以選擇通欄的或者左右欄的,可以自由轉換,本文就講解了設置方法,需2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修添加寶貝詳情頁導航方法圖文教程,增加導航能讓買家迅速了解寶貝信息,尤其是一些描述比較長的寶貝,需要的朋友可以參考下2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修中修改導航條顏色方法圖文教程,本文用一個實際案例講解了一個彩色導航條的制作過程,需要的朋友可以參考下2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修自己動手制作一個公告欄(HTML)圖文教程,其實網上也有很多店鋪公告的模板,大家可以自己去下載,但是如果你想做一個獨一無二的的店鋪公告欄,2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修在導航上加入信用評價鏈接方法圖文教程,很多淘寶賣家看到別人的導航條上可以看到信用評價,但是自己的卻沒有,如何實現呢,其實也不是那么難的2015-05-11
- 這篇文章主要介紹了淘寶店鋪裝修添加寶貝排行榜方法圖文教程,網店裝修如何添加"寶貝排行榜"?寶貝排行榜怎么弄的?閱讀本文即可找到答案,需要的朋友可以參考下2015-05-11
- 淘寶達人u站怎樣裝修?相信很多朋友都不是很清楚吧,其實方法很簡單的,下面小編就為大家介紹可視化u站的裝修方法,希望能對大家有所幫助2015-03-12