第3章网页设计工具Dreamweaver

1、第第3章章 网页设计工具网页设计工具Dreamweaver 3.1 Macromedia Dreamweaver 4的工作环境的工作环境 3.2 文档的基本操作文档的基本操作 3.1 Macromedia Dreamweaver 4的工作环境的工作环境 n3.1.1 启动启动Dreamweaver 4 n3.1.2 认识认识Dreamweaver 4的窗口结构的窗口结构 n3.1.3 控制浮动面板控制浮动面板 返回首页返回首页 3.1.1 启动启动Dreamweaver 4 n启动启动Dreamweaver 4有两种常用方法：有两种常用方法： （1）打开）打开“开始开始”菜单，选择菜单，选择“

2、程序程序”，选择，选择 “Macromedia Dreamweaver 4”，再选择再选择 “Dreamweaver 4”命令即可启动命令即可启动Dreamweaver 4。 （2）在）在Windows的窗口或资源管理器中直接启动的窗口或资源管理器中直接启动 Dreamweaver 4并载入要编辑的并载入要编辑的HTML文档，首先文档，首先 选中要编辑的选中要编辑的HTML文件图标，单击鼠标右键，文件图标，单击鼠标右键， 选择选择“Edit with Dreamweaver”命令，即可启动命令，即可启动 Dreamweaver 4，并载入要编辑的并载入要编辑的HTML文档。启文档。启 动后如图

3、动后如图3-1所示。所示。 图3-1 Dreamweaver 4的窗口结构 返回本节返回本节 3.1.2 认识认识Dreamweaver 4的窗口结构的窗口结构 nDreamweaver应用程序操作环境包括：应用程序操作环境包括： 1工具条工具条 2文档窗口文档窗口 3启动栏启动栏 4对象面板对象面板 5属性面板属性面板 6可停靠浮动面板可停靠浮动面板 7标题栏标题栏 8菜单栏菜单栏 9状态行状态行 返回本节返回本节 3.1.3 控制浮动面板控制浮动面板 1使用启动面板使用启动面板 n单击启动面板上的单击启动面板上的“CSS Styles”（CSS样式）按钮，样式）按钮， 即会将可停靠浮动面板

4、上的即会将可停靠浮动面板上的CSS Styles选项卡激活到选项卡激活到 顶端。顶端。 图3-2 启动面板和微型启动栏的对应关系 图3-3 使用启动面板 2使用对象面板使用对象面板 图3-4 在对象面板上选择对象类型 3使用属性面板使用属性面板 图3-5 选中文本时的属性面板 图3-6 选中图像时的属性面板 4浮动面板的移动和重设大小浮动面板的移动和重设大小 n通过拖动浮动面板的标题栏，就可以将浮动面板通过拖动浮动面板的标题栏，就可以将浮动面板 在桌面上移动，浮动面板的位置并不局限于在桌面上移动，浮动面板的位置并不局限于 Dreamweaver的文档窗口内，实际上，它可以移动的文档窗口内，实际

5、上，它可以移动 到到Windows桌面上的任何位置。桌面上的任何位置。 n除了启动面板和属性面板，其他大多数的浮动面除了启动面板和属性面板，其他大多数的浮动面 板，包括对象面板和可停靠浮动面板，其大小都板，包括对象面板和可停靠浮动面板，其大小都 可以任意调整，通过拖动浮动面板的边框，就可可以任意调整，通过拖动浮动面板的边框，就可 以改变其大小。以改变其大小。 5停靠浮动面板停靠浮动面板 图3-7 带有多个选项卡的可停靠 浮动面板 图3-8 Dreamweaver 4的窗口菜单 6状态行状态行 标记检查器 窗口大小弹出菜单 文档大小和下载速度 图3-9 状态行 n在在Dreamweaver 4文

6、档窗口的状态行上一些功能设文档窗口的状态行上一些功能设 置（如图置（如图3-103-14所示）：所示）： 标记选择器标记选择器 窗口大小弹出菜单窗口大小弹出菜单 窗口大小弹出菜单窗口大小弹出菜单 文档大小和下载速度文档大小和下载速度 微型启动栏微型启动栏 设置状态条属性设置状态条属性 标尺和网格标尺和网格 设置中文环境设置中文环境 查找帮助信息查找帮助信息 图3-10 窗口大小弹出菜单 图3-11 参数选择对话框 图3-12 设置字体和编码方式 图3-13 Dreamweaver 4的“帮助”菜单 图3-14 Dreamweaver 4的帮助系统 返回本节返回本节 3.2 文档的基本操作文档的

7、基本操作 n3.2.1 文档的创建和存储文档的创建和存储 n3.2.2 理解空白文档的初始代码理解空白文档的初始代码 n3.2.3 添加文本和插入对象添加文本和插入对象 n3.2.4 使用历史面板使用历史面板 n3.2.5 编辑网页的头部内容编辑网页的头部内容 返回首页返回首页 3.2.1 文档的创建和存储文档的创建和存储 1创建空白文档创建空白文档 n打开打开“文件文件”菜单，选择菜单，选择“新建新建”命令。命令。 2打开现有文档打开现有文档 n在在Windows的资源管理器打开文档的图标，选择的资源管理器打开文档的图标，选择“ 用用Dreamweaver编辑编辑”命令；在命令；在Dream

8、weaver已经已经 启动的情况下，打开启动的情况下，打开“文件文件”菜单，选择菜单，选择“打开打开 ”命令；打开命令；打开“文件文件”菜单，选择菜单，选择“导入导入”，再，再 选择选择“导入导入 Word HTML”命令来打开该文档。命令来打开该文档。 3基于模板创建文档基于模板创建文档 n选择需要使用的模板，单击选择需要使用的模板，单击“选择选择”按钮，即可按钮，即可 基于模板创建新文档。基于模板创建新文档。 4存储文档存储文档 n保存文档的方法与一般保存文档的方法与一般Windows应用程序差别不大应用程序差别不大 ，这里无需多言。，这里无需多言。 5关闭文档关闭文档 n打开打开“文件文

9、件”菜单，选择菜单，选择“关闭关闭”命令。命令。 返回本节返回本节 3.2.2 理解空白文档的初始代码理解空白文档的初始代码 1和和：是是HTML文档的开始和结束文档的开始和结束 标记，标记，HTML文档中所有的内容都应该在这两个文档中所有的内容都应该在这两个 标记之间，一个标记之间，一个HTML文档总是以文档总是以开始，开始， 以以结束的。结束的。 2和和：位于文档的头部，用于包含位于文档的头部，用于包含 当前文档的有关信息。当前文档的有关信息。 3和和 ：位于位于HTML文档的头部，也即文档的头部，也即 位于位于和和标记之间。标记之间。 4和和：用于定义用于定义HTML文档的正文文档的正文

10、 部分，通常它在部分，通常它在标记之后，而在标记之后，而在标标 记之前。记之前。 返回本节返回本节 3.2.3 添加文本和插入对象添加文本和插入对象 1添加文本添加文本 n可以直接在文档窗口中键入文本。可以直接在文档窗口中键入文本。 2插入对象插入对象 n打开打开“插入插入”菜单，选择要插入对象的菜菜单，选择要插入对象的菜 单项命令或显示对象面板，找到要插入对单项命令或显示对象面板，找到要插入对 象对应的按钮。单击（拖动按钮）即可在象对应的按钮。单击（拖动按钮）即可在 插入点所在位置插入对象。插入点所在位置插入对象。 3插入日期插入日期 图3-15 插入日期对话框 4插入特殊字符插入特殊字符

11、表2-1 常见的字符及其参考 换行符号 不换行空格 版权符 已注册商标符 商标符 英镑符 日元符 欧元符 左引号 右引号 破折线 其他 图3-16 对象面板上的特殊字符按钮 5插入水平线插入水平线 n插入和编辑水平线插入和编辑水平线 n理解水平线标记理解水平线标记 图3-17 水平线的属性面板 6在文档窗口中选择元素在文档窗口中选择元素 n不可见元素不可见元素 n定制不可见元素的显示定制不可见元素的显示 n显示不可见元素显示不可见元素 n 显示头部元素显示头部元素 图3-18 设置不可见元素的显示方式 7设置文档的页面属性设置文档的页面属性 n打开打开“修改修改”菜单，选择菜单，选择“页面属性

12、页面属性” 图3-19 页面属性对话框 返回本节返回本节 3.2.4 使用历史面板使用历史面板 参数设置 滑块 复制步骤 重放 存储为命令 图3-20 历史面板 返回本节返回本节 3.2.5 编辑网页的头部内容编辑网页的头部内容 1插入头部内容插入头部内容 元数据 关键字 描述 刷新时间 基址 链接 图3-21 对象面板上的头部元素按钮 2认识头部元素认识头部元素 n元数据（元数据（meta data）：）：是是HTML头部的主要组成头部的主要组成 部分，主要用于表示一个文档的页面信息，这些部分，主要用于表示一个文档的页面信息，这些 信息可以被计算机识别，用于某些特定的场合。信息可以被计算机识

13、别，用于某些特定的场合。 n 标记：是实现元数据的主要标记。标记：是实现元数据的主要标记。 n标记：定义了文档的基础标记：定义了文档的基础URL地址，参见地址，参见 表表2-2。 n标记：定义了文档之间的包含。在标记：定义了文档之间的包含。在HTML的的 头部可以包含任意数量的头部可以包含任意数量的标记。标记。 表2-2 target的属性值 3插入元数据插入元数据 图3-22 插入元数据 4插入关键字插入关键字 图3-23 插入关键字 5插入描述信息插入描述信息 n单击对象面板上的单击对象面板上的“插入描述插入描述”按钮。这按钮。这 时会出现一个对话框，提示输入描述信息时会出现一个对话框，提示输入描述信息 ，该对话框同图，