网页中的图像

网页中的色彩
RGB 颜色也称为加色。 将光谱光线以各种不 同的组合混合在一起 可产生加色。将所有 颜色加在一起可产生 白色，即所有可见光 波长都传播回眼睛。 加色用于光照、视频 和显示器。例如，显 示器通过红色、绿色 和蓝色荧光粉发射光 线产生颜色。
• 网络安全 色，就是 在不同的 硬件环境， 不同的操 作系统， 不同的浏 览器中都 能够正确 显示的颜 色。
颜色的象征意义
• • • • • • • • • 红色：热情、奔放、喜悦、庄严 黄色：高贵、富有、灿烂、活泼 黑色：严肃、夜晚、沉着 白色：纯洁、简单、洁净 蓝色：天空重、沉稳 紫色：浪漫、富贵 棕色：大地、厚朴
色彩模式
预定了16种颜色： Black 黑色 #000000 Navy 海军蓝 #000080 White 白色 #FFFFFF live 橄榄绿 #808000 Silver 银灰色 #C0C0C0 Lime 翠绿色 #00FF00 Gray 灰色 #808080 Green 绿色 #008000 Teal 鸭绿色 #008080 Fuchsia 樱桃红 #FF00FF Red 纯红色 #FF0000 Purple 紫色 #800080 Blue 纯兰色 #0000FF Yellow 纯黄色 #FFFF00 Maroon 暗红色 #800000 Aqua 浅绿色 #00FFFF
顺序 1 2 3 4 5 6 7 8 9 10
底色 黑
黄 黑
紫
紫
蓝
绿
白
黄
黄
图形 黄 色
黑 白
黄
白
白
白
黑
绿
蓝
网页图像的格式及来源
• • • • GIF格式 JPEG格式 PNG格式 网页图像来源
GIF格式
GIF全称为“Graphics Interchange Format”，意为可交换图像格式，它是第一个 支持网页的图像格式，在PC机和苹果机上都 能被正确识别。它最多支持256种颜色，可以 使图像变得容量相当小。GIF图像可以在网页 中以透明方式显示，还可以包含动态信息， 即GIF动画。
源文件设置
在属性面板的“源文件”文本 框中显示了图像的保存路径，如果 要重新插入一幅新图像，可以在选 取图像后的属性面板中的“源文件 ”文本框中重新输入要插入图像的 地址，或单击右侧后的 按钮，在 打开的“选择图像源文件”对话框 中重新选择需要的图像。
文本说明
在选取图像后的属性面板的“替换 ”下拉列表框中可以输入图像的文本说 明。
编辑导航条
图片标记<IMG>
• src指定图片的来源，接受.gif,.jpg和.png 格式 • width和height用来设定图片的大小 • hspace和vspace用来设定图片边缘空白 • border用来设定图片边框厚度 • align用来调整图片旁边文字的位置 • alt为当浏览器尚未完全读入图片时，在 图片位置显示的文字。
采用较低的分辨率为高质量、大尺寸 的图像制作一个副本。当用户浏览网 页时，就先下载其副本，在浏览器中 显示出来，用户可以看到图像的概貌， 待全部低分辨率的图像下载完毕后， 浏览者可以选择继续等待下载高质量 的图像还是停止下载跳转到其他网页， 这样会缩短浏览时间。
设置图像属性
在网页中插入图像后可通过属性面板对其属性 进行修改等设置。
图像命名 图像大小 编辑图片 源文件设置
文本说明 图像与文本的对齐 图像边距 图像边框
图像命名
为了在使用Dreamweaver行为 （如交换图像）或脚本撰写语言（ 如JavaScript或VBScript）时可以引 用该图像，可在属性面板的“图像 ”文本框中为图像命名。
插入图像的方法
• 插入→图像 • 插入→图像占位符 • 插入→鼠标经过图像
鼠标经过图像设置
鼠标经过图像是一种在浏览器中 查看网页时，鼠标光标经过该图像 时，图像发生变化的动态图像。
更多应用
• 制作网站相册 • 图像导航条
插入导航条
导航条一般由图像或图像组组成，这些图 像的显示内容随用户的操作不同而进行相应 的变化。导航条为访问者浏览不同网页提供 了一条捷径。
图像与文本的对齐
选取图像后，在属性面板的“对 齐”下拉列表框中可设置处于同一 行上的图像与文本的对齐方式。
图像边距
选取图像在属性面板的“垂直边距”和 “水平边距”文本框中可以设置图像与页面 上方和左侧之间的距离，也可以设置图像与 其他网页元素之间的距离。
图像边框
选取图像后，在属性面板的“边框” 文本框中可以设置图像边框的宽度，单 位为像素，“0”表示无边框。
JPEG
GIF
隔行扫描
• 隔行扫描是显示图像的一种方法，最初 看起来非常模糊；细节被逐渐地添加进 去直到图像完整地显示出来。隔行扫描 的优点是整个图像可以被立刻看到，所 以当下载一个图像时用户可以看到一些 东西而不是一个空白的屏幕。
PNG格式
PNG全称为“Portable Network Graphics”，意为便携网络图像，它 是逐渐流行的网络图像格式。PNG 格式既融合了GIF能透明显示的特 点，又具有JPEG处理精美图像的 优势，且可以包含图层等信息，常 常用于制作网页效果图。
图像大小
在Dreamweaver 中插入图像后系统 会自动将图像的原始大小显示在“宽” 和“高”文本框（以像素为单位）中。
编辑图片
在网页中选择图像之后，单击属性面板中的按 钮，打开图像处理软件，对图像进行处理。如果安装 了Fireworks，那么Fireworks将被默认为图像处理软件 。如果没有安装，用户也可自己设置使用其他软件中 处理图像。
网页图像来源
网页图像的素材有很多来源，如可 以使用图形处理软件（如Photoshop、 Fireworks和FreeHand等软件）制作；可 以购买网页素材光盘；可以从网络上下 载等。
使用网页图像的要点
• 确保文件较小 • 控制图像的数量和质量 • 合理使用动画
在网页中插入图像
当网页中的 图像不能被 浏览器正常 显示时以说 明文字代替
• 网站给人的第一印象来自视觉，不同的色 彩搭配又会产生不同的效果，所以，在网 页中运用色彩就十分重要。对网页色彩的 处理原则是“总体协调，局部对比”，也 即网站的整体色彩效果是和谐的，而局部 应有一些强烈的色彩对比。
网页色彩的选择和搭配
• • • • • 色彩的合适性 色彩的独特性 色彩的鲜明性 色彩的安全性 色彩的视认性
JPEG格式
JPEG全称为“Joint Photographic Experts Group”，意为联合图像专家组，它可以高效 地压缩图片，丢失人眼不易察觉的部分图像 ，使文件容量在变小的同时基本不失真，通 常用来显示颜色丰富的精美图像。
常用的GIF与JPEG文件格式的区别
文件格式 说明 真彩色图片（多于256色），对于高 颜色数的照片最好使用JPEG文件 格式 256色或者更少的图像，低颜色数下 GIF比JPEG装载的更快