個性化皮膚應用

        無論在開發論壇、博客、Spaces等應用,能夠給用戶一個選擇皮膚(甚至是自定義皮膚)的功能,無疑會爲您的Web應用程序增色不少, 今天我就介紹一個簡單的自定義皮膚解決方案。
        需要掌握的相關技術:
        1、asp.net基本技術;
        2、CSS 樣式語言(基礎);
        沒錯,以上兩種技術就足以完成個性化皮膚定製了。

       一、解決方案:
             1、主要思路是利用Asp Web控件中的文本控件,該控件可以忠實呈現您所輸入的內容,利用該控件動態從數據庫中讀取用戶選擇的皮膚CSS文件虛擬地址並寫入到頁面的HEAD中,在頁面呈現時將自動根據用戶選擇的CSS文件中的配色、圖片等內容進行頁面文本的格式化。
             2、編制幾套CSS模版,在不同的模版中對於佈局的頂級控件採取虛擬類的方式進行定義,例如:#TOP{}的形式,對於內容的格式化採用自定義類的方式進行定義,例如:.topCss{}的形式。
             3、爲了便於管理和移植,最好將圖片存放於統一的文件夾,我的做法是:首先、定義一個皮膚文件夾;其次、在該文件夾下使用文件夾進行皮膚模版的區分,例如:blue主體皮膚的CSS文件統一存放於blue文件夾內部,並且在內部創建一個images文件夾用來存放皮膚主題相關圖片。
       二、示例代碼:

        Protected WithEvents CSSlink As Web.UI.WebControls.Literal '聲明文本控件

       '寫入CSS內容
        If (Me.CSSlink.Text = "<LINK href=""Skins/Default/style.css"" type=""text/css"" rel=""stylesheet"">") Then
            Me.CSSlink.Text = "<LINK href=""Skins/Clover/style.css"" type=""text/css"" rel=""stylesheet"">"
        Else
            Me.CSSlink.Text = "<LINK href=""Skins/Default/style.css"" type=""text/css"" rel=""stylesheet"">"
        End If

 

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