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

...wd......wd......wd...網(wǎng)店模板制作及設(shè)計全流程(一)制作模版這里面有很多復(fù)雜的問題的，作為啟蒙性的教程，我這里只介紹最簡單的方法和形式，其他的大家可以在此根基上自己開發(fā)、研究，如有問題歡迎賜教。準(zhǔn)備工具和素材：Photoshop7.0和Frontpage2003和相應(yīng)圖片〔也可以自己創(chuàng)作〕下面進(jìn)入正題吧1.翻開Photoshop，點擊上方的“文件—新建〞，新建一張800*1200的畫布，這里把底色設(shè)置為白色。2.然后點擊“文件—翻開〞，找到自己想要用于模版上的圖片，翻開(大家可以事先把圖片的大小調(diào)整好，以適合于模版使用)。

接著，先在圖片上按下“Ctrl+A〞(全選)，注意這時候圖片四周會出現(xiàn)一個虛線框，然后再按下"Ctrl+C"(復(fù)制)。

3.然后回到我們最開場建設(shè)的那張800*1200的畫布上，按下“Ctrl+V〞(粘貼)，圖片就被粘貼到畫布上了。

如果位置不適宜的話，可以點擊左邊的“移開工具〞，將圖案拖動到適宜的位置上。4.可以根據(jù)圖案對模版做些裝飾，比方我這里面就用橢圓工具畫出幾個圓圈，并用與圖案相近的藍(lán)色填充。然后再點擊橢圓工具，畫一個大一點的橢圓出來，用來放置店鋪公告。可以把“不透明度〞設(shè)置為60%，這樣看起來效果更好些。5.接下來在模版上寫上自己的店鋪名稱。點擊左邊的“文字工具〞，在店鋪公告的上方寫上店鋪名稱，注意可以在窗口上方的地方調(diào)整字體、字號以及文字顏色。然后可以點擊右邊的“添加圖層樣式〞，根據(jù)個人喜好選擇諸如陰影、描邊、外發(fā)光等效果，使文字更好看。6.可以對模版進(jìn)展些裝飾，最簡單的方法就是選擇“自定形狀工具〞，畫出一些喜歡的圖形來。然后用“文字工具〞把要做鏈接的內(nèi)容寫上，比方“逛逛小店〞、“店鋪介紹〞、“信用評價〞和“收藏店鋪〞等。7.下邊就要來處理模版的主體局部了。首先我們用一個方框把主體局部框起來。點擊“自定形狀工具〞，在窗口上方“形狀〞右邊的下箭頭上點一下，選一個適宜的形狀，這里我用的是CheckBox，用這個形狀把模版余下的局部框起來。注意邊框的顏色是在窗口上部的地方進(jìn)展選擇的。8.然后就是往上添加各項需要的內(nèi)容啦~~首先在右邊的“圖層〞中選中“背景〞層(就是我們最開場建設(shè)的那個畫布)，然后可以用“自定形狀工具〞畫個小花什么的，或者貼上自己喜歡的小圖片也可以。我這里用的是“自定形狀工具〞中的Blob2。9.再選擇“文字工具〞在圖案旁邊寫上“寶貝展示〞，和前邊提到的一樣，文字的相關(guān)屬性在窗口上部的地方設(shè)置?？梢杂谩耙崎_工具〞調(diào)整一下文字的位置。10.同樣方法，寫出“寶貝描述〞、“買家必讀〞、“郵資說明〞、“聯(lián)系掌柜〞、“推薦寶貝〞等內(nèi)容。注意：不要擔(dān)憂每項之間的空白局部過窄，因為模版做好之后，這些地方都是可伸縮的，所以放多少內(nèi)容都沒問題，不用擔(dān)憂的~~11.可以在模版上加上你的版權(quán)信息內(nèi)容，如水印啦、制作者啦什么的。12.然后就是很艱巨的切片任務(wù)啦!選擇切片工具，把所有要添加文字或者圖片、鏈接的地方都單獨切出來。切片這一過程很重要，剛開場的時候大家可能會不熟練，總有這樣那樣的問題(最后成品模版如果出現(xiàn)斷裂的話，通常問題都是出在切片這一關(guān))。別灰心，多試幾次，多琢磨琢磨，多練練，肯定會好的!另外：我這里介紹的只是最簡單的模版，就是主體局部只需上下切，而不用左右切成兩局部的。實際中，如果大家想要做左右分塊的模版(比方左邊放產(chǎn)品圖片、介紹，右邊放寶貝分類、推薦這樣的)，切片是很需要技巧的。由于表達(dá)能力有限，我在這里說不明白具體要注意的問題。不過大家只要多練習(xí)多思考，一定可以摸索出規(guī)律的。加油哦~~13.下一步就是點擊“文件—保存為Web所用格式〞，將模版存為HTML格式的文件(實際上是一個HTML文件和一個圖象文件夾)。

Photoshop的工作完成嘍，大家辛苦了！喝杯茶，好戲還在后頭網(wǎng)店模板制作及設(shè)計全流程〔二〕我們先看模板例子，先在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ì)，我們把它存在預(yù)設(shè)好的文件夾里，方便以后的查找好了，PS里的工作完成了，先別著急關(guān)了這個圖片，后面我們網(wǎng)頁處理的時候還用的到的?，F(xiàn)在翻開Dreamweaver，新建一個文件，然后插入一個表格，這個表格是與你設(shè)計的摸版同寬的，無限延伸的摸版制作關(guān)鍵在于表格嵌套〔就是表格套表格〕以后我們所有的表格拆分和嵌套都在這個表格里完成。調(diào)整一下表格，把它拉長些，表格屬性為〔水平-默認(rèn)，垂直-頂端〕然后我們開場第一部的拆分。制作好的摸版橫向是整齊的五個局部，我們先把這個表格拆成五行中國網(wǎng)店網(wǎng)shop286注意：操作時都要先選中要操作的表格才能進(jìn)展，不要忘記呀接下來我們繼續(xù)拆分第一局部的表格，第一局部是切片01、02橫向放置，所以把第一個表格再拆成2列就可以了。拆分好之后就要插入圖片了，切片01是要制作成滾動公告的，這張圖片要以背景方式插入注意：但凡將來需要插入文字、圖片和無限延伸的地方，都以背景方式插入圖片圖象放置好之后，先不用調(diào)整，繼續(xù)插入切片02，這個切片是固定不動的，我們以圖象插入方式在第2個單元格進(jìn)展圖片的插入接下來是第2局部的表格拆分，第2局部的圖片與第1局部的圖片拆分位置不同，這樣我們就需要在第2局部里嵌套一個新的表格來進(jìn)展拆分，這樣表格之間就相互不干擾了。拆分好之后，對照PS里切好的摸版，分別以圖象方式插入圖片。插入圖片的時候，表格會自動伸縮的，這時侯幾乎不用進(jìn)展調(diào)整。下面是第3局部的表格拆分，我們還是要先嵌套一個表格，然后進(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)直接用背風(fēng)光填充就OK了，當(dāng)然，您也可以把這些地方設(shè)計成固定的圖案，然后選擇背景方式插入圖案，也是可以無限延伸的。方法是多種多樣的，關(guān)鍵在于背景是可以無限延伸的道理。先在PS中點選出背風(fēng)光，得到色號，在DW里進(jìn)展背景顏色的填充。之后調(diào)整一下表格的寬度，使每個表格都與對應(yīng)的切片同寬。接下來看2列，參照PS里的圖象，在需要插入圖片、文字的地方進(jìn)展背景顏色的填充〔插入圖片和文字的地方也是要無限延伸的〕對應(yīng)PS里的圖片，把2列其余的局局部別以圖象方式插入圖片下面我們開場做4列里的表格，4列里對應(yīng)的是寶貝推薦的帖圖，這里也是需要無限延伸的，我們先把4列用相應(yīng)的背景顏色填充好，然后在里面插入一個與切片14同寬的表格。再嵌套好的表格里用背景顏色填充相應(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)址，選取“我的店鋪〞圖片，在屬性的連接框中，把網(wǎng)址粘貼過去，這樣，連接就做好了?！暗赇伣榻B，信用評價〞等地方用同樣的方法進(jìn)展地址連接。然后我們再做滾動公告，美美在DW里怎么也沒找到做滾動字幕的地方，所以只好借助FrontPage來完成滾動字幕的設(shè)置。先在DW里保存這個制作好的摸版〔存好之后不用關(guān)〕，然后翻開FP軟件，翻開這個摸版，在菜單-插入-Web組件中插入滾動字幕設(shè)置好之后，雙擊文字，調(diào)整對話框的長短寬窄來決定公告文字出現(xiàn)的范圍。這樣做好之后的文字是從左到右滾動的，如果想讓他向上滾動，我們需要改一下代碼，先選中公告文字，然后切換到代碼頁，找到marquee那行，在后面加上“direction="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ò)地址，這樣都替換好了，再切換到使用編輯器，才能顯示完整的