【asp源码栏目提醒】:网学会员--在 asp源码编辑为广大网友搜集整理了:《ASP.NET WEB应用程序设计教程》作者单维锋 ch11 母版页、主题与皮肤 教材配套课件 北京交通大学出版社 - 大学课件绩等信息,祝愿广大网友取得需要的信息,参考学习。
第11章 母版页、主题与皮肤本章要点◆母版页的概念◆母版页的创建与应用◆主题与皮肤的概念◆主题与皮肤创建与应用11.1概述 在浏览网页时,注意到多数网站的网页设计风格都很 相似,每个页面仿佛是由一个模板克隆而来的。
统一 的页面风格主要体现在以下几个方面。
具有相同的网站LOGO和页眉部分 相同的包含版权信息的页脚部分 相同的菜单、导航或搜索框 相似的色彩和字体
ASP.NET2.0及以后版本提供了母版页、用户控件和主 题技术,从网站全局、网页局部到某类控件,为创建 一致风格的网站,提供了最佳解决方案。
母版页 母版页(MasterPage)的作用类似Dreamweaver中 “模板”的概念,可以为应用程序中的网页创建一致的 布局。
母版页可以为应用程序中的所有页(或一组 页)定义所需的外观和行为。
然后可以在此基础上创 建包含显示内容的各个内容页。
当用户请求内容页 时,这些内容页与母版页合并以将母版页的布局与内 容页的内容组合在一起输出。
母版页技术适合在整个网站范围内为所有页面(或多 个页面)创建一致的页面风格。
用户控件 用户控件(UserControl)技术是另外一种技术,在 本书第8章中,我们已经学习了如何创建和使用用户控 件的相关知识。
使用用户控件技术不仅可以减小程序 人员工作量,降低出错的几率,而且可以创建一致的 页面局部风格。
只需要修改用户控件内容,经过编译 后,所有网页中的用户控件都会自动跟着变化。
用户控件技术适合于创建风格一致的页面局部内容。
通过在多个页面内引用该控件,达到一致的风格。
主题 主题(Theme)是定义网站中页和控件的外观的属性 集合。
主题可以包括外观文件(定义
ASP.NETWeb服 务器控件的属性,也成为皮肤文件,必须以.SKIN为扩 展名,且必须放置在系统的App_Themes目录下), 还可以包括级联样式表文件(.css文件)和图形。
通过 应用主题,可以为网站中的页提供一致的外观。
主题技术适合于为所有页面(或多个页面)中的某类 控件定义相同的外观。
比如,为所有页面的GridView 控件、FormView控件或TextBox等控件定义相同的外 观。
11.2母版页 母版页实际由两部分组成,即母版页本身与一个或多 个内容页。
母版页是指具有扩展名.master(如 MySite.master)的
ASP.NET文件,它具有可以包括静 态文本、HTML元素和服务器控件的预定义布局。
母 版页由特殊的Master指令识别,该指令替换了用于 普通.aspx页的Page指令。
11.2母版页 除Master指令外,母版页还包含页的所有顶级 HTML元素,如HTML、HEAD和FORM;也可以在母 版页中使用任何HTML元素和
ASP.NET元素。
母版页还包含一个或多个ContentPlaceHolder占位符 控件。
这些占位符控件定义了可替换内容出现的区 域。
11.2.1创建母版页 【例11‐1】分析校园音乐吧项目页面布局,创建母版 页。
11.2.2创建内容页 例11‐2】仿照Login.aspx页面创建Login2.aspx页面,并 且继承MyMasterPage.master母版页。
在内容页中,Content控件通过ContentPlaceHolderID 属性和母版页中的ContentPlaceHolder控件关联起 来。
在实际运行时,内容页产生的内容就会自动填充 到母版页ContentPlaceHolder所指定的位置处,然后 输出到浏览器。
母版页中使用相对URL问题 在母版页中使用相对URL时要必须十分小心,因为根 据所使用的HTML标记或者
ASP.NET控件不同,相对 URL的解析方式也不同。
如果在母版页中使用
ASP.NET控件,相对URL就会解 析为相对于母版页的URL,即使内容页与母版页不在 同一个文件夹下,URL属性仍然会解析为相对于母版 页的URL而不是相对于内容页的URL。
如果在母版页中使用HTML标记,如、 等,相对URL会解析为相对于内容页URL。
11.3主题与皮肤
ASP.NET主题也可以让网站的页面风格一致。
使用它 可以同时控制HTML元素和
ASP.NET控件在页面上的 皮肤(也称为外观)。
与母版页不同,主题是为了控 制网页内容的皮肤,而母版页可以在网站的多个页面 间共享。
主题可以包括外观文件,还可以包括级联样式表文件 和图形资源文件。
主题根据应用范围不同分为页面主题和全局主题。
页 面主题应用在单个Web应用程序中,全局主题是指应 用在Web服务器上的所有应用程序中。
11.3主题与皮肤 定义主题之后,使用Page指令的Theme或 StyleSheetTheme属性将该主题放置在个别页上;或者 通过设置应用程序配置文件(Web.config)中的 System.Web节的pages元素,将其应用于应用程序中 的所有页上。
如果在Machine.config文件中定义了 pages元素,主题将应用于服务器上所有Web应用程 序中的所有页上。
主题也可以通过程序的方式动态应用在某个页面上。
请参考本章项目任务一节。
11.3.1创建与应用主题 【例11‐3】为校园音乐吧网站创建“蓝色天空”、“绿色大 地”和“粉色含蓄”三种主题,并应用于本网站所有页 面。
11.3.2创建并应用皮肤 一个主题可以包含一个或多个皮肤文件。
可以通过皮 肤文件来修改所有具有皮肤效果的
ASP.NET控件的属 性。
在第10章,我们讲述了GridView、ListView等数据绑 定控件,都没有为它们定义特别的CSS样式,因此显 示效果不甚美观。
下面通过添加一个GridView.skin皮 肤来达到修饰GridView控件的目的。
【例11‐4】分别为Blue、Green和Pink主题添加 GridView控件皮肤,格式化GridView控件。
分别定义 隔行显示的颜色、控件背景颜色等。
Theme与StyleSheetTheme 当页面应用主题时,主题中的控件属性会重写页面中已有 的控件属性。
可以通过指定主题的应用方式来指定主题设 置相对于本地控件设置的优先级。
如果设置了页的Theme 属性,则主题和页中的控件设置将进行合并,以构成控件 的最终设置。
如果同时在控件和主题中定义了控件设置, 则主题中的控件设置将重写控件上的任何页设置。
即使页 面上的控件已经具有各自的属性设置,此策略也可以使主 题在不同的页面上产生一致的外观。
此外,也可以通过设置页面的StyleSheetTheme属性将主 题作为样式表主题来应用。
在这种情况下,本地页设置优 先于主题中定义的设置(如果两个位置都定义了设置)。
这是级联样式表使用的模型。
如果您希望能够设置页面上 的各个控件的属性,同时仍然对整体外观应用主题,则可 以将主题作为样式表主题来应用。
项目任务—动态加载用户选择的主题 通过前面的学习,用户可以在某个页面或Web配置中 设置主题,但是该设置对所有的用户都生效。
每个用 户在注册时,都根据自己的偏好选择了不同的主题皮 肤,并保存在了数据库中,系统是否可以根据用户的 选择动态设置页面皮肤呢?答案是肯定。
上机实战—为普通会员后台管理相关页面创建母版页和内容页 会员后台管理页面共有三个页面,每个页面左边是目 录树,右边是具体内容。
原有的方案是使用iframe标 记完成。
如果使用母版页技术,也可以不使用框架技 术,直接将右边的具体内容组织为内容页。
母版页可以使用table布局方式,也可以使用div布局方 式。
如果使用Table布局方式,可以使用一个四行一列 的布局。
第一行单元格用来放置Header用户控件。
第 二单元格行用来放置导航栏SiteMapPath控件。
第三 行单元格中包含一个一行两列的table,左边为目录 树,右边为内容占位符。
第四行单元格放置Footer用 户控件。
母版页设计效果如图11‐12所示。
习题 为系统管理员后台管理相关页面,创建母版页和内容 页。
为页面的TextBox控件控件创建皮肤文件,要求将文 本框显示为下划线样式。