Web程序设计基础实验教案

本课程教学总体安排课程名称：Web程序设计基础（实验）课程性质与类型：专业基础课+必修总学时、学分：32学时，1学分教学目的与要求：该实验课附属《Web程序设计基础》，是课堂教学的补充，主要以实践环节教学为主，通过实验使学生更好地掌握HTML基础知识、ASP.NET基础知识、ASP.NET服务器控件、页面切换与导航、页面布局、ADO.NET数据访问、ASP.NET中的数据绑定等技术，使学生掌握ASP.NET网站开发方法和Web应用程序的技术。教材及参考书目：教材：《ASP.NET3.5网站开发实例教程》陈伟、卫琳清华大学出版社参考书目：[1].《ASP.NET网页设计与网站开发》马俊等人民邮电出版社2007.6[2].《c#&ASP.NET》郑淑芬等中国青年出版社2001.8考核方式及成绩计算方法：考核方式：考查总成绩=平时成绩*20%+期末成绩*80%+实验成绩*10%第1页课程教学日历课程名称：Web程序设计基础（实验）学期：2013-2014学年第二学期周次章节及教学内容累计学时1ASP.NET与VWD2005开发平台22XHTML基础知识23XHTML基础知识24ASP.NET基础知识25ASP.NET基础知识26ASP.NET服务器控件27ASP.NET服务器控件28ASP.NET服务器控件29页面切换与导航210页面切换与导航211页面布局212页面布局213ADO.NET数据访问214ADO.NET数据访问215ASP.NET中的数据绑定216ASP.NET中的数据绑定2第2页实验一ASP.NET与VWD2005开发平台实验名称：ASP.NET与VWD2005开发平台实验时数：2学时授课类型：实验课教学方法与手段：指导目的要求：（1）安装ASP.NET的开发环境VWD2005（2）熟悉VWD2005开发环境（3）创建简单的动态网站。实验内容：（1）安装VWD2005，建立ASP.NET的运行环境。（2）使用VWD2005创建网站lianxi1，并创建第一个页面exam1.aspx（3）单击页面exam1.aspx的设计标签，切换到页面设计窗口，在页面中键入：“这是我的第一个ASP.NET程序”。（4）运行这个页面。实验二XHTML基础知识实验名称：XHTML基础知识实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉并会使用XHTML的页面格式及语法规则（2）掌握XHTML文本标记、列表标记、表格标记、图像标记、超链接标记等标记的使用。实验内容：(1)创建一个XHTML页面rumengling.aspx，结果如图所示：第3页(2)练习列表标记songci.aspx，输出结果如图所示：(3)用XHTML语言编写符合以下要求的页面：标题为“Anexampleofimage”，在浏览器窗口中显示一个图像。图像的宽度为200个像素点，高度为150个像素点，边框宽度为10个像素点。(4)在网页中做一张课程表，要求所有的文字均居中，背景为黄色，表格居中，宽度为500像素。单元格间距与单元格边距为20像素。（5）创建一个网页，通过链接可以跳转到（1）创建的rumengling.aspx上。实验三ASP.NET基础知识实验名称：ASP.NET基础知识实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）了解ASP.NET页面的运行机制和配置文件管理方式第4页（2）熟练掌握ASP.NET各种对象的使用方法。实验内容：(1)编写程序，实现让用户输入两个整数，并使用一个按钮进行数据提交，使用Request对象来得到用户提交的数据，比较Get和Post方法的不同。(2)编写程序，使用Response对象的Write，Redirect，End方法。(3)编写程序，利用Session保存用户输入的信息，并在页面上显示。(4)编写程序，使用Cookie记录用户名，并在页面上显示出来。(5)利用Application对象实现网站访问量统计。实验四ASP.NET服务器控件实验名称：ASP.NET服务器控件实验时数：6学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉用户控件的创建技术，掌握用户控件的属性、事件、方法的定义和使用。（2）学会利用自定义用户控件制作导航条和用户登录控件。实验内容：（1）新建名字为ServerControlExperiment网站。（2）在default.aspx页面中，添加1个TextBox控件、2个Button控件、一个ListBox控件，如图所示。将2个Button控件的Text属性分别改为“增加”和“删除”。当单击【增加】按钮时，将TextBox文本框中的输入值添加到ListBox中，但单击【删除】按钮时，删除ListBox中当前选定项。（3）添加一个网页，要求将Label控件、LinkButton控件、HyperLink控件放在Panel控件中，当单击一组Button按钮时改变Panel控件的背景色，单击另一组Button控件时改变Panel控件中文字的大小。单击LinkButton和HyperLink控件第5页时分别导航到新的网页或网站。单击RadioButton控件时隐藏Panel控件，单击另一个RadioButton控件时显示Panel控件。如图所示。（4）添加一个网页，在MultiView控件添加3个View控件，在每个View控件中各添加Image控件，再添加3个RadioButton控件切换各个View视图，每个View视图显示不同的图像。（5）添加一个网页，在页面中添加AdRotator控件，链接XML广告数据源，实现广告图像显示，当单击广告图像时导航到相应的网页。（6）添加一个网页，在页面中添加CheckBoxList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。（7）添加一个网页，在页面中添加RadioButtonList控件，单击Button按钮时将CheckBoxList的选项写到ListBox中。（8）添加一个网页，选择DropDownList控件的选项时导航到相应的网站。（9）添加一个网页，在页面中添加TextBox、RequiredFiledValidator和CompareValidator控件，实现CompareValidator控件的Operator行为的Equal、GreaterThan等属性值得验证。实验五页面切换与导航实验名称：页面切换与导航实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉页面切换和网站导航的常用方法，掌握利用超链接、按钮的PostBackUrl属性、Response.Redirect和Server.Transfer属性实现从一个页面切换到另一个页面的方法（2）熟练利用SiteMapPath、Menu和TreeView控件实现网站导航。实验内容：（1）新建一个名为“Pages_Exercise”的应用程序。（2）添加一个名为“Home.aspx”的主网页。（3）添加一个网页“Page1.aspx”，利用超链接实现从Home.aspx切换到此网页。（4）添加三个网页“Page2.aspx”，“Page3.aspx”，“Page4.aspx”分别利用Button、第6页LinkButton和ImageButton控件的PostBackUrl属性实现网页切换。（5）添加两个网页“Page5.aspx”，“Page6.aspx”，分别利用Response.Redirect对象传递数据的方法实现从“Page2.aspx”传递数据到“Page5.aspx”和Server.Transfer对象传递数据的方法实现从“Page3aspx”传递数据到“Page6.aspx”。（6）利用站点地图和SiteMapPath导航控件实现从Home.aspx到“Page1.aspx”，“Page2.aspx”，“Page3.aspx”，“Page4.aspx”网站导航。（7）在网页“Home.aspx”中，利用Menu控件实现自定义导航。（8）在网页“Page_1.aspx”中，利用TreeView控件实现自定义导航。实验六页面布局实验名称：页面布局实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉层的应用，掌握层的布局，（2）掌握母版页的创建及使用方法，能够通过创建母版页来实现导航页面的设计。实验内容：（1）新建一个名为CRM的网站（2）在【解决资源管理器】中右击网站的名称，然后单击【添加新项】，添加母版页Master1（3）在母版页Master1中，删除ContentPlaceHolder控件，插入四个层。divid=top………………/divdivid=left………………/divdivid=rightasp:ContentPlaceHolderID=ContentPlaceHolder1runat=server/asp:ContentPlaceHolder  /div divid=bottom版权所有，违者必究 /div（4）分别设置每个层的CSS样式。（5）添加内容页。（6）浏览网页如图所示效果。第7页（7）定义两个主题，利用主题实现换肤。实验七ADO.NET数据库访问实验名称：ADO.NET数据库访问实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉ADO.NET数据库访问技术，（2）掌握Command和DataAdapter对象操作数据库数据的方法。实验内容：（1）新建名字为“Accessdatabase_Exercise”的网站。（2）在网站的App_Data文件夹中，建立数据库“MyDatabase_Exercise.mdf”。（3）在该数据库中建立一张职工表，并且添加一些模拟的职工记录。其关系模式如下：Employees（ID，NAME，SEX，AGE，Dateofwork，FilenameofPhoto）（4）在web.config配置文件中，修改“connectionStrings/”标记如下。connectionStringsaddname=ConnectionStringconnectionString=DataSource=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\MyDatabase_Exercise.mdf;IntegratedSecurity=True;UserInstance=True//connectionStrings（5）添加一个网页，利用Command对象实现新职工的录入。（6）添加一个网页，利用Command对象实现删除指定编号的职工记录。（7）添加一个网页，利用Command对象实现修改指定编号的职工信息。第8页（8）添加一个网页，利用DataAdapter对象实现查询职工信息，并显示到网页的Label控件上。实验八ASP.NET中的数据绑定实验名称：ASP.NET中的数据绑定实验时数：4学时授课类型：实验课教学方法与手段：指导目的要求：（1）熟悉ASP.NET中的数据绑定（2）掌握使用GridView、DataList和FormView进行数据显示和处理的方法。实验内容：（1）新建DataBinding_Exercise的网站。（2）创建相关数据库。（3）添加网页，利用GridView实现数据的分页显示、修改和删除。（4）添加网页，利用DataList实现数据的显示。（5）添加网页，利用FormView实现数据的增、删、改。