aspnet20入门经典5(编辑修改稿)

aspnet20入门经典5(编辑修改稿)内容摘要：

个文件夹的名称就是所创建的主题的名称。 所有的主题都保存在一个名为 App_Themes 的应用程序文件夹中。 下面是一个皮肤文件示 例： asp:Calendar runat=server FontNames=Century Gothic FontSize= Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar asp:TreeView runat=server ExpandDepth=1 FontNames=Century Gothic BorderColor=LightSteelBlue BorderStyle=Solid SelectedNodeStyle FontBold=True ForeColor=SteelBlue / RootNodeStyle FontBold=True / NodeStyle ForeColor=MidnightBlue / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=SteelBlue / /asp:TreeView asp:Label SkinId= textLabel runat=server FontNames=Century Gothic Font Size=10pt ForeColor=MidnightBlue/asp:Label asp:ImageButton SkinId=homeImage runat=server ImageUrl= ~/ / 这个文件包含了为 4 种类型的元素所作的定义。 这个文件中的 TreeView 控件和 Calendar 控件定义了站点上的每个日历控件和树型视图控件的外观。 注意这些控件没有ID 属性 —— 这是所有皮肤文件的一个特点。 每个带有皮肤文件的元素 都没有 ID。 在运行的时候，如果将这个主题指定为页面的默认主题，而该页面上包含一个 Calendar 控件，那么这个控件将自动继承在这个文件中定义的样式。 在这个皮肤文件中的另外两个控件 Label和 Image Button都有相关的 SkinId 属性。 这些属性使得开发人员可以创建带有多种类型的 Label控件或 Image Button控件的站点，并使用皮肤数据提供的信息为选中的控件设置样式 —— 对皮肤文件的链接由 SkinId 属性控制。 因此，如果希望在 Web 页面上包含两个 Label 控件并使用一个主题为其中一个设置样式， 那么可以使用如下语法： asp:Label ID=Label1 SkinID=textLabel runat=server Text=Label Styled label/asp:Label asp:Label ID=Label2 runat=server Text=LabelUnstyled label/asp:Label 这个示例中的 SkinId 属性指定了用于控件的样式，只要它是定义在页面所使用的主题中。 在下面的“试一试”练习中，将在 VWD中创建一个简单的主 题并查看怎样定义样式格式。 将在本章后面的示例中使用这个主题和另一个主题。 (1) 在 VWD中，打开 Chapter05 Web站点。 右击 Solution Explorer顶部的 C:\… \Chapter05文件夹并选择 Add Folder→ Theme。 将看到如图 512 所示的画面。 图 512 (2) 将在应用程序内创建一个名为 App_Themes 的文件夹，以及一个在 App_Themes 内的新的空文件夹，必须为这个文件夹命名。 现在将其命名为 Blue。 (3) 右击 App_Themes 文件夹并添加一个新的 Theme 文件夹 Red。 现在已经为站点创建了两个主题，虽然到目前为止还没有任何包含样式定义的皮肤文件。 (4) 右击 Blue 文 件夹并选择 Add New Item。 选择 Skin File 并将其命名为 ，如图 513 所示。 图 513 单击 Add。 查看生成的结果文件 (如图 514 所示 )将看到一些默认的注释，这些注释介绍了皮肤文件的基本知识。 图 514 (5) 重复这个步骤为 Red 主题添加一个皮肤文件，并将其命名为。 (6) 在这个示例中，您将发现在向皮肤文件添加控件之前，创建一个简单的 页面来试验新的样式是非常方便的。 在 Solution Explorer 中右击 C:\… \Chapter05 文件夹并选择 Add New Item，选择 Web Form并将该文件命名为 ，单击 OK 从 而添加一个新页面。 (7) 将两个 Calendar 控件拖放到该页面上。 接下来为这两个控件设置样式，第一步是手动为每个控件添加一些样式，使其中一个用于蓝色主题，而另一个用于红色主题。 稍后，您将看到这些控件所使用的样式 —— 首先，图 515 显示了在样式化之后它们看起来是什么样子。 图 515 注意 Properties 窗格中为 Calendar 控件包含了很多不同的样式选项。 按表 51 和表 52所示设置属性。 表 51 Blue Skin 属 性 样 式 代 码 FontNames Century Gothic asp:Calendar ID=Calendar1 runat=server FontSize Small OtherMonthDayStyle BackColor Lavender DayStyleForeColor MidnightBlue TitleStyleBackColor LightSteelBlue FontNames=Century Gothic FontSize=Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar 表 52 Red Skin 属 性 样 式 代 码 FontNames Garamond asp:Calendar ID=Calendar2 runat=server FontNames=Garamond FontSize=Medium BorderColor=Chocolate BorderStyle=Ridge FontSize Medium BorderColor Chocolate BorderStyle Ridge BorderWidth 8px DayNameFormat FirstLetter OtherMonthDayStyle BackColor BlanchedAlmond DayStyleForeColor Maroon TitleStyleBackColor Maroon TitleStyleFontBold True TitleStyleForeColor FFFFC0 BorderWidth=8px DayNameFormat=FirstLetter OtherMonthDayStyle BackColor=BlanchedAlmond / DayStyle ForeColor=Maroon / TitleStyle BackColor=Maroon FontBold=True ForeColor=FFFFC0 / /asp:Calendar (8) 现在将一个 Label 控件拖放到页面上并为其指定一些颜色和字体样式。 下面的代码创建两个标签并定义了两个应该和蓝色以及红色主题匹配的样式： asp:Label ID=Label1 runat=server Text=Label FontNames=century gothic FontSize=10pt ForeColor=MidnightBlue/asp:Label asp:Label ID=Label2 runat=server FontNames=garamond FontSize=11pt ForeColor=DarkRed Text=Label/asp:Label 在定义好样式之后，就为接下来的步骤做好了准备。 (9) 在 VWD 中打开 文件并将 Calendar控件和 Label控件的 HTML 代码复制粘贴到这个皮肤文件中，然后删除这些控件的 ID 标记。 (10) 最后，为 Label 控件添加 SkinID 属性，以便为其指定一个在后面可以使用的惟一样式引用 (注意下面代码中的粗体部分 )： asp:Calendar runat=server FontNames=Century Gothic FontSize=Small OtherMonthDayStyle BackColor=Lavender / DayStyle ForeColor=MidnightBlue / TitleStyle BackColor=LightSteelBlue / /asp:Calendar asp:Label SkinId=textLabel runat=server FontNames=Century Gothic FontSize=10pt ForeColor=MidnightBlue/asp:Label (11) 针对红色的控件重复步骤 8，将它们放置在 定义文件中： asp:Calendar runat=server FontNames=Garamond FontSize=Medium BorderColor=Chocolate BorderStyle=Ridge BorderWidth=8px DayNameFormat=FirstLetter OtherMonthDayStyle BackColor=BlanchedAlmond / DayStyle ForeColor=Maroon / TitleStyle BackColor=Maroon FontBold=True ForeColor=FFFFC0 / /asp:Calendar asp:Label SkinId=textLabel runat=server FontNames=Garamond FontSize=11pt ForeColor=DarkRed / 对其他希望添加到皮肤文件中的任何控件只需要重复以上步骤即可。 在下一个“试一试”练习中，将在页面上添加一个 Calendar 控件和一个 Label控件以显示这些主题怎样改变它们的外观。 另外，还将添加一个 TreeView 控件和一个 ImageButton 控件，因此在皮肤文件中需要再添加一些样式信息。 (12) 将下面的代码添加到蓝色皮肤文件 ()中从而为 TreeView 和ImageButton 控件指定样式： asp:TreeView runat=server ExpandDepth=1 FontNames=Century Gothic BorderColor=LightSteelBlue BorderStyle=Solid SelectedNodeStyle FontBold=True ForeColor=SteelBlue / RootNodeStyle FontBold=” True / NodeStyle ForeColor=MidnightBlue / LeafNodeStyle FontSize=Smaller / HoverNodeStyle ForeColor=SteelBlue / /asp:TreeView asp:ImageButton SkinId=homeImage runat=server ImageUrl=~/ / (13) 现在需要添加一些代码，这些代码类似于红色皮肤文件 ()中的代码，从而指定怎样为一个 TreeView 控件设置样式： asp:TreeView runat=server ExpandDepth=1 FontNames=Garamond BorderColor=Chocolate BorderStyle=Ridge SelectedNodeStyle FontBold=True ForeColor=Chocolate / RootNodeStyle FontBold=True / NodeStyle ForeColor=DarkRed / Le。