第 章
网站管理
大型网站一般都由成千上万个网页及其他文件构成,合理地组织这些网页和文件在网站后期维护中显得非常重要,完善的组织可以提高站点建设与维护效率。本章首先介绍了如何利用Dreamweaver提供的站点管理工具有效地组织和管理站点文件夹及文件,建立本地文件与远程站点之间的映射关系;接着介绍如何利用【站点管理】窗口将网页的制作与编辑任务分配到工作组成员的方法;最后介绍了在上传站点之前,如何测试站点的完整性与修复错误链接。
【学习重点】
? 上传站点的方法与技巧
? 管理站点中的文件与文件夹
? 测试站点内链接
? 检查站点的兼容性
? 检验站点下载速率
13.1 定 义 站 点
根据网站运行位置的不同,可以把站点分为本地站点和远程站点两种。本地站点以个人系统为服务器环境进行运行,而远程站点则以互联网上的服务器为环境进行运行。大部分初学者在学习和上机时都会在本地上机练习,因此本节具体介绍如何在本地定义站点。
13.1.1 新建静态站点
静态站点,也称为静态页面站点,就是不需要服务器环境的支持也能够运行页面。定义本地站点的具体操作步骤如下。
【操作步骤】
第1步,启动Dreamweaver,选择【站点】|【新建站点】命令,打开【未命名站点1 的站点定义为】对话框。
第2步,在【站点名称】文本框中输入站点名称,如mysite,在【本地站点文件夹】文本框中设置站点在本地文件中的存放路径,可以直接输入,也可以用鼠标单击右侧的【选择文件】按钮选择相应的文件夹,如图13.1所示。
图13.1 定义本地信息
第3步,选择【高级设置】选项卡,展开高级设置选项,在左侧的选项列表中单击【本地信息】选项。然后在【本地信息】对话框中设置本地信息,如图13.2所示。
? 【默认图像文件夹】文本框:设置默认的存放站点图片的文件夹。但是对于比较复杂的网站,图片往往不仅仅只存放在一个文件夹中,因此可以不输入。
? 【链接相对于】栏:定义当在Dreamweaver为站点内所有网页插入超链接时是采用相对路径,还是绝对路径,如果希望是相对路径则可以选中【文档】单选按钮,如果希望以绝对路径的形式定义超链接,则可以选中【站点根目录】单选按钮。
? Web URL文本框:输入网站的网址,该网址能够供链接检查器验证使用绝对地址的链接。在输入网址时需要输入完全网址,例如,http://localhost/msite/。该选项只有在定义动态站点后有效。
? 【区分大小写的链接检查】复选框:选中该复选框可以对链接的文件名称大小进行区分。
图13.2 定义高级信息
? 【启用缓存】复选框:选中该复选框可以创建缓存,以加快链接和站点管理任务的速度,建议用户要选中。
13.1.2 新建虚拟站点
定义本地动态虚拟站点可以在13.1.1节介绍的定义本地静态站点基础上,添加虚拟服务器环境设置即可。
【操作步骤】
第1步,启动Dreamweaver,先在本地创建一个虚拟远程目录,用来作为服务器端应用程序的根目录,然后在本地再创建一个本地目录。
? 提示:为了测试方便,可以定义本地目录和远程目录为同一个文件夹,这样更方便文件管理和测试,避免文件频繁上传和下载。
第2步,在Dreamweaver中,选择【站点】|【新建站点】命令,打开【站点设置对象mysite】对话框,单击【服务器】选项,切换到服务器设置面板。
第3步,在【服务器】选项面板中单击 按钮,如图13.3所示。显示增加服务器技术面板,在该面板中定义服务器技术,如图13.4所示。
图13.3 增加服务器技术
图13.4 定义服务器技术
第4步,在【基本】选项卡中设置服务器基本信息,如图13.5所示。
图13.5 定义基本信息
(1)在【服务器名称】文本框中输入站点名称,如php_site。
(2)在【连接方式】下拉列表框中选择【本地/网络】选项。实现在本地虚拟服务器中建立远程连接,也就是说设置远程服务器类型为在本地计算机上运行网页服务器。
(3)在【服务器文件夹】文本框中设置站点在服务器端的存放路径,可以直接输入,也可以用鼠标单击右侧的【选择文件】按钮 选择相应的文件夹。为了方便管理,可以把本地文件夹和远程文件夹设置相同的路径。
(4)在Web URL文本框中输入虚拟服务器的网址,也可以暂时不定义,等设置测试服务器之后,Dreamweaver会自动设置,其他选项可以保持默认值。
第5步,在【站点设置对象mysite】对话框中选择【高级】选项卡,设置服务器的其他信息,如图13.6所示。
在【服务器模型】下拉列表框中选择PHP MySQL技术。服务器模型用来设置服务器支持的脚本模式,包括无、ASP JavaScript、ASP VBScript、ASP.NET C#、ASP.NET VB、ColdFusion、JSP和PHP MySQL。目前使用比较广泛的有ASP、JSP和PHP 3种服务器脚本模式。
图13.6 定义高级信息
在【远程服务器】栏中,还可以设置各种协助功能,详细说明如下。
? 选中【维护同步信息】复选框,可以确保本地信息与远程信息同步更新。
? 选中【保存时自动将文件上传到服务器】复选框,可以确保在本地保存网站文件时,会自动把保存的文件上传到远程服务器。
? 选中【启用文件取出功能】复选框,则在编辑远程服务器上的文件时,Dreamweaver会自动锁定服务器端该文件,禁止其他用户再编辑该文件,防止同步操作可能会引发的冲突。
? 在【取出名称】和【电子邮件地址】文本框中输入用户的名称和电子邮件地址,确保网站团队内部即时进行通信,相互沟通。
第6步,设置完毕,单击【保存】按钮,返回【站点设置对象php_site】对话框,这样即可建立一个动态网站,如图13.7所示。此时如果选中新定义的服务器,则可以单击下面的【编辑】按钮 重新设置服务器选项。当然也可以单击【删除】按钮 删除该服务器,或者单击【增加】按钮 再定义一个服务器。而单击【复制】按钮 复制选中的服务器。
图13.7 定义测试服务器信息
第7步,选择【站点】|【管理站点】命令,打开【管理站点】对话框,用户就可以看见刚刚建立的动态站点,如图13.8所示。
图13.8 管理站点
第8步,选择【窗口】|【文件】命令,或者按F8键,打开【文件】面板。单击【文件】下拉列表右侧的向下三角按钮 ,在打开的下拉列表中选择刚建立的php_site动态网站,这时就可以打开php_site站点,然后进行站点内容管理,或者创建站点页面等操作,如图13.9所示。
图13.9 启动站点
? 提示:用户就可以在该站点下新建文件夹和网页文档,PHP动态网页的扩展名为.php。本书后面的实例都是在这样的环境下运行和测试。
13.1.3 新建FTP站点
通过FTP服务器可以把本地站点的文件和文件夹内容上传到远程服务器上,这样就可以不用在本地安装和配置PHP环境,让远程服务器帮助完成系统运行任务,当然使用FTP服务器之前,先需要购买虚拟空间。
定义FTP站点的具体步骤与定义WWW服务站点的基本方法相同。不同的是在13.1.2节操作步骤的第4步中,选择【访问】的方式为FTP选项,如图13.10所示。
图13.10 定义FTP站点
【操作步骤】
第1步,在【FTP地址】文本框中设置FTP主机的名称,如ftp.mysite.cn。请输入完整的主机名,并且不要附带其他任何文本。特别是不要在主机名前面加上FTP协议名。
? 提示:如果不知道FTP主机,可以联系Web站点托管服务商索取。如果知道主机名的IP,也可以直接输入IP地址,如221.195.613.111,这样能够更快速地连接到服务器。
第2步,在【用户名】和【密码】文本框中输入用于连接到FTP服务器的用户名和密码。该登录名和密码由Web站点托管服务商提供,也可以通过Web站点托管服务商的后台管理网站进行修改。
第3步,在【根目录】文本框中输入用户在远程站点上存储公开显示的文档的主机目录(文件夹)。
? 提示:如果不能确定应输入哪些内容作为主机目录,请与服务器管理员联系或将文本框保留为空白。在有些服务器上,根目录就是用户首次使用FTP连接到的目录。若要确定这一点,请连接到服务器。如果出现在【文件】面板【远程文件】视图中的文件夹具有像 public_html、www或用户的登录名这样的名称,它可能就是用户应该在【主机目录】文本框中输入的目录。
第4步,在Web URL文本框中输入网站的网址,该网址能够供链接检查器验证使用绝对地址的链接。在输入网址时需要输入完全网址,如http://localhost/msite/。
第5步,单击【测试】按钮可以测试登录名和密码是否正确,如果连接成功会显示提示对话框。默认情况下,Dreamweaver会保存密码。如果用户希望每次连接到远程服务器时,Dreamweaver都提示输入密码,可以取消选中【保存】复选框。
【拓展】如果防火墙配置要求使用被动式FTP,用户可以单击【更多选项】选项,展开更多选项,如图13.11所示。在这里如果选中【使用被动式 FTP】复选框,一般服务商都会提供说明。【使用被动式FTP】能够使用被动方式建立本地软件与FTP服务器的连接,而不是请求远程服务器来建立它。如果不能确定是否使用被动式FTP,可以询问系统管理员。
如果使用支持IPv6的FTP服务器,请选中【使用IPv6传输模式】复选框。随着Internet协议第6版(IPv6)的发展,EPRT和EPSV已分别替代FTP命令PORT和PASV。因此,如果用户正试图连接到支持IPv6的FTP服务器,必须为数据连接使用被动扩展(EPSV)和主动扩展(EPRT)命令。
13.2 管 理 站 点
Dreamweaver支持多站点的管理,用户可以在Dreamweaver中同时定义多个不同服务器类型的站点,然后再利用Dreamweaver提供的【管理站点】对话框进行管理。
13.2.1 编辑站点
管理多个已定义的站点可以在【管理站点】对话框中完成。
【操作步骤】
第1步,启动Dreamweaver。选择【站点】|【管理站点】命令,打开【管理站点】对话框,如图13.12所示。
图13.12 【管理站点】对话框
第2步,在【管理站点】对话框的列表框中显示已定义的站点。
第3步,从列表框中选择一个站点,然后单击对话框底部的【编辑】按钮 ,将会打开【站点定义为】对话框,可以模仿13.1节介绍的方法重新修改站点的相关设置,包括本地、远程和测试服务器信息等。
第4步,选中站点之后,单击【复制】按钮 可以快速复制一个站点。复制站点的目的是能够帮助用户快速引用已定义站点的设置信息,这样能够加快站点定义的速度,方便在团队内部共享定义站点的设置,避免重复操作。
? 提示:虽然复制站点没有复制站点内部结构和信息,但是复制与被复制的站点设置信息是重复的。例如,本地目录和远程目录都是相同的,所以当用户复制站点后,还需要修改其中的站点设置,特别要修改复制站点的本地目录和远程目录,避免在不同站点内进行操作时可能会发生的冲突。
如果已定义的站点不再需要,建议选择该站点,然后单击【删除】按钮 删除该站点,但是站点所对应的本地目录和远程目录没有被删除,目录中包含的文件和文件夹没有受到影响。如果希望同时也删除目录中包含的内容,则先在【文件】面板中进行删除,或者在本地系统的资源管理器中删除。
13.2.2 备份站点
考虑到系统的安全性和站点移植,用户应备份已定义的站点,避免系统出现问题后,可以恢复丢失的设置信息,也可以实现与团队内其他成员共享站点设置。
【操作步骤】
第1步,启动Dreamweaver。
第2步,在【管理站点】对话框中选中需要备份的站点,然后单击【导出】按钮 ,打开【导出站点】对话框。
第3步,在该对话框中设置备份文件要保存的位置和名称即可,如图13.13所示。
第4步,Dreamweaver将站点设置导出为XML文件,扩展名为.ste。可以在记事本中打开查看设置信息,如图13.14所示。
图13.14 查看站点设置信息
第5步,恢复站点是备份站点的逆过程。在【管理站点】对话框中单击【导入站点】按钮,打开【导入站点】对话框,这时可以选择以前备份的文件(.ste文件),然后单击【确定】按钮即可。
13.3 设 计 站 点
定义站点之后,Dreamweaver会自动把该站点设置为当前站点,此时可以在【文件】面板中查看和管理网站结构和文件。使用它来访问站点,管理服务器,或者浏览本地驱动器,查看和管理文件和文件夹。
13.3.1 切换站点
【操作步骤】
第1步,启动Dreamweaver。
第2步,在【管理站点】对话框中选中需要编辑的站点。
第3步,单击【完成】按钮,则Dreamweaver会自动把该站点设置为当前站点,并保存这种状态。
每次启动Dreamweaver之后,会自动进入此站点的编辑环境中。此时,在【文件】面板中会默认显示该站点的本地目录内容。
? 提示:考虑到每一次切换站点时,Dreamweaver都要重构站点缓存,如果站点内容很多的话,这个过程是很慢的,不建议频繁在多个站点之间来回切换。除非站点内容很小,或者必须在站点之间进行切换。用户可以在【文件】面板的站点下拉列表中快速进行切换,如图13.15所示。
图13.15 切换站点
13.3.2 编辑站点文件
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板,如图13.16所示。
? 提示:【文件】面板的操作与在本地资源管理器中操作相似。网站结构一般通过文件夹来实现,不同版块、不同栏目以及不同类型的文件都可以通过文件夹来进行组织。
第3步,右击某个文件夹或者文件夹内的文件,在弹出的快捷菜单中选择【新建文件夹】命令,即可在当前文件夹内新建一个子文件夹。
【拓展】文件夹可以多层嵌套,形成多层结构关系,但是不要把这个层次结构设计得太深,2~4级结构层次基本上够用了。文件的建立与文件夹的操作方法相同,在PHP服务器类型的动态网站中新建的文件扩展名为.php。也可以在重命名时修改文件的类型。
? 会用快捷键。例如,Ctrl+A(全选)、Ctrl+X(剪切文件夹或文件)、Ctrl+C(复制)、Ctrl +D(复制)、Ctrl+V(粘贴)、Del(删除)、F2(重命名)、F5(刷新站点)等。
? 巧用鼠标左右键。例如,单击文件或文件夹可以重命名,双击可以在编辑窗口中打开文件,双击文件夹名称可以展开文件夹,右击可以弹出快捷菜单,拖动文件和文件夹可以移动位置,按住Ctrl键拖动鼠标可以快速复制文件夹或文件等。
? 使用快捷菜单。选中操作的文件夹或文件,右击,然后在弹出的快捷菜单中可以找到需要的所有操作功能。
? 使用面板菜单。单击【文件】面板右上角的菜单按钮( ),从弹出的菜单中选择相应的命令即可。
第4步,如果要执行删除操作,可以先选中要删除的文件,然后选择【文件】|【删除】命令,或右击,在弹出的快捷菜单中选择【编辑】|【删除】命令。
? 警告:在【文件】面板中所有操作都是不能恢复的,因此在【文件】面板中操作时要特别谨慎。
第5步,Dreamweaver会弹出提示对话框,询问用户是否确实要删除所选文件。单击【确定】按钮,删除所选文件;单击【取消】按钮,则取消删除操作。
? 提示:删除文件的最简单的方法是:选定要删除的文件后,按 Delete键,然后在弹出的对话框中单击【确定】按钮即可将其删除。如果要删除某个文件夹下的全部文件,只需选中该文件夹,然后按照删除文件的方法操作即可。
如果要一次删除多个文件或文件夹,可以在单击文件时按下Ctrl键或Shift键协助选中多个文件。按住Shift键,可连续选中多个文件;按住Ctrl键,可以选中不连续的多个文件。选定文件后,再按Delete键即可删除。
13.3.3 查看站点文件
在网站创建与维护的过程经常需要查看文件和文件夹,当网站内容越来越多时,有时是非常麻烦的。下面介绍一些快捷操作方法。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板。
第3步,如果文件名太长,可以通过拖曳改变【文件】面板的宽度来实现,把光标移到面板的左右边框,当光标变成双向箭头时,按住左键拖曳即可快速改动面板的宽度。
以同样的方法可以改变面板的高度,以便在列表框中看到更多的文件,方便浏览和操作。
第4步,通过隐藏或调整面板中的详细列可以加快浏览速度。
例如,在【站点定义为】对话框的【文件视图列】分类中设置默认列的显示或隐藏,以及排列顺序。这对于经常查看文件的相关属性时非常重要。例如,如果经常关注文件的修改时间,则可以把【修改】列调整到前面(选中该项,然后单击 和 按钮来调整排列顺序)。
第5步,如果觉得文件大小信息没有多大参考价值,则可以双击【大小】选项,在打开的选项中取消选中【显示】复选框,如图13.17所示。这样可以集中精力浏览文件或参考关注的文件信息,避免其他无用的文件影响。
图13.17 设置文件视图列
【拓展】在【文件】面板右上角单击面板菜单按钮( ),从弹出的下拉菜单中选择【查看】|【显示隐藏文件】命令,可以浏览网站中所有隐藏文件。这些隐藏文件多半由系统自动产生,用来辅助完成某些功能。例如,存回和取出文件(.lck文件)、设计备注文件(.mno文件)等。这样信息对于网站管理至关重要,一般不要轻易删除。通过开启显示隐藏文件,但是不要觉得这些文件无用而全部删除。
13.3.4 站内文件快速定位
在庞杂的站点内定位文件不是件很容易的事情,但是Dreamweaver提供了很多支持功能,使得在站点中查找选定、打开、取出或最近修改过的文件非常容易。也可以在本地站点或远程站点中查找较新的文件。
1.在站点内定位打开的文件
在Dreamweaver的主窗口的菜单栏中选择【站点】|【在站点定位】命令,Dreamweaver会自动在【文件】面板中帮用户找到打开的文件,并使其处于选中状态。
2.选择取出的文件
取出的文件一般都会在文件图标后面显示一个“√”符号。如果网站结构比较复杂,在不同文件夹中进行操作,这样被取出的文件会很多。但是在工作时,由于忙可能会忘记很多被取出的文件,因此会妨碍其他成员的编辑操作。这时,用户不妨在【文件】面板菜单中选择【编辑】|【选择取出的文件】命令,则Dreamweaver会自动把所有取出的文件选中显示,这样用户就可以一目了然地知道站点内被取出的文件情况。
3.选择修改的文件
如何确定站点内最近修改的文件?在【文件】面板菜单中选择【编辑】|【选择最近修改期】命令,Dreamweaver会打开【选择最近修改日期】对话框,如图13.18所示。在该对话框中用户可以设置时间段来查找最近修改的文件,或者指定某个时间段的文件,然后单击【确定】按钮,Dreamweaver会自动高亮显示所有符合条件的文件。
图13.18 选择最近修改日期
13.4 网 站 上 传
在网站开发期一般都在本地/网络中进行,当开发和测试完毕,就需要把整个网站上传到远程服务器上,当然在上传之前,用户应该定义远程FTP站点。下面介绍如何快速把网站上传到远程服务器上。
13.4.1 快速上传
上传之前,应确定网站是团队开发,还是个人建设。如果是在协作环境中工作,建议在上传之前,先利用存回和取出功能把需要上传的文件取出来,避免别人同时操作。如果只有一个人在远程站点上工作,就不需要考虑这些问题了。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板。
第3步,在【文件】面板的工具栏中单击【连接到远端主机】按钮 先建立本地与远程服务器的连接。如果连接成功,则该按钮会显示为 ,再次单击可以挂断连接。
第4步,连接之后,单击【刷新】按钮 刷新本地目录,以保证本地目录为最新内容。
第5步,如果是第一次上传,不妨选中本地站点根目录,然后单击【上传文件】按钮 。
第6步,Dreamweaver会询问是否上传整个站点,单击【确定】按钮,则系统自动把本地目录中所有文件上传到远程服务器上。
第7步,如果单击【文件】面板底部的【日志】按钮,则可以查看上传日志,如图13.19所示。
在这个后台文件活动日志中,用户可以查看哪些文件上传成功,哪些文件上传失败,以便即时采取措施,继续上传失败的文件。
当网站内容很多时,网站上传会持续很长时间,这时用户可以隐藏【后台文件活动】对话框,让文件上传在后台继续操作,这样就可以继续执行其他任务。
第8步,如果不是初次上传,建议在【文件】面板中选择部分文件夹或文件进行上传,这样能够加快上传速度,对于上网速度比较慢的用户,更是应该如此。
第9步,当远程服务器为FTP服务器时,用户可以开启【FTP记录】面板,实时跟踪信息的传输情况。方法是在【结果】面板组中选择【FTP记录】面板,当连接到FTP服务器之后,该面板会不断滚动显示实时传输信息,如图13.20所示,如果了解FTP传输协议,则可以从中洞察到文件上传的更多信息。
图13.19 上传日志 图13.20 FTP记录
13.4.2 同步上传
文件同步就是Dreamweaver能够保持本地目录或远程目录中的文件都是最新修改的内容。这对于文件反复被上传而不知本地哪些文件是最新的用户来说,使用文件同步操作或许能够解决用户的困扰。实现站点文件同步的方法如下。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板。
第3步,在工具栏中单击【展开以显示本地和远端站点】按钮 ,然后在本地站点选中部分文件或者整个站点,如图13.21所示。
图13.21 在本地选择部分上传文件
第4步,单击【文件】面板中的【同步】按钮 。此时,Dreamweaver会打开【与远程服务器同步】对话框,如图13.22所示。
第5步,在【同步】下拉列表框中选择要同步的范围,有两种选择:同步选中的文件或者整个站点。然后在【方向】下拉列表框中选择同步的方法。
? 放置较新的文件到远程:上传到远程服务器上不存在或自从上次上传以来已更改的所有本地文件。
? 从远程获得较新的文件:下载本地不存在或自从上次下载以来已更改的所有远程文件。
? 获得和放置较新的文件:将所有文件的最新版本放置在本地和远程站点上。
第6步,如果在上传的同时,希望清除远程服务器上多余的文件(相对于本地目录),则可以选中【从远程获得较新的文件】复选框。
第7步,如果在【方向】下拉列表框中选择【获得和放置较新的文件】选项,则该复选框不可用。
第8步,如果在【方向】下拉列表框中选择【放置较新的文件到远程】选项,则该复选框显示为“删除本地驱动器上没有的远端文件”,此时选中该复选框,则将删除远程站点中没有相应本地文件的所有文件。
第9步,如果在【方向】下拉列表框中选择【从远程获得较新的文件】选项,则该复选框显示为“删除远端服务器没有的本地文件”,此时选中该复选框,则将删除本地站点中没有相应远程文件的所有文件。
第10步,单击【预览】按钮,此时Dreamweaver会自动检查本地和远程文件中哪个属于最新,并根据用户在【同步文件】对话框中设置进行反应。
第11步,如果每个选定文件的最新版本都已位于本地和远程站点并且不需要删除任何文件,则将显示提示对话框,提示无须进行任何同步。否则将显示【同步】对话框,允许用户是否把最新的文件上传到远程服务器,如图13.23所示。此时,可以在该对话框中选择是否上传、获取、删除和忽略。
图13.22 【与远程服务器同步】对话框 图13.23 【同步】对话框
第12步,若要更改特定文件的操作,请选择该文件,然后单击对话框底部的动作图标之一进行操作。用户也可以直接单击【确定】按钮同步所有文件,此时Dreamweaver将最新的本地文件自动上传到远程服务器上。
13.4.3 遮盖上传
遮盖就是排除某些文件夹或某类文件的操作。使用遮盖有什么好处呢?举一个简单的例子,在网站上传中,用户可能希望所有多媒体文件暂时先不上传,等待上网宽松时再继续上传,这时用户可以利用遮盖功能,把所有多媒体文件遮盖住,不允许其上传。这样能够加快网站上传的速度。当然遮盖功能不仅影响文件上传,还会影响获取、存回、取出和声称报告等操作。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板。
第3步,在默认状态下,站点遮盖功能是被启动的。用户可以关闭遮盖功能,如图13.24所示,当禁用站点遮盖功能之后,所有遮盖文件都会取消遮盖。当再次启用站点遮盖功能时,所有先前遮盖的文件将恢复遮盖。
第4步,在【站点设置对象js_site】对话框的【遮盖】分类选项中,用户可以设置要遮盖的文件类型,选中【遮盖具有以下扩展名的文件】复选框,然后在下面的文本框中输入要遮盖的文件类型,以扩展名来表示,例如,.png就表示遮盖站点中名称以.png结尾的所有文件。如果遮盖多个类型的文件,则应该使用空格分隔多个文件类型,不要使用逗号或分号。
第5步,启动遮盖功能之后,在本地或远程目录中选择一个或多个文件夹。
第6步,在右键菜单中选择【遮盖】|【遮盖】命令,即可对选中文件夹执行遮盖功能。此时一条红线将穿过受影响的文件夹以及内部文件,如图13.25所示,指示它们已被遮盖。注意,遮盖功能只能够作用于文件夹或某一类文件上面,不能作用于单个文件。
图13.24 设置遮盖 图13.25 遮盖的文件
第7步,用户可以在右键菜单中选择【全部取消遮盖】命令来取消所有文件的遮盖,但这不会禁用遮盖,而且无法重新遮盖所有先前被遮盖的文件夹和文件,除非对各个文件夹和文件类型逐个重新设置遮盖。
13.5 远 程 管 理
上传站点之后,就要对站点进行维护与管理了。站点管理不像上传站点那样一下子就能完成,它涉及站点文件的方方面面,是一个长期而繁琐的过程,专业站点管理人员几乎每天都要去做这些工作。
Dreamweaver提供的远程管理功能比较强大,操作也非常直观。Dreamweaver中的网站远程管理都可以在【网站管理器】窗口中完成。
13.5.1 认识网站管理器
在【文件】面板的工具栏中单击【展开以显示本地和远端站点】按钮 ,把【文件】面板切换到【网站管理器】窗口,如图13.26所示。
图13.26 【网站管理器】窗口
【网站管理器】窗口实际上就是【文件】面板的扩展视图,不过它是一个独立的网站管理工具,具有独立的窗口。从功能上讲【网站管理器】窗口与【文件】面板完全相同,但【网站管理器】窗口提供了更便于管理的视图和操作环境。
切换到【网站管理器】窗口时,用户就无法在Dreamweaver中进行网页编辑操作。
如果要编辑文档,需单击【展开以显示本地和远端站点】按钮 返回。如果【文件】面板被以浮动的方式显示,则切换到【网站管理器】窗口时,【网站管理器】窗口将覆盖Dreamweaver文档编辑窗口。
在【网站管理器】窗口中,所有操作命令和功能都可以在菜单栏中找到,实际菜单栏中每项都与【文件】面板的面板菜单是对应的。
工具栏集成了【文件】面板中的工具栏,但是把视图下拉选项设计为按钮形式,也是从操作的便利性考虑的。单击窗口工具栏中的【测试服务器】按钮 ,用户还可以查看测试服务器中的文件,如果单击【站点文件】按钮 可以返回远程视图。
13.5.2 操作远程文件
【网站管理器】窗口提供了可视化操作方式允许用户快速进行远程文件操作。在窗口左侧的【远程目录】列表框中,用户可以直观地查看远程服务器上的文件,并借助本地操作方式来操作远程文件。例如,复制、粘贴、删除、拖动。如果是宽带网的话,用户基本上感觉不到操作的延迟,犹如在本地自由地操作文件。
使用【网站管理器】窗口可以方便备份远程站点内容。在远程目录中选中指定文件或整个站点,单击工具栏中的【获取文件】按钮 ,从远程服务器下载文件(获取文件是与上传文件的反操作)。用户可以利用这个功能随时备份远程站点或部分文件,防止远程服务器因意外事故,而丢失网站数据。虽然一般服务商都会定期备份服务器,但是如果自己能够随时下载备份,这样会更放心。而对于团队协作开发中,这种做法更值得提倡。
在【网站管理器】窗口中准确定义远程文件。用户也许正在右侧列表框的本地目录中查看一些文件,想确知远程目录是否存在该文件,以及这些所在的位置。这时用户可以在本地选中文件,然后在窗口菜单栏中选择【编辑】|【远端站点中定位】命令,则Dreamweaver会自动帮助用户在左侧列表框中选中显示对应的文件。反之,用户可以在远程目录中选中文件,然后在窗口菜单栏中选择【编辑】|【本地站点中定位】命令会自动在本地目录中选中对应文件。这个功能对于网站结构复杂、内容繁多的站点来说,是一个不错的小功能。
另外,用户在【选择】菜单中选择【较新的本地文件】和【较新的远端文件】命令,可以分别在本地和远程目录中选中最新修改的文件。这在多人协作开发中是一个很重要的功能,这样用户可以快速知道远程服务器上哪些文件被同事修改过。
13.6 合 作 开 发
大型或商业网站一般都是团队合作的结晶,依靠个人的力量是远远不够的。例如,在一个团队中美工负责图样,设计师负责网页布局和前台效果设计,网页编辑负责内容的编排,开发人员负责后台逻辑开发,规模比较大的网站甚至还有网站策划、数据库开发和维护、网站测试评估等人员。多人共同操作一个网站,不可避免地会发生操作冲突问题,在这种情况下,如果一时疏忽或协调不好,很容易出现两个(或更多)人同时修改同一页面的情况,更新时相互覆盖,造成页面的混乱,甚至可能使得某人长时间的工作付之东流。因此,Dreamweaver提供了一套技术来保证团队开发中的协作问题。
13.6.1 远程文件存回和取出
存回和取出是Dreamweaver提供的一项技术,它可以保证一个文档在某个时间内只能够由一个人进行操作,其他人不允许进行操作。要启动存回和取出功能,必须在定义站点时在【远程信息】中设置勾选【启动存回和取出】功能。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,打开【文件】面板。
第3步,当需要编辑某个公共文件时,在【文件】面板的本地视图中选中该文件。
第4步,单击面板顶部的【取出文件】按钮 ,该文件图标后面会显示一个灰色的锁状标识( ),表示该文件处于只读状态,此时文件处于被锁定状态。这时在其他成员的站点内将会看到一个红色的√,表示该文件已经被他人编辑,同时可以查看到编辑者的姓名。
原则上Dreamweaver会禁止他人操作,如果真要操作,则给出一个提示对话框,提示是否覆盖取出者的操作。
第5步,如果取出者双击打开文件,则Dreamweaver会提示是否取出,如果单击【取出】按钮,则该文件就处于取出状态,此时该成员编辑的【文件】面板远程视图和本地视图中,取出文件图标后面会跟随一个绿色的√,表示该文件已经被取出,在【取出者】列中会显示该成员的姓名。
第6步,当在【远程信息】选项中选中【打开文件之前取出】复选框,则每当用户打开一个文件,Dreamweaver都会把该文件转换为取出状态,其他成员就无法打开该文件,这样能够防止用户在操作文件时忘记了单击【取出文件】按钮。
如果某个文件已经被其他成员取出,则用户就无法操作该文件,Dreamweaver会禁止操作。团队成员之间可以在【取出者】列单击取出者名称自动发送电子邮件以实现相互联系。
第7步,当编辑完毕之后,不要忘记把取出的文件存回,方法是选中存回的文件,单击【存回文件】按钮 ,存回操作实际上就是解锁该文件,以便其他成员能够继续操作。此时在该文件图标后面出现一个灰色的锁状标识( ),表示该文件处于只读状态。如果要取消只读属性,可以右击该文件,在弹出的快捷菜单中选择【取消只读属性】命令即可。
13.6.2 使用设计备注实现合作开发
设计备注相当于开发日志,是设计人员在设计过程中随手记录的心得和体会,以方便日后阅读程序,发现问题后便于维护。更重要的是团队成员之间通过设计备注可以交流心得、沟通信息。Dreamweaver支持设计备注功能。
1.启动站点设计备注
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【站点】|【管理站点】命令。
第3步,在打开的【管理站点】对话框中选择要启动设计备注的站点。
第4步,单击【编辑】按钮,打开【站点设置对象js_site】对话框。
第5步,在【高级设置】选项中选择【设计备注】选项,然后在右侧选中对应的选项,如图13.27所示。
? 如果选中【维护设计备注】复选框,可以在本地启动设计备注,Dreamweaver仅在本地维护设计备注,但不将这些备注与站点文件一起上传。
? 如果选中【启用上传并共享设计备注】复选框,则Dreamweaver会自动将与站点关联的设计备注与其余的文档一起上传。以便与其他成员共享设计备注。当下载文件时,Dreamweaver也会自动获取相关的设计备注文件,以便了解其他成员的设计心得或开发信息。当然如果网站由自己独立开发,就没有必要选择该选项了,这样能够提高文件传输的性能。
? 如果要删除所有设计备注文件,只需要单击【清理设计备注】按钮即可,Dreamweaver会自动删除站点的所有本地设计备注文件。
2.为文件创建设计备注
用户可以为任何文件创建设计备注,如模板文件、图像、Flash等,甚至还可以为网页中的Applet、ActiveX 控件、图像、Shockwave 对象等创建设计备注。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【文件】命令,在【文件】面板中打开一个文件,然后在面板菜单中选择【文件】|【设计备注】命令,或者在右键菜单中选择【设计备注】命令,打开【设计备注】对话框,如图13.28所示。
第3步,在【基本信息】选项卡的【状态】下拉菜单中选择一种文档的状态(如草稿、保留1、保留2、保留3、alpha、beta、最终版和特别注意)。
第4步,单击日期图标( )为备注添加当前本地日期。然后在【备注】文本区域中输入备注信息。选中【文件打开时显示】复选框,则在每次打开文件时显示设计备注文件。
第5步,切换到【所有信息】选项卡中,可以增加多条消息,以便其他会员补加信息。单击 按钮可以添加新的名/值对,如图13.28所示。
图13.27 设计备注 图13.28 添加备注
第6步,单击【确定】按钮即可。Dreamweaver 将创建的备注保存到名为_notes的文件夹中(隐藏状态),与当前文件处在相同的位置。文件名是文档的文件名加上.mno扩展名。例如,如果文件名是index.html,则创建的设计备注文件名为index.html.mno。
3.阅读设计备注
如果在创建设计备注时选中【文件打开时显示】复选框,则当该文件被打开时,会自动打开【设计备注】对话框。如果没有则可以选择【文件】|【设计备注】命令,打开【设计备注】对话框。
13.6.3 使用自定义列实现合作交互
团队开发中的信息交互和沟通是件很重要的事情。毕竟在多人组成的开发小组中,各自独处一隅,甚至身在天涯海边,虽说各种通信工具发达(如电话、E-mail、QQ、MSN、传真等),相互之间的联系也比较快速,但是比较麻烦。
使用设计备注来实现相互沟通,但是它还不够直观,适合慢时交流,不适合即时应答或提示。这时团队内部不妨利用【文件】面板的自定义列来实现即时提示效果。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【站点】|【管理站点】命令,打开【管理站点】对话框。
第3步,选择预定义的站点,然后单击【编辑】按钮,打开【站点设置对象js_site】对话框。
第4步,在【高级设置】选项中选择【文件视图列】选项。
第5步,单击 按钮,则Dreamweaver会自动生成一个untitled列,在【列名称】文本框中输入列的标题,该名称将显示在【文件】面板的列标题栏中。
第6步,在【与设计备注关联】下拉列表框中选择一个值,或者输入一个值(建议输入与列名称一致的值),这样好在【设计备注】中查看或修改其值。
第7步,在【设计备注】中修改自定义列的值,也可以在自定义列中修改【设计备注】中的名/值对,如图13.29所示。这样在【文件】面板中查看Dreamweaver站点时,有关文件和文件夹的信息将在列中显示。
第8步,在【对齐】下拉列表框中选择列标题和列信息的对齐方式。选中【显示】复选框保证该列被显示在【文件】面板中。
图13.29 自定义列
第9步,选中【启用列共享】和【与该站点所有用户共享】复选框,这时Dreamweaver会提示用户开启站点设计备注功能,并保证共享设计备注。
第10步,还可以更改列的排列顺序、隐藏列(文件名列除外)、删除列(仅限自定义的列)、重命名列(仅限自定义的列)、建立列与设计备注的关联(仅限自定义的列)。增加自定义列时最多允许增加10列。
13.7 站点测试和维护
在建立远端站点并将其声明为可浏览之前,应在本地机上对本地站点进行完整的测试,使网页在浏览器中显示出预期的效果。测试的主要内容包括检验网页与目标浏览器的兼容性、在浏览器中预览网页、检验下载的时间和网页文件的大小等。
测试实际上就是模拟用户访问站点的过程,从中发现问题并对设计加以改进。站点测试和维护是网站开发中一项不可或缺的环节。许多成功的经验表明,让不是很熟悉计算机的人来参加站点的测试工作,效果非常好。这些人会提出许多专业人员没有顾及到的问题或一些好的建议。
13.7.1 检查断开链接
网站开发的过程就是不断重新设计、重新组织的过程,修修补补、涂涂改改是经常的事情,也许某个链接的页面已被移动或删除,但是链接还存在。因此用户应该使用【链接检查器】对站内所有链接进行测试。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【窗口】|【结果】命令。
第3步,在Dreamweaver主窗口底部将打开【结果】面板组,从中选择【链接检查器】面板,如图13.30所示。
第4步,按图中的提示进行操作,即可快速检查站点内所有断开的链接。也可以在菜单中选择【站点】|【检查站点范围的链接】命令快速进行操作,检测的结果将显示在【链接检查器】面板中。
图13.30 【链接检查器】面板
第5步,发现问题之后,就应该赶紧修复,这里有两种方法可以实现。
第一,直接在【链接检查器】面板中修复断开的链接和图像引用。方法是在【断开的链接】列中(而不是【文件】列)单击断开的链接,此时链接处于可编辑状态,然后在其中设置正确的链接路径即可。
第二,在【属性】面板中修复的链接和图像引用。方法是先在【文件】列中双击打开文件,在编辑窗口中会以【代码】视图自动选中显示断开的链接,此时用户在【属性】面板中修复链接即可。这种方法的优势是可以单击【属性】面板中【链接】文本框右侧的文件夹图标,进行快速选择修复。
第6步,如果在同一文件中还有其他断开的链接,Dreamweaver会提示修复其他文件中的这些引用。单击【是】按钮,Dreamweaver 将更新列表中引用此文件的所有文档。
第7步,如果网站开启了【启用存回和取出】功能,则Dreamweaver将尝试取出需要更改的文件。如果不能取出文件,则Dreamweaver将提示不能更改断开的引用。
13.7.2 检查孤立文件
孤立的文件就是那些文件本身还在站内,但是站内没有任何文件链接到该文件。孤立的文件很多时候是在操作中遗忘的废的文件,对于这些无用的垃圾一定要清理出去,否则会占用空间和带宽,不利于网站的维护和管理。
孤立的文件是不会被访问的,除非用户直接访问该文件,例如,新闻的目录页。但是并不是所有孤立的文件都是废文件,有些文件虽然自己没有被别的文件链接,但是它却链接着别的文件。此种情况下,操作时就应该小心了,最好是打开文件看看页面内容,避免误删文件。
查找孤立的文件可以在【链接检查器】面板中实现。
【操作步骤】
第1步,启动Dreamweaver。
第2步,在【链接检查器】面板中单击【检查链接】按钮 ,然后在检查类型下拉菜单中选择【孤立的文件】选项,Dreamweaver将显示没有孤立的文件。
第3步,选中要删除的文件,然后按Delete键即可快速删除。
? 提示:对于孤立的图像文件来说,可以大胆地删除,但是对于网页文件,建议最好打开看看所包含的内容,再决定是否删除。
13.7.3 验证Web标准
Dreamweaver提供验证程序,能够快速验证站点内所有标签是否存在语法错误。该验证程序可以检测的语言包括HTML、XHTML、CFML(ColdFusion标记语言)、WML(无线标记语言)和XML等。
1.设置验证程序
在启动验证程序之前,用户最好在【首选参数】对话框中设置验证程序的首选参数。
【操作步骤】
第1步,启动Dreamweaver。
第2步,选择【编辑】|【首选参数】命令,打开【首选参数】对话框。
第3步,在左侧【分类】列表中选择【W3C验证程序】分类项,即可在右侧设置验证程序的参数,如图13.31所示。
图13.31 设置要验证参照的标签库
第4步,设置要验证参照的标签库,同一标签库或语言只能选择一个版本。
第5步,单击【管理】按钮,可以在打开的对话框中选中要在验证程序报告中包含的错误和警告类型。
2.验证站点标签
在【结果】面板组中选择【验证】面板,然后单击面板左侧的【验证】按钮,从弹出的下拉菜单中选择【验证当前文档】选项,则Dreamweaver会自动对当前文档进行标签的语法验证,如图13.32所示。
所有检测到的记录分类说明如下。
? 如果前面标识图标显示为 ,则表示该记录是一条语法错误,用户可以根据指示的文件名、所在的行,以及错误描述进行修复。Dreamweaver暂时还没有提供自动修复功能,所以还需要用户手动逐条修改。有些错误可能是因为用户设置的验证版本较低,而该版本还支持这种语法功能,所以应根据实际需要酌情选择修改。修改时,直接双击【文件】列的文件名,Dreamweaver会自动打开该文件,在【拆分】视图下选中显示错误的标签或属性。
? 如果前面标识图标显示为 ,则表示该记录是一条非标准的用法,Dreamweaver提出警告,建议不要使用,最好能够修复。
图13.32 验证整个当前本地站点
? 如果前面标识图标显示为 ,则表示该记录是一条消息,Dreamweaver提示该用法已经过时,或将被淘汰,建议避免使用。
? 如果前面标识图标显示为 ,则表示该记录是一条嵌套错误,Dreamweaver会提示用户在使用时标签嵌套出现错误,例如,缺少封闭标签,或者嵌套的层次不正确。因此用户应该及时修复过来。对于IE浏览器来说,它会很智能地帮助用户进行纠错显示,但是对于其他标准浏览器来说,就会认为这是一个错误而不予解析。
如果在【验证】面板左侧单击【浏览报告】按钮 ,则Dreamweaver会自动生成报告,以网页的形式把所有记录列出来,这样用户可以在放大的窗口中预览所有验证信息。
3.站点报告
站点报告是Dreamweaver提供的另一个站点验证工具,该工具能够允许用户有选择地进行验证,这样能够使验证工具更具目的性。
【操作步骤】
第1步,启动Dreamweaver。
第2步,在【结果】面板组的【站点报告】面板中单击左侧的【报告】按钮 ,用户也可以选择【站点】|【报告】命令。
第3步,打开【报告】对话框,如图13.33所示。在该对话框中可以自定义要验证的项目,并进行流程控制。
第4步,在【报告在】下拉列表框中选择要报告的内容,并设置要运行的任意一种报告类型(工作流程或HTML)。只有在【文件】面板中已经有选定文件的情况下,才能运行【站点中的已选文件】报告。
第5步,如果选择了工作流程报告,单击【报告设置】按钮进行设置,如果选择不止一个工作流程报告,则对每个报告都需要单击【报告设置】按钮进行设置。其中几个选项说明如下。
? 取出者:创建一个报告,列出某特定小组成员取出的所有文档。
? 设计备注:创建一个报告,列出选定文档或站点的所有设计备注。
? 最近修改的项目:创建一个报告,列出在指定时间段内发生更改的文件。
第6步,如果选择HTML报告,则可以进行如下选择。
? 可合并嵌套字体标签:列出所有可以合并的嵌套字体标签以便清理代码。例如,STOP!将被显示出来。
? 没有替换文本:列出所有没有设置替换文本的img标签,即没有设置alt=""或title=""属性的
标签。在纯文本浏览器或设为手动下载图像的浏览器中,替换文本将替代图像出现在应显示图像的位置。
? 多余的嵌套标签:列出应该清理的嵌套标签。例如,abcefghij。
? 可移除的空标签:列出所有可以移除的空标签以便清理HTML代码。例如,可能在【代码】视图中已删除了某项或某个图像,却留下了应用于该项的标签。
? 无标题文档:列出在选定参数中找到的所有无标题的文档。Dreamweaver 报告所有具有默认标题、重复标题或缺少标题标签的文档。
4.清理标签
选择【命令】|【清理HTML】命令,将打开【清理HTML/XHTML】对话框,使用该对话框则可以快速清除当前文档中的指定标签或者错误、不规范的标签,如图13.34所示。
图13.33 【报告】对话框 图13.34 【清理HTML/XHTML】对话框