DNN皮膚開發

 

製作皮膚沒有特定的順序,但如果按如下順序操作會更好。

  1. 設置皮膚開發環境

    爲了簡化皮膚的開發並加快後續打包的速度,建議按如下的文件結構組織文件
    /Skins
      /SkinName (
    你開發的皮膚包的自定義名稱 )
         
    ( 這裏放要發佈的皮膚包的zip文件)
        /containers ( this is a static name to identify the container files for the skin package )
          … (
    與容器相關的所有資源文件 )
        /skins ( this is a static name to identify the skin files for the skin package
          … (
    與皮膚有關的所有文件 )

    例如:
  2. 設計皮膚

The free-form nature of skinning provides almost unlimited creative freedom with your design. 設計者通常創建一幅圖片作爲最初的設計原型( 使用PhoteShop或其他的專業設計工具 ). 應當注意的是在原型設計當中應包括所有的用戶界面元素,包括靜態元素如圖片和文本,同時也要包含動態元素,如登錄鏈接、導航欄、菜單等。 but it should also include active elements such as Login links, a navigation/menu system, etc… 由於本系統在運行時動態的加載內容,所以在設計是要爲這些內容留出空間。Since this is a portal system which injects dynamic content at runtime, you will need to leave room in your design for this content.

設計結束的時候,設計者就要站到下一步:將圖片轉換爲html文檔。如何有效的降圖形元素轉換爲html形式涉及到很多技術問題。HTML展示形式要比自由戰士的圖片要規整很多而且將圖片轉換爲HTML文檔對於最終產品的展現形式非常重要。由於HTML文檔本身也有很多動態的屬性,所以你也需要處理這些動態的問題。例如, 你學要確定皮膚的某一部分是否根據客戶端瀏覽器的屏幕分辨率縮放或者保持固定寬度。

  1. 選擇HTML ASCX編輯器.

如果你熟悉HTML表格和相關屬性並且能處理簡單的CSS,你就可以製作皮膚。 所見即所得的編輯器是其變得相當容易。 你可以使用 FrontPage, HotMetal, ColdFusion, DreamWeaver, VS.NET等等,任何你喜歡的編輯器。 反正都是HTML

所有的HTML標記必須是"well formed." 就是說所有的HTML標記都必須閉合。 例如, 你有一個 <TABLE> 標記, 就必須用</TABLE> 閉合。所有的標記的屬性的“=”邊上不留空格, 屬性值必須有雙引號( <TABLE WIDTH=”200”>…  </TABLE> ). 通常專業的HTML編輯器會自動處理,但是某些參數設置可能是別的形式,一次最好仔細檢查一下。

  1. 管理圖片

圖片是皮膚設計內在的一部分。爲了讓皮膚引擎能找到你的圖片文件,在引用圖片的時候你需要使用特殊的格式。將圖片文件和皮膚文件放在同一個文件夾裏是個好辦法。當然也不是必須這麼做,因爲皮膚引擎能識別你所指定的任何文件夾。

爲了讓DotNetNuke找到你的圖片文件,皮膚上傳工具必須在處理皮膚包的時候將圖片引用的URL轉換爲相對路徑。這種路徑形式能在加載皮膚圖片時有最好的性能 (相對路徑不需要在運行時每次請求都要進行檢測).

皮膚上傳工具將會將如下的HTML標記轉化爲相對路徑( 包含在HTMLASCX 文件中的 ): IMG SRC, TD BACKGROUND, SCRIPT SRC. 同時也會處理疊層樣式表( CSS )標記: BACKGROUND-IMAGE:URL(). 爲了支持衆多HTML編輯器產生的代碼,各標記的順序對於皮膚上傳工具並不重要。

DotNetNuke 包含一些靜態的圖片並不能自皮膚包中設定。這些圖片代表應用程序的全局管理功能,存儲在網站的/images文件夾下。 在完全靈活的皮膚架構中絕對不應該有靜態圖片。也就是說在靈活和性能之間應該有一個折中,在這方面DotNetNuke選擇了後者。使用靜態的管理圖片主要有如下幾點好處: 1)提高性能,皮膚架構在單一的位置訪問管理圖標,而不要那個一個一個的確定該圖標在皮膚中是不是存在2) 簡化皮膚管理,皮膚中只需要包含同皮膚直接相關的圖片 3)減少磁盤空間佔用, 管理圖標不必在每一個皮膚包裏都包含4) 使DotNetNuke有一致的管理界面體驗每一個皮膚的管理圖標都一致對編寫文檔和用戶培訓有好處。

  1. 加入皮膚對象Skin objects和內容塊Content Panes

皮膚對象是在運行時動態處理的對象。 如果你要創建 ASCX 皮膚, 你就需要指定 @Register 和實際的用戶控件標記 ( <dnn:Login runat="server" id="dnnLogin" /> ). 如果創建的是 HTML皮膚,你只需要簡單指定標記即可( [LOGIN] ). 爲了設計皮膚瞭解每一個皮膚對象的功能很重要 ( 參見附錄B ).

除了皮膚對象還有一個概念內容塊 Content Panes. 內容塊是運行時動態插入的內容模塊的容器。內容塊是帶有和DotNetNuke皮膚交互的自定義屬性的簡單HTML標記。 內容塊允許的HTML標記有<TD>, <DIV>, <SPAN>,<P>. 最精簡的情況下你也必須包含至少一個內容塊,並將其命名爲“ContentPane”. 內容塊不需要連續 ,他們可以在頁面的任何地方。 內容塊時可摺疊的,也就是說如果在運行時內容塊也不包含仁和內容,它就是不可見的。如果你創建的是HTML內容塊,你就可以在設計中使用皮膚標記[CONTENTPANE] 來表示你要插入內容的區域。
皮膚對象支持實例命名named instances. 例如, 你想在皮膚中包含兩個菜單控件, 你就可以在皮膚文件裏設定 [MENU:1] [MENU:2]. 多數情況下在你的皮膚裏只使用一個皮膚對象實例,所以最好使用單一實例方式 ( [MENU] ). 實例命名對內容塊很重要,因爲多數情況下在皮膚中你需要使用不止一個內容塊。這樣你就需要使用 [CONTENTPANE:1], [CONTENTPANE:2], 等實例命名( 由於 [CONTENTPANE] 是默認的 皮膚塊,所以你必須有一個內容塊叫這個名字).

皮膚對象還包含屬性。 屬性允許你在皮膚中自定義皮膚對象的外觀。每一個皮膚對象都包含一個屬性對象集,詳見附錄B.如果你創建的是ASCX 皮膚,你就需要在皮膚中直接指定屬性 ( <dnn:Login runat=”server” id=”dnnLogin” Text=”Signin” /> ). If you are creating HTML skins then you must include your attributes specifications in a separate file – this preserves the presentation of the HTMLskin file for the designer. 皮膚包可以包含全局屬性設定文件“skin.xml” ( 或者容器的 “container.xml”)  ,應用到皮膚包的每一個文件. 另外, 你也可以通過爲皮膚提供一個 “skinfilename.xml”文件來覆蓋全局皮膚屬性設定.皮膚上傳工具通過將皮膚屬性設置和HTML展示文件合併創建一個ASCX皮膚文件。下面的xml片段描述了屬性文件的結構:

<Objects>

   <Object>

       <Token>[LOGIN]</Token>

       <Settings>

          <Setting>

              <Name>Text</Name>

              <Value>Signin</Value>

          </Setting>

       </Settings>

   </Object>

</Objects>

注意在xml文件中將是一個接一個的皮膚對象的定義和屬性設置( [MENU] ) 當然也包含實例命名. 例如,你想在皮膚中包含一個垂直的和一個水平的菜單,你就可以在xml文件中指定兩個實例命名 [MENU:1] [MENU:2],並設置不同的屬性。

在創建HTML皮膚並使用多個內容塊的時候,你需要在屬性文件裏指定“ID”屬性。

<Objects>

   <Object>

       <Token>[CONTENTPANE:1]</Token>

       <Settings>

          <Setting>

              <Name>ID</Name>

              <Value>LeftPane</Value>

          </Setting>

       </Settings>

   </Object>

</Objects>

  1. 創建疊層樣式表

DotNetNuke使用外部疊層樣式表 (CSS ) ,以充分利用疊層樣式表優點。 實質上DotNetNuke可以在同一個頁面引用多個 外部的疊層樣式表,每一個疊層樣式表的引用都指定引用順序,這樣就可以實現層次覆蓋. 疊層樣式表的層次順序簡述如下( 每一項覆蓋前一項):

1).      Modules – 自定義的模塊樣式定義在 PortalModuleControl.StyleSheet

2).      Default – 默認主機樣式 – default.css

3).      Skin – 皮膚樣式 – skin.css skinfilename.css

4).      Container – 容器樣式 – container.css containerfilename.css

5).      Portal – 由門戶站點管理員定義的樣式 – portal.css

      皮膚包可以包含一個名爲 “skin.css” ( 或容器的 “container.css” )  的樣式表,應用到皮膚包中的文件. 另外你也可以使用“skinfilename.css” 爲皮膚指定樣式覆蓋全局的皮膚樣式. DotNetNuke 默認的樣式表 ( /Portals/_default/default.css )中包含多個CSS "classes" (the entries that start with a period),門戶站點依賴於這些樣式獲得一致的用戶界面體驗。你可以隨便創建自己的樣式,但是至少你應該覆蓋默認樣式來和你的皮膚設置一致。

  1. 發佈皮膚

      爲了能在Skin Gallery中能看到你的皮膚,你需要創建一個高質量的屏幕截圖。你也應該爲每一個皮膚或容器創建對應的擴展名爲JPG的屏幕截圖 (如果你的皮膚文件爲skin.html,則屏幕截圖爲skin.jpg ).

  1. 將皮膚打包

      所有的皮膚相關的文件將被打包到一個zip壓縮文件. 如果你使用Windows XP, 或者安裝了 "Compressed Folders"功能的 Windows ME,你可以在文件加上單擊鼠標右鍵選擇 "Send to >", 單擊 "Compressed (zipped) folder." 操作系統會爲你壓縮好,然後就可以上傳了。如果沒有上述操作系統,可以使用Winzip或其他的zip壓縮工具。
許多時候你可能要將皮膚文件和容器文件打包到同一個壓縮文件中。爲此你學要將容器文件壓縮爲“containers.zip”. 同樣把皮膚文件壓縮到“skins.zip”. 然後將兩個文件壓縮到同一個壓縮包裏,按照你皮膚的名稱命名你的壓縮包。 這樣人們就可以通過皮膚上傳工具上傳一個文件就可以安裝整個皮膚( 同時包含皮膚和容器 )

我想要更多的完全免費 Dnn Skins

 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章