网页设计基本理论

《网页设计基本理论》由会员分享，可在线阅读，更多相关《网页设计基本理论（37页珍藏版）》请在金锄头文库上搜索。

1、网络应用基础本课程学习要求课程特点：实践性和实用性很强。 学习时 多做（自已实践为主，教师指导为辅） 多看（“掠人之美”，为我所用） 与老师的关系 师傅引进门（新手） 互相学习（高手） 充分掌握各种工具性软件 充分利用网络资源 密切注意各种新技术 努力学习各种综合性知识（美术、文学、编排 等）本课程考核：1平时作业：自选题材做网站(50分)参考评判标准：创意设计（布局、色彩、美感） 40%使用技术 20%页面编排 20%占用空间 10%文档说明（主题，风格，功能， 技术等） 20% 2期末上机考试：以课堂涉及到的技术为主(40分) 3考勤 10 分主要内容网页设计基本理论1网页创意设计2网页制

2、作的好帮手3DREAMWEAVER使用初步4进入21世纪，我们进入了一个崭新的信息时代，从传呼机 退出历史舞台到3G手机的使用，从电视接收闭路信号到数字电 视点播，人类社会正向数字时代的转变。Internet作为信息社会 的典型代表，正在全世界进行着越来越深刻的革命。它代表着 一种崭新的信息交流方式，它使信息的传播突破了传统的政治 、经济、地域及文化的阻隔，使信息传达的范围、速度与效率 都产生了质的飞跃。Internet是由成千上万的网站组成，而每个 网站都是由诸多网页构成，故网页是构成Internet的基本元素。 网页设计是网络视觉信息的编排及归类，这是网页设计的特点 ，也是身处于信息化、数

3、字化时代的当今设计者所必须具备的 基本素质。网页设计概述网页从最早的以文字为主的页面，发展到今天图、文、 声、像、多媒体并茂的页面，从以静态网页为主，发展到今 天可以像博客这样由浏览者定制的交互式动态网页，从实现 信息传达功能为主，发展到要求功能与审美兼得页面。“美” 与“技术”这两个要素的结合，正是如今网页设计领域研究的 中心内容。网页设计概述网页设计作为设计学科的一个分支，具有很高的实用价 值。它以科学技术和艺术的结合为基础，以外观表现形式为 主要手段，谋求网页界面的功能美与形式美，并体现网页的 时代感，以优良的设计努力满足浏览者的心理需求。从设计 类型上来看，网页设计应属于视觉传达设计的

4、领域，故而网 页设计的主要构成元素和设计指导原则都遵循视觉传达设计 的一般规律。网页设计概述对于网页设计来讲，其信息内容的有效传达是通过将各 种构成要素的设计编排来实现的。网页的构成要素包括文字 、图形图像、色彩、版式等构成要素。网页设计的构成要素及特性 网页设计的构成要素版式版式色彩色彩文字文字图形图像图形图像 文字的编排与设计文字在视觉传达中作为 页面的构成要素之一，除了 表意以外，还具有传达感情 的功能，因而必须具有视觉 上的美感，能给人以美好印 象，获得良好的心理反应。 作为信息传达的主要手段的 文字目前是网页设计的主体 ，是网页中必不可少的元素 ，也是网页中的主要信息构 成要素。 文

5、字的编排与设计要达到网页文字传达的有效性，必须重视文字编辑的整体效 果，使网页文字能给人以清晰的视觉印象，避免页面繁杂零乱 ，减去不必要的装饰变化，使人易认、易懂、易读。网页文字 的设计不能为了艺术造型而编辑，忘记了文字本身是传达内容 和表达信息的主题。 图形图像的创意与设计 在视觉顺序上，图形往往能首先吸引人们 的注意力，这是由于图形给人的视觉印象要比 文字强烈得多，图片的引入也大大美化了网页 。可以说，要使网页在纯文本基础上变得更有 趣味，最为简捷省力的办法就是使用图片。几 乎所有的网页都用到了图形，善用图形，可以 生动、形象、直观地表达网页的主题，增强网 页的宣传力、号召力和感染力，吸引

6、浏览者的 注意，引起浏览者的兴趣。网页可以图文并茂 地向用户提供信息，成倍地加大了它所提供的 信息量。对于一条信息来说，图片对浏览者吸 引也远远超过单纯的文字。 图形图像的创意与设计 图形图像必须完全符合网页的 主题，并以创新的构思和强烈的个 性，来使主题与表现两者较好地统 一，以有利于信息的传达。图片的 位置、面积、数量、形式、方向等 直接关系到网页的视觉传达。在图 文混排时，要注意统一、悦目、重 点突出，特别是在处理和相关文字 编排在一起的图片时，应考虑图片 在整体编辑计划中的作用，达到和 谐整齐。 版式的设计与编排 网页版式的设计是技术性与艺术 性的高度统一，是视觉传达的重要手 段，是网

7、页设计的重要组成部分。它 是指将文字、图形等视觉元素进行组 合配置，使页面整体的视觉效果美观 而易读，便于阅读理解，实现信息传 达的最佳效果。许多设计成功的网页 能够吸引浏览者，往往并非仅仅依赖 于几张引人注目的图片或醒目的标题 ，而是靠成功的版式设计。好的版式 首先能以清晰的视觉导向使浏览者对 网页内容一目了然，其次又以巧妙的 图文配置使浏览者获得悦目的视觉效 果。 色彩的搭配在网页设计领域，彩色的网页 总是要胜于单色的网页。网页 也是一种艺术品，因为它既要 求文字的优美流畅，又要求页 面的新颖、整洁，使用色彩可 以产生强烈的视觉效果，使页 面更加生动。 多媒体元素的选择网页中的多媒体元素在

8、能 够很大程度上增强对浏览者的 吸引力。浏览者希望在网上看 到更具创造性、更具吸引力和 更具情趣的网页，多媒体元素 正是实现这一目标的重要手段 。网页中所涉及到的多媒体元 素主要是音频、视频和动画等 。 动画动画 动画动画音频音频 视频视频 （1）音频 随着音频技术及语音控制技术的进一步发展和普及，以音频进行 人机交流满逐步成为实现网页交互性的重要手段。在网上浏览时时常 可以发现一些网页设置了背景音乐，伴随轻柔优美的乐曲，使浏览者 在网上冲浪成了更加惬意的休闲活动。在网页中常用的音频格式有： WAV、MIDI、MP3、Real Media等。目前支持WAV格式的环境很多，但WAV格式基本上都是

9、保存没有 压缩过的音频，因此文件比较大，不便于下载。MP3是在尽量保持良 好音质的同时，减小了文件的大小，是在网页中比较常用的音频格式 。Real Media是网络流媒体的文件格式，在非常低的网速下能够提供 较好的音质，但是需要有RealPlayer软件支持才能播放，因此不太适 合在网页中应用。大多数比较小的MIDI文件都可以提供比较长的播放 时间，若单独放在网页中，下载时间也是比较理想的。 （2）视频 网速的提高使得以视频为传达媒介 的信息成为可能，视频形象生动、易于 理解，对浏览者的文化水平要求不高， 具有较强的吸引力。而且在信息的层次 深入方面，视频表现也具有一定优势。 网络视频常见的有

10、视频短片，远程教学 ，视频聊天，视频点播等。但是，我们 还是要考虑网速问题，如果视频播放不 流畅也会影响浏览效果。常见的视频文 件格式主要有AVI、MPEG、Real Video 和MOV等。AVI是目前最广泛使用的一 种视频格式。 （3）动画 网页中，动画往往是第一视觉中 心。因此在传达重要信息时，动画是 有效的手段。动画具有调节页面的重 要作用，在以静态页面为主的网站中 适当加入动画，可以达到“动静相宜” 的良好视觉效果。从那些有着成功动 画设计的网页中可以发现，以动画为 主的表现手法往往能提高人们观赏页 面的兴致，增加浏览的乐趣，并引导 人们的思想意识。在Flash技术流行的 今天，动画

11、日益成为网页设计的热点 ，全站Flash的网站层出不穷，成为展 示商品与烘托效果的首选工具。 网页设计的特性 1.信息传达性虽然网页设计是将技术性与艺术性融为一体的创造性活动，但网页设计应 时刻围绕“信息传达”这一主题来进行。从根本上来看，它是一种以功能性为主 的设计。网页设计是一项创造性的工作，要求网页设计师通过有效吸引视线的 艺术形式清晰、准确、有力地传达信息。网页审美从属于网页内容，其本身不 可能独立存在。因而网页设计的审美功能不仅由界面形式所决定，很大程度上 也受到操作顺畅程度、信息接受心理及信息接受形式等因素的影响，具有很明 显的综合性。网页设计需要充分体现功能第一性的原则，以功能要

12、求为设计的 主要出发点，综合考虑、整体设计，以求达到最佳效果。 主题明确性对网页中主题形象的构思 要以注意明确、易于接受的原 则来设计。在网页中出现的视 觉形象要适应大多数浏览者的 口味，越明确、越通俗、越具 体越好。应尽量以各层次的浏 览者都能接受、理解、通俗易 懂的形象来吸引浏览者的注意 ，诱发他们的联想从而达成信 息的认知。尽量避免用费解的 、冷漠的形象进行说教式的信 息传递。 形式简洁性 形式简洁是网页应具有的外在特 征。这是加强网页界面的视觉冲击力 ，迅速传递信息的要求。 界面一致性 一致性是实用性的关键，网页设计应保持一贯性，网站内的各个页面应保 持一贯性，不能给用户带来混乱感，比

13、如导航的位置，页面的版式等。在使用 方面，可能的话应遵循普遍规律，设计得能让用户很容易适应；网页界面的构 成不能太复杂；主要内容应设计在引人注目的地方。同时，导航栏的使用要方 便，要考虑好使用的色彩系统或字体，去除不必要的内容，把信息分类设计得 成体系，让用户很容易就能找到想要的内容。 使用便利性 在网页设计方面，重要的一点就是要站在浏览者的立场上去进行设计。既 能给浏览者带来方便，又兼备视觉的冲击力，这样的网页才是每个网页设计人 员应思考并追求的东西。网页设计的定位任何网页都要根据主题的内容决定其风格与形式，只有形式与内容的完美 统一，才能达到理想的传达效果。目前，网页的应用范围日益扩大，几

14、乎包括了所有的行业，但归纳起来大 体有几类：商业性、娱乐性、文化性、教育性、综合性、行业性、区域性，各 种属性的网站又可细分为不同层次的专题性。根据网站的类型和网站所服务的 对象进行设计定位，才能有的放矢，在设计方面尽力做到合理。了解并满足服 务对象的视觉兴趣，考虑读者是如何与网站交互的，它可以使设计者与每一个 潜在读者进行交流。网页设计定位不同的网站对应不同的的浏览群体，特定的浏览群体意味着有特 定的主题内容。为此，网页设计定位应着眼于浏览者需求。时刻想着 浏览者的需求，并千方百计地满足他们的需求。 1风格定位风格即特点，是指网站的整体 内容与形式给浏览者的综合感受。 是能让浏览者明确青睐的

15、网站特点 。浏览者主要以视觉方式从屏幕上 接受网站的文本、颜色和从动画中 接收信息。形式与功能在大多数时 间里与内容具有互补性。如果网站 的形式和内容都显得不一般，浏览 的兴趣就会渐渐提升。 1风格定位（1）保证界面一致性，确保网站形成统一整体的界面风格。网页上所有的图 像、文字，包括背景颜色、区分线、字体、标题、注脚等网页构成要素要形 成统一的整体。这种整体的风格要与其他网站的界面风格相区别，形成自己 的特色。 （2）确保网页界面的清晰、简洁、美观，易访问。 （3）根据视觉流程，合理安排视觉要素，让读者在浏览网页的过程中体验到 视觉的秩序感、节奏感、新奇感。 功能定位功能定位是指为特定读者群

16、的各层次的需求服务，并尽量在简化操作。因 此，设计者应该对浏览者与对网页设计技术有同样的理解。在网页上使用最新 、最好的技术工具，提高网站形象是一个方法但并不容易，应尽量把新技术在 旧版本的浏览器下的设计限制降到最低点。考虑在新技术不支持它的情况下， 网页是否还继续有效。尽量设计与设备无关的界面，包括不同的屏幕尺寸、不 同的操作设备如仅有键盘，或鼠标与键盘的组合。 功能定位常用的方法是使用多种不同的浏览器来测试网页，并切换不同的分辨率， 尤其是宽屏显示器（16：9）和普通显示器（4：3）的情况，避免建议浏览者采 用哪种浏览器及分辨率的情形，因为这些信息浏览者需要打开网页后才能看到 ，况且浏览者的注意力根本就不在那里。因此，应尽可能适应多种分辨率，目 前通常使用的分辨率是在1024768下进行设计，并根据浏览者的浏览器自动定 位到对应该浏览器的界面，这才是理想的选择。 功能定位当用户访问需要插件支持的网页 时，前提是用户需要安装支持网页效 果的插件，