進階網路運用

第二篇
令人迷失方向的網頁製作疑問之一
螢幕解析度問題

適合程度： 初學者 一般程度 進階者 以上均宜
壹、網站首頁常見到的嚴重錯誤標示(關念)：
本站限制(適用) 800 X 600 pixels 或 1024 X 768 pixels 螢幕解析度，這意謂者無形中您已拒絕，約有一半的訪客來您的網站。

貳、使用不正確的螢幕解析度設計網站會有甚麼後果：
螢幕左右(水平寬度)會變成過寬(產生兩側空白邊)或過窄(產生水平捲軸)。
整體性(整張)背景底圖無法自動配合不同螢幕解析度。
如果您採用 Layer (圖層)或 Div (物件定位)語法，會出現很奇怪的組合。
訪客必需為您調整螢幕解析度，才能達到最佳的瀏覽舒適度。
網頁內的字體因螢幕解析度不同，造成過小或過大。

參、那麼到底要用多少螢幕解析度 (Resolution) 來設計網頁：
這也是製作網站首先要面臨的第一個常見問題，現在讓我們先來探討這個令人迷失方向的網頁製作疑問吧！
我到底要用 800 X 600 或 1024 X 768 螢幕解析度來設計網頁？
在還沒決定以前，先來查看目前那種螢幕解析度為最多人在使用人，依據實際調查報告如下：
訪問者螢幕解析度調查：範例(取自家庭電影院入門影音光碟資訊)
原來超過半數以上的人在用 1024 X 768 螢幕解析度，其實這是可以理解的，因為現在大尺寸的螢幕已很便宜(普及)。
我們都知道每個人所使用的螢幕尺寸因工作上的需求不同，相對的螢幕解析度就會不同。
常見的螢幕解析度有 640 X 480 ， 800 X 600 ， 1024 X 768 及 1280 X 1024 幾種。
目前顯示器能支援最高的解析度為 1800 X 1440。
在不同螢幕解析度下，相同的網頁在呈現上一定會出現不同的差異問題。
現在問題來了，如果我用 1024 X 768 螢幕解析度來設計網頁，那其他另外一半網友怎麼辦呢？
使用 800 X 600 的網友，必須移動左右(水平)捲軸才能目睹完整的網頁內容。
反之使用 1024 X 768 的網友，又會看到左右兩側的空白邊緣。
由此調查數據另外可以得知，古老的 640 X 480 螢幕解析度，現在幾乎已沒有人再使用了。
除此之外，還有更多奇怪的螢幕解析度組合。

肆、在還沒進入正題以前，我們先來瞭解一下甚麼是【解析度】：
【解析度】是數位影像課題中一個重要的基本觀念，也是初學者最容易感到混淆疑惑。
本篇報導將針對網頁製作上的【解析度】進行深入探討，期盼能帶給大家一個比較正確的開始。
一般所稱的解析度是螢幕畫面上所看到的畫點數，如 1024 X 768 就是橫的 1024 個圖素乘上直的 768 個圖素所得到的畫面大小。
不同比例顯示器有不同大小的物理解析度，是指螢幕表面的磷光點數量固定，超過實際能顯示的解析度都是模擬出來的結果。
數位影像的【解析度】含蓋範圍很廣，包括：
    影像解析度、印表機解析度、螢幕解析度、螢幕字型解析度、掃描器解析度、數位相機解析度等。
所謂的【解析度】指的是單位長度中，所表達或擷取的像素數目。
從擷取設備(如：掃描器、數位相機)的角度觀之，解像能力越高者，所能擷取影像的解析度也就越高。

伍、在您開始設計網頁之前，必須瞭解以下幾個基本關念：
螢幕解析度是由顯示卡【Display Card】所決定的，並不是由螢幕所決定。
螢幕解析越高，意味著你在螢幕上所見的影像更細緻，色彩更為逼真。
幾種常見的【解析度】，分別是：
輸出階段：例如影像解析度、印表機解析度。
呈現階段：例如螢幕解析度、螢幕字型解析度。
輸入階段：例如掃描器解析度、數位相機解析度。
螢幕解析度的調整能力取決於特定的廠牌、機種、配接卡及螢幕的大小，一般而言：
15 吋螢幕的最佳設定為 640 X 480 、 800 X 600 。
17 吋螢幕的最佳設定為 800 X 600 、 1024 X 768。
19 吋螢幕的最佳設定為 1024 X 768、1280 X 1024。
影像的解析度會影響列印時的品質及大小，但不會影響它在螢幕上所呈現的品質。
而且，影像解析度是可以透過 PhotoImpact 、 PhotoShop 、 PaintShop Pro… 等影像處理軟體加以改變！
在調整螢幕解析度時，亦得注意螢幕更新(整理)頻率的設定。
根據 VESA 組織的建議，最好將螢幕更新頻率設定在 72Hz 以上，眼睛才不會因為受到視訊的更新整理而感到勞累。
想要同時得到較高的螢幕解析度及更新頻率，就得仰賴於較高級的螢幕機種及視訊卡。
例如當我們將螢幕解析度由 640 X 480 調整成 1024 X 768 時。
由於螢幕上容納了更多的像點，所以原本的影像看起來會更加地細緻，但影像的顯示尺寸則會縮小。
以 17 吋的螢幕為例，若原本有一 640 X 480 的影像呈現在螢幕上，由於特定螢幕的顯示尺寸是不會改變的。
當我們將螢幕解析度由 640 X 480 調整成 1024 X 768 時， 17 吋的螢幕上必須容納更多的像點。
所以原本的影像看起來會更加地細緻，但尺寸則縮小為桌面的 40% 。
決定一個螢幕顯示品質的好壞有三個關鍵設定值：解析度、顏色數及垂直掃描頻率。
解析度 (Resolution) 是決定螢幕顯示細膩的程度，解析度愈高，螢幕畫面愈精細。
顏色數(或稱 Color Depth) 是決定螢幕顯示色彩種類的數目，顏色數愈多，螢幕顯示的色彩就愈豐富，畫面也就愈逼真。
垂直掃描頻率(Vertical Scan Rate) 是決定螢幕顯示畫面穩定的程度，垂直掃描頻率愈高，螢幕的畫面就愈穩定。
影像解析度使用的單位是 ppi (Pixel per Inch) ，意思是每英吋所表達的像素數目。
從列印設備的角度觀之，影像的解析度越高者，所印出來的影像也就越細緻。
列印解析度使用的單位是 dpi (Dot per Inch) ，意思是每英吋所表達的列印點數。
ppi 與 dpi 的度量方式常常被人混用，例如：
掃描器的光學解析度雖然有 1200 X 600 dpi ，但是掃瞄傳統相片時，相片有效的解析度大約只有 150 dpi 左右。
前面的 1200 X 600 dpi，其實便是指 ppi 。
數位影像的成像品質其實決定於擷取階段，如果原稿的品質很精緻，掃描器的光學解析度也不錯，通常可以得到較好的影像。
相對地，使用粗糙模糊的原稿，即使提高掃瞄解析度也無濟於事，事後利用影像處理軟體加以調校改善，但是相當有限。

陸、電腦螢幕解析度及字型設定的技巧：
如何設定螢幕解析度：
螢幕解析度就是 Windows 桌面的大小，你可以自己嘗試改變螢幕解析度，看看畫面大小有何差異。
設定步驟：到 Windows 的桌面上，按滑鼠右鍵，點選內容 設定值，並以拖拉的方式改變螢幕區域的大小。
如何設定螢幕字型解析度：
調高螢幕解析度後，螢幕字型解析度也必需跟隨調整，免得字型看起來醜醜小小的顯得不太協調。
備註：有時候顯示卡沒安裝好也有關係。
PC 螢幕上可以設定的字型解析度為 96 dpi 、 120 dpi 、 144 dpi 及 192 dpi。
在 640 X 480 的桌面大小下，使用 96 dpi 就夠了。
在 800 X 600 或 1024 X 768 的大小下，則可以考慮將螢幕字型解析度調整為 120 dpi。
設定步驟：
到 Windows 的桌面上，按滑鼠右鍵，點選內容 設定值 進階 一般，選取 DPI 設定來改變解析度大小。
備註：如何知道使用者的螢幕解析度是多少呢？
    其實很簡單！在網頁中使用一段 JavaScript 程式碼就可以偵測出來了，但是我們並不希望限制只有符合者才能進入貴站吧？

柒、網頁版面設計原則：
開始設計頁面時，像是首頁或是有主選項目的導覽頁面，便要鎖定你要呈現的大小。
怎樣在不使用到捲軸上下捲動的狀態下，來呈現出完整的第一個畫面，讓瀏覽者清楚知道你的網頁內容。
所以你在網頁設計或排版上，就要將最重要的部分，例如圖像，網站單元選項，重要資訊等等，放在整個螢幕的範圍內。
這樣使用者就可以在不使用捲軸的狀況下，進網站第一個畫面就清楚的看到你要呈現的主題。
當然，以上提到的是一個空間基本狀況，著重在整體設計感覺與瀏覽時的舒適度，並非指頁面一定要死死作在固定的範圍裡！
不過，在實際頁面設計上，並不是說以 800 X 600 pixels 為主要，你的頁面大小就可以直接做成 800 X 600 pixels 喔。
在實際的頁面規劃上，若直接以 800 X 600 pixels 來設計網頁常會超出畫面的範圍。
那是因為 800 X 600 pixels指的是使用者的整個螢幕的大小。
所以當頁面在 IE 瀏覽器中顯示時還必須扣除上下工具列，因此剩下的可視區域大約只剩 760 X 420 pixels。
當你在網頁編輯軟體置入圖形或是表格 (Table) 時，位置的預設值是頁面齊左，當然你也可以將之置中。
如此在其他解析度瀏覽時，你的網頁就都會呈現在中間，較有畫面平衡感。
而邊界 (Margin) 的預設值，在 Dreamweaver 上邊界約 10 pixels，左邊界約 8 pixels。
而在 Frontpage ，上邊界約 16 pixels，左邊界約 12 pixels，這些當然都會佔掉一些空間。
如果你不想浪費這些邊界，可以在軟體裡的頁面屬性設定，將 Left Margin 以及 Top Margin 的地方，數值設成 0 。
如此，你的頁面便可以乖乖的貼在週邊的地方。

捌、以下有幾種不是很好的規劃做法：
為了讓不同螢幕解析度的人看到完整的內容，分別製作兩套網站..
運用 JavaScript 程式碼自動判斷訪客螢幕解析度，進入正確的網頁位置。
設計不同的背景底圖 (800 X 600 或 1024 X 768) ，運用 JavaScript 程式碼自動判斷訪客螢幕解析度，採用正確的網頁底圖。
採用 Layer (圖層)或 Div (物件定位)語法來製作您的網頁。
盡可能不要使用頁面左齊配置，以免看起來很左右不協調。

玖、那我該怎麼辦製作網頁才好：
根據調查目前使用 800 X 600 及 1024 X 768 螢幕解析度的人最多，為了顧及所有的訪客都能看到整個螢幕的範圍內...
當然要以 800 X 600 為主要的規劃，再配合運用網頁技巧自動調整寬度，這樣在更高螢幕解析度下瀏覽也不會有問題。
如何才能運用網頁技巧自動調整寬度？其實很簡單，我們知到顯示表格 (Table) 大小有兩種參數， width=pixels 或 %。
width=pixels 是固定值(絕對值)，不能隨螢幕變化；而百分比 (%) 是就是相對值，會依隨螢幕大小自動調整。
所以可以盡量使用表格 (Table) 來達到這個目的，也就是整個網頁先用大表格 (Table) 包起來，再使用小表格 (Table) 來做安排。
如果您想使用分割視窗 (frame) ，做法也應該是如此規劃才好。
盡可能採用無接縫底圖或左測邊花紋等底圖，如果找不到適合底圖，用底色 (bgcolor) 也是不錯選擇。
如果您一定要採用整張漂亮美工做的底圖，寬度尺寸控制在 760 pixels 以內。
然後盡可能分割成左中右三塊，左右使用固定尺寸，中間採用可伸縮的共用底圖(色)。
如此就不用耽心 800 X 600 或 1024 X 768 螢幕解析度問題了。
☉成功範例介紹：
賀寶芙營養護膚訂購服務網範例
這是我做的其中一個網站，我採無接縫左測邊花紋底圖，網頁內容全部置中，所以均適用於 800 X 600 或 1024 X 768 螢幕解析度。
請注意首頁粉紅色賀寶芙營養護膚訂購服務網標題，在這文字上有 3 個會閃爍的星星。
因為採用 DIV 定位語法，所以位置會因螢幕解析度而變化。
中華民國公益彩券網站範例
此站採多重分割視窗，它是以 800 X 600 螢幕解析度來設計，但用於 1024 X 768 螢幕解析度時，整體感也讓人覺得很好。
請注意這個網站上面視窗 Banner 、左側視窗選單及下面視窗跑馬燈，可左右或上下伸縮的做法，值得您參考。
以上建議您使用檢視原始碼，來查看它實際上是如何安排這個畫面。
備註：以上報導彙整內容，部份取自相關專業網站或書籍，個人僅以專業範圍做適當研究而已，特此聲明。

拾、結論與建議：
本站所有報導資料，歡迎網友加入鏈結或轉載內容，惟請保留文章完整，並註明此 引用來源 ，謝謝您的支持與配合。
本報每篇報導都花上 8 小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會 HTML 語法網友永久保存。
強烈建議您 學會 HTML 語法 ，她真的簡單易學，懂了她您就能駕馭她，讓您使用所見即所得軟體更得心應手。
本報導屬於完全免費性質， 索取教材資料 屬個人自由意願，而回饋給您的光碟片，則是我們的誠意而已。
一篇保證前所未見的 HTML 教學課程，絕對是您學習 HTML 的好教材，強烈建議您進入實際體驗一下。
本電子報報導資料，未來將繼續每隔 30 日發表一次，以嘉惠更多想學會 HTML 網友，歡迎 繼續訂閱 。
本報導內容或資料，因限人力、時間，非教學會員，不接受任何疑惑解答，敬請見諒。