网页制作实验报告.doc

华北科技学院计算机系综合性实验报告华北科技学院计算机系综合性实验实 验 报 告 课程名称 网页制作A 实验学期 2010 至 2011 学年 第 1 学期学生所在系部 计算机系 年级 大三 专业班级 信管B081班 学生姓名 尹芳 学号 200807034113 任课教师 沙嘉祥 实验成绩 计算机系制 网页制作A 课程综合性实验报告开课实验室：基础六 2010 年 12 月 20 日实验题目个人网站的开发一、实验目的使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。二、设备与环境微机、Dreamwaver 8、Fireworks 8、Flash 8三、实验内容1. 按照特定的主题制作一个完整的网站。2. 使用Dreamweaver、Fireworks、Flash三种软件完成网页的制作。3. 网站中要包括表格/框架/层布局、图像、文本、超级链接、导航、CSS样式。网站页面总数不少于6个。4. 至少要包括3个自己制作的Flash动画。上交文件中要包括该动画文件的源文件*.fla文件和导出文件。5. 至少要包括3个自己用Fireworks制作的图像文件，并且在每个图像文件中应用至少两种学过的技术手段进行处理。上交文件中要包括该图像文件的源文件*.png文件和导出文件。6. 尽可能多地使用学过的技术手段。7. 不允许抄袭其他同学的内容，如果两人有雷同，两个人都按照不及格处理。8. 不允许从网上下载别人的网站当作考试内容上交。9. 在上交文件中主页一律以index.htm命名。10. 把所有文件和文件夹放在一个总的目录下,目录以：班级+姓名+学号最后两位的形式命名。例如：信管B061张三03.rar。将index.html放在该文件夹下。最后将该目录压缩成一个*.rar文件。四、实验结果及分析一网站内容这个网站是关于个人的网站，主要作用是为了宣扬自己的个性，展示个人的风采。针对个人的兴趣爱好和专业特长，并按个人的想法收集资料，通过展示一些个人收藏整理的资料让浏览者更了解自己。包括首页、个人介绍、个人相册、个人日志、个人资料的修改、偶像影集、与我联系等部分。首页是该网站主要内容的浓缩，使各个部分的联系起来，也能让浏览者挑选自己感兴趣的部分进行浏览。要做到简洁大方，又内容明了。个人介绍是关于个人基本情况的展示，让不认识的人能尽快的对你有初步的了解，后面的个人资料及是对该部分的修改。个人相册里可以将自己的照片等放入给人浏览。个人日志里则给主人发表自己文章的空间。偶像影集是对自己喜欢的明星照片的动态展示，对于想跟主人联系的人，点击与我联系就可以跟他发邮件啦！在制作阶段要注意到的几个问题是：（1）导航清晰。网站的整体结构要做到布局合理，层次分明，以及页面的链接层次不要太深。（2）风格统一。保持统一的风格将有助于加深浏览者对网站的印象。（3）色彩和谐（4）页面清爽等。二Dreamweaver部分（1）主页部分：首页主要的重点是对网页内容的选题和网页的布局。我制作的是个人网站，在实验初我就定位好要做哪几个板块的内容。网页布局我使用的是表格布局。另外首页我使用到的知识主要有图片、导航条和多媒体Flash文件的插入，利用CSS固定字体、文字大小和颜色。为了使左边导航文字更为出彩我利用CSS创建了光晕文字效果，我也利用了代码为网页创建背景音乐。最后就是对文本链接和邮箱链接的设置。主要步骤大体介绍：导航条的插入：1.插入-图像对象-导航条2.插入状态图片、鼠标经过图片等3.填写按下时前往的链接。可连续插入若干个导航按钮，按需要可水平或垂直摆放。利用CSS创建网页文字特殊效果：1.在CSS面板中新建CSS规则2.选择的类型为类，为该CSS取名字3.按需要设置字体、文字大小、颜色等，使得文字达到你想要的效果。4.在扩展里的过滤镜里选择“Glow(Color=?, Strength=?)”改变它的color值和strength值，即可做出光晕文字效果。如果选择Shadow(Color=?, Direction=?)，对它里面的值进行改变即可做出阴影效果。5.点击确定后选中文本进行套用即可。为网页添加背景音乐：在代码与间插入即可。（2）我的介绍部分：主要是利用CSS创建阴影文字的效果。（3）我的相册部分：主要是利用Dreamweaver制作网络相册，这是对页面大量上传照片很好的方法。在相册首页我简单的插入了网页背景图片，在标头插入了自己做的一个Flash。（4）个人日志部分：第一篇个人日志：我又用到了CSS制作标题边框和标题文字的特殊效果。在CSS规则定义框中选择边框对里面进行设置，阴影效果的设置在前面有介绍。第二篇个人日志：我用到的新的知识点是创建锚，当阅读大片文字时能很快的置顶。将光标放到页面的最顶端插入一个锚并对其命名，选中“置顶”文字在其属性栏的URL处填写:#“锚的名字”，这样就完成了锚的设置。第三篇个人日志：我使用的新知识是对图片属性进行设置做出图文混排的效果。1.在需要插入图片的位置插入图片2.选中网页中插入的图片，在下面属性栏里对图片的对齐方式选中左对齐或右对齐，再设置一下图片的垂直边距和水平边距即可做出图文混排的效果了。（5）个人资料部分：我主要是为了巩固学过的表单里的内容。（6）明星影集部分：主要是为了给我做的Flash动画一个展示的舞台。（7）与我联系部分：就是关于邮箱链接的建立。三Fireworks部分Fireworks部分我运用最多的是利用它做GIF动画。例如页面标头的图片的雪花旋转、彩色文字闪烁，日志背景图片的飘落心形，单元标题图片的星星闪烁。这些都有异曲同工之妙。都是将要变动的对象转换为元件，类型选择为动画，然后设置动画的各个属性使之达到你需要的效果。这是做简单动画很简单快捷的方法。1.新建一个层，绘画雪花：先画一个星形，再在窗口中选择自动形状属性中设置相应数值。2.将雪花转换为元件，对帧的数量及动画转动的效果、透明度进行设置。3.对画好的雪花进行克隆，复制到其他地方。彩色闪动文字的制作类似。4.选中背景图层设置为共享交叠层。1.在画布上绘制一个心形。2.将它转换为元件，对帧的数量、移动和方向进行设置。3也可以直接拖动心的移动点进行心形飘落的方向的设置。其次我还使用它做了导航条的图片，在Fireworks的assets样式中直接选择做出按钮背景和字体的效果。首页的底端图片我使用到了文字附加到路径。我还利用了历史记录中的重放制作了文字按同等倍数缩小的效果。还有比较频繁用到Fireworks的是对已有资源图片切割、修改等使之更符合页面的效果。网页中的大部分背景图片和标题图片都是我用Fireworks加工过的。四Flash部分（1）Flash1：相册（实现图片的循环播放）将要循环的图片导入到库，在第一帧插入关键帧按顺序在舞台上排列好图片，再在最后一帧插入关键帧将图片往前移到正确位置，在两个帧之间创建补间动画即可。注意循环播放时图像的连贯性。（2）Flash2：影片集（运用遮罩层，时间轴特效等方法播放照片）图片的淡出效果即是将该图片第一关键帧的Alpha值设为100%最后一个关键帧的Alpha值设为0%，中间创建补间动画。遮罩层的使用即是在图片层上添加遮罩层，画出一个实心图形，使其大小或位置改变做出使图片只能看到图形下的部分，从而慢慢放出图片或者探照灯的效果。最后两张图片还使用了时间轴特效效果中的模糊和分离效果。（3）Flash3：我的大学（使用了形状补间，图像、文字的打散和文字掉落的效果）由四个圆变成“我的大学”四个字的效果是将第一帧和最后一帧分别插入四个圆和我的大学四个字，将这些东西都进行打散，两帧之间创建补间，补间属性改为形状。文字掉落则是将文字打散分散到层，再在各层设置好掉落的时间及位置即可。五小结通过这次综合性实验，我已经能够灵活的运用到所学的知识和技巧制作简单的网页，掌握了个人网站建设的技巧和基本网站建设的过程。对于用Dreamweaver制作网页、Fireworks处理网页图像和用Flash制作简单动画更为得心应手。实验过程中我尽量充分利用老师教过的知识，对所学知识进行了巩固。为了制作出更好的效果我也翻阅参考了其他资料，学习到了更多的网页处理技巧。制作网页的过程中遇到很多的问题，通过查找资料或询问同学都有得到解决。这次综合实验我的收获很大，学有所用，在实践的过程中学习巩固对知识能有更深的记忆。网页制作是一门很