Dreamweaver网页设计与制作第2章.ppt

1、第 2 章 Dreamweaver 8站点的管理,本章学习目标,2.1 Dreamweaver 8的站点设置,Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的方法。通过在站点中组织文件，可以利用 Dreamweaver 将站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。若要充分利用 Dreamweaver 的功能，需要定义一个站点。,2.1.1 认识Dreamweaver 8的站点,Dreamweaver 站点由三部分组成，具体取决于开发环境和所开发的 Web 站点类型： （1）本地文件夹：是您的工作目录。Dreamweaver 将该文件夹称为“本

2、地站点”。此文件夹可以位于本地计算机上，也可以位于网络服务器上。这就是为 Dreamweaver 站点所处理的文件的存储位置。 （2）远端文件夹：是存储文件的位置，这些文件用于测试、生产、协作等，具体取决于开发环境。Dreamweaver 在“文件”面板中将该文件夹称为“远端站点”。一般说来，远端文件夹位于运行 Web 服务器的计算机上。 （3）测试服务器文件夹：是 Dreamweaver 处理动态页的文件夹。,2.1.2 定义新的站点,定义一个新的站点步骤如下： （1）在C盘新建一个文件夹。打开“我的电脑”，打开C盘，点鼠标右键，选择“新建”，选择“文件夹”选项，如图2-1所示。 此时，C盘

3、下会出现一个新建文件夹图标，如图2-2所示。,2.1.2 定义新的站点,（2）现在开始在Dreamweaver 8中把web这个文件夹定义为站点。打开Dreamweaver 8，在菜单栏上，点击站点菜单，选择新建站点，如图2-4所示。 （3）接下来需要给站点起一个名字，可以起任意一个名字，如图2-5所示，这里输入“个人主页”。,2.1.2 定义新的站点,（4）按下一步按钮，选择“是否使用服务器技术”。因为实例建立的是一个静态站点，就选择“否，我不想使用服务器技术”，如图2-6所示。 （5）按下一步按钮，因为要传到网上的虚拟主页空间，就要选择“编辑我的计算机上的本地副本，完成后再传到服务器上”，

4、如图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 站点。“高级”设置使您可以根据需要分别设置本地、远端和测试文件

5、夹。 1、设置本地文件夹 本地文件夹是 Dreamweaver 站点的工作目录。此文件夹可以位于本地计算机上，也可以位于网络服务器上。,2.1.3 使用“高级设置”来设置站点,设置本地文件夹，可以按如下步骤： （1）选择“站点”“管理站点”，将出现“管理站点”对话框如图2-13所示。 （2）单击“新建”，出现“站点定义”对话框，如图2-14所示。,2.1.3 使用“高级设置”来设置站点,（3）如果未显示“高级”设置，请单击“高级”按钮。 “站点定义”对话框的“高级”选项卡显示“本地信息”类别选项，输入“本地信息”选项，如图2-15所示。 （4）如果已经做好了设置远端服务器的准备，请跳过剩下的步

6、骤；选择左侧的“远端信息”类别，然后完成该对话框，如图2-16所示。,2.1.3 使用“高级设置”来设置站点,（4）如果已经做好了设置远端服务器的准备，请跳过剩下的步骤；选择左侧的“远端信息”类别，然后完成该对话框，如图2-16所示。 （5）单击“确定”，即可完成站点的设置工作。,2.1.3 使用“高级设置”来设置站点,2、设置远端文件夹 为 Dreamweaver 站点设置本地文件夹后，可以设置远端文件夹。根据开发环境的不同，远端文件夹是您存储用于进行测试、协作、生产、部署等的文件的位置。 设置远端文件夹的步骤同设置的步骤如下： （1）选择“站点”“管理站点”。出现“管理站点”对话框，如图2

7、-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 站点建立好

8、了以后，有时我们需要对Dreamweaver 站点进行一些修改、删除、复制等操作，下面我们将详细介绍Dreamweaver 站点的修改、删除、复制等操作。,2.2.1打开本地站点,打开站点的步骤如下： （1）选择“站点”“管理站点”。出现“管理站点”对话框，如图2-22所示。 （2）选择要打开的站点名称。例如选择“个人主页”站点，然后单击“完成”按纽，将打开“个人主页”站点，如图2-23所示。,2.2.2修改本地站点,修改本地站点的步骤如下： （1）选择“站点”“管理站点”。出现“管理站点”对话框，如图2-24所示。 （2）选择要修改的站点名称。例如选择“web”站点，然后单击“编辑”按纽，将

9、打开“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）选择要删除的站点名

10、称。例如选择“个人主页”站点，然后单击“复制”按纽即可完成站点的复制，如图2-30所示。,2.3 Dreamweaver 8的站点地图,Dreamweaver 8站点的本地文件夹视作链接的图标的视觉地图，此视觉地图称为Dreamweaver 8的站点地图。使用站点地图可以将新文件添加到 Dreamweaver 站点，或者添加、修改或删除链接。站点地图从主页开始显示两个级别深度的站点结构，它将页面显示为图标，并按在源代码中出现的顺序来显示链接。站点地图是理想的站点结构布局工具，它快速地设置整个站点结构，然后创建站点地图的图形图像。,2.3.1 查看站点地图,在显示站点地图之前，必须先定义站点的主

11、页。站点的主页可以是站点中的任意页面，它不必是站点的主要页面。这种情况下，主页只是地图的起点。定义站点的主页可按以下步骤： （1）在“文件”面板（“窗口”“文件”）中，从弹出式菜单（当前站点、服务器或驱动器显示在该菜单中）中选择一个站点，如图2-31所示。 （2）右键单击要设为主页的文件，然后选择“设成首页”，如图2-32所示。,2.3.1 查看站点地图,查看站点地图的步骤如下： （1）打开“文件”面板（“窗口”“文件”），在折叠的“文件”面板中，选择“站点视图”弹出式菜单中的“地图视图” （2）“文件”面板显示的站点地图中将显示两个级别深度的站点结构，如图2-34所示。,2.3.1 查看站点

12、地图,（3）单击文件名旁的加号 (+) 和减号 (-) 可显示或隐藏链接在第二级之下的页面。 （4）站点地图中的颜色代表如下： 以红色显示的文本指示断开的链接。 以蓝色显示并标有地球图标的文本指示其他站点上的文件或特殊链接（如电子邮件或脚本链接）。 绿色选中标记指示您已取出的文件。 红色选中标记指示他人取出的文件。 锁形图标指示只读或锁定的文件。,2.3.2 修改站点地图布局,使用“站点地图布局”选项可自定义站点地图的外观。可以更改主页、显示的列数、图标标签显示文件名还是显示页标题以及是否显示隐藏文件和相关文件。 修改站点地图布局的步骤如下： （1）选择“站点”“管理站点”，打开“站点定义”对

13、话框，出现“管理站点”对话框，如图2-35所示。 （2）单击“编辑”，出现“站点定义”对话框，如图2-36所示。,2.3.2 修改站点地图布局,（3）在左侧的“类别”列表中选择“站点地图布局”，“站点定义”对话框显示了“站点地图布局”选项，如图2-37所示。 （4）按需要进行更改，然后单击“确定”关闭“站点定义”对话框，单击“完成”关闭“管理站点”对话框。,2.3.3 显示或隐藏站点地图,1、若要在站点地图中显示或取消隐藏标记，可按以下步骤： （1）在站点地图中选择一个或多个文件。 （2）右键单击 (Windows) 或按住 Control 键单击 (Macintosh)，然后选择“显示/隐藏

14、链接”，如图2-38所示。,2.3.3 显示或隐藏站点地图,若要在站点地图中显示或隐藏标记为隐藏的文件，可按以下步骤： （1）在折叠的“文件”面板（“窗口”“文件”）中，单击右上角的“选项”菜单，如图2-39所示。 （2）可按以下之一步骤显示隐藏文件：选择“查看”“显示标记为隐藏的文件”，如图2-40所示。,2.3.3 显示或隐藏站点地图,选择“查看”“布局”以打开“站点地图选项”对话框，然后选择“显示标记为隐藏的文件”选项，如图2-41所示。 图2-41显示标记为隐藏的文件,2.3.4保存站点地图,若要创建当前站点地图的图像文件，可以按以下步骤： （1）在折叠的“文件”面板（“窗口”“文件”

15、）中，单击右上角的“选项”菜单，然后选择“文件”“保存站点地图”，如图2-42所示。 （2）在出现的“保存站点地图”对话框，输入一个名称，如图2-43所示。 （3）在“文件类型”弹出菜单中，选择 .bmp 或 .png。 （4）选择该文件的保存位置并输入图像的名称，单击“保存”即可,2.4 发布站点,创建了 Web 站点后，下一步就是通过将文件上传到远程文件夹来发布该站点。远程文件夹是存储文件的位置，这些文件用于测试、生产、协作和发布。 Dreamweaver将此文件夹称为远程站点。,2.4.1 了解远程站点,远程站点通常是运行 Web 服务器的远程计算机上保存本地文件副本的位置。用户在浏览器

16、中查看网页时，就是在访问在 Web 服务器上运行的远程站点。 在创建了Web站点前，还必须能够访问远程 Web 服务器，例如ISP的服务器等等。也可以在本地计算机上创建一个 Web 服务器，如IIS 或Apache服务器等等。,2.4.2 定义远程文件夹,定义远程文件夹的步骤如下： （1）在 Dreamweaver 中，选择“站点”“管理站点”，在“管理站点”对话框中，选择“su ”站点。 （2）单击“编辑”，在“站点定义”对话框中，如果未显示“高级”设置，请单击“高级”选项卡，如图2-45所示。,2.4.2 定义远程文件夹,（3）从左侧的“类别”列表中选择“远程信息”，如图2-46所示。 （

17、4）选择一个“访问”选项：连接到 Internet 上的服务器的最常见方法是“FTP”和“SFTP”；如果您使用本地计算机作为 Web 服务器，连接到本地计算机的最常见方法是“本地/网络”。,2.4.2 定义远程文件夹,（4）选择一个“访问”选项：连接到 Internet 上的服务器的最常见方法是“FTP”和“SFTP”；如果您使用本地计算机作为 Web 服务器，连接到本地计算机的最常见方法是“本地/网络”。 （5）如果您选择“FTP”，请输入以下选项，如图2-47所示： 输入服务器的主机名（例如 ）。 在“主机目录”文本框中，输入从 FTP 根文件夹到远程站点的根文件

18、夹(su)的服务器路径。 在相应的文本框中输入用户名和密码。 如果您的服务器支持 SFTP，选择“使用安全 FTP (SFTP)”选项。 单击“测试”测试连接。,2.4.2 定义远程文件夹,（6）如果您选择“本地/网络”，请单击文本框旁边的文件夹图标，然后浏览到远程站点的根文件夹，如图2-48所示。 （7）单击“确定”。 Dreamweaver 创建到远程文件夹的连接。在远程服务器上根文件夹中创建一个空文件夹。将新的空文件夹命名为su（与本地根文件夹的名称相同）。,2.4.3 上传本地文件夹,上传本地文件夹的步骤如下： （1）在“文件”面板（“窗口”“文件”）中，选择站点的本地根文件夹 (su)。 单击“文件”面板工具栏上的“上传文件”蓝色箭头图标 ，如图2-