How to use templates in Dreamweaver (with code)
The content of this article is about how to use templates in Dreamweaver (with code). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
The functions of templates:
1. Helps to maintain a consistent appearance and style of the entire website;
2. After modifications are made in the template , all pages to which the template is applied will be updated automatically.
Simple example:
// In its .dwt template
<!-- TemplateBeginEditable name="myName" -->
设置可编辑区域
<!-- TemplateEndEditable -->// In the page , declare the address of the application template, and the area, etc.
<HTML> <!-- InstanceBegin template="/Templates/myTemplates.dwt" codeOutsideHTMLIsLocked="false" --> <HEAD> </BODY> <!-- InstanceEnd --> </HTML>
// In the template area, set the editable area
<!-- 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 组合键；
方法四：
右键选中区域->“模板”->“新建可编辑区域”
删除可编辑区域：
选中编辑区域，“修改”->“模板”->“删除模板标记”，该区域将被锁定，不可编辑。
修改编辑模板：
Select "Window"->"Resources"->"Template" icon->Select the template you want to edit, and then double-click it. The template will appear in the "Document" window, and you can edit the template at this time.
Apply a template to a web page:
1. Open the document (ie: page) to which you want to apply the template;
2. Select "Window" -> "Resources" - >"Template" icon->Select the template you want to apply;
3. Drag the template from the panel into the page window (or click the "Apply" button);
4. Add or write data in the editable area;
Note:If there is already content in the document, the existing content must be moved to the editable area of the template, otherwise Dreamweaver will delete it content!
The above is the detailed content of How to use templates in Dreamweaver (with code). For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1393
52
1207
24
How to adjust text position in dreamweaver
Apr 09, 2024 am 02:24 AM
Adjusting the text position in Dreamweaver can be completed by the following steps: Select the text and use the text position adjuster to make horizontal adjustments: left alignment, right alignment, center alignment; 2. Make vertical adjustments: top alignment, bottom alignment, vertical center; 3. Press Shift key and use the arrow keys to fine-tune the position; 4. Use shortcut keys to quickly align: left alignment (Ctrl/Cmd + L), right alignment (Ctrl/Cmd + R), center alignment (Ctrl/Cmd + C).
How to add video to dreamweaver webpage production
Apr 09, 2024 am 01:42 AM
Embed video using Dreamweaver: Insert a video element. Select and upload a video file. Set video type, URL, size, autoplay and controls. Insert video. Optional: Customize the video appearance.
How to adjust line spacing in dreamweaver
Apr 09, 2024 am 03:00 AM
Adjusting line spacing in Dreamweaver is a four-step process: select the text, open the Paragraph panel, adjust the Line Spacing options, and finally click OK to apply the changes.
How to add pictures to dreamweaver
Apr 09, 2024 am 03:30 AM
To insert a picture in Dreamweaver, click the Insert menu and choose Image, then navigate to the picture file and select it. Other methods include dragging and dropping files or inserting HTML code directly. Adjusting properties includes changing size, alignment, adding borders, and entering alt text.
How to set the web design software Dreamweaver to Chinese
Apr 09, 2024 am 12:39 AM
To set Dreamweaver to Chinese, follow these steps: Open Dreamweaver; change User Interface Language to Simplified Chinese or Traditional Chinese in the preferences; restart Dreamweaver; check the Help menu About Dreamweaver" item to verify the language settings.
How to set dreamweaver font
Apr 09, 2024 am 02:54 AM
You can set fonts in Dreamweaver by selecting a font, size, and color using the Properties panel. Use CSS to set fonts for your entire website or specific elements. Set the font directly in the HTML code using the "font" tag.
How to set text size in dreamweaver
Apr 09, 2024 am 02:18 AM
To set text size in Dreamweaver, just: Select the text Go to the Text menu Select Font Size Select the desired size Press Enter to save
How to add text box in dreamweaver
Apr 09, 2024 am 01:15 AM
Add a text box in Dreamweaver: Open a new document and insert a table text field. Set text box properties, including name, height, width, and wrapping, through the Properties panel. Double-click the text box to enter text and use the text editing function to set the text style. Customize the appearance and behavior of text boxes with CSS. Use the HTML tab of the Properties panel to view and edit the text box code.
