主页和主题
4.77/5 (14投票s)
通过主页，您可以定义应用程序的外观和感觉，其中包括多个内容占位符。通过主页，您可以与主题配合使用，为用户提供出色的用户界面。
目录
引言
ASP.NET 中的主页允许您控制网站/Web 应用程序中所有页面的布局、设计和常用控件。通过单个主页，您可以定义应用程序的外观和感觉，其中包括多个内容占位符。通过主页，您可以与主题配合使用，为用户提供出色的用户界面。在本文中，我们将概述如何
- 创建具有单个和多个内容占位符的主页
- 添加内容页
- 嵌套主页
- 编程主页
- 为应用程序创建主题。
- 最后，我们将看到如何处理多个主题。
创建主页
创建主页非常简单。在您的网站中，右键单击“解决方案资源管理器”，选择“添加新项”，然后从弹出窗口中选择“主页”，如图所示。主页的扩展名为 .master，其中包含网站的所有常用元素（模板/布局）。
默认情况下，主页包含两个内容占位符。主页的代码如下：
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
在上面，@ Master 指令将其标识为主页，而所有其他页面都有 @page 指令。
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="content" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
上面的内容占位符用于通过站点中的 ASP.NET 服务器控件放置静态内容或动态内容。内容占位符放置在 header 部分和 form 标签中，这通常允许用户在 header 和 body 部分放置页面内容，但没有特定标签下放置内容占位符的限制，也没有对使用内容占位符数量的限制。在文章的后面，我们将详细介绍内容占位符的布局和用法。
内容占位符允许用户灵活地使用通用的页面布局来维护站点内容。
添加内容占位符
我们现在已经创建了一个主页，接下来需要向站点添加一个内容占位符。右键单击“解决方案资源管理器”，选择“添加新项”，然后从弹出窗口中选择一个内容占位符。
这会将内容占位符添加到站点，并在页面中包含以下代码：
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
创建嵌套主页
要创建嵌套主页，请按照以下步骤操作。重复上述步骤添加一个主页，然后右键单击“解决方案资源管理器”，选择“添加新项”，然后从已安装的模板中选择“主页”，然后选中“选择主页”复选框，并将主页命名为 nestedmaster.master，如下面的图所示。
从下面的代码中，我们可以观察到主页、内容页和嵌套主页代码之间的区别。
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<%@ Master Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="NestedMaster.master.cs" Inherits="NestedMaster" %>
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master"
AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
至此，我们已经为站点创建了一个嵌套主页。现在我们需要设计子主页。
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<h1>Image Slide Show</h1>
<h3>Product's Show Case:</h3>
<asp:Image ID="Image1" runat="server" ImageUrl ="~/Blue hills.jpg" Height="173px"
Width="287px" />
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</asp:Content>
活动：开发主题管理器应用程序
创建页面布局
我们已经了解了如何为应用程序创建主页。现在我们将开始创建页面布局。我们可以使用不同的技术和工具来创建页面布局。我们可以使用 HTML 和 CSS 或使用 Photoshop 等网页设计工具来创建页面布局。在我们的示例中，我们将使用 HTML 和 CSS 创建一个页面模板。我们可以使用 HTML 的 div 标签创建简单的两列页面布局，或者在设计视图中通过从工具箱拖动表格来创建。后者您可以自行尝试。这里我们将使用 div 标签和 CSS 来设计页面布局。以下 HTML 代码显示了一个两列页面布局，并且布局的设计效果通过如下所示的 CSS 代码应用：
HTML 布局
<div id = "Container">
<div id ="Container">
<div id="header">
</div>
<div id="SideBar">
</div>
<div id="Content">
</div>
<div id="Footer">
</div>
</div>
从 div 标签可以清楚地看出，我们现在有一个 header、侧边导航、内容和 footer。
- 现在，使用以下 CSS，我们可以将
div排列在页面上。 - 右键单击“解决方案资源管理器”，选择“添加新项”，然后从弹出窗口中选择“样式表”。
- 将文件命名为 ‘AcquaStyleSheet.css’。
- 将以下代码复制并粘贴到您的样式表中。
CSS 代码
body
{
margin:20px 20px 20px 20px;
padding: 0;
font-family: Georgia, Times, "Times New Roman", serif;
color: black;
width: 960px;
border-right: 1px solid black;
background-color:#98B3F6;
}
#header
{
background-color:#1B7DCE;
margin:10px 10px 0px 10px;
height:120px;
overflow:hidden;
}
#SideBar
{
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;
height:900px;
}
#Content
{
padding-top: 1em;
margin: 0 12px 0 180px;
background-color:White;
overflow:hidden;
}
#Footer
{
clear: both;
background-color: #62645C;
padding-bottom: 1em;
border-top: 1px solid #333;
padding-left: 200px;
}
接下来，我们将添加更多通用功能，这些功能将通过网站提供，包括标题、标语和菜单。
标题和标语
在 header div 标签内添加以下 HTML 代码，该代码显示您站点的标题和标语。
<h1 class ="Title">Mysite Title</h1>
<span class ="TagLine">Mysite Tag LIne</span>
CSS 代码放在此处
#header .Title
{
color:White;
}
#header h1
{
margin:10px 40px 10px 40px;
}
#header .TagLine
{
color:White;
margin:40px 40px 10px 70px;
}
为站点创建导航和菜单
ASP.NET 提供了广泛的站点导航控件，您可以直接用于您的站点，也可以使用简单的 HTML 标签来设计您站点的导航。
设计菜单
<ul class ="Menu">
<li><a href ="#">Home</a></li>
<li><a href ="#">AboutMe</a></li>
<li><a href ="#">Articles</a></li>
<li><a href ="#">ContactUs</a></li>
</ul>
CSS 代码
.Menu li
{
display:inline;
margin:0px;
}
.Menu a
{
text-decoration:none;
background-color:Blue;
padding:5px;
color:White;
border-right:4px solid Maroon;
margin:0px;
border-left:none;
}
.Menu a:hover
{
background-color:Maroon; padding:5px;
border-right:4px solid Blue; margin:0px;
}
最后，您还可以为 Grid 控件应用 CSS 样式。此处显示的 CSS 代码可应用于 ASP.NET Grid 控件。
.gridAlternatingRowStyle
{
background-color:White;
}
.gridEditRowStyle
{
background-color:#2461BF;
}
.gridFooterStyle
{
background-color:#98B3F6;
color:White;
font-weight:bold;
}
.gridHeaderStyle
{
background-color:#1B7DCE;
font-weight:bold;
color:White;
}
.gridPagerStyle
{
background-color:#98B3F6;
color:White;
text-align:center;
margin:20px;
border:1px solid black;
background-image:url(Images/abc.gif);
}
.gridRowStyle
{
background-color:#EFF3FB;
}
.gridSelectedRowStyle
{
background-color:#D1DDF1;
color:#333333;
}
.grid
{
border:none;
width:100%;
}
GridView 代码放在此处
<EditRowStyle CssClass ="gridEditRowStyle" />
<FooterStyle CssClass="gridFooterStyle" />
<HeaderStyle CssClass ="gridHeaderStyle" />
<PagerStyle CssClass="gridPagerStyle" />
<RowStyle CssClass ="gridRowStyle" />
<SelectedRowStyle CssClass ="gridSelectedRowStyle" />
使用 Skin 文件应用样式
使用 Skin 文件，您可以为服务器控件应用样式。以下示例显示了 Skin 文件的用法。Skin 文件中的代码与服务器控件语法相同，只是控件的 ID 属性被省略了。
<asp:TextBox ID="TextBox1" runat="server" BorderColor="#FFFFB7" Width="288px">
</asp:TextBox>
<asp:Button ID="Button1" runat="server" BackColor="#FF9933"
ForeColor="White" Text="Button" Width="119px" />
<asp:GridView ID="GridView1" runat="server" CellPadding="4"
ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#1B7DCE" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#98B3F6" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#EFF3FB" ForeColor="#333333" />
</asp:GridView>
为首页（内容页）添加一些样式
正如我们已经了解了如何使用 Skin 文件一样，现在在我们的应用程序中，我们将使用上述 Skin 文件样式添加一个反馈表单。为文本框和按钮定义的上述样式将应用于反馈表单中的所有控件。但如果我们想更具体，对于每个单独的文本框，我们可以使用 Skin 文件中控件的 SkinID 属性，如下所示：回来，我们将在 CSS 页面中为“引用”和“图像”定义更多样式。以下代码显示了显示图像的代码。
.imagecells img
{
width:140px;
height:100px;
border:2px solid Gray;
padding:15px;
margin:15px;
background-color:#98B3F6;
border-style:inset;
}
可以使用以下 CSS 来显示引文。
.quotehomepage blockquote {
font: italic 1em/1.6em Georgia, "Times New Roman", Times, serif;
width: 300px;
background: url(/ThemeManager/Images/closequote.gif) no-repeat right bottom;
padding-left: 18px;
text-indent: -18px;
float: right;
margin: 20px 0 10px 10px;
color: #999999;
}
.quotehomepage blockquote:first-letter {
background: url(/ThemeManager/Images/openquote.gif) no-repeat left top;
padding-left: 18px;
font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}
我们可以为 span 标签定义样式，该样式可用于突出显示元素。
.welcome span
{
color:#98B3F6;
}
ASP.NET 中的主题
到目前为止我们创建的样式可以作为应用程序的主题来应用。我们可以创建更多像上面那样的 CSS 样式，并允许用户选择一个。ASP.NET 为您提供了一种灵活的方法来实现这一点。请按照以下步骤在您的应用程序中创建主题：主题文件夹包含 Skin 文件和级联样式表。
正如我们已经了解了如何创建样式表和 Skin 文件一样，现在我们将了解如何将它们用于主题。Skin 文件允许您像级联样式一样为应用程序应用样式。您可以通过使用 CSS 样式表、Skin 文件或两者兼而有之地为站点应用样式。主要可以使用 Skin 文件为服务器控件应用样式。
添加主题文件夹
- 右键单击“解决方案资源管理器”，选择“添加 ASP.NET 文件夹”，然后选择“主题”。这将为应用程序添加主题文件夹。
- 在 App_Theme 中，添加一个新的主题文件夹，您可以为该文件夹命名。
- 在主题文件夹中，添加 CSS 和 Skin 文件。
- 通过重复上述步骤，您可以为应用程序创建任意数量的主题。
主题设置
要为应用程序应用主题，请在 web.config 中应用以下设置。
<pages theme ="Acqua">
</pages>
页面级别设置
要在页面级别应用主题设置，请在 @ page 目录中的 theme 属性设置为主题名称，如下所示。
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" Theme ="Acqa"
动态主题
在讨论管理动态主题的代码之前，我想您参考 CodeProject 上这篇关于动态主题的出色文章：动态主题。
这里我们将看到一种实现相同目标的替代方法：以下代码向您展示了如何从可用主题中选择动态主题。
< asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:ListItem Value="Select Any Theme">Select Any Theme</asp:ListItem>
<asp:ListItem Value="Acqua">Acqua</asp:ListItem>
<asp:ListItem Value="Marine">Marine</asp:ListItem>
</asp:DropDownList>
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
Configuration config = WebConfigurationManager.OpenWebConfiguration("~/");
//Get the required section of the web.config file by using configuration object.
PagesSection pages = (PagesSection)config.GetSection("system.web/pages");
//Update the new values.
pages.Theme = DropDownList1.SelectedItem.Text.ToString();
//save the changes by using Save() method of configuration object.
if (!pages.SectionInformation.IsLocked)
{
config.Save();
Response.Redirect("Default.aspx");
}
else
{
Response.Write("<script>alert('Could not save configuration')</script>");
}
}
结论
在本文中，我们学习了主页和主题。希望您喜欢阅读本文，并且文章内容对您的作业有所帮助。欢迎提出任何建议或反馈。