牛腩新闻发布系统（三）--母版

最新推荐文章于 2019-06-19 21:49:11 发布

原创最新推荐文章于 2019-06-19 21:49:11 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

牛腩新闻发布系统专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用母版页来减少重复代码，提高网页开发效率。通过将不变的部分如头部和底部放入母版页，可以轻松实现多个页面的统一风格，同时减少每个页面的代码量。

在做网页的过程中，总会有很多地方变化不大，但是重复出现。

所以引入母版这个概念就是好，重复的地方写一个母版，然后其他页面只要引用就能实现相同的功能，并且页面的代码也会减少很多。

比如我写一个小demo

这是一个简单的浏览古诗的网页

其中的头部和尾部我都是不想换的，比如head和bottom两个地方是网页复用最多的地方。假设我有很多的网页要做而这些地方又都一样，那我不能重复的建这些吧。这里就用到了面向对象思想——抽象——母版页。把head和bottom两个部分放到母版页中，只要其他页面引用母版页那么相同的功能就可以不用再重复写了。

修改前代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>静夜思</title>
</head>
<body>
    <center>
        <form id="form1" runat="server">
        <p align="center">
            静夜思<br />
            作者：李白<br />
            
            <b>床前明月光，疑是地上霜<br />
        举头望明月，低头思故乡 </b>
        </form>

        <div>
            <img src="../images/20110111-145047.jpg" width ="760" height="" alt="img" /></div>

        <div id="footer">版权归属：copyright &copy;<a href ="http://www.youkuaiyun.com/mayfla" target="_blank">徐玲博</a>
        </div>
    </center>
</body>
</html>

修改后代码：

母版页：

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <center>
        <div>
            <img src="../images/4d0e5ddd695046884732f.jpg" width="760" height="160" alt="img" /></div>
        <div>
            <p>
                <font color="green">古诗欣赏</font></p>
        </div>
        <div id="main">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            版权归属：copyright &copy;<a href="http://www.youkuaiyun.com/mayfla" target="_blank">徐玲博</a>
        </div>
    </center>
    </form>
</body>
</html>

效果：