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内容的地方,放入相应的标签。
由于制作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
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 >
< 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,到此,一个五脏俱全的皮肤包宣布完成,嘿嘿,简单吧?
容器的制作方式与皮肤相同,不再赘述!