DNNGO-低头做事,抬头做人!

                    天道酬勤!
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DNN皮肤制作不完全指南

Posted on 2006-04-24 00:12  如风  阅读(7060)  评论(5编辑  收藏  举报


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

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