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

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

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

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

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

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

6、貝推薦的帖圖，這里也是需要無限延伸的，我們先把 4 列用相應(yīng)的 背景顏色 填充好，然后在里面插入一個(gè)與切片 14 同寬的表格。再嵌套好的表格里用背景顏色 填充相應(yīng)的顏色。最后在第5 部分用 圖象方式把最后一張圖片進(jìn)行插入。好了，可以無限延伸的摸版制作完成了。下面我們要進(jìn)行進(jìn)一步的調(diào)整，要使每個(gè)表格都與對應(yīng)的切片同長寬， 這樣模版才不會(huì)變形，整理的時(shí)候要多預(yù)覽，哪里不好調(diào)哪里，調(diào)好之后， 選中整個(gè)表格，設(shè)置屬性為 “水平 -居中 ”。全部調(diào)整好之后，我們還要設(shè)置一下個(gè)別表格的屬性，把需要插入放大圖和推薦圖的表格屬性設(shè)置為（水平 -居中，垂直 -頂端），把需要插入文字的單元格屬性設(shè)置為（水平-默認(rèn)

7、或左對，垂直- 頂端）這些做好后， 我們要把 “我的店鋪、 店鋪介紹 ”等部分做好相應(yīng)的網(wǎng)址連接，先打開您在TAOBAO 的主頁，復(fù)制網(wǎng)址，選取“我的店鋪 ”圖片，在屬性的連接框中，把網(wǎng)址粘貼過去，這樣，連接就做好了?！暗赇伣榻B，評價(jià)”等地方用同樣的辦法進(jìn)行地址連接。然后我們再做滾動(dòng)公告，完成滾動(dòng)字幕的設(shè)置。先在美美在 DWDW 里怎么也沒找到做滾動(dòng)字幕的地方， 所以只好借助里保存這個(gè)制作好的摸版（存好之后不用關(guān)），然后打開FrontPage 來 FP 軟件，打開這個(gè)摸版，在?菜單 - 插入 -Web 組件 ?中插入滾動(dòng)字幕設(shè)置好之后，雙擊文字，調(diào)整對話框的長短寬窄來決定公告文字出現(xiàn)的范圍。這

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