Dreamweaver 模板
在将 HTML 页面另存为模板时,Dreamweaver 将在本地根文件夹的根目录级别创建一个模板文件夹,并生成一个 .dwt 文件,该文件将成为对其应用的所有页面的源。每次将 HTML 页面应用于模板(“文件”>“从模板新建”或“修改”>“模板”>“应用模板到页”)时,都会创建一个指向 .dwt 文件的站点根目录相对链接。此站点相对链接之所以始终能正确链接,原因是 .dwt 文件始终位于站点文件夹结构的根目录级别的 Templates 文件夹中。如果 .dwt 文件从 Templates 文件夹中移走,或者如果 Templates 文件夹被移动或重命名,链接将会断开。将 .dwt 文件保留在 Dreamweaver 创建该文件时使用的 Templates 文件夹中非常重要。为避免混淆,最好不要在 Templates 文件夹中保存您的站点的其他元素(图像源文件或 HTML 文档)。
页面如何链接到模板文件?
将文件应用于现有页面或从模板新建页面时,会在源中插入以下代码:
<!-- #BeginTemplate "/Templates/templateName.dwt" -->
要查看 Dreamweaver 生成的 HTML 源代码,请选择“窗口”>“HTML”。
以上路径将替换常规 HTML 源显示在新页面上。系统并不从新文件将生成的常规标记开始,而是指定在本地根文件夹内的一个级别,在名为 Templates 的文件夹中存在一个 .dwt 文件,其中包含不在该页面可编辑区域之内的所有信息。此路径指示浏览器在正确的位置查找特定文件,该文件将提供页面属性、布局和图形等所有只存在于 .dwt 文件中的内容。正因如此,页面可编辑区域之外的更改必须直接在 .dwt 文件中进行。当 .dwt 文件本身被打开和修改时,应用于模板的所有页面将链接到与之前相同位置处的文件。应用于模板的所有页面都将自动更新新信息。
文档相对与站点根目录相对
将 HTML 页面链接到模板的路径是站点根目录相对路径。之所以称为站点根目录相对路径,是因为它从目录结构的顶层级别(本地根文件夹)开始,通过下一层文件夹 (Templates) 向下,最后链接到 .dwt 文件。Dreamweaver 会自动生成指向 Templates 文件夹中的模板的站点根目录相对路径,因为它准确知道在何处查找模板,而不管站点结构中存在其他什么样的文件夹。
文档相对路径创建特定从一个文件指向另一个文件的路径。它不从文件夹结构的顶层级别(站点根目录)开始,而是生成从一个文件开始,通过任何必要的文件夹(目录),在另一个文件位置停止的路径。在创建从一个文件到另一个文件的文档相对链接之前,两个文件必须保存在本地根文件夹中。
如果您希望能够在本地通过浏览器预览页面,则在将文件上载到远程服务器之前,必须采用文档相对路径。Internet Explorer 和 Netscape 浏览器都无法了解定义的本地根文件夹(Dreamweaver 可以),因此只能遵循相对于其当前正在查看的文档的路径。由于大多数用户喜欢在上载之前在本地通过浏览器查看页面,因此每当链接文件或插入图像时,Dreamweaver 都默认采用文档相对路径。如果在尝试插入图像或链接到其他 HTML 页面之前没有保存文件,Dreamweaver 没有当前页面位置的引用,因而将生成类似如下情况的路径:
file:///HardDrive/Desktop Folder/localRootFolder/subfolder/subfolder/images/content.htm
或
file:///C:/Desktop/localRootFolder/subfolder/subfolder/images/content.htm
这些路径只特定于您的工作站,在您将文件上载到远程服务器时,它们不起作用。
下图提供了文档相对与站点根目录相对之间差别的图解说明。在下面的示例中,使用备用路径选项为页面 bio.htm 插入了名为 logo.jpg 的图形。
|
模板中的文档相对路径
直接在 .dwt 文件中插入图像和链接可能导致混淆。请记住,在 .dwt 文件中操作时,您创建的任何文档相对链接都是完全相对于 .dwt 文件的。生成的路径特定从该 HTML 页面或图像源指向 .dwt 文件。Dreamweaver 将保留引用页面应用于模板的位置的实时记录,并将自动调整所引用的 HTML 文件的路径,使其对于当前页面而言是正确的。如果您查看 .dwt 和应用于模板的页面的 HTML 源,会发现路径不相同,这是正确的。如果 Dreamweaver 不针对每个页面的特定位置自动调整路径,文档相对路径将在除 .dwt 文件外的所有文件中都断开。
以下是 Dreamweaver 可能调整文档相对路径的方式的示例:
模板中指向图形的原始路径: |
../graphics/images/banner.gif |
应用于模板的页面中经过调整的路径: |
../../graphics/images/banner.gif |
Dreamweaver 不调整模板中指向应用于模板的页面的站点根目录相对路径或绝对路径 (http://),因为它们不需要修改。
应用于模板的页面中的文档相对路径
在附加到模板的页面的可编辑区域中插入图像和链接与在未附加到模板的页面中插入图像或链接操作完全相同。如果在创建指向其他页面或图像的任何链接之前,您按照选择“文件”>“从模板新建”,然后选择“文件”>“保存”(选择本地根文件夹内的位置)的过程操作,Dreamweaver 将在“选择 HTML 页面”或“选择图像源”对话框中默认选择文档相对路径。只要不将“相对于”弹出菜单手动更改为选择“站点根目录”,当您在本地通过浏览器预览工作时,图像和链接都将可用。
模板中的站点根目录相对路径
在模板文件中操作以创建指向其他页面的链接或引用图形的图像源时,“选择 HTML 文件”和“选择图像源”对话框中的弹出菜单让您可以在文档相对与站点根目录相对之间进行选择。如上图所示,选择“站点根目录”将创建一个从本地根文件夹直接指向所选文件的路径,而不受 Dreamweaver 中当前打开的 .dwt 文件约束。当站点目录结构中的内容可能在本地根文件夹内移动时,使用站点根目录相对链接很有好处,因为即使文件从其原始位置移走,链接仍将保持完整。
模板中指向图形的原始路径: |
/graphics/images/banner.gif |
应用于模板的页面中的路径: |
/graphics/images/banner.gif |
Dreamweaver 不调整模板中指向应用于模板的页面的站点根目录相对路径或绝对路径 (http://),因为它们不需要修改。文档(不管是 .dwt 文件还是附加到模板的 HTML 文件)的位置与站点根目录相对路径没有关联。
应用于模板的页面中的站点根目录相对路径
如果站点很复杂、需要开发团队携手合作,或其站点目录结构将会定期修改,则使用站点根目录相对链接很有用。要创建站点相对链接,只需在“选择图像源”或“选择 HTML 文件”对话框中,从“相对于”文字旁边的弹出菜单中选择“站点根目录”。
由于创建的路径将从本地根文件夹开始,通过若干子文件夹,最后在其链接到的页面或图像处结束,因此开发人员能够灵活地将页面或资源在站点目录结构中上移一个或多个子文件夹,而不断开链接。例如在上图中,如果将 logo.jpg 文件从 images 文件夹移动到 features 文件夹,并且链接是站点根目录相对链接,则浏览器仍然能轻松找到图形。如果路径是文档相对链接,logo.jpg 和 bio.htm 文件必须仍然位于创建文档相对路径时它们所在的文件夹结构中。在路径创建之后移动任一文件都将导致路径断开。
如上所述,只有文档相对链接可以在本地通过浏览器预览。如果您选择使用站点根目录相对链接,只有两种方法可以在浏览器中查看页面。
第一种是将文件上载(放置)到远程服务器上,然后通过在 URL 定位器字段中键入绝对路径来使用浏览器转到页面。使用此方法,所查看的页面就像 Web 上的其他人看到的一样。要修改页面,请打开文件的本地副本,进行更改,保存 HTML 页面,连接到 FTP 服务器,然后将新文件“放置”到远程服务器上。相同文件夹中名称相同的文件将覆盖远程服务器上的旧版文件。
第二种在浏览器中预览站点相对链接的方法是使用个人 Web 服务器。仅在 Windows 中,通过进入 Dreamweaver,使用“文件”>“在浏览器中预览”>“编辑浏览器列表”并选择“使用本地服务器预览”,可以设置此种选择。设置此种选择将使 Dreamweaver 可以利用个人 Web 服务器预览文档。
注意:对于 Macintosh,个人 Web 服务器在系统级别设置。查阅系统文档以获取更多帮助。