网页设计及制作报告Word格式文档下载.docx

网页设计及制作报告Word格式文档下载.docx

《网页设计及制作报告Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《网页设计及制作报告Word格式文档下载.docx（15页珍藏版）》请在冰豆网上搜索。

之所以称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。

现在，制作网页，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；

较为流行的一种是在Firework中做好主要页面，然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。

　　Flash是美国Macromedia公司所设计的二维动画软件，全称MacromediaFlash（被Adobe公司收购后称为AdobeFlash），主要用于设计和编辑Flash文档。

附带的MacromediaFlashPlayer，用于播放Flash文档。

被大量应用于互联网网页的矢量动画文件格式。

使用向量运算﹙VectorGraphics﹚的方式，产生出来的影片占用存储空间较小。

使用Flash创作出的影片有自己的特殊档案格式﹙swf﹚。

该公司声称全世界97%的网络浏览器都内建Flash播放器﹙FlashPlayer﹚。

是Macromedia/Adobe提出的“富因特网应用”（RIA）概念的实现平台。

　　AdobeFireworks可以加速Web设计与开发,是一款创建与优化Web图像和快速构建网站与Web界面原型的理想工具。

Fireworks不仅具备编辑矢量图形与位图图像的灵活性,还提供了一个预先构建资源的公用库,并可与AdobePhotoshop、AdobeIllustrator、AdobeDreamweaver和AdobeFlash软件省时集成。

在Fireworks中将设计迅速转变为模型,或利用来自Illustrator、Photoshop和Flash的其它资源。

然后直接置入Dreamweaver中轻松地进行开发与部署。

矢量编辑与位图编辑。

创建和编辑矢量图像与位图图像，并导入和编辑本机Photoshop和Illustrator文件。

　　图像优化。

采用预览、跨平台灰度系统预览、选择性JPEG压缩和大量导出控件,针对各种交付情况优化图像。

　　Dreamweaver、Flash以及在Dreamweaver之后推出的针对专业网页图像设计的Fireworks，三者被Macromedia公司称为DreamTeam（梦之队），足见市场的反响和Macromedia公司对它们的自信。

说到Dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网（Internet）的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。

所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

前言2

一、设计任务的提出5

二、网站总体规划5

三、网站的设计创意及设计风格6

四、主页设计6

五、分页面设计7

六、各类素材制作的主要过程及技术8

（一）Fireworks素材制作8

（二）Flash素材制作10

（三）Dreamweaver素材制作14

七、站点整合16

（一）站点建立16

（二）网页框架构建17

八、总结18

参考文献19

张亮指导：

陈功

（中国矿业大学艺术与设计学院工业设计09-1班15095789）

摘要:

网页三剑客网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。

由Dreamweaver，Fireworks，Flash三个软件组成，俗称三剑客。

网页三剑客的三者结合是当今网站开发的必备工具。

如果用别的软件来替代的话：

Fireworks可用Photoshop与CorelDRAW来替换。

Frontpage只对初学者有一定的帮助，无法设计出更复杂的网页。

在以前Adobe公司与Macromedia竞争，然而，网页制作当推Dreamweaver，而图片处理却是Photoshop占优，但Fireworks在做网页方面有一点优势。

在Adobe收购了Macromedia后，Macromedia公司有不少软件停产，而三剑客得以幸存并不断发展壮大，继续推出全新的产品。

关键词：

三剑客DreamweaverFireworksFlash

ABSTRACT:

WebPageThreeMusketeers,bydefinition,isapowerfulwebeditingtools,originallydevelopedbyMacromediaout.FromtheDreamweaver,Fireworks,Flashofthreesoftwarecomponents,commonlyknownasTheThreeMusketeers.IscalledaThreeMusketeers,alargepartbecauseofthethreesoftwarecancooperatewitheachotherseamlessly.Now,webpages,usuallyderivedfromtheFireworkssection,pictures,andthendrawthetableinDreamweaver;

themorepopularoneisdoingagoodjobintheFireworkinthemainpage,andthenexportthemodifiedinDreamweaver,addlinks,theydoaverynicepage.

ThecombinationofTheThreeMusketeersofthethreepagesoftoday'

swebdevelopmenttool.Ifyouuseothersoftwaretoreplace,then:

FireworkscanbeusedtoreplacePhotoshopandCorelDRAW.Frontpageonlybehelpfulforbeginners,cannotdesignamorecomplexwebpages.Adobe,andMacromediainthepreviouscompetition,however,web-pagewhenpushDreamweaver,andPhotoshopimageprocessingisdominant,butFireworksisdoingalittleedgewebpages.AfterAdobeacquiredMacromediain,Macromediahasalotofsoftwarecompaniesstopproduction,andThreeMusketeerssurviveandcontinuetogrow,continuetointroducenewproducts.

KEYWORDS：

ThreeMusketeersDreamweaverFireworksFlash

一、设计任务的提出

1．随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。

由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度。

2．与此同时，个人主页设计也日益盛行，一个好的个人主页不但可以推广自己，还可以拥有网民的点击率，直接关系到个人的知名度。

二、网站总体规划

3．运用所学的Flash、DreamWaver、FireWorks技术设计一个关于我的家乡徐州介绍的网站，在设计中充分运用fireworks中的蒙板、补间、切片、热区、图片优化等技术，flash中的逐帧动画、运动渐变动画、形状渐变动画、遮罩层动画、引导层动画、声音和元件、交互控制等技术进行网站各类素材的处理，素材图文并茂、效果突出、声色兼备、交互性强，素材制作符合网站的总体风格。

4．利用flash、Dreamwaver等软件进行网站的整合设计。

充分运用各种文字、图片的编辑方法，合理建立各种超级链接和各类表单元素，利用时间轴、行为、动作制作简单动画及交互，并运用各种定位技术进行网页元素的合理定位，合理运用CSS样式表、模板、库等方法技术进行网站页面的设计。

3.站点布局地图

三、网站的设计创意及设计风格

1、资料收集

前期资料的收集从上海世博会前期中期以及后期的各方面宣传工作进行详细的调查，找出重要的信息，我们所需要的。

2、网页设计：

设计计风格：

我的网页以橙色为主题。

网页风格统一自然。

四、主页设计

主页：

将分页主要内容集中了起来，并且加入了我最常连接的网站的连接。

五、分页面设计

六、各类素材制作的主要过程及技术

（一）Fireworks素材制作

主要用Fireworks制作一些背景为通明的网页素材。

如主页上面的切换图片按钮。

主要步骤

1：

用椭圆选取框花出标准的圆。

2：

用油漆桶工具为选区上色。

3：

插入文本文字。

4：

用导出向导导出。

并将色彩设置成alpha通道

（二）Flash素材制作

1.网页logo上的水滴掉落制作

（1）用钢笔工具画出雨滴，并做好色彩关系

（2）将其转化为图形元件。

（3）新建影片剪辑元件将之前的雨滴图形元件放入，将其对其到舞台中心。

在第10帧的地方按f6

（4）在最后一帧将雨滴适当往下移动

（5）将鼠标移动到其中一帧将补间设置为动画，缓动设置为-100

（6）最后在返回场景，建立logo背景图层再新建另外两个图层，将影片剪辑元件分别放到两个图层中，调整每个剪辑的透明度以及大小。

按f5延伸每个层的播放时间。

（7）将其保存为swf文件便于网页制作使用。

2.我的家乡图像切换制作。

（1）将选好的图片全部转换成图形元件，将输入的文本打散（cturl+b）在转换为图形元件

（2）每张图片都新建图层

（3）图层一动画效果从下往上升，为了突出弹性将缓动值设为100，起始帧的透明设为13%

（4）制作其他图片进出效果时根据图片需要调整大小透明度，进出方向等

（5）为了图片进出的效果自然柔和，开始帧和结束帧都将透明度设置的低一点

3我的漫画图像切换制作

（1）选择【文件】|【新建】命令，新建一个空白文档。

（2）选择【修改】|【文档】命令，创建一个1200*300像素，背景色是白色的新文档。

（3）动画制作将所有图片转换为图形元件。

（4）制作背景的黑色线条

（5）前帧为第1帧，插入图片，并将图片的右边移动至文档的左边。

在第14帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。

（6）在1-14帧进行【动画】补间。

缓动值为100

（7）之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失

4我的电影图像切换制作，下面类似过程如下所制作

（2）选择【修改】|【文档】命令，创建一个1200*300像素，背景色是黑色的新文档。

（4）当前帧为第10帧，插入图片，并将图片的右边移动至文档的左边。

在第20帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。

（5）在10-20帧进行【动画】补间。

（6）之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失

5我的音乐图像切换制作

（2）选择【修改】|【文档】命令，创建一个1200*300像素，背景色是灰色的新文档。

（4）写入“听音乐”“最爱”文本，将其打散并转换为图形元件。

（5）将文字起始帧颜色透明度降低做出飞入画面的动画为了让文字显出弹性设置缓动值。

（6）当前帧为第40帧，插入周杰伦图片，在第45帧处按F6键，并将图片的左上角边移动至文档的中间。

在50帧出按f6将图片拖到右上角将透明度降低，设置缓动值。

（7）之后的图片均以每隔一帧建立新的图层做出图片依次由右向左出现的动画。

（三）Dreamweaver素材制作

1．制作网页导航栏

（1）首先用ps制作出导航按钮两种状态的图片

（2）点击

选择图像对象下的鼠标经过图像

（3）原始图像选择未选中状态的图片，鼠标经过的图像选择选中状态的图片。

用类似的方法处理了主页面上的切换图像按钮。

2.制作主页面上的图像切换效果

当鼠标移动到图片上的1234时可切换图片。

（1）将1.2.3.4号图片分别放入

绘制的apdiv的框里，

（2）将鼠标点中

的图标在窗口中勾选行为窗口

（3）为按钮1添加显示隐藏元素动作，鼠标动作设置为onmouseover除了1按钮对应的图像设置成显示，其他的图层设置成隐藏。

其他的按钮设置方法类似。

七、站点整合

（一）站点建立

1、选择【站点】|【新建站点】命令，打开【站点定义】对话框，如图所示

（2）单击【高级】标签，在【高级】选项卡中设置本地站点的参数，如图所示：

（二）网页框架构建

（1）检查本地站点根文件夹“wangye”中的素材是否正确。

（2）选择【站点】|【管理站点】命令，检查当前站点设置是否正确。

（3）在网页文档窗口中，选择【修改】|【页面属性】命令，在；

【页面属性】对话框中作各项参数的设置。

（4）单击【布局模式】区域中的【布局表格】的按钮

，将鼠标移到网页编辑窗口中，此时鼠标指针变为十字形状，在制定位置拖拽鼠标，就可以在网页编辑窗口中划出布局表格。

在绘制布局表格的地方不能有任何的文字和图片。

在场景中分别画出1200*300像素、800*190像素等尺寸不同的几个布局单元格。

（5）在布局单元格中必须画好布局单元格后才可以插入文字或图片等对象。

单击【布局模式】区域中的【布局单元格】的按钮，在布局表格中根据需要画出多个布局单元格。

（6）在布局单元格中根据页面需要输入文字或插入图片等对象，如图所示：

（7）大体框架构建好之后，在主页及各子页面进行文字的添加。

（8）在【标准模式】中使用【绘制层】，添加做好的Flash素材。

（9）利用Dreamweaver将主页与各子页面链接起来

八、总结

1、Fireworks是网络图形的处理软件，它记网页图形的创建、编辑、管理于一体，简化了制作网页图形的流程，能生成大小适合而且质量较好的网页图形。

当然它也可以做相对简单的动画，比如旋转的图形等。

在我的网页制作中，对于Fireworks的运用只有一处，就是按钮图标背景的透明处理。

对于它的学习，我还应该努力。

2、Flash是制作适合网络传输的流媒体动画的软件。

Flash动画文件具有体积小、可边下载边播放、多媒体交互性等特点，已成为当前制作高压缩网络动画的专业工具。

在我的网页制作中，对于Flash的运用很多，有图片展示的制作，也有汉字的闪动制作等，这些东西大多都是老师上课所讲的内容自己创新的内容太少。

3、Dreamweaver是集网页制作和网站管理于一身的网页编辑软件，是一套针对专业网页设计者和开发者的可视化网页开发工具。

它具有功能强大、代码简洁和操作方便等特点，利用它可以非常轻松地制作出跨越平台和浏览器限制的充满动感的网页。

在我的网页制作中，对于Dreamweaver的运用主要是通过对表格布局和层的运用构建网页的整体框架，再配合Flash和Fireworks所做的素材充实网页。

主页还运用行为命令做出一定的交互动作。

总结：

制作网页的过程中我发现很多不足比如想用flash制作出一定的交互性动画但是因为语句不熟练不能很好的应用，只用flash制作了简单的图片切换。

网页的内容也较为空洞没有很多有特色的内容。

总之以后还需要继续学习网页三剑客希望以后能做出来更好的网页。

参考文献

1.赵祖荫,王云翔,胡耀芳.网页设计与制作教程[M],北京：

清华大学出版社，2009年3月