网络编辑实用教程 (助理网络编辑师) 第六章Dreamweaver.网页g计 制作人：范晓静
网络编辑实用教程 （助理网络编辑师） 第六章 Dreamweaver网页设计 制作人：范晓静
6.1 Dreamweaver8基本知识 6.1.1 Dreamweaver8的启动和退出 1.启动Dreamweaver8 常用的启动Dreamweaver8的方法有以下两种： ①单击Windows“开始”菜单，选择“程序”子菜单中的“Macromedia” 项，选择其中的“Macromedia Dreamweaver8”命令； ②双击Windows桌面上的Dreamweaver8快捷图标。 助理网络编辑师
助理网络编辑师 2 6.1 Dreamweaver 8基本知识 6.1.1 Dreamweaver 8的启动和退出 1．启动Dreamweaver 8 常用的启动Dreamweaver 8的方法有以下两种： ① 单击Windows“开始”菜单，选择“程序”子菜单中的“Macromedia” 项，选择其中的“Macromedia Dreamweaver 8”命令； ② 双击Windows桌面上的Dreamweaver 8快捷图标
首次启动Dreamweaver8, 会出现一个“工作区设置”对话框， 用户可以选择一种工作区布局，如 右图所示。 工作区设香 如果是初学者，基本上不用代 悠首选的工作区有愿。g可在后“密口)工作区局”未更改者 码编写，可以选择“设计器”单选按 钮。如果用户主要是编写网页中的 代码（如HTML、CSS、ASP JSP、PHP等)，最好选择“编码 定 器”单选按钮。用户也可以在以后 选择“窗口”菜单中的“工作区布局” 来更改布局。 助理网络编辑师
助理网络编辑师 3 首次启动Dreamweaver 8， 会出现一个“工作区设置”对话框， 用户可以选择一种工作区布局，如 右图所示。 如果是初学者，基本上不用代 码编写，可以选择“设计器”单选按 钮。如果用户主要是编写网页中的 代码（如HTML、CSS、ASP、 JSP、PHP等），最好选择“编码 器” 单选按钮。用户也可以在以后 选择“窗口”菜单中的“工作区布局” 来更改布局
2.退出 退出Dreamweaver8的方法如下： ①单击“文件”菜单中的“退出”命令； ②按键盘上的AIt+F4组合键； ③单击标题栏最右边的“关闭”按钮。 6.1.2 Dreamweaver8的工作界面 1.开始界面 启动Dreamweaver8后，首先出现的是开始界面，如下页图所示。 助理网络编辑师
助理网络编辑师 4 2．退出 退出Dreamweaver 8的方法如下： ① 单击“文件”菜单中的“退出”命令； ② 按键盘上的Alt+F4组合键； ③ 单击标题栏最右边的“关闭”按钮。 6.1.2 Dreamweaver 8的工作界面 1．开始界面 启动Dreamweaver 8后，首先出现的是开始界面，如下页图所示
开始界面包括五个部分的内容。 “打开最近项目”选项组中列出了最近 编辑过的文件，最新的文件放在最上 DREAMWEAVER 8 端，用户可以直接单击打开相应的文 件。“创建新项目”选项组列出了 Dreamweaver8可以创建的当前流 行的各种网页程序。“从范例创建”选 ASP NET CE 己页正计《有辅助能的 项组中列出了创建文档的常用模板类 别。“扩展”选项组用来连接到 Macromedia Dreamweaver Exchangel网站，用户可以从该网站 司 下载Dreamweaver插件。“帮助”选 项组可以快速访问能够帮助用户学习 不两此沿 Dreamweaver的资源。 助理网络编辑师
助理网络编辑师 5 开始界面包括五个部分的内容。 “打开最近项目”选项组中列出了最近 编辑过的文件，最新的文件放在最上 端，用户可以直接单击打开相应的文 件。“创建新项目”选项组列出了 Dreamweaver 8可以创建的当前流 行的各种网页程序。“从范例创建”选 项组中列出了创建文档的常用模板类 别。“扩展”选项组用来连接到 Macromedia Dreamweaver Exchange网站，用户可以从该网站 下载Dreamweaver插件。“帮助”选 项组可以快速访问能够帮助用户学习 Dreamweaver的资源
2.工作界面 通过开始界面新建或打开一个网页文件后就会打开Dreamweaver8 的网页编辑窗口，也就是工作界面，如下图所示。 菜单栏 “插入工具栏 “文档工具栏 浮动面板组 项目选择标签 件生 文档窗口 标尺 标签透择器 属性检查器 状态栏 助理网络编辑师
助理网络编辑师 6 2．工作界面 通过开始界面新建或打开一个网页文件后就会打开Dreamweaver 8 的网页编辑窗口，也就是工作界面，如下图所示。 菜单栏 “插入”工具栏 项目选择标签 “文档”工具栏 浮动面板组 “属性”检查器 标签选择器 “文档”窗口 标尺 扩展按钮 状态栏
(1)菜单栏 Dreamweaver8的菜单栏包括有文件、编辑、查看、插入、修改、 文本、命令、站点、窗口和帮助10个菜单项。用户可以根据需要选择相 应的菜单命令。 (2)“插入”工具栏 网页中的文字、图片、表格、导航条等都被称为网页元素。“插入” 工具栏的主要功能就是在网页中插入各种类型的网页元素。单击“插入” 工具栏左侧的三角形扩展按钮，在弹出的下拉菜单中可以选择网页元素 的类型。如下图所示。 常用 回&图园回·，菌四卧·月 文本 显示为制表符里网络编辑师
助理网络编辑师 7 （1）菜单栏 Dreamweaver 8的菜单栏包括有文件、编辑、查看、插入、修改、 文本、命令、站点、窗口和帮助10个菜单项。用户可以根据需要选择相 应的菜单命令。 （2）“插入”工具栏 网页中的文字、图片、表格、导航条等都被称为网页元素。“插入” 工具栏的主要功能就是在网页中插入各种类型的网页元素。单击“插入” 工具栏左侧的三角形扩展按钮，在弹出的下拉菜单中可以选择网页元素 的类型。如下图所示
(3)“文档工具栏 “文档”工具栏主要用于切换编辑区域视图模式、设置网页标题、进 行标签验证及在浏览器中浏览网页等。 (4)浮动面板组 浮动面板组是文档窗口右侧的浮动面板的组合，主要包括应用程序 CSS、标签检查器和文件等面板。 (5)项目选择标签 当同时打开多个网页文件时，Dreamweaver8将为每个文件显示 个标签。用户可以点击相应的标签来进行网页间的切换。匆下图所示。 thutuled 1 Unduled-2 助理网络编辑师
助理网络编辑师 8 （3）“文档”工具栏 “文档”工具栏主要用于切换编辑区域视图模式、设置网页标题、进 行标签验证及在浏览器中浏览网页等。 （4）浮动面板组 浮动面板组是文档窗口右侧的浮动面板的组合，主要包括应用程序、 CSS、标签检查器和文件等面板。 （5）项目选择标签 当同时打开多个网页文件时，Dreamweaver 8将为每个文件显示一 个标签。用户可以点击相应的标签来进行网页间的切换。如下图所示
(6)“文档”窗口 “文档”窗口用于显示当前编辑文档。 (7)标尺 标尺又分水平标尺和垂直标尺，主要用于定位网页元素的坐标位置。 (8)标签选择器 标签选择器用于显示网页中用到TML标签，运用它可以方便的选择 网页中的元素。 (9)扩展按钮 扩展按钮又分为水平扩展按钮和垂直扩展按钮，用于显示或隐藏编辑 窗口右侧的浮动面板及下方的属性面板。 (10)状态栏 状态栏中包括标签选择器、选取工具、手形工具 缩放①具、设置缩 放比率下拉列表框、窗口大小栏和文件大小栏等项目。 (11)“属性”检查器 “属性”检查器用于查看和设置当前选择对象的各种属性。根据选择对 象的不同，“属性”检查器中的内容也不同。 助理网络编辑师
助理网络编辑师 9 （6）“文档”窗口 “文档”窗口用于显示当前编辑文档。 （7）标尺 标尺又分水平标尺和垂直标尺，主要用于定位网页元素的坐标位置。 （8）标签选择器 标签选择器用于显示网页中用到HTML标签，运用它可以方便的选择 网页中的元素。 （9）扩展按钮 扩展按钮又分为水平扩展按钮和垂直扩展按钮，用于显示或隐藏编辑 窗口右侧的浮动面板及下方的属性面板。 （10）状态栏 状态栏中包括标签选择器、选取工具、手形工具、缩放工具、设置缩 放比率下拉列表框、窗口大小栏和文件大小栏等项目。 （11）“属性”检查器 “属性”检查器用于查看和设置当前选择对象的各种属性。根据选择对 象的不同，“属性”检查器中的内容也不同
6.2站点管理 Dreamweaver站点提供一种组织所有与Web站点关联的文 档的方法。通过在站点中组织文件，可以利用Dreamweaver将 站点上传到Web服务器、自动跟踪和维护链接、管理文件以及共 享文件等。Dreamweaver8提供了本地、远程和测试3种类型的站 点。这里我们仅介绍本地站点。 助理网络编辑师 10
助理网络编辑师 10 6.2 站点管理 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文 档的方法。通过在站点中组织文件，可以利用 Dreamweaver 将 站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共 享文件等。Dreamweaver 8提供了本地、远程和测试3种类型的站 点。这里我们仅介绍本地站点