第8章使用模板库和项目.docVIP

第8章 使用模板和库项目 很多网站中，同一栏目（大类）下的网页一般都使用相同的布局方式或页面元素。如果一页一页地做，会浪费很多不必要的时间。为避免乏味而又繁琐的重复操作，并提高网页的制作效率，可以使用Dreamweaver提供的“模板”功能来制作相同结构的网页；而将相同的页面元素（如导航栏、注册信息等）制作成库项目，然后在各个网页中重复使用。 8.1 使用模板 Dreamweaver中的模板是一种特殊类型的文档，用于制作同一网站中结构相同的网页。用户可基于模板创建文档，从而使创建的文档继承模板的页面布局。 此外，基于模板创建的文档与模板保持链接关系（除非以后分离该文档），修改模板后，所有基于该模板创建的文档都可以自动更新。 8.1.1 创建模板文档 创建模板文档的方法有两种。一种是新建空白模板文档，然后像制作普通网页一样制作和编辑模板内容；还有一种是将普通网页转换为模板。 创建空白模板文档 在Dreamweaver中创建的空白网页模板与空白网页文档相同，只是模板文档的扩展名为“dwt”。当用户创建并保存好空白网页模板后，可以像编辑普通网页一样编辑模板文档。 Step01 启动Dreamweaver8后，将“lily”文件夹复制到本地磁盘，并将“lily”文件夹定义为本地站点，然后选择“文件”→“新建”菜单，打开“新建文档”对话框。 Step02 在“常规”选项卡的“类别”列表中选择“模板页”，然后在“模板页”列表中选择“HTML模板”，如图8-1-1所示。 图8-1-1 新建模板文档 Step03 单击“创建”按钮，便创建了一个模板文档，并进入其编辑状态，如图8-1-2所示。 图8-1-2 模板文档的编辑状态 Step04 选择“文件”→“保存”菜单，弹出提示框，勾选“不再警告我”复选框，然后单击“确定”按钮，如图8-1-3所示。 图8-1-3 提示框 Step05 弹出“另存为模板”对话框，在“另存为”文本框中输入模板文档名（此处为“t1”），然后单击“保存”按钮保存文档，如图8-1-4所示。 图8-1-4 “另存为模板”对话框 Step06 打开“文件”面板，可以看到其中多了一个名为“Templates”的文件夹，展开该文件夹，可以看到新建的模板文档“t1.dwt”，如图8-1-5所示。此时我们便可以像编辑普通网页一样制作模板内容。 图8-1-5 查看模板 默认情况下，Dreamweaver将模板文档保存在站点根目录下的Templates文件夹中。如果在创建模板文档时站点中还没有Templates文件夹，Dreamweaver将在保存新建模板时自动创建该文件夹。 温馨提示：不要将模板文档移动到Templates文件夹之外，或将任何非模板文件放在Templates文件夹中，否则会导致将来无法使用模板等一系列问题。 将现有网页转换成模板 用户在制作好一个网页后，可将其另存为模板，然后再利用该模板制作网站中的其它网页。具体操作如下。 Step01 启动Dreamweaver8后，打开上一小节定义的站点“lily”中的“com.html”网页文档。 Step02 选择“文件”→“另存为模板”菜单，打开“另存为模板”对话框，在“另存为”文本框中输入模板文档名（此处为“t2”），然后单击“保存”按钮，如图8-1-6左图所示。 图8-1-6 将现有网页另存为模板 Step03 弹出提示框，询问是否更新链接，一般情况下都应单击“是”按钮，如图8-1-6右图所示。 知识库：由于文档的位置发生了变化（相对于原网页），所以模板中的链接需要更新。 8.1.2 编辑模板 用户在创建好模板后，即可对其进行编辑。编辑模板包括创建可编辑区域、更改可编辑区域名称以及删除可编辑区域标记等操作。 创建可编辑区域 所谓可编辑区域，是指模板中未锁定的部分，也就是在基于模板创建的文档中可以编辑的区域。要是模板有效，至少要在其中包含一个可编辑区域。在模板中创建可编辑区域的操作如下。 Step01 打开上节中创建的模板文档“t2.dwt”，将插入点置于需创建为可编辑区域的位置，或选择要设置为可编辑区域的对象，如表格或单元格等（此处选择网页中部右侧的大表格），如图8-1-7所示。 图8-1-7 选择对象 Step02 选择“插入”→“模板对象”→“可编辑区域”菜单，打开“新建可编辑区域”对话框，在“名称”编辑框中输入可编辑区域名称（此处为默认），如图8-1-8所示。 图8-1-8 “新建可编辑区域”对话框 Step03 单击“确定”按钮创建可编辑区域，新建的可编辑区域处于选中状态，如图8-1-9所示。 图8-1-9 创建可编辑区域 更改可编辑区域名称 用户在创建可编辑区域时，默认的区域名称为“Edi