您的位置: 首页  >  文章  >  Web系统与技术实验指导书

Web系统与技术实验指导书

分类: 文章 • 2024-10-08 07:58:46

《Web系统与技术实验指导书 》

 

配套教材

国家级实验教学示范中心联席会计算机学科规划教材

教育部高等学校计算机类专业教学指导委员会推荐教材

面向“工程教育认证”计算机系列课程规划教材

谢从华，高蕴梅，黄晓华.Web系统与技术[M].清华大学出版社，2018年6月

 

 

 

 

 

 

 

 

 

 

 

 

 

作者： 谢从华

2018-9-3，第8次修改

 

 

 

 

实验一  HTML 文档制作

1【实验目的】  

1、 熟悉Visual Studio开发环境。

2、 在Visual Studio开发环境中使用 HTML代码制作页面。

3、掌握Html的列表、表单编程。

 

2【实验内容】  

1、开始->程序->Microsoft office-> excel, 制作Excel表格，输入课程的学生信息，包括学号、姓名、班级字段，如图1所示，至少录入5条记录，保存为student.xls。

Web系统与技术实验指导书

 图1 学生信息字段

2、制作一个页面upfile.html，把student.xsl的文件上传到本地的服务器上，如图2所示。

Web系统与技术实验指导书

图2 文件上传界面

 

  1. 要求检查上传文件类型：xls,如果文件不对，提示错误；否则，提示上传成功。

   (2) 文件保存为..\\ student.xls。

   (3) 创建网页student.html，显示此文件的信息。生产一个超级链接可以下载该文件,显示文件上传的时间，格式如：2010年4月12日 11点58分18秒 星期一。 在页面中显示动态时间：

<SCRIPT language="JavaScript">

<!--

document.write("<span id='time'></span>")

setInterval("time.innerText=new Date().toLocaleString()",1000)

//-->

</SCRIPT>

 

 3.使用<ul><ol><li>标签制作页面list.html如图3所示。

Web系统与技术实验指导书

                      图3 list.html界面

4、使用HTML的Table元素制作表格页面table.html，如图4所示

Web系统与技术实验指导书

图4 table.html页面

5. 向网站中添加一个HTML网页FamousPeople.htm，用于显示某个名人说过的名言，在标签体重显示他的名字，在段落中显示他说过的话，如果能找到他的相片，在网页中也显示出来。显示效果如图5所示：

Web系统与技术实验指导书

图5 FamousPeople.htm 页面

6.向网站中添加一个HTML网页SubscriptAndSuperscript.htm，编写HTML代码输出以下数学公式：

Web系统与技术实验指导书

7 向网站中添加一个HTML网页WebURLs.htm，编写一个HTML表格显示下面的网址列表。显示效果如图6所示：

 

Web系统与技术实验指导书

图6 WebURLs.htm 页面

8. 选做题 使用HTML控件制作用户注册页面register.html，如图7所示。

Web系统与技术实验指导书

             图7 register.html界面

说明：(1)在网上下载几幅验证码图像(或搜索验证码生成程序)，或参看下列程序。

    protected void Page_Load(object sender, EventArgs e)

    {    //生成4位的验证码

        string tmp = RndNum(4); //取随机码

        this.Session["verify"] = tmp.ToLower();

        this.ValidateCode(tmp); // 输出图片

   }

   private void ValidateCode(string VNum)

   {

       int gheight = VNum.Length * 12;

       using (System.Drawing.Bitmap Img = new System.Drawing.Bitmap(gheight, 25)) {

           using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(Img)) {

               g.Clear(Color.White); //背景颜色

               Font f = new Font("Arial Black", 10); //文字字体

               SolidBrush s = new SolidBrush(Color.Black); //文字颜色

               g.DrawString(VNum, f, s, 3, 3);

               MemoryStream ms = new MemoryStream();

               Img.Save(ms, ImageFormat.Jpeg);

               Response.ClearContent();

               Response.ContentType = "image/Jpeg";

               Response.BinaryWrite(ms.ToArray());

           }

       }

       Response.End();

   }

 

 

9.选做题目：下载一个第3方的html的Richtextbox（富文本框）,插入到网页中，可以编辑文本、图像等多种内容。写出此控件的详细使用说明。

 说明参见：http://www.jb51.net/article/25239.htm

MarkitUp是一个轻量级，可定制，灵活的WYSIWYG Editor。

SmartMarkUP是一个轻量级，强大的JavaScript library，它能够将Textarea控件转换成富文本编辑器。支持html、CSS、XML、Wiki语法、BBCode等，可按实际需求配置。SmartMarkUP没有基于任何javascript框架开发，易于现有项目结合使用。

KindEditor是基于浏览器的所见即所得(WYSWYG)HTML编辑器，主要应用于CMS、论坛、博客等WEB程序里。

Control.Editor是一个基于Mootools开发的WYSIWYG Editor。基于jquery开发，能够从IFRAME元素创建一个Rich Text Editor。提供了所有基本的Rich Text功能，可设置文本编辑区大小，Ajax上传图片等。

3【实验要求】

1、 熟悉Visual Studio开发环境，在Visual Studio开发环境中使用 HTML代码制作页面，掌握Html基本元素的编辑功能。

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

掌握Html的列表、表单等基本元素的编程。

基于Richtextbox（富文本框）插件 的网页编辑功能。

5【知识目标】

利用文本标签、列表标签、表格标签、超级链接标签、图像标签、声音标签、视频标签、框架标签、表单和控件等编辑HTML网页的内容和页面布局。

6【能力目标】

具备选择和使用HTML标签设计和制作网页，提交和获取网页数据的能力。

 

实验二  CSS 格式化网页

1【实验目的】  

1、 熟悉CSS格式的制作和引用。

2、掌握网页中关于文字，颜色，字体，对齐，位置等使用。

3、理解人机界面，网页美化制作等概念。

2【实验内容】  

1、 下载经典网站的css文件，读懂其文件内容，参考这些样式，设计下面几类对象的样式。

2、为实验1的页面upfile.html， student.html，list.html，register.html，table.html，richtext.html的所有文字，文本和段落等对象的字体大小，颜色，对齐，位置等格式创建css样式，并添加引用。

3、为实验1的页面upfile.html， student.html，list.html，register.html，table.html，richtext.html的按钮，图像和日历等控件

4、为实验1的页面upfile.html， student.html，list.html，register.html，table.html，richtext.html的列表、表格的文字字体和颜色、对齐，边框(颜色、线条样、大小)，背景（图片，声音）等进行设计。

5、为实验1的页面upfile.html， student.html，list.html，register.html，table.html，richtext.html分别添加一种不同的滤镜。

6、用css样式，格式化一个网页界面如图1所示。 

Web系统与技术实验指导书

图1 网页格式化

3【实验要求】

1、 熟悉CSS格式的制作和引用，掌握网页中关于文字，颜色，字体，对齐，位置等使用，理解人机界面，网页美化制作等概念。

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

字体样式、文本样式、颜色样式、 列表样式、表格样式、鼠标样式、滤镜样式的定义和使用。

综合各种样式，设计出较好的网页界面效果。

5【知识目标】

用CSS编辑HTML网页的字体、文本、颜色、列表、表格、鼠标和滤镜等样式，利用CSS的文本对齐、盒子模型、文字环绕、float样式、元素定位等布局网页页面。

6【能力目标】

具备设计和实现HTML页面样式和布局的能力。

 

实验3 动态网页制作设计

1【实验目的】

1. 掌握Javascript脚本编程。

2. 掌握访问网页中特定元素的方法。

3. 掌握给指定HTML元素动态设定样式的方法。

4.掌握为HTML控件编写事件响应函数的方法。

5、 掌握使用word,excel制作web系统的报表； 

2【实验内容】

    (1)这是一个经典的小游戏，由计算机随机生成一个1到100的数字，然后由玩家去猜，计算机给出提示。若玩家可以10次以内猜中，算玩家赢（图 3-1）。

Web系统与技术实验指导书

图 3-1 猜数字游戏

1、使用Visual Web Developer创建一个网站，向网站中添加一个GuessNumber.htm网页。

2、根据图 4-2设计网页，注意两个设定了id的HTML元素“<input>”和“<div>”，前者用于取出用户输入的数字，后者则用于显示提示信息。

3、请在网页的<head>元素内编写JavaScript函数Guess()，实现游戏功能.

4、设置“对不对”按钮的单击事件响应函数为Guess()：

<input type="button" value="对不对？" onclick="Guess();" />

 

要点提示：

 1. 整个游戏的判断逻辑需使用条件语句实现。

 2.可以使用document.getElementById()方法访问文本框元素，通过其value属性取出用户所输入的数。

 3.使用document.getElementById()方法访问<div>元素，利用其innerHTML属性显示提示信息。

 4.使用浏览器对象location. Reload()方法重新刷新网页，以便重新开始游戏。

   (2)本实验将设计一个网页，网页上提供一个文字段落和四个单选钮，分别表示四种样式。用户点击选择一种样式，网页动态显示出样式应用于文字段落的效果（图3-2）。

Web系统与技术实验指导书

图 3-2 动态样式切换

1、使用Visual Web Developer创建一个新网站，向网站中添加一个新网页：DynamicChangeStyleClass.htm。

2、根据示例网页定出网页逻辑结构和主体元素。

3、给页面添加以下样式类，这些样式类将被动态地应用于文字段落。

4、完成以下的JavaScript函数：

function changestyle(styleIndex)

{ //在此处书写JavaScript代码

//根据传入的参数styleIndex是0，1，2还是3

//动态地将上面设定的样式类应用于文字段落

}

5、将changestyle()函数与四个单选钮的onclick事件挂接上（注意函数参数值的设定），一个示例如下：

<input id="Radio2" name="styles" type="radio" onclick="changestyle(1);" />样式一

6、 在浏览器中打开网页，查看效果。

要点提示：

1.使用document.getElementById()获取对文本段落的引用，然后通过此引用设置其className属性，就可以将指定的样式类应用于文字段落。

2.要恢复默认的样式，只需将文字段落的className属性设为null。

(3)报表制作

1、输入课程的学生信息，包括学号、姓名、班级字段，如图1所示，至少录入5条记录，保存为student.xls。

Web系统与技术实验指导书

 

使用java script脚本语言启动excel程序，创建excel表格，输入《web系统与技术》课程信息：学年，学期，选课课程号，课程名称，教师姓名，教师单位，上课时间，上课地点等信息。保存为C:\\ course.xls,退出excel程序。

课程名称

《web系统与技术》

学年

2018-2019

学期

1

选课课程号

09300299

 教师姓名

谢从华

教师单位

计算机科学与工程学院

上课时间

星期1-3，4节

上课地点

S5-101

图3-3 课程信息

2、制作一个页面score.html，添加读取student.xls和course.xls文件的内容, 使用java script脚本语言生产一个新的excel文件report.xls, 并录入每个学生的5次平均成绩；

3、添加两个按钮，分别把成绩信息制作成word,excel文档的报表， 格式如图3-4所示。

Web系统与技术实验指导书

图3-4 报表

3【实验要求】

1、 掌握JavaScript编程，掌握访问网页中特定元素的方法。掌握给指定HTML元素动态设定样式的方法，能应用盒子模型正确地布局网页。掌握为HTML控件编写事件响应函数的方法。。

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

熟练掌握JavaScript的常见对象。

理解和利用Javascript的ActiveX编程。

5【知识目标】

掌握JavaScript的语法、运算符、表达式、函数、语句和事件，理解和掌握JavaScript的对象和ActiveX控件编程。

6【能力目标】

具备运用JavaScript设计和实现的网页客户端交互的能力。

 

 

实验4 网页数据有效性验证

1【实验目的】  

1、 掌握常用Asp.net 服务器控件。

2、掌握常用验证控件：

  • 必须字段验证控件RequiredFieldValidator
  • 范围验证控件RangeValidator
  • 正则表达式验证控件RegularExpressionValidator
  • 自定义验证控件CustomValidator
  • 验证总结控件ValidationSummary

3、掌握数据有效性的正则表达

2【实验内容】  

1、 使用必须字段验证控件RequiredFieldValidator验证用户名字段

 

2、 使用范围验证控件RangeValidator验证文本框的输入是否是一个1-5之间的整数

Web系统与技术实验指导书

Web系统与技术实验指导书

3、 使用正则表达式验证控件RegularExpressionValidator验证用户输入的邮政编码是否合法

Web系统与技术实验指导书

4、使用自定义验证控件验证用户的输入是否是偶数

Web系统与技术实验指导书

5、使用验证总结控件ValidationSummary，完成如下验证

Web系统与技术实验指导书

6、制作用户注册页面regtest.aspx，如图1所示，用户点击注册按钮后，在页面下方显示用户的注册信息，并实现数据验证功能。

Web系统与技术实验指导书

 图1 regtest.aspx页面

  • 用正则表达式验证用户名的有效性。规则：
  1. 用户名字段为必填;
  2. 只能以字母开头;
  3. 长度在6~18之间
  4. 只能包含字符、数字和下划线。
  • 用正则表达式验证密码的有效性。确认密码字段为必填，且必须一致，其它可根据需要设置一些规则：

(1)大于6且小于20个字符。

(2)必须包含一个特殊字符。

(3)至少包含一个数字。

(4)不能包含空格。

3【实验要求】

1、掌握常用Asp.net 服务器控件,掌握常用验证控件,掌握数据有效性的正则表达。

2、编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、调试程序，完成程序。

4、整理实验步骤，总结经验和体会。

5、上交实验报告和源程序。

4【实验重点和难点】

熟练掌握JavaScript的常见对象。

理解和利用Javascript的ActiveX编程。

5【知识目标】

利用控件和正则表达式验收网页的数据有效性。

6【能力目标】

具备选择和使用控件验证网页的数据有效性，设计和实现正则表达式验证网页数据有效性的能力。

 

实验5  ASP.NET应用编程

1【实验目的】  

（1）掌握Request、Response、Application等对象的常用方法。

（2）掌握ADO.NET的基本技术和开发方法。

2【实验内容】  

1、新建 5-1.aspx页面，在Page_Load（）事件中，使用Request对象获得浏览器信息：

  • 你浏览器的版本是<%=Request.Browser.Type %>
  • 操作平台是：<%=Request.Browser.Platform %>
  • 支持背景音乐？<%=Request.Browser.BackgroundSounds %>
  • 支持ActiveXControls吗？<%=Request.Browser.ActiveXControls %>
  • 支持JavaApplets吗？<%=Request.Browser.JavaApplets %>

2、新建5-2.aspx页面，在Page_Load（）事件中，使用Request对象获得机器信息

  • 客户端浏览器信息：<%=Request.UserAgent %><br />
  • 客户端ip地址：<%=Request.UserHostAddress %><br />
  • 数据取得方式：<%=Request.HttpMethod %><br />
  • MIME类型：<%=Request.ContentType %><br />
  • 服务器的数据流量<%=Request.TotalBytes %><br />
  • 客户端支持的字符编码方式：<%=Request.ContentEncoding %><br />
  • 网页在服务器的相对地址：<%=Request.FilePath %><br />
  • 网页在服务器端的相对路径：<%=Request.Url %><br />
  • 网页在服务器端的完整路径：<%=Request.PhysicalPath %><br />

3、 新建5-3.aspx，在Page_Load（）事件中，使用Response对象向客户端输出数据（文本、HTML标签、客户端脚本）

protected void Page_Load(object sender, EventArgs e)

        {   Response.Write("姓名：<input type='text'>");

            Response.Write("<input type='button' value='欢迎点击！' onclick='alert(\"你好！\");' ");

        }

Web系统与技术实验指导书

图5-1 对话窗口

4、新建5-4.aspx页面，以及软件工程学院、中国网页设计、 百度、6-1.aspx等页面。5-4.aspx页面添加超级链接按钮和下拉框（如图5-2）， 在Page_Load（）事件中，使用Response.Redirect实现页面跳转。

Web系统与技术实验指导书

图5-2 跳转页面窗口

5、 在集成环境中创建Web应用程序，综合数据存储技术和.NET技术，实现一个小型员工管理系统。

在Web服务器上进行配置和部署，要求考虑全面，能够充分考虑系统的特点。数据库软件可以使用ACCESS或SQL Server等。数据库设计参考，部门表：部门编号、部门名称、成立时间

 

图5-3 部门表

科室表：科室编号、科室名称、部门编号

Web系统与技术实验指导书

图5-4 科室表

员工表：编号、员工姓名、性别、电话、地址、科室编号

Web系统与技术实验指导书

图5-5 员工表

查询页面实现

Web系统与技术实验指导书

图5-6 查询页面

运行效果：

Web系统与技术实验指导书

图5-7 查询结果

后台管理页面login.aspx

Web系统与技术实验指导书

图5-8 管理员信息

Web系统与技术实验指导书

图5-9管理员登录界面

员工信息管理页面

Web系统与技术实验指导书

  图5-10员工信息管理页面

3【实验要求】

1、 实验前根据实验内容复习相关章节。

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

常见对象ASP.Net 的内置对象。

ADO.NET数据库访问技术。

5【知识目标】

熟悉ASP.Net Web 编程和Web服务，理解和掌握ASP.Net 的内置对象的属性、方法和事件。

6【能力目标】

具备运用ASP设计和实现Web后台的编程能力。

 

 

实验 6  Ajax技术应用

1【实验目的】

1、掌握XMLHttpRequest对Ajax方法的支持；

2、掌握ScriptManager,UpdatePanel处理Ajax应用的常用方法；

3、掌握load、get、post等常用方法的应用

2【实验内容】

  1. 实现用户注册时的用户名无刷新校验，效果如图6-1所示。

Web系统与技术实验指导书

图 6-1

2．实现二级联动的下拉列表框，其效果如图6-2所示

Web系统与技术实验指导书

图 6-2

其中数据库可以创建真实的数据或模拟数据库

 

 

3. 在下拉列表框中选择区县名称，查询结果在表格中显示出来。整个过程中页面无刷新,效果如图6-3所示.

Web系统与技术实验指导书

图 6-3

其中数据库可以创建真实的数据或模拟数据库

Web系统与技术实验指导书

3【实验要求】

1、 掌握XMLHttpRequest对Ajax方法的支持。掌握ScriptManager,UpdatePanel处理Ajax应用的常用方法。掌握load、get、post等常用方法的应用。

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

基于XMLHttpRequest的Ajax实现，基于ASP.NET 的AJAX实现。

5【知识目标】

理解和掌握基于ASP.NET和XMLHttpRequest的Ajax实现。

6【能力目标】

具备选择、设计和实现Ajax技术实现网页的局部刷新的实时交互能力。

 

 

  实验7  XML文档的DTD和schema编程

1【实验目的】  

1、 掌握XML DTD的定义方法及其用途;

2、 掌握使用ＤＴＤ元素、属性、实体和标记声明的基本语法；

3、了解并掌握XML Schema的定义方法及其用途；

4、了解并掌握Schema的基本结构、数据类型、元素声明和属性声明；

2【实验内容】  

1 根据下列要求，编写student.XML文档：

（1）文档内容要求：08届（班级（学生信息（学号、姓名、电子邮件、QQ、通信地址（省份（或州）、城市、街道、邮政编码））））；

（2）要求建立至少2个班级，每个班级至少2个学生的信息；

（3）XML文档中包含以下技术的使用：

     a、5个预定义字符实体的使用；

     b、CDATA字符定界符的使用；

     c、属性的简单使用；

     d、注释的使用；

     e、空元素的使用。

相关代码：

<?xml version="1.0" encoding="GB2312"?>

<?xml-stylesheet type="text/css" href="file:///D:/My_Program/XML/TEST_2010/TEST_MY/student.css"?>

<grade type="08" >

    <!--class one-->

    <class type="08003101">

       <student>

           <stuID>0800310101</stuID>

           <name>李建国</name>

           <email>[email protected]</email>

           <qq>247956456</qq>

           <address>

              <province>广西</province>

              <city>桂林</city>

              <street>金鸡路1号</street>

              <post>541004</post>

           </address>

       </student>

       <student>

           <stuID>0800310102</stuID>

           <name>张红</name>

           <email>[email protected]</email>

           <qq>247954645</qq>

           <address>

              <province>广西</province>

              <city>桂林</city>

              <street>金鸡路2号</street>

              <post>541004</post>

           </address>

       </student>

    </class>

    <!--class two-->

    <class type="08003102">

       <student>

           <stuID>0800310201</stuID>

           <name>周敏</name>

           <email>[email protected]</email>

           <qq>12345688</qq>

           <address>

              <province>广西</province>

              <city>桂林</city>

              <street>尧山校区</street>

              <post>541004</post>

           </address>

       </student>

       <student>

           <stuID>0800310202</stuID>

           <name>欧阳飞</name>

           <email>[email protected]</email>

           <qq>247956666</qq>

           <address>

              <province>广西</province>

              <city>桂林</city>

              <street>金鸡路4号</street>

              <post>541004</post>

           </address>

       </student>

    </class>

</grade>

 

2.为student.XML文档，编写DTD文档,如图1所示；使得XML文档中包含以下技术的使用：

  （1）内部一般实体的使用；

  （2）外部参数实体的使用；

  （3）属性声明的使用(如：CDATA类型、枚举类型、ID类型、IDREF类型、ENTITIS类型)。

Web系统与技术实验指导书

图 1 DTD文档

 

3. 为student.XML文档，编写Schema文档，如图2所示；使得Schema文档中包含以下技术的使用：
   （1）简单类型元素的定义与应用；
   （2）复杂类型元素的定义与应用；
   （3）属性声明的使用。

 

Web系统与技术实验指导书

图2 Schema树形图

 

 

3【实验要求】

1、掌握XML DTD的定义方法及其用途。掌握使用ＤＴＤ元素、属性、实体和标记声明的基本语法。了解并掌握XML Schema的定义方法及其用途。了解并掌握Schema的基本结构、数据类型、元素声明和属性声明；

2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。

3、 调试程序，完成程序。

4、 整理实验步骤，总结经验和体会。

5、 上交实验报告和源程序。

4【实验重点和难点】

XML架构与模式和文档显示。

XML架构与模式。

5【知识目标】

熟悉XML文档的特征和语法，XML标记及其使用规则，XML文档结构，XML的命名空间，理解和掌握XML架构数据类型：simpleType 简单类型、complexType复杂类型、sequence组元，基于XSLT样式表的XML文档显示、基于数据岛的XML文档显示、基于javascript的XML文档显示。

6【能力目标】

具备运用XML设计和实现Web页面的语义编程和XML数据显示的能力。

相关推荐