数字媒体工程系网站设计与实现 ——网页美工---毕业论文

本本 科科 毕毕 业业 论论 文文 数字媒体工程系网站设计与实现数字媒体工程系网站设计与实现 网页美工网页美工 Website Design we will make our greatest effects. Digital media engineering aimed at developing a good scientific literacy as well as the cultivation of Fine Arts, knows technology and understands the art of using computers to design new media tools for the design of works of art and creative application of the composite design. To this end, we are now focusing on website design front page to highlight the effect and the stability of the background will be a combination of aesthetic and practical, to show the art digital media features of its own. Guide pages, as well as the page displaying the work in accordance with the flash web page design standards. Web site management capabilities of the background in the J2EE platform, with Webwork framework and EJB technology to achieve through the MVC design pattern. Our ultimate aim is to create a characteristic website for digital media technology department. This article briefly introduced the first digital media engineering department, as well as web site development and the origin of meaning; analysis flash based on the current status of the site, flash website design related theories, the development environment and related technologies. Secondly, from analysis to design the future through the website and the background were two clues to introduce the appearance of the website page design, the background work and functions of the modular design principle. In addition, the author focuses on the front page to participate in art and animation design. Flash pages detail the style of creative, web design, DIV + CSS page layout, web site design to achieve the effect of the process, the main script ActionScript descriptions. Finally, we display the actual results of the project and make a summary. Keywords: Flash Web Design; ActionScript; CSS 目 录 第一章第一章 绪论绪论 1 1.1 网站开发的起源以及意义网站开发的起源以及意义1 1.2 基于基于 FLASH 的网站现状分析的网站现状分析 1 1.3 FLASH 网站设计的相关理论网站设计的相关理论2 1.3.1 Flash 网站的概念.2 1.3.2 Flash 与 ActionScript 脚本语言.3 1.3.3 Flash 网站制作和单个 Flash 作品制作的区别 4 1.4 FLASH 动态网站开发的基本原理动态网站开发的基本原理4.4 1.5 FLASH 网页制作网页制作的相关技术的相关技术6 1.5.1 Adobe Dreamweaver CS3.6 1.5.2 Adobe Photoshop CS3 7 1.5.3 Adobe Illustrator CS3 .8 1.5.4 Adobe Flash CS3.9 第二章第二章 网站总体设计网站总体设计 11 2.1 前台总体设计前台总体设计11 2.1.1 前台需求分析.11 2.1.2 前台整体规划.11 2.1.3 网站的名称.12 2.1.4 设计网站的标志.12 2.1.5 网站素材的准备.13 2.1.6 网站的栏目.14 2.1.7 网站的色彩和风格.14 2.1.8 设计网站的版面布局.15 2.1.9 网站设计的流程图.15 2.2 后台总体设计后台总体设计16 2.2.1 需求分析.16 2.2.2 确定工作环境.16 2.2.3 系统流程设计.17 2.2.4 系统模块划分.17 2.2.5 系统部署架构.20 2.2.6 数据库设计.20 第三章第三章 网站前台详细设计网站前台详细设计24 3.1 网站风格创意网站风格创意24 3.2 网站结构设计网站结构设计25 3.3 引导页面设计及实现引导页面设计及实现25 3.3.1 引导页面动画场景.25 3.3.2 引导页面制作流程.26 3.4 首页设计及实现首页设计及实现30 3.4.1 首页设计思路.30 3.4.2 首页布局设计.31 3.4.3 首页制作流程.36 3.5 院系介绍页面设计及实现院系介绍页面设计及实现39 3.5.1 院系介绍页面设计思路.39 3.5.2 院系介绍页面布局设计.40 3.5.3 院系介绍页面制作流程.41 3.6 作品展示页面设计及实现作品展示页面设计及实现43 3.6.1 作品展示页面设计思路.43 3.6.2 作品展示页面前期准备.45 3.6.3 作品展示页面制作流程.45 3.7 其他页面设计及实现其他页面设计及实现47 3.7.1 其他页面设计思路.47 3.7.2 其他页面布局设计.48 第四章第四章 网站实现结果网站实现结果.50 4.1 前台实现结果前台实现结果50 4.2 后台实现结果后台实现结果53 第五章第五章 结束语结束语58 参考文献参考文献59 致致 谢谢61 Contents Chapter I Introductory Remarks 1 1.1 Significance And Origin Of Website Develpment.1 1.2 Flash-Based Website Analysis.1 1.3 Flash Web Design Theory2 1.3.1 Flash Website Concept2 1.3.2 Flash And ActionScript.3 1.3.3 Difference Between Flash Website And A Single Flash4 1.4 The Basic Principles Of Developing Flash Website 4.4 1.5 Flash Web Design Technologies6 1.5.1 Adobe Dreamweaver CS3.6 1.5.2 Adobe Photoshop CS3 7 1.5.3 Adobe Illustrator CS3 .8 1.5.4 Adobe Flash CS3.9 Chapter II Overall Design Of The Website 11 2.1 Overall Design Of Foreground11 2.1.1 Requirements Analysis Of Foreground11 2.1.2 Overall Plan Of Foreground.11 2.1.3 Name Of The Website12 2.1.4 Website Logo Design.12 2.1.5 Material Preparation.13 2.1.6 Website Sections14 2.1.7 Website Color And Style .14 2.1.8 Website Layout 15 2.1.9 Website Design Process Chart.15 2.2 Overall Design Of Background.16 2.2.1 Requirements Analysis Of Background.16 2.2.2 Work Environment.16 2.2.3 System Process Design 17 2.2.4 System Blocks Division17 2.2.5 System Deployment Architecture20 2.2.6 Database Design.20 Chapter III Detail Design Of The Website Foreground24 3.1 Website Style Design24 3.2 Website Structure Design25 3.3 Design And Implementation Of The Guide Page25 3.3.1 Flash Scenes Of Guide Page25 3.3.2 Design Processes Of Guide Page.26 3.4 Design And Implementation Of The Homepage .30 3.4.1 Homepage Design30 3.4.2 Homepage Layout31 3.4.3 Design Processes Of Homepage 36 3.5 Design And Implementation Of The Introduction Page.39 3.5.1 Introduction Page Design.39 3.5.2 Introduction Page Layout.40 3.5.3 Design Processes Of Introduction Page.41 3.6 Design And Implementation Of The Display Page43 3.6.1 Display Page Design43 3.6.2 Preparation Works Of Display Page45 3.6.3 Design Processes Of Display Page 45 3.7 Design And Implementation Of Other Pages 47 3.7.1 Other Pages Design47 3.7.2 Other Pages Layout48 Chapter IV Outcomes Of The Website .50 4.1 Outcomes Of Foreground Design .50 4.2 Outcomes Of Background Design.53 Chapter V Conclusions.58 References .59 Acknowledgements.61 第一章 绪论 1 第一章第一章绪论绪论 1.1 网站开发的起源以及意义网站开发的起源以及意义 Flash 是由美国的 Macromedia 公司推出的一款多媒体动画制作软件。它是 一种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起， 以制作出高品质的动态效果，或者说是动画。 在互联网飞速发展的今天，Flash 正被越来越多得应用在网页动画效果和网 站动态交互等方面，大大丰富了网站的可看性和交互性，为网站的推广成功， 可谓功劳显赫，效果卓越。如今 Flash 已经成为业界的标准，并代表着新技术 发展的方向，正逐渐成为互联网多媒体的重要分支。 “数字媒体艺术”是，网络技术和数字通信技术高速发展的产物，是信息学 科向文化艺术领域拓展的新方向，是以技术为主、艺术为辅，技术与艺术相结 合的新兴学科，旨在培养兼具技术和艺术素质的现代高级工程技术和艺术设计 人才。这是传统教育人才培养的空白，又是新兴产业崛起的急需。 数字媒体工程系基于 Flash 的网站的开发，是对 Flash 的高品质动画效果和 数字媒体工程系自身以技术为主，艺术为辅，技术与艺术相结合的特点的完美 融合与展示。我们在进行网站设计时注重突出前台页面的效果与后台的稳定性， 将美观与实用相结合，以显示数字媒体工程系自身的特点。引导页，主页面以 及作品展示页面按照 Flash 网站标准进行设计。在 J2EE 平台下，借助 WEBWORK 框架和 EJB 技术，通过 MVC 设计模式实现网站的后台管理功能， 最终打造一个具有软件学院数字媒体工程系自身特色的网站。 1.2 基于基于 Flash 的网站现状分析的网站现状分析 Flash 是近些年才出现的一种新事物，是一款多媒体动画制作软件。它是一 种交互式动画设计工具，用它可以将音乐，声效，动画方便地融合在一起，以 制作出高品质的动态效果，或者说是动画。 数字媒体工程系网站设计与实现 2 Flash 的特点如下1： （1）. 使用矢量图形和流式播放技术。与位图图形不同的是，矢量图形可以任 意缩放尺寸而不影响图形的质量；流式播放技术使得动画可以一边播放一边下 载，从而缓解了网页浏览者焦急等待的情绪。 （2）. 通过使用关键帧和图符使得所生成的动画(.swf)文件非常小，几 K 字节的 动画文件已经可以实现许多令人心动的动画效果，用在网页设计上不仅可以使 网页更加生动，而且小巧玲珑下载迅速，使得动画可以在打开网页很短的时间 里就得以播放。 （3）. 把音乐，动画，声效，交互方式融合在一起，越来越多的人已经把 Flash 作为网页动画设计的首选工具，并且创作出了许多令人叹为观止的动画(电影) 效果。 （4）. 强大的动画编辑功能使得设计者可以随心所欲地设计出高品质的动画， 通过 Action 和 FSCommand 可以实现交互性，使 Flash 具有更大的设计自由度， 另外，它与当今最流行的网页设计工具 Dreamweaver 配合默契，可以直接嵌入 网页的任一位置，非常方便。 正因为 Flash 的特性，Flash 动画就广泛就应用于网页设计当中，大部分的 网站都或多或少的应用了 Flash 技术。甚至有很多网站是纯 Flash 网站，现在网 上已经有了成千上万个 Flash 站点，可以说 Flash 已经慢慢成为网页动画的标准， 成为一种新兴的技术发展方向。 1.3 Flash 网站设计的相关理论网站设计的相关理论 1.3.1 Flash 网站的概念网站的概念 第一章 绪论 3 全 Flash 网站基本以图形和动画为主，所以比较适合做那些文字内容不太 多，以平面、动画效果为主的应用。如：企业品牌推广、特定网上广告、网络 游戏、个性网站等。 制作全 Flash 网站和制作 HTML 网站类似，事先应先在纸上画出结构关系 图，包括：网站的主题、要用什么样的元素、哪些元素需要重复使用、元素之 间的联系、元素如何运动、用什么风格的音乐、整个网站可以分成几个逻辑块、 各个逻辑块间的联系如何、以及你是否打算用 Flash 建构全站或是只用其做网 站的前期部分等等，都应在考虑范围之内。 实现全 Flash 网站效果多种多样，但基本原理是相同的：将主场景作为一个 “舞台”，这个舞台提供标准的长宽比例和整个的版面结构，“演员”就是网站 子栏目的具体内容，根据子栏目的内容结构可能会再派生出更多的子栏目。主 场景作为“舞台“基础，基本保持自身的内容不变，其它“演员”身份的子类、 次子类内容根据需要被导入到主场景内。 1.3.2 Flash 与与 ActionScript 脚本语言脚本语言 随着网络技术的发展和网页制作技术的进步，使用 Flash 与 ActionScript 脚 本语言创作的网站，动画更强、数据交互速度更快、更方便，成为 RAI 开发技 术的典范。Flash 与 ActionScript 脚本语言结合，广泛地用于网络视频网站、 Flash 游戏创作、课件制作和实施教学等2。 ActionScript3.0 是一门功能强大、符合业界标准的面向对象的编程语言。 它在 Flash 编程语言中有着里程碑的作用，是用来开发富应用程序（RIA）的重 要语言。ActionScript3.0 包括两部分：核心语言和 Flash Player API。核心语言 用于定义编程语言的基本结构，如声明变量、创建表达式控制程序结构和数据 类型等。Flash Player API 是由一系列用于实现特定功能的 Flash Player 类组成的 3。 数字媒体工程系网站设计与实现 4 1.3.3 Flash 网站制作和单个网站制作和单个 Flash 作品制作的区别作品制作的区别 （1）.文件结构不同 单个 Flash 作品的场景、动画过程及内容都在一个文件内，而 Flash 网站的 文件由若干个文件构成，并且可以随发展的需要继续扩展。全 Flash 网站的文 件动画分别在各自的对应文件内。通过 Action 的导入和跳转控制实现动画效果， 由于同时可以加载多个 SWF 文件，它们将重叠在一起显示在屏幕上。 （2）.制作思路不同 单个 Flash 作品的制作一般都在一个独立的文件内，计划好动画效果随时 间线的变化或场景的交替变化即可。全 Flash 网站制作则更需要整体的把握， 通过不同文件的切换和控制来实现全 Flash 网站的动态效果，要求制作者有明 确的思路和良好的制作习惯。 （3）.文件播放流程不同 单个 Flash 作品通常需要将所有的文件做在一个文件内，在观看效果是必须 等文件基本下载完毕才开始播放。但全 Flash 网站是通过若干个文件结合在一 起，在时间流上更符合 Flash 软件产品的特性。文件可以做的比较小，通过陆 续载入其它文件更适合 Internet 的传播，这样同时避免了访问者因等待时间过 长而放弃浏览。 1.4 Flash 动态网站开发的基本原理动态网站开发的基本原理4 Flash Player 将请求和数据发送给后端服务器应用程序，后端服务器应用程 序接收到请求，通过 HTTP（或者其它的协议）将响应和运算数据发送给 Flash Player，Flash Player 作为前端解释器对数据进行解析，并做出逻辑运算。这便 是 Flash 动态网站开发的基本原理。 第一章 绪论 5 随着应用的不断深入，各种各样便利的工具便不断的应运而生：从 Generator 到 FlashSQLComponentKit，从 WDDX 到 XML-RPC，从 SOAP 到 AMF-RPC，Flash 在通向网络应用程序的道路上不断攀登。 AMF-RPC，也就是众所周知的 Flash Remoting MX，它不是原有的 Generator 的更新，而是具有实现新功能的 Flash 后端服务器组件，相比起来不 可同日而语。它提供了一种基础架构，使用该架构可以很轻松的连接到一个应 用程序开发人员要使用的远程服务和 WEB 服务。Flash Remoting MX 提供了一 个强大但是非常简单的程序模型和运行时，它大大简化了 Flash 影片应用程序 开发。使用 Flash Remoting MX，开发者不需编写任何封装代码、Proxy 代码、 数据配置代码，就可以很轻松的把 ActionScript 客户端逻辑的连接到远程服务。 Flash Remoting MX 把精确定义的应用程序 API 和服务（或者集成在 C#内，或 者集成在 VB 内，或者集成在 Java 内，或者集成在 ColdFusion 内，或者集成在 PHP 内）都传递给 Flash 影片应用程序，并作为 ActionScript 的 API。 有了 Flash Remoting MX，有了 Flash Player，你可以轻松的开发出那种具 有炫彩图形用户界面，并由数据驱动的应用程序来，而且可以部署到各种设备 上只要该设备安装了 Flash Player。 XML，它简单的难以置信，但它也强大的难以置信。新的 Flash 创作环境 和运行时已经将架构完全建立在 XML 之上：为了更好的利用 XML 文档， ActionScript 脚本语言内建了 XML 对象，可以使用 XML 对象加载和解析 XML 文档，并可以将数据以 XML 格式发送到服务端；而且新的数据组件也都是以 XML 数据格式为基础的，这就使得开发环境更具诱惑力，更加符合产业发展的 方向。 你可以在服务端使用多种方法接收从 Flash 影片应用程序传递的数据，也 可以从服务端向 Flash 影片应用程序传递数据。方法多种多样，但都要使用 “中间件”，传统的中间件包括 JSP、ASP、CFM、PHP、ASP.NET 等，这些 都是 WEB 网页。 数字媒体工程系网站设计与实现 6 Flash Media Server 服务器（简称 FMS）的出现给全世界的人带来一种全新 的通讯方式。有了 FMS，您可以参加实时网络会议；使用 FMS，您可以在工作 中进行协作以及通过 Internet 或企业 Intranet 共享信息。 使用 FMS 和 Flash Remoting MX 的集成，从而可以轻松连接数据库以及驱 动应用程序服务器以创建功能更强的应用程序，并将其融入到 Flash Player 当中， 从而为终端用户带来全新的富媒体应用程序体验。 现在我们可以充分利用 Flash Player 的强大性能创建 RIA（Rich Internet Application，富 Internet 应用程序），而不是枯燥的网页加动态的图片拼凑了。 更值得一提的是，Flash Remoting MX 已经成为 Flash 服务端策略的核心，不管 你是使用 Flash 创作环境作为开发工具创建富 Internet 应用程序，还是使用 FLEX 创建富 Internet 应用程序，Flash Remoting MX 都是你必不可少的应用核 心。 1.5 Flash 网页制作的相关技术网页制作的相关技术 1.5.1 Adobe Dreamweaver CS3 第一章 绪论 7 图图 1-1 Adobe Dreamweaver CS3 Dreamweaver 是由 Macromedia 公司推出的，用于网页开发和网站管理的专 业化设计工具。它采用了多种新技术，具有设计和开发网站过程中需要的网站 管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；它具 有友好的操作界面，在文档窗口中可以打开各种浮动面板，同时还可以使用系 统内置的多种对象进行操作。 Adobe Dreamweaver CS3 将可视布局工具、应用程序开发功能和代码编辑 支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快 速创建界面吸引人的基于标准的网站和应用程序。从对基于 CSS 的设计的领 先支持到手工编码功能，Dreamweaver 提供了专业人员在一个集成、高效的环 境中所需的工具。开发人员可以使用 Dreamweaver 及所选择的服务器技术来创 建功能强大的 Internet 应用程序，从而使用户能连接到数据库、Web 服务和旧 式系统。 1.5.2 Adobe Photoshop CS3 图图 1-2 Adobe Photoshop CS3 数字媒体工程系网站设计与实现 8 Adobe Photoshop 是图像编辑的行业标准软件，适用于静态图像处理。其图 像制作工具可帮助使用者实现平直卓越的效果。借助于其前所未有的灵活性， 使用者可以根据自己的需要定义 Photoshop。此外，它还提供更高效的图像编辑、 处理以及文件处理功能，且功能的增强并未降低先前的效率。 Adobe Photoshop CS3 作为 Adobe 的核心产品，它不仅仅完美兼容 Vista， 更重要的是有由多个激动人心的全新特性，诸如支持宽屏显示器的新式版面、 集 20 多个窗口于一身的 dock、占用面积更小的工具栏、多张照片自动生成全 景、灵活的黑白转换、更易调节的选择工具、智能的滤镜、改进的消失点特性、 更好的 32 位 HDR 图像支持，等等。另外，Photoshop 从 CS3 首次开始分为两 个版本，分别是常规的标准版和支持 3D 功能的 Extended (扩展) 版。 1.5.3 Adobe Illustrator CS3 图图 1-3 Illustrator 操作示意图操作示意图 Adobe Illustrator 是 Adobe 系统公司推出的基于矢量的图形制作软件。它采 用网格渲染技术，产生的图形可以自由的在 Adobe 公司相关产品之间的转换。 Illustrator 最大特征在于贝赛尔曲线的使用，使得操作简单功能强大的矢量绘图 成为可能。现在它还集成文字处理，上色等功能，不仅在插图制作，在印刷制 第一章 绪论 9 品（如广告传单，小册子）设计制作方面也广泛使用，事实上已经成为桌面出 版（DTP）业界的默认标准.它同时作为创意软件套装 Creative Suite 的重要组成 部分，与兄弟软件位图图形处理软件 Photoshop 有类似的界面，并能共享一些 插件和功能，实现无缝连接。同时它也可以将文件输出为 Flash 格式。因此， 可以通过 Illustrator 让 Adobe 公司的产品与 Flash 连接5。 1.5.4 Adobe Flash CS3 图图 1-4 Adobe Flash CS3 Adobe Flash 软件使用于为数码、Web 和移动平台创建丰富的交互式内容的 最高级创作环境。用于交互式网站、丰富媒体广告、指导性媒体、引人入胜的 演示和游戏等等。利用包含 Flash 创作工具、渲染引擎和已建立的超过 200 万 的设计者和开发者群体的 Flash 平台生态系统，我们可以制作出各式各样的 Flash 动画。 Adobe Flash CS3 是 Flash 系列的最新产品。Adobe Flash CS3 使用了新的、 轻量的、可轻松设置外观的界面组件为 ActionScript 3.0 创建交互式内容，它 使用绘图工具以可视方式修改组件的外观而不需要进行编码。它提供了高级 数字媒体工程系网站设计与实现 10 QuickTime 导出器，将在 SWF 文件中发布的内容渲染为 QuickTime 视频， 导出包含嵌套的 MovieClip 的内容、ActionScript 生成的内容和运行时效果 （如投影和模糊）。还使用了独立的视频编码器、Alpha 通道支持、高质量视 频编解码器、嵌入的提示点、视频导入支持、QuickTime 导入和字幕显示等等， 确保获得最佳的视频体验。不仅如此，Flash CS3 还使用了新的代码编辑器增 强功能，节省了大量的编码时间6。 第二章 网站总体设计 11 第二章第二章网站总体设计网站总体设计 2.1 前台总体设计前台总体设计 2.1.1 前台需求分析前台需求分析 需求分析在软件产品开发和网站开发方面有着举足轻重的作用，直接决定 着后期的设计与开发能否顺利进行，产品能否获得成功。我们在分析了此类网 站的现状，倾听了老师和同学的意见，考虑到最终用户的实际需求之后，确定 了网站前台的功能性需求。主要包括： 1. 通过访问本网站，人们可以了解到厦门大学软件学院数字媒体工程系的基本 信息。 2. 通过访问本网站，老师和同学可以看到各类重要通知和消息。 3. 通过访问本网站，老师和同学们可以方便的获得教学、学术类信息。 4. 通过访问本网站，老师和同学可以方便地下载各种附件。 5. 通过访问本网站，老师和同学们可以及时了解学院和系里的动态。 6. 通过访问本网站，老师和同学可以将自己优秀的作品与人分享，一起欣赏和 学习。 2.1.2 前台整体规划前台整体规划 综合考虑网站实际需求、开发周期、人力资源等原因，我们首先在纸上画 出了结构关系图，包括：网站的主题、要用什么样的元素、哪些元素需要重复 使用、元素之间的联系、元素如何运动、整个网站可以分成几个逻辑块、各个 逻辑块间的联系如何，最终我们将网站的前台分为四层：首先为引导页，用 Flash 制作，主要作用是吸引用户注意力，给用户直观的信息表明网站用途；一 级页面为栏目显示页面，也是 Flash 页面，主要显示网站的几大模块，以便用 户进行选择浏览；二级页面为模块展示页面，其中作品展示模块用 Flash 制作， 数字媒体工程系网站设计与实现 12 用动态的形式呈现各个作品，其余页面是 JSP 页面，主要作用是逐条陈列出相 应模块中的新闻或者通知，供用户选择浏览；三级页面为内容显示页面，主要 是 JSP 页面，用于显示每条新闻或者通知的具体内容。 2.1.3 网站的名称网站的名称 数字媒体工程系是厦门大学软件学院新兴的一个系别，我们制作网站的目 的是为老师和同学们提供一个信息交流和学术交流的平台，因此我们在经过和 详细的需求分析之后参考老师和同学们的意见，直观的将网站命名为：厦门大 学软件学院数字媒体工程系网站。 2.1.4 设计网站的标志设计网站的标志 数字媒体工程系，顾名思义，是以技术为主，艺术为辅，技术与艺术相结 合的新兴学科，旨在培养兼具技术和艺术素质的现代高级工程技术和艺术设计 人才。 为了凸显数字媒体工程系的特征，我们设计的网站标志取 Digital Media Technology 的首字母组合 DMT，其中突出设计字母“D”，用一种艺术化的效果 和体现网络技术特征的网络状方格形式表示，在字母“D”的中间用反衬方式填 充字母“S”，表示软件学院（Software School），整个标志只采用黑白两色，一 方面为了给人以清楚明了的视觉效果，另一方面象征着数字世界中的“0”、“1” 交替和艺术领域中的黑白交互。字母下方嵌入我们网站的名称标准字：厦门大 学数字媒体工程系。 我们也特别制作了网站标准字以备后用，标准字中使用了汉字字符的倒影， 充分体现了 web3.0 的特征，用准确而简洁的中英文双语直观的表示出了网站的 名称。 网站的标志以及标准字主要使用 Adobe Photoshop CS3 和 Adobe Illustrator CS3 这两款软件制作完成，示意图如下所示： 第二章 网站总体设计 13 图图 2-1 网站的标志网站的标志 图图 2-2 网站的标准字网站的标准字 2.1.5 网站素材的准备网站素材的准备 素材的准备主要从两个方面入手，一方面是特定的场景素材，因为网站是 关于厦门大学软件学院数字媒体工程系的，因此需要一些图片和文字介绍等。 另外一方面是打造网站整体风格所必须的一些元素性质的素材，如按钮、图标 等等。 场景素材：根据每个 Flash 场景的不同而所需的不同素材，主要是图片素 材 和文字素材，如学院图片，学院整体效果透视图以及学生设计的图片和视频作 品，学院和数字媒体工程系的介绍等。 元素素材：与网站整体风格统一的特定素材，如网站标志中所需的各种元 素， 数字媒体工程系的准确英文表示，一些统一的小标记等。 数字媒体工程系网站设计与实现 14 2.1.6 网站的栏目网站的栏目 通过对网站实际需求的分析，我们设置了六个栏目，分别是院系介绍、学 生工作、学院主页、学术活动、教学通知、作品展示。 院系介绍主要是对软件学院、数字媒体工程系的情况简介和课程以及师资 的说明；学生工作、学术活动和教学通知主要是学院和数字媒体工程系发布的 有关教学、学术、文化、娱乐的系列通知；学院主页直接链接到厦门大学软件 学院的首页；作品展示是具有数字媒体工程系特征的一个栏目，主要展示优秀 的学生作品，供大家欣赏、交流和学习。 图图 2-3 网站的栏目网站的栏目 2.1.7 网站的色彩和风格网站的色彩和风格 网站的主色调是黑色和红色，并配合有白色以及绿色。选用黑色是因为它 是经典的颜色，不易过时，又稳重大方，选用红色是因为黑红的搭配给人一种 大方而又不失活拨的感觉，让网站更有生机。我们想用简单的色彩给人以简洁 明了，自然大方的感觉。网站整体背景是具有中国风的黑红底，既像是两根红 色的柱子撑起门楣，又像是一页打开着的红色锦帛材质书卷，所有的内容在上 第二章 网站总体设计 15 面徐徐展开，整个网站使用的字体都为黑底白字或者白底黑色，这样是为了视 觉效果上的一目了然。 2.1.8 设计网站的版面布局设计网站的版面布局 关于网站本面布局的设计，首先我们针对不同级别的页面，制定了不同的 布局原则，这些原则是：引导页简短明了，重点突出，具有吸引力，视觉冲击 力强。一级页面内容简洁，整体感强，能突显出 Flash 页面的交互性和动态性。 二级页面内容充实、色调和谐、布局合理，能够为用户呈现清晰的信息集合。 三级页面简单明了，直观地为用户显示信息内容。 其次，依照这些版面布局原则， 我们画出了纸质版的页面布局图，按照这 些图来进行页面的具体制作。 2.1.9 网站设计的流程图网站设计的流程图 经过了我们对网站的整体分析，以及各种网站基本元素的设计，我们将 Flash 网站前台制作流程描述如下： 网站结构规划 Flash 场景规划素材准备分别制作整体整合7 网站设计流程图如图 2-4 所示： 数字媒体工程系网站设计与实现 16 图图 2-4 网站设计流程图网站设计流程图 2.2 后台总体设计后台总体设计 2.2.1 需求分析需求分析 通过征询老师和同学们的意见和建议，以及自身对学院网站等类似网站的 体验，我们确定该网站的最终用户主要是厦门大学软件学院的学生，还有其他 感兴趣的网络游客。根据分析网站最终用户的需求，我们大致上确定了该网站 的主要功能和需求，并召开小组会议加以讨论和确定。我们从用户使用网站的 目的，网站需要实现的基本功能，操作人员的情况等几个方面逐条分析具体流 程的有效性和可行，从不同的角度完善其中的细节，在与指导教师沟通协调后， 确定该网站的主要功能性需求包括： 后台主要功能性需求： 1. 通过使用本网站，管理人员可以轻松的发布各种类型的通知和新闻，并对其 进行分类和增删改管理。 2. 通过使用本网站，管理人员可以方便地上传和管理各种类型的附件。 3. 通过使用本网站，管理人员可以修改个人信息、登录密码。 4. 通过使用本网站，高级别管理人员可以管理低级别管理人员。 第二章 网站总体设计 17 2.2.2 确定工作环境确定工作环境 （1） 硬件环境 Flash 网页的制作和播放需要大量处理和制作图片，对计算机硬件环境要求 较高。配置高性能的显卡、CPU 能够使得操作起来得心应手，动画制作质量也 越好。当前我采用的是 IBM THINKPAD X60：Intel Core2 1.66Hz 处理器，Intel 945 Express Chipset Family 显示卡，1GB 内存。基本能满足 Flash 网页制作和播 放的需要。 （2）软件环境 前台开发环境：Windows 系统平台； 开发工具：Adobe Flash CS3；Adobe Illustrator CS3；Adobe Photoshop CS3；Adobe Dreamweaver CS3 等。 运行环境：Windows/Linux 系统平台；IE6.0；Flash Player ActiveX 插件。 后台开发环境：Windows 系统平台； 开发工具：Myeclipse6.0，MySQL； 运行环境：Windows/Linux 系统平台；JBoss4.0；Jdk5.0；IE6.0。 2.2.3 系统流程设计系统流程设计 根据系统分析的需求，确定系统流程图8如图 2-5 所示： 数字媒体工程系网站设计与实现 18 管理员登陆 新 闻 管 理 超级管理员 YES 添 加 新 闻 附 件 管 理 作 品 管 理 个 人 管 理 用 户 管 理 修 改 新 闻 删 除 新 闻 添 加 附 件 删 除 附 件 添 加 作 品 删 除 作 品 修 改 密 码 新 增 用 户 删 除 用 户 图图 2-5 系统流程图系统流程图 2.2.4 系统模块划分系统模块划分 根据系统流程图，对整个后台管理员系统的整体结构进行大致的设计。在 坚持细分、一致性、提高代码重用性、从上而下层层分析、提高独立性、降低 耦合性和模块大小适中的原则下，将系统模块化如下： (1) 新闻管理模块：包括添加新闻，修改新闻，删除新闻功能。如图 2-69 所示： 第二章 网站总体设计 19 添加新闻 修改新闻 删除新闻新闻管理 图图 2-6 新闻管理模块功能图新闻管理模块功能图 (2) 附件管理：包括添加附件，删除附件功能。如图 2-7 所示： 为该新闻添加附件 删除该新闻附件 附件管理 显示新 闻列表 图图 2-7 附件管理模块功能图附件管理模块功能图 (3) 作品管理：包括添加作品，删除作品功能。如图 2-8 所示： 数字媒体工程系网站设计与实现 20 添加作品 删除作品作品管理 图图 2-8 作品管理模块功能图作品管理模块功能图 (4) 个人管理：包括查看个人信息，修改密码功能。如图 2-9 所示： 修改密码 查看个人信息个人管理 图图 2-9 个人管理模块功能图个人管理模块功能图 （5）用户管理：包括添加普通管理员，删除普通管理员功能。如图 2-10 所示： 添加普通管理员 删除普通管理员用户管理 图图 2-10 用户管理模块功能图用户管理模块功能图 第二章 网站总体设计 21 2.2.5 系统部署架构系统部署架构 后台管理员系统是在 J2EE 平台下，借助 WEBWORK 框架和 EJB 技术，通 过 MVC 设计模式实现。 MVC (Model-View-Controller) 是八十年代为编程语言 Smalltalk-80 发明的 一种软件设计模式。MVC 模式把交互式应用分成三部分，分别是：模型 (Model) 、视图(View) 和控制器 (Controller)。模型是指从现实世界中挖掘出来 的对象模型，是应用逻辑的反映。模型封装了数据和对数据的操作，是实际进 行数据处理的计算的地方。视图是应用和用户之间的接口，它负责将应用显现 给用户和显示模型的状态。控制器负责视图和模型之间的交互，控制对用户输 入的响应响应方式和流程，它主要负责两方面的动作：把用户的请求分发到相 应的模型；将模型的改变及时反应到视图上。MVC 将这些对象分离以提高灵活 性和复用性10。MVC 模式的结构如图 2-11 所示： 模型(Model) 视图(View)控制器(Controller) 获得数据 变化通知状态改变 用户动作 视图选择 图图 2-11 MVC 模式结构图模式结构图 2.2.6 数据库设计数据库设计 (1) 数据信息：任何网站的后台功能都是对数据进行操作，因此对项目中数据 信息进行提炼是十分重要的。根据需求分析，可以提炼以下数据信息： 数字媒体工程系网站设计与实现 22 新闻信息，对应新闻表；附件信息，对应附件表；用户信息，对应管理员表； 作品展示信息，对应作品表。 (2) 确定数据表：关系型数据库是当前广泛应用的数据库类型，本系统即按照 关系数据库设计的要求和标准设计。 关系数据库设计是对数据进行组织化和结构化的过程，核心问题是关系模 型的设计。简洁、结构明晰的表结构对数据库的设计是相当重要的。规范化的 表结构设计，在以后的数据维护中，不会发生插入、删除和更新时的异常。要 设计规范化的数据库，就要求我们根据数据库设计范式，也就是数据库设计的 规范原则来做。一般情况下，要满足范式的前三级标准，即： 第一范式(1NF)：数据库表的每一列都是不可分割的基本数据项，同一列中 不能有多个值，即实体中的某个属性不能有多个值或者不能有重复的属性。 第二范式(2NF)：第二范式(2NF)是在第一范式(1NF)的基础上建立起来的， 满足第二范式(2NF)必须先满足第一范式(1NF)。第二范式(2NF)要求数据库表中 的每个实例或行必须可以被惟一区分，即若 R1NF，且每一个非主属性完全 函数依赖于码，则 R2NF。 第三范式(3NF)：满足第三范式(3NF)必须先满足第二范式(2NF)。若 R3NF，则每一个非主属性既不是部分依赖于码，也不传递依赖于码11。 根据提炼的数据信息，按照数据库设计范式，确定本系统数据表如下： 新闻表(News)：与附件表(Accessory)是一对多的映射关系。表中有五个字 段，分别是新闻 ID、标题、内容、所属类型(1 代表教学通知，2 代表学生工作， 3 代表学术活动)、创建日期。如表 2-1 所示： 表表 2-1 新闻表新闻表 News idint新闻 ID(主键) titlevarchar标题(非空) contentvarchar内容(非空) typeint所属类型(非空) datedate创建日期(非空) 第二章 网站总体设计 23 附件表(Accessory)：与新闻表(News)是多对一的映射关系。表中有四个字 段，分别是附件 ID、实际名称、存储名称、所属新闻(在数据库中以所属新闻 ID 表示)。如表 2-2 所示： 表表 2-2 附件表附件表 Accessory idint附件 ID(主键) Namevarchar实际名称(非空) Store Namevarchar存储名(非空) News_idint所属新闻 ID(外键) 用户表(Manager): 表中有五个字段，分别是管理员 ID、登录名、密码、级 别(0 代表超级管理员，1 代表普通管理员)、真实姓名。如表 2-3 所示： 表表 2-3 用户表用户表 Manager idint管理员 ID(主键) Namevarchar登录名(非空) Passwordvarchar密码(非空) Levelvarchar级别(非空) Real Namevarchar真实姓名(非空) 作品表 (Work show):