皮膚和容器制作實例
背景:制作網站的初期目標是寫出需求文件,明確客戶的需求,不斷的跟客戶溝通,然后再修改,定稿之后就進入到界面的設計和數據庫的設計了.數據庫設計這里就不講了,這里主要講的是界面設計,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 皮膚效果圖