deamwear插入图像PPT课件

《deamwear插入图像PPT课件》由会员分享，可在线阅读，更多相关《deamwear插入图像PPT课件（56页珍藏版）》请在装配图网上搜索。

1、浮动面板组浮 动 面 板 组 是 停 靠 在 编 辑 窗 口 右 侧 浮 动 面 板 的 集 合 。单 击 左 侧 的 图 标 即 可 展 开 一 个 面 板展 开 后 图 标 变 为 形 状 ，再 单 击 图 标 则 合 拢 面 板 ， 只 显 示 浮 动 面 板 的 名 称 。 将 鼠 标 移 到 浮 动 面 板 的 图 标 上 至 鼠 标 指 针 变 为 形 状 时 ， 拖 动 该 面 板 即 可 将 浮 动 面 板 移 到 窗 口 中 的任 何 位 置 。 网页图像的格式网页图像素材的获取插入图像设置图像属性图像的高级应用第五课 插入图像 网页图像的格式 受 网 络 速 度 的 影 响

2、 ， 用 于 网 页 的 图 像 一 般有 GIF、 JPEG（ 也 称 为 JPG） 或 PNG这 3种 格 式 。 GIF 图 像 交 换 格 式 ， 是 第 一 个 支 持 网 页 的 图 像 格 式 ， 它 最多 支 持 256种 颜 色 ， 可 以 使 图 像 变 得 相 当 小 。 GIF图 像 可 以 包 含 动 态 信 息 ， 也 就 是 网 页 上 大 量 使 用的 GIF动 画 。 GIF在 网 页 中 大 量 用 于 站 点 图 标 Logo、 广 告 条 Banner及 网 页 背 景 图 像 ， 但 由 于 GIF受 颜 色 数 目 的 限 制 ， GIF不 适合 用

3、 作 照 片 级 的 网 页 图 像 。 插 入 图 像 的 的 格 式 必 须 是 网 页 支 持 的 格 式 在 插 入 图 像 之 前 ， 要 做 好 收 集 图 像 的 工 作 网页图像素材的获取用 图 形 处 理 软 件 （ 如 Photoshop、 Fireworks和FreeHand等 软 件 ） 制 作网 上 下 载 或 购 买 一 些 网 页 素 材 光 盘 ， 进 行 加 工 后用 到 自 己 的 网 页 中 单击插入栏中常用类的（插入图像）; 选择（插入）、（图像）命令; 直接拖入.插入图像 图像既可用于网页内容，也可作为网页的背景 用占位符插入图像 如 果 制 作 时

4、不 知 道 当 前 该 插 入 哪 幅 图 像 ， 但知 道 该 图 像 的 大 小 ， 可 以 使 用 占 位 符 来 插 入 图 像 。 当 要 插 入 的 图 像 确 定 后 再 像 直 接 插 入 图 像一 样 进 行 插 入 即 可 。 插入源文件： 首 先 选 取 该 图 像 （ 选 取 图 像 后 ， 图 像 四 周 会 出 现 控 制柄 ） ， 然 后 打 开 属 性 面 板 ， 在 属 性 面 板 中 进 行 具 体 的 设置 。 设置图像属性 图像预览窗口图像的大小与名称名称主要是为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VB

5、Script）时可以引用该图 像 图像宽与高 图像所处的路径 恢复图像大小的按钮 图像的链接，可以连接到很多元素。图片,网页等热点链接到洪恩在线 图像替换的文字或图像当鼠标移动到图像上后，浏览器会在鼠标指针右下方弹出该图像的文本说明。 图像的映射工具武林外传.htm（站点建在素材/5图片） 先下载相同的低分辨率图象images/z2.jpg再下载高分辨率图象images/z1.jpg提高下载速度huihua图片的插入.htm图像的外框 图像与文本的对齐方式 后面介绍图像在网页中的对齐方式 设置图像间距若图像和文字贴得太近，容易使人产生压迫感 “垂直边距”设置图像与文本顶部和底部边距， “水平边

6、距”用于设置图像距左侧和右侧的边距。 “编辑”启动默认图像编辑器rundll132 可以在“外部编辑器”首选参数中指定图像编辑器。 改变默认的图像编辑器编辑首选参数-文件类型/编辑器命令设置 编辑方式改变后：用photoshop编辑图象。关闭则返回. 以其他软件编辑图像，选中图像，右键单击如图。图像编辑器 “优化”打开“优化”对话框。Dreamweaver则自动将Fireworks (Macromedia公司的图像处理软件)默认为当前图像编辑器。 “裁剪”修剪图像的大小。 注意：永久改变图象。 图像重新取样:添加或减少已调整大小的 JPEG 和 GIF 图像文件中的像素，以与原始图像的外观尽可

7、能地匹配。会减小图像文件的大小，其结果是下载性能的提高。 改变亮度对比度及锐化图片。 注意：永久改变图象。 注意：Dreamweaver图像编辑功能仅适用于JPEG和GIF图像文件格式。其它位图图像文件格式不能使用这些图像编辑功能 图像映射 映射图:将一个图像划分为若干区域，并将每个区域链接到不同的网页、URL或其他的资源 热点 热点:是对一个图像内一个区域的几何描述 基本形状有矩形、圆形和多边形3种。 步骤1.选中图片2.选一种形状热点工具。3.按住左键拖动，绘制热点。4.抬起左键，绘制结束。5.默认接着进行热点工具。按指针热点工具 按住热点周围轮廓线方形小点，调热点大小 按其他区域，移动热

8、点区域。 删除热点:可直接按Del健。 编辑多个热点 选择的所有热点:Shift健；右击，快捷菜单中选择对齐方式等宽；等高； 复制一个图像，图像上所有的热点也被复制。 为热点建立链接 在图像映射面板上的Link文本框中输入相应的链接。 指定当前编辑的映射图名称移动热点 建立矩形, 圆形, 多边形热点指定当前热点的超链接 指定当前热点的目标框架名当前热点的替换文本图像映射面板 图像映射面板 山大网页分析插入图片，添加热点，给热点建立链接旅游地图tuxiangyinshe.htm热点的替代可以实现给图象热点添加行为效果更好，详细见第十课。 图像与文本的对齐在Dreamweaver中，插入的图像被视

9、为一般字符。因此在插入图像时，图像将夹在二个文字之间，好像是一个放大后的文字一样，而且与上面一行文字空出相当大的距离。 选 取 图 像 后 ， 可 设 置 同 一 行 上 的 图 像 与 文 本 的 对 齐 方 式 。 “默认值”通常指定基线对齐。（访问者的浏览器的不同，默认值也会有不同。） “基线”将文本（或同一段落中的其它元素）的基线与选定对象的底部对齐。 “顶端”将图像的顶端与当前行中最高项（图像或文本）的顶端对齐。 “居中”将图像的中部与当前行的基线对齐。 “文本上方”将图像的顶端与文本行中最高字符的顶端对齐。 “绝对居中”将图像的中部与当前行中文本的中部对齐。 “绝对底部”将图像的底

10、部与文本行（这包括字母下部，例如在字母g中）的底部对齐。 “左对齐”将所选图像放置在左边，文本在图像的右侧换行。 “右对齐”将图像放置在右边，文本在对象的左侧换行。图 文 混 排 的 效 果 可 用 ” 左 /右 对 齐 ” 实 现 . 佟湘玉(图文混排).htm1.绘制布局表格，居中对齐。2.加入你喜欢的背景色。3.插入文本。进行排版。单元格的垂直对齐设置为顶端。将文本题目居中对齐，正文左对齐。4.插入剧照。选中剧照，设置为左对齐。 5.将剧照拖到需要停放的这行的最左端。6.选中剧照，设置图片和文本的垂直边距和水平边距。7.可以根据兴趣对图象进行编辑。 小技巧 图片设置为左或右对齐后，用鼠标

11、拖入 光标停在行起始（包括段前空格）时，图片插入所在行的左或右端。 光标停在行中间后末尾时，在本行的下面一行上图片左或右端靠齐。 创建鼠标经过图像两 个 图 像 其 大 小 应 相 等 ，如 果 两 个 图 像 大 小 不 同 ， Dreamweaver自 动 调 整 鼠 标 经 过 图 像 的 大 小 以 匹 配 原 始 图 像 的 大 小 。 创建导航条 插入导航条 编辑导航条 每一个项目都对应一个按钮，该按钮具有一组状态图像，最多可达四个。“导航条元件”列表显示。排列项目在导航条中的位置。 条项目四种状态： 不必包含所有四种状态图像：可只选用“状态”和“按下”这两种状态。 尚未单击或尚未

12、与此项目交互时所显示的图像。 鼠标指针滑过时所显示图像项目被单击后所显示的图像表示它曾被选择过。在项目被单击后，鼠标指针滑过“按下”图像时，所显示的图像。 在“替换文本”文本框中，输入项目的描述性名称。 有些浏览器在用户鼠标滑过导航条项目时显示替换文本。 在载入页面时下载图像。 如果未选择，将鼠标指针滑过可能会出现延迟。 显示页面时，以“按下”状态显示所选项目，而不是以默认的“状态图象”显示。 选择在文档中是垂直插入还是水平插入导航条项目。 单击加号(+)按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。 完成导航条项目的添加及定义后，单击“确定”。 导航条的制作步骤：1、准备好多幅图片

13、，每个导航项均需要4幅（状态图像、鼠标经过图像、按下图像、按下时鼠标经过图像），一般来说基本形状及样式相同，但可以有不同区别，如颜色或背景不同。如图像不足可为不同状态选择同一幅图像。2、在网页中选择“插入”菜单交互式图像导航条。在对话框中设置各项参数，如项目名称、四种状态图像、链接网页等。3、如修改导航条：插入导航条（因一个网页中只能插入一个导航条，插入即为打开已有导航条）。修改导航条选中导航图像，在“行为”面板中单击相应行为。 网页图像的格式 受 网 络 速 度 的 影 响 ， 用 于 网 页 的 图 像 一 般有 GIF、 JPEG（ 也 称 为 JPG） 或 PNG这 3种 格 式 。

14、GIF 图 像 交 换 格 式 ， 是 第 一 个 支 持 网 页 的 图 像 格 式 ， 它 最多 支 持 256种 颜 色 ， 可 以 使 图 像 变 得 相 当 小 。 GIF图 像 可 以 包 含 动 态 信 息 ， 也 就 是 网 页 上 大 量 使 用的 GIF动 画 。 GIF在 网 页 中 大 量 用 于 站 点 图 标 Logo、 广 告 条 Banner及 网 页 背 景 图 像 ， 但 由 于 GIF受 颜 色 数 目 的 限 制 ， GIF不 适合 用 作 照 片 级 的 网 页 图 像 。 热点 热点:是对一个图像内一个区域的几何描述 基本形状有矩形、圆形和多边形3种

15、。 步骤1.选中图片2.选一种形状热点工具。3.按住左键拖动，绘制热点。4.抬起左键，绘制结束。5.默认接着进行热点工具。按指针热点工具 按住热点周围轮廓线方形小点，调热点大小 按其他区域，移动热点区域。 删除热点:可直接按Del健。 图像映射面板 山大网页分析插入图片，添加热点，给热点建立链接旅游地图tuxiangyinshe.htm热点的替代可以实现给图象热点添加行为效果更好，详细见第十课。 “绝对居中”将图像的中部与当前行中文本的中部对齐。 “绝对底部”将图像的底部与文本行（这包括字母下部，例如在字母g中）的底部对齐。 “左对齐”将所选图像放置在左边，文本在图像的右侧换行。 “右对齐”将图像放置在右边，文本在对象的左侧换行。图 文 混 排 的 效 果 可 用 ” 左 /右 对 齐 ” 实 现 . 在载入页面时下载图像。 如果未选择，将鼠标指针滑过可能会出现延迟。 显示页面时，以“按下”状态显示所选项目，而不是以默认的“状态图象”显示。