蜗牛，在赛跑

--努力去改变吧
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

DNN皮肤制作

Posted on 2007-03-23 17:57  body  阅读(381)  评论(0)  编辑  收藏  举报
自从DNN装好以来，花了段时间看代码，很吃力且无所得。后来看二十四画生兄的博客，开始有了些研究DNN的方向和方法。那就是从DNN的实际应用着手。感受一下DNN的功能。最近一次偶然加入了DNN/CS团队，开始做我的DNN的第一个应用：皮肤制作。

一、几个概念

1 皮肤 (Skin)。

皮肤的布局与设计就是整个网站的整体风格设计，其中包括页首和页尾的设计，LOGO的位置，Banner的位置，菜单的样式，是水平还是垂直等。

2 容器（Container）。

容器是指网页中每个模块的样式风格，它也是属于一种可以应用于内容模块的皮肤定义。

3 皮肤包

皮肤包或者容器包由构成一个完整皮肤的大量文件组成：

·         *.htm, *.html 文件--在皮肤上传机制中用来建立*.ascx文件的皮肤定义文件。

·         *.ascx 文件-- 皮肤机制对html文件进行必须的格式化和预编译后产生的用于定义皮肤  的用户控件。

·         *.css 文件--与皮肤相对应的样式表文件。

·         *.gif, *.jpg, *.jpeg, *.png ——皮肤中的图形文件。

·         *.* --其他在皮肤中使用到的资源文件（注意需要在站点上传文件拓展名设置中允许上传。）

4 皮肤对象

皮肤对象是指DotNetNuke以ascx文件提供的位于admin/skin/下的用户控件。用来实现皮肤的一些共同属性，包括菜单对象，日期对象，登陆对象，隐私声明对象等。

二、皮肤的制作

1 前期准备

对html和CSS比较熟悉。

选用合适的工具，一般来讲，我们做网页设计大都用Dreamweaver。在http://www.thinkofdesign.net 上有Dreamweaver extension for DotNetNuke3.x。是个Dreamweaver的小插件，非常方便制作皮肤。安装之后，菜单会出现在”插入”。在选择插入skin object后，在弹出的窗口中可以设定skin object的样式。

 

2 皮肤的制作方式

·         使用asp.net的user control（用户控件）制作（后缀名位ascx的文件）。这种方式比较适合asp.net的开发人员。

·         使用HTML文件，也就是设计好一个HTML文档，然后将skin object放在合适的位置。这种方式比较简单，很容易上手。

 

3 皮肤制作的步骤

·         确定网站的整体风格和布局。

一般来讲，我们会先用有关的网页设计工具将站点的整体风格和布局确定下来。形成一个静态的HTML文件。在这个HTML文件中，呈现并留出页面的关键元素。例如：

 

在这个简单的例子中，包含了页面的菜单位置（黄色条区域），登陆入口，搜索，logo等。并实现了设定样式表的风格。

         HTML的代码：

          

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<link href="skin.css" type=text/css rel=stylesheet>
<title>一个简单的例子</title>
</head>
<body>
<table width="800" border="0" align="center" cellpadding="1" cellspacing="1" bgcolor="#FFFFFF" class="border">
  <tr>
    <td width="200" height="60" rowspan="2" class="border_br">&nbsp;</td>
    <td width="600" height="20" align="right" bgcolor="#444EFF" class="border_b">注册 登录</td>
  </tr>
  <tr>
    <td height="40" class="border_b" align="center" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFFF', endColorStr='#6799FF', gradientType='1')">搜索</td>
  </tr>
  <tr bgcolor="#FECE10">
    <td height="20" colspan="2">&nbsp;</td>
  </tr>
  <!--Banner--Begin-->
      <tr>
           <td colspan="2" background="images/banner.jpg" height="100" width="800" align="right"></td>
      </tr>
 <!--Banner--End-->      
</table>
<!--Content--Begin-->
<table width="800" border="0" class="border" align="center">
  <tr>
    <td width="200" align="left" id="LeftPane" runat="server">&nbsp;</td>
    <td width="400" align="center" id="ContentPane" runat="server">&nbsp;</td>
    <td width="200" align="right" id="RightPane" runat="server">&nbsp;</td>
  </tr>
 </table> 
 <!--Content--End-->
 <!--CopyRight--Begin--> 
 <table width="800" border="0" class="border" align="center">
  <tr>
      <td width="800" height="40" colspan="3" align="center">
      </td>
  </tr>
 <!--CopyRight--End--> 
</table>
</body>
</html>

·         确定网站的呈现风格

网站的显示内容是分为3栏还是2栏，也就是是左右分栏还是左中右分栏或者其他更复杂的分栏方式。一般来讲，我们都会采用系统默认的方式，用3个位置来呈现网页的内容：LeftPane，ContentPane，RightPane。这三个位置的名称是固定的，不可以更改。而且每个网页设计至少要有ContentPane。使用方法很简单，就是给表格的单元格一个ID名称和一个runat=”server”属性。例如：

<!--Content--Begin-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"  class="border">
  <tr>
       <td width="1"></td>
    <td  valign="top" align="left" id="LeftPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="center" id="ContentPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="right" id="RightPane" runat="server">&nbsp;</td>
  <td width="1"></td>
  </tr>
</table> 
 <!--Content--End-->


注：1、<td width="1"></td>的作用是为了给单元格之间一个分割区域。

     2、对LeftPane，ContentPane，RightPane的宽度根据网站的实际情况使用，建议不要写死（也就是TD的width属性值写了个具体的值）。因为模块之间宽度大小可能不一样。具体效果应放在模块里控制。当然，具体情况具体对待。

·         假如其他skin object，其他对象包括：菜单，logo，登录入口，用户显示，时间对象，隐私声明等。例：

Ascx文件：

 

 

<%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU" Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="CURRENTDATE" Src="~/Admin/Skins/CurrentDate.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/LOGO.ascx" %>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="border">
  <tr>
    <td   width="200" rowspan="2"><dnn:LOGO runat="server" id="dnnLOGO" /></td>

    <td   align="right" bgcolor="#FFFFFF"><dnn:SEARCH runat="server" id="dnnSEARCH" />&nbsp;&nbsp;<dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" />&nbsp;&nbsp;|&nbsp;&nbsp;<dnn:USER runat="server" id="dnnUSER" />&nbsp;&nbsp;|&nbsp;&nbsp;<dnn:LOGIN runat="server" id="dnnLOGIN"/></td>
  </tr>
  <tr>
    <td align="right" id="ADPane" runat="server" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFF0', endColorStr='#2011ff', gradientType='1')">&nbsp;</td>
  </tr>
  <tr>
    <td height="35" colspan="2" nowrap background="<%=SkinPath%>images/top_bg.gif"><dnn:SOLPARTMENU runat="server" id="dnnSOLPARTMENU"/></td>
  </tr>
  <!--Banner--Begin-->
  <tr>
       <td colspan="2" background="<%=SkinPath%>images/banner.jpg" height="100" width="100%" align="right"></td>
  </tr>
 <!--Banner--End-->  
</table>
<!--Content--Begin-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"  class="border">
  <tr>
       <td width="1"></td>
    <td  valign="top" align="left" id="LeftPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="center" id="ContentPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="right" id="RightPane" runat="server">&nbsp;</td>
  <td width="1"></td>
  </tr>
</table> 
 <!--Content--End-->
 <!--CopyRight--Begin--> 
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td width="800" height="40" colspan="3" align="center">
       <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" /><dnn:TERMS runat="server" id="dnnTERMS" /><dnn:PRIVACY runat="server" id="dnnPRIVACY" />
  </td>
  </tr>
</table>
 <!--CopyRight--End-->

 

HTML文件：

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" class="border">
  <tr>
    <td   width="200" rowspan="2">[LOGO]</td>
    <td   align="right" bgcolor="#FFFFFF">[ SEARCH] &nbsp;&nbsp; [CURRENTDATE] &nbsp;&nbsp;|&nbsp;&nbsp; [USER] &nbsp;&nbsp;|&nbsp;&nbsp; [LOGIN] </td>
  </tr>
  <tr>
    <td align="right" id="ADPane" runat="server" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFF0', endColorStr='#2011ff', gradientType='1')">&nbsp;</td>
  </tr>
  <tr>
    <td height="35" colspan="2" nowrap background="<%=SkinPath%>images/top_bg.gif">[ SOLPARTMENU] </td>
  </tr>
  <!--Banner--Begin-->
  <tr>
       <td colspan="2" background="<%=SkinPath%>images/banner.jpg" height="100" width="100%" align="right"></td>
  </tr>
 <!--Banner--End-->  
</table>
<!--Content--Begin-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"  class="border">
  <tr>
       <td width="1"></td>
    <td  valign="top" align="left" id="LeftPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="center" id="ContentPane" runat="server">&nbsp;</td>
    <td width="1"></td>
  <td  valign="top" align="right" id="RightPane" runat="server">&nbsp;</td>
  <td width="1"></td>
  </tr>
</table> 
 <!--Content--End-->
 <!--CopyRight--Begin--> 
  <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td width="800" height="40" colspan="3" align="center">
       [COPYRIGHT] [ TERMS] [ PRIVACY]
  </td>
  </tr>
</table>
 <!--CopyRight--End-->


·         定义统一的CSS来实现页面效果

这是属于网站美化设计的内容，就是用一个CSS来定义网站所使用的文字的字体，大小，颜色以及表格的边框的效果，图片等。还有菜单的文字字体与颜色等效果。例：

 

/*菜单背景CSS：*/
.MainMenu_MenuContainer {
      background-image: url(mybar.jpg);
}

/*菜单项目css：*/
.MainMenu_MenuItem {
      cursor: hand; 
      color: White; 
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10pt;
      font-weight: normal;
      font-style: normal;
      border-left: #333333 0px solid;
      border-bottom: #333333 1px solid;
      border-top: #333333 1px solid;
      border-right: #333333 0px solid;
/*菜单被选择css：*/
.MainMenu_MenuItemSel {
      background-color: #CCCCCC;
      cursor: hand;
      color: White; 
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10pt;
      font-weight: normal;
      font-style: normal;
}



注：样式表设置好后，将样式表加入到文件中

<link href=”mystyle.css” rel=”stylesheet” type=”text/css”>

 

·         容器的制作(Container)

通常容器不是一个完整的HTML文件，而是只是一个HTML表格。例：

 

<%@ Control language="vb" CodeBehind="~/admin/Containers/container.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="ACTIONS" Src="~/Admin/Containers/SolPartActions.ascx" %>
<%@ Register TagPrefix="dnn" TagName="ICON" Src="~/Admin/Containers/Icon.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>
<table width="100%" border="0" cellpadding="0" cellspacing="3"><tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
  <tr>
    <td valign="top" height="20" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="left"><dnn:ACTIONS runat="server" id="dnnACTIONS" />&nbsp;</td>
    <td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="left"><dnn:ICON runat="server" id="dnnICON" />&nbsp;</td>
    <td valign="top" width="100%" background="<%= SkinPath %>bgcolor.gif" align="left" class="border_b"><dnn:TITLE runat="server" id="dnnTITLE" />&nbsp;</td>
    <td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="right"><dnn:VISIBILITY runat="server" id="dnnVISIBILITY" />&nbsp;</td>
  </tr>
  <tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="4"><tr>
    <td id="ContentPane" runat="server" align="center">&nbsp;</td>
</tr></table></td>  
</tr>
</table>
</td></tr></table>

HTML文件：

<table width="100%" border="0" cellpadding="0" cellspacing="3"><tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="border">
  <tr>
    <td valign="top" height="20" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="left">[ ACTIONS] &nbsp;</td>
    <td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="left">[ ICON] &nbsp;</td>
    <td valign="top" width="100%" background="<%= SkinPath %>bgcolor.gif" align="left" class="border_b">[ TITLE] &nbsp;</td>
    <td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="right">[ VISIBILITY] &nbsp;</td>
  </tr>
  <tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="4"><tr>
    <td id="ContentPane" runat="server" align="center">&nbsp;</td>
</tr></table></td>  
</tr>
</table>
</td></tr></table>

 

注：  [Visibility]的标记是用来显示模块的展开与折叠得功能

       [Title]的标记是用来显示模块的标题

       [Actions]的标记是指放置模块管理的功能

       [Icon]的标记是用来显示小图片

·         文件的上传

Skin和Container都必须使用zip压缩后才能上传到系统，然后系统才能自动安装。

在压缩的时候，不能再新建多一层目录，也就是解压后，所有文件必须出现在第一层目录。

·         皮肤和容器的应用

Skin和Container的设定非常灵活，不但每个网页可以设定不同的Skin,每个模块也可以设定不同的Container。具体的操作请查看DotNetNuke的说明。

 

·         参考文档：DotNetNuke皮肤制作白皮书

http://leeichang.cnblogs.com/articles/151325.html