人机交互技术实验报告_2013006175_中软4班_杨钰.doc

本科实验报告 课程名称： 人机交互技术 实验项目： 基于HTML的JQuery网站设计与实现 仿新浪博客系统 实验地点： ） 专业班级： 软件1 学号： 201300 学生姓名： 指导教师： 2015年 12月 30日  实验名称 实验一 基于eclipse的JQuery开发环境搭建 实验目的和要求 能正确安装JDK，并能准确配置环境变量。 能正确下载并安装Eclipse,并熟悉开发环境。 能正确下载并安装JSDT插件。 搭建网站项目，验证环境搭建的准确性。 实验内容 阐述搭建开发环境的意义 阐述搭建的整个过程（资源从何处、如何组合资源） 主要仪器设备 台式或笔记本计算机 实验记录(记录1，2，3，4，5中安装及运行状况)(可分栏或加页) 1)安装jdk并且设置环境变量 1从官方网站找到jdk-8u5-windows-i586.exe并且下载下来，如图所示： 2安装jdk 3 安装环境变量： 4 验证环境变量是否安装正确： 出现以上内容，说明jdk环境变量已经设置成功。 2) 安装eclipse： 1从官网上下载下来eclipse for EE 版本 如图所示： 2 解压后如图所示： 3打开快捷方式，即可进入到程序界面: 3) tomcat安装 及 环境变量设置： 1从官网下载安装包： 2开始安装tomcat： 3设置环境变量： 4检验是否设置成功：从安装包中打开 startup.bat: 出现以下界面，说明已经环境变量设置成功。 4)在eclipse中设置servers： JDBC安装配置 遇到的问题和解决方法 1.在安装MyEcilps是如果不采用默认路径安装会出现安装报错，所以采用默认安装保险。 2. 在安装TOMcat时要检测的是你的JDK包，他默认检测你的Jre文件件，所以需要进行下修改。 3.因为机子中有两个以上的数据库，所以在MyEclips运行所检测的项目时会出现端口与数据库匹配的错误。这个时候需要以管理员的身份运行网络服务，将SQLEXPRESS关闭。重新匹配端口，就可以连接成功了。 心得体会 通过本次试验，了解到软件测试是一门很复杂的技术应用，初学者需要安装相应的测试软件进行测试学习，如Tomcat在安装过程中的需要检测JDK文件夹所在目录。方可正确运行，在配置数据库的时候，要分清自己开起的数据库服务器端口是哪个。保证数据库可以正确连接。 实验名称 实验二 网站主页面的设计与实现（index.html） 实验目的和要求 根据自己的选题设计网站布局 设计主页面的思路和实现途径（表格布局？div布局？frameset布局？） 会根据网站设计能创建和组织相应资源：.html .css .js .img 页面内不允许出现行内样式，网站的全局样式必须从外部引入 页面的js代码体现在页面内 页面的主菜单必须有jQuery下的样式变化 页面中含有动态图片或信息滚动的必须是jquery下的实现 页面含有tab的切换的也必须是jquery下的实现 实验内容 阐述网站页面布局的设计思路和实现途径 阐述主页面实现的过程 阐述页面样式的引入和关键代码。 阐述页面jQuery的引入和关键代码。 对运行结果进行分析总结 主要仪器设备 台式或笔记本计算机 实验记录(写出每步的执行情况及完成情况，如没完成，分析原因)(可分栏或加页) 本次实验是一个仿-新浪博客的首页通过div和table结合来完成布局，引入插件jquery-2.1.4.js,链接index.css。它是由头部，中间，尾部三部分组成。头部实现导航功能，头部的”新浪首页”链接到”index.html,”登录”链接到bolg.html,”注册”链接到register.html.中间部分上半部分由div分成三块，第一块实现图片轮播，第三块中“立即注册”链接到register.html,下半部分由div分成两块,第二块中实现了“微博最火”和“周人气榜”的切换。尾部用table布局构成“帮张与问答中心”通过selection实现下拉框。 导航：$(#menu).hover(function() { $(#menu).css(border, 1px soli