1、毕业设计(论文)题目联信永益SPM2.0项目管理系统UI设计学院名称计算机科学与技术学院指导教师李望秀职称讲师班级08数媒01班学号20084100119学生姓名杨静2012年5月29目录摘要4关键词4第一章绪论51.1UI简介5第二章UI设计现状62.1软件开发业的界面设计现状62.2联信永益的软件开发在UI方面的现状及缺点7第三章软件界面设计基础83.1软件界面设计的前期准备工作83.2软件界面设计的原则93.3软件界面的规划103.3.1登陆界面的规划103.3.2应用界面的规划103.4色彩20第四章联信永益SPM2.0项目管理系
3、个人首页366.2.1效果图366.2.2关键代码366.3管理空间406.3.1管理空间-项目管理40效果图40关键代码416.3.2管理空间-部门管理4效果图4关键代码456.3.3管理空间-域账户管理4效果图4关键代码516.3.4管理空间-会议纪要管理5效果图5关键代码546.4信息空间576.4.1信息空间-项目汇总5效果图5关键代码576.4.2信息空间-部门汇总6效果图6关键代码626.5下载
4、空间666.5.1效果图666.5.2关键代码666.6顶部信息696.6.1效果图696.6.2关键代码70第七章总结与展望71参考文献72致谢73附件74联信永益SPM2.0项目管理系统UI设计摘要软件设计可分为两个部分：编码设计与UI设计。编码设计大家都很熟悉，但是UI设计还是一个很陌生的词，即使一些专门从事网站与多媒体设计的人也不完全理解UI的意思。UI的本意是用户界面，是英文User和interface的缩写。从字面上看是用户与界面2个组成部分，但实际上还包括用户与界面之间的交互关系。界面设计不是单纯的美术绘画，他需要定位使用者、使用环境、使用方式并且为最终用户而设计，是
5、建立在科学性之上的艺术设计。检验一个界面的标准既不是某个项目开发组领导的意见也不是项目成员投票的结果，而是终端用户的感受。本文结合联信永益SPM2.0项目管理系统实例研究如何设计高用户体验的软件UI，并对软件界面的设计原则、方法、及过程进行分析。关键词UI;界面设计;后台管理系统Abstract:Softwaredesigncanbedividedintotwoparts:codedesignandUIdesign.Codedesignwearefamiliar,buttheUIdesignisstillaverystrangeword
6、,specializinginwebsiteandmultimediadesignisnotentirelyunderstandthemeaningofUI.TheintentionoftheUIistheuserinterfaceistheabbreviationoftheEnglishUserinterface.Literallytheuserandtheinterfacecomposedoftwoparts,butinfactalsoincludestheinteractionbetween
7、userandinterface.Keywords:UI,Interfacedesign,BackgroundManagementSystem第一章绪论1.1UI简介现今随着计算机硬件的飞速发展，过去的软件程序已经不能适应用户的要求。软件产品在激烈的市场竞争中，仅仅有强大的功能是远远不够的，不足以战胜强劲的对手。幸运的是在国内一些高瞻远瞩的民族企业已经开始意识到UI给软件产品带来的巨大卖点了，例如金山公司的影霸、词霸、毒霸、网标，由于重视UI的开发与地位，才使得金山产品在同类软件产品中首屈一指。联想软件的UI部门积极开展用户研究与使用性测试，将易用与美观相结合，推出的双模
8、式电脑、幸福系列等成功UI范例，为联想赢得全球消费PC第三的称号等等、等等.实践证明，各商家只要在产品美观和易用设计方面很小投入，将会有很大产出。其投入产出比，要比在功能领先性开发上的投入大得多。GUI(GraphicalUserInterface)是一种结合计算机科学、美学、心理学、行为学，及各商业领域需求分析的人机系统工程，强调人机环境三者作为一个系统进行总体设计。对大多数人来说，用户界面就是软件本身。所以，掌握用户界面设计的技巧与技术是让软件走向市场的最直观因素。界面是一个窗口。界面设计是开发中最重要的方面，并将涉及到整个开发队伍。对于应用软件来说，一个基本现实就是：用户界面是面向
9、用户的。用户需要的是开发者开发的应用软件满足其需求，并且易于使用，用户界面走到今天真是千锤百炼，要做到易用就更是难上加难。太多的开发者自以为是艺术天才，他们不去尽力遵循用户界面设计标准，或花精力使得产品好用；相反，他们错误地认为编写更灵巧的代码或是使用一套确实有趣的颜色方案才是重要的事。Constantine(1995)指出，好的用户界面使得人们不用阅读用户手册或接受培训就能使用应用软件。对于软件公司来说，软件产品就是他们的商品，而软件界面就是他们产品的外观，界面的美观与否，直接关系到了软件产品的营销成败。第二章UI设计现状2.1软件开发业的界面设计现状人机交互和计算机用户界面刚刚走过基于
10、字符方式的命令语言式界面，目前正处于图形用户界面时代。用户界面(UserInterface)是当前用户界面的主流，广泛应用于各档台式微机和图形工作站。当前各类图形用户界面的共同特点是以窗口管理系统为核心，使用键盘和鼠标器作为输入设备。窗口管理系统除基于可重叠多窗口管理技术外，广泛采用的另一核心技术是事件驱动(Event-Driven)技术。图形用户界面和人机交互过程极大地依赖视觉和手动控制的参与，因此具有强烈的直接操作特点。在用户把软件买回去后，他们和企业的联系，以及该企业形象在客户眼中的表现，很大一部分是通过软件的界面来传达的，美观友好的用户界面对于宣传企业文化，给客户灌输企业理念，甚至于对
12、内软件成功的例子了，从金山词霸3.0到金山词霸2001的变化堪称经典。著名的网页动画制作软件Flash从3.0到4.0，仅仅修改了图标和窗体，立即大为增色。现今世界上成功的软件公司都非常重视软件界面的美化设计，因为他们深刻地知道，在激烈的市场竞争中，仅仅有强大的功能是远远不够的。设计良好的界面能够引导用户自己完成相应的操作，起到向导的作用，同时界面如同人的面孔，具有吸引用户的直接优势。设计合理的界面能给用户带来轻松愉悦的感受和成功的感觉，相反由于界面设计的失败，让用户有挫败感，再实用强大的功能都可能在用户的畏惧中付诸东流。国内软件业在软件产品的人机交互界面设计水平发展上日显滞后，这对于提高产业
15、不能软件的界面与软件的主题相差十万八千里，假如一个电脑硬件管理系统软件的界面上尽是和电脑无关的东西，比如花草，山水，这样，就不能反应该软件的主题与功能，让人丈二和尚摸不着头脑，这样，这个软件的界面就是失败的。（二）美工作为界面美化的主要人员，不但拥有艺术设计、包装设计的才能，还应该穿插整个项目，给界面程序设计人员提出系统参考意见。1：软件设计前期，美工参与需求了解，分析同类软件界面有缺点，提出主色调、典型界面风格、以及构思整个美术包装等。2：界面原型设计过程中，与开发人员共同修改、商榷最终表现样式，以及确立UI标准。3：用户调研。拟定需求，初步建立界面原型。4：任务分析。根据任务的复杂性
16、、难易程度等，详细分解任务动作，进行合理分工，确定适合于用户的交互方式。4：程序开发过程中，提供标准风格的资源文件（icon,cur,bmp等），并总结出统一风格的资源的设计过程，形成规范文档。（三）确定界面根据用户的自身特性以及系统任务、环境、成本效益，确定量为适合的界面类型。这时，在着手进行软件界面设计前，须在心里大致有个谱，对要设计的软件的功能有了解，同时对该软件的界面设计有成形的构想。3.2软件界面设计的原则（一）一致性原则要求软件的概念模式、显示方式等的一致性，在类似的情况下具有一致的操作序列：如在提示、菜单和帮助中产生相同的术语；具体是指在不同的应用系统中都具有相似的界面外观、布
17、局、相似的交互方式以及相似的信息显示等。界面设计保持高度一致性，用户不必进行过多的学习就可以掌握其共性；还可以把局部的知识和经验推广使用到其他场合。人机界面设计的一致性要求对构成易学易用是极为重要的。无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。这样得到的好处：1：使用户使用起来能够建立起精确的心里模型，使用熟练了一个界面后，切换到另外一个界面能够很轻松的推测出各种功能，语句理解也不需要费神理解2：降低培训、支持成本，支持人员不会行费力逐个指导。3：给用户统一感觉，不觉得混乱，心情愉快，支持度增加（二）合理利用空间，保持界面的简洁简单易用就是好。不
18、要将界面设计的过于复杂，那样会影响程序的快捷使用，人为降低了程序的运行效率。界面设计最重要的就是遵循美学上的原则简洁与明了。一个软件，特别是应用软件，其界面不需要很华丽。太过华丽花哨的界面容易让人的眼睛疲惫，让人心浮气躁，把注意力过多的集中到花哨的图案和颜色上，从而影响软件的可信度以及实用性。因此，界面设计需在空间使用上，合理的布局和设计，在简洁的同时让人的眼球得到艺术欣赏，并且能感觉放松，突出软件的性能，使界面设计成为软件性能一个出色的辅助项目但是却不喧宾夺主，始终作为一个衬托，让软件界面更友好，更能为用户所喜爱和接受。（三）从用户的观点考虑。一个软件界面是用来方便用户与软件的交互的，因此，
19、要从用户的角度去考虑和设计软件界面，想他们所想，做他们所做，并且界面中要使用能反应用户本身的语言，而不是设计者的语言以及使用习惯。（四）记忆负担最小化。人脑不是电脑，在设计界面时必须要考虑人类大脑处理信息的限度。人类的短期记忆极不稳定、有限，24小时内存在25%的遗忘率。所以对用户来说，浏览信息要比记忆更容易。一个画面的信息量不可过于复杂和庞大。（五）清楚，和谐的排列。保证界面的协调性。控件摆放位置要合理、均衡，让人便于浏览和使用。不要给人们带来“前重后轻、左宽右窄”的不良感觉，要将重要的控件摆放在明显位置，这样才能突出重点。此外，一定要符合人们的日常使用习惯。同时，背景图案和颜色的设计要帮助
21、界面上的其他按钮易于区分，含义不能雷同。5菜单的字体、大小通常为宋体、五号。6菜单中的命令长度一般为25个字符。7菜单的命令格式一般为“动词名词”，即“操作方法操作对象”，或者为“名词名词”，即“所有者属性”等等。8主菜单的宽度要接近，每个菜单的字数能相同最好。（2）菜单组织1菜单的形式有下列几种：下拉式菜单，线状序列菜单，树状结构菜单，选项式菜单，弹出式菜单。2菜单可以是文字式，图标式或图标文字混合式。3主菜单为单排布置。4菜单前的图标不宜太大，与字的高度保持一致最好。5菜单和工具条要有清楚的界限，菜单要求凸出显示，这样在移走工具条时仍有立体感。6如果该命令菜单会引出一个
23、。15子菜单在语义逻辑上不应该同属于几个主菜单。16不要在同一菜单层次上应用相同或相似的词汇。17下拉式菜单深度一般要求最多控制在三层以内。18菜单前的图标能直观的代表要完成的操作。19当菜单是层次的，则应该是循环式的网络结构，用户能从上一级菜单到下一级菜单，也能从下一级菜单返回到上一级菜单，切忌采用非循环的结构。20允许跳转到前层的菜单和主菜单。21常用菜单要有命令快捷方式，不常用的可以没有快捷键。22应该在所有子菜单中都提供访问键（菜单项中带有下划线的字母，称为菜单的访问键）。23正在起作用的命令菜单应该在菜单的表现形式上有所不同，如菜单下凹或菜单前打勾等等。24在当前
25、则1菜单通常采用“常用主要次要工具帮助”的位置排列，符合流行的Windows风格。2菜单命令在使用时如果有先后顺序，应该按使用先后次序排列。3没有顺序要求的菜单项按使用频率和重要性排列，常用的菜单排列在前面，不常用的靠后放置；重要的放在开头，次要的放在后边。4下拉菜单要根据菜单的含义进行分组，组与组之间有明显的分隔形式要，比如用横线隔开。5下级菜单对于上级菜单应该有隶属关系。6广而浅的菜单树优先于窄而浅的菜单树。7如果菜单选项较多，应该采用加长主菜单的长度而减少子菜单深度的原则排列。（二）按钮的规划（1）按钮的字体和大小。按钮的字体在应用软件中多用宋体，但是具体情况应该根据该软件
26、界面的整体风格来定。比如界面的风格比较古典，这时则可以采用隶书的字体。按钮的字号要看按钮的大小来确定。字的高度为按钮高度的1/21/3为佳，同样，字的宽度为按钮宽度的1/21/3比较好看。（2）按钮的颜色。按钮的颜色最好与整个界面的主色调统一。按钮的颜色不宜用和界面主色调不一致的色彩。如图1。（图1）但是，设计是灵活的，并不是说按钮的颜色一定要与主色调一模一样，也并不是说按钮的颜色一定要与主色调相同，一切都要视具体设计情况与设计者的设计思路来看。（3）按钮的风格。在应用软件中，比较流行的按钮风格有APPLE公司的水晶按钮，WINXP风格的按钮以及像素按钮。（图2）按钮的风格取决于整个软件界
28、的图案。如图3。（图3）软件界面左方是个高压电网的图案，让人一看了，就知道这个软件的性质，就知道它是一个与电力系统有关的软件，这样，这个图案就起到了画龙点睛的作用。同样，一个图书管理系统的软件，就要在界面上显示与图书类有关的东西，不能天南地北，不着边际的选择图案。如下面两幅图，我们来比较一下两者。（图4）（图5）两幅图都是为图书管理系统做的界面，但是图4的图案选择的是用一幅翻开的书的图案和一个显示器的图案。书很明显的表示了该软件的功能与书籍有关，而显示器则增加了一些现代的感觉，使整个画面看起来不至于过于休闲，显示器中是堆成山的书和一幢建筑，这正好显示了该软件与图书馆的功能类似，它是现实中的图书
30、最好能准备几套不同的设计方案，以便在这个阶段能有多种选择，而从中选择一个最好的方案。准备好需要进行处理的图案后，需要把这些图案柔和起来形成一个和谐的整体，或者需要对图片进行处理，使其具有更丰富，更立体化的效果，要去其粗，取其精，使其能更好的体现软件的主题。如下面的图6。（图6）图6是未经过处理的图做的图书管理系统软件的界面。可以看到图上有一杯咖啡和一盘面包，虽然从色彩上来说，这幅图更加丰富，但是，咖啡和面包和图书管理系统没有关系，它们的出现只会让人觉得奇怪，整个图案看起来也过于休闲，与软件的主题相去甚远，那这幅图的选择也就失败了。但是这个图中的书报却是做这个软件界面所需要的，因此，取其书报的部
31、分，而将其他的部分隐去，突出书的重点，那这幅图又变得可用了。任何设计都是如此，有时候需要从很多幅不同的图上选取部分来综合，这些工作则需要设计人员有丰富的联想和熟练的技术。也可以自己去拍照，以使设计更加漂亮，更符合自己的心意。（3）图案的其他设计效果。选择好了图案，并将其处理成了一个可用的整体，图案规划的工作却仍然没有完成。一张单一的图，看起来是平面的，这样，就无法突出重点，图案也没有层次，让人在视觉上没有远近之分，因此，还需要对图案进行修饰和润色。如图7和图8。（图7）（图8）两幅都是为种质资源库做的软件界面设计。首先来观察图7。图案的选择是中国的地图作为前景，而用连绵的崇山峻岭的图片来作为背
32、景。图案的选择没有问题，而图案的处理也已经完成，中国地图经过处理，采用黄色和蓝色来突出西南这块地方，表示了该软件面向的范围是中国西南地区。然而，整个画面看起来的感觉是将一幅图压在了一块玻璃下面，平淡而没有重点。地图左方的空间过于空，让人觉得左轻右重，界面看起来空洞。这时，就需要对它进行修饰，让它更丰富，有轻有重，让人看起来不那么无味。再来看图8。可以看到，中国地图的边缘加上了光圈，使它看起来有立体的感觉，同时，边缘的柔和让整个画面看起来也更柔和。背景图片的左上方加了一点红色，相比较前一幅图，这幅图则更朦胧，更有美感，而且画面的颜色也不像前一幅图一般清淡，它更鲜亮。而在左方，加上了几种动植物的图
33、片，这些图片让界面看起来丰富了不少，而且反应了该软件的主题野生动植物保护。同样，对标题字和左下的字也进行了修饰，画面看起来就和谐多了。比较图6和图4，也可以发现，图案修饰的重要性。图6只是一张整齐的图片，基本上没有修饰。这个界面看起来更像是一个相框，把图片框是里面，让人觉得狭隘，没有可发展的思维余地。比图4，在图4中，书页超出了框的范围，延伸到外面，而且书页有好几个影子，这样，看起来，画面就马上立体许多，整个界面的构图看起来也更漂亮。（四）图标的规划。图标是每个软件界面中必不可少的一部分。它的比例虽小，但是却一点马虎不得，一个优秀的软件界面，小小的图标，往往能起到画龙点睛的作用，成为一个亮点。
35、成美丽的页面。根据色彩对人们心理的影响，合理地加以运用。（一）色彩的感情会因其色相、明度、彩度的不同，表现不同的色彩感觉。我们面对这些色彩也会产生不同的心理影响。按照色彩的记忆性原则，一般暖色较冷色的记忆性强；色彩还具有联想与象征的物质，如红色象征血、太阳；蓝色象征大海、天空和水面等。所以设计出售冷食的虚拟店面，应使用淡雅而沉静的颜色，使人心理上感觉凉爽一些。（二）冷色与暖色蓝色、蓝绿、蓝紫等色，予人凉爽的感觉，称为冷色。而红、橙、黄等予人温暖的感觉，称为暖色。明度高的色彩较凉爽，明度低的色彩较温暖。如图10和图11。冷色调（图10）暖色调（图11）（三）色彩的运用由于国家和种族宗教和信
36、仰的不同，以及生活的地理位置文化修养的差异等，不同的人群对色彩的喜恶程度有着很大的差异。如：儿童喜欢对比强烈个性鲜明的纯颜色；生活在草原上的人喜欢红色；生活在闹市中的人喜欢淡雅的颜色；生活在“沙漠”中的人喜欢绿色。在设计中要考虑主要用户群的背景和构成。如：流行音乐软件的面向用户群大多是年轻人，宜采用鲜亮的颜色，来体现年轻和活力；而冠心病调查软件的用户群一般是中老年人，则应采用柔和的颜色，让用户觉得宁静平和。色彩的搭配具有极强的目的性，是一个非常具体的、创造性的审美过程。黑、白、灰最能体现优雅、理性、高贵、神秘类型的气质，将此三色艺术化搭配，简单中蕴藏着无穷变化，更具意想不到的惊人效果。常用的
37、多色相配色以少量色种为基础，按“大统一协调、小对比”的规则配色。以相同或相近色相加、以明度和纯度的变化体现区别的弱对比配色系列，具有统一协调、柔和素雅的效果，但缺少动感，易显得单调平淡。中对比配色系列和强对比色系列的共同点是具有不同程度的鲜明醒目、兴奋热烈的视觉效果，但也不易统一协调，容易引起视觉疲劳。色彩高明度格调的作品会形成优雅明亮的氛围，具轻松温和明快的效果；中明度格调的作品中，中明度、高纯度的配色饱满有力，中明度、中纯度的配色则显得含蓄庄重；低明度格调的作品具有沉静庄重、严肃忧郁、文弱内向等效果。色彩纯度越高，颜色越鲜艳华丽，效果越活跃热烈；纯度越低，色彩越灰暗迷朦，效果越朴素沉静，甚
38、至有软弱内向的感觉。一般而言，高明度和纯度的色彩体现暖、轻、动、近、大、兴奋、华丽等情感效应；反之，则体现出冷、重、静、远、小、沉静、质朴等情感效应。在形象设计中，要充分利用色彩的情感效应来调节改善视觉效果和展现人物个性；利用膨胀收缩、远近大小等错觉来调整体型、脸型的轮廊以掩饰人物形象的缺陷，突出其优美之处。如下图的软件截图。（图12）（图13）（图14）上面三幅图为同一个软件的界面，但是颜色各不相同。图12是软件的初始颜色。蓝色是冷色调，该软件作为一款播放器，有种平静，酷的感觉。而图13的紫色则给人一中诡异不感觉，觉得很不舒服，比较刺眼。图14则是采用红色这个暖色调做主色调，第一眼看上去，就
39、觉得心绪不宁，让人心浮气躁，而且容易让人视觉疲劳。第四章联信永益SPM2.0项目管理系统UI设计语言简介4.1Html语言4.1.1Html语言特点HTML（HyperTextMark-upLanguage）即超文本标记语言，是WWW的描述语言。html是在sgml定义下的一个描述性语言，或可说html是sgml的一个应用程式，html不是程式语言，它只是标示语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点
41、编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如MicrosoftWord记事本写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.一个HTML文档是由一系列的元素和标签组成.元素名不区分大写.HTML用标签来规定元素的属性和它在文件中的位置，HTML超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。下面是一个最基本的html文档的代
42、码:11.html-开始标签-一个简单的HTML示例|头部标签--|欢迎光临我的主页|||文件主体|这是我第一次做主页|||--结尾标签在文档的最外层，文档中的所有文本和html标签都包含在其中，它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的Web浏览器都可以自动识别HTML文档，并不要求有标签，也不对该标签进行任何操作，但是为了使HTML文档能够适应不断变化的Web浏览器，还是应该养成不省略这对标签的良好习惯。是HTML文档的头部标签,在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标记,用以说
43、明文件的标题和整个文件的一些公共属性。和是嵌套在头部标签中的，标签之间的文本是文档标题，它被显示在浏览器窗口的标题栏。标记一般不省略，标签之间的文本是正文，是在浏览器要显示的页面内容。上面的这几对标签在文档中都是唯一的，HEAD标签和BODY标签是嵌套在HTML标签中的。4.1.2Html的发展历史HTML是万维网文档发布和浏览的基本格式。它具有很多特点，如独立于平台的格式、结构化设计，特别是超文本链接，这些特点使它成为万维网较好的文档格式。一.HTML的起源HTML作为定义万维网的基本规则之一，最初由蒂姆本尼斯李（TimBerners-Lee）于1989年在CERN（Conseil
44、EuropeenpourlaRechercheNucleaire）研制出来。HTML的设计者是这样考虑的：HTML格式将允许科学家们透明地共享网络上的信息，即使这些科学家使用的计算机差别很大。因此，这种格式必须具备如下几个特点：独立于平台，即独立于计算机硬件和操作系统。这个特性对各种受从是至关重要的，因为在这个特性中，文档可以在具有不同性能（即字体、图形和颜色差异）的计算机上以相似的形式显示文档内容。超文本。允许文档中的任何文字或词组参照另一文档，这个特性将允许用户在不同计算机中的文档之间及文档内部漫游。精确的结构化文档。该特性将允许某些高级应用，如HTML文档和其他格式文档间
46、不支持不同大小字母的计算机上显示文档，则后一种风格会失败，而前一种风格可以在任何系统上（智能化地）显示。每个读者都以一种对其计算机有利的方式定义章节标题的外表，相应地，并以这种风格来规范所有的文本。这种结构的另一个特征是：按语义编码的文本可以由计算机更智能地自动处理。例如：如果每个章节标题都用ChapterTitle标志，再把章节号码作为一种属性，读者就可以要求只看第18章，SGML软件相应地会查找第18章标题和第19章标题，并抽取它们之间的所有内容。如果不用标准格式的字体和代码来标志文本的话，这个工作对计算机来说是无法完成的。SGML的一大优点是它的灵活性。SGML本身并不是一种格式，而是
48、学家们把自己需要的特性添加到HTML中，包括直接插入图形。当允许人们把位图、照片和图表放入到文档中以后，万维网的规模和使用出现了爆炸性的增长，第二年，HTML的发展很快。HTML的新标记不时地被一个又一个的浏览器引入，有一些新标记流行起来，而有一些又消失了。有些增加部分设计得很糟，很多甚至不遵从SGML规范。到了1994年年中，HTML几乎以失控的状态发展。在IETF（Internetengineeringtaskforce）主持下，1995年11月在瑞士日内瓦举行的第一次WWW会议上成立了一个HTML工作小组。它的主要任务是把HTML形式化成为一种SGMLDTD，称之为HTMLLe
49、vel2（HTML2.0，由本尼斯李最初设计的HTML被定义为Level1）。标准化之后，HTML就可以被安全地扩展到将来的各个级别的版本，从而利用了SGML的实质性能和它的格式化结构。尽管有关的各方从来没有取得完全一致的共识，但万维网联盟HTML工作组（worldwidewebconsortiumsHTMLworkinggroup）还是集中了1996年的万维网发展的成果，产生了HTML3.2版本。HTML4.0及其以后版本继承了以往版本的所有特点，并在以下几个方面有所发展：更加明确了文档的结构和表现形式上的区别，以鼓励使用格式表（stylesheet）来取代使用元素
50、和属性进行表现的方式。更加优良的表单（form）性能，加入了访问关键词（accesskey）、构建对称的表单控件能力、构建对称的下拉菜单控件的能力和动态标签（activelabel）。在文本描述的标记中包含对象。一种新客户端的文本包括在图像映射元素（mapelement），使得网页设计者可以集成文本和图像链接。可以将替代图像的文本包括在图像元素（IMGelement）中，也可以将图像映射（imagemap）包含到区域元素中（areaelement）。在所有元素中支持title和language两个属性。更多的表格属性，包括Caption、Columngroups和方
51、便的非可视信息（non-visualreading）的表现机制。4.1.3基于Html的UI设计过程用DreamweaverCS5创建html界面的方法很简单，首先是在本地新建站点，其次在用一些html标签放所需的控件，如命令按钮、单选钮、文本框、标签、图片框等。然后针对每个控件设定特定的Css样式来美化界面，最后制作好的界面在浏览器中预览，做适当调整即可。一般说来，用DreamweaverCS5创建html界面时，需要以下五步：1.建立网站站点在正式开始制作网页之前，最好先定义一个新网站，这是为了更好地利用站点窗口对站点文件进行管理，也可以尽可能的减少一些错误的出现，如路径出错，链接
53、件，如标签，标签等。3.div布局使用div确定标签的位置。4.css样式确定修改控件的Css样式。如width，height等。5.预览，修改。如图19所示。（图19）4.2Javascript语言4.2.1Javascript语言简介和特点Internet的迅猛发展，特别是WWW的日益普及很大程度上得益于网络上的超媒体信息。为了满足Web用户对信息资源无止境的渴求，开发者们在小断地扩允超媒体语言的能力。从静态文本到静态图像，从静态图像到动态图像，随后义加入了声音、影像、三维动画等。另一方面，我们已不满足于被动地浏览，而是希望服务方在主页中提供更多的交互性，以便我们自己也可以加入
54、Web游戏中。Java语言以及另外一此脚木语言(Script)的出现满足了服务方和用户方的这种要求。它们为Web内容开发者提供一种灵活简便的Web页面设计途径。其中，JavaScript在众多脚本语言中脱颖而出，被越来越多的Web作者认可和使用。比如，当我们进入某个主贝时，这个主页会弹出一个写有Cookies字样的提不框，让我们输入一些个人信息其实这就是JavaScript脚本在起作用。JavaScript是种基于对象的脚本语言，使用它可以开发Internet客户端的应用程序。JavaScript在HTML页面中以语句形式出现，并且可以执行相应的操作。有些人可能认为JavaScript是Java的子集，就像VBScript和VB的关系一样。实际上，JavaScript和Java在语言上没有什么直接关系，它也不是Sun公司开发的产品它是Netscape公司为了扩充NetscapeNavigator浏览器功能而开发的一种可以嵌入Web主页中的编程语言。早期称之为LiveScript,后来为了利用Java的功能同时借用它的流行性，把它改名为JavaScript1JavaScript是一种