信息131-26-实验2-详解.doc

实验 2 ASP.NET 4.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(19) 实验原理 XHTML、CSS、JavaScript、JQuery基本语法知识 实验思考 思考并比较table和div两种布局的异同。 实验报告书写要求：根据实验情况和结果撰写并递交实验报告。实验报告应当有设计过程及实验步骤的文字说明，运行调试记录，运行结果截图。 实验总结(学会了; 掌握了; 训练了; 发现了; 今后学习中有待提高。） 电子报告word文件命名规则：专业班级-学号后两位-实验X-姓名.doc, 如信息123班学号为201212030315的郭海涛同学实验2报告word文件命名则应是：信息123-15-实验2-郭海涛.doc, 其中 .doc是Word文件扩展名。特别提醒：电子报告文件命名不规范的报告将不予接收。 参考程序 实验内容 建立一个描述MyPetShop网站信息的XHTML5文件 先在Experiment解决方案新建一个ExSite网站，再在该网站根文件下建立一个Ex2子文件，在Ex2中添加一个HTML页HTML5.html，在该页中输入参看程序1，在浏览器上浏览建立的HTML5.html 利用table实现页面布局，建立一个web窗体TableLayout.aspx。在浏览器中浏览。 图2 TableLayout.aspx浏览效果截图 利用div实现页面布局，建立一个web窗体DivLayout.aspx。在浏览器中打开效果如图。 建立两个独立的.css文件（TableDiv.aspx和DivCss.aspx），在ExSite网站根文件夹下建立一个Style文件夹，再在Style文件夹中添加一个样式表文件TableDiv.aspx,在实验内容1中的Ex2中建立一个web窗体DivCss.aspx。在浏览器中浏览效果如图。 5.利用JavaScript关闭当前窗口，在Ex2中添加一个web窗体CloseWindow.aspx,在浏览器中浏览效果如图。 利用jQuery实现一个时间数据来源于客户端的时钟，选择ExSite网站，在选择“网站”-“管理NuGet程序包”命令，在呈现的窗口中选择jQuery并安装。安装完成后，在ExSite网站跟文件夹下的Script文件夹中将自动添加由jQuery提供的必威体育精装版的JavaScript库，再在Ex2中添加一个web窗体Timer.aspx，在浏览器中浏览效果如图。 建立描述书籍简易信息的XML文件Book.xml，在浏览器中浏览效果如图。 实验总结： 通过这次试验，我学会了div和CSS实现页面布局方法，掌握XML文件建立的方法，训练了网站的建立及运行的能力，发现了自己在学习实际操作过程中有很多不足之处，在今后的学习中一定会加倍努力，提高自己，编程能力有待提高。 参考程序 1. Web窗体XHTML5.html程序 !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认识常用XHTML5元素/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=../I