Web网站主题与皮肤构建.pdfVIP

维普资讯 … … … … … … … … … … … … … … … … … … … … … … _ 实用第一 智慧密集 l |l| ． |rjl蠢| |I l0。 摘 要 本文结合实例讲述了在ASP．NET页面使用主题和皮肤对Web页面实现页面换肤 的典型应用方式。 关键词 换肤 ，Skin，iFrame，Cookies 一 、 概述 由于网页及页面中的控件都支持 Style对象模型，用于设 置字体 、边框 、背景色、前景色、高度和宽度等样式属性。同 时，控件还完全支持将样式设置与属性分离的层叠样式表 (CSS)。在实现站点过程中，开发人员不得不分别为每个网 页及网页上的控件逐一设置外观样式属性，以达到预定的样式 效果。但这种方法不仅工作量大，而且不容易保持站点外观的 图1 在VS．NET2005中创建一个 一 致性和独立性。理想的方法是：只要为控件设置一次样式属 名为ChangeSkin的网站项 目 性，就能够方便地应用到整个站点的所有页面 中。为此 ， ASP．NET2．0新增了一个技术特性——主题和皮肤。该特性不 仅能够快速高效地实现用户界面的外观设置，而且能够动态实 现不同外观的切换。 图2 提示用户应将主题文件放在AppThemes的文件夹中 本文用实例来介绍如何在 ASP．NET2．0中使用主题和皮 肤为Web页面换肤。整个网站由两个页面组成：一个是首页 对话框提示必须将皮肤文件放在App_Themes文件夹中，如图2 default．aspx，它含有一个 IFRAME(活动框架)，嵌入了另一个 所示。点击按钮 “是”，则会在项 目的根 目录中创建 -·个名为 页面hr．aspx。在 hr．aspx页面中，可以由用户的输入决定页面 App _ Themes的文件夹，皮肤文件 myskin．skin放在 AppThemes 中水平条的长度。只要用户选择不同的背景主题方案，整个网 文件夹下的子文件夹中 “myskin”中。 站就能承现出不同的皮肤，这包括网页的背景图片、按钮的背 4．将整个网站换肤所需的6张背景图片文件准备好，放 景图案，以及文本框的样式。同时，通过Cookie记录下用户选 在App_Themes文件央下的子文件夹 image中。此时整个刚站的 择的背景方案。其中，按钮控件和文本框控件的外观改变是通 文件夹结构如图3所示。 过皮肤文件实现的，而改变网页的背景是通过设置 HtmlGener- icControl控件的Attributes属性集合得以实现的，原因是Html— GenericControl控件不支持皮肤。 二、准备工作 1_在VS．NET2005集成开发环境中，利用 “文件” 一一 “新建”一一 “网站”菜单，创建一个名为 “ChangeSkin”的 ASP．NET网站项 目 (如图 1所示)。 2．在项 目ChangeSkin 中添加 一 个 Web窗体 文 件 “hr．aspx” 。 3．利用 “文件” 一一 “新建”一一 “文件”菜单 ，在 项 目中新建一个名为 “Button．skin”的外观文件，此时会弹