Dreamweaver教程

2003.苏玉雄苏玉雄 1-1DreamweaverDreamweaver基础知识基础知识基础知识基础知识2003.苏玉雄苏玉雄 1-2 1 Dreamweaver 8概述概述本章学习目标本章学习目标Dreamweaver8Dreamweaver8的安装与启动的安装与启动1.11.1DreamweaverDreamweaver 的工作界面的工作界面1.21.2Dreamweaver8Dreamweaver8的新增功能的新增功能1.31.3使用使用Dreamweaver8Dreamweaver8的帮助的帮助1.51.5Dreamweaver8Dreamweaver8的快捷键的快捷键1.41.41.2 Dreamweaver 1.2 Dreamweaver 的工作界面的工作界面的工作界面的工作界面 Dreamweaver 8的工作界面主要包括有标题栏、菜单栏、文档工具栏、文档窗口、状态栏、插入面版、属性面版和CSS样式面版。本节将主要介绍Dreamweaver 8的工作界面。首先启动Dreamweaver 8，将显示如图1-7所示的界面。1.2.1 1.2.1 标题栏标题栏标题栏标题栏在大多数的在大多数的Windows应用程序里面都有，应用程序里面都有，Dreamweaver 8的标题栏在应用程序的最上面，它的左侧用来显示当前的标题栏在应用程序的最上面，它的左侧用来显示当前正在运行的应用程序名称，它的右侧为最小化、最大化正在运行的应用程序名称，它的右侧为最小化、最大化（还原）和关闭按钮，如所示。（还原）和关闭按钮，如所示。需要说明的是，图需要说明的是，图1-8所示的标题是默认的文档标题所示的标题是默认的文档标题Untitled Document，显示的文件名为，显示的文件名为Untitled-1。每当。每当用户创建一个新的文档时，用户创建一个新的文档时，Dreamweaver 8就会自动以就会自动以Untitled给出一个默认的名字。当用户保存文件时，系统给出一个默认的名字。当用户保存文件时，系统会提示用户另外命名一个名字，当然用户也可以以默认的会提示用户另外命名一个名字，当然用户也可以以默认的名字来保存名字来保存。1.2.2 1.2.2 菜单栏菜单栏菜单栏菜单栏标题栏的下面是菜单栏，包括有标题栏的下面是菜单栏，包括有“文件文件”、“编辑编辑”、“查看查看”、“插入插入”、“修改修改”、“文本文本”、“命令命令”、“站点站点”、“窗口窗口”、“帮助帮助”10个菜单项，如图个菜单项，如图1-9所示。在所示。在Dreamweaver 8中，单击中，单击菜单栏中的菜单项，将弹出对应的下拉菜单。下拉菜单包含了菜单栏中的菜单项，将弹出对应的下拉菜单。下拉菜单包含了Dreamweaver 8的主要功能，通过鼠标选择菜单中的某个选项，的主要功能，通过鼠标选择菜单中的某个选项，Dreamweaver 8就执行相应的命令。就执行相应的命令。Dreamweaver 8菜单选项有以菜单选项有以下下3种形式：种形式：（1）子菜单命令：该类命令的名称后面带有一个向右的小三角箭）子菜单命令：该类命令的名称后面带有一个向右的小三角箭头，当鼠标移动到该类命令上时，就会打开一个子菜单。例如在头，当鼠标移动到该类命令上时，就会打开一个子菜单。例如在“插入插入”菜单下的菜单下的“媒体媒体”菜单命令，如图菜单命令，如图1-10。（2）开关命令：该命令在命令执行后，命令的左边会加上）开关命令：该命令在命令执行后，命令的左边会加上“”的选择标记。例如在的选择标记。例如在“查看查看”菜单下的菜单下的“设计设计”菜单命令，如图菜单命令，如图1-11。（。（3）对话框命令：该类命令的名称后面带有一个省略号，单击）对话框命令：该类命令的名称后面带有一个省略号，单击该类命令则会打开一个对话框。例如在该类命令则会打开一个对话框。例如在“插入插入”菜单下的菜单下的“表格表格”菜单命令，则会弹出如图菜单命令，则会弹出如图1-12的对话框。的对话框。1.2.31.2.3文档工具栏文档工具栏文档工具栏文档工具栏 “文档文档”工具栏中包含按钮，这些按钮使您可以在文工具栏中包含按钮，这些按钮使您可以在文档的不同视图间快速切换：档的不同视图间快速切换：“代码代码”视图、视图、“设计设计”视图、视图、同时显示同时显示“代码代码”和和“设计设计”视图的拆分视图。工具栏中视图的拆分视图。工具栏中还包含一些与查看文档、在本地和远程站点间传输文档有还包含一些与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。关的常用命令和选项。“文档文档”工具栏的位置如图工具栏的位置如图1-13所所示。示。1.2.4 1.2.4 文档窗口文档窗口文档窗口文档窗口文档窗口显示当前文档。可以选择下列任一视图：文档窗口显示当前文档。可以选择下列任一视图：（1）设计视图：是一个用于可视化页面布局、可视化编辑和快速应）设计视图：是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，用程序开发的设计环境。在该视图中，Dreamweaver 显示文档的完显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内全可编辑的可视化表示形式，类似于在浏览器中查看页面时看到的内容。容。（2）代码视图：是一个用于编写和编辑）代码视图：是一个用于编写和编辑 HTML、JavaScript、服务、服务器语言代码（如器语言代码（如PHP或或ColdFusion标记语言）以及任何其它类型代标记语言）以及任何其它类型代码的手工编码环境。码的手工编码环境。（3）代码和设计视图：可以在单个窗口中同时看到同一文档的代码）代码和设计视图：可以在单个窗口中同时看到同一文档的代码视图和设计视图。视图和设计视图。当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示当文档窗口有一个标题栏时，标题栏显示页面标题，并在括号中显示文件的路径和文件名。如果您做了更改但尚未保存，文件的路径和文件名。如果您做了更改但尚未保存，Dreamweaver 将在文件名后显示一个星号。将在文件名后显示一个星号。1.2.5 1.2.5 状态栏状态栏状态栏状态栏文档窗口底部的状态栏显示的是正创建的文档有关的信息，如图文档窗口底部的状态栏显示的是正创建的文档有关的信息，如图1-14所示。所示。（1）标签选择器：标签选择器显示环绕当前选定内容的标签的层次标签选择器：标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击击可以选择文档的整个正文。若要设置标签选择器中某个标可以选择文档的整个正文。若要设置标签选择器中某个标签的签的class或或 id 属性，请右键单击属性，请右键单击(Windows)或按住或按住Control键并单键并单击击(Macintosh)该标签，然后从上下文菜单中选择一个类或该标签，然后从上下文菜单中选择一个类或ID。标签。标签选择器是选择标签的首选方法，因为它可以确保您始终准确地选择标选择器是选择标签的首选方法，因为它可以确保您始终准确地选择标签。签。（2）手形工具：可以用来单击文档并将其拖入手形工具：可以用来单击文档并将其拖入“文档文档”窗口。窗口。（3）“缩放缩放”工具和工具和“设置缩放比率设置缩放比率”：“缩放缩放”工具和工具和“设置缩设置缩放比率放比率”弹出式菜单可以让您为文档设置缩放比率。弹出式菜单可以让您为文档设置缩放比率。（4）“窗口大小窗口大小”弹出式菜单：该菜单仅在弹出式菜单：该菜单仅在“设计设计”视图中可见。视图中可见。用来将用来将“文档文档”窗口的大小调整到预定义或自定义的尺寸。窗口的大小调整到预定义或自定义的尺寸。“窗口大窗口大小小”弹出式菜单的右侧是页面的文档大小和估计下载时间。弹出式菜单的右侧是页面的文档大小和估计下载时间。1.2.6 1.2.6 插入面版插入面版插入面版插入面版插入面版包含用于创建和插入对象（如表格、层和图像）插入面版包含用于创建和插入对象（如表格、层和图像）的按钮，如图的按钮，如图1-15所示。当鼠标指针滚动到一个按钮上时，所示。当鼠标指针滚动到一个按钮上时，会出现一个工具提示，其中含有该按钮的名称。这些按钮会出现一个工具提示，其中含有该按钮的名称。这些按钮被组织到几个类别中，您可以在被组织到几个类别中，您可以在“插入插入”栏的左侧切换它栏的左侧切换它们。当前文档包含服务器代码时，还会显示其它类别。当们。当前文档包含服务器代码时，还会显示其它类别。当您启动您启动Dreamweaver时，系统会打开您上次使用的类别。时，系统会打开您上次使用的类别。1.2.7 1.2.7 属性面版属性面版属性面版属性面版属性面版可以检查和编辑当前选定页面元素（如文本和插入的对象）属性面版可以检查和编辑当前选定页面元素（如文本和插入的对象）的最常用属性。属性面版中的内容根据选定的元素会有所不同。例如，的最常用属性。属性面版中的内容根据选定的元素会有所不同。例如，如果您选择页面上的一个图像，则属性面版将改为显示该图像的属性如果您选择页面上的一个图像，则属性面版将改为显示该图像的属性如图像的文件路径、图像的宽度和高度、图像周围的边框等，如图如图像的文件路径、图像的宽度和高度、图像周围的边框等，如图1-23所示。所示。1.2.8 CSS1.2.8 CSS样式面版样式面版样式面版样式面版使用使用CSS 样式面板可以样式面板可以跟踪影响当前所选页面跟踪影响当前所选页面元素的元素的 CSS 规则和属性，规则和属性，如图如图1-24所示。使用所示。使用CSS 样式面板顶部的切样式面板顶部的切换按钮可以在两种模式换按钮可以在两种模式之间切换。使用之间切换。使用CSS 样样式面板还可以在式面板还可以在“所有所有”和和“当前当前”模式下修模式下修改改 CSS 属性。属性。2 Dreamweaver 8站点的管理站点的管理本章学习目标本章学习目标 DreamweaverDreamweaver 8 8的站点设置的站点设置2.12.1 使用使用DreamweaverDreamweaver 8 8编辑站点编辑站点2.22.2DreamweaverDreamweaver 8 8的站点地图的站点地图2.32.3发布站点发布站点2.42.42.1 Dreamweaver 8的站点设置的站点设置 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的方法。通过在站点中组织文件，可以利用 Dreamweaver 将站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。若要充分利用 Dreamweaver 的功能，需要定义一个站点。2.1.1 认识认识Dreamweaver 8的站点的站点 Dreamweaver 站点由三部分组成，具体取决于开发环境和所开发的 Web 站点类型：（1）本地文件夹：是您的工作目录。Dreamweaver 将该文件夹称为“本地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。这就是为 Dreamweaver 站点所处理的文件的存储位置。（2）远端文件夹：是存储文件的位置，这些文件用于测试、生产、协作等，具体取决于开发环境。Dreamweaver 在“文件”面板中将该文件夹称为“远端站点”。一般说来，远端文件夹位于运行 Web 服务器的计算机上。（3）测试服务器文件夹：是 Dreamweaver 处理动态页的文件夹。2.1.2 定义新的站点定义新的站点定义一个新的站点步骤如下：定义一个新的站点步骤如下：（1）在）在C盘新建一个文件夹。打开盘新建一个文件夹。打开“我的电脑我的电脑”，打开，打开C盘，点鼠标右键，选择盘，点鼠标右键，选择“新建新建”，选择，选择“文件夹文件夹”选项，选项，如图如图2-1所示。所示。此时，此时，C盘下会出现一个新建文件夹图标，如图盘下会出现一个新建文件夹图标，如图2-2所示。所示。2.1.2 定义新的站点定义新的站点（2）现在开始在）现在开始在Dreamweaver 8中把中把web这个文件夹定这个文件夹定义为站点。打开义为站点。打开Dreamweaver 8，在菜单栏上，点击站，在菜单栏上，点击站点菜单，选择新建站点，如图点菜单，选择新建站点，如图2-4所示。所示。（3）接下来需要给站点起一个名字，可以起任意一个名）接下来需要给站点起一个名字，可以起任意一个名字，如图字，如图2-5所示，这里输入所示，这里输入“个人主页个人主页”。2.1.2 定义新的站点定义新的站点（4）按下一步按钮，选择）按下一步按钮，选择“是否使用服务器技术是否使用服务器技术”。因。因为实例建立的是一个静态站点，就选择为实例建立的是一个静态站点，就选择“否，我不想使用否，我不想使用服务器技术服务器技术”，如图，如图2-6所示。所示。（5）按下一步按钮，因为要传到网上的虚拟主页空间，）按下一步按钮，因为要传到网上的虚拟主页空间，就要选择就要选择“编辑我的计算机上的本地副本，完成后再传到编辑我的计算机上的本地副本，完成后再传到服务器上服务器上”，如图，如图2-7所示。所示。2.1.2 定义新的站点定义新的站点（6）按下一步，选择要定义的本地根文件夹，如图）按下一步，选择要定义的本地根文件夹，如图2-8所所示。示。这里选择这里选择web文件夹，如图文件夹，如图2-9所示。所示。2.1.2 定义新的站点定义新的站点 点点“选择选择”按钮，然后单击按钮，然后单击“下一步下一步”按纽。因为没有使按纽。因为没有使用远程服务器，就选择用远程服务器，就选择“无无”，如图，如图2-10所示。所示。（7）然后单击）然后单击“下一步下一步”，看到如图，看到如图2-11所示的完成信所示的完成信息。息。2.1.2 定义新的站点定义新的站点（8）按完成按钮，一个站点就定义好了，如图）按完成按钮，一个站点就定义好了，如图2-12所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点 同样，我们还可以使用同样，我们还可以使用“站点定义站点定义”对话框中的对话框中的“高高级级”设置来设置设置来设置 Dreamweaver 站点。站点。“高级高级”设置使您设置使您可以根据需要分别设置本地、远端和测试文件夹。可以根据需要分别设置本地、远端和测试文件夹。1、设置本地文件夹、设置本地文件夹本地文件夹是本地文件夹是 Dreamweaver 站点的工作目录。此文件夹站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。可以位于本地计算机上，也可以位于网络服务器上。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点设置本地文件夹，可以按如下步骤：设置本地文件夹，可以按如下步骤：（1）选择）选择“站点站点”“管理站点管理站点”，将出现，将出现“管理站点管理站点”对话框如图对话框如图2-13所示。所示。（2）单击）单击“新建新建”，出现，出现“站点定义站点定义”对话框，如图对话框，如图2-14所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点（3）如果未显示）如果未显示“高级高级”设置，请单击设置，请单击“高级高级”按钮。按钮。“站点定义站点定义”对话框的对话框的“高级高级”选项卡显示选项卡显示“本地信息本地信息”类别选项，输入类别选项，输入“本地信息本地信息”选项，如图选项，如图2-15所示。所示。（4）如果已经做好了设置远端服务器的准备，请跳过剩）如果已经做好了设置远端服务器的准备，请跳过剩下的步骤；选择左侧的下的步骤；选择左侧的“远端信息远端信息”类别，然后完成该对类别，然后完成该对话框，如图话框，如图2-16所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点（4）如果已经做好了设置远端服务器的准备，请跳过剩）如果已经做好了设置远端服务器的准备，请跳过剩下的步骤；选择左侧的下的步骤；选择左侧的“远端信息远端信息”类别，然后完成该对类别，然后完成该对话框，如图话框，如图2-16所示。所示。（5）单击）单击“确定确定”，即可完成站点的设置工作。，即可完成站点的设置工作。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点2、设置远端文件夹、设置远端文件夹为为 Dreamweaver 站点设置本地文件夹后，可以设置远端站点设置本地文件夹后，可以设置远端文件夹。根据开发环境的不同，远端文件夹是您存储用于文件夹。根据开发环境的不同，远端文件夹是您存储用于进行测试、协作、生产、部署等的文件的位置。进行测试、协作、生产、部署等的文件的位置。设置远端文件夹的步骤同设置的步骤如下：设置远端文件夹的步骤同设置的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”。出现。出现“管理站点管理站点”对对话框，如图话框，如图2-17所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点（2）选择现有的）选择现有的 Dreamweaver 站点。站点。如果没有定义任如果没有定义任何何 Dreamweaver 站点，请在继续前创建一个本地文件夹。站点，请在继续前创建一个本地文件夹。（3）单击）单击“编辑编辑”。出现出现“站点定义站点定义”对话框，如图对话框，如图2-18所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点(4）如果未显示）如果未显示“高级高级”设置，请单击设置，请单击“高级高级”按钮，如按钮，如图图2-19所示。所示。（5）从左侧的）从左侧的“类别类别”列表中选择列表中选择“远程信息远程信息”，如图，如图2-20所示。所示。2.1.3 使用使用“高级设置高级设置”来设置站来设置站点点（6）选择一个）选择一个“访问访问”选项。选项。（7）单击）单击“确定确定”即可。即可。2.2 Dreamweaver 8编辑站点编辑站点 Dreamweaver 站点建立好了以后，有时我站点建立好了以后，有时我们需要对们需要对Dreamweaver 站点进行一些修改、删站点进行一些修改、删除、复制等操作，下面我们将详细介绍除、复制等操作，下面我们将详细介绍Dreamweaver 站点的修改、删除、复制等操作。站点的修改、删除、复制等操作。2.2.1打开本地站点打开本地站点 打开站点的步骤如下：打开站点的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”。出现。出现“管理站点管理站点”对对话框，如图话框，如图2-22所示。所示。（2）选择要打开的站点名称。例如选择）选择要打开的站点名称。例如选择“个人主页个人主页”站站点，然后单击点，然后单击“完成完成”按纽，将打开按纽，将打开“个人主页个人主页”站点，站点，如图如图2-23所示。所示。2.2.2修改本地站点修改本地站点修改本地站点的步骤如下：修改本地站点的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”。出现。出现“管理站点管理站点”对对话框，如图话框，如图2-24所示。所示。（2）选择要修改的站点名称。例如选择）选择要修改的站点名称。例如选择“web”站点，然站点，然后单击后单击“编辑编辑”按纽，将打开按纽，将打开“web”站点设置对话框，站点设置对话框，如图如图2-25所示。所示。（3）在图）在图2-25中修改站点中要修改的内容，然后单击中修改站点中要修改的内容，然后单击“确定确定”按纽即可完成站点的修改。按纽即可完成站点的修改。2.2.3 删除已经存在的站点删除已经存在的站点删除站点的步骤如下：删除站点的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”。出现。出现“管理站点管理站点”对对话框，如图话框，如图2-26所示。所示。（2）选择要删除的站点名称。例如选择）选择要删除的站点名称。例如选择“web”站点，然站点，然后单击后单击“删除删除”按纽，将出现如图按纽，将出现如图2-27所示的对话框。所示的对话框。选择选择“是是”按纽后，即可完成站点的删除工作，如图按纽后，即可完成站点的删除工作，如图2-28所示。所示。2.2.4 复制已经存在的站点复制已经存在的站点复制已经存在的站点的步骤如下：复制已经存在的站点的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”。出现。出现“管理站点管理站点”对对话框，如图话框，如图2-29所示。所示。（2）选择要删除的站点名称。例如选择）选择要删除的站点名称。例如选择“个人主页个人主页”站站点，然后单击点，然后单击“复制复制”按纽即可完成站点的复制，如图按纽即可完成站点的复制，如图2-30所示。所示。2.3 Dreamweaver 8的站点地图的站点地图 Dreamweaver 8站点的本地文件夹视作链接站点的本地文件夹视作链接的图标的视觉地图，此视觉地图称为的图标的视觉地图，此视觉地图称为Dreamweaver 8的站点地图。使用站点地图可以的站点地图。使用站点地图可以将新文件添加到将新文件添加到 Dreamweaver 站点，或者添加、站点，或者添加、修改或删除链接。站点地图从主页开始显示两个修改或删除链接。站点地图从主页开始显示两个级别深度的站点结构，它将页面显示为图标，并级别深度的站点结构，它将页面显示为图标，并按在源代码中出现的顺序来显示链接。站点地图按在源代码中出现的顺序来显示链接。站点地图是理想的站点结构布局工具，它快速地设置整个是理想的站点结构布局工具，它快速地设置整个站点结构，然后创建站点地图的图形图像。站点结构，然后创建站点地图的图形图像。2.3.1 查看站点地图查看站点地图 在显示站点地图之前，必须先定义站点的主页。站点的主页可以是站点中的任意页面，它不必是站点的主要页面。这种情况下，主页只是地图的起点。定义站点的主页可按以下步骤：（1）在“文件”面板（“窗口”“文件”）中，从弹出式菜单（当前站点、服务器或驱动器显示在该菜单中）中选择一个站点，如图2-31所示。（2）右键单击要设为主页的文件，然后选择）右键单击要设为主页的文件，然后选择“设成首页设成首页”，如图，如图2-32所示。所示。2.3.1 查看站点地图查看站点地图查看站点地图的步骤如下：查看站点地图的步骤如下：（1）打开）打开“文件文件”面板（面板（“窗口窗口”“文件文件”），在折叠的），在折叠的“文件文件”面板中，选择面板中，选择“站点视图站点视图”弹出式菜单中的弹出式菜单中的“地图视图地图视图”（2）“文件文件”面板显示的站点地图中将显示两个级别深度的站点结面板显示的站点地图中将显示两个级别深度的站点结构，如图构，如图2-34所示。所示。2.3.1 查看站点地图查看站点地图（3）单击文件名旁的加号）单击文件名旁的加号(+)和减号和减号(-)可显示或隐藏链可显示或隐藏链接在第二级之下的页面。接在第二级之下的页面。（4）站点地图中的颜色代表如下：）站点地图中的颜色代表如下：以红色显示的文本指示断开的链接。以红色显示的文本指示断开的链接。以蓝色显示并标有地球图标的文本指示其他站点上的文件以蓝色显示并标有地球图标的文本指示其他站点上的文件或特殊链接（如电子邮件或脚本链接）。或特殊链接（如电子邮件或脚本链接）。绿色选中标记指示您已取出的文件。绿色选中标记指示您已取出的文件。红色选中标记指示他人取出的文件。红色选中标记指示他人取出的文件。锁形图标指示只读或锁定的文件。锁形图标指示只读或锁定的文件。2.3.2 修改站点地图布局修改站点地图布局使用使用“站点地图布局站点地图布局”选项可自定义站点地图的外观。可以更改主页、选项可自定义站点地图的外观。可以更改主页、显示的列数、图标标签显示文件名还是显示页标题以及是否显示隐藏显示的列数、图标标签显示文件名还是显示页标题以及是否显示隐藏文件和相关文件。文件和相关文件。修改站点地图布局的步骤如下：修改站点地图布局的步骤如下：（1）选择）选择“站点站点”“管理站点管理站点”，打开，打开“站点定义站点定义”对话框，出现对话框，出现“管理站点管理站点”对话框，如图对话框，如图2-35所示。所示。（2）单击）单击“编辑编辑”，出现，出现“站点定义站点定义”对话框，如图对话框，如图2-36所示。所示。2.3.2 修改站点地图布局修改站点地图布局（3）在左侧的）在左侧的“类别类别”列表中选择列表中选择“站点地图布局站点地图布局”，“站点定义站点定义”对话框显示了对话框显示了“站点地图布局站点地图布局”选项，如图选项，如图2-37所示。所示。（4）按需要进行更改，然后单击）按需要进行更改，然后单击“确定确定”关闭关闭“站点定站点定义义”对话框，单击对话框，单击“完成完成”关闭关闭“管理站点管理站点”对话框。对话框。2.3.3 显示或隐藏站点地图显示或隐藏站点地图1、若要在站点地图中显示或取消隐藏标记，可按以下步骤：、若要在站点地图中显示或取消隐藏标记，可按以下步骤：（1）在站点地图中选择一个或多个文件。）在站点地图中选择一个或多个文件。（2）右键单击）右键单击(Windows)或按住或按住 Control 键单击键单击(Macintosh)，然后选择，然后选择“显示显示/隐藏链接隐藏链接”，如图，如图2-38所示。所示。2.3.3 显示或隐藏站点地图显示或隐藏站点地图若要在站点地图中显示或隐藏标记为隐藏的文件，可按以下步骤：若要在站点地图中显示或隐藏标记为隐藏的文件，可按以下步骤：（1）在折叠的）在折叠的“文件文件”面板（面板（“窗口窗口”“文件文件”）中，单击右上角）中，单击右上角的的“选项选项”菜单，如图菜单，如图2-39所示。所示。（2）可按以下之一步骤显示隐藏文件：选择）可按以下之一步骤显示隐藏文件：选择“查看查看”“显示标记为显示标记为隐藏的文件隐藏的文件”，如图，如图2-40所示。所示。2.3.3 显示或隐藏站点地图显示或隐藏站点地图 选择选择“查看查看”“布局布局”以打开以打开“站点地图选项站点地图选项”对对话框，然后选择话框，然后选择“显示标记为隐藏的文件显示标记为隐藏的文件”选项，如图选项，如图2-41所示。所示。图图2-41显示标记为隐藏的文件显示标记为隐藏的文件2.3.4保存站点地图保存站点地图若要创建当前站点地图的图像文件，可以按以下步骤：若要创建当前站点地图的图像文件，可以按以下步骤：（1）在折叠的）在折叠的“文件文件”面板（面板（“窗口窗口”“文件文件”）中，单击右上角）中，单击右上角的的“选项选项”菜单，然后选择菜单，然后选择“文件文件”“保存站点地图保存站点地图”，如图，如图2-42所示。所示。（2）在出现的）在出现的“保存站点地图保存站点地图”对话框，输入一个名称，如图对话框，输入一个名称，如图2-43所示。所示。（3）在）在“文件类型文件类型”弹出菜单中，选择弹出菜单中，选择.bmp 或或.png。（4）选择该文件的保存位置并输入图像的名称，单击）选择该文件的保存位置并输入图像的名称，单击“保存保存”即可即可2.4 发布站点发布站点 创建了创建了 Web 站点后，下一步就是通过站点后，下一步就是通过将文件上传到远程文件夹来发布该站点。将文件上传到远程文件夹来发布该站点。远程文件夹是存储文件的位置，这些文件远程文件夹是存储文件的位置，这些文件用于测试、生产、协作和发布。用于测试、生产、协作和发布。Dreamweaver将此文件夹称为远程站将此文件夹称为远程站点。点。2.4.1 了解远程站点了解远程站点 远程站点通常是运行远程站点通常是运行 Web 服务器的远程计服务器的远程计算机上保存本地文件副本的位置。用户在浏览器算机上保存本地文件副本的位置。用户在浏览器中查看网页时，就是在访问在中查看网页时，就是在访问在 Web 服务器上运行服务器上运行的远程站点。的远程站点。在创建了在创建了Web站点前，还必须能够访问远程站点前，还必须能够访问远程 Web 服务器，例如服务器，例如ISP的服务器等等。也可以在的服务器等等。也可以在本地计算机上创建一个本地计算机上创建一个 Web 服务器，如服务器，如IIS 或或Apache服务器等等。服务器等等。2.4.2 定义远程文件夹定义远程文件夹定义远程文件夹的步骤如下：定义远程文件夹的步骤如下：（1）在）在 Dreamweaver 中，选择中，选择“站点站点”“管理站点管理站点”，在在“管理站点管理站点”对话框中，选择对话框中，选择“su”站点。站点。（2）单击）单击“编辑编辑”，在，在“站点定义站点定义”对话框中，如果未显对话框中，如果未显示示“高级高级”设置，请单击设置，请单击“高级高级”选项卡，如图选项卡，如图2-45所示。所示。2.4.2 定义远程文件夹定义远程文件夹（3）从左侧的）从左侧的“类别类别”列表中选择列表中选择“远程信息远程信息”，如图，如图2-46所示。所示。（4）选择一个）选择一个“访问访问”选项：连接到选项：连接到 Internet 上的服务上的服务器的最常见方法是器的最常见方法是“FTP”和和“SFTP”；如果您使用本地；如果您使用本地计算机作为计算机作为 Web 服务器，连接到本地计算机的最常见方服务器，连接到本地计算机的最常见方法是法是“本地本地/网络网络”。2.4.2 定义远程文件夹定义远程文件夹（4）选择一个）选择一个“访问访问”选项：连接到选项：连接到 Internet 上的服务器的最常见上的服务器的最常见方法是方法是“FTP”和和“SFTP”；如果您使用本地计算机作为；如果您使用本地计算机作为 Web 服务器，服务器，连接到本地计算机的最常见方法是连接到本地计算机的最常见方法是“本地本地/网络网络”。（5）如果您选择）如果您选择“FTP”，请输入以下选项，如图，请输入以下选项，如图2-47所示：所示：输入服务器的主机名（例如输入服务器的主机名（例如 ftp.nhxx.org）。）。在在“主机目录主机目录”文本框中，输入从文本框中，输入从 FTP 根文件夹到远程站点的根文根文件夹到远程站点的根文件夹件夹(su)的服务器路径。的服务器路径。在相应的文本框中输入用户名和密码。在相应的文本框中输入用户名和密码。如果您的服务器支持如果您的服务器支持 SFTP，选择，选择“使用安全使用安全 FTP(SFTP)”选项。选项。单击单击“测试测试”测试连接。测试连接。2.4.2 定义远程文件夹定义远程文件夹（6）如果您选择）如果您选择“本地本地/网络网络”，请单击文本框旁边的文件夹，请单击文本框旁边的文件夹图标，然后浏览到远程站点的根文件夹，如图图标，然后浏览到远程站点的根文件夹，如图2-48所示。所示。（7）单击）单击“确定确定”。Dreamweaver 创建到远程文件夹的连创建到远程文件夹的连接。在远程服务器上根文件夹中创建一个空文件夹。将新的接。在远程服务器上根文件夹中创建一个空文件夹。将新的空文件夹命名为空文件夹命名为su（与本地根文件夹的名称相同）。（与本地根文件夹的名称相同）。2.4.3 上传本地文件夹上传本地文件夹上传本地文件夹的步骤如下：上传本地文件夹的步骤如下：（1）在）在“文件文件”面板（面板（“窗口窗口”“文件文件”）中，选择站点）中，选择站点的本地根文件夹的本地根文件夹(su)。单击单击“文件文件”面板工具栏上的面板工具栏上的“上传文件上传文件”蓝色箭头图标蓝色箭头图标，如图，如图2-49所示。所示。（2）当）当 Dreamweaver 询问您是否要上传整个站点时，单询问您是否要上传整个站点时，单击击“确定确定”，如图，如图2-50所示。所示。2.4.3 上传本地文件夹上传本地文件夹（3）Dreamweaver 将所有文件复制到您在定义远程文件夹将所有文件复制到您在定义远程文件夹中定义的远程文件夹。此操作可能需要一些时间，因为中定义的远程文件夹。此操作可能需要一些时间，因为 Dreamweaver 必须上传本站点中的所有文件。必须上传本站点中的所有文件。（4）当上传完所有文件后，可以单击）当上传完所有文件后，可以单击“文件文件”面板工具栏面板工具栏上的上的“展开以显示本地和远程站点展开以显示本地和远程站点”图标图标，将出现如图，将出现如图2-51所示。所示。（5）最后，在浏览器中打开远程站点以确保正确上传了所）最后，在浏览器中打开远程站点以确保正确上传了所有文件。有文件。本章小结本章小结 Dreamweaver 8站点是一组具有共享属性的链接文档站点是一组具有共享属性的链接文档和资源。和资源。Dreamweaver 站点由三部分组成：本地文件夹、站点由三部分组成：本地文件夹、远端文件夹、测试服务器文件夹。并详细介绍了在远端文件夹、测试服务器文件夹。并详细介绍了在Dreamweaver 8中定义站点的方法和步骤，进而介绍了中定义站点的方法和步骤，进而介绍了 Dreamweaver 站点修改、删除、复制等操作。站点修改、删除、复制等操作。Dreamweaver 8的站点地图是本地文件夹视作链接的的站点地图是本地文件夹视作链接的图标的视觉地图。本章也重点介绍了在图标的视觉地图。本章也重点介绍了在Dreamweaver 8中查看、修改、保存站点地图等操作。中查看、修改、保存站点地图等操作。远程站点通常是运行远程站点通常是运行 Web 服务器的远程计算机上保存服务器的远程计算机上保存本地文件副本的位置。用户在浏览器中查看网页时，就是本地文件副本的位置。用户在浏览器中查看网页时，就是在访问在在访问在 Web 服务器上运行的远程站点。本章最后详细服务器上运行的远程站点。本章最后详细介绍了定义远程站点的方法和步骤，同时介绍了利用介绍了定义远程站点的方法和步骤，同时介绍了利用Dreamweaver 8上传本地文件夹的步骤。上传本地文件夹的步骤。3 页面操作页面操作本章学习目标本章学习目标基本操作基本操作3.13.1文档元素文档元素3.23.2页面的可视化向导页面的可视化向导3.33.3案例案例3-1 查看和编辑头文件查看和编辑头文件3.43.42003.苏玉雄苏玉雄 1-57第第3章章 页面操作页面操作3.1 基本操作基本操作 基本操作基本操作基本操作基本操作 页面操作是设计网页的基本操作，它包括了页面操作是设计网页的基本操作，它包括了打开和编辑文档、控制文档属性、定义文打开和编辑文档、控制文档属性、定义文档标题等多个方面。档标题等多个方面。3.1.13.1.1新建页面新建页面新建页面新建页面 当当Dreamweaver 8.0启动时，系统会自动创建一个启动时，系统会自动创建一个无标题的文档，默认为无标题的文档，默认为html空网页，如果为您提供了几种空网页，如果为您提供了几种选择新的工作文档的选项。可以用下列方法创建新文档：选择新的工作文档的选项。可以用下列方法创建新文档：1.选择选择“文件文件”“新建新建”。即出现即出现“新建文档新建文档”对话框，如图对话框，如图3-1所示。所示。“常规常规”选选项卡已被选定。项卡已被选定。3.1.13.1.1新建页面新建页面新建页面新建页面2.从从“类别类别”列表中选择列表中选择“基本页基本页”、“动态动态页页”、“模板页模板页”、“其他其他”或或“框架集框架集”；然后；然后从右侧的列表中选择要创建的文档的类型。从右侧的列表中选择要创建的文档的类型。例如，选择例如，选择“基本页基本页”创建创建 HTML 文档，或文档，或选择选择“动态页动态页”创建创建 ColdFusion 或或 ASP文文档，诸如此类。档，诸如此类。3.单击单击“创建创建”按钮。新文档在按钮。新文档在“文档文档”窗口窗口中打开。中打开。3.1.23.1.2存储页面存储页面存储页面存储页面 文档创建之后需文档创建之后需要保存它，保存文档步要保存它，保存文档步骤如下：骤如下：若要保存新文档，请执若要保存新文档，请执行以下操作：行以下操作：1.选择选择“文件文件”“保存保存”，快捷键是，快捷键是Ctrl+S，如，如图图3-2所示所示3.1.23.1.2存储页面存储页面存储页面存储页面2.在出现的对话框中，定位到要用来保存文件的在出现的对话框中，定位到要用来保存文件的文件夹。文件夹。注意：最好将文件保存在注意：最好将文件保存在 Dreamweaver 站点中。站点中。3.在在“文件名称文件名称”文本框中，键入文件名。文本框中，键入文件名。请不要在文件名和文件夹名中使用空格和特殊字请不要在文件名和文件夹名中使用空格和特殊字符，文件名也不要以数字开头。具体说来就是不符，文件名也不要以数字开头。具体说来就是不要在打算放到远程服务器上的文件名中使用特殊要在打算放到远程服务器上的文件名中使用特殊字符字符（如（如、?、或、或￥）或标点符号￥）或标点符号（如冒号、（如冒号、斜杠或句号）；很多服务器在上传时会更改这些斜杠或句号）；很多服务器在上传时会更改这些字符，这会导致与这些文件的链接中断。字符，这会导致与这些文件的链接中断。4.单击单击“保存保存”3.1.33.1.3打开已有的页面打开已有的页面打开已有的页面打开已有的页面在在 Dreamweaver 中可打开中可打开现有现有 Web 页或基于文本的文页或基于文本的文档，即使它们不是用档，即使它们不是用Dreamweaver 创建的。可创建的。可打开该文档并用打开该文档并用 Dreamweaver 在在“设计设计”视图或视图或“代码代码”视图中编辑视图中编辑该文档。该文档。若要打开现有的文件，请执若要打开现有的文件，请执行以下操作：行以下操作：1.选择选择“文件文件”“打开打开”，出现，出现“打开打开”对话框，对话框，如图如图3-3所示。所示。3.1.33.1.3打开已有的页面打开已有的页面打开已有的页面打开已有的页面2.定位到并选择要打开的文件。定位到并选择要打开的文件。3.单击单击“打开打开”，文档在文档窗口中打开。，文档在文档窗口中打开。3.1.43.1.4浏览和调试页面浏览和调试页面浏览和调试页面浏览和调试页面可以随时在浏览器中预览文档，而不必先保可以随时在浏览器中预览文档，而不必先保存文档或将文档上传到存文档或将文档上传到 Web 服务器，默认服务器，默认浏览器为浏览器为IE浏览器，浏览页面的具体方法为：浏览器，浏览页面的具体方法为：方法一：单击方法一：单击“文件文件”“在浏览器中预览在浏览器中预览”，选择一个浏览器浏览。，选择一个浏览器浏览。方法二：使用快捷键方法二：使用快捷键F12 键在主浏览器中显键在主浏览器中显示当前文档，或者使用示当前文档，或者使用Ctrl+F12在候选浏在候选浏览器中显示当前文档。览器中显示当前文档。3.1.43.1.4浏览和调试页面浏览和调试页面浏览和调试页面浏览和调试页面方法三：单击在浏览器上预览方法三：单击在浏览器上预览/调试按钮，调试按钮，或者在下拉菜单中选择浏览器，如图或者在下拉菜单中选择浏览器，如图3-4所所示。示。3.1.5 3.1.5 页面属性页面属性页面属性页面属性页面标题、背景图像和颜色、文本和链接颜色页面标题、背景图像和颜色、文本和链接颜色以及边距是每个以及边距是每个 Web 文档的基本属性。用户可文档的基本属性。用户可以使用以使用“页面属性页面属性”对话框设置或更改页面属对话框设置或更改页面属性。性。打开页面属性对话框。打开页面属性对话框。使用下面的方法之一就可以打开页面属性对话使用下面的方法之一就可以打开页面属性对话框，如图框，如图3-5所示。所示。方法一：单击方法一：单击“修改修改”菜单下的菜单下的“页面属性页面属性”；方法二：单击文本方法二：单击文本“属性属性”检查器中的检查器中的“页面页面属性属性”按钮，即会打开按钮，即会打开“页面属性页面属性”对话框。对话框。方法三：在页面空白处单击右键，选择方法三：在页面空白处单击右键，选择“页面页面属性属性”。页面属性对话框页面属性对话框页面属性对话框页面属性对话框 3.1.5 3.1.5 页面属性页面属性页面属性页面属性2.设置页边距设置页边距 在在“页面属性页面属性”对话框中的对话框中的“外观外观”选项卡中设置上、下、选项卡中设置上、下、左、右边距。左、右边距。3.设置页面标题设置页面标题在页面属性对话框中的在页面属性对话框中的“标题标题/编码编码”选项卡，在标题单行选项卡，在标题单行文本框中输入页面标题。文本框中输入页面标题。注意：如果不给页面加标题，页面会在浏览器窗口、书签注意：如果不给页面加标题，页面会在浏览器窗口、书签列表和历史记录列表中显示为无标题文档。列表和历史记录列表中显示为无标题文档。4.设置页面背景颜色设置页面背景颜色在页面属性对话框中的在页面属性对话框中的“外观外观”类别中可以设置页面的背类别中可以设置页面的背景颜色。景颜色。注意：如果同时使用背景图像和背景颜色，下载图像时会注意：如果同时使用背景图像和背景颜色，下载图像时会出现颜色，然后图像覆盖颜色。如果背景图像包含任何透出现颜色，然后图像覆盖颜色。如果背景图像包含任何透明像素，则背景颜色会透过背景图像显示出来。明像素，则背景颜色会透过背景图像显示出来。3.1.5 3.1.5 页面属性页面属性页面属性页面属性5.设置页面链接颜色设置页面链接颜色在页面属性的在页面属性的“链接链接”选项卡中，可以设置页选项卡中，可以设置页面中链接的颜色，如图面中链接的颜色，如图3-6所示。所示。2003.苏玉雄苏玉雄 1-713 页面操作页面操作3.2 文档元素文档元素3.2 3.2 文档元素文档元素文档元素文档元素在在Dreamweaver8.0页面中有多种元素，可页面中有多种元素，可以使用鼠标直接单元选中这些元素，也可以使用鼠标直接单元选中这些元素，也可以采用选择标签的方法来选择相应的文档以采用选择标签的方法来选择相应的文档元素，其中包括可见元素和不可见元素。元素，其中包括可见元素和不可见元素。对于可见元素，可以单击并直接进行编辑；对于可见元素，可以单击并直接进行编辑；对于不可见元素，就需要在编辑前把它设对于不可见元素，就需要在编辑前把它设为可见元素。为可见元素。3.2.13.2.1选择元素选择元素选择元素选择元素若要在若要在“文档文档”窗口的窗口的“设计设计”视图中选择元素，通常可视图中选择元素，通常可以单击元素。如果元素不可见，必须使其可见后才能选择以单击元素。如果元素不可见，必须使其可见后才能选择它。它。1.选择可见元素选择可见元素若要选择若要选择“文档文档”窗口中的可见元素，请单击元素或在元窗口中的可见元素，请单击元素或在元素上拖过。素上拖过。2.选择不可见元素选择不可见元素选择不可见元素，请选择选择不可见元素，请选择“查看查看”“可视化助理可视化助理”“不不可见元素可见元素”（如果还没有选择该菜单项），然后在（如果还没有选择该菜单项），然后在“文档文档”窗口中单击元素的标记。窗口中单击元素的标记。3.选择整个标记选择整个标记若要选择完整的标签，请单击若要选择完整的标签，请单击“文档文档”窗口左下角的标签，窗口左下角的标签，如图如图3-9所示，如果要选择该单元格，单击所示，如果要选择该单元格，单击TD标签即可选标签即可选择了。择了。3.2.23.2.2改变不可见元素改变不可见元素改变不可见元素改变不可见元素有些有些HTML代码在浏览器中没有可见的表示代码在浏览器中没有可见的表示形式。例如，形式。例如，comment 标签不会出现在浏标签不会出现在浏览器中。但是，此标签在创建能够选择、编览器中。但是，此标签在创建能够选择、编辑、移动和删除这类不可见元素的页面时很辑、移动和删除这类不可见元素的页面时很有用。有用。Dreamweaver 使您可以指定在使您可以指定在“文档文档”窗口的窗口的“设计设计”视图中是否显示标记视图中是否显示标记不可见元素位置的图标。若要指明在选择不可见元素位置的图标。若要指明在选择“查看查看”“可视化助理可视化助理”“不可见元素不可见元素”时时显示哪些元素标记，可以在显示哪些元素标记，可以在“不可见元素不可见元素”首选参数中设置选项，如图首选参数中设置选项，如图3-10所示。所示。查看菜单查看菜单查看菜单查看菜单 3.2.23.2.2改变不可见元素改变不可见元素改变不可见元素改变不可见元素若要更改若要更改“不可见元素不可见元素”首选参数，单击首选参数，单击“编辑编辑”菜单下的菜单下的“首选参数首选参数”，选择，选择“不可见元素不可见元素”选项卡，如图选项卡，如图3-11所示，在显示的选项组中，选所示，在显示的选项组中，选择需要显示或隐藏的元素复选框。择需要显示或隐藏的元素复选框。2003.苏玉雄苏玉雄 1-773 页面操作页面操作3.3页面的可视化向导页面的可视化向导3.3.13.3.1调整文档窗口大小调整文档窗口大小调整文档窗口大小调整文档窗口大小在在Dreamveaver8.0中，状态栏显示中，状态栏显示“文档文档”窗口的当前尺寸（以像素为单位）。如图窗口的当前尺寸（以像素为单位）。如图3-12所示所示方法一：直接拖动窗口，查看元素如何适应方法一：直接拖动窗口，查看元素如何适应页面。在页面。在 Windows 中，用户可以将中，用户可以将“文档文档”窗口最大化以便它填充集成窗口的整个文窗口最大化以便它填充集成窗口的整个文档区域。档区域。3.3.13.3.1调整文档窗口大小调整文档窗口大小调整文档窗口大小调整文档窗口大小方法二：若要将方法二：若要将“文档文档”窗口的大小调整为预窗口的大小调整为预定义的大小，可以从定义的大小，可以从“文档文档”窗口底部的窗口底部的“窗窗口大小口大小”弹出菜单中选择一种大小，如图弹出菜单中选择一种大小，如图3-13所示所示3.3.13.3.1调整文档窗口大小调整文档窗口大小调整文档窗口大小调整文档窗口大小注意：在注意：在 Windows 中，您可以将中，您可以将“文档文档”窗口最大化以便它填充集成窗口的整个文窗口最大化以便它填充集成窗口的整个文档区域。当档区域。当“文档文档”窗口最大化时，您无窗口最大化时，您无法调整它的大小。如果是在法调整它的大小。如果是在 640 x 480 显显示器上使用，可以选择示器上使用，可以选择“536 x 196（640 x 480，默认），默认）”的大小。的大小。注意：当注意：当“文档文档”窗口最大化时，您无法调窗口最大化时，您无法调整它的大小。对于不是很精确的大小调整，整它的大小。对于不是很精确的大小调整，请使用操作系统的标准窗口大小调整方法，请使用操作系统的标准窗口大小调整方法，如拖动窗口的右下角。如拖动窗口的右下角。3.3.2 3.3.2 使用标尺使用标尺使用标尺使用标尺标尺可帮助您测量、组织和规划布局。标尺标尺可帮助您测量、组织和规划布局。标尺可以显示在页面的左边框和上边框中，以可以显示在页面的左边框和上边框中，以像素、英寸或厘米为单位来标记。像素、英寸或厘米为单位来标记。1.显示或隐藏标尺显示或隐藏标尺若要在打开和关闭状态之间切换标尺，请选若要在打开和关闭状态之间切换标尺，请选择择“查看查看”“标尺标尺”“显示显示”，如图，如图3-14所示。所示。3.3.2 3.3.2 使用标尺使用标尺使用标尺使用标尺2.更改度量单位更改度量单位若要更改度量单位，请若要更改度量单位，请从从“查看查看”“标尺标尺”子子菜单中选择菜单中选择“像素像素”、“英寸英寸”或或“厘米厘米”，如图如图3-14所示。所示。3.设置标尺原点设置标尺原点要更改原点，请将标尺要更改原点，请将标尺原点图标原点图标 拖到页面上的拖到页面上的任意位置，如图任意位置，如图3-15。若要将原点重设到它的若要将原点重设到它的默认位置，请选择默认位置，请选择“查查看看”“标尺标尺”“重设重设原点原点”。3.3.2 3.3.2 使用标尺使用标尺使用标尺使用标尺4.使用网格功能使用网格功能单击单击“查看查看”菜单中的菜单中的“网格网格”子菜单，选择子菜单，选择“显示网格显示网格”即可在文即可在文档编辑区内显示网格，档编辑区内显示网格，去掉显示网格前的去掉显示网格前的，即，即可隐藏网格。可隐藏网格。在在“查看查看”菜单中选择菜单中选择“网格网格”子菜单中子菜单中“网网格设置格设置”，弹出如图，弹出如图3-16所示网格设置对话框。所示网格设置对话框。2003.苏玉雄苏玉雄 1-843 页面操作页面操作3.4查看和编辑头文件查看和编辑头文件3.4