使用主题(Themes)

《使用主题(Themes)》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第10章使用主题（Themes）主题和外观是ASP.NET时代的主要界面设计方法，本章介绍如何为Web应用程序创建统一的主题和外观。主题包括网页的CSS布局、按钮的外观，以及一些图片、资源。为了保持整个网站的美观，我们一般会定义很多的CSS，现在通过ASP.NET的主题，程序员可以更简单地布局网站，而且能做到统一和更改方便。10.1创建主题主题就是一个页面中的布局，它包括很多类布局，如控件外观的布局、页面的布局等。本节就通过案例介绍主题的组成和设计。10.1.1建立一个简单的主题主题分为页面主题和全局主题两种应用。页面主题是一个

2、主题文件夹，其中包含控件外观、样式表、图片和其他资源，该文件夹是作为网站中的App_Themes文件夹的子文件夹创建的，下面就给出了一个网站的页面主题文件夹结构。全局主题是可以应用于服务器上的所有网站的主题。其存储在Web服务器的名为Themes的文件夹中。WebSite1App_ThemesTheme1Controls.skinTheme1.cssTheme2Controls.skinTheme2.css10.1.2外观（Skins）外观文件的扩展名是.skin，也被称为皮肤，其包含各个服务器控件（如Button、Labe

3、l、TextBox或Calendar控件）的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如下面是Button控件的外观。如果页面中的控件并不都使用这一外观，则需要指定外观的“skinid”属性，如下所示。

4、abel"/>这样带skinid的外观在页面中引用时，使用如下代码。10.1.3建立级联样式表单（CSS）前面两节创建了一个主题和一个外观文件，这些都是针对页面中的控件进行设置。现在再来对页面的整体布局进行控制

5、，如设置页面的背景色、表格的边框等，这些就需要用到级联样式表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

6、:200;width:300;}10.1.3建立级联样式表单（CSS）Padding:内边距就是内容与边框的空隙.而margin:外边距则是模块与模块的空隙.下面图解:10.2运行时更改主题和外观现在的用户越来越喜欢用Blog来记录或分享自己的心情，在使用Blog时，可以看到网站提供很多风格供用户选择。这些不同的风格就是网站提供的主题，不同的主题，外观将不同。用户会在选择主题后，自动变化Blog的外观，本节就介绍如何在ASP.NET中实现在何种主题的动态切换。还是接前面的实例，打开Default.aspx页面的源代码，在div层

7、中添加两个链接，用于切换主题，代码如下所示。选择页面主题：
第一个主题
第二个主题
注意，每个链接传递一个参数page_theme，这个参数的值就是要切换的主题的名称。要实现主题的切换，必须在页面初始化的时候，就设置好主题，所以本例还需要在Page_PreInit事件中书写调整主题的代码，如下所示。10.3通过配置

8、文件应用主题前面介绍过，主题分为页面主题和全局主题。要将一个主题设置为页面主题，只需要在当前页的“@Page”中，设置“Theme”属性即可，如果要将一个主题设置为全局主题，就需要修改网站的配置文件web.config。添加的配置内容如下所示。