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轴的问题，这是网页设计中一般较少见的。
开篇还没写什么呢就写了这么多的闲话，我这个人就是这个优点：比较能跑题！闲话还是留着以后再说，先转入正文吧！

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠