网络技术在页面设计中的应用.ppt

第5章 网络技术在页面设计中的应用 第5章 网络技术在页面设计中的应用 5.1 动态网页(DHTML)应用 5.2 三维网络技术应用 5.3 多媒体技术应用 第5章 网络技术在页面设计中的应用 5.1 动态网页(DHTML)应用 动态HTML(即DHTML)是近年来网络发展进程中 最振奋人心，也最具实用性的创新之一。国内网络界 也掀起了一股学习动态HTML的热潮。所谓动态网页 ，就是采用动态HTML制作出来的具有动态效果的网 页。 第5章 网络技术在页面设计中的应用 有人把动态HTML当作一门语言，也有人把它当 作一种专门的技术，这些理解都是不对的。实际上， 它是一种通过各种技术的综合发展而得以实现的概念( 当然不同的浏览器实现的程度也不同)，这些技术包括 JavaScript、VBScript、Document Object Model(文件目 标模版)、Layers和Cascading Style Sheets(CSS)等。 第5章 网络技术在页面设计中的应用 IE 4.0所支持的动态 HTML包括以下几部分： (1) 层叠样式表(CSS)：提供了设定HTML标记的所 有文本修饰(如文字的大小、字体、颜色等内容)的排版 功能。在网页下载完毕后，可动态地改变页面元素的 CSS属性。 (2) 动态内容( Dynamic Content)：可以动态地更新 网页的内容，即可以动态删除和增加页面中的各种元 素，随时适应页面编排的需要。 第5章 网络技术在页面设计中的应用 (3) 动态图像：通过内建的Animation可以实现动画 的效果，另外配合JavaScript、VBScript或ActiVeX控件 可以轻松地移动图像。 (4) 数据库支持：通过动态HTML方便地实现对数 据库中数据的访问，从而使网页设计者轻松地处理数 据，实现更强大的交互功能。 第5章 网络技术在页面设计中的应用 Netscape 4.0所支持的动态 HTML包括以下几部分 ： (1) 层叠样式表(CSS)。 (2) 脚本排版样式(JavaScript Style Sheets，JSS)：是 Netscape公司为该浏览器内建的一种排版样式，可以通 过JavaScript来控制Style Sheets。 (3) 动态图层(Dynamic Layers)：是一项很强大的功 能，可以提供图文定位、移动图文、控制显示或隐藏 图片的功能，方便地实现各种特殊效果。 第5章 网络技术在页面设计中的应用 解决浏览器不支持某种效果的方法有两个基本要领 ： (1) 给网站做一个小的调查，看看访问者大多使用 哪种版本的浏览器。 (2) 如果经过调查，访问者使用IE(很多好的页面效 果，只 有IE支持)的人数占绝大多数。 第5章 网络技术在页面设计中的应用 现在网络上动态DHTML运用较多且效果较为美观 的是无边框窗口、DHTML式的导航条以及一些特殊的 动态效果。目前笔者见过用JS设计的最酷的网站是 groninger博物馆(http:/www.groninger-museum.nl/)。全 屏方式的网站完全没有窗口边框的限制，整个站点洒 脱极了，整个站点运用多种颜色，搭配合理，页面排 版分配适当，窗口叠加、定位，制作精致，各个方面 都设计得当，如图5.15.5所示。 第5章 网络技术在页面设计中的应用 图5.1 groninger博物馆首页 第5章 网络技术在页面设计中的应用 图5.2 groninger博物馆内页一 第5章 网络技术在页面设计中的应用 图5.3 groninger博物馆内页二 第5章 网络技术在页面设计中的应用 图5.4 groninger博物馆内页三 第5章 网络技术在页面设计中的应用 图5.5 groninger博物馆内页四 第5章 网络技术在页面设计中的应用 利用一些简单的DHTML效果设计出较有意思的页 面是设计师们的工作。如图5.6中的Treelogic (/ ) 网站，插图中的treeman眼 神和头跟着鼠标移动(见图5.7和图5.8)，这个效果看起 来很酷，其实只是互换图片的DHTML效果就可以达到 。当鼠标放置到如图5.8所示位置时，页面上部信息将 会从右向左移动，如果利用Flash或其他方式制作，也 许比较麻烦。 第5章 网络技术在页面设计中的应用 了解技术所能达到的范围，可以帮助设计师展开 创意联想。从技术角度看，网页设计师和平面设计师 有着完全不同的使命感，平面设计师必须了解打印出 样的一些必要印刷知识，而网页设计师必须了解网络 技术可实现的程度和制作难度，以便提出最合理的方 案并同网页制作及编程人员紧密合作。 第5章 网络技术在页面设计中的应用 图5.6 Treelogic网页之一 第5章 网络技术在页面设计中的应用 图5.7 Treelogic网页之二 第5章 网络技术在页面设计中的应用 图5.8 Treelogic网页之三 第5章 网络技术在页面设计中的应用 除上两例以外，还有很多很酷的动态DHTML效果 。但是必须引起注意的是，这类效果大部分不适合商 业网站，而且没有太多必须使用的因素。例如图5.9和 图5.10中的多个小窗口，根据编程要求自己移动，最后 慢慢拼成完整的一幅图案。这个过程如果是用56 kb/s 的“猫”来浏览的话，会十分缓慢。DHTML对CPU的要 求也很高。 第5章 网络技术在页面设计中的应用 图5.9 小窗口移动DHTM效果一 第5章 网络技术在页面设计中的应用 图5.10 小窗口移动DHTM效果二 第5章 网络技术在页面设计中的应用 很酷的动态编程效果还有很多，applet编程的生物 模拟器也值得一提，如图5.11和图5.12中的sodaplay网 站(/ )。看到这些有意思的网络 编程程序，是否有一些感叹，光是懂得美术的网页设 计师是无法达到的。这也是网络媒体艺术的魅力所在 ，它融合了更多的元素，有着更美好的未来。 第5章 网络技术在页面设计中的应用 图5.11 applet编程的生物模拟之一 第5章 网络技术在页面设计中的应用 图5.12 applet编程的生物模拟之二 第5章 网络技术在页面设计中的应用 5.2 三维网络技术应用 作为网页设计师，懂得的软件、技术越多越有利 。例如图5.13中Flash动画中，运用了简单的三维设计 的插图，图5.14的网页立体插图效果和图5.15中的三维 少女动画都运用了三维设计。实际上，大部分立体效 果的设计均是把三维技术和Flash动画结合起来，利用 3D软件制作出一些插图或动画，导入Flash中再加工， 并输出动画格式。网页设计因为有了这两种技术的结 合而变得更加精彩。其他三维效果网页的示例，可见 图5.16和图5.17。 第5章 网络技术在页面设计中的应用 图5.13 spyloganalyzer 第5章 网络技术在页面设计中的应用 图5.14 finest.ru 第5章 网络技术在页面设计中的应用 图5.15 第5章 网络技术在页面设计中的应用 图5.16 impulse 三维场景一 第5章 网络技术在页面设计中的应用 图5.17 impulse 三维场景二 第5章 网络技术在页面设计中的应用 三维网络技术应用最主要的三个发展方向是电子 商务(包括B2B电子交易市场和B2C)、电子化教育和网 络娱乐。著名显卡生产商ATI在其网站上采用三维技术 演示其新产品后，在线销售额四个月内增长了13%。 ATI的互联网销售经理BAL Sahjpaul曾经这样说过，如 果一图抵千言的话，那么一个三维模型抵得上10亿个 介绍。 第5章 网络技术在页面设计中的应用 1. Cult3D技术 Cult3D是一种崭新3D网技术，可以以较高的速度 把高质量的三维物体图像传送到所有因特网用户，它 是一种全新的Web3D技术。Cult3D是一个跨平台的3D 引擎，其目的是在网页上建立互动的3D物件。 Cult3D作为一种电子商务方案，可以让顾客随时随 地在网上“触摸”、“感觉”，并且试一试产品，也可以和 其他人一起玩令人激动的网上游戏。 第5章 网络技术在页面设计中的应用 2. Viewpoint Viewpoint是一家领先的网络高端媒体(Rich Media) 可视化解决方案提供商。Viewpoint可以创建照片级的 真实3D影像，并且可以和其他高端媒体综合使用。更 加引人注目的是，在目前窄带环境里Viewpoint同样可 以达到逼真的效果。 第5章 网络技术在页面设计中的应用 5.3 多媒体技术应用 从当前常见的解决方法来看，为适应网络需求的 多媒体主要具有两大特点： (1) 用压缩的方法减小多媒体文件的体积。 Microsoft公司的.ASF和RealNetworks网络公司的.RM文 件格式都是这种压缩方式的代表。 (2) 信息“流”传输。“流”是一种数据传输的方式， 使用这种方式，信息的接收者在没有接到完整的信息 前就能处理那些已收到的信息。 第5章 网络技术在页面设计中的应用 除了常见的网络多媒体软件(如Microsoft Windows Media Author、RealProducer Plus G2、Macromedia Flash 、MetaStream 3D等专门针对网络而开发的多媒体软件) 外，一些传统的多媒体制作工具(如Authorware、 Director)也纷纷在升级版中开始支持网络上的多媒体应 用。 第5章 网络技术在页面设计中的应用 这些软件中与网页设计师联系最紧密的就是 Macromedia Flash软件了。Flash也是当今最热门的网络 交互式多媒体制作软件，并已成为公认的矢量动画文 件标准。Flash在4.0版本之后还加入了对MP3的支持， 其闪光点在于优秀的交互式特性。你可以用Flash来制 作令人眩目的动画效果，也可以用Flash制作简单的小 游戏(见图5.18)。 第5章 网络技术在页面设计中的应用 除了Flash之外，还应该提及的是quicktime制作的 mov格式动画。mov是一种较专业的多媒体压缩格式， 也支持媒体交互技术，虽然暂时