Position方式構建Browser/Server結構

Html+CSS 在 網頁構建（Web Page Building） 中的應用已經不是什么新鮮事了。輕盈的 Div布局 方式替換了笨重 Table布局 方式。而在 Div布局 方面多數人使用的是 float方式 ，Div 在 float 的控制下忽左忽右好不自在。但我們今天要說的不是 網頁構建 ，而是 B/S結構 軟件界面構建。所以我想介紹另外一種方式 position方式 。我個人比較喜歡這種方式，雖然很多人認為把 Div 的 position屬性 設置為 absolute 后用 top屬性 和 left屬性 在頁面中隨意定位進行布局是一種極端菜鳥的方式，但在 B/S結構 軟件界面構建過程中這種 position方式 的靈活絕對會給你帶來意想不到的效果。當然我所說所寫 position方式 還存在很多的不足之處，這只是為了拋磚引玉，來給大家打開一個話題。

閑話：

既然我們是在說 B/S結構 軟件界面的構建，那就先來介紹一下 B/S結構 吧！

B/S結構（Browser/Server結構） 即 瀏覽器和服務器結構 。它是隨著Internet技術的興起，對 C/S結構（Client/Server結構） 的一種變化或者改進的結構。在這種結構下，用戶工作界面是通過瀏覽器來實現（也就是說 B/S結構 軟件界面可以被理解為是建立在現有瀏覽器所能解釋的 Html；CSS；Scrip等基礎之上特殊的網頁），這也就使得其具有了 C/S結構 所不能比擬的跨平臺性等優勢…… 

說完 B/S結構 讓我們來說說既然 B/S結構 軟件界面（其實就是一種特殊用途的網頁）和普通網頁有什么根本性的區別呢？

整頁滾動。我個人不建議在 B/S結構 軟件界面中使用整頁滾動。因為瀏覽器滾動條的實在是為了當初方便閱讀那些綿長的文章，這樣的閱讀習慣也促使了之后的網頁也變得綿長。不過作為網頁這也沒什么不好（你完全可以將這理解為現實生活中把小說印在衛生紙上來供人們閱讀，拉動滾動條就好像是向上抽出更長的衛生紙），但作為軟件界面，其強調的更多是控制而不是閱讀，整頁滾動條就顯得不那么合適宜了。在我的觀念中軟件界面設計時應盡可能的將一類操作在一個界面上顯示出來，而不是還有一部分（也許這是更重的功能）隱藏在下面需要拉動滾動條（試想某個核大國的總統在按動核按鈕后才發現滾動條，而下邊的頁面是警告說對方遭受核打擊后很快會進行核報復…… 所以我們要堅決反對使用核武器 ：p） 。即便是受到屏幕尺寸的制約也盡可能的使用局部滾動條或者干脆使用 Step-by-step方式 來解決。你什么時候看見操作系統（不論是糟糕的Win或是優秀的Mac）中在設置的界面中使用滾動條（有一個例外是iPhone，它在很多的設置界面中都使用了滾動條，但它有讓人叫絕手指控制滾動的方式來彌補這一點） 。
尺寸適應。分辨率一直是困擾網頁設計者的問題，在網頁設計中大多還是集中在頁面寬度的問題上。適應800px還是1024px，這就好像當年哈密雷特口中的 "To be or not to be"，近年來隨著顯示器的變革這個問題還在愈演愈烈，除了剛剛說的2種分辨率，也許很多設計師腦中已經開始考慮1280px這個寬屏分辨率甚至更高的分辨率。當然也有的設計師干脆就只為800px，說這也是個不錯的兼容性考慮，可惜我那1920px的顯示器啊整天閑著兩邊。在 B/S結構 軟件界面中從來沒有這么簡單的辦法，因為復雜的功能可能有著大量的操作設置或數據顯示，一絲一毫的空間都不容的浪費。并且上一條也指出我們不想用整頁滾動條來解決問題，這帶來的不單是顯示面積的限制，還有就是我們需要考慮的是寬度和高度雙重尺寸適應問題。不單單是顯示器分辨率，當瀏覽器不是最大化時界面同樣要適應（Mac系統根本就不存在最大化），也就是說界面要時時應對瀏覽器窗口尺寸大小而調整。所以利用一切可能的手段使頁面可以自動適應瀏覽器窗口尺寸就成為了棘手但卻是必須去做的事情。又由于這個問題同時又衍生出的新問題是軟件界面在自動適應時不同區域不會是等比縮放尺寸的，勢必有些區域隨之放大縮小而有些區域固定不變。這一點可以參照 C/S結構 軟件界面，以大家常用的網頁制作工具Dreamweaver為例，主要的代碼顯示區域是隨窗口尺寸的調整而調整，但上邊的菜單及功能按鈕區域、下邊的屬性及結果區域、右邊的功能區域都是固定不變的或者單方向調整的（只調整寬度或者高度） 。
布局結構。在布局上 B/S結構 軟件界面和網頁設計上有相同的地方，結構無非就是"上-中-下" "左-中-右"，更復雜的結構也可由這2種衍生出來。但由于上一條后半段的所指出的問題，在布局時我一般傾向于將區域分成兩類來對待：一類是主區域，頁面中一般只有一個主區域，用來顯示主要數據，當應對瀏覽器窗口尺寸變化時界面主區域隨之變化尺寸；另一類是輔區域，頁面中可以有多個輔區域，當應對瀏覽器窗口尺寸變化時界面輔區域固定不變或單方向調整。另外還有被我之前迫害了半天的滾動條。在 B/S結構 軟件界面中我建議盡量在同一界面上只使用一個滾動條或一對滾動條（X軸和Y軸），因為在同一界面上出現的多個滾動條會讓用戶感到茫然。如果其他區域有滾動顯示的需求時盡量用一些其他的方式來替代系統提供的滾動條。這唯一的滾動條一般被使用在主區域中，因為主區域即作為應對瀏覽器窗口尺寸變化而變化的區域，就表明了它可能對顯示內容有較大量的要求，在低分辨率或窗口尺寸較小下的情況下滾動條會幫助其來完成任務。有了這些只是X軸和Y軸的問題解決了，有時在 B/S結構 軟件界面實現中還要涉及Z軸的問題，這是網頁設計中一般較少見的。
開篇還沒寫什么呢就寫了這么多的閑話，我這個人就是這個優點：比較能跑題！閑話還是留著以后再說，先轉入正文吧！

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈