说说DNN皮肤制作那点事
本文适于那些曾经亲自动手做过DNN皮肤的dnner。
dnn皮肤的制作并不是一件复杂的事情，与dnn本身相关的逻辑规则并不多。好的dnn皮肤还是要看制作者的网页设计的驾驭能力，我认为这其中包括：(x)html、css及js等。除此之外，制作者需要着力熟悉与学习下dnn皮肤控件的相关内容。
首先阐述下DNN的皮肤机制： 制作者在用户界面文件（皮肤文件）中使用占位符或标识符来描述页面中需要动态表现的部分。当页面被载入时，网站程序通过智能分解、字符串替换等方法将这些标识用对应的应用逻辑取代。在dnn中，动态内容的填充是主要通过模块部分完成的。
需要开发的皮肤文件有两种类型：一种是应用于整个页面的页面皮肤文件，简称“皮肤”（Skin）；一种是应用于模块的模块皮肤文件，简称“容器”（Container）。皮肤用于生成整个页面的表现形式及布局。页面表现形式主要包括页面的背景、头部（header）、底部（footer）等网站多个页面的共用部分。页面布局主要是指将页面的主要内容部分划分成不同的区域（例如左-中-右页面结构，我习惯把这样的区域称之为“窗格”），以便将模块（内容部分）插入相应的区域；容器是指应用于模块的皮肤。容器可以包括模块的边框、标题等修饰性部分以及最大化最小化、rss图标等功能部分。由于一个容器仅用来放置一个动态模块，因此容器仅有一个“窗格”。
关于dnn皮肤的皮肤包组成、两种开发方式（html和ascx）、创建皮肤的流程，dnner可以很容易在网络上找到相关的教程，不再多说。这里我只说一下，我制作皮肤的几个步骤（使用ascx方式）：
0. 由美工或网页设计师制作好网页的静态页面（即demo，里面包括css及js脚本效果）
1. 打开页面源码，在源码顶部添加
<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
以及在皮肤中将要用到的皮肤控件的控件注册，例如：<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
2. 将html文件掐头去尾，即只保留<body></body>之间的部分；并将网页文件所需的css代码统一写到skin.css文件中，所需js代码可以直接写在皮肤文件中或单独写在js文件中（如果js文件与皮肤文件同级目录，则引用地址为<%=SkinPath%>/*.js）
3. 将网页代码中需要动态表现的部分（将要用模块展示的代码）删除，并在最外层节点加入runat="server"属性及id属性；
例如：原始静态代码为<div><!--div中间为模块部分-->新闻列表的静态代码</div>，更改后为<div runat="server" id="RightPane"></div>
4. 将页面中诸如登陆、注册按钮的动态部分使用皮肤控件替换；
5. 更改代码中用到的所有图片、js、flash等资源文件的链接地址。皮肤文件夹的根目录可用<%=SkinPath%>取得，故images/ico.gif可改为<%=SkinPath%>/images/ico.gif。
6. 保存、关闭文件、将文件扩展名更改为.ascx
7. 将.ascx文件与所用到的资源文件打包（.zip格式）。 制作完毕。
容器包的制作方式与皮肤包的制作方式完全相同，唯一不同的是容器文件中只有一个窗格，id为ContentPane
以上步骤除去0外，熟练的话大约10~15分钟应该可以搞定。简单吧！那些学会的dnner都在偷着乐呢~
再说下dnn皮肤制作中需要注意的几点及经验：
1. 皮肤包中定义的css文件应命名为skin.css，容器包中为container.css，皮肤或容器文件中不必写引用代码，dnn会自动加载它们；
2. 皮肤包或容器包的根路径为<%=SkinPath %>
3. 皮肤文件或容器文件中一定要有一个窗格的id定义为ContentPane。 皮肤如果没有ContentPane的话也许不会报错，但是他将会导致许多系统功能失效或报错，因为这些功能控件默认在当前页面的ContentPane窗格加载；
4. 可在窗格节点指定如下属性 ContainerType="G" ContainerName="容器包名称" ContainerSrc="容器文件名称"。如此一来，则放在该窗格内的模块在不指定容器的情况下默认加载ContainerSrc中指定的容器；
5. 所有代码文件使用utf-8编码。
6. 容器的功能菜单如果显示不正常，需要在module.css或container.css中写入如下代码：
.ModuleTitle_MenuItem {}{
}
border: white 0px solid; /**//*override borders*/ 
border
}
.ModuleTitle_MenuItem TD {}{ /**//*TD if menu is using tables*/
cursor: pointer; cursor: hand; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; height: 21px; white-space: nowrap; /**//*Word wrapping menu item now optional*/ padding: 1px 3px 3px 1px; }.ModuleTitle_MenuIcon {}{ cursor: pointer; cursor: hand; background-color: #EEEEEE; width: 15px; height: 100%; /**//*override the default height for icon so that menubreaks can have heights adjusted*/}.ModuleTitle_SubMenu {}{ z-index: 1000; cursor: pointer; cursor: hand; background-color: #FFFFFF; filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3); padding: 1px 1px 1px 1px; /**//*explicitly set padding for sub-menus */}.ModuleTitle_MenuBreak {}{ background-color: #EEEEEE; font-size: 1px; /**//*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/}.ModuleTitle_MenuItemSel {}{ cursor: pointer; cursor: hand; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; background-color: #C1D2EE;}.ModuleTitle_MenuItem {}{ border: white 0px solid; /**//*override borders*/ }.ModuleTitle_MenuItem TD {}{ /**//*TD if menu is using tables*/ cursor: pointer; cursor: hand; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; height: 21px; white-space: nowrap; /**//*Word wrapping menu item now optional*/ padding: 1px 3px 3px 1px; }.ModuleTitle_MenuIcon {}{ cursor: pointer; cursor: hand; background-color: #EEEEEE; width: 15px; height: 100%; /**//*override the default height for icon so that menubreaks can have heights adjusted*/}.ModuleTitle_SubMenu {}{ z-index: 1000; cursor: pointer; cursor: hand; background-color: #FFFFFF; filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3); padding: 1px 1px 1px 1px; /**//*explicitly set padding for sub-menus */}.ModuleTitle_MenuBreak {}{ background-color: #EEEEEE; font-size: 1px; /**//*make sure you take out portal.css ModuleTitle_MenuBreak for this to work*/}.ModuleTitle_MenuItemSel {}{ cursor: pointer; cursor: hand; color: black; font-family: Tahoma, Arial, Helvetica; font-size: 9pt; font-weight: bold; font-style: normal; background-color: #C1D2EE;}
