一、几个概念
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的代码:
< 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 -->
< 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" > </ 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 -->
<!-- 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”属性。例如:
< 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 -->
注:
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" />
<dnn:CURRENTDATE runat="server" id="dnnCURRENTDATE" />
| <dnn:USER runat="server" id="dnnUSER" /> |
<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')"> </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"> </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-->
<!--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文件:
< tr >
< td width ="200" rowspan ="2" > [LOGO] </ td >
< td align ="right" bgcolor ="#FFFFFF" > [ SEARCH] [CURRENTDATE] | [USER] | [LOGIN] </ td >
</ tr >
< tr >
< td align ="right" id ="ADPane" runat ="server" style ="FILTER: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#FFFFF0', endColorStr='#2011ff', gradientType='1')" > </ 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" > </ 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 -->
<!-- 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来定义网站所使用的文字的字体,大小,颜色以及表格的边框的效果,图片等。还有菜单的文字字体与颜色等效果。例:
.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" /> </td>
<td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="left"><dnn:ICON runat="server" id="dnnICON" /> </td>
<td valign="top" width="100%" background="<%= SkinPath %>bgcolor.gif" align="left" class="border_b"><dnn:TITLE runat="server" id="dnnTITLE" /> </td>
<td valign="top" background="<%= SkinPath %>bgcolor.gif" class="border_b" align="right"><dnn:VISIBILITY runat="server" id="dnnVISIBILITY" /> </td>
</tr>
<tr>
<td colspan="4"><table width="100%" border="0" cellpadding="0" cellspacing="4"><tr>
<td id="ContentPane" runat="server" align="center"> </td>
</tr></table></td>
</tr>
</table>
</td></tr></table>
HTML文件:
< 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] </ td >
< td valign ="top" background ="<%= SkinPath %>bgcolor.gif" class ="border_b" align ="left" > [ ICON] </ td >
< td valign ="top" width ="100%" background ="<%= SkinPath %>bgcolor.gif" align ="left" class ="border_b" > [ TITLE] </ td >
< td valign ="top" background ="<%= SkinPath %>bgcolor.gif" class ="border_b" align ="right" > [ VISIBILITY] </ td >
</ tr >
< tr >
< td colspan ="4" >< table width ="100%" border ="0" cellpadding ="0" cellspacing ="4" >< tr >
< td id ="ContentPane" runat ="server" align ="center" > </ td >
</ tr ></ table ></ td >
</ tr >
</ table >
</ td ></ tr ></ table >
注: [Visibility]的标记是用来显示模块的展开与折叠得功能
[Title]的标记是用来显示模块的标题
[Actions]的标记是指放置模块管理的功能
[Icon]的标记是用来显示小图片
· 文件的上传
Skin和Container都必须使用zip压缩后才能上传到系统,然后系统才能自动安装。
在压缩的时候,不能再新建多一层目录,也就是解压后,所有文件必须出现在第一层目录。
· 皮肤和容器的应用
Skin和Container的设定非常灵活,不但每个网页可以设定不同的Skin,每个模块也可以设定不同的Container。具体的操作请查看DotNetNuke的说明。