網(wǎng)店模板制作與設計全流程(二)

1、我們先看例子，先在PS中做切片，這是已經(jīng)切好的摸版，切片不能亂切，切的時候要規(guī)整，方便后面的網(wǎng)頁制作，而且直接影響最終的效果。這里切片01以后是要做滾動公告的，為了少切幾個片片，我把放置公告的圖片放在了這個切片的正中，切片04、06、07、08是要做鏈接的地方，所以單獨切出來了，切片11、12、13、14、15、17、19、21都是以后需要 HYPERLINK javascript:void(0) 無限延伸的，也單獨切出來。做切片的時候一定要方便后面的網(wǎng)頁處理。我把整個摸摸版橫向向切成了了整齊的的五個部部分，這這樣，后后面的表表格拆分分就方便便了。之后，我們們要在PPS里存存儲這些些切片，菜單

2、-文件-存儲為Web使用格式會出現(xiàn)一個對話框，這里可以設置圖片的存儲格式和品質(zhì)，我們把它存在預設好的文件夾里，方便以后的查找好了，PSS里的工工作完成成了，先先別著急急關了這這個圖片片，后面面我們網(wǎng)網(wǎng)頁處理理的時候候還用的的到的。現(xiàn)現(xiàn)在打開開Dreeamwweavver，新新建一個個文件，然然后插入入一個表表格，這這個表格格是與你你設計的的摸版同同寬的，無無限延伸伸的摸版版制作關關鍵在于于表格嵌嵌套（就就是表格格套表格格）以后后我們所所有的表表格拆分分和嵌套套都在這這個表格格里完成成。調(diào)整一下表表格，把把它拉長長些，表表格屬性性為（水水平-默默認，垂垂直-頂頂端）然然后我們們開始第第一部的的拆

3、分。制制作好的的摸版橫橫向是整整齊的五五個部分分，我們們先把這這個表格格拆成五五行注意：操作作時都要要先選中中要操作作的表格格才能進進行，不不要忘記記呀接下來我們們繼續(xù)拆拆分第一一部分的的表格，第第一部分分是切片片01、002橫橫向放置置，所以以把第一一個表格格再拆成成2列就就可以了了。拆分好之后后就要插插入圖片片了，切切片011是要制制作成滾滾動公告告的，這這張圖片片要以背背景方式式插入注意：凡是是將來需需要插入入文字、圖圖片和無無限延伸伸的地方方，都以以背景方方式插入入圖片圖象放置好好之后，先先不用調(diào)調(diào)整，繼繼續(xù)插入入切片002，這這個切片片是固定定不動的的，我們們以圖象象插入方方式在第第

4、2個單單元格進進行圖片片的插入入接下來是第第2部分分的表格格拆分，第第2部分分的圖片片與第11部分的的圖片拆拆分位置置不同，這這樣我們們就需要要在第22部分里里嵌套一一個新的的表格來來進行拆拆分，這這樣表格格之間就就相互不不干擾了了。拆分好之后后，對照照PS里里切好的的摸版，分分別以圖圖象方式式插入圖圖片。插插入圖片片的時候候，表格格會自動動伸縮的的，這時時侯幾乎乎不用進進行調(diào)整整。下面是第33部分的的表格拆拆分，我我們還是是要先嵌嵌套一個個表格，然然后進行行拆分這里的圖片片也是固固定不動動的，我我們也分分別以圖圖象方式式插入相相應的圖圖片。好了，休息息一下，第第4部分分就有無無限延伸伸了，要

5、要好好看看呀。還是先再第第4部分分的表格格里嵌套套一個8800象象素寬的的表格，拉拉長些，然然后根據(jù)據(jù)PS里里切好的的圖象，先先把表格格拆成55列呵呵，之前前的切片片一定要要切的規(guī)規(guī)矩呀，橫橫豎對齊齊，這樣樣網(wǎng)頁處處理起來來會很方方便，做做到這里里就 HYPERLINK javascript:void(0) 感覺覺到了吧吧。看看PS里里切好的的圖片，第第2列里里有幾行行，這里里就拆分分成幾行行。對應應著PSS里的圖圖片看呀呀，有紅紅心標注注的地方方都是需需要無限限延伸的的地方。 美美美在制制作這個個摸版的的時候，需需要無限限延伸的的地方，我我都使用用的是單單色，在在網(wǎng)頁處處理的時時候相應應的表

6、格格內(nèi)直接接用背景景色填充充就OKK了，當當然，您您也可以以把這些些地方設設計成固固定的圖圖案，然然后選擇擇背景方式式插入圖圖案，也也是可以以無限延延伸的。方方法是多多種多樣樣的，關關鍵在于于背景是是可以無無限延伸伸的道理理。先在PS中中點選出出背景色色，得到到色號，在在DW里里進行背背景顏色色的填充充。之后調(diào)整一一下表格格的寬度度，使每每個表格格都與對對應的切切片同寬寬。接下來看22列，參參照PSS里的圖圖象，在在需要插插入圖片片、文字字的地方方進行背背景顏色色的填充充（插入入圖片和和文字的的地方也也是要無無限延伸伸的）對應PS里里的圖片片，把22列其余余的部分分分別以以圖象方式式插入圖圖片

7、下面我們開開始做44列里的的表格，44列里對對應的是是寶貝推推薦的帖帖圖，這這里也是是需要無無限延伸伸的，我我們先把把4列用用相應的的背景顏顏色填充充好，然然后在里里面插入入一個與與切片114同寬寬的表格格。再嵌套好的的表格里里用背景景顏色填填充相應應的顏色色。最后后在第55部分用用圖象方式式把最后后一張圖圖片進行行插入。好了，可以以無限延延伸的摸摸版制作作完成了了。下面面我們要要進行進進一步的的調(diào)整，要要使每個個表格都都與對應應的切片片同長寬寬，這樣樣模版才才不會變變形，整整理的時時候要多多預覽，哪哪里不好好調(diào)哪里里，調(diào)好好之后，選選中整個個表格，設設置屬性性為“水水平-居居中”。全部調(diào)整好

8、好之后，我我們還要要設置一一下個別別表格的的屬性，把把需要插插入放大大圖和推推薦圖的的表格屬屬性設置置為（水水平-居居中，垂垂直-頂頂端），把把需要插插入文字字的單元元格屬性性設置為為（水平平-默認認或左對對，垂直直-頂端端）這些做好后后，我們們要把“我我的店鋪鋪、店鋪鋪介紹”等等部分做做好相應應的網(wǎng)址址連接，先先打開您您在TAAOBAAO的主主頁，復復制網(wǎng)址址，選取取“我的的店鋪”圖圖片，在在屬性的的連接框框中，把把網(wǎng)址粘粘貼過去去，這樣樣，連接接就做好好了?！暗甑赇伣榻B紹， HYPERLINK javascript:void(0) 信用用評價”等等地方用用同樣的的辦法進進行地址址連接。然后

9、我們再再做滾動動公告，美美美在DDW里怎怎么也沒沒找到做做滾動字字幕的地地方，所所以只好好借助FFronntPaage來來完成滾滾動字幕幕的設置置。先在在DW里里保存這這個制作作好的摸摸版（存存好之后后不用關關），然然后打開開FP軟軟件，打打開這個個摸版，在在菜單單-插入入-Weeb組件件中插插入滾動動字幕設置好之后后，雙擊擊文字，調(diào)調(diào)整對話話框的長長短寬窄窄來決定定公告文文字出現(xiàn)現(xiàn)的范圍圍。這樣做好之之后的文文字是從從左到右右滾動的的，如果果想讓他他向上滾滾動，我我們需要要改一下下代碼，先先選中公公告文字字，然后后切換到到代碼頁頁，找到到marrqueee那行行，在后后面加上上“diirec

10、ctioon=up ”這這樣一來來文字就就變?yōu)樽宰韵露仙蠞L動了了。之后保存，關關閉，再再切換到到DW（呵呵呵，這這樣好折折騰呀。）會會出現(xiàn)一一個更新新對話框框，點是是，進行行代碼更更新。做到這里，一一個完整整的可以以無限延延伸的摸摸版就完完全做好好了，先先喘口氣氣。以前美美認認為發(fā)布布新品最最累，現(xiàn)現(xiàn)在認為為做教程程是最累累的，我我的眼睛睛都看花花了，眼眼珠子都都快掉下下來了?，F(xiàn)在，我們們要把所所有用到到的切片片都上傳傳到您的的 HYPERLINK javascript:void(0) 網(wǎng)絡相冊冊中，這這里說明明一下呀呀，美美美的網(wǎng)絡絡相冊是是買的，很很 HYPERLINK javascri

11、pt:void(0) 穩(wěn)定，功功能好，傳傳輸速度度快，請請打聽免免費相冊冊的 HYPERLINK javascript:void(0) 朋友友不要再再問我了了，我真真的不知知道哪個個免費的的可以用用呀。傳好之后，我我們就可可以把做做好的摸摸版放到到TAOOBAOO中使用用了，先先在DWW中切換換到代碼碼頁面，選選取所有有代碼，進進行復制制，然后后打開TTAOBBAO需需要編輯輯的寶貝貝頁面，進進入寶貝貝描述編編輯對話話框，切切換到編編輯源文文件，把把所有代代碼粘貼貼進去現(xiàn)在，先不不要著急急切換到到使用編編輯器看看效果，因因為這時時候的圖圖片地址址是您機機器上存存圖片的的位置，在在網(wǎng)絡上上顯示不不出來，我我們要把把這些圖圖片地址址替換成成網(wǎng)絡相相冊里相相對應圖圖片的網(wǎng)網(wǎng)絡地址址，這樣樣都替換換好了，再再切換到到使用編編輯器，才才能顯示示完整的的圖片。地地址替換換的時候候要仔細