Heim > Entwicklungswerkzeuge > dreamweaver > So verwenden Sie Vorlagen in Dreamweaver (mit Code)

So verwenden Sie Vorlagen in Dreamweaver (mit Code)

不言
Freigeben: 2018-09-29 14:56:46
nach vorne
8511 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Vorlagen in Dreamweaver (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Die Funktionen von Vorlagen:

Es hilft, ein einheitliches Erscheinungsbild und einen einheitlichen Stil der gesamten Website beizubehalten.

2 Wenn in der Vorlage eine Änderung vorgenommen wird, werden alle Seiten, auf die die Vorlage angewendet wird, automatisch aktualisiert.

Einfaches Beispiel:

// in seiner .dwt-Vorlage

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

// in der Seite, Geben Sie die Adresse der Anwendungsvorlage und den Bereich usw. an.

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

// Legen Sie im Vorlagenbereich den bearbeitbaren Bereich fest

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


<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>
        
TABELLE>
    
TD>
TR>
<TR>
    
<TD> ;
    

    
<TABELLE Rahmen="0" Zellenabstand ="0" cellpadding="0">
    
<TR>
        
<TD valign="top">
        

        
<TABELLE Rahmen= „0“ Zellenabstand="0" Zellenauffüllung="0">
        
<TR>
            
<TD ><href="tempTest_00.html"><img src="Temp_images/left_1.gif" border="0">a>TD>
        
TR>
        
<TR>
            
<TD><href="tempTest_01.html"><img src="Temp_images/left_2.gif" border="0">a>TD>
        
TR>
        
<TR>
            
<TD><href="tempTest_02.html"><img src="Temp_images/left_3.gif" border="0"> a>TD>
        
TR>
        
<TR>
            
<TD><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>
            
src="Temp_images/left_9.gif">
TD>         TR>
        
< TR>
            
src="Temp_images/left_10.gif">TD
>         TR>        TABELLE>
        
TD>
        <TD valign
="top"
>          --> ;!-- InstanceBeginEditable name="right" -->               
<
Tabelle Breite="450" Rahmen
="0"
>  <
tr
>    <td  Höhe="50">
td >
    
<td width="450"> td>
    
<td > td>
  
tr>
  
<tr> ;
    
<td> td>
    
<td align="rechts"><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"></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"> </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>
Nach dem Login kopieren

注意要点:

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

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

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

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

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

将现有文件保存为模板:

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

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

新建空白模板:

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

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

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

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

添加可编辑区域:

方法一:

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

方法二:

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

方法三:

按Ctrl+Alt+V 组合键;

方法四:

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

删除可编辑区域:

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

修改编辑模板:

Wählen Sie „Fenster“ -> „Ressourcen“ -> Symbol „Vorlage“ -> Wählen Sie die Vorlage aus, die Sie bearbeiten möchten, und doppelklicken Sie dann darauf. Die Vorlage wird im Fenster „Dokument“ angezeigt Sie können die Vorlage bearbeiten.

Anwenden einer Vorlage auf eine Webseite:

1. Öffnen Sie das Dokument (dh die Seite), auf das Sie die Vorlage anwenden möchten.

2 " -> „Ressourcen“ – >Symbol „Vorlage“->Wählen Sie die Vorlage aus, die Sie anwenden möchten;

3. Ziehen Sie die Vorlage aus dem Bedienfeld in das Seitenfenster (oder klicken Sie auf „Übernehmen“).

4. Fügen Sie Daten in den bearbeitbaren Bereich hinzu oder schreiben Sie sie hinein.

Hinweis: Wenn das Dokument bereits Inhalt enthält, müssen Sie den vorhandenen Inhalt verschieben den bearbeitbaren Bereich der Vorlage, andernfalls löscht Dreamweaver den Inhalt!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vorlagen in Dreamweaver (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:cnblogs.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage