软件学院《Web程序设计》实验报告

1软件学院实验报告课程名称Web程序设计专业计算机网络技术班级网络10306学号271030608姓名张鑫2012年6月5日2一.实验课题综合利用Web应用程序的客户端开发技术（包括HTML、CSS、JavaScript、DOM、DHTML、XML等）设计一个符合要求的Web应用程序界面，并在此界面的基础上实现用户交互功能的设计，达到Web应用程序可用性和易用性目标。二.实验目的1.通过综合使用超文本标记语言(HTML),javascript脚本,css样式表等多种技术设计和制作生动多彩的web网页,加深对HTML语言，javascript语言、css样式语言的掌握，以及对主流网页制作工具如MacromediaDreamweaer、Fireworks等的熟练使用，从而进一步提高从设计网页到制作网页整个过程中的实际操作能力，达到学以致用的教学目的。2.掌握关于静态网页和动态网页的相关知识，熟悉IIS的安装过程与配置方法。了解ASP网页的编写和Web服务器系统基础构架。三.实验环境1.硬件:Intel奔腾4处理器,联想显示器.2.软件:MicrosoftWindowsXP,3.MicrosoftInternetExplorer6.0,4.Windows自带记事本，5.MacromediaDreamweaer,Fireworks等。四.实验内容1.配置IIS。2.设计及制作静态网页与动态网页。本网站的网页的大部分功能均要求为手写代码。3.数据库中至少包含一到两个数据库表。五.实验步骤1．构思网站主题美容美体网站2．确定网页版式运用了HTML，使用表格，层，框架对网页进行合理布局，应用了必要的CSS式样，表单应用，以及access数据库，和javascript脚本，更重要的是建立了IIS充分运用了ASP。3通过文字大小疏密进行处理，突出重点，层次分明。网页的版式与主题相呼应，都是以美容美体为中心的，分别以两方面着手，美容类有：美白防晒，彩妆和完美护肤，美体类：舒心瑜伽，瘦腿和看我七十二变。3．搜集相关信息通过网络搜集了关于美容，彩妆，护肤，减肥，瘦身，瑜伽等相关信息，在查阅的爱美网，新浪女性网，腾讯女性网查阅相关信息，4．设计具体网页内容美容：1、彩妆2、美白防晒3、完美护肤美体：1、瘦腿2、舒心瑜伽3、看我七十二变美容类：重点是根据所查阅的资料，以及所学习的WEB知识进行构造网站，其中运用了HTML，使用表格，层，框架对网页进行合理布局，应用了必要的CSS式样，表单应用，以及access数据库，和javascript脚本，更重要的是建立了IIS充分运用了ASP。5.数据库表6．模块代码定义CSS样式，也就是网页样式headmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/title无标题文档/titlestyletype=text/css!--.STYLE2{font-size:80px;color:#9900CC;font-family:幼圆;}body{background-image:url(../53160-11111110524296.jpg);}.STYLE3{font-size:30px;color:#3300FF;border-top-style:none;border-right-style:none;border-bottom-style:none;border-left-style:none;}.STYLE4{font-family:幼圆;font-weight:bold;font-size:x-large;color:#FF6600;4}/style/headbodydivalign=centerpclass=STYLE2美容美体/pbgsoundsrc==621fb62c3a58f24d05efbff149ebffea&mid=0.80108542200970/divformaction=method=postname=form1class=STYLE4id=form1如果你还在为身材不好感到苦恼，如果你还在为皮肤较差感到怨天尤人，那么快加入美容美体网站，破茧重生不是梦想！/formp /pformid=form4name=form4method=postaction=labeldivalign=centerahref=file:///H|/WEB最后作业/网页/减肥瑜伽，最全面实用的瑜伽减肥方法-爱美网lady8844_com.htminputtype=checkboxname=checkbox3value=checkbox/快乐瘦身/a/div/label/formp /pformid=form2name=form2method=postaction=labeldivalign=centerinputtype=checkboxname=checkboxvalue=checkbox/ahref=file:///H|/WEB最后作业/网页/护肤知识【爱美网】解析正确的护肤步骤方法,搜罗美容护肤小窍门小常识-爱美网lady8844_com.htm美丽日志/a/div/labelp /p/form/div/body/html利用HTML语言安排控件htmlxmlns==Content-Typecontent=text/html;charset=gb2312/title无标题文档/titlestyletype=text/css!--body{background-image:url(%E5%9B%BE%E7%89%87/4fecfdeb21b48e95cf1b3e8a.jpg);}.STYLE1{font-size:x-large;font-family:幼圆;}5#Layer1{position:absolute;width:337px;height:167px;z-index:1;left:564px;top:140px;}.STYLE2{font-size:xx-large;font-family:幼圆;color:#FF0000;}.STYLE4{font-size:xx-large;color:#0000FF;}.STYLE7{font-size:x-large;font-weight:bold;}}--/style/headbodydivalign=centerformaction=method=postname=form1class=STYLE1id=form1看我七十二变/formdivclass=STYLE2id=Layer1divalign=center减肥大计/divtablewidth=293height=119border=1trthwidth=137scope=col纤纤小蛮腰/ththwidth=140scope=col小脸女人/th/trtrtdspanclass=STYLE4塑造美腿/span/tdtdspanclass=STYLE5甩走蝴蝶袖/span/td/tr/table/divpimgsrc=图片/img201206011024347.jpgwidth=327height=369/、aname=蜕变计划id=蜕变计划/aspanclass=STYLE7现在潮流突袭，越来越多的美女开始了减肥热，骨干才是新时尚的追求。那么今天让我带你们来一场破茧重生吧/span！/ppclass=STYLE6没有丑女人只有懒女人/pformid=form2name=form2method=postaction=label写出你的蜕变的美丽日记inputtype=textname=textfield//labellabel进入inputtype=submitname=Submitvalue=提交//label/formformid=form3name=form3method=postaction=label!--看我七十二变--6/labeldivid=Layer2如果你现在还在为了变美而发愁的话，请打开我们的美容美体网站，请问您想在这繁华的盛夏穿上那心仪已久的超短裙大秀美腿吗？/divlabelinputtype=imagename=imageFieldsrc=图片/jsp.jpg//label/formpclass=STYLE6 /p/div/body/htmlJavaScript交互功能的实现scriptlanguage=javascriptfunctiongetIE(E){vart=e.offsetTop;varl=e.offsetLeft;while(e=e.offsetParent){t+=e.offsetTop;l+=e.offsetLeft;}alert(top=+t+/nleft=+l);}/script//VBScriptscriptlanguage=VBScript!--functiongetIE()dimt,l,a,bseta=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhilea.tagNameBODYseta=a.offsetParent/script利用Asp进行数据库操作的代码%7usingsystem;usingvuser.ecommerce.dataproxy;namespacevuser.ecommerce.core{[serializable]publicclassbaseobject:icomparable{#region域成员privateintm_id;privatestringm_title;privatestringm_remark;privateidataproxym_dataproxy;privateboolm_ismodify=false;privateboolm_isdirty=false;privatestringm_sortfieldname;returnm_id;}}///summary///名称////summarypublicvirtualstringtitle{set{8m_title=value;}get{returnm_title;}}///summary///注释////summarypublicstringremark{set{m_remark=value;}}publicvirtualstringsortfieldname{get{if(m_sortfieldname==null){m_sortfieldname=id;}returnm_sortfieldname;}set{m_sortfieldname=value;9%六.实验结果主页10七．心得与体会通过本次关于WEB的设计，学习到了很多，并且把以前学习过的知识重新温习了一遍，例如JavaScript脚本的建立，关于html中CSS样式的应用，以及表单，层还有表格的运用，IIS的建立以及ASP的运用，在本次设计中，遇见了很多困