65.9K
CodeProject 正在变化。 阅读更多。
Home

为 DotNetNuke 3.0 创建标签式导航

Derek Greer
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.43/5 (16投票s)

2005年7月11日

9分钟阅读

viewsIcon

122776

downloadIcon

1148

本文是关于如何为 DotNetNuke 3.0 创建标签式导航的分步指南。

目录

引言

以下教程描述了在 DotNetNuke 3.0 中创建标签式导航的过程。创建标签式外观并不难，但如果您是 DotNetNuke 皮肤新手，会有一个小的学习曲线。

必备组件

假定您已安装 DotNetNuke 3.0 和 Visual Studio 2003，并且对 HTML 和 ASP.NET 有所了解。

方法

创建 DotNetNuke 的皮肤项目有几种方法，但在此教程中，我将演示创建一个独立的发行版皮肤项目。皮肤创建也有两种方式：ASCX 和 HTML。在此教程中，我将演示 HTML 方法。

创建皮肤项目

第一步是在 Visual Studio 2003 中创建我们的皮肤项目。开始时，打开 Visual Studio 并创建一个新的“空项目”。我将我的项目命名为“TabSkin”。遵循 DNN 推荐的文件夹结构，我已经将项目设置为如下所示：

创建皮肤模板

接下来，我们需要创建将用作我们皮肤的 HTML 文件。为了方便起见，我将 C:\Projects\DotNetNuke\Portals\_default\Skins\DNN-Blue\Horizontal Menu - Full Width.htm 复制到我的本地 skins 文件夹，并将其重命名为 TabSkin.htm，因为它已经具有良好的基本结构可以开始。

打开 TabSkin.htm 后，您应该会在设计模式下看到类似以下内容：

查看以上布局，您会注意到括号内包含 12 个元素。这些括号值中的每一个都称为皮肤对象。安装后，DotNetNuke 会将 HTML 皮肤转换为 ASCX 用户控件皮肤，方法是替换每个皮肤对象及其相应的 ASP.NET 控件。我们的 HTML 皮肤实际上只是创建最终 ASCX 文件的模板。如果我们检查 [MENU] 部分的 HTML 源，我们会看到以下内容：

...

<TABLE class="skingradient" cellSpacing="0" 
       cellPadding="3" width="100%" border="0">
  <TR>
    <TD width="100%" vAlign="middle" align="left" nowrap>
        [MENU]
    </TD>
    <TD class="skingradient" 
        vAlign="middle" align="right" nowrap>[SEARCH]
    </TD>
  </TR>
</TABLE>

...

[MENU] 皮肤对象是我们想要修改以生成标签的部分。为了实现这一点，我们需要告诉 [MENU] 皮肤对象我们希望它如何工作。我们通过为每个我们想要修改的皮肤对象指定属性来做到这一点。这些属性最终成为从皮肤对象创建的用户控件的属性。由于直接在 HTML 中嵌入属性会变得混乱且难以与视觉设计器配合使用，因此 DotNetNuke 允许通过附带的 Skin.xml 文件指定这些属性。

创建属性文件

要指定我们的属性，请创建一个名为“Skin.xml”的新文件，内容如下：

<Objects>
    <Object>
        <Token>[MENU]</Token>
        <Settings>
            <Setting>
                <Name>UseArrows</Name>
                <Value>True</Value>
            </Setting>
            <Setting>
                <Name>UseSkinPathArrowImages</Name>
                <Value>True</Value>
            </Setting>
            <Setting>
                <Name>RootBreadCrumbArrow</Name>
                <Value>menu_right.gif</Value>
            </Setting>
            <Setting>
                <Name>DownArrow</Name>
                <Value>menu_down.gif</Value>
            </Setting>
            <Setting>
                <Name>RightSeparator</Name>
                <Value><![CDATA[<img valign="top" 
                                  src="tabright.gif">]]>
                </Value>          
            </Setting>
            <Setting>
                <Name>RootMenuItemCssClass</Name>
                <Value>RootMenuItems</Value>
            </Setting>
            <Setting>
                <Name>RootMenuItemActiveCssClass</Name>
                <Value>RootMenuItems</Value>
            </Setting>
            <Setting>
                <Name>MenuBreakCssClass</Name>
                <Value>MenuBreak</Value>
            </Setting>
            <Setting>
                <Name>MenuRootArrowCssClass</Name>
                <Value>RootArrow</Value>
            </Setting>
        </Settings>
    </Object>
</Objects>

以上列表中的属性如下：

Attribute 描述
UseArrows 使用箭头指示子菜单。
UseSkinPathArrowImages 使用位于皮肤中的箭头图像，而不是 /images 文件夹中的图像。
RootBreadCrumbArrow 用于根级别菜单面包屑箭头的图像。
RightSeparator 紧跟在根菜单项之后的分隔符。这可以用作标签图像的右侧边缘，例如。
RootMenuItemCssClass 用于根菜单项的 CSS 类。
RootMenuItemActiveCssClass 当根菜单项是活动标签时使用的 CSS 类。
MenuBreakCssClass 菜单分隔 CSS 类。
MenuRootArrowCssClass 菜单根箭头 CSS 类。

[MENU] 皮肤对象说明

虽然这对于我们的教程来说不是必需的，但了解 DotNetNuke 在生成菜单时实际创建的输出可能会很有帮助。菜单包含在一个 HTML <TABLE> 元素中，该元素包含单行和多列。每项菜单有两列：一列用于实际的菜单项，一列用于菜单项分隔符。

菜单项单元格将菜单包含在一个附加的嵌套 HTML <TABLE> 元素中。此表包含单行和两列。第一列用于主要的菜单项元素。此列包含四个可能的元素：根菜单项的可选左侧 HTML、根面包屑箭头（如果当前标签处于活动状态）、菜单标题以及根菜单项的可选右侧 HTML。第二列包含根菜单箭头图像，如果存在子菜单，则会出现此图像。

以下图例显示了一个包含一项菜单项的菜单的布局：

单元格 1 单元格 2
单元格 1
根菜单左侧 HTML（可选） 根菜单面包屑图像（如果当前标签处于活动状态） 根菜单标题 根菜单右侧 HTML（可选）
单元格 2
根箭头
根菜单分隔符

注意：根菜单项的左侧和右侧 HTML 也可以通过在标题周围指定左侧和右侧图像来创建标签外观，但对于我演示的标签样式，仅使用菜单分隔符单元格更干净。遵循本教程后，您应该有足够的能力开发更高级的标签图像。

创建样式表

下一步是提供一个样式表，其中包含我们 Skin.xml 文件中指定的 CSS 类选择器。这可以通过提供一个名为“skin.css”的文件来全局指定给皮肤包。在您的 skin 文件夹内创建此文件。回顾我们的属性，我们需要提供三个类选择器。

我们需要创建的第一个类选择器是 RootMenuItems。RootMenuItemCssClass 和 RootMenuItemActiveCssClass 属性都引用它，并且旨在影响主要的根菜单项单元格（请参阅上面第一个灰色内表的单元格 1）。在本教程中，为了简单起见，我选择对活动和非活动标签使用相同的样式。要开始我们的标签外观，我们需要顶部、底部和左侧边框可见，右侧边框留空。此单元格的侧面将通过 GIF 图像在视觉上关闭。为了匹配图像的大小和颜色，我们还需要将边框颜色设置为深灰色，背景色设置为白色，高度设置为 21 像素。这可以通过以下类选择器实现：

.RootMenuItems 
{
    border-left: 1px solid #666666;
    border-bottom: 1px solid #666666; 
    border-top: 1px solid #666666;
    border-right: 0px solid #666666;
    height: 21;
    background-color: White;
}

下一个需要创建的类选择器是 MenuBreak。此选择器的目的是影响包含根菜单项分隔符的表，在我们的例子中，它是包含我们结束标签图像的单元格。就我们而言，我们需要确保此表没有可见边框。这可以通过以下类选择器实现：

.MenuBreak
{
    border: none;
}

最后一个需要创建的类选择器是 RootArrow。此选择器的目的是影响包含箭头指示器图像的单元格，该图像在根菜单项具有子菜单可用时显示。由于此单元格出现在菜单项和菜单分隔符之间，因此它需要有顶部和底部边框，但没有左侧和右侧边框。我们还需要确保它与其他元素的相同高度和背景颜色。这可以通过以下类选择器实现：

.RootArrow
{
    border-top: solid 1px #666666;
    border-bottom: solid 1px #666666;
    border-left: none;
    border-right: none;
    height: 21px;
    background-color: White;
}

创建图像

下一步将是创建我们的自定义根箭头、根面包屑和右标签图像。您可以使用源下载中提供的图像，或者创建自己的图像并相应地调整 skin.css 样式。将这些图像放在您的 skin 文件夹中。您还需要在包中提供一个名为 spacer.gif 的 1x1 像素透明 GIF 图像。您可以从 DotNetNuke 图像目录复制过来。虽然您的皮肤模板可能不会直接引用 spacer.gif，但 DotNetNuke 在其最终的菜单渲染中使用此图像，并且在没有它时可能在所有浏览器（例如 Firefox）中无法正确显示。

打包您的皮肤

下一步是将我们的皮肤打包成一个 zip 文件。您可以使用任何兼容 PKZip 格式的 zip 工具来完成此操作。zip 文件的名称应该是您的皮肤名称（即“TabSkin.zip”）。DNN 3.0 随附的打包皮肤文档似乎已过时或不正确，因为它建议您可以直接压缩 skins 文件夹。我的经验是，zip 文件应该只包含 skins 文件夹的内容，而不是 skins 文件夹本身（这就是您按照 DNN 文档操作后得到的结果）。如果 skins 文件夹本身包含在 zip 文件中，DNN 3.0 将无法正确应用您的 skin.css。虽然在此教程中我没有涵盖容器皮肤的创建，但您可以使用另一种格式来创建包含门户和容器皮肤的捆绑包。对于此格式，请像以前一样创建您的门户皮肤 zip 文件，只是这次将其命名为 skins.zip。对容器文件夹执行相同的操作，将其命名为 containers.zip。接下来，将这两个 zip 文件压缩成一个名为您的皮肤包（即 TabSkin.zip）的 zip 文件。在此步骤中，我不得不使用不同的工具，因为内置的 Windows 压缩工具由于命名冲突似乎不允许将 zip 文件捆绑到另一个 zip 文件中。通过 DNN 上传时，这将在 Containers 和 Skins 文件夹下都创建一个 TabSkin 文件夹。

安装

下一步是上传您的皮肤包。以 host 用户身份登录您的 DNN 站点，然后在 Host 菜单项下的 Skins 页面进行操作。选择上传 Skin 链接。接下来，浏览到您打包的 zip 文件的位置，然后单击“Add”。接下来，单击“Upload New File”。单击 Upload 链接后再单击 Add 将不会上传文件。您应该看到的下一个屏幕是显示上传结果的诊断屏幕。

选择您的皮肤

现在您已经创建并安装了皮肤，您可以继续进行“Common Tasks”下的 Site 链接，并在 Portal Skin 和 Admin Skin 下拉列表中选择您的 TabSkin。单击“Update”链接，您的皮肤将被安装。瞧，您现在有了标签！

问题

好的，也许您的标签看起来不像我说的那样。如果您的标签看起来像上面的图片，那很可能是 DotNetNuke 3.0 中的一个 bug。此特定图像来自 DotNetNuke 3.0.13 安装。问题是控制标签创建的 JavaScript 没有正确地将 RootMenuItemCssClass 类选择器应用于包含菜单项元素的单元格。JavaScript 没有设置封闭 <TD> 元素的类，而是设置了包含 <TR> 元素的类，这使得您无法影响单元格的边框。我包含了一个已修补的 spmenu.js 文件版本，可以解决这个问题。备份您的 DotNetNuke\controls\SolpartMenu\spmenu.js 文件，然后用修正后的 spmenu.js 文件替换原始文件。如果您不使用 DNN 的 3.0.13 版本，我无法确定行为会如何，因此您可能需要比较我的版本和原始版本。我已经将此报告为 DNN 的一个 bug，因此将来某个版本可能会得到更正。替换此文件后，您应该会看到正确的标签图像，如下所示：

结论

通过 DotNetNuke 创建皮肤甚至标签式菜单非常容易。感谢 DNN 开发人员提供了如此出色的产品！

© . All rights reserved.