web实验报告

1教案（第次实验，4学时）实验名称课程设计个人网站实验目的和要求掌握B/S编程的基本思想；掌握B/S编程的相关技术，包括HTML、JavaScript、JQuery等；完成课程设计报告。实验内容使用所学知识，创建一个人网站。功能要求：前台：首页（公告、新闻、友情链接、访客统计、登录等）身份证查询Email发送聊天室留言簿设计要求：功能基本实现；使用DIV+CSS；界面美观。参考资料《ASP精解案例教程》清华大学出版社，石志国《ASP程序设计（第2版）》，高等教育出版社，张景峰2实验五课程设计一、课程设计的目的和要求掌握Web前端编程的相关技术，包括HTML、JavaScript、JQuery等；完成课程设计报告。二、实验内容使用所学知识，创建一个人网站。1．功能要求：首页（公告、新闻、友情链接、登录等）身份证查询Email发送聊天室留言簿2．设计要求：功能基本实现；使用DIV+CSS；界面美观。三、实验重点和难点相关技术的灵活使用界面的美观和谐四、实验过程31、先构思网站框架，构思之后想好主题，并稍做记录。2、用table和div+css代码写出网站框架，调整好页面，在主界面中添加内容和背景，以及链接。3、添加子网页，使主页具有留言和注册等功能。4、主界面代码：htmlheadtitlemyhouse/titlelinkhref=lib/ligerUI/skins/Aqua/css/ligerui-all.cssrel=stylesheettype=text/css/linkrel=stylesheettype=text/cssid=mylink/scriptsrc=lib/jquery/jquery-1.3.2.min.jstype=text/javascript/scriptscriptsrc=lib/ligerUI/js/ligerui.all.jstype=text/javascript/scriptscriptsrc=lib/ligerUI/js/plugins/ligerTab.js/scriptscriptsrc=lib/jquery.cookie.js/scriptscriptsrc=lib/json2.js/scriptscriptsrc=indexdata.jstype=text/javascript/scriptscripttype=text/javascriptvartab=null;varaccordion=null;vartree=null;vartabItems=[];$(function(){//布局$(#layout1).ligerLayout({leftWidth:190,height:'100%',heightDiff:-34,space:4,onHeightChanged:f_heightChanged});varheight=$(.l-layout-center).height();//Tab$(#framecenter).ligerTab({height:height,showSwitchInTab:true,showSwitch:true,onAfterAddTabItem:function(tabdata){4tabItems.push(tabdata);saveTabStatus();},onAfterRemoveTabItem:function(tabid){for(vari=0;itabItems.length;i++){varo=tabItems[i];if(o.tabid==tabid){tabItems.splice(i,1);saveTabStatus();break;}}},onReload:function(tabdata){vartabid=tabdata.tabid;addFrameSkinLink(tabid);}});//面板$(#accordion1).ligerAccordion({height:height-24,speed:null});$(.l-link).hover(function(){$(this).addClass(l-link-over);},function(){$(this).removeClass(l-link-over);});//树$(#tree1).ligerTree({data:indexdata,5checkbox:false,slide:false,nodeWidth:120,attribute:['nodename','url'],onSelect:function(node){if(!node.data.url)return;vartabid=$(node.target).attr(tabid);if(!tabid){tabid=newDate().getTime();$(node.target).attr(tabid,tabid)}f_addTab(tabid,node.data.text,node.data.url);}});tab=liger.get(framecenter);accordion=liger.get(accordion1);tree=liger.get(tree1);$(#pageloading).hide();css_init();pages_init();});functionf_heightChanged(options){if(tab)tab.addHeight(options.diff);if(accordion&&options.middleHeight-240)accordion.setHeight(options.middleHeight-24);}functionf_addTab(tabid,text,url){tab.addTabItem({tabid:tabid,6text:text,url:url,callback:function(){addShowCodeBtn(tabid);addFrameSkinLink(tabid);}});}functionaddShowCodeBtn(tabid){varviewSourceBtn=$('aclass=viewsourcelinkhref=javascript:void(0)查看源码/a');varjiframe=$(#+tabid);viewSourceBtn.insertBefore(jiframe);viewSourceBtn.click(function(){showCodeView(jiframe.attr(src));}).hover(function(){viewSourceBtn.addClass(viewsourcelink-over);},function(){viewSourceBtn.removeClass(viewsourcelink-over);});}functionshowCodeView(src){$.ligerDialog.open({title:'源码预览',url:'dotnetdemos/codeView.aspx?src='+src,width:$(window).width()*0.9,height:$(window).height()*0.9});}7functionaddFrameSkinLink(tabid){varprevHref=getLinkPrevHref(tabid)||;varskin=getQueryString(skin);if(!skin)return;skin=skin.toLowerCase();attachLinkToFrame(tabid,prevHref+skin_links[skin]);}varskin_links={aqua:lib/ligerUI/skins/Aqua/css/ligerui-all.css,gray:lib/ligerUI/skins/Gray/css/all.css,silvery:lib/ligerUI/skins/Silvery/css/style.css,gray2014:lib/ligerUI/skins/gray2014/css/all.css};functionpages_init(){vartabJson=$.cookie('liger-home-tab');if(tabJson){vartabitems=JSON2.parse(tabJson);for(vari=0;tabitems&&tabitems[i];i++){f_addTab(tabitems[i].tabid,tabitems[i].text,tabitems[i].url);}}}functionsaveTabStatus(){$.cookie('liger-home-tab',JSON2.stringify(tabItems));}functioncss_init(){varcss=$(#mylink).get(0),skin=getQueryString(skin);$(#skinSelect).val(skin);$(#skinSelect).change(function(){8if(this.value){location.href=index.htm?skin=+this.value;}else{location.href=index.htm;}});if(!css||!skin)return;skin=skin.toLowerCase();$('body').addClass(body-+skin);$(css).attr(href,skin_links[skin]);}functiongetQueryString(name){varnow_url=document.location.search.slice(1),q_array=now_url.split('&');for(vari=0;iq_array.length;i++){varv_array=q_array[i].split('=');if(v_array[0]==name){returnv_array[1];}}returnfalse;}functionattachLinkToFrame(iframeId,filename){if(!window.frames[iframeId])return;varhead=window.frames[iframeId].document.getElementsByTagName('head').item(0);varfileref=window.frames[iframeId].document.createElement(link);if(!fileref)return;fileref.setAttribute(rel,stylesheet);fileref.setAttribute(type,text/css);fileref.setAttribute(href,filename);9head.appendChild(fileref);}functiongetLinkPrevHref(iframeId){if(!window.frames[iframeId])return;varhead=window.frames[iframeId].document.getElementsByTagName('head').item(0);varlinks=$(link:first,head);for(vari=0;links[i];i++){varhref=$(links[i]).attr(href);if(href&&href.toLowerCase().indexOf(ligerui)