《Web基础》实验指导汇总

《Web基础》实验指导学院：信息科学与技术学院专业：信息管理与信息系统学期：2016~2017学年第二学期教师：李立现2实验报告（一）院系：信息学院课程名称：Web基础日期：班级姓名专业信息管理与信息系统学号实验室601实验名称Web体系成绩评定教师签名实验目的掌握web体系的构成；掌握web服务器的操作；掌握HTTP协议；掌握Socket编程掌握XML的操作实验内容Web页面发布、http协议、xml协议解析1、请是dreamweaver建立网站，并分步骤截图，按照流程操作（30分）32、请配置IIS服务器，以HTTP协议访问自己的页面。请将命令及服务器反馈的信息截图显示。（20分）43、请在dreamweaver中配置好IIS服务器，可以在dreamweaver直接使用HTTP浏览网页。（20分）564、请以自己的学号、姓名为内容，在局域网中发布该页面。请写清发布流程，必须有效果7截图，否则0分。（30分）。89实验报告（二）院系：信息学院课程名称：Web基础日期：班级姓名专业信息管理与信息系统学号实验室708实验名称HTML技术成绩评定教师签名实验目的掌握HTML语言的语法、HTML文件的主体结构、HTML文档头部元素、文字版面的编辑、创建图像和链接、使用HTML表格和HTML表单设计等开发中重点知识点。实验内容Html相关标签，网页布局等1、文字部分设计，请设计如下内容。（20分）102、表格综合设计，请设计如下框架结构，并且以如下结构设计一个个人自我介绍的主页。请写出HTML标签及效果图(50分)效果图30分。（1）效果美观内容详细30分（2）效果较美观内容较详细20分（3）效果基本美观内容基本详细10分（4）效果差内容简单0分3、请设计如下表单形式。（30分）1112实验报告（三）院系：信息学院课程名称：Web基础日期：班级姓名专业信息管理与信息系统学号实验室708实验名称CSS技术成绩评定教师签名实验目的了解CSS的用途，掌握CSS的BOX模型，灵活运用CSS的各种选择器;掌握CSS的布局样式，灵活掌握常用的CSS布局样式;掌握CSS的背景样式，灵活运用CSS的背景定位;掌握CSS的文本样式，并且通过文本样式控制文本的常见样式;掌握CSS的边框样式。实验内容CSS样式应用1、已知如下标签bodydivid=boxpasdfasdf/ppasd/ppfasdfaasdfasdfasdfasdfasdfasdfasdfasd/ppsdfasdfafasdfasdfklja;sdfkjas;dfjasd;fla/p/div/body现要实现如下效果13请使用CSS样式生成上述效果（20分）2、请设计如下连接效果原始状态鼠标移到新浪上网易上请给一下代码设计样式pahref=#新浪/a/ppahref=#搜狐/a/ppahref=#class=a1网易/a/p要求不改变原标签内容（20分）3、已知如下标签bodydivid=box/divdivid=box1/div/body请通过CSS样式达到如下效果（20分）144、请把如下标签设计成指定效果。（20分）bodydivid=wrapullispan2011-10-15/spanahref=#class=video国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#class=video国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#国土部官员谈征地纠纷:现有补偿安置制度存问题/a/lilispan2011-10-15/spanahref=#class=video国土部官员谈征地纠纷:现有补偿安置制度存问题/a/li/ul/div/body5、请设计如下效果（20分）1516实验报告（四）院系：信息学院课程名称：Web基础日期：班级姓名专业信息管理与信息系统学号实验室708实验名称JavaScript技术成绩评定教师签名实验目的掌握JavaScript的基础，语法，掌握JS的数据类型、变量、运算符及流程控制;掌握JavaScript的内置对象--Array、String、Date、Math等;掌握自定义函数的作用、语法，并且根据需要创建符合要求的函数;DOM对象编程，可以通过DOM对象进行对象控制。实验内容Javascript技术应用请运行如下代码，显示效果，并解释有那些数组操作的函数。（10分）scripttype=text/javascriptvararr1=newArray();//空数组vararr2=newArray(5)//非空数组,数组的长度为5vararr3=newArray(2,5,A,B,true,3689,60);//非空数组,长度7vararr4=[];//空数组vararr5=['A',B,C,true,false,600,2.5];document.write(typeof(arr1)+,长度为:+arr1.length+br/);document.write(typeof(arr2)+,长度为:+arr2.length+br/);document.write(typeof(arr3)+,长度为:+arr3.length+br/);document.write(typeof(arr4)+,长度为:+arr4.length+br/);document.write(typeof(arr5)+,长度为:+arr5.length+br/);document.write(arr3[2]);arr3[2]=Tom;document.write(br/);document.write(arr3[2]);vararr6=newArray(C,D,E);document.write(parr6的长度是:+arr6.length+,它们的元素包含:+arr6+/p);17varcount1=arr6.push(F,G);//在数组未尾添加一个/多个成员document.write(parr6的长度是:+count1+,它们的元素包含:+arr6+/p);varcount2=arr6.unshift(A,B);//在数组开头添加一个/多个成员document.write(parr6的长度是:+count2+,它们的元素包含:+arr6+/p);varfirst=arr6.shift();document.write(parr6的长度是:+arr6.length+,它们的元素包含:+arr6+,成员+first+被删除/p);varlast=arr6.pop();document.write(parr6的长度是:+arr6.length+,它们的元素包含:+arr6+,成员+last+被删除/p);//通过splice方法来模拟array对象的push、pop、shift、unshift方法/*splice的基本用法Array.splice(start,deletecount,value,...)*///pushvararr7=[B,C,D,E];arr7.splice(arr7.length+1,0,F,G,H);document.write(arr7+br/br/);//unshiftarr7.splice(0,0,2,1,0,A);document.write(arr7+br/br/);18//poparr7.splice(arr7.length-1,1);document.write(arr7+br/br/);//shiftarr7.splice(0,1);document.write(arr7+br/br/);vararr8=arr7.slice(2,5);//返回包含起始位，但不包含结束位的数组成员document.write(arr8+br/br/);vararr9=arr7.concat(arr8);document.write(arr9+br/br/);varstr=arr9.join();document.write(str+br/br/);varstr2=arr9.join(|);document.write(str2+br/br/);/script请运行如下代码，说明有哪些字符串操作函数。（10分）scripttype=text/javascriptvarstr=newString(ABCDEF);document.write(str.indexOf(1)+br/br/);//返回指定字符在原字符中第一次出现的位置，如果没有出现则返回-119document.write(str.substr(2)+br/br/);//object.substr(start[,length])document.write(str.substr(2,2)+br/br/);document.write(str.substring(2)+br/br/);//object.substring(start[,end]),包含起始位，但不包含结束位document.write(str.substring(2,3)+br/br/);document.write(str.charAt(0)+br/br/);document.write(str.charCodeAt(0));varstr2=A|B|C|D|E|F;vararr1=str2.split(|);for(vari=0;iarr1.length;i++){document.write(arr1[i]+br/);}document.write(ABCDEA.replace(A,B));document.write(br/);document.write(String.fromCharCode(75));/script20请在页面中显示当前的系统日期以****年**月**日的格式(10分)请设计一个按钮能够改变页面的背景颜色。（10分）请实现如下效果:单击前：单击后htmlxmlns==Content-Typecontent=text/html;charset=utf-8/titleUntitledDocument/title/headbodyscripttype=text/javascriptfunctionchangeInlineCss(){