今天跟大家探討的是關(guān)于裝修的問(wèn)題，雖然模板有千千萬(wàn)萬(wàn)，但它們都真正適合自己的店鋪嗎？在這里裝修不求人淘寶學(xué)堂教你免費(fèi)打造屬于自己的店鋪公告欄。

首先我們需要的軟件是photoshop(也就是PS)和dreamweaver

1、首先打開(kāi)PS，依次點(diǎn)擊“文件” ---- “新建”

創(chuàng)建一個(gè) 750*750 分辨率為72的文件

2、從網(wǎng)上找一張圖片來(lái)作為背景，我們店里的整體顏色都是綠色的，所以我找來(lái)一張綠色的圖片作為背景，快捷鍵“ctrl+o”導(dǎo)入圖片。

3、選擇PS左側(cè)面板上的按鈕，把原圖拖拽到咱們新建的文件中來(lái)

4、點(diǎn)擊左側(cè)面板的按鈕在背景圖上托一個(gè)框出來(lái)（這個(gè)框就是以后我們輸入文字的公告欄，大小根據(jù)自己店鋪和背景圖的大小定），然后點(diǎn)擊右側(cè)面板上的按鈕新建圖層， 接著左側(cè)面板選擇顏色。

5、在拖出的那個(gè)框中填充顏色，快捷鍵“alt+delete”

我們還要給這個(gè)框描邊，方法是：點(diǎn)擊鼠標(biāo)右鍵，選擇描邊

進(jìn)入描邊選項(xiàng)

按鍵盤(pán)上的“ctrl+d”把框周圍的虛線去掉

6、給這個(gè)框加入立體感，點(diǎn)擊右側(cè)面板的按鈕，選擇投影選項(xiàng)

進(jìn)入投影選項(xiàng)，數(shù)據(jù)如下

最后效果

7、打字，選擇左側(cè)面板的按鈕，這個(gè)按鈕就是一個(gè)打字工具，選擇后鼠標(biāo)點(diǎn)擊圖片任意部分就可以打字了。

字體、大小、顏色 在這里調(diào)

如果想讓字體有立體感同上，選擇右側(cè)面板的，自己可以DIY，試著做一下。

8、我們還需要一個(gè)框，同樣點(diǎn)擊左側(cè)面板的按鈕，右側(cè)面板的新建圖層，這里顏色我們選擇白色，“alt+delete”填充顏色，然后鼠標(biāo)右鍵選擇描邊 ，這個(gè)框是用來(lái)放客服旺旺的圖標(biāo)的地方，可根據(jù)客服的多少來(lái)選擇這個(gè)框的大小。

進(jìn)入描邊選項(xiàng)

選擇顏色

9、給這個(gè)圖層加一個(gè)蒙版，選擇右側(cè)面板的按鈕。

10、依次選擇 漸變工具 漸變顏色

漸變顏色我們選擇第一個(gè)，左白右黑

按住鍵盤(pán)上的“shift”用鼠標(biāo)拉一條線，按住“shift”目的是拉的線是直線。

最后的效果

11、從網(wǎng)上找來(lái)一張客服圖片，從PS中"ctrl+o"導(dǎo)入這張圖片

選擇左側(cè)面板的按鈕，把原圖拖拽到自己的文件中

如果大小不一可按一下鍵盤(pán)上的“ctrl+t”鼠標(biāo)調(diào)節(jié)大小，大小調(diào)節(jié)好之后“回車”確認(rèn)

12、左側(cè)面板選擇按鈕，然后打上字

13、把你的旺旺圖標(biāo)截一下圖放在這里，這里的旺旺圖標(biāo)是不會(huì)動(dòng)的，目的是一會(huì)切片的時(shí)候尺寸不會(huì)錯(cuò)

14、再?gòu)木W(wǎng)上找來(lái)一張 收藏本店 ，這個(gè)最后加上鏈接，顧客朋友就可以點(diǎn)擊這里收藏你的店鋪了。

如果感覺(jué)還是比較空，就輸入關(guān)于店鋪介紹的文字

15、選擇左側(cè)面板上的按鈕，進(jìn)行切片，切片的時(shí)候注意，1.公告欄 2.旺旺圖標(biāo)切成一個(gè)一個(gè)的3.收藏本店 這3個(gè)地方一定要切好，公告欄是我們以后要放文字的地方，旺旺圖標(biāo)使我們最后要把它替換成客服的旺旺代碼，方便顧客和我們聯(lián)系，收藏本店使我們要單獨(dú)加入鏈接。

16、存儲(chǔ)，依次點(diǎn)擊“文件”---“存儲(chǔ)為Web所用格式”

點(diǎn)擊“save”

臨時(shí)保存在桌面上吧

存儲(chǔ)之后我們得到這兩個(gè)文件

好了，下一步我們要使用的軟件是 “dreamweaver”

1、打開(kāi)軟件，選擇“打開(kāi)”

選擇我們剛剛存儲(chǔ)的文件

選擇“設(shè)計(jì)”

2、用鼠標(biāo)點(diǎn)擊一下公告欄，記住源文件和尺寸

如上圖，這個(gè)的源文件是“images/未完成-03.gif” 寬：424高：425記住之后按鍵盤(pán)上的“delete”也就是刪除鍵，然后找到背景后邊的文件夾圖標(biāo)。

選擇剛才PS存儲(chǔ)的images

打開(kāi)之后找到剛剛讓你記住的源文件，也就是images/未完成-03.gif點(diǎn)擊“確定”

輸入尺寸 寬424 高425 ，然后鼠標(biāo)點(diǎn)擊一下其他的圖就等于確認(rèn)了，看是不是被我們刪除的圖又回來(lái)了，只不過(guò)它是作為背景回來(lái)的，我們可以在上邊寫(xiě)字了，寫(xiě)上幾個(gè)字用來(lái)做記號(hào)，比如輸入“插入內(nèi)容”

3、旺旺圖標(biāo)也是一樣，同樣選定第一個(gè)旺旺圖標(biāo)，記住源文件和尺寸

刪除之后再?gòu)谋尘袄镞呎业奖晃覀儎h掉的圖片，也就是“images/未完成-07.gif”

替換好之后我們就可以在旺旺圖標(biāo)上打字了，這里你可以打上幾個(gè)字作為記號(hào)，目的就是以后放在淘寶自定義以后我們可以用旺旺代碼來(lái)替換這兩個(gè)字，來(lái)實(shí)現(xiàn)顧客點(diǎn)擊這里就可以和我們聯(lián)系，比如說(shuō)我們先在這里打上“客服”兩個(gè)字，等把代碼復(fù)制到自定義里邊我們就可以用旺旺代碼來(lái)替換“客服”這兩個(gè)字了，如果不替換這兩個(gè)字那么它一點(diǎn)用處都沒(méi)有，有很多網(wǎng)站可以生成旺旺代碼，大家可以搜索一下。

4、我們需要把PS存儲(chǔ)的另一個(gè)文件里邊的圖片全部都要上傳到我們的圖片空間，記住不要勾選下邊這幾項(xiàng)，以免最后亂碼。

已經(jīng)上傳到空間了

5、我們從軟件中切換到代碼

選擇需要替換的部分，也就是“images/未完成-x.gif”

從淘寶圖片空間復(fù)制鏈接，需要注意一點(diǎn)，替換的時(shí)候一定要看準(zhǔn)文件名，1就替換1,2就替換2，千萬(wàn)不要替換錯(cuò)了哦，替換的時(shí)候盡量采用快捷鍵“ctrl+c和ctrl+v”來(lái)復(fù)制粘貼，以免弄錯(cuò)。

OK，替換好了

6、把所有需要替換的全部替換完成之后我們也快大功告成了，復(fù)制粘貼到店鋪首頁(yè)的自定義，注意要切換到代碼再粘貼哦，旺旺圖標(biāo)一定要記得替換，公告欄里的文字想讓它成為自下往上滾動(dòng)的效果，我們還要從代碼做文章，切換到代碼在你做記號(hào)的那個(gè)位置也就是“插入內(nèi)容”這個(gè)地方替換成代碼：

<marquee scrollamount="3" direction="up">文字部分替換成你想要讓公告欄顯示的文字</marquee>

全部搞定之后我們就可以預(yù)覽一下了，發(fā)布之前記得要把你原來(lái)的自定義備份一下，避免出問(wèn)題了沒(méi)得還原了。

樂(lè)發(fā)網(wǎng)超市批發(fā)網(wǎng)提供超市貨源信息,超市采購(gòu)進(jìn)貨渠道。超市進(jìn)貨網(wǎng)提供成都食品批發(fā),日用百貨批發(fā)信息、微信淘寶網(wǎng)店超市采購(gòu)信息和超市加盟信息.打造國(guó)內(nèi)超市采購(gòu)商與批發(fā)市場(chǎng)供應(yīng)廠商搭建網(wǎng)上批發(fā)市場(chǎng)平臺(tái),是全國(guó)批發(fā)市場(chǎng)行業(yè)中電子商務(wù)權(quán)威性網(wǎng)站。

本文內(nèi)容整合網(wǎng)站：百度百科、知乎、淘寶平臺(tái)規(guī)則

本文來(lái)源： 免費(fèi)打造屬于自己的店鋪公告欄