第9讲+Web界面设计.ppt

1、第9讲 Web界面设计,2,本章内容简介,互联网上Web站点和页面的设计基础 Web站点的信息交互模型和结构 Web界面设计的基本思想和原则 Web界面设计的工具和技术 Web界面设计的可用性评估 一些典型的Web站点实例,3,9.1 Web基础,互联网是近年来对社会影响最大的技术进步,影响到人类生活的很多方面。 互联网已经成为全面支持多媒体，能在多种平台上运行的庞大信息服务系统。 互联网的应用范围也日趋扩大，被广泛用于商业办公、业务管理、购物娱乐等人类生活的各个方面，业已成为一种全球化社会现象。,4,9.1.1 Web的出现与发展,90年代初，瑞士日内瓦的欧洲核能研究中心分布在世界各地的科学

2、家需要高效率的通讯方式来进行彼此交流与分享信息。 该中心高能核理学家Tim Berners-Lee研究发展了万维网（World Wide Web，WWW）的雏形，目的是为了建立一个能够整合各种资源、文件及多媒体的系统，让使用者方便地取得不同媒体的资料。,5,WWW-环球信息网络空间,简单来说，WWW是建立在客户/服务器模型之上，构成的一个环球信息网络空间，主要使用： 超文本标记语言（Hypertext Markup Language，HTML） 超文本传输协议（Hypertext Transport Protocols， HTTP） 通过Internet把遍布世界各地的服务器连接起来，它能够提

3、供各种Internet服务，具有一致用户界面的信息浏览功能。,6,Web页面的发展趋势,Web的一个发展趋势，是图形Web页面的爆炸性发展。网上浏览中包括了大量使用的动态图形，使图形Web遍布网络的各个角落。 新一代Web信息描述标准XML，能更详尽地描述文档的结构信息，具有比HTML有更强大的功能，为Web的发展提供了强有力的支持。,7,9.1.2超文本与超媒体,超文本 （Hypertext） 是一种使用于文本、图形或计算机的信息的组织形式，是一种非线性的信息组织形式。它使得单一的信息元素之间相互交叉引用，这种引用并不是通过复制来实现的，而是通过指向对方的地址字符串来指引用户获取相应的信息。

4、,8,9.1.2 超文本与超媒体,超媒体 （Hypermedia） 利用超文本形式组织起来的文件不仅仅是文本，也可以是图、文、声、像以及视频等多媒体形式的文件。这些多媒体信息就构成了所谓的超媒体 。,9,9.1.3 Web界面设计问题的提出,Web界面设计是人机交互界面设计的一个延伸，是人与计算机交互的演变。 Web界面设计与站点外观直接相关 站点的界面外观是否友好直接关系到是否能吸引人的关注。 人性化的设计是Web界面设计的核心 如何根据人的心理、生理特征，运用技术手段，创造简单、友好的界面，是Web界面设计的重点。,10,9.2 Web信息交互模型,用来解释Web的人机界面性质的一个模型，

5、它提出网页是用户和知识之间的界面。 对于信息提供者来说包括信息的表达。 对于使用者来说则是信息的获取。 信息的表达与获取分别受到两者认知结构的制约。,11,Web信息交互模型,图 9-1 Web信息交互模型,12,Web信息交互模型,模型涉及到信息的三种类型 数据：当一条信息被反复、简单的提供时称为数据，比如机票价格。 复杂信息：而用来叙述事件时称为复杂信息，如多媒体信息。 过程性信息：在信息有明确目标，并相互作用时称为过程性信息，如在线练习、在线测试等。,13,Web信息交互模型,模型涉及到信息的两种特性 动态性：信息在不断的变化，具有动态性 比如股票价格、机票价格等是不断变化的。 一致性：

6、信息元素的组织方式具有一致性 信息元素总是通过一定的方式结合在一起，如通过讨论、说明，或根据电话号码、名字、数字等方式组织陈列。,14,9.3 Web信息设计模型,Web信息设计模型 是解释Web人机界面性质的另一个模型。 是一种研究网页的信息设计模型。 设计模型中要考虑到信息的两个方面 第一是应该呈现或略去什么信息。 第二个方面指的是信息该如何被表现 。,15,Web信息设计模型,16,WEB的三种设计空间结构模式,通路结构模式 说明要展示的关键问题，使用户更容易获取有用的信息。 如出版物中的索引、标题、摘要、概述等。 Web网站地图和各栏目标题等信息都属于通路结构。 兴趣结构 兴趣结构的目

7、的在于捕捉用户的注意力，并维持用户浏览网页的注意力。 执行结构 指学习和教育材料之间的一系列交互，尤其是基于计算机的交互。 在WEB中指描述学习和网页信息之间的交互。,17,9.4 Web站点的概念设计,概念设计涉及的工作： 分析、确定站点的目标和用途。 准确定义所建立Web网站及站点的规范。 事先建立好站点的架构和导航设计。 兼顾不同的浏览器。,18,9.4.1 站点架构和导航设计,站点结构 站点的结构可分为逻辑结构和物理结构: 逻辑结构描述文档间的关系，定义文档间的链接。 物理结构描述文档的实际位置及显示方式 。 超文本结构中最常用层次结构 层次型结构按信息的必要性来改变信息的显示方式。

8、根网页是站点的主页，层次以根网页开始。 用户深入站点时，选择趋向于越来越具体，直到找到目标或叶子网页。 层次结构通过深度和广度来描述。,19,9.4.1站点架构和导航设计,站点的导航设计 导航系统对访问者来说是路径指示系统。 站点访问者通过导航系统寻找需要的信息。 用户感觉到能以满意的方式找到所需信息时，导航系统才是合适的。 由于用户的差异，不可能实现完美的导航系统。,20,兼顾不同浏览器的设计,原因 站点浏览者可能使用不同类型和版本的浏览器。 以某一个浏览器的某一个版本为依据编写的网页程序，可能在其它的浏览器或其它版本上不能正常显示或运行。 方法 通过使用JavaScript等编程工具或功能

9、，探测用户浏览器的类型和版本等参数及对于某特定功能的支持情况，然后根据探测结果显示适用于特定浏览器的网页内容。 根据用户浏览器分布情况决定设计所面向的浏览器类别和版本。,21,9.5 Web界面设计所涉及的问题,Web界面设计中要考虑的基本问题包括： Web界面设计基本原则 Web界面规划,22,9.5.1 Web界面设计基本原则,了解浏览者的心理状态 内容与形式的统一 减少浏览层次 特点明确 统一整体的形象 Web界面设计的3C原则,23,9.5.1 Web界面设计基本原则,1了解浏览者的心理状态 从心理学的角度分析浏览者的心理状态，有助于网页页面的设计。 在单击“退回”按钮之前有三秒钟而且

10、只有三秒的等待。 必须迅速地把有趣和有吸引力的东西显示出来。,24,9.5.1 Web界面设计基本原则,2内容与形式的统一 内容指的是Web网站的信息、数据及文字内容等. 形式指的是网页设计的版式、构图、布局、色彩以及它们所呈现出的风格特点等。 网页的形式是为内容服务的，但本身又有自己的独立性和艺术规律。 网页设计的目的就是为了使网页更加形象、直观，更易被观众所接受。 不同内容的网页要求用不同的设计形式。,25,9.5.1 Web界面设计基本原则,3减少浏览层次 应尽量把网页的层次简要化，力求以最少的点击次数链接到具体的内容。 在主页的访问率为100人次的情况下，下一页的访问率降到30到50人

11、次。 网页的层次越复杂，实际内容的访问率也将越低，信息也就越难传达到读者的手里。,26,9.5.1 Web界面设计基本原则,4特点明确 利用相应逻辑结构来有序组织、开发出一个页面设计原型，进行测试，逐步精炼此原型，形成明确的特点 特色鲜明的Web网站是精心策划的结果，只有独特的创意和赏心悦目的网页设计才能在一瞬间打动它的浏览者 应清楚地了解Web网站用户的基本情况，从而能有的放矢，挑选关键信息,27,9.5.1 Web界面设计基本原则,5统一整体的形象 Web网站标识以及网页设计标准确定后，应尽量地应用到每一页页面上，使浏览者可以确定当前所浏览的网站，并且给浏览者留下深刻而统一的印象。,28,

12、SONY公司的首页特点,SONY公司的首页设计充分体现了引领消费电子产品的潮流这一特点，设计者很好地传递了该Web网站的特点： 页面上富有动感的线条和画面 鲜亮的用色 Flash画面和字样 鼠标落在上面就会以彩色显示的多个画面等,29,SONY公司的首页,30,9.5.1 Web界面设计基本原则,6Web网站设计的3C原则 concise （简洁 ） 使用醒目的标题，这个标题常常采用图形来表示，但图形同样要求简洁。 限制所用的字体和颜色的数目。 页面上所有的元素都应当有明确的含义和用途，不要用无关的图片把页面装点起来。,31,9.5.1 Web界面设计基本原则,Consistent（一致性）

13、各页面使用相同的页边距；文本、图形间保持相同的间距。 各页面上都放上公司或网站的统一标志。 各页面应当使用相同的导航图标。 页面中的每个元素与整个页面以及站点的色彩和风格上保持一致性。 文字的颜色要同图像的颜色保持一致并注意色彩搭配的和谐。,32,9.5.1 Web界面设计基本原则,contrast 对比是强调某些内容的最有效的办法之一，好的对比度使内容更易于辨认和接受。 常用的对比方法是使用颜色进行对比。 另一种实现对比的方法是使用字体变化。 可以在文字排版中使用斜体和黑体写出关键内容，但不要滥用，以免不能达到强调效果。,33,9.5.2 Web界面规划,确定Web界面设计的目标 企业Web

14、网站： 企业建立这个Web网站的目的 这个网站的作用 该提供哪些吸引访问者的东西 用户访问这个Web网站后，能给他们带来什么？ 个人Web网站 ： 主要是展现自我、演练技术 。 建立的Web网站要有个性和特色 。,34,9.5.2 Web界面规划,界面布局的规划 制定好目标后，网页布局、元素的设计都要以这个目标为中心，尽量从各方面综合表现Web站点的目标。 在制定建立站点目标的同时，应该将站点作为一种文化、一种艺术来看。,35,9.5.2 Web界面规划,Web界面设计中用户的地位 确定Web站点的用户群体 ，从用户的角度去思考。 以用户为中心的设计，为用户的共性设计，同时考虑差异。 对目标用

15、户群的构成进行分析：Web网站是以提供的信息内容来分类的。 对目标用户的行为方式来分析：按照人机工程学的观点，行为方式受年龄、性别、地区、种族、职业、生活习俗、受教育程度等因素影响。,36,9.6 Web界面概要设计,Web界面概要设计包括 Web界面框架设计 Web界面的内容与风格的设计 Web界面设计的语言与文化,37,9.6.1 Web界面框架设计,Web网站规划 对市场进行分析，确定站点的目的和功能，并根据需要对站点建设中的技术、内容、费用、测试、维护等做出规划。 建立原型系统 尝试采用不同的方法修改目标、更新形象。 解决Web网站建设中的一些基本问题 ： Web网站的结构 信息的组织

16、与管理 新增文件与原有系统保持一致的措施。 存储信息的物理方法（采用数据库还是文件系统） 文档版本控制 结构的完整性以及维护方法等,38,9.6.1 Web界面框架设计,详细设计包括 Web页面的布局 系统的内部结构 实现方法和维护方法等 确定Web网站的运行模式 制造企业网站 商业企业网站 门户网站 新闻网站 个人网站 通过广告、销售等方式进行运作的网站 正式实施,39,9.6.2 Web界面的内容与风格,网站内容设计的原则 : HTML文档的效果由其自身的质量和浏览器解释的方法决定。应让所有的浏览器都能够正常浏览。 网站信息的组织的总体结构要层次分明，尽量避免形成复杂的网状结构。 要权衡图

17、像和多媒体信息的数量，在不影响网站效果的前提下，尽量减少图像的数量和所占面积。,40,9.6.2 Web界面的内容与风格,网站内容设计的原则 网站的首页要给用户带来好的第一印象，能够吸引用户再次光临这个网站。 网站内容应是动态进行修改和更新；。 网页中应该提供联机帮助功能。 网页的文本内容应简明，通俗易懂。 所有的内容都要针对设计目标而写，不要节外生枝。 文字要正确，不能有语法错误和错别字。,41,9.6.2 Web界面的内容与风格,Web界面的风格 Web界面的风格包括站点的标志、色彩、字体、布局、交互方式、内容价值、存在意义等。 一个杰出的网站需要整体的形象包装和设计。 为儿童设计的网站应

18、当使用比较丰富的色彩和图形，并且较多使用动画和声音等多媒体表现工具。 为老年人设计的网站需要考虑采用较大的字体、直截了当的信息显示和简单的浏览方式，以适用老年人可能逐渐减弱的视力和记忆力,42,体现儿童特点的迪斯尼网站,43,9.6.3 Web界面设计的语言与文化,网站应设置多语言选择 网站面向的用户使用不同的语言，则在设计时要考虑包括不同语言的版本，将选择语言版本的功能放在网站的主页，并用不同版本的语言进行标注 。 在网站设计和建设中进行跨文化研究 应当注意到不同地区的文化特点。 不同的语言表达可以产生不同的效果。 有些内容在一个地区是允许的或适用的，但是在另外一个地区使用却是不合适的。 应

19、当避免显示对用户不适合的内容。,44,9.7 Web界面设计要素,Web界面设计要素包括： Web界面的布局 Web界面的色彩 Web界面的字体 Web界面的动画与多媒体 Web界面的导航,45,9.7.1 Web界面布局,布局设计应做到整体布局合理、有序、整体化。 常用Web页面布局的形式： “同”字形结构布局 “国”字形结构布局 左右对称布局 自由式布局,46,9.7.1 Web界面布局,“同”字形结构布局 页面顶部为主菜单，下方左侧为二级栏目条，右侧为链接栏目条，屏幕中间显示具体的内容。 优点是页面结构清晰、左右对称、主次分明，因而得到广泛的应用。 缺点是太过于规矩呆板，需要善于运用细节

20、色彩的变化来调剂。,47,9.7.1 Web界面布局,2“国”字形结构布局 “国”字形结构布局在“同”字形结构布局的基础上，在页面下方增加一横条菜单或广告 其优点是充分利用版面、信息量大、切换方便。 有的网站将页面设计成镜框的样式，显示出网站设计师的品味。,48,9.7.1 Web界面布局,3左右对称布局 采取左右分割屏幕的方法形成对称布局。 优点是自由活泼，可显示较多文字和图像。 缺点是两者有机结合较为困难。,49,9.7.1 Web界面布局,4自由式布局 自由式布局打破上述两种布局的框架结构，常用于文字信息量少的时尚类和设计类网站。 其优点是布局随意，外观漂亮，吸引人。 缺点是显示速度慢。

21、,50,9.7.2 Web界面的色彩,确定网站的标准色彩 不同的色彩搭配产生不同的效果，并可能影响到访问者的情绪。 以红、绿、蓝三色称为三基色 其它的色彩都可以用这三种色彩调和而成。 底色应应柔和、素雅 柔和的底色配上深色文字，读起来自然，流畅。,51,9.7.2 Web界面的色彩,网页色彩搭配的原则： 色彩的鲜明性 网页的色彩要鲜艳，容易引人注目。 色彩的独特性 要有与众不同的色彩，使得大家对网页的印象强烈。 色彩的合适性 色彩和网页要表达的内容气氛相适合。 色彩的联想性 不同色彩会产生不同的联想，选择色彩要和网页的内涵相关联。,52,9.7.3 Web界面的字体,字体是每一个网站的必要组件

22、，选择字体和颜色，和其它页面元素一起产生一个视觉效果。,53,常用的英文字体,（1）Serif字体 （2）Sans-Serif字体 （3）TrueType字体,54,常用的英文字体,Serif字体 Serif是在字母主要笔画的结束处加上的小装饰笔画。Times New Roman是一个Serif字体的例子。 Serif引导眼睛随着打字线移动，提高了可读性。Serif字体最适合于正文文本。 ABCDEFabcdef,55,常用的英文字体,Sans-Serif字体 Sans-Serif字体没有小装饰笔画，Arial是一个Sans-Serif的例子。ABCDEFabcdef 字符的外观被减少到只含有

23、必要的笔画。 Sans-Serif文本必须逐个字母的阅读。 建议在小尺寸文本和非常大的文本中使用。 通常，Serif字体和一个Sans-Serif字体就可以在网页上提供一个较好的文本组合。,56,常用的英文字体,TrueType字体 许多字体都是TrueType，即可以产生任意尺寸而不降低字母质量。 TrueType是苹果公司开发的一项数字技术，现在被Apple和Microsoft操作系统使用。 Times New Roman和Arial都是TrueType字体。,57,常用的中文字体,Web界面中常用的中文字体有宋体、仿宋体、楷体和黑体。除这四种基本字体外，还有多种可选用的字体如书宋体、报宋

24、体、隶书体、美黑体、广告体、行草体等。 汉字大小定为九个等级，按初、一、二、三、四、五、六、七、八排列，在字号等级之间又增加一些字号，并取名为小几号字，如小四号、小五号等。,58,常用的中文字体,正文中的中文字体 可以采用传统媒体中的各种字体作为Web界面正文中的字体。 根据Web网页中的不同要求，选择相应的字体和字号。 常见正文中文字体用法如表9-1所示。,59,常用的中文字体,标题中的中文字体 网页应该重视标题的处理，把标题排版作为版面修饰的主要手段。 标题的字体变化更为讲究，用于网页排版系统一般要配十几到几十种字体，才能满足标题用字的需要。 网页标题一般无分级要求，字形普遍要比图书标题大

25、，字体的选择多样，字形的变化修饰更为丰富。,60,常见正文中文字体用法,61,使用字体的原则,整个网站上的字体应该保持使用的一致 网站中可能会使用多种字体，但是同一种字体应该表示相同类型的数据或者信息。 文字的颜色应该一致，让用户可以容易的确定不同文本和颜色所代表的内容。 为了让字体匹配网站的总体概念，必须要意识到每一个字体变化和可以使用的范围。,62,使用字体的原则,考虑字体如何适应网页，以及字体与整个设计的关系。 选择的字体和整个页面及网站应融为一体。 设计元素例如页边框，行间距，背景颜色和前景颜色等都可以影响最终的结果。 通过字体不同的安排，可以让网站产生丰富变化的外观和感觉。,63,9

26、.7.4 Web界面的动画与多媒体,动画、音频和视频这样的多媒体可以补充平淡的文本或者二维图形，也补充网站的视觉设计、音调和消息等。 Web设计者可以使用很多当前Web设计中的多媒体处理工具和技术；但是带宽以及浏览器的支持能力限制了多媒体技术的迅速采用。 为了充分享受新技术，通常需要大带宽、浏览器插件或第三方应用程序的支持。,64,WEB中的动画,动画是区别Web和其它媒体的一个重要展示形式，动画赋予了用户运动和投入的感受。 动画可以分为不同的级别，从简单的动画GIF图像到三维以及虚拟环境。 最常用的基本动画类型是GIF和Macromedia Flash文件。 动画GIF是静止图像的汇集，可以

27、按照指定的序列号和速度重复运动。许多标志广告就是动画GIF。,65,WEB中的动画,JavaApplet是经常被用来制作互联网上动画效果的程序设计语言。 Macromedia Flash文件在网站设计中被广泛地接受。 Flash引入了一种新的动画形式。它在带宽有限的情况下提供了媒体丰富的内容。 Flash允许设计者创建吸引人的动画网站，为通常的静态站点提供了一种新的选择。,66,9.7.5 Web界面上的导航,对于Web站点来说，需要包含导航条，用户利用导航的提示在信息的空间里移动。 真实世界的导航观点在Web中常被采用。 应该注意，Web不是真实的世界，Web导航应该帮助用户理解他们在哪里、

28、可以去哪里、怎样获得想要的东西。,67,Web界面上的导航,为使用户得到真实的感觉，必须充分考虑可见性、标记和导航元素的布局。 Web页上仅有五个基本区域可放置导航元素： 顶部 底部 左侧 右侧 中央,68,9.8 Web界面设计技术与工具,要设计好的Web界面，需要有良好的设计工具，随着Internet网络的发展，国际组织和许多互联网软件开发商制订了若干标准，开发了不同的Web界面设计工具。本节对一些常见的技术和工具进行简单介绍。,69,9.8.1 Web界面设计技术基础,超文本标记语言HTML 客户端脚本语言JavaScript JavaApplet 服务器端脚本语言,70,1. 超文本标

29、记语言HTML,HTML已经成为表示Web文档信息的标准方法，是构成Web页面的主要工具。 HTML是用来表示网上信息的符号标记语言，是一个跨平台语言。 HTML标准定义了构成语言的每一个独立元素，这些元素是说明如何在浏览器中显示HTML文档的指令或标记符。 从结构上讲，HTML文件由各种标记元素组成，用于组织文件的内容和指导文件的输出格式。,71,（1）基本标记元素（部分）,72,（2）图形标记元素,目前能被Web浏览器直接解释的常见图像格式有：GIF格式(.GIF文件，支持256色)；X位图格式(.XBM文件，黑白图像)；JPEG格式(.JPG、.JPEG文件，支持RGB色)。,73,（3

30、）表格标记元素 （部分）,74,（4）表单标记元素(部分),75,【例9-1】Demo.html,【例8-1】用任一编辑器建立文本文件Demo.html。 网页标题显示于浏览器窗口的标题栏 H1设定一级标题 黑体字 斜体字 红色5号字 点击这里将超链到山东大学主页 点击这里将超链到下面的锚点 有意见请告诉我 这里是一个文档内部锚点的起始处 ,76,Demo.html的运行效果,77,【例9-2】用HTML实现表单实例, HTML表单实例 用户名： 口令： 选学内容： Word Excel Internet 课程类别： 必修 选修 你的计算机是哪一种类型： PC UNIX MAC OTHER 备

31、注： 请在此填写补充内容 ,78,2客户端脚本语言JavaScript,HTML无法独自完成交互和客户端动态网页的任务,JavaScript，它弥补了HTML语言的缺陷。利用JavaScript，可以使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互式的表达能力。 JavaScript是一种内嵌于HTML中的脚本语言，它是一种基于对象和事件驱动并具有安全性能的脚本语言。使用它的目的是与HTML、JavaApplet一起实现在一个Web页面中链接多个对象，与Web客户交互作用，可用于开发客户端的应用程序等。,79,JavaScript 的 特点,（1）一种脚本编

32、写语言 （2）基于对象的语言 （3）简单性 （4）安全性 （5）动态性 （6）跨平台性,80,JavaScript与HTML结合实例, / JavaScript 在此出现 alert(这是第一个JavaScript例子!); alert(欢迎你进入JavaScript世界!); alert(今后我们将共同学习JavaScript知识！); / JavaScript 在此结束 /JavaScript代码由 .说明 /alert()是JavaScript的窗口对象方法，其功能是弹出一个具有OK对话框并显示括号中的字符串,81,JavaScript与HTML结合实例运行结果,82,3JavaAppl

33、et,JavaAapplet是访问Internet服务器，在Internet上传播的，自动安装的，可作为部分Web文档运行的小应用程序。 当JavaAapplet到达客户端，它被限制访问资源，以使它能够在不受病毒威胁和破坏数据完整性的情况下生成一个二进制的多媒体用户界面以及完成复杂的计算。它还提供了装载和显示图像的方法，以及装载和播放语音片断的方法。,83,JavaAapplet是一种基于窗口的程序,JavaAapplet是由事件驱动的。一个JavaAapplet类似于系列提供中断服务的子程序的集合。 在事件发生之前，JavaAapplet一直处于等待状态中。 一旦事件发生，JavaAappl

34、et就会采取相应措施并迅速将控制权交给AWT。针对特定的事件作出相应的动作并把控制交给AWT的运行环境。 用户可以与JavaAapplet进行交互，而不是通过其它方式。这些交互被送至JavaAapplet，JavaAapplet必须作出响应的事件。,84,JavaApplet在网页中实现放大镜的例子, AnLens.jar是JavaApplet的源文件。其效果如下图。,85,86,4服务器端脚本语言,目前流行的三大服务器端脚本语言是ASP、PHP、JSP。 ASP（ActiveServerPages），是一个Web服务器端的开发环境，利用它可以产生和运行动态的、交互的、高性能的Web服务应用程

35、序。 PHP（HyperText Preprocess）是一种跨平台的服务器端的嵌入式脚本语言。它大量地借用C、Java和Perl语言的语法，并耦合PHP自己的特性，使Web开发者能够快速地写出动态生成页面。 JSP （JavaServerPage）是Sun公司推出的新一代站点开发语言，它完全解决了目前ASP，PHP的一个通病脚本级执行。JSP可以在Servlet和JavaBeans的支持下，编写出功能强大的Web站点程序。,87,三大服务器端脚本语言,三者都提供在HTML代码中混合某种程序代码、由语言引擎解释执行程序代码的能力。在ASP、PHP、JSP环境下，HTML代码主要负责描述信息的显

36、示样式，而程序代码则用来描述处理逻辑。普通的HTML页面只依赖于Web服务器，而ASP、PHP、JSP页面需要附加的语言引擎分析和执行程序代码。程序代码的执行结果被重新嵌入到HTML代码中，然后一起发送给浏览器。,88,9.8.2常用Web界面设计工具,页面编辑器 MicroSoft公司 的Frontpage Macromedia公司 的Dreamweaver Dreamweaver对于动态网页的支持特别好，可以轻而易举地做出很多眩目的互动页面特效。 Dreamweaver与Flash、Firework并称为Macromedia的网页制作三剑客。 辅助工具 AceHTML Pro 6.0全功能

37、的 HTML & JavaScript 编辑器。 Antenna Web Design Studio强大的可视化网页设计软件。 Easy HTML简单的所见即所得的HTML 编辑器，有固定、类似浏览器的界面。 Easy Web Editor是一个 Web 发布工具，允许不了解HTML而在所见即所得环境中编辑Web网页。,89,9.8.3 Web界面设计新技术,Web 3D图形技术 语音Web技术,90,1.Web 3D图形技术,（1）Web3D虚拟现实建模语言VRML VRML是3D图形和多媒体技术通用交换的文件格式，它描述交互式的3D对象和场景。它不仅应用在互联网上，也可以应用在工程和科学可

38、视化、多媒体、娱乐游戏、互联网3D图形、教育、虚拟社区等领域。由于网上传输的是模型文件，故其传输量大大小于视频图像。,91,1.Web 3D图形技术,（2）Web3D图形实时渲染引擎 实时渲染引擎的作用是解释并翻译实施场景模型文件的语法，实时渲染从服务器端传来的场景模型文件，在网页访问者的客户端逐帧、实时地显示3D图形。 实时渲染引擎是实施互联网3D图形的关键技术，它的文件大小、图形渲染质量、渲染速度、以及它能提供的交互性都直接反映其解决方案的优劣。,92,1.Web 3D图形技术,（3）Web3D图形新标准 可扩展3D(Extensible 3D , X3D) 是一个软件标准，定义了如何在多

39、媒体中整合基于网络传播的交互三维内容。X3D 是 VRML的继承和改进，提供了以下的新特性：更先进的应用程序界面，新添的数据编码格式，严格的一致性，组件化结构。,93,1.Web 3D图形技术,（4）Web3D图形建模与制作工具 3DS max可用于建立场景模型，安装相应的输出插件，再直接建立场景模型文件。现在最有名的Web3D图形软件公司，如cult3D 和Viwepoint都可以在3DS max中直接输出它们的专用文件格式的场景模型文件。,94,1.Web 3D图形技术,（5）Java 3D Java 3D 的本质是一个交互式三维图形应用编程接口（API），是Java 2 SDK的标准扩展

40、，它可以和普通的Java 2D 、Swing、AWT等很好地结合，其目标是： 1）用户能够在浏览器中观看或操作三维动态图形。 2）一次编程，到处运行。 3）适应不同的软件平台。 4）适应各种显示环境和输入设备。,95,1.Web 3D图形技术,（6）Web3D图形技术应用 互联网上的交互式3D图形技术Wed3D正在取得新的进展，最具魅力的Wed3D图形将在互联网上有广泛应用，如电子商务、联机娱乐休闲与游戏、科技与工程的可视化、教育、医学、地理信息、虚拟社区。,96,两个Web3D的浏览的例子,97,2Web中的语音交互技术,语音浏览技术是正在互连网上的一种新的应用和技术。 VoiceXML 语音可扩展标记语言 世界上第一个真正的语音通信标准，它定义了应用开发商向用户提供新型信息访问服务的方式。 VoiceXML的应用与HTML的应用相同，唯一的差别在于前者使用语音浏览器,98,VoiceXML 语