界面定制与设计

界面定制技术讲解－对未来的一些思考

一，目前在使用sitemesh中发现，URL Pattern匹配过程中，如果两个URL的问号前的内容一样，则它们就会被同一模板修饰，但是我们希望在匹配过程中，sitemesh可以考虑问号后面的匹配问题。因此对于sitemesh还要加强研究。
二，目前Portal技术慢慢开始成熟，那时界面定制将主要使用Portal自带的，当然还要研究在Portal方式下，界面定制如何与强大的开源技术相结合。

界面定制技术讲解－项目界面分析与模板化思路

一，相关文件的位置

1，模板文件，放在网站的/decorators目录下。
一般项目中共有三个模板文件，分别是：
二级页面修饰模板
弹出窗口修饰模板
二级页面修饰模板
2，模板注册和URL Pattern配置文件decorators.xml，在/WEB-INF目录下。
二，界面分析

1，项目界面分析，主要是分析项目中到底有多少种类型的页面，以及每种类型的页面中包含多少共同元素等。
一般项目共包括四种类型的页面
登录页面
首页面（主页面）
二级页面
弹出页面（有的项目还有弹出方式的三级页面）

2，下面我们分别看一下这四种类型的页面，并分析每一种类型页面的共同元素。
1）类型一：登录页面

2)类型二：首页面

3）类型三：二级页面

4）类型四：弹出页面（有些项目中三级页面与此同用一个修饰模板）

三，项目界面模板化思路

下面总结一下项目界面的模板化思路
1，分析项目中的界面类型，即共有哪些类型的页面，一般包括登录页面、首页面、二级页面、三级页面，弹出页面等等，而后要作出每种类型的美工效果图。
2，按照前面说过的方式进行切图，根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后table中考虑里面应该如何切。
3，切图完成后，将其输出为Html格式的网页。
4，一般不要对默认输出的页面进行编辑处理，而是根据布局重新编写html代码，代码一般是以多层嵌套的table为基础。完成后对页面进行自由伸缩方面的调整以及其它一些调整。
5，将完成的html页面按照sitemesh语法转化为相应的模板，并在模板注册文件中注册，而且设置其所修饰的URL Pattern
6，在做具体应用的页面时，应该考虑好该页面应该被哪个模板修饰，确定修饰模板后，在页面中应该提供模板所需要的一些属性。
7，完成。

界面定制技术讲解－网页切图处理与技巧

一，概述

1，网页切图，是指经过切图后输出为Html的页面。
2，网页切图处理，主要是指处理输出后的Html页面，经过Html格式的编辑后，使其能够满足实际要求（可以自由伸缩等等）
3，处理网页切图的工具可以有Frontpage或Dreamweaver，一般来说建议使用Dreamweaver 。

二，网页切图处理

1，处理过程一般为：
1）使用Dreamweaver软件打开输出后的html页面。
2）去掉Html中多余的图片（Html格式输出后，切片均变为了图片）
3）将需要随页面大小自动伸缩的部分的图片变为背景，并设置背景以某种方式自动延伸。
4）某些部分可能不要自动伸缩，但需要在这些部分上面显示文字，这时也要将这部分图片变为背景，只是背景不做任何方式的延伸。
5）在前面我说过“块”的概念，这个概念在网页切图处理过程中非常重要。
6）切图软件在将切图以Html格式输出成网页后，该网页的Html代码结构一般不是我们所要的，因为里面有大量的rowspan和colspan结构，这极大限制了网页的自由伸缩。
7）解决办法：将整个页面放在一个table中，其中每个块是一个子table，然后在每个子table里面再细分，甚至会出现子子子table（复杂的页面有这种情况），然后将相应的图片放置到我们做的table结构中。而后在进行上面的第2、3、4步骤。

2，切图后生成的html使用Dreamweaver打开如下：

切图输出为Html页面后，其中的Html代码结构非常不适合网页相关部分的自由伸缩

             <TR>
  <TD COLSPAN=2>
   <IMG SRC="images/allview_15.png" WIDTH=883 HEIGHT=56 ALT=""></TD>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=1 HEIGHT=56 ALT=""></TD>
 </TR>
 <TR>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=80 HEIGHT=1 ALT=""></TD>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=806 HEIGHT=1 ALT=""></TD>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=77 HEIGHT=1 ALT=""></TD>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=38 HEIGHT=1 ALT=""></TD>
  <TD>
   <IMG SRC="images/spacer.gif" WIDTH=23 HEIGHT=1 ALT=""></TD>
  <TD></TD>
 </TR>

下面我们按照“块”的概念，将整个页面代码重新组织

3，通过下图，我们看一些分块的思想


4，在重新编写网页代码结构，并将图贴过来之后，可以开始处理各个部分做细致的处理了。
对各个部分的处理主要包括（前面已经提过）
1）去掉Html中多余的图片
2）将需要随页面大小自动伸缩的部分的图片变为背景，并让设置背景以某种方式自动延伸。
3）某些部分可能不要自动伸缩，但需要在这些部分上面显示文字，这时也要将这部分图片变为背景，只是背景不做任何方式的延伸。

下面我们看一下伸缩区域的html代码该如何写

其它区域的处理类似，对于非均匀区域，一般保留原图片，或将图片做为不延伸的背景。
在处理过程中，对于Html和Css技术有一定的要求，如果这方面没有基础或基础不牢固，请先巩固这一部分。
当网页编辑完成，伸缩等都自如了之后，就应该将Html页面转换为JSP页面了（考虑到使用Sitemesh技术，我们要将Html页面转换为Sitemesh模板页面（模板页面也是用JSP编写的））。

三，Html页面向JSP页面的转化

这部分应该很简单。
1，这里的向JSP的转化，应该是向Sitemesh模板的转化，关于Sitemesh模板的编写请参考前面Sitemesh技术的讲解。
2，Sitemesh模板编写完成或，就应该注册这些模板，并配置每个模板所修饰的URL Pattern（具体过程请参考前面Sitemesh技术的讲解）。
3，接下来，我们将看一下，Sitemesh的这些相关文件在项目中一般放在什么位置，以及一般项目中有哪些类型的界面等等。

界面定制技术讲解－photoshop切图技术

一，基本概念
1，切图，是一种网页制作技术，他是将美工效果图转换为页面效果图的重要技术。Fireworks也提供了切图技术，Flash则直接提供了网页格式输出技术（不需要切图）。
2，切片，是切图的直接结果，切图实际上就将图切分为一系列的切片

二，切图操作过程

1，切图工具图标的识别

2，切图基本操作

1）基本操作有两个：划分切片和编辑切片
划分切片，是使用切片工具，在原图上进行切分的操作。
编辑切片，是对切分好的切片进行编辑的操作，编辑包括对切片的名称、尺寸等的修改等等
下面我们看一下这两个操作
2）基本操作


如果想移动某个切片，可以使用“切片选择工具”选择某个切片，并用鼠标进行拖动，也可以使用<Shift+方向键>实现，另外如果想精确的细微移动，则可以使用<Ctrl+方向键>实现
如果想将某个切片存为某个图片输出，可以使用“切片选择工具”选择某个切片，然后选择“文件”菜单，并选择“存储为Web所用格式(W)...”，然后在弹出的界面中...

3，切图技巧

1）一张图，可以有多种切分方式，如下：


既然存在n多种切图方式，那么是不是哪种方式都可以满足要求？
答案：不是的。
一般对页面的要求是，当页面大小发生变化时，页面的各部分可以相对自由地伸缩，而不会使页面发生错乱或变形等问题。
我们切分好的图是要输出为Html格式的网页文件的，然后通过网页编辑器，将该页面进行加工，做成符合要求（例如可以根据内容多少，自由伸缩等）的模板页面。这其中，切图的方式直接影响着模板页面是否能够满足实际的要求。
我们来看一个例子：

2）切图技巧主要有几下几点
属性均匀的区域适合分为一个切片，均匀主要是指颜色和形状都没有变化，或者在X或在Y方向上没有变化。
属性渐变的区域适合分为一个切片，渐变有两种表现形式
颜色渐变
形状渐变
根据原图的内容布局，确定整体的切分策略，即切分要有分块的思想，要在想象中将整个布局看成是一个两个table，然后在具体到每个table，去考虑里面应该如何切。
下面通过几个图例来说明

三，切图的Html格式输出

切图完成，就可以输出为Html格式的页面了。
在“文件”菜单中，选择“存储为Web所用格式(W)...”，在弹出的页面中直接选择“存储”，然后在弹出的界面中，填入文件名，保存类型选择“HTML 和图像(*.html)”，设置为“默认设置”即可，切片选择“所有切片”。然后点击“保存”按钮就可以了。
后面的事情，就是编辑输出的Html页面了。

界面定制技术讲解－sitemesh技术的应用

一，基本概念

1，Sitemesh是一种页面装饰技术，它通过过滤器(filter)来拦截页面访问，并根据被访问页面的URL找到合适的装饰模板，然后提取被访问页面的内容，放到装饰模板中合适的位置，最终将装饰后的页面发送给客户端。
2，在sitemesh中，页面分为两种：装饰模板和普通页面。
1）装饰模板，是指用于修饰其它页面的页面。
2）普通页面，一般指各种应用页面。
3，接下来，我们通过一个简单的例子来说明一下sitemesh修饰网页的基本原理。

二，模板修饰网页的原理

通过Sitemesh的注册机制，告诉Sitemesh，当访问该路径时使用XXX模板（假定使用前面那个模板）来修饰被访问页面。

当用户在左边导航栏点击“戏说长城”（ /ShowGreatWall.do）时，右边的“戏说长城”页面将会被指定的模板修饰

总结上面过程，Sitemesh修饰网页的基本原理，可以通过下面来说明：

三，Sitemesh的配置与使用

1）WEB-INF/web.xml中加入filter定义与sitemesh的taglib定义
     <filter>
      <filter-name>sitemesh</filter-name>
      <filter-class>com.opensymphony.module.sitemesh.filter.PageFilter</filter-class>
     </filter>
     <filter-mapping>
      <filter-name>sitemesh</filter-name>
      <url-pattern>/*</url-pattern>
     </filter-mapping>
     <taglib>
      <taglib-uri>sitemesh-decorator</taglib-uri>
      <taglib-location>/WEB-INF/sitemesh-decorator.tld</taglib-location>
     </taglib>
     <taglib>
      <taglib-uri>sitemesh-page</taglib-uri>
      <taglib-location>/WEB-INF/sitemesh-page.tld</taglib-location>
     </taglib>
2）创建WEB-INF/decorators.xml，在该文件中配置有哪些模板，以及每个模板具体修饰哪些URL，另外也可以配置哪些URL不需要模板控制
decorators.xml的一个例子如下：
 <excludes>
  <pattern>/Login*</pattern>
 </excludes>
 <decorators defaultdir="/decorators">
  <decorator name="main" page=“DecoratorMainPage.jsp">
   <pattern>/*</pattern>
  </decorator>
   <decorator name=“pop" page=“PopPage.jsp">
   <pattern>/showinfo.jsp*</pattern>
   <pattern>
                   /myModule/GreatWallDetailAction.do*
   </pattern>
   </decorator>
 </decorators>

3）我们看一个修饰模板的例子
<%@page contentType="text/html;?charset=GBK"%>
<%@taglib uri="sitemesh-decorator"?prefix="decorator" %>
<html>
<head>
 <title><decorator:title/></title>
 <decorator:head?/>
</head>
<body>
Hello World 
<hr/>
<decorator:body/>
</body>
</html>

4）我们看一个被修饰的页面的例子：
<%@ page contentType="text/html;?charset=GBK"%>
<html>
<head>
    <title>Hello World</title>
</head>
<body>
<p>Decorated page goes here.</p
</body>
</html>
5）我们看一下装饰模板中可以使用的Sitemesh标签
* <decorator:head />
 取出被装饰页面的head标签中的内容。
* <decorator:body />
取出被装饰页面的body标签中的内容。
* <decorator:title default="..."  />
取出被装饰页面的title标签中的内容。
default为默认值
* <decorator:getProperty property="..." default="..."  writeEntireProperty="..."/>
取出被装饰页面相关标签的属性值。
Html标签的属性
Body标签的属性
Meta标签的属性（注意如果其content值中包含“>或<”会报错，需转码，例如&lt;等等）
default是默认值
writeEntireProperty表明，是显示属性的值还是显示“属性=值”
* <decorator:usePage id="..." />
将被装饰页面构造为一个对象，可以在装饰页面的JSP中直接引用。

6）看一个在装饰模板中使用标签的例子
<html lang=“<decorator:getProperty property=‘lang’”>
<head>
<title> <decorator:title default=“你好” /></title>
<decorator:head />
</head>
<body <decorator:getProperty property=“body.onload" writeEntireProperty=“1"/>
 从meta中获取变量company的名称：
         <decorator:getProperty property=“meta.company”/>
    下面是被修饰页面的body中的内容：
         <decorator:body />
 <decorator:usePage id=“myPage" />
 <%=myPage.getRequest().getAttribute(“username”)%>
</body>
</html>

7）看一下相应的在被修饰页面中的代码：
<html lang=“en”>
  <head>
   <title>我的sitemesh</title>
                      <meta name=“company” content=“smartdot”/>
   <meta name=“Author” content=“zhangsan”/>
                      <script>
                       function count(){return 10;}
                      </script>
  </head>
  <body οnlοad=“count()”>
   <p>这是一个被修饰页面</p>
  </body>
  </html>

四，总结
1，Sitemesh最为重要的就是做用于修饰的模板，并在decorators.xml中配置这些模板用于修饰哪些页面。因此使用Sitemesh的主要过程就是：做装饰模板，然后在decorators.xml中配置URL Pattern
2，分析整个工程，看哪些页面需要抽象成模板，例如二级页面、三级页面、弹出窗口等等可能都需要做成相应的模板，一般来说，一个大型的OA系统，模板不会超过8个。

界面定制技术讲解－概述

一，界面定制，在这里主要是指如何按照客户要求，生成客户所需要的界面的过程和技术。

二，界面定制的一般过程：

上面存在两个关键过程
1，美工效果图 --> Html效果图（切图与切图处理过程）
1）切图是网页制作的常用技术，一般采用Photoshop或者Fireworks软件进行，但Photoshop更专业。
2）切图处理，主要是指将切好的图按Html格式输出，并按照要求对Html文件进行编辑，一般采用Dreamweaver或者Frontpage软件，同样Dreamweaver更专业一些。
2，Html效果图 --> 大量实际页面的生成（大量页面的美工化过程）
1）按照Html效果图，将工程中的JSP等页面进行美工化。
2）将页面美工化，主要有三种方式：
* 将逻辑代码嵌在已有Html代码中，而且每个页面都这么做。
* 将美工html代码进行分割，并将分割后的块分别做成相应的include页面，在需要美工化的页面中include这些页面。
* 使用模板技术，将美工框架做成模板，通过URL映射技术，将美工框架自动套在需要修饰的页面上面。

三，界面定制需要的基本功

1，切图技术
2，HTML、CSS技术
3，相关辅助软件的使用，例如Photoshop、Dreamweaver等
4，某一种模板装饰技术（可选）

四，经典项目中采用的技术

1，使用Photoshop进行切图与html格式的输出。
2，使用Dreamweaver对html切图进行处理
3，使用Sitemesh模板技术修饰页面效果

五，讲解顺序

1，Sitemesh模板技术
2，Photoshop切图技术
三，Dreamweaver处理技术