网页设计及制作报告

PAGE2互动媒体设计PAGE7工业设计专业互动媒体设计设计报告我的个人网站设计作者：张亮班级：工设09-1班导师：陈功日期：2012年1月8号前言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。网页三剑客，是一套强大的网页编辑工具，Dreamweaver是一个“所见即所得”的可视化网站开发工具，主要用于动态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。之所以称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常由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中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。目录和学习服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度。与此同时，个人主页设计也日益盛行，一个好的个人主页不但可以推广自己，还可以拥有网民的点击率，直接关系到个人的知名度。二、网站总体规划运用所学的Flash、DreamWaver、FireWorks技术设计一个关于我的家乡徐州介绍的网站，在设计中充分运用fireworks中的蒙板、补间、切片、热区、图片优化等技术，flash中的逐帧动画、运动渐变动画、形状渐变动画、遮罩层动画、引导层动画、声音和元件、交互控制等技术进行网站各类素材的处理，素材图文并茂、效果突出、声色兼备、交互性强，素材制作符合网站的总体风格。利用flash、Dreamwaver等软件进行网站的整合设计。充分运用各种文字、图片的编辑方法，合理建立各种超级链接和各类表单元素，利用时间轴、行为、动作制作简单动画及交互，并运用各种定位技术进行网页元素的合理定位，合理运用CSS样式表、模板、库等方法技术进行网站页面的设计。3.站点布局地图三、网站的设计创意及设计风格1、资料收集前期资料的收集从上海世博会前期中期以及后期的各方面宣传工作进行详细的调查，找出重要的信息，我们所需要的。2、网页设计：设计计风格：我的网页以橙色为主题。网页风格统一自然。四、主页设计主页：将分页主要内容集中了起来，并且加入了我最常连接的网站的连接。五、分页面设计六、各类素材制作的主要过程及技术（一）Fireworks素材制作主要用Fireworks制作一些背景为通明的网页素材。如主页上面的切换图片按钮。主要步骤1：用椭圆选取框花出标准的圆。2：用油漆桶工具为选区上色。3：插入文本文字。4：用导出向导导出。并将色彩设置成alpha通道（二）Flash素材制作1.网页logo上的水滴掉落制作用钢笔工具画出雨滴，并做好色彩关系将其转化为图形元件。新建影片剪辑元件将之前的雨滴图形元件放入，将其对其到舞台中心。在第10帧的地方按f6在最后一帧将雨滴适当往下移动将鼠标移动到其中一帧将补间设置为动画，缓动设置为-100最后在返回场景，建立logo背景图层再新建另外两个图层，将影片剪辑元件分别放到两个图层中，调整每个剪辑的透明度以及大小。按f5延伸每个层的播放时间。将其保存为swf文件便于网页制作使用。2.我的家乡图像切换制作。将选好的图片全部转换成图形元件，将输入的文本打散(cturl+b)在转换为图形元件每张图片都新建图层图层一动画效果从下往上升，为了突出弹性将缓动值设为100，起始帧的透明设为13%制作其他图片进出效果时根据图片需要调整大小透明度，进出方向等为了图片进出的效果自然柔和，开始帧和结束帧都将透明度设置的低一点3我的漫画图像切换制作选择【文件】|【新建】命令，新建一个空白文档。选择【修改】|【文档】命令，创建一个1200*300像素，背景色是白色的新文档。动画制作将所有图片转换为图形元件。制作背景的黑色线条前帧为第1帧，插入图片，并将图片的右边移动至文档的左边。在第14帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。在1-14帧进行【动画】补间。缓动值为100之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失4我的电影图像切换制作，下面类似过程如下所制作选择【文件】|【新建】命令，新建一个空白文档。选择【修改】|【文档】命令，创建一个1200*300像素，背景色是黑色的新文档。动画制作将所有图片转换为图形元件。当前帧为第10帧，插入图片，并将图片的右边移动至文档的左边。在第20帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。在10-20帧进行【动画】补间。缓动值为100之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失5我的音乐图像切换制作选择【文件】|【新建】命令，新建一个空白文档。选择【修改】|【文档】命令，创建一个1200*300像素，背景色是灰色的新文档。动画制作将所有图片转换为图形元件。写入“听音乐”“最爱”文本，将其打散并转换为图形元件。将文字起始帧颜色透明度降低做出飞入画面的动画为了让文字显出弹性设置缓动值。当前帧为第40帧，插入周杰伦图片，在第45帧处按F6键，并将图片的左上角边移动至文档的中间。在50帧出按f6将图片拖到右上角将透明度降低，设置缓动值。之后的图片均以每隔一帧建立新的图层做出图片依次由右向左出现的动画。（三）Dreamweaver素材制作1．制作网页导航栏（1）首先用ps制作出导航按钮两种状态的图片(2)点击选择图像对象下的鼠标经过图像（3）原始图像选择未选中状态的图片，鼠标经过的图像选择选中状态的图片。用类似的方法处理了主页面上的切换图像按钮。2.制作主页面上的图像切换效果当鼠标移动到图片上的1234时可切换图片。将1.2.3.4号图片分别放入绘制的apdiv的框里，将鼠标点中的图标在窗口中勾选行为窗口为按钮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是集网页制作和网站管理于一身的网页编辑软件，是一套针对专业网页设计者和开发者的可视化网页开发工具。它具有功能强大、代码简洁和操作方便等特点，利用它可以非常轻松地制作出跨越平台和浏览器限制的充满动感的网页。在我的网页制作中，对于Dre