DotNetNuke系列文章- Skin 與 Container 設計介紹
此篇文章主要在介紹DotNetNuke 的 Skin (外觀) 與 Contain (容器)的基本概念 。為了讓大家更容易瞭解，我以設計一個網路商店的外觀來舉例，將DotNetNuke的網站設計可以加入自己的創意。
其中包括
一、商店設計的原理
二、外觀的製作
三、上傳檔案到網站上
四、套用外觀設定
五、進階設計
前兩部分是不分版本的，第三、四部分的圖例是以DotNetNuke 2.1.2 製作的。我參考了網路上的幾篇英文文章後，將內容轉為讓大家較容易瞭解的方式，希望大家多多指教，我可以不斷的改進。
一、商店設計的原理：
網頁外觀設計主要由兩部分所組成:
1 外觀(Skin)的設計。
外觀的佈局與設計就是整個網站主要的感官設計，其中包含頁首與頁尾的設計，這個設計主要讓網站給人有一致的感覺。
2 容器（Container）的設計。
容器是在每一個網頁中提供模組功能放置的位置。
為什麼要叫做Skin？因為每一個外觀設計就像一件外衣一樣，可以任意的脫換，每個人只要遵守固定的原則，設計好的衣服，可以給每個人穿。
下面用幾個圖片來說明 外觀設計：
如上圖：整個其實就是一個完整外觀設計：
這個外觀設計主要包含三個要素：
- 頁首(1)
- 選單出現的位置(2)
- 頁尾(3)
- 模組的容器(4)
套用到商店後，樣子就是：
下面再舉第二個例子：
如上圖：整個黑色的背景與配色就是外觀設計，每一部份的內容是由一個標籤形狀的圖形框住，就是容器(container)。
由上面兩個例子：已經很清楚可以說明什麼是 skin，與什麼是 container，在後面的文章內容，都會用這兩個名詞來說明商店外觀的製作，因為翻譯為皮膚、外觀、容器，都有點失去原意。
二、Skin的製作：
Skin可以採用兩種方式製作：
(1) 使用ASP.NET的User Control 製作（具有 .ascx的延伸檔名），這種方式適合熟悉ASP.NET的程式人員，當您瞭解基礎入門後，我以後有機會再介紹。
(2)設計一個的html檔案，並將網站系統所需要的資訊定義在另一個xml檔案。這種方式比較簡單，可以採用網頁與美工工具設計好外觀後，再另外參考此文件來填入對應資訊，藉此告訴系統如何識別您設計的內容，資訊也才可以出現在正確的位置上。透過幾個簡單的步驟，輕易的就可以將您設計的外觀套用在您的商店。
製作Skin的步驟：
(1)設計外觀：這個步驟可以使用任何一種美工與網頁設計工具搭配，先設計出skin的樣子，舉例如下：
畫面:此範例只有設計頁首與頁尾的內容，詳細的外觀設計已經於前面敘述過
HTML內容:兩個 <body></body>標籤內為實際的內容，本設計用到兩張圖片，myheader.jpg與mybar.jpg。
在網頁的設計中最基本 “定位”的方式就是使用表格(TABLE)，可以讓網頁內容顯示在固定的位置，此範例採用表格的三個欄位來顯示內容。
注意：html必須要有正確的格式，也就是表示所有的內容都必需要有完整的開始與結束標籤，如：<table></table>
(2)加入內容屬性：這個步驟是要讓系統知道要將網頁內容放置在您設計的網頁中的哪一部份。本系統預設定義三個位置來放置網頁的內容有： “LeftPane”、 “ContentPane” 、 “RightPane”。這三個位置的名稱是固定的，不可以更改，而且每個網頁設計最少要有“ContentPane”，使用的方法如下，就是給予表格的欄位一個 (ID) 的名稱以及 runat=”Server” 的屬性：
<td width="150" id=”LeftPane” runat=”Server”>< /FONT> </td>
<td width="470" id=”ContentPane” runat=”Server”>< /FONT> </td>
<td width="150" id=”RightPane” runat=”Server”>< /FONT> </td>
如此，網頁就會出現三個位置，提供放置模組功能，就如下畫面所看到的三個欄位：
(3)加入其他內容標籤：其他內容標籤主要定義包括：選單出現的位置、LOGO出現的位置、商城首頁連結出現的位置、登入按鈕出現的位置、我的商店出現的位置、、、、詳細系統提供的的標籤如附件A，加入標籤後的檔案如下：
<table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td colspan="3"><img src="myheader.jpg" width="800" height="93"></td></tr>
<tr>
<td colspan="3" background="mybar.jpg" height="15" width="800"> [HOSTNAME] [SOLPARTMENU] </td>
</tr>
<tr>
<td width="150" id=”LeftPane” runat=”Server”> </td>
<td width="500" id=”ContentPane” runat=”Server”> </td>
<td width="150" id=”RightPane” runat=”Server”> </td>
</tr>
<tr>
<td colspan="3" background="mybar.jpg" align="right"> [COPYRIGHT] [LOGIN] [MYSTORE]</td>
</tr>
</table>
(4)使用CSS定義外觀內容：CSS(Cascading Style Sheet) 串接式的排版樣本，可以參考：
http://www.cyut.edu.tw/~jlu/classes/examples/html/css.html
http://www.pt.ntu.edu.tw/hmchai/PTcomputer03_2/hCSS/CSSintroduction.htm
http://techart.tnua.edu.tw/~suchu/www/html4.html
http://home.so-net.net.tw/peterju/css.html
在搜尋引擎輸入：Cascading Style Sheet會有更多的說明。
這個步驟是新增一個CSS檔案來定義網站所使用文字的字型、大小、顏色。這些定義本來系統就已經有預設的定義了，所以您可以藉由拷貝系統原來的CSS定義來修改。系統預設的CSS檔案，可以在您的商店管理 -->檔案管理中找到portal.css，系統定義的CSS Class g說明 可以在DotNetNuke 檔案目錄下 Documentation-->Public 的DotNetNuke Skinning.doc 附錄A的Skin Attributes部分找到，在這裡變更幾個選單的文字顏色與字型
選單背景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;
}
所有其他為定義的CSS內容，就會使用系統預設值。
在網頁中連結CSS
<link href="mystyle.css" rel="stylesheet" type="text/css">< /SPAN>
套用CSS後檔案成為：
(5)設計Container：這個範例，舉了一個簡單的例子，就是使用一個藍色邊框的表格當作是container，container不是一個完整的html檔案，通常只是一個html表格，內容如下：
- [VISIBILITY] 的標記是用來顯示模組的展開與折疊的功能。
- [TITLE] 的標記是用來顯示模組的標題。
- [ACTIONS] 的標記是指放置模組管理的功能
三、上傳檔案到網站上
Skin 的檔案包含如下：
Container的檔案包含如下：
(1) 注意：Skin與 Container都必須使用 zip壓縮後才可以上傳到系統，系統要是ZIP檔才會自動安裝
(2) 注意：在壓縮檔案時屬性設定必須注意，檔案壓縮解開後檔案必須就出現在第一層目錄，不可以再多一層同名稱之目錄夾，這樣系統讀取檔案會有錯誤。
如myskin.zip解開後成為一個myskin的目錄夾，四個檔案就直接在裡面如下：
不可以是下面再多一層同名稱之目錄夾的錯誤格式：如下
(3) 上傳檔案：以管理員帳號登入系統，到Admin-->檔案管理
新增檔案（Add New File）
選擇上傳 Skin Package：
選擇 Skin Packagea瀏覽a選擇檔案並開啟
按下 Add 新增檔案到上傳列表中
系統不會立刻上傳檔案，會先將檔案放置在系統暫存區
選擇上傳Container Package
選擇 Container Package-->瀏覽-->選擇檔案並開啟
按下 Add 新增檔案到上傳列表中
上傳檔案：
按下 上傳檔案（Upload File(s)）系統會自動上傳並且安裝外觀檔
四、套用外觀設定
Skin與Container的設定是很靈活的，除了在 ”網站系統設定” 中設定，可以套用到整個網站以外，每一個網頁可以單獨設定不同的Skin，每一個模組可以設定不同的Container
(1) 網站系統設定設定Skin 與Container
上傳檔案後，到Admin-->網站系統設定
設定網站使用的 Skin與Container，選擇剛剛上傳的格式。
儲存設定
(2) 網頁變更Skin與Container（覆蓋網站系統設定）
網頁管理-->編輯-->修改網頁外觀與模組外觀-->儲存
(3) 模組變更Container（覆蓋網頁設定與系統設定）
Module Setting-->修改模組外觀-->儲存
套用後的外觀如下：
五、進階設計：
進階設計首先可以參考附錄B，系統所提供的樣式，下載樣式來研究；並參考附錄A的CSS設定，下面會拿兩個系統提供的樣式來分析，提供大家參考。
第一個範例是以Aps-BlueOcean來說明，這是一個很典型的範例，具有幾個通性：
1. 典型的頁首頁尾設計模式：主要就是設計網頁上方橫幅圖片，以顯著漂亮的圖片來吸引瀏覽者，這種設計與第一個範例相同。
2. 加強首頁外觀設計：系統是提供每個網頁都可以有獨立設定外觀，但是通常設計網頁就是首頁是一種顯著漂亮的式樣，其他網頁都是另一種一致的式樣；所以在此系統中就可以於”網站系統設定”中設定一般外觀，在首頁在特別設定另一種外觀。
3. 以CSS設計字型顏色來配合外觀設計：系統都是使用CSS來設定文字顏色字型大小，所以覆蓋系統預設的CSS(命成同樣的名稱就會蓋掉系統預設)，重新設定文字的顏色與字型來配合圖檔的顏色與風格。
4. 沒有特別設計container：透過圖片與CSS就可以有很好的設計了，為求簡潔，container，有時候是不必須的。
5. 外加多個Panes：除了正常的LeftPane, ContentPane, RightPane，還外加其他的Panes，讓模組的擺放位置更加多樣。
下面就會列出網頁與內容，逐一說明，說明的本身是很無趣的，但是卻希望能藉此啟發大家的想像力設計出豐富的網頁
|
填有內容的首頁： |
|
|
|
首頁原始網頁設計：
|
|
首頁表格的切割與排列：經由下列的表達方式可以更清楚的瞭解網頁內容中，表格的欄與列是如何組成。
|
|
首頁HTML內容： |
在html中有兩個屬性，第一個 ID=”xxPane” 是給這個標籤一個命名，第二個RUNAT=”Server” ， 需要這兩個屬性的原因是因為本系統採用Microsoft Asp.Net的技術，這兩個屬性是提供給程式作為識別所必須。 |
|
填有內容的一般網頁：
|
|
一般網頁設計：
|
|
設計內容與首頁均相同，只有上方的圖片大小不同 |
CSS的設計：
/* ================================
覆蓋網站預設CSS
================================
*/
/* 一般 */
/* 模組標題 */
/* 系統預設一般模組的標題文字*/
.Head {
font-family: Arial, Helvetica;
font-size: 15px;
font-weight: bold;
color: #468DC1;
}
/* 部分Container設計用來覆蓋預設模組標題*/
.Title {
font-family: Arial, Helvetica;
font-size: 15px;
font-weight: bold;
color: #468DC1;
}
/* 背景顏色：用在預設網頁背景顏色、各部分Panes的背景 */
Body
{
background-color: #FFFFFF;
}
.HeaderPane {
background-color: #74A9D1;
}
.LeftPane {
background-color: #EBEBEB;
}
.ContentPane {
background-color: #FFFFFF;
}
.RightPane {
background-color: #FFFFFF;
}
.FooterPane {
background-color: #EBEBEB;
}
/*網頁預設一般的字型*/
.normal {
font-weight: normal;
font-size: 12px;
color: black;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
/* 主要用在外觀的靜態內容標籤，如：日期、版權宣告 */
.SelectedTab {
font-weight: normal;
font-size: 10px;
color: black;
font-family: Arial, Helvetica;
text-decoration: none;
}
/* 連結的各種狀態style，如滑鼠滑過、已經連結過的連結等等 */
A.SelectedTab:link {
text-decoration: none;
color: black;
}
A.SelectedTab:visited {
text-decoration: none;
color: black;
}
A.SelectedTab:active {
text-decoration: none;
color: black;
}
A.SelectedTab:hover {
text-decoration: underline;
color: black;
}
/* 主要用在外觀的具有連結的內容標籤，如：我的商店、登入、商城首頁 */
.OtherTabs {
font-weight: normal;
font-size: 12px;
color: white;
font-family: Arial, Helvetica;
text-decoration: none;
padding-left : 5px;
padding-right : 5px;
}
/* 連結的各種狀態style，如滑鼠滑過、已經連結過的連結等等 */
A.OtherTabs:link {
text-decoration: none;
color:white;
font-size : 12px;
font-family : Arial, sans-serif;
padding-left : 5px;
padding-right : 5px;
}
A.OtherTabs:visited {
text-decoration: none;
color:white;
font-size : 12px;
font-family : Arial, sans-serif;
padding-left : 5px;
padding-right : 5px;
}
A.OtherTabs:active {
text-decoration: none;
color:white;
font-size : 12px;
font-family : Arial, sans-serif;
padding-left : 5px;
padding-right : 5px;
}
A.OtherTabs:hover {
text-decoration: none;
color:black;
font-size : 12px;
font-family : Arial, sans-serif;
background-color: #EBEBEB;
padding-left : 5px;
padding-right : 5px;
}
/*SelectedTab與OtherTabs有的設計會反過來使用，就是OtherTabs在靜態的內容標籤，SelectedTab在連結的內容標籤*/
/* 選單的CSS */
/*整個選單的背景*/
.MainMenu_MenuContainer {
border-bottom: #404040 0px solid;
border-left: #FF8080 0px solid;
border-top: #FF8080 0px solid;
border-right: #404040 0px solid;
background-color: #74A9D1;
color : White;
background-image : url(MenuBarBack.jpg);
}
/*主選單*/
.MainMenu_MenuBar {
cursor: pointer;
cursor: hand;
height:22;
}
/*選單項目*/
.MainMenu_MenuItem {
cursor: pointer;
cursor: hand;
color: white;
font-family: Arial, Helvetica;
font-size: 12px;
font-weight: normal;
font-style: normal;
border-left: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
border-right: #000000 0px solid;
}
/*選單項目前面的Icon*/
.MainMenu_MenuIcon {
cursor: pointer;
cursor: hand;
background-color: #74A9D1;
border-left: #000000 0px solid;
border-right: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
text-align: center;
15;
height: 21;
}
/*次選單*/
.MainMenu_SubMenu {
z-index: 1000;
cursor: pointer;
cursor: hand;
background-color: #74A9D1;
filter:progid:DXImageTransform.Microsoft.Shadow(color='DimGray', Direction=135, Strength=3) ;
border-bottom: #404040 0px solid;
border-left: #FF8080 0px solid;
border-top: #FF8080 0px solid;
border-right: #404040 0px solid;
}
/*選單分隔*/
.MainMenu_MenuBreak {
border-bottom: #404040 0px solid;
border-left: #FF8080 0px solid;
border-top: #FF8080 0px solid;
border-right: #404040 0px solid;
background-color: #000000;
height: 0px;
}
/*選單項目被選取時*/
.MainMenu_MenuItemSel {
background-color: #EBEBEB;
cursor: pointer;
cursor: hand;
color: Black;
font-family: Arial, Helvetica;
font-size: 9pt;
font-weight: normal;
font-style: normal;
}
/*選單項目箭頭的CSS*/
.MainMenu_MenuArrow {
font-family: webdings;
font-size: 10pt;
color: white;
cursor: pointer;
cursor: hand;
border-right: #000000 0px solid;
border-bottom: #000000 0px solid;
border-top: #000000 0px solid;
}
/*主選單箭頭的CSS*/
.MainMenu_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
CSS檔案的名稱規則有幾種：
1. 在網頁直接寫在<link href="XXX.css" rel="stylesheet" type="text/css"> 引用。
2. 命名為skin.css系統自動載入。
3. 如果在一個設計中，不同的外觀搭配不一樣的CSS，可以將CSS檔案命名與網頁的名稱相同只是副檔名不同，系統自動載入，如 red.html搭配 red.css ； yellow.html搭配 yellow.css
以XML檔案定義網頁內容標籤的顯示屬性：此步驟為非必要，網頁內容標籤如：我的商店、商城首頁、登入登出、版權宣告、時間等等的標籤內容，系統有預設的文字與格式式樣，但是可以透過進一步的設定來覆蓋系統的預設屬性。詳細設定內容屬性請參考附錄A的 Skin Attributes
|
|
第二個範例以dkorageskin為例子，這個範例幾個特色：
(1) 較複雜的美工設計：美工設計好外觀的圖樣後，經過細部的切割圖片，才可以套用在網站上。
(2) 搭配許多的Container來配合網站設計：除了設計網站一致性的外觀，還設計不同Container來配合skin
填有內容的首頁：
原本美工設計的外觀為：
經過圖片切割排列在網頁的設計樣式如下：
利用表格的定位功能：
1. 將圖片變成表格背景圖片，就可以將原本設計的圖片排列在網頁中。
2. 再利用表格的欄位來放置外觀的內容標籤。
3. 垂直邊框，則利用網頁背景圖片自動重複貼圖的功能與表格的高度設定為100%，IE自動就會將圖片貼出一條直線邊框。
其他 Panes的設定與網頁內容與前面幾個例子類似，在此不列出。
Container的設計：
|
填有內容的Container：
|
網頁設計
| |||||||||||||||
|
|
同樣的方式 1. 設計好圖片後，做圖片切割 2. 在利用表格定位的方式如下：
3. 補上內容標籤 | |||||||||||||||
|
網頁html如下： | ||||||||||||||||
在這裡是舉出幾個例子帶大家入門，如果要設計更複雜的網頁，參考本文件來研究系統提供的範例。
文章来源:http://blog.blueshop.com.tw/n122771911/archive/2005/05/09/3598.aspx