母版页,实质为完整的.aspx的Web窗体,再窗体中含有几个占位控件。在调用的母版页的子页中,我们可以编辑占位控件的内容,编辑完成后将两个页面进行合并(由IIS完成):
合并效果:
母版页中有Holder_3,但是在子页中没有编辑,,因此合并后最终没有Holder_3控件;
母版页中的普通内容(控件或标签)在合并后不发生改变;
IIS在工作过程中,不会调用母版页,只会调用子页名,但是在调用子页名时,会自动调用母版页;
IIs首先编译子页,然后编译相关母版页并将子页嵌入母版页之中形成合并页面,并将合并完的页面发回浏览器;
金黄色为母版页的层,全部在母版页中进行编辑,红色为母版页为子页提供的占位控件(在子页中进行编辑);
创建母版页:
母版页扩展名为.master,页面结构中多几个控件标签:
注意蓝色区域(占位控件)的作用,子页中在head中会定义一些Css,JavaScript等相关的内容,这些内容定义后会被嵌套在蓝色区域的位置;
在body主体中的占位控件,这个标签之间用于包含在子页中编辑的内容;
接下来为母版页创建一个子页:
选择Web窗体:
注意勾选复选框:
点击添加按钮后,弹出对话框,让你选择添加的母版页:
选择目标母版页,点击确定即可;
新建立的子页中有两个content标签:
注意母版页与子页名字要对应:
母版页:
新建的子页:
母版页的内容我们无法在子页中直接编辑;
注意,我们在母版页中加入<p>第一行</p>标签,在子页中加入如下内容:
运行效果:
子页源文件:
注意:
此时运行页面的地址为:
源代码的地址为:
两个地址均为子页面的地址,看不到模板页被调用;
发现子页中的内容被嵌套在蓝色区域,母版页中的内容也被显示,且看不到母版页被调用的痕迹:
下列为运行页面的源代码:
新的布局:
首先在母版页中进行布局:
此时,页面的布局:
通过Css对页面进行控制:
注意:要对clr进行样式控制,否则运行效果会出现问题;
为了使main中的左右浮动不对下面产生影响,添加清除浮动层:
更正一下ID:
运行效果:
接下来晚上母版页:
预览效果:
点线点到了元素上面,要改正;