web网站设计实验讲义.doc

《web网站设计实验讲义.doc》由会员分享，可在线阅读，更多相关《web网站设计实验讲义.doc（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、Web程序设计（ASP.Net版）实验指导书编写：梁兴建 二八年十二月目 录附一、实验报告填写方法1附11 实验开发环境1附12实验过程要求1附13实验报告内容填写1实验一： HTML语言静态网页设计211实验目的212实验内容及要求2实验二：IIS的配置和管理421实验目的422实验知识点423实验内容及要求9实验三：ASP.Net项目的建立及控件的熟悉1031实验目的1032实验知识点1033实验内容及要求14实验四：ASP.net内置对象的使用1641 实验目的1642 实验内容及要求16实验五：使用ADO.Net访问数据库2051实验目的2052实验知识点2053实验内容及要求21附一

2、、实验报告填写方法附11 实验开发环境1. 硬件：Intel P4 2.4G/256M/40G PC机一套；2. 软件：Windows XP+j2sdk1.5.0+JCreator Pro 3.1.0+(MS Access 2000)附12实验过程要求1. 在上课的同时，将每个实验预习的每个例题直接完成在实验指导书上；2. 在实验之前，将实验要求的程序写在草稿本上；3. 每次实验之前需要把实验指导书和写有程序的草稿纸带上，以备检查，否则不能进入实验室。4. 实验过程中，不能做与实验无关的事情（如：打游戏、看其他书籍），否则本次实验成绩记0分，在遇到问题的时候举手提问，同学之间交流的声音不可太大

3、。附13实验报告内容填写1. 第1页：填写（1）实验目的、（2）实验要求2. 第2页第3页：填写（3）实验程序源代码3. 第4页：填写（4）实验运行结果、（5）实验总结实验一： HTML语言静态网页设计如果说一个网站是一座大厦，那么构成网站的每个栏目就是构成大厦的房间，而构建每个房间的砖瓦就应是每一张网页了！网页与一般文档类似，它们都要求字体清晰、格式正确、 排列整齐、布局合理、图文并茂，这就需要对网页的内容进行修饰。网页在排版上有较高的要求，排版的好坏是网页成败的关键因素之一。而表格是实现页面排版的有效工具，通过使用表格可以很方便有效地控制页面各元素的位置。 与表格类似的框架则可以通过分割屏

4、幕使得在一个屏幕上打开多个网页。11实验目的1） 熟悉HTML语言开发环境和HTML语言的语法规则；2） 熟悉HTML语言的各元素的属性，文字、图片的颜色设置，网页的表格及对齐；3） 掌握CSS网页风格的定义及使用；4） 表单元素的设计。5） 能够设计普通的有一定特色的静态网页。12实验内容及要求1、 实验内容实验利用HTML自带的元素，设计一个“三”型框架的网页，网页主要框架如下。其中:1）框架边框为1，灰色，里面嵌入了一张图片、2个网页，如图所示。所有的链接使用相对路径，假设C:html为根目录。2）1.html:背景图片C:htmlimg2.jpg；表单提交到网页： C:htmlaspl

5、ogin.asp。3）2.html：左上角为浅绿色背景滚动文本框，左下脚为链接：新闻1链接到网页： C:htmlnews1.html；新闻2链接到网页： C:htmlnews2.html。4）写一个cs.css文件，使1.html和2.html的风格都是：超链在点击之前都为黑色；鼠标移动上去都是蓝色、有下划线；点击之后恢复原貌。2、设计步骤：（1）设计框架(index.html)：(2)设计1.html-背景图片用户名：-注意下端对齐（3）设计2.html-注意有表头 -第二行（4）设计超链的css文件（cs.css）a:link 属性； a:visited 属性； a:hover属性； a:

6、active 属性；实验二：IIS的配置和管理网站发展至今，人机交互和信息快速更新必须要很方便快捷的进行。而常规的静态网页对这两方面功能基本上是不予支持的，因此现在的网站设计必须是以动态网页为模式的。动态网页设计是指：综合利用静态网页技术、中间件技术、数据库技术，实现网页与用户之间的相互操作。静态网页无法反馈信息。动态网页的界面、布局、基本内容以及修饰都必须以静态网页为基础。当用户申请一个*.aspx主页时，Web服务器响应该HTTP请求，调用ASPX引擎，解释被申请文件。当遇到任何副区段脚本 (如VBScript和C#等)时，ASP引擎会调用相应的脚本引擎进行处理。客户端脚本（如： Java

7、Script ）与HTML直接转到客户机。若脚本指令中含有访问数据库的请求，就通过ODBC与后台数据库相连，由数据库访问组件执行访库操作。动态网页的脚本是在服务器端解释执行的，它依据访库的结果集自动生成符合HTML语言的主页， 去响应用户的请求。所有相关的发布工作由Web服务器负责。21实验目的1） 了解Web服务器的工作原理，2） 掌握 Windows 2000/XP服务器上IIS的安装与配置;3） 了解并掌握虚拟目录的设置方法；22实验知识点1、使用脚本语言C#和Javascript 脚本语言分为客户端脚本和服务端脚本两种，服务器端脚本和客户端脚本的主要区别:（1）服务器端脚本在Web服务

8、器上执行，由服务器根据脚本的执行结果生成相应的HTML页面并发送到客户端浏览器中并显示。 （2）客户端脚本由浏览器进行解释执行。1、针对客户端脚本，使用标识符。 属性为：Language：表明脚本语言类型如：var i;i=0;i=i+1;document.write (i);针对服务端C#脚本语言，应分两部进行：1、在文档的第一行放上语句:2、 中间可用方式使用C#脚本 void Page_Load(object sender, EventArgs e) Label1.Text = 现在的时间是 + DateTime.Now.ToLocalTime().ToString(); 2、IIS的安

9、装与配置ASP必须运行在服务器上，因此实验的第一项工作是构建服务器运行环境。本实验指导以Windows 2000操作系统下的IIS 5.0进行操作说明。1）安装IIS（实验室已安装，不再进行此步骤）开始控制面板添加删除程序添加/删除Windows组件Windows组件向导，则出现如下对话框：若没选取IIS信息服务（IIS），则选择，并点按“下一步”按钮，按屏幕提示安装。（2）配置IIS 5.0开始控制面板管理工具 Internet服务管理器，则出现如下对话框：对“默认网站”单击鼠标右键，出现弹出菜单，选择“属性”，则屏幕显示：可根据需要修改默认网站的属性，一般多为“主目录”和“文档”。主目录中

10、主要包括网站在本地机器中的实际路径以及相关读写权限；文档则设置网站启用的默认文档。3）检验安装当做完首页之后，可以在IE浏览器的地址栏输入：http:/localhost 或http:/127.0.0.1，观察其结果。如果在运行的时候服务器要求输入登录用户名和密码，应在目录安全性中的身份验证里面将匿名访问和集成windows验证打钩。如下图4 ）虚拟目录的设置要从主目录以外的其他目录中进行发布，就必须创建虚拟目录。“虚拟目录”不包含在主目录中，但在显示给客户浏览器时就象位于主目录中一样。虚拟目录有一个“别名”，供Web浏览器用于访问此目录。别名通常要比目录的路径名短，便于用户输入。使用别名更安

11、全，因为用户不知道文件是否真的存在于服务器上，所以便无法使用这些信息来修改文件。本实验以对实际路径（例如：d:asptemp）创建虚拟目录来说明其操作过程。A在硬盘上创建一个实际目录：d:asptempB为d:asptemp创建虚拟目录在“Internet信息服务”窗口，在“默认网站”单击鼠标右键，选择“新建”“虚拟目录”，按提示操作分别设置虚拟目录别名（例如：asp）、实际的目录路径（例：d:asptemp）以及虚拟目录的权限。之后，成功创建虚拟目录C运行虚拟目录下文件假设实际目录下有文件：web1.aspx，web1.aspx的内容为： void Page_Load(object send

12、er, EventArgs e) Label1.Text = 现在的时间是 + DateTime.Now.ToLocalTime().ToString(); 则访问该文件： http:/localhost/asp/web1.aspx 在虚拟目录ASP属性中的“文档”，添加一个启用默认文档：web1.asp；则访问该文件：http:/localhost/web1.aspx23实验内容及要求依照实验指导书2.2中IIS的安装与配置所介绍的方法和步骤，在自己的个人计算机上的Windows2000/XPT系统系列其他版本下安装IIS服务器。 并编写一个简单的ASP网页程序，实现在浏览器IE中输出“这是

13、我的第一个ASP程序！”实验三：ASP.Net项目的建立及控件的熟悉31实验目的1）掌握ASP.Net项目的建立流程2）掌握ASP.Net中提供的所有服务器控件；32实验知识点1、ASP.Net项目的建立流程（1）启动Visual Studio 2005，进入操作界面之后，点击“文件”“新建”“网站”，如下图。（2）点击之后，进入如下提示框，要求选择模板为“ASP.Net网站”，之后输入位置，位置可以选择，也可以新输入，如下图之后系统为您生成相应的文件及目录（A）（C）（B）（A区）可以切换到某一个已打开文件内容下。（B区）浏览或者刷新该项目的所有文件，可以双击打开文件内容（C区）第一行的内容

14、含义为（3）为网站增加Web配置文件（Web.config）Web.config文件是一个XML文本文件，它用来储存 ASP.NET Web 应用程序的配置信息（如最常用的设置ASP.NET Web 应用程序的身份验证方式、调试模式、错误跳转），创建的方式如下：在解决方案中，右键点击项目的根，出现如下的弹出菜单，点击“添加新项”在web.config文件中找到这句话，将它改成，才能进行调试（4）制作界面打开default.aspx页面，在与中加入代码：（5）填写后台文件打开default.aspx.cs页面，填写相应代码，形成：using System;using System.Data;us

15、ing System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) Lb

16、lstatus.Text = 请输入用户名和密码！; protected void Button1_Click(object sender, EventArgs e) if (UName.Text.Equals(abc) & (Upwd.Text.Equals(123) Lblstatus.Text = 你输入正确了！; else Lblstatus.Text = 对不起，你输入错误了！; （6）调试/运行网页调试网页有两种方法：A、如实验二的步骤通过配置IIS，建立一个网站，然后打开IE，进行测试B、快速调试，通过菜单完成“调试”“启动调试”得到如下界面，便可以进行输入调试了。2、ASP.n

17、et服务器控件见课件第六讲33实验内容及要求你的姓名为：张三你的密码为：abcd制作一个网站，首页的界面如下：要求点击提交按钮之后，用一个Label控件在表单的下方显示输入的内容。如：方法为：LblShow.text=”你的姓名为：”+uname.Text+ ”你的密码为：”+.实验四：ASP.net内置对象的使用在Page类中中包含了一些常用的内置对象，通过这些内置对象，可以非常方便地收集浏览器发送的信息，可以将服务器端数据回送给用户的浏览器，灵活地使用这些内置对象，可以丰富动态网页的功能，编制出比较完善的动态网页代码。41 实验目的1） 熟练掌握利用Request对象从客户端获得信息的技术

18、；2） 利用Response对象向客户端输出信息的技术，并熟练掌握Write、Redirect等方法。3） 熟练掌握利用Session对象记载特定客户信息的技术；4） 掌握利用Application对象记载所有客户信息的技术。42 实验内容及要求1、实验内容编写一个功能较简单的聊天室，在进入时输入昵称，然后在聊天室输入信息并显示所有人的输入信息。另外还需要判断是否进行了登录，现有登录的人数，总访问次数等等。2、实验分析该聊天室功能较简单，仅在进入时输入昵称，然后在聊天室输入并显示输入信息。1）聊天室总体结构主程序：Default.aspx输入昵称框架程序：Chat.aspx上框架程序：Chat

19、Show.aspx显示发言下框架程序：ChatInput.aspx输入发言退出聊天室程序：Exit.aspx选择退出2）主程序：Default.aspx主程序主要输入用户昵称，并检查昵称是否为空，为空则重新输入；不为空则调Chat.aspx程序，进入聊天室。Default.aspxDefault.aspx.cs3）框架程序：Chat.aspx这个是一个上下划分的框架程序：该程序首先保存用户的昵称到个人Session对象，然后把用户的一些基本信息，如IP地址、昵称、来访时间等保存到公共Application对象中，并把在线人数增加1个。最后把网页分为上、下两个框架，上框架显示发言，下框架输入发言

20、。Page_Load函数程序代码如下：/下面几句返回来访者信息string sayStr = ;sayStr = 来自 + Request.ServerVariablesRemote_Addr + 的; /来访者IP地址sayStr = sayStr + + Sessionuser_name.ToString() + ; /来访者昵称 sayStr = sayStr + 于 + DateTime.Now.ToLocalTime().ToString() + 大驾光临; /来访时间sayStr = + sayStr + ; /红色显示/下面几句将来访信息保存到Application中if (Ap

21、plicationshow = null) Applicationshow = ;Application.Lock(); /先锁定Applicationshow = sayStr + + Applicationshow.ToString(); /返回聊天信息Applicationuser_online = int.Parse(Applicationuser_online.ToString() + 1;/在线人数加1Application.UnLock(); /解除锁定4）上框架程序：ChatShow.aspx该程序5秒在屏幕上显示一次Application对象的内容。其程序代码如下：在head

22、中增加 /5秒钟刷新一下Page_Load函数程序代码如下：Response.Write(Applicationshow); /这样可以显示聊天内容5）下框架程序：ChatInput.aspx该程序主要输入发言内容，并能选择发言文字的颜色和表情。程序实现如下：界面为：发言: 颜色: 黑色蓝色 表情:   &n;        离开聊天室Page_Load函数程序代码如下： string say, mycolor, myface, user_name; /声明变量待用user_name=Sessionuser_name.ToS

23、tring(); /返回用户昵称say=Server.HtmlEncode(TxtChat.Text); /返回发言，并用HtmlEncode编码mycolor=DDLColor.SelectedValue; /返回本次发言的颜色myface=DDLFace.SelectedValue; /返回本次发言表情/下面三句将得到本次发言的字符串string sayStr;sayStr= + user_name + DateTime.Now.ToLocalTime().ToString() + myface + 说：; sayStr=sayStr + + say + ;/下面几句将本次发言信息保存到A

24、pplication中，与框架程序：Chat.aspx中的一样6）退出聊天室程序：Exit.aspx首先保存退出者的相关信息，然后把在线人数减少1个，重定向到default.aspx。程序代码如下：/功能、代码都与框架程序Chat.aspx相同，只不过刚才要写“欢迎某人到来”，在线人数增加1，退出聊天室就写“高兴而去”，在线人数减1Exit.aspx.cs实验五：使用ADO.Net访问数据库动态网页程序可以用来提高网页互动性，而数据库中所存储的是数据，通过程序与数据的配合，才能将最完整的网页显示在用户的面前。数据访问其实就是在应用程序中获取数据库或者其他存储设备上的数据，并且可以对数据库或者其

25、他存储设备上的数据进行基本的数据操作，包括查询数据、添加数据、修改数据、删除数据等。 51实验目的5） 了解和掌握ADO.net数据库组件及相关对象的基本概念和使用方法。6） 掌握DataGrid/GridView等数据显示控件的方法和技巧7） 掌握使用DataSet对象8） 理解数据绑定技术 9） 以Access数据库为例，熟练掌握ASP.net数据库存取技术。52实验知识点1、SQL回顾（1）查询记录的语法Select 某些字段 from 表名 where 条件（2）INSERT 子句的语法:INSETR INTO 目的表或查询(字段1,字段2,) values(数值1,数值2,)（3）D

26、ELETE子句的语法:DELETE 表名.* FROM 来源表 WHERE条件（4）更新数据语法:UPDATE 表名 SET 字段名=新值 WHERE 条件2、ADO.net处理数据库步骤53实验内容及要求1、实验内容编写一个用户注册网页，实现从网页表单中取出数据；判断输入是否正确，如果错误，进行报错；如果正确，将数据存入数据库中，另外通过Name_show.aspx进行显示现有用户。其中：（1）Name_Input.aspx页面为输入用户名和密码，点击“添加”按钮入库，跳转到Name_show.aspx页面；(2)Name_show.aspx页面的内容为将库中所有的数据全显示出来；修改列和删

27、除列都用模板列，在里面嵌入一个Label控件。在该页面点击删除连接，利用网页进入Name_del.aspx删除该用户；点击修改链接，则进入密码修改界面（Name_chg.aspx），进行用户密码修改（3）Name_del.aspx，在页面启动时删除参数传来的ID号之后，回到Name_show.aspx页面（4）Name_chg.aspx，表单界面与Name_Input.aspx类似，在页面启动时，按参数传来的ID号进行加载，点击“修改”按钮保存新信息入库，然后跳转到Name_show.aspx页面；（5）数据库的表名、字段名如下图所示 用户名:入库abcde添 加密 码:*DBMSName_Input.aspx提取编号姓名密码修改删除1张三修改删除2李四修改删除3王五32432修改删除Name_show.aspx删除记录(Name_del.aspx?id=xxx)修改记录(Name_chg.aspx?id=xxx)数据库设计，建立一个数据库MyUsers.mdb，表为Cuser，表结构如下：