关于页面开发的一些讨论。

页面的开发是项目中比较费事的，需要程序员和美工有比较好的合作，而且这一部分的变更比较频繁自然造成频繁的修改页面，那真是很痛苦，这一部分有点纯体力活的味道但也最花时间，然而最终展示给用户的是页面所以你还不能不改。下面我就这个问题谈以下自己的一些心得体会，欢迎大家就这个问题讨论。
1：首先我觉得布局很重要，也就是说要把页面合理的划分为几个区，这其中正常来说只有一两个区是非公共区，对于公共区，我们要可以使用DW的模板功能或者是Struts中的Tiles定义好各个区，使得公共区的修改可以只更改少数的几个文件而不是更改全部。
2：CSS的使用，CSS的使用是为了达到风格的统一，这样的话有几点必须遵守。
   a:对相同类型的元素使用同样的的CSS.比如对于输入域我都使用class="cssText" ,select:cssSelect ....
    b:对相同类型的元素使用同样的ID,因为我们可以为id设定css.
    c:css尽可能细化这和a有点矛盾，因为a是考虑通用，这点考虑特殊。比如说对于input 在无特殊情况下，我考虑使用cssText,但我会为input定义几个css ,如：input.cssText:一般输入，input.cssPass： 输入密码 ,input.cssRead：只读，不能输入.

3:元素的分割和统一，比如说对于table 我会很严格的划分三个块，使用thead,tbody,tfoot。而且使用同样的id来标记。
4:尽可能的熟练使用HTML中的一些元素，比如caption ,通常来说每个页面我们都会有一个说明，如用户列表页面，会在列表前有一个说明，这个说明建议你使用<caption>用户列表</caption>，因为每一个列表的列是不一样的，假如使用<td colspan="4"></td>那colspan是很有可能要修改的，因为有时候会增加或减少列。但忘记修改colspan.还有<col>可以用来为一列做式样，比如显示数字，通常要求向右靠齐，那使用<col>就不用为每一行去设定。

其实最重要的是每个程序员都会遵守这些约定。并且慢慢的形成规范，那样的话就可以减少很多工作两，而且可以一直使用。

非常同意你的意见。
同样使用这些技术，好的项目组与差的项目组，效率可以有数量级上的差别，质量更是天差地远。关键就在于有没有一套科学合理的内部约定，以及这些约是否得到贯彻。

孤魂先生，您在上页面设计的美工课程吧。

不好意思我是一个不怎么合格的Java程序员，我一直认为从大局考虑，程序员比美工强，我很少见美工可以对一个项目的页面做一个整体的、综合的考虑，但程序员可以做到。因为程序员，这里可能是SA，你直接面对客户，你知道客户的想法，所以你应该很清楚整个项目的页面布局。如果我们使用原型法在做售前的时候给客户做一些演示，在项目还没有启动前我就知道整个项目的页面应该怎么去布局，接下来是美工做美化工作，其他的我不需要他的参与。

我记得 HTML DOM 中对 id 是要求唯一的, 在一个页面中多个元素使用相同的 id 是不是不妥?

当然象 IE 这样 id / name 不分, 所以这样当然也是可以 work 的, 不过, 和标准冲突总是不好的, 不是所有的浏览器都保证这一点的.

是指不同的页面，一个页面使用同样的id会乱的。比如对与tfoot,通常button在这里面，那就可以对所有的页面的tfoot使用同一个id.

一笑兄的html造诣确实值得佩服,我现在偶为html的时候，还是只看name而不看id的。

可是我们招JAVA程序员的时候,从来没考HTML的；招SA的时候，也不会问HTML的；只有招美工的时候，我们会考html，你说的html功力和页面布局素质，对于美工组的组长来说，确确实实是非常重要的。

所以我认为，你说的是一个合格美工需要的东西，而不是一个程序员需要的素质，当然在小公司里面，说不定就是SA，程序员，WD三位一体，但是还请不要把这个当成根据。

我同意这段观点，程序员对需求的理解比美工要深，真正把握页面的整体结构的应该是程序员。（当然也可以让美工去深入了解需求，然后设计出符合需求的页面来，但我还没碰到这样要求美工的公司。）

我的一点经验：
由程序员画出页面的初胚（如果是在不愿意用Dreamweaver之类的制作工具，也可以用笔和纸画出来），特别是表单部分（表单元素的名称定义，tab键的激活顺序等等），这部分与后台结合最紧密。然后程序员和美工都遵循这个页面初胚的标准各自做自己的事情，最后合并起来是可以符合开发需要的。

这其实跟公司大小无关，作为一个程序员这些应该是基础才对。

嗯，孤魂兄善于总结。我从你的经验中也有不少收获。

我作这个也有些经验，分享一下，主要是最近关于CSS使用的一些总结：

1 CSS的命名要按照功能而不是内容，例如要定义.PageTitle而不是.RedFont
2 CSS尽量分开为多个文件，用到哪个再读哪个。
3 要善于利用空格这个方法。例如
定义 TD P {color:red}，意义和TD,P{color:red}是不一样的。
逗号表示并列的关系，Td和P都是红色字。而空格表示继承关系，只有TD内的P才会是红色。这一点很重要，可以利用这个来做一套面向对象的CSS设计。我还在考虑中，想法还不完善。举个简单的例子：

例如常常我们需要作一个表格列表，显示产品名称价格数量，等等。就像购物车那种。一般的，都是定义一个表格，表格内有若干列，每列是对应不同的数据库字段。表格第一行都是字段的意义。为了突出和醒目，第一行和别的颜色都不一样。
利用CSS，可以这样来定义。

<table class="dataTable">
<col  class="no"/>
<col />
<col />
<thead class="head">
  <tr>
    <td>编号</td>
    <td>名称</td>
    <td>价格</td>
  </tr></thead>
<tbody class="data">
  <tr>
    <td>1</td>
    <td>苹果</td>
    <td>100</td>
  </tr>
</tbody>
</table>

我按照thead和tbody把table区分为头和数据两块，整个table命名为dataTable，这样，我下面这个CSS可以叫做dataTable.css，和表格的名字一样。注意要用功能命名表格，例如ProductListTable等。

------ CSS FILE ---------
.dataTable { 
 background-color:#000000 ;
 border-collapse: collapse;
 width: 30%;
 height: 30%;
 line-height: 1.5em;
}
.dataTable .head {background-color:#3333CC; color:white;}
.dataTable .data {background-color:#FFFF66 ;}
.dataTable .no { padding-left:4em ; width:50%; }
.dataTable td {border-collapse: collapse;  border:1px solid black;}
------ CSS FILE ---------

页面上，使用下面代码来导入多个的CSS

<style type="text/css">
          @import url("css/styleA/dataTable.css");;
</style>

看到上面的styleA？ 如果我需要更换一个样式，我可以定义另外一个同样名字的dataTable.css，放入styleB，用任何方法修改上面的import就可以实现换肤。

上面是我的一些不成熟的想法，还有不少东西需要仔细的考虑。仅供参考。

嘿嘿，我喜欢javaeye的这种气氛，常常有让人写长篇大论的灵感。
顺便贴在blog，呵呵。