web程序设计实验四
WEB程序设计-实验指导书-zmofun
WEB程序设计实验指导书计算机基础教研室目录实验1 ASP运行环境及简单ASP编程 (3)实验2 VBScript脚本语言 (5)实验3 Request与Response对象的应用 (8)实验4 Application对象Session对象Server对象 (12)实验5 ASP服务器组件实验 (16)实验6 Connection对象,Command对象,Recordset对象 (20)实验7 Recordset对象Fields集合Field对象.htm (22)实验8 综合实例网上书店 (26)实验1 ASP运行环境及简单ASP编程一实验内容:1 掌握使用PWS作为WEB服务器进行ASP页面发布的方法2 掌握使用ASP脚本进行基本输出的方法二实验要求:1 根据以下实验步骤书写实验准备报告2 独立完成实验3 书写实验报告书三实验步骤:1 安装篇PWS(因实验室微机已安装PWS,本步骤无须上机完成):您可以到该站点下载PWS:/cn99new/series/dyndns/pws.zip,也可以在本校的FTP站点下载它.另外,在完整的Win 98光盘里包含有PWS,它位于光盘的add-onspws文件夹中。
然后运行其中的setup.exe,安装过程中一路回车即可。
安装完毕重启机器,PWS会自启动并在系统托盘里出现一个PWS的运行图标。
双击此图标,会出现PWS的主窗口。
点击窗口左下角的“高级”图标,可打开一个窗口(见图2)。
PWS的重要设置尽在其中。
2 设定WEB主目录主目录是存放WEB服务器页面的初始目录,只有此目录下的文件才能被客户访问.默认的主目录一般为c:\inetpub\wwwroot,您也以按图所示来更改主目录.3 设置默认文档接下来,为您的主目录设置一个能在默认情况下自动运行的文档。
该文档的作用是,当进入本站点时,如没有指定要访问的文档,则服务器自动提供一个默认文档让其访问。
在图中,选中“启用默认文档”复选框,并在“默认文档”框中,输入自己的首页文档名index.asp。
web程序设计实验报告
web程序设计实验报告Web程序设计实验报告一、引言Web程序设计是现代信息技术领域中的重要一环,它涉及到网页的开发、交互设计和用户体验等方面。
本实验旨在通过设计一个简单的Web程序,来探索并应用相关的技术和概念。
二、实验目标本实验的目标是设计一个在线购物网站,实现用户注册、商品浏览、购物车管理和订单处理等基本功能。
通过这个实验,我们可以学习和掌握以下内容:1. HTML和CSS的基本语法和用法,用于构建网页的结构和样式。
2. JavaScript的基本语法和用法,用于实现网页的交互效果和动态功能。
3. 数据库的基本概念和操作,用于存储和管理用户信息、商品信息和订单信息等数据。
4. 服务器端的编程和部署,用于处理用户请求和返回相应的网页内容。
三、实验步骤1. 网页设计首先,我们需要设计网站的整体布局和样式。
通过HTML和CSS,我们可以创建网页的结构和外观。
在设计过程中,我们要考虑到网站的易用性和美观性,使用户能够方便地浏览和购买商品。
2. 用户注册和登录为了实现用户注册和登录功能,我们需要设计相应的表单和验证机制。
用户可以通过填写注册表单来创建自己的账户,并通过登录表单来访问自己的个人信息和购物车。
3. 商品浏览和搜索在网站上展示商品信息是吸引用户的关键。
我们可以通过数据库来存储商品的详细信息,并通过网页来展示和搜索这些商品。
用户可以通过关键词搜索或者浏览分类来找到自己想要购买的商品。
4. 购物车管理购物车是用户选择商品并进行结算的地方。
我们可以通过JavaScript来实现购物车的添加、删除和修改功能。
当用户点击结算按钮时,我们还需要生成相应的订单信息,并将其存储到数据库中。
5. 订单处理为了实现订单处理功能,我们需要设计一个订单管理系统。
当用户提交订单后,我们可以将订单信息存储到数据库中,并提供相应的查询和修改功能。
同时,我们还需要将订单信息发送给用户和商家,以便双方进行相应的处理。
四、实验结果通过实验,我们成功地设计并实现了一个简单的在线购物网站。
Web程序设计实验指导书1116
Web程序设计实验指导书杨松波2010.09实验一 C#和3.5一.实验目的(1)了解C#语言规范(2)掌握C#基础语法、流程控制和异常处理等。
(3)掌握创建C#类并应用于3.5 Web窗体中的方法。
二.实验内容及要求1.转换输入的成绩到相应的等级要求如下:(1)页面浏览效果如图1-1所示(2)成绩输入使用TextBox控件。
(3)点击Button控件时输出相应的等级信息,其中等级信息输出在一个Label上图1-1 成绩转换浏览效果2.在Web窗体上输出九九乘法表浏览效果如图1-2所示图1-2 “九九乘法表”浏览效果3.输入一组以空格间隔的共10个以内的整数,输出该组整数的降序排列要求如下:(1)页面浏览效果如图1-3所示。
(2)输入使用TextBox控件。
(3)单击Botton控件时输出所有整数的降序排列。
(4)必须使用数组。
图1-3 降序排列浏览效果4.计算两个数的商要求如下:(1)页面浏览效果如图1-4和图1-5所示。
(2)输入使用两个TextBox控件。
(3)单击Botton控件时输出两个数的商。
(4)必须包含异常处理。
图1-4 计算商浏览效果(1)图1-5计算商浏览效果(2)5.设计一个用户信息类UserInfo要求如下:(1)包括两个属性:姓名(Name)和生日(Birthday)。
(2)包括一个方法DecideAge()用于判断用户是否达到规定年龄。
当年龄大于等于18岁时返回值“XXX,您是成年人了!”; 当年龄小于18岁时返回值“XXX,您还没长大呢!”。
6.将UserInfo类应用于Web窗体中页面浏览效果如图1-6和图1-7所示。
图1-6 UserInfo类浏览效果图(1)图1-7 UserInfo类浏览效果图(2)三.实验步骤1. 转换输入的成绩到相应的等级(1)设计Web窗体新建一个Web窗体,切换到设计视图。
如图1-8所示,向页面添加1个TextBox控件、1个Botton控件和1个Lable控件。
web程序设计-JSP实验报告
实验一Web程序开发平台的构建一、实验目的和要求巩固知识点——JDK的安装及环境变量的设置。
JDK是Java开发工具,是进行JSP开发必备的软件支持。
巩固知识点——Tomcat以及My SQL的安装。
Tomcat是Web服务器为Web 项目提供运行的环境。
My SQL用于存储数据信息。
二、实验内容和原理在进行JSP开发Web项目前需要搭建开发环境,JDK是开发环境中必备的软件。
然而Windows并没有默认安装JDK,所以需要进行手动的安装及环境变量的设置。
在开发的过程中数据库和Web服务器是必不可少的软件支持,在Windows中并没有预先安装这两种软件,所以需要进行手动的安装。
三、实验环境硬件:计算机软件:Windows XP和以Java语言为基础的开发环境、软件开发包(JDK)和运行环境(JRE)。
四、实验步骤1、JDK的安装和配置由于JDK不是Windows XP系统的默认配置软件,所以需要手动安装,安装JDK 后就可以提供Java语言开发和运行环境了。
具体安装步骤如下:(1)从Sun公司网站下载JDK软件。
双击安装文件,弹出【许可证协议】对话框,如图1-1所示。
(2)选择【我接受】选项,弹出【自定义安装】对话框,如图1-2所示。
单击【更改】按钮,选择JDK安装目录。
图1-1 【许可证协议】对话框图1-2 【自定义安装】对话框(3)单击【下一步】按钮,进入JDK安装等待界面,如图1-3所示。
(4)JDK安装结束,弹出【JRE自定义安装】对话框,开始安装JRE,如图1-4所示。
单击【更改】按钮,选择JRE安装目录。
图1-3 JDK安装等待界面图1-4 【JRE自定义安装】对话框(5)单击【下一步】按钮,进入JRE安装等待界面,如图1-5所示。
(6)JRE安装结束,弹出【安装完成】对话框,如图1-6所示。
单击【完成】按钮,完成JDK和JRE的安装。
图1-5 JRE等待安装界面图1-6 【安装完成】对话框2、JDK安装结束后需要进行Java环境变量的配置,具体配置步骤如下。
WEB程序的设计实验指导书
WEB程序设计实验指导目录实验1WEB程序运行环境配置实验2页面设计与HTML的使用实验3层叠样式表CSS的应用实验4客户端脚本语言的使用实验5WEB编程语言语法基础实验6内置对象的应用实验7数据库编程技术实验8JavaBean的应用实验9JSP和Servlet实验10JSP和XML实验1 WEB程序运行环境配置一、实验目的1、掌握JSP程序运行环境的配置过程;2、理解JSP程序的运行原理。
二、实验内容1、JSP程序运行环境配置。
本实验采用Windows2000 Server+JDK+Tomcat。
2、修改WEB服务端口和网站的根路径。
三、实验要求1、掌握JSP程序运行环境配置的基本要求。
四、实验环境硬件环境:PC微机软件环境:Windows XP或者Windows2000操作系统五、实验步骤1、进入网址/j2se/1.4.2/download.html ,下载windows版本的JDK程序j2sdk-1_4_2_03-windows-i586-p.exe 。
2、安装下载的JDK程序。
注意其安装路径,这里假定安装路径为C:\ j2sdk1.4.2。
3、接下来需要配置一些环境变量。
右键单击“我的电脑”,在弹出菜单中选择“属性”,进入“高级”中的“环境变量”;新建一个系统变量JAVA_HOME,其值设为C:\j2sdk1.4.2;又新建一个系统变量CLASSPATH,其值设为.;% JAVA_ HOME %\lib;修改系统变量PATH的值,在原值基础上加上%JAVA_HOME% \bin;。
4、接下来简单地测试一下JDK的安装与环境变量设置是否正确。
先编写一个简单的Java程序存放在C:\下,然后运行cmd命令,进入系统的命令行方式,在命令行C:\> 下,用java和javac两个命令编译和运行所编写的Java程序,如果成功运行,说明整个Java运行环境配置正确。
附:简单的Java程序Hello.javaimport java.io.*;public class Hello {public static void main (String args[]) {System.out.println("Hello World");}}5、进入网址/tomcat/index.html,下载其最新的Tomcat程序jakarta-tomcat-5.0.16.exe。
Web高级编程实验指导实验四
实验四Spring MVC一、实验目的1、理解Spring MVC模型2、掌握Spring MVC的表单数据传递与接收方法;3、掌握Spring MVC的表单校验方法;4、掌握Hibernate的基本用法;5、掌握Spring与Hibernate的整合方法;二、实验要求1、根据实验步骤中提出的要求,使用Eclipse编写相应的Java程序;2、根据实验步骤中提出的要求,使用Eclipse编译、运行自己所编写的Java程序;3、根据编译与运行过程中所获得的错误信息修改程序直至获得正确的结果;4、记录实验中遇到的各类问题并以及解决办法。
三、实验步骤1、Spring MVC配置(1)在Eclipse中创建一个名为“springweb”的“Dynamic Web Project”;(2)在工程的WEB-INF目录中建立一个web.xml文件,该文件的内容如下:<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi=/2001/XMLSchema-instancexmlns=/xml/ns/javaeexsi:schemaLocation="/xml/ns/javaee/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0"><display-name>springweb</display-name><!-- 在此处添加配置代码--></web-app>(3)将所需的jar包拷入WEB-INF目录的lib文件夹中;(4)配置Spring MVC中的DispatchServlet为前端控制器;<servlet><!-- 对应的MVC配置文件应为spring-servlet.xml --><servlet-name>spring</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>spring</servlet-name><url-pattern>/</url-pattern><!-- 所有对该应用的访问都要通过DispatcherServlet --> </servlet-mapping>(5)在WEB-INF目录下创建spring-servlet.xml文件,设定MVC相关配置;<?xml version="1.0" encoding="UTF-8"?><beans xmlns="/schema/beans"xmlns:xsi="/2001/XMLSchema-instance"xmlns:tx="/schema/tx"xmlns:p="/schema/p"xmlns:context="/schema/context"xmlns:mvc="/schema/mvc"xsi:schemaLocation="/schema/beans/schema/beans/spring-beans-3.0.xsd/schema/tx/schema/tx/spring-tx-3.0.xsd/schema/context/schema/context/spring-context-3.0.xsd/schema/mvc/schema/mvc/spring-mvc-3.0.xsd"><!-- 自动扫描的包名,前端控制器将在指定的包中查找Controller --><context:component-scan base-package="controller" /><!-- 支持MVC注解映射--><mvc:annotation-driven /><!-- 设定视图解释类--><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <!-- view的路径--><property name="suffix" value=".jsp"/> <!-- view的后缀--></bean><!-- 访问以下静态资源时不需要经过前端控制器DispatchServlet --><mvc:resources mapping="/images/**" location="/images/" /></beans>(6)添加控制器HomeController,将它的index方法映射到“/”;package controller;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.RequestMapping;@Controller //注解设定HomeController为控制器类public class HomeController {@RequestMapping("/") //指定访问该控制器的urlpublic String index(){return "index"; //指定转向的View}}(7)在WEB-INF目录下创建jsp文件夹,然后在该文件夹中创建index.jsp文件作为HomeController类的index方法所对应的View;<%@page pageEncoding="UTF-8" %><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Welcome to Spring MVC</title></head><body><!-- 图片放置在WebContent下的images目录下--><h1><img src="images/welcome.jpg" width="100" height="100"> Spring MVC ....</h1></body></html>(8)启动Tomcat后,当用户输入“http://localhost:8080/springweb/”后,用户将看到index.jsp的内容,其执行过程如下:a)Tomcat通过查找web.xml文件中的<servlet>与<servlet-mapping>,得知所有对springweb 应用的访问,都需要通过前端控制器类“org.springframework.web.servlet.DispatcherServlet”;b)由于前端控制器DispatchServlet设定的servlet名称为“spring”,所以当springweb 应用接收到客户端用户的访问后,DispatchServlet将查找SpringMVC的配置文件spring-servlet.xml;c)spring-servlet.xml文件中的指定了控制器所在的package为“controller”,而视图的路径和类型分别为“WEB-INF/jsp”和“.jsp”;d)因为用户访问springweb应用中的url路径为“/”,由于“controller”package中只有一个HomeController,所以springweb应用会在HomeController类中查找与“/”对应的方法;e)HomeController类中指定了与“/”对应的方法为index,所以HomeController的index方法将被调用;f)index方法的返回值为视图的名称,即“index”,所以根据配置文件spring-servlet.xml的设定,该控制器将转向“WEB-INF/jsp”目录中的“index.jsp”g)index.jsp中有一图片标记,该图片的url路径在spring-servlet.xml配置文件中被设定为“resource”,所以对该图片的访问无需经过DispatchServlet。
web程序设计实验报告.doc
Web程序设计实验报告院另IJ计算机与通信工程学院专业计算机科学与技术班级学号__________________________________姓名______________________________________成绩2013 年12 月27【实验编号】【实验名称】1熟悉环境和CSS的使用实验内容完成三个 页面,三个页面之间可以通过链接互相访问,自由的设置其中的控件,使用一个css 表单來美化这三 个页而。
实验步骤index,<!DOCTYPE PUBLIC 11-//W3C//DTD 4.01 Transitional//EN ,!>< ><head><title>index. </title><meta http-equiv=n keywords H content = H keyworcil, keyword2, keyword3,!> <metahttp-equiv=IT description 11 content=,f this is my page 1’〉<meta http —equiv="content —type" content=,f text/ ; charset=UTF-8n >< !——<link re 1=’’style s heet n t ype=’T text/css’▼ href =n . /styles . css"〉——>clink rel=n stylesheet n type=,f text/css ,f href = "mycss • css ’▼〉</head><body><hl>Sunset</hl><p> <a href=lf 1. IT > link l</a> </br> <a href='*2. " > link 2</a></p></body></ >文綷qt, Mio IVQCJ 收廉… XIMP 镧⑽ ___________________________________________O 棚IK v S,就:收联P 0•备困▼ Sunsetlink 1lmk2 1.<!DOCTYPE PUBLIC 11-//W3C//DTD 4.01 Transitional//EN,!> < ><head><title>l. </title><meta http-equiv=n keywords n content=,!keywordl, keyword2, keyword3,f > <meta-- 4^18080/ttil/ift4tx hlikl (v)® Tools Lilt ra »« O b nn KVOJ *http—equiv="description" content="this is my page11〉<meta http-equiv="content-type1’ content=,,text/htrnl; charset=UTF-811 > clinkrel=,f stylesheet n type=” text/css" href=,f mycss .css’’〉< !——clink re l=,f stylesheet n type=n text/css” href=H . /styles . css’’〉——> </head><body><hl> This is my pagel. <br> </hl></body></ >2.<!DOCTYPE PUBLIC l!-//W3C//DTD 4.01 Transitional//EN l!> < ><head><title>2. </title〉<meta http—equiv=n keywords" content=l!keywordl z keyword2, keyword3IT> <metahttp-equiv=n description11 content="this is my page1’〉<meta http-equiv=n content-type11 content = n text/ ; charset=UTF-8n> clink rel=,fstylesheet,f type=,f text/css,f href=,f mycss . css,f >< !——<link rel=n stylesheet n type=n text/css,T href=!l. /styles . css"〉——> </head><body><hl> This is my page2. <br> </hl> </body></ >This is my page2.Mycss.css0CHARSET "UTF-8";hl {color: red;background-color: gray;text-align: left;font-size: 58pt;}body{color: blue;background-image: url (Sunset.jpg); }实验编号 2实验名称___________________ 熟悉DOM的原理和使用rm(w"在刚才建立的index. 页而添加一个删除按钮,做一个基于DOM的js函数,每次点击删除按钮就会将刚才生成的一个控件删除。
《Web程序设计》实验指导书
(3) 按 Ctrl +F5 运行网页,查看效果如图 T.2 所示。
图 T.2 运行效果
【练习 2】发布 Web 应用程序。 (1) 这里选择 Visual Studio 中的提供的预编译部署功能进行简单的网站部署测试。在 Visual Studio 2008 中选择【生成】菜单下的【发布网站】 ,弹出如图 T.3 所示的对话框,选择 网站发布的目标位置,点击确定。
Web 程序设计实验
2015-2016 第二学期
B130505/B130506
目
录
实验 1 创建与发布 应用程序 ............................................................................ 1 目的与要求 ....................................................................................................................... 1 内容和步骤 ....................................................................................................................... 1 实验 2 C#程序设计 ................................................................................................................ 3 目的与要求 ....................................................................................................................... 3 内容和步骤 ........................................................................................................................... 3 实验 3 内置对象的应用 ........................................................................................................ 4 目的与要求 ....................................................................................................................... 4 内容和步骤 ....................................................................................................................... 4 实验 4 服务器控件应用 ..................................................................................... 9
Web程序设计(JSP)实验
WEB程序设计(JSP)实验1.编写一个JavaScript程序,在JSP页面上输出当前日期。
<%@page language="java"contentType="text/html; charset=gb2312"%><%@page import="java.util.Date"%><html><head><title>Insert title here</title></head><body><center><% String today=new Date().toLocaleString(); %>今天是:<%=today%></center></body></html>实验二 JSP语法的应用实验内容和要求:1.实现客户在一个登录页面form.jsp(如图2-1)输入登录信息并单击“确定”后跳转到另一个页面doForm.jsp(如图2-2)输出“用户名”和“口令”信息。
图2-1图2-2要求:分别用下列三种方法实现。
(1)创建一个JavaBean----User类,该类含有两个属性username和password,给每个属性增加相应的get和set方法。
在doForm.jsp页面中用<jsp:useBean>动作标识实例化User类对象,再使用<jsp:setProperty>动作标识来把客户在form.jsp表单中填写的值赋给对象,最后用<jsp:getProperty>在页面输出结果。
(2)创建一个JavaBean----User类,该类含有两个属性username和password,给每个属性增加相应的get和set方法。
广州大学web实验_实验四
广州大学学生实验报告一、实验目的WEB综合设计二、实验设备Tomcat windows10 eclipse三、实验内容自选主题设计并建立一个网站(如个人网站,花店网站,书店网站,网上论坛等)。
实验成绩根据综合设计中包含所学的web技术:静态HTML, CSS,JavaScript, JSP, JavaBean, Servlet 技术的多少给定。
四、实验程序实现一个简单的购物车程序1. 注册页面 reg.jsp<%@ page language="java" pageEncoding="utf-8"%><!DOCTYPE html><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"> <title>注册页面</title><link href="styles/index.css"rel="stylesheet"></head><body><!-- 文件引入的两种方式 --><%-- <%@include file="include/header.inc.html"%> --%> <jsp:include page="include/header.inc.html"></jsp:include><p class="welcome">欢迎进入购物车注册界面</p><form action="doreg.jsp"method="post"><div><h2>用户名:</h2><input class="input"type="text"name="username"placeholder="请输入用户名"></div><div><h2>密码:</h2><input class="input"type="password"name="pwd"placeholder="请输入您的密码"></div><div><input class="input1"type="submit"value="注册"><input class="input1"type="reset"value="重置"></div><h3>已有账号,直接<a href="index.jsp">登陆</a></h3></form><%@include file="include/footer.inc.html"%></body></html>2. 需要写一个数据库来存储用户信息,表名为·user·;(创建表的语句不写)2.1 还需要一个表来存储商品信息goods 表create table `goods1` (id int not null auto_increment primary key,goods_name varchar(20), goodspic varchar(30),goods_pri double(10), goods_name_en varchar(20))engine = InnoDB default charset=utf8;3.用户注册的信息以post 的方式提交给doreg.jsp来处理,注册成功即跳转商品页面goods.jsp<%@page import="java.sql.*"%><%@ page language="java" pageEncoding="GB18030"%><%try{Class.forName("com.mysql.jdbc.Driver");//加载数据库驱动,注册到驱动管理器String url = "jdbc:mysql://127.0.0.1:3301/shopcar";//数据库连接字符串 String usename = "root";String password = "123456";Connection conn =DriverManager.getConnection(url,usename,password);//创建Connection连接 if(conn != null){System.out.println("数据库链接成功!");//conn.close();//关闭数据库连接String insert_db = "INSERT INTO`user`(uesrname,password)values(?,?)";//插入操作PreparedStatement statement =(PreparedStatement)conn.prepareStatement(insert_db);statement.setString(1,request.getParameter("username"));statement.setString(2,request.getParameter("pwd"));statement.executeUpdate();session.setAttribute("userName",request.getParameter("username"));//给当前注册用户开启会话out.println("插入成功");out.println("页面在3秒钟内自动跳转");out.println("<a href=\"goods.jsp\">点击请进入购物页面</a>");}else{out.println("数据库连接失败");//输出错误信息}}catch(ClassNotFoundException e){e.printStackTrace();}catch(SQLException e){e.printStackTrace();}%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><meta http-equiv="refresh"content="2;url=goods.jsp"><title>注册页面</title></head><body></body></html>4.已有账户的用户直接登陆进行,index.jsp<%@ page language="java" import="java.util.*"contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%><%Cookie[] cookies = request.getCookies();String uname = "";String upwd = "";String utrue = "";if(cookies != null ){for(int i = 0 ; i < cookies.length; i++){Cookie cookie = cookies[i];if(cookie.getName().equals("rname")){uname = cookie.getValue();}else if(cookie.getName().equals("rpwd")){upwd = cookie.getValue();}else if(cookie.getName().equals("rtrue")){utrue = cookie.getValue();}}}%><!DOCTYPE html><html><head><meta http-equiv="X-UA-Compatible"content="IE=edge,chrome=1"><meta http-equiv="Content-Type"content="text/html; charset=utf-8"> <title>欢迎进入购物车</title><link href="styles/index.css"rel="stylesheet"></head><body><%-- <%@include file="include/header.inc.html"%> --%><jsp:include page="include/header.inc.html"></jsp:include><p class="welcome">欢迎进入购物车登陆界面</p><form action="show.jsp"><div><h2>用户名:</h2><input class="input"type="text"name="username"value="<%= uname %>"placeholder="请输入用户名"></div><div><h2>密码:</h2><input class="input"type="password"name="pwd"value="<%= upwd %>"placeholder="请输入您的密码"></div><div><input type="checkbox"name="remember"value="true"><input class="input1"type="submit"value="登陆"><input class="input1"type="reset"value="重置"></div><div><p>还没有注册,请先注册</p><a href="reg.jsp">注册</a></div></form><%@include file="include/footer.inc.html"%></body></html>5.检测登陆结果用show.jsp来验证。
web实验4
《web程序设计》实验报告实验名称:JSP数据库应用开发实验地点:11-319学生姓名:郑州大学西亚斯国际学院学生学号:郑州大学西亚斯国际学院学生班级:信管一班实验日期:2014年10月30日一、实验目的1.了解数据库的基本概念2.了解数据库SQL Server20083.掌握在SQL Server2008中创建数据库4.掌握在SQL Server2008中创建表5.熟悉SQL的常用查询语句6.了解JDBC的工作原理7.掌握使用JDBC连接数据库的方法8.了解JDBC-ODBC桥连9.掌握纯Java驱动方式连接数据库10.掌握在WEB项目中创建连接数据库的工具类二、实验内容1.在SQL Server2005/ SQL Server2008中创建通知公告用的数据库。
2.使用JDBC驱动的方式进行数据库连接。
3.编写工具类三、实验步骤(记录)1.在SQL Server2005/ SQL Server2008中创建通知公告用的数据库。
1.创建notice数据库建表语句:create database notice效果如下:2。
在数据库notice中创建Notice,Nuser,Type三张表1.建表语句及效果依次如下所示:效果如下:建表语句:效果如下:建表语句:效果如下:建表语句:效果如下:在sql2008中的总体效果图:2.执行sql语句此处以表Notice为例进行演示:1.插入数据:insert into Notice values(1,'关于届毕业生的通知','11月日准备毕业生信息采集','教务处')insert into Notice values(2,'关于届毕业生的通知','10月日准备毕业生信息采集','教务处') 效果如下:2.查询要求查询表Notice中编号为1的通知的所有内容语句:效果如下:3.更改数据:比如要求将Notice中编号为2的通知内容中的日期改为11月20日语句为:效果如下:4..删除数据:比如要求将Notice中编号为2的通知删除语句为:效果如下:5.删除基本表:比如要求将表Type删除语句如下:效果如下:3.配置ODBC数据源具体步骤如下所示配置完成后,编写测试类进行测试此处以Nuser表为例进行测试要求输出Nuser表的内容。
java web 实验报告 4
实验报告成绩:教师:课程名称: Java Web应用开发技术实用教程实验名称: JDBC技术一、实验目的(1)使用JDBC技术。
(2)在JSP中使用数据库。
二、实验工具(1)JDK 1.4、JDK 1.5或JDK 1.6,可以从SUN公司的网站免费下载。
(2)编辑工具JCreator,可以从网上免费下载。
(3)Tomcat服务器,也可以从网上免费下载。
三、实验步骤(1)数据库基本操作。
1)建立数据库表product,其结构如下:┏━━━━━━━┳━━━━┓┃列名┃类型┃┣━━━━━━━╋━━━━┫┃ProductID ┃.mt ┃┣━━━━━━━╋━━━━┫┃ ProductName ┃ text ┃┣━━━━━━━╋━━━━┫┃ ProductPrice ┃.mt ┃┣━━━━━━━╋━━━━┫2)在JCreator中输入以下文档,并保存为ProductAdd.iava。
Importjava.sql.*;class ProductAdd(129页代码}3)编译ProductAdd.iava4)运行ProductAdd.iava(2)在JSP中使用JDBC。
1)用上一章使用的student表注册数据源,名称为sun,用户名为sa,无口令。
2)打开JCreator,输入以下文档,并保存为seatoh.jsp。
<HTML><BODY><P>查询成绩:<FONT size=1><P>输入学生的姓氏:<BR><FORM action=”byname2jsp”method=post name=form><INPUT type="text”name="name’’value=”王”><BRl><INPUT type=submit name=’’g..vaIHe=’’提交‘·></FORM></BODY></HTML>3)在JCreator中输入以下文档,并保存为byname2.jsp。
Java_WEB《Web程序设计》实验指导书
W eb程序设计实验指导书1实验目的与要求 (1)2实验环境 (2)3上机环境 (2)4实验一般步骤 (3)5 实验学时 (3)6 实验内容和要求 (3)6.1JSP运行环境安装及常用HTML标记使用 (3)6.2 表格、框架网页布局的使用 (8)6.3JavaScript客户端脚本编程 (9)6.4 JSP内部对象使用 (19)6.5 JSP与JavaBean及Servlet使用 (27)6.6数据库使用及JDBC与数据库的连接 (34)6.7 JSP应用实例一网上书店前端及数据库设计 (44)6.8网上书店服务器端设计 (45)1 实验目的与要求上机操作是本课程必不可少的实践环节,主要目的是锻炼和培养学生实际操作技能和解决实际问题的能力。
要求学生掌握用JSP技术进行网络程序的设计、调试和发布的方法,熟悉用HTML标示及Dreamwear 进行页面设计的方法,通过JSP提供的各种对象和组件以及DTML提供的各种对象进行B/S架构系统设计的全过程,获得JSP技术及HTML进行实际应用的体会,加深对JSP技术和HTML 本身的理解,掌握JSP服务器端程序设计的方式和方法,掌握JSP与JavaBean 和Servlet的关系,掌握基本的JDBC连接数据库的方法,得到网络程序系统设计方法和技巧的实际训练,从而使学生能真正利用ASP技术进行动态网页的设计,进而可以开发实用的网站系统。
(1)加深对讲授内容的理解,尤其是一些语法规定,光靠课堂讲授,既枯燥无味又难以记住,但它们都很重要。
通过多次上机,就能自然地、熟练地掌握。
通过上机来掌握语法规则是行之有效的方法。
(2)熟悉所用的计算机系统的操作方法,也就是了解和熟悉HTML和JSP技术进行网络程序开发的过程和环境。
一个程序必须在一定的外部环境下才能运行,所谓“环境”,就是指所用的计算机系统过程的硬件和软件条件。
使用者应该了解为了运行一个网络程序,需要哪些必要的外部条件(例如硬件配置、软件配置),可以利用哪些系统的功能来帮助自已开发程序。
WEB程序设计实验报告-15单(4)
实验四、编程实验序号:4 实验名称:编程适用专业:计算机科学与技术/软件工程学时数: 8学时一、实验目的1、熟悉服务器控件的使用。
2、学会使用服务器控件设计Web页面。
3、学会使用对象。
二、实验设备装有WEB程序设计相关软件。
三、实验步骤1、使用控件,如TextBox、Label、Button等,并结合CSS、Javascript,实现登录页面的实现。
要求点击登录按钮时,弹出提示:您输入的用户名是:**,密码是:**,*为显示输入的用户名和密码,同时将用户名和密码写入session,并跳转到下面第2题页面。
<%@Page Language="C#"AutoEventWireup="true"CodeBehind="login.aspx.cs"Inherits="WebApplication2.login" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><title></title></head><body><form id="form1"runat="server"><div><asp:Label ID="Label1"runat="server"Font-Size="XX-Large"style="margin-bottom: 0px"Text="用®?户¡ì名?"></asp:Label><asp:TextBox ID="TextBox1"runat="server"Height="35px"style="margin-left: 9px"></asp:TextBox><br/><br/><br/><br/><asp:Label ID="Label2"runat="server"Font-Size="XX-Large"Text="密¨¹码?"></asp:Label><asp:TextBox ID="TextBox2"runat="server"Height="35px"style="margin-left: 39px"></asp:TextBox><br/><br/></div><asp:Button ID="Button1"runat="server"Font-Size="XX-Large"onclick="Button1_Click"Text="登Ì?录?"/></form></body></html>using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls;namespace WebApplication2{public partial class login : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){}protected void Button1_Click(object sender, EventArgs e){Session["TextBox1"] = TextBox1.Text;Session["TextBox2"] = TextBox2.Text;if (TextBox1.Text != "" && TextBox2.Text != "")Response.Write("<script>alert('您¨²输º?入¨?的Ì?用®?户¡ì名?是º?:êo" +TextBox1.Text.ToString().Trim() + " ,密¨¹码?是º?:êo" + TextBox2.Text.ToString().Trim() + "');window.location = 'Index.aspx';</script>");}}}2、在平台某页面中使用FileUpload控件,实现文件上传,要求在页面中判断session是否存在,若session不存在,则打开此页面时,提示“您未登录系统,请登录”并跳转到登录页面。
《Web设计与开发基础》实验报告 4
宁波工程学院电信学院计算机教研室实验报告课程名称: Web设计与开发基础实验项目:实验四:ACCESS操作验证实验实验人员:张曙永沈文辉应尚龙王蛟班级:计科13-4 指导教师:陈萌实验位置:电信计算中心北区实验日期: 2014-06-04一、实验目的及要求(一)实验目的1、掌握JavaScript访问本地Access数据库文件的基本编程方法2、掌握使用JavaScript语句将数据库记录显示在页面中的方法3、掌握向本地数据库中添加、删除、修改记录的JavaScript编程方法4、了解数据库操作基本原理,为后续Web服务端页面开发打好基础(二)实验要求按要求完成HTML客户端页面开发,将结果和分析记录在实验报告中。
二、实验设备及软件WINDOWS XP以上操作系统环境的PC机一台;IE8.0及以上版本;Chrome浏览器V27或以上版本。
三.实验题目1、编写本地Access数据库显示页面,要求先使用CSS+DIV设计一个美观的记录演示样式,再使用JavaScript语句将数据库中所有记录读出并显示在指定DIV标记中。
2、编写一个本地Access数据库记录删除页面,要求能删除用户指定的任何记录。
3、编写一个记录修改页面,能对本地Access数据库中的指定记录信息进行修改。
要求修改页面使用CSS样式+DIV标签进行外观设计。
四.实验步骤此处请同学们填写自己的实验过程及步骤,要求记录下编程界面、出错界面、调试界面、最终页面效果界面(包含数据输入过程)等,并为所有步骤配备详细的文字说明。
1. 首先,先建一个access2. 编程界面输入的界面效果使用没有边框的table 放在Div里面删除页面删除 1五.实验结果本处请同学填写如下内容:1.从本地数据库中读取记录的JS代码,以及每条语句的意义;var ttt = new ActiveXObject("ADODB.Connection");// 定义ttt对一个数据库进行访问和操作ttt.Open("DBQ=D://abc.mdb;DRIVER={Microsoft Access Driver (*.mdb)};");// 访问来自D盘的abc.mdb文件方式为 Microsoft Accessvar ppts = new ActiveXObject("ADODB.Recordset");//用于容纳一个来自数据库表的记录集var sql="select * from Student"; //从Student 中选取ppts.open(sql, ttt);var ans="<table border='1'>"; //建立tablewhile(!ppts.EOF){ans=ans+"<tr>" // 各种字符串的加添ans=ans+"<td>"+ppts.Fields("Id")+"</td>";ans=ans+"<td>"+ppts.Fields("stuName")+"</td>";ans=ans+"</tr>";ppts.moveNext();}document.write(ans); //输出在网页上面2 从本地数据库中删除记录的JS代码,以及每条语句的意义;function delStu(id){var conn = new ActiveXObject("ADODB.Connection");conn.Open("DBQ=D://abc.mdb;DRIVER={Microsoft Access Driver (*.mdb)};"); var sql="delete from Student where Id="+id; //删除conn.execute(sql); //执行Command 对象的CommandText 属性中指定的查询、SQL 语句或存储过程下同conn.close();//关闭一个由document.open 方法打开的输出流下同conn = null;alert("删除成功");}3. 从本地数据库中修改记录的JS代码,以及每条语句的意义。
Web程序设计实验项目(3,4)
Web程序设计实验项目(3,4)实验目的:(1)熟练应用页面布局技术,使网页布局合理,内容丰富(2)使用CSS样式使网站具有统一风格实验内容:1、使用CSS技术的制作一个页面,页面内容及显示格式如下图所示HTML技术(红色)CSS用于定义Web页面内容在浏览器上的显示方式,由于HTML 的功能有限,一般不能随意设计版面和编排文字,所以W3C公布了一套HTML的扩展标准CSS,扩展了HTML在排版和文字式样上的功能(蓝色)通过样式定义可以设定很多属性,如字号、颜色、页边距,元素在页面上的绝对位置等。
(绿色)(1)直接定义HTML标记中的style属性实现。
(2)定义内部样式表实现。
(3)嵌入外部样式表实现。
(4)链接外部样式表实现2、制作一个具有三个页面的网站,内容自定,应用CSS技术使它们具有相同的风格。
实验目的:(1)理解脚本的基本概念,JavaScript运行机制(2)熟练掌握将JavaScript语句嵌入HTML文档,和调入外部JS文件的方法(3)应用JavaScript基本语法、控制语句和函数完成JavaScript 程序设计(4)掌握window对象、document对象和JavaScript内置对象的属性和方法的应用(5)熟练应用JavaScript编制事件处理程序实验内容:1、使用JavaScript编制一段代码完成以下功能:(1)要求输入一个姓名。
(2)用确认框检查输入是否正确(是否为合法输入字符,位长是否合理等。
假设只能输入不超过8位长度的英文大小写字符)。
(3)根据输入给出相应的提示。
2、页面上有一幅图像,在状态栏显示有关图像的说明,单击图像时,换成另一幅图像,同时状态栏的内容也做相应的变更。
3、在客户端验证用户输入信息。
如果输入正确,允许链接到网站;如果不正确,禁止链接。
要求用户界面友好。
WEB程序设计实验
WEB程序设计实验WEB程序设计基础实验指导书太原理工大学田玉玲编目录实验1 HTML语言 (2)实验2 网页程序设计-JavaScript (4)实验3 Request与Response对象的应用 (7)实验4 Application对象Session对象的应用 (8)实验5 使用JDBC连接数据库 (10)实验一HTML语言一、实验目的1.掌握常用的HTML语言标记;2.利用文本编辑器建立HTML文档,制作简单网页。
二、实验要求1.独立完成实验。
2.书写实验报告书。
三、实验内容1.在文本编辑器“记事本”中输入如下的HTML代码程序,以文件名sy1.html 保存,并在浏览器中运行。
(请仔细阅读下列程序语句,理解每条语句的作用)源程序清单如下:<html><head><title>Example</title></head><body bgcolor="#00DDFF"><h1><B><I><FONT COLOR="#FF00FF"><MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE></FONT></I></B></h1><hr><h2 align=center><FONTCOLOR="#0000FF">A simple HTML document</FONT></h2><EM>Welcome to the world of HTML</EM><p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p><p>Following is three chapters<ul><li>This is the chapter one</li><li><A HREF="#item">This is the chapter two</A></li><li>This is the chapter three</li></ul></p><hr><p><A NAME="item">Following is items of the chapter two</A> </p><table border=2 bgcolor=gray width="40%"> <tr><th>item</th><th>content</th></tr><tr><td>item 1</td><td>font</td></tr><tr><td>item 2</td><td>table</td></tr><tr><td>item 3</td><td>form</td></tr></table><hr><p>1<p>2<p>3<p>4<p>5<p>6<p>7<p><B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B> </p></body></html>2.编写一个能输出如图所示界面的HTML文件。
《web程序设计》指导书
《Web程序设计》实验指导书单位:信息工程学院编写:XXXXX时间:2015年11月目录实验一:语法基础 (1)一、实验目的 (1)二、实验要求 (1)三、实验内容 (1)实验二:数据交互处理 (4)一、实验目的 (4)二、实验要求 (4)三、实验内容 (4)实验三:Ajax数据交互 (14)一、实验目的 (14)二、实验要求 (14)三、实验内容 (14)实验四:综合设计 (22)一、实验目的 (22)二、实验要求 (22)三、实验内容 (22)实验一:语法基础一、实验目的1.掌握PHP语法基本元素,掌握数据类型、变量和常量、运算符、表达式的使用。
2.掌握PHP流程控制。
3.掌握在Html和PHP命令标记相结合的方法。
4.掌握用PHP和Html交互的处理方法。
二、实验要求1.要求学生独立完成2.熟练掌握PHP与HTML标签的结合的操作3.要求独立完成实验,并使用到PHP的基本语法三、实验内容第一题:在html中嵌入PHP命令标记编写一个php动态页面,在html标记中用先嵌入一段php代码,给变量$xh赋一个文本数值;然后把$xh的数值作为一个html表单中的文本型输入框的value属性值。
编程示例:<html><head><title>在html中嵌入PHP命令</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"></head><body><h1>PHP inside html</h1><?php$xh="081101";?><form action="" method="post">学号是<input type="text" name="xh" size="20" value="<?php echo $xh;?>"> </form></body></html>第二题:PHP语法实验(1)变量、表达式和判断的使用编写一段PHP代码,用于判断一个整数变量的数值是否大于5,并显示判断结果。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
实验四DIV+CSS布局实验学号: 092715206 姓名:崔兆文1.1 实验目的通过实验理解DIV+CSS布局的特点;通过综合的练习掌握DIV+CSS布局的基本方法和常见的几种布局方式。
1.2 实验要求实验项目见书本P127页,请完成实验并将实验过程写在下面的实验内容部分,每题要求给出题目、源代码(带必要的注释)以及程序运行效果截图。
1.3实验预习题1.请问为什么页面布局从原先的表格布局变成现在的流行的DIV+CSS的布局方式?答:原先表格布局改动不便,需重新调整,工作量大。
采用Div+CSS布局方式的优点如下:●缩减了页面代码,提高了页面的浏览速度。
●缩短了网站的改版时间,设计者只要简单地修改CSS文件就可以轻松地改版网站。
●强大的字体控制和排版能力,使设计者能够更好的控制页面布局。
●表现和内容相分离,设计者将设计部分剥离出来放在一个独立样式文件中,减少了网页无效的可能。
●方便搜索引擎的搜索,使用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到用户的内容。
●用户可以将许多网页的风格格式同时更新。
题2.请问什么是CSS盒模型?盒模型的宽度和高度是如何计算的?答:CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
盒模型将页面中的每个元素看做一个矩形框,这个框由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成题3.为了屏蔽各种浏览器默认的代理样式表,在设计样式的时候可以采用什么方式在达到这个目的?答:通常情况,为了使边距效果在各浏览器一致,往往采用*{margin:0;padding:0}来屏蔽各浏览器的默认代理样式。
题4.在实现元素居中的时候,通常使用的text-align或align属性不一定在各种浏览器中都能起作用,那么标准的居中方式是如何实现的,请解释其原理。
答:margin:0 auto;margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right因为0auto,表示上下边界为0,左右则根据宽度自适应相同值(即居中)题5.CSS有哪些定位方式,请给分别给出每种定位方式的注意点。
答:static静态定位为默认值,为无特殊定位,对象遵循HTML定位规则。
relative生成相对定位的元素,相对于其正常位置进行定位。
absolute生成绝对定位的元素。
元素的位置通过left、top、right和bottom属性进行规定。
fixed生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过left、top、right 以及bottom属性进行规定1.4 实验内容题1:假如有下面图1.1所示的body。
图1.1 body正文请针对这些div编写相应的CSS使它们编程奥运五环图形,如图1.2所示图1.2 固定宽度布局提示:1.利用border-radius实现圆圈效果;圈的边框粗细10px;2.利用nth-child(n)伪类选择符实现对某个圆圈的选择控制;3.利用混合定位实现五个圆圈相对于外框的相对定位。
4.源代码:01.<html>02.<head>03.<meta charset="UTF-8">04.<title></title>05.<style type="text/css">06.#wuhuan07.{08.width: 800px;09.height: 400px;10.border: 1px solid;11.position:relative;12.border-radius:0px;13.}14.15. div:nth-child(1)16.{17.margin:10px;18.width: 200px;19.height: 200px;20.border: 10px blue solid;21.position: absolute;22.border-radius:50%;23.}24.25.div:nth-child(2)26.{27.width:200px;28.height: 200px;29.border: 10px yellow solid;30.position:absolute;31.left: 110px;32.top: 110px;33.border-radius:50%;34.}35.36.div:nth-child(3)37.{38.width:200px;39.height: 200px;40.border: 10px black solid;41.position:absolute;42.left: 230px;43.top: 10px;44.border-radius:50%;45.}运行效果截图:题2:制作如图2所示的三列固定宽度居中型布局。
图2 三列固定列宽布局备注:整体居中,header和footer宽度均为900像素,高度均为60像素,sidebar和sidebar2宽度为200像素,高度300像素,content宽度为480像素;高度均为200像素;背景色自己设即可。
源代码:79.<!DOCTYPE html>80.<html>81.<head>82.<meta charset="UTF-8">83.<title></title>84.<style type="text/css">85.#Bbox86.{87.text-align:center;88.margin:0auto;89.width:902px ;90.position:relative;91.}92.#Header,#Footer93.{94.width:900px;95.height:60px;96.background-color:#0099FF;97.}98.#sidebar,#sidebar299.{100.width:200px;101.height:300px;102.background-color:#00CC99; 103.}104.#content105.{106.width:480px;107.height:300px;108.background-color:#00FFCC; 109.margin:0auto;110.}111.#sidebar{float:left;}112.#sidebar2113.{114.position:absolute;115.right:0px ;116.top:70px117.}118..place{height:10px;clear:both;} 119.</style>120.</head>121.<body>122.<div id="Bbox">123.<div id="Header">Header</div> 124.<div class="place"></div>125.<div id="sidebar">sidebar</div> 126.<div id="content">content</div> 127.<div id="sidebar2">sidebar2</div>128.<div class="place"></div>129.<div id="Footer">Footer</div>130.</div>131.</body>132.</html>运行效果截图:题3:制作如图3所示的两列固定宽度型布局。
所需素材网站上下载。
图3 固定宽度布局说明:图片加边框效果,日期右侧的竖线实际是包裹他的div的右边框。
要求使用CSS实现类似图片上的布局和显示效果,若有细微的距离或文字差别可以或略不计。
源代码:133.<!DOCTYPE html>134.<html>135.<head>136.<meta charset="UTF-8">137.<title></title>138.<style type="text/css">139.#bigbox140.{141.142.width:600px;143.height:800px;144.position:relative;145.}146.#head147.{148.margin:0auto;149.width:1000px;150.height:140px;151.background-color: black; 152.}153.#left154.{155.width:30px;156.height:560px;157.background-color: black; 158.}159.#left-1160.{161.position:absolute;162.width:90px;163.height:160px;164.border-right:solid grey; 165.top:170px;166.left:30px;167.text-align:right;168.color: black;169.font-weight:bold; 170.}171.#left-2172.{173.position:absolute;174.width:90px;175.height:160px;176.border-right:solid grey; 177.color: black;178.font-weight:bold;179.top:360px ;180.left:30px;181.text-align:right;182.}183.#left-3184.{185.position:absolute;186.width:90px;187.height:160px;188.border-right:solid grey; 189.color: black;190.font-weight:bold;191.top:540px;192.left:30px;193.text-align:right;194.}195.#center-1196.{197.position:absolute;198.width:330px;199.height:50px;200.font-weight:bold;201.color: black;202.top:170px;203.left:135px;204.}205.#center-2206.{207.position:absolute;208.width:330px;209.height:50px;210.font-weight:bold;211.color: black;212.top:360px;213.left:135px;214.}215.#center-3216.{217.position:absolute;218.width:330px;219.height:50px;220.font-weight:bold;221.color: black;222.top:540px;223.left:135px;224.}225.#center-4226.{227.position:absolute;228.width:110px;229.height:100px;230.border:solid grey;231.background:url(img/photo04.gif); 232.top:220px ;233.left:135px ;234.。