皮肤和容器制作实例
背景:制作网站的初期目标是写出需求文件,明确客户的需求,不断的跟客户沟通,然后再修改,定稿之后就进入到界面的设计和数据库的设计了.数据库设计这里就不讲了,这里主要讲的是界面设计,dnn网站的界面,主要的就是皮肤和容器,而且这是可以动态的设置和切换的,导航和风格的体现,也一般体现在皮肤里,所以,制作网站界面的首要任务就是制作皮肤,处理好网站的整体风格和导航,剩下的工作就是在皮肤下增加模块,实现网站所需的功能.那么怎么制作皮肤呢?目前这方面的资料很少,本人在网上搜罗了不少文章,现在整理出来,制作一个皮肤制作的实例,希望广大dnn的初学者能少走些弯路,设计出有自己个性的网站.
1. 明确概念
皮肤 (Skin):皮肤的布局与设计就是整个网站的整体风格设计，其中包括页首和页尾的设计，LOGO的位置，Banner的位置，菜单的样式，是水平还是垂直等。皮肤是指软件架构提供了一种可管理的方式将应用程序逻辑和内容跟展示形式相分离.目前有两种皮肤,一种提供一个静态的布局,可以修改颜色,样式,图片.另外一种提供允许你自定义除了内容以外的任何东西.
容器（Container）:容器是指网页中每个模块的样式风格，它是属于一种可以应用于内容模块的皮肤定义。
皮肤对象(Skin Object):皮肤对象是指DotNetNuke以ascx文件提供的位于admin/skin/下的用户控件。用来实现皮肤的一些共同属性，包括菜单对象，日期对象，登陆对象，隐私声明对象等.
Dotnetnuke页面和皮肤处理机制: DotNetNuke 使用单一的 ASPX 页面 (Default.aspx ) 来展示所有的控件和内容。这样做的好处有两个。首先把用户界面管理逻辑集中到了单一的页面上，其次是减少了应用程序的入口，增强了方案的安全性。Default.aspx 只有很有限的功能 –包含页面管理的<HEAD>元素、包含用来放置皮肤的占位符。当用户第一次访问DotNetNuke 应用程序的时候, 首先检查从用户浏览器发来的 URL和request header, 确定所用的皮肤. 这个过程需要访问数据库中的Skins 表，这个表里包含了所有的皮肤和容器的使用分配表。分配表以等级的方式存储,这样子分配就可以覆盖父分配 (例如，分页级别的皮肤设置应该覆盖站点级别的皮肤设置).核心程序通过有效的对象缓存来减少由于获取当前皮肤设置而访问数据库对性能的影响。一旦皮肤确定，相关的用户控件就可以动态的加载并安置到页面上的占位符上。每一个使用皮肤的空间都要引用保存在\adimin\Skins 文件夹里的skin.vb 文件。这个文件负责皮肤处理中的所有工作：安全管理、加载内容。
2. 皮肤和容器的目录结构
皮肤可以应用到主机、站点或者分页级别。皮肤也可以应用到模块级别，但这时我们称其为容器。所有的皮肤文件保存在portals 文件夹下。有一个名为_default 的特殊文件夹代表主机的文件夹，然而每一个站点都一起在数据库中的ID 为名字有各自的文件夹。这样的结构使得整个网站中需要读写权限的文件夹集中到一个单一的文件夹里。同时使得文件的物理组织和应用程序当中的逻辑应用联系起来，这样就不需要外部数据库支持就可以管理两者之间的关系。皮肤和容器的目录结构最好按照图1那样组织.
图1 皮肤容器目录结构
皮肤和容器的文件组成:
皮肤包或者容器包由构成一个完整皮肤的大量文件组成：
l *.htm, *.html 文件——在皮肤上传机制中用来建立*.ascx 文件的皮肤定义文件。
l *.ascx 文件—— 皮肤机制对 html 文件进行必须的格式化和预编译后产生的用于定义皮肤的用户控件。
l *.css 文件——与皮肤相对应的样式表文件。
l *.gif, *.jpg, *.jpeg, *.png ——皮肤中的图形文件。
l *.* ——其他在皮肤中使用到的资源文件（注意需要在站点上传文件拓展名设置中允许上传。）
3. 制作实例.
创建皮肤的方法: 皮肤的定义可以通过两种方法来创建：HTML 或者ASCX（用户控件）。如果你是一个对ASP.NET 并没有多少了解web 设计者，那么HTML 是最好的选择。如果你对ASP.NET比较熟练，而且打算用VS.NET 这样的工具来创建皮肤那么ASCX 是你的第一选择。基本上，这两种方法的区别仅在于皮肤定义文件后缀以及对应用户控件标识符不同.一般一个皮肤包最少需要两个皮肤文件，一个用来定义网站前台的布局，一个用来定义网站后台管理的布局。前台一般拥有各式各样的内容控件以及不同的布局栏目，而后台管理界面则仅有一些管理控件放在一个单独的栏目里面。本实例采用ASCX方式创建皮肤和容器.
步骤:1,设计文件的目录结构.
图2 文件目录结构
步骤2,设计皮肤.
一般选用一个图片是用ps工具切了,划分好区域.
步骤3,插入皮肤对象和内容块.
皮肤对象是在运行时动态处理的对象。如果你要创建 ASCX 皮肤，你就需要指定
@Register 和实际的用户控件标记 (如 <dnn:Login runat="server" id="dnnLogin" /> ). 如果创建的是 HTML 皮肤，你只需要简单指定标记即可( 如 [LOGIN] ). 为了设计皮肤了解每一个皮肤对象的功能很重要.
除了皮肤对象还有一个内容块 Content Panes. Content Panes 是运行时动态插入的内容模块的容器。Content Panes 是带有和DotNetNuke 皮肤交互的自定义属性的简单HTML标记。Content Panes 允许的HTML 标记有<TD>, <DIV>, <SPAN>,和<P>，最精简的情况下你也必须包含至少一个Content Panes，并将其命名为“ContentPane”，Content Panes 不需要连续，他们可以在页面的任何地方。Content Panes 是可折叠的，也就是说如果在运行时ContentPanes 也不包含任何内容，它就是不可见的。如果你创建的是HTML 的Content Panes，你就可以在设计中使用皮肤标记[CONTENTPANE] 来表示你要插入内容的区域。
步骤四,创建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"，门户站点依赖于这些样式获得一致的用户界面体验。你可以随便创建自己的样式，但是至少你应该覆盖默认样式来和你的皮肤设置一致。
步骤五.发布皮肤
为了发布皮肤,在皮肤选择界面中看到皮肤,需要制作一个皮肤和容器的高质量截图.然后打包, 用HOST 账户登录，选择主机栏目下的主机设置,上传打包的文件.皮肤上传机制将自动解压缩皮肤包，创建必要的文件夹并释放文件，而且还会通过ASP.NET 脚本将HTML 文件中的占位符替换掉以实现将HTML 文件转换成ASCX 用户控件的目的。这个转换是按照数据库中ModuleControls 表中皮肤对象的定义来实现的。ASCX 用户控件文件和CSS 样式表文件依旧以相对路径的方式关联图形文件。
步骤六. 管理皮肤
在 DotNetNuke 中，皮肤可以以多种等级运用。类属选择控件用来表现站点用户界面不同区域可以运用的皮肤。每个站点可以像主机皮肤一样使用自己的皮肤。皮肤以子皮肤可以覆盖父皮肤的等级机制来进行配置。比如说，运用于频道级别的皮肤总是取代门户级别的皮肤。
DotNetNuke 拥有皮肤预览功能，允许管理者在运用皮肤之前预览缩略图。皮肤设计者必须创建一张JPEG 格式的皮肤截图并打包在皮肤包中，这样才可以显示缩略图。也可以添加一个关于皮肤信息的.htm 文件链接.
实例代码以及截图.
<%@ Control Language="C#" 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="Search" Src="~/Admin/Skins/search.ascx" %>
<%@ Register TagPrefix="dnn" TagName="Nav" Src="~/Admin/Skins/nav.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="STYLES" Src="~/Admin/Skins/Styles.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKS" Src="~/Admin/Skins/Links.ascx" %>
<div id="ControlPanel" runat="server"></div>
<div id="head">
<dnn:LOGIN runat="server" id="dnnlogin"/>|
</div>
<div id="ContentPane" runat="server"></div>
<div id="foot">abc@CopyRight</div>
截图:
图3 皮肤效果图