网页设计第7单元

《网页设计第7单元》由会员分享，可在线阅读，更多相关《网页设计第7单元（48页珍藏版）》请在金锄头文库上搜索。

1、第6章 图像操作 图图像也是网页页中主要元素之一 图图像不 但能美化网页页 与文本相比能够够更直观观地表 达信息 在页页面中恰到好处处地使用图图像能使 网页页更加地生动动 形象和美观观 l 课程引导 l 知识技能目标 1 掌握图图像的插入方法 2 掌握图图像属性的设设置方法 3 掌握图图像与文本混合编编排的方法 4 掌握插入鼠标经过图标经过图 像的方法 了解插 入图图像占位符的方法 l 网页浏览效果展示 本章所制作的网页页03 html浏览浏览 效果如图图所示 图图6 1 网页页03 html的浏览浏览 效果 l 本章操作任务 1 打开 长长沙世界之窗 网站文件夹夹 03图图像操作 中的网页页

2、 03 html 在该该 网页页中最后一段文本与日期之间间插入两幅图图 片 2 按规规定要求设设置所插入图图像的属性 3 在已插入图图片的右侧侧插入鼠标经过标经过 图图像 4 制作包括一个图图像按钮钮的导导航条 6 1图像概述 6 2图像操作 6 3插入相关图像元素 6 16 1 图像概述 图像概述 目前因特网上支持的图图像格式主要有 GIF Graphics Interchange Format JPEG Joint Photographic Experts Group PNG Portable Network Graphic 三 种 其中GIF和JPEG两格式的图图片文件由于 文件较较小

3、适合于网络络上的传输传输 而且能 够够被大多数的浏览浏览 器完全支持 所以是网 页页制作中最为为常用的文本格式 6 2 16 2 1 插入图像 插入图像 6 26 2 图像操作 图像操作 打开 长长沙世界之窗 网站文件夹夹 03 图图像操作 中的网页页 03 html 在该该网页页 中最后一段文本与日期之间间插入两幅图图片 具体操作过过程如下 1 切换换到 长长沙世界之窗 网站 打开文件夹夹 03图图像操作 中网页页03 html 2 将光标标放置在网页页03 html正文文 本最后一行的尾部 按Enter键换键换 行 3 单击单击 菜单单 插入 图图像 或 单击单击 常用 插入工具栏栏上的

4、图图像 按钮钮 弹弹出 选择图选择图 像源文件 对话对话 框 4 在 选择图选择图 像源文件 对话对话 框中先 选择选择 需要的图图像文件的路径 然后选择选择 一个 需要插入的图图像文件 5 单击单击 确定 按钮钮 接着会弹弹出 图图像标签辅标签辅 助功能属性 对话对话 框 提醒用户户 输输入替换换文本和详细说详细说 明 6 2 26 2 2 设置图像属性 设置图像属性 图图像的属性设设置要求如下 1 设设置图图像的宽宽度为为 150 高度为为 100 2 调调整图图像与其上方及下方文字的间间距为为 10 3 设设置图图像的替换换文本为为 悉尼歌剧剧院 4 为图为图 像添加边边框 边边框宽宽度

5、为为 3 5 设设置图图像与浏览浏览 器 左对齐对齐 设设置 图图像与文本的对齐对齐 方式为为 绝对绝对 底部 根据图图像的属性设设置要求完成图图像属性 的设设置 1 在图图像位置的上部输输入图图像的说说明信息 悉尼歌剧剧院 2 选选中刚刚插入的图图像 在属性面板中显显示 出图图像的属性 下方其他页页面元素之间间的距 离 3 在 宽宽 文本框中输输入150 用来 设设置图图像的宽宽度 在 高 文本框中输输入100 用来设设置图图像的高度 图图像的宽宽度和高度 的单单位是像素 4 在 垂直边边距 文本框中输输入 10 单单位为为像素 用来设设置图图像顶顶部与 其上方其他页页面元素之间间 以及图图

6、像底部与 其下方其他页页面元素之间间的距离 5 在 替换换 文本框输输入 悉尼歌剧剧 院 在显显示图图像之前或者图图像无法显显示时时 将显显示这这段文字 6 在 边边框 文本框中输输入 3 单单位为为像素 用来设设置图图像边边框的宽宽度 7 单击单击 左对齐对齐 按钮钮 把图图像设设置成 与浏览浏览 器左对齐对齐 在 对齐对齐 下拉列表框中 选选中 绝对绝对 底部 用来设设置图图像与同一行 文本的相互对齐对齐 方式 这项这项 技术术是网络络上最常用的技术术之一 实际实际 上就 是一组组交替图图片 浏览浏览 网页时页时 把鼠标标移到一张图张图 片 上时时 这张图这张图 片就会马马上换换成另一张图

7、张图 片 当鼠标标移 开时时 图图片又换换回来了 这这种互动动技术术通常用在网页页 的选项选项 按钮钮上 当鼠标标移到按钮钮上时时它会发发光或者凹 陷 在鼠标标移走后又恢复原样样 插入鼠标经过图标经过图 像的具体过过程如下 1 在Dreamweaver 8的文档窗口中 将光标标置于第 二幅图图像的右侧侧 6 36 3 插入相关图像元素 插入相关图像元素 6 3 16 3 1 插入鼠标经过图像 插入鼠标经过图像 2 在 常用 插入工具栏栏中单击单击 图图 像 按钮钮旁边边的小三角形 在弹弹出的菜单单中 单击单击 鼠标经过图标经过图 像 按钮钮 弹弹出一个 插 入鼠标经过图标经过图 像 对话对话

8、框 3 在 插入鼠标经过图标经过图 像 对话对话 框中 设设置各个选项选项 1 在 图图像名称 文本框中输输入 Image3 用来设设置鼠标经过图标经过图 像的名称 2 在 原始图图像 文本框中输输入原始 图图像的路径及名称 或者单击单击 文本框右侧侧 浏览浏览 按钮钮打开 Original Image 对话对话 框 在其中选择选择 原始图图像 这这里选择选择 3 jpg 及名称 这这里选择选择 4 jpg 3 在 鼠标经过图标经过图 像 用来设设置当 移动动鼠标标指针针到鼠标经过图标经过图 像时时 原始图图 像替换换成的图图像 在其后的文本框中输输入该该 替换图换图 像的路径及名称 这这里选

9、择选择 4 jpg 4 对对于 预载预载 鼠标经过图标经过图 像 复选选框 如果选选中复选选框 则则网页页一打开即预预下载载 替换图换图 像到本地机 当移动动鼠标标指针针到鼠标标 经过图经过图 像时时 能迅速切换换到替换图换图 像 如果 取消对该对该 复选选框的选择选择 当移动动鼠标标指针针到 鼠标经过图标经过图 像时时才下载这载这 个替换图换图 像 替换换 的时时候可能有画面不连贯连贯 的情况出现现 5 替换换文本 文本框用来设设置该该鼠 标经过图标经过图 像的替换换文本 当图图像无法显显示时时 将显显示这这些替换换文本 这这果输输入文字 图图 片三 6 按下时时 前往的URL 用来设设置

10、该该鼠标经过图标经过图 像上应应用的超级链级链 接 这这里可 先输输入 03 html 单击单击 确定 按钮钮 即可完成插入 鼠标经标经 过图过图 像 的操作 4 在页页面中选选中该该 鼠标经过图标经过图 像 利用 属性 面板对对 鼠标经过图标经过图 像 的 属性进进行必要的设设置 链链接也重新输输入 例 如输输入 5 保存网页页文档03 html 浏览该浏览该 网页页 制作导导航条的具体过过程如下 1 打开网站 长长沙世界之窗 的网页页 03 html 光标标置于 鼠标经过图标经过图 像 的右侧侧 准备备制作导导航条 2 在 常用 插入工具栏栏中 单击单击 图图像 按钮钮旁边边的小三角形 在

11、弹弹出的菜单单 中单击单击 导导航条 按钮钮 弹弹出 插入导导航条 对话对话 框 然后在该对话该对话 框中设设置各个参数 6 3 26 3 2 插入导航条 插入导航条 3 在导导航条中 每个图图像链链接被称为为 一个项项目 所有的项项目都显显示在 导导航条元 件 列表框中 刚刚开始只存在一个默认认的导导 航条按钮钮 在 项项目名称 文本框中输输入第 一个导导航条元件的名称为为 button1 4 在 状态图态图 像 文本框中输输入图图像 文件的路径和名称 也可以通过单击过单击 文本框 右侧侧的 浏览浏览 按钮钮 从磁盘盘上选择选择 已有 的图图像文件 这这里选择选择 5 jpg 同插入图图像的

12、 操作一样样 如果图图像文件不在站点根文件夹夹 内 会弹弹出对话对话 框询问询问 是否将图图片复制到站 点文件夹夹中 使用同样样的方法 为为 鼠标经过图标经过图 像 按下图图像 按下时时鼠标经过图标经过图 像 分别选择别选择 不同的图图像 这这里所选择选择 的图图像文 件名称分别为别为 6 jpg 7 jpg 8 jgp 5 在 替换换文本 文本框中输输入 图图 片4 在 按下时时 前往的URL 的文本框中 输输入 当单击该图单击该图 像按钮时钮时 将会打开对应对应 网页页 6 对对于 预预先载载入图图像 复选选框 如 果选选中它 访问访问 者浏览该浏览该 网页时页时 上述设设置 的四幅图图像

13、将在页页面下载时载时 全部下载载 若取 消对该对该 复选选框的选择选择 页页面下载载的同时时只下 载载 状态图态图 像 其他的图图像在交互操作时时 才开始下载载 这这里选择该选择该 复选选框 7 对对于 页页面载载入时时就显显示 鼠标标按 下图图像 复选选框 如果选选中它 访问访问 者浏浏 览该览该 网页时页时 会先显显示在 按下图图像 文本 框中设设置的图图像 如果取消对该对该 复选选框的选选 择择 浏览该浏览该 网页时页时 会先显显示在 状态图态图 像 文本框中设设置的图图像 这这里不选择该选择该 复选选 框 8 在 插入 下拉列表框中可以选择选择 导导航条的排列方式 有两个选项选项 水平

14、 和 垂直 如果选择选择 水平 则导则导 航条 将水平排列 如果选择选择 垂直 则导则导 航条 将垂直排列 这这里选择选择 水平 9 对对于 使用表格 复选选框 如果选选 中它 则则使用表格来排列导导航条中的元件 10 单击单击 确定 按钮钮关闭闭 插入导导 航条 对话对话 框 11 在页页面中选选中该该 导导航条 图图像 利用 属性 面板对对 导导航条 图图像的属 性进进行必要的设设置 打开 页页面属性 对话对话 框适当调调整左 右边边距 将左边边距和右边边距 调调整为为 50px 即可 12 保存网页页文档 然后按F12快捷键键 浏览该浏览该 网页页 插入图图像占位符的操作过过程如下 1

15、在 常用 插入工具栏栏中 单击单击 图图像 按钮钮旁边边的小三角形 在弹弹出的下拉 菜单单中单击单击 图图像占位符 弹弹出 图图像占 位符 对话对话 框 6 3 36 3 3 插入图像占位符 插入图像占位符 2 在 图图像占位符 对话对话 框中设设置占 位符的属性 在 名称 文本框中输输入要插入 图图片的名称 在 宽宽度 和 高度 文本框 中输输入图图片的宽宽度和高度的数值值 在 颜颜色 选择选择 器中设设置占位符的颜颜色 在 替换换文 本 文本框中输输入图图片的替代文字 3 图图像占位符的属性设设置完成后 单单 击击 确定 按钮钮 这样这样 一幅实际实际 上并不存在 的图图片将出现现在页页面

16、上 4 用鼠标单击选标单击选 中该图该图 像占位符 然 后在属性面板中单击单击 创创建 按钮钮可以调调用 Fireworks生成PNG图图像 课堂实践 打开 课课堂实实践 网站中文件夹夹 03图图 像操作 中的网页页文档 03 html 然后在 网页页中插入四幅图图像 具体操作要求如下 1 第一幅与第二幅图图像插入的是普通 图图像 源文件分别为别为 01 jpg 和 02 jpg 替换换文本 分别为别为 湘江谷 景观观之一 和 湘江谷景观观之二 1 1 操作要求 操作要求 2 第三幅插入的是 鼠标经过图标经过图 像 原始图图像 的源文件为为 03 gif 鼠标经过图标经过图 像 的源文件为为 04 gif 替换换文本 为为 湘江谷景观观之三 链链接 为为 03 html 3 第四幅插入的是 导导航条 的图图像 按钮钮 该图该图 像按钮钮的项项目名称为为 button1 状态图态图 像 的源文件为为 05 jpg 鼠标经过图标经过图 像 的源文件为为 06 gif 按下图图像 的源文件为为 07 gif 按下时时鼠标经过图标经过图 像 的源 文件为为 08 gif 替换换文本 为为 湘江