作者：晨晖

分类新闻在IWMS里是没有任何参考资料的。但是仔细一看，很多HTML是可以删除修改的，所以想起给他瘦身，尽量使他靠近标准。其中标题前面硬塞个图片的做法期待在下一个版本中有所改善。最终的结果我个人比较满意，实际应用中至少减掉了一半的代码量。

首先来解读一下原版：

<blockquote><%BindAllNew();%>
<asp:DataList id=”dlAll”
RepeatDirection=”Horizontal”
RepeatColumns=”2″
CellSpacing=”0″
CellPadding=”0″
Width=”100%”
DataKeyField=”classid”
OnItemDataBound=”dlAll_ItemBound”
runat=”server”>
<!–指定table的ID，间隙，宽度–>
<itemStyle Width=”50%” CssClass=”alignTop” />
<!–指定列TD的宽度（2列就是50% 3列就是33%，一般不动，和所采用的class样式–>
<itemTemplate>
<!–一个新闻栏目循环的开始–>
<divmframe”)%>”>
<!–获取当前界面风格的样式，如果没有指定，就用class“mframe”–>
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td></td>
<td>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr><td>
<%#GetSortPic((System.Data.DataRowView)Container.DataItem)%>
<!–获取标题图片，没有图片就用文字说明–>
</td><td align=”right”>
<a href=”<%#DataBinder.Eval(Container.DataItem,”cUrl”)==DBNull.Value ? GetUrlSort((int)DataBinder.Eval(Container.DataItem,”classid”),DataBinder.Eval(Container.DataItem,”sdir”).ToString()) : DataBinder.Eval(Container.DataItem, “cUrl”).ToString()+”\” target=\”_blank”%>”><img src=”<%=style.PicMore%>” border=”0″ alt=”more”/></a>
<!–获得MORE的图片和链接，其中的html部分可以大胆修改比如图片的alt=”more”，改成“更多内容”–>
 
</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
<table width=”100%” cellspacing=”0″ cellpadding=”0″>
<tr>
<td></td>
<td >
<table width=”100%”>
<tr><td valign=”top”>
<table width=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<asp:Repeater id=”rpClass” runat=”server” >
<itemTemplate>
<!–一个新闻条目循环的开始–>
<tr><td height=”20″ align=”left”>
<%#NewsTitle((System.Data.DataRowView)Container.DataItem, 33)%>
<!–获得新闻标题，33是指调用的西文半角字数–>
</td><td width=”35″ align=”center”>
<spandateandtime”)<dateTime.Now.Date ? “gray” : “time”%>”>
<!–新闻时间的的样式–><%#String.Format (“{0:MM-dd}”,DataBinder.Eval(Container.DataItem,”dateandtime”))%></span>
<!–获得新闻时间，其中的时间样式可以试着改改–>
</td></tr>
</itemTemplate></asp:Repeater>
<!–一个新闻条目循环的结束–>
</table>
</td></tr>
</table>
</td>
<td></td>
</tr>
</table>
<table width=”100%” cellspacing=”0″ cellpadding=”0″ >
<tr>
<td></td>
<td> </td>
<td></td>
</tr>
</table>
</div>
<!–一个新闻栏目循环的结束–>
</itemTemplate>
</asp:DataList></blockquote>
明白了意思之后，我的修改版本为：
<blockquote>
<%BindAllNew();%>
<asp:DataList id=”dlAll”
RepeatDirection=”Horizontal”
RepeatColumns=”3″
DataKeyField=”classid”
OnItemDataBound=”dlAll_ItemBound”
runat=”server”>
<itemTemplate>
<div>
<%#GetSortPic((System.Data.DataRowView)Container.DataItem)%><span><a href=”<%#DataBinder.Eval(Container.DataItem,”cUrl”)==DBNull.Value ? GetUrlSort((int)DataBinder.Eval(Container.DataItem,”classid”),DataBinder.Eval(Container.DataItem,”sdir”).ToString()) : DataBinder.Eval(Container.DataItem, “cUrl”).ToString()+”\” target=\”_blank”%>”><img src=”<%=style.PicMore%>” border=”0″ alt=”more”/></a></span></div>
<ul><asp:Repeater id=”rpClass” runat=”server” >
<itemTemplate>
<li><%#NewsTitle((System.Data.DataRowView)Container.DataItem, 33)%><spandateandtime”)<dateTime.Now.Date ? “gray” : “time”%>”><%#String.Format (“{0:MM-dd}”,DataBinder.Eval(Container.DataItem,”dateandtime”))%></span></li></itemTemplate></asp:Repeater>
</ul>
</itemTemplate>
</asp:DataList>
</blockquote>

为“MORE”增加了一个SPAN的样式，以便对其进行控制。在样式中对强塞进来的那个箭头图片用样式表的选择进行了隐藏。

排除相对定位的误解

在狭小的空间挪动UL实在是很痛苦的事情。与其去HACK盒子模型的兼容，不如用相对定位好了。

我起初的理解：“相对定位”都是“相对”于上一个物件的定位方式，似乎很好理解。第一个相对定位标签没有出现问题。我顺利把“1”从红色区域下移20个像素到了他现在的位置。

但是“3”的相对移动却出现了问题。“3”的“相对定位”，应该“相对”于哪个对象呢？相对于整个盒子？不对，相对于“1”的当前位置？设置了一下也不对。整了个把小时，翻了好几本书，在《css权威指南》对相对定位的解释中仿佛看出了混乱的原由，但是还是晕乎乎不能理解，直到重新建立了一个测试模型才反应过来：“3”的相对移动跟前面“1”相对定位后的位置无关，它只关心自己本该在做什么位置，然后根据这个“本该”在的位置为原点相对定位。在此例中，“3”本该紧接在“1”未移动时的位置后面，也就是红色边框的下部。以这个点作为参照，设定移动参数，位置就完全正确了。

正确的感念应该是：相对定位就好像玩拼图，等默认位置排定以后，再把要相对定义的块抠出来，进行相对移动。《css权威指南》中举的例子中，文字被从段落中抠出来相对定位，是一个很经典也很极端的例子，可惜我开始没有静下心仔细领会它。

ID命名不可以数字开头

在测试的时候发现了一个以前没注意的情况，那就是ID选择符的命名不能以数字开头，ID为01、02、03是浏览器不可接受的。我不记得以前在哪似乎看过这样的规则，但是今天翻遍了手头的书也没查出这个禁忌，书上所有提到XHTML规则的地方只提示名字必须用小写字母，名字的值并不受这个规则限制，更没有提到说不能以数字开头。最让人摸不着头脑的是DW8的“所见即所得”可以接纳数字ID，而IE、FIREFOX、OPERA这些冤家在这个问题上立场统一：通通不接受，就当这个数字ID不存在。

也许这是DW8的一个BUG。

背景翻转的一个经验

在做导航菜单常用的背景图翻转时，发现一个经验：横向纵向数值要同时设置，那个0值是不可避免的。否则那个数值会直接写在CSS文件中，没有任何指示，结果实际效果就不可想像了。另外常用的将导航中文字缩进用负值的方法，个人觉得很别扭，在FIREFOX的web developer中查看css信息时拉出一条长长的方框，出于心理原因，干脆加上一个SPAN隐掉它。

20070611补充：SPAN隐藏的方法虽然以前比较流行，但是牵出了图片不可显示时的可用性问题。这个观点是从《CSS禅意花园》中得到的。看来，拉出个长方框就让它拉吧。

20、头条图片新闻<%=ImgHeadline(2,”normal”,150,true,22,2)%>
这个函数在帮助文件中没有更新最后一个参数的意思。那是个分几列显示的选项。风讯、动易尚且不能及时更新帮助文档，作为一个人开发的IWMS自然也不能幸免。其实作为设计人员，取巧的办法就是在后台模板的“可视化编辑”环境下按编辑器的响应按钮，根据提示去获得函数，也免得记忆参数排列顺序这么费劲，同时随着版本更新，作者肯定会保证这个地方生成的模板代码是最正确的。
第一个参数是表示取多少条具有“头条”性质的图片新闻。
第二个参数是表示是否显示简介信息，是在左边显示在是在右边显示。至于函数参考中的横、纵向显示已经作废，随着列数限制的出现，单独设置横向和纵向显示已经没有意义。
默认的情况下似乎代码没有什么问题，但是多列的时候问题还是出现了。假如显示简介的话，不同的图片新闻将会有不同的高度，而嵌套他们的TD缺少一个TOP的对齐指令，使得排列不整齐，如果遇到九宫格式的排版，这种情况越发严重。解决方法要么是编辑人员控制好简介字数，或者用CSS给这个位置的TD加上TOP对齐属性。
从这个标签的应用上看，用IWMS设计新模板一味追求标准是不现实的。因为灵活性和标准之间很难作出抉择，在软件作者设想到的变化中，用传统方式解决问题是最简单的途径。通过细读这个标签也纠正我过去一个错误的感觉，那就是ASPX模板很脆弱，一个参数不小心可能就全盘崩溃。其实用可视化编辑生成的代码尽管大胆往模板里填，我做的这么多测试还从来没有发生严重的错误。

21、 <%=GetFrameCss(style.CssDayHot,”lframe”)%> <%=GetTitlePic(style.PicDayHot,”今日热门”)%>
看过前面解释的朋友自然能了解这两个标签是什么意思了。（见17、18）

22、 <%=TopList(“dayhot”,8,42,false,false,false,false,false)%>
toplist是修改改模板中使用最频繁的一个函数了。除了“头条”，几乎所有的新闻引用都使用TOPLIST，因此他的变幻也是最丰富的。函数参考中黑压压一片，两大截都是关于他的描述。我的建议，为了效率考虑还是使用后台的可视化编辑工具产生需要的代码。然后再查看函数参考的内容。
看到这里，IWMS的神秘感基本消除，看来需要亲自修改一个模板来体会了。接下来的问题是哪些纷繁复杂的样式表了，要找出他们谁是谁、用在哪里、改动一个会不会牵扯出其他部位的问题？完全要靠分析CSS语法嵌套。如果考虑到FIREFOX的兼容性，这个工作量确实还不小。
下一步准备建立几个“裸奔”的函数运行结果，然后为裸奔的结果设计样式，从而更仔细地研究IWMS的CSS表现设计问题。

23、IWMS对生成的缩略图执行两个标准。“头条标题图片最大宽度”和“标题图片最大宽度”，两个实际生成的尺寸在提交新闻的一瞬间就已经决定，日后更改新闻属性不会重新生成缩略图，而是通过前台代码强行放缩。

24、如果大改过模板，那就千万不要用可视化编辑之后，直接“修改”保存，否则那自作聪明的可视化编辑工具将把模板“自动修正”得面目全非，无法执行。它只能作为生产代码的工具，如果他是个本地执行文件，或者DW的插件就好了。

25、对模板的改动不能将html_inc文件中的以下段落去除，否则所有图片新闻的图片缩略图调用都无法进行。
<blockquote><script type=”text/javascript”>
var thumbWidth=<%=config.TitleImgWidth%>;var thumbHeight=0;
var thumbHWidth=<%=config.HeadlineImgWidth%>;var thumbHHeight=0;
var urlPrefix = “<%=urlPrefix%>”;
</script>
<script type=”text/javascript” src=”<%=urlPrefix%>inc/thumbnail.js”></script></blockquote>
这样的一种操作方式实在很不方便。而要修正这个问题，IWMS需要动一动代码的结构，换一种思路，将控制图片大小的任务交给样式表去完成裁切显示。

26、图片新闻列表中使用了class=”thumbnailTitle”，却没有一个风格的样式表为他指定了内容。

27、 <asp:Literal id=”CopyRight” runat=”server”/>不仅仅是显示一个“IWMS4.5”这么简单，它还会把系统设置中的“底部版权内容”带进来。最好把这段内容删除，否则不好修改底部信息。

28、以上修改后，login.aspx中对导航的引用也要去除，否则会导致出错。原因大概是因为缺少匹配的东西。从这个方面看，在ASPX文件中去除“navClass.aspx”的内容，不如把这个文件改为空文件。嗯，好像越来越复杂了。

29、\inc、member_reg_statement.inc 这个文件，是在评论时提醒访问的警示语，可以随便更改。

30、 <%=GetSortName(8)%>通过ID数字获得分类名称。其中的8，可以改成后台存在的任何分类ID。

IWMS太复杂，除了在帮助文档中介绍的几个标签，其他在模板中使用的N多标签都没有相关的文档参考。近日想对其进行WEB标准化改造，准备靠“修改-测试”来搞清除标签的意思，这么多标签靠记忆力是记不住了，所以用此文作为工作笔记。

<blockquote>本文将在一段时间内置顶，希望同好留言补充。（为了避免垃圾广告留言，在留言内容中不要包含“http:”“www.”）。</blockquote>

<strong><span style=”font-size:14pt”>“首页模板”部分</span></strong>

1、<html xmlns=”http://www.w3.org/1999/xhtml” lang=”<%=config.Charset%>”>
这是个语言定义。执行后默认值是“gb2312”，可以使用官方“UTF-8转换工具”转成“UTF-8”。虽然IWMS推荐转换成UTF-8，但是其官方站使用的仍然是“gb2312”。根据实验，如果转换成UTF-8后，IWMS的后台“编辑模板”功能将认不出模板内容。建议保持原样，暂不更改。如果是经常使用中文1-2级字库以外的字符，建议还是更换为UTF-8，特别是程序代码内容多，NFO文件内容引用多的站点。

2、<!–#include file=”../inc/html_head.inc”–>
这是个服务器端嵌入的语句。表示将../inc/html_head.inc的文本内容填充到该位置，客户端看不出任何痕迹。只要修改这个INC的内容，就能对网站的相应部分进行批量更新（已生成的静态页面需要重新生成）。模板中的嵌入文件路径全是以模板所在目录为起始点计算。这里将INC文件中的内容当作模板的一部分进行解读。

3、<title> <%=htmlTitle%> </title>
这个标签的执行结果是页面的标题。在首页是就网站名称，在分类页就是分类名称，在内容页就是内容名称。如果你想在标题上加上站名，就在前面或者后面加上文字即可。比如<title><%=htmlTitle%>–洪城网世</title>。自动获得站点名，也可以试着使用<%=config.SiteName%>看看。IWMS会在</title>标签后加入“Powered by iwms http://www.iwms.net/”的备注信息，如果不使用</title>标签，备注就不会被加入。但是……页面就没有标题了。
接下来的<%=config.Charset%>，跟前面所说的第1条意思一样。

4、<link rel=”icon” href=”favicon.ico” type=”image/x-icon” />
这个ICO文件是网站的图标，建议修改成自己的文件。以便在多窗口的新型浏览器中更好地标识自己。

5、<meta name=”description” content=” <%=config.MetaDescription%> “/>
页面的描述。内容取决于首页的设置、分类的设置，或者正文页的简介。HTML的内容会带上标签，所以尽量在正文的简介中不使用格式化标签。

6、<meta name=”keywords” content=””>
这个标签是个问题标签，没有默认内容，也无法动态获得新闻正文的关键字。可能是编写中的一个失误。如果觉得有必要，可以自己写一段代表本网站的关键字。我觉得还是可以动态获得新闻正文的关键字标签比较好。

7、<meta name=”generator” content=”iwms网站管理系统”/>
可随意修改的标签，删除也没关系。

8、<link rel=”stylesheet” href=” <%=style.Css%> ” type=”text/css”/>
获得当前页面采用的“界面风格”的CSS文件路径。如果不想通过后台管理样式表，可以用自定义的CSS绝对路径代替。建议在不熟悉的情况下不要更改。

9、<script type=”text/javascript” src=” <%=urlPrefix%> inc/flash.js”></script>
获得当前页面的路径相对深度，就是“..”“../../”之类。其实我觉得写个绝对路径更省事。这个FLASH.JS是个方便插入FLASH内容的东西，如果觉得累赘，可以根据自己的需要改写。

10、var thumbWidth= <%=config.TitleImgWidth%> ;var thumbHeight=0;
var thumbHWidth= <%=config.HeadlineImgWidth%> ;var thumbHHeight=0;
者两个项目数值从后台的“系统设置-新闻相关”中获得。分别是“标题图片最大宽度”“头条标题图片最大宽度”。height数值为0，意思大概是不限定，按比例自动调整。

11、<%=style.PicNavSeparator%> <%=style.PicBullet%> <%=style.PicTop%> <%=style.PicNavBullet%>
这一组预加载的图片是在页面中经常用到的。分别代表当前界面样式中的“导航分割图片”、“新闻条目指示图标”、“置顶标记”、“底部导航指示图标”。这个部分单独修改成自定义的图像文件是没有意义的。

12、 <!–#include file=”../head.inc” –>
这里载入的外部文件是网页展示部分的文件头。因为所有页面一般都是共享一个头部，所以将此部分单独拎出来自成一个文件。这个部分的设计其实可以比较随性，那个专为头部设定的ID“sitehead”也可以随便改成自己的。如果要吧网站标准化，首先就要把这个头部改造掉。

13、 <%=config.SiteUrl%> <%=config.Logo%> <%=config.HeadAd%> <%=config.SiteName%>
分别获取在后台设定的网站地址与网站LOGO设定（不仅仅是LOGO图片，可能包含更多的HTML代码），以及广告位中的头部广告代码、后台设置中设定的网站名称。

14、head.inc的最后一段是关于简繁切换功能的设定。他首先会判断当前字符设定是GB2313还是BIG5，如果不是这其中的一种，则调用一个外部的inc/language.js文件，用替换指定字符的形式实现简繁转换。个人感觉这种方式效率很低，所以如果采用UTF-8的话，还是把简繁转换的功能关闭。如果是GB2312或者BIG5，还要判断后台是否允许用户更改简繁设定，如果不能更改，则给该DIV加上禁止点击的限制，从而实现“禁止用户更改设定”，这个重任落在了<%=config.UserConvBig5 ? “” : “disabled=&#39;disabled&#39; onclick=&#39;return false;&#39;”%>身上。

15、<!–#include file=”../inc/navclass.aspx”–>
这是插入导航的标签。麻烦从这里开始了。这段标签只是导航菜单的一部分，还有一个关联部分出现在FOOT.INC中。
<blockquote> <div id=”popmenu” onmouseover=”clearhidemenu();highlightmenu(event,&#39;on&#39;)” onmouseout=”highlightmenu(event,&#39;off&#39;);dynamichide(event)” style=”Z-index:100″></div>
<script type=”text/javascript” language=”javascript1.2″>
<asp:Literal id=”jsSortNav” runat=”server”/>
jsdone=true;
</script></blockquote>
改动导航需要两者联动。如果不使用这种菜单，也不能光删除前面，不删除后面。否则脚本的错误会让IWMS非常不稳定。导航的核心文件“navClass.aspx”内容中id=”dlSortNav”是不可以改成别的ID的。至于“Flow”还能改成什么目前不清楚、“15”这个数值是表示一行容纳多少个主菜单项目（用<br />隔开）、“Horizontal”大概是指菜单的排列方式。各位测试一下吧。牵涉到MENU字样的样式表还是不动为好，因为要解读出个所以然来实在费事。大多数情况下栏目变化不大，不如就删除了原配导航，自己用流行的<li>写一个自己需要的导航菜单。

16、 <%=GetBulletin(“h”)%>
生成一串“网站公告”标题的代码，至于你是用滚动还是用其他方式去展现，那就是设计者的问题了。那个“h”表示横着排列；改成“v”表示竖排列，也就是加了<br/>标签。不明白为什么木鸟不统一使用<br/>，而是在菜单中使用<br />来分割。

17、<divmframe”)%> “>
获取“头条新闻”的样式表名称。这段代码我瞧了半天，是干什么用的呢？获得CSS标签名称用的？那为什么这一串代码的执行结果就是”headline”，即使把貌似参数的“mframe”改成任意文字也一样。是跟样式的可视化编辑有关系？还是跟模板的可视化编辑有关系？试了一下，感觉不可能有关系。……搞了半天，是“图片与样式表”那个不起眼的犄角旮旯有个设置，指定了头条新闻所适用的样式表条目名称。这个语句的意思就是获得后台指定的头条新闻的样式表条目名称是什么。至于那个mframe参数，是表示如果没有设定样式则采用的数值。

18、 <%=GetTitlePic(style.PicHeadline,”头条新闻”)%>
这个神奇，是获取“头条新闻”的栏目图片用的。如果在后台没有指定图片，产生的结果就是“<span>头条新闻</span>”；如果指定了图片名称，则结果为“<img src=”图片名称” border=”0″ alt=”头条新闻”>”。可以看出“头条新闻”这个参数在两个执行结果中扮演的角色。根据角色的不同，可以任意修改他的内容。后面还有不少这类标签，虽然语句有一些不同，但是都基本是表示一些关键部位的图片和样式表设置内容，如果没有设置图片，则统一用class“TT”顶替，由于样式表中不同的嵌套关系，所以各种TT可以呈现不同的外观。这也提示修改者：“TT”这个CLASS不能任意修改。

19、头条文字新闻调用 <%=Headline(15,38,false,false,false,1,true)%>
这是一个新闻调用。在帮助文件中的函数参考部分“头条文字新闻”有对它的详细描述。以上这段的意思就是：“取15条新闻，标题限制最多38个半角字符，不显示所在类别名称，不显示发布日期，不用间隔颜色显示新闻列表，新闻按一列显示，第一个新闻显示简介”。
帮助文件中对这些函数的解释是非常精简的，对于从事设计的人员还是需要描述一下这些参考说明的描述规则：帮助说明中灰色块包含的部分是表示该函数允许的组合方式，这种方式不能任意发挥。比如头条文字新闻只有这么一种形式，所以7个参数一个也不能省略，否则就出错。参数的描述已经说明了参数的类型，IWMS的函数参考中的参数有三种类型，分别是数字、布尔、字符串。比如“int topNum”表示这个topnum参数必须为数字；“bool showSort”表示showsort参数是布尔值，只能为false（否）或者true（是）；“string toptype”表示toptype这个参数是一串字符，至于是什么，就要看具体说明中有哪些字符串可以选择，不能自由发挥，字符串作为参数时需要加上引号。
回过头来看“Headline”。虽然是短短一小段，但是参数不同得出的结果也是不同的，涉及到前台设计的代码也不同。把所有布尔值全部打开看看他的结构。需要注意的是，如果将头条新闻分为多列，那就不可避免<table>。的确，这是最简单合理的方式了。如果不分为多列，则整个列表就是一个<ul>.
“头条新闻”的第一条简介是用一个DIV包裹起来的：<div id=&#39;firstHeadline&#39;>。用<center>方式居中标题（这样似乎没必要，既然有样式包裹，就该用样式去解决，这样更灵活），<a>标签带class=”title”来个性化简介标题。随后是简介内容，没有使用标签单独包裹。
“头条新闻”使用<td width=&#39;50%&#39; valign=&#39;top&#39;>的方式来将新闻分为两列，所以分为三列就是“33%”。
如果要使用到间隔颜色显示，则代码使用的是为<li>标签分别赋予CLASS的方式。<li><li>交替出现。因此这两个CSS标签也是无法避免的。
如果开启了时间显示，那么<li>中又会用<span>将一个条目分为两边，一个<span style=”float:left”>将标题置左，一个将时间信息<span style=”float:right”>置右并指定GRAY样式，者这又是一个固定不能动的标签。
对于高亮显示的标题，使用class=”highlight”来突出显示它。这个标签也是在设计时必须考虑的。