ASP.NET的皮肤、主题和母版页的使用资源-CSDN文库

4星 · 超过85%的资源需积分: 9 179 浏览量 2010-08-27 15:20:40 上传评论收藏 1.26MB DOC 举报

ASP.NET的皮肤、主题和母版页是构建高效、一致且易于维护的Web应用程序界面的重要工具。本章将深入探讨这三个概念以及它们如何协同工作，以实现更好的用户体验和开发效率。 12.1 皮肤和主题皮肤和主题是ASP.NET自2.0版本引入的功能，主要用于分离样式和布局信息，使页面代码更整洁。皮肤允许开发者定义控件的外观，如按钮、文本框等，而主题则是一组皮肤的集合，可以应用于整个网站。这样，当需要改变网站的视觉风格时，只需更改主题配置，而不是逐个修改页面。 12.1.1 CSS简介 CSS（层叠样式表）是网页设计的核心技术，用于控制网页元素的样式、布局和呈现。它始于1994年，随着浏览器的兼容性提高，逐渐成为标准。CSS有三种定义方式： 1. 内联式：将样式直接放在HTML元素内部，方便开发但不利于维护。 2. 嵌入式：在HTML文档<head>部分定义样式，可以控制整个页面，但仍未完全分离样式和内容。 3. 外联式：创建独立的.css文件，实现样式与内容的分离，便于管理和维护。 12.1.2 CSS基础 CSS通过样式规则控制元素的外观。例如，可以使用`style`属性在HTML元素内直接指定样式，如下所示： ```html <div style="font-size:14px;">这是一段文字</div> ``` 上述代码设置了文字的字体大小为14px。CSS还提供了多种属性来调整元素的样式，如： - `font-family`：定义字体类型。 - `font-size`：设置字体大小，常用单位有pt和px。 - `font-style`：设定字体样式，如normal、italic和oblique。 - `font-weight`：控制字体粗细，如normal和bold。 - `font-variant`：切换小写字母显示为大写，如small-caps。 - `font`：组合以上属性的简写形式。 - `color`：设定字体颜色。通过组合这些属性，可以创建复杂的样式效果，如图12-1所示。 12.2 母版页母版页（Master Page）是ASP.NET提供的一种结构化页面布局的方法。它允许开发者创建一个共享的布局模板，所有子页面都可以继承这个模板。母版页定义了全局导航、页脚和其他常见元素，而内容页则专注于特定的页面内容。这样，当需要更新全局布局时，只需修改母版页，所有关联的子页面都会自动更新。总结来说，ASP.NET的皮肤、主题和母版页是Web应用程序界面设计的关键组成部分。皮肤和主题提供了统一的外观和感觉，而母版页则确保了页面布局的一致性。通过有效利用这些工具，开发者可以创建出既美观又易于维护的Web应用程序。在实际开发中，熟练掌握CSS和这些ASP.NET特性，将大大提升开发效率和用户体验。

资源推荐

资源详情

资源评论

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

在 Web 应用程序开发中，一个良好的 Web 应用程序界面能够让网站的访问者耳目一新，当用户访

问 Web 应用时，网站的界面和布局能够提升访问者对网站的兴趣和继续浏览的耐心。 ASP.NET 提供了

皮肤、主题和模板页的功能增强了网页布局和界面优化的功能，这样即可轻松的实现对网站开发中界

面的控制。

12.1 皮肤和主题

皮肤和主题是自 ASP.NET 2.0 就包括的内容，使用皮肤和主题，能够将样式和布局信息分解到单

独的文件中，让布局代码和页面代码相分离。主题可以应用到各个站点，当需要更改页面主题时，无

需对每个页面进行更改，只需要针对主题代码页进行更改即可。

12.1.1 CSS 简介

在任何 Web 应用程序的开发过程中，CSS（Cascading Style Sheets，级联样式表）都是非常重要的

页面布局方法，而且 CSS 也是最高效的页面布局方法。CSS 发展于 1994 年 10 月，是为了补救 HTML

3.2 语法中的不足，但是由于当时网络的发展的不足和浏览器的支持率较低，直到 1996 年底，才正式

发表了 CSS 1.0 规格，也正是 1996 年之后，浏览器才开始正式的支持 CSS。

在网页布局中，CSS 经常被使用于页面样式布局和样式控制。熟练的使用 CSS 能够让网页布局更

加的方便，在页面维护时，也能够减少工作量。通常 CSS 能够支持三种定义方式，一是直接将样式控

制放置于单个 HTML 元素内，称为内联式；二是在网页的 head 部分定义样式，称为嵌入式；三是以扩

展名为.css 文件保存样式，称为外联式。

这三种样式适用于不同的场合，内联式适用于对单个标签进行样式控制，这样的好处就在于开发

方便，而在维护时，就需要针对每个页面进行修改，非常的不方便；而嵌入式可以控制一个网页的多

个样式，当需要对网页样式进行修改时，只需要修改 head 标签中的 style 标签即可，不过这样仍然没有

让布局代码和页面代码完全分离；而外联式能够将布局代码和页面代码相分离，在维护过程中，能够

减少工作量。

12.1.2 CSS 基础

CSS 能够通过编写样式控制代码来进行页面布局，在编写相应的 HTML 标签时，可以通过 Style 属

性进行 CSS 样式控制，示例代码如下所示。

<body>

<div style="font-size:14px;">这是一段文字</div>

</body>

上述代码使用内联式进行样式控制，并将属性设置为 font-size:14px，其意义就在于定义文字的大

小为 14px；同样，如果需要定义多个属性时，可以同写在一个 style 属性中，示例代码如下所示。

<body>

<div style="font-size:14px;">这是一段文字 1</div>

<div style="font-size:14px; font-weight:bolder">这是一段文字 2</div>

<div style="font-size:14px; font-style:italic">这是一段文字 3</div>

<div style="font-size:14px; font-variant:small-caps">This is My First CSS code</div>

<div style="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-1 CSS 样式控制

用内联式的方法进行样式控制固然简单，但是在维护过程中却是非常的复杂和难以控制。当需要

对页面中的布局进行更改时，则需要对每个页面的每个标签的样式进行更改，这样无疑增大的工作量，

当需要对页面进行布局时，可以使用嵌入式的方法进行页面布局，示例代码如下所示。

<head>

<title>这是一段文字 1</title>

.font1

{

font-size:14px;

314

font-style:italic;

}

.font4

{

font-size:14px;

font-variant:small-caps;

}

.font5

{

font-size:14px;

color:red;

}

在.css 文件中，只需要定义如 head 标签中的 style 标签的内容即可，其编写方法也与内联式和内嵌

式相同。在编写完成 CSS 文件后，需要在使用的页面的 head 标签中添加引用，示例代码如下所示。

上述代码添加了一个 css.css 文件的引用，意在告诉浏览器当前页面的一些样式可以在 css.css 中找

到并解析。在使用了外联式后，当前页面的 HTML 代码就能够变得简单和整洁，示例代码如下所示。

<head>

<title>这是一段文字 1</title>

</head>

<body>

<div class="font1">这是一段文字 1</div>

<div class="font2">这是一段文字 2</div>

<div class="font3">这是一段文字 3</div>

<div class="font4">This is My First CSS code</div>

<div class="font5">这是一段文字 5</div>

</body>

</html>

使用外联式能够很好的将页面布局的代码和 HTML 代码相分离，这样不仅能够让多个页面同时使

用一个 CSS 样式表进行样式控制，同样在维护的过程中，只需要修改相应的 CSS 文件中的样式的属性

即可实现该样式在所有的页面中都进行更新的操作。这样无疑是减少了工作量，提高的代码的可维护

性。可见外联式能够让样式控制既方便又灵活。

12.1.3 CSS 常用属性

CSS 不仅能够控制字体的样式，CSS 还具有强大的样式控制功能，包括背景，边框，边距等属性，

这些属性能够为网页布局提供良好的保障，熟练的使用这些属性能够极大的提高 Web 应用的友好度。

1．CSS 背景属性

CSS 能够描述背景，包括背景颜色、背景图片、背景图片重复方向等属性，这些属性为页面背景

的样式控制提供了强大的支持，这些属性包括如下所示：

 背景颜色属性（background-color）：该属性为 HTML 元素设定背景颜色。

 背景图片属性（background-image）：该属性为 HTML 元素设定背景图片。

 背景重复属性（background-repeat）：该属性和 background-image 属性连在一起使用，决定背

316

剩余28页未读，继续阅读

评论收藏

内容反馈

zwq4096

2012-12-13

ASP 开发大全原书第十二章，内容一般，只是皮毛的看看就够了，实际意义不大！
yuyue5945

2012-11-29

内容很好,正是我需要的！！！
yuxing847177227

2013-05-14

对我来说还可以，用得着
tangchiyou

2012-12-16

不好啊，很多ASP.net的书基本上有的内容，加上看上去会比较复杂。。。
二十里屯

2012-07-10

内容很好，就是我需要的。特别是对于初学者。

前往

页

super1021love

粉丝: 21
资源: 3

ASP.NET的皮肤、主题和母版页的使用

ASP.NET主题、母版页和站点导航

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

ASP.NET样式、主题和母版

第8章 ASP.NET中的样式，主题和母版页

ASP.NET数据库网站设计教程（C#版）[孙士保]第5章 ASP.NET主题、母版页和站点导航.ppt

ASP.net母版页的使用

ASP.Net程序设计(新) 母版、主题和皮肤.doc

ASP.NET的母版页技术

ASP.NET主题和皮肤的使用方法

实验五 1、3ASP.NET主题、母版页和站点导航.doc

演练3：创建和使用 ASP.NET 母版页

ASP.NET 关于母版的设计

ASP.NET母版页基础知识介绍

ASP.NET母版页

APS.NET主题母版页内容页

ASP.net皮肤主题和模板页

asp.net 母版页的使用

主题和母版页

asp.net母版页多种样式.zip

asp.net母版页如何使用

asp 主题与母版页

.NET皮肤与主题

ASP.NET 2.0程序设计案例教程（课件）

母版页的使用

母版页的使用母版页的使用

ASP.NET教程 ASP.NET教程

ASP.NET从入门到精通

网站动态更换皮肤(Asp.net)

最新资源