网页制作PPT-ch2.ppt

第2章Dreamweaver8概述和案例 2 1案例1 认识Dreamweaver8 网页2 2案例2 校园风貌 在水一方 网页2 3案例3 校园风貌 眺望 网页2 4案例4 校园风貌 眺望 网页修改 2 1案例1 认识Dreamweaver8 网页 案例效果 认识Dreamweaver8 网页是一组网页 通过介绍Dreamweaver8实例的制作方法 掌握Dreamweaver8的使用方法和使用技巧 图2 1是一组网页中的一个网页画面 单击 相关知识 文字 可以打开 案例1相关文字 网页 通过本案例的学习 可以掌握网页文档基本操作 页面属性设置 设置文字属性的方法等 可以快速制作多个网页 甚至完成一个网站的制作 2 1案例1 认识Dreamweaver8 网页 设计过程1 使用Word制作网页方法2 网页页面属性设置3 网页链接 2 1案例1 认识Dreamweaver8 网页 相关知识1 保存和关闭文档 1 保存文档 单击 文件 保存全部 命令 可以将当前正在编辑的所有文档以原名保存 2 关闭文档 单击 文件 关闭 命令 可以关闭打开的当前文档 如果当前文档在修改后没有存盘 则会弹出一个提示框 提示用户是否保存文档 单击 文件 全部关闭 命令 可以关闭所有打开的文档 2 1案例1 认识Dreamweaver8 网页 相关知识2 建立本地站点建立本地站点就是将本地主机磁盘中的一个文件夹定义为站点 将所有文档都存放在该文件夹中 便于管理 在设计网页前 应先建立本地站点 2 1案例1 认识Dreamweaver8 网页 相关知识3 文字属性的设置设置字体 设置字体有两种方法 第一种 可以通过菜单命令设置文本字体 首先选定文本 然后选择 文本 字体 命令即可 第二种 可以通过属性面板的 字体 下拉列表框中选择一种字体即可 文字大小的设置 设置文字大小 通过属性面板设置文字大小 首先选择文本 然后单击属性面板上 文本大小 右端的下拉按钮 打开列表 从中选择合适大小的即可 文字颜色的设置 设置文字颜色有两种方法 第一种 可以通过菜单命令设置文本颜色 首先选定文本 然后选择 文本 颜色 命令 打开 颜色 对话框 在 颜色 对话框中自定义颜色 设置完成后 单击 确定 第二种 可以通过属性面板设置文字颜色 首先选择文本 然后单击属性面板上 文本颜色 右端的颜色块 打开列表 单击一种颜色即可 文字对齐设置 Dreamweaver中的文本对齐方式包括左对齐 居中对齐 右对齐和两端对齐 首先将光标置放在要设置对齐段落中 或选中要对齐方式的段落 在 文本 对齐 子菜单中选择对齐方式即可 2 2案例2 校园风貌 在水一方 网页 案例效果 2 2案例2 校园风貌 在水一方 网页 设计过程1 输入文字2 插入图像 2 2案例2 校园风貌 在水一方 网页 相关知识1 文字的复制与移动在网页文档的 设计 视图和 代码 视图窗口内 进行文字的复制与移动操作 与在Word中的方法基本相同 2 文字的拼写检查执行 文本 检查拼写 命令 Dreamweaver8会检查网页页面内所有英文单词的拼写是否正确 如果全部正确 则会弹出检查完毕的提示框 如果有不正确的英文单词 则会弹出 检查拼写 对话框 该对话框中会列出错误的英文文字并推荐更改的英文单词 方便用户修改错误的单词 2 2案例2 校园风貌 在水一方 网页 相关知识3 文字的查找与替换执行 编辑 查找和替换菜 命令 弹出 查找和替换 对话框 使用方法与Word基本相同 2 2案例2 校园风貌 在水一方 网页 相关知识4 图文混排当网页内有文章和图像混排时 系统默认的状态是图像的下沿和它所在的文字行的下沿对齐 若图像较大 则页面内的文字与图像的布局会很不协调 因此需要调整他们的布局 调整图像与文字混排的布局下沿使用图像 属性 栏 2 3案例3 校园风貌 眺望 网页 案例效果 2 3案例3 校园风貌 眺望 网页 设计过程 2 3案例3 校园风貌 眺望 网页 相关知识网页中的图像在网站中 向人们展示的是精心制作的图文并茂的网页 在插入图像时 首先考虑图像在页面中的整体效果 其次应综合考虑图像的质量和下载速度 图像的格式有多种 常用的图像格式有三种 GIF JPEG和PNG GIF格式在网页中使用的最普遍 最广泛 GIF支持图片有利在背景之上的视觉效果 可以使图像产生透明的效果 GIF格式最多只能是256色的图像 它具有图像文件短小 下载速度快等特点 从而实现动画的效果 这就是所谓的动画GIF JPEG格式是目前互联网实质最受欢迎的图像格式 JPEG可支持多达16M颜色 因此 照片 油画和一些细腻 讲求浓淡的图像常采用JPEG格式 JPEG具有调节图像的功能 支持很高的压缩率 其图像的下载速度非常快 2 3案例3 校园风貌 眺望 网页 相关知识1 导入图像利用 插入图像 工具插入图像 单击 插入 常用工具栏内的 图像 按钮 或用鼠标拖动按钮到网页内 将弹出 选择图像源文件 对话框 在 选择图像源文件 对话框中选择图像文件后 单击 确认 按钮 即可将选定的图像加入到页面的光标处 要将所选的图像放在站点文件夹下的图像文件夹images内 2 3案例3 校园风貌 眺望 网页 相关知识2 移动 复制 删除图像和调整图像大小 1 移动和复制图像 单击选中要编辑的图像 这是图像周围会出现几个黑色方形的小控制柄 如果要移动或复制图像 可以像移动文字那样 用鼠标拖动天下到目标点 即可移动图像 按住Ctrl键并用鼠标拖动图像到目标点 即可复制图像 2 删除图像 选中要删除的图像 再按Delete即可 还可以将它剪切到剪贴板中 3 调整图像大小 单击选中要调整的图像 用鼠标拖动控制柄 按住Shhift键 同时用鼠标拖动图像周围的小控制柄 可以做保证图像长宽比不变的情况下调整图像大小 2 3案例3 校园风貌 眺望 网页 相关知识3 图像属性 1 图像命名 插入图像后 保证图像处于被选中状态 可以在 属性 栏中设置图像的各种属性 2 给图像描边 选中图像 在 属性 面板的 边框 文本框中输入数字 就可以看到编辑文档中的图像有边框了 按F12键预览一下效果 也可以根据需要 将 边框 文本框中的数值增大或缩小来改变图像描边的粗细 2 3案例3 校园风貌 眺望 网页 相关知识4 使用 编辑 栏中的编辑工具编辑图像利用网页中图像 属性 面板内的图像编辑工具 可以对图像进行编辑 1 使用Firework进行图像的最优化 选中图像后 单击 使用Firework最优化 按钮 可以打开 查找源 对话框 单击 使用PNG 按钮 弹出 打开 对话框 选择图像源文件 单击 使用此文件 按钮 弹出 Optimize 对话框 利用该对话框可以直接编辑网页中选中的图像 对它进行优化处理 2 裁切图像 单击 裁切 按钮 弹出一个提示框 单击 确定 按钮后选中的图像四周会显示8个黑色控制柄 用鼠标拖动这些控制柄 按 Enter 键即可裁切图像 3 调整图像的亮度和对比度 单击 亮度和对比度 按钮 弹出 亮度和对比度 对话框 利用该对话框可以调整选中图像的亮度和对比度 4 调整图像的锐度 单击 锐度 按钮 弹出 锐度 对话框 利用该对话框可以调整选中图像的锐度 5 重新取样 在网页图像进行调整后 重新取样 按钮变为有效 单击它可以重新取样 2 4案例4 校园风貌 眺望 网页修改 案例效果将 校园风貌 眺望 网页进行修改 当鼠标移到第3幅图像上时 该图像会翻转为另一幅图像 同时显示 这是一幅校园风景画 文字 在文字中间 一幅较大的 校园风貌 图像逐渐显示出来 2 4案例4 校园风貌 眺望 网页修改 设计过程1 翻转图2 拼图 2 4案例4 校园风貌 眺望 网页修改 相关知识1 插入FireworkHTML 1 单击 插入 常用 工具栏的 图像 下拉菜单中的 FireworkHTML 按钮 弹出 选择FireworkHTML文件 对话框 利用该对话框选择Firework生成的HTML格式文件名 单击 确定 按钮 即可插入FireworkHTML文件 2 插入特殊字符和水平条 1 插入特殊字符 单击 插入 文本 工具栏内的字符按钮 可插入一些特殊字符 不含最下边的 其他字符 按钮 会在页面编辑窗口内显示 等代码 在浏览器内会显示 等字符 2 插入水平线 在页面内可以利用水平分割线将标题与文章或图像等对象分割 使页面的信息分布清晰 单击 插入 HTML 工具栏中的 水平线 按钮 即可在光标所在的行插入一条水平线 2 4案例4 校园风貌 眺望 网页修改 相关知识3 插入 插件 插件可以使用各种格式的音乐 Diretor的Shockwave影片 Authorware的Shockwave和Flash电影等 插入插件的方法是 1 单击 插入 常用 工具栏的 媒体 下拉菜单中的 插件 按钮 弹出 选择文件 对话框 利用该对话框选择一个要插入的文件 2 插入文件后 网页文档窗口会显示一个插件图标 单击选中后 可以用鼠标拖动图标的黑色控制柄 调整它的大小 其大小决定了插件在浏览器窗口中显示的大小 3 如果插入声音 在浏览器中可以播放插入的声音 同时 浏览器内会显示出一个播放器 如果要取消播放器 可以将插件图标调至很小 4 单击选中网页中的插件图标 打开它的 属性 面板 利用该 属性 面板可以进行一些相关的设置 2 4案例4 校园风貌 眺望 网页修改 相关知识4 插入ShockwaveShockwave影片是使用Macromedia公司的Director软件创建的 插入它的方法是 1 单击 插入 常用 工具栏的 媒