Comment utiliser des modèles dans Dreamweaver (avec code)

不言
Libérer: 2018-09-29 14:56:46
avant
8366 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser les modèles dans Dreamweaver (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Les fonctions des modèles :

1. Il permet de maintenir une apparence et un style cohérents de l'ensemble du site Web

2. effectué dans le modèle, toutes les pages auxquelles le modèle est appliqué seront automatiquement mises à jour.

Exemple simple :

// dans son modèle .dwt

<!-- TemplateBeginEditable name="myName" -->
    设置可编辑区域
<!-- TemplateEndEditable -->
Copier après la connexion

// dans On la page, déclarez l'adresse du modèle de candidature, ainsi que la zone, etc.

<HTML>
<!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" -->
  <HEAD>
  </BODY>
<!-- InstanceEnd -->
</HTML>
Copier après la connexion

// Dans la zone du modèle, définissez la zone modifiable

<!-- InstanceBeginEditable name="myName" -->
    放入可编辑区域的内容
<!-- InstanceEndEditable -->
Copier après la connexion


<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 bordure="0" cellspacing ="0" cellpadding="0">
    
<TR>
        
<TD valign="top">
        

        
<TABLE bordure= "0" cellspacing="0" cellpadding="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" frontière="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" bordure="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"> 

        

        
< ;!-- InstanceBeginEditable name="right" -->
               
<table largeur="450" bordure="0">
  
<tr>
    
<td  hauteur="50"> td >
    
<td largeur="450"> td>
    
<td > td>
  
tr>
  
<tr> ;
    
<td> td>
    
<td aligner="droit"><br><br>
      
<h1>欢迎来到我的站点!< ;/h1>
      
<br>< ;br><br><br> <br><br><br> ;<br>
          xugang
< br><br>
          26.10.2008
<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>
Copier après la connexion

注意要点:

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

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

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

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

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

将现有文件保存为模板:

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

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

新建空白模板:

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

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

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

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

添加可编辑区域:

方法一:

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

方法二:

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

方法三:

按Ctrl+Alt+V 组合键;

方法四:

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

删除可编辑区域:

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

修改编辑模板:

Sélectionnez "Fenêtre"->"Ressources"->Icône "Modèle"->Sélectionnez le modèle que vous souhaitez modifier, puis double-cliquez dessus. Le modèle apparaîtra dans la fenêtre "Document" et. vous pouvez modifier le modèle.

Appliquer un modèle à une page Web :

1. Ouvrez le document (c'est-à-dire la page) auquel vous souhaitez appliquer le modèle

2. " -> "Ressources" - >Icône "Modèle"->Sélectionnez le modèle que vous souhaitez appliquer ;

3. Faites glisser le modèle du panneau vers la fenêtre de la page (ou cliquez sur le bouton "Appliquer". bouton);

4. Ajoutez ou écrivez des données dans la zone modifiable

Remarque : S'il y a déjà du contenu dans le document, vous devez déplacer le contenu existant vers la zone modifiable du modèle, sinon Dreamweaver supprimera son contenu !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:cnblogs.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!