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