java课件关于主题、母版页.ppt

,主题、母版页,本章内容,掌握创建和应用主题的方法 掌握母版页的使用方法,本章重点,本章重点 外观文件 CSS样式文件 母版页 本章难点 创建和使用主题及母版页,主题、母版页,主题 母版页 本章小结,主题（Theme）,主题（Theme）是ASP.NET 2.0提供的一种新技术，是指控件和页面外观属性设置的集合。通过为控件和页面套用主题，可以使用户界面外观达到一致化的显示效果。 主题概述 创建主题 将主题应用于整个应用程序,主题概述 1/2,用户界面外观主要与控件和页面的样式有关。几乎所有的控件都具有Style属性，用于设置前景色、背景色、边框样式、字体等属性。在网站制作过程中，可以一个控件一个控件的去设置，这样会做许多重复性的工作，而且还不容易保持站点中页面外观的一致性。利用ASP.NET 2.0提供的主题功能，可以快速地为服务器控件定义外观，并且所定义的外观可应用到单个页面、应用程序的所有页面及所有的应用程序中。,主题概述 2/2,在一个主题中至少要包括一个皮肤文件（或称外观文件，扩展名为.skin），还可包括级联样式表文件（扩展名为.css）。外观文件不同于CSS样式， CSS样式只能用来定义页面和HTML标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。,创建主题,皮肤文件的种类 皮肤文件可分为两种：默认外观和命名外观。 默认外观：没有定义SkinId属性。在同一主题中针对同一类型的控件只允许有一个默认外观。当页面应用主题时，默认外观将自动应用于同一类型的所有控件。 命名外观：如果在定义控件的外观时，设置了SkinId属性，则该外观是命名外观，可以为同一类型的控件定义多个命名外观。在页面中，通过为同一类型的控件应用不同的命名外观，可以使同一类型的控件显示不同的外观效果。 在页面中，同一类型的所有控件中，如果不希望某个控件应用默认的外观设置，可在属性窗口中将该控件的EnableTheming属性设置为False。,创建皮肤文件,创建如图所示的主题文件应用示例程序，为第一个文本框控件应用默认皮肤，为第二个文本框应用命名皮肤，第三个文本框禁用皮肤文件。,创建皮肤文件,操作步骤如下： （1）创建主题文件。在解决方案资源管理器中，右击站点根目录，在弹出的快捷菜单中选择“添加ASP.NET文件夹”“主题”选项，系统会自动添加一个主题专用目录App_Themes，用来存放所有创建的主题文件夹，同时自动创建一个名为“主题1”的主题文件夹，将其更名为“Themes_skin”。 （2）在主题文件夹中添加外观文件。单击选定新建的主题文件夹，单击工具栏上的“添加新项”按钮，打开“添加新项”对话框，在“模板”列表中选择“外观文件”选项，系统添加一个名为SkinFile.skin的文件，将其更名TextBox.skin ，同时打开外观文件的框架。,创建皮肤文件,（3）在打开的皮肤文件的框架中为文本框控件定义默认皮肤和命名皮肤。 ,创建皮肤文件,（5）将主题应用于页面中。 新建页面，将其命名为Theme.aspx，在页面中添加3个文本框控件，按题目要求进行设置，第二个文本框应用命名皮肤，第三个文本框禁用皮肤文件。要将定义的TextBox.skin皮肤文件应用于该页面中的文本框，需要在Page指令中添加代码“Theme=”主题目录名称”属性，该皮肤文件位于Temes_skin主题目录中，因此需在Page指令中添加“Theme=”Temes_skin”属性。,创建皮肤文件,（6）调试运行程序。在设计视图中，看不出命令按钮外观有何不同，只有在调试程序时，才能看到Button.skin外观文件对命令按钮控件外观的影响。 在Button.skin外观文件中定义默认外观时并未设置命令按钮的边框宽度属性，从程序运行结果来看，应用默认外观的命令按钮的边框宽度是比较宽的，因为设置了应用默认外观的命令按钮的边框宽度属性为5像素，这说明控件最终显示的外观效果是外观文件和控件的属性共同作用的结果。,创建CSS样式文件,主题中的CSS样式文件用来定义页面外观及HTML控件的外观样式，如设置页面背景、超链接文本的样式等。 下面通过一个简单的例子介绍如何创建CSS样式文件。 例 创建CSS样式文件应用示例程序，为页面添加背景图片，设置背景图片固定，为页面中的超链接文本设置链接、悬停、单击和访问后的外观效果。,创建CSS样式文件,操作步骤如下： （1）在解决方案资源管理器中，右击主题专用目录App_Themes，在弹出的快捷菜单中选择“添加ASP.NET文件夹”“主题”选项，将新的主题文件夹命名为“Themes_CSS”。 （2）单击选定新建的Themes_CSS主题文件夹，为其添加一个用于存放图片的文件夹images，在images文件夹中添加一幅背景图片。 （3）添加CSS样式文件。单击选定Themes_CSS主题文件夹，单击工具栏上的“添加新项”按钮，打开“添加新项”对话框，在“模板”列表中选择“样式表”选项，系统添加一个名为StyleSheet.css的文件，同时打开该文件。 （4）在StyleSheet.css文件中添加代码。,创建CSS样式文件,Bodybackground-image:url(images/bg.jpg); background-repeat:repeat; background-attachment:fixed ; A:linkcolor:Blue;text-decoration:underline; A:visitedcolor:Blue;text-decoration:underline; A:hovercolor:Orange;text-decoration:none;font-size:large;font-weight:bold; A:activecolor:Red;text-decoration:none;,创建CSS样式文件,（5）在页面中应用CSS文件。需在Page指令中添加语句“Theme=”Themes_CSS”属性。 （6）调试运行程序。调试程序时会发现，背景图片平铺了整个窗口；当窗口高度不能容纳所有的页面内容时，在窗口垂直方向将自动出现滚动条，拖动滚动条时会发现背景图片是固定不动的；将鼠标移到超链接文本上时，文本颜色发生改变，并且没有了下划线，字体变大、加粗显示，按下鼠标时颜色也会发生改变。,将主题应用于整个应用程序,通过为单个页面设置Theme属性，将创建的外观文件（扩展名.skin）和CSS样式文件（扩展名.css）应用到了单个的页面中。 为了能将主题快速应用于应用程序的所有页面，可在应用程序根目录下的Web.config文件中进行定义。 为Web.config配置文件的配置节添加Theme属性。 这样，站点中的所有文件将应用同一主题文件。,禁用主题,如果要禁用整个应用程序的主题，只需将配置节中的Theme属性设置为空（“）即可。 将主题应用于整个应用程序后，如果想使某个页面禁用主题，需在Page指令中添加StyleSheetTheme属性,母版页,通过为控件和页面应用主题，使站点中的所有控件和页面达到了外观一致的效果。那么，有没有快捷的方法使站点中所有页面的布局也能保持一致呢？答案是肯定的。ASP.NET 2.0 提供的母版页功能便可很好地解决这个问题。 母版页（master）和内容页（Content） 创建母版页 创建内容页,母版页（master） 内容页（Content）1/3,母版页的作用类似于DreamWeaver中的模板，扩展名是.master。 在ASP.NET 2.0中，可以将应用程序中的各个页面分为可编辑区域和固定内容两部分。 母版页：将页面中所有固定不变的内容，如网站标志、公共标题、广告条、导航条、版权声明、联系信息等放到母版页中，母版页中的内容将显示在所有的页面中。由于这些元素的统一布局，保证了整个程序中所有页面外观的一致性。,母版页（master） 内容页（Content）2/3,内容页：在整个应用程序中，各个页面又不完全相同。这些页面都以母版页为基础，在这些页面中除母版页外的非公共的部分称为内容页。内容页实际上是普通的.aspx页面。每个内容页都将内容放在标记内。 程序运行时，内容页和母版页的页面内容组合到一起，由母版页中的占位符包含内容页中的内容，最后将完整的页面发送给客户端浏览器。,母版页（master） 内容页（Content）3/3,母版页,内容页,结果页,创建母版页 1/3,例 创建留言本中的母版页。 操作步骤如下： （1）在站点中新建文件夹lyb。单击lyb文件夹，单击工具栏上的“添加新项”按钮，在打开的对话框中选择“母版页”选项，母版页的默认名称是MasterPage.master，将其更名为lyb.master。 新建的母版页中除了HTML标记外，只有一个用于容纳内容的ContentPlaceHolder控件。 编辑母版页的方法与编辑普通页面的方法相同,创建母版页 1/3,创建母版页 2/3,关键代码： ,创建母版页 3/3,声明母版页使用，取代了普通.aspx页面中的。 ContentPlaceHolder控件，该控件只起占位符的作用，并不包含具体的内容。,创建内容页 1/3,内容页可以在建立新页面的过程中选择要使用的母版页，也可以直接在母版页中添加新页面。 1. 在新建页面过程中使用母版页 （1）单击工具栏上的“添加新项”按钮，在打开的对话框的模板中选择“Web窗体”选项，并选中右下角的“选择母版页”复选框，单击“添加”按钮。在打开的“选择母版页”对话框中选择新建的母版页，单击“确定”按钮。 （2）在用于添加内容的白色区域中进行编辑即可。,创建内容页 2/3, ,创建内容页 3/3,内容页与普通的.aspx文件的代码是不同的。在内容页中没有、等标记，这些标记都放在了母版页中。代码头部与普通.aspx文件相似，只是多了两个属性MasterPageFile和Title。 MasterPageFile属性指定该内容页所绑定的母版页，Title属性用于设置页面的Title值。 在内容页中包含了1个Content控件，该控件的ID值为Content1，该控件中包含的内容是该页面不同于其它页面的部分。通过设置ContentPlaceHolderID属性，将Content1与母版页的ContentPlaceHolder1联系起来。母版页和内容页的对应关系是通过设置Content控件中的ContentPlaceHolderID属性来实现的。,母版页和内容页的对应关系,本章小结,ASP.NET 2.0中提供了两个新功能主题和母版页。通过为控件和页面应用主题，可快速统一应用程序各个页面外观。在主题中可添加皮肤文件CSS文件，皮肤文件主要用于定义服务器控件的外观，包括默认皮肤和命名皮肤两种类型，二者的不同在于命名皮肤需设置SkinID属性。CSS文件主要用于定义页面和HTML标记的外观。通过在页面头部中设置Theme属性为主题目录名称，可将主题应用于某个页面。如果要使整个程序的所有页面都应用某个主题，可在配置文件Web.config中的节中设置