样式、主题与母版页.ppt

ASP.NET 4.5网站开发实例教程 第7章 样式、主题与母版页 第*页 第7章 样式、主题与母版页 本章概述 本章的学习目标 主要内容 第*页 本章概述 开发Web应用程序通常需要考虑两个方面：功能和外观。其中，外观考虑的重点是使Web站点的美观问题，例如控件的颜色、图像的使用、页面的布局等。ASP.NET提供了一些自定义功能，主要用在ASP.NET程序中的页面、控件的外观及样式上，例如可以为某个控件设置字体、背景色和前景色、宽度以及高度等样式，还可以通过合理定位页面中的元素，为用户呈现出易于使用且视觉美观的效果。本章将全面介绍Web应用程序的样式控制和页面布局。 第*页 本章的学习目标 理解CSS的概念，掌握CSS的用法； 理解布局的概念，掌握CSS和Div布局的方法； 理解主题的概念，掌握主题的创建和引用； 理解母版页和内容页的概念，掌握创建母版页和内容页的方法。 第*页 主要内容 7.1 CSS简介 7.2 页面布局 7.3 主题 7.4 母版页 7.5 本章小结 第*页 7.1 CSS简介 CSS(Cascading Style Sheet)，即层叠样式表，是一种标记性语言，用于控制网页样式并允许将样式信息与网页内容分离。使用 CSS 样式可以非常灵活地控制网页外观，大大减轻实现精确布局定位、维护特定字体和样式的工作量。 CSS中有两种定义样式的方法，分别是内联式和级联式，分别对应两类样式：内联式样式和级联式样式。 第*页 7.1 CSS简介 样式是指XHTML标记元素在浏览器中呈现的形式，如字体的大小、颜色、位置等。在XHTML中，最容易、最快速的方法是通过设置标记元素的style属性来控制元素的样式，其一般形式如下： 元素名称 style=属性名1:属性值1; 属性名2:属性值2; …… 显示内容/元素名称 属性名与属性值之间用冒号(:)分隔，如果一个样式中包含多个属性，各属性之间用分号(;)隔开。例如： div style=font-weight:bold;color:Red;border:solid 2pt navy 第*页 内联式样式 直接将样式控制放在单个HTML元素内，称为内联式或行内样式。该样式通过style属性控制每个元素的外观。这种样式直观但是很繁琐，除非具有相同样式的元素较少，否则很少采用。下面的代码采用内联式来控制各个元素的样式。 第*页 级联式样式 在网页的head部分定义或导入的样式，称为级联式样式。级联式样式可以使用以下两种方式来实现。 第一种方式是，在head部分直接定义CSS样式，称为内嵌式。 第二种方式是，在head部分通过导入以扩展名为.css的文件来实现CSS样式，称为链接式。 第*页 主要内容 7.1 CSS简介 7.2 页面布局 7.3 主题 7.4 母版页 7.5 本章小结 第*页 7.2 页面布局 页面水平居中：实现的方法是在body的style样式中设置text-align属性的值为center即可。如果还希望页面的宽度固定，则可以通过设置div的width属性来实现。 页面满宽度显示：实现的方法是将div1的固定宽度设置为百分比即可，这样宽度就会随显示界面的大小自动调整。 第*页 主要内容 7.1 CSS简介 7.2 页面布局 7.3 主题 7.4 母版页 7.5 本章小结 第*页 7.3 主题 网站的美观主要涉及页面和控件的样式属性。在ASP.NET应用程序中，可以利用CSS控制各元素的样式以及部分服务器控件的样式，但是，有些服务器控件的属性无法通过CSS进行控制。为了解决这个问题，ASP.NET提供了一种称为“主题”的新方式，它可以保持网站外观的一致性和独立性，同时使页面的样式控制更加灵活方便，例如动态实现不同用户界面的切换等。 第*页 主题概述 主题是指页面和控件外观属性设置的集合。主题由一个文件组构成，包括皮肤文件(扩展名为.skin)、级联样式表文件(扩展名为.css)、图片和其他资源等，一个主题至少包含一个皮肤文件。 主题分为两大类型，一类是应用程序主题，另一类是全局主题。 应用程序主题是指保存在Web应用程序的App_Themes文件夹下的一个或多个主题文件夹，主题的名称就是文件夹的名称。 全局主题是指保存在服务器上，根据不同的服务器配置决定的，能够对服务器上所有Web应用程序起作用的主题文件夹。 第*页 皮肤文件 皮肤文件是主题的核心文件，也称为外观文件，专门用于定义服务器控件的外观。在主题中可以包含一个或多个皮肤文件，后缀名为.skin。 在控件皮肤设置中，只能包含主题的属性定义，如样式属性、模板属性、数据绑定表达式等，不能包含控件的ID，如Label控件的皮肤设置代码如下： asp:Label ru