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

键入文字本 科 毕 业 论 文数字媒体工程系网站设计与实现美工编码Website Design&Implementation for Department of Digital Media EngineeringCoding in Art Design姓 名：学 号：学 院：软件学院系：软件工程专 业：软件工程年 级：指导教师： 年 月III摘要作为厦门大学软件学院2007年设立的新专业，数字媒体工程系是集计算机、美术、传媒三位一体的新概念专业，具有浓重的时代色彩。数字媒体系网站作为院系的网络门户，它的创建迫在眉睫，在这个背景之下，我们选取“数字媒体工程系网站设计与实现”作为此次毕业设计的主题。除了完善的后台功能，该网站需要具备合乎“数字媒体”称谓的设计感。因此，在整站建设过程中，美感和实用被放到同等重要的地位，它要求美术设计不仅能给人以强大的视觉冲击力，更要满足主流审美的舒适感，同时兼顾网络应用的轻量和优化，这种现状启发了开发人员将图形设计和代码融合的思路，也刚好指向了未来建站技术发展的必然趋势。本文从这一实际背景出发，着重记录了网站前台开发的主要过程，通过对Flash、ActionScript、CSS、JavaScript等重点技术的详细剖析，阐述了整站视觉表现效果的设计理念和实现过程，展示出用代码实现美工设计的优势和前景。同时，文章通过对Swift3D、Illustrator、Photoshop、Dreamweaver等工具的介绍，以及对JSP、WebWork、XML、J2EE等技术的说明，完整的提炼出全站建设的脉络和框架；通过深入了解数字领域艺术设计的发展现状，发掘出它未来发展的潜力和方向。 下文将充分借助实景展示，分模块的对用代码实现的艺术效果做出详细说明，并对新技术、新发现进行分享，最后提出自己在实践中引发出的创意和思路。关键词：数字媒体；Flash；前台开发；美术设计AbstractAs 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 Web 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 “media 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, accounting 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 whole 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, 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, 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目录第一章绪 论11.1.综述11.2.Web前台开发与美工设计11.3.Flash介绍31.4.ActionScript 3.0介绍41.5.CSS介绍71.6.JavaScript介绍81.7.网站开发主要环节介绍81.7.1.网站风格/创意91.7.2.网站LOGO101.7.3.视觉流程111.7.4.网页框架与布局121.7.5.网站配色131.7.6.网站开发流程13第二章数字媒体工程系网站开发设计综述152.1.总体设计152.1.1.网站的名称152.1.2.建站初设计要求152.1.3.网站的定位152.1.4.网站的初期应用和前景152.2.前台总体设计162.2.1.整站风格及创意162.2.2.网站的配色172.2.3.网站的标志和标准字182.2.4.网站栏目设置202.2.5.网站的布局202.2.6.素材的来源222.3.后台总体设计222.3.1.需求分析222.3.2.工作环境232.3.3.UML建模242.3.4.系统部署架构262.3.5.数据库设计26第三章前台技术详细说明293.1.创作工具简介293.1.1.Adobe Flash CS3293.1.2.Swift 3D303.1.3.Adobe Dreamweaver CS3303.1.4.Adobe Illustrator CS3313.1.5.Adobe Photoshop CS3323.2.基于时间轴动画的Flash设计引导页（default.swf）323.2.1.引导页最终实现效果333.2.2.引导页设计思路343.2.3.引导页源文件结构343.2.4.引导页制作细节343.3.基于AS2.0脚本的Flash设计首页导航按钮（INDEXN.swf）413.3.1.首页导航按钮Flash最终实现效果413.3.2.首页导航按钮Flash设计思路433.3.3.首页导航按钮Flash制作细节433.3.4.首页导航按钮Flash后期整体布局和修饰473.4.基于AS3.0脚本的Flash设计作品展示页（display.swf）473.4.1.作品展示页最终效果473.4.2.作品展示页设计思路493.4.3.作品展示页制作前期准备493.4.4.作品展示页文档属性及发布设置503.4.5.作品展示页3D螺旋展示主要代码523.4.6.作品展示页随机0/1刷屏背景主要代码533.4.7.作品展示页动态文本制作543.5.实例中的ActionScript3.0与ActionScript2.0版本对比553.5.1.按钮动作和导航链接563.5.2.Sprite容器的新概念563.6.基于JavaScript脚本的静态网页设计院系介绍Html页面573.6.1.院系介绍页面设计思路573.6.2.页面最终效果573.6.3.JavaScript控制页面函数593.7.基于CSS代码的JSP页面设计各级新闻显示页面593.7.1.新闻显示页面设计思路593.7.2.通过IllustratorCS3矢量制图工具制作页面效果图603.7.3.CSS页面美化62第四章前后台交互技术详细说明634.1.JSP技术介绍634.2.WebWork介绍634.3.应用WEBWORK和JSP，进行前后台交互644.4.后台管理页面前后台交互方式644.5.后台管理各页面效果65第五章结束语69参考文献 71致谢 73ContentsCHAPTER 1 OUTLINE11.1.Totally Introduction11.2.Web Foreground Development &Art Design11.3.Introduction of Flash31.4.Introduction of ActionScript 3.041.5.Introduction of CSS71.6.Introduction of JavaScript81.7.Introduction of Website Development81.7.1.Style and Creative for A Website91.7.2.Logo for A Website101.7.3.Visual Process111.7.4.Framework and Layout for A Webste121.7.5.Color Design131.7.6.Website Development Process13CHAPTER 2 SUMMARY OF WEBSITE DESIGN152.1.General Design152.1.1.Name152.1.2.Primary Requirement152.1.3.Registration152.1.4.Web Early Applications and The Prospects152.2.General Design for foreground162.2.1.Totally Style and Creative162.2.2.Color Chosen For The Website172.2.3.Logo And Words182.2.4.Website Columns202.2.5.Layout For The Website202.2.6.Source of Matrials222.3.General design for background222.3.1.Requirement Analysis222.3.2.Runtime Envirement232.3.3.UML Modeling242.3.4.System Deployment262.3.5.DataBase Design26CHAPTER 3 DETAIL DESIGN FOR FOREGROUND TECHNOLOGYS293.1.Tools introduction293.1.1.Adobe Flash CS3293.1.2.Swift 3D303.1.3.Adobe Dreamweaver CS3303.1.4.Adobe Illustrator CS3313.1.5.Adobe Photoshop CS3323.2.Flash timeline-based animation designdefault.swf323.2.1.Index Pages Final Effects333.2.2.Index Pages Designing Ideas343.2.3.Index Pages Resources Construction343.2.4.Index Pages Details in making343.3.Flash AS2.0-based Script DesignINDEXN.swf413.3.1.Navigation Button Flashs Final Effects413.3.2.Navigation Button Flashs Designing Ideas433.3.3.Navigation Button Flashs Details433.3.4.Navigation Button Flashs Framework and Decorations473.4.Flash AS3.0-based Script Designdisplay.swf473.4.1.Display Pages Final Effects473.4.2.Display Pages Design Ideas493.4.3.Display Pages Preparation493.4.4.Display Pages Document Propreties503.4.5.Display Pages 3D Effects Codings523.4.6.Display Pages Random background Codings533.4.7.Display Pages Dyamtic Text Making543.5.the Differents Between ActionScript3.0 and ActionScript2.0 553.5.1.Buttons and Navigations563.5.2.New Conception of ContainerSprite563.6.javaScript-Based Script Page DesignIntroduction.Html573.6.1.Introduction Pages Designing Ideas573.6.2.Introduction Pages Final Effects573.6.3.Control Pages Functions Write with JavaScript593.7.CSS Code-Based JSP Pages DesignArticleListView. jsp593.7.1.ArticleListView Pages Designing Ideas593.7.2.Using IllustratorCS3 To Design the pages603.7.3.CSS Design62CHAPTER 4 FOREGROUND&BACKGROUND INTERACTIVES634.1.Introduction of JSP Technology634.2.Introduction of WebWork634.3.Using WebWork and JSP644.4.Interactive ways of Backgourd Pages644.5.Shapes of the Pages for Backgroud65CONCLUSIONS69REFERENCES71ACKNOWLEDGEMENTS73第一章 绪 论第一章 绪 论1.1. 综述当信息时代势不可挡的到来，虚拟世界蔓延到了人们现实的生活中。时至今日，计算机带给我们的已经远不是辅助计算那样狭隘的概念，它超脱现实的理念，开创了一个新的纪元。相对于传统的艺术创作而言，虚拟艺术的难点在于我们要具备的不仅是审美的天赋，同时要具备驾驭代码的能力，就像我们对于Flash的理解远不应该只是简单矢量动画的制作软件，对于J2EE的认识也不应该只是针对各种数据的操作架构。人们需要找到一个完美的契合点，寻求一个美工设计的新途径，先制造出华丽的显示效果，再将完美的前台表现结合上强大的后台功能，通过图像让代码变得生动，也借助代码让图像显的更加恢弘。如果让一个前台开发人员去解释编码对于美工创作的强大支持，只凭借描述很难表达清楚的，无论是ActionScript的进展、JavaScript的壮大，还是CSS的灵活，只有实际操作过才能有切实的体会。所以下文将按照一个递进的过程，通过时间轴逐帧动画，ActionScript2.0脚本动画，ActionScript3.0脚本动画，JavaScript特效，CSS布局和JSP页面代码的实际案例介绍，从纯美工设计向后台技术过渡，感受用代码实现艺术设计的酣畅淋漓。1.2. Web前台开发与美工设计当下，很多人将“Web前台开发人员”和“美工”理解为同一种工作的两种称谓，这应该算是一个普遍的误区。尽管都是致力于网页的表现效果，他们两者使用的方法、最终的目的和本质的属性都有着很大程度上的不同。首先，我们给前台开发的工作一句定义：运用前端技术，实现体验的良好传达。如果在这个职位的前面加上 Web，那么指的就是针对 Web 这个领域的，主要是指互联网方面的应用。因此，Web前台开发需要的技术主要有JavaScript、(X)Html、CSS 、ActionScript和Ajax等。然后，我们再给美工的工作一句定义：关注界面美感，赢得用户每一眼的好感。美工在各个行业中发挥的作用大体相同，只是针对计算机领域而言，他们需要掌握到更专业的电脑绘图技术，才能实现创意想法的完整表达。所以美工必备的武器有Photoshop、Illustrator、Dreamweaver和Flash等（如图1-1）。由此可见，Web 前台开发工程师并不是美术设计师，他们更多的应该倾向于定位为开发人员，因为这个岗位上每天接触的最多的就是代码、程序、或者算法。而我们所说的美工，也叫界面设计师、视觉设计师，他们思考最多的应该是配色、页面结构、按钮形状、字体字号的问题等等，倾向于传统意义上的艺术工作者。图1-1：网站前台开发常用的系列工具正是由于这些分工和差异，实际情况中，一个项目前台代码和美工设计往往是脱节的，这带来了Web开发中最大的困扰，有时甚至造成鱼与熊掌不可兼得的尴尬状况。然而在电脑技术迅速发展的今天，网络需求使这两者变得越来越密不可分没有代码的支持的美术设计死板而机械，没有美术表现力的代码即使性能很优越也依然少有人气。所以迎合时代的网络前端开发人员应该是具备将代码和艺术设计精妙融合能力的，以程序为核心，优化和美化可视界面，打造出极具竞争力的网络应用。可以肯定的说，让Web前台开发与美工设计化合成为一个综合的强化概念，会产生1+1大于2的效果。1.3. Flash介绍图1-2：FlashCS3开始界面Flash是美国的Macromedia公司于1999年6月推出的优秀网页动画设计软件 Adobe公司于2005年4月18日宣布收购Macromedia公司，故此后的Flash版本为Adobe公司产品。它是一种交互式动画设计工具，用它可以将音乐，声效，动画以及富有新意的界面融合在一起，以制作出高品质的网页动态效果。 Flash被称为是“最为灵活的前台”，由于其独特的时间片段分割（TimeLine）和重组（MC嵌套）技术，结合ActionScript的对象和流程控制，使得在灵活的界面设计和动画设计成为可能。Flash具有跨平台的特性（这点和Java一样），所以无论你处于何种平台，只要你安装了版本支持的Flash Player，就可以保证它们的最终显示效果的一致，而不必像在以前的网页设计中那样为IE或Net Space各设计一个版本。同时，Adobe设备中心CS3已包含在FlashCS3之中，借助于内置的设备模板和不断更新的设备参数文件，可以大大简化移动内容的创建过程。现在，用户可以方便地设计、预览以及测试移动内容，例如交互的 Flash Lite应用程序和丰富的用户界面。使用内置的ActionScript 3.0 用户界面和视频组件，包括按钮、滚动条、滑块等，还可以大量提升内容的开发效率，节省时间。Flash的版本历史介绍2FutureSplash Animator (1995) - Flash的前身，由简单的工具和时间线组成 ；Flash 1 (1996-11) - Macromedia给FutureSplash Animator更名后为Flash的第一个版本 ；Flash 2 (1997-6) - 引入库的概念 ；Flash 3 (1998-5-31) - 影片剪辑，JavaScript插件，透明度和独立播放器 ；Flash 4 (1999-6-15) - 变量，文本输入框，增强的ActionScript,流媒体MP3 ；Flash 5 (2000-8-24) - JavaScript,，智能剪辑， HTML文本格式 ；Flash MX (2002-3-15) Unicode，组件，XML，流媒体视频编码 ；Flash MX 2004 (2003-9-10) - 文本抗锯齿，ActionScript 2.0，增强的流媒体视频，行为 ；Flash MX 2004 Pro (2003-9-10) - 包括所有Flash MX 2004的特性，加上Web Services,，ActionScript 2.0的面向对象编程，媒体播放组件 ；Flash 8/Flash 8 Pro (2005-9-13) 增强为移动设备开发的功能,方便创建Flash Web,增强的网络视频 。Flash CS3(2007)Adobe公司收购Macromedia公司后，首次推出的版本，最新的as3.0编程语言替换原来的as2.0编程语言。1.4. ActionScript 3.0介绍3在最新版本的Flash中，其脚本语言ActionScript 3.0对ActionScript2.0有了根本上的革新，已经演变成了一门强大的面向对象的编程语言。这意味着Flash平台的重大变革，也意味着 ActionScript 3.0 将创造性地将语言理想地迅速地建立出适应网络的丰富应用程序, 成为富网络应用(Rich Internet Application)项目的本质部分。事实上早期的ActionScript版本就已经提供了这种为创造真实参与感的在线体验的力量和灵活性。ActionScript 3.0 将促进和发展这种性能, 提供发展强大表现和舒适的先进的高度复杂应用, 结合大型数据库以及可移植性的面向对象的代码。ActionScript 3.0 基于ECMAScript, ECMAScript是所有编程语言的国际规范化的语言。ActionScript 3.0 同样遵从ECMAScript语言规范。ActionScript 由嵌入在Flash player的ActionScript虚拟机 (AVM)执行。AVM1, 是执行以前版本的ActionScript的虚拟机, 今天变的更加强大的Flash平台使其可能创造出交互式媒体和丰富的网络应用。然而, AVM1却在挤压着开发者们的极限 他们的项目现在到了要求它变革的时刻了。ActionScript 3.0 带来了一个更加高效的ActionScript 执行虚拟机AVM2, 它将彻底的脱胎换骨于AVM1 。 它将意味着, ActionScript 3.0执行效率将比以前的ActionScript执行效率高出至少10倍。新的AVM2 虚拟机将会嵌入于Flash player8.5当中, 它将成为执行ActionScript的首先虚拟机。当然旧的AVM1将继续嵌入在Flash player8.5当中，以兼容以前的ActionScript。我们需要ActionScript 3.0 提供一个先进的, 与编程模型一致的, 服从业界标准的，以及表现将以一个数量级大于我们过去的执行效能。虽然ActionScript 3.0 代表着Flash平台一个新的编程模型,它也将会是一个让开发者熟悉的基础的面向对象的编程语言。ActionScript 3.0 包括二部分: 核心语言和Flash player API 。核心语言用于定义编程语言的结构, 譬如声明, 表示, 条件, 循环, 和类型 。Flash player API是由一系列精确定义Flash player功能的类组成。ActionScript 3.0 拥有尽可能的挖掘出计算机剩余性能的新特点。规则表示支持使操作性更加强大的XML。 ECMAScript for XML (E4X) 使得XML 成为通用数据类型, 将大大地简化XML 处理。新的Display List API将使虚拟对象更加的协调一致。 规范化的DOM 事件模型使得那些对象的表示和响应结合的更加强劲。当然这些只是ActionScript3.0许多新的体验当中的一部分。ActionScript 3.0 的出现是ActionScript 2.0 的核心语言方面融入ECMAScript 以遵守其标准和引入新的改进的一些功能区域的结合。所有这些特点在ActionScript 3.0 语言参考中都有详细的介绍和讨论。应用ActionScript 2.0时, 许多表面上“完美无瑕”的运行错误无法得到记载。这使得Flash player无法弹出提示错误的对话框, 就像JavaScript语言在早期的浏览器中所表现的一样。也就是说, 这些缺少的错误报告使得我们不得不花更多精力去调试ActionScript 2.0程序。ActionScript 3.0 引入在编译当中容易出现的更加广泛的错误的情形, 改进的调试方式使得能够健壮地处置应用项目当中的错误。提示的运行错误提供足够的附注（例如出错的源文件）和以数字提示的时间线, 帮助开发者迅速的定位产生错误的位置。在ActionScript 2.0中，运行错误的注释主要提供给开发者一个帮助，所有的帮助方式都是动态的。而在ActionScript且是3.0中, 这些信息将被保存到一定的数量，Flash player将提供时间型检查以提高系统的运行安全。这些信息将记录下来用于监视变量在电脑中的运行情况, 以使得开发者能够让自己的应用项目得到改进以减少对内存的使用。ActionScript 3.0 将引入密封的类的概念。在编译时间内的密封类拥有唯一固定的特征和方法，其它的特征和方法不可能被加入。这使得比较严密的编译时间检查成为可能，从而创造出健壮的项目。因而它当然可以提高对内存的使用效率，因为不需要为每一个对象实例增加内在的杂乱指令。当然动态类依然可以使用，只要声明为dynamic的关键字即可。在ActionScript 3.0中事件处理变的更加简化，这归功于它的嵌入式代理方式。而在ActionScript 2.0中， 方法关闭后并没有记住什么对象事例引用了它们，当调用已经关闭的方法时将导致意想不到的后果。 ActionScript 3.0 特点之一是全面支持ECMAScript中的 XML (E4X), 最新的规范标准为ECMA-357 。E4X 提供一种自然， 流利的语言使得能够快速的构造XML 。而不是像传统XML的解析接口一样，E4X使得XML成为通用的数据类型。Namespaces 是一种创新新机制用以控制声明的可见性。 Namespaces 与传统通过指定类型用以控制声明(公开的, 私有的, 保护的)是相似的 。他们本质是通过自定义路径, 能够使用你所选择的名字。Flex, 例如, 使用一个“mx_internal” 命名空间为它的内部数据来源。命名空间使用统一的资源标识符(URI)以避免冲突 ,当与E4X一起使用时同样可以使用XML命名空间。.ActionScript 2.0用Number定义有单精度数字类型和双精度浮点数字类型。受欢迎的新的“int”数据类型将加入到ActionScript3.0当中。“int”是一个32位有符号整型数据类型， 使得CPU将提高ActionScript代码中处理整数运算的能力。“int”将提高循环运算以及几乎其它不带小数点的整数运算。另一个新的数据类型是“uint”， 一个与“int”相似的无符号32位整数型 。“uint” 主要用于表现像“索引颜色”和其它一些“int”所不能很好工作的领域。拥有 ActionScript 3.0, 开发者可能达到高效执行效率和表现统一的平台。1.5. CSS介绍在设计界风靡一时的畅销书the ZEN of CSS design中，（本文参考书目15,中文名：CSS禅意花园）作者通过一种绝妙的创意，不可思议的用一张完全一样的Html页面收集到来自全世界成千上万种另人拍案的网页设计。这便是对CSS最高境界的诠释使用更少的代码，而得到高得多的效率和灵活性，人们可以通过CSS技巧创造极富想象力的作品，并随时进行更新。标准的定义中，CSS是Cascading Style Sheets（层叠样式表单）的简称。更多的人把它称作样式表。顾名思义，它是一种设计网页样式的工具。而采用CSS+DIV进行网页重构相对与传统的TABLE网页布局来说，具有以下3个显著的优势4：(1) 表现和内容相分离：将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。(2) 提高页面浏览速度：对于同一个页面视觉效果，采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。(3) 易于维护和改版：你只要简单的修改CSS文件就可以重新设计整个网站的页面。1.6. JavaScript介绍JavaScript是一种由Netscape的LiveScript发展而来的面向对象的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证，由于网络速度相当缓慢,只有28.8kbps，验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了JavaScript，提供了数据验证的基本功能。JavaScript是适应动态网页制作的需要而诞生的一种新的编程语言，如今越来越广泛地使用于Internet网页制作上。 JavaScript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用JavaScript可以开发交互式Web网页。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容5。运行用JavaScript编写的程序需要能支持JavaScript语言的浏览器。Netscape公司 Navigator 30以上版本的浏览器都能支持 JavaScript程序，微软公司 Internet Explorer 30以上版本的浏览器基本上支持JavaScript。微软公司还有自己开发的JavaScript，称为JScript。 JavaScript和JScript基本上是相同的，只是在一些细节上有出入。 JavaScript短小精悍， 又是在客户机上执行的，大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。1.7. 网站开发主要环节介绍....1.7.1. 网站风格/创意6网站是特殊的信息载体，它与电视、广播、报纸、书籍截然不同，它甚至兼顾了这些媒体所有的特点。网站承载的信息量很大，刷新速度快，信息储存完整，俨然是一个信息仓库。它远远超过精练信息的平面广告，也不是流动的电视广告，更不是印刷质量差的油墨报纸，它是仓库，像是杂志，也像是有声、有动画的图书馆。网站就好像杂志，不同的信息类型会产生不同的“气韵”，这种感觉就是风格。设计的手法有很多，即使采用相同的设计思路，选材不同也会形成一南一北的效果。信息是形成网站“气韵”的基础，风格创意围绕信息来展开。风格(style)是抽象的。是指站点的整体形象给浏览者的综合感受。整体形象包括站点的版面布局，色彩，字体，浏览方式等。就像我们觉得迪斯尼是生动活泼的而IBM则是专业严肃的。每一个网站都会给人们留下的不同感受。这里我们需要做到的是根据网站的定位做出网站特有的风格。除此以外，我们还需要在风格同一上需要把握一下，其实这个风格的统一和传统的印刷出版物没什么区别。网页上所有的图像、文字，包括像背景颜色、区分线、字体、标题、注脚什么的，都要统一风格，贯穿全站。这样子用户看起来舒服、顺畅，会对网站留下一个“很专业”的印象。而企业网站设计师往往就缺乏这一点，没有全局意思。创意，所谓创意就是不拘一格？某些设计师在做创意的时候大费周章，做出来确实不可否认很有创意、很别致，但往往对于行业网站的客户为什么不能接受呢？此时不要太责怪客户的不识货，应该反思，抓住客户的需求。其实做行业网站不需要很多大的创意，也不要浪费过多的时间去追求如何个性、如何好看，我们只需要一点小小的创意贯穿全站，也许会使网站更生动更具有吸引力、更有思想。网站创意，不仅是依靠色彩、图片、格局和文字等视觉元素自身的独具创新。重点是视觉元素在页面中达到统一，保持一致的识别体系。网站的特有风格还包括信息内容的规划管理、互动程序的支持和使用方法等其他非视觉方面。1.7.2. 网站LOGO图1-3：优秀网站LOGO设计. 名词解释翻开字典，我们可以找到这样的解释：“logo: n.标识语 ”。在电脑领域而言，LOGO是标志、徽标的意思。Internet之所以叫做“互联网”，在于各个网站之间可以联接。要让其他人走入你的网站，必须提供一个让其进入的门户。而LOGO图形化的形式，特别是动态的LOGO，比文字形式的链接更能吸引人的注意。在如今争夺眼球的时代，这一点尤其重要。就一个网站来说，LOGO即是网站的名片。而对于一个追求精美的网站，LOGO更是它的灵魂所在，即所谓的点睛之处。一个好的LOGO往往会反映网站及制作者的某些信息，特别是对一个商业网站来话，我们可以从中基本了解到这个网站的类型，或者内容。在一个布满各种LOGO的链接页面中，这一点会突出的表现出来。想一想，你的受众要在大堆的网站中寻找自己想要的特定内容的网站时，一个能让人轻易看出它所代表的网站的类型和内容的LOGO会有多重要。 网站logo的设计过程中一般有以下三种思路：(1) 直接以网站网址作为logo。(2) 根据网站提供的产品/服务特点展开logo设计。(3) 以传递网站运营商的经营理念为特色。 LOGO的国际标准规范：为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：(1) 88*31 这是互联网上最普遍的LOGO规格，本站所收集的均是这种大小。(2)120*60 这种规格用于一般大小的LOGO。(3) 120*90 这种规格用于大型LOGO。1.7.3. 视觉流程人们在阅读某种信息时，视觉总有一种自然的流动习惯，先看什么，后看什么，再看什么。在心理学的研究表明，一般的浏览习惯是从上到下、从左到右，在一个平面上，上松下稳而压抑。同样，平面的左松右稳。所以平面的视觉影响力上方强于下方，左侧强于右侧。这样平面的上部和中上部被称为“最佳视域”，也就是最优选的地方。在网页设计中一些突出或推荐的信息通常都放在这个位置。当然这种视觉流程只是一种感觉并非一种固定的公式，只要符合人们的心理顺序和逻辑顺序，就可以更为灵活地运用，在网页设计中，灵活而合理地运用直接影响到传达信息的准确与有效性。1.7.4. 网页框架与布局(1) 分辨率。网页的整体宽度可分为三种设置形式：百分比、象素、象素+百分比。通常在网站建设中以象素形式最为常用，行业网站也不例外。我们在设计网页的时候必定会考虑到分辨率的问题，科技发展到现在，我们通常用的是1024*768和800*600的分辨率，现在网络上很多都是用到778个象素的宽度，在800的分辨率下面往往使整个网页显得很压抑，有种不透气的感觉，其实这个宽度是指在800*600的分辨率上网页的最宽宽度，不代表最佳视觉，如果偿试将宽度改变为760770象素，不管在1024还是800的分辨率下都可以达到较佳的视觉效果。(2) 空间的合理利用。很多的网页都具有一个特点，用一个字来形容，那就是“塞”，它将各种各样的信息如文字、图片、动画等不加考虑的塞到页面上，有多少挤多少，不加以规范，导致浏览时会遇到很多的不方便，主要就是页面主次不分，喧宾夺主，要不就是没有重点，没有很好的归类，整体就像各大杂烩。让人难以找到需要的东西。有的则是一片空白失去平衡，也可以用个“散”字来形容。并非要把整个页面塞满了才不觉得空，也并非让整个页面空旷才不觉得满，只要合理的安排、有机的组合，使页面达到平衡，即使在一边的部分大面积留空，同样不会让人感到空，相反这样会给人留下广阔的思考空间，给人回味又达到了视觉效果。(3) 文字编排。在网页设计中，字体的处理与颜色、版式、图形化等其他设计元素的处理一样非常关键。文字图形化是将文字用图片的形式来表现，这种形式在页面的子栏目里面最为常用，因为它具有突出的效果，同时又美化了页面，作为页面的图形元素之一，使页面更加人性化加强了视觉效果。是文字无法达到的。对于通用性的网站弊端就是扩展性不强。如果将个别文字作为页面的诉求重点，则可以通过加粗、加下划线、加大号字体、加指示性符号、倾斜字体、改变字体颜色等手段有意识地强化文字的视觉效果，使其在页面整体中显得出众而夺目。这些方法实际上都是运用了对比的法则。如果在更新频率低的情况下也可以使用文字图形化。 1.7.5. 网站配色7(1) 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，产生新的色彩，用于网页。这样的页面看起来色彩统一，有层次感。(2) 用两种色彩。先选定一种色彩，然后选择它的对比色再进行微小的调整。整个页面色彩丰富但不花哨。(3) 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿；或者土黄，土灰，土蓝。也就是在同一色系里面采用不同的颜色使网页增加色彩，而又不花，色调统一。这种配色方法在网站设计种最为常用。(4) 使用灰色。灰色在网页设计中又称为“万能色”，其特点是可以和任何颜色搭配，在使用时把握量避免网页变灰。(5)彩色设计。在网页配色中，尽量控制在三种色彩以内，以避免网页花、乱、没有主色的显现。背景和前文的对比尽量要大，以便突出主要文字内容。1.7.6. 网站开发流程同一切工作一样，标准的流程可以帮助网站的开发更加的合理有效，在开发的过程中，遵循流程按部