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大环境中是个人认为算是一个比较成功的内容管理平...

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

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

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

前端优化不完全指南

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

HTML5本地存储不完全指南

编辑推荐:这篇文章来自于黑客志,对HTML5的本次存储方式进行了非常全面的介绍和分析,对于学习HTML5的开发者来说,不容错过哦。  历史  在HTML5本地存储之前,如果我们想在客户端保...

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

出处:http://blog.csdn.net/vagrxie/article/details/5952310 前言     Bullet据称为游戏世界占有率为第三的物理引...

Chrome 控制台不完全指南

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

HTML5本地存储不完全指南

历史  在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:  HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个H...

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

写于:2016-4-15几个基本要用的东西: 1、微信公众平台 网址:https://mp.weixin.qq.com 可以在此申请微信公众号,获取微信测试号。 微信测试号拥有所有功能权限,...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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