自从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>

<title>一个简单的例子title>

head>

<body>

<tr>

<td width="600" height="20" align="right" bgcolor="#444EFF" class="border_b">注册登录td>

tr>

<tr>

tr>

tr>

<tr>

tr>

table>

<tr>

tr>

table>

<tr>

td>

tr>

table>

body>

html>

· 确定网站的呈现风格

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

<tr>

tr>

table>

注：

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博客 ” ，链接：https://blog.itpub.net/15040802/viewspace-417734/ ，如需转载，请注明出处，否则将追究法律责任。

ITPub博客

DNN皮肤制作

最新文章