DNN初步学习——皮肤和容器

皮肤：

首先，了解一下什么是皮肤，就我理解而言，皮肤就是整个页面的布局，你可以在这里设置页面的风格、排版，就像是人的骨架确定一个人的大致长相一样，也许这个比喻不是很恰当。那么，皮肤是怎么构成的呢？我们来看看下面的代码，

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>

<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>

<%@ Register TagPrefix="dnn" TagName="MENU" Src="~/DesktopModules/DDRMenu/Menu.ascx" %>

<%@ Register TagPrefix="dnn" TagName="BREADCRUMB" Src="~/Admin/Skins/BreadCrumb.ascx" %>

<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>

<%@ Register TagPrefix="dnn" TagName="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>

<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>

<link href="<%= SkinPath %>skin.css" rel="stylesheet" type="text/css" />

<link href="<%= SkinPath %>nova-3-column.css" rel="stylesheet" type="text/css" />

<div id="body_all">

<div id="topToolbar">

</div>

    <div id="wrapper_main">

        <div id="header">

            <div id="headleft">

                <div id="logo">

     <a href="http://www.novasoftware.com/" title="NovaSoftware">

<dnn:LOGO runat="server" id="dnnLOGO" /> </a>

                </div>

                   </div>

            <div id="headright">

            <div id="login">

            <dnn:LOGIN runat="server" id="dnnLOGIN" />&nbsp;&nbsp;

<dnn:USER runat="server" id="dnnUSER" />

            </div>

                <div id="Icons">

                 <a href="http://www.facebook.com/NovaSoftware" target="_blank" id="fecebookIcon"class="Icon">

<img alt="fecebook" src="<%= SkinPath %>img/Facebook.jpg" /></a>

                 <a href="http://twitter.com/novachina" target="_blank" id="twitterIcon"class="Icon">

<img alt="" src="<%= SkinPath %>img/Twitter.jpg" /></a>

               <a href="http://www.linkedin.com/company/nova-software"

target="_blank"id="linkedinIcon" class="Icon">

<img alt="" src="<%= SkinPath %>img/LinkedIn.jpg" /></a>

                </div>

            </div>

        </div>

        <div id="headerBar">

            &nbsp For your success</div>

        <div id="menubar">

            <div id="menu">

                <dnn:MENU runat="server"  id="dnnMENU" MenuStyle="DNNMega" />

            </div>

            <div id="bar" class="bg">

                <dnn:BREADCRUMB runat="server" id="dnnBREADCRUMB" /></div>

        </div>

        <div id="content" class="bg">

           <div id="ContentPane" runat="server" class="ContentPane bg">

           </div>

           <div class="clear">

           </div>

        </div>

        <div id="footer">

            <div id="footermenu">

                <a id="Footer_FooterHomeHyperLink" href="Home.aspx" title="Company Home Page">home</a>

                <a id="Footer_FooterContactHyperLink" href="http://www.novasoftware.com" title="Contact Us">contact us</a>

                <dnn:TERMS runat="server" id="dnnTerms"></dnn:TERMS>

                <dnn:PRIVACY runat="server" id="dnnPrivacy"></dnn:PRIVACY>

                <a id="Footer_KnowledgeHyperLink" href="http://www.novasoftware.com/Knowledge_Library" title="Knowledge Library">Articles</a>

                <a title="诺怀软件" target="_blank" href="http://www.novasoftware.cn/">诺怀软件</a>

            </div>

            <div id="copyright">

              <dnn:COPYRIGHT runat="server" id="dnnCOPYRIGHT" />

            </div>

        </div>

    </div>

    <div id="icp">

            <a href="http://www.miibeian.gov.cn">渝ICP备08003290号</a>

        </div>

</div>

皮肤文件是ascx文件，也就是用户控件，从上面代码可以看出，皮肤就是普通用户控件页面+DNN标签，所以制作DNN皮肤要求对网页制作有一定了解。

 

当然一个皮肤文件不仅仅只有这些东西，一个皮肤包通常会包括以下文件，*.htm(或*.html)，*.ascx，图片文件，skin.css，skin.xml。

 

*.htm,*.html,*.ascx是皮肤的“排版”文件，图片文件主要包括2种，一种是皮肤和容器所需要用到的图片，另一种是同名皮肤和容器的预览图片，*.css是皮肤或容器的样式定义文件，*.xml是皮肤或容器的标签属性定义文件。

 

好了，现在大概了解了皮肤是什么东西，接下来介绍一下皮肤的制作方法。

 

皮肤制作有两种方式，它们分别是html方式和ascx方式。Html方式适合于对asp.net不是很熟悉的人员制作皮肤，而对于一个asp.net的开发人员来说ascx方式是不错的选择。下面详细介绍html方式：

 

Ascx方式：上面代码就是ascx方式，与html方式不同的是，需要指定@Register 和实际的用户控件标记 (如 <dnn:Login runat="server" id="dnnLogin" /> ).

 

Html方式：

1、设计网页布局

2、完成Html页面和CSS

3、编写*.xml，为相应的标志指定属性值

4、用DNN标签替换内容

5、打包

6、上传

下面贴出一份html源码（网友分享资料）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>皮肤制作示例</title>

<link href="skin.css" rel="stylesheet" type="text/css" />

</head>

<body>

<table class="pagemaster" border="0" cellspacing="0" cellpadding="0">

    <tr>

        <td valign="top">

            <table class="skinmaster" width="770" border="0" align="center" cellspacing="0" cellpadding="0">

                <tr>

                    <td id="ControlPanel" runat="server" class="contentpane" valign="top" align="center">

                    </td>

                </tr>

                <tr>

                    <td valign="top">

                        <table class="skinheader" cellspacing="0" cellpadding="3" width="100%" border="0">

                            <tr>

                                <td valign="middle" align="left">

                                    [LOGO]</td>

                                <td valign="middle" align="right">

                                    [BANNER]</td>

                            </tr>

                        </table>

                        <table class="skingradient" cellspacing="0" cellpadding="3" width="100%" border="0">

                            <tr>

                                <td class="skingradient" width="100%" valign="middle" align="left" nowrap>

                                    [MENU]</td>

                                <td class="skingradient" valign="middle" align="right" nowrap>

                                    [SEARCH][LANGUAGE]</td>

                            </tr>

                        </table>

                        <table class="skinbannerdown" cellspacing="0" cellpadding="3" width="100%" border="0">

                            <tr>

                                <td width="200" valign="top" align="left" nowrap>

                                    [CURRENTDATE]</td>

                                <td width="100%" valign="top" align="center">

                                </td>

                                <td width="200" valign="top" align="right" nowrap>

                                    [USER]&nbsp;&nbsp;[LOGIN]</td>

                            </tr>

                        </table>

                    </td>

                </tr>

                <tr>

                    <td valign="top" height="100%">

                        <table cellspacing="3" cellpadding="3" width="100%" border="0">

                            <tr>

                                <td class="toppane" colspan="3" id="TopPane" runat="server" valign="top" align="center">

                                </td>

                            </tr>

                            <tr valign="top">

                                <td class="leftpane" id="LeftPane" runat="server" valign="top" align="center">

                                </td>

                                <td class="contentpane" id="ContentPane" runat="server" valign="top" align="center">

                                </td>

                                <td class="rightpane" id="RightPane" runat="server" valign="top" align="center">

                                </td>

                            </tr>

                            <tr>

                                <td class="bottompane" colspan="3" id="BottomPane" runat="server" valign="top" align="center">

                                </td>

                            </tr>

                        </table>

                    </td>

                </tr>

                <tr>

                    <td valign="top">

                        <table class="skingradient" cellspacing="0" cellpadding="0" width="100%" border="0">

                            <tr>

                                <td valign="middle" align="center">

                                    [COPYRIGHT]&nbsp;&nbsp;[TERMS]&nbsp;&nbsp;[PRIVACY]</td>

                            </tr>

                        </table>

                    </td>

                </tr>

                <tr>

                    <td valign="top" align="center">

                        [DOTNETNUKE]</td>

                </tr>

            </table>

        </td>

    </tr>

</table> </body>

</html>

效果图：

                       

注意看上面红色加粗代码，[LOGO]等就是DNN皮肤的占位符，在页面加载的时候，系统就将这些占位符替换成相应的皮肤对象。所以，在完成html代码时，将相应的部分写成占位符形式。

 

还有上面我标注的紫色加粗部分，这种<td  id=”**Pane” runat=”server”>形式的，我们暂且也叫它占位符，只不过，它是为将要插入的模块占位。Content Panes 是带有和DotNetNuke 皮肤交互的自定义属性的简单HTML

标记。Content Panes 允许的HTML 标记有<TD>, <DIV>, <SPAN>,和<P>，最精简的情况下你也必须包含至少一个Content Panes，并将其命名为“ContentPane”，Content Panes 不需要连续，他们可以在页面的任何地方。Content Panes 是可折叠的，也就是说如果在运行时Content  Panes 也不包含任何内容，它就是不可见的。如果你创建的是HTML 的Content Panes，你就可以在设计中使用皮肤标记[CONTENTPANE] 来表示你要插入内容的区域。

皮肤对象还包含属性。属性允许你在皮肤中自定义皮肤对象的外观。每一个皮肤对象都包含一个属性对象集，如果你创建的是ASCX 皮肤，你就需要在皮肤中直接指定属性 (如 <dnn:Login runat=”server” id=”dnnLogin” Text=”Signin” /> ).皮肤包可以包含全局属性设定文件“skin.xml” ( 或者容器的 “container.xml”) ，应用到皮肤包的每一个文件. 另外, 你也可以通过为皮肤提供一个 “skinfilename.xml”文件来覆盖全局皮肤属性设定.皮肤上传工具通过将皮肤属性设置和HTML 展示文件合并创建一个ASCX 皮肤文件。下面的XML 片段描述了属性文件的结构:

 

CSS样式表：

DotNetNuke 使用外部叠层样式表 (CSS ) ，以充分利用叠层样式表优点。实质上DotNetNuke 可以在同一个页面引用多个外部的叠层样式表，每一个叠层样式表的引用都指定引用顺序，这样就可以实现层次覆盖。叠层样式表的层次顺序简述如下( 每一项覆盖前一项):

.. Modules –自定义的模块样式定义在 PortalModuleControl.StyleSheet

.. Default – 默认主机样式 – default.css

.. Skin – 皮肤样式 – skin.css 或 skinfilename.css

.. Container – 容器样式 – container.css 或 containerfilename.css

.. Portal – 由门户站点管理员定义的样式 – portal.css

皮肤包可以包含一个名为 “skin.css” ( 或容器的 “container.css” ) 的样式表，应用到皮肤包中的文件. 另外你也可以使用“skinfilename.css” 为皮肤指定样式覆盖全局的皮肤样式.DotNetNuke 默认的样式表 ( /Portals/_default/default.css )中包含多个CSS "classes" (theentries that start with a period)，门户站点依赖于这些样式获得一致的用户界面体验。你可以

随便创建自己的样式，但是至少你应该覆盖默认样式来和你的皮肤设置一致。

预览：

为了能在 Skin Gallery 中能看到你的皮肤，你需要创建一个高质量的屏幕截图。你也应该为每一个皮肤或容器创建对应的扩展名为JPG 的屏幕截图 (如果你的皮肤文件为skin.html，则屏幕截图为skin.jpg ).当然，这不是必须的。

OK，该有的基本上都有了，让来看看打包吧（该打包只是为了介绍皮肤包的内容和压缩方式，与上面的示例代码无关）。

这就是一个简单的皮肤包，注意压缩为.zip形式。好了，上传吧

 

用host或admin登录网站，鼠标放在host或admin上，弹出窗口，点击Extensions

 

然后鼠标放在Extensions模块的manage上，弹出窗口，点击install extension wizard

 

选择上传的皮肤文件

 

选择上传的是皮肤或者是容器。

 

 

 

上传完毕，在页面设置皮肤，就可以看到效果了，下面是本人制作的一个简单公司网站皮肤。

 

 

容器：

皮肤是控制网页整体风格，那容器呢？容器就是控制模块的样式，比如模块的title样式，内容样式等。容器制作与皮肤基本相同，唯一不同的是容器文件中只有一个窗格，id为ContentPane。

下面我介绍一下皮肤与容器制作的简单方法：（纯属个人意思，不知道到底好不好，不过的确挺方便的，请高手指教）

 

皮肤制作步骤：

0. 制作静态页面（里面包括css及js脚本文件）

1. 新建用户控件ascx,将头部代码替换为：   <%@ Control language="vb" CodeBehind="~/admin/Skins/skin.vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>

以及在皮肤中将要用到的皮肤控件的控件注册，例如：<%@ Register TagPrefix="dnn" TagName="LOGIN" Src="~/Admin/Skins/Login.ascx" %>

2. 将html代码复制过来，只保留<body></body>之间的部分；并将网页文件所需的css代码统一写到skin.css文件中，所需js代码可以直接写在皮肤文件中或单独写在js文件中（如果js文件与皮肤文件同级目录，则引用地址为<%=SkinPath%>/*.js）

3. 将网页代码中需要动态表现的部分（将要插入模块的地方）删除，并在最外层节点加入runat="server"属性及id属性；

4. 将页面中诸如登陆、注册按钮的动态部分使用皮肤控件替换；

5. 更改代码中用到的所有图片、js、flash等资源文件的链接地址。皮肤文件夹的根目录可用<%=SkinPath%>取得，故images/ico.gif可改为<%=SkinPath%>/images/ico.gif。

6. 将.ascx文件与所用到的资源文件打包（.zip格式）。 制作完毕。

 

容器制作步骤：

1. 在dnn6\Portals\_default\Containers\DarkKnight目录中复制一个容器ascx文件和container.css出来
2. 修改容器的名字，xx.ascx,新建文本，改名为xx.css（xx为容器名字）
3. 根据需要，修改ascx文件内容（这个文件改动不大，注意命名），将样式写进xx.css文件
4. 将图片等需要用到相关文件一起打包。完毕

转载于:https://www.cnblogs.com/scott-shi/archive/2012/02/21/2361328.html