母版页的使用(shtml)

使用母版页

1.网页很多地方长得一样,也有不一样的地方,Webform的母版页(MasterPage),使用母版页的窗体。
2.母版页太笨重。(加载母版页,然后进行多次填坑,麻烦!)
3.母版页使用ContentPlaceHolder挖坑,“使用母版页的窗体”用Content填坑

案例—1

新建一个母版页peo.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="peo.master.cs" Inherits="wj.peo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
    <asp:ContentPlaceHolder ID="contentplaceholder2" runat="server">

    </asp:ContentPlaceHolder>
</body>
</html>

新建使用母版页的Web窗体

<%@ Page Title="" Language="C#" MasterPageFile="~/peo.Master" AutoEventWireup="true" CodeBehind="muban1`.aspx.cs" Inherits="wj.muban1_" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <!--这里在模板页的第一个位置写内容-->
    <script type="text/javascript">

        alert("欢迎进入本网页!");
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    姓名:<input type="text" id="name"/>
    <br />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="contentplaceholder2" runat="server">
   北京|如鹏|传智|博客
</asp:Content>

推荐使用shtml轻量级母版页

4.Shtml:ServerSideInclude(SSI),主流web服务器(iis、apache等)都支持。效率高,不需要经过asp.net处理,轻量级。
<!--#include file="info.htm"-->
****服务器拼接****好页面之后就直接发送到了浏览器端了。而且服务器用了缓存技术,将拼接好的页面,缓存一段时,加快了访问时间。

案例—shtml

新建一个头html head.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    关于我们|如鹏|上海|天津|河南
    <br />

新建一个尾html foot.html


<br />
友情链接|荣誉|地址|北京大学|上海大学

</body>
</html>
新建一个1.shtml调用“头”,“尾”文件,在服务器中拼接
<!--#include file="head.html"-->
<br />
<br />
我是shtml的主要部分
<br />
<br />
<!--#include file="foot.html"-->

显示效果

这里写图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

静心物语313

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值