网页设计基本理论

网络应用基础,本课程学习要求,课程特点：实践性和实用性很强。学习时多做（自已实践为主，教师指导为辅）多看（“掠人之美”，为我所用）与老师的关系师傅引进门（新手）互相学习（高手）充分掌握各种工具性软件充分利用网络资源密切注意各种新技术努力学习各种综合性知识（美术、文学、编排等）,本课程考核：,1平时作业：自选题材做网站(50分)参考评判标准：创意设计（布局、色彩、美感）40%使用技术20%页面编排20%占用空间10%文档说明（主题，风格，功能，技术等）20%2期末上机考试：以课堂涉及到的技术为主(40分)3考勤10分,主要内容,进入21世纪，我们进入了一个崭新的信息时代，从传呼机退出历史舞台到3G手机的使用，从电视接收闭路信号到数字电视点播，人类社会正向数字时代的转变。Internet作为信息社会的典型代表，正在全世界进行着越来越深刻的革命。它代表着一种崭新的信息交流方式，它使信息的传播突破了传统的政治、经济、地域及文化的阻隔，使信息传达的范围、速度与效率都产生了质的飞跃。Internet是由成千上万的网站组成，而每个网站都是由诸多网页构成，故网页是构成Internet的基本元素。网页设计是网络视觉信息的编排及归类，这是网页设计的特点，也是身处于信息化、数字化时代的当今设计者所必须具备的基本素质。,网页设计概述,网页从最早的以文字为主的页面，发展到今天图、文、声、像、多媒体并茂的页面，从以静态网页为主，发展到今天可以像博客这样由浏览者定制的交互式动态网页，从实现信息传达功能为主，发展到要求功能与审美兼得页面。“美”与“技术”这两个要素的结合，正是如今网页设计领域研究的中心内容。,网页设计概述,网页设计作为设计学科的一个分支，具有很高的实用价值。它以科学技术和艺术的结合为基础，以外观表现形式为主要手段，谋求网页界面的功能美与形式美，并体现网页的时代感，以优良的设计努力满足浏览者的心理需求。从设计类型上来看，网页设计应属于视觉传达设计的领域，故而网页设计的主要构成元素和设计指导原则都遵循视觉传达设计的一般规律。,网页设计概述,对于网页设计来讲，其信息内容的有效传达是通过将各种构成要素的设计编排来实现的。网页的构成要素包括文字、图形图像、色彩、版式等构成要素。,网页设计的构成要素及特性,网页设计的构成要素,文字的编排与设计,文字在视觉传达中作为页面的构成要素之一，除了表意以外，还具有传达感情的功能，因而必须具有视觉上的美感，能给人以美好印象，获得良好的心理反应。作为信息传达的主要手段的文字目前是网页设计的主体，是网页中必不可少的元素，也是网页中的主要信息构成要素。,文字的编排与设计,要达到网页文字传达的有效性，必须重视文字编辑的整体效果，使网页文字能给人以清晰的视觉印象，避免页面繁杂零乱，减去不必要的装饰变化，使人易认、易懂、易读。网页文字的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容和表达信息的主题。,图形图像的创意与设计,在视觉顺序上，图形往往能首先吸引人们的注意力，这是由于图形给人的视觉印象要比文字强烈得多，图片的引入也大大美化了网页。可以说，要使网页在纯文本基础上变得更有趣味，最为简捷省力的办法就是使用图片。几乎所有的网页都用到了图形，善用图形，可以生动、形象、直观地表达网页的主题，增强网页的宣传力、号召力和感染力，吸引浏览者的注意，引起浏览者的兴趣。网页可以图文并茂地向用户提供信息，成倍地加大了它所提供的信息量。对于一条信息来说，图片对浏览者吸引也远远超过单纯的文字。,图形图像的创意与设计,图形图像必须完全符合网页的主题，并以创新的构思和强烈的个性，来使主题与表现两者较好地统一，以有利于信息的传达。图片的位置、面积、数量、形式、方向等直接关系到网页的视觉传达。在图文混排时，要注意统一、悦目、重点突出，特别是在处理和相关文字编排在一起的图片时，应考虑图片在整体编辑计划中的作用，达到和谐整齐。,版式的设计与编排,网页版式的设计是技术性与艺术性的高度统一，是视觉传达的重要手段，是网页设计的重要组成部分。它是指将文字、图形等视觉元素进行组合配置，使页面整体的视觉效果美观而易读，便于阅读理解，实现信息传达的最佳效果。许多设计成功的网页能够吸引浏览者，往往并非仅仅依赖于几张引人注目的图片或醒目的标题，而是靠成功的版式设计。好的版式首先能以清晰的视觉导向使浏览者对网页内容一目了然，其次又以巧妙的图文配置使浏览者获得悦目的视觉效果。,色彩的搭配,在网页设计领域，彩色的网页总是要胜于单色的网页。网页也是一种艺术品，因为它既要求文字的优美流畅，又要求页面的新颖、整洁，使用色彩可以产生强烈的视觉效果，使页面更加生动。,多媒体元素的选择,网页中的多媒体元素在能够很大程度上增强对浏览者的吸引力。浏览者希望在网上看到更具创造性、更具吸引力和更具情趣的网页，多媒体元素正是实现这一目标的重要手段。网页中所涉及到的多媒体元素主要是音频、视频和动画等。,（1）音频,随着音频技术及语音控制技术的进一步发展和普及，以音频进行人机交流满逐步成为实现网页交互性的重要手段。在网上浏览时时常可以发现一些网页设置了背景音乐，伴随轻柔优美的乐曲，使浏览者在网上冲浪成了更加惬意的休闲活动。在网页中常用的音频格式有：WAV、MIDI、MP3、RealMedia等。目前支持WAV格式的环境很多，但WAV格式基本上都是保存没有压缩过的音频，因此文件比较大，不便于下载。MP3是在尽量保持良好音质的同时，减小了文件的大小，是在网页中比较常用的音频格式。RealMedia是网络流媒体的文件格式，在非常低的网速下能够提供较好的音质，但是需要有RealPlayer软件支持才能播放，因此不太适合在网页中应用。大多数比较小的MIDI文件都可以提供比较长的播放时间，若单独放在网页中，下载时间也是比较理想的。,（2）视频,网速的提高使得以视频为传达媒介的信息成为可能，视频形象生动、易于理解，对浏览者的文化水平要求不高，具有较强的吸引力。而且在信息的层次深入方面，视频表现也具有一定优势。网络视频常见的有视频短片，远程教学，视频聊天，视频点播等。但是，我们还是要考虑网速问题，如果视频播放不流畅也会影响浏览效果。常见的视频文件格式主要有AVI、MPEG、RealVideo和MOV等。AVI是目前最广泛使用的一种视频格式。,（3）动画,网页中，动画往往是第一视觉中心。因此在传达重要信息时，动画是有效的手段。动画具有调节页面的重要作用，在以静态页面为主的网站中适当加入动画，可以达到“动静相宜”的良好视觉效果。从那些有着成功动画设计的网页中可以发现，以动画为主的表现手法往往能提高人们观赏页面的兴致，增加浏览的乐趣，并引导人们的思想意识。在Flash技术流行的今天，动画日益成为网页设计的热点，全站Flash的网站层出不穷，成为展示商品与烘托效果的首选工具。,网页设计的特性,1.信息传达性虽然网页设计是将技术性与艺术性融为一体的创造性活动，但网页设计应时刻围绕“信息传达”这一主题来进行。从根本上来看，它是一种以功能性为主的设计。网页设计是一项创造性的工作，要求网页设计师通过有效吸引视线的艺术形式清晰、准确、有力地传达信息。网页审美从属于网页内容，其本身不可能独立存在。因而网页设计的审美功能不仅由界面形式所决定，很大程度上也受到操作顺畅程度、信息接受心理及信息接受形式等因素的影响，具有很明显的综合性。网页设计需要充分体现功能第一性的原则，以功能要求为设计的主要出发点，综合考虑、整体设计，以求达到最佳效果。,主题明确性对网页中主题形象的构思要以注意明确、易于接受的原则来设计。在网页中出现的视觉形象要适应大多数浏览者的口味，越明确、越通俗、越具体越好。应尽量以各层次的浏览者都能接受、理解、通俗易懂的形象来吸引浏览者的注意，诱发他们的联想从而达成信息的认知。尽量避免用费解的、冷漠的形象进行说教式的信息传递。,形式简洁性形式简洁是网页应具有的外在特征。这是加强网页界面的视觉冲击力，迅速传递信息的要求。,界面一致性一致性是实用性的关键，网页设计应保持一贯性，网站内的各个页面应保持一贯性，不能给用户带来混乱感，比如导航的位置，页面的版式等。在使用方面，可能的话应遵循普遍规律，设计得能让用户很容易适应；网页界面的构成不能太复杂；主要内容应设计在引人注目的地方。同时，导航栏的使用要方便，要考虑好使用的色彩系统或字体，去除不必要的内容，把信息分类设计得成体系，让用户很容易就能找到想要的内容。,使用便利性在网页设计方面，重要的一点就是要站在浏览者的立场上去进行设计。既能给浏览者带来方便，又兼备视觉的冲击力，这样的网页才是每个网页设计人员应思考并追求的东西。,网页设计的定位,任何网页都要根据主题的内容决定其风格与形式，只有形式与内容的完美统一，才能达到理想的传达效果。目前，网页的应用范围日益扩大，几乎包括了所有的行业，但归纳起来大体有几类：商业性、娱乐性、文化性、教育性、综合性、行业性、区域性，各种属性的网站又可细分为不同层次的专题性。根据网站的类型和网站所服务的对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。了解并满足服务对象的视觉兴趣，考虑读者是如何与网站交互的，它可以使设计者与每一个潜在读者进行交流。,网页设计定位,不同的网站对应不同的的浏览群体，特定的浏览群体意味着有特定的主题内容。为此，网页设计定位应着眼于浏览者需求。时刻想着浏览者的需求，并千方百计地满足他们的需求。,1风格定位,风格即特点，是指网站的整体内容与形式给浏览者的综合感受。是能让浏览者明确青睐的网站特点。浏览者主要以视觉方式从屏幕上接受网站的文本、颜色和从动画中接收信息。形式与功能在大多数时间里与内容具有互补性。如果网站的形式和内容都显得不一般，浏览的兴趣就会渐渐提升。,1风格定位,（1）保证界面一致性，确保网站形成统一整体的界面风格。网页上所有的图像、文字，包括背景颜色、区分线、字体、标题、注脚等网页构成要素要形成统一的整体。这种整体的风格要与其他网站的界面风格相区别，形成自己的特色。（2）确保网页界面的清晰、简洁、美观，易访问。（3）根据视觉流程，合理安排视觉要素，让读者在浏览网页的过程中体验到视觉的秩序感、节奏感、新奇感。,功能定位,功能定位是指为特定读者群的各层次的需求服务，并尽量在简化操作。因此，设计者应该对浏览者与对网页设计技术有同样的理解。在网页上使用最新、最好的技术工具，提高网站形象是一个方法但并不容易，应尽量把新技术在旧版本的浏览器下的设计限制降到最低点。考虑在新技术不支持它的情况下，网页是否还继续有效。尽量设计与设备无关的界面，包括不同的屏幕尺寸、不同的操作设备如仅有键盘，或鼠标与键盘的组合。,功能定位,常用的方法是使用多种不同的浏览器来测试网页，并切换不同的分辨率，尤其是宽屏显示器（16：9）和普通显示器（4：3）的情况，避免建议浏览者采用哪种浏览器及分辨率的情形，因为这些信息浏览者需要打开网页后才能看到，况且浏览者的注意力根本就不在那里。因此，应尽可能适应多种分辨率，目前通常使用的分辨率是在1024768下进行设计，并根据浏览者的浏览器自动定位到对应该浏览器的界面，这才是理想的选择。,功能定位,当用户访问需要插件支持的网页时，前提是用户需要安装支持网页效果的插件，如果用户没有安装相应的插件，则不能正常播放。在保证效果的前提下，可以将Flash导出为低版本的格式，并提供相应插件的下载。保证没有插件时的网页显示的方法是，将图片做成背景，在背景上使用透明的Flash动画效果，从而保证在Flash不能播放的情况下，网页仍然是完整的图形。对于设置了Flash按钮的形式，可以提供与Flash按钮对应的超级链接文字或图片，从而防止Flash无法打开时网页无法浏览的情形。,以人为本,你越是了解你的读者，你的网站就越受欢迎。如果设计者忽略读者的需求，就不能保障一个网站的质量。,以人为本,（1）清晰一致的导航（2）站点地图查询（3）全站搜索功能（4）层次结构三五法则（5）提供位置的信息（6）文字字号的更改（7）优化信息的加载和显现,网页的类型,1.静态网页静态网页是相对于动态网页而言的，适合展示型的主题。我们平常所用的html所编写出来的就是属于静态的网页。静态网页的内容是相对固定的，其他读者不能影响他们浏览数据的形式或范围。简言之，静态网页仅有一种介绍方式，所有读者都必须处理此种方式，其中它与动态网页最本质的区别是：网页的内容一旦发布到服务器上，无论是否有用户访问，每个静态网页的内容都是保存在网站服务器上的，也就是说，静态网页是实实在在保存在服务器上的文件，而且最重要的是每个网页都是一个独立的文件。访问静态网页就像读一本杂志一样，读者可以选择来回翻动网页和以不同的顺序读文章，但内容是相对严格的，除了读该内容外，对它不能做任何操作。,网页的类型,1.动态网页动态网页适合交互型的网页主题，常见的有博客和论坛。动态网页是指实际上并不是独立存在于服务器上的网页文件，只有当用户请求时服务器才返回一个完整的网页。也就是说，它是返回到了客户端上的网页。例如网页文件是以ASP、PHP、JSP、ASPX为结尾就是动态的网页了。动态网页是指网页根据需求或读者的请求而生成的网页。动态网页的优点是网页可以根据读者的浏览条件或要求被创建。动态创建的网页的缺点在于创建起来更加复杂，并且通常服务器非常繁忙。当读者访问时，每一个主页都必须产生以提供给那些读者。,网页美工的需求网页设计是