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


閑話：

既然我們是在說(shuō) B/S結(jié)構(gòu) 軟件界面的構(gòu)建，那就先來(lái)介紹一下 B/S結(jié)構(gòu) 吧！

B/S結(jié)構(gòu)（Browser/Server結(jié)構(gòu)） 即 瀏覽器和服務(wù)器結(jié)構(gòu) 。它是隨著Internet技術(shù)的興起，對(duì) C/S結(jié)構(gòu)（Client/Server結(jié)構(gòu)） 的一種變化或者改進(jìn)的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶工作界面是通過(guò)瀏覽器來(lái)實(shí)現(xiàn)（也就是說(shuō) B/S結(jié)構(gòu) 軟件界面可以被理解為是建立在現(xiàn)有瀏覽器所能解釋的 Html；CSS；Scrip等基礎(chǔ)之上特殊的網(wǎng)頁(yè)），這也就使得其具有了 C/S結(jié)構(gòu) 所不能比擬的跨平臺(tái)性等優(yōu)勢(shì)…… （詳見(jiàn)： http://baike.baidu.com/view/679018.html）

說(shuō)完 B/S結(jié)構(gòu) 讓我們來(lái)說(shuō)說(shuō)既然 B/S結(jié)構(gòu) 軟件界面（其實(shí)就是一種特殊用途的網(wǎng)頁(yè)）和普通網(wǎng)頁(yè)有什么根本性的區(qū)別呢？

一、整頁(yè)滾動(dòng)。我個(gè)人不建議在 B/S結(jié)構(gòu) 軟件界面中使用整頁(yè)滾動(dòng)。因?yàn)闉g覽器滾動(dòng)條的實(shí)在是為了當(dāng)初方便閱讀那些綿長(zhǎng)的文章，這樣的閱讀習(xí)慣也促使了之后的網(wǎng)頁(yè)也變得綿長(zhǎng)。不過(guò)作為網(wǎng)頁(yè)這也沒(méi)什么不好（你完全可以將這理解為現(xiàn)實(shí)生活中把小說(shuō)印在衛(wèi)生紙上來(lái)供人們閱讀，拉動(dòng)滾動(dòng)條就好像是向上抽出更長(zhǎng)的衛(wèi)生紙），但作為軟件界面，其強(qiáng)調(diào)的更多是控制而不是閱讀，整頁(yè)滾動(dòng)條就顯得不那么合適宜了。在我的觀念中軟件界面設(shè)計(jì)時(shí)應(yīng)盡可能的將一類操作在一個(gè)界面上顯示出來(lái)，而不是還有一部分（也許這是更重的功能）隱藏在下面需要拉動(dòng)滾動(dòng)條（試想某個(gè)核大國(guó)的總統(tǒng)在按動(dòng)核按鈕后才發(fā)現(xiàn)滾動(dòng)條，而下邊的頁(yè)面是警告說(shuō)對(duì)方遭受核打擊后很快會(huì)進(jìn)行核報(bào)復(fù)…… 所以我們要堅(jiān)決反對(duì)使用核武器 ：p） 。即便是受到屏幕尺寸的制約也盡可能的使用局部滾動(dòng)條或者干脆使用 Step-by-step方式 來(lái)解決。你什么時(shí)候看見(jiàn)操作系統(tǒng)（不論是糟糕的Win或是優(yōu)秀的Mac）中在設(shè)置的界面中使用滾動(dòng)條（有一個(gè)例外是iPhone，它在很多的設(shè)置界面中都使用了滾動(dòng)條，但它有讓人叫絕手指控制滾動(dòng)的方式來(lái)彌補(bǔ)這一點(diǎn)） 。

二、尺寸適應(yīng)。分辨率一直是困擾網(wǎng)頁(yè)設(shè)計(jì)者的問(wèn)題，在網(wǎng)頁(yè)設(shè)計(jì)中大多還是集中在頁(yè)面寬度的問(wèn)題上。適應(yīng)800px還是1024px，這就好像當(dāng)年哈密雷特口中的 "To be or not to be"，近年來(lái)隨著顯示器的變革這個(gè)問(wèn)題還在愈演愈烈，除了剛剛說(shuō)的2種分辨率，也許很多設(shè)計(jì)師腦中已經(jīng)開(kāi)始考慮1280px這個(gè)寬屏分辨率甚至更高的分辨率。當(dāng)然也有的設(shè)計(jì)師干脆就只為800px，說(shuō)這也是個(gè)不錯(cuò)的兼容性考慮，可惜我那1920px的顯示器啊整天閑著兩邊。在 B/S結(jié)構(gòu) 軟件界面中從來(lái)沒(méi)有這么簡(jiǎn)單的辦法，因?yàn)閺?fù)雜的功能可能有著大量的操作設(shè)置或數(shù)據(jù)顯示，一絲一毫的空間都不容的浪費(fèi)。并且上一條也指出我們不想用整頁(yè)滾動(dòng)條來(lái)解決問(wèn)題，這帶來(lái)的不單是顯示面積的限制，還有就是我們需要考慮的是寬度和高度雙重尺寸適應(yīng)問(wèn)題。不單單是顯示器分辨率，當(dāng)瀏覽器不是最大化時(shí)界面同樣要適應(yīng)（Mac系統(tǒng)根本就不存在最大化），也就是說(shuō)界面要時(shí)時(shí)應(yīng)對(duì)瀏覽器窗口尺寸大小而調(diào)整。所以利用一切可能的手段使頁(yè)面可以自動(dòng)適應(yīng)瀏覽器窗口尺寸就成為了棘手但卻是必須去做的事情。又由于這個(gè)問(wèn)題同時(shí)又衍生出的新問(wèn)題是軟件界面在自動(dòng)適應(yīng)時(shí)不同區(qū)域不會(huì)是等比縮放尺寸的，勢(shì)必有些區(qū)域隨之放大縮小而有些區(qū)域固定不變。這一點(diǎn)可以參照 C/S結(jié)構(gòu) 軟件界面，以大家常用的網(wǎng)頁(yè)制作工具Dreamweaver為例，主要的代碼顯示區(qū)域是隨窗口尺寸的調(diào)整而調(diào)整，但上邊的菜單及功能按鈕區(qū)域、下邊的屬性及結(jié)果區(qū)域、右邊的功能區(qū)域都是固定不變的或者單方向調(diào)整的（只調(diào)整寬度或者高度） 。

三、布局結(jié)構(gòu)。在布局上 B/S結(jié)構(gòu) 軟件界面和網(wǎng)頁(yè)設(shè)計(jì)上有相同的地方，結(jié)構(gòu)無(wú)非就是"上-中-下" "左-中-右"，更復(fù)雜的結(jié)構(gòu)也可由這2種衍生出來(lái)。但由于上一條后半段的所指出的問(wèn)題，在布局時(shí)我一般傾向于將區(qū)域分成兩類來(lái)對(duì)待：一類是主區(qū)域，頁(yè)面中一般只有一個(gè)主區(qū)域，用來(lái)顯示主要數(shù)據(jù)，當(dāng)應(yīng)對(duì)瀏覽器窗口尺寸變化時(shí)界面主區(qū)域隨之變化尺寸；另一類是輔區(qū)域，頁(yè)面中可以有多個(gè)輔區(qū)域，當(dāng)應(yīng)對(duì)瀏覽器窗口尺寸變化時(shí)界面輔區(qū)域固定不變或單方向調(diào)整。另外還有被我之前迫害了半天的滾動(dòng)條。在 B/S結(jié)構(gòu) 軟件界面中我建議盡量在同一界面上只使用一個(gè)滾動(dòng)條或一對(duì)滾動(dòng)條（X軸和Y軸），因?yàn)樵谕�一界面上出現(xiàn)的多個(gè)滾動(dòng)條會(huì)讓用戶感到茫然。如果其他區(qū)域有滾動(dòng)顯示的需求時(shí)盡量用一些其他的方式來(lái)替代系統(tǒng)提供的滾動(dòng)條。這唯一的滾動(dòng)條一般被使用在主區(qū)域中，因?yàn)橹鲄^(qū)域即作為應(yīng)對(duì)瀏覽器窗口尺寸變化而變化的區(qū)域，就表明了它可能對(duì)顯示內(nèi)容有較大量的要求，在低分辨率或窗口尺寸較小下的情況下滾動(dòng)條會(huì)幫助其來(lái)完成任務(wù)。有了這些只是X軸和Y軸的問(wèn)題解決了，有時(shí)在 B/S結(jié)構(gòu) 軟件界面實(shí)現(xiàn)中還要涉及Z軸的問(wèn)題，這是網(wǎng)頁(yè)設(shè)計(jì)中一般較少見(jiàn)的。

開(kāi)篇還沒(méi)寫(xiě)什么呢就寫(xiě)了這么多的閑話，我這個(gè)人就是這個(gè)優(yōu)點(diǎn)：比較能跑題！閑話還是留著以后再說(shuō)，先轉(zhuǎn)入正文吧！