第7章 站点管理、模板和库

第7章站点管理、模板和库•7.1【案例43】管理站点和文件链接•7.2【案例44】“Dreamweaver8工作区简介”网页•7.3【案例45】“爱犬之家”网页•7.4【案例46】检查与修改网站•7.5【案例47】设置服务器与发布站点•7.6【案例48】创建和使用模板•7.7【案例49】创建和使用库项目•7.1【案例43】管理站点和文件链接•1．利用“属性”栏内“链接”栏的指向图标创建链接•（1）在网页编辑窗口内，同时打开要建立链接的源文件和要链接的目标文件（HTML文件），如图所示。•（2）选中建立链接的源文件中的文字或图像等对象。•（3）用鼠标拖曳文字或图像“属性”栏内“链接”栏的指向图标，到图中右边网页编辑窗口内。这时会产生一个从指向图标指向目标文件的箭头。然后松开鼠标左键，即可完成链接。•2．利用“属性”栏内“链接”栏的文本框和按钮创建链接•（1）用鼠标拖曳选中源文件中要链接的文字或单击选中要链接的图像等对象。•（2）单击“属性”面板中的“链接”栏中的【文件夹】按钮，调出“选择文件”对话框，利用该对话框选择要链接的HTML文件或图像文件（即目标文件）。也可以直接在文本框内输入要链接的HTML文件或图像文件的路径与文件名。使用路径时一定注意相对路径与绝对路径的使用方法，通常最好使用相对路径。•3．利用“文件”面板创建链接•（1）调出“文件”面板，使要链接的目标文件名字出现在“文件”面板内。同时在网页编辑窗口内打开建立链接的源文件。•（2）选中网页编辑窗口内建立链接的源文件中的文字或图像等对象（例如，用鼠标单击选中图中左边网页编辑窗口内的图像）。•（3）用鼠标拖曳文字或图像“属性”栏内“链接”栏的指向图标，移到图中“文件”面板内要链接的目标文件（HTML1.htm）。这时会产生一个从指向图标指向目标文件的箭头。当目标文件名字周围出现矩形框时，松开鼠标左键，即可完成链接。•7.2【案例44】“Dreamweaver8工作区简介”网页•1．设置锚点的方法•在页面内设置锚点的方法如下所述。•（1）单击页面内要设置锚点的地方，将光标移至此处。再单击“插入”（常用）面板内的【命名锚记】按钮，调出“命名锚记”对话框。•（2）在“锚记名称”文本框内输入锚点的标记名称（例如：标尺）。再单击【确定】按钮，退出该对话框。同时，在页面光标处会产生一个锚点标记。如果看不到该标记，可单击选中“查看”→“可视化助理”→“不可见元素”（或“隐藏所有”）菜单选按钮。•在浏览器内不会显示锚点标记。•2．建立对象与锚点的链接•选中页面内的文字或图像等对象，再按照下述的方法之一建立它们与锚点的链接。•（1）在“属性”栏内的“链接”文本框内输入“#”和锚点的名字。例如：输入“#标尺”，即可完成选中的文字或图像等对象与锚点的链接。•（2）用鼠标拖曳“链接”栏的指向图标到目标锚点上，如图所示，再松开鼠标左键，即可完成选中的文字或图像与锚点的链接。•3．创建图像热区的方法•图像映射图也叫图像热区，即在源文件内的图像中划定一个区域，使该区域与目标HTML文件产生链接。图像热区可以是矩形、圆形或多边形。创建图像热区应先选中要建立图像热区的图像，再利用“插入”（常用）面板的“图像”菜单中的绘制热点工具或图像的“属性”栏（见图）内的“地图”栏的绘制热点工具来建立图像热区。•（1）使用“插入”（常用）面板创建热区的方法如下。•创建矩形或圆形热区：单击“插入”（常用）面板中“图像”菜单中的【绘制矩形热点】按钮或【绘制椭圆热点】按钮，然后在图像上使用拖曳的方法绘制矩形或圆形热区。•创建多边形热区：单击“插入”（常用）面板中“图像”菜单中的【绘制多边形热点】按钮，然后将鼠标指针移到图像上，鼠标指针会变为“十”字形，用鼠标单击多边形上的一点，再依次单击多边形的各个转折点，最后双击起点，即可形成图像的多边形热区。•（2）使用“属性”面板创建热区的方法如下。•创建矩形或圆形热区：单击图像“属性”栏内的【矩形热点工具】按钮或【椭圆热点工具】按钮，然后将鼠标指针移到图像上，鼠标指针会变为“十”字形。用鼠标从要选择区域的左上角向右下角拖曳，即可创建矩形或椭圆形热区。•创建多边形热区：单击图像“属性”栏内的【多边形热点工具】按钮，然后将鼠标指针移到图像上，鼠标指针会变为“十”字形，用鼠标单击多边形上的一点，再依次单击多边形的各个转折点，最后双击起点，即可形成图像的多边形热区。•创建热区的图像上会蒙上一层半透明的蓝色矩形、圆形或多边形，如图所示。•4．图像热区的编辑•图像热区的编辑就是改变图像热区的大小与位置，以及删除热区。•（1）选取热区：单击图像“属性”栏内的【指针热点工具】按钮，再单击热区，即可选取热区。选中圆形或矩形热区后，其4周会出现4个方形的控制柄。选中多边形热区后，其4周会出现许多方形的控制柄。•（2）调整热区的大小与形状：选中热区，再用鼠标拖曳热区的方形控制柄。•（3）调整热区的位置：选中热区，再用鼠标拖曳热区，即可调整热区的位置。•（4）删除热区：选中热区，然后按【Delete】键，即可删除选中的热区。•5．给热区指定链接的文件•（1）选中热区。这时“属性”栏变为图像热区“属性”栏。•（2）利用其中的“链接”栏，可以将热区与外部文件或锚点建立链接。•7.3【案例45】“爱犬之家”网页•1．创建电子邮件链接•电子邮件链接是，单击电子邮件链接文字或图像等对象时，可以打开邮件窗口。在打开的邮件程序窗口（通常是OutlookExpress）中的“收件人”文本框内会自动填入链接时指定的E-mail地址。在选定源文件页面内的文字或图像后，建立电子邮件链接的方法有两种，具体操作如下所述。•（1）在其“属性”栏内“链接”文本框内输入：“mailto：”加E-mail地址，例如：“mailto：[e-mail]”。•（2）单击“插入”（常用）面板内的“电子邮件链接”图标按钮，调出“电子邮件链接”对话框，如图所示。•然后，在“电子邮件链接”对话框内的“文本”文本框中输入链接的链接文字，“E-mail”文本框中输入要链接的E-mail地址，例如：“mailto：[e-mail]”。单击【确定】按钮，即可完成插入电子邮件链接的操作。•2．创建无址链接•无址链接是指产生链接，但不会跳转到其他任何地方的链接。它并不一定是针对文本或图像等对象，而且也不需要用户离开当前页面，只是使页面产生一些变化效果，即产生动感。•这种链接只是链接到一个用JavaScript定义的事件。例如，对于大多数浏览器，鼠标指针经过图像或文字等对象时，图像或文字等对象不会发生变化（能发生变化的事件是OnMouseOver事件），为此必须建立无址链接才能实现OnMouseOver事件。在Dreamweaver8中的翻转图像行为就是通过自动调用无址链接来实现的。•建立无址链接的设计过程是：单击选择页面内的文字或图像等对象，然后在其“属性”栏的“链接”文本框内输入“#”号。•3．创建脚本链接和远程登录•（1）创建脚本链接：脚本链接与无址链接类似，也是指产生不会跳转到其他任何地方的链接，它执行JavaScript或VBScript代码或调用JavaScript或VBScript函数。这样，可以在不离开页面的情况下，为用户提供更多的信息。建立脚本链接的设计过程如下。•选择页面内的文字或图像等对象。然后，在其“属性”栏的“链接”文本框内输入“javascript:”加JavaScript或VBScript的代码或函数的调用。例如：选中“脚本链接”文字，再在“链接”文本框内输入“javascript：alert（'脚本链接的显示效果'）”。•存盘后按【F12】键，在浏览器中会显示“脚本链接”链接文字，单击链接文字后，屏幕显示一个有文字“脚本链接的显示效果”的提示框。•（2）远程登录：远程登录是指单击页面内的文字或图像等对象，即可链接到Internet的一些网络站点上。远程登录的设计过程是：选择页面内的文字或图像等对象，再在其“属性”栏的“链接”文本框内输入“telnet://”加网站站点的地址。•7.4【案例46】检查与修改网站•1．设置预览功能•在Dreamweaver8中可以设置20种浏览器的预览功能，前提是计算机内应安装了这些浏览器。浏览器预览功能的设置步骤如下所述。•（1）单击“编辑”→“首选参数”菜单命令，调出“首选参数”对话框。在该对话框的“分类”栏内选择“在浏览器中预览”选项，此时该对话框右边部分如图所示。•（2）在“浏览器”栏的显示框内列出了当前可以使用的浏览器。单击按钮，可以删除选中的浏览器。单击按钮，可以增加浏览器。•（3）单击按钮，可调出“添加浏览器”对话框，如图所示。在“名称”文本框内输入要增加的浏览器的名称，在“应用程序”文本框内输入要增加的浏览器的程序路径。再设置成默认的浏览器，再单击【确定】按钮完成设置。•（4）完成设置后，单击“参数选择”对话框中的【确定】按钮，退出“参数选择”对话框。•（5）单击“查看”→“工具栏”→“文档”菜单命令，调出“文档工具”栏，单击“文档工具”栏中的“在浏览器中预览/调试”按钮，可以看到菜单中增加了新的浏览器名称。•（6）选中“首选参数”对话框中的“使用临时文件预览”复选框，可为预览和服务器调试创建临时拷贝。如果要直接更新文档，可撤销对此复选框的选择。•当在本地浏览器中预览文档时，不能显示用根目录相对路径所链接的内容（除非选中了“用临时文件预览”复选框）。这是由于浏览器不能识别站点根•目录，而服务器能够识别。若要预览用根目录相对路径所链接的内容，可将•此文件放在远程服务器上，然后单击“文件”→“在浏览器中预览”菜单命令来查看它。•在网页编辑窗口状态下，按【F12】键，可以启动第一浏览器显示网页，按【Ctrl+F12】组合键可以启动第2个浏览器显示网页。•2．设置链接速度•（1）单击“编辑”→“首选参数”菜单命令，调出“首选参数”对话框，再选中“分类”栏中的“状态栏”选项。此时的“参数选择”对话框（右边部分）•（2）在“参数选择”对话框“状态栏”栏内选择连接速度为56kb/s，系统将以这个速度来估计当前的下载时间。还可以利用它选择窗口的大小。•7.5【案例47】设置服务器与发布站点•1．防火墙参数的设置•如果前面选中了“使用防火墙”复选框，则在连接远程服务器以前，应进行防火墙参数的设置。防火墙参数的设置方法如下所述。•（1）单击“编辑”→“首选参数”菜单命令，调出“首选参数”对话框，再单击选中该对话框内“分类”列表框中的“站点”选项，此时该对话框。•（2）在该对话框右边的“防火墙主机”文本框内输入服务器的地址。•完成上述设置后，单击界面上的【测试】按钮，如果设置正确，则会调出一个提示框，提示连接FTP服务器成功；如果出错，则再根据出错提示进行相关设置的更改，进行设置更改后再进行测试，直至测试成功，能够成功地连接到Web服务器为止。单击【确认】按钮，返回“管理站点”对话框。再单击【完成】按钮，返回“站点”窗口。在上述设置完成后，即可向远程服务器发布站点。•2．文件下载和刷新•（1）文件下载：如果本地站点丢失了文件或文件夹，可将服务器中的文件下载到本地站点，方法如下。•在“站点”窗口左边的列表框内，选中要下载的文件和文件夹。然后，单击“站点”窗口工具栏内的【获取文件】按钮，或者用鼠标将选中的文件和文件夹拖曳到“站点”窗口右边列表框内。这时屏幕会显示一个提示框，询问是否将文件的附属文件一起下载，单击【是】按钮，即可下载选中的文件和文件夹到本地站点。•（2）文件刷新：当本地站点中的一些文件进行了编辑和修改（只要双击要编辑的文件即可打开一个新的网页编辑窗口并显示该文件，以供编辑），可以利用刷新操作将更新后的文件上传到服务器中，使服务器中的文件与本地站点的文件一样。文件刷新的设计过程是：单击“站点”窗口内的【刷新】按钮。•7.6【案例48】创建和使用模板•1．自动更新•模板可以更新，例如，改变可编辑区域和不可编辑区域，改变可编辑区域的名字，更