[ASP.NET]如何灵活定制皮肤/页面:布局设计器介绍
2007-02-06 09:22
169 查看
以前看过DotNetNuke 4(以下简称DNN)的部分源码,作为一个CMS它的实现无疑有很多值得借鉴的地方。个人比较注重页面的呈现部分,所以特别关注其中的换肤、布局等部分,虽然DNN的这方面的实现已经十分优秀,但是我认为还是有改进的地方的,这也是本文要介绍的主要内容:布局设计器!
那DNN在皮肤/布局方面到底有什么不好的呢?那就是,用户不能很方便地添加新的皮肤!要添加新的皮肤,只能是Web开发/设计人员设计添加新的用户控件(.ASCX,这是DNN皮肤的实现机制),并将相关的图片文件拷贝到Portals\*\Skins目录下,如果站点没有提供相关的上传功能的话,这项工作只能由管理员进行;而且修改起来也特别不方便,可能还需要重新上传。如果能够在线修改皮肤的布局和内容,那岂不是完美了么?!
为了达到以上目的,DNN那种将皮肤实现为“静态”的ascx形式显然不可取!大家知道,DNN的页面是通过将模块拖到指定皮肤上形成的,那么我们就模仿这种方式,就是说:皮肤是通过将模块拖放到一个空白页面形成的,这个空白页面已经由布局设计器拆分成特定的布局,如DNN内定的“三行,中间行分为三列”的标准布局(不知道怎么描述,大家能看懂么?我驾驭文笔的能力比较差的说!),当然,皮肤中应该留出一个或多个空白区域,让具体页面放置它们各自的内容。
如果理解了上面的描述的话,那么毫无疑问,第一步需要将空白页面拆成N个区域,然后才能往各个区域拖放模块形成皮肤。举个例子,我们将页面分成三行,然后往第一行和最后一行放置一个Html模块(看过DNN的人都应该知道这个模块的作用吧?!),然后编辑第一行的Html模块形成页头,编辑最后一行的Html模块形成页脚,哈哈,一个拥有页头、页脚,中间有个空白区域的皮肤就形成了!
目前我已经把布局编辑器封装成一个服务器端控件,利用ASP.NET 2.0引入的Callback特性,达到类似ajax的效果,演示截图如下:
结合布局设计器以及ASP.NET WebPart框架,我做了一个基本可用的例子,证明其可行性,下面是简单拆分成两列的效果(嘻嘻,好像丑了点,毕竟我不是美工,没有任何加工的嘛):
P.S. 以上均为个人学习研究结果,可能用于公司项目,不提供源码下载,不过实现也不复杂,想想我都能作,可见是多么简单啦,呵呵~~~
那DNN在皮肤/布局方面到底有什么不好的呢?那就是,用户不能很方便地添加新的皮肤!要添加新的皮肤,只能是Web开发/设计人员设计添加新的用户控件(.ASCX,这是DNN皮肤的实现机制),并将相关的图片文件拷贝到Portals\*\Skins目录下,如果站点没有提供相关的上传功能的话,这项工作只能由管理员进行;而且修改起来也特别不方便,可能还需要重新上传。如果能够在线修改皮肤的布局和内容,那岂不是完美了么?!
为了达到以上目的,DNN那种将皮肤实现为“静态”的ascx形式显然不可取!大家知道,DNN的页面是通过将模块拖到指定皮肤上形成的,那么我们就模仿这种方式,就是说:皮肤是通过将模块拖放到一个空白页面形成的,这个空白页面已经由布局设计器拆分成特定的布局,如DNN内定的“三行,中间行分为三列”的标准布局(不知道怎么描述,大家能看懂么?我驾驭文笔的能力比较差的说!),当然,皮肤中应该留出一个或多个空白区域,让具体页面放置它们各自的内容。
如果理解了上面的描述的话,那么毫无疑问,第一步需要将空白页面拆成N个区域,然后才能往各个区域拖放模块形成皮肤。举个例子,我们将页面分成三行,然后往第一行和最后一行放置一个Html模块(看过DNN的人都应该知道这个模块的作用吧?!),然后编辑第一行的Html模块形成页头,编辑最后一行的Html模块形成页脚,哈哈,一个拥有页头、页脚,中间有个空白区域的皮肤就形成了!
目前我已经把布局编辑器封装成一个服务器端控件,利用ASP.NET 2.0引入的Callback特性,达到类似ajax的效果,演示截图如下:
结合布局设计器以及ASP.NET WebPart框架,我做了一个基本可用的例子,证明其可行性,下面是简单拆分成两列的效果(嘻嘻,好像丑了点,毕竟我不是美工,没有任何加工的嘛):
P.S. 以上均为个人学习研究结果,可能用于公司项目,不提供源码下载,不过实现也不复杂,想想我都能作,可见是多么简单啦,呵呵~~~
相关文章推荐
- [ASP.NET]如何灵活定制皮肤/页面:布局设计器介绍
- 如何在ASP.NET Web站点中统一页面布局[Creating a Consistent Layout in ASP.NET Web Pages(Razor) Sites]
- VS2008 在进行ASP.NET 开发时 如何避免加载设计页面时假死及减少保存所耗的时间。
- Asp.net页面布局设计中的心得
- 如何让asp.net mvc 直接运行mobile页面
- 技巧:Silverlight应用程序中如何获取ASP.NET页面参数
- 如何将asp.net的后台cs代码移动到页面上
- 对于长时间装载的ASP.NET页面如何在客户端浏览器中显示进度?
- 如何在Asp.net 页面中添加CSS和JS的引用, 使得不是文件路径的限制
- 如何在ASP.NET页面中使用异步任务(PageAsyncTask)
- 如何在Asp.Net下遍历指定页面上的所有控件
- ASP.NET定制简单的错误处理页面
- 如何用SQLDMO在ASP.NET页面下实现数据库的备份与恢复
- asp.net基础学习之前端页面布局
- 我是如何解决asp.net程序在dreamWeaver中布局乱码的问题
- 如何将ASP.NET页面保存为HTML文件
- HTML控件ID和NAME属性的区别,以及如何在asp.net页面的.CS文件中获得.ASPX页面中HTML控件的值
- ASP.NET 2.0的页面缓存功能介绍 [转]
- asp.net mvc 如何在执行完某任务后返回原来页面
- VS2008 Tips #008 如何创建ASP.NET Web 用户控件并包含在Web 页面中