登录  /  注册

Dreamweaver中如何使用模板(附代码)

不言
发布: 2018-09-29 14:56:46
转载
8043人浏览过

本篇文章给大家带来的内容是关于dreamweaver中如何使用模板(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

模板的作用:

一、有助于保持整个网站外观和风格的一致;

二、在模板中进行修改后,所有应用模板的页面都将自动更新。

简单示例:

// 在其.dwt 模板中

<!-- TemplateBeginEditable name="myName" -->
    设置可编辑区域
<!-- TemplateEndEditable -->
登录后复制

// 在页面中,声明应用模板的地址,以及区域等

<HTML>
<!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
  <HEAD>
  </BODY>
<!-- InstanceEnd -->
</HTML>
登录后复制

// 在模板区域内,设置可编辑区域

<!-- InstanceBeginEditable name="myName" -->
    放入可编辑区域的内容
<!-- InstanceEndEditable -->
登录后复制


<HTML>
<HEAD>

<TITLE>TemplatesTITLE>


HEAD>
<BODY>

<TABLE border="0" align="center" cellspacing="0" cellpadding="0">
<TR>
<TD>

<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><img src="Temp_images/head_1.gif">TD>
<TD><img src="Temp_images/head_2.gif">TD>
<TD><img src="Temp_images/head_3.gif">TD>
TR>
TABLE>
TD>
TR>
<TR>
<TD>

<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD valign="top">

<TABLE border="0" cellspacing="0" cellpadding="0">
<TR>
<TD><a href="tempTest_00.html"><img src="Temp_images/left_1.gif" border="0">a>TD>
TR>
<TR>
<TD><a href="tempTest_01.html"><img src="Temp_images/left_2.gif" border="0">a>TD>
TR>
<TR>
<TD><a href="tempTest_02.html"><img src="Temp_images/left_3.gif" border="0">a>TD>
TR>
<TR>
<TD><a href="tempTest_03.html"><img src="Temp_images/left_4.gif" border="0">a>TD>
TR>
<TR>
<TD><img src="Temp_images/left_5.gif">TD>
TR>
<TR>
<TD><img src="Temp_images/left_6.gif">TD>
TR>
<TR>
<TD><img src="Temp_images/left_7.gif">TD>
TR>
<TR>
<TD><img src="Temp_images/left_8.gif">TD>
TR>
<TR>
<TD><img src="Temp_images/left_9.gif">TD>
TR>
<TR>
<TD><img src="Temp_images/left_10.gif">TD>
TR>
TABLE>
TD>
<TD valign="top">



<table width="450" border="0">
<tr>
<td height="50"> td>
<td width="450"> td>
<td > td>
tr>
<tr>
<td> td>
<td align="right"><br><br>
<h1>欢迎来到我的站点!h1>
<br><br><br><br><br><br><br><br>
xugang
<br><br>
2008.10.26
<br>
td>
<td> td>
tr>
<tr>
<td> td>
<td> td>
<td> td>
tr>
table>

TD>
TR>
TABLE>
TD>
TR>
TABLE>
BODY>

HTM

简单示例:

<HTML><!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
<HEAD>
<!-- InstanceBeginEditable name="doctitle" -->
<TITLE>Templates</TITLE>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</HEAD>
<BODY>
<!-- 第一层表格  布局:2行1列-->
<TABLE border="0" align="center" cellspacing="0" cellpadding="0">
<TR>
    <TD>
        <!-- 第二层表格:页眉  布局:1行3列-->
        <TABLE border="0" cellspacing="0" cellpadding="0">
        <TR>
            <TD><img  src="Temp_images/head_1.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
            <TD><img  src="Temp_images/head_2.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
            <TD><img  src="Temp_images/head_3.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        </TABLE>
    </TD>
</TR>
<TR>
    <TD>
    <!-- 第二层表格:内容  布局:1行2列-->
    <TABLE border="0" cellspacing="0" cellpadding="0">
    <TR>
        <TD valign="top">
        <!-- 第三层表格:左边列表  布局:10行1列-->
        <TABLE border="0" cellspacing="0" cellpadding="0">
        <TR>
            <TD><a href="tempTest_00.html"><img  src="Temp_images/left_1.gif" border="0" alt="Dreamweaver中如何使用模板(附代码)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_01.html"><img  src="Temp_images/left_2.gif" border="0" alt="Dreamweaver中如何使用模板(附代码)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_02.html"><img  src="Temp_images/left_3.gif" border="0" alt="Dreamweaver中如何使用模板(附代码)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_03.html"><img  src="Temp_images/left_4.gif" border="0" alt="Dreamweaver中如何使用模板(附代码)" ></a></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_5.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_6.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_7.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_8.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_9.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        <TR>
            <TD><img  src="Temp_images/left_10.gif" alt="Dreamweaver中如何使用模板(附代码)" ></TD>
        </TR>
        </TABLE>
        </TD>
        <TD valign="top"> <!-- 右边内容向上对齐 -->

        <!-- 第三层表格:右边内容  布局:2行1列-->
        <!-- InstanceBeginEditable name="right" -->
               <table width="450" border="0">
  <tr>
    <td  height="50"> </td>
    <td width="450"> </td>
    <td > </td>
  </tr>
  <tr>
    <td> </td>
    <td align="right"><br><br>
      <h1>欢迎来到我的站点!</h1>
      <br><br><br><br><br><br><br><br>
          xugang    <br><br>
          2008.10.26<br>
    </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>

        <!-- InstanceEndEditable --></TD>
    </TR>
    </TABLE>
    </TD>
</TR>
</TABLE>
</BODY>
<!-- InstanceEnd -->
</HTML>
登录后复制

注意要点:

A  在创建模板时,必须慎重定义可编辑区域和不可编辑区域。

B  模板将自动保存在“Templates”文件夹中,该文件夹在站点的本地根文件夹下。

1. 不能模板从“Templates”文件夹中移出;

2. 不能将非模板文件放在“Templates”文件夹中;

3. 不能将“Templates”文件夹从站点的本地根文件夹中移出。

将现有文件保存为模板:

1.打开要转变成模板的页面;

2.选择“文件”->“另存为模板”,保存模板;

新建空白模板:

1.选择“窗口”->“资源”命令(或按 F11键)。

2.单击“资源”面板上的“模板”图标,显示“模板”面板。

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

默认情况下,整个模板都处于锁定状态。

添加可编辑区域:

方法一:

在“插入”栏->“常用”选项卡->“模板”图标->“可编辑区域”;

方法二:

在“插入”->“模板对象”->“可编辑区域”;

方法三:

按Ctrl+Alt+V 组合键;

方法四:

右键选中区域->“模板”->“新建可编辑区域”

删除可编辑区域:

选中编辑区域,“修改”->“模板”->“删除模板标记”,该区域将被锁定,不可编辑。

修改编辑模板:

选择“窗口”->“资源”->“模板”图标->选择要编辑的模板,然后双击,该模板将出现在“文档”窗口,此时即可编辑该模板。

对网页应用模板:

1.打开要应用模板的文档(即:页面);

2.选择“窗口”->“资源”->“模板”图标->选择要应用的模板;

3.将模板从面板拖到页面窗口中(或单击“应用”按钮);

4.在可编辑区域添加或编写数据;

注意:如果文档中已经有内容,必须将现有内容移到模板的可编辑区域内,否则Dreamweaver将会删除这些内容!

以上就是Dreamweaver中如何使用模板(附代码)的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:博客园网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号