信息13126实验2.docx

信息13126实验2.docx

《信息13126实验2.docx》由会员分享，可在线阅读，更多相关《信息13126实验2.docx（16页珍藏版）》请在冰点文库上搜索。

信息13126实验2

实验2ASP.NET4.5网站开发基础实验

成绩

专业班级信息131班学号姓名报告日期2015.10.23

实验类型：

●验证性实验○综合性实验○设计性实验

实验目的：

（1）熟悉常用的XHTML5元素。

（2）掌握利用table、div和CSS实现页面布局的方法。

（3）掌握CSS控制页面样式的方法。

（4）了解JavaScript常识。

（5）熟悉jQuery的使用方法。

（6）理解XML文件结构，掌握XML文件建立的方法。

实验内容及要求：

1.建立一个描述MyPetShop网站信息的XHTML5文件

2.利用table实现页面布局

3.利用div实现页面布局

4.建立独立的.css文件

5.利用JavaScript关闭当前窗口

6.利用jQuery实现一个时间数据来源于客户端的时钟

7.建立能描述书籍简易信息的XML文件

每小题实验要求详见实验指导书实验2（page9-19）

实验原理XHTML、CSS、JavaScript、JQuery基本语法知识

实验思考思考并比较table和div两种布局的异同。

实验报告书写要求：

根据实验情况和结果撰写并递交实验报告。

实验报告应当有设计过程及实验步骤的文字说明，运行调试记录，运行结果截图。

实验总结（学会了......;掌握了......;训练了......;发现了......;今后学习中......有待提高。

）

电子报告word文件命名规则：

专业班级-学号后两位-实验X-姓名.doc,如信息123班学号为************的郭海涛同学实验2报告word文件命名则应是：

信息123-15-实验2-郭海涛.doc,其中.doc是Word文件扩展名。

特别提醒：

电子报告文件命名不规范的报告将不予接收。

参考程序

实验内容

1.建立一个描述MyPetShop网站信息的XHTML5文件

先在Experiment解决方案新建一个ExSite网站，再在该网站根文件下建立一个Ex2子文件，在Ex2中添加一个HTML页HTML5.html，在该页中输入参看程序1，在浏览器上浏览建立的HTML5.html

2.利用table实现页面布局，建立一个web窗体TableLayout.aspx。

在浏览器中浏览。

图2TableLayout.aspx浏览效果截图

3.利用div实现页面布局，建立一个web窗体DivLayout.aspx。

在浏览器中打开效果如图。

4.建立两个独立的.css文件（TableDiv.aspx和DivCss.aspx），在ExSite网站根文件夹下建立一个Style文件夹，再在Style文件夹中添加一个样式表文件TableDiv.aspx,在实验内容1中的Ex2中建立一个web窗体DivCss.aspx。

在浏览器中浏览效果如图。

5.利用JavaScript关闭当前窗口，在Ex2中添加一个web窗体CloseWindow.aspx,在浏览器中浏览效果如图。

6.利用jQuery实现一个时间数据来源于客户端的时钟，选择ExSite网站，在选择“网站”-“管理NuGet程序包”命令，在呈现的窗口中选择jQuery并安装。

安装完成后，在ExSite网站跟文件夹下的Script文件夹中将自动添加由jQuery提供的最新的JavaScript库，再在Ex2中添加一个web窗体Timer.aspx，在浏览器中浏览效果如图。

7.建立描述书籍简易信息的XML文件Book.xml，在浏览器中浏览效果如图。

实验总结：

通过这次试验，我学会了div和CSS实现页面布局方法，掌握XML文件建立的方法，训练了网站的建立及运行的能力，发现了自己在学习实际操作过程中有很多不足之处，在今后的学习中一定会加倍努力，提高自己，编程能力有待提高。

参考程序

1.Web窗体XHTML5.html程序

DOCTYPEhtml>

//www.w3.org/1999/xhtml">

aside{float:

left;width:

15%;}

section{float:

right;width:

85%;}

footer{clear:

both;}

#C0C0C0">Copyright2014MyPetShop

2.web窗体TableLayout.aspx程序

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="TableLayout.aspx.cs"Inherits="Ex2_TableLayout"%>

DOCTYPEhtml>

//www.w3.org/1999/xhtml">

.auto-style1{

width:

100%;

}

.auto-style2{

height:

20px;

}

.auto-style3{

width:

149px;

}

3.web窗体DivLayout.aspx程序

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="DivLayout.aspx.cs"Inherits="Ex2_DivLayout"%>

DOCTYPEhtml>

//www.w3.org/1999/xhtml">

left;width:

17%;height:

60px;"src="/logo.gif"/>