您的位置: 首页 > 技术文档 > 网页制作 > Position方式构建B/S结构软件界面
Web标准的web UI 回到列表 CSS模块化设计——从空格谈起
 Position方式构建B/S结构软件界面

作者:wiseinfo 时间: 2007-12-25 文档类型:原创 来自:蓝色理想

第 1 页 Position方式构建B/S结构软件界面 [1]
第 2 页 Position方式构建B/S结构软件界面 [2]
第 3 页 Position方式构建B/S结构软件界面 [3]
第 4 页 Position方式构建B/S结构软件界面 [4]
第 5 页 Position方式构建B/S结构软件界面 [5]

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://baike.baidu.com/view/679018.html

说完 B/S结构 让我们来说说既然 B/S结构 软件界面(其实就是一种特殊用途的网页)和普通网页有什么根本性的区别呢?

  1. 整页滚动。我个人不建议在 B/S结构 软件界面中使用整页滚动。因为浏览器滚动条的实在是为了当初方便阅读那些绵长的文章,这样的阅读习惯也促使了之后的网页也变得绵长。不过作为网页这也没什么不好(你完全可以将这理解为现实生活中把小说印在卫生纸上来供人们阅读,拉动滚动条就好像是向上抽出更长的卫生纸),但作为软件界面,其强调的更多是控制而不是阅读,整页滚动条就显得不那么合适宜了。在我的观念中软件界面设计时应尽可能的将一类操作在一个界面上显示出来,而不是还有一部分(也许这是更重的功能)隐藏在下面需要拉动滚动条(试想某个核大国的总统在按动核按钮后才发现滚动条,而下边的页面是警告说对方遭受核打击后很快会进行核报复…… 所以我们要坚决反对使用核武器 :p) 。即便是受到屏幕尺寸的制约也尽可能的使用局部滚动条或者干脆使用 Step-by-step方式 来解决。你什么时候看见操作系统(不论是糟糕的Win或是优秀的Mac)中在设置的界面中使用滚动条(有一个例外是iPhone,它在很多的设置界面中都使用了滚动条,但它有让人叫绝手指控制滚动的方式来弥补这一点) 。
  2. 尺寸适应。分辨率一直是困扰网页设计者的问题,在网页设计中大多还是集中在页面宽度的问题上。适应800px还是1024px,这就好像当年哈密雷特口中的 "To be or not to be",近年来随着显示器的变革这个问题还在愈演愈烈,除了刚刚说的2种分辨率,也许很多设计师脑中已经开始考虑1280px这个宽屏分辨率甚至更高的分辨率。当然也有的设计师干脆就只为800px,说这也是个不错的兼容性考虑,可惜我那1920px的显示器啊整天闲着两边。在 B/S结构 软件界面中从来没有这么简单的办法,因为复杂的功能可能有着大量的操作设置或数据显示,一丝一毫的空间都不容的浪费。并且上一条也指出我们不想用整页滚动条来解决问题,这带来的不单是显示面积的限制,还有就是我们需要考虑的是宽度和高度双重尺寸适应问题。不单单是显示器分辨率,当浏览器不是最大化时界面同样要适应(Mac系统根本就不存在最大化),也就是说界面要时时应对浏览器窗口尺寸大小而调整。所以利用一切可能的手段使页面可以自动适应浏览器窗口尺寸就成为了棘手但却是必须去做的事情。又由于这个问题同时又衍生出的新问题是软件界面在自动适应时不同区域不会是等比缩放尺寸的,势必有些区域随之放大缩小而有些区域固定不变。这一点可以参照 C/S结构 软件界面,以大家常用的网页制作工具Dreamweaver为例,主要的代码显示区域是随窗口尺寸的调整而调整,但上边的菜单及功能按钮区域、下边的属性及结果区域、右边的功能区域都是固定不变的或者单方向调整的(只调整宽度或者高度) 。
  3. 布局结构。在布局上 B/S结构 软件界面和网页设计上有相同的地方,结构无非就是"上-中-下" "左-中-右",更复杂的结构也可由这2种衍生出来。但由于上一条后半段的所指出的问题,在布局时我一般倾向于将区域分成两类来对待:一类是主区域,页面中一般只有一个主区域,用来显示主要数据,当应对浏览器窗口尺寸变化时界面主区域随之变化尺寸;另一类是辅区域,页面中可以有多个辅区域,当应对浏览器窗口尺寸变化时界面辅区域固定不变或单方向调整。另外还有被我之前迫害了半天的滚动条。在 B/S结构 软件界面中我建议尽量在同一界面上只使用一个滚动条或一对滚动条(X轴和Y轴),因为在同一界面上出现的多个滚动条会让用户感到茫然。如果其他区域有滚动显示的需求时尽量用一些其他的方式来替代系统提供的滚动条。这唯一的滚动条一般被使用在主区域中,因为主区域即作为应对浏览器窗口尺寸变化而变化的区域,就表明了它可能对显示内容有较大量的要求,在低分辨率或窗口尺寸较小下的情况下滚动条会帮助其来完成任务。有了这些只是X轴和Y轴的问题解决了,有时在 B/S结构 软件界面实现中还要涉及Z轴的问题,这是网页设计中一般较少见的。

开篇还没写什么呢就写了这么多的闲话,我这个人就是这个优点:比较能跑题!闲话还是留着以后再说,先转入正文吧!

出处:蓝色理想
责任编辑:moby

上一页 下一页 Position方式构建B/S结构软件界面 [2]

◎进入论坛网页制作WEB标准化版块参加讨论,我还想发表评论

相关文章 更多相关链接
土豆网前端概况
CSS实现文本渐变效果
CSS Hack整理
面向对象的XHTML与CSS编程
(100-1)% 的内容是导航
关键字搜索 常规搜索 推荐文档
热门搜索:CSS Fireworks 设计比赛 网页制作 web标准 用户体验 UE photoshop Dreamweaver Studio8 Flash 手绘 CG
站点最新 站点最新列表
周大福“敬•自然”设计大赛开启
国际体验设计大会7月将在京举行
中国国防科技信息中心标志征集
云计算如何让安全问题可控
云计算是多数企业唯一拥抱互联网的机会
阿里行云
云手机年终巨献,送礼标配299起
阿里巴巴CTO王坚的"云和互联网观"
1499元买真八核 云OS双蛋大促
首届COCO桌面手机主题设计大赛
栏目最新 栏目最新列表
浅谈JavaScript编程语言的编码规范
如何在illustrator中绘制台历
Ps简单绘制一个可爱的铅笔图标
数据同步算法研究
用ps作简单的作品展示页面
CSS定位机制之一:普通流
25个最佳最闪亮的Eclipse开发项目
Illustrator中制作针线缝制文字效果
Photoshop制作印刷凹凸字体
VS2010中创建自定义SQL Rule
>> 分页 首页 前页 后页 尾页 页次:1/51个记录/页 转到 页 共5个记录

蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。

转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。

特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。

您的评论
用户名:  口令:
说明:输入正确的用户名和密码才能参与评论。如果您不是本站会员,你可以注册 为本站会员。
注意:文章中的链接、内容等需要修改的错误,请用报告错误,以利文档及时修改。
不评分 1 2 3 4 5
注意:请不要在评论中含与内容无关的广告链接,违者封ID
请您注意:
·不良评论请用报告管理员,以利管理员及时删除。
·尊重网上道德,遵守中华人民共和国的各项有关法律法规
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·本站评论管理人员有权保留或删除其管辖评论中的任意内容
·您在本站发表的作品,本站有权在网站内转载或引用
·参与本评论即表明您已经阅读并接受上述条款
推荐文档 | 打印文档 | 评论文档 | 报告错误  
专业书推荐 更多内容
网站可用性测试及优化指南
《写给大家看的色彩书1》
《跟我去香港》
众妙之门—网站UI 设计之道
《Flex 4.0 RIA开发宝典》
《赢在设计》
犀利开发—jQuery内核详解与实践
作品集 更多内容

杂⑦杂⑧ Gold NORMANA V2