《ASP中的样式主题和母版页.ppt》由会员分享，可在线阅读，更多相关《ASP中的样式主题和母版页.ppt（22页珍藏版）》请在金锄头文库上搜索。
1、第第8 8章章 ASP.NETASP.NET中的样式、主题和母版页中的样式、主题和母版页 本章开始讨论本章开始讨论ASP.NET的页面创作技术，现如今的网页网的页面创作技术，现如今的网页网站、站、Web Base应用程序越来越注重页面的外观和可操作性。一应用程序越来越注重页面的外观和可操作性。一致的外观能给用户良好的印象，并能充分展示企业的形象和文致的外观能给用户良好的印象，并能充分展示企业的形象和文化内涵。化内涵。ASP.NET提供了多种用于统一页面外观的方法，主要提供了多种用于统一页面外观的方法，主要有：有： 样式样式 主题主题 母版页母版页 本章内容有：本章内容有：如何在如何在ASP.N
2、ET中应用中应用CSS样式样式如何创建和使用主题如何创建和使用主题如何创建和使用母版页如何创建和使用母版页8.1 8.1 在在ASP.NETASP.NET中应用中应用CSSCSS样式样式 随着随着Web的越来越盛行，的越来越盛行，Web设计也越来越趋向于设计也越来越趋向于整体与结构化。在早期，比如在整体与结构化。在早期，比如在1999年以前，年以前，Web站点站点的设计者们使用的设计者们使用HTML语法来格式化显示样式，这种方式语法来格式化显示样式，这种方式具有多种限制，比如在不同的浏览器中的显示效果不一致、具有多种限制，比如在不同的浏览器中的显示效果不一致、缺乏标准的支持、缺乏标准的支持、H
3、TML代码结构混乱等等。代码结构混乱等等。8.1.1 8.1.1 创建样式创建样式在在ASP.NET中，可以创建三种类型的样式：中，可以创建三种类型的样式：1内联样式内联样式2内部样式表内部样式表3外部样式表外部样式表8.1.2 8.1.2 应用样式应用样式 现在己经创建好了现在己经创建好了CSS样式表文件，并定义了样式表文件，并定义了CSS样式规则。下面来为样式规则。下面来为Web页面应用样式。页面应用样式。VS2010中提供中提供了一些非常实用的工具，用来非常精细的控制和修改了一些非常实用的工具，用来非常精细的控制和修改CSS样式。样式。8.2 8.2 主题主题 读者一定非常了解读者一定非
4、常了解Windows主题，当选择不同的主主题，当选择不同的主题设置时，题设置时，Windows用户界面将会发生很大的变化。用户界面将会发生很大的变化。ASP.NET提供了同样的主题的技术，这让用户可以对提供了同样的主题的技术，这让用户可以对Web站点进行统一的控制，很多站点进行统一的控制，很多Blog站点都提供了主题站点都提供了主题选择功能，当选择不同的主题时会发现页面的很多方面发选择功能，当选择不同的主题时会发现页面的很多方面发生了变化，比如控件的显示，页面的布局等等。很多初学生了变化，比如控件的显示，页面的布局等等。很多初学者容易混淆主题与者容易混淆主题与CSS的区别，的区别，CSS用于控
5、制用于控制HTML格式格式的呈现，而主题则可以控制的呈现，而主题则可以控制ASP.NET服务器控件的很多服务器控件的很多属性，一些属性可能会生产生不一样的属性，一些属性可能会生产生不一样的HTML输出。输出。8.2.1 8.2.1 创建主题创建主题 为了在为了在ASP.NET中创建主题，需要先创建一个名为中创建主题，需要先创建一个名为App_Themes的主题文件夹用来存放主题，该文件夹必的主题文件夹用来存放主题，该文件夹必须位于应用程序的根目录中。在该文件夹中可以存放多个须位于应用程序的根目录中。在该文件夹中可以存放多个主题设置。每个主题必须用一个单独的子文件夹进行存放。主题设置。每个主题必
6、须用一个单独的子文件夹进行存放。8.2.2 8.2.2 创建命名皮肤创建命名皮肤 在上一节中为在上一节中为TextBox控件创建了一个皮肤，当在页控件创建了一个皮肤，当在页面上应用主题后，会发现所有的面上应用主题后，会发现所有的TextBox控件的呈现外观都控件的呈现外观都发生了改变，这种皮肤称为默认皮肤。开发人员可能想为发生了改变，这种皮肤称为默认皮肤。开发人员可能想为某个指定的某个指定的TextBox控件应用一种不同的皮肤，此时可以考控件应用一种不同的皮肤，此时可以考虑使用命名皮肤。虑使用命名皮肤。 8.2.3 8.2.3 处理主题冲突处理主题冲突 当应用一个主题到页面上时，当应用一个主题
7、到页面上时，ASP.NET会检查会检查Web页面上的控件以及定义的皮肤文件以查看是否为控件定义页面上的控件以及定义的皮肤文件以查看是否为控件定义了属性，如果在皮肤文件中存在匹配的皮肤定义，将覆盖了属性，如果在皮肤文件中存在匹配的皮肤定义，将覆盖控件本身的属性定义而使用皮肤定义。也就是说，如果页控件本身的属性定义而使用皮肤定义。也就是说，如果页面上应用了皮肤，那么在皮肤中定义的属性将具有优先权。面上应用了皮肤，那么在皮肤中定义的属性将具有优先权。8.2.4 8.2.4 为整个网站应用主题为整个网站应用主题 除了为单个页面使用除了为单个页面使用Theme或者是或者是StyleSheetTheme属
8、性设置主题之外，还可以为应用程属性设置主题之外，还可以为应用程序中的所有页面同时应用主题。可以在序中的所有页面同时应用主题。可以在web.config配置配置文件中配置文件中配置Web应用程序的所有页面都可用的主题。应用程序的所有页面都可用的主题。8.2.5 8.2.5 添加添加CSSCSS样式样式 也可以在主题中添加样式表文件来控制页面中的也可以在主题中添加样式表文件来控制页面中的HTML元素和元素和ASP.NET控件的外观，如果向主题文件夹控件的外观，如果向主题文件夹中添加一个中添加一个CSS文件，则文件，则CSS样式将被应用到应用了主样式将被应用到应用了主题的任何页面。题的任何页面。8.
9、2.6 8.2.6 动态应用主题动态应用主题 一些网站提供了让用户选择主题的功能，用户根据主一些网站提供了让用户选择主题的功能，用户根据主题外观缩略图选择一个主题，将呈现相应的外观效果。在题外观缩略图选择一个主题，将呈现相应的外观效果。在ASP.NET中可以编程的方式动态的应用主题，只需要在中可以编程的方式动态的应用主题，只需要在PreInit事件中动态的指定事件中动态的指定Theme属性，就可以实现主题的属性，就可以实现主题的动态切换效果。动态切换效果。8.3 8.3 母版页母版页 母版页类似于母版页类似于Word中的模板，允许在多个页面中共中的模板，允许在多个页面中共享相同的内容。比如网站
10、的享相同的内容。比如网站的LOGO，可能需要在多个页面，可能需要在多个页面中重用，则可以将其放在母版页中。在中重用，则可以将其放在母版页中。在Dreamweaver中中可以使用模板页，可以使用模板页，ASP.NET的母版页与此类似。使用母的母版页与此类似。使用母版页可以简化维护、扩展和修改网站的过程。并能提供一版页可以简化维护、扩展和修改网站的过程。并能提供一致、统一的外观。致、统一的外观。8.3.1 8.3.1 创建母版页创建母版页 母版页的使用与普通页面类似，可以在其中放置文母版页的使用与普通页面类似，可以在其中放置文件或者图形，任何的件或者图形，任何的HTML控件和控件和Web控件，后置
11、代码等控件，后置代码等等。母版页的扩展名以等。母版页的扩展名以.master结尾，不能被浏览器直接结尾，不能被浏览器直接查看。母版页必须在被其他页面使用后才能进行显示。查看。母版页必须在被其他页面使用后才能进行显示。8.3.2 8.3.2 默认内容默认内容 当在母版页中定义了当在母版页中定义了ContentPlaceHolder后，也可后，也可以在母版页中包含默认的内容，假如内容页中没有为母版以在母版页中包含默认的内容，假如内容页中没有为母版页中的页中的ContentPlaceHolder控件关联相应的控件关联相应的Content控控件的话，默认内容将进行显示。件的话，默认内容将进行显示。8.
12、3.3 8.3.3 母版页和相对路径母版页和相对路径 笔者将母版页和相对路径划为一小节来进行讨论，是有笔者将母版页和相对路径划为一小节来进行讨论，是有来由的。来由的。ASP.NET中母版页处理相对路径有一些奇怪，不小中母版页处理相对路径有一些奇怪，不小心可就会让开发人员摸不着北。假如在母版页中只添加一些心可就会让开发人员摸不着北。假如在母版页中只添加一些文本信息，这可能并不是任何问题。但是一个真正的网站或文本信息，这可能并不是任何问题。但是一个真正的网站或应用程序，通常都需要在母版页中添加很多图片，或者是其应用程序，通常都需要在母版页中添加很多图片，或者是其他的他的HTML标签来指向其他的资源
13、，那么将会产生问题。标签来指向其他的资源，那么将会产生问题。8.3.4 8.3.4 在在web.configweb.config中配置母版页中配置母版页 可以在可以在web.config配置文件中定义母版页，这样母配置文件中定义母版页，这样母版将被应用到网站中所有的文件或者是某个指定文件夹的版将被应用到网站中所有的文件或者是某个指定文件夹的文件。文件。8.3.5 8.3.5 修改母版页修改母版页 使用母版页将会在多个内容页上显示相同的内容，使用母版页将会在多个内容页上显示相同的内容，一些页面可能想覆盖某些母模页中定义的显示，来提供自一些页面可能想覆盖某些母模页中定义的显示，来提供自定义的显示。
14、比如如果想修改内容页的标题，可以在定义的显示。比如如果想修改内容页的标题，可以在Page区中修改区中修改Title属性。也可以通过编程的方式改变属性。也可以通过编程的方式改变Title属性，除此之外还可以修改属性，除此之外还可以修改CSS中的样式规格，这中的样式规格，这是因为母版页中的是因为母版页中的HTML标签具有标签具有runat=”server”声明，表示己经被设置为服务器端声明，表示己经被设置为服务器端Head标签，因此开发人员可以使用标签，因此开发人员可以使用Page.Header属性来访问属性来访问Header中的属性。中的属性。8.3.6 8.3.6 动态加载母版页动态加载母版页
15、 可以为内容页动态的指定不同的母版页，在一些场可以为内容页动态的指定不同的母版页，在一些场合，这个功能非常实用。比如网站提供了些外观的交互式合，这个功能非常实用。比如网站提供了些外观的交互式选择项，类似于现今比较流行的选择项，类似于现今比较流行的Blog系统，当用户选择系统，当用户选择不同的外观时，动态的切换母版页，给用户不一样的交互不同的外观时，动态的切换母版页，给用户不一样的交互式体验。式体验。8.3.7 8.3.7 母版页的嵌套母版页的嵌套 可以创建一个嵌套在其他母版页中的母版页，比如可以创建一个嵌套在其他母版页中的母版页，比如设计一个上下两栏面局的母版页，顶栏显示网站设计一个上下两栏面
16、局的母版页，顶栏显示网站Logo，而底栏可能根据用户不同的需要呈现不同的页面布局，例而底栏可能根据用户不同的需要呈现不同的页面布局，例如左右式布局或三栏式布局等等。这时可以考虑使用嵌套如左右式布局或三栏式布局等等。这时可以考虑使用嵌套母版页，母版页，VS2010对嵌套母版页还提供了设计时的支持。对嵌套母版页还提供了设计时的支持。8.4 8.4 小结小结 本章介绍了本章介绍了ASP.NET中的外观处理技术，首先讨论了中的外观处理技术，首先讨论了CSS，演示了在，演示了在VS2010中如何创建中如何创建CSS，如何向，如何向ASP.NET页页面应用面应用CSS。接下来讨论了。接下来讨论了ASP.N
17、ET中的主题，主题可以为中的主题，主题可以为ASP.NET中的服务器控件提供一致的外观，并可以方便的切中的服务器控件提供一致的外观，并可以方便的切换主题，本章讨论了创建皮肤文件，使用命名皮肤处理多个皮换主题，本章讨论了创建皮肤文件，使用命名皮肤处理多个皮肤的冲突，在肤的冲突，在web.config配置文件中，为整个网站应用主题配置文件中，为整个网站应用主题以及如何动态的切换主题。以及如何动态的切换主题。 母版页类似于母版页类似于Word中的模板，本章讨论了如何创建母版中的模板，本章讨论了如何创建母版页，定义母版页的默认内容，如何处理母版页的相对路径，动页，定义母版页的默认内容，如何处理母版页的
18、相对路径，动态加载母版页以及母版页的多级嵌套技术。态加载母版页以及母版页的多级嵌套技术。 8.5 8.5 常见面试题分析常见面试题分析8.5.1 8.5.1 如何让一个网站默认一个母版页？如何让一个网站默认一个母版页？凡是全局的配置，必须得使用凡是全局的配置，必须得使用web.config来完成，本题可以来完成，本题可以在其中如下设置：在其中如下设置： 8.5.2 8.5.2 母版页是否可以嵌套，如何嵌套？母版页是否可以嵌套，如何嵌套？ 母版页可以嵌套，可通过本章母版页可以嵌套，可通过本章8.3.7节的介绍，做一节的介绍，做一个实例，然后简单描述下完成这个实例的过程，此题看似个实例，然后简单描述下完成这个实例的过程，此题看似操作题，但一般都不会上机面试，通常只简单描述下流程操作题，但一般都不会上机面试，通常只简单描述下流程即可。即可。
