DNN皮肤制作

自从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" >   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" >   td >
   tr >
   <!-- Banner--Begin --&gt
       < tr >
            < td  colspan ="2"  background ="images/banner.jpg"  height ="100"  width ="800"  align ="right" > td >
       tr >
  <!-- Banner--End --&gt       
table >
<!-- Content--Begin --&gt
< table  width ="800"  border ="0"  class ="border"  align ="center" >
   < tr >
     < td  width ="200"  align ="left"  id ="LeftPane"  runat ="server" >   td >
     < td  width ="400"  align ="center"  id ="ContentPane"  runat ="server" >   td >
     < td  width ="200"  align ="right"  id ="RightPane"  runat ="server" >   td >
   tr >
  table >  
  <!-- Content--End --&gt
  <!-- CopyRight--Begin --&gt  
  < table  width ="800"  border ="0"  class ="border"  align ="center" >
   < tr >
       < td  width ="800"  height ="40"  colspan ="3"  align ="center" >
       td >
   tr >
  <!-- CopyRight--End --&gt  
table >
body >
html >

·         确定网站的呈现风格

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

<!-- Content--Begin --&gt
< 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" >   td >
     < td  width ="1" > td >
   < td   valign ="top"  align ="center"  id ="ContentPane"  runat ="server" >   td >
     < td  width ="1" > td >
   < td   valign ="top"  align ="right"  id ="RightPane"  runat ="server" >   td >
   < td  width ="1" > td >
   tr >
table >  
  <!-- Content--End --&gt

注：

1 、 的作用是为了给单元格之间一个分割区域。

     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" %>

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/15040802/viewspace-417734/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/15040802/viewspace-417734/