花费了三个多小时，满世界的找教程，终于鼓捣出以下这个简陋的“毛坯房”：

自认为对HTML和CSS不是一般的熟悉，但是在学习DNN的皮肤开发时，还是从观念上，主要是DNN和HTML的耦合度上不太习惯。

因此对自己的学习进度不太满意。

从另一个角度，隐约觉得，如果对这种模式习惯之后，在网站开发的各个方面可能会有非常大的提高！

对这次的尝试留个痕迹吧：

一、目录结构：

ITPlus.mySkin01 （皮肤文件夹，和皮肤名称相同，使用“.”可防止同名冲突）

|--　images （皮肤使用到的图片文件夹，背景图等都放在这里）

|--　ITPlus.mySkin01.html （皮肤主文件，UTF-8格式，和皮肤文件夹同名 *主要）

|--　ITPlus.mySkin01.doctype.xml （DocType文件，和皮肤文件夹同名，可选，为兼容DNN5以下版本，有比没有好）

|--　ITPlus.mySkin01.JPG （皮肤截图，和皮肤文件夹同名）

|--　skin.css （皮肤样式，默认是这个名，如果改成其他名称，必须在HTML中显示调用 *主要）

|--　skin.js （JavaScript文件，可选，名字任意，需在HTML中显示调用）

DNN的皮肤开发有两种方式：

A：HTML方式：和编写普通的静态WEB页面没什么区别，只是多了一些DNN的皮肤对象和服务器端布局标签

B：ASCX方式：和编写普通的.net控件差不多，只是多了一些DNN的服务器端标签

我使用了第一种方式，感觉这种方式更“底层”一些，网上许多前辈也是这么推荐的

将皮肤包上传之后，DNN会自动将HTML解析成ASCX文件

后来我发现，其实这两种方式并不对立，即使使用HTML方式，到最后也要修改ASCX文件

 二、遇到的麻烦事

1、HTML中含有Javascript时发生上传错误（麻烦程度：★★★★★）

我的皮肤里使用了一个Flash的幻灯效果，这个效果是使用Javascript调用swf和几张图片来实现了

因此在我的HTML皮肤主文件里，嵌有有30多行的js代码。预览时一切正常

上传时提示错误：异常System.IndexOutOfRangeException: 索引超出了数组界限。

开始时以为是皮肤对象写错了，全删掉试试，不行

又以为是服务器端面板标签的写法有问题，全部删掉，还是不行

终于怀疑到那个30多行的js代码，注释掉，再试，竟然还是不行！

一狠心，把这些js代码全部删掉，再试。。。。红色的错误信息终于消失了

之后就是在那些js代码里寻找元凶，经过反复的排除和上传测试，终于将问题锁定在这一行：

document.write("<object ......>");

问题就出在那两个“<>”上，如果没有这两个角号，一切正常，否则就出错！

找到问题就好，把这30多行的代码单独写到外部的JS文件里，主文件使用<script src...>显示调用

再上传时绿灯一闪，大功告成。

看来DNN在对HTML解析成ASCX时，对于JS的处理还是有些问题

后来又发现一个问题，在那些JS代码里，调用了几个图片的地址，由于DNN的“一切都运行在根目录”的特性，造成了这几个图片显示不出来

这个倒不难，将那些JS代码写到一个函数里，主文件调用这个函数时将皮肤的路径通过参数穿过去就OK 了！如下：

showSwfBanner("<%= SkinPath %>");

这时就只能在ASCX文件里改了，所以我上面说过：HTML和ASCX两种方式并不对立！

 2、使用SOLPARTMENU皮肤对象的怪问题（麻烦程度：★★★☆☆）

<div class="menuBox">
      <div class="menuBar">[SOLPARTMENU]</div>
      <div class="searchBar">[SEARCH]</div>
</div>

目的是在同一行，左边显示主菜单，右边显示搜索框

很简单的功能，但是上传成功后，搜索框却怎么也显示不出来。。。

后来发现，必须为SOLPARTMENU所在的DIV设置固定宽度才行 -_- !!!

三、常用的皮肤对象（skin object）

 1、ASCX2声明：

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>

2、HTML占位：

[LOGO]
[SOLPARTMENU]
[SEARCH]
[BREADCRUMB]
[USER]
[LOGIN]
[COPYRIGHT]
[TERMS]
[PRIVACY]

四、下一步计划

学习“容器”。。。