椎磷筒胳棚炯嗜窗禹山帮红控孟坦群匡秉店致谎杰赤夹僧晕放腐舟樊虽澈第4分Web艺术设计方案第4分Web艺术设计方案第第4章章 Web艺术设计艺术设计釜禹警豹一跋密啼箕艺浆尝甚靶穷手困例衔低搭甚裤士油意乙元棒吠狄膜第4分Web艺术设计方案第4分Web艺术设计方案内容简介内容简介本章主要介绍Web设计所需的美学原理和设计法则，具体涉及到影响网页观感的色彩、文字、图像、导航元件以及版面设计等方面的知识。仁橙告侦遗烈貌慎灌痊蛀挑稻瞩歼截假基啥窗钮烟称阮构固阅厕滩祸韦贸第4分Web艺术设计方案第4分Web艺术设计方案学习目标学习目标1 1掌掌握握：技术和艺术之间的限制关系；网页色彩设计的一般原则；网页设计流程、网页元素的基本知识及基本制作方法；网页创意设计的原则以及设计要点；导航设计的原则；版式设计的基础知识。 2 2理理解解：网页设计中应用到的网络技术与传播特点、与传统媒体设计的区别；版式设计和平面设计的基本法则；色彩、文字、图像、版面设计中的一些概念。 3 3了解：了解：不同的制作软件、视听语言基础和网页设计的未来趋势。 柴隔遭弧扑泅倒戌摊圣硫所跑杆殖肯栖慷蜂栽侄犹席奶疽岗克未豆竞蔑材第4分Web艺术设计方案第4分Web艺术设计方案4.1 Web设计环境设计环境在进行网页设计和制作的过程中，了解网络的相关技术以及访问者的外在条件（如访问者的访问速度、计算机平台、使用何种浏览器等）是十分重要的。这些因素将影响你设计的Web文件大小和设计复杂程度。了解技术和媒体因素是网页艺术设计的前提，技术和艺术的结合是网页设计的最高境界。博拘易讫躬炒值杜磋橙祖传页缠巨箔堆泪息入状炕菊国雏朵污亢追蛇炮戎第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（1） 从技术为人服务的观念出发，应尽可能地从用户的角度来进行Web设计。要想有更多的人能很好地访问你所设计的站点，就应使Web站点适应不同的浏览器、操作系统和计算机平台访问的技术环境。冰彼型签都陵匡徒知亚牧吭诞逃岿好软股年钝睛仆焚耶牧躺洗册莆嫁桅痰第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（2）1、关于浏览器的技术 网页设计者首先面临的问题是如何使网页在不同浏览器中都能正常显示。由于每种浏览器对HTML文件标签的解释都不同，导致对HTML文件的显示方式的解释存在差异。因此设计者应尽量在多种浏览器环境中测试自己的工作，以便对用户使用的浏览器提出要求或说明。藉瓷潞待办骡荆宫蚀凿瘁贿靖冗掠项眩甘耐佛汕抖讣烟陪蕉腰睫潦泊仕奈第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（3） 为适合不同浏览器，可以采用以下几种方式：（1 1）采用可兼容的技术）采用可兼容的技术 尽量使设计的网页可以在各种浏览器中使用。不使用最新版本的HTML规范编码，便于与各种版本的浏览器兼容。（2 2）采用最新的技术设计）采用最新的技术设计 这就要求用户采用最新的浏览器，还要有能够显示特殊媒体类型的增强插件，这样才能跟上设计者的步伐。（3 3）采用对用户指定特定浏览器的方式）采用对用户指定特定浏览器的方式报蹲墙媳盏笔霄驹鹤挨癸瞧椭窑孟揖铰联良频朴谜钝舆磋勘贬撞瞄癣伶怂第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（4） 总之，在对浏览器的选择上，可以采用一种能促进渐进开发的策略。 例如：在创建站点时使用前一个旧版本的HTML来编码，然后慢慢向其中加入一些增强特性，不断向最新版本靠近，使用户使用新旧版本的浏览器都可访问。若要加入一些需要插件支持的动画或特殊效果，则要使用大多数浏览器都支持的开发工具。鞭铱须浅哀层纽哩拉佃吩最酥皑例烦舆氛裂舒疮硅暂茨作弦艰嘉数筛涎希第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（5）2、关于屏幕分辨率的技术 显示器的屏幕分辨率：是指显示器屏幕所能显示的象素总数，这一指标是由显示器和显示卡的性能决定的。通常用水平和垂直方向的象素数目的乘积表示。如：800600。 随着计算机显示器和显示卡性能的提高，在网页设计中，很多人已经将800600作为基本的分辨率。域序音甚门剩挤芝鳞呈忿迎俱运忧肇看婴懈莫锦兵春度弊习览训邹寞撞哀第4分Web艺术设计方案第4分Web艺术设计方案4.1.1 Web的技术环境（的技术环境（6）3、关于宽带的技术 网站设计者要考虑用户的低带宽连接。如果由于页面包含庞大的、详细的图形或复杂的动画而导致下载速度缓慢，用户就会在页面内容显示之前改去访问别的站点。因此网站设计者应在不同的连接速度下进行浏览测试，以获得在不同的连接速度下浏览网页的真实情况。 在设计时应尽量简化页面，少使用图形或将图形大小限制在1015KB范围之内。力诗诀钩逮椿鳃癌盼澜汝顶具杯兔串育氓圈勃举采刚去嗜认毋逻于外萤骆第4分Web艺术设计方案第4分Web艺术设计方案4.1.2 Web的媒体环境（的媒体环境（1） 考虑到计算机屏幕是网页的最终目的地，与传统的基于纸张的媒体完全不同，故在规划Web站点时应考虑以下几点：1、计算机屏幕的形状2、要有足够的对比度以利于用户阅读3、屏幕分辨率比印刷品低得多 由于信息显示的载体是计算机屏幕，因此必须针对屏幕进行设计，即应考虑布局、字体和颜色，以及它们如何显示。还应考虑超文本的非线性特点，把合适的链接与相关内容有机地结合起来。 尹扣曼孪揽闸替许炳驴污静彭盯济腹道聘洱氢肢菜紊织哮婶拳址却侈兴伐第4分Web艺术设计方案第4分Web艺术设计方案4.1.2 Web的媒体环境（的媒体环境（2）4、Web站点的观感观感：指用户必须接触到的Web站点界面。 由于用户访问站点的过程，就是观看并感觉站点的过程，他们可以根据站点允许的自由度，自主选择信息的访问路径。因此站点的观感就是站点的运行方式以及传达站点给用户的个性化设计。 玉逃屏呕埃串译梗甥孵胆化素便骗贺傈主券词卵铣瞬痈升更暮届普妖碱腆第4分Web艺术设计方案第4分Web艺术设计方案4.1.3 Web的设计流程（的设计流程（1）1、Web设计的两个阶段 Web的设计流程通常包含两个阶段： 第一阶段：第一阶段：了解客户需求，然后根据不同的网站类型进行创意，同时与技术人员沟通，了解设计所需的技术难度，确定方案。 第二阶段：第二阶段：制作出页面样例，与客户交流征求意见，然后修改，直到确认，由制作人员协助完成设计。 应该注意：制作前进行完整详尽的规划是十分必要的。 翅夷蹲搔篱据器廓摇古汤伞究甥峪有闸鲸谱壮蛔埋慰肃晓享鸽借彬梆蔗段第4分Web艺术设计方案第4分Web艺术设计方案4.1.3 Web的设计流程（的设计流程（2）2、Web设计的一般步骤 Web站点的设计一般有如下步骤，但为了达到用户所希望的观感，实践中还需要灵活掌握。1、首先要明确网站的性质和目的，这样才能针对不同类型的网站进行创意。2、要分析网站的用户，使设计者的目标与用户目标尽量和谐统一。 3、确定页面的结构和框架。有时可根据好的创意来决定页面结构。4、应在不同机器、浏览器和不同速度下测试网页，及早查处所出现的问题。 我王芯劳益鳞华滦剃沧约抄莎涧棘窜婿怜慢辆歧磋唁耐忱河维痔霖哼至舵第4分Web艺术设计方案第4分Web艺术设计方案4.1.3 Web的设计流程（的设计流程（3）3、Web站点的主要类型 了解Web站点的类型可在设计网站时进行更好的创意。目前网上主要的Web站点类型有：1、公告牌2、出版物3、虚拟画廊4、产品支持5、电子商务和在线购物 6、内联网和外联网7、特殊兴趣、大众兴趣及非盈利性组织入涯示变借鞍肪祸审作邑余拯腆涕蕉敲郸赢虚辉服挫滑宦豹静樱辕菱前自第4分Web艺术设计方案第4分Web艺术设计方案4.2 Web的设计元素的设计元素4.2.1 4.2.1 色彩色彩 网页的色彩选择和搭配在网页制作中起到非常重要的作用，也是网页设计的重点之一，因为它将决定浏览者对网站的第一印象，好的色彩搭配可以使网页独具魅力，相反则提不起浏览者的兴趣。网页色彩的选择包括：色调、背景、文字、图表、边框、链接应采用何种色彩，如何搭配等内容。狸琼斗跋泊私吏飘素坡头移矛电太翻期评柑枝居悲呢娶羌啊禽巡员渐彻销第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（1）1 1、网页设计的色彩基础、网页设计的色彩基础（1） 颜色的产生色彩感觉：当光照射在物体上时,物体的反射光刺激人的视觉细胞，并作用到大脑，从而引起彩色感觉。物体色是由于其反射特性引起的。（2）色彩的属性（或三要素） 任何一种色彩都具有三个要素：色相、饱和度、亮度（或明度）。坯卢区策陵部咸划蓝吴尽啄构帧戌峭诉配恶嚷眶趴谎吃企胖磁居咋涌芝意第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（2）1 1、网页设计的色彩基础、网页设计的色彩基础 色相（Hue）：指颜色的种类，它反映了颜色的基本面貌和性质。如：红、绿、蓝等各种颜色。 饱和度（Saturation）：指颜色的深浅程度或浓淡程度。一般鲜艳的色彩其饱和度都比较高，较刺眼，故饱和度高的颜色一般不用作网页背景。 亮度（Brightness）： 指颜色的明暗程度。如白色亮度高，黑色亮度低；黄色亮度最高，紫色亮度最低。 非彩色（指黑色、白色和各种深浅不一的灰色）只有亮度特征，没有色相和饱和度的区别。涕坐林硼钓仁桶锚酌训亡趁睁巷祸署眼帅隶器哗怕顶摸膏镇黄庙僳灿香贫第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（3）1 1、网页设计的色彩基础（续）、网页设计的色彩基础（续）（3） 色彩的三原色和色环 三基色：任何色彩都是由三种基色（或原色）混合而成。根据物体是否发光有两种基色系统： 发光物体的三基色（RGB）系统：红（R）、绿（G）、蓝（B）；等量的三基色混合成白光（适合发光的物体，如显示器）。 不发光物体的三基色（CMYK)系统：青（Cyan）、紫或洋红（Magenta）、黄（Yellow）；等量的三基色混合成黑色（适合不发光的物体，如颜料）。痹碗降斩裳按搞吁矛度窗碰文沥钓蜘唯蝶扬嗣娟卡绍撞簧汽绰羊帮谤萧充第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（4）1 1、网页设计的色彩基础（续）、网页设计的色彩基础（续）（3） 色彩的三原色和色环 色环：将色彩按“红黄绿青蓝紫红”依次过渡渐变，就可以得到一个色环。 在色环中，可以将颜色分为：暖色、中性色和冷色几种。 肛涩灾衷惹纪幂村啡馒浮浇肌潍缀坷憋粹欲三轧咒掺布织翟趋贸箍绪像凭第4分Web艺术设计方案第4分Web艺术设计方案色彩的色环色彩的色环获硼挞杀黔睦敷赎芥碑吠碱稠苦杠惺撩充捎钝驭跪塑芋烩孤茹鳖陪析鳃争第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（5）1 1、网页设计的色彩基础（续）、网页设计的色彩基础（续） 在24色色环中，根据位置的不同，可以构成4种关系，它们分别是： 同类色：色环中相隔45的两个色相。属较弱的对比效果，是极为协调和单纯的色调。 临近色：色环中相隔90的两个色相。色彩倾向近似，色调统一和谐，感情特征一致。 对比色：色环中相隔135的两个色相。属中强对比效果。 互补色：色环中相隔180的两个色相。是对比最强的色组，富于刺激性，有强烈的视觉冲击力和热烈感。褒凛那汛贤贝避谷胀额叼潍进抡躲伐凛栓氯卧践瞳蛹囤撑捉隋繁咕毁栈博第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（6）2 2、色彩感觉、色彩感觉（1） 心理感受 人们在面对色彩时，心理会受到颜色的影响而变化，这种变化虽然有个人的差异，但大多数会有冷暖、轻重、软硬、华丽朴素、冷暖、轻重、软硬、华丽朴素、积极消极积极消极等几方面的心理效果。 虽然色彩本身不带任何含义，但人的心理感觉将它们分成不同的类别。 稽吻寨忠腾拇耻甫务麻万俱卵噎幢龋愚痒溺树浪权更池撤些屑救圈涨硷烙第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（7）2 2、色彩感觉（续）、色彩感觉（续）（2） 颜色的联想 色彩的联想作用虽然是属于心理学的问题，但它的适用性在设计上是很重要的。由于色彩与人的情绪有着微妙的联系，因此利用不同的色调设计网页会给浏览者不同的心理感受。 跋缴薪牛吩交汉孟粮斌窖肛磺惶泄蓉抱充奢想天怨炸堵扑抓弦废绘登皑各第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（8）2 2、色彩感觉（续）、色彩感觉（续） 一般认为，不同的色调对浏览者的感觉有如下规律： 红色：是一种激奋的色彩。代表热情、奔放、喜悦、庆典，有刺激效果，能使人产生冲动，有愤怒、热情和活力的感觉。 绿色：介于冷暖色之间，代表植物、生命、生机、蓬勃向上、和睦、宁静、健康、安全的感觉。 橙色：具有轻快、欢欣、热烈、温馨、时尚的效果。 黄色：代表高贵、富有，具有快乐、希望、智慧和轻快的个性，它的亮度最高。砧共逢央赂对曲傻郭勇徽涎迂瘤哪宪渠奖腰峨遣窃据涌橱定否擅皱假靳哗第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（9）2 2、色彩感觉（续）、色彩感觉（续） 蓝色：是最具凉爽、清新、专业的色彩。代表天空、清爽、深远的感觉，能体现柔顺、淡雅、浪漫的气氛。 紫色：代表浪漫、爱情，并给人以神秘、压迫的感觉。 棕色：代表土地。 白色：代表纯洁、单纯、简单，具有洁白、明快、纯真、清洁的感受。 黑色：代表严肃、庄严、夜晚、沉着，具有深沉、神秘、寂静、悲哀、压抑的感觉。 灰色：代表阴暗、消极，具有中庸、平凡、温和、谦让、中立和高雅的感觉。略众商竞为为锥陡双凶糕铃菌斧苏罗酉岔思塑启缉秤垮痞远点娱炊亨汗谴第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（10）2 2、色彩感觉（续）、色彩感觉（续） 有些色彩有双重的意义，此外不同的国家、民族、年龄层次的人对色彩有不同的理解，因此设计者必须根据使用对象的特点来选择色彩，以便尽量符合人们普遍接受的意义。 色肺读破啦笨柯身莆袍傻某冉淌雹炯哗笼仅贫醚轩嗽挎鞘搓厅粕恰因涩酒第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（11）3 3、色调和色彩的搭配、色调和色彩的搭配（1）色调：在颜色三要素中，色相容易区别，但饱和度和亮度有时不易区别，因此将亮度和饱和度合在一起称为色调。色调是色彩作品的总倾向和总特征，是直接传达设计意念的关键。 色彩的主色调分为以色相关系为主的调子，如：冷色调、暖色调、红色调、绿色调等；也可分为以灰色、明暗关系为主的调子，如：明灰调、暗色调等。绣敖赞罗跃淡雷摩喳沿载瓶拧坷贬敲等爹脓续资仪焉薄庙锗宏玫垛霄涵榷第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（12）3 3、色调和色彩的搭配、色调和色彩的搭配（2 2）配色：）配色：指对两种以上的颜色进行组合和搭配，以便产生更美的效果。主要有以下几种方式： 色相搭配：色相搭配：分为类似色搭配和补色搭配两种。主要利用了“当两种颜色放在一起时，会产生相互反衬的对比效应，并各自走向自己的极端”。 亮度搭配：亮度搭配：分为高亮度、中亮度、低亮度和明暗对比。暗色与高亮色对比，会给人清晰强烈的刺激；中性色与低亮度色对比；给人模糊、朦胧、深奥的感觉；纯色与高亮度色的对比，给人跳跃、舞动的感觉；纯色与低亮度色对比，给人以强硬和不可改变的感觉。归谦萌束养蛰垮敷离熔阻扑凋宽注抵沤雌履碾剥甭吗龙帘逮厨菏府舟瘪枕第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（13）（2 2）配色（续）配色（续） 饱和度搭配：饱和度搭配：分为高饱和度、中饱和度、低饱和度的搭配。纯色或三基色之间的对比给人的视觉刺激最强烈，使色彩的效果更明确和肯定。通常可通过加入黑色、白色或灰色来降低饱和度。 整体色调搭配：整体色调搭配：设计作品给观众的感受是由整体配色效果决定的，作品的最终的配色效果都由整体的色调而定，并取决于配色的色相、亮度、饱和度的关系和色彩面积大小的关系。厦揣褥昆活三未谆辽款原泌册肪吏委驳屁兔杰围坦己漱掂坟芦赞酉镑全善第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（14）4 4、计算机色彩、计算机色彩 计算机显示器显示的任意一种色彩都是由RGB（红、绿、蓝）三种基色光混合而成的。在HTML语言或其它图像处理软件中，色彩的表达是用这三种颜色的数值来表示的。如：红色（255，0，0）【十进制】或（FF0000）【十六进制】，十六进制颜色值为6位数字，前2位定义红色，之间2位定义绿色，最后2位定义蓝色。菜杂慎僻崇诧炼魂俺朵吮所荐贩救拜澜阁江径船匿抱罐付郧狰挑锡规叹踢第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（15）4 4、计算机色彩、计算机色彩 在计算机显示中有关色彩的概念有：（1 1）色彩模式（主要有三种）色彩模式（主要有三种） RGBRGB模式：模式：任意色彩由RGB三基色构成适合于本身发光的物体的颜色（如显示器）。 CMYKCMYK模式：模式：图像由青（C）、洋红（M)、黄（Y）和黑（K）四种颜色混合而成。适合于不发光的物体颜色（如：彩色印刷及绘画领域） LabLab模式：模式：Photoshop的标准模式，也是RGB向CMYK转换的中间模式。腿垃扒馏养亲墅臃擞爆内涛染疵咱捻鲤棕瑟呻希脾浆鸽除膊回冬跳你绩状第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（16）4 4、计算机色彩、计算机色彩（2 2）色深）色深 色深是指显示卡的数模转换器的位数，是决定显示卡所能输出的颜色数的重要参数。显示卡所能输出的颜色数与色深的关系为： 颜色数2色深位数 通常见到的GIF图像的色深为8位，可以显示256种颜色。32位色深能显示1677万种颜色，称为真彩色（True Color）。离俄赘亲苑轿扁锻尘祸瓶彭蓑凿气娩甭窃智许客互亨常膝三惜瑟毫传倔包第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（17）4 4、计算机色彩、计算机色彩（3 3）混色）混色 当在低色深的显示器上显示高色深的图像时，将丢失很多颜色信息，这时图像看上去成立颗粒状，这种现象称为混色。（4 4）网络安全色）网络安全色 当色深为8位时，显示的颜色数为28256种，一般可在各种显示器上显示，并称这种具有256种颜色显示的情况称为网络安全色。哇玲蹿尼奶莫参疲萧找夹札滔毁汇卵陆惠蛊园坯美旁遍烯继瘴啥趟众仅侩第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（18）5 5、网页色彩搭配的原则、网页色彩搭配的原则 色彩搭配应以大众欣赏习惯为标准，同时兼顾网站专业特点和艺术规律，一般应遵循以下原则：（1 1）色彩的合理性：）色彩的合理性：网页的色彩要引人注目，同时还要兼顾人眼的生理特点，不要用大面积的高纯度色相，这样容易使人疲劳。（2 2）色彩的艺术性：）色彩的艺术性：色彩应服务于网站内容，和网站的气氛和主要内容相适应。（3 3）色彩的独特性：）色彩的独特性：要有与众不同的色彩搭配，突出网站的个性。阿社拂掀珠啄必帘列谐傀泣失针两掩裴接越球槛冒酶斧办额吵馈吝超坐诌第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（19）6 6、搭配技巧、搭配技巧 从人的记忆效果看，对彩色的记忆是黑白的3.5倍，因此彩色页面比完全的黑白页面更吸引人。（1 1）非彩色的搭配：）非彩色的搭配：黑白是最简单、最基本的搭配；灰色是万能色，可以和任何色彩搭配，也可帮助两种对立的色彩和谐过渡。（2 2）彩色的搭配：）彩色的搭配：由同类色（指同一颜色的变淡或加深）搭配出来的页面看起来比较统一、和谐，有层次感，比较适合技术性和专业性站点。而临近色的搭配可使整个页面色彩丰富而不花哨。对比色搭配时，应以一种颜色为主调（占有较大面积），同时辅以对比色，起到丰富点缀的作用。张依忽寒赠犹闷闷翌羡怠睦豢撤柑永疹釜框要牛辕践膜夺函妨砒乙缠校账第4分Web艺术设计方案第4分Web艺术设计方案4.2.1 色彩（色彩（20）6 6、搭配技巧、搭配技巧（3 3）网页色彩掌握的过程）网页色彩掌握的过程 随着网页制作经验的积累，颜色使用有这样一个趋势： 单色 五彩缤纷 标准色 单色 总之，不要将所有颜色都用到，要保持主色调的一致，初学者最好将颜色控制在三种以内。痹泥放褒轴倡绰绷笑逞告蒂患柜绪恍乘磋里议屎沸谷研匿磋丈咕丽眶栋伐第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（1） 虽然网络上可承载的元素越来越多，但文字一直是很重要的部分。在同一语言环境中，文字的传达是比较准确的，因此文字是任何出版物（包括网络）的核心。 网页中的文本有两种状态：HTML文本和图形文件格式的文字图像。 控鞭汉渣方养欺掘落惊弦妻鸽叫曼刃钞催勘悍席戚蔷坞蒲朗楔跪蹦了郧牡第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（2）1 1、字体、字体 文本构成的因素是字体和字号，它们都是由汉字软件自动生成的。字体是一种灵活的媒介，对不同字体的选择可以表达感情、语调及结构。 字体也是网页的主要组成部分，是信息的重要载体。正确选择字体不但关系到网页的美观，还对浏览者的阅读及信息的传达有直接的影响。 计算机能不能显示某种字体，主要取决于计算机内的字库里是否安装了这种字体。 死亚拟录卢驾嘱掺闭狰票刷痈散挽寄闪指昧或爆肘钨袁荚烂仑恃身墓菜七第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（3）2 2、字体的分类、字体的分类 字体基本上可分为英文字体和中文字体两大类。（1 1）英文字体：）英文字体：种类很多，大体上可分为有衬线字体和无衬线字体两大类。（2 2）中文字体：）中文字体：常见的中文字体有：宋体、黑体、楷体、仿宋体，此外还有各种美术体（如：圆体、综艺体、幼圆体、琥珀体、彩云体、小姚体、长美黑等）、各种手写体（如：隶书体、新魏体、行楷体、古印体、广告体、海报体、新潮体等）。续摆诸棱哗由浮辜窖瘫窥豫怂沁孝腺平羽羌段典衬潭驾频栽团获包招告夜第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（4）2 2、字体的分类（续）、字体的分类（续）（3 3）衬线和字族）衬线和字族 衬线（衬线（SerifSerif）：）：指加在字母主笔画上两端的修饰性元素，其形态差异反映了不同时代字体风格的变化。 字族：字族：在计算机图形软件中，字体一般包含字的长扁、粗细、斜直等变化的多款变体，组成字的家族，我们称为字族。患阴雌苔蕉编矣教碟促掣冶保掩具浩杨城厩虐尿秆劫姿赏竞珊钉菱药偏酸第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（5）3 3、字体在网页中的使用、字体在网页中的使用 据研究，有衬线的字体读起来更快，更易识别。因此，报刊、杂志等读物的正文往往采用宋体。 字体及其大小决定了文本的可读性。一般在一个页面中，最好不要使用超过三种以上的字体，否则显得杂乱，没有主题。此外在纸张上易于阅读的字体，可能在屏幕上却很难阅读。 最后，应确保文本的颜色与背景的颜色有足够的对比度以利于阅读。周绚柳村砾扯崩焉甭罪积沃丧洲攀瞧兑其晰扁拒砚儿矮沂驳淀奎夜科炙伏第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（6）4 4、字号和字距、字号和字距 （1 1）字号）字号 计算机中的字号是指字体在显示器上的显示尺寸大小。网页的字号大小直接关系到阅读效果和页面容量。 字号的大小有以下三种标定方法： 号数制：从初号、一号到八号，有16种之多。号数越大，字体越小。 级数制：从8级到96级，级数越大，字体越大。 点数制：从5磅到72磅，有21种之多。磅数越大，字体越大。点数制是世界流行的计算字体的标准单位。锯惭潍狮技倪掸裤彬汐棵郝底研栖枉硫酵游借宵语讳央裔惊狮驱菱坎寒拟第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（7）4 4、字号和字距、字号和字距 （2 2）字号在网页设计中的使用）字号在网页设计中的使用 网页文字的字号变化宜少不宜多，一般用9磅或11磅（相当于WORD的五号宋体字），9磅以下的字体不易辨认，12磅以上则浪费页面空间。选择少量的字体和字号会使页面看起来显得更干净。一般可选三种字号：14磅用于标题；12磅用于副标题；9磅用于正文。如果在网页设计中使用了一种用户没有安装的字体，则浏览器将用缺省字体显示（PC中的英文缺省字体是：Time New Roman）。瀑负枉姓牛饺律踩挺审卉姑宦背串密麓烩弥铲与戚桶宁生链妮励抉琢盂屡第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（8）4 4、字号和字距、字号和字距 （3 3）字距和行距）字距和行距 字距：字与字之间的距离。行距：行与行之间的距离。字距与行距之间的比例关系：行距至少要大于字距。加宽字距和行距有轻松、疏朗之感。行与行之间要考虑适当增加空白，以便阅读。赔止赌詹走滋操全靴漂袒挫下捷氢补奖触父压肮疙渗溢跪棚步朔漂渺奔羌第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（9）4 4、字号和字距、字号和字距 （4 4）文本的编排方式）文本的编排方式 文字块的形状由编排形式决定，在版面设计中，主要有如下编排方式：两边对齐：文字组成的字群从左至右长度均齐。显得端庄严谨。左（或右）对齐：文字组成的字群以左（或右）边界对齐。中间对齐：以中心为轴，两端距离相等。图文绕排：文字绕图形边缘自由出入，产生生动随意之感。涉遏米载附凳簿恶秘冷抖福皿楼违告树扶宵恨柱社贩豆佰妓郁灯努抠打邪第4分Web艺术设计方案第4分Web艺术设计方案4.2.2 文本（文本（10）4 4、字号和字距、字号和字距 （5 5）网页中文本使用的注意事项）网页中文本使用的注意事项 网页中每一页的文字应尽量完整每一页应有清晰的标题尽量少用闪烁字在文字使用上要特别注意易读性和趣味性一般网页文字字体是稳定的，阅读要求识别轻松，浓淡适宜。而标题字部分则相当于广告用字，参与表现的尺度是无限的，但必须积极参与信息传达和内容表现。撑袭蹈骋肩味人腋痰悲烷议详巨凄篇刺赎拢寸抨惮吊熄寒郁羞澜泞韭尤哲第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（1）图像也是传达信息的重要方法之一，图像也是传达信息的重要方法之一，和文本相比，图像更加直观、生动、易和文本相比，图像更加直观、生动、易于理解和接受。图像可以将那些文字无于理解和接受。图像可以将那些文字无法表达的信息传达出来。文字的精确性法表达的信息传达出来。文字的精确性和图像的模糊性结合，使得信息的传达和图像的模糊性结合，使得信息的传达更加完整。更加完整。 忿串惜厢臣鳃慑婶缀可线核泵故疏蝇严胀陷怀匠嫌蔡薯就矩毖乙窟慈新翱第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（2）1 1、网页图像的文件格式、网页图像的文件格式（1 1）数字图像的类型）数字图像的类型 根据计算机对图像的处理方式及应用软件的使用环境不同，可以将图像分为两大类：位图图像和矢量图形。位图图像：位图图像：又称为栅格图像。是用小方形栅格（即象素）组成的图像，与分辨率有关。矢量图像：矢量图像：由矢量定义的直线或曲线组成的图像。矢量图形与分辨率无关。牢诞邪沉妆池益恐耸渤考尘善抄朋傀诽醋揭按荆丘梁瘦河团活宅宽们阐鞋第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（3）1 1、网页图像的文件格式（续）、网页图像的文件格式（续）（2 2）图像文件格式基础）图像文件格式基础 图像是以文件的形式存储在计算机上的，这些文件有各种各样的格式，每种都有自己的特点。下面介绍一些常见的图像文件格式。1) GIF1) GIF格式文件：格式文件：GIF是为网络图形传送而设计的，采用了无损压缩技术，色深为8位。GIF还有两个重要特点：透明和交错显示。2) JPG2) JPG格式文件：格式文件：JPG是适合于照片和连续灰度图像的最佳格式，色深24位（真彩色）。适合具有丰富细节的图片。些狼褥贡硫忻朔夷退摇叠搪拧芬必登肝绷腋碧颊秩爸蜡斋售挫朱喀亿茹碉第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（4）1 1、网页图像的文件格式（续）、网页图像的文件格式（续）（2 2）图像文件格式基础知识）图像文件格式基础知识 以上两种图像格式主要用于网页设计中的，此外，还有以下几种图像格式：3) PNG3) PNG格式文件（格式文件（Portable Network GraphicsPortable Network Graphics）：）：PNG（便携式网络图形格式）是专为Web设计，但由于缺乏浏览器支持，一直未能普及。PNG采用了无损压缩技术，支持8位索引颜色、16位灰度级和24位真彩色、透明和交错。可将8位图像压缩为比GIF更小的文件格式。颓档芬奈琅素奔近扦趋孕既姆朱咳奄阔素来秩遣蜂茨惟条必炊远村帖其础第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（5）1 1、网页图像的文件格式（续）、网页图像的文件格式（续）4) BMP4) BMP格式文件（格式文件（BitmapBitmap，位图）：，位图）： BMP格式是Windows中的标准图像文件格式，有压缩和不压缩两种形式。BMP以独立于设备的方法描述位图，有黑白、16色、256色、真彩色等多种形式，能被多种Windows应用程序支持。弄辐辱泼嘲兼钾辑买惩抗貌杆冕宁殷膊丁凤鸣睫您员匝乐免容燃叁童或药第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（6）1 1、网页图像的文件格式（续）、网页图像的文件格式（续） 5) TIF5) TIF格式文件（格式文件（Tag Image File Tag Image File FormatFormat）：）： TIF最早是为了存储扫描仪图像而设计。也是PC中使用最广泛的图像文件格式。TIF支持24位真彩色，有压缩（无损压缩）和非压缩两种形式。其变体很多，兼容性较差。妓尸两蛰刊村我唬披葫寞荷企砍纯饰先伤撵唱绅纪聂浓蹄删趋前范圃早钮第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（7）1 1、网页图像的文件格式（续）、网页图像的文件格式（续）6) TGA6) TGA格式文件（格式文件（Tagged GraphicsTagged Graphics）：）： TGA是Truevision公司为其显卡开发的一种图像文件格式。现已成为数字化图像，以及运用光线跟踪算法所产生的高质量图像的常用格式。其结构比较简单，是一种图形、图像通用的格式，大部分为24位或32位真彩色。幂湛宇腻野嫁殃脏骄缕塘域烟夯河敷己罪执孵孵寥萨角俭纲涵经挺蒙品美第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（8）1 1、网页图像的文件格式（续）、网页图像的文件格式（续）（3 3）WebWeb图像的应用图像的应用 Web中的图像并不像传统媒体，只要越清晰越好，网络上的图形图像，为了方便计算机 进行存储、交换和处理，必须要有统一的格式，而且还要受到网络传输速度的限制。因此，如何减少图像大小并保证一定的质量，是Web设计的一个重要问题。为了使浏览者尽快看到图像，Web图像采用交替或顺次显示图像文件的方法。如交错显示可以使图像边下载边显示，图像逐渐变清晰，不必等图像全部下载完毕才看到图像。浊街悉态底胳酝忽雕帜钾缺择吊嚏晋阔帘情然订免栽够献笺华芭寻声灶滥第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（9）2 2、选择图形图像设计工具、选择图形图像设计工具 目前流行的Web图形图像制作工具软件主要有：Adobe公司的Photoshop，这是网页设计中常用的图像处理工具。Adobe的ImageReady是一个微型的Photoshop版本，后来被集成到了Photoshop中。Adobe的Illustrator是一个高端的绘图工具。Macromedia公司的Firework是一款集图形处理和文本处理于一体的功能强大的应用软件。购侩癌铰灌付傣好神钞淋士触饺脆坷霜罗妒恒国沦娱击曰讥凸召铅它枉拐第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（10）3 3、网页中的图像、网页中的图像 就形式而言，网页中的图像大体上可分为两大类型：照片类和绘画类。照片类图像：照片类图像：是指由数码相机、扫描照片得到的图像。它们属于全色调图像，可全方位地表现事物的形态、结构、空间、体积、质感等视觉属性。绘画类图像：绘画类图像：一般来自于手工绘画或软件制作。如：卡通图画、装饰图案、文字图形以及用图形图像软件加工过的照片等。霍拧邻覆扰酉鼎晾稳娘究热恶勃位挚迢箭购眉超亮舅劣攘咐榔符滑邑篇揽第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（11）4 4、网页版面中图像的编排、网页版面中图像的编排 图像在吸引读者的注意力、传递信息、美化版面等方面具有独特的魅力。图像的编排主要体现在以下几方面：（1 1）图像的选择与剪裁）图像的选择与剪裁（2 2）图像形状的变化）图像形状的变化（3 3）虚实的变化）虚实的变化乐细嗡聪沾畏庸层姥萌曹越屠霜留忘态噪食习逛砍生常伯筏取闺赏娜牺拨第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（12）5 5、视觉标识（、视觉标识（VIVI）设计）设计 视觉标识（VI：Visual Identity）是指通过视觉语言的运用来树立形象和传播信息。其应用一直是CIS（Corporate Identity System：企业识别系统）的基础和最直接的表现形式。CIS的策划和运作往往以VI来表现，是CIS的一部分。当一个网站在主题和数据信息、图文材料具备之后，下一个问题就是网站的VI策划和形象设计，它主要包括以下几方面：码喷焦钡涂仿瑰赎哼被蹄锯蝇恫拭婪世甜览遂雏技阳砌戌订株鹃琉业瘩泼第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（13）5 5、视觉标识（、视觉标识（VIVI）设计（续）设计（续）（1 1）设计网站的标志）设计网站的标志网站标志设计和创意可从以下几种思路开始。选用能代表公司形象的人物、动物、花草等。对于专业性网站，用本专业有代表性的物品作为标志。最常用和简单的方式是用本网站名称的英文字母作标志。曾条邦诀锥锋喀引品亏妇惑做乐绿硕励觉愤札糠翠勤灸罪黍密囤深驭漓卵第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（14）5 5、视觉标识（、视觉标识（VIVI）设计（续）设计（续）（2 2）选择网站的标准色彩）选择网站的标准色彩 网站给人的第一印象是来自视觉的色彩感受，因此确定网站的标准色彩是网站建设的重要一步。这项工作又称为定色调。色调不同的色彩及色彩搭配所产生的效果是不同的。 每个企业网站一般都有自己的标准色。这种标准色一方面要能体现企业的形象，另一方面要有自己的特点。标准色一般只能是一种，并以此为中心，利用它的明度变化产生不同的色彩。标准色要广泛运用于网站的标志、标题、主菜单和背景色块，给人以整体统一的感觉，其它色彩只是作为对比和衬托。披教他霄狡披钢荒扦侵酗侮舞郝宛谱县钝货刷崇浓吵括庞履隔啼刚锁淌断第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（15）5 5、视觉标识（、视觉标识（VIVI）设计（续）设计（续）（3 3）选择网站的标准字体）选择网站的标准字体 网站的标准字体是指网站用于标志、标题、主菜单的特有字体。由于字体也具有它的性格和表情特征，因此，为了体现站点与众不同的特有风格，可以根据设计的需要，选择一些特别字体。应该注意的是，使用各种特殊字体一般只能用图形图像的形式出现，因为浏览者的计算机字库中若没有这种特殊字体，则这种效果就无法显示出来。腰汾肋瘁咀莽监酥颈械砍爵铀冷歌晦扦公半鼠陵败儡烙噎朴腮摧燃铁鼓觅第4分Web艺术设计方案第4分Web艺术设计方案4.2.3 图像和图像和VI设计（设计（1）5 5、视觉标识（、视觉标识（VIVI）设计（续）设计（续）（4 4）构思网站的广告词）构思网站的广告词 网站设计者应努力用一句话、一个词来高度概括网站的性质特点和网站目标，用简练的句子来传达信息。综上所述，标志、色彩、字体和广告词四个方面是一个网站树立VI形象的关键，是网站的门面工作。讼桌雇绘逢婴辗圆喇癌孺逊摔宙誊澎笔脖粗拢宋祖惑辕噶眼涂迄社舜脑痹第4分Web艺术设计方案第4分Web艺术设计方案4.2.4 动画（动画（1） 网页中的插图可以像电视动画一样真实生动，有人用情景化设计来描绘将来的网页设计。 无论人或动物的视觉，总是先注意到运动着的东西。因此，很多广告公司都将自己的网络广告做成动画的形式，以便获得最大的宣传效果。伙煤镭普涅腺锋霉斌咬疯陛遮匿插丧蝗街诞春洽编缎买刑月那酪巷巾筹瞄第4分Web艺术设计方案第4分Web艺术设计方案4.2.4 动画（动画（2）1 1、WebWeb动画的发展状况动画的发展状况（1 1）动画的初级阶段）动画的初级阶段（2 2）无处不在的）无处不在的GIF89aGIF89a（3 3）动画的新贵）动画的新贵ShockwareShockware（4 4）用）用JavaJava来实现动画来实现动画（5 5）FlashFlash动画和动画和StreamingStreaming技术技术煎艰况歹巫帽堂蒙弟再泻朋邦辖屑风墓臼枫悯尽蛆愿猩决仕贼证干沃奠惩第4分Web艺术设计方案第4分Web艺术设计方案4.2.4 动画（动画（3）2 2、动画制作的工具、动画制作的工具GIF Animation:GIF Animation:网页中较早采用的动画软件就是GIF Animation。其原理类似于播放幻灯片。Adobe Image Ready:Adobe Image Ready:其原理和制作效果都和GIF Animation 一样。FlashFlash：这是Macromedia公司专为网络设计的交互式矢量动画设计软件。但播放Flash动画时必须在浏览器中安装插件。挎侍挨故丁红素骤傲挣孺衍伎归睁卧垣挪橇揽识击莎沮隆抨页肄寓多型酶第4分Web艺术设计方案第4分Web艺术设计方案4.2.4 动画（动画（4）3 3、动画原理、动画原理传统的动画是由很多静态画面序列连续地播放形成的。计算机的动画和传统的动画原理基本上是一样的，只是有些名词叫法不同。 在计算机上，每个动画单元称为帧（Frame）。帧速率（fps：Frame per second，指一秒钟动画所包含的帧数）是动画概念的一项重要指标（如：录像带的帧速率为：30fps；电影为：24fps；计算机上的动画一般达到15fps时，播放就很流畅了）。广又遍多哲钙瘤桩棕基君隋后蛔风拇亭束宏柒羊叶痔羹啊吮墩庸鞍及秘帽第4分Web艺术设计方案第4分Web艺术设计方案4.2.4 动画（动画（5）4 4、网页中的动画广告、网页中的动画广告 广告的任务是在最短的时间内传达一个简洁明了的信息或意念，因此网络动画广告的创作比一般意义上的故事情节动画更为自由。 其次，网页上放置的动画应少而精，一帧网页上一般放一幅动画为宜，若超过两幅，则会相互影响，整个网页会令人眼花缭乱，反而干扰阅读。或者设计“跳过”Flash动画的按钮，使不想看的人可以选择。储是恭硬操聪堤戊屎票怖北等元们父踞代响晰葱粗屡翟佬玫本撮姿喉店梯第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（1） Web多媒体在信息的传递中扮演着重要和独特的角色，因此一个网页设计师要时刻跟踪这些技术的发展状态，对多媒体的应用应有比较理智的认识。 音频、视频和动画都是多媒体技术的一部分。由于网络速度的限制，目前视频和音频基本上是被作为单独的一部分链接进页面的，还不能成为页面布局的有机部分，故很难从设计角度进行总结，目前主要还是考虑下载和播放的技术，并介绍一些概念性的知识，以便对视频和音频知识有进一步的了解。筐邓届膀内苍柑顽荒它札弗屏志霹辛贤顿横焚蜜倘鹤蒲涡砰冲腿权印厌街第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（2）1、音频（1 1）概述）概述 声音是多媒体的一个重要方面，可最大限度地增强展示效果，刺激观众的兴趣。除了可通过互联网直接播放的音乐（采用所谓的“音频流”技术）外，还有那些通过网上下载传播的流行音乐格式（如MP3、VQF等）。数字音频文件是声波的数字化表示，可以通过不同的平台、以不同的格式使用。常见的AIF和WAV格式的标准数字音频文件并未经过压缩，有时不太适合在网上使用。袖玩画泌藩眉混宵纤皮坤骇顽妆喜戊画仍杨港镑驱股殿击古导惰箩仔督玄第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（3）1 1、音频、音频（2 2）网上常见的音乐格式）网上常见的音乐格式 网上使用的音频格式文件大部分经过了压缩，主要有：MIDI（Musical Instrument Digital Interface）格式：RA（Real Audio）格式：MP3 （MPEG1 Player 3）格式：MP4格式：VQF格式：WMA格式：WAV（Wave From Audio File）格式：AIF格式：AU格式：洁爱贩爹根跋梁芯券泽帜塔竹朝厌落促手窿嗓位恫贿急亦浴岿柄阿犊谍从第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（4）1 1、音频、音频（3 3）相关概念）相关概念 数字音乐：数字音乐：多媒体中的音乐有两类：音乐和音效音频流：音频流：一种专门的音乐压缩技术，可实现下载与播放同步（典型的有RA，还有微软的WMA）。音乐的编辑：音乐的编辑：一般的音乐格式，可利用各种音乐编辑软件进行剪辑、回声、反相、格式转换等编辑功能。音乐的网上发布：音乐的网上发布：常用的网页制作工具可以简单地把诸如MIDI、WAV等格式文件作为网站的背景音乐，通过一些专门软件，其它格式的文件也可以较容易地在网上进行播放或发布。陆筐确盂尿脆赶叹坯话瓮集柒魄芯雨奋听禾欺辖靡崖托简隙贴巍址击释谐第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（5）2、视频 计算机上使用的是数字视频（电视电影视频是模拟信号），它是将传统的模拟视频片断捕捉并进行转换而成（如：VCD），下面介绍有关视频格式和视频嵌入技术方面的知识。捉米襄报具咎阻即枝代胚撤毅挨奋湛没乓野椭秀窑凭氨鸳众攫示构艇獭渔第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（5）（1 1）数字视频的主要格式）数字视频的主要格式 MOVMOV格式：格式：这是Apple公司推出的视频格式，相应的播放软件为Quick Time（1991现在），也可以在PC上使用，目前已成为桌面视频产品的工业标准。Quick Time在“视频流”技术方面取得了不少成果，能在Internet上播放和存储相当清晰的视频/音频流。 AVIAVI格式：格式：这是在Windows上使用的视频文件格式，为Windows95以后的操作平台开发（1992现在）。目前AVI已成为PC上最常用的视频数据格式。原始的AVI格式的视频/音频部分均未经过压缩处理，故一般体积较大，但图像和声音质量都很好。AVI和MOV都是跨平台兼容的，只需各自安装相应的播放软件即可。胎肘弘倦接淀悉试孙传世洲榷毁赁翼鞋揭娇原滩活恬牟炔眶雨衬尘常苗踞第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（6）（1 1）数字视频的主要格式）数字视频的主要格式 RM RM（Real MediaReal Media）格式：）格式：这是Real Network公司制定的音频/视频压缩规范，它包括了流文件格式的RealAudio和RealVideo文件，主要用于低速率的网络上实实时传输视频/音频信息的压缩格式。 ASFASF格式：格式：ASF是微软公司为了和Real Media竞争而开发出来的一种可以直接在网上播放视频节目的视频文件格式。其视频部分采用了先进的MPEG4压缩算法，音频部分采用了微软的WMA压缩格式。其压缩率和图像质量都不错。司班汰访札客铂甄酞追蝴栅柄粒刽牲奄灯茵锰注嘱抠键坷脚为冷葵辱瘫担第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（7）（2 2）将视频）将视频/ /音频文件嵌入到音频文件嵌入到HTMLHTML的的方法方法 链接：链接：这种方式就像放置任何其它链接一样。 嵌入：嵌入：采用这种方法可以对网络上的视频文件边下载边播放，或者可以让视频信息与其它内容出现在同一页面。但是这要求用户端有相应的插件（Plug in）才能播放。饺商仔玉扔焊住墒伤婶聘稿飞棒瑰雾御汽竹嘴镣蔚询棠疾锤鸥漏个辉摹甚第4分Web艺术设计方案第4分Web艺术设计方案4.2.5 视频和音频（视频和音频（8）3 3、虚拟现实（、虚拟现实（VRVR） 虚拟现实（Virtual Reality）是一项与多媒体技术密切相关的边缘技术，它通过综合应用计算机图像处理、模拟与仿真、传感技术、显示系统等技术设备，以模拟仿真的方式给用户提供一个真实反映操作对象变化与相应作用的三维图像环境，从而构成虚拟世界，并通过特殊设备（如头盔和数据手套）给用户提供一个与该虚拟世界相互作用的三维交互式用户界面。 HTML是面向二维的，而VRML（Virtual Reality Modeling Language，虚拟现实建模语言) 是一个开放的、面向三维的、可扩充的三维场景描述语言。咸喀玲藐码俩摸樱梯匹认慧挛违鞘缴羊聊线哲塘湘信却案洋磷换风曲丈涪第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（1）1 1、概述、概述 与传统媒体相比，网络媒体最大的特点在于它的交互性。 交互式设计就是在无序且繁琐的信息之间创造一个具有吸引力的、高效的浏览路线，给人以极大的自由度去创造和选择他们想要的信息，并轻易地了解整个系统与组织的内容。 对浏览者而言，网页是杂乱无序的，要在大量的网站和网站的各部分中找到自己想要的信息，优秀的导航和交互设计是十分重要的。垄冠埔攻所焦逃楔釉笨人肮漂罚昌撕甸浑叠晌瓣肺工戚招才矿馈包鼻蕉帚第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（2）2 2、人机交互的常用方式、人机交互的常用方式 人机交互的常用方式主要有： （1 1）问答式对话交互）问答式对话交互 这是最简单的人机交互方式。该交互功能使用自然语言提示用户进行回答，用户通过键盘输入字符串来进行回答。这种方式的对话，简单的采用单选或多选方式，将答案限制在很小的范围内，再根据用户的回答去执行相应的功能，或将使用者的信息记录保存，放入数据库或资源库中。恭殆海蒸栽筋貉耙窃持跃雍竞习辗堕型贡哲况撇灭抛拖盅殃登哮佛渠归者第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（3）（2 2）菜单交互）菜单交互 这是使用较早、最广泛的人机交互方式。其特点是让用户在一组多个可能对象中进行选择，各种功能的选择项以菜单形式显示在屏幕上。 若选择项目较少，可以将菜单项按线性或顺序排列；若选择项过多，且选择项对应功能本身又有逻辑上的层次结构，则可分层次来组织和安排菜单交互功能。菜单的深度（即菜单的层数）和宽度（指同一层中各菜单项的总数）的组织安排将直接影响用户对菜单的记忆、操作和选择速度，因此应综合考虑。吭办火鳃侗板靴剃偶干滥汕式专迸孰鬼窿迄斧泽塞咖串挫满蒲孩在迭乙躁第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（4）（3 3）功能键）功能键 使用键盘上的功能键可以代替输入命令或选取功能菜单，同样可以完成交互功能。常见的功能键有：Insert、Delete、Enter、Esc、Ctrl+C、Ctrl+V等。功能键的好处是可以减少记忆负担、加快操作、减少输入和出错率等。（4 4）图符）图符 使用图符可以形象、逼真地反映各种操作功能，使理解和操作变得更加容易。图符的优点是具体形象，缺点是无法明确表达语义，必须用文字辅以说明。牡芒清肛倡囊梧百格址糟瑰攀雏蟹号钻敛迁牌求铀版垢扔牺妻异卒炉筛巷第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（5）（5 5）查询语言界面）查询语言界面 查询语言是用户与数据库的交互媒介，是用户定义、检索、修改和控制数据的工具。很多网站的搜索功能就是查询的一种方式。数据库查询语言分为数据认定、数据操作和数据控制三部分。（6 6）自然语言界面）自然语言界面 指直接用人的自然语言（汉语或英语）来与计算机进行交互和通讯，这是最理想和方便的。在这种交互中，计算机能理解用户自然语言（包括键盘输入文本、手写输入、语音输入等）表达的请求，并转换成交互功能语言，然后提供相应的功能。实现自然语言界面必须解决语音输入识别、人工智能等方面的技术。椰批诡艾颊丧殃添革竞赂锌周革扰瘟偿求坊瓣泡刷绊殖边猪有举嫉字劝镊第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（6）3 3、人机交互的特性、人机交互的特性（1 1）简易性）简易性 在进行人机交互设计时，应尽量让计算机更主动、做更多的工作，而让操作者尽量少做。（2 2）友好性）友好性 指用户操作交互功能时的复杂性。操作复杂性越低，说明交互功能越容易使用，用户感觉使用过程是轻松愉快的，则用户友好性越强。薪针佛洒凶皖旗籍省喧六沦塔屈蝗堵佃搞冶俺堡准斡毕责召局抿伊床很绕第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（7）（3 3）灵活性）灵活性 灵活性包含以下含义： 交互功能应完全适应各类用户（初级、高级或专家型用户）。 用户可根据需要制定或修改交互方式。（4 4）明确性）明确性 指交互的功能和行为对用户是明确清楚的。即不管交互功能本身如何复杂，用户对交互功能是清楚的，并可随时预测交互功能的行为。琅遂融晃鬃悠债循吱菜谜子涣已差涨镭用叶蛹扑辱施糟狞覆票择楷殴舞辣第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（8）（5 5）一致性）一致性 一致性主要体现在指示、反馈方面的一致性。具体是指网站的不同部分，甚至不同页面之间，具有相似的交互处理布局、相似的人机交互方法及相似的信息显示格式等。（6 6）容错性）容错性 容错性是指交互式设计应能够对可能出现的错误进行检测和处理（如用户的密码发生错误是应能给出友好帮助提示，帮用户找回密码）。酣把跺仇数垃艇蛛淀穆硝蹭噎怕庸漠了拇悠滋湖昼允纷象斥班温盎桑蜂智第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计（导航和交互设计（9）（7 7）反馈性）反馈性 反馈性是指用户从界面一方获得的信息，表示网络对用户动作作出的反应。若交互功能没有反馈，用户就无法判断他的操作是否为计算机所接受、是否正确以及操作的结果如何。（8 8）图形化）图形化 图形具有直观形象、信息量大的优点，因此使用图形和形象的比喻手法来表示交互和操作时，会使用户的操作和反馈更直接、可视和逼真。在交互式设计中常用到图标和按钮有形式简洁清晰、强调共性和个性的特点。鹿思喷藻肖踌纸仙怔脾讽撮税坟吸挥痹晦熙堡至育曲冷玫撤儿皋钓悄瓶逐第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（10）4 4、超链接设计、超链接设计（1 1）超文本）超文本 超文本是一个编写和组织信息的丰富环境。有了超文本链接，用户可以按自己的顺序和方式去浏览信息，随心所欲地从一个感兴趣的地方跳到另一处，并立即找到所需的信息。（2 2）友好交互设计）友好交互设计 超文本链接可以呈现给用户一种全新的阅读方式。链接可以使用户迅速回到页面的导航部分、站点地图或主页。应尽量安排体贴的链接，不要让用户穿越太多的页面层次来寻找所需的信息。驼吻爱胜找憋窄风瓮从应开架鸟嫁螺骏梗服肆匹架优獭甜泉干轴掇撑伸突第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（11）4 4、超链接设计、超链接设计（2 2）友好交互设计）友好交互设计 友好的交互设计还应能让用户知道他在网站中所处的位置，应提供足够的位置信息，使用户清楚地知道： 我在哪？ 提供当前所处页面与站点其它页面的关系。 我能去哪？ 提供当前页面及内容类型 我怎样去哪？ 提供一致的、易于理解的链接 我如何回到起点？ 提供可实现返回的功能。卜你峰皑控冻阐柠仁宠胸长萧纳伴够纂来嵌逛蹬抬触散纂腕元仕滴越钢槽第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（12）4 4、超链接设计、超链接设计（3 3）组织网页上的信息）组织网页上的信息 信息设计是决定一个网站成功与否的重要因素。如何使链接、按钮与网页有机地结合起来，既醒目，又和谐统一，是网页设计师的重要任务。A A、安排链接结构的原则、安排链接结构的原则 要符合浏览者的思维习惯和浏览习惯 要使网站中最重要的信息有更多的机会与浏览者见面。爵复凭灸改壬樱枣刮敛泵倔氟搏鉴米僵潭焉锣铝视枚乾撇叉刁渠爬壁汗不第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（10）（3 3）组织网页上的信息）组织网页上的信息B B、组织网页信息的常用方法、组织网页信息的常用方法 建立易于管理的信息段：建立易于管理的信息段：可将内容分成小的文件用超链接将它们组织在一起。 控制页面的长度：控制页面的长度：若某页面的显示超过三屏，则应进行页面分割。 使用超文本：使用超文本：提供承前启后的链接将概念、事实或定义连接起来，并尽力预料用户的信息需求。 最后，对所提供的信息应采用方便的阅读方式。婴酬尖灶辫蹄隧窥绝努予绿匿滔匡链号侍惦序欢嗣扼汇吱箍贴拉擒贺啄莱第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（10）4 4、超链接设计、超链接设计（4 4）增加合理的导航链接）增加合理的导航链接 导航栏：导航栏就像网站的目录一样，通过它可知道网站有那些栏目。每个栏目的内容如何。导航栏的每部分都与站点的其它页面相链接。 其它链接设计：导航栏可以使用户访问站点的各个页面，目录页面可以使用户准确地找到所需的内容。对于较长的页面可以在该页面建立若干个书签，便于阅读。总之，应根据需要采用尽可能多的链接形式。睬卖影崎翔纂丸给匝堤泵历痴矣越嚏激莆疹丛火妓连涨怜矛屎贯淄欣饥椅第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（11）5 5、网站目录和链接结构对页面设计的影、网站目录和链接结构对页面设计的影响响设计原则与目的： 设计网站目录结构的原则是方便网站的管理与维护；设计链接结构的原则是方便浏览者的阅读。对页面的影响： 采用何种链接结构将直接影响到版面的布局。总之，设计链接结构的目的在于用最少的链接得到最高的浏览效率。叫辆恩凶脆演博惠窿啪仟美仔倚亩殷邢斑笼扭哼袱宠蚕杰丁耀确蔼杰本掺第4分Web艺术设计方案第4分Web艺术设计方案4.3 Web页面设计页面设计虽然Web网页设计不同于传统的平面或版式设计，但从其表现形式来看，还是以图像、文字为主的静态设计。因此与传统的平面和版式设计有一定的类似。宣颜曹肥列缠蕴沟履遏豺般与柿树柞蔷弓招零零坡侧接要多侗轩窄驶逐弦第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（1）1 1、概述、概述 版面：版面： 指页面编排所具有的外在形式，是各种内容编排布局的整体表现形式。 版面设计的任务：版面设计的任务： 吸引读者的视线，增强阅读的饿兴趣，帮助读者理解信息。 版面设计的基本原则：版面设计的基本原则： 主题鲜明，形象突出 便于阅读，形式美观 编排有序，布局合理 莫截躬机账旅歼傻卢迷途先幕缝询拓预漾界奸械题趟苫锰旭痉洗荐锄晕措第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（2）2 2、平面构成基础、平面构成基础（1 1）抽象的概念：）抽象的概念： 指在造型活动中，不以现实形态为依据，而专门研究点、线、面、体在空间的相对排列关系及形成的一定表现力。版面设计要受到抽象美术的新的审美观念的影响。 如将版面中的万物归纳为点、线、面、体、空间、色彩等基本要素的构成。（2 2）版面设计结构组织的目的）版面设计结构组织的目的 通过各种运动现状，激发阅读的兴趣，传达一种心声，唤起读者的想象，达到信息与情感的沟通，从而使版面结构产生特有的生命力。 将主题意义、力感运动、情感表现，通过形状、数量、方向、大小等转化为版面组织、版面结构的变化，研究它们的形式关系，将有助于对版面的理解与分析。恬凉砚毅袖鸵仟胎甚济襟贯痕墒事铱厨烛澳玛谦陛酶鹊福饥剁吗如按采碧第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（3）（2 2）潜在的结构）潜在的结构 版面中一些潜在的线与点，可衍生出各种各样的结构，使版面的布局更清晰和合理。这些版面结构往往与视觉流程的设计和形式法则的运用有密切的联系。（3 3）点的结构）点的结构 点是版面设计中一个最灵活的要素，其大小、形态、色彩、空间位置等的变化，常使版面产生不同的视觉效果。 单一的点具有放射力，起集中或凝固视线的作用，在版面中形成紧张的力点感觉；两点或更多点时，在视觉上会产生动感，它们之间产生的力线起着互相制约的作用；三点以上形成面，点与点的角度产生力的方向。仪吝达焙劣系沿发吧管憋独卢构痉摊藏烯喧趁驻栖追挨讫杠盖溃邯羹顷哟第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（4）（4 4）线的结构）线的结构 线是点移动的轨迹，线有长度和宽度，有方向及空间场的作用，在版面中起连接、咬合、支撑、聚合、加固以及构筑版面骨架的作用。线有直线、曲线、虚线、实线等各种。 1 1）直线：）直线：直线坚硬、明确，具有男性的气质（如坚定的头脑、理性的思考、顽强的意志、果断的行为等），具有明确的方向性。此外，不同粗细的直线往往起到分割空间的作用。 2 2）曲线：）曲线：曲线在版面设计中优雅、柔和、细腻、有感性，与直线相比，曲线富于变化，动感强而富有活力，具有多变性和含蓄性，是女性的象征。 曲线大体上可分为几何曲线和自由曲线两种。雄蹈蝎甫今伞阂敬创膛暴诌惰雁桐洗得新撮顾袭焕吻武汀优承朵饰播合几第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（5）（5 5）面的结构）面的结构 面是点的密集与放大，是线的加强与重复。面具有几何形态（严谨圆满）和不规则的自由形态（活泼浪漫），在空间中产生层次性的美感。面的表现主要是依据线的表情而定。 直线形的面：直线形的面：简洁、单纯； 折线形的面：折线形的面：含有痛苦与紧张之感； 曲线形的面：曲线形的面：柔软、富有弹性； 圆和椭圆的面：圆和椭圆的面：完美又显温暖。呈阴獭忱指若羡予转宙放弟藩塑坛坊靴嚎膨板哉李曰豫墙卑抛贬级腾纪砷第4分Web艺术设计方案第4分Web艺术设计方案4.3.1 版式设计基础（版式设计基础（6）3 3、版面设计的形式法则、版面设计的形式法则 一个页面要设计得具有美感，令人赏心悦目，对眼睛具有吸引力，能引起人潜意识的注意，快速准确地传递信息。否则会带来误导甚至思维混乱。 大量的研究发现，能引发视觉愉悦效果的规则是：比例、均衡、对称、统一、简洁与力度、节奏韵律、虚实空白等等。 版面中的图文编排并不是一门严谨的科学，不可能有绝对的法则可循，也不可能用定量分析来描述，只有在大量的设计实践中才能熟练掌握。尘茬咀脯撤演谆枉忿逼耽胃爸翱镀郎蛰拓副恕橱布颓挞秒吝婪骚祈碗契帚第4分Web艺术设计方案第4分Web艺术设计方案4.3.2 Web综合设计（综合设计（1）1 1、网页的布局、网页的布局 布局：布局：指的是在一个限定的面积范围内，合理安排布置图形、图像和文字的位置，把文章的信息按照轻重缓急得秩序排列的同时，将页面美化装饰起来。 网页的版面：网页的版面：是指从浏览器看到的完整的一个页面，页面的结构是由所选用的框架或页面模板所决定的。衅汤骗獭证嫉仗馁隐涯骤搬搬逼吏脸致美四侣成伺涨穿集兆藏挺浚津辰千第4分Web艺术设计方案第4分Web艺术设计方案4.3.2 Web综合设计（综合设计（2）1 1、网页的布局、网页的布局 网页的布局主要包括以下内容：（1 1）构思与勾画草图：）构思与勾画草图：草图的目的是将脑海里朦胧的想法具体化（2 2）细部设计）细部设计（3 3）量化描述）量化描述樱度藉加首氛盂陡禹壁呻旱斟舌巳豢饱盈茹滚辰扰漂旷捎鬼按吱晰觅齿曳第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（12）4 4、超链接设计、超链接设计（3 3）组织网页上的信息）组织网页上的信息 信息设计是决定一个网站成功与否的重要因素。如何使链接、按钮与网页有机地结合起来，既醒目，又和谐统一，是网页设计师的重要任务。A A、安排链接结构的原则、安排链接结构的原则 要符合浏览者的思维习惯和浏览习惯 要使网站中最重要的信息有更多的机会与浏览者见面。全贺装酝盘灰槽呜弃澈竹的热者藏宏眼项队抄固操坏族哄集妇寸罪种垢励第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（10）（3 3）组织网页上的信息）组织网页上的信息B B、组织网页信息的常用方法、组织网页信息的常用方法 建立易于管理的信息段：建立易于管理的信息段：可将内容分成小的文件用超链接将它们组织在一起。 控制页面的长度：控制页面的长度：若某页面的显示超过三屏，则应进行页面分割。 使用超文本：使用超文本：提供承前启后的链接将概念、事实或定义连接起来，并尽力预料用户的信息需求。 最后，对所提供的信息应采用方便的阅读方式。秆耸养粒饮毕幸称敛靠猾朴膜押埔轧鲍筷旁岳换几慧账兄单要湿之侦潮驴第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（10）4 4、超链接设计、超链接设计（4 4）增加合理的导航链接）增加合理的导航链接 导航栏：导航栏就像网站的目录一样，通过它可知道网站有那些栏目。每个栏目的内容如何。导航栏的每部分都与站点的其它页面相链接。 其它链接设计：导航栏可以使用户访问站点的各个页面，目录页面可以使用户准确地找到所需的内容。对于较长的页面可以在该页面建立若干个书签，便于阅读。总之，应根据需要采用尽可能多的链接形式。玻箩导音亥炳薪贵撑漫狂爹录雅痊公腰饭陡佳谈享厕惠缨蹄烫粘有葛绿画第4分Web艺术设计方案第4分Web艺术设计方案4.2.6 导航和交互设计导航和交互设计（11）5 5、网站目录和链接结构对页面设计的影、网站目录和链接结构对页面设计的影响响设计原则与目的： 设计网站目录结构的原则是方便网站的管理与维护；设计链接结构的原则是方便浏览者的阅读。对页面的影响： 采用何种链接结构将直接影响到版面的布局。总之，设计链接结构的目的在于用最少的链接得到最高的浏览效率。绪额逮甜铲划部禹俺糜烙柯薄具蓖哺洲隘锰碰抉申冯凑汕压昼毯撵汐趣匈第4分Web艺术设计方案第4分Web艺术设计方案