浅谈多媒体网页中的架构设计

浅谈多媒体网页中的架构设计浅谈多媒体网页中的架构设计内容摘要：随着计算机网络的发展，互联网技术已成为当今社会工作、生活中必不可少的一部分。网站是互联网技术的产物，为人们所熟知。当我们浏览一个网站的时候，网站给人的第一印象就是其外观。目前，多媒体技术在大量网站中得到了应用，一方面使内容变得更加丰富多彩，增加了网页美感，令浏览者心情愉悦；另一方面如果一个网页内容、图片繁多，布局混乱，必定会影响浏览速度，让浏览者产生烦躁的情绪，常此以往得不到解决，就会直接影响网站的使用效率。合理并漂亮的网站外观能更好地吸引浏览者去阅读网站的内容，所以要想吸引更多的眼球，首先我们要做好网站合理的页面布局。因此本文主要对目前使用的网页布局结构，针对不同类型的网站，我们应该如何选择合适网页布局结构以及意义何在等问题作了重点阐述。关键词：多媒体网页 网页布局 设计On the multimedia web architecture designStudent：Yu Wu Supervisor：Renyong HuangAbstract:With the development of computer network, the Internet technology has become the social work, an indispensable part of life. Web site is the product of the Internet technology, for known. When we view a website, give the impression of website is its appearance. At present, the multimedia technology in the large web site is used, on the one hand, make content becomes more rich and colorful, increased web aesthetic feeling, make your visitors mood cheerful; On the other hand if a web page content, the picture is various, layout chaos, will affect browsing speed, let your visitors produce irritating mood, often the past are resolved, it will directly influence the use of the website efficiency. Reasonable and beautiful web site appearance can better attract visitors to read the content of the web site, so if you want to attract more attention, first of all we want to do well site reasonable page layout. This article mainly to the current use of web page layout structure, different types of website, how should we choose appropriate web page layout structure and meaning of problems such as presented.Key words:multimedia web web page layout design浅谈多媒体网页中的架构设计一、多媒体技术在网页中的应用多媒体技术是利用计算机交互式综合技术和数字通信技术，将文字、图形、声音、动画和影视等不同的媒体进行综合处理，来传递信息的技术。随着多媒体技术的日趋成熟，我们已能在各个领域看到多媒体技术的应用，而在网页设计中，多媒体技术的运用则尤其普遍。网页设计者力图将各种多媒体元素交织在一起，构成风格独特、功能全面的网站，使用户在浏览时能够更加方便、过目不忘。（一）网页中主要使用的多媒体技术1.图形、图像处理技术图形、图像时网页设计中最基本的元素之一，也是极为重要的多媒体信息。网页中的新闻图片、背景图片、广告图片等等都如同文字的功能一样，传达了包含多种意义的内容，图片的填充使得网页更加绚丽多彩。我们所看到的图形图像则主要经过了获取图像、编辑处理图像、输出图像、图像数据压缩和图像存储这几大步骤，是之生成二维、三维图像。图像素材的获取主要是从数码拍摄、图像扫描技术和软件制作技术中获得。图像编辑处理的方法有很多，其中我们可以借助于一些应用软件来进行，例如操作复杂的Photoshop，我们可以实现对照片亮度的调整、对比度的调整以及进行羽化处理等，处理过后的图像能更好的被应用与网络设计中。处理编辑完毕后，我们要对图像进行输出，同时还要选择合适的图形图像文件，格式，常见的图像文件的格式有：BMP、GIF、JPEG、PNG、TGA等，但保存时最好以GIF和JPEG的格式保存，他们不仅存储量小，而且兼容HTML超文本语言。2.动画处理技术动画是指动态生成一系列相关却略有不同画面的处理方法，它利用人类的视觉暂留效果产生动态效果，这是多媒体技术中最绚丽的外挂特效，还能创建出二维、三维的动态效果，目前的很多网站上都运用了循环播放的动画来表现广告，若是对其产生兴趣，还能点击动画进入链接网页。多媒体动画制作的原理与传统形式的动画原理相似。都是通过对静态图像的连续播放使之产生生物运动的效果，但是多媒体动画采用的是数字处理方式。常见的动画格式有方式可以产生多种多样的输出形式。动画的格式有GIF、SWF、FLIC、Java动画等。其中GIF和SWF动画是网页动画中应用比较广泛的格式类型。对于动画的创建，我们则常用到Flash、3D Max等软件。3.数字音频处理技术数字音频技术是多媒体技术中出现比较早、运用较成熟的技术了。它突破了传统的模拟方式，实现了音频数字化。这不仅实现了较好的音响效果，更为音频文件的采集、剪切和发布提供了方便。网络音乐文件一般采用中等质量的声音。这样会有相对较好的声音质量，文件的大小也适中。声音是信息的重要载体,我们也可以利用一些音频处理软件来将音频处理成所需要的效果,将音频与视频配合好,会提高整体效果。在网页设计中,使用与网站主题相呼应的背景音乐,可提高浏览者观看兴趣。目前,网上流行的音频文件主要有MID、 WAVE、MP3等格式。二、多媒体网页的布局设计网页布局是指网页内容在页面上所处位置的设计。布局的内容主要包括页面尺寸、整体造型、页眉、页脚、主体内容等。（一）布局设计基本概念1.页面尺寸网站的页面在设计开始时候就应定出其尺寸大小，就想绘画一样，在开始时要决定画多大的画。但页面的尺寸与纸张的大小是不同的，有它自己的特殊性，主要是网页是通过显示器设备显示的，由于显示设备的不同，所以对页面尺寸的大小要求也就不同。网页页面尺寸受限于两个因素，一是显示器大小及分辨率，另一个是用户使用的浏览器软件，如IE、火狐（Firefox）、遨游（Maxthon）、Opera等。在页面尺寸大小的设计上，要考虑一个页面的内容在不同的显示设备中被最终显示的效果。一个页面被浏览时，一般是左右不移动，而上下可以通过浏览器窗口右边的滚动条来上下移动，因此页面尺寸大小主要考虑左右距离，而上下一般不要让页面的拖动超过三屏（一屏为显示器屏幕的显示范围）即可，除非页面内容绝对能够吸引浏览者，此时最好能够在页面上制作一些显著的页面内部链接。目前显示器设备所使用的分辨率较多的是1024768像素，而1440900像素的显示器也开始增多，未来可能成为主流。因此页面尺寸大小的设计主要是能够适合1024768像素及1440900像素这两种分辨率就可以了。另外，随着移动通信设备接入Internet（如手机、平板电脑），页面尺寸的设计也朝着动态改变的方向发展，兼顾浏览器与分辨率的不同是网页设计中需要考虑最多的问题之一，可以采取相应的措施来解决这个问题。浏览器不同，可以采用JavaScript编程来分辨浏览器版本，从而将不同用户定位到不同网页上，或者在设计时，尽量使网页在不同浏览器中都能浏览。网页设计标准尺寸：把分辨率的列宽的列宽值减去22像素，留出页面右边滚动条的位置。l 在1024768像素下，网页宽度保持在1002像素以内。l 在1440900像素的分辨率下，网页宽度保持在1418像素以内，一般不会出现水平滚动条。2.整体造型什么是造型，造型就是创造出来的物体形象。整体造型就是指页面的整体形象，这种形象应该是一个整体，图形与文本的结合应该是层叠有序。虽然，页面是矩形的，但对于页面中的元素，可以充分运用自然界各种几何形状以及它们的组合（如矩形、圆形、三角形、菱形等）构造出不同的网站形象来。同色彩一样，不同的形状所代表的意义是不同的。比如矩形代表正式、规则，可以注意到很多政府网页都是以矩形作为整体造型；圆形代表柔和、团结、温暖、安全等，许多时尚站点喜欢以圆形作为页面整体造型；三角形代表力量、权威、牢固、侵略等，许多大型的商业站点为显示它的权威常以三角形作为页面整体造型；菱形代表平衡、协调、公平，一些交友站点常运用菱形作为页面整体造型。虽然不同形状代表着不同意义，但目前的网页制作多数是结合多种图形加以设计，但是这其中某种图形的构图比例可能占得多一些。3.页眉页眉又称页头，通常是放置页面标题、网站标识图案（logo）等信息。页眉是页面上端部分，有的页面划分比较明显，有的页面没有明确的区分或者没有页眉。页眉的注意力值较高，大多数商业网站在此设置网站宗旨、宣传口号、广告语等，有的则把它设计成广告位出租。4.页脚页脚是页面底端部分，通常用来显示站点所属公司（社团）的名称、地址、版权信息、电子信箱的超链接等。5.主体内容主体内容是网页设计的主体元素。它一般是二级链接内容的标题，或者是内容提要，也可能是内容的部分摘录。表现手法一般是文字和图像相结合。它的布局通常按内容的分类进行分栏安排。页面一般是按照从上到下、从左到右的顺序排列，所以重要的内容一般安排在页面的上方，次要的内容一般安排在页面的下方。6.图片图片和文本是网页的两大构成元素，却一不可。如何处理好图片和文本的位置成了整个页面布局的关键。7.多媒体除了文本和图片，还有声音，动画，视频等等其它媒体。虽然它们不是经常能被利用到，但随着动态网页的兴起，它们在网页布局上也将变得更重要。（二）网页布局的方法首先要想象你准备设计的网页的大概外观轮廓，可以用笔在白纸中勾勒出粗略的布局，要考虑到整体平衡协调，将logo、导航栏放置在显眼突出的位置。然后再细化你的初略布局，这要考虑网站元素(图片和文字)占用的空间要分布均匀，对色彩的平衡进行适当的调节，制作出一些变化。让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。对网页布局做到适当的疏密有度，适当留些空白在布局当中，比例适当非常重要，虽然不一定都要做到黄金分割，但比例一定要协调；要制作出具有创意的网页布局，设计师就必须将以上的设计原则充分活用到网页布局里，同时应尽可能的借鉴其他网站的成功经验。网页设计不应该只是将内容放到网页中就行了，还应该对内容合理进行安排，这样才能达到内容与形式的完美结合，增强网站的吸引力。虽然布局的好坏在很大程度上取决于网页设计者艺术修养水平和创新能力，但是这并不是说网页布局无章法可循完全是灵感之作，它也有自己内在的规律和要求。在进行网站页面布局设计时，总的原则是先根据网站的主题构思一个草图，然后逐步细化，直到最终设计好。1.纸上布局法先在白纸上画出象征浏览器窗口的矩形，这个矩形就是你布局的范围了。选择一个形状作为整个页面的主题造型，我们选择圆形，因为它代表者柔和，和时尚流行比较相称，然后在矩形框架里随意画出来，你可以试者在增加一些圆形或者其它形状。这样画下来，你会发现很乱。其实，如果你一开始就想设计出一个完美的布局来是比较困难的，而你要在这看似很乱的图形中找出隐藏在其中的特别的造型出来。还要注意一点，你不要担心你设计的布局是否能够实现。事实上，只要你能想到的布局都能靠现今的HTML技术实现。(如图1，图2)图1图2考虑到左边向左凹的弧线，为了取得平衡我们在页面右边增加了一个矩形(也可以是一条线段)。(如图3)图3l 增加页头：图3是我们从图1和2得到的布局造型，那么我们该增加页头了。一般页头都是位于页面顶部，所以我们为图3增加了一个页头，为了和左边的弧线和右边的矩形取得平衡，我们增加了一个矩形页头并让页头相交与左边的弧线。(如图4)图4l 增加文本：页面的空白部分加别加入文本和图形。因为在页面右边有矩形作为陪衬，所以文本放置在空白部分不会因为左边的弧线而显得不协调。(图5)图5l 增加图片：图片是美化页面和说明内容必须的媒体。在这里把图片加入到适当的地方。(图6)图6经过以上的几个步骤，一个时尚页面的大概布局就出现了。当然，它不是最后的结果，而是你以后制作时的重要参考依据。2.软件布局法如果你不喜欢用纸来画出你的布局意图，那么你还可以利用软件来完成这些工作。这个软件就是Photoshop。Photoshop所具有的对图像的编辑功能用到设计网页布局上更显得心应手。不像用纸来设计布局，利用Photoshop可以方便的使用颜色，使用图形，并且可以利用层的功能设计出用纸张无法实现的布局意念。（三）常见的布局结构网站的页面结构对于网民来说，其受重视和关注程度越来越高，从有某些特定要求（注重视觉感受的）用户上看大有超越其对网站基本内容需求的趋势，在这里我们先暂时撇开VI及色系色温等美学角度的具体论述，而从用户界面（UI）和用户体验（UE）的角度来设计或者说描述一下我们的网站页面结构会是怎样的。首先仍然是基于内容结构的分类原则：资讯类内容和功能类内容，再配合用户注册系统和积分系统的应用，我们将页面结构同样也分成两个类型：公共页面和个人页面。公共页面可以理解为以资讯类内容为主，无需网民注册就可以浏览的页面。此类页面是完全开放型的，任何普通网民都可以通过点击网页地址和网页内链接直接浏览和获取感兴趣的信息。此类页面从信息传播方式的角度上看，与传统型门户网站的内容页面相比较存在很大程度的相似之处，信息的传播仍然是单向的，网民在接受信息的过程当中仍然处于信息流的下游，缺乏互动性和个性化体验。要在保留这种页面机制的前提下推陈出新的话，我们可以运用新的技术手段，例如Ajax，让静态的快照型的页面变得更动态，这使得内容的变化可以在用户免刷新的状态下自动呈现，反应更迅速。个人页面是服务于网站注册用户的，页面内容以网站默认提供或用户选取的功能型服务内容为主。此类页面是在用户注册系统和积分系统的基础上，相对于公共页面而独立呈现的，其中的大部分内容（包括界面，布局等）将是由用户自主挑选，创建，组织和发布的，例如：个人Blog，个人点评，RSS订阅，Tag分类等等，这对于用户来说无疑更具个性和趣味性，从而大大增强我们网站对用户的黏着力，用户也会在喜欢使用的同时逐步产生对我们网站的依赖性。此外，个人页面也必将是部件化的，是可定制和可扩展的，这既符合现代人/网民相对独立的精神追求，也顺应Web Part的开发思想。需要强调的是，公共页面与个人页面并不是各自孤立的，而是相互交叉，有机互补的。从登入方式看，用户可以从公共页面进入个人页面，也可以从个人页面返回公共页面；从信息/内容的传播方向看，公共页面的内容可以被抓取或归纳到个人页面，注册用户通过个人页面创作的内容也可以发布到公共页面。只有这样，才能有效的叠加Web1.0和Web2.0各自的优势，并充分提升页面的效用。目前在Internet中常见的网页布局结构有：左右对称型、国字型、标题正文型、框架型、艺术型、Flash型、自由型等，下面分别论述。 1.左右对称结构布局 左右对称结构是网页布局中最为简单的一种。“左右对称”所指的只是在视觉上的相对对称，而非几何意义上的对称，这种结构将网页分割为左右两部分。一般使用这种结构的网站均把导航区设置在左半部，而右半部用作主体内容的区域。左右对称性结构便于浏览者直观地读取主体内容，但是却不利于发布大量的信息，所以这种结构对于内容较多的大型网站来说并不合适，如图7所示。图7 左右对称结构布局的网站 2.“同”字型结构布局 “同”字结构名副其实，采用这种结构的网页，往往将导航区置于页面顶端，一些如广告条、友情链接、搜索引擎、注册按钮、登陆面板、栏目条等内容置于页面两侧，中间为主体内容，这种结构比左右对称结构要复杂一点，不但有条理，而且直观，有视觉上的平衡感，但是这种结构也比较僵化。在使用这种结构时，高超的用色技巧会规避“同”字结构的缺陷，如图8所示。图8 “同”字型结构布局的网站 3.“回”字型结构布局 “回”字型结构实际上是对“同”字型结构的一种变形，即在“同”字型结构的下面增加了一个横向通栏，这种变形将“同”字型结构不是很重视的页脚利用起来，这样增大了主体内容，合理地使用了页面有限的面积，但是这样往往使页面充斥着各种内容，拥挤不堪，如图9所示。图9“回”字型结构布局的网站 4.“匡”字型结构布局和“回”字型结构一样，“匡”字型结构其实也是“同”字型结构的一种变形，也可以认为是将“回”字型结构的右侧栏目条去掉得出的新结构，这种结构是“同”字型结构和“回”字型结构的一种折中，这种结构承载的信息量与“同”字型相同，而且改善了“回”字型的封闭型结构，如图10所示。图10 “匡”字型结构布局的网站 5.自由式结构布局 以上3种结构是传统意义上的结构布局。自由式结构布局相对而言就没有那么“安分守己”了，这种结构的随意性特别大，颠覆了从前以图文为主的表现形式，将图像、Flash动画或者视频作为主体内容，其他的文字说明及栏目条均被分布到不显眼的位子，起装饰作用，这种结构在时尚类网站中使用的非常多，尤其是在时装、化妆用品的网站中。这种结构富于美感，可以吸引大量的浏览者欣赏，但是却因为文字过少，而难以让浏览者长时间驻足，另外起指引作用的导航条不明显，而不便于操作，如图11所示。图11 自由式结构布局的网站 6.“另类”结构布局 如果说自由式结构是现代主义的结构布局，那么“另类”结构布局就可以被称为后现代的代表了。在“另类”结构布局中，传统意义上的所有网页元素全部被颠覆，被打散后融入到一个模拟的场景中。在这个场景中，网页元素化身为某一种实物，采用这种结构布局的网站多用于设计类网站，以显示站长的前卫的设计理念，这种结构要求设计者要有非常丰富的想象力和非常强的图像处理技巧，因为这种结构稍有不慎就会因为页面内容太多而拖慢速度，如图12所示。图12 “另类”结构布局的网站三、常见布局结构在不同类型网站中的应用（一）搜索引擎式门户网站这类网站的主要功能是提供强大的搜索，如百度（baidu）、谷歌（google）等网站，另外也提供其他各种网络服务，如新闻、聊天、论坛、免费邮件等。这类网站往往需要先进的技术支持和大量网站维护及信息提供人员，目前这类网站多是由大型网络公司构建并运营。（二）综合性门户网站这类网站的内容特别丰富，信息比较综合，以新闻信息、娱乐资讯为主，如雅虎（yahoo）、新浪（sina）、搜狐（sohu）等网站。这类网站有较高的技术与维护要求，需要庞大的采编人员。许多大型的搜索引擎式门户网站也是综合性门户网站。（三）电子商务型网站这类网站主要用于实现在网上进行商务活动，以网上交易为主要功能。就其所面向的不同服务对象，可以分为企业对企业（business to business，B to B）、企业对消费者（business to customer，B to C）和消费者对消费者（customer to customer，C to C）等。目前公认最成功的是B to B，B to C被认为是最具潜力的未来消费市场的主要形式，C to C提供类似于二手市场一样的交易方式，更具亲和力。这类网站必须解决三个问题：商品如何展示、订单如何生成、订单如何执行。网站的成功与否，其关键在于业务模型的优劣，如亚马逊、阿里巴巴、当当、卓越等都是这类网站成功的案例。这类网站要求安全性高、稳定性高。一般而言，站点设计要求简洁大方，又不失热闹有人气的感觉，颜色多用蓝色等以表现信任感。（四）内容型网站（专题型或个人型网站）这类网站以内容为重点，用内容吸引人。它可以是一些从事信息服务性的站点，如文学站、下载站、新闻战等，也可以是普通的公司网站，用于发布公司产品、公司动态、招聘信息等。这种企业建立网站，主要是为了外界了解企业自身、树立良好企业形象，并适当提供一定的服务。一般该类网站以设计简洁大方为主，不需要太花哨的东西，以免转移浏览者的视线。这类网站是目前发展最迅速的，也是最具活力的网站。它主要提供创造者自身的信息，或者就某一专题