html静态页怎么母版页

html静态页怎么母版页,第1张

你好。

哇,居然没有人来回答呀。把页面替换成asp的就行了。

一个方法是

<script src="Template.aspx"></script>

在Template.aspx里面讲母版页的内容输出成js代码就可以了。比如

Response.Clear()

Response.Write("document.write('<div>测试效果看看啊</div>')")

Response.End()

如果我的回答没能帮助您,请继续追问。

先建一个模板页,在模板页上面添加导航条,左侧添加副导航条,副导航条用imagebutton控件,保存下。

1.开发人员能够使用母版页定义某一组页面的呈现样式,甚至能够定义整个网站的页面的呈现样式,Visual Studio 2008 能够轻松的创建母版页文件,对网站的全部或部分页面进行样式控制。单击(添加项),选项,选择(母版页)项目,即可向项目中添加一个母版页。                                                    2.母版页的结构基本同 Web 窗体,但是母版页通常情况下是用来进行页面布局。当 Web 应用程序中的很多页面的布局都相同,甚至中间需要使用的用户控件、自定义控件、样式表都相同时,则可以在一个母版页中定义和编码,对一组页面进行样式控制。编写母版页的方法非常简单,只需要像编写 HTML页面一样就可以编写母版页。在编写网站页面时,首先需要确定通用的结构,并且确定需要使用控件或CSS页面。                                                                                                                                    3.母版页(扩展名是.master),它的使用跟普通的页面一样,可以可视化的设计,也可以编写后置代码。与普通页面不一样的是,它可以包含ContentPlaceHolder控件,ContentPlaceHolder控件就是可以显示内容页面的区域。

母版页是用来是同一系列的网页具有抑制外观的工具,使用ASP.NET母版页可以为我们的应用程序中的页面创建一致的布局。在这种技巧中,网页被分为两类,描述一致性外观的网页称作母版页(Maste Page),引用母版页的网页我们叫做内容页(Content Page)。

主题和皮肤的运用可以使应用程序开发者能够把样式和布局信息存放到一组独立的文件之中,这组文件总称为主题(Theme)。主题可以独立于应用程序的页,为页面,包括控件等提供统一的样式设置。

主题的优点:主题可以使得我们在开发应用程序时可以先不考虑样式,在以后要进行样式应用时,也无需更新或更改代码。主题独立于Web应用程序,对它的维护极为方便。

一、母版页

母版页是ASP.NET控件中非常有特色的一类,可以通过它为整个应用程序提供统一的布局。下面我们来学习一下母版页的相关知识,通过学习掌握母版页的基本创建和使用方法,以及复杂一些的母版页的嵌套使用、母版页同主题的自动切换和调用。

1.认识母版页

首先,我们一进入母版页的学习,一定要时刻记住页面从此分为两部分,即母版页本身和使用某个母版页的内容页。

母版页可以使开发者创建统一的站点模板和指定的可编辑区域。母版页中可编缉区域或通过ContentPlaceHolder控件显示。一个母版页中可以包含一个或多个ContentPlaceHolder控件,该控件在内容页中显示为Content控件。

ContentPlaceHolder控件以外的内容在调用该母版页的页面中显示为灰色,因为在编辑内容页时不能更改这些内容。这样一来,我们在内容页中实际上只是对在母版页中所指定的可编辑区域里根据实际需要填充内容。这也就是说,内容页的内容是来源于两个部分,一个是内容页本身不可编辑的区域,这个区域在我们为内容页指定母版页时其实已经由母版页中的内容来充填了,另一部分内容是内容页自己的,他们都在母版页所划分的可编辑区域内。

打个比喻,我们的餐桌桌面就是我们的网页,那么我们现在要给桌面上摆放一些图案和元素,我们可以选择我们所喜欢的桌布铺在上面,那里面有我们喜欢的图案和元素,比如说蓝色的盒子,白色的小猫。我们把桌布挖个窟窿,这样我们在铺桌布后再往桌面上摆放东西时,其实只能是摆放在窟窿内。注意,我们规定桌布上不能摆放物品,以免弄脏桌布。

1.1 创建母版页

下面我们来具体创建一个母版页。通过创建这个简单的母版页来掌握和理解母版页的基本结构和用法。创建一个母版页其实非常简单,我们只需要按照下面的步骤进行就可以了。

(1)打开VS2008,创建一个新项目。

(2)右击“解决方案资源管理器”中的项目名称,在d出的快捷菜单中单击“添加新项”命令,d出“添加新项”窗口。

(3)在 “添加新项”窗口中选择“母版页”选项,给你要创建的母版页起一个即合适又有意义的名字(记得,对于项目来说,命名对于后期的维护和识别很重要),母版页名字的后缀一定是“.master”,这是规定的。

(4)单击“添加”按钮,然后就完成了母版页的创建,接下来就可以对所添加的母版页进行设计了。设计方法和我们设计页面方法完全相同,因为母版页其实和页面一样,都可以看作是一张白纸。只是母版页中多了ContentPlaceHolder控件,即可编辑区域。

下面我们来看一下通过上述步骤创建的母版页,它包含一个.master的文件和它对应的.master.cs文件(看上去和页面的确是很相似)。我们再来看一下我们创建的.master文件的代码:

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPageTestOne.master.cs"Inherits="MasterPageTestOne"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>无标题页</title>

<asp:ContentPlaceHolderid="head"runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

我们可以看到代码里只是多了两个ContentPlaceHolder控件,这其实是留给内容页的可编辑区域,也就是我们桌布的窟窿。下面我们来设计我们的母版页,往里面放一些东西,也就是开始喷涂我们的桌布。我们添加几个超链接。

<%@MasterLanguage="C#"AutoEventWireup="true"CodeFile="MasterPageTestOne.master.cs"Inherits="MasterPageTestOne"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>无标题页</title>

<asp:ContentPlaceHolderid="head"runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:HyperLinkID="hyperLink1"runat="server">首页</asp:HyperLink>

<asp:HyperLinkID="hyperLink2"runat="server">资源</asp:HyperLink>

<asp:HyperLinkID="hyperLink3"runat="server">作业</asp:HyperLink>

<asp:HyperLinkID="hyperLink4"runat="server">实验</asp:HyperLink>

<asp:HyperLinkID="hyperLink5"runat="server">考核</asp:HyperLink>

<asp:HyperLinkID="hyperLink6"runat="server">交流</asp:HyperLink>

<asp:ContentPlaceHolderid="ContentPlaceHolder1"runat="server">

</asp:ContentPlaceHolder>

</div>

</form>

</body>

</html>

这里我将代码全部粘贴是为了让大家看一下我们在设计内容页即喷涂桌布时元素所在的位置,不能将其放置在窟窿(内容页的可编辑区域)里,这一点是理所当然的,因为那是留给桌面(内容页)的。这里给后面的复杂 *** 作打下一个伏笔,提前唠叨一个事情。我们在母版页里放置的元素,其对应的一些事件的处理我也要放置在母版页里进行响应。我们还需要注意,内容页的里的元素事件的处理要放在内容页里,母版页是管不了那么多的,各顾各,各扫各家门前雪。

我们点击编辑器的设计视图,这时我们已经可以看到我们在页面上放置的元素了,但是我们现在还不能在浏览器里查看它。你可以右键点击解决方案资源管理器中的该母版页,你会发现没有在浏览器中查看这一菜单项,而我们的窗体文件是有的,这是为什么呢?因为我们只是创建了母版页,还没有给它指定内容页。我们在浏览器里能看到的只是内容页,而母版页在被引用时其实只不过是相当于网页里的一个控件而已,你怎么可以在浏览器里去查看一个控件呢?那是看网页的。:)

好的,既然我们到目前为止还看不到它,那么现在我们就来看到它。看到它其实不难,只需要为它指定一个内容页就可以了。具体的步骤是:

(1)右击“解决方案资源管理器”中的项目名称,在d出的快捷菜单中单击“添加新项”命令,d出“添加新项”窗口。

(2)在 “添加新项”窗口中选择“Web窗体”选项,给你要创建的Web窗体起一个即合适又有意义的名字,有一点十分重要,就是在新创建Web窗体的时候,因为我们要引用母版页,所以一定要勾选上窗口右下角的“选择母版页”复选框,然后单击确定即可。

这样,我们就完成了一个内容页的创建,我们现在去浏览器里看看吧,嗯,是的,你可以在浏览器里看到你之前的母版页里的东西了。这是什么意思呢?这就相当于我们在桌面的正上方拜访了摄像机(浏览器),你喷涂桌布的时候很可能是在哪个彩绘工厂,而你只有把喷涂好的桌布拿回家放到桌面上的时候,你才可以通过你的摄像机拍到它。当然,一定要记得,我们的桌布是带窟窿的,为了怕弄脏,喷涂一次很贵的,以后的盘子、碗都得放到桌面上不能放到桌布上。

这里,我要跟大家说另外一个事情,我们在做项目的时候,个人有个人的喜好。我通常是上来就先创建一个Test.aspx页面,用来试验和该写代码的。这对于初步学习的孩子来说是个很好的习惯,我们尽量不要在我们的项目文件里进行尝试,把一切可能的麻烦化解于无形吧,把所有的尝试和实验通通扔到Test.aspx中去,这一点对于初学者是个很好的建议。

我们现在来看看我们添加的内容页里的代码是什么样子的。

<%@PageLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"title="无标题页"%>

<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

</asp:Content>

我们可以看到两件事情:

第一,它和我们创建的普通窗体文件的代码不一样,没有那些html的东西了;

第二,代码少的可怜,只有一个Page指令和两个Content控件了。

这是为什么呢?

第一个问题:html的那些东西哪儿去了?

第二个问题:这仅有的代码是干什么的?

其实,html的那些代码都在母版页里,我们之前说过,碰到母版页,传统的页面就被分为两个部分了,即母版页和内容页,因为它被分为两个部分,所以传统的页面的代码也一定是在这两个类型的文件内部,从而由这两个类型的文件拼接成原来的Web窗体,事实上,的确是这样的。那些html的代码都在母版页里。在内容页里只有通过Page指令所引用的母版页信息,同时,母版页里的ContentPlaceHolder控件(那两个窟窿)在内容页里被转换成了Content控件,其他的所有东西都在母版页里进行说明了,不能重复说明,所以内容页里的代码少的可怜。少不怕,少了更清晰,不是吗?我们可以自己添加我们的东西了。来,我们一起在内容页里添加一些东西吧。我们在设计窗体下随便打几个字吧,我们来看看随便打几个字后的代码:

<%@PageLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="true"CodeFile="Default2.aspx.cs"Inherits="Default2"title="无标题页"%>

<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<p>我是内容页里的,我可不是母版页里的东西。</p>

</asp:Content>

我把这些代码都粘了过来,嗯,我们看明白了,我们现在的 *** 作是在那个窟窿里进行的。那么顶上的那个ID为head的窟窿里怎么不写东西呢?你还记得吗?那个窟窿是在<head></head>里的,不是在<body></body>里的,当然,那个窟窿也是有它的作用的。我们可以在那个窟窿里做一些处理,就相当于我们做网页时有时要在<head></head>里写些东西一样,你需要用的时候就在那里写吧,放心的去涂鸦吧。相信我,没错的。

我们在设计视图下还会发现一件事情,只有在Content控件内是可编辑的,而在其他地方都不可编辑,这又是为什么呢?因为其他的地方都被桌布遮住了,你无法直接触碰到桌面,你非要碰,你所碰的也只可能是那个桌布,即回到内容页里去弄吧。

也许你们会问,我们按照你说的一路做下来,到现在,在浏览器里是看到了这些东西,可是,这些东西的字体什么的都没设置,很难看啊。呵呵,不要着急,我们现在只是在布局。这正是母版页、主题这些东西的好处,它们将这些工作彻底的分开了,我们以后会做的。暂时不要急着去设置,因为你现在进行的设置将会白费力气,你会发现如果你设置了,那么它将给你带来麻烦。这是做网页的一个趋势,也是现在做东西讲究的一个词“代码分离”的道理,其时后面你们在学习系统分析时所说的“解耦合”也跟这个思想差不多。你可以先自己设置一下试试看,没什么的,一切都是练习和学习,无所谓的,多尝试对你只有好处没有坏处。

我们继续学习。我们刚才说过母版页和内容页里的控件的事件响应是各顾各的,那么我们能不能在内容页里去控制母版页里的东西呢?其实是可以的。我们来试一下。(建议你在新建一个Test.master和Test.aspx吧,这对你尝试练习真的很有好处)

我们在母版页里再添加一个东西,添加一个Label吧,具体代码如下:

<asp:LabelID="label1"runat="server"></asp:Label>

你可以会问,你怎么没指定text属性?其实这可以啊,没问题,不需要在一开始显示为什么要指定呢,text只不过是个属性而已,我刚才在放置超链接控件时不是也没指定链接源吗?没问题的。

我们添加了上面的一行代码在母版页里后,接下来我们在内容页里放置一个按钮,我们现在想做这样一件事情,通过点击内容页里的按钮,让母版页里的label的text变为我工作室的名字,我们一点点来做。

我们在内容页里先放置一个按钮。你可以拖拽,也可以直接粘过去我下面的代码,效果是一样的。

<asp:ButtonID="button1"runat="server"Text="OK" />

好的,我们放置了我们的代码,我们现在可以双击这个按钮,为其添加事件代码了。双击后屏幕就会定位到对应的.aspx.cs文件中的如下代码内:

protectedvoidbutton1_Click(object sender, EventArgs e)

{

}

可别小瞧了你的双击,你点两下鼠标很随意,其实,编辑器后面为你做的工作还不只是添加了上面的代码,不信你回头看看你的.aspx文件,你刚才通过手写代码放置的那个button控件对应的代码改变了吧,现在编程了下面的样子,多了个它:onclick="button1_Click",对吧?改编后的那行代码是:

<asp:ButtonID="button1"runat="server"Text="OK"onclick="button1_Click"/>

呵呵,别怕,你又进步了,你发现了吗?如果你不双击,你只需要指定onclick属性,然后自己在.aspx.cs中去创建属性内对应名字的方法就可以玩转button了,你现在已经不需要每一次都只能必须双击按钮来添加事件处理方法了。好了,我们现在编写具体的方法体,别忘了我们要做的事情是什么?去改变母版页的label控件的Text属性。好的,我们做个处理。

protectedvoidbutton1_Click(object sender, EventArgs e)

{

Labellb1 = this.Master.FindControl("label1") asLabel

lb1.Text = "小唐工作室"

}

我们在button1_Click内加入了两行代码,下面我来说一下这两行代码。第二行没什么,我们指定了lb1的Text属性。那么第一行代码呢?第一行代码里我们通过Master类提供的一个方法FindControl来寻找我们指定的控件,因为其返回的是一个通用类型的控件,我们要想利用它,需要把FindControl返回的对象转化为相应的控件类型,通常是什么控件就转成什么类型,这样,我们就可以使用它了。

这里面还有一个问题。我们的lb1对象是在内容页里生命创建的啊,它和母版页里的label1不是一个啊,怎么改变了lb1.Text属性label1.Text就更改了呢?这好像不对吧。记得,我以前给你们讲C#数据类型时谈及到的引用类型的特点,它和值类型数据的区别吗?对,引用类型传递的是地址。这个地方如果还有问题,你就该去复习那节课的东西了,说明你还没过关。现在发现基础的重要性了吗?它看似简单,但是对于你去理解后面的万丈高楼至关重要!

同理,对于“objectsender, EventArgs e”的理解也很重要,我也已经讲过了,你们自己看一下我讲的事件和委托那一节的PPT吧。

好的,我们现在写完方法了,我们通过浏览器看一下效果吧。你的进步很快,只是要记得经常复习,明白只是学习的第一个层次,只是初级阶段而已。下面我们再举一反三,自己练习一下改变母版页里的其他的东西吧。注意引用类型数据和值类型数据的区别,切记!

2.母版页的嵌套

母版页可以嵌套,即让一个母版页引用另外的页作为其母版页。利用嵌套的母版页可以创建组件化的母版页。例如,我们可以通过它来实现一个大型站点的不同的子站点各自内容的子母版页,这些字母版页引用站点母版页,从而呈现出来我们要的效果。

子母版页的后缀也是.master,子母版页也有自己的内容占位符。

添加方法:新建一个母版页,勾选上“选择母版页复选框”,选择一个父母版页后点击确定,这时我们的子母版页已经有了。这时你会发现之前我们创建的母版页和其对应的内容页现在都进来了,而且很奇怪,新创建的母版页里代码变成了如下的样子:

<%@MasterLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="false"CodeFile="MasterPagesun.master.cs"Inherits="MasterPagesun"%>

<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

</asp:Content>

乍一看上去就不是个内容页吗?呵呵,其实,可以这么理解。接下来我们在里面添加几行代码:

<p>子母版页的内容</p>

<asp:ContentPlaceHolderid="ContentPlaceHolder2"runat="server">

</asp:ContentPlaceHolder>

<p>子母版页的内容</p>

添加后代码变成为下面的样子:

<%@MasterLanguage="C#"MasterPageFile="~/MasterPageTestOne.master"AutoEventWireup="false"CodeFile="MasterPagesun.master.cs"Inherits="MasterPagesun"%>

<asp:ContentID="Content1"ContentPlaceHolderID="head"Runat="Server">

</asp:Content>

<asp:ContentID="Content2"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<p>子母版页的内容</p>

<asp:ContentPlaceHolderid="ContentPlaceHolder2"runat="server">

</asp:ContentPlaceHolder>

<p>子母版页的内容</p>

</asp:Content>

现在我们来添加这个子母版页的内容页。方法同上面创建内容也一样,只是选择母版页时选择的是我们新建的子母版页。添加后我们新建的内容页的代码为:

<%@PageLanguage="C#"MasterPageFile="~/MasterPagesun.master"AutoEventWireup="true"CodeFile="Default3.aspx.cs"Inherits="Default3"title="无标题页"%>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder2"Runat="Server">

</asp:Content>

很神奇吧,我们之前写的ContentPlaceHolder2控件现在出现了。一切都没问题,哦,原来是这么回事。现在我们在这个内容页添加一行代码:

<p>子母版页内容页的内容</p>

然后我们运行这个内容页,你看了吗?你已经看到了父母版页和子母版页包括子母版页对应的内容页的全部内容,也许你会问,那么引用父母版页的内容页哪去了呢?我要说的是,那是另一个页面啊,其实父母版页中的内容占位符已经被子母版页和其对应的子母版页的内容页的内容所充填,这跟父母版页的内容页毫无关系了。

到目前为止,你已经可以熟练地使用母版页了。现在我们来讲一点深一点点的东西。母版页不仅能够嵌套,可不可以动态切换呢?是可以的,但是这就得基于母版页的加载机制做文章了。

其实,母版页在加载时是通过page指令MasterPageFile属性来指定加载哪个母版页的。你现在回头看看我们之前创建母版页的内容页时是不是都是在这里指定母版页文件路径的,你看到了,是这样的。嗯,所以我们只能通过这里去做文章了。既然我们可以通过设置“MasterPageFile”属性来指定用哪个母版页,那么我们就可以通过改变它来达到我们要的动态切换的效果,这从理论上说是毫无问题的。但是,有一点点麻烦,这个麻烦就来自页面的生命周期,母版页的加载在页面的生命周期的事件里是在页面初始化之前进行的,还记得页面初始化伴随的事件是哪个吗?对,是Page_Init,那么页面初始化之前对应的事件是哪个呢?对,是Page_PreInit事件。所以,我们只能在“Page_PreInit”事件之中或之前设置MasterPageFile属性。可是,问题来了,在Page_PreInit事件或之前,当前页面包含的对象还没有被生成,是不能访问的,所以,如果想根据当前页面上某个控件的值动态切换母板页是做不到的,那么怎么办呢?我们能够做到的就是根据Session,或者QueryString等在页面打开之前已经赋值的变量来实现动态切换。这些我们暂时放下,了解一下即可。在以后学习的过程中会对Session和QueryString有更多的了解,有兴趣的同学也可以自己先查阅一下相关的资料。

哦,对了,我们创建项目时默认只给我们写了空的Page_Load,我们没看见Page_PreInit,但是我说过,这些事件都是在页面的生命周期里的,事实上你完全可以自己手动去写这个事件加入你想要的处理的,其他页面生命周期里的页面事件也是一样。

小唐

于蛇年三月初八


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6094968.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-14
下一篇 2023-03-14

发表评论

登录后才能评论

评论列表(0条)

保存