iT邦幫忙

DAY 29
3

DotNetNuke的學習心得系列 第 25 篇

[鐵人賽Day29]DotNetNuke樣式設計–Skin和Container簡介

cms asp.net c# web dotnetnuke dnn skin container
5646 瀏覽

  • 分享至 

  • xImage
    •  

DotNetNuke的樣式設計和一般網站或部落格使用CSS樣式設計不太一樣，不是說它不能使用CSS設計網站的樣式(這是不可能的)，而是它更負有彈性，並且能夠更容易的將頁面的視覺設計和程式設計分離開來，讓前端負責頁面的視覺設計人員能夠專心規劃在頁面呈現的樣式。
DotNetNuke在樣式設計的部份包含了Skin和Container兩個部份，Skin是網站頁面的佈局設計，而Container則是屬於模組套用的呈現外殼。

DotNetNuke的Skin和Container可以透過兩種方式來進行設計：

1.使用Visual Studio直接設計ascx：
如果設計人員本身對於Visual Studio已經有一定的熟悉度，也基本了解ascx中的引用參考和其它相關語法，那麼可以選擇直接使用Visual Studio設計ascx檔案，因為任何的Skin或Container最後都會被修改成ascx檔案。

2.使用任何文字編輯軟體或網頁設計工具設計Html：
如果設計人員本身並沒有接觸過Visual Studio，那麼他可以選擇最熟悉的設計工具，例如：Microsoft Expression Web、WebMatrix、Dreamweaver、Notepad++等…，將Skin和Container以傳統Html文件的方式設計，在文件中若是需要使用到DotNetNuke中的元件(Login, Search ..etc)則使用中括號加上大寫文字來處理([LOGIN], [SEARCH])，設計完成的Html文件及相關檔案同樣都壓縮打包成Zip檔案，上傳到DotNetNuke的時候會由系統自動將Html檔案轉換成ascx格式的檔案。

先來看看DotNetNuke中預設的Skin–Gravity有哪些檔案：

Home.ascx就是首頁所使用的Skin樣版，檔案的名稱只是為了辨別，並沒有規定要如何命名。

打開Home.ascx的內容

<%@ Control language="vb" AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LANGUAGE" Src="~/Admin/Skins/Language.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SEARCH" Src="~/Admin/Skins/Search.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="PRIVACY" Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="TERMS" Src="~/Admin/Skins/Terms.ascx" %>
<%@ Register TagPrefix="dnn" TagName="COPYRIGHT" Src="~/Admin/Skins/Copyright.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LINKTOMOBILE" Src="~/Admin/Skins/LinkToMobileSite.ascx" %>
<%@ Register TagPrefix="dnn" TagName="MENU" src="~/DesktopModules/DDRMenu/Menu.ascx" %>
<div id="siteWrapper">  
    <div id="userControls" class="wrapper">
        <div id="search">
			<dnn:SEARCH ID="dnnSearch" runat="server" ShowSite="false" ShowWeb="false" EnableTheming="true" Submit="Search" CssClass="SearchButton" />
        </div><!---/search-->
         <div id="login">
            <dnn:USER ID="dnnUser" runat="server" LegacyMode="false" /> 
            <dnn:LOGIN ID="dnnLogin" CssClass="LoginLink" runat="server" LegacyMode="false" />
       	</div><!--/login-->
        <div class="clear"></div>
    </div><!--/userControls-->
    <div id="siteHeadouter">
        <div id="siteHeadinner" class="wrapper">
            <div id="logo">
                <dnn:LOGO runat="server" id="dnnLOGO" />
            </div><!--/Logo-->
            <div class="right">
				<div class="language">
					<dnn:LANGUAGE runat="server" id="dnnLANGUAGE"  showMenu="False" showLinks="True" />
					<div class="clear"></div>
				</div>
				<div id="nav">
					<dnn:MENU MenuStyle="Simple" runat="server"></dnn:MENU>
				</div><!--/nav-->
			</div>
            <div class="clear"></div>
        </div><!--/siteHeadinner-->    
    </div><!--/siteHeadouter-->
    <div id="contentWrapper" class="wrapper">
        <div id="content">
        	<div id="contentPane" class="contentPane" runat="server"></div>
            <div>
				<div id="leftPane" class="leftPane spacingTop" runat="server"></div>
				<div id="sidebarPane" class="sidebarPane spacingTop" runat="server"></div>
				<div class="clear"></div>
			</div>
			<div id="contentPaneLower" class="contentPane spacingTop" runat="server"></div>
        </div><!--/content-->
        <div id="footer">
        	<div id="footerLeftOuterPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerLeftPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerCenterPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerRightPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerRightOuterPane" class="footerPaneRight" runat="server"></div>
            <div class="clear"></div>
            <hr/>
            <div id="copyright">
				<div class="right">
					<dnn:LINKTOMOBILE ID="dnnLinkToMobile" runat="server" />
					<dnn:TERMS ID="dnnTerms" runat="server" /> |
					<dnn:PRIVACY ID="dnnPrivacy" runat="server" />
				</div>
				<dnn:COPYRIGHT ID="dnnCopyright" runat="server" />
            </div><!--/copyright-->
			<div class="clear"></div>
        </div><!--/footer-->
	</div><!--/contentWrapper-->
</div><!--/siteWrapper-->

在這個檔案中可以看到除了最上方引用了一堆的dnn元件之外，在整個結構中大量使用了div元素來設計頁面佈局，而其它必須的功能像是Login之類的元件，則是被設計為dnn的Skin物件(Skin Object)。

如果Home.ascx是以Html文件設計，內容大致如下(Gravity Skin並沒有使用Html格式設計，以下內容為筆者反推內容)：

<html xmlns="http://www.w3.org/1999/xhtml">

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Gravity Skin(Home)</title>
<link type="text/css" href="skin.css" rel="stylesheet" />


<div id="siteWrapper">  
    <div id="userControls" class="wrapper">
        <div id="search">
			[SEARCH]
        </div><!---/search-->
        <div id="login">
            [USER]
            [LOGIN]
       	</div><!--/login-->
        <div class="clear"></div>
    </div><!--/userControls-->
    <div id="siteHeadouter">
        <div id="siteHeadinner" class="wrapper">
            <div id="logo">
                [LOGO]
            </div><!--/Logo-->
            <div class="right">
				<div class="language">
					[LANGUAGE]
					<div class="clear"></div>
				</div>
				<div id="nav">
					[MENU]
				</div><!--/nav-->
			</div>
            <div class="clear"></div>
        </div><!--/siteHeadinner-->    
    </div><!--/siteHeadouter-->
    <div id="contentWrapper" class="wrapper">
        <div id="content">
        	<div id="contentPane" class="contentPane" runat="server"></div>
            <div>
				<div id="leftPane" class="leftPane spacingTop" runat="server"></div>
				<div id="sidebarPane" class="sidebarPane spacingTop" runat="server"></div>
				<div class="clear"></div>
			</div>
			<div id="contentPaneLower" class="contentPane spacingTop" runat="server"></div>
        </div><!--/content-->
        <div id="footer">
        	<div id="footerLeftOuterPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerLeftPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerCenterPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerRightPane" class="footerPane spacingRight" runat="server"></div>
            <div id="footerRightOuterPane" class="footerPaneRight" runat="server"></div>
            <div class="clear"></div>
            <hr/>
            <div id="copyright">
				<div class="right">
					[LINKTOMOBILE]
					[TERMS] |
					[PRIVACY]
				</div>
				[COPYRIGHT]
            </div><!--/copyright-->
			<div class="clear"></div>
        </div><!--/footer-->
	</div><!--/contentWrapper-->
</div><!--/siteWrapper-->

在使用Html格式設計Skin的時候有幾個地方要特別注意：

1.相關檔案(css、js、jpg等)的路徑需使用相對路徑。

2.必須至少有一個容器元素(div、table)是命名為ContentPane，其它設計用來讓模組指定擺放位置的容器元素的命名必須是以Pane結尾，並且這些元素一定要加上runat="server"的屬性，以便轉換成ascx的時候可以讓伺服器端正確解析並於程式碼中控制。

3.良好的Html元素標籤撰寫習慣，任何元素標籤都必須要有開也有關，也就是多少數量的<div>就必須搭配多少數量的</div>。

接著再來看看DotNetNuke預設的Container–Gravity有哪些檔案：

Container是針對模組設計的外殼，因此相較於Skin就簡單得多，底下是Title_h2.ascx的內容：

<%@ Control AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<%@ Register TagPrefix="dnn" TagName="TITLE" Src="~/Admin/Containers/Title.ascx" %>
<%@ Register TagPrefix="dnn" TagName="VISIBILITY" Src="~/Admin/Containers/Visibility.ascx" %>
<div class="DNNContainer_Title_h2 SpacingBottom">
    <h2><dnn:TITLE runat="server" id="dnnTITLE" CssClass="TitleH2" /></h2>
    <div id="ContentPane" runat="server"></div>
	<div class="clear"></div>
</div>

最主要的關鍵就在於id為ContentPane的div元素，模組的內容全都會塞到這個元素裡，所以它也必須有runat="server"的屬性。

如果再將NoTitle.ascx的檔案內容拿來做個比較的話，就更顯得簡單明瞭了：

<%@ Control AutoEventWireup="false" Explicit="True" Inherits="DotNetNuke.UI.Containers.Container" %>
<div class="DNNContainer_noTitle">
	<div id="ContentPane" runat="server"></div>
	<div class="clear"></div>
</div>

如果想設計一個讓模組自行決定是否要有邊框或是圓角的樣式，那麼從Container下手就對了，但是要針對一整個網站設計訪客進入時的整體觀感，那麼就要從Skin切入進行規劃設計。

看完Skin和Container的介紹之後，是不是有一些概念了呢？其實DotNetNuke的樣式設計說難不難，但是也可以是一個龐大的主題，因此這一篇僅僅做了一個概念性的簡介而已，就像網頁設計可以單獨出一本書一樣，這也是一個篇幅無法完全介紹完的東西，如果有興趣的讀者可以自行上網搜尋相關的文章(大多應該都是英文)，或者是將DotNetNuke本身的原始檔詳細研究一番，若是對於DotNetNuke內建的Gravity Skin有興趣，可以在這裡下載原始檔。

下載之後的檔案內容如下，裡面的zip檔所包含的檔案內容就和上面的Skin、Container檔案列表是一樣的：

FutureGravity Manifest.dnn的檔案內容如下：

<dotnetnuke type="Package" version="5.0">
	<packages>
		<package name="Skin.FutureGravity" type="Skin" version="01.00.00">
			<friendlyName>FutureGravity</friendlyName>
            <iconFile>images/FutureGravity_icon.png</iconFile>
			<description><![CDATA[A very light redesign of the Gravity Skin for use in trainings.]]></description>
			<owner>
				<name>MichaelDoxsey</name>
				<organization><![CDATA[Skins by Doxsey]]></organization>
				<url><![CDATA[]]></url>
				<email><![CDATA[<a href="mailto:michael.doxsey@dnncorp.com">michael.doxsey@dnncorp.com</a>]]></email>
			</owner>
			<license src="license.htm" />
            <releaseNotes src="release_notes_skin.htm" />
			<components>
				<component type="Skin">
					<skinFiles>
						<skinName>FutureGravity</skinName>
						<basePath>Portals\_default\Skins\FutureGravity</basePath>
					</skinFiles>
				</component>
				<component type="ResourceFile">
					<resourceFiles>
						<basePath>Portals\_default\Skins\FutureGravity</basePath>
						<resourceFile>
							<name>resource-skin.zip</name>
						</resourceFile>
					</resourceFiles>
				</component>
			</components>
		</package>
		<package name="Container.FutureGravity" type="Container" version="01.00.00">
			<friendlyName>FutureGravity</friendlyName>
			<iconFile>FutureGravity_icon.png</iconFile>
			<description><![CDATA[DotNetNuke containers designed and developed by DNN]]></description>
			<owner>
				<name>DotNetNuke</name>
				<organization><![CDATA[DNN]]></organization>
				<url><![CDATA[]]></url>
				<email><![CDATA[<a href="mailto:michael.doxsey@dnncorp.com">michael.doxsey@dnncorp.com</a>]]></email>
			</owner>
            <license src="license.htm" />
            <releaseNotes src="release_notes_container.htm" />
			<components>
				<component type="Container">
					<containerFiles>
						<containerName>FutureGravity</containerName>
						<basePath>Portals\_default\Containers\FutureGravity</basePath>
					</containerFiles>
				</component>
				<component type="ResourceFile">
					<resourceFiles>
						<basePath>Portals\_default\Containers\FutureGravity</basePath>
						<resourceFile>
							<name>resource-container.zip</name>
						</resourceFile>
					</resourceFiles>
				</component>
			</components>
		</package>
	</packages>
</dotnetnuke>

DotNetNuke的Skin可以在Host選單中的擴充套件(Extensions)或是Host Settings下有個上傳外觀(Upload Skin/Container)的按鈕，兩者應該是相同的東西。


安裝完Skin之後，點選Admin選單中的「外觀」就可以進入網站的外觀樣式設定頁面(下圖為最高權限管理者的畫面)：

如果是要設定模組該套用哪一個Container，在模組的設定畫面裡有個網頁設定頁籤，基本設定的項目中有個模組容器，可以選擇要套用的Container，而且不限定同一個Skin Package裡面的Container才能套用，也就是說網站套用Gravity Skin但是模組不一定要選Gravity的Container。

事實上DotNetNuke裝完之後所附的預設網站內容中就有許多頁面是使用了不同的Skin和Container，如果讀者們詳細的去摸索這些頁面就會發現不少東西喔！

(本文同步發表於泰克哪裡去部落格)

[鐵人賽Day1]DotNetNuke簡介
[鐵人賽Day2]DotNetNuke安裝前置作業
[鐵人賽Day3]DotNetNuke安裝-傳統方式安裝在IIS
[鐵人賽Day4]DotNetNuke安裝-透過Web PI安裝
[鐵人賽Day5]DotNetNuke安裝-使用Windows Azure Website
[鐵人賽Day6]DotNetNuke網站結構說明
[鐵人賽Day7]安裝DotNetNuke語系
[鐵人賽Day8]DotNetNuke-新增頁面與模組
[鐵人賽Day9]第一個DotNetNuke模組-Hello DotNetNuke
[鐵人賽Day10]DotNetNuke模組的多國語系
[鐵人賽Day11]安裝DotNetNuke專案範本
[鐵人賽Day12]DotNetNuke模組設計範本–SimpleModule(1)
[鐵人賽Day13]DotNetNuke模組設計範本–SimpleModule(2)
[鐵人賽Day14]DotNetNuke模組設計範本–SimpleModule(3)
[鐵人賽Day15]DotNetNuke模組設計範本–SimpleModule(4)
[鐵人賽Day16]DotNetNuke使用篇–會員帳號設定(User Account Settings)
[鐵人賽Day17]DotNetNuke使用篇–第三方帳號驗證
[鐵人賽Day18]DotNetNuke使用篇–管理使用者帳號、角色
[鐵人賽Day19]DotNetNuke使用篇–建立子網站
[鐵人賽Day20]DotNetNuke使用篇–內容多語系化
[鐵人賽Day21]DotNetNuke使用篇–Host設定介紹
[鐵人賽Day22]DotNetNuke使用篇–網站設定(Site Settings)介紹
[鐵人賽Day23]翻譯DotNetNuke–使用語言編輯器
[鐵人賽Day24]DotNetNuke的網頁選單(Menu)翻譯
[鐵人賽Day25]設定DotNetNuke的Email範本
[鐵人賽Day26]DotNetNuke寄送郵件功能介紹
[鐵人賽Day27]查看DotNetNuke的執行記錄–事件檢視器(Log Viewer)介紹
[鐵人賽Day28]維護DotNetNuke的清單列表(List)–在Profile中可以下拉選擇台灣的縣市
[鐵人賽Day30]尋找更多的DotNetNuke擴充套件(Module、Skin)


上一篇
[鐵人賽Day28]維護DotNetNuke的清單列表(List)–在Profile中可以下拉選擇台灣的縣市
下一篇
[鐵人賽Day30]尋找更多的DotNetNuke擴充套件(Module、Skin)
系列文
DotNetNuke的學習心得 共 27 篇
  1. 23
    [鐵人賽Day27]查看DotNetNuke的執行記錄–事件檢視器(Log Viewer)介紹
  2. 24
    [鐵人賽Day28]維護DotNetNuke的清單列表(List)–在Profile中可以下拉選擇台灣的縣市
  3. 25
    [鐵人賽Day29]DotNetNuke樣式設計–Skin和Container簡介
  4. 26
    [鐵人賽Day30]尋找更多的DotNetNuke擴充套件(Module、Skin)
  5. 27
    [鐵人賽Day31]Day over day，鐵人賽30天鐵人鍊成心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
卡斯
iT邦研究生 1 級 ‧ 2013-10-21 22:30:23

沙發

登入發表回應

我要留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙