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

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

DNN摸索系列1:DNN 6 如何添加新皮肤包

操作步骤 1.点击主机设置 2.点击上传皮肤扩展包 3.选择下载好的皮肤包。皮肤包可以去DNN的社区搜索免费下载,网址如下:http://www.codeplex.com/。 4.皮肤包的信...
  • GAMEloft9
  • GAMEloft9
  • 2014年03月21日 15:55
  • 864

前端优化不完全指南

篇幅可能有点长,我想先聊一聊阅读的方式,我希望你阅读的时候,能够把我当作你的竞争对手,你的梦想是超越我。你想超越我,就得了解我懂什么对吧,好,开始阅读~ ~ 哈哈哈 ~ ~ ~ 历时144000...
  • u013063153
  • u013063153
  • 2016年09月26日 10:00
  • 687

Wordpress主题制作不完全指南

程序猿始终不够 新浪微博:weibo.com/ybchris 引言     如果你有些HTML经验或者有些套后台的经历,那么wordpress的主题模板开发方式绝对会令你耳目一新。刚刚接触wor...
  • huyanping
  • huyanping
  • 2012年07月22日 10:16
  • 2870

MFC自绘皮肤编写[笔记一]

用了这么长时间的MFC,感觉不错是不错,可是那个界面呀,真让人难受啊.虽然在VS2008中有了提供,但是还是不理想,所以就想找个皮肤库,现在比较好用的(个人感觉)SkinMagic,不过它不支持VS2...
  • kingsollyu
  • kingsollyu
  • 2011年02月12日 12:15
  • 4098

TensorFlow指南(四)——练习思考:深度神经网络(初级)

本文地址: http://blog.csdn.net/u011239443/article/details/71173351 为什么使用逻辑回归分类器而不是经典感知器(例如:用感知器训练算法训...
  • u011239443
  • u011239443
  • 2017年05月04日 22:14
  • 2232

搜狗拼音个性皮肤制作方法

 现在搜狗拼音已成为广大网友的必备的输入法,其强大的构词功能和个性化的界面令人爱不释手。网上有大量的精美皮肤免费下载(http://pinyin.sogou.com/skins/),还可以在网上直接使...
  • xxyakoo
  • xxyakoo
  • 2008年12月30日 09:26
  • 10403

[DNN功能]自己动手做语言包

  经常看到一写关于DNN的网站上有相应的语言包下载。通过下载语言包并安装可以可以起到对DNN应用程序本地化的效果(我们通常叫汉化)。在看了一段时间的程序后我发现自己动手做语言包也不是很难。只要你英语...
  • esshs
  • esshs
  • 2005年05月25日 21:36
  • 1538

DNN皮肤开发

 制作皮肤没有特定的顺序,但如果按如下顺序操作会更好。 设置皮肤开发环境为了简化皮肤的开发并加快后续打包的速度,建议按如下的文件结构组织文件/Skins  /SkinName ( 你开发的皮肤包...
  • hehia0070
  • hehia0070
  • 2007年10月29日 13:30
  • 767

VclSkin使用简要 for c++ builder

1:使用SkinBuilder简作好皮肤后,保存到任一位置。 2:在安装好VclSkin的环境下,拖一个SkinData到界面上--选中--在Properties选项卡中选--SkinStore--...
  • goodai007
  • goodai007
  • 2011年11月16日 11:34
  • 1663

C#皮肤-实现原理系列教程

文章导航 第一章                 引言                      第一节         引言         第二节         皮肤使用须知与常见问题...
  • u011131296
  • u011131296
  • 2014年03月05日 20:40
  • 1075
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DNN皮肤制作不完全指南
举报原因:
原因补充:

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