WEB技术实验指导书.docx

WEB技术实验指导书.docx

《WEB技术实验指导书.docx》由会员分享，可在线阅读，更多相关《WEB技术实验指导书.docx（60页珍藏版）》请在冰豆网上搜索。

WEB技术实验指导书

《Web技术与网页设计》实验指导书

计算机与信息学院

2008年7月

前言

Web技术是网上各种应用的基础，是计算机科学与技术专业的一门主要课程。

它具有技术基础课与技术实践课双重特性，是一门综合性强、既涵盖了常用的信息应用、处理与管理概念，又综合了大多Web技术的具有相当复合程度的课程。

使用Web方式进行应用系统的开发是当前的一种发展趋势，随着网上应用系统、企事业管理信息系统、电子商务和电子政务等需求的增加，Web技术的应用也将越来越广泛。

它也是从事信息工作的技术人员和领导们需要掌握的重要技能之一。

通过该课程学习，学生基本掌握Web站点构建技术、Web编程技术及数据库信息发布三个层面的技术，具备构建Web站点软硬件平台的基本技能、基本的Web编程能力及数据库信息存储、发布与管理能力。

由于《Web技术与网页开设计》是一门实践性较强的课程，课堂教学应该与实践环节紧密结合。

将《Web技术与网页开设计》课程建设成一流的课程，是近期《Web技术与网页开设计》课程努力的方向。

目前，在学校的大力支持下，我们的实验室具备良好的实验环境，安装了各种设计网页技术的软件，为学生学习网页和网络编程提供了一个良好的条件。

希望同学们能够充分利用实验条件，认真完成实验，从实验中得到应有的锻炼和培养。

本实验指导书由张延红整理编写，李谦老师协助。

因时间仓促，错误在所难免，希望同学们在使用本实验指导书及进行实验的过程中，能够帮助我们不断地发现问题，并提出建议，使《Web技术与网页开设计》成为具有一流水平的课程。

目录

实验要求4

实验一编程环境的熟悉1

实验二IIS配置及简单应用3

实验三DreamweaverMX2004基本应用5

实验四熟悉ASP技术及它的内置对象9

实验五ASP服务器组件实验35

实验六Connection对象,Command对象,Recordset对象42

实验七实现与后台数据库的连接46

实验八ASP网络程序设计--综合实例51

实验九在线图书销售系统的设计56

实验要求

一、预习实验内容

1．明确实验目的，了解和掌握本实验所需要的理论及相关知识；

2．准备相关资料，预备实验时参考。

二﹑在《Web页面开发技术》的课程实验过程中，要求学生做到：

1.预习实验指导书有关部分，认真做好实验内容的准备，就实验可能出现的情况提前作出思考和分析。

2.仔细观察上机和上网操作时出现的各种现象，记录主要情况，作出必要说明和分析。

3.认真书写实验报告。

实验报告包括实验目的和要求，实验情况及其分析。

对需编程的实验，写出程序设计说明，给出源程序框图和清单。

4.遵守机房纪律，服从辅导教师指挥，爱护实验设备。

5.实验课程不迟到。

如有事不能出席，所缺实验一般不补。

三、实验的验收

实验的验收分为两个部分。

第一部分是上机操作，包括检查程序运行和即时提问。

第二部分是提交书面的实验报告。

此外，针对以前教学中出现的问题，网络实验将采用阶段检查方式，每个实验都将应当在规定的时间内完成并检查通过，过期视为未完成该实验，不计成绩。

以避免期末集中检查方式产生的诸多不良问题，希望同学们抓紧时间，合理安排，认真完成。

实验一编程环境的熟悉

一、实验课时

2学时/1次上机实习操作；

二、实验目的

1、学会使用MacromediaDreamweaver软件，了解并掌握该软件的各种功能，为以后的网页设计打下基础。

2、重点学习使用“页面创建”和“设置服务器信息”功能。

三、实验环境

操作系统为Windows2000或者WindowsXP，应用软件为MacromediaDreamweaver。

四、MacromediaDreamweaverMX软件使用说明

MacromediaDreamweaverMX是创建专业网站的最佳途径,同时也是构建强大Internet应用程序的最简便的途径。

开发人员第一次能在一个环境内快速创建和管理网站及Internet应用程序。

DreamweaverMX是一个完整、集成的解决方案,可为您提供可视化的布局工具、快速的web应用程序开发以及广泛的代码编辑支持。

1、启动

单击“开始”，依次指向“程序”、“Macromedia”，然后单击“MacromediaDreamweaverMX”。

2、熟悉和了解MacromediaDreamweaverMX界面

视窗和面板综述：

（1）起始页面（未显示）可用来开启最近使用的文件或建立新文件。

也可以在起始页面中，进入产品导览课程或教学课程，增进对Dreamweaver的了解。

（2）插入列包含将各种「物件」（如影像、表格和图层）插入文件中所需的按钮。

每个物件都是片段的HTML程式码，当您将它插入文件时可在其中设定各种属性。

例如，您可以在「插入」列中按一下「表格」按钮，插入表格。

如果您想要的话，可以利用「插入」选单而非「插入」列来插入物件。

（3）文件工具列包含按钮和弹出式选单，可提供「文件」视窗的各种不同检视方式（如「设计」检视和「程式码」检视）、各种检视选项和一些常用的作业（如在浏览器中预览）。

（4）文件视窗会在您建立及编辑目前文件时显示它。

（5）属性检测器让您检视和变更已选取的物件或文字之各种属性。

每种物件都有不同的属性。

（6）面板群组是放在某个标题底下的一组组相关面板。

若要展开面板群组，请按一下群组名称左边的展开箭头；若要卸除面板群组，请拖曳群组标题列左边缘上的移驻夹。

（7）档案面板可用来管理Dreamweaver网站或远端伺服器中的档案和资料夹。

「档案」面板还可以存取本机磁碟上的所有档案，很像「Windows档案总管」（Windows）或Finder（Macintosh）。

Dreamweaver还提供多种没有在此显示的其他面板、检测器和视窗，如「CSS样式」面板和「标签」检测器。

若要开启Dreamweaver面板、检测器和视窗，请使用「视窗」选单。

选单综览

（1）检视选单让您以不同的方式检视文件（如「设计」检视和「程式码」检视），并显示及隐藏各种页面元素和Dreamweaver工具及工具列。

（2）插入选单是「插入」列的替代方式，可将物件插入您页面元素或项目的属性。

使用这个选单，您可以编辑标签属性、变更表的文件。

（3）修改选单可让您变更选取格和表格元素，并执行资料库项目和样版的各种动作。

（4）文字选单让您很容易地将文字格式化。

（5）命令选单提供对各种不同命令的存取，包括根据您的格式化偏好设定来格式化程式码的命令、建立相簿的命令，以及使用MacromediaFireworks来最佳化影像的命令。

（6）网站选单提供可以管理网站和上传/下载档案的选单项目。

（7）视窗选单提供对Dreamweaver内所有面板、检测器和视窗的存取（有关工具列，请参阅「检视」选单）。

（8）说明选单提供对Dreamweaver文件的存取，包括使用Dreamweaver的说明系统、建立Dreamweaver的扩充功能，以及各种语言的参考资料。

除了选单列的选单之外，Dreamweaver还提供许多快显选单，让您很容易就能存取与目前选取范围或区域相关的有用命令。

若要显示快显选单，可在视窗的项目上按一下右键。

五、实验任务：

按照MacromediaDreamweaverMX软件使用说明，练习使用MacromediaDreamweaverMX软件。

实验二IIS配置及简单应用

一、实验目的

1、学会IIS的配置方法

2、掌握ASP脚本程序的一般形式及调试方法

二、实验内容

1、IIS的配置

（1）启动IIS，打开网站的属性窗口，选择“主目录”，将保存你的网站文件的目录设为主目录；

（2）在浏览器地址栏中输入“http:

//127.0.0.1/首页文件名”或“http:

//计算机名/首页文件名”观察结果，体会“浏览器请求、服务器响应”的过程；

（3）使“浏览目录”复选框和“启用默认文档”复选框处未选中状态，在浏览器地址栏中输入“http:

//127.0.0.1”并观察结果；

（4）选中“目录浏览”复选框，在浏览器地址栏中输入“http:

//127.0.0.1”并观察结果；

（5）选中“启用默认文档”复选框，并将你的首页设为默认文档，在浏览器地址栏中输入“http:

//127.0.0.1”并观察结果；

（6）新建一个虚拟目录，虚拟目录的本地路径同主目录的本地路径不在同一物理盘上，在该目录下复制一个HTML文档，并在浏览器中观看结果；

2、运行脚本程序

（1）用Dreameweave或记事本输入建立一个简单的HTML文档，文件名为“first.htm”，保存路径为网站的虚拟目录；

（2）在浏览器中查看HTML文档的运行结果，对比浏览器中显示的结果和“源文件”，并体会脚本在WEB服务器中执行的过程。

3、查看网站属性及虚拟目录属性中的其他项目，通过“帮助”了解有关设置。

4、实验操作题要求：

编写一个简单的ASP网页程序，实现在浏览器IE中输出“这是我的第一个ASP程序！

”。

实验操作步骤：

• 启动dreamweave或文本编辑器中，然后切换到源代码显示方式。

• 在与之间加入以下ASP代码：

<%Response.Write（“这是我的第一个ASP程序！

”）%>

• 将网页保存到形如C:

\Inetpub\wwwroot目录下，文件可命名为first.asp。

• 启动IE浏览器，在地址栏中键入：

http:

//localhost/first.asp，然后按回车。

注意观察输出结果。

• 在wwwroot目录下创建立一个子目录，如myweb，然后将first.asp文件复制到其中，在IE浏览器的地址栏中键入：

http:

//localhost/myweb/first.asp，按回车。

注意观察能否正确运行。

欢迎您光临我的主页

<%

sj="您来访的时间是：

"&date（）&time（）

Response.Writesj'输出结果

%>

三、实验要求

1、实验前熟悉IIS中的基本概念；

2、对实验过程中的各种情况要予以记录并深入思考。

四、思考题

1、什么是虚拟目录？

WEB服务器中为什么用虚拟目录，而不用物理目录？

2、请叙述在浏览器端请求ASP文档并得到动态结果的过程。

3、如果ASP脚本由浏览器执行将会出现什么情况？

实验三DreamweaverMX2004基本应用

3.1创建个人站点

一、实验目的

1、Dreameweave的基本操作

2、完成个人开发的小型网站的基本构架

二、实验内容

1、创建一个站点

2、创建首页，用表格（或框架+表格）完成首页布局

3、在首页中加入文字、图像、背景等网页元素，并且进行修饰

4、创建其他页面，建立和首页的链接

三、实验要求

1、严格按照实验1中的计划完成站点创建及网页的设计

2、将实验中所用的操作及实验结果记录在实验报告中

3.2表单、表格、层与网页布局

一、实验目的

1、进一步掌握JavaScript语言或VBScript语言

2、掌握客户端脚本的调试方法

二、实验内容

1、设计脚本程序，在页面中显示日历，将这个日历插入到你的主页合适的位置上，日历样式可参考图1；

2、设计脚本程序，输入两个运算量并选择运算符，点击“=”后，自动出现结果，如图2所示。

三、实验要求

1、脚本用JavaScript语言或VBScript语言编写，两种语言要都用一次；

2、实验前应写出主要的程序段；

3、完成基本要求的基础上，尽量体现出自己的特色。

四、思考题

1.你认为JavaScript语言或VBScript语言各有何特点，哪些特点是你喜欢的？

3.3VBScript脚本语言

一实验内容:

1在ASP页面中使用VBSCRIPT脚本语言输出文本

2在ASP页面中使用VBSCRIPT脚本语言进行简单编程

（1）变量,常量的定义与输出

（2）定义固定数组并运用循环结构给数组元素赋值,然后输出数组各元素的值.

（3）将上述代码并入一个自定义的子过程,然后调用该子过程实现上述功能.

（4）定义一个函数用以给做为参数传入的整型数组从小到大排序

二实验要求:

1根据以下实验步骤书写实验准备报告

2独立完成实验

3书写实验报告书

三实验步骤:

1在WEB服务器文档目录中新建05-01.asp文件,内容如下:

用浏览器打开位于WEB服务器上的05-01.asp文件,验证该页面内容为打开该页面时WEB服务器当前时间.

2在WEB服务器文档目录中新建05-02.asp文件,内容如下:

分析上述代码的作用,然后用浏览器打开位于WEB服务器上的05-02.asp文件,验证自己的判断是否正确.

3在WEB服务器文档目录中新建05-03.asp文件,内容如下:

分析上述代码的作用,然后用浏览器打开位于WEB服务器上的05-03.asp文件,验证自己的判断是否正确.

4在WEB服务器文档目录中新建05-04.asp文件,内容如下:

分析上述代码的作用,然后用浏览器打开位于WEB服务器上的05-04.asp文件,验证自己的判断是否正确.

实验四熟悉ASP技术及它的内置对象

4.1ASP初步知识

一、实验课时

2学时/1次上机实习操作；

二、实验目的

1．了解并掌握ASP初步知识

2．熟悉ASP内置对象

三、预备知识：

1．ActiveServerPages所独具的一些特点：

（1）使用VBScript、JScript等简单易懂的脚本语言，结合HTML代码，即可快速地完成网站的应用程序。

（2）无须compile编译，容易编写，可在服务器端直接执行。

（3）使用普通的文本编辑器，如Windows的记事本，即可进行编辑设计。

（4）与浏览器无关（BrowserIndependence）,用户端只要使用可执行HTML码的浏览器，即可浏览ActiveServerPages所设计的网页内容。

ActiveServerPages所使用的脚本语言（VBScript、Jscript）均在WEB服务器端执行，用户端的浏览器不需要能够执行这些脚本语言。

（5）ActiveServerPages能与任何ActiveXscripting语言相容。

除了可使用VBScript或JScript语言来设计外，还通过plug-in的方式，使用由第三方所提供的其他脚本语言，譬如REXX、Perl、Tcl等。

脚本引擎是处理脚本程序的COM（ComponentObjectModel）物件。

（6）ActiveServerPages的源程序，不会被传到客户浏览器，因而可以避免所写的源程序被他人剽窃，也提高了程序的安全性。

（7）可使用服务器端的脚本来产生客户端的脚本。

（8）物件导向（Object-oriented）。

（9）ActiveXServerComponents（ActiveX服务器元件）具有无限可扩充性。

可以使用VisualBasic、Java、VisualC++、COBOL等编程语言来编写你所需要的ActiveXServerComponent。

2．ASP提供内建对象，这些对象使用户更容易收集通过浏览器请求发送的信息、响应浏览器以及存储用户信息（如用户首选项）。

本文简要说明每一个对象。

有关每个对象的详细信息，请参阅内建对象参考。

（1）Application对象：

可以使用Application对象使给定应用程序的所有用户共享信息。

（2）Request对象：

可以使用Request对象访问任何用HTTP请求传递的信息，包括从HTML表格用POST方法或GET方法传递的参数、cookie和用户认证。

Request对象使您能够访问发送给服务器的二进制数据，如上载的文件。

（3）Response对象：

可以使用Response对象控制发送给用户的信息。

包括直接发送信息给浏览器、重定向浏览器到另一个URL或设置cookie的值。

（4）Server对象：

Server对象提供对服务器上的方法和属性进行的访问。

最常用的方法是创建ActiveX组件的实例（Server.CreateObject）。

其他方法用于将URL或HTML编码成字符串，将虚拟路径映射到物理路径以及设置脚本的超时期限。

（5）Session对象：

可以使用Session对象存储特定的用户会话所需的信息。

当用户在应用程序的页之间跳转时，存储在Session对象中的变量不会清除；而用户在应用程序中访问页时，这些变量始终存在。

也可以使用Session方法显式地结束一个会话和设置空闲会话的超时期限。

（6）ObjectContext对象：

可以使用ObjectContext对象提交或撤消由ASP脚本初始化的事务。

四、实验任务：

1．建立一个自动监测浏览时间并根据不同时段动态显示不同页面内容的ASP程序，请将以下代码输入到MacromediaDreamweaver的代码编辑区,命名为test1.asp：

<%IfTime<#12:

00:

00#AndTime>=#00:

00:

00#Then%>

早上好，今天天气不赖啊!

<%ElseIfTime<#19:

00:

00#AndTime>=#12:

00:

00#Then%>

下午好!

<%Else%>

哈喽!

今晚你有没有去IRC聊天!

<%EndIf%>

将test1.asp保存在WEB服务器的虚拟目录（如：

aspsamp/）下，并在浏览器中用HTTP的方式进行浏览，如：

http:

//yourcomputername/aspsamp/test1.asp，观察所得的现象，并进行解释说明。

2．建立一个学生情况调查表，并将学生填写的内容写入数据文件student.txt中。

调查表如下图所示：

3．用ASP对象建立一个课堂讨论区。

登录到这个讨论区中的用户可以在这里畅所欲言，查看别人的发言。

提示：

本程序由7个文件组成，包括：

login.htm实现登录界面

stru.asp实现课堂讨论区的框架

message.asp显示讨论的内容

speak.asp实现讨论信息的输入

list.asp显示正在讨论区的用户数

logout.asp退出讨论区的程序

global.asp定义Session_Onstart和Session_Onend事件过程

4.2Request与Response对象的应用

一实验内容:

1在ASP页面中使用表单的POST方法提交数据

2在ASP页面中取得表单POST方法所提交的数据

3在ASP页面中使用GET方法提交数据

4、在ASP页面中取得GET方法所提交的数据

5、使用Request对象的QueryStrings及ServerVariables集合中的元素

二实验要求:

1根据以下实验步骤书写实验准备报告

2独立完成实验

3书写实验报告书

三实验步骤:

1在ASP页面中使用表单的POST方法提交数据

先在DreamWeaver中新建07-02.htm文件，该文件内容如下：

下图是07-02.htm文件的内容：

（请注意表单的action的值，是另一个服务器端asp文件的名称，即用户点击submit按钮后，该页面中的数据被提交到的页面名称。

）

2在ASP页面中取得表单POST方法所提交的数据

新建07-02.asp文件以便于取得用户从07-02.htm文件中所提交上来的数据：

下图是该页面的输出：

3在ASP页面中使用GET方法提交数据

将07-02.htm的文件做如下修改：

打开服务器端的该页面：

点击submit按钮后应看到下图所示结果：

请注意地址栏内URL，将其与POST方法提交到07-02.asp文件的URL做对比。

最后分析为什么表单用GET方式提交数据时，Request.form（"username"）的值为空。

4、在ASP页面中取得GET方法所提交的数据

5、使用Request对象的QueryStrings及ServerVariables集合中的元素

新建07-03.asp文件，注意取得QueryStrings集合中元素值的方法：

打开服务器端该文件，请手工加上请求字符串值对。

即图示中"?

a=1&b=2...."部分。

思考并在实验报告书中写明QueryStrings集合的作用。

下面新建07-04.asp了解ServerVariables集合中的元素及其值。

打开服务器端的07-04.asp文件，查看其输出的ServerVariables集合中的元素名称及对应的值。

思考并在实验报告书中写明ServerVariables集合的作用。

4.3Request和Response程序设计

一、实验目的

熟练掌握利用Request对象从客户端获得信息的技术；

熟练掌握Form和QueryString方法，编制用户注册信息的填写与显示程序；

熟练掌握利用Response对象向客户端输出信息的技术；

熟练掌握Write、Redirect和Cookies方法，编制相关的验证演示程序。

二、实验思考题

1、 试编写一个简单的注册程序，客户注册后显示客户的注册信息。

2、试编写一个HTML页面，在页面中输出4个多项选择题，题目内容自拟，每个题目均有A、B、C和D四个选项，当用户单击“交卷”按钮时，提交答案给grade.asp页面，grade.asp页面获得表单所提交的数据后，将数据直接输出给客户端，以显示用户对各题所作出的选择。

3、试编写一个ASP程序，实现在浏览器中显示接受请求的服务器的IP地址、服务器的端口号、当前网页的实际物理路径、当前网页的虚拟路径和发出请求的客户端IP地址。

三、实验内容

1、request对象和response对象的用法

（1）写一个HTML文档，在浏览时能够输入如图3所示的关键字与搜索类型，在单击按钮“搜索”后，用另外一个页面输出浏览者的输入，例如“您输入的关键字是：

ASP教程，搜索：

所有网页”；

（2）改变表单（Form）的Method属性值（GET或POST），观察输入域在浏览器与服务器间传送方法的变化。

（3）改造以上编程的方案，用一个页面完成输入及回显输入的功能

2、Session对象用法

On