网页设计与制作5课件

网页设计艺术网页设计艺术 1第五章 网页图像的处理 通过本章学习应该掌握以下内容:v 1.1.能够选择合适的网页颜色能够选择合适的网页颜色v 2.2.解网页图像的基本格式解网页图像的基本格式v 3.3.掌握使用网页图像的要点掌握使用网页图像的要点v 4.4.在网页中插入图像的方法在网页中插入图像的方法v 5.5.图像属性的设置图像属性的设置v 6.6.调整图像的大小及位置调整图像的大小及位置网页设计艺术网页设计艺术 2v5.1 5.1 网页设计中色彩的属性及其应用网页设计中色彩的属性及其应用 v5.2 5.2 利用利用Dreamweaver MXDreamweaver MX编辑图像编辑图像v5.3 5.3 利用利用HTMLHTML处理图像处理图像网页设计艺术网页设计艺术 3色彩是烘托网页主题的重要元素主题合理的结构创新的设计艺术性色彩网页设计艺术网页设计艺术 4色彩色彩 色彩是自然美、生活美、艺术美的重要色彩是自然美、生活美、艺术美的重要组成部分。它代表着情感（绿色代表生命，组成部分。它代表着情感（绿色代表生命，红色代表热情，白色代表纯洁，蓝色代表红色代表热情，白色代表纯洁，蓝色代表深邃），代表着生活。没有色彩的世界是深邃），代表着生活。没有色彩的世界是死寂而平淡的。死寂而平淡的。在主题明确的前提下，网页可以用丰富在主题明确的前提下，网页可以用丰富的色彩来烘托主题，让浏览者耳目一新的的色彩来烘托主题，让浏览者耳目一新的感觉。但多变的色彩不要干扰了浏览者的感觉。但多变的色彩不要干扰了浏览者的易读，不可以浓妆艳抹，脱离主题。易读，不可以浓妆艳抹，脱离主题。网页设计艺术网页设计艺术 5v一、与网站风格的关系与网站风格的关系v二、色彩原理二、色彩原理v三、网页设计中的色彩应用原理三、网页设计中的色彩应用原理v四、色彩意象的设计应用四、色彩意象的设计应用v五、网页设计的配色技巧五、网页设计的配色技巧5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 65.1 网页设计中色彩的属性及其应用 设设计计精精良良的的网网站站总总有有其其色色调调构构成成的的总总体体倾倾向向,以以一一种种颜颜色色或或几几种种临临近近颜颜色色为为主主导导,使使全全呈呈现现在在某种和谐、统一的色彩倾向，如同人穿衣服。某种和谐、统一的色彩倾向，如同人穿衣服。一一.与网站风格的关系与网站风格的关系 色色彩彩是是网网页页设设计计中中很很难难把把握握的的重重要要方方面面，是是确确立立网网站站风风格格的的前前提提，网网站站色色彩彩的的倾倾向向，决决定定着着网网站站给给浏浏览览者者的的第第一一印印象象。如如：活活泼泼、庄庄重重、雅雅致或热烈。致或热烈。二二.色彩原理色彩原理 “色色彩彩是是破破碎碎了了的的光光，太太阳阳的的光光与与地地球球相相撞撞，破碎分散，因而使整个地球形成美丽的色彩。破碎分散，因而使整个地球形成美丽的色彩。”网页设计艺术网页设计艺术 71.1.色彩的三要素色彩的三要素 明明度度、色色相相和和饱饱和和度度构构成成色色彩彩的的三三要要素素。自自然然界界中中的的颜颜色色可可以以分分为为非非彩彩色色和和彩彩色色两两大大类类。非非彩彩色色指指黑黑色色、白白色色和和各各种种深深浅浅不不一一的的灰灰色色，而而其其它它所所有有的的颜颜色色均均属属于于彩彩色色，任何一种色彩都具有明度、色相、饱和度三大属性。任何一种色彩都具有明度、色相、饱和度三大属性。(1).(1).明度明度 明度指色彩的明暗程度。明度指色彩的明暗程度。(2).(2).色相色相 色相指色彩的相貌。如：红、黄、蓝、绿等。色相指色彩的相貌。如：红、黄、蓝、绿等。十二基本色相十二基本色相:红、橙红、黄橙、黄、黄绿、红、橙红、黄橙、黄、黄绿、绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫绿、绿蓝、蓝绿、蓝、蓝紫、紫、红紫 (3).(3).饱和度饱和度 所谓的饱和度，指的其实是色彩的纯度，纯度越所谓的饱和度，指的其实是色彩的纯度，纯度越 高，表现越鲜明，纯度较低，表现则较黯淡高，表现越鲜明，纯度较低，表现则较黯淡。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 82.2.色彩与心理色彩与心理 色彩对人们头脑和精神心理的影响是客观存在的，如：色彩对人们头脑和精神心理的影响是客观存在的，如：色彩的知觉力，色彩的辨别力，色彩的象征力及情感。色彩的知觉力，色彩的辨别力，色彩的象征力及情感。(1).(1).色彩的冷暖感觉色彩的冷暖感觉A.A.暖色暖色 色色彩彩的的冷冷暖暖与与人人们们对对世世界界的的经经验验分分不不开开。如如：阳阳光光呈呈现现红红、橙橙、黄黄、等等颜颜色色，所所以以人人们们一一看看到到红红、橙橙、黄黄等等色色就联想到火热和烈日给人们的感受，故称就联想到火热和烈日给人们的感受，故称“暖色暖色”B.B.冷色冷色当当人人们们看看到到绿绿、青青蓝蓝色色时时会会与与寒寒冷冷相相联联系系.如如冰冰川川、海海洋洋、夜空、树荫等夜空、树荫等(2).(2).色彩的进退和胀缩感觉色彩的进退和胀缩感觉 5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 9a.a.长长波波长长的的暖暖色色有有前前进进的的感感觉觉，短短波波的的冷冷色色有有退退缩缩的的感感觉觉b.b.明明度度高高的的色色彩彩光光量量多多、色色刺刺激激犬犬，有有膨膨胀胀的的感感觉觉，反反之有退缩的感觉之有退缩的感觉c.c.不同背景的衬托也能产生前进、涨缩的感觉不同背景的衬托也能产生前进、涨缩的感觉(3).(3).色彩的轻重和软硬感觉色彩的轻重和软硬感觉明明度度高高的的色色彩彩给给人人轻轻的的感感觉觉，明明度度低低的的色色彩彩给给人人重重的的感感觉觉。在在色色相相方方面面，暖暖色色给给人人轻轻的的感感觉觉，冷冷色色给给人人重重的的感感觉觉给给人人轻轻的的感感觉觉的的颜颜色色均均有有软软的的感感觉觉，给给人人重重的的感感觉觉的的颜色均有硬的感觉颜色均有硬的感觉以以色色相相分分，轻轻重重次次序序排排列列为为白白、黄黄、橙橙、红红、灰灰、绿绿、蓝、紫、黑。蓝、紫、黑。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 10(4).(4).色彩的艳丽与素雅色彩的艳丽与素雅 色彩饱和度高，亮度高的色彩艳丽，反之素雅色彩饱和度高，亮度高的色彩艳丽，反之素雅(5).(5).色彩的记忆性色彩的记忆性 人人们们对对色色彩彩的的记记忆忆，由由于于年年龄龄、性性别别、个个性性、职职业业、经经历历、所所受受教教育育、自自然然环环境境、社社会会背背景景的的不不同同，差差异异很很大大。一般说来记忆性色彩强的色彩为：一般说来记忆性色彩强的色彩为：暖色、明度高、纯度高暖色、明度高、纯度高 记忆性弱的色彩：记忆性弱的色彩：冷色、明度低、纯度低冷色、明度低、纯度低(6).(6).色彩的联想与象征色彩的联想与象征 色彩的联想是通过以往的经验、记忆或知识将当前的色彩的联想是通过以往的经验、记忆或知识将当前的色彩与其他具象或抽象及相联系起来的过程色彩与其他具象或抽象及相联系起来的过程 5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 11v常见颜色的联想：常见颜色的联想：vA.A.具象联想具象联想v红色：血、火、太阳红色：血、火、太阳v橙色：灯光橙色：灯光 、柑橘、柑橘 、秋叶、秋叶、都市都市v黄色：光、黄色：光、柠檬、柠檬、迎春花迎春花 、食品、食品v绿色：草地、绿色：草地、树叶树叶 、禾苗、禾苗v蓝色：天空蓝色：天空 、宇宙、宇宙、水水 、冰、冰v紫色：丁香花紫色：丁香花 、葡萄、葡萄 、茄子、茄子v黑色：夜晚黑色：夜晚 、墨、墨、石炭石炭 v白色：雪白色：雪 、牛奶、牛奶 、白云、白云 、面粉、面粉v灰色：乌云灰色：乌云 、铁、铁 、木、木 vB.B.抽象联想抽象联想5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 12红色：热烈红色：热烈 热情热情 危险危险 活力活力 吉祥吉祥 喜庆喜庆 夏季夏季 传统传统橙色：温暖橙色：温暖 欢喜欢喜 嫉妒嫉妒 华丽华丽 甜蜜甜蜜 兴奋兴奋 黄色：光明黄色：光明 希望快活希望快活 平凡平凡 权利权利 清爽清爽 安静安静蓝色：平静蓝色：平静 神秘神秘 悠久悠久 理智理智 深远深远 科学科学 快捷快捷紫紫色色：优优雅雅 高高贵贵 注注重重 浪浪漫漫 神神秘秘 女女性性 温温柔柔 虚虚幻幻 魅魅力力黑黑 色色：严严 肃肃 刚刚 健健 恐恐 怖怖 死死 亡亡 罪罪 恶恶 坚坚 硬硬 沉沉 默默 绝绝 望望 悲悲 哀哀 男性男性 机械机械灰色：平凡灰色：平凡 天意天意 谦逊谦逊 灰心灰心 无聊无聊 消极消极 谦虚谦虚 随便随便（7 7）人对色彩的情感）人对色彩的情感 最基本的情感表现：好最基本的情感表现：好 恶恶 情感的差异的原因：情感的差异的原因：5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 13a.a.年龄差异年龄差异年龄高：冷色年龄高：冷色 明度纯度低明度纯度低年龄低：明度纯度高年龄低：明度纯度高b b性别差异性别差异男性：冷色或纯度高的色彩（如黑男性：冷色或纯度高的色彩（如黑.灰）灰）色调集中色调集中女性：暖色女性：暖色.纯度较低的粉色及白色纯度较低的粉色及白色色调分散色调分散c.c.种族差异种族差异原因：生活环境原因：生活环境.社会文化社会文化.历史历史.宗教信仰等不同宗教信仰等不同中国：红中国：红 黄黄 蓝蓝 天蓝天蓝 浅蓝浅蓝美国：淡黄美国：淡黄 红红 明灰明灰 明蓝明蓝法国：黑法国：黑 灰灰 红红 蓝蓝 绿绿 白白德国：黑德国：黑 白白 天蓝天蓝5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 14菲律宾：淡黄菲律宾：淡黄 蓝蓝 绿绿印度：红印度：红 黄黄 蓝蓝 绿绿 埃及：绿埃及：绿 红红 黑黑 蓝蓝 绿绿三三.网页设计中的色彩应用原理网页设计中的色彩应用原理确立网站色调确立网站色调确立网站色调的过程确立网站色调的过程决定主体色决定主体色选择辅助色选择辅助色 选择背景色选择背景色5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 155.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 16色彩调整色彩调整 确定主页的题材后，要了解哪些颜色适合哪些网站，确定主页的题材后，要了解哪些颜色适合哪些网站，如影视题材的站点，基本任何颜色都适合，但用黑色或如影视题材的站点，基本任何颜色都适合，但用黑色或深色则更符合夜间观众的视觉感受。深色则更符合夜间观众的视觉感受。3.3.调和色彩的基本法则调和色彩的基本法则 建立主调统率页面色彩关系建立主调统率页面色彩关系善用金银黑白灰等中性色缓解中和，以烘托主题善用金银黑白灰等中性色缓解中和，以烘托主题拉开距离（从纯度和明度拉开距离（从纯度和明度.面积上着手）面积上着手）5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 17四四.色彩意象的设计应用色彩意象的设计应用 当当我我们们看看到到色色彩彩时时，除除了了感感觉觉其其对对生生理理和和物物理理方方面面的的影影响响,心心理理也也会会立立即即产产生生感感觉觉，这这就就是是色彩的意象色彩的意象1.1.红色的色彩意象红色的色彩意象 由由于于红红色色容容易易引引起起注注意意，所所以以在在各各种种媒媒体体中中被被广广的的运运用用；除除了了具具有有较较佳佳的的明明视视效效果果之之外外，更更被被用用来来传传达达有有力力 .热热诚诚.温温暖暖.前前进进等等涵涵义义的的企企业业精精神神与与形形象象。另另外外红红也也常常用用来来作作为为警警告告.危危险险.禁禁止止.防防火火等等标标志志用用色色.(.(例例:中中国国人人一一看看见见红红色色就就充充满了喜悦和激情满了喜悦和激情)5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 182.2.橙色的色彩意象橙色的色彩意象 橙橙色色明明视视度度高高，在在工工业业安安全全用用色色中中。橙橙色色是是警警戒戒色色。如火车头、登山服饰、救生衣的设计大都含有橙色。如火车头、登山服饰、救生衣的设计大都含有橙色。由由于于橙橙色色明明亮亮刺刺眼眼，有有时时会会产产生生负负面面低低俗俗的的意意象象。所以运用时，要注意色彩的搭配及表现形式。所以运用时，要注意色彩的搭配及表现形式。3.3.黄色的色彩意象黄色的色彩意象 黄色明视度高，同样在生活中属黄色明视度高，同样在生活中属警戒色警戒色（如交通标（如交通标志上黄灯）志上黄灯）高亮度的黄色在页面设计中高亮度的黄色在页面设计中很少大块面的出现很少大块面的出现，多，多半由于颜色本身过于刺眼，造成浏览者视觉的不愉快。半由于颜色本身过于刺眼，造成浏览者视觉的不愉快。但与黑色搭配较好，会强烈突出主体。在细节部分使用但与黑色搭配较好，会强烈突出主体。在细节部分使用效果更加。效果更加。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 194.4.绿色的色彩意象绿色的色彩意象 在在页页面面设设计计中中，绿绿色色所所传传达达的的清清爽爽、理理想想、希希望望、生生长长的意象。符合人们接近自然的生理需求。的意象。符合人们接近自然的生理需求。绿绿色色在在设设计计中中应应用用很很广广，在在工工业业上上许许多多机机械械采采用用绿绿色色，医疗机构场所，也常用绿色作空间色彩规划。医疗机构场所，也常用绿色作空间色彩规划。5 5蓝色的色彩意象蓝色的色彩意象 由于蓝色由于蓝色沉稳沉稳的特性，具有理智、准确的意象。在商业的特性，具有理智、准确的意象。在商业设计中，强调科技、效率的商品或企业形象。大多选用蓝色设计中，强调科技、效率的商品或企业形象。大多选用蓝色作标准色。如：电脑、汽车、摄影器材等。作标准色。如：电脑、汽车、摄影器材等。另外受西方文化的另外受西方文化的 影响。蓝色作为页面基调能营造出影响。蓝色作为页面基调能营造出深邃、忧郁深邃、忧郁的意境。用其展示博大的胸怀或感性诉求方面比的意境。用其展示博大的胸怀或感性诉求方面比较合适。较合适。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 206 6紫色的色彩意境紫色的色彩意境 紫紫色色由由于于其其强强烈烈的的女女性性化化的的性性格格，在在商商业业设设计计用用色色中中，受受到到相相等等大大的的限限制制，除除了了女女性性有有关关的的商商品品或或企企业业形形象外，其它类设计不常作为主色调使用。象外，其它类设计不常作为主色调使用。紫色被称为紫色被称为“魔鬼魔鬼”颜色。颜色。深紫色深紫色会造成恐怖的会造成恐怖的气氛，较难控制。紫色也有其优点：是高贵的象征。明气氛，较难控制。紫色也有其优点：是高贵的象征。明度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫度低的紫色有清澈爽朗的感觉，而且有一定灰度的浅紫色会有纤巧雅致的感觉，适合表现女性有关的题材。色会有纤巧雅致的感觉，适合表现女性有关的题材。7.7.褐色的色彩意象褐色的色彩意象 在商业上褐色用来表示原始材料的质感。如麻、木在商业上褐色用来表示原始材料的质感。如麻、木材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、材等。或用来传达莫些产品的色泽及味感，如咖啡、茶、麦类等，或强调麦类等，或强调古典优雅古典优雅的企业或商品形象。的企业或商品形象。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 218.8.白色的色彩意象白色的色彩意象 白白色色具具有有高高级级，科科技技的的意意象象。纯纯白白色色绘绘入入寒寒冷冷，严严峻峻的的感感觉觉。所所以以在在使使用用白白色色时时，都都会会搭搭配配一一些些其其他他颜颜色色。如象牙白、米白、乳白等。如象牙白、米白、乳白等。白白色色是是永永远远流流行行的的主主色色调调，是是能能和和任任何何颜颜色色搭搭配配的的万能色。较容易控制。万能色。较容易控制。9.9.黑色的色彩意象黑色的色彩意象 黑黑色色具具有有高高贵贵、稳稳重重、科科技技庄庄严严的的意意象象。黑黑色色也也是是一一种流行的主色调。适合与许多色彩搭配。种流行的主色调。适合与许多色彩搭配。以以黑黑色色为为主主色色调调可可以以创创造造出出神神秘秘的的气气氛氛，另另外外稳稳重重的的黑色可以烘托主体超凡气质和美感。黑色可以烘托主体超凡气质和美感。10.10.灰色的色彩意象灰色的色彩意象5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 22 灰色具有灰色具有柔和，高雅柔和，高雅的意象。属中间色，男女皆能接的意象。属中间色，男女皆能接受，所以，灰色也是永远的主要颜色。许多科技产品，尤受，所以，灰色也是永远的主要颜色。许多科技产品，尤其是和金属材料有关的，用灰色来传达高级，科技的形象。其是和金属材料有关的，用灰色来传达高级，科技的形象。以灰色作为设计的基调是当前设计流行的做法，在缓和过以灰色作为设计的基调是当前设计流行的做法，在缓和过对比造成的强烈的反差，灰色显示了其杰出的能力。对比造成的强烈的反差，灰色显示了其杰出的能力。五五.网页设计的配色技巧网页设计的配色技巧 色色彩彩的的意意象象可可以以延延伸伸设设计计效效果果。网网页页设设计计新新手手可可能能喜喜欢欢选选用用一一些些漂漂亮亮的的图图片片作作为为色色彩彩背背景景。但但大大型型网网站站，更更多多的的运运用用的的是是蓝蓝、绿绿、黄黄、粉粉色色等等的的色色彩彩作作为为背背景景。使使得得网网页页显显得得典典雅雅，温温馨馨而而又又不不失失活活泼泼，同同时时大大大大加加快快了了网网页页加加载的速度。载的速度。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 23 要想将色彩自然和谐的运用于网页设计中，要想将色彩自然和谐的运用于网页设计中，使网页获得生命力。大自然是最好的老师。春使网页获得生命力。大自然是最好的老师。春夏秋冬都恩能够使设计和谐优美。夏秋冬都恩能够使设计和谐优美。色彩运用中应注意的问题；国家、种族、宗色彩运用中应注意的问题；国家、种族、宗教信仰、风俗教信仰、风俗 地理位置、文化修养、性别、年地理位置、文化修养、性别、年龄龄 。5.1 网页设计中色彩的属性及其应用 网页设计艺术网页设计艺术 245.2 利用利用Dreamweaver MX编辑图像编辑图像 5.2.1 网页中的颜色网页中的颜色 在在网网页页中中是是以以RGBRGB方方式式来来表表示示颜颜色色的的，RGBRGB颜颜色色包包括括几几百百万万种种之之多多，这这么么多多的的颜颜色色却却有有一一个个共共同同点点，都都是是由由红红、绿绿、蓝蓝这这三三种种基基色色调调混混和和而而成成的的，RGBRGB其其实实就就是是RedRed、GreenGreen、BlueBlue的缩写。的缩写。这这三三种种基基色色中中每每一一种种颜颜色色的的饱饱和和度度和和透透明明度度都都是是可可以以变变化化的的，用用0 0（表表示示最最弱弱）255255（表表示示最最强强）的的数数值值来来表表示示。例例如如纯纯红红色色表表示示为为：Red Red 50%50%、Green Green 0%0%、Blue Blue 0%0%，简简单单的的表表示示法法为为（255255，0 0，0 0），用用十十六六进进制制数数来来表表示示的话就变成了的话就变成了“FF0000”FF0000”。网页设计艺术网页设计艺术 25网页安全颜色v由于浏览器的缘故，只有216种颜色能在浏览器中正常显示，而多于这个范围的颜色可能发生偏差，不能正常显示。网页设计艺术网页设计艺术 265.2.2 网页中的图像 图图形形是是一一种种视视觉觉信信息息传传递递媒媒介介，较较符符号号文文字字在在传传递递信信息息上上的的优优势势：易易识识别别、不不受受地地域域、国国度度、知知识识体体系系等等众众多多因因素素的的影影响。响。图图形形图图象象往往往往来来源源于于现现实实世世界界的的影影像像照照片片，在在造造型型规规律律上上有有很很强强的的客客观观制制约约性性。所所以以设设计计师师在在对对网网页页优优化化时时应应对对图图片片作作二二次次处处理理、加加工工，而而处处理理时时应应从从以以下下方方面面入入手。手。网页设计艺术网页设计艺术 27图形图像的基本表现技巧：图形图像的基本表现技巧：一一.面积与视角面积与视角 图像在网页中所占比例的大小直接影响整个页面的图像在网页中所占比例的大小直接影响整个页面的视觉效果和情感表达。面积大的图像在画面中占的份视觉效果和情感表达。面积大的图像在画面中占的份量重，表达情感直接。容易吸引浏览者的注意。面积量重，表达情感直接。容易吸引浏览者的注意。面积小的图像通常在页面中作点缀和呼应，表达情感含蓄，小的图像通常在页面中作点缀和呼应，表达情感含蓄，给人精巧细致的感觉。给人精巧细致的感觉。1.1.平直的视角平直的视角给人一种平稳、安定、规矩的感觉。给人一种平稳、安定、规矩的感觉。2.2.非常规的视角非常规的视角如：倒置、旋转、仰视、俯视如：倒置、旋转、仰视、俯视增强画面动感，更具强烈的视觉冲击。增强画面动感，更具强烈的视觉冲击。5.2.2 网页中的图像 网页设计艺术网页设计艺术 28二二.局部与特写局部与特写 对于整体的图像局部与特写能让视线更加集中，对于整体的图像局部与特写能让视线更加集中，这种手法有点到为止，意犹未尽的感觉。局部放大，这种手法有点到为止，意犹未尽的感觉。局部放大，重点表现这一部分，称为特写。特写能对图像产生重点表现这一部分，称为特写。特写能对图像产生瞬间的凝视，引发浏览者的兴趣点。下图为突出本瞬间的凝视，引发浏览者的兴趣点。下图为突出本款车的最新性能，而将车创新的部位放大，以特写款车的最新性能，而将车创新的部位放大，以特写的形式展现，起到更有力的宣传。的形式展现，起到更有力的宣传。网页设计艺术网页设计艺术 29效果。效果。5.2.2 网页中的图像 网页设计艺术网页设计艺术 30三三.合成与组合合成与组合 图图像像的的合合成成是是指指用用计计算算机机将将多多幅幅图图片片的的不不同同内内容容有有选选择择的的合合成成一一个个图图像像，合合成成后后的的图图像像传传达达更更丰丰富富的的信信息息，能更集中的体现创意。能更集中的体现创意。图图像像的的重重要要程程度度可可以以因因面面积积、摆摆放放位位置置、组组合合方方式式的不同而有所不同。的不同而有所不同。四四.虚实和影调虚实和影调 图图像像的的虚虚实实对对比比能能够够产产生生空空间间感感，实实的的物物体体感感觉觉近近，虚的物体感觉远。虚的物体感觉远。五五.退底与轮廓退底与轮廓 图图像像的的退退底底是是仅仅保保留留所所选选图图像像，而而将将沿沿图图像像边边缘缘的的背背景景去去掉掉，退退底底后后的的形形象象的的外外轮轮廓廓成成自自由由形形状状，具具体体清清晰分明的视觉形态，显得灵活自如。晰分明的视觉形态，显得灵活自如。5.2.2 网页中的图像 网页设计艺术网页设计艺术 315.2.3 图像格式图像格式 GIFGIF格格式式（Graphics Graphics Interchange Interchange Format Format 图图像像交交换换格格式式）采采用用无无损损压压缩缩（所所谓谓无无损损压压缩缩是是指指在在压压缩缩过过程程中中图图像像的的质质量量不不会会丢丢失失）算算法法进进行行图图像像的的压压缩缩处处理理，是是目目前前在在网网页页设设计计中中使使用用最最普普遍遍、最最广广泛的一种图像格式。泛的一种图像格式。1GIF格式格式 网页设计艺术网页设计艺术 32GIF格式的优缺点vGIFGIF格式可以高度压缩图像格式可以高度压缩图像;GIF;GIF格式支持格式支持图像游离在背景之上的视觉效果图像游离在背景之上的视觉效果;GIF;GIF格式格式的图像可以被交错下载的图像可以被交错下载;可以将很多幅图像可以将很多幅图像结合在一个结合在一个GIFGIF文件中。文件中。v最大支持最大支持256256色，不适合有晕光和渐变色彩色，不适合有晕光和渐变色彩等颜色细腻的图片，要修改其大小，需重等颜色细腻的图片，要修改其大小，需重新打开转换前的新打开转换前的24bit24bit文件修改。文件修改。网页设计艺术网页设计艺术 332JPEG格式格式 JPEGJPEG格格式式（Joint Joint Photo Photo Expert Expert GraphicsGraphics，联联合合图图形形专专家家组组图图片片格格式式）是是另另一一种种在在WebWeb上上应应用用广广泛泛的的图图像像格格式式。由由于于它它支支持持的的颜颜色色数数几几乎乎没没有有限限制制，因因此此适适用用于于使使用用真真彩彩色色或或平平滑滑过过渡渡色色的的照照片片和和图图片片。与与GIFGIF格格式式采采用用无无损损压压缩缩不不同同，JPEGJPEG格格式式使使用用有有损损压压缩缩来来减减小小图图片片文文件件的的大大小小，因因此此用用户户将将看看到到随随着着文文件件的的减小，图片的质量也降低了。减小，图片的质量也降低了。网页设计艺术网页设计艺术 34 1.1.支支持持2424位位图图像像，能能够够很很好好地地表表现现照照片片等等全全彩彩色色的的图像；图像；2.2.可可以以生生成成类类似似GIFGIF格格式式的的交交错错关关联联图图像像渐渐变变JPEGJPEG；JPEG格式图像的优点：格式图像的优点：网页设计艺术网页设计艺术 35 1.1.有损压缩使之不适合表达高清晰度的图像：有损压缩使之不适合表达高清晰度的图像：2.2.最最高高只只能能以以256256色色显显示示的的用用户户，可可能能无无法法观观看看JPEGJPEG图像；图像；3.3.当当图图像像中中包包含含finefine字字体体时时应应避避免免用用JPEGJPEG格格式式，在在该该字字体体与与纯纯颜颜色色重重叠叠的的地地方方，JPEGJPEG压压缩缩作作品品看看上上去只是一种外观近似。去只是一种外观近似。4.4.采采用用JPEGJPEG格格式式对对图图像像进进行行压压缩缩后后，不不能能再再重重新新打开图像重新编辑压缩。打开图像重新编辑压缩。5.JPEG5.JPEG格式不支持透明色。格式不支持透明色。JPEG格式图像的缺点：格式图像的缺点：网页设计艺术网页设计艺术 36 PNGPNG格格式式（Portable Portable Networks Networks GraphicsGraphics，可可移移植植的的网网络络图图形形格格式式）是是近近年年来来新新出出现现的的一一种种图图像像格格式式，它它适适于于任任何何类类型型、任任何何颜颜色色深深度度的的图图片片。该该格格式式用用无无损损压压缩缩来来减减小小图图片片文文件件的的大大小小，同同时时保保留留图图片片中中的的透透明明区区域域。此此外外，该该格格式式是是仅仅有有的的几几种种支支持持透透明明度度概概念念的的图图片片格格式式之之一一（透透明明GIFGIF的的透透明明度度只只能是能是50%50%，但，但PNGPNG格式可以是格式可以是0%50%0%50%）。）。3PNG格式格式 网页设计艺术网页设计艺术 37 GIFGIF、JPEGJPEG、PNGPNG这这几几种种格格式式都都是是标标准准的的位位图图格格式式，但但现现在在WebWeb上上还还可可以以使使用用新新的的矢矢量量格格式式。所所谓谓位位图图格格式式就就是是指指用用图图片片上上每每一一点点的的信信息息来来描描述述图图像像，而而矢矢量量格格式式则则是是用用线线条条和和填填充充色色等等数数学学信信息息来来描描述述图图像像。相相比比而而言言，矢矢量量格格式式的的文文件件要要比比位位图图格格式的文件小得多，但表现力丝毫不逊色。式的文件小得多，但表现力丝毫不逊色。除除了了表表现现一一般般的的静静态态画画面面以以外外，动动画画是是矢矢量量格式具有巨大优势的另一个领域。格式具有巨大优势的另一个领域。4矢量格式矢量格式 网页设计艺术网页设计艺术 38 在在WebWeb页页上上显显示示图图片片之之前前，通通常常需需要要考考虑虑下下列列三三个个问题：问题：确保文件较小；确保文件较小；1 1）使图像具有所需的像素大小）使图像具有所需的像素大小 2 2）采用正确的格式进行优化处理）采用正确的格式进行优化处理 控制图像的数量和质量；控制图像的数量和质量；合理使用动画。合理使用动画。5.2.4 使用网页图像的要点使用网页图像的要点 网页设计艺术网页设计艺术 39 在在DreamweaverDreamweaver中中插插入入图图像像非非常常简简单单，具具体体操操作作步步骤骤如下：如下：（1 1）打开网页，将光标移到将要插入图像的位置。）打开网页，将光标移到将要插入图像的位置。（2 2）用用下下列列3 3种种方方法法中中的的任任意意一一种种方方法法，打打开开“选选择择图像源图像源”对话框。对话框。在插入在插入“常用常用”面板中，单击插入图像按钮。面板中，单击插入图像按钮。直直接接拖拖曳曳插插入入“常常用用”面面板板中中的的插插入入图图像像按按钮钮至至页页面面的光标处。的光标处。选选择择DreamweaverDreamweaver MXMX主主菜菜单单中中的的“插插入入”|“|“图图像像”命令。命令。5.2.5 在网页中插入图像在网页中插入图像 1插入图像插入图像 网页设计艺术网页设计艺术 40（3 3）在在对对话话框框中中选选择择查查找找图图像像文文件件的的路路径径，选选中中“预预览览图图像像”复复选选框框，选选定定图图像像的的预预览览图图就就显显示示在在对对话话框的右侧。框的右侧。（4 4）如如果果文文件件存存放放在在网网站站的的目目录录中中，那那么么将将“相相对对于于”下拉列表调整到下拉列表调整到“文档文档”项。项。（5 5）然后单击）然后单击“确认确认”按钮，图像就插入到网页中了。按钮，图像就插入到网页中了。网页设计艺术网页设计艺术 41 在在文文档档中中插插入入图图像像后后，用用鼠鼠标标单单击击图图像像，图图像像四四周周出出现现可可编编辑辑的的缩缩放放手手柄柄，说说明明该该图图像像被被选选定定。这这时时属性面板中显示出关于图像的属性信息，如图所示。属性面板中显示出关于图像的属性信息，如图所示。2图像属性参数图像属性参数（P67）图图像像属属性性面面板板的的左左上上方方有有一一个个缩缩略略图图，它它的的右右边边是是“图图像像”字字样样，“图图像像”的的右右边边是是当当前前文文件件大大小小，下下方方的的空格可以键入名称，以便将来使用时好调用该文件。空格可以键入名称，以便将来使用时好调用该文件。网页设计艺术网页设计艺术 42 改改变变图图像像的的尺尺寸寸大大小小，可可以以通通过过在在属属性性面面板板中中的的“宽宽”和和“高高”文文本本框框中中直直接接输输入入数数值值来来改改变变图图像像的的尺尺寸寸大大小小，当当在在网网页页中中需需要要精精确确地地定定位位元元素素时时，这这种种方方法法可可以以帮帮助助设设计计者者达达到到预预想想的的效效果果。不不过过这这种种方方法法有有一一个个弊弊端端，如如果果数数值值输输入入不不当当，可可能能造造成成图图像像在在浏浏览览器器中中无无法法正正常常显显示示。此此外外，还还可可以以通通过过拖拖放放图图像像四四周的缩放边框来改变图像的尺寸。周的缩放边框来改变图像的尺寸。3改变图像的尺寸改变图像的尺寸 网页设计艺术网页设计艺术 43 DreamweaverDreamweaver中中调调整整图图像像位位置置的的方方法法很很简简单单，简简述述如下：如下：（1 1）选中页面中要编辑的图像；）选中页面中要编辑的图像；（2 2）打打开开图图像像属属性性面面板板中中的的“对对齐齐”下下拉拉列列表表，在在列表中选择需要的选项。列表中选择需要的选项。4调整图像在网页中的相对位置调整图像在网页中的相对位置 网页设计艺术网页设计艺术 44 在在页页面面中中合合理理地地使使用用图图形形图图像像已已经经成成为为网网页页制制作作的的一一个个基基本本要要求求。但但是是并并非非所所有有图图形形图图像像都都可可以以直直接接用用在在网网页页中中，大大多多数数情情况况下下，需需要要对对原原始始图图像像素素材材进进行行一一些些处处理理，例例如如图图像像优优化化、添添加加特特效效等等，然然后后再再在在网网页页中中使使用用。要要方方便便地地完完成成相相关关的的处处理理工工作作，则则需需要要图图形形图图像像处处理理软软件件的的协协助助。另另外外，对对于于具具备备创创作作才才能能的的网网页页制制作作者者来来说说，也也可可以以直直接接使使用用图图形形图图像像处处理理软软件创作出适合件创作出适合WebWeb的作品。的作品。5编辑图像编辑图像 网页设计艺术网页设计艺术 45 改改变变网网页页背背景景的的状状态态可可以以通通过过两两种种方方法法来来实实现现，一一种种是是设设置置背背景景颜颜色色，通通常常是是在在网网页页安安全全颜颜色色范范畴畴之之内内选选择择；另另一一种种是是设设置置背背景景图图像像，但但不不是是所所有有的的图图像像都都可以做背景。可以做背景。1 1设置网页背景颜色设置网页背景颜色 设置网页背景色在页面属性对话框里设置设置网页背景色在页面属性对话框里设置 。2 2设置背景图像设置背景图像 设设置置网网页页背背景景色色，只只能能得得到到单单一一颜颜色色的的背背景景。如如何何能能使使背背景景发发生生更更多多的的变变化化，这这就就需需要要设设置置网网页页的的背景图像。背景图像。5.2.6 设置网页背景设置网页背景 网页设计艺术网页设计艺术 46 在在浏浏览览网网页页时时，可可能能会会遇遇到到下下列列情情况况。当当图图像像不不能能被浏览器正常显示时，图像区变成了空白区域。被浏览器正常显示时，图像区变成了空白区域。利利用用DreamweaverDreamweaver中中为为图图像像加加文文字字说说明明的的功功能能，可可使使网网页页中中的的图图像像在在不不能能被被浏浏览览器器正正常常显显示示时时，以以说说明明文字代替，以帮助访问者了解图像的信息。文字代替，以帮助访问者了解图像的信息。5.2.7 在在Dreamweaver MX中巧妙地处理图像中巧妙地处理图像 1给图像加文字说明给图像加文字说明网页设计艺术网页设计艺术 472制作低分辨率图像制作低分辨率图像 低低分分辨辨率率图图像像是是相相对对于于高高分分辨辨率率图图像像而而言言的的，高高分分辨辨率率图图像像一一般般指指的的是是图图像像的的色色彩彩丰丰富富逼逼真真、压压缩缩比比较较小小的的图图像像，这这种种图图像像文文件件容容量量比比较较大大，浏浏览览器器要要费费很很长长时时间间来来下下载载。而而低低分分辨辨率率图图像像包包含含的的色色彩彩少少、压压缩缩比比较较大大，所所以以这这种种图图像像文文件件容容量量较较小小，能能够够较较快快地地被被浏浏览览器器下下载载。因因此此经经常常要要为为高高质质量量、大大尺尺寸寸的的图图像像制制作作一一个个副副本本，这这个个副副本本图图像像采采用用的的是是较较低低的的分分辨辨率率，从而减小了文件的大小，缩短了图像的下载时间。从而减小了文件的大小，缩短了图像的下载时间。网页设计艺术网页设计艺术 483为图像添加热点为图像添加热点 热热点点即即图图像像上上不不可可见见的的区区域域，该该区区域域分分配配了了一一个个超超链链接接。为为图图像像添添加加热热点点就就是是在在图图像像上上划划分分区区域域，从从而设定图像上制作超链接的范围。而设定图像上制作超链接的范围。在在DreamweaverDreamweaver中为图像添加热点的方法为：中为图像添加热点的方法为：（1 1）选选定定图图像像，打打开开图图像像属属性性面面板板，选选择择设设置置热热点点按钮，单击鼠标左键并拖动，在图像中设置热点形状。按钮，单击鼠标左键并拖动，在图像中设置热点形状。（2 2）在属性面板中设置热点的超链接。）在属性面板中设置热点的超链接。网页设计艺术网页设计艺术 495.3 利用利用HTML处理图像处理图像 在在HTMLHTML中中，使使用用IMGIMG标标记记符符可可以以在在网网页页中中加加入入图图像像。它它具具有有两两个个基基本本属属性性：srcsrc和和altalt，分分别别用用于于设设置图像文件的位置和替换文本。置图像文件的位置和替换文本。srcsrc表表示示要要插插入入图图像像的的文文件件名名，必必须须包包含含绝绝对对路路径径或或相相对对路路径径，图图像像可可以以是是GIFGIF文文件件、JPEGJPEG文文件件或或PNGPNG文文件件。altalt表表示示图图像像的的简简单单文文本本说说明明，用用于于不不能能显显示示图图像像的的浏浏览览器器或或浏浏览览器器能能显显示示图图像像但但显显示示时时间间过长时先显示。过长时先显示。5.3.1 插入图像插入图像 网页设计艺术网页设计艺术 50v图像标记：图像在网页制作中是非常重要的一个方面。v 标记并不是真正地把图像给加入到Html文档中，而是将标记对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到你的文档中。网页设计艺术网页设计艺术 51v什么是相对路径？所谓相对路径是指你所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。vsrc属性在标记中是必须赋值的，是标记中不可缺少的一部分。网页设计艺术网页设计艺术 52标记的属性alt当鼠标移动到图像上时显示的文本align图像的对齐方式border图像的边框,默认单位是象素width图像的宽,默认单位是象素height图像的高,默认单位是象素网页设计艺术网页设计艺术 53设置图像周围的空白设置图像周围的空白 可可以以在在IMGIMG标标记记符符内内使使用用属属性性hspacehspace和和vspacevspace设设置置图图像像周周围围空空白白，其其中中hspacehspace示示水水平平方方向向的的空空白白，vspacevspace表表示示垂垂直直方方向向的的空空白白，它它们们的的取取值值都都是是像像素素数数。通通过过指指定定图图像像周周围围的的空空白白，可可以以使使页页面的版式更加合理。面的版式更加合理。网页设计艺术网页设计艺术 54（1 1）图像在页面中的对齐）图像在页面中的对齐 设设置置图图像像在在页页面面中中的的对对齐齐与与设设置置文文本本对对齐齐类类似似，可可以以使使用用DIVDIV或或P P标标记记符符将将IMGIMG标标记记符符括括起起来来，然然后后使用使用alignalign属性。属性。（2 2）图像与周围内容的垂直对齐）图像与周围内容的垂直对齐 使使用用IMGIMG标标记记符符的的alignalign属属性性，可可以以控控制制图图像像与与周周围围内内容容的的垂垂直直对对齐齐。此此时时，alignalign属属性性的的值值可可以以是是：toptop、middlemiddle、bottom bottom 分分别别表表示示图图像像与与周周围围内容的顶部、中央、底部对齐。内容的顶部、中央、底部对齐。图像的对齐图像的对齐 写在最后写在最后成功的基成功的基础在于好的学在于好的学习习惯The foundation of success lies in good habits55谢谢大家荣幸这一路，与你同行ItS An Honor To Walk With You All The Way讲师：XXXXXX XX年XX月XX日