Dreamweaver でテンプレートを使用する方法 (コード付き)-dreamweaver-php.cn

ホームページ

開発ツール

dreamweaver

Dreamweaver でテンプレートを使用する方法 (コード付き)

不言

Sep 29, 2018 pm 02:56 PM

dreamweaver

この記事の内容は、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><!-- 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 组合键；

方法四：

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

删除可编辑区域：

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

修改编辑模板：

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

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

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

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

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

注:

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

Dreamweaverでテキストの位置を調整する方法 Apr 09, 2024 am 02:24 AM

Dreamweaver でのテキスト位置の調整は、次の手順で完了できます: テキストを選択し、テキスト位置調整ツールを使用して水平方向の調整を行います: 左揃え、右揃え、中央揃え; 2. 垂直方向の調整を行います: 上揃え、下揃え、垂直中央; 3. Shift キーを押し、矢印キーを使用して位置を微調整します; 4. ショートカットキーを使用して素早く整列します: 左揃え (Ctrl/Cmd + L)、右揃え (Ctrl/Cmd + R)、中央揃え(Ctrl/Cmd + C)。

Dreamweaver の Web ページ制作にビデオを追加する方法 Apr 09, 2024 am 01:42 AM

Dreamweaver を使用してビデオを埋め込む: ビデオ要素を挿入します。動画ファイルを選択してアップロードします。ビデオのタイプ、URL、サイズ、自動再生、コントロールを設定します。ビデオを挿入します。オプション: ビデオの外観をカスタマイズします。

Dreamweaverで行間を調整する方法 Apr 09, 2024 am 03:00 AM

Dreamweaver での行間隔の調整は 4 段階のプロセスです。テキストを選択し、段落パネルを開き、行間隔オプションを調整し、最後に [OK] をクリックして変更を適用します。

Dreamweaver に写真を追加する方法 Apr 09, 2024 am 03:30 AM

Dreamweaver に画像を挿入するには、[挿入] メニューをクリックして [画像] を選択し、画像ファイルに移動して選択します。その他の方法には、ファイルをドラッグアンドドロップする方法や、HTML コードを直接挿入する方法があります。プロパティの調整には、サイズの変更、配置、境界線の追加、代替テキストの入力が含まれます。

WebデザインソフトDreamweaverを中国語に設定する方法 Apr 09, 2024 am 12:39 AM

Dreamweaver を中国語に設定するには、次の手順に従います: Dreamweaver を開き、環境設定でユーザーインターフェイス言語を簡体字中国語または繁体字中国語に変更し、Dreamweaver を再起動します。[ヘルプ] メニューの [Dreamweaver について] 項目をチェックして言語設定を確認します。

Dreamweaverのフォントを設定する方法 Apr 09, 2024 am 02:54 AM

Dreamweaver でフォントを設定するには、[プロパティ] パネルを使用してフォント、サイズ、色を選択します。 CSS を使用して、Web サイト全体または特定の要素のフォントを設定します。「font」タグを使用して、HTML コード内でフォントを直接設定します。

Dreamweaverでテキストボックスを追加する方法 Apr 09, 2024 am 01:15 AM

Dreamweaver でテキストボックスを追加する: 新しいドキュメントを開き、テーブルテキストフィールドを挿入します。 [プロパティ] パネルで、名前、高さ、幅、折り返しなどのテキストボックスのプロパティを設定します。テキストボックスをダブルクリックしてテキストを入力し、テキスト編集機能を使用してテキストスタイルを設定します。 CSS を使用してテキストボックスの外観と動作をカスタマイズします。 [プロパティ] パネルの [HTML] タブを使用して、テキストボックスコードを表示および編集します。