Web系统与技术实验指导书

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

 图1 学生信息字段

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

图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所示。

                      图3 list.html界面

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

图4 table.html页面

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

图5 FamousPeople.htm 页面

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

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

 

图6 WebURLs.htm 页面

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

             图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