实验二 4.5 网站开发基础一、实验名称： 4.5 网站开发基础二、实验内容：1.建立一个描述MyPetShop网站信息的XHML5文件<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><meta name="keywords"content="MyPetShop,XHTML5"/><title></title><style type="text/css">aside{float:left ;width :15%;}section{float:right ;width :85%;}footer{clear :both ;}</style></head><body><header><img alt="MyPetShop"src="F:/web程序设计/Experiment1/Experiment1/2013.gif"/></header><aside><nav style="background-color:#C0C0C0"><a href="HTML5.html">介绍</a><br/><a href="HTML5.html">数据库设计</a></nav></aside><section><h3>MyPetShop</h3><article>MyPetShop是本书提供的一个综合实例，用来展示 4.5网络开发技术。
</article><article><h4>MyPetShop</h4>MyPetShop包括前台商品浏览、用户管理、购物车、订单结算和后台管理等模块。
</article></section><footer style="background-color:#C0C0C0">Copyright 2014 MyPetShop</footer></body></html>2.利用table实现页面布局<%@Page Language="C#"AutoEventWireup="true"CodeFile="TableLayout.aspx.cs"Inherits="TableLayout"%><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><style type="text/css">.auto-style1{width: 100%;}</style></head><body><form id="form1"runat="server"><div><table class="width:100%"><tr><td rowspan="2"><asp:Image ID="ImgLogo"runat="server"ImageUrl="~/2013.gif"Width="160px"/> </td><td sthle="text-align:center;background-color:#99CCFF"><asp:LinkButton ID="lnkbtnDefault"runat="server">首页</asp:LinkButton></td><td sthle="text-align:center;background-color:#99CCFF"><asp:LinkButton ID="lnkbtnReset"runat="server">个性重置</asp:LinkButton> </td><td sthle="text-align:center;background-color:#99CCFF"><asp:LinkButton ID="lnkbtnRegister"runat="server">注册</asp:LinkButton> </td></tr><tr><td colspan="3"style="background-color:#CCFFFF">登录状态</td></tr><tr><td colspan="4"style="background-color:#33CCCC">您的位置：</td></tr></table></div></form></body></html>3.利用div实现页面布局<%@Page Language="C#"AutoEventWireup="true"CodeFile="DivLayout.aspx.cs"Inherits= "DivLayout"%><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title></head><body><form id="form1"runat="server"><div id="top"><div id="logo_navi_stat"><div id="logo"style="float :left ;width :30%"><asp:Image ID="imgLogo"runat="server"ImageUrl="~/Images/logo.gif"/></div><div id="navigation"style="background-color:#99CCFF;height:30px;"><asp:LinkButton ID="lnkbtnDefault"runat="server">首页</asp:LinkButton> | <asp:LinkButton ID="lnkbtnReset"runat="server">个性重置</asp:LinkButton> | <asp:LinkButton ID="lnkbtnRegister"runat="server">注册</asp:LinkButton></div><div id="status"style="background-color:#CCFFFF;height:30px;">登陆状态</div> </div><div id="position"style="background-color :#33CCCC">您的位置：</div></div></form></body></html>4.建立独立的.css文件（1）设置样式table{width :100%;}.navigation{text-align :center ;background-color:#99CCFF;}.status{background-color:#CCFFFF;}.position{background-color:#33CCCC;}#logo{float :left ;width :30%;}#navigation{background-color:#99CCFF;height :30px;}#status{background-color:#CCFFFF;height :30px;}#navigation{background-color:#99CCFF;height :30px;}#position{background-color:#33CCCC;}（2）将样式应用于表格布局<%@Page Language="C#"AutoEventWireup="true"CodeFile="TableCSS.aspx.cs"Inherits=" TableCSS"%><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><link href="Styles/TableDiv.css"rel="stylesheet"type="text/css"/><style type="text/css">.auto-style2{width: 427px;}.auto-style4{text-align : center;background-color: #99CCFF;height: 61px;}.auto-style7{background-color: #CCFFFF;height: 29px;}</style></head><body><form id="form1"runat="server"><div><table class="width:100%"><tr><td rowspan="2"class="auto-style2"><asp:Image ID="ImgLogo"runat="server"ImageUrl="~/2013.gif"Width="160px"/></td><td class="auto-style4"><asp:LinkButton ID="lnkbtnDefault"runat="server">首页</asp:LinkButton></td><td class="navigation"><asp:LinkButton ID="lnkbtnReset"runat="server">个性重置</asp:LinkButton></td><td class="navigation"><asp:LinkButton ID="lnkbtnRegister"runat="server">注册</asp:LinkButton></td></tr><tr><td colspan="3"class="auto-style7">登录状态</td></tr><tr><td colspan="4"class="position">您的位置：</td></tr></table></div></form></body></html>（3）将样式用于div布局<%@Page Language="C#"AutoEventWireup="true"CodeFile="DivCss.aspx.cs"Inherits="Di vCss"%><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>结合div层和.css文件进行页面布局</title><link href="Styles/TableDiv.css"rel="stylesheet"type="text/css"/></head><body><form id="form1"runat="server"><div id="top"><div id="logo_navi_stat"><div id="logo"><asp:Image ID="imgLogo"runat="server"ImageUrl="~/Images/logo.gif"/></div><div id="navigation"><asp:LinkButton ID="lnkbtnDefault"runat="server">首页</asp:LinkButton> | <asp:LinkButton ID="lnkbtnReset"runat="server">个性重置</asp:LinkButton> | <asp:LinkButton ID="lnkbtnRegister"runat="server">注册</asp:LinkButton></div><div id="status">登陆状态</div></div><div id="position">您的位置：</div></div></form></body></html>5.利用JavaScript关闭当前窗口<html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title></head><body><form id="form1"runat="server"><div><asp:Button ID="btnClose"runat="server"OnClientClick="javascript:window.close();return false;"Text="Button"/><a href="/"onclick="javascript:window.close();return false;">关闭</a></div></form></body></html>6.利用jQuery实现一个时间数据来源于客户端的时钟<%@Page Language="C#"AutoEventWireup="true"CodeFile="Timer.aspx.cs"Inherits="Tim er"%><!DOCTYPE html><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title></title><script src="F:/web程序设计/Experiment1/ExSite/Scripts/jquery-3.2.1.min.js"></script><script>function refresh(){//设置id属性值为date的元素的呈现内容为客户端的系统时间$("#date").text((new Date()).toString());setTimeout("refresh()", 1000);//过1秒后重复调用自定义的refresh（）函数}</script></head><body onload="refresh()"><form id="form1"runat="server"><div id="date"></div></form></body></html>7.建立能描述书籍简易信息的XML文件<?xml version="1.0"encoding="utf-8" ?><Books><Book ID="001"><BookName>Web程序设计——实用网站开发（第2版）</BookName><Author>沈世根;汪承焱;许小东</Author><Price>39</Price></Book><Book ID="100"><BookName>高级编程</BookName><Author>张立</Author><Price>156</Price></Book><Book ID="106"><BookName>基于C#精通LINQ数据访问</BookName><Author>毛一中</Author><Price>39</Price></Book></Books>三、习题1.比较table和div两种布局方式，体会在什么情况下适合使用table 布局、什么情况下适合使用div布局以及什么情况下适合使用table 和div相互结合进行布局。