母版页实验报告
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
肇庆学院计算机学院 Asp.net动态网站开发 实验报告
实验名 称 班 级 姓 日 实验地 点 一、实验目的： 主页和母版页实验 名 期 学 号 成 绩
掌握创建和应用母板页 二、实验环境： Windows 系列操作系统的计算机，软件visual studio 2010。
三、实验内容、步骤、实验结果与分析：
} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".nav ul li").hover(function(){ $(this).addClass("hover_bg"); $(this).children("div").show(); },function(){ $(this).removeClass("hover_bg"); $(this).children("div").hide(); })
<div class="nav"> <h2><a>商¦¨¬品¡¤分¤?类¤¨¤</a></h2> <ul> <li> <a>A</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>B</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>C</a> <div class="Secon_Dary">
<p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>D</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> </ul> </div> </td> <td class="style3" rowspan="4"> </td> <td> <textarea id="TextArea1" cols="20" name="S1"></textarea></td> </tr> <tr>
包含ContentPlaceHolder控件的母板页
这是母版页
母版页的代码
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
width: 363px; } .style4 { height: 35px; } </style> </head> <body> </body> </html> <!--nav--> <table class="style1"> <tr> <td colspan="3"> <div id="navcontainer"> <ul id="navlist" style="background-color: #008000; color: #FFFFFF; height: 17px;"> <li><a href="http://www.68design.net" target="_blank" id="current">商¦¨¬ 城?</a></li> <li><a href="#">团ª?购o</a></li> <li><a href="#">特¬?卖?会¨¢</a></li> <li><a href="#">积y分¤?兑¨°换?</a></li> <li><a href="#">现?金e卷¨ª</a></li> <li><a href="#">评¨¤价?</a></li> <li><a href="#">咨Á¨¦询¡¥</a></li> </ul> </div> <br /> </td> </tr> <tr> <td class="style2">
在母版页里添加内容页
这是继承了母版页的内容页，加了一些东西上去。
内容页的代码
运行结果
上方的导航条，鼠标点击过去会发生颜色跟形状的变化
鼠标定位到左边的导航条的时候会出现二级导航条。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无T标À¨º题¬a文?档̦Ì</title> <style type="text/css"> .nav{float:left;position:relative;width:253px;} h2,ul,p{margin:0;padding:0;text-align:center;} h2{font-weight:400;font-size:100%;background:#9B203F;borderbottom:solid 1px #500C1B;} h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;} ul{font-size:0;background:#9B203F;padding:0 0 40px; height: 104px; } ul li{list-style-type:none;padding-bottom:5px;color:#fff;fontsize:14px;padding:0 20px;height:34px;line-height:34px;position:relative;} ul li a{border-bottom:dashed 1px #E67A92;display:block;width:93px; margin:0 auto; } ul li.hover_bg{background:#C30431;} .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;pad bottom:30px;display:none;} .Secon_Dary p{padding:0 20px;} .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;borderbottom:dashed 1px #E67A92;} a{cursor:pointer;} .style1 { width: 100%; height: 262px;
}) </script> </head> <body> <form id="form1" runat="server"> <style> body{font-family:Arial, Helvetica, sans-serif;font-size:12px;textalign:center} #navcontainer{width:769px; height: 28px; } #navlist { margin: 0; padding: 0ห้องสมุดไป่ตู้0 20px 20px; border-bottom: 1px solid #444; } #navlist ul, #navlist li
见附页
5、 实验总结 熟练掌握了母板页和内容页的创建和应用。
实现步骤：
（1） 在VS2005中，新建文件系统网站WebSite。在解决方案资源 管理器中，右击网站根目录，选择“添加新项”命令，打开图 7-2所示的“添加新项”对话框。
图7-2添加新的母板页 （2） 在上图图中，单击母版页，保留默认文件名和语言，选 中“将代码放在单独的文件中”单击“添加”按钮，此时将打开 新的母板页，其中包含一个ContentPlaceHolder控件，见下 图
{ margin: 0; padding: 0; display: inline; list-style-type: none; } #navlist a:link, #navlist a:visited { float: left; line-height: 14px; margin: 0 10px 4px 0px; text-decoration: none; color: #999; } #navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 1px solid #76B41C; padding-bottom: 5px; background: transparent; color: #fff; } #navlist a:hover { color: #fff; } .style2 { width: 259px; } #TextArea1 { width: 209px; height: 187px; } .style3 {
<td class="style2" rowspan="3"> <asp:Image ID="Image1" runat="server" Height="119px" ImageUrl="~/get (9).jpg" Width="229px" /> </td> <td> <asp:Label ID="Label1" runat="server" Text="友®?情¨¦链¢¡ä接 ¨®"></asp:Label> </td> </tr> <tr> <td> <asp:LinkButton ID="LinkButton1" runat="server"><a href="http://www.baidu.com/">百㨴度¨¨</a></asp:LinkButton> </td> </tr> <tr> <td class="style4"> <asp:LinkButton ID="LinkButton3" runat="server"><a href="http://www.sina.com.cn/">新?浪¤?</a></asp:LinkButton> </td> </tr> </table> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> <asp:Image ID="Image2" runat="server" ImageUrl="~/lvse33.jpg" /> </asp:ContentPlaceHolder> </div> </form> </body> </html>
实验名 称 班 级 姓 日 实验地 点 一、实验目的： 主页和母版页实验 名 期 学 号 成 绩
掌握创建和应用母板页 二、实验环境： Windows 系列操作系统的计算机，软件visual studio 2010。
三、实验内容、步骤、实验结果与分析：
} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".nav ul li").hover(function(){ $(this).addClass("hover_bg"); $(this).children("div").show(); },function(){ $(this).removeClass("hover_bg"); $(this).children("div").hide(); })
<div class="nav"> <h2><a>商¦¨¬品¡¤分¤?类¤¨¤</a></h2> <ul> <li> <a>A</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>B</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>C</a> <div class="Secon_Dary">
<p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> <li> <a>D</a> <div class="Secon_Dary"> <p> <a>A</a> <a>B</a> <a>C</a> <a>D</a> <a>E</a> <a>F</a> <a>G</a> <a>H</a> </p> </div> </li> </ul> </div> </td> <td class="style3" rowspan="4"> </td> <td> <textarea id="TextArea1" cols="20" name="S1"></textarea></td> </tr> <tr>
包含ContentPlaceHolder控件的母板页
这是母版页
母版页的代码
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
width: 363px; } .style4 { height: 35px; } </style> </head> <body> </body> </html> <!--nav--> <table class="style1"> <tr> <td colspan="3"> <div id="navcontainer"> <ul id="navlist" style="background-color: #008000; color: #FFFFFF; height: 17px;"> <li><a href="http://www.68design.net" target="_blank" id="current">商¦¨¬ 城?</a></li> <li><a href="#">团ª?购o</a></li> <li><a href="#">特¬?卖?会¨¢</a></li> <li><a href="#">积y分¤?兑¨°换?</a></li> <li><a href="#">现?金e卷¨ª</a></li> <li><a href="#">评¨¤价?</a></li> <li><a href="#">咨Á¨¦询¡¥</a></li> </ul> </div> <br /> </td> </tr> <tr> <td class="style2">
在母版页里添加内容页
这是继承了母版页的内容页，加了一些东西上去。
内容页的代码
运行结果
上方的导航条，鼠标点击过去会发生颜色跟形状的变化
鼠标定位到左边的导航条的时候会出现二级导航条。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无T标À¨º题¬a文?档̦Ì</title> <style type="text/css"> .nav{float:left;position:relative;width:253px;} h2,ul,p{margin:0;padding:0;text-align:center;} h2{font-weight:400;font-size:100%;background:#9B203F;borderbottom:solid 1px #500C1B;} h2 a{list-style-type:none;height:37px;color:#fff;line-height:37px;} ul{font-size:0;background:#9B203F;padding:0 0 40px; height: 104px; } ul li{list-style-type:none;padding-bottom:5px;color:#fff;fontsize:14px;padding:0 20px;height:34px;line-height:34px;position:relative;} ul li a{border-bottom:dashed 1px #E67A92;display:block;width:93px; margin:0 auto; } ul li.hover_bg{background:#C30431;} .Secon_Dary{width:253px;background:#C30431;position:absolute;right:-253px;top:0;pad bottom:30px;display:none;} .Secon_Dary p{padding:0 20px;} .Secon_Dary a{display:block;height:34px;line-height:34px;color:#fff;borderbottom:dashed 1px #E67A92;} a{cursor:pointer;} .style1 { width: 100%; height: 262px;
}) </script> </head> <body> <form id="form1" runat="server"> <style> body{font-family:Arial, Helvetica, sans-serif;font-size:12px;textalign:center} #navcontainer{width:769px; height: 28px; } #navlist { margin: 0; padding: 0ห้องสมุดไป่ตู้0 20px 20px; border-bottom: 1px solid #444; } #navlist ul, #navlist li
见附页
5、 实验总结 熟练掌握了母板页和内容页的创建和应用。
实现步骤：
（1） 在VS2005中，新建文件系统网站WebSite。在解决方案资源 管理器中，右击网站根目录，选择“添加新项”命令，打开图 7-2所示的“添加新项”对话框。
图7-2添加新的母板页 （2） 在上图图中，单击母版页，保留默认文件名和语言，选 中“将代码放在单独的文件中”单击“添加”按钮，此时将打开 新的母板页，其中包含一个ContentPlaceHolder控件，见下 图
{ margin: 0; padding: 0; display: inline; list-style-type: none; } #navlist a:link, #navlist a:visited { float: left; line-height: 14px; margin: 0 10px 4px 0px; text-decoration: none; color: #999; } #navlist a:link#current, #navlist a:visited#current, #navlist a:hover { border-bottom: 1px solid #76B41C; padding-bottom: 5px; background: transparent; color: #fff; } #navlist a:hover { color: #fff; } .style2 { width: 259px; } #TextArea1 { width: 209px; height: 187px; } .style3 {
<td class="style2" rowspan="3"> <asp:Image ID="Image1" runat="server" Height="119px" ImageUrl="~/get (9).jpg" Width="229px" /> </td> <td> <asp:Label ID="Label1" runat="server" Text="友®?情¨¦链¢¡ä接 ¨®"></asp:Label> </td> </tr> <tr> <td> <asp:LinkButton ID="LinkButton1" runat="server"><a href="http://www.baidu.com/">百㨴度¨¨</a></asp:LinkButton> </td> </tr> <tr> <td class="style4"> <asp:LinkButton ID="LinkButton3" runat="server"><a href="http://www.sina.com.cn/">新?浪¤?</a></asp:LinkButton> </td> </tr> </table> <div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> <asp:Image ID="Image2" runat="server" ImageUrl="~/lvse33.jpg" /> </asp:ContentPlaceHolder> </div> </form> </body> </html>