网站建设实验

实验报告按照如下实验指导书写，也可以自己设计，写的时候下面代码不必全写实验一 IIS服务器安装及WEB站点和FTP站点的配置一、实验目的及要求1 掌握 Windows 2000/XP服务器上IIS（Internet服务管理器）的安装与配置；2 了解并掌握虚拟目录的概念和设置方法；二、实验内容1 课下在自己的个人计算机上安装IIS；2 配置web站点和ftp站点3 分别在两个站点建立虚拟目录并访问三、实验过程（一）IIS的安装与配置ASP必须运行在服务器上，因此实验的第一项工作是构建服务器运行环境。本实验指导以Windows XP操作系统下的IIS 5.0进行操作说明。1安装IIS开始控制面板添加删除程序添加/删除Windows组件Windows组件向导，则出现如下对话框：选取IIS信息服务（IIS），选择点详细信息，勾上FTP那一项，并点按“下一步”按钮，按屏幕提示安装。2检验安装在IE浏览器的地址栏输入：http:/localhost ，，或http:/计算机名，观察其结果。（二）、 配置WEB站点和FTP站点开始控制面板管理工具 Internet服务管理器，打开IIS管理器对“默认网站”单击鼠标右键，出现弹出菜单，选择“属性”，则屏幕显示如上，可根据需要修改默认网站的属性，一般多为“主目录”关于和“文档”，在主目录中对网站在本地机器中的实际路径以及相关权限的设置；文档则设置网站启用的默认文档等。同样对下面的FTP站点，对“默认FTP站点”单击鼠标右键，出现弹出菜单，操作类似WEB站点配置。（三）、虚拟目录的设置要从主目录以外的其他目录中进行发布，就必须创建虚拟目录。“虚拟目录”可以不包含在主目录中，但在显示给客户浏览器时就象位于主目录中一样。虚拟目录有一个“别名”，供Web浏览器用于访问此目录。别名通常要比目录的路径名短，便于用户输入。使用别名更安全，因为用户不知道文件是否真的存在于服务器上，所以便无法使用这些信息来修改文件。1在硬盘上创建一个实际目录：d: temp2为d:temp创建虚拟目录在“Internet信息服务”窗口，在“默认网站”单击鼠标右键，选择“新建”“虚拟目录”，按提示操作分别设置虚拟目录别名（例如：tmp）、实际的目录路径（例：d:temp）以及虚拟目录的权限。3运行虚拟目录下文件假设实际目录下有文件：1.html，则访问该文件： http:/localhost/tmp/1.html 在虚拟目录tmp属性中的“文档”，添加一个启用默认文档：1.html；则访问该文件：http:/localhost/tmp同样，对于FTP站点的配置中添加虚拟目录的写入权限，同学们自己试试看效果。（对于一个htm文件，大家双击可以直接打开，但是如果是一个asp文件则行不通，只有将asp文件放在web站点下或者虚拟目录中，然后通过http:/localhost形式才能打开）四、实验结果实验二 熟悉HTML语言一、实验目的及要求1、html文档的习惯和规范 2 Html标签和语法二、实验内容1、理解HTML、链接和标记的概念；掌握4种基本的标记语句、和；2、会用、标记设置文字的外观；掌握常用的、标题、标记；掌握标记的结构和基本属性；掌握超链接标记、图片标记；三、实验过程例2-1：字体颜色 (2_1.html)HTML的字体颜色个人主页!例2-15：表格（2-15.html）课程表 课程表   星期一 星期二 星期三 星期四 星期五 第1节 大学语文 ASP程序设计 大学英语1 高等数学 软件工程 第2节 大学语文 ASP程序设计 大学英语1 高等数学 软件工程 第3节 高等数学 大学语文 软件工程 ASP程序设计 体育 第4节 高等数学 大学语文 软件工程 ASP程序设计 体育 例2-3：超级连接 (2_3.html)超级连接字体颜色这是段落P！(1、HTML编写的网页会由于使用机器的不同而进行不一样的显示吗？注意分辨率 2、通过修改相关的参数你发现运行结果有什么变化？)实验三 Dreamweaver初步与进阶一、实验目的及要求1熟练掌握Dreamwear制作静态网页的基本操作2掌握两种布局的基本方法。二、实验内容1在Dreamweaver中创建基于表格的页面布局。页面布局将确定您的页面在浏览器中会如何显示。2在Dreamweaver中创建基于层的页面布局。要求在Dreamweaver 中使用层叠样式表 (CSS)。三、实验过程例3_1 div+css布局 Header Port side text. Starboard side text. Middle column text. Footer text.附：css.cssbody 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网页三、实验过程4_1 一个显示时间的vbscript网页 datetime.html/datatime.aspdocument.write(今天的日期是： & date()document.write()document.write(时间是： & time()4_2 一个显示时钟的javascript网页 clock.html/clock.aspfunction startTime()var today=new Date()var h=today.getHours()var m=today.getMinutes()var s=today.getSeconds()/ add a zero in front of numbers10m=checkTime(m)s=checkTime(s)document.getElementById(txt).innerHTML=h+:+m+:+st=setTimeout(startTime(),500)function checkTime(i)if (i10) i=0 + i return i4_3 一个带客户端认证（javascript）的用户登陆网页 login.html 用 户 名: 密   码: 4_4 一个接受客户端信息的页面 login.asp %response.write 姓名:&request.form(name)& 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 do until rsobj.EOF for each x in rsobj.Fields Response.Write(x.value &  ) next Response.Write() rsobj.MoveNextlooprsobj.closeconnobj.close%5_2 删除编号为1的记录 dell.asp 5_3 按照一定格式显示某条记录的全部内容，并修改其中的一个字段readnum Readnum为数字数据 newsview.asp % Set ConnObj=Server.CreateObject(ADODB.Connection) DbPath= Server.MapPath(./company.mdb) ConnObj.Open DRIVER=Microsoft Access Driver (*.mdb);dbq= & DbPath sql=SE