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 -->
// 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>
// Dans la zone du modèle, définissez la zone modifiable
<!-- 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"> </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 组合键;
方法四:
右键选中区域->“模板”->“新建可编辑区域”
删除可编辑区域:
选中编辑区域,“修改”->“模板”->“删除模板标记”,该区域将被锁定,不可编辑。
修改编辑模板:
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!