詳解Dreamweaver之

代碼其實(shí)很簡單第3章Areyouready?第3章詳解Dreamweaver之代碼其實(shí)很簡單Dreamweaver的基本操作3.13.2揭秘店鋪常見特效代碼淘寶店鋪裝修是一門綜合性藝術(shù)，要制作好的店鋪裝修設(shè)計(jì)不但要會用圖像處理軟件，如Photoshop，還要懂得將軟件中的圖片添加鏈接，使買家能夠點(diǎn)擊進(jìn)入到所需頁面的軟件，這就用到了Dreamweaver，利用它去設(shè)計(jì)代碼。說到Dreamweaver軟件，一般給我們的感覺是制作網(wǎng)站用的，很難，根本學(xué)不會，其實(shí)Dreamweaver軟件如果用在淘寶店鋪裝修這部分，操作是很簡單的。Dreamweaver軟件是網(wǎng)頁三劍客（Dreamweaver，F(xiàn)ireworks，F(xiàn)lash）中的最為重要的軟件。賣家在裝修自己店鋪的時(shí)候，可能會遇到圖片錯(cuò)位，一張圖片只能加一個(gè)超鏈接，全屏海報(bào)和輪播圖根本不會做等問題，其實(shí)這些問題只要用Dreamweaver軟件去制作，都可以解決的。在這里，我們著重講一下如何安裝Dreamweaver軟件。步驟1

在百度搜索欄中輸入【Dreamweaver綠色版】，按【Enter】鍵進(jìn)行搜索，然后在搜索結(jié)果中隨便找到一個(gè)下載即可。因?yàn)檎鍰reamweaver軟件是需要購買使用的，所以這邊最好下載綠色版，綠色版也屬于破解版。操作步驟步驟2

下載的解壓包請存在除C盤以外的其他盤內(nèi)，下載完成后選中解壓包點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【解壓到當(dāng)前文件夾】命令。步驟3

下載的解壓包請存在除C盤以外的其他盤內(nèi)，下載完成后選中解壓包點(diǎn)擊鼠標(biāo)右鍵，在彈出的菜單中選擇【解壓到當(dāng)前文件夾】命令。操作步驟步驟4

安裝成功后，在桌面會顯示Dreamweaver軟件圖標(biāo)。操作步驟Dreamweaver軟件建立文檔的步驟操作較多，也有很多細(xì)節(jié)需要大家注意，如果不按照這個(gè)步驟操作的話，后期使用會有很大的麻煩，所以希望大家仔細(xì)學(xué)習(xí)本節(jié)內(nèi)容，然后再進(jìn)行操作。步驟1

雙擊桌面的Dreamweaver快捷方式進(jìn)入軟件歡迎界面。從彈出窗口中的【創(chuàng)建新項(xiàng)目】選項(xiàng)區(qū)中點(diǎn)擊【HTML】按鈕。操作步驟步驟2

點(diǎn)擊軟件界面右側(cè)【文件】面板標(biāo)簽打開選項(xiàng)區(qū)，在其中的下拉列表中選擇除C盤以外的其他盤存放店鋪文檔代碼。步驟3

點(diǎn)擊【文件】面板中的【管理站點(diǎn)】按鈕，打開【管理站點(diǎn)】窗口，在其中點(diǎn)擊【新建】按鈕，在彈出的菜單中選擇【站點(diǎn)（S）】命令。操作步驟步驟4

點(diǎn)擊【完成】按鈕，在彈出【編輯文件】選項(xiàng)區(qū)第一個(gè)編輯框中將名稱更改為【淘寶店鋪代碼】，點(diǎn)擊【下一步】按鈕。更改名稱操作步驟步驟5

在彈出的【編輯文件，第2部分】選項(xiàng)區(qū)中，問題為【您是否打算使用服務(wù)器技術(shù)】，因?yàn)椴簧婕暗浇⒕W(wǎng)站，所以選擇【否，我不想使用服務(wù)器技術(shù)】，再點(diǎn)擊【下一步】按鈕。步驟6

在彈出的【編輯文件，第3部分】選項(xiàng)區(qū)中，問題為【在開發(fā)過程中，您打算如何使用您的文件？】，選擇【編輯我的計(jì)算機(jī)上的本地副本，完成后再上傳到服務(wù)器】，再點(diǎn)擊【下一步】按鈕。操作步驟步驟7

在彈出的【共享文件】選項(xiàng)區(qū)中，問題為【您如何連接到遠(yuǎn)程服務(wù)器？】，這部分請注意，因?yàn)樘詫毑恍枰⒎?wù)器，所以在下拉列表中選擇【無】，點(diǎn)擊【下一步】按鈕。操作步驟步驟8

在彈出的【總結(jié)】選項(xiàng)區(qū)中，保持默認(rèn)參數(shù)，點(diǎn)擊【完成】按鈕。程序返回【管理站點(diǎn)】窗口中，點(diǎn)擊【完成】按鈕，完成站點(diǎn)的建設(shè)。表格是淘寶店鋪裝修中最常用的制作代碼的方法，操作十分簡單，只要注意幾個(gè)常容易出錯(cuò)的地方就可以。具體操作步驟如下：操作步驟步驟1

鼠標(biāo)右鍵點(diǎn)擊3.1.2節(jié)中建立好的站點(diǎn)【淘寶店鋪代碼】，在彈出的菜單中選擇【新建文件】命令，按【Enter】鍵確定默認(rèn)名稱，新建一個(gè)可執(zhí)行的文件。創(chuàng)建文件步驟2

在新建好的【untitled.html】文件上雙擊鼠標(biāo)左鍵，打開該文件。在左側(cè)頁面中點(diǎn)擊【代碼】按鈕，按【Ctrl+A】組合鍵選中所有代碼，然后按【Delete】鍵執(zhí)行【刪除】命令。操作步驟刪除全部代碼操作步驟步驟3

點(diǎn)擊【設(shè)計(jì)】按鈕回到編輯頁面，點(diǎn)擊【表格】按鈕，打開【表格】對話框，在其中設(shè)置【行數(shù)】為【1】，【邊框粗細(xì)】【單元格邊距】【單元格間距】均為【0】，編輯好后點(diǎn)擊【確定】按鈕?！具吙虼旨?xì)】【單元格邊距】【單元格間距】均必須為【0】，否則會影響添加到店鋪之后的展示效果。表格編輯好后，需要添加商品圖片，那么如何為表格添加商品圖片呢？具體操作步驟如下：操作步驟步驟1

鼠標(biāo)點(diǎn)擊制作好的表格內(nèi)容區(qū)域，點(diǎn)擊【圖像】按鈕，在彈出的下拉列表中選擇【圖像】，打開【選擇圖像源文件】對話框，在其中選擇本書配套素材【1.jpg】文件，點(diǎn)擊【確定】按鈕。操作步驟步驟2

此時(shí)系統(tǒng)會彈出2個(gè)提示框。因?yàn)樘詫毑恍枰谱骶W(wǎng)站，而且所用圖片都是淘寶空間的網(wǎng)絡(luò)圖片，所以在這里依次選擇【否】和【取消】命令。操作步驟步驟3

根據(jù)步驟2中的操作，商品圖片就插入到了表格中，但是如果這樣直接上傳到淘寶店鋪中是無法在店鋪中顯示的，因?yàn)閳D片只是本地鏈接，需將【圖片的源文件地址】更換成淘寶店鋪【圖片空間】中的【圖片網(wǎng)絡(luò)地址】。步驟4

下面我們就把制作好的海報(bào)上傳到【圖片空間】。在瀏覽器中登錄淘寶店鋪，在【賣家中心】頁面【店鋪管理】選項(xiàng)欄下，點(diǎn)擊【圖片空間】按鈕。選擇【圖片空間】操作步驟步驟5

進(jìn)入【圖片空間】操作頁面，在其中點(diǎn)擊【上傳圖片】按鈕。【圖片空間】頁面步驟6

在彈出的【上傳圖片】窗口中點(diǎn)擊【高速上傳】設(shè)置區(qū)中的【點(diǎn)擊上傳】按鈕。操作步驟操作步驟步驟7

在彈出的【添加文件】窗口中勾選要上傳的圖片，點(diǎn)擊【選好了】按鈕。在彈出的窗口中選擇【立即上傳】按鈕，完成圖片的上傳。選擇圖片操作步驟步驟8

將鼠標(biāo)移到【圖片空間】頁面中上傳成功的圖片上，點(diǎn)擊彈出的【復(fù)制鏈接】按鈕，我們就獲取到了該圖片在圖片空間中的【圖片網(wǎng)絡(luò)地址】。操作步驟步驟9

返回Deamweaver軟件中，點(diǎn)擊插入好的商品圖片，在軟件頁面下方的【屬性】面板【源文件】編輯框中點(diǎn)擊，插入鼠標(biāo)指針，按【Ctrl+A】組合鍵選中全部內(nèi)容，按【Ctrl+V】組合鍵執(zhí)行粘貼命令，將【圖片的源文件地址】更換成圖片空間中的【圖片網(wǎng)絡(luò)地址】，按【Ctrl+S】組合鍵保存表格即可。粘貼鏈接在制作代碼時(shí)，一定要將【圖片的源文件地址】更換成圖片空間中的【圖片網(wǎng)絡(luò)地址】，否則圖片是無法在店鋪中顯示的。在表格中加入圖片后，如何才能讓買家在點(diǎn)擊圖片時(shí)跳轉(zhuǎn)到對應(yīng)的商品頁面呢？具體操作步驟如下：操作步驟步驟1

在淘寶店鋪中，進(jìn)入點(diǎn)擊圖片（3.1.3節(jié)上傳的）跳轉(zhuǎn)后的對應(yīng)商品頁面，復(fù)制在瀏覽器中出現(xiàn)的商品地址。復(fù)制鏈接地址步驟2

在Dreamweaver中，點(diǎn)擊表格中的商品圖片，在【屬性】面板中選中【鏈接】編輯框中的全部內(nèi)容，按【Ctrl+V】組合鍵執(zhí)行【粘貼】命令，網(wǎng)頁地址被添加到【屬性】面板中的【鏈接】編輯框內(nèi)。粘貼鏈接地址根據(jù)3.1.5節(jié)的操作，商品圖片已經(jīng)加入了超鏈接，那么如何將制作好的圖片添加到店鋪展示呢？具體操作步驟如下：操作步驟步驟1

在Dreamweaver操作頁面中點(diǎn)擊【代碼】按鈕，將編輯框中的所有代碼內(nèi)容全部選中，快捷鍵為【Ctrl+A】，按【Ctrl+C】組合鍵執(zhí)行【復(fù)制】命令。復(fù)制全部代碼步驟2

在淘寶店鋪【賣家中心】頁面【店鋪管理】選項(xiàng)欄下，點(diǎn)擊【店鋪裝修】按鈕，進(jìn)入【店鋪裝修】操作頁面，將頁面左側(cè)的【自定義區(qū)】模塊拖到頁面中，釋放按鈕后，新建【自定義內(nèi)容區(qū)】模塊。操作步驟創(chuàng)建【自定義內(nèi)容區(qū)】模塊步驟3

將鼠標(biāo)移動到新建的【自定義內(nèi)容區(qū)】模塊中，此時(shí)模塊的右上角出現(xiàn)【編輯】按鈕，點(diǎn)擊該按鈕。操作步驟步驟4

在彈出的【自定義內(nèi)容區(qū)】對話框中，點(diǎn)擊【顯示標(biāo)題】設(shè)置區(qū)中的【不顯示】單選鈕，點(diǎn)擊【源碼】按鈕，然后將復(fù)制好的代碼粘貼到編輯框中，點(diǎn)擊【確定】按鈕。步驟4

根據(jù)步驟4中的操作，帶有超鏈接的商品圖片就展示到了店鋪中，點(diǎn)擊頁面右上角的【發(fā)布】按鈕，買家就可以在店鋪內(nèi)看到你的成果了。操作步驟發(fā)布圖片刪除或者復(fù)制代碼的時(shí)候，一定要將所有代碼全部刪除或者復(fù)制，最好利用快捷鍵【Ctrl+A】，選中全部代碼之后再執(zhí)行刪除或者復(fù)制命令。我們已經(jīng)學(xué)了Dreamweaver軟件的基礎(chǔ)操作，但淘寶中還存在很多特效的首頁效果，那它們又是如何制作的呢？這里主要講解淘寶中3個(gè)常用的特效，包括單張全屏海報(bào)特效代碼、全屏輪播海報(bào)特效代碼和懸浮背景特效代碼。在瀏覽淘寶店鋪的時(shí)候會看到很多店招下邊為一張全屏海報(bào)，但是當(dāng)買家自己設(shè)計(jì)的時(shí)候，每次都被自定義模塊的限制寬度束縛套在里面不能實(shí)現(xiàn)全屏，在這里就來學(xué)習(xí)怎么樣掙脫自定義模塊的束縛，實(shí)現(xiàn)全屏的海報(bào)。操作步驟步驟1

將本書配套素材【素材與實(shí)例】丨【第3章】文件夾中的【2.jpg】圖像文件，上傳到店鋪【圖片空間】內(nèi)。上傳圖片操作步驟步驟2

打開Dreamweaver軟件，并在【文件】面板中【淘寶店鋪代碼】站點(diǎn)下新建一個(gè)文件，雙擊該文件將其打開。點(diǎn)擊頁面中的【代碼】按鈕，依次按快捷鍵【Ctrl+A】【Delete】將代碼全部刪除，然后將本書配套素材【單張全屏海報(bào)特效代碼.txt】文件中的特效代碼粘貼到編輯區(qū)域內(nèi)。特效代碼粘貼特效代碼操作步驟操作步驟步驟3

根據(jù)全屏海報(bào)的圖片尺寸來調(diào)整代碼中圖片高度【height:655PX】，如圖片高度為700像素，這里需要將【655】改成【700】；將【產(chǎn)品鏈接地址】替換成商品瀏覽器上的地址；將【圖片網(wǎng)絡(luò)地址】替換成商品上傳到【圖片空間】的地址。修改代碼操作步驟步驟4

根據(jù)3.1.5節(jié)所學(xué)將所有代碼添加到【自定義內(nèi)容區(qū)】模塊中，點(diǎn)擊【發(fā)布】按鈕將全屏海報(bào)展示給買家。最終效果請?jiān)谟⑽妮斎敕顟B(tài)下輸入代碼和更改代碼內(nèi)的信息。有的賣家喜歡第一屏是單張全屏海報(bào)，有的賣家喜歡第一屏可以添加多張全屏海報(bào)，使海報(bào)圖片進(jìn)行輪播展示，在這里以三張全屏海報(bào)的設(shè)計(jì)為案例進(jìn)行講解。具體操作步驟如下：操作步驟步驟1

將本書配套素材【海報(bào)1.jpg】【海報(bào)2.jpg】【海報(bào)3.jpg】圖像文件上傳到淘寶店鋪【圖片空間】內(nèi)，可以看到這3張全屏海報(bào)的尺寸相同。上傳圖片操作步驟步驟2

打開Dreamweaver軟件，并在【淘寶店鋪代碼】站點(diǎn)下新建一個(gè)文件，打開該文件。點(diǎn)擊頁面中的【代碼】按鈕，將編輯區(qū)的代碼全部刪除，然后將本書配套素材【全屏輪播海報(bào)特效代碼.txt】文件中的特效代碼粘貼到編輯區(qū)域內(nèi)。特效代碼操作步驟粘貼代碼操作步驟步驟3

將其中的【height:602PX】分別替換成海報(bào)的高度，將【產(chǎn)品鏈接地址】替換成商品瀏覽器上的地址；將【圖片網(wǎng)絡(luò)地址】替換成商品上傳到圖片空間的地址。操作步驟修改代碼步驟3

根據(jù)3.1.5節(jié)所學(xué)將所有代碼添加到【自定義內(nèi)容區(qū)】模塊中，點(diǎn)擊【發(fā)布】按鈕將全屏輪播海報(bào)展示給買家。操作步驟最終效果全屏輪播海報(bào)可以添加2～5張，請根據(jù)所需海報(bào)數(shù)量進(jìn)行添加。懸浮背景是什么？它的作用是什么？很多賣家對懸浮背景不是很了解，其實(shí)懸浮背景是指一個(gè)背景永遠(yuǎn)跟隨著頁面展示，很多天貓和大賣家必備的店鋪促銷利器。具體操作步驟如下：步驟1

將本書配套素材【3.jpg】圖像文件上傳到店鋪【圖片空間】內(nèi)。操作步驟步驟2

打開Dreamweaver軟件，并在【淘寶店鋪代碼】站點(diǎn)下新建一個(gè)文件，打開該文件。點(diǎn)擊頁面中的【代碼】按鈕，將編輯區(qū)的代碼全部刪除，然后將本書配套素材【懸浮背景特效代碼.txt】文件中的特效代碼粘貼到編輯區(qū)域內(nèi)。操作步驟特效代碼粘