静态网页设计与制作 课件 第3章 构建本地站点

项目三

构建本地站点任务1

站点概述任务2构建本地站点任务3管理本地站点和站点文件任务4站点发布任务1

站点概述任务引入小明已经对网页设计的基础知识有了一定的了解，接下来就可以进行网页的设计，为了便于网民的访问和设计主队网站的管理，在进行网页设计之前首先需要建立一个属于网站的站点文件和服务器，那么什么是Internet服务器和本地计算机，什么是本地站点和远端站点呢？知识准备一、Internet服务器和本地计算机Internet服务器是网络上一种为客户端计算机提供各种Internet服务（包括WWW、FTP、e-mail等）的高性能计算机，在网络操作系统的控制下，将与其相连的硬盘、磁带、打印机、Modem及各种专用通讯设备提供给网络上的客户站点共享，也能为网络用户提供集中计算、信息发表及数据管理等服务。一般来说，网民访问网站其实就是访问服务器里的资料对于浏览网页的用户来说，他们使用的计算机被称作本地计算机。本地计算机和Internet服务器之间通过各种线路进行连接，以实现相互的通信。二、本地站点与远端站点在理解了Internet服务器和本地计算机的概念之后，了解远端站点和本地站点就很容易了。严格地说，站点是一种文档的磁盘组织形式，由文档和文档所在的文件夹组成。设计良好的网站通常具有科学的结构，利用不同的文件夹，将不同的网页内容分门别类地保存。结构良好的网站，不仅便于管理，也便于更新。在Internet上浏览网页，就是用浏览器打开存储于Internet服务器上的HTML文档及其他相关资源。基于Internet服务器的不可知特性，通常将存储于Internet服务器上的站点称作远端站点。利用Dreamweaver2021，可以对位于Internet服务器上的站点文档直接进行编辑和管理。但这在很多时候非常不便，例如网络速度和网络的不稳定性等，都会对管理和编辑操作带来影响。既然位于Internet服务器上的站点仍然是以文件和文件夹作为基本要素的磁盘组织形式，那么，能不能首先在本地计算机的磁盘上构建出整个网站的框架，编辑相应的文档，然后再放置到Internet服务器上呢？答案是可以的，这就是本地站点的概念。利用Dreamweaver2021，用户可以在本地计算机上创建站点的框架，从整体上对站点全局进行把握。站点设计完毕之后，再利用各种上传工具（例如FTP程序）将本地站点上载到Internet服务器上，形成远端站点。任务2构建本地站点任务引入在了解了服务器和站点的相关概念之后，接下来小明开始建立新站点，那么如何建立一个新站点，如何为站点设置服务器呢？知识准备下面以建立本地站点café的简单实例演示创建新站点的具体步骤，本例执行以下步骤：（1）启动Dreamweaver2021，执行“站点”/“管理站点”命令，弹出“管理站点”对话框，如图所示。（2）单击“新建站点”按钮，或直接执行“站点”/“新建站点”命令，弹出如图所示的“站点设置对象”对话框。（3）输入站点名称café和本地站点文件夹路径，然后单击“保存”按钮，即可新建一个站点。（4）单击“站点设置对象”对话框左侧的“高级设置”分类，然后在展开的子菜单中选择“本地信息”，如图所示。（5）在“站点设置对象”对话框中单击“服务器”类别，在如图所示的对话框中单击“添加新服务器”按钮，添加一个新服务器，如图所示。（6）在“服务器名称”文本框中，指定新服务器的名称。（7）在“连接方法”下拉菜单中选择连接到服务器的方式。如图所示。“站点设置”对话框“站点设置”对话框

选择连接服务器的方法

设置“更多选项”（8）如果选择连接方式为“本地/网络”，则单击“服务器文件夹”右侧的文件夹图标按钮，指定存储站点文件的文件夹所在的路径。（9）在“WebURL”文本框中，输入站点的URL。（10）单击“保存”按钮关闭“基本”屏幕。然后在“服务器”类别中，指定刚添加或编辑的服务器为远程服务器或测试服务器。如图所示。（11）在“站点设置对象”对话框的“服务器”类别中单击“添加新服务器”按钮，添加一个新服务器，或选择一个已有的测试服务器，然后单击“编辑现有服务器”按钮。（12）在如图所示的对话框中根据需要指定“基本”选项，然后单击“高级”按钮，如图所示。指定服务器类型

设置远程服务器和测试服务器（13）在测试服务器中，选择要用于Web应用程序的服务器模型。如图所示。（14）根据需要设置是否将动态文件自动同步到测试服务器。默认为自动同步。（15）单击“保存”按钮关闭“高级”屏幕。然后在“服务器”类别中，指定刚才作为测试服务器添加或编辑的服务器。（16）单击对话框中的“保存”按钮，返回“管理站点”对话框。此时对话框中会显示刚刚创建的本地站点。任务3管理本地站点和站点文件任务引入在建立了站点之后，小明就可以根据自己的需要对本地站点进行多方面的管理，也可以对站点文件或文件夹进行管理，那么小明要如何实现这么操作呢？知识准备在Dreamweaver2021中，可以对本地站点进行多方面的管理。利用“文件”面板，可以对本地站点的文件和文件夹进行创建、删除、移动和复制等操作。一、管理站点对站点的常用操作主要包括打开本地站点、编辑站点、删除站点以及复制站点。下面分别进行介绍。1．打开本地站点（1）执行“窗口”/“文件”命令，打开“文件”面板，如图所示。（2）在“文件”面板左上角的下拉列表中，可以选择需要的站点，如图所示，即可打开相应的站点。“文件”面板

选择站点2．编辑站点创建站点之后，如果对站点的某些定义不满意，还可以对站点属性进行编辑。方法如下：（1）执行“站点”/“管理站点”命令，弹出“管理站点”对话框。（2）选择需要编辑的站点，单击“编辑”按钮，弹出“站点设置对象”对话框。（3）重新设置站点的属性。3．删除站点如果不再需要某个本地站点，可以将其从站点列表中删除，删除站点的步骤如下：（1）执行“站点”/“管理站点”命令，弹出“管理站点”对话框。（2）选择需要删除的站点，单击“删除”按钮，弹出一个对话框，提示用户本操作不能通过执行“编辑”/“撤消”命令的办法恢复。（3）单击“是”，即可删除选中站点。4．复制站点（1）执行“站点”/“管理站点”命令，弹出“管理站点”对话框。（2）选择需要复制的站点，单击“复制”按钮，即可将该站点复制。二、操作站点文件或文件夹无论是创建空白的文档，还是利用已有的文档构建站点，都可能需要对站点中的文件夹或文件进行操作。下面简要介绍利用“文件”面板对本地站点的文件夹和文件进行创建、删除、移动和复制等操作。1．新建站点文件在本地站点中新建文件或文件夹的操作步骤如下：（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）单击“文件”面板左上角的下拉列表，选择需要新建文件或文件夹的站点。（3）单击“文件”管理面板右上角的选项按钮，选择“文件”/“新建文件”或“新建文件夹”命令新建一个文件或文件夹。2．删除站点文件如果要从本地文件列表面板中删除文件，可以按照如下方法进行操作：（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）单击“文件”面板左上角的下拉列表选择文件所在的站点。（3）选中要删除的文件或文件夹。（4）按Delete键，系统出现一个“提示”对话框，询问是否确定要删除文件或文件夹。（5）单击“是”按钮，即可将文件或文件夹从本地站点中删除。3．重命名站点文件（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）单击“文件”面板左上角的站点下拉列表，选择要重命名的文件或文件夹所在的站点。（3）在文件列表中选中要重命名的文件或文件夹，然后单击文件或文件夹的名称，使其名称区域处于可编辑状态。（4）输入文件或文件夹的新名称，然后单击面板空白区域，或按Enter键，即可重命名文件或文件夹。4．编辑站点文件（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）在“文件”面板左上角的站点下拉列表中选择要编辑的文件所在的站点。（3）双击需要编辑的文件图标，即可在Dreamweaver2021的文档窗口中打开此文件，对文件进行编辑。（4）文件编辑完毕，保存文档，即可对本地站点中的文件进行更新。5．移动/复制文件和文件夹（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）在“文件”面板左上角的站点下拉列表中选择要移动或复制的文件所在的站点。（4）选中目的文件夹，执行“编辑”/“粘贴”命令，即可将文件或文件夹移动或复制到相应的文件夹中。此外，使用鼠标拖动也可以实现文件或文件夹的移动操作。方法如下：1）在“文件”面板的本地站点文件列表中选中要移动的文件或文件夹。2）按下鼠标左键拖动选中的文件或文件夹，然后移动到目标文件夹上，如图所示，释放鼠标。3）单击“更新文件”对话框中的“更新”按钮，即可更新文件中的链接信息。6．刷新本地站点文件列表（1）执行“窗口”/“文件”命令，打开“文件”面板。（2）单击“文件”面板左上角的站点下拉列表，选择要刷新文件列表的站点。（3）单击“文件”面板底部的“刷新”按钮，即可对本地站点的文件列表进行刷新。任务4站点发布任务引入网页建好之后就需要发布，只有上传到服务器才能供用户访问，因此在发布之前首先要建立远程站点来连接远程服务器，那么如何配置远程站点，如何实现网页文件的上传、下载与同步更新呢？知识准备网站建好之后，下一步就是将文件上传到服务器进行发布。远程文件夹是存储文件的位置，Dreamweaver将此文件夹称为远程站点。因此，在发布站点之前，必须先配置远程站点，并能够访问远程Web服务器。一、配置远程站点配置远程站点的步骤如下：（1）执行“站点”/“管理站点”命令，打开“管理站点”对话框。（2）选中要上传的站点，然后单击“编辑”按钮，在弹出的对话框左侧的“分类”中选择“服务器”选项。（3）单击“添加新服务器”按钮，在弹出的对话框的“连接方式”下拉列表中选择连接到远程站点的方式。（4）切换到“高级”页面，设置远程站点文件的维护选项。如图所示。

配置服务器信息

配置服务器信息2（5）单击“保存”按钮，添加的服务器添加到服务器列表中。选中“远程”对应的单选按钮，如图所示。（6）设置完毕，单击“保存”按钮关闭对话框，完成远程站点的配置。二、上传、下载与同步更新上传和下载是在互联网上传输文件的专门术语。通常，用户把自己计算机上的文件拷贝到远程计算机上的过程，称作上传；相反，用户从某台远程计算机上拷贝文件到自己计算机上的过程，称作下载。1．上传站点文件（1）依照前面介绍的步骤配置远程站点之后，单击“文件”面板右上角的选项按钮，在弹出的下拉菜单中选择“查看”/“展开文件面板”命令，可以显示本地和远端站点。如图所示。（2）单击远端文件列表中的“单击此处”，或单击“连接到远程服务器”按钮，将站点与远程服务器接通，此时，“远程服务器”窗格中将显示远程服务器中的文件目录，如图所示。展开的“文件”面板

显示本地和远端站点（3）在“文件”面板的“本地文件”窗格中选择本地文件夹，然后拖动到“远程服务器”窗格中的某个文件夹中；或从“本地文件”窗格中选择文件，然后单击“上传文件”按钮，Dreamweaver2021会将所有站点文件上传到指定服务器的远程文件夹。2．下载站点文件执行以下操作之一可以下载站点文件：（1）在“远程服务器”窗格中选择需要下载的文件，然后拖动到“本地文件”窗格中的某个文件夹中。（2）在“远程服务器”窗格中右击要下载的文件，然后从弹出的快捷菜单中选择“获取”命令。3．远程站点与本地站点同步利用Dreamweaver的站点同步功能可以轻松修正这种问题，方便用户进行站点更新维护。步骤如下：（1）执行“站点”/“站点选项”/“同步站点范围”菜单命令，或单击展开的“文件”面板上的“同步”按钮，打开“与远程服务器同步”对话框。如图所示。（2）在“同步”下拉列表框中选择同步的范围，当前整个站点或当前选中文件。（3）在“方向”下拉列表框中设置文件同步的方式。（4）如果要将本地上没有的远程站点上的文件删除，则选中“删除本地驱动器上没有的远端文件”复选框。（5）单击“预览”按钮即可开始同步设置。如果存在需要更新的文件，将弹出“同步”对话框，显示需要同步的文件列表。选中文件左侧的“上传”按钮，即可完成同步。（6）如果同步完成，或没有需要同步的文件，则显示如图所示的“同步”对话框，单击“确定”按钮关闭对话框。至此，远程站点文件与本机文件的同步完成。“与远程服务器同步”对话框

“同步”对话框项目总结项目实战实战一在本机上创建站点bz（1）执行“站点”｜“管理站点”命令，弹出“管理站点”对话框.（2）单击“新建站点”按钮，在弹出的对话框中选择“站点”分类，然后输入站点名称bz，并指定本地站点文件夹的路径。（3）单击“高级设置”分类，