DotNetNuke 的基本皮肤创建器

R2B2

4.77/5 (36投票s)

2007 年 12 月 7 日

CPOL

11分钟阅读

197972

5642

一个用于为 DotNetNuke 门户创建皮肤的应用程序，带有浏览器预览

引言

我非常喜欢 DotNetNuke (DNN) 以及您能用它实现的各种功能。它是一个出色的框架，您可以用来创建网站，让您的用户能够快速轻松地掌控自己的内容。DotNetNuke 最强大的优势之一是它通过皮肤将内容与呈现分离。您可以自由地对其进行几乎任何您想要的操作。

这种灵活性也是初次学习 DNN 皮肤制作时最大的障碍之一。DNN 附带的默认皮肤使用了渐变，这使得菜单对我个人来说很难阅读。所以，我想改变它。经过数小时的努力，甚至购买了一套声称能够轻松实现此功能的模块，我仍然无法改变我真正想要的那个东西：菜单。所以，我做了任何一个好程序员都会做的事情。我编写了一个程序来为我解决这个问题。

背景

我工作的绝大多数网站的追随者并不关心网站的外观（家人、小型俱乐部和组织网站）。他们只想要内容。我没有足够的时间或金钱来学习 Photoshop 或类似程序。我只想拥有一个工具，能够让我选择网站基本元素（背景、标题、菜单和页脚）的颜色和字体。我还想设置网站的徽标，或者仅仅输入一些文本并更改字体以及显示位置。所有这些我都要，再加上能够看到它在示例页面上的样子，以便我能看到颜色如何搭配。

此外，我真的很想深入了解 C# Express 和 .NET 2.0，看看它们有什么功能。所以我试了一下，结果非常满意。这甚至稍微恢复了我对微软的信心，他们实际上免费提供了一个可以用来编写程序而无需花费 1000 美元的程序。再加上增强的网页浏览器控件，这增强了我编写有用东西的信心。将近两年后，我终于完成了可以与他人分享的东西。

然而，在我们深入探讨应用程序之前，让我们先回顾一下基础知识。

我不确定这是否是官方的 DNN 术语，但我称之为包含要上传到 DNN 站点的皮肤和容器的 ZIP 文件为“包”。皮肤在名为 skins.zip 的 ZIP 文件中，而容器在名为 containers.zip 的 ZIP 文件中。此外，我使用这个概念来分组一些全局使用的样式。DNN 在其自己的页面上使用一组 CSS 类，并且一些模块也会自动使用它们。这些类存储在 skin.css 文件中。由于它们在一个文件中，因此被此包中的所有皮肤共享。

皮肤

皮肤是一组文件，用于定义您 DNN 网站上的网页的外观。您可以为每个不同的页面分配不同的皮肤，或者为一个站点分配一个。您可以在一个包中定义多个皮肤。皮肤几乎可以定义网站外观的任何方面。构成皮肤的文件包括

至少一个定义页面布局的 ASPX 或 HTML 文件（必需）。此文件将定义用户可以放置模块的区域。
一个名为 skin.css 的层叠样式表 (CSS) 文件（必需）。
用于显示的图像（必需）。
一个 XML 文件，用于与 HTML 文件合并，以帮助扩展属性（可选）。
皮肤外观的缩略图（可选，但最好有）。

所有这些文件都打包到一个单一的 ZIP 文件中，文件名就是皮肤的名称（例如，MySkin.zip）。所有这些都由应用程序为您完成！您只需通过界面上传皮肤即可。

容器

容器是 DNN 中每个模块的“装饰”。每个模块都可以拥有一个容器，或者将其关闭以独立显示。构成容器的文件包括

至少一个定义容器布局的 ASPX 或 HTML 文件（必需）。
一个名为 container.css 的层叠样式表 (CSS) 文件（必需）。
用于显示的图像（必需）。
容器外观的缩略图（可选）。

使用应用程序

基础皮肤创建器使您能够控制网站的外观。您可以创建皮肤和容器，还可以编辑 DNN 使用的一些样式。

主屏幕

应用程序启动时显示文章开头截图中的窗口。启动时会自动创建一个默认的皮肤和容器。屏幕分为两个窗格。左侧窗格包含两个部分，顶部部分包含一个树形结构，其中包含皮肤内的所有项目。左侧窗格的下半部分是属性网格，显示所选对象的所有可编辑属性。当您更改属性时，右侧窗格中的预览将发生变化。

右侧窗格包含皮肤在浏览器中外观的预览。请记住，这不会完全相同。它很接近，但不会完全相同。它还包含 HTML 和皮肤所代表的 XML 的两个选项卡。这更多是为了调试。我认为对于那些想更多地了解皮肤制作或者想知道每个对象的格式的人来说可能很有用。我现在将重点介绍一些更相关的属性。

布局类型

目前，基础皮肤创建器支持两种不同的皮肤布局类型

横向菜单五窗格具有横向菜单，包含顶部、左侧、内容、右侧和底部窗格。
纵向菜单两窗格具有纵向菜单，包含内容和右侧窗格。

要更改此属性，请单击您希望更改布局的皮肤，然后在“外观”类别下更改 LayoutType 属性。

样式

每个部分都由一个样式控制。样式决定其外观。基础皮肤创建器可以编辑以下样式

包	皮肤	菜单（在皮肤下）	容器
Head 正常普通粗体普通禁用普通红色普通文本框 SkinObject 标准按钮副标题副副标题	页脚样式徽标样式菜单样式页面样式标题样式	菜单箭头样式菜单容器样式菜单图标样式菜单项样式根菜单箭头样式选中的菜单项样式子菜单项样式	标题样式正文样式

通过设置这些样式中的任何一个属性，您将改变它在网页预览中的外观，进而改变网站的外观。

菜单

大多数样式都一目了然。但菜单不是。菜单是皮肤中最棘手的部分之一。菜单的每个元素都有自己的 CSS 类，必须进行定义。以下是基础皮肤创建器可编辑的菜单类的列表及其用途

MenuArrowStyle：DNN 在选定页面旁边放置一个箭头。
MenuContainerStyle：菜单的背景。
MenuIconStyle：每个菜单都可以分配一个图标；此类围绕它。
MenuItemStyle：所有未选中的菜单项。
MenuRootArrowStyle：DNN 在选定页面的根菜单项旁边放置一个箭头。
MenuSelectedItemStyle：选中的菜单项。
MenuSubMenuItemStyle：选中项下方的菜单项。

注意：基础皮肤创建器仅适用于 Solution Partners (SolPart) 菜单系统。这是 DotNetNuke 的默认菜单系统。

徽标

目前，该应用程序支持四种类型的徽标：文本、图像、DNN 和无。这些可以在 LogoType 属性中更改。我希望将来能扩展到支持图像和文本，但目前只有这些。文本和图像类型不言而喻。您可以选择一个图像作为徽标显示，或编写一些文本并按您喜欢的方式对其进行对齐。DNN 允许您从“管理 -> 站点设置”页面选择一个徽标。DNN 类型将在 ASCX 文件中放入一个标签，该标签将获取您从该页面选择的图像。无同样不言而喻。

DNN 控件

DNN 允许您添加所谓的 SkinObjects。SkinObjects 允许您为您的网站添加功能，而无需添加模块，并且它们可以出现在每个页面上。该应用程序允许您根据需要添加或删除它们。您可以为皮肤添加/删除的 SkinObjects 是（按字母顺序排列）

Breadcrumbs：显示用户在网站上的位置。
Copyright：在页脚显示版权声明。
Date：在页面的左上角显示今天的日期。
Login：在页面的右上角显示注册/登录链接。
Privacy：在页脚显示隐私链接。
Search：在菜单对面显示站点搜索工具箱和链接。
Terms：在页脚显示条款链接。

您可以为容器添加/删除的 SkinObjects（按字母顺序排列）是

Help：在标题的右侧显示帮助图标。
Icon：在标题的左侧显示模块分配的图标（如果已分配）。
Print：在页脚的右侧显示打印图标。这允许用户仅打印页面上的模块。
Syndicate：在页脚的右侧显示 XML 图标。这允许用户将 RSS 阅读器指向模块以接收任何更改。
Visibility：在标题的右侧显示加号/减号，允许用户显示/隐藏模块。

Power Editor

此应用程序最初的灵感来自于让我的工作更轻松。那么，为什么我要到处奔波确保所有字体都是 Verdana 呢？这时就有了 Power Editor。您可以更改您想要的任何样式的背景颜色、字体、粗体、斜体、字号、字体名称和前景色。或者所有样式。只需点击“工具 -> Power Editor”菜单项。

创建上传包

一旦您对皮肤和容器的外观满意，您就可以创建包了。该应用程序支持导出 ASCX 文件或 HTML 和支持的 XML 文件。

您可以通过单击“工具 -> 创建包”菜单选项来创建包。如果您之前未为此文件创建过包，应用程序会询问您保存文件的位置。您必须使用 *.zip 扩展名，文件名将成为皮肤的名称。完成后，您可以导航到您的 DNN 站点。登录后，转到“管理 -> 皮肤”或“主机 -> 皮肤”页面。在模块菜单或页面底部单击“上传皮肤”。浏览到您刚刚创建的皮肤并选择它。一旦被选中，点击“保存文件”链接，它将上传并处理它。皮肤和容器都将被处理。

现在皮肤已经上传，您可以将其选为门户的默认皮肤。要做到这一点，选择“皮肤”组合框并选择您的皮肤名称（ZIP 文件的名称）。您创建的所有皮肤都将出现。选择“应用”按钮将其应用于所有门户页面和管理页面。如果您不希望它影响管理页面，则取消选中“应用到”标签下方的“管理”复选框。

请注意，如果您仅使用 HTML 文件然后对其进行编辑，您还必须包含 XML 文件，以告知 DNN 如何处理文件并正确设置菜单颜色。HTML 文件由 DNN 处理成 ASCX 文件。