大家好 ，最近苦惱于自己的店鋪太過(guò)于單調(diào)了，總是有種讓人很沉悶的感覺(jué) ，導(dǎo)致好東西好也賣(mài)不動(dòng)啊，杯具啊 。所以經(jīng)過(guò)我苦苦的學(xué)習(xí)和向高人請(qǐng)教終于有所收獲 ，一頭興奮的把自己的店鋪弄飛起來(lái)啦 ！！當(dāng)然，好東西要和大家分享啦 ，所以經(jīng)過(guò)半天的草稿終于可以發(fā)表啦（PS：在這半天中收到來(lái)自旺旺的五花八門(mén)的廣告，有經(jīng)典的，搞笑的，各式各樣都有，這網(wǎng)道現(xiàn)在真是像電視一樣，在廣告中插入節(jié)目啦，本來(lái)還在琢磨這店鋪廣告詞怎么用呢，現(xiàn)在好了！不學(xué)自成了，以下省略99字。。。。。。）
好了，關(guān)于廣告這東西如果各位看官有興趣的我們?cè)谒降紫略傧嗷ソ涣?，進(jìn)入正題吧，今天主要和大家講的是如何讓我們的店鋪主頁(yè)有漂亮的圖片 ，讓圖片動(dòng)起來(lái)，還可以在同一張圖片設(shè)置多個(gè)鏈接，就像淘寶旺鋪廣告說(shuō)的那樣，隨心所欲 ，想怎么玩就怎么玩 ！
以前我都是叫淘寶上找人家?guī)驮O(shè)計(jì)模板，既花錢(qián)，又達(dá)不到自己想要的那個(gè)效果，總之就是說(shuō)不清楚了，所以學(xué)好這本領(lǐng)，以后對(duì)于店鋪裝修我們也算是隨心所欲啦！！
開(kāi)始吧，在這過(guò)程中我們要準(zhǔn)備兩款軟件，一個(gè)是美圖秀秀，專(zhuān)門(mén)做圖修圖的好工具，還有一個(gè)是Adobe Dreamweaver CS4 制作網(wǎng)頁(yè)的強(qiáng)大軟件，這個(gè)主要是用來(lái)做代碼的。大家不用擔(dān)心 ，我準(zhǔn)備了大量的圖片說(shuō)明，保證大家能看得懂 ，屬于傻瓜教程，看圖學(xué)習(xí)的。
還要注意一點(diǎn)，以下都是先文字說(shuō)明，然后才圖片指導(dǎo)在下面，大家可以配合圖片就能通熟易懂！
開(kāi)始：
打開(kāi)美圖秀秀軟件，點(diǎn)擊右上排的新建，
彈出新建圖片的尺寸，設(shè)置好尺寸寬為800 高度600，背景顏色選擇透明，然后點(diǎn)應(yīng)用。
接下來(lái)顯示剛才設(shè)置好的背景圖，鼠標(biāo)點(diǎn)擊上面拼圖，彈出讓我們選擇樣式，點(diǎn)擊第3個(gè)模板拼圖（模板拼圖里面有很多軟件自帶做好的模板，很漂亮，多種選擇，非常適合新手）
找到右邊的在線素材下面有很多模板可供我們使用，有幾頁(yè)，大家可以找一下自己喜歡的模板。看好后點(diǎn)擊一下即可以進(jìn)入模板編輯模式。
下面我們找一個(gè)簡(jiǎn)單一點(diǎn)的模板來(lái)舉例：選定模板后來(lái)到編輯模式，默認(rèn)邊框顏色是白色，大家可以在左下方找到邊框顏色選自己喜歡的顏色，現(xiàn)在我們選黑色做為邊框顏色。
接下來(lái)開(kāi)始插入圖片了，找到我們想宣傳的寶貝圖片（選圖片要以清晰漂亮的圖片為主，最好是讓人看了馬上有購(gòu)買(mǎi)欲望的 ，還要和小分塊的尺寸差不多的這樣有利于調(diào)整，圖片可以事先用PS或者其他圖片工具調(diào)好） 把鼠標(biāo)放在小塊上，雙擊就會(huì)彈出讓你插入圖片的窗口，找到要插入的圖片，點(diǎn)打開(kāi)，這時(shí)候顯示圖片插入板塊的效果，在左上角的場(chǎng)景調(diào)整可以調(diào)整圖片的大小和所使用的范圍，把圖片稍微調(diào)整到最佳效果就行了，如果感覺(jué)效果不好可以按剛才的步驟重新選擇插入另一張圖片。
這個(gè)板塊完成后接下來(lái)到下一板塊，還是按以上的方法依次把所有的板塊都放上圖片調(diào)整到最佳效果。
然后再調(diào)整一下尺寸，點(diǎn)右上角的尺寸選項(xiàng)，彈出一個(gè)尺寸修改窗口，我們?cè)趯挾壤锩娓某?50（950是整體頁(yè)面的寬度，這樣效果更飽滿(mǎn)），單位確認(rèn)為像素就可以了，其他的是自動(dòng)改的，之后點(diǎn)應(yīng)用，圖片全部組合起來(lái)成整體的大圖片。
在這里大家如果熟悉美圖秀秀這款軟件的使用，可以到上面的各項(xiàng)選項(xiàng)欄進(jìn)行一些更深入的美容美化，這里我就不多說(shuō)了，直奔主題吧，讓圖片動(dòng)起來(lái)！！！ 點(diǎn)擊上方的飾品選項(xiàng)，然后再點(diǎn)左邊下拉下來(lái)的淘寶專(zhuān)用選項(xiàng)（這款軟件特有的淘寶專(zhuān)用，不知道是淘寶網(wǎng)開(kāi)發(fā)的，還是合作，總之我們知道淘寶真是很好很強(qiáng)大！！），
進(jìn)入淘寶專(zhuān)用以后我們把視線轉(zhuǎn)移到右邊，看到很多平常我們?cè)谔詫毶弦?jiàn)到的一些圖標(biāo)字眼等等，有幾百個(gè)供我們選擇，安靜的，會(huì)跳動(dòng)的，會(huì)變大變小的都有，很強(qiáng)大吧，不用再為花樣的LOGO和標(biāo)題頭痛了吧。看好我們想用的，鼠標(biāo)點(diǎn)擊一下就自動(dòng)插入到圖片中了，隨之也彈出對(duì)這個(gè)插件的小編輯欄，可以調(diào)節(jié)透明度和旋轉(zhuǎn)角度（這兩項(xiàng)一般不用調(diào)）還有素材大小（這個(gè)是需要調(diào)整的，調(diào)到合適的大小看起來(lái)整體效果會(huì)更好），把鼠標(biāo)放在素材上會(huì)顯示四方的藍(lán)色邊框圍著，這個(gè)也可以調(diào)查大小，不過(guò)主要是用來(lái)移動(dòng)素材，把素材移到想放的位置即可，如果插入后感覺(jué)這個(gè)素材不合適，可以點(diǎn)一下素材編輯欄的刪除本素材就可以了。在這邊放多少個(gè)素材都可以的，按以上的步驟即可，但也不要貪心放得滿(mǎn)屏花花亂亂的喔，這樣是就顯示不出重點(diǎn)所在了而且還會(huì)增加圖片的大小，很多相冊(cè)規(guī)定圖片大小要在1M以?xún)?nèi)才能上傳的。
在這里要說(shuō)明一點(diǎn)，當(dāng)大家在這里放閃動(dòng)的素材進(jìn)入圖片的時(shí)候是它是顯示不動(dòng)的喔，因?yàn)檫@個(gè)是JPG圖片，不過(guò)不用擔(dān)心等下保存的時(shí)候我們改一下格式就會(huì)動(dòng)了，現(xiàn)在在圖片右上角點(diǎn)預(yù)覽可以看到動(dòng)的效果，預(yù)覽后直接點(diǎn)x關(guān)閉，不要點(diǎn)保存以免出亂。
好了，現(xiàn)在我們插入這些有活力的素材后是不是感覺(jué)好多了， 但是好象還差點(diǎn)東西啊，是什么呢？當(dāng)然是文字了，宣傳沒(méi)有文字不實(shí)際啊。這時(shí)候我們點(diǎn)擊上面的飾品旁邊的文字選項(xiàng)，這里有很多文字的樣式，都是簡(jiǎn)單易學(xué)的。首先我們進(jìn)點(diǎn)擊左邊的輸入靜態(tài)文字選項(xiàng)，點(diǎn)擊之后立馬彈出一個(gè)文字編輯框，讓我們輸入要插入的文字還有字體選項(xiàng)和網(wǎng)絡(luò)流行的特殊字體很漂亮的，還有文字顏色的修改、文字大小、透明度、旋轉(zhuǎn)度等。點(diǎn)擊更多里面還有字體的樣式、排列、陰影及搭邊，這些都是通俗易懂的，根據(jù)自己的需要調(diào)節(jié)一下就好了，多調(diào)幾次就熟悉了，如果不需要?jiǎng)t點(diǎn)擊編輯框的刪除本文字即可，根據(jù)需要可以無(wú)處次的插入文字，和剛才我們說(shuō)的插入素材是一樣的。下面我們來(lái)插入一些會(huì)動(dòng)的文字，視線轉(zhuǎn)移到左邊的下拉菜單選擇動(dòng)畫(huà)閃字，進(jìn)入該項(xiàng)后我們看到右邊有很多樣式的動(dòng)閃的文字，根據(jù)自己的需要來(lái)選取樣式吧，點(diǎn)擊看好的樣式后自動(dòng)會(huì)彈出和剛才靜態(tài)文字的編輯框，調(diào)整大小和顏色后就放好地方就可以了，也是可以放無(wú)限個(gè)的，但是還要說(shuō)一次，不能貪心放太多，增加圖片的大小！！
好了，經(jīng)過(guò)這幾步的學(xué)習(xí)相信大家應(yīng)該對(duì)如何用美圖秀秀做動(dòng)態(tài)圖片有所了解了，更深的了解和漂亮的圖片主要還是還靠自己多學(xué)習(xí)和練習(xí)了。現(xiàn)在我們基本把一大張會(huì)動(dòng)的圖片做好了，來(lái)到最后一步，也就是最關(guān)鍵的一步，決定圖片會(huì)不會(huì)動(dòng)的，那就是保存了。我們來(lái)點(diǎn)擊右上排的保存選項(xiàng)，彈出一個(gè)保存的窗口，很多人習(xí)慣的保存成JPG格式了，所以圖片就不會(huì)動(dòng)了，這里我們選擇第二個(gè)選項(xiàng)[保存為動(dòng)畫(huà)圖片]然后選擇要保存的地方和圖片名字就可以了。
當(dāng)當(dāng)當(dāng)，這就是做好的會(huì)動(dòng)會(huì)閃的圖片啦
第一部大功告成了，大家可以幻想一下這樣的效果放在店鋪的感覺(jué)啦 ，費(fèi)話(huà)少說(shuō)馬上進(jìn)入第二部吧，我們準(zhǔn)備一個(gè)強(qiáng)大的網(wǎng)頁(yè)制作軟件Adobe Dreamweaver CS4，這個(gè)軟件在網(wǎng)上有很多地方有下載，軟件有300多M下載可能要一個(gè)小時(shí)左右，做模板都需要準(zhǔn)備的，也有破解版，100多M的,功能都一樣，如果破到軟件的問(wèn)題可以旺旺M我，這個(gè)軟件對(duì)新手來(lái)說(shuō)比較復(fù)雜點(diǎn)，大家要用心學(xué)習(xí)啦 。下面我們開(kāi)始吧，打開(kāi)Adobe Dreamweaver CS4軟件，點(diǎn)擊新建下面的HTML選項(xiàng)，
之后將會(huì)進(jìn)入一個(gè)代碼繁多的面前，不要緊張，圖文并茂，一學(xué)就會(huì)。把鼠標(biāo)點(diǎn)在1區(qū)大的空白處，然后移動(dòng)鼠標(biāo)到上方的插入選項(xiàng)，點(diǎn)擊插入，選項(xiàng)下拉第二個(gè)選項(xiàng)圖像，
這時(shí)候彈出一個(gè)讓我們選擇要插入圖像的窗口，找到我們之前做好的那張動(dòng)態(tài)圖片后點(diǎn)擊確定，后會(huì)馬上彈出一個(gè)窗口，少管閑事不用理它 ，直接點(diǎn)確定按鈕，
后面又彈出另一個(gè)窗口！！！怎么回事，難道中病毒啦 ，不是啦！這個(gè)我們也不用管它，直接點(diǎn)確定，
當(dāng)當(dāng)當(dāng)，我們的圖片出現(xiàn)在空白處了，但是也還是不動(dòng)的，這個(gè)我們先不管了，被點(diǎn)住穴了，呵呵，等下解開(kāi)了自然能動(dòng)。這時(shí)我們把鼠標(biāo)移到右上邊的常用菜單下的圖像下拉的繪制矩形熱點(diǎn)，因?yàn)槲覀兊膱D片是四方的，所以選這個(gè)，如果需要做圓形的就點(diǎn)繪制橢圓熱點(diǎn)，如果是不規(guī)則的就點(diǎn)繪制多邊型熱點(diǎn)。
之后我們回到圖片上，在一個(gè)小板塊邊角處點(diǎn)一下鼠標(biāo)左鍵，按住左鍵不要松開(kāi)慢慢的拉開(kāi)把整個(gè)小板塊的圖片拉滿(mǎn)為止，簡(jiǎn)單的說(shuō)就像QQ截圖一樣了。拉完后松開(kāi)，這時(shí)候彈出一個(gè)窗口，不用理它直接點(diǎn)確定按鈕，這時(shí)候我們發(fā)現(xiàn)在我們選中的區(qū)域被蒙上了，鼠標(biāo)雙擊下面鏈接里的#字，把它刪掉，
然后到我們的淘寶店鋪里找到圖片的寶貝相應(yīng)的鏈接，復(fù)制該鏈接粘貼到這個(gè)鏈接框內(nèi)，這樣當(dāng)我們鼠標(biāo)點(diǎn)擊該區(qū)域的時(shí)候就會(huì)進(jìn)入到這個(gè)寶貝連接內(nèi)啦。
下面我們按剛剛的方法依次把剩下的板塊都做好相應(yīng)的鏈接就可以啦了。做好之后把它的保存在起來(lái)，點(diǎn)擊左上角的文件下拉到另存為，彈出窗口直接點(diǎn)保存按鈕就行了。然后按F12預(yù)覽一下，把各各板塊點(diǎn)擊一下看能不能轉(zhuǎn)到連接，如果都轉(zhuǎn)到連接證明我們成功了，如果有誤的話(huà)從頭再來(lái)看哪個(gè)環(huán)節(jié)出錯(cuò)啦。
預(yù)覽沒(méi)什么問(wèn)題后接下來(lái)我們進(jìn)入比較復(fù)雜而且關(guān)鍵的一步了 那就是代碼了，點(diǎn)一下左下角的<body>處，點(diǎn)了之后圖片上面的代碼會(huì)被選中，把鼠標(biāo)移到選中的區(qū)域點(diǎn)右鍵下拉菜單點(diǎn)拷貝選項(xiàng)復(fù)制該代碼。
然后把代碼粘貼到一個(gè)記事本上保存著。
接下來(lái)我們把剛才用美圖秀秀做好的圖片上傳到圖片空間，最好是用淘寶送的圖片空間，穩(wěn)定方便.上傳圖片以后，在圖片空間復(fù)制圖片的鏈接地址把它粘貼在剛才的代碼記事本里面更換一下地址，
詳細(xì)看以下圖片說(shuō)明，然后點(diǎn)保存，整個(gè)代碼就做好啦！
接下來(lái)開(kāi)始去裝修我們的店鋪了，進(jìn)入我的淘寶再進(jìn)入我的店鋪首頁(yè)，然后點(diǎn)擊右上邊角的裝修此頁(yè)面。
之后找好我們要在這個(gè)模板放在店鋪的頁(yè)頭還是頁(yè)中頁(yè)尾，定好之后點(diǎn)擊在此處添加新模塊，
然后選擇添加自定義區(qū)內(nèi)容，這個(gè)模塊是隨便自己設(shè)計(jì)的，空間非常大，也正是我們這期要講的，其他的暫時(shí)先不介紹，免得大家混亂 。
添加之后頁(yè)面會(huì)出現(xiàn)一個(gè)自定義區(qū)內(nèi)容的裝修模板，我們點(diǎn)擊編輯進(jìn)入，一片空白，就是要這個(gè)效果，大家有過(guò)自行裝修店鋪的都應(yīng)該來(lái)過(guò)這個(gè)頁(yè)面。這時(shí)候我們鼠標(biāo)移動(dòng)到右邊上角的最后一個(gè)圖標(biāo)，就是編輯HTML源碼，點(diǎn)擊一下該按鈕，
然后復(fù)制剛才我們保存的記事本里面的編碼，為了避免錯(cuò)漏，打開(kāi)記事本后在編輯菜單中點(diǎn)擊全選后再?gòu)?fù)制，
把它粘貼在自定義區(qū)內(nèi)容的空白處，然后再點(diǎn)擊一下右上角剛才點(diǎn)的那個(gè)圖標(biāo)，這時(shí)候剛才做好的圖片顯示在這里了，沒(méi)錯(cuò)還是動(dòng)的 ，活力閃碩 ，和大店鋪一樣啦 ，不再那么靜悄悄啦 ！！！點(diǎn)擊一下保存就大功告成了，
最后別忘了點(diǎn)發(fā)步喔，不然又得重新來(lái)過(guò)啦，嘿嘿
發(fā)布，大功告成啦！！！！！！！！！！！！！！！！！！！
【在這里要強(qiáng)調(diào)一下如果你的店鋪?zhàn)龆鄠€(gè)模板一定要記得給代碼改名字！如果不改名字的話(huà)那店鋪里只認(rèn)一個(gè)模板代碼，相當(dāng)于你用幾個(gè)代碼，但是連接都是一樣的，會(huì)造成連接不對(duì)板，我之前碰到過(guò)這種情況，研究了半天才知道問(wèn)題所在，如果碰到這種情況在這里看不懂的可以在線M我.改名字方法是，打開(kāi)剛才保存好的記事本找到usemap="#Map" 和name="Map" 這兩個(gè)里面，Map就是代碼默認(rèn)的名字，可以隨變改成別的但第一個(gè)值必須相同，舉個(gè)例子，如果你已經(jīng)有個(gè)代碼是usemap="#Map" 和name="Map"，那你再做另一個(gè)模板時(shí)要改成usemap="#M1p" 和name="M1p" 改好之后記得保存記事本就行了】
樂(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)源： 如何設(shè)置店鋪首頁(yè)促銷(xiāo)閃動(dòng)大圖--動(dòng)畫(huà)圖片多鏈接
