实验指导书-2012-首版-学生-实验1-5

1网站开发技术及应用（0740553104）课程实验指导书2012年首版2实验一：HTML静态网站开发（07405531041J）熟悉标记语言开发静态网站一、说明实验类别：专业实验学时：2学时实验类型：验证实验要求：必做二、实验一的内容运用标记语言设计一个静态网站，网站的主题是自我介绍的宣传类网站。具体实验要求：1、必须运用框架构建网站的整体架构。2、需要通过meta注明网站的信息及关键字。3、需要通过样式style来规范版面设计的风格。4、需要以图文的不同种方式（含对链接外观的修饰）实现多种链接功能。5、需要运用表单的各种标记（文本框、密码框、单选框、多选框、下拉列表-select/option、文本域-textarea、按钮、打包-fieldset/legend等）实现如注册、登录、留言等等功能页面。三、实验一的指导及提示1、框架设计：a)框架标记：frameset、frame和noframes。b)属性：rows、cols、border等。c)框架举例：framesetrows=20%,70%,10%border=0noresize!--border控制框架的间隔框--framesrc=frame-1.htm/framesetcols=30%,70%border=0noresizeframesrc=frame-2-l.htm/framesrc=frame-2-r.htmname=r//framesetframesrc=frame-3.htm//framesetnoframesbody您的浏览器无法处理框架！/body/noframes2、网站页面信息：a)网页信息标记：meta。b)属性：http-equiv、content、charset、name。c)属性举例：http-equiv=Content-Typecontent=text/html;charset=gb2312name=descriptioncontent=HTMLexamplesname=keywordscontent=HTML,CSS,JavaScript,VBScript3http-equiv=Refreshcontent=5;url=、Style样式：有三种样式修饰方式，都需要练习。a)内联样式：ahref=link.htmstyle=text-decoration:nonehyperlinktolink.htm/ab)嵌入样式：headstyletype=text/cssh1{font-family:隶书;color:red}h3{font-family:仿宋;color:blue}/style/headc)外联样式：headlinkrel=Stylesheettype=text/csshref=stylesheet.css//head被引用的stylesheet.css文件的内容：h1{font-family:隶书;color:red}h3{font-family:仿宋;color:blue}a{text-decoration:none}4、链接：a)文字链接：ahref=链接目的页面文字/ab)图片链接：ahref=2-8-anchor-2.htmimgsrc=image/AG00037_.GIFwidth=60height=60//ac)锚点：链接到锚点：ahref=2-8-anchor-2.htm#xianshi2第二部分/a定义锚点：aname=xianshi2第二部分/ad)邮件链接：ahref=mailto:[e-mail]?subject=hello%20again发送邮件/a5、表单设计：a)Input的type属性决定文本框、密码框、单选钮、复选框、按钮等几种控件形式。b)Select和option组合完成列表框。c)Input的type属性submit、reset是两个默认按钮，分别实现提交、重置的功能。d)其他有关属性：name、value、checked、rows、cols等，需要适当运用。四、实验评价1、技术部分要求运用全部课堂所涉及的知识。2、自己独立完成网站设计。3、网站整体内容主题统一，内容协调、美观。4、上交网站系统，随机抽检技术知识的掌握情况。4实验二：ASP网站开发（07405531042J）在静态页面的基础上完善脚本代码（客户端及服务器端）一、说明实验类别：专业实验学时：2学时实验类型：验证实验要求：必做二、实验二的内容在实验一网站系统的注册功能（表单提交）的基础上开展实验二的实验。1、编写一段“注册”客户端脚本，在“检测”按钮被点击时弹出提示框，显示用户所填的信息。2、编写一段“注册”服务器端脚本（独立文件），把提交上来的信息存储到客户端的cookie中，并在另一个页面显示出来。3、客户登录时，网站调取客户端cookie里的注册信息，加以判断并导向有关页面（根据情况进入错误页面或进入正确页面）。4、学生可以根据实验一自己设计的网站完成ASP代码编程，以完成其他相应功能。三、实验二的指导及提示1、运用ASP脚本代码，需要注意调试的环境搭建（IIS设置，主目录、执行权限设置选择“脚本和可执行文件”）。2、适当在ASP代码中运用分支结构、循环结构实现相应的功能。3、在适当功能中运用inputbox、msgbox、alert实现客户端弹出提示窗口。4、熟悉四种客户端脚本代码嵌入方式。5、熟悉ASP对象response、request、server、window等对象完成诸如页面数据保存、页面客户端信息获取、页面跳转等技术功能。四、代码样例1、样例一%@language=vbscript%htmlbody%response.Write(设置cookie信息。)response.Cookies(user)(info)=info_test%formaction=3-4-asp_jump.aspinputtype=submitvalue=确认并跳转一/inputtype=buttonname=buvalue=确认并跳转二/scriptfor=buevent=onclicklanguage=vbscriptwindow.location=、样例二%@language=vbscript%htmlbody%Response.Write(获取并显示前面保存的cookie数据。)Response.write(request.cookies(user)(info)&br/)%formaction=3-4-asp_jump_yahoo.aspinputtype=submitvalue=确认并跳转一//form/body/html3、样例三%response.Redirect()%五、实验结果1、技术部分要求运用全部课堂所涉及的知识。2、自己独立完成网站设计。3、网站整体内容主题统一，内容协调、美观。4、上交网站系统，随机抽检技术知识的掌握情况。6实验三：Web控件编程（07405531044J）一、说明实验类别：专业实验学时：2学时实验类型：设计实验要求：必做二、实验四的内容1、创建一个项目（名字自定），其中创建1个母版页、创建4个页面a.aspx、b.aspx、c.aspx、d.aspx。a.aspx作为登录页面，b.aspx作为注册页面，c.aspx作为登录成功后进入的功能页面，d.aspx是具体某个功能的页面。c.aspx、d.aspx都需要使用母版页。2、登录页面具有“注册”链接用以链接到注册页面。注册页面录入“登录帐号、密码、出生日期、性别、邮箱”信息（充分运用所学的标准控件、验证控件），注册成功后返回到登录页面。3、母版页具有TreeView导航控件实现树型链接节点。4、登录（也要有验证）成功后进入c.aspx页面。点击其中某个节点即可进入d.aspx。三、实验四的指导及提示1、运用验证控件的页面（a.aspx、b.aspx）需要在按钮事件中首先判断验证控件是否都通过了验证，方法是用if(Page.IsValid)判断：Page.IsValid为true表示页面所有验证控件都已通过，否则就是没有通过验证。2、c.aspx、d.aspx中随意实现效果以体现出是不同的页面，以便调试时辨认。四、代码样例1、样例一%@PageLanguage=C#AutoEventWireup=trueCodeFile=Default.aspx.csInherits=_Default%!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==servertitletest-ccc/titlestyletype=text/css.style1{width:50%;}.style2{width:80px;}/style/headbodyformid=form1runat=serverdivtablealign=centercellpadding=0cellspacing=0class=style17trtdalign=rightclass=style2name:/tdtdasp:TextBoxID=TextBox1runat=serverWidth=150px/asp:TextBox/tdtdasp:RequiredFieldValidatorID=RequiredFieldValidator1runat=serverControlToValidate=TextBox1Display=NoneErrorMessage=无用户名！SetFocusOnError=True/asp:RequiredFieldValidator/td/trtrtdalign=rightclass=style2pass1:/tdtdasp:TextBoxID=TextBox2runat=serverTextMode=PasswordWidth=150px/asp:TextBox/tdtdasp:RequiredFieldValidatorID=RequiredFieldValidator2runat=serverControlToValidate=TextBox2Display=NoneErrorMessage=无密码！SetFocusOnError=True/asp:RequiredFieldValidator/td/trtrtdalign=rightclass=style2pass2:/tdtdasp:TextBoxID=TextBox3runat=serverTextMode=PasswordWidth=150px/asp:TextBox/tdtdasp:CompareValidatorID=CompareValidator1runat=serverControlToCompare=TextBox3ControlToValidate=TextBox2Display=NoneErrorMessage=密码不一致！SetFocusOnError=True/asp:CompareValidator/td/tr