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

1、我們先看例子，先在PS中做切片，這是已經(jīng)切好的摸版，切片不能亂切，切的時候要規(guī)整，方便后面的網(wǎng)頁制作，而且直接影響最終的效果。這里切片01以后是要做滾動公告的，為了少切幾個片片，我把放置公告的圖片放在了這個切片的正中，切片04、06、07、08是要做鏈接的地方，所以單獨切出來了，切片11、12、13、14、15、17、19、21都是以后需要無限延伸的，也單獨切出來。做切片的時候一定要方便后面的網(wǎng)頁處理。我把整個摸版橫向切成了整齊的五個部分，這樣，后面的表格拆分就方便了。之后，我們要在PS里存儲這些切片，菜單-文件-存儲為Web使用格式會出現(xiàn)一個對話框，這里可以設(shè)置圖片的存儲格式和品質(zhì)，我們把它

2、存在預(yù)設(shè)好的文件夾里，方便以后的查找好了，PS里的工作完成了，先別著急關(guān)了這個圖片，后面我們網(wǎng)頁處理的時候還用的到的。現(xiàn)在打開Dreamweaver，新建一個文件，然后插入一個表格，這個表格是與你設(shè)計的摸版同寬的，無限延伸的摸版制作關(guān)鍵在于表格嵌套（就是表格套表格）以后我們所有的表格拆分和嵌套都在這個表格里完成。調(diào)整一下表格，把它拉長些，表格屬性為（水平-默認(rèn)，垂直-頂端）然后我們開始第一部的拆分。制作好的摸版橫向是整齊的五個部分，我們先把這個表格拆成五行注意：操作時都要先選中要操作的表格才能進(jìn)行，不要忘記呀接下來我們繼續(xù)拆分第一部分的表格，第一部分是切片01、02 橫向放置，所以把

3、第一個表格再拆成2列就可以了。拆分好之后就要插入圖片了，切片01是要制作成滾動公告的，這張圖片要以背景方式插入注意：凡是將來需要插入文字、圖片和無限延伸的地方，都以背景方式插入圖片圖象放置好之后，先不用調(diào)整，繼續(xù)插入切片02，這個切片是固定不動的，我們以圖象插入方式在第2個單元格進(jìn)行圖片的插入接下來是第2部分的表格拆分，第2部分的圖片與第1部分的圖片拆分位置不同，這樣我們就需要在第2部分里嵌套一個新的表格來進(jìn)行拆分，這樣表格之間就相互不干擾了。拆分好之后，對照PS里切好的摸版，分別以圖象方式插入圖片。插入圖片的時候，表格會自動伸縮的，這時侯幾乎不用進(jìn)行調(diào)整。下面是第3部分的表格拆分，我們還是要

4、先嵌套一個表格，然后進(jìn)行拆分這里的圖片也是固定不動的，我們也分別以圖象方式插入相應(yīng)的圖片。好了，休息一下，第4部分就有無限延伸了，要好好看呀。還是先再第4部分的表格里嵌套一個800象素寬的表格，拉長些，然后根據(jù)PS里切好的圖象，先把表格拆成5列呵呵，之前的切片一定要切的規(guī)矩呀，橫豎對齊，這樣網(wǎng)頁處理起來會很方便，做到這里就感覺到了吧?？纯碢S里切好的圖片，第2列里有幾行，這里就拆分成幾行。對應(yīng)著PS里的圖片看呀，有紅心標(biāo)注的地方都是需要無限延伸的地方。    美美在制作這個摸版的時候，需要無限延伸的地方，我都使用的是單色，在網(wǎng)頁處理的時候相應(yīng)的表格內(nèi)直接用背景色填

5、充就OK了，當(dāng)然，您也可以把這些地方設(shè)計成固定的圖案，然后選擇背景方式插入圖案，也是可以無限延伸的。方法是多種多樣的，關(guān)鍵在于背景是可以無限延伸的道理。先在PS中點選出背景色，得到色號，在DW里進(jìn)行背景顏色的填充。之后調(diào)整一下表格的寬度，使每個表格都與對應(yīng)的切片同寬。接下來看2列，參照PS里的圖象，在需要插入圖片、文字的地方進(jìn)行背景顏色的填充（插入圖片和文字的地方也是要無限延伸的）對應(yīng)PS里的圖片，把2列其余的部分分別以圖象方式插入圖片下面我們開始做4列里的表格，4列里對應(yīng)的是寶貝推薦的帖圖，這里也是需要無限延伸的，我們先把4列用相應(yīng)的背景顏色填充好，然后在里面插入一個與切片14同寬的表格。再

6、嵌套好的表格里用背景顏色填充相應(yīng)的顏色。最后在第5部分用圖象方式把最后一張圖片進(jìn)行插入。好了，可以無限延伸的摸版制作完成了。下面我們要進(jìn)行進(jìn)一步的調(diào)整，要使每個表格都與對應(yīng)的切片同長寬，這樣模版才不會變形，整理的時候要多預(yù)覽，哪里不好調(diào)哪里，調(diào)好之后，選中整個表格，設(shè)置屬性為“水平-居中”。全部調(diào)整好之后，我們還要設(shè)置一下個別表格的屬性，把需要插入放大圖和推薦圖的表格屬性設(shè)置為（水平-居中，垂直-頂端），把需要插入文字的單元格屬性設(shè)置為（水平-默認(rèn)或左對，垂直-頂端）這些做好后，我們要把“我的店鋪、店鋪介紹”等部分做好相應(yīng)的網(wǎng)址連接，先打開您在TAOBAO的主頁，復(fù)制網(wǎng)址，選取“我的店鋪”圖片

7、，在屬性的連接框中，把網(wǎng)址粘貼過去，這樣，連接就做好了?！暗赇伣榻B，信用評價”等地方用同樣的辦法進(jìn)行地址連接。然后我們再做滾動公告，美美在DW里怎么也沒找到做滾動字幕的地方，所以只好借助FrontPage來完成滾動字幕的設(shè)置。先在DW里保存這個制作好的摸版（存好之后不用關(guān)），然后打開FP軟件，打開這個摸版，在 菜單-插入-Web組件 中插入滾動字幕設(shè)置好之后，雙擊文字，調(diào)整對話框的長短寬窄來決定公告文字出現(xiàn)的范圍。這樣做好之后的文字是從左到右滾動的，如果想讓他向上滾動，我們需要改一下代碼，先選中公告文字，然后切換到代碼頁，找到marquee那行，在后面加上“directio

8、n="up" ”這樣一來文字就變?yōu)樽韵露蠞L動了。之后保存，關(guān)閉，再切換到DW（呵呵，這樣好折騰呀。）會出現(xiàn)一個更新對話框，點是，進(jìn)行代碼更新。做到這里，一個完整的可以無限延伸的摸版就完全做好了，先喘口氣。以前美美認(rèn)為發(fā)布新品最累，現(xiàn)在認(rèn)為做教程是最累的，我的眼睛都看花了，眼珠子都快掉下來了?，F(xiàn)在，我們要把所有用到的切片都上傳到您的網(wǎng)絡(luò)相冊中，這里說明一下呀，美美的網(wǎng)絡(luò)相冊是買的，很穩(wěn)定，功能好，傳輸速度快，請打聽免費(fèi)相冊的朋友不要再問我了，我真的不知道哪個免費(fèi)的可以用呀。傳好之后，我們就可以把做好的摸版放到TAOBAO中使用了，先在DW中切換到代碼頁面，選取所有代碼，進(jìn)行復(fù)制，然后打開TAOBAO需要編輯的寶貝頁面，進(jìn)入寶貝描述編輯對話框，切換到編輯源文件，把所有代碼粘貼進(jìn)去現(xiàn)在，先不要著急切換到使用編輯器看效果，因為這時候的圖片地址是您機(jī)器上存圖片的位置，在網(wǎng)絡(luò)上顯示不出來，我們要把這些圖片地址替換成網(wǎng)絡(luò)相冊里相對應(yīng)圖片的網(wǎng)絡(luò)地址，這樣都替換好了，再切換到使用編輯器，才能顯示完整的圖片。地址替換的時候要仔細(xì)呀，