,中国 黑龙江齐齐哈尔大学 崔连和,ASP.NET程序设计教程,PART,-主题和母版页技术,9,CSS样式,主题的使用,母版页,综合实例,9.1.1 概述 9.1.2 CSS样式的创建 9.1.3 CSS样式的应用,9.2.1 概述 9.2.2 创建页面主题 9.2.3 创建皮肤 9.2.4 主题图片和其他资源 9.2.5 主题的应用与禁用 9.2.6 主题与级联样式（CSS）,9.3.1 母版页的组成 9.3.2 母版页技术常用控件 9.3.3 母版页的运行过程 9.3.4 母版页的优越之处 9.3.5 母版页技术应用过程 9.3.6 母版页的创建与使用 9.3.7 母版页的原理 9.3.8 母版页与内容页的关联 9.3.9 母版页编程,本章小结 每章一考,主题和母版页技术,第9章,9.1.1 概述 1CSS的含义 CS5实质上是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。 CSS 样式可以通过内联方式放置在单个HTML元素内，也可以在Web页HEAD部分的块内加以分组，或从单独的CSS样式表文件中导入。,80,9.1 CSS样式 网站页面的布局通常有表格布局和CSS+DIV布局两种方式。CSS是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。减少网页的代码量，加快页面传送速度。,9.1 CSS样式,第9章,第9章,2CSS样式的分类,1. 内联样式（Inline Style）。内联样式是写在HTML标记之中的，它只针对自己所在的标记起作用。样式的属性、内容直接包含在将要修饰的文字标记里。,98,2.内部样式表（Internal Style Sheet）。内部样式表是写在里面的，它只针对所在的HTML页面有效。,3.外部样式表（External Style Sheet）。把内联样式表中的之间的样式规则定义语句放在一个单独的外部文件中，其扩展名是css。一个外部样式表文件可以通过标签连接到HTML文档中。,9.1 CSS样式 网站页面的布局通常有表格布局和CSS+DIV布局两种方式。CSS是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。减少网页的代码量，加快页面传送速度。,9.1 CSS样式,CSS样式表按其位置的不同可以分为内联样式（Inline Style）、内部样式表（Internal Style Sheet）及外部样式表（External Style Sheet）三类。,第9章,启动VS 2010,依次在主菜单中选择“文件|新建|网站”命令，出现“新建网站”对话框，选择“ASP.NET空网站”，单击“确定”按钮，完成新网站的建立,添加样式规则,右键单击样式文件窗口，在弹出的样式菜单中选择“添加样式规则”命令。在该窗口左侧提供了三种类型的样式选择器 1）元素：用于指定一个HTML元素。 2）类名：用于创建通用的样式规则。 3）元素ID：为页面上指定的元素的ID设置样式。,添加样式表,在“解决方案资源管理器”中，单击右键“添加新项”，在弹出的“添加新项”菜单中选择“样式表”，单击“添加”按钮,生成样式,将光标定位在样式表文件编辑窗口，然后单击样式表文件编辑区上部的“生成样式”，将弹出“修改样式”窗口，在该窗口中可以很直观地进行样式设置。,9.1.2 CSS样式的创建,9.1 CSS样式 网站页面的布局通常有表格布局和CSS+DIV布局两种方式。CSS是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。减少网页的代码量，加快页面传送速度。,9.1 CSS样式,9.1.3 CSS样式的应用 1CSS样式的应用十分简单，只需在“解决方案资源管理器”中，选择已经建立的样式拖到设计视图中即可。,80,第9章,9.1 CSS样式 网站页面的布局通常有表格布局和CSS+DIV布局两种方式。CSS是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。减少网页的代码量，加快页面传送速度。,9.1 CSS样式,第9章,主题的含义,主题由外观、级联样式表（CSS）、图像和其他资源组成，它提供了一种简单的方法设置控件的样式属性。外观文件具有文件扩展名 skin，它包含各个控件的属性设置。,皮肤文件的含义,皮肤即外观文件，皮肤文件具有文件扩展名skin，它包含各个控件的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性,主题的分类,主题分为页面主题和全局主题两种。 1）页面主题是一个主题文件夹，其中包含控件皮肤、样式表、图形文件和其他资源。 2）全局主题存储在对Web服务器具有全局性质的名为Themes的文件夹中。,9.2.1 概述,9.2 主题的使用 在实际应用中，主题技术十分实用，通过利用主题功能，可以为页面中的所有Button控件定义共同的皮肤，如背景颜色和前景颜色，而不必一一设置每一个页面中按钮控件的风格,9.2 主题的使用,9.2.2 创建页面主题 创建页面主题,9.2.3 创建皮肤 右键单击App_Themes文件夹，在弹出的菜单中选择“添加新项”，在添加新项窗口选择“外观文件”项，并重新命名。,接下来，出现皮肤文件编辑窗口，微软公司没有提供皮肤代码生成器，只能手工录入，程序员习惯在设计视图中设计好控件的外观，然后复制到皮肤文件中，并去掉ID属性和其他与控件呈现不相关的属性设置。,9.2.4 主题图片和其他资源 1若要引用主题文件夹的某个子文件夹中的资源文件，应使用类似于该Image控件外观中显示的路径。 2.如果主题的资源在应用程序的某个子文件夹中，则可以使用格式为“/子文件夹/文件名”的路径来引用这些资源文件。 ,80,第9章,9.2 主题的使用 在实际应用中，主题技术十分实用，通过利用主题功能，可以为页面中的所有Button控件定义共同的皮肤，如背景颜色和前景颜色，而不必一一设置每一个页面中按钮控件的风格,9.2 主题的使用,第9章,对整个网站应用主题,在web.config文件中，指定pages元素设置为页面主题或全局主题的名称，为应用程序中的所有页定义应用的主题。在此特别强调，母版页不能应用主题。主题应用格式如下。 pages theme=“主题名称“/,禁用主题,禁用主题时将该页面的page指令的EnableTheming属性设置为false，如下所示。 % page EnableTheming=“false“ %,对单个页面应用主题,为单个页面指定主题，只需要在页面的page指令中按如下设置即可。但要注意一个页面只能应用一个主题，但该主题中可以有多个外观文件。 % pages theme=“主题名称“ %,9.2.5 主题的应用与禁用,9.2 主题的使用 在实际应用中，主题技术十分实用，通过利用主题功能，可以为页面中的所有Button控件定义共同的皮肤，如背景颜色和前景颜色，而不必一一设置每一个页面中按钮控件的风格,9.2 主题的使用,1）主题可以定义控件属性，而样式表不能定义控件属性。,2）主题应用的优先级方式与样式表不同。默认情况下，页面的Theme属性所引用的主题中定义的任何属性值都会重写控件上以声明方式设置的属性值，除非使用StyleSheetTheme 属性显式应用主题。,3）每个Web页只能应用一个主题。不能向一页应用多个主题，这与样式表不同，样式表可以向一个Web页应用多个样式表。,80,第9章,9.2.6 主题与级联样式（CSS）,9.2 主题的使用 在实际应用中，主题技术十分实用，通过利用主题功能，可以为页面中的所有Button控件定义共同的皮肤，如背景颜色和前景颜色，而不必一一设置每一个页面中按钮控件的风格,9.2 主题的使用,9.3.1 母版页的组成 1母版页 母版页是具有扩展名master的ASP.NET文件，母版页可以包括静态元素、动态元素，还可以包括ASP.NET的各种控件。母版页由特殊的master指令标识，该指令替换了普通.aspx文件的page指令。 ,80,第9章,9.3 母版页 使用母版页技术，用户可批量制作网页、维护网页。使用ASP.NET母版页可为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页定义所需的外观和标准行为。,9.3 母版页,3,1,2,4,遵循规则,不能有、和执行在服务器端的标签，因为这些标签早已定义在母版中，内容页只能定义网页内容。当浏览内容页时，就会将母版页加上内容页一起输出到浏览器。,Content控件的ContentPlaceHolderID一定要与母版页中ContentPlaceHolder控件的ID属性值对应，否则程序会出错。,一定要设定MasterPageFile属性以指定所使用的母版页。,为了对应到母版页的ContentPlaceHolder 控件，在内容页中一定要添加Content控件。放在Content控件中的正文或服务器控件等，会对应到适当的位置。,第9章,2内容页,9.3 母版页,9.3.2 母版页技术常用控件 1ContentPlaceHolder控件,2Content控件 (1)Content 控件是内容页的内容和控件的容器，与母版页上的ContentPlaceHolder 控件相对应。 (2)运行时Content 控件中的内容直接合并到母版页对应的 ContentPlaceHolder 控件中。 (3)Content 控件使用它的 ContentPlaceHolderID 属性与一个 ContentPlaceHolder 关联。将 ContentPlaceHolderID 属性设置为母版页中 ContentPlaceHolder 控件的 ID 属性的值。,80,第9章,9.3 母版页 使用母版页技术，用户可批量制作网页、维护网页。使用ASP.NET母版页可为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页定义所需的外观和标准行为。,9.3 母版页,3,1,2,4,处理步骤,获取该页之后，读取 Page指令。如果该指令引用一个母版页，则将读取该母版页。如果是第一次请求这两个页面，则两个页面都要进行编译。,各个Content控件的内容合并到母版页中相应的 ContentPlaceHolder 控件中。最后浏览器将呈现得到后的合并页。即A.Master与A.aspx的合并出来的页面。,用户通过输入内容页的URL来请求某个页面，如，假设母版文件为A.master。 ,将包含更新内容的母版页合并到内容页的控件中。如下所示，设内容文件为A.aspx。 此处为内容 此处为内容,第9章,9.3.3 母版页的运行过程,9.3 母版页,母版页可以把网站相同的部分抽离出来，使得程序风格统一,使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页面。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。,母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。,使用母版页可以集中处理页面的通用功能，以便只在一个位置上进行更新。,通过控制内容占位符控件的呈现方式，母版页可以在细节上控制最终页面的布局。,9.3.4 母版页的优越之处,第9章,9.3 母版页,9.3.5 母版页技术应用过程 母版页技术应用过程如图所示。,9.3.6 母版页的创建与使用 1启动Viusual Studio 2010 依次在主菜单中选择“文件|新建|网站”命令，出现“新建网站”对话框，选择“ASP.NET空网站”，单击“确定”按钮，完成新网站的建立。如图所示。,80,第9章,9.3 母版页 使用母版页技术，用户可批量制作网页、维护网页。使用ASP.NET母版页可为应用程序中的页创建一致的布局。单个母版页可以为应用程序中的所有页定义所需的外观和标准行为。,9.