DNN皮肤制作不完全指南

原创 2007年09月26日 10:48:00
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,到此,一个五脏俱全的皮肤包宣布完成,嘿嘿,简单吧?

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

相关文章推荐

DNN6皮肤制作过程细解

概述 一直在关注各个CMS系统,作为多年的ASP.NET程序员还是多花了一些心思在DNN上。毕竟它经过多年的成熟社区发展,围绕DNN的生态圈在DotNet大环境中是个人认为算是一个比较成功的内容管理平...

5.Chrome开发者工具不完全指南:(三、性能篇)

一个网站的性能主要关乎两项,一是加载性能、二是执行性能。第一项可以利用Network来分析, 我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验,不过在此之前, 我强烈推荐你去阅读《web高性...
  • enlyhua
  • enlyhua
  • 2016年08月26日 12:00
  • 226

微信硬件蓝牙开发各种坑不完全开发指南

写于:2016-4-15几个基本要用的东西: 1、微信公众平台 网址:https://mp.weixin.qq.com 可以在此申请微信公众号,获取微信测试号。 微信测试号拥有所有功能权限,...

Chrome开发者工具不完全指南(五、移动篇)

前面介绍了Chrome开发者工具的大部分内容工具,现在介绍最后两块功能Audits和Console面板。 一、Audits   Audits面板会针对目前网页提出若干条优化的建议,这些建议分为两大...

Bullet物理引擎不完全指南(Bullet Physics Engine not complete Guide)

转自:http://blog.csdn.net/vagrxie/article/details/5952310 前言     Bullet据称为游戏世界占有率为第三的物理引擎,也是...

前端优化不完全指南

首页 所有文章 JavaScript HTML5 CSS 基础技术 职场 工具资源 前端小组 更多频道▼ - 导航条 - 首页所有文章 JavaScriptHTML5 CSS...

Chrome 控制台不完全指南

Chrome的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的Frontender」Bug无处遁...

chrom开发者工具不完全指南(笔记一)

chrom开发者工具不完全指南
  • ZJDWHD
  • ZJDWHD
  • 2016年10月19日 09:32
  • 250

Android编程规范不完全指南

1. 命名规则 1.1 类名,接口名: 以大写开头,如果一个类的类名由多个单词组成,所有单词的首字母必须大写,单词尽量写全称,不要简写,除非约定俗成的名字,例如:URL,RTMP,RTSP...

Chrome开发者工具不完全指南(六、插件篇)

本篇是Chrome开发者工具的结尾篇,最后为大家介绍几款功能强大的插件。在chrome商店里面有很多插件,没事建议大家去逛逛。不过需要FQ,所以诸位请自备神器。 一、皮肤插件   首先是大家期盼已...
  • jeofey
  • jeofey
  • 2016年01月05日 11:41
  • 645
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DNN皮肤制作不完全指南
举报原因:
原因补充:

(最多只允许输入30个字)