首页 > 代码库 > 7.1 制作模板并简单编辑

7.1 制作模板并简单编辑

在上一章中,首先介绍了一般网站的开发流程,其主要流程有需求分析、网站制作、测试网页和发布网站。随后简单讲解了淘宝网首页有哪些内容7最后着重研究了页面布局技术,其中框架布局和表格布局有存在的必要,不可抛弃,DIV层布局是未来的发展趋势。

从本章开始,我们将继续学习网站制作相关知识。所有的页面制作好之后,我们就要测试页面内容,来审视我们制作的页面是否美观,来检查页面中是否有死链接,来查看页面是否可以兼容不同的浏览器。测试完之后,为了使更多的人知道您的网站,就必须把我们制作、测试好的网站在网上进行发布。这一章的内容都是重点,难点是如何调整页面和其他浏览器的兼容性。

一、为什么需要模板

网站通常都遵循一个标准结构,例如所有页面都有页眉、导航栏和页脚。模板有助于保持整个网站外观和风格的一致性。假设您的网站有许多页面,有些页面含有相同的页眉、导航栏和隐私条例说明、版权标题。现在要做一个小改动,比如说在版权文本中加一些内容。那么就必须分别打开每个页面,并做必要的修改,这样是不是非常耗时耗力,而且容易出错,那怎么办?不急,设计HTML语言的人早就为我们想好了,多个页面中相同部分可以制作成一个文件,它就是模板。如果使用了模板,这项工作就变得轻松多了。您只需在模板中进行修改,应用了该模板的所有页面都将自动更新。

其实模板的功能就是将版式和内容的设计分离,先设计版式布局并存为模板,然后,对于相同布局版式的网页就可以用前面定义的模板来创建,在新的页面中只需修改部分内容就可以快速制作成功,而且可以保证页面风格的一致性。模板的好处的确不少,下面我们就赶快来体验一把模板给我们带来的方便之处。

二、制作模板

创建模板的方法有两种,一种是将现有的HTML文档保存为模板,另一种是在空白HTML文档中从头开始创建。

最简单的方法是先打开一个创建好的网页,然后将它用作模板;另一个方法是从头开始创建,然后在其中添加图像、表格和文本。最后必须决定哪些区域是可以修改的(内容),然后保存为模板,这样就可以开始创建其他页面了。Dreamweaver使用标准的HTML注释来确定使用了哪个模板和哪些区域可以编辑。模板将自动保存在"Templates”文件夹中,该文件夹在站点的本地根文件夹下。

下面分别介绍用两种不同的方式来创建模板。

1.将现有文档保存为模板

(1) 选择“文件”一“打开”命令,即会出现“打开”对话框。

(2) 在“打开”对话框中,选择要创建为模板的现有文档。

(3) 单击“确定”按钮,该文档将出现在“文档”窗口中,如图1所示。

图1 另存为模板页面
图1 另存为模板页面

(4) 选择“文件”一“另存为模板”命令,将出现“另存为模板”对话框。

(5) 在此对话框中,从“站点”下拉列表框中选择要保存模板的站点。在“另存为”文本框中,输入模板的名称,如图2所示。

(6) 单击“保存”按钮。

此文档将以.dwt为扩展名保存在"Templates”文件夹下。

图2 ”另存为模板\对话框
图2 ”另存为模板\对话框

2.新建空白模板

(1) 选择“窗口”一“资源”命令或按F1l键,即会出现“资源”面板。

(2) 单击“资源”面板上的“模板”图标,将显示“模板”面板,如图3所示。

(3) 单击“模板”面板右下角的“新建模板”图标。

(4) 在“名称”字段中输入新模板名称,然后按Enter键。

(5) 单击“模板”面板右下角的“编辑”图标。

图3 在“资源”面板显示模板
图3 在“资源”面板显示模板

在“文档”窗口中,将打开该空白模板。在此模板中,可以添加DIV块区域、表格、文本、图像和其他页面元素。

小经验:在使用模板时需谨记,不能将模板从"Templates”文件夹中移出,也不能将非模板文件放在"Templates”文件夹下。而且,不能将"Templates”文件夹从站点的本地根文件夹中移出,否则将导致"Templates”文件夹的路径出错。

小问题:在模板“文档”窗口中添加内容之后,默认情况下,应用模板的文档都处于锁定状态,也就是不能编辑,那怎么办?

因此,创建模板后,需指定模板窗口中哪部分可以编辑,以便在其中添加内容;哪部分不可编辑,以便保持所有页面结构一致。

3.定义可编辑区域

【1】 添加基本可编辑区域

(1) 在“模板”文档中选择要设置为可编辑的区域。

(2) 请执行以下步骤之一:

●  在插入栏的“常用”选项卡中,单击“模板”图标,在弹出的下拉菜单中选择“可编辑区域”命令。    、

●  选择“插入”一“模板对象”一“可编辑区域”命令。

●  右击选中的区域,然后选择“模板”一“新建可编辑区域”命令。

●   按Ctrl+ Alt+V组合键。

(3) 此时,将出现“新建可编辑区域”对话框,如图4所示。在“名称”文本框中,为该区域输入一个唯一的名称。同一名称不能使用两次。

图4 ”新建可编辑区域\对话框
图4 ”新建可编辑区域\对话框

(4) 单击“确定”按钮。

该区域将高亮显示在一个矩形内,可以向其中添加内容,每个文档中的内容都可不同。

该区域的名称在对应可编辑区域顶部的矩形标签中。

【2】删除可编辑区域

如果在模板中设置了可编辑区域并想锁定它,即将其设为不可编辑,则需使用“删除模板标记”选项。

(1) 选择要编辑的区域。

(2) 选择“修改”一“模板”一“删除模板标记”命令。该区域即被锁定,不可编辑。

4.编辑模板

要编辑模板,请执行以下步骤。

(1) 选择“窗口”一“资源”命令。

(2) 在“资源”面板中,单击“模板”图标。

(3) 从模板列表中,选择要编辑的模板,然后双击。

该模板将出现在“文档”窗口中。此时即可编辑该模板,并对其做必要的修改。

本节作业:

参照教程和图示,使用Dreamweaver制作一个模板,并完成定义可编辑区域及编辑操作。

网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧!

点击下载第七章案例及作业资源 返回《HTML入门经典》教程列表

编辑:网页学习网
本文地址:http://www.lodidance.com/html/jc/554.html