網頁設計師與程式設計師的友善溝通橋樑之道（二）

相信很多網頁設計師將切好的板給程式設計師套程式後，問題便跟著接踵而來。
譬如說網頁畫面岔開、破圖、文字顏色跑掉、在其他瀏覽器畫面不一 巴啦巴啦族繁不及備載～　
而且套了程式後，程式又分成一個區塊一個區塊的程式檔，不管你是要改css或者是程式檔都會比你未套版前花上更多的時間來修改。所以事前的檢查是一定要的，以避免後續又一直重工在修改同樣的東西。

那麼該如何避免這些突發狀況呢？這裡提供一些撇步給大家參考。


一、務必確認各瀏覽器畫面皆正常。
有的時候或許妳再IE7、8看起來正常，正當你認為一切ok，興高采烈的給工程師套完程式以後才發現火弧的畫面其實慘不忍睹！運氣好一點或許改css就好，但如果沒辦法改過來就必須重構HTML，那程式設計師又必須重新再套一次程式。如此重工下來，耗費的時間與人力成本便很可觀嘍。所以在套程式前，至少在IE6、7、8與火狐和google瀏覽器都確認無誤後再將東西交出去會比較好哦。

　二、需考量文字內容是否會多行顯示。
下圖是擷取行政院的新聞內頁，當設計版面的時候，你必須考慮到，當一些文字掉到第二行的時候，你的畫面是否會破圖或過於突兀。如果某個元素只限定一行的設計的話，也必須要在註解的地方告訴程式設計師，該元素僅只能出現單行文字，當超過文字的時候，要用…來顯示。 這樣版面便不會被文字多寡而影響到版面的順暢度。

三、是否該預留空間。
下圖是擷取總統府的民意信箱畫面，預留空間較常用在填寫資料時，當某部份必填欄位未填寫的時候，便會出現提示文字要你必須填寫此欄位。所以再切板的時候，也必須和其他企畫、程式窗口，該些文字的內容，好讓網頁設計師了解該區塊該保留多少文字空間來放提示文字。
而下圖便是當我未填任何資料時，欄位右方原本隱藏的文字便會顯示出來提醒我該填寫此欄位。




四、網站預設圖片。
網站預設的圖片意思就是，如果你的網站是購物平台，當新增一筆產品時，如果未有合適的產品圖片時，應該都必須要有一張預設的NO-IMAGES的預設圖片來暫時代替。以避免出現破圖的情況發生。

五、連結的文字設定。
當妳在切版的時候，要確定哪些文字會做成［連結］，如果做成連結的話，那你的CSS也要跟著修改，如果你什麼都沒設定的話，那你的文字連結便會變成醜醜的含有下底線的藍字。

六、CSS的設定是否會影響程式設計師套版面
這是我自己遇到的狀況，當我設定某個DIV的SPAN元素會產生100PX的寬與高，且會有背景圖案產生。結果某個工程師下參數的時候剛好得額外增加出span的元素，導致畫面破圖、重複。導致我必須用其他的HTML元素來取代。 所以最好是製作前先和你的程式設計師溝通一下，有哪些元素是他額外產生出來的，以避免有所衝突。而我目前是都用H1、H2這種標題或Ｐ段落、font文字來進行CSS設定。提供各位參考。

下回的網頁設計師與程式設計師的友善溝通橋樑之道（三）將會聊到，該如何了解程式設計師的寫程式的邏輯性。