Web 主题模板创建器

• 下载 Web 主题模板演示 - 204.8 KB
• 下载 Web 主题模板创建器演示 - 214.7 KB
• 下载 Web 主题模板源代码 - 367.7 KB

引言

主题模板创建器是一个应用程序，用于自动生成 Web 应用程序主题。该项目展示了一种快速向网站主题模板添加主题的方法。原因是我想创建一个非常简洁且外观类似于 Windows Forms 应用程序的 Web 模板。为了避免使用图像编辑器裁剪所有这些图像，我使其能够自动为我裁剪它们。

Using the Code

首先，我们将使用 GDI 绘制模板，并选择我们想要处理的所有颜色和图像属性。如果我们已经选择了想要的颜色，现在就可以创建制作模板所需的所有输出文件。我们制作的输出图像是从主图像中裁剪并保存到选定路径中的。输出如下：文件夹（SteelBlue），文件夹（Images），文件（SteelBlue.css，TableTemplate.txt）。将颜色命名的文件夹复制到 Web 项目的主题文件夹中。将表格模板文本添加到 HTML body 标签，并将以下代码添加到 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"> add contentPlaceHolder to Here</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" 

历史

这只是为了证明一个概念，所以请随意使用。如果有人将这些模板用于网站，请发送链接给我，以便我查看。

• 2008 年 1 月 23 日 -- 发布原始版本