一，概述
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的这些相关文件在项目中一般放在什么位置，以及一般项目中有哪些类型的界面等等。
发表于 @ 2006年05月23日 15:56:00|评论(loading...)|编辑