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