back next home
 
  Dreamwever3(または4)で細かな部分の設定をしてみたいと思います。「JavaScript」で書かれたり、「CSS」で書かれたりする部分の解説なのですが、いろいろな本を見てもなかなか上手く説明されていませんね。
私なりに解釈した設定もありますが、いくつか紹介していきたいと思います。
最初は、先日教え子(?)から質問があったもので、「小さなウインドウで画像を表示したい」と言うものです。
 
  第1回)エコノミーサイズでウインドウを開く  
  最近どのサイトでもかなり取り入れられているようですが、画像でリンクさせるときは問題なく(onClick)が選べるのですが、文字にリンクをつけるときが問題になります。onClickしかないので、リンク個所かどうかが相手に伝わりません。その辺がDreamweaver(以下DW)でなかなか上手く設定できないようです。読み込み時に別ウインドウを立ち上げる(OnLoad)は問題ないのですが、クリックさせて立ち上げる方法が上手く設定できないようです。もちろん「JavaScript」を直接ソースに書く方法が、1番良い方法のような気もしますが、それではDWの説明にならないのでいろいろ考えました。
とりあえず最初は直接ソースに書き込んで見ました。以下サンプルです。

【サンプル】
ここをクリックするとウインドウが開きます。(クリックすると300px×400pxのウインドウが開きます)

<HEAD>タグの中に以下のスクリプトを書き込みます。一応wopen1という命令にしたので、
他をクリックして違うウインドウを開くときにはwopen2やwopen3と増やしていけばよいわけですね。

<script language="JavaScript">
<!--
     function wopen1(){
     window.open( "test02.html", "", "width=300,height=400" ); } //
     -->
</script>


さらにクリックする文字またはボタンのところにリンクを付けます。

ここを<A HREF=""JavaScript:wopen1()">クリック</A>するとウインドウが開きます。

最初の部分で書いたファイル名のファイルも用意してくださいね。(これが無いとどうしようもない)「test02.html」と
いうファイル名にしてありますが、開くファイルの名前に変えてください。

また、開いたウインドウには閉じるボタン(文字)を付けました。考え方は同じです。文字のリンクの部分の表示は
問題無い(上記の開くリンクと同じ考え方です)と思います。ヘッドの中に入れるスクリプトを書いておきます。

<script language="JavaScript">
<!--
     function wClose( ){
     window.close(); }
     -->
</script>


さて、DWで指示する方法は「ビヘイビア」ウインドウでやっていくわけですね。
何冊かの参考書(解説書)を見ましたがこの設定をチャンと説明しているものがありませんでした。もっと探せばあると思いますが…。私なりに考えたものを説明します。もっと違うやり方があったら御免ね。
1.メニューバーから[ウインドウ]→[ビヘイビア]を選びます。
もちろんこの時ボタン(リンク文字)を設定するファイルを開いていてくださいね。
     
 

2.ビヘイビアウインドウが開きます。
この時ヘッダーの部分にビヘイビア−<body>アクションと表示されています。それぞれの状況によって変わりますが、今回私は単にリンクされる文字を打っただけなので、選択タグが<body>しかなかったという事です。

その事が後の設定で問題になりますが、とりあえずこのまま行きます。

     
 

3.プラスボタンで「ブラウザウインドウを開く」を選んでください。(画面ではその下のプラグチェックが選ばれていますが間違いです。)

4.下のウインドウが開きます。ここでいよいよ詳細を入力していくわけです。

A.表示するURL:もちろん開くウインドウのファイル名を入れます。また、画像ファイルダイレクトでもOKです。

B.ウインドウ幅とウインドウの高さ:開くブラウザウインドウのサイズをピクセル(px)で指定します。

C.属性:設定で開くウインドウに付加する機能が設定できます。何も無いウインドウであればチェックを入れる必要はありません。そのままで結構です。

D.ウインドウ名:開いたブラウザのヘッダー部分にウインドウ名を表示します。(タイトルみたいなものです)

設定が完了したらOKボタンを押してください。

  5.最後にアクションを指定します。どのようにしてそのウインドウを開くのかという事です。

最初[onLoad]が入っていますが、このままで行くと、ファイルが読み込まれ終了すると別ウインドウが自動的に開きます。その設定で良ければ、これで設定は完了です。

リンク文字(ボタン)をクリックしてウインドウが開くようにしたいときは、プルダウンメニューから[onClick]を選びます。
このまま一度F12(ブラウザでチェック)をしてみてください。どうです?なんとなくクリックするとブラウザウインドウが開きますよね。しかしこれは最初に言ったように<body>タグに設定されているため実はウインドウのどこをクリックしても反応してしまいます。試してみてください。ホラネ。
     
6.bodyタグに設定されているものを指定した文字に適応させなくてはいけません。<SPAN>タグを使います。以下のようにソースを編集してください。
<body bgcolor="#FFFFFF" onClick="MM_openBrWindow('test02.html','','width=300,height=400')">
このように書かれているソースの「onClick="MM_openBrWindow('test02.html','','width=300,height=400')"」この部分をコピー(カット)してください。コピー後その部分をとりさります。 クリックする部分に<SPAN>タグを付けます。
「ここを<SPAN>クリック</SPAN>してください。」とし、
先ほどコピーした「onClick="MM_openBrWindow('test02.html','','width=300,height=400')"」をペーストします。
ここを<SPAN onClick="MM_openBrWindow('test02.html','','width=300,height=400')">クリック</SPAN>してください。で完成です。これで「クリック」と言う文字だけに反応すると思います。が、しかし、何か辺ですよね。

そうです。マウスカーソルが反応しないのです。リンク指定で無いので手の形にならないのです。これでは困るので最後にもうひとつ設定します。スタイルシートで手の形に成るようにしてしまいます。
簡単にリンクを「#」で設定しても良いのですが、スタイルシートを定義した方がカッコいいです。
スタイルシートからは続編にします。
 
 
     
  Copyright © 1999-2002 hiroshi sato