Dreamweaver课件：第11章

第11章使用模板和库项目11.1创建站点网页模板11.1创建站点网页模板所谓“模板”，实际上就是一些标准的页面，它有着固定的模式。例如页面的布局、文字的排列方式等。用户在制作时只需要修改其内容，这样根据模板可以生成大量相同的页面。使用模板创建文档可使站点具有统一的结构和外观。使用模板可以一次修改若干页面，而不用对新页面逐个设置其属性。在创建模板时，可以指定页面的修改区域，便于以后的修改。甚至还可以在将模板应用于文档之后重新修改模板。此外，对于网页制作不太熟悉的人员，可以套用现成的模板，轻松制作漂亮的网页。11.1.1常见网页模板区块分割方法对模板内容分区，主要意义是区分可编辑区域和不可编辑区域。可编区和不可编示意图可编辑区域和不可编辑区域的区分方法并不是有一个统一的模式，而是根据网页具体的布局情况来决定的。上方的标题栏、菜单栏和下方的联系区域是作为不可编辑区域，中间的内容部分是作为可编辑区域，根据不同的版面更换不同的内容。11.1.1常见网页模板区块分割方法实例示范11.1.2新建网页模板创建模板有两种方法：一种是修改已有的HTML文档使之适合新的需要，另一种是从空白HTML开始，从头创建。•提示：模板可以自动保存在站点的本地根目录下的Templates文件夹内。当创建一个新模板时，如果没有Templates文件夹，则Dreamweaver会自动创建一个。实例（1）：创建网页模板操作步骤：（1）定义站点并打开网页（2）将已有文档另存为模板（3）新建空白模板•提示：编辑模板的操作和编辑HTML文档基本一致。用户可以考虑先使用设计视图和布局视图进行布局设计，然后填入一些固定不变的内容。11.1.2新建网页模板站点目录11.1.3定义模板的可编辑区域Dreamweaver模板有两种类型的区域：可编辑区域和锁定区域（又称“不可编辑区域”）。可编辑区域是模板中具有可变内容的部分，锁定区域则是模板中具有静态不变内容的部分。在默认状态下，模板是锁定的。要使模板有用，必须创建可编辑区域，将已有内容标记为可编辑，或添加新内容并将其标记为可编辑。当编辑模板自身时，可编辑区域和锁定区域均可以修改。但是在模板应用于文档之后，就只能修改文档可编辑区域中的内容。锁定区域是不可编辑的。定义可编辑区域的方法有两种：将已有内容定义为可编辑区域和创建新的可编辑区域。实例（2）：定义模板的可编辑区域操作步骤：（1）将已有内容定义为可编辑区域（2）定义新的可编辑区域•提示：在给可编辑区域命名时，不要使用撇号(`)、左右尖括号()、单引号(‘)、双引号(“)和&符号。最好也不要使用中文。•提示：可以标记整个表格也可以标记表格中的某个单元格作为可编辑区域。但是，不能一次标记若干个单元格。层和层中的内容是分离的元素，它们都可以被标记为可编辑区域。层被标记为可编辑之后就可以随意改变其位置，而层的内容被标记为可编辑区域之后则可以任意修改层的内容。•提示：模板被应用于文档之后，可以使用文本、图像或其他内容替换占位符。在模板中，可编辑区域突出显示淡蓝色的外框。但是，可编辑区域和锁定区域都可以编辑。在使用模板的文档中，只能修改淡蓝色外框内的可编辑区内容。整个文档将以淡黄色外框环绕，在右上角将显示模板名称。11.1.3定义模板的可编辑区域效果图11.1.4取消区域标记“取消区域标记”，就是删除模板的可编辑区域。如果在将某区域标记为可编辑区域之后又改变注意，想将其标记为不可编辑区域，则可以使用“删除模板标记”命令。实例（3）：取消区域标记操作步骤：①在“资源”面板中双击“lsdq2.dwt”文件，打开已有模板“lsdq2.dwt”。②单击可编辑区域的标签“nr”，选取该编辑区域，单击“修改”|“模板”|“删除模板标记”。删除模板标记删除可编辑区域标记之后的区域将被锁定。11.1.4取消区域标记效果图11.2使用资源面板管理模板11.2使用资源面板管理模板网页是由许许多多的网页元素构成，这些元素就是站点中的资源。通过Dreamweaver提供的“资源”面板，可以很好的管理这些资源。“资源”面板按以下分类组织站点资源：图像：包含GIF、JPG、PNG三种图像格式。颜色：站点文档和样式表中使用的颜色。URLs：站点文本中包含的外部超级链接地址。Flash：SWF格式的电影。Shockwave：Shockwave格式。影片：包含MPEG和QuickTime格式。脚本：包括JavaScript或VBScript文件。模板：用于生成许多布局一致的页面。库：可用于多个页面，内容完全一致，便于统一修改使用资源面板中的“模板”分类可以管理当前站点中的模板。管理模板11.2.1编辑模板编辑模板的操作和编辑普通文档完全一样。但在编辑模板时，要注意模板中的内容要具有普遍的适应性，即该模板能应用于大量的网页上。11.2.2应用模板在Dreamweaver中，应用模板一般有两种方法：一种是用户将模板作为新文档的起点，直接在模板上编辑后，将其保存为网页格式。另一种是用户将模板应用于已有文档上。实例（4）：应用模板操作步骤：11.2.2应用模板效果图①利用“文件”|“新建”命令，新建一张网页。②在该网页中输入中文字符“保护地球，人人有责。”③单击“修改”|“模板”|“应用模板到页”，从列表中选取模板“lsdq1.dwt”，然后单击“选定”。④选取“可编辑区域”项中的“Documentbody”，在“将内容移到新区域：”项的下拉列表中选取“nr”，单击“确定”按钮。⑤将网页保存在站点根目录下取名为“sy.htm”，预览效果。选取区域选取模板应用模板到页11.3基于模板生成新网页要基于模板新建文档，可以使用文件命令或“资源”面板中的模板分类。实例（5）：基于模板生成新网页操作步骤：（1）使用文件命令新建基于模板的文档。（2）使用“资源”面板新建基于模板的文档•提示：使用上述方法可以生成多张同样模板的网页，避免了许多重复性的劳动。11.3基于模板生成新网页效果图“资源”面板新建基于模板的文档拖动模板11.4编辑被应用模板的网页编辑被应用模板的网页时，只能对其可编辑区域中的内容进行修改。所有模板正文中的可编辑区域都将列表出现在“修改”|“模板”菜单的下端。使用该列表可选择并编辑区域。要查找可编辑区域并在文档中选定它，可以选择“修改”|“模板”，然后从列表中选择区域名。选取可编辑区域11.5将文档从模板中分离出来11.5将文档从模板中分离出来如果要对应用了模板的页面的不可编辑区域进行修改，则必须要将页面从模板中分离出来。分离后的页面就可以随意修改，而且该页面也不会随模板的更新而更新。要从模板中分离文档，可单击“修改”|“模板”|“从模板中分离”。•提示：页面被分离之后，所有区域都可以编辑。如果要使页面保持模板的统一性，又要使单个文档可自由编辑，则将页面从模板中分离出来是一中比较可行的方案。但是，这种方法要求模板相对成熟定型，因为模板分离之后，文档已经不能随模板的更新而更新了。从模板中分离11.6使用库项目11.6.1理解库项目的概念“库”是一些网页中的共享元素，用户可以将它放置在任意网页的任意位置。利用“修改”|“库”|“增加对象到库”的命令，可以将当前文档中选取的对象添加到库，使该对象成为一个库项目。库项目可以包含任何BODY元素，包括文本、表格、窗体、图像、JAVA小程序、插件和ActiveX元素等。库项目只是对链接项目的引用，文件格式为“.lbi”，库项目存放的默认路径是在每个站点本地根目录下的Library文件夹中。通过站点的“资源”面板的“库”分类，用户可以对站点中的库项目方便的进行编辑、应用。库项目是可以重复使用的项目，当库项目更改后，与其相关联的网页也会做相应的改变。•提示：库项目可以包含行为，但是在库项目中编辑行为有特殊的要求。库项目不能包含样式表，因为这些元素的代码是HEAD的一部分。11.6.2创建库项目实例（6）：创建库项目操作步骤：选取图像①选取左上角的图片“natur127.JPG”。②单击“修改”|“库”|“增加对象到库”增加对象到库③在“资源”面板的“库”类别列表中，输入新库项目的名称“xrk”。提示：在将库项目添加到页面时，实际内容和对源项目的引用一起被插入到文档中。在内容被插入之后，内容的显示将不需要源项目参与。选取图像所示：输入名称“xrk”11.6.3修改库项目要编辑已有库项目，可在选中文档中的库项目之后，单击“属性”面板的“打开”按钮。库项目扩展名为lbi。•在修改库项目时最好不要使用层、时间轴和行为等可能在文档HEAD部分添加代码的内容。“属性”面板11.6.4在网页中添加库项目实例（6）：在网页中添加库项目操作步骤：拖动库项目插入库项目①利用“文件”|“新建”命令，新建一张网页。②将光标定位在文档窗口中。③单击“窗口”|“库”命令，打开“资源”面板的“库”分类。④将项目“xrk.lbi”从“库”分类直接拖动到文档窗口中，或选定该项目之后单击左下角的“插入”按钮。如图所示：提示：在将项目从“库”分类面板中拖出时，按Ctrl键，可插入项目的内容而不需要在“库”分类项中创建项目引用。11.6.5使用资源面板管理库项目实例（8）：使用“资源”面板管理库项目操作步骤：①利用“文件”|“打开”命令，打开网页文件“index.htm”。②单击“窗口”|“库”命令，打开“资源”面板的“库”分类。③在该网页中间的内容部分输入中文字符“保护地球，人人有责。”。④选取输入的文字，单击“资源”面板底部的“新建库项目”按钮，输入新库项目的名称“wz”。新建库项目11.6.5使用资源面板管理库项目⑤保持对库项目“wz”的选中状态，单击“资源”面板底部的“编辑”按钮，即可进入对该项目的编辑状态。⑥保持对库项目“wz”的选中状态，单击“资源”面板底部的“删除”按钮，即可删除上述创建的库项目。•提示：上述操作主要通过“资源”面板底部的各个按钮进行对库项目的管理。编辑库项目编辑库项目中的文字删除库项目