网站建设实验.doc
实验报告按照如下实验指导书写，也可以自己设计，写的时候下面代码不必全写实验一 IIS效劳器安装及WEB站点与FTP站点的配置一、实验目的及要求1 掌握 Windows 2000/XP效劳器上IISInternet效劳管理器的安装与配置；2 了解并掌握虚拟目录的概念与设置方法；二、实验内容1 课下在自己的个人计算机上安装IIS；2 配置web站点与ftp站点3 分别在两个站点建立虚拟目录并访问三、实验过程一IIS的安装与配置ASP必须运行在效劳器上，因此实验的第一项工作是构建效劳器运行环境。本实验指导以Windows XP操作系统下的IIS 5.0进展操作说明。1安装IIS开场>控制面板>添加删除程序>添加/删除Windows组件>Windows组件向导，那么出现如下对话框：选取IIS信息效劳IIS，选择点详细信息，勾上FTP那一项，并点按“下一步按钮，按屏幕提示安装。2检验安装在IE浏览器的地址栏输入： ，或 :/计算机名，观察其结果。二、 配置WEB站点与FTP站点开场>控制面板>管理工具> Internet效劳管理器，翻开IIS管理器对“默认网站单击鼠标右键，出现弹出菜单，选择“属性，那么屏幕显示如上，可根据需要修改默认网站的属性，一般多为“主目录关于与“文档，在主目录中对网站在本地机器中的实际路径以及相关权限的设置；文档那么设置网站启用的默认文档等。同样对下面的FTP站点，对“默认FTP站点单击鼠标右键，出现弹出菜单，操作类似WEB站点配置。三、虚拟目录的设置要从主目录以外的其他目录中进展发布，就必须创立虚拟目录。“虚拟目录可以不包含在主目录中，但在显示给客户浏览器时就象位于主目录中一样。虚拟目录有一个“别名，供Web浏览器用于访问此目录。别名通常要比目录的路径名短，便于用户输入。使用别名更平安，因为用户不知道文件是否真的存在于效劳器上，所以便无法使用这些信息来修改文件。1在硬盘上创立一个实际目录：d: temp2为d:temp创立虚拟目录在“Internet信息效劳窗口，在“默认网站单击鼠标右键，选择“新建>“虚拟目录，按提示操作分别设置虚拟目录别名例如：tmp、实际的目录路径例：d:temp以及虚拟目录的权限。3运行虚拟目录下文件假设实际目录下有文件：1.html，那么访问该文件： tmp/1.html 在虚拟目录tmp属性中的“文档，添加一个启用默认文档：1.html；那么访问该文件：tmp同样，对于FTP站点的配置中添加虚拟目录的写入权限，同学们自己试试看效果。对于一个htm文件，大家双击可以直接翻开，但是如果是一个asp文件那么行不通，只有将asp文件放在web站点下或者虚拟目录中，然后通过形式才能翻开四、实验结果实验二 熟悉HTML语言一、实验目的及要求1、html文档的习惯与标准 2 Html标签与语法二、实验内容1、理解HTML、链接与标记的概念；掌握4种根本的标记语句<html>、<head>、<title>与<body>；2、会用<font>、<B>、<I>、<U>标记设置文字的外观；掌握常用的<br>、标题、<hr>、<P>、<pre>标记；掌握<table>标记的构造与根本属性；掌握超链接标记<A>、图片标记<img>；三、实验过程例2-1：字体颜色 (2_1.html)<html><head><title>HTML的字体颜色</title></head><body><font color="#0000FF" Face="黑体" Size=6>个人主页!</font></body></html>例2-15：表格2-15.html<html><head><title>课程表</title></head><body bgcolor="#FFFFFF" text="#000000"><center><table align="center" width="75%" border="0" cellspacing="0" cellpadding="0"> <tr align="center"> <td>课程表</td> </tr></table><br><table align="center" width="75%" border="1" cellspacing="0" cellpadding="0"> <tr align="center"> <td> </td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> </tr> <tr align="center"> <td>第1节</td> <td>大学语文</td> <td>ASP程序设计</td> <td>大学英语1</td> <td>高等数学</td> <td>软件工程</td> </tr> <tr align="center"> <td>第2节</td> <td>大学语文</td> <td>ASP程序设计</td> <td>大学英语1</td> <td>高等数学</td> <td>软件工程</td> </tr> <tr align="center"> <td>第3节</td> <td>高等数学</td> <td>大学语文</td> <td>软件工程</td> <td>ASP程序设计</td> <td>体育</td> </tr> <tr align="center"> <td>第4节</td> <td>高等数学</td> <td>大学语文</td> <td>软件工程</td> <td>ASP程序设计</td> <td>体育</td> </tr> </table><center></body></html>例2-3：超级连接 (2_3.html)<html><head><title>超级连接</title></head><body><a href="2_1.html">字体颜色</a><br /><img src="1.jpg"><br /><p>这是段落P！</P><a href="2_2.html"><img src="1.jpg"></a></body></html>(1、HTML编写的网页会由于使用机器的不同而进展不一样的显示吗？注意分辨率 2、通过修改相关的参数你发现运行结果有什么变化？)实验三 Dreamweaver初步与进阶一、实验目的及要求1熟练掌握Dreamwear制作静态网页的根本操作2掌握两种布局的根本方法。二、实验内容1在Dreamweaver中创立基于表格的页面布局。页面布局将确定您的页面在浏览器中会如何显示。2在Dreamweaver中创立基于层的页面布局。要求在Dreamweaver 中使用层叠样式表 (CSS)。三、实验过程例3_1 div+css布局<link href="css.css" rel="stylesheet" type="text/css"><body><div id="header"> <h1>Header</h1></div><div id="left"> Port side text.</div><div id="right"> Starboard side text.</div><div id="middle"> Middle column text.</div><div id="footer"> Footer text.</div></body>附：body margin: 0px; padding: 0px;div#header clear: both; height: 50px; background-color: aqua; padding: 1px;div#left float: left; width: 150px; background-color: red;div#right float: right; width: 150px; background-color: green;div#middle padding: 0px 160px 5px 160px; margin: 0px; background-color: silver;div#footer clear: both; background-color: yellow;说明：HTML代码中各局部出现的顺序是非常重要的。左栏与右栏div必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上屏幕两侧，并让中栏的内容将“流入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的局部就会跑到中栏的下面而不是中栏的旁边了。 div#header与div#footer样式style中的clear:both申明用来确保这浮动局部不会占据标题与页脚的空间。div#header样式中的padding:1px申明用来消除页头背风光中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。 div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过你也可以把它的宽度设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中，float把左栏与右栏完全挤压到浏览器窗口的左边缘与右边缘。然而，如果这些div被其它div包含，那么float将会把它们挤压到包含它们的div的边缘。 在div#middle样式中，clear申明允许中栏的内容“流淌在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏与右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。 这个例子非常粗糙与简单，但是它很好的演示了用浮动div来创立三栏液态布局的边栏这一根本技术(附：使用DIV+CSS布局网站的优点与缺陷随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用IV+CSS制作方法，奋斗网络也成为了CSS网页布局技术学习的先锋站点，从实际应用情况来看，此种方法绝对好于表格制作页面的方法。如今大局部网站仍然采用表格嵌套内容的方式来制作网站，虽然此方法对于我们来说比拟熟悉、比拟上手；但是，它却阻碍了一种更好的、更有亲与力的、更灵活的，而且功能更强大的网站设计方法DIV+CSS。 CSS网页布局的意义表达在如下方面： 一、使页面载入得更快由于将大局部页面代码写在了CSS当中，使得页面体积容量变得更小。相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在翻开页面的时候，逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里，使得加载速度很慢。 二、降低流量费用页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了。 三、修改设计时更有效率由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他局部的布局样式。 四、保持视觉的一致性DIV+CSS最重要的优势之一：保持视觉的一致性；以往表格嵌套的制作方法，会使得页面与页面，或者区域与区域之间的显示效果会有偏差。而使用DIV+CSS的制作方法，将所有页面，或所有区域统一用CSS文件控制，就防止了不同区域或不同页面表达出的效果偏差。 五、更好地被搜索引擎收录由于将大局部的HTML代码与内容样式写入了CSS文件中，这就使得网页中正文局部更为突出明显，便于被搜索引擎采集收录。 六、对浏览者与浏览器更具亲与力我们都知道网站做出来是给浏览者使用的，对浏览者与浏览器更具亲与力，DIV+CSS在这方面更具优势。由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而到达显示效果的统一与不变形。 说了这么多CSS网页布局的意义与优点，同时也不能轻视CSS网页布局的副作用：一、DIV+CSS尽管不是高不可及，但至少要比表格定位复杂的多，即使对于网站设计高手也很容易出现问题，更不要说初学者了。 二、CSS网站制作的设计元素通常放在1个外部文件中，或几个文件，有可能相当复杂，甚至比拟庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。 三、虽然说DIV+CSS解决了大局部浏览器兼容问题，但是也有在局部浏览器中使用出现异常，比方火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中可能会面目全非。当然这应该是浏览器的问题，但是可以说在目前来看，DIV+CSS还没有实现所有浏览器的统一兼容。 四、DIV+CSS对搜索引擎优化与否,取决于网页设计的专业水平,而不是DIV+CSS本身。DIV+CSS网页设计并不能保证网页对搜索引擎的优化，甚至不能保证一定比HTML网站有更简洁的代码设计，何况搜索引擎对于网页的收录与排序显然不是以是否采用表格与CSS定位来衡量，这就是为什么很多传统表格布局制作的网站在搜索结果中的排序靠前，而很多使用CSS及web标准制作的网页排名依然靠后的原因。因为对于搜索引擎而言，网站构造、内容、相关网站链接等因素始终是网站优化最重要的指标。 综合以上讨论的DIV+CSS优势与略势，我认为不可盲目跟风，如何更有效、更合理的运用WEB2.0设计标准，这需要很长时间的学习与锻炼。而如何将DIV+CSS运用的更好，我觉得这需要通过不断的实践与体检，积累丰富的设计经历，才能很好的掌握这门技术。)实验四 ASP网页设计一、实验目的及要求1熟悉一两种脚本语言2能使用ASP进展简单的网页编程，掌握几种常见的ASP的内建对象使用方法，了解几种ASP常用外部组件的使用方法二、实验内容 1使用脚本语言显示一个时钟 2做一个用户登陆的简单ASP网页三、实验过程<html><body><script type="text/vbscript">document.write("今天的日期是：" & date()document.write("<br />")document.write("时间是：" & time()</script></body></html>4_2 一个显示时钟的javascript<html><head><script type="text/javascript">function startTime()var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()/ add a zero in front of numbers<10m=checkTime(m)s=checkTime(s)document.getElementById('txt').innerHTML=h+":"+m+":"+st=setTimeout('startTime()',500)function checkTime(i)if (i<10) i="0" + i return i</script></head><body onload="startTime()"><div id="txt"></div></body></html><html><head><Script language="javascript"> function check () if (document.form.name.value="") alert("帐号不能为空"); return false; if (document.form.pass.value="") alert("请填写密码"); return false;</Script></head><body><form name="form" method="post" action="login.asp" onsubmit="return check ();"> <table border="0" align="center"> <tr><td>用 户 名:</td><td><input type="text" name="name" > </td></tr> <tr><td>密 码:</td><td><input type="password" name="pass" size="26px;" style="margin-left:0"></td></tr> <tr><td><input type="submit" name="login" value="登陆"></td><td><input type="reset" name="clean" value="重置"></td></tr> </table></form></body></html>response.write "姓名:"&request.form("name")&"<br />" response.write "密码："&request.form("pass")实验五 网站建立中的数据库应用一、实验目的及要求1、ACCESS数据库建立的方法；2、ASP中数据库连接的方法3、在网页中如何进展数据库查询与插入、修改等根本操作；二、实验内容1建立一个数据库，其中有一个表news(title,content,readnum,new) 其中readnum是数字，其他为文本格式，自动编号字段为编号2在ASP中进展各种操作三、实验过程5_1查询并显示数据库中所有的记录，按自动编号的降序排列'单引号解释说明，大小写vbscript不敏感Set ConnObj=Server.CreateObject("ADODB.Connection") DbPath= Server.MapPath("./company.mdb") ConnObj.Open "DRIVER=Microsoft Access Driver (*.mdb);dbq=" & DbPath sql="SELECT * FROM news ORDER BY 编号 DESC" Set rsobj=Server.CreateObject("ADODB.RecordSet") rsobj.Open sql,ConnObj Response.Write(x.value & " ") next Response.Write("<br />")loop5_2 删除编号为1的记录 dell.aspSet ConnObj=Server.CreateObject("ADODB.Connection") DbPath= Server.MapPath("./company.mdb") ConnObj.Open "DRIVER=Microsoft Access Driver (*.mdb);dbq=" & DbPath SQL="delete * From news Where 编号=1 " ConnObj.Execute(SQL)set connobj=nothing ' response.redirect "index.asp" 5_3 按照一定格式显示某条记录的全部内容，并修改其中的一个字段readnum Readnum为数字数据<div id="Layer4" style="word-wrap:break-word; word-break:break-all;" > <!英文自动换行-> <% Set ConnObj=Server.CreateObject("ADODB.Connection") DbPath= Server.MapPath("./company.mdb") ConnObj.Open "DRIVER=Microsoft Access Driver (*.mdb);dbq=" & DbPath sql="SELECT * FROM news order by 编号 desc" Set RSobj=Server.CreateObject("ADODB.RecordSet") RSobj.Open sql,ConnObj set name1=RSobj("title")set name2=RSobj("content")set name3=RSobj("readnum") set name4=RSobj("编号") set name6=RSobj("new")response.Write "<h1 align='center' style='font-family:楷体_GB2312;color:blue;'>"&name1&"</h1>" response.Write "<p align='right'>"&name6&"</p>" response.Write"<p style='font-size:15px; float:left;'>"&name2&"</p><br>" name3=name3+1 sql="update news set readnum="&name3&" where 编号="&name4&"" connobj.execute sql response.write "<br><br><p align='center' >本新闻被浏览"&name3&"次</p>" RSOBJ.close set connobj=nothing %> </div>实验六 网站规划设计一、实验目的及要求1通过自己动手设计一个网站的筹划书，使学生了解到网站规划对网站建立起到方案与指导的作用，对网站的内容与维护起到定位作用。 二、实验内容1 如果设想是为他人或者一个企业做网站，可以写出这个网站的使用说明书以及这个网站的文件目录构造2如果设想是自己做一个网站经营，可以写： 建立网站前的市场分析 建立网站目的及功能定位 网站技术解决方案 网站内容规划 网站维护 网站测试 网站的发布与推广 当然也可以写这个网站的使用说明书以及这个网站的文件目录构造三、实验过程第 20 页
