Web Theme Template Generator 是一个自动生成Web应用程序主题的应用程序。本项目展示了一种快速为网站主题模板添加主题的方法。目标是创建一个非常干净且具有Windows表单应用程序外观的Web模板。与其使用图像编辑器裁剪所有这些图像,选择让程序自动为裁剪它们。
首先,将使用GDI绘制模板,并选择想要使用的所有颜色和图像属性。如果选择了想要的颜色,现在可以创建使模板工作所需的输出文件。制作的输出图像是从主图像中裁剪出来的,并保存到选定的路径。输出结果如下:文件夹(SteelBlue),文件夹(Images),文件(SteelBlue.css,TableTemplate.txt)。将颜色命名的文件夹复制到Web项目的themes文件夹中。将表格模板文本添加到HTMLbody标签中,并在MasterPage中添加以下代码:
<link href="App_Themes/SteelBlue/SteelBlue.css" rel="stylesheet" type="text/css" />
在MasterPage的body部分添加此代码,以为主题图像创建表格布局:
<table id="Template-Table">
<tr>
<td id="header-left"></td>
<td id="header-logo"></td>
<td id="header-center" colspan="2"></td>
<td id="header-right" style="width: 5px"></td>
</tr>
<tr>
<td id="title-left"></td>
<td id="title-center" colspan="3"></td>
<td id="title-right" style="width: 5px"></td>
</tr>
<tr>
<td id="sidebar" colspan="2" rowspan="2"><td id="logincorner"></td>
<td id="loginbar"></td>
<td id="loginbar-right" style="width: 5px"></td>
</tr>
<tr>
<td id="ww" colspan="2">在这里添加contentPlaceHolder</td>
<td id="sidebar-right" style="width: 5px"></td>
</tr>
<tr>
<td id="status-left"></td>
<td id="status-center" colspan="3"></td>
<td id="status-right" style="width: 5px"></td>
</tr>
<tr>
<td id="copyright-left"></td>
<td id="copyright-center" colspan="3"></td>
<td id="copyright-right" style="width: 5px"></td>
</tr>
</table>
在web.config文件的AppSettings中添加此键:
<add key="DefaultThemeName" value="SteelBlue" />
还可以将此属性添加到web.config页面中:
theme="SteelBlue"