第6章 Dreamewaver.ppt

要制作一个漂亮 直观的Web网页 除了要了解HTML语言知识外 一般来说 还需要掌握一种Web网页可视化制作软件 如DreamWeawer FrontPage等 这样可以提高程序设计的效率 缩短软件研发周期 DreamWeawer和FrontPage在功能上各有千秋 DreamWeaver功能更强大一些 冗余代码少 站点管理 特效实现等轻而易举 DreamWeaver有多个不同的版本 本节我们将详细介绍DreamWeaverMX2004的使用方法 6 3Dreamweaver网页设计 1 DreamWeaverMX2004的新功能简洁高效的设计和开发界面新式的页面布局和设计环境强大和开放的编码环境系统安装要求PentiumIII600MHz或更快的处理器或等效处理器 Windows98以上的操作系统 建议采用256MB内存 至少275MB可用磁盘空间 建议选择百万种颜色的监视器 6 3 1DreamWeaverMX2004概述 2 选择工作区布局DreamWeaverMX2004将全部窗口和面板集成在一个应用程序窗口中 这个窗口被称为工作区 首次启动DreamWeaver时 会出现一个对话框 向用户提供了两种工作区布局 设计人员工作区 使用MDI 多文档界面 的集成工作区 文档 窗口在默认情况下显示 设计 视图 编码人员工作区 将面板组停靠在左侧 而且 文档 窗口在默认情况下显示 代码 视图 6 3 1DreamWeaverMX2004概述 之后进入该界面 3 DreamWeaver窗口概述 文档窗口 4 菜单概述 Dreamweaver菜单包括文件 编辑 查看 插入 修改 文本 命令 站点 窗口 帮助 文件 包括对文件的各种操作 编辑 包含了对文件的复制 粘贴 查找与替换等命令 查看 使用查看菜单可以查看文档的相关内容 插入 用于将对象插入文档中 修改 可以使用修改菜单更改选定页面元素的属性 文本 可以设置文本的格式 如段落格式 字体等 命令 提供各种命令的访问 站点 提供用于管理站点以及上传和下载文件的菜单项 窗口 提供对Dreamweaver中的所有面板 检查器和窗口的访问 帮助 提供了对Dreamweaver文档的访问 1 首选参数的设置编辑 首选参数 6 3 2网页前的准备 在DreamWeaver中 站点通常包含两部分 本地计算机 本地站点 上的一组文件和远程Web服务器上的一个位置 远程站点 使公众可以访问的文件需要上传到Web服务器上 使用DreamWeaver创建Web站点 最常见的方法就是先在你的本地磁盘上创建并编辑网页 然后将这些网页的副本上传到一个远程Web服务器 选择菜单 站点 管理站点 新建 站点 在出现 站点定义 对话框中根据需要进行相应的设置 2建立基本站点 1 新建并保存网页创建空白网页 在文件面板的空白处或站点上单击鼠标右键 在弹出的快捷菜单中选择 新建文件 命令 这样在本地目录结构中新建一个网页 新建网页的默认文件名为Untitled htm 打开网页文件 在文件面板的本地目录中双击要打开的网页 选择 文件 打开 6 3 3页面制作 在编辑网页之前 可以对网页的一些参数进行设置 这些参数将会影响到整个网页 按 Ctrl J 键或单击属性检查器上的 页面属性 按钮 将弹出页面属性对话框 外观 页面字体 文本颜色 背景色 背景图片链接 链接字体 颜色 已访问的链接颜色等 标题 编码 标题浏览时显示在标题栏中 编码为文档所使用的编码 一般为 简体中文 2 页面设置 插入的图片 导航条 Flash 链接 嵌入音乐 Flash 页面属性 3 插入文本 文本包括普通文字 特殊符号 时间日期 注释语句等内容 可以直接在DreamWeaver文档窗口中键入文本 也可以使用 剪贴板 工具复制文本 注意 DreamWeaver一般不保留在其他应用程序中应用的文本格式 但它保留换行符 1 设置文本字体和更改颜色首先选择要设置的文本 然后可使用 属性 面板或 文本 菜单中的选项进行格式 字体 字体大小 样式和颜色的设置 注意 在使用 属性 面板应用粗体或斜体样式时 DreamWeaver自动分别应用或标签 更改颜色时 可以直接在 属性 面板域中输入颜色名称或十六进制数字 4 设置文本格式 Dreamweaver提供了一个日期对象 使用该对象可以插入当前日期和时间 操作步骤如下 将插入点放在要插入日期的位置 执行下列操作之一 选择菜单 插入 日期 在 插入 栏的 常用 类别中 单击 日期 按钮 在弹出的 插入日期 对话框中选择日期和时间的格式 如果希望在每次保存文档时都更新插入的日期 选择 储存时自动更新 单击 确定 即可 如果选择了 储存时自动更新 选项 单击已设置格式的文本 可以在属性面板中选择 编辑日期格式 选项来编辑日期 2 插入日期 某些特殊字符在HTML中以名称或数字的形式表示 它们被称为实体 HTML包含版权符号 插入操作 将光标放在要插入特殊字符的位置 使用下列方法之一 插入 HTML 特殊字符 在 插入 栏中的 文本 类别中 单击 字符 按钮选择需要的字符 3 插入特殊字符 HTML只允许字符之间包含一个空格 若要在文档中添加多个空格 必须插入连续空格 下列四种方法可插入连续的多个空格 在 插入 栏中的 文本 类别中 插入 HTML 特殊字符 不换行空格 按Ctrl Shift 空格键 设置添加连续空格的参数 编辑 首选参数 在 常规 类别中选中 允许多个连续的空格 4 在字符之间添加空格 1 对齐文本 2 段落缩进 3 添加段落间距可以通过添加段落换行符和换行符的方法添加段落间距 要添加段落换行符 按Enter键 要添加换行符 按Shift Enter键 在 插入 栏中的 文本 类别中 选择 字符 然后单击 换行符 图标 选择菜单 插入 HTML 特殊字符 换行符 5 设置段落格式和文档结构 4 使用水平线 在页面上 可以使用一条或多条水平线以可视方式分隔文本和对象 创建水平线 在 文档 窗口中 将插入点放在要插入水平线的位置 执行下列操作之一 选择菜单 插入 HTML 水平线 在 插入 栏的 HTML 类别中单击 水平线 按钮 修改水平线 在 文档 窗口中 选中水平线 利用属性检查器进行相关属性的设置 5 创建项目列表 项目列表与WORD中的项目符号和编号类似 可增加文档的层次 以帮助阅读 创建项目列表的方法 在 文档 窗口中 将插入点放在要添加列表的位置 执行下列操作之一 单击属性面板中的 项目列表 或 编号列表 按钮 选择 文本 列表 然后选择所需的列表类型 6 3 4图像和多媒体 1 插入图像将图像插入DreamWeaver文档时 DreamWeaver自动在HTML源代码中生成对该图像文件的引用 插入图像有下列4种方法 在 插入 栏的 常用 类别中 单击 图像 图标 在 插入 栏的 常用 类别中 将 图像 图标拖入 文档 窗口中 选择菜单 插入 图像 将图像从 站点 资源 面板拖到 文档 窗口中的所需位置 选择菜单 插入 图像对象 鼠标经过对象 图片的环绕 图片的环绕可通过添加代码实现图像映射 图像地图图像映射 将一幅图像分成若干区域 并且每个区域都有自己的链接 单击某个区域时指向不同的页面 方法 选中图像 使用属性检查器中的热点工具 2 为页面添加声音 向Web页添加的声音可以有多种不同类型的声音文件和格式 例如 wav midi和 mp3 向页面添加声音有两种方法 链接到音频文件和嵌入声音文件 链接到音频文件 步骤 选择你要用作指向音频文件的链接的文本或图像 在 属性面板 中 单击 链接 处的文件夹图标以浏览到音频文件 或者在 链接 文本框中键入文件的路径和名称即可 2 为页面添加声音 嵌入声音文件嵌入音频将声音直接并入页面中 但只有在访问站点的访问者具有所选声音文件的适当插件后 声音才可以播放 在 设计 视图中 将插入点放置在你要嵌入文件的地方 然后执行以下操作之一 在 插入 栏的 常用 类别中 单击 媒体 按钮 然后选择 插件 图标 选择菜单 插入 媒体 插件 3 添加视频 若要在页面中包含一个可供用户下载的简短的视频剪辑 操作如下 将剪辑放入站点文件夹 这些剪辑通常采用AVI或MPEG文件格式 其操作方法与添加声音文件类似 4 插入Flash对象 1 插入Flash文本对象首先将插入点放置在你要插入Flash文本的地方 在 插入 栏的 常用 类别中 选择 媒体 然后单击 Flash文本 图标 或选择菜单 插入 媒体 Flash文本 在弹出的 插入Flash文本 对话框进行相关设置 单击 应用 或 确定 2 插入Flash按钮对象Flash按钮对象是基于Flash模板的可更新按钮 可以自定义Flash按钮对象 并添加文本 背景颜色以及指向其它文件的链接 其插入方法与插入Flash文本相同 3 插入Flash内容 将Flash的内容插入到页面中 可使用下列方法之一 在 插入 栏的 常用 类别中 选择 媒体 然后单击 插入Flash 图标 选择菜单 插入 媒体 Flash 插入Flash内容后 在 文档 窗口中会出现Flash占位符 可以在属性面板中查看Flash影片属性的信息或预览Flash影片 按Ctrl Alt Shift P 可以预览某一页面中的所有Flash内容 6 3 5链接与导航 1 建立超链接的应用文本 图像的超链接选中链接源 文本或图像 在属性面板中使用 链接 文本框右侧的文件夹图标 插入图像地图通过在图像上创建一个或多个热点 使图像具有地图的功能 电子邮件超链接选择链接源 选择 插入 电子邮件链接 键入 mailto 邮件地址 2 插入跳转菜单 跳转菜单可建立URL与弹出菜单列表中的选项之间的关联 可按如下方法建立 将插入点放在 文档 窗口中 选择菜单 插入 表单 跳转菜单 出现 插入跳转菜单 对话框 在 插入跳转菜单 对话框中输入各菜单项 并建立菜单项的链接 单击 确定 3 使用导航条 3 使用导航条 3 使用导航条 导航条的作用是实现网页的导航 在一个网站中设置相同的导航条 可以为用户浏览网页提供方便 两种方法插入导航条 菜单 插入 图像对象 导航条 按钮 插入 栏的 常用 类别中 单击 图像 菜单并选择 插入导航条 按钮 注意 插入导航条时 须命名导航条项目 并选择要用于它们的图像 修改导航条 选择导航条 选择 修改 导航条 可以对导航条进行修改 图层 Layer 是一种HTML页面元素 可以将其定位在页面的任意位置 图层可以包含文本 图像或其它HTML文档 一个页面可以拥有多个图层 且各个图层可以重叠 可以控制每个图层的可见性以及层与层的关系 图层属于动态HTML范畴 只有IE4 0以上版本支持图层 6 3 6图层 1 图层的创建创建图层选择 插入 布局对象 层 命令 单击布局对象面板上的 描绘层 按钮 修改图层属性打开属性检查器 选中要修改的图层 单击属性检查器右下角的扩展箭头 显示图层的所有属性 然后进行相应的修改 2 图层的主要操作 激活图层以便于在图层中插入内容 选择图层以便于对图层进行移动 调整大小等操作 调整大小拖动图层边界的控点或修改图层的高度和宽度属性 对齐图层在图层中插入内容如插入图片 文本等 6 3 7表格的应用 表格 Table 是网页制作中安排布局最好的工具 因为表格不但可以很好的安排文本或图像的显示位置 而且还可以任意的进行背景和前景颜色的设置 用笔勾画网页的轮廓草图及布局安排 上图北京希望电子出版社BHP网站网页设计草图之一 利用表格进行版面布局示例 在单元格内就可以插图 做背景 写文字等 1 插入表格 选择菜单 插入 表格 或在 插入 栏的 常用 类别中 单击 表格 按钮 2 表格的调整调整表格的大小 添加行或列 两种方法 修改 表格 插入行 插入列 插入行或列 插入 表格对象 删除行或列 两种方法 修改 表格 删除行 删除列 编辑 清除 Delete键 3 添加及删除行和列 使用属性面板中的按钮使用拆分 合并单元格命令 修改 表格 合并单元格 拆分单元格 增加 减少单元格所跨的行或列的数目拆分 修改 表格 增加行宽 增加列宽 合并 修改 表格 减少行宽 减少列宽 4 拆分及合并单元格 框架 可以将浏览器显示空间分割成几个部分 每个部分可以单独显示不同的网页 框架集 是一个HTML文件 它定义一组框架的布局和属性 包括框架的数目 框架的大小和位置以及在每个框架中初始显示的页面的URL 框架集文件只是向浏览器提供如何显示一组框架以及在这些框架中应显示哪些文档的有关信息 并不包含在浏览器中显示的内容 6 3 8框架 示例1 网页设计大赛的页面示例2 网络技术学习平台的页面 目录 主内容 LOGO和分栏 详细内容 创建框架集有两种方法 使用预定义的框架集和自己设计框架集 1 使用预定义的框架集 两种方法 创建新的空预定义框架集选择 文件 新建 常规 框架集 创建预定义的框架集并在某一框架中显示当前文档首先 将插入点放置在当前文档中 然后从菜单 插入 HTML 框架 子菜单中选择预