トップページ > 便利な小技 > Dreamweaverで簡単に

CSSレイアウト[便利な小技]

Dreamweaverで簡単に

CSSの使い方から外れるが、Dreamweaverでは「ポップアップウィンドウ」と「スワップイメージ」がとても簡単にできるのでメモしておく。
Macromedia Dreamweaver 8とAdobe Dreamweaver CS3で確認。

Dreamweaverで簡単に「ポップアップウィンドウ」を作る
Dreamweaverで簡単に「スワップイメージ」を作る

ただし、DWで書き出したままだと不都合がある。
「href属性を手動で書き加えること」「末尾に return false; を手動で書き加えること」が必要。

簡単なポップアップウィンドウなら、Dreamweaverを使わなくてもJavaScriptで簡単にできる。
そのコードはこちら。

Dreamweaverで簡単に「ポップアップウィンドウ」を作る

注意:ブラウザの設定で「ポップアップウィンドウを開かない」にしている場合は解除してからご覧ください。

左の写真をクリックすると、別ウィンドウでJPEG画像が開く。

また、下のテキストをクリックすると別ウィンドウでHTMLファイルが開く。
 クリックして開く

このように画像にもテキストにも、リンクを別ウィンドウで開かせることが簡単にできる。

作り方は下記の通り。(画面はDreamweaver8)

【1】ビヘイビアパネルを使う
リンクさせたい要素(画像やテキスト)に「#(ヌルリンク)」を付け、選択してから、
→「ビヘイビア」パネルの「+」を長押し。
→「ブラウザウィンドウを開く」を選択。

【2】「ブラウザウィンドウを開く」ダイアログで必要事項を入力
「参照」でポップアップさせたいファイルを選ぶ
→ポップアップウィンドウの幅・高さなど必要事項を入力。
→OKを押す。

これでポップアップウィンドウはできあがり。いたって簡単。
Dreamweaverを持っていなくても、<head>部に入れるJavaScriptのコードと、リンク元(画像の場合は<img>、テキストの場合は<a>タグ内)に入れるコードをコピペすれば使える。コードはこちら

● 手動で「return false;」を入れる
上記のままだと、リンクをクリックした時、元ウィンドウをスクロールしていた場合、画面上まで戻る。
これでは、ポップアップウィンドウを閉じた後、先程まで読んでいた場所がわかりづらい。
そこで、スクロールがトップに戻ることを防ぐために、

return false;

と手動で追加する。
書き入れる場所は<img>や<a>タグのjs部分の最後尾。(結局面倒くさくなるけど)

画像<img>の場合は下記のコードになる。
<a href="#">
<img src="img/photo-mini.jpg" alt="" width="135" height="115" border="0"
onclick="MM_openBrWindow('img/photo.jpg','','resizable=yes,width=320,height=320'); return false;" />
</a>

ちなみに「return false;」を入れない場合のテストはコチラをクリック。元ウィンドウ(このウィンドウ)のスクロール位置に注目。

● 手動でhref属性にリンク先のURLを記述する
このままリンク先が#(ヌルリンク)のままだと、
・リンク先URLがステータスバーに表示されない。
・ポップアップでなく別ウインドウで表示させたくても開けない。
・JavaScriptがOFFだとリンク先を閲覧できない。

という問題がある。これをさけるために、#(ヌルリンク)の部分にはリンク先のURLを書いておくこと。

ここでも「return false;」は必ず末尾にいれること。 「return false;」を入れない場合のテストはコチラをクリック。元ウィンドウ(このウィンドウ)の様子に注目。

簡単にできるJavaScriptのポップアップ

ちなみに、Dreamweaverなど使わなくても簡単なポップアップウィンドウならJavaScriptでできる。
Dreamweaverだと、属性(ツールバーやステータスバーなど)の有無を1つのダイアログで指定できるので楽だというだけ。

下記のコードでOK。
ここでもhref属性にはURLを記述し、return false; を最後に付けること。
<a href="sample09_popjs.html"
onClick="window.open(sample09_popjs.html','subwin','width=660,height=160'); return false;">
JavaScriptで簡単にできるポップアップウィンドウ</a>

上記のコードで作ったサンプルはこちら→ JavaScriptで簡単にできるポップアップウィンドウ

Dreamweaverの「スニペット」で「閉じる」ボタンを作る

Dreamweaverの「スニペット」パネルは、色々なコードがあらかじめ用意されている。スライドショーやランダムイメージなどいろいろ。
自分で作ったコードも登録できる。例えば先程の「; return false;」を登録しておけば楽。

Dreamweaverの「スニペット」パネルに「閉じる」ボタンが用意されているので、先程のポップアップのHTMLファイルにも簡単に付けられる。

まず「閉じるボタン」を付けたいHTMLファイルを開き、ボタンを置きたい箇所にカーソルを置く。
「スニペット」パネル →「フォームエレメント →「ウィンドウを閉じるボタン」→ ダブルクリック。
これで自動的にフォームボタンが書き込まれる。

Dreamweaverで簡単に「スワップイメージ」を作る

左の画像にロールオーバーすると別の画像に切り替わる。このようなスワップイメージをDreamweaverで簡単に作ることができる。

CSSによるナビゲーションに変わる利用も可。

スワップイメージに前述のポップアップウィンドウを追加することも可。左の画像をクリックすると別ウィンドウが開く。

作り方は下記の通り。(画面はDreamweaver8)

【1】ビヘイビアパネルを使う
先程のポップアップウィンドウと同様にビヘイビアパネルを使う。
スワップイメージにしたい画像に「#(ヌルリンク)」を付けて、選択してから、
→「ビヘイビア」パネルの「+」を長押し。
→「スワップイメージ」を選択。

【2】「ブラウザウィンドウを開く」ダイアログで必要事項を入力
「参照」でポップアップさせたいファイルを選ぶ
→「プリロードイメージ」をチェック。bodyの読み込み時にスワップする画像も読みこませる。
→「onMouseOutでイメージを復元」をチェック。ロールアウトすると元の画像に戻る。
→OKを押す。

これでスワップイメージはできあがり。
これも、リンクさせるときには#(ヌルリンク)をリンク先のURLに書き換えること。
Dreamweaverを持っていなくても、<head>部に入れるJavaScriptのコードと、リンク元<img>に入れるコードをコピペすれば使える。コードはこちら