首页 > 代码库 > 7.1 制作模板并简单编辑
7.1 制作模板并简单编辑
在上一章中,首先介绍了一般网站的开发流程,其主要流程有需求分析、网站制作、测试网页和发布网站。随后简单讲解了淘宝网首页有哪些内容7最后着重研究了页面布局技术,其中框架布局和表格布局有存在的必要,不可抛弃,DIV层布局是未来的发展趋势。 从本章开始,我们将继续学习网站制作相关知识。所有的页面制作好之后,我们就要测试页面内容,来审视我们制作的页面是否美观,来检查页面中是否有死链接,来查看页面是否可以兼容不同的浏览器。测试完之后,为了使更多的人知道您的网站,就必须把我们制作、测试好的网站在网上进行发布。这一章的内容都是重点,难点是如何调整页面和其他浏览器的兼容性。 一、为什么需要模板 网站通常都遵循一个标准结构,例如所有页面都有页眉、导航栏和页脚。模板有助于保持整个网站外观和风格的一致性。假设您的网站有许多页面,有些页面含有相同的页眉、导航栏和隐私条例说明、版权标题。现在要做一个小改动,比如说在版权文本中加一些内容。那么就必须分别打开每个页面,并做必要的修改,这样是不是非常耗时耗力,而且容易出错,那怎么办?不急,设计HTML语言的人早就为我们想好了,多个页面中相同部分可以制作成一个文件,它就是模板。如果使用了模板,这项工作就变得轻松多了。您只需在模板中进行修改,应用了该模板的所有页面都将自动更新。 其实模板的功能就是将版式和内容的设计分离,先设计版式布局并存为模板,然后,对于相同布局版式的网页就可以用前面定义的模板来创建,在新的页面中只需修改部分内容就可以快速制作成功,而且可以保证页面风格的一致性。模板的好处的确不少,下面我们就赶快来体验一把模板给我们带来的方便之处。 二、制作模板 创建模板的方法有两种,一种是将现有的HTML文档保存为模板,另一种是在空白HTML文档中从头开始创建。 最简单的方法是先打开一个创建好的网页,然后将它用作模板;另一个方法是从头开始创建,然后在其中添加图像、表格和文本。最后必须决定哪些区域是可以修改的(内容),然后保存为模板,这样就可以开始创建其他页面了。Dreamweaver使用标准的HTML注释来确定使用了哪个模板和哪些区域可以编辑。模板将自动保存在"Templates”文件夹中,该文件夹在站点的本地根文件夹下。 下面分别介绍用两种不同的方式来创建模板。 1.将现有文档保存为模板 (1) 选择“文件”一“打开”命令,即会出现“打开”对话框。 (2) 在“打开”对话框中,选择要创建为模板的现有文档。 (3) 单击“确定”按钮,该文档将出现在“文档”窗口中,如图1所示。 图1 另存为模板页面 (4) 选择“文件”一“另存为模板”命令,将出现“另存为模板”对话框。 (5) 在此对话框中,从“站点”下拉列表框中选择要保存模板的站点。在“另存为”文本框中,输入模板的名称,如图2所示。 (6) 单击“保存”按钮。 此文档将以.dwt为扩展名保存在"Templates”文件夹下。 图2 ”另存为模板\对话框 2.新建空白模板 (1) 选择“窗口”一“资源”命令或按F1l键,即会出现“资源”面板。 (2) 单击“资源”面板上的“模板”图标,将显示“模板”面板,如图3所示。 (3) 单击“模板”面板右下角的“新建模板”图标。 (4) 在“名称”字段中输入新模板名称,然后按Enter键。 (5) 单击“模板”面板右下角的“编辑”图标。 图3 在“资源”面板显示模板 在“文档”窗口中,将打开该空白模板。在此模板中,可以添加DIV块区域、表格、文本、图像和其他页面元素。 小经验:在使用模板时需谨记,不能将模板从"Templates”文件夹中移出,也不能将非模板文件放在"Templates”文件夹下。而且,不能将"Templates”文件夹从站点的本地根文件夹中移出,否则将导致"Templates”文件夹的路径出错。 小问题:在模板“文档”窗口中添加内容之后,默认情况下,应用模板的文档都处于锁定状态,也就是不能编辑,那怎么办? 因此,创建模板后,需指定模板窗口中哪部分可以编辑,以便在其中添加内容;哪部分不可编辑,以便保持所有页面结构一致。 3.定义可编辑区域 【1】 添加基本可编辑区域 (1) 在“模板”文档中选择要设置为可编辑的区域。 (2) 请执行以下步骤之一: ● 在插入栏的“常用”选项卡中,单击“模板”图标,在弹出的下拉菜单中选择“可编辑区域”命令。 、 ● 选择“插入”一“模板对象”一“可编辑区域”命令。 ● 右击选中的区域,然后选择“模板”一“新建可编辑区域”命令。 ● 按Ctrl+ Alt+V组合键。 (3) 此时,将出现“新建可编辑区域”对话框,如图4所示。在“名称”文本框中,为该区域输入一个唯一的名称。同一名称不能使用两次。 图4 ”新建可编辑区域\对话框 (4) 单击“确定”按钮。 该区域将高亮显示在一个矩形内,可以向其中添加内容,每个文档中的内容都可不同。 该区域的名称在对应可编辑区域顶部的矩形标签中。 【2】删除可编辑区域 如果在模板中设置了可编辑区域并想锁定它,即将其设为不可编辑,则需使用“删除模板标记”选项。 (1) 选择要编辑的区域。 (2) 选择“修改”一“模板”一“删除模板标记”命令。该区域即被锁定,不可编辑。 4.编辑模板 要编辑模板,请执行以下步骤。 (1) 选择“窗口”一“资源”命令。 (2) 在“资源”面板中,单击“模板”图标。 (3) 从模板列表中,选择要编辑的模板,然后双击。 该模板将出现在“文档”窗口中。此时即可编辑该模板,并对其做必要的修改。 本节作业: 参照教程和图示,使用Dreamweaver制作一个模板,并完成定义可编辑区域及编辑操作。 网页学习网提示:光看教程是无法让你掌握HTML知识,最好是完成作业后才进入下一次教程,动起手来吧! 点击下载第七章案例及作业资源 返回《HTML入门经典》教程列表 |
编辑:网页学习网 |
本文地址:http://www.lodidance.com/html/jc/554.html |