Cafi Netつながる情報技術
  1. トップ>
  2. DW CS5 の使い方>
  3. ロールオーバーイメージ

Dreamweaver CS5 のロールオーバーイメージ

プラグインに続いて、外部ファイルの表示です。Adobe Dreamweaver CS5(アドビ ドリームウィーバー CS5)の使い方を確認します。

Adobe Dreamweaver CS5 & CS5.5 * ツールバーの表示

Dreamweaver CS5 の表示メニュー

カラーアイコンやツールバーの表示

メニューバー「表示」の外部ファイルの表示は、外部ファイルの表示と非表示を切り替える機能です。

デフォルト(初期設定)は、外部ファイルの表示にチェックが入っています。

Dreamweaver CS5 のカラーアイコン

カラーアイコンにチェックを入れると、上の画像のようにアイコンが常にカラーになります。(通常はマウスカーソルを合わせた時にカラーになります)

カラーアイコンにすることで、アイコンが分かりやすくなりますし画面も明るくなります。

パネルの非表示(F4)は、画面右のパネルグループと画面下のプロパティインスペクターを非表示にする機能です。

作業を行うドキュメントウィンドウの領域が広くなります。

ツールバーを選択して表示

ツールバーでは、各種ツールバー(ドキュメントツールバー/標準ツールバー/ブラウザーナビゲーションツールバー/スタイルレンダリングツールバー)の表示と非表示を切り替えます。

表示したいツールバーにチェックを入れると、画面上部に表示されます。

ツールバーは、ドラッグ&ドロップで移動できます。

パネルのように、ツールバーの位置から切り離して使用することもできます。

標準ツールバーには、すべて保存/コピー/ペースト/取り消し/やり直しなどのボタンが配置されています。

関連ファイルは、選択した関連ファイルに表示を切り替える機能です。

関連ファイルオプションは、フィルターや関連ファイルの更新を行う機能です。

Dreamweaver CS5 のコードナビゲーター

コードナビゲーターは、選択している位置に関連するコードソースのリストを表示する機能です。

上の画像の例では、関連する CSS ルールが表示されています。

表示された CSS ルールを選択すると、ルールの編集位置へ移動できます。

Spry ツールヒントを表示は、Spry ツールヒントの表示と非表示を切り替える機能です。デフォルトは、表示する設定になっています。

タグやイメージオブジェクトの追加

タグ選択ダイアログボックス

タグを選択すると、タグ選択ダイアログボックスが表示されます。(コード内で右クリックからでも表示できます)

HTML タグ/CFML タグ/ASP.NET タグなどから、目的のタグを選択してコード内に表示します。

イメージを選択すると、イメージソースの選択ダイアログボックスが表示されます。

イメージファイルを選択して、OK を選択します。

ロールオーバーイメージを作成

イメージオブジェクトでは、イメージプレースホルダー/ロールオーバーイメージ/Fireworks HTML の配置を行います。

イメージプレースホルダーとは、最終的なイメージを配置するまで、仮の画像を配置しておく機能です。

イメージプレースホルダーダイアログボックスで、名前/幅/高さ/カラー/代替テキストを入力して OK を選択します。

ロールオーバーイメージでは、ロールオーバー(マウスカーソルを合わせると画像が切り替わる設定)の作成を行います。

ダイアログボックスで、イメージ名/元のイメージ/ロールオーバーイメージ(切り替わる画像)/代替テキスト/クリック時に移動する URL を入力して OK を選択します。

ロールオーバーイメージが自動的に設定されます。