Dreamweaver中如何使用模板（附程式碼）-dreamweaver-PHP中文網

首頁

開發工具

dreamweaver

Dreamweaver中如何使用模板（附程式碼）

不言

Sep 29, 2018 pm 02:56 PM

dreamweaver

這篇文章帶給大家的內容是關於Dreamweaver中如何使用模板（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

範本的作用：

一、有助於維持整個網站外觀與風格的一致性；

#二、在範本中進行修改後，所有套用範本的頁面都會自動更新。

簡單範例：

// 在其.dwt 範本中

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

登入後複製

// 在頁面中，宣告套用範本的位址，以及區域等

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

登入後複製

// 在範本區域內，設定可編輯區域

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

登入後複製

TR
>######### ##############TR####### ######## #<TD><a href="tempTest_03.html "><img src="Temp_images/left_4.gif" 邊框#="0 ">a>TD>##
##TR>
 TR>
 <TD><img src ="Temp_images/left_5.gif"##>TD >
#TR>
<TR#>
## #<TD
>< ;#img #src##> /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"###### #>##########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" #--> # width
="450" border="0"##>


###<######tr######>######### ######<######td ### ####height######="50"######>####### #################<td 寬度="450"> td>
 <td >#> td>
 #tr>
# <tr> ;
 <td>td>
 <td 對準="右"##> 
 <#h1 >歡迎來到我的網站！< ;/h1>
## < ;br><#br> <br#><br#> ;<br#>
# 旭鋼# < br#><>

## 2008.10.26 #
# td>
 #<td##>
# ############ ####### ## ###### ######<######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>

登入後複製

注意要点：

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

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1325

PHP教程

1272

C# 教程

1252

Related knowledge

dreamweaver怎麼調整文字位置 Apr 09, 2024 am 02:24 AM

Dreamweaver 中調整文字位置可以透過以下步驟完成：選擇文本，使用文字位置調整器進行水平調整：左對齊、右對齊、居中對齊；2. 進行垂直調整：上對齊、下對齊、垂直居中；3. 按Shift 鍵並使用方向鍵微調位置；4. 使用快速鍵快速對齊：左對齊（Ctrl/Cmd + L）、右對齊（Ctrl/Cmd + R）、居中對齊（Ctrl/Cmd + C）。