淺談網頁版面調整

分類: 工作雜談 作者: Doris

17 1 月 2012

其實很多時候,客戶會希望在畫面上加個字,或是加個圖片之類的。但是其實很多時候,沒有注意到這可能會影響到整個畫面的呈現。接下來將來實例探討為什麼會發生這樣的事情....

假設有一案例:

有一個html的版面,長的樣子如下:
IE6加字完結果圖

 

需求
需要將圖中logo右邊有一個歡迎訊息:「您好, 歡迎來到xxxxxxxx X網站.」的加入二個中文字,變成「您好,歡迎來到xxxxxxxx 這是一網站.」

 

發現問題
在畫面上看起來,其實感覺將需求一下就可以完成。而其實也只是二個字而已。但開始動的時候就發現問題來了.....在IE6上,可以正常的顯示。如下圖:
IE6加字完結果圖

但是同樣的畫面在Firefox、Chrom、IE8會變成下圖的樣子:

這個時候總是會發現怎麼會有這種情況?這到底是發生什麼事?又不想把字體縮小,因為如果這個文字再縮下就到8px的話,其實如果是Mac的使用者看到會發現小到很難看的清楚。但是,不縮小又沒辦法整個不換行放進去.....

網頁實際切版狀況

我們來看看實際上header的部分排版的狀況:
如果以目前這個版面是以Table做排版的情況,並且將header的部分(就是有logo的那一塊)排出來的時候,其實事實上是像圖片上紅線的樣式切出空間然後將圖片、連結就上定位。但是就是因為有固定的寬度,也沒有辦法在為了維持目前的字體大小之下,將其他的瀏覽器加字後完整的不換行放在同一個空間中。
所以,千萬別以為只有加「二個字」也是很簡單的事.......設計師們可能要調上好久的時間囉!

1 Response to 淺談網頁版面調整

Avatar

suzy

1 月 17th, 2012 at 1:49 下午

啾咪~

我要留言

關於這裡

這個部落格分享了哇寶在電子商務領域的技術及資訊,希望能讓更多人一起為台灣的網路產業加油。