DotNetNuke Skinning Whitepaper 翻译记录(附录 C – 容器转换)
附录 C – 容器转换
原来的DotNetNuke容器使用简单的HTML为内容模块提供自定一个边框。HTML通常包含在一个container.txt文件中，含有几个每次请求都要进行转换的标志符号[TOKENS]。
<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">
<tr>
<td width="23"><img border="0" src="top-left.gif" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="top-tile.gif"></td>
<td width="23"><img border="0" src="top-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
</tr>
<tr>
<td width="23" background="left-tile.gif"></td>
<td[ALIGN]>
[MODULE]
</td>
<td width="23" background="right-tile.gif"></td>
</tr>
<tr>
<td width="23"><img border="0" src="bottom-left.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
<td background="bottom-tile.gif"></td>
<td width="23"><img border="0" src="bottom-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
</tr>
</table>
将原有的容器转换到新的皮肤框架中来需要对HTML内容作些简单的修改。
<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">
<tr>
<td width="23"><img src="top-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="top-tile.gif"></td>
<td width="23"><img src="top-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
</tr>
<tr>
<td background="left-tile.gif" width="23"></td>
<td runat="server" id="ContentPane">
<table cellSpacing="0" cellPadding="0" width="98%" summary="Module Title Table">
<tr>
<td vAlign="bottom" nowrap align="left" height="34">
<dnn:Actions runat="server" id="dnnActions" />
<dnn:Icon runat="server" id="dnnIcon" />
</td>
<td vAlign="bottom" nowrap align="left" width="100%" height="34">
<dnn:Title runat="server" id="dnnTitle" />
</td>
<td vAlign="bottom" nowrap align="right" height="34">
<dnn:Visibility runat="server" id="dnnVisibility" />
</td>
</tr>
<tr>
<td colspan="3" width="100%">
<hr noshade size="1">
</td>
</tr>
</table>
</td>
<td background="right-tile.gif" width="23"></td>
</tr>
<tr>
<td width="23"><img src="bottom-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="bottom-tile.gif"></td>
<td width="23"><img src="bottom-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
</tr>
</table>
Appendix C – Container Conversion
The original DotNetNuke containers contained basic HTML for providing a custom border for content modules. The HTML was typically included in a container.txt file containing a few key [TOKENS] which were parsed on every request.
<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">
<tr>
<td width="23"><img border="0" src="top-left.gif" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="top-tile.gif"></td>
<td width="23"><img border="0" src="top-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
</tr>
<tr>
<td width="23" background="left-tile.gif"></td>
<td[ALIGN]>
[MODULE]
</td>
<td width="23" background="right-tile.gif"></td>
</tr>
<tr>
<td width="23"><img border="0" src="bottom-left.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
<td background="bottom-tile.gif"></td>
<td width="23"><img border="0" src="bottom-right.gif" WIDTH="23" HEIGHT="31"Alt="Module Border"></td>
</tr>
</table>
Converting an original DotNetNuke container to the new skinning architecture involves making some simple modifications to the HTML:
<table border="0" cellspacing="0" cellpadding="0" width="100%" Summary="Module Design Table">
<tr>
<td width="23"><img src="top-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="top-tile.gif"></td>
<td width="23"><img src="top-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
</tr>
<tr>
<td background="left-tile.gif" width="23"></td>
<td runat="server" id="ContentPane">
<table cellSpacing="0" cellPadding="0" width="98%" summary="Module Title Table">
<tr>
<td vAlign="bottom" nowrap align="left" height="34">
<dnn:Actions runat="server" id="dnnActions" />
<dnn:Icon runat="server" id="dnnIcon" />
</td>
<td vAlign="bottom" nowrap align="left" width="100%" height="34">
<dnn:Title runat="server" id="dnnTitle" />
</td>
<td vAlign="bottom" nowrap align="right" height="34">
<dnn:Visibility runat="server" id="dnnVisibility" />
</td>
</tr>
<tr>
<td colspan="3" width="100%">
<hr noshade size="1">
</td>
</tr>
</table>
</td>
<td background="right-tile.gif" width="23"></td>
</tr>
<tr>
<td width="23"><img src="bottom-left.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
<td background="bottom-tile.gif"></td>
<td width="23"><img src="bottom-right.gif" border="0" WIDTH="23" HEIGHT="31" Alt="Module Border"></td>
</tr>
</table>
