《Web基础》实验指导_第1页
《Web基础》实验指导_第2页
《Web基础》实验指导_第3页
《Web基础》实验指导_第4页
《Web基础》实验指导_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、Web基础实验指导学 院：信息科学与技术学院专 业： 信息管理与信息系统 学 期：20162017学年第二学期教 师： 李立现 27实验报告（一）院系：信息学院 课程名称：Web基础 日期：班 级姓 名专 业信息管理与信息系统学 号实 验 室601实验名称Web体系成 绩 评 定教 师 签 名实验目的掌握web体系的构成；掌握web服务器的操作；掌握HTTP协议；掌握Socket编程掌握XML的操作实验内容Web页面发布、http协议、xml协议解析1、 请是dreamweaver建立网站，并分步骤截图，按照流程操作（30分）2、 请配置IIS服务器，以HTTP协议访问自己的页面。请将命令及服

2、务器反馈的信息截图显示。（20分） 3、 请在dreamweaver中配置好IIS服务器，可以在dreamweaver直接使用HTTP浏览网页。（20分） 4、 请以自己的学号、姓名为内容，在局域网中发布该页面。请写清发布流程，必须有效果截图，否则0分。（30分）。实验报告（二）院系：信息学院 课程名称：Web基础 日期：班 级姓 名专 业信息管理与信息系统学 号实 验 室708实验名称HTML技术成 绩 评 定教 师 签 名实验目的掌握HTML语言的语法、HTML文件的主体结构、HTML文档头部元素、文字版面的编辑、创建图像和链接、使用HTML表格和HTML表单设计等开发中重点知识点。实验内

3、容Html相关标签，网页布局等1、 文字部分设计，请设计如下内容。（20分）2、 表格综合设计，请设计如下框架结构，并且以如下结构设计一个个人自我介绍的主页。请写出HTML标签及效果图(50分)效果图30分。（1） 效果美观内容详细30分（2） 效果较美观内容较详细20分（3） 效果基本美观内容基本详细10分（4） 效果差内容简单0分3、 请设计如下表单形式。（30分）实验报告（三）院系：信息学院 课程名称：Web基础 日期：班 级姓 名专 业信息管理与信息系统学 号实 验 室708实验名称CSS技术成 绩 评 定教 师 签 名实验目的了解CSS的用途，掌握CSS的BOX模型，灵活运用CSS的

4、各种选择器;掌握CSS的布局样式，灵活掌握常用的CSS布局样式;掌握CSS的背景样式，灵活运用CSS的背景定位;掌握CSS的文本样式，并且通过文本样式控制文本的常见样式;掌握CSS的边框样式。实验内容CSS样式应用1、 已知如下标签<body> <div id="box"> <p>asdfasdf</p> <p>asd</p> <p>fasdfaasdfasdfasdfasdfasdfasdfasdfasd</p> <p>sdfasdfafasdfasdfklja;s

5、dfkjas;dfjasd;fla</p> </div> </body>现要实现如下效果请使用CSS样式生成上述效果（20分）2、 请设计如下连接效果 原始状态 鼠标移到新浪上 网易上请给一下代码设计样式<p><a href="#">新浪</a></p><p><a href="#">搜狐</a></p><p><a href="#" class="a1">网易&l

6、t;/a></p>要求不改变原标签内容（20分）3、 已知如下标签<body><div id="box"></div><div id="box1"></div></body>请通过CSS样式达到如下效果（20分）4、请把如下标签设计成指定效果。（20分）<body><div id="wrap"><ul><li><span>2011-10-15</span><a href

7、="#" class="video">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题<

8、/a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#" class="video">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-

9、10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题

10、</a></li><li><span>2011-10-15</span><a href="#">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li><li><span>2011-10-15</span><a href="#" class="video">国土部官员谈征地纠纷:现有补偿安置制度存问题</a></li></ul></div>

11、</body>5、请设计如下效果（20分）实验报告（四）院系：信息学院 课程名称：Web基础 日期：班 级姓 名专 业信息管理与信息系统学 号实 验 室708实验名称JavaScript技术成 绩 评 定教 师 签 名实验目的掌握JavaScript的基础，语法，掌握JS的数据类型、变量、运算符及流程控制;掌握JavaScript的内置对象-Array、String、Date、Math等;掌握自定义函数的作用、语法，并且根据需要创建符合要求的函数;DOM对象编程，可以通过DOM对象进行对象控制。实验内容Javascript技术应用请运行如下代码，显示效果，并解释有那些数组操作的函数

12、。（10分）<script type="text/javascript">var arr1 = new Array();/空数组var arr2 = new Array(5) /非空数组,数组的长度为5var arr3 = new Array(2,5,"A","B",true,3689,60) ; /非空数组,长度7var arr4 = ;/空数组var arr5 = 'A',"B","C",true,false,600,2.5;document.write(type

13、of(arr1) + ",长度为:" + arr1.length + "<br/>");document.write(typeof(arr2) + ",长度为:" + arr2.length + "<br/>");document.write(typeof(arr3) + ",长度为:" + arr3.length + "<br/>");document.write(typeof(arr4) + ",长度为:" + ar

14、r4.length + "<br/>");document.write(typeof(arr5) + ",长度为:" + arr5.length + "<br/>");document.write(arr32);arr32 = "Tom"document.write("<br/>");document.write(arr32);var arr6 = new Array("C","D","E");doc

15、ument.write("<p>arr6的长度是:" + arr6.length + ",它们的元素包含:" + arr6 + "</p>");var count1 = arr6.push("F","G");/在数组未尾添加一个/多个成员document.write("<p>arr6的长度是:" + count1 + ",它们的元素包含:" + arr6 + "</p>");var cou

16、nt2 = arr6.unshift("A","B");/在数组开头添加一个/多个成员document.write("<p>arr6的长度是:" + count2 + ",它们的元素包含:" + arr6 + "</p>");var first = arr6.shift();document.write("<p>arr6的长度是:" + arr6.length + ",它们的元素包含:" + arr6 + ",

17、成员" + first +"被删除</p>");var last = arr6.pop();document.write("<p>arr6的长度是:" + arr6.length + ",它们的元素包含:" + arr6 + ",成员" + last + "被删除</p>");/通过splice方法来模拟array对象的push、pop、shift、unshift方法/*splice的基本用法Array.splice(start,deletecoun

18、t,value,.)*/pushvar arr7 = "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

19、.write(arr7 + "<br/><br/>");/poparr7.splice(arr7.length-1,1);document.write(arr7 + "<br/><br/>");/shiftarr7.splice(0,1);document.write(arr7 + "<br/><br/>");var arr8 = arr7.slice(2,5); /返回包含起始位，但不包含结束位的数组成员document.write(arr8 + "&

20、lt;br/><br/>");var arr9 = arr7.concat(arr8);document.write(arr9 + "<br/><br/>");var str = arr9.join();document.write(str + "<br/><br/>");var str2 = arr9.join("|");document.write(str2 + "<br/><br/>");</script

21、>请运行如下代码，说明有哪些字符串操作函数。（10分）<script type="text/javascript">var str = new String("ABCDEF");document.write(str.indexOf("1") + "<br/><br/>");/返回指定字符在原字符中第一次出现的位置，如果没有出现则返回-1document.write(str.substr(2) + "<br/><br/>"); /o

22、bject.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.ch

23、arAt(0) + "<br/><br/>");document.write(str.charCodeAt(0);var str2 = "A|B|C|D|E|F"var arr1 = str2.split("|");for(var i = 0;i<arr1.length;i+)document.write(arr1i + "<br/>");document.write("ABCDEA".replace("A","B"

24、;);document.write("<br/>");document.write(String.fromCharCode(75);</script>请在页面中显示当前的系统日期以*年*月*日的格式(10分)请设计一个按钮能够改变页面的背景颜色。（10分）请实现如下效果:单击前：单击后<html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/h

25、tml; charset=utf-8" /><title>Untitled Document</title></head><body><script type="text/javascript">function changeInlineCss()</script><div id="box">Java私塾</div><p><a href="#" onclick="changeInlineCss()

26、">单击我，可以控制CSS样式</a></p></body></html>请根据要求把changeInlineCss函数部分补全(20分)请实现如下效果单击后请根据要求将如下标签中的脚步补全。（20分）<!DOCTYPE html PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="htt

27、p://1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">*font-size:14px;body,p,div,h1,h2,h3,h4,h5,h6,ul,ol,limargin:0px;padding:0px;

28、ul,ollist-style:none;#menuwidth:350px;margin:0px auto;padding:5px;border:1px solid #ccc;#menu ulmargin-left:15px;</style><script type="text/javascript">function toggleMenu(id)</script></head><body><div id="menu"><h1><span id="txtmenu1">+</span><a href="#" onclick="toggleMenu('menu1')">用户管理</a></h1><ul style="dis

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论