网页设计实验报告

中南民族大学管理学院学生实验报告
课程名称：《网页设计设计与制作教程》姓名：
学号：
年级：
专业：信息管理与信息系统
指导教师：
实验地点：管理学院综合实验室
2012学年至2013学年度第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．从网站
/imagesnew/software/jscript/ index.html中获取相关JavaScript代码应用于具体网页中，达到一定特效效果。

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

通过分析书上例题来熟练应用各部分相关知识。

实验结果分析：
时间轴是实现Flash动画的关键部分，是进行动画编辑的主要工具之一，有两个很重要的部分，一个是时间
轴，另一个是帧。

其中帧的种类较多，分为关键帧，普通帧等，关键帧是中间有实心圈的帧，是一个包含内容或者对内容的改变起决定作用的帧。

普通帧是关键帧的延续。

指导教师评阅
1、实验态度：不认真（），较认真（），认真（）
2、实验目的：不明确（），较明确（），明确（）
3、实验内容：不完整（），较完整（），完整（）
4、实验步骤：混乱（），较清晰（），清晰（）
5、实验结果：错误（），基本正确（），正确（）
6、实验结果分析：无（），不充分（），较充分（），充分（）
7、其它补充：
总评成绩：
评阅教师（签字）：
评阅时间：。