文档介绍：院系: 计算机科学学院
专业: 网络工程
年级: 2010级
课程名称: 网站管理与设计
学号: 10066013
姓名: 张德龙
指导教师:周凌云冯忠双金佳
2012年 5 月 22 日
实验名称
实验一 Web服务器的配置
实验二 HTML、Dreamweaver、CSS+DIV简单网页制作
实验
类型
设计型
综合型
创新型
√
实
验
目
的
或
要
求
熟悉Web的工作原理
学****Web服务器的配置(Xampp或者Wamp的配置)
熟悉HTML、CSS、DIV
练****使用Dreamweaver 8制作网页
掌握简单网页设计与制作的方法
实
验
原
理
(
操
作
步
骤
)
一、Web服务器的配置(Xampp的配置)
1,Xampp配置原理:
Xampp是一个强大的集成强大的软件包,基本的软件包包括系统、编程和服务器软件 Apache,著名的 Web 服务器:
① MySQL,一种杰出、免费的开源数据库
② PHP,一种编程语言(在撰写本文时版本为 和 )
③ Perl,一种编程语言* ProFTPD,一个 FTP 服务器
④ OpenSSL,可以支持安全套接字层
2,Xampp的配置过程:
;
启动安装,截图如下:
按安装过程的步骤,进行安装,直至安装完成。
开始配置服务器。
实
验
原
理
(
算
法
流
程
)
 二、HTML、CSS、DIV的简单应用
  1,熟悉HTML、CSS、DIV概念
  超文本标记语言,即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言;CSS是Cascading Style Sheet的缩写,一般称之为层叠样式表,简称CSS样式,CSS样式是一系列的格式设计规则,用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言;CSS层叠样式中经常用DIV标签布局网页。
2,HTML、CSS、DIV的简单应用
用CSS控制的横向列表菜单:
 Web代码设计如下:
<html>
<head>
<title>用CSS控制的横向列表菜单</title>
<style type = “test/css”>
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url() #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;
.testa:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url() #F00 no-repeat 5px 12px;}
</style>
</head>
<body>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>
</body>
 </html>
实
验
原
理
(
算
法
流
程
)
三、Dreamweaver的的使用
  如何利用Dreamweaver建立站点?
步骤如下:
  1,选择菜单栏中的“站点〉管理站点”命令,弹出“管理站点”对话框,单机“新建”按钮,然后从弹出的列表中选择“站点“选项;
  2,选择"站点”选项,在弹出的“站点定义为”对话框中,切换到“基本”选择卡,在对话框中可以根据网站的需要定义一个站点名称;
  3,单击“下一步”按钮,出现想到的下一个界面,询问是否要使用