Dreamweaver

Dreamweaverでイメージマップを作成する方法

デザインの打ち合わせ等で、デモサイトを見せたいという場合があります。

その際、サイトのコーディングまでを一からやるのでは時間とコストがかかってしまいますので、
ラフ画像を用いて簡単に画面遷移の様子などを見せられないか?
というときに、Dreamweaverの機能を活用できます。

Adobeのこちらのページを参考にいたしました。

Dreamweaverを起動し、ドキュメントを開く

Dreamweaverを起動し、新規ファイル、もしくは既存のファイルを開きます。
開くファイルはhtmlです。

ファイルを開いたあと、
タグの間に画像を挿入します。

■挿入方法
「挿入」⇒「イメージ」
メニューを選択すると、PC内の画像データが選択できるので、アップしたい画像を選びます。

するとコード内に追加されますので、
「コード」「分割」「デザイン」
の「デザイン」を選択し、ビジュアルモードに切り替えます。


※参考サイトより引用

画像を選択して、キャプチャのように反応していることを確認してください。

選択出来たら、画像の上にカーソルを合わせ、右クリックしてください。
「プロパティ」という項目がありますので選択してください。

このようなウインドウが出ますので、
「マップ(M)」という入力欄に任意で英数字を入れて下さい。
※必ず頭にアルファベットを入れて下さい。

赤枠の中の「ホットスポットツール」がありますので、
いずれかを選択後、画像の上でドラッグアンドドロップで配置します。

こちらのような表記が出ますので、「OK」

「リンク」のところに、ファイルのパス(リンク先)を設定し、ファイルを保存します。
保存したhtmlファイルをブラウザで開いてみると、リンクが設定されているのが確認できますので、試してみて下さいね。

お問い合わせフォーム

気になる方はコチラからお問い合わせ!

    必須お名前
    必須メールアドレス
    必須郵便番号
    必須ご住所
    必須電話番号
    ご相談内容
    必須メッセージ本文

    コメントを残す

    *