才艺精灵儿童网站的设计与制作论文

1、毕业论文才艺精灵儿童网站的设计与制作院 系:软件技术学院专 业:图形图像制作专业班 级:06级图形图像班【摘 要】在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、文化、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为配合素质教育，为促进少年儿童全面健康地发展，本网站致力于打造一个最适合中国少

2、年儿童展示自己才华的舞台，通过本网站起到让少年儿童全面展示、增进交流互相学习，共同进步的作用。 本设计与制作中所做的主要工作如下：(1)网站首页介绍了本网站的四个大的模块，以及一些修饰的图片和透明的flash动画；(2)精灵相册主要展示了一些才艺精灵的精彩图片； (3)才艺视频通过在Dreanweaver中插入媒体播放器，以及对页面的设计，实现点击相关的文字在同一个播放器中播放对应视频的效果；(4)精灵简介简单的介绍了当今超人气精灵的基本情况。 (5)建立完整的网站，进行预览并修改细节，使整个网站风格新颖、页面美观。【关键字】 网站首页 精灵相册 才艺视频 精灵简介 目 录一、背景3二、关键技

3、术4（一）FLASH技术综述41.什么是 Flash42.使用 Flash 可以做什么53.关于 Flash Player64. Flash 新增功能6（二） Dreamweaver技术综述81. Dreamweaver简介82. Dreamweaver 8 的功能93. Dreamweaver 8 中的新功能94. 网站设计与制作所用关键技术11（三）Photoshop技术综述131.Photoshop发展史132. Photoshop简介153. Photoshop 新功能164.网站设计与制作所用技术18三、才艺精灵儿童网站分析18（一）网站分析18（二）主要功能19（三）实现目标19四

4、、网站的设计与实现20（一）网站首页设计与实现201.网站首页设计制作202.设计制作过程21（二）精灵相册设计与实现281.精灵相册设计制作282.设计制作过程28（三）才艺视频设计与实现301.才艺视频设计制作302.设计制作过程31（四）精灵简介设计与实现321.精灵简介设计制作322.设计制作过程33五、结束语41致谢42参考文献43才艺精灵儿童网站的设计与制作一、背景在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、文化、生活等各个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Intern

5、et“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为配合素质教育，为促进少年儿童全面健康地发展，特构建才艺精灵儿童网站，本网站致力于打造一个最适合中国少年儿童展示自己才华的舞台，通过本网站起到让少年儿童全面展示、增进交流互相学习，共同进步的作用。在网站的设计预制作中，主要运用了我们所学过的软件。其中，本网站运用较多的是Dreamweaver、Flash、Photoshop 。通过Dreamweaver实现基本网页的设计与制作；而网页中特定图片大小的设置是在中

6、Photoshop打开要修改大小的图片，并将其导出为WEB所用格式在其中修改图片的大小及需要的图片格式；同时，网页中的导航动画和网页中的透明动画是在Flash中制作完成的。通过对以上三种软件的综合运用，最终完成本网站的制作。本文作者主要完成网站首页精灵相册才艺视频精灵简介的设计与制作实现各个界面的完好链接，实现与完善整个才艺精灵儿童网站的设计与制作。二、关键技术（一）FLASH技术综述1.什么是 FlashFlash 是一种创作工具，设计人员和开发人员可使用它来创建演示文稿、应用程序和其它允许用户交互的内容。Flash 可以包含简单的动画、视频内容、复杂演示文稿和应用程序以及介于它们之间的任何

7、内容。通常，使用 Flash 创作的各个内容单元称为应用程序，即使它们可能只是很简单的动画。您可以通过添加图片、声音、视频和特殊效果，构建包含丰富媒体的 Flash 应用程序。Flash 特别适用于创建通过 Internet 提供的内容，因为它的文件非常小。Flash 是通过广泛使用矢量图形做到这一点的。与位图图形相比，矢量图形需要的内存和存储空间小很多，因为它们是以数学公式而不是大型数据集来表示的。位图图形之所以更大，是因为图像中的每个像素都需要一组单独的数据来表示。要在 Flash 中构建应用程序，可以使用 Flash 绘图工具创建图形，并将其它媒体元素导入 Flash 文档。接下来，定义

8、如何以及何时使用各个元素来创建设想中的应用程序。在 Flash 中创作内容时，需要在 Flash 文档文件中工作。Flash 文档的文件扩展名为 .fla (FLA)。Flash 文档有四个主要部分：舞台是在回放过程中显示图形、视频、按钮等内容的位置。时间轴用来通知 Flash 显示图形和其它项目元素的时间，也可以使用时间轴指定舞台上各图形的分层顺序。位于较高图层中的图形显示在较低图层中的图形的上方。库面板是 Flash 显示 Flash 文档中的媒体元素列表的位置。ActionScript 代码可用来向文档中的媒体元素添加交互式内容。例如，可以添加代码以便用户在单击某按钮时显示一幅新图像，还

9、可以使用 ActionScript 向应用程序添加逻辑。逻辑使应用程序能够根据用户的操作和其它情况采取不同的工作方式。Flash 包括两个版本的 ActionScript，可满足创作者的不同具体需要。有关编写 ActionScript 的详细信息，请参阅"帮助"面板中的"学习 Flash 中的 ActionScript 2.0"。Flash 包含了许多种功能，如预置的拖放用户界面组件，可以轻松地将 ActionScript 添加到文档的内置行为，以及可以添加到媒体对象的特殊效果。这些功能使 Flash 不仅功能强大，而且易于使用。完成 Flash 文档的

10、创作后，可以使用"文件">"发布"命令发布它。这会创建文件的一个压缩版本，其扩展名为 .swf (SWF)。然后，就可以使用 Flash Player 在 Web 浏览器中播放 SWF 文件，或者将其作为独立的应用程序进行播放。2.Flash 的功能使用 Flash 中的诸多功能，可以创建许多类型的应用程序。以下是 Flash 能够生成的应用程序种类的一些示例：动画 包括横幅广告、联机贺卡、卡通画等。许多其它类型的 Flash 应用程序也包含动画元素。游戏 许多游戏都是使用 Flash 构建的。游戏通常结合了 Flash 的动画

11、功能和 ActionScript 的逻辑功能。用户界面 许多 Web 站点设计人员使用 Flash 设计用户界面。它可以是简单的导航栏，也可以是复杂得多的界面。灵活消息区域 设计人员使用 web 页中的这些区域显示可能会不断变化的信息。餐厅 Web 站点上的灵活消息区域 (FMA) 可能显示每天的特价菜单。丰富 Internet 应用程序 这包括多种类别的应用程序，它们提供丰富的用户界面，用于通过 Internet 显示和操作远程存储的数据。丰富 Internet 应用程序可以是一个日历应用程序、价格查询应用程序、购物目录、教育和测试应用程序，或者任何其它使用丰富

12、图形界面提供远程数据的应用程序。要构建 Flash 应用程序，通常需要执行下列基本步骤：确定应用程序要执行哪些基本任务。 创建并导入媒体元素，如图像、视频、声音、文本等。 在舞台上和时间轴中排列这些媒体元素，以定义它们在应用程序中显示的时间和显示方式。 根据需要，对媒体元素应用特殊效果。 编写 ActionScript 代码以控制媒体元素的行为方式，包括这些元素对用户交互的响应方式。 测试应用程序，确定它是否按预期方式工作，并查找其构造中的缺陷。在整个创建过程中不断测试应用程序。 将 FLA 文件发布为可在 web 页中显示并可使用 Flash Player 回放的 SWF 文件。 3.关于

13、Flash Player播放器Flash Player 8 用于运行已创建的应用程序，默认情况下，在安装 Flash 时会同时安装它。Flash Player 确保，在广泛的各类平台、浏览器和设备（包括移动电话）上可以用一致的方式来查看和使用所有的 Flash SWF 文件。Flash Player 与各个主要软件合作伙伴（包括 Microsoft、Apple、Netscape、AOL 和 Opera）的产品一起发行，为全球范围内超过五亿一千六百万人提供丰富多彩的内容和应用程序。需要使用 Flash Player 的任何人都可以免费获得它。4. Flash 的新增功能（1）

14、Flash Basic 8 和 Flash Professional 8 中的新增功能以下是 Flash Basic 8 和 Flash Professional 8 中针对初学者的新增功能。渐变增强 新的控件使您能够对舞台上的对象应用复杂的渐变。您最多可以向渐变添加 16 种颜色，精确控制渐变焦点的位置，并对渐变应用其它参数。Macromedia 还简化了应用渐变的工作流程。对象绘制模型 以前，在 Flash 中，位于舞台上同一图层中的所有形状可能会影响其它重叠形状的轮廓。现在，您可以在舞台上直接创建形状，而不会与舞台上的其它形状互

15、相干扰。使用新增的"对象绘制"模型创建形状时，该形状不会使位于新形状下方的其它形状发生更改。FlashType 现在，舞台上的文本对象在 Flash 创作工具和 Flash Player 中具有更为一致的外观。脚本助手模式 使用"动作"面板中新增的助手模式，使您能在不太了解 ActionScript 的情况下也能创建脚本。扩展的舞台工作区 您可以使用舞台周围的区域存储图形和其它对象，而在播放 SWF 文件时不在舞台上显示它们。Macromedia 现在扩展了这块称为"工作区"的区域，使您能够在那里存储更多

16、项目。Flash 用户经常使用工作区存储打算以后在舞台上做成动画的图形，或者存储在回放期间没有图形表示形式的对象，如数据组件。Macintosh 文档选项卡 现在，您可以在同一个 Flash 应用程序窗口中打开多个 Flash 文件，并使用位于窗口顶部的文档选项卡在它们中间进行选择。改进的"首选参数"对话框 Macromedia 精简了"首选参数"对话框的设计，对其进行了重新布置，使其更简明好用。单一库面板 现在，您可以使用一个"库"面板来同时查看多个 Flash 文件的库项目。改进的发布界面 

17、简化后的"发布设置"对话框，使得对 SWF 文件发布的控制更加轻松。对象层级撤消模式 现在，您可以逐个跟踪在 Flash 中对各个对象所做的更改。使用此模式时，舞台上和库中的每个对象都具有自己的撤消列表。这使您能够撤消对某个对象所做的更改，而不必撤消对任何其它对象的更改。 （2）仅在 Flash Professional 8 中新增的功能以下是仅在 Flash Professional 8 中针对初学者的新增功能：自定义缓动控制 补间 是指在一段时间内将某项更改应用于图形对象。例如，您可以补间一幅汽车图片从舞台这端到另一端的位置，使这

18、辆汽车看上去是从一端移动到另一端。缓动 补间是控制将更改应用于对象的速率。使用 Flash 中新增的缓动控制，您可以精确控制在时间轴中应用的补间如何影响被补间的对象在舞台上的外观。使用这种新的控制，您可以让对象在一个补间内在舞台上前后移动，或者创建其它的复杂补间效果。图形效果滤镜 您可以对舞台上的对象应用图形滤镜。之所以将它们称为滤镜，是因为它们通过一种以特定方式过滤数据的算法传递对象的图形数据。使用这些滤镜，您可以使对象发光、添加投影以及应用许多其它效果和效果组合。混合模式 您可以获得多种复合效果，方法是使用混合模式更改舞台上一个对象的图像与位于它下方的各个对象的图像的组

19、合方式。位图平滑 现在，当位图图像显著放大或缩小时，它在舞台上的外观有了很大改善。现在这些位图在 Flash 创作工具中和 Flash Player 中的外观是一致的。改进的文本消除锯齿功能 现在您可以应用新的消除锯齿设置，使正常大小和较小的文本在屏幕上更清晰易读。新的视频编码器 Flash Professional 8 附带了一个新的视频编码器应用程序。它是一个独立的应用程序，可以方便地将视频文件转换为 Flash 视频 (FLV) 格式。该应用程序还可以用来执行视频文件的批处理。视频 Alpha 通道支持 现在您可以为视频对象使用 Alph

20、a 通道，从而创建透明效果。（二） Dreamweaver技术综述1. Dreamweaver简介Macromedia Dreamweaver 8 是建立 Web 站点和应用程序的专业工具。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 的设计的领先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创建功能强大的 Internet 应用程序，从而使用户能连接到数据

21、库、Web 服务和旧式系统。2. Dreamweaver 8 的功能利用 Dreamweaver 中的可视化编辑功能，您可以快速创建 Web 页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia Fireworks 或其它图形应用程序中创建和编辑图像，然后将它们直接导入 Dreamweaver，从而优化开发工作流程。Dreamweaver 还提供了其它工具，可以简化向 Web 页中添加 Flash 资源的过程。除了可帮助您生成 Web 页的拖放功能外，Dreamweaver 还提供了功能全面的编码环境，其中包括代码编辑工具（

22、例如代码颜色、标签完成、“编码”工具栏和代码折叠）；有关层叠样式表 (CSS)、JavaScript、ColdFusion 标记语言 (CFML) 和其它语言的语言参考资料。Macromedia 的可自由导入导出 HTML 技术可导入您手工编码的 HTML 文档而不会重新设置代码的格式，您可以随后用您首选的格式设置样式来重新设置代码的格式。Dreamweaver 还使您可以使用服务器技术（如 CFML、ASP.NET、ASP、JSP 和 PHP）生成动态的、数据库驱动的 Web 应用程序。如果您偏爱使用 XML 数据，Dreamweaver 也提供了相关工具，可帮助您轻松创建 XSLT 页、附

23、加 XML 文件并在 Web 页中显示 XML 数据。Dreamweaver 可以完全自定义。您可以创建您自己的对象和命令，修改快捷键，甚至编写 JavaScript 代码，用新的行为、属性检查器和站点报告来扩展 Dreamweaver 的功能。3. Dreamweaver 8 中的新增功能Dreamweaver 8 包含了许多新增的功能，这些新增功能改善了软件的易用性，并使您无论处于设计环境还是编码环境都可以方便地制作页面。首先，Dreamweaver 8 为最佳做法和业界标准提供了支持，其中包括对高级 CSS 使用、XML 和 RSS 源以及辅助功能要求的支持。使用最佳做法利用 XML 数

24、据进行可视化创作使用功能强大的可视化工具，可快速利用 XML 将源集成到工作中，并揭开 XML 到 HTML 转换的神秘面纱。使用简单的拖放工作流程，可将基于 XML 的数据（如 RSS 源）集成到 Web 页中。使用改善的 XML 和 XSLT 代码提示功能，可跳转到“代码”视图来自定义转换。新的标准 CSS 面板可以通过新的标准 CSS 面板集中学习、了解和使用以可视化方式应用于页面的 CSS 样式。全部 CSS 功能已合并到一个面板集合中，并已得到增强，可以更加轻松、更有效率地使用 CSS 样式。使用新的界面可以更方便地看到应用于具体元素的样式层叠，从而能够轻松地确定在何处定义了属性。属

25、性网格允许进行快速编辑。CSS 布局可视化在设计时应用可视化助理来描画 CSS 布局边框或为 CSS 布局加上颜色。应用可视化助理可揭示出复杂的嵌套方案，并改善所选内容。单击 CSS 布局可看到十分有用的工具提示，这些提示有助于了解设计的控制元素。“样式呈现”工具栏利用新的 CSS 媒体类型支持，可按照与用户所看到内容相同的方式查看内容，而不管传送机制如何。使用“样式呈现”工具栏可切换到“设计”视图，以查看它在印刷品、手持设备或屏幕上的显示方式。改善的 CSS 呈现功能“设计”视图的准确性有了显著改善，从而能够在大多数浏览器中呈现复杂的 CSS 布局。Dreamweaver 现在完全支持高级

26、CSS 技术，如溢出、伪元素和表单元素。辅助功能：支持 WCAG/W3C 优先级 2 检查点除了第 508 款和 WCAG 优先级 1 检查点的集成辅助功能评估工具外，Dreamweaver 现在还利用包括 WCAG 优先级 2 检查点在内的升级评估工具同时支持 CSS 和辅助功能。改进的 WebDAVDreamweaver 8 中的 WebDAV 现在支持为安全文件传送使用摘要身份验证和 SSL，并且连接也有所改善，可连接到更多的服务器。利用经过优化的用户工作流程（缩短了完成常见任务所需的时间），可以在更短的时间内完成更多的工作。Dreamweaver 8 消除了完成一些繁琐操作的麻烦，因此

27、您能够花费更多的时间来设计和开发出色的 Web 站点和应用程序。完成更多工作后台文件传输在 Dreamweaver 8 将文件上载到服务器时继续工作。缩放使用缩放可以更好地控制设计。放大并检查图像，或使用复杂的嵌套表格布局。缩小可预览页面的显示方式。辅助线使用辅助线来测量页面布局，将页面布局和页面模型加以比较，精度可达至像素级别。可视化反馈有助于准确地测量距离，并且支持智能靠齐。“编码”工具栏新的“编码”工具栏在“代码”视图一侧的沟槽栏中提供了用于常见编码功能的按钮。代码折叠通过隐藏和展开代码块，重点显示您想要查看的代码。工作区布局自定义和保存工作区配置。Dreamweaver 8 自带了针对

28、设计人员和编码人员的需求定制的四种不同配置。也可以构建自定义工作区。用于 Mac 的选项卡式文档Mac 上新的文档选项卡可帮助简化用户界面，并使选择文档变得更加容易。新的起始页面新的布局和设计使您能够快速地创建站点。改进的站点同步和存回/取出功能更可靠并且更有把握地管理站点。改进的站点同步功能有助于确保所使用的文件是最新版本。利用改进的存回/取出功能，可防止意外覆盖其他人的工作。比较文件快速比较文件以确定变更之处。可以比较两个本地文件、本地计算机上的文件和远程计算机上的文件，或者远程计算机上的两个文件。在 Macintosh 和 Windows 平台上，将您最常用的文件比较工具和 Dreamw

29、eaver 结合使用。选择性粘贴利用 Dreamweaver 中新的粘贴选项，您可以保留在 Microsoft Word 中创建的所有源格式设置，也可以只粘贴文本。站点相关引用通过确保引用与站点（而不是本地文件）相关，从而可在设计时和运行时与服务器端包括紧密结合使用。改进的代码编辑功能可更好地控制 Dreamweaver 如何提供代码提示和完全标签以适合您的编码风格。Dreamweaver 8 支持学习和利用新的技术，其中包括 PHP 5、Flash 视频、ColdFusion MX 7 和 Macromedia Web Publishing System。与最新技术和标准集成支持 ColdF

30、usion MX 7更新的 ColdFusion MX 7 支持功能包括新的服务器行为和代码提示。为了将代码提示和调试功能与 ColdFusion 的正确版本相匹配，Dreamweaver 将在第一次连接到站点时自动检测服务器版本。Dreamweaver 与 ColdFusion 的紧密集成使您能够直接从“数据库”面板中添加和删除数据库，并查看当前站点中定义的 ColdFusion 专有组件。支持 PHP 5利用更新的 PHP 5 支持功能，其中包括服务器行为和代码提示。Flash 视频快速便捷地将 Flash 视频文件插入 Web 页。Macromedia Web Publishing Sy

31、stem：通知和事件记录跟踪在站点内进行的每项操作。Dreamweaver 中的事件可通知 Macromedia Web Publishing System 服务器，以便记录 WPS 系统中的所有 Web 站点变更。O'Reilly 提供的更新参考资料参考新的 XML、XSLT 和 Xpath 参考内容，以及 ASP 和 JSP 的更新内容。4. 网站设计与制作所用关键技术：（1）在同一个ActiveX中播放多个视频文件在网站的设计与制作中，视频的播放似乎已经成了一种主流，点击不同的视频文件播放对应的视频，使页面看起来整齐美观其方法如下：首先设计好主要的视频播放网页界面，在对应的位置插

32、入ActiveX播放器，对该页面中的内容不做任何修改之后的视频播放页面都运用之前做好的网页，直接复制即可，然后将ActiveX的参数面板中的ClassID号设为：CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6：并修改参数，设定“参数”为url，“值”为对应的视频文件的名称；需要说明的是视频播放的网页必须和视频文件在同一个文件夹下；这样，做好一个界面后，其它的页面只须复制重命名，再修改ActiveX的参数值就可以实现在同一个ActiveX中播放多个视频文件的效果了。或者是在页面的设计中将做好的一个视频播放的ActiveX代码复制，直接修改代码中的value=

33、“ ”,代码如下：<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="400"> <param name="url" value="a1.wmv"> </object>（2）在网页中插入透明Flash的动画在本网站的设计制作中插入了透明的Flash的动画，这一功能的实现，主要是通过在Dreamweaver网页中执行菜单命令中的“插入 /布局对象 /层”

34、，以及Flash在中对动画的处理实现的。具体方法如下：首先，在Dreamweaver网页中执行菜单命令中的“插入 /布局对象 /层”。然后，再在Flash中将要作为透明动画的设计完整的文件，进行发布设置，在弹出的对话框中对HTML的窗口模式的类型修改，将窗口模式的类型设置为“透明无窗口”即可。最后，将在Dreamweaver中插入透明动画的代码，粘贴到插入的层中，并且对代码中的透明动画文件的位置和名称进行修改。在Dreamweaver中插入透明动画的代码如下：<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&

35、quot; codebase=" width="514" height="351"> <param name=movie value="top.swf"> <param name=quality value=high> <param name="wmode" value="transparent"> <param name="menu" value="false"> <embed src

36、="top.swf" quality=high pluginspage=" type="application/x-shockwave-flash" width="100%" height="186%" wmode="transparent" menu="false"> </embed> </object>（三）Photoshop技术综述1.Photoshop发展史平面图像设计的发展史，可以追溯到人类发展史的源头，人类祖先用来记事的简单

37、符号、文字，那是人类最基础、最原始的平面图像设计实例。当初也许只在于表达某种具体的含义，而不包含艺术、美学的成份。伴随着人类文明的发展，人们对艺术、美的追求和探索逐渐成为发展的主流，当初记事的用途也逐渐淡化。传统的画家经过数十载的训练才掌握绘画这门技能，他们通过笔和纸的演绎描绘自己抽象的思维，表现自己对艺术、美的理解。除了艺术家之外每个人都有追求美的权利，都有一定的创作天赋和自己对生活、艺术、美的独特认识。需要长期的训练才能掌握的技能，对大多数人来说有些“可望不可及”。而电脑的出现使人们的梦想成为现实。 电脑在问世之初只是作为科研机构进行科学计算的工具，体积庞大、价格昂贵、使用复杂是其特点。到

38、50至70年代，一些科学家像Noll，Harman、Knowton以及Nake等利用电脑程序语言从事电脑图形图像处理的研究，研究的主题多是图形形成原理的探索，例如，如何编程使得计算机的二进制代码能够表现为一条弧线或是一个三角形等简单的几何图形。70年代，伴随着个人电脑PC的出现，使电脑的体积缩小许多，价格亦降低许多，平面图像技术也逐步成熟，使有兴趣从事电脑艺术创作的人有更多的机会，不用编写令人讨厌的代码程序就能随心所欲地进行艺术创作。在80年代的10年中，随着电脑的发展推广，电脑桌上排版（Desk Top Publishing，DTP）和数字印前行业（Prepress）得以迅速发展，使电脑的输

39、出展现出新的面貌。通过专业的设备，图像自电脑直接输出的精度、准确和美观的程度，几乎可以同照片媲美，甚至在某些方面远远超出照片的效果. 1985年，美国苹果Apple电脑公司率先推出图形界面的Macintosh麦金塔系列电脑。广泛应用于排版印刷行业。至1990年，美国电脑行业著名的3A（Apple，Adobe，Aldus）公司共同建立了一个全新的概念DTP（Desk Top Publishing）它把电脑融入传统的植字和编排，向传统的排版方式提出了挑战。在DTP系统中，先进的电脑是其硬件基础，而排版软件和字库则是它的灵魂。为了处理图形图像，当然也需要专门设计软件。为此，科学家们根据艺术家及平面设

40、计师的工作特点开发了对应的软件，其中Adobe公司开发的Photoshop是最著名的软件之一。DTP和图像软件的结合，使设计师可在电脑上直接完成文字的录入、排版、图像处理、形象创造和分色制板的全过程，开创了“电脑平面设计”时代。 如今风靡世界，在平面图像处理领域成为行业权威和标准的Photoshop软件源于20世纪80年代中期，Michigan大学的一位研究生Thomas Kaon编制的一个在Macintosh Plus机上显示不同图形文件的程序。Photoshop系列中使用最广泛的有Photoshop3.05、Photoshop4.0和Photoshop5.0版本，其最新版本已出到Photo

41、shop5.05，且已有一个全中文版Photoshop5.02，这对于广大中国用户来说是一个莫大的福音。 最初的Photoshop只支持Macintosh麦金塔平台，并不支持Windows。由于Windows在PC机上的出色表现，Adobe公司也紧跟发展的潮流，自Photoshop以来开始推出Windows版本（包括Windows95和Windows NT）；注意到中国无限广阔的市场，首次推出了Photoshop5.02中文版，并且开通了中文站点，成立了Adobe中国公司，总部设在北京。 Photoshop的专长在于图像处理，而不是图形创作。有必要区分一下这两个概念。图像处理是对已有的位图图像

42、进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工；图形创作软件是按照自己的构思创意，使用矢量图形来设计图形，这类软件主要有Adobe公司的另一个著名软件Illustrator和Micromedia公司的Freehand。 Photoshop在平面设计领域中应用十分广泛，例如常见的商品包装设计、标志设计、广告宣传设计、海报设计和企业形象设计等。此外，一些生动漂亮且充满艺术效果的书籍封面也是各类图像软件广泛应用于出版行业的充分体现。Photoshop在出版行业中的应用更有其独到之处，其强大的表现力被发挥得淋漓尽致。如今，随着通信技术的方展，网络也处于越来越重要的地位。网络的互动优势

43、不仅改变了人们的生活方式，也为商业公司树立形象、推广产品建立了新的渠道。所以，网页设计领域也是Photoshop重要的应用范畴。图1-2所示就是使用Photoshop设计的网页，可以说网络的普及也拓展了Photoshop平面设计的功能。Photoshop利用自身在图像处理方面的优势，并整合了ImageReady之后，可实现多方面的网络应用，其中包括网页的视觉设计、排版布局、创建页面的HTML文件等。用户使用Photoshop还能够完成网站中各种类型的Web图像设计和制作，甚至可以对图像的发布进行优化操作。在Photoshop CS中，软件的操作将更加简单，效果更加丰富，可大大提高用户的工作效率

44、。在实际应用中，除了上面介绍的领域外，在设计、美术、摄影、出版、印刷、后期处理等领域都可以看到Photoshop的身影。2. Photoshop简介 Photoshop是平面图像处理业界霸主Adobe公司推出的跨越PC和MAC两界首屈一指的大型图像处理软件.它功能强大,操作界面友好,得到了广大第三方开发厂家的支持,从而也赢得了众多的用户的青睐. ADOBE PHOTOSHOP最初的程序是由Mchigan大学的研究生Thomas创建，后经Knoll兄弟以及ADOBE公司程序员的努力ADOBE PHOTOSHOP产生巨大的转变，一举成为优秀的平面设计编辑软件。它的诞生可以说掀起了图象出版业的革命，

45、目前ADOBE PHOTOSHOP最新版本为6.0，它的每一个版本都增添新的功能这使它获得越来越多的支持者也使它在这诸多的图形图象处理软件中立于不败之地。 Adobe产品的升级更新速度并不快,但每一次推出新版总会有令人惊喜的重大革新.Photoshop从当年名噪一时的图形处理新秀.经过3.0,4.0,5.0,5.5的不断升级,直到目前最新的6.0版,功能越来越强大,处理领域也越来越宽广,逐渐建立了图像处理的霸主地位. Photoshop支持众多的图像格式,对图像的常见操作和变换做到了非常精细的程度,使得任何一款同类软件都无法望其颈背;它拥有异常丰富的插件(在Photoshop中叫滤镜),熟练后

46、您自然能体会到"只有想不到,没有做不到"的境界. 3. Photoshop CS的新功能工作流程改进Adobe Bridge 简化了 Photoshop 以及带有 Adobe Bridge（下一代文件浏览器）的 Adobe Creative Suite 中的文件处理。 有效地浏览、标记、搜索和处理图像。色彩管理改进 保留所有 Adobe Creative Suite 组件中的通用颜色设置。 通过用于色彩管理的简化打印界面进行打印。 Version Cue® 2.0 作为单一用户或小型工作组成员来管理文件和版本。 与 Adobe Bridge 集成以管理 Photo

47、shop 和 Adobe Creative Suite 项目文件。增强的照片功能多图像相机原始数据 在极短的时间内处理完整个照片拍摄过程。 由于提供了整套数码相机支持，您可以自动调整设置，转换为通用数字负片 (DNG) 格式，并为成批图像应用非破坏性的编辑。 高动态范围 (HDR) 处理具有扩展动态范围的 32 位/通道图像。 摄影师可以使用多次曝光来捕捉整个动态范围的场景，并将文件合并为单个图像。光学镜头校正 校正镜头偏差，如桶形和枕形失真、色差和镜头晕影。 使用滤镜网格方便地校正图像透视。减少杂色 减少数字图像杂色、JPEG 不自然感以及扫描的胶片颗粒。智能锐化滤镜 使用新的算法来锐化图像

48、，以获得更好的边缘检测并减少锐化晕圈。 控制高光和阴影中的锐化量。污点修复工具 快速修复污点和瑕疵，而不选择源内容。只需点按一次即可校正红眼 点按一次来修复红眼。 设置选项以调整瞳孔大小和变暗量。 模糊滤镜 使用新的“模糊”滤镜来应用模糊效果：“方框模糊”、“形状模糊”和“表面模糊”。 生产率提高工具可自定的菜单 设置和存储自定菜单和工作区，突出显示新的或常用菜单项以及简化屏幕显示内容以便于访问所需的工具。图像处理器 将一批文件处理为多种文件格式。全新的 PDF 引擎 功能全面的、可自定的预设以及 PDF 1.6/Acrobat 7.0 兼容性。脚本和动作事件管理器 将 JavaScript

49、和 Photoshop 动作设置为在发生指定的 Photoshop 事件时自动运行。自定 UI 字体大小 在选项栏、调板以及“图层样式”对话框中自定文本大小。 （请参阅更改工作区域中的字体大小。）更新管理器 自动搜索 Photoshop 更新。变量 在 Photoshop 中创建数据驱动图形，这与目前在 ImageReady 中执行的操作相同。视频预览 使用 Firewire (IEEE1394) 链接在视频显示器中显示文档。所见即所得字体菜单 直接在“字体”菜单中预览字体系列和字体样式。设计师增强功能消失点 粘贴、复制和绘制自动与图像中透视平面匹配的图素。智能对象 对嵌入矢量和像素数据执行非

50、破坏性的变换。 创建多个嵌入数据实例，并方便地同时更新所有实例。多图层控制 将图层作为对象使用。 选择多个图层并对其进行移动、编组、对齐和变换。图像变形 可以使用“图像变形”将图像折成任何形状，或者伸展、卷曲和弯曲图像，从而方便地创建包模型或其他维度效果。动画 在 Photoshop 中创建动画 GIF 文件，这与在 ImageReady 中创建动画非常类似。日语文字功能 使用新字符对齐 (Mojisoroe) 和更多避头尾法则文字来设置文本的格式。智能参考线 在移动图层时使用参考线（仅在需要时出现）对齐其内容。集成的 Adobe Online Services 访问和下载专业级 Adobe

51、Stock Photos 并使用 Adobe Photoshop Services 共享和在线打印。 4.网站设计与制作所用技术：如何修改图片大小使其符合自己的实际需要 在网站的设计与制作中，经常需要将不符合需要的图片的大小进行修改，在Photoshop中，利用“文件”菜单可以实现对图片大小的修改。方法如下：首先在Photoshop中打开需要修改的图片，再执行“文件”/存储为web所用格式,在弹出的对话框中对图片大小及图片的格式进行修改。三、才艺精灵儿童网站分析（一）网站分析 在Internet飞速发展的今天，互联网成为人们快速获取、发布和传递信息的重要渠道，它在人们政治、经济、文化、生活等各

52、个方面发挥着重要的作用。Internet上发布信息主要是通过网站来实现的，获取信息也是要在Internet“海洋”中按照一定的检索方式将所需要的信息从网站上下载下来。因此网站建设在Internet应用上的地位显而易见，它已成为政府、企事业单位信息化建设中的重要组成部分，从而倍受人们的重视。为配合素质教育，为促进少年儿童全面健康地发展，特构建才艺精灵儿童网站，本网站致力于打造一个最适合中国少年儿童展示自己才华的舞台，通过本网站起到让少年儿童全面展示、增进交流互相学习，共同进步的作用。在网站的设计预制作中，主要运用了我们所学过的软件。其中，本网站运用较多的是Dreamweaver、Flash、Ph

53、otoshop 。通过Dreamweaver实现基本网页的设计与制作；而网页中特定图片大小的设置是在中Photoshop打开要修改大小的图片，并将其导出为WEB所用格式在其中修改图片的大小及需要的图片格式；同时，网页中的导航动画和网页中的透明动画是在Flash中制作完成的。通过对以上三种软件的综合运用，最终完成本网站的制作。（二）主要功能“才艺精灵儿童网站”主要功能包括：网站首页：介绍了本网站的四个大的模块，以及一些修饰的图片和透明的flash动画；精彩相册：主要展示了一些才艺精灵的精彩图片；才艺视频：通过在Dreanweaver中插入媒体播放器，以及对页面的设计，实现点击相关的文字在同一个播

54、放器中播放对应视频的效果；精灵简介：简单的介绍了当今超人气精灵的基本情况。 （三）实现目标才艺精灵儿童网站主要实现如下目标：总体设计方案主题鲜明，网站的整体风格和特色新颖。网站的版式设计及整体布局的实现合理，使浏览者有一个流畅的视觉体验。网页形式与内容相统一，风格与色彩相统一。各个页面之间的链接协调完好。四、网站的设计与实现（一）网站首页设计与实现1.网站首页设计制作(1)实现目标让网站的浏览者可以从首页的设计中知道本网站的主要构成模块，使网页版面的设计编排突出中心、理清主次，搭配合理、大小呼应，图文并茂、相得益彰。（2）网站首页设计结构图导航动画：才艺精灵儿童网站欢迎您才艺视频精灵简介精灵相

55、册网站首页视频播放及透明动画网站介绍动态文字动态图片展示-“走马灯”动画静态相关播放视频图片图1网站首页结构图（3）最后设计效果简图 图2网站首页效果图2.设计制作过程首先，新建文件夹“才艺精灵儿童网站”，在其下建立四个子文件夹“网站首页”“精灵相册”“相关视频”“精灵简介”，以下为网站首页的具体制作：（1）动画导航该导航动画的制作，是仿照老师讲的音乐会的导航动画做的。主要的制作过程如下，首先建一个文件大小为760*50的背景，在其上加入图片新建图层放大图片；然后制作元件水纹，做水纹的波动动画，主要改变水纹的大小和透明度；最后，插入欢迎的文字，做文字的动画，主要改变不同帧处文字的不透明度。各个

56、细节做好后，对不满意的修改，最后测试保存文件。（2）网站首页、精灵相册、才艺视频、精灵简介这部分的制作是插入表格，再在表格中插入背景图片，然后在背景图片上输入文字，设置文字的属性及链接的颜色。（3）视频播放视频的播放是通过在表格中插入ActiveX媒体修改参数实现的，代码如下：<object classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="400" height="400"> <param name="url" value=&

57、quot;a1.wmv"> </object>（4）动态文字动态滚动的文字是在Flash中做好后，在Dreamweaver中插入DIV标签实现的,代码如下：<DIV style="COLOR: #000000">为配合素质教育，为促进少年儿童全面健康地发展，本站致力于打造一个最适合中国少年儿童展示自己才华的舞台，通过这个平台起到让少年儿童全面展示、增进交流互相学习，共同进步的作用。如果你的孩子有哪些方面的特长和才华；如果你想让所有人都能通过互联网欣赏到您孩子的卓越风采；如果您想提高您孩子的社会知名度从而给孩子开创一个光明美好的未来，请尽快加入本站，本站将竭诚为您和您的孩子服务. </DIV>（5）图片的设计首先，走马灯式图片展示是简单在Flash中做的，粘贴代码和复制图片然后将其插入对应的表格内。具体代码如下：<div id