《网站建设实验》由会员分享，可在线阅读，更多相关《网站建设实验（14页珍藏版）》请在金锄头文库上搜索。
1、实验报告按照如下实验指导书写，也可以自己设计，写的时候下面代码不必全写实验一 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开始控制面板添
2、加删除程序添加/删除Windows组件Windows组件向导，则出现如下对话框：选取IIS信息服务（IIS），选择点详细信息，勾上FTP那一项，并点按“下一步”按钮，按屏幕提示安装。2检验安装在IE浏览器的地址栏输入：http:/localhost ，http:/127.0.0.1，或http:/计算机名，观察其结果。（二）、 配置WEB站点和FTP站点开始控制面板管理工具 Internet服务管理器，打开IIS管理器对“默认网站”单击鼠标右键，出现弹出菜单，选择“属性”，则屏幕显示如上，可根据需要修改默认网站的属性，一般多为“主目录”关于和“文档”，在主目录中对网站在本地机器中的实际路径以及
3、相关权限的设置；文档则设置网站启用的默认文档等。同样对下面的FTP站点，对“默认FTP站点”单击鼠标右键，出现弹出菜单，操作类似WEB站点配置。（三）、虚拟目录的设置要从主目录以外的其他目录中进行发布，就必须创建虚拟目录。“虚拟目录”可以不包含在主目录中，但在显示给客户浏览器时就象位于主目录中一样。虚拟目录有一个“别名”，供Web浏览器用于访问此目录。别名通常要比目录的路径名短，便于用户输入。使用别名更安全，因为用户不知道文件是否真的存在于服务器上，所以便无法使用这些信息来修改文件。1在硬盘上创建一个实际目录：d: temp2为d:temp创建虚拟目录在“Internet信息服务”窗口，在“默
4、认网站”单击鼠标右键，选择“新建”“虚拟目录”，按提示操作分别设置虚拟目录别名（例如：tmp）、实际的目录路径（例：d:temp）以及虚拟目录的权限。3运行虚拟目录下文件假设实际目录下有文件：1.html，则访问该文件： http:/localhost/tmp/1.html 在虚拟目录tmp属性中的“文档”，添加一个启用默认文档：1.html；则访问该文件：http:/localhost/tmp同样，对于FTP站点的配置中添加虚拟目录的写入权限，同学们自己试试看效果。（对于一个htm文件，大家双击可以直接打开，但是如果是一个asp文件则行不通，只有将asp文件放在web站点下或者虚拟目录中，然
5、后通过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节
6、大学语文 ASP程序设计 大学英语1 高等数学 软件工程 第3节 高等数学 大学语文 软件工程 ASP程序设计 体育 第4节 高等数学 大学语文 软件工程 ASP程序设计 体育 例2-3：超级连接 (2_3.html)超级连接字体颜色这是段落P！(1、HTML编写的网页会由于使用机器的不同而进行不一样的显示吗？注意分辨率 2、通过修改相关的参数你发现运行结果有什么变化？)实验三 Dreamweaver初步与进阶一、实验目的及要求1熟练掌握Dreamwear制作静态网页的基本操作2掌握两种布局的基本方法。二、实验内容1在Dreamweaver中创建基于表格的页面布局。页面布局将确定您的页面在浏览
7、器中会如何显示。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; wid
8、th: 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必须在中栏之前出现。这样才可以让这两个边栏浮动到它们的位置上（屏幕两侧），并让中栏的内容
9、将“流”入它们之间的空间。如果浏览器在一个或者两个边栏div之前先发现中栏，那么中栏将占据屏幕的一侧或者两侧，这样浮动的部分就会跑到中栏的下面而不是中栏的旁边了。 div#header和div#footer样式（style）中的clear:both申明用来确保这浮动部分不会占据标题和页脚的空间。div#header样式中的padding:1px申明用来消除页头背景色中的异常边，如果padding设置为零，那么在Netscape浏览器中就会看到这个异常。 div#left样式中的float:left申明是用来把左栏挤压到左侧。width:150px申明用来设置栏的固定宽度，不过你也可以把它的宽度
10、设置为其它具体值。类似的，div#right样式中的float:right申明用来把右栏div挤压到右侧。在本例中，float把左栏和右栏完全挤压到浏览器窗口的左边缘和右边缘。然而，如果这些div被其它div包含，那么float将会把它们挤压到包含它们的div的边缘。 在div#middle样式中，clear申明允许中栏的内容“流淌”在两个边栏之间。padding:0px 160px 5px 160px申明设置了到左栏和右栏的填充，这样允许150象素宽度的栏div，在加上10象素的间距。 这个例子非常粗糙和简单，但是它很好的演示了用浮动div来创建三栏液态布局的边栏这一基本技术(附：使用DIV+CSS布局网
