网站设计原理与实战第5章网页设计的图像元素GIF格式格式GIF格式是CompuServe公司在1987年开发的图像文件格式，它的全称是Graphics Interchange Format，是“图像互换格式”的意思，它是一种无损压缩格式，压缩率在50%左右，但对于画面颜色简单的图像能够具有非常高的压缩率。JPEG 格式格式JPEG 是联合图像专家组Joint Photographic Experts Group 的缩写，是一种有损压缩的格式，这种图像格式是用来压缩连续色调图像的标准格式，应用最为广泛。PNG 格式格式PNG 的全称是Portable Network Graphic，意为可移植网络图像，它是由Netscape 公司所研发出来的。MNG 格式格式MNG 格式是多重影像网络图像Multiple-Image Network Graphics 的缩写，是对PNG 格式的改善。网页设计中的图像文件格式传达性传达性在网页视觉设计中，传达信息是最主要的目的。艺术性艺术性图像是以形态进行传达的，是提升网页信息传达效率的重要因素，因此图像的形态结构会直接影响信息传达的效果。表现性表现性在提倡设计个性化、多元化的今天，图像在网页界面中的展现方式也就是表现性，应该具有独特的方式，设计者要勇于创新，敢于冲破通俗的图像表现方式， 才能提高网页界面的视觉冲击力，充分优化网页的整体设计构图，从而达到与众不同的效果，给浏览者以过目不忘的视觉体验。趣味性趣味性图像的趣味性主要是用来充实网页界面的内容和版式。超越性超越性图像与语言、文字不一样，它是靠视觉感受来传达信息的，是一种视觉语言。图像在网页视觉设计中的作用出发点出发点将图像展现在网页视觉设计中，想要表达的设计思想就是创意。表现技巧表现技巧当照片在经过设计者塑造过后， 可以更直接、细腻地表现出设计者的创意想法，或者比原来的创意更上一层楼，因为照片可能与原先的完全不一样，会产生另一种独特的效果。造型与手法造型与手法图像设计是设计者通过手绘或者电脑绘制的方法将图像进行再加工，以丰富的想象力和超强的创造力让图像以前所未有的新形象出现，这就是图像设计。网页中图像的创意与设计插图插图插图是指图像以造型或图画的方式展现在网页视觉设计中，主要用来完善视觉传达功能。一般来说，基于图画或造型表现的漫画、线图、讽刺画等手工绘制的都属于插图的范畴。图形符号图形符号图形符号是一种不受国家地域、种族文化和语言差别等人为或自然条件限制的一种单一的视觉语言，也是人与人之间沟通最为便捷、准确的交流手段，具有形态简单却丰富多彩的特点。照片照片网页视觉设计中的照片绝大多数都经过了后期的设计、加工。页面分割页面分割页面分割是指将一个整的网页界面进行水平或者垂直方向的分割，并为其运用强烈的色彩, 展现网页视觉的平面感的一种方法。立体图形立体图形立体图形是指运用3D 图像程序将图形素材表现为立体风格的效果。图像的设计类型图像的外形图像的外形图像的外形能使页面的气氛发生变化，并直接影响浏览者的兴趣。图像的面积图像的面积图像在网页中所占面积的大小直接体现出其重要的程度。图像的数量图像的数量图像数量的多少是根据内容确定的。图底关系图底关系网页图像与背景是对比统一的关系。图像文件的大小图像文件的大小从图像格式就可以看出，网页中的图像质量不需要很高。图像的优化处理图像的优化处理优化网页中的图像首先要使用高质量的原始图像。动态图像的使用动态图像的使用动态图像常用于广告、演示、卡通动画和动态按钮等。网页图像的前期处理四角与中轴四点结构四角与中轴四点结构页面四角、对角线、水平与垂直的中轴线及中轴线四点，组成了基本的页面结构。块状组合与散点组合结构块状组合与散点组合结构块状组合，即通过水平线分割、垂直线分割及组合线分割等方式，将多幅图像在页面上整齐有序地排列成块状。这种结构具有强烈的整体感和秩序感。图像间的这种相互自由叠置或分类叠置而构成的块状组合，具有轻快、活泼的特性，同时也不失整体感。网页图像的编排设计网页设计中文字和图像的关系网页设计中文字和图像的关系在网页制作中，文字和图像只有一种相互补充的视觉关系，它们都需要同时展示给浏览者，页面上的文字太多，会显得沉闷、缺乏生气，枯燥无味；页面上的图形太多，缺少文字，必然会减少页面的信息容量。图文混排的版式设计图文混排的版式设计网页的版式设计又称构图设计，是指在一定范围内进行布局和安排，选择合适的图像、语言、文字合理、主次分明、生动、富有美感而易于辨认、便于阅读地将其要宣传的主题传达出去。熟练地掌握和应用版式设计的美学法则，就可以使网页设计最大限度地吸引人。网页图像与文字的混排在图像的制作中，页面尽量使用看上去比较淡雅、简洁的色彩，背景尽量少用灰暗、深沉的色彩（除非特殊需要），并且一定要根据页面的主题来选择主色调。RGB 显示器的色彩原理：计算机显示器的颜色属于光源色，是基于RGB 三原色的色彩原理。也就是说， 显示器中的所有颜色都是通过红色（Red）、绿色（Green）、蓝色（Blue）这三原色的混合、叠加来实现的， 这种颜色的混合原理被称为加色法混合。而CMYK 印刷颜色混合原理属于减色法。基于HTML 语言的网页色彩只能解释显示RGB 色彩，而不支持CMYK 色彩。如果在网页制作时使用了CMYK 色彩模式的图像，即使是JPEG 格式的图像，在互联网上也将无法显示该色彩模式的图像。这在制作网站前的色彩规划中尤为重要。网页图像的色彩选择本实例设计一个美容网站首页面，首先通过纯色和渐变填充绘制出页面的背景颜色，接着使用“钢笔工具” 绘制图像，并导入相应的素材图像丰富页面的背景效果，使得页面背景看起来更加饱满丰富，最后置入相应的素材，输入相应的文字，在网页中进行合理的布局，最终完成网站页面的设计。课堂练习设计美容网站页面本实例设计制作汽车广告网页，首先通过对背景素材的“色相/ 饱和度”进行处理，制作出网页的背景效果， 然后，拖入汽车素材图像，应用蒙版将汽车抠出，使用“色彩平衡”和“色阶”对汽车图像进行处理，最后添加相应的广告宣传语，完成最终效果的制作。课后练习设计汽车广告网页