中南民族大学管理学院

学生实验报告

课程名称：　《网页设计设计与制作教程》  　

姓　  名：　                         

学　  号：　　　      　　　   　　

年　  级：　　      　        　　    　

专　  业：信息管理与信息系统             

指导教师：　　       　　            　　

实验地点：管理学院综合实验室            

2012 学年至20 13 学年度第 2 学期

目  录

实验一      HTML上机作业        

实验二      Dreamweaver上机1     

实验三      Dreamweaver上机2      

实验四      Dreamweaver上机5      

实验（一）     HTML上机作业              

实验时间：　    　　同组人员：　　    　　　　

实验目的：

    熟悉基本的html语言的编写，利用文本编辑器能制作出简单的网页。    

实验内容：

    1.了解、掌握使用记事本创建web文件；

2.熟悉课堂例子；

3.利用html语言编写网页文件，达到以下效果：（背景图片已给出）

4.利用html语言编写网页文件，达到以下效果：（有背景音乐，四个图标用表格来排列，且点击任意一图标均可链接进入相对应网站，所有素材均给出）

5.利用html语言编写网页文件，达到以下效果：（用框架标记将前面所做两个练习连接起来，分别在右边的窗口显示）

    6.用记事本编辑html语言创建一个网页（至少要有三页），内容为简单的自我介绍，要求使用到下列一些功能：利用表格和框架进行合理布局、对页面进行合理排版、超级链接（本地链接和异地链接）、对页面字体进行大小颜色控制、在页面中插入图像或动画、对页面有一些整体控制（比如插入背景图片等）、在页面插入音乐和视频。

实验步骤:

     先熟看书本上的相关知识点和例题，接着将课本上的例题重新操作一遍，然后再根据书上的例子，利用记事本打入相关代码再以html格式保存。

实验结果分析：

     Html是网页制作的基本语言，要熟悉html网页文件的基本构成和各个代码所能实现的效果，打入代码过程稍显繁琐，而且刚刚学习经常会出现各个代码所能实现的效果的记忆错误，还要经常翻书。但其中也有很多好处，它使我们更为了解各种网页效果实现的过程，它不会产生垃圾代码提高了网页的传输效率。

指导教师评阅

1、  实验态度：不认真（　），较认真（　），认真（　）

2、  实验目的：不明确（　），较明确（　），明确（　）

3、  实验内容：不完整（　），较完整（　），完整（　）

4、  实验步骤：混乱（　），较清晰（　），清晰（　）

5、  实验结果：错误（　），基本正确（　），正确（　）

6、  实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、  其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（二）   Dreamweaver上机1         　   

实验时间：　       同组人员：　　    　　　　

实验目的：

      熟悉Dreamweaver基本操作，掌握文本、图片、链接、flash等网页元素的添加。

实验内容：

    1.练习书上关于文本、图片、超链接、flash等元素在Dreamweaver中的使用；

2.安装Fireworks（在实验工具中,实验室机器如果已经有了就无需安装），自选图片，创建网站相册（菜单：命令->创建网站相册）；

3.自选图片，创建Flash相册；

4.将实验素材中的flash插入到网页中，并使其背景透明；

5.在页面中加入flash按钮和flash文字,并做链接；

6.试着将上次课html作业用Dreamweaver来实现完善。

实验步骤：

     先熟悉课本，对Dreamweaver8这种网页编辑工具进行比较充分的了解，再根据老师的具体实验要求来操作实现实验所要达到的效果。

实验结果分析：

     要使用Dreamweaver8首先要学会创建站点，就是将自己所要用到的素材整合在一起，在Dreamweaver8工作界面上直接操作，对Dreaweavear8的工作界面也要有充分的了解，与html语言编写网页相比，这种工具操作起来非常简便，保存之后直接生成网页，但是在操作过程中看不到源代码，而且源代码显得有点复杂。

指导教师评阅

1、  实验态度：不认真（　），较认真（　），认真（　）

2、  实验目的：不明确（　），较明确（　），明确（　）

3、  实验内容：不完整（　），较完整（　），完整（　）

4、  实验步骤：混乱（　），较清晰（　），清晰（　）

5、  实验结果：错误（　），基本正确（　），正确（　）

6、  实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、  其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（三）  Dreamweaver上机2  　       　 

实验时间：          同组人员：　　   　　　　

实验目的：

     熟悉表格、框架、层的运用。

实验内容：

1.完成书上例子，熟悉使用布局模式创建页面以及布局表格和布局单元格的操作方式，熟悉框架和层的运用。

2.完成课上所讲练习“水果世界”示意图如下：（文件夹内有原图，图片及文字素材均已给出）

3.利用框架完成以下页面的设计，示意图如下：（每点击一个链接，均会在此页面的下面部分显示对应的图片，素材已给出）

4. 3.利用层完成以下页面的设计，示意图如下：（每点击图片上的一个代表颜色的字，整个页面颜色变为相对应字的颜色）

5.完成课堂所讲利用层来实现拼图游戏（素材已给出，注意是利用body对象的onload事件的“拖动层”行为对层的位置属性进行设置）。

实验步骤：

     对课本进行熟读，再结合老师的讲解，了解表格、框架、层的运用以及进行相关属性的的操作，这样才能深入理解，按照实验要求完成实验。

实验结果分析：

     熟悉表格、框架、层的运用后，网页做法显得更加显得丰富，网页制作的基础更加牢固，刚开始实际操作过程中会显得有点困难总是实现不了实验所要求的效果，通过与同学交流，对实验过程反复的检验，最终实现了实验的要求。对表格、框架、层的综合运用可以将网页进行合理的布局使网页所要传达的内容会显得更简便、更清楚。

指导教师评阅

1、  实验态度：不认真（　），较认真（　），认真（　）

2、  实验目的：不明确（　），较明确（　），明确（　）

3、  实验内容：不完整（　），较完整（　），完整（　）

4、  实验步骤：混乱（　），较清晰（　），清晰（　）

5、  实验结果：错误（　），基本正确（　），正确（　）

6、  实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、  其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

实验（五） Dreamweaver上机5   　　         

实验时间：　         　同组人员：　    　　　　

实验目的：

       了解掌握如何在网页中添加行为来使页面达到交互的效果，掌握如何使用时间轴来往页面中添加动画，掌握通过在页面里面加入JavaScript代码来添加网页特效。

实验内容：

1.熟悉课堂例子，掌握行为面板以及时间轴的使用方法。

2.利用“改变属性”的行为制作图片浏览器。（素材在“Dreamweaver上机5素材”中）效果如下：

3.利用“显示-隐藏层”行为制作链接预览（素材在“Dreamweaver上机5素材”中）效果如下：

4.利用“打开浏览器窗口”行为制作弹出广告（素材在“Dreamweaver上机5素材”中）效果如下：

5.利用时间轴层动画制作滚动欢迎字幕（素材在“Dreamweaver上机5素材”中）效果如下：

6．从网站http://www.yesky.com/imagesnew/software/jscript/index.html中获取相关JavaScript代码应用于具体网页中，达到一定特效效果。

实验步骤：

   先熟看书本上的相关知识点和例题，结合老师的讲解掌握行为面板以及时间轴的使用、改变属性的一系列应用、利用显示-隐藏层预览图片、通过打开浏览器窗口来插小广告、利用时间轴层动画制作滚动欢迎字幕。通过分析书上例题来熟练应用各部分相关知识。

实验结果分析：

时间轴是实现Flash动画的关键部分，是进行动画编辑的主要工具之一，有两个很重要的部分，一个是时间轴，另一个是帧。其中帧的种类较多，分为关键帧，普通帧等，关键帧是中间有实心圈的帧，是一个包含内容或者对内容的改变起决定作用的帧。普通帧是关键帧的延续。

指导教师评阅

1、  实验态度：不认真（　），较认真（　），认真（　）

2、  实验目的：不明确（　），较明确（　），明确（　）

3、  实验内容：不完整（　），较完整（　），完整（　）

4、  实验步骤：混乱（　），较清晰（　），清晰（　）

5、  实验结果：错误（　），基本正确（　），正确（　）

6、  实验结果分析：无（　），不充分（　），较充分（　），充分（　）

7、  其它补充：

总评成绩：

评阅教师（签字）：

评阅时间：

第二篇：html网页设计实验报告

HTML页面设计

一、 实验名称：静态网页制作

二、 实验目的与要求：

1．掌握Dreamweaver软件的使用。

 2．掌握html语言中的表格和框架等的使用。

3．掌握web应用开发技术的基础语言-----html语言。

三、 程序设计思想

1、   基本框架的构建

整个页面先分出上中下3个部分，其中先分出上下两个部分，再将下面部分分为中与下，然后将中间位置分为左右两部分，再将左边分为左中两部分，左边再分为上下，，右边也为上下。左的上位皇马，下位巴萨，中间为最新一些消息，只是添加了链接，右边分为上下。

即为相关视频以及助攻榜。

代码如下：

＜frameset  rows="15%,*" cols="*" framespacing="0" frameborder="no" border="0"＞

  ＜frame src="标题.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" /＞

  ＜frameset rows="*,10%" cols="*" framespacing="0" frameborder="no" border="0"＞

    ＜frameset rows="*" cols="*,30%" framespacing="0" frameborder="no" border="0"＞

    ＜frameset rows="*" cols="*,60%" framespacing="0" frameborder="no" border="0"＞

    ＜frameset rows="*,44%" cols="*" framespacing="0" frameborder="no" border="0"＞

    ＜frame src="皇马.html" name="mainFrame" id="mainFrame" title="mainFrame" /＞

  ＜frame src="巴塞.html" name="bottomFrame1" scrolling="No" noresize="noresize" id="bottomFrame1" title="bottomFrame1" /＞

  ＜/frameset＞

  ＜frame src="当前新闻.html" name="rightFrame1" scrolling="No" noresize="noresize" id="rightFrame1" title="rightFrame1" /＞

＜/frameset＞

  ＜frameset rows="*,30%" cols="*" framespacing="0" frameborder="no" border="0"＞

  ＜frame src="视频.html" name="rightFrame" scrolling="No" noresize="noresize" id="rightFrame" title="rightFrame" /＞

  ＜frame src="友情链接.html" name="bottomFrame2" scrolling="No" noresize="noresize" id="bottomFrame2" title="bottomFrame2" /＞

＜/frameset＞

＜/frameset＞

  ＜frame src="相关信息.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" title="bottomFrame4" /＞

 ＜/frameset＞

＜/frameset＞

1、    顶部页面top部分

在BODY里用backgroud属性将图片嵌入到里面，具体源代码如下：

＜body background="图片/27c4e7ae55a6e3cdfaed50cc.jpg"＞

3、左上部页面皇马部分

该页面主要是皇马的一些简介，运用到一个表格，代码如下：

＜table width="265" height="154" border="1"＞

  ＜tr＞

    ＜td height="17" colspan="4" align="center"＞＜span class="STYLE3"＞银河战舰II＜/span＞＜/td＞

  ＜/tr＞

  ＜tr＞

    ＜td width="88" rowspan="3"＞＜span class="STYLE3"＞＜/a＞＜a target="_blank" href="../Untitled-3.html"＞＜a target="_blank" href="http://soccerdata.sports.qq.com/team.aspx?lega=liga&teamid=357"＞＜img src="图片/xinsrc_292100109151242314610600.gif" width="96" height="128" /＞＜/a＞＜/span＞＜/td＞

    ＜td height="30" colspan="2" align="center"＞＜span class="STYLE3"＞投票支持皇马＜/span＞＜/td＞

    ＜td width="89"  align="center"＞＜span class="STYLE3"＞皇马主帅＜/span＞＜/td＞

  ＜/tr＞

  ＜tr＞

    ＜td height="17"＞＜span class="STYLE3"＞＜/span＞＜/td＞

    ＜td＞＜span class="STYLE3"＞＜/span＞＜/td＞

    ＜td rowspan="2"＞＜img src="图片/皇马主帅.png" width="85" height="85" /＞＜/td＞

  ＜/tr＞

  ＜tr＞

    ＜td height="80"＞＜span class="STYLE3"＞

      ＜input type="submit" name="Submit" value="顶" /＞

    ＜/span＞＜/td＞

    ＜td＞＜span class="STYLE3"＞

      ＜input type="submit" name="Submit2" value="踩" /＞

    ＜/span＞＜/td＞

  ＜/tr＞

＜/table＞

背景只是用了一个黑色为背景色

代码如下：＜body bgcolor="#000000"＞

坐下与坐上代码类似，就不举出了。

需要提出的是：图片上我添加了链接 ，链接到腾讯的相关信息上了。代码如下：

＜a target="_blank" href="../Untitled-3.html"＞＜a target="_blank" href="http://soccerdata.sports.qq.com/team.aspx?lega=liga&teamid=357"＞＜img src="图片/xinsrc_292100109151242314610600.gif" width="96" height="128" /＞

这句表示：SRC后的图片链接到HREF所写出的网站上。点击这个图片则会跳转到相应网站上

4、    中间页面是最近的一些体育新闻，只是添加的链接：

代码如下：

＜p＞＜atarget="_blank" href="http://sports.qq.com/a/20100416/000329.htm"＞C罗最新进球＜/a＞ ＜/p＞

其他链接均类似

5、    右边代码上面是一些精彩视频，这个我已放在相应位置。代码如下：

＜p＞＜a href="附属信息/c罗纳尔多精彩视频.flv"＞1.C罗精彩视频＜/a＞＜a href="c罗纳尔多精彩视频.flv"＞＜/a＞＜/p＞

其他类似，

右边是一些链接：代码与上面类似。

图片实例：

收获与体会

通过本次实验，我掌握了很多html语言的标记和属性以及它们的基本用法，还有就是运用到了CSS代码背景，由于书上没有相关介绍，没有搞的很清楚，他是在下方加的，代码如下：