院    系：  计算机科学学院 
专    业：                   
年    级：                 
课程名称：  网站管理与设计 
学    号：                 
姓    名：                 
指导教师：                 
2012年  5 月  25 日
实验名称
实验一 Web服务器的配置
实验二 HTML、Dreamweaver、CSS+DIV简单网页制作
实验
类型
设计型
综合型
创新型
√
实
验
目
的
或
要
求
1. 熟悉Web的工作原理
2. 学习Web服务器的配置（Xampp或者Wamp的配置）
3. 熟悉HTML、CSS、DIV
4. 练习使用Dreamweaver 8制作网页
5. 掌握简单网页设计与制作的方法
实
验
原
理
（
操
作
步
骤
）
实验一： Web服务器的配置
Web的工作原理：1.在浏览器上用URL查询DNS，其将返回服务器的IP地址；2.在浏览器上用这个IP建立 一个TCP/IP连接；3.在浏览器上通过该连接向服务器HTTP请求；4.应于请求的内容，服务器到对应的文件，根据文件的扩展名，形成一个MIME类型的HTTP应答，发送给浏览器，然后关闭连接；5.根据消息的头，浏览器按照某种方式显示该文件的内容。
Web服务器的配置步骤：
第一步：在网上下载xampp服务器；
第二步：安装xampp；
第三步：使用 XAMPP 控制面板来启动/停止所有服务或安装/卸载所有服务，    如下截图：
实
验
原
理
（
算
法
流
程
）
第四步：在Apache 服务启动后，在浏览器中输入地址 localhost 或 127.0.0.1，并检测所有的 XAMPP 样例和工具，如下截图：
 第五步：检测Apache服务是否正常工作，可以通过左侧的导航条上的“状态”功能来查看，如下截图：
实
验
原
理
（
算
法
流
程
）
实验二： HTML、Dreamweaver、CSS+DIV简单网页制作
HTML的特点：1、简易性，HTML版本升级采用超集方式，从而更加灵活方便；
2、可扩展性，HTML语言带来了加强功能，增加标识符等要求，并采取子类元素的方式，为系统扩展带来保证；
3、平台无关性。虽然PC机大行其道，但使用MAC等其他机器的大有人在，HTML可以使用在广泛的平台上。
 CSS: 创建和编辑css常用的是Adobe Dreamweaver系列软件，用于针对多种浏览器测试css的兼容性。FrontPage 2000 有能为站点创建外部样式表的模板，可以用空白模板或已包含样式的模板来创建，保存样式表FrontPage 会以css 作为文件扩展名。创建或修改网页样式时，可使用位于 “格式” 菜单的 “样式” 命令，FrontPage 会自动创建嵌入的样式表，并在嵌入的样式表内将此样式保存为类选择器。在网页上使用外部样式表的样式，可将该网页链接到样式表，方法是使用位于 “格式” 菜单上的 “样式表连接” 命令。删除外部样式表中的样式，可在页面视图下打开样式文件，格式/样式命令，从打开的对话框中选择要删除的样式，单击“删除”。
 DIV: 因为<div>是一个块级元素，所以它的内容会自动地开始一个新行。<div> 固有的唯一格式表现就是换行。可以通过 <div> 的非诚勿扰官晶晶微博 class 或 id 应用额外的样式。可以对同一个 <div> 元素同时应用 class 和 id 属性，但更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组，而 id 用于标识单独的唯一的元素。
实
验
原
理
（
算
法
流
程
）
 相关代码如下：
 </style>
</head>
<body>
<div id="Layer1"></div>
<div id="Layer2"><img src="3XHL2B`_MY05QG@63~JBX1R.jpg" width="1092" height="49" /> </div>
<div id="Layer3"><img src="Gucn_76887_200992515144460CheckCurioPic3.jpg" width="347" height="370" /></div>
<div id="Layer4"><img src="file:///C|/Users/ausu/Pictures/ASUS壁纸/WWE/024.jpg" width="749" height="370" /></div>
<div id="Layer5"><img src="file:///C|/Users/ausu/Desktop/WWE美摔100分 - WWE美国职业摔角在线观看_files/logo.png" width="362" height="121" /></div>
<div id="Layer6">
  <table width="1090" height="117" border="1">
    <tr>
      <td width="175"><img src="20120501011439312.jpg" width="175" height="235" /></td>
 <td width="174"><img src="20120518115353403.jpg" width="174" height="234" /></td>
      <td width="170"><img src="20120519102549623.jpg" width="170" height="234" /></td>
      <td width="175"><img src="20120522101738617.jpg" width="175" height="234" /></td>
      <td width="177"><img src="17-11061611455Y30.jpg" width="174" height="237" /></td>
      <td width="179"><img src="17-111010215629156.jpg" width="184" height="234"
/></td>
    </tr>
  </table>
</div>
<div id="Layer7"></div>
<div id="Layer8">
  <table width="342" height="365" border="1">
    <tr>
      <td><div align="center" class="STYLE2">
        <p class="STYLE14"> WWE摔角最新赛事</p>
  </div></td>
    </tr>
<tr>
<td><div align="center" class="STYLE3"><a href="www.wwe100/SD/2308/"
实
验
原
理
（
算
法
流
程
）
    class="STYLE4">2012.05.18 SD</a></div></td>
     </tr>
    <tr>
      <td><div align="center" class="STYLE3"><a href="www.wwe100/RAW/2320/" class="STYLE4">2012.05.22 RAW </a></div></td>
    </tr>
    <tr>
<td><div align="center" class="STYLE3"><a href="www.wwe100/SD/2328/"class="STYLE4">2012.05.25 SmackDown </a></div></td>
    </tr>
    <tr>
      <td><div align="center" class="STYLE5"><a
href="www.wwe100/PPV/2281/"class="STYLE4">2012《超越极限》</a></div></td>
    </tr>
    <tr>
      <td> <div align="center" class="STYLE5"><a
href="www.wwe100/PPV/2329/"class="STYLE4">2012《无路可逃》</a></div></td>
    </tr>
  </table>
</div>
<div id="Layer9">
  <table width="1094" height="54" border="1">
    <tr>
      <td width="130"><div align="center"><span class="STYLE12"><a
href="www.wwesm/news/"class="STYLE12">新闻</a></span></div></td>
      <td width="130"><div align="center"><span class="STYLE12"><a href="www.wwesm/shows/"class="STYLE12">赛事</a></span></div></td>
      <td width="130"><div align="center"><span class="STYLE12"><a href="www.wwesm/shows/"class="STYLE12">选手</a></span></div></td>
    <td width="131"><div align="center"><span class="STYLE12"><a href="www.wwesm/shows/"class="STYLE12">图片</a></span></div></td>
      <td width="131"><div align="center" class="STYLE12"><a href="www.wwesm/shows/"class="STYLE12">音乐</a></div></td>
      <td width="130"><div align="center" class="STYLE12"><a href="www.wwesm/films/"class="STYLE12">影辑</a></div></td>
实
验
原
理
（
算
法
流
程
）
<td width="130"><div align="center"><span class="STYLE12"><a
href="e.weibo/wwesm?ref=http%3A%2F%2Fwww.wwesm%2Ffilms%2F"class
 ="STYLE12">微博</a></span></div></td>
 </tr>
  </table>
</div>
<div id="Layer10">
  <table width="726" height="129" border="1">
    <tr>
    <td width="171"><img src="punk100.jpg" width="171" height="116" /></td>
      <td width="173"><img src="sheamus.jpg" width="173" height="118" /></td>
      <td width="177"><img src="cc100.jpg" width="177" height="118" /></td>
<td width="177"><img src="nvzi100.jpg" width="177" height="123" /></td>
    </tr>
  </table>
</div>
</body>
</html>
实
验
结
果
分
析
及
心
得
体
会
实验结果截图如下：
心得体会：
    通过本次实验初步掌握HTML、CSS、DIV的应用，实验技巧欠佳还需更加努力。
成
绩
评
定
教师签名：
                                                      年  月  日
实验名称
实验三 JavaScript
实验
类型
设计型
综合型
创新型
√
实
验
目
的
或
要
求
1. 熟悉JavaScript
2. 使用JavaScript制作特殊效果
3. 在前一次建立的网站中加入JavaScript效果
实
验
原
理
（
操
作
步
骤
）
JavaScript是一种能让你的网页更加生动活泼的程式语言，是目前网页中设计中最容易学又最方便的语言。可以利用JavaScript轻易地做出亲切的欢迎讯息、漂亮的数字钟、有广告效果的跑马灯及可显示浏览器停留的时间。
1、运算符:  赋值运算符、算术运算符、比较运算符、逻辑运算符、条件运算、位操作运符符和字符串运算符。
2、表达式:运算符和操作数的组合称为表达式， 分为四类：赋值表达式、算术表达式、布尔表达式和字符串表达式。
3、语句：Javascript程序是由若干语句组成的，语句是编写程序的指令。Javascript提供了完整的基本编程语句： 赋值语句、switch选择语句、while循环语句、for循环语句、do while循环语句、break循环终止语句和continue循环中断语句。
4、函数：函数是命名的语句段，可以被当作一个整体来引用和执行。1）函数由关键字function定义； 2）函数必须先定义后使用，否则将出错； 3）函数名是调用函数时引用的名称，它对大小写是敏感的，调用函数时不可写错函数名；4）参数是传递给函数使用或操作的值或对象，它可以是常量，也可以是变量，也可以是类的对象；5）return语句用于返回函数或表达式的值，当函数返回值类型不为空时，必须有如果返回值类型为空，没有reurn项。
5、对象：Javascript的一个重要功能就是基于对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor="blue"，就是表示使背景的颜为蓝。
6、事件;用户与网页交互时产生的操作，称为事件。绝大部分事件都是用户的动作所引发，如：用户按鼠标的按键，就产生onclick事件，若鼠标的指针在链接上移动，就产生onmouseover事件等等。在Javascript中，事件与事件处理程序配套使用。
7、变量：如 var myVariable = "some value";
实
验
原
理
（
算
法
流
程
）
相关代码如下：
<div id="Layer13"><SCRIPT language=javascript><!--
BirthDay=new Date("january 06,2012");//改成你的计时日期
today=new Date();
timeold=(Time()-Time());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
seconds=Math.floor((e_minsold-minsold)*60); hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
//-->
</SCRIPT><SCRIPT language=javascript><!--
document.write("距离无路可逃赛事还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒");
//-->
</SCRIPT></div>
</SCRIPT><SCRIPT language=javascript><!--
document.write("距离无路可逃赛事还有："+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒");
//-->
</SCRIPT></div>
<div id="Layer14"><img  src="u=81650954,1861109275&fm=52&gp=0.jpg"name="u" border="0">
<script language="JavaScript">
var b = 1;
var c = true;
function fade(){
if(document.all);
if(c == true) {
实
验
原
理
（
算
法
流
程
）
b++;
}
if(b==100) {
b--;
c = false
}
if(b==10) {
b++;
c = true;
c = false
}
if(b==10) {
b++;
c = true;
}
if(c == false) {
b--;
}
u.width=150 + b;
u.height=125 - b;
setTimeout("fade()",50);
}
</script>
</div>
实
验
结
果
分
析
及
心
得
体
会
实验结果截图如下：
心得体会：
通过本次实验对JavaScript及Java的学习和使用有了更深入的了解，JavaScript语言，通过浏览器可以直接执行，Java语言，须先进行编绎和连接等动作才可执行；JavaScript的结构较为自由松散，Java结构较为严谨；Java具有读写档案及网络控制等功能，JavaScript在网页内容的控制和互动性方面，比较方便快捷的。
成
绩
评
定
教师签名：
                                                      年  月  日
实验名称
实验四 Web数据库应用
实验
类型
设计型
综合型
创新型
√