如果您是一個瞭解網站建設行業的人來講定知道網站建設公司的建站流程,那我們就來說說目前 WordPress 網站建設公司的建站流程吧:也就是先和客戶溝通
確定設計稿,然後交給網頁前端的人員進行網頁的製作,把靜態的 PSD 檔案切成 html 的靜態頁面,然後加上相應的效果,後交給程式完善後的程式程式碼工作。我今天要說的是切圖這方面的事情,應該注意的一些細節問題。
網頁設計師把一個整體的 psd 交給我們前段人員的時候一定不要急於的去切圖,一定要想要先整體的瀏覽一下,做到心裡有數,整體的把控是非常重要的事情,我們知道網頁無非由一些基本模組組成,每一種基本模組在 UI 設計上,不同的應用例項是否元素一致,包括字型、字號、顏色、按鈕顏色、按鈕形狀、按鈕功能、提示文字、行距等。說來容易,執行的時候很多設計師會有一些隨意的想法,可能某些想法是挺好的,但是我們必須執行統一的介面標準。設想 windows 裡面,如果不同的視窗關閉按鈕在不同的地方,並且顏色還不一樣,這會是什麼樣混亂的狀況。命名的準確性,也是前端人員應該注意的問題,切圖後把個元素放到相應的資料夾後,圖片等相關元素命名要符合 div+css 的命名規範,以備後邊程式在後臺看程式碼的時候有較高的效率,及程式碼的規範程度。
顏色範圍:如果一個區域中顏色範圍不大,只有幾種顏色,那麼應該單獨切出,如果只有一種顏色,就應該象劍氣所說,切片後選擇 HTML 型別,在 DW 中改背景顏色來達到目的;如果顏色數量比較多,漸變過渡多一些,應該把切片數量切的多一些,儘量把單個切片控制在一個顏色範圍的輪廓內;
切片大小:切片的目的主要是加快下載進度,讓多個圖片同時下載而不是隻下載一個大圖片,所以切片大小要根據需要來切,標誌 LOGO 等主要部分儘量切在一個切片內,防止顯示遇到特殊情況時顯示一部分,圓角表格部分要根據顯示區域的大小來切,控制好邊緣和邊角,有時候切出來的切片並不是直接插入到 DW 了事,而需要在 DW 中編輯,比如有的圖片應該設定成背景圖片;
切片區域:保證完整的一部分在一個切片內,例如某區域的標題文字,以後修改時方便;
匯出型別:顏色單一過渡少的,應該匯出為 GIF,顏色過渡比較多,顏色豐富的應該匯出為 JPG,有動畫的部分應該匯出為 GIF 動畫;
原始檔:即使頁面作好了,也要保留帶切片層的原始檔,說不上哪天要改某一個部分,例如文字什麼的,直接修改單獨匯出所用的切片就可以了。