網(wǎng)頁(yè)美工與網(wǎng)頁(yè)制作銜接中切片工具的運(yùn)用發(fā)布者：本站 時(shí)間：2020-05-02 14:05:09
圖片是網(wǎng)頁(yè)設(shè)計(jì)中不可缺少的元素, 通常使用圖像處理軟件如Photo Shop軟件、Firework軟件等設(shè)計(jì)和處理網(wǎng)頁(yè)需要的圖片, 而切片工具是圖像處理軟件用來(lái)切割處理圖片的工具, 也是將圖像處理軟件設(shè)計(jì)好的網(wǎng)頁(yè)美工效果圖轉(zhuǎn)換成網(wǎng)頁(yè)內(nèi)容的重要工具。熟練地使用切片工具, 即可以使網(wǎng)頁(yè)美工和網(wǎng)頁(yè)制作無(wú)縫結(jié)合起來(lái), 輕松駕馭網(wǎng)頁(yè)的美工與制作。而在網(wǎng)頁(yè)的設(shè)計(jì)制作過(guò)程中, 很多人對(duì)圖像處理軟件在網(wǎng)頁(yè)設(shè)計(jì)中, 整合網(wǎng)頁(yè)元素的方法還沒(méi)有掌握, 還不能將切片工具的功能完美展現(xiàn)。針對(duì)此現(xiàn)象, 根據(jù)實(shí)踐經(jīng)驗(yàn)對(duì)圖像處理軟件中, 使用切片工具實(shí)現(xiàn)網(wǎng)頁(yè)元素的整合進(jìn)行了闡述。以PhotoShop軟件中設(shè)計(jì)好的網(wǎng)頁(yè)效果圖為例, 將其使用切片工具處理成切片圖像和HTML頁(yè)面, 然后在Dreamweaver軟件中做適當(dāng)整合, 來(lái)展現(xiàn)切片工具實(shí)現(xiàn)從網(wǎng)頁(yè)美工到HTML頁(yè)面的方法和技巧。
圖片是網(wǎng)頁(yè)的重要組成元素, 圖文并茂的網(wǎng)頁(yè)更加形象、友好和有說(shuō)服力。研究結(jié)果顯示, 用戶(hù)瀏覽網(wǎng)頁(yè)內(nèi)容時(shí), 會(huì)有第一視覺(jué)區(qū)域、第二視覺(jué)區(qū)域、第三視覺(jué)區(qū)域, 通常情況下, 用戶(hù)第一眼會(huì)落到頁(yè)面的圖片區(qū)域, 第二眼會(huì)落到大標(biāo)題區(qū)域, 第三眼才會(huì)落到其他地方, 所以說(shuō)圖片能有效地美化網(wǎng)頁(yè)并增加網(wǎng)頁(yè)的吸引力。
網(wǎng)頁(yè)所需圖片的設(shè)計(jì)與美化往往離不開(kāi)圖像處理軟件, 如Photo Shop軟件、Firework軟件等。那么, 在圖像處理軟件設(shè)計(jì)好了網(wǎng)頁(yè)效果圖, 如何轉(zhuǎn)換成HTML頁(yè)面呢?這是網(wǎng)頁(yè)設(shè)計(jì)和制作過(guò)程中必須解決的問(wèn)題。如果將圖像處理軟件中處理好了的整張頁(yè)面效果圖直接插入到網(wǎng)頁(yè), 這樣的網(wǎng)頁(yè)一方面呆滯且不友好, 交互欠佳;另一方面圖片過(guò)大, 影響網(wǎng)頁(yè)打開(kāi)速度, 而且不利于網(wǎng)站的更新和維護(hù)。在圖像處理軟件中使用切片工具, 將效果圖切割成若干小切片, 然后導(dǎo)出一個(gè)站點(diǎn)文件夾, 其中包含HTML頁(yè)面和圖像文件夾, 從而, 實(shí)現(xiàn)了效果圖到HTML頁(yè)面的轉(zhuǎn)換, 即網(wǎng)頁(yè)美工與網(wǎng)頁(yè)制作的無(wú)縫結(jié)合。
1 概念
這里用到的網(wǎng)頁(yè)美工軟件是Photo Shop (以下簡(jiǎn)稱(chēng)PS) , 網(wǎng)頁(yè)制作軟件是Dreamweaver (以下簡(jiǎn)稱(chēng)DW) 。PS是目前全世界應(yīng)用最廣泛的軟件之一, 它是一款由美國(guó)Adobe公司發(fā)布的用來(lái)處理圖形、圖像的軟件。它廣泛應(yīng)用于平面設(shè)計(jì)、商業(yè)設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)等諸多領(lǐng)域[1]。DW是一款集網(wǎng)頁(yè)制作、網(wǎng)站管理于一身的網(wǎng)頁(yè)編輯器, 國(guó)內(nèi)外眾多網(wǎng)站頁(yè)面技術(shù)設(shè)計(jì)師和技術(shù)開(kāi)發(fā)工程師推崇的主流軟件, 目前已經(jīng)成為網(wǎng)站設(shè)計(jì)、制作和開(kāi)發(fā)的重要平臺(tái)之一[2]。在PS中設(shè)計(jì)好網(wǎng)頁(yè)效果圖后, 使用PS的切片工具將效果圖進(jìn)行切割。那么, 為了方便后期的網(wǎng)頁(yè)制作和修改, 掌握一定的切片技巧和原則是很有必要的。
1.1 塊與切片
這里所說(shuō)的塊和切片不是同一個(gè)概念, 但是塊和切片都是網(wǎng)頁(yè)的組成部分?？梢岳斫鉃閴K由切片組成。塊與網(wǎng)頁(yè)的基本構(gòu)成相關(guān), 盡管網(wǎng)頁(yè)千差萬(wàn)別, 但網(wǎng)頁(yè)的基本構(gòu)成元素是固定的, 包括網(wǎng)站的Logo、網(wǎng)頁(yè)的廣告條Banner、導(dǎo)航條區(qū)域、主體區(qū)域、版權(quán)區(qū)域等。塊與網(wǎng)頁(yè)的布局也是相關(guān)的, 在網(wǎng)頁(yè)設(shè)計(jì)中, 在切圖時(shí), 要盡量保證同一塊中的內(nèi)容完整, 也就是說(shuō), 網(wǎng)頁(yè)構(gòu)成的每一個(gè)部分在一個(gè)塊內(nèi)。而切片是塊中的小圖形, 根據(jù)設(shè)計(jì)需求將塊切割成更小的切片。當(dāng)效果圖轉(zhuǎn)換成網(wǎng)頁(yè)之后, 塊對(duì)應(yīng)的是網(wǎng)頁(yè)中的表格 (table) , 切片則對(duì)應(yīng)的是網(wǎng)頁(yè)中的單元格 (td) 。
1.2 分塊原則
首先, 要有分塊思想, 根據(jù)網(wǎng)頁(yè)設(shè)計(jì)的相關(guān)內(nèi)容來(lái)確定整體的分塊策略, 也就是把整個(gè)網(wǎng)頁(yè)分成多個(gè)塊構(gòu)成, 每個(gè)塊即是一個(gè)table, 整個(gè)網(wǎng)頁(yè)就是由多個(gè)table組成的;其次, 盡量分成大行, 平行的切塊, 因?yàn)榫W(wǎng)頁(yè)在顯示時(shí), 一般都是從上而下、從左到右逐行來(lái)顯示網(wǎng)頁(yè)內(nèi)容的, 而要杜絕網(wǎng)頁(yè)上的內(nèi)容雜亂地出現(xiàn)。
選擇我們，優(yōu)質(zhì)服務(wù)，不容錯(cuò)過(guò)
1. 優(yōu)秀的網(wǎng)絡(luò)資源，強(qiáng)大的網(wǎng)站優(yōu)化技術(shù)，穩(wěn)定的網(wǎng)站和速度保證
2. 15年上海網(wǎng)站建設(shè)經(jīng)驗(yàn)，優(yōu)秀的技術(shù)和設(shè)計(jì)水平，更放心
3. 全程省心服務(wù)，不必?fù)?dān)心自己不懂網(wǎng)絡(luò)，更省心。
------------------------------------------------------------
24小時(shí)聯(lián)系電話(huà)：021-58370032
