《中的样式主题和母版页.ppt》由会员分享，可在线阅读，更多相关《中的样式主题和母版页.ppt（20页珍藏版）》请在三一办公上搜索。
1、第8章 ASP.NET中的样式，主题和母版页,本章开始讨论ASP.NET的页面创作技术，现如今的网页网站、Web Base应用程序越来越注重页面的外观和可操作性。一致的外观能给用户良好的印象，并能充份展示企业的形象和文化内涵。ASP.NET提供了多种用于统一页面外观的方法，主要有：样式：CSS标准的一部分，样式并不是ASP.NET中才有的技术，但是使用这个技术能够为ASP.NET Web项目提供一致的格式外观。主题：主题可以为Web服务器控件提供一致的外观设置，与样式属于相同的技术，但主题只针对服务器控件。母版页：母版页用于定义网站的一致性布局。下面将从样式开始，依次详细讨论ASP.NET中用
2、于统一风格的几个技术。,8.1 在ASP.NET中应用CSS样式,随着Web的越来越盛行，Web设计也越来越趋向于整体与结构化。在早期，比如在1999年以前，Web站点的设计者们使用HTML语法来格式化显示样式，这种方式具有多种限制，比如在不同的浏览器中的显示效果不一致、缺乏标准的支持、HTML代码结构混乱等等。解决这些问题的方案是使用CSS标准，CSS支持所有现代的浏览器，并且提供了一整套统一的格式化属性，可以应用这些属性到任何的HTML元素上，比如添加边框、设置字体等等。CSS技术是Web标准的主要表现层技术，除了设置一些外观之外，现如今很多符合Web标准的站点都使用CSS来进行页面的布局
3、。要设计一个标准的Web站点，应该多考虑使用CSS而较少的利用HTML的标签格式化语法。,8.1.1 创建样式,在ASP.NET中，可以创建三种类型的样式：1内联样式内联样式直接放到HTML标签的内部，这种形式的样式会导致HTML代码的混乱。内联样式示例代码如下所示。这行文本显示为蓝色的背景.2内部样式表放置在Web标签页的区中的样式的集合。可以使用来自样式表的样式来格式化Web控件。使用内联样式，让格式与内容清楚的分离，并且可以对同一页面的格式进行多次重用。3外部样式表与内部样式相似，但是样式放在一个单独的文件中，这样开发人员可以在应用程序的多个页面上应用相同的样式。,8.1.2 应用样式,
4、现在己经创建好了CSS样式表文件，并定义了CSS样式规则。下面来为Web页面应用样式。VS2008中提供了一些非常实用的工具，用来非常精细的控制和修改CSS样式。为了让CssDemo.aspx应用刚刚创建的样式表文件，可以直接将样式表文件拖动到设计视图即可，VS2008将生成如下所示的代码：现在两个div将自应用样式效果，运行效果如图8.4所示。也可以打开VS2008中新增的样式管理窗口来附加一个样式表文件，选择VS2008主菜单中的“视图|管理样式”菜单项，将弹出管理样式窗口，在该窗口中即可以新建样式也可以附加一个外部样式表文件，如图8.5所示。,8.2 主题,读者一定非常了解Windows
5、主题，当选择不同的主题设置时，Windows用户界面将会发生很大的变化。ASP.NET提供了同样的主题的技术，这让用户可以对Web站点进行统一的控制，很多Blog站点都提供了主题选择功能，当选择不同的主题时会发现页面的很多方面发生了变化，比如控件的显示，页面的布局等等。很多初学者容易混淆主题与CSS的区别，CSS用于控制HTML格式的呈现，而主题则可以控制ASP.NET服务器控件的很多属性，一些属性可能会生产生不一样的HTML输出。,8.2.1 创建主题,为了在ASP.NET中创建主题，需要先创建一个名为App_Themes的主题文件夹用来存放主题，该文件夹必须位于应用程序的根目录中。在该文件
6、夹中可以存放多个主题设置。每个主题必须用一个单独的子文件夹进行存放。下面新建一个名为CreateThemeDemo的ASP.NET网站，来演示如何为ASP.NET应用程序创建主题，步骤如下所示。,8.2.2 创建命名皮肤,在上一节中为TextBox控件创建了一个皮肤，当在页面上应用主题后，会发现所有的TextBox控件的呈现外观都发生了改变，这种皮肤称为默认皮肤。开发人员可能想为某个指定的TextBox控件应用一种不同的皮肤，此时可以考虑使用命名皮肤。创建命名皮肤与创建默认皮肤类似，唯一不同点是需要为命名皮肤指定一个SkinID属性，用于命名一个皮肤。注意：在一个皮肤文件中，可以有多个命名的皮
7、肤文件，但是只能具有一个默认的皮肤文件。下面在TextBox.skin文件中添加一个命名皮肤文件，代码如下所示。,8.2.3 处理主题冲突,当应用一个主题到页面上时，ASP.NET会检查Web页面上的控件以及定义的皮肤文件以查看是否为控件定义了属性，如果在皮肤文件中存在匹配的皮肤定义，将覆盖控件本身的属性定义而使用皮肤定义。也就是说，如果页面上应用了皮肤，那么在皮肤中定义的属性将具有优先权一些情况下可能需要改变这个行为，比如可能让某个TextBox控件的属性设置能够覆盖皮肤文件中的设置，此时可以使用StyleSheetTheme属性来代替Theme属性，可以在VS2008的属性窗口中为Styl
8、eSheetTheme属性指定一个皮肤，声明代码如下所示。,8.2.4 为整个网站应用主题,除了为单个页面使用Theme或者是StyleSheetTheme属性设置主题之外，还可以为应用程序中的所有页面同时应用主题。可以在web.config配置文件中配置Web应用程序的所有页面都可用的主题，代码如下所示。,8.2.5 添加CSS样式,也可以在主题中添加样式表文件来控制页面中的HTML元素和ASP.NET控件的外观，如果向主题文件夹中添加一个CSS文件，则CSS样式将被应用到应用了主题的任何页面。下面在ThemeDemo主题新建一个CSS样式表文件，命名为textbox.css，添加如下的样式
9、代码：inputfont-family:verdana;font-size:9pt;color:#FF6699;background-color:#CCCCFF;,8.2.6 动态应用主题,一些网站提供了让用户选择主题的功能，用户根据主题外观缩略图选择一个主题，将呈现相应的外观效果。在ASP.NET中可以编程的方式动态的应用主题，只需要在PreInit事件中动态的指定Theme属性，就可以实现主题的动态切换效果。下面在CreateThemeDemo网站中新建一个新的主题文件夹，命名为OtherTheme，在该文件夹同样添加一个名为TextBox.skin的皮肤文件，代码如下所示。,8.3 母版
10、页,母版页类似于Word中的模板，允许在多个页面中共享相同的内容。比如网站的LOGO，可能需要在多个页面中重用，则可以将其放在母版页中。在Dreamweaver中可以使用模板页，ASP.NET的母版页与此类似。使用母版页可以简化维护、扩展和修改网站的过程。并能提供一致、统一的外观。,8.3.1 创建母版页,母版页的使用与普通页面类似，可以在其中放置文件或者图形，任何的HTML控件和Web控件，后置代码等等。母版页的扩展名以.master结尾，不能被浏览器直接查看。母版页必须在被其他页面使用后才能进行显示，下面新建一个ASP.NET Web应用程序来演示如何创建和使用母版页，步骤如下：（1）新建
11、一个ASP.NET Web网站，命名为MasterPageDemo，删除Default.aspx文件。（2）本示例将在母版页中进行网页的布局，打算实现一个带Logo栏的两列自适应高度的网站整体布局，声明代码中添加了三个div标签，分别表示顶部栏、左边栏和右边栏。（3）为了在CSS进行布局，创建了一个名为StyleSheet.css的样式表文件，并在样式表中添加如下的CSS布局代码。（4）母版页大致设置好，读者可以根据需要在母版页中添加内容。,8.3.2 默认内容,当在母版页中定义了ContentPlaceHolder后，也可以在母版页中包含默认的内容，假如内容页中没有为母版页中的Content
12、PlaceHolder控件关联相应的Content控件的话，默认内容将进行显示。下面将MasterPageDemo稍加更改，将内容页中与TopContent这个ContentPlaceHolder相关联的Content2控件去掉。并在母版页中为TopContent添加一些默认的内容，代码如下所示。这里放置的是母版页的默认内容,8.3.3 母版页和相对路径,笔者将母版页和相对路径划为一小节来进行讨论，是有来由的。ASP.NET中母版页处理相对路径有一些奇怪，不小心可就会让开发人员摸不着北。假如在母版页中只添加一些文本信息，这可能并不是任何问题。但是一个真正的网站或应用程序，通常都需要在母版页中添
13、加很多图片，或者是其他的HTML标签来指向其他的资源，那么将会产生问题。,8.3.4 在web.config中配置母版页,可以在web.config配置文件中定义母版页，这样母版将被应用到网站中所有的文件或者是某个指定文件夹的文件。假如内容页中没有包含任何Content控件，则母片页将自动被忽略，配置代码如下所示。,8.3.5 修改母版页,使用母版页将会在多个内容页上显示相同的内容，一些页面可能想覆盖某些母模页中定义的显示，来提供自定义的显示。比如如果想修改内容页的标题，可以在Page区中修改Title属性。也可以通过编程的方式改变Title属性，除此之外还可以修改CSS中的样式规格，这是因为
14、母版页中的HTML标签具有runat=”server”声明，表示己经被设置为服务器端Head标签，因此开发人员可以使用Page.Header属性来访问Header中的属性。,8.3.6 动态加载母版页,可以为内容页动态的指定不同的母版页，在一些场合，这个功能非常实用。比如网站提供了些外观的交互式选择项，类似于现今比较流行的Blog系统，当用户选择不同的外观时，动态的切换母版页，给用户不一样的交互式体验。注意：与内容页联接的母版页在页面执行周期中产生的比较早，因此不能直接在Page_Load事件中动态加载母版页，而需要在Page.PreInit事件中动态加载母片页。这是页执行周期中的第一个事件。
15、,8.3.7 母版页的嵌套,可以创建一个嵌套在其他母版页中的母版页，比如设计一个上下两栏面局的母版页，顶栏显示网站Logo，而底栏可能根据用户不同的需要呈现不同的页面布局，例如左右式布局或三栏式布局等等。这时可以考虑使用嵌套母版页，VS2008对嵌套母版页还提供了设计时的支持。下面将分步骤演示如何创建嵌套的母版页，步骤如下：,8.4 小结,本章介绍了ASP.NET中的外观处理技术，首先讨论了CSS，演示了在VS2008中如何创建CSS，如何向ASP.NET页面应用CSS。接下来讨论了ASP.NET中的主题，主题可以为ASP.NET中的服务器控件提供一致的外观，并可以方便的切换主题，本章讨论了创建皮肤文件，使用命名皮肤处理多个皮肤的冲突，在web.config配置文件中，为整个网站应用主题以及如何动态的切换主题。母版页类似于Word中的模板，本章讨论了如何创建母版页，定义母版页的默认内容，如何处理母版页的相对路径，动态加载母版页以及母版页的多级嵌套技术。,
