母版頁的使用(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"-->

顯示效果

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章