Web系统与技术--实验八
web实验报告总结精选
web实验报告总结课题：网页设计与制作专业：通信工程班级：学号：一.实验任务：设计制作一个《网页设计与制作》精品课程网站二．实验要求：站点目录：要求层次分明，不能将内容都放在站点根目录下；不要使用中文；为每种类型文件都建立一个独立的目录。
填写网站设计报告：必须认真填写网站设计报告中的每一项，完成网站结构的设计说明，包括以下各项内容： 1) 网站主题：必须围绕一个确定主题创建网站，否则成绩以不及格计。
2) 站点名称：必须为自己的站点命名，名称要紧扣站点主题，并反映在每个网页上。
3) 站点根文件夹：以个人学号及姓名命名。
4）文件与文件夹：网站内使用的图片放在images文件夹中,主页以命名,其它文件夹自已命名,要以有意义的英文字母来命名,不要使用中文,网页文件也要使用有意义的英文来命名。
5) 站点结构：分类存放网站中的资源，一律以树型目录结构表示并说明文件夹的用途。
6) 站点地图：以结构图方式给出网页的名称和各页面间的超级链接。
7) CSS、行为：说明制作、使用了几个CSS样式，说明CSS样式的名称，为什么内容添加、制作了什么行为。
2. 网站内容要求网站至少要有8个页面，可以使用表格、框架等来进行统一布局。
网站的站标使用自已制作的图像，网站名称自已命名，要跟网站的主题一致。
按提供的课件等资料添加链接或下载功能。
每个网页有自己的适当的标题、导航条。
注意：网页标题是指显示在浏览器标题栏上的文字，而不是网页中的段落标题。
每个网页都能够返回上一级页面或首页。
网站中要使用CSS，要使用行为制作动态效果，超链接效果正确无误，要有锚点链接，要有背景音乐，要能够提供文件下载，要有flash动画。
可添加视频文件等。
三．实验内容：该网站设计共使用了9个HTML页面。
采用了frame框架结构：由frame1，frame2，frame4，及相关页面构成。
进入后，播放背景音乐；frame2中点击各个选项，分别跳转到相关界面；资料页面：采用链接，可实现课件资源的调用；Flash页面：实现了锚点连接，超链接，flash图像的播放留言板：代码中写入了相关留言，可点击查看。
Web技术实验指导书
《Web技术》实验指导书北京工商大学计算机与信息工程学院2011年3月目录实验一使用Dreamweaver制作HTML页面 (3)实验二CSS及JavaScript实验 (3)实验三MyEclipse使用 (4)实验四JSP技术应用实验 (4)实验五JSP动作 (5)实验六JSP的<jsp:useBean>动作使用 (5)实验七JSP内置对象——request对象和response对象 (6)实验八JSP内置对象——out对象和session对象 (6)实验九JSP使用技巧 (6)实验十MySQL数据库使用 (7)实验十一JSP数据库应用开发（4学时） (7)实验一使用Dreamweaver制作HTML页面【实验目的】掌握使用Dreamweaver制作HTML页面的方法【实验内容】1．使用HTML制作一个页面，要有背景颜色，页面显示内容及格式如下图所示。
2．制作一个页面，上有文字、图像和朋友的E.mail地址，在文字和图像上创建超级链接，单击链接时，页面跳转到其他页面，单击E.mail地址时，打开信箱，发送邮件。
3．制作一个计算器界面，界面如下图所示。
4．用Top: 显示logo图片和页面的标题。
Left: 登录模块Body: 当前页面的主要显示区域。
Bottom: 显示版权信息。
【实验报告】将实验文件发送到老师的电子信箱。
实验二CSS及JavaScript实验【实验目的】掌握CSS及JavaScript的使用方法【实验内容】1.定义一个main.css文件，在其中设置超链接的颜色、访问过的超链接的颜色，颜色自定。
另外，设计两个HTML页面，在其中创建超链接，并链接main.css文件，观察超链接的颜色。
2. 使用JavaScript脚本来验证用户输入的用户名是否为空，并要求密码的长度必须大于6，根据用户的输入给出相应的提示。
3. 页面上有一幅图像，在状态栏显示有关图像的说明。
单击图像时，换成另一幅图像，同时状态栏的内容也做相应的变更。
web系统与技术实验报告
<body>
<%!String UserName="";%>
<%!String LikeFood="";%>
<%
UserName=request.getParameter("Name");
LikeFood=request.getParameter("food");
session.setAttribute("sname",UserName);
if(str==null) str="";
if(str.equals("")) response.sendRedirect("test1-3");
else
{
out.println(str+":欢迎您！<br>");
out.println("当前时间是：<br>"+newDate());
}
%>
</body>
<DIValign="center">
您在login.jsp页面的SessionID是：<br>
<%=SID%>
<formmethod="post"action="session.jsp">
<table>
<tr><td>请输入您的姓名：</td><td><inputtype="test"name="Name"></td></tr>
Web开发技术实验指导书
安徽农业大学《Web开发技术》JSP版课程配套教材《Web开发技术》实验指导书（JSP版）刘波编写安徽农业大学信息与计算机学院通信工程2008年2月目录实验一搭建JSP运行的实验环境 (1)实验二JSP页面 (3)实验三显示不同大小的“你好JSP” (7)实验四JSP指令和动作 (10)实验五Tag文件的代码复用 (12)实验六中文显示服务器端日期 (14)实验七JSP内置对象 (19)实验八session对象 (23)实验九简易留言板 (28)实验十JSP中使用Java Bean (31)实验十一JSP中的文件操作 (41)实验十二JSP中使用数据库 (48)实验十三Java Servlet (66)实验十四网上书店 (71)实验报告 (76)实验一搭建JSP运行的实验环境一、实验目的（1）掌握JSP运行环境的安装与配置（2）理解JSP与Servlet的关系（3）运行简单的JSP页面，理解JSP的运行原理二、实验工具（1）JDK1.4、JDK1.5或JDK1.6，可以从SUN公司的网站免费下载（2）编辑工具－记事本（3）Tomcat服务器，也可以从网上免费下载三、实验步骤（1）按教材中演示安装JDK（2）按教材中演示安装Tomcat（3）启动Tomcat服务器，在浏览器中输入：http://localhost:8080，观察主页内容（4）观察Tomcat安装目录下的各个子目录的内容（5）打开记事本，输入下列源代码并保存为exer1.jsp。
将此文件复制到Tomcat安装目录下的webapps\ROOT目录下，运行该页面，观察其对应的Servlet源代码。
exer1.jsp的代码：<%@ page contentType="text/html;charset=GB2312" %> <!-- jsp指令标签--><%@ page import="java.util.Date" %> <!-- jsp指令标签--><%! Date date; // 数据声明int sum;public int add(int m,int n) // 方法声明{ return m+n;}%><HTML><BODY bgcolor=cyan> <!—html标记--><FONT size=4><P>程序片创建Date对象：<% Date date=new Date(); //java程序片out.println("<BR>"+date);sum=add(12,34);%><BR>在下一行输出和:<BR><%= sum+100 %> <!-- Java表达式--></FONT></BODY></HTML>（6）将exer1.jsp文件复制到Tomcat安装目录下的webapps\examples目录下，运行该页面，观察其对应的Servlet源代码。
Web软件技术实验指导书
实验一简单的Servlet与JSP一、实验目的1. 了解和掌握Servlet和JSP页面的编写和运行。
2. 比较Servlet与JSP的区别和联系，体会动态页面的含义。
二、实验原理Servlet是运行在服务器端的Java程序，它主要是为了扩展服务器的功能。
编写和运行Servlet一般要经过4个步骤：（1）编辑源文件，它是继承HttpServlet的Java类；（2）编译源文件；（3）在服务器中部署该Servlet，即将类文件存放到服务器的适当目录中，并修改web.xml部署描述文件；（4）使用浏览器访问该Servlet程序。
JSP是一种服务器端的动态页面技术，它的实质也是Servlet。
它的编写较Servlet容易。
二者的主要区别是：Servlet通常是实现业务逻辑，而JSP通常实现表示逻辑。
三、实验内容与步骤（一）编写和运行一个简单的Servlet【步骤1】在Tomcat安装目录的webapps下建立一个helloapp的目录，在其中再建立一个WEB-INF目录，在WEB-INF目录中建立一个classes目录。
这样就建立了一个名为helloapp 的Web应用程序。
【步骤2】编写下面Servlet类，编译并将类文件放入classes目录中package com.demo;import java.io.*;import javax.servlet.*;import javax.servlet.http.*;public class HelloServlet extends HttpServlet{public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException{PrintWriter out = response.getWriter();out.println("<html>");out.println("<head>");out.println("</head>");out.println("<body>");out.println("<h3>Hello World!</h3>");out.println("</body>");out.println("</html>");}}【步骤3】在WEB-INF目录中建立一个名为web.xml的文件，该文件为Web应用程序的部署描述文件，简称DD。
太原理工大学Web系统和技术实验报告
三、数据库设计
勤工助学系统数据库由3张表构成,分别是岗位表(jobs),勤工
图例:FirstPage.jsp
1.登录功能.
登录界面主要实现用户的登录操作,采用一个check.jsp来实现,有一些简单的逻辑校验,当用户点击登录按键的时候系统会弹出一个登录框,如下所示.填写完用户密码之后就会跳转到check.jsp,通过对数据库进行交互后登录成功,则跳转至登录成功页面Success.jsp页面.
图例:Register.jsp
图例:RegisterAction.jsp部分代码
图例:动态显示1. 图例:动态显示2.
图例:分类现实新闻
图例:详细岗位查看
图例:具体实现代码
图例:教师登录通道
图例:管理员管理页面2.岗位,新闻发布
图例:勤工新闻与岗位发布显示
图例:AddnewsAction.java部分代码图例:AddjobsAction.java部分代码。
Web系统与技术实验报告
protected void Page_Load(object sender, EventArgs e) {}
090511105 蒋弨
protected void Button1_Click(object sender, EventArgs e) {
图 3-1 DTD 文档 3. 为 student.XML 文档，编写 Schema 文档，如图 3-2 所示；使得 Schema 文档 中包含以下技术的使用：
（1）简单类型元素的定义与应用； （2）复杂类型元素的定义与应用； （3）属性声明的使用。
图 3-2 Schema 树形图
三、实验步骤
090511105 蒋弨
<address>
<province>广西</province>
<city>桂林</city>
<street>金鸡路 1 号</street>
<post>541004</post>
</address>
</student>
<student>
<stuID>0800310102</stuID>
<name>张红</name>
OleDbConnection connxls = new OleDbConnection(strConn); OleDbDataAdapter myDa = new OleDbDataAdapter("select * from [Sheet1$]", connxls); DataSet myDs = new DataSet(); myDa.Fill(myDs); string mySql = ""; string sqlConn = "Data Source=111-41\\SQLSERVER2005;Initial Catalog=student;Integrated Security=True"; SqlConnection con = new SqlConnection(sqlConn); if (con.State.ToString() == "Closed")
Web技术基础实验报告模板
专业：软件工程班级：2013级2班姓名：文海波学号：201312140204实验1：基本网页设计实验设备：PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘OS：Windows7应用软件：IE10.0、Dreamweaver CS5.5、Notepad实验目的：1. 掌握常用HTML标记的使用；2. 掌握表格页面布局；3. 了解网站设计的基本步骤。
实验内容及要求：1. 表格布局，居中,边框无；width:800pt；表格分4行，2列；第1、2、4行合并单元格为1列。
第1行height:100px，第4行height:24px；第3行第1列width:172px，height440px；2. 第1行内显示标题图片（背景），标题文字，如：Web技术基础学习；第2、4行前景色为淡蓝，第2行设计导航菜单，第4行设计版权信息；第3行第1列背景为浅蓝色，嵌套一个表格，内容为二级导航菜单，每一行放一个链接，链接到实验1的其它网页；第3行第2列放各网页的具体内容；3. 第3行第1列中的列表项：文本格式化标记；超链接标记；图像标记；多媒体标记；列表标记；表格标记；表单标记；4. 设计其它网页，结构与前一网页一样，只有第3行第2列的内容不同，放网站其它网页的内容，参照例程3－9中的内容。
实验结果：（运行结果抓图）实验思考题：如何设置才能让页面在不同大小的显示器中都能正确显示？专业：软件工程班级：2013级2班姓名：文海波学号：201312140204实验2：CSS应用实验设备：PC机：Pentium IV 2.8G CPU；1G内存；120G硬盘OS：Windows7应用软件：IE10.0、Dreamweaver CS5.5、Notepad实验目的：1. 掌握常用CSS样式属性及其使用；2. 选择器的使用；3. 掌握div+css页面布局；4. 了解网页的盒模型和流布局。
实验内容及要求：1. 用6个div+外部css设计T字形布局，最外部容器div宽度800px，高度自动调整；内部嵌套5个div，上部banner部分高100px；其下为导航菜单，高度约32px；中间左侧为二级导航部分宽约180px；右侧为页面主要内容，宽度为剩余部分；下部版权说明高度32px。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验八Web组件重用与JavaBeans班级：网络112 学号：201106090213 姓名：李亚军一、实验目的1. 理解静态包含和动态包含的概念，掌握相关指令和动作的使用；2. 掌握JavaBeans的含义和创建；3. 重点掌握在JSP页面中使用JavaBeans的标准动作。
二、实验原理通过重用Web组件可以提高应用程序开发的效率和其可维护性。
在JSP中可以通过包含机制和JavaBean实现Web组件的重用。
包含分为静态包含和动态包含。
静态包含通过include指令实现，动态包含通过标准动作jsp:include实现。
在JSP页面中使用JavaBean是最重要的组件重用技术，这主要是通过下面3个标准动作实现的：<jsp:useBean><jsp:setProperty><jsp:getProperty>三、实验内容及要求（一）include静态指令的使用创建名称为ch08的Web项目，编写hello.jsp页面，其中声明一个变量userName，用于获取请求地址后查询串参数userName的值；使用<%@ include>静态指令包含response.jsp 页面，通过response.jsp页面显示userName的值，用下面两种方法实现。
执行代码并查看运行结果。
方法一：response.jsp页面中通过JSP表达式直接输出变量userName的值。
方法二：通过pageContext作用域属性，在主页面和子页面间共享userName的值，降低主页面和子页面的依赖性。
思考并回答：✓静态include指令何时执行？答：与主页面同时执行。
✓主页面和被包含的子页面是否转换为一个转换单元？答：是。
✓同一个转换单元的页面之间如何共享数据？答：通过request作用域共享。
（二）<jsp:include>动作指令的使用编写main.jsp页面，其中声明一个变量userName，用于获取请求地址后查询串参数userName的值；在main.jsp页面中使用<jsp:include>动作包含subpage.jsp页面，通过subpage.jsp页面显示userName的值；执行代码并查看运行结果。
思考并回答：✓<jsp:include>动作指令何时执行？答：与main.Jsp页面分别编译执行。
✓主页面和被包含的子页面是否转换为一个转换单元？答：不是。
✓动作包含的子页面与主页面共享同一个请求吗？答：共享。
✓在不同的转换单元中如何进行数据的传递和共享？（三）<jsp:forward>、<jsp:param>动作指令的使用【步骤1】action_forward.jsp的代码如下：【步骤2】forwardTo.jsp的代码如下：执行action_forward.jsp页面，查看运行结果。
思考并回答：✓<jsp:forward>动作与<jsp:include>动作有什么相同点和不同点？答：<jsp :forward>转发到的页面处理完后并不将控制转回主页面。
✓与<jsp:forward>动作等价的其他两种写法如何表示？答：<% RequestDispatcher view=request.getRequestDispatcher(« other.jsp« ) ;View.forward(request,response) ;%>< % pageContext.forward(« other.jsp« ) ;%>（四）JavaBean的创建与序列化。
【步骤1】仿照课本程序6.10创建CustomerBean类，使其可以序列化；public class CustomerBean implements java.io.Serializable{private String customername;private String email;private String phone;public String getcustomername() {return this.customername;}public String getemail() {return this.email;}public String getphone() {return this.phone;}public void setcustomername(String customer) {this.customername=customer;}public void setemail(String email) {this.email=email;}public void setphone(String phone) {this.phone=phone;}}【步骤2】编写customer.jsp页面供用户填写表单数据；<html><body><%String msg=(String)request.getAttribute("msg");if(msg!=null)out.println(msg+"</br>");%><form action="/ch08/saveCustomer" method="get"><table><tr> <td align="right">客户名：</td><td><input type="text"name="customername"></td></tr><tr> <td align="right">E-mail地址：</td><td><input type="text" name="email"></td></tr><tr> <td align="right"> 电话：</td><td><input type="text" name="phone"></td></tr><tr align="center"><td colspan="2"><input type="submit" value="提交"></td></tr></table></form></body></html>【步骤3】将程序6.12所示的Servlet改写成同样功能的saveBean.jsp页面，用于检索表单数据、创建CustomerBean实例并序列化到指定路径相应的文件中。
<html><body><%String msg=(String)request.getAttribute("msg");if(msg!=null)out.println(msg+"</br>");%><form action="/ch08/saveCustomer" method="get"><table><tr> <td align="right">客户名：</td><td><input type="text" name="customername"></td></tr><tr> <td align="right">E-mail地址：</td><td><input type="text" name="email"></td></tr><tr> <td align="right"> 电话：</td><td><input type="text" name="phone"></td></tr><tr align="center"><td colspan="2"><input type="submit" value="提交"></td></tr></table></form></body></html>【步骤4】编写getBean.jsp页面，用查询串参数custName指定客户名称，从步骤3创建的序列化JavaBean文件中装载对应的CustomerBean实例数据，并显示该客户的信息。
提示：使用<jsp:useBean id=“”beanName=“”type=“”/>从序列化bean文件装载一个Bean实例。
（五）<jsp:useBean>、<jsp:setProperty>、<jsp:getProperty>动作的使用从HTML页面login.html中输入用户名和口令等，然后提交给display.jsp页面，在该页面中通过JavaBeans保存数据并输出。
【步骤1】创建UserBean，包含username,password,email三个私有数据成员和相应的访问器和设置器。
【步骤2】编写登录页面login.html，部分代码如下，补充关键代码：<html><body>Please input:<br><form action= “/ch08/save”>UserName:<input type="text" name="username"><br>Password:<input type="password" name="password"><br>Email:<input type="text"name="email"><br><input type="submit" value="提交"></form></body></html>【步骤3】编写display.jsp页面，使用JavaBeans显示输入的信息，部分代码如下，补充关键代码：<%@ page import="erBean" %><jsp:userBean id=”user” class=”erBean” scope=”request”><jsp:setProperty name=”user” property=”*”></jsp:userBean><html><body>UserName: <jsp:getProperty name=”user” property=”username”> <br>Password: <jsp:getProperty name=”user” property=”password”><br>Email: <jsp:getProperty name=”user” property=”email”><br></body></html>（六）使用JavaBean构造一个简单的计算器，能够进行“+、-、*、/”运算。