《第5章网络技术在页面设计中的应用.pptVIP

第5章 网络技术在页面设计中的应用 5.1 动态网页(DHTML)应用 5.2 三维网络技术应用 5.3 多媒体技术应用 5.1 动态网页(DHTML)应用 动态HTML(即DHTML)是近年来网络发展进程中最振奋人心，也最具实用性的创新之一。国内网络界也掀起了一股学习动态HTML的热潮。所谓动态网页，就是采用动态HTML制作出来的具有动态效果的网页。 有人把动态HTML当作一门语言，也有人把它当作一种专门的技术，这些理解都是不对的。实际上，它是一种通过各种技术的综合发展而得以实现的概念(当然不同的浏览器实现的程度也不同)，这些技术包括JavaScript、VBScript、Document Object Model(文件目标模版)、Layers和Cascading Style Sheets(CSS)等。 IE 4.0所支持的动态 HTML包括以下几部分： (1) 层叠样式表(CSS)：提供了设定HTML标记的所有文本修饰(如文字的大小、字体、颜色等内容)的排版功能。在网页下载完毕后，可动态地改变页面元素的CSS属性。 (2) 动态内容( Dynamic Content)：可以动态地更新网页的内容，即可以动态删除和增加页面中的各种元素，随时适应页面编排的需要。 (3) 动态图像：通过内建的Animation可以实现动画的效果，另外配合JavaScript、VBScript或ActiVeX控件可以轻松地移动图像。 (4) 数据库支持：通过动态HTML方便地实现对数据库中数据的访问，从而使网页设计者轻松地处理数据，实现更强大的交互功能。 Netscape 4.0所支持的动态 HTML包括以下几部分： (1) 层叠样式表(CSS)。 (2) 脚本排版样式(JavaScript Style Sheets，JSS)：是Netscape公司为该浏览器内建的一种排版样式，可以通过JavaScript来控制Style Sheets。 (3) 动态图层(Dynamic Layers)：是一项很强大的功能，可以提供图文定位、移动图文、控制显示或隐藏图片的功能，方便地实现各种特殊效果。 解决浏览器不支持某种效果的方法有两个基本要领： (1) 给网站做一个小的调查，看看访问者大多使用哪种版本的浏览器。 (2) 如果经过调查，访问者使用IE(很多好的页面效果，只 有IE支持)的人数占绝大多数。 现在网络上动态DHTML运用较多且效果较为美观的是无边框窗口、DHTML式的导航条以及一些特殊的动态效果。目前笔者见过用JS设计的最酷的网站是groninger博物馆(http://www.groninger-museum.nl/)。全屏方式的网站完全没有窗口边框的限制，整个站点洒脱极了，整个站点运用多种颜色，搭配合理，页面排版分配适当，窗口叠加、定位，制作精致，各个方面都设计得当，如图5.1～5.5所示。 利用一些简单的DHTML效果设计出较有意思的页面是设计师们的工作。如图5.6中的Treelogic (/ ) 网站，插图中的treeman眼神和头跟着鼠标移动(见图5.7和图5.8)，这个效果看起来很酷，其实只是互换图片的DHTML效果就可以达到。当鼠标放置到如图5.8所示位置时，页面上部信息将会从右向左移动，如果利用Flash或其他方式制作，也许比较麻烦。 了解技术所能达到的范围，可以帮助设计师展开创意联想。从技术角度看，网页设计师和平面设计师有着完全不同的使命感，平面设计师必须了解打印出样的一些必要印刷知识，而网页设计师必须了解网络技术可实现的程度和制作难度，以便提出最合理的方案并同网页制作及编程人员紧密合作。 除上两例以外，还有很多很酷的动态DHTML效果。但是必须引起注意的是，这类效果大部分不适合商业网站，而且没有太多必须使用的因素。例如图5.9和图5.10中的多个小窗口，根据编程要求自己移动，最后慢慢拼成完整的一幅图案。这个过程如果是用56?kb/s的“猫”来浏览的话，会十分缓慢。DHTML对CPU的要求也很高。 很酷的动态编程效果还有很多，applet编程的生物模拟器也值得一提，如图5.11和图5.12中的sodaplay网站(/ )。看到这些有意思的网络编程程序，是否有一些感叹，光是懂