第10章 使用主题(Themes).pptVIP

第10章 使用主题（Themes） 主题和外观是ASP.NET时代的主要界面设计方法，本章介绍如何为Web应用程序创建统一的主题和外观。 主题包括网页的CSS布局、按钮的外观，以及一些图片、资源。为了保持整个网站的美观，我们一般会定义很多的CSS，现在通过ASP.NET的主题，程序员可以更简单地布局网站，而且能做到统一和更改方便。 10.1 创建主题 主题就是一个页面中的布局，它包括很多类布局，如控件外观的布局、页面的布局等。本节就通过案例介绍主题的组成和设计。 10.1.1 建立一个简单的主题 主题分为页面主题和全局主题两种应用。 页面主题是一个主题文件夹，其中包含控件外观、样式表、图片和其他资源，该文件夹是作为网站中的\App_Themes文件夹的子文件夹创建的，下面就给出了一个网站的页面主题文件夹结构。 全局主题是可以应用于服务器上的所有网站的主题。其存储在Web服务器的名为\Themes的文件夹中。 WebSite1 App_Themes Theme1 Controls.skin Theme1.css Theme2 Controls.skin Theme2.css 10.1.2 外观（Skins） 外观文件的扩展名是.skin，也被称为皮肤，其包含各个服务器控件（如Button、Label、TextBox或Calendar控件）的属性设置。 控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如下面是Button控件的外观。 asp:button runat=server skinid=”btn” BackColor=lightblue ForeColor=black / 如果页面中的控件并不都使用这一外观，则需要指定外观的“skinid”属性，如下所示。 asp:Label runat=server BackColor=Red ForeColor=White skinid=redlabel / asp:Label runat=server BackColor=Blue ForeColor=White skinid=bluelabel / 这样带skinid的外观在页面中引用时，使用如下代码。 asp:Label ID=Label1 runat=server Text=bluelabel应用蓝皮肤 SkinID=bluelabel/asp:Label 10.1.3 建立级联样式表单（CSS） 前面两节创建了一个主题和一个外观文件，这些都是针对页面中的控件进行设置。 现在再来对页面的整体布局进行控制，如设置页面的背景色、表格的边框等，这些就需要用到级联样式表CSS。本节简单介绍下CSS在主题中的应用 在“FirstTheme”下添加一个样式表，命名为“pagecss.css”， body { margin:10; padding:10; overflow:auto; 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。 background:yellow; } div { font-family:隶书; font-size:19pt; border-color:#6EDD6E; height:200; width:300; } 10.1.3 建立级联样式表单（CSS） Padding:内边距就是内容与边框的空隙.而margin:外边距 则是模块与模块的空隙.下面图解: 10.2 运行时更改主题和外观 现在的用户越来越喜欢用Blog来记录或分享自己的心情，在使用Blog时，可以看到网站提供很多风格供用户选择。 这些不同的风格就是网站提供的主题，不同的主题，外观将不同。用户会在选择主题后，自动变化Blog的外观，本节就介绍如何在ASP.NET中实现在何种主题的动态切换。 还是接前面的实例，打开Default.aspx页面的源代码，在div层中添加两个链接，用于切换主题，代码如下所示。 选择页面主题：br / a href=Default.aspx?page_theme=FirstTheme第一个主题/a br / a href=Default.aspx?page_theme=SecondTheme第二个主题/abr / 注意，每个链接传递一个参数page_theme，这个参数的值就是要切换的主题的名称。 要实现主题的切换，必须在页面初始化的时候，就设置好主题，所以本例还需要在Page_ PreInit事件中书