动态网页设计实训指导书课案.docx
- 文档编号:13618231
- 上传时间:2023-06-15
- 格式:DOCX
- 页数:80
- 大小:1.27MB
动态网页设计实训指导书课案.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
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 动态 网页 设计 指导书