訪客留言簿

星期一, 9月 10, 2007

網頁設計難解問題 - 橫著跑出畫面的網頁

前言:這篇還在收集題材編寫中,不過先放出來再說了。

設計網頁時,常會有的一個問題,就是往往在你電腦上看起來好好的,但在別人電腦上看,就亂七八糟的。這除了是瀏覽器解讀網頁的規範略有不同外(專利技術不是這篇文的主題所以不提),還跟每個人電腦螢幕的尺寸(正確說是解析度)有關。簡單說,除非你設定的網頁只用到段落而已,不然在不同電腦上所顯示的排版,一定會略有不同。

這一篇文章,就是在討論「要怎樣才能避免排版與想像的差異太大」的問題。除了上面提的不同電腦造成的差異以外,也會順便告訴你,網頁設計要注意的規範。

以下列出本文要討論的幾個項目來:

  • 寬度與我設定的不同
  • 調整好的位置在不同瀏覽器上看來不同
  • 在不同大小的螢幕上看來不同

註:瀏覽器,就是指 IE(Internet Explorer) 或 Fx(Firefox) 、 Op(Opera) 、 Konqueror 、 Safari 這類的。另外我下面說的物件,就是指 HTML 的元素(element)這樣。

寬度與我設定的不同

這個問題的原因,是「你對寬度的解釋」,以及「瀏覽器對寬度的解釋」之間有所不同。

今天有一個物件,你設定寬度(width)為 50px ,它在網頁上就真的只會是 50px 了嗎?下面請來看看這些寬度為 50px 的物件有何不同。

寬度 50px

寬度 50px 、格線 4px

寬度 50px 、內距 10px

看了一下,各位應該會發現到,單單指定寬度,並不能完全決定,該物件在網頁上會佔多少空間,因為「格線」與「內距」也是會佔據空間的。

所以,以後當你指定一個物件寬度為 100% 時,如果它顯示出來卻超出 100% 的話,請檢查一下格線和內距。

調整好的位置在不同瀏覽器上看來不同

這個問題看起來好像只有一個問題,事實上,有好幾個問題都可以歸類到這裡來。(注意,下面我要用純文字編輯器的觀點來解析,從沒看過網頁原始碼的人,請隨意看過就好。)

  1. 物件設定要向右移動一段距離時……
  2. 物件要固定在畫面某處時……
物件設定要向右移動一段距離時,在不同瀏覽器上看來卻不同。

這要看你的「物件定位方式」還有「指定物件要移動多少的屬性」用的是什麼。

首先,各位要先知道一件事,「只有區塊層級(block level)的物件,才能在畫面上進行定位移動。」,所以你不能把段落中的某些文字,隨意在畫面上移來移去。

再來,要知道定位相關的屬性(請讀 CSS 教學)有哪些。畢竟這些屬性不代表對錯,瀏覽器只會照屬性跟值來排版而已,而不是照你的意思排版,所以你對屬性的認知有誤,某些嚴格點的瀏覽器,就會跑出預料之外的排版來。

好啦,接下來是實例時間,礙於 blog 不適合給完整的網頁範例,所以需要範例的,請下載這個範例檔案看。

div#test1 { position:relative; left:100px }
div#test2 { position:relative; margin-left:100px }
div#test3 { position:absolute; left:100px }
div#test4 { position:absolute; margin-left:100px }

各位看過範例後,應該會發現,定位方式的 relative 跟 absolute 的物件寬度是不同的,而 left 與 margin-left 排版的方式也是不同的。

註:不指定 width 時是 auto (由瀏覽器自動調整),不指定 position 時是 relative 。

因此在不指定物件寬度的情況下,用相對定位方式,並且設定要「放在父物件由左邊數來 100px 的位置」的物件,實際上在畫面中,會佔據掉「 100% + 100px 」的寬度。但是在某些瀏覽器上,因為父物件會設定成不顯示超出範圍的子物件(overflow:hidden),所以不加上格線來看的話,就會誤以為沒問題。

註:父物件跟子物件,就是指 HTML 文件中,一層物件包住一層物件的架構下,在外面包住的那層就叫父物件,包在裡面的就是子物件。

物件要固定在畫面某處時,在不同瀏覽器上看來卻不同。

通常這是因為,瀏覽器對某種定位方式沒支援的關係。最近的例子,就是 IE6 不支援 fixed 的問題,我上面給的範例裡也有,可以看看。(雖然我也不太喜歡一直固定在畫面上的物件啦)

另外一個問題,就是絕對定位,到底要以整個網頁為基準,還是要以父物件為基準,依瀏覽器不同,偶爾也會造成些問題,所以建議各位,多試試看,再決定要不要用複雜的定位方式。

在不同大小的螢幕上看來不同

這沒有完美解法方案的,你一定要取捨,不管是設計成至少要有 800px 寬度的解析度,還是改用很難控制的百分比值來指定寬度等的,這些都要不斷練習才能找出損失最少的專用方案。

另外,單一份 HTML 文件,只要利用 CSS 的話,仍然可以針對不同媒體,呈現不同畫面,有興趣的可以看看我的這份筆記

結語

雖然我很想寫一系列文章,來說明各種網頁設計上,會碰到的難解問題,不過我的能力跟經驗都不夠,所以寫這主題應該就夠了,其它的主題,請各位自己找找吧。

0 comments:

 

本站著作(不包含圖片、影音以及回應留言)係採用 Creative Commons 姓名標示-非商業性-相同方式分享 2.5 台灣 (中華民國) 授權條款授權