第12章.ASP.NET的皮肤、主题和母版页

第12章ASP.NET的皮肤、主题和母版页在Web应用程序开发中，一个良好的Web应用程序界面能够让网站的访问者耳目一新，当用户访问Web应用时，网站的界面和布局能够提升访问者对网站的兴趣和继续浏览的耐心。ASP.NET提供了皮肤、主题和模板页的功能增强了网页布局和界面优化的功能，这样即可轻松的实现对网站开发中界面的控制。12.1皮肤和主题皮肤和主题是自ASP.NET2.0就包括的内容，使用皮肤和主题，能够将样式和布局信息分解到单独的文件中，让布局代码和页面代码相分离。主题可以应用到各个站点，当需要更改页面主题时，无需对每个页面进行更改，只需要针对主题代码页进行更改即可。12.1.1CSS简介在任何Web应用程序的开发过程中，CSS（CascadingStyleSheets，级联样式表）都是非常重要的页面布局方法，而且CSS也是最高效的页面布局方法。CSS发展于1994年10月，是为了补救HTML3.2语法中的不足，但是由于当时网络的发展的不足和浏览器的支持率较低，直到1996年底，才正式发表了CSS1.0规格，也正是1996年之后，浏览器才开始正式的支持CSS。在网页布局中，CSS经常被使用于页面样式布局和样式控制。熟练的使用CSS能够让网页布局更加的方便，在页面维护时，也能够减少工作量。通常CSS能够支持三种定义方式，一是直接将样式控制放置于单个HTML元素内，称为内联式；二是在网页的head部分定义样式，称为嵌入式；三是以扩展名为.css文件保存样式，称为外联式。这三种样式适用于不同的场合，内联式适用于对单个标签进行样式控制，这样的好处就在于开发方便，而在维护时，就需要针对每个页面进行修改，非常的不方便；而嵌入式可以控制一个网页的多个样式，当需要对网页样式进行修改时，只需要修改head标签中的style标签即可，不过这样仍然没有让布局代码和页面代码完全分离；而外联式能够将布局代码和页面代码相分离，在维护过程中，能够减少工作量。12.1.2CSS基础CSS能够通过编写样式控制代码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS样式控制，示例代码如下所示。bodydivstyle=font-size:14px;这是一段文字/div/body上述代码使用内联式进行样式控制，并将属性设置为font-size:14px，其意义就在于定义文字的大小为14px；同样，如果需要定义多个属性时，可以同写在一个style属性中，示例代码如下所示。314bodydivstyle=font-size:14px;这是一段文字1/divdivstyle=font-size:14px;font-weight:bolder这是一段文字2/divdivstyle=font-size:14px;font-style:italic这是一段文字3/divdivstyle=font-size:14px;font-variant:small-capsThisisMyFirstCSScode/divdivstyle=font-size:14px;color:red这是一段文字5/div/body上述代码分别定义了相关属性来控制样式，并且都使用内联式定义样式，这些CSS的属性的意义如下所示：字体名称属性（font-family）：该属性设定字体名称，如Arial,、Tahoma,、Courier等，可以定义字体的名称。字体大小属性（font-size）：该属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px。该属性有三个值可选：normal,、italic、oblique、normal是默认值，italic、oblique都是斜体显示。字体粗细属性（font-weight）：该属性常用值是normal和bold，normal是默认值，bold是粗体。字体变量属性（font-variant）：该属性有两个值normal和small-caps，normal是默认值。small-caps表示字体将被显示成大写。字体属性（font）：该属性是各种字体属性的一种快捷的综合写法。字体颜色(color)：该属性用来控制字体颜色。这些属性分别定义了字体属性，如图12-1所示。图12-1CSS样式控制用内联式的方法进行样式控制固然简单，但是在维护过程中却是非常的复杂和难以控制。当需要对页面中的布局进行更改时，则需要对每个页面的每个标签的样式进行更改，这样无疑增大的工作量，当需要对页面进行布局时，可以使用嵌入式的方法进行页面布局，示例代码如下所示。headmetacontent=text/html;charset=utf-8http-equiv=Content-Type/title这是一段文字1/titlestyletype=text/css.font1{font-size:14px;}.font2315{font-size:14px;font-weight:bolder;}.font3{font-size:14px;font-style:italic;}.font4{font-size:14px;font-variant:small-caps;}.font5{font-size:14px;color:red;}/style/head上述代码分别定义了5种字体样式，这些样式都是通过“.”号加样式名称定义的，在定义了字体样式后，就可以在相应的标签中使用class属性来定义样式，示例代码如下所示。bodydivclass=font1这是一段文字1/divdivclass=font2这是一段文字2/divdivclass=font3这是一段文字3/divdivclass=font4ThisisMyFirstCSScode/divdivclass=font5这是一段文字5/div/body其运行后的结果依然同11-12所示，但是这样编写代码在维护起来更加的方便，只需要找到head中的style标签，就可以对样式进行全局控制。虽然嵌入式能够解决单个页面的样式问题，但是这样只能针对单个页面进行样式控制，而在很多网站的开发应用中，大量的页面样式基本相同，只有少数的页面不尽相同，所以使用嵌入式还是有不足，这里就可以使用外联式。使用外联式，必须创建一个.css文件后缀的文件，并在当前页面中添加引用，.css页面代码如下所示。.font1{font-size:14px;}.font2{font-size:14px;font-weight:bolder;}.font3{font-size:14px;font-style:italic;}316.font4{font-size:14px;font-variant:small-caps;}.font5{font-size:14px;color:red;}在.css文件中，只需要定义如head标签中的style标签的内容即可，其编写方法也与内联式和内嵌式相同。在编写完成CSS文件后，需要在使用的页面的head标签中添加引用，示例代码如下所示。linkhref=css.csstype=text/cssrel=stylesheet/link上述代码添加了一个css.css文件的引用，意在告诉浏览器当前页面的一些样式可以在css.css中找到并解析。在使用了外联式后，当前页面的HTML代码就能够变得简单和整洁，示例代码如下所示。htmlxmlns==text/html;charset=utf-8http-equiv=Content-Type/title这是一段文字1/titlelinkhref=css.csstype=text/cssrel=stylesheet/link/headbodydivclass=font1这是一段文字1/divdivclass=font2这是一段文字2/divdivclass=font3这是一段文字3/divdivclass=font4ThisisMyFirstCSScode/divdivclass=font5这是一段文字5/div/body/html使用外联式能够很好的将页面布局的代码和HTML代码相分离，这样不仅能够让多个页面同时使用一个CSS样式表进行样式控制，同样在维护的过程中，只需要修改相应的CSS文件中的样式的属性即可实现该样式在所有的页面中都进行更新的操作。这样无疑是减少了工作量，提高的代码的可维护性。可见外联式能够让样式控制既方便又灵活。12.1.3CSS常用属性CSS不仅能够控制字体的样式，CSS还具有强大的样式控制功能，包括背景，边框，边距等属性，这些属性能够为网页布局提供良好的保障，熟练的使用这些属性能够极大的提高Web应用的友好度。1．CSS背景属性CSS能够描述背景，包括背景颜色、背景图片、背景图片重复方向等属性，这些属性为页面背景的样式控制提供了强大的支持，这些属性包括如下所示：背景颜色属性（background-color）：该属性为HTML元素设定背景颜色。背景图片属性（background-image）：该属性为HTML元素设定背景图片。背景重复属性（background-repeat）：该属性和background-image属性连在一起使用，决定背景图片是否重复。如果只设置background-image属性，没设置background-repeat属性，在缺省状317态下，图片既x轴重复，又y轴重复。背景附着属性（background-attachment）：该属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。背景位置属性（background-position）：该属性和background-image属性连在一起使用，决定了背景图片的最初位置。背景属性（background）：该属性是设置背景相关属性的一种快捷的综合写法。通过这些属性能够为网页背景进行样式控制，示例代码如下所示。body{background-color:green;}上述代码设置了网页的背景颜色为绿色，如图12-2所示。同样，设计人员能够使用background-image属性设置背景图片，并说明图片是否重复，如图12-3所示。图12-2修改背景颜色图12-3背景图片当使用background-image属性设置背景图片时，还需要使用background-repeat属性进行循环判断，示例代码如下所示。body{background-image:url('bg.jpg');background-repeat:repeat-x;}上述代码将bg.jpg作为背景图片，并且以x轴重复，如果不编写background-repeat属性，则默认是即x轴重复也y轴重复。上述代码还可以简写，示例代码如下所示。body{background:greenurl('bg.jpg')repeat-x;}2．CSS边框属性CSS还能够进行边框的样式控制，使用CSS能够灵活的控制边框，边框属性包括有：边框风格属性（border-style）：该属性用来设定上下左右边框的风格。边框宽度属性（border-width）：该属性用来设定上下左右边框的宽度。边框颜色属性（border-color）：该属性设置边框的颜色。318边框属性（border）：该属性是边框属性的一个快捷的综合写法。通过这些属性能够控制边框样式，示例代码如下所示。.mycss{border-bottom:1pxblackdashed;border-top:1pxblackdashed;border-left:1pxblackdashed