DNN皮肤一直披着神秘的面纱，其实它的制作并不复杂，当然前提是你对制作网页有一定的了解。简单而言，DNN的皮肤制作就是普通网页＋DNN标签（也被翻译为标志，中文暂无统一的译法
）。
由于制作DNN皮肤要求对网页制作有一定了解，所以本文假定读者已经具备读懂本文涉及的网页制作知识。如果对本文提到的网页知识有不明白的地方，请参阅相关的网站或访问www.dnngo.com，推荐阅读WEB 2.0的知识。
DNN皮肤知识速览（更详细资料，请阅读相关文章或访问www.dnngo.com，推荐阅读“
DNN皮肤生成机制剖析”和“DNN皮肤应用与制作常见问题”）
制作皮肤之前，首先了解一下一个皮肤包通常包括什么？一个皮肤包（广义）包括一个皮肤包（狭义）和一个容器包。
什么叫皮肤包（狭义）呢？简单来说，就是由一系列“定义一个网站的页面版面布局文件”构成的包。
什么叫容器包呢？简单来说，就是由一系列“定义一个放置DNN模块的各种标签的版面布局文件”构成的包。
一个皮肤包（狭义）包括什么呢？通常会包括以下文件，*.htm(或*.html)，*.ascx，图片文件，skin.css，skin.xml。
一个容器包包括什么呢？通常会包括以下文件，*.htm(或*.html)，*.ascx，图片文件，container.css，container.xml。
上述包中的*.htm,*.html,*.ascx是皮肤的“排版”文件，图片文件主要包括2种，一种是皮肤和容器所需要用到的图片，另一种是同名皮肤和容器的预览图片，*.css是皮肤或容器的样式定义文件，*.xml是皮肤或容器的标签属性定义文件。
DNN皮肤制作详细步骤（以下步骤顺序仅供参考，可根据个人爱好调整先后）：
1、规划网页布局。
2、根据规划撰写*.css样式表（对此有困难，请阅读WEB2相关知识）
3、根据规划编写*.xml，为相应的标志指定属性值。（对此有困难，请阅读www.dnngo.com Betty 翻译的4.0.2版本DNN文档皮肤白皮书，属性值的设置参考附录B）
4、编写皮肤文件
5、打包，生成皮肤包。
我们今天讨论的重点是第4步：如何编写皮肤文件？好，我们开始吧！
1、打开你的DreamWeaver，设置编码为UTF-8（理由：HTML皮肤格式转换为ASCX皮肤格式时，如果编码不是UTF-8的话，其中的中文会被丢失，所以此步不能省略。）具体操作如下：点菜单“编辑”－“首先参数”－“新建文档”－“默认编码”＝＝》改为UTF-8。
2、新建一个静态网页。
3、点击CSS操作面板，点右键，点“附加样式表”，把skin.css附加到当前网页中。
4、根据构思，把版面布局完成。其中需要放入DNN内容的地方，放入相应的标签。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5<title>皮肤制作示例</title>
6<link href="skin.css" rel="stylesheet" type="text/css" />
7</head>
8
9<body>
10<!--定义外层 -->
11<center>
12<div class="pagemaster">
13
14<!--定义控制栏 -->
15<div class="skinmaster">
16 <div id="ControlPanel" runat="server" class="contentpane" ></div>
17</div>
18
19<!--定义Logo和Banner -->
20<div class="skinmain">
21<div class="skinheader">
22 <div class="skinlogo" >[LOGO]</div>
23 <div class="skinbanner" >[BANNER]</div>
24</div>
25
26<!--定义Menu -->
27<div class="skingradient" align="left">[MENU]</div>
28
29<!--定义导航 -->
30<div class="sitemap" align="left">
31 <div class="skinuser"> [USER] [LOGIN]</div>
32 <div class="skinbreadcrumb">SiteMap-->[BREADCRUMB]</div>
33</div>
34
35<!--下面进行模块区的定义 -->
36
37<!--定义模块区顶层 -->
38<div class="toppane" id="TopPane" runat="server" valign="top" align="center"></div>
39
40<!--定义模块区中间层，根据需要，本层分成了三个列 -->
41<div class="main" >
42 <div class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></div>
43 <div class="rightpane" id="RightPane" runat="server" valign="top" align="center"></div>
44 <div class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></div>
45</div>
46
47<!--定义模块区底层 -->
48<div class="bottompane" id="BottomPane" runat="server"></div>
49
50<!--定义版权声明 -->
51<div class="copyright">
52<div class="copyrightline"></div>
53[COPYRIGHT]
54</div>
55</div>
56</div>
57</center>
58</body>
59</html>
60
5、完成设计，确认版面预览正确后，把body标签内的东西保留，其它的去掉。上例处理后，结果如下：
<!--定义外层 --><center><div class="pagemaster"><!--定义控制栏 --><div class="skinmaster"> <div id="ControlPanel" runat="server" class="contentpane" ></div></div><!--定义Logo和Banner --><div class="skinmain"><div class="skinheader"> <div class="skinlogo" >[LOGO]</div> <div class="skinbanner" >[BANNER]</div></div><!--定义Menu --><div class="skingradient" align="left">[MENU]</div><!--定义导航 --><div class="sitemap" align="left"> <div class="skinuser"> [USER] [LOGIN]</div> <div class="skinbreadcrumb">SiteMap-->[BREADCRUMB]</div></div><!--下面进行模块区的定义 --><!--定义模块区顶层 --><div class="toppane" id="TopPane" runat="server" valign="top" align="center"></div><!--定义模块区中间层，根据需要，本层分成了三个列 --><div class="main" > <div class="leftpane" id="LeftPane" runat="server" valign="top" align="center"></div> <div class="rightpane" id="RightPane" runat="server" valign="top" align="center"></div> <div class="contentpane" id="ContentPane" runat="server" valign="top" align="center"></div></div><!--定义模块区底层 --><div class="bottompane" id="BottomPane" runat="server"></div><!--定义版权声明 --><div class="copyright"><div class="copyrightline"></div>[COPYRIGHT]</div></div></div></center>
6、保存。(暂定为 myskin.html)
7、把skin.xml，skin.css，用到的图片，myskin.html打包，格式为ZIP包，压缩率为标准。
8、上传、预览本皮肤，预览正确的话，请截屏，把图片放在皮肤所在目录，文件名与皮肤相同，在本例文件名应为：myskin.jpg。
9、重新生成皮肤包，包含如下文件：skin.xml，skin.css，用到的图片，myskin.html，myskin.jpg，格式为ZIP包，压缩率为标准。
OK，到此，一个五脏俱全的皮肤包宣布完成，嘿嘿，简单吧？
容器的制作方式与皮肤相同，不再赘述！
