|
Html+CSS 在 網(wǎng)頁構(gòu)建（Web Page Building） 中的應(yīng)用已經(jīng)不是什么新鮮事了。輕盈的 Div布局 方式替換了笨重 Table布局 方式。而在 Div布局 方面多數(shù)人使用的是 float方式 ，Div 在 float 的控制下忽左忽右好不自在。但我們今天要說的不是 網(wǎng)頁構(gòu)建 ，而是 B/S結(jié)構(gòu) 軟件界面構(gòu)建。所以我想介紹另外一種方式 position方式 。我個人比較喜歡這種方式，雖然很多人認為把 Div 的 position屬性 設(shè)置為 absolute 后用 top屬性 和 left屬性 在頁面中隨意定位進行布局是一種極端菜鳥的方式，但在 B/S結(jié)構(gòu) 軟件界面構(gòu)建過程中這種 position方式 的靈活絕對會給你帶來意想不到的效果。當然我所說所寫 position方式 還存在很多的不足之處，這只是為了拋磚引玉，來給大家打開一個話題。
閑話：
既然我們是在說 B/S結(jié)構(gòu) 軟件界面的構(gòu)建，那就先來介紹一下 B/S結(jié)構(gòu) 吧！
B/S結(jié)構(gòu)（Browser/Server結(jié)構(gòu)） 即 瀏覽器和服務(wù)器結(jié)構(gòu) 。它是隨著Internet技術(shù)的興起，對 C/S結(jié)構(gòu)（Client/Server結(jié)構(gòu)） 的一種變化或者改進的結(jié)構(gòu)。在這種結(jié)構(gòu)下，用戶工作界面是通過瀏覽器來實現(xiàn)（也就是說 B/S結(jié)構(gòu) 軟件界面可以被理解為是建立在現(xiàn)有瀏覽器所能解釋的 Html；CSS；Scrip等基礎(chǔ)之上特殊的網(wǎng)頁），這也就使得其具有了 C/S結(jié)構(gòu) 所不能比擬的跨平臺性等優(yōu)勢…… （詳見： http://baike.baidu.com/view/679018.html）
說完 B/S結(jié)構(gòu) 讓我們來說說既然 B/S結(jié)構(gòu) 軟件界面（其實就是一種特殊用途的網(wǎng)頁）和普通網(wǎng)頁有什么根本性的區(qū)別呢？
- 整頁滾動。我個人不建議在 B/S結(jié)構(gòu) 軟件界面中使用整頁滾動。因為瀏覽器滾動條的實在是為了當初方便閱讀那些綿長的文章，這樣的閱讀習慣也促使了之后的網(wǎng)頁也變得綿長。不過作為網(wǎng)頁這也沒什么不好（你完全可以將這理解為現(xiàn)實生活中把小說印在衛(wèi)生紙上來供人們閱讀，拉動滾動條就好像是向上抽出更長的衛(wèi)生紙），但作為軟件界面，其強調(diào)的更多是控制而不是閱讀，整頁滾動條就顯得不那么合適宜了。在我的觀念中軟件界面設(shè)計時應(yīng)盡可能的將一類操作在一個界面上顯示出來，而不是還有一部分（也許這是更重的功能）隱藏在下面需要拉動滾動條（試想某個核大國的總統(tǒng)在按動核按鈕后才發(fā)現(xiàn)滾動條，而下邊的頁面是警告說對方遭受核打擊后很快會進行核報復(fù)…… 所以我們要堅決反對使用核武器 ：p） 。即便是受到屏幕尺寸的制約也盡可能的使用局部滾動條或者干脆使用 Step-by-step方式 來解決。你什么時候看見操作系統(tǒng)（不論是糟糕的Win或是優(yōu)秀的Mac）中在設(shè)置的界面中使用滾動條（有一個例外是iPhone，它在很多的設(shè)置界面中都使用了滾動條，但它有讓人叫絕手指控制滾動的方式來彌補這一點） 。
- 尺寸適應(yīng)。分辨率一直是困擾網(wǎng)頁設(shè)計者的問題，在網(wǎng)頁設(shè)計中大多還是集中在頁面寬度的問題上。適應(yīng)800px還是1024px，這就好像當年哈密雷特口中的 "To be or not to be"，近年來隨著顯示器的變革這個問題還在愈演愈烈，除了剛剛說的2種分辨率，也許很多設(shè)計師腦中已經(jīng)開始考慮1280px這個寬屏分辨率甚至更高的分辨率。當然也有的設(shè)計師干脆就只為800px，說這也是個不錯的兼容性考慮，可惜我那1920px的顯示器啊整天閑著兩邊。在 B/S結(jié)構(gòu) 軟件界面中從來沒有這么簡單的辦法，因為復(fù)雜的功能可能有著大量的操作設(shè)置或數(shù)據(jù)顯示，一絲一毫的空間都不容的浪費。并且上一條也指出我們不想用整頁滾動條來解決問題，這帶來的不單是顯示面積的限制，還有就是我們需要考慮的是寬度和高度雙重尺寸適應(yīng)問題。不單單是顯示器分辨率，當瀏覽器不是最大化時界面同樣要適應(yīng)（Mac系統(tǒng)根本就不存在最大化），也就是說界面要時時應(yīng)對瀏覽器窗口尺寸大小而調(diào)整。所以利用一切可能的手段使頁面可以自動適應(yīng)瀏覽器窗口尺寸就成為了棘手但卻是必須去做的事情。又由于這個問題同時又衍生出的新問題是軟件界面在自動適應(yīng)時不同區(qū)域不會是等比縮放尺寸的，勢必有些區(qū)域隨之放大縮小而有些區(qū)域固定不變。這一點可以參照 C/S結(jié)構(gòu) 軟件界面，以大家常用的網(wǎng)頁制作工具Dreamweaver為例，主要的代碼顯示區(qū)域是隨窗口尺寸的調(diào)整而調(diào)整，但上邊的菜單及功能按鈕區(qū)域、下邊的屬性及結(jié)果區(qū)域、右邊的功能區(qū)域都是固定不變的或者單方向調(diào)整的（只調(diào)整寬度或者高度） 。
- 布局結(jié)構(gòu)。在布局上 B/S結(jié)構(gòu) 軟件界面和網(wǎng)頁設(shè)計上有相同的地方，結(jié)構(gòu)無非就是"上-中-下" "左-中-右"，更復(fù)雜的結(jié)構(gòu)也可由這2種衍生出來。但由于上一條后半段的所指出的問題，在布局時我一般傾向于將區(qū)域分成兩類來對待：一類是主區(qū)域，頁面中一般只有一個主區(qū)域，用來顯示主要數(shù)據(jù)，當應(yīng)對瀏覽器窗口尺寸變化時界面主區(qū)域隨之變化尺寸；另一類是輔區(qū)域，頁面中可以有多個輔區(qū)域，當應(yīng)對瀏覽器窗口尺寸變化時界面輔區(qū)域固定不變或單方向調(diào)整。另外還有被我之前迫害了半天的滾動條。在 B/S結(jié)構(gòu) 軟件界面中我建議盡量在同一界面上只使用一個滾動條或一對滾動條（X軸和Y軸），因為在同一界面上出現(xiàn)的多個滾動條會讓用戶感到茫然。如果其他區(qū)域有滾動顯示的需求時盡量用一些其他的方式來替代系統(tǒng)提供的滾動條。這唯一的滾動條一般被使用在主區(qū)域中，因為主區(qū)域即作為應(yīng)對瀏覽器窗口尺寸變化而變化的區(qū)域，就表明了它可能對顯示內(nèi)容有較大量的要求，在低分辨率或窗口尺寸較小下的情況下滾動條會幫助其來完成任務(wù)。有了這些只是X軸和Y軸的問題解決了，有時在 B/S結(jié)構(gòu) 軟件界面實現(xiàn)中還要涉及Z軸的問題，這是網(wǎng)頁設(shè)計中一般較少見的。
開篇還沒寫什么呢就寫了這么多的閑話，我這個人就是這個優(yōu)點：比較能跑題！閑話還是留著以后再說，先轉(zhuǎn)入正文吧！
出處：藍色理想
責任編輯：moby
上一頁 下一頁 Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面 [2]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 Position方式構(gòu)建B/S結(jié)構(gòu)軟件界面 [1]
第 2 頁 
