検索
ホームページ開発ツールdreamweaverDreamweaver でテンプレートを使用する方法 (コード付き)

この記事の内容は、Dreamweaver でのテンプレートの使用方法 (コード付き) です。必要な方は参考にしていただければ幸いです。

テンプレートの機能:

1. Web サイト全体の一貫した外観とスタイルを維持するのに役立ちます。

#2. 変更後。テンプレートでは、テンプレートが適用されるすべてのページが自動的に更新されます。

簡単な例:

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

TABLE border="0" セル間隔 ="0" セルパディング="0">
TR>
TD valign="top">

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>
##>
TD
>img src="Temp_images/left_9.gif ">TD> TR>
##src
="Temp_images/left_10.gif">TD> ;
##TABLE>
##
TD >
TD valign="トップ">
#
;!-- InstanceBeginEditable name="right"
-->
width=" 450"
border
="0">
tr> td

高さ
="50" > 
td >td width="450"> td>
td > td>
tr>
tr> ;
td>  td>
td align="右">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>

        
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 组合键;

方法四:

右键选中区域->“模板”->“新建可编辑区域”

删除可编辑区域:

选中编辑区域,“修改”->“模板”->“删除模板标记”,该区域将被锁定,不可编辑。

修改编辑模板:

「ウィンドウ」→「リソース」→「テンプレート」アイコン→編集したいテンプレートを選択し、ダブルクリックすると「ドキュメント」ウィンドウにテンプレートが表示されます。この時点でテンプレートを編集できます。

Web ページにテンプレートを適用します:

1. テンプレートを適用するドキュメント (つまり、ページ) を開きます。 " -> 「リソース」 - >「テンプレート」アイコン -> 適用するテンプレートを選択します;

3. テンプレートをパネルからページ ウィンドウにドラッグします (または [適用] をクリックします)ボタン);

4. 編集可能領域にデータを追加または書き込みます。

注:

ドキュメント内に既にコンテンツがある場合は、既存のコンテンツを移動する必要があります。テンプレートの編集可能領域を削除しないと、Dreamweaver によってコンテンツが削除されます。

以上がDreamweaver でテンプレートを使用する方法 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事は博客园で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、