实验一、Web页面设计（设计性实验）（3学时）
实验目的：
1.掌握使用语言设置文木格式和列表格式的方法。
2.掌握使川语言插入图像和创建表格的方法。
3.掌握使用语言创建框架网页和超连接的方法。
4.掌握使用语言创建表单和添加表单控件的方法。
5.掌握使用CSS方法，实现特殊效果的显示。
6.举握Visual Studio 2005集成开发环境的使用。
实验要求：
1.使用Visual Studio2005设计网页。（也可以利用Drcamwavcr M贞制作工具设计网页，
或直接在圮事本中编写代码），比较使用软件工具设计贝面生成的代码量，能够读懂
代码，删除不需要的信息。
2.通过框架、表格、表单和列表等元素，组织页而，实现静态页而的设计。
3.在页面上布置导航信息。
4.设计用户交互信怠的界面。
5.在页面中，通过使用CSS，控制页面的总体！示效果。
实验步骤：
使用Visual Studio2005设计静态M页，理解语言语法规范，也可采用Dreamweaver 或记事本等编辑软件直接完成。
注意在设计中避免使用中文的目录及文件名称。（满足系统的兼容性问题，中文编码方式多样性导致易出错》
1.根据提供的北京联合人学写邮件图片信息（mail.jpg），编写完成相应的网页。
1.通过＜table〉元素亦局，设计页而，确定文捫中对应的元素，将相应的表雄元素进行
合理的摆放。
2.加入文木元素、图像元素，完成相成的超级链接任务，注意图什等信息的路径问题。
3.阅读styl .css文件，理解其中给出的元素设定，将其与网贝连接。注意修改css文件，
保证阁片信息的位置是正确的。
通过设定docunent对象的Styl esheet, Ti tl e等属性，进行相应的设计。
4.发件人等栏目，艽风格设定采用css文件中的bgcolor2类设定。
5.发送等按钮，使用css文件中的but类设定。
6.浏览按钮，使川css文件中的butl类设定。
7.发邮件中的特殊符号N 。
8.表屮的边框显示，尝试使用css屮相应的类完成。
9.删除css文仲中不相关的设定，使css文件最简洁。
2.根据提供的信息学院主页的图片信息（xinxil.jpg和xinxi2.jpg），以及相关的图片素材，完成相应网页的设计工作（构图，没时间不做）。
1.创建网页，使用表格元素，完成相应的布局工作。
2.加入文木元素、阁像元素，完成相应的超级链接任务，注意阁片等信息的路径问题, 保
证网页信息的正常显示。注意在设计中避免使用中文的鬥录及文件名称。
3.阅读理解style-buu.css文件内各，规范newpaperl和newpaper2的显示风格。
4.使用iFrame元素，在页面中显示相应信息。
5.当鼠标移过导航条屮的图片吋，改变显示的图片。
6.阅读源文档，册齡不必要的信息。
思考题：
1、使川现奋的网页编辑软件,Dreamwaver或FrontPage，或Word等软件，都可巾成文捫，其
优点和缺陷何在？
2、语言是什么语言，其如何在浏览器上显示？当改变浏览器的显示区域时，显示的位置可能
会发生变化，如何岡定元素显示的位置？
3、现在网页上有很多动态效果，如浮动的广告信息，如何实现，通过学习的标记，可否完成？
4、在网页设计屮，当鼠称移过阁片时，显示的阁片发生了变化，当鼠标移过超级链接时, 显示
的文本也发生了相应的调整，两者之间在设计时冇何区别？
5、网页中显示的当天时间信息是如何实现的，比较有效的方法是什么？
6、CSS的主要用途是什么？如何设计CSS，使网站中超级链接无下划线，当鼠标移到上而时，
改变显示的颜，点击后，以另一种颜显示出来？
7、CSS单独保存为文件合适，还是在文档屮，需要的位置直接编写CSS样式杏效？
8、如何使川meta元素，实现客户端的动态页面切换效果？
实验二、使用JavaScript语言编程（设计性实验）（3学时）
实验目的：
1.掌握alert、prompt和confirm函数的使用方法。
2.掌握在＜script＞标记对中，直接编写脚本代码和编写函数，通过事件调用的方法。
3.掌掘文档对象模型的层次概念，编写脚本代码，获取并妞示用户在表单屮输入的信息。
4.编写脚本代码，判断川户输入信总的奋效性。
实验要求：
1.通过不同的引用JavaScript脚木的方式，了解网页中使用脚木语言的方法。
2.编写JavaScript蚋数，了解函数参数的作用和调用方法。
3.编写JavaScript函数，熟悉和使用DOM文档对象模型中的对象。
实验步骤：
1.编写一个网页，在其＜body〉中编写一段脚本代码，当加载页面时，显示一个输入对
诘框，提示访问者输入姓名，单击“确定”按钮，在另一对诘框中显示对访M者的欢
迎信息。
2.编写一个网页，在M:＜head〉屮编写一段脚木代码，当加载页面时，通过事件调用的方
式，运行脚本代码，显示一个输入对话框，提示让访问者输入姓名，单击“确定” 按
钮，在另一对话框中显示对访问者的欢迎信息。
（注意：1中是一段程序代码，2中使用函数调用的方式，事件为onload。）
3.编写页面，在页面中显示一张图片（素材中提供的一个小负）和一个“交换图片” 的
按钮，单击按钮吋，将素材中提供的两个小负|冬I像反复进行显示。（提示：通过修
改img的src值完成）
4.利用如下的定时器功能，修改3中的显示，实现图形毎秒&动切换。
var timer 1 = setTimeout（“show（）”，1000）;//设定定吋器，每一秒调用一次
show（）函数clearTimeOut（timerl）; //淸除定吋器
5.编写一个页面，在浏览器的状态栏中，显示机器吋阅。（使用Date对象和window.status）
（可不做）
6.修改3中的代码，编写相应的程序，实现当鼠标移到图八上时，改变显示的图八。
（可不做）
7.修改实验一中编写的写邮件页而，添加脚本代码，当单击“发送”按钮时，判断当发
件人、收件人和主题为空时，取消发送操作，同时用对话框给出相应的提示信息。
思考题：
1.客户端的动态网页设计，脚本语言奋VBScript和JavaScript，选川哪一种语言较为合
适？
2.JavaScript语言在网页设计中，主要的用途是什么？
3.JavaScript语言在网災设计屮，和传统的语言编写代码有何主耍区別？
4.通过JavaScript语言，完成在客户端的老用户登陆和新用广注册的功能。
实验三、ASP.NET服务器控件的使用（设计性实验）（4学时）
实验目的：
1.掌握服务器控件的使用和相关事件处理。
2.理解和掌握服务器和Web服务器对象的使川。
3.理解验证控件的使用特点，掌握其基木的操作方法。
4.理解和掌握用户控件的使用。
实验要求：
1.川服务器控件布S页面，并实现相应的事件处理功能。
2.使用列表控件，编辑数据项，设置AutoPostBack属性，实现列表控件的事件响应功能。
3.在页而中加入验证控件，理会验证控件的处理事件方式。
4.使用FileUpload、Panel、Wizard等复杂控件，完成较为完善的功能。
5.实现邮件发送的功能。
6.学＞』用户控件的设计，在Web窗体页面屮，使用用户控件。
实验步骤：
1.使用ASP.NET服务器控件，编写用Z1注册页面（zhuce.jpg）。
1）在该页面中加入一些服务器端的控件，考虑页面的布局。
2）通过程序设计的方式，对未填写必填信息的怙况进行相应的错误信息进行事件处理，外给出相应的显示（区别div、Span的服务器控件川法以及literal、label 控件
用法的不同）。
3）再添加一个控件，显示用户输入的所有信息内容。
4）另外编写一个完全相同的页面，也可以添加新页面，将上个页面屮的所旮控件, 通过复制的方式，粘贴到新的页而中。添加验证控件，设定验证控件的属性, 确保
用户名和密码不得为空，出生年份ft 1900〜2006年之间，刀份在1〜12 月之间，
为有效的邮箱信息，并给出错误统计姑示。
如果上机为2学时，以下内容参考本手册，可自行完成，不做实验要求。
2.使川FileUpload服务器控件，实现文件上传的功能。文件上传的页面如图
shangchuanl.jpg所示，选择文件上传V?，芥显示如图shangchuan2.jpg所示:，如果没有选择文件，直接单4•上传按钮，则显示如图shangchuan3.jpg所不。
1)按照罔中所示，添加相应的服务器控件。
2)己知FileUpload控件的相关属性和方法如卜*:
FileUpload.SaveAs方法：将上载的文件的内容保存到Web服务器上的指定路径。属性
FileUpload.FileName：获取客户端上使用FileUpload控件上载的文件的名称。
FileUpload.HasFile：获取一个值，该值抬承FileUpload校件是否含文件。
FileUpload.PostedFile.ContentLength：获取上载文件的人小(以字节力単位)。
FileUpload.PostedFile.ContentType：荻取客户端发送的文件的MIME 界类型。
FilcUpload.PostcdFilc .FilcNamc：获取客户端上的文件的完全限定名称。
阅读理解下面的程序代码，指出该程序实现的功能是什么。简化程序代码，实现实验中文件上传的功能，满足图示的要求。
Sub SaveFile(ByVal file As HttpPostedFile)
Dim savePath As String = n c:\temp\uploads\n Dim
iframe参数传递fileName As String = FileUpload 1 .FileName Dim
pathToChcck As String = savePath + fileName Dim
tempfileName As String
If (System.10.File.Exists(pathToCheck)) Then Dim
counter As Integer = 2 While
(System.IO.File.Exists(pathToCheck))
tempfileName = countcr.ToStringO + fileName
pathToCheck = savePath + tempfileName counter
= counter + 1
End While
fileName = tempfileName
UploadStatusLabcl.Tcxt = ‟‟Your file was sa ved as " + fileName
Else
UploadStatusLabel.Text = ‟‟Your file was uploaded successfully."
End If
savePath += fileName FileUpload 1 .SavcAs(savcFath)
End Sub
3.使川Panel控件，充实川户注册部分的功能，如添加川户爱好等信息输入的部分，将
显示分为几个步骤，分为上一页或下一页方式操作。
提示：添加儿个Panel控件，将相应信怠分别布置在Panel十，通过事件代码，控制Panel 的visible值力false成true。保证不hi］部分的正常显乐。
4.使用Wizard服务器控件，完成与3相同的功能。
5.编程实现邮件的发送功能。
1)发送邮件的页而，显示如阁sendmail.jpg所示。设计该页而，增加相应的验证控
件，保证邮箱地址正确、主题信息不可为空。
2)在IIS 6.0上安装SMTP服务
默认情况下，不随1IS安装SMTP服务。必须使用“控制面板”安装SMTP服务。安装SMTP 服务将创建一个默认的SMTP配S，随后可以使川1IS管理器£1定义该配置。
a)单击“控制酣板”，双击“添加/删除程序”，然f单击“添加/删除Windows组件”。
b)在“组件”列表中，单击“应用程序服务器”，然后单击“详细信息”。
c)在“应用程序服务器的了•组件”列表中，单击“Internet信息服务(1IS)”，然活单击
“详细信息”。
d)在"Internet信息服务(IIS)的子组件”列表中，选巾“SMTP服务”复选桐，然后单
击“确定”，按照说明操作。
安装SMTP服务时，将在C:\Inetpub\Mailroot屮创建一个具杏消息存储区的默认SMTP服务器配置。US SMTP服务只是一个中继代理。将转发到SMTP服务器进行传递。
1)在fig屮，参照以下方式，设定使用默认M络凭据发送电了•邮仲时所需的
适当SMTP参数。
〈configuration〉
<system〉
<mailSettings>
<smtp deliveryMethod=”network"〉
〈network host="localhost” port=‟‟25n defaultCredentials=‟‟true”/〉
</$mtp>
〈/mailSettings〉
</system>
〈/configuration〉
2)参照以下程序，实现邮件发送的功能。保证程序中控件名称和页ifti中信息对应。
Imports System.Net.Mail
Sub SendMail()
Dim msg As MailMessage
Dim from As Mail Address = New MailAddress(mailfrom.Text)
Dim to 1 As MailAddress = New MailAddress(mailto.Text) msg =
New MailMcs$agc(from, tol)
msg.Subject = mailsubject.Text msg.Body = mailbody.Text …If
FileUploadl .HasFile Then
Dim ar As Attachment
ar = New Attachment(FileUploadl.FileContcnt，FileUploadl.PostedFile.ContcntType) msg.
Attachments. Add(ar)
…End If
Dim client As SmtpClient = New SmtpClient client.Send(msg)
End Sub
7.设计用户控件，并在Web窗体页面中，使用用户控件。
1)在用户控件中，添加用户名和用户密码输入文本框。
2)在Web窗体页面上，添加用户控件和一个按钮，单击按钮时，将用户输入的信
息，显示在Web窗体上。
思考题：
1.控件和服务器控件的主耍差异是什么？
2.使用验证控件的主耍好处和弱点是什么？
3.实验中，年；!信息使用文木框和验证控件，还是使用下拉列表控件比较好？
4.文件上传可以使川FileUpload服务器控件完成，如何实现文件卜载的功能？
5.文件上传中，直接设定文件实际存储的物理位置有何缺陷？如何将文件保存在网站可
管理的存储空间内？

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。