进行网站设计之主题
承继上一篇博客：现在添加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文件的全部代码，还是呈现出来：（留给大家自己研究了。）
View Code
1 body
2 { margin: 0px; font-family: Verdana, Arial, Serif; font-size: 12px;}
3 #container
4 { background-color: #ffb487;}
5 #container2
6 { background-color: #8d2d23; margin-right: 200px;}
7
8 #header
9 { padding: 0px; margin: 0px; width: 100%; height: 150px;
10 background-image: url(images/HeaderSlice.gif);}
11
12 #header2
13 { padding: 0px; margin: 0px; width: 260px; height: 150px;
14 background-image: url(images/Header.gif);}
15
16 #headermenu
17 { position: absolute; top: 124px; left: 245px; width: 700px; padding: 2px 2px 2px 2px;}
18
19 #breadcrumb
20 { background-color: #4e1e1a; color: white; padding: 3px; font-size: 10px; padding-left: 5px;}
21
22 #footermenu
23 { text-align: center; padding-top: 10px; }
24
25 #loginbox
26 {position: absolute;top:14px;right: 10px;width:180px;height:80px;padding:2px;font-size:10px;}
27
28
29 #themeselector
30 {position: absolute;text-align: right;top: 122px;right: 10px;width: 180px;height: 80px;
31 padding: 2px 2px 2px 2px;
32 font-size: 10px;
33 }
34
35 #footer
36 {
37 border-top: solid 2px #8d2d23;
38 padding: 0px;
39 margin: 0px;
40 width: 100%;
41 height: 62px;
42 background-color: #fc9a0e;
43 visibility: visible;
44 }
45
46 #leftcol
47 {
48 position: absolute;
49 top: 150px;
50 right: 0px;
51 width: 200px;
52 background-color: #ffb487;
53 font-size: 10px;
54 }
55 #rightcol
56 {
57 position: absolute;
58 top: 150px;
59 left: 0px;
60 width: 198px;
61 color: White;
62 background-color: #8d2d23;
63 font-size: 10px;
64 }
65
66 #centercol
67 {
68 position: relative;
69 margin-left: 200px;
70 padding: 0px;
71 background-color: white;
72 height: 500px;
73 }
74
75 #centercolcontent
76 {
77 padding: 15px 6px 15px 6px;
78 }
79 .footermenulink
80 {
81 font-family: Arial, Serif;
82 font-size: 12px;
83 font-weight: bold;
84 text-transform: uppercase;
85 }
86
87 .headermenulink
88 {
89 font-family: Impact;
90 font-size: 17px;
91 }
创建ThemeSelector用户控件，请参考：用户控件实现主题的切换
.highlight{background-color:#fefbd2;color:#000080;}只添加到TemplateMonster文件夹下的Default.css文件中。
在default.aspx中放入TextBox，用来测试一下：
运行效果：
小结：
网站的用户界面基础平台的构建已经完成。设计并实现了一个包括普通HTML和图片的模板页面。在网站中也使用了主题，配合模板页面一起使用，还允许用户从下拉框选择自己喜欢的主题。使用了web.sitemap(站点地图)，使用Menu和SiteMapPath实现了导航系统。
最后，自定义BasePage类来实现多个页面的通用行为。
最后附上部分相关代码：
app_code/Helper.cs代码：
View Code
1 namespace TheBeerHouse
2 {
3 public static class Helpers
4 {
5 public static string[] GetThemes()
6 {
7 if (HttpContext.Current.Cache["SiteThemes"] != null)
8 {
9 return (string[])HttpContext.Current.Cache["SiteThemes"];
10 }
11 else
12 {
13 string themesDirPath = HttpContext.Current.Server.MapPath("~/App_Themes");//获得物理路径
14 string[] themes = Directory.GetDirectories(themesDirPath);//查找该文件夹中所包含的所有文件夹
15 for (int i = 0; i < themes.Length; i++)
16 {
17 themes[i] = Path.GetFileName(themes[i]);//从完整路径中只获得文件名称(去掉路径部分)
18 HttpContext.Current.Cache.Insert("SiteThemes", themes,
19 new CacheDependency(themesDirPath)); //保存在缓存中,以后速度更快
20
21 } return themes;
22 }
23 }
24
25 public static void SetInputControlsHighlight(Control container, string className, bool onlyTextBoxes)
26 {
27 foreach (Control c in container.Controls)
28 {
29 if (
30 (onlyTextBoxes && c is TextBox) ||
31 (!onlyTextBoxes && (c is DropDownList || c is ListBox || c is RadioButton || c is CheckBox ||
32 c is CheckBoxList || c is RadioButtonList || c is TextBox
33 )
34 )
35 )
36 {
37 (c as WebControl).Attributes.Add("onfocus", string.Format("this.className='{0}';", className));
38 (c as WebControl).Attributes.Add("onblur", "this.className='';");
39 }
40 else
41 {
42 if (c.Controls.Count > 0)
43 {
44 SetInputControlsHighlight(c, className, onlyTextBoxes);
45 }
46 }
47 }
48 }
49
50 }
51 }
52
app_code/globals.cs代码：
namespace TheBeerHouse
{
public static class Globals
{
public static string ThemesSelectorID = "";
}
}
app_code/BasePage.cs代码：
View Code
1 namespace TheBeerHouse.UI
2 {
3 public class BasePage:System.Web.UI.Page
4 {
5 protected override void OnPreInit(EventArgs e)
6 {
7 string id = Globals.ThemesSelectorID;
8 if (id.Length > 0)
9 {
10 if (this.Request.Form["__EVENTTARGET"] == id &&
11 !string.IsNullOrEmpty(Request.Form[id]))
12 {
13 this.Theme = Request.Form[id];
14 this.Session["CurrentTheme"] = this.Theme;
15 }
16 else
17 {
18 if (this.Session["CurrentTheme"] != null)
19 {
20 this.Theme = this.Session["CurrentTheme"].ToString();
21 }
22 }
23 }
24 base.OnPreInit(e);
25 }
26
27 protected override void OnLoad(EventArgs e)
28 {
29 Helpers.SetInputControlsHighlight(this, "highlight", false);
30 base.OnLoad(e);
31 }
32 }
33 }
Controls/ThemeSelector.ascx.cs代码：
View Code
1、Django ORM常用查询的返回值类型
2、iOS 9音频应用开发基础教程
3、Java - IO之文件夹遍历删除(递归) July 21，2019
4、jS截取字符串
5、Python 多版本共存之pyenv
1 using TheBeerHouse;
2 public partial class Controls_ThemeSelector : System.Web.UI.UserControl
3 {
4 protected void Page_Load(object sender, EventArgs e)
5 {
6 if (Globals.ThemesSelectorID.Length == 0)
7 Globals.ThemesSelectorID = ddlThemes.UniqueID;
8
9 ddlThemes.DataSource = Helpers.GetThemes();
10 ddlThemes.DataBind();
11
12 ddlThemes.SelectedValue = this.Page.Theme;
13 }
14 }
Default.aspx.cs代码：
public partial class _Default :BasePage //System.Web.UI.Page优质内容筛选与推荐>>
1、Django ORM常用查询的返回值类型
2、iOS 9音频应用开发基础教程
3、Java - IO之文件夹遍历删除(递归) July 21，2019
4、jS截取字符串
5、Python 多版本共存之pyenv