• 技术文章 >开发工具 >dreamweaver

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

    不言不言2018-09-29 14:56:46转载4281
    本篇文章给大家带来的内容是关于Dreamweaver中如何使用模板(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

    模板的作用:

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

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

    简单示例:

    // 在其.dwt 模板中

    <!-- TemplateBeginEditable name="myName" -->
        设置可编辑区域
    <!-- TemplateEndEditable -->

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

    <HTML>
    <!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
      <HEAD>
      </BODY>
    <!-- InstanceEnd -->
    </HTML>

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

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


    <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"></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>
    <!-- 第二层表格:内容 布局: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"></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"> <!-- 右边内容向上对齐 -->

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

    <!-- InstanceEndEditable --></TD>
    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>
    </BODY>
    <!-- InstanceEnd -->
    </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"></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>
        <!-- 第二层表格:内容  布局: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"></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"> <!-- 右边内容向上对齐 -->
    
            <!-- 第三层表格:右边内容  布局:2行1列-->
            <!-- InstanceBeginEditable name="right" -->
                   <table width="450" border="0">
      <tr>
        <td  height="50">&nbsp;</td>
        <td width="450">&nbsp;</td>
        <td >&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="right"><br><br>
          <h1>欢迎来到我的站点!</h1>
          <br><br><br><br><br><br><br><br>
              xugang&nbsp;&nbsp;&nbsp;&nbsp;<br><br>
              2008.10.26<br>
        </td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</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中文网其它相关文章!

    声明:本文转载于:博客园,如有侵犯,请联系admin@php.cn删除
    专题推荐:Dreamweaver
    上一篇:win8系统下dreamweaver cs6颜色代码的配色方法 下一篇:Dreamweaver架设网站的详细步骤
    线上培训班

    相关文章推荐

    • html标准写法与dreamweaver自动生成的不一样_HTML/Xhtml_网页制作• 在dreamweaver中使用zen coding的方法_HTML/Xhtml_网页制作• 用Dreamweaver MX+ACCESS制作企业新闻系统• 在dreamweaver中html里写不已php • 在dreamweaver中连接mysql数据,出现http500异常

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网