ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型

asp.net|css|优化

ASP.NET 2.0 中增加了内建的 MasterPage 的支持,这对我们来说是一个很大的便利。然而经过一段时间的使用,我发现 MasterPage 并不是那么完美:嵌套的 MasterPage 不能支持设计时界面,以及下面要提到的Content Page 中增加 CSS 的问题。

通常,在没有 2.0 之前,我们在页面里要增加一个 CSS 引用的语法如下:

<link rel="stylesheet" href="css/test.css" />
原本是很平常的做法。但是在一个 MasterPage 的子页面中,出现了一个很尴尬的局面,就是:我们该把上述代码放到什么位置?
因为 MasterPage 的具体内容页面中,只能定义一个个的 <asp:Content /> 标签的内容。我们按照通常的做法在 aspx 里面无法对页面的 <header/> 内容进行控制。而这个 <link/> 标签又必须放在 <header/> 内。我试验过在 <asp:Content /> 内部加入这行代码,但是会提示出错的。
同时,我们也无法在 MasterPage 的 <header/> 内部放好一个 ContentPlaceHolder 用于将来放入 CSS 的引用代码。
因此我的做法是定义了一个 helper 类如下:

static public class ControlHelper
{
    static public void AddStyleSheet(Page page, string cssPath)
    {
        HtmlLink link = new HtmlLink();
        link.Href = cssPath;
        link.Attributes["rel"] = "stylesheet";
        link.Attributes["type"] = "text/css";
        page.Header.Controls.Add(link);
    }
}
这样,在具体页面,我们就可以通过如下代码添加 CSS 引用:

protected void Page_Load(object sender, EventArgs e)
{
    ControlHelper.AddStyleSheet(this.Page, "css/projectPage.css");   
}
并且,这个代码支持在具体内容页面,或者一个嵌套的 Master Page 中使用。

说到这里也许有人会问,为什么要把 CSS 分开成这样来加载呢?有必要吗?我把所有页面的 CSS 定义到几个公共 CSS 文件里岂不是很好?

其实,熟悉 web 标准的 HTML 制作的朋友一定知道,在比较完美的状态下,页面的 html 和用于表现的 CSS 应该彻底分离。而我们基于 web 标准的设计,通常是先做出一个 Master Page 中各个框架 div 的定位代码,以及 header,footer 部分的修饰代码。这些是每个内容页面都要用到的,会放在一个统一的 CSS 里面。其他的具体内容页面,每个页面又会有各自不同的内容的布局,修饰样式,因此我把每个具体页面特定的部分放在它自己的 CSS里。这样就形成了一个按照 Master Page 的实现层次(可嵌套),逐层合并的 CSS 模型。其好处是实现了每个 CSS 文件的职责分离,更容易理解和维护。

由于 ASP.NET 2.0 接触不久,以上仅为个人摸索出的一点小经验,如果有更方便的解决办法,请各位朋友多多指教。
 

时间: 2024-09-17 04:03:21

ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型的相关文章

ASP.NET 2.0 中配合Master Page使用的优化CSS模型

asp.net|css|优化 ASP.NET 2.0 中增加了内建的 MasterPage 的支持,这对我们来说是一个很大的便利.然而经过一段时间的使用,我发现 MasterPage 并不是那么完美:嵌套的 MasterPage 不能支持设计时界面,以及下面要提到的Content Page 中增加 CSS 的问题. 通常,在没有 2.0 之前,我们在页面里要增加一个 CSS 引用的语法如下: <link rel="stylesheet" href="css/test.c

在asp.net 2.0中结合母板页使用meta标签(扩展@Page指令)

asp.net 介绍母板页是asp.net 2.0中的一个非常强大的特性,但是它却不能提供一个实现最基础的针对搜索引擎优化的方法.如果你想你的web页被搜索引擎收录并提高排名,那么你就需要在每一个页都指定一个title和meta标记.本文将说明如何扩展你的asp.net页,以使得在使用母板页的时候你可以直接在你内容页的@Page指令中指定你的meta标签的描述和meta标签的关键字 背景当你要针对搜索引擎优化你的web页的时候,设置页的title标签和页的meta描述是其中最重要的因素之一.<t

ASP.Net2.0中自定义控件在page中的注册

asp.net|控件 今天在网上看到ASP.Net 2.0中注册自定义控件的好方法,记录如下. 在web.config 文件中全局注册自定义控件 <system.web>      <pages>        <controls>          <add tagPrefix="rx" assembly="HYLQ.Component" namespace="HYLQ.Component"/> 

ASP.NET 2.0中保证应用程序的安全

asp.net|安全|程序 成员和角色管理器提供程序--现在ASP.NET 2.0包含了内建的成员和角色管理服务.由于这些服务都是提供程序驱动的(provider-driven),你可以轻易地变更它,或者用自定义实现来代替它. 登录控件--新的登录控件为站点的基于认证和授权的UI(例如登录窗体.创建用户窗体.密码取回.已登录用户或角色的定制UI)提供了基本模块.这些控件利用ASP.NET 2.0中的内建的成员和角色服务与站点所定义的用户和角色信息交互操作. 大多数Web应用程序的一个重要的部分是

ASP.NET 2.0 中的代码隐藏和编译

asp.net|编译 代码隐藏 虽然该代码隐藏模型在 2.0 中是不同的,但是它的语法已经进行了少量更改.实际上,该更改十分细微,如果您不仔细查看,甚至都无法注意到它Figure 1 Syntax in ASP.NET 2.0 Default.aspx<%@ Page Language="C#" AutoEventWireup="true"     CodeFile="Default.aspx.cs" Inherits="Msdn

在ASP.NET 2.0中使用页面导航控件

asp.net|控件|页面 几乎每个网站里,为了方便用户在网站中进行页面导航,都少不了使用页面导航控件.有了页面导航的功能,用户可以很方便地在一个复杂的网站中进行页面之间的跳转.在以往的WEB编程中,要写一个好的页面导航功能,并不是那么容易的,也要使用一些技巧.而在asp.net 2.0中,为了方便进行页面导航,新增了一个叫做页面导航控件sitemapdatasource,其中还可以绑定到不同的其他页面控件,比如treeview,menu等,十分灵活,使到能很方便地实现页面导航的不同形式,而且还

在VS 2005和ASP.NET 2.0中处理CSS样式表

本文给读者一个所有基于母板页的网页自动获得样式表的技巧,就是由控件提供的对相对路径调整的支持.可以在母板页里使用这个东西来轻松地引用一个在整个项目里重用的.CSS 样式表文件,不管这个项目是相对于根目录的还是一个子应用. 推荐一个可在ASP.NET 2.0中利用的技巧是,当使用CSS时,使用母板页的功能给你的网站提供统一的UI,使用母板页在一个地方引用所有的样式表,这样,所有基于这个母板页的网页就会自动获得这些样式表. 可利用的一个技巧是由 <head runat="server"

在ASP.NET 2.0中操作数据之三:创建母版页和站点导航_自学过程

导言 通常,用户友好的个性化站点都有着一致的,站点统一的页面布局和导航体系.Asp.net 2.0引入的两个新特性给我们在统一站点的页面布局和站点导航上提供了简单而有效的工具,它们是母板页和站点导航.母板页允许开发者创建统一的站点模板和指定的可编辑区域.这样,aspx页面只需要给模板页中指定的可编辑区域提供填充内容就可以了,所有在母板页中定义的其他标记将出现在所有使用了该母板页的aspx页面中.这种模式允许开发者可以统一的管理和定义站点的页面布局,因此可以容易的得到拥有统一的视觉和感觉的页面并且

ASP.NET 2.0中实现跨页面提交

asp.net|页面 在ASP.NET 1.X 版本中,页面都是提交到自己本身,并不能方便的指定需要提交的目的页面.例如FirstPage.aspx中的button只能提交到FirstPage.aspx,而不能提交到SecondPage.aspx.很多时候,ASP.NET 1.X这样工作方式使我们的开发方式受到不少限制.熟悉ASP/JSP/PHP的朋友大概很不习惯,因为以前经常使用的提交方式突然无法使用,虽然也有解决这个问题的方法(演示Webcast),可是过程太烦琐,不甚方便.令我们高兴的是,