- 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 でイメージマップを使用して、Web サイトのインタラクティブホットスポットを作成する方法について説明します.
イメージマップとは、ホットスポットと呼ばれる領域に分割されたイメージのことです。ホットスポットをクリックすると、新しいファイルが開くなどのアクションが実行されます。
クライアントサイドのイメージマップでは、ハイパーテキストリンク情報は HTML ドキュメントに保存されます。これは、ハイバーテキストリンク情報が別個のマップファイルに保存されるサーバーサイドのイメージマップの場合とは異なります。サイトビジターがイメージのホットスポットをクリックすると、関連付けられた URL が直接サーバーに送られます。クライアントサイドのイメージマップは、サーバーがクリック箇所を解釈しなくてもすむので、サーバーサイドのイメージマップよりも高速に処理されます。
Dreamweaver では、既存のドキュメント内のサーバーサイドのイメージマップへの参照は変更されません。したがって、同じドキュメント内で、クライアントサイドのイメージマップとサーバーサイドのイメージマップの両方を使用することができます。両タイプのイメージマップをサポートするブラウザーでは、クライアントサイドのイメージマップが優先的に使用されます。サーバーサイドのイメージマップをドキュメントに組み込むには、適切な HTML コードを記述する必要があります。
クライアントサイドのイメージマップの挿入
クライアントサイドのイメージマップを挿入するときは、ホットスポット領域を作成してから、ホットスポット領域をクリックしたときに開くリンクを定義します。
ホットスポット領域は複数作成できますが、それらは同じイメージマップの一部です。
-
ドキュメントウィンドウで、イメージを選択します。
-
プロパティインスペクターの右下隅にある縮小の三角形をクリックして、すべてのプロパティを表示します。
-
「マップ」フィールドに、イメージマップの一意の名前を入力します。1 つのドキュメント内で複数のイメージマップを使っている場合、それぞれのマップに異なる名前を付けてください。
-
イメージマップ領域を定義するには、以下のいずれかの操作を行います。
円形ツール を選択し、ポインターをイメージ上にドラッグして、円形のホットスポットを作成します。
長方形ツール を選択し、ポインターをイメージ上にドラッグして、長方形のホットスポットを作成します。
多角形ツール を選択し、頂点を 1 回ずつクリックして、不規則な形状のホットスポットを定義します。矢印ツールをクリックし、形状を確定します。
ホットスポットを作成すると、ホットスポットのプロパティインスペクターが表示されます。
-
「リンク」フィールドで、フォルダーアイコンをクリックし、ホットスポットがクリックされたときに開くファイルを選択するか、ファイルのパスを入力します。
-
ターゲットドロップダウンリストから、ファイルを開くウィンドウを選択するか、ウィンドウの名前を入力します。
現在のドキュメントで指定したすべてのフレームの名前がポップアップリストに表示されます。存在しないフレームを指定した場合、リンクされたページは、指定した名前の新規ウィンドウにロードされます。以下のターゲット名を選ぶこともできます。
- _blank は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
- _parent は、リンクされたファイルを、リンクが含まれている親フレームセットまたはフレームのウィンドウにロードします。リンクを含むフレームがネストされていない場合は、リンクされているファイルは、ブラウザーウィンドウ全体にロードします。
- _self は、リンクされたファイルを、リンクと同じフレームまたはウィンドウにロードします。このターゲットは初期設定なので、通常は指定する必要はありません。
- _top は、リンクされたファイルをブラウザーウィンドウ全体にロードして、すべてのフレームを削除します。
- _new は、リンクされたファイルを新規のブラウザーウィンドウにロードします。
注意:このターゲットオプションは、選択したホットスポットにリンクが含まれていない場合は使用できません。
-
「代替」ボックスに、テキスト専用ブラウザー、またはイメージを手動でダウンロードするよう設定されたブラウザーに表示する代替テキストを入力します。ブラウザーによっては、ユーザーがマウスポインターをホットスポット上に置いたときに、このテキストがツールヒントとして表示されます。
-
イメージマップに追加のホットスポットを定義するには、手順 4 ~ 7 を繰り返します。
-
イメージのマッピングを終了したら、ドキュメントの空白の領域をクリックし、プロパティインスペクターの表示内容を切り替えます。
イメージマップのホットスポットの修正
イメージマップ内に作成したホットスポットは簡単に編集できます。ホットスポット領域の移動、ホットスポットのサイズ変更や絶対位置のエレメント(AP エレメント)の前面/背面への移動などを行うことができます。
ホットスポットを含むイメージを他のドキュメントにコピーしたり、あるイメージから別のイメージにホットスポット(複数可)をコピー&ペーストしたりできます。イメージに関連付けられたホットスポットを、新規ドキュメントにコピーすることもできます。
イメージマップでの複数のホットスポットの選択
-
ポインターホットスポットツールを使用してホットスポットを選択します。
-
次のいずれかの操作を実行します。
目的のホットスポットを Shift キーを押しながらクリックします。
すべてのホットスポットを選択するには、Ctrl + A キー(Windows)または Command + A キー(Mac OS)を押します。
ホットスポットの移動
-
ポインターホットスポットツールを使用してホットスポットを選択します。
-
次のいずれかの操作を実行します。
新しい位置にホットスポットをドラッグして移動します。
Ctrl + 矢印キーを押すと、目的の方向へ 10 ピクセルずつホットスポットを移動できます。
矢印キーを押すと、目的の方向へ 1 ピクセルずつホットスポットを移動することができます。
ホットスポットのサイズ変更
-
ポインターホットスポットツール を使用してホットスポットを選択します。
-
ホットスポット選択ハンドルをドラッグし、ホットスポットのサイズまたは形状を変更します。