动态网页设计实训指导书课案.docx
《动态网页设计实训指导书课案.docx》由会员分享，可在线阅读，更多相关《动态网页设计实训指导书课案.docx（80页珍藏版）》请在冰点文库上搜索。
动态网页设计实训指导书课案
动态网页设计（）
实
训
指
导
书
编写：
颜煜
二00三年八月
编写说明
本课程实验实训指导书是我们根据教学的需要，在试用的基础上，编写了这套实验实训指导书。
其中包括实验实训8个，内容包括.NET基本知识，简单网站开发设计，内置对象的使用，数据访问技术ADO.NET及综合系统的开发实训等。
目的是使学生通过实验实训，加深对HTML标记语言，C#程序设计，基本控件的使用，用户界面交互及网页间的数据传递，使用Web服务器常用控件，状态管理对象的应用，设计数据库应用网站，ASP.NET技术综合应用
的理解，并将其运用到实际的工作当中，增强学生的实践能力，培养创新精神。
一．实训1创建Web应用程序…………………………………1
二.实训2Web应用程序的界面设计……………………………………6
三.实训3Web应用程序的界面设计……………………………………10
四.实训4Web应用的状态管理…………………………………………21
五.实训5Web应用的状态管理…………………………………………………28
六.实训6Web应用开发中的数据访问….………………………………41
七.实训7主题母页和用户控件…………………………………………48
八.实训8.NET中数据库程序设计………………………………………54
实训1创建Web应用程序
一.实训目的：
1.掌握IIS的基本配置方法
2.熟悉.NET开发环境
二.实训内容：
1.IIS的安装
IIS是Windows操作系统的一个服务器组件，默认情况下，除了Server系
统以外，该组件是不会随系统而安装的，需要另外添加，添加方法为找开控制面
版，选择添加删除程序，选择添加删除Windows组件中的“Internet信息服务
（IIS）”后单击“下一步”完成安装。
2.IIS基本配置
（1）打开IIS服务管理器，方法为选择开始菜单——设置—控制面板，在
控制面板窗口中选择管理工具项目，在管理工具项目窗口中选择Internet信息
服务项目，并双击将其打开（如图ST1-1,ST1-2所示）
图ST1-1
图ST1-2
（2）在IIS信息服务窗口中展开网站，在展开的选项中选择默认网站项，然后单击鼠标右键在出现菜单中选择属性，出现默认网站属性窗口（如图ST1-3所示）
图ST1-3
（3）默认网站属性窗口中选择网站选项卡，在此选项卡中可以设置此服务器
的IP地址，如果此服务器作为单机使用，网络中其它客户机无法访问此服务
器可以在此选项卡中IP地址项文本框中选择“全部未分配”，则访问此服务
器可以使用如下地址访问http:
//localhost或http:
//127.0.0.1进行。
如
果作为一个可以被网络中其它客户机访问的服务器，在IP地址项文本框中选
择IP地址即可（单击该文本框旁边的箭头进行选择）（如图ST1-3所示）
（4）然后在默认网站属性窗口中选择主目录选项卡，在选项卡中指定此服务
器页面程序文件的存放路径。
设置方法为在此选项卡中的本地路径项中指定
一个目录路径（默认路径为系统盘的Inteput目录下的wwwroot目录），如
F:
\myweb（即在F盘下新建一个myweb目录），可以使用浏览按钮进行选择。
还可以设置本服务器的文件访问权限，这些可以在此选项卡中一些复选框中
进行选择。
如目录浏览项目录可以控制客户机是否可以查看服务器主目录中
的文件列表，读取和写入这两个选项可以控制对服务器主目录文件的读写权
限（如图ST1-4所示）。
图ST1-4
（5）然后可以指定客户机访问服务器时第一个被访问页面文件，这个项目需
要在默认站点属性窗口中文档选项卡中进行添加。
（如图ST1-5所示）
（6）设置完所有属性后，单击确定按钮完成设置。
图ST1-5
2.编写简单的ASP.NET应用程序
具体的步骤：
第一步：
新建网站
第二步：
创建Web页面
第三步：
添加控件及设置属性
第四步：
添加事件代码
第五步：
调试运行
任务一：
设计一个单页Web应用程序，网页界面由1个表格、1个标签（Label）、2个文本框和1个命令按钮（Button）组成，另外还包含若干文字。
设计界面如图1.10所示。
h1．创建应用程序界面
（1）创建Web应用程序项目。
启动VisualStudio2008，选择“新建/项目”，项目类型选择“Web”，模板选择“ASP.NETWeb应用程序”，然后指定该应用程序的保存路径，确定后系统则新建了一个解决方案（默认名为WebApplication1），该解决方案中包含一个Web项目（默认名为WebApplication1），该项目中包含一个网页文件（默认名为Default.aspx），此时屏幕上会出现一个空白窗体
（2）向网页中添加控件。
将Default.aspx改名为Login.aspx，对于本例界面，首先使用“表/插入表”菜单命令，插入一个2行2列的表格，居中显示。
然后使用工具箱中标签（Label）、文本框（TextBox）和按钮（Button）3种控件放入表格中：
先将光标定位到表格的单元格中，将鼠标移到左侧“工具箱”位置，自动弹出“工具箱”窗口，选择其中的“TextBox”控件对象，然后双击即可在网页中放入一个文本框对象，完成后的效果如图1.11所示。
按类似的操作方法可分别添加标签和按钮，完成后的界面如图1.10所示。
h2．设置控件的属性
可以通过属性窗口为控件设置属性。
单击按钮“Button1”，在“属性”窗口中出现按钮“Button1”的所有属性，在“属性”窗口中滚动属性列表，选定属性名“Text”，在右列中输入属性值为“确定”，属性窗口的设置如图1.12所示。
另外将输入密码的文本框的TextMode属性设置为Password。
h3．编写程序代码
为按钮对象“确定”添加鼠标单击事件代码有两种方法：
（1）双击要编写代码的命令按钮，系统自动打开代码编辑器，并出现如下代码行：
protectedvoidButton1_Click（objectsender,EventArgse）
{}
（2）在Button控件的属性窗口中，单击“”图标，添加Click事件方法“Button1_Click”，双击则系统自动切换到代码编辑器并生成如
（1）所示的代码。
也可以直接双击Click事件所要输入的空白响应方法，系统自动生成Button1_Click方法。
在事件代码中输入如下的程序代码：
protectedvoidButton1_Click（objectsender,EventArgse）
{
if（（TextBoxName.Text=="admin"）&&（TextBoxPwd.Text=="admin"））
{Label1.Text="欢迎进入论坛系统";}
else
{Label1.Text="用户名或密码错！
";
}
h4．保存应用程序
使用“文件”菜单中的“全部保存”命令或单击工具栏上的“全部保存”按钮，可以将所有编辑过的代码和设计的网页存盘。
h5．运行和调试程序
（1）右键单击项目中的aspx网页文件，在弹出的快捷菜单中选择“在浏览器中查看”选项即可浏览选择的网页。
（2）从“调试”菜单中选择“开始执行（不调试）”命令。
（3）单击工具栏中的按钮。
（4）按Ctrl+F5组合键。
运行程序后，即显示网页界面，输入用户名“admin”，密码“admin”，单击“确定”按钮，标签中将显示“欢迎进入论坛系统”，如图1.13所示
图1.13实例运行效果
三、思考与练习
1.如何配置.NET的运行环境及调试一个简单的ASP.NET程序。
实训2Web应用程序的界面设计
一.实训目的：
1、掌握文本类型控件的常用属性，事件，方法的设置方法
2．能熟练掌握Label,TextBox,Button控件的使用
二.实训内容：
任务一：
设计一个模拟的用户登录页面，当用户名文本框为空时，输出“请输入用户名“，当输入用户名，按Enter键或单击页面空白处时，则在页面中输出欢迎信息”尊敬的用户ⅩⅩⅩ你好！
“
具体操作步骤：
1.建立网站：
2.设计页面
3.添加控件及置属性
各控件对象的属性设置：
控件
属性
值
说明
TextBox1
ID
txtName
文本框1的名字
AutoPostBack
True
文本修改后，数据自动回传给服务器
Label1
ID
lblInfo
标签控件在程序中使用的名字
Text
标签倥件初始状态不显示文本
4.编写事件代码
usingSystem;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
this.Title="文本类型控件学习页面";
txtName.Focus（）;
if（txtName.Text.Trim（）==""）
{
lblInfo.Text="请输入用户名";
}
}
protectedvoidTextBox1_TextChanged（objectsender,EventArgse）
{
if（txtName.Text.Trim（）==""）
{
lblInfo.Text="请输入用户名";
}
else
{
lblInfo.Text="尊敬的用户"+txtName.Text+"你好！
";
}
}
}
程序说明：
1.在中，字符串连接用“+“。
2.Focus（）此方法用于获取光标的焦点。
3.Trim（）为了避免用户输入若干空格来通过程序判断，所以在获取文本框的值时调用Trim（）方法，将字符串前后的空格移除，即从当前String对象中移除所有前导空白字符和尾部空白字符，避免空格对程序产生的影响。
任务二：
创建一个“用户管理“的页面，要求当输入用户名，密码，联系电话，个人描述后，单击”添加“按扭，用户管理信息就会在下方的Label控件中显示，程序运行效果如图：
具体操作步骤：
1.建立网站：
2.设计页面
3.添加控件及设置属性
4.编写事件代码
usingSystem;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
}
protectedvoidButton1_Click（objectsender,EventArgse）
{
if（（TextBox1.Text.Trim（）==""）||（TextBoxpwd.Text.Trim（）==""）||（TextBox2.Text.Trim（）==""）||（TextBox3.Text.Trim（）==""））
{Label1.Text="输入框不能为空,请输入完全";}
else
{
Label1.Text=TextBox1.Text+"你的密码是：
"+TextBoxpwd.Text+"联系电话：
"+TextBox2.Text+"个人描述：
"+TextBox3.Text;
}
}
}
三、思考与练习
1.如何灵活运用Label,TextBox,Button等控件。
实训3Web应用程序的界面设计
一.实训目的：
1、掌握选择类型类型控件的常用属性，事件，方法的设置方法
2、能熟练掌握CheckBox,CheckBoxList,RadioButton,
RadioButtonList，DropDownList,FileUpLoad的控件的使用
二.实训内容：
任务一：
模拟制作一个“在线学习系统”的注册页面Register.aspx,性别的选择要求用单选按钮实现；专业的选择用单选按钮组来实现；所学语言的选择用复选按钮组来实现；当单击“注册”按钮时，将设置的信息显示，当单击“清空”按钮时，将页面中的信息进行清空处理。
效果图如下：
具体操作步骤：
1.建立网站：
2.设计页面
3.添加控件及设置属性
4.编写事件代码：
usingSystem;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
}
protectedvoidButton1_Click（objectsender,EventArgse）
{
stringstrsex="",strlan="";
if（RadMale.Checked）
{
strsex="男";
}
else
{
strsex="女";
}
for（inti=0;i{
if（ChklLan.Items[i].Selected）
{
strlan=strlan+ChklLan.Items[i].Text+" ";
}
}
Label1.Text=TextBox1.Text+" 密码：
"+TextBoxpwd.Text+" 性别:
"+strsex;
Label1.Text+=" 专业：
"+Radlspec.SelectedItem.Text+" 所学语言：
"+strlan;
}
protectedvoidButton2_Click（objectsender,EventArgse）
{
TextBox1.Text="";
TextBoxpwd.Text="";
RadMale.Checked=false;
RadFemale.Checked=false;
Radlspec.ClearSelection（）;
ChklLan.ClearSelection（）;
Label1.Text="";
}
protectedvoidRadMale_CheckedChanged（objectsender,EventArgse）
{
}
}
任务二：
创建“WEB开发技术基础试题”页面（综合运用单选按钮组和复选按钮组）页面运行效果如图：
具体操作步骤：
1.建立网站：
2.设计页面：
3.添加控件及设置属性：
4.编写事件代码：
usingSystem;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
}
protectedvoidBtnOk_Click（objectsender,EventArgse）
{
intscore=0;
if（Radl1.Items[1].Selected==true）
{
score+=25;
}
if（Radl2.Items[2].Selected==true）
{
score+=25;
}
if（Chkl1.Items[0].Selected==true&&Chkl1.Items[1].Selected==true&&Chkl1.Items[2].Selected==false&&Chkl1.Items[3].Selected==true）
{
score+=25;
}
if（Chkl2.Items[0].Selected==true&&Chkl2.Items[1].Selected==false&&Chkl2.Items[2].Selected==true&&Chkl2.Items[3].Selected==false）
{
score+=25;
}
LblInfo.Text="您的最后得分是：
"+score;
}
protectedvoidBtnCLear_Click（objectsender,EventArgse）
{
Radl1.ClearSelection（）;
Radl2.ClearSelection（）;
Chkl1.ClearSelection（）;
Chkl2.ClearSelection（）;
LblInfo.Text="";
}
}
任务三：
设计一个小计算器，能够进行基本的加，减，乘，除运算即可，程序运行效果如图：
具体操作步骤：
1.建立网站：
2.设计页面：
3.添加控件及设置属性：
4.编写事件代码：
usingSystem;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidPage_Load（objectsender,EventArgse）
{
this.Title="我的小计算器";
txtresult.ReadOnly=true;
}
protectedvoidButton1_Click（objectsender,EventArgse）
{
floatfnum1=0,fnum2=0,fresult=0;
fnum1=float.Parse（txtnum1.Text）;
fnum2=float.Parse（txtnum2.Text）;
stringstrope=dropclass.SelectedValue;
switch（strope）
{
case"+":
fresult=fnum1+fnum2;
break;
case"-":
fresult=fnum1-fnum2;
break;
case"*":
fresult=fnum1*fnum2;
break;
case"/":
fresult=fnum1/fnum2;
break;
}
txtresult.Text=fresult.ToString（）;
}
protectedvoidButton2_Click（objectsender,EventArgse）
{
txtnum1.Text="";
txtnum2.Text="";
txtresult.Text="";
}
}
任务四：
制作如图所示的用户注册页面，当单击“注册”按钮后就在Label控件中显示相应注册信息，当单击“重置”按钮后所有的信息清空。
具体操作步骤：
1.建立网站：
2.设计页面：
3.添加控件及设置属性：
4.编写事件代码：
usingSystem;
usingSyst
升级会员 