DNN皮肤制作不完全指南

Posted on 2006-04-24 00:12 如风阅读(4575) 评论(5) 编辑收藏网摘所属分类: 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内容的地方，放入相应的标签。

<!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

<title>皮肤制作示例</title>
6

</head>
8

<body>
10

11

<center>
12

<div class="pagemaster">
13

15

<div class="skinmaster">
16

<div id="ControlPanel" runat="server" class="contentpane" ></div>
17

</div>
18

20

<div class="skinmain">
21

<div class="skinheader">
22

<div class="skinlogo" >[LOGO]</div>
23

<div class="skinbanner" >[BANNER]</div>
24

</div>
25

27

<div class="skingradient" align="left">[MENU]</div>
28

30

<div class="sitemap" align="left">
31

<div class="skinuser"> [USER]  [LOGIN]</div>
32

<div class="skinbreadcrumb">SiteMap-->[BREADCRUMB]</div>
33

</div>
34

36

38

<div class="toppane" id="TopPane" runat="server" valign="top" align="center"></div>
39

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

48

<div class="bottompane" id="BottomPane" runat="server"></div>
49

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标签内的东西保留，其它的去掉。上例处理后，结果如下：

</div>

<div class="skinbanner" >[BANNER]</div>

</div>

<div class="skinuser"> [USER]  [LOGIN]</div>

<div class="skinbreadcrumb">SiteMap-->[BREADCRUMB]</div>

</div>

</div>

[COPYRIGHT]

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

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