vs2005 + ASP.NET 页面布局应注意问题及方法步骤

假如是一个人负责前后台,而又对后台开发比较在行,可以从后到前,也就是——
1、用vs开发业务功能,注重“尽量不要”为服务器控件设置任何样式(字体、颜色、长宽、坐标、边框、间隔、空白……)
2、可以用模板页控件(MasterPage)定义布局
3、在1、2的基础上使用css为最终的html内容赋予样式外观。这一步可以完全脱离vs的后台开发环境,只要使用浏览器正常访问功能已经完备的web应用,得到具有代表性窗体的html源代码,然后用任何设计工具对css进行定义

假如是团队开发,界面设计和业务实现的分工比较明确,就应该事先为两者的工作内容制定一个接口——一套让界面设计师能够测试设计效果、让业务实现者(窗体/用户控件/服务器控件开发人员)作为输出目标的html范本

例::当你开发web应用程序的时候,静态页设计是个“效果图”,内容是死的。而不可能保证是真正的结果。例如你使用到了GridView,那么你可能就答应用户在界面上选择行数,例如有的人屏幕小或者等原因也许仅需要显示15行,有的人需要就是希望直接看到200行。那么很自然,假如你的页面是个的实用的应用,页面上有十多种对象图形存在,自然这个GridView变高了其它的就要挪位置了。
再比如左边是GridView右边是DetailsView,那么应该它们的宽度应该自动调整。假如不能自动调整,但是随着每一次交互造成内容大面积变化,原来的布局多么难看呀。

 

 

 

原先学习网站制作的时候,整体的布局都是用<table>嵌套,通过修改width和height的值来一点一点调解出自己想要得样子,

现在用asp做网站的过程中,HTML的height属性是无效属性,在VS中,表格高度是自动调整的,而且若是开始没有计算好单元格的宽度,

后期用鼠标拖动修改就会出现很奇怪的现象,如:想调小某个单元格,结果同表能的其他单元格全变了,

而且从源里面看几乎所有的<td>都加上了width属性,要是刚开始用脑袋都大了,估计你的时间都用在调整布局和控制表格嵌套上面了,

说了这么多都看不耐烦了吧,那么现在就介绍下怎么避免和快速的布局,

现在用的就是div+css进行布局的,表格的唯一用途就是最外围的框架,


 <div style="text-align: center">
            <table border="0" cellpadding="0" cellspacing="0" style="width: 800pt">
            </table>
     <table border="0" cellpadding="0" cellspacing="0" style="width: 800pt">
            </table>
     <table border="0" cellpadding="0" cellspacing="0" style="width: 800pt">
            </table>
 </div>

然后<table></table>标签里面再用<div></div>,而且最好不要用一张表(一张表有时候需要上下两列的单元格不一宽度效果做不出来),

这样用table确定了大体的框架,然后就在其内部用div摆放各种控件了,要是出现了单元格宽度不够了千万不要用鼠标拖动,

要一动前面条好的都乱了,这里要去源里面找到对应单元格位置调整其width的值,要是需求更多的样式,就加入CSS,在这里就不详细介绍CSS了,

这样使用DIV+CSS进行布局操作,既迅速又方便,就不用费那么多宝贵的时间来调整布局了!

看完文章明白了吧,其实现在主流就是div,不信你去门户网站上看看,我曾经看过淘宝的打开首页看原文件结果满屏幕div没有发现table的踪迹

后来又看过其他门户网站的结果几乎找不到table,所以大家多练练,改朝换代了若是你多用用会发现div其实很强大的~嘿嘿

 

posted @ 2009-04-11 15:34  华育国际上海软件校区  阅读(1823)  评论(1编辑  收藏  举报