1、 本 科 毕 业 论 文 数字媒体工程系 网站设计 与实现 美工 编码 Website Design&Implementation for Department of Digital Media Engineering Coding in Art Design 姓 名： 学 号： 学 院： 软件学院 系： 软件工程 专 业： 软件工程 年 级： 指导教师 ： 年 月 摘 要 作为厦门大学软件学院 2007 年设立的 新 专业， 数字媒体工程系 是 集计算机、美术、传媒三位一体的新 概念 专业 ， 具 有 浓重的时代色彩 。 数字媒体系 网站作为院系的网络门户， 它的创建迫在眉睫，在这个背景之下
2、，我们选取 “ 数字媒体工程系 网站设计与实现 ” 作为此次毕业设计的主题。 除了完善的后台功能， 该网站 需要 具备合乎 “ 数字媒体 ” 称谓的设计感 。因此 ， 在 整站 建设过程中， 美 感和实用 被 放到 同 等重要 的地位 ， 它 要求 美术设计 不仅能给人以强大的视觉冲击力，更要满足主流审美的舒适感 ，同时兼顾网络应用的轻量和优化 ， 这种现状 启发 了开发人员将图形设计和代码融合的思路，也刚好指向了未来建站技术发展的必然趋势。 本文 从这一 实际 背景出发，着重记录了网站前台开发 的 主要过程 ，通过对Flash、 ActionScript、 CSS、 JavaScript 等
3、重点 技术的详细剖析， 阐述 了 整站视觉表现效果的设计 理念 和实现过程， 展示出 用代码实现 美工设计的优势和 前 景。 同时， 文章 通过对 Swift3D、 Illustrator、 Photoshop、 Dreamweaver 等 工具的介绍 ，以及 对 JSP、 WebWork、 XML、 J2EE 等 技术的说明，完整的 提炼出 全站建设的 脉络和框架 ； 通过 深入 了解数字领域艺术设计的 发展 现状，发掘出它未来发展 的 潜力 和 方向 。 下文将 充分借助 实景展示，分模块的对用代码实现 的 艺术效果做出详细 说明 ，并 对新技术、新发现进行分享， 最后 提出 自己 在实践
4、中引发 出 的 创意和思路 。 关键词 ： 数字媒体 ； Flash； 前台开发 ； 美术设计 Abstract As a new major of Software School ,digital media technology, who set up at 2007, combines information technology, fine arts and new media, which is a new concept of the Trinity with a strong color of the times. As a Web portal, the official We
5、b site for digital media technology is required to be created imminent. In this context, we select the Design & Implementation for Digital Media Technology Website as the theme of the graduation project. Besides comprehensive web background functions, the website with the need of suitable to the med
6、ia art description in design. As a result, during the entire construction process, aesthetic and functional status was placed of equal importance. it requires not only art and design in order to give people a strong visual impact, but also to meet the mainstream aesthetic comfort, meanwhile, account
7、ing the light and optimized for the web application. In this paper, according to the actual background, we focus on record in the main process of foreground development of sites by a detailed analysis of Flash, ActionScript, CSS, JavaScript and other key technology, meanwhile, we performanced the wh
8、ole visual effect of Website design concept and the process of realization, finally, displayed the advantages and prospects of art design code . At the same time, the article by the introduction of Swift3D, Illustrator, Photoshop, Dreamweaver etc. and the description of such as code as JSP, WebWork,
9、 XML, J2EE technology, extract a complete consequence of the whole context and framework of the website development. By understanding the number of the status of the field of Art and Design to explore its enormous potential and trends for future development. Here will be displayed through the real,
10、sub-modules of code to achieve artistic effect used to make detailed explanation and exploration of new technologies and to share findings, and in practice its own rise to reflection. Keywords: Digital Media； Flash； Foreground Development； Art Design 目 录 第一章 绪 论 . 1 1.1. 综述 . 1 1.2. WEB 前台开发与美工设计 .
11、1 1.3. FLASH介绍 . 3 1.4. ACTIONSCRIPT 3.0 介绍 . 4 1.5. CSS 介绍 . 7 1.6. JAVA SCRIPT介绍 . 8 1.7. 网站开发主要环节介绍 . 8 1.7.1. 网站风格 /创意 . 9 1.7.2. 网站 LOGO. 10 1.7.3. 视觉流程 . 11 1.7.4. 网页框架与布局 . 12 1.7.5. 网站配色 . 13 1.7.6. 网站开发流程 . 13 第二章 数字媒体工程系 网站开发设计综述 . 15 2.1. 总体设计 . 15 2.1.1. 网站的名称 . 15 2.1.2. 建站初设计要求 . 15 2.
12、1.3. 网站的定位 . 15 2.1.4. 网站的初期应用和前景 . 15 2.2. 前台总体设计 . 16 2.2.1. 整站风格及创意 . 16 2.2.2. 网站的配色 . 17 2.2.3. 网站的标志和标准字 . 18 2.2.4. 网站栏目设置 . 20 2.2.5. 网站的布局 . 20 2.2.6. 素材的来源 . 22 2.3. 后台总体设计 . 22 2.3.1. 需求分析 . 22 2.3.2. 工作环境 . 23 2.3.3. UML建模 . 24 2.3.4. 系统部署架构 . 25 2.3.5. 数据库设计 . 26 第三章 前台技术详细说明 . 29 3.1.
13、创作工具简介 . 29 3.1.1. Adobe Flash CS3 . 29 3.1.2. Swift 3D . 30 3.1.3. Adobe Dreamweaver CS3. 30 3.1.4. Adobe Illustrator CS3 . 31 3.1.5. Adobe Photoshop CS3 . 32 3.2. 基于时间轴动画的 FLASH设计 引导页（ DEFAULT.SWF） . 32 3.2.1. 引导页最终实现效果 . 33 3.2.2. 引导页设计思路 . 34 3.2.3. 引导页源文件结构 . 34 3.2.4. 引导页制作 细节 . 34 3.3. 基于 AS2
14、.0 脚本的 FLASH设计 首页导航按钮（ INDEXN.SWF） . 41 3.3.1. 首页导航按钮 Flash最终实现效果 . 42 3.3.2. 首页导航按钮 Flash设计思路 . 43 3.3.3. 首页导航按钮 Flash制作细节 . 43 3.3.4. 首页导航按钮 Flash后期整体布局和修饰 . 47 3.4. 基于 AS3.0 脚本的 FLASH设计 作品展示页（ DISPLAY.SWF） . 47 3.4.1. 作品展示页最终效果 . 48 3.4.2. 作品展示页 设计思路 . 49 3.4.3. 作品展示页制作前期准备 . 49 3.4.4. 作品展示页文档属性及
15、发布设置 . 50 3.4.5. 作品展示页 3D 螺旋展示主要代码 . 52 3.4.6. 作品展示页随机 0/1 刷屏背景主要代码 . 53 3.4.7. 作品展示页动态文本制作 . 54 3.5. 实例中的 ACTIONSCRIPT3.0 与 ACTIONSCRIPT2.0 版本对比 . 55 3.5.1. 按钮动作和导航链接 . 56 3.5.2. Sprite 容器的新概念 . 56 3.6. 基于 JAVA SCRIPT脚本的静态网页设计 院系介绍 HTML页面 . 57 3.6.1. 院系介绍页面设计思路 . 57 3.6.2. 页面最终效果 . 57 3.6.3. JavaSc
16、ript 控制页面函数 . 59 3.7. 基于 CSS 代码的 JSP 页面设计 各级新闻显示页面 . 59 3.7.1. 新闻显示页面设计思路 . 59 3.7.2. 通过 IllustratorCS3 矢量制图工具制作页面效果图 . 60 3.7.3. CSS 页面美化 . 62 第四章 前后台交互技术详细说明 . 63 4.1. JSP 技术介绍 . 63 4.2. WEB WORK介绍 . 63 4.3. 应用 WEBWORK 和 JSP，进行前后台交互 . 64 4.4. 后台管理页面前后台交互方式 . 64 4.5. 后台管理各页面效果 . 65 第五章 结束语 . 69 参考文
17、献 . 71 致 谢 . 73 Contents CHAPTER 1 OUTLINE . 1 1.1. Totally Introduction . 1 1.2. Web Foreground Development &Art Design . 1 1.3. Introduction of Flash . 3 1.4. Introduction of ACTIONSCRIPT 3.0. 4 1.5. Introduction of CSS . 7 1.6. Introduction of JAVA SCRIPT . 8 1.7. Introduction of Website Developm
18、ent. 8 1.7.1. Style and Creative for A Website . 9 1.7.2. Logo for A Website . 10 1.7.3. Visual Process . 11 1.7.4. Framework and Layout for A Webste . 12 1.7.5. Color Design . 13 1.7.6. Website Development Process . 13 CHAPTER 2 SUMMARY OF WEBSITE DESIGN . 15 2.1. General Design . 15 2.1.1. Name . 15 2.1.2. Primary Requirement . 15 2.1.3. Registration . 15 2.1.4. Web Early Applications and The Prospects . 15 2.2. General Design for foreground . 16 2.2.1. Totally Style and Creative . 16 2.2.2. Color Chosen For The Website . 17 2.2.3. Logo And Words . 18 2.2.4. Website Columns . 20
