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

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