Wabow Information Inc. Blog
分類: 工作雜談 作者: Doris
17 一月 2012其實很多時候,客戶會希望在畫面上加個字,或是加個圖片之類的。但是其實很多時候,沒有注意到這可能會影響到整個畫面的呈現。接下來將來實例探討為什麼會發生這樣的事情....
假設有一案例:
需求
需要將圖中logo右邊有一個歡迎訊息:「您好, 歡迎來到xxxxxxxx X網站.」的加入二個中文字,變成「您好,歡迎來到xxxxxxxx 這是一網站.」
發現問題
在畫面上看起來,其實感覺將需求一下就可以完成。而其實也只是二個字而已。但開始動的時候就發現問題來了.....在IE6上,可以正常的顯示。如下圖:

但是同樣的畫面在Firefox、Chrom、IE8會變成下圖的樣子:
這個時候總是會發現怎麼會有這種情況?這到底是發生什麼事?又不想把字體縮小,因為如果這個文字再縮下就到8px的話,其實如果是Mac的使用者看到會發現小到很難看的清楚。但是,不縮小又沒辦法整個不換行放進去.....
網頁實際切版狀況
我們來看看實際上header的部分排版的狀況:
如果以目前這個版面是以Table做排版的情況,並且將header的部分(就是有logo的那一塊)排出來的時候,其實事實上是像圖片上紅線的樣式切出空間然後將圖片、連結就上定位。但是就是因為有固定的寬度,也沒有辦法在為了維持目前的字體大小之下,將其他的瀏覽器加字後完整的不換行放在同一個空間中。
所以,千萬別以為只有加「二個字」也是很簡單的事.......設計師們可能要調上好久的時間囉!
1 Response to 淺談網頁版面調整
suzy
一月 17th, 2012 at 1:49 下午
啾咪~