转:DNN皮肤制作

一、几个概念

1 皮肤 (Skin)

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

2 容器(Container)。

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

3 皮肤包

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

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

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

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

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

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

4 皮肤对象

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

二、皮肤的制作

1 前期准备

htmlCSS比较熟悉。

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

2 皮肤的制作方式

·         使用asp.netuser 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个位置来呈现网页的内容:LeftPaneContentPaneRightPane。这三个位置的名称是固定的,不可以更改。而且每个网页设计至少要有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、对LeftPaneContentPaneRightPane的宽度根据网站的实际情况使用,建议不要写死(也就是TDwidth属性值写了个具体的值)。因为模块之间宽度大小可能不一样。具体效果应放在模块里控制。当然,具体情况具体对待。

·         假如其他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]的标记是用来显示小图片

·         文件的上传

SkinContainer都必须使用zip压缩后才能上传到系统,然后系统才能自动安装。

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

·         皮肤和容器的应用

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

转载于:https://www.cnblogs.com/wliang22/archive/2008/05/29/1209691.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值