首页 第九讲 母版页,样式外观

第九讲 母版页,样式外观

举报
开通vip

第九讲 母版页,样式外观nullnull母版页,样式外观西源软件培训中心回顾回顾ASP.NET 提供自定义网站所需的XML格式的配置文件,开发人员可以使用 XML 解析器等文本编辑器来修改它们 根据配置文件包含的设置所应用的域,可将其划分为两类machine.config和web.config 通过在每个目录中定义一个 Web.Config文件,可形成一个有层次结构应用程序的配置架构 在配置标签中,配置信息被分成两类 配置节处理程序声明区 配置节设置区 ASP.NET 配置文件中广泛使用的元素是: 元素 元素 元素 元素 元素 ...

第九讲 母版页,样式外观
nullnull母版页,样式外观西源软件培训中心回顾回顾ASP.NET 提供自定义网站所需的XML格式的配置文件,开发人员可以使用 XML 解析器等文本编辑器来修改它们 根据配置文件包含的设置所应用的域,可将其划分为两类machine.config和web.config 通过在每个目录中定义一个 Web.Config文件,可形成一个有层次结构应用程序的配置 架构 酒店人事架构图下载公司架构图下载企业应用架构模式pdf监理组织架构图免费下载银行管理与it架构pdf 在配置标签中,配置信息被分成两类 配置节处理程序声明区 配置节设置区 ASP.NET 配置文件中广泛使用的元素是: 元素 元素 元素 元素 元素 回顾回顾正则表达式语法简洁,实现简单 正则表达式使得JavaScript的客户端验证更加容易 正则表达式还能够应用在 C# 和 JAVA中,有着非常广阔的应用前景 目标目标理解母版页 理解母版页所在位置 理解嵌套母版页 理解内容页 理解样式 理解外观 理解主题及配置文件 理解主题和外观内容 理解主题和外观作用什么是母版页什么是母版页创建了一个母版页,站点的左侧为分类栏,顶部为菜单栏,右下侧为主要工作区域。 什么是母版页什么是母版页ASP.NET 2.0为网站开发人员提供了一种在一个文件中定义多个网站页面布局的功能。这个以.master为扩展名的文件,称之为母版页。 单个母版页可以定义所有页面的相同外观和通用行为,因而开发人员无须在每个页面中编写重复的代码,并且在需要修改页面布局时只需修改母版页即可。 利用母版页,开发人员可以创建单个网页模板并在应用程序中将该模板用作多个网页的基础,这样就无需从头创建所有新网页。 一个网站可以设置多种类型的母版页,以满足不同显示风格的需要。创建母版页的 方法 快递客服问题件处理详细方法山木方法pdf计算方法pdf华与华方法下载八字理论方法下载 创建母版页的方法 下面通过示例来讲述创建母版页的方法。 首先创建一个新网站,然后右击应用程序名,在弹出的菜单中选择【添加新项】,在弹出的对话框中选择【母版页】,并使用“MasterPage1.master”默认名(可改名,但后缀不能改)。此时在界面中将出现一个ContentPlaceHolder方形窗口,这个方形窗口是配置网页的地方。可以先对网页进行布局,然后再将这个窗口移动到合适的地方。下面举例说明具体步骤。 选择【布局】菜单中的【插入表】命令以便进行布局。在【插入表】对话框中选择【模板】,然后在下拉列表中选择布局样式。在本例中选择的是【页眉和边】样式,如图所示。 用鼠标单击右下角的空间,并且将它的VAlign属性设置为Top,再将ContentPlaceHolder拖入到右下角的窗口中。 用鼠标单击左下角的空间,并且将它的VAlign属性设置为Top,再将TreeView控件从【工具箱】(ToolBox)拖入。 用类似方法将用户控件(User Control)拖入上面的空间中。 创建母版页的方法 创建母版页的方法 在母版页中放入新网页的方法 在母版页中放入新网页的方法 可以直接在母版页中生成新网页,也可以在建立新网页过程中选择母版页。 直接从母版页中生成新网页 直接从母版页中生成新网页的步骤是: 打开母版页; 右击ContentPlaceholder控件,在弹出的菜单中选择【添加内容页】命令,以确定内含的新网页; 右击新网页,在弹出的菜单中选择【编辑主表】命令,然后在网页中增添新控件。 此时新网页将被嵌入到母模板中,与母版页形成一个网页文件,网页的名字即新网页的名字。在母版页中放入新网页的方法在母版页中放入新网页的方法 在创建新网页中选择母版页 在创建新网页中选择母版页的方法是:在网站中创建一新网页。此时,在网页名的右方提供了两项选择,可以从中选择一项或两项,或者两项都不选择。两种选择项的含义如下。 将代码放在单独的文件中:代表采用代码分离方式。 选择母版页:代表将新网页嵌入到母版页中。 如果两项都不选择时,系统将创建一个单文件模式的独立网页,此网页将独立于母版页。 如果选择了第2项,将弹出一文件列表,提供一个或多个“母版页”文件以供选择。当选择其中之一后,新网页就会嵌入到指定的母版页中。 母版页与新网页将构成一个整体成为一个新的网页,新网页仍使用新产生的网页名。在母版页中将包括多个网页的共性部分,被嵌入的网页中包含的是网页的个性部分。这种关系可以用一个简单的表达式来表示: default.aspx = Master Page + default.aspx 网页与母版页的关系下图所示。 在母版页中放入新网页的方法 在母版页中放入新网页的方法 网页与母版页的关系将已建成的网页放入母版页中 将已建成的网页放入母版页中 为了将已经建成的网页嵌入母版页中,需要在已经建成的网页中用手工方法增加或改写一些代码。 打开已建成的网页,进入它的代码界面,在页面指示语句中增加与母版页的联系。为此需增加以下属性,其中"~/MasterPage.master"代表母版页名。 <%@Page Language="C#" MasterPageFile=" ~/MasterPage.master" AutoEventWireup="…">将已建成的网页放入母版页中将已建成的网页放入母版页中 由于在母版页中已经包含有HTML、Head、Body、Form等标记,因此在网页中要删除所有这些标记,以避免重复。同样,类似于

的标记也要删除(div标记不要删除)。 将已建成的网页放入母版页中将已建成的网页放入母版页中 在剩下内容的前后两端加上Content标记,并增加Content的ID属性,Runat属性以及ContentPlaceHolderID属性,后者的值(这里是ContentPlaceHolder1)应该与母版页中的网页容器相同。修改后的语句结构如下:
就是说修改后的代码中除页面指示语句以外,所有语句都应放置在与之间。母版页和内容页 母版页和内容页 母版页和普通的.aspx页面基本类似,母版页可以包含标记、控件或代码,也可以包含这些元素的任意组合,它提供预先定义的布局,这些布局可以是静态HTML元素或者服务器控件。 但不同的地方是: 母版页在页面定义部分把@Page替换成了@Master。 母版页都是以.master扩展名结尾,以防止浏览器直接打开它。 母版页需要结合内容页实现它的功能。在某一页的Page指令中定义MasterPageFile属性,便可以从母版页派生该页,如下代码所示 <%@ Page MasterPageFile="Site.master" %> ContentPlaceHolder控件ContentPlaceHolder控件母版页可以包含一种特殊类型的控件,称为ContentPlaceHolder控件。ContentPlaceHolder 定义了一个母版页呈现区域,可由与母版页关联的页的内容来替换。ContentPlaceHolder还可以包含默认内容,以免派生页不需要重写此内容。 ContentPlaceHolder控件的语法如下: <%-- ContentPlaceHolder control --%> <%-- ContentPlaceHolder with default content --%>

Welcome to my florist website!

母版页中的URL问题 母版页中的URL问题 母版页中有多处使用相对路径语法引用图像、样式表或页引用之类的URL资源,如果母版页和内容页在同一目录中,代码将正常运行;但是,如果内容页实际上在另一个位置,这个相对路径就是错误的。要解决这个问题,可以采取以下方法之一: 在母版页中使用绝对URL路径,例如。 在服务器控件中使用相对URL或与应用程序相关的URL来代替静态标记,例如。 以编程方式访问母版页 以编程方式访问母版页 内容页也可以通过编程方式访问其母版页。内容页使用<%@ MasterType %> 指令来创建对母版页的强类型引用,并指定到母版页的虚拟路径: <%@ MasterType VirtualPath="Site.master" %> 然后,内容页可以使用Page类的Master属性来引用母版页了,代码如下所示: Master.FooterText = "This is a custom footer"; AdRotator ad = (AdRotator)Master.FindControl("MyAdRotator"); Master.FooterText = "This is a custom footer" Dim ad As AdRotator = Master.FindControl("MyAdRotator") 可以使用母版页以编程方式执行许多公共任务,包括: 访问在母版页上定义的成员(包括公共属性/方法或控件)。 动态地将母版页附加到内容页。 访问母版页上的成员 访问母版页上的成员 在运行时,母版页与内容页合并,因此内容页的代码可以访问母版页上的控件。如果母版页的 ContentPlaceHolder控件中包含一些控件,则这些控件被内容页的Content控件重写后将不可访问,这些控件是受保护的,因此不能作为母版页成员直接访问。但是,可以使用FindControl方法定位母版页上的特定控件。如果要访问的控件位于母版页的ContentPlaceHolder控件内部,必须首先获取对 ContentPlaceHolder 控件的引用,然后调用其 FindControl 方法获取对该控件的引用。 动态地附加母版页 动态地附加母版页 除了以声明方式指定母版页(在 @ Page 指令或配置文件中)外,还可以动态地将母版页附加到内容页。因为母版页和内容页会在页处理的初始化阶段合并,所以必须在此前分配母版页。通常,在PreInit事件阶段动态地分配母版页,如下面的示例所示: void Page_PreInit(Object sender, EventArgs e) { this.MasterPageFile = "~/NewMaster.master"; } 样式、主题和外观概述样式、主题和外观概述样式、主题和外观概述 样式、主题和外观概述 主题是属性设置的集合,使用这些设置可以定义页面和控件的外观,使的Web应用程序中的所有页、整个Web应用程序或服务器上的所有Web应用程都一致地应用此外观。主题由一组元素组成:外观、级联样式表(CSS)、图像和其他资源。主题将至少包含外观。主题是在网站或Web服务器上的特殊目录(App_Themes)中定义的。 外观 外观文件的扩展名为.skin,它包含各个控件(例如,Button、Label、TextBox或Calendar控件)的属性设置。控件外观设置类似于控件标记本身,但只包含要作为主题的一部分来设置的属性。 例如,下面是Button控件的控件外观: 样式、主题和外观概述样式、主题和外观概述 级联样式表 主题还可以包含级联样式表(.css文件)。将扩展名为.css的文件放在主题目录中时,样式表将会自动作为主题的一部分应用。使用扩展名为.css的文件在主题文件夹中定义样式表。 主题图形和其他资源 主题还可以包含图形和其他资源,例如脚本文件或声音文件。例如,页面主题的一部分可能包括TreeView控件的外观,当然也可以在主题中包括用于表示展开按钮和折叠按钮的图形。 主题主题主题和外观特性使开发人员能够把样式和布局信息存放到一组独立的主题(Theme)文件中。 可以把这个主题应用到整个站点,用于改变该站点内的页面和控件的外观和感觉。 通过改变主题的内容,而不用改变站点的单个页面,就可以轻易地改变站点的样式。 主题可以在开发者之间共享。 向控件应用样式 向控件应用样式 目前广泛采用的样式表(CSS)在很大程度上就是负责处理Web上遇到的丰富的 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 需求。 ASP.NET的所有HTML服务器控件和Web服务器控件都可提供一流的CSS样式支持。 给HTML控件应用样式 向Web服务器控件应用样式 给HTML控件应用样式 给HTML控件应用样式 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 HTML标记通过样式属性支持CSS,该样式属性可以设置为分号分隔的属性/值对列表。 所有的ASP.NET HTML服务器控件都可以采用与标准HTML标记完全一样的方式接受样式。 通过在设计视图中,选中控件后,通过属性窗口中的Style属性,在弹出的“样式生成器”对话框中设置相关的样式。当然如果开发人员对CSS非常熟悉,也可以在源代码编辑中,直接在Style中敲入样式的属性值。 示例HTML控件应用样式方式HTML控件应用样式方式编辑Style属性 通过“样式生成器”对话框直接编辑设置控件的样式 定义class属性 通过定义CSS的类,然后设置控件的class属性应用样式 以编程方式操作Style集合属性设置样式 使用此Style集合属性以编程方式操作HTML服务器控件的样式。 向Web服务器控件应用样式 向Web服务器控件应用样式 Web服务器控件添加了几个用于设置样式的强类型属性(例如背景色、前景色、字体名称和大小、宽度、高度等等),从而为样式提供了更多层次的支持。 部分控件可以通过“自动套用格式…”应用样式 定义CssClass属性 通过定义CSS的类,然后设置控件的CssClass属性应用样式 通过Style对象使用ApplyStyle方法以编程方式设置Web服务器控件样式 利用主题来定制站点 利用主题来定制站点 主题提供了一种简易方式,可以独立于应用程序的页为站点中的控件和页定义样式设置。 可以从外部源获得自定义主题,以便将样式设置应用于应用程序。 多个主题的优点在于,设计站点时可以不考虑样式,以后应用样式时也无需更新页或应用程序代码。 一个主题的优点在于,样式设置存储在一个位置,可以独立于应用该主题的应用程序来维护这些设置。 主题应用示例 主题应用示例 新建一个Web项目,点击“添加新项”,选择“外观文件”并命名为“Button.skin”,点击“添加”按扭,如图所示。 当单击“添加”按扭以后会弹出如图所示的对话框,程序提示是否将主题文件添加到“App_Themes”文件夹中。单击“是”,这样就为Web添加了一个名为“Button”的主题。 在图中可以看到在“App_Themes”文件夹下有一个所创建的主题Button,在Button文件夹下有一个Button.skin文件,这就是刚添加的主题文件,双击Button.skin文件,为其添加外观设置代码。 代码如下: 主题应用示例 主题应用示例 为页面指定主题: 通过<%@ Page Theme=“Button” %>指令设置全局主题或应用程序级主题的名称(Themes或App_Themes目录下的文件夹的名称),可为单个页指定主题。 为控件指定外观主题也很简单,只要指定相应的SkinID属性即可 。 在页面中添加4个Button按扭,如图所示。 分别设置SkidID属性为空、Blue、Red,如图所示。 应用主题后,运行结果主题的应用范围 主题的应用范围 对网站应用主题 在应用程序的Web.config文件中,将元素设置为全局主题或页面主题的主题名称 将主题设置为样式表主题并作为本地控件设置 对部分网站内容应用主题 要仅对一部分页应用某主题,可以将这些页与它们自己的Web.config文件放在一个文件夹中 。 在根Web.config文件中创建一个元素以指定文件夹 对单个页应用主题 将@Page指令的Theme或StyleSheetTheme属性设置为要使用主题的名称 主题的应用范围主题的应用范围对控件应用外观 主题中定义的外观应用于已应用该主题的应用程序或页中的所有控件实例 设置控件的SkinID属性 禁用主题 禁用页的主题 将@ Page指令的EnableTheming属性设置为false,如下例所示: <%@ Page EnableTheming="false" %> 禁用控件的主题 将控件的EnableTheming属性设置为false 。 Theme和StyleSheetTheme优先级 Theme和StyleSheetTheme优先级 通过设置@Page指令或配置的节的Theme属性(attribute)应用的,则主题中的外观属性(property)将重写页中目标控件的同名属性(property)。 通过将@Page指令或配置的节的StyleSheetTheme属性设置为主题的名称,可以将主题定义作为服务器端样式来应用。主题属性用作StyleSheetTheme时,可能被页中的控件重写。 对应用程序既应用Theme又应用StyleSheetTheme,则按以下顺序应用控件的属性: 首先应用StyleSheetTheme属性。 应用页中的控件属性(重写StyleSheetTheme)。 最后应用Theme属性(重写控件属性和StyleSheetTheme)。 主题和外观的内容 主题和外观的内容 控件的可设置主题的属性(Themeable属性) 在主题中使用CSS 在主题中使用图像 主题控件集合 主题控件模板 数据绑定和表达式 在主题中使用CSS 在主题中使用CSS 通过把级联样式表(CSS)放置在命名主题的子目录中,开发人员可以给该主题添加CSS。 如果页面包含了<head runat=“server”/>控件定义,那么该CSS样式表将应用于所有使用了该主题的页面。 具体示例参加书中案例在主题中使用图像 在主题中使用图像 主题还可以包含外观文件中的控件定义所引用的图像。 外观中对图像的引用应使用Theme 目录下图像文件夹的相对路径,以便外观文件和图像可以一起移动到其他应用程序中。 在运行时,会重新设置图像的路径,以使引用相对于目标页中的控件,而不是相对于外观文件。 具体示例参加书中案例主题控件集合 主题控件集合 可以在外观中设置集合属性。 在外观中设置集合属性时,不要将这些属性应用于目标控件集合中的项。而应在使用Theme时完全替换该集合,在使用StyleSheetTheme时合并该集合。 以上主题控件集合,对于包含样式集合的某些集合属性十分有用,如TreeView控件的 LevelStyles属性或Menu控件的LevelMenuItemStyles、LevelSubMenuItemStyles或LevelSelectedStyles属性。 具体示例参见书中案例主题控件模板 主题控件模板 可以在外观文件中应用模板属性。 与集合一样,在外观文件中定义模板属性不是在目标控件的模板中设置各项的主题,而是替换全部模板内容。 通过这种方法,可以对使用Theme或 StyleSheetTheme的应用程序中的模板化控件的布局进行显著的更改。 具体示例参见书中案例数据绑定和表达式 数据绑定和表达式 使用<%# Eval %>或<%# Bind %>的数据绑定在主题模板中也有效,但不是任何代码数据绑定或表达式都允许。 具体示例参见书中案例主题和外观作用主题和外观作用使用 ASP.NET 2.0的“主题和外观”功能,可以将样式和布局信息分解为单独的文件组,统称为“主题”。 主题可应用于任何站点,影响站点中页和控件的外观。 通过更改主题即可轻松地维护对站点的样式更改,而无需对站点各页进行编辑。 可与其他开发人员共享主题。 主题应用的 规则 编码规则下载淘宝规则下载天猫规则下载麻将竞赛规则pdf麻将竞赛规则pdf 和优先级 主题应用的规则和优先级 如果设置了应用程序或页的Theme属性,则主题中控件设置和页中控件的设置将进行合并,以构成控件的最终设置。 如果同时在控件和主题中定义了控件的属性,则主题中的控件属性设置将重写任何页中控件上的设置。 如果将主题通过设置页面的StyleSheetTheme属性作为样式表主题来应用,则页中的属性设置优先于主题中属性定义的设置。 当在页级别或容器级别禁用主题时,会对页或容器包含的所有控件禁用主题,如Panel Web服务器控件或者用户控件。主题应用的规则和优先级主题应用的规则和优先级如果在Web.config里指定了主题,则这个设置将覆盖页面的StyleSheetTheme设置和页面上的控件设置。 CSS样式的定义采取就近和后定义起作用的原则。如果前后对一个控件定义了相同的CSS,那么后面的定义将起作用而忽略前面的定义。 .ASPX页面中如果设置了,则ASP.NET 2.0将自动引入主题中的CSS文件。 在主题文件夹中可以包括图片,这在TreeView、Menu等服务器控件中使用自定义图片时特别有用。这些图片的地址只需要提供与外观文件.skin的相对路径即可,ASP.NET 2.0会自动调整为正确的URL地址。 总结总结母版页 母版页所在位置 嵌套母版页 内容页 样式 外观 主题及配置文件 主题和外观内容 主题和外观作用作业作业要求 新建网站项目。 添加母版页。 添加对应的图片和布局。 设置CSS样式,控制页面样式 创建一个主题外观文件,设置相关应用控件的样式和外观。 修改配置信息,应用此外观文件。 那么当前应用程序中所有页面相关控件就会按设置外观显示。
本文档为【第九讲 母版页,样式外观】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_389761
暂无简介~
格式:ppt
大小:584KB
软件:PowerPoint
页数:0
分类:互联网
上传时间:2011-06-10
浏览量:70