WEB程序设计实验指导书

《WEB程序设计实验指导书》由会员分享，可在线阅读，更多相关《WEB程序设计实验指导书（29页珍藏版）》请在金锄头文库上搜索。

1、WEB程序设计实验指导目 录实验1 WEB程序运行环境配置实验2 页面设计与HTML的使用实验3 层叠样式表CSS的应用实验4 客户端脚本语言的使用实验5 WEB编程语言语法基础实验6 内置对象的应用实验7 数据库编程技术实验8 JavaBean的应用实验9 JSP和Servlet实验10 JSP和XML实验1 WEB程序运行环境配置一、实验目的1、 掌握JSP程序运行环境的配置过程；2、 理解JSP程序的运行原理。二、实验内容1、 JSP程序运行环境配置。本实验采用Windows2000 Server+JDK+Tomcat。2、 修改WEB服务端口和网站的根路径。三、实验要求1、 掌握JSP

2、程序运行环境配置的基本要求。四、实验环境硬件环境：PC微机软件环境：Windows XP或者Windows2000操作系统 五、实验步骤1、 进入网址http:/ ，下载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，其值设为 .;%

3、 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

4、.println(Hello World); 5、 进入网址http:/jakarta.apache.org/tomcat/index.html，下载其最新的Tomcat程序jakarta-tomcat-5.0.16.exe。6、 安装下载的Tomcat V5.0.16程序。选择一个安装路径，这里假定安装路径为C:Tomcat5.0，其他设置可用安装程序的默认设置。7、 安装完后启动tomcat。启动成功后，任务栏的托盘处可见一含有绿色三角标记的Apache Tomcat图标。8、 在浏览器地址栏输入 http:/localhost:8080，如果看见图1-1的界面，说明JSP运行环境配置成功

5、。9、 准备修改服务端口和网站的根路径。在实际应用中，一般需要更改这两个基本配置，修改这两个配置均在Tomcat安装目录下的conf子目录下的server.xml文件中。修改前请备份好server.xml文件。10、 修改服务端口。用记事本或其他文本编辑器打开server.xml文件，定位到93行，将94行的“8080”修改为需要的端口号，如“8090”。重新启动Tomcat，在浏览器地址栏输入 http:/localhost:8090，可见类似图1-1的界面，说明端口修改成功。图 1-1 Tomcat的欢迎界面11、 修改网站的根路径。首先在C盘创建站点目录jsproot，并在其下创建ROO

6、T子目录，在ROOT目录之下创建WEB-INF子目录，注意，JSP对目录是区分大小写的。12、 然后打开server.xml，找到第215行的根目录的配置信息，其中appBase属性设置了当前的网站目录对应服务器物理路径地址，如图1-2所示。图 1-2 根路径的配置信息13、 将215行的appBase修改成所需的网站根路径，如“C:jsproot”，修改完后如图1-3所示。图 1-3 修改后的根路径信息14、 接下来创建一个1.jsp程序，存放在C:jsprootROOT目录下，其代码如下：15、 重新启动Tomcat服务器，在浏览器中输入http:/localhost:8090，将看到如图

7、1-4所示界面。图 1-4 更改根路径信息后的目录浏览16、 在浏览器中输入http:/localhost:8090/1.jsp，将看到如图1-5所示界面。图 1-5 程序运行结果17、 为以后的实验能顺利进行，恢复备份的server.xml。六、实验报告要求1、需要提供安装过程中设置的数据，如安装路径等。2、安装后修改数据后运行的若干截图。七、思考题1、输入http:/localhost:8080时所看见的页面是哪个程序？输入http:/localhost:8090地址时，访问的又是哪个物理地址的页面？2、除了目前这种运行环境可以满足JSP程序运行需求，还有什么其它的运行环境？简要地介绍一二

8、。实验2 页面设计与HTML的使用一、实验目的1、 掌握页面设计的基本技巧；2、 掌握使用HTML语言制作静态页面的技术；3、 了解网站的基本建立过程；4、 掌握使用Frontpage或者Dreamweaver制作网页的基本技术。二、实验内容1、简易静态网站页面设计与制作。围绕某一主题设计站点页面，并使用HTML制作。2、框架网页制作（可选）。创建一个目录页面和一个目录型框架页面，该目录框架能够装载上面制作的所有页面。三、实验要求1、 了解站点风格的概念；2、 理解主页、栏目页、导航条、目录框架等术语；3、 熟悉HTML的常用标记使用以及框架网页的制作；4、 掌握使用Frontpage或者Dr

9、eamweaver制作网页的基本技术；5、 实验前应该先选定所要创建网站的主题（如：个人网站、自我推荐网站、班级网站、某种专题网站等）和风格；6、 围绕主题和风格，设计站点的主页、栏目及其内容，并且设计出主页和栏目页面的布局；7、 准备好网页制作时所需的资料以及图片等素材。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（UltraEdit、EditPlus、Notepad等）或者Frontpage或者Dreamweaver 五、实验步骤1、 选定简易网站的主题和风格，围绕主题和风格，设计好站点主页和栏目页面的布局，准备所需资料和素材。2、 创建目录XXX_yy作为

10、该站点目录（其中XXX为学号，yy为站点主题名字），并在其中创建一个images子目录，且将准备好的图片等素材拷贝到images里。注意，所有目录、页面、素材等名称均不要用中文命名，可采用英文单词或者拼音的命名方式。3、 在XXX_yy站点目录下，按照事先的设计，制作出站点主页index.htm（注：主页中必须有站点的导航条），以及若干个栏目页面（至少两个子栏目），要求所制作的页面，综合起来后必须使用到标题、表格、列表、图片、段落、超链接这些HTML的常用标记。4、 浏览index.htm，点击导航条中的超链接，观察结果。5、 在XXX_yy站点目录下，制作一个目录页面catalog.htm

11、（注：把导航条置于目录页面中）。6、 接下来再制作一个目录型的框架页面main.htm，该框架页面可采用上下结构，也可采用左右结构， 并且该框架页面必须能够装载目录页面、主页和所有的栏目页面。7、 浏览main.htm，点击目录页面中的超链接，观察结果。六、实验报告要求1、 描述站点主题、风格以及栏目设计思想。2、 主页面index.htm、框架页面main.htm（可选）的源码清单。3、 页面浏览的若干截图。七、思考题1、 理解站点风格对页面设计有没有帮助？为什么？2、 制作页面时，按照设计对页面进行布局可以采用什么方法？实验3 层叠样式表CSS的应用一、实验目的1、 掌握页面加载CSS的三

12、种方式；2、 掌握CSS美化页面的技巧；3、 了解运用CSS统一站点风格的技巧；4、 掌握使用Frontpage或者Dreamweaver制作以及应用CSS的技术。二、实验内容1、页面加载CSS的三种方式。通过制作一个网页，其中用到三种CSS的加载方式，来掌握页面应用CSS的技术。2、应用CSS美化网页统一站点风格。制作两种风格的样式表，一种应用到站点主页，一种应用到站点栏目页面。三、实验要求1、 实验前简单设计出网站页面的色彩风格，要求主页使用一种风格，其它子栏目使用另一种风格，并围绕所设定的风格，准备所需的素材；2、 理解外部样式表、嵌入式样式表以及内联式样式的概念；3、 本实验建立在实验

13、二的基础上，必须事先将实验二制作的站点页面准备妥当。四、实验环境硬件环境：PC微机软件环境：Windows 操作系统、文本编辑器（Notepad、editplus等）或者Frontpage或者Dreamweaver 五、实验步骤1、 进入XXX_yy站点目录，创建test子目录。2、 在test子目录下，新建一个页面css3.htm，在该页面中插入一个3行1列的表格，其中表格的第一行输入文字“应用外部样式”，第二行输入文字“应用嵌入式样式”，第三行输入文字“应用内联式样式”。3、 在test子目录下，新建一个外部样式表文件style.css，该样式表中定义一个名为firststyle的类选择符

14、，其样式为字体黑体、24磅、色彩#CC0000、段落格式居中、背景色#ECECEC。将css3.htm页面中表格第一行单元格应用style.css外部样式表中的样式firststyle。4、 接下来在css3.htm页面中加入嵌入式样式表，该样式表中定义一个名为secondstyle的类选择符，其样式可以参照firststyle来自行设计，但注意不能一样。将css3.htm页面中表格第二行的单元格应用嵌入式样式表中的样式secondstyle ；5、 最后，对于css3.htm页面中表格第三行的单元格应用内联式样式，其样式参照前面自行设计，但注意不能一样。图 3-1 css3.htm参考效果图

15、6、 在XXX_yy站点目录下，将准备好的素材拷贝到images子目录。7、 打开站点主页index.htm，在页面中加入嵌入式样式表，样式表中定义的内容必须包括网页的背景色、背景图片（可选）和前景色，表格单元格的各种样式定义，超链接不同状态时的样式，其它样式（如滚动条）依据自己喜好选择，所定义的样式则依据所设计的主页风格，最后根据需要修改部分页面代码，使得页面能够应用这些样式。8、 新建一个外部样式表文件cata.css，该样式表将依据所设计的栏目页面风格来定义样式，样式表所要定义的内容参照上一条中的规定，并最终将该样式应用于各个栏目页面。9、 浏览主页、栏目页面，观察结果。六、实验报告要求1、 描述站点色彩风格的设计思想。2、 style.css，css3.htm，cata.