搜尋
首頁開發工具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刪除
在dreamweaver的网页设计中如何设置图片居中在dreamweaver的网页设计中如何设置图片居中Apr 08, 2024 pm 08:45 PM

在 Dreamweaver 中将图片居中:选择要居中的图片。在“属性”面板中,设置“水平对齐”为“居中”。(可选)设置“垂直对齐”为“居中”或“底部”。

dreamweaver如何创建书签dreamweaver如何创建书签Apr 08, 2024 pm 08:48 PM

Dreamweaver 书签功能允许您轻松标记和快速导航到代码中的特定位置。创建书签的步骤包括:1. 定位代码位置;2. 创建书签(编辑 > 书签 > 新书签,输入名称和描述);3. 保存书签;4. 使用书签(编辑 > 书签 > 跳转到书签,从列表中选择所需书签)。

dreamweaver如何设置为中文dreamweaver如何设置为中文Apr 08, 2024 pm 09:15 PM

要将 Dreamweaver 设置为中文界面,请依次执行以下步骤:1. 打开 Dreamweaver;2. 单击“编辑”菜单;3. 选择“偏好设置”;4. 在“偏好设置”窗口中,选择“界面”选项卡;5. 在“界面语言”下拉菜单中,选择“简体中文”或“繁体中文”;6. 单击“确定”以保存更改。

webstorm和dw哪个好用webstorm和dw哪个好用Apr 08, 2024 pm 07:51 PM

WebStorm 比 Dreamweaver 更好,因为它支持更广泛的语言和工具,并提供更强大的代码导航和调试功能。Dreamweaver 更适合初学者,因为它提供视觉设计工具和 Adobe Creative Cloud 集成。

webstorm和dreamweaver哪个好webstorm和dreamweaver哪个好Apr 08, 2024 pm 08:00 PM

针对专业 Web 开发人员,WebStorm 提供了更全面的功能和更佳的生产力,包括语言支持、IDE 功能、代码质量优化和生产力工具。而 Dreamweaver 更适合于初学者或静态网站开发。

dreamweaver中如何设置超链接dreamweaver中如何设置超链接Apr 08, 2024 pm 09:00 PM

在 Dreamweaver 中设置超链接的步骤如下:选择文本或图像菜单栏中选择 "插入" > "链接"输入链接 URL设置可选链接属性(如目标框架、标题、访问键)单击 "确定" 创建超链接

dw中怎么用php修改表数据库dw中怎么用php修改表数据库Mar 23, 2023 pm 04:35 PM

​Dreamweaver 是一个非常流行的 Web 开发工具,它提供了很多强大的功能,包括快速开发 Web 应用程序、设计网页、管理数据库等。如果您是 PHP 开发者,您可能已经熟悉了 Dreamweaver 中的一些基本功能。在本文中,我们将重点介绍如何使用 DW 中的 PHP 功能来修改您的数据库。

dreamweaver如何调整字体dreamweaver如何调整字体Apr 08, 2024 pm 08:54 PM

通过 Dreamweaver 调整字体设置,您可以进行以下操作:选择字体系列和大小:在"属性"面板中,从下拉列表中选择所需选项。调整字体颜色:点击"文本颜色"选项,选择所需的文本颜色。调整字体粗细和样式:从下拉列表中选择所需的粗细和样式。调整其他设置:包括行高、字体变体和字符间距。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

EditPlus 中文破解版

EditPlus 中文破解版

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

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版