网页设计及制作报告

1、我的个人网站设计作者： 张 亮班级： 工设09-1班导师： 陈功日期：2012年1月8号前言随着时代的发展，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。网页三剑客，是一套强大的网页编辑工具， Dreamw

2、eaver 是一个“所见即所得”的可视化网站开发工具，主要用于动态网页的开发；Fireworks主要是用于对网页上常用的jpg、gif的制作和处理，也可用于制作网页布局；Flash主要用来制作动画，现推出Flash平台，可预见有极好的前景。之所以称之为三剑客， 很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；较为流行的一种是在Firework中做好主要页面，然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。Flash是美国Macromedia公司所设计的二维动画软件，全

3、称Macromedia Flash（被Adobe公司收购后称为Adobe Flash），主要用于设计和编辑Flash文档。附带的Macromedia Flash Player，用于播放Flash文档。 被大量应用于互联网网页的矢量动画文件格式。 使用向量运算Vector Graphics的方式，产生出来的影片占用存储空间较小。 使用Flash创作出的影片有自己的特殊档案格式swf。该公司声称全世界97%的网络浏览器都内建Flash播放器Flash Player。是Macromedia/Adobe提出的“富因特网应用”（RIA）概念的实现平台。 Adobe Fireworks可以加速 Web 设

4、计与开发, 是一款创建与优化 Web 图像和快速构建网站与 Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件省时集成。 在Fireworks 中将设计迅速转变为模型, 或利用来自 Illustrator、Photoshop 和 Flash 的其它资源。 然后直接置入Dreamweaver 中轻松地进行开发与部署。矢量编辑与位图编辑。创建和编辑矢量图像与位图图像，并导入和编辑本机 Ph

5、otoshop 和 Illustrator 文件。图像优化。采用预览、跨平台灰度系统预览、选择性 JPEG 压缩和大量导出控件, 针对各种交付情况优化图像。Dreamweaver、Flash以及在Dreamweaver之后推出的针对专业网页图像设计的Fireworks，三者被Macromedia公司称为DreamTeam（梦之队），足见市场的反响和Macromedia公司对它们的自信。说到Dreamweaver我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓，HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑

6、器和非所见即所得网页编辑器（则原始代码编辑器），两者各有千秋。所见则所得网页编辑器的优点就是直观性，使用方便，容易上手，您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 目 录前言2一、设计任务的提出5二、网站总体规划5三、网站的设计创意及设计风格6四、主页设计6五、分页面设计7六、各类素材制作的主要过程及技术8（一）Fireworks素材制作8（二）Flash素材制作10（三）Dreamweaver素材制作14七、站点整合16（一）站点建立16（二）网页框架构建17八、总结18参考文献19我的个人网站设计作者：张亮 指导：陈功（中

7、国矿业大学艺术与设计学院工业设计09-1班 ）摘要:网页三剑客网页三剑客，顾名思义，是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称三剑客。之所以称之为三剑客， 很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；较为流行的一种是在Firework中做好主要页面，然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。网页三剑客的三者结合是当今网站开发的必备工具。如果用别的软件来替代的

8、话：Fireworks可用Photoshop与CorelDRAW来替换。Frontpage只对初学者有一定的帮助，无法设计出更复杂的网页。 在以前Adobe公司与Macromedia竞争，然而，网页制作当推Dreamweaver，而图片处理却是Photoshop占优，但Fireworks在做网页方面有一点优势。在Adobe收购了Macromedia后，Macromedia公司有不少软件停产，而三剑客得以幸存并不断发展壮大，继续推出全新的产品。关键词：三剑客Dreamweaver Fireworks FlashABSTRACT:Web Page Three Musketeers, by defi

9、nition, is a powerful web editing tools, originally developed by Macromedia out. From the Dreamweaver, Fireworks, Flash of three software components, commonly known as The Three Musketeers. Is called a Three Musketeers, a large part because of the three software can cooperate with each other seamles

10、sly. Now, web pages, usually derived from the Fireworks section, pictures, and then draw the table in Dreamweaver; the more popular one is doing a good job in the Firework in the main page, and then export the modified in Dreamweaver, add links, they do a very nice page.The combination of The Three

11、Musketeers of the three pages of today's web development tool. If you use other software to replace, then: Fireworks can be used to replace Photoshop and CorelDRAW. Frontpage only be helpful for beginners, can not design a more complex web pages. Adobe, and Macromedia in the previous competition

12、, however, web-page when push Dreamweaver, and Photoshop image processing is dominant, but Fireworks is doing a little edge web pages. After Adobe acquired Macromedia in, Macromedia has a lot of software companies stop production, and Three Musketeers survive and continue to grow, continue to introd

13、uce new products.KEY WORDS：Three Musketeers Dreamweaver Fireworks Flash一、 设计任务的提出1 随着Internet在中国的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度。2 与此同时，个人主页设计也日益盛行，一个好的个人主页不但可以推广自己，还

14、可以拥有网民的点击率，直接关系到个人的知名度。二、网站总体规划3 运用所学的Flash、DreamWaver、FireWorks技术设计一个关于我的家乡徐州介绍的网站，在设计中充分运用fireworks中的蒙板、补间、切片、热区、图片优化等技术，flash中的逐帧动画、运动渐变动画、形状渐变动画、遮罩层动画、引导层动画、声音和元件、交互控制等技术进行网站各类素材的处理，素材图文并茂、效果突出、声色兼备、交互性强，素材制作符合网站的总体风格。4 利用flash、Dream waver等软件进行网站的整合设计。充分运用各种文字、图片的编辑方法，合理建立各种超级链接和各类表单元素，利用时间轴、行为、

15、动作制作简单动画及交互，并运用各种定位技术进行网页元素的合理定位，合理运用CSS样式表、模板、库等方法技术进行网站页面的设计。3.站点布局地图三、网站的设计创意及设计风格1、资料收集前期资料的收集从上海世博会前期中期以及后期的各方面宣传工作进行详细的调查，找出重要的信息，我们所需要的。2、网页设计：设计计风格：我的网页以橙色为主题。网页风格统一自然。四、主页设计主页：将分页主要内容集中了起来，并且加入了我最常连接的网站的连接。五、分页面设计 六、各类素材制作的主要过程及技术（一）Fireworks素材制作主要用Fireworks制作一些背景为通明的网页素材。如主页上面的切换图片按钮。主要步骤1

16、：用椭圆选取框花出标准的圆。2：用油漆桶工具为选区上色。3：插入文本文字。4：用导出向导导出。并将色彩设置成alpha通道（二）Flash素材制作1.网页logo上的水滴掉落制作（1） 用钢笔工具画出雨滴，并做好色彩关系（2） 将其转化为图形元件。（3） 新建影片剪辑元件将之前的雨滴图形元件放入，将其对其到舞台中心。在第10帧的地方按f6（4） 在最后一帧将雨滴适当往下移动（5） 将鼠标移动到其中一帧将补间设置为动画，缓动设置为-100（6） 最后在返回场景，建立logo背景图层再新建另外两个图层，将影片剪辑元件分别放到两个图层中，调整每个剪辑的透明度以及大小。按f5延伸每个层的播放时间。（7

17、） 将其保存为swf文件便于网页制作使用。2.我的家乡图像切换制作。（1） 将选好的图片全部转换成图形元件，将输入的文本打散(cturl+b)在转换为图形元件（2） 每张图片都新建图层（3） 图层一动画效果从下往上升，为了突出弹性将缓动值设为100，起始帧的透明设为13%（4） 制作其他图片进出效果时根据图片需要调整大小透明度，进出方向等（5） 为了图片进出的效果自然柔和，开始帧和结束帧都将透明度设置的低一点3我的漫画图像切换制作（1） 选择【文件】|【新建】命令，新建一个空白文档。（2） 选择【修改】|【文档】命令，创建一个1200*300像素，背景色是白色的新文档。（3） 动画制作将所有图

18、片转换为图形元件。（4） 制作背景的黑色线条（5） 前帧为第1帧，插入图片，并将图片的右边移动至文档的左边。在第14帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。（6） 在1-14帧进行【动画】补间。缓动值为100（7） 之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失4我的电影图像切换制作，下面类似过程如下所制作（1） 选择【文件】|【新建】命令，新建一个空白文档。（2） 选择【修改】|【文档】命令，创建一个1200*300像素，背景色是黑色的新文档。（3） 动画制作将所有图片转换为图形元件。（4） 当前帧为第10帧，插入图片，并将图片的右边移动至文

19、档的左边。在第20帧处按F6键，按SHIFT键将图片的右边移动至文档的左边。（5） 在10-20帧进行【动画】补间。缓动值为100（6） 之后每张图片处理方法类似，最后将前面制作动画按f5进行延伸保证前面的图片不消失5我的音乐图像切换制作（1） 选择【文件】|【新建】命令，新建一个空白文档。（2） 选择【修改】|【文档】命令，创建一个1200*300像素，背景色是灰色的新文档。（3） 动画制作将所有图片转换为图形元件。（4） 写入“听音乐”“最爱”文本，将其打散并转换为图形元件。（5） 将文字起始帧颜色透明度降低做出飞入画面的动画为了让文字显出弹性设置缓动值。（6） 当前帧为第40帧，插入周杰

20、伦图片，在第45帧处按F6键，并将图片的左上角边移动至文档的中间。在50帧出按f6将图片拖到右上角将透明度降低，设置缓动值。（7） 之后的图片均以每隔一帧建立新的图层做出图片依次由右向左出现的动画。（三）Dreamweaver素材制作1制作网页导航栏（1）首先用ps制作出导航按钮两种状态的图片 (2)点击选择图像对象下的鼠标经过图像（3）原始图像选择未选中状态的图片，鼠标经过的图像选择选中状态的图片。用类似的方法处理了主页面上的切换图像按钮。2.制作主页面上的图像切换效果当鼠标移动到图片上的1234时可切换图片。（1） 将1.2.3.4号图片分别放入绘制的ap div的框里，（2） 将鼠标点中

21、的图标在窗口中勾选行为窗口（3） 为按钮1添加显示隐藏元素动作，鼠标动作设置为onmouseover除了1按钮对应的图像设置成显示，其他的图层设置成隐藏。其他的按钮设置方法类似。七、站点整合（一）站点建立1、选择【站点】|【新建站点】命令，打开【站点定义】对话框，如图所示（2）单击【高级】标签，在【高级】选项卡中设置本地站点的参数，如图所示：（二）网页框架构建(1)检查本地站点根文件夹“wangye”中的素材是否正确。（2）选择【站点】|【管理站点】命令，检查当前站点设置是否正确。（3）在网页文档窗口中，选择【修改】|【页面属性】命令，在；【页面属性】对话框中作各项参数的设置。（4）单击【布局

22、模式】区域中的【布局表格】的按钮，将鼠标移到网页编辑窗口中，此时鼠标指针变为十字形状，在制定位置拖拽鼠标，就可以在网页编辑窗口中划出布局表格。在绘制布局表格的地方不能有任何的文字和图片。在场景中分别画出1200*300像素、800*190像素等尺寸不同的几个布局单元格。（5）在布局单元格中必须画好布局单元格后才可以插入文字或图片等对象。单击【布局模式】区域中的【布局单元格】的按钮，在布局表格中根据需要画出多个布局单元格。（6）在布局单元格中根据页面需要输入文字或插入图片等对象，如图所示：（7）大体框架构建好之后，在主页及各子页面进行文字的添加。（8）在【标准模式】中使用【绘制层】，添加做好的Flash素材。