首页 > 代码库 > 7.2 将模板并应用到其他页面

7.2 将模板并应用到其他页面

在模板创建好之后,必须确保所有相关的页面都使用该模板,以便在更新模板时,这些页面会随之自动更新。下面介绍将模板应用于页面的步骤。

将模板应用于打开的文档的步骤如下,

(1) 新建要应用模板的空白文档。

(2) 在“资源”面板中单击“模板”图标,找到要应用的模板。

(3) 将模板从面板拖到空白“文档”窗口中。

(4) 在可编辑区域添加或编辑数据。

结果如图1所示:

图1 模板应用于页面并在可编辑区域添加了内容
图1 模板应用于页面并在可编辑区域添加了内容

小经验:在应用模板时需注意,未应用模板的HTML文档一定是空白文档,即不要添加任何内容,这样在应用模板时不会出现问题,否则,会出现应用不成功的情况。

用模板重新制作“装备”的商品展示页,步骤如示例1所示。

示例1:

(1) 新建要应用模板的空白文档。

(2) 应用如上节制作模板中图1所示的模板。

(3) 在可编辑区域添加或编辑如图2所示的页面内容。

图2 未应用模板的商品展示页
图2 未应用模板的商品展示页

应用模板之后的商品展示页的页面效果如图3所示:

图3 应用了模板的商品展示页
图3 应用了模板的商品展示页
 

用模板制作“装备”商品的详细介绍页,步骤如示例2所示。

示例2:

(1) 新建要应用模板的空白文档。

(2) 应用如上节制作模板中图1所示的模板。

(3) 在可编辑区域添加未应用模板的商品的详细介绍页内容。

应用模板之后的商品的详细介绍页的页面效果如图4所示。

图4 应用了模板的商品的详细介绍页
图4 应用了模板的商品的详细介绍页

用模板制作“购买页面”(即单击“立刻购买!”按钮后的页面),步骤如示例3所示。

示例3:

(1) 新建要应用模板的空白文档。

(2) 应用如上节制作模板中图1所示的模板。

(3) 在可编辑区域添加未应用模板的购买页面内容。

应用模板之后的购买页面的页面效果如图5所示。

图5 应用了模板的购买页面
图5 应用了模板的购买页面

本节作业:

参照教程和图示,使用Dreamweaver用模板页制作登录、注册页面。

html基础 应用模板 作业 登录页面
 
html基础 应用模板 作业 注册页面

 

注意事项:

1、整体规划样式的重要性。

2、模版区域:有可编辑区域、可选区域、可选可编辑区域等。

3、给文件夹、文件等取名要用字母标示。

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

 

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

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