样式、主题与母版页

1、ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第1页第第7章章 样式、主题与母版页样式、主题与母版页本章概述 本章的学习目标主要内容ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第2页本章概述本章概述l开发开发Web应用程序通常需要考虑两个方面：功能应用程序通常需要考虑两个方面：功能和外观。其中，外观考虑的重点是使和外观。其中，外观考虑的重点是使Web站点的站点的美观问题，例如控件的颜色、图像的使用、页面美观问题，例如控件的颜色、图像的使用、页面的布局等。的布局等。ASP.NET提供了一些自定义功能，主提供了一些自定义功能，主要用在要用在ASP.NET程序中

2、的页面、控件的外观及样程序中的页面、控件的外观及样式上，例如可以为某个控件设置字体、背景色和式上，例如可以为某个控件设置字体、背景色和前景色、宽度以及高度等样式，还可以通过合理前景色、宽度以及高度等样式，还可以通过合理定位页面中的元素，为用户呈现出易于使用且视定位页面中的元素，为用户呈现出易于使用且视觉美观的效果。本章将全面介绍觉美观的效果。本章将全面介绍Web应用程序的应用程序的样式控制和页面布局。样式控制和页面布局。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第3页本章的学习目标本章的学习目标l理解理解CSS的概念，掌握的概念，掌握CSS的用法；的用法；l理解布局的概念

3、，掌握理解布局的概念，掌握CSS和和Div布局的方布局的方法；法；l理解主题的概念，掌握主题的创建和引用；理解主题的概念，掌握主题的创建和引用；l理解母版页和内容页的概念，掌握创建母理解母版页和内容页的概念，掌握创建母版页和内容页的方法。版页和内容页的方法。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第4页主要内容主要内容7.1 CSS简介简介7.2 页面布局页面布局7.3 主题主题7.4 母版页母版页7.5 本章小结本章小结ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第5页7.1 CSS简介简介lCSS(Cascading Style Sheet)，即

4、层叠样式表，是，即层叠样式表，是一种标记性语言，用于控制网页样式并允许将样式一种标记性语言，用于控制网页样式并允许将样式信息与网页内容分离。使用信息与网页内容分离。使用 CSS 样式可以非常灵活样式可以非常灵活地控制网页外观，大大减轻实现精确布局定位、维地控制网页外观，大大减轻实现精确布局定位、维护特定字体和样式的工作量。护特定字体和样式的工作量。lCSS中有两种定义样式的方法，分别是内联式和级中有两种定义样式的方法，分别是内联式和级联式，分别对应两类样式：内联式样式和级联式样联式，分别对应两类样式：内联式样式和级联式样式。式。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第

5、6页7.1 CSS简介简介l样式是指样式是指XHTML标记元素在浏览器中呈现的形式，标记元素在浏览器中呈现的形式，如字体的大小、颜色、位置等。在如字体的大小、颜色、位置等。在XHTML中，最容中，最容易、最快速的方法是通过设置标记元素的易、最快速的方法是通过设置标记元素的style属性属性来控制元素的样式，其一般形式如下：来控制元素的样式，其一般形式如下：显示内容显示内容l属性名与属性值之间用冒号属性名与属性值之间用冒号(:)分隔，如果一个样式分隔，如果一个样式中包含多个属性，各属性之间用分号中包含多个属性，各属性之间用分号(;)隔开。例如：隔开。例如：ASP.NET 4.5网站开发实例教程第

6、7章 样式、主题与母版页第7页内联式样式内联式样式l直接将样式控制放在单个直接将样式控制放在单个HTML元素内，称为内联元素内，称为内联式或行内样式。该样式通过式或行内样式。该样式通过style属性控制每个元素属性控制每个元素的外观。这种样式直观但是很繁琐，除非具有相同的外观。这种样式直观但是很繁琐，除非具有相同样式的元素较少，否则很少采用。下面的代码采用样式的元素较少，否则很少采用。下面的代码采用内联式来控制各个元素的样式。内联式来控制各个元素的样式。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第8页 级联式样式级联式样式l在网页的在网页的head部分定义或导入的样式，称

7、为级联式部分定义或导入的样式，称为级联式样式。级联式样式可以使用以下两种方式来实现。样式。级联式样式可以使用以下两种方式来实现。l第一种方式是，在第一种方式是，在head部分直接定义部分直接定义CSS样式，称为内嵌式。样式，称为内嵌式。(1)第二种方式是，在第二种方式是，在head部分通过导入以扩展名为部分通过导入以扩展名为.css的文件的文件来实现来实现CSS样式，称为链接式。样式，称为链接式。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第9页主要内容主要内容7.1 CSS简介简介7.2 页面布局页面布局7.3 主题主题7.4 母版页母版页7.5 本章小结本章小结ASP.

8、NET 4.5网站开发实例教程第7章 样式、主题与母版页第10页7.2 页面布局页面布局l页面水平居中：实现的方法是在页面水平居中：实现的方法是在body的的style样式中样式中设置设置text-align属性的值为属性的值为center即可。如果还希望即可。如果还希望页面的宽度固定，则可以通过设置页面的宽度固定，则可以通过设置div的的width属性属性来实现。来实现。l页面满宽度显示：实现的方法是将页面满宽度显示：实现的方法是将div1的固定宽度的固定宽度设置为百分比即可，这样宽度就会随显示界面的大设置为百分比即可，这样宽度就会随显示界面的大小自动调整。小自动调整。ASP.NET 4.5

9、网站开发实例教程第7章 样式、主题与母版页第11页主要内容主要内容7.1 CSS简介简介7.2 页面布局页面布局7.3 主题主题7.4 母版页母版页7.5 本章小结本章小结ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第12页7.3 主题主题l网站的美观主要涉及页面和控件的样式属性。在网站的美观主要涉及页面和控件的样式属性。在ASP.NET应用程序中，可以利用应用程序中，可以利用CSS控制各元素的控制各元素的样式以及部分服务器控件的样式，但是，有些服务样式以及部分服务器控件的样式，但是，有些服务器控件的属性无法通过器控件的属性无法通过CSS进行控制。为了解决这进行控制。为了解

10、决这个问题，个问题，ASP.NET提供了一种称为提供了一种称为“主题主题”的新方的新方式，它可以保持网站外观的一致性和独立性，同时式，它可以保持网站外观的一致性和独立性，同时使页面的样式控制更加灵活方便，例如动态实现不使页面的样式控制更加灵活方便，例如动态实现不同用户界面的切换等。同用户界面的切换等。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第13页主题概述主题概述l主题是指页面和控件外观属性设置的集合。主题由一个文件主题是指页面和控件外观属性设置的集合。主题由一个文件组构成，包括皮肤文件组构成，包括皮肤文件(扩展名为扩展名为.skin)、级联样式表文件、级联样式表文件(

11、扩扩展名为展名为.css)、图片和其他资源等，一个主题至少包含一个皮、图片和其他资源等，一个主题至少包含一个皮肤文件。肤文件。l主题分为两大类型，一类是应用程序主题，另一类是全局主主题分为两大类型，一类是应用程序主题，另一类是全局主题。题。l应用程序主题是指保存在应用程序主题是指保存在Web应用程序的应用程序的App_Themes文件文件夹下的一个或多个主题文件夹，主题的名称就是文件夹的名夹下的一个或多个主题文件夹，主题的名称就是文件夹的名称。称。l全局主题是指保存在服务器上，根据不同的服务器配置决定全局主题是指保存在服务器上，根据不同的服务器配置决定的，能够对服务器上所有的，能够对服务器上所

12、有Web应用程序起作用的主题文件夹。应用程序起作用的主题文件夹。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第14页皮肤文件皮肤文件l皮肤文件是主题的核心文件，也称为外观文件，专门用于定皮肤文件是主题的核心文件，也称为外观文件，专门用于定义服务器控件的外观。在主题中可以包含一个或多个皮肤文义服务器控件的外观。在主题中可以包含一个或多个皮肤文件，后缀名为件，后缀名为.skin。l在控件皮肤设置中，只能包含主题的属性定义，如样式属性、在控件皮肤设置中，只能包含主题的属性定义，如样式属性、模板属性、数据绑定表达式等，不能包含控件的模板属性、数据绑定表达式等，不能包含控件的ID，如

13、，如Label控件的皮肤设置代码如下：控件的皮肤设置代码如下：l右击右击VS中某一个中某一个“主题主题”文件夹，选择文件夹，选择【添加添加】|【新建项新建项】命令，在弹出对话框中选择命令，在弹出对话框中选择【SkinFile】，并在，并在【名称名称】文文本框中修改皮肤文件名，单击本框中修改皮肤文件名，单击【添加添加】按钮即可添加一个皮按钮即可添加一个皮肤文件。同样的方法可以添加多个皮肤文件。肤文件。同样的方法可以添加多个皮肤文件。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第15页级联样式表文件级联样式表文件l题中可以包含一个或多个题中可以包含一个或多个CSS文件，一旦文件

14、，一旦CSS文件被放在主文件被放在主题中，则应用时无需再在页面中指定题中，则应用时无需再在页面中指定CSS文件链接，而是通文件链接，而是通过设置页面或网站所使用的主题即可，当主题得到应用时，过设置页面或网站所使用的主题即可，当主题得到应用时，主题中的主题中的CSS文件会自动应用到页面中。文件会自动应用到页面中。l右击某一个右击某一个“主题主题1”文件夹，选择文件夹，选择【添加添加】|【新建项新建项】命令，命令，在弹出的对话框中选择在弹出的对话框中选择【SkinFile】，并在，并在【名称名称】文本框文本框中修改样式表文件名，单击中修改样式表文件名，单击【添加添加】按钮即可添加一个样式按钮即可添

15、加一个样式表文件。同样的方法可以添加多个样式表文件。表文件。同样的方法可以添加多个样式表文件。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第16页主要内容主要内容7.1 CSS简介简介7.2 页面布局页面布局7.3 主题主题7.4 母版页母版页7.5 本章小结本章小结ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第17页7.4 母版页母版页l在在Web站点开发中，有很多元素，如站点标题、公共导航以站点开发中，有很多元素，如站点标题、公共导航以及版权信息等，会出现在每一个页面中，这些元素的一致布及版权信息等，会出现在每一个页面中，这些元素的一致布局会让用户知

16、道自己始终是在同一个站点中。虽然这些元素局会让用户知道自己始终是在同一个站点中。虽然这些元素可以通过在可以通过在XHTML中使用包含文件构建，但中使用包含文件构建，但ASP.NET提供提供了更加健壮的母版页技术来实现。了更加健壮的母版页技术来实现。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第18页母版页和内容页的概念母版页和内容页的概念l母版页是用于设置页面外观的模板，是一种特殊的母版页是用于设置页面外观的模板，是一种特殊的ASP.NET网页文件，同样也具有其他网页文件，同样也具有其他ASP.NET文件的功能，如添加控文件的功能，如添加控件、设置样式等，只不过扩展名是件、

17、设置样式等，只不过扩展名是.master。在母版页中，。在母版页中，界面被分为公用区和可编辑区，公用区的设计方法与一般页界面被分为公用区和可编辑区，公用区的设计方法与一般页面的设计方式相同，可编辑区用面的设计方式相同，可编辑区用ContentPlaceHolder控件预控件预留出来。留出来。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第19页母版页和内容页的概念母版页和内容页的概念l引用母版页的引用母版页的.aspx页面称为内容页，在内容页中，母版页页面称为内容页，在内容页中，母版页的的ContentPlaceHolder控件预留的可编辑区会被自动替换为控件预留的可编辑区会

18、被自动替换为Content控件，开发人员只需要在控件，开发人员只需要在Content控件区域中填充内控件区域中填充内容即可，在母版页中定义的其他标记将自动出现在引用该母容即可，在母版页中定义的其他标记将自动出现在引用该母版页的版页的.aspx页面中，母版页的部分以灰色显示，表示不能页面中，母版页的部分以灰色显示，表示不能修改这些内容。修改这些内容。l每一个母版页中可以包含一个或多个内容页。使用母版页可每一个母版页中可以包含一个或多个内容页。使用母版页可以统一管理和定义具有相同布局风格的页面，给网页设计和以统一管理和定义具有相同布局风格的页面，给网页设计和修改带来极大的方便。修改带来极大的方便。

19、ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第20页创建母版页和内容页创建母版页和内容页l(1) 在在VS的的【解决方案资源管理器解决方案资源管理器】中右击网站名称，然后中右击网站名称，然后单击单击【添加添加】|【新建项新建项】命令，然后在弹出对话框中单击命令，然后在弹出对话框中单击【MasterPage】。在。在【名称名称】文本框中输入文本框中输入Master1.Master，如图所示。，如图所示。ASP.NET 4.5网站开发实例教程第7章 样式、主题与母版页第21页创建母版页和内容页创建母版页和内容页l(2) 切换到切换到【设计设计】视图，删除视图，删除Content

20、PlaceHolder控件，控件，然后单击页面中的层，插入一个然后单击页面中的层，插入一个4行行1列的表格，边框设置为列的表格，边框设置为1，表格的，表格的width设置为设置为780像素。像素。l(3)插入表格后，可以将内容添加到母版页，此内容将在所有插入表格后，可以将内容添加到母版页，此内容将在所有页面上显示。页面上显示。l(4) 在在【解决方案资源管理器解决方案资源管理器】中右击中右击Master1.master，然，然后选择后选择【添加添加】|【内容页内容页】命令，新建并打开命令，新建并打开WebForm1.aspx，重命名为，重命名为Index.aspx。ASP.NET 4.5网站开

21、发实例教程第7章 样式、主题与母版页第22页创建母版页和内容页创建母版页和内容页l(5) 切换到切换到【设计设计】视图。母版页中的视图。母版页中的 ContentPlaceHolder 控件在新的内容页中显示为控件在新的内容页中显示为 Content 控件。而其他的母版页控件。而其他的母版页内容显示为浅灰色，表示在编辑内容页时不能更改这些内容。内容显示为浅灰色，表示在编辑内容页时不能更改这些内容。在与母版页上的在与母版页上的ContentPlaceHolder1匹配的匹配的Content 控件控件中，输入主页要显示的内容，然后选择文本，通过从中，输入主页要显示的内容，然后选择文本，通过从【工具工具箱箱】上的上的【块格式块格式】下拉列表中选择下拉列表中选择【标题标题2】，保存页面。，保存页面。l(6) 使用同样的方法创建使用同样的方法创建“关于关于”内容页，名字为内容页，名字为About.aspx。ASP.NET 4.5网站开发实例教程第7章