- Dreamweaver ユーザーガイド
- はじめに
- Dreamweaver と Creative Cloud
- Dreamweaver のワークスペースとビュー
- サイトの設定
- ファイルの管理
- レイアウトとデザイン
- CSS
- ページコンテンツとアセット
- ページプロパティの設定
- CSS 見出しプロパティおよび CSS リンクプロパティの設定
- テキストの操作
- テキスト、タグ、属性の検索と置換
- DOM パネル
- ライブビューでの編集
- Dreamweaver でのドキュメントのエンコード
- ドキュメントウィンドウでのエレメントの選択および表示
- プロパティインスペクターでのテキストプロパティの設定
- web ページのスペルチェック
- Dreamweaver での区切り線の使用
- Dreamweaver でのフォントの組み合わせの追加と変更
- アセットを使用した作業
- Dreamweaver での日付の挿入と更新
- Dreamweaver でのお気に入りアセットの作成と管理
- Dreamweaver でのイメージの挿入と編集
- メディアオブジェクトの追加
- Dreamweaver でのビデオの追加
- HTML5 ビデオの挿入
- SWF ファイルの挿入
- オーディオエフェクトの追加
- Dreamweaver での HTML5 オーディオの挿入
- ライブラリ項目の操作
- Dreamweaver でのアラビア語およびヘブライ語のテキストの使用
- リンクおよびナビゲーション
- jQuery Widget と効果
- web サイトのコーディング
- Dreamweaver でのコーディングについて
- Dreamweaver のコーディング環境
- コーディングの環境設定
- コードカラーリングのカスタマイズ
- コードの記述と編集
- コードヒントとコード補完機能
- コードの折りたたみと展開
- スニペットでコードを再利用する
- 構文チェックコード
- コードの最適化
- デザインビューでのコードの編集
- ページのヘッドコンテンツの操作
- Dreamweaver でのサーバーサイドインクルードの挿入
- Dreamweaver でのタグライブラリの使用
- Dreamweaver へのカスタムタグの読み込み
- JavaScript ビヘイビアーの使用(基本操作)
- JavaScript に組み込まれているビヘイビアーの適用
- XML および XSLT について
- Dreamweaver でのサーバーサイド XSL 変換の実行
- Dreamweaver でのクライアントサイド XSL 変換の実行
- Dreamweaver での XSLT の文字エンティティの追加
- コードのフォーマット
- 製品間ワークフロー
- テンプレート
- Dreamweaver テンプレートについて
- テンプレートおよびテンプレートから作成されたドキュメントの認識
- Dreamweaver テンプレートの作成
- テンプレート編集可能領域の作成
- Dreamweaver でのリピート領域およびテーブルの作成
- テンプレートの任意の領域の使用
- Dreamweaver での編集可能なタグ属性の定義
- Dreamweaver でネストされたテンプレートを作成する方法
- テンプレートの編集、更新、削除
- Dreamweaver での xml コンテンツの書き出しおよび読み込み
- 既存のドキュメントでのテンプレートの適用または削除
- Dreamweaver テンプレートでのコンテンツの編集
- Dreamweaver でのテンプレートタグのシンタックスルール
- テンプレート領域のハイライト表示の環境設定
- Dreamweaver でテンプレートを使用する利点
- モバイルとマルチスクリーン
- 動的サイト、ページおよび web フォーム
- web アプリケーションについて
- アプリケーション開発のためのコンピューター設定
- データベース接続のトラブルシューティング
- Dreamweaver での接続スクリプトの削除
- 動的ページのデザイン
- 動的コンテンツソースの概要
- 動的コンテンツのソースの定義
- ページへの動的コンテンツの追加
- Dreamweaver での動的コンテンツの変更
- データベースのレコードの表示
- Dreamweaver でのライブデータの入力とトラブルシューティング
- Dreamweaver でのカスタムサーバービヘイビアーの追加
- Dreamweaver を使用したフォームの作成
- フォームを使用したユーザーからの情報の収集
- Dreamweaver での ColdFusion フォームの作成と有効化
- web フォームの作成
- フォームエレメントの HTML5 サポート強化
- Dreamweaver を使用したフォームの開発
- アプリケーションのビジュアル開発
- web サイトのテスト、プレビュー、パブリッシュ
- トラブルシューティング
Dreamweaver でのサイトの動作を確認して、Dreamweaver でサイトを作成することのワークフローおける重要性を理解しましょう。
Dreamweaver における "サイト" という用語は、Web サイトのドキュメントを保存するためのローカルまたはリモートの場所を指します。Dreamweaver のサイトには、Web のすべてのドキュメントの整理と管理、Web サーバーへのサイトのアップロード、リンクの追跡と管理、ファイルの管理と共有を行う方法が用意されています。Dreamweaver の機能を完全に利用するには、サイトを定義する必要があります。
Adobe Dreamweaver サイトは、Web サイトのすべてのファイルとアセットの集まりです。コンピューターで Web ページを作成して Web サーバーにアップロードし、更新済みファイルを転送して保存することにより Web サイトを維持できます。また、Dreamweaver を使用しないで作成した Web サイトも編集および維持することができます。
Dreamweaver でサイトを定義する理由
サイトを設定(または定義)しなくても Dreamweaver で作業を実行することは可能です。
しかし、サイトを定義すると、次に示すような多くの利点があります。
- 破損リンクを防ぎ、ファイルを移動または名前変更する場合に、サイト全体でファイルが自動更新されます。
- サイト全体で検索と置換の操作を実行できるので、生産性が大幅に向上します。
- サイトを簡単にパブリッシュして、ローカルハードディスクと Web またはステージングサーバー上のリモートファイル間でファイルを同期できます。
Dreamweaver の機能を最大限に活用するには、最初にサイトを定義してください。サイトの定義について詳しくは、ローカルバージョンのサイトの設定を参照してください。
Dreamweaver サイトの構成要素
Dreamweaver では、Web サイトに関連付けられているローカルコンピューター上のすべてのドキュメントがサイトで整理されます。また、リンクの追跡と維持、ファイルの管理、Web サーバーへのサイトファイルの転送もサイトで行われます。
Dreamweaver サイトは、最大で 3 つの部分、つまり 3 つのフォルダーで構成されます。これは、開発環境と、作成する Web サイトのタイプによって異なります。
- ローカルフォルダー:作業ディレクトリです。通常は、ハードディスク上のフォルダーです。Dreamweaver はこのフォルダーをローカルサイトのルートとして表示します。このフォルダーをネットワークサーバー上に配置することもできます。詳しくは、ローカルバージョンのサイトの設定を参照してください。
- リモートフォルダー:ファイルの保存先であり、Web サーバーを実行しているコンピューター上に配置されます。多くの場合、Web サーバーは、サイトを Web に公開するためのコンピューターです(この役割を果たさない Web サーバーもあります)。
サイトの作成または更新が完了したら、インターネット上のリモートサーバーにサイトをパブリッシュできます。また、必要なときにファイルを更新するためのローカルコピーが保存されます。
詳しくは、Publishing server への接続を参照してください。
- テストフォルダー:Dreamweaver によって動的ページが処理されるフォルダーです。動的フォーム(PHP コンテンツ)がある場合は、サイトのテストフォルダーを設定できます。
詳しくは、テストサーバーの設定を参照してください。
Dreamweaver サイトの定義に必要な操作は、ローカルフォルダーの設定だけです。ただし、Web サーバーへのファイルの転送や Web アプリケーションの開発をする場合は、リモートサイトとテストサーバーの情報も追加する必要があります。
ローカルフォルダーとリモートフォルダーの構造について
Dreamweaver を使用してリモートフォルダーに接続する場合、サイト定義ダイアログボックスの「サーバー」カテゴリで接続するリモートフォルダーを指定する必要があります。指定したリモートフォルダー("ホストディレクトリ" ともいいます)は、Dreamweaver サイトのローカルルートフォルダーと一致している必要があります (Dreamweaver サイトの最上位レベルにあるフォルダーが、ローカルルートフォルダーです)。ローカルフォルダーと同じようにリモートフォルダーにも任意の名前を付けることができますが、ISP(インターネットサービスプロバイダー)により、各ユーザーアカウントに対して public_html や pub_html などの名前が最上位レベルのリモートフォルダーに付けられるのが一般的です。自分のリモートサーバーを自分自身で管理し、リモートフォルダーに任意の名前を付けることができる環境の場合、ローカルルートフォルダーとリモートフォルダーに同じ名前を付けることをお勧めします。
以下の例は、左側にサンプルローカルルートフォルダーを、右側にサンプルリモートフォルダーを示しています。ローカルマシンのローカルルートフォルダーは、リモートフォルダーのサブフォルダーやディレクトリ構造内のリモートフォルダーの上位に位置するフォルダーにマップされるのではなく、Web サーバーのリモートフォルダーに直接マップされます。
上の例は、ローカルルートフォルダーと最上位レベルのリモートフォルダーが、ローカルマシンとリモート Web サーバー上にそれぞれ 1 つずつある場合を示したものです。ローカルマシン上で複数の Dreamweaver サイトを管理する場合、リモートサーバー上にも同じ数のリモートフォルダーが必要になります。この場合、上の例には当てはまらなくなるため、public_html フォルダー内に複数のリモートフォルダーを作成し、ローカルマシンの対応するローカルルートフォルダーにこれらのリモートフォルダーをマップする必要があります。
最初にリモート接続を行う場合、通常、Web サーバーのリモートフォルダーは空になっています。Dreamweaver を使用してローカルルートフォルダー内のファイルをすべてアップロードすると、リモートフォルダーにこれらの Web ファイルがすべて格納されます。リモートフォルダーとローカルルートフォルダーのディレクトリ構造は、常に同じにしておく必要があります (つまり、ローカルルートフォルダー内のファイルとフォルダーに対して、リモートフォルダー内のファイルとフォルダーを 1 対 1 で対応付けておく必要があります)。リモートフォルダーの構造がローカルルートフォルダーの構造と一致しない場合、Dreamweaver によって間違った場所にファイルがアップロードされるため、サイトのビジターがこれらのファイルを参照できないことがあります。また、フォルダーとファイルの構造が一致していない場合、イメージやリンクのパスが切断されやすくなります。
Dreamweaver をリモートルートフォルダーに接続するには、そのリモートルートフォルダーが存在している必要があります。Web サーバー上でリモートフォルダーとして機能するフォルダーが指定されていない場合、新しくフォルダーを作成するか、ISP のサーバー管理者にフォルダーの作成を依頼してください。