イメージマッピング(クリティカルマッピング)

イメージマッピング(クリティカルマッピング)

■メリット
・1つの画像の中で別の場所でリンクを設けたいときに使います
・1つ1つ、異なる形状のリンクを作成することが出来ます

■やり方(reanweaverを使った例)
①画像を用意します。

②表示形式を「分割」にし、右の下矢印を押して「デザイン」を選択します。

③imgタグで画像を挿入します

④「ウィンドウ」→「プロパティ」でプロパティを表示します。

⑤対象の画像をクリックすると下のプロパティに情報が出てきます。

通常時は矢印が選択されているのですが、

隣を選択するとそれぞれ

四角形・円・多角形を作成することができます。

例えば四角形を選択し、四角形を書くと自動的にコードを記載してくれます。

⑥hrefを記載できるようになるため、リンクを貼り付けることができます。

完成したものがこれです。
四角形をクリックしてみましょう。

使う場面はたくさんあると思います。

emmetを使ってコーディングのスピードアップを目指す。

今回はコーディングソフトで使用するプラグイン「emmet」についてです。
emmetを導入することで短文で構造を指定することができます。

■DreamweaverでのEmmetのインストール
http://emmet.io/download
emmet1

GitHubに転送されるのでEmmet.zxpの所をクリックするとダウンロードできます。
emmet2
ADOBE EXTENSION MANAGERを起動して「ファイル>拡張機能をインストール」を選択し
先ほどダウンロードしたEmmet.zxpを選ぶとインストールが始まります。
emmet3

■emmetの使い方

Emmetをインストールしている状態で

Ctrl+Eで展開

たとえばimgと入力して展開してみます。

img
展開(Ctrl+E)すると

一瞬でimgタグの中にsrcとaltが生成されました。

次にこの短縮系
ul>li
展開(Ctrl+E)すると

ul内にliが生成されました。
>を使う事で下層に対して指定ができます。

最後に少し難しい短縮系
ul>li.item$*5
展開(Ctrl+E)すると

ul内のliにクラス.itemに$で連番を指定し、*でliに対しての数を指定しています。

面倒くさい構造とクラス指定がたった1行でできてしまいました。

最後に参考サイトとしてチートシートが公開されているので載せておきます。

http://docs.emmet.io/cheat-sheet/

DreamWeaverでの検索/置換機能

今回はDreamWeaverでの検索/置換機能についてです。

DreamWeaver内で[ctrl+F]を押すと検索/置換ウィンドウが開きます。
dw7

ここからコード内から検索/置換機能を使っていきます。
dw2

まずは検索機能
例として「pic3」と含んだテキストを探したい場合

dw3
検索項目に「pic3」と入力をし「次を検索」を選択します。

すると、
dw4
コードの中から「pic3」が含まれる箇所が選択されます。

次に置換機能

例として先ほどのコードのタグを「ul」から「ol」に変更したくなった場合
検索に「ul」、置換に「ol」と入力し
置換ボタンを選択します。

dw5

すると、
dw6
ul
「ul」が「ol」に置き換わりました!

この機能は特に同じ表記を一括で変更したい場合とても便利です。

先ほどのコードで画像の拡張子を「gif」から「png」変えたいとき
dw7
検索「gif」 置換に「png」を入力しすべてを置換を選択!
dw8
一瞬ですべて置き換わりました。
手打ちでいちいち修正していると時間がかかってしまう作業もこれで時短!

基本としては以上ですが、正規表現を使うとより高度な検索/置換機能が使えるので
もし後で面倒くさい修正が必要な場合でも使いこなせば
箇所を指定してワンクリックで終える事もできるのも夢じゃない。
まさにドリームな機能!
DreamWeaverの検索/置換機能でした。