Web程序设计实验指导书

1、WEB程序设计实验实验一 编写简单的HTML文档一、实验目的：1、学会编写简单的HTML文档；2、学会调试HTML文档；3、掌握HTML的基本标记及其属性的用法。二、实验条件：上述实验需要PC机，安装并运行IIS，安装网页制作软件Dreamweamver8.0。三、实验内容：1、调试教材P17例1-5。2、自选素材编写HTML文档，要求用上HTML的基本标记及其属性。四、实验步骤：1、创建站点(1)在系统盘的Inetpub/wwwroot下，新建一个目录，目录名webs。(2)在webs目录下再创建一个目录名sy1。2、调试教材P17 例1-5。(1)启动Dreamweamver8.0，输入教

2、材P17例1-5并保存在Inetpub/wwwroot/webs/sy1下，文件名自定。输入文件过程中体会html常用标记及其属性的用法。(2)调试上一步骤html文档。2、自选素材编写html文档。要求用上、标记及其属性。(1)用Dreamweamver8.0编写文档。(2)调试所编写文档。五、实验报告1、写出符合实验内容2要求的HTML文档。2、写出调试过程中存在的问题及解决方法。自编文档参考代码：第1章 HTML自编文档背景色 字体色 可链接色 正链接色 已被链接色 链接网络信息制作与发布网站的规划与建设在当今的WEB的时代里，如何构建一个具有生命力和竞争力的网站，无疑是一个吸引人们注意

3、力的话题。3.1 网站建设的整体规划3.1.1 网站的主题3.1.2 网站名称的设计3.1.3 网站的视觉形象3.1.4 网站的发展目标3.2 网站内容与功能的设计3.3 网站结构的设计3.4 网站建设的技术实现3.5 网站技术人员的构成3.6 网站技术环境的选择与运行方式的确定 实验二 CSS样式表的编制及应用一、实验目的：1、学会编写CSS样式表；2、学会在HTML文档中引用CSS样式表；3、掌握CSS基本属性的用法。二、实验条件：上述实验需要PC机，安装并运行IIS，安装网页制作软件Dreamweamver8.0。三、实验内容：

4、1、创建站点在系统盘的Inetpub/wwwroot/webs下，新建一个目录，目录名sy2。2、调试教材P30 1.4.4应用CSS的一个实例。3、给定素材制作引用CSS样式表的网页。要求用上CSS的字体属性、颜色和背景属性、文本属性、定位属性。四、实验步骤：1、调试教材P30 1.4.4应用CSS的一个实例。(1)将老师指定的素材复制到Inetpub/wwwroot/webs/sy2，具体文件为：J169.JPG、image1.jpg、10.gif、xt1.txt。(2)用文本编辑软件或Dreamweamver8.0建立教材P30 1.4.4的三个文件，例1-9.html、例1-9.css

5、、例1-10.html。输入文件过程中体会html常用标记和CSS的引用方法。(3)调试上一步骤html文件。2、给定素材制作引用CSS样式表的网页。要求用上CSS的字体属性、颜色和背景属性、文本属性、定位属性。(1) 用文本编辑软件或Dreamweamver8.0新建网页，取名CSSTEXT.HTML，用记事本打开xt1.txt，将内容拷贝至新建网页。(2) 用文本编辑软件或Dreamweamver8.0新建CSS样式表，取名cbtext.css。标题设为H1，xt1.txt中的“第一章 微机接口技术概述”，黑体，红色，粗体，字体大小14pt，居中排。二级标题设为H2，xt1.txt中的“1

6、. 微型计算机的接口一般具备哪些功能？”等题目，宋体，字体大小12pt，斜体，背景色为#99CCFF。正文内容段落标记P，宋体，字体大小11pt，行间距为18pt。HTML文档正文设置BODY，定位属性left、right分别60pt，页面元素的背景图像为10.gif，背景图像不跟页面滚动，背景图像被重复。(3)按样式表的要求，用样式表的H1、H2、P、BODY对CSSTEXT.HTML文档中的内容进行设置。(4)调试CSSTEXT.HTML和cbtext.css。 (5)根据CSS样式表属性，改变上述步骤中的值，体会各参数的含义，设计出满足规则、精美的网页。五、实验报告1、写出符合实验内容2

7、要求的CSS样式表cbtext.css和CSSTEXT.HTML。2、写出调试过程中存在的问题及解决方法。实验三 XML文档的编制及应用一、实验目的：1、学会XML文档、XSL样式表文档的编制；2、学会XML文档与XSL文件连接的方法；二、实验条件：上述实验需要PC机，安装并运行IIS，安装网页制作软件Dreamweamver8.0。三、实验内容：1、创建站点在系统盘的Inetpub/wwwroot/webs下，新建一个目录，目录名sy3。2、调试教材P42 例1-12。3、给定素材制作XML文档，编制XLS样式表。四、实验步骤：1、调试教材P42例1-12XML应用实例。(1) 用文本编辑软

8、件或Dreamweamver8.0建立教材例1-11.xml和例1-11 .xsl。(2) 调试例1-122、根据实验给定的素材，制作xml文档，编制xsl 文件。 要求标题为H1，表格TABLE的CELLPADDING=“7”，BORDER=“1”，表格居中。表头TD属性WIDTH=200pt，背景为蓝色，前景为白色，字体大小为4，隶书。 表中内容样式自定，要求协调统一。五、实验报告1、写出符合实验内容2要求的XML文档和XSL样式表。2、写出调试过程中存在的问题及解决方法。实验四 JavaScript语言实验一、实验目的：1、掌握JavaScript程序控制流程。2、掌握JavaScrip

9、t函数的应用。3、掌握JavaScript对象的应用。二、实验条件：上述实验需要PC机，安装并运行IIS，安装网页制作软件Dreamweamver8.0。三、实验内容：1、调试教材P143 例3-7、例3-10、例3-18。2、调试教材P149 例3-15。3、调试教材P134例3-1、例3-2、例3-44、编程实现1-某一个数的随机整数，这个数由程序运行时确定？如确定值大于100则重新确定，并将产生的随机数在页面上显示出来。四、实验报告1、写出调试过程中存在的问题及解决方法。2、写出或打出实验内容4 的代码（调试成功后）实验五 JavaScript事件和事件过程一、实验目的：1、掌握Wind

10、ow对象的open()、close()、confirm()、prompt()方法的应用。2、掌握表单对象的reset、submit方法，OnReset、OnSubmit事件。3、掌握文本框对象、按钮对象、单选框对象、复选框对象、选择列表框对象的应用二、实验条件：上述实验需要PC机，安装并运行IIS，安装网页制作软件Dreamweamver8.0。三、实验内容：1、调试教材例3-16、例3-17、例3-25、例3-26、例3-27、例3-28、例3-29、例3-30、例3-31。2、注意体会对象属性、方法。四、实验步骤：1、调试教材P151 例3-16。(1) 用文本编辑软件或Dreamweam

11、ver8.0建立教材P151 例3-16代码。(2) 调试上述html文件。(3) 修改Open()方法各项参数，观察窗口变化，体会参数含义。(4) 编程另增加一个超链接，应用Close()方法关闭窗口对象。2、调试教材例3-17、例3-25、例3-26、例3-27、例3-28、例3-29、例3-30、例3-31。五、实验报告1、写出调试过程中存在的问题及解决方法？实验六 数据有效性验证一、实验目的：1、了解数据有效性验证的方法和作用；2、掌握事件和事件过程的编程方法；3、掌握表单等常用对象的应用。二、实验条件：上述实验需要PC机，安装网页制作软件Dreamweamver8.0。三、实验内容：

12、1、调试教材P120 例2-57，修改年龄的有效性验证方法。2、用JavaScript改写例2-57并进行调试。3、注意输入有效性数据，结果通过给定文件test.asp显示出来。四、实验步骤：1、调试教材P120 例2-57。(1) 用文本编辑软件或Dreamweamver8.0建立教材P120例2-57代码。(2) 对年龄的验证，一是验证其是数值，二是验证其是非小数，三是验证其在一定的范围内。(3)调试上述html文件。注意输入有效性数据和无效性数据进行验证。2、用JavaScript改写例2-57(1) 用文本编辑软件或Dreamweamver8.0为工具，用JavaScript脚本语言改

13、写例2-57，生成文件，命名为“例2-57jv.html”。(2) 补全年龄有效性验证。(3) 调试上述html文件。注意输入有效性数据和无效性数据进行验证。五、实验报告1、写出符合实验内容2要求的html文件代码。2、写出调试过程中存在的问题及解决方法。3、数据有效性验证在客户端和服务器端进行有何区别？实验七 File Access文件存取组件一、实验目的：1、了解File Access文件存取组件的作用；2、掌握文件存取组件的功能和使用方法；3、掌握站点文件写入功能的设置。二、实验条件：上述实验需要PC机，安装IIS，将站点设置成可写功能。安装网页制作软件Dreamweamver8.0。三

14、、实验内容：1、设置网站具有写功能控制面板 管理工具 Internet 信息服务 右键点击网站 属性 主目录 选取写入权限及执行权限 右键点击默认网站 权限向导 所有任务 继承所有安全性设置 替换所有目录访问权限2、调试教材File Access组件的实例，注意Server对象MapPath、HTMLEnCode()的作用，文件操作中的判断文件是否存在FileExists方法，打开文本文件OpenTextFile方法，新建文本文件CreatTextFile方法，文件夹操作中的判断文件夹是否存在FolderExists方法，新建文件夹CreateFolder方法。有关文件操作的向文件中写数据的w

15、rite方法，写数据并换行的writeline方法，判断是否指向文件尾的AtEndOfStream方法，读取文件中一行数据的ReadLine方法，关闭文本文件的Close方法。3、编程并调试，实现新建文件夹，新建文件，复制文件，复制文件夹，删除文件，删除文件夹功能。具体方法及含义参照下列3张表。表一 FileSystemObject对象方法说明CreatTextFile创建文本文件OpenTextFile打开文本文件GetFile获得File对象CopyFile复制文件MoveFile移动文件DeleteFile删除文件FileExists 判断文件是否存在GetFolder获得Folder对

16、象CreateFolder创建文件夹CopyFolder复制文件夹MoveFolder移动文件夹DeleteFolder删除文件夹FolderExists判断文件夹是否存在表2 TextStream对象方法说明语法Close关闭一个打开的TextStream文件TextStream对象.CloseRead从光标的当前位置开始，读取一定的字符数目TextStream对象.Read(Characters)ReadAll读取TextStream文件中的所有数据String=TextStream对象.ReadAllReadLine读取文件中的一行数据String=TextStream对象.ReadLi

17、neSkip读取文件时，跳过指定个数的字符TextStream对象.Skip(Characters)SkipLine读取文件时，跳过一行数据TextStream对象.SkipLineWrite向文件中写入数据TextStream对象.Write(String)WriteLine向文件写入一行数据TextStream对象.WriteLine (String)WriteBlankLine写入指定个数的新行到文件中TextStream对象.WriteBlankLine (Lines)表3 TextStream对象的属性方法说明语法AtEndOfLine当光标位于当前行的未尾时，值为 True，反之为

18、 FalesTextStream对象.AtEndOfLineAtEndOfStream当光标位于TextStream文件的未尾时，值为 True，反之为 FalesTextStream对象.AtEndOfStreamColumn计算从行首到当前光标位置的字符数目TextStream对象.ColumnLine计算光标所在行在文件中的行号TextStream对象.Line四、实验步骤：1、调试教材File Access组件的实例。(1)用Dreamweamver8.0输入程序，存入站点位置。(2)对已安装IIS组件，对站点实验文件夹的写入功能进行设置。(3)用浏览器调试程序。2、编制实现新建文件夹

19、，新建文件，复制文件，复制文件夹，删除文件，删除文件夹功能的程序。(1)用Dreamweamver8.0新建网页，编制实现功能的程序。(2)用浏览器调试程序。五、实验报告1、写出实验第2部分内容的程序并注释。2、写出调试过程中存在的问题及解决方法。实验八 Web数据库访问技术一、实验目的：1、学会用Access创建数据库、数据表；2、学会使用ASP访问数据库；3、了解对数据表进行查询、插入、修改、删除操作的SQL语句。二、实验条件：上述实验需要PC机，安装Access，安装网页制作软件Dreamweamver8.0。三、实验内容：1、设置站点WEBSY，本实验程序及文件放入该站点。2、启动Ac

20、cess创建数据表，要求如下：字段名称数据类型字段大小说明xh字符型10学号xm字符型8姓名xb字符型2性别bj字符型20班级zy字符型20专业 数据库名为test.mdb，表名为xj3、插入记录。用Insert方法插入记录到数据表。（1）输入并调试，信息录入页面ins.html，插入记录示例程序ins.asp。（2）用ACCESS新建一个数据库，再新建一个数据表，表名自定，内容为同学通讯录，设计一个信息录入页面，设计一个记录插入程序，将录入页面信息存入数据表。4、查询记录。（1）输入并调试，信息查询页面sel.html,查询示例程序sel.asp（2）在第三步设计同学通讯录的基础上，设计一个信息查询页面，设计一个查询记录程序，将所查询记录信息通过页面显示出来。四、实验报告1、写出实验内容的程序并注释。2、写出