WEB2.0站中的layout个性化定制探讨(想说web开发系列之一)

  决定也开始写博了。抽点时间整理下自己开发过程中遇到的技术问题及个人经验。这是本人《想说web开发不容易》第一篇。

   随着web2.0概念的新起.网站的功能设计越来越趋势以用户设计为中心了.为了留住用户的心,各大网站争出奇招；用户体验、易用性现在已成为各产品经理及开发人员的常用语，今天你体验了吗？

AJAX、FLEX、JFX、Silverlight各大帮派悍然争霸，正是那俗语说得好，兴、苦也咱编码，亡、也苦咱编码老百姓，这不。主流的汹风作浪，我们也开始赶躺潮流，起得早不如起得巧，今日项目组召集各位奋斗在编码一线的开发人员相聚一堂。话说咱们项目中这个博客，相册什么的，空间也该来过拖拽布局玩玩。再来过自定义模版、CSS什么的，功能咱也一个也不能少，然后再曰公司宗旨“明明白白留住用户的心”，大家一番大眼瞪小眼后，为哙这玩意儿虽说不困难，但麻烦呀，也罢，一切为了和谐。言罢归正题，这个性化定制这个过程，要涉及到三方面的内容，即主题（模版）、模块、版式.具体我们讨论它的一些主要实现思路。先声明下以下还仅为个人功能实现前的一些构思，未成熟前请勿采用。

  首要问题是版式布局：我的初步构想如，暂支持三种页面版式，三栏布局，二栏左布局，二栏右布局，CSS的第一种写法就是先把三栏的CSS都写出来，然后依据需要隐藏对应一栏的CSS，另一种写法是写三套CSS。两个方法各有千秋，请大家发表看法，如果您有好的构思，可以奉献一下大家讨论。

 版式布局无了，通常还有模块的布局。一般为了易用性及用户体验都采用拖拽模块来进行其版式布局，该功能目前已经较为常见，有些哥们也实现过。但对我来说是第一次接触。拖拽容易。但布局的记忆保存却愁坏了我，因为已经有了很多现有模版主题，现在要新增加版式布局及模块布局，兼容以前的模版真是个难题。拖拽模块后，别忘记保存其模块的排列顺序。这部分实现我的个人想法，第一种方式，关系数据库保存，首先要依据它的版式来采用。是三栏还是二栏的，一个LAOYUT表，其中主要有四个字段，（USER_ID,LAYOUT_LEFT,LAYOUT_CENTER,LAYOUT_RIGHT），然后把模块之间用空格或者逗号分隔保存到对应的边栏当中，推荐用空格间隔（理由全半角问题）,第二种方式就是XML。父子节点。个性化定制实现了这两块主要的操作其它方面就开发就如苞丁解牛.说白了就是一个CSS程序化的过程。

如有不当。待大家指正，欢迎一起讨论。一起成长。

云淡风轻（MSN:aithero#hotmail.com）

 

 

一个LAOYUT表，其中主要有四个字段，（USER_ID,LAYOUT_LEFT,LAYOUT_CENTER,LAYOUT_RIGHT）


LayoutId,User_Id,LayoutPos


最近我开始在写一个论坛,由于自己版面很弱(但把版面转成页面功底还可以,^_^,自我感觉CSS还学得可以),做不出精美的页面,就完全仿照javaeye的论坛风格,现在在开始论坛的编码,论坛做完后准备再开发一博客系统
其中也包括拖动,自定义的个性化,并取用右键菜单效果,更体出现人性化.

我是先做数据库,然后再做程序的.
数据库(MySql)表的设计大致(原数据库不在公司电脑上)如下:
这是一个用户页面布局容器自定义的记录表
LayoutId,User_Id,LayoutPos,LayoutCss

以下是用户创建的小窗口记录表
DivId,User_Id,LayoutId,DivCss,DivTitle,DivContent,ReferId,IsPublic(是否公开,公开后别人可调用该div中的内容,引用此DivContent即可)

其中,
DivContent我打算全部记录调用的JS(这样做是为了以后用户可以调用别人公开的内容快),例如(<script language='javascript' src='../manoeuvreJs/photo.do'></script>)

用户在设置每个窗口内容时根据系统产生的js记录到对应的窗口内容中

ReferId 为引用ID,如果该ID不为空,则取用该引用ID的对应的DivContent中内容值,同时isPublic为不公开(只有当是调用自己的内容时才可公开),否则直接取用本DivContent的值


该系统开发完后将会开源

由于是第一次用java写这种系统,性能优化方面考虑不周,届时还请各位多多指点

你的意思是用户针对每个模块都可单独设定CSS么?如果是的话,这样表设计的意图何在呢?如果是单个模块的自定义CSS.我们可以抽象出来两部分,一部分是模块的主题样式,如标题颜色，字体。背景图。模块背景色，背景图等等。如果要像你的表设计，我没理解错的话，就分别得对应一个字段了。个人觉得没必要，我们一个字段就可以把它的CSS全保存下来。然后针对这个字段中的CSS修改即可。事实上很多大站都是这么干的

LayoutId,User_Id,LayoutPos,LayoutCss
这个表是用来在页面由用户划分区域的,就是你所说的"三栏布局，二栏左布局，二栏右布局",一个Layout表示一栏

而DivId,User_Id,LayoutId,DivCss,DivTitle,DivContent,ReferId,IsPublic
这个表是Layout(栏)中的div,也就是Layout里面可拖动的对象
其中divcss是你所说的定义该div的样式(css,可设置各部分的css,如你所说:标题颜色,字体,背景图...)列,而DivTitle并不是样式,而是某个Div的标题,比如说,我要创建一个新闻组,那么我就可以设置该DivTitle为"实时新闻",DivContent就是内容了
也就是说,该DIV的CSS全部存放在divcss里面了