第5课插入图像(2+2)

图片 flash的在单元格中的对齐 光标停在左侧或右侧 水平对齐 垂直对齐 复习 人生格言给自己既然一切都已逃离又何必苦苦期待既然一切都以成为过去又何必在意今日的温存既然前方是一片晴空又何不大踏步前进一样的日子不一样的过少了昨日的忧愁多了今日的快乐少了昨日的无所事事多了今日的充实开心风不能使我惆怅雨不能使我惆怅风和雨都不能再使我变得不晴朗 浮动面板组 浮动面板组是停靠在编辑窗口右侧浮动面板的集合 单击左侧的图标即可展开一个面板展开后图标变为形状 再单击图标则合拢面板 只显示浮动面板的名称 将鼠标移到浮动面板的图标上至鼠标指针变为形状时 拖动该面板即可将浮动面板移到窗口中的任何位置 文件的拷贝和粘帖 网页图像的格式网页图像素材的获取插入图像设置图像属性图像的高级应用 第五课插入图像 网页图像的格式 受网络速度的影响 用于网页的图像一般有GIF JPEG 也称为JPG 或PNG这3种格式 GIF 图像交换格式 是第一个支持网页的图像格式 它最多支持256种颜色 可以使图像变得相当小 GIF图像可以包含动态信息 也就是网页上大量使用的GIF动画 GIF在网页中大量用于站点图标Logo 广告条Banner及网页背景图像 但由于GIF受颜色数目的限制 GIF不适合用作照片级的网页图像 插入图像的的格式必须是网页支持的格式在插入图像之前 要做好收集图像的工作 网页图像素材的获取 用图形处理软件 如Photoshop Fireworks和FreeHand等软件 制作网上下载或购买一些网页素材光盘 进行加工后用到自己的网页中 单击插入栏中常用类的 插入图像 选择 插入 图像 命令 直接拖入 插入图像 图像既可用于网页内容 也可作为网页的背景 用占位符插入图像 如果制作时不知道当前该插入哪幅图像 但知道该图像的大小 可以使用占位符来插入图像 当要插入的图像确定后再像直接插入图像一样进行插入即可 插入源文件 首先选取该图像 选取图像后 图像四周会出现控制柄 然后打开属性面板 在属性面板中进行具体的设置 设置图像属性 图像预览窗口 图像的大小与名称名称主要是为了在使用Dreamweaver行为 如交换图像 或脚本撰写语言 如JavaScript或VBScript 时可以引用该图像 图像宽与高 图像所处的路径 恢复图像大小的按钮 图像的链接 可以连接到很多元素 武林外传 htm链接到图片huihua图片的插入 htm热点链接到洪恩在线 图像替换的文字或图像当鼠标移动到图像上后 浏览器会在鼠标指针右下方弹出该图像的文本说明 图像的映射工具武林外传 htm 先下载相同的低分辨率图象提高下载速度huihua图片的插入 htm 图像的外框 图像与文本的对齐方式后面介绍 图像在网页中的对齐方式 设置图像间距若图像和文字贴得太近 容易使人产生压迫感 垂直边距 设置图像与文本顶部和底部边距 水平边距 用于设置图像距左侧和右侧的边距 编辑 启动您在 外部编辑器 首选参数中指定的图像编辑器并打开选定的图像 优化 打开 优化 对话框 裁剪 修剪图像的大小 图像重新取样 添加或减少已调整大小的JPEG和GIF图像文件中的像素 以与原始图像的外观尽可能地匹配 对 裁剪 图像进行重新取样会减小图像文件的大小 其结果是下载性能的提高 注意 Dreamweaver图像编辑功能仅适用于JPEG和GIF图像文件格式 其它位图图像文件格式不能使用这些图像编辑功能编 图像映射 映射图 将一个图像划分为若干区域 并将每个区域链接到不同的网页 URL或其他的资源 热点 热点 是对一个图像内一个区域的几何描述基本形状有矩形 圆形和多边形3种 编辑热点 1 编辑单个热点改变热点的大小 拖动热点周围轮廓线上的正方形小点 移动热点 用鼠标直接拖动即可 删除热点 可直接按Del健 2 编辑多个热点 选择的所有热点 Shift健 按Ctrl A健 右击 快捷菜单中选择对齐方式等宽 等高 复制一个图像 图像上所有的热点也被复制 为热点建立链接 在图像映射面板上的Link文本框中输入相应的链接 指定当前编辑的映射图名称 移动热点 建立矩形 圆形 多边形热点 指定当前热点的超链接 指定当前热点的目标框架名 当前热点的替换文本 图像映射面板 图像映射面板 山大网页分析插入图片 添加热点 给热点建立链接旅游地图tuxiangyinshe htm热点的替代可以实现给图象热点添加行为效果更好 详细见第十课 图像与文本的对齐 在Dreamweaver中 插入的图像被视为一般字符 因此在插入图像时 图像将夹在二个文字之间 好像是一个放大后的文字一样 而且与上面一行文字空出相当大的距离 选取图像后 可设置同一行上的图像与文本的对齐方式 默认值 通常指定基线对齐 访问者的浏览器的不同 默认值也会有不同 基线 将文本 或同一段落中的其它元素 的基线与选定对象的底部对齐 顶端 将图像的顶端与当前行中最高项 图像或文本 的顶端对齐 居中 将图像的中部与当前行的基线对齐 文本上方 将图像的顶端与文本行中最高字符的顶端对齐 绝对居中 将图像的中部与当前行中文本的中部对齐 绝对底部 将图像的底部与文本行 这包括字母下部 例如在字母g中 的底部对齐 左对齐 将所选图像放置在左边 文本在图像的右侧换行 右对齐 将图像放置在右边 文本在对象的左侧换行 图文混排的效果可用 左 右对齐 实现 佟湘玉 图文混排 htm 1 绘制布局表格 居中对齐 2 加入你喜欢的背景色 3 插入文本 进行排版 单元格的垂直对齐设置为顶端 将文本题目居中对齐 正文左对齐 4 插入剧照 选中剧照 将图片设置为左对齐 5 将剧照拖到需要停放的这行的最左端 6 选中剧照 设置图片和文本的垂直边距和水平边距 7 可以根据兴趣对图象进行编辑 编辑 启动在首选参数中的图像编辑器并打开选定的图像 优化 打开 优化 对话框 裁剪 修剪图像的大小 删除不需要的区域 图像重新取样 添加或减少已调整大小的JPEG和GIF图像文件中的像素 以与原始图像的外观尽可能地匹配 亮度和对比度 注意 Dreamweaver图像编辑功能仅适用于JPEG和GIF图像文件格式 其它位图图像文件格式不能使用这些图像编辑功能编 在Dreamweaver中 如果需要重新编辑图像 只需要选中图像 右键单击如图 Dreamweaver将自动打开图像编辑器 在图像编辑器中即可对图像进行编辑 关闭则返回 图像编辑器 如果同时安装了几个图像处理软件 Dreamweaver则自动将Fireworks Macromedia公司的图像处理软件 默认为当前图像编辑器 改变当前默认的图像编辑器编辑 首选参数 文件类型 编辑器命令设置 小技巧 图片设置为左或右对齐后 用鼠标拖入当光标停在行起始 包括段前空格 时 图片插入所在行的左或右端 当光标停在行中间后末尾时 在本行的下面一行上图片左或右端靠齐 创建鼠标经过图像 两个图像其大小应相等 如果两个图像大小不同 Dreamweaver自动调整鼠标经过图像的大小以匹配原始图像的大小 创建导航条 插入导航条编辑导航条 每一个项目都对应一个按钮 该按钮具有一组状态图像 最多可达四个 导航条元件 列表显示 排列项目在导航条中的位置 条项目有四种状态 不必包含所有这四种状态的导航条图像 例如 可以只选用 状态 和 按下 这两种状态 尚未单击或尚未与此项目交互时所显示的图像 指鼠标指针滑过时所显示的图像 项目被单击后所显示的图像 表示它曾被选择过 在项目被单击后 鼠标指针滑过 按下 图像时 所显示的图像 在 替换文本 文本框中 输入项目的描述性名称 有些浏览器在用户鼠标滑过导航条项目时显示替换文本 选择 预先载入图像 可在载入页面时下载图像 如果未选择此选项 在用户将鼠标指针滑过鼠标经过图像时可能会出现延迟 选择 初始时显示 按下图像 可在显示页面时 以 按下 状态显示所选项目 而不是以默认的 状态图象 显示 选择此选项时 在 导航条项目 列表中该项目后面出现一个星号 选择在文档中是垂直插入还是水平插入导航条项目 单击加号 按钮向导航条添加另一个项目 然后重复上述步骤定义该项目 完成导航条项目的添加及定义后 单击 确定 导航条的制作步骤 1 准备好多幅图片 每个导航项均需要4幅 状态图像 鼠标经过图像 按下图像 按下时鼠标经过