|
|
|---|
|
壹、網站首頁常見到的嚴重錯誤標示(關念)： ⊕本站限制(適用) 800*600 pixels 或 1024*768 pixels 螢幕解析度，這意謂者無形中您已拒絕，約有一半的訪客來您的網站。 |
|
貳、使用不正確的螢幕解析度設計網站會有甚麼後果： ⊕螢幕左右(水平寬度)會變成過寬(產生兩側空白邊)或過窄(產生水平捲軸)。 ⊕整體性(整張)背景底圖無法自動配合不同螢幕解析度。 ⊕如果您採用 Layer (圖層)或 Div (物件定位)語法，會出現很奇怪的組合。 ⊕訪客必需為您調整螢幕解析度，才能達到最佳的瀏覽舒適度。 ⊕網頁內的字體因螢幕解析度不同，造成過小或過大。 |
|
參、那麼到底要用多少螢幕解析度 (Resolution) 來設計網頁： ⊕這也是製作網站首先要面臨的第一個常見問題，現在讓我們先來探討這個令人迷失方向的網頁製作疑問吧！ ⊕我到底要用 800*600 或 1024*768 螢幕解析度來設計網頁？ ⊕在還沒決定以前，先來查看目前那種螢幕解析度為最多人在使用人，依據實際調查報告如下： ⊙訪問者螢幕解析度調查：  (取自家庭電影院入門影音光碟資訊)⊕原來超過半數以上的人在用 1024*768 螢幕解析度，其實這是可以理解的，因為現在大尺寸的螢幕已很便宜(普及)。 ⊕我們都知道每個人所使用的螢幕尺寸因工作上的需求不同，相對的螢幕解析度就會不同。 ⊕常見的螢幕解析度有 640*480 ， 800*600 ， 1024*768 及 1280*1024 幾種，目前顯示器能支援最高的解析度為 1800*1440。 ⊕在不同螢幕解析度下，相同的網頁在呈現上一定會出現不同的差異問題。 ⊕現在問題來了，如果我用 1024*768 螢幕解析度來設計網頁，那其他另外一半網友怎麼辦呢？ ⊕使用 800*600 的網友，必須移動左右(水平)捲軸才能目睹完整的網頁內容。 ⊕反之使用 1024*768 的網友，又會看到左右兩側的空白邊緣。 ⊙由此調查數據另外可以得知，古老的 640*480 螢幕解析度，現在幾乎已沒有人再使用了。 ⊙除此之外，還有更多奇怪的螢幕解析度組合。 |
|
肆、在還沒進入正題以前，我們先來瞭解一下甚麼是【解析度】： ⊕【解析度】是數位影像課題中一個重要的基本觀念，也是初學者最容易感到混淆疑惑。 ⊕本篇報導將針對網頁製作上的【解析度】進行深入探討，期盼能帶給大家一個比較正確的開始。 ⊕一般所稱的解析度是螢幕畫面上所看到的畫點數，如 1024*768 就是橫的 1024 個圖素乘上直的 768 個圖素所得到的畫面大小。 ⊕不同比例顯示器有不同大小的物理解析度，是指螢幕表面的磷光點數量固定，超過實際能顯示的解析度都是模擬出來的結果。 ⊕數位影像的【解析度】含蓋範圍很廣，包括： 影像解析度、印表機解析度、螢幕解析度、螢幕字型解析度、掃描器解析度、數位相機解析度等。 ⊕所謂的【解析度】指的是單位長度中，所表達或擷取的像素數目。 ⊕從擷取設備(如：掃描器、數位相機)的角度觀之，解像能力越高者，所能擷取影像的解析度也就越高。 |
|
伍、在您開始設計網頁之前，必須瞭解以下幾個基本關念： ⊕螢幕解析度是由顯示卡【Display Card】所決定的，並不是由螢幕所決定。 ⊕螢幕解析越高，意味著你在螢幕上所見的影像更細緻，色彩更為逼真。 ⊕幾種常見的【解析度】，分別是： ⊙輸出階段：例如影像解析度、印表機解析度。 ⊙呈現階段：例如螢幕解析度、螢幕字型解析度。 ⊙輸入階段：例如掃描器解析度、數位相機解析度。 ⊕螢幕解析度的調整能力取決於特定的廠牌、機種、配接卡及螢幕的大小，一般而言： ⊙ 15 吋螢幕的最佳設定為 640*480 、 800*600 。 ⊙ 17 吋螢幕的最佳設定為 800*600 、 1024*768。 ⊙ 19 吋螢幕的最佳設定為 1024*768、1280*1024。 ⊕影像的解析度會影響列印時的品質及大小，但不會影響它在螢幕上所呈現的品質。 ⊕而且，影像解析度是可以透過 PhotoImpact 、 PhotoShop 、 PaintShop Pro… 等影像處理軟體加以改變！ ⊕在調整螢幕解析度時，亦得注意螢幕更新(整理)頻率的設定。 ⊙根據 VESA 組織的建議，最好將螢幕更新頻率設定在 72Hz 以上，眼睛才不會因為受到視訊的更新整理而感到勞累。 ⊕想要同時得到較高的螢幕解析度及更新頻率，就得仰賴於較高級的螢幕機種及視訊卡。 ⊙例如當我們將螢幕解析度由 640*480 調整成 1024*768 時。 ⊙由於螢幕上容納了更多的像點，所以原本的影像看起來會更加地細緻，但影像的顯示尺寸則會縮小。 ⊕以 17 吋的螢幕為例，若原本有一 640*480 的影像呈現在螢幕上，由於特定螢幕的顯示尺寸是不會改變的。 ⊙當我們將螢幕解析度由 640*480 調整成 1024*768 時， 17 吋的螢幕上必須容納更多的像點。 ⊙所以原本的影像看起來會更加地細緻，但尺寸則縮小為桌面的 40% 。 ⊕決定一個螢幕顯示品質的好壞有三個關鍵設定值：解析度、顏色數及垂直掃描頻率。 ⊕解析度 (Resolution) 是決定螢幕顯示細膩的程度，解析度愈高，螢幕畫面愈精細。 ⊕顏色數(或稱 Color Depth) 是決定螢幕顯示色彩種類的數目，顏色數愈多，螢幕顯示的色彩就愈豐富，畫面也就愈逼真。 ⊕垂直掃描頻率(Vertical Scan Rate) 是決定螢幕顯示畫面穩定的程度，垂直掃描頻率愈高，螢幕的畫面就愈穩定。 ⊕影像解析度使用的單位是 ppi (Pixel per Inch) ，意思是每英吋所表達的像素數目。 ⊕從列印設備的角度觀之，影像的解析度越高者，所印出來的影像也就越細緻。 ⊕列印解析度使用的單位是 dpi (Dot per Inch) ，意思是每英吋所表達的列印點數。 ⊕ppi 與 dpi 的度量方式常常被人混用，例如： ⊙掃描器的光學解析度雖然有 1200*600 dpi ，但是掃瞄傳統相片時，相片有效的解析度大約只有 150 dpi 左右。 ⊙前面的 1200*600 dpi，其實便是指 ppi 。 ⊕數位影像的成像品質其實決定於擷取階段，如果原稿的品質很精緻，掃描器的光學解析度也不錯，通常可以得到較好的影像。 ⊕相對地，使用粗糙模糊的原稿，即使提高掃瞄解析度也無濟於事，事後利用影像處理軟體加以調校改善，但是相當有限。 |
|
陸、電腦螢幕解析度及字型設定的技巧： ⊙如何設定螢幕解析度： ⊕螢幕解析度就是 Windows 桌面的大小，你可以自己嘗試改變螢幕解析度，看看畫面大小有何差異。 ⊕設定步驟：到 Windows 的桌面上，按滑鼠右鍵，點選內容 => 設定值，並以拖拉的方式改變螢幕區域的大小。 ⊙如何設定螢幕字型解析度： ⊕調高螢幕解析度後，螢幕字型解析度也必需跟隨調整，免得字型看起來醜醜小小的顯得不太協調。 ⊙備註：有時候顯示卡沒安裝好也有關係。 ⊕PC 螢幕上可以設定的字型解析度為 96 dpi 、 120 dpi 、 144 dpi 及 192 dpi。 ⊕在 640*480 的桌面大小下，使用 96 dpi 就夠了，在 800*600 或 1024*768 的大小下，則可以考慮將螢幕字型解析度調整為 120 dpi。 ⊕設定步驟：到 Windows 的桌面上，按滑鼠右鍵，點選內容 => 設定值 => 進階 => 一般，選取 DPI 設定來改變解析度大小。 ⊙備註：如何知道使用者的螢幕解析度是多少呢？ 其實很簡單！在網頁中使用一段 JavaScript 程式碼就可以偵測出來了，但是我們並不希望限制只有符合者才能進入貴站吧？ |
|
柒、網頁版面設計原則： ⊕開始設計頁面時，像是首頁或是有主選項目的導覽頁面，便要鎖定你要呈現的大小。 ⊕怎樣在不使用到捲軸上下捲動的狀態下，來呈現出完整的第一個畫面，讓瀏覽者清楚知道你的網頁內容。 ⊕所以你在網頁設計或排版上，就要將最重要的部分，例如圖像，網站單元選項，重要資訊等等，放在整個螢幕的範圍內。 ⊕這樣使用者就可以在不使用捲軸的狀況下，進網站第一個畫面就清楚的看到你要呈現的主題。 ⊕當然，以上提到的是一個空間基本狀況，著重在整體設計感覺與瀏覽時的舒適度，並非指頁面一定要死死作在固定的範圍裡！ ⊕不過，在實際頁面設計上，並不是說以 800*600 pixels 為主要，你的頁面大小就可以直接做成 800*600 pixels 喔。 ⊕在實際的頁面規劃上，若直接以 800*600 pixels 來設計網頁常會超出畫面的範圍。 ⊕那是因為 800*600 pixels指的是使用者的整個螢幕的大小。 ⊕所以當頁面在 IE 瀏覽器中顯示時還必須扣除上下工具列，因此剩下的可視區域大約只剩 760*420 pixels。 ⊕當你在網頁編輯軟體置入圖形或是表格 (Table) 時，位置的預設值是頁面齊左，當然你也可以將之置中。 ⊕如此在其他解析度瀏覽時，你的網頁就都會呈現在中間，較有畫面平衡感。 ⊕而邊界 (Margin) 的預設值，在 Dreamweaver 上邊界約 10 pixels，左邊界約 8 pixels。 ⊕而在 Frontpage ，上邊界約 16 pixels，左邊界約 12 pixels，這些當然都會佔掉一些空間。 ⊕如果你不想浪費這些邊界，可以在軟體裡的頁面屬性設定，將 Left Margin 以及 Top Margin 的地方，數值設成 0 。 ⊕如此，你的頁面便可以乖乖的貼在週邊的地方。 |
|
捌、以下有幾種不是很好的規劃做法： ⊕為了讓不同螢幕解析度的人看到完整的內容，分別製作兩套網站.. ⊕運用 JavaScript 程式碼自動判斷訪客螢幕解析度，進入正確的網頁位置。 ⊕設計不同的背景底圖 (800*600 或 1024*768) ，運用 JavaScript 程式碼自動判斷訪客螢幕解析度，採用正確的網頁底圖。 ⊕採用 Layer (圖層)或 Div (物件定位)語法來製作您的網頁。 ⊕盡可能不要使用頁面左齊配置，以免看起來左右不協調。 |
|
玖、那我該怎麼辦製作網頁才好： ⊕根據調查目前使用 800*600 及 1024*768 螢幕解析度的人最多，為了顧及所有的訪客都能看到整個螢幕的範圍內... ⊕當然要以 800*600 為主要的規劃，再配合運用網頁技巧自動調整寬度，這樣在更高螢幕解析度下瀏覽也不會有問題。 ⊕如何才能運用網頁技巧自動調整寬度？其實很簡單，我們知到顯示表格 (Table) 大小有兩種參數， width=pixels 或 %。 ⊕ width=pixels 是固定值(絕對值)，不能隨螢幕變化；而百分比 (%) 是就是絕對值，會依隨螢幕大小自動調整。 ⊕所以可以盡量使用表格 (Table) 來達到這個目的，也就是整個網頁先用大表格 (Table) 包起來，再使用小表格 (Table) 來做安排。 ⊕如果您想使用分割視窗 (frame) ，做法也應該是如此規劃才好。 ⊕盡可能採用無接縫底圖或左測邊花紋等底圖，如果找不到適合底圖，用底色 (bgcolor) 也是不錯選擇。 ⊕如果您一定要採用整張漂亮美工做的底圖，寬度尺寸控制在 760 pixels 以內。 ⊕然後盡可能分割成左中右三塊，左右使用固定尺寸，中間採用可伸縮的共用底圖(色)。 ⊕如此就不用耽心 800*600 或 1024*768 螢幕解析度問題了。 ⊙成功範例介紹： ⊙賀寶芙營養護膚訂購服務網 ⊕這是我做的其中一個網站，我採無接縫左測邊花紋底圖，網頁內容全部置中，所以均適用於 800*600 或 1024*768 螢幕解析度。 ⊕請注意首頁粉紅色賀寶芙營養護膚訂購服務網標題，在這文字上有 3 個會閃爍的星星。 ⊕因為採用 DIV 定位語法，所以位置會因螢幕解析度而變化。 ⊙中華民國公益彩券網站 ⊕此站採多重分割視窗，它是以 800*600 螢幕解析度來設計，但用於 1024*768 螢幕解析度時，整體感也讓人覺得很好。 ⊕請注意這個網站上面視窗 Banner 、左側視窗選單及下面視窗跑馬燈，可左右或上下伸縮的做法，值得您參考。 ⊕以上建議您使用檢視原始碼，來查看它實際上是如何安排這個畫面。 ⊙備註：以上報導彙整內容，部份取自相關專業網站或書籍，個人僅以專業範圍做適當研究而已，特此聲明。 |
|
拾、結論與建議： ⊕本報每篇報導都花上8小時以上搜集、整理及撰稿，絕對值得初學者或想徹底學會HTML語法網友永久保存。 ⊕本電子報第三階段報導資料，將繼續每隔30日發表一次，以嘉惠更多想學會HTML網友，歡迎訂閱！ ⊕本報導資料取自網頁研習室教學會員檔案資料，內附更多範例介紹，歡迎進一步研習。 ⊕強烈建議您學會HTML語法，她真的簡單易學，懂了她您就能駕馭她，不要再用所見即所得軟體了。 ⊕本報導內容或資料，因限人力，非本報教學會員，不接受任何疑惑解答，敬請見諒。 ⊕網頁研習室網站內容已於近日全面更新，歡迎前往瀏覽及指教。 ⊕凡與網路有關之內容，您想要本報在未來報導那些專題？歡迎提出評價與建議。 |
|
第三階段93.12.31.發行第009期 前期：您知道濫發電郵最高累罰二千萬嗎？ |
|
| © 網頁研習室【電子報】李文能 主編 © |