实验一 HTML 文档制作
【实验目的】
1、 熟悉Visual Studio开发环境。
2、 在Visual Studio开发环境中使用 HTML代码制作页面。
3、掌握Html的列表、表单编程。
【实验内容】
1、开始->程序->Microsoft office-> excel, 制作Excel表格，输入《web应用技术》课程的学生信息，包括学号、姓名、班级字段，如图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秒 星期一。 在页面中显示动态时间：
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\文字字体
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上传图片等。
【实验要求】
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。
3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
实验二 CSS 格式化网页
【实验目的】
1、 熟悉CSS格式的制作和引用。
2、掌握网页中关于文字，颜色，字体，对齐，位置等使用。
3、理解人机界面，网页美化制作等概念。
【实验内容】
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所示。
图1 网页格式化
【实验要求】
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。
3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
实验3 动态网页制作设计
【实验目的】
1. 学会编写JavaScript程序。
2. 掌握访问网页中特定元素的方法。
3. 掌握给指定HTML元素动态设定样式的方法。
4. 能应用盒子模型正确地布局网页。
5. 掌握为HTML控件编写事件响应函数的方法。
【实验内容】
(1)这是一个经典的小游戏，由计算机随机生成一个1到100的数字，然后由玩家去猜，计算机给出提示。若玩家可以10次以内猜中，算玩家赢（图 3-1）。
图 3-1 猜数字游戏
【实验步骤】
1. 使用Visual Web Developer创建一个网站，向网站中添加一个GuessNumber.htm网页。
2. 根据图 4-2设计网页，注意两个设定了id的HTML元素“”和“
3. 请在网页的
元素内编写JavaScript函数Guess()，实现游戏功能.4、设置“对不对”按钮的单击事件响应函数为Guess()：
要点提示：
1. 整个游戏的判断逻辑需使用条件语句实现。
2.可以使用document.getElementById()方法访问文本框元素，通过其value属性取出用户所输入的数。
3.使用document.getElementById()方法访问
4.使用浏览器对象location. Reload()方法重新刷新网页，以便重新开始游戏。
(2)本实验将设计一个网页，网页上提供一个文字段落和四个单选钮，分别表示四种样式。用户点击选择一种样式，网页动态显示出样式应用于文字段落的效果（图3-2）。
图 3-2 动态样式切换
【实验步骤】
1、使用Visual Web Developer创建一个新网站，向网站中添加一个新网页：DynamicChangeStyleClass.htm。
2、根据示例网页定出网页逻辑结构和主体元素。
3、给页面添加以下样式类，这些样式类将被动态地应用于文字段落。
4、完成以下的JavaScript函数：
function changestyle(styleIndex)
{ //在此处书写JavaScript代码
//根据传入的参数styleIndex是0，1，2还是3
//动态地将上面设定的样式类应用于文字段落
}
5、将changestyle()函数与四个单选钮的onclick事件挂接上（注意函数参数值的设定），一个示例如下：
样式一
6 在浏览器中打开网页，查看效果。
要点提示：
1.使用document.getElementById()获取对文本段落的引用，然后通过此引用设置其className属性，就可以将指定的样式类应用于文字段落。
2.要恢复默认的样式，只需将文字段落的className属性设为null
【实验要求】
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。
3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
实验4 网页数据有效性验证
【实验目的】
1、 掌握常用Asp.net 服务器控件。
2、掌握常用验证控件：
➢ 必须字段验证控件RequiredFieldValidator
➢ 范围验证控件RangeValidator
➢ 正则表达式验证控件RegularExpressionValidator
➢ 自定义验证控件CustomValidator
➢ 验证总结控件ValidationSummary
3、掌握数据有效性的正则表达
【实验内容】
1、 使用必须字段验证控件RequiredFieldValidator验证用户名字段
2、 使用范围验证控件RangeValidator验证文本框的输入是否是一个1-5之间的整数
3、 使用正则表达式验证控件RegularExpressionValidator验证用户输入的邮政编码是否合法
4、使用自定义验证控件验证用户的输入是否是偶数
5、使用验证总结控件ValidationSummary，完成如下验证
6、制作用户注册页面regtest.aspx，如图1所示，用户点击注册按钮后，在页面下方显示用户的注册信息，并实现数据验证功能。
图1 regtest.aspx页面
➢ 用正则表达式验证用户名的有效性。规则：
(1) 用户名字段为必填;
(2) 只能以字母开头;
(3) 长度在6~18之间
(4) 只能包含字符、数字和下划线。
➢ 用正则表达式验证密码的有效性。确认密码字段为必填，且必须一致，其它可根据需要设置一些规则：
(1)大于6且小于20个字符
(2)必须包含一个特殊字符
(3)至少包含一个数字
(4)不能包含空格
【实验要求】
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。
3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
实验5 HTML Dom 编程
【实验目的】
1、 掌握Javascript脚本编程方法
2、 掌握使用word,excel制作web系统的报表；
3、掌握常用HTML dom 对象使用方法。
【实验内容】
1、 使用实验1的页面upfile.html上传的文件功能，学生信息保存为student.xls；
2、 使用java script脚本语言启动excel程序，创建excel表格，输入输入《web应用技术》课程信息：学年，学期，选课课程号，课程名称，教师姓名，教师单位，上课时间，上课地点等信息。保存为C:\\\\ course.xls,退出excel程序。
3、 制作一个页面score.html，添加读取student.xls和course.xls文件的内容, 使用java script脚本语言生产一个新的excel文件report.xls, 并录入每个学生的5次平均成绩；
4、 添加两个按钮，分别把成绩信息制作成word,excel文档的报表， 格式如下图所示1所示。
表1 报表
【实验要求】
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。
3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
实验 6 Ajax技术应用
【实验目的】
1、掌握XMLHttpRequest对Ajax方法的支持；
2、掌握ScriptManager,UpdatePanel处理Ajax应用的常用方法；
3、掌握load、get、post等常用方法的应用
【实验内容】
1、 实现用户注册时的用户名无刷新校验，效果如图6-1所示。
图 6-1
2．实现二级联动的下拉列表框，其效果如图6-2所示
23
图 6-2
其中数据库可以创建真实的数据或模拟数据库
3. 在下拉列表框中选择区县名称，查询结果在表格中显示出来。整个过程中页面无刷新,效果如图6-3所示.
图 6-3
其中数据库可以创建真实的数据或模拟数据库
24
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
25
【实验要求】
实验7 XML文档的DTD和schema编程
【实验目的】
1、 掌握XML DTD的定义方法及其用途;
2、 掌握使用ＤＴＤ元素、属性、实体和标记声明的基本语法；
3、了解并掌握XML Schema的定义方法及其用途；
4、了解并掌握Schema的基本结构、数据类型、元素声明和属性声明；
【实验内容】
1 根据下列要求，编写student.XML文档：
（1）文档内容要求：08届（班级（学生信息（学号、姓名、电子邮件、QQ、通信地址（省份（或州）、城市、街道、邮政编码））））；
（2）要求建立至少2个班级，每个班级至少2个学生的信息；
（3）XML文档中包含以下技术的使用：
a、5个预定义字符实体的使用；
b、CDATA字符定界符的使用；
26
c、属性的简单使用；
d、注释的使用；
e、空元素的使用。
相关代码：
href=\"file:///D:/My_Program/XML/TEST_2010/TEST_MY/student.css\"?>
27 28 29 30
2.为student.XML文档，编写DTD文档,如图1所示；使得XML文档中包含以下技术的使用：
（1）内部一般实体的使用；
（2）外部参数实体的使用；
31
（3）属性声明的使用(如：CDATA类型、枚举类型、ID类型、IDREF类型、ENTITIS类型)。
图 1 DTD文档
3. 为student.XML文档，编写Schema文档，如图2所示；使得Schema文档中包含以下技术的使用：
（1）简单类型元素的定义与应用；
（2）复杂类型元素的定义与应用；
（3）属性声明的使用。
32
图2 Schema树形图
1、 实验前根据实验内容复习相关章节。
2、 编写相应的程序，写出完整的程序代码，包括注释，注意书写的层次结构。3、 调试程序，完成程序。
4、 整理实验步骤，总结经验和体会。
5、 上交实验报告和源程序。
33
【实验要求】
因篇幅问题不能全部显示，请点此查看更多更全内容