简单网页设计报告

网站与网页设计基础

——《FAMOUS CAFFEE》综合设计报告

作者：董思洋

班级：工设10-3班

导师：陈功

日期：2013年1月16号

前言

人们的生活不能够再离开网络，网络为我们提供了巨大的信息交流平台，让我们可以更多的和世界各个角落进行接触。在网络普及率越来越高的同时，人们的视觉和审美要求也逐步地开始提高，对于网络界面人机交互的设计感艺术感有了更高的需要。

于是，网站建设越来越接近于一门艺术而不仅仅是一项技术。网页的艺术设计，日益被网站建设者所注重。网页艺术设计是伴随着计算机互联网络的产生而形成的视听设计新课题，是网页设计者以所处时代所能获取的技术和艺术经验为基础，依照设计目的和要求自觉地对网页的构成元素进行艺术规划的创造性思维活动，必然要成为设计艺术的重要组成部分，并随着网络技术的发展而发展。表面上看，它不过是关于网页版式编排的技巧与方法，而实际上，它不仅是一种技能，更是艺术与技术的高度统一。

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

然后导出，在Dreamweaver中加以修改，添加链接等，便做出一个非常好看的页面。

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

Adobe Fireworks可以加速 Web 设计与开发, 是一款创建与优化 Web 图像和快速构建网站与Web 界面原型的理想工具。Fireworks不仅具备编辑矢量图形与位图图像的灵活性, 还提供了一个预先构建资源的公用库, 并可与 Adobe Photoshop、Adobe Illustrator、Adobe Dreamweaver和Adobe Flash软件省时集成。在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)

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

(一)Fireworks素材制

作 (9)

(二)Flash素材制

作 (10)

(三)Dreamweaver素材制作 (16)

七、站点整合 (18)

(一)站点建

立 (18)

(二)网页框架构

建 (20)

八、总结与建议 (22)

参考文献 (22)

网站与网页设计基础

——《FAMOUS CAFFEE》综合设计报告

作者：董思洋指导老师：陈功

（中国矿业大学艺术与设计学院工业设计10-3班 15105776）

摘要:

网页三剑客网页三剑客是一套强大的网页编辑工具，最初是由Macromedia公司开发出来的。由Dreamweaver，Fireworks，Flash三个软件组成，俗称三剑客。之所以称之为三剑客，很大一部分是因为这三种软件能相互无缝合作。现在，制作网页，通常由Fireworks导出切片、图片等，然后在Dreamweaver中绘制表格；较为流行的一种是在Firework中做好主要页面，然后导出，在Dreamweaver 中加以修改，添加链接等，便做出一个非常好看的页面。

网页三剑客的三者结合是当今网站开发的必备工具。如果用别的软件来替代的话：Fireworks可用Photoshop与CorelDRAW来替换。Frontpage只对初学者有一定的帮助，无法设计出更复杂的网页。在以前Adobe公司与Macromedia竞争，然而，网页制作当推Dreamweaver，而图片处理却是Photoshop 占优，但Fireworks在做网页方面有一点优势。在Adobe收购了Macromedia后，Macromedia公司有不少软件停产，而三剑客得以幸存并不断发展壮大，继续推出全新的产品。

关键词：

网络三剑客 Dreamweaver Fireworks Flash

ABSTRACT:

Web Page Three Musketeers, 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 seamlessly. 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 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, 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 introduce new products. KEY WORDS：

Three Musketeers Dreamweaver Fireworks Flash

一、设计任务的提出

1．身为一名工业设计的学生，人机界面设计使重要的一个方向，工业设计将理工与艺术相结合，在批量化生产的基础上还要强调审美，而网页这样一个直接与人进行交互的方式能够十分准确的平判出设计的思想。网站的设计在平面，动画，交互等各个方面都有所涉猎，是一项重要的技术和手段。

2．随着网络在中世界范围内的迅速发展,人们日常生活中越来越多地使用这项新的技术来为自己的工作和学习服务。人们的审美水平同时也逐步提高，对于界面的艺术性产生了更高的要求。由于WEB页面能把文本、图像、声音、动画、视像等多种媒体信息集于一体，不但使信息的显示更加生动，而且使信息的浏览更为方便,同时WEB页能实现网上交易平台、客户信息反馈方便了企业与客户之间信息交流，因此许多企业纷纷建设具有自己独特风格的网站以增强企业知名度。

二、网站总体规划

1. 运用所学的Flash、DreamWaver、FireWorks技术设计一个关于介绍世界著名咖啡有关信息的网站，在设计中充分运用fireworks中的蒙板、补间、切片、热区、图片优化等技术，flash中的逐帧动画、运动渐变动画、形状渐变动画、遮罩层动画、引导层动画、声音和元件、交互控制等技术进行网站各类素材的处理，素材整体风格统一、声色兼备、交互性强，素材制作符合网站的总体风格。

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

3. 站点的合理管理和安全运行。