第三课插入图像.pptVIP

第三课 插入图像 网页图像基础知识 文件严禁过大 首页100KB以下 一般页面50KB左右 要在速度与设计之间取得一个完美的平衡 最常用的几种图像格式（一） GIF 跨平台能力 压缩能力 图像背景透明 交错显示 动画 最常用的几种图像格式（二） JPG（JPEG） 坚持用全彩模式来表现图像时，唯一选择 最多显示16亿7千万色 跨平台与压缩文件能力 有损压缩某些细节将被忽略 不支持背景透明和交错显示 颜色较少，建议使用GIF；颜色较丰富时，建议使用JPG 最常用的几种图像格式（三） PNG（可移植图形） 替代GIF格式的无专利权限制的格式 对索引色、灰度、真彩色图像以通道透明的支持。 各种格式比较 插入图像 插入---常用---图像 如果选中的文件不在本地网站的根目录下，弹出选择框，要求用户复制图像文件到本地网站的根目录，一般存在Images文件夹中 设置图像属性（一） 选中对象 以SAMPLE2中的网易LOGO为例 缩略图及对象信息，文本框中可以输入图像的名称，主要是为了在JSP或VBScript中便于引用而设置 宽和高：一般不建议修改 设置图像属性（二） 源文件 输入 指向文件 浏览 链接 内部 外部 替代 输入图像的说明文字 设置图像属性（三） 编辑 只读文件不可修改 编辑，优化，裁切，重新取样，亮度对比度，锐化（以FLOWER为例,放大失真后重新取样) 地图 创建图像热点集（以后） 垂直边距水平边距 目标同以前 要先设定链接，然后才能使用 设置图像属性（四） 低品质源 指定主图像被载入之前低分辨率图像的来源 边框：样例宽度为5 左对齐、居中对齐、右对齐 对齐：一行中图像和文本的对齐方式（以后） 实践技巧 1 、设置图片属性技巧： (A)、等比例缩放：拖动图像右下角控制手柄的同时按住Shift键。 (B)、更换图片：双击图像。 2、关于Logo和Banner Logo大小： 1.88*31 这是互联网上最普遍的LOGO规格。 2.120*60 这种规格用于一般大小的LOGO。 3.120*90 这种规格用于大型LOGO。 Banner大小：468*60 这是互联网上最普遍的规格 完整的网页案例 操作步骤（只介绍插入图像） 首先准备好插入到页面中的所有图像 Fireworks中制作一幅用于首页的完整图像，切片，优化 插入3行3列的表格 填充、间距、边框都为0 修改/页面属性---背景改为黑色 将相应图片拖入 可以先拖第二行第1、3单元格内的图片 插入图像占位符 属性面板 源文件指定后，图像占位符就失去了存在的意义 链接可以指定 创建：调用FW生成PNG图像 插入鼠标经过图像 组成 主图像：首次载入页面时显示的图像 次图像：鼠标移过主图像时显示的图像 两者大小应相等 应用：链接的按钮上，使页面更生动 实例： 插入FIREWORKS HTML 插入导航条 通常由一系列的栏目组成，一个网页中一般只有一个导航条 图文混排 图像与文字的对齐方式 图像与文字的边距 在HTML语言中插入图像 插入图像img src=“#” Width宽度 默认原始值 Height高度 默认原始值 Hspace水平边距 默认0 Vspace垂直边距 默认0 Border边框 默认0 Align对齐 Top\middle\bottom Left\right Alt：当浏览器的显示图片功能关闭时，以 ALT设定的文字取代图片显示在原本为图片的位置，需要注意的是，文字要用一对引号包含起来 HTML具体实例图文混排 html head titleHTML中插入图像/title /head body img src=“images/gallery_thumb_2.jpg” alt=“HTML中插入图像” width=“90” height=“125” hspace=“20” vspace=“10” border=“5” align=left保龄球运动相对于其他任何运动项目来说，其紧张刺激的程序都是有过而无不及的。这在PBA的赛场上更显如此，每一个全倒，每一个失误，都牵动着千万人的心，欢呼、沮丧、成功、失败，一切尽在其中！ /body /html 图片综合练习-制作相册 需要相关相片及用相片制作好的网页 建立一个两行五列的表格,分别插入图片,为图片设链接. * * 468*60 88*31 如网站的LOGO，使用GIF；照片JPG 有 无 GIF89a有 背景透明功能 有 无 GIF89a有 渐渐显现功能 全彩(16M色)或更高 全彩（16M色） 256色 最多支持的颜色 更大的压缩比 从大到小有四种选择 较小 压缩比例 PNG JPEG GIF 格式 重设大小 以dipinzhi和gaopinzhi图像为例 主图像 次图像 实例:在PHOTOSHOP中制