ASP[1]中的样式,主题和母版.ppt

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