搜尋
首頁開發工具dreamweaverDreamweaver中如何使用模板(附程式碼)

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

範本的作用:

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

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

簡單範例:

// 在其.dwt 範本中

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

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

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

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

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


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 TD#>src="Temp_images/head_3.gif"##>TD
>        TR
>        


>
    #TD>
#TR>
#TR>##    TD#> ;    ##    TABLE  #邊框="0" 單元格間距 ="0" cellpadding
="0"
>    ##TR
>        ##        ##TD valign="top"#>        
##########        ############ ####
TR>
            
##. >href="tempTest_00.html">#img ##s ="Temp_images/left_1.gif" 邊框="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" 邊框#="0 "
>a>TD
>
##        ##TR
>#########        ##############TR####### ######## #
TD>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"###### #>#### ##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" #-->            #  width
="450" border="0"##>

  
############    ############# #############td################################################################################################################################################################################################################' ###>##########
td 寬度="450"> td>
    
td >#> td>
  #tr>
#  tr> ;
    td> td>
    td 對準="右"##>br>
br>
      
#h1 >歡迎來到我的網站!
h1>
##      
br>
br>
#br>
br>
br#>
br#>
br> ;
br#>
#          旭鋼#    
br#>
>


##          2008.10.26
br>#    
# td>
    #
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="/static/imghwm/default1.png"  data-src="Temp_images/head_1.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/head_2.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/head_3.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></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="/static/imghwm/default1.png"  data-src="Temp_images/left_1.gif"  class="lazy"   border="0" alt="Dreamweaver中如何使用模板(附程式碼)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_01.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_2.gif"  class="lazy"   border="0" alt="Dreamweaver中如何使用模板(附程式碼)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_02.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_3.gif"  class="lazy"   border="0" alt="Dreamweaver中如何使用模板(附程式碼)" ></a></TD>
        </TR>
        <TR>
            <TD><a href="tempTest_03.html"><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_4.gif"  class="lazy"   border="0" alt="Dreamweaver中如何使用模板(附程式碼)" ></a></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_5.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_6.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_7.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_8.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_9.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></TD>
        </TR>
        <TR>
            <TD><img  src="/static/imghwm/default1.png"  data-src="Temp_images/left_10.gif"  class="lazy"   alt="Dreamweaver中如何使用模板(附程式碼)" ></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 id="欢迎来到我的站点">欢迎来到我的站点!</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

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3 Mac版

SublimeText3 Mac版

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

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境