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