DNN皮肤制作不完全指南

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] &nbsp;&nbsp; [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] &nbsp;&nbsp; [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，到此，一个五脏俱全的皮肤包宣布完成，嘿嘿，简单吧？

　　容器的制作方式与皮肤相同，不再赘述！