《主题与母版页》PPT课件.ppt

第7章主题与母版页 第7章主题与母版页 7 1主题7 2母版页和内容页 7 1主题 使用主题可以使页面的样式控制更加灵活全面 它将CSS 服务器控件的外观以及各种网站资源的管理有机地组织在一起 为开发者控制统一的页面样式提供了更方便的手段 7 1 1主题与外观的基本概念 主题指ASP NET支持的具有特殊含义的文件夹 在主题中 可以包含各种页面控制文件和资源文件 例如外观文件 级联样式表文件等 主题的分类分为应用程序主题和全局主题 应用程序主题指保存在Web应用程序的App Themes文件夹下的一个或多个特殊文件夹 主题的名称就是文件夹的名称 全局主题指保存在服务器特定文件夹下的一个或多个特殊文件夹 具体保存到哪个特定文件夹下 则由不同的服务器配置情况决定 全局主题会对该服务器上所有的Web应用程序都起作用 外观的概念指Web服务器控件的属性设置集合 它保存在扩展名为 skin的文件中 例如Button控件的外观如下注意主题下必须至少包含一个外观文件 skin文件 也可以有多个外观文件 其他类型的文件可以放在该文件夹下 也可以不放在该文件夹下 但是一旦将样式表文件 css文件 保存在主题下 样式表将自动作为主题的一部分 在网页中只引用主题即可 不必再单独引用 css文件 7 1 1主题与外观的基本概念 7 1 1主题与外观的基本概念 使用主题的一般步骤 1 定义一个或多个主题 在App Themes文件夹下创建一个或多个主题 然后将主题包含的文件 包括 css文件 skin文件 图片文件 Flash动画文件以及其他资源文件等 保存到相应主题文件夹下 2 应用主题 设置网页的 StyleSheetTheme 属性为定义的主题 7 1 2在主题中定义外观 定义外观的方法先在页面中设置控件的属性 然后将自动生成的代码复制到外观文件中 再进行修改 定义外观的步骤1 向Web应用程序中添加一个网页 在 设计 视图下 将需要设置外观的控件拖放到页面中 例如Button控件 Panel控件等 2 将相应控件的源代码复制到外观文件中 并去掉控件的ID属性 3 如果希望某些控件的外观和页面中具有相同类型的其他控件的外观不一样 在 skin文件中 给控件添加一个SkinID属性 具体方法参看例7 1 7 1 3在主题中同时包含外观和样式表 在主题下 除了可以包含 skin文件外 还可以包含 css文件 可以通过在页面中设置 StyleSheetTheme 属性为定义的主题 这样该主题下的CSS样式就会自动起作用 具体方法参看例7 2 7 1 4 skin文件和 css文件的区别与联系 外观文件 skin文件 和样式表文件 css文件 的主要区别和联系有 1 可以通过外观文件使页面中的多个服务器控件具有相同的外观 而如果用样式表来实现 则必须设置每个控件的 CssClass 属性 才能将样式表中定义的CSS类应用于这些控件 非常烦琐 2 使用样式表文件虽然能够控制页面中各种元素的样式 但是有些服务器控件的属性却无法用样式表控制 而外观文件则可以轻松完成这些功能 3 当控制属性比较多的服务器控件外观时 可能需要在 css文件中定义很多CSS类 如果这些CSS类之间定义不好就有可能产生不希望的效果 而用外观文件则不会出现这些问题 7 1 5主题分类 按照主题应用于页面的方式 可将其分为3类 1 样式表主题 指将主题按照与CSS相同的优先级方式控制网页的外观和样式 此时主题的应用方式和样式表的应用方式相同 页面中的属性和样式设置会覆盖在主题中定义的具有相同设置的外观和样式 而不同的设置则会直接合并 若所有网页都采用同一个主题 也可以在Web config的中添加来设置样式表主题 这种方法的缺点是在 设计 视图下从 工具箱 中向页面拖放一个服务器控件时 无法直观地看到样式表主题定义的外观效果 只有运行时才能看到应用的效果 7 1 5主题分类 2 页面主题 指按照与CSS优先级控制方式相反的方式控制网页的外观和样式 即页面主题中主题对控件属性和样式设置的优先级高于页面中相应的设置 此时 如果同时在控件和主题中对相同的属性进行了设置 则在主题中对控件的设置将重写在页面中对控件的相同设置 而不是页面中的设置覆盖主题中的相同设置 页面主题的用途是可以简单地将早期设计的网页统一改为希望的新外观 一般在升级早期设计的网页外观时才会采用这种办法 3 全局主题 使用全局主题可以控制所有网站中网页的样式和外观 以便实现在一个Web服务器中提供多个网站 7 1 6利用主题实现页面换肤 实现页面换肤功能的方法有2种 1 修改页面的 Theme 属性 将主题作为页面主题 2 修改页面的 StyleSheetTheme 属性 将主题作为样式表主题 由于页面主题会覆盖内联式样式中的相同设置 即当内联式样式和 css文件中样式的设置相同时 内联式样式控制会失效 而且 skin文件中的设置也会使页面中对控件直接设置的相同属性失效 所以一般不使用页面主题实现换肤功能 而是采用样式表主题来实现 这样做的好处是 既不会影响内联式控制 又可以根据用户需要更换页面皮肤 7 1 6利用主题实现页面换肤 实现换肤功能的思路 1 定义多个主题 在不同的主题下分别定义页面外观和样式 2 在后台代码中 重写页面的 StyleSheetTheme 属性 3 在主页中添加一个下拉列表 让用户选择使用哪种皮肤 具体实现方法参看例7 3 7 2母版页和内容页 在设计网页时经常会遇到多个网页部分内容相同的情况 如果每个网页都设计一次显然是重复劳动且非常繁琐 而使用母版页可以很好的解决这个问题 除此之外 母版页还可以统一管理和定义页面 使多个页面具有相同的布局风格 给网页设计和修改带来很大方便 7 2 1母版页和内容页的基本概念 母版页的概念指其他网页可以将其作为模板来引用的特殊网页 母版页的扩展名为 master 在母版页中 界面被分为公用区和可编辑区 公用区的设计方法与一般页面的设计方式相同 可编辑区用ContentPlaceHolder控件预留出来 一个母版页中可以有一个可编辑区 也可以有多个可编辑区 内容页的概念引用母版页的 aspx页面即为内容页 在内容页中 母版页的ContentPlaceHolder控件预留的可编辑区会被自动替换为Content控件 开发人员只需在Content控件区域中填充内容即可 在母版页中定义的其他标记将自动出现在使用了该母版页的 aspx页面中 7 2 1母版页和内容页的基本概念 使用内容页的步骤 1 用户键入内容页的URL请求某网页 2 服务器获取该页后 读取页中的 Page指令 如果该指令引用一个母版页 则也读取该母版页 如果用户第一次请求这两个页 则两个页都进行编译 3 服务器将包含的母版页合并到内容页的控件树中 7 2 1母版页和内容页的基本概念 4 服务器将页面中各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中 5 服务器将合并后的内容发送给客户端 客户端在浏览器中呈现合并后的网页 注意 在母版页中使用图片和超链接时 尽量使用服务器的Image控件和HyperLink控件 不要使用客户端的元素和超链接元素 7 2 2母版页和内容页的创建方法 母版页的设计方法与一般网页的设计方法相似 区别仅仅是不能单独在浏览器中查看母版页 而必须通过内容页在浏览器中查看 具体方法参看例7 4 7 3从内容页中访问母版页中的内容 在实际应用中 有时需要通过后台代码从内容页中访问母版页中的属性 方法 因此 必须在母版页中将被访问的属性或方法声明为公共成员 但从内容页中访问母版页中的控件时 则没有这种限制 访问母版页中的公共成员的方法 从内容页中访问指定的母版页的成员 可通过创建 MasterType指令创建对此母版页的强类型引用 该指令的常用形式是 7 3从内容页中访问母版页中的内容 从内容页中访问母版页中的属性的例子 有一个名为MasterPage1 master的母版页 其对应的类名是MasterPage1 在该类中声明一个TrueName属性 则可在内容页中添加代码 然后就可以通过Master TrueName读取或设置母版页中TrueName属性的