Html+CSS构建BS结构软件界面--布局篇.PDF

Html+CSS 构建 B/S 结构软件界面 -- 布局篇 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 结构 所不能 比拟的跨平台性等优势 （详见 ：http :/// view/ 679018.html ） 说完 B/S 结构 让我们来说说既然 B/S 结构 软件界面（其实就是一种特殊用途的网页）和普通 网页有什么根本性的区别呢？ 一、整页滚动。我个人不建议在 B/S 结构 软件界面中使用整页滚动。因为浏览器滚动条 的实在是为了当初方便阅读那些绵长的文章 ，这样的阅读习惯也促使了之后的网页也变得绵 长。不过作为网页这也没什么不好（你完全可以将这理解为现实生活中把小说印在卫生纸上来供人们 阅读 ，拉动滚动条就好像是向上抽出更长的卫生纸），但作为软件界面 ，其强调的更多是控制而不 Total Pages: 20 Page : 1 是阅读 ，整页滚动条就显得不那么合适宜了。在我的观念中软件界面设计时应尽可能的将一 类操作在一个界面上显示出来 ，而不是还有一部分（也许这是更重的功能）隐藏在下面需要拉 动滚动条（试想某个核大国的总统在按动核按钮后才发现滚动条 ，而下边的页面是警告说对方遭受核打 击后很快会进行核报复所以我们要坚决反对使用核武器 ：p ）。即便是受到屏幕尺寸的制约也 尽可能的使用局部滚动条或者干脆使用 Step-by-step 方式 来解决。你什么时候看见操作 系统（不论是糟糕的 Win 或是优秀的Mac ）中在设置的界面中使用滚动条（有一个例外是iPhone ， 它在很多的设置界面中都使用了滚动条 ，但它有让人叫绝手指控制滚动的方式来弥补这一点）。 二、尺寸适应。分辨率一直是困扰网页设计者的问题 ，在网页设计中大多还是集中在页面宽 度的问题上。适应 800px 还是 1024px ，这就好像当年哈密雷特口中的 To be or not to be ，近年来随着显示器的变革这个问题还在愈演愈烈 ，除了刚刚说的2 种分辨率 ，也 许很多设计师脑中已经开始考虑 1280px 这个宽屏分辨率甚至更高的分辨率。当然也有的 设计师干脆就只为 800px ，说这也是个不错的兼容性考虑 ，可惜我那 1920px 的显示器 啊整天闲着两边。在 B/S 结构 软件界面中从来没有这么简单的办法 ，因为复杂的功能可 能有着大量的 操作设置 或 数据显示 ，一丝一毫的空间都不容的浪费。并且上一条也指出 我们不想用整页滚动条来解决问题 ，这带来的不单是显示面积的限制 ，还有就是我们需要考 虑的是宽度和高度双重尺寸适应问题。不单单是显示器分辨率 ，当浏览器不是最大化时界面 同样要适应 （Mac 系统根本就不存在最大化），也就是说界面要时时应对浏览器窗口尺寸大小而 调整。所以利用一切可能的手段使页面可以自动适应浏览器窗口尺寸就成为了棘手但却是必 须去做的事情。又由于这个问题同时又衍生出的新问题是软件界面在自动适应时不同区域不 会是等比缩放尺寸的 ，势必有些区域随