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><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> </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"><context:component-scan base-package="controller" /><mvc:annotation-driven /><bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> <property name="prefix" value="/WEB-INF/jsp/"/> <property name="suffix" value=".jsp"/> </bean><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><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

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.。