第4章Web艺术设计[内容简介]网页设计的美学原理和设计法则,网页观感：色彩、文字、图像、导航、版面设计。（P170）4.1Web设计环境4.1.1Web的技术环境1.浏览器技术（P171）浏览器语法分析程序—解释HTML文件标识标签—浏览器界面显示结果。采用可兼容技术，或最新技术，或声明浏览器技术。2.屏幕分辩率技术（P173）考虑用户的屏幕分辩率640*480、800*600、1024*768，自动收缩页面用百分比设定表宽。3.带宽技术（P174）要求网页下载<20秒，减少图形、动画、图形<15kB。4.1.2.Web页的媒体环境网页屏幕显示的考虑。（P175）屏幕是横向、用浅底深字或深底浅字、访问信息路径、用户的网页观感。4.1.3Web的设计流程设计步骤（P177）1.网站性质公告牌：商业产品在线手册。电子商务和在线购物；产品支持：产品信息、升级、故障维修建议、文献资料、在线指导。2.网站用户、网页结构和框架3.网页测试：不同机器、浏览器、不同速度。4.2Web设计元素4.2.1色彩一、色彩基础1.色彩的属性（P179）黑白、彩色：色相、饱和度、明度。色相：红、绿、蓝红绿蓝饱和度：背景用深色、文字用浅色浅底深字深底浅字明度：黄色高亮最敏感绿色最敏感紫色低亮2.三原色（P180）光的三原色：红绿蓝红绿蓝三原色合成白光色素三原色：红黄蓝红黄蓝三原色合成灰色4.色环(P181)红色暖色黄色暖色绿色中性蓝绿冷色蓝色中性5.色环（24色）同类色协调，邻近色和谐，对比色对比效果强，互补色对比效果最强（红绿、黄紫）红底绿字绿底红字黄底紫字紫底黄字二、色彩感觉1.心理感受（P182）冷暖、轻重、软硬：饱和度低感觉柔和积极消极：暖色、冷色2.颜色联想（P182）红色：热情奔放绿色：宁静安全蓝色：蓝天清凉三、色调和色彩搭配（P183）1.色调：明度+饱和度2.配色：红绿色搭配对比更强。四、计算机色彩（P185）1.显示器的色彩：RGB（红绿蓝）白色红色绿色蓝色黑色HTML语言color(255,255,255)color(255,0,0)color(0,255,0)color(0,0,255)color(0,0,0)十六进制color(FFFFFF)color(FF0000)color(00FF00)color(0000FF)color(000000)2.色深：能显示的，或文件中的颜色数。例如：VGA显示模式，RGB每个通道8位，色深=8*3=24，能显示颜色=2^8=256色高彩色16位，能显示颜色=2^16=64k色真彩色24位，能显示颜色=2^24=16M色图像文件色深：GIF格式8位256色，真彩图像24位16M色。3.混色：用已有的颜色混合代换丢失的颜色。4.网络安全色：各种显示器和常用的操作系统都能安全显示的颜色（216种）4.2.2文本一、字体和字号（P192）标题：用粗宋体、黑体、4号（14pt)；正文：用细宋体、无衬线英文，识别快，2号（10pt)。二、特殊字体（P199）用Photoshop创建GIF、JPG图形文本。4.2.3图像和VI设计一、网页图像和文件格式（P200）1.位图：像素组成图像，每个像素有位置、颜色值。矢量图：直线和曲线组成。2.图像文件格式（P202）GIF格式：图形交换格式，色深8位，256色；JPG（JPEG）格式：联合图像专家小组，24bit真彩色。压缩JPEG图像：质量取7，压缩比1/10到1/20。BMP位图格式：Windows中的标准图像文件格式。TIF格式：存储扫描图像。TGA格式：显示卡图像文件格式。3.Web图像的应用（P203）例：50kB的网页下载时间=50kB/5kbps=10s三、网页中的图像（P205）照片类图像：用数码相机、扫描照片；绘画类图像：手工绘画、软件制作。四、网页中的图像编排（206）图片形状：全景、去底、“出血”；虚实变化。五、视觉标识设计（VI）视觉识别：VisualIdentity，网站VI形象的四个方面。1.网站标志（P209）人物、动物、花草、汽车方向盘、网站名、文字动画、图像动画2.网站标准色彩（P210）只选一种，应用时以标准色为中心。3.网站标准字体（P210）用于标志、标题、主菜单。4.网站广告词4.2.4动画一、Web动画的发展状况1.GIF动画（P212）多个静态图像存储到GIF89a格式文件中，在浏览器上顺序播放，产生动态的效果。无交互性和逻辑分支控制，无法合成声音。2.Java动画（P214）Java跨平台的程序设计语言，设计