进行网站设计之主题

承继上一篇博客：现在添加Controls.skin文件(可以把所有的服务器控件的样式放在此文件中)

注意：用于SiteMapPath控件的skin就无法轻松地用CSS样式来代替了，该控件映射了不止一个HTML元素。

 

创建一个实例Default.aspx页面

选择Template.master模板页面，在中间的ContentPlaceHolder中放入一些内容：

注意：@Page指令添加Theme属性为TemplateMaster，并且masterPageFile指定Template.master。

也可以在web.config中操作一次从而实现能对所有页面实现上述效果，如下设置：

<?xml version="1.0"?>
<configuration>
    <system.web>
      <pages theme="TemplateMonster" masterPageFile="~/Template.master"/>
      <!--其他的设置省略-->
    </system.web>
</configuration>

 

 

这样，可以将default.aspx对应的部分从代码中删除。

<%@ Page Title="The Beer House"  Language="C#"  AutoEventWireup="true" CodeFile="Default.aspx.cs" 
Inherits="_Default" %>

运行该页面，与上面的效果一样。

 

创建第二个主题

为了测试主题选择功能，再建PlainHtmlYellow文件夹。该文件夹也包含Default.css文件(从TemplateMaster中复制)，这个Default.css文件进行修改，页头与页脚使用固定值作为背景色，尤其是左右两列，它们的位置进行了互换，这样名为leftcol的容器(div)靠右停靠，而名为rightcol的容器靠左停靠。

这就是样式表和DIV的强大所在：只用改变少数样式，左边的内容就会移动到右边。

看看这个主题下的效果：(现在改动web.config的对应Theme，显得多么方便。)

 

当然，该主题下的css文件的全部代码，还是呈现出来：（留给大家自己研究了。）

body
{  margin: 0px;  font-family: Verdana, Arial, Serif; font-size: 12px;}
#container
{   background-color: #ffb487;}
#container2
{  background-color: #8d2d23;  margin-right: 200px;}

#header
{  padding: 0px; margin: 0px;  width: 100%;   height: 150px;
    background-image: url(images/HeaderSlice.gif);}

#header2
{  padding: 0px; margin: 0px; width: 260px;   height: 150px;
   background-image: url(images/Header.gif);}

#headermenu
{ position: absolute;  top: 124px; left: 245px; width: 700px; padding: 2px 2px 2px 2px;}

#breadcrumb
{ background-color: #4e1e1a; color: white; padding: 3px; font-size: 10px;  padding-left: 5px;}

#footermenu
{  text-align: center; padding-top: 10px; }

#loginbox
{position: absolute;top:14px;right: 10px;width:180px;height:80px;padding:2px;font-size:10px;}


#themeselector
{position: absolute;text-align: right;top: 122px;right: 10px;width: 180px;height: 80px;
   padding: 2px 2px 2px 2px; 
   font-size: 10px;
}

#footer
{
    border-top: solid 2px #8d2d23;
    padding: 0px;
    margin: 0px;
    width: 100%;
    height: 62px;
    background-color: #fc9a0e;
    visibility: visible;
}
        
#leftcol
{
   position: absolute;
   top: 150px;
   right: 0px;      
   width: 200px;
   background-color: #ffb487;
   font-size: 10px;
}
#rightcol
{
   position: absolute;
   top: 150px;
   left: 0px; 
   width: 198px;
   color: White;
   background-color: #8d2d23;
   font-size: 10px;
}

#centercol
{
   position: relative;
   margin-left: 200px;
   padding: 0px;
   background-color: white;
   height: 500px;
}

#centercolcontent
{
   padding: 15px 6px 15px 6px;
}
.footermenulink
{
   font-family: Arial, Serif;
   font-size: 12px;
   font-weight: bold;
   text-transform: uppercase;        
}

.headermenulink
{
   font-family: Impact;
   font-size: 17px;  
}

 

创建ThemeSelector用户控件，请参考：用户控件实现主题的切换

当输入控件获得焦点时高亮显示!

.highlight{background-color:#fefbd2;color:#000080;}只添加到TemplateMonster文件夹下的Default.css文件中。

在default.aspx中放入TextBox，用来测试一下：

运行效果：

 

小结：

网站的用户界面基础平台的构建已经完成。设计并实现了一个包括普通HTML和图片的模板页面。在网站中也使用了主题，配合模板页面一起使用，还允许用户从下拉框选择自己喜欢的主题。使用了web.sitemap(站点地图)，使用Menu和SiteMapPath实现了导航系统。

最后，自定义BasePage类来实现多个页面的通用行为。

 

最后附上部分相关代码：

app_code/Helper.cs代码：

namespace TheBeerHouse
{
    public static class Helpers
    {
        public static string[] GetThemes()
        {
            if (HttpContext.Current.Cache["SiteThemes"] != null)
            {
                return (string[])HttpContext.Current.Cache["SiteThemes"];
            }
            else
            {
                string themesDirPath = HttpContext.Current.Server.MapPath("~/App_Themes");//获得物理路径
                string[] themes = Directory.GetDirectories(themesDirPath);//查找该文件夹中所包含的所有文件夹
                for (int i = 0; i < themes.Length; i++)
                {
                    themes[i] = Path.GetFileName(themes[i]);//从完整路径中只获得文件名称(去掉路径部分)
                    HttpContext.Current.Cache.Insert("SiteThemes", themes,
                        new CacheDependency(themesDirPath)); //保存在缓存中,以后速度更快 

                } return themes;
            }
        }

        public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes)
        {
            foreach (Control c in container.Controls)
            {
                if (
                    (onlyTextBoxes && c is TextBox) ||
                    (!onlyTextBoxes && (c is DropDownList || c is ListBox || c is RadioButton || c is CheckBox ||
                                      c is CheckBoxList || c is RadioButtonList || c is TextBox
                                      )
                    )
                   )
                {
                    (c as WebControl).Attributes.Add("onfocus", string.Format("this.className='{0}';", className));
                    (c as WebControl).Attributes.Add("onblur", "this.className='';");
                }
                else
                {
                    if (c.Controls.Count > 0)
                    {
                        SetInputControlsHighlight(c, className, onlyTextBoxes);
                    }
                }
            }
        }

    }
}
 

 

app_code/globals.cs代码：

namespace TheBeerHouse
{
    public static class Globals
    {
        public static string ThemesSelectorID = "";
    }
}

app_code/BasePage.cs代码：

namespace TheBeerHouse.UI
{
    public class BasePage:System.Web.UI.Page
    {
        protected override void OnPreInit(EventArgs e)
        {
            string id = Globals.ThemesSelectorID;
            if (id.Length > 0)
            {
                if (this.Request.Form["__EVENTTARGET"] == id &&
                !string.IsNullOrEmpty(Request.Form[id]))
                {
                    this.Theme = Request.Form[id];
                    this.Session["CurrentTheme"] = this.Theme;
                }
                else
                {
                    if (this.Session["CurrentTheme"] != null)
                    {
                        this.Theme = this.Session["CurrentTheme"].ToString();
                    }
                }
            }
            base.OnPreInit(e);
        }

        protected override void OnLoad(EventArgs e)
        {
            Helpers.SetInputControlsHighlight(this, "highlight", false);
            base.OnLoad(e);
        }
    }
}

Controls/ThemeSelector.ascx.cs代码：

using TheBeerHouse;
public partial class Controls_ThemeSelector : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Globals.ThemesSelectorID.Length == 0)
            Globals.ThemesSelectorID = ddlThemes.UniqueID;

        ddlThemes.DataSource = Helpers.GetThemes();
        ddlThemes.DataBind();

        ddlThemes.SelectedValue = this.Page.Theme;
    }
}

Default.aspx.cs代码：

public partial class _Default :BasePage //System.Web.UI.Page